本篇為如何從零構(gòu)建UI組件及設(shè)計規(guī)范之設(shè)計原則篇，主要介紹在組件和界面設(shè)計中，產(chǎn)品體驗(yàn)原則、界面設(shè)計原則以及常見設(shè)計定理。

《如何從零構(gòu)建UI組件及設(shè)計規(guī)范》共分為5個系列，分別為《一：介紹篇》、《二：設(shè)計原則》、《三：全局樣式》、《四：基礎(chǔ)組件》、《五：通用模版》。

一、產(chǎn)品體驗(yàn)原則

要有 → 高效 → 易用 → 美觀。要有是基礎(chǔ)的體驗(yàn)，有總比沒有的要好；然后是使用效率，效率得到提升后，再然后就是需要好用容易使用；最后才是要好看。

當(dāng)然丑也是不行的，只不過他的重要性相對是排到最后。

• 要有：有是最基礎(chǔ)的體驗(yàn)，是產(chǎn)品的基石，沒有功能就沒有其他。
• 高效：注重用戶的長期使用效率。
• 易用：短時間內(nèi)是否更快的學(xué)習(xí)上手等。
• 美觀：B端產(chǎn)品是不應(yīng)該優(yōu)先考慮好看的，不管從用戶價值還是商業(yè)價值。相對而言，美觀的側(cè)重點(diǎn)是簡潔好用，它也是美觀的范疇范圍。

高效 & 易用的區(qū)別：

• 水電煤繳費(fèi)，每個月都用一次，由于間隔時間較長，可能就忘了上次怎么操作的。所以這時候的側(cè)重點(diǎn)就是“容易學(xué)會并能夠很快上手”，符合「別讓我思考」的邏輯，寧愿多點(diǎn)一次也別讓用戶多想；
• 商家工作臺的預(yù)付款也符合此原理，商家使用間隔時間較長，但是一定要能夠使用簡單。所以我們采用的是分步驟頁面，這時用戶并不在乎多點(diǎn)擊一次還是兩次；
• 商家工作臺“出入庫”功能，對于商家可能就是每天都用，用很多次，使用頻率非常之高。這個時候就要主要“使用效率”，需要保證高效操作。所以表單設(shè)計時即使有再多內(nèi)容也都是放一個頁面填寫，不要每次都要點(diǎn)擊很多次次才能完成一個任務(wù)。

二、界面設(shè)計原則

對于企業(yè)類型的產(chǎn)品，完成目標(biāo)任務(wù)永遠(yuǎn)是第一位的。

1）清晰

幫助人們更準(zhǔn)確的理解和使用產(chǎn)品，文案、界面或操作等。不讓用戶進(jìn)行深度思考，說人話，不要設(shè)置專業(yè)門檻。幫助用戶在足夠清晰的界面環(huán)境中完成任務(wù)，達(dá)成目標(biāo)。

2）高效

讓流程更順暢，更智能化。優(yōu)化功能邏輯，預(yù)判需求，讓使用對象更加輕松快捷。提升效率：某人掌握產(chǎn)品的速度越快，使用該產(chǎn)品的效率就越高。設(shè)計時可采用以下3種方法：

• 刪除：刪除不必要的因素，將頁面的元素進(jìn)行簡化處理；
• 隱藏：根據(jù)用戶使用的場景，讓某些元素進(jìn)行隱藏，需要進(jìn)行說明的時候再進(jìn)行呈現(xiàn)；
• 重組：即分類，可以將相近功能進(jìn)行組織和分類，最常用的就是將不常用的功能分類在「更多」欄目中。

3）一致

“封閉高速路”哲學(xué)，判斷本身就是成本。對于我們的心靈來說，兩點(diǎn)之間，不一定是直線最短。沒有路口的封閉高速路，可能更短。

李楠《iPhone 可有設(shè)計哲學(xué)》

• 界面保持一致：少數(shù)服從多數(shù)，一致性可以減少用戶思考的次數(shù)和時間，讓用戶的注意力更集中在當(dāng)前的任務(wù)中，進(jìn)行業(yè)務(wù)上的判斷，即心流體驗(yàn)。
• 表達(dá)方式一致：文案界面保持一致，不多多樣化。從開始到結(jié)束，從 A 產(chǎn)品到 B 產(chǎn)品，從界面交互到文案內(nèi)容。
• 保留一定的空間：保留一定程度的空間，不要為了追求一致性而犧牲更加重要的東西。所以這是放在第三位。

細(xì)心打磨界面外觀，讓使用對象感到我們的產(chǎn)品值得他花費(fèi)時間與精力去使用。美觀是提升體驗(yàn)、激發(fā)愉悅的重要手段，但不將它的重要性排在其他任何設(shè)計原則之前。

三、常見設(shè)計定理

1）數(shù)量6原則

數(shù)量上一般采取的叫做7+2原則，就是說一般人的記憶容量約為7±2，即5～9之間。這邊我將原則簡化為6原則，比如按鈕（含鏈接）文字、單選框復(fù)選框的標(biāo)簽文字、表單的標(biāo)簽文字、tag標(biāo)簽等。

2）席克定律

當(dāng)選項增加時，用戶下決定的時間也在增加。在人機(jī)交互界面中，選項越多意味著用戶決策的時間也越長，用戶越不知道選擇什么。用戶在某一場景對選項的反應(yīng)時間取決于三個要素：

• 前期的認(rèn)知和觀察；
• 根據(jù)認(rèn)知后，處理的時間；
• 選項的數(shù)量。

3）幾乎沒人會改默認(rèn)設(shè)置

• 幾乎沒有用戶更改默認(rèn)設(shè)置的，只要專家級用戶才會更改，正常用戶只會使用產(chǎn)品提供的默認(rèn)設(shè)置。
• 產(chǎn)品設(shè)計時，高級設(shè)置等功能絕大多數(shù)用戶不會去用。

4）習(xí)慣路徑的設(shè)計，比少一次點(diǎn)擊更重要

• 《不要讓我思考》書中提到，可以多點(diǎn)一次，每次都不需要思考，是基本的原則。所以少點(diǎn)、多點(diǎn)一次沒那么重要，重要的是讓用戶形成習(xí)慣性路徑思考。
• 讓用戶明確內(nèi)容和信息，知道自己要做什么，點(diǎn)擊哪里，比單純的減少點(diǎn)擊次數(shù)更為重要。

本文由 @徐銀高 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議