用戶體驗(yàn)是一個(gè)老生常談的話題。在進(jìn)行 UI & UX 設(shè)計(jì)時(shí)，我們經(jīng)常會(huì)忽略一些細(xì)節(jié)，雖然我們并沒有覺得有什么問題，但往往會(huì)極大地影響用戶的體驗(yàn)，從而影響整個(gè)產(chǎn)品。作者在本文中提出了 6 條提升用戶體驗(yàn)的微技巧，一起來學(xué)習(xí)吧！

在設(shè)計(jì)高效、易讀和漂亮的 UI 界面時(shí)，只需要小的改動(dòng)就能讓你的設(shè)計(jì)眼前一亮。在這篇文章中，我為你帶來了另一些容易付諸實(shí)踐的 UI 和 UX 微技巧。這些技巧只需很小的改動(dòng)就可以幫助你提升用戶體驗(yàn)。讓我們開始吧！

一、通過色彩讓設(shè)計(jì)更一致

如果你有一個(gè)設(shè)計(jì)項(xiàng)目，可以讓你在顏色選擇方面有比較多的自由，不要總是傾向于用彩虹般的顏色來進(jìn)行設(shè)計(jì)。

如果你走的是彩虹路線，你很快就會(huì)發(fā)現(xiàn)很多內(nèi)容看起來都不匹配。簡(jiǎn)單地使用一個(gè)基礎(chǔ)色，然后將該顏色的色調(diào)和明暗進(jìn)行變化并應(yīng)用，可以令你的設(shè)計(jì)更加協(xié)調(diào)和一致，并且看起來更專業(yè)，而不需要那些閃亮的彩虹和需要色彩理論學(xué)位。

二、突出選中目標(biāo)吸引用戶注意

UI 可以是干凈的、極簡(jiǎn)的和直截了當(dāng)?shù)?，這毋庸置疑。但不能以犧牲用戶體驗(yàn)為代價(jià)。對(duì)于像選項(xiàng)菜單這樣簡(jiǎn)單的東西，要確保用戶只需快速瀏覽一下，就能夠找到選擇的項(xiàng)目。

你不需要在這里追究更多細(xì)節(jié)。簡(jiǎn)潔的粗體就足夠讓用戶輕松的分辨出他們選中的目標(biāo)，而且他們的輸入已經(jīng)得到反饋。

三、加深輕字重文字 提升可讀性

當(dāng)涉及到長(zhǎng)篇文字內(nèi)容時(shí)，你可能會(huì)傾向于使用灰色的中間色調(diào)，這可能沒什么問題。但如果你同時(shí)使用更輕字重的字體，就會(huì)發(fā)現(xiàn)這影響了這段內(nèi)容在任何尺寸屏幕上的可讀性。

不要讓用戶因?yàn)檫@種原因退出頁(yè)面?？梢酝ㄟ^將文字的顏色加深來簡(jiǎn)單地解決這個(gè)問題，讓每個(gè)人都更加易讀。對(duì)于較輕字重的字體，只需將其顏色加深幾個(gè)級(jí)別，就能顯著的改善其可讀性。

四、明確元素優(yōu)先級(jí)

你希望用戶的眼睛每次都能快速、有效地注意到頁(yè)面上最重要的元素，并將認(rèn)知的努力降到最低。通過使用視覺層級(jí)原則，如字體大小、字重、顏色和布局，僅舉幾例，你可以通過這些技巧輕松地把最重要的元素放在突出位置。遵循這些原則有助于改善用戶的體驗(yàn)，并有助于引導(dǎo)用戶以更直接、準(zhǔn)確地方式使用產(chǎn)品。

五、不要讓用戶猜測(cè)

在用戶進(jìn)行操作之前，特別是點(diǎn)擊某些 CTA 按鈕之前，要確保他們不會(huì)被蒙在鼓里，知道接下來會(huì)發(fā)生什么。在執(zhí)行操作之前，始終讓用戶清楚地了解他們?cè)邳c(diǎn)擊突出顯示的 CTA 按鈕時(shí)可以期待些什么。改善每一步的用戶體驗(yàn)，不要讓他們?cè)诼贸讨腥魏我粋€(gè)觸點(diǎn)產(chǎn)生疑問。

六、為CTA按鈕單獨(dú)設(shè)定一種顏色

CTA 按鈕在頁(yè)面中哪怕不是最重要的部分，也是最重要的之一，讓它在頁(yè)面中突出出來!

不要讓用戶將它與頁(yè)面上其他類型的元素（例如通知或標(biāo)簽）混淆。它需要很容易地被分辨出來，而這可以通過簡(jiǎn)單地為 CTA 設(shè)置單獨(dú)一種顏色就做到。當(dāng)然，你可以在尺寸、形狀等方面做更多的細(xì)節(jié)，但只要為你的 CTA 保留一種顏色，僅此一點(diǎn)就可以減少大部分問題。

我希望通過這幾條簡(jiǎn)短的小貼士，你能意識(shí)到對(duì)你的設(shè)計(jì)進(jìn)行小的調(diào)整也能帶來完全不一樣的用戶體驗(yàn)。

毫無疑問，表格之于B端產(chǎn)品而言是及其重要的一部分，那么，如何系統(tǒng)掌握B端產(chǎn)品中的表格設(shè)計(jì)呢？本文作者從表格設(shè)計(jì)規(guī)范與交互邏輯兩個(gè)角度提出了15點(diǎn)建議，干貨滿滿，希望對(duì)你有幫助。

表格作為B端產(chǎn)品中重要的界面組成部分，承載著內(nèi)容展示、數(shù)據(jù)記錄等多重任務(wù)。每家產(chǎn)品的表格看起來構(gòu)成差不多，但在交互細(xì)節(jié)上仍然有很多好的地方值得我們仔細(xì)思考。

本次通過整理10條B端表格設(shè)計(jì)規(guī)范+5條B端表格交互邏輯，系統(tǒng)掌握B端產(chǎn)品中的表格設(shè)計(jì)～

一、B端表格規(guī)范整理

1. 對(duì)齊，高效的信息獲取方式

表格內(nèi)的信息通過對(duì)齊，會(huì)更加規(guī)范易理解，給用戶視覺上的統(tǒng)一感，且視線流動(dòng)順暢，能夠讓人快速捕捉到所要的內(nèi)容。

• 文本信息左對(duì)齊，因?yàn)楝F(xiàn)代人的閱讀方式習(xí)慣從左到右，符合正常心智；
• 數(shù)據(jù)信息右對(duì)齊，方便數(shù)字大小的直觀對(duì)比；
• 內(nèi)容寬度固定居中對(duì)齊，更好的信息呈現(xiàn)及表格空間的節(jié)省；
• 表頭與信息內(nèi)容對(duì)齊方式一致，一致性以達(dá)到簡(jiǎn)化，降低視覺噪音。

2. 表格列數(shù)與固定列

默認(rèn)展示的列數(shù)為3-8列，如果需要展示更多列數(shù)，則需要優(yōu)先固定展示重要列，其余的列的內(nèi)容會(huì)以滾動(dòng)條滑動(dòng)而展示出來。

有操作時(shí)需固定，操作項(xiàng)不固定時(shí)無法快速定位會(huì)降低操作效率；重要信息固定，有利于快速獲取重要的內(nèi)容。

3. 表格列表的寬度

寬度的尺寸大小自適應(yīng)，但需要根據(jù)文字的重要性顯示，重要文字內(nèi)容優(yōu)先完整顯示。（如果由于屏幕小表格會(huì)出現(xiàn)省略，就要考慮多一個(gè)瀏覽器自帶的title提示。）

注：當(dāng)?shù)谝涣惺切蛱?hào)或多選項(xiàng)時(shí)，列寬不需要太寬，這樣視覺不會(huì)顯得空洞。

4. 表頭每列標(biāo)題文字字?jǐn)?shù)

字符不要多，如果文字太多，就需要做文字信息精簡(jiǎn)化。同樣，對(duì)于專業(yè)術(shù)語(yǔ)或用戶不常見的名詞應(yīng)給予一定的幫助說明。

5. 長(zhǎng)文本處理

表格內(nèi)容較多且有長(zhǎng)文本時(shí)，長(zhǎng)文本縮略展示；表格內(nèi)容較少時(shí)有長(zhǎng)文本，長(zhǎng)文本換行展示。

6. 空白數(shù)據(jù)填充「-」，避免留白產(chǎn)生疑慮

表格中經(jīng)常會(huì)出現(xiàn)空數(shù)據(jù)或無數(shù)據(jù)的情況，留白處理會(huì)給用戶造成一定的困惑和誤解，是系統(tǒng)沒有加載出來嗎？明智的做法，使用「-」填充顯示。圖片為空時(shí)使用圖片占位符。

7. 操作列的統(tǒng)一

同一項(xiàng)目中的操作列命名應(yīng)該保持統(tǒng)一，例如：常規(guī)增、刪、改、查命名為新增、刪除、編輯、詳情。

操作項(xiàng)超過三個(gè)時(shí)，將操作低頻折疊收起，可以幫助頁(yè)面突出更加重要的信息，減輕空間壓力，減少干擾。

8. 數(shù)據(jù)升降樣式

給數(shù)據(jù)做升降區(qū)分可以快速判斷數(shù)據(jù)的趨勢(shì)，國(guó)內(nèi)數(shù)據(jù)升圖標(biāo)默認(rèn)為紅色，降的為綠色。

9. 表格全局操作和批量操作

全局操作為無需選擇數(shù)據(jù)內(nèi)容即可進(jìn)行的操作，常見的有新增、導(dǎo)入、篩選。

批量操作就是對(duì)表格的多行數(shù)據(jù)同時(shí)操作，常見的有導(dǎo)出、刪除。

全局和批量都不屬于單個(gè)對(duì)象因此需要放在表格外，操作具體的位置排放根據(jù)操作的重要程度一次從左到右遞減。

10. 斑馬線

條紋顏色：標(biāo)題背景色透明度60%左右；（條紋顏色視覺上應(yīng)該比標(biāo)題欄弱一點(diǎn)）鼠標(biāo)hover顏色：主題色透明度10%。

二、B端表格交互整理

1. 固定表頭，一目了然

當(dāng)閱讀豐富且繁多的表格時(shí)，由于屏幕有限，用戶不得不拖動(dòng)橫向或縱向滾動(dòng)條來閱讀信息。

固定表頭，能夠讓用戶明白當(dāng)前單元格內(nèi)信息的屬性而不至于不知道該信息的意思。固定表頭也是一種界面友好性的體現(xiàn)。

2. 排序，讓信息有序起來

可以讓無序信息內(nèi)容進(jìn)行有序排列，排序分為升序和降序，一般用在數(shù)據(jù)、時(shí)間、數(shù)量上。

3. 調(diào)整列寬度，查看完整數(shù)據(jù)

允許調(diào)整列的寬度來查看更加完整的縮略數(shù)據(jù)。被截?cái)嗟臄?shù)據(jù)，默認(rèn)支持鼠標(biāo)懸停時(shí)瀏覽器自帶title顯示完整數(shù)據(jù)。

4. 水平滾動(dòng)，固定首尾列

呈現(xiàn)大型數(shù)據(jù)集時(shí)，水平滾動(dòng)是不可避免的，通過橫向滾動(dòng)查看其它數(shù)據(jù)。將首列進(jìn)行固定（若包含勾選操作，則一起固定），以便用戶將數(shù)據(jù)與對(duì)象進(jìn)行對(duì)應(yīng)。

5. 分頁(yè)固定

若表格是分頁(yè)處理的，分頁(yè)會(huì)放在上部、下部或上下部均有，分頁(yè)固定省去了用戶需要翻到頂部或底部進(jìn)行操作的麻煩。

前人留下的一些設(shè)計(jì)原則能夠幫助我們更好地進(jìn)行頁(yè)面以及產(chǎn)品的設(shè)計(jì)，讓用戶有更好的體驗(yàn)。本文對(duì)帕累托法則進(jìn)行了介紹，希望能幫助大家在以后的設(shè)計(jì)中更好的理解與運(yùn)用。

威廉·斯特倫克（William Strunk）說過：“優(yōu)秀的設(shè)計(jì)師有時(shí)會(huì)無視設(shè)計(jì)法則，但當(dāng)他們這樣做的時(shí)候，通常會(huì)有一些補(bǔ)償性的措施，除非你確定你能做得那么好，否則最好還是遵守這些法則”，所以設(shè)計(jì)師需要對(duì)一些通用性的法則有所理解，做好相應(yīng)的知識(shí)儲(chǔ)備，以便在需要時(shí)從中找尋相通的規(guī)律和事務(wù)的本源。

設(shè)計(jì)常常是以一種美觀且富有規(guī)律的形態(tài)出現(xiàn)，不論大家是何種姿態(tài)、什么樣的知識(shí)背景，一旦踏入設(shè)計(jì)領(lǐng)域之后就會(huì)忍不住的去尋求設(shè)計(jì)法則，探索期背后的設(shè)計(jì)規(guī)律，因此經(jīng)過長(zhǎng)期沉淀，一些大佬和前輩們留下了大量的通用設(shè)計(jì)法則。

今天，筆者就說說帕累托法則，希望能幫助大家在以后的設(shè)計(jì)中更好的理解與運(yùn)用。

一、認(rèn)識(shí)帕累托法則

1. 帕累托法則的背景

19世紀(jì)末，意大利經(jīng)濟(jì)學(xué)家和工程師維爾弗雷多·帕累托（Vilfredo Pareto）發(fā)現(xiàn)，自家花園中80%的豌豆產(chǎn)自于20%的豌豆莢，在隨后研究土地所有權(quán)和財(cái)富不平等的問題中，再次發(fā)現(xiàn)意大利 80%的土地屬于 20%的人。

20世紀(jì)初，由管理學(xué)家約瑟夫·朱蘭（Joseph Juran）將其命名為帕累托法則，即80%的結(jié)果是20%的原因造成的，并且號(hào)召關(guān)注「重要的少數(shù)」而不是在「瑣碎的多數(shù)」當(dāng)中投注精力。后續(xù)在經(jīng)濟(jì)學(xué)中得出結(jié)論（80%的財(cái)富掌握在20%的人手里）更加證實(shí)了帕累托法則的觀點(diǎn)。

2. 正確理解80與20

帕累托法則有很多不同的叫法，如帕列托法則、關(guān)鍵少數(shù)法則、二八法則、巴萊特定律、最省力的法則、不平衡原則等，后續(xù)筆者將其稱為「80/20法則」。

其實(shí)，80/20法則是一個(gè)較為抽象的概念，可以理解為：大部分的效果由少數(shù)幾項(xiàng)關(guān)鍵的因素來決定。在實(shí)際的場(chǎng)景中，“大部分”不是精確的80%，“幾項(xiàng)關(guān)鍵因素”也不是固定的20%，數(shù)據(jù)會(huì)有所浮動(dòng)，可能是70%+30%或者90%+10%，但不管這些數(shù)字如何波動(dòng)，其背后蘊(yùn)含的規(guī)律（集中的投入將產(chǎn)出大于預(yù)期的結(jié)果）是不變的，并且生活中存在的許多不平衡現(xiàn)象，都與這個(gè)規(guī)律相當(dāng)接近。

3. 可適用范圍

80/20法則并不受人為直接控職，更多時(shí)后是自然而然的形成，其適用領(lǐng)域非常廣泛。早期大多數(shù)用于社會(huì)、經(jīng)濟(jì)、管理以及工程等領(lǐng)域，而在80年代末就已經(jīng)有設(shè)計(jì)師將其設(shè)計(jì)領(lǐng)域，在各行各業(yè)中，已經(jīng)有大量的案例證明了 80/20原則：

• 人類80%的科學(xué)發(fā)明，來自于20%的人口
• 社會(huì)上20%的人占有80%的財(cái)富
• 城市80%的交通，集中在20%的道路上
• 20%的客戶為公司貢獻(xiàn)了80%的收入
• 公司80%的收益來源于20%的產(chǎn)品
• 20%的網(wǎng)站獲取了 80%的網(wǎng)絡(luò)流量
• 20%的常見軟件錯(cuò)誤導(dǎo)致了80%的系統(tǒng)崩潰
• ……

4. 設(shè)計(jì)領(lǐng)域中的運(yùn)用

70年代中期出現(xiàn)圖形化界面，而到80年代末，80/20法則就已經(jīng)被設(shè)計(jì)師引用在設(shè)計(jì)規(guī)范當(dāng)中，后續(xù)經(jīng)過不斷的發(fā)展及優(yōu)化，現(xiàn)已深入設(shè)計(jì)中的方方面面，PM用來處理KPI、UX用來劃分權(quán)重、UI用來決策版面布局等。

界面設(shè)計(jì)中該如何應(yīng)用80/20法則，這就需要設(shè)計(jì)師時(shí)刻注意如何讓用戶更快找到目標(biāo)、如何更順暢的完成任務(wù)以及如何擁有更愉悅的心理感受。例如80%的用戶只會(huì)用到20%的功能，那么設(shè)計(jì)師就應(yīng)該將80%的時(shí)間、精力集中在這20%的功能上，不斷迎合用戶需求以及使用體驗(yàn)。

二、產(chǎn)品如何應(yīng)對(duì)80與20

1. 關(guān)鍵性的20%

80/20法則能夠幫助我們提供決策思路、梳理設(shè)計(jì)方向，通過前面的了解，我們應(yīng)該清楚了產(chǎn)品80%的用戶只會(huì)用到20%的功能，而80%的收益也恰恰來自于20%的付費(fèi)用戶，甚至低于20%。

雖然一直呼吁盡量滿足所有用戶，但產(chǎn)品團(tuán)隊(duì)的重心始終要圍繞著20%來進(jìn)行，從產(chǎn)品到設(shè)計(jì)、再到開發(fā)測(cè)試，都能以此為方向制定問題的解決方案。

2. 非關(guān)鍵性的80%

任何一款產(chǎn)品都不能忽略主次，每隔一段時(shí)間就要重新評(píng)估功能價(jià)值，以備后續(xù)的更新迭代，針對(duì)非關(guān)鍵性的80%切勿耗費(fèi)過多的精力，以免喧賓奪主，不僅得到不好的反饋、還會(huì)帶來不必要的損失，吃力不討好。

對(duì)于已經(jīng)過期的核心（曾經(jīng)20%）功能，需要及時(shí)降低權(quán)重以及精力的消耗，不然即便是掌聲一片、也可能無法變現(xiàn)。

3. 僅關(guān)注 20%有風(fēng)險(xiǎn)

用20%的部分創(chuàng)造80%的價(jià)值，并不意味著只關(guān)注20%的關(guān)鍵性指標(biāo)、其它的就可以被忽略，這樣做表面上看是挺誘人，但會(huì)讓其他很多指標(biāo)停滯，呈現(xiàn)出產(chǎn)品過度優(yōu)化的情況，造成短時(shí)間內(nèi)隱藏的負(fù)面影響。

團(tuán)隊(duì)?wèi)?yīng)該要有眾覽全局的眼光，考慮到各指標(biāo)間的相互影響，可視情況而定將時(shí)間和精力合理分配，如90%+10%、80%+20%、70%+30%等，只要是將大部分用在關(guān)鍵性指標(biāo)上即可。

三、在UI設(shè)計(jì)中的運(yùn)用

在UI設(shè)計(jì)中，我們會(huì)將主要精力花費(fèi)在20%的頁(yè)面設(shè)計(jì)上，例如APP底部標(biāo)簽欄的幾大主頁(yè)或其它重要的一/二級(jí)頁(yè)面，會(huì)花費(fèi)更多的心思去構(gòu)思不一樣的布局、表現(xiàn)手法，將設(shè)計(jì)功底凸顯出來。而剩下80%的頁(yè)面就相對(duì)機(jī)械化，會(huì)使用一些常規(guī)樣式以及復(fù)用的方式像搭積木一樣快速完成，成本之低、效率之高毋庸置疑。

同一個(gè)頁(yè)面的設(shè)計(jì)方式也是如此，設(shè)計(jì)師將大量心思放在首屏及位置靠上的功能上，待超過一屏后下滑時(shí)，設(shè)計(jì)也會(huì)逐漸輕量、組件化，這有助于節(jié)省產(chǎn)品、設(shè)計(jì)、開發(fā)更多的時(shí)間。

1. 排版布局（F型）

用戶瀏覽屏幕時(shí)，眼球移動(dòng)的順序通常都是從左到右、從上到下（基于網(wǎng)頁(yè)瀏覽眼動(dòng)測(cè)試），這種移動(dòng)軌跡很像字母「F」，這也讓F型布局成為網(wǎng)頁(yè)設(shè)計(jì)中效率最高的方式之一，所以設(shè)計(jì)師通常會(huì)將重要的信息放在左上角或左側(cè)，不重要的信息放在右側(cè)。

如下面這張眼動(dòng)測(cè)試圖，F(xiàn)型布局也正好詮釋了80/20法則合理性與可行性，在頁(yè)面中20%的關(guān)鍵區(qū)域，吸引了用戶80%的注意力。

2. 功能入口設(shè)計(jì)

很多產(chǎn)品因?yàn)闃I(yè)務(wù)功能的龐大，一股腦的將信息全部展示出來，看起來十分臃腫，用戶不能快速找到自己想要的信內(nèi)容，就會(huì)失去信心。

優(yōu)酷APP首頁(yè)將熱門頻道和點(diǎn)擊頻率較高的頻道顯示在頂部導(dǎo)航中，如精選、電視劇、電影、最新院線等，而其他更多的分類則隱藏在頻道選項(xiàng)卡中，將少量（≈20%）重要的內(nèi)容放在明顯的位置，目的就是為了讓大部分用戶更快觸達(dá)，提高了產(chǎn)品的易用性。

3. 選項(xiàng)列表設(shè)計(jì)

在一些選項(xiàng)列表中，由于選項(xiàng)數(shù)量的龐大，會(huì)給用戶增加使用難度。

例如，使用美團(tuán)購(gòu)買火車票在選擇地址時(shí)，面對(duì)超長(zhǎng)的地址列表，逐個(gè)查看或通過字母篩選，都要花費(fèi)一定的時(shí)間和操作成本，即便可以通過碼字搜索來完成，但因?yàn)樽孕休斎胗泻芏嗟牟豢煽匦?，能讓用戶選擇的就不要讓其輸入。

對(duì)于地址列表，除開自動(dòng)定位和搜索歷史，運(yùn)用80/20法則就能很好的解決這一問題，系統(tǒng)將約20%高頻選擇的熱門城市作為單獨(dú)的模塊放在全部列表之前，提高了大部分用戶的搜索效率。

4.  極簡(jiǎn)風(fēng)格設(shè)計(jì)

極簡(jiǎn)風(fēng)格的界面設(shè)計(jì)跟80/20法則在精神上保持著高度的一致，剔除多余、無用的元素，而保留的每一個(gè)元素都是有目的、有針對(duì)性的，也是絕對(duì)必要的存在。在極簡(jiǎn)主義設(shè)計(jì)中，視覺上簡(jiǎn)單干凈，大部分都是通過通過留白來襯托關(guān)鍵性元素的存在，讓用戶更加聚焦于主要功能/信息。

四、與其他法則的糾葛

1. 與奧卡姆剃刀的結(jié)合

奧卡姆剃刀指出「如無必要，勿增實(shí)體」，需知頁(yè)面中每多一個(gè)元素都會(huì)增加視覺“噪聲”，意味著用戶需要花費(fèi)額外的時(shí)間和理解成本，對(duì)用戶體驗(yàn)的影響是很大的。那么問題來了，當(dāng)產(chǎn)品需要增加一項(xiàng)需求量小但確實(shí)存在的功能，該怎么處理？

這時(shí)我們可以將奧卡姆剃刀原則作為最終的評(píng)判標(biāo)準(zhǔn)，是否需要增加上述所說的功能，就要看看能否很好的控制團(tuán)隊(duì)開發(fā)成本和用戶體驗(yàn)成本。

其實(shí)在80/20法則中，很多小眾但確實(shí)存在的功能需求基本很難抵消所造成的用戶體驗(yàn)損失，所以即便實(shí)現(xiàn)了這個(gè)需求，也很難分配出20%的精力去維護(hù)與迭代，甚至“俺耳盜鈴”般的將其遺忘，但這個(gè)視覺“噪聲”一直存在，如果事先能分析出這種結(jié)果，這個(gè)需求根本不需要增加。

2. 與長(zhǎng)尾模型的對(duì)抗

在2004年長(zhǎng)尾模型才被提出來的時(shí)候，很多人認(rèn)為這是在顛覆80/20法則，它們的曲線長(zhǎng)得很像，但結(jié)論完全相反，那條長(zhǎng)長(zhǎng)的“尾巴”（非關(guān)鍵的80%）所占據(jù)的長(zhǎng)度幾乎與頭部的（關(guān)鍵的20%）高度相當(dāng)，這說明收益雖低，但這么多數(shù)量的累積，依然值得重點(diǎn)關(guān)注。

所以有很多企業(yè)在采集差異化戰(zhàn)略時(shí)運(yùn)用了長(zhǎng)尾理論，例如小米搭建的全品類商城用的是長(zhǎng)尾理論。

乍一聽好像很有道理，難道80/20法則被推翻了嗎？事實(shí)并非如此，長(zhǎng)尾理論的成立必須要滿足兩個(gè)條件，第一是尾巴真的足夠長(zhǎng)（小眾需求確實(shí)非常多），第二長(zhǎng)尾巴能被用戶發(fā)現(xiàn)（龐大的用戶量），這兩個(gè)條件缺一不可。例如京東、淘寶、微信、支付寶等，其前提都是建立在大規(guī)模、且海量的用戶資源之上，不管多么隱蔽、多小的動(dòng)能，總能擁有一些不錯(cuò)的曝光度，所以才能發(fā)揮長(zhǎng)尾模型的作用。

說道這里，大家應(yīng)該就明白了，那些中小型的產(chǎn)品對(duì)長(zhǎng)尾模型大多是望塵莫及，所以在你的產(chǎn)品規(guī)模、用戶量沒有達(dá)到一定的級(jí)別之前，就不要妄捧長(zhǎng)尾模型，用好80/20法則就好。

五、結(jié)語(yǔ)

80/20法則在實(shí)際工作中是一個(gè)相對(duì)普遍的定律，它能讓我們靈活思考設(shè)計(jì)問題，更好的為用戶服務(wù)，雖然80/20法則也存在一定的爭(zhēng)議，但還是適用于覺絕大多數(shù)的場(chǎng)景，在關(guān)鍵時(shí)候使用，能幫助我們準(zhǔn)確的找到問題點(diǎn)，在有限的時(shí)間和精力下快速作出優(yōu)化決策并、關(guān)注核心功能，最終達(dá)成目標(biāo)。

都是交互反饋和提示組件，大家可能會(huì)疑惑：文字氣泡 Tooltips 和氣泡卡片 Popover 的區(qū)別是什么，兩者之間的應(yīng)用場(chǎng)景如何？本文對(duì)兩者的差異進(jìn)行總結(jié)，希望對(duì)你有所幫助。

同樣都是交互反饋及提示組件，你可能會(huì)疑惑：文字氣泡 Tooltips 和氣泡卡片 Popover 有什么區(qū)別？分別有哪些特定的使用場(chǎng)景？

本文就來詳細(xì)分析下這兩個(gè)組件的區(qū)別和聯(lián)系，幫助你做好應(yīng)用。

一、氣泡卡片  Popover

氣泡卡片（Popover）是當(dāng)用戶點(diǎn)擊 / 鼠標(biāo)移入元素時(shí)，就會(huì)彈出氣泡式的卡片浮層。當(dāng)對(duì)于某個(gè)元素有更多的解釋性描述和相關(guān)操作時(shí)，這些內(nèi)容可以收納到元素的氣泡卡片中，根據(jù)用戶的操作行為進(jìn)行展現(xiàn)。

其用法特征是：

1. 用戶可以在浮層卡片上進(jìn)行相關(guān)操作，也即氣泡卡片可以并需要承載更復(fù)雜的內(nèi)容和交互功能。

2. 卡片中可以包括的內(nèi)容有：文字說明，圖片內(nèi)容，操作按鈕，相關(guān)鏈接等等。

3. 組件功能側(cè)重于：承載信息和操作。即收納并在需要的時(shí)候展示與該元素內(nèi)容相關(guān)的信息和操作。這些信息的特征通常是：

• 并不緊急但比較重要的解釋內(nèi)容；
• 有一部分的用戶需要隨時(shí)閱讀的內(nèi)容；
• 在點(diǎn)擊關(guān)鍵操作后給用戶確認(rèn)“是否繼續(xù)進(jìn)行”的提示（Ant Design 也單獨(dú)把這個(gè)功能拿出來做成做了一個(gè)組件：Popconfirm 氣泡確認(rèn)框，如下圖）。

二、文字氣泡  Tooltips

文字氣泡（Tooltips）是相對(duì)簡(jiǎn)單的文字提示氣泡框。用戶使用鼠標(biāo)移入元素后顯示提示，移出后提示消失。

其用法特征是：

1. 文字氣泡通常不承載復(fù)雜的信息和操作，僅提供一段文案解釋，也即用戶在文字氣泡中不能做除閱讀外的其它操作。

2. 該組件功能側(cè)重于：解釋說明。即對(duì)局部?jī)?nèi)容或元素進(jìn)行文字性的解釋說明。通常來說該氣泡是對(duì)其載體本身的解釋，比如：

• 一個(gè)特殊的功能按鈕；
• 專有名詞、難懂詞匯；
• 看不出具體目的地的操作鏈接
• 特殊的 icon 等。

三、使用建議

1. 關(guān)于使用場(chǎng)景

• 氣泡卡片 Popover：常用于承載信息和操作。承載的內(nèi)容和形式更為多樣。
• 文字氣泡 Tooltips：常用于解釋說明。僅承載簡(jiǎn)單的文案信息。

2. 關(guān)于組件樣式

有同學(xué)看過 Ant Design 組件庫(kù)提供的組件樣例，會(huì)覺得氣泡卡片 Popover 是白色背景，而文字氣泡 Tooltips 是半透明黑色背景。

其實(shí)這兩個(gè)組件的背景顏色上的差異并不是重點(diǎn)，因?yàn)檫@兩個(gè)組件都可以使用其他顏色（比如帶有透明度的品牌色）做背景底色。顏色并不具備唯一標(biāo)準(zhǔn)。AntD 就提供了多種顏色的文字氣泡樣式：

3. 關(guān)于理解規(guī)范

也許你已經(jīng)發(fā)現(xiàn)，即使我們將一個(gè)組件的使用規(guī)范和應(yīng)用場(chǎng)景解釋得再全面，在使用時(shí)也總會(huì)出現(xiàn)一些特殊的業(yè)務(wù)需求和應(yīng)用場(chǎng)景無法嚴(yán)格按照規(guī)范來執(zhí)行。

面對(duì)復(fù)雜多樣的業(yè)務(wù)需求，我們更應(yīng)該學(xué)會(huì)：在理解業(yè)務(wù)需求的基礎(chǔ)上，合理調(diào)整組件的使用方式和樣式。

組件的規(guī)范對(duì)設(shè)計(jì)師來說并不應(yīng)該是限制或約束，而是一種能夠幫助我們快速實(shí)現(xiàn)產(chǎn)品設(shè)計(jì)一致性，保證基礎(chǔ)體驗(yàn)的快速方式。

關(guān)于“管理模式下是否需要確認(rèn)按鈕”這一問題，作者結(jié)合自己最近的一次設(shè)計(jì)方案復(fù)盤，從三個(gè)維度展開分析，希望對(duì)你有所啟發(fā)。

背景

需求：在課程章節(jié)頁(yè)面，老師希望可以對(duì)章節(jié)、單元編輯名稱和調(diào)整順序。

設(shè)計(jì)問題：

1. 操作功能入口放在哪里？
2. 是實(shí)時(shí)保存同步，還是點(diǎn)擊確認(rèn)按鈕保存同步？
3. 樹結(jié)構(gòu)下的排序如何設(shè)計(jì)？

一、操作功能入口放在哪里？

最開始想到的就是放在章節(jié)單元后，增加更多 icon，用戶點(diǎn)擊更多進(jìn)行章節(jié)單元的編輯刪除，拖拽直接調(diào)整排序?？墒沁@種設(shè)計(jì)方式讓章節(jié)看起來復(fù)雜很多，而且老師使用頻率很低，一般只有在學(xué)期剛開始，備課時(shí)設(shè)置，后期幾乎不再會(huì)進(jìn)行調(diào)整。

為了降低頁(yè)面復(fù)雜度，我把編輯排序放在統(tǒng)一入口，點(diǎn)擊后，再進(jìn)行操作。我給這個(gè)入口命名為管理。點(diǎn)擊管理，進(jìn)入到管理模式，調(diào)整章節(jié)、單元的名稱和層級(jí)結(jié)構(gòu)。

二、是實(shí)時(shí)保存同步，還是點(diǎn)擊確認(rèn)按鈕保存同步？

1. 實(shí)時(shí)保存

實(shí)時(shí)保存就是用戶的每一步操作都會(huì)立即生效。比如一些標(biāo)題的編輯，鼠標(biāo)hover上去會(huì)展示輸入框，光標(biāo)消失即保存成功?；蛘咧蹙庉嬑恼聲r(shí)，也會(huì)告訴你保存中。

實(shí)時(shí)保存相較于確認(rèn)保存少一步操作路徑，每一步操作立即生效同步更新，相對(duì)來說效率較高。由于人們總是會(huì)忘記收尾工作，實(shí)時(shí)保存也避免了讓用戶承擔(dān)忘記點(diǎn)擊確認(rèn)按鈕而使數(shù)據(jù)丟失的風(fēng)險(xiǎn)。

實(shí)時(shí)保存也有缺點(diǎn)，比如當(dāng)用戶想要反悔撤銷的話，就會(huì)比較困難。一般會(huì)根據(jù)具體需求搭配撤銷按鈕、歷史版本等方式，給用戶一個(gè)反悔撤銷的機(jī)會(huì)。

2. 確認(rèn)按鈕保存

用戶進(jìn)行的一系列操作，都不會(huì)立即生效，而需點(diǎn)擊確認(rèn)（保存等）按鈕后，所有操作才會(huì)生效。比如飛書管理后臺(tái)對(duì)于會(huì)議室預(yù)約規(guī)則的設(shè)置。默認(rèn)是查看模式，修改字段進(jìn)入編輯模式，展示取消、保存按鈕，點(diǎn)擊保存更新修改，取消則回到編輯前的狀態(tài)。

這種方式的好處是，減少用戶修改過程的心理壓力。用戶在修改過程中可以隨意調(diào)整，內(nèi)容不會(huì)被同步，修改好后點(diǎn)擊確認(rèn)按鈕統(tǒng)一保存，內(nèi)容同步。

為什么用戶在編輯時(shí)會(huì)有心理壓力？重點(diǎn)就在于同步給誰(shuí)，以及同步的內(nèi)容是什么。

3. 用戶

內(nèi)容修改后只同步給自己。

例如微信標(biāo)簽管理，進(jìn)入管理模式后，對(duì)于標(biāo)簽的排序，刪除都實(shí)時(shí)保存更新，沒有確認(rèn)按鈕。標(biāo)簽修改后的結(jié)果只會(huì)同步給自己，而自己在管理標(biāo)簽的過程已經(jīng)知道了修改結(jié)果，如果增加確認(rèn)按鈕倒顯得較為繁瑣。

內(nèi)容修改后會(huì)同步給其他用戶。

例如飛書管理后臺(tái)對(duì)于會(huì)議室預(yù)約規(guī)則的設(shè)置，設(shè)置結(jié)果會(huì)影響其他用戶預(yù)約會(huì)議室，比如能不能約、幾點(diǎn)能約，所以同步設(shè)置結(jié)果就必須要謹(jǐn)慎一些。而多一步確認(rèn)（保存）按鈕可以幫用戶再次確認(rèn)自己的操作行為，讓同步結(jié)果更謹(jǐn)慎。

以上可以總結(jié)為，如果內(nèi)容修改后只同步給自己，則實(shí)時(shí)保持更便捷。如果內(nèi)容修改后會(huì)同步給其他用戶，則需考慮增加確認(rèn)按鈕讓操作行為更謹(jǐn)慎。具體還需考慮內(nèi)容本身。

4. 內(nèi)容

如果內(nèi)容對(duì)其他用戶影響不大，也可以使用實(shí)時(shí)更新。

比如飛書管理后臺(tái)對(duì)于會(huì)議室名稱的修改，修改后，光標(biāo)移開即保存成功。會(huì)議室名稱對(duì)于用戶來說只有信息的傳遞，沒有功能上的制約，甚至也不影響用戶行為目標(biāo)?？梢运伎枷拢?dāng)用戶想約會(huì)議室時(shí)，什么會(huì)影響用戶決策？比如位置-用戶會(huì)考慮距離是否合適、或者狀態(tài)-是否當(dāng)前被占用等，但會(huì)議室名稱幾乎不會(huì)影響用戶預(yù)約決策。所以內(nèi)容對(duì)用戶影響較小，使用實(shí)時(shí)更新。

編輯者對(duì)于內(nèi)容的重視程度。

比如知乎內(nèi)容發(fā)布后，二次編輯，需點(diǎn)擊保存更新才會(huì)同步給其他人。創(chuàng)作者寫文章耗費(fèi)了自己的時(shí)間成本，好的內(nèi)容可以幫創(chuàng)作者帶來流量和價(jià)值感，所以創(chuàng)作者會(huì)更重視文章內(nèi)容的完整性。而實(shí)時(shí)同步編輯過程所展示的內(nèi)容是不完整的，會(huì)影響讀者閱讀內(nèi)容的感受。所以點(diǎn)擊保存更新，統(tǒng)一同步內(nèi)容可以避免這些問題的發(fā)生。

三、我的方案

回到自己的產(chǎn)品上，老師對(duì)于章節(jié)的管理操作會(huì)同步給學(xué)生，調(diào)整結(jié)果會(huì)影響學(xué)生查看章節(jié)結(jié)構(gòu)。作為學(xué)生，主要任務(wù)是完成章節(jié)或者單元下的學(xué)習(xí)活動(dòng)。所以調(diào)整的內(nèi)容并不影響學(xué)生完成學(xué)習(xí)任務(wù)，按照我們所總結(jié)的規(guī)則，內(nèi)容對(duì)于同步者影響不大，可以使用實(shí)時(shí)更新。

再來看編輯者對(duì)于內(nèi)容的重視程度。老師會(huì)在學(xué)期前開始備課，管理層級(jí)結(jié)構(gòu)屬于備課環(huán)節(jié)，教學(xué)內(nèi)容一般都是固定的，所以后期調(diào)整層級(jí)結(jié)構(gòu)的頻率很低。操作行為低頻且優(yōu)先級(jí)不高，內(nèi)容固定，對(duì)于老師來說，重視程度一般。所以也可采用實(shí)時(shí)更新。

由于老師編輯章節(jié)或單元已有保存按鈕，如果管理模式還存在保存操作的話，對(duì)于編輯功能來說需 2 次保存才算是真的保存，理解成本過高。選擇實(shí)時(shí)保存方式更合適。

根據(jù)以上 3 點(diǎn)，我的方案選擇實(shí)時(shí)保存，實(shí)時(shí)更新。

最后

以上是我對(duì)于工作內(nèi)容中關(guān)于管理模式的復(fù)盤思考，最終設(shè)計(jì)方案的產(chǎn)出還是需要結(jié)合自己產(chǎn)品的業(yè)務(wù)，在體驗(yàn)和功能的權(quán)衡之下做出最合理的設(shè)計(jì)。

關(guān)于第三部分排序放在下次在寫….

編輯導(dǎo)語(yǔ)：在做UI設(shè)計(jì)時(shí)，定義并統(tǒng)一顏色規(guī)范對(duì)產(chǎn)品設(shè)計(jì)和團(tuán)隊(duì)整體推進(jìn)具有重要作用，本篇文章通過一個(gè)國(guó)外大廠真實(shí)的顏色組件升級(jí)案例為我們分享了統(tǒng)一顏色規(guī)范的好方法，一起來看。

Hi，我是彩云。咱們平時(shí)在做UI組件庫(kù)的時(shí)候，會(huì)遇到一個(gè)問題，定義了很多顏色但在團(tuán)隊(duì)合作的時(shí)候，卻依然還是會(huì)根據(jù)每個(gè)設(shè)計(jì)師自己的喜好來配色，很難將顏色規(guī)范很好的統(tǒng)一起來。這其中有一個(gè)很嚴(yán)重的問題就是對(duì)于顏色的命名和管理不夠清晰，那么今天這篇文章通過一個(gè)國(guó)外大廠真實(shí)的顏色組件升級(jí)案例，希望能幫你解決這個(gè)難題。

我們花了幾個(gè)月的時(shí)間改進(jìn)了設(shè)計(jì)系統(tǒng) Cobalt 中顏色的處理方式。顏色是 UI 的基本元素：它們構(gòu)成視覺語(yǔ)言，幫助定義品牌，并被開發(fā)和設(shè)計(jì)師每天用在產(chǎn)品設(shè)計(jì)中。

但如果我們?cè)谑褂妙伾蠜]有明確的指導(dǎo)原則，如顏色被團(tuán)隊(duì)中的設(shè)計(jì)師按喜好使用時(shí)，將會(huì)導(dǎo)致產(chǎn)品看起來非?；靵y。

我們APP中的不一致例子

接下來我會(huì)告訴你，我們是如何做好顏色規(guī)范以及在整個(gè)項(xiàng)目中面臨的挑戰(zhàn)，正如你將看到的，這個(gè)項(xiàng)目并不像看上去那么簡(jiǎn)單：

如何通過 Getaround 在設(shè)計(jì)和技術(shù)方面管理顏色概述這個(gè)系統(tǒng)的局限性，并說明我們?nèi)绾胃倪M(jìn)它什么是語(yǔ)義顏色我們是如何實(shí)現(xiàn)它的，以及它帶來的優(yōu)勢(shì)！

一、我們之前在Getaround中如何管理顏色？

1. 在設(shè)計(jì)方面

和許多設(shè)計(jì)團(tuán)隊(duì)一樣，我們使用 Figma 作為我們的主要設(shè)計(jì)工具。我們的顏色被放在“基礎(chǔ)”庫(kù)中，可以在其中找到我們?cè)诋a(chǎn)品中使用的所有常見樣式，例如字體樣式、顏色、圖標(biāo)等。這個(gè)庫(kù)提供了我們每天使用的專用系統(tǒng)庫(kù)（iOS、Android、Web、電子郵件）。顏色名稱過去是基于它們的外觀。例如：紫色顏色是我們的主要顏色，而石墨色是基本文本的常規(guī)顏色。

2. 在技術(shù)方面

在我們的APP中，曾經(jīng)會(huì)用相同的系統(tǒng)來管理顏色。此外，還有一些語(yǔ)義顏色，但僅限于 iOS，開發(fā)用的也不多。

二、我們?cè)谂f系統(tǒng)中面臨的限制

在使用這個(gè)系統(tǒng)時(shí)，團(tuán)隊(duì)反復(fù)面臨同樣的問題：如何確保從一位設(shè)計(jì)師到另一位設(shè)計(jì)師以相同的方式使用顏色？如果沒有適當(dāng)?shù)闹笇?dǎo)原則，我們?nèi)绾未_保開發(fā)很好的還原？如果明天我們必須用全新的配色方案來改造我們的品牌，要怎么快速統(tǒng)一？讓我們?cè)囍页鑫覀兪侨绾蜗萑脒@種境地的？

1. 沒有明確的顏色使用規(guī)范

所有設(shè)計(jì)師都使用相同的色板，但自 2019 年 Getaround 品牌重塑以來，除了引入不一致之外，沒有明確關(guān)于如何使用它們的規(guī)范，所以設(shè)計(jì)師在選擇顏色時(shí)迷失了方向。然后他們將開始建立自己的參考資料，每個(gè)設(shè)計(jì)師都有不同的配色想法。

例如：設(shè)計(jì)師應(yīng)該在所有這些灰色陰影中為次級(jí)文本選擇哪種灰色？顏色命名在這里不是很有幫助

2. 舊品牌的設(shè)計(jì)包袱

以前品牌的一些舊顏色仍在使用（按鈕上的藍(lán)色陰影，標(biāo)題……）。到現(xiàn)在也沒有真正的行動(dòng)計(jì)劃來迭代它們。

舊驅(qū)動(dòng)器品牌

三、我們對(duì)新系統(tǒng)的設(shè)想

在 2021 年初，我們有機(jī)會(huì)為我們的 iOS 和 Android APP來制定長(zhǎng)期的 UI 規(guī)劃。我們問自己“5年后我們的APP會(huì)是什么樣的？”。我們會(huì)回顧， Getaround 品牌是如何成為我們視覺方法中心的。

以上是我們品牌和設(shè)計(jì)團(tuán)隊(duì)在 2020 年完成的全面工作的一小部分致力于設(shè)計(jì)系統(tǒng)的 Cobalt 團(tuán)隊(duì)借此機(jī)會(huì)重新考慮了顏色系統(tǒng)。然而，為了使這一目標(biāo)成為現(xiàn)實(shí)，我們面臨著一些挑戰(zhàn)：

1. 制定指導(dǎo)原則

我們?nèi)绾未_保每個(gè)設(shè)計(jì)師都可以依賴易于理解和使用色彩系統(tǒng)？擁有一個(gè)簡(jiǎn)單系統(tǒng)將加快使用速度。

2. 顏色能通過可用性標(biāo)準(zhǔn)

我們?nèi)绾未_保從一開始就設(shè)計(jì)出易于使用的顏色？

3. 易于維護(hù)并符合未來趨勢(shì)

我們?nèi)绾尾拍苁瓜到y(tǒng)易于維護(hù)并符合現(xiàn)在和未來的行業(yè)標(biāo)準(zhǔn)（例如：暗模式）

四、我們新的顏色系統(tǒng)：語(yǔ)義顏色

在我們的探索階段，在 Figma 的共享環(huán)境中工作促使我們保存和記錄我們所做的設(shè)計(jì)決策。就像我們應(yīng)該如何命名我們的強(qiáng)調(diào)色：（主要？強(qiáng)調(diào)？）我們還測(cè)試了APP界面在黑暗模式下的外觀，以及如何正確支持這一點(diǎn)。我們應(yīng)該創(chuàng)建一個(gè)單獨(dú)的調(diào)色板還是為每個(gè)組件都創(chuàng)建一個(gè)深色版本？

我們開始與開發(fā)討論這個(gè)問題，以了解他們有什么解決方案來處理這些問題。語(yǔ)義顏色的概念很快就被開發(fā)人員提出來，因?yàn)樗麄冎啦⑶液芎玫厥褂昧诉@個(gè)概念。但對(duì)于設(shè)計(jì)師來說，又要如何準(zhǔn)確理解呢？

1. 什么是語(yǔ)義顏色？

語(yǔ)義指的是根據(jù)顏色的使用方式而不是色調(diào)來命名顏色的方法。

例如，你可以將顏色命名為“成功”或“積極”，因?yàn)樗傅氖呛x，而不是“綠色”或“翡翠綠”。甚至可以根據(jù)顏色在屏幕上的應(yīng)用方式來命名顏色，例如背景顏色、按鈕背景顏色、文本顏色、圖標(biāo)顏色等……

2. 從基于外觀的配色方案到基于語(yǔ)義的配色方案

語(yǔ)義顏色并不新鮮，越來越多的產(chǎn)品開始采用這種方式來定義顏色。我們可以從下面一些大廠的顏色規(guī)范來學(xué)習(xí)google

• https://material.io/design/color/the-color-system.html#color-theme-creationApple
• https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/colorShopify
• https://polaris.shopify.com/design/colors#navigationAsana
• https://polaris.shopify.com/design/colors#navigation

顯然，這種顏色系統(tǒng)有很多優(yōu)點(diǎn)。因此，現(xiàn)在讓我解釋一下我們?nèi)绾卧趯?shí)踐中將這個(gè)概念應(yīng)用到我們的產(chǎn)品中。

3. 深入研究語(yǔ)義顏色

我們的新顏色系統(tǒng)由兩部分組成：

• 基礎(chǔ)色板
• 語(yǔ)義顏色

基礎(chǔ)調(diào)

我們與品牌團(tuán)隊(duì)密切合作，他們定義了一個(gè)全新的品牌，我們?cè)诠ぷ鲿r(shí)會(huì)圍繞這個(gè)品牌考慮。該品牌的每種顏色都采用多種色調(diào)進(jìn)行調(diào)整，以創(chuàng)造更大的靈活性，一次構(gòu)建成為基礎(chǔ)調(diào)色板。它代表可以在產(chǎn)品中顯示的所有可能顏色。團(tuán)隊(duì)可能不會(huì)全部使用它們，但他們會(huì)選擇在產(chǎn)品中效果最好的那些。

基礎(chǔ)調(diào)色板

4. 語(yǔ)義顏色

語(yǔ)義顏色建立在用作參考的基礎(chǔ)調(diào)色板之上。正如我之前解釋的，命名不再是指顏色的“外觀”（洋紅色、棕色、綠色……），而是指UI 元素它們被應(yīng)用于（文本、圖標(biāo)、按鈕、背景……）以及該元素的狀態(tài)（活動(dòng)、非活動(dòng)、成功……）。請(qǐng)參閱此處的命名法和一些示例：

語(yǔ)義顏色結(jié)構(gòu)和示例這意味著來自基礎(chǔ)調(diào)色板的顏色可以用于多種語(yǔ)義顏色：

這就是我們根據(jù)這個(gè)新原則重新調(diào)整顏色命名的方式：

我們通過設(shè)計(jì)師和開發(fā)進(jìn)行了內(nèi)部用戶測(cè)試，以確定命名語(yǔ)義顏色的最佳方式。我們嘗試了很多不同的命名方法，發(fā)現(xiàn)過于詳細(xì)的命名系統(tǒng)對(duì)于我們的團(tuán)隊(duì)和產(chǎn)品的規(guī)模來說維護(hù)和使用太復(fù)雜了。我們決定做一些簡(jiǎn)單的維護(hù)，同時(shí)在命名方面有足夠的延展性。

五、語(yǔ)義顏色的好處

1. 語(yǔ)義色彩嵌入設(shè)計(jì)原則

語(yǔ)義顏色側(cè)重于顏色的用途。它消除了設(shè)計(jì)師和開發(fā)對(duì)使用什么顏色的盲目猜測(cè)，因?yàn)橐曈X語(yǔ)言直接傳達(dá)了設(shè)計(jì)決策。

例如：在這里，顏色命名使設(shè)計(jì)師更容易做出正確的選擇。在我們的原則中， *Accent* state 用于交互元素。

2. 解鎖黑暗模式

語(yǔ)義顏色可以適應(yīng)不同的主題。語(yǔ)義顏色的名稱始終相同，但它的外觀可能會(huì)根據(jù)所選模式而改變。例如，語(yǔ)義顏色“主背景”可以指淺模式下的“白色”和深色模式下的“黑色 500”。根據(jù)用戶選擇的模式，將自動(dòng)顯示正確的顏色。這對(duì)我們的設(shè)計(jì)系統(tǒng)來說是一個(gè)真正的游戲規(guī)則改變者，因?yàn)樗鼘⑹顾用嫦蛭磥怼?/p>

明暗模式下的語(yǔ)義顏色 Primary.Background

3. 語(yǔ)義顏色高效靈活

如果我們將來要更新顏色，使用語(yǔ)義顏色也會(huì)變得更容易。假設(shè)我們想要將我們的主色更改為藍(lán)色。我們只需要將基礎(chǔ)調(diào)色板中的“紫色”更新為“藍(lán)色”。與該顏色相關(guān)的所有語(yǔ)義顏色也將神奇地更新。另一種情況可能是更新特定 UI 元素的顏色，例如按鈕，而無需觸摸使用紫色顏色的其他元素。

在這種情況下，我們只需要更新 ButtonBackground.Primary 顏色，非常簡(jiǎn)單。如果沒有該系統(tǒng)，更新顏色將需要經(jīng)過大量 QA 以確保將更改應(yīng)用到任何地方。

4. 顏色組合指南

這個(gè)系統(tǒng)似乎很容易使用，但設(shè)計(jì)師仍然有一些問題：

• 我什么時(shí)候可以使用正常文字顏色？
• 我什么時(shí)候可以使用次級(jí)文本顏色？
• 我什么時(shí)候可以使用可交互顏色？

為了幫助設(shè)計(jì)師選擇顏色，我們創(chuàng)建了一個(gè)交互式指南，列出了所有可能的顏色組合。我們?cè)?figma 原型中創(chuàng)建了這個(gè)指導(dǎo)原則，每次更改設(shè)計(jì)系統(tǒng)顏色時(shí)都會(huì)更新該規(guī)范。它突出了允許的語(yǔ)義顏色組合，以最大限度地保持一致性。

點(diǎn)擊可以查看大圖Figma 中內(nèi)置的語(yǔ)義色彩交互指南

5. 結(jié)果

采用這種新的顏色系統(tǒng)產(chǎn)生了一些變化：

1）我們從“Foundation”庫(kù)中提取顏色，并將它們分為深色和淺色模式。這一舉措使我們能夠使用 Figma 開關(guān)功能輕松地將設(shè)計(jì)文件從? Light 切換到 ? Dark 模式。這也使庫(kù)更輕且更易于維護(hù)。

2）語(yǔ)義顏色已在我們的 iOS 和 Android 應(yīng)用程序上成功實(shí)現(xiàn)，我們現(xiàn)在正在努力在我們網(wǎng)絡(luò)平臺(tái)上使用相同的系統(tǒng)。我們很快就會(huì)有一個(gè)集中的配色方案來處理所有系統(tǒng)上的顏色。

總結(jié)

總結(jié)下今天學(xué)到的內(nèi)容：

1. 發(fā)現(xiàn)并準(zhǔn)確描述團(tuán)隊(duì)在使用顏色時(shí)遇到的問題
2. 如何從提出設(shè)想，到以新的方式來定義顏色
3. 如何通過語(yǔ)義化顏色來使得大家更方便的使用顏色，我們也可以在自己的組件庫(kù)中多使用語(yǔ)義化的顏色來進(jìn)行命名管理，這樣團(tuán)隊(duì)協(xié)作才會(huì)更加高效。

（授權(quán)截圖）

作者：Fabien Gavinet，譯者：彩云Sky

原文鏈接：https://medium.com/getaround-eu/colors-that-make-sense-505d0f3509c1

本文由 @彩云Sky 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

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

蘭亭妙微(www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

編輯導(dǎo)語(yǔ)：各大APP的圖標(biāo)都各有特點(diǎn)，圖標(biāo)的設(shè)計(jì)也是一門學(xué)問。在這篇文章中，作者全面解析了各類APP圖標(biāo)設(shè)計(jì)背后的用意，一起學(xué)習(xí)一下吧。

如果說一個(gè)人的臉面、衣著打扮是給陌生人的第一印象，那么APP的應(yīng)用圖標(biāo)風(fēng)格與氣質(zhì)就是留給新用戶的第一印象，關(guān)系著用戶是否對(duì)這個(gè)APP感興趣、是否會(huì)打開應(yīng)用介紹、是否會(huì)點(diǎn)擊下載按鈕起著決定性的作用。

一個(gè)好的應(yīng)用圖標(biāo)有著無限可能，無形中對(duì)用戶產(chǎn)生強(qiáng)大的吸引力，并有一種想要了解的沖動(dòng)，況且圖形本身就能讓人充分發(fā)揮想象力，這就是為什么不管在哪個(gè)應(yīng)用市場(chǎng)第一眼看到的是應(yīng)用圖標(biāo)，而非應(yīng)用名稱。

在一部手機(jī)就能解決很多問題的互聯(lián)網(wǎng)時(shí)代，相信每個(gè)人都有下載幾十上百個(gè)APP，琳瑯滿目的列表，應(yīng)用圖標(biāo)是否能在第一時(shí)間抓住用戶眼球（目標(biāo)明確或鐵粉除外）非常重要，一個(gè)視覺傳達(dá)清晰且有吸引力的圖標(biāo)能提升用戶點(diǎn)擊率，即便用戶只使用過一次，相對(duì)來說，印象也會(huì)更深刻。

本文根據(jù)筆者對(duì)大量應(yīng)用圖標(biāo)的分析、結(jié)合設(shè)計(jì)準(zhǔn)則進(jìn)行總結(jié)，希望能幫助大家在設(shè)計(jì)過程中規(guī)避掉一些常見的問題，歡迎一起探討、取長(zhǎng)補(bǔ)短、共同進(jìn)步。

分享目錄

1. 四大設(shè)計(jì)原則
2. 色彩的表現(xiàn)形式
3. 主體圖形分類
4. 背景圖案及元素
5. 主體圖形的表現(xiàn)手法
6. 應(yīng)用圖標(biāo)設(shè)計(jì)流程
7. 總結(jié)

一、四大設(shè)計(jì)原則

應(yīng)用圖標(biāo)代表產(chǎn)品的外在形象，設(shè)計(jì)的精美與否決定著用戶的第一印象，是否產(chǎn)生打開的欲望跟當(dāng)前圖標(biāo)的視覺所傳達(dá)的內(nèi)涵有最直接的關(guān)系。應(yīng)用圖標(biāo)雖然不同于設(shè)計(jì)LOGO，表現(xiàn)方式也千變?nèi)f化，但必定有自身的設(shè)計(jì)準(zhǔn)則要去遵守，利用設(shè)計(jì)的手段將視覺傳播的價(jià)值最大化。

1. 可識(shí)別性

首先，應(yīng)用圖標(biāo)需要盡量簡(jiǎn)約。過于復(fù)雜的圖標(biāo)會(huì)增加用戶的理解成本、甚至誤導(dǎo)用戶，但如果過于追求簡(jiǎn)約，缺乏細(xì)節(jié)、個(gè)性化以及必要的隱喻信息，也會(huì)因過于單調(diào)，造成表意不明確等問題。

簡(jiǎn)約并非簡(jiǎn)單，設(shè)計(jì)師需要通過專業(yè)的知識(shí)進(jìn)行合理的簡(jiǎn)化，以提升應(yīng)用圖標(biāo)的設(shè)計(jì)品質(zhì)，方便用戶在不同場(chǎng)景中都能清晰的辨認(rèn)。其次，需表意明確、易于理解。

應(yīng)用圖標(biāo)代表的是產(chǎn)品的行業(yè)屬性、功能作用或與眾不同的優(yōu)勢(shì)，要讓用戶第一眼就能識(shí)別出所代表的含義，貼近用戶的心理預(yù)期。

簡(jiǎn)約易識(shí)別是應(yīng)用圖標(biāo)必備的基礎(chǔ)屬性之一，這也是為什么大部分產(chǎn)品都將logo作為應(yīng)用圖標(biāo)主視覺的原因，因?yàn)閘ogo設(shè)計(jì)考慮到了方方面面以及后續(xù)延展的問題，即便有些logo較為復(fù)雜，也會(huì)通過提取局部元素、吉祥物、主體色等方式來強(qiáng)化應(yīng)用圖標(biāo)屬性，給用戶形成獨(dú)特的記憶，以提升應(yīng)用的下載量和使用率。

2. 關(guān)聯(lián)性

應(yīng)用圖標(biāo)應(yīng)該與產(chǎn)品的屬性、品牌有極強(qiáng)的關(guān)聯(lián)性，通過品牌延展賦予產(chǎn)品更強(qiáng)的生命力，讓用戶從接觸應(yīng)用圖標(biāo)的第一眼開始、再到后面的使用，整個(gè)過程始終都能保持清晰且統(tǒng)一的品牌認(rèn)知，通過和諧統(tǒng)一的視覺效果，帶來更好的用戶體驗(yàn)。

應(yīng)用圖標(biāo)需要與品牌之間必須保持高度的一致，著重從以下幾點(diǎn)體現(xiàn)：

1）LOGO

毫無疑問，用品牌logo作為主體圖形是最佳選擇，結(jié)合品牌色搭配使用，能將產(chǎn)品核心理念、品牌形象的傳播效果達(dá)到極致，在APP應(yīng)用市場(chǎng)中，大家會(huì)發(fā)現(xiàn)大多數(shù)產(chǎn)品都在使用logo作為應(yīng)用圖標(biāo)的主視覺圖形。

2）品牌色

品牌色即主體色，將貫穿APP所有頁(yè)面的元素組件。眾所周知，每種顏色都有其特定的含義，能傳遞給用戶不同的心理感受。用主體色作為應(yīng)用圖標(biāo)的背景色，可以烘托出產(chǎn)品的情感氛圍，并與進(jìn)入應(yīng)用后的主體色遙相呼應(yīng)，以最小的視覺跳躍性將前后關(guān)聯(lián)，強(qiáng)化用戶對(duì)產(chǎn)品的記憶感知。

3）IP/吉祥物

吉祥物屬于品牌logo延展的一部分， 也是產(chǎn)品的靈魂。當(dāng)logo較為復(fù)雜時(shí)，因移動(dòng)設(shè)備應(yīng)用圖標(biāo)位置空間有限，logo細(xì)節(jié)無法在短時(shí)間被用戶捕捉，不宜展示時(shí)，使用IP/吉祥物或其局部元素代替也是不錯(cuò)的選擇。

4）產(chǎn)品名稱

如果說logo是產(chǎn)品的臉面，通過暗示和隱喻給用戶無限遐想并讓用戶記住它的樣子，那么名稱的出現(xiàn)就相當(dāng)于產(chǎn)品主動(dòng)進(jìn)行了自我介紹，并讓用戶知道如何稱呼它。

將產(chǎn)品名稱作為應(yīng)用圖標(biāo)需謹(jǐn)慎使用：首先，文字傳達(dá)的信息量有限：其次，用戶對(duì)于圖形的理解效率要優(yōu)于文字；再者，應(yīng)用圖標(biāo)都會(huì)有對(duì)應(yīng)的產(chǎn)品名稱展示（應(yīng)用市場(chǎng)在右、桌面在下方），多少有些信息重復(fù)。

所以大家見到的應(yīng)用圖標(biāo)主體是產(chǎn)品名稱的不外乎兩種情況，一種是產(chǎn)品本身將名稱設(shè)計(jì)成字體logo，例如美團(tuán)、懶飯；另一種是將產(chǎn)品名稱作為logo的輔助信息提示，例如繽紛生活。

以上是應(yīng)用圖標(biāo)與品牌屬性關(guān)聯(lián)最常見的四種方式，在設(shè)計(jì)中可靈活搭配，使用兩種及以上的方式組合，能將品牌傳播的途徑發(fā)揮到最大值。

3. 差異化

筆者上小學(xué)時(shí)，曾經(jīng)在一次彩鉛繪畫作業(yè)中得到了老師的真心夸贊，但內(nèi)心卻備受打擊。老師對(duì)著我畫的桃子說“這西紅柿畫的太像了”。

舉這個(gè)例子似乎并不恰當(dāng)，但結(jié)果是驚人的相似，筆者想要陳述的一個(gè)觀點(diǎn)是，不要讓你辛苦做出的設(shè)計(jì)成為別人的嫁衣，讓用戶誤以為這是其他企業(yè)的“某某某…”產(chǎn)品。

目前，應(yīng)用市場(chǎng)中的APP數(shù)量巨大，且還處于增長(zhǎng)的趨勢(shì)，同行業(yè)的圖標(biāo)設(shè)計(jì)同質(zhì)化相當(dāng)嚴(yán)重。想要讓自身產(chǎn)品應(yīng)用圖標(biāo)脫穎而出，就有必要在設(shè)計(jì)之前做好競(jìng)品分析，借鑒競(jìng)品的優(yōu)點(diǎn)，在突出自身產(chǎn)品核心特征、屬性的基礎(chǔ)上，還要用不同的表現(xiàn)手法突出其差異性，給用戶留下獨(dú)特的印象，避免同質(zhì)化。

4. 可用性

應(yīng)用圖標(biāo)在設(shè)計(jì)完成之后（測(cè)試小組）、上線后（用戶反饋）進(jìn)行可用性測(cè)試，主要針對(duì)圖標(biāo)對(duì)用戶的吸引力、識(shí)別度等問題作進(jìn)一步優(yōu)化，以確保圖標(biāo)在不同場(chǎng)景中都能被用戶清晰識(shí)別并提升印象。

雖然可用性測(cè)試存在設(shè)計(jì)之后，但這一環(huán)節(jié)至關(guān)重要，它決定著產(chǎn)品的下載量以及使用率。

二、圖標(biāo)顏色的表現(xiàn)形式

1. 單色圖標(biāo)

單色圖標(biāo)通常以品牌色作為背景色、logo以反白的形式呈現(xiàn)，既能突出品牌色、還能用于烘托主體圖形，不過這種方式僅適合色值單一的logo，多色值可能會(huì)與背景色產(chǎn)生融合或色彩反差太大影響視覺傳達(dá)效果。另外，如果logo視覺重量較大，也可使用白色背景+原品牌色logo，這樣會(huì)更直觀。

單色應(yīng)用圖標(biāo)雖然色彩比較單一、表現(xiàn)形式也受到局限，但視覺清晰、簡(jiǎn)潔且識(shí)別性強(qiáng)，如果能運(yùn)用其他設(shè)計(jì)手法豐富圖標(biāo)細(xì)節(jié)就再好不過了。

2. 多色圖標(biāo)

多色圖標(biāo)使用了兩種及以上的顏色，更多是直接使原多色彩的logo圖形+白色背景，無需任何加工，控制好尺寸規(guī)范就行。如果是運(yùn)營(yíng)推廣所需，如春節(jié)、618、雙11等活動(dòng)，會(huì)對(duì)應(yīng)用圖標(biāo)加以其他色彩烘托、點(diǎn)綴元素或標(biāo)簽等，色彩就會(huì)更多，但一般都具有時(shí)效性，活動(dòng)過期即圖標(biāo)復(fù)原。

多色圖標(biāo)的細(xì)節(jié)、層次更加豐富，設(shè)計(jì)時(shí)確保各色彩搭配協(xié)調(diào)，一旦因色彩過多造成視覺混亂，就得不償失了。

3. 漸變圖標(biāo)

無論是單色還是多色，添加漸變會(huì)讓應(yīng)用圖標(biāo)更加細(xì)膩、耐看。漸變的表現(xiàn)手法應(yīng)用廣泛，簡(jiǎn)單的漸變能讓圖標(biāo)細(xì)節(jié)豐富，同時(shí)也具備空間感和微立體感。

設(shè)計(jì)漸變色圖標(biāo)需注意圖形銜接處的對(duì)比度，花里胡哨的漸變色會(huì)拉低品質(zhì)感，要確保色彩的和諧，讓圖標(biāo)視覺清晰且容易識(shí)別。

4. 顏色疊加

單色、多色或是漸變都可通過調(diào)整不透明度、圖層疊加的方式來豐富應(yīng)用圖標(biāo)細(xì)節(jié)，相比純粹的漸變，立體感和空間感更強(qiáng)。使用顏色疊加需注意色彩對(duì)比及明暗關(guān)系，否則會(huì)衍生出臟亂的顏色。

5. 色環(huán)的運(yùn)用

環(huán)形構(gòu)圖為主，由多個(gè)元素復(fù)制并以統(tǒng)一的中心點(diǎn)、旋轉(zhuǎn)角度，旋轉(zhuǎn)衍生出一個(gè)主體圖形。這種應(yīng)用圖標(biāo)的設(shè)計(jì)構(gòu)圖飽滿、色彩豐富，能給用戶傳遞出輕松愉快的視覺體驗(yàn)。

需要注意的是，由于顏色較多，至少在三種顏色及以上，否則無法構(gòu)成色環(huán)類的主體圖形（錯(cuò)覺）。如果沒有超強(qiáng)的配色功底，最好按照色環(huán)的順序依次取色，即便沒有太大的優(yōu)勢(shì)，但至少不會(huì)出錯(cuò)。

三、主體圖形的分類

一個(gè)好的應(yīng)用圖標(biāo)應(yīng)該是多元素、多信息結(jié)合運(yùn)用，才能達(dá)到更好的效果。雖然大部分主體圖形使用了logo，但并不影響設(shè)計(jì)師們對(duì)其進(jìn)行拆解，提取局部元素、色彩、名稱等信息進(jìn)行二次創(chuàng)作，從原則上來說，是一次線上logo的設(shè)計(jì)。

應(yīng)用圖標(biāo)種類繁多，切不可盲目跟風(fēng)，需經(jīng)過認(rèn)真的分析、研究，找到最適合自身產(chǎn)品的才是最重要的，且每種類型并非獨(dú)立，在條件允許的情況下還能跨類型靈活搭配、相互組合。

1. 中文字體

1）單中文字體

僅次于圖形logo的表現(xiàn)方式，通常會(huì)在產(chǎn)品名稱中提取一個(gè)具有代表性的文字對(duì)筆畫、結(jié)構(gòu)等進(jìn)行再設(shè)計(jì)?；趪?guó)人文化的優(yōu)勢(shì)以及對(duì)漢字的敏感度，既能降低用戶對(duì)應(yīng)用圖標(biāo)的認(rèn)知成本、還能根據(jù)產(chǎn)品特性設(shè)計(jì)出差異化的視覺效果。

不過因?yàn)槲淖止P畫的原因，單個(gè)文字提取難度較大，避免信息傳遞有誤或影響識(shí)別度，建議選擇筆畫較少且具有特性/代表性的文字，若達(dá)不到條件，最好選擇其他表現(xiàn)方式。

2）多中文字體

使用兩個(gè)及以上漢字，大多直接將產(chǎn)品名稱用在圖當(dāng)中，對(duì)用戶來說更容易記憶，有利于品牌推廣。相比單字體，設(shè)計(jì)感會(huì)受到一定的局限，不宜做過于夸張的表現(xiàn)方式，因文字較多，設(shè)計(jì)時(shí)一定要注意文字的協(xié)調(diào)與可讀性。

多文字圖標(biāo)建議將字?jǐn)?shù)控制在2~6個(gè)范圍內(nèi)，3字以內(nèi)一行顯示，超過3字即兩行顯示且最多不超過兩行，否則會(huì)影響圖標(biāo)的識(shí)別效果。

3）中文、圖形組合

適當(dāng)添加帶有產(chǎn)品特性的輔助圖形，用引導(dǎo)或指向性的方式對(duì)文字進(jìn)行強(qiáng)調(diào)，圖標(biāo)細(xì)節(jié)會(huì)更豐富，可以突出產(chǎn)品想要傳達(dá)的信息、以及不同的氣質(zhì)，還能增加圖標(biāo)的形式感和趣味性。注意添加的圖形不要過于復(fù)雜，不然會(huì)讓信息混亂，適得其反。

4）中文圖形化

根據(jù)單個(gè)字體筆畫的特點(diǎn)進(jìn)行巧妙的變形或延展，會(huì)讓你的應(yīng)用圖標(biāo)更具設(shè)計(jì)感、品質(zhì)好。這種方式對(duì)設(shè)計(jì)功底的要求較高，需要確保字體的識(shí)別度，切勿霸王硬上弓，如果是為了設(shè)計(jì)而設(shè)計(jì)，就違背的信息傳播的初衷。

5）中文、IP形象組合

由產(chǎn)品名稱和IP形象組合而成，這種方式能通過品牌IP不同的視覺形象帶給用戶情感化的體驗(yàn)，讓產(chǎn)品更具親和力，拉近與用戶之間的關(guān)系。例如，IP的喜、怒、哀、樂表情變化分別對(duì)應(yīng)用戶不同的心理感受，以加深用戶對(duì)產(chǎn)品的印象及品牌認(rèn)知。

2. 英文字體

1）單英文字體

單英文字體通常是提取產(chǎn)品名稱拼音首字母或英文首字母進(jìn)行創(chuàng)意設(shè)計(jì)，跟中文字體相比，基于字母本身線條的簡(jiǎn)潔及流暢性，再結(jié)合產(chǎn)品特點(diǎn)，很容易設(shè)計(jì)出兼具美感、高識(shí)別度的應(yīng)用圖標(biāo)。

需要明確一點(diǎn)，不管如何創(chuàng)意，也僅局限于在26個(gè)英文字母中選擇，如果想設(shè)計(jì)出差異化的應(yīng)用圖標(biāo)，對(duì)設(shè)計(jì)師來說，是一個(gè)很大的挑戰(zhàn)。

2）多英文字體

跟多中文不同，中文產(chǎn)品名稱在移動(dòng)端基本不會(huì)超出6個(gè)字，而全拼音或英文名則多達(dá)十幾位甚至更多，為了用戶能更好容易識(shí)別、記憶，依然是提取不同拼音或單詞的首字母（中文全稱）進(jìn)行設(shè)計(jì)。

多英文的應(yīng)用圖標(biāo)很很容易形成獨(dú)有的產(chǎn)品簡(jiǎn)稱，更利于用戶記憶，但字母一定不要過多，如果無法刪減，那就只突出特定的2~4個(gè)字母。

3）其他類型

字母與圖形、IP形象組合以及字母圖形化，其表現(xiàn)方式、設(shè)計(jì)原則與中文字體圖標(biāo)類似，這里不做過多闡述。

3. 數(shù)字符號(hào)

1）數(shù)字設(shè)計(jì)

人們對(duì)于數(shù)字來說是非常敏感的，不存在文化差異或認(rèn)知誤區(qū)，基于數(shù)字便于記憶且容易識(shí)別的特點(diǎn)，將數(shù)字圖形化后應(yīng)用到圖標(biāo)當(dāng)中，會(huì)讓產(chǎn)品具有親和力，有利于品牌傳播。單純的數(shù)字過于簡(jiǎn)單，需增加一些細(xì)節(jié)，豐富圖標(biāo)層次，讓其具備獨(dú)特的記憶點(diǎn)，不然會(huì)顯得單調(diào)。

2）符號(hào)設(shè)計(jì)

每個(gè)符號(hào)都有特定的含義，因此，在選擇符號(hào)作為應(yīng)用圖標(biāo)之前，首先需要了解清楚該符號(hào)是否能體現(xiàn)出產(chǎn)品屬性以及想要表達(dá)的意思，例如“¥”適合攢錢、理財(cái)相關(guān)的應(yīng)用，而“+-×÷”則適合用于計(jì)算器或數(shù)學(xué)相關(guān)的應(yīng)用；其次，符號(hào)跟數(shù)字一樣，都比較簡(jiǎn)單，需經(jīng)過二次創(chuàng)作后才會(huì)使用。

4. 扁平化圖形

1）線性圖形

線性風(fēng)格的應(yīng)用圖標(biāo)能給人一種簡(jiǎn)潔輕快的感覺，設(shè)計(jì)師通過提取產(chǎn)品的品牌信息、功能服務(wù)等進(jìn)行創(chuàng)意設(shè)計(jì)，將得到的關(guān)鍵詞以一條或多條線段組成高度抽象的圖形來達(dá)到信息傳播的目的。

通常以反白的形式出現(xiàn)，背景可以是單色、漸變色或加以輔助圖形點(diǎn)綴。

線性圖形非常適合文藝類簡(jiǎn)約風(fēng)格的應(yīng)用，通過不同的線條帶給用戶不同的心理感受，例如直線代表大方、專業(yè)、正直；斜線代表張力、速度；曲線代表流暢、飄逸及柔軟等。

設(shè)計(jì)時(shí)，切記圖形不能過于復(fù)雜，否則會(huì)影響其辨識(shí)度，增加用戶的認(rèn)知成本，也不利于品牌推廣。

2）面性圖形

也可稱之為剪影圖形，根據(jù)產(chǎn)品屬性，將日常生活中被大眾所熟知的動(dòng)物、植物、食品、工具、玩具…等事物進(jìn)行簡(jiǎn)化，通過刻畫事物的造型輪廓來形成獨(dú)立的剪影圖形。

高識(shí)別度的剪影圖形會(huì)讓整體看起來非常醒目，提高信息傳播的效率，只要控制好造型，即便把圖標(biāo)縮到很小也能清晰辨認(rèn)。

因現(xiàn)實(shí)世界中事務(wù)的復(fù)雜性，被提煉出的圖形如果細(xì)節(jié)過多會(huì)顯的復(fù)雜且不夠干練、細(xì)節(jié)過少則難以辨認(rèn)，所以需要對(duì)圖形進(jìn)行創(chuàng)意加工，最終以確保應(yīng)用圖標(biāo)的功能和美感兼具。

3）幾何圖形

幾何圖形在應(yīng)用圖標(biāo)中使用的很廣泛，可以是線性或面性，表現(xiàn)形式也非常豐富，利用幾何圖形通過單獨(dú)、組合、布爾運(yùn)算等方式形成簡(jiǎn)單且個(gè)性化的創(chuàng)意圖形，帶給用戶簡(jiǎn)約、現(xiàn)代、空間、熱鬧等不同的心理感受。

幾何圖形構(gòu)圖簡(jiǎn)潔，設(shè)計(jì)形式豐富多樣，想設(shè)計(jì)出具備設(shè)計(jì)感和差異化的應(yīng)用圖標(biāo)，很考驗(yàn)設(shè)計(jì)師的創(chuàng)意能力。

5. 卡通形象

對(duì)純色剪影圖形增加太多細(xì)節(jié)，無疑是將其“大卸八塊”，變成一堆零件，但通過多色、漸變、圖層樣式等表現(xiàn)手法設(shè)計(jì)成卡通形象，就完全不一樣了。

卡通形象能體現(xiàn)出產(chǎn)品的生命力、親和力，以及直觀且易于理解和記憶的特質(zhì)，對(duì)品牌形象的塑造、傳播起到了很好作用。

在畫卡通形象時(shí)，需要注意產(chǎn)品主用戶群體的年齡段，切勿一開始就把活潑可愛作為卡通形象的代名詞，避免絕對(duì)低齡化的表達(dá)，同時(shí)需要設(shè)計(jì)師有一定的繪畫功底。

6. 擬人化

利用人體的局部元素，如眼睛、嘴巴、手足、頭部等，再結(jié)合常見的表情動(dòng)作進(jìn)行圖形化設(shè)計(jì)，相當(dāng)于給原本冷冰冰的圖形賦予了生命力，傳達(dá)出不一樣的情感，而且用戶原本就對(duì)人體元素敏感度更高，更容易打動(dòng)用戶并形成較強(qiáng)的記憶。

擬人化的應(yīng)用圖標(biāo)會(huì)顯得親民，便于拉近與用戶之間的關(guān)系，適度在抽象的圖形上加入情感化（動(dòng)作/表情）表達(dá)，能生動(dòng)、形象的體現(xiàn)出產(chǎn)品獨(dú)有的特性。

如果想要較強(qiáng)的視覺沖擊力，建議元素不要過多，最好是對(duì)某個(gè)單一的元素作放大或特寫處理，讓用戶看到更多的細(xì)節(jié)，也可用夸張、比喻、襯托等表現(xiàn)手法強(qiáng)化特點(diǎn)。

7. 擬物化

擬物化圖標(biāo)使用的比較少，它更偏向于某種行業(yè)類型，例如工具、游戲類型的應(yīng)用，通過超接近于現(xiàn)實(shí)世界中的物體造型，基本不需要用戶思考，一眼就能理解，但也正因?yàn)檫@種特性，信息量的傳播受到很大局限，僅適合單一且大眾化的信息傳達(dá)。

在如今，想同時(shí)融入行業(yè)、屬性、品牌等多元化內(nèi)容的信息化時(shí)代，顯然不太實(shí)用了。

四、背景圖案及元素

1. 圖形背景

應(yīng)用圖標(biāo)背景通常以單色、漸變色居多，除此之外，還可以添加與主體圖形相呼應(yīng)的輔助圖形背景，以豐富圖標(biāo)的視覺層次。圖形背景一定是為襯托或突出主體圖形的輔助存在，切勿過分表達(dá)，以免喧賓奪主。

2. 炫彩背景

當(dāng)主體圖形的結(jié)構(gòu)、色彩不是很復(fù)雜，且產(chǎn)品面對(duì)的是年輕化用戶群體時(shí)，可通過色彩拼接、晶格化或多種鮮明的色彩漸變等方式設(shè)計(jì)出炫彩效果，色彩表現(xiàn)豐富的應(yīng)用圖標(biāo)，能帶給用戶更強(qiáng)的視覺沖擊力。色彩可多但不可亂，需要把控好色彩之間的對(duì)比關(guān)系。

3. 運(yùn)營(yíng)標(biāo)簽

常見于在特定的節(jié)日中，例如618、雙11、雙12及傳統(tǒng)節(jié)日等，產(chǎn)品會(huì)存在促銷、打折活動(dòng)，為了更早的讓用戶知道，會(huì)在應(yīng)用圖標(biāo)的某個(gè)區(qū)域以標(biāo)簽的方式出現(xiàn)，起到引導(dǎo)用戶的作用。

不過這種表現(xiàn)方式具有時(shí)效性，活動(dòng)截止即圖標(biāo)樣式復(fù)原。

4. 節(jié)日氛圍

通過配色或節(jié)日相關(guān)的元素點(diǎn)綴，營(yíng)造出一種感同身受的節(jié)日氛圍。例如：春節(jié)期間，部分應(yīng)用圖標(biāo)背景會(huì)調(diào)整為紅色，并使用燈籠、煙花、文案等元素點(diǎn)綴，制造出普天同慶、與用戶同樂的喜慶感，或者在高考期間鼓勵(lì)學(xué)生，少了套路、多了真誠(chéng)，給用戶留下較深的印象。

五、主體圖形的表現(xiàn)手法

1. 對(duì)比

通過元素的大小、長(zhǎng)短、虛實(shí)、稀疏、方向以及不同的色彩、明暗關(guān)系等方式進(jìn)行對(duì)比，形成強(qiáng)烈的反差效果，同時(shí)兼具張力和美感，這也是應(yīng)用圖標(biāo)設(shè)計(jì)中很常見的技法表現(xiàn)之一。

2. 對(duì)稱

對(duì)稱在自然界中隨處可見，在互聯(lián)網(wǎng)設(shè)計(jì)中也是如此，應(yīng)用圖標(biāo)中的主體圖形以對(duì)稱的方式呈現(xiàn)，能給用戶平衡、和諧的感覺，也讓圖標(biāo)更具有觀賞性。

3. 分割

將應(yīng)用圖標(biāo)中的主體圖形分割，賦予不同的顏色、樣式等，明確層級(jí)劃分，可提升圖標(biāo)的美感。例如：將色塊分割成不同的比例、形狀，就能組合成一個(gè)完整的熊貓圖形（百度搜“熊貓剪影”圖片）。

如果適合使用0.168黃金比例分割就再好不過了，這是被公認(rèn)為最具美感的比例。

4. 重復(fù)

將相同或相近的圖形以某種規(guī)律連續(xù)性的排列，相比單調(diào)的圖形，會(huì)更加飽滿。重復(fù)性的表現(xiàn)手法以大小、色彩、位置、形狀等作為出發(fā)點(diǎn)進(jìn)行有序的排列，最終形成一種規(guī)律、整齊的節(jié)奏和藝術(shù)感。

需要注意的是基礎(chǔ)圖形不能過于復(fù)雜，一定是有規(guī)律的重復(fù)，否則會(huì)讓圖形變的混亂，無法形成整體。

5. 重疊

在保證識(shí)別度清晰的前提下，將兩個(gè)或以上的元素相互重疊、交叉在一起，能形成前后左右的層級(jí)關(guān)系，制造空間感，同時(shí)也能將多個(gè)圖形關(guān)聯(lián)在一起，避免圖標(biāo)元素零散或單調(diào)，讓整體性更強(qiáng)，豐富用戶視覺感知。

6. 正負(fù)形

正負(fù)形也是常見的表現(xiàn)手法之一，利用正圖為底，通過減去底層挖空的方式突出（錯(cuò)覺）負(fù)形，將產(chǎn)品特征、屬性及服務(wù)多途徑的傳達(dá)給用戶，可謂是“一石二鳥”。

正負(fù)形圖標(biāo)能將信息傳播最大化，且設(shè)計(jì)感十足，好的正負(fù)形圖標(biāo)能給用戶形成獨(dú)特的記憶點(diǎn)，但設(shè)計(jì)時(shí)需要注意正、負(fù)銜接的順暢度，否則無法清晰的傳播信息。

六、應(yīng)用圖標(biāo)設(shè)計(jì)流程

1. 發(fā)散思維、尋找隱喻

通過產(chǎn)品屬性、功能或特點(diǎn)進(jìn)行思維發(fā)散，例如：夏天，我們會(huì)想到空調(diào)、海灘、冰淇淋、比基尼、裙子（女性）、夜空等一系列相關(guān)聯(lián)的事和物，搜集起來并做好整理歸類，確定大致的設(shè)計(jì)方向。

2. 分析競(jìng)品、避免同質(zhì)化

確定了大致的設(shè)計(jì)方向，就去找同行業(yè)、同類型或相似的應(yīng)用圖標(biāo)分析其形狀、配色、組合類型等，取長(zhǎng)補(bǔ)短，這也是避免同質(zhì)化非常重要的一個(gè)環(huán)節(jié)，幫助自己在后續(xù)設(shè)計(jì)出具備差異化的應(yīng)用圖標(biāo)做鋪墊。

3. 提取關(guān)鍵詞

可以從產(chǎn)品名稱或功能屬性方面找出產(chǎn)品最想傳達(dá)的核心信息，并提煉出關(guān)鍵詞。切記，關(guān)鍵詞不可脫離帶水、表意不明確，一定要夠精煉、能表達(dá)出核心內(nèi)容。關(guān)鍵詞在精不在多，如果太多，需要通過層層遞進(jìn)，篩選出“一主三輔”，要知道這關(guān)系著后續(xù)應(yīng)用圖標(biāo)傳達(dá)信息的精準(zhǔn)度。

4. 圖標(biāo)繪制

將上一步得到的關(guān)鍵詞轉(zhuǎn)化成抽象圖形，進(jìn)行視覺化提煉，這時(shí)應(yīng)用圖標(biāo)的雛形已經(jīng)形成，再結(jié)合前面所提到的圖形分類、表現(xiàn)手法以及注意事項(xiàng)等，進(jìn)入圖標(biāo)繪制流程。關(guān)于圖標(biāo)設(shè)計(jì)規(guī)范及原則，在之前的《圖標(biāo)篇 | 圖標(biāo)設(shè)計(jì)必備的基礎(chǔ)知識(shí)！》文章中有詳細(xì)說明，這里不做闡述。

5. 細(xì)節(jié)處理

基本圖形繪制完成后，通過添加點(diǎn)綴、輔助圖形、背景處理等方式豐富圖標(biāo)細(xì)節(jié)，進(jìn)行精細(xì)化處理，使其更精致，具備高識(shí)別度及品質(zhì)感。

6. 適用性測(cè)試

分別通過移動(dòng)端應(yīng)用商店列表、應(yīng)用詳情、設(shè)置中應(yīng)用列表、桌面以及WEB商店等，對(duì)不同位置的大小、不同的桌面背景進(jìn)行虛擬測(cè)試，以確保在不同場(chǎng)景中都能被用戶高度識(shí)別，如果這些問題等著被用戶發(fā)現(xiàn)，很可能給產(chǎn)品帶來不利的影響。

7. 輸出切圖

需要對(duì)iOS和Android系統(tǒng)各輸出一套圖標(biāo)，iOS只需一個(gè)1024px的切圖便能適配所有，且無需設(shè)定圓角。Android則需要多套切圖規(guī)范，如512px、198px、144px、96px、72px、48px，圓角半徑以512px為基準(zhǔn)設(shè)定為90px（參考值）。

這些固定的尺寸規(guī)范并不在技術(shù)能力范疇，如果實(shí)在不清楚，需要用時(shí)就“百度一下”一大把，或直接找開發(fā)人員拿尺寸都不是難事。

七、總結(jié)

首先，筆者要感謝耐心看到這里的小伙伴，希望總結(jié)的內(nèi)容能幫到大家，在前期設(shè)計(jì)中作為資料參考，避免出現(xiàn)常見的問題，防止進(jìn)入誤區(qū)。

其次，要想設(shè)計(jì)出優(yōu)秀的應(yīng)用圖標(biāo)僅看上述內(nèi)容是遠(yuǎn)遠(yuǎn)不夠的，少不了平時(shí)的多看、多練、多思考，需日積月累，逐漸提升自己的視覺審美、造型提煉、執(zhí)行效率等多方面設(shè)計(jì)能力。

應(yīng)用圖標(biāo)的總結(jié)分享就到這里了，對(duì)你有幫助的話就給筆者點(diǎn)個(gè)贊吧，如果有不同意見，歡迎在評(píng)論區(qū)交流或指正，以便查漏補(bǔ)缺，共同進(jìn)步。

#專欄作家#

大漠飛鷹；公眾號(hào)：能量眼球，人人都是產(chǎn)品經(jīng)理專欄作家。致力于產(chǎn)品需求的驅(qū)動(dòng)、產(chǎn)品體驗(yàn)的挖掘，利用設(shè)計(jì)的手段為受眾用戶帶來更好的體驗(yàn)，即好看、好用。

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

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

蘭亭妙微(www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

編劇導(dǎo)語(yǔ)：折疊菜單是在頁(yè)面中垂直堆疊的菜單列表，通過展開/折疊來顯示或隱藏更多菜單內(nèi)容。APP中的折疊菜單該如何設(shè)計(jì)呢？本文作者分享了折疊菜單的設(shè)計(jì)解析及設(shè)計(jì)應(yīng)用，一起來看看吧！

大家好，這里是設(shè)計(jì)夾，今天為大家分享的是「折疊菜單」。

折疊菜單(Accordion)，又稱手風(fēng)琴菜單，是在頁(yè)面中垂直堆疊的菜單列表，通過展開/折疊來顯示或隱藏更多菜單內(nèi)容。

接下里通過講解折疊菜單的構(gòu)成、樣式和設(shè)計(jì)解析來更進(jìn)一步了解折疊菜單的運(yùn)用～

一、折疊菜單的構(gòu)成

1. 狀態(tài)

折疊菜單的狀態(tài)包括收起、展開、懸停、選中、禁用狀態(tài)等。

2. 展開圖標(biāo)的位置

在折疊菜單中，通常用“V形”圖標(biāo)表示菜單展開/收起的狀態(tài)。“V形”圖標(biāo)可以在左側(cè)，也可以放在右側(cè)，用來表示狀態(tài)。

除了使用最常見的“V形”圖標(biāo)，還可以用以下圖標(biāo)來代替：上/下填充圖標(biāo)；加號(hào)/減號(hào)；向上/向下箭頭。

3. 附加圖標(biāo)

當(dāng)我們把展開圖標(biāo)放在右側(cè)的情況下，我們可以面板左側(cè)設(shè)計(jì)一些圖標(biāo)，來增強(qiáng)菜單的含義，并讓頁(yè)面看起來更精致。

在某些場(chǎng)景下，還可以通過使用不同的顏色，更加直觀地分隔每個(gè)菜單。

二、折疊菜單的樣式

1. 封閉式折疊菜單

在頁(yè)面設(shè)計(jì)中，大多數(shù)情況下都是使用封閉式折疊面板。

通過一條淺色的的分隔線將不同的菜單分隔開，這種樣式的優(yōu)點(diǎn)是可以節(jié)省一些豎向的屏幕空間，尤其是在移動(dòng)端屏幕尺寸較小的情況下。

2. 分離式折疊菜單

分離式折疊面板常用在桌面端中，每個(gè)菜單的展示更清晰，設(shè)計(jì)樣式更簡(jiǎn)潔。

3. 突出顯示展開菜單

突出顯示菜單展開的狀態(tài)，這樣在多個(gè)折疊菜單打開的情況下，用戶也能清晰找到需要的信息。

常用的突出顯示的方式有：增加陰影、背景填充、輪廓描邊等。

例如在頁(yè)面背景是白色的情況下，我們可以使用透明度很低的灰色作為下拉菜單的背景，更清晰地展示展開的菜單。另外，還可以為下來菜單填充和品牌色一致的顏色描邊，起到強(qiáng)調(diào)品牌的效果。

三、折疊菜單設(shè)計(jì)解析

1. 展示預(yù)覽

通過在主菜單的下面添加已選擇的內(nèi)容，這樣在不需要展開面板的情況下，用戶就能知道選擇了哪些內(nèi)容，進(jìn)一步提高操作效率。

2. 數(shù)字徽標(biāo)

當(dāng)已選內(nèi)容太多時(shí)，我們不可能將這些內(nèi)容全部在主菜單羅列出來，在這樣的情況下，可以使用數(shù)字徽標(biāo)的形式來展示已選擇的菜單數(shù)。這樣的設(shè)計(jì)有點(diǎn)像購(gòu)物車中不斷變化的數(shù)字徽標(biāo)，告訴用戶加購(gòu)的數(shù)量。

3. 提示文案

通過在折疊面板中添加提示文案，起到輔助作用，展示更多和菜單相關(guān)的信息。這種設(shè)計(jì)形式更適合用在移動(dòng)端中，在有限的屏幕尺寸上盡可能多的展示內(nèi)容。

4. 移動(dòng)端應(yīng)用樣式

等寬使用：在移動(dòng)端中使用等寬的折疊菜單，方方便用戶點(diǎn)擊操作。

側(cè)邊欄：將折疊菜單放在側(cè)邊的導(dǎo)航抽屜中，點(diǎn)擊左上角的圖標(biāo)來展開菜單項(xiàng)。

菜單篩選：將側(cè)邊欄與折疊面板配合使用，實(shí)現(xiàn)菜單篩選的功能。

5. 桌面端應(yīng)用樣式

側(cè)邊導(dǎo)航：和移動(dòng)端類似，桌面端最常用的方法是把折疊菜單放到頁(yè)面左側(cè)，作為網(wǎng)頁(yè)的側(cè)邊導(dǎo)航使用。

過濾器：根據(jù)桌面端的頁(yè)面布局結(jié)構(gòu)，折疊菜單可以放在頁(yè)面左側(cè)或右側(cè)，實(shí)現(xiàn)精確查找、內(nèi)容過濾等功能。

四、最后

以上就是折疊菜單的設(shè)計(jì)解析及設(shè)計(jì)應(yīng)用，希望通過這些知識(shí)能幫你進(jìn)一步了解折疊菜單的用法。

「組件系列」的其他文章，近期也會(huì)不斷更新，歡迎大家關(guān)注~

#專欄作家#

作者：Clippp，微信公眾號(hào)：Clip設(shè)計(jì)夾。每周精選設(shè)計(jì)文章，專注分享關(guān)于產(chǎn)品、交互、UI視覺上的設(shè)計(jì)思考。

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

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

蘭亭妙微(www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

編輯導(dǎo)語(yǔ)：B端產(chǎn)品的展現(xiàn)形式包含了很多類型，標(biāo)簽頁(yè)、彈窗、懸浮層等等。本篇文章中作者分享了如何正確的呈現(xiàn)B端產(chǎn)品，讓產(chǎn)品的交互體驗(yàn)更加絲滑。感興趣的小伙伴們快來一起看看吧，希望對(duì)你有所幫助。

在B端產(chǎn)品操作中，需要高頻率地打開各類鏈接和按鈕，如果點(diǎn)擊后需要展示新的內(nèi)容，那么展現(xiàn)形式就包含了很多種類型，標(biāo)簽頁(yè)、新頁(yè)面、懸浮層、彈窗、抽屜等等。

在面對(duì)數(shù)量龐大的B端頁(yè)面、組件、交互場(chǎng)景下，應(yīng)該選擇哪種展示形式就變成了一個(gè)棘手的問題。

本篇分享就將集中在解決如何選擇正確的呈現(xiàn)形式上，讓產(chǎn)品的交互體驗(yàn)更順滑。

一、內(nèi)容的載體形式

網(wǎng)頁(yè)是一種可視化的UI界面，也是一種內(nèi)容載體，它是瀏覽器訪問網(wǎng)站后顯示的主要對(duì)象，也是瀏覽器展示內(nèi)容中層級(jí)最高的單位。

在同一個(gè)網(wǎng)站中，如果我們想要訪問其它網(wǎng)頁(yè)，就需要點(diǎn)擊按鈕或鏈接觸發(fā)，這時(shí)候，打開新網(wǎng)頁(yè)的方式就有兩種，在新窗口/標(biāo)簽中打開（_blank）或者在本窗口/標(biāo)簽中打開（_self）。

不管是哪種，本質(zhì)上都需要瀏覽器重新加載新的頁(yè)面。對(duì)于一般的企業(yè)官網(wǎng)、新聞網(wǎng)站來說，這種加載的模式?jīng)]有太大的問題，因?yàn)椴僮黝l次相對(duì)適中，用戶中間會(huì)有比較長(zhǎng)的時(shí)間停頓下來查看頁(yè)面的內(nèi)容信息。

而B端項(xiàng)目則不同，雖然也有不少查看頁(yè)面信息的需求，但是包含了更多需要短平快完成操作目標(biāo)的使用場(chǎng)景，比如修改個(gè)標(biāo)題，更改商品價(jià)格，添加分類字段等。

如果所有高頻操作的場(chǎng)景，都要重新加載頁(yè)面，使用起來的 “頓挫感” 是非常強(qiáng)的，降低使用體驗(yàn)。

早期的網(wǎng)站加載內(nèi)容必須刷新頁(yè)面，所以頓挫感是難以解決的，只能想辦法減少跳轉(zhuǎn)流程來提升用戶體驗(yàn)。

隨著網(wǎng)頁(yè)技術(shù)的發(fā)展，異步處理（AJAX數(shù)據(jù)交換方式）技術(shù)的應(yīng)用，讓網(wǎng)頁(yè)的內(nèi)容可以通過不刷新或加載新網(wǎng)頁(yè)的形式加載和顯示。

簡(jiǎn)單解釋，就是早期的網(wǎng)頁(yè)加載完成以后就是 “靜止” 的，里面所有內(nèi)容是固定的（不是HTML的靜態(tài)）。而異步處理，就是讓頁(yè)面中的指定模塊處于 “運(yùn)動(dòng)” 的狀態(tài)，客戶端可以在不重載網(wǎng)頁(yè)的情況下只加載和更新這個(gè)模塊的內(nèi)容。

比如下面的案例，設(shè)置不同的條件選項(xiàng)，在過去的網(wǎng)頁(yè)中只能重載頁(yè)面更新，而使用異步處理就可以直接和服務(wù)器請(qǐng)求數(shù)據(jù)刷新這個(gè)圖表模塊，而不用重載整個(gè)頁(yè)面。

所以，在B端項(xiàng)目中，我們不再是只有重載網(wǎng)頁(yè)一個(gè)選項(xiàng)，而有了其它的選擇，如下圖所示。

其中，網(wǎng)頁(yè)展示作為一個(gè)基礎(chǔ)展示對(duì)象，我就不多做介紹了。我會(huì)通過分別介紹其它幾個(gè)內(nèi)容的載體，幫助大家區(qū)分它們和重載頁(yè)面有何不同，以及如何正確選擇內(nèi)容加載形式。

二、浮層的使用解析

首先介紹浮層，它是我對(duì)通過懸浮在頁(yè)面基礎(chǔ)內(nèi)容之上的內(nèi)容層的統(tǒng)稱。例如各類氣泡、提示框、下拉菜單，都是浮層的表現(xiàn)形式。

浮層是比較底層的形式，其展示內(nèi)的容完全不需要使用一個(gè)新的頁(yè)面，且和觸發(fā)的元素有較強(qiáng)的視覺聯(lián)系（對(duì)比彈窗）。

浮層并不是由內(nèi)容的多和少?zèng)Q定的，復(fù)雜的浮層可以包含非常多的交互選項(xiàng)和內(nèi)容信息，導(dǎo)致我們很容易和下方解釋的彈窗搞混。

比如客戶端軟件常見的隱藏式側(cè)邊欄，搜索欄中展開的復(fù)雜面板，都是浮層的一種而不是彈窗。

浮層最大的特點(diǎn)，源自它的位置定義邏輯，它會(huì)和觸發(fā)它的元素具有非常緊密的位置關(guān)系，而不是像彈窗一樣無差別顯示在界面或?yàn)g覽器視圖的固定區(qū)域。

如果我們想要顯示內(nèi)容，完全沒到用一個(gè)新頁(yè)面展示的地步（如搜索建議面板），且和觸發(fā)它的控件有較強(qiáng)的聯(lián)系，就可以考慮使用浮層來展示。

三、彈窗的使用解析

彈窗，也是一種懸浮在基礎(chǔ)內(nèi)容之上的內(nèi)容層，它和浮層的不同之處，就在于彈窗通常是居中固定的顯示區(qū)域，和觸發(fā)它的元素沒有什么位置聯(lián)系。并且，彈窗可以包含的內(nèi)容量級(jí)也是高于浮層的?；A(chǔ)的彈窗包含強(qiáng)提示彈窗，或類似注冊(cè)登錄這種表單彈窗。

而高級(jí)的彈窗，則類似下方案例，約等于打開一個(gè)獨(dú)立的網(wǎng)頁(yè)。

之所以使用這些高級(jí)彈窗作為頁(yè)面載體，原因就是對(duì)原觸發(fā)頁(yè)面的使用和關(guān)注并沒有結(jié)束，需要支持快速關(guān)閉當(dāng)前的窗口并返回原來的頁(yè)面中去。

比如在一個(gè)非常長(zhǎng)的列表中，你下滑了幾十頁(yè)的高度，肯定不想放棄掉當(dāng)前的頁(yè)面位置，所以Behance或者花瓣等應(yīng)用，都采用窗口模式加載新頁(yè)面。

或者類似一個(gè)列表頁(yè)面中需要大量創(chuàng)建新的數(shù)據(jù)，這些數(shù)據(jù)又不復(fù)雜。于是就通過彈窗表單的形式，快速完成創(chuàng)建并在原頁(yè)面中再次點(diǎn)擊 “新增” 按鈕。

高級(jí)的彈窗使用除了保持原頁(yè)面位置、高頻操作等防止加載的原因之外，還有個(gè)更重要的特征，就是強(qiáng)制吸引用戶的注意力到窗口上。

因?yàn)閺棿爸饕阅B(tài) （Modal，后方有黑色遮罩）居中顯示，通過深色蒙版進(jìn)行前后隔斷，凸顯彈窗區(qū)域，意味著我們強(qiáng)制讓用戶關(guān)注眼前的信息和任務(wù)。

如果我們想要顯示的內(nèi)容，需要保留原頁(yè)面狀態(tài)，減少頁(yè)面跳轉(zhuǎn)數(shù)量，又需求用戶強(qiáng)行關(guān)注，就可以使用這種模式展示。

四、抽屜的使用解析

最后，就是最難選擇，也最容易和其它組件搞混的抽屜了。

抽屜本身的特征包含懸浮屬性，覆蓋在原頁(yè)面之上。而我們常見的側(cè)邊欄、側(cè)邊菜單并不能和抽屜畫上等號(hào)，因?yàn)樗麄儠?huì)占用畫布的實(shí)際顯示區(qū)域，和原有內(nèi)容同層。

比如下方案例中，Jira左側(cè)導(dǎo)航（不分左右）可以隱藏收入，頁(yè)面內(nèi)容變大，這是側(cè)邊欄。而點(diǎn)擊列表選項(xiàng)，右側(cè)彈窗的窗口覆蓋原有頁(yè)面，才是抽屜。

和高級(jí)的彈窗類似，抽屜也可以當(dāng)成一個(gè)獨(dú)立的頁(yè)面展示信息。但它和彈窗不同的是，抽屜通常是從頁(yè)面的右側(cè)展開，沒有遮擋左側(cè)的空間。它的主要特征是還需要在原頁(yè)面進(jìn)行交互。

比如Teambition案例中的列表，我們每開一個(gè)抽屜都還可以直接點(diǎn)擊原列表的其它選項(xiàng)切換下一個(gè)抽屜，省掉關(guān)閉步驟或者原頁(yè)面被遮擋的情況。

它比較適合應(yīng)用在表格/列表環(huán)境中，作為表格/列表內(nèi)容的詳情頁(yè)形式展開，這樣用戶可以在一個(gè)頁(yè)面中快速查看不同列表的具體信息或編輯。并且，表格/列表本身的特征會(huì)將標(biāo)題放在最左側(cè)，也方便抽屜的切換。

也因?yàn)檫@種特性，抽屜不太需要使用模態(tài)和遮罩將左側(cè)內(nèi)容遮擋掉。如果需要通過遮擋來吸引用戶注意力，那么這種情況往往更適合使用彈窗。

所以，如果不想通過新頁(yè)面打開的列表詳情內(nèi)容，且不是強(qiáng)制要求用戶聚焦的任務(wù)，就可以使用抽屜的形式展現(xiàn)。

五、結(jié)尾

以上就是幾種基本的內(nèi)容展現(xiàn)形式說明，時(shí)間關(guān)系還有后半部分關(guān)于如何站在系統(tǒng)框架級(jí)的角度使用內(nèi)容載體的分享，我會(huì)留在下次分享。

如果有關(guān)于這部分的實(shí)際項(xiàng)目疑問，也可以在下方留言。

我們下篇再見～

作者：酸梅干超人；公眾號(hào)：超人的電話亭

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

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

編輯導(dǎo)語(yǔ)：產(chǎn)品設(shè)計(jì)上的許多細(xì)節(jié)都有可能影響到用戶的產(chǎn)品使用體驗(yàn)，進(jìn)而影響到產(chǎn)品的打開率以及留存率等。這就要求產(chǎn)品設(shè)計(jì)師在交互體驗(yàn)層上結(jié)合一定小技巧，以提升用戶體驗(yàn)。本篇文章里，作者結(jié)合案例，總結(jié)了一些UI技巧，一起來看看吧。

對(duì)于很多設(shè)計(jì)師來講在設(shè)計(jì)界面過程中往往會(huì)忽略掉很多的細(xì)節(jié)，比如卡片的排版、文字的排版、各種狀態(tài)的反饋等等，特別是剛?cè)胄械脑O(shè)計(jì)師在做頁(yè)面時(shí)往往是直接拿到競(jìng)品的頁(yè)面搬運(yùn)到自己產(chǎn)品上，這種做法理論上不會(huì)讓自己的頁(yè)面出錯(cuò)。

但是很多人往往忽略了一點(diǎn)，就是別人這么設(shè)計(jì)的目標(biāo)是什么，是否會(huì)匹配自己的設(shè)計(jì)目標(biāo)，如果不了解這些貿(mào)然地去搬運(yùn)設(shè)計(jì)，那么時(shí)間久了會(huì)養(yǎng)成一個(gè)不好的習(xí)慣，需要設(shè)計(jì)師去進(jìn)行設(shè)計(jì)時(shí)可能就會(huì)遇到很多難點(diǎn)，作為初級(jí)設(shè)計(jì)師或者剛?cè)胄械脑O(shè)計(jì)師，前期可以去進(jìn)行搬運(yùn)設(shè)計(jì)，但是一定要了解別人為什么這么做。

接下來將分享12個(gè)設(shè)計(jì)上的小技巧，大部分在日常設(shè)計(jì)中都會(huì)遇到，了解到這些設(shè)計(jì)細(xì)節(jié)，可以讓我們的界面更加高效、易用、美觀提升用戶體驗(yàn)。

一、快捷交互

我在做界面時(shí)可以時(shí)常利用交互手勢(shì)去幫助用戶提升操作效率，避免繁雜小操作步驟。

1. 左側(cè)為什么錯(cuò)？？

左圖中針對(duì)單條消息的操作匯聚到了icon內(nèi)，對(duì)于用戶理解成本比較高，當(dāng)用戶想要去刪除或者屏蔽消息時(shí)需要通過聚合入口才能完成操作，大大的提升了用戶操作成本。

2. 建議正確做法～~

我們可以在類似的消息場(chǎng)景或者其他列表形式的場(chǎng)景中，添加一些交互手勢(shì)，隨著手機(jī)系統(tǒng)的更新，用戶的操作習(xí)慣已經(jīng)被各大產(chǎn)品培養(yǎng)的非常成熟，并不用擔(dān)心用戶無法操作的情況，增加手勢(shì)有弊端也有優(yōu)勢(shì)，右圖中手勢(shì)增加了用戶首次使用的學(xué)習(xí)成本，但是降低了高頻功能的操作成本，這個(gè)理論上是可以接受的。

3. 實(shí)際產(chǎn)品中的運(yùn)用

二、提升交互路徑

利用拇指定律把關(guān)鍵的操作入口元素等，放置右側(cè)提升用戶操作效率。

1. 左側(cè)為什么錯(cuò)？？

左圖中把按鈕放置了模塊左下側(cè)，這樣是不利于用戶進(jìn)行操作，當(dāng)然如果整個(gè)模塊的熱區(qū)都是同一個(gè)，這樣并沒有什么問題，用戶點(diǎn)擊卡片區(qū)域任何位置都能夠完成下一步操作，如果出現(xiàn)一個(gè)模塊內(nèi)存在多個(gè)熱區(qū)入口，而用戶想要到達(dá)目標(biāo)必須通過按鈕點(diǎn)擊才能進(jìn)入，那么左圖中的排版位置就會(huì)提升用戶的操作時(shí)間。

2. 建議正確做法～～

當(dāng)一個(gè)頁(yè)面內(nèi)出現(xiàn)多個(gè)相同模塊或者一個(gè)模塊出現(xiàn)多個(gè)熱區(qū)入口時(shí)，按鈕點(diǎn)擊區(qū)域有限，我們?cè)O(shè)計(jì)時(shí)就可以利用拇指定律進(jìn)行排版，如右圖中布局，將按鈕放置右側(cè)可以便于用戶在右手操作時(shí)快速到達(dá)目標(biāo)，因?yàn)閲?guó)內(nèi)使用右手的人數(shù)遠(yuǎn)遠(yuǎn)大于左手用戶，所以我們需要滿足大部分的體驗(yàn)，合理利用拇指定律。

相關(guān)定律：費(fèi)茲定律、拇指定律。

3. 實(shí)際產(chǎn)品中的運(yùn)用

三、問題前置

對(duì)于我們來講很多東西是簡(jiǎn)單的，但是不乏會(huì)有一些用戶是陌生的，對(duì)于他們來講可能會(huì)有填寫成本。

1. 左側(cè)為什么錯(cuò)？？

左圖中理論上并不是錯(cuò)，我們經(jīng)常設(shè)計(jì)表單時(shí)都會(huì)用的提示話術(shù)，但是我們需要考慮更多維度的東西，對(duì)于我們來講填寫這種表單非常簡(jiǎn)單，例如個(gè)別用戶，可能會(huì)臨時(shí)忘了郵箱格式，又或者輸入手機(jī)號(hào)時(shí)多填了一位數(shù)等等情況，用戶錯(cuò)誤一次操作步驟就會(huì)多一步，反之就是降低使用產(chǎn)品時(shí)的體驗(yàn)。

2. 建議正確做法～～

如右圖中，我們?cè)O(shè)計(jì)時(shí)可以更改提示的話術(shù)，幫助用戶把問題前置，當(dāng)用戶看到提示郵箱時(shí)就會(huì)按照格式去填寫，通過把手機(jī)號(hào)的位數(shù)拆分，讓用戶更好的記憶數(shù)字，這樣無論對(duì)產(chǎn)品還是用戶都沒有任何損失，反而能降低錯(cuò)誤頻率。

3. 實(shí)際產(chǎn)品中的運(yùn)用

四、提升可讀性

無論是頁(yè)面還是模塊，用戶在閱讀時(shí)是已掃讀的方式進(jìn)行瀏覽，我們需要保證頁(yè)面的文字元素具備一定的規(guī)律，以此來提升閱讀效率。

1. 左側(cè)為什么錯(cuò)？？

左圖中可以看到，文字與輸入框放在同一列進(jìn)行展示，這樣一方面不利于后續(xù)的文字?jǐn)U展，通常這種表單填寫的頁(yè)面，在頁(yè)面中都是具有很大的空間位置，這樣排布會(huì)造成視覺上的不規(guī)律和擁擠，降低了篩選效率，當(dāng)然如果是模塊區(qū)域很小的情況下，可以適當(dāng)?shù)倪M(jìn)行使用。

2. 建議正確做法～～

右圖中我們把文字與輸入?yún)^(qū)域上下排布，雖然文字長(zhǎng)短不一，但依據(jù)對(duì)齊原則在豎列情況看是具備對(duì)齊規(guī)律的，有效地提升信息篩選效率。

3. 實(shí)際產(chǎn)品中的運(yùn)用

五、點(diǎn)擊引導(dǎo)

我們?cè)谧鱿到y(tǒng)功能模塊時(shí)需要注意添加功能點(diǎn)擊引導(dǎo)，用戶對(duì)此類消息模塊認(rèn)知上會(huì)默認(rèn)不可點(diǎn)擊，因此需要我們加以引導(dǎo)。

1. 左側(cè)為什么錯(cuò)？？

我們常見的消息模塊內(nèi)容為兩種，一種是互動(dòng)類消息即用戶與用戶，另一種時(shí)是系統(tǒng)消息即產(chǎn)品推送的內(nèi)容。

前者基于用戶習(xí)慣而言用戶已經(jīng)沒有使用成本默認(rèn)是可以進(jìn)行點(diǎn)擊交互，后者因?yàn)椴糠之a(chǎn)品會(huì)把系統(tǒng)消息作為展示的形式給用戶，但是有些產(chǎn)品的系統(tǒng)消息卻是可以點(diǎn)擊交互，這就導(dǎo)致了用戶認(rèn)知上出現(xiàn)了混亂，左圖中像系統(tǒng)通知功能通知其實(shí)從視覺上看，并不具備點(diǎn)擊欲望，因此可能會(huì)對(duì)用戶造成錯(cuò)誤的理解。

2. 建議正確做法～～

當(dāng)我們?cè)谠O(shè)計(jì)時(shí)需要注意，若消息列表中存在系統(tǒng)類消息并且可以進(jìn)行交互，在設(shè)計(jì)時(shí)可以添加向箭頭、紅點(diǎn)提示等方式告知用戶可以點(diǎn)擊，如果該功能有數(shù)據(jù)指標(biāo)，這種方式也同樣能賦能產(chǎn)品指標(biāo)。

3. 實(shí)際產(chǎn)品中的案例

六、注意飽和度

目前市場(chǎng)上產(chǎn)品幾乎都有深色版本，我們?cè)谠O(shè)計(jì)時(shí)深色版本的顏色時(shí)需要注意飽和度的高低，同樣的飽和度在黑色背景上會(huì)比白色背景上更加亮，這跟人的視覺感官有很大的關(guān)系，因此我們?cè)谧龊谏姹緯r(shí)需要注意是否調(diào)整飽和度。

1. 左側(cè)為什么錯(cuò)？？

在黑色背景中使用過高的飽和度會(huì)刺激眼睛，很多深色版本都是從白色模式通過反向顏色直接調(diào)整，而彩色元素會(huì)直接運(yùn)用到深色中，那么就會(huì)造成一個(gè)問題，因?yàn)槲覀兞?xí)慣在白色模式下看顏色，忽然切換到黑色中看彩色刺激程度非常高“就像黑夜中忽然打開手電筒”，對(duì)眼睛的傷害很高。

2. 建議正確做法～～

我們?cè)谠O(shè)計(jì)深色版本時(shí)可以根據(jù)產(chǎn)品主色降低飽和度，包括圖標(biāo)等元素，以此來緩沖對(duì)用戶視覺感官的刺激，目前很多大廠的處理方式是直接在彩色元素上添加一層黑色透明遮罩進(jìn)行處理，這樣無需在添加更多的顏色規(guī)范。

3. 實(shí)際產(chǎn)品中的案例

七、禁止特殊字體

在設(shè)計(jì)模塊或者頁(yè)面時(shí)不建議使用特殊字體來突出文字層級(jí)，這樣會(huì)導(dǎo)致視覺不統(tǒng)一，以及開發(fā)成本增加。

1. 左側(cè)為什么錯(cuò)？？

左圖中灰色字使用了特殊字體，看起來雖然好看，但在實(shí)際開發(fā)中會(huì)導(dǎo)致開發(fā)成本增加，我們產(chǎn)品一般使用的是系統(tǒng)字體，若使用特殊字體需要讓開發(fā)同學(xué)添加對(duì)應(yīng)字體包，這樣會(huì)導(dǎo)致我們的產(chǎn)品包的內(nèi)存過大，除非產(chǎn)品中默認(rèn)一直使用該特殊字體，這樣才有使用的價(jià)值。

2. 建議正確做法～～

一般系統(tǒng)字體就能夠滿足我們的設(shè)計(jì)需求，在UI設(shè)計(jì)中我們可以通過不同的字體粗細(xì)來調(diào)整文字層級(jí)，這樣能夠保證視覺更加統(tǒng)一，減少產(chǎn)品包大小。

3. 實(shí)際產(chǎn)品中的案例

八、按鈕也要有層級(jí)

在設(shè)計(jì)時(shí)需要注意多個(gè)入口在同一位置時(shí)，需要把它們進(jìn)行層級(jí)劃分，避免影響用戶決策。

1. 左側(cè)為什么錯(cuò)？？

圖中可以看到，兩個(gè)面性按鈕非常明顯的在模塊中，當(dāng)用戶在瀏覽頁(yè)面中很容易出現(xiàn)困惑，到底需要點(diǎn)擊哪個(gè)才能購(gòu)買預(yù)定，因?yàn)閮蓚€(gè)都是面性無法快速進(jìn)行定位入口，這樣不僅影響用戶決策效率，還會(huì)影響產(chǎn)品點(diǎn)擊率。

2. 建議正確做法～～

建議設(shè)計(jì)類似模塊中時(shí)，無論是pc還是移動(dòng)端都需要對(duì)入口進(jìn)行結(jié)構(gòu)劃分，這樣能夠使用戶在瀏覽頁(yè)面時(shí)快速定位到入口，提升決策效率，做體驗(yàn)是解決用戶的思考時(shí)間。

3. 實(shí)際產(chǎn)品中的案例

九、圖標(biāo)保持一致

在UI設(shè)計(jì)中使用圖標(biāo)時(shí)，要保持一致性，確保他們共有相同的視覺風(fēng)格，相同的重量，填充和描邊。不要混搭。

1. 左側(cè)為什么錯(cuò)？？

可以看到左圖中的圖標(biāo)并不統(tǒng)一，線性里面摻雜著面性點(diǎn)綴，這在UI設(shè)計(jì)中嚴(yán)重違背了一致性的原則，會(huì)導(dǎo)致我們的頁(yè)面不夠嚴(yán)謹(jǐn)專業(yè)。

2. 建議正確做法～～

在設(shè)計(jì)圖標(biāo)時(shí)，首先要保證圖標(biāo)風(fēng)格一致，其次在這個(gè)基礎(chǔ)上保證圖標(biāo)的描邊粗細(xì)、視覺占比重量、顏色等，不要出現(xiàn)混搭風(fēng)格。

3. 實(shí)際產(chǎn)品中的案例

十、利用對(duì)比

在設(shè)計(jì)頁(yè)面模塊時(shí)，可以多利對(duì)比度的方式來體現(xiàn)設(shè)計(jì)的表現(xiàn)力，鮮明直接的色值能夠直接表達(dá)事物的性質(zhì)以及特點(diǎn)，通過對(duì)比，也能夠更加清晰的強(qiáng)調(diào)設(shè)計(jì)中的重點(diǎn)，這樣給用戶的印象會(huì)更深刻，同樣會(huì)給產(chǎn)品帶來一定的趣味性。

1. 左側(cè)為什么錯(cuò)？？

左圖中單看視覺也沒問題，只是在表現(xiàn)上圖標(biāo)與背景融入到一塊了，導(dǎo)致視覺表現(xiàn)力較差，在設(shè)計(jì)中如果符合產(chǎn)品風(fēng)格的前提下，我們可以避免這種方式，這種方式雖然具有視覺效果但不夠強(qiáng)，對(duì)用戶的記憶點(diǎn)不夠深刻。

2. 建議正確做法～～

設(shè)計(jì)到類似的模塊時(shí)我們可以利用對(duì)比的關(guān)系，以此突出視覺元素，通過顏色焦點(diǎn)引導(dǎo)用戶關(guān)注，強(qiáng)化用戶印象同時(shí)還能增加頁(yè)面的視覺表現(xiàn)力和氛圍感。

3. 實(shí)際產(chǎn)品中的案例

十一、圖文疊加

在設(shè)計(jì)圖文疊加的卡片或者頁(yè)面時(shí)，我們需要注意不同明度的圖片上，文字識(shí)別是否有阻礙，一般情況會(huì)通過遮罩方式避免這個(gè)情況。

1. 左側(cè)為什么錯(cuò)？？

左圖中在深色圖片下字體的可讀性是沒有問題的，但當(dāng)出現(xiàn)文字底部區(qū)域的圖片相對(duì)復(fù)雜時(shí)便會(huì)影響識(shí)別，第二種情況當(dāng)圖片明度過高時(shí)文字同樣無法識(shí)別，試想一下，一張白色調(diào)性的圖片上放文字，那基本無法看清，嚴(yán)重影響閱讀體驗(yàn)。

2. 建議正確做法～～

在界面設(shè)計(jì)時(shí)如果遇到類似的卡片，建議在文字區(qū)域添加漸變遮罩的方式，以此保證文字的識(shí)別度，或者添加純黑色透明遮罩進(jìn)行處理，這樣可以兼容不同環(huán)境的圖片與文字的重疊，保證基本的閱讀體驗(yàn)。

3. 實(shí)際產(chǎn)品中的案例

十二、注意遮罩透明

UI設(shè)計(jì)中經(jīng)常會(huì)遇到彈窗，彈窗是需要配合頁(yè)面遮罩來讓用戶進(jìn)行專注操作，不同的遮罩透明度所帶來的專注度也不同。

1. 左側(cè)為什么錯(cuò)？？

左圖中我們看到，遮罩的透明度過低，我案例設(shè)置的是17%，此時(shí)彈窗內(nèi)容與頁(yè)面內(nèi)容結(jié)構(gòu)上區(qū)分并不是很明顯，一般彈窗是用來讓用戶跳脫頁(yè)面內(nèi)容，從而瀏覽彈窗內(nèi)容，轉(zhuǎn)變用戶目標(biāo)，當(dāng)彈窗無法聚焦時(shí)便很難達(dá)到目標(biāo)，并且視覺上層級(jí)更加混亂。

2. 建議正確做法～～

右圖中案例我把透明度調(diào)整到了37%，我們此時(shí)再看彈窗很容易就忽略頁(yè)面內(nèi)容，因?yàn)榛疑礁?，遮擋度越高，用戶跳脫感就越?qiáng)，這樣我們可以讓用戶專注彈窗內(nèi)容，同時(shí)視覺結(jié)構(gòu)上也區(qū)分很明顯

3. 實(shí)際產(chǎn)品中的案例

作者：愛吃貓的魚；公眾號(hào)：防脫發(fā)藥水

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

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

蘭亭妙微(www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan