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