一、拷問設計師靈魂的問題
作為一名設計師，在日常的設計工作之餘，也許會問自己（或被問到）一個形而上的問題：設計是什麼？設計的目的是什麼？設計的本質是什麼？設計的作用是什麼？
每個人的回答都不盡相同，《網站設計的藝術與科學》一書的作者 Jeffrey Veen ，他的回答很有代表性：
設計領域之外的人總是認為設計師的工作就是修飾，這讓我感到驚訝，好的設計是解決問題。
「設計 = 解決問題」這個說法似乎有點空洞，不太容易理解，更不知道怎麼運用在自己的工作中。而且不光設計師認為自己在解決問題，產品經理也說我們是在幫用戶解決問題啊。這就有點兒懵了。
沒關係，接下來我們通過一個案例，看看設計是怎麼解決問題的。
二、案例的背景介紹
我們來看一個案例：食物詳情頁面的設計。
先交代下項目的背景：會關注食物熱量和營養信息的用戶，主要是減肥和健身人群。
減肥用戶總是會問：這個食物減肥時能不能吃啊？吃了會不會長胖啊？他們比較關心食物的熱量、脂肪、碳水化合物。
健身用戶也有類似的問題，他們比較關心食物的蛋白質。還有，孕婦會關注葉酸和鈣，糖尿病患者會關注 GI 和 GL，媽媽會關心兒童生長所需的鈣和鋅，高血壓患者會關心鈉、鉀、鎂……
薄荷健康 App 在設計食物詳情頁面的過程中，踩過許多坑，以下是幾個有代表性的歷史版本。
左邊第一個是2014年的，那時流行擬物風，設計師會花很大精力在怎麼體現質感上。然後一步步的扁平化，過渡到最右邊的，2018年的大標題的簡約風格。
不要吐槽以前的版本土啊，人都是猴子變的。要是一直覺得以前的好，說明沒有進步了。歡迎大家吐槽現在的版本，幫助我們做得更好。
三、問題1：信息如何展示
食物的基本信息有不少：名稱、熱量、三大營養素（蛋白質、脂肪、碳水化合物），以及近20項營養素（膳食纖維、維生素、膽固醇、鈣……）
這麼多信息要如何展示呢？對比下國內外競品的做法（見下圖）：
薄荷的做法是：名稱等基本信息放在頂部，熱量信息放在明顯位置，次要的三大營養素放次要位置，更多的營養素就摺疊在次級頁面。
薄荷的食物詳情頁面，似乎比競品多了些東西啊，先別管，那是後面要講到的。
四、問題2：如何幫助小白用戶快速決策
第二個問題來了：這些字我都認識，可這些數字意味著什麼呢？比如我是個減肥的小白用戶，我就想知道這個東西能不能吃，能不能簡單明了的告訴我？
為此，薄荷推出了食物評價體系。
方案 A：分為10檔
你覺得評級 A 和評級 D+ 哪個更好？
應該是 A 吧（猶豫中）？你再看看10個檔的顏色變化，確定了，應該是 A 比較好。
A 並不必然比 B 好。就像鋼琴十級比一級厲害，跆拳道則是一級（紅黑帶）比十級（白帶）厲害。
雖然是能看懂，但是不夠直觀，不夠符合直覺。
方案 B：紅綠燈
我們借用了交通紅綠燈，這是大家已經熟知的概念，連幼兒園的小朋友都知道。看到紅燈食物就別吃了，黃燈食物就少吃點，綠燈食物就放心吃。
小白用戶不需要正確的廢話，他需要你的態度，你的結論，越簡單粗暴越好，這才能迅速的幫助他決定吃還是不吃。
四、問題3：如何讓中階用戶看得懂
中階用戶並不滿足於簡單粗暴的結論，他還想知道得更多，想自己來判斷。
比如一個蘋果的熱量是53千卡/100克，這意味著什麼？53算是高熱量還是低熱量？沒概念的。
要理解數字的含義，就得有相對比較。
方案 A：參照物
不同類的食物不能簡單的對比啊，我們就多找了幾個參照物。主食類的參照物是一碗米飯，水果類的參照物是一個蘋果，餅乾類的參照物是一塊奧利奧……
這個方案效果不佳，用戶對參照物本身都沒有什麼概念，還怎麼用參照物來衡量？
方案 B：參照系
比如蘋果的熱量，比55%的水果都要低，那麼蘋果的熱量是相對一般，不算高也不算低的。榴槤的熱量，只比8%的水果低，那麼榴槤的熱量就相對較高了。
相比第一個方案，這就更容易被理解了。
需要注意的是，參照系會佔用較大的面積，可以用，但不能濫用。如果熱量有參照系，三大營養素（蛋白質、脂肪、碳水化合物）不落人後也都來一個參照系，那整個頁面就沒法看了。
怎麼辦呢？有辦法。
方案 C：標籤
根據數值，給出「低脂肪」、「高蛋白」等標籤，也能幫助用戶理解，又比參照系更輕量。
所以薄荷 App 上是方案 B 和 C 都有用到，而且還有「食物亮點」，列出該食物進入了 xx 榜單，來拓展閱讀。
五、問題4：如何向高階用戶解釋複雜問題
三大營養素的數據，最早是純數字展示，後來為了更直觀的展示，運用了可視化的表達。三大營養素各有一個圓環，三個圓環加起來是100%。
細心的用戶會自己去算，然後反饋說，這三個環裡的比例是錯的。比如：100克番茄，蛋白質0.9克，脂肪0.2克、碳水化合物3.3克。算起來，脂肪的比例 = 0.2 / (0.9 + 0.2 + 3.3) = 4.5%，但圓環上顯示的是10%，明顯是錯了嘛。
我們想表達的是：這不是重量比例，是供能比例，是這樣算的……
以下是科普時間：
三大營養素都會產生熱量：蛋白質的熱量 = 0.9克 * 4 = 3.6千卡，脂肪的熱量 = 0.2克 * 9 = 1.8千卡，碳水化合物的熱量 = 3.3克 * 4 = 13.2千卡。總熱量 = 3.6 + 1.8 + 13.2 = 19千卡。於是，脂肪的供能比例 = 1.8千卡 / 19千卡 = 10%
請用儘可能少的篇幅，儘可能淺顯的方式，向用戶解釋。
OMG！我的數學是體育老師教的，這怎麼說得清啊？
Jeffrey Veen 這哥們兒居然還在說風涼話！
方案 A：示意圖
見上圖左，我們試圖告訴用戶，三大營養素各自會提供熱量，加起來就是食物的總熱量。
用戶反饋：這組織架構圖似的玩意是什麼鬼？完全 get 不到我們想表達的點。
方案 B：公式
見上圖中。我們試圖告訴用戶，三大營養素是通過這個公式，算出熱量的。
註：0.9 x 4 + 0.2 x 9 + 3.3 x 4 ≈ 15千卡
用戶反饋：來來來，這個公式是怎麼冒出來的，跟我解釋解釋？
方案 C：一句話
見上圖右。在與運營同事一起反覆斟酌文案之後，終於算是解釋清楚了。
註：以上為三大營養素的供能比例，不是重量比例。其中，脂肪的供能效率比較高，是碳水化合物和蛋白質的2.25倍。
這個故事告訴我們：「學好數理化，走遍天下都不怕」這句話是不對的。論學好語文的重要性。
六、吐槽
如果借吐槽別人做得多爛來，顯得自己做得多好，這不太厚道。我們就來吐槽薄荷自己家做的小程序：「薄荷食物庫」，來看看有哪些坑，我們可以引以為戒。（嘻嘻，反正當時負責的設計師已經離職了）
1. 標籤
這裡把標籤放在了很明顯的位置。其實這個信息並沒有特別的重要，而且對於小白用戶，沒有紅綠燈那麼簡單直接。
2. 顏色
在健康類的 App 裡，紅色是要慎用的。因為有些地方你需要用紅色來表示警告，而有些地方又沒有這個意思，用戶就猜不透這紅色到底有沒有傾向性了。保持一致性，是設計的基本要求。
3. 運動參照物
用運動來作為參照物是個不錯的點子，但有三點沒做好：
①不能所有食物都用運動參照物，比如吃一個包子要打羽毛球50分鐘，那我是不吃呢？還是不吃呢？還是不吃呢？
為了避免誤導用戶去節食，可以在紅燈食物上顯示運動參照物，而綠燈食物、黃燈食物就不要顯示了。
②運動參照物不能只有一個，比如現在是晚上，我上哪兒去打羽毛球啊？最好有幾個可選項，最好不要有場地限制的。更不能是隨機出現，一會兒讓我遛狗 60分鐘，一會兒讓我工作 40分鐘，讓人摸不著頭腦。
上圖左是薄荷食物庫小程序，上圖右是薄荷健康 App。
③設計師總是傾向於讓用戶知道：有新功能咯，在這裡，在這裡，快來用用吧。
新版本突出了標籤、增加了運動參照物，以及返回首頁的按鈕。你可以看到，這三個就特別的明顯。
要克制住這種衝動，新增加的元素，不要破壞整體效果，不要喧賓奪主。
七、結語
設計師可以在混亂中創造常態，他們可以通過組織和操縱文字和圖片來清晰地表達信息。——Jeffrey Veen
在人機互動中，我們要傳遞的信息，用戶並不能完全吸收。很大部分都像水過鴨背，在傳遞的過程中損耗掉了。設計師的工作，就是要解決信息損耗的問題，把信息清晰的傳達給用戶。
看完這個案例，有沒有對「設計就是解決問題」多一點了解呢？
如果你覺得有用，請點個讚~
本文由 @ 張智超 原創發布於人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基於CC0協議