編輯導(dǎo)讀：人是視覺(jué)動(dòng)物，相比于文字，人們更容易被圖片吸引。而如何在界面設(shè)計(jì)中運(yùn)用好圖片，給用戶(hù)更好的視覺(jué)體驗(yàn)，本文作者有自己的想法，一起來(lái)看看吧。

在UI設(shè)計(jì)中，配圖的好壞將直接影響著界面的品質(zhì)及用戶(hù)的視覺(jué)體驗(yàn)?？v觀如今高質(zhì)量的界面設(shè)計(jì)，具有設(shè)計(jì)感的配圖不僅是吸引用戶(hù)的重要元素，能比原本平淡無(wú)奇的文字界面更讓人產(chǎn)生點(diǎn)擊欲望，還能體現(xiàn)出設(shè)計(jì)師的品味、以及相關(guān)方面的專(zhuān)業(yè)性。

在這個(gè)快節(jié)奏的時(shí)代，相比文字，圖像的傳達(dá)效率會(huì)更快、更高、更有助于用戶(hù)輕松理解及記憶。配圖用的好，往往能起到?jīng)Q定畫(huà)面基調(diào)、流程引導(dǎo)、視覺(jué)平衡等關(guān)鍵作用，所以，在同等樣式的布局下，因圖片的使用及處理方式的不同，界面的品質(zhì)也會(huì)存在較大的差異。本篇文章將介紹一些在UI設(shè)計(jì)中配圖的基礎(chǔ)知識(shí)，幫助大家在圖片列表、背景處理、圖文混排、頭圖等相關(guān)界面設(shè)計(jì)無(wú)從下手時(shí)提供靈感，在選擇圖片、后續(xù)處理時(shí)如何做到有規(guī)律可循帶來(lái)一些思路。

一、了解UI設(shè)計(jì)中的圖片

1. 為什么要重視圖片

在文字出現(xiàn)之前，人們都是靠看到的圖像來(lái)理解信息內(nèi)容，即便后來(lái)文字能表達(dá)出很豐富的內(nèi)容，圖示也不可少，試想一下，當(dāng)別人拿著密密麻麻的數(shù)據(jù)給你看時(shí)，能看的頭皮發(fā)麻，你更希望有一張清晰的圖表，但并不能說(shuō)明別人的數(shù)據(jù)不清晰。所以，圖像相比文字能更具說(shuō)服力、更容易傳達(dá)信息，使讀者產(chǎn)生共鳴、震撼內(nèi)心，讓人看了一目了然，能直觀的與人產(chǎn)生互動(dòng)。

當(dāng)說(shuō)到UI設(shè)計(jì)中的圖片非常重要時(shí)，并不是說(shuō)文字就一定比圖片弱，好的文字也能帶給我們無(wú)限的遐想，只能說(shuō)在更大的概率上圖片和文字哪個(gè)更吸引人，所以我更傾向于觀賞圖片，然后感受到帶來(lái)的美好。但是，如果非要問(wèn)我選擇哪一個(gè)時(shí)，我只能說(shuō)“只有小孩子才做選擇題，我（設(shè)計(jì)師）全都要”，圖片可以表達(dá)出豐富的內(nèi)容，再用文字言簡(jiǎn)意賅，是一個(gè)非常完美的組合。

2. 常用的圖片格式

圖片有多種格式，如JPG、GIF、PNG、TIFF、RAW、BMP、WEBP…等，在UI設(shè)計(jì)中，最常用的無(wú)非JPG、GIF、PNG三種。

JPG：目前為止使用最多的圖片格式，兼容各大操作系統(tǒng)瀏覽器及編輯軟件，非常方便被打開(kāi)和處理，但不能顯示透明底，壓縮后會(huì)失去一部分原始信息。

PNG：如需編輯，PNG應(yīng)該算是所有圖片格式中的最佳選擇，支持無(wú)損壓縮及透明底，但針對(duì)需要高保真的復(fù)雜圖片，壓縮后的文件較大，且有少數(shù)的瀏覽器不支持。

GIF：動(dòng)效圖片，支持透明底及無(wú)損壓縮，通常由視頻格式的內(nèi)容轉(zhuǎn)換而來(lái)，但對(duì)色彩有非常嚴(yán)格的要求，數(shù)量最多不超過(guò)256種，相比前面兩種，GIF格式的文件更大。

二、圖片的使用及處理方法

1. 圖片的使用比例

在移動(dòng)端UI設(shè)計(jì)中，我歸納了最常用的幾個(gè)圖片比例，分別是1:1、3:2、4:3、16:9四種，這些比例都是源于最早的膠片攝影及現(xiàn)代相機(jī)的傳感器演變而來(lái)。當(dāng)我們不知如何選擇比例時(shí)，首先需清楚的了解界面圖片的應(yīng)用場(chǎng)景、來(lái)源用戶(hù)以及圖片比例背后的緣由，否則將很難把控，下面將針對(duì)這幾個(gè)比例作具體分析。

1）1:1 比例

因?yàn)橄鄼C(jī)結(jié)構(gòu)的原因，早期最傳統(tǒng)的120膠片畫(huà)幅就是正方形（6*6cm），即1：1的比例，此比例更容易的將構(gòu)圖規(guī)整，使其最大程度的突出照片主體。

在如今的電商APP中，商品圖片絕大多數(shù)都遵循了1：1的比例，不管橫向還是縱向都能將信息進(jìn)行完整化的展示，且方便多場(chǎng)景、頁(yè)面的適配。另外，用戶(hù)頭像也都使用了這一比例。

2）3:2比例

起初135膠卷的比例就是3：2，主要是因相機(jī)取景框的大小而決定。在移動(dòng)端，這一比例使用也比較廣泛，例如新聞、旅游類(lèi)型產(chǎn)品，在拍照之后無(wú)需裁剪等處理，直接上傳使用，非常方便。

3）4:3比例

隨著攝影的發(fā)展，小/微型相機(jī)出現(xiàn)而誕生4：3比例，且移動(dòng)設(shè)備發(fā)展迅速，在非專(zhuān)業(yè)攝影的情況下，手機(jī)能很大程度上代替單反并成為主流拍照設(shè)備，目前市場(chǎng)上主流手機(jī)的拍攝尺寸基本都為4：3比例。相比3：2的圖片，4：3圖片占比更大，能最大化顯示圖片以突出重點(diǎn)信息。

4）16:9比例

根據(jù)人體工程學(xué)的研究，人眼視野范圍的比例約為16：9的長(zhǎng)方形，所以電視、顯示器及投影范圍的設(shè)計(jì)都是基于這個(gè)黃金比例。

線(xiàn)上產(chǎn)品不用多說(shuō)，影視類(lèi)型的產(chǎn)品均采用16：9的尺寸，例如愛(ài)奇藝、優(yōu)酷、騰訊視頻等，到目前為止，這個(gè)比例在設(shè)定上還沒(méi)出現(xiàn)過(guò)問(wèn)題。

在上述4個(gè)尺寸中，最容易混淆的是3：2和4：3，如果不清楚如何選擇，請(qǐng)根據(jù)產(chǎn)品目標(biāo)定位，看看到底是以?xún)?nèi)容為主導(dǎo)還是圖片為主導(dǎo)。例如：資訊類(lèi)型產(chǎn)品很注重標(biāo)題文案，即會(huì)使用上文下圖、左文右圖的版式，選擇3：2作為封面，以降低圖片的視覺(jué)重量；旅游、租房類(lèi)產(chǎn)品，則可使用4：3的圖片，以傳達(dá)更多信息。這種選擇方式雖然不是絕對(duì)，但當(dāng)我們陷入兩難的困境時(shí)，可作為參考依據(jù)幫助快速?zèng)Q策。

2. 圖片的使用場(chǎng)景

1）單圖布局

全屏：具有很強(qiáng)的視覺(jué)沖擊力，非常適合用于傳播行業(yè)屬性及品牌調(diào)性。單圖全屏布局處理靈活，可整體突出、局部特寫(xiě)或加純色不透明度紋理/遮罩，對(duì)圖片細(xì)節(jié)、構(gòu)圖等有較高的質(zhì)量要求，一般用于登錄、啟動(dòng)引導(dǎo)、產(chǎn)品介紹背景等頁(yè)面。

卡片：以單張圖片作為視覺(jué)引導(dǎo)，寬高不固定，但占據(jù)界面大部分區(qū)域及重要位置，主要突出產(chǎn)品調(diào)性和成為吸引用戶(hù)的流量入口，促使用戶(hù)與其產(chǎn)生交互行為。常用于產(chǎn)品詳情頁(yè)頭圖、推薦頁(yè)、專(zhuān)題入口等。

2）圖文列表

在圖文列表界面，很多時(shí)候，我們都在想一個(gè)問(wèn)題，到底是選擇左圖右文、左文右圖還是上圖下文？所以我們首先要明白F式（從上到下、從左到右）瀏覽布局，這也跟人眼的瀏覽習(xí)慣相吻合，然后確定圖、文信息內(nèi)容的權(quán)重，根據(jù)優(yōu)先級(jí)將重要的信息放在關(guān)鍵位置。

單列組合

左文右圖：以文字為主、圖片為輔，主要強(qiáng)調(diào)文字信息，且圖片與標(biāo)題的關(guān)聯(lián)性不是很大，能減少減少圖片對(duì)文字的干擾，對(duì)圖片的質(zhì)量要求不高，很多新聞、資訊類(lèi)產(chǎn)品都是選用這種方式布局。

左圖右文：在圖片內(nèi)容優(yōu)先于文本內(nèi)容的情況下，采用左圖右文的方式，更強(qiáng)調(diào)以圖片直觀的傳達(dá)內(nèi)容、吸引用戶(hù)的視線(xiàn)，對(duì)圖片的質(zhì)量要求高于左文右圖，一般是電商、旅游類(lèi)產(chǎn)品的最佳之選。

上圖下文：一行只顯示一張圖片，大多采用橫圖，同屏一般不超過(guò)兩個(gè)內(nèi)容，用戶(hù)需要從圖片中獲取大量信息，對(duì)圖片的質(zhì)量要求很高，大多有專(zhuān)門(mén)的人員審核，以完成對(duì)圖片的品質(zhì)的把控。這種方式很占用界面的縱向空間，部分租房類(lèi)、藝術(shù)類(lèi)產(chǎn)品會(huì)選用此種方式。

雙列組合

并排：相同高度的比例控制，是較為經(jīng)典圖文布局，相比單列，同屏可展示更多的圖片內(nèi)容且空間利用率更高，能同時(shí)向用戶(hù)傳達(dá)更多信息。

錯(cuò)位：圖片高度自適應(yīng)（瀑布流），在限制寬度的條件下，高度自由發(fā)揮，讓圖片得到更多的舒展，利用率更高。雙列錯(cuò)位的排版方式增加了版式的趣味性，可緩解用戶(hù)在長(zhǎng)時(shí)間瀏覽下的視覺(jué)疲勞，需要注意的是寬高比例不要太大、成跳躍式的變化，否則可能導(dǎo)致視覺(jué)混亂，且低高度的圖片信息很容易被忽略。

3）多圖組合

規(guī)則：3張或以上的規(guī)則的圖片組合很常見(jiàn)，主要用圖片列表來(lái)引導(dǎo)用戶(hù)查看更多，通常利用單排左右滑動(dòng)或九宮格的方式呈現(xiàn)。例如旅游、租房、影視類(lèi)產(chǎn)品，包括手機(jī)相冊(cè)、社交圈子等。

不規(guī)則：多圖不規(guī)則比例并不常見(jiàn)，因移動(dòng)端設(shè)備可視寬度有限，容易導(dǎo)致混亂的錯(cuò)覺(jué)。藝術(shù)、拼圖類(lèi)產(chǎn)品看到的居多，另外，部分社交類(lèi)產(chǎn)品為了展示不同遠(yuǎn)近距離的層級(jí)關(guān)系也會(huì)用到這種排版方式。

3. 圖片操作的交互手勢(shì)

圖片常見(jiàn)的手勢(shì)操為：滑動(dòng)、點(diǎn)擊、雙指縮放，除此之外，還有很多針對(duì)所有元素都可以操作的交互手勢(shì)，這里就不多說(shuō)了，下面單獨(dú)對(duì)圖片手勢(shì)作出介紹。

1）滑動(dòng)

上下滑動(dòng)：通常在圖文列表或單張圖片內(nèi)容超過(guò)一屏的情況下，通過(guò)上下滑動(dòng)查看更多信息。

左右滑動(dòng)：為了拓展更多內(nèi)容，多用于相同等級(jí)的圖片列表或大圖切換，在頁(yè)面列表中會(huì)將無(wú)法同時(shí)展示的圖片呈現(xiàn)一部分或以數(shù)量作為提示，引導(dǎo)用戶(hù)探索以發(fā)現(xiàn)更多。

2）點(diǎn)擊/長(zhǎng)按

單擊：?jiǎn)螕艨刹榭磮D片，從縮略圖到詳情或大圖的切換操作；

雙擊：針對(duì)圖片本身進(jìn)行某些操作，比如喜歡、點(diǎn)贊等，另外，部分圖片通過(guò)雙擊進(jìn)行一定比例的放大縮小。

長(zhǎng)按：調(diào)出圖片的部分屬性信息、下載圖片等進(jìn)行下一步操作。

3）雙指縮放

當(dāng)我們需要查看圖片的某些局部信息或細(xì)節(jié)時(shí)，就會(huì)使用雙指（開(kāi)合）縮放的交互手勢(shì)。

三、圖片樣式效果

1. 圖片遮罩

因圖片的色彩變化不規(guī)則，為了保證圖片上層文字的可讀性，通常會(huì)在文字區(qū)域加一個(gè)純色遮罩，也可設(shè)置不透明度的漸變效果，使遮罩跟圖片的過(guò)渡更加協(xié)調(diào)，提升視覺(jué)美觀度。

2. 毛玻璃（背景模糊）

毛玻璃效果通常出現(xiàn)在應(yīng)用的2、3級(jí)頁(yè)面，對(duì)應(yīng)用性能會(huì)有一定的消耗，一般使用封面圖片進(jìn)行大幅度的高斯模糊作為背景使用，可在上層加上一定透明度的蒙層配合使用，透明度數(shù)值根據(jù)不同的圖片色彩及使用場(chǎng)景適當(dāng)?shù)恼{(diào)整。毛玻璃效果既能滿(mǎn)足文字內(nèi)容的清晰呈現(xiàn)，又能提供場(chǎng)景氛圍并提升界面的品質(zhì)感與神秘感，我們最熟悉的當(dāng)屬音樂(lè)播放頁(yè)面的背景模糊效果了。

3. 摳圖+純色背景組合

對(duì)于自營(yíng)平臺(tái)，內(nèi)容較為固定的商品頁(yè)面，可將商品摳圖后自定義背景，讓界面的整體設(shè)計(jì)風(fēng)格可控，延展性更高。不適配平臺(tái)類(lèi)型應(yīng)用，因?yàn)闀?huì)讓商家產(chǎn)生較高的運(yùn)營(yíng)成本。

4. 圓角設(shè)定

圖片圓角值設(shè)定，能體現(xiàn)出不同的產(chǎn)品屬性及氣質(zhì)。例如：直角比較硬朗，給人高冷、力量的感覺(jué)，小圓角傳達(dá)出安全、專(zhuān)業(yè)的屬性，而大圓角顯得活潑、可愛(ài)，更有親和力。

5. 圖片出界

圖片出界常用于運(yùn)營(yíng)設(shè)計(jì)，例如圖片輪播、膠囊banner、專(zhuān)題頁(yè)等，另外，經(jīng)摳圖處理過(guò)的圖片也可用在商品詳情頁(yè)頂部圖示。這種效果能有效避免呆板，營(yíng)造出畫(huà)面氛圍，制造出更強(qiáng)烈的視覺(jué)沖擊力。

四、圖片處理小技巧

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

UI設(shè)計(jì)中，任何一個(gè)設(shè)計(jì)思路、想法及效果樣式都是為產(chǎn)品而服務(wù)，圖片也不例外，需要根據(jù)不同的場(chǎng)景進(jìn)行合理搭配，好的配圖更能與用戶(hù)產(chǎn)生共鳴。

2. 切合主體，表達(dá)產(chǎn)品核心內(nèi)容

配圖必須要明確主體，一眼就能看出核心內(nèi)容，且不可以炫技或好看為主，否則會(huì)被多余的元素、效果影響主體視覺(jué)導(dǎo)致沒(méi)有重點(diǎn)。但確定好一張圖片的風(fēng)格及色系后，后續(xù)也要保持統(tǒng)一。

3. 風(fēng)格統(tǒng)一

圖片以實(shí)用性為準(zhǔn)，如果一味的追求漂亮、好看，最終可能形色各異造成視覺(jué)的不統(tǒng)一，嚴(yán)重影響用戶(hù)體驗(yàn)。設(shè)計(jì)師在選圖時(shí)需要對(duì)風(fēng)格精準(zhǔn)把控或后續(xù)稍加處理，以形成統(tǒng)一的視覺(jué)。

常見(jiàn)的控制方向有圖片類(lèi)型（位圖/插畫(huà)/形狀）、視角（平視/仰視/俯視）、商品背景（簡(jiǎn)約/復(fù)雜/純色）、呈現(xiàn)區(qū)域（堆積/局部/特寫(xiě)）、構(gòu)圖（中心/水平線(xiàn)/對(duì)稱(chēng)/對(duì)角線(xiàn)…）等。另外，還有很多抽象的方式但并不是絕對(duì)的，我們都可以嘗試從不同的角度去調(diào)整，力求讓所有圖片達(dá)到最佳視覺(jué)效果。

4. 顏色豐富

因人的天性即向往美好、品質(zhì)（非物質(zhì)化）生活，固品質(zhì)感的配圖更容易吸引用戶(hù)的注意力，讓人想要擁有的感覺(jué)，如果色彩不夠飽滿(mǎn)，不管風(fēng)格是多么統(tǒng)一，也達(dá)不到良好的用戶(hù)體驗(yàn)。在選好圖片后，可對(duì)色相、飽和度、亮度稍加調(diào)整，以確保色彩飽滿(mǎn)、豐富。

5. 設(shè)計(jì)稿需呈現(xiàn)上線(xiàn)的實(shí)際效果

有時(shí)候做設(shè)計(jì)為了方便，整個(gè)界面的圖片直接復(fù)用同一張，即便設(shè)計(jì)的再好，也可能隱藏著不易察覺(jué)的瑕疵。需要說(shuō)明的是，一個(gè)成熟且專(zhuān)業(yè)的設(shè)計(jì)師，首先要對(duì)自己負(fù)責(zé)，然后才是設(shè)計(jì)，即便是初稿，在即將呈現(xiàn)給大家或匯報(bào)前，一定要給出上線(xiàn)后最真實(shí)的效果，這樣方便他人貼合實(shí)際給出一些方向性的建議，幫助自己更好的決策。經(jīng)處理過(guò)的實(shí)際配圖能體現(xiàn)整體效果，方便找出圖片以外的設(shè)計(jì)缺陷，例如版式、字體大小、層級(jí)關(guān)系等問(wèn)題。

6. 文件大小處理

靜態(tài)圖片常用的無(wú)非PNG、JPG這兩種格式，文件較大的圖片會(huì)影響打開(kāi)頁(yè)面或刷新時(shí)的速度，本地圖片更會(huì)增加應(yīng)用包的大小。從設(shè)計(jì)稿中導(dǎo)出圖片時(shí)需要控制文件大小，如無(wú)特別（超大圖）情況，切勿主動(dòng)降低圖片質(zhì)量后再導(dǎo)出，否則會(huì)影響界面整體的視覺(jué)美觀度。

這里推薦一個(gè)線(xiàn)上無(wú)損智能壓縮神器：https://tinypng.com，僅限PNG、JPG、WEBP格式的圖片。

△上圖可以看出，圖片在壓縮了76%后，由1.4MB變成了332KB，肉眼很難看出（查看大圖）質(zhì)量上的損失。

7. 倍率切圖

切圖不像以前那么麻煩，同一張圖片需要手動(dòng)導(dǎo)出多套規(guī)范，現(xiàn)在只需在軟件（或安裝插件）標(biāo)記好切圖，上傳到類(lèi)似藍(lán)湖、摹客等第三方線(xiàn)上應(yīng)用，分享給團(tuán)隊(duì)成員即可各自下載web、Android、iOS對(duì)應(yīng)的多套規(guī)范制圖。

設(shè)計(jì)師在設(shè)計(jì)過(guò)程中，一定要按照規(guī)范的最大極限保留原圖，以iOS系統(tǒng)@1x規(guī)范設(shè)計(jì)稿為例，如果圖片的寬度是100px，那么導(dǎo)入軟件中的圖片寬度至少要在300以上，然后再進(jìn)行縮小（PS中需轉(zhuǎn)為智能對(duì)象），如果低于300px，開(kāi)發(fā)在導(dǎo)出@3x的圖片就會(huì)失真，可能會(huì)因損失像素而出現(xiàn)模糊的情況。

五、總結(jié)

文章中所介紹的圖片使用方法及處理技巧，并非最好、唯一的答案，但在你沒(méi)有更好的方法之前，多多少少能從中得到啟發(fā)。UI中圖片設(shè)計(jì)的本質(zhì)在于自身的專(zhuān)業(yè)能力，然后用自己的視覺(jué)產(chǎn)出和設(shè)計(jì)手段去吸引、打動(dòng)用戶(hù)，從而為產(chǎn)品帶來(lái)利益，也能體現(xiàn)出設(shè)計(jì)價(jià)值。

不得不承認(rèn)，人們很多時(shí)候都是通過(guò)視覺(jué)表象決定是否需要深入了解、擁有某一件事/物，設(shè)計(jì)師就是在做視覺(jué)表象的表達(dá)，如果圖片用的好，不僅能讓你的設(shè)計(jì)更加出彩，還有一定幾率轉(zhuǎn)化用戶(hù)，形成商業(yè)價(jià)值。

#專(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é)議

蘭亭妙微(bouu.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)電話(huà)：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)讀：我們經(jīng)常會(huì)收到各種彈窗，它們的目的主要是為回應(yīng)用戶(hù)或讓用戶(hù)回應(yīng)，是用戶(hù)與產(chǎn)品間對(duì)話(huà)的一種方式。但是，彈窗也不是多多益善。如何彈、什么時(shí)候彈？這些都是有章法的。本文作者總結(jié)梳理了一套彈窗設(shè)計(jì)原則，一起來(lái)看看吧。

產(chǎn)品經(jīng)理：我覺(jué)得這里要加個(gè)彈窗，你去設(shè)計(jì)吧。

設(shè)計(jì)師：emmm…

彈窗到底該不該加？怎么加？用什么形態(tài)展示？真正的作用是什么？這些真的是產(chǎn)品經(jīng)理說(shuō)了算嗎？

好的產(chǎn)品通常會(huì)在恰當(dāng)?shù)臅r(shí)間、合適的位置給出合理的反饋，彈窗也是必不可少的反饋方式，不反饋、反饋不及時(shí)或反饋不合理都會(huì)帶來(lái)不好的使用體驗(yàn)，甚至誤導(dǎo)用戶(hù)，從而導(dǎo)致用戶(hù)流失。

很多時(shí)候，產(chǎn)品經(jīng)理會(huì)從商業(yè)角度、公司業(yè)務(wù)、資源限制等方面考慮問(wèn)題，但這些未必是用戶(hù)所需要的，設(shè)計(jì)師不應(yīng)該完全按照產(chǎn)品需求做設(shè)計(jì)，否則就成了只會(huì)照搬產(chǎn)品原型的“美工”。需要做的是從用戶(hù)角度出發(fā)，把產(chǎn)品需求轉(zhuǎn)化成設(shè)計(jì)目標(biāo)，只有經(jīng)過(guò)反復(fù)的推敲、認(rèn)真分析，最終才能打磨出服務(wù)于用戶(hù)的彈窗設(shè)計(jì)，所以彈窗該不該加、如何加就成了設(shè)計(jì)師不可推卸的責(zé)任和使命。

本篇文章將圍繞著彈窗類(lèi)型、使用場(chǎng)景、轉(zhuǎn)化率及常見(jiàn)問(wèn)題為側(cè)重點(diǎn)，將自己對(duì)彈窗的理解、設(shè)計(jì)經(jīng)驗(yàn)分享給大家，幫助大家對(duì)彈窗組件有更清晰的認(rèn)識(shí)，為后續(xù)避坑設(shè)計(jì)出更好的彈窗做準(zhǔn)備。

一、彈窗的基本介紹

1. 彈窗的定義

當(dāng)我們與應(yīng)用產(chǎn)生主動(dòng)或被動(dòng)交互時(shí)，頁(yè)面上層會(huì)彈出容器，將可承載的文本、按鈕、選項(xiàng)、標(biāo)簽或表單等任一內(nèi)容與之組合，就可以用來(lái)傳遞信息、狀態(tài)反饋、引導(dǎo)用戶(hù)等操作，這就是彈窗。

彈窗的目的主要是為回應(yīng)用戶(hù)或讓用戶(hù)回應(yīng)，是用戶(hù)與產(chǎn)品間對(duì)話(huà)的一種方式，在線(xiàn)上各種場(chǎng)景中都有可能碰到，相當(dāng)于產(chǎn)品的線(xiàn)上小助理。不同類(lèi)型的彈窗其作用不同，但最終都是為了滿(mǎn)足跟用戶(hù)之間的友好交流。

2. 彈窗組件的構(gòu)成

彈窗組件的樣式很多，如浮層、對(duì)話(huà)框、下拉菜單、toast等，且iOS、Android官方平臺(tái)也都根據(jù)自身的規(guī)范對(duì)組件進(jìn)行命名，不管如何稱(chēng)呼，其常見(jiàn)的彈窗組件絕大多數(shù)都是由以下元素組成：

• 容器：作為承載彈窗的文本、圖片等內(nèi)容，容器必不可少，有的彈窗直接以蒙層作為容器，如toast；
• 蒙層：為了和底層內(nèi)容分離，避免信息混淆，通常會(huì)在界面上層（容器下層）設(shè)置一個(gè)不透明度為20%~60%的純黑色蒙層。部分小型彈窗不設(shè)蒙層，但會(huì)為容器設(shè)置投影，例如篩選器的展開(kāi)、下拉菜單等；
• 文本：文本是彈窗傳達(dá)信息主體的必要條件，如標(biāo)題、按鈕等，即便把文本融入圖片，也能一目了然；
• 圖片：用于運(yùn)營(yíng)彈窗傳達(dá)更多信息內(nèi)容的方式之一，為了對(duì)用戶(hù)產(chǎn)生更強(qiáng)的吸引力，還可設(shè)計(jì)成動(dòng)態(tài)效果；
• 表單：為成功進(jìn)入下一步做準(zhǔn)備，如輸入密碼（iOS設(shè)備下載應(yīng)用前的必要步驟）。也可以是當(dāng)前頁(yè)面流程的分支，例如輸入優(yōu)惠券等；
• 選項(xiàng)：條件較少的選項(xiàng)可使用彈窗完成，單選、復(fù)選在選項(xiàng)不超過(guò)6個(gè)的情況下都可使用；
• 圖標(biāo)：在弱化次要操作的情況下，通常會(huì)將關(guān)閉彈窗按鈕設(shè)計(jì)成圖標(biāo)放在右上角或彈窗下方，目的是突出主操作，鼓勵(lì)用戶(hù)從彈窗中進(jìn)入下一步，另外還有單選、復(fù)選、提示等按鈕；
• 按鈕：是進(jìn)入下一步或回到上一步（去掉彈窗）的操作入口，部分應(yīng)用也可以點(diǎn)擊彈窗以外的空白區(qū)域讓彈窗消失，但同樣會(huì)提供按鈕以方便用戶(hù)更容易操作。toast等短時(shí)間自動(dòng)消失的彈窗無(wú)需設(shè)置按鈕。

二、彈窗體系分類(lèi)

1. 模態(tài)彈窗

用戶(hù)在完成任務(wù)的過(guò)程中，界面會(huì)出現(xiàn)彈窗打斷用戶(hù)的操作行為，用戶(hù)必須通過(guò)主動(dòng)點(diǎn)擊才可以進(jìn)行下一步操作，這即是模態(tài)彈窗。

模態(tài)彈窗通常能較好的獲取用戶(hù)的視覺(jué)焦點(diǎn)，并通過(guò)承載的內(nèi)容、按鈕主次層級(jí)來(lái)引導(dǎo)用戶(hù)完成他們的需求，這也會(huì)根據(jù)用戶(hù)、產(chǎn)品側(cè)重點(diǎn)的不同，彈出樣式也有所不同，常見(jiàn)的模態(tài)彈窗有對(duì)話(huà)框、動(dòng)作欄、浮層…等。

1.1 對(duì)話(huà)框Dialog/Alert

對(duì)話(huà)框是很常見(jiàn)的彈窗，主要在打斷用戶(hù)后并提供選項(xiàng)操作，對(duì)用戶(hù)的干擾較大，通常會(huì)配備1~3個(gè)操作按鈕，而且會(huì)把用戶(hù)最期待的或產(chǎn)品最期待用戶(hù)操作的按鈕突出顯示。

對(duì)話(huà)框類(lèi)型的彈窗主要分為主動(dòng)、被動(dòng)兩種觸發(fā)類(lèi)型，主動(dòng)彈窗：信息的二次確認(rèn)、輸入內(nèi)容、前置條件選擇、風(fēng)險(xiǎn)警示等；被動(dòng)彈窗：版本更新、運(yùn)營(yíng)宣傳、消息通知、系統(tǒng)功能授權(quán)等。

1.2 動(dòng)作欄Actionbar

動(dòng)作欄是通過(guò)用戶(hù)主動(dòng)操作后彈出的內(nèi)容信息，基本都是從底部彈出，屏幕占用比例根據(jù)內(nèi)容量的多少比較隨意，從小區(qū)域、半屏、再到全屏隨處可見(jiàn)。

動(dòng)作欄相比對(duì)話(huà)框則能承載更多、更豐富的功能信息，在用戶(hù)清晰感知當(dāng)前操作及反饋的情況下，比跳轉(zhuǎn)到新的頁(yè)面更有安全感。

1.3 浮層Popover/Popup

浮層是指用戶(hù)操作某個(gè)功能/內(nèi)容后，會(huì)在附近出現(xiàn)一個(gè)帶有視覺(jué)引導(dǎo)性質(zhì)的彈窗，最常見(jiàn)的浮層就是下拉菜單/彈窗等，浮動(dòng)于頂層窗口并指向觸發(fā)操作的位置。

例如很多社交娛樂(lè)類(lèi)型的應(yīng)用右上角有一個(gè)“+”入口，里面會(huì)放置部分常用功能。部分浮層底部沒(méi)有設(shè)置不透明度的蒙層，為了與頁(yè)面信息更好的區(qū)分，會(huì)給浮層容器加上投影，避免與底部信息混淆。

2. 非模態(tài)彈窗

相比模態(tài)彈窗，非模態(tài)彈窗屬較為輕量，觸發(fā)后以一種非阻礙的的方式呈現(xiàn)，不會(huì)打斷用戶(hù)的當(dāng)前操作，主要是給予用戶(hù)即時(shí)反饋，讓用戶(hù)清楚應(yīng)用當(dāng)前的交互后狀態(tài)。非模態(tài)彈窗不強(qiáng)制用戶(hù)操作，根據(jù)反饋信息的重要程度及意愿，可在一定的時(shí)間內(nèi)自動(dòng)消失，也可等待用戶(hù)操作后消失，常見(jiàn)的有以下幾種：

2.1 提示框Toast/Hud

用于反饋用戶(hù)操作成功、警告、錯(cuò)誤等當(dāng)前狀態(tài)信息，可能出現(xiàn)在任何位置（底部/中間/頂部），在呈現(xiàn)樣式上，相同等級(jí)的模塊統(tǒng)一位置、風(fēng)格即可，無(wú)需用戶(hù)有任何操作，出現(xiàn)2s左右自動(dòng)消失。

Toast只有純文字提示，例如格式錯(cuò)誤、刷新成功、刪除成功等；Hud會(huì)使用文字+圖標(biāo)樣式，例如添加到購(gòu)物車(chē)、關(guān)注成功等。

2.2 提示對(duì)話(huà)框Snackbar

Snackbar早期只是Android系統(tǒng)的一種彈窗控件，后在iOS、Web前端都會(huì)使用到，可以看作是toast的加強(qiáng)版。一般只出現(xiàn)在屏幕底部，存在的時(shí)間比toast長(zhǎng)，提供0~1個(gè)操作入口，可自動(dòng)消失，也可與用戶(hù)產(chǎn)生交互后消失或者跳轉(zhuǎn)至其他頁(yè)面。

Snackbar反饋的重要程度強(qiáng)于toast，例如，某個(gè)應(yīng)用今天有重要提醒，同時(shí)又不想影響用戶(hù)的其他操作，會(huì)在用戶(hù)首次進(jìn)入時(shí)彈出提醒，并提供關(guān)閉操作入口，等待用戶(hù)通過(guò)手動(dòng)關(guān)閉（部分自動(dòng)關(guān)閉），加強(qiáng)用戶(hù)記憶。

2.3 通知Notice

最有代表性的就是消息通知、系統(tǒng)推送，在設(shè)備未鎖屏的情況下，通常從頂部彈出，停留幾秒后自動(dòng)消失，鎖屏后，不同設(shè)備彈出的位置也有所不同。Notice的前提是需要在應(yīng)用設(shè)置中打開(kāi)消息通知開(kāi)關(guān)，具備應(yīng)用外推送功能的，需在設(shè)備系統(tǒng)設(shè)置中開(kāi)啟通知權(quán)限。

2.4 透明指示層HUD

HUD是一種在透明元素上通過(guò)填充、反饋用戶(hù)當(dāng)前交互操作的指示層，實(shí)時(shí)生效，例如視頻類(lèi)產(chǎn)品中的調(diào)整音量、亮度、控制進(jìn)度條等。

三、彈窗的使用場(chǎng)景

當(dāng)我們對(duì)彈窗體系有了一定了解后，就需要清楚什么場(chǎng)景需要設(shè)計(jì)彈窗？用什么類(lèi)型的彈窗？

產(chǎn)品最終都是服務(wù)于用戶(hù)，如果僅憑自己的主觀意見(jiàn)亂加一通，整的花里胡哨，彈窗就成了干擾元素，很大程度上會(huì)影響用戶(hù)體驗(yàn)。什么樣的場(chǎng)景適合什么類(lèi)型的彈窗，我們可以從以下幾點(diǎn)來(lái)說(shuō)明。

1. 打斷用戶(hù)的操作

風(fēng)險(xiǎn)警示：當(dāng)用戶(hù)的某種操作可能存在風(fēng)險(xiǎn)，為避免操作失誤，會(huì)彈出對(duì)話(huà)框打斷用戶(hù)，并給予一定的風(fēng)險(xiǎn)提示引起用戶(hù)的注意，讓其有足夠的時(shí)間確認(rèn)是否真的需要進(jìn)行下一步操作，如：刪除、放棄福利機(jī)會(huì)、退出登錄等，會(huì)彈出對(duì)話(huà)框提示操作后可能引起的后果。

前置條件：部分任務(wù)在流程中設(shè)有一定的前置條件，需要滿(mǎn)足條件才能進(jìn)入下一步操作，通常這種情況會(huì)根據(jù)內(nèi)容量的多少、重要程度以對(duì)話(huà)框或動(dòng)作欄的樣式彈出，例如下單時(shí)選擇優(yōu)惠券、支付方式。

任務(wù)關(guān)鍵節(jié)點(diǎn)：用戶(hù)在滿(mǎn)足任務(wù)的基本條件后，需要操作一個(gè)關(guān)鍵步驟才能成功，則會(huì)彈出對(duì)話(huà)框讓用戶(hù)完成最后一步操作，例如提交訂單、表單、輸入支付密碼等。

2. 定制化彈窗

這類(lèi)彈窗主要從產(chǎn)品角度出發(fā)，不會(huì)過(guò)于在乎用戶(hù)是否需要、會(huì)不會(huì)反感，都會(huì)引導(dǎo)或強(qiáng)制用戶(hù)操作。

例如產(chǎn)品發(fā)布新版本，會(huì)強(qiáng)制用戶(hù)更新，否則將無(wú)法使用。還有各大電商APP，在進(jìn)入首頁(yè)時(shí)會(huì)彈出一堆紅包、優(yōu)惠券，刻意將取消/關(guān)閉入口弱化，給用戶(hù)返回造成一定的難度，利用突出的視覺(jué)、動(dòng)態(tài)效果突出主題增加吸引力，以達(dá)到轉(zhuǎn)化用戶(hù)的目的。

3. 二次確認(rèn)

二次確認(rèn)也是一種打斷用戶(hù)的操作行為，但跟上面純粹的打斷用戶(hù)相比其作用更大，主要是在用戶(hù)已做好選擇的情況下再次彈出確認(rèn)，以免操作結(jié)果造成用戶(hù)認(rèn)知上的偏差。雖然從用戶(hù)體驗(yàn)角度出發(fā)，用最少的操作、最簡(jiǎn)單的流程滿(mǎn)足用戶(hù)所需是產(chǎn)品追求的目標(biāo)之一，但通過(guò)權(quán)和利弊之后，二次確認(rèn)的出現(xiàn)實(shí)屬迫不得已的折中方案，它能夠起到給用戶(hù)多一次思考避免誤操作、同樣的含義換種方式表達(dá)、重要的內(nèi)容加深二次記憶等作用。

二次確認(rèn)使用得當(dāng)，可以避免用戶(hù)、產(chǎn)品的潛在風(fēng)險(xiǎn)，但若是從主觀角度一味的濫用，就成了對(duì)用戶(hù)的惡意干擾、影響使用體驗(yàn)，導(dǎo)致出現(xiàn)因多步驟操作增加任務(wù)完成難度、降低轉(zhuǎn)化率、損害產(chǎn)品形象等問(wèn)題，所以需要從業(yè)務(wù)（用戶(hù)側(cè)、產(chǎn)品側(cè)）實(shí)際角度出發(fā)，兩相其害（加-影響使用體驗(yàn)；不加-造成一定損失）取其輕的考慮是否需要增加二次確認(rèn)彈窗。

當(dāng)用戶(hù)的某個(gè)操作可能帶來(lái)不可逆轉(zhuǎn)、錯(cuò)誤嚴(yán)重程度較高時(shí)，例如：放棄僅有一次機(jī)會(huì)的較好福利、手機(jī)系統(tǒng)還原、應(yīng)用賬號(hào)注銷(xiāo)等，系統(tǒng)都會(huì)給予二次確認(rèn)，降低用戶(hù)認(rèn)知偏差后，以確保用戶(hù)是經(jīng)過(guò)多次思考才做出的決定，即便后續(xù)給用戶(hù)造成損失也不會(huì)過(guò)于降罪產(chǎn)品，產(chǎn)品也算是“問(wèn)心無(wú)愧”了。

4. 簡(jiǎn)單提示

常見(jiàn)于用戶(hù)操作之后的狀態(tài)反饋，即便用戶(hù)沒(méi)有注意到，也不會(huì)造成較大的損失、或結(jié)果已經(jīng)注定，相對(duì)來(lái)說(shuō)成本較低，大部分出現(xiàn)在任務(wù)過(guò)程中的提示（可重復(fù)）和結(jié)果反饋，以確保用戶(hù)知曉當(dāng)前所處狀態(tài)。

非模態(tài)彈窗toas樣式居多，例如加載中、操作成功、刷新結(jié)果、清除緩存等，可出現(xiàn)在其他類(lèi)型的彈窗之后或同時(shí)存在。

四、如何設(shè)計(jì)有效的彈窗

1. 前提條件

優(yōu)秀的彈窗需要從視覺(jué)、交互兩方面思考，視覺(jué)上簡(jiǎn)潔、易懂，交互上可操作且可控。

視覺(jué)層面：首先需要做到的是易懂，這時(shí)候就非常注重文案清晰程度及按鈕層級(jí)關(guān)系了，彈出的信息需能直擊要害，用戶(hù)看了能一目了然才是關(guān)鍵；其次，彈窗屬于一種干擾信息的存在，設(shè)計(jì)必須簡(jiǎn)潔，在彈出時(shí)需要考慮是否會(huì)過(guò)度影響（影響是一定會(huì)有的、且看如何降低）用戶(hù)的其他操作。假想我們正在玩游戲、突然來(lái)了電話(huà)全屏幕覆蓋（傳統(tǒng)來(lái)電），自己會(huì)以最快的速度掛掉電話(huà)，回到游戲中后發(fā)現(xiàn)自己已領(lǐng)“盒飯”，即便來(lái)電是多么的理所當(dāng)然，但心里必定是非常不痛快的，那么，如果來(lái)電以彈窗的形式且占據(jù)屏幕很小區(qū)域（如今的來(lái)電方式）是不是就給了用戶(hù)足夠反應(yīng)時(shí)間及緩沖時(shí)間呢？

交互層面：彈出的內(nèi)容及操作入口需清晰可操作，雖然有時(shí)基于業(yè)務(wù)需求，產(chǎn)品更希望用戶(hù)能進(jìn)行下一步操作而并非回到上一步，即便如此，我們也只能通過(guò)弱化次要操作以突出主要操作，用戶(hù)有來(lái)去自由的權(quán)利，如果弱化至用戶(hù)看不清、甚至找不到的程度，即便提供了次要操作入口，也會(huì)存在反面作用；另外需注意用戶(hù)對(duì)產(chǎn)品的可控性，不管產(chǎn)品如何期望用戶(hù)進(jìn)入下一步轉(zhuǎn)化，但不能強(qiáng)制，一定要給用戶(hù)提供回去的路（強(qiáng)制版本更新除外），否則，任性的用戶(hù)可能會(huì)直接結(jié)束應(yīng)用，甚至因產(chǎn)品過(guò)于霸道直接卸載。

2. 設(shè)計(jì)目的

首先，設(shè)計(jì)師應(yīng)該理解產(chǎn)品需求，分別從用戶(hù)側(cè)（能給用戶(hù)帶來(lái)什么？滿(mǎn)足什么樣的需求？避免什么損失?…）、產(chǎn)品側(cè)（能給產(chǎn)品帶來(lái)什么？產(chǎn)品如何期望？是否合理？能得到什么樣的結(jié)果？…）分析為什么要加彈窗，然后將分析的結(jié)果轉(zhuǎn)化為設(shè)計(jì)目標(biāo)，以確保彈窗根據(jù)不同的需求，在恰當(dāng)?shù)臅r(shí)間、適合的樣式合理的呈現(xiàn)給用戶(hù)。

其次，在得到設(shè)計(jì)目標(biāo)后，同樣需要從設(shè)計(jì)側(cè)、技術(shù)側(cè)思考彈窗組件的一致性。從設(shè)計(jì)角度，團(tuán)隊(duì)所有成員需要對(duì)該組件有清晰且統(tǒng)一的認(rèn)知，了解組件的使用場(chǎng)景，以確保不會(huì)錯(cuò)用、濫用，如果增加或更換新人設(shè)計(jì)師，很容易學(xué)習(xí)和上手，提升效率；站在技術(shù)角度，一致性的常用彈窗組件，便于開(kāi)發(fā)做組件封裝后續(xù)復(fù)用，減少不必要的重復(fù)工作，大大提高開(kāi)發(fā)效率。

3. 設(shè)計(jì)思路

在UI設(shè)計(jì)中，組件的設(shè)計(jì)思路基本相通，旨在滿(mǎn)足產(chǎn)品的實(shí)用性、視覺(jué)的統(tǒng)一性，主要圍繞著以下幾點(diǎn)進(jìn)行：

• 基礎(chǔ)定義：利用清晰易懂且簡(jiǎn)短的文案描述彈窗組件的內(nèi)容及目的。
• 類(lèi)型及構(gòu)成：明確彈窗的類(lèi)型，如模態(tài)/非模態(tài)，將其拆分并注明每個(gè)小元素的具體信息。
• 規(guī)則用法：彈窗出現(xiàn)的位置、包含的具體內(nèi)容及信息的展示規(guī)則，比如哪些場(chǎng)景可復(fù)用。
• 交互狀態(tài)：交互流程邏輯清晰，擬請(qǐng)產(chǎn)品交互前、交互中、交互后如何反饋以及用戶(hù)隨時(shí)可能碰到的問(wèn)題。

五、需關(guān)注的問(wèn)題點(diǎn)

1. 信息的層級(jí)關(guān)系

設(shè)計(jì)彈窗時(shí)需要注意信息的主次層級(jí)關(guān)系，優(yōu)先傳達(dá)用戶(hù)想要的或產(chǎn)品想要讓用戶(hù)知道的，以確保重要的信息在第一時(shí)間傳達(dá)給用戶(hù)。

2. 展現(xiàn)形式

彈窗需要根據(jù)實(shí)際的場(chǎng)景合理使用，不能為了簡(jiǎn)潔而過(guò)分刪減內(nèi)容、更不能畫(huà)蛇添足。例如一些偏向于操作狀態(tài)、系統(tǒng)報(bào)告類(lèi)的提示可以使用簡(jiǎn)單的反饋，而可能造成用戶(hù)損失的提醒就需要刻意打斷用戶(hù)，給予更明確的提示甚至二次確認(rèn)。

△ 例如刪除內(nèi)容就需要使用模態(tài)彈窗明確提醒用戶(hù)，如果用非模態(tài)很可能被用戶(hù)忽略從而帶來(lái)不可逆的損失。

3. 文案表述

因彈窗本身承載內(nèi)容有一定的局限性，固文案一定要簡(jiǎn)潔且精確，能用一句話(huà)說(shuō)清楚的就不要過(guò)于啰嗦，不僅容器的空間有限且用戶(hù)的耐性也有限，需要在有限的空間、有效的時(shí)間內(nèi)清晰的表達(dá)出核心內(nèi)容。

4. 彈出的時(shí)機(jī)及頻率

針對(duì)運(yùn)營(yíng)彈窗，如果彈出的時(shí)間不對(duì)或過(guò)于頻繁，可能會(huì)造成用戶(hù)反感，所以需要把握好彈出時(shí)機(jī)及頻率。

例如用戶(hù)有一張未使用的優(yōu)惠券，如果用戶(hù)每次進(jìn)入應(yīng)用都看到彈出提醒，確實(shí)又沒(méi)有購(gòu)買(mǎi)商品的意愿，總是被彈窗打斷真的就很煩，那么可以將提醒彈窗設(shè)置為每日首次進(jìn)入應(yīng)用時(shí)提示、每累計(jì)進(jìn)入應(yīng)用5次后提示、即將到期提示或者用戶(hù)有購(gòu)買(mǎi)意愿且優(yōu)惠券支持改品類(lèi)時(shí)提示等，總之，需要控制在大部分用戶(hù)的可接受范圍內(nèi)。

六、總結(jié)

本篇文章主要系統(tǒng)的分析了彈窗組件分類(lèi)及使用場(chǎng)景，總結(jié)的雖然不是很全面，但能讓很多新手設(shè)計(jì)師清楚認(rèn)知彈出組件的定義及用法。另外，彈窗不管如何設(shè)計(jì)，都需要有一個(gè)不斷優(yōu)化的過(guò)程，要根據(jù)產(chǎn)品的實(shí)際情況不斷思考與打磨，通過(guò)腦暴或已知問(wèn)題作出更好的改善。

能清楚認(rèn)知、理解、使用彈窗組件是一個(gè)成熟UI設(shè)計(jì)師必備的條件，當(dāng)然，并不能以此定義設(shè)計(jì)師是否優(yōu)秀，在此基礎(chǔ)上，還需通過(guò)持續(xù)的學(xué)習(xí)探索，挖掘出更多技巧，不斷提高自身的專(zhuān)業(yè)能力。

#專(zhuān)欄作家#

大漠飛鷹；人人都是產(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é)議

蘭亭妙微(bouu.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)電話(huà)：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

蘭亭妙微(bouu.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)電話(huà)：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ǔ)：折疊菜單是在頁(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)用～

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

1. 狀態(tài)

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

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

在折疊菜單中，通常用“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)；向上/向下箭頭。

3. 附加圖標(biāo)

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

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

二、折疊菜單的樣式

1. 封閉式折疊菜單

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

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

2. 分離式折疊菜單

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

3. 突出顯示展開(kāi)菜單

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

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

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

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

1. 展示預(yù)覽

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

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

當(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ù)量。

3. 提示文案

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

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

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

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

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

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

側(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)注~

#專(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é)議。

蘭亭妙微(bouu.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)電話(huà)：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ì)是產(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ì)的精致感。

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

1. 什么是卡片？

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

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

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

卡片本身就是一個(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í)成本也是極低的。

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

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

卡片在占用屏幕空間較少的情況下能夠?qū)⒉煌笮　⒉煌?lèi)型的信息內(nèi)容按邏輯進(jìn)行分組呈現(xiàn)，使界面結(jié)構(gòu)更加清晰。相比純粹的留白或分割線(xiàn)，卡片不僅對(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)弱的效果。

2. 場(chǎng)景拓展

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

3. 空間擴(kuò)展

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

4. 突出重點(diǎn)

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

5. 兼容多端

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

6. 易于操作

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

7. 跳轉(zhuǎn)流暢

卡片可通過(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)。

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

1. 四周留白

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

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

懸浮型卡片并非模態(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í)用。

3. 通欄類(lèi)型

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

四、卡片適用場(chǎng)景介紹

1. 瀑布流

瀑布流主要正針對(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就是最好的例子。

2. 信息流

信息流的展現(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í)別重要信息。

3. 左/右滑動(dòng)

卡片式左右滑動(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)以求獲取更多信息。

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

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

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

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

6. 部分頁(yè)面頭圖

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

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

1. 一致性原則

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

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

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

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

3. 避免過(guò)多卡片嵌套

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

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

4. 合理利用橫向空間

因?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ú)法比擬的。

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

卡片式設(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è)則采用分割線(xiàn)進(jìn)行信息分組，試想一下，如果為了統(tǒng)一規(guī)范而使用卡片，不僅造成很強(qiáng)的割裂感、還會(huì)極大的浪費(fèi)縱向空間。

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

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

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

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

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

卡片式設(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)。

底部標(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í)都能快速訪(fǎng)問(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ì)～

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

底部標(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ì)。

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

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

底部標(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)似漢堡菜單這樣的控件。

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

底部標(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)確地理解。

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

圖標(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)和文字也能夠清晰易讀。

4）不要設(shè)計(jì)可滑動(dòng)的標(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)。

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

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

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

6）不要使用太復(fù)雜的切換動(dòng)畫(huà)

花哨復(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ù)雜。

03 最后

以上是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

編輯導(dǎo)語(yǔ)：設(shè)計(jì)師如何創(chuàng)建一個(gè)大放異彩的UI？好的UI設(shè)計(jì)不僅是讓軟件變得有個(gè)性有品位，還要讓軟件的操作變得舒適簡(jiǎn)單、自由，充分體現(xiàn)軟件的定位和特點(diǎn)。本文詳細(xì)地給大家整理了UI設(shè)計(jì)的四大原則。一起來(lái)看看吧。

是什么讓一個(gè)好的 UI 設(shè)計(jì)易于閱讀？是什么讓用戶(hù)輕松瀏覽？設(shè)計(jì)師如何創(chuàng)建一個(gè)大放異彩的UI？用戶(hù)界面是任何軟件產(chǎn)品的關(guān)鍵部分。

好的UI設(shè)計(jì)，用戶(hù)甚至?xí)雎运?/p>

如果做得不好，會(huì)成為用戶(hù)使用產(chǎn)品路上的絆腳石。

為了更高效地設(shè)計(jì)能滿(mǎn)足用戶(hù)使用的UI，大多數(shù)設(shè)計(jì)師都遵循界面設(shè)計(jì)原則。

本期我們就帶你了解UI設(shè)計(jì)四大原則！

一、美學(xué)性

為了創(chuàng)建視覺(jué)美學(xué)UI通常有以下這些小規(guī)則：

1. 規(guī)則 1：光來(lái)自天空

陰影是告訴我們正在查看哪些用戶(hù)界面元素的寶貴線(xiàn)索。

當(dāng)光從天而降時(shí)，它照亮事物的頂部并在其下方投下陰影。

事物的頂部較輕，底部較暗。UI 也是如此。

就像我們所有面部特征的所有底面都有小陰影一樣，幾乎每個(gè) UI 元素的底面都有陰影。

我們的屏幕是平面的，但細(xì)節(jié)設(shè)計(jì)會(huì)讓屏幕上幾乎所有東西看起來(lái)都是立體的。

2. 規(guī)則 2：黑白優(yōu)先

在添加顏色之前進(jìn)行灰度設(shè)計(jì)可以簡(jiǎn)化視覺(jué)設(shè)計(jì)中最復(fù)雜的元素，這樣設(shè)計(jì)師可以專(zhuān)注于間距和布局元素。

首先設(shè)計(jì)黑白。從更難的問(wèn)題開(kāi)始，讓?xiě)?yīng)用程序在各個(gè)方面都美觀且可用，但不需要顏色的幫助，最后再添加顏色。

這是讓?xiě)?yīng)用程序看起來(lái)“干凈”和“簡(jiǎn)單”的可靠的簡(jiǎn)單方法。在太多地方有太多顏色是往往容易搞砸設(shè)計(jì)。

而在此之后，向灰度站點(diǎn)添加一種顏色可以簡(jiǎn)單有效地吸引眼球。

通過(guò)修改單一色調(diào)的飽和度和亮度，可以生成多種顏色——深色、淺色、背景、強(qiáng)調(diào)色、引人注目的顏色，但這樣不會(huì)讓人眼花繚亂。

使用一種或兩種基本色調(diào)中的多種顏色是突出或中和元素且不會(huì)使設(shè)計(jì)混亂的可靠方法。

3. 規(guī)則 3：將空白加倍

為了使 UI 看起來(lái)很有設(shè)計(jì)感，需要增加很多喘息的空間。

空白是構(gòu)成出色視覺(jué)布局的最容易被忽視和未充分利用的元素之一。

很多時(shí)候，空白被視為空白空間，因此浪費(fèi)了屏幕空間。

空格對(duì)于制作更好和簡(jiǎn)化的布局是必要的，因?yàn)樗罱K使用戶(hù)專(zhuān)注于本來(lái)打算看到的內(nèi)容。大量的空白可以使一些雜亂的界面看起來(lái)簡(jiǎn)單又容易吸引人。

4. 規(guī)則4：為每個(gè)屏幕創(chuàng)建一個(gè)焦點(diǎn)

強(qiáng)調(diào)是一種策略，是想要將觀眾的注意力吸引到特定的設(shè)計(jì)元素上。這可能是內(nèi)容區(qū)域、圖像、鏈接或按鈕等。

我們看到大多數(shù)設(shè)計(jì)領(lǐng)域都會(huì)注重焦點(diǎn)的創(chuàng)建，包括建筑、景觀設(shè)計(jì)和時(shí)裝設(shè)計(jì)。

二、清晰

為了通過(guò)視覺(jué)元素傳遞給用戶(hù)信息并導(dǎo)航準(zhǔn)確，不讓用戶(hù)迷失方向，通常有以下幾點(diǎn)規(guī)則：

1. 規(guī)則1：避免不必要的復(fù)雜性

始終以盡可能少的步驟和屏幕為目標(biāo)。

使用諸如底部工作表和模式窗口之類(lèi)的覆蓋來(lái)壓縮數(shù)據(jù)并減少應(yīng)用程序的占用空間。同時(shí)，確保自主和獨(dú)立的方式組織信息?？梢詫⑷蝿?wù)和子任務(wù)組合在一起。

重要的是，不要將子任務(wù)隱藏在用戶(hù)想不到的頁(yè)面上。根據(jù)清晰且合乎邏輯的分類(lèi)組織屏幕及其內(nèi)容。

同樣，始終將完成任務(wù)所需的步驟數(shù)量減少到最小值。

當(dāng)只需要一兩個(gè)操作時(shí)，不要讓用戶(hù)經(jīng)歷繁瑣的點(diǎn)擊障礙。三擊規(guī)則是最實(shí)用的 UI 設(shè)計(jì)原則之一，它指出用戶(hù)應(yīng)該能夠通過(guò)在應(yīng)用程序內(nèi)的任何位置單擊不超過(guò) 3 次來(lái)實(shí)現(xiàn)任何操作或訪(fǎng)問(wèn)他們需要的任何信息。

最重要的是，永遠(yuǎn)不要要求用戶(hù)重新輸入他們已經(jīng)提供的信息。這可能讓用戶(hù)扔掉他們的設(shè)備，直接放棄使用。

2. 規(guī)則2：提供清晰的標(biāo)示

這條原則涉及直觀的布局和清晰的信息標(biāo)簽。瀏覽應(yīng)用程序不應(yīng)以任何方式令人困惑，即使初次使用的用戶(hù)也是如此。

相反，對(duì)界面的探索應(yīng)該是有趣的，并在不知不覺(jué)中舒適地學(xué)會(huì)。

確保頁(yè)面架構(gòu)簡(jiǎn)單、合乎邏輯且有清晰的標(biāo)示。

用戶(hù)永遠(yuǎn)不應(yīng)該懷疑他們?cè)谲浖械奈恢?，也不?yīng)該不斷思考才能確定如何到達(dá)他們想去的位置。

3. 規(guī)則3：促進(jìn)視覺(jué)清晰度

良好的視覺(jué)組織提高了可用性和易讀性，使用戶(hù)能夠快速找到他們正在尋找的信息并更有效地使用界面。

設(shè)計(jì)布局時(shí)，避免一次在屏幕上顯示太多信息。構(gòu)建網(wǎng)格系統(tǒng)設(shè)計(jì)以避免視覺(jué)混亂。

應(yīng)用內(nèi)容組織的一般原則，例如將相似的項(xiàng)目組合在一起、對(duì)項(xiàng)目進(jìn)行編號(hào)以及使用標(biāo)題和提示文本。

三、隱喻

簡(jiǎn)化視覺(jué)認(rèn)知，讓用戶(hù)能盡快“認(rèn)識(shí)”界面，圖形元素符合用戶(hù)對(duì)真實(shí)世界的聯(lián)想，更符合用戶(hù)對(duì)于界面的慣性認(rèn)知。

在 UI 設(shè)計(jì)中使用隱喻可以讓用戶(hù)在現(xiàn)實(shí)世界和數(shù)字體驗(yàn)之間建立聯(lián)系。

好的隱喻會(huì)與用戶(hù)腦海中真實(shí)世界的過(guò)去體驗(yàn)產(chǎn)生強(qiáng)烈的聯(lián)系。隱喻常用于使不熟悉的事物變得熟悉。

以桌面上的回收站為例，它包含已刪除的文件——但它不是真正的垃圾箱，它以一種可以幫助用戶(hù)更輕松地理解概念的方式進(jìn)行可視化表示。

在為 UI 選擇隱喻時(shí)，選擇能夠讓用戶(hù)掌握概念模型最精細(xì)細(xì)節(jié)的隱喻。

例如，在詢(xún)問(wèn)用于支付處理的信用卡詳細(xì)信息時(shí)，可以參考現(xiàn)實(shí)世界的實(shí)體卡作為示例。

四、用戶(hù)控制

視覺(jué)設(shè)計(jì)要讓用戶(hù)感受到是用戶(hù)在控制界面，而不是被界面所控制。

1. 規(guī)則1：讓行動(dòng)可逆

用戶(hù)應(yīng)該始終能夠快速回溯他們正在做的任何事情。這允許用戶(hù)探索產(chǎn)品而不必?fù)?dān)心失敗，當(dāng)用戶(hù)知道錯(cuò)誤可以很容易地撤消時(shí)，這鼓勵(lì)了對(duì)不熟悉的選項(xiàng)的探索。

相反，如果用戶(hù)必須對(duì)他們采取的每一個(gè)動(dòng)作都非常小心，這會(huì)導(dǎo)致探索速度變慢且令人不安。

當(dāng)用戶(hù)錯(cuò)誤地選擇系統(tǒng)功能時(shí)，“撤消”會(huì)非常有用。在這種情況下，撤消功能用作“緊急出口”，允許用戶(hù)離開(kāi)不需要的狀態(tài)。

例如，當(dāng)用戶(hù)意外刪除電子郵件時(shí)，Gmail 的通知消息帶有撤消選項(xiàng)。

2. 規(guī)則2：適應(yīng)不同水平的用戶(hù)

不同技能水平的用戶(hù)應(yīng)該能夠與不同水平的產(chǎn)品進(jìn)行交互。不要為了新手或臨時(shí)用戶(hù)的易于使用的界面而犧牲專(zhuān)家用戶(hù)。

相反，要嘗試針對(duì)不同用戶(hù)的需求進(jìn)行設(shè)計(jì)，因此，用戶(hù)是專(zhuān)家還是新手并不重要。

添加教程和解釋等功能對(duì)新手用戶(hù)非常有幫助。

一旦用戶(hù)熟悉了產(chǎn)品，用戶(hù)就會(huì)尋找快捷方式來(lái)加快常用操作的速度。

設(shè)計(jì)師應(yīng)該讓有經(jīng)驗(yàn)的用戶(hù)使用快捷方式，從而為他們提供快速路徑。

作者：格格學(xué)姐

本文由 @空兩格 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

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

蘭亭妙微(bouu.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)電話(huà)：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ǔ)：我們平常會(huì)使用很多APP，久而久之我們會(huì)發(fā)現(xiàn)一些APP的設(shè)計(jì)非常的相似；一個(gè)有新意、精致的APP界面可以讓用戶(hù)產(chǎn)生很深的影響，對(duì)產(chǎn)品的形象也有一定的幫助；本文作者分享了關(guān)于如何提升UI設(shè)計(jì)的高級(jí)感的方法，我們一起來(lái)看一下。

在互聯(lián)網(wǎng)產(chǎn)品日趨成熟的今天，你會(huì)發(fā)現(xiàn)所有的App越來(lái)越像，似乎是同一套模版設(shè)計(jì)出來(lái)的產(chǎn)品；而這種普適化的設(shè)計(jì)會(huì)導(dǎo)致同質(zhì)化嚴(yán)重，使得設(shè)計(jì)不精致，產(chǎn)品沒(méi)有氣質(zhì)和品牌感。

一個(gè)App設(shè)計(jì)是否精致，是否富有設(shè)計(jì)感，在于它的細(xì)節(jié)，這就意味著我們?cè)谶M(jìn)行設(shè)計(jì)的時(shí)候，要從細(xì)微之處著手，從多方面去鉆研如何創(chuàng)造出打動(dòng)人心的UI設(shè)計(jì)。

本文總結(jié)了12個(gè)簡(jiǎn)單直觀的提升設(shè)計(jì)感的小細(xì)節(jié)，一起來(lái)學(xué)習(xí)。

一、使用顏色深淺構(gòu)建層次結(jié)構(gòu)

在對(duì)UI 文本進(jìn)行樣式控制的時(shí)候，最常見(jiàn)的錯(cuò)誤莫過(guò)于過(guò)度依賴(lài)字體大小差異來(lái)營(yíng)造對(duì)比；單純使用字體大小對(duì)比，所營(yíng)造的對(duì)比并不夠，嘗試結(jié)合色彩和字重來(lái)營(yíng)造更好的對(duì)比效果。

每種顏色都有一個(gè)視覺(jué)權(quán)重，這有助于在內(nèi)容中建立層次結(jié)構(gòu)；通過(guò)使用顏色的深淺，為元素賦予不同的重要性。

如果可以的話(huà)，你甚至可以采用兩到三種顏色：

• 主要內(nèi)容使用深灰色（諸如標(biāo)題，但是不要用純黑）；
• 次要內(nèi)容使用灰色（比如商品介紹）；
• 輔助性?xún)?nèi)容采用淺灰色（比如發(fā)布日期）；

類(lèi)似的，在UI設(shè)計(jì)的時(shí)候，通常兩種不同的字重足以營(yíng)造出優(yōu)秀的層次感：

• 大多數(shù)的文本采用正常的字重（400到500，具體取決于字體）；
• 對(duì)于需要強(qiáng)調(diào)的文字采用較重的字重（600到700，具體取決于字體）；

▲主標(biāo)題字重為600，其他標(biāo)綠點(diǎn)的文字字重都為400

應(yīng)當(dāng)盡量不要讓正文部分字重低于400，因?yàn)檫@一部分字體本身尺寸已經(jīng)較小，低于400會(huì)使得可讀性不佳。

如果你依然需要降低字重，那么不妨讓字體色彩更淺一點(diǎn)，或者替換成其他識(shí)別度較強(qiáng)、字重相對(duì)較小的字體。

灰色文字在無(wú)彩/彩色背景下要分開(kāi)處理：

不要在有色背景上使用灰色的文本，在白色背景下，將黑色的文本改成灰色（或者在黑色背景下使用灰色文本），是不錯(cuò)的淡化其視覺(jué)效果的做法。

但是在彩色背景下，想要降低和背景色之間的對(duì)比，通常有兩種方法：

一是降低白色文本的不透明度；二是讓文本逐步接近背景色，而不是改為灰色。

▲左圖設(shè)計(jì)師職位信息為白色文字降低不透明度，右圖為和背景同色相高明度的顏色

其次當(dāng)涉及長(zhǎng)篇內(nèi)容時(shí)，大面積的深色粗體字會(huì)給人一種沉重感，而且很跳躍；通過(guò)選擇類(lèi)似深灰色（#4F4F4F）這樣的顏色可以很容易地解決這個(gè)問(wèn)題，使文字更容易被識(shí)別。

二、統(tǒng)一色調(diào)

選擇一種基礎(chǔ)色，再調(diào)整色調(diào)和顏色深淺來(lái)增加均衡；設(shè)計(jì)時(shí)避免用過(guò)多的顏色。如果項(xiàng)目允許，只需使用固定的色板，通過(guò)調(diào)整基礎(chǔ)色的飽和度和明度，利用這種簡(jiǎn)單的方式為設(shè)計(jì)增加一致性。

三、干凈的陰影

陰影是UI設(shè)計(jì)中最常見(jiàn)的視覺(jué)表現(xiàn)手法，它可以增加元素的深度，使其從背景中脫穎而出，引起用戶(hù)的注意力，同時(shí)也能增強(qiáng)畫(huà)面的視覺(jué)層次感。

相比于采用大范圍的擴(kuò)散模糊陰影，使用微妙的垂直偏移陰影效果更明顯，更自然，它模擬了最常見(jiàn)的光源特征，光線(xiàn)從上往下照下來(lái)所營(yíng)造的陰影效果。

這種輕柔的陰影呈現(xiàn)出的干凈，增加了畫(huà)面的精致；如果陰影的范圍太小或顏色太深，位置也沒(méi)有偏移，而是聚集在元素的四周，就會(huì)讓畫(huà)面更加扁平，讓視覺(jué)變得厚重，呈現(xiàn)出不精致的畫(huà)面感。

陰影不一定是黑色的，還有一種擴(kuò)算陰影是模擬元素本身的顏色投射在背景上，由于陰影與元素的色調(diào)一致，因此呈現(xiàn)出十分融洽的畫(huà)面感。

在UI設(shè)計(jì)中，這種手法不宜過(guò)多使用，否則呈現(xiàn)出的各種色彩搭配會(huì)讓人眼花繚亂。

四、個(gè)性的圖標(biāo)設(shè)計(jì)

合格的設(shè)計(jì)師能夠繪制風(fēng)格統(tǒng)一的圖標(biāo)，而優(yōu)秀的設(shè)計(jì)師能夠創(chuàng)造風(fēng)格獨(dú)特的圖標(biāo)。

我們能否在追求大小一致，圓角一致，線(xiàn)寬一致和配色一致的同時(shí)，為它的視覺(jué)表現(xiàn)力加入更多的創(chuàng)意呢？例如下面這組圖標(biāo)設(shè)計(jì)，無(wú)論是在圖形上的創(chuàng)新，還是顏色搭配上都呈現(xiàn)出無(wú)與倫比的創(chuàng)意。

標(biāo)簽欄作為一個(gè)App的全局導(dǎo)航起著至關(guān)重要的作用，它的設(shè)計(jì)影響著整個(gè)產(chǎn)品的視覺(jué)風(fēng)格。

通常，大多數(shù)App都是使用iOS規(guī)范的設(shè)計(jì)樣式（默認(rèn)灰色，選中填充品牌色），這樣的設(shè)計(jì)太普通，太常見(jiàn)了；要想讓標(biāo)簽欄圖標(biāo)設(shè)計(jì)精致和富有個(gè)性，可以豐富每一個(gè)選中態(tài)圖標(biāo)的視覺(jué)表現(xiàn)，例如給圖標(biāo)加上背景和表情，即顯得生動(dòng)有趣，又增加了用戶(hù)的好感，給人留下深刻的印象。

3D立體圖標(biāo)設(shè)計(jì)是近幾年來(lái)的流行趨勢(shì)，看上去十分精致、華麗，但是看久了會(huì)讓人產(chǎn)生輕微的視覺(jué)疲勞，同時(shí)因其復(fù)雜的結(jié)構(gòu)會(huì)增加用戶(hù)的認(rèn)知成本，一般在外賣(mài)美食類(lèi)應(yīng)用中比較常見(jiàn)。

五、Tab的設(shè)計(jì)感

Tab是App設(shè)計(jì)中最常見(jiàn)的控件之一，它源自Material Design的設(shè)計(jì)規(guī)范；現(xiàn)在很多iOS產(chǎn)品當(dāng)中也開(kāi)始使用這種導(dǎo)航欄樣式來(lái)進(jìn)行設(shè)計(jì)，而原本屬于iOS規(guī)范當(dāng)中的分段選擇器變得不那么常見(jiàn)了。

在視覺(jué)表現(xiàn)形式上，Tab和標(biāo)簽欄同樣也分為選中態(tài)和未選態(tài)，它的設(shè)計(jì)較為簡(jiǎn)單，通常是使用一組文字標(biāo)簽，通過(guò)顏色或在標(biāo)簽下加上小長(zhǎng)條來(lái)區(qū)分兩者的狀態(tài)；因?yàn)樗?jiǎn)單，卻越難設(shè)計(jì)出彩，要發(fā)揮極大的設(shè)計(jì)想象力，跳脫出設(shè)計(jì)規(guī)范的限制，才能找到完美的方案。

例如蝦米音樂(lè)的Tab選中態(tài)是一段音頻波線(xiàn)，再配合文字的大小對(duì)比，一個(gè)富有設(shè)計(jì)感又符合產(chǎn)品特征的Tabs就被創(chuàng)造出來(lái)了。

我們還可以從品牌基因中獲取靈感，品牌作為用戶(hù)熟知的形象是個(gè)絕佳的來(lái)源。

從品牌形象中提取具有獨(dú)特氣質(zhì)的視覺(jué)富豪作為T(mén)ab選中態(tài)的小長(zhǎng)條，這樣就建立起視覺(jué)上的聯(lián)系，讓用戶(hù)產(chǎn)生由內(nèi)而外的一致感受；例如馬蜂窩品牌形象中的微笑符號(hào)和飛豬旅行品牌形象中的豬頭都被延伸到Tab的設(shè)計(jì)上，既讓界面視覺(jué)獨(dú)一無(wú)二，又進(jìn)一步強(qiáng)化了用戶(hù)對(duì)品牌形象的認(rèn)知。

六、無(wú)框設(shè)計(jì) 去繁從簡(jiǎn)

在UI設(shè)計(jì)中，有許多的裝飾元素，如卡片的邊框、列表的分割線(xiàn)等，雖然邊框，分割線(xiàn)是分隔兩個(gè)元素的好辦法，但是它不是唯一的方法；使用過(guò)多會(huì)讓整個(gè)布局的設(shè)計(jì)感降低，或多或少都會(huì)干擾用戶(hù)瀏覽的視線(xiàn)，讓信息內(nèi)容失去注意力，因此可以減少不必要的裝飾元素。

我們可以通過(guò)以下幾個(gè)方法來(lái)劃分元素的視覺(jué)層次，讓畫(huà)面變得干凈，整齊：

1）使用陰影

陰影同樣可以營(yíng)造出邊界感，而且相比邊框分割線(xiàn)更加微妙，并不會(huì)顯得突兀，不會(huì)分散用戶(hù)的注意力，讓內(nèi)容更聚焦。

2）使用不同的背景色來(lái)區(qū)分

通常，相鄰的元素背景只需要有微妙的差別就能夠讓人對(duì)他們進(jìn)行區(qū)分；所以，你所需要做的就是在不同的區(qū)塊采用不同的背景色，并且嘗試刪除分割線(xiàn)，因?yàn)槟愀静恍枰?/p>

3）增加額外的留白

創(chuàng)建元素之間的分離效果，并不一定要通過(guò)線(xiàn)框來(lái)表現(xiàn)，只要增加留白，讓它們分隔開(kāi)就行了，通過(guò)留白和間距來(lái)實(shí)現(xiàn)元素分組是UI設(shè)計(jì)中的常用手法。

七、統(tǒng)一設(shè)計(jì)元素

在App中的每一個(gè)界面都有許多元素，那些同類(lèi)的元素應(yīng)保持統(tǒng)一的設(shè)計(jì)樣式。

通常個(gè)人中心的標(biāo)簽欄圖標(biāo)是一個(gè)人形剪影，它代表著用戶(hù)，因此可以在展示用戶(hù)頭像和用戶(hù)形象的界面中延續(xù)使用。

如果圖形擁有獨(dú)特的外觀，如橢圓矩形，也可以作為視覺(jué)符號(hào)的一種，延續(xù)到其他界面中，成為圖形或按鈕的外觀；這樣，整個(gè)界面就被統(tǒng)一的設(shè)計(jì)元素聯(lián)系起來(lái)了，給用戶(hù)始終如一的一致感。

八、符合產(chǎn)品氣質(zhì)的字體

選擇符合產(chǎn)品氣質(zhì)的字體，可以與產(chǎn)品的定位相吻合，傳遞給用戶(hù)正確的情感意識(shí)。

雖然默認(rèn)字體可以滿(mǎn)足大多數(shù)App 的設(shè)計(jì)需求，但會(huì)出現(xiàn)一個(gè)問(wèn)題就是——系統(tǒng)字體的普適性并沒(méi)有什么特色，在一些特定的情境下就顯得收效甚微；例如在運(yùn)動(dòng)類(lèi)App中更適合粗壯的斜體來(lái)傳遞力量、爆發(fā)力、速度的感覺(jué)，換成系統(tǒng)字體后，整體感覺(jué)在氣勢(shì)上就變?nèi)趿撕芏唷?/p>

九、第三方圖標(biāo)風(fēng)格統(tǒng)一

大多數(shù)App都支持三方登陸，他可以減輕用戶(hù)注冊(cè)的時(shí)間成本。

通常是在注冊(cè)登陸頁(yè)的底部展示第三方圖標(biāo)入口，這也是設(shè)計(jì)師最常忽略的內(nèi)容，往往是直接將第三方圖標(biāo)調(diào)整一致大小和擺放整齊位置，沒(méi)有針對(duì)它們?cè)僭O(shè)計(jì)；一個(gè)設(shè)計(jì)精致的App不應(yīng)漏過(guò)任何的細(xì)節(jié)，我們可以以自家App的圖標(biāo)風(fēng)格為依據(jù)，對(duì)第三方圖標(biāo)進(jìn)行優(yōu)化設(shè)計(jì)。

十、圖片中尋找色彩

App中優(yōu)美的圖文設(shè)計(jì)，能帶給用戶(hù)如沐春風(fēng)的視覺(jué)享受，它非常重要。我們經(jīng)?？吹轿淖织B加在圖片背景上的設(shè)計(jì)樣式；為了減少?gòu)?fù)雜圖片背景對(duì)文字的干擾，通常的做法是疊加半透明度的黑色蒙版，讓白色文字清晰可見(jiàn)，但這不是最優(yōu)的辦法。

我們可以從圖片中提取主色調(diào)用于疊加背景的填充色，這樣就使文字、色塊和圖片融入到一起了，畫(huà)面變得高級(jí)和富有設(shè)計(jì)感。

十一、提高圖片質(zhì)量

圖片的質(zhì)量影響著整個(gè)App的格調(diào)和用戶(hù)的情緒，高品質(zhì)的圖片給人愉悅的視覺(jué)享受，產(chǎn)生美好的聯(lián)想；而低品質(zhì)的圖片會(huì)瞬間拉低App的質(zhì)感。

在App設(shè)計(jì)中，一張漂亮的圖片從收集到上線(xiàn)，需要經(jīng)過(guò)裁剪，調(diào)色等過(guò)程才能被使用；即使是普通的商品圖片，我們將它摳圖后調(diào)整成統(tǒng)一大小，再加上干凈的背景，就能立刻提升商品的美感，界面視覺(jué)也會(huì)變得美觀、整潔。

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

現(xiàn)在的UI界面設(shè)計(jì)中，卡片式設(shè)計(jì)已經(jīng)是一種非常常見(jiàn)的設(shè)計(jì)形式，它有利于信息分層和整合，劃分出更加清晰的組織結(jié)構(gòu)，實(shí)現(xiàn)復(fù)雜內(nèi)容的簡(jiǎn)化處理，提高空間利用率；同時(shí)卡片式設(shè)計(jì)通常很依賴(lài)視覺(jué)元素，很強(qiáng)的視覺(jué)元素正是卡片式設(shè)計(jì)的一種優(yōu)勢(shì)，也是提升設(shè)計(jì)品質(zhì)感的良方。

作者：Fyin印跡；公眾號(hào)：印跡拾光

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

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

蘭亭妙微(bouu.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)電話(huà)：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

在現(xiàn)代移動(dòng)應(yīng)用設(shè)計(jì)中，「浮標(biāo)」按鈕（Floating Action Button）已成為一種常見(jiàn)的交互元素，它不僅提供便捷的功能入口，還能增強(qiáng)用戶(hù)體驗(yàn)。然而，設(shè)計(jì)一個(gè)有效的浮標(biāo)按鈕并非易事，需要綜合考慮功能定位、視覺(jué)效果、交互設(shè)計(jì)以及技術(shù)實(shí)現(xiàn)等多個(gè)方面。

今天分享的是「浮標(biāo)設(shè)計(jì)」。結(jié)合設(shè)計(jì)原則與“智能伴學(xué)助手”項(xiàng)目應(yīng)用浮標(biāo)實(shí)踐展開(kāi)。

文章目錄如下：

一、背景

在教育類(lèi)移動(dòng)端中接入了大模型AI智能應(yīng)用，為保證這個(gè)應(yīng)用入口可長(zhǎng)期保持并隨時(shí)可見(jiàn)，提高使用率，為用戶(hù)提供便利。筆者通過(guò)“智能伴學(xué)助手”浮標(biāo)實(shí)踐應(yīng)用，對(duì)后續(xù)制作浮標(biāo)在界面設(shè)計(jì)中思考與探索。  浮標(biāo)的本質(zhì)與價(jià)值

① 空間維度突破  

作為界面中的「第三層空間」，浮標(biāo)通過(guò)視覺(jué)懸浮感打破平面限制 (如iOS的3D視差效果)；在信息過(guò)載時(shí)代，提供「隨時(shí)在場(chǎng)」的核心功能入口 (如美團(tuán)外賣(mài)的懸浮購(gòu)物車(chē)，左右動(dòng)效：進(jìn)縮)。

▲「第三層空間」并「隨時(shí)在場(chǎng)」，也是很好的廣告位和優(yōu)惠營(yíng)銷(xiāo)，一些浮標(biāo)的“小巧思”。

② 認(rèn)知心理學(xué)應(yīng)用

利用格式塔原則中的「閉合性」設(shè)計(jì)半透明遮罩，暗示可交互區(qū)域；通過(guò)菲茨定律優(yōu)化點(diǎn)擊熱區(qū)，圓形浮標(biāo)直徑建議≥48dp (Android規(guī)范)。  

二、浮標(biāo)設(shè)計(jì)

就項(xiàng)目中“智能伴學(xué)助手”為例，一個(gè)教育類(lèi)的應(yīng)用入口，結(jié)合功能定位、用戶(hù)體驗(yàn)與技術(shù)實(shí)現(xiàn)浮標(biāo)在界面中的作用。

做了8年產(chǎn)品經(jīng)理后，我是這么看產(chǎn)品經(jīng)理的

我個(gè)人是從非常初級(jí)的產(chǎn)品經(jīng)理做起，再到負(fù)責(zé)一個(gè)大產(chǎn)品的項(xiàng)目管理，現(xiàn)在有幸跳出了日?；A(chǔ)的工作更多的去看產(chǎn)品的PMF，product strategy...

查看詳情 >

通常浮標(biāo)是一個(gè)懸浮的按鈕或圖標(biāo)，用于快速訪(fǎng)問(wèn)某些功能，從多個(gè)維度探索其在移動(dòng)端界面中的合理呈現(xiàn)方式：

① 功能定位與場(chǎng)景適配

浮標(biāo)的設(shè)計(jì)規(guī)范：比如尺寸、顏色、位置。通用的設(shè)計(jì)規(guī)范，教學(xué)工具類(lèi)App的界面設(shè)計(jì)，可能涉及圖標(biāo)和布局。

1）尺寸與網(wǎng)格系統(tǒng)

? 圖標(biāo)尺寸需適配不同屏幕分辨率，常見(jiàn)規(guī)范包括128x128px、96x96px、64x64px等，需根據(jù)界面層級(jí)選擇合適尺寸。

? 尺寸一般用1:1比較好或者成倍數(shù)，先做大再導(dǎo)出所需要的不同大小比例。

? 使用網(wǎng)格系統(tǒng) (如微軟Fluent的24px基礎(chǔ)網(wǎng)格) 確保視覺(jué)一致性，留出安全邊距（如2px內(nèi)邊距）避免元素溢出。

2）造型與風(fēng)格

? 遵循簡(jiǎn)約易懂原則，優(yōu)先采用象形圖或表意符號(hào)增強(qiáng)識(shí)別性。

? 保持系列圖標(biāo)風(fēng)格統(tǒng)一，包括線(xiàn)條粗細(xì) (建議1.5px)、圓角弧度 (微軟Fluent定義大/中/小三級(jí)圓角) 及視覺(jué)平衡。

3）適配性

? 導(dǎo)出格式需與開(kāi)發(fā)協(xié)作，推薦PNG序列或SVGA文件以兼顧清晰度與性能。

? 自適應(yīng)考慮不同平臺(tái)的顯示情況。

核心功能聚合：語(yǔ)言學(xué)習(xí)工具類(lèi)界面將高頻功能 (如首頁(yè)入口、作業(yè)評(píng)論、學(xué)習(xí)提問(wèn)) 通過(guò)浮標(biāo)動(dòng)態(tài)整合，支持長(zhǎng)按展開(kāi)二級(jí)菜單或滑動(dòng)切換功能模式，吸附于屏幕邊緣。

根據(jù)學(xué)習(xí)階段智能變化：

• 課前(預(yù)習(xí))：浮標(biāo)展示課程試學(xué)入口或?qū)W習(xí)目標(biāo)設(shè)定；
• 課中(口語(yǔ)輸)：提供實(shí)時(shí)筆記懸浮窗或標(biāo)記工具；
• 課后(點(diǎn)評(píng))：將課后作業(yè)及鞏固語(yǔ)言習(xí)得情況的評(píng)價(jià)和自我精進(jìn)。

(外語(yǔ)語(yǔ)言口語(yǔ)學(xué)習(xí)一般模式：盲聽(tīng)，然后根據(jù)自己的話(huà)復(fù)述，理解語(yǔ)言并有效使用語(yǔ)言)

▲ 首頁(yè)入口、作業(yè)評(píng)論、學(xué)習(xí)提問(wèn)通過(guò)浮標(biāo)智能解答點(diǎn)評(píng)，通過(guò)二級(jí)頁(yè)面展開(kāi)細(xì)則

② 視覺(jué)與交互設(shè)計(jì)

以”智能伴學(xué)助手“為例，浮標(biāo)主色是藍(lán)色，企業(yè)主題色也是藍(lán)色，而”智能伴學(xué)助手“浮標(biāo)使用背景一般也以藍(lán)色為主，App主題色也是藍(lán)色，多場(chǎng)景使用適配藍(lán)色背景的靜態(tài)浮標(biāo)，又要使浮標(biāo)可以在背景中脫穎而出，在其過(guò)程中嘗試藍(lán)+藍(lán)搭配的存在局限性，本身藍(lán)色系較統(tǒng)一。

在同為藍(lán)色后，產(chǎn)生不同「空間」，通過(guò)將界面元素分層（如前景圖標(biāo)與背景圖像），營(yíng)造深度感。在浮標(biāo)進(jìn)行描邊隔層，現(xiàn)在很多表情包就是這種模式操作。

微信小程序的移動(dòng)學(xué)習(xí)平臺(tái)設(shè)計(jì)，強(qiáng)調(diào)了用戶(hù)需求分析、界面簡(jiǎn)潔和交互設(shè)計(jì)，這可能對(duì)浮標(biāo)的功能定位有幫助。智能伴學(xué)助手來(lái)浮標(biāo)快速訪(fǎng)問(wèn)。

在不同背景下的浮標(biāo)呈現(xiàn)視覺(jué)形式，只要點(diǎn)擊即可進(jìn)入應(yīng)用。

思考與探索：

• 浮標(biāo)需要特色，用戶(hù)在使用過(guò)程中視覺(jué)明顯，提高交互。
• 浮標(biāo)既顯眼又不干擾學(xué)習(xí)，所以需要平衡可見(jiàn)性和沉浸感。
• 浮標(biāo)可以移動(dòng)，用戶(hù)可以根據(jù)需要調(diào)整位置，避免遮擋內(nèi)容。
• 現(xiàn)浮標(biāo)是靜態(tài)的，如何嘗試動(dòng)態(tài)浮標(biāo)，與用戶(hù)有更好的交互體驗(yàn)，參與感。
• 顏色和動(dòng)效方面，冷色調(diào)營(yíng)造學(xué)習(xí)氛圍，浮標(biāo)可以用品牌色，如藍(lán)色或綠色，加上微動(dòng)效吸引注意。樣式用了藍(lán)色圓形浮標(biāo)，可能適合教育類(lèi)應(yīng)用，賦予科技感設(shè)計(jì)。
• 不同狀態(tài)或者不同頁(yè)面下的浮標(biāo)呈現(xiàn)方式不同，但成一系列，增加趣味性。

▲ 白色背景或者透明背景下的浮標(biāo)呈現(xiàn)，在不同頁(yè)面呈現(xiàn)一“系列”

▲ 藍(lán)色背景下或者在統(tǒng)一色系下浮標(biāo)視覺(jué)”糊“，可用白邊的形式將背景和浮標(biāo)的”空間“區(qū)分開(kāi)

思考與探索：配色方案

1）主色選擇

明亮色系：如紅色、橙色、黃色等，能快速吸引用戶(hù)注意，適用于促銷(xiāo)活動(dòng)入口。

品牌色融合：在特殊場(chǎng)景中融入品牌LOGO或主色，代表企業(yè)形象和IP，增強(qiáng)品牌認(rèn)知。

2）色彩心理學(xué)應(yīng)用

藍(lán)色：傳遞信任感，適合金融或工具類(lèi)應(yīng)用。

黑金/黑黃組合：營(yíng)造神秘或高端感，常見(jiàn)于娛樂(lè)或奢侈品領(lǐng)域。

紫色+粉紅：適用于美容、女性向產(chǎn)品，傳遞溫柔與創(chuàng)意。

控制色彩平衡，用戶(hù)色彩感官可適應(yīng)。

3）對(duì)比與背景

使用中性色（如米色、白色）作為背景，提升信息可讀性。

避免沖突色搭配（如藍(lán)色用于食品類(lèi)浮標(biāo)易抑制食欲）。

思考與探索：個(gè)性化推薦和交互設(shè)計(jì)，可以結(jié)合AI預(yù)測(cè)用戶(hù)行為，動(dòng)態(tài)調(diào)整浮標(biāo)的出現(xiàn)時(shí)機(jī)，比如在需要提醒作業(yè)時(shí)顯示。主色選用品牌色（如教育藍(lán)/科技紫）強(qiáng)化識(shí)別性。

▲ 如何設(shè)計(jì)浮標(biāo)會(huì)更好？

創(chuàng)新交互模式思考探索：

1）壓力感知交互  

? 安卓壓感屏實(shí)現(xiàn)「輕按預(yù)覽/重按觸發(fā)」分層交互(如華為懸浮球壓感菜單)；配合觸覺(jué)反饋(Haptic Engine)增強(qiáng)操作確認(rèn)感。

2）動(dòng)態(tài)語(yǔ)義變形

生物擬態(tài)動(dòng)畫(huà)：

? 呼吸感懸?。耗M水母游動(dòng)節(jié)奏（振幅0.5-1.2px，頻率0.8Hz）  ；

? 點(diǎn)擊時(shí)觸發(fā)粒子擴(kuò)散動(dòng)畫(huà)（模擬知識(shí)傳遞意象）；

? 拖拽時(shí)產(chǎn)生彈性形變（阻尼系數(shù)0.6-0.8），邊緣碰撞后回彈。

根據(jù)場(chǎng)景智能改變形態(tài)：  

? 閱讀類(lèi)App中展開(kāi)為「書(shū)簽浮標(biāo)+進(jìn)度條」復(fù)合控件  ；

? 音樂(lè)播放器浮標(biāo)可拉伸成波形可視化界面。

通過(guò)多模態(tài)反饋，聽(tīng)覺(jué)，視覺(jué)，觸覺(jué)多種情感交互。

3） 空間布局策略

? 默認(rèn)位置：置于屏幕右下側(cè)（符合右手持機(jī)習(xí)慣），預(yù)留10%邊距防止誤觸；

? 智能避讓?zhuān)和ㄟ^(guò)內(nèi)容識(shí)別算法，在視頻播放或文本輸入時(shí)自動(dòng)偏移避開(kāi)核心內(nèi)容區(qū)域；

? AR場(chǎng)景中的空間投影浮標(biāo)（如IKEA Place家具預(yù)覽浮窗）。

▲ 位置多為屏幕右下側(cè)

③ 技術(shù)實(shí)現(xiàn)優(yōu)化

1）跨端一致性

? 使用React等框架封裝可復(fù)用浮標(biāo)組件，通過(guò)響應(yīng)式設(shè)計(jì)適配不同設(shè)備尺寸（如折疊屏展開(kāi)態(tài)需重新計(jì)算定位錨點(diǎn)）；

? 采用SVGA格式實(shí)現(xiàn)高性能動(dòng)效，控制幀率在30fps以?xún)?nèi)以降低功耗。

2）AI驅(qū)動(dòng)個(gè)性化

? 基于LSTM模型預(yù)測(cè)用戶(hù)行為： 檢測(cè)到長(zhǎng)時(shí)間未操作時(shí)，浮標(biāo)縮小并展示激勵(lì)標(biāo)語(yǔ)； 識(shí)別到錯(cuò)題高峰時(shí)段，主動(dòng)彈出知識(shí)點(diǎn)講解入口；

? 支持語(yǔ)音指令交互（如“浮標(biāo)移到左上角”）。

④ 無(wú)障礙與倫理考量

1）包容性設(shè)計(jì)

? 為色弱用戶(hù)提供高對(duì)比度模式 (浮標(biāo)輪廓增加動(dòng)態(tài)描邊，對(duì)比度≥4.5:1)；

? 支持頭部追蹤控制浮標(biāo)移動(dòng) (iOS Switch Control技術(shù)適配)。

2）防沉迷機(jī)制 (適合未成年類(lèi)App)

? 連續(xù)使用1小時(shí)后，浮標(biāo)漸變灰色并觸發(fā)休息提醒；

? 家長(zhǎng)端可遠(yuǎn)程設(shè)置浮標(biāo)功能禁用時(shí)段。(未成年學(xué)習(xí)類(lèi)工具考慮優(yōu)化)

⑤ 創(chuàng)新方向探索

1）多模態(tài)融合

? AR場(chǎng)景中浮標(biāo)投射為3D虛擬助手，支持手勢(shì)交互與空間定位；

? 結(jié)合眼動(dòng)追蹤技術(shù)，實(shí)現(xiàn)注視區(qū)域自動(dòng)呼出上下文菜單。

2）情感化表達(dá)

? 根據(jù)學(xué)習(xí)成就解鎖浮標(biāo)皮膚 (如連續(xù)打卡7天變?yōu)楠?jiǎng)杯形態(tài))；

? 錯(cuò)誤率過(guò)高時(shí)，浮標(biāo)呈現(xiàn)“鼓勵(lì)模式” (配色變暖+微震動(dòng)反饋)。

學(xué)習(xí)類(lèi)智能伴學(xué)助手的浮標(biāo)既能作為高效的功能樞紐，又可成為情感化學(xué)習(xí)伴侶。實(shí)際落地時(shí)建議結(jié)合A/B測(cè)試持續(xù)優(yōu)化，例如對(duì)比分析「固定浮標(biāo)」與「場(chǎng)景自適應(yīng)浮標(biāo)」的點(diǎn)擊轉(zhuǎn)化率差異。

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

浮標(biāo)不應(yīng)僅是功能載體，更應(yīng)成為：  

? 空間敘事者：通過(guò)動(dòng)態(tài)變化講述產(chǎn)品故事；

? 情感連接器：建立用戶(hù)與數(shù)字世界的溫度觸點(diǎn)；

? 場(chǎng)景預(yù)言家：預(yù)判需求并提供恰到好處的服務(wù)。

設(shè)計(jì)師需在「顯性?xún)r(jià)值」與「隱形干擾」間找到精妙平衡，讓浮標(biāo)成為提升體驗(yàn)的優(yōu)雅解決方案而非視覺(jué)負(fù)擔(dān)。未來(lái)可探索腦機(jī)接口的意念控制浮標(biāo)、量子動(dòng)畫(huà)渲染等突破性方向。

技術(shù)實(shí)現(xiàn)上，探究代碼示例展示了如何控制浮標(biāo)的移動(dòng)，確保不超出屏幕，這可以作為技術(shù)參考應(yīng)用實(shí)際案例中。同時(shí)性能優(yōu)化方面，使用SVGA格式或減少幀數(shù)，可能對(duì)動(dòng)效設(shè)計(jì)有幫助。

浮標(biāo)設(shè)計(jì)需要結(jié)合功能定位、用戶(hù)行為、視覺(jué)設(shè)計(jì)、交互體驗(yàn)和技術(shù)實(shí)現(xiàn)，可多進(jìn)行參考不同案例，搜索現(xiàn)有項(xiàng)目，對(duì)比借鑒然后對(duì)新型B端界面有所創(chuàng)新，確保既實(shí)用又不干擾用戶(hù)。

還可以利用Ai創(chuàng)新思維，設(shè)計(jì)師可以更快速、高效地生成多種設(shè)計(jì)方案，結(jié)合項(xiàng)目開(kāi)發(fā)滿(mǎn)足消費(fèi)者對(duì)個(gè)性化、時(shí)尚化的需求。