編輯導(dǎo)語(yǔ)：在做UI設(shè)計(jì)時(shí)，定義并統(tǒng)一顏色規(guī)范對(duì)產(chǎn)品設(shè)計(jì)和團(tuán)隊(duì)整體推進(jìn)具有重要作用，本篇文章通過(guò)一個(gè)國(guó)外大廠真實(shí)的顏色組件升級(jí)案例為我們分享了統(tǒng)一顏色規(guī)范的好方法，一起來(lái)看。
Hi，我是彩云。咱們平時(shí)在做UI組件庫(kù)的時(shí)候，會(huì)遇到一個(gè)問(wèn)題，定義了很多顏色但在團(tuán)隊(duì)合作的時(shí)候，卻依然還是會(huì)根據(jù)每個(gè)設(shè)計(jì)師自己的喜好來(lái)配色，很難將顏色規(guī)范很好的統(tǒng)一起來(lái)。這其中有一個(gè)很?chē)?yán)重的問(wèn)題就是對(duì)于顏色的命名和管理不夠清晰，那么今天這篇文章通過(guò)一個(gè)國(guó)外大廠真實(shí)的顏色組件升級(jí)案例，希望能幫你解決這個(gè)難題。
我們花了幾個(gè)月的時(shí)間改進(jìn)了設(shè)計(jì)系統(tǒng) Cobalt 中顏色的處理方式。顏色是 UI 的基本元素：它們構(gòu)成視覺(jué)語(yǔ)言，幫助定義品牌，并被開(kāi)發(fā)和設(shè)計(jì)師每天用在產(chǎn)品設(shè)計(jì)中。
但如果我們?cè)谑褂妙伾蠜](méi)有明確的指導(dǎo)原則，如顏色被團(tuán)隊(duì)中的設(shè)計(jì)師按喜好使用時(shí)，將會(huì)導(dǎo)致產(chǎn)品看起來(lái)非?；靵y。
我們APP中的不一致例子
接下來(lái)我會(huì)告訴你，我們是如何做好顏色規(guī)范以及在整個(gè)項(xiàng)目中面臨的挑戰(zhàn)，正如你將看到的，這個(gè)項(xiàng)目并不像看上去那么簡(jiǎn)單：
如何通過(guò) Getaround 在設(shè)計(jì)和技術(shù)方面管理顏色概述這個(gè)系統(tǒng)的局限性，并說(shuō)明我們?nèi)绾胃倪M(jìn)它什么是語(yǔ)義顏色我們是如何實(shí)現(xiàn)它的，以及它帶來(lái)的優(yōu)勢(shì)！
和許多設(shè)計(jì)團(tuán)隊(duì)一樣，我們使用 Figma 作為我們的主要設(shè)計(jì)工具。我們的顏色被放在“基礎(chǔ)”庫(kù)中，可以在其中找到我們?cè)诋a(chǎn)品中使用的所有常見(jiàn)樣式，例如字體樣式、顏色、圖標(biāo)等。這個(gè)庫(kù)提供了我們每天使用的專(zhuān)用系統(tǒng)庫(kù)（iOS、Android、Web、電子郵件）。顏色名稱(chēng)過(guò)去是基于它們的外觀。例如：紫色顏色是我們的主要顏色，而石墨色是基本文本的常規(guī)顏色。
在我們的APP中，曾經(jīng)會(huì)用相同的系統(tǒng)來(lái)管理顏色。此外，還有一些語(yǔ)義顏色，但僅限于 iOS，開(kāi)發(fā)用的也不多。
在使用這個(gè)系統(tǒng)時(shí)，團(tuán)隊(duì)反復(fù)面臨同樣的問(wèn)題：如何確保從一位設(shè)計(jì)師到另一位設(shè)計(jì)師以相同的方式使用顏色？如果沒(méi)有適當(dāng)?shù)闹笇?dǎo)原則，我們?nèi)绾未_保開(kāi)發(fā)很好的還原？如果明天我們必須用全新的配色方案來(lái)改造我們的品牌，要怎么快速統(tǒng)一？讓我們?cè)囍页鑫覀兪侨绾蜗萑脒@種境地的？
所有設(shè)計(jì)師都使用相同的色板，但自 2019 年 Getaround 品牌重塑以來(lái)，除了引入不一致之外，沒(méi)有明確關(guān)于如何使用它們的規(guī)范，所以設(shè)計(jì)師在選擇顏色時(shí)迷失了方向。然后他們將開(kāi)始建立自己的參考資料，每個(gè)設(shè)計(jì)師都有不同的配色想法。
例如：設(shè)計(jì)師應(yīng)該在所有這些灰色陰影中為次級(jí)文本選擇哪種灰色？顏色命名在這里不是很有幫助
以前品牌的一些舊顏色仍在使用（按鈕上的藍(lán)色陰影，標(biāo)題……）。到現(xiàn)在也沒(méi)有真正的行動(dòng)計(jì)劃來(lái)迭代它們。
舊驅(qū)動(dòng)器品牌
在 2021 年初，我們有機(jī)會(huì)為我們的 iOS 和 Android APP來(lái)制定長(zhǎng)期的 UI 規(guī)劃。我們問(wèn)自己“5年后我們的APP會(huì)是什么樣的？”。我們會(huì)回顧， Getaround 品牌是如何成為我們視覺(jué)方法中心的。
以上是我們品牌和設(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)：
我們?nèi)绾未_保每個(gè)設(shè)計(jì)師都可以依賴(lài)易于理解和使用色彩系統(tǒng)？擁有一個(gè)簡(jiǎn)單系統(tǒng)將加快使用速度。
我們?nèi)绾未_保從一開(kāi)始就設(shè)計(jì)出易于使用的顏色？
我們?nèi)绾尾拍苁瓜到y(tǒng)易于維護(hù)并符合現(xiàn)在和未來(lái)的行業(yè)標(biāo)準(zhǔn)（例如：暗模式）
在我們的探索階段，在 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è)深色版本？
我們開(kāi)始與開(kāi)發(fā)討論這個(gè)問(wèn)題，以了解他們有什么解決方案來(lái)處理這些問(wèn)題。語(yǔ)義顏色的概念很快就被開(kāi)發(fā)人員提出來(lái)，因?yàn)樗麄冎啦⑶液芎玫厥褂昧诉@個(gè)概念。但對(duì)于設(shè)計(jì)師來(lái)說(shuō)，又要如何準(zhǔn)確理解呢？
語(yǔ)義指的是根據(jù)顏色的使用方式而不是色調(diào)來(lái)命名顏色的方法。
例如，你可以將顏色命名為“成功”或“積極”，因?yàn)樗傅氖呛x，而不是“綠色”或“翡翠綠”。甚至可以根據(jù)顏色在屏幕上的應(yīng)用方式來(lái)命名顏色，例如背景顏色、按鈕背景顏色、文本顏色、圖標(biāo)顏色等……
語(yǔ)義顏色并不新鮮，越來(lái)越多的產(chǎn)品開(kāi)始采用這種方式來(lái)定義顏色。我們可以從下面一些大廠的顏色規(guī)范來(lái)學(xué)習(xí)google
顯然，這種顏色系統(tǒng)有很多優(yōu)點(diǎn)。因此，現(xiàn)在讓我解釋一下我們?nèi)绾卧趯?shí)踐中將這個(gè)概念應(yīng)用到我們的產(chǎn)品中。
我們的新顏色系統(tǒng)由兩部分組成：
基礎(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)色板
語(yǔ)義顏色建立在用作參考的基礎(chǔ)調(diào)色板之上。正如我之前解釋的，命名不再是指顏色的“外觀”（洋紅色、棕色、綠色……），而是指UI 元素它們被應(yīng)用于（文本、圖標(biāo)、按鈕、背景……）以及該元素的狀態(tài)（活動(dòng)、非活動(dòng)、成功……）。請(qǐng)參閱此處的命名法和一些示例：
語(yǔ)義顏色結(jié)構(gòu)和示例這意味著來(lái)自基礎(chǔ)調(diào)色板的顏色可以用于多種語(yǔ)義顏色：
這就是我們根據(jù)這個(gè)新原則重新調(diào)整顏色命名的方式：
我們通過(guò)設(shè)計(jì)師和開(kāi)發(fā)進(jìn)行了內(nèi)部用戶(hù)測(cè)試，以確定命名語(yǔ)義顏色的最佳方式。我們嘗試了很多不同的命名方法，發(fā)現(xiàn)過(guò)于詳細(xì)的命名系統(tǒng)對(duì)于我們的團(tuán)隊(duì)和產(chǎn)品的規(guī)模來(lái)說(shuō)維護(hù)和使用太復(fù)雜了。我們決定做一些簡(jiǎn)單的維護(hù)，同時(shí)在命名方面有足夠的延展性。
語(yǔ)義顏色側(cè)重于顏色的用途。它消除了設(shè)計(jì)師和開(kāi)發(fā)對(duì)使用什么顏色的盲目猜測(cè)，因?yàn)橐曈X(jué)語(yǔ)言直接傳達(dá)了設(shè)計(jì)決策。
例如：在這里，顏色命名使設(shè)計(jì)師更容易做出正確的選擇。在我們的原則中， *Accent* state 用于交互元素。
語(yǔ)義顏色可以適應(yīng)不同的主題。語(yǔ)義顏色的名稱(chēng)始終相同，但它的外觀可能會(huì)根據(jù)所選模式而改變。例如，語(yǔ)義顏色“主背景”可以指淺模式下的“白色”和深色模式下的“黑色 500”。根據(jù)用戶(hù)選擇的模式，將自動(dòng)顯示正確的顏色。這對(duì)我們的設(shè)計(jì)系統(tǒng)來(lái)說(shuō)是一個(gè)真正的游戲規(guī)則改變者，因?yàn)樗鼘⑹顾用嫦蛭磥?lái)。
明暗模式下的語(yǔ)義顏色 Primary.Background
如果我們將來(lái)要更新顏色，使用語(yǔ)義顏色也會(huì)變得更容易。假設(shè)我們想要將我們的主色更改為藍(lán)色。我們只需要將基礎(chǔ)調(diào)色板中的“紫色”更新為“藍(lán)色”。與該顏色相關(guān)的所有語(yǔ)義顏色也將神奇地更新。另一種情況可能是更新特定 UI 元素的顏色，例如按鈕，而無(wú)需觸摸使用紫色顏色的其他元素。
在這種情況下，我們只需要更新 ButtonBackground.Primary 顏色，非常簡(jiǎn)單。如果沒(méi)有該系統(tǒng)，更新顏色將需要經(jīng)過(guò)大量 QA 以確保將更改應(yīng)用到任何地方。
這個(gè)系統(tǒng)似乎很容易使用，但設(shè)計(jì)師仍然有一些問(wèn)題：
為了幫助設(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ǔ)義色彩交互指南
采用這種新的顏色系統(tǒng)產(chǎn)生了一些變化：
1）我們從“Foundation”庫(kù)中提取顏色，并將它們分為深色和淺色模式。這一舉措使我們能夠使用 Figma 開(kāi)關(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è)集中的配色方案來(lái)處理所有系統(tǒng)上的顏色。
總結(jié)下今天學(xué)到的內(nèi)容：
（授權(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)載。
題圖來(lái)自Unsplash，基于CC0協(xié)議。
蘭亭妙微(www.jsyqsx.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶(hù)體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢(xún)、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢(xún)電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢(xún)及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan
編輯導(dǎo)語(yǔ)：各大APP的圖標(biāo)都各有特點(diǎn)，圖標(biāo)的設(shè)計(jì)也是一門(mén)學(xué)問(wèn)。在這篇文章中，作者全面解析了各類(lèi)APP圖標(biāo)設(shè)計(jì)背后的用意，一起學(xué)習(xí)一下吧。
如果說(shuō)一個(gè)人的臉面、衣著打扮是給陌生人的第一印象，那么APP的應(yīng)用圖標(biāo)風(fēng)格與氣質(zhì)就是留給新用戶(hù)的第一印象，關(guān)系著用戶(hù)是否對(duì)這個(gè)APP感興趣、是否會(huì)打開(kāi)應(yīng)用介紹、是否會(huì)點(diǎn)擊下載按鈕起著決定性的作用。
一個(gè)好的應(yīng)用圖標(biāo)有著無(wú)限可能，無(wú)形中對(duì)用戶(hù)產(chǎn)生強(qiáng)大的吸引力，并有一種想要了解的沖動(dòng)，況且圖形本身就能讓人充分發(fā)揮想象力，這就是為什么不管在哪個(gè)應(yīng)用市場(chǎng)第一眼看到的是應(yīng)用圖標(biāo)，而非應(yīng)用名稱(chēng)。
在一部手機(jī)就能解決很多問(wèn)題的互聯(lián)網(wǎng)時(shí)代，相信每個(gè)人都有下載幾十上百個(gè)APP，琳瑯滿(mǎn)目的列表，應(yīng)用圖標(biāo)是否能在第一時(shí)間抓住用戶(hù)眼球（目標(biāo)明確或鐵粉除外）非常重要，一個(gè)視覺(jué)傳達(dá)清晰且有吸引力的圖標(biāo)能提升用戶(hù)點(diǎn)擊率，即便用戶(hù)只使用過(guò)一次，相對(duì)來(lái)說(shuō)，印象也會(huì)更深刻。
本文根據(jù)筆者對(duì)大量應(yīng)用圖標(biāo)的分析、結(jié)合設(shè)計(jì)準(zhǔn)則進(jìn)行總結(jié)，希望能幫助大家在設(shè)計(jì)過(guò)程中規(guī)避掉一些常見(jiàn)的問(wèn)題，歡迎一起探討、取長(zhǎng)補(bǔ)短、共同進(jìn)步。
應(yīng)用圖標(biāo)代表產(chǎn)品的外在形象，設(shè)計(jì)的精美與否決定著用戶(hù)的第一印象，是否產(chǎn)生打開(kāi)的欲望跟當(dāng)前圖標(biāo)的視覺(jué)所傳達(dá)的內(nèi)涵有最直接的關(guān)系。應(yīng)用圖標(biāo)雖然不同于設(shè)計(jì)LOGO，表現(xiàn)方式也千變?nèi)f化，但必定有自身的設(shè)計(jì)準(zhǔn)則要去遵守，利用設(shè)計(jì)的手段將視覺(jué)傳播的價(jià)值最大化。
首先，應(yīng)用圖標(biāo)需要盡量簡(jiǎn)約。過(guò)于復(fù)雜的圖標(biāo)會(huì)增加用戶(hù)的理解成本、甚至誤導(dǎo)用戶(hù)，但如果過(guò)于追求簡(jiǎn)約，缺乏細(xì)節(jié)、個(gè)性化以及必要的隱喻信息，也會(huì)因過(guò)于單調(diào)，造成表意不明確等問(wèn)題。
簡(jiǎn)約并非簡(jiǎn)單，設(shè)計(jì)師需要通過(guò)專(zhuān)業(yè)的知識(shí)進(jìn)行合理的簡(jiǎn)化，以提升應(yīng)用圖標(biāo)的設(shè)計(jì)品質(zhì)，方便用戶(hù)在不同場(chǎng)景中都能清晰的辨認(rèn)。其次，需表意明確、易于理解。
應(yīng)用圖標(biāo)代表的是產(chǎn)品的行業(yè)屬性、功能作用或與眾不同的優(yōu)勢(shì)，要讓用戶(hù)第一眼就能識(shí)別出所代表的含義，貼近用戶(hù)的心理預(yù)期。
簡(jiǎn)約易識(shí)別是應(yīng)用圖標(biāo)必備的基礎(chǔ)屬性之一，這也是為什么大部分產(chǎn)品都將logo作為應(yīng)用圖標(biāo)主視覺(jué)的原因，因?yàn)閘ogo設(shè)計(jì)考慮到了方方面面以及后續(xù)延展的問(wèn)題，即便有些logo較為復(fù)雜，也會(huì)通過(guò)提取局部元素、吉祥物、主體色等方式來(lái)強(qiáng)化應(yīng)用圖標(biāo)屬性，給用戶(hù)形成獨(dú)特的記憶，以提升應(yīng)用的下載量和使用率。
應(yīng)用圖標(biāo)應(yīng)該與產(chǎn)品的屬性、品牌有極強(qiáng)的關(guān)聯(lián)性，通過(guò)品牌延展賦予產(chǎn)品更強(qiáng)的生命力，讓用戶(hù)從接觸應(yīng)用圖標(biāo)的第一眼開(kāi)始、再到后面的使用，整個(gè)過(guò)程始終都能保持清晰且統(tǒng)一的品牌認(rèn)知，通過(guò)和諧統(tǒng)一的視覺(jué)效果，帶來(lái)更好的用戶(hù)體驗(yàn)。
應(yīng)用圖標(biāo)需要與品牌之間必須保持高度的一致，著重從以下幾點(diǎn)體現(xiàn)：
1）LOGO
毫無(wú)疑問(wèn)，用品牌logo作為主體圖形是最佳選擇，結(jié)合品牌色搭配使用，能將產(chǎn)品核心理念、品牌形象的傳播效果達(dá)到極致，在APP應(yīng)用市場(chǎng)中，大家會(huì)發(fā)現(xiàn)大多數(shù)產(chǎn)品都在使用logo作為應(yīng)用圖標(biāo)的主視覺(jué)圖形。
2）品牌色
品牌色即主體色，將貫穿APP所有頁(yè)面的元素組件。眾所周知，每種顏色都有其特定的含義，能傳遞給用戶(hù)不同的心理感受。用主體色作為應(yīng)用圖標(biāo)的背景色，可以烘托出產(chǎn)品的情感氛圍，并與進(jìn)入應(yīng)用后的主體色遙相呼應(yīng)，以最小的視覺(jué)跳躍性將前后關(guān)聯(lián)，強(qiáng)化用戶(hù)對(duì)產(chǎn)品的記憶感知。
3）IP/吉祥物
吉祥物屬于品牌logo延展的一部分， 也是產(chǎn)品的靈魂。當(dāng)logo較為復(fù)雜時(shí)，因移動(dòng)設(shè)備應(yīng)用圖標(biāo)位置空間有限，logo細(xì)節(jié)無(wú)法在短時(shí)間被用戶(hù)捕捉，不宜展示時(shí)，使用IP/吉祥物或其局部元素代替也是不錯(cuò)的選擇。
4）產(chǎn)品名稱(chēng)
如果說(shuō)logo是產(chǎn)品的臉面，通過(guò)暗示和隱喻給用戶(hù)無(wú)限遐想并讓用戶(hù)記住它的樣子，那么名稱(chēng)的出現(xiàn)就相當(dāng)于產(chǎn)品主動(dòng)進(jìn)行了自我介紹，并讓用戶(hù)知道如何稱(chēng)呼它。
將產(chǎn)品名稱(chēng)作為應(yīng)用圖標(biāo)需謹(jǐn)慎使用：首先，文字傳達(dá)的信息量有限：其次，用戶(hù)對(duì)于圖形的理解效率要優(yōu)于文字；再者，應(yīng)用圖標(biāo)都會(huì)有對(duì)應(yīng)的產(chǎn)品名稱(chēng)展示（應(yīng)用市場(chǎng)在右、桌面在下方），多少有些信息重復(fù)。
所以大家見(jiàn)到的應(yīng)用圖標(biāo)主體是產(chǎn)品名稱(chēng)的不外乎兩種情況，一種是產(chǎn)品本身將名稱(chēng)設(shè)計(jì)成字體logo，例如美團(tuán)、懶飯；另一種是將產(chǎn)品名稱(chēng)作為logo的輔助信息提示，例如繽紛生活。
以上是應(yīng)用圖標(biāo)與品牌屬性關(guān)聯(lián)最常見(jiàn)的四種方式，在設(shè)計(jì)中可靈活搭配，使用兩種及以上的方式組合，能將品牌傳播的途徑發(fā)揮到最大值。
筆者上小學(xué)時(shí)，曾經(jīng)在一次彩鉛繪畫(huà)作業(yè)中得到了老師的真心夸贊，但內(nèi)心卻備受打擊。老師對(duì)著我畫(huà)的桃子說(shuō)“這西紅柿畫(huà)的太像了”。
舉這個(gè)例子似乎并不恰當(dāng)，但結(jié)果是驚人的相似，筆者想要陳述的一個(gè)觀點(diǎn)是，不要讓你辛苦做出的設(shè)計(jì)成為別人的嫁衣，讓用戶(hù)誤以為這是其他企業(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)手法突出其差異性，給用戶(hù)留下獨(dú)特的印象，避免同質(zhì)化。
應(yīng)用圖標(biāo)在設(shè)計(jì)完成之后（測(cè)試小組）、上線后（用戶(hù)反饋）進(jìn)行可用性測(cè)試，主要針對(duì)圖標(biāo)對(duì)用戶(hù)的吸引力、識(shí)別度等問(wèn)題作進(jìn)一步優(yōu)化，以確保圖標(biāo)在不同場(chǎng)景中都能被用戶(hù)清晰識(shí)別并提升印象。
雖然可用性測(cè)試存在設(shè)計(jì)之后，但這一環(huán)節(jié)至關(guān)重要，它決定著產(chǎn)品的下載量以及使用率。
單色圖標(biāo)通常以品牌色作為背景色、logo以反白的形式呈現(xiàn)，既能突出品牌色、還能用于烘托主體圖形，不過(guò)這種方式僅適合色值單一的logo，多色值可能會(huì)與背景色產(chǎn)生融合或色彩反差太大影響視覺(jué)傳達(dá)效果。另外，如果logo視覺(jué)重量較大，也可使用白色背景+原品牌色logo，這樣會(huì)更直觀。
單色應(yīng)用圖標(biāo)雖然色彩比較單一、表現(xiàn)形式也受到局限，但視覺(jué)清晰、簡(jiǎn)潔且識(shí)別性強(qiáng)，如果能運(yùn)用其他設(shè)計(jì)手法豐富圖標(biāo)細(xì)節(jié)就再好不過(guò)了。
多色圖標(biāo)使用了兩種及以上的顏色，更多是直接使原多色彩的logo圖形+白色背景，無(wú)需任何加工，控制好尺寸規(guī)范就行。如果是運(yùn)營(yíng)推廣所需，如春節(jié)、618、雙11等活動(dòng)，會(huì)對(duì)應(yīng)用圖標(biāo)加以其他色彩烘托、點(diǎn)綴元素或標(biāo)簽等，色彩就會(huì)更多，但一般都具有時(shí)效性，活動(dòng)過(guò)期即圖標(biāo)復(fù)原。
多色圖標(biāo)的細(xì)節(jié)、層次更加豐富，設(shè)計(jì)時(shí)確保各色彩搭配協(xié)調(diào)，一旦因色彩過(guò)多造成視覺(jué)混亂，就得不償失了。
無(wú)論是單色還是多色，添加漸變會(huì)讓?xiě)?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)視覺(jué)清晰且容易識(shí)別。
單色、多色或是漸變都可通過(guò)調(diào)整不透明度、圖層疊加的方式來(lái)豐富應(yīng)用圖標(biāo)細(xì)節(jié)，相比純粹的漸變，立體感和空間感更強(qiáng)。使用顏色疊加需注意色彩對(duì)比及明暗關(guān)系，否則會(huì)衍生出臟亂的顏色。
環(huán)形構(gòu)圖為主，由多個(gè)元素復(fù)制并以統(tǒng)一的中心點(diǎn)、旋轉(zhuǎn)角度，旋轉(zhuǎn)衍生出一個(gè)主體圖形。這種應(yīng)用圖標(biāo)的設(shè)計(jì)構(gòu)圖飽滿(mǎn)、色彩豐富，能給用戶(hù)傳遞出輕松愉快的視覺(jué)體驗(yàn)。
需要注意的是，由于顏色較多，至少在三種顏色及以上，否則無(wú)法構(gòu)成色環(huán)類(lèi)的主體圖形（錯(cuò)覺(jué)）。如果沒(méi)有超強(qiáng)的配色功底，最好按照色環(huán)的順序依次取色，即便沒(méi)有太大的優(yōu)勢(shì)，但至少不會(huì)出錯(cuò)。
一個(gè)好的應(yīng)用圖標(biāo)應(yīng)該是多元素、多信息結(jié)合運(yùn)用，才能達(dá)到更好的效果。雖然大部分主體圖形使用了logo，但并不影響設(shè)計(jì)師們對(duì)其進(jìn)行拆解，提取局部元素、色彩、名稱(chēng)等信息進(jìn)行二次創(chuàng)作，從原則上來(lái)說(shuō)，是一次線上logo的設(shè)計(jì)。
應(yīng)用圖標(biāo)種類(lèi)繁多，切不可盲目跟風(fēng)，需經(jīng)過(guò)認(rèn)真的分析、研究，找到最適合自身產(chǎn)品的才是最重要的，且每種類(lèi)型并非獨(dú)立，在條件允許的情況下還能跨類(lèi)型靈活搭配、相互組合。
1）單中文字體
僅次于圖形logo的表現(xiàn)方式，通常會(huì)在產(chǎn)品名稱(chēng)中提取一個(gè)具有代表性的文字對(duì)筆畫(huà)、結(jié)構(gòu)等進(jìn)行再設(shè)計(jì)?；趪?guó)人文化的優(yōu)勢(shì)以及對(duì)漢字的敏感度，既能降低用戶(hù)對(duì)應(yīng)用圖標(biāo)的認(rèn)知成本、還能根據(jù)產(chǎn)品特性設(shè)計(jì)出差異化的視覺(jué)效果。
不過(guò)因?yàn)槲淖止P畫(huà)的原因，單個(gè)文字提取難度較大，避免信息傳遞有誤或影響識(shí)別度，建議選擇筆畫(huà)較少且具有特性/代表性的文字，若達(dá)不到條件，最好選擇其他表現(xiàn)方式。
2）多中文字體
使用兩個(gè)及以上漢字，大多直接將產(chǎn)品名稱(chēng)用在圖當(dāng)中，對(duì)用戶(hù)來(lái)說(shuō)更容易記憶，有利于品牌推廣。相比單字體，設(shè)計(jì)感會(huì)受到一定的局限，不宜做過(guò)于夸張的表現(xiàn)方式，因文字較多，設(shè)計(jì)時(shí)一定要注意文字的協(xié)調(diào)與可讀性。
多文字圖標(biāo)建議將字?jǐn)?shù)控制在2~6個(gè)范圍內(nèi)，3字以?xún)?nèi)一行顯示，超過(guò)3字即兩行顯示且最多不超過(guò)兩行，否則會(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)的形式感和趣味性。注意添加的圖形不要過(guò)于復(fù)雜，不然會(huì)讓信息混亂，適得其反。
4）中文圖形化
根據(jù)單個(gè)字體筆畫(huà)的特點(diǎn)進(jìn)行巧妙的變形或延展，會(huì)讓你的應(yīng)用圖標(biāo)更具設(shè)計(jì)感、品質(zhì)好。這種方式對(duì)設(shè)計(jì)功底的要求較高，需要確保字體的識(shí)別度，切勿霸王硬上弓，如果是為了設(shè)計(jì)而設(shè)計(jì)，就違背的信息傳播的初衷。
5）中文、IP形象組合
由產(chǎn)品名稱(chēng)和IP形象組合而成，這種方式能通過(guò)品牌IP不同的視覺(jué)形象帶給用戶(hù)情感化的體驗(yàn)，讓產(chǎn)品更具親和力，拉近與用戶(hù)之間的關(guān)系。例如，IP的喜、怒、哀、樂(lè)表情變化分別對(duì)應(yīng)用戶(hù)不同的心理感受，以加深用戶(hù)對(duì)產(chǎn)品的印象及品牌認(rèn)知。
1）單英文字體
單英文字體通常是提取產(chǎn)品名稱(chēng)拼音首字母或英文首字母進(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ì)師來(lái)說(shuō)，是一個(gè)很大的挑戰(zhàn)。
2）多英文字體
跟多中文不同，中文產(chǎn)品名稱(chēng)在移動(dòng)端基本不會(huì)超出6個(gè)字，而全拼音或英文名則多達(dá)十幾位甚至更多，為了用戶(hù)能更好容易識(shí)別、記憶，依然是提取不同拼音或單詞的首字母（中文全稱(chēng)）進(jìn)行設(shè)計(jì)。
多英文的應(yīng)用圖標(biāo)很很容易形成獨(dú)有的產(chǎn)品簡(jiǎn)稱(chēng)，更利于用戶(hù)記憶，但字母一定不要過(guò)多，如果無(wú)法刪減，那就只突出特定的2~4個(gè)字母。
3）其他類(lèi)型
字母與圖形、IP形象組合以及字母圖形化，其表現(xiàn)方式、設(shè)計(jì)原則與中文字體圖標(biāo)類(lèi)似，這里不做過(guò)多闡述。
1）數(shù)字設(shè)計(jì)
人們對(duì)于數(shù)字來(lái)說(shuō)是非常敏感的，不存在文化差異或認(rèn)知誤區(qū)，基于數(shù)字便于記憶且容易識(shí)別的特點(diǎn)，將數(shù)字圖形化后應(yīng)用到圖標(biāo)當(dāng)中，會(huì)讓產(chǎn)品具有親和力，有利于品牌傳播。單純的數(shù)字過(guò)于簡(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á)的意思，例如“¥”適合攢錢(qián)、理財(cái)相關(guān)的應(yīng)用，而“+-×÷”則適合用于計(jì)算器或數(shù)學(xué)相關(guān)的應(yīng)用；其次，符號(hào)跟數(shù)字一樣，都比較簡(jiǎn)單，需經(jīng)過(guò)二次創(chuàng)作后才會(huì)使用。
1）線性圖形
線性風(fēng)格的應(yīng)用圖標(biāo)能給人一種簡(jiǎn)潔輕快的感覺(jué)，設(shè)計(jì)師通過(guò)提取產(chǎn)品的品牌信息、功能服務(wù)等進(jìn)行創(chuàng)意設(shè)計(jì)，將得到的關(guān)鍵詞以一條或多條線段組成高度抽象的圖形來(lái)達(dá)到信息傳播的目的。
通常以反白的形式出現(xiàn)，背景可以是單色、漸變色或加以輔助圖形點(diǎn)綴。
線性圖形非常適合文藝類(lèi)簡(jiǎn)約風(fēng)格的應(yīng)用，通過(guò)不同的線條帶給用戶(hù)不同的心理感受，例如直線代表大方、專(zhuān)業(yè)、正直；斜線代表張力、速度；曲線代表流暢、飄逸及柔軟等。
設(shè)計(jì)時(shí)，切記圖形不能過(guò)于復(fù)雜，否則會(huì)影響其辨識(shí)度，增加用戶(hù)的認(rèn)知成本，也不利于品牌推廣。
2）面性圖形
也可稱(chēng)之為剪影圖形，根據(jù)產(chǎn)品屬性，將日常生活中被大眾所熟知的動(dòng)物、植物、食品、工具、玩具…等事物進(jìn)行簡(jiǎn)化，通過(guò)刻畫(huà)事物的造型輪廓來(lái)形成獨(dú)立的剪影圖形。
高識(shí)別度的剪影圖形會(huì)讓整體看起來(lái)非常醒目，提高信息傳播的效率，只要控制好造型，即便把圖標(biāo)縮到很小也能清晰辨認(rèn)。
因現(xiàn)實(shí)世界中事務(wù)的復(fù)雜性，被提煉出的圖形如果細(xì)節(jié)過(guò)多會(huì)顯的復(fù)雜且不夠干練、細(xì)節(jié)過(guò)少則難以辨認(rèn)，所以需要對(duì)圖形進(jìn)行創(chuàng)意加工，最終以確保應(yīng)用圖標(biāo)的功能和美感兼具。
3）幾何圖形
幾何圖形在應(yīng)用圖標(biāo)中使用的很廣泛，可以是線性或面性，表現(xiàn)形式也非常豐富，利用幾何圖形通過(guò)單獨(dú)、組合、布爾運(yùn)算等方式形成簡(jiǎn)單且個(gè)性化的創(chuàng)意圖形，帶給用戶(hù)簡(jiǎn)約、現(xiàn)代、空間、熱鬧等不同的心理感受。
幾何圖形構(gòu)圖簡(jiǎn)潔，設(shè)計(jì)形式豐富多樣，想設(shè)計(jì)出具備設(shè)計(jì)感和差異化的應(yīng)用圖標(biāo)，很考驗(yàn)設(shè)計(jì)師的創(chuàng)意能力。
對(duì)純色剪影圖形增加太多細(xì)節(jié)，無(wú)疑是將其“大卸八塊”，變成一堆零件，但通過(guò)多色、漸變、圖層樣式等表現(xiàn)手法設(shè)計(jì)成卡通形象，就完全不一樣了。
卡通形象能體現(xiàn)出產(chǎn)品的生命力、親和力，以及直觀且易于理解和記憶的特質(zhì)，對(duì)品牌形象的塑造、傳播起到了很好作用。
在畫(huà)卡通形象時(shí)，需要注意產(chǎn)品主用戶(hù)群體的年齡段，切勿一開(kāi)始就把活潑可愛(ài)作為卡通形象的代名詞，避免絕對(duì)低齡化的表達(dá)，同時(shí)需要設(shè)計(jì)師有一定的繪畫(huà)功底。
利用人體的局部元素，如眼睛、嘴巴、手足、頭部等，再結(jié)合常見(jiàn)的表情動(dòng)作進(jìn)行圖形化設(shè)計(jì)，相當(dāng)于給原本冷冰冰的圖形賦予了生命力，傳達(dá)出不一樣的情感，而且用戶(hù)原本就對(duì)人體元素敏感度更高，更容易打動(dòng)用戶(hù)并形成較強(qiáng)的記憶。
擬人化的應(yīng)用圖標(biāo)會(huì)顯得親民，便于拉近與用戶(hù)之間的關(guān)系，適度在抽象的圖形上加入情感化（動(dòng)作/表情）表達(dá)，能生動(dòng)、形象的體現(xiàn)出產(chǎn)品獨(dú)有的特性。
如果想要較強(qiáng)的視覺(jué)沖擊力，建議元素不要過(guò)多，最好是對(duì)某個(gè)單一的元素作放大或特寫(xiě)處理，讓用戶(hù)看到更多的細(xì)節(jié)，也可用夸張、比喻、襯托等表現(xiàn)手法強(qiáng)化特點(diǎn)。
擬物化圖標(biāo)使用的比較少，它更偏向于某種行業(yè)類(lèi)型，例如工具、游戲類(lèi)型的應(yīng)用，通過(guò)超接近于現(xiàn)實(shí)世界中的物體造型，基本不需要用戶(hù)思考，一眼就能理解，但也正因?yàn)檫@種特性，信息量的傳播受到很大局限，僅適合單一且大眾化的信息傳達(dá)。
在如今，想同時(shí)融入行業(yè)、屬性、品牌等多元化內(nèi)容的信息化時(shí)代，顯然不太實(shí)用了。
應(yīng)用圖標(biāo)背景通常以單色、漸變色居多，除此之外，還可以添加與主體圖形相呼應(yīng)的輔助圖形背景，以豐富圖標(biāo)的視覺(jué)層次。圖形背景一定是為襯托或突出主體圖形的輔助存在，切勿過(guò)分表達(dá)，以免喧賓奪主。
當(dāng)主體圖形的結(jié)構(gòu)、色彩不是很復(fù)雜，且產(chǎn)品面對(duì)的是年輕化用戶(hù)群體時(shí)，可通過(guò)色彩拼接、晶格化或多種鮮明的色彩漸變等方式設(shè)計(jì)出炫彩效果，色彩表現(xiàn)豐富的應(yīng)用圖標(biāo)，能帶給用戶(hù)更強(qiáng)的視覺(jué)沖擊力。色彩可多但不可亂，需要把控好色彩之間的對(duì)比關(guān)系。
常見(jiàn)于在特定的節(jié)日中，例如618、雙11、雙12及傳統(tǒng)節(jié)日等，產(chǎn)品會(huì)存在促銷(xiāo)、打折活動(dòng)，為了更早的讓用戶(hù)知道，會(huì)在應(yīng)用圖標(biāo)的某個(gè)區(qū)域以標(biāo)簽的方式出現(xiàn)，起到引導(dǎo)用戶(hù)的作用。
不過(guò)這種表現(xiàn)方式具有時(shí)效性，活動(dòng)截止即圖標(biāo)樣式復(fù)原。
通過(guò)配色或節(jié)日相關(guān)的元素點(diǎn)綴，營(yíng)造出一種感同身受的節(jié)日氛圍。例如：春節(jié)期間，部分應(yīng)用圖標(biāo)背景會(huì)調(diào)整為紅色，并使用燈籠、煙花、文案等元素點(diǎn)綴，制造出普天同慶、與用戶(hù)同樂(lè)的喜慶感，或者在高考期間鼓勵(lì)學(xué)生，少了套路、多了真誠(chéng)，給用戶(hù)留下較深的印象。
通過(guò)元素的大小、長(zhǎng)短、虛實(shí)、稀疏、方向以及不同的色彩、明暗關(guān)系等方式進(jìn)行對(duì)比，形成強(qiáng)烈的反差效果，同時(shí)兼具張力和美感，這也是應(yīng)用圖標(biāo)設(shè)計(jì)中很常見(jiàn)的技法表現(xiàn)之一。
對(duì)稱(chēng)在自然界中隨處可見(jiàn)，在互聯(lián)網(wǎng)設(shè)計(jì)中也是如此，應(yīng)用圖標(biāo)中的主體圖形以對(duì)稱(chēng)的方式呈現(xiàn)，能給用戶(hù)平衡、和諧的感覺(jué)，也讓圖標(biāo)更具有觀賞性。
將應(yīng)用圖標(biāo)中的主體圖形分割，賦予不同的顏色、樣式等，明確層級(jí)劃分，可提升圖標(biāo)的美感。例如：將色塊分割成不同的比例、形狀，就能組合成一個(gè)完整的熊貓圖形（百度搜“熊貓剪影”圖片）。
如果適合使用0.168黃金比例分割就再好不過(guò)了，這是被公認(rèn)為最具美感的比例。
將相同或相近的圖形以某種規(guī)律連續(xù)性的排列，相比單調(diào)的圖形，會(huì)更加飽滿(mǎn)。重復(fù)性的表現(xiàn)手法以大小、色彩、位置、形狀等作為出發(fā)點(diǎn)進(jìn)行有序的排列，最終形成一種規(guī)律、整齊的節(jié)奏和藝術(shù)感。
需要注意的是基礎(chǔ)圖形不能過(guò)于復(fù)雜，一定是有規(guī)律的重復(fù)，否則會(huì)讓圖形變的混亂，無(wú)法形成整體。
在保證識(shí)別度清晰的前提下，將兩個(gè)或以上的元素相互重疊、交叉在一起，能形成前后左右的層級(jí)關(guān)系，制造空間感，同時(shí)也能將多個(gè)圖形關(guān)聯(lián)在一起，避免圖標(biāo)元素零散或單調(diào)，讓整體性更強(qiáng)，豐富用戶(hù)視覺(jué)感知。
正負(fù)形也是常見(jiàn)的表現(xiàn)手法之一，利用正圖為底，通過(guò)減去底層挖空的方式突出（錯(cuò)覺(jué)）負(fù)形，將產(chǎn)品特征、屬性及服務(wù)多途徑的傳達(dá)給用戶(hù)，可謂是“一石二鳥(niǎo)”。
正負(fù)形圖標(biāo)能將信息傳播最大化，且設(shè)計(jì)感十足，好的正負(fù)形圖標(biāo)能給用戶(hù)形成獨(dú)特的記憶點(diǎn)，但設(shè)計(jì)時(shí)需要注意正、負(fù)銜接的順暢度，否則無(wú)法清晰的傳播信息。
通過(guò)產(chǎn)品屬性、功能或特點(diǎn)進(jìn)行思維發(fā)散，例如：夏天，我們會(huì)想到空調(diào)、海灘、冰淇淋、比基尼、裙子（女性）、夜空等一系列相關(guān)聯(lián)的事和物，搜集起來(lái)并做好整理歸類(lèi)，確定大致的設(shè)計(jì)方向。
確定了大致的設(shè)計(jì)方向，就去找同行業(yè)、同類(lèi)型或相似的應(yīng)用圖標(biāo)分析其形狀、配色、組合類(lèi)型等，取長(zhǎng)補(bǔ)短，這也是避免同質(zhì)化非常重要的一個(gè)環(huán)節(jié)，幫助自己在后續(xù)設(shè)計(jì)出具備差異化的應(yīng)用圖標(biāo)做鋪墊。
可以從產(chǎn)品名稱(chēng)或功能屬性方面找出產(chǎn)品最想傳達(dá)的核心信息，并提煉出關(guān)鍵詞。切記，關(guān)鍵詞不可脫離帶水、表意不明確，一定要夠精煉、能表達(dá)出核心內(nèi)容。關(guān)鍵詞在精不在多，如果太多，需要通過(guò)層層遞進(jìn)，篩選出“一主三輔”，要知道這關(guān)系著后續(xù)應(yīng)用圖標(biāo)傳達(dá)信息的精準(zhǔn)度。
將上一步得到的關(guān)鍵詞轉(zhuǎn)化成抽象圖形，進(jìn)行視覺(jué)化提煉，這時(shí)應(yīng)用圖標(biāo)的雛形已經(jīng)形成，再結(jié)合前面所提到的圖形分類(lèi)、表現(xiàn)手法以及注意事項(xiàng)等，進(jìn)入圖標(biāo)繪制流程。關(guān)于圖標(biāo)設(shè)計(jì)規(guī)范及原則，在之前的《圖標(biāo)篇 | 圖標(biāo)設(shè)計(jì)必備的基礎(chǔ)知識(shí)！》文章中有詳細(xì)說(shuō)明，這里不做闡述。
基本圖形繪制完成后，通過(guò)添加點(diǎn)綴、輔助圖形、背景處理等方式豐富圖標(biāo)細(xì)節(jié)，進(jìn)行精細(xì)化處理，使其更精致，具備高識(shí)別度及品質(zhì)感。
分別通過(guò)移動(dòng)端應(yīng)用商店列表、應(yīng)用詳情、設(shè)置中應(yīng)用列表、桌面以及WEB商店等，對(duì)不同位置的大小、不同的桌面背景進(jìn)行虛擬測(cè)試，以確保在不同場(chǎng)景中都能被用戶(hù)高度識(shí)別，如果這些問(wèn)題等著被用戶(hù)發(fā)現(xiàn)，很可能給產(chǎn)品帶來(lái)不利的影響。
需要對(duì)iOS和Android系統(tǒng)各輸出一套圖標(biāo)，iOS只需一個(gè)1024px的切圖便能適配所有，且無(wú)需設(shè)定圓角。Android則需要多套切圖規(guī)范，如512px、198px、144px、96px、72px、48px，圓角半徑以512px為基準(zhǔn)設(shè)定為90px（參考值）。
這些固定的尺寸規(guī)范并不在技術(shù)能力范疇，如果實(shí)在不清楚，需要用時(shí)就“百度一下”一大把，或直接找開(kāi)發(fā)人員拿尺寸都不是難事。
首先，筆者要感謝耐心看到這里的小伙伴，希望總結(jié)的內(nèi)容能幫到大家，在前期設(shè)計(jì)中作為資料參考，避免出現(xiàn)常見(jiàn)的問(wèn)題，防止進(jìn)入誤區(qū)。
其次，要想設(shè)計(jì)出優(yōu)秀的應(yīng)用圖標(biāo)僅看上述內(nèi)容是遠(yuǎn)遠(yuǎn)不夠的，少不了平時(shí)的多看、多練、多思考，需日積月累，逐漸提升自己的視覺(jué)審美、造型提煉、執(zhí)行效率等多方面設(shè)計(jì)能力。
應(yīng)用圖標(biāo)的總結(jié)分享就到這里了，對(duì)你有幫助的話就給筆者點(diǎn)個(gè)贊吧，如果有不同意見(jiàn)，歡迎在評(píng)論區(qū)交流或指正，以便查漏補(bǔ)缺，共同進(jìn)步。
大漠飛鷹；公眾號(hào)：能量眼球，人人都是產(chǎn)品經(jīng)理專(zhuān)欄作家。致力于產(chǎn)品需求的驅(qū)動(dòng)、產(chǎn)品體驗(yàn)的挖掘，利用設(shè)計(jì)的手段為受眾用戶(hù)帶來(lái)更好的體驗(yàn)，即好看、好用。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載
題圖來(lái)自Unsplash，基于 CC0 協(xié)議
蘭亭妙微(www.jsyqsx.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶(hù)體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢(xún)、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢(xún)電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢(xún)及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan
天宇 移動(dòng)端UI設(shè)計(jì)文章及欣賞
編劇導(dǎo)語(yǔ)：折疊菜單是在頁(yè)面中垂直堆疊的菜單列表，通過(guò)展開(kāi)/折疊來(lái)顯示或隱藏更多菜單內(nèi)容。APP中的折疊菜單該如何設(shè)計(jì)呢？本文作者分享了折疊菜單的設(shè)計(jì)解析及設(shè)計(jì)應(yīng)用，一起來(lái)看看吧！
大家好，這里是設(shè)計(jì)夾，今天為大家分享的是「折疊菜單」。
折疊菜單(Accordion)，又稱(chēng)手風(fēng)琴菜單，是在頁(yè)面中垂直堆疊的菜單列表，通過(guò)展開(kāi)/折疊來(lái)顯示或隱藏更多菜單內(nèi)容。
接下里通過(guò)講解折疊菜單的構(gòu)成、樣式和設(shè)計(jì)解析來(lái)更進(jìn)一步了解折疊菜單的運(yùn)用～
折疊菜單的狀態(tài)包括收起、展開(kāi)、懸停、選中、禁用狀態(tài)等。
在折疊菜單中，通常用“V形”圖標(biāo)表示菜單展開(kāi)/收起的狀態(tài)。“V形”圖標(biāo)可以在左側(cè)，也可以放在右側(cè)，用來(lái)表示狀態(tài)。
除了使用最常見(jiàn)的“V形”圖標(biāo)，還可以用以下圖標(biāo)來(lái)代替：上/下填充圖標(biāo)；加號(hào)/減號(hào)；向上/向下箭頭。
當(dāng)我們把展開(kāi)圖標(biāo)放在右側(cè)的情況下，我們可以面板左側(cè)設(shè)計(jì)一些圖標(biāo)，來(lái)增強(qiáng)菜單的含義，并讓頁(yè)面看起來(lái)更精致。
在某些場(chǎng)景下，還可以通過(guò)使用不同的顏色，更加直觀地分隔每個(gè)菜單。
在頁(yè)面設(shè)計(jì)中，大多數(shù)情況下都是使用封閉式折疊面板。
通過(guò)一條淺色的的分隔線將不同的菜單分隔開(kāi)，這種樣式的優(yōu)點(diǎn)是可以節(jié)省一些豎向的屏幕空間，尤其是在移動(dòng)端屏幕尺寸較小的情況下。
分離式折疊面板常用在桌面端中，每個(gè)菜單的展示更清晰，設(shè)計(jì)樣式更簡(jiǎn)潔。
突出顯示菜單展開(kāi)的狀態(tài)，這樣在多個(gè)折疊菜單打開(kāi)的情況下，用戶(hù)也能清晰找到需要的信息。
常用的突出顯示的方式有：增加陰影、背景填充、輪廓描邊等。
例如在頁(yè)面背景是白色的情況下，我們可以使用透明度很低的灰色作為下拉菜單的背景，更清晰地展示展開(kāi)的菜單。另外，還可以為下來(lái)菜單填充和品牌色一致的顏色描邊，起到強(qiáng)調(diào)品牌的效果。
通過(guò)在主菜單的下面添加已選擇的內(nèi)容，這樣在不需要展開(kāi)面板的情況下，用戶(hù)就能知道選擇了哪些內(nèi)容，進(jìn)一步提高操作效率。
當(dāng)已選內(nèi)容太多時(shí)，我們不可能將這些內(nèi)容全部在主菜單羅列出來(lái)，在這樣的情況下，可以使用數(shù)字徽標(biāo)的形式來(lái)展示已選擇的菜單數(shù)。這樣的設(shè)計(jì)有點(diǎn)像購(gòu)物車(chē)中不斷變化的數(shù)字徽標(biāo)，告訴用戶(hù)加購(gòu)的數(shù)量。
通過(guò)在折疊面板中添加提示文案，起到輔助作用，展示更多和菜單相關(guān)的信息。這種設(shè)計(jì)形式更適合用在移動(dòng)端中，在有限的屏幕尺寸上盡可能多的展示內(nèi)容。
等寬使用：在移動(dòng)端中使用等寬的折疊菜單，方方便用戶(hù)點(diǎn)擊操作。
側(cè)邊欄：將折疊菜單放在側(cè)邊的導(dǎo)航抽屜中，點(diǎn)擊左上角的圖標(biāo)來(lái)展開(kāi)菜單項(xiàng)。
菜單篩選：將側(cè)邊欄與折疊面板配合使用，實(shí)現(xiàn)菜單篩選的功能。
側(cè)邊導(dǎo)航：和移動(dòng)端類(lèi)似，桌面端最常用的方法是把折疊菜單放到頁(yè)面左側(cè)，作為網(wǎng)頁(yè)的側(cè)邊導(dǎo)航使用。
過(guò)濾器：根據(jù)桌面端的頁(yè)面布局結(jié)構(gòu)，折疊菜單可以放在頁(yè)面左側(cè)或右側(cè)，實(shí)現(xiàn)精確查找、內(nèi)容過(guò)濾等功能。
以上就是折疊菜單的設(shè)計(jì)解析及設(shè)計(jì)應(yīng)用，希望通過(guò)這些知識(shí)能幫你進(jìn)一步了解折疊菜單的用法。
「組件系列」的其他文章，近期也會(huì)不斷更新，歡迎大家關(guān)注~
作者：Clippp，微信公眾號(hào)：Clip設(shè)計(jì)夾。每周精選設(shè)計(jì)文章，專(zhuān)注分享關(guān)于產(chǎn)品、交互、UI視覺(jué)上的設(shè)計(jì)思考。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。
題圖來(lái)自 Pixabay，基于CC0協(xié)議。
蘭亭妙微(www.jsyqsx.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶(hù)體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢(xún)、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢(xún)電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢(xún)及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan
編輯導(dǎo)語(yǔ)：B端產(chǎn)品的展現(xiàn)形式包含了很多類(lèi)型，標(biāo)簽頁(yè)、彈窗、懸浮層等等。本篇文章中作者分享了如何正確的呈現(xiàn)B端產(chǎn)品，讓產(chǎn)品的交互體驗(yàn)更加絲滑。感興趣的小伙伴們快來(lái)一起看看吧，希望對(duì)你有所幫助。
在B端產(chǎn)品操作中，需要高頻率地打開(kāi)各類(lèi)鏈接和按鈕，如果點(diǎn)擊后需要展示新的內(nèi)容，那么展現(xiàn)形式就包含了很多種類(lèi)型，標(biāo)簽頁(yè)、新頁(yè)面、懸浮層、彈窗、抽屜等等。
在面對(duì)數(shù)量龐大的B端頁(yè)面、組件、交互場(chǎng)景下，應(yīng)該選擇哪種展示形式就變成了一個(gè)棘手的問(wèn)題。
本篇分享就將集中在解決如何選擇正確的呈現(xiàn)形式上，讓產(chǎn)品的交互體驗(yàn)更順滑。
網(wǎng)頁(yè)是一種可視化的UI界面，也是一種內(nèi)容載體，它是瀏覽器訪問(wèn)網(wǎng)站后顯示的主要對(duì)象，也是瀏覽器展示內(nèi)容中層級(jí)最高的單位。
在同一個(gè)網(wǎng)站中，如果我們想要訪問(wèn)其它網(wǎng)頁(yè)，就需要點(diǎn)擊按鈕或鏈接觸發(fā)，這時(shí)候，打開(kāi)新網(wǎng)頁(yè)的方式就有兩種，在新窗口/標(biāo)簽中打開(kāi)（_blank）或者在本窗口/標(biāo)簽中打開(kāi)（_self）。
不管是哪種，本質(zhì)上都需要瀏覽器重新加載新的頁(yè)面。對(duì)于一般的企業(yè)官網(wǎng)、新聞網(wǎng)站來(lái)說(shuō)，這種加載的模式?jīng)]有太大的問(wèn)題，因?yàn)椴僮黝l次相對(duì)適中，用戶(hù)中間會(huì)有比較長(zhǎng)的時(shí)間停頓下來(lái)查看頁(yè)面的內(nèi)容信息。
而B(niǎo)端項(xiàng)目則不同，雖然也有不少查看頁(yè)面信息的需求，但是包含了更多需要短平快完成操作目標(biāo)的使用場(chǎng)景，比如修改個(gè)標(biāo)題，更改商品價(jià)格，添加分類(lèi)字段等。
如果所有高頻操作的場(chǎng)景，都要重新加載頁(yè)面，使用起來(lái)的 “頓挫感” 是非常強(qiáng)的，降低使用體驗(yàn)。
早期的網(wǎng)站加載內(nèi)容必須刷新頁(yè)面，所以頓挫感是難以解決的，只能想辦法減少跳轉(zhuǎn)流程來(lái)提升用戶(hù)體驗(yàn)。
隨著網(wǎng)頁(yè)技術(shù)的發(fā)展，異步處理（AJAX數(shù)據(jù)交換方式）技術(shù)的應(yīng)用，讓網(wǎng)頁(yè)的內(nèi)容可以通過(guò)不刷新或加載新網(wǎng)頁(yè)的形式加載和顯示。
簡(jiǎn)單解釋?zhuān)褪窃缙诘木W(wǎng)頁(yè)加載完成以后就是 “靜止” 的，里面所有內(nèi)容是固定的（不是HTML的靜態(tài)）。而異步處理，就是讓頁(yè)面中的指定模塊處于 “運(yùn)動(dòng)” 的狀態(tài)，客戶(hù)端可以在不重載網(wǎng)頁(yè)的情況下只加載和更新這個(gè)模塊的內(nèi)容。
比如下面的案例，設(shè)置不同的條件選項(xiàng)，在過(guò)去的網(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ì)通過(guò)分別介紹其它幾個(gè)內(nèi)容的載體，幫助大家區(qū)分它們和重載頁(yè)面有何不同，以及如何正確選擇內(nèi)容加載形式。
首先介紹浮層，它是我對(duì)通過(guò)懸浮在頁(yè)面基礎(chǔ)內(nèi)容之上的內(nèi)容層的統(tǒng)稱(chēng)。例如各類(lèi)氣泡、提示框、下拉菜單，都是浮層的表現(xiàn)形式。
浮層是比較底層的形式，其展示內(nèi)的容完全不需要使用一個(gè)新的頁(yè)面，且和觸發(fā)的元素有較強(qiáng)的視覺(jué)聯(lián)系（對(duì)比彈窗）。
浮層并不是由內(nèi)容的多和少?zèng)Q定的，復(fù)雜的浮層可以包含非常多的交互選項(xiàng)和內(nèi)容信息，導(dǎo)致我們很容易和下方解釋的彈窗搞混。
比如客戶(hù)端軟件常見(jiàn)的隱藏式側(cè)邊欄，搜索欄中展開(kāi)的復(fù)雜面板，都是浮層的一種而不是彈窗。
浮層最大的特點(diǎn)，源自它的位置定義邏輯，它會(huì)和觸發(fā)它的元素具有非常緊密的位置關(guān)系，而不是像彈窗一樣無(wú)差別顯示在界面或?yàn)g覽器視圖的固定區(qū)域。
如果我們想要顯示內(nèi)容，完全沒(méi)到用一個(gè)新頁(yè)面展示的地步（如搜索建議面板），且和觸發(fā)它的控件有較強(qiáng)的聯(lián)系，就可以考慮使用浮層來(lái)展示。
彈窗，也是一種懸浮在基礎(chǔ)內(nèi)容之上的內(nèi)容層，它和浮層的不同之處，就在于彈窗通常是居中固定的顯示區(qū)域，和觸發(fā)它的元素沒(méi)有什么位置聯(lián)系。并且，彈窗可以包含的內(nèi)容量級(jí)也是高于浮層的。基礎(chǔ)的彈窗包含強(qiáng)提示彈窗，或類(lèi)似注冊(cè)登錄這種表單彈窗。
而高級(jí)的彈窗，則類(lèi)似下方案例，約等于打開(kāi)一個(gè)獨(dú)立的網(wǎng)頁(yè)。
之所以使用這些高級(jí)彈窗作為頁(yè)面載體，原因就是對(duì)原觸發(fā)頁(yè)面的使用和關(guān)注并沒(méi)有結(jié)束，需要支持快速關(guān)閉當(dāng)前的窗口并返回原來(lái)的頁(yè)面中去。
比如在一個(gè)非常長(zhǎng)的列表中，你下滑了幾十頁(yè)的高度，肯定不想放棄掉當(dāng)前的頁(yè)面位置，所以Behance或者花瓣等應(yīng)用，都采用窗口模式加載新頁(yè)面。
或者類(lèi)似一個(gè)列表頁(yè)面中需要大量創(chuàng)建新的數(shù)據(jù)，這些數(shù)據(jù)又不復(fù)雜。于是就通過(guò)彈窗表單的形式，快速完成創(chuàng)建并在原頁(yè)面中再次點(diǎn)擊 “新增” 按鈕。
高級(jí)的彈窗使用除了保持原頁(yè)面位置、高頻操作等防止加載的原因之外，還有個(gè)更重要的特征，就是強(qiáng)制吸引用戶(hù)的注意力到窗口上。
因?yàn)閺棿爸饕阅B(tài) （Modal，后方有黑色遮罩）居中顯示，通過(guò)深色蒙版進(jìn)行前后隔斷，凸顯彈窗區(qū)域，意味著我們強(qiáng)制讓用戶(hù)關(guān)注眼前的信息和任務(wù)。
如果我們想要顯示的內(nèi)容，需要保留原頁(yè)面狀態(tài)，減少頁(yè)面跳轉(zhuǎn)數(shù)量，又需求用戶(hù)強(qiáng)行關(guān)注，就可以使用這種模式展示。
最后，就是最難選擇，也最容易和其它組件搞混的抽屜了。
抽屜本身的特征包含懸浮屬性，覆蓋在原頁(yè)面之上。而我們常見(jiàn)的側(cè)邊欄、側(cè)邊菜單并不能和抽屜畫(huà)上等號(hào)，因?yàn)樗麄儠?huì)占用畫(huà)布的實(shí)際顯示區(qū)域，和原有內(nèi)容同層。
比如下方案例中，Jira左側(cè)導(dǎo)航（不分左右）可以隱藏收入，頁(yè)面內(nèi)容變大，這是側(cè)邊欄。而點(diǎn)擊列表選項(xiàng)，右側(cè)彈窗的窗口覆蓋原有頁(yè)面，才是抽屜。
和高級(jí)的彈窗類(lèi)似，抽屜也可以當(dāng)成一個(gè)獨(dú)立的頁(yè)面展示信息。但它和彈窗不同的是，抽屜通常是從頁(yè)面的右側(cè)展開(kāi)，沒(méi)有遮擋左側(cè)的空間。它的主要特征是還需要在原頁(yè)面進(jìn)行交互。
比如Teambition案例中的列表，我們每開(kāi)一個(gè)抽屜都還可以直接點(diǎn)擊原列表的其它選項(xiàng)切換下一個(gè)抽屜，省掉關(guān)閉步驟或者原頁(yè)面被遮擋的情況。
它比較適合應(yīng)用在表格/列表環(huán)境中，作為表格/列表內(nèi)容的詳情頁(yè)形式展開(kāi)，這樣用戶(hù)可以在一個(gè)頁(yè)面中快速查看不同列表的具體信息或編輯。并且，表格/列表本身的特征會(huì)將標(biāo)題放在最左側(cè)，也方便抽屜的切換。
也因?yàn)檫@種特性，抽屜不太需要使用模態(tài)和遮罩將左側(cè)內(nèi)容遮擋掉。如果需要通過(guò)遮擋來(lái)吸引用戶(hù)注意力，那么這種情況往往更適合使用彈窗。
所以，如果不想通過(guò)新頁(yè)面打開(kāi)的列表詳情內(nèi)容，且不是強(qiáng)制要求用戶(hù)聚焦的任務(wù)，就可以使用抽屜的形式展現(xiàn)。
以上就是幾種基本的內(nèi)容展現(xiàn)形式說(shuō)明，時(shí)間關(guān)系還有后半部分關(guān)于如何站在系統(tǒng)框架級(jí)的角度使用內(nèi)容載體的分享，我會(huì)留在下次分享。
如果有關(guān)于這部分的實(shí)際項(xiàng)目疑問(wèn)，也可以在下方留言。
我們下篇再見(jiàn)～
作者：酸梅干超人；公眾號(hào)：超人的電話亭
本文由 @超人的電話亭 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來(lái)自 Unsplash，基于CC0協(xié)議。
專(zhuān)欄作家
韓敘，微信公眾號(hào)：運(yùn)營(yíng)狗工作日記，人人都是產(chǎn)品經(jīng)理專(zhuān)欄作家。原貓眼電影產(chǎn)品運(yùn)營(yíng)專(zhuān)家，創(chuàng)業(yè)時(shí)經(jīng)歷了0到1的艱辛，在百度時(shí)規(guī)劃了海量用戶(hù)的玩法。從業(yè)10年，專(zhuān)注互聯(lián)網(wǎng)運(yùn)營(yíng)領(lǐng)域，包括產(chǎn)品運(yùn)營(yíng)、用戶(hù)運(yùn)營(yíng)、社區(qū)運(yùn)營(yíng)和UGC運(yùn)營(yíng)。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，不得轉(zhuǎn)載。
題圖來(lái)自Unsplash，基于CC0協(xié)議。
該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。
蘭亭妙微(www.jsyqsx.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶(hù)體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢(xún)、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢(xún)電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢(xún)及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan
編輯導(dǎo)語(yǔ)：產(chǎn)品設(shè)計(jì)上的許多細(xì)節(jié)都有可能影響到用戶(hù)的產(chǎn)品使用體驗(yàn)，進(jìn)而影響到產(chǎn)品的打開(kāi)率以及留存率等。這就要求產(chǎn)品設(shè)計(jì)師在交互體驗(yàn)層上結(jié)合一定小技巧，以提升用戶(hù)體驗(yàn)。本篇文章里，作者結(jié)合案例，總結(jié)了一些UI技巧，一起來(lái)看看吧。
對(duì)于很多設(shè)計(jì)師來(lái)講在設(shè)計(jì)界面過(guò)程中往往會(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ì)，但是一定要了解別人為什么這么做。
接下來(lái)將分享12個(gè)設(shè)計(jì)上的小技巧，大部分在日常設(shè)計(jì)中都會(huì)遇到，了解到這些設(shè)計(jì)細(xì)節(jié)，可以讓我們的界面更加高效、易用、美觀提升用戶(hù)體驗(yàn)。
我在做界面時(shí)可以時(shí)常利用交互手勢(shì)去幫助用戶(hù)提升操作效率，避免繁雜小操作步驟。
左圖中針對(duì)單條消息的操作匯聚到了icon內(nèi)，對(duì)于用戶(hù)理解成本比較高，當(dāng)用戶(hù)想要去刪除或者屏蔽消息時(shí)需要通過(guò)聚合入口才能完成操作，大大的提升了用戶(hù)操作成本。
我們可以在類(lèi)似的消息場(chǎng)景或者其他列表形式的場(chǎng)景中，添加一些交互手勢(shì)，隨著手機(jī)系統(tǒng)的更新，用戶(hù)的操作習(xí)慣已經(jīng)被各大產(chǎn)品培養(yǎng)的非常成熟，并不用擔(dān)心用戶(hù)無(wú)法操作的情況，增加手勢(shì)有弊端也有優(yōu)勢(shì)，右圖中手勢(shì)增加了用戶(hù)首次使用的學(xué)習(xí)成本，但是降低了高頻功能的操作成本，這個(gè)理論上是可以接受的。
利用拇指定律把關(guān)鍵的操作入口元素等，放置右側(cè)提升用戶(hù)操作效率。
左圖中把按鈕放置了模塊左下側(cè)，這樣是不利于用戶(hù)進(jìn)行操作，當(dāng)然如果整個(gè)模塊的熱區(qū)都是同一個(gè)，這樣并沒(méi)有什么問(wèn)題，用戶(hù)點(diǎn)擊卡片區(qū)域任何位置都能夠完成下一步操作，如果出現(xiàn)一個(gè)模塊內(nèi)存在多個(gè)熱區(qū)入口，而用戶(hù)想要到達(dá)目標(biāo)必須通過(guò)按鈕點(diǎn)擊才能進(jìn)入，那么左圖中的排版位置就會(huì)提升用戶(hù)的操作時(shí)間。
當(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è)可以便于用戶(hù)在右手操作時(shí)快速到達(dá)目標(biāo)，因?yàn)閲?guó)內(nèi)使用右手的人數(shù)遠(yuǎn)遠(yuǎn)大于左手用戶(hù)，所以我們需要滿(mǎn)足大部分的體驗(yàn)，合理利用拇指定律。
相關(guān)定律：費(fèi)茲定律、拇指定律。
對(duì)于我們來(lái)講很多東西是簡(jiǎn)單的，但是不乏會(huì)有一些用戶(hù)是陌生的，對(duì)于他們來(lái)講可能會(huì)有填寫(xiě)成本。
左圖中理論上并不是錯(cuò)，我們經(jīng)常設(shè)計(jì)表單時(shí)都會(huì)用的提示話術(shù)，但是我們需要考慮更多維度的東西，對(duì)于我們來(lái)講填寫(xiě)這種表單非常簡(jiǎn)單，例如個(gè)別用戶(hù)，可能會(huì)臨時(shí)忘了郵箱格式，又或者輸入手機(jī)號(hào)時(shí)多填了一位數(shù)等等情況，用戶(hù)錯(cuò)誤一次操作步驟就會(huì)多一步，反之就是降低使用產(chǎn)品時(shí)的體驗(yàn)。
如右圖中，我們?cè)O(shè)計(jì)時(shí)可以更改提示的話術(shù)，幫助用戶(hù)把問(wèn)題前置，當(dāng)用戶(hù)看到提示郵箱時(shí)就會(huì)按照格式去填寫(xiě)，通過(guò)把手機(jī)號(hào)的位數(shù)拆分，讓用戶(hù)更好的記憶數(shù)字，這樣無(wú)論對(duì)產(chǎn)品還是用戶(hù)都沒(méi)有任何損失，反而能降低錯(cuò)誤頻率。
無(wú)論是頁(yè)面還是模塊，用戶(hù)在閱讀時(shí)是已掃讀的方式進(jìn)行瀏覽，我們需要保證頁(yè)面的文字元素具備一定的規(guī)律，以此來(lái)提升閱讀效率。
左圖中可以看到，文字與輸入框放在同一列進(jìn)行展示，這樣一方面不利于后續(xù)的文字?jǐn)U展，通常這種表單填寫(xiě)的頁(yè)面，在頁(yè)面中都是具有很大的空間位置，這樣排布會(huì)造成視覺(jué)上的不規(guī)律和擁擠，降低了篩選效率，當(dāng)然如果是模塊區(qū)域很小的情況下，可以適當(dāng)?shù)倪M(jìn)行使用。
右圖中我們把文字與輸入?yún)^(qū)域上下排布，雖然文字長(zhǎng)短不一，但依據(jù)對(duì)齊原則在豎列情況看是具備對(duì)齊規(guī)律的，有效地提升信息篩選效率。
我們?cè)谧鱿到y(tǒng)功能模塊時(shí)需要注意添加功能點(diǎn)擊引導(dǎo)，用戶(hù)對(duì)此類(lèi)消息模塊認(rèn)知上會(huì)默認(rèn)不可點(diǎn)擊，因此需要我們加以引導(dǎo)。
我們常見(jiàn)的消息模塊內(nèi)容為兩種，一種是互動(dòng)類(lèi)消息即用戶(hù)與用戶(hù)，另一種時(shí)是系統(tǒng)消息即產(chǎn)品推送的內(nèi)容。
前者基于用戶(hù)習(xí)慣而言用戶(hù)已經(jīng)沒(méi)有使用成本默認(rèn)是可以進(jìn)行點(diǎn)擊交互，后者因?yàn)椴糠之a(chǎn)品會(huì)把系統(tǒng)消息作為展示的形式給用戶(hù)，但是有些產(chǎn)品的系統(tǒng)消息卻是可以點(diǎn)擊交互，這就導(dǎo)致了用戶(hù)認(rèn)知上出現(xiàn)了混亂，左圖中像系統(tǒng)通知功能通知其實(shí)從視覺(jué)上看，并不具備點(diǎn)擊欲望，因此可能會(huì)對(duì)用戶(hù)造成錯(cuò)誤的理解。
當(dāng)我們?cè)谠O(shè)計(jì)時(shí)需要注意，若消息列表中存在系統(tǒng)類(lèi)消息并且可以進(jìn)行交互，在設(shè)計(jì)時(shí)可以添加向箭頭、紅點(diǎn)提示等方式告知用戶(hù)可以點(diǎn)擊，如果該功能有數(shù)據(jù)指標(biāo)，這種方式也同樣能賦能產(chǎn)品指標(biāo)。
目前市場(chǎng)上產(chǎn)品幾乎都有深色版本，我們?cè)谠O(shè)計(jì)時(shí)深色版本的顏色時(shí)需要注意飽和度的高低，同樣的飽和度在黑色背景上會(huì)比白色背景上更加亮，這跟人的視覺(jué)感官有很大的關(guān)系，因此我們?cè)谧龊谏姹緯r(shí)需要注意是否調(diào)整飽和度。
在黑色背景中使用過(guò)高的飽和度會(huì)刺激眼睛，很多深色版本都是從白色模式通過(guò)反向顏色直接調(diào)整，而彩色元素會(huì)直接運(yùn)用到深色中，那么就會(huì)造成一個(gè)問(wèn)題，因?yàn)槲覀兞?xí)慣在白色模式下看顏色，忽然切換到黑色中看彩色刺激程度非常高“就像黑夜中忽然打開(kāi)手電筒”，對(duì)眼睛的傷害很高。
我們?cè)谠O(shè)計(jì)深色版本時(shí)可以根據(jù)產(chǎn)品主色降低飽和度，包括圖標(biāo)等元素，以此來(lái)緩沖對(duì)用戶(hù)視覺(jué)感官的刺激，目前很多大廠的處理方式是直接在彩色元素上添加一層黑色透明遮罩進(jìn)行處理，這樣無(wú)需在添加更多的顏色規(guī)范。
在設(shè)計(jì)模塊或者頁(yè)面時(shí)不建議使用特殊字體來(lái)突出文字層級(jí)，這樣會(huì)導(dǎo)致視覺(jué)不統(tǒng)一，以及開(kāi)發(fā)成本增加。
左圖中灰色字使用了特殊字體，看起來(lái)雖然好看，但在實(shí)際開(kāi)發(fā)中會(huì)導(dǎo)致開(kāi)發(fā)成本增加，我們產(chǎn)品一般使用的是系統(tǒng)字體，若使用特殊字體需要讓開(kāi)發(fā)同學(xué)添加對(duì)應(yīng)字體包，這樣會(huì)導(dǎo)致我們的產(chǎn)品包的內(nèi)存過(guò)大，除非產(chǎn)品中默認(rèn)一直使用該特殊字體，這樣才有使用的價(jià)值。
一般系統(tǒng)字體就能夠滿(mǎn)足我們的設(shè)計(jì)需求，在UI設(shè)計(jì)中我們可以通過(guò)不同的字體粗細(xì)來(lái)調(diào)整文字層級(jí)，這樣能夠保證視覺(jué)更加統(tǒng)一，減少產(chǎn)品包大小。
在設(shè)計(jì)時(shí)需要注意多個(gè)入口在同一位置時(shí)，需要把它們進(jìn)行層級(jí)劃分，避免影響用戶(hù)決策。
圖中可以看到，兩個(gè)面性按鈕非常明顯的在模塊中，當(dāng)用戶(hù)在瀏覽頁(yè)面中很容易出現(xiàn)困惑，到底需要點(diǎn)擊哪個(gè)才能購(gòu)買(mǎi)預(yù)定，因?yàn)閮蓚€(gè)都是面性無(wú)法快速進(jìn)行定位入口，這樣不僅影響用戶(hù)決策效率，還會(huì)影響產(chǎn)品點(diǎn)擊率。
建議設(shè)計(jì)類(lèi)似模塊中時(shí)，無(wú)論是pc還是移動(dòng)端都需要對(duì)入口進(jìn)行結(jié)構(gòu)劃分，這樣能夠使用戶(hù)在瀏覽頁(yè)面時(shí)快速定位到入口，提升決策效率，做體驗(yàn)是解決用戶(hù)的思考時(shí)間。
在UI設(shè)計(jì)中使用圖標(biāo)時(shí)，要保持一致性，確保他們共有相同的視覺(jué)風(fēng)格，相同的重量，填充和描邊。不要混搭。
可以看到左圖中的圖標(biāo)并不統(tǒng)一，線性里面摻雜著面性點(diǎn)綴，這在UI設(shè)計(jì)中嚴(yán)重違背了一致性的原則，會(huì)導(dǎo)致我們的頁(yè)面不夠嚴(yán)謹(jǐn)專(zhuān)業(yè)。
在設(shè)計(jì)圖標(biāo)時(shí)，首先要保證圖標(biāo)風(fēng)格一致，其次在這個(gè)基礎(chǔ)上保證圖標(biāo)的描邊粗細(xì)、視覺(jué)占比重量、顏色等，不要出現(xiàn)混搭風(fēng)格。
在設(shè)計(jì)頁(yè)面模塊時(shí)，可以多利對(duì)比度的方式來(lái)體現(xiàn)設(shè)計(jì)的表現(xiàn)力，鮮明直接的色值能夠直接表達(dá)事物的性質(zhì)以及特點(diǎn)，通過(guò)對(duì)比，也能夠更加清晰的強(qiáng)調(diào)設(shè)計(jì)中的重點(diǎn)，這樣給用戶(hù)的印象會(huì)更深刻，同樣會(huì)給產(chǎn)品帶來(lái)一定的趣味性。
左圖中單看視覺(jué)也沒(méi)問(wèn)題，只是在表現(xiàn)上圖標(biāo)與背景融入到一塊了，導(dǎo)致視覺(jué)表現(xiàn)力較差，在設(shè)計(jì)中如果符合產(chǎn)品風(fēng)格的前提下，我們可以避免這種方式，這種方式雖然具有視覺(jué)效果但不夠強(qiáng)，對(duì)用戶(hù)的記憶點(diǎn)不夠深刻。
設(shè)計(jì)到類(lèi)似的模塊時(shí)我們可以利用對(duì)比的關(guān)系，以此突出視覺(jué)元素，通過(guò)顏色焦點(diǎn)引導(dǎo)用戶(hù)關(guān)注，強(qiáng)化用戶(hù)印象同時(shí)還能增加頁(yè)面的視覺(jué)表現(xiàn)力和氛圍感。
在設(shè)計(jì)圖文疊加的卡片或者頁(yè)面時(shí)，我們需要注意不同明度的圖片上，文字識(shí)別是否有阻礙，一般情況會(huì)通過(guò)遮罩方式避免這個(gè)情況。
左圖中在深色圖片下字體的可讀性是沒(méi)有問(wèn)題的，但當(dāng)出現(xiàn)文字底部區(qū)域的圖片相對(duì)復(fù)雜時(shí)便會(huì)影響識(shí)別，第二種情況當(dāng)圖片明度過(guò)高時(shí)文字同樣無(wú)法識(shí)別，試想一下，一張白色調(diào)性的圖片上放文字，那基本無(wú)法看清，嚴(yán)重影響閱讀體驗(yàn)。
在界面設(shè)計(jì)時(shí)如果遇到類(lèi)似的卡片，建議在文字區(qū)域添加漸變遮罩的方式，以此保證文字的識(shí)別度，或者添加純黑色透明遮罩進(jìn)行處理，這樣可以兼容不同環(huán)境的圖片與文字的重疊，保證基本的閱讀體驗(yàn)。
UI設(shè)計(jì)中經(jīng)常會(huì)遇到彈窗，彈窗是需要配合頁(yè)面遮罩來(lái)讓用戶(hù)進(jìn)行專(zhuān)注操作，不同的遮罩透明度所帶來(lái)的專(zhuān)注度也不同。
左圖中我們看到，遮罩的透明度過(guò)低，我案例設(shè)置的是17%，此時(shí)彈窗內(nèi)容與頁(yè)面內(nèi)容結(jié)構(gòu)上區(qū)分并不是很明顯，一般彈窗是用來(lái)讓用戶(hù)跳脫頁(yè)面內(nèi)容，從而瀏覽彈窗內(nèi)容，轉(zhuǎn)變用戶(hù)目標(biāo)，當(dāng)彈窗無(wú)法聚焦時(shí)便很難達(dá)到目標(biāo)，并且視覺(jué)上層級(jí)更加混亂。
右圖中案例我把透明度調(diào)整到了37%，我們此時(shí)再看彈窗很容易就忽略頁(yè)面內(nèi)容，因?yàn)榛疑礁?，遮擋度越高，用?hù)跳脫感就越強(qiáng)，這樣我們可以讓用戶(hù)專(zhuān)注彈窗內(nèi)容，同時(shí)視覺(jué)結(jié)構(gòu)上也區(qū)分很明顯
作者：愛(ài)吃貓的魚(yú)；公眾號(hào)：防脫發(fā)藥水
本文由 @愛(ài)吃貓的魚(yú) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來(lái)自Pexels，基于CC0協(xié)議
蘭亭妙微(www.jsyqsx.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶(hù)體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢(xún)、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢(xún)電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢(xún)及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan
天宇 移動(dòng)端UI設(shè)計(jì)文章及欣賞
卡片式設(shè)計(jì)是產(chǎn)品常用的頁(yè)面設(shè)計(jì)手段之一，它自帶的分割屬性讓頁(yè)面布局更加清晰，也是頁(yè)面布局的利器。但是，分割也可能會(huì)影響用戶(hù)沉浸式的瀏覽體驗(yàn)等問(wèn)題。如何用好卡片式設(shè)計(jì)？本文作者對(duì)此進(jìn)行了分析，與你分享。
近幾年，卡片式設(shè)計(jì)可以說(shuō)是移動(dòng)端產(chǎn)品中極為常見(jiàn)的設(shè)計(jì)形式了，甚至有很多互聯(lián)網(wǎng)大廠將卡片式設(shè)計(jì)納入設(shè)計(jì)語(yǔ)言，在各大APP中得到廣泛運(yùn)用。
卡片式設(shè)計(jì)自帶分割屬性、讓界面更有層次感，能給人一種視覺(jué)上的享受，也因此讓其成為了頁(yè)面布局的利器，但它并非萬(wàn)能，因分割的原因可能會(huì)影響用戶(hù)沉浸式的瀏覽體驗(yàn)、造成橫向/縱向空間浪費(fèi)等問(wèn)題，需要根據(jù)實(shí)際場(chǎng)景和內(nèi)容形式來(lái)確定，不要專(zhuān)門(mén)為了“卡片式”而設(shè)計(jì)。
很多設(shè)計(jì)師對(duì)卡片設(shè)計(jì)習(xí)以為常，但對(duì)于使用卡片的原因、視覺(jué)表現(xiàn)方式、優(yōu)/缺點(diǎn)等并不是很了解。那么卡片到底該如何設(shè)計(jì)？需要注意哪些細(xì)節(jié)？筆者根據(jù)經(jīng)驗(yàn)并結(jié)合平時(shí)的一些思考，跟大家一起聊聊在設(shè)計(jì)中極易忽略的細(xì)則，希望能幫助大家提升卡片設(shè)計(jì)的精致感。
早在互聯(lián)網(wǎng)時(shí)代之前，卡片就出現(xiàn)在了我們生活中的方方面面，如名片、不干膠標(biāo)簽、便利貼、會(huì)員卡…等，不管是何種類(lèi)型的卡片，它都將代表著我們現(xiàn)實(shí)生活中的某個(gè)特定信息。
卡片指的是含有圖片或文本信息的容器，它將我們需要的信息歸納在一起、并形成獨(dú)立的個(gè)體，以至于后續(xù)被引用到線上界面中，同樣具有非常不錯(cuò)的信息歸納效果。
卡片本身就是一個(gè)完整的信息區(qū)塊、并同時(shí)承載豐富的互動(dòng)方式。在UI設(shè)計(jì)中，個(gè)性化和美感兼?zhèn)涞目ㄆ皆O(shè)計(jì)具有很強(qiáng)的易用性，它是一個(gè)UI設(shè)計(jì)組件，將標(biāo)題、文本內(nèi)容、圖形/圖片進(jìn)行整合并模塊化，讓信息的表達(dá)更加直觀、操作也更便捷。
卡片式設(shè)計(jì)之所以能成為當(dāng)今比較流行的趨勢(shì)，是因?yàn)樗茏尳缑嫘畔⒏袑哟胃?，從設(shè)計(jì)、交互、視覺(jué)以及用戶(hù)體驗(yàn)等各方面來(lái)看，都有不錯(cuò)的優(yōu)點(diǎn)。站在用戶(hù)角度，即便不太理解卡片的概念（也不需要理解），但能快速知道如何使用它，相對(duì)來(lái)說(shuō)，學(xué)習(xí)成本也是極低的。
卡片在占用屏幕空間較少的情況下能夠?qū)⒉煌笮 ⒉煌?lèi)型的信息內(nèi)容按邏輯進(jìn)行分組呈現(xiàn)，使界面結(jié)構(gòu)更加清晰。相比純粹的留白或分割線，卡片不僅對(duì)信息作出了分割，其本身還是一個(gè)獨(dú)立的容器，讓歸納組合后的信息能快速突出重點(diǎn)，將復(fù)雜內(nèi)容簡(jiǎn)單化處理。
卡片式布局整齊簡(jiǎn)練，清晰的信息結(jié)構(gòu)有助于用戶(hù)瀏覽，方便快速找到自己感興趣的內(nèi)容，避免用戶(hù)產(chǎn)生一種費(fèi)時(shí)或感覺(jué)內(nèi)容超長(zhǎng)的恐懼感，還能節(jié)省更多的時(shí)間成本。最常見(jiàn)的就是信息列表、圖文混排等，不僅做到了視覺(jué)上的美觀，也達(dá)到了平衡文字及圖片強(qiáng)弱的效果。
卡片式設(shè)計(jì)有利于場(chǎng)景拓展，他能在信息不斷增/減的情況下、頁(yè)面依然能組成一個(gè)連貫的整體，在視覺(jué)上毫無(wú)違和感。例如支付寶在頭部插入的廣告引流入口、淘寶在節(jié)假日增加二層樓…等。
卡片式設(shè)計(jì)一度打破了移動(dòng)端多為縱向操作、原有傳統(tǒng)的列表式布局，在空間有限的移動(dòng)端設(shè)備中，還能很好的利用橫向空間。將橫向滑動(dòng)區(qū)域的最后一個(gè)卡片漏出一小部分（若隱若現(xiàn)才是誘惑），不僅能給予用戶(hù)更多選擇與期待，其空間利用率也得到了很好的擴(kuò)展，在展示更多內(nèi)容的情況下依然能保持模塊的整體性。
卡片式設(shè)計(jì)能很好的通過(guò)邊界襯托出內(nèi)容的整體性，特別是在電商類(lèi)產(chǎn)品中的首頁(yè)頭部、瓷片區(qū)、營(yíng)銷(xiāo)引流區(qū)將其應(yīng)用到了極致，即便在卡片數(shù)量較多的情況下，用戶(hù)依然能清晰的感知到內(nèi)容的歸屬層級(jí)以及重要信息。
卡片作為一個(gè)容器，它可以自由無(wú)限的等比縮放，非常適合響應(yīng)式設(shè)計(jì)。在手機(jī)、iPad、電腦等屏幕尺寸復(fù)雜的情況下，通過(guò)放大縮小或增減縱向排列數(shù)量的方式配合響應(yīng)式的斷點(diǎn)設(shè)計(jì)，讓同一界面在不同設(shè)備之間輕易的創(chuàng)造出一致性的視覺(jué)體驗(yàn)。
卡片給人最直觀的感覺(jué)就是可以操作，它不用箭頭、按鈕或超鏈接等引導(dǎo)性的視覺(jué)元素提醒，節(jié)省了一定的頁(yè)面空間，還有著更大的操作熱區(qū)，無(wú)需做到精準(zhǔn)點(diǎn)擊?？ㄆ皆O(shè)計(jì)很容易融入各種交出手勢(shì)，如單擊、雙擊、長(zhǎng)按、拖動(dòng)、滑動(dòng)等，為用戶(hù)提供更多便捷的操作。
卡片可通過(guò)縮放的形式充分利用動(dòng)畫(huà)進(jìn)行頁(yè)面跳轉(zhuǎn)，例如App Store“Today”頻道，點(diǎn)擊卡片后直接等比放大至全屏，給用戶(hù)一種還停留在當(dāng)前頁(yè)面的錯(cuò)覺(jué)，避免了傳統(tǒng)的跳轉(zhuǎn)頁(yè)面而造成的信息割裂感，流暢絲滑的過(guò)渡，給用戶(hù)更自然的交互體驗(yàn)。
這種類(lèi)型的卡片在UI設(shè)計(jì)中最為常見(jiàn)，柔和的圓角、邊緣陰影以及四周很自然的留白，讓內(nèi)容模塊的存在感更加強(qiáng)烈，整個(gè)頁(yè)面信息的層級(jí)也更加清晰。
懸浮型卡片并非模態(tài)彈窗，與其相比，懸浮卡片不需要主動(dòng)操作觸發(fā)，可作為臨時(shí)控件或長(zhǎng)期固定顯示，并且比模態(tài)彈窗能承載更多信息內(nèi)容，可通過(guò)伸縮來(lái)定義卡片中的信息數(shù)量，或多、或少、或展示、或隱藏，在頁(yè)面中非常靈活。
例如高德地圖首頁(yè)，搜索框及右側(cè)的功能入口長(zhǎng)期懸浮在地圖之上，而下方卡片中的內(nèi)容會(huì)隨著高度的伸縮自動(dòng)調(diào)節(jié)可展示的數(shù)量，非常實(shí)用。
通欄類(lèi)型的卡片具有更強(qiáng)的視覺(jué)阻斷，對(duì)區(qū)分不同的功能模塊有不錯(cuò)的效果，不過(guò)這種類(lèi)型只通過(guò)頁(yè)面背景色保留上下邊間、且不會(huì)過(guò)多，不然頁(yè)面會(huì)顯得零散、雜亂。
瀑布流主要正針對(duì)圖片較多、或以圖片為主的內(nèi)容設(shè)計(jì)，它最大的優(yōu)點(diǎn)是無(wú)需過(guò)于在意圖片的高度，最大限度的還原原始圖片效果。
卡片式設(shè)計(jì)的瀑布流對(duì)信息的組合、包容性更強(qiáng)，不僅能在單屏區(qū)域內(nèi)顯示更多內(nèi)容，同時(shí)又將每組信息組合作出了明確的劃分，在不破壞頁(yè)面整體性的基礎(chǔ)上也做到了相對(duì)獨(dú)立，如花瓣、Pinterest就是最好的例子。
信息流的展現(xiàn)方式主要以文字、圖片或視頻內(nèi)容為主，是一種較長(zhǎng)內(nèi)容的媒介，不管哪種展現(xiàn)方式，其都需要用戶(hù)耗費(fèi)較長(zhǎng)時(shí)間的滑動(dòng)、瀏覽來(lái)篩查對(duì)自己有用的信息。
卡片式設(shè)計(jì)將信息進(jìn)行分塊處理，通過(guò)阻隔的方式快速告知用戶(hù)每個(gè)卡片的核心內(nèi)容，便于用戶(hù)在長(zhǎng)時(shí)間的滑動(dòng)過(guò)程中也能快速識(shí)別重要信息。
卡片式左右滑動(dòng)組合在音樂(lè)、視頻類(lèi)產(chǎn)品中用最為廣泛，因內(nèi)容本身就圖片居多，也更適合卡片式設(shè)計(jì)，相比平鋪具有更強(qiáng)的層次感，對(duì)用戶(hù)的吸引力較強(qiáng)，尤其最右側(cè)漏出的一小部分內(nèi)容營(yíng)造出神秘的感覺(jué)，用戶(hù)會(huì)不由自主的想去滑動(dòng)以求獲取更多信息。
卡/券設(shè)計(jì)實(shí)際是把生活中的實(shí)物映射到了UI設(shè)計(jì)中，通過(guò)模擬實(shí)物造型設(shè)計(jì)成卡片樣式，有效降低用戶(hù)的理解成本，并對(duì)其有了更直觀的感知，真實(shí)感尤為強(qiáng)烈。
對(duì)于用戶(hù)主動(dòng)觸發(fā)或系統(tǒng)臨時(shí)發(fā)起的非固定性?xún)?nèi)容，利用卡片式設(shè)計(jì)會(huì)讓信息布局更靈活、視覺(jué)更突出，在不影響用戶(hù)使用的前提下，可出現(xiàn)在任何位置。
卡片式設(shè)計(jì)可以將個(gè)人中心、個(gè)人主頁(yè)、會(huì)員等頁(yè)面中的關(guān)鍵信息進(jìn)行概括，并在頭部位置進(jìn)行重點(diǎn)突出，不僅讓原本單個(gè)的內(nèi)容形成整體，還能營(yíng)造出沉浸式的氛圍。
為了保持界面設(shè)計(jì)的一致性，需要將卡片樣式納入設(shè)計(jì)規(guī)范，例如卡片是否通欄、是否需要設(shè)定圓角半徑、不同場(chǎng)景中卡片大小的劃分界限以及圓角數(shù)值的確定等，大部分情況下都需要遵循設(shè)計(jì)規(guī)范。
在同一產(chǎn)品中，雖然要遵循設(shè)計(jì)規(guī)范以確保一致性的視覺(jué)效果，但并非所有頁(yè)面都適合卡片式設(shè)計(jì)。
那么，到底是否需要采用卡片形式、使用哪種卡片類(lèi)型？這還得根據(jù)頁(yè)面內(nèi)容屬性及目標(biāo)定位來(lái)決定。例如社交產(chǎn)品中的臨時(shí)會(huì)話列表、動(dòng)態(tài)圈子使用卡片形式，很浪費(fèi)縱向空間、甚至?xí)@得很“雞肋”，用分隔線或間距留白來(lái)區(qū)分信息組顯然更合適；但對(duì)于電商類(lèi)型的產(chǎn)品，利用卡片將不同的商品分隔后又進(jìn)行歸納，會(huì)更容易識(shí)別，信息的可讀性也會(huì)更強(qiáng)。
卡片式設(shè)計(jì)本身就包含了容器與背景的層級(jí)表現(xiàn)，為了保持內(nèi)容的正常展示與用戶(hù)瀏覽體驗(yàn)，避免在卡片中嵌套多層卡片，以免信息層級(jí)雜/亂而增加用戶(hù)的視覺(jué)負(fù)擔(dān)。
如果再同一卡片中需要再次區(qū)分多個(gè)信息組，可利用間距留白、分割線或淺色背景等元素屬性來(lái)區(qū)分，依然能達(dá)到想要的效果。
因?yàn)榭ㄆ瑑?nèi)、外的雙向間距留白，在空間有限的移動(dòng)端設(shè)備中，橫向空間利用率較低，因此除了合理的減小左右間距外，還可以適當(dāng)利用左右滑動(dòng)來(lái)擴(kuò)充橫向隱性空間。
例如淘票票首頁(yè)，在1.5屏的范圍內(nèi)，幾乎每個(gè)模塊都能橫向滑動(dòng)查看更多內(nèi)容，從用戶(hù)體驗(yàn)角度出發(fā)，這是縱向空間無(wú)法比擬的。
卡片式設(shè)計(jì)不是目的，其主要是用來(lái)更好的區(qū)分信息層級(jí)、提升用戶(hù)瀏覽體驗(yàn)，因?yàn)榭ㄆ鳛楠?dú)立空間的存在，必定會(huì)增加上下間距而導(dǎo)致頁(yè)面拉長(zhǎng)，因此，如無(wú)必要，不必盲目采用卡片式設(shè)計(jì)。
例如美團(tuán)APP的「首頁(yè)、電商、購(gòu)物車(chē)、我的」4大主功能頁(yè)面都使用了卡片形式，而「消息」頁(yè)則采用分割線進(jìn)行信息分組，試想一下，如果為了統(tǒng)一規(guī)范而使用卡片，不僅造成很強(qiáng)的割裂感、還會(huì)極大的浪費(fèi)縱向空間。
這點(diǎn)不用多說(shuō)，新聞資訊類(lèi)產(chǎn)品的內(nèi)容詳情頁(yè)就是最好的證明，不管其他頁(yè)面是否采用卡片形式，但詳情頁(yè)并不會(huì)跟隨形式，一方面可以讓同屏展示更多內(nèi)容、增加空間利用率，另一方面可減少無(wú)關(guān)元素對(duì)用戶(hù)產(chǎn)生的干擾、給予沉浸式的瀏覽體驗(yàn)。
很多時(shí)候，我們總會(huì)聽(tīng)到PM說(shuō)這個(gè)很重要、那個(gè)也很重要，都需要突出一點(diǎn)，殊不知當(dāng)什么都突出了也說(shuō)明什么都沒(méi)有突出。在單個(gè)卡片中，組始終牢記這個(gè)準(zhǔn)則：一次只突出一個(gè)核心信息，以便于用戶(hù)快速、精準(zhǔn)捕捉，切記不可貪多。
卡片式設(shè)計(jì)之所有能快速流行起來(lái)且經(jīng)久不衰， 其主要得益于自身的靈活性，尤其是在跨設(shè)備、跨屏幕上有著純天然的優(yōu)勢(shì)，能忽略設(shè)備的差異給用戶(hù)提供更好的服務(wù)?？ㄆ⒉皇呛?jiǎn)單的樣式設(shè)計(jì)，它是一種自由布局的設(shè)計(jì)語(yǔ)言，通過(guò)多種方式的信息組合、結(jié)合豐富的交互操作，給用戶(hù)創(chuàng)造出極致的使用體驗(yàn)。
信息的呈現(xiàn)方式雖有不同，但最終的目的都是為了服務(wù)于內(nèi)容，卡片式設(shè)計(jì)只是其中的一種形式而已，在設(shè)計(jì)過(guò)程中，我們需要根據(jù)內(nèi)容結(jié)合實(shí)際情況作出合理的判斷，切勿拘泥于形式而忽略?xún)?nèi)容本身的重要性。
任何設(shè)計(jì)風(fēng)格及展現(xiàn)形式都有可能成為歷史，卡片式設(shè)計(jì)也不會(huì)例外，但絕對(duì)不是這么快就結(jié)束，它依然值得我們?nèi)ド罹?，力求打造更好的信息布局、更舒適的用戶(hù)體驗(yàn)。
專(zhuān)欄作家
大漠飛鷹；公眾號(hào)：能量眼球，人人都是產(chǎn)品經(jīng)理專(zhuān)欄作家。致力于產(chǎn)品需求的驅(qū)動(dòng)、產(chǎn)品體驗(yàn)的挖掘，利用設(shè)計(jì)的手段為受眾用戶(hù)帶來(lái)更好的體驗(yàn)，即好看、好用。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來(lái)自 Unsplash，基于 CC0 協(xié)議。
該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。
蘭亭妙微(www.jsyqsx.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶(hù)體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢(xún)、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢(xún)電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢(xún)及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan
天宇 移動(dòng)端UI設(shè)計(jì)文章及欣賞
底部標(biāo)簽欄的圖標(biāo)風(fēng)格在一定程度上決定了界面的風(fēng)格?？雌饋?lái)相對(duì)簡(jiǎn)單，但仍然有很多問(wèn)題值得注意。作者通過(guò)標(biāo)簽欄樣式分析、6個(gè)導(dǎo)航欄注意事項(xiàng)來(lái)總結(jié)底部標(biāo)簽欄的設(shè)計(jì)，希望通過(guò)這些內(nèi)容能幫助你對(duì)底部標(biāo)簽欄有進(jìn)一步的理解。
底部標(biāo)簽欄（也稱(chēng)導(dǎo)航欄）是移動(dòng)端設(shè)計(jì)中必備的導(dǎo)航類(lèi)型之一。底部標(biāo)簽欄上通常會(huì)安排最重要且頻繁操作的功能，方便用戶(hù)隨時(shí)都能快速訪問(wèn)。
雖然底部導(dǎo)航欄看起來(lái)相對(duì)簡(jiǎn)單，但要做到精準(zhǔn)設(shè)計(jì)，仍然有很多問(wèn)題值得注意。
本次通過(guò)標(biāo)簽欄樣式分析、六個(gè)導(dǎo)航欄注意事項(xiàng)來(lái)總結(jié)底部標(biāo)簽欄的設(shè)計(jì)～
底部標(biāo)簽欄可以是純圖標(biāo)樣式，或者圖標(biāo)與文本標(biāo)簽搭配的樣式。
選中的標(biāo)簽需要有不同的視覺(jué)風(fēng)格，可以使用按鈕、文字、圓點(diǎn)等樣式來(lái)表示選中效果，幫助用戶(hù)一目了然地定位當(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ì)。
底部標(biāo)簽欄最適合放置3-5個(gè)導(dǎo)航選項(xiàng)。移動(dòng)端屏幕相對(duì)較小，使用五個(gè)以上的選項(xiàng)會(huì)讓導(dǎo)航擠在一起，并影響可用性。
另外導(dǎo)航選項(xiàng)太多，手指的觸摸面積(紅色圓圈)會(huì)比觸摸目標(biāo)(導(dǎo)航選項(xiàng))的面積大很多，用戶(hù)有可能會(huì)意外觸發(fā)錯(cuò)誤的選項(xiàng)。
設(shè)計(jì)解析：
①如果選項(xiàng)很少，只有兩或三個(gè)時(shí)，可以考慮使用分段控件的設(shè)計(jì)樣式，將分段控件放在頁(yè)面上方作為導(dǎo)航。
② 如果選項(xiàng)很多，超過(guò)五個(gè)時(shí)，我們需要評(píng)估這些導(dǎo)航的優(yōu)先級(jí)，篩選出最重要的導(dǎo)航。如果必須要保留五個(gè)以上的導(dǎo)航選項(xiàng)，可以考慮使用類(lèi)似漢堡菜單這樣的控件。
底部標(biāo)簽欄是用戶(hù)使用頻率非常高的導(dǎo)航之一，這就需要確保目標(biāo)受眾應(yīng)該對(duì)標(biāo)簽欄中的圖標(biāo)非常清晰，避免讓用戶(hù)產(chǎn)生疑惑。
如果在設(shè)計(jì)的時(shí)候，覺(jué)得某個(gè)圖標(biāo)的含義或者樣式對(duì)用戶(hù)來(lái)說(shuō)不是特別明確，那么就需要將圖標(biāo)與文字標(biāo)簽一起使用，方便用戶(hù)快速準(zhǔn)確地理解。
圖標(biāo)的顏色對(duì)比度差、導(dǎo)航標(biāo)簽的字體小是在底部標(biāo)簽欄設(shè)計(jì)中兩個(gè)最常見(jiàn)問(wèn)題。
在底部欄設(shè)計(jì)過(guò)程中，我們不僅要區(qū)分已選標(biāo)簽和未選標(biāo)簽的狀態(tài)，保證已選標(biāo)簽更突出，還要注意觀察圖標(biāo)與文字之間、圖標(biāo)與背景之間的顏色對(duì)比度，確保未選狀態(tài)的圖標(biāo)和文字也能夠清晰易讀。
可滑動(dòng)的標(biāo)簽欄會(huì)對(duì)導(dǎo)航可見(jiàn)性產(chǎn)生影響，由于并非所有的導(dǎo)航選項(xiàng)都是一次可見(jiàn)，用戶(hù)可能很容易錯(cuò)過(guò)后面的選項(xiàng)。
另外，當(dāng)用戶(hù)左右滑動(dòng)標(biāo)簽欄時(shí)，前面已選的標(biāo)簽可能會(huì)消失，影響使用體驗(yàn)。
底部標(biāo)簽欄的空間本身就很小，因此在導(dǎo)航中使用文字時(shí)，每個(gè)字符都顯得很重要。
不要截?cái)鄻?biāo)簽，這樣會(huì)造成用戶(hù)不清楚標(biāo)簽的含義，可以嘗試使用更簡(jiǎn)練的文字來(lái)清楚地傳達(dá)選項(xiàng)含義。
花哨復(fù)雜的切換動(dòng)畫(huà)對(duì)于初次使用的用戶(hù)來(lái)說(shuō)可能看起來(lái)很酷，但是一旦用戶(hù)熟悉了產(chǎn)品并頻繁使用導(dǎo)航時(shí)，這些復(fù)雜的切換動(dòng)畫(huà)就會(huì)變得很煩人。
這些切換動(dòng)畫(huà)雖然看起來(lái)很復(fù)雜，但卻沒(méi)有為產(chǎn)品或用戶(hù)帶來(lái)任何有用的價(jià)值或信息，因此這些動(dòng)畫(huà)就會(huì)變成一種負(fù)擔(dān)，讓用戶(hù)感到沮喪。
底部標(biāo)簽欄的切換動(dòng)畫(huà)應(yīng)該干脆利落，可以使用簡(jiǎn)單的微動(dòng)效作為輔助，切莫太復(fù)雜。
以上是APP底部標(biāo)簽欄需要注意的6個(gè)設(shè)計(jì)點(diǎn)，希望通過(guò)這些內(nèi)容能幫助你對(duì)Bottom Tab Bar有進(jìn)一步的理解。
慢慢來(lái)比較快，希望對(duì)你有幫助！
參考：babch.biz/bottom-tab-bar-design
專(zhuān)欄作家
作者：Clippp，微信公眾號(hào)：Clip設(shè)計(jì)夾。每周精選設(shè)計(jì)文章，專(zhuān)注分享關(guān)于產(chǎn)品、交互、UI視覺(jué)上的設(shè)計(jì)思考。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。
題圖來(lái)自 Pixabay，基于CC0協(xié)議。
該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。
蘭亭妙微(www.jsyqsx.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶(hù)體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢(xún)、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢(xún)電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢(xún)及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan
在交互設(shè)計(jì)中，字體的呈現(xiàn)方式是提升信息傳遞效率的重要一環(huán)，文字信息層級(jí)的處理是否得當(dāng)，一定程度上會(huì)對(duì)用戶(hù)的視覺(jué)體驗(yàn)有著重要影響。那么在字體設(shè)計(jì)上，設(shè)計(jì)師或者相應(yīng)的業(yè)務(wù)人員應(yīng)該如何做好處理，以提升信息傳播的效率和質(zhì)量？不如來(lái)看看作者的總結(jié)吧。
文字是設(shè)計(jì)中的重要組成部分，就像我們平時(shí)看到的海報(bào)，里面各種被精心設(shè)計(jì)過(guò)的字體經(jīng)常會(huì)成為視覺(jué)焦點(diǎn)，以醒目且個(gè)性化方式傳達(dá)出內(nèi)容的精髓，最后達(dá)到的效果事半功倍。
雖然在UI設(shè)計(jì)中不需要對(duì)文字過(guò)分設(shè)計(jì)，但圖文作為主要的傳播途徑，字體的使用是否規(guī)范合理將直接影響著信息傳播的優(yōu)先級(jí)、重要程度以及用戶(hù)的接收質(zhì)量和效率。所以不管是平面設(shè)計(jì)還是UI設(shè)計(jì)，字體都是不可忽視的核心元素，做好對(duì)文字信息層級(jí)的處理，對(duì)用戶(hù)的視覺(jué)體驗(yàn)有著至關(guān)重要的作用。
互聯(lián)網(wǎng)經(jīng)過(guò)多年的發(fā)展，也積累的很多的專(zhuān)業(yè)字體知識(shí)，設(shè)計(jì)師應(yīng)該去了解字體的性格及特征并將其合理運(yùn)用，才能將信息更清晰地傳達(dá)給用戶(hù)。本文將圍繞著字型、字號(hào)、字距、字重等幾個(gè)屬性，針對(duì)各方面深度解析，希望能夠幫到大家。
文字是信息內(nèi)容的載體，能最直接的將信息清晰地表達(dá)出來(lái)，字體則表現(xiàn)了文字的外在特征，合理地使用這些屬性特征不僅能清晰準(zhǔn)確地傳遞信息、用于特定場(chǎng)景還能賦予情感表達(dá)，展現(xiàn)出獨(dú)特的魅力，例如：健身、器械類(lèi)的產(chǎn)品使用的字體通常會(huì)給人一種力量、剛硬、壯實(shí)的感覺(jué)，而女性專(zhuān)用產(chǎn)品字體則顯的纖細(xì)、苗條。
不同類(lèi)型的字體傳達(dá)出不同的氣質(zhì)，綜合來(lái)講，字體可分為黑體、宋體、圓體、書(shū)法體這四類(lèi)，平時(shí)大家看到的各種形形色色的其他字體，基本是通過(guò)這幾類(lèi)延伸而來(lái)。
在UI設(shè)計(jì)中，絕大多數(shù)的文字排版用的是黑體，諸如思源黑體、阿里巴巴普惠體、蘋(píng)方（ios）、微軟雅黑（PC web）等都是標(biāo)準(zhǔn)的黑體。另外，特定場(chǎng)景如瓷片區(qū)、卡片、banner、專(zhuān)題頭圖、引導(dǎo)頁(yè)、閃屏等，對(duì)于用什么字體不會(huì)有太大的限制，在避免商用侵權(quán)的前提下符合產(chǎn)品氣質(zhì)即可。
黑體字的筆畫(huà)橫平豎直、粗細(xì)均勻且字面呈正方形，一般來(lái)說(shuō)，沒(méi)有襯線的字體都可以稱(chēng)作黑體。黑體結(jié)構(gòu)清晰、簡(jiǎn)潔有力，能讓界面顯得莊重還附有現(xiàn)代感，雖然氣質(zhì)上沒(méi)有太大的個(gè)性化、但可塑性很強(qiáng)，這也是在UI設(shè)計(jì)中、黑體一直很受青睞的原因，無(wú)論是標(biāo)題、正文、提示等使用場(chǎng)景都可以作為首選，對(duì)老設(shè)計(jì)師能多一個(gè)選擇、新手設(shè)計(jì)師也不易犯錯(cuò)。
iOS與Android是移動(dòng)設(shè)備的兩大系統(tǒng)，雖然很多設(shè)計(jì)師用一稿適配兩端、遇到特殊頁(yè)面也只是單獨(dú)拎出來(lái)微調(diào)即可，但對(duì)于中、大型的互聯(lián)網(wǎng)公司則很難滿(mǎn)足優(yōu)質(zhì)用戶(hù)體驗(yàn)中的部分細(xì)微差別，例如：iOS的蘋(píng)方字體在Android設(shè)備中無(wú)法高度還原、預(yù)留的文字?jǐn)?shù)量上限位置無(wú)法顯示完整等，都會(huì)影響用戶(hù)體驗(yàn)。
此外，iOS和Android都有自己獨(dú)立的設(shè)計(jì)規(guī)范，大家有時(shí)間的可自行查看，本文只對(duì)字體規(guī)范作基本了解。
iOS使用的是「蘋(píng)方」字體，提供了6個(gè)字重，英文字體為「San Francisco」；Android使用的是Google聯(lián)合Adobe發(fā)布的「思源黑體」，為充分滿(mǎn)足設(shè)計(jì)要求，提供了7個(gè)字重，英文字體為「Roboto」。
此外，如果界面中涉及的數(shù)據(jù)較多，數(shù)字使用DIN字體也是不錯(cuò)的選擇，字體外形較長(zhǎng)，易用且耐看，很適合數(shù)據(jù)統(tǒng)計(jì)展示，不過(guò)這款字體商用的話需要收費(fèi)的。
字號(hào)的大小決定信息的層次和權(quán)重，不規(guī)律的使用字號(hào)會(huì)讓頁(yè)面信息雜亂，不利于用戶(hù)閱讀。在設(shè)定字號(hào)規(guī)范時(shí)，需特別注意最小值和遞增值。
最小值決定信息的可讀性，以2倍圖為例，iOS11系統(tǒng)將最小字號(hào)規(guī)范為11pt（22px），但很多產(chǎn)品依然將最小字號(hào)設(shè)定為20px，甚至部分產(chǎn)品將18px的數(shù)字加粗運(yùn)用在標(biāo)簽中，所以最小字號(hào)的設(shè)定并沒(méi)有固定數(shù)值，原則上不影響用戶(hù)的瀏覽就行。筆者建議最小字號(hào)不要低于20px，在設(shè)計(jì)過(guò)程中，可以通過(guò)設(shè)備實(shí)時(shí)預(yù)覽，因?yàn)橥瑯拥淖痔?hào)在不同的環(huán)境、色值、背景下，其視覺(jué)效果都有所區(qū)別。
其次，遞增值決定著信息層級(jí)區(qū)分的明顯程度，遵循字號(hào)越大、遞增值越大的原則，常用字號(hào)數(shù)量控制在6種左右。iOS和Android都是采用的2倍數(shù)柵格系統(tǒng)，為了讓字號(hào)的層級(jí)區(qū)分更明顯，字號(hào)設(shè)定要避開(kāi)奇數(shù)且最小遞增值不要低于4px，下面舉幾個(gè)常見(jiàn)的例子：
規(guī)范好的字號(hào)該如何使用，還得根據(jù)界面中的實(shí)際場(chǎng)景來(lái)決定，如下圖：
字間距是指兩個(gè)字符之間的橫向間隔距離，在界面排版中，除了西文的字間距調(diào)整需求較大外，中文通常只保持默認(rèn)，只有少數(shù)場(chǎng)景才會(huì)手動(dòng)調(diào)整，且沒(méi)有固定的規(guī)律，保持視覺(jué)舒適狀態(tài)即可。例如：banner、界面大標(biāo)題、重要數(shù)字（取件碼）顯示等。
行高是指包圍在字體之外的隱形邊框，一個(gè)字體元素的的行高等于文字上邊框+下邊框+字號(hào)的高度之和。
西文字體因高度的參差不齊，本身就能制造出視覺(jué)上的上下空間，通常行高為字號(hào)的1.2倍，而中文字體沒(méi)有上下間隙的延伸，行高則較大，一般在1.5倍左右，如果字號(hào)較小且折行較多，行高甚至能達(dá)到字號(hào)的2倍。
字重指的是字體的粗細(xì)，不同的字重能體現(xiàn)出不同的層級(jí)關(guān)系，給用戶(hù)的視覺(jué)感受也截然不同。
像蘋(píng)方、思源、阿里巴巴普惠這些家族字體一般都會(huì)有極細(xì)體、細(xì)體、常規(guī)體、黑體、粗體等多個(gè)字重，在UI設(shè)計(jì)中，實(shí)用的就常規(guī)體、加粗兩個(gè)字重，再通過(guò)色彩、字號(hào)使其成為對(duì)立關(guān)系，明顯的拉開(kāi)文字內(nèi)容層級(jí)后，方能保持良好的瀏覽體驗(yàn)。
這種主要針對(duì)標(biāo)點(diǎn)符號(hào)，以英文字母為標(biāo)準(zhǔn)，半角是指一個(gè)符號(hào)占用一個(gè)標(biāo)準(zhǔn)字符（英文）的位置，全角則是占用兩個(gè)字符位置。
眾所周知，中文使用都是全角、英文使用半角，并且會(huì)隨著中/英文的切換而自動(dòng)改變，但有時(shí)候難免會(huì)操作失誤讓頁(yè)面中的某處信息看著怪怪的卻不明所以、另外中文信息中的時(shí)間/日期也大多會(huì)使用半角符號(hào)，所以設(shè)計(jì)師對(duì)此有一定了解的時(shí)候，在處理這些細(xì)枝末節(jié)就能做到收放自如。
在色彩規(guī)范中，除主/輔助色之外，設(shè)計(jì)師還會(huì)提供3~4個(gè)等級(jí)的配色，如通用的#333（標(biāo)題）、#666（正文）、#999（提示）、#ccc（占位符），這也是UI通用的文字色用色規(guī)范，不同的字號(hào)需用色規(guī)律。
如果想進(jìn)一步延展，可以增加一點(diǎn)品牌色，也可以使用#000（純黑）調(diào)整不透明度來(lái)體現(xiàn)文字色彩層級(jí)，深色模式中很常見(jiàn)，下面我們一起來(lái)了解幾個(gè)常見(jiàn)的使用場(chǎng)景。
標(biāo)題的主要作用是讓用戶(hù)以最快的速度了解界面主要信息，需要時(shí)刻吸引用戶(hù)的注意力，例如APP中的導(dǎo)航欄、模塊標(biāo)題、內(nèi)容標(biāo)題、數(shù)據(jù)統(tǒng)計(jì)等。需要簡(jiǎn)單明了且有沖擊力，字號(hào)一般會(huì)控制在30px以上并加粗顯示，直接使用一級(jí)色值（#333）即可。
在特殊場(chǎng)景下，標(biāo)題也可以使用主體色值，但一定要注意容器背景與其他信息色彩的協(xié)調(diào)，不然花里胡哨的還不如用回一級(jí)色值。
正文并不需要吸引用戶(hù)注意力，它主要是提供標(biāo)題的注釋或內(nèi)容的詳細(xì)說(shuō)明。
當(dāng)白色背景文本內(nèi)容過(guò)多、在需要用戶(hù)仔細(xì)閱讀的情況下，一定要注意顏色不能太深，不然顯的主次不分，還有些刺眼，這里推薦26~30px字號(hào)使用二級(jí)文字（#666）色值。
提示類(lèi)文字使用場(chǎng)景就相對(duì)較多，它除了給用戶(hù)展示當(dāng)前狀態(tài)，還能給予合理的引導(dǎo)，促進(jìn)用戶(hù)進(jìn)行下一步操作。常見(jiàn)使用色值為三級(jí)（#999）、四級(jí)色值（#ccc），例如界面中的操作注意事項(xiàng)、表單占位符等。字號(hào)一般為24px，因使用場(chǎng)景不同，也會(huì)有特殊的存在，例如表單中占位符的字號(hào)會(huì)跟隨輸入后的字號(hào)統(tǒng)一。
超鏈接在字號(hào)、色值上沒(méi)有一定的限制，但需要一個(gè)特定的輔助元素/屬性來(lái)提示用戶(hù)這是可點(diǎn)擊的。
例如APP登錄頁(yè)面，找回密碼、注冊(cè)、獲取驗(yàn)證碼等，大部分都是用主體色、圖標(biāo)（右箭頭）等方式強(qiáng)化可操作入口，而PC端網(wǎng)頁(yè)中超鏈接的表現(xiàn)方式，下劃線、藍(lán)色字體、>>這三種方式幾乎能涵蓋所有。
規(guī)范并非不可更改，它只能幫助設(shè)計(jì)師在大部分使用場(chǎng)景中減少設(shè)計(jì)出入并提高產(chǎn)出效率，但總有一些使用場(chǎng)景需特殊對(duì)待，字體也不例外，如以下場(chǎng)景：
雖說(shuō)黑體（蘋(píng)方、思源、阿里巴巴普惠）是UI設(shè)計(jì)中的首選字體，但這也僅僅只是建立在不出錯(cuò)的的情況下、滿(mǎn)足基本條件而選擇，如果想表達(dá)出產(chǎn)品的類(lèi)型、情感、氣質(zhì)等品牌屬性，在不影響用戶(hù)識(shí)別的前提下，可選擇一款符合產(chǎn)品氣質(zhì)的字體，打造出差異化的瀏覽體驗(yàn)，對(duì)于追求完美的APP來(lái)時(shí)是一個(gè)不錯(cuò)的解決方案。
例如，部分藝術(shù)、女性類(lèi)的APP會(huì)選擇使用宋體，整體看起來(lái)有一種高端、時(shí)尚且優(yōu)雅的感覺(jué)。
整體界面使用特殊字體還是相對(duì)較少，為了更好的體現(xiàn)出產(chǎn)品屬性/風(fēng)格，將其融入不同的模塊及使用場(chǎng)景，會(huì)讓產(chǎn)品更有特色，例如banner、瓷片區(qū)、大標(biāo)題、頭圖等，對(duì)用戶(hù)的視覺(jué)吸引力能得到很大提升。
在一個(gè)APP中，堅(jiān)持使用同一個(gè)家族的字體，對(duì)標(biāo)題、正文等文字信息有一個(gè)統(tǒng)一的視覺(jué)規(guī)劃，這樣有助于建立起體系化的設(shè)計(jì)思路，避免在開(kāi)發(fā)落地時(shí)存在一致性問(wèn)題，減少開(kāi)發(fā)與設(shè)計(jì)的出入。
筆者曾見(jiàn)過(guò)這樣的設(shè)計(jì)師，界面中原本用了「蘋(píng)方」字體，在一個(gè)特殊場(chǎng)景下，「蘋(píng)方」的粗體字重?zé)o法滿(mǎn)足大標(biāo)題的使用需求，于是將大標(biāo)題單獨(dú)改為「阿里巴巴普惠體」的最大字重。
從表面上看，上述的設(shè)計(jì)需求是滿(mǎn)足了，但稍有不慎就會(huì)成為沒(méi)有價(jià)值的藝術(shù)品，首先，單獨(dú)一處使用不同家族的字體，會(huì)影響整體視覺(jué)的一致性；其次，若程序沒(méi)有嵌入另外的字體，產(chǎn)品落地后其視覺(jué)效果毫無(wú)改觀，且更沒(méi)有必要為了某個(gè)場(chǎng)景的使用要單獨(dú)嵌入幾十到幾百兆的家族字體，讓?xiě)?yīng)用安裝包無(wú)故加大。在設(shè)計(jì)中，有時(shí)候在解決某個(gè)問(wèn)題時(shí)，解決方案并非無(wú)可替代，加粗字體亦是如此。
另外，在可用性、實(shí)用性強(qiáng)且必要的情況下，并非不能再增加一個(gè)家族字體，例如所有標(biāo)題系列使用「阿里巴巴普惠體」、數(shù)字系列都使用「DIN」，前提是一定要形成體系化，并非某一處的使用。
在同一個(gè)界面中，字體色值、字號(hào)、字重等，都是用于區(qū)分信息層級(jí)，盡量不要使用過(guò)多的層級(jí)，避免層級(jí)混亂影響信息瀏覽。
在信息層級(jí)處理方式的四個(gè)基本原則中，「對(duì)比」就是將復(fù)雜的信息通過(guò)元素的各種屬性以不同的視覺(jué)效果呈現(xiàn)，來(lái)體現(xiàn)信息節(jié)奏感，并非是為了好看而隨意給文字賦予各種屬性及樣式效果。
避頭尾使用在文字內(nèi)容較多的折行場(chǎng)景中，主要處理標(biāo)點(diǎn)符號(hào)剛好出現(xiàn)在一行文字的開(kāi)頭或結(jié)尾時(shí)，通過(guò)自動(dòng)調(diào)整單行的字符間距、在視覺(jué)上將標(biāo)點(diǎn)符號(hào)前移或后移。
在新聞資訊類(lèi)應(yīng)用的詳情頁(yè)中，避頭尾使用的較多，用以避免頭/尾存在標(biāo)點(diǎn)符號(hào)造成視覺(jué)重量不一、信息參差不齊的問(wèn)題出現(xiàn)。
很多時(shí)候，為了區(qū)分信息層級(jí)，首先想到的是利用不同的字號(hào)、字重來(lái)體現(xiàn)，這當(dāng)然沒(méi)有問(wèn)題，但如果結(jié)合字體的明暗關(guān)系（灰度色值等級(jí)）則效果更佳。
如下圖：標(biāo)題一級(jí)色值（#333）、正文二級(jí)色值（#666）、時(shí)間日期三級(jí)色值（#999）。
備用字體只會(huì)運(yùn)用在web頁(yè)面中，如果網(wǎng)站需要一款特殊的字體才能彰顯其獨(dú)特的氣質(zhì)、同時(shí)又擔(dān)心用戶(hù)在某些設(shè)備中因?yàn)闆](méi)有這個(gè)字體而無(wú)法瀏覽其效果，則會(huì)另外再選擇一款相近的通用字體作為備選，以彌補(bǔ)視覺(jué)體驗(yàn)上的損失。
如果字體包不大，也可以讓開(kāi)發(fā)將其放在服務(wù)器端，這樣能讓所有用戶(hù)都能看到相同的效果，省去了不少麻煩。
可讀性應(yīng)該是選擇字體的首要元素，雖說(shuō)很多文字我們都可以從前后字義、聯(lián)想詞等角度將自己的理解補(bǔ)充完整，但完全沒(méi)有必要。
UI設(shè)計(jì)不像海報(bào)那樣融入較多的藝術(shù)成分，更需要的是內(nèi)容清晰、表意明確、高效率的傳達(dá)，任何增加用戶(hù)閱讀、理解成本的做法都應(yīng)該規(guī)避掉，例如過(guò)于變形的可愛(ài)風(fēng)格、書(shū)法手寫(xiě)體等都盡量少用。
文本內(nèi)容是UI界面中占比較多的元素之一，設(shè)計(jì)師需要對(duì)其基本屬性及使用場(chǎng)景有一個(gè)清晰的了解，使用的是否恰當(dāng)取決于我們對(duì)字體的選擇。雖說(shuō)在UI領(lǐng)域，字體模塊類(lèi)的文章比較少（更多是文字、字庫(kù)的設(shè)計(jì)），但它在設(shè)計(jì)規(guī)范中的地位是舉足輕重，選好一款字體對(duì)設(shè)計(jì)來(lái)說(shuō)是錦上添花。
關(guān)于UI界面中的字體，其實(shí)沒(méi)有太多的講究，也沒(méi)必要整得花里胡哨，重點(diǎn)在于排版過(guò)重中注意信息層級(jí)的劃分以及有足夠的視覺(jué)舒適度即可。
專(zhuān)欄作家
大漠飛鷹；公眾號(hào)：能量眼球，人人都是產(chǎn)品經(jīng)理專(zhuān)欄作家。致力于產(chǎn)品需求的驅(qū)動(dòng)、產(chǎn)品體驗(yàn)的挖掘，利用設(shè)計(jì)的手段為受眾用戶(hù)帶來(lái)更好的體驗(yàn)，即好看、好用。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來(lái)自 Unsplash，基于 CC0 協(xié)議。
該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。
蘭亭妙微(www.jsyqsx.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶(hù)體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢(xún)、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢(xún)電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢(xún)及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan
天宇 交互設(shè)計(jì)及用戶(hù)體驗(yàn)
大部分產(chǎn)品中都含有一些引導(dǎo)幫助的功能，這些功能有什么作用呢？對(duì)于設(shè)計(jì)者來(lái)說(shuō)，應(yīng)該秉持怎樣的初心來(lái)設(shè)計(jì)呢？目前，引導(dǎo)幫助功能又有哪些常見(jiàn)的分類(lèi)呢？帶著這些問(wèn)題，我們一起走進(jìn)這篇文章，看看作者為我們的分享。推薦相關(guān)人員閱讀與學(xué)習(xí)。
前幾天眼睛不太舒服，去醫(yī)院做了一個(gè)檢查（視疲勞導(dǎo)致）。
因?yàn)橐呱瘫?，所以需要使用社?？?，之前我記得社保結(jié)算都需要去人工窗口，我剛過(guò)去就被一個(gè)穿著紅馬褂的大媽攔住說(shuō)自助機(jī)也可以用社保，要我掃她胸前掛的碼（可以快速到達(dá)電子社保二維碼界面），掃完她就開(kāi)始幫我點(diǎn)擊操作。
她覺(jué)得我應(yīng)該不會(huì)操作，所以讓我看一遍，其實(shí)這個(gè)操作并不難，只是因?yàn)槲也恢雷灾鷻C(jī)上可以用，自助機(jī)周?chē)矝](méi)引導(dǎo)操作流程。而且她這種方式讓很多年紀(jì)大的人和外地過(guò)來(lái)看病的覺(jué)得你是個(gè)騙子，后面好幾個(gè)人都還是去了窗口。
在B端產(chǎn)品中也有很多類(lèi)似問(wèn)題，用戶(hù)不知道有這個(gè)功能、也不知道這個(gè)功能怎么使用，特別是一些數(shù)據(jù)類(lèi)產(chǎn)品，專(zhuān)業(yè)性比較強(qiáng)。產(chǎn)品、技術(shù)都認(rèn)為用戶(hù)和他們一樣都懂，實(shí)際上并不是，這個(gè)時(shí)候你需要提供一些邀請(qǐng)，引導(dǎo)用戶(hù)進(jìn)行使用。
邀請(qǐng)就是引導(dǎo)用戶(hù)進(jìn)行操作前的提醒和暗示，通常包括實(shí)時(shí)的提示信息和預(yù)期功能，以表明在當(dāng)前界面或下個(gè)界面可以做什么，這是成功的交互式界面關(guān)鍵所在。
例如：飛書(shū)-我的空間，當(dāng)鼠標(biāo)停留在可編輯區(qū)域上時(shí)，就會(huì)實(shí)時(shí)地顯示邀請(qǐng)（復(fù)選框），這個(gè)例子的缺點(diǎn)是鼠標(biāo)如果不處于相應(yīng)區(qū)域上，就不會(huì)顯示邀請(qǐng)。
另一種方案是任何時(shí)候都顯示邀請(qǐng)，例如：石墨文檔-我的桌面，復(fù)選框一直顯示。
靜態(tài)邀請(qǐng)就是通過(guò)直接在頁(yè)面上給出交互提示，可以讓用戶(hù)隨時(shí)看到期望的界面功能。
靜態(tài)邀請(qǐng)主要有兩種模式：引導(dǎo)操作邀請(qǐng)、漫游探索邀請(qǐng)。
01 步驟引導(dǎo)
例如：華為云HECS服務(wù)器產(chǎn)品就給出1、2、3操作步驟
引導(dǎo)操作會(huì)占據(jù)頁(yè)面較大的空間，同時(shí)也會(huì)吸引用戶(hù)的眼球。所以在設(shè)計(jì)時(shí)需要思考一下，你希望引導(dǎo)用戶(hù)執(zhí)行什么操作，用戶(hù)是否可以多次查看，這樣有利于設(shè)計(jì)出明晰的頁(yè)面和信息層。
02 白板引導(dǎo)
另一種引導(dǎo)操作邀請(qǐng)叫白板式引導(dǎo)。
意思很明確：現(xiàn)在只有一個(gè)空白頁(yè)面，需要引導(dǎo)用戶(hù)創(chuàng)建內(nèi)容。
利用空白區(qū)域“變廢為寶”，如何對(duì)該區(qū)域應(yīng)有的功能給出提示，是誘導(dǎo)用戶(hù)創(chuàng)建內(nèi)容（填補(bǔ)空白）的有效方式。
與引導(dǎo)操作邀請(qǐng)關(guān)系密切的是漫游探索邀請(qǐng)。假設(shè)你重新設(shè)計(jì)了某個(gè)頁(yè)面并添加了一組全新的功能，怎樣才能保證用戶(hù)恰當(dāng)?shù)厥褂眯马?yè)面，同時(shí)發(fā)現(xiàn)新添加的功能呢？漫游邀請(qǐng)是向用戶(hù)介紹新功能最好的方法。
最佳實(shí)踐：
靜態(tài)邀請(qǐng)適合提示用戶(hù)當(dāng)前界面中包含什么功能。然而，許多調(diào)查試驗(yàn)表明，用戶(hù)經(jīng)常不會(huì)閱讀指導(dǎo)說(shuō)明性的文字。而在用戶(hù)交互過(guò)程中，在他們需要的時(shí)候提供邀請(qǐng)則是一種不錯(cuò)的方式。動(dòng)態(tài)邀請(qǐng)就是在用戶(hù)交互過(guò)程中的某個(gè)點(diǎn)上吸引用戶(hù)，并引導(dǎo)他們繼續(xù)下一步操作。
吸引用戶(hù)的一種方式是通過(guò)鼠標(biāo)懸停來(lái)顯示邀請(qǐng)
例如：飛書(shū)消息列表鼠標(biāo)移入后， 背景變化的同時(shí)會(huì)有一個(gè)“勾”圖標(biāo)來(lái)吸引用戶(hù)，鼠標(biāo)移入上去后提示可以點(diǎn)擊完成，點(diǎn)擊后消息移除列表。
最佳實(shí)踐
唐納德·諾曼將這個(gè)術(shù)語(yǔ)引入到設(shè)計(jì)領(lǐng)域。最經(jīng)典的例子是門(mén)把手，門(mén)把手的預(yù)期功能是可以抓握、扭轉(zhuǎn)或按壓。屏幕元素可感知的預(yù)期功能沒(méi)有物理屬性，不過(guò)，由于習(xí)慣、術(shù)語(yǔ)、圖形及一致性等原因，用戶(hù)能夠在某種程度上感覺(jué)到他們可以操作這些元素。
例如：第一張圖飛書(shū)文檔sheet頁(yè)“加號(hào)”圖標(biāo)與第二張圖“三個(gè)點(diǎn)”圖標(biāo)，就是一種預(yù)期功能邀請(qǐng)。用戶(hù)沒(méi)觸發(fā)之前就能猜到觸發(fā)后會(huì)是什么效果。
預(yù)期功能邀請(qǐng)之所以有效，是因?yàn)槔萌藗円阎牧?xí)慣與認(rèn)知引入交互，從而讓用戶(hù)順利完成一連串操作。
最佳實(shí)踐
設(shè)計(jì)邀請(qǐng)時(shí)怎么才能猜測(cè)用戶(hù)的想法，也是一項(xiàng)重要挑戰(zhàn)。如果用戶(hù)下一步可能會(huì)執(zhí)行多種操作，而事實(shí)上又不可能準(zhǔn)確判斷用戶(hù)想法，那么面臨的困難就會(huì)比想象的大很多。
在google sketchup （ 3D）繪圖工具中，當(dāng)鼠標(biāo)點(diǎn)擊某個(gè)點(diǎn)后，進(jìn)行第二個(gè)點(diǎn)連接時(shí)，會(huì)有多種可能性，這個(gè)時(shí)候系統(tǒng)也不確定用戶(hù)會(huì)怎樣連接，但會(huì)給出對(duì)應(yīng)的提示，比如：端點(diǎn)、中點(diǎn)、背面、側(cè)面等點(diǎn)位來(lái)輔助用戶(hù)進(jìn)行連接。
例如：這種工作流場(chǎng)景個(gè)人覺(jué)得也算是一種，點(diǎn)擊“加號(hào)”右側(cè)會(huì)滑出面板，給出你可以添加的動(dòng)作。
這種在交互期間以可見(jiàn)方式向用戶(hù)表明系統(tǒng)推斷出的用戶(hù)想法被稱(chēng)為推論邀請(qǐng)。
圖片類(lèi)型的更多邀請(qǐng)，例如：站酷相關(guān)推薦
文字更多邀請(qǐng)，例如：QQ郵箱右側(cè)最近聯(lián)系人
精心設(shè)計(jì)的應(yīng)用能夠通過(guò)邀請(qǐng)?bào)w現(xiàn)出各自的細(xì)微差別，無(wú)論是靜態(tài)還是動(dòng)態(tài)，都是引導(dǎo)用戶(hù)順利進(jìn)入下一個(gè)交互層次的有效方法。
謝謝觀看！
作者：夜鶯YEAH；公眾號(hào)：夜鶯B端UX設(shè)計(jì)
本文由 @夜鶯YEAH 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載
題圖來(lái)自 Unsplash，基于 CC0 協(xié)議
該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。
蘭亭妙微(www.jsyqsx.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶(hù)體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢(xún)、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢(xún)電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢(xún)及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan
天宇 交互設(shè)計(jì)及用戶(hù)體驗(yàn)
在視頻播放器中，合理的手勢(shì)交互設(shè)計(jì)可以幫助用戶(hù)提升操作上的便捷性，從而實(shí)現(xiàn)更快捷的觸達(dá)。那么如果想在已有的手勢(shì)交互上實(shí)現(xiàn)設(shè)計(jì)升級(jí)，產(chǎn)品或設(shè)計(jì)一側(cè)可以怎么做？本篇文章里，作者針對(duì)手勢(shì)交互優(yōu)化一事進(jìn)行了解讀，一起來(lái)看。
視頻播放器中承載著極其豐富的內(nèi)容畫(huà)面和播控功能，尤其是在寸土寸金的移動(dòng)端視頻播放器中，為使內(nèi)容更沉浸消費(fèi)，需盡可能克制界面中的功能元素/入口直接外露?；诖朔N場(chǎng)景下，合理的手勢(shì)設(shè)計(jì)不但可為界面“減負(fù)”，還可幫助用戶(hù)更快捷觸達(dá)功能、提升操控便捷性。
視頻場(chǎng)景中目前已有部分的常規(guī)單向手勢(shì)已被用戶(hù)廣泛接受并形成習(xí)慣認(rèn)知，如「單擊 →暫?！?、「雙擊→點(diǎn)贊」、「長(zhǎng)按→快進(jìn)」、「橫滑→導(dǎo)航」、「縱滑→切視頻」、「雙指捏合→縮放視窗」等通用手勢(shì)。
那么如何在保留用戶(hù)對(duì)于常規(guī)通用手勢(shì)認(rèn)知的基礎(chǔ)上，進(jìn)一步對(duì)視頻場(chǎng)景中的手勢(shì)交互進(jìn)行擴(kuò)容升級(jí)？這也是我們接下來(lái)在手勢(shì)進(jìn)階交互上的重點(diǎn)探索方向。
本次針對(duì)百度APP中的視頻播放器場(chǎng)景，為提升手勢(shì)操控效率，我們?cè)噲D將常規(guī)的基礎(chǔ)通用手勢(shì)進(jìn)行打散重組、并結(jié)合實(shí)踐案例梳理出「組合手勢(shì)」設(shè)計(jì)模型，以探索如何在視頻場(chǎng)景中構(gòu)建便捷高效的進(jìn)階手勢(shì)體驗(yàn)設(shè)計(jì)。
「組合手勢(shì)」是基于常規(guī)手勢(shì)的組合擴(kuò)展，其通常由兩種或兩種以上的常規(guī)基礎(chǔ)手勢(shì)所構(gòu)成，若組合方式及使用場(chǎng)景得當(dāng)，可助力用戶(hù)更便捷的觸達(dá)功能。
以前述的視頻場(chǎng)景常規(guī)手勢(shì)為例，其觸發(fā)機(jī)制一般可分為兩個(gè)階段：step1交互信號(hào)→step2執(zhí)行任務(wù)，即用戶(hù)通過(guò)某一基礎(chǔ)手勢(shì)發(fā)出交互信號(hào)，系統(tǒng)收到信號(hào)確認(rèn)后便可立即執(zhí)行任務(wù)，但整個(gè)過(guò)程是線性的，手勢(shì)擴(kuò)展性十分有限且難以滿(mǎn)足視頻場(chǎng)景對(duì)于手勢(shì)擴(kuò)容的訴求。
于是我們?cè)诂F(xiàn)有常規(guī)手勢(shì)兩階段觸發(fā)機(jī)制的基礎(chǔ)上，嘗試引入「意圖識(shí)別」環(huán)節(jié)，并梳理出「組合手勢(shì)」的設(shè)計(jì)模型，以探索不同基礎(chǔ)手勢(shì)相互組合后的擴(kuò)展可行性。
「組合手勢(shì)」觸發(fā)一般可分為三個(gè)階段：step1交互信號(hào)→step2意圖識(shí)別→step3執(zhí)行任務(wù)，前兩階段均可由對(duì)應(yīng)的基礎(chǔ)分支手勢(shì)構(gòu)成并進(jìn)行組合搭配、以尋求最高效的手勢(shì)組合觸發(fā)路徑。
由于「組合手勢(shì)」并不像常規(guī)手勢(shì)那樣早已被系統(tǒng)定義為可供直接調(diào)用的接口，因此，其差異化創(chuàng)新具有較大設(shè)計(jì)靈活度，尤其需根據(jù)具體的使用場(chǎng)景進(jìn)行綜合考量。
百度APP視頻場(chǎng)景早期的播控功能較少，如“視頻下載”等個(gè)別特色功能入口一般都融合于基礎(chǔ)菜單之中。
隨著后續(xù)視頻場(chǎng)景的功能建設(shè)日漸完善，我們便在基礎(chǔ)菜單面板中拓展了一行視頻菜單，專(zhuān)門(mén)用于承載視頻場(chǎng)景特有的播控功能。但當(dāng)前播控功能已達(dá)10余項(xiàng)，菜單面板彈出后還需左滑才可露出后面的功能入口，因此也常收到用戶(hù)反饋找不到常用功能、菜單面板功能排布無(wú)章且觸發(fā)成本高。
通過(guò)對(duì)競(jìng)品進(jìn)行調(diào)研，我們發(fā)現(xiàn)競(jìng)品均有使用長(zhǎng)按手勢(shì)作為切入口以觸發(fā)相關(guān)播控功能、并歸納出“視頻播控觸發(fā)”目前主流的三種長(zhǎng)按交互選型， 分別為：長(zhǎng)按觸發(fā)獨(dú)立播控面板、長(zhǎng)按觸發(fā)浮層播控選項(xiàng)、長(zhǎng)按觸發(fā)特定播控功能。
1）長(zhǎng)按手勢(shì)交互擴(kuò)容
針對(duì)目前視頻播控菜單存在的問(wèn)題，經(jīng)過(guò)和業(yè)務(wù)對(duì)上述三種長(zhǎng)按交互選型方案進(jìn)行綜合考量，最終決定聚焦于以方案“選型B”的「長(zhǎng)按觸發(fā)浮層播控選項(xiàng)」作為設(shè)計(jì)切入點(diǎn)。我們意圖將部分高頻播控功能從基礎(chǔ)菜單中拿出進(jìn)行前置，并探索一套更便捷的觸發(fā)機(jī)制，以此對(duì)視頻場(chǎng)景中的播控菜單進(jìn)行設(shè)計(jì)升級(jí)。
但隨之而來(lái)的難點(diǎn)是我們目前播放器中的長(zhǎng)按手勢(shì)已被“快進(jìn)”功能占據(jù)，用戶(hù)對(duì)此功能的使用頻率高、并已形成較深的操控認(rèn)知，若直接下線“快進(jìn)”功能則會(huì)對(duì)用戶(hù)使用習(xí)慣產(chǎn)生較大影響，尤其是視頻場(chǎng)景的重度用戶(hù)。
那么如何在兼容用戶(hù)已有長(zhǎng)按操作習(xí)慣的基礎(chǔ)上再拓展“快捷菜單”呢？是否有可能將“快進(jìn)”和“快捷菜單”進(jìn)行融合？這也是本次項(xiàng)目對(duì)于便捷手勢(shì)體驗(yàn)的重要設(shè)計(jì)探索點(diǎn)。
基于此，我們決定嘗試使用「組合手勢(shì)」設(shè)計(jì)模型來(lái)對(duì)視頻播放器中的長(zhǎng)按手勢(shì)進(jìn)行重新定義，通過(guò)「長(zhǎng)按+滑選」的機(jī)制觸發(fā)快捷菜單功能項(xiàng)，以縮短視頻常用功能路徑。對(duì)應(yīng)到設(shè)計(jì)模型的三個(gè)階段分別為：
2）容錯(cuò)性兼容
在設(shè)定「長(zhǎng)按+滑選」組合手勢(shì)的同時(shí)，考慮到兼容主流的長(zhǎng)按習(xí)慣、以及對(duì)于滑選手勢(shì)需要有一定的適應(yīng)過(guò)程，我們同時(shí)也支持點(diǎn)選的操作模式，即用戶(hù)長(zhǎng)按后若未產(chǎn)生滑選行為便松手，則松手后依然可通過(guò)點(diǎn)選的方式觸發(fā)對(duì)應(yīng)播控功能項(xiàng)。
3）易用性打磨
差異化的創(chuàng)新設(shè)計(jì)形式在前期總會(huì)面臨質(zhì)疑和挑戰(zhàn)，本次項(xiàng)目也不例外。我們擔(dān)心用戶(hù)能否接受并認(rèn)知「長(zhǎng)按+滑選」組合手勢(shì)的操作形式，于是在DEMO開(kāi)發(fā)完成后便進(jìn)行了一次小范圍內(nèi)的定性可用性測(cè)試，以預(yù)期在上線前可先收集一波體驗(yàn)問(wèn)題進(jìn)行快速打磨優(yōu)化。
我們根據(jù)測(cè)試目標(biāo)、用戶(hù)類(lèi)別、測(cè)試前序準(zhǔn)備及測(cè)試步驟等環(huán)節(jié)提前擬好必要的測(cè)試腳本，并邀請(qǐng)了10+名不同年齡段的目標(biāo)用戶(hù)進(jìn)行訪談測(cè)試。
測(cè)試訪談的過(guò)程中，被測(cè)用戶(hù)在進(jìn)行1至2次嘗試操作之后，均可掌握如何使用「長(zhǎng)按+滑選」的組合手勢(shì)，這也為我們?cè)鎏砹瞬簧傩判摹?/p>
同時(shí)，我們通過(guò)觀察用戶(hù)操作行為及用戶(hù)主動(dòng)反饋，發(fā)現(xiàn)仍有部分易用性細(xì)節(jié)可進(jìn)一步打磨優(yōu)化。
① 擴(kuò)展觸發(fā)熱區(qū)
考慮到單手握持手機(jī)的使用場(chǎng)景，可盡可能擴(kuò)大定義長(zhǎng)按手勢(shì)的觸發(fā)熱區(qū)，屏幕中除頂/底bar框架區(qū)以及本身就自帶長(zhǎng)按事件的按鈕入口之外，其它大面積區(qū)域熱區(qū)均可支持長(zhǎng)按觸發(fā)快捷菜單，以降低觸發(fā)難度、提升易用性。
② 支持跟手觸發(fā)
長(zhǎng)按后浮出的快捷功能項(xiàng)，其浮出位置支持跟隨手指的縱向觸發(fā)位置而浮出，可減少手指在屏幕上的位移距離、操控更便捷。
③ 實(shí)時(shí)提示及響應(yīng)反饋
靈活判斷當(dāng)前手勢(shì)觸控狀態(tài)（如滑入選擇 / 松手觸發(fā)），在界面中即時(shí)給出相對(duì)應(yīng)的引導(dǎo)提示或振感反饋，以幫助用戶(hù)快速適應(yīng)新的手勢(shì)觸發(fā)機(jī)制。
以AB實(shí)驗(yàn)對(duì)本次設(shè)計(jì)方案進(jìn)行定量測(cè)試驗(yàn)證：
小流量實(shí)驗(yàn)上線后，經(jīng)過(guò)近半個(gè)月的觀察，大盤(pán)指標(biāo)穩(wěn)定、播放完成率等滿(mǎn)意度指標(biāo)穩(wěn)步提升。
「實(shí)驗(yàn)組」長(zhǎng)按快捷菜單中的功能使用率相對(duì)「對(duì)照組」均有大幅提升，說(shuō)明用戶(hù)對(duì)部分高頻功能的確有很強(qiáng)的快捷觸發(fā)訴求。
「實(shí)驗(yàn)組」的“快進(jìn)”雖多了一步觸發(fā)步長(zhǎng)，實(shí)驗(yàn)前期“快進(jìn)”使用率不及「對(duì)照組」，但隨著用戶(hù)對(duì)于「長(zhǎng)按+滑選」手勢(shì)整體的使用占比持續(xù)走高，通過(guò)滑選觸發(fā)“快進(jìn)”的操作習(xí)慣也快速被培養(yǎng)起來(lái)，對(duì)于用戶(hù)來(lái)說(shuō)，長(zhǎng)按快捷菜單帶來(lái)的整體收益是大于折損的。
隨著長(zhǎng)按快捷菜單的上線推全，長(zhǎng)按手勢(shì)的滲透率也持續(xù)走高，用戶(hù)逐漸對(duì)視頻場(chǎng)景更多的播控功能有了長(zhǎng)按觸發(fā)的訴求，于是我們對(duì)長(zhǎng)按菜單進(jìn)行了二期的設(shè)計(jì)升級(jí)，在長(zhǎng)按浮層最右側(cè)新增“更多”快捷入口以承接視頻場(chǎng)景所有的播控功能，用戶(hù)通過(guò)長(zhǎng)按后的可選播控項(xiàng)增多，播控功能整體的使用量得到進(jìn)一步提升。
手勢(shì)交互是用戶(hù)在現(xiàn)實(shí)世界行為的映射，無(wú)論是基礎(chǔ)手勢(shì)還是組合類(lèi)高級(jí)手勢(shì)，都須符合用戶(hù)認(rèn)知習(xí)慣、并融入具體的使用場(chǎng)景中進(jìn)行設(shè)計(jì)。
以「組合手勢(shì)」設(shè)計(jì)模型為指導(dǎo)基礎(chǔ)、并結(jié)合具體的項(xiàng)目實(shí)踐，我們進(jìn)一步對(duì)視頻播放器中更多功能場(chǎng)景進(jìn)行了便捷手勢(shì)的設(shè)計(jì)擴(kuò)容探索。
“小窗播放”旨在退出當(dāng)前視頻落地頁(yè)、并可將當(dāng)前視頻切換成以懸浮視窗的形式進(jìn)行延續(xù)消費(fèi)。
基于用戶(hù)的此種操控意圖，我們以“右滑返回手勢(shì)”發(fā)出交互信號(hào)而觸發(fā)浮出小窗入口，隨后系統(tǒng)根據(jù)用戶(hù)“縱向拖拽手勢(shì)”的行為來(lái)判斷其是否有激活小窗的意圖，若有短距上滑拖拽行為，松手釋放即可快捷激活視頻小窗，以提升觀看體驗(yàn)的連續(xù)性。
“雙指拖拽手勢(shì)”可拖拽并清屏視窗畫(huà)面，以此手勢(shì)發(fā)出交互信號(hào)，若在“雙指拖拽手勢(shì)”基礎(chǔ)上有識(shí)別到“雙指擴(kuò)張手勢(shì)”行為，則松手釋放即可快捷激活“滿(mǎn)屏播放”，以滿(mǎn)足更沉浸視頻瀏覽體驗(yàn)。
便捷手勢(shì)的設(shè)計(jì)出發(fā)點(diǎn)是為提升操控效率、縮減功能觸發(fā)路徑，從而使視頻內(nèi)容更沉浸消費(fèi)。希望本次基于視頻播放器場(chǎng)景的手勢(shì)體驗(yàn)設(shè)計(jì)實(shí)踐能給大家?guī)?lái)幫助和啟發(fā)，后續(xù)我們也將持續(xù)深耕視頻領(lǐng)域、并進(jìn)一步探索更貼合用戶(hù)使用場(chǎng)景的手勢(shì)交互體驗(yàn)。
作者：百度APP用戶(hù)體驗(yàn)
來(lái)源公眾號(hào)：百度MEUX（ID：baidumeux），百度移動(dòng)生態(tài)用戶(hù)體驗(yàn)設(shè)計(jì)中心，負(fù)責(zé)百度移動(dòng)生態(tài)體系的用戶(hù)/商業(yè)產(chǎn)品的全鏈路體驗(yàn)設(shè)計(jì)。
本文由人人都是產(chǎn)品經(jīng)理合作媒體 @百度MEUX 授權(quán)發(fā)布，未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來(lái)自Unsplash，基于 CC0 協(xié)議
該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。
蘭亭妙微(www.jsyqsx.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶(hù)體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢(xún)、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢(xún)電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢(xún)及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.jsyqsx.cn