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

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

折疊菜單(Accordion)，又稱手風(fēng)琴菜單，是在頁面中垂直堆疊的菜單列表，通過展開/折疊來顯示或隱藏更多菜單內(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)；加號/減號；向上/向下箭頭。

3. 附加圖標(biāo)

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

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

二、折疊菜單的樣式

1. 封閉式折疊菜單

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

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

2. 分離式折疊菜單

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

3. 突出顯示展開菜單

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

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

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

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

1. 展示預(yù)覽

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

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

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

3. 提示文案

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

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

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

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

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

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

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

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

四、最后

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

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

#專欄作家#

作者：Clippp，微信公眾號：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.alimai.net )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

二、浮層的使用解析

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

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

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

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

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

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

三、彈窗的使用解析

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

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

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

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

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

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

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

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

四、抽屜的使用解析

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

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

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

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

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

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

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

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

五、結(jié)尾

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

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

我們下篇再見～

作者：酸梅干超人；公眾號：超人的電話亭

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

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

編輯導(dǎo)語：產(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技巧，一起來看看吧。

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

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

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

一、快捷交互

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

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

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

2. 建議正確做法～~

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

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

二、提升交互路徑

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

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

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

2. 建議正確做法～～

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

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

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

三、問題前置

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

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

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

2. 建議正確做法～～

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

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

四、提升可讀性

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

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

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

2. 建議正確做法～～

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

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

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

我們在做系統(tǒng)功能模塊時需要注意添加功能點(diǎn)擊引導(dǎo)，用戶對此類消息模塊認(rèn)知上會默認(rèn)不可點(diǎn)擊，因此需要我們加以引導(dǎo)。

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

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

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

2. 建議正確做法～～

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

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

六、注意飽和度

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

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

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

2. 建議正確做法～～

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

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

七、禁止特殊字體

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

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

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

2. 建議正確做法～～

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

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

八、按鈕也要有層級

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

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

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

2. 建議正確做法～～

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

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

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

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

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

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

2. 建議正確做法～～

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

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

十、利用對比

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

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

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

2. 建議正確做法～～

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

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

十一、圖文疊加

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

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

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

2. 建議正確做法～～

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

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

十二、注意遮罩透明

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

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

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

2. 建議正確做法～～

右圖中案例我把透明度調(diào)整到了37%，我們此時再看彈窗很容易就忽略頁面內(nèi)容，因?yàn)榛疑礁撸趽醵仍礁撸脩籼摳芯驮綇?qiáng)，這樣我們可以讓用戶專注彈窗內(nèi)容，同時視覺結(jié)構(gòu)上也區(qū)分很明顯

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

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

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

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

蘭亭妙微(www.alimai.net )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan

卡片式設(shè)計(jì)是產(chǎn)品常用的頁面設(shè)計(jì)手段之一，它自帶的分割屬性讓頁面布局更加清晰，也是頁面布局的利器。但是，分割也可能會影響用戶沉浸式的瀏覽體驗(yàn)等問題。如何用好卡片式設(shè)計(jì)？本文作者對此進(jìn)行了分析，與你分享。

近幾年，卡片式設(shè)計(jì)可以說是移動端產(chǎn)品中極為常見的設(shè)計(jì)形式了，甚至有很多互聯(lián)網(wǎng)大廠將卡片式設(shè)計(jì)納入設(shè)計(jì)語言，在各大APP中得到廣泛運(yùn)用。

卡片式設(shè)計(jì)自帶分割屬性、讓界面更有層次感，能給人一種視覺上的享受，也因此讓其成為了頁面布局的利器，但它并非萬能，因分割的原因可能會影響用戶沉浸式的瀏覽體驗(yàn)、造成橫向/縱向空間浪費(fèi)等問題，需要根據(jù)實(shí)際場景和內(nèi)容形式來確定，不要專門為了“卡片式”而設(shè)計(jì)。

很多設(shè)計(jì)師對卡片設(shè)計(jì)習(xí)以為常，但對于使用卡片的原因、視覺表現(xiàn)方式、優(yōu)/缺點(diǎn)等并不是很了解。那么卡片到底該如何設(shè)計(jì)？需要注意哪些細(xì)節(jié)？筆者根據(jù)經(jīng)驗(yàn)并結(jié)合平時的一些思考，跟大家一起聊聊在設(shè)計(jì)中極易忽略的細(xì)則，希望能幫助大家提升卡片設(shè)計(jì)的精致感。

一、卡片式設(shè)計(jì)的定義

1. 什么是卡片？

早在互聯(lián)網(wǎng)時代之前，卡片就出現(xiàn)在了我們生活中的方方面面，如名片、不干膠標(biāo)簽、便利貼、會員卡…等，不管是何種類型的卡片，它都將代表著我們現(xiàn)實(shí)生活中的某個特定信息。

卡片指的是含有圖片或文本信息的容器，它將我們需要的信息歸納在一起、并形成獨(dú)立的個體，以至于后續(xù)被引用到線上界面中，同樣具有非常不錯的信息歸納效果。

2. 互聯(lián)網(wǎng)中的卡片式設(shè)計(jì)

卡片本身就是一個完整的信息區(qū)塊、并同時承載豐富的互動方式。在UI設(shè)計(jì)中，個性化和美感兼?zhèn)涞目ㄆ皆O(shè)計(jì)具有很強(qiáng)的易用性，它是一個UI設(shè)計(jì)組件，將標(biāo)題、文本內(nèi)容、圖形/圖片進(jìn)行整合并模塊化，讓信息的表達(dá)更加直觀、操作也更便捷。

卡片式設(shè)計(jì)之所以能成為當(dāng)今比較流行的趨勢，是因?yàn)樗茏尳缑嫘畔⒏袑哟胃校瑥脑O(shè)計(jì)、交互、視覺以及用戶體驗(yàn)等各方面來看，都有不錯的優(yōu)點(diǎn)。站在用戶角度，即便不太理解卡片的概念（也不需要理解），但能快速知道如何使用它，相對來說，學(xué)習(xí)成本也是極低的。

二、卡片式設(shè)計(jì)價值

1. 結(jié)構(gòu)清晰

卡片在占用屏幕空間較少的情況下能夠?qū)⒉煌笮　⒉煌愋偷男畔?nèi)容按邏輯進(jìn)行分組呈現(xiàn)，使界面結(jié)構(gòu)更加清晰。相比純粹的留白或分割線，卡片不僅對信息作出了分割，其本身還是一個獨(dú)立的容器，讓歸納組合后的信息能快速突出重點(diǎn)，將復(fù)雜內(nèi)容簡單化處理。

卡片式布局整齊簡練，清晰的信息結(jié)構(gòu)有助于用戶瀏覽，方便快速找到自己感興趣的內(nèi)容，避免用戶產(chǎn)生一種費(fèi)時或感覺內(nèi)容超長的恐懼感，還能節(jié)省更多的時間成本。最常見的就是信息列表、圖文混排等，不僅做到了視覺上的美觀，也達(dá)到了平衡文字及圖片強(qiáng)弱的效果。

2. 場景拓展

卡片式設(shè)計(jì)有利于場景拓展，他能在信息不斷增/減的情況下、頁面依然能組成一個連貫的整體，在視覺上毫無違和感。例如支付寶在頭部插入的廣告引流入口、淘寶在節(jié)假日增加二層樓…等。

3. 空間擴(kuò)展

卡片式設(shè)計(jì)一度打破了移動端多為縱向操作、原有傳統(tǒng)的列表式布局，在空間有限的移動端設(shè)備中，還能很好的利用橫向空間。將橫向滑動區(qū)域的最后一個卡片漏出一小部分（若隱若現(xiàn)才是誘惑），不僅能給予用戶更多選擇與期待，其空間利用率也得到了很好的擴(kuò)展，在展示更多內(nèi)容的情況下依然能保持模塊的整體性。

4. 突出重點(diǎn)

卡片式設(shè)計(jì)能很好的通過邊界襯托出內(nèi)容的整體性，特別是在電商類產(chǎn)品中的首頁頭部、瓷片區(qū)、營銷引流區(qū)將其應(yīng)用到了極致，即便在卡片數(shù)量較多的情況下，用戶依然能清晰的感知到內(nèi)容的歸屬層級以及重要信息。

5. 兼容多端

卡片作為一個容器，它可以自由無限的等比縮放，非常適合響應(yīng)式設(shè)計(jì)。在手機(jī)、iPad、電腦等屏幕尺寸復(fù)雜的情況下，通過放大縮小或增減縱向排列數(shù)量的方式配合響應(yīng)式的斷點(diǎn)設(shè)計(jì)，讓同一界面在不同設(shè)備之間輕易的創(chuàng)造出一致性的視覺體驗(yàn)。

6. 易于操作

卡片給人最直觀的感覺就是可以操作，它不用箭頭、按鈕或超鏈接等引導(dǎo)性的視覺元素提醒，節(jié)省了一定的頁面空間，還有著更大的操作熱區(qū)，無需做到精準(zhǔn)點(diǎn)擊?？ㄆ皆O(shè)計(jì)很容易融入各種交出手勢，如單擊、雙擊、長按、拖動、滑動等，為用戶提供更多便捷的操作。

7. 跳轉(zhuǎn)流暢

卡片可通過縮放的形式充分利用動畫進(jìn)行頁面跳轉(zhuǎn)，例如App Store“Today”頻道，點(diǎn)擊卡片后直接等比放大至全屏，給用戶一種還停留在當(dāng)前頁面的錯覺，避免了傳統(tǒng)的跳轉(zhuǎn)頁面而造成的信息割裂感，流暢絲滑的過渡，給用戶更自然的交互體驗(yàn)。

三、常見的卡片式設(shè)計(jì)樣式

1. 四周留白

這種類型的卡片在UI設(shè)計(jì)中最為常見，柔和的圓角、邊緣陰影以及四周很自然的留白，讓內(nèi)容模塊的存在感更加強(qiáng)烈，整個頁面信息的層級也更加清晰。

2. 懸浮內(nèi)容之上

懸浮型卡片并非模態(tài)彈窗，與其相比，懸浮卡片不需要主動操作觸發(fā)，可作為臨時控件或長期固定顯示，并且比模態(tài)彈窗能承載更多信息內(nèi)容，可通過伸縮來定義卡片中的信息數(shù)量，或多、或少、或展示、或隱藏，在頁面中非常靈活。

例如高德地圖首頁，搜索框及右側(cè)的功能入口長期懸浮在地圖之上，而下方卡片中的內(nèi)容會隨著高度的伸縮自動調(diào)節(jié)可展示的數(shù)量，非常實(shí)用。

3. 通欄類型

通欄類型的卡片具有更強(qiáng)的視覺阻斷，對區(qū)分不同的功能模塊有不錯的效果，不過這種類型只通過頁面背景色保留上下邊間、且不會過多，不然頁面會顯得零散、雜亂。

四、卡片適用場景介紹

1. 瀑布流

瀑布流主要正針對圖片較多、或以圖片為主的內(nèi)容設(shè)計(jì)，它最大的優(yōu)點(diǎn)是無需過于在意圖片的高度，最大限度的還原原始圖片效果。

卡片式設(shè)計(jì)的瀑布流對信息的組合、包容性更強(qiáng)，不僅能在單屏區(qū)域內(nèi)顯示更多內(nèi)容，同時又將每組信息組合作出了明確的劃分，在不破壞頁面整體性的基礎(chǔ)上也做到了相對獨(dú)立，如花瓣、Pinterest就是最好的例子。

2. 信息流

信息流的展現(xiàn)方式主要以文字、圖片或視頻內(nèi)容為主，是一種較長內(nèi)容的媒介，不管哪種展現(xiàn)方式，其都需要用戶耗費(fèi)較長時間的滑動、瀏覽來篩查對自己有用的信息。

卡片式設(shè)計(jì)將信息進(jìn)行分塊處理，通過阻隔的方式快速告知用戶每個卡片的核心內(nèi)容，便于用戶在長時間的滑動過程中也能快速識別重要信息。

3. 左/右滑動

卡片式左右滑動組合在音樂、視頻類產(chǎn)品中用最為廣泛，因內(nèi)容本身就圖片居多，也更適合卡片式設(shè)計(jì)，相比平鋪具有更強(qiáng)的層次感，對用戶的吸引力較強(qiáng)，尤其最右側(cè)漏出的一小部分內(nèi)容營造出神秘的感覺，用戶會不由自主的想去滑動以求獲取更多信息。

4. 優(yōu)惠卡/券

卡/券設(shè)計(jì)實(shí)際是把生活中的實(shí)物映射到了UI設(shè)計(jì)中，通過模擬實(shí)物造型設(shè)計(jì)成卡片樣式，有效降低用戶的理解成本，并對其有了更直觀的感知，真實(shí)感尤為強(qiáng)烈。

5. 突發(fā)事件/臨時提醒

對于用戶主動觸發(fā)或系統(tǒng)臨時發(fā)起的非固定性內(nèi)容，利用卡片式設(shè)計(jì)會讓信息布局更靈活、視覺更突出，在不影響用戶使用的前提下，可出現(xiàn)在任何位置。

6. 部分頁面頭圖

卡片式設(shè)計(jì)可以將個人中心、個人主頁、會員等頁面中的關(guān)鍵信息進(jìn)行概括，并在頭部位置進(jìn)行重點(diǎn)突出，不僅讓原本單個的內(nèi)容形成整體，還能營造出沉浸式的氛圍。

五、卡片式設(shè)計(jì)原則及小技巧

1. 一致性原則

為了保持界面設(shè)計(jì)的一致性，需要將卡片樣式納入設(shè)計(jì)規(guī)范，例如卡片是否通欄、是否需要設(shè)定圓角半徑、不同場景中卡片大小的劃分界限以及圓角數(shù)值的確定等，大部分情況下都需要遵循設(shè)計(jì)規(guī)范。

2. 功能定位決定卡片形式

在同一產(chǎn)品中，雖然要遵循設(shè)計(jì)規(guī)范以確保一致性的視覺效果，但并非所有頁面都適合卡片式設(shè)計(jì)。

那么，到底是否需要采用卡片形式、使用哪種卡片類型？這還得根據(jù)頁面內(nèi)容屬性及目標(biāo)定位來決定。例如社交產(chǎn)品中的臨時會話列表、動態(tài)圈子使用卡片形式，很浪費(fèi)縱向空間、甚至?xí)@得很“雞肋”，用分隔線或間距留白來區(qū)分信息組顯然更合適；但對于電商類型的產(chǎn)品，利用卡片將不同的商品分隔后又進(jìn)行歸納，會更容易識別，信息的可讀性也會更強(qiáng)。

3. 避免過多卡片嵌套

卡片式設(shè)計(jì)本身就包含了容器與背景的層級表現(xiàn)，為了保持內(nèi)容的正常展示與用戶瀏覽體驗(yàn)，避免在卡片中嵌套多層卡片，以免信息層級雜/亂而增加用戶的視覺負(fù)擔(dān)。

如果再同一卡片中需要再次區(qū)分多個信息組，可利用間距留白、分割線或淺色背景等元素屬性來區(qū)分，依然能達(dá)到想要的效果。

4. 合理利用橫向空間

因?yàn)榭ㄆ瑑?nèi)、外的雙向間距留白，在空間有限的移動端設(shè)備中，橫向空間利用率較低，因此除了合理的減小左右間距外，還可以適當(dāng)利用左右滑動來擴(kuò)充橫向隱性空間。

例如淘票票首頁，在1.5屏的范圍內(nèi)，幾乎每個模塊都能橫向滑動查看更多內(nèi)容，從用戶體驗(yàn)角度出發(fā)，這是縱向空間無法比擬的。

5. 降低縱向空間的浪費(fèi)

卡片式設(shè)計(jì)不是目的，其主要是用來更好的區(qū)分信息層級、提升用戶瀏覽體驗(yàn)，因?yàn)榭ㄆ鳛楠?dú)立空間的存在，必定會增加上下間距而導(dǎo)致頁面拉長，因此，如無必要，不必盲目采用卡片式設(shè)計(jì)。

例如美團(tuán)APP的「首頁、電商、購物車、我的」4大主功能頁面都使用了卡片形式，而「消息」頁則采用分割線進(jìn)行信息分組，試想一下，如果為了統(tǒng)一規(guī)范而使用卡片，不僅造成很強(qiáng)的割裂感、還會極大的浪費(fèi)縱向空間。

6. 長文表達(dá)不適合卡片

這點(diǎn)不用多說，新聞資訊類產(chǎn)品的內(nèi)容詳情頁就是最好的證明，不管其他頁面是否采用卡片形式，但詳情頁并不會跟隨形式，一方面可以讓同屏展示更多內(nèi)容、增加空間利用率，另一方面可減少無關(guān)元素對用戶產(chǎn)生的干擾、給予沉浸式的瀏覽體驗(yàn)。

7. 突出一個核心內(nèi)容

很多時候，我們總會聽到PM說這個很重要、那個也很重要，都需要突出一點(diǎn)，殊不知當(dāng)什么都突出了也說明什么都沒有突出。在單個卡片中，組始終牢記這個準(zhǔn)則：一次只突出一個核心信息，以便于用戶快速、精準(zhǔn)捕捉，切記不可貪多。

六、結(jié)語

卡片式設(shè)計(jì)之所有能快速流行起來且經(jīng)久不衰， 其主要得益于自身的靈活性，尤其是在跨設(shè)備、跨屏幕上有著純天然的優(yōu)勢，能忽略設(shè)備的差異給用戶提供更好的服務(wù)?？ㄆ⒉皇呛唵蔚臉邮皆O(shè)計(jì)，它是一種自由布局的設(shè)計(jì)語言，通過多種方式的信息組合、結(jié)合豐富的交互操作，給用戶創(chuàng)造出極致的使用體驗(yàn)。

信息的呈現(xiàn)方式雖有不同，但最終的目的都是為了服務(wù)于內(nèi)容，卡片式設(shè)計(jì)只是其中的一種形式而已，在設(shè)計(jì)過程中，我們需要根據(jù)內(nèi)容結(jié)合實(shí)際情況作出合理的判斷，切勿拘泥于形式而忽略內(nèi)容本身的重要性。

任何設(shè)計(jì)風(fēng)格及展現(xiàn)形式都有可能成為歷史，卡片式設(shè)計(jì)也不會例外，但絕對不是這么快就結(jié)束，它依然值得我們?nèi)ド罹浚η蟠蛟旄玫男畔⒉季帧⒏孢m的用戶體驗(yàn)。

底部標(biāo)簽欄的圖標(biāo)風(fēng)格在一定程度上決定了界面的風(fēng)格?？雌饋硐鄬唵?，但仍然有很多問題值得注意。作者通過標(biāo)簽欄樣式分析、6個導(dǎo)航欄注意事項(xiàng)來總結(jié)底部標(biāo)簽欄的設(shè)計(jì)，希望通過這些內(nèi)容能幫助你對底部標(biāo)簽欄有進(jìn)一步的理解。

底部標(biāo)簽欄（也稱導(dǎo)航欄）是移動端設(shè)計(jì)中必備的導(dǎo)航類型之一。底部標(biāo)簽欄上通常會安排最重要且頻繁操作的功能，方便用戶隨時都能快速訪問。

雖然底部導(dǎo)航欄看起來相對簡單，但要做到精準(zhǔn)設(shè)計(jì)，仍然有很多問題值得注意。

本次通過標(biāo)簽欄樣式分析、六個導(dǎo)航欄注意事項(xiàng)來總結(jié)底部標(biāo)簽欄的設(shè)計(jì)～

01 標(biāo)簽欄樣式分析

底部標(biāo)簽欄可以是純圖標(biāo)樣式，或者圖標(biāo)與文本標(biāo)簽搭配的樣式。

選中的標(biāo)簽需要有不同的視覺風(fēng)格，可以使用按鈕、文字、圓點(diǎn)等樣式來表示選中效果，幫助用戶一目了然地定位當(dāng)前導(dǎo)航。

在Apple iOS底部標(biāo)簽欄中，標(biāo)簽欄的寬為390px，高為49px。

常規(guī)標(biāo)簽欄的圖標(biāo)大小為25x25px，緊湊型的標(biāo)簽欄圖標(biāo)為18x18px。

在iOS的底部標(biāo)簽欄中，文字使用的字體為10px，中等粗細(xì)。

02 標(biāo)簽欄設(shè)計(jì)6個注意事項(xiàng)

1）導(dǎo)航數(shù)量不超過5個

底部標(biāo)簽欄最適合放置3-5個導(dǎo)航選項(xiàng)。移動端屏幕相對較小，使用五個以上的選項(xiàng)會讓導(dǎo)航擠在一起，并影響可用性。

另外導(dǎo)航選項(xiàng)太多，手指的觸摸面積(紅色圓圈)會比觸摸目標(biāo)(導(dǎo)航選項(xiàng))的面積大很多，用戶有可能會意外觸發(fā)錯誤的選項(xiàng)。

設(shè)計(jì)解析：

①如果選項(xiàng)很少，只有兩或三個時，可以考慮使用分段控件的設(shè)計(jì)樣式，將分段控件放在頁面上方作為導(dǎo)航。

② 如果選項(xiàng)很多，超過五個時，我們需要評估這些導(dǎo)航的優(yōu)先級，篩選出最重要的導(dǎo)航。如果必須要保留五個以上的導(dǎo)航選項(xiàng)，可以考慮使用類似漢堡菜單這樣的控件。

2）不要使用不熟悉的圖標(biāo)

底部標(biāo)簽欄是用戶使用頻率非常高的導(dǎo)航之一，這就需要確保目標(biāo)受眾應(yīng)該對標(biāo)簽欄中的圖標(biāo)非常清晰，避免讓用戶產(chǎn)生疑惑。

如果在設(shè)計(jì)的時候，覺得某個圖標(biāo)的含義或者樣式對用戶來說不是特別明確，那么就需要將圖標(biāo)與文字標(biāo)簽一起使用，方便用戶快速準(zhǔn)確地理解。

3）圖標(biāo)/文字的顏色不能太淺

圖標(biāo)的顏色對比度差、導(dǎo)航標(biāo)簽的字體小是在底部標(biāo)簽欄設(shè)計(jì)中兩個最常見問題。

在底部欄設(shè)計(jì)過程中，我們不僅要區(qū)分已選標(biāo)簽和未選標(biāo)簽的狀態(tài)，保證已選標(biāo)簽更突出，還要注意觀察圖標(biāo)與文字之間、圖標(biāo)與背景之間的顏色對比度，確保未選狀態(tài)的圖標(biāo)和文字也能夠清晰易讀。

4）不要設(shè)計(jì)可滑動的標(biāo)簽欄

可滑動的標(biāo)簽欄會對導(dǎo)航可見性產(chǎn)生影響，由于并非所有的導(dǎo)航選項(xiàng)都是一次可見，用戶可能很容易錯過后面的選項(xiàng)。

另外，當(dāng)用戶左右滑動標(biāo)簽欄時，前面已選的標(biāo)簽可能會消失，影響使用體驗(yàn)。

5）不要截?cái)鄻?biāo)簽

底部標(biāo)簽欄的空間本身就很小，因此在導(dǎo)航中使用文字時，每個字符都顯得很重要。

不要截?cái)鄻?biāo)簽，這樣會造成用戶不清楚標(biāo)簽的含義，可以嘗試使用更簡練的文字來清楚地傳達(dá)選項(xiàng)含義。

6）不要使用太復(fù)雜的切換動畫

花哨復(fù)雜的切換動畫對于初次使用的用戶來說可能看起來很酷，但是一旦用戶熟悉了產(chǎn)品并頻繁使用導(dǎo)航時，這些復(fù)雜的切換動畫就會變得很煩人。

這些切換動畫雖然看起來很復(fù)雜，但卻沒有為產(chǎn)品或用戶帶來任何有用的價值或信息，因此這些動畫就會變成一種負(fù)擔(dān)，讓用戶感到沮喪。

底部標(biāo)簽欄的切換動畫應(yīng)該干脆利落，可以使用簡單的微動效作為輔助，切莫太復(fù)雜。

03 最后

以上是APP底部標(biāo)簽欄需要注意的6個設(shè)計(jì)點(diǎn)，希望通過這些內(nèi)容能幫助你對Bottom Tab Bar有進(jìn)一步的理解。

慢慢來比較快，希望對你有幫助！

參考：babch.biz/bottom-tab-bar-design

在交互設(shè)計(jì)中，字體的呈現(xiàn)方式是提升信息傳遞效率的重要一環(huán)，文字信息層級的處理是否得當(dāng)，一定程度上會對用戶的視覺體驗(yàn)有著重要影響。那么在字體設(shè)計(jì)上，設(shè)計(jì)師或者相應(yīng)的業(yè)務(wù)人員應(yīng)該如何做好處理，以提升信息傳播的效率和質(zhì)量？不如來看看作者的總結(jié)吧。

文字是設(shè)計(jì)中的重要組成部分，就像我們平時看到的海報(bào)，里面各種被精心設(shè)計(jì)過的字體經(jīng)常會成為視覺焦點(diǎn)，以醒目且個性化方式傳達(dá)出內(nèi)容的精髓，最后達(dá)到的效果事半功倍。

雖然在UI設(shè)計(jì)中不需要對文字過分設(shè)計(jì)，但圖文作為主要的傳播途徑，字體的使用是否規(guī)范合理將直接影響著信息傳播的優(yōu)先級、重要程度以及用戶的接收質(zhì)量和效率。所以不管是平面設(shè)計(jì)還是UI設(shè)計(jì)，字體都是不可忽視的核心元素，做好對文字信息層級的處理，對用戶的視覺體驗(yàn)有著至關(guān)重要的作用。

互聯(lián)網(wǎng)經(jīng)過多年的發(fā)展，也積累的很多的專業(yè)字體知識，設(shè)計(jì)師應(yīng)該去了解字體的性格及特征并將其合理運(yùn)用，才能將信息更清晰地傳達(dá)給用戶。本文將圍繞著字型、字號、字距、字重等幾個屬性，針對各方面深度解析，希望能夠幫到大家。

一、字體的基本特征

1. 使用前的思考

文字是信息內(nèi)容的載體，能最直接的將信息清晰地表達(dá)出來，字體則表現(xiàn)了文字的外在特征，合理地使用這些屬性特征不僅能清晰準(zhǔn)確地傳遞信息、用于特定場景還能賦予情感表達(dá)，展現(xiàn)出獨(dú)特的魅力，例如：健身、器械類的產(chǎn)品使用的字體通常會給人一種力量、剛硬、壯實(shí)的感覺，而女性專用產(chǎn)品字體則顯的纖細(xì)、苗條。

2. 為什么要使用黑體

不同類型的字體傳達(dá)出不同的氣質(zhì)，綜合來講，字體可分為黑體、宋體、圓體、書法體這四類，平時大家看到的各種形形色色的其他字體，基本是通過這幾類延伸而來。

在UI設(shè)計(jì)中，絕大多數(shù)的文字排版用的是黑體，諸如思源黑體、阿里巴巴普惠體、蘋方（ios）、微軟雅黑（PC web）等都是標(biāo)準(zhǔn)的黑體。另外，特定場景如瓷片區(qū)、卡片、banner、專題頭圖、引導(dǎo)頁、閃屏等，對于用什么字體不會有太大的限制，在避免商用侵權(quán)的前提下符合產(chǎn)品氣質(zhì)即可。

黑體字的筆畫橫平豎直、粗細(xì)均勻且字面呈正方形，一般來說，沒有襯線的字體都可以稱作黑體。黑體結(jié)構(gòu)清晰、簡潔有力，能讓界面顯得莊重還附有現(xiàn)代感，雖然氣質(zhì)上沒有太大的個性化、但可塑性很強(qiáng)，這也是在UI設(shè)計(jì)中、黑體一直很受青睞的原因，無論是標(biāo)題、正文、提示等使用場景都可以作為首選，對老設(shè)計(jì)師能多一個選擇、新手設(shè)計(jì)師也不易犯錯。

3. iOS與Android的區(qū)別

iOS與Android是移動設(shè)備的兩大系統(tǒng)，雖然很多設(shè)計(jì)師用一稿適配兩端、遇到特殊頁面也只是單獨(dú)拎出來微調(diào)即可，但對于中、大型的互聯(lián)網(wǎng)公司則很難滿足優(yōu)質(zhì)用戶體驗(yàn)中的部分細(xì)微差別，例如：iOS的蘋方字體在Android設(shè)備中無法高度還原、預(yù)留的文字?jǐn)?shù)量上限位置無法顯示完整等，都會影響用戶體驗(yàn)。

此外，iOS和Android都有自己獨(dú)立的設(shè)計(jì)規(guī)范，大家有時間的可自行查看，本文只對字體規(guī)范作基本了解。

iOS使用的是「蘋方」字體，提供了6個字重，英文字體為「San Francisco」；Android使用的是Google聯(lián)合Adobe發(fā)布的「思源黑體」，為充分滿足設(shè)計(jì)要求，提供了7個字重，英文字體為「Roboto」。

此外，如果界面中涉及的數(shù)據(jù)較多，數(shù)字使用DIN字體也是不錯的選擇，字體外形較長，易用且耐看，很適合數(shù)據(jù)統(tǒng)計(jì)展示，不過這款字體商用的話需要收費(fèi)的。

二、字體的基本屬性

1. 字體大小

字號的大小決定信息的層次和權(quán)重，不規(guī)律的使用字號會讓頁面信息雜亂，不利于用戶閱讀。在設(shè)定字號規(guī)范時，需特別注意最小值和遞增值。

最小值決定信息的可讀性，以2倍圖為例，iOS11系統(tǒng)將最小字號規(guī)范為11pt（22px），但很多產(chǎn)品依然將最小字號設(shè)定為20px，甚至部分產(chǎn)品將18px的數(shù)字加粗運(yùn)用在標(biāo)簽中，所以最小字號的設(shè)定并沒有固定數(shù)值，原則上不影響用戶的瀏覽就行。筆者建議最小字號不要低于20px，在設(shè)計(jì)過程中，可以通過設(shè)備實(shí)時預(yù)覽，因?yàn)橥瑯拥淖痔栐诓煌沫h(huán)境、色值、背景下，其視覺效果都有所區(qū)別。

其次，遞增值決定著信息層級區(qū)分的明顯程度，遵循字號越大、遞增值越大的原則，常用字號數(shù)量控制在6種左右。iOS和Android都是采用的2倍數(shù)柵格系統(tǒng)，為了讓字號的層級區(qū)分更明顯，字號設(shè)定要避開奇數(shù)且最小遞增值不要低于4px，下面舉幾個常見的例子：

• 20、24、28、32、40、48、64…
• 20、24、30、36、42、48、64…
• 22、26、30、34、40、48、60…
• ……

規(guī)范好的字號該如何使用，還得根據(jù)界面中的實(shí)際場景來決定，如下圖：

2. 字符間距

字間距是指兩個字符之間的橫向間隔距離，在界面排版中，除了西文的字間距調(diào)整需求較大外，中文通常只保持默認(rèn)，只有少數(shù)場景才會手動調(diào)整，且沒有固定的規(guī)律，保持視覺舒適狀態(tài)即可。例如：banner、界面大標(biāo)題、重要數(shù)字（取件碼）顯示等。

3. 行高

行高是指包圍在字體之外的隱形邊框，一個字體元素的的行高等于文字上邊框+下邊框+字號的高度之和。

西文字體因高度的參差不齊，本身就能制造出視覺上的上下空間，通常行高為字號的1.2倍，而中文字體沒有上下間隙的延伸，行高則較大，一般在1.5倍左右，如果字號較小且折行較多，行高甚至能達(dá)到字號的2倍。

4. 字重

字重指的是字體的粗細(xì)，不同的字重能體現(xiàn)出不同的層級關(guān)系，給用戶的視覺感受也截然不同。

像蘋方、思源、阿里巴巴普惠這些家族字體一般都會有極細(xì)體、細(xì)體、常規(guī)體、黑體、粗體等多個字重，在UI設(shè)計(jì)中，實(shí)用的就常規(guī)體、加粗兩個字重，再通過色彩、字號使其成為對立關(guān)系，明顯的拉開文字內(nèi)容層級后，方能保持良好的瀏覽體驗(yàn)。

5. 全角與半角

這種主要針對標(biāo)點(diǎn)符號，以英文字母為標(biāo)準(zhǔn)，半角是指一個符號占用一個標(biāo)準(zhǔn)字符（英文）的位置，全角則是占用兩個字符位置。

眾所周知，中文使用都是全角、英文使用半角，并且會隨著中/英文的切換而自動改變，但有時候難免會操作失誤讓頁面中的某處信息看著怪怪的卻不明所以、另外中文信息中的時間/日期也大多會使用半角符號，所以設(shè)計(jì)師對此有一定了解的時候，在處理這些細(xì)枝末節(jié)就能做到收放自如。

三、不同場景下的屬性參考

在色彩規(guī)范中，除主/輔助色之外，設(shè)計(jì)師還會提供3~4個等級的配色，如通用的#333（標(biāo)題）、#666（正文）、#999（提示）、#ccc（占位符），這也是UI通用的文字色用色規(guī)范，不同的字號需用色規(guī)律。

如果想進(jìn)一步延展，可以增加一點(diǎn)品牌色，也可以使用#000（純黑）調(diào)整不透明度來體現(xiàn)文字色彩層級，深色模式中很常見，下面我們一起來了解幾個常見的使用場景。

1. 標(biāo)題

標(biāo)題的主要作用是讓用戶以最快的速度了解界面主要信息，需要時刻吸引用戶的注意力，例如APP中的導(dǎo)航欄、模塊標(biāo)題、內(nèi)容標(biāo)題、數(shù)據(jù)統(tǒng)計(jì)等。需要簡單明了且有沖擊力，字號一般會控制在30px以上并加粗顯示，直接使用一級色值（#333）即可。

在特殊場景下，標(biāo)題也可以使用主體色值，但一定要注意容器背景與其他信息色彩的協(xié)調(diào)，不然花里胡哨的還不如用回一級色值。

2. 正文

正文并不需要吸引用戶注意力，它主要是提供標(biāo)題的注釋或內(nèi)容的詳細(xì)說明。

當(dāng)白色背景文本內(nèi)容過多、在需要用戶仔細(xì)閱讀的情況下，一定要注意顏色不能太深，不然顯的主次不分，還有些刺眼，這里推薦26~30px字號使用二級文字（#666）色值。

3. 提示語

提示類文字使用場景就相對較多，它除了給用戶展示當(dāng)前狀態(tài)，還能給予合理的引導(dǎo)，促進(jìn)用戶進(jìn)行下一步操作。常見使用色值為三級（#999）、四級色值（#ccc），例如界面中的操作注意事項(xiàng)、表單占位符等。字號一般為24px，因使用場景不同，也會有特殊的存在，例如表單中占位符的字號會跟隨輸入后的字號統(tǒng)一。

4. 超鏈接

超鏈接在字號、色值上沒有一定的限制，但需要一個特定的輔助元素/屬性來提示用戶這是可點(diǎn)擊的。

例如APP登錄頁面，找回密碼、注冊、獲取驗(yàn)證碼等，大部分都是用主體色、圖標(biāo)（右箭頭）等方式強(qiáng)化可操作入口，而PC端網(wǎng)頁中超鏈接的表現(xiàn)方式，下劃線、藍(lán)色字體、>>這三種方式幾乎能涵蓋所有。

5. 其他

規(guī)范并非不可更改，它只能幫助設(shè)計(jì)師在大部分使用場景中減少設(shè)計(jì)出入并提高產(chǎn)出效率，但總有一些使用場景需特殊對待，字體也不例外，如以下場景：

• APP金剛區(qū)入口字體大多使用24px，一級色值（#333）；
• 底部Tab欄字體未激活使用淺色，激活后切換為一級色值（#333）或主體色；
• 重量級的提示語用紅色色值；
• 按鈕中的文字跟隨按鈕的等級權(quán)重變化；
• 深色容器標(biāo)簽的文字反白；
• ……

四、字體使用基本原則

1. 符合產(chǎn)品氣質(zhì)

雖說黑體（蘋方、思源、阿里巴巴普惠）是UI設(shè)計(jì)中的首選字體，但這也僅僅只是建立在不出錯的的情況下、滿足基本條件而選擇，如果想表達(dá)出產(chǎn)品的類型、情感、氣質(zhì)等品牌屬性，在不影響用戶識別的前提下，可選擇一款符合產(chǎn)品氣質(zhì)的字體，打造出差異化的瀏覽體驗(yàn)，對于追求完美的APP來時是一個不錯的解決方案。

例如，部分藝術(shù)、女性類的APP會選擇使用宋體，整體看起來有一種高端、時尚且優(yōu)雅的感覺。

整體界面使用特殊字體還是相對較少，為了更好的體現(xiàn)出產(chǎn)品屬性/風(fēng)格，將其融入不同的模塊及使用場景，會讓產(chǎn)品更有特色，例如banner、瓷片區(qū)、大標(biāo)題、頭圖等，對用戶的視覺吸引力能得到很大提升。

2. 使用同一家族字體

在一個APP中，堅(jiān)持使用同一個家族的字體，對標(biāo)題、正文等文字信息有一個統(tǒng)一的視覺規(guī)劃，這樣有助于建立起體系化的設(shè)計(jì)思路，避免在開發(fā)落地時存在一致性問題，減少開發(fā)與設(shè)計(jì)的出入。

筆者曾見過這樣的設(shè)計(jì)師，界面中原本用了「蘋方」字體，在一個特殊場景下，「蘋方」的粗體字重?zé)o法滿足大標(biāo)題的使用需求，于是將大標(biāo)題單獨(dú)改為「阿里巴巴普惠體」的最大字重。

從表面上看，上述的設(shè)計(jì)需求是滿足了，但稍有不慎就會成為沒有價值的藝術(shù)品，首先，單獨(dú)一處使用不同家族的字體，會影響整體視覺的一致性；其次，若程序沒有嵌入另外的字體，產(chǎn)品落地后其視覺效果毫無改觀，且更沒有必要為了某個場景的使用要單獨(dú)嵌入幾十到幾百兆的家族字體，讓應(yīng)用安裝包無故加大。在設(shè)計(jì)中，有時候在解決某個問題時，解決方案并非無可替代，加粗字體亦是如此。

另外，在可用性、實(shí)用性強(qiáng)且必要的情況下，并非不能再增加一個家族字體，例如所有標(biāo)題系列使用「阿里巴巴普惠體」、數(shù)字系列都使用「DIN」，前提是一定要形成體系化，并非某一處的使用。

3. 明確的信息層級

在同一個界面中，字體色值、字號、字重等，都是用于區(qū)分信息層級，盡量不要使用過多的層級，避免層級混亂影響信息瀏覽。

在信息層級處理方式的四個基本原則中，「對比」就是將復(fù)雜的信息通過元素的各種屬性以不同的視覺效果呈現(xiàn)，來體現(xiàn)信息節(jié)奏感，并非是為了好看而隨意給文字賦予各種屬性及樣式效果。

五、UI設(shè)計(jì)需注意的問題

1. 避頭尾的使用

避頭尾使用在文字內(nèi)容較多的折行場景中，主要處理標(biāo)點(diǎn)符號剛好出現(xiàn)在一行文字的開頭或結(jié)尾時，通過自動調(diào)整單行的字符間距、在視覺上將標(biāo)點(diǎn)符號前移或后移。

在新聞資訊類應(yīng)用的詳情頁中，避頭尾使用的較多，用以避免頭/尾存在標(biāo)點(diǎn)符號造成視覺重量不一、信息參差不齊的問題出現(xiàn)。

2. 反差體現(xiàn)層級

很多時候，為了區(qū)分信息層級，首先想到的是利用不同的字號、字重來體現(xiàn)，這當(dāng)然沒有問題，但如果結(jié)合字體的明暗關(guān)系（灰度色值等級）則效果更佳。

如下圖：標(biāo)題一級色值（#333）、正文二級色值（#666）、時間日期三級色值（#999）。

3. 備用字體

備用字體只會運(yùn)用在web頁面中，如果網(wǎng)站需要一款特殊的字體才能彰顯其獨(dú)特的氣質(zhì)、同時又擔(dān)心用戶在某些設(shè)備中因?yàn)闆]有這個字體而無法瀏覽其效果，則會另外再選擇一款相近的通用字體作為備選，以彌補(bǔ)視覺體驗(yàn)上的損失。

如果字體包不大，也可以讓開發(fā)將其放在服務(wù)器端，這樣能讓所有用戶都能看到相同的效果，省去了不少麻煩。

4. 確保可讀性

可讀性應(yīng)該是選擇字體的首要元素，雖說很多文字我們都可以從前后字義、聯(lián)想詞等角度將自己的理解補(bǔ)充完整，但完全沒有必要。

UI設(shè)計(jì)不像海報(bào)那樣融入較多的藝術(shù)成分，更需要的是內(nèi)容清晰、表意明確、高效率的傳達(dá)，任何增加用戶閱讀、理解成本的做法都應(yīng)該規(guī)避掉，例如過于變形的可愛風(fēng)格、書法手寫體等都盡量少用。

六、結(jié)語

文本內(nèi)容是UI界面中占比較多的元素之一，設(shè)計(jì)師需要對其基本屬性及使用場景有一個清晰的了解，使用的是否恰當(dāng)取決于我們對字體的選擇。雖說在UI領(lǐng)域，字體模塊類的文章比較少（更多是文字、字庫的設(shè)計(jì)），但它在設(shè)計(jì)規(guī)范中的地位是舉足輕重，選好一款字體對設(shè)計(jì)來說是錦上添花。

關(guān)于UI界面中的字體，其實(shí)沒有太多的講究，也沒必要整得花里胡哨，重點(diǎn)在于排版過重中注意信息層級的劃分以及有足夠的視覺舒適度即可。

大部分產(chǎn)品中都含有一些引導(dǎo)幫助的功能，這些功能有什么作用呢？對于設(shè)計(jì)者來說，應(yīng)該秉持怎樣的初心來設(shè)計(jì)呢？目前，引導(dǎo)幫助功能又有哪些常見的分類呢？帶著這些問題，我們一起走進(jìn)這篇文章，看看作者為我們的分享。推薦相關(guān)人員閱讀與學(xué)習(xí)。

一、用戶怎么知道此功能的使用方式？

前幾天眼睛不太舒服，去醫(yī)院做了一個檢查（視疲勞導(dǎo)致）。

因?yàn)橐呱瘫＃孕枰褂蒙绫？?，之前我記得社保結(jié)算都需要去人工窗口，我剛過去就被一個穿著紅馬褂的大媽攔住說自助機(jī)也可以用社保，要我掃她胸前掛的碼（可以快速到達(dá)電子社保二維碼界面），掃完她就開始幫我點(diǎn)擊操作。

她覺得我應(yīng)該不會操作，所以讓我看一遍，其實(shí)這個操作并不難，只是因?yàn)槲也恢雷灾鷻C(jī)上可以用，自助機(jī)周圍也沒引導(dǎo)操作流程。而且她這種方式讓很多年紀(jì)大的人和外地過來看病的覺得你是個騙子，后面好幾個人都還是去了窗口。

在B端產(chǎn)品中也有很多類似問題，用戶不知道有這個功能、也不知道這個功能怎么使用，特別是一些數(shù)據(jù)類產(chǎn)品，專業(yè)性比較強(qiáng)。產(chǎn)品、技術(shù)都認(rèn)為用戶和他們一樣都懂，實(shí)際上并不是，這個時候你需要提供一些邀請，引導(dǎo)用戶進(jìn)行使用。

邀請就是引導(dǎo)用戶進(jìn)行操作前的提醒和暗示，通常包括實(shí)時的提示信息和預(yù)期功能，以表明在當(dāng)前界面或下個界面可以做什么，這是成功的交互式界面關(guān)鍵所在。

例如：飛書-我的空間，當(dāng)鼠標(biāo)停留在可編輯區(qū)域上時，就會實(shí)時地顯示邀請（復(fù)選框），這個例子的缺點(diǎn)是鼠標(biāo)如果不處于相應(yīng)區(qū)域上，就不會顯示邀請。

另一種方案是任何時候都顯示邀請，例如：石墨文檔-我的桌面，復(fù)選框一直顯示。

二、靜態(tài)邀請

靜態(tài)邀請就是通過直接在頁面上給出交互提示，可以讓用戶隨時看到期望的界面功能。

靜態(tài)邀請主要有兩種模式：引導(dǎo)操作邀請、漫游探索邀請。

1. 引導(dǎo)操作邀請

01 步驟引導(dǎo)

例如：華為云HECS服務(wù)器產(chǎn)品就給出1、2、3操作步驟

引導(dǎo)操作會占據(jù)頁面較大的空間，同時也會吸引用戶的眼球。所以在設(shè)計(jì)時需要思考一下，你希望引導(dǎo)用戶執(zhí)行什么操作，用戶是否可以多次查看，這樣有利于設(shè)計(jì)出明晰的頁面和信息層。

02 白板引導(dǎo)

另一種引導(dǎo)操作邀請叫白板式引導(dǎo)。

意思很明確：現(xiàn)在只有一個空白頁面，需要引導(dǎo)用戶創(chuàng)建內(nèi)容。

利用空白區(qū)域“變廢為寶”，如何對該區(qū)域應(yīng)有的功能給出提示，是誘導(dǎo)用戶創(chuàng)建內(nèi)容（填補(bǔ)空白）的有效方式。

2. 漫游探索邀請

與引導(dǎo)操作邀請關(guān)系密切的是漫游探索邀請。假設(shè)你重新設(shè)計(jì)了某個頁面并添加了一組全新的功能，怎樣才能保證用戶恰當(dāng)?shù)厥褂眯马撁妫瑫r發(fā)現(xiàn)新添加的功能呢？漫游邀請是向用戶介紹新功能最好的方法。

最佳實(shí)踐：

1. 漫游功能用戶可能不想用，所以需要有可選功能，也就是可以跳過或關(guān)閉；
2. 漫游功能不是“創(chuàng)可貼”不要亂用，只有針對精心設(shè)計(jì)的界面使用才能發(fā)揮價值；
3. 設(shè)計(jì)漫游的關(guān)鍵在于保持簡單，讓它容易開始也容易停止。漫游應(yīng)該只是頁面本身的一個演示。脫離頁面的“教程”式漫游很難起到作用。

三、動態(tài)邀請

靜態(tài)邀請適合提示用戶當(dāng)前界面中包含什么功能。然而，許多調(diào)查試驗(yàn)表明，用戶經(jīng)常不會閱讀指導(dǎo)說明性的文字。而在用戶交互過程中，在他們需要的時候提供邀請則是一種不錯的方式。動態(tài)邀請就是在用戶交互過程中的某個點(diǎn)上吸引用戶，并引導(dǎo)他們繼續(xù)下一步操作。

1. 懸停邀請：在鼠標(biāo)懸停期間發(fā)出邀請

吸引用戶的一種方式是通過鼠標(biāo)懸停來顯示邀請

例如：飛書消息列表鼠標(biāo)移入后， 背景變化的同時會有一個“勾”圖標(biāo)來吸引用戶，鼠標(biāo)移入上去后提示可以點(diǎn)擊完成，點(diǎn)擊后消息移除列表。

最佳實(shí)踐

• 當(dāng)操作沒有內(nèi)容重要，而且希望界面整潔時，使用懸停邀請。
• 在實(shí)現(xiàn)懸停邀請時，可以通過改變光標(biāo)、改變背景和顯示提示條共同配合表明所邀請的操作。
• 在交互的不同階段，盡量點(diǎn)綴一些用戶熟悉的元素，通過熟悉的概念引出新概念有助于用戶快速理解新功能。最常見的元素是按鈕、鏈接、下拉箭頭和眾所周知的圖標(biāo)。
• 通過距離表明邀請操作的目標(biāo)對象。

2. 預(yù)期功能邀請：使用熟悉的事物引出新事物

唐納德·諾曼將這個術(shù)語引入到設(shè)計(jì)領(lǐng)域。最經(jīng)典的例子是門把手，門把手的預(yù)期功能是可以抓握、扭轉(zhuǎn)或按壓。屏幕元素可感知的預(yù)期功能沒有物理屬性，不過，由于習(xí)慣、術(shù)語、圖形及一致性等原因，用戶能夠在某種程度上感覺到他們可以操作這些元素。

例如：第一張圖飛書文檔sheet頁“加號”圖標(biāo)與第二張圖“三個點(diǎn)”圖標(biāo)，就是一種預(yù)期功能邀請。用戶沒觸發(fā)之前就能猜到觸發(fā)后會是什么效果。

預(yù)期功能邀請之所以有效，是因?yàn)槔萌藗円阎牧?xí)慣與認(rèn)知引入交互，從而讓用戶順利完成一連串操作。

最佳實(shí)踐

• 通過人們習(xí)以為常、司空見慣的概念來引出新的、不熟悉的交互方式。
• 使用可感知的預(yù)期功能來給出邀請?zhí)崾?例如，用向下的箭頭表示可以打開下拉菜單，而用向上的箭頭表示可以關(guān)閉菜單)
• 把邀請安排在適當(dāng)?shù)纳舷挛闹?，特別是要靠近交互的主體。

3. 推論邀請：用于交互期間

設(shè)計(jì)邀請時怎么才能猜測用戶的想法，也是一項(xiàng)重要挑戰(zhàn)。如果用戶下一步可能會執(zhí)行多種操作，而事實(shí)上又不可能準(zhǔn)確判斷用戶想法，那么面臨的困難就會比想象的大很多。

在google sketchup （ 3D）繪圖工具中，當(dāng)鼠標(biāo)點(diǎn)擊某個點(diǎn)后，進(jìn)行第二個點(diǎn)連接時，會有多種可能性，這個時候系統(tǒng)也不確定用戶會怎樣連接，但會給出對應(yīng)的提示，比如：端點(diǎn)、中點(diǎn)、背面、側(cè)面等點(diǎn)位來輔助用戶進(jìn)行連接。

例如：這種工作流場景個人覺得也算是一種，點(diǎn)擊“加號”右側(cè)會滑出面板，給出你可以添加的動作。

這種在交互期間以可見方式向用戶表明系統(tǒng)推斷出的用戶想法被稱為推論邀請。

4. 更多內(nèi)容邀請：用于邀請用戶查看更多內(nèi)容

圖片類型的更多邀請，例如：站酷相關(guān)推薦

文字更多邀請，例如：QQ郵箱右側(cè)最近聯(lián)系人

5. 邀請的優(yōu)點(diǎn)

精心設(shè)計(jì)的應(yīng)用能夠通過邀請?bào)w現(xiàn)出各自的細(xì)微差別，無論是靜態(tài)還是動態(tài)，都是引導(dǎo)用戶順利進(jìn)入下一個交互層次的有效方法。

謝謝觀看！

在視頻播放器中，合理的手勢交互設(shè)計(jì)可以幫助用戶提升操作上的便捷性，從而實(shí)現(xiàn)更快捷的觸達(dá)。那么如果想在已有的手勢交互上實(shí)現(xiàn)設(shè)計(jì)升級，產(chǎn)品或設(shè)計(jì)一側(cè)可以怎么做？本篇文章里，作者針對手勢交互優(yōu)化一事進(jìn)行了解讀，一起來看。

一、前言

視頻播放器中承載著極其豐富的內(nèi)容畫面和播控功能，尤其是在寸土寸金的移動端視頻播放器中，為使內(nèi)容更沉浸消費(fèi)，需盡可能克制界面中的功能元素/入口直接外露?；诖朔N場景下，合理的手勢設(shè)計(jì)不但可為界面“減負(fù)”，還可幫助用戶更快捷觸達(dá)功能、提升操控便捷性。

視頻場景中目前已有部分的常規(guī)單向手勢已被用戶廣泛接受并形成習(xí)慣認(rèn)知，如「單擊 →暫?！?、「雙擊→點(diǎn)贊」、「長按→快進(jìn)」、「橫滑→導(dǎo)航」、「縱滑→切視頻」、「雙指捏合→縮放視窗」等通用手勢。

那么如何在保留用戶對于常規(guī)通用手勢認(rèn)知的基礎(chǔ)上，進(jìn)一步對視頻場景中的手勢交互進(jìn)行擴(kuò)容升級？這也是我們接下來在手勢進(jìn)階交互上的重點(diǎn)探索方向。

本次針對百度APP中的視頻播放器場景，為提升手勢操控效率，我們試圖將常規(guī)的基礎(chǔ)通用手勢進(jìn)行打散重組、并結(jié)合實(shí)踐案例梳理出「組合手勢」設(shè)計(jì)模型，以探索如何在視頻場景中構(gòu)建便捷高效的進(jìn)階手勢體驗(yàn)設(shè)計(jì)。

二、什么是「組合手勢」

「組合手勢」是基于常規(guī)手勢的組合擴(kuò)展，其通常由兩種或兩種以上的常規(guī)基礎(chǔ)手勢所構(gòu)成，若組合方式及使用場景得當(dāng)，可助力用戶更便捷的觸達(dá)功能。

以前述的視頻場景常規(guī)手勢為例，其觸發(fā)機(jī)制一般可分為兩個階段：step1交互信號→step2執(zhí)行任務(wù)，即用戶通過某一基礎(chǔ)手勢發(fā)出交互信號，系統(tǒng)收到信號確認(rèn)后便可立即執(zhí)行任務(wù)，但整個過程是線性的，手勢擴(kuò)展性十分有限且難以滿足視頻場景對于手勢擴(kuò)容的訴求。

于是我們在現(xiàn)有常規(guī)手勢兩階段觸發(fā)機(jī)制的基礎(chǔ)上，嘗試引入「意圖識別」環(huán)節(jié)，并梳理出「組合手勢」的設(shè)計(jì)模型，以探索不同基礎(chǔ)手勢相互組合后的擴(kuò)展可行性。

「組合手勢」觸發(fā)一般可分為三個階段：step1交互信號→step2意圖識別→step3執(zhí)行任務(wù)，前兩階段均可由對應(yīng)的基礎(chǔ)分支手勢構(gòu)成并進(jìn)行組合搭配、以尋求最高效的手勢組合觸發(fā)路徑。

由于「組合手勢」并不像常規(guī)手勢那樣早已被系統(tǒng)定義為可供直接調(diào)用的接口，因此，其差異化創(chuàng)新具有較大設(shè)計(jì)靈活度，尤其需根據(jù)具體的使用場景進(jìn)行綜合考量。

三、「長按組合手勢」激活快捷菜單

1. 項(xiàng)目背景

百度APP視頻場景早期的播控功能較少，如“視頻下載”等個別特色功能入口一般都融合于基礎(chǔ)菜單之中。

隨著后續(xù)視頻場景的功能建設(shè)日漸完善，我們便在基礎(chǔ)菜單面板中拓展了一行視頻菜單，專門用于承載視頻場景特有的播控功能。但當(dāng)前播控功能已達(dá)10余項(xiàng)，菜單面板彈出后還需左滑才可露出后面的功能入口，因此也常收到用戶反饋找不到常用功能、菜單面板功能排布無章且觸發(fā)成本高。

2. 競品調(diào)研及選型

通過對競品進(jìn)行調(diào)研，我們發(fā)現(xiàn)競品均有使用長按手勢作為切入口以觸發(fā)相關(guān)播控功能、并歸納出“視頻播控觸發(fā)”目前主流的三種長按交互選型， 分別為：長按觸發(fā)獨(dú)立播控面板、長按觸發(fā)浮層播控選項(xiàng)、長按觸發(fā)特定播控功能。

• 選型A「長按觸發(fā)獨(dú)立播控面板」：通過長按手勢可激活從屏幕底部彈出的獨(dú)立播控面板，此方案擴(kuò)展性較強(qiáng)，但對視頻沉浸觀感體驗(yàn)有一定的打斷感；
• 選型B「長按觸發(fā)浮層播控選項(xiàng)」：通過長按手勢可觸發(fā)置于視窗上層的浮層選項(xiàng)入口，一定程度上可延續(xù)視頻觀看的沉浸體驗(yàn)，但浮層擴(kuò)展性有限；
• 選型C「長按觸發(fā)特定播控功能」：通過長按手勢觸發(fā)特定的某個播控功能（如長按“快進(jìn)”），一定程度上可滿足此功能的重度用戶，但對于長按手勢的使用效率較低。

3. 設(shè)計(jì)方案

1）長按手勢交互擴(kuò)容

針對目前視頻播控菜單存在的問題，經(jīng)過和業(yè)務(wù)對上述三種長按交互選型方案進(jìn)行綜合考量，最終決定聚焦于以方案“選型B”的「長按觸發(fā)浮層播控選項(xiàng)」作為設(shè)計(jì)切入點(diǎn)。我們意圖將部分高頻播控功能從基礎(chǔ)菜單中拿出進(jìn)行前置，并探索一套更便捷的觸發(fā)機(jī)制，以此對視頻場景中的播控菜單進(jìn)行設(shè)計(jì)升級。

但隨之而來的難點(diǎn)是我們目前播放器中的長按手勢已被“快進(jìn)”功能占據(jù)，用戶對此功能的使用頻率高、并已形成較深的操控認(rèn)知，若直接下線“快進(jìn)”功能則會對用戶使用習(xí)慣產(chǎn)生較大影響，尤其是視頻場景的重度用戶。

那么如何在兼容用戶已有長按操作習(xí)慣的基礎(chǔ)上再拓展“快捷菜單”呢？是否有可能將“快進(jìn)”和“快捷菜單”進(jìn)行融合？這也是本次項(xiàng)目對于便捷手勢體驗(yàn)的重要設(shè)計(jì)探索點(diǎn)。

基于此，我們決定嘗試使用「組合手勢」設(shè)計(jì)模型來對視頻播放器中的長按手勢進(jìn)行重新定義，通過「長按+滑選」的機(jī)制觸發(fā)快捷菜單功能項(xiàng)，以縮短視頻常用功能路徑。對應(yīng)到設(shè)計(jì)模型的三個階段分別為：

• step1：以“長按手勢”創(chuàng)建一個新模式，即發(fā)出交互信號并喚出浮層菜單；
• step2：若用戶未松開手指，則系統(tǒng)默認(rèn)開始識別用戶意圖，是否有以“拖拽手勢”滑選至目標(biāo)功能項(xiàng)以選擇功能；
• step3：用戶滑選錨定至目標(biāo)功能后，松手釋放即可完成最后的功能執(zhí)行確認(rèn)。

• 「長按+向上滑選」快捷觸發(fā)對應(yīng)功能項(xiàng)；
• 「長按+向下滑選」快捷觸發(fā)“快進(jìn)”（一定程度上兼容老用戶對于此功能的使用習(xí)慣）。

2）容錯性兼容

在設(shè)定「長按+滑選」組合手勢的同時，考慮到兼容主流的長按習(xí)慣、以及對于滑選手勢需要有一定的適應(yīng)過程，我們同時也支持點(diǎn)選的操作模式，即用戶長按后若未產(chǎn)生滑選行為便松手，則松手后依然可通過點(diǎn)選的方式觸發(fā)對應(yīng)播控功能項(xiàng)。

3）易用性打磨

差異化的創(chuàng)新設(shè)計(jì)形式在前期總會面臨質(zhì)疑和挑戰(zhàn)，本次項(xiàng)目也不例外。我們擔(dān)心用戶能否接受并認(rèn)知「長按+滑選」組合手勢的操作形式，于是在DEMO開發(fā)完成后便進(jìn)行了一次小范圍內(nèi)的定性可用性測試，以預(yù)期在上線前可先收集一波體驗(yàn)問題進(jìn)行快速打磨優(yōu)化。

我們根據(jù)測試目標(biāo)、用戶類別、測試前序準(zhǔn)備及測試步驟等環(huán)節(jié)提前擬好必要的測試腳本，并邀請了10+名不同年齡段的目標(biāo)用戶進(jìn)行訪談測試。

測試訪談的過程中，被測用戶在進(jìn)行1至2次嘗試操作之后，均可掌握如何使用「長按+滑選」的組合手勢，這也為我們增添了不少信心。

同時，我們通過觀察用戶操作行為及用戶主動反饋，發(fā)現(xiàn)仍有部分易用性細(xì)節(jié)可進(jìn)一步打磨優(yōu)化。

① 擴(kuò)展觸發(fā)熱區(qū)

考慮到單手握持手機(jī)的使用場景，可盡可能擴(kuò)大定義長按手勢的觸發(fā)熱區(qū)，屏幕中除頂/底bar框架區(qū)以及本身就自帶長按事件的按鈕入口之外，其它大面積區(qū)域熱區(qū)均可支持長按觸發(fā)快捷菜單，以降低觸發(fā)難度、提升易用性。

② 支持跟手觸發(fā)

長按后浮出的快捷功能項(xiàng)，其浮出位置支持跟隨手指的縱向觸發(fā)位置而浮出，可減少手指在屏幕上的位移距離、操控更便捷。

③ 實(shí)時提示及響應(yīng)反饋

靈活判斷當(dāng)前手勢觸控狀態(tài)（如滑入選擇 / 松手觸發(fā)），在界面中即時給出相對應(yīng)的引導(dǎo)提示或振感反饋，以幫助用戶快速適應(yīng)新的手勢觸發(fā)機(jī)制。

4. 方案上線及驗(yàn)證

以AB實(shí)驗(yàn)對本次設(shè)計(jì)方案進(jìn)行定量測試驗(yàn)證：

• 「對照組」效果：長按觸發(fā)“快進(jìn)”（各播控功能入口仍歸置于基礎(chǔ)菜單面板之中）；
• 「實(shí)驗(yàn)組」效果：長按觸發(fā)“快捷菜單”選項(xiàng)（支持滑選和點(diǎn)選模式）。

小流量實(shí)驗(yàn)上線后，經(jīng)過近半個月的觀察，大盤指標(biāo)穩(wěn)定、播放完成率等滿意度指標(biāo)穩(wěn)步提升。

「實(shí)驗(yàn)組」長按快捷菜單中的功能使用率相對「對照組」均有大幅提升，說明用戶對部分高頻功能的確有很強(qiáng)的快捷觸發(fā)訴求。

「實(shí)驗(yàn)組」的“快進(jìn)”雖多了一步觸發(fā)步長，實(shí)驗(yàn)前期“快進(jìn)”使用率不及「對照組」，但隨著用戶對于「長按+滑選」手勢整體的使用占比持續(xù)走高，通過滑選觸發(fā)“快進(jìn)”的操作習(xí)慣也快速被培養(yǎng)起來，對于用戶來說，長按快捷菜單帶來的整體收益是大于折損的。

5. 二期擴(kuò)展方案

隨著長按快捷菜單的上線推全，長按手勢的滲透率也持續(xù)走高，用戶逐漸對視頻場景更多的播控功能有了長按觸發(fā)的訴求，于是我們對長按菜單進(jìn)行了二期的設(shè)計(jì)升級，在長按浮層最右側(cè)新增“更多”快捷入口以承接視頻場景所有的播控功能，用戶通過長按后的可選播控項(xiàng)增多，播控功能整體的使用量得到進(jìn)一步提升。

四、「組合手勢」拓展探索

手勢交互是用戶在現(xiàn)實(shí)世界行為的映射，無論是基礎(chǔ)手勢還是組合類高級手勢，都須符合用戶認(rèn)知習(xí)慣、并融入具體的使用場景中進(jìn)行設(shè)計(jì)。

以「組合手勢」設(shè)計(jì)模型為指導(dǎo)基礎(chǔ)、并結(jié)合具體的項(xiàng)目實(shí)踐，我們進(jìn)一步對視頻播放器中更多功能場景進(jìn)行了便捷手勢的設(shè)計(jì)擴(kuò)容探索。

1. 「右滑返回手勢」激活“小窗播放”

“小窗播放”旨在退出當(dāng)前視頻落地頁、并可將當(dāng)前視頻切換成以懸浮視窗的形式進(jìn)行延續(xù)消費(fèi)。

基于用戶的此種操控意圖，我們以“右滑返回手勢”發(fā)出交互信號而觸發(fā)浮出小窗入口，隨后系統(tǒng)根據(jù)用戶“縱向拖拽手勢”的行為來判斷其是否有激活小窗的意圖，若有短距上滑拖拽行為，松手釋放即可快捷激活視頻小窗，以提升觀看體驗(yàn)的連續(xù)性。

2. 「雙指手勢」激活“滿屏播放”

“雙指拖拽手勢”可拖拽并清屏視窗畫面，以此手勢發(fā)出交互信號，若在“雙指拖拽手勢”基礎(chǔ)上有識別到“雙指擴(kuò)張手勢”行為，則松手釋放即可快捷激活“滿屏播放”，以滿足更沉浸視頻瀏覽體驗(yàn)。

五、結(jié)語

便捷手勢的設(shè)計(jì)出發(fā)點(diǎn)是為提升操控效率、縮減功能觸發(fā)路徑，從而使視頻內(nèi)容更沉浸消費(fèi)。希望本次基于視頻播放器場景的手勢體驗(yàn)設(shè)計(jì)實(shí)踐能給大家?guī)韼椭蛦l(fā)，后續(xù)我們也將持續(xù)深耕視頻領(lǐng)域、并進(jìn)一步探索更貼合用戶使用場景的手勢交互體驗(yàn)。

在日常場景中，畫面平衡是潛在的一個重要影響因素，合理且有吸引力的視覺平衡設(shè)計(jì)，可以讓用戶更加舒心地接受并停留在使用頁面或者相應(yīng)場景中。那么，視覺平衡究竟應(yīng)該如何做好？本篇文章里，作者針對視覺平衡這件事兒進(jìn)行了分析總結(jié)，一起來看一下。

畫面平衡是一個很基本的設(shè)計(jì)理念，但很多朋友在平時的作品中容易忽視這個點(diǎn)。彩云在星球中幫不少朋友看過作品集，發(fā)現(xiàn)最多的問題之一就是畫面平衡沒做好，我覺得只要把這個基本問題解決了，作品就能提升一個檔次。

用戶本能地會對不平衡的設(shè)計(jì)感到厭煩，如何在畫面中創(chuàng)造一個有吸引力的平衡？是本篇文章要分享的內(nèi)容。

Illustration: Outcrowd

平衡是一個作品中最重要的元素之一。平衡中的對稱關(guān)系能夠創(chuàng)造平衡與和諧，這種平衡狀態(tài)直觀上能夠讓用戶感到舒適。

人體是垂直對稱的，我們的視覺接收也與之相對應(yīng)。我們喜歡物體在垂直軸上保持平衡，直覺上總是傾向于平衡一種力量與另一種力量。

Illustration: Outcrowd

在設(shè)計(jì)環(huán)境中，平衡是基于元素的視覺重量，而視覺重量是用戶對圖像的注意力范圍。如果畫面是平衡的，用戶會下意識地感到舒適。畫面平衡被認(rèn)為是其元素在視覺上的比例安排。

如何讓一個頁面看起來平衡？

一、對稱（靜態(tài)）平衡

最常見的平衡例子就是使用對稱。

在潛意識層面上，對稱的視覺能讓人愉悅，能讓畫面看起來和諧有條理。對稱的平衡是通過在水平或垂直的中軸兩側(cè)均勻放置元素來創(chuàng)造的。也就是說，畫面中間假想線的兩邊實(shí)際上是彼此的鏡像。有些人認(rèn)為對稱的平衡是無聊和可預(yù)測的，但它經(jīng)受住了時間的考驗(yàn)，到現(xiàn)在仍然是在頁面上創(chuàng)造舒適和穩(wěn)健感覺的最好方法之一。

Illustration: Outcrowd

二、不對稱（動態(tài)）平衡

兩側(cè)重量不相同的元素構(gòu)成具有不對稱平衡。

動態(tài)平衡通常會比靜態(tài)平衡更有設(shè)計(jì)感，讓畫面不至于呆板。在缺乏平衡的情況下，我們的目光會條件反射性地開始尋找平衡點(diǎn)，這是一個很好的機(jī)會，可以將注意力吸引到頁面上可能還沒被注意到的部分。頁面重點(diǎn)就應(yīng)該放在這里——抓住用戶的注意力，就像產(chǎn)品的生命線一樣。

Landing page — Asian Cuisine

比如一般這樣去“配重”的元素會是一個按鈕或者標(biāo)題。

重要信息（或者是行動按鈕）就是我們需要去配重的價值元素。

不對稱的現(xiàn)象越嚴(yán)重，用戶就越想找出其中的原因（檢查配重）。人們本能地比平時更仔細(xì)地研究這樣的畫面。然而，這里需要注意分寸，過于古怪的構(gòu)圖并不總是能被很好的感知。

三、徑向平衡

Illustration: Outcrowd

平衡中的另一種類型，特點(diǎn)是視覺元素從一個共同的中心點(diǎn)放射出來。徑向平衡在設(shè)計(jì)中不常用。它的優(yōu)點(diǎn)是，注意力很容易找到并保持一個焦點(diǎn)——恰好就在它的中心，這通常是構(gòu)圖中最引人注目的部分。

四、馬賽克平衡

這是一種平衡中的混亂，就像 Jackson Pollock的畫作一樣。這樣的組成沒有突出的焦點(diǎn)，所有的元素都有同樣的視覺重量。沒有層次，乍一看，畫面就像視覺噪音，但所有元素又相互匹配，形成一個連貫的整體。

（彩云注：這是一種比較高階的設(shè)計(jì)平衡處理手法，用的好可以讓畫面非常具有設(shè)計(jì)感，但把握不好的話，就會非常凌亂。所以，我們平時能看到很多大師的作品看似一些簡單圖形的使用，但就是好看，輪到自己設(shè)計(jì)的時候就會發(fā)現(xiàn)，越簡單的設(shè)計(jì)似乎越難設(shè)計(jì)好。）

Illustration: Outcrowd

五、視覺平衡的秘密？

當(dāng)談到構(gòu)圖中的重量平衡時，他們經(jīng)常將其與物理世界中的重量進(jìn)行比較：重力、杠桿、重量和支點(diǎn)。我們的大腦和眼睛感知平衡的方式非常類似于力學(xué)定律。我們很容易把一幅畫想象成一個在某一點(diǎn)上平衡的平面，就像一個天平。如果我們在圖像的邊緣添加一個元素，它就會失去平衡，有必要修復(fù)它。元素是否是一組色調(diào)、顏色還是點(diǎn)并不重要，目標(biāo)是找到圖像的視覺“重心”，即圖像的重心。

不幸的是，沒有精確的方法來確定一個物體的視覺質(zhì)量。一般來說，設(shè)計(jì)師依賴于他們的直覺。不過，下面這些有用的觀察可能會有所幫助：

1）大小

大的物體總是更重。

2）形狀

不規(guī)則形狀比規(guī)則形狀的元素輕。

3）顏色

暖色比冷色重。

4）色調(diào)

深色物體比淺色物體重。

5）圖案

帶有圖案的元素顯得更重。

6）3D

帶有紋理貼圖的元素顯得更重。

7）位置

物體離中心越遠(yuǎn)，其視覺重量越大。

8）方向

垂直元素比水平元素更重。

9）密度

許多小元素可以抵消一個大元素。

10）內(nèi)部復(fù)雜性

物體內(nèi)部越復(fù)雜，視覺重量更大。

11）填充空間關(guān)系

正形空間比負(fù)形空間更重。

12）對重量的感知

照片中的啞鈴看起來會比一只鋼筆更重。

六、總結(jié)

當(dāng)使用對稱時，作品看起來可以更加的專業(yè)和有科學(xué)性。其中，靜態(tài)對稱的作品顯得更加有專業(yè)精神和嚴(yán)肅的；而動態(tài)對稱的設(shè)計(jì)方法則能吸引用戶的興趣，表達(dá)出個性和創(chuàng)造力，能讓用戶集中注意力。

在界面設(shè)計(jì)中，好看且和諧的配圖會讓用戶潛意識里更容易接受、或者更愿意停留于當(dāng)前頁面，那么，如何才能把配圖做好，讓界面看起來更加高級和耐看？本篇文章里，作者總結(jié)了10個優(yōu)化UI配圖的小方法，一起來看一下。

“配圖用的好，作品差不了”，UI中配圖的好壞直接影響到界面的品質(zhì)感。它非常重要但卻經(jīng)常容易被忽視，要想把配圖做好其實(shí)也是有規(guī)律可循的，今天的文章就將總結(jié)配圖使用的10個優(yōu)秀方法，相信看完一定會有所收獲。之前我也寫過另一篇如何選好配圖的文章《如何選到設(shè)計(jì)感強(qiáng)的配圖，我總結(jié)了這7個實(shí)用方法》，同時也分享了很多超高質(zhì)量的圖片素材資源和網(wǎng)站，千萬別錯過。

在欣賞了Behance上數(shù)百個高質(zhì)量的項(xiàng)目和眾多Dribbble優(yōu)質(zhì)作品后，我總結(jié)出了一套可以將圖片與UI結(jié)合提升設(shè)計(jì)感的方法，可以讓你的作品立即看起來更加專業(yè)。

本文的靈感來源于我剛開始做UI時所遇到的困難。和許多其他設(shè)計(jì)師一樣，當(dāng)我在Dribbble和Behance上瀏覽別人的作品獲得靈感時，面對這些海量作品時常會感到迷失和不知所措。就像透過萬花筒看到各種花哨的圖案一樣，當(dāng)把萬花筒挪開的時候這些圖案就消失了，幸福的感覺是短暫的。當(dāng)我自己開始設(shè)計(jì)作品時，我仍然不知道該怎么做。

隨著時間的推移，我意識到我并沒有從日常的作品欣賞和搜集中思考和學(xué)習(xí)，就只是漫無目的地欣賞了其他設(shè)計(jì)師的作品。

漸漸地我發(fā)現(xiàn)了一種欣賞其他設(shè)計(jì)師作品的好方法，我會有意識地去總結(jié)記錄下他們使用的想法和技巧，然后應(yīng)用到我的日常工作。在本文中，我很想分享一些其他設(shè)計(jì)師用來處理配圖的方法，這些方法可以使作品看起來更加專業(yè)。

一、使用圖片作為背景

（彩云說：這里的圖片選擇要突出核心內(nèi)容且一定要高質(zhì)量，不要選擇雜亂無章或與主題無關(guān)的低質(zhì)量圖片。）

二、將圖片于背景進(jìn)行融合

（彩云說：結(jié)合頁面表達(dá)需要，選擇合適的配圖并做融合或出界的設(shè)計(jì)，會讓畫面極具吸引力和強(qiáng)烈的設(shè)計(jì)感。）

三、將高質(zhì)量的圖片緊密的放在一起，不留任何間距

（彩云注：當(dāng)畫面主要以高質(zhì)量圖片吸引用戶注意時，盡可能的利用更大展示面積，這樣會顯得更加高級和有視覺沖擊力。）

四、在圖片下方添加色塊

（彩云注：這里的色塊要注意跟圖片的主色調(diào)保持相近，可以直接吸圖片上的顏色然后找找鄰近色就好了，色環(huán)上30°區(qū)間內(nèi)的顏色就比較和諧。）

五、在圖片下方/上方增加圖案或形狀

（彩云注：這里的形狀建議不要太過于復(fù)雜，用一些基本圖形就可以，比如圓點(diǎn)、方塊矩形之類的，增強(qiáng)畫面的形式感。）

六、在圖片下方或上方增加文字、圖案或不規(guī)則形狀

（彩云注：這里的文字、圖案或不規(guī)則形狀跟上面的技巧類似，都是起到裝飾的作用，但文字的話有時候還要注意識別性，比如文字比較緊湊的時候。圖案或形狀更多的是起到視覺引導(dǎo)的作用。）

七、將圖片剪切到文字或形狀中

（彩云注：這個很好理解，就是以文字或形狀作為遮罩，增加畫面的設(shè)計(jì)感，文字盡量選擇粗體。）

八、在圖片周圍增加一個非常窄的邊距

（彩云注：這個技巧可能跟第3條有些沖突，其實(shí)這2個方法都是可以的，要根據(jù)頁面具體的排版情況靈活使用。）

八、在圖片上增加顏色層

（彩云注：這個技巧也比較容易理解，一般會選擇飽和度較高的顏色應(yīng)用在充滿活力的頁面上，增加畫面的沖擊力。）

九、在彩色疊加到圖片中的一部分上

（彩云注：這個技巧跟上面的有些類似，只不過是以小面積疊加的形式，顏色一般選擇品牌色或主題色，與背景盡量有較大反差會更加容易出彩。）

十、將圖片剪切成其他形狀

（彩云注：這個方法有一點(diǎn)需要注意的就是剪切的形狀不要過于復(fù)雜，一般用基礎(chǔ)圖形就好。）

以上，就是我總結(jié)的一些可以用來操作UI圖片的實(shí)用方法，這些方法可以使得作品變得更加有視覺感也更加專業(yè)。

為我投票