Hi，我是彩云。

讓設(shè)計(jì)的產(chǎn)品體驗(yàn)簡(jiǎn)單好用是我們的目標(biāo)，但如何給設(shè)計(jì)做好減法，讓設(shè)計(jì)簡(jiǎn)單而非簡(jiǎn)陋，也是我們需要不斷思考的問(wèn)題。

今天將會(huì)在文章中分享21個(gè)簡(jiǎn)化設(shè)計(jì)的方法，還包含了20個(gè)以上的簡(jiǎn)化示意圖，幫你更容易理解簡(jiǎn)化這個(gè)概念，值得收藏學(xué)習(xí)！

現(xiàn)如今企業(yè)都在不斷追求打造簡(jiǎn)單好用的產(chǎn)品，期望在產(chǎn)品中有更多的功能，更新的技術(shù)以及更強(qiáng)的能力但仍然能有一個(gè)非常輕量和簡(jiǎn)單使用體驗(yàn)。

但通常情況下，做減法反而是最難的事情。

01/

如何定義”簡(jiǎn)單“？

我們可以把簡(jiǎn)單定義為容易理解，不難做到的事情。然而簡(jiǎn)單是主觀的，某些事情對(duì)某些人來(lái)說(shuō)簡(jiǎn)單，但對(duì)另一些人來(lái)說(shuō)又會(huì)很難。一般來(lái)講，我們對(duì)任何簡(jiǎn)單或復(fù)雜的過(guò)程形成個(gè)人意見(jiàn)，大致分為三個(gè)階段：

為用戶在實(shí)現(xiàn)他們目標(biāo)的路上消除困難，幫助他們輕松的到達(dá)目的地。John Maeda在《簡(jiǎn)單法則》一書(shū)中提出了在商業(yè)、技術(shù)和設(shè)計(jì)中平衡簡(jiǎn)單與復(fù)雜的十條法則，核心思想就是希望做更少的動(dòng)作但得到更多。

《簡(jiǎn)單法則》 John Maeda

Maeda是MIT媒體實(shí)驗(yàn)室教授，也是世界著名的圖形設(shè)計(jì)師，他一直在探索如何重新定義”改進(jìn)“的概念，使得這個(gè)概念不再人云亦云。這本書(shū)非常不錯(cuò)，所以推薦大家去看看。

02/

什么是復(fù)雜的？

談到簡(jiǎn)單的時(shí)候，需要考慮到它的反面范圍。簡(jiǎn)單或是復(fù)雜是比較主觀的感受。經(jīng)過(guò)適當(dāng)?shù)呐嘤?xùn)，即使是造火箭都可能不會(huì)那么難。但有幾個(gè)因素會(huì)使非常簡(jiǎn)單的任務(wù)復(fù)雜化。在產(chǎn)品設(shè)計(jì)中，應(yīng)該盡可能地避免以下這些情況：

我們應(yīng)該如何應(yīng)用到產(chǎn)品設(shè)計(jì)中？

1）建立產(chǎn)品的核心價(jià)值

有許多產(chǎn)品都希望盡可能地滿足所有用戶，然后成為行業(yè)中領(lǐng)頭羊。如果你希望你的產(chǎn)品變得簡(jiǎn)單，就需要定義產(chǎn)品的核心價(jià)值，并且確定你真正想要服務(wù)好的用戶群體。不是每一個(gè)產(chǎn)品都需要內(nèi)置一個(gè)facebook。

2）移除掉任何不必要的元素

變簡(jiǎn)單最直接的辦法就是深思熟慮地做減法。當(dāng)你猶豫這個(gè)元素要不要拿掉時(shí)，拿掉就好。次要信息，不經(jīng)常使用的控件需要處理，把樣式盡量弱化。就是這么簡(jiǎn)單，一旦你使用這個(gè)原則后，效果是立竿見(jiàn)影的。只是你需要考慮清楚，哪些需要移除掉。

簡(jiǎn)單不意味著沒(méi)有復(fù)雜的功能，只是在結(jié)果上簡(jiǎn)單。簡(jiǎn)單是某種程度上描述一個(gè)物件和產(chǎn)品的目標(biāo)及位置。不復(fù)雜是說(shuō)產(chǎn)品本身的功能設(shè)計(jì)不是雜亂無(wú)章的，要做到這一點(diǎn)并不簡(jiǎn)單�！啊�—Jonathan Ive(蘋(píng)果的喬納森)說(shuō)。

3）數(shù)據(jù)轉(zhuǎn)換為更直觀的樣式

我們?nèi)粘?a href=http://seniorhumorist.com/ target=_blank class=infotextkey>設(shè)計(jì)的大多數(shù)產(chǎn)品都聚集在用戶需要理解的大數(shù)據(jù)上，以便有效地執(zhí)行他們的日常任務(wù)。當(dāng)你知道用戶對(duì)于趨勢(shì)和變化更有興趣，把數(shù)據(jù)可視化會(huì)比單純的數(shù)字表格對(duì)用戶來(lái)說(shuō)更有幫助。在數(shù)據(jù)圖表中，還可以根據(jù)需要顯示更多有價(jià)值的信息，并將這些直觀呈現(xiàn)在用戶的面前。

4）支持快速?zèng)Q策

用戶被各種選擇狂轟濫炸，不得不花時(shí)間去理解和決定，給他們?cè)黾恿瞬槐匾�的工作。這里可以用一個(gè)非常著名的希克定律來(lái)解釋?zhuān)�選項(xiàng)增多會(huì)增加用戶做決定的時(shí)間和精力。所以，如果你想提升用戶體驗(yàn)，讓用戶感覺(jué)到簡(jiǎn)單，那么就盡可能地幫助用戶更快地做出決定。盡可能地減少不必要的選擇。

5）太多的選擇會(huì)嚇跑用戶

當(dāng)前的心理學(xué)理論和研究肯定了個(gè)人選擇對(duì)情感和動(dòng)機(jī)的積極影響。這些發(fā)現(xiàn)導(dǎo)致了一種流行的觀念，即選擇越多越好——人類(lèi)管理選擇的能力和欲望是無(wú)限的。但在現(xiàn)實(shí)中，研究證明了相反的情況。Jam實(shí)驗(yàn)是消費(fèi)心理學(xué)中最著名的實(shí)驗(yàn)之一，減少消費(fèi)者的選擇有利于銷(xiāo)售。重要的是，研究表明準(zhǔn)確地提供較少的選擇可能會(huì)提高你的銷(xiāo)量。

這個(gè)實(shí)驗(yàn)似乎證明了，與選擇較多的顧客相比，選擇較少的顧客購(gòu)買(mǎi)的可能性是前者的10倍。它一直是選擇過(guò)多的一個(gè)關(guān)鍵例子，即給顧客提供太多的選擇實(shí)際上會(huì)抑制顧客購(gòu)買(mǎi)。

6）在有多個(gè)選擇的時(shí)候提供建議

當(dāng)多選不可避免時(shí)，試著增加一些建議。給選擇增加推薦選項(xiàng)，或分享其他客戶最喜歡的數(shù)據(jù)。通過(guò)設(shè)計(jì)清晰地向用戶傳達(dá)選項(xiàng)之間的關(guān)鍵區(qū)別。這種方法通過(guò)用于選擇不同套餐的界面。

7）將用戶的注意力吸引到正確的區(qū)域

當(dāng)你理解用戶實(shí)現(xiàn)目標(biāo)的過(guò)程時(shí)，每個(gè)步驟都有一些更相關(guān)的內(nèi)容，這些內(nèi)容將幫助你朝著最終目標(biāo)前進(jìn)。找到這些關(guān)鍵區(qū)域并讓用戶能聚集在這些區(qū)域上。（彩云注：給操作設(shè)定好清晰的優(yōu)先級(jí)）

8）使用顏色和排版來(lái)傳達(dá)內(nèi)容的層次結(jié)構(gòu)

你應(yīng)該經(jīng)常能聽(tīng)到——”用戶不喜歡閱讀“。這沒(méi)錯(cuò)，我們對(duì)能記住和對(duì)需要深入了解的東西是有選擇性的。如果你曾經(jīng)一個(gè)字都不愿意讀就選擇同意了用戶協(xié)議，你肯定懂我的意思。有許多因素會(huì)影響傳達(dá)：字體類(lèi)型、尺寸、字間距、行距、大小寫(xiě)、顏色。用這些要素來(lái)組織內(nèi)容的結(jié)構(gòu)層次，使用正確的顏色和字體，將能夠增強(qiáng)品牌感，使其更好地被識(shí)別，更有吸引力和記憶。

9）合理的組織能夠幫助系統(tǒng)看起來(lái)更簡(jiǎn)單好用

讓我們做一個(gè)簡(jiǎn)單的測(cè)試。下面的2張圖片，用秒表來(lái)記錄下你大概花多久時(shí)間數(shù)完所有的黑點(diǎn)。

結(jié)束了嗎？就像你自己會(huì)看到的那樣，計(jì)算不規(guī)則的圓點(diǎn)方塊會(huì)花費(fèi)更多的時(shí)間，除此之外，還會(huì)給你帶來(lái)更多的認(rèn)知負(fù)擔(dān)。為什么我們會(huì)得到這個(gè)結(jié)果？因?yàn)檎�方形中有相同�?shù)量的點(diǎn)。把這些點(diǎn)擺成一個(gè)特殊的矩陣，在視覺(jué)上可以幫助掃描，成組的非常好統(tǒng)計(jì)。在左邊沒(méi)有組織的方塊中，我們必須逐個(gè)計(jì)算。另外，對(duì)于左圖來(lái)說(shuō)，有時(shí)候你還可能會(huì)統(tǒng)計(jì)錯(cuò)誤，需要再次確認(rèn)才能放心，太麻煩了。

組織好的元素不僅僅好認(rèn)，而且還非常好記。不論是操作什么樣的產(chǎn)品，記住所有控件位置和功能非常重要。讓我們做另一個(gè)小練習(xí)，一分鐘前，你還在認(rèn)真的數(shù)兩張圖中的點(diǎn)，現(xiàn)在請(qǐng)你回憶下兩個(gè)正方形中的每個(gè)點(diǎn)的位置。對(duì)大多數(shù)人來(lái)說(shuō)，回憶這種無(wú)序的結(jié)構(gòu)幾乎是不可能的。

10）將內(nèi)容分組

簡(jiǎn)化一個(gè)頁(yè)面，有一個(gè)簡(jiǎn)單的辦法就是把內(nèi)容進(jìn)行分組。此時(shí)，用戶在處理組信息時(shí)，精力耗費(fèi)很少，而不是要看大量不相關(guān)的元素。在元素或元素組周?chē)�添加邊框是�?chuàng)建與周?chē)�元素分離的一種簡(jiǎn)單方法。格式塔心理學(xué)中有多種分組原則可以幫助物品產(chǎn)生關(guān)聯(lián)性:接近性、相似性、連續(xù)性、封閉性和連通性。

11）把大任務(wù)分解成小步驟，嘗試用一列來(lái)布局

現(xiàn)在幾乎每個(gè)產(chǎn)品中都有不同的表單，為了收集你的資料。有時(shí)候即使去掉所有不必要的東西后，它依然會(huì)很復(fù)雜。這些表單會(huì)讓用戶失去完成的動(dòng)力。所以我們能做的就是把這個(gè)大任務(wù)分解成一系列的小任務(wù)。眨眼間，把這個(gè)過(guò)程進(jìn)行到底似乎變得容易多了。完成小的子任務(wù)會(huì)給用戶帶來(lái)一部分內(nèi)啡肽和繼續(xù)進(jìn)行的滿足感。在設(shè)計(jì)這個(gè)表單時(shí)，用單列布局替代多列布局。單列布局更容易填寫(xiě)。這樣用戶就不大需要考慮下一步要填什么，只需要沿著直線向下移動(dòng)填完就好了。

12）及時(shí)告知進(jìn)度和當(dāng)前狀態(tài)

不確定性讓我們感到焦慮，在操作過(guò)程中應(yīng)該盡可能地給用戶確定的信息。用戶需要知道他現(xiàn)在的位置，下一步要做什么。常駐一個(gè)信息進(jìn)度摘要會(huì)是一個(gè)非常棒的做法，能讓用戶降低認(rèn)知壓力，并能方便退回前一步確認(rèn)信息。

13）幫用戶自動(dòng)計(jì)算

人類(lèi)大腦不擅長(zhǎng)涉及數(shù)字的原始計(jì)算。嘗試讓系統(tǒng)自動(dòng)完成所有計(jì)算對(duì)用戶來(lái)說(shuō)會(huì)有更好的體驗(yàn)。

14）采用漸進(jìn)式呈現(xiàn)復(fù)雜信息

漸進(jìn)呈現(xiàn)是UX設(shè)計(jì)中更容易讓用戶理解的一種用戶界面設(shè)計(jì)模式。它涉及到在多個(gè)界面上排列信息和動(dòng)作，這樣就不會(huì)讓用戶淹沒(méi)在無(wú)關(guān)信息中，直至優(yōu)化到所有信息都強(qiáng)相關(guān)。漸進(jìn)呈現(xiàn)屬于從”抽象到具體“的典型概念，包括用戶行為和交互順序。一個(gè)非常好的漸進(jìn)案例就是iOS的嵌套開(kāi)關(guān)設(shè)置界面。

15）設(shè)計(jì)普遍接受的模式和交互

用戶將大部分時(shí)間花在其他產(chǎn)品上。這意味著用戶喜歡用在其他產(chǎn)品上他已有習(xí)慣來(lái)使用你的產(chǎn)品，他們會(huì)對(duì)你的產(chǎn)品的外觀和性能有特定的期望。這句話適用于從互聯(lián)網(wǎng)產(chǎn)品到你家冰箱的任何數(shù)字或?qū)嶓w產(chǎn)品，反映了用戶心態(tài)。但這并不意味著你應(yīng)該停止創(chuàng)新，更多的是評(píng)估背離傳統(tǒng)的導(dǎo)航或控制方式是否能讓用戶改變他們的思維模式。

16）設(shè)計(jì)一個(gè)精簡(jiǎn)的新手引導(dǎo)

設(shè)計(jì)的主要目標(biāo)是為了將用戶與產(chǎn)品提供的價(jià)值聯(lián)系起來(lái)。任何阻擋在用戶和他實(shí)際操作之間的東西都是障礙，除非它服務(wù)于功能性需求。首次體驗(yàn)對(duì)于產(chǎn)品來(lái)說(shuō)非常重要，我們?nèi)祟?lèi)會(huì)很快形成對(duì)產(chǎn)品的看法，當(dāng)我們不滿意就會(huì)立即離開(kāi)。你在第一次操作時(shí)，即使是最簡(jiǎn)單的任務(wù)也可能是一項(xiàng)挑戰(zhàn)。有時(shí)在我們操作產(chǎn)品之前需要額外的學(xué)習(xí)。在數(shù)字設(shè)計(jì)中，用戶期望的是產(chǎn)品應(yīng)該足夠簡(jiǎn)單易懂，他們希望根據(jù)需求得到幫助，或者在出現(xiàn)問(wèn)題時(shí)得到幫助。提供上下文幫助，而不是預(yù)先為用戶提供學(xué)習(xí)材料，設(shè)計(jì)一堆引導(dǎo)頁(yè)。

17）牢記人體工程學(xué)和使用產(chǎn)品的環(huán)境

簡(jiǎn)單，正如我們已經(jīng)定義的，你可以多么容易地使用產(chǎn)品。人體工程學(xué)是設(shè)計(jì)、產(chǎn)品和系統(tǒng)的考慮因素，以使它們適合操作它們的人。大多數(shù)人認(rèn)為這與座位或汽車(chē)控制裝置和儀表的設(shè)計(jì)有關(guān)，事實(shí)確實(shí)如此。但它的意義遠(yuǎn)不止于此。人體工程學(xué)適用于任何與人有關(guān)的設(shè)計(jì)，包括數(shù)字產(chǎn)品。

1954年，心理學(xué)家保羅·菲茨(Paul Fitts)對(duì)人體運(yùn)動(dòng)系統(tǒng)進(jìn)行了研究，發(fā)現(xiàn)移動(dòng)到一個(gè)目標(biāo)所需的時(shí)間取決于它與目標(biāo)的距離，與目標(biāo)的大小成反比。因此，要確保常用元素的尺寸較大，并將它們放置在靠近用戶的常用位置。

18）支持內(nèi)聯(lián)編輯和自動(dòng)建議值

刪除每個(gè)流程中所有不必要的交互、視圖和步驟。用戶操作系統(tǒng)有一個(gè)最佳速度，它被稱(chēng)為“心流狀態(tài)”。不要用彈出窗口打破這種流暢。對(duì)于以后可以更改的所有操作/值，盡可能支持內(nèi)聯(lián)編輯。當(dāng)有大量值可用時(shí)，應(yīng)當(dāng)自動(dòng)建議值。

19）使用智能默認(rèn)值來(lái)減少認(rèn)知負(fù)荷

智能默認(rèn)設(shè)置是給問(wèn)題預(yù)先填入答案，讓用戶更快地完成表單。在定義相關(guān)的默認(rèn)值時(shí)，設(shè)計(jì)師需要理解用戶以及他們將在何種環(huán)境下使用產(chǎn)品。這只有通過(guò)深入的研究和測(cè)試才能實(shí)現(xiàn)，從用戶身上學(xué)習(xí)，并根據(jù)用戶的歷史數(shù)據(jù)和使用模式調(diào)整默認(rèn)值。如果需要明確的選擇，就將默認(rèn)選項(xiàng)設(shè)置為絕大多數(shù)用戶(比如90 – 95%)會(huì)選擇的選項(xiàng)。

20）預(yù)防錯(cuò)誤

錯(cuò)誤消息會(huì)帶來(lái)很大的壓力，讓用戶覺(jué)得他們搞砸了或者不能勝任任務(wù)。確保自動(dòng)檢查輸入的數(shù)據(jù)，并對(duì)不適當(dāng)?shù)臄?shù)據(jù)輸入提供警報(bào)或提醒，以減少錯(cuò)誤。要么消除容易出錯(cuò)的條件，要么檢查這些條件，并在用戶提交操作之前向他們提供確認(rèn)選項(xiàng)。應(yīng)使用強(qiáng)制功能保護(hù)破壞性和不可恢復(fù)的操作，以確保用戶意識(shí)到他們的選擇將產(chǎn)生的影響。

21）無(wú)障礙設(shè)計(jì)

作為一名設(shè)計(jì)師，你的目標(biāo)是維護(hù)易用性，確保你的產(chǎn)品能夠被更廣泛的受眾所訪問(wèn)。全世界有超過(guò)10億人有殘疾。不要把顏色作為傳達(dá)信息的唯一視覺(jué)手段（彩云注：增加圖標(biāo)不僅僅是為了好看，也為了提升操作的識(shí)別性）。確保文本和背景之間有足夠的對(duì)比度，支持鍵盤(pán)導(dǎo)航等。可訪問(wèn)性并不局限于具有某些不同能力的一組用戶，當(dāng)針對(duì)可訪問(wèn)性進(jìn)行設(shè)計(jì)時(shí)，你將改善每個(gè)使用產(chǎn)品的人的體驗(yàn)。

03/

總結(jié)

設(shè)計(jì)出好用簡(jiǎn)單易于理解的產(chǎn)品不容易，但那是一個(gè)方向，這些快速的小技巧能夠快速地讓界面變得簡(jiǎn)單。如有學(xué)到，記得點(diǎn)贊分享給朋友們~

原文作者：Taras Bakusevych

譯者：彩云Sky，騰訊高級(jí)視覺(jué)設(shè)計(jì)師；公眾號(hào)：彩云譯設(shè)計(jì)