編輯導(dǎo)語(yǔ)：現(xiàn)在B端產(chǎn)品的復(fù)雜化，使得表單的設(shè)計(jì)需求也相應(yīng)地增加。本文作者給我們分享了表單設(shè)計(jì)的相關(guān)質(zhì)量評(píng)估參考，主要從用戶心智模型、布局的復(fù)雜性、用戶輸入速度、界面的可訪問(wèn)性、界面的可擴(kuò)展性這 5 個(gè)方面講述。

表單作為 B 端產(chǎn)品重要的組成部分之一，是用戶和公司互動(dòng)對(duì)話的主要工具。如今 B 端產(chǎn)品越來(lái)越復(fù)雜，表單逐漸趨向于：請(qǐng)求的信息越來(lái)越多、操作流程越來(lái)越復(fù)雜。

如今表單需要涉及大量組件、頁(yè)面布局、在線驗(yàn)證、消息提示，因此也是用戶體驗(yàn)最繁瑣的部分。在一定程度上，表單的設(shè)計(jì)決定了產(chǎn)品的成敗。

對(duì)于表單，可以嘗試從以下 9 個(gè)方面來(lái)評(píng)估其設(shè)計(jì)的質(zhì)量。

由于本系列內(nèi)容較多，因此分為上下兩篇，上篇主要從用戶心智模型、布局的復(fù)雜性、用戶輸入速度、界面的可訪問(wèn)性、界面的可擴(kuò)展性這 5 個(gè)方面講述，其他 4 個(gè)方面將在下篇呈現(xiàn)。

一、用戶心智模型

心智模型是人機(jī)交互中最重要的概念之一，指用戶自認(rèn)為他們對(duì)您產(chǎn)品的認(rèn)知及想法，這將決定他們?nèi)绾尾僮鳟a(chǎn)品。因此了解表單與用戶心智模型的契合度非常重要?？梢詮囊韵聝煞矫孢M(jìn)行評(píng)估。

1. 是否符合用戶的需求

匹配用戶心智最好的方法就是找出目標(biāo)用戶群。從用戶研究中收集數(shù)據(jù)并創(chuàng)建用戶角色是實(shí)現(xiàn)這一目標(biāo)的最佳方法。

當(dāng)創(chuàng)造了用戶角色后，便可以以適合他們的方式進(jìn)行設(shè)計(jì)，并在他們身上進(jìn)行測(cè)試，看看表單的功能是否真的適合他們?？蓮膬煞矫嬷郑?/p>

• 表單的內(nèi)容：我們需要準(zhǔn)確找出幫助用戶完成任務(wù)所需的最低限度，非必要不應(yīng)該詢問(wèn)任何敏感或個(gè)人詳細(xì)信息（性別、生日、電話號(hào)碼）。
• 表單的外觀：即整體設(shè)計(jì)風(fēng)格，我們的設(shè)計(jì)是否符合用戶對(duì)行業(yè)的認(rèn)知。

發(fā)現(xiàn)用戶心智模型和設(shè)計(jì)師心智模型之間的具體差距，收集用戶數(shù)據(jù)信息，可以有效的避免錯(cuò)誤，以達(dá)到用戶期望。

當(dāng)產(chǎn)品設(shè)計(jì)處于開(kāi)始階段時(shí)，可以使用輕量級(jí)的方式創(chuàng)建用戶角色，如根據(jù)團(tuán)隊(duì)經(jīng)驗(yàn)、人口學(xué)研究等方法來(lái)確定用戶的心理和期望。

一旦確定了系統(tǒng)或原型后，就可以使用定性的可用性測(cè)試來(lái)收集驗(yàn)證用戶心智了。

2、設(shè)計(jì)風(fēng)格是否與行業(yè)一致

根據(jù)雅各布定律，用戶將大部分時(shí)間花在別人家的網(wǎng)站?(產(chǎn)品) 上，而不是你的。這意味他們希望你的網(wǎng)站?(產(chǎn)品) 跟別人的有相同的操作方法和使用模式。該定律降低了用戶學(xué)習(xí)成本要求盡可能依據(jù)用戶既有經(jīng)驗(yàn)進(jìn)行任務(wù)和流程設(shè)計(jì)。

這是因?yàn)橛脩舻男闹悄Ｐ痛嬖诤艽蟮膽T性：人們往往會(huì)堅(jiān)持熟悉的東西，即使它沒(méi)有什么用。這是使用保守設(shè)計(jì)方式的依據(jù)。

大多數(shù)時(shí)候，人們沒(méi)有時(shí)間或意愿去學(xué)習(xí)一種全新的操作方式，他們僅僅想快速完成任務(wù)而已。另一方面，如果您確實(shí)需要?jiǎng)?chuàng)新，最好僅在新方法明顯更優(yōu)的情況下進(jìn)行。

通過(guò)將產(chǎn)品形式功能、步驟序列、信息布局和文本術(shù)語(yǔ)與用戶期望和先前體驗(yàn)相匹配，可以減少用戶在學(xué)習(xí)新系統(tǒng)時(shí)遇到的摩擦和不適。類(lèi)似約定俗成的規(guī)范有很多，例如：

• 鏈接帶有下劃線或以不同顏色呈現(xiàn)；
• 按鈕通常出現(xiàn)在彩色框內(nèi)；
• 導(dǎo)航菜單出現(xiàn)在網(wǎng)站的頂部或左側(cè)。

二、布局的復(fù)雜性

對(duì)于許多人來(lái)說(shuō)， 對(duì) B 端產(chǎn)品的刻板印象大都是到復(fù)雜難懂的設(shè)置和乏味雜亂的界面，但 B 端產(chǎn)品在用戶體驗(yàn)方面正在做積極的改進(jìn)。

設(shè)計(jì)師越來(lái)越意識(shí)到，多年來(lái)一直應(yīng)用于 ToC 產(chǎn)品的用戶體驗(yàn)設(shè)計(jì)原則在企業(yè)環(huán)境中也很有價(jià)值。其共同目標(biāo)都是降低產(chǎn)品的復(fù)雜性，使用戶更易使用。

1. 界面層次結(jié)構(gòu)是否清晰

合理清晰的層次結(jié)構(gòu)對(duì)于降低表單的復(fù)雜性至關(guān)重要。這可以使用戶輕松掌握界面的基礎(chǔ)框架，并快速感受到對(duì)產(chǎn)品的控制感。

一般情況下，當(dāng)用戶發(fā)現(xiàn)設(shè)計(jì)“更直觀”時(shí)，他們對(duì)界面結(jié)構(gòu)的反應(yīng)就會(huì)更迅速。表單是用戶與產(chǎn)品之間的對(duì)話，和其他對(duì)話一樣，需要一種合乎邏輯的溝通方式，因此我們需要：

• 以直觀的順序提問(wèn)。表單應(yīng)從用戶的角度考慮問(wèn)題，而并非應(yīng)用程序或數(shù)據(jù)庫(kù)邏輯角度。這使得從一組問(wèn)題到下一組問(wèn)題的流程更像是一次對(duì)話。
• 以直觀的順序構(gòu)建選項(xiàng)（例如，按星期一、星期二等順序排列）。若序列無(wú)特別意義，則應(yīng)按選項(xiàng)拼音首字母順序排列。
• 始終記得兩個(gè)問(wèn)題：“為什么需要獲取用戶這些信息？”以及“如何從用戶那里請(qǐng)求的信息？”。切記，減少不必要的問(wèn)題可以減少用戶的工作負(fù)擔(dān)，提高表單的完成率。
• 從漸進(jìn)式披露的角度將信息分層。

1）步驟條

步驟條允許用戶逐步填寫(xiě)信息，非常適合對(duì)用戶來(lái)說(shuō)操作復(fù)雜、難度大的表單。當(dāng)用戶經(jīng)歷一個(gè)不熟悉的過(guò)程時(shí)，使用步驟條可以使用戶對(duì)表單的結(jié)構(gòu)有一個(gè)基礎(chǔ)概念。但對(duì)于高使用率的簡(jiǎn)單表單，步驟條并不是一個(gè)好的設(shè)計(jì)，因?yàn)橛脩艨赡苡X(jué)得你是在小瞧他。

2）分段表單

分段表格非常適合輸入復(fù)雜的信息。他將表單信息分類(lèi)歸納，每一段都會(huì)有一個(gè)小標(biāo)題提醒用戶接下來(lái)輸入內(nèi)容的屬性。與步驟條不同的是，用戶可以完整的掌握表單的上下文，而不需要來(lái)回翻頁(yè)。用戶可以在整個(gè)表單中自由填寫(xiě)信息，不必線性填寫(xiě)，操作更靈活。

2. 重要元素是否可被發(fā)現(xiàn)

在用戶的操作過(guò)程中，界面上是否有視覺(jué)提示很重要。視覺(jué)提示的形式可以是多樣的，顏色變化、字體大小、圖標(biāo)引導(dǎo)等等，這些都是界面設(shè)計(jì)中常見(jiàn)的提示方式。即使用戶不能立刻清楚內(nèi)容的含義，也需要讓用戶有自己探索和理解表單的內(nèi)容的機(jī)會(huì)。

3. 系統(tǒng)狀態(tài)是否可見(jiàn)

在一個(gè)復(fù)雜的系統(tǒng)中，錯(cuò)誤提示和狀態(tài)提醒是必不可少的。只有知道當(dāng)前的系統(tǒng)狀態(tài)，用戶才能進(jìn)行相應(yīng)的調(diào)整，更好的做出決策。除了給用戶提供視覺(jué)反饋，還應(yīng)為用戶提供狀態(tài)出現(xiàn)的原因和可能的解決方式。

三、用戶輸入速度

1. 是否尊重菲茲定律

菲茲定律是預(yù)測(cè)某點(diǎn)到目標(biāo)中心位置所需時(shí)間的數(shù)學(xué)模型。在交互設(shè)計(jì)方面可以簡(jiǎn)單理解為，目標(biāo)區(qū)域越近越大，對(duì)象（鼠標(biāo)指針或指尖）到達(dá)它的速度就越快。

1）創(chuàng)建更大的目標(biāo)

使用稍大的按鈕并將交互元素的可點(diǎn)擊區(qū)域放大，使用戶易于點(diǎn)擊。

注意也不要過(guò)分夸大目標(biāo)尺寸。雖然較大的目標(biāo)在一定程度上有效，但太過(guò)反而會(huì)讓用戶有壓迫感，甚至?xí)雎皂?yè)面上的其他重要元素。

2）最小化指針移動(dòng)距離

按類(lèi)型、屬性對(duì)元素進(jìn)行分組，并將任務(wù)流中同類(lèi)元素之間的距離最小化，這可以提高用戶的點(diǎn)擊速度。

反之，通過(guò)增大空間來(lái)分隔元素，可以防止意外點(diǎn)擊，最大程度地減少用戶犯錯(cuò)。

2. 是否尊重?？硕?/h3>

希克定律指出，給用戶的選擇數(shù)量越多時(shí)，用戶作出決定花費(fèi)的時(shí)間就越久。給用戶有限的選擇，可以提高操作速度。

?？硕杀澈蟮男睦硇?yīng)，稱(chēng)為選擇麻痹，最初由零售營(yíng)銷(xiāo)人員使用，如今也普遍應(yīng)用于設(shè)計(jì)。

《選擇悖論》中認(rèn)為，減少提供給消費(fèi)者的選擇數(shù)量也減少了他們?cè)跊Q策過(guò)程中面臨的焦慮。因此，向用戶提供較少的選項(xiàng)將會(huì)：

• 降低用戶為完成任務(wù)而作出決定所需的時(shí)間；
• 減少因評(píng)估多個(gè)項(xiàng)目而引起的焦慮。

1）創(chuàng)建用戶流以了解用戶何時(shí)需要做出某些選擇

以廣告投放平臺(tái)為例，通常的任務(wù)流程為“創(chuàng)建單元”→“創(chuàng)建計(jì)劃”→“創(chuàng)建廣告創(chuàng)意”。

那么我們是否需要用戶在創(chuàng)建單元時(shí)就了解廣告創(chuàng)意的展示方式呢？這完全取決于你的產(chǎn)品業(yè)務(wù)邏輯和用戶研究。因此需要為每個(gè)主要受眾群體的每個(gè)主要業(yè)務(wù)目標(biāo)繪制用戶流，然后做出決策。

對(duì)當(dāng)前任務(wù)沒(méi)有影響或無(wú)關(guān)的內(nèi)容，暫時(shí)隱藏，可以減少信息干擾，使用戶更能沉浸在當(dāng)前的任務(wù)中。

2）在適當(dāng)?shù)牡胤诫[藏選項(xiàng)

對(duì)信息的不同屬性進(jìn)行分類(lèi)，對(duì)元素進(jìn)行分組，將子級(jí)放到父級(jí)里面，并確定每個(gè)子級(jí)的優(yōu)先級(jí)。子級(jí)元素過(guò)多時(shí)，可以適當(dāng)隱藏后置位的子集。例如，在買(mǎi)鞋的購(gòu)物體驗(yàn)中，“鞋跟款式”列表下，隱藏異型跟、平底、酒杯跟、馬蹄跟、錐形跟、鏤空跟等選項(xiàng)。

3）使用漸進(jìn)式披露

漸進(jìn)式披露允許界面顯示或隱藏信息，包括數(shù)據(jù)、選項(xiàng)或命令。通過(guò)重點(diǎn)顯示必要的內(nèi)容來(lái)提高用戶填寫(xiě)效率，使界面更簡(jiǎn)潔。 通過(guò)漸進(jìn)式披露可以：

• 折疊隱藏不必要或不太重要的信息，縮小內(nèi)容的范圍。
• 在前一步操作完成后顯示后續(xù)步驟，減少信息干擾。

4）為您最重要的受眾設(shè)計(jì)

決定產(chǎn)品的目標(biāo)用戶，考慮每個(gè)操作對(duì)目標(biāo)用戶是否有意義。細(xì)想一下，需要特殊選項(xiàng)的用戶僅占 5%?，這 5% 的用戶體驗(yàn)是否會(huì)讓?95% 不需要的用戶體驗(yàn)混亂呢？有時(shí)候忽略小部分用戶群可以極大地改善對(duì)業(yè)務(wù)影響最大的用戶群的體驗(yàn)。

3. 閱讀形式是否最優(yōu)

優(yōu)化閱讀形式通常需要從兩個(gè)方面考慮：布局優(yōu)化和內(nèi)容優(yōu)化。

1）布局優(yōu)化

為了獲得更好的閱讀效果，首先要為項(xiàng)目選擇合適的布局。常用設(shè)計(jì)布局有三種：

①古騰堡圖

古騰堡圖通過(guò)指導(dǎo)眼睛的運(yùn)動(dòng)軌跡，讓用戶迅速獲取有價(jià)值的信息，它將布局劃分為 4 個(gè)視覺(jué)區(qū)域：

• 第一視覺(jué)區(qū)(Primary Optical Area)：左上方，用戶首先注意到的區(qū)域。
• 最終視覺(jué)區(qū)(Final Optical Area)：右下方，視覺(jué)流程的終點(diǎn)。
• 強(qiáng)閑置區(qū)(Strong Follow Area)：右上方，較少被注意到。
• 弱閑置區(qū)(Weak Follow Area)：左下方，最少被注意到。

古騰堡圖表明，人們閱讀時(shí)，視線都趨向于從上到下，從左到右的眼動(dòng)規(guī)律，主要視覺(jué)區(qū)域是左上方和右下方。這個(gè)規(guī)律只適用于習(xí)慣以從左到右水平形式書(shū)寫(xiě)的用戶，這也是目前主流的閱讀方式。這意味著在掃描或?yàn)g覽時(shí)我們的眼睛不會(huì)沿著一條直線，而是從左到右“下降”閱讀。

所以在彈窗的設(shè)計(jì)中，通常左上方放置標(biāo)題，右下方放置重要的“確認(rèn)”按鈕，“取消”按鈕放在“確認(rèn)”左邊，中間則是內(nèi)容區(qū)域。

②?Z 型

該模式布局遵循字母 Z 的形狀，眼睛從左上角到右上角，然后對(duì)角線到左下角，再水平移動(dòng)到右邊。通常會(huì)重復(fù)使用Z模式，導(dǎo)致鋸齒形模式。該模式主要用于以卡片形式為主的項(xiàng)目列表中，如選擇圖片等，可以將使用頻率高的卡片前置，方便用戶瀏覽選擇。

③ F 型

根據(jù)眼動(dòng)追蹤研究的結(jié)果，F(xiàn) 模式可能是最容易被用戶識(shí)別的。該研究表明，眼睛從頁(yè)面頂部開(kāi)始由左向右移動(dòng)，但隨著時(shí)間的推移，水平運(yùn)動(dòng)減少，眼睛越來(lái)越黏著于頁(yè)面左側(cè)邊緣。

與其他模式一樣，F(xiàn) 模式建議最重要的信息放置在頁(yè)面的頂部和左側(cè)，以便在人們?yōu)g覽頁(yè)面時(shí)最先注意到。這也提醒我們，表單字段應(yīng)左對(duì)齊。

2）內(nèi)容優(yōu)化

選擇最佳布局后，接下來(lái)需要優(yōu)化表單的內(nèi)容，如：

• 文字需簡(jiǎn)短，具有說(shuō)明性。
• 長(zhǎng)文本應(yīng)添加圖像或插圖進(jìn)行劃分，分成易于理解的段落。
• 對(duì)重要文字使用粗體或改變顏色。
• 每段只解釋一個(gè)想法。
• ……

4. 是否減少間隙焦慮

間隙焦慮指用戶在觸發(fā)動(dòng)作時(shí)，因系統(tǒng)給出響應(yīng)間所經(jīng)歷的暫時(shí)空白，而產(chǎn)生的焦慮狀態(tài)。暫時(shí)空白通常是由加載時(shí)間緩慢、反饋滯后和延遲問(wèn)題引起的。

間隙焦慮有兩個(gè)相互關(guān)聯(lián)的組成部分：過(guò)渡性焦慮和時(shí)間性焦慮。

1）過(guò)渡性焦慮

指的是從一個(gè)頁(yè)面過(guò)渡到另一個(gè)頁(yè)面期間所產(chǎn)生的緊張狀態(tài)。

將用戶從一種類(lèi)型的界面設(shè)計(jì)轉(zhuǎn)移到另一種類(lèi)型（如結(jié)賬流程的步驟）的轉(zhuǎn)變必須是無(wú)縫的，以保持體驗(yàn)的持續(xù)性。

減少過(guò)渡性焦慮的最好方法是使用微妙的動(dòng)畫(huà)和屏幕之間的過(guò)渡，幫助用戶逐漸適應(yīng)頁(yè)面狀態(tài)切換間的變化。

2）時(shí)間性焦慮

指的是由訪問(wèn)頁(yè)面加載時(shí)間引起的精神焦慮，這一步是在用戶轉(zhuǎn)換到新頁(yè)面之后進(jìn)行的。此時(shí)加載整個(gè)內(nèi)容通常需要一些時(shí)間。

谷歌前副總裁曾指出，一個(gè)加載時(shí)間 0.5 秒的延時(shí)，導(dǎo)致谷歌搜索頁(yè)面流量下降了 20％ 。

可見(jiàn)，加載延時(shí)對(duì)頁(yè)面影響重大。我們可以提供一些有趣的視覺(jué)元素，使用戶不必盯著空白屏幕傻等。比如：

• 使用加載動(dòng)畫(huà)，旋轉(zhuǎn)輪、加載條、gif 動(dòng)畫(huà)等。
• 使用占位符動(dòng)畫(huà)模擬將要加載的實(shí)際內(nèi)容，如顯示簡(jiǎn)單的圖像線框。

四、界面可訪問(wèn)性

界面可訪問(wèn)性要求設(shè)計(jì)師建立同理心，利用可訪問(wèn)性可以構(gòu)建更好的無(wú)障礙產(chǎn)品。

可訪問(wèn)性允許不同能力的用戶理解、使用產(chǎn)品。作為設(shè)計(jì)師，我們有責(zé)任確保我們的設(shè)計(jì)對(duì)不同能力用戶都可用。

1. 內(nèi)容和結(jié)構(gòu)方面

1）顏色的運(yùn)用

不能僅通過(guò)顏色來(lái)區(qū)分重要信息，應(yīng)使用文本、顏色或圖形的組合形式。使用顏色來(lái)突出或補(bǔ)充已經(jīng)可見(jiàn)的內(nèi)容。

這對(duì)視覺(jué)功能不健全、有顏色認(rèn)知障礙的用戶，以及單色顯示屏的用戶很有幫助。

在左邊灰度顯示的示例中，你能看出有多少錯(cuò)誤狀態(tài)嗎？

大多數(shù)人在灰度顯示中只能看出有三角形感嘆號(hào)的驗(yàn)證碼是錯(cuò)誤的。然而，賬號(hào)和密碼字段也處于錯(cuò)誤狀態(tài)。

2）一致的步驟

確保平臺(tái)中同系列產(chǎn)品的表單操作步驟以相同的順序出現(xiàn)，有助于培養(yǎng)用戶心智，形成習(xí)慣。

京準(zhǔn)通中的系列產(chǎn)品因表單功能類(lèi)似，所以表單導(dǎo)航也基本一致。

這對(duì)有認(rèn)知障礙的用戶很有幫助，他們可以更輕松地預(yù)測(cè)頁(yè)面及元素所在的位置，掌握表單的結(jié)構(gòu)。

3）一致的組件

相同功能的UI組件應(yīng)該是一致的，設(shè)計(jì)師應(yīng)定期維護(hù)設(shè)計(jì)系統(tǒng)、組件庫(kù)和風(fēng)格指南，以保持團(tuán)隊(duì)輸出內(nèi)容的一致性。

國(guó)內(nèi)常用的組件庫(kù)有 Ant Design 、 ElementUI ，可以在此基礎(chǔ)上進(jìn)行視覺(jué)風(fēng)格的調(diào)整。相同的圖標(biāo)或功能對(duì)應(yīng)的文字內(nèi)容需一致，相同字段的標(biāo)簽也應(yīng)保持一致。

這有助于用戶識(shí)別不同頁(yè)面上各個(gè)字段是否具有相同的功能，對(duì)有閱讀障礙的人很有幫助。保持標(biāo)簽一致還有助于用戶預(yù)測(cè)表單內(nèi)容。

4）標(biāo)題的使用

標(biāo)題需要使用描述性和信息性的文字。一個(gè)詞通常有多種含義，不同的用戶對(duì)同一個(gè)詞也有不同的理解，應(yīng)避免模糊性的詞語(yǔ)帶來(lái)的歧義。標(biāo)題應(yīng)在語(yǔ)言風(fēng)格、視覺(jué)樣式、語(yǔ)法、粒度等方面保持一致。

這對(duì)短期記憶力有限、閱讀文本障礙的用戶有很大幫助，這部分用戶可以通過(guò)根據(jù)較短的字詞知曉每個(gè)部分的內(nèi)容。

5）焦點(diǎn)可見(jiàn)

明確定義控件的焦點(diǎn)狀態(tài)及變化。

• 這對(duì)注意力受限或執(zhí)行過(guò)程受限的用戶，可以通過(guò)發(fā)現(xiàn)焦點(diǎn)位置幫助他們填寫(xiě)表單；
• 對(duì)有視覺(jué)障礙、認(rèn)知限制的用戶，可以減弱環(huán)境變化帶來(lái)的干擾因素，使其更專(zhuān)注于某字段的操作。

6）提前通知在新窗口打開(kāi)鏈接

突然打開(kāi)新窗口可能會(huì)使認(rèn)知障礙的用戶迷失方向。如果需要打開(kāi)新窗口，請(qǐng)?jiān)谟脩魡螕翩溄又案嬷脩??？梢允褂谩霸谛麓翱谥写蜷_(kāi)”之類(lèi)的文本或視覺(jué)圖標(biāo)，幫助用戶預(yù)測(cè)可能發(fā)生的事情。

7）響應(yīng)式設(shè)計(jì)

企業(yè)級(jí)B端產(chǎn)品大多數(shù)需要使用電腦操作，在設(shè)計(jì)初期需要考慮內(nèi)容的布局在不同分辨率電腦的適配情況，常用的尺寸通常有以下三種：1366px * 768px 、1440px * 900px 、1920px * 1080px 。

不要認(rèn)為現(xiàn)在主流電腦分辨率較高，就忽略 1366 尺寸，操作B端軟件的用戶通常為辦公人員，公司的電腦不一定是最好的。

允許內(nèi)容縮放并響應(yīng)各種屏幕尺寸，而不丟失信息或功能，有助于認(rèn)知障礙的用戶完成表單。

2. 視覺(jué)設(shè)計(jì)方面

1）字號(hào)

字號(hào)是界面設(shè)計(jì)中重要元素，字號(hào)大小決定了信息的層級(jí)和主次關(guān)系，合理有序的字號(hào)設(shè)置能讓界面信息清晰易讀、層次分明，一般情況下正文字體大小不應(yīng)小于 12px。

Ant Design最新規(guī)定，將主字體從原先的 12 上升至 14，以保證在多數(shù)常用顯示器上的用戶閱讀效率最佳。

12px 適用于非突出性的說(shuō)明性內(nèi)容。14px 適用于非突出性的普通正文內(nèi)容。標(biāo)題字體一般在16px – 20px區(qū)間。

2）行高

西文的基本行高通常是字號(hào)的 1.2 倍左右。由于中文字符密實(shí)且高度一致，沒(méi)有西文的上下延伸部分來(lái)創(chuàng)造行間空隙，所以一般行高需要更大，根據(jù)兒童、年輕人、老年人等不同人群的特點(diǎn)以及使用環(huán)境，可達(dá)到 1.5 至 2?倍。例如，當(dāng)用 14px 的字體時(shí)，行間距可設(shè)置為 21px – 28px ；

Ant Design 字號(hào)與行高對(duì)應(yīng)關(guān)系如下，可簡(jiǎn)單概括為：?L = F + 8（F ≥ 12），其中 L 是行高，F(xiàn)? 是字號(hào)。

對(duì)于視力不好、閱讀障礙的人來(lái)說(shuō)，增加圖案、文字和字母之間的間距有助于閱讀。

3）字重

設(shè)計(jì)稿中常見(jiàn)的字體粗細(xì)對(duì)應(yīng)前端的 font-weight 屬性， font-weight 屬性執(zhí)行字體的字重，字重取決于黑度等級(jí)或筆劃粗細(xì)，其大致符合下列通用重量名稱(chēng)：

• 100 – Thin
• 200 – Extra Light (Ultra Light)
• 300 – Light
• 400 – Regular (Normal、Book、Roman)
• 500 – Medium
• 700 – Semi Bold (Demi Bold)
• 700 – Bold
• 800 – Extra Bold (Ultra Bold)
• 900 – Black (Heavy)

一般情況下，常用 regular 以及 medium 的兩種字體重量，分別對(duì)應(yīng)代碼中的 400 和 500。在英文字體加粗的情況下會(huì)采用 Semi Bold 的字體重量，對(duì)應(yīng)代碼中的 700。

字重也可以區(qū)分信息層級(jí)，信息層級(jí)越明顯越有助于認(rèn)知障礙的用戶閱讀。

4）足夠的色彩對(duì)比

WCAG 2.0 中將顏色對(duì)比等級(jí)分為 3 種，A 級(jí)，AA 級(jí)，AAA 級(jí)。

• A 級(jí)：采用 3:1 的對(duì)比度，是普通觀察者可接受的最低對(duì)比度。字號(hào)大，字重高的文字在較低的對(duì)比度下也易于閱讀，這時(shí)就可以選擇3:1的對(duì)比度。
• AA 級(jí)： 采用 4.5:1 的對(duì)比度，是普通視力損失的人可接受的最低對(duì)比度（數(shù)據(jù)來(lái)自80歲老人的典型視力）。
• AAA 級(jí)：采用 7:1 的對(duì)比度，是嚴(yán)重視力損失的人可接受的最低對(duì)比度，超出這種視力損傷的用戶就需要借助輔助技術(shù)幫助其進(jìn)行信息識(shí)別了，所以不再考慮范圍內(nèi)。

基于亮度值計(jì)算，文本應(yīng)該保持至少 4.5:1 的對(duì)比度以保持文本清晰，?7:1 對(duì)比度效果最佳。圖標(biāo)和圖形對(duì)象與相鄰顏色的對(duì)比度應(yīng)至少為 3:1 。這對(duì)感知對(duì)比度不足的的低視力人士很有幫助。

五、界面可擴(kuò)展性

B 端產(chǎn)品業(yè)務(wù)場(chǎng)景多樣、邏輯復(fù)雜，設(shè)計(jì)師應(yīng)該多方面考慮信息展示的擴(kuò)展性問(wèn)題。除了要設(shè)計(jì)出產(chǎn)品需求中的核心頁(yè)面，也需要考慮到交互細(xì)節(jié)，以及頁(yè)面極端情況時(shí)的展示方式。

以下為幾種比較常見(jiàn)的情況。

1. 是否考慮到文本內(nèi)容較多的情況

文本內(nèi)容較多通常有以下三種解決方法：折行、最大限制省略、新增查看入口等。

1）折行

折行需要結(jié)合上下文考慮是否符合語(yǔ)境邏輯，并按字段類(lèi)型折行，必要時(shí)可重新進(jìn)行視覺(jué)排版。

2）最大限制省略

一般情況下文本空間足以顯示全部信息，就算特殊情況（說(shuō)明文本過(guò)多、控件空間有限）沒(méi)有展示全，也應(yīng)確保展示出關(guān)鍵信息以便用戶識(shí)別。超過(guò)部分可以以省略號(hào)展示，鼠標(biāo)懸浮時(shí)查看完整信息。

3）新增查看入口

內(nèi)容過(guò)多時(shí)，可以新增文本內(nèi)容的查看入口，通過(guò)彈窗或新建窗口的形式展示。切記不是新建頁(yè)面，避免打斷用戶操作流程。

2. 是否考慮內(nèi)容為空的情況

缺省頁(yè)可以緩解用戶焦急的情緒。一個(gè)完整的產(chǎn)品一定少不了缺省頁(yè)，如頁(yè)面無(wú)內(nèi)容、搜索無(wú)內(nèi)容、無(wú)網(wǎng)絡(luò)、服務(wù)器錯(cuò)誤等。但對(duì)于表單設(shè)計(jì)，你是否考慮到列表框、內(nèi)容框?yàn)榭諘r(shí)的狀態(tài)呢？

除了告知用戶無(wú)內(nèi)容外，還需要引導(dǎo)用戶可進(jìn)行的操作，幫助用戶添加內(nèi)容。對(duì)于空狀態(tài)，也有必要從插圖樣式、文案內(nèi)容等方面費(fèi)一些心思，幫助用戶愉悅的“解決問(wèn)題”，同時(shí)避免使用專(zhuān)業(yè)術(shù)語(yǔ)，盡量以趣味化、委婉的方式來(lái)表達(dá)。

3. 是否考慮圖片復(fù)雜的情況

針對(duì)于廣告圖上顯示信息的設(shè)計(jì)，這里的圖片不是固定的，我們無(wú)法控制圖片是深色背景還是淺色背景。

所以在設(shè)計(jì)時(shí)，需要考慮到不同背景圖片下內(nèi)容的展示效果。例如在文案信息元素下方加一個(gè)灰色透明層，這樣既不遮擋圖片內(nèi)容，又能保證不同背景下的顯示效果。

4. 是否考慮按鈕的不同狀態(tài)

在做按鈕的設(shè)計(jì)時(shí)，至少要考慮到 3 種基本狀態(tài)的顯示方式，即默認(rèn)、點(diǎn)擊、禁用，缺一不可，防止在開(kāi)發(fā)的時(shí)候前端按自己的想法給按鈕添樣式。

另外，還需要考慮當(dāng)前功能按鈕操作后，會(huì)變成什么功能的按鈕。這與業(yè)務(wù)邏輯、任務(wù)流程密切相關(guān)，需要在做需求時(shí)了解清楚，然后給出展示。

5. 是否考慮布局上的最大展示

選項(xiàng)、卡片較多時(shí)，需要根據(jù)業(yè)務(wù)狀況設(shè)計(jì)內(nèi)容的展示形式，是平鋪、還是切換？不同分辨率選項(xiàng)內(nèi)容是否展示完整？是否會(huì)變形？

過(guò)多內(nèi)容用戶瀏覽起來(lái)可能會(huì)困難，可以考慮選擇性的查看。根據(jù)業(yè)務(wù)的需要，對(duì)非重要的詳細(xì)內(nèi)容做適當(dāng)?shù)碾[藏，用“全部”或“更多”類(lèi)型的按鈕引導(dǎo)用戶點(diǎn)擊可查看更多內(nèi)容。

六、小結(jié)

為方便大家查看，將本階段的內(nèi)容總結(jié)如下，下篇文章將展開(kāi)講述其他 4 個(gè)方面，歡迎持續(xù)關(guān)注。

參考資料：

• https://www.smashingmagazine.com/2021/05/frustrating-design-patterns-birthday-picker/
• https://www.justinmind.com/blog/mental-models/
• https://www.uxmatters.com/mt/archives/2015/07/simplify-your-ux-through-reduction.php
• https://www.uxpin.com/studio/blog/a-ux-designers-guide-to-improving-speed-of-use/
• https://www.jianshu.com/p/573515eb7463

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

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