沒有難看的顏色，只有難看的搭配每一種顏色有其獨(dú)特的作用，令人產(chǎn)生不同的情感。合理使用色彩可以取得宜人的效果。

一、色彩的基本認(rèn)知（本模塊設(shè)計(jì)小白可以了解一下，有基礎(chǔ)的略過）        1、色彩由色相、飽和度、明度三要素構(gòu)成

 色相(Hue)

即各類色彩的相貌稱謂，如大紅、普蘭、檸檬黃等。色相是色彩的首要特征，是區(qū)別各種不同色彩的最準(zhǔn)確的的標(biāo)準(zhǔn)。事實(shí)上任何黑白灰以外的顏色都有色相的屬性，而色相也是由原色、間色和復(fù)色來構(gòu)成。

飽和度(Saturation)

飽和度是指色彩的鮮艷程度，也稱色彩的純度。飽和度取決于該色中含色成分和消色成分(灰色)的比例。含色成分越大，飽和度越高；消色成分越大，飽和度越低。

明度(Brightness）

明度是眼睛對(duì)光源體和物體表面的明暗程度的感覺，主要有由光線強(qiáng)弱決定的一種視覺經(jīng)驗(yàn)。明度不僅取決于物體照明程度，而且取決于物體表現(xiàn)的反射系數(shù)。

2、配色的基本認(rèn)識(shí)

基本色環(huán)(Color Wheel）

按照光譜順序?yàn)椋杭t、橙紅、黃橙、黃、黃綠、綠、綠藍(lán)、藍(lán)、藍(lán)紫、紫、紫紅、紅和紫中間在加個(gè)中間色。在色相環(huán)的圓圈里，各種色調(diào)按照不同角度排列，則十二色相環(huán)每一色相距30度，24色相環(huán)每一色相距15度。

同一色

色相環(huán)中的任意色因明度變化而呈現(xiàn)的色彩。顏色混合是通過在色彩中加入黑、白、灰形成的。統(tǒng)一色調(diào)，色彩的純度和明度是具有共同性，明度按照色相略有變化。

同色系配色是指主色和輔色都在同一色相上，這種配色方法往往會(huì)給人頁面很一致化的感受

同類色

同類色又稱類似色。色相環(huán)原色起45度以內(nèi)，含有較多共同的色彩元素的色彩，同類色指色相性質(zhì)相同，但色度有深淺之分。

相鄰色

色相環(huán)中相距90度，或者相隔五六個(gè)數(shù)位的兩色，為鄰近色關(guān)系，屬中對(duì)比效果的色組。色相彼此近似，冷暖性質(zhì)一致，色調(diào)統(tǒng)一和諧，感情特性一致。

相鄰色不同于同一色的枯燥乏味。稍微跳動(dòng)的的色彩也一樣保持著設(shè)計(jì)的穩(wěn)定性，還能起到強(qiáng)調(diào)單獨(dú)作品的作用

對(duì)比色

指色相環(huán)上色相對(duì)比較大、純度較高的任意兩色。對(duì)比色之間無過多的共性，對(duì)比效果強(qiáng)烈。當(dāng)對(duì)比的兩色具有相同的彩度和明度時(shí)，對(duì)比效果越明顯；兩色越接近補(bǔ)色，對(duì)比效果越強(qiáng)烈。

主導(dǎo)的對(duì)比配色需要精準(zhǔn)掌控色彩搭配和面積，其中主導(dǎo)色會(huì)帶動(dòng)頁面的氣氛，產(chǎn)生激烈的心理感受。

補(bǔ)色

補(bǔ)色又稱互補(bǔ)色、余色，亦稱強(qiáng)度比色，就是兩種顏色(等量)混合后呈現(xiàn)黑灰色，那么這兩種顏色以定位互補(bǔ)色。色環(huán)的任何直徑兩端相對(duì)之色都稱為互補(bǔ)色

補(bǔ)色對(duì)比由于色彩過于沖撞，很少用戶傳統(tǒng)網(wǎng)頁界面，一般用于活動(dòng) banner，起到吸引用戶眼球的作用。

二、HSB色彩模型

1、什么是HSB色彩模型

如果你寫過HTML和CSS，那么肯定熟悉RGB，三個(gè)字母分別表示：R(紅)、G(綠)、B(藍(lán))。這種方式對(duì)電腦來說非常直接明了，也是電腦理解顏色的默認(rèn)方式。對(duì)電腦友好并不意味對(duì)人類易用，這也是HSB誕生的原因。

HSB代表色相(Hue) - 飽和度(Saturation) - 明度(Brightness)，又稱HSV，是一種更人性化的顏色描述方式。為什么這么講？因?yàn)樗c人們描述顏色的自然方法一致。

2、HSB色彩模式設(shè)置及優(yōu)點(diǎn)

1)、比起 RGB 系統(tǒng)，HSB使用了更貼近人類感官直覺的方式來描述色彩 ，對(duì)于設(shè)計(jì)師來說更容易理解

HSB 的概念很接近色彩學(xué)所常使用的色彩空間模型，由于是由三個(gè)屬性所組合而成，因此常以色立體表示，

但由于我們常用的操作系統(tǒng)依然為二度空間的系統(tǒng)，因此在計(jì)算機(jī)系統(tǒng)的選色接口中常以不同的接口出現(xiàn)，我想其實(shí)大家都很熟悉，像是下圖為sketch中的選色器，可以看見一個(gè)全彩的色相條，和一個(gè)顏色的窗口，滑動(dòng)色相條即可得到不一樣的顏色

2)、HSB可以更加科學(xué)地保證設(shè)計(jì)師所使用的不同顏色處于同一明度和飽和度，使用戶的視覺體驗(yàn)感更好

也許你會(huì)覺得 HSB 并沒有比較簡(jiǎn)單，但是實(shí)際使用過就會(huì)發(fā)現(xiàn)，它是多么的好用。例如下圖的男女比例的背景色塊，如果用RGB調(diào)色只能通過設(shè)計(jì)師的眼睛和經(jīng)驗(yàn)來調(diào)整他們是否處于同樣的色調(diào)中，但是用HSB來調(diào)色，保持S和B值相同，只需要滑動(dòng)色相條即可得到完全一樣的色調(diào)，省時(shí)省力還科學(xué)

三、色彩使用規(guī)則

1、色調(diào)的分類

色調(diào)（color tone）是不同色相但是具有同樣亮度和純度的顏色進(jìn)行的分組，

極淺vp（very pale）色調(diào)：

是純度最低、亮度最高的，干凈清淡的顏色，給人清的，柔弱的，女性的，年輕的，淡的，可愛的印象。

亮灰色lg（light grayish）色調(diào)：

純度低，中高亮度的色調(diào)，給人高貴、安定、古樸的印象和輕柔的感覺。

中灰色mg（medium grayish）色調(diào)：

低純度中亮度，具有濁，不起眼，古樸，穩(wěn)健，安定的氣氛。

深灰dg（dark grayish）色調(diào)：

低純度和中低亮度，給人漂亮、安定、自然的感覺。

極暗vd（very dark）色調(diào)：

是純度和亮度都最低的色調(diào)，具有厚重牢固的感覺，給人非常暗，陰暗，厚重，堅(jiān)固、男性的印象。

淺的pl（pale）色調(diào)：

中純度和高亮度的色調(diào)，給人干凈、淺、爽朗的感覺。

柔軟sf（soft）色調(diào)：

中純度和中高亮度，給人穩(wěn)健溫柔的感覺。相比淺色給人感覺更安定。

晦暗dl（dull）色調(diào)：

中純度和中亮度的色調(diào)，給人安心高雅的感覺，一般說的中間色就是晦暗色調(diào)。

暗dk（dark）色調(diào)：

中純度和低亮度的色調(diào)，具有結(jié)實(shí)，成熟，古樸的色調(diào)印象。

亮It（light）色調(diào): 

高純度高亮度的色調(diào)，具有明亮、健康、活潑，年輕而穩(wěn)定的印象。

強(qiáng)st（strong）色調(diào)：

高純度和中高亮度的色調(diào)，充滿活力，冗長(zhǎng)，熱情，開放的印象。

深dp（deep）色調(diào)：

高純度和低亮度的色調(diào)，具有力量感和深度，給人深的，濃的，傳統(tǒng)的等印象。

活潑VV（vivid）色調(diào)：

高純度和中亮度的色調(diào)，較為鮮艷，鮮明，華麗，鮮艷，鮮活的印象。

2、色調(diào)配色技巧

同色相環(huán)配色技巧原理一樣，色調(diào)也有3種基本的配色技巧。

1）同色調(diào)的配色：

同色調(diào)的顏色幾乎沒有亮度和純度差，是比較容易統(tǒng)一和協(xié)調(diào)的配色。

 2）鄰近色調(diào)配色：

具有一定的亮度和純度差但是差值不大，比較容易調(diào)和，容易傳達(dá)原有印象。有縱向鄰近、橫向鄰近、和斜向鄰近三種。

3）對(duì)比色調(diào)配色：

亮度與純度差很大，是極具張力的配色方法。是色調(diào)圖上相隔很遠(yuǎn)的色調(diào)的配色。自由選擇色相，有亮度對(duì)比、純度對(duì)比、亮度和純度對(duì)比這三種配色方式。

配色網(wǎng)站推薦

推薦是三個(gè)比較好用的、簡(jiǎn)單操作的配色網(wǎng)站，有需要的可以收藏

1、coolors.co

2、designspiration.com

3、materialpalette.com

四、常用色分析

除了醫(yī)療作用外，顏色還有一定的象征意義和社會(huì)屬性，對(duì)人類生活有著舉足輕重的影響。顏色心理學(xué)領(lǐng)域的佼佼者，美國(guó)羅切斯特大學(xué)安德魯.埃利奧特說，以前從來沒有人做過這種聯(lián)系。他表示：“顏色研究表明的是，我們的行為會(huì)受到我們沒有留意，習(xí)以為常的事物的影響?！?/span>

據(jù)國(guó)外媒體報(bào)道，人們常常認(rèn)為，穿著紅色服裝是自信的表現(xiàn)。同時(shí)，科學(xué)家們也認(rèn)為，運(yùn)動(dòng)員身穿紅色運(yùn)動(dòng)服更容易取得好成績(jī)。然而，英國(guó)羅徹斯特大學(xué)的安德魯·埃里奧特等人開展的一項(xiàng)最新研究卻顯示，紅色會(huì)抑制人們思維的活躍性。

埃里奧特和他的研究小組共對(duì)一些中學(xué)的高年級(jí)學(xué)生和部分大學(xué)生進(jìn)行了四次研究。期間，他們向被測(cè)試者發(fā)放了一些用于進(jìn)行智力水平測(cè)試的紙片——在各張紙片的右上角分別用紅色、灰色或綠色表明了序號(hào)。

結(jié)果，凡是所持紙片上用紅色標(biāo)明序號(hào)的學(xué)生，其所獲得的智力水平評(píng)分均明顯低于那些手持灰色或綠色序號(hào)紙片的學(xué)生。先前的研究已經(jīng)證實(shí)，人們?cè)谌粘Ｉ钪兴佑|到的顏色會(huì)對(duì)人的潛意識(shí)產(chǎn)生影響，只不過這種影響非常短暫。

埃里奧特教授認(rèn)為，紅色首先會(huì)使人們聯(lián)想到錯(cuò)誤和失敗。談到這一點(diǎn)，大多數(shù)人肯定都會(huì)想到老師在判卷時(shí)所使用的紅墨水。當(dāng)然，有關(guān)禁止的信號(hào)通常也以紅色表示。而在自然界中，紅色則是一種警示色。隨后進(jìn)行的另外兩項(xiàng)研究則證實(shí)，當(dāng)受測(cè)試者眼看著紅色回答問題時(shí)，他們通常會(huì)選擇那些較為簡(jiǎn)單的問題進(jìn)行解答－－這是人們?cè)诿鎸?duì)困難時(shí)所選擇的最經(jīng)典的方法。

與紅色相對(duì)的是，藍(lán)色能夠促進(jìn)創(chuàng)新；黃色，則是最令人愉快的顏色，它被認(rèn)為是愉快的象征，可以刺激神經(jīng)系統(tǒng)和改善大腦功能，激發(fā)人的朝氣，令人思維敏捷。另外還有，橙色，是新思想和年輕的象征，令人感到溫暖、活潑和熱情，能啟發(fā)人的思維，可有效地激發(fā)人的情緒和促進(jìn)消化功能。

賞心悅目的色彩能夠通過視神經(jīng)傳遞到大腦神經(jīng)細(xì)胞，從而有利于促進(jìn)人的智力發(fā)育。在和諧色彩中生活的少年兒童，其創(chuàng)造力高于普通環(huán)境中的成長(zhǎng)者。若常處于讓人心情壓抑的色彩環(huán)境中，則會(huì)影響大腦神經(jīng)細(xì)胞的發(fā)育，從而使智力下降。所以，我們?cè)谄綍r(shí)日常生活中，正確的應(yīng)用色彩心理學(xué)，改善生活環(huán)境色彩，讓我們的心情更舒適，思維更敏銳。

所以一定不要讓自己孩子在高考的時(shí)候穿什么紅色的外套，旗開得勝什么的，可能會(huì)影響思維活躍度，導(dǎo)致考試成績(jī)不理想

橙色稍稍混入黑色或白色，會(huì)變成一種穩(wěn)重、含蓄又火熱的暖色，但混入較多的黑色，就成為一種燒焦的色；橙色中加入較多的白色會(huì)帶來一種甜膩的感覺。由于位于可見光的中低頻頻段,橙色在空氣中的衍射能力僅次于紅色，而其色感比紅色更暖，最飽和的橙色應(yīng)該是色彩中感受最暖的顏色，能給人有莊嚴(yán)、尊貴、神秘等感覺，所以基本上屬于心理色性。歷史上許多權(quán)貴和宗教界都用以裝點(diǎn)自己，現(xiàn)代社會(huì)上往往作為標(biāo)志色和宣傳色。不過也是容易造成視覺疲勞的色。

英國(guó)埃塞克斯大學(xué)做了一項(xiàng)研究顯示，綠色是很特別的顏色，在四季分明之地方，如見到春天之樹木、有綠色的嫩葉，大自然的顏色。在綠色環(huán)境中鍛煉能提高情緒、活力和愉悅感。也就是說，戶外鍛煉有益身心。

色彩心理學(xué)家早就指出，人們?cè)诟哳l率顏色(如綠色，藍(lán)色和紫色)的環(huán)境下會(huì)產(chǎn)生平靜的感覺，而在中低頻率顏色(如紅色，橙色和黃色)的環(huán)境下更容易興奮和激動(dòng)。這一現(xiàn)象可能是在人類進(jìn)化的過程出現(xiàn)的。因?yàn)閷?duì)于原始人類來說，綠色的環(huán)境意味著充足的食物和水源，對(duì)綠色的積極感覺在進(jìn)化過程中融入大腦。

英國(guó)埃塞克斯大學(xué)的研究者選取十四名男大學(xué)生，要求他們?cè)谑覂?nèi)固定單車上騎行5分鐘，并觀看關(guān)于森林的紀(jì)錄片。隨后，研究者將視頻背景由綠色轉(zhuǎn)換為黑色、白色和紅色，讓志愿者在觀看這3種顏色視頻的同時(shí)，又分別騎行了5分鐘。結(jié)果發(fā)現(xiàn)，他們?cè)谟^看綠色視頻時(shí)疲勞感低，情緒也能保持愉悅；而觀看紅色背景視頻時(shí)，他們更容易情緒不穩(wěn)。

紫色跨越了暖色和冷色，所以可以根據(jù)所結(jié)合的色彩創(chuàng)建與眾不同的情調(diào)。帶些紅色的深紫色可以產(chǎn)生一個(gè)暖色盤。淺紫色是較貴的，常常會(huì)聯(lián)想到浪漫。當(dāng)結(jié)合玫紅色的時(shí)候，可以創(chuàng)建一個(gè)很女性化的色盤。一個(gè)比較男人的色盤可以使用偏紅偏黑的深紫色。泥土和自然的色彩可以結(jié)合紅紫色和淺褐色或者亮紫色+綠色。黃色和紫色是對(duì)比色，可以創(chuàng)建強(qiáng)對(duì)比度的色盤。

作者：木子淺談    來源：站酷

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加藍(lán)小助，微信號(hào):ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

我們已經(jīng)或多或少看過一些優(yōu)秀作品，也知道了一些設(shè)計(jì)方法和技巧，了解到了一些相關(guān)的理論知識(shí)，自己也做過一些項(xiàng)目或者是練習(xí)，總體來說都掌握了一定的設(shè)計(jì)能力；但是設(shè)計(jì)師想要擁有更多的資源（指薪資、工作機(jī)會(huì)等等）或者是想職業(yè)進(jìn)階，除了一定的設(shè)計(jì)能力之外是遠(yuǎn)遠(yuǎn)不夠的，設(shè)計(jì)師還需要掌握更多的能力，才能讓自己成長(zhǎng)提升，并且擁有他人無法取代的價(jià)值。我通過自己的經(jīng)歷和整理收集，發(fā)現(xiàn)目前如今不同階段的設(shè)計(jì)師對(duì)待同一個(gè)問題不同的角度以及特征，如下圖所示：

不難發(fā)現(xiàn)，當(dāng)大家還是初級(jí)設(shè)計(jì)師的時(shí)候，剛剛接觸設(shè)計(jì)行業(yè)，我們更多的是去觀察、學(xué)習(xí)、臨摹一些“好看”的作品，熟練地使用設(shè)計(jì)軟件和提升設(shè)計(jì)技法，最后的是自己做出來的產(chǎn)品是否漂亮美觀，最重要的是客戶/老板是否會(huì)買單，而自己無法清晰地定義自己設(shè)計(jì)的產(chǎn)品價(jià)值，也不能很好表達(dá)出自己的想法和觀點(diǎn)。所以產(chǎn)品走向會(huì)根據(jù)老板/客戶的水準(zhǔn)來定義，輪到自己表達(dá)只是支支吾吾，最后只是做為執(zhí)行無休止地改改改。一切由老板/客戶說的算，無法清晰地了解自己產(chǎn)品的定位，缺乏表達(dá)觀點(diǎn)的能力，缺乏一定的審美，作為執(zhí)行角色無休止加班成為了初級(jí)設(shè)計(jì)師最大的痛點(diǎn)。

而經(jīng)過一段時(shí)間的學(xué)習(xí)和工作后，逐漸轉(zhuǎn)型成為中級(jí)設(shè)計(jì)師后，有了一定的設(shè)計(jì)技法和軟件使用熟練度，有了一定的審美和視覺表現(xiàn)能力，平臺(tái)規(guī)模合作團(tuán)隊(duì)也逐漸變大，基本能滿足老板/客戶/業(yè)務(wù)方提出的需求。開始學(xué)習(xí)一些設(shè)計(jì)相關(guān)理論，開始拆解自己或別人產(chǎn)品的交互架構(gòu)，更多地開始關(guān)注用戶體驗(yàn)起來，也會(huì)融入品牌元素到自己的產(chǎn)品當(dāng)中，為自己的產(chǎn)品做情感化設(shè)計(jì)和制定設(shè)計(jì)規(guī)范，會(huì)組織一些專業(yè)語言和業(yè)務(wù)溝通以及陳述自己的產(chǎn)品。但是如何從眾多的設(shè)計(jì)方案中找到最優(yōu)的方案來解決問題，如何更多地體現(xiàn)產(chǎn)品的價(jià)值，產(chǎn)品利益鏈如何形成商業(yè)閉環(huán)，如何在團(tuán)隊(duì)/設(shè)計(jì)圈體現(xiàn)自己個(gè)人的價(jià)值，如何提升自己的個(gè)人影響力，成為了中級(jí)設(shè)計(jì)師這階段的痛點(diǎn)。

通過三年五年的沉淀，成為高級(jí)設(shè)計(jì)師后，形成了自己獨(dú)有的一套方法論和設(shè)計(jì)思維，能熟練地拆解每款產(chǎn)品和定義產(chǎn)品，視覺表現(xiàn)層已經(jīng)完全能駕馭，能清晰地闡述自己的設(shè)計(jì)思路和結(jié)論，產(chǎn)品用戶體驗(yàn)層也有了一定的經(jīng)驗(yàn)和方法，在團(tuán)隊(duì)中或者設(shè)計(jì)圈有自己一定的個(gè)人影響力，更多地會(huì)在工作中思考產(chǎn)品帶來的社會(huì)價(jià)值和商業(yè)價(jià)值，會(huì)用不同的思維去思考產(chǎn)品的各個(gè)維度，找到最優(yōu)的方法解決問題，會(huì)把固有的利益鏈轉(zhuǎn)換成商業(yè)閉環(huán)，提升用戶轉(zhuǎn)化率等等。而這階段的設(shè)計(jì)師的主要痛點(diǎn)就是面臨著團(tuán)隊(duì)管理和溝通，朝著資深設(shè)計(jì)師和設(shè)計(jì)專家轉(zhuǎn)型，以及如何為平臺(tái)帶來的利益價(jià)值考核等等問題。

資深設(shè)計(jì)師或者設(shè)計(jì)專家這里不談，因?yàn)檫@階段所思考的問題大都和設(shè)計(jì)無關(guān)了。通過上述不難發(fā)現(xiàn)，每個(gè)階段的設(shè)計(jì)師都有各自的特征和痛點(diǎn)，雖然其中都包含著設(shè)計(jì)相關(guān)的能力，但是隨著階段的進(jìn)階設(shè)計(jì)相關(guān)的能力占比逐漸變少，更多的是其他的能力增長(zhǎng)，所以設(shè)計(jì)師除了設(shè)計(jì)以外其他能力的重要程度顯而易見，那么我們來看看除了設(shè)計(jì)以外，設(shè)計(jì)師應(yīng)該掌握其他什么能力。

思考能力(Thinking)

思考能力作為首要的能力，不僅僅是設(shè)計(jì)師，其他職業(yè)一樣需要這個(gè)能力，這里所涵蓋的面太廣泛了也說不了，這里主要針對(duì)三點(diǎn)來講：核心競(jìng)爭(zhēng)力、批判思維和分析能力。思考分為兩個(gè)層面：自我層面的和業(yè)務(wù)層面的思考；自我層面的思考就是要通過深度剖析自我，發(fā)掘自己處于哪個(gè)階段，有什么長(zhǎng)處和不足，自己想要什么，需要往怎樣的方向發(fā)展；而業(yè)務(wù)層面的則是要需要思考業(yè)務(wù)產(chǎn)品的結(jié)構(gòu)框架、用戶體驗(yàn)、商業(yè)價(jià)值等等等等，前者更加關(guān)注自身的成長(zhǎng)，后者更加關(guān)注業(yè)務(wù)的成長(zhǎng)。

· 核心競(jìng)爭(zhēng)力

核心競(jìng)爭(zhēng)力就是有與別人不一樣的競(jìng)爭(zhēng)力，想要做到別人無法替代你的地步，就要有自己個(gè)人核心的競(jìng)爭(zhēng)力。如果你會(huì)做一張 Banner，我也會(huì)做一張 Banner，你會(huì)搞一個(gè)頁面，我也會(huì)搞一個(gè)頁面，那么你這個(gè)人就成為了可有可無的螺絲釘，唯一的優(yōu)勢(shì)就是年輕能拼能熬，等你熬銹了老了，隨時(shí)可以換一顆新的螺絲釘來取代你的位置。所以不管什么階段，我們要深度剖析自己，認(rèn)清自己的優(yōu)勢(shì)劣勢(shì)，并采取相應(yīng)的措施。

剖析自己的核心競(jìng)爭(zhēng)力給大家一個(gè)大致思路，從異樣性和共通性入手。自己周圍或多或少有團(tuán)隊(duì)，條件不足的話現(xiàn)在網(wǎng)絡(luò)各大平臺(tái)都很發(fā)達(dá)，也能融入一些設(shè)計(jì)圈子中，和不同的人對(duì)比尋找自己的核心競(jìng)爭(zhēng)力。異樣性是當(dāng)前的優(yōu)勢(shì)，找出其中的優(yōu)點(diǎn)，不斷地放大深造，變成你的核心競(jìng)爭(zhēng)力，而和別人不一樣的缺點(diǎn)找出來摒棄改正；共通性就是和大家一樣的地方，可以看作是偽劣勢(shì)，因?yàn)橹T多共通性中總有你最喜歡最擅長(zhǎng)的一個(gè)，將它單獨(dú)拿出來不斷擴(kuò)大，逐漸就拉開了差異性，慢慢就轉(zhuǎn)化成你的核心競(jìng)爭(zhēng)力了，而大家都有的缺點(diǎn)，你把它糾正了，就成為你的核心競(jìng)爭(zhēng)力了。

來舉一個(gè)栗子：小王是一名工作了3年的設(shè)計(jì)師，研究生畢業(yè)，由于公司的原因平時(shí)工作最多接觸的就是一些運(yùn)營(yíng)圖 banner，也有過很多品牌 VI 的經(jīng)驗(yàn)，逐漸自己在視覺表現(xiàn)上有自己一定的見解和想法，也更加感興趣做視覺表現(xiàn)的東西。

那么他的共通性就有：1.工作3年之久；2.研究生畢業(yè)；3.視覺表現(xiàn)能力強(qiáng)也更感興趣；4.做過品牌 VI 的經(jīng)驗(yàn)；5.有自己的見解和想法。

由此推斷出小王的共通性是：1.工作經(jīng)驗(yàn)豐富；2.視覺表現(xiàn)力強(qiáng)；3.有想法和見解；

異樣性是：1.學(xué)歷優(yōu)勢(shì)；2.品牌 VI 相關(guān)經(jīng)驗(yàn)

那么小王可以保持自己學(xué)歷優(yōu)勢(shì)下，可以繼續(xù)深造品牌 VI 相關(guān)，逐漸轉(zhuǎn)型成為高學(xué)歷的品牌 VI 設(shè)計(jì)師，那么學(xué)歷和很多品牌 VI 的經(jīng)驗(yàn)就是小王的核心競(jìng)爭(zhēng)力；也可以通過熱愛去學(xué)習(xí) C4D 動(dòng)效等軟件繼續(xù)增強(qiáng)自己視覺表現(xiàn)力，配合自己豐富的工作經(jīng)驗(yàn)逐漸轉(zhuǎn)型成高學(xué)歷的創(chuàng)意藝術(shù)設(shè)計(jì)師，然后通過將自己的想法見解通過分享會(huì)、文章等模式產(chǎn)出，將這一點(diǎn)升級(jí)成個(gè)人影響力，那么綜合下來更加優(yōu)秀的視覺表現(xiàn)力、豐富的工作經(jīng)驗(yàn)和個(gè)人影響力也會(huì)逐漸變成小王的核心競(jìng)爭(zhēng)力。

只有通過不同維度深度地剖析自己，找到自己的共通和異樣點(diǎn)，清晰自己的價(jià)值定位，然后制定出適合自己成長(zhǎng)目標(biāo)和方案，不斷放大增加自己的核心競(jìng)爭(zhēng)力，成為不可取代的那個(gè)人。

· 批判思維

批判思維是一名設(shè)計(jì)師必須具備的思維能力，我們不僅僅要學(xué)會(huì)批判別人的作品，還要學(xué)會(huì)自我批判。這里不是指無腦的批判（之前遇到過一個(gè)實(shí)習(xí)生剛進(jìn)到公司里，就把之前所有人做的東西全部批判了一遍，重點(diǎn)是只說產(chǎn)品好看與否，完全不顧及平臺(tái)一致性商業(yè)價(jià)值用戶體驗(yàn)等等，最后只批判卻沒有任何實(shí)質(zhì)性的建議，頗有一種指點(diǎn)江山的感覺，然后后面再也沒見到過他了），這里是指在自己通過批判別人或自我的方案，不斷地優(yōu)化糾正，最后產(chǎn)出最優(yōu)質(zhì)的方案，這是批判思維的出發(fā)點(diǎn)。

不同的人有不同的經(jīng)歷，看待問題的維度是多種多樣的，所以一個(gè)方案產(chǎn)出后，通過不同的人思考后的結(jié)果是最好的解決方案。這也印證了波克定理：只有在爭(zhēng)辯中，才可能誕生最好的主意和最好的決定。所以當(dāng)設(shè)計(jì)師接到產(chǎn)品交互給到的原型圖后，不要上手就做圖，要通過自己經(jīng)驗(yàn)和想法去看待原型圖，然后提出更加優(yōu)質(zhì)的方案進(jìn)行討論，如果你的方案更加優(yōu)質(zhì)，那么不僅是產(chǎn)品的質(zhì)量得到了優(yōu)化，你個(gè)人的經(jīng)驗(yàn)也得到了沉淀，下次遇到相同的場(chǎng)景就可以拿出來復(fù)用，直到遇到更好的方案。

唯一注意的事項(xiàng)就是注意溝通的方法，這里后文會(huì)提到，比你資歷高的人提出的觀點(diǎn)更加具有建設(shè)性，在毫無頭緒沒有創(chuàng)新的情況下就聽比你更有經(jīng)驗(yàn)的人的；遇到比你資歷低的人提出的觀點(diǎn)也不要嗤之以鼻，抓取其中有用的點(diǎn)，沒準(zhǔn)是一個(gè)新的思維方向；總之，有數(shù)據(jù)說數(shù)據(jù)，沒數(shù)據(jù)舉案例，沒案例講觀點(diǎn)，如果連觀點(diǎn)都沒有的話，照著大佬說的話做就是了。

· 分析能力

分析能力也是設(shè)計(jì)師必須掌握的能力之一，無論你是創(chuàng)意藝術(shù)設(shè)計(jì)師，還是用戶體驗(yàn)設(shè)計(jì)師，譬如一張 Banner 氛圍傳遞或者文案排版，譬如插畫的配色或者場(chǎng)景搭建，譬如產(chǎn)品的布局結(jié)構(gòu)或者用戶體驗(yàn)，這些都需要有一定的分析能力。通過拆解改版/競(jìng)品/參照產(chǎn)品等，明確產(chǎn)品的最終目的、商業(yè)價(jià)值等等，有了這些準(zhǔn)備后才能對(duì)自己的產(chǎn)品進(jìn)行設(shè)計(jì)或者改版。而分析產(chǎn)品可以以用戶體驗(yàn)五要素的角度來分析，分別是：戰(zhàn)略層、范圍層、結(jié)構(gòu)層、框架層和表現(xiàn)層，具體相關(guān)的文章站酷、PM 社區(qū)、36氪等等都搜的到，這里不再細(xì)說；之前在分析產(chǎn)品的時(shí)候發(fā)現(xiàn)有些產(chǎn)品強(qiáng)行套用這五個(gè)要素進(jìn)去不適用，因?yàn)橛行┊a(chǎn)品的頁面它不存在戰(zhàn)略層或者范圍層的東西，所以我總結(jié)歸納了三個(gè)角度來分析產(chǎn)品。

案例就用淘搶購 v4.1 頁面（已上線）來講，三個(gè)角度主要是：表現(xiàn)層、用戶體驗(yàn)層和價(jià)值層。表現(xiàn)層主要就是產(chǎn)品頁面的配色、布局結(jié)構(gòu)之類的；用戶體驗(yàn)層就是產(chǎn)品的心智透出、交互流程之類的；價(jià)值層就是產(chǎn)品深度的價(jià)值體現(xiàn)了，比如商業(yè)價(jià)值、社會(huì)價(jià)值和用戶留存率之類的；大致可以套用這個(gè)公式去思考：為什么這里會(huì)用這種表現(xiàn)形式，它想要表達(dá)怎樣的效果，它要達(dá)到怎樣的最終目的，如果是自己去設(shè)計(jì)會(huì)怎樣做。舉例：因?yàn)樘詫氁?guī)范為卡片式設(shè)計(jì)，在視覺表現(xiàn)上要統(tǒng)一，所以淘搶購 v4.1 的業(yè)務(wù)目的是統(tǒng)一視覺樣式，并且它需要給用戶產(chǎn)生一種“商品很便宜快去搶購再不搶購就沒了”的心智認(rèn)知，它的最終目的是引導(dǎo)用戶去商品 Detail 頁面購買商品和提高商品的點(diǎn)擊率，這樣通過協(xié)調(diào)關(guān)系形成平臺(tái)、商家和用戶之間的利益鏈商業(yè)閉環(huán)。

想要提升自己的分析能力除了項(xiàng)目和時(shí)間的沉淀外，更多的時(shí)候需要自己平時(shí)的積累，站酷等平臺(tái)有很多優(yōu)秀的作品，作者會(huì)把自己設(shè)計(jì)的分析和思路寫出來，我們可以看看別人的想法是否值得借鑒，然后再去分析一下，最后思考如果是自己的話會(huì)怎么去做；其次做設(shè)計(jì)的時(shí)候帶著同理心去做，把自己當(dāng)作用戶去看待自己的產(chǎn)品，通過不斷的積累提升自己對(duì)產(chǎn)品的敏銳度，將一些產(chǎn)品的隱性問題挖掘出來；另外可以多看一些好的設(shè)計(jì)分析書，比如《U一點(diǎn)料1、2》、《以匠心 致設(shè)計(jì)》等等，將學(xué)到的分析方法代入自己的產(chǎn)品或作品中，逐漸分析能力就增強(qiáng)了。

規(guī)劃能力(Plan)

規(guī)劃能力是日常工作生活中所需要掌握的能力，主要講業(yè)務(wù)規(guī)劃和職業(yè)生涯規(guī)劃，業(yè)務(wù)規(guī)劃能力應(yīng)對(duì)的是我們工作中處理業(yè)務(wù)所需要具備的能力，而職業(yè)生涯規(guī)劃應(yīng)對(duì)的是我們整個(gè)人生職業(yè)生涯規(guī)劃的能力。掌握這個(gè)能力后前者會(huì)給我們帶來業(yè)務(wù)處理效率上的提升，后者給我們帶來整個(gè)人生有益的好處，所以這個(gè)能力非常重要。

· 業(yè)務(wù)規(guī)劃

很多時(shí)候我們還在有條不紊地處理某個(gè)需求，心想著下班去吃個(gè)飯買水果回家洗澡睡覺的時(shí)候，突然來了一個(gè)緊急的需求，就把我們整天的計(jì)劃給打亂了，火急火燎地處理完這個(gè)需求，然后又把之前的需求做了，最后加班改改改導(dǎo)致整個(gè)計(jì)劃泡湯了。工作中遇到這樣的情況很多很多，處理方法有很多種，最經(jīng)典的就是四象限法則，把事情的緊急重要程度分為：重要且緊急、緊急不重要、重要不緊急和不重要且不緊急四個(gè)象限。

很多時(shí)候都是道理我們都懂，可是一遇到情況依舊手忙腳亂，根本原因是沒有認(rèn)真地把它代入自己的工作生活當(dāng)中。畫一個(gè)象限表，把自己今天所要處理的事務(wù)陳列出來五分鐘都不需要，一開始可能因?yàn)槭虑椴欢嗑蜎]堅(jiān)持下去，一旦養(yǎng)成習(xí)慣后，將來遇到多種緊急情況突發(fā)的時(shí)候就能認(rèn)識(shí)到這個(gè)習(xí)慣給你帶來的好處了，所謂養(yǎng)兵千日，用兵一時(shí)就是這個(gè)道理。

在做業(yè)務(wù)需求的時(shí)候，可能會(huì)碰到有些需求價(jià)值高，有些需求價(jià)值低但又很緊急，不知道怎么處理之間的關(guān)系，我們依舊可以套用四象限法則來制定一個(gè)四象限表：價(jià)值高且緊急、緊急但價(jià)值低、價(jià)值高不緊急和價(jià)值低不緊急。什么是價(jià)值高的需求呢，就是能讓你有充分思考和分析的需求，比如某個(gè)頁面的改版；價(jià)值低的需求則是相對(duì)不怎么需要思考和分析的需求，比如根據(jù)已有的規(guī)范改個(gè)顏色之類的。在時(shí)間的優(yōu)先級(jí)前，價(jià)值高的需求大于價(jià)值低的，最后剩下的就是價(jià)值不高且不緊急的。因?yàn)槲覀儫o法拒絕需求，需求來了肯定要是做的，工作不是愛好可以有多種選擇性，但我們要學(xué)會(huì)將需求分解成不同類型的，對(duì)自己有成長(zhǎng)沉淀的需求那可以作為最高優(yōu)先級(jí)去處理，留夠充裕的時(shí)間去思考分析，然后沉淀經(jīng)驗(yàn)穩(wěn)定提升。

· 職業(yè)生涯規(guī)劃

這個(gè)在大學(xué)期間就學(xué)過相關(guān)的課程，只不過當(dāng)時(shí)并沒有太深的感觸，而是等工作以后才知道這項(xiàng)能力的重要性，它相當(dāng)于關(guān)系著你每個(gè)階段的里程碑，當(dāng)成游戲中的成就任務(wù)也不為過，還是自己設(shè)定的成就任務(wù)。某個(gè)階段想要達(dá)成什么樣的目標(biāo)，想要獲得怎樣的成就，都是要自己一步一步慢慢規(guī)劃并且完成出來的。

因?yàn)槲矣龅竭^幾個(gè)非常努力的人，努力到讓人心悸的地步，每天除去吃飯睡覺工作時(shí)間就是在努力學(xué)習(xí)，到最后還是很迷茫，不知道做什么，不知道如何體現(xiàn)自己的價(jià)值。這類沒有目的的努力的人是很可怕的，他們努力得沒有錯(cuò)，但是這樣下去沒有成效的努力會(huì)讓他們覺得努力并沒什么用，然后逐漸開始產(chǎn)生抱怨、泄氣和放棄等負(fù)面情緒。

舉個(gè)例子來說明：如果你剛畢業(yè)，給自己制定的長(zhǎng)遠(yuǎn)的職業(yè)生涯規(guī)劃是在工作3～5年后進(jìn)到大廠工作提升自己，那么所拆分下來就需要一些項(xiàng)目工作經(jīng)驗(yàn)和優(yōu)秀的作品，再拆分下來就是如何做出優(yōu)秀的作品，細(xì)分到最后就是作品當(dāng)中的元素，比如圖標(biāo)排版布局之類的，那么就制定一段時(shí)間內(nèi)的練習(xí)就按照各類元素去做，比如圖標(biāo)畫兩個(gè)星期，APP 設(shè)計(jì)排版布局練習(xí)兩個(gè)星期，插畫練習(xí)畫兩個(gè)星期，這樣堅(jiān)持下來就組成一個(gè)完整的項(xiàng)目作品了，以此類推。有了規(guī)劃目標(biāo)并且在自我驅(qū)動(dòng)的推動(dòng)下，逐漸實(shí)現(xiàn)自己的職業(yè)目標(biāo)。

設(shè)計(jì)師要如何培養(yǎng)自我驅(qū)動(dòng)可以看我之前的文章：

淺談設(shè)計(jì)師的自我驅(qū)動(dòng)

https://www.zcool.com.cn/article/ZODEzMTky.html

執(zhí)行能力(Execute)

執(zhí)行能力是指自我在工作&學(xué)習(xí)中執(zhí)行的能力，執(zhí)行能力為一個(gè)設(shè)計(jì)師最主要的核心技能，一切的能力都凌駕于這個(gè)基礎(chǔ)之上；哪怕你再能說會(huì)道，能賦予你的設(shè)計(jì)各種價(jià)值，能給予你的設(shè)計(jì)各種環(huán)境，但這些都是第二步，第一步就是你的設(shè)計(jì)表現(xiàn)達(dá)到期望值，如若第一步稿子都不好看，那么沒人愿意會(huì)聽你敘述的。前文已經(jīng)提及到了，設(shè)計(jì)師在初級(jí)至中級(jí)階段的時(shí)候大多數(shù)注重的就是表現(xiàn)手法，如同學(xué)說話一樣，表現(xiàn)手法可以看作是漢語拼音，然后才是組成一個(gè)個(gè)字，最后組成一句完整的話語。

· 自我執(zhí)行力

提升自我執(zhí)行的能力我大致分為兩個(gè)步驟：看和做。

首先先來說看，看其實(shí)是提高自己審美的一個(gè)過程，通過看一些平臺(tái)網(wǎng)站的優(yōu)秀設(shè)計(jì)作品，久而久之自己的審美能力才會(huì)提高，然而看分下來一種是帶有目的性和不帶有目的性的。不帶有目的性地去看是在自己有空余或?qū)W習(xí)時(shí)間，通過瀏覽設(shè)計(jì)網(wǎng)站采集學(xué)習(xí)一些你覺得好看的作品；采集是一個(gè)很好的習(xí)慣，我覺得是每個(gè)設(shè)計(jì)師必須養(yǎng)成的習(xí)慣，把自己平時(shí)覺得好的表現(xiàn)形式收集起來，等到某一天需要用到的時(shí)候，腦海中對(duì)當(dāng)前場(chǎng)景會(huì)有一定的印象，再根據(jù)印象去尋找采集到的作品，能很大程度上節(jié)省自己腦爆的時(shí)間，哪怕沒有采集或者文件丟失，自己的腦中大致也會(huì)有一個(gè)雛形方向。而帶有目的性地看是指針對(duì)某一個(gè)模塊去搜集整理，比如今天我需要做一個(gè)關(guān)于內(nèi)容的模塊，那么我就會(huì)去尋找一些做內(nèi)容的產(chǎn)品設(shè)計(jì)，搜集到的各類關(guān)于內(nèi)容的表現(xiàn)手法，然后結(jié)合自己的經(jīng)驗(yàn)和分析，找出最適合自己產(chǎn)品的一種。

僅僅看是不夠的，在看過之后我們需要?jiǎng)邮謬L試才能算真正地沉淀自己所看到、學(xué)到的東西。做設(shè)計(jì)最忌諱的就是“眼高手低或者眼低手高”這種狀態(tài)，有了審美但表現(xiàn)手法跟不上，或者說表現(xiàn)手法有但是審美跟不上。一定要在自己吸收了一定的審美后，通過自己的嘗試去做出來，才能真正的沉淀到自己的大腦當(dāng)中，變成自己的表現(xiàn)手法之一。最后通過大量的積累，結(jié)合對(duì)商業(yè)需求的判斷形成設(shè)計(jì)策略，才能從容應(yīng)對(duì)不同的產(chǎn)品需求，哪怕你今天做金融相關(guān)的產(chǎn)品，還是明天做電商的產(chǎn)品，后天又改做工具類產(chǎn)品，一旦形成了自己不同的應(yīng)對(duì)策略，才能做到真正意義上的游刃有余。

很多時(shí)候我們只關(guān)注到魚的大小、魚的肉質(zhì)是否鮮美那20%層面的東西，往往忽視了80%最重要的捕魚技巧和方法；看到的只是產(chǎn)品是否好看，交互是否流暢，體驗(yàn)是否良好，沒有往更深層次地去想這個(gè)產(chǎn)品的商業(yè)背景是什么，設(shè)計(jì)師為什么要這樣設(shè)計(jì)，如果換做自己的話會(huì)去怎么做；畢竟我們所做的一切訓(xùn)練、思考都是為了更好地為工作服務(wù)，就如同脫離了商業(yè)背景以后，有些設(shè)計(jì)就只是單純的炫技，并沒有解決問題的價(jià)值，而設(shè)計(jì)師的工作核心就是解決問題，所以我們要結(jié)合作品的背景、價(jià)值等因素，去看、去做、去學(xué)相應(yīng)的表現(xiàn)手法才是自我執(zhí)行的核心所在。

表達(dá)能力(Express)

表達(dá)能力是設(shè)計(jì)師除去執(zhí)行能力外第二重要的能力，小到平日里的溝通對(duì)接，大到述職晉升面試，都離不開表達(dá)能力的支持。有些設(shè)計(jì)師經(jīng)常面試怎么都過不了關(guān)，我本以為是作品集的問題，可是看完之后作品方面完全沒有什么問題，具體了解后才知道是在面試過程當(dāng)中不知如何闡述自己的作品和思路或者在闡述過程中由于緊張等因素導(dǎo)致表達(dá)斷斷續(xù)續(xù)不順暢，面試官就會(huì)覺得這個(gè)人不靠譜然后 PASS，明明做圖很優(yōu)秀卻輸在了表達(dá)上，這種情況就很憋屈。在廣告公司中，一個(gè) LOGO 或者廣告視頻往往只是贈(zèng)品，出售的卻是這個(gè)品牌VI的故事；如果一個(gè)設(shè)計(jì)師不懂得怎么闡述自己的業(yè)務(wù)，不懂得怎么推銷自己的方案，不懂得拓寬自己的個(gè)人影響力，就單純的只會(huì)執(zhí)行作圖的話，那么這名設(shè)計(jì)師是不合格的。網(wǎng)傳有一個(gè)段子“一個(gè)公司的工資排名規(guī)律：用 Word 的不如用 Excel 的，用 Excel 的不如用 PPT 的，用 PPT 的不如講 PPT 的，講 PPT 的不如聽 PPT 的，聽 PPT 的不如聽匯報(bào)的，聽匯報(bào)的不如決定的，決定的不如簽字的”，由此可見表達(dá)能力在職場(chǎng)中的重要性。

· 業(yè)務(wù)表達(dá)

業(yè)務(wù)表達(dá)是指在自己工作的過程當(dāng)中，對(duì)自己的設(shè)計(jì)方案進(jìn)行闡述。大部分設(shè)計(jì)師會(huì)遇到一個(gè)困擾，當(dāng)設(shè)計(jì)稿做完以后就不知道怎么去表達(dá)自己的設(shè)計(jì)理念，被業(yè)務(wù)方/面試官/老板提出質(zhì)疑時(shí)，比如：“你這產(chǎn)品的設(shè)計(jì)為什么要用紅色？”、“聊天信息這塊兒為什么要用小氣泡的樣式？”，往往不知道怎么去說，有一種當(dāng)時(shí)就覺得好看所以這樣做了，也沒有去想那么多的感覺，或者其他優(yōu)秀的作品/競(jìng)品是這樣做的，我也就這樣做了；那么結(jié)果往往就是自己的專業(yè)性遭到質(zhì)疑，然后轉(zhuǎn)變成業(yè)務(wù)方/老板進(jìn)行設(shè)計(jì)主導(dǎo)，形成“改來改去還是第一版好”這樣類似的惡性循環(huán)中。

那么如何提升自己的業(yè)務(wù)表達(dá)能力呢？首先設(shè)計(jì)師要提升在設(shè)計(jì)領(lǐng)域的專業(yè)度，通過學(xué)習(xí)吸納設(shè)計(jì)相關(guān)的知識(shí)，然后代入自己的設(shè)計(jì)當(dāng)中去試著闡述設(shè)計(jì)稿，準(zhǔn)備工作先做到位，收集相關(guān)的數(shù)據(jù)，掌握相對(duì)應(yīng)的設(shè)計(jì)理論，先說服自己再去說服別人。比如：“通過色彩心理學(xué)得知，紅色能帶給人興奮、激動(dòng)、熱情等積極情緒，而我們產(chǎn)品所需要透出的氛圍是熱情的、積極向上的，相對(duì)應(yīng)地激發(fā)出用戶的正向情緒，所以我這里使用紅色?！?、“根據(jù)近半年數(shù)據(jù)研究得出，產(chǎn)品聊天信息模塊使用過程當(dāng)中女性用戶占總用戶數(shù)的85.9%，而小氣泡樣式相對(duì)比其他樣式更能迎合女性用戶群體的喜好，通過 A/B 測(cè)試結(jié)果得出，使用小氣泡樣式后數(shù)據(jù)上漲了15%左右，所以聊天信息模塊整體改版成小氣泡的樣式?！?

通過自己前期的準(zhǔn)備（設(shè)計(jì)理論知識(shí)補(bǔ)充、用戶調(diào)研、數(shù)據(jù)測(cè)試等），將自己的設(shè)計(jì)理念表達(dá)出來，主導(dǎo)整個(gè)設(shè)計(jì)的方向，必要時(shí)可以理性地堅(jiān)持自己的設(shè)計(jì)方案，畢竟無論是老板還是業(yè)務(wù)方，出發(fā)點(diǎn)都是希望自己的產(chǎn)品能做到最好最完善，只要你給出數(shù)據(jù)支撐和專業(yè)性的建議，他們一定都會(huì)采納接受的，而最后你的能力和專業(yè)性也得到了對(duì)應(yīng)的認(rèn)可。

· 書面表達(dá)

我本人是強(qiáng)烈建議在能力達(dá)到一定程度的時(shí)候，通過寫作來檢視自己成果的。因?yàn)橥芏鄸|西自己是明白的，但是寫出來讓其他人看懂是另外一種能力了。自己一段時(shí)間的職業(yè)經(jīng)驗(yàn)總結(jié)、對(duì)設(shè)計(jì)的見解看法、自己獨(dú)特的設(shè)計(jì)思維、一本書的讀后感等等都可以通過書面表達(dá)出來，某個(gè)知識(shí)理論難的不是學(xué)習(xí)，而是將它教授出去，因?yàn)橹挥心阆胍涯臣抡f明白，闡述得其他人都能看懂，那么首先你要對(duì)這件事理解得很透徹，然后通過自己的經(jīng)驗(yàn)和見解，轉(zhuǎn)化成通俗的語言說給別人聽。最好的狀態(tài)就是與你同樣級(jí)別的人你能與他用專業(yè)術(shù)語對(duì)話，級(jí)別比你低的人你能把理論轉(zhuǎn)換成他能聽懂的語言進(jìn)行交流，這樣才算是對(duì)理論概念理解透徹到位。

大家也明白，學(xué)習(xí)最有效的方法不是輸入而是輸出，設(shè)計(jì)也是一樣的。在學(xué)習(xí)某種理論方法后，通過書面表達(dá)出自己的見解和想法，并代入到相應(yīng)的例子當(dāng)中，做到舉一反三才能算是真正的學(xué)到了這個(gè)知識(shí)點(diǎn)。

· 述職

述職一般出現(xiàn)在晉升報(bào)告或者面試當(dāng)中，“諸侯朝于天子曰述職，述職者，述所職也?！笔雎毧梢哉f是工作報(bào)告中的總結(jié)性報(bào)告。向自己的老板述職是為了升職加薪，向面試官述職是為了獲取更好的工作機(jī)會(huì)；工作成果有了，但是述職做不好的話，在老板/面試官眼里你就做了無成效的工作，述職沒有想象的那么簡(jiǎn)單，但是也沒有那么難，很多人都會(huì)經(jīng)歷兩個(gè)述職的誤區(qū)，這些誤區(qū)我經(jīng)歷過也看到過，所以總結(jié)出來警醒大家。

一、把述職當(dāng)作流水賬

把述職當(dāng)作流水賬是很多新人容易犯的錯(cuò)誤，當(dāng)述職的時(shí)候，有的人就會(huì)陳列出自己今年做了多少多少工作：“我今年改版了 XXX 模塊”、“我設(shè)計(jì)了 XXX 的首頁”、“我通過調(diào)查研究自主推導(dǎo)改版了 XXX 模塊并落地成功”等等，這時(shí)候你的老板/面試官會(huì)心里會(huì)想：“所以呢？”“然后呢？”，工作結(jié)果固然重要，但是決定你能否晉升/錄用的，不僅僅是把你做的工作進(jìn)行流水賬般的描述就夠了的。

二、把述職當(dāng)作邀功大會(huì)

這個(gè)誤區(qū)相對(duì)來說更高端一些，述職的時(shí)候有的人常常會(huì)像邀功一樣：“我今年通過改版了 XXX 模塊，導(dǎo)致用戶量從50%上漲到了80%”、“通過調(diào)查研究改版了 XXX 模塊，最后通過 A/B 測(cè)試發(fā)現(xiàn)數(shù)據(jù)上漲了5%，最后落地全部實(shí)施新的設(shè)計(jì)方案”，這些看似闡述了產(chǎn)品的背景、自己做了什么以及結(jié)果，但是往往來說還是不夠的，以上統(tǒng)統(tǒng)可以歸為無效述職。

你做了什么重要嗎？沒那么重要，重要的是你帶了什么樣的價(jià)值。述職所需要你做的，老板/面試官所想要了解的就是：分析為什么產(chǎn)品之前數(shù)據(jù)會(huì)那么低？你是通過那些方法得出解決方案的？為什么那么多種解決方案里你要選擇這一種？你這樣的方法能否沉淀成體系？如果換一個(gè)人來按照你的方法做是否可以得到同樣的效果？有效述職也就是決定你能向上一步的，是把你在工作中的感性認(rèn)知上升到理性規(guī)律的歸納總結(jié)的能力體現(xiàn)。

· SCQA模型

SCQA 模型是一個(gè)“結(jié)構(gòu)化表達(dá)”工具，是麥肯錫咨詢顧問芭芭拉·明托在《金字塔原理》中提出的，而這個(gè)模型可以套用在業(yè)務(wù)表達(dá)、書面表達(dá)以及述職任何場(chǎng)景當(dāng)中；S是指場(chǎng)景(Situation)，C是指沖突(Complication),Q是指問題(Question)，A是指解決方案(Answer)。

無論你是在向業(yè)務(wù)方/老板闡述方案做工作匯報(bào)，還是自己寫作梳理都可以用到這個(gè)模型；S場(chǎng)景陳述的通常是大家都熟悉的事、普遍認(rèn)同的事、事情發(fā)生的背景。由此切入既不突兀交代了事情背景又容易讓大家產(chǎn)生共鳴，產(chǎn)生代入感，然后引出沖突C。Q是其中發(fā)現(xiàn)的問題，最后A給出相對(duì)應(yīng)的解決方案，是對(duì)Q的回答也是接下來我們要闡述的內(nèi)容。整個(gè)結(jié)構(gòu)其實(shí)是形成良好的溝通氛圍，然后帶出沖突和疑問，最后提供可行的解決方案。

我們熟知的廣告詞經(jīng)常使用這個(gè)套路：

得了灰指甲——描述場(chǎng)景【S】

一個(gè)傳染兩——發(fā)生了沖突【C】

問我怎么辦？——提出問題【Q】

馬上用亮甲！——給出解決方案【A】

這個(gè)模型無論作為演講的開場(chǎng)白，作為向業(yè)務(wù)方/老板闡述設(shè)計(jì)方案的開場(chǎng)，還是作為一篇文章的序言都是屢試不爽的。S場(chǎng)景需要讓對(duì)方產(chǎn)生共鳴，必須讓對(duì)方產(chǎn)生一種：“是的，你說的好有道理”的反應(yīng)，只有場(chǎng)景被認(rèn)同了才能繼續(xù)故事的發(fā)展，這時(shí)候打破你給對(duì)方營(yíng)造的安全感，制造C沖突，相繼提出Q問題，共同確認(rèn)面臨的一個(gè)問題，然后你給出你的A解決方案，而這個(gè)解決方案就是你整個(gè)敘述的核心和中心思想。

比如你要向業(yè)務(wù)方/老板闡述你的設(shè)計(jì)方案，就可以這樣來描述：“在 XXv2.0 版本上線后（交代場(chǎng)景），收集了近半年以來的數(shù)據(jù)發(fā)現(xiàn)，女性用戶相對(duì)減少了20%（發(fā)生沖突），為什么會(huì)減少20%的女性用戶（提出疑問），根據(jù)我的調(diào)查研究發(fā)現(xiàn)原因是改版后整個(gè)產(chǎn)品色調(diào)偏男性化，由于我們產(chǎn)品的受眾群體大多是女性用戶，男女比例為1:3，所以在 v.2.1 的改版中我將整個(gè)產(chǎn)品色調(diào)改為偏女性化的方向（給出解決方案）”。

同樣，我寫這個(gè)章節(jié)的思路就可以這樣理解：設(shè)計(jì)師們工作中通常會(huì)面臨述職、面試以及寫文章等情況（交代場(chǎng)景），但是往往很多設(shè)計(jì)師不知道如何去表達(dá)，思路也不是很清晰，導(dǎo)致述職無效、面試失敗等情況（發(fā)生沖突），要如何避免這種情況發(fā)生？如何鍛煉自己的表達(dá)能力？（提出疑問），那就要多通過 SCQA 模型在生活工作中去練習(xí)表達(dá)（給出解決方案）。

生活能力(Lives)

最后是生活能力，設(shè)計(jì)不是工作的全部，工作不是生活的全部，我們應(yīng)該過好自己的生活，產(chǎn)品設(shè)計(jì)都是從生活中獲得靈感和啟發(fā)的，我們?nèi)绾螌?duì)待自己的生活，我們就會(huì)得到怎樣的反饋。多陪伴下自己的家人、培養(yǎng)一個(gè)興趣愛好、保持學(xué)習(xí)新鮮事物的動(dòng)力等等，成為一個(gè)有趣的靈魂。往往設(shè)計(jì)師能從多樣化的生活中發(fā)現(xiàn)靈感和啟發(fā)，也能從生活中找到不同用戶的痛點(diǎn)和感知；如何做一名好的設(shè)計(jì)師，就是帶著同理心去做設(shè)計(jì)，如何帶著同理心做設(shè)計(jì)，就是將自己當(dāng)作用戶，而用戶是融入到生活中的。下面我就來例舉兩個(gè)通過生活中的啟發(fā)改變產(chǎn)品設(shè)計(jì)的例子。

· 用戶擁有感

在購買星巴克的時(shí)候，為什么服務(wù)員要把顧客的名字寫在杯子上呢？難道僅僅是為了分辨嘛？像其他奶茶店一樣貼一張打印好的便簽不就好了么？去宜家購置家具的時(shí)候，為什么要讓顧客自己親手組裝家具？可口可樂為什么可以定制自己城市的易拉罐？因?yàn)檫@一切都是要給用戶塑造擁有感，人是一種很不理性的生物，只要先拿到一個(gè)東西，就會(huì)覺得自己擁有這個(gè)東西，就不想放掉它了，這就是擁有感最根本的示范。從心理學(xué)的角度來說這被稱為稟賦效應(yīng)，意思就是我們對(duì)于自己所擁有東西的價(jià)值往往會(huì)看得更重。這就是為什么小時(shí)候玩的玩具、收集的畫冊(cè)、穿的衣服都已經(jīng)沒什么用了，我們還要留著當(dāng)紀(jì)念的原因。因?yàn)槲覀兊娜诵詫?duì)于擁有感非常執(zhí)著，對(duì)于自己得到的東西非常迷戀，當(dāng)我們覺得要失去它的時(shí)候，會(huì)有一種損失感，覺得很不舍，會(huì)覺得心里很難受，這就是稟賦效應(yīng)在我們身上發(fā)生了最明顯的效果。

而這樣的營(yíng)銷策略被用到產(chǎn)品設(shè)計(jì)當(dāng)中，例如前段時(shí)間很火的軟件 Zepeto，每個(gè)人都不一樣的生成圖片洗刷著我們的朋友圈；例如每年年末的賬單、網(wǎng)易云音樂總結(jié)等等，賬單它只是一份賬單，根據(jù)不同用戶生成不同的賬單，也就賦予了不同的意義；又例如各種 H5 性格測(cè)試生成的分享卡等等，這些都是產(chǎn)品設(shè)計(jì)中從生活中營(yíng)銷案例中汲取經(jīng)驗(yàn)的體現(xiàn)。

· 線下導(dǎo)購轉(zhuǎn)線上

每當(dāng)我們?nèi)サ缴虉?chǎng)線下商店的時(shí)候，導(dǎo)購員和我們素未謀面，但是卻可以通過我們的大致年齡、穿著、性別等因素推斷我們需要什么樣的產(chǎn)品，然后向我們推銷對(duì)應(yīng)的產(chǎn)品，如若剛好觸動(dòng)我們的需求，于是我們就會(huì)發(fā)生購買這個(gè)行為。生活中線下導(dǎo)購的方式也被運(yùn)用到線上導(dǎo)購的產(chǎn)品中，同樣平臺(tái)和用戶素未謀面，可是可以通過掌握大數(shù)據(jù)，分析用戶近半年、近一個(gè)月的購買和瀏覽商品的數(shù)據(jù)，結(jié)合相對(duì)應(yīng)季節(jié)等因素推送給用戶所需要的產(chǎn)品。比如我平時(shí)經(jīng)常瀏覽一些潮牌個(gè)性的衣物，現(xiàn)在正值冬季，想買一件冬季穿的棉衣，那么當(dāng)我打開淘寶的時(shí)候，系統(tǒng)會(huì)推送一些潮牌大衣等冬季衣物在首頁，我正好有這個(gè)需求又符合我的口味愛好，自然而然就會(huì)點(diǎn)進(jìn)去購買了。

有一條創(chuàng)業(yè)準(zhǔn)則是這樣說的：“如果有點(diǎn)兒閑錢，還有點(diǎn)時(shí)間，但又找不到商機(jī)，最好的辦法就是去鬧市、電梯、小區(qū)人流量最高的那個(gè)大門口，端杯茶，靜靜的聽人們抱怨?！?，谷歌、蘋果公司的設(shè)計(jì)思維首當(dāng)其沖的就是帶著同理心去設(shè)計(jì)、去制定設(shè)計(jì)策略，同理心來源于生活，而這一切只有設(shè)計(jì)師把自己的生活經(jīng)營(yíng)好，才能從當(dāng)中獲得啟發(fā)和感悟，然后代入自己的設(shè)計(jì)理念當(dāng)中，設(shè)計(jì)出真正能根本解決問題的產(chǎn)品。

其次偶爾會(huì)從網(wǎng)上看到或者聽說 XX 設(shè)計(jì)師猝死，XX 設(shè)計(jì)師檢驗(yàn)出 XX 疾病等等，每每看到此類消息都會(huì)感到痛心，工作不是生活的全部，如果連自己的工作和生活都處理不好的話，那么說明這個(gè)人生活能力真的很糟糕。如果一個(gè)人整天筋疲力盡打不起精神，那么他的工作會(huì)做得好嘛？所以在這請(qǐng)求大家合理安排好工作時(shí)間，勞逸結(jié)合，多鍛煉身體，多花些時(shí)間陪伴父母、家人，這樣才能帶著健康的身心去工作，從而取得更好的工作成果，形成一個(gè)良性的循環(huán)。你怎樣對(duì)待生活，生活就會(huì)怎樣對(duì)待你。

作者：雨灰    來源：站酷

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加藍(lán)小助，微信號(hào):ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

一、標(biāo)簽欄是什么？

標(biāo)簽欄也叫Tab Bar，是移動(dòng)端應(yīng)用程序中最常用的UI元素之一。標(biāo)簽欄出現(xiàn)在應(yīng)用程序屏幕的底部，可以讓用戶在應(yīng)用程序中的不同部分之間快速切換。標(biāo)簽欄可以是半透明的，也可以具有背景色，在所有屏幕方向上都保持相同的高度，并且在顯示鍵盤時(shí)被隱藏。標(biāo)簽欄可以包含任意數(shù)量的標(biāo)簽，但是可見標(biāo)簽的數(shù)量根據(jù)設(shè)備的大小和方向而變化。如果由于水平空間有限而無法顯示某些選項(xiàng)卡，則最終的可見選項(xiàng)卡將變?yōu)椤案唷边x項(xiàng)卡，該選項(xiàng)卡將在單獨(dú)屏幕上的列表中顯示其他選項(xiàng)卡。

標(biāo)簽欄在任何目標(biāo)頁面中的高度是不變的，iOS 規(guī)定它的高度為98px(iOS @2x)。但因?yàn)?iPhone X 之后的全面屏手機(jī)引入了 Home Bar ，所以在進(jìn)行界面適配的時(shí)候，請(qǐng)務(wù)必要加上 Home Bar 自身的68px高度。別讓Home Bar遮擋標(biāo)簽欄中標(biāo)簽的展示，這會(huì)讓兩個(gè)控件發(fā)生操作手勢(shì)沖突。

二、為什么標(biāo)簽欄要放于底部？

史蒂文·霍伯（Steven Hoober）在對(duì)移動(dòng)設(shè)備使用情況的研究中發(fā)現(xiàn)，人們會(huì)根據(jù)自己的設(shè)備，需求和背景以多種方式觸摸手機(jī)，觸摸手機(jī)屏幕或按鈕的用戶分三種基本方式：抱著手機(jī)的人占36%、兩只手使用手機(jī)的人占15%，而49％的人依靠一只手在手機(jī)上完成事情，除此之外75％的用戶僅用一個(gè)拇指觸摸屏幕。

在下圖中，出現(xiàn)在手機(jī)屏幕上的圖表是近似覆蓋圖，其中的顏色表示用戶的拇指可以接觸到哪些區(qū)域以與屏幕交互。綠色表示用戶可以輕松到達(dá)的區(qū)域；黃色，需要伸展的區(qū)域；紅色區(qū)域，要求用戶改變握持設(shè)備的方式。

這意味著：

將常用的“行為”放在屏幕底部很重要，因?yàn)橹恍枰绘I式的交互即可輕松到達(dá)這些“行為”。

三、標(biāo)簽欄的三大原則

底部標(biāo)簽欄設(shè)計(jì)應(yīng)當(dāng)遵循三大原則：結(jié)構(gòu)合理、位置清晰、可預(yù)測(cè)行為。

3.1 結(jié)構(gòu)合理

為了讓標(biāo)簽欄表現(xiàn)清晰，兩大平臺(tái)在規(guī)范里都對(duì)標(biāo)簽數(shù)量給出了相同的建議：建議標(biāo)簽欄內(nèi)的標(biāo)簽個(gè)數(shù)為3個(gè)至5個(gè)。因?yàn)闃?biāo)簽過多會(huì)使每一個(gè)單元標(biāo)簽的可觸空間降低，人們?cè)谖锢砩希ㄊ种福╇y以點(diǎn)擊或誤觸，除此之外還會(huì)增加應(yīng)用程序結(jié)構(gòu)的復(fù)雜性。

注：如果你因?yàn)楫a(chǎn)品結(jié)構(gòu)非常繁雜，標(biāo)簽數(shù)量想要達(dá)到更多，那么在 iOS 中就會(huì)給你強(qiáng)硬處理，iOS 人機(jī)交互規(guī)范告訴產(chǎn)品設(shè)計(jì)者們：標(biāo)簽欄雖然可以包含任意數(shù)量的標(biāo)簽，但可見標(biāo)簽的數(shù)量會(huì)根據(jù)設(shè)備的大小(平板或手機(jī))和方向(豎屏或橫屏)而自適應(yīng)變化。如果由于水平空間有限而無法顯示某些標(biāo)簽時(shí)，最后的一個(gè)可見標(biāo)簽將被會(huì)被系統(tǒng)強(qiáng)行轉(zhuǎn)換為“更多”選項(xiàng)，需要用戶點(diǎn)擊“更多”選項(xiàng)之后，系統(tǒng)才將在單獨(dú)屏幕上的列表中顯示其他被隱藏的標(biāo)簽。

3.2 位置清晰

“我在哪里？” 是用戶成功導(dǎo)航所需要回答的一個(gè)基本問題，我們應(yīng)當(dāng)采用適當(dāng)?shù)囊曈X提示讓用戶知道目前所處的位置（選中狀態(tài)）。在APP應(yīng)用中我們常見的處理方式有4種：改變圖標(biāo)樣式、改變大小、改變顏色、改變展示樣式。它們并不一定是獨(dú)立存在的，可以同時(shí)作用于一個(gè)標(biāo)簽。

3.3 可預(yù)測(cè)行為

選取每個(gè)底部導(dǎo)航選項(xiàng)都有通向它的目的地，底部導(dǎo)航應(yīng)當(dāng)將用戶直接引導(dǎo)到相關(guān)頁面，不應(yīng)該打開菜單或其他窗口。如果在某些情況下可以使用標(biāo)簽，但在其他情況下則無法使用，則應(yīng)用程序的界面將變得不穩(wěn)定且不可預(yù)測(cè)。我們要確保所有選項(xiàng)卡始終處于啟用狀態(tài)，并說明為什么選項(xiàng)卡內(nèi)容不可用。例如造作新家APP，當(dāng)用戶處于未登錄狀態(tài)時(shí)，就不能查看底部標(biāo)簽“我的”信息，當(dāng)我點(diǎn)擊標(biāo)簽“我的”，就會(huì)彈出快捷登陸界面，這樣就能讓用戶明白不能使用的原因是賬號(hào)未登陸，從另一層面講也很好的引導(dǎo)了用戶注冊(cè)與登陸。

注：不要使用標(biāo)簽欄為用戶提供對(duì)當(dāng)前屏幕或應(yīng)用程序模式下的元素起作用的控件，如果需要提供控件，請(qǐng)使用工具欄。

四、標(biāo)簽欄的基礎(chǔ)規(guī)范

在設(shè)計(jì)標(biāo)簽欄前我們首先要了解它的基礎(chǔ)規(guī)范，在保證基礎(chǔ)規(guī)范合理的情況下再去進(jìn)行設(shè)計(jì)。

4.1 圖標(biāo)視覺大小

為了保證圖標(biāo)的尺寸大小一致性，我們往往會(huì)建立基礎(chǔ)的網(wǎng)格尺寸來進(jìn)行繪制圖標(biāo)，下面就以常用的24x24為大家舉例：

網(wǎng)格包含2px出血位。這樣可以確保圖標(biāo)在導(dǎo)出時(shí)將保留其所需的比例和周圍的空白區(qū)域，同時(shí)還能夠很好的平衡圖標(biāo)的視覺重心。

最后加入圖標(biāo)的keyline，keyline由圓形，正方形，矩形，正交，三角形和對(duì)角線組成。它可以為您提供圖標(biāo)集中基本形狀或比例的一致大小。這使創(chuàng)建視覺上的穩(wěn)定變得更加容易，并有助于在設(shè)計(jì)相似比例的圖標(biāo)時(shí)有共同的參考準(zhǔn)則。

在24尺寸下的keyline構(gòu)成如下（24尺寸下的出血區(qū)域?yàn)?）：

當(dāng)把圖標(biāo)畫在網(wǎng)格上時(shí)可以很好的規(guī)范圖標(biāo)，讓它們從整體的視覺上看著統(tǒng)一規(guī)范。

4.2 標(biāo)簽欄布局

標(biāo)簽的數(shù)量以及標(biāo)簽的展示形式?jīng)Q定了標(biāo)簽的布局形式，標(biāo)簽的常見布局一共有2種：屏幕等分、圖標(biāo)左右間距相等。

4.2.1 屏幕等分

屏幕等分是最常見的標(biāo)簽布局形式，因?yàn)椴还芩嬖诙嗌賵D標(biāo)，都可以用它進(jìn)行屏幕劃分，計(jì)算方法也十分簡(jiǎn)單，屏幕的寬度除以標(biāo)簽個(gè)數(shù)就是每列寬度。采用此等劃分的案例有：懂車帝、今日頭條。

4.2.2 圖標(biāo)左右間距相等

圖標(biāo)左右距離相等多用在標(biāo)簽數(shù)量為3個(gè)的情況下，計(jì)算方法是先去除中間圖標(biāo)的尺寸，然后再左右平均劃分等距。相對(duì)于屏幕等分，圖標(biāo)左右間距相等劃分更為緊湊。

4.3 標(biāo)簽欄熱點(diǎn)區(qū)域

根據(jù)菲茲定律，使用指點(diǎn)設(shè)備到達(dá)一個(gè)目標(biāo)的時(shí)間，與當(dāng)前設(shè)備位置和目標(biāo)位置的距離（D）和目標(biāo)大小（S）有關(guān)。標(biāo)簽欄作為向用戶展現(xiàn)產(chǎn)品框架的關(guān)鍵控件，熱點(diǎn)區(qū)域（可點(diǎn)擊區(qū)域范圍）的設(shè)定一定要合理。底部圖標(biāo)尺寸較小，如果將圖標(biāo)作為熱點(diǎn)區(qū)域，那么可點(diǎn)擊區(qū)域就偏小，很可能出現(xiàn)用戶點(diǎn)擊不到的情況，正確的做法是以標(biāo)簽欄的布局作為基礎(chǔ)設(shè)定，在標(biāo)簽相鄰的部分劃出一定區(qū)域作為不可點(diǎn)擊區(qū)域，以免用戶誤操作，參考如下，紅色為可熱點(diǎn)區(qū)域，藍(lán)色為不可點(diǎn)擊區(qū)域：

五、標(biāo)簽欄的圖標(biāo)樣式

在產(chǎn)品設(shè)計(jì)中，不同樣式的圖標(biāo)會(huì)給人不同的感受，隨著APP風(fēng)格越來越簡(jiǎn)潔化，標(biāo)簽欄圖標(biāo)風(fēng)格緊緊地跟著界面的風(fēng)格而改變。經(jīng)過長(zhǎng)時(shí)間的沉淀，標(biāo)簽欄圖標(biāo)常見的默認(rèn)設(shè)計(jì)樣式一共可分為四類：線性圖標(biāo)、面性圖標(biāo)、線性+面性圖標(biāo)、輕質(zhì)感圖標(biāo)。

5.1 線性圖標(biāo)

線性圖標(biāo)通過線來塑造輪廓，在圖標(biāo)設(shè)計(jì)中使用的線有粗細(xì)之分，常用的App圖標(biāo)設(shè)計(jì)線的粗細(xì)一般有2px、3px、4px，不同的線條粗細(xì)所帶來的視覺感受也不同，我在“如何讓你的圖標(biāo)具有說服力”文章中提到過，線條越粗那么圖標(biāo)的性格就越活潑、粗曠，線條越細(xì)圖標(biāo)性格就越精致、商務(wù)，圖標(biāo)使用描邊的粗細(xì)可以根據(jù)產(chǎn)品的氣質(zhì)來決定。

選中狀態(tài)：當(dāng)選中狀態(tài)為高亮線性圖標(biāo)時(shí)，選中狀態(tài)的圖標(biāo)顏色會(huì)與默認(rèn)狀態(tài)的圖標(biāo)顏色形成較強(qiáng)的反差，但由于線和線的差異性并不強(qiáng)，線性圖標(biāo)沒有面性圖標(biāo)更具吸引力（引導(dǎo)性），即使加入了高亮色識(shí)別度也不及面性強(qiáng)。airbnb在處理線性圖標(biāo)選中狀態(tài)時(shí)就考慮到了這一點(diǎn)，選中狀態(tài)下不僅對(duì)圖標(biāo)的顏色做了較大變化，還加大了圖標(biāo)及文字的描邊粗細(xì)，從一定程度上加強(qiáng)了圖標(biāo)的引導(dǎo)性。（注：線性狀態(tài)的圖標(biāo)選中狀態(tài)也可以變?yōu)槊嫘詧D標(biāo)或線性+面性圖標(biāo)）

5.2面性圖標(biāo)

面性圖標(biāo)是通過面來塑造形體的圖標(biāo)，采用了剪影的設(shè)計(jì)形式，通過線或者面去切割基礎(chǔ)輪廓面，通過分型來塑造圖標(biāo)的體積感，面性圖標(biāo)的承載信息相對(duì)與線性圖標(biāo)來說更重，更具有引導(dǎo)性。

選中狀態(tài)：面性圖標(biāo)的選中狀態(tài)為高亮面性圖標(biāo)，顏色可以為純色、也可以為漸變、透明。愛奇藝的選中狀態(tài)就采用了高亮面性圖標(biāo)的展現(xiàn)方式，除了把圖標(biāo)底色及文字的顏色加深以外，還加入了品牌色，甚至為了讓“會(huì)員”標(biāo)簽更加突出，還單獨(dú)對(duì)“會(huì)員”標(biāo)簽的顏色進(jìn)行了修改。

5.3線性+面性圖標(biāo)

線面結(jié)合圖標(biāo)相較單一的線性圖標(biāo)或單一的面性圖標(biāo)樣式更加豐富、也更富有趣味性。從設(shè)計(jì)的角度上說，由于元素的多樣化，設(shè)計(jì)更容易獲得好的效果。相反，如果運(yùn)用不當(dāng)會(huì)顯得圖標(biāo)非常雜亂，如何有效的把控好兩者之間的過度是關(guān)鍵。

選中狀態(tài)：線性圖標(biāo)的選中狀可以為高亮的線性+面性圖標(biāo)。懂車帝在處理標(biāo)簽選中狀態(tài)時(shí)就把圖標(biāo)底部加入了高亮黃色圓形塊狀，即保存了線性也添加了面，加深了選中狀態(tài)的視覺重量，更加明確的讓用戶感知自己所處的位置。

5.4輕質(zhì)感圖標(biāo)

輕質(zhì)感圖標(biāo)層次簡(jiǎn)單，用色素雅干凈，采用輕投影、輕漸變的方法設(shè)計(jì)，這類圖標(biāo)具有一定的立體感，能給人輕盈、簡(jiǎn)潔、精致的感覺。輕質(zhì)感圖標(biāo)在標(biāo)簽欄中運(yùn)用的較少，在特殊情況下才會(huì)使用，例如盒馬，就把輕質(zhì)感圖標(biāo)用在了首頁標(biāo)簽與盒馬小鎮(zhèn)標(biāo)簽，首頁標(biāo)簽的引入是為了讓用戶加強(qiáng)對(duì)品牌形象的認(rèn)知，而盒馬小鎮(zhèn)標(biāo)簽的引入則是為了加強(qiáng)圖標(biāo)的引導(dǎo)性。

*圖標(biāo)樣式的常用變化（選中與未選中）

在我調(diào)研上百種應(yīng)用程序中，發(fā)現(xiàn)主流的APP標(biāo)簽欄樣式變化大致分為六種：線性-線性、線性-面性、線性-線+面、面性-面性、面性-線+面、線+面-線+面。雖然標(biāo)簽的樣式變化繁多，但是使用率最多的是“由線性轉(zhuǎn)面性”標(biāo)簽。

六、標(biāo)簽欄的展示形式

標(biāo)簽欄的不同展示形式會(huì)給用戶帶來不同的使用習(xí)慣和使用感受，常見的標(biāo)簽展示形式有四種：圖標(biāo)+文字、純圖標(biāo)、純文字、舵式。

6.1圖標(biāo)+文字

圖標(biāo)+文字是最常見的標(biāo)簽展示形式，為了讓用戶能夠很好的明白圖標(biāo)的意圖，所以在圖標(biāo)下方會(huì)配有文字提示，這樣就能大大的降低誤讀的可能性。正因?yàn)橛形淖痔崾?，所以沒有必要過于擔(dān)心圖標(biāo)的識(shí)別性問題，那么圖標(biāo)就可以得到更深的延展，可以做的更有趣，更具有產(chǎn)品氣質(zhì)，甚至可以代入更深層次的動(dòng)效。

例如東家·守藝人APP，專門售賣各種手藝人的親手制作的各種藝術(shù)品，面向的對(duì)象是喜歡傳統(tǒng)文化的人群，在這樣的背景下東家結(jié)合宋體的筆畫（筆畫拆分）把圖標(biāo)設(shè)計(jì)的更加傳統(tǒng)、古樸，創(chuàng)造出具有東方韻味且極具形式感的圖標(biāo)設(shè)計(jì)。

6.2純圖標(biāo)

采用純圖標(biāo)展示形式的產(chǎn)品比較少見，純圖標(biāo)樣式的最大缺點(diǎn)就是識(shí)別性低，沒有文字說明會(huì)導(dǎo)致用戶很難找到自己想要去的位置，也不明確自己所處的狀態(tài)。所以我們?nèi)绻O(shè)計(jì)純圖標(biāo)形式，那么必須要考慮到圖標(biāo)的識(shí)別性問題，間接的舍棄掉圖標(biāo)更多的延展性，讓圖標(biāo)變得更規(guī)矩。（識(shí)別性的提升我之前寫的圖標(biāo)文章中提到過，主要可以從大眾認(rèn)知隱喻與真實(shí)世界映射兩個(gè)方向出發(fā)去提升）

使用純圖標(biāo)樣式的產(chǎn)品特征：產(chǎn)品單一、領(lǐng)域垂直、小眾化、用戶群體接受度高。即使?jié)M足這些條件下產(chǎn)品使用純圖標(biāo)標(biāo)簽，用戶第一次使用往往也是比較迷茫，需要等用戶熟悉后才會(huì)得到好轉(zhuǎn)，所以一定要慎用。除此之外不太建議用于電商、視頻、學(xué)習(xí)、社交等領(lǐng)域。

對(duì)于我們?cè)O(shè)計(jì)師來說使用純圖標(biāo)樣式的產(chǎn)品中最為熟悉的就是花瓣了。

6.3純文字（部分含標(biāo)識(shí)）

采用純文字展示形式能夠更直觀的讓用戶進(jìn)行操作，遵循簡(jiǎn)單易用的原則。適合用戶群體跨度較大的產(chǎn)品，多用于直播類、內(nèi)容類、簡(jiǎn)單工具類APP中。缺點(diǎn)也顯而易見，圖標(biāo)樣式比較單一，沒法加入更多趣味化、具有產(chǎn)品特性的元素到標(biāo)簽中。

采用純文字展示形式的產(chǎn)品有很多，最熟悉不過的就是抖音，抖音的標(biāo)簽?zāi)J(rèn)狀態(tài)下采用了純文字形式，選中狀態(tài)則把文字高亮顯示，并且底部加入了圓角矩形，對(duì)于用戶群體跨度較大的產(chǎn)品，這樣的展現(xiàn)形式再好不過了。（抖音在途中改用過圖標(biāo)+文字格式，不過后面也放棄了，我當(dāng)時(shí)用著圖標(biāo)+文字類型的抖音，的確感覺太奇怪?。?/span>

6.4舵式

舵式標(biāo)簽可以看為底部標(biāo)簽式導(dǎo)航的一種變體。它在后者的基礎(chǔ)上，突出強(qiáng)調(diào)了一個(gè)標(biāo)簽并且放在中間的位置，樣子看起來像攢了一個(gè)舵，所以取名為舵式標(biāo)簽。一般舵式標(biāo)簽的顏色、大小等視覺表現(xiàn)會(huì)被設(shè)計(jì)得和其他普通標(biāo)簽有所差異，通過視覺對(duì)比的方式吸引用戶關(guān)注。舵式標(biāo)簽通常和產(chǎn)品框架體現(xiàn)無關(guān)，大多數(shù)應(yīng)用程序使用舵式標(biāo)簽是用來承載系統(tǒng)功能。起初是因?yàn)樯鐓^(qū)類APP為了激勵(lì)和方便用戶隨時(shí)隨地地輸出UGC內(nèi)容，所以把觸發(fā)用戶創(chuàng)作/發(fā)布的功能按鈕放置在標(biāo)簽欄中。

因?yàn)槎媸綐?biāo)簽可以很好地承載產(chǎn)品的重要功能，而被許多的應(yīng)用程序設(shè)計(jì)所采用，經(jīng)過越來越多的應(yīng)用采用舵式標(biāo)簽，使用的形式也越來越多樣，它現(xiàn)在并不再單一地用于承載產(chǎn)品功能，而是配合營(yíng)銷場(chǎng)景、付費(fèi)場(chǎng)景，給產(chǎn)品的變現(xiàn)、拉新賦能。拼多多就把它拉新的主要入口作用到了舵式圖標(biāo)上，并且為了讓圖標(biāo)更加顯目，甚至把圖標(biāo)做成了輕質(zhì)感的形式體現(xiàn)，同時(shí)也通過2像素的線性圖標(biāo)減弱其他4個(gè)標(biāo)簽的引導(dǎo)性。

七、賦予標(biāo)簽更多內(nèi)容

標(biāo)簽欄不僅是向用戶展現(xiàn)產(chǎn)品框架的關(guān)鍵控件，還可以貫穿整個(gè)產(chǎn)品的商業(yè)價(jià)值的體現(xiàn)，它是連接著整個(gè)產(chǎn)品最重要的頂層信息。如果想要讓標(biāo)簽變得更加豐富，想要標(biāo)簽內(nèi)容中含有更多的情感需求、 商業(yè)需求、運(yùn)營(yíng)需求，那么我們可以重點(diǎn)從這兩個(gè)層面考慮：視覺層面、交互層面。

7.1視覺層面

在視覺層面上我們可以迎合用戶的偏好與期望，通過豐富視覺體驗(yàn)的方法來增加內(nèi)容的觀賞性，這樣不僅能夠很好的向用戶傳遞著產(chǎn)品調(diào)性還能吸引用戶關(guān)注以及引導(dǎo)用戶進(jìn)行操作。

7.1.1設(shè)計(jì)裝飾性圖標(biāo)

裝飾性圖標(biāo)僅僅是用來提升整個(gè)界面的視覺體驗(yàn)，通過豐富視覺體驗(yàn)的方法來增加內(nèi)容的觀賞性，這樣不僅可以吸引并留住用戶，還可以讓整個(gè)用戶體驗(yàn)更加積極。

&整體裝飾圖標(biāo)

整體裝飾性圖標(biāo)的出現(xiàn)往往是為了滿足情感需求與商業(yè)需求，整體裝飾圖標(biāo)并不是一直存在的，它的特點(diǎn)是季節(jié)性與周期性，并且它并不具備任何功能性。

從情感需求出發(fā)設(shè)計(jì)裝飾圖標(biāo)：例如世界杯火熱進(jìn)行時(shí)，優(yōu)酷為了滿足用戶的情感需求，就把標(biāo)簽欄的圖標(biāo)全部替換為帶有世界杯元素的圖案，讓用戶與其產(chǎn)生情感的共鳴。

從商業(yè)需求出發(fā)設(shè)計(jì)裝飾圖標(biāo)：現(xiàn)在的年貨節(jié)，之前的雙十二、雙十一、618等，每到節(jié)日促銷活動(dòng)的時(shí)候，很多電商應(yīng)用都會(huì)換上裝飾性圖標(biāo)，例如一號(hào)店，在過年前就把標(biāo)簽欄圖標(biāo)全部改為含帶過年氣息的元素，提前來預(yù)熱活動(dòng)，引導(dǎo)用戶消費(fèi)。

&單個(gè)裝飾性圖標(biāo)

單個(gè)裝飾性圖標(biāo)的出現(xiàn)大部分都是為了滿足運(yùn)營(yíng)需求，運(yùn)營(yíng)為了推出某個(gè)活動(dòng)或功能，往往會(huì)單獨(dú)裝飾某個(gè)圖標(biāo)的設(shè)計(jì)視覺，以便于提高圖標(biāo)的引導(dǎo)性，最直接的例子就是我剛才提到過的拼多多。

7.1.2加入品牌基因

我們可以在標(biāo)簽中加入更多的品牌基因，讓其與品牌產(chǎn)生聯(lián)動(dòng)性，這一形式是大部分應(yīng)用程序都在做的，我們可以從這6個(gè)層面加入品牌基因：品牌顏色、品牌LOGO、品牌元素、品牌名稱、品牌性格、品牌吉祥物。

&品牌顏色

色彩是圖標(biāo)設(shè)計(jì)中重要的構(gòu)成元素之一，我們可以直接提取品牌色作為圖標(biāo)設(shè)計(jì)視覺元素。例如站酷，站酷的品牌色是黃色，標(biāo)簽欄的圖標(biāo)（選中狀態(tài)）就提取了品牌的黃色，讓其與品牌調(diào)性高度一致。

當(dāng)然品牌顏色除了可以直接用外，還可以在提取時(shí)適當(dāng)調(diào)整色彩的飽和度、明度，做更多的形式變化。例如懂車帝，就在原有的黃色基礎(chǔ)上做了些許調(diào)整，圖標(biāo)采用黃色透明漸變的處理方式，在與品牌顏色呼應(yīng)的同時(shí)，使得整個(gè)圖標(biāo)更加精致、有活力。

&品牌LOGO

提取品牌LOGO是最常用的使用方式，我們從品牌中提取出來的圖標(biāo)一般運(yùn)用在APP首頁標(biāo)簽。因?yàn)槭醉撌茿PP中最重要的頁面，也是進(jìn)入APP默認(rèn)的頁面，把首頁圖標(biāo)替換成品牌LOGO，能反復(fù)加強(qiáng)了用戶對(duì)App的LOGO印象，這樣不但使App內(nèi)外形成了視覺聯(lián)系，同時(shí)也二次傳遞了品牌形象。例如大眾點(diǎn)評(píng)，它的首頁標(biāo)簽就用了品牌LOGO，同時(shí)也使用了品牌顏色。

&品牌元素

我們可以在品牌中提取它識(shí)別性較強(qiáng)的局部元素作為圖標(biāo)。例如虎牙直播，它就提取了品牌卡通形象的外輪廓作為首頁圖標(biāo)。

品牌提取的元素并不只是所見到的品牌視覺形象，還可以提取與品牌內(nèi)容強(qiáng)相關(guān)的元素。例如QQ音樂，它并沒有把它的品牌LOGO直接放于其中，而是通過大眾所熟知的音符作為首頁圖標(biāo)。

&品牌名稱

如果你的品牌還不為大眾所熟知，那么為了強(qiáng)化用戶對(duì)品牌名稱的認(rèn)知，可以把品牌名稱直接放入標(biāo)簽欄中。例如MONO，就把它的名稱分為四個(gè)字母分別放在了4個(gè)標(biāo)簽內(nèi)，需要注意的是這類圖標(biāo)不能單獨(dú)出現(xiàn)，因?yàn)樗旧聿痪邆渥R(shí)別性與引導(dǎo)性，必須配合文字一起出現(xiàn)，這樣才能讓用戶理解標(biāo)簽的真正功能，我們不能為了設(shè)計(jì)而設(shè)計(jì)。

&品牌性格

圖標(biāo)風(fēng)格可以與品牌性格保持一致，一套帶有濃厚品牌感的圖標(biāo)，會(huì)讓人記憶猶新。例如：每日故宮，它的圖標(biāo)就非常具有特色，結(jié)合了品牌的性格以及定位，加入了眾多的古代中國(guó)元素，整體看起來有股濃濃的古韻之風(fēng)。

&品牌吉祥物

現(xiàn)在大部分品牌都會(huì)含帶吉祥物，我們可以在設(shè)計(jì)圖標(biāo)時(shí)提取吉祥物的外形，把它用于產(chǎn)品的標(biāo)簽中。例如盒馬，它就把吉祥物做為了底部標(biāo)簽，不過需要我們注意的是如果吉祥物的風(fēng)格與我們的圖標(biāo)風(fēng)格差別較大，我們就需要對(duì)它做風(fēng)格化的處理，不然看起來就十分突兀。（盒馬對(duì)吉祥物做了輕質(zhì)感的風(fēng)格化處理）

7.1.3讓用戶自定義

讓用戶自定義的標(biāo)簽現(xiàn)在越來越常見，而每個(gè)產(chǎn)品對(duì)其思考的層面也都有所不同。自定義標(biāo)簽往往出現(xiàn)在個(gè)人中心，它會(huì)根據(jù)用戶上傳的頭像或用戶的捏臉生成圖標(biāo)。

&用戶頭像

目前市面上很多APP都把用戶上傳的頭像作為了個(gè)人中心標(biāo)簽展示，例如我們常用的百度網(wǎng)盤就采用了此方案，當(dāng)用戶注冊(cè)未上傳用戶頭像時(shí)，會(huì)默認(rèn)顯示系統(tǒng)標(biāo)簽，當(dāng)用戶上傳完后就會(huì)顯示用戶頭像，并且如果你是會(huì)員，還會(huì)把會(huì)員標(biāo)示顯示在標(biāo)簽的右上方，彰顯會(huì)員用戶的尊貴性。

我們可以很明顯的發(fā)現(xiàn)百度網(wǎng)盤的底部標(biāo)簽?zāi)J(rèn)狀態(tài)為線性圖標(biāo)，而個(gè)人中心不管默認(rèn)狀態(tài)還是選擇狀態(tài)都為面性圖標(biāo)，所以如果你想要加強(qiáng)個(gè)人中心的引導(dǎo)性，那么可以采取此方案。

&捏臉

捏臉功能作為SOUL的一大特色，捏臉的虛擬形象賦予了真實(shí)人格屬性，加強(qiáng)了社交的傳播性，所以SOUL決定把用戶自定義的捏臉放于個(gè)人中心標(biāo)簽中。

7.2交互層面

除了對(duì)標(biāo)簽做視覺的提升外，我們還可以對(duì)其加入合理的交互效果，一方面可以提升用戶在使用產(chǎn)品過程中的樂趣，另一方面還可以為用戶提供更多便利，從而增強(qiáng)用戶體驗(yàn)。

7.2.1標(biāo)簽功能切換

在不同的狀態(tài)下點(diǎn)擊標(biāo)簽的功能也不一樣，一個(gè)標(biāo)簽可承載2到3個(gè)功能，可以滿足不同狀態(tài)下的用戶需求。

&承載2個(gè)功能案例

SOUL的廣場(chǎng)標(biāo)簽（進(jìn)入選取頁+刷新）

SOUL的廣告標(biāo)簽承載了2個(gè)功能，當(dāng)你處于其他標(biāo)簽時(shí)，點(diǎn)擊廣場(chǎng)標(biāo)簽則直接進(jìn)入到廣場(chǎng)頁面；當(dāng)你處于廣場(chǎng)頁面中時(shí)，再次點(diǎn)擊標(biāo)簽則會(huì)刷新整個(gè)頁面。

有貨的發(fā)現(xiàn)標(biāo)簽（進(jìn)入選取頁+上傳圖片）

有貨的發(fā)現(xiàn)標(biāo)簽也承載了2個(gè)功能，在設(shè)計(jì)上運(yùn)用的非常巧妙，當(dāng)你處于其他標(biāo)簽時(shí)，點(diǎn)擊發(fā)現(xiàn)標(biāo)簽則進(jìn)入到發(fā)現(xiàn)頁面；當(dāng)你在發(fā)現(xiàn)頁面時(shí)你的發(fā)現(xiàn)標(biāo)簽則變?yōu)榱松蟼鲌D片標(biāo)簽，可以點(diǎn)擊上傳圖片。

&承載3個(gè)功能案例

淘寶首頁標(biāo)簽（進(jìn)入選取頁+刷新+置頂）

淘寶的首頁標(biāo)簽同時(shí)承載了3個(gè)功能，當(dāng)你處于其他標(biāo)簽中，點(diǎn)擊首頁標(biāo)簽則直接進(jìn)入到首頁頁面；當(dāng)你在首頁頁面第一屏?xí)r，你點(diǎn)擊首頁標(biāo)簽則會(huì)刷新整個(gè)頁面；當(dāng)你滑過3分之1屏?xí)r，首頁標(biāo)簽的功能則變?yōu)橹庙?。所以在不同狀態(tài)下首頁標(biāo)簽也會(huì)具備不同的功能，并且每種狀態(tài)下的標(biāo)簽樣式也是不同。

愛奇藝首頁標(biāo)簽（進(jìn)入選取頁+到達(dá)指定位置+置頂）

愛奇藝的首頁標(biāo)簽也是同時(shí)承載了3個(gè)功能，不過它與淘寶有些許不同，愛奇藝并不能刷新頁面，而作為替換的功能是直接到達(dá)指定位置“猜你喜歡”。

7.2.2觸覺與聽覺

我們做的設(shè)計(jì)不要僅限于視覺所看到的，還要考慮到所觸摸的、所聽到的，我們可以利用觸覺與聽覺去輔助用戶確認(rèn)自己的選擇，當(dāng)然我們一定要合理利用，反之則會(huì)讓用戶感到十分反感。

&觸覺

西瓜視頻與今日頭條在點(diǎn)擊標(biāo)簽欄圖標(biāo)時(shí)手機(jī)就會(huì)發(fā)出輕微的震動(dòng)，給予了用戶很好的點(diǎn)擊反饋。

&聽覺

SOUL點(diǎn)擊星球標(biāo)簽時(shí)手機(jī)就會(huì)發(fā)出戀愛鈴聲，在SOUL的產(chǎn)品報(bào)告中，SOUL主要面對(duì)女性用戶，女性用戶約為男性用戶的2.4倍（女人更偏感性），并且它的主要需求是滿足測(cè)試、匹配、交友，所以戀愛鈴聲能夠很好的引起用戶的情感共鳴。不過鈴聲有利有弊，當(dāng)你在特定場(chǎng)景下使用SOUL時(shí)，點(diǎn)擊到星球標(biāo)簽周圍人也都能聽到戀愛鈴聲，實(shí)屬尷尬，所以我在特定場(chǎng)景下使用SOUL時(shí)都會(huì)默默的關(guān)掉聲音。

7.2.3標(biāo)簽動(dòng)畫

精彩的圖標(biāo)動(dòng)畫，對(duì)整體的設(shè)計(jì)具有畫龍點(diǎn)睛的作用，降低標(biāo)簽切換時(shí)的枯燥感，提升操作的愉悅度和期待感。甚至可以通過 tab 的動(dòng)畫設(shè)計(jì)給用戶傳達(dá)出整個(gè) APP 設(shè)計(jì)的品牌及理念。標(biāo)簽動(dòng)畫往往都比較簡(jiǎn)單，主要有：縮放、旋轉(zhuǎn)、顏色過渡、位移、抖動(dòng)、填充、線性軌跡、結(jié)合容器、元素介質(zhì)等。接下來我們來看看SOUl、虎牙、汽車之家是怎么做的。

&SOUL-彈性縮放+結(jié)合容器+線性軌跡

SOUL的底部標(biāo)簽欄運(yùn)用到了彈性動(dòng)畫、結(jié)合容器以及線性軌跡。帶有彈性縮放的標(biāo)簽反饋，讓整體的設(shè)計(jì)更加具有趣味性，相比線性縮放也更有視覺沖擊力。圖標(biāo)的運(yùn)動(dòng)規(guī)則：先從 0 放大到最大（數(shù)值根據(jù)實(shí)際情況設(shè)定），然后再回彈至正常大小。除了彈性動(dòng)畫外，它還結(jié)合了容器的元素對(duì)內(nèi)部進(jìn)行了顏色的替換以及單線條的軌跡動(dòng)畫。這樣的處理不僅趣味性十足，還強(qiáng)化了選中當(dāng)前狀態(tài)，整體標(biāo)簽切換的一致性也較高。

&虎牙-抖動(dòng)+趣味表達(dá)

虎牙一直是我比較喜歡的直播平臺(tái)，它的底部標(biāo)簽動(dòng)畫也是非常值得借鑒，運(yùn)用到的動(dòng)畫形式是抖動(dòng)與趣味表達(dá)。抖動(dòng)是通過圖標(biāo)的左右、上下快速位移或旋轉(zhuǎn)形成，整體的動(dòng)畫效果節(jié)奏較快，具有一定的速度感，使整個(gè)標(biāo)簽切換的情緒表達(dá)較為俏皮、可愛。除了抖動(dòng)外還在切換過程中代入了更多小元素的趣味表達(dá)，賦予了圖標(biāo)更多的性格，對(duì)我們的設(shè)計(jì)進(jìn)行再升華，從而提高整體設(shè)計(jì)的質(zhì)感和趣味。

&汽車之家-結(jié)合容器+細(xì)節(jié)晃動(dòng)

因?yàn)橛脩羧后w的不同，汽車之家在標(biāo)簽動(dòng)畫的設(shè)計(jì)上也相對(duì)簡(jiǎn)單、嚴(yán)謹(jǐn)，它的動(dòng)畫形式主要是結(jié)合容器與細(xì)節(jié)晃動(dòng)。選中效果由線切換為面，并加入了品牌底色，這樣能夠清晰的給用戶傳達(dá)當(dāng)前頁面。并且為了不使整體的切換效果變得生硬，在切換過程中采用了透明度與彈性縮放，讓其過渡的相對(duì)柔和。在細(xì)節(jié)的處理上也是非常用心，每個(gè)圖標(biāo)都帶有笑臉的形狀，間接的給用戶傳達(dá)“笑臉”信息，在選取標(biāo)簽時(shí)內(nèi)部形狀會(huì)輕微晃動(dòng)。整體來看汽車之家的標(biāo)簽動(dòng)效雖然偏向嚴(yán)謹(jǐn)，但是在細(xì)節(jié)上也給予用戶傳達(dá)了更多的情感。

作者：黑獅力    來源：站酷

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加藍(lán)小助，微信號(hào):ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

★目標(biāo)導(dǎo)向·B端產(chǎn)品的商業(yè)目標(biāo)

設(shè)計(jì)開始要了解設(shè)計(jì)的目標(biāo)，用戶的行為都是有「目標(biāo)動(dòng)機(jī)」的，B端產(chǎn)品的業(yè)務(wù)目標(biāo)往往都是為了為企業(yè)或個(gè)人為了解決某一項(xiàng)工作上的問題。
當(dāng)設(shè)計(jì)過程以「目標(biāo)」為出發(fā)點(diǎn)，可以增強(qiáng)設(shè)計(jì)判斷力，輸出更有效設(shè)計(jì)解決方案。

B端產(chǎn)品的設(shè)計(jì)原則：提高使用者的工作效率，同時(shí)降低業(yè)務(wù)鏈路的操作及學(xué)習(xí)成本。

當(dāng)你有了目標(biāo)以后你的設(shè)計(jì)就可以圍繞這個(gè)目標(biāo)展開：

★設(shè)計(jì)價(jià)值·B端的設(shè)計(jì)價(jià)值體系搭建

對(duì)于B端的產(chǎn)品而言，用戶最關(guān)心它能為實(shí)際的工作帶來哪些便利，而并非這個(gè)界面做的多么的好看，以及用戶體驗(yàn)多么棒。所以B端產(chǎn)品設(shè)計(jì)價(jià)值優(yōu)先級(jí)往往是  功能性＞表現(xiàn)力

B端產(chǎn)品設(shè)計(jì)需要站在整個(gè)業(yè)務(wù)線全局角度去把控各個(gè)設(shè)計(jì)點(diǎn)，不再是「用戶體驗(yàn)」至上，為實(shí)現(xiàn)「任務(wù)目標(biāo)」，「犧牲」一部分「用戶體驗(yàn)」是必要的，這個(gè)時(shí)候視覺和一些體驗(yàn)就不那么重要了。通過調(diào)研業(yè)務(wù)去了解各個(gè)角色職能的工作流程、相關(guān)痛點(diǎn)，讓產(chǎn)品能用，好用。

要點(diǎn)1·了解項(xiàng)目的業(yè)務(wù)流程

理想的B端設(shè)計(jì)需要了解業(yè)務(wù)目標(biāo)以及業(yè)務(wù)鏈路中每一個(gè)環(huán)節(jié)的過程。將業(yè)務(wù)邏輯理解透徹再考慮應(yīng)該如何進(jìn)行設(shè)計(jì)實(shí)現(xiàn)。

這樣做的原因當(dāng)你站在使用者的角度進(jìn)行同理心設(shè)計(jì)可以更好的幫助用戶完成他要完成的工作，從而提高效率。產(chǎn)品原型一般基于「功能」本身，而設(shè)計(jì)師從用戶實(shí)際場(chǎng)景規(guī)劃用戶的任務(wù)流，可以優(yōu)化產(chǎn)品邏輯，補(bǔ)全缺失場(chǎng)景，通過了解業(yè)務(wù)流程也能給予創(chuàng)造性解決方案

要點(diǎn)2·用戶調(diào)研與場(chǎng)景化設(shè)計(jì)思維

B端產(chǎn)品往往是是服務(wù)于企業(yè)用戶，用戶畫像需要專注于用戶特征中的「群體職業(yè)身份」這類人無論性別、年齡、地區(qū)有何差異，他們都是一類角色，我們的產(chǎn)品要提供給這類角色使用，而不是某個(gè)人使用。

由于B端設(shè)計(jì)師不是產(chǎn)品的用戶，無法沉浸在與用戶相同的真實(shí)場(chǎng)景中，建立共情。所以設(shè)計(jì)師最好親自感受一下業(yè)務(wù)流程，獲得一手的用戶洞察，

獲取B端用戶反饋的方式

「通過業(yè)務(wù)人員交流」業(yè)務(wù)人員可以幫助我們快速高效的描繪出典型客戶案例的用戶畫像。
「實(shí)地走訪」：觀察在自然狀態(tài)下用戶如何完成工作任務(wù)，并提問題：「你怎么做？」或者「為什么這么做？」
「建立種子用戶群」：聚集活躍的種子用戶群，收集意見和建議，并在群里驗(yàn)證設(shè)計(jì)想法。
「親身體驗(yàn)」：成為真正的客服小二，接聽客戶電話，記錄自己在工作臺(tái)場(chǎng)景下的真實(shí)體驗(yàn)和感受。

獲取用戶畫像后了解該群體背后工作感受，行為習(xí)慣，以及任務(wù)類型。

要點(diǎn)3·情感化設(shè)計(jì)心理

安全感和信任感建立：人們?cè)絹碓疥P(guān)注隱私和信息安全。如果你要求必須填寫敏感信息，請(qǐng)確保使用字段下方的注釋文本解釋為什么需要這些信息。

實(shí)際工作中我們?cè)?jīng)自動(dòng)獲取過用戶之前表單中填寫的的支付類賬戶信息，在收集的用戶反饋中，用戶會(huì)感覺到隱私正在泄露并讓用戶信任感降低。所以即使用戶輸入體驗(yàn)會(huì)更好，但是考慮到信任感，敏感類信息請(qǐng)不要自動(dòng)獲取。

讓用戶感受到你正在幫助他操作：Jakob Nielsen于1994年提出的十大可用性原則中，其最后一條原則Help and documentation（幫助性指導(dǎo)原則）是搭建B端用戶幫助體系的核心準(zhǔn)則，在理想情況下，沒有幫助文檔就可以使用系統(tǒng)是最好的，但在某些情況下（尤其是B端系統(tǒng)），提供一些引導(dǎo)性的幫助其實(shí)是必要的。

B端系統(tǒng)中可以嘗試搭建用戶幫助系統(tǒng)：

要點(diǎn)1·降低學(xué)習(xí)成本

對(duì)B端產(chǎn)品來講，設(shè)計(jì)師在設(shè)計(jì)的時(shí)候是不需要耗費(fèi)太多的思考的，只是去按照交互設(shè)計(jì)師的規(guī)劃堆砌圖表和列表。但是對(duì)于使用者來講，其中縱橫交錯(cuò)的商業(yè)邏輯和業(yè)務(wù)邏輯卻是給用戶搭建了一個(gè)十分高的門檻。

要點(diǎn)2·保持高效

例如修改資料的時(shí)候，使用彈窗、浮層等等交互操作會(huì)減少頁面跳轉(zhuǎn)的頻率。

但是與此同時(shí)，減少頁面跳轉(zhuǎn)并不代表真正的高效，例如瑞幸的供應(yīng)商系統(tǒng)，供應(yīng)商所產(chǎn)生的訂單需要按照指定的流程一步步進(jìn)行操作確保不會(huì)出現(xiàn)問題這樣雖然頁面的跳轉(zhuǎn)增加，但是可以避免操作出錯(cuò)給用戶帶來更大的困擾。

要點(diǎn)3·整理信息/引導(dǎo)視覺

設(shè)計(jì)要根據(jù)用戶的瀏覽習(xí)慣和視覺動(dòng)線。要嘗試引導(dǎo)用戶的視覺，舉個(gè)例子，如何引導(dǎo)：

設(shè)計(jì)側(cè)核心要點(diǎn)

B 端產(chǎn)品是以業(yè)務(wù)為核心，是需要用戶長(zhǎng)時(shí)間操作并完成工作任務(wù)的，對(duì)于操作和展示內(nèi)容無關(guān)的元素，越少越好。視覺為功能讓步，追求簡(jiǎn)潔、清晰、克制、理性的視覺風(fēng)格。設(shè)計(jì)語言盡量做到不干擾不打擾。

要點(diǎn)1·表單設(shè)計(jì)

輸入順序：先易后難；先必填后選填；先公開信息后隱私信息；有關(guān)聯(lián)性的合成一組，特殊問題后置，用戶輸入時(shí)、不會(huì)覺得突兀、門檻太高 。

自動(dòng)對(duì)焦（PC端）進(jìn)行表單頁面，自動(dòng)對(duì)焦第一個(gè)輸入字段可以引導(dǎo)用戶開始進(jìn)行輸入。

標(biāo)題：標(biāo)題是對(duì)下文最短最精的概括。用戶一般都會(huì)跳過表單內(nèi)容，而且?guī)缀醵疾粫?huì)仔細(xì)閱讀那種特別詳細(xì)的描述。所以用最少的文字說清楚一個(gè)表單的目的尤其重要。
用戶應(yīng)該可以看一眼標(biāo)題就知道他們應(yīng)該怎么做，而不是非得把剩下的全部看完，
（附：這部分感興趣的同學(xué)可以搜索“微文案設(shè)計(jì)”）

在表單編寫方面，或者說各種寫作中，刪減詞語都要比添加詞語更加有益。 在仔細(xì)檢查不必要的詞語后，文章會(huì)更篤實(shí)，更連貫，更吸引人。

這個(gè)鏈接有什么用？關(guān)閉是點(diǎn)擊右上角的按鈕嗎？如果并沒有增效，那就是減效。每一個(gè)字，每一張圖片，都不是100% 必需的，這些都會(huì)降低你表單的轉(zhuǎn)換率。

刪除一個(gè)字段，表單提交率就可以提高 26%。（本篇筆記原本有12000余字，為了避免浪費(fèi)大家時(shí)間，我僅保留4000余字的高頻要點(diǎn)內(nèi)容）

PC端產(chǎn)品提示文字盡量不要放在框內(nèi)

提示文字存在于框內(nèi)常用在移動(dòng)端，它的空間占比很小，對(duì)移動(dòng)端的小屏來說，是非常友好的，但如果在交互上處理不好，會(huì)有很大的缺陷。

內(nèi)部標(biāo)簽結(jié)構(gòu)，只有提示性文字，用作提示用戶應(yīng)該輸入什么內(nèi)容，但用戶在輸入的時(shí)候，內(nèi)部的標(biāo)簽/提示性文字就會(huì)消失，這時(shí)候，用戶會(huì)失去它是否輸入準(zhǔn)確的唯一判別標(biāo)準(zhǔn)。

減少打字需求

字段輸入通過部分人工智能自動(dòng)將操作步驟可以變得簡(jiǎn)潔高效 ，也包括諸如一些、自動(dòng)定位、圖片識(shí)別、自動(dòng)獲取，第三方導(dǎo)入等方式來使用戶的效率得以提升的功能。
打字是在線表單中最耗時(shí)、最密集的部分，而且經(jīng)常會(huì)導(dǎo)致錯(cuò)誤——尤其是在手機(jī)上。用按鈕、滑塊替換文本框并使用自動(dòng)完成功能，將減少工作量并提高轉(zhuǎn)化率。

使用文本塊

文本塊會(huì)更容易讓用戶記住內(nèi)容：例如銀行賬戶、電話號(hào)碼等等。它指的是將信息排列成「塊」的過程，使內(nèi)容更容易保留、處理和回憶。一份研究聲稱數(shù)字 3 是幫助人們吸收和回憶信息的神奇數(shù)字。

表單的提示文字和定義格式要求

如果一個(gè)字段需要特定的格式輸入，請(qǐng)告訴用戶。例如密碼要求、語法規(guī)則、編號(hào)間距等等。

用輸入框長(zhǎng)度提示

可以用輸入框長(zhǎng)度提示用戶輸入的內(nèi)容是否正確。
德萊厄斯研究所的可用性研究發(fā)現(xiàn)，如果一個(gè)字段太長(zhǎng)或太短，用戶開始懷疑他們是否正確理解了標(biāo)簽。

在用戶輸入的時(shí)候，右下角告訴用戶已經(jīng)輸入了多少字，如果超過 限定字?jǐn)?shù)后輸入框紅色，用來警示用戶，此時(shí)用戶依舊可以再輸入字符，但當(dāng)出現(xiàn)警示，用戶繼續(xù)輸入一定數(shù)量字符后，系統(tǒng)需要強(qiáng)行限制無法輸入新的內(nèi)容，避免用戶沒有察覺到警示反饋導(dǎo)致的過多輸入，從而浪費(fèi)的時(shí)間。

（該部分感謝酷友@sh9513 提出的反饋）

如果用戶填寫錯(cuò)誤，向用戶顯示錯(cuò)誤發(fā)生的位置，并說明原因。

單選框

如果你的表單里的選項(xiàng)少于5個(gè)可以列出所有選項(xiàng)供用戶快速選擇，當(dāng)大于5個(gè)時(shí)候可以嘗試用下拉框解決。
將第一個(gè)選項(xiàng)作為用戶最有可能的默認(rèn)選項(xiàng)，且是最安全的選項(xiàng)，提前預(yù)判用戶的操作提升選擇效率。排列方式推薦數(shù)直排列，豎直排列相對(duì)于水平排列容易讀取和定位，提高用戶的瀏覽順序。

解釋隱私消息

當(dāng)前需要用戶填寫相對(duì)隱私的信息時(shí)，請(qǐng)給予解釋這么做的原因及目的。

收集設(shè)計(jì)反饋

完成表單的設(shè)計(jì)后可以給業(yè)務(wù)用戶進(jìn)行簡(jiǎn)單的測(cè)試，并記錄他們填寫的時(shí)間收集反饋，以及對(duì)這一連串的問題他們體驗(yàn)如何。這也將有助于你下次評(píng)估表單的設(shè)計(jì)。

最后在情感化設(shè)計(jì)系統(tǒng)里記得感謝用戶填寫或者反饋問題，因?yàn)橛脩羰腔〞r(shí)間的。所以請(qǐng)表示感謝。

要點(diǎn)2·表格設(shè)計(jì)

表格的設(shè)計(jì)圍繞著「可讀性」和「易操作」兩個(gè)設(shè)計(jì)原則。設(shè)計(jì)易讀，易掃視，易比較，易操作的表格結(jié)構(gòu)是表格設(shè)計(jì)的首要目標(biāo)。

列寬有三種常見處理方式：

1.  根據(jù)內(nèi)容的極限長(zhǎng)度給出足夠的固定寬度；
2. 可以固定部分列的寬，其余列按百分比處理；
3. 列寬需要考慮最低寬度/最大寬度/文字極限狀態(tài)，內(nèi)容為空狀態(tài)顯示方案；
4.需要設(shè)置列之間的最小寬度，表格響應(yīng)式布局情況下最小不小于此寬度。

M-Densign規(guī)范中對(duì)齊方式會(huì)遵循如下規(guī)則：
表格的排序，應(yīng)從用戶目的出發(fā)，遵循用戶查看數(shù)據(jù)的習(xí)慣，尊重?cái)?shù)據(jù)之間的關(guān)聯(lián)性，設(shè)計(jì)用戶查看、操作數(shù)據(jù)的路徑，而非隨機(jī)排列（這部分可以在業(yè)務(wù)側(cè)調(diào)研時(shí)驗(yàn)證，提高用戶體驗(yàn)和閱讀效率）。

1. 文本信息/混合型文本左對(duì)齊，符合從左到右的閱讀習(xí)慣；

2. 數(shù)字信息右對(duì)齊，方便數(shù)字之間的直觀對(duì)比；

（該圖片感謝好友@晴藍(lán) 同學(xué)反饋的一個(gè)錯(cuò)字，圖片已修正）

要點(diǎn)3·按鈕設(shè)計(jì)

設(shè)計(jì)規(guī)范需要定義按鈕的四種狀態(tài)：正常狀態(tài)(Normal)、懸停狀態(tài)(Hover)、激活狀態(tài)(Active)、加載狀態(tài)(Loading)、禁用狀態(tài)(Disabled)

B端產(chǎn)品的開發(fā)一般涉及多個(gè)開發(fā)團(tuán)隊(duì)協(xié)作，例如瑞幸的后臺(tái)修改按鈕顏色，都可能牽動(dòng)10+工程師的協(xié)同。

所以B端產(chǎn)品在進(jìn)行設(shè)計(jì)改版以及設(shè)計(jì)側(cè)調(diào)整時(shí)候要思考調(diào)整對(duì)于業(yè)務(wù)側(cè)是否有直接幫助，在設(shè)計(jì)和規(guī)范建立之前，切勿頻繁改動(dòng)。

除了完全獨(dú)立設(shè)計(jì)開發(fā)的項(xiàng)目以外，還有大量的 B 端項(xiàng)目是采用第三方框架開發(fā)而成的，如 Ant、Element 等等。這是因?yàn)檫@些第三方程序可以幫助團(tuán)隊(duì)節(jié)省大量的開發(fā)時(shí)間和精力。

作者：Cesare_玄漓    來源：站酷

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加藍(lán)小助，微信號(hào):ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

信息無障礙，是指任何人在任何情況下都能平等地、方便地、無障礙地獲取信息和利用信息。隨著互聯(lián)網(wǎng)覆蓋越來越廣，對(duì)于身體有局限的群體而言，更加迫切通過互聯(lián)網(wǎng)獲取信息，而這就需要互聯(lián)網(wǎng)產(chǎn)品進(jìn)行信息無障礙的優(yōu)化。在我國(guó)其受益人群至少包括：8500多萬殘障人士，2億多60歲以上的老年人，數(shù)量龐大。率先考慮信息無障礙能為產(chǎn)品增加優(yōu)勢(shì)而帶來更多用戶。

如今智能手機(jī)掀起了一場(chǎng)無障礙輔助工具的革命，而站在這個(gè)關(guān)鍵點(diǎn)的互聯(lián)網(wǎng)設(shè)計(jì)師，也要開始行動(dòng)起來，先從以下這幾個(gè)容易實(shí)現(xiàn)的事情開始著手進(jìn)行無障礙的優(yōu)化吧。

關(guān)于讀屏

對(duì)視障用戶來說，是用聽取讀屏語音來了解你設(shè)計(jì)的界面信息的。讀屏軟件就像他們了解互聯(lián)網(wǎng)世界的眼睛，它的原理是直接讀出界面里的文字，如果icon按鈕未加無障礙標(biāo)簽讀屏?xí)x為"無法發(fā)音"，那么視障者就無法獲取這些信息，自然也就無法使用你設(shè)計(jì)的功能。

解決的辦法是:

1.需要在產(chǎn)品代碼中添加無障礙標(biāo)簽(Android :contentDescription ; iOS:accessibilityLabel在對(duì)應(yīng)的開發(fā)者文檔里很容易找到，可以發(fā)給你合作的研發(fā)同學(xué))。

2.裝飾性icon可隱藏標(biāo)簽不讀，提升讀屏效率。不建議不做處理也不加標(biāo)簽，那么用戶聽到的就是“無標(biāo)簽”，這樣會(huì)讓用戶以為這里有什么重要信息讀不到而感到不安。

3.標(biāo)簽語義簡(jiǎn)短準(zhǔn)確，盡可能使用動(dòng)詞。

4.必要時(shí)需要走查焦點(diǎn)順序，確保不會(huì)被錯(cuò)誤的焦點(diǎn)順序誤導(dǎo)頁面含義。 

并且最好由設(shè)計(jì)師進(jìn)行語義的標(biāo)注，因?yàn)樵O(shè)計(jì)師才是對(duì)頁面里圖形應(yīng)用最了解的人。避免出現(xiàn)“搜索”被寫成“放大鏡”、或者是“searchBtn_123”之類的情況。 

關(guān)于色彩

顏色可以用來區(qū)分信息數(shù)據(jù)的類別和維度，也可以幫助傳達(dá)情緒等重要信息。然而，世界上有超過8%的男性和0.4%的女性都被色覺障礙的問題困擾。我們通?；\統(tǒng)的稱這類人群為“色盲”，他們是典型的識(shí)別顏色有問題的群體。

"色彩"的目標(biāo)是"易于感知"，指的是互聯(lián)網(wǎng)產(chǎn)品的內(nèi)容信息的色彩對(duì)任何人來說，都應(yīng)該擁有足夠高的辨識(shí)度和舒適度，我從以下4個(gè)方向進(jìn)行介紹。 

1.更安全的配色

a.色盲人群：

設(shè)計(jì)師在進(jìn)行設(shè)計(jì)配色時(shí)應(yīng)時(shí)刻自測(cè)，避免明度相似的橙黃綠兩兩配色和明度相似的紅綠配色，因?yàn)檫@樣的配色勢(shì)必會(huì)造成色盲用戶的可讀性問題。并且，紅色在紅綠色盲眼中并不是一種明亮醒目的顏色。相反紅色對(duì)他們來說顯得非常深，而暗紅色則幾乎接近黑色。因此色盲人士很難分辨出文章內(nèi)的深紅色的強(qiáng)調(diào)字，從而遺漏關(guān)鍵信息（設(shè)計(jì)時(shí)，可利用此插件模擬色盲眼中的顏色：Color Oracle） 。

b.文化差異：

因?yàn)樯试诓煌瑖?guó)家文化中代表不同含義,所以對(duì)于國(guó)際用戶來說也是存在障礙的。在西方文化里，紅色通常用于表示消極趨勢(shì)，而綠色則表示積極趨勢(shì)，但在東方文化中卻正相反。

c.特殊群體：

臨床醫(yī)學(xué)研究表明對(duì)于部分自閉癥患者來說，高飽和高對(duì)比度的顏色，甚至只是黃色都會(huì)讓他們感到不舒服和不安，因此在自閉癥康復(fù)中心是不會(huì)出現(xiàn)過于對(duì)比刺激的顏色的。

另外，老年群體隨著年齡的增長(zhǎng)，晶狀體變黃變渾濁，會(huì)選擇性的吸收藍(lán)光，從而導(dǎo)致老年人對(duì)藍(lán)色的鑒別能力下降明顯，如果你的主流用戶是老年人，請(qǐng)盡量避免將藍(lán)色運(yùn)用到重要的按鍵中去。

2.更強(qiáng)的文本對(duì)比度

文本對(duì)比度與可讀性息息相關(guān)，它測(cè)量的文本顏色和背景色之間的明度差。WCAG AA對(duì)于文本對(duì)比度的規(guī)范是：4.5:1，若字號(hào)夠大（>18pt，或粗體>14pt）時(shí)，標(biāo)準(zhǔn)可降到3:1。如果滿足4.5:1這個(gè)標(biāo)準(zhǔn)會(huì)讓你的頁面視覺看起來不那么優(yōu)雅，可以嘗試局部加強(qiáng)可視性的方法：

關(guān)于可讀性其他需要注意的點(diǎn)：盡量不要在圖片上疊加文字，除非你能保證圖片背景顏色單一且對(duì)比度足夠高。

Material Design設(shè)計(jì)規(guī)范建議，需要淡淡的遮罩確保上層文字的可讀性；并且不建議極高對(duì)比度的文本，因?yàn)檫@樣會(huì)使一部分視障者看到的字旋轉(zhuǎn)模糊。

3.更多樣的視覺變量 

顏色是數(shù)據(jù)可視化中最常用的視覺變量之一。但是對(duì)于無法辨別顏色的用戶，如果顏色作為的唯一的提示信息，他們可能將無法理解你傳達(dá)的信息。那么有什么改善的方法呢?

a. 不讓顏色成為唯一的視覺變量：除顏色外，我們可以追加圖標(biāo)、紋理或者文字來加以標(biāo)注。

b.色盲模式：Trello作為一款工具產(chǎn)品，在標(biāo)注信息時(shí)，提供色盲模式可打開和關(guān)閉，并用不同紋理加以區(qū)別，色盲友好模式是一個(gè)很好的范例，它可以有效幫助色盲，又不會(huì)妨礙非色盲用戶。

c.以明度飽和度為度量：雖然色盲人士對(duì)色相的辨識(shí)能力較弱，但卻對(duì)明度、飽和度非常敏感。我們可以使用明度或飽和度區(qū)分信息?？催@個(gè)例子：傳統(tǒng)熱力圖習(xí)慣用暖色代表熱力高冷色代表熱力低，Google Analaytics的熱力圖采用深藍(lán)色顯示熱度高的時(shí)段、淺藍(lán)色顯示熱度低的時(shí)段，簡(jiǎn)單有效。

關(guān)于控件

控件可以是按鈕、鏈接、輸入框或任何帶有事件監(jiān)聽器的HTML元素?？丶』虮舜颂拷赡軙?huì)給用戶帶來糟糕的體驗(yàn)問題。

比如對(duì)于無法用指尖精確定位的用戶（有顫抖疾病的用戶），或因年齡而導(dǎo)致靈活性降低的老年用戶，都會(huì)難以點(diǎn)擊過小控件。

為了給用戶足夠的間距來準(zhǔn)確選擇控件，Material Design建議至少48×48dp，iOS設(shè)計(jì)系統(tǒng)將目標(biāo)熱區(qū)尺寸最小值定為44 x 44pt，而WCAG對(duì)WEB的規(guī)范則建議至少44×44px。一個(gè)控件可以在視覺上是24 x 24px，但是在所有邊上都會(huì)有一個(gè)額外的填充使它達(dá)到44×44px。并且太靠近的控件可能會(huì)因誤點(diǎn)擊而帶來挫敗感，所以同時(shí)還建議控件之間的空間足夠遠(yuǎn)以減少誤觸。Microsoft給pc的建議是至少有8px的間距，而Material Design推薦的控件至少間隔8dp。我們可根據(jù)以上規(guī)范來審視自己設(shè)計(jì)的控件。

關(guān)于文字

1.文字大?。?/strong>