通常我們理解圖標(biāo)設(shè)計的含義，是將某個概念轉(zhuǎn)換成清晰易讀的圖形，從而降低用戶的理解成本，提升界面的美觀度。隨著扁平化設(shè)計風(fēng)格的普及，圖標(biāo)的風(fēng)格越來越簡約，看似簡單的圖形，實(shí)際要準(zhǔn)確的表達(dá)含義，也是需要注意很多細(xì)節(jié)的，在如今大同小異的圖標(biāo)中，如何讓你設(shè)計出的圖標(biāo)具有說服力也是一門學(xué)問，今天就給大家全面的剖析一下圖標(biāo)的知識，讓你做出的圖標(biāo)有理有據(jù)。
1、圖標(biāo)的定義及分類
2、圖標(biāo)的設(shè)計規(guī)范
3、圖標(biāo)的性格走向
4、圖標(biāo)的評判標(biāo)準(zhǔn)
5、總結(jié)
圖標(biāo)是具有高度概括性的、用于視覺信息傳達(dá)的圖像。圖標(biāo)常?？梢詡鬟_(dá)出豐富的信息，并且常常和詞匯、文本搭配相互搭配使用，兩者互相支撐，或隱晦或直白地共同傳遞出其中所包含的意義、特征、內(nèi)容和信息。
在數(shù)字設(shè)計領(lǐng)域，圖標(biāo)作為網(wǎng)頁或者UI界面中的象形圖和表意文字而存在，是確保界面可用性的基礎(chǔ)設(shè)施，也是達(dá)成人機(jī)交互這一目標(biāo)的有效途徑。
釋意性圖標(biāo)是用來解釋和闡明特定功能或者內(nèi)容類別的視覺標(biāo)記。它并不是一定被點(diǎn)擊可交互的UI元素，在很多時候只是有輔助解釋其含義的文案。在不搭配文本的情況下用戶會借助這些圖標(biāo)來獲取信息。不過有時候圖標(biāo)表達(dá)的含義可能還不夠完整或者清晰，所以會將圖標(biāo)和文案搭配起來一起使用，這樣可以大大降低誤讀的可能性，釋意性圖標(biāo)一共可以分為以下三類：
2-1-1純圖標(biāo)：
例如火球買手APP中的店家“特定標(biāo)簽”，以及圖文展示下的“觀看數(shù)量圖標(biāo)”與“收藏圖標(biāo)”，它們并不需要用文字去解釋，用戶也知道它表達(dá)的是什么。
2-1-2圖文結(jié)合：
例如造作APP中的“購物車圖標(biāo)”與“收貨地址圖標(biāo)”，為了讓用戶能夠很好的明白圖標(biāo)的意圖，所以在圖標(biāo)下方會配有文字提示，這樣就能大大的降低誤讀的可能性。
2-1-3純圖標(biāo)（圖標(biāo)內(nèi)含文字）：
例如開眼APP中視頻封面左上角“開眼精選圖標(biāo)”，它把圖標(biāo)與重要文字結(jié)合在一起展示給用戶，看起來不僅十分具有個性，而且用戶對其理解性也非常強(qiáng)。
交互圖標(biāo)的最大意義在于可以引導(dǎo)用戶進(jìn)行交互行為，是在產(chǎn)品中不可或缺的組成部分。它們可以在用戶不同的操作手勢下幫助用戶執(zhí)行不同的交互過程，這種類型圖標(biāo)也是APP中最常見的，常見的交互性圖標(biāo)如：搜索、底部標(biāo)簽、返回、點(diǎn)贊、收藏、掃一掃等。
裝飾性圖標(biāo)僅僅是用來提升整個界面的視覺體驗(yàn)，它并不具備任何功能性。這類圖標(biāo)往往是為了迎合用戶的偏好與期望，通過豐富視覺體驗(yàn)的方法來增加內(nèi)容的觀賞性，這樣不僅可以吸引并留住用戶，還可以讓整個用戶體驗(yàn)更加積極，最為大家所熟悉的就是滴滴出行APP中的“小車圖標(biāo)”。
圖標(biāo)基于基礎(chǔ)樣式（線、面、線面結(jié)合）+表現(xiàn)手法（顏色、透明度、投影、疊加...）劃分，一共可以分為20種類型，每種類型的展示方式也都各有不同。
線性圖標(biāo)通過線來塑造輪廓，在界面中App的圖標(biāo)尺寸并不大，所以如果線過于復(fù)雜，在小面積中過多的線會對識別性產(chǎn)生較大的困擾。在圖標(biāo)設(shè)計中使用的線有粗細(xì)之分，常用的App圖標(biāo)設(shè)計線的粗細(xì)一般有2PX或者3PX，不同的線條粗細(xì)所帶來的視覺感受也不同，細(xì)線顯得精致，粗線視覺面積大，顯得厚重。
面性圖標(biāo)是通過面來塑造形體的圖標(biāo)，采用了剪影的設(shè)計形式，通過線或者面去切割基礎(chǔ)輪廓面，通過分型來塑造圖標(biāo)的體積感。不同的切割手法造成了面性圖標(biāo)設(shè)計感的差別。
線面結(jié)合圖標(biāo)相較單一的線性圖標(biāo)或單一的面性圖標(biāo)樣式更加豐富、也更富有趣味性。從設(shè)計的角度上說，由于元素的多樣化，設(shè)計更容易獲得好的效果。相反，如果運(yùn)用不當(dāng)會顯得圖標(biāo)非常雜亂，如何有效的把控好兩者之間的過度是關(guān)鍵。
這類圖標(biāo)的特點(diǎn)是通過細(xì)節(jié)和光影還原現(xiàn)實(shí)物品的造型和質(zhì)感，能給用戶極強(qiáng)的代入感，用戶可通過對現(xiàn)實(shí)事物的聯(lián)想，快速領(lǐng)會圖標(biāo)表達(dá)的意圖。但是隨著 ICON 的發(fā)展，擬物圖標(biāo)也帶來了一些問題，因?yàn)橛脩絷P(guān)注的核心永遠(yuǎn)都是信息本身，華麗的視覺元素或許在用戶使用的初期，起到賞心悅目的裝飾，但久而久之，這都將成為對用戶獲取信息的一種干擾，所以現(xiàn)在擬物化的圖標(biāo)很少運(yùn)用在APP界面之內(nèi)。
相較于擬物風(fēng)格不會有太多復(fù)雜的視覺元素，層次簡單，用色素雅干凈，采用輕投影、輕漸變的方法設(shè)計，這類圖標(biāo)具有一定的立體感，能給人輕盈、簡潔、精致的感覺，在界面設(shè)計中，一般在面積比較大的區(qū)域我們會使用加入輕質(zhì)感的圖標(biāo)。
合理的遵循圖標(biāo)規(guī)范可以有利于設(shè)計師之間合作使用，指導(dǎo)設(shè)計師如何規(guī)范的去設(shè)計圖標(biāo)，以確保企業(yè)所有產(chǎn)品圖標(biāo)風(fēng)格的一致性和可用性達(dá)到統(tǒng)一，同時也是為了后續(xù)產(chǎn)品更新迭代有可參考的地方。
為了保證圖標(biāo)的尺寸大小一致性，我們往往會建立基礎(chǔ)的網(wǎng)格尺寸來進(jìn)行繪制圖標(biāo)，常用的網(wǎng)格繪制尺寸為：16、24、36、48、64、128、512、1024。這些尺寸并不是固定的，在設(shè)計中也會存在特殊的尺寸，例如谷歌在臺式機(jī)上設(shè)計圖標(biāo)，當(dāng)鼠標(biāo)和鍵盤是主要輸入方法時，就會使用密集布局，基礎(chǔ)網(wǎng)格就會縮小到20。
下面就以常用的24x24為大家展示：
網(wǎng)格包含2px出血位。這樣可以確保圖標(biāo)在導(dǎo)出時將保留其所需的比例和周圍的空白區(qū)域，同時還能夠很好的平衡圖標(biāo)的視覺重心。
*在使用常規(guī)圖標(biāo)時避免一部分在出血位。
*在使用多個元素的圖標(biāo)時，避免圖標(biāo)擁擠我們可以讓其部分出現(xiàn)在出血位，確保它們之間有足夠的空間。
keyline由圓形，正方形，矩形，正交，三角形和對角線組成。它可以為您提供圖標(biāo)集中基本形狀或比例的一致大小。這使創(chuàng)建視覺上的穩(wěn)定變得更加容易，并有助于在設(shè)計相似比例的圖標(biāo)時有共同的參考準(zhǔn)則。
在24尺寸下的keyline構(gòu)成如下（24尺寸下的出血區(qū)域?yàn)?）：
當(dāng)把圖標(biāo)畫在網(wǎng)格上時可以很好的規(guī)范圖標(biāo)，讓它們從整體的視覺上看著統(tǒng)一規(guī)范。
在設(shè)計一整套系統(tǒng)化的圖標(biāo)時，我們一定要注意圖標(biāo)的像素大小，要運(yùn)用相同的網(wǎng)格尺寸設(shè)計相同線條粗細(xì)的圖標(biāo)，包括曲線，角度以及內(nèi)部和外部筆劃。這樣圖標(biāo)看起來才更統(tǒng)一，也有利于后期圖標(biāo)的迭代更新。
當(dāng)然，描邊像素的粗細(xì)并不是絕對的，如果我們要做一些密集型的圖標(biāo)時，可以考慮適當(dāng)?shù)目s小線的像素大小。如下，我們設(shè)定的系統(tǒng)圖標(biāo)線條粗細(xì)為3px，當(dāng)你用3px作用于指紋圖標(biāo)上時就會顯得非常擁擠，并且在視覺上比其余圖標(biāo)更重，這時我們就可以把它的線條像素降級，設(shè)定為2px。
我們在用矢量工具繪制圖標(biāo)時，要仔細(xì)看好圖標(biāo)的網(wǎng)格尺寸和圖標(biāo)結(jié)構(gòu)尺寸，避免產(chǎn)生小數(shù)位。
曲率簡單來講就是圖標(biāo)中帶有圓角的邊角度數(shù)，只要是帶有圓角的矩形就都會有一定的曲率。在圖標(biāo)中曲率的呈現(xiàn)方式有兩種：外曲、內(nèi)曲。
外曲與內(nèi)曲并不一定同時存在，在特定情況下內(nèi)部結(jié)構(gòu)可以是直角（無曲率）。如下圖：當(dāng)內(nèi)部結(jié)構(gòu)都是圓角時會發(fā)現(xiàn)整個圖標(biāo)稍顯臃腫，這時我們可以把部分內(nèi)部圓角直接變?yōu)橹苯牵ㄒ部梢愿淖兦蚀笮。?，改變后就會發(fā)現(xiàn)圖標(biāo)的整體結(jié)構(gòu)會顯得更加協(xié)調(diào)。需要注意的是如果一個圖標(biāo)做了這樣的處理，在同等情況下的圖標(biāo)都要做一樣的處理，不然圖標(biāo)會顯得非常雜亂，不統(tǒng)一。
根據(jù)像素的網(wǎng)格線來設(shè)置兩條對角線，會讓你的圖標(biāo)看起來更清晰。在傾斜的角度選擇上，不要出現(xiàn)7.8°、14.2°這樣的奇怪?jǐn)?shù)值。我們可以將15°的增量用于傾斜角度（也可以采用其他有規(guī)律的角度方案），這樣會使得整體的圖形變化顯得更加規(guī)律，也能夠滿足不同圖形的角度需求。
在做很多圖標(biāo)時都會用斷點(diǎn)的缺口來打破“全包邊圖標(biāo)”的沉悶感，使圖標(biāo)具有透氣性，如果想給圖標(biāo)添加斷點(diǎn)，那么要保證斷點(diǎn)的形態(tài)保持一致。
確保圖標(biāo)內(nèi)每個細(xì)節(jié)和元素都有足夠的空間，圖標(biāo)的相鄰元素之間的空間在整個圖標(biāo)中不應(yīng)太小，我們可以定義最小間隙以避免輪廓“粘住”，在24px尺寸下的間距不得小于1px。
如果在做圖標(biāo)時牽涉到了透視需求，那么就一定要保證圖標(biāo)的透視角度一致。
非中心對稱圖形物理對齊時視覺上會有偏離感，多個不同形狀的圖標(biāo)視覺重心并不在一條水平線上，需要微調(diào)才能保證平衡感。
在圖形的處理上，不要留有多余的節(jié)點(diǎn)，干掉多余的節(jié)點(diǎn)，保持圖形的整潔。
ICON命名要求較為嚴(yán)格，涉及到我們切圖給開發(fā)，所以我們命名爭取做對，且需嚴(yán)格遵守規(guī)則，正確的命名原則：類型_位置_功能_狀態(tài)_大小
每個App應(yīng)該有自己獨(dú)特的產(chǎn)品氣質(zhì)，同樣圖標(biāo)性格也應(yīng)當(dāng)與產(chǎn)品氣質(zhì)保持一致。圖標(biāo)性格一共分為了4個走向：粗曠（粗直）、活潑（粗圓）、商務(wù)（細(xì)直）、精致（細(xì)圓）。
圖標(biāo)結(jié)構(gòu)特點(diǎn)：線條較粗（或面性圖標(biāo)、線面結(jié)合圖標(biāo)）、拐角為直角。
粗曠類圖標(biāo)讓人看起來非常飽滿、剛正，它更多適用于男性、潮流、有格調(diào)類型等產(chǎn)品中。例如VSCO，它的底部標(biāo)簽欄圖標(biāo)全部采用了粗線條的直角設(shè)計。
圖標(biāo)結(jié)構(gòu)特點(diǎn)：線條較粗（或面性圖標(biāo)、線面結(jié)合圖標(biāo)）、拐角為圓角。
活潑類圖標(biāo)讓人看起來十分容易接近，能讓人感受到溫暖、舒適，它更多適用于電商、社交、母嬰、二次元、娛樂、直播、美食等產(chǎn)品中。例如閑魚，不管是在LOGO字體的處理還是APP內(nèi)部的圖標(biāo)處理，都是采用了線條較粗的圓角設(shè)計。
圖標(biāo)結(jié)構(gòu)特點(diǎn)：線條較細(xì)、拐角為直角。
商務(wù)類圖標(biāo)讓人看起來十分規(guī)矩、嚴(yán)謹(jǐn)、值得信賴，它更多適用于新聞、政府、商務(wù)、工具等產(chǎn)品中。例如工具類的思維導(dǎo)圖APP，它的可操作按鈕都是商務(wù)類的圖標(biāo)。因?yàn)檫@類圖標(biāo)的特性，所以目前我們很少在移動端上看到它，它更多適用于PC端的后臺界面中。
圖標(biāo)結(jié)構(gòu)特點(diǎn)：線條較細(xì)、拐角為圓角。
精致類圖標(biāo)讓人看起來非常干凈、柔和、顯得高級感，它更多適用于旅游、奢侈品、藝術(shù)、領(lǐng)域垂直等產(chǎn)品中。例如airbnb，在APP應(yīng)用中大部分都采用了精致類圖標(biāo)。
當(dāng)圖標(biāo)設(shè)計完后，我們應(yīng)該如何去評判一個圖標(biāo)的好壞？很多設(shè)計師并沒有完整的評判體系，其實(shí)我們可以從這五個維度對圖標(biāo)進(jìn)行評判：識別性、圖標(biāo)氣質(zhì)、協(xié)調(diào)性、一致性、品牌調(diào)性。
圖標(biāo)最主要的用途就是輔助用戶理解信息，特別是對于當(dāng)圖標(biāo)單獨(dú)存在時，一定不能讓用戶產(chǎn)生疑慮。要想圖標(biāo)達(dá)到高識別，我們可以從這2個方向入手：大眾認(rèn)知隱喻、真實(shí)世界映射。
在互聯(lián)網(wǎng)普及的今天，許多界面的隱喻圖標(biāo)已被廣大用戶熟知認(rèn)可，對于這類隱喻圖標(biāo)用戶不用思考身體就已做出反應(yīng)，我們在設(shè)計圖標(biāo)時可以從隱喻圖標(biāo)中添加修改部分元素，從而形成新的圖標(biāo)，這樣既能保證圖標(biāo)的識別性，也能做出差異化。
選擇真實(shí)世界中的物品映射，能使人下意識對圖標(biāo)的作用有近似預(yù)期，降低學(xué)習(xí)成本，提高識別度。
每個App應(yīng)該有自己獨(dú)特的產(chǎn)品氣質(zhì)，而我們所做的圖標(biāo)就是要跟隨產(chǎn)品的氣質(zhì)。例如當(dāng)你要做一款二次元產(chǎn)品，你的圖標(biāo)氣質(zhì)就應(yīng)該偏活潑、可愛、萌、青春，而不是剛硬、嚴(yán)謹(jǐn)、規(guī)矩。
一致性是圖標(biāo)的基礎(chǔ)，我們在繪制整套圖標(biāo)時要確保它們的基礎(chǔ)屬性全部一致，細(xì)節(jié)統(tǒng)一，圖標(biāo)內(nèi)容的統(tǒng)一在視覺上也更加和諧美觀。圖標(biāo)是否具有一致性，就要從以下七個方向去評判：尺寸大小、圖形角度、拐角（曲率）、描邊、間距、透視、顏色。
3-1 尺寸大?。壕W(wǎng)格大小是否統(tǒng)一、是否遵守圖標(biāo)的keyline規(guī)則。
3-2 圖形角度：是否遵循設(shè)定的角度規(guī)范（15°的增量用于傾斜角度）
3-3 拐角（曲率）：拐角的曲率是否統(tǒng)一，如果圖形太多且復(fù)雜，那么我們可以根據(jù)圖標(biāo)的特性去設(shè)定曲率的規(guī)則，例如可以設(shè)定當(dāng)邊角像素在1-2px時內(nèi)外曲率為2px；當(dāng)邊角像素在3px時內(nèi)外曲為2px，內(nèi)曲為1px；當(dāng)邊角像素大于或等于4px時，外曲為2px，內(nèi)部則為直角。
3-4 描邊：描邊大小是否一致。
3-5 間距：是否遵守間距規(guī)范。
3-6 透視：透視是否一致，避免在同一套圖標(biāo)中出現(xiàn)正視圖/側(cè)視圖混雜的情況。
3-7顏色：在圖標(biāo)的配色上要保持一致的規(guī)律，采用相同的顏色是比較常見的配色方式。如果采用不同色相的配色方式。也需要保持整體的配色協(xié)調(diào)，避免出現(xiàn)飽和度、明度反差過大的配色。
一致性代表的是圖標(biāo)的基礎(chǔ)，而協(xié)調(diào)性則代表圖標(biāo)的整體狀態(tài)，協(xié)調(diào)性的呈現(xiàn)狀態(tài)是驗(yàn)證一致性是否合理的標(biāo)準(zhǔn)，當(dāng)協(xié)調(diào)性存在問題時，我們就要反過來查看一致性存在的誤區(qū)并給予修改。在圖標(biāo)的協(xié)調(diào)性上我們主要審視這三點(diǎn)：視覺大小、飽滿度、透析感。
視覺大小對標(biāo)的是一致性的尺寸大小與描邊大小，當(dāng)你發(fā)現(xiàn)圖標(biāo)視覺大小不對等時，你就要回過去查看你的網(wǎng)格與keyline是否運(yùn)用正確，確保正確后再查看你的圖標(biāo)是否按照keyline的規(guī)范繪制以及描邊大小是否一致。（同樣尺寸下的圖標(biāo)，從光感上來看描邊粗的圖標(biāo)視覺偏大）
飽滿度對標(biāo)的一致性的間距，當(dāng)你發(fā)現(xiàn)圖標(biāo)不夠飽滿時，你就要去查看你設(shè)定的間距值是否偏大，是否合理。
透析感簡單來說就是留白區(qū)域。透析感對標(biāo)的也是一致性的間距，當(dāng)元素的描邊過大時，我們就要合理的設(shè)定間距的最小值，不然整個圖標(biāo)就顯得非常臃腫。
品牌調(diào)性是我們經(jīng)常提到的緯度，我們打開很多APP都會發(fā)現(xiàn)他們的圖標(biāo)設(shè)計都非常普通，沒有任何特色，過于大眾化，雖然都做了一些形式上的改變，但總是與品牌缺乏聯(lián)動性。其實(shí)我們可以結(jié)合品牌調(diào)性，在圖標(biāo)上做更多的聯(lián)動、創(chuàng)新。
色彩是圖標(biāo)設(shè)計中重要的構(gòu)成元素之一，我們可以直接提取品牌色作為圖標(biāo)設(shè)計視覺元素。例如站酷，站酷的品牌色是黃色，標(biāo)簽欄的圖標(biāo)（選中狀態(tài)）就提取了品牌的黃色，讓其與品牌調(diào)性高度一致。
當(dāng)然品牌顏色除了可以直接用外，還可以在提取時適當(dāng)調(diào)整色彩的飽和度、明度，做更多的形式變化。例如懂車帝，就在原有的黃色基礎(chǔ)上做了些許調(diào)整，圖標(biāo)采用黃色透明漸變的處理方式，在與品牌顏色呼應(yīng)的同時，使得整個圖標(biāo)更加精致、有活力。
提取品牌LOGO是最常用的使用方式，我們從品牌中提取出來的圖標(biāo)一般運(yùn)用在APP首頁標(biāo)簽。因?yàn)槭醉撌茿PP中最重要的頁面，也是進(jìn)入APP默認(rèn)的頁面，把首頁圖標(biāo)替換成品牌LOGO，能反復(fù)加強(qiáng)了用戶對App的logo印象，這樣不但使App內(nèi)外形成了視覺聯(lián)系，同時也二次傳遞了品牌形象。例如大眾點(diǎn)評，它的首頁標(biāo)簽就用了品牌LOGO。
我們可以在品牌中提取它識別性較強(qiáng)的局部元素作為圖標(biāo)。例如虎牙直播，它就提取了品牌卡通形象的外輪廓作為首頁圖標(biāo)。
品牌提取的元素并不只是所見到的品牌視覺形象，還可以提取與品牌內(nèi)容強(qiáng)相關(guān)的元素。例如QQ音樂，就把音符作為首頁圖標(biāo)。
如果你的品牌還不為大眾所熟知，那么為了強(qiáng)化用戶對品牌名稱的認(rèn)知，可以把品牌名稱直接放入標(biāo)簽欄中。例如MONO，就把它的名稱分為四個字母分別放在了4個標(biāo)簽內(nèi)，需要注意的是這類圖標(biāo)不能單獨(dú)出現(xiàn)，因?yàn)樗旧聿痪邆湟龑?dǎo)含義，必須配合文字一起出現(xiàn)，這樣才能讓用戶能易理解。
圖標(biāo)風(fēng)格可以與品牌性格保持一致，一套帶有濃厚品牌感的圖標(biāo)，會讓人記憶猶新。例如：每日故宮，它的圖標(biāo)就非常具有特色，結(jié)合了品牌的性格以及定位，加入了眾多的古代中國元素，整體看起來有股濃濃的古韻之風(fēng)。
如果品牌中含有吉祥物，我們可以提取吉祥物的外形，把它用于產(chǎn)品的圖標(biāo)中。例如盒馬，它就把盒馬的吉祥物做了風(fēng)格化的處理，放于APP的首頁標(biāo)簽。
設(shè)計師對自己做出的所有設(shè)計都必須要有理論支撐，圖標(biāo)也不例外，一套優(yōu)秀的圖標(biāo)是設(shè)計師不斷沉淀的結(jié)果?？赐瓯疚恼潞螅绻蠹蚁胍ゾ毩?xí)圖標(biāo)，建議找大廠的圖標(biāo)放在keyline里臨摹，真的會讓你收獲不少。
資料提?。?/strong>
最后給大家整理了一些資料，包含30個輕質(zhì)感圖標(biāo)（臨摹參考）、Ant Design的sketch插件、IBM的圖標(biāo)、keyline矢量文件（AI與Sketch）。
藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加ben_lanlan，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系
作者：黑獅力 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計公司
提到輪播首先可能想到的是廣告，我們經(jīng)常在移動端首頁或網(wǎng)站首頁會看到各式各樣的輪播banner，不管在移動端還是網(wǎng)頁上通常點(diǎn)擊數(shù)據(jù)都是非常差的，本篇文章帶你深入了解banner輪播。
如果需要設(shè)計一個輪播，我們應(yīng)該考慮哪些因素？如何讓輪播更具有價值？如何讓輪播的體驗(yàn)更好？如何避免輪播常見的問題。
本篇文章通過以下幾點(diǎn)探索輪播的特性，預(yù)計閱讀20分鐘
1、用戶真的使用輪播嗎
2、輪播的輪換形式
3、輪播的進(jìn)度展示
4、輪播定位
5、輪播的切換
6、對輪播進(jìn)行分類
7、使用縮略圖進(jìn)行預(yù)知
8、輪播異形化
9、輪播時間
10、總結(jié)
用戶是否對輪播有感知，這個則需要根據(jù)不同的場景進(jìn)行判斷，包括每個產(chǎn)品中的每個輪播對用戶用戶的定位也不相同，常見的應(yīng)用場景品牌曝光、活動營銷、產(chǎn)品展示，每個場景下相關(guān)的數(shù)據(jù)也不相同。
促銷輪播banner
品牌推廣輪播banner
產(chǎn)品介紹輪播banner
同時還有個關(guān)鍵因素，輪播的占比，這里以pc端為例若是產(chǎn)品是以品牌效應(yīng)吸引用戶的，大多輪播是以大的屏幕占比為主通常會占首屏的50%，如果是以營銷、內(nèi)容為主的產(chǎn)品，輪播通常以16:9、7:4的常規(guī)比例進(jìn)行展示。
用戶在使用產(chǎn)品時會默認(rèn)忽略輪播區(qū)域，一般輪播都會有自動輪換機(jī)制，一定時間后自動輪放下一張banner，那么每當(dāng)頁面上進(jìn)行輪播時便會吸引用戶進(jìn)行關(guān)注，效果上會有一定的提升，所以在輪播中第二張第三張的效果往往會比第一張輪播的效果更有效一些。
還有一種用戶比較喜歡關(guān)注輪播過去的banner以此來滿足好奇心。
如果banner是作為內(nèi)容傳播希望用戶通過banner了解內(nèi)容，那么則要避免放在最后一位置，對于用戶而言最后一張輪播路徑過于長，并且用戶很少會手動滑動banner。
國外一家公司在針對輪播中進(jìn)行了相關(guān)的研究測試，隨著頁數(shù)的增加用戶的點(diǎn)擊逐步下降。
那么如果想讓產(chǎn)品中的輪播更具有效果，則需要根據(jù)不同的場景設(shè)定策略達(dá)到目的。
不管在移動端還是手機(jī)端，輪播都有各種交互形式和尺寸，以pc為例在交互上會多樣化一些，常見的幾種則是通過滾輪滑動、通過點(diǎn)擊切換兩種。
如下圖某藝術(shù)網(wǎng)站，它則是通過鼠標(biāo)滾輪進(jìn)行切換輪播banner，并且banner的占比也是鋪滿首屏，這種輪播形式適合一些品牌、產(chǎn)品宣傳等相關(guān)的網(wǎng)站以此來突出產(chǎn)品的亮點(diǎn)，同時也符合用戶目標(biāo)。
在看下面這個醫(yī)美網(wǎng)站它的切換方式則是通過鼠標(biāo)點(diǎn)擊進(jìn)行切換，并且占比也是鋪滿首屏，在醫(yī)美領(lǐng)域用戶更關(guān)注美感，而輪播形態(tài)也是符合用戶的心理預(yù)期更加沉浸美觀。
而在移動端輪播的形式就比較統(tǒng)一，大多都是自動播放+手指滑動進(jìn)行切換。
在網(wǎng)頁中輪播都會有當(dāng)前的定位點(diǎn)，許多用戶的習(xí)慣是點(diǎn)擊進(jìn)度條進(jìn)行切換banner這樣能夠更快的達(dá)到目標(biāo)，不用一張一張切換，但是在有些產(chǎn)品中會忽略這一點(diǎn)，設(shè)計中會做的非常小導(dǎo)致用戶在點(diǎn)擊上可用性不太友好，如下圖中的banenr進(jìn)度點(diǎn)設(shè)計上過于小導(dǎo)致點(diǎn)擊上有些阻礙。
如以下網(wǎng)站去除進(jìn)度定位的方式，通過縮略圖預(yù)覽來告知用戶下一個banner的內(nèi)容，空白區(qū)域也可以添加縮略圖引導(dǎo)介紹等關(guān)鍵信息，幫助用戶提前預(yù)知在體驗(yàn)上相對較好。
以下國外某網(wǎng)站在進(jìn)度定位的設(shè)計上采用了標(biāo)簽文案方式進(jìn)行設(shè)計，能夠幫助用戶更加全局的了解banner內(nèi)容
定位主要是用來指示當(dāng)前輪播的進(jìn)度，像上圖中講的便于用戶更加全局的觀看banner的張數(shù)和當(dāng)前進(jìn)度。
以下網(wǎng)站的設(shè)計中則把定位與進(jìn)度相結(jié)合，進(jìn)度條展示該banner預(yù)計多久會切換下一張，對于自動切換的產(chǎn)品輪播這個更直觀的進(jìn)度展示體驗(yàn)上相對較好。
以下是某個國外網(wǎng)站，不管是pc還是移動端都在輪播底部添加了水平條，告知用戶當(dāng)前位置
隨著市場上產(chǎn)品同質(zhì)化嚴(yán)重，產(chǎn)品的競爭力也更依賴體驗(yàn)，在下圖中的數(shù)據(jù)可視化的網(wǎng)站上，在進(jìn)度條上就利用了產(chǎn)品的特性以餅狀圖的形式進(jìn)行展示。
在剛才上面舉的例子中很多優(yōu)秀的網(wǎng)站在設(shè)計上都很有創(chuàng)新性，但是需要注意一個點(diǎn)，在輪播中不只有自動播放，還需要考慮用戶手動切換，因?yàn)樵趯?shí)際用戶瀏覽中可能會對產(chǎn)品的播放時間達(dá)不到預(yù)期，此時則會使用手動切換，除去可點(diǎn)擊的進(jìn)度點(diǎn)，還需要上一張和下一張的入口切換。
在此基礎(chǔ)上需要注意，在處于最后一張banner時，下一張切換還能不能點(diǎn)擊，第一張時上一張切換還能不能切換，這個取決于產(chǎn)品特性和輪播張數(shù)，如果輪播張數(shù)過小的話則需要進(jìn)行循環(huán)播放，如果過多的頁數(shù)則第一步和最后一步不可點(diǎn)擊。
上一張和下一張的距離遠(yuǎn)近取決于banner的大小，如果輪播banner占比較大時則需要考慮用戶的操作時長，距離越短時間越快，為了避免用戶操作失誤在相對較近的切換按鈕則需要在視覺上做的比較突出，便于用戶尋找。
如果banner占比在首屏中占比較少的情況下則需要讓切換按鈕的間距拉大，保持視覺平衡，因?yàn)樾^(qū)域banner用戶能夠更加全局的觀看，在使用上不會猶豫。
反觀移動端在輪播中除了展示banner進(jìn)度外很少展示切換按鈕，移動端更加依賴手勢交互。
當(dāng)輪播banner過多時利用標(biāo)簽進(jìn)行分類，用戶通過點(diǎn)擊標(biāo)簽進(jìn)行查看相關(guān)的輪播組合。
此方式更適合一些電商平臺、新聞網(wǎng)站這種內(nèi)容過多的產(chǎn)品
如下圖國外社交媒體網(wǎng)站則使用了標(biāo)簽進(jìn)行分類，此處提一句輪播不僅限于首屏banner。他的用處可落地在各個場景。
在banner首屏中，顯示的內(nèi)容越多，越能激發(fā)用戶進(jìn)行點(diǎn)擊，像上面講過的農(nóng)業(yè)產(chǎn)品網(wǎng)站就使用下一張預(yù)覽圖的形式進(jìn)行展示，當(dāng)然不僅局限于這種形式，如下圖中的餐飲網(wǎng)站把所有的輪播banner展示給用戶觀看。
相對于縮放圖，圖標(biāo)展示效果上也較好，空間占用更少，使用這種方式需要謹(jǐn)慎，對圖標(biāo)的識別性要求較高，我印象中能夠使用的這種方法的網(wǎng)站是蘋果官網(wǎng)，讓產(chǎn)品抽象化展示。
在移動端也存在這種設(shè)計手法，但是基于分辨率原因移動端的縮略圖展示過少，最常見的如下圖中的馬蜂窩和企鵝電競。
輪播最大的缺陷則是像剛開始講的用戶會默認(rèn)為廣告，對此可以使用個性化設(shè)計突破用戶心理障礙，使輪播banner更具備親和力。
如下圖中的數(shù)碼科技網(wǎng)站，利用產(chǎn)品與背景的結(jié)合營造出一種功能性的展示。
再例如下圖中蘋果官網(wǎng)入口，結(jié)合百度的定制化功能在大搜中進(jìn)行個性化處理，把常規(guī)的banner輪播以功能卡片形式進(jìn)行展示，同時卡片承載產(chǎn)品動畫引導(dǎo)用戶進(jìn)行點(diǎn)擊。
蘋果官網(wǎng)進(jìn)入后隨意點(diǎn)擊產(chǎn)品介紹頁后會發(fā)現(xiàn)，蘋果把輪播結(jié)合鼠標(biāo)滾輪營造沉浸式觀看，每個屏效內(nèi)都展示產(chǎn)品一個功能特點(diǎn)，打破傳統(tǒng)banner的展現(xiàn)形式。
自動播放的輪播會根據(jù)用戶的耐心和用戶的訴求進(jìn)行調(diào)整優(yōu)先級，如我們平常使用產(chǎn)品時會忽略banner廣告，我們會更加關(guān)注移動中的東西，特別是在移動端上通常是banner進(jìn)行輪播時才會關(guān)注。
谷歌設(shè)計團(tuán)隊曾對banner輪播的時間進(jìn)行測試，測試結(jié)果得出5s-7s的輪播時間最佳，在這個時間內(nèi)用戶有足夠的時間對輪播banner上的產(chǎn)品內(nèi)容進(jìn)行了解。
如下圖谷歌商店的輪播時間設(shè)定在6s。
同時還需要注意，在自動播放的過程中如果用戶鼠標(biāo)hover上去后，則需要判定播放暫定，避免用戶錯過感興趣的內(nèi)容。
本文從輪播的樣式、特性、用戶對輪播的認(rèn)知等多方面的介紹，在實(shí)際產(chǎn)品中輪播有很多可用性上的問題存在，我們在設(shè)計中則需要根據(jù)自己產(chǎn)品的特性、用戶群體特點(diǎn)等多維度去思考適合什么樣的輪播形式。
藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加ben_lanlan，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系
作者：愛吃貓的魚____ 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計公司
因?yàn)槲恼聦?shí)在太長，所以會分為上下兩篇發(fā)布，本篇為下篇，主要內(nèi)容為：
- 02. 字體字號
- 03. 圖標(biāo)大小
- 04. 組件尺寸
本小節(jié)要開始介紹前面沒有說的文字了，文字的尺寸至關(guān)重要，但首先理解了前面所講的控件之后，再去思考文字尺寸的用法，會相對更容易一些，它們之間也有一些有趣的聯(lián)系。
而在對控件和文字都掌握熟練以后，才能進(jìn)入后面的組件設(shè)計，這是我認(rèn)為的一個比較合理的學(xué)習(xí)過程。
首先我們知道，安卓和 iOS 應(yīng)用的中英文字體各不相同，蘋果是用蘋方和 San Francisco，安卓使用思源黑體和 Roboto。
?
如果不知道該去哪里下載這些字的同學(xué)，可以在我公眾號里回復(fù)“字體”下載對應(yīng)的字體源文件。
在后面我們主要以 iOS 作為說明的對象，安卓則同理，可以直接參照 iOS 的字體尺寸設(shè)置。
一、英文的字號
在蘋果的官方建議中，有羅列出比較完整的文字字號建議，但大家一定要謹(jǐn)記，那些就是建議，并不需要在非官方的組件中應(yīng)用那些字號。下圖是蘋果默認(rèn)字體尺寸，詳見我們翻譯的 iOS 規(guī)范第 124 頁 (公眾號中回復(fù)“iOS”可獲得下載鏈接)。
首先我們要先劃分出一個文字字號的取用范圍，之后所有字體的字號設(shè)置就在那里面挑選。
在 UI 中，最小字號的依據(jù)一般有兩個，一個是人眼的可見度，另一個是屏幕的顯示極限，綜合兩者最小的字號應(yīng)該在 9pt 。而最大的字號，以 iOS11 的標(biāo)題字號 34pt 為準(zhǔn)即可。
?
從 9-34，理論上其中每一個整數(shù)都可以使用，但我還是建議要應(yīng)用一定的習(xí)慣。下面，就是我在英文應(yīng)用設(shè)計中會使用的字體字號列表，為了便于記憶，我就只拆分成三種類型，初學(xué)者在使用時直接套用就可以。
? 標(biāo)題：34、28、24、22、20
? 閱讀：18、16、14、12
? 注釋：11、10、9
注：單位均為pt
在英文應(yīng)用中，我們應(yīng)用的字號大小隨項(xiàng)目復(fù)雜度決定，通常，尺寸會在五種以上，兩種標(biāo)題、兩種正文、一種注釋類字號，當(dāng)然，我們還會通過字重和色彩進(jìn)一步劃分，不過那不在這里的討論范圍中。例如下面我使用五種字號尺寸設(shè)計出來的原型案例：
另外，在 iOS 中，字號小于 20pt 使用 SF Pro Text，大于等于 20pt 時則使用 SF Pro Display 字體，這點(diǎn)大家需要牢記。
?
數(shù)字字體則可以等同于英文，但如果有需要展示數(shù)據(jù)的需求，那么最大尺寸就要靠自己的判斷了。
二、中文字體
中文字體和英文字體的最大差異在于筆畫數(shù)，很多中文的筆畫和結(jié)構(gòu)都異常復(fù)雜，如 “嚷”、“饕”、“餐”等，所以，最小的尺寸不可能和英文相等。建議最小中文字號使用 11pt。
至于最大的中文，因?yàn)樘O方并沒有 SF pro 字體那么豐富的字重，字號過大會有正負(fù)形失衡的違和感，所以，最大字號的尺寸也應(yīng)比英文小。
下面是我在中文應(yīng)用中建議使用的字號：
? 標(biāo)題：28、24、22、20
? 正文：18、16、14
? 注釋：12、11
注：單位均為pt
前面做過的原型，應(yīng)用的就是這些字號。
?
中文的字號選擇范圍是比英文小的，并且，中文字重數(shù)遠(yuǎn)少于英文，我們在做中文應(yīng)用的排版遠(yuǎn)遠(yuǎn)比英文應(yīng)用的容易。很多新手誤以為英文更容易設(shè)計，那都是源自對英文的陌生，只是將字符純粹的當(dāng)成有節(jié)奏變化的幾何形狀而不是用來閱讀的文本，而如果涉及到需要閱讀的英文文本設(shè)計時，字體、字號、字間距以及行高的選擇就會變得異常復(fù)雜。
三、文字的邊距
講完了字號的選擇范圍，這里我們就要再來討論下一個問題，就是如何更細(xì)化地去選擇字號。
首先，合理的字號是和環(huán)境息息相關(guān)的，而這種聯(lián)系最多的體現(xiàn)在文本區(qū)域的邊距上。能被合理閱讀的文本段落，是需要留白的，過于擁擠的文字排列只會造成閱讀的不適。
因?yàn)榍懊嫖覀円呀?jīng)說過控件的尺寸如何設(shè)置，所以當(dāng)我們在設(shè)置文字時，很多時候是根據(jù)所定義的控件的高度，結(jié)合邊距來選擇文字的字號，下面通過一些控件來舉例。
例如我們定義了一個 40pt 高的按鈕，在設(shè)置文字時，嘗試將多種文字字號置入，過多的間距和過小的間距都會讓按鈕看起來不精致。合適的字體大小應(yīng)該是 16pt。
?
而如果設(shè)置了一個 24pt 按鈕，那么得到的結(jié)論應(yīng)該是 12pt。
?
輸入框的文字應(yīng)用和按鈕相同，也以上下間距作為主要參考。
?
字號的選擇，除了本身的定位（如標(biāo)題或正文）以外，是可以通過比較的方式得出最優(yōu)結(jié)果的。只要稍微花一點(diǎn)點(diǎn)時間，像上方案例演示的一樣將設(shè)計元素復(fù)制排列出來，就可以很快選出最適合的數(shù)值。
最后，前面說到的關(guān)于文字字號的設(shè)定，結(jié)合控件的尺寸規(guī)范，就能在下面決定組件的設(shè)計尺寸，缺一不可。
多做針對性練習(xí)，以提升對控件和文字的掌握熟練度是很有必要的。建議多做一些簡單界面的臨摹，并套用前面提到的元素尺寸，這樣很快就能適應(yīng)這種高效規(guī)范的方式了。
這一節(jié)要講講關(guān)于圖標(biāo)的尺寸，應(yīng)該是最容易的地方，因?yàn)榍懊娴膬?nèi)容中，我們已經(jīng)規(guī)范并習(xí)慣了使用 4 的倍數(shù)作為尺寸的最小量度，那么在圖標(biāo)中只需要同樣遵循這樣的原則。從相關(guān)的圖標(biāo)素材下載網(wǎng)站就可以發(fā)現(xiàn)這種規(guī)律，如 iconfont、iconsearch 等等。
一、圖標(biāo)的權(quán)重
在設(shè)置具體的尺寸前，我們還是要談?wù)剻?quán)重的問題。正常的 APP，通常會包含大量的圖標(biāo)，而這些圖標(biāo)，大小并不會完全一樣。如下面的案例：
之所以這些圖標(biāo)的大小不一樣，和它們代表的功能和權(quán)重分不開關(guān)系。我們可以簡單將應(yīng)用內(nèi)會出現(xiàn)的圖標(biāo)分成 3 類，代表不同級別的權(quán)重。
最高：頁面中重要的功能入口
?
中等：底部導(dǎo)航欄用的圖標(biāo)
?
最低：一般的工具類圖標(biāo)
當(dāng)然，這是我簡化過的邏輯，類似淘寶、京東、攜程這類大型應(yīng)用，就還可以劃分出更細(xì)致的權(quán)重類型。而不同的權(quán)重實(shí)際上就對應(yīng)了不同尺寸的圖標(biāo)，如果有 3 種權(quán)重，那么我們在設(shè)計的過程里就會設(shè)計三種尺寸的圖標(biāo)。
二、圖標(biāo)的尺寸
首先劃重點(diǎn)：圖標(biāo)的尺寸，主要指的是圖標(biāo)在應(yīng)用中占據(jù)的矩形區(qū)域，而不是圖標(biāo)本身圖形的區(qū)域。
我們在設(shè)計具體圖形前，是先通過確定矩形區(qū)域的尺寸，再制作參考線然后進(jìn)行設(shè)計的。而不是隨意設(shè)計了圖標(biāo)再對應(yīng)縮放到指定的位置。
例如，設(shè)計快速入口時，一開始我們定義出的這個組件為分割成兩行四列的矩形塊，即每個入口的實(shí)際大小。
所以，下面就是我對矩形尺寸定義的建議：
? 最大：64、56、48
? 中等：44、36、32
? 最?。?8、24、20
注：單位均為pt
根據(jù)圖標(biāo)所處區(qū)域的上下間距，從上方挑選合理尺寸即可，過程與字號設(shè)置是一樣的，這里就不多做演示了。
還需要注意，在一套 App 中，圖標(biāo)出現(xiàn)的尺寸數(shù)盡可能減少，尤其對于新手，只需要應(yīng)用 2-4 套不同的尺寸即可，否則也會對視覺體驗(yàn)帶來明顯的破壞。
最后，就要說說組件的尺寸是怎么設(shè)置了。
首先我們要知道組件是什么，它是一個包含了控件、文字、圖標(biāo)的功能合集?？梢允且粋€獨(dú)立的信息展示單元，也可以完成一個復(fù)雜的操作流，是學(xué)習(xí) App 設(shè)計中最重要的環(huán)節(jié)。
?
一、組件的尺寸原則
定義組件的長和寬，方式有兩種，一種是根據(jù)外部環(huán)境制定，一種是根據(jù)內(nèi)容調(diào)節(jié)。
第一種，即通過外部的元素來確定組件的尺寸。例如我們要設(shè)計一個頭部的 banner 輪播圖組件，以左右可以滾動的形式展現(xiàn)。那么首先要確定我們希望輪播圖在屏幕中占多少比例，再確定高度。例如我們覺得大致要有屏幕 1/3 高，那么可以設(shè)定高度為 220pt（664/3），而根據(jù)上下對齊的原則，左右就由屏幕寬減去左右內(nèi)邊距 16pt 即可。
?
第二種，是根據(jù)我們里面添加的內(nèi)容元素來確定寬和高。例如在首頁輪播圖下方，添加左右滾動的卡片，那么我們先設(shè)定里面的控件和文字尺寸，然后再通過添加內(nèi)邊距的形式確定組件的尺寸。
當(dāng)然，也有混合的定義方式，如一開始定好寬，根據(jù)內(nèi)容設(shè)定高，像花瓣瀑布流的卡片，或者定義好高來調(diào)節(jié)寬。具體使用什么形式，就要因地制宜了。
下面會通過幾個常見的組件案例，來演示如何定義它們的尺寸。
二、動態(tài)卡片
動態(tài)卡片是很常用的組件，通常以卡片的形式展現(xiàn)。每條動態(tài)通常占據(jù)內(nèi)容區(qū)域的整列，即左右減去制定好的內(nèi)邊距 16pt，那么就是 375-32 = 343 pt 的寬。而高度，就要根據(jù)里面所包含的元素了，如下圖所示。
三、設(shè)置列表
設(shè)置列表中，由高度相同的列表項(xiàng)組成，它們的高和寬應(yīng)該是根據(jù)設(shè)計的風(fēng)格一開始就制定好，如比較緊湊的風(fēng)格我們采用 48pt 的高，比較寬松的風(fēng)格就采用 64pt 的高。然后我們再排列內(nèi)部的元素，進(jìn)行垂直居中。
四、班次信息
常見的班次信息，我們在定義它尺寸時，也是根據(jù)內(nèi)容來考慮的。首先確認(rèn)它是一個撐滿屏幕的組件即 375pt 寬，再填入對應(yīng)的字段內(nèi)容。
這時候可以將上下的內(nèi)容拆分成3個不同的子模塊：班次、時間、更多操作，班次和更多操作采用固定高度 44pt 的方式，時間則根據(jù)內(nèi)容設(shè)置邊距的方式，最后得到的高度的和，就是班次信息組件的高度。
?
五、瓷片區(qū)
主流的瓷片區(qū)，其實(shí)也由若干子模塊組合而成，而如淘寶這類會有很多瓷片區(qū)并列的狀態(tài)，我們優(yōu)先要考慮的，是每個瓷片區(qū)在屏幕中的占比，也就是先定義好瓷片區(qū)的高度，再拆分內(nèi)容的子模塊。
例如劃分為兩行的瓷片區(qū)，總高度為 280pt，上方的模塊高度為 180pt，下方的模塊高度為 100pt，里面的元素，再根據(jù)這個內(nèi)容區(qū)域進(jìn)行排版。
完成一個完整的組件，是根據(jù)它的內(nèi)容和周圍的環(huán)境決定，我們只要感覺前面幾個部分所說的參數(shù)設(shè)置進(jìn)行分解，就可以很輕松的定義出組件的實(shí)際尺寸。而無論任何組件，它們都沒有固定的尺寸值，需要大家不斷的練習(xí)掌握制定的思路。之后再設(shè)計完整的頁面，或整套應(yīng)用時，就能大大提升效率和設(shè)計質(zhì)量。
藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加ben_lanlan，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系
作者：酸梅干超人。 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計公司
- 00.基礎(chǔ)原則
- 01.控件尺寸
一、官方規(guī)范
對于剛開始思考 UI 元素尺寸的新人，通常第一反應(yīng)都是去看官方規(guī)范，新人都以為官方設(shè)計規(guī)范的作用就是告訴你們元素的大小和怎么設(shè)置，只要看完了就能懂得如何設(shè)計 iOS 或 Android 應(yīng)用。而實(shí)際上，這些規(guī)范并不能幫助你們解決這個問題，因?yàn)樵O(shè)計規(guī)范涵蓋的內(nèi)容遠(yuǎn)遠(yuǎn)比這些復(fù)雜，比如我們之前翻譯過的 iOS 規(guī)范。
超人的電話亭獨(dú)家譯制 iOS 系統(tǒng)規(guī)范
規(guī)范鏈接：https://pan.baidu.com/share/init?surl=j0dtln14kKdUEfp19jewKQ
密碼：vpkj
我們想要搞清楚 iOS 和 Android 官方元素的具體尺寸，最好的方法就是去下載它們的官方 UI-Kits，如下圖的安卓組件庫所示。
官方并不會提供一個列表，逐一羅列每個元素的長寬和其它參數(shù)，所以想要弄明白參數(shù)的問題，要自己在這兩套素材庫中選中元素才能查看其尺寸。如下圖左側(cè)這個按鈕，我們就能看見它的各項(xiàng)屬性：寬 359pt、高 57pt、圓角 14pt；右側(cè)的 Alert 提示框則寬 270pt、高 230pt、圓角 14pt。
因?yàn)?iOS 組件庫下載下來的都是 dmg 格式的文件，很多 windows 用戶不知道該怎么打開它，這里只需要百度搜索「DMG 提取器/查看器」就能下載到專門的解壓工具了。
在初期，我們想要設(shè)計出符合官方規(guī)范的界面，就可以嚴(yán)格照搬官方的元素設(shè)置。但是，即使官方的源文件所包含的元素及字體已經(jīng)非常多了，在實(shí)際設(shè)計過程中，還是會出現(xiàn)它們無法覆蓋的元素類型，需要依靠我們自己去給出尺寸。
還有如字體的應(yīng)用，官方源文件使用的語言是英文，光是官方應(yīng)用的兩種 SF 字體，就包含了十幾種字重，所以我們可以看見文字應(yīng)用面板中密密麻麻的字體類型。在真實(shí)的中文設(shè)計場景下，我們是不可能照搬這種規(guī)范的！
所以每一個學(xué)習(xí)UI設(shè)計的新手，都必須要明白，官方的規(guī)范終究只是一種建議，我們可以選擇遵守也可以選擇不遵守。如果一味的照搬這些內(nèi)容，我們是無法設(shè)計出有趣個性化的界面的，比如下面這幾款已經(jīng)看不到 “ iOS 設(shè)計 ”的應(yīng)用。
官方的參數(shù)決定我們設(shè)計的下限，當(dāng)你不知道該怎么做，或者設(shè)計的目標(biāo)就是以系統(tǒng)原生的體驗(yàn)和視覺為準(zhǔn)，那么照搬就行了！后面文章要說的，就是脫離開這些束縛之后，該怎么自定義 UI 元素的尺寸。
二、尺寸設(shè)置原則
UI 和平面不一樣的地方，就是極其關(guān)注元素屬性的具體數(shù)值。平面的排版無論是海報或畫冊，使用百分比、目測的形式就足以讓我們做出很多優(yōu)秀的作品，無需緊盯著其中出現(xiàn)的每個元素的長寬高的數(shù)值。而 UI 的設(shè)計中，無論字體、圖標(biāo)還是按鈕，都需要我們嚴(yán)謹(jǐn)?shù)囟x它們的長寬高，如下圖設(shè)計一個按鈕的操作：拖拉出矩形之后，我們依然需要到屬性設(shè)置的對話框中去輸入精確到1pt的數(shù)值。
這么做是因?yàn)樵陔娮悠聊恢?，圖像的呈現(xiàn)是由屏幕中的像素點(diǎn)來完成的，像素點(diǎn)是最小的顯示單位，一個像素只能顯示一個顏色，所以如果設(shè)置了帶有小數(shù)點(diǎn)的數(shù)值，那么這個元素的邊緣就會虛化。所以為了避免這種情況的出現(xiàn)，我們就得用整數(shù)來定義元素的長和寬。
這當(dāng)中還涉及到不少比較復(fù)雜的屏幕顯示原理問題，尤其是和像素倍率相關(guān)的基礎(chǔ)知識，我會在另外的文章里分享。
需要注意的是，文章中出現(xiàn)的所有尺寸數(shù)值的單位，默認(rèn)以 iOS 官方規(guī)定的邏輯像素單位「pt」為準(zhǔn)，即 XD 和 Sketch 默認(rèn)畫布的單位，若在 PS 中設(shè)計需要在這個基礎(chǔ)上乘以 2。
只有分隔線，是唯一可以不使用整數(shù)的特例。因?yàn)?1pt 的分隔線看起來會非常粗，一點(diǎn)也不精致，感興趣的同學(xué)可以自己在 Sketch 或 XD 中畫個列表然后用 1pt 的線條做分隔，再導(dǎo)出到手機(jī)里觀看效果。即使是官方應(yīng)用，也主要使用 0.5pt 的線條做分隔。
無論是在 iOS 還是在 Android 的規(guī)范中，都提到過使用 8 x 8 的網(wǎng)格做輔助，這導(dǎo)致網(wǎng)上有很多片面的文章會反復(fù)強(qiáng)調(diào)對元素的尺寸使用 8 的倍數(shù)。
iOS: 使用 8px 網(wǎng)格系統(tǒng)：網(wǎng)格系統(tǒng)可以讓線條和圖像內(nèi)容在所有尺寸上保持清晰，無需太多的修飾和銳化。將圖形邊界對齊到網(wǎng)格上，減少按比例縮小圖像時出現(xiàn)的半像素和內(nèi)容模糊的情況。
Android：所有組件都與間隔為 8dp 的基準(zhǔn)網(wǎng)格對齊。排版/文字與間隔為 4dp 的基準(zhǔn)網(wǎng)格對齊。在工具中的圖標(biāo)同樣與間隔為 4dp 的基準(zhǔn)網(wǎng)格對齊。
實(shí)際上，我們在真實(shí)的設(shè)計環(huán)境中，建議大家使用 4 的倍數(shù)作為一般元素的尺寸倍率即可，如 8、12、16、20、24……等，它的好處我會在后面的文章中做說明。如果發(fā)現(xiàn) 4 的倍數(shù)無法滿足某些特定的需要，如：多 4pt 太大，少 4pt 太小，那么我們就可以使用一般的偶數(shù)如18、22、26 等。
以上就是我們一開始要建立的元素尺寸原則，精簡完即：
使用整數(shù)，只有分隔線可以使用 0.5 的小數(shù)
使用 4 的倍數(shù)，根據(jù)實(shí)際情況可以切換成一般偶數(shù)。
有了這樣的原則，并養(yǎng)成習(xí)慣，我們就能在每次設(shè)計前對元素尺寸有個大致判斷，然后再根據(jù)需要按 4 的倍數(shù)調(diào)整，如下面設(shè)計注冊登錄頁面的輸入框作為案例。
開始我使用 280pt 寬，44pt 高的尺寸，但是覺得有點(diǎn)僵硬，太正式了！這時候反思認(rèn)為應(yīng)該是輸入框太矮導(dǎo)致的，所以高度上改成 44+(4x2)=52pt 。這時候又覺得太高了，實(shí)際輸入內(nèi)容也沒那么寬，于是再對高減 4，寬減 40，獲取最終結(jié)果。
所以，因?yàn)檫@樣的操作原則，決定了 UI 元素的尺寸不是憑感覺用鼠標(biāo)拖拽出來的（拖動效率太低），而是在元素的屬性欄中填入它們的數(shù)值。UI 的設(shè)計過程就是一個不停鍵入?yún)?shù)和調(diào)整參數(shù)的過程。
這里要聲明，在我的描述體系中，控件指的是：界面中最基本的交互單位，如按鈕、滑塊、開關(guān)、分頁控件等，更復(fù)雜的如動態(tài)卡片，功能快速入口等，就歸入組件中，便于我們理解。
下面，我會根據(jù)前面定義的基礎(chǔ)原則，分別講解控件應(yīng)該使用的尺寸范圍。
一、按鈕 ( Buttons )
按鈕是界面交互操作中使用最頻繁的控件了，當(dāng)然按鈕呈現(xiàn)的形式也多種多樣，比如可以是文字、圖片、圖標(biāo)、卡通形象等等。在這里，我們只聚焦于矩形的基礎(chǔ)按鈕。
在進(jìn)入具體參數(shù)的講解前，要先理解一點(diǎn)，按鈕實(shí)際上是所有控件中最復(fù)雜的一個。并不是因?yàn)樵谠O(shè)計樣式上復(fù)雜，而是因?yàn)榘粹o承載了最多的產(chǎn)品訴求，權(quán)重差異極大，例如看下面的案例。
在上圖里，可以點(diǎn)擊的東西不少，我們只說外觀是標(biāo)準(zhǔn)樣式的按鈕，就有 9 個。而這里面，權(quán)重最高的必然是 “加入購物車”。權(quán)重最低的，則是前往新品頁。
要定義按鈕尺寸，我們首先需要整理清楚不同的按鈕在界面或整個應(yīng)用中的權(quán)重。尺寸和權(quán)重是成正比關(guān)系的。當(dāng)然，顏色也是對重要性表現(xiàn)的關(guān)鍵因素，不過不在這里展開。
按鈕高度
當(dāng)我們設(shè)計按鈕時，優(yōu)先從高度入手，再去定義寬。為了便于新手理解，我首先從高度上來匹配權(quán)重，分成高、中、低三類：
- 高權(quán)重：40-56pt
- 中權(quán)重：24-40pt
- 底權(quán)重：12-24pt
高權(quán)重的按鈕，類似登錄頁的注冊、登錄，購物詳情頁的購買，流程頁中的下一步，它們的最小高度應(yīng)該從 40pt 開始遞增。低于這個數(shù)值，那么按鈕就很難在頁面中起到視覺支撐的作用，因?yàn)闀杏X到它太細(xì)了。
中權(quán)重的按鈕，類似個人主頁的關(guān)注、點(diǎn)贊、評論按鈕等。這個層級的按鈕依舊有比較高的交互頻次，所以我們必須得保證它易于點(diǎn)擊。24pt 是在我經(jīng)驗(yàn)中便于點(diǎn)擊得最小尺寸了。這種按鈕通常是組件中的一部分，不像層級最高的按鈕常常是處于一個孤立的空間，所以高度如果超出 40pt，就會對當(dāng)前模塊產(chǎn)生直觀的破壞。
低權(quán)重的按鈕，就類似查看更多、標(biāo)簽、詳情等類型，相對于交互屬性，這類按鈕具備更多的提示屬性，只要讓用戶能看見，又不需要太顯眼。尺寸不大于 24pt，能容納內(nèi)部文字或圖形元素即可。
按鈕寬度
主流的按鈕都是橫向的長方形，正方形的也有，但就是不能變成縱向的矩形。
按鈕的寬度主要和內(nèi)容掛鉤，內(nèi)容數(shù)量越多，按鈕自然也就越寬。唯一的例外，只有高權(quán)重的按鈕，可以無視內(nèi)容的長度。因?yàn)樗鼈冃枰嗟膮^(qū)域，往往都是撐滿屏幕內(nèi)容區(qū)域或橫跨屏幕的，可以特殊處理。
普通按鈕，左右邊界與內(nèi)容的距離過大，就會讓按鈕看起來非常的不協(xié)調(diào)。所以我們要根據(jù)內(nèi)容的長度來設(shè)置按鈕的寬。左右間距的大小，應(yīng)該小于或等于上下間距的 2 倍。
按鈕圓角
最后，按鈕尺寸還有一個屬性，就是按鈕的圓角。矩形的四角有三種類型，即直角、圓角和半圓。
為矩形設(shè)置圓角，是為了讓按鈕看起來有一定的圓潤感不會顯得太尖銳鋒利，這種圓角的數(shù)值要給得更加謹(jǐn)慎，只要超出了一定的范疇，就會對視覺的和諧產(chǎn)生影響，我習(xí)慣稱呼為——半圓不圓，如下圖右側(cè)的錯誤案例。
所以，我們在設(shè)計圓角的過程中，一定要仔細(xì)感受圓角在畫面中的和諧性。而圓角的設(shè)置范圍，小于等于高度的 1/4。例如，一個 24pt 的圓角矩形，圓角的尺寸就應(yīng)該不大于 6pt。
以上就是按鈕相關(guān)尺寸定義的說明，當(dāng)然，在真實(shí)的設(shè)計需求中可能遇到很多無法滿足的情況，這就需要大家多做嘗試了。
二、輸入框 ( Text Fields )
輸入框也是比較常用的控件之一，它和按鈕有非常接近的外形。最常見的就是登錄頁賬號密碼輸入框，以及首頁上方的搜索欄了。
輸入框的高度，常規(guī)在 36-56pt 之間。低于 36pt 時則輸入框看起來會非常擁擠，比如我用下面學(xué)生的案例做個演示。
三、步進(jìn)器 ( Steppers )
常見的步進(jìn)器，就是輸入框和按鈕的結(jié)合。左右有兩個用來增加數(shù)量的按鈕，中間是允許我們直接鍵入數(shù)字的輸入框。在尺寸上，它也介于兩者之間，高度在 28-40pt 之間。下面我再用學(xué)員的作業(yè)做次演示，當(dāng)?shù)陀?28pt 以后，就會發(fā)現(xiàn)在屏幕中的占比實(shí)在太小了。
步進(jìn)器中常見的錯誤，是在我們在繪制左右兩個按鈕，設(shè)置外框的圓角時，并沒有合理的去掉內(nèi)側(cè)的圓角，這是絕對不應(yīng)該忽略的細(xì)節(jié)。
四、下拉菜單 ( Dropdown Menus )
下拉菜單要注意它具有多種狀態(tài)，默認(rèn)、展開和選中。默認(rèn)狀態(tài)與輸入框類似，主流的高度也使用 36-56pt。但是，當(dāng)菜單展開后，下方多出來的選項(xiàng)菜單，就值得注意了。
菜單的寬度正常情況下與默認(rèn)狀態(tài)相同，而高度根據(jù)里面包含的選項(xiàng)數(shù)量決定。單行選項(xiàng)的高度，不大于默認(rèn)的選項(xiàng)框。但也不能過小，新手很容易在彈出菜單中設(shè)定過小的高度，使個控件看起來會非常的別扭。
五、開關(guān) ( Switches )
開關(guān)也是按鈕的一種形式，通常出現(xiàn)在設(shè)置頁的列表中，上方就是它主流的幾種樣式。在設(shè)計開關(guān)的時候，要先確定一個矩形區(qū)域，高度使用 24-32pt，寬度則用 1:2 的比例。如高度使用 28pt，那么寬大致可以使用 56pt，之后再將其他細(xì)節(jié)填入。
六、滑塊 ( Sliders )
滑塊形式接近開關(guān)，通常在中間有一個操作節(jié)點(diǎn)，下面有一個用來表示區(qū)間的線條。實(shí)際上我們該做的就是分別決定它們的尺寸。
節(jié)點(diǎn)如果做的太小，不僅會顯得難看，而且會讓人覺得很難操作。它的直徑應(yīng)該在 16-28pt 之間。而下方的橫線，寬度由所在內(nèi)容區(qū)域的寬決定，高度一般在1-4pt 之間。
七、頁面指示器 ( Page Controls )
指示器用來展示元素序列，雖然在 APP 中沒有太重要的作用，但既然我們加進(jìn)去，就要讓它看起來和諧。大多數(shù)人在定義指示器時，不是太大，就是太小?？梢灾粡暮竺嫣峁┑某叽缰羞x擇，就能保證指示器的尺寸不會出錯。
指示器主要是圓形和矩形兩種形式：
- 圓形：8、10、12pt ( 直徑 )
- 矩形：14×2 pt、16×2 pt、20×3 pt
八、提示紅點(diǎn) ( Badges )
提示紅點(diǎn)也是大多數(shù)應(yīng)用會使用的一個控件，它的大小應(yīng)該在 24-32 pt 之間。作為一個圓形，這個控件設(shè)計起來很容易，但設(shè)計師往往忽略一件事，那就是如果中間的數(shù)值超過 10 變成 2 位以后，要怎么處理。
在設(shè)計這樣的元素時，我們要用一個矩形元素來表現(xiàn)，即畫一個正方形，然后將圓角設(shè)成最大，那它看上去就是一個圓形。那么每增加一位字符，我們就需要為這個矩形增加該字符的寬度，可以用左右間距判斷。
因?yàn)橄嗤痔栂?，不同英文、?shù)字的寬度都是不一樣的，所以我們要根據(jù)實(shí)際輸入的字段長度去決定圓角矩形的寬度。
九、分頁控件 ( Tabs )
后一個控件，就是分頁控件了，安卓中的 Tabs。這個元素在設(shè)計時也受到排版空間的影響。較為寬松的排版風(fēng)格，高度就比較大，若擁擠則反之。下面是高度的取值：
- 高權(quán)重：40-48pt
- 低權(quán)重：28-36pt
分頁控件主要應(yīng)用在頭部和頁面中部的組件中，如下方的案例：
雖然很多時候分頁器沒有背景色，但是背景的矩形框是必須畫出來的，即隱藏填充和描邊，這樣我們就可以通過垂直居中的方式，來確定中間文字的位置。
一個完整的分頁控件，里面會包含兩個或以上的選項(xiàng)，所以定義每個選項(xiàng)的寬是必要的。通常，我們有兩種定義方法，一種是選項(xiàng)少時，直接進(jìn)行均分顯示，另一種是選項(xiàng)較多，采取定寬模式，寬度最小建議在 64pt以上，才不會顯得過度擁擠。
分頁控件選項(xiàng)處于選中狀態(tài)時，有的設(shè)計是修改背景色，有的是修改文字屬性，但今天最常見的就是加入下劃線。這個元素如果定義得不好，會讓整個控件看起來非常粗糙，它需要在樣式中能起到畫龍點(diǎn)睛的作用。
下劃線分為兩種，一種是貼在控件底部的，另一種是在文字下方懸浮的。兩種方式線條應(yīng)該使用的高度都不應(yīng)該大于 2pt。寬度的話，前者和每個選項(xiàng)背景區(qū)域相等，后者則可以在 8-16pt 間（小于文字總寬）。下面是正確設(shè)計效果：
十、尾聲
前面說到了不少控件的尺寸，那么真實(shí)應(yīng)用的效果會如何呢？下面我就用原型的方式，不考慮樣式與色彩將它們組合到完整的頁面中去。
可以看到，模塊大小很均衡，看上去不會覺得哪些地方太大或太小，只要稍加填充樣式，那么就可以變成完整的設(shè)計稿了。
這些參數(shù)雖然不能覆蓋所有特殊的狀況和需求，但至少可以保證這些控件不會被設(shè)計得很奇怪。當(dāng)設(shè)計師沒有對于特殊化風(fēng)格設(shè)計的控制能力時，就先學(xué)會正確的使用上面的這些參數(shù)吧。
藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加ben_lanlan，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系
作者：酸梅干超人 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計公司
“ 增長是現(xiàn)在業(yè)務(wù)的硬指標(biāo)，大環(huán)境下設(shè)計師也免不了要背這樣的KPI。 ”
設(shè)想一下這樣的畫面，如果在你的Feeds列表里面推薦的是一些機(jī)械鍵盤和游戲裝備，那作為用戶，會心想“暈，這些東西又不能讓我變瘦變美，跟我啥關(guān)系？往下翻翻再看看有沒有什么可買的東西”。
2. 商戶信息：品牌標(biāo)簽（比方說品牌、優(yōu)質(zhì)商家等）。商戶信息的透出，對追求品牌的用戶來說是個有利的促進(jìn)因素。如下圖中商戶的“品牌”標(biāo)簽。
光有這樣的利益點(diǎn)也還不夠，設(shè)計師需要做的就是將這些信息進(jìn)行表達(dá)，怎樣表達(dá)？設(shè)計方案將卡片進(jìn)行結(jié)構(gòu)化和組件化。什么是結(jié)構(gòu)化和組件化？如之前的圖（某平臺的商品卡片結(jié)構(gòu)）
三、興趣點(diǎn)的試探
藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加ben_lanlan，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系
作者：百度MEUX 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計公司
在今天的 UI 設(shè)計領(lǐng)域，由扁平化設(shè)計風(fēng)格占據(jù)主導(dǎo)地位，已經(jīng)是無可辯駁的事實(shí)了。扁平化應(yīng)用除了提升用戶獲取信息的效率外，對設(shè)計師而言就是設(shè)計的難度大大降低了。
一個界面的 UI 視覺元素，僅僅只需要圖片素材、矢量圖標(biāo)、幾何、文字，UI 設(shè)計師的工作僅僅是對內(nèi)容進(jìn)行組織和排版，涉及到原創(chuàng)的也僅僅只有少量的圖標(biāo)（大多數(shù)人還畫不好）。
這種狀態(tài)持續(xù)了很多年，看起來歲月一片靜好。
但是，這兩年市場發(fā)出了一些不同的聲音，那就是打破純扁平風(fēng)格的 UI 風(fēng)格、元素開始越來越盛行了。
比如新擬態(tài)風(fēng)格在年初炒了一波熱度，各大平臺和公眾號都鋪天蓋地的發(fā)文和介紹，介紹它的設(shè)計理念和設(shè)計方法。
還有就是以餓了么、美團(tuán)為首的國民級應(yīng)用在主頁顯眼的位置里使用極具識別性的擬物圖標(biāo)，引起設(shè)計圈的熱議。
首先講講新擬態(tài)設(shè)計，之所以之前只字不提，是因?yàn)槲覍@個風(fēng)格實(shí)在沒什么好感，有種對純擬物借尸還魂的味道，且它的樣式對于信息密度高的應(yīng)用是完全不適用的，只能活在飛機(jī)稿里。
而國內(nèi)大型應(yīng)用開始在實(shí)際項(xiàng)目中上線擬物圖標(biāo)，意義就不一樣了，證明這樣的設(shè)計是經(jīng)過幾個大廠團(tuán)隊認(rèn)可，且有共識的。
當(dāng)然，這并不因?yàn)榇髲S用了就無腦推崇。而是純扁平的設(shè)計已經(jīng)越來越難滿足部分需要強(qiáng)視覺效果的頁面設(shè)計了。
今天的互聯(lián)網(wǎng)和過去不一樣，用戶的增長留存不再是過去一樣通過裂變和口碑完成，一個產(chǎn)品只要認(rèn)真打磨體驗(yàn)、功能就能獲得用戶的青睞和駐留。用戶的精力時間是固定的，而互聯(lián)網(wǎng)產(chǎn)品又層出不窮，佛系的等待用戶臨幸是沒有出路，這種現(xiàn)狀也被稱為互聯(lián)網(wǎng)的下半場。
佛系不行，當(dāng)舔狗更不行（成本太高），所以今天大型產(chǎn)品都在對待用戶的態(tài)度都選擇更具更具侵略性的霸道總裁人設(shè)。不僅是用色飽和度越來越高，運(yùn)營活動越來越密集，廣告和強(qiáng)提示也越來越多。比如剛打開了三個應(yīng)用，進(jìn)入的首頁大家自己意會……
有點(diǎn)扯遠(yuǎn)了，回到話題上。在這種掠奪用戶注意力的思路指引下，再做所謂的性冷淡、大留白、極簡風(fēng)就不會合適。當(dāng)對扁平的視覺效果已經(jīng)開發(fā)到極限以后，那么進(jìn)一步在一些細(xì)節(jié)處應(yīng)用擬物就成為必然的選擇。
而擬物的應(yīng)用并不可能鋪設(shè)到整個應(yīng)用中去，因?yàn)橥耆珨M物化的設(shè)計降低信息瀏覽效率是必然的，所以它只適合做局部的視覺強(qiáng)化，來加強(qiáng)用戶對特定區(qū)域的感知。
最常見的需要被凸出的要素，就是首頁中應(yīng)用的快速入口圖標(biāo)、分類圖標(biāo)和底部導(dǎo)航欄圖標(biāo)了。這些區(qū)域長期受運(yùn)營活動支配，相信大家已經(jīng)很習(xí)慣了。
只是，這些圖標(biāo)開始在脫離運(yùn)營活動的狀態(tài)下，也開始使用非扁平模式，那就不再是運(yùn)營設(shè)計師的工作職責(zé)，而是 UI 設(shè)計師們繞不過去的檻了（知識盲區(qū)）！
且除了 APP 外，其它領(lǐng)域?qū)τ跀M物設(shè)計的需求也會開始逐漸提升，尤其是目前越來越復(fù)（fu）雜（kua）的大屏數(shù)據(jù)展示、車載界面、定制系統(tǒng)等等。
作為新世代的 UI 設(shè)計師，多數(shù)人對擬物的設(shè)計可以說是完全空白的狀態(tài)，所以是時候要重拾擬物設(shè)計這個傳統(tǒng)藝能了。
前面我有提到，擬物主要應(yīng)用在關(guān)鍵的圖標(biāo)上，但應(yīng)用的擬物風(fēng)格并不是過去我們追求的那種極其真實(shí)、復(fù)雜的擬物，而是經(jīng)過一定簡化、抽象后的擬物 —— 輕擬物。我們要先來明確一下輕擬物到底是什么。
首先我們看看，過去優(yōu)秀的擬物圖標(biāo)和設(shè)計案例，它不僅表現(xiàn)元素本身的光影、透視、構(gòu)造，甚至?xí)浅Ｍ暾谋憩F(xiàn)物體表面的材質(zhì)和肌理。
這種圖標(biāo)單看起來確實(shí)很好看、細(xì)致。但是，把它丟進(jìn)我們當(dāng)前的頁面中是非常違和的，因?yàn)樗鼈兗?xì)節(jié)實(shí)在太多了，而且畫起來非常耗時間，不利于項(xiàng)目整體的推進(jìn)。
所以為了符合畫面的質(zhì)感，又要考慮項(xiàng)目效率，輕擬物這個概念開始被提出和應(yīng)用，作為一個折中的解決方案。
它和純擬物設(shè)計的共同點(diǎn)在于，也表現(xiàn)光影、結(jié)構(gòu)、透視，但它盡可能精簡了輪廓的復(fù)雜度、肌理和層級，呈現(xiàn)出更概念化、理想化、易于辨識的擬物圖形。
所以，我們主要去學(xué)習(xí)的內(nèi)容是輕擬物的設(shè)計方法，而不是徒手畫照片（這個可以緩緩）！
而輕擬物雖然 “輕”，但它依舊也還具備擬物的基本特征，是有實(shí)體質(zhì)感的。但是扁平從插畫到圖標(biāo)設(shè)計經(jīng)過多年的改版，有各種嘆（hua）為（li）觀（hu）止（shao）的設(shè)計，應(yīng)用大量的漸變、投影、模糊的效果，比如下圖案例。
這在我們之前圖標(biāo)的系列干貨中有提過，這類設(shè)計是面性圖標(biāo)的進(jìn)階版，它們依舊屬于扁平風(fēng)格的范疇之內(nèi)，不能和輕擬物劃上等號。
對于這幾年才開始學(xué)習(xí) UI 設(shè)計的新手來講，擬物已經(jīng)變成一個很陌生的事物，這對行業(yè)來說是比較悲哀的一件事。
因?yàn)閿M物的設(shè)計不僅僅是畫圖標(biāo)而已，對它的學(xué)習(xí)可以全方位的提升設(shè)計師的基礎(chǔ)素養(yǎng)，不僅包括對傳統(tǒng)美術(shù)（結(jié)構(gòu)、光影、色彩、透視）知識點(diǎn)的剖析，還包含對 PS 使用的深入探索。
可以說，自從擬物不成為必修題材以后，九成以上的UI設(shè)計師是不會用 PS 的，這極大的限制了他們自身的可能性和作品的多樣性。
輕擬物本身也是擬物，所以它的核心基礎(chǔ)和擬物設(shè)計師一致的，只是省略了更多復(fù)雜的細(xì)節(jié)。而對于整個擬物的體系來講，最重要的東西實(shí)際上只有2個，形體、光影。
形體的表現(xiàn)，就是對圖形外輪廓的樣式的呈現(xiàn)。在過去我們寫的圖標(biāo)分享中，有寫過面性圖標(biāo)進(jìn)階的設(shè)計中，可以包含更多的細(xì)節(jié)、內(nèi)部元素，而不是僅僅只有外輪廓。
輕擬物的形體設(shè)計就要處于進(jìn)階面性圖標(biāo)或者更難的水平之上，即你要把這個圖形的內(nèi)容有明確的示意并畫出來，而不是用抽象的圖形做填充而已。
比如大眾點(diǎn)評的快速入口圖標(biāo)，雖然看起來很復(fù)雜，但是那是配色上的復(fù)雜，而不是形體輪廓上的具象化。
換句話說，擬物插畫的圖形基底，類似扁平插畫風(fēng)格圖標(biāo)，不能表現(xiàn)得太抽象，也不能增加過多的細(xì)節(jié)，需要一種恰到好處的平衡（玄學(xué)），這就非常考驗(yàn)設(shè)計師的判斷和經(jīng)驗(yàn)了。
并且，在描繪輪廓的時候，新手盡可能的采取正視圖來進(jìn)行繪制，而不要通過俯視圖、側(cè)視圖、斜視圖等方法來呈現(xiàn)圖形的多個面，這樣難度會大幅度上升，比如下面這種情況。
除了形體外，光影就是整個擬物的靈魂了。
當(dāng)一個完整的圖形完成填充色時，它是扁平圖案，如果完成光影呈現(xiàn)的時候，它就是三維空間的立體圖形，比如下面這個圓的案例：
在擬物的設(shè)計中，我們對光影的定義是至關(guān)重要的，所以首先就是針對該圖形確定光源的方向，是上方、前方、左上還右上，這對后續(xù)的設(shè)計有一連串的影響。
如果對光影沒有正確的解釋，那么在制作細(xì)節(jié)的漸變角度、投影的使用上，就會產(chǎn)生錯誤的設(shè)計，造成光影視覺沖突和矛盾。
在創(chuàng)建了光源以后，物體受到光線的影響就會產(chǎn)生明暗面和投影，可以簡單劃分成4個部分，高光、亮部、暗部、投影。
這和我們學(xué)習(xí)的素描有一定的差異，美術(shù)中對光影的表現(xiàn)害會包含明暗交界、反光面，這對于輕擬物的來說負(fù)擔(dān)太重，所以我們要去掉它們，接下來重點(diǎn)講講高光和暗部。
高光是物體作為受光物對光源的直接反映，比如人像攝影中人眼眸中的高光就是對閃光燈的鏡像表現(xiàn)，再或者一拳超人中男主光頭上長期存在的高光配飾（多數(shù)動畫的光頭角色都有）……
高光可以非常有效的增加畫面的層次和對比性，讓物體看上去更有沖擊力和觀賞性。
而暗部，則完全是為了正常表現(xiàn)物體結(jié)構(gòu)和弧度增加的示意，因?yàn)椴辉谑芄饷?，所以顏色會變暗。在?shí)際操作過程中，我們可以通過漸變的方式開控制明暗的表達(dá)，但盡量不要直接手動設(shè)置一個漸變色出來，而是為它疊加暗部或亮部的黑白透明度漸變。
了解這幾個特性以后，下面，我們就通過一個實(shí)例來講解一下輕擬物設(shè)計的過程吧。
作為輕擬物的演示，直接畫個圖標(biāo)講一遍怎么操作是沒什么用的，我們要從實(shí)際場景出發(fā)，用它來解決一些真實(shí)的問題。比如看看下面的 KFC 官方 APP 首頁：
總結(jié)它的問題，不難發(fā)現(xiàn)首頁頂部業(yè)務(wù)功能太多了，頂部圖標(biāo)就包含30個（加滑動的），雖然每個模塊圖標(biāo)單看都沒有硬傷，但堆積到一起，就使得頂部缺乏足夠的信息層級和對比性。
我們要做的，就是通過輕擬物的方式，調(diào)整快速入口最大的三個圖標(biāo)，凸顯它們的重要性以及和其它圖標(biāo)的視覺差異性。先從第一個圖標(biāo)開始，講解一下如何完成輕擬物化設(shè)計的升級。
第一步：確認(rèn)輪廓造型
第一個操作，即確定圖標(biāo)本身的輪廓。根據(jù)原有圖標(biāo)的樣式我做了一些改動，包括加粗車頭，減少高度，增加車燈等。并對每一個模塊進(jìn)行純色的填充，定義它們的色彩和做出區(qū)分。
形體的重要性在于要對圖形本身有比較合理的呈現(xiàn)，不要讓比例失調(diào)和圖不達(dá)意。
第二步：完善圖形細(xì)節(jié)
這一步，就要在原有基礎(chǔ)上，進(jìn)行下一步的深入。包括對一些細(xì)節(jié)交代得更清楚一點(diǎn)，增加一些有趣的小元素等等，完善它的具體樣式。
第三步：增加基礎(chǔ)的暗部表現(xiàn)
在這里，我們就要開始為圖標(biāo)增加高光了，高光從右上角打下來，那么有疊加關(guān)系的元素就會產(chǎn)生一個向下的投影。并且反向暗部的表現(xiàn)，讓整體的立體感稍強(qiáng)。
這一步在軟件中主要使用蒙版功能，通過蒙版在背景上方創(chuàng)建一個圖層，然后添加深色的透明度漸變，就可以表現(xiàn)出對暗部和投影的效果。
第四步：增加高光效果
接著，就是最后一步，將高光添加到畫面中來，講整個圖標(biāo)的質(zhì)感進(jìn)行拉升，
通過上面的演示，我們可以將整個擬物設(shè)計流程精簡成：
1.確定圖形基本輪廓、外形比例、模塊色彩
2.豐富細(xì)節(jié)樣式增加趣味性和適當(dāng)?shù)臄M真感
3.通過蒙版添加暗部來完善表現(xiàn)的明暗和層級關(guān)系
4.添加高光元素作為圖形的亮點(diǎn)，拉升層次感
然后，通過這樣的步驟，再來完成后續(xù)的兩個圖形，拆解完的效果如下。
然后，再用這三個修改后圖標(biāo)套用進(jìn)原來的頁面，并做出對應(yīng)的修改，再來看看前后對比：
通過這個對比，我們就可以看出在這個復(fù)雜的首頁頭部中，輕擬物風(fēng)格可以從一眾平面中被凸顯出來，且不會顯得太突兀和復(fù)雜。
而這就是輕擬物在項(xiàng)目設(shè)計中的實(shí)際作用，當(dāng)畫面元素已經(jīng)開始超負(fù)荷，且容易導(dǎo)致同質(zhì)化的審美疲勞和主次不清時，就是輕擬物登場的時候了。
最后的總結(jié)，學(xué)習(xí)輕擬物就是增加我們完成界面視覺輸出的可能性，為視覺創(chuàng)意增加一些儲備彈藥，以應(yīng)對越來越復(fù)雜的互聯(lián)網(wǎng)產(chǎn)品和職業(yè)要求。
我們只在這篇羅列了制作的順序和思路，并沒有把軟件的操作完全放出來，一方面是因?yàn)闀r間上來不及（偷懶），另一方面是希望大家不會被軟件的使用框柱。只要概念清楚了，那么使用 PS、AI、Skecth、Figma 還是 Affinity 等軟件都可以做出來。
藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加ben_lanlan，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系
作者：百度MEUX 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計公司
從平面到屏幕，CMYK 到 RGB，墨點(diǎn)到像素，色彩越來越豐富，形式越來越復(fù)雜。而 UI 的發(fā)展從擬物的繁瑣細(xì)節(jié)中掙脫出來，卻在色彩的展現(xiàn)中放飛了自我。
零售業(yè)有個有趣的研究成果 —— “七秒鐘定律”：人們在挑選商品和服務(wù)時 ，只需要 7 秒鐘就可以確定是否感興趣，而在這短暫的 7 秒鐘內(nèi)，色彩的作用占到了 67%。
要在小小的手機(jī)屏幕中加入這么多顏色，并保持其中的聯(lián)系和邏輯，著實(shí)不易。如果你還對配色一無所知，完全不知道配色應(yīng)該怎么入手，那么你需要了解一下，我?guī)啄杲?jīng)驗(yàn)總結(jié)的配色思路。
無論我們用 PS、AI，還是 Sketch、XD、Figma，和色彩打交道最多的地方就是拾色器窗口，我們來看看這些案例：
雖然是不同的應(yīng)用，但是這個拾色器的用法大同小異，但是，很多新人并沒有搞懂拾色器的正確應(yīng)用邏輯。
很多人知道，UI 的色彩使用 RGB 模式，但是拾色器主要的選色原理遵循的是 HSB 模式的邏輯，也就是色相（H）、飽和度（S）、明度（B）。
HSB 是色彩科學(xué)中對所有顏色屬性的理論劃分，是種概念上的定義，可以用來解釋任何色彩，也就是說可以和 RGB 和 CMYK 相互轉(zhuǎn)化，且 HSB 的選色邏輯更清晰、簡潔、干練。
因?yàn)橐粋€正確的選色過程，是先確定出色相，然后再在這個色相維度下選出明度和飽和度，所以我們首先要關(guān)注色相選擇條。
細(xì)心的同學(xué)應(yīng)該已經(jīng)發(fā)現(xiàn)了，它們的首尾都是紅色，那是因?yàn)樯嗟男蛄惺且粋€首尾相接的環(huán)形模式，所以它實(shí)際上就是色環(huán)的柱狀展示圖，應(yīng)用起來和色環(huán)沒有實(shí)際區(qū)別。
接下來就要說到重點(diǎn)，飽和度和明度選擇區(qū)，我自己使用的習(xí)慣，是將這個選擇區(qū)通過黃金三分法的方式切割成等比的 9 個區(qū)域，然后明確它們在 UI 中的對應(yīng)情緒和應(yīng)用場景。
在過去的大量分析中，互聯(lián)網(wǎng)產(chǎn)品的主色和重要輔助色都會往右上角聚集，一些次要、不可點(diǎn)的色彩聚集在中上方，而文字背景色則聚集在左側(cè)，無人區(qū)則是我們重點(diǎn)避開的對象。
下面我們分析幾個案例，看看它們在這個選擇區(qū)中的色彩分布情況：
大家也可以自己拿一些主流的應(yīng)用做截圖，然后把它們的 UI 元素色彩排列到拾色面板中，就會得到基本一致的結(jié)果。牢記這 9 個區(qū)域的場景劃分，可以幫助我們非常高效、安全地完成 UI 配色。
在眾多的 UI 設(shè)計規(guī)范中，色彩部分的介紹，都必然包含三種類型，分別是：
主色：應(yīng)用的核心色彩，品牌色
輔色：豐富頁面視覺和傳達(dá)效果的次要顏色
中性：沒有色相的文字、背景用色
主色是一個應(yīng)用的最核心的色彩，品牌的象征色，比如想到餓了么的藍(lán)色、微信的綠色、京東的紅色、淘寶的橙色。
確定主色，并沒有大家想象的那么復(fù)雜，它的要點(diǎn)在于 —— 你想讓用戶感受到哪種情緒，然后通過情緒關(guān)聯(lián)一個大致的色彩范圍，再進(jìn)行微調(diào)。
在今天的互聯(lián)網(wǎng)產(chǎn)品中，主色的應(yīng)用選擇范圍在拾色器區(qū)域的右上角，前面已經(jīng)有解釋了。這和平面設(shè)計中的用色有非常大的不同。
移動端產(chǎn)品要在一個方寸大的空間中爭奪用戶的注意力，引起用戶的興趣，那么低飽和清淡的色調(diào)是無法實(shí)現(xiàn)這個目標(biāo)的，所以今天主色飽和度越來越極致，比如我們之前整理的，發(fā)在站酷的一篇總結(jié)：
再加上屏幕的 RGB 顯示特性，高對比度，高動態(tài)范圍的特質(zhì)能給用戶提供更好的觀感。所以選擇主色最安全的做法，就是在確定色相類型后，在右上方區(qū)域選出合適的色值。
輔助色是豐富應(yīng)用中的次要色彩，它會包含一到若干個和主色不同的色彩，除了品牌傳達(dá)外，具有更強(qiáng)的實(shí)用性。
前面我們提到過色環(huán)，這里就要派上用場了。我們知道色環(huán)是個色彩序列首尾相連的環(huán)形模型，它蘊(yùn)含一個最樸素的原則，即兩個顏色在這個環(huán)形中角度越大，那么視覺差異性越大，對比越強(qiáng)，比如下圖的展示：
這些配色的模式是不能閉著眼隨便挑的，它們僅僅作為一個色彩對比度的判斷標(biāo)準(zhǔn)。而真正輔助色的選擇，是根據(jù)實(shí)際場景的功能決定的。
比如通知、提醒、取消用大紅色，確認(rèn)、同意用綠色或者藍(lán)色，收藏、打分、評價用橙黃色。都是已經(jīng)在用戶心智中建立了標(biāo)準(zhǔn)的用色類型，跟著常規(guī)方法來做，是沒有其它思路的情況下最簡單、最安全的輔助色選擇方式。
沒有標(biāo)準(zhǔn)元素用色的情況下，再考慮應(yīng)用色環(huán)的 “角度原則”，越需要被突出的顏色，可以在色環(huán)中離主色越遠(yuǎn)，越不需要被突出的則越近。
比如下方攜程的案例，主色在藍(lán)色的情況下，支付、保險金標(biāo)簽這些需要被重點(diǎn)突出的色彩，使用了主色的互補(bǔ)色， 讓我們一眼就能看見并產(chǎn)生強(qiáng)烈的操作欲望。
中性色，是頁面中文字、背景用到的顏色，它們承擔(dān)起最基本的層次表現(xiàn)、便于閱讀的重任。多數(shù)新手覺得中性色無關(guān)緊要，實(shí)際情況恰恰相反。
主色輔助色決定了界面視覺是否出彩，而中性色的應(yīng)用直接決定了頁面能不能正常使用。如果看過比較多的原型案例，就應(yīng)該明白，即使只有黑白灰的狀態(tài)下，我們理解這些頁面和進(jìn)行使用也不會有絲毫的障礙。
中性色的配置，就是制定一個由深到淺的灰度階梯，應(yīng)用在對應(yīng)權(quán)重的元素上，色彩輕重的主要判斷依據(jù)是 HSB 中的 B（明度） 值。
中性色雖然指的是無個性，但并不是只能用純灰色，常見的一種做法，就是為中性色添加適量的藍(lán)色飽和度，提升觀看體驗(yàn)（滿足 RGB 的某種特性）。
這種做法，顏色越淺的時候飽和度應(yīng)用色值就越低，將這個規(guī)律在拾色器中進(jìn)行表現(xiàn)，那么我們就可以得到一個 L 型曲線，我稱它為 “中性曲線”。
掌握對于主色、輔助色、中性色的選擇方法，那么對于 UI 配色的奧義來說，你已經(jīng)掌握了一半，接下來就要了解更具體的實(shí)踐思路了。
配色并不是只有色彩的色值本身，大家一直在研究各種色彩心理學(xué)和理論，卻很少關(guān)心它們應(yīng)用如何應(yīng)用，如何配置。
所以，我根據(jù)主色和輔助色應(yīng)用總結(jié)了一個配色的四象限表格，在分別看看它們對應(yīng)的案例：
主色會作為頂部標(biāo)題欄或其它重要模塊中的背景色，進(jìn)行大面積應(yīng)用，加深用戶對品牌的認(rèn)知和辨識度。而產(chǎn)品中又包含了大量功能和服務(wù)，需要用豐富的色彩來進(jìn)行暗示，吸引用戶關(guān)注。
這類配色中，主色的應(yīng)用占比也大，出現(xiàn)頻率高，鮮有其它顏色出現(xiàn)。比較適用于圖片內(nèi)容豐富的題材中，或者是相對正式、品牌感強(qiáng)的應(yīng)用。
這是多數(shù)主流應(yīng)用的趨勢，降低主色占比，留出更多的空間給內(nèi)容模塊的展示上，突出自身帶有的服務(wù)和功能。
通常，會應(yīng)用這種方式是因?yàn)楫a(chǎn)品的服務(wù)是相對單一，但也需要用戶投入注意力的應(yīng)用，設(shè)計師就會盡力避免給予用戶過多的干擾。
每次在進(jìn)行配色的時候，我們都需要對自己要應(yīng)用哪種配色應(yīng)用方式做出規(guī)劃，然后再動手執(zhí)行。有了這個目標(biāo)，后面在整個項(xiàng)目的設(shè)計中的配色步驟就是水到渠成的事情了。
在實(shí)踐前，我們要簡單講講一個應(yīng)用或者界面的標(biāo)準(zhǔn)配色的流程了，流程順序如下：
具體應(yīng)該怎么使用這套流程，我們用一個圖蟲 APP 改版的案例來做演示，首先從四象限中的第一個主色占比高、色彩豐富度高的類型做起。
原型是 UI 設(shè)計的基本藝能了，在開始具體設(shè)計、配色前，搭建頁面的框架原型是一個必備的條件，下面，是我們已經(jīng)準(zhǔn)備好的原型案例。
然后，我們確定以橙色作為應(yīng)用主色，并在拾色器中進(jìn)行確認(rèn)。
有了主色，就可以對頁面進(jìn)行色彩填充和圖片填充了。既然我們主色是占比大的，那么首先可以用到的就是頂部標(biāo)題欄的背景色了，以及底部 Tabbar 中的選中色，大按鈕色等。
接著，我們開始整理中性色的使用，選擇新的顏色來填充文字和背景，清晰的表現(xiàn)模塊層級，文字信息的權(quán)重。
最后，就是添加輔助色和其它色彩的元素了，這個步驟建議都是放在最后一步操作。因?yàn)樯试截S富，越難控制，容易讓整個畫面顯得雜亂無序，所以先完成基礎(chǔ)搭建，可以更好的幫助我們判斷彩色的使用是否合理。
下面，我們使用彩色的金剛區(qū)圖標(biāo)，然后將用戶關(guān)注、認(rèn)證用戶、標(biāo)簽等元素使用其它色彩，來豐富頁面的色彩內(nèi)容。
根據(jù)第一個方案，我們可以再用這個原型來實(shí)現(xiàn)其余的三個方案的配色。
比如下面的主色占比大，但是色彩豐富度低的。因?yàn)橐呀?jīng)不太應(yīng)用其它輔助色，所以主色填充上我們不再填充頂部導(dǎo)航欄的背景，而是將更多元素應(yīng)用主色，減少輔助色數(shù)量。
然后是主色占比小，色彩豐富度高的方案，進(jìn)一步降低主色應(yīng)用的比例，然后在金剛區(qū)、標(biāo)簽等處使用較為豐富的配色。
最后，就是主色占比小，色彩豐富性也低的方案，那么使用中性色的元素就開始增多，只保留最核心的一些元素使用主色，和極少的輔助色。
根據(jù)四種不同的配色方案，我們就可以得到四種不同的配色結(jié)果和風(fēng)格，在每次設(shè)計開始實(shí)施前，我們都可以根據(jù)這種做法來做嘗試，并選出自己滿意的方案。
要再次強(qiáng)調(diào)，UI 配色是極其強(qiáng)調(diào)形式的應(yīng)用科學(xué)，最后做的往往會和一開始想的效果有極大出入，所以需要我們有幾個備選方案，可以隨時進(jìn)行調(diào)整，并選出合理的那個。
以上是我們關(guān)于配色有關(guān)知識點(diǎn)的分享，希望可以幫助大家提升對 UI 配色的認(rèn)識。
最后放一張阿瑪尼的配色格言，我們下一篇再賤！
藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加ben_lanlan，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系
作者：酸梅干超人 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計公司
01、騰訊視頻，色覺障礙優(yōu)化
騰訊視頻在播放視頻時可以通過輔助功能調(diào)節(jié)色覺障礙優(yōu)化，針對色覺障礙的用戶提供了相應(yīng)色彩畫面的選擇。通過優(yōu)化視頻色彩來提高畫面辨識度，更加人性化的照顧更多用戶群體。
代代 摘錄
02、騰訊視頻，重回后繼續(xù)播放的小細(xì)節(jié)
當(dāng)用戶觀影過程中需要暫停退出當(dāng)前窗口，當(dāng)重新切換回來時，視頻播放進(jìn)度會自動調(diào)節(jié)到暫停前 3-5 秒。這樣的處理可以讓用戶可以更好的對劇情進(jìn)行重新銜接，延續(xù)離開時的記憶，非常人性化的細(xì)節(jié)處理。
代代 摘錄
03、高德地圖十一期間不一樣
高德地圖節(jié)日期間在左上角新增了“景區(qū)隨身聽”服務(wù)，打造千人千面的全新語音導(dǎo)覽體驗(yàn)，首批覆蓋全國逾500個熱門景區(qū)，為高德用戶帶來不一樣的十一假期體驗(yàn)。
黑馬青年 摘錄
04、剪映，拖動試聽音樂有助于選擇
剪映在添加音樂時，可以通過拖動音頻來快速試聽該音樂，快速跳過緩慢的前奏部分，直接試聽音樂高潮部分。根據(jù)當(dāng)前素材選擇最適合的高潮部分配音，可以節(jié)省用戶選擇配音的時間。
Liaju 摘錄
05、高德地圖，截圖生成長圖
搜索好目的地之后如果選擇公交地鐵出行，為了防止可能由于網(wǎng)絡(luò)不佳等因素不能及時查看交通信息，可通過截圖功能，保存完整的路線指引圖。保存圖片后可在相冊中查看長圖，也方便分享給好友，非常人性化。
疏晶晶 摘錄
06、企鵝 FM，左滑到底直接刪除收聽記錄
企鵝 FM 最近收聽記錄中，不僅可以左滑配合點(diǎn)擊刪除，還可以左滑到底直接刪除當(dāng)前操作內(nèi)容。
許文娟 摘錄
07、攜程旅行語音導(dǎo)覽
在攜程旅行 APP 中，針對部分景點(diǎn)介紹有設(shè)置語音導(dǎo)覽的功能，初次體驗(yàn)?zāi)憧梢赃x擇該旅游景區(qū)的三個景點(diǎn)進(jìn)行試聽。對于很多游客來說只是看風(fēng)景，如果不了解景點(diǎn)背后的故事，是很難有代入感的，這個功能可以讓你對景點(diǎn)有個初步認(rèn)知。
黑馬青年 摘錄
08、微信讀書，想看啥搖一搖
微信讀書，搖一搖！它會根據(jù)用戶的閱讀記錄推薦類似的書籍。當(dāng)用戶不知道看什么書的時候就搖一搖，以有趣的交互解決用戶選擇困難癥。
代代 摘錄
09、bilibili 漫畫跨頁拼貼閱讀
一般的漫畫都是在一頁之中進(jìn)行分鏡，在手機(jī)上閱讀時不會有什么障礙，但是當(dāng)出現(xiàn)一些比較大的跨頁插畫時，手機(jī)上的觀看體驗(yàn)就不是那么友好。而當(dāng)出現(xiàn)跨頁時，bilibili 漫畫可以通過向下滑動來進(jìn)行拼頁，將跨頁拼成一頁來進(jìn)行觀看，優(yōu)化了閱讀體驗(yàn)。
住住 摘錄
10、叮咚買菜購物車領(lǐng)券激活用戶購買欲
隨著生活方式的不斷變化，現(xiàn)在買菜這樣的家常小事都可以服務(wù)到家。
最近在體驗(yàn)叮咚買菜 App 的時候，發(fā)現(xiàn)購物車頂部會有領(lǐng)券提示，通過滿減、優(yōu)惠券等形式可以更快的激活用戶購買欲?？諣顟B(tài)的購物車可以激活用戶進(jìn)行商品添加，已選擇商品后會看到滿減提示，激活用戶選擇更多的商品達(dá)到滿減權(quán)限，一舉多得。
黑馬青年 摘錄
11、微博動漫，不一樣的性別設(shè)置
點(diǎn)擊右上角的男生/女生頭像便可直接替換角色，區(qū)別于常見的輸入形式，簡化用戶操作步驟，并且推送內(nèi)容會根據(jù)用戶性別進(jìn)行差異化推送。
Cherry 摘錄
12、記賬城市，游戲化記賬玩法
對于我們這一代的年輕人來說能堅持記賬的估計相對較少，一些互聯(lián)產(chǎn)品的引入相對可以激活這一部分人群。最近體驗(yàn)的記賬城市讓我影響深刻，將游戲化的場景引入產(chǎn)品設(shè)計中，你記錄一次就相當(dāng)于為自己的虛擬城市進(jìn)行一次基建，帶入了幾分趣味性。
也可以點(diǎn)擊拍攝圖標(biāo)進(jìn)行照片記錄，調(diào)整好需要展示的城市場景，點(diǎn)擊拍攝時模擬了類似拍立得形式的照片打印。整個體驗(yàn)不僅年輕化、游戲化，也結(jié)合了趣味性，在細(xì)節(jié)的處理上面也非常到位。
黑馬青年 摘錄
13、美圖秀秀以營銷思路引導(dǎo)登錄
通常訪問個人中心都需要用戶登錄賬戶，如何引導(dǎo)用戶創(chuàng)建賬戶是產(chǎn)品不斷思考的問題。美圖秀秀以紅包微動效替換默認(rèn)頭像，以登錄領(lǐng)紅包引導(dǎo)用戶創(chuàng)建賬戶，也算是一種不錯的以營銷思路作為引導(dǎo)的方式。
黑馬青年 摘錄
14、骨骼，繪畫人的熱愛
很喜歡這款解析人體結(jié)構(gòu)的 App，設(shè)計很大膽，有個性。點(diǎn)擊右上角“顯示插針”會顯示插針在某個部位，點(diǎn)擊插針還能出現(xiàn)對這個部位的解釋。還能對骨骼進(jìn)行360旋轉(zhuǎn)，深入解剖每個部位。
功能操作控件放在上下左右四個角，內(nèi)容的布局打破常規(guī)設(shè)計，左下角的“滑輪”操作，當(dāng)你滑動時就會在“顯示界面”跟“隱藏界面”之間切換。
Liaju 摘錄
15、Keep 不一樣的任務(wù)設(shè)置
Keep 的任務(wù)設(shè)置采用 H5 的形式，區(qū)別于其他大眾的常規(guī)任務(wù)形式。沒人喜歡做任務(wù)，用講故事的方式去設(shè)置任務(wù)關(guān)卡，會增加用戶的參與度。
“卡路里工廠”在取名上就增加了不少趣味性與點(diǎn)擊欲望，進(jìn)入“卡路里工廠”界面用星球、星空等元素設(shè)計，畫面具有神秘感，讓用戶覺得是在探索星球中完成任務(wù)。結(jié)合游戲化的形式更有趣味性，因而提升用戶參與度。
Liaju 摘錄
16、音兔，音樂智能推薦
音兔 App 在進(jìn)行圖片和視頻編輯時，音樂的類型會根據(jù)圖片和視頻的內(nèi)容進(jìn)行推薦，如發(fā)的風(fēng)景照就會推薦旅行相關(guān)的音樂，發(fā)的貓咪照片就會推薦貓奴的音樂，方便用戶在進(jìn)行圖片和視頻編輯時更快捷的選到適合的音樂。
Xindy 摘錄
17、微信讀書滑到頭還能無限場
卡片式滑動翻頁現(xiàn)在非常普及，起點(diǎn)通常是無法滑動的，但是微信讀書打破了你的思維局限。在開始時允許你向右滑動，此時便可進(jìn)入無限場，帶給你不一樣的互動體驗(yàn)。
黑馬青年 摘錄
18、招商銀行雙重刷新相結(jié)合
招商銀行 App 進(jìn)入社區(qū)狀態(tài)下 icon 變?yōu)樗⑿聵邮剑梢允謩菹吕M(jìn)行刷新，也可以點(diǎn)擊 icon 進(jìn)行刷新，操作更加便捷。
Cherry 摘錄
19、網(wǎng)易云音樂，生日祝福
生日那天，網(wǎng)易云音樂的每日推薦圖標(biāo)會變成一個蛋糕圖形，每日推薦的第一首歌是「祝你生日快樂」。這些小細(xì)節(jié)是不是很暖心呢，反正我是被俘獲了。（Android Version 6.3.2）
無休 摘錄
20、Space FM 通過音樂交友
Space FM 模擬宇宙太空，把每個用戶比作一個宇航員，宇航員添加喜歡的歌曲，形成自己的音樂星球；宇航員可以帶著自己的星球在太空漫游，每隔30秒匹配新的宇航員，如果雙方都停留下來，可以聽對方的歌曲，還可以打招呼、聊天，聊得來可以收聽對方的音樂，即可私聊。
以太空星辰為動態(tài)背景，播放著自己喜歡的歌，營造了一個輕松的氛圍。在與陌生人打招呼，有了音樂為話題引子，不會顯得唐突尷尬。
無休 摘錄
21、貓耳 FM 的閃屏啟動音
貓耳 FM 增加啟動音的設(shè)置，區(qū)別于傳統(tǒng) App 閃屏啟動，加入聲音的閃屏啟動音更增趣味性。推薦的啟動音也非常符合產(chǎn)品二次元的調(diào)性，讓用戶在進(jìn)入 App 時有聲優(yōu)體驗(yàn)的沉浸感受，每一次的打開都是一次驚喜的體驗(yàn)。
“歡迎回來，主人”、“早安，大小姐”…等聲音錄制來自不同動漫的經(jīng)典重現(xiàn)，能抓住一部分特定用戶人群的喜愛，也是非常棒的運(yùn)營策略。
老白 摘錄
22、京東商城添加活動日歷功能
京東商城在首頁添加了活動日歷的功能，用戶可以了解到未來一周的優(yōu)惠促銷活動。可添加活動提醒，這樣用戶就不會錯過好的優(yōu)惠活動，同時也提高了平臺的轉(zhuǎn)化率。
逆光 摘錄
23、騰訊視頻，播放短視頻中推薦正片
觀看短視頻的時候，播放大概 5 秒左右，視頻下方標(biāo)題欄會變成正片內(nèi)容導(dǎo)航，避免用戶找影視名字的繁瑣，既能滿足用戶需要，又能增加產(chǎn)品需求。
皓月長歌 摘錄
24、酷狗音樂，透視立體翻頁設(shè)計
酷狗音樂歌單頁，頭部推薦歌單采用透視立體翻頁效果呈現(xiàn)，增強(qiáng)視覺畫面感，主體內(nèi)容更突出，也區(qū)別于平鋪卡片形式。頭部的背景顏色也融合當(dāng)前卡片的色調(diào)，整體更協(xié)調(diào)。類似這種呈現(xiàn)簡單立體翻頁效果的表現(xiàn)手法，在 UI 應(yīng)用場景中也越來越常見。
Liaju 摘錄
25、途家民宿，未完成訂單的設(shè)計呈現(xiàn)
當(dāng)用戶有未完成的任務(wù)訂單，在“首頁”和“我的”以顯著位置提示用戶完成訂單。多個訂單“首頁”以輪播形式進(jìn)行展示，“我的”以上下滑動形式展示并提示用戶。
皓月長歌 摘錄
26、QQ 夜間模式下的 icon 設(shè)計
切換 QQ 夜間模式，底部標(biāo)簽欄消息選中模式下的 icon 結(jié)合睡覺打呼的情景設(shè)計，符合夜間場景。貼合場景的細(xì)節(jié)設(shè)計，帶給用戶更好的體驗(yàn)。
Liaju 摘錄
27、馬蜂窩旅游，詳情頁照片展示處理
馬蜂窩旅游在文章詳情頁展示作者拍攝的景點(diǎn)照片時，不會對照片進(jìn)行裁切等處理，而是以寬度固定高度自定義的方式進(jìn)行呈現(xiàn)。展示出照片本身的原始狀態(tài)，不僅方便作者拍攝不同比例的照片，也方便用戶從不同的視角觀看景點(diǎn)。
黑馬青年 摘錄
28、毒湯日歷，點(diǎn)贊也要扎心
一款毒雞湯產(chǎn)品，覺得很喪就打開看看，說不定喪喪就好了。點(diǎn)贊 icon 設(shè)計也是帶“扎”的，恰好符合產(chǎn)品屬性；當(dāng)你想翻過明天的時候，會提示“明天，怎么翻也翻不過去”。
Liaju 摘錄
29、百度翻譯，通過引導(dǎo)互動完成信息采集
引導(dǎo)頁在產(chǎn)品中比較常見，從靜態(tài)、動態(tài)、視頻等不斷演變到互動式新形式引導(dǎo)設(shè)計。
在百度翻譯 APP 中，通過引導(dǎo)頁和用戶進(jìn)行互動，來了解用戶群信息。通過這樣的互動形式可以更好的被用戶所接受，并進(jìn)行相應(yīng)信息的選擇。
疏晶晶 摘錄
30、抖音，背景圖編輯預(yù)覽更人性化
在抖音設(shè)置個人主頁背景圖，更換圖片來自個人相冊，在進(jìn)行圖片編輯時，可以預(yù)覽基于布局結(jié)構(gòu)上的呈現(xiàn)效果，便于用戶截取需要的圖片顯示區(qū)域。
疏晶晶 摘錄
31、編輯微信朋友圈動態(tài)試試長按照片
編輯微信朋友圈動態(tài)過程中，如果選錯圖片通常大家都是點(diǎn)擊圖片預(yù)覽時刪除。還有一種長按拖拽刪除可能容易被你忽略，不妨試試看，通過長按拖拽刪除照片更能方便用戶操作。
疏晶晶 摘錄
32、酷狗音樂，30 秒副歌播放
通過 30 秒的副歌播放，為你快速篩選是否喜歡這首歌，30 秒縮短了用戶試聽歌曲的時間成本。也會提示用戶下一步操作，如果 30 秒不夠可以增加 30 秒。
Matilda 摘錄
33、QQ 音樂制作視頻歌詞海報
喜歡的歌詞可以制作成動態(tài)海報，還可以自定義拍攝視頻，符合當(dāng)下流行的小視頻。將喜歡的歌詞歌曲同時賦予視頻的記憶，聽覺+視覺體驗(yàn)結(jié)合，給人更加豐富的情感體驗(yàn)。
Matilda 摘錄
藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加ben_lanlan，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系
作者：黑馬青年 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計公司
一、什么是大標(biāo)題設(shè)計風(fēng)格？
大標(biāo)題導(dǎo)航欄是從iOS11發(fā)布后，開始在中國的UI設(shè)計師中急速流行的一種設(shè)計風(fēng)格。其實(shí)這種風(fēng)格最早在2016年就在硅谷盛行了起來，源自一位叫Michael Horton的設(shè)計師發(fā)表的一篇《Complexion Reduction: A New Trend In Mobile Design 》的文章，這篇文章提到的Complexion Reduction這種設(shè)計風(fēng)格(下文簡稱CR)就是大標(biāo)題導(dǎo)航欄的起源，即大、黑、粗的標(biāo)題。
CR這種風(fēng)格有四個明顯的特征：
1.刪除多余的顏色；
2.又大、又黑、又粗的標(biāo)題；
3.簡單、可識別的圖標(biāo)，也不要使用顏色(常用黑灰色)；
4.留白留白留白，更多的留白。
下圖是比較典型的使用CR風(fēng)格的APP（分別是愛彼迎、ENJOY、火球買手、MOO音樂），大家可以結(jié)合CR風(fēng)格的4大特征感受一下：
不知道小伙伴們有沒有發(fā)現(xiàn)，這幾個APP的功能會比較單一或是某一垂直領(lǐng)域，且視覺上都給人一種高品質(zhì)，超極簡的感覺，人們會更多的關(guān)注界面中內(nèi)容本身，對內(nèi)容的要求也會更高。
二、中西方的差異
那么問題來了，為什么這種CR風(fēng)格鮮少出現(xiàn)在中國特有的淘寶類電商APP中呢？
國外的APP大都是小而精致的，一般一個APP只能做一件事，功能比較單一，而國內(nèi)的淘寶類電商APP，攜程類的綜合旅游APP所包含的業(yè)務(wù)與功能都非常廣泛，在狹小的手機(jī)屏幕上展示更多的商品就顯得尤其重要，CR風(fēng)格提倡的大標(biāo)題大留白無疑不是在挑戰(zhàn)老板的底線。
實(shí)際上即便使用大標(biāo)題風(fēng)格也不要盲目采用iOS11官方的大標(biāo)題導(dǎo)航，其原因在于中英文的差異。
英文大標(biāo)題一個單詞有大小寫的變化，富有一定的層級變化，而中文如果使用iOS11給定的68px（二倍圖下）的字號，那真是大到閃瞎我的眼。中文一個詞語每一個字都是差不多的大小，沒有層級上的變化，太大的字體在整個界面中看起來會很奇怪，如下圖：
三、合理使用大標(biāo)題
雖說iOS11那么大的標(biāo)題不適合大部分的APP，但并不是說大標(biāo)題風(fēng)格就不適合大部分APP了，實(shí)際上目前大多數(shù)的APP依然使用了大標(biāo)題的風(fēng)格，不過進(jìn)行了一定的改良。
以下參考尺寸均是二倍圖下的尺寸
1.大標(biāo)題導(dǎo)航欄
大標(biāo)題導(dǎo)航欄大致有兩種樣式，一種是延用iOS11的大標(biāo)題導(dǎo)航欄，一種是稍微改良使用的大標(biāo)題導(dǎo)航欄。
1）iOS11大大大標(biāo)題導(dǎo)航欄
iOS11的大標(biāo)題導(dǎo)航欄標(biāo)題字號約為68px、欄高192px(二倍圖)，大標(biāo)題對齊導(dǎo)航欄左邊，頁面滑動時轉(zhuǎn)換為常規(guī)的導(dǎo)航欄。
國內(nèi)使用這種大大大標(biāo)題的APP比較少，標(biāo)題文字實(shí)在太大，若只作為導(dǎo)航標(biāo)題占位，會極其浪費(fèi)屏幕空間。
使用這種大大大標(biāo)題時，導(dǎo)航標(biāo)題一般都有一定的意義，如下圖:
餓了么的訂單頁詳情頁使用了這種大大大標(biāo)題，但是標(biāo)題賦予了訂單狀態(tài)的意義，比起單純的“訂單詳情”，這樣有一定意義的標(biāo)題文字則可考慮使用iOS11的大大大標(biāo)題。
2）改良大標(biāo)題導(dǎo)航欄
某些APP在使用大標(biāo)題導(dǎo)航欄時，在iOS11的大標(biāo)題導(dǎo)航欄上進(jìn)行了一定的改良，最常見的就是一定程度縮小了標(biāo)題的字號，如下圖:
這三個APP的標(biāo)題字號都沒有到68px，常用40px~48px的字號，陌陌與天貓是固定在頂部導(dǎo)航欄的，而Kepp會隨頁面上滑變?yōu)槌Ｒ?guī)標(biāo)題導(dǎo)航。
一般這種固定的較大標(biāo)題都會隱去導(dǎo)航欄的分割線，顯得導(dǎo)航欄更高，更有呼吸感。像是天貓的大標(biāo)題導(dǎo)航欄使用的色塊，與下方模塊又比較近，就顯得很擁擠。
2.Tab欄大標(biāo)題
Tab欄的文字標(biāo)題切換樣式最常見的就是顏色變化，加小短線等，隨著大標(biāo)題風(fēng)格的流行，Tab欄的切換樣式也出現(xiàn)了大標(biāo)題的選中樣式，選中字號通常采用40~48px（甚至更大，如蝦米音樂的72px），而非選中標(biāo)題通常則是采用的28~32px，如下圖：
使用這樣的Tab欄，能夠迅速幫助用戶辨識自己所在的位置，就差指著自己說“這兒”了。需要注意的是一個屏幕內(nèi)盡量只在一級Tab使用大標(biāo)題切換，與二級Tab做出區(qū)分。
3.模塊化大標(biāo)題
大標(biāo)題的風(fēng)格除了應(yīng)用在界面頂部導(dǎo)航，在模塊化標(biāo)題上應(yīng)用的也非常多，有些APP即便頂部導(dǎo)航不使用大標(biāo)題，卻會在模塊化標(biāo)題上使用較大的字號，如下圖：
這種模塊化大標(biāo)題常配合留白分割的界面使用(這也符合了CR風(fēng)格的特征)，模塊化大標(biāo)題在留白分割的界面上能夠更好地幫助上下模塊做到層級區(qū)分的作用。
4.文字變大變粗變黑
拋開大標(biāo)題不談，不知大家有沒有發(fā)現(xiàn)，現(xiàn)在越來越多的APP的內(nèi)容標(biāo)題、正文內(nèi)容的字體也在逐漸變得更黑更粗，甚至更大，畢竟我們的手機(jī)變得越來越大了。如下圖：
即便是擁有復(fù)雜業(yè)務(wù)的淘寶與飛豬，在某些內(nèi)容標(biāo)題上也變得更粗更黑，一眼看過去用戶能更容易找到自己想看的內(nèi)容。
四、劃重點(diǎn)
· 大標(biāo)題設(shè)計風(fēng)格源自Complexion Reduction這種設(shè)計風(fēng)格，CR這種風(fēng)格的特征就在于顏色少、標(biāo)題大黑粗、圖標(biāo)通用簡單、大留白；
· 由于中英文字體的差異，中文使用超大字號沒有英文富有變化；
· 合理使用大標(biāo)題，做一些適當(dāng)?shù)母牧?。常見用于?dǎo)航欄、一級Tab選中標(biāo)題、模塊化大標(biāo)題以及內(nèi)容標(biāo)題。
藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加ben_lanlan，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系
作者：人類君 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計公司
當(dāng)你為你的項(xiàng)目創(chuàng)建有效的，可訪問的，漂亮的ui時，只需要最小的調(diào)整來幫助快速改善你的設(shè)計。 努力創(chuàng)造。在這篇簡短且易于理解的指南中，我收集了一些容易放置的內(nèi)容。在實(shí)踐中，這些小技巧可以毫不費(fèi)力地幫助你改善你的設(shè)計，還有用戶體驗(yàn)。
希望你喜歡！
用微妙的邊界定義。
使用多重陰影或非常微妙的邊界（只是一個陰影比你的實(shí)際影子）周圍的某些元素可以使這些元素出現(xiàn)
更清晰，更清晰，幫助你避免那些看起來泥濘的陰影。
標(biāo)題給一個更好的光學(xué)范圍。減少長格式正文的字母間距？這是一個大大的“不”。但對于標(biāo)題……我要說“是”!
你的標(biāo)題很可能會比他們的標(biāo)題更大，更重。相比于正文，字母之間的間距有時會出現(xiàn)視覺上更大，這并不是你想要的。減少字母間距，只是少量，可以使你的標(biāo)題視覺平衡，更易于閱讀，通常更賞心悅目。
為了一致性，確保你的圖標(biāo)具有相同的視覺風(fēng)格。確保它們擁有相同的視覺風(fēng)格;同樣的重量，要么填滿，要么秒變了。不要混搭。
只使用一種字體就很好。在設(shè)計時，使用單一字體是絕對沒問題的，這樣做實(shí)際上可以幫你產(chǎn)生更強(qiáng)、更持久的結(jié)果。忽略“總是使用兩種字體”最小值的人群。使用以下組合重量，大小和顏色，你仍然可以產(chǎn)生完美的可接受的結(jié)果。雖然只有一個單獨(dú)的字體。
留白是UI設(shè)計朋友。大膽的使用。適度的留白，即使是少量的白色物質(zhì)，但要使用得當(dāng)。能讓你的設(shè)計透氣，而且看起來更光亮。
創(chuàng)建長篇內(nèi)容？給20 pt試試。對于長形式的內(nèi)容（即微博文章，項(xiàng)目描述等等），試著這樣做20pt(甚至更多一點(diǎn))為你的文本字號。當(dāng)然，這取決于所選擇的字體，但大多數(shù)流行的字體在20pt時效果得很好，并帶來更好的閱讀體驗(yàn)當(dāng)你的用戶面對一堵文字墻的時候。18pt太過時了。
使用字體比例定義一個適合的字體大小集。使用字體比例可以幫助您輕松、實(shí)用地定義一組字體大小。顧名思義，Type Scale基于一個比例因子(比如1.25)工作的。從一個基本字體大小(18px)和乘(或除)它與縮放因子得到的字體大小要么更高(即;H?，H?等)，或較低層次(即;標(biāo)題、按鈕等)字體比例將幫助你產(chǎn)生看起來和諧的文本字號集。因?yàn)樗麄兊拇笮「鶕?jù)設(shè)定的固定比例增加和減少。
選擇一個基本顏色，然后使用色彩和色調(diào)增加均勻性。你猜怎么著?你不必總是用大量的顏色填充你的設(shè)計。如果項(xiàng)目允許，簡單地使用一個有限的調(diào)色板選擇一個基地顏色，然后使用你選擇的顏色的色調(diào)和陰影可以增加一致性以最簡單的方式來改變你的設(shè)計。
改善用戶登錄的體驗(yàn)。記住拇指規(guī)則。允許用戶在任何時候跳過您的移動應(yīng)用程序上線序列，并且放置跳過鏈接在拇指容易觸及的位置。只是一個簡單的調(diào)整，可以為你的用戶提供更好的體驗(yàn)……
記住，拇指仍然是主宰！
你的影子來自其中一個光源對吧？確保你的影子總是來自一個光源。這是一個簡單的錯誤，但它可以讓你的設(shè)計看起來更拋光且統(tǒng)一。記住，我們不是生活在一個擁有一千個太陽的國度里。
使用更好的字體組合，效率會很很快。當(dāng)你想要提高你的字體組合技巧的時候，當(dāng)面對1000個字體選擇，只是去尋找對應(yīng)的自己集合，效率會快很多。
文字和圖像與一個微妙的覆蓋。根據(jù)文本可能放置在圖像上方的位置，您可以選擇嘗試，并測試完整的圖像覆蓋，或更微妙的(從下到上，或從上到下)漸變疊加，以實(shí)現(xiàn)兩者之間的簡單對比。為了在你的文本之間形成良好的對比，不要太復(fù)雜的內(nèi)容和圖片。
太多就會導(dǎo)致用戶體驗(yàn)不合格。盡量只在標(biāo)題和小段落中使用中心文字。對于幾乎所有其他內(nèi)容，保持文本左對齊。你的用戶會感謝你的你。
當(dāng)選擇一個多用途的文字，盡量找一個大量權(quán)重。你搜索的字體有很多選擇嗎？重量、風(fēng)格？如果你打算在你的一些項(xiàng)目中使用它，請嘗試并確保它是這樣做的。只有一種重量或樣式。不行的。如果可以的話，我建議你避開這些。當(dāng)然也有例外，某些項(xiàng)目會要求“只有一種風(fēng)格”
更精致的字體，但對于絕大多數(shù)項(xiàng)目，你想要的字體再多一點(diǎn)就能…嗯…選擇。即使你決定只使用兩種或三種重量或風(fēng)格，希望你在設(shè)計過程的后期需要更多的空間。
想要創(chuàng)造更容易理解的界面，對吧？把你的文字調(diào)暗在光亮的背景上。在淺色背景下工作時，不要讓你的文本太亮。
當(dāng)涉及到長形式的內(nèi)容時，某些常規(guī)的粗細(xì)字體仍然可以看。但太重了，在屏幕上會很僵硬。你可以很容易地解決這個問題，選擇一些像深灰色（即#4F4F4F）的基調(diào)，把文字往下寫，讓眼睛更容易看。
總是通過icon最突出的內(nèi)容。你認(rèn)為這是常識，對嗎？我并不覺得。通過使用色彩對比度做區(qū)分，尺寸和標(biāo)簽，確保盡可能突出。如果可以的話，不要總是只依賴圖標(biāo)。如果可以使用文本標(biāo)簽，那就使用它們，讓用戶更好地理解。
當(dāng)你的字體變小時，請增加行高，以達(dá)到更好的通用性。這同樣適用于當(dāng)你的字體大小增加。簡單地降低行高。
使用x-height來測試字體的可讀性?；旧希瑇-height是一個小寫字母' x '相對于大寫字母高度 (T)的相同字體。如果你的字體有一個大的x高，通常有助于更好地閱讀，特別是在使用長形式的正文文本。另一種確定字體可讀性，并縮小范圍的方法如果你有一些無法選擇的字體，可以做這個測試，比較來自特定字體的三個字符：大寫字母I，小寫的L和數(shù)字1。
當(dāng)設(shè)計一個在應(yīng)用程序內(nèi)部使用的菜單時，確保提供最多經(jīng)常使用的動作（例如：上傳圖像，添加文件等)最突出的屏幕上。
顏色-從你的圖像中選擇，會給你的產(chǎn)品帶來生命。簡單地從你的產(chǎn)品圖片中選擇顏色，然后應(yīng)用各種色調(diào)。你選擇的顏色陰影到你的背景，文字，圖標(biāo)或更多，可以添加。你的設(shè)計具有豐富的視覺趣味和個性。
基于字體的x坐標(biāo)，設(shè)置您的線高度。不同x高的字體需要不同的行高測量，實(shí)現(xiàn)文本行之間的正確分隔。即使你可能有兩種字體相同的字體大小(即：18px)它們的x的高度可以有很大的不同，這在選擇正確的線的種類起著很大的作用高度來實(shí)現(xiàn)。
突出最重要的元素。通過使用字體大小，權(quán)重，顏色和布局的組合，可以很輕松的突出UI中最重要的元素。只是很簡單，但微妙的調(diào)整，讓用戶體驗(yàn)更好一點(diǎn)。
操作錯誤的時候，添加一個額外的視覺輔助。在用戶剛剛采取的操作附近添加一個錯誤消息可以是簡單的形式，但很有幫助，當(dāng)他們填寫任何形式的表格時額外的視覺輔助。
嘗試在移動端創(chuàng)建慷慨的熱區(qū)。當(dāng)為移動設(shè)備設(shè)計時，嘗試創(chuàng)建足夠大的可點(diǎn)擊區(qū)域，是好的。對于只包含文本的按鈕和鏈接來說，這是很有挑戰(zhàn)性的，盡可能使用帶有標(biāo)簽的圖標(biāo)。
以下是iOS和Android的最小推薦點(diǎn)擊區(qū)域：
44 x 44pt用于iOS
48x48dp用于Android
在短標(biāo)題上盡量使用全大寫。如果你想在標(biāo)題上使用全大寫，請確保它們在任何時候都很短。有可能，最好是一行。將它們用于較長的文本是不好的。和之前的技巧一樣，在標(biāo)題中添加少量的字母間距。能讓他們呼吸順暢，而且視覺效果更好。
在輕文本和圖像之間，保持可接受的對比度。一定要確保淺色的文字在淺色的背景下是清晰的。簡單地應(yīng)用一個稍微不透明的背景在你的文本后面將保持這些元素之間的對比度很好。
看看這些很棒的字體，用在標(biāo)題非常好的。發(fā)現(xiàn)他們真的很適合標(biāo)題，設(shè)計感很強(qiáng)。（我沒有推廣費(fèi)用，請放心用）
看看這些很棒的字體，用于長文本是非常好的，強(qiáng)烈推薦使用。（我仍然沒有任何推廣費(fèi)）。
標(biāo)題和正文。當(dāng)你想實(shí)現(xiàn)一個好的垂直節(jié)奏，以及一個強(qiáng)大的視覺之間，需要對文本元素排版、間距作設(shè)計。我見過許多設(shè)計，最常見的是在文章列表中，它們已經(jīng)被應(yīng)用標(biāo)題的上下空白相等，這樣就失去了這種聯(lián)系在它下面有正文。在這種情況下，我總是會給我的標(biāo)題更多的頂部邊距，而在底部，標(biāo)題和下面的內(nèi)容之間的連接是更強(qiáng)，有良好的垂直節(jié)奏，視覺層次保留在所有的文章之間。
對于下載指標(biāo)，試著去做盡可能提供信息。對于用戶，嘗試使具有信息性的下載指示符對用戶很友好。你可以通過使用顏色來實(shí)現(xiàn)這一點(diǎn)，用百分?jǐn)?shù)來顯示當(dāng)前進(jìn)度，一個簡單的圖標(biāo)，讓他們可以在任何地方取消下載時間。
如果你能保持標(biāo)題簡短，簡潔……“想做就做”。
如果可以，如果合適的話，保持標(biāo)題簡短，時髦，切中要點(diǎn)。而不是“這是你的風(fēng)格，你的方式”，簡單地使用像這樣的“你的風(fēng)格。你的方式?！比藗儠g覽，保持這些標(biāo)題簡短有力有助于他們更快地消化中的信息。
記住，這種方式可能會讓人感覺很突然，你需要考慮一下你所從事的項(xiàng)目類型，以及目標(biāo)受眾來決定方法是合適的，相對于更標(biāo)準(zhǔn)的格式。
正確的設(shè)計“聲音”。在項(xiàng)目中處理文本時，選擇正確的字體將影響就像你說話的聲音一樣。要大聲，要柔和，要友好，要正式，要有趣。每一種字體都有自己獨(dú)特的聲音，關(guān)鍵在于找到合適的字體你正在做的項(xiàng)目的聲音。當(dāng)你剛接觸字體時，這似乎是一項(xiàng)艱巨的任務(wù)，所以不要害怕從類似的項(xiàng)目中獲得靈感，并從這些項(xiàng)目中汲取靈感它們有助于影響你的決定，并提高你的理解什么是合適的。
你的正文，并提高可讀性處理正文文本，并試圖找到合適的行長度可能有點(diǎn)平衡。對于一個單獨(dú)的列頁面，45到75個字符被普遍認(rèn)為是滿意的行長度，而行長度為66個字符(包括字母和空格)被發(fā)現(xiàn)是最佳位置。當(dāng)然，字體大小和行高在決定可讀性時也起著重要作用，但是對于行長，保持在45到75個字符之間，就會更好了。
偶爾使用純裝飾的幽靈文字也可以，但要保留閱讀的問題。屏幕上的大部分文本內(nèi)容應(yīng)該堅持可用性最佳的做法是沒有問題的。但有時，希望添加純出于裝飾目的的文本，我們不希望所有的設(shè)計都落入乏味。如果沒有元素會以任何方式影響用戶體驗(yàn)，那么出于裝飾的原因，插入奇怪的元素是可以的。
使用戶界面中的元素彼此區(qū)分。按鈕、通知，ui中兩個獨(dú)立但重要的元素。如果可以的話，總是試著確保你的用戶能夠快速地將它們區(qū)分開來，輕松掃描您的網(wǎng)站或應(yīng)用程序。按鈕，在大多數(shù)情況下，將優(yōu)先，所以確保他們是最突出的。項(xiàng)目在屏幕上，并很容易區(qū)分其他元素。
只是一些細(xì)微的陰影，你所需要的。我們都喜歡陰影，對吧？它們可以作為微妙又很強(qiáng)大的視覺線索，在您的設(shè)計中使用要適度?，F(xiàn)實(shí)世界中的陰影，在大多數(shù)情況下幾乎是不可察覺的，而且所以你應(yīng)該在ui中模仿這種行為。放下沉重和黑暗的陰影并降低不透明度，以實(shí)現(xiàn)一些的東西更微妙和栩栩如生。
使用全部大寫？選擇適合的字體，能夠達(dá)到光學(xué)清晰度。在你的設(shè)計中適度使用“全部大寫”是很好的。選擇一個合適的字體與行高和較重的字重，使用戶的光學(xué)清晰度。
讓面包屑脫穎而出，易于為用戶解釋。面包屑無處不在，經(jīng)常用于內(nèi)容豐富的網(wǎng)站，通過最小的調(diào)整，你可以確保用戶能夠快速定位他們在一個網(wǎng)站上的位置以及他們可能需要去的其他地方。如果用戶已經(jīng)通過使用跳轉(zhuǎn)到網(wǎng)站的某個深度，這一點(diǎn)尤其有用。
使用高度飽和的顏色?試一試用淺色調(diào)來緩和氣氛或者陰涼處。高度飽和的顏色(明亮的藍(lán)色、紅色、綠色等)可以讓網(wǎng)站看起來很棒，但是當(dāng)過度使用時，它們會使使用者的眼睛疲勞，主要是在使用的時候的文字內(nèi)容。盡可能使用時要適度，并盡量與柔和的顏色搭配顏色或色調(diào)變化)的飽和顏色，以避免可怕的眼睛疲勞。使用這種方法還可以直接注意到飽和的色彩和使最重要的內(nèi)容前面和中心，與更柔和的顏色采取較少突出角色，讓用戶的眼睛休息一下。記住，在選擇顏色時，可讀性和可訪問性應(yīng)該是最優(yōu)先的。
在ui中使用已建立的圖標(biāo)，為了避免給用戶造成混淆。在你的設(shè)計中添加圖標(biāo)時，試著選擇一個有代表性的已建立的圖標(biāo)。不要選擇一個能傳達(dá)正確含義和功能的圖標(biāo)否則會引起困惑，成為用戶的認(rèn)知障礙。不要在這些圖標(biāo)上過于叛逆。
在眾多經(jīng)過嘗試和測試的設(shè)計原則中，這里有一個是幫助您為用戶生成更清晰的ui的關(guān)鍵。接近只是確保相關(guān)設(shè)計元素放置在一起的過程，表明彼此之間的關(guān)系，這有助于加快用戶的認(rèn)知。
4pt基線網(wǎng)格+ 8pt網(wǎng)格=單一網(wǎng)格。當(dāng)使用類型時，8點(diǎn)網(wǎng)格旁邊使用4點(diǎn)基線
可以為你的設(shè)計帶來更和諧的垂直節(jié)奏。您需要對齊您的類型到基線網(wǎng)格4，使用的行高值為4的倍數(shù)（16、20、24、28等）
為什么4？我發(fā)現(xiàn)在過去使用特定的文本大小時，按8的倍數(shù)縮放是不太合適。
減少標(biāo)題上的行高是很好的。與長形式的主體文本不同，它需要足夠的行高，以便折行易讀。標(biāo)題的推薦行高通常約為1至1.3倍。
選顏色有困難計劃嗎？在顏色上進(jìn)行類比論。類似的顏色，也被稱為相鄰或相鄰的色調(diào)，是其中之一最和諧的配色方案，可以大大幫助你，如果你有很難挑選出搭配得很好的顏色。由三原色、二原色和三原色組成的一組相鄰的色調(diào)幫助您創(chuàng)建一個簡單的，顏色方案快速。當(dāng)你需要快速將顏色調(diào)和到混合中時，可以使用類似的方法。
在你的設(shè)計中盡量提高信噪比。你可以在你的設(shè)計中通過最大化信號來實(shí)現(xiàn)清晰和可用性最小化噪聲，從而產(chǎn)生高信噪比。您可以通過確保提供相關(guān)信息(信號)來實(shí)現(xiàn)這一點(diǎn)有效，不相關(guān)的信息(噪聲)被減少或完全刪除。事情更加清晰。提高你的信噪比。
我想用更非正式的方式說話。語氣嗎？嘗試所有小寫字母。使用較重的字體和大寫會顯得有點(diǎn)正式和夸張。試著選擇全小寫和較輕的字體。在處理特定項(xiàng)目時，使用類似全小寫的拷貝可以呈現(xiàn)更非正式的、可接觸的信息。記住要在圖像之間使用某種顏色疊加與文字達(dá)到較強(qiáng)的對比。
當(dāng)使用類型時，元素不需要尖叫“看看我!”一直如此但他們確實(shí)需要一個平衡的等級制度。只需通過重量、大小和顏色進(jìn)行細(xì)微的調(diào)整就可以實(shí)現(xiàn)這一點(diǎn)。這樣做可以讓用戶掃描并找到必要的元素，避免在過程中產(chǎn)生任何混淆。
養(yǎng)肥了，字體大小為最佳易讀性。當(dāng)設(shè)置暗色文字與淺色背景，選擇一個更輕的粗細(xì)。但是…反過來說:淺色文字>深色背景。最好是看一下增加一點(diǎn)字體重量，特別是對于長表單副本。以最佳的易讀性為目標(biāo)，避免讓用戶的眼睛疲勞。
試著為你要呈現(xiàn)的內(nèi)容選擇合適的字體。用戶是精明的，有一種直觀的感覺，當(dāng)內(nèi)容與他們交談當(dāng)它不是。正確的字體選擇是至關(guān)重要的，使您的內(nèi)容講給他們直率和情感的水平。
你是否使用全大寫的短行文本？嗯…這是一個好主意，增加這些字母之間的間距，以達(dá)到更好的用戶的易讀性。這樣做使單詞更容易閱讀和處理，因?yàn)樽帜父啾舜藚^(qū)分。字母之間的間距只要稍微增加一點(diǎn)就可以。
打開這些錯誤消息，您的表格有幫助。在使用表單時，請嘗試并確保錯誤消息得到解釋。出了什么問題，如何補(bǔ)救?？偸亲層脩袅私馇闆r，即使是像常規(guī)一樣常見的事情的形式。讓這些錯誤消息有用，不要讓您的用戶蒙昧。
試著向用戶保證在加載過程中會發(fā)生一些的事情你的應(yīng)用程序。顯示應(yīng)用程序元素的框架可以幫助你快速溝通布局和確保用戶正在發(fā)生一些事情。系統(tǒng)狀態(tài)可見性是一個重要的原則要遵循，并允許用戶知道發(fā)生了什么。不要讓用戶從一開始玩猜謎游戲。
告訴用戶將要做什么如果他們應(yīng)用了某個動作。在應(yīng)用特定的操作之前，總是嘗試并詳細(xì)地告知用戶可以有結(jié)果。這尤其適用于具有不可逆轉(zhuǎn)后果的行為，如刪除某些東西。讓用戶知道將要發(fā)生什么，并在此之前要求他們進(jìn)行確認(rèn)。他們就會按下那個標(biāo)有“刪除”的紅色大按鈕。
藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加ben_lanlan，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系
作者：卡洛設(shè)計鋪 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計公司
藍(lán)藍(lán)設(shè)計的小編 http://sillybuy.com