在數(shù)字化產(chǎn)品設(shè)計愈發(fā)注重用戶體驗(yàn)的當(dāng)下，界面反饋早已不是單純的“操作提示”，而是串聯(lián)用戶行為、產(chǎn)品功能與體驗(yàn)感知的核心紐帶，更是決定產(chǎn)品易用性、專業(yè)性與用戶留存度的關(guān)鍵細(xì)節(jié)。作為深耕UI/UE全鏈路設(shè)計十余年的專業(yè)團(tuán)隊(duì)，蘭亭妙微UI設(shè)計公司（藍(lán)藍(lán)設(shè)計）長期聚焦B端后臺管理、大數(shù)據(jù)可視化、工業(yè)軟件、智能設(shè)備界面等多元場景，累計服務(wù)數(shù)百家中大型企業(yè)與行業(yè)龍頭客戶，在各類實(shí)戰(zhàn)項(xiàng)目中沉淀了一套完整、可落地的反饋設(shè)計方法論。

在界面設(shè)計中， 反饋（Feedback）是系統(tǒng)對用戶操作做出的即時、可感知的回應(yīng) 。系統(tǒng)通過界面元素、動效、聲音或震動等方式，告知當(dāng)前操作已被識別、系統(tǒng)狀態(tài)如何，以及后續(xù)可采取的行動。

核心原理

產(chǎn)品落地技巧

1. Location（位置）：圍繞用戶位置組織信息

• 地圖 APP 優(yōu)先加載用戶當(dāng)前位置的道路、地標(biāo)、周邊商戶，位置變化時實(shí)時更新信息；
• 外賣 / 生鮮 APP 按 “距離由近到遠(yuǎn)” 展示商戶，讓用戶快速找到周邊可配送的商家；
• 游戲（如絕地求生）隨用戶位置變化，加載周邊的建筑、道具、敵人信息。

2. Alphabet（字母）：按字母順序組織信息

• 通訊錄按姓氏拼音首字母排序，支持字母索引，快速定位聯(lián)系人；
• 詞典、題庫 APP 按字母 / 拼音排序，方便用戶查找內(nèi)容；
• 電商 APP 的品牌分類，按字母順序排列，提升篩選效率。

3. Time（時間）：按時間維度組織信息

• 朋友圈、微博按 “發(fā)布時間從新到舊” 展示內(nèi)容；
• 資訊 APP 分 “最新、今日、本周” 板塊，讓用戶按時間獲取信息；
• 電商 APP 的訂單頁面，按 “下單時間從新到舊” 排序，方便用戶查找近期訂單。

4. Category（類別）：按屬性分類組織信息

• 音樂 APP 按 “曲風(fēng)（流行、搖滾、民謠）、歌手、專輯” 分類；
• 電商 APP 按 “商品品類（服飾、食品、數(shù)碼）、功能（熱銷、新品、優(yōu)惠）” 分類；
• 手機(jī)桌面的 APP 文件夾，按 “社交、辦公、娛樂” 分類。

5. Hierarchy（視覺層級）：按重要性劃分視覺層級

• 電商 APP 的商品頁面，核心信息（商品名稱、價格）用大號粗體，次要信息（產(chǎn)地、規(guī)格）用小號常規(guī)字體；
• 首頁金剛區(qū)，將高頻功能（首頁、消息、我的）用更醒目的圖標(biāo) / 顏色突出，低頻功能弱化展示；
• 詳情頁的標(biāo)題用大字號 + 強(qiáng)對比色，正文用常規(guī)字號 + 淺色系，讓用戶快速抓住重點(diǎn)。

關(guān)鍵總結(jié)

四、稟賦效應(yīng)：讓用戶 “珍惜” 你的產(chǎn)品，提升留存與轉(zhuǎn)化

核心定義

核心原理

產(chǎn)品落地技巧

1. 賦予用戶 “專屬價值”，強(qiáng)化擁有感

• 學(xué)習(xí) APP 將學(xué)習(xí)數(shù)據(jù)生成個性化報告，支持一鍵分享，讓用戶覺得 “這份成果是獨(dú)屬于我的”；
• 旅游 APP 記錄用戶的旅游足跡，生成 “我的旅行地圖”，激發(fā)用戶的珍惜感和分享欲；
• 電商 APP 為用戶生成 “專屬會員標(biāo)識”“定制化推薦頁面”，強(qiáng)化專屬感。

2. 提供免費(fèi)試用 / 體驗(yàn)，誘導(dǎo)稟賦效應(yīng)

• 視頻 / 音樂 APP 為新用戶提供 7 天免費(fèi) VIP，到期后用戶會因?yàn)?“失去高清畫質(zhì) / 無損音樂” 而選擇付費(fèi)；
• 辦公 APP 提供 30 天免費(fèi)高級功能，讓用戶習(xí)慣后，不愿回到基礎(chǔ)版；
• 電商 APP 為新用戶發(fā)放 “專屬優(yōu)惠券”，讓用戶覺得 “擁有了優(yōu)惠，不用就虧了”。

3. 增加個性化設(shè)置，讓用戶 “參與產(chǎn)品打造”

• 瀏覽器 / APP 支持換膚、換背景、調(diào)整布局，讓用戶按自己的喜好定制產(chǎn)品；
• 筆記 APP 支持自定義筆記本封面、字體、顏色，讓用戶覺得 “這是我的專屬筆記”；
• 社交 APP 支持自定義頭像、昵稱、個性簽名，強(qiáng)化用戶的擁有感。

4. 利用 “損失厭惡”，提升用戶粘性

• 簽到 APP 提示 “已連續(xù)簽到 5 天，中斷將重置進(jìn)度，失去 100 積分”；
• 會員 APP 提示 “您的 VIP 還有 3 天到期，到期后將失去免費(fèi)包郵、專屬折扣等權(quán)益”；
• 打卡 APP 提示 “今日未打卡，將失去本月打卡勛章的領(lǐng)取資格”。

關(guān)鍵總結(jié)

五、干擾效應(yīng)：減少信息干擾，讓用戶專注核心操作

核心定義

核心原理

產(chǎn)品落地技巧

1. 簡化視覺設(shè)計，避免 “過度裝飾”

• 金剛區(qū)圖標(biāo)避免使用過于復(fù)雜的實(shí)物圖 / 彩色漸變，優(yōu)先用簡約的線性圖標(biāo) + 清晰的文字，讓用戶一眼識別；
• 頁面避免過多的色彩、動效，核心操作按鈕（如確認(rèn)、支付、提交）用強(qiáng)對比色突出，次要元素用低飽和度色彩；
• 生鮮 APP 的分類圖標(biāo)，避免用復(fù)雜的商品實(shí)物圖，用簡約的圖標(biāo)（如蘋果代表水果、青菜代表蔬菜）即可。

2. 劃分信息層級，避免 “信息堆積”

• 美團(tuán)首頁金剛區(qū)，將高頻功能（美食、外賣、超市便利）用大圖標(biāo)突出，低頻功能（旅游、美甲、洗車）用小圖標(biāo)弱化，避免信息雜亂；
• 個人中心頁面，將核心功能（我的訂單、我的資產(chǎn)、我的收藏）放在頂部，次要功能（設(shè)置、幫助、關(guān)于）放在底部，按使用頻率排序；
• 詳情頁將核心操作（購買、加入購物車）放在固定位置，次要信息（商品參數(shù)、評價）放在下方，避免干擾核心操作。

3. 按用戶目標(biāo)，組織頁面功能

• 刷題 APP 的答題頁面，僅保留 “題目、選項(xiàng)、上一題、下一題”，移除廣告、推薦、消息等無關(guān)信息，讓用戶專注答題；
• 支付頁面，僅保留 “支付金額、支付方式、確認(rèn)支付”，避免添加其他功能（如充值、領(lǐng)券），防止用戶分心；
• 閱讀 APP 的閱讀頁面，支持 “沉浸式模式”，隱藏導(dǎo)航、廣告、消息，讓用戶專注閱讀。

4. 功能分類聚合，避免 “分散擺放”

• 個人中心將 “設(shè)置、幫助、反饋、關(guān)于” 聚合在 “更多功能” 里，避免零散擺放；
• 電商 APP 將 “收藏、足跡、購物車” 聚合在 “我的資產(chǎn)” 板塊，按 “用戶資產(chǎn)” 的邏輯組織；
• 辦公 APP 將 “新建、保存、分享、打印” 聚合在操作欄，按 “文檔操作” 的邏輯組織。

實(shí)戰(zhàn)案例

關(guān)鍵總結(jié)

全文核心總結(jié)

• 用五架帽理論組織信息，讓用戶 “好找信息”；
• 用干擾效應(yīng)簡化設(shè)計，讓用戶 “專注操作”；
• 用蔡加尼克效應(yīng)引導(dǎo)參與，讓用戶 “愿意完成”；
• 用峰終定律打磨體驗(yàn)，讓用戶 “記住產(chǎn)品”；
• 用稟賦效應(yīng)強(qiáng)化擁有，讓用戶 “珍惜產(chǎn)品”。

閱讀導(dǎo)航

1. 峰終定律：抓準(zhǔn)體驗(yàn)關(guān)鍵節(jié)點(diǎn)，讓用戶記住你的產(chǎn)品
2. 蔡加尼克效應(yīng)：利用未完成心理，提升用戶參與度
3. 五架帽理論（LATCH 原則）：高效組織信息，降低用戶認(rèn)知成本
4. 稟賦效應(yīng)：讓用戶對產(chǎn)品產(chǎn)生 “歸屬感”，提升留存與轉(zhuǎn)化
5. 干擾效應(yīng)：減少信息干擾，讓用戶專注核心操作

一、峰終定律：體驗(yàn)的好壞，由兩個關(guān)鍵節(jié)點(diǎn)決定

核心定義

核心原理

產(chǎn)品落地技巧

1. 強(qiáng)化正向峰值：打造用戶的 “愉悅瞬間”

盲盒 APP 購買成功后，彈出動態(tài)收藏卡，放大用戶的獲得感；

• 網(wǎng)易云音樂直播間為新用戶彈出「新人見面禮」，用視覺設(shè)計拉滿氛圍；
• 功能操作完成后（如打卡、繳費(fèi)、答題），用情感化彈窗給予肯定，如 “任務(wù)完成！你也太厲害了吧～”。

2. 降低負(fù)面峰值：緩解用戶的 “焦慮時刻”

• 網(wǎng)絡(luò)斷開時，用趣味動效 + 溫柔提示 “網(wǎng)絡(luò)開小差啦，點(diǎn)擊重試吧” 代替冰冷的報錯碼；
• 抽獎未中時，彈出安慰式彈窗 “沒關(guān)系，下次好運(yùn) buff 加持～”，并附帶小額優(yōu)惠券。

3. 打磨終值體驗(yàn)：給用戶一個 “完美收尾”

• 刷題 APP 在用戶完成整套習(xí)題后，展示直觀的數(shù)據(jù)分析頁（正確率、能力提升、排名），并附帶鼓勵語；
• 外賣 APP 下單成功后，清晰展示配送進(jìn)度 +“下單成功！吃貨專屬福利已到賬”，讓收尾更愉悅；
• 課程 APP 完成學(xué)習(xí)后，生成學(xué)習(xí)證書 / 打卡海報，支持一鍵分享，放大用戶的成就感。

實(shí)戰(zhàn)案例

關(guān)鍵總結(jié)

二、蔡加尼克效應(yīng)：未完成的事，用戶會記得更牢

核心定義

核心原理

產(chǎn)品落地技巧

1. 用進(jìn)度提示，引導(dǎo)用戶持續(xù)完成

• 學(xué)習(xí) APP 的簽到頁面，展示 “已連續(xù)簽到 3 天，再簽 4 天領(lǐng) 50 積分”，用未完成的獎勵吸引用戶持續(xù)打卡；
• 健身 APP 的課程頁面，標(biāo)注 “本課程共 8 節(jié)，已學(xué) 3 節(jié)”，激發(fā)用戶的完成欲。

2. 拆分復(fù)雜任務(wù)，減少用戶心理負(fù)擔(dān)

• 新用戶注冊時，將 “手機(jī)號驗(yàn)證→設(shè)置密碼→完善資料” 拆分為 3 個頁面，標(biāo)注 “1/3 驗(yàn)證手機(jī)號”，讓用戶覺得 “任務(wù)很簡單，很快就能完成”；
• 信息認(rèn)證時，按 “身份信息→銀行卡信息→人臉驗(yàn)證” 拆分，中途退出后再次進(jìn)入可直接定位到未完成步驟。

3. 用待辦提醒，強(qiáng)化 “未完成” 的心理暗示

• 日歷 APP 的代辦功能，未完成的事項(xiàng)會持續(xù)高亮，讓用戶產(chǎn)生 “必須做完” 的心理；
• 辦公 APP 的待辦列表，用小紅點(diǎn)標(biāo)注未處理的消息，引導(dǎo)用戶及時操作；
• 電商 APP 的購物車，保留用戶未付款的商品，并用 “庫存僅剩 3 件” 強(qiáng)化完成沖動。

實(shí)戰(zhàn)案例

關(guān)鍵總結(jié)

• 設(shè)計是信息的包裝與合理排布
• 設(shè)計是整理信息的藝術(shù)
• 設(shè)計的本質(zhì)是交流，是信息的有效交換

二、何為設(shè)計中的潛臺詞

三、潛臺詞的核心作用

1. 傳遞隱藏信息，讓體驗(yàn)路徑更流暢

1. 加入通用的游戲視覺元素點(diǎn)綴，貼合游戲場景；
2. 將卡片整體改為暗色模式，與游戲的沉浸式風(fēng)格統(tǒng)一。

2. 建立情感連接，讓設(shè)計更有溫度

第一步：梳理頁面，按情感濃度劃分設(shè)計層級

第二步：挖掘情感元素，傳遞專屬潛臺詞

第三步：統(tǒng)一視覺語言，利用曝光效應(yīng)加深記憶

3. 減少認(rèn)知成本，讓信息更易理解

• 傳遞隱藏信息：讓設(shè)計的隱藏信號與場景契合，讓體驗(yàn)路徑更流暢；
• 建立情感連接：挖掘核心情感元素，放大用戶間的情感共鳴，增強(qiáng)代入感；
• 減少認(rèn)知成本：將陌生概念具象為熟悉事物，用熟悉的潛臺詞加快用戶認(rèn)知。

四、寫在最后

我們經(jīng)常會使用到很多產(chǎn)品，一些產(chǎn)品里的色彩搭配也會給我們留下深刻的影響，比如你會記得淘寶的橙色、支付寶的藍(lán)色等等，色彩對于用戶的體驗(yàn)也很重要；蘭亭妙微ui設(shè)計公司分享了關(guān)于色彩在UI設(shè)計中的應(yīng)用，我們一起來看一下。

一、色彩的應(yīng)用

人腦對于色彩的記憶度要高于形態(tài)，即一個App給用戶留下深刻印象的往往是界面的色彩；例如說到支付寶，我們可能想不起它的首頁長什么樣子，標(biāo)簽欄圖標(biāo)是那些，但能馬上記起它的界面主色是藍(lán)色；因此運(yùn)用好色彩對UI設(shè)計十分重要，它能直觀的呈現(xiàn)產(chǎn)品的氣質(zhì)和性格，能有效的幫助用戶組織和閱讀信息，與界面設(shè)計產(chǎn)生聯(lián)系和記憶。

好的配色往往依靠設(shè)計師審美、感覺搭配出來，但合理的顏色搭配必定存在合理的配色規(guī)律和配色方法論的支撐，下面結(jié)合相關(guān)案例為大家講解色彩運(yùn)用的幾個技巧。

1. 不得觸碰的禁區(qū)

分析研究了很多優(yōu)秀設(shè)計作品，發(fā)現(xiàn)他們在用色的時候有一部分區(qū)域是不會使用的，也就是我們常說的“配色禁區(qū)”；當(dāng)然，這里的“禁區(qū)”是帶雙引號帶的，并沒有什么絕對的禁區(qū)，只是說這些顏色不易控制，在連基礎(chǔ)色都沒有駕馭好之前，盡量少碰。

配色禁區(qū)大概分為這三種：三角形禁區(qū)、矩形禁區(qū)、扇形禁區(qū)（紅色為禁區(qū)），如下圖：

綜合看來，不管是那種禁區(qū)，右下角區(qū)域的顏色是很少用的。畢竟他們又臟又深，當(dāng)然什么顏色都能駕馭的大師請略過。

知識點(diǎn)：

在界面設(shè)計中，一般主色和輔助色都集中在右上角，次要的和不可點(diǎn)的顏色都集中在中中上方，而文字信息和背景色則集中在左側(cè)，右下角禁區(qū)是我們要重點(diǎn)避開的對象。

2. 色調(diào)一致

在App設(shè)計之前應(yīng)先確定界面的主色調(diào)，主色將占據(jù)界面中很大的比例，通常是品牌色，而輔助色、點(diǎn)綴色、背景色等都應(yīng)以主色調(diào)為基準(zhǔn)來搭配，這樣才能保證App整體色調(diào)的一致。

色調(diào)一致的界面，能帶給用戶始終如一的視覺體驗(yàn)。例如馬蜂窩將黃色（品牌色）作為主色，以及從主色搭配出的藍(lán)色（對比色）貫穿App始終。

3. 60-30-10原則

60% 30% 10%的原則，是達(dá)到色彩平衡的最佳比例。在60%的空間使用主色，可以運(yùn)用到導(dǎo)航欄、按鈕、圖標(biāo)等關(guān)鍵的元素中，使之成為整個App的視覺焦點(diǎn)和色彩關(guān)系；30%的空間使用輔助色，可以平衡過多的主色而造成的視覺疲勞；最后剩下10%的空間為點(diǎn)綴色，可以用在一些不太重要的元素又需要區(qū)分的時候。

6:3:1原則構(gòu)建了一種豐富的色彩層次，讓界面看上去和諧、平衡和不雜亂。

嗶哩嗶哩將粉色運(yùn)用到頁簽、標(biāo)簽欄、按鈕、入口圖標(biāo)等上，藍(lán)色的輔助色用在角標(biāo)、圖標(biāo)上，還有黃色、紅色用在一些小圖標(biāo)、小標(biāo)簽上，主次非常清晰明了。

4. 色不過三

經(jīng)常很多大神在網(wǎng)上說配色不要超過三種色，其實(shí)就是「色不過三」原則，即在一個頁面中不要使用超過3種顏色搭配，這也和上面說的“60-30-10原則”類似，即一個主色、一個輔助色和一個點(diǎn)綴色。

但在實(shí)際UI設(shè)計中，迫于產(chǎn)品的需要可能會使用更多數(shù)量的色彩，但切記不可超過7種色相（注意不是7種色值），每個色相還可以運(yùn)用其飽和度、明度的變化分解出豐富的色彩搭配。

美團(tuán)外賣的首頁20個功能入口大圖標(biāo)的背景用了9種不同的色彩，每種色彩又包含一種低飽和度色彩進(jìn)行彩色漸變，但并沒有顯得雜亂，而是呈現(xiàn)一種年輕時尚的律動感。

這是因?yàn)檫@里雖然使用了9種不同的色彩，但仔細(xì)觀察發(fā)現(xiàn)只使用了3種色彩，其他6種則是從前者鄰近色中提取出來的搭配，再將它們錯落放置，呈現(xiàn)出豐富多彩的色彩搭配，整體和諧統(tǒng)一。

5. 遠(yuǎn)離純黑色和純灰色

黑色就像沒有生命力的深淵，使用戶陷入冷冷的負(fù)面情緒中。遠(yuǎn)離純黑色和純灰色，是因?yàn)樗鼈儾淮嬖谟诂F(xiàn)實(shí)世界里；嘗試在純黑和純灰中加入一些色調(diào)，會讓界面看上去更柔和自然；另外，純黑色還會與白色產(chǎn)生強(qiáng)烈的對比度，看久了會使人疲勞，讓用戶產(chǎn)生焦慮的情緒。

MONO的導(dǎo)航欄并不是深黑色，而是加入了藍(lán)色的低飽和度藍(lán)黑色，它的界面背景也是加入了藍(lán)色的的淺色，這樣就不會讓界面看上去死氣沉沉的。

6. 遵循色彩心理學(xué)

前文我們已經(jīng)了解過各種色彩的心理學(xué)知識，就是為了我們在進(jìn)行App設(shè)計時提供依據(jù)；這些色彩都是源于人類對大自然最原始的感受，藍(lán)色的天空、綠色的草地、黃色的沙漠等等，自然的色彩，對于我們來說是司空見慣的，但其中卻蘊(yùn)含著豐富的美感，并達(dá)到了和諧統(tǒng)一。

網(wǎng)易云音樂使用紅色作為主色，這種熱情奔放的顏色傳遞出一種充滿能量、自信的氣質(zhì)。

7. 良好的可讀性

良好的可讀性在界面設(shè)計中能為用戶提供主次分明、層次清晰的閱讀體驗(yàn)，而一個可讀性差的界面則會成為用戶瀏覽的障礙。

那如何確保界面具有良好的可讀性呢？

這就需要在界面設(shè)計中注意色彩搭配的對比，如在淺色背景上使用深色文字，在深色背景上使用淺色文字，使用高對比的度的亮色展示重要的元素，用低對比度的淺色來體現(xiàn)需要弱化和次要的內(nèi)容；例如蘋果Music的主要功能入口，標(biāo)簽欄圖標(biāo)、按鈕等都是用了高純度的紅色，與其他元素從形成鮮明對比，就連深灰色的輔助文字都有著清晰的可讀性。

8. 從大自然中獲得靈感

配色中盡量使用大眾熟悉的色彩，如自然界中人們常見的色彩等；從大自然中獲取的配色靈感可以使你的設(shè)計更加切合用戶的審美，非常自然；而藝術(shù)是對自然的直接反映，是非常寶貴的資源，值得好好利用。

我們可以搜集各種與自然風(fēng)光相關(guān)的圖片，從中提取色彩運(yùn)用到設(shè)計中，這些幾近完美的搭配呈現(xiàn)出來的和諧美感能瞬間打動人心；天氣應(yīng)用Marline就是一個很好的例子，它的界面背景漸變就參考大自然的變化，隨著不同時間段呈現(xiàn)出清晨、日出、正午、日落、深夜、雨天等漸變色，打開應(yīng)用即喚起了用戶的快樂情緒。

9. 將UX顏色與品牌相匹配

品牌價值在創(chuàng)建調(diào)色板中發(fā)揮關(guān)鍵作用，但是它們不是唯一重要的因素，行業(yè)規(guī)范也是關(guān)鍵；使用與品牌主要競爭產(chǎn)品幾乎相同的配色方案不失一種好方法。

配色在品牌視覺中所發(fā)揮的作用是不言而喻的，但是，色彩本身的內(nèi)涵和情緒特質(zhì)并不是全部；比如一個行業(yè)當(dāng)中，很多產(chǎn)品都使用了藍(lán)色，那么你的產(chǎn)品繼續(xù)使用藍(lán)色，可以讓用戶更快「識別出」你所屬的領(lǐng)域；但是本身也存在讓人混淆的風(fēng)險。如果你想要在視覺上脫穎而出，可以試著使用不同的色彩。

中國區(qū)或美國區(qū)，紅色和藍(lán)色都是最流行的顏色

在進(jìn)行品牌設(shè)計的時候，選擇配色的第一步，始終是了解各種顏色或者色相的氣質(zhì)和情感屬性；然后，在具體設(shè)計的時候，再進(jìn)一步根據(jù)品牌的氣質(zhì)和需求，再在色相的基礎(chǔ)上調(diào)整明暗和飽和度。也可以打破常規(guī)創(chuàng)造出與眾不同的配色方案。

10. 從強(qiáng)調(diào)色入手

想要讓配色方案更加突出，在設(shè)計中添加強(qiáng)調(diào)色可能是最容易入手的地方；舉個例子，一個律師咨詢的App可能會使用傳統(tǒng)的藍(lán)色作為基礎(chǔ)配色，但是，如果能夠加入檸檬綠作為強(qiáng)調(diào)色，會顯得獨(dú)特很多。

11. 冷暖色對比搭配

冷暖對比色是自然平衡的規(guī)律，可以在設(shè)計中大量使用，這樣的配色會使作品非常的出彩，同時不顯單調(diào)，讓用戶感覺舒服平和；而且這種搭配方法基本沒有啥缺點(diǎn)，使用在設(shè)計中，技巧性比較多，對設(shè)計的細(xì)膩感受要求比較高，需要多練習(xí)。

12. 黑白色搭配不過時

黑色是所有中性色中最強(qiáng)的，而白色是最常用的背景顏色。

黑色是一個很好的選擇，有種高端和永恒的感覺，而白色可以帶給用戶自由，寬敞和透氣的感覺；如上所述，黑色和白色也是最大的對比色，如果合理的使用黑色配合白色，會營造出一種優(yōu)雅的氛圍。

12. 強(qiáng)交互色彩

交互色彩在執(zhí)行過程中必須清晰且在界面中保持一致。

號召性用語必須相對于背景具有足夠的對比度，并且相對于其他組件必須具有足夠的視覺權(quán)重，以便用戶可以輕松識別它們；Nike健身應(yīng)用中，「開始」按鈕以高飽和度的檸檬綠作為主色，從背景中脫引而出。

但是，交互色彩并不總是以最具飽和度或最亮為特征，而是通過色調(diào)、形狀、大小或?qū)Ρ榷龋瑥钠聊簧厦摲f而出；因此，交互色彩的有效性將基于用戶識別交互區(qū)域和執(zhí)行任務(wù)的速度來衡量。

同時，次要功能權(quán)重要更輕，并在視覺上更接近信息元素。如上圖Nike Training界面中，“設(shè)置”和“聲音”按鈕只用簡單的白色，減輕對主按鈕的干擾，也避免了頁面中出現(xiàn)多個強(qiáng)交互按鈕。

13. 保證良好的可讀性

可讀性是任何設(shè)計中的重要因素。你的顏色應(yīng)該清晰易讀，尤其是在處理文字時；因此對比度對視覺效果對影響就非常關(guān)鍵，對比度過小，就會使得界面出現(xiàn)灰蒙蒙對效果。

清晰的對比度，一般會采用色彩的兩極，黑紙白字或白紙黑字；而在彩色背景上要讓內(nèi)容清晰可見，就需要搭配純白或高明度的文字，避免灰色文字；也要注意避免彩色背景上搭配互補(bǔ)色和明度接近的文字，因?yàn)檫@兩種搭配會產(chǎn)生一種“震顫效應(yīng)”，發(fā)出光暈的視覺效果。

14. UI中的陰影

沒有完全純黑的陰影，陰影的顏色是會受到物體本身固有色的影響，一定要避免使用純黑色（#000000），使用不太深的灰色，效果會更好；對于有顏色的元素，好的做法是為陰影設(shè)定與元素相同的顏色，并使其更暗一些。

如果是有顏色的元素，并且它處在黑暗的背景下，一般情況下，是不建議使用陰影的；但是如果你一定要用，把陰影透明度調(diào)到小于10%及以下，并且顏色跟隨主色調(diào)來；比如按鈕為綠色，則可以為按鈕設(shè)定一個更深的綠色陰影，并加上小于10%的透明度數(shù)值。

如下圖，左側(cè)的按鈕陰影很自然，右側(cè)的則有一層模糊發(fā)光的效果，顯得不夠漂亮。

知識點(diǎn)：

為什么「超鏈接文字」要用藍(lán)色？

簡單說，因?yàn)樵谧钤缙诘木W(wǎng)站頁面中，藍(lán)色能呈現(xiàn)最高的對比度。

Tim Berners-Lee——web 的主要開創(chuàng)者，被認(rèn)為是最早用藍(lán)色鏈接的人。

一個很早期的 web 瀏覽器 Mosaic，用的是深灰色背景和黑色文字；那時候，能用的非黑色、最深的文字顏色，就是藍(lán)色；所以，讓超鏈接文字突出顯示，同時保證可讀性，就選定了藍(lán)色，此后超鏈接文字都用藍(lán)色的傳統(tǒng)沿用至今。

二、app設(shè)計中的色彩搭配

App的色彩搭配能直觀、快速的反饋到用戶的大腦中形成記憶思維；好的色彩搭配可以加深用戶對產(chǎn)品的印象；明確界面的視覺層次，讓用戶分清主次信息；同時還能給用戶賞心悅目的視覺享受。那么，在UI設(shè)計時該如何進(jìn)行色彩搭配呢？

我們可以從App中都包含了那些色彩開始，通常一個App中包含了主色、輔助色、點(diǎn)綴色、背景色這4類，下面就以微信讀書為例進(jìn)行詳細(xì)的講解（個人角度）。

1. 主色

主色是指在配色中處于主導(dǎo)地位的色彩，給用戶的第一眼印象，通常是產(chǎn)品的品牌色。

在App設(shè)計中，主色一般占有色相色彩的60%的比例；這里指的是60%的界面都使用到的主色比例，而不是使用面積（因?yàn)橥ǔＲ粋€界面中使用面積最大的是背景色）；還有就是背景色多為淺灰色或白色，它們都屬于無色相色彩，因此不涉及到配色過程中。

我們看到微信讀書的第一印象，就可以判斷它的主色為藍(lán)色，這也是它的品牌色；在標(biāo)簽欄、按鈕、圖標(biāo)、注冊登陸全都使用了這種純凈的主色，使界面看上去非常和諧一致。

2. 輔助色

輔助色與主色相輔相成，輔助色的功能是幫助主色建立更完整的形象，使界面豐富精彩起來，避免畫面過于單一。

通常，主色的鄰近色、互補(bǔ)色、分散互補(bǔ)色和三角對立色都可以成為優(yōu)秀的輔助色，但注意輔助色不宜過多，否則就會使界面看上去花哨分散了主題；根據(jù)6:3:1原則，輔助色可以占有色相色彩的30%或更少為宜。

在微信讀書中，綠色、橙色、梅紅、藍(lán)紫色是除了主色以外使用最多的顏色，它們都是輔助色，主要用于功能圖標(biāo)和欄目分類上。

雖然輔助色看起來有點(diǎn)多，但其實(shí)都是從主色的鄰近色和對比色（及其鄰近色）中提取出來的搭配，而且只用在頁面中很少的地方，這種搭配技巧既可以豐富色彩的搭配，傳遞出年輕活躍的產(chǎn)品氣質(zhì)，又保證了整體搭配的和諧統(tǒng)一。

3. 點(diǎn)綴色

點(diǎn)綴色是除了主色和輔助色以外的另一種色彩，通常體現(xiàn)在細(xì)節(jié)上。

其作用是，當(dāng)頁面中主色和輔助色不能滿足關(guān)鍵信息的提示時，就需要點(diǎn)綴色來吸引用戶眼球，還有就是利用點(diǎn)綴色來平衡畫面的冷暖色調(diào)。

點(diǎn)綴色通常都是分散的，使用面積小，顏色非常顯眼，能與主色形成強(qiáng)烈的對比；一般點(diǎn)綴色是主色的互補(bǔ)色。在微信讀書中，使用了香檳金、梅紅和紅色作為點(diǎn)綴色；香檳金用在文章分享按鈕上，梅紅色用在點(diǎn)贊圖標(biāo)上，強(qiáng)調(diào)其特殊性，紅色用在通知及退出登錄提醒上，用于警示。

來康康這三種點(diǎn)綴色與主色之間存在什么樣的關(guān)系，在色相（H）上，3種點(diǎn)綴色為鄰近色，與主色為互補(bǔ)色；在明度（B）上，3種點(diǎn)綴色均為高明度色彩，起到強(qiáng)提醒的作用。這種強(qiáng)對比的互補(bǔ)色的點(diǎn)綴色可以快速引起用戶注意力。

4. 背景色

背景色就比較好理解了，通常為了襯托內(nèi)容，大多數(shù)App都是用淺灰色作為背景色，以白色作為背景色的對比色，來區(qū)分視覺層次；建議是可以根據(jù)前景色來提取背景色，將其調(diào)亮或變暗，這樣可以讓界面色調(diào)更加統(tǒng)一。

在微信讀書中背景色是偏藍(lán)色調(diào)的淺灰色，而不是純灰色，背景對比色是在白色里加入了藍(lán)色色相，而不是純白色，整體對比較柔和，給人清爽通透的感覺。

支付寶 Alipay Design 團(tuán)隊(duì)提出過一個配色原則：

以同色系配色為主導(dǎo)，多色搭配為輔。

同色系為統(tǒng)一的色相，使用中可以加深品牌色的感知，可以讓界面更有層次，同時可以讓界面保持色彩上的一致性；由于業(yè)務(wù)的多樣化，我們需要多色搭配為輔；多色的輔助顏色，也可稱之為功能色，可設(shè)定不同的任務(wù)屬性和情感表達(dá)；再搭配中性色黑白灰，賦予更多的變化和層次。

兩種配色通過主次、使用比例，可靈活運(yùn)用在業(yè)務(wù)的各個場景中，具有非常好的延展性。

三、迷人的漸變色

不同于單一色彩，漸變色不屬于任何色彩，它營造出千變?nèi)f化的視覺效果，卻又不會增加視覺負(fù)擔(dān)。

相較于單一的色彩，漸變色的復(fù)合性質(zhì)讓它在界面設(shè)計中具有更強(qiáng)的視覺沖擊力，有助于快速搶占視線；如今，這種獨(dú)一無二的色彩正逐漸成為一種潮流，究其原因是目前大量的扁平風(fēng)格造成UI設(shè)計的嚴(yán)重同質(zhì)化，人們需要追求更加個性的視覺語言來滿足日益增長的設(shè)計需求。

下面我們來了解幾種常見的漸變的使用技巧：

1. 色相、飽和度、明度的漸變

色相（H）漸變是指由一種色彩向另一種色彩的過渡，這種漸變因跨度大產(chǎn)生的視覺效果非常明顯；飽和度（S）漸變是指同一種色彩不同純度的過度，其產(chǎn)生的視覺效果比較和諧單調(diào)；明度（B）漸變是同一種色彩不同明暗的過度，這種漸變的視覺效果給人一種沉靜的氛圍。

2. 漸變的表現(xiàn)形式

在界面設(shè)計中經(jīng)常看多各種各樣的漸變表現(xiàn)方式，使用最多的有以下幾種：

水平漸變：

這個很好理解，是指角度為0的線性漸變，是最流行的漸變形式；界面設(shè)計中多用在導(dǎo)航欄、進(jìn)度條、按鈕等元素上，能讓畫面變得精致而通透；例如京東使用橙紅漸變的設(shè)計語言貫穿整個App，從應(yīng)用圖標(biāo)到導(dǎo)航欄、按鈕、標(biāo)簽，全部都運(yùn)用了這種由紅色到橙色的過渡；仔細(xì)觀察發(fā)現(xiàn)在很多小標(biāo)簽上都使用了水平漸變設(shè)計手法，使產(chǎn)品看起來更年輕化。

知識點(diǎn)：

在水平漸變中，通常把輕（亮）的色彩放在左邊，重（暗）的色彩放在右邊，這樣由左向右的方向感剛好與人的瀏覽習(xí)慣保持一致；而反過來就會與人的瀏覽視線相悖，應(yīng)避免。

垂直漸變：

即角度為90°的線性漸變，它通常被用在正方形或豎條形的元素上，如注冊登陸頁，個人中心頭部等；垂直漸變中上下兩種色彩的深淺變化會產(chǎn)生截然不同的視覺效果，上淺下深會讓給人一種凸起的立體感，而上深下淺會給人一種凹陷下去的空間感。

例如「紀(jì)念碑谷」的背景是采用了單色相和多色相的垂直漸變作為游戲背景，在讓整個畫面豐富的同時又不會太搶奪主體的色彩，使畫面顯得清新透氣而不沉悶。

角度漸變：

角度漸變通常有對角漸變和多角度漸變；有角度的漸變相比水平和垂直漸變，它的使用場景更廣，如圖標(biāo)背板、啟動頁、注冊登錄頁、標(biāo)簽等；想讓界面更加絢麗、動感和迷人，這時候我們可以考慮多組漸變搭配使用。

色塊漸變：

漸變的顏色不只可以運(yùn)用在一個色塊上，還可以運(yùn)用在一組色塊上；設(shè)計師運(yùn)用一組近似性色彩，將每個菜單項(xiàng)清晰區(qū)分開，讓界面平衡在一個頻率上，這樣的畫面更有節(jié)奏感和舒適性。

不同于平滑的漸變，色塊漸變不再是單純的背景裝飾，在某些地方還具有一定的功能性，比如使用不同的色塊來分割的列表樣式；Clear Todos是一款日常任務(wù)清單的APP，它拋棄了傳統(tǒng)的列表樣式，使用了一系列色塊來作為列表的分割，非常漂亮和精致。

徑向漸變：

是指色彩以圓心向四周擴(kuò)散的漸變，是一種模擬光源照射的視覺效果，因此光源是整個畫面的視覺焦點(diǎn)，將關(guān)鍵元素放在光源中心就會成為主角；通常被運(yùn)用到大背景上，如啟動頁、引導(dǎo)頁等。

Solar天氣應(yīng)用的背景就是徑向漸變，光源擴(kuò)散的效果營造出一種夢幻般的美感。

3. 和諧的漸變色

漸變色是由一個色彩走向另一個色彩的過程，有著迷人的視覺效果；如果你仔細(xì)觀察兩種色彩的過渡關(guān)系，就會發(fā)現(xiàn)不是每次都會得到滿意的效果，例如紅綠漸變就很糟糕，因?yàn)樗鼈儍烧呤腔閷α⒌纳剩侨绻尤朦S色的過渡色就會好很多；原因是當(dāng)兩種色彩之間超過90度就會導(dǎo)致其漸變色看上去不太和諧自然，只有控制在90度之內(nèi)才會產(chǎn)生美妙的變化。

如何改善超過90度的兩種色相的漸變呢？這時候可以在兩色之間加入過渡色進(jìn)行調(diào)和。例如當(dāng)從黃色到藍(lán)色漸變時，就可以加入紫色作為過渡才能呈現(xiàn)完美的視覺效果。

知識點(diǎn)：

在搭配漸變色時，盡量只改變其色相（H）、飽和度（S）、明度（B）中的一項(xiàng)，這樣才能創(chuàng)造出和諧的漸變色方案

轉(zhuǎn)載：人人都是產(chǎn)品經(jīng)理

蘭亭妙微（藍(lán)藍(lán)設(shè)計）m.wtxcl.cn 是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗(yàn)設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。

在日常的數(shù)字產(chǎn)品設(shè)計中，彈窗雖小，卻往往承擔(dān)著轉(zhuǎn)化用戶、傳遞信息、引導(dǎo)行為的關(guān)鍵角色。一個恰到好處的彈窗，能讓用戶體驗(yàn)如絲般順滑；而一個設(shè)計粗糙的彈窗，則可能成為用戶流失的導(dǎo)火索。

基于上百個真實(shí)的實(shí)戰(zhàn)案例深度拆解，蘭亭妙微ui設(shè)計公司總結(jié)出 12 種超實(shí)用的彈窗設(shè)計切入點(diǎn)。每一種都附有真實(shí)案例與核心優(yōu)點(diǎn)，既好上手又具備延展性。無論你是想介紹產(chǎn)品功能、推送運(yùn)營活動，還是引導(dǎo)用戶互動，都能在這里找到適配方案，助你快速擺脫靈感瓶頸，讓小小彈窗既好看又好用。

01 卡片疊加式設(shè)計

02 相冊式產(chǎn)品卡片設(shè)計

03 中間圖標(biāo) + 方形卡片設(shè)計

04 IP 形象 + 方形卡片設(shè)計

05 擬人化表情圖標(biāo) + 異形卡片設(shè)計

06 圖標(biāo) + 空氣彈框設(shè)計

07 簡約插畫組合 + 方形彈框設(shè)計

08 信封式彈框設(shè)計

09 IP 配標(biāo)題文字 + 空氣彈框設(shè)計

10 無定式彈框設(shè)計

11 底部彈出式插畫彈窗

12 底部彈出式空氣插畫彈窗

我們平常會使用很多APP，久而久之我們會發(fā)現(xiàn)一些APP的設(shè)計非常的相似；一個有新意、精致的APP界面可以讓用戶產(chǎn)生很深的影響，對產(chǎn)品的形象也有一定的幫助；本文由蘭亭妙微UI設(shè)計公司分享了關(guān)于如何提升UI設(shè)計的高級感的方法，我們一起來看一下。

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

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

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

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

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

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

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

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

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

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

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

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

灰色文字在無彩/彩色背景下要分開處理：

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

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

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

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

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

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

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

三、干凈的陰影

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

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

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

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

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

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

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

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

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

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

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

五、Tab的設(shè)計感

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

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

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

我們還可以從品牌基因中獲取靈感，品牌作為用戶熟知的形象是個絕佳的來源。

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

六、無框設(shè)計 去繁從簡

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

我們可以通過以下幾個方法來劃分元素的視覺層次，讓畫面變得干凈，整齊：

1）使用陰影

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

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

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

3）增加額外的留白

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

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

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

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

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

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

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

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

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

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

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

十、圖片中尋找色彩

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

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

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

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

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

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

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

 轉(zhuǎn)載：人人都是產(chǎn)品經(jīng)理

蘭亭妙微（藍(lán)藍(lán)設(shè)計）m.wtxcl.cn 是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗(yàn)設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。

讓用戶在使用產(chǎn)品時不產(chǎn)生混淆、可快速獲取所需信息，是產(chǎn)品設(shè)計時應(yīng)當(dāng)考慮的重要層面，而這需要團(tuán)隊(duì)在設(shè)計時預(yù)先做好方案，去掉無關(guān)事物，清晰地呈現(xiàn)信息，提升產(chǎn)品的易用性與用戶體驗(yàn)。蘭亭妙微 UI 設(shè)計公司始終以 “精簡信息、提升信噪比” 為設(shè)計核心，本篇文章里，作者結(jié)合實(shí)戰(zhàn)經(jīng)驗(yàn)，介紹了提高信噪比的設(shè)計技巧，一起來看一下。

一、選用通用認(rèn)可圖標(biāo)，規(guī)避用戶認(rèn)知混淆

二、巧用親密性原則，明確元素關(guān)聯(lián)關(guān)系

三、4px 基線網(wǎng)格 + 8px 網(wǎng)格，打造和諧垂直視覺節(jié)奏

四、降低標(biāo)題行高，提升視覺緊湊度與閱讀體驗(yàn)

五、色輪類似配色，快速打造和諧配色方案

六、最大化設(shè)計信噪比，讓核心信息更突出