“雲雨傘”如何指導UI設計
工作中除了從視覺方面來思考優化解決問題，還可以運用雲雨傘的理論來拓展我們的思路。
感謝【海鹽社】的小夥伴：@海邊來的設計師 @風箏KK，感謝你們對本文的幫助。
現在很多產品中都會經常出現數據頁面，比如運動時間、學習時長和能力分析等，展現方式也多種多樣。
比起乾巴巴的數字，柱狀圖、曲線等圖形會更受歡迎，使用者也更容易理解。但有時候我們精心設計的資料圖還是會被抱怨說不易懂、太複雜，沒有起到預想中的效果。
比如我們公司的留學產品就收到過這樣的反饋：
使用者留言：院校分數的頁面太難懂了，研究了好半天。
設計師：“我已經做成資料圖了啊，圖比數字形象多了，分數是多少很容易看明白的。”
使用者覺得難懂，但設計師又覺得這種形式已經很容易理解了，接下來還能怎麼進行優化調整呢？那就再把圖擼一遍吧，於是調整顏色和字型大小、間距、排版，一波操作下來算正式完成了優化。上線後效果不明顯，看懂不直觀的問題還是存在，如下圖。
其實要解決這個問題除了視覺上的優化，我們還應該開拓一下思路，從更多方面來思考。使用者覺得一個數據頁面不好理解，可能並不只是視覺上的問題，還有可能是我們沒給到使用者想要的結果，看完沒有得出結果所以才會覺得難懂。
那難道資料不是結果嗎？資料有時候真的不是結果，它更多的是一個事實。關於這點我們可以用雲—雨—傘的理論來思考和指導設計，下面就結合例項來看看我是怎麼具體運用的吧。
目錄
一.什麼是雲雨傘
二.產品の雲雨傘問診
三.如何治療
四.前後效果大比拼
一.什麼是雲雨傘
雲—雨—傘理論說的是“天上出現烏雲，眼看就要下雨，帶上傘比較好。”這是對事實、分析和行動三者的比喻。
雲：代表事實，就像烏雲和太陽是用眼睛可以看到的事實。
雨：代表分析，從看到的事實現象進行分析，看到烏雲後分析出來可能是要下雨了。
傘：代表行動，因為分析出要下雨，所以帶上了傘。
舉個例子，就像減肥的女生，上秤看到自己體重增加了，然後回想罪惡的來源應該是晚餐吃紅燒肉了，決定明天晚上一定不吃肉！算了飯也別吃了。
這個例子裡面看到體重增加就是事實，發現熱量來源於晚餐的紅燒肉是對事實的分析，明天不吃晚餐是採取的行動。事實—分析—行動，這就是“雲—雨—傘”理論。
二.產品の雲雨傘問診
知道了什麼是雲—雨—傘理論，具體應該怎麼使用呢，怎麼用它指導設計呢？和醫生看病一樣，不如先來給產品做一個問診吧。
根據雲—雨—傘理論，提案中要包含三點：
1.事實、現狀（雲）
2.解釋分析（雨）
3.推薦的行動方案（傘）
做到這三點，才能算是一個合格的提案。那麼就可以根據這個，比對自己的產品有沒有做到這三點，比如我們公司的留學產品。
留學產品的一個功能是使用者填寫自己的各個考試分數，填完成績後，在每個學校的主頁可以看到自己的分數，和當前學校的最低錄取分、平均錄取分數的對比。瞭解學校的錄取情況，對比判斷自己被錄取的機率大不大。
這個功能一推出就很受歡迎，使用者很願意使用，但是逐漸也發現了問題，有不少使用者反映資料頁不是非常清楚，有點難理解，在決定優化這個頁面後，我先用雲雨傘的思維方式對產品進行了問題分析。
1.對應的功能
把雲雨傘對應到留學的產品中，設想完整的體驗需要為使用者提供哪些服務，我做成了 雲雨傘診斷表格 ，檢查產品是否有對應的功能。
事實是使用者分數和院校錄取分數，分析則需要判斷是否符合要求，行動是需要給使用者推薦應不應該申請這所學校。
從表格中可以看出來，留學產品做了“雲”，也就是事實——把學校的分數資訊告訴了使用者，列出了各項分數。但缺失了“雨”和“傘”，沒有做近一步的分析給出判斷，也沒有推薦的操作。使用者在看完資料圖後還需要自己去分析每項考試分數是不是佔優勢，申請能不能被錄取。
2.存在的問題
記錄檢查到的問題：
1.分數對比沒有做到清晰易懂，是高於還是低於視覺表達的不是很明確。
2.沒有明確的分析結果，使用者不知道是否符合，是不是具有優勢。
3.沒有推薦的行動，不知道應不應該申請該所學校。
三.如何治療
診斷完畢根據上面診斷的三個問題，就可以開始治療啦，結合例項來看一下吧。
1.優化視覺
為了讓資料的表現形式更加直觀易懂，把原來資料頁的圓環改成更加清晰方便對比的柱狀圖。
舊版：圓環的分數高低主要是用顏色來區分，紫色代表自己的分數，黃色和紅色分別代表最低和平均分，如果紫色在最末端就是自己的分數高於最低分和平均分，如果紅色在最末端就是平均分高於自己的分數。這種形式不是很直觀，而且圓環上資料排列順序不固定，使用者每次看都是不同的順序，不利於記憶。
新版：橫向柱狀圖，“我的、平均、最低”三項順序固定，視覺不用一直跳動，用長短表現分數高度，縱向對比非常明顯，一眼就能看出來那個分數高哪個分數低。
2.增加分析結果
新版加了“符合”字樣的印章LOGO，這是為了展示分析結果，使用者即使不看分數，只要看到自己獲得了符合的印章，就能知道本項成績已經符合學校的要求。同時加了星級評分，用數字來量化更加明確使用者是否符合學校要求，具不具有優勢。
在“我的”成績高於平均分的時候就是符合條件的，可以獲得符合的印章；相反如果低於最低分，就是不符合學校要求也就沒有印章。如果這所學校沒有公佈最低分，那低於平均分也屬於不符合。現實生活中當一項考試通過，或是領取什麼證件的時候，都會有蓋章這個行為，所以印章的樣式很好理解。
符合的時候，就會點亮這項成績的星星，這樣使用者即使沒有滑動列表的時候，也能看到錄取的數字星級評分，知道自己有幾項成績是通過的。數字量化的評分可以讓使用者更直觀的知道自己的成績是不是符合學校要求，是否有優勢。
3.給出使用者行動指南
根據使用者的成績結合產品的資料庫測算分析，給出使用者行動指南，告訴使用者接下來改怎麼做，應不應該申請本學校。
這一步是給使用者提供推薦的行動，因為在有了分析報告知道了學校的成績要求和自己的分數情況，即使是完全符合的情況下，很多時候使用者也還是不能馬上行動，決定到底是不是要申請這所學校。就像去醫院看病，檢查報告上各種資料都很清楚但是我們沒有這方面的專業知識，拿到了報告也看不懂，還是需要醫生和我們解釋，告訴我們具體的情況和該注意什麼。
使用者也會需要更多的關鍵資料和一些專業的留學諮詢，才能做出更準確的決定，進行以下的行動。這也是產品的核心競爭力，可以給出非常明確的行動指導，告訴使用者應不應該申請，所以這是產品的付費功能。
四.前後效果大比拼
經過雲-雨-傘的診斷，發現使用者覺得資料頁面難懂不單純是視覺的問題，還缺少了分析和行動的部分，導致使用者看完沒有得出結論。在這次的優化補齊了這部分的功能，現在一起來看看治療後新版與舊版的對比吧。
舊版：資料視覺表現有點不直觀，產品只有雲，沒有雨和傘。只給出了事實現狀，沒有分析和行動，使用者看到資料後需要自己判斷是否符合要求，看完之後不知道該怎麼行動，能不能申請這所學校。
新版：優化了視覺，讓分數的對比更加清晰易懂。加入了數字量化的分析結果，讓使用者可以比較直觀的直到自己是不是符合學校的要求。最後關鍵的一步是有了行動的指導，可以幫助使用者做出合理的選擇，是不是要申請學校。補全了雲-雨-傘，具備事實、分析和行動三要素，給使用者完整的體驗。
總結
今天結合留學產品的例項，講了怎樣運用雲—雨—傘理論來指導設計，最後總結一下主要內容：
1.雲—雨—傘理論說的是“天上出現烏雲，眼看就要下雨，帶上傘比較好。”是對事實、分析和行動三者的比喻。
2.遇到問題除了從視覺層面考慮優化，也可以對產品進行雲雨傘問診，檢查產品是否對應了事實、分析和行動，來給使用者提供更完整的體驗。
3.留學產品的優化根據雲—雨—傘理論，通過①優化視覺效果（雲）；②數字量化優勢增加分析結果（雨）；③給出使用者是否申請的行動指南（傘）來提升使用者體驗。
參考引文：
《靠譜》[日]大石哲之 北京中科印刷有限公司 2018年3月第3次印刷