本文適合產(chǎn)品經(jīng)理、UI 設(shè)計師和交互設(shè)計師，閱讀約需要5分鐘柏蘑。
一、拷問設(shè)計師靈魂的問題
作為一名設(shè)計師粹庞，在日常的設(shè)計工作之余咳焚，也許會問自己（或被問到）一個形而上的問題：設(shè)計是什么？設(shè)計的目的是什么庞溜？設(shè)計的本質(zhì)是什么革半？設(shè)計的作用是什么碑定？
每個人的回答都不盡相同，《網(wǎng)站設(shè)計的藝術(shù)與科學(xué)》一書的作者 Jeffrey Veen 又官，他的回答很有代表性：
設(shè)計領(lǐng)域之外的人總是認(rèn)為設(shè)計師的工作就是修飾延刘，這讓我感到驚訝。好的設(shè)計是解決問題六敬。
「設(shè)計 = 解決問題」這個說法似乎有點(diǎn)空洞碘赖，不太容易理解，更不知道怎么運(yùn)用在自己的工作中外构。
而且不光設(shè)計師認(rèn)為自己在解決問題普泡，產(chǎn)品經(jīng)理也說我們是在幫用戶解決問題啊。這就有點(diǎn)兒懵了审编。
沒關(guān)系劫哼，接下來我們通過一個案例，看看設(shè)計是怎么解決問題的割笙。
二权烧、案例的背景介紹
我們來看一個案例：食物詳情頁面的設(shè)計。
先交代下項目的背景：會關(guān)注食物熱量和營養(yǎng)信息的用戶伤溉，主要是減肥和健身人群般码。
減肥用戶總是會問：這個食物減肥時能不能吃啊乱顾？吃了會不會長胖鞍遄！？他們比較關(guān)心食物的熱量走净、脂肪券时、碳水化合物。
健身用戶也有類似的問題伏伯，他們比較關(guān)心食物的蛋白質(zhì)橘洞。
還有，孕婦會關(guān)注葉酸和鈣说搅，糖尿病患者會關(guān)注 GI 和 GL炸枣，媽媽會關(guān)心兒童生長所需的鈣和鋅，高血壓患者會關(guān)心鈉弄唧、鉀适肠、鎂……
薄荷健康 App 在設(shè)計食物詳情頁面的過程中，踩過許多坑候引，以下是幾個有代表性的歷史版本侯养。
左邊第一個是2014年的，那時流行擬物風(fēng)澄干，設(shè)計師會花很大精力在怎么體現(xiàn)質(zhì)感上逛揩。然后一步步的扁平化柠傍，過渡到最右邊的，2018年的大標(biāo)題的簡約風(fēng)格息尺。
不要吐槽以前的版本土啊携兵，人都是猴子變的疾掰。要是一直覺得以前的好搂誉，說明沒有進(jìn)步了。歡迎大家吐槽現(xiàn)在的版本静檬，幫助我們做得更好炭懊。
三、問題1：信息如何展示
食物的基本信息有不少：名稱拂檩、熱量侮腹、三大營養(yǎng)素（蛋白質(zhì)、脂肪稻励、碳水化合物）父阻，以及近20項營養(yǎng)素（膳食纖維、維生素望抽、膽固醇加矛、鈣……）
這么多信息要如何展示呢？對比下國內(nèi)外競品的做法（見下圖）
薄荷的做法是：名稱等基本信息放在頂部煤篙，熱量信息放在明顯位置斟览，次要的三大營養(yǎng)素放次要位置，更多的營養(yǎng)素就折疊在次級頁面辑奈。
薄荷的食物詳情頁面苛茂，似乎比競品多了些東西啊，先別管鸠窗，那是后面要講到的妓羊。
四、問題2：如何幫助小白用戶快速決策
第二個問題來了：這些字我都認(rèn)識稍计，可這些數(shù)字意味著什么呢侍瑟？比如我是個減肥的小白用戶，我就想知道這個東西能不能吃丙猬，能不能簡單明了的告訴我涨颜？
為此，薄荷推出了食物評價體系茧球。
方案 A：分為10檔
你覺得評級 A 和評級 D+ 哪個更好庭瑰？
應(yīng)該是 A 吧（猶豫中）？你再看看10個檔的顏色變化抢埋，確定了弹灭，應(yīng)該是 A 比較好督暂。
A 并不必然比 B 好。就像鋼琴十級比一級厲害穷吮，跆拳道則是一級（紅黑帶）比十級（白帶）厲害逻翁。
雖然是能看懂，但是不夠直觀捡鱼，不夠符合直覺八回。
方案 B：紅綠燈
我們借用了交通紅綠燈，這是大家已經(jīng)熟知的概念驾诈，連幼兒園的小朋友都知道缠诅。看到紅燈食物就別吃了乍迄，黃燈食物就少吃點(diǎn)管引，綠燈食物就放心吃。
小白用戶不需要正確的廢話闯两，他需要你的態(tài)度褥伴，你的結(jié)論，越簡單粗暴越好漾狼，這才能迅速的幫助他決定吃還是不吃重慢。
四、問題3：如何讓中階用戶看得懂
中階用戶并不滿足于簡單粗暴的結(jié)論邦投，他還想知道得更多伤锚，想自己來判斷。
比如一個蘋果的熱量是53千卡/100克志衣，這意味著什么屯援？53算是高熱量還是低熱量？沒概念的念脯。
要理解數(shù)字的含義狞洋，就得有相對比較。
方案 A：參照物
不同類的食物不能簡單的對比啊绿店，我們就多找了幾個參照物吉懊。主食類的參照物是一碗米飯，水果類的參照物是一個蘋果假勿，餅干類的參照物是一塊奧利奧……
這個方案效果不佳借嗽，用戶對參照物本身都沒有什么概念，還怎么用參照物來衡量转培？
方案 B：參照系
比如蘋果的熱量恶导，比55%的水果都要低，那么蘋果的熱量是相對一般浸须，不算高也不算低的惨寿。榴蓮的熱量邦泄，只比8%的水果低，那么榴蓮的熱量就相對較高了裂垦。
相比第一個方案顺囊，這就更容易被理解了。
需要注意的是蕉拢，參照系會占用較大的面積特碳，可以用，但不能濫用企量。如果熱量有參照系测萎，三大營養(yǎng)素（蛋白質(zhì)亡电、脂肪届巩、碳水化合物）不落人后也都來一個參照系，那整個頁面就沒法看了份乒。
怎么辦呢恕汇？有辦法。
方案 C：標(biāo)簽
根據(jù)數(shù)值或辖，給出「低脂肪」瘾英、「高蛋白」等標(biāo)簽，也能幫助用戶理解颂暇，又比參照系更輕量缺谴。
所以薄荷 App 上是方案 B 和 C 都有用到，而且還有「食物亮點(diǎn)」耳鸯，列出該食物進(jìn)入了 xx 榜單湿蛔，來拓展閱讀。
五县爬、問題4：如何向高階用戶解釋復(fù)雜問題
三大營養(yǎng)素的數(shù)據(jù)阳啥，最早是純數(shù)字展示，后來為了更直觀的展示财喳，運(yùn)用了可視化的表達(dá)察迟。三大營養(yǎng)素各有一個圓環(huán)，三個圓環(huán)加起來是100%耳高。
細(xì)心的用戶會自己去算扎瓶，然后反饋說，這三個環(huán)里的比例是錯的泌枪。比如概荷，100克番茄，蛋白質(zhì)0.9克工闺，脂肪0.2克乍赫、碳水化合物3.3克瓣蛀。算起來，脂肪的比例 = 0.2 / (0.9 + 0.2 + 3.3) = 4.5%雷厂，但圓環(huán)上顯示的是10%惋增，明顯是錯了嘛。
我們想表達(dá)的是：這不是重量比例改鲫，是供能比例诈皿，是這樣算的……
以下是科普時間：
三大營養(yǎng)素都會產(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%
請用盡可能少的篇幅截歉，盡可能淺顯的方式，向用戶解釋烟零。
OMG瘪松！我的數(shù)學(xué)是體育老師教的，這怎么說得清跋前ⅰ宵睦？
Jeffrey Veen 這哥們兒居然還在說風(fēng)涼話墅诡！
方案 A：示意圖
見上圖左壳嚎，我們試圖告訴用戶，三大營養(yǎng)素各自會提供熱量末早，加起來就是食物的總熱量烟馅。
用戶反饋：這組織架構(gòu)圖似的玩意是什么鬼？完全 get 不到我們想表達(dá)的點(diǎn)荐吉。
方案 B：公式
見上圖中焙糟。我們試圖告訴用戶，三大營養(yǎng)素是通過這個公式样屠，算出熱量的穿撮。
注：0.9 x 4 + 0.2 x 9 + 3.3 x 4 ≈ 15千卡
用戶反饋：來來來，這個公式是怎么冒出來的痪欲，跟我解釋解釋悦穿？
方案 C：一句話
見上圖右。在與運(yùn)營同事一起反復(fù)斟酌文案之后业踢，終于算是解釋清楚了栗柒。
注：以上為三大營養(yǎng)素的供能比例，不是重量比例。其中瞬沦，脂肪的供能效率比較高太伊，是碳水化合物和蛋白質(zhì)的2.25倍。
這個故事告訴我們：「學(xué)好數(shù)理化逛钻，走遍天下都不怕」這句話是不對的僚焦。論學(xué)好語文的重要性。
六曙痘、吐槽
如果借吐槽別人做得多爛來芳悲，顯得自己做得多好，這不太厚道边坤。我們就來吐槽薄荷自己家做的小程序：「薄荷食物庫」名扛，來看看有哪些坑，我們可以引以為戒茧痒。（嘻嘻肮韧，反正當(dāng)時負(fù)責(zé)的設(shè)計師已經(jīng)離職了）
1、標(biāo)簽
這里把標(biāo)簽放在了很明顯的位置文黎。其實這個信息并沒有特別的重要惹苗，而且對于小白用戶殿较，沒有紅綠燈那么簡單直接耸峭。
2、顏色
在健康類的 App 里淋纲，紅色是要慎用的劳闹。因為有些地方你需要用紅色來表示警告，而有些地方又沒有這個意思洽瞬，用戶就猜不透這紅色到底有沒有傾向性了本涕。保持一致性，是設(shè)計的基本要求伙窃。
3菩颖、運(yùn)動參照物
用運(yùn)動來作為參照物是個不錯的點(diǎn)子，但有三點(diǎn)沒做好：
①不能所有食物都用運(yùn)動參照物为障，比如吃一個包子要打羽毛球50分鐘晦闰，那我是不吃呢？還是不吃呢鳍怨？還是不吃呢呻右？
為了避免誤導(dǎo)用戶去節(jié)食，可以在紅燈食物上顯示運(yùn)動參照物鞋喇，而綠燈食物声滥、黃燈食物就不要顯示了。
②運(yùn)動參照物不能只有一個侦香，比如現(xiàn)在是晚上落塑，我上哪兒去打羽毛球芭ε薄？最好有幾個可選項憾赁，最好不要有場地限制的仰挣。更不能是隨機(jī)出現(xiàn)，一會兒讓我遛狗 60分鐘缠沈，一會兒讓我工作 40分鐘膘壶，讓人摸不著頭腦。
上圖左是薄荷食物庫小程序洲愤，上圖右是薄荷健康 App颓芭。
③設(shè)計師總是傾向于讓用戶知道：有新功能咯，在這里柬赐，在這里亡问，快來用用吧。
新版本突出了標(biāo)簽肛宋、增加了運(yùn)動參照物州藕，以及返回首頁的按鈕。你可以看到酝陈，這三個就特別的明顯床玻。
要克制住這種沖動，新增加的元素沉帮，不要破壞整體效果锈死，不要喧賓奪主。
七穆壕、結(jié)語
設(shè)計師可以在混亂中創(chuàng)造常態(tài)待牵，他們可以通過組織和操縱文字和圖片來清晰地表達(dá)信息。
-- Jeffrey Veen
在人機(jī)交互中喇勋，我們要傳遞的信息缨该，用戶并不能完全吸收。很大部分都像水過鴨背川背，在傳遞的過程中損耗掉了贰拿。設(shè)計師的工作，就是要解決信息損耗的問題渗常，把信息清晰的傳達(dá)給用戶壮不。
看完這個案例，有沒有對「設(shè)計就是解決問題」多一點(diǎn)了解呢皱碘？如果你覺得有用询一，請點(diǎn)個贊，分享給小伙伴們吧。
