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

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

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

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

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

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

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

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

知識(shí)點(diǎn)：

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

2. 色調(diào)一致

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

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

3. 60-30-10原則

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

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

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

4. 色不過(guò)三

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

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

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

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

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

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

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

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

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

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

7. 良好的可讀性

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

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

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

8. 從大自然中獲得靈感

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

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

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

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

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

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

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

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

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

11. 冷暖色對(duì)比搭配

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

12. 黑白色搭配不過(guò)時(shí)

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

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

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

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

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

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

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

13. 保證良好的可讀性

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

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

14. UI中的陰影

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

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

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

知識(shí)點(diǎn)：

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

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

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

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

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

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

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

1. 主色

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

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

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

2. 輔助色

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

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

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

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

3. 點(diǎn)綴色

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

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

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

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

4. 背景色

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

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

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

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

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

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

三、迷人的漸變色

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

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

下面我們來(lái)了解幾種常見(jiàn)的漸變的使用技巧：

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

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

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

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

水平漸變：

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

知識(shí)點(diǎn)：

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

垂直漸變：

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

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

角度漸變：

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

色塊漸變：

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

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

徑向漸變：

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

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

3. 和諧的漸變色

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

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

知識(shí)點(diǎn)：

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

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

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

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

一個(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)營(yíng)造對(duì)比；單純使用字體大小對(duì)比，所營(yíng)造的對(duì)比并不夠，嘗試結(jié)合色彩和字重來(lái)營(yíng)造更好的對(duì)比效果。

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

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

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

類似的，在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ò)選擇類似深灰色（#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)手法，它可以增加元素的深度，使其從背景中脫穎而出，引起用戶的注意力，同時(shí)也能增強(qiáng)畫(huà)面的視覺(jué)層次感。

相比于采用大范圍的擴(kuò)散模糊陰影，使用微妙的垂直偏移陰影效果更明顯，更自然，它模擬了最常見(jià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)。

我們能否在追求大小一致，圓角一致，線寬一致和配色一致的同時(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)有趣，又增加了用戶的好感，給人留下深刻的印象。

3D立體圖標(biāo)設(shè)計(jì)是近幾年來(lái)的流行趨勢(shì)，看上去十分精致、華麗，但是看久了會(huì)讓人產(chǎn)生輕微的視覺(jué)疲勞，同時(shí)因其復(fù)雜的結(jié)構(gòu)會(huì)增加用戶的認(rèn)知成本，一般在外賣美食類應(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)是一段音頻波線，再配合文字的大小對(duì)比，一個(gè)富有設(shè)計(jì)感又符合產(chǎn)品特征的Tabs就被創(chuàng)造出來(lái)了。

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

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

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

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

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

1）使用陰影

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

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

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

3）增加額外的留白

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

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

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

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

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

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

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

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

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

大多數(shù)App都支持三方登陸，他可以減輕用戶注冊(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ì)，能帶給用戶如沐春風(fēng)的視覺(jué)享受，它非常重要。我們經(jīng)常看到文字疊加在圖片背景上的設(shè)計(jì)樣式；為了減少?gòu)?fù)雜圖片背景對(duì)文字的干擾，通常的做法是疊加半透明度的黑色蒙版，讓白色文字清晰可見(jiàn)，但這不是最優(yōu)的辦法。

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

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

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

在App設(shè)計(jì)中，一張漂亮的圖片從收集到上線，需要經(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ì)通常很依賴視覺(jué)元素，很強(qiáng)的視覺(jué)元素正是卡片式設(shè)計(jì)的一種優(yōu)勢(shì)，也是提升設(shè)計(jì)品質(zhì)感的良方。

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

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

UI走查中95%的問(wèn)題源于“間距不準(zhǔn)”，而肉眼難以量化，導(dǎo)致溝通低效。DevTools（瀏覽器開(kāi)發(fā)者工具）作為設(shè)計(jì)師與前端的“共同尺子”，能將頁(yè)面視覺(jué)問(wèn)題轉(zhuǎn)化為可測(cè)量、可驗(yàn)證的技術(shù)事實(shí)。本文從設(shè)計(jì)師視角系統(tǒng)講解如何用DevTools高效走查，希望可以幫到大家。

如果你經(jīng)常參與 UI 走查，應(yīng)該會(huì)有類似的體驗(yàn)：設(shè)計(jì)稿里一切工整、呼吸感剛剛好，到了線上頁(yè)面，總有種說(shuō)不出的別扭——按鈕看起來(lái)有點(diǎn)胖，列表擠成一團(tuán)，彈層莫名“頂頭”——你明明感覺(jué)哪里不對(duì)，卻很難說(shuō)清楚問(wèn)題到底在哪兒。

有一組數(shù)據(jù)挺扎心：在一次前端對(duì)UI 走查問(wèn)題的統(tǒng)計(jì)中，“間距”占到了 95%、字體相關(guān)只有 3%、邊框背景色等合計(jì)只有 2%。

換句話說(shuō)，大部分“看著不舒服”，其實(shí)都跟間距有關(guān)系。但是間距很難通過(guò)肉眼直接量化，導(dǎo)致設(shè)計(jì)師走查費(fèi)時(shí)、與前端溝通效率低，前端修改有時(shí)也是“跟著感覺(jué)來(lái)”、難以達(dá)到最優(yōu)效果。

這也是為什么，我把 DevTools（開(kāi)發(fā)者工具）當(dāng)成 UI 走查的標(biāo)配工具。

這篇文章，就想從一個(gè)設(shè)計(jì)師的視角，講講什么是 DevTools 、如何用 DevTools 做高效的 UI 走查，把實(shí)踐中總結(jié)出的那一整套方法，匯成一條實(shí)際好操作的路徑。

本文不涉及復(fù)雜的代碼和技術(shù)概念，放心享用。

01 DevTools是什么

DevTools（Developer Tools，開(kāi)發(fā)者工具）是現(xiàn)代瀏覽器自帶的一套網(wǎng)頁(yè)檢查與調(diào)試工具，用于查看網(wǎng)頁(yè)的結(jié)構(gòu)、樣式、腳本、網(wǎng)絡(luò)請(qǐng)求和性能等信息。它能夠?qū)崟r(shí)展示頁(yè)面背后的代碼和布局，并允許用戶在本地修改樣式、觀察變化。

DevTools 不是獨(dú)立軟件，而是瀏覽器內(nèi)置功能。目前主流瀏覽器都提供了自己的 DevTools，包括Chrome、Safari、Firefox、Edge等。

DevTools 不是只給前端用的“黑客面板”，而是設(shè)計(jì)師與工程師之間的一把“共同的尺子”，它能讓一個(gè)頁(yè)面的“表面外觀”變成“透明結(jié)構(gòu)”：你可以在上面看到每一個(gè)元素的真實(shí)尺寸、間距、顏色和字體，可以在幾秒鐘內(nèi)驗(yàn)證“到底是誰(shuí)沒(méi)對(duì)齊”，也可以通過(guò)臨時(shí)修改樣式，把你腦子里的改善方案可視化地呈現(xiàn)出來(lái)。

換句話說(shuō)，它提供了一種把 UI 視覺(jué)現(xiàn)象與技術(shù)實(shí)現(xiàn)邏輯直接對(duì)應(yīng)起來(lái)的能力。

02 開(kāi)始使用

開(kāi)始之前，第一步永遠(yuǎn)是把 DevTools 打開(kāi)。最常用的方式是：

• 鍵盤黨可以用 Command + Option + I或 F12
• 鼠標(biāo)黨可以直接在頁(yè)面上右鍵 →「檢查（Inspect）」

很多設(shè)計(jì)師第一次看到 Elements 面板時(shí)，會(huì)被大片的 <div> 嚇到。

其實(shí)可以把它當(dāng)作“頁(yè)面骨架實(shí)時(shí)展開(kāi)圖”：每一層縮進(jìn)就是嵌套關(guān)系，每個(gè)標(biāo)簽對(duì)應(yīng)頁(yè)面上的一個(gè)區(qū)域。

我們不需要懂它，只需要關(guān)注與UI走查密切相關(guān)的三個(gè)面板：樣式Styles（樣式規(guī)則）、計(jì)算樣式Computed（最終計(jì)算值）、布局Layout（布局體系）。

如果你對(duì)英文屬性名不夠熟，可以在右上角齒輪按鈕里，把語(yǔ)言切換到中文，這能降低學(xué)習(xí)成本。

03 從元素出發(fā)

要做 UI 走查，第一件事就是精準(zhǔn)選中目標(biāo)元素，常見(jiàn)方式包括：

方法一：用“選取器”在頁(yè)面上點(diǎn)選

點(diǎn)擊 DevTools 左上角的小箭頭

在頁(yè)面上移動(dòng)鼠標(biāo)，高亮所選區(qū)域，點(diǎn)擊可鎖定元素

適合復(fù)雜、多層嵌套的界面。

方法二：右鍵檢查

hover到具體元素，右鍵 → 檢查（Inspect）適合按鈕、標(biāo)題、圖標(biāo)等肉眼識(shí)別明顯的元素

04 把間距「量」出來(lái)

既然 UI 走查里 95% 的問(wèn)題都是”間距看著不對(duì)”，學(xué)會(huì)量間距是最劃算的一件事。

有兩個(gè)方法：

方法一：看 Box Model

要理解間距，首先要認(rèn)識(shí) Box Model（盒模型）——這是網(wǎng)頁(yè)布局的基礎(chǔ)概念，它將每個(gè)元素看作一個(gè)”盒子”，由內(nèi)到外分為四層：content（內(nèi)容區(qū)）、padding（內(nèi)邊距）、border（邊框）、margin（外邊距）。

DevTools 能將這個(gè)模型可視化展示，讓你清楚看到每一層的數(shù)值，從而與設(shè)計(jì)稿進(jìn)行比對(duì)，精準(zhǔn)定位間距問(wèn)題的根源。

方法二：hover 實(shí)時(shí)高亮

在頁(yè)面或者元素Elements 面板中移動(dòng)鼠標(biāo)，頁(yè)面對(duì)應(yīng)區(qū)域會(huì)出現(xiàn)不同顏色的高亮框：橙色：margin、綠色：padding。

適合快速巡檢整體布局。

05 查看元素樣式的雙視角

至于顏色、字體、行高等樣式，可以從樣式Style或者計(jì)算樣式Computed查看。

視角一：樣式Styles（全部規(guī)則）

Style面板顯示了所有作用于當(dāng)前元素的樣式規(guī)則，包括顏色、字號(hào)、字重、字體、邊框、陰影、圓角。

如果你發(fā)現(xiàn)同一個(gè)屬性，比如font-size，出現(xiàn)了很多次，有的還被劃上了刪除線。也別奇怪，這代表有多個(gè)規(guī)則作用于它。

怎么找到哪個(gè)是真實(shí)的值呢？有兩個(gè)方法：

一是Styles 面板里的規(guī)則，是按從上到下的優(yōu)先級(jí)排列：越靠上的規(guī)則優(yōu)先級(jí)越高。我們只需要從上往下找即可。被覆蓋的會(huì)被劃上刪除線，不再生效，直接忽略就行。

視角二：Computed（最終值）

二是計(jì)算樣式Computed面板。

它顯示了元素最終的樣式，更直觀，更適合回答：最終字號(hào)是多少？行高值是多少？是否有透明度？寬高是多少？

并且可以勾選“組合”，將這些屬性分組顯示，分為L(zhǎng)ayout、Text、Appearance和Other。更易查找。

06 實(shí)時(shí)修改樣式

DevTools 最強(qiáng)大的地方在于：你不僅能看到樣式，還能立即修改它，實(shí)時(shí)預(yù)覽效果——這讓走查從”發(fā)現(xiàn)問(wèn)題”變成了”提出方案”。

修改方式一：直接點(diǎn)擊數(shù)值

在 樣式Styles面板中，找到你想修改的屬性（比如 font-size: 14px），直接點(diǎn)擊數(shù)值部分，就能進(jìn)入編輯狀態(tài)。

步驟：點(diǎn)擊數(shù)值（如 14px） → 輸入新值（如 16px） → 按 Enter 確認(rèn)，頁(yè)面立即生效

適合快速微調(diào)單個(gè)屬性。

修改方式二：上下鍵微調(diào)

選中數(shù)值后，無(wú)需手動(dòng)輸入，可以用鍵盤上下鍵進(jìn)行微調(diào)：

• ↑ / ↓：每次增減
• 1Shift + ↑ / ↓：每次增減 10
• Option + ↑ / ↓（Mac）或 Alt + ↑ / ↓（Windows）：每次增減 0.1

適合精細(xì)調(diào)整間距、透明度等需要”試著來(lái)”的場(chǎng)景。

修改方式三：添加新屬性

如果某個(gè)屬性根本不存在（比如你想加個(gè) border-radius），可以在 Styles 面板的任意規(guī)則塊內(nèi)：

點(diǎn)擊空白處 → 輸入屬性名（如 border-radius）→ 輸入值（如 8px） → 按 Enter 確認(rèn)

頁(yè)面立即應(yīng)用新樣式。

修改方式四：臨時(shí)禁用某條樣式

有時(shí)你不確定是哪條規(guī)則導(dǎo)致了問(wèn)題，可以用”復(fù)選框”快速開(kāi)關(guān)樣式：

在 Styles 面板中，每條樣式左側(cè)都有一個(gè)復(fù)選框，取消勾選即可臨時(shí)禁用該規(guī)則，觀察頁(yè)面變化。

適合排查”到底是哪條規(guī)則在搗亂”。

修改方式五：復(fù)制修改后的樣式值

當(dāng)你調(diào)整出滿意的效果后，可以：

右鍵點(diǎn)擊修改后的屬性 → 選擇”復(fù)制” → “復(fù)制聲明”或”復(fù)制規(guī)則” → 粘貼到文檔或發(fā)給前端

這樣你就能把”視覺(jué)方案”轉(zhuǎn)化為”技術(shù)語(yǔ)言”，大幅提升溝通效率。

注意：所有修改都是臨時(shí)的，刷新頁(yè)面后會(huì)恢復(fù)原樣。DevTools 不會(huì)改動(dòng)源代碼，只是讓你在本地預(yù)覽效果。

07 狀態(tài)模擬

許多 UI 缺陷只在 hover、active、focus 狀態(tài)下暴露，例如：hover 時(shí)顏色未變化、點(diǎn)擊態(tài)幾乎無(wú)反饋、表單 focus 出現(xiàn)丑陋藍(lán)框。

在 Styles 面板頂部點(diǎn)擊 :hov，勾選對(duì)應(yīng)狀態(tài)即可模擬：hover、active、focus、visited……無(wú)需鼠標(biāo)繁瑣操作。

08 布局骨架

當(dāng)你發(fā)現(xiàn)”每個(gè)元素單獨(dú)看都沒(méi)問(wèn)題，但整體就是不順眼”時(shí)，問(wèn)題往往出在布局層級(jí)。

這時(shí)候，DevTools 的布局 Layout 面板就能派上用場(chǎng)——它能把頁(yè)面背后隱藏的布局邏輯全部”照亮”。

點(diǎn)擊右側(cè)面板中的布局 Layout，會(huì)顯示所有網(wǎng)格布局（Grid）和彈性盒子布局（Flexbox）。

Grid 網(wǎng)格布局視角

如果點(diǎn)擊網(wǎng)格名稱（或勾選復(fù)選框，或直接在元素Style面板中點(diǎn)擊對(duì)應(yīng)的 Grid 標(biāo)簽，三者是聯(lián)動(dòng)的），頁(yè)面中會(huì)直接高亮顯示網(wǎng)格區(qū)域，你可以看到：網(wǎng)格線與區(qū)域劃分、網(wǎng)格線行號(hào)與列號(hào)、軌跡大小、區(qū)域名稱、延長(zhǎng)網(wǎng)格線（用于檢查模塊對(duì)齊效果）。

這對(duì)于排查”為什么這個(gè)卡片沒(méi)對(duì)齊”特別有用。

Flexbox 彈性盒子布局視角

如果點(diǎn)擊彈性盒子名稱（或勾選，或直接在元素中點(diǎn)擊對(duì)應(yīng)的 Flex 標(biāo)簽，三者是聯(lián)動(dòng)的），頁(yè)面中會(huì)高亮顯示色塊、框線，你可以看到：主軸方向（橫向還是縱向）、子項(xiàng)的分布方式（居中、兩端對(duì)齊等）、容器與子項(xiàng)的邊界、哪個(gè)元素占用了過(guò)多空間。

你還可以：點(diǎn)擊色塊，修改框線顏色、點(diǎn)擊定位圖標(biāo)，直接跳轉(zhuǎn)到 樣式 Styles 中的對(duì)應(yīng)代碼。

這對(duì)于排查”為什么按鈕擠在一起”或”為什么間距不均勻”非常有幫助。

09 響應(yīng)式走查

DevTools 的“設(shè)備模擬”工具，讓響應(yīng)式問(wèn)題無(wú)處可藏。

觀察：導(dǎo)航是否撐開(kāi)、文字是否過(guò)密、元素是否溢出、彈窗是否遮擋、按鈕是否掉到底部……

并支持：切換設(shè)備型號(hào)、改變屏幕寬度、翻轉(zhuǎn)屏幕方向。

10 走得更遠(yuǎn)一點(diǎn)

當(dāng)你熟練掌握了 DevTools 的基礎(chǔ)操作，你會(huì)發(fā)現(xiàn)自己開(kāi)始好奇更深的問(wèn)題：這些元素是怎么組織的？移動(dòng)端怎么走查?能不能讓 AI 幫我自動(dòng)找問(wèn)題？

這些問(wèn)題沒(méi)有標(biāo)準(zhǔn)答案，但值得探索。

移動(dòng)端走查：H5 能用 DevTools，原生要用專門工具

移動(dòng)端頁(yè)面分兩種：H5 網(wǎng)頁(yè)和原生 UI。它們的走查方式完全不同。

如果是 App 內(nèi)的 H5 頁(yè)面（WebView），你可以通過(guò)真機(jī)調(diào)試，直接用 DevTools 查看。如果是原生 UI（比如 iOS 的 UIKit、SwiftUI），DevTools 就無(wú)能為力了，需要用專門的工具，比如 Lookin。

怎么判斷一個(gè)頁(yè)面是不是原生？

有幾個(gè)簡(jiǎn)單的特征：文本無(wú)法長(zhǎng)按選中、滑動(dòng)非常順滑、動(dòng)畫(huà)絲滑、左右滑返回手勢(shì)明顯（iOS）。如果”像網(wǎng)頁(yè)但又不像網(wǎng)頁(yè)”，那可能是混合頁(yè)面——Native 外框 + 內(nèi)嵌 H5。

AI 自動(dòng)化走查：人機(jī)協(xié)作，而非完全替代

有團(tuán)隊(duì)已經(jīng)在嘗試用 AI 做自動(dòng)化 UI 走查，比如讓 AI 批量識(shí)別間距、顏色、字號(hào)等問(wèn)題。

但目前來(lái)看，AI 更適合做”初篩”——它能快速找出明顯的偏差，但最終的判斷和決策，還是需要人來(lái)做。因?yàn)楹芏嘣O(shè)計(jì)問(wèn)題不是”對(duì)錯(cuò)”，而是”合不合適”。

未來(lái)，走查可能會(huì)變成這樣：AI 先跑一遍，標(biāo)出疑似問(wèn)題；設(shè)計(jì)師再用 DevTools 逐一確認(rèn)，給出具體的修改建議。這樣既提高了效率，又保留了人的判斷力。

11 寫在最后

當(dāng)你習(xí)慣了這種基于 DevTools 的走查方式，你會(huì)發(fā)現(xiàn)自己跟以前有一處很大的不同：過(guò)去你走查，是在“憑感覺(jué)找問(wèn)題”，現(xiàn)在你走查，是在“用證據(jù)找原因”。

DevTools 不是讓你變成前端工程師，而是讓你能夠理解界面背后的結(jié)構(gòu)、邏輯和約束，并提供既符合體驗(yàn)、又便于實(shí)現(xiàn)的解決方案。

最終，UI 走查也會(huì)從一場(chǎng)“找誰(shuí)背鍋”的會(huì)，變成一場(chǎng)“讓產(chǎn)品更好”的會(huì)——設(shè)計(jì)師和工程師坐在同一個(gè) DevTools 界面前，說(shuō)著同一種語(yǔ)言，指著同一份證據(jù)。而這，正是一個(gè)成熟團(tuán)隊(duì)?wèi)?yīng)該擁有的樣子。

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

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

在科幻作品的宏大敘事中，用戶界面（UI）不僅是信息的載體，更是世界觀的具象化表達(dá)。它是未來(lái)科技的視覺(jué)語(yǔ)言，是連接人類與未知領(lǐng)域的橋梁，其設(shè)計(jì)美學(xué)深刻影響著我們對(duì)未來(lái)的想象。蘭亭妙微的設(shè)計(jì)師最近在做一個(gè)vr眼鏡的項(xiàng)目，所以要找一些相關(guān)的資料和文章，并寫出來(lái)和大家分享。