262022-9

底部標簽欄全面解析

一、標簽欄是什么？

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

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

二、為什么標簽欄要放于底部？

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

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

這意味著：

將常用的“行為”放在屏幕底部很重要，因為只需一鍵式的交互即可輕松到達這些“行為”。

三、標簽欄的三大原則

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

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

為了讓標簽欄表現(xiàn)清晰，兩大平臺在規(guī)范里都對標簽數(shù)量給出了相同的建議：建議標簽欄內(nèi)的標簽個數(shù)為3個至5個。因為標簽過多會使每一個單元標簽的可觸空間降低，人們在物理上（手指）難以點擊或誤觸，除此之外還會增加應(yīng)用程序結(jié)構(gòu)的復(fù)雜性。

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

3.2 位置清晰

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

3.3 可預(yù)測行為

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

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

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

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

4.1 圖標視覺大小

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

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

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

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

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

4.2 標簽欄布局

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

4.2.1 屏幕等分

屏幕等分是最常見的標簽布局形式，因為不管它存在多少圖標，都可以用它進行屏幕劃分，計算方法也十分簡單，屏幕的寬度除以標簽個數(shù)就是每列寬度。采用此等劃分的案例有：懂車帝、今日頭條。

4.2.2 圖標左右間距相等

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

4.3 標簽欄熱點區(qū)域

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

五、標簽欄的圖標樣式

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

5.1 線性圖標

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

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

5.2面性圖標

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

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

5.3線性+面性圖標

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

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

5.4輕質(zhì)感圖標

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

*圖標樣式的常用變化（選中與未選中）

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

六、標簽欄的展示形式

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

6.1圖標+文字

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

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

6.2純圖標

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

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

對于我們設(shè)計師來說使用純圖標樣式的產(chǎn)品中最為熟悉的就是花瓣了。

6.3純文字（部分含標識）

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

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

6.4舵式

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

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

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

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

7.1視覺層面

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

7.1.1設(shè)計裝飾性圖標

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

&整體裝飾圖標

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

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

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

&單個裝飾性圖標

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

7.1.2加入品牌基因

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

&品牌顏色

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

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

&品牌LOGO

提取品牌LOGO是最常用的使用方式，我們從品牌中提取出來的圖標一般運用在APP首頁標簽。因為首頁是APP中最重要的頁面，也是進入APP默認的頁面，把首頁圖標替換成品牌LOGO，能反復(fù)加強了用戶對App的LOGO印象，這樣不但使App內(nèi)外形成了視覺聯(lián)系，同時也二次傳遞了品牌形象。例如大眾點評，它的首頁標簽就用了品牌LOGO，同時也使用了品牌顏色。

&品牌元素

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

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

&品牌名稱

如果你的品牌還不為大眾所熟知，那么為了強化用戶對品牌名稱的認知，可以把品牌名稱直接放入標簽欄中。例如MONO，就把它的名稱分為四個字母分別放在了4個標簽內(nèi)，需要注意的是這類圖標不能單獨出現(xiàn)，因為它本身不具備識別性與引導(dǎo)性，必須配合文字一起出現(xiàn)，這樣才能讓用戶理解標簽的真正功能，我們不能為了設(shè)計而設(shè)計。

&品牌性格

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

&品牌吉祥物

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

7.1.3讓用戶自定義

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

&用戶頭像

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

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

&捏臉

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

7.2交互層面

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

7.2.1標簽功能切換

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

&承載2個功能案例

SOUL的廣場標簽（進入選取頁+刷新）

SOUL的廣告標簽承載了2個功能，當你處于其他標簽時，點擊廣場標簽則直接進入到廣場頁面；當你處于廣場頁面中時，再次點擊標簽則會刷新整個頁面。

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

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

&承載3個功能案例

淘寶首頁標簽（進入選取頁+刷新+置頂）

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

愛奇藝首頁標簽（進入選取頁+到達指定位置+置頂）

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

7.2.2觸覺與聽覺

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

&觸覺

西瓜視頻與今日頭條在點擊標簽欄圖標時手機就會發(fā)出輕微的震動，給予了用戶很好的點擊反饋。

&聽覺

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

7.2.3標簽動畫

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

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

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

&虎牙-抖動+趣味表達

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

&汽車之家-結(jié)合容器+細節(jié)晃動

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

作者：黑獅力來源：站酷

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

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

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

評論(0) 瀏覽(1503)

262022-9

如何讓你的圖標具有說服力？

純純

一、圖標的定義及分類

1、圖標的定義

圖標是具有高度概括性的、用于視覺信息傳達的圖像。圖標常?？梢詡鬟_出豐富的信息，并且常常和詞匯、文本搭配相互搭配使用，兩者互相支撐，或隱晦或直白地共同傳遞出其中所包含的意義、特征、內(nèi)容和信息。

在數(shù)字設(shè)計領(lǐng)域，圖標作為網(wǎng)頁或者UI界面中的象形圖和表意文字而存在，是確保界面可用性的基礎(chǔ)設(shè)施，也是達成人機交互這一目標的有效途徑。

2、圖標類型（基于功能劃分）

2-1釋意性圖標：

釋意性圖標是用來解釋和闡明特定功能或者內(nèi)容類別的視覺標記。它并不是一定被點擊可交互的UI元素，在很多時候只是有輔助解釋其含義的文案。在不搭配文本的情況下用戶會借助這些圖標來獲取信息。不過有時候圖標表達的含義可能還不夠完整或者清晰，所以會將圖標和文案搭配起來一起使用，這樣可以大大降低誤讀的可能性，釋意性圖標一共可以分為以下三類：

2-1-1純圖標：

例如火球買手APP中的店家“特定標簽”，以及圖文展示下的“觀看數(shù)量圖標”與“收藏圖標”，它們并不需要用文字去解釋，用戶也知道它表達的是什么。

2-1-2圖文結(jié)合：

例如造作APP中的“購物車圖標”與“收貨地址圖標”，為了讓用戶能夠很好的明白圖標的意圖，所以在圖標下方會配有文字提示，這樣就能大大的降低誤讀的可能性。

2-1-3純圖標（圖標內(nèi)含文字）：

例如開眼APP中視頻封面左上角“開眼精選圖標”，它把圖標與重要文字結(jié)合在一起展示給用戶，看起來不僅十分具有個性，而且用戶對其理解性也非常強。

2-2交互性圖標：

交互圖標的最大意義在于可以引導(dǎo)用戶進行交互行為，是在產(chǎn)品中不可或缺的組成部分。它們可以在用戶不同的操作手勢下幫助用戶執(zhí)行不同的交互過程，這種類型圖標也是APP中最常見的，常見的交互性圖標如：搜索、底部標簽、返回、點贊、收藏、掃一掃等。

2-3裝飾性圖標：

裝飾性圖標僅僅是用來提升整個界面的視覺體驗，它并不具備任何功能性。這類圖標往往是為了迎合用戶的偏好與期望，通過豐富視覺體驗的方法來增加內(nèi)容的觀賞性，這樣不僅可以吸引并留住用戶，還可以讓整個用戶體驗更加積極，最為大家所熟悉的就是滴滴出行APP中的“小車圖標”。

3、圖標類型（基于基礎(chǔ)樣式+表現(xiàn)手法）

圖標基于基礎(chǔ)樣式（線、面、線面結(jié)合）+表現(xiàn)手法（顏色、透明度、投影、疊加...）劃分，一共可以分為20種類型，每種類型的展示方式也都各有不同。

3-1線性圖標（6種）

線性圖標通過線來塑造輪廓，在界面中App的圖標尺寸并不大，所以如果線過于復(fù)雜，在小面積中過多的線會對識別性產(chǎn)生較大的困擾。在圖標設(shè)計中使用的線有粗細之分，常用的App圖標設(shè)計線的粗細一般有2PX或者3PX，不同的線條粗細所帶來的視覺感受也不同，細線顯得精致，粗線視覺面積大，顯得厚重。

3-2面性圖標（6種）

面性圖標是通過面來塑造形體的圖標，采用了剪影的設(shè)計形式，通過線或者面去切割基礎(chǔ)輪廓面，通過分型來塑造圖標的體積感。不同的切割手法造成了面性圖標設(shè)計感的差別。

3-3線面結(jié)合圖標（6種）

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

3-4擬物化圖標

這類圖標的特點是通過細節(jié)和光影還原現(xiàn)實物品的造型和質(zhì)感，能給用戶極強的代入感，用戶可通過對現(xiàn)實事物的聯(lián)想，快速領(lǐng)會圖標表達的意圖。但是隨著 ICON 的發(fā)展，擬物圖標也帶來了一些問題，因為用戶關(guān)注的核心永遠都是信息本身，華麗的視覺元素或許在用戶使用的初期，起到賞心悅目的裝飾，但久而久之，這都將成為對用戶獲取信息的一種干擾，所以現(xiàn)在擬物化的圖標很少運用在APP界面之內(nèi)。

3-5輕質(zhì)感圖標

相較于擬物風格不會有太多復(fù)雜的視覺元素，層次簡單，用色素雅干凈，采用輕投影、輕漸變的方法設(shè)計，這類圖標具有一定的立體感，能給人輕盈、簡潔、精致的感覺，在界面設(shè)計中，一般在面積比較大的區(qū)域我們會使用加入輕質(zhì)感的圖標。

二、圖標設(shè)計規(guī)范

合理的遵循圖標規(guī)范可以有利于設(shè)計師之間合作使用，指導(dǎo)設(shè)計師如何規(guī)范的去設(shè)計圖標，以確保企業(yè)所有產(chǎn)品圖標風格的一致性和可用性達到統(tǒng)一，同時也是為了后續(xù)產(chǎn)品更新迭代有可參考的地方。

1、圖標尺寸

為了保證圖標的尺寸大小一致性，我們往往會建立基礎(chǔ)的網(wǎng)格尺寸來進行繪制圖標，常用的網(wǎng)格繪制尺寸為：16、24、36、48、64、128、512、1024。這些尺寸并不是固定的，在設(shè)計中也會存在特殊的尺寸，例如谷歌在臺式機上設(shè)計圖標，當鼠標和鍵盤是主要輸入方法時，就會使用密集布局，基礎(chǔ)網(wǎng)格就會縮小到20。

下面就以常用的24x24為大家展示：

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

*在使用常規(guī)圖標時避免一部分在出血位。

*在使用多個元素的圖標時，避免圖標擁擠我們可以讓其部分出現(xiàn)在出血位，確保它們之間有足夠的空間。

2、圖標的keyline

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

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

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

3、像素

3-1像素統(tǒng)一

在設(shè)計一整套系統(tǒng)化的圖標時，我們一定要注意圖標的像素大小，要運用相同的網(wǎng)格尺寸設(shè)計相同線條粗細的圖標，包括曲線，角度以及內(nèi)部和外部筆劃。這樣圖標看起來才更統(tǒng)一，也有利于后期圖標的迭代更新。

當然，描邊像素的粗細并不是絕對的，如果我們要做一些密集型的圖標時，可以考慮適當?shù)目s小線的像素大小。如下，我們設(shè)定的系統(tǒng)圖標線條粗細為3px，當你用3px作用于指紋圖標上時就會顯得非常擁擠，并且在視覺上比其余圖標更重，這時我們就可以把它的線條像素降級，設(shè)定為2px。

3-2避免小數(shù)位

我們在用矢量工具繪制圖標時，要仔細看好圖標的網(wǎng)格尺寸和圖標結(jié)構(gòu)尺寸，避免產(chǎn)生小數(shù)位。

4、圖標的曲率

曲率簡單來講就是圖標中帶有圓角的邊角度數(shù)，只要是帶有圓角的矩形就都會有一定的曲率。在圖標中曲率的呈現(xiàn)方式有兩種：外曲、內(nèi)曲。

外曲與內(nèi)曲并不一定同時存在，在特定情況下內(nèi)部結(jié)構(gòu)可以是直角（無曲率）。如下圖：當內(nèi)部結(jié)構(gòu)都是圓角時會發(fā)現(xiàn)整個圖標稍顯臃腫，這時我們可以把部分內(nèi)部圓角直接變?yōu)橹苯牵ㄒ部梢愿淖兦蚀笮。?，改變后就會發(fā)現(xiàn)圖標的整體結(jié)構(gòu)會顯得更加協(xié)調(diào)。需要注意的是如果一個圖標做了這樣的處理，在同等情況下的圖標都要做一樣的處理，不然圖標會顯得非常雜亂，不統(tǒng)一。

5、傾斜角度

根據(jù)像素的網(wǎng)格線來設(shè)置兩條對角線，會讓你的圖標看起來更清晰。在傾斜的角度選擇上，不要出現(xiàn)7.8°、14.2°這樣的奇怪數(shù)值。我們可以將15°的增量用于傾斜角度（也可以采用其他有規(guī)律的角度方案），這樣會使得整體的圖形變化顯得更加規(guī)律，也能夠滿足不同圖形的角度需求。

6、斷點形態(tài)

在做很多圖標時都會用斷點的缺口來打破“全包邊圖標”的沉悶感，使圖標具有透氣性，如果想給圖標添加斷點，那么要保證斷點的形態(tài)保持一致。

7、圖標間距

確保圖標內(nèi)每個細節(jié)和元素都有足夠的空間，圖標的相鄰元素之間的空間在整個圖標中不應(yīng)太小，我們可以定義最小間隙以避免輪廓“粘住”，在24px尺寸下的間距不得小于1px。

8、透視

如果在做圖標時牽涉到了透視需求，那么就一定要保證圖標的透視角度一致。

9、視覺重心

非中心對稱圖形物理對齊時視覺上會有偏離感，多個不同形狀的圖標視覺重心并不在一條水平線上，需要微調(diào)才能保證平衡感。

10、圖形整潔

在圖形的處理上，不要留有多余的節(jié)點，干掉多余的節(jié)點，保持圖形的整潔。

11、命名

ICON命名要求較為嚴格，涉及到我們切圖給開發(fā)，所以我們命名爭取做對，且需嚴格遵守規(guī)則，正確的命名原則：類型_位置_功能_狀態(tài)_大小

三、圖標的性格走向

每個App應(yīng)該有自己獨特的產(chǎn)品氣質(zhì)，同樣圖標性格也應(yīng)當與產(chǎn)品氣質(zhì)保持一致。圖標性格一共分為了4個走向：粗曠（粗直）、活潑（粗圓）、商務(wù)（細直）、精致（細圓）。

1、粗曠類圖標

圖標結(jié)構(gòu)特點：線條較粗（或面性圖標、線面結(jié)合圖標）、拐角為直角。

粗曠類圖標讓人看起來非常飽滿、剛正，它更多適用于男性、潮流、有格調(diào)類型等產(chǎn)品中。例如VSCO，它的底部標簽欄圖標全部采用了粗線條的直角設(shè)計。

2、活潑類圖標

圖標結(jié)構(gòu)特點：線條較粗（或面性圖標、線面結(jié)合圖標）、拐角為圓角。

活潑類圖標讓人看起來十分容易接近，能讓人感受到溫暖、舒適，它更多適用于電商、社交、母嬰、二次元、娛樂、直播、美食等產(chǎn)品中。例如閑魚，不管是在LOGO字體的處理還是APP內(nèi)部的圖標處理，都是采用了線條較粗的圓角設(shè)計。

3、商務(wù)類圖標

圖標結(jié)構(gòu)特點：線條較細、拐角為直角。

商務(wù)類圖標讓人看起來十分規(guī)矩、嚴謹、值得信賴，它更多適用于新聞、政府、商務(wù)、工具等產(chǎn)品中。例如工具類的思維導(dǎo)圖APP，它的可操作按鈕都是商務(wù)類的圖標。因為這類圖標的特性，所以目前我們很少在移動端上看到它，它更多適用于PC端的后臺界面中。

4、精致類圖標

圖標結(jié)構(gòu)特點：線條較細、拐角為圓角。

精致類圖標讓人看起來非常干凈、柔和、顯得高級感，它更多適用于旅游、奢侈品、藝術(shù)、領(lǐng)域垂直等產(chǎn)品中。例如airbnb，在APP應(yīng)用中大部分都采用了精致類圖標。

四、圖標的評判標準

當圖標設(shè)計完后，我們應(yīng)該如何去評判一個圖標的好壞？很多設(shè)計師并沒有完整的評判體系，其實我們可以從這五個維度對圖標進行評判：識別性、圖標氣質(zhì)、協(xié)調(diào)性、一致性、品牌調(diào)性。

1、識別性

圖標最主要的用途就是輔助用戶理解信息，特別是對于當圖標單獨存在時，一定不能讓用戶產(chǎn)生疑慮。要想圖標達到高識別，我們可以從這2個方向入手：大眾認知隱喻、真實世界映射。

1-1 大眾認知隱喻

在互聯(lián)網(wǎng)普及的今天，許多界面的隱喻圖標已被廣大用戶熟知認可，對于這類隱喻圖標用戶不用思考身體就已做出反應(yīng)，我們在設(shè)計圖標時可以從隱喻圖標中添加修改部分元素，從而形成新的圖標，這樣既能保證圖標的識別性，也能做出差異化。

1-2 真實世界映射

選擇真實世界中的物品映射，能使人下意識對圖標的作用有近似預(yù)期，降低學習成本，提高識別度。

2、圖標氣質(zhì)

每個App應(yīng)該有自己獨特的產(chǎn)品氣質(zhì)，而我們所做的圖標就是要跟隨產(chǎn)品的氣質(zhì)。例如當你要做一款二次元產(chǎn)品，你的圖標氣質(zhì)就應(yīng)該偏活潑、可愛、萌、青春，而不是剛硬、嚴謹、規(guī)矩。

3、一致性

一致性是圖標的基礎(chǔ)，我們在繪制整套圖標時要確保它們的基礎(chǔ)屬性全部一致，細節(jié)統(tǒng)一，圖標內(nèi)容的統(tǒng)一在視覺上也更加和諧美觀。圖標是否具有一致性，就要從以下七個方向去評判：尺寸大小、圖形角度、拐角（曲率）、描邊、間距、透視、顏色。

3-1 尺寸大?。壕W(wǎng)格大小是否統(tǒng)一、是否遵守圖標的keyline規(guī)則。

3-2 圖形角度：是否遵循設(shè)定的角度規(guī)范（15°的增量用于傾斜角度）

3-3 拐角（曲率）：拐角的曲率是否統(tǒng)一，如果圖形太多且復(fù)雜，那么我們可以根據(jù)圖標的特性去設(shè)定曲率的規(guī)則，例如可以設(shè)定當邊角像素在1-2px時內(nèi)外曲率為2px；當邊角像素在3px時內(nèi)外曲為2px，內(nèi)曲為1px；當邊角像素大于或等于4px時，外曲為2px，內(nèi)部則為直角。

3-4 描邊：描邊大小是否一致。

3-5 間距：是否遵守間距規(guī)范。

3-6 透視：透視是否一致，避免在同一套圖標中出現(xiàn)正視圖/側(cè)視圖混雜的情況。

3-7顏色：在圖標的配色上要保持一致的規(guī)律，采用相同的顏色是比較常見的配色方式。如果采用不同色相的配色方式。也需要保持整體的配色協(xié)調(diào)，避免出現(xiàn)飽和度、明度反差過大的配色。

4、協(xié)調(diào)性

一致性代表的是圖標的基礎(chǔ)，而協(xié)調(diào)性則代表圖標的整體狀態(tài)，協(xié)調(diào)性的呈現(xiàn)狀態(tài)是驗證一致性是否合理的標準，當協(xié)調(diào)性存在問題時，我們就要反過來查看一致性存在的誤區(qū)并給予修改。在圖標的協(xié)調(diào)性上我們主要審視這三點：視覺大小、飽滿度、透析感。

4-1 視覺大小

視覺大小對標的是一致性的尺寸大小與描邊大小，當你發(fā)現(xiàn)圖標視覺大小不對等時，你就要回過去查看你的網(wǎng)格與keyline是否運用正確，確保正確后再查看你的圖標是否按照keyline的規(guī)范繪制以及描邊大小是否一致。（同樣尺寸下的圖標，從光感上來看描邊粗的圖標視覺偏大）

4-2 飽滿度

飽滿度對標的一致性的間距，當你發(fā)現(xiàn)圖標不夠飽滿時，你就要去查看你設(shè)定的間距值是否偏大，是否合理。

4-3 透析感

透析感簡單來說就是留白區(qū)域。透析感對標的也是一致性的間距，當元素的描邊過大時，我們就要合理的設(shè)定間距的最小值，不然整個圖標就顯得非常臃腫。

5、品牌調(diào)性

品牌調(diào)性是我們經(jīng)常提到的緯度，我們打開很多APP都會發(fā)現(xiàn)他們的圖標設(shè)計都非常普通，沒有任何特色，過于大眾化，雖然都做了一些形式上的改變，但總是與品牌缺乏聯(lián)動性。其實我們可以結(jié)合品牌調(diào)性，在圖標上做更多的聯(lián)動、創(chuàng)新。

5-1品牌顏色

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

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

5-2品牌LOGO

提取品牌LOGO是最常用的使用方式，我們從品牌中提取出來的圖標一般運用在APP首頁標簽。因為首頁是APP中最重要的頁面，也是進入APP默認的頁面，把首頁圖標替換成品牌LOGO，能反復(fù)加強了用戶對App的logo印象，這樣不但使App內(nèi)外形成了視覺聯(lián)系，同時也二次傳遞了品牌形象。例如大眾點評，它的首頁標簽就用了品牌LOGO。

5-3品牌元素

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

品牌提取的元素并不只是所見到的品牌視覺形象，還可以提取與品牌內(nèi)容強相關(guān)的元素。例如QQ音樂，就把音符作為首頁圖標。

5-4品牌名稱

如果你的品牌還不為大眾所熟知，那么為了強化用戶對品牌名稱的認知，可以把品牌名稱直接放入標簽欄中。例如MONO，就把它的名稱分為四個字母分別放在了4個標簽內(nèi)，需要注意的是這類圖標不能單獨出現(xiàn)，因為它本身不具備引導(dǎo)含義，必須配合文字一起出現(xiàn)，這樣才能讓用戶能易理解。

5-5品牌性格

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

5-6吉祥物

如果品牌中含有吉祥物，我們可以提取吉祥物的外形，把它用于產(chǎn)品的圖標中。例如盒馬，它就把盒馬的吉祥物做了風格化的處理，放于APP的首頁標簽。

作者：黑獅力來源：站酷

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

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

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

評論(0) 瀏覽(902)

232022-9

客戶：要多、要大、要好看，能安排不?

seo達人

一、使用比較有特色的風格

既然粗暴、接地氣的設(shè)計容易被人說成“土”，那么使用一種當下比較流行，或者比較有特色的風格，就能有效增加畫面的設(shè)計感和時尚感。

▲ 上圖使用高飽和度的藍色和綠色組合搭配，以及文字以背景的方式環(huán)繞在產(chǎn)品的周圍，都是近幾年比較流行的設(shè)計手法。

▲ 上圖使用扁平效果的描邊色塊來進行排版，既能突出文字信息、視覺效果也很時尚。

▲ 把高飽和度對比色、扁平風、幾何圖形、文疊圖等一些常在藝術(shù)海報中使用的技巧，用到促銷海報中來，這種接地氣的設(shè)計是不是也變得高級了很多?

▲ 用波普風格設(shè)計促銷海報，效果也是很亮眼的。

二、把文字圖形化

有很多海報設(shè)計需求是以文字為主的，客戶也并沒有提供配圖，如果只展示文字，效果很容易單調(diào)，這時就可以嘗試提取文字中的關(guān)鍵詞，設(shè)計一個圖形符號與文字信息進行巧妙組合，文字與圖形符號共同組合成視覺主體。

這么做既可以增加畫面的美觀性、視覺沖擊力、形式感，同時文字的面積占比也不會被大面積壓縮，保證信息的清晰易讀。

▲ 把文字與光線組合在一起，既突出了文字、也加強了畫面的視覺沖擊和美觀性，同時，電子產(chǎn)品的品類調(diào)性也得到了體現(xiàn)。

▲ 上圖把文字與漢堡圖形組合成一個主視覺圖形，加強了畫面的形式感。

▲ 上圖把文字與打板器組合成主視覺圖形，打破了純文字的單調(diào)感。

▲ 上圖把文字和圖片放在一個外賣袋里，加強了設(shè)計的帶入感和產(chǎn)品屬性。

三、把文字場景化

其實這也是文字圖形化的一種形式，只不過不是把文字與具像的圖形符號結(jié)合，而是把通過把文字進行扭曲、變形、添加元素等方式，使其具備抽象的場景特征。

▲ 該海報把主要信息組扭曲成墻面和地面的效果，創(chuàng)造出一個立體空間。

▲ 這件作品與上圖的設(shè)計手法有點類似，也不知道是誰借鑒的誰。

▲ 上圖把“敢為先”這個幾個字拉大，布滿月球后面的整個天空背景，就好似一扇巨大的城門。

四、圖文組合

即把圖片與主要文字組合在一起，共同形成畫面的主視覺，而不是相互獨立，把文字當成圖片的配文，常用的圖文組合方式有圖疊文、文疊圖、圖文交叉等。

圖文組合的設(shè)計方式可以加強圖文之間的聯(lián)系和對比關(guān)系，使畫面更整體、更聚焦。

五、加入人物或動物插畫

如果版面中只有文字，或者只有文字和產(chǎn)品圖片，那么版面都容易顯得無趣、缺少細節(jié)，在畫面中加入人物和動物而可以增強代入感和親切感，不過這類實物素材都有版權(quán)，而且比較常規(guī)，而改成插畫素材就可以有效解決這一問題。另外，最好要讓這些插畫元素與文字或產(chǎn)品發(fā)生互動。

▲ 上圖加了一個卡通的廚師以后，除了畫面更生動、更有趣，也會給人一種值得信賴的感覺。

▲ 上圖的排版和形式其實比較普通，但配上搞怪的插畫后，海報變得有趣了許多。

▲ 版面上方的熊貓加強了海報的吸引力和趣味性。

六、精致的排版和配色

下面的這些促銷海報并沒有特別的風格、巧妙的創(chuàng)意，也沒有新意的設(shè)計形式，只是通過精致的排版和漂亮的配色，把大量的文字和圖片素材合理地編排在一起，效果照樣不錯。

▲ 信息雖然很多，但是層級分明、清晰閱讀，大量使用色塊進行排版，而且在編排上有很多細節(jié)的變化，顏色為類比色組合。

▲ 圖片和配色很有食欲，文字排版簡單、清晰，但又通過不同的色彩、字體、字號、修飾手法將不同信息進行鮮明的層級區(qū)分，文字與圖片有關(guān)聯(lián)但互不干擾。

▲ 外邊框的處理以及版面中的圓點底紋使版面顯得更精致、更有設(shè)計感，版面雖然排得很滿，但是主次分明、信息清晰易讀，三組食物所搭配的文字雖然不大，但是細節(jié)滿滿、井然有序。

▲ 大量的手寫字體給人一種“純手工制作”的感覺，與樸實無華的產(chǎn)品形成呼應(yīng)，文字全部集中排在版面的上方和下方，而中間區(qū)域完全留給了產(chǎn)品圖片，視覺對比鮮明。

拋開客戶的需求以及效果談設(shè)計的美觀性就是耍流氓，把文字縮小、加一些沒什么意義的英文、使用一些酷炫的排版技巧，可能會讓你的設(shè)計更精致、更洋氣，但如果拋棄了客戶的需求和消費者真正關(guān)心的東西，那么我們并沒有真正解決問題，如果客戶要大、要多，那么我們就爭取給他一個又大、又多、又好看的方案。

作者：蔥爺

轉(zhuǎn)載請注明：學UI網(wǎng)》客戶：要多、要大、要好看，能安排不?

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

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

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

評論(0) 瀏覽(1051)

232022-9

中后臺加載-被忽略的體驗細節(jié)

純純

undefined

大部分設(shè)計師應(yīng)該都遇到過這種場景：在做設(shè)計前并沒有考慮到加載，但在進行還原度走查或者驗收的時候才發(fā)現(xiàn)，由于某些頁面數(shù)據(jù)請求較慢，導(dǎo)致在頁面中會出現(xiàn)空屏狀態(tài)。這時才想起需要在這些頁面添加動畫來承載頁面的過渡。

歸根結(jié)底是因為設(shè)計師在設(shè)計過程中，更多關(guān)注頁面本身，而很少去思考頁面在呈現(xiàn)過程中何時會出現(xiàn)白屏狀態(tài)，都是后知后覺去補充完善。加載作為必備的一環(huán)，卻總是被忽略。目前很多B端產(chǎn)品在這方面都沒有一個系統(tǒng)合理的規(guī)劃，導(dǎo)致系統(tǒng)的加載體驗缺失或者不統(tǒng)一。

因此希望這篇文章能夠講清楚中后臺加載出現(xiàn)的場景和規(guī)則，對需要深入了解加載以及在制定加載規(guī)則的設(shè)計師朋友們帶來一些幫助。

undefined

加載通俗來講就是用戶從觸發(fā)頁面操作，到頁面最終呈現(xiàn)的一個等待過程。這個過程始終存在不可避免，只是時間有快有慢。快的加載只需要幾百毫秒就結(jié)束，但慢的加載就可能會達到幾秒甚至十幾秒，讓人產(chǎn)生焦慮。

而為什么會有如此大的差距，這就需要從頁面渲染的整體過程來進行說明。當我們從瀏覽器輸入網(wǎng)址，再到我們看到完整頁面的這個過程，網(wǎng)頁到底經(jīng)過了哪些步驟呢。經(jīng)過資料查詢和與前端確認，整體過程可以闡述如下：

從這里我們可以看到頁面的呈現(xiàn)是程序經(jīng)過了一系列操作才最終呈現(xiàn)到我們面前的。在這里可以將其簡化為四個階段：用戶操作功能→頁面向服務(wù)器發(fā)送請求→服務(wù)器接受并返回數(shù)據(jù)→頁面呈現(xiàn)。

而決定整個頁面加載快慢的就在于請求與數(shù)據(jù)這里。一般我們可以將頁面的數(shù)據(jù)分為2種類型：靜態(tài)資源和動態(tài)資源。

靜態(tài)資源：前端的固定頁面，這里面包含HTML、CSS、JS、圖片等等，不需要查數(shù)據(jù)庫也不需要程序處理，直接就能夠顯示的頁面?？梢院唵卫斫鉃槟?strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;">頁面上的固定字段和結(jié)構(gòu)。這種頁面一般加載速度比較快，比如我們看到的展示型官網(wǎng)一般都是前端寫好的靜態(tài)資源。

動態(tài)資源：而對于頁面上的動態(tài)變化的，需要程序處理或者從數(shù)據(jù)庫中讀數(shù)據(jù)，能根據(jù)不同的條件在頁面顯示不同的數(shù)據(jù)，比如表格數(shù)據(jù)、統(tǒng)計數(shù)據(jù)等稱為動態(tài)資源，這種都需要調(diào)用后臺接口來進行返回，因此加載速度相比于靜態(tài)資源就會更慢。

而它們的區(qū)分點用下圖可以表示：

可以看到靜態(tài)資源基本是直接返回，而動態(tài)資源還需要連接數(shù)據(jù)庫調(diào)取資源，尤其是在遇到數(shù)據(jù)庫調(diào)取較慢時就會花費更多時間。而我們加載緩慢的大多數(shù)問題，也基本上更多出現(xiàn)在動態(tài)資源的獲取上。

undefined

當我們清楚加載形成的原因，接下來要做的就是在需要加載的地方對其進行處理。這也是在設(shè)計過程中我們經(jīng)常遺漏的地方。我們先看一下目前常見的2種處理方式：「默認處理」和「使用進度指示器」

2.1程序默認處理方式：直接顯示

當我們對加載過程不進行任何處理時，程序就會以默認的方式進行-即根據(jù)資源獲取速度一步步呈現(xiàn)?？梢钥吹胶俚旰笈_的處理過程就是一種默認處理方式：

但是這種做法就會導(dǎo)致我們在頁面加載過程中會出現(xiàn)空屏狀態(tài)，比如上圖切換到概覽時出現(xiàn)了空屏狀態(tài)，尤其是當遇到了網(wǎng)絡(luò)緩慢的情況，會造成在加載時頁面停留在當前狀態(tài)下不動，往往會讓用戶陷入到「系統(tǒng)故障」的錯覺。

2.2通用處理方式：進度指示器

這個名詞說起來可能比較陌生，它指代的就是我們平時經(jīng)?？吹降募虞d動畫、骨架屏或者進度條等。進度指示器的作用就是告知用戶當前頁面并沒有故障，而是正在讀取數(shù)據(jù)。

通過添加進度指示器來對空屏狀態(tài)進行承載，能夠減輕用戶的焦慮感。目前很多B端產(chǎn)品更通用的形式是添加動畫來過渡。

但是在體驗過程中很容易發(fā)現(xiàn)一個問題，就是在產(chǎn)品的整體加載過程中，某些空屏狀態(tài)是沒被加載動畫覆蓋到的。當這些沒被覆蓋到的加載過程過長時，很容易出現(xiàn)焦慮感。比如神策數(shù)據(jù)在左側(cè)列表切換時的加載過程就沒被覆蓋：

想要更全面的把加載動畫覆蓋到所有頁面，我們就需要弄清頁面在哪些狀態(tài)下會出現(xiàn)空屏狀態(tài)，從而制定統(tǒng)一的加載動畫規(guī)則。這個問題可以先思考一下，后面解答。

undefined

在制定統(tǒng)一加載規(guī)則之前，我們需要明確一個概念，就是加載的模態(tài)與非模態(tài)。

3.1模態(tài)加載

模態(tài)加載的含義就是當前加載會中斷用戶其余操作，用戶在這個期間只能等待加載而不能進行其他操作（有的模態(tài)會提供取消按鈕）。如果你的頁面涉及到以下2種情況，可以考慮使用：

1.用戶當前的操作本身不能與其他操作同時進行。比如系統(tǒng)更新，或者工具類的導(dǎo)入導(dǎo)出相關(guān)操作，我們只能等待更新、導(dǎo)出完成才能繼續(xù)進行后續(xù)的操作。這時候可以使用模態(tài)加載來承載，比如protopie的導(dǎo)入操作；

2.當用戶進入到一個全新的頁面時，這個時候頁面什么都沒有，我們只能等待頁面加載完成才能進行后續(xù)的操作，因此在這種情況下也可以采用模態(tài)加載，比如我們剛進入Asanan產(chǎn)品頁面看到的首屏加載動畫：

除了上述2種情況外，你也可以根據(jù)你的業(yè)務(wù)場景來進行模態(tài)加載的選擇，但建議是盡量少用模態(tài)加載，其會對用戶的打斷和干擾性比較強。

3.2非模態(tài)加載

非模態(tài)加載的話，這種加載通常只會出現(xiàn)在需要加載的部分，不會中斷用戶其他操作。對用戶干擾比較小。比如我們常見的功能切換加載、數(shù)據(jù)篩選加載等都屬于非模態(tài)加載。

非模態(tài)加載相比于模態(tài)加載會更輕量，因為用戶隨時都可以打斷也不會影響到其他操作。因此建議在大部分情況下都可以使用非模態(tài)彈窗來進行承載，比如飛書的左側(cè)欄切換操作：

undefined

接下來我們進入正題，在這里我從加載的角度將網(wǎng)頁整體加載過程分為呈現(xiàn)加載規(guī)則和操作加載規(guī)則。

我們先談頁面呈現(xiàn)規(guī)則。前面已經(jīng)明確加載產(chǎn)生的原因和類型后，我們就可以開始為我們的產(chǎn)品制定統(tǒng)一的加載規(guī)則，以保證后續(xù)頁面加載的一致性。

4.1 頁面的加載過程拆解

在拆解頁面的加載過程前，我們進一步闡述之前提到的渲染原則，從前文中提到最后會經(jīng)過「解碼」和「渲染」2個步驟，這也是決定了我們看到的頁面的最終呈現(xiàn)順序：

1.頁面的渲染順序

我們看到的頁面是由HTML、CSS和JavaScript來進行構(gòu)成的。HTML可以看作最簡單的框架、CSS則是賦予了框架樣式，JavaScript則是負責頁面中的交互(當然JS也可以控制樣式，這里只描述主要功能)。

頁面在「解碼」階段，拿到的HTML文檔會被解碼為DOM樹，同時將CSS文件解析成CSSOM，這兩者結(jié)合后一起渲染頁面，JS一般是在最后渲染。所以邏輯上就是框架和樣式一起渲染，最后渲染交互。視覺的角度來講就是先看到元素樣式，然后才能進行對應(yīng)操作。

2.頁面呈現(xiàn)的視覺順序

由于瀏覽器渲染順序一般會根據(jù)代碼的順序進行渲染，而代碼在頁面中的構(gòu)建一般也是按照頁面的上下和左右的順序去寫的，因此我們看到的頁面的視覺呈現(xiàn)順序也是遵循從上到下，從左到右。

所以幾乎所有的產(chǎn)品都是先看到頂欄，然后左側(cè)邊欄，然后其他內(nèi)容。因此我們可以通過這個原則來拆解對應(yīng)的頁面，我們按照頁面常規(guī)結(jié)構(gòu)可以將其分為三個加載部分：頂欄、左側(cè)導(dǎo)航欄、內(nèi)容區(qū)域。而其加載順序如圖所示：

當知道對應(yīng)頁面的渲染順序后，我們就能夠清楚在頁面渲染的過程中哪些地方會出現(xiàn)空屏了。因此將頁面加載過程拆解為如下順序：

undefined

我們的加載動畫需要承載的就是上述這些白屏的地方，從而將加載細化為三種場景的拆分：全局加載+局部加載+內(nèi)部加載。如圖所示：

undefined

通過這三種加載就可以涵蓋頁面所涉及到的所有部分。接下來詳細闡述一下這三種類型的定義和用法。

4.2 全局加載

如上圖所示，全局加載的目的是為了覆蓋用戶從輸入網(wǎng)址到頁面的資源渲染的這個中間過程的空屏狀態(tài)而存在的。而這種狀態(tài)會涉及三種場景：

1.通過網(wǎng)址進入到一個新的頁面時；

2.通過鼠標右鍵或網(wǎng)頁刷新按鈕對該頁面刷新時；

3.通過頁面操作需要新開頁面時。

該全局加載的動畫構(gòu)成為：

1：覆蓋整個頁面的加載，由純白色+加載動畫構(gòu)成；

2：加載類型為模態(tài)加載，因為用戶在這種頁面狀態(tài)下并不能進行其它操作。

undefined

但在這里我們需要注意全局加載的開始和結(jié)束時間：

開始時間：當進入頁面時立即呈現(xiàn)加載動畫；

結(jié)束時間：當頁面加載出頂欄的時候，此時停止加載。

為何要這么處理結(jié)束時間，原因其實圖中已經(jīng)給出了。這里再解釋一下原則：只要有頁面資源返回，我們的全局加載動畫就會結(jié)束，隨后啟用局部加載來承接后續(xù)的狀態(tài)，避免用戶在當前狀態(tài)長時間等待。而頂欄在一般情況下都是最先加載出來的，所以以頂欄出現(xiàn)作為結(jié)束全局加載的標準。當然如果你的結(jié)構(gòu)沒有頂欄，可以以左側(cè)欄來作為結(jié)束標準。

4.3 局部加載

局部加載是用在頁面整體框架加載的過程中，承接在全局加載后。局部加載的使用場景可以概括如下：

1.頂欄加載結(jié)束后，用在剩余框架的加載效果（具體體現(xiàn)為左側(cè)邊欄和右側(cè)內(nèi)容區(qū)域）；

2.對于涉及到局部頁面的切換操作都會進行局部加載（比如左側(cè)邊欄的切換）；

光看文字可能不是特別清晰，在這里可以舉一個動態(tài)的例子來幫助理解：

上述展示的是在頁面呈現(xiàn)的時候一個完整的局部加載。在這里需要注意的是我們首次渲染和第二次渲染在加載動畫上是可以有區(qū)分的，可以通過程序控制讓這種加載動畫只在初次加載時出現(xiàn)。

第一次加載時出現(xiàn)是因為我們需要有加載動畫來承接框架首次加載的空屏時間：

但第二次的時候由于有緩存（緩存會加載我們的靜態(tài)資源，能夠讓我們的頁面框架在第二次時更快顯示），這樣在讀取框架時基本不需要加載，我們就可以通過程序來直接去掉其中的局部加載動畫，直接顯示框架來進行呈現(xiàn)。

undefined

目前在飛書和釘釘?shù)菳端產(chǎn)品后臺均采用了這種處理方式?？梢钥吹綀D中我在第一次切換到角色管理時是有碰撞小球的局部動畫存在的，而第二次再次進入時則直接出現(xiàn)框架。這樣既能夠保證加載動畫能夠覆蓋所有的空屏狀態(tài)，又避免了局部加載動畫的頻繁出現(xiàn)。

4.4 內(nèi)部加載

內(nèi)部加載是用在頁面內(nèi)部不同模塊數(shù)據(jù)間的加載。當框架都已經(jīng)加載結(jié)束，但某些數(shù)據(jù)由于接口比較慢，此時還沒有返回，這時我們就可以用內(nèi)部加載來進行承載。這應(yīng)該是我們更常見的加載情況：

在進行內(nèi)部加載的時候，需要注意，內(nèi)部加載的時候一般標題是存在的，因為標題基本都是固定的，所以能夠很快被拉取。比如Zoho的內(nèi)部加載，加載時標題已經(jīng)出現(xiàn)了：

通過這三種類型的加載，能夠覆蓋從用戶輸入網(wǎng)址，到頁面渲染完成這個頁面呈現(xiàn)過程中的全部加載場景。

undefined

說完頁面的呈現(xiàn)規(guī)則，再談頁面操作加載規(guī)則。頁面的操作其實對應(yīng)的是頁面控件的反饋。而我們的常用的控件比如有按鈕、tab切換等。我們不僅需要考慮控件本身的加載狀態(tài)，而且需要考慮到控件影響的其他頁面范圍。

5.1需要考慮控件本身加載

控件的加載并不是隨時都需要，我們要根據(jù)實際的數(shù)據(jù)量大小及業(yè)務(wù)場景來選擇性使用。目前我們需要考慮的控件及其加載狀態(tài)主要有如下：

undefined

比如圖中的按鈕的加載狀態(tài)是必備的，在很多場景下都會用到。但是下拉列表和級聯(lián)列表，在一般的場景下都不太需要進行加載，當遇到列表中的數(shù)據(jù)特別多或者調(diào)取特別慢時就可以考慮為其加上加載狀態(tài)。

5.2當控件操作會影響到頁面其他元素

這種控件比如日期篩選、表格篩選或者保存等操作，當你切換篩選條件后所有與其相關(guān)的頁面元素都會發(fā)生變化。在這種情況下我們需要考慮到被影響元素的狀態(tài)。目前的設(shè)計實現(xiàn)上有兩種做法：

1.被影響元素不可被操作，且該區(qū)域有遮罩+加載動畫來覆蓋；

2.被影響元素可進行操作，無任何動畫，但操作并不會影響之前提交的結(jié)果；

這兩種方案一種是利用遮罩防止用戶無效操作，另一種則是保持了足夠的操作自由性。個人在這里更傾向于處理方式1，我認為被影響的元素是需要有遮罩+動畫的，來避免用戶在加載期間對其進行無效操作，比如示例中方案2后面修改的名稱是沒有被系統(tǒng)保存的。

需要注意的是如果在產(chǎn)品中使用方案1，我們的遮罩區(qū)域只需要覆蓋被影響的元素就可以了（保存這種可以將按鈕一起覆蓋），比如通過篩選導(dǎo)致圖表數(shù)據(jù)發(fā)生變化，這時只需覆蓋圖表區(qū)域，而不用覆蓋篩選區(qū)域。這樣的好處是當某些篩選數(shù)據(jù)出現(xiàn)加載過慢問題時，用戶可以通過切換篩選項來打斷當前加載。

上述描述的操作都是針對于當前頁加載。當控件導(dǎo)致頁面刷新或者跳轉(zhuǎn)時，則整體遵照頁面呈現(xiàn)的規(guī)則進行加載。

undefined

上面闡述的加載已經(jīng)完全能夠覆蓋我們頁面整體的加載，但是還是需要提及一下骨架屏和進度條這兩種加載形式。

undefined

先說骨架屏。實際上骨架屏的使用效果體驗是優(yōu)于加載動畫的體驗的（骨架屏的加入使用會讓用戶感覺網(wǎng)頁出現(xiàn)的更快）。那么為什么在大部分的B端業(yè)務(wù)頁面中沒被用到呢，主要有2點原因：

1.每種骨架屏都需要進行對應(yīng)的定制開發(fā)，需要與加載后的頁面框架保持一致，這會增加了開發(fā)成本。

2.中后臺的業(yè)務(wù)界面對來說固定結(jié)構(gòu)的頁面會較少，這對于骨架屏的使用機會就相對較少。

個人認為在前期可以以統(tǒng)一加載體驗為主，在后期業(yè)務(wù)相對成熟后，可以針對固定結(jié)構(gòu)，通過骨架屏的使用優(yōu)化加載體驗。

再說進度條。我理解的進度條的使用條件：對于加載時間較長的規(guī)定場景可以考慮用進度條來承載，比如我們常見的游戲加載中進度條就用得比較多，因為游戲一般資源比較大。還比如figma在進入設(shè)計文件的過程中也采用了進度條加載也是因為設(shè)計文件可能會很大。

進度條在特定場景下能夠緩解用戶焦慮，讓用戶知道進展。但進度條在多數(shù)情況下都抓取不到程序的真實進度，這也會導(dǎo)致有時候我們看著加載到99%，那最后的1%遲遲加載不出來的的原因。目前很多中后臺產(chǎn)品對于進度條加載使用相對較少的原因，很大程度是沒有那種加載特別長的場景。

因此這兩種加載場景的使用會更加定制化，如果需要使用請根據(jù)具體的業(yè)務(wù)場景來進行選擇。

如果把加載動畫等比作頁面加載的外在，那么緩存和加載策略則是頁面加載的內(nèi)核，合理使用緩存和加載策略可以從根本上提升我們頁面的加載速度，讓用戶更快速地看到頁面。

7.1 關(guān)于頁面的資源緩存

大家肯定聽過緩存這個概念，前后端都可以使用緩存。緩存就是數(shù)據(jù)交換的緩沖區(qū)（稱作Cache），是存貯數(shù)據(jù)（使用頻繁的數(shù)據(jù)）的臨時地方。在這里主要講一下瀏覽器緩存：

undefined

從這張圖可以看出，服務(wù)器在請求數(shù)據(jù)時，會進行緩存的判斷，如果有緩存則首先讀取緩存，如果沒有則從服務(wù)器中拿取。調(diào)取緩存會在很大程度上提升頁面的加載速度，縮短了從服務(wù)獲取數(shù)據(jù)的時間。通常瀏覽器會主動對頁面的靜態(tài)資源進行對應(yīng)的緩存，這也就解釋了我們第二次進入頁面會比初次進入頁面時加載快的原因。

但程序其實也可以對動態(tài)資源（也就是需要從數(shù)據(jù)庫等拿到的資源）進行緩存的，并且可以設(shè)置緩存的過期時間（比如設(shè)置過期時間為1小時，那么1小時過后就會重新拉取新資源）。對于某些動態(tài)資源拉取過慢并且更新頻率不高的我們可以采用動態(tài)資源緩存的策略，從而提升整體的頁面加載體驗。

7.2 加載策略的正確使用

現(xiàn)階段我們常用的主要有下列6種加載策略：

加載策略的本質(zhì)就是通過對應(yīng)的加載設(shè)置來縮短產(chǎn)品與服務(wù)器交換數(shù)據(jù)的時間，接下來我們詳細看一下每種加載策略的具體使用策略：

7.2.1懶加載

懶加載是當內(nèi)容落入視窗被用戶看到時，才會進行加載。這種比較節(jié)省資源和減輕服務(wù)器壓力。對于當前頁面內(nèi)容很多的可以采用這種加載策略。而這種加載策略的設(shè)計，能夠讓用戶更快看到當前屏幕內(nèi)的內(nèi)容，減少等待時間。

比如蘋果官網(wǎng)的加載策略就采取了這樣的一種方式。我們可以看到右側(cè)的資源只有在我們向下滾動出現(xiàn)在屏幕中時才會進行對應(yīng)的加載，這樣能夠保證用戶在進入網(wǎng)頁第一時間看到首屏內(nèi)容，并且用戶幾乎感知不到這種加載延遲。

7.2.2預(yù)加載

預(yù)加載是在頁面空閑的時候就把用戶即將用到的資源加載完存到緩存中，等用戶需要使用時，通過緩存直接調(diào)用呈現(xiàn)。比如用戶在看A頁面的時候，就可以通過預(yù)加載來準備用戶需要的B頁面資源。當用戶需要B頁面的時候，立刻就可以呈現(xiàn)。

比如某些頁面在實際中加載比較慢，這個時候就可以考慮是否用預(yù)加載的策略來提升網(wǎng)頁整體加載速度。比如知乎的視頻和文字在都進行了對應(yīng)的預(yù)加載。即使當你處于斷網(wǎng)狀態(tài)（圖中我將頁面網(wǎng)絡(luò)切換為斷開狀態(tài)），可以看到依舊可以點擊全文進行查看和視頻的部分預(yù)覽。

7.2.3分步加載

當頁面中有文字和圖片時，優(yōu)先加載占用網(wǎng)絡(luò)資源小的，比如文字資源，然后再進行占用資源較大的加載，比如圖片資源。通過分步加載也能有效減少頁面等待時間。比如大眾點評等圖片很多的網(wǎng)站往往會采用這種加載策略。

7.2.4分頁加載

分頁加載是我們目前很常見的方式，比如我們常用的百度和谷歌等搜索引擎都是使用的分頁加載，分頁適用于數(shù)據(jù)量比較大的內(nèi)容，比如表格數(shù)據(jù)或者大數(shù)據(jù)搜索場景可以使用。

分頁加載可以理解為當前獲取到100條數(shù)據(jù)，但是將100條數(shù)據(jù)分別拆成5頁每頁20條數(shù)據(jù)提供給用戶，這樣也可以讓用戶減少等待時間：

在目前還有一種滾動分頁的加載，就是不提供視覺上的分頁，而是當用戶進行滾動時，自動加載一定數(shù)量的內(nèi)容，這樣從用戶的視角看就是一個連續(xù)不間斷的數(shù)據(jù)展示。比如一些資訊類的網(wǎng)站就是采用的這種加載策略，有的也把這種滾動分頁的方式稱為自動加載。

7.2.5延遲加載

這里講的延遲加載更多的是一種防護加載機制，一般延遲設(shè)置的時間為300ms。這里的延遲加載有2種使用，第一種多用于搜索，通過延遲加載能夠讓用戶更好進行連續(xù)輸入，避免搜索結(jié)果被高頻率刷新，同時緩解服務(wù)器壓力。如下圖，可以看到我在輸入1后會有個延遲才出現(xiàn)加載列表，并且我在連續(xù)輸入12306的過程中是沒有對結(jié)果進行更新的，當我輸入完后才更新。

第二種則是通過延遲加載可以更好防止反復(fù)操作。當用戶在同一組件上面進行切換時，如果該操作小于300ms,則只記錄最后的點擊操作。這種情況可以用在我們的表格翻頁和開關(guān)等狀態(tài)上，防止用戶瘋狂點擊導(dǎo)致數(shù)據(jù)反復(fù)請求和屏幕閃爍的情況。我們可以通過下面這個組件演示例子來進行對應(yīng)的感知：

延遲加載更多用于上述2種場景，對于其他情況的加載，直接加上就可以了，并不需要刻意設(shè)置延遲。

7.2.6后臺加載

這里想要表達的含義是當用戶在操作后，客戶端立即反饋操作成功，然后把請求放到后臺與服務(wù)器交互，這一過程用戶不需要了解，不需要等待。無論在什么網(wǎng)絡(luò)環(huán)境下你基本上都能操作成功。比如微信的朋友圈發(fā)布就是這樣的操作，即使你在斷網(wǎng)的情況下都能夠立刻發(fā)布，但實際上這個時候并沒有發(fā)送成功，還需要上傳到服務(wù)器后才你的朋友們才能看見。

這樣的好處是用戶使用起來非常流暢，但是壞處就是，當操作不成功時，用戶并不能及時進行感知，仍然以為操作已經(jīng)成功了。所以這種場景我們也需要根據(jù)場景進行對應(yīng)的判斷和選擇。對于復(fù)雜的B端場景個人建議慎用或者不用這種操作，畢竟很多發(fā)布的功能會同時影響很多業(yè)務(wù)線。

這里就拿微信的朋友圈發(fā)布來進行舉例，下方手機狀態(tài)都為斷網(wǎng)狀態(tài)，可以看到微信立即發(fā)布，而貼吧在這種狀態(tài)下提示網(wǎng)絡(luò)錯誤。

通過這些加載策略的選擇性使用，能夠在特定環(huán)境下提升我們系統(tǒng)的整體使用體驗。因此我們需要對這些加載策略有一個比較全面的認識，這樣我們不僅知道加載慢的原因，還可以利用加載策略去提升頁面性能。

在整體的加載過程中，別忘了考慮加載異常的情況。在通常情況下我們會我們會遇到網(wǎng)絡(luò)速度過慢或者突然斷網(wǎng)這兩種狀況讓頁面一直加載不出來，這時我們需要考慮對長時間的加載過程進行處理。

通常做法是我們要對加載狀態(tài)有一個最長時間的限制，一般為加載不超過10s，超過最長時間后就進行異常狀態(tài)顯示（提示語+刷新按鈕）。這樣用戶可以選擇重新加載或者離開此頁面，而不是一直等待。

在這里還想到一點，就是對于編輯頁面，我們應(yīng)當加入網(wǎng)絡(luò)連接是否異常的判斷，比如當進入到編輯頁面后，如果遇到網(wǎng)絡(luò)斷開，需要在頁面的頂部加上常駐提示條【當前網(wǎng)絡(luò)連接斷開】，這樣用戶能夠及時進行察覺并修復(fù)。避免在無網(wǎng)環(huán)境下繼續(xù)輸入。這對于某些需要輸入很多內(nèi)容且并不提供本地保存的頁面來講是非常有必要的。

加載在設(shè)計中是非常容易被忽略的模塊，因為在大部分情況下網(wǎng)絡(luò)速度都較快，人們很難深刻地感受到加載過程。但加載卻在產(chǎn)品運行中起著不可或缺的作用。通過這篇文章想要告訴大家的有幾個點：

1.我們需要明白加載為什么會出現(xiàn)，這個過程是怎么樣的；

2.加載的通用處理手段是怎么樣的，非通用處理方式有哪些；

3.通過緩存和對應(yīng)加載策略能夠讓頁面加載速度有本質(zhì)上的提升。

這樣當我們在頁面上遇到加載速度慢的問題時，在為其加上動畫承載過渡的同時，還應(yīng)該思考其加載緩慢背后的原因，是因為數(shù)據(jù)量太大還是加載策略的相關(guān)問題，是否可以將其進行懶加載或者分步加載，這時我應(yīng)該去找前端或者后端如何溝通。從源頭上解決加載時間長的問題，才是后續(xù)產(chǎn)品設(shè)計過程中的長久思路。

作者：蒙東東來源：站酷

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

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

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

評論(0) 瀏覽(827)

232022-9

B端產(chǎn)品設(shè)計思路&高頻設(shè)計要點筆記

純純

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

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

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

當你有了目標以后你的設(shè)計就可以圍繞這個目標展開：

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

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

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

要點1·了解項目的業(yè)務(wù)流程

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

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

要點2·用戶調(diào)研與場景化設(shè)計思維

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

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

獲取B端用戶反饋的方式

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

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

要點3·情感化設(shè)計心理

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

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

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

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

要點1·降低學習成本

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

要點2·保持高效

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

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

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

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

設(shè)計側(cè)核心要點

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

要點1·表單設(shè)計

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

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

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

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

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

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

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

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

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

減少打字需求

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

使用文本塊

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

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

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

用輸入框長度提示

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

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

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

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

單選框

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

解釋隱私消息

當前需要用戶填寫相對隱私的信息時，請給予解釋這么做的原因及目的。

收集設(shè)計反饋

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

最后在情感化設(shè)計系統(tǒng)里記得感謝用戶填寫或者反饋問題，因為用戶是花時間的。所以請表示感謝。

要點2·表格設(shè)計

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

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

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

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

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

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

（該圖片感謝好友@晴藍同學反饋的一個錯字，圖片已修正）

要點3·按鈕設(shè)計

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

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

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

除了完全獨立設(shè)計開發(fā)的項目以外，還有大量的 B 端項目是采用第三方框架開發(fā)而成的，如 Ant、Element 等等。這是因為這些第三方程序可以幫助團隊節(jié)省大量的開發(fā)時間和精力。

作者：Cesare_玄漓來源：站酷

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

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

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

評論(0) 瀏覽(989)

222022-9

設(shè)計規(guī)范和適配

seo達人

一開篇：為什么需要建立設(shè)計規(guī)范？

1、保證設(shè)計的一致性。

對內(nèi)部：多個設(shè)計師合作，依然能保證設(shè)計風格的統(tǒng)一。

對用戶：提高用戶體驗，提高操作效率，加深對產(chǎn)品的記憶。

2、提高開發(fā)效率

與前端有效溝通的工具，提高設(shè)計還原度，降低對接成本。

開發(fā)可以建立公共組件庫，極大的提高了開發(fā)效率。

3、方便產(chǎn)品迭代

隨著產(chǎn)品的業(yè)務(wù)變化，發(fā)現(xiàn)一些問題或者需要優(yōu)化用戶體驗的時候，針對單個控件進行調(diào)整，就可以影響全局，十分便捷。

二移動端設(shè)計規(guī)范之平臺設(shè)計語言

優(yōu)秀設(shè)計來自世界互聯(lián)網(wǎng)公司，前沿的設(shè)計理念和完善的設(shè)計語言是我們設(shè)計師的學習目標。了解和學習后，更好的進行產(chǎn)品設(shè)計。

前沿平臺

1、谷歌設(shè)計語言 Google Design

http://design.google

谷歌設(shè)計中心，展示了谷歌的設(shè)計工作和概念，包括了 Material Design 在內(nèi)的所有關(guān)于產(chǎn)品、體驗、設(shè)計、品牌等互聯(lián)網(wǎng)領(lǐng)域的設(shè)計思考。

2 、蘋果 IOS 設(shè)計規(guī)范

蘋方人機界面設(shè)計指南，含有IOS設(shè)計規(guī)范，指導(dǎo)界面設(shè)計。蘋果人機界面設(shè)計指南，詳細介紹了蘋果公司最新的移動設(shè)備和系統(tǒng)，設(shè)計屏幕分辨率、圖標設(shè)計規(guī)范、色彩搭配、文字等設(shè)計語言，同時還提供了 UI 設(shè)計資源可供大家使用。

3、Ant Design

螞蟻金服設(shè)計平臺是國內(nèi)互聯(lián)網(wǎng)公司之一，基于螞蟻金服生態(tài)系統(tǒng)的跨設(shè)計與開發(fā)的體驗設(shè)計方案，包含了網(wǎng)頁端的顏色、字體、圖標、組件等頁面設(shè)計布局等設(shè)計指導(dǎo)網(wǎng)站。

螞蟻集團的企業(yè)級產(chǎn)品是一個龐大且復(fù)雜的系統(tǒng)，數(shù)量多且功能復(fù)雜，而且變動和并發(fā)頻繁，常常需要設(shè)計者與開發(fā)者能快速做出響應(yīng)。同時這類產(chǎn)品中有存在很多類似的頁面以及組件，可以通過抽象得到一些穩(wěn)定且高復(fù)用性的內(nèi)容。

隨著商業(yè)化的趨勢，越來越多的企業(yè)級產(chǎn)品對更好的用戶體驗有了進一步的要求。帶著這樣的一個終極目標，我們（螞蟻集團體驗技術(shù)部）經(jīng)過大量項目實踐和總結(jié)，逐步打磨出一個服務(wù)于企業(yè)級產(chǎn)品的設(shè)計體系 —— Ant Design。基于「自然」、「確定性」、「意義感」、「生長性」四大設(shè)計價值觀，通過模塊化解決方案，降低冗余的生產(chǎn)成本，讓設(shè)計者專注于更好的用戶體驗。

4、Fluent Design System

微軟基于Windows 10 的設(shè)計指南，它可以幫助開發(fā)者設(shè)計和構(gòu)建流暢、精美的應(yīng)用程序，包括人機界面布局、樣式、控件和設(shè)計工具包下載。

微軟將這套全新的設(shè)計語言名為 Fluent Design System（流暢設(shè)計體系），該體系共有五大核心元素，包括Light（光感）、Depth（深度）、Motion（動畫）、Material（材質(zhì)）和 Scale（縮放）。

5、WeUI

WeUI 是一套同微信原生視覺體驗一致的基礎(chǔ)樣式庫，包含表單、基礎(chǔ)組件、操作反饋、導(dǎo)航等各種各樣的設(shè)計元素。它由微信官方設(shè)計團隊為微信內(nèi)網(wǎng)頁和微信小程序量身設(shè)計，使得用戶的使用感知更加統(tǒng)一。

具體看下面的內(nèi)容，有詳細介紹。

6、Airbnb Design

Airbnb 是一家享譽全球的民宿服務(wù)公司。同時，這背后有一個他們自己強大的設(shè)計團隊，為Airbnb提供著設(shè)計方面工作。我日常工作使用到的（動效方面）Lottie 也是他們設(shè)計開發(fā)的產(chǎn)物（感謝）。他們擁有自己的設(shè)計網(wǎng)站Airbnb Design。其中一些文章介紹 DSL，正如在《設(shè)計體系》一書介紹，他們嚴格遵守著自己的設(shè)計規(guī)范和原則。保證著Airbnb的產(chǎn)品在設(shè)計上的一致性，可用性等，目的是為不同國家的用戶提供好的用戶體驗。

界面設(shè)計中的字體思考

文字是 App 中最核心的元素之一，產(chǎn)品傳達給用戶的內(nèi)容。字體有無襯線字體和襯線字體。無論iOS 還是 Android 系統(tǒng)，它們都有內(nèi)置的默認字體可供設(shè)計師使用。用心處理好字號大小、字體顏色與字體間距的處理上。

用戶界面設(shè)計中，字體是界面設(shè)計中的基本元素。設(shè)計師要設(shè)計好界面中的字體顏色、字體間距、字號的大小、

字重等思考。

蘋果系統(tǒng)中默認的字體是：蘋方字體。英文字體和數(shù)字字體是：舊金山字體，San Francisco 字體。

其中數(shù)字字體比較好的字體可以用：Dinner 字體。

安卓系統(tǒng)默認的中文字體是：思源黑體。英文字體是：Roboto 字體。

界面設(shè)計中的字體設(shè)計規(guī)范，如下圖所示。

介紹幾款西文字體：

無襯線字體，在字的筆畫開始和結(jié)束的地方，沒有額外裝飾，筆畫粗細均勻，適合于主題設(shè)計的屏幕展示，給人一種自然舒適感。例如：無裝飾性的易識別的代表字體：Helvetica 英文字體、San Francisco 英文字體、

Roboto 英文字體、Arial 英文字體。

襯線字體是字的筆畫開始和結(jié)尾處的位置有額外裝飾，同時筆畫的粗細有所不同，一般適用于印刷排版，具有較高的可讀性。例如：具有裝飾性的代表字體：Times New Roman。

DIN 字體

DIN 字體是效力于德國交通標識和公共空間的經(jīng)典字體，是一種很好的數(shù)字字體。

Futura 字體

Futura 字體 ，這個字體現(xiàn)代、時尚具有幾何特征，是很多雜志和時尚品牌的常用字體，例如：時尚氣質(zhì)的品牌 LV 的商標字體就是這種英文字體。

Roboto 字體

Roboto 字體，是谷歌公司為 Android 操作系統(tǒng)開發(fā)的默認英文字體，具有“現(xiàn)代感”、“親和力” 的設(shè)計感。

San Francisco 字體

San Francisco 字體 ，蘋果公司設(shè)計的，蘋果公司推出的 Apple Watch 和 iOS 移動端等系統(tǒng)的英文字體。

Didot 字體

Didot 字體，是世界上最著名的英文字體之一，美感，可以用在英文標題、產(chǎn)品設(shè)計、廣告使用的一款字體。

例如：時尚雜志 VOGUE 標題字就是運用了這個字體。

三移動端設(shè)計規(guī)范之設(shè)計主題、設(shè)計原則、屏幕的設(shè)計尺寸：

iOS 設(shè)計主題

iOS的三個主要主題將其與其他平臺區(qū)分開來：

明晰。在整個系統(tǒng)中，各種大小的文字都清晰易讀，圖標精確而清晰，裝飾物微妙而恰當，對功能的高度關(guān)注激發(fā)了設(shè)計的靈感。負空間，顏色，字體，圖形和界面元素巧妙地突出了重要內(nèi)容并傳達了交互性。
尊敬流暢的動作和清晰美觀的界面可幫助人們理解內(nèi)容并與之互動，而從未與之競爭。內(nèi)容通常會填滿整個屏幕，而半透明和模糊通常會暗示更多內(nèi)容。最少使用邊框，漸變色和陰影可以保持界面明亮通風，同時確保內(nèi)容至關(guān)重要。
深度。獨特的視覺層和逼真的動作傳達層次感，賦予生命力并促進理解。觸摸和可發(fā)現(xiàn)性提高了人們的愉悅感，使他們能夠訪問功能和其他內(nèi)容而不會丟失上下文。當您瀏覽內(nèi)容時，過渡會提供一種深度感。

設(shè)計原則

為了最大限度地提高影響力和影響范圍，請在想象應(yīng)用程序的身份時牢記以下原則。

審美完整性

審美完整性表示應(yīng)用程序的外觀和行為與其功能的集成程度。例如，一個可以幫助人們執(zhí)行重要任務(wù)的應(yīng)用程序可以通過使用微妙，醒目的圖形，標準控件和可預(yù)測的行為來使他們專注。另一方面，沉浸式應(yīng)用程序（例如游戲）可以提供引人入勝的外觀，帶來樂趣和刺激，同時鼓勵發(fā)現(xiàn)。

一致性

一致的應(yīng)用程序通過使用系統(tǒng)提供的界面元素，知名的圖標，標準的文本樣式和統(tǒng)一的術(shù)語來實現(xiàn)熟悉的標準和范例。該應(yīng)用程序以人們期望的方式結(jié)合了功能和行為。

直接操縱

屏幕內(nèi)容的直接操作可以吸引人們并促進理解。用戶在旋轉(zhuǎn)設(shè)備或使用手勢來影響屏幕內(nèi)容時會經(jīng)歷直接的操縱。通過直接操作，他們可以看到其操作的直接可見結(jié)果。

反饋

反饋確認行動并顯示結(jié)果，以使人們了解情況。內(nèi)置的iOS應(yīng)用程序可響應(yīng)每個用戶操作提供可感知的反饋。輕觸時，交互元素將突出顯示，進度指示器傳達長時間運行的操作的狀態(tài)，動畫和聲音有助于闡明操作的結(jié)果。

隱喻

當應(yīng)用程序的虛擬對象和動作是扎根于現(xiàn)實世界或數(shù)字世界的隱喻時，人們會更快地學習。隱喻在iOS中可以很好地工作，因為人們可以與屏幕進行物理交互。他們將視圖移開以隱藏下面的內(nèi)容。他們拖動和滑動內(nèi)容。他們切換開關(guān)，移動滑塊并滾動選擇器值。他們甚至瀏覽書籍和雜志的頁面。

互聯(lián)網(wǎng)產(chǎn)品設(shè)計的尺寸規(guī)范和分辨率的認識，是進行線上界面設(shè)計的第一步。然而，市面上的型號有很多，咋辦？

作為設(shè)計師，要掌握常見的尺寸和距離，理解并做好設(shè)計的適配，才能解決不同手機屏幕之間的布局規(guī)范和換算關(guān)系。

常見的移動端手機屏幕的設(shè)計尺寸如下：

DPI和PPI的定義（來自百度百科）

DPI原來是印刷上的記量單位，意思是每英寸上，所能印刷的網(wǎng)點數(shù)（Dot Per Inch）。但隨著數(shù)字輸入，輸出設(shè)備快速發(fā)展，大多數(shù)的人也將數(shù)字影像的解析度用DPI表示，但較為嚴謹?shù)娜丝赡茏⒁獾?，印刷時計算的網(wǎng)點（Dot）和電腦顯示器的顯示像素（Pixel）并非相同，所以較專業(yè)的人士，會用PPI(Pixel Per Inch)表示數(shù)字影像的解析度，以區(qū)分二者。

我們通常講的打印機分辨率是多少DPI，指的是”在該打印機最高分辨率模式下,每英寸所能打印的最多”理論”墨點數(shù)”。

Pixels Per Inch也叫像素密度，所表示的是每英寸所擁有的像素數(shù)量。因此PPI數(shù)值越高，即代表顯示屏能夠以越高的密度顯示圖像。當然，顯示的密度越高，擬真度就越高。

Pixels Per Inch是像素的密度單位，就像PPI值越高，畫面的細節(jié)就會越豐富，所以數(shù)碼相機拍出來的圖片因品牌或生產(chǎn)時間不同可能有所不同，常見的有72PPI，180PPI和300PPI,默認出來就是這么多(A710拍出的是180PPI)。

DPI(Dots Per Inch)是指輸出分辨，針對于輸出設(shè)備而言的，一般的激光打印機的輸出分辨率是300PPI-600PPI，印刷的照排機達到1200PPI-2400PPI，常見的沖印一般在150PPI到300PPI之間。

例如，iPhone 6、7、8 的屏幕物理尺寸是4.7 英寸。RetinaHD高清顯示屏，移動端屏幕尺寸是：750px 乘 1334px ,326ppi，全sRGB標準。

iPhone 6 Plus,5.5英寸(對角線)LED背光寬Multi?Touch顯示屏，具有IPS技術(shù),1920×1080像素分辨率，401ppi.全sRGB標準,如下圖所示。

分辨率、像素和屏幕物理尺寸

iPhone X 尺寸是 5.8英寸，手機主屏幕分辨率是750乘1624 PX，整個屏幕的像素尺寸,一倍圖：375 乘 812 。

關(guān)于 iPhone 6，一倍圖下：375 乘 667 。

pc端網(wǎng)頁設(shè)計的尺寸是：1920乘1080px。

像素密度，即每英寸屏幕所擁有的像素數(shù)，像素密度越大，顯示畫面細節(jié)就越豐富。

像素密度=√{（長度像素數(shù)^2+寬度像素數(shù)^2）}/ 屏幕尺寸。

屏幕分辨率是指縱橫向上的像素點數(shù)，單位是px。屏幕分辨率確定計算機屏幕上顯示多少信息的設(shè)置，以水平和垂直像素來衡量。就相同大小的屏幕而言，當屏幕分辨率低時（例如 640 x 480），在屏幕上顯示的像素少，單個像素尺寸比較大。屏幕分辨率高時（例如 1600 x 1200），在屏幕上顯示的像素多，單個像素尺寸比較小。

顯示分辨率就是屏幕上顯示的像素個數(shù)，分辨率160×128的意思是水平方向含有像素數(shù)為160個，垂直方向像素數(shù)128個。屏幕尺寸一樣的情況下，分辨率越高，顯示效果就越精細和細膩。

比例：4：3、5：4、16:10、16:9、21:9

4:3 是最常見屏幕比例。16:10 就是常見的「寬屏幕」比例。16:9 主要是HD電視在用的比例。

常聽到的720p、1080p 都是這個比例。

邏輯大小和像素大小

對于人類的視覺對于對象尺寸的判斷是由邏輯大小來決定的。以一個圖形為例，無論這個圖形距離我們多遠，用戶的認知中，大小是直徑為25mm 。也就是說，這是它的真實的大小，所以我們把人對于物體真實尺寸的認知成為邏輯大小。

屏幕像素數(shù)量不同，在相同像素大小的情況下，圖形顯示的大小，就會不一樣。

IPONE 8 plus 屏幕上的元素尺寸需要在IPONE 8 的基礎(chǔ)上乘以 1.5 ，才能以平常的物理尺寸顯示元素的大小。

邏輯像素與實際像素

Ipone 手機屏幕常見的分辨率有 640px乘1136px、750px乘1334px、1242px乘2208px及1125px乘2436px 等。

同樣一個圓，高分辨率的屏幕顯示更清晰，視覺體驗會更好。

設(shè)計時，優(yōu)先保證高分辨率的屏幕效果。

一倍圖字樣的切圖則應(yīng)用在普通屏幕上，帶 @2x字樣的切圖通常用于 Retina 屏幕上，帶@3x 字樣的切圖則應(yīng)用在 IPONE Plus 系列手機的屏幕上。設(shè)計者只需把這 3 個尺寸的切圖給技術(shù)人員，技術(shù)人員可以將合適的尺寸的圖片適配到各個機型了。實際像素除以倍率，就得到邏輯像素尺寸。

所謂“Retina”是一種顯示標準，是把更多的像素點壓縮至一塊屏幕里，從而達到更高的分辨率并提高屏幕顯示的細膩程度。由摩托羅拉公司研發(fā)。最初該技術(shù)是用于Moto Aura上。這種分辨率在正常觀看距離下足以使人肉眼無法分辨其中的單獨像素。也被稱為視網(wǎng)膜顯示屏。

為了適配，是為了實現(xiàn)視覺的統(tǒng)一感，讓相同大小的物體在不同像素密度的屏幕上看起來大小是相同的感覺。邏輯像素是pt，普通像素是px。 1 pt 在ipone 6、ipone 7、ipone 8等于 2px ，在 iPhone 6 plus、iPhone 7 plus、iPhone 8 plus中等于3px。開發(fā)項目中，一倍圖機型上是100px乘100px,在iPhone 6s 中顯示出來的是200px乘200px，在 iPhone 8 plus 中顯示出來的是 300px乘300px 。在視覺上，這三個尺寸看起來是一樣的。下圖是 ipone 手機界面詳細的適配尺寸規(guī)范。

針對以上規(guī)范，設(shè)計師的尺寸為 375乘667 pt、導(dǎo)出格式為 @2x 的設(shè)計稿可以應(yīng)用在ipone 6、ipone 7、ipone 8 手機中。

安卓系統(tǒng)把各種設(shè)備的像素密度劃分成幾個范圍區(qū)間，并且給不同范圍的設(shè)備定義了不同的倍率，保證顯示效果的相近。安卓系統(tǒng)的邏輯像素單位是 dp 。

安卓系統(tǒng)的手機屏幕都可以找到自己密度值、代表分辨率、倍率、邏輯分辨率等。

密度為xxxhdpi(1080px乘1920px) 的手機目前市場份額占比較大；目前密度為 xhdpi、xxdpi 和 xxxdpi 的手機產(chǎn)品占絕大多數(shù)的市場份額，而正好他們的邏輯像素是 360dp 乘 640dp, 根據(jù)這樣的分辨率標準導(dǎo)出 @2x、@3x、@4x 這三種格式的切圖，基本就可以適配市面上絕大部分的Andriod 系統(tǒng)的機型了。

全局邊距

在UI界面設(shè)計中，以(750px乘1334px)全局邊距一般是30PX，整個產(chǎn)品設(shè)計的邊距都是30px，保持一致性。

或者 32px 的全局邊距也是不錯的選擇，比如：Booking 就用了這個尺寸。

24px 全局邊距

Facebook ，它們不但距離屏幕邊緣距離一致，就連邊緣距離一致，就連頭像與文字的距離也相同，都是 16px。

40px 全局邊距

40px 屬于較大的大邊距，留白開始變多，界面呼吸感好，閱讀體驗好。例如：36kr。大邊距適合單一的應(yīng)用，不需要復(fù)雜信息和交互層級。

50px 全局邊距

50px 可以算最大邊距，它讓界面變得干凈整潔，用戶在瀏覽時極為輕松。

豎向間距

定義卡片和卡片間的間距一般是：20px、24px、30px，最大間距不超過40px。間距的背景色可以與你分割線一致，也可以淺一些，界面柔和一點。

88px

ios 中最小點擊區(qū)域是 88px，因為蘋果在縱向尺寸上把 22px 作為一個基礎(chǔ)單元，物理尺寸最小空間的高度為 22乘4等于88px，為手指觸摸最小的高度。因此導(dǎo)航欄、標簽欄、列表、搜索欄和按鈕的高度都是 88px，導(dǎo)航欄和標簽欄圖標為 44px，元素與元素之間的最小間距是 22px。

四 iPhone X的適配方案

針對前面所講的ios 系統(tǒng)的常用機型，幾乎一種邏輯尺寸為375pt乘667pt 就可以完成設(shè)計的適配。而相對來說，ipone X 的適配處理稍微多一些細節(jié)。異形的 iPhone X 的屏幕部分的高度增加了145pt，如下圖所示。

先說一下頂部劉海區(qū)域的適配方式。如圖所示，對于常規(guī)的 iPhone 8 屏幕來說，屏幕內(nèi)基本都是安全顯示區(qū)域，安全顯示區(qū)域就是要把重要元素放在上面做好設(shè)計。iPhone X 上由于多了劉海的設(shè)計和四周的圓角設(shè)計，意味著也多了兩個不可顯示內(nèi)容的非安全區(qū)域。蘋果官方給出的非安全區(qū)域為屏幕上方 44 pt ，屏幕下方是 34 pt ，并且下方 34 pt 的非安全區(qū)域一定不可以放置可點擊的按鈕，否則會與虛擬的 Home 鍵發(fā)生交互上的沖突。

空間里利用率角度思考，與 IOS 界面的整體效果保持一致的感覺。如下圖所示，豎版和橫版。

而具體的適配方法要從這兩塊非安全區(qū)域去用心思考。由于頂部的非安全區(qū)域內(nèi)不可以出現(xiàn)狀態(tài)欄之外的內(nèi)容，因此從前的狀態(tài)條由20pt加長到44pt, 則意味著增加了 24 pt 。這時候?qū)Ш綑诘某叽绫３植蛔?，只需整體向下移動24pt 。這時候?qū)Ш綑诘某叽绫３植蛔?，只需整體向下移動 24pt 即可。同時，狀態(tài)欄背景的顏色需要與導(dǎo)航欄背景的顏色保持一致。

當界面頂部帶有圖片背景時，最簡單的處理方式將頂部圖片元素的高度增加 24pt。如果有 Banner 貫穿到頂部，一般有以下兩種處理方式。

第一種方式是為 iPhone X 單獨做一套 Banner 尺寸，拉長 24pt，并且頂部 24pt 不可放置有效的閱讀消息，設(shè)計兩套圖，一種是正常的 IPONE 6、7、8 等尺寸，一種是 ipone X 的尺寸下需要的設(shè)計廣告圖。如下圖所示。

第二種方式是顯示導(dǎo)航欄，并且 Banner 不再貫穿到頂部顯示，而是移動到導(dǎo)航欄下方。

顯示效果缺少沉浸式的設(shè)計體驗感。

說完劉海區(qū)域的適配方式之后，再來說一下底部非安全區(qū)域的適配方式。置于屏幕底部的 Home Indicator 集成了原有實體 Home 鍵退出與切換系統(tǒng)應(yīng)用的功能。在適配過程中，可以更換此區(qū)域內(nèi)背景的顏色、透明度與高度。底部的33pt 的非安全區(qū)域內(nèi)禁止出現(xiàn)可操作按鈕。

第1種情況，當界面底部有按鈕，按鈕依附在底部 34pt 的非安全區(qū)域的上方即可，非安全區(qū)域的背景色一般與操作按鈕的背景色保持一致。如下圖所示。

第2種情況，當界面底部沒有按鈕，只需讓列表正常顯示就可以了，無須遮擋，如下圖所示。

第3種情況：在廣告引導(dǎo)頁等呈現(xiàn)全屏樣式時，需要做兩套設(shè)計稿的間距和大小的設(shè)計適配，保證好的視覺內(nèi)容的展示，背景色延伸的方法就好。

界面設(shè)計中的間距思考

界面所留出的固定邊距是最基礎(chǔ)的柵格系統(tǒng)。如下圖所示。

界面的分割規(guī)范應(yīng)用在品類區(qū)的功能圖標，四等分的設(shè)計，符合柵格系統(tǒng)的設(shè)計。規(guī)范的設(shè)計，有利于開發(fā)對設(shè)計稿的還原設(shè)計。

柵格系統(tǒng)中的8px 的原則

8px 原則，就是界面設(shè)計中所有元素的長度除以寬度和間距都可以被 8 整除。這里的 8px 是基于@2x 倍圖格式下的切圖使用的。以320dp乘480dp為@1x 邏輯尺寸，安卓系統(tǒng)屏幕下的部分適配尺寸。

五常見的移動端設(shè)計布局和適用場景

信息的設(shè)計優(yōu)先級，布局合理性，提升信息的傳達效率。

核心功能的布局

核心功能的各模塊的布局之間保持相對獨立，標簽橫向數(shù)量盡量不要超過5個，超過5個可以采用左右滑的交互方式來實現(xiàn)，來自于設(shè)計心理學。

標簽樣式的布局優(yōu)點是各入口清晰呈現(xiàn)，方便用戶快速查找信息；標題一定要精簡。對于要突出的核心功能，可以做信息層級的大小、是否有設(shè)計背板的處理，主次關(guān)系分明。

列表式布局

列表式布局適用于信息類的產(chǎn)品。

列表式布局優(yōu)點信息展示較直觀，節(jié)省界面空間，瀏覽效率高，字段長度不受限制，并且可以錯行展示。單純看文字會視覺疲勞，所以圖文混排，富有變化。突出主題，優(yōu)質(zhì)配圖，有利于用戶更好的閱讀信息。

卡片式布局

卡片式布局就是把不同大小、不同形式的內(nèi)容放在一個容器里進行組合展示。較常見的是圖文混排，既要做到視覺上的一致性感覺，又要平衡圖片和主題內(nèi)容的關(guān)系。分組展示，讓用戶更好的理解各模塊的內(nèi)容。

瀑布流布局

瀑布流布局適用于圖片、視頻等更好的沉浸式的瀏覽內(nèi)容。移動端的瀑布流布局一般是兩列信息并行，錯位展示，可以極大的提升交互效率，可以制造豐富的視覺體驗，適用于花瓣等圖片類的界面布局設(shè)計。

六 APP組建化設(shè)計規(guī)范

（具體看我站酷前面寫的組件化思維的文章）

Ios系統(tǒng)和安卓系統(tǒng)都提供了一些固定的官方組件規(guī)范。遵循其官方組件規(guī)范，可以極大提高設(shè)計和開發(fā)效率，同時降低用戶的學習成本。其中最常見的規(guī)范化組件包括頂部的狀態(tài)欄、導(dǎo)航欄、底部標簽欄和工具欄。

狀態(tài)欄

ios 是 20pt, 安卓是24dp.

導(dǎo)航欄

ios 是 44pt, 安卓是56dp.

標簽欄

ios 的高度是 49pt, 安卓標簽欄的高度是48dp.

工具欄

工具欄的高度是 44pt,安卓是 48dp .

字體是蘋方字體；英文是SF英文字體。思源黑體，roboto 英文字體。

IOS設(shè)計是 11pt到29pt 左右，一級主題是24pt 以上,二級標題是20pt左右。

內(nèi)容，導(dǎo)航欄標題是 18pt。三級標題是16pt。文字內(nèi)容一般是 14pt

品類區(qū)圖標內(nèi)容：12pt 。底部TAB 圖標文字：10pt到11pt

七微信小程序設(shè)計

基于微信小程序輕快的特點，我們擬定了小程序界面設(shè)計指南和建議。設(shè)計指南建立在充分尊重用戶知情權(quán)與操作權(quán)的基礎(chǔ)之上。旨在微信生態(tài)體系內(nèi)，建立友好、高效、一致的用戶體驗，同時最大程度適應(yīng)和支持不同需求，實現(xiàn)用戶與小程序服務(wù)方的共贏。

友好禮貌

為了避免用戶在微信中使用小程序服務(wù)時，注意力被周圍復(fù)雜環(huán)境干擾，小程序在設(shè)計時應(yīng)該注意減少無關(guān)的設(shè)計元素對用戶目標的干擾，禮貌地向用戶展示程序提供的服務(wù)，友好地引導(dǎo)用戶進行操作。

重點突出

每個頁面都應(yīng)有明確的重點，以便于用戶每進入一個新頁面的時候都能快速地理解頁面內(nèi)容。在確定了重點的前提下，應(yīng)盡量避免頁面上出現(xiàn)其它與用戶的決策和操作無關(guān)的干擾因素。

避免誤操作

換算成物理尺寸后大致是在7mm-9mm之間。在微信提供的標準組件庫中，各種控件元素均已考慮到了頁面點擊效果以及不同屏幕的適配，因此再次推薦使用或模仿標準控件尺寸進行設(shè)計。

小程序是在微信開放平臺上運行的一種不需要下載安裝即可使用的應(yīng)用，它提供了一種快速體驗的方式，用戶通過掃一掃或搜一搜即可打開應(yīng)用，實現(xiàn)了“觸手可及”、“用完即走”的高效操作。對于開發(fā)者而言，小程序開發(fā)門檻相對較低，能滿足簡單的基礎(chǔ)應(yīng)用?；谛〕绦蜉p快的特點，我們在進行小程序界面設(shè)計時，友好、高效、一致的用戶體驗，友好的引導(dǎo)用戶操作。

小程序菜單

小程序的界面，包括小程序內(nèi)嵌網(wǎng)頁和插件，微信都會在其右上角放置菜單。菜單包括兩個圖標，左邊是更多，點開分別是轉(zhuǎn)發(fā)、關(guān)于和取消；右邊是主頁，點擊后回到小程序列表。小程序菜單和狀態(tài)欄之外的區(qū)域是開發(fā)者控制區(qū)域，可設(shè)計。

微信提供深淺兩種配色，適配不同風格，元素設(shè)計的辨識度。小程序在IOS和Android 的標注尺寸，如下圖所示。

開發(fā)者不可對小程序菜單自定義，但可選擇深淺兩種基本配色以適應(yīng)頁面設(shè)計風格。為了讓小程序菜單清晰可見，在深色背景上使用淺色菜單，在淺色背景上使用深色菜單。

減少輸入

由于手機鍵盤區(qū)域小且密集，輸入困難的同時還易引起輸入錯誤，因此在設(shè)計小程序頁面時因盡量減少用戶輸入，利用現(xiàn)有接口或其他一些易于操作的選擇控件來改善用戶輸入的體驗。

例如下圖中，在添加銀行卡時，采用攝像頭識別接口來幫助用戶輸入。除此之外微信團隊還對外開放例如地理位置接口等多種微信小程序接口，充分利用這些接口將大大提高用戶輸入的效率和準確性，進而優(yōu)化體驗。

在用戶搜索時提供搜索歷史快捷選項將幫助用戶快速進行搜索，而減少或避免不必要的鍵盤輸入。

上面部分用圖，來自微信小程序設(shè)計指南，具體細節(jié)設(shè)計規(guī)范可以看-微信小程序設(shè)計指南。

頁面導(dǎo)航

頂部標簽分頁欄，顏色和樣式都可以自定義。

最常見的設(shè)計方式是將選中態(tài)填充品牌主色，未選態(tài)有清晰的對比和可操作性。最常見的設(shè)計方式是將選中態(tài)填充品牌主色，未選態(tài)填充灰色，標簽之間保持足夠的空間，避免引起誤操作。

標簽分頁分頁欄的樣式可根據(jù)App的視覺風格進行設(shè)計，以保證兩個平臺擁有一致的視覺體驗。例如騰訊視頻，在App中，它的標簽欄分頁欄是無框式設(shè)計風格，選中態(tài)和未選態(tài)以文字大小和色彩的對比進行區(qū)分；在小程序中，同樣使用無框式設(shè)計風格，色彩不變，樣式上字號大小，精致的線條輔助展示當前狀態(tài)的設(shè)計。

開發(fā)者可為小程序頁面添加標簽分頁導(dǎo)航，標簽分頁欄可固定在頁面頂部或底部，便于用戶在不同在不同的分頁間做切換。標簽數(shù)量不得少于2個，最多不超過 5個，為確保足夠的點擊區(qū)域，建議標簽數(shù)量不超過4個。

小程序首頁可選擇微信提供的原生底部標簽分頁樣式，該樣式僅供小程序首頁使用。設(shè)計時可自定義圖標樣式、標簽文案及顏色等，以750乘1334px 的分辨率，標簽文案字號是 20px，圖標尺寸為 50px乘50px、標簽欄高 98px，與 ios 蘋果的設(shè)計規(guī)范保持一致性。

微信小程序的設(shè)計和開發(fā)，可根據(jù)產(chǎn)品需要選擇或不選擇底部標簽分頁欄，例如騰訊視頻小程序使用4個標簽承載功能不同的頁面內(nèi)容，為用戶提供清晰、快速的瀏覽體驗；而窮游行程助手的內(nèi)容較為單一，只需一個頁面就能清晰呈現(xiàn)所有內(nèi)容，因此不需要標簽分頁欄。如下圖所示。

啟動頁加載

在小程序列表點擊小程序后進入小程序后進入啟動頁，它是小程序在微信內(nèi)一定程度上展現(xiàn)品牌特征的頁面之一，

本頁面將突出展示小程序品牌特征和加載狀態(tài)。啟動頁除品牌Logo 展示外，頁面上的其他所有元素如，加載進度指示，均由微信統(tǒng)一提供且不能更改，無須開發(fā)者開發(fā)。品牌Logo 尺寸為 80乘80px，間距標注如下圖所示。

頁面過長時間的等待會引起用戶的負面情緒，應(yīng)盡量使用微信小程序項目提供的技術(shù)縮短等待時間。優(yōu)先顯示預(yù)設(shè)的本地數(shù)據(jù)，告知用戶正在加載頁面中。

全局加載反饋是在小程序名稱左側(cè)顯示加載狀態(tài)的圖標，提示加載小程序內(nèi)容的過程。同時，模態(tài)的加載樣式將覆蓋整個頁面，它是由加載圖標、文字提示和半透明圓角矩形組成，由于無法明確告知具體加載的位置將可能引起用戶的焦慮情緒，因此應(yīng)謹慎使用。

設(shè)計案例

小程序設(shè)計是基于微信內(nèi)部運行的應(yīng)用，因此在視覺上要輕盈、干凈、簡潔，保持扁平化設(shè)計風格；在交互上要結(jié)構(gòu)簡單、層級清晰、跳轉(zhuǎn)少，保證產(chǎn)品高效的瀏覽體驗。微信小程序，在設(shè)計時應(yīng)精簡控件和高效、實用。

旅游產(chǎn)品為例：

1、小程序頁面的右上角固定小程序菜單。

2、為確保足夠的點擊區(qū)域，小程序底部的標簽分頁欄建議最多4項。收件箱在很多 App 中不會獨立作為一個標簽，可以考慮移除；個人資料承載了許多用戶自己的重要信息，保留在標簽欄比較合適。最后確定四個底部標簽欄的功能設(shè)計-分別是：首頁，收藏，消息，我的，四個標簽。

3、開始進行設(shè)計，保持與App 同樣的白色背景，標題欄上 Airbnb 居左對齊。

4、我們必須對原來的樣式進行優(yōu)化，做減法是小程序設(shè)計的關(guān)鍵。在App中，Airbnb 的設(shè)計輕盈、干凈、簡潔，因此可以直接復(fù)用到小程序中，無須重新設(shè)計。小程序延續(xù)了輕量化陰影的視覺特征，因此優(yōu)化后的界面設(shè)計依然保持與App一致的設(shè)計風格。

八網(wǎng)頁的設(shè)計規(guī)范

1、網(wǎng)頁設(shè)計是什么？

網(wǎng)頁設(shè)計也被稱為 Web Design、網(wǎng)站設(shè)計、Website design、WUI 等。它的本質(zhì)就是網(wǎng)站的圖形界面設(shè)計。

2. 設(shè)計規(guī)范

一個產(chǎn)品的設(shè)計規(guī)范應(yīng)該有：字體規(guī)范、主體色規(guī)范、圖表規(guī)范、圖片規(guī)范等。

3、網(wǎng)站種類

網(wǎng)站的分類按對象來劃分可以分為 To C端和 To B端兩種。To C端就是面向用戶和消費者，例如、企業(yè)網(wǎng)站、產(chǎn)品網(wǎng)站、電商網(wǎng)站、移動端H5 等，均是面向用戶的產(chǎn)品。以用戶為中心考慮體驗設(shè)計。

To B端作為一個需求量很大的類別，比如電商后臺、Dashboard、企業(yè)級OA、網(wǎng)站統(tǒng)計后臺等這些面向商家和專業(yè)人士的網(wǎng)站就是 To B 類網(wǎng)站項目了。To B 類項目最重要的是效率，因為說白了我們在設(shè)計使用者工作的工具，我們在設(shè)計時必須首先要使用者可以高效工作使用。

企業(yè)網(wǎng)站

每個企業(yè)都需要有一個網(wǎng)站來對外展示自己的能力、介紹自己的產(chǎn)品等。企業(yè)網(wǎng)站設(shè)計時通常會有網(wǎng)站首頁、公司介紹、產(chǎn)品中心、公司團隊、在線商城、聯(lián)系我們等這幾個模塊，企業(yè)網(wǎng)站會展示很多諸如公司環(huán)境、團隊成員、企業(yè)文化等實際的照片，配合一些資料進行設(shè)計。企業(yè)網(wǎng)站通常也追求所謂「高端」、「大氣」、「上檔次」的風格，也就是為了達到讓消費者認同品牌這個要求。

產(chǎn)品網(wǎng)站

從蘋果公司的 iPhone 介紹頁到小米手機8的介紹頁，我們會發(fā)現(xiàn)一種新鮮的產(chǎn)品營銷模式，就是產(chǎn)品網(wǎng)站。設(shè)計這類網(wǎng)站的內(nèi)容主要是該產(chǎn)品的工藝、技術(shù)、設(shè)計、特點、構(gòu)造、使用場景等。這樣的產(chǎn)品頁希望可以讓用戶有沉浸感，所以一般來說都是使用全屏布局，產(chǎn)品設(shè)計必須精致、有品質(zhì)感。

后臺網(wǎng)站（數(shù)據(jù)可視化）

后臺網(wǎng)站 Dashborad-儀表盤。其含義就是有一大堆數(shù)據(jù)與統(tǒng)計信息。后臺網(wǎng)站是 To B 類型，那么首先的需求就是能快速地顯示給操作者他需要掌握的數(shù)據(jù)。可是數(shù)據(jù)非?？菰铮覀兛梢允褂弥T如「折線圖」、「餅狀圖」、「曲線圖」、「表格」等不同方式來展現(xiàn)這些繁瑣的數(shù)據(jù)，這種圖形表達數(shù)據(jù)的方式也叫做數(shù)據(jù)可視化。

可以參考的網(wǎng)站有：百度的 ECHARTS ，如下圖所示。

CRM系統(tǒng)（簡單拆解網(wǎng)頁B端的設(shè)計規(guī)范）

CRM 即 Customer relationship management，翻譯過來是客戶管理管理系統(tǒng)。CRM 是企業(yè)對客戶進行信息化管理的一種形式，用互聯(lián)網(wǎng)技術(shù)實現(xiàn)對客戶信息進行收集、管理、分析，對企業(yè)的銷售、服務(wù)、售后進行監(jiān)控。常見的功能有員工日程管理、訂單管理、發(fā)票管理等。

在PC端建議采用： 1440×900的設(shè)計尺寸

SaaS

如果我們服務(wù)于為企業(yè)搭建 CRM、ERP 或者 OA 等系統(tǒng)的第三方公司，那么我們可能會老聽到 SaaS 這個詞。SaaS 是(Software-as-a-Service)，即軟件就是服務(wù)。

有贊軟件即SaaS服務(wù),包括有贊微商城、有贊零售、有贊教育、有贊美業(yè)、有贊小程序。如下圖所示。

企業(yè)OA

企業(yè)OA，即(Office Automation)，也就是辦公自動化系統(tǒng)。

通過企業(yè)OA 可以完成請假、調(diào)休、離職、查詢公司規(guī)章制度、請示、匯報等工作。這樣減少了很多窗口成本和員工的時間成本，增強了公司辦事效率。

設(shè)計師在設(shè)計此類項目時同樣要以操作者的體驗和效率為重，讓操作者輕易可以找到在當前頁面中最重要的功能。

4、B端系統(tǒng)的設(shè)計原則

一致

與現(xiàn)實生活一致，用戶使用習慣

界面中一致，設(shè)計圖標、文字、元素等保持一致性。

反饋

控制反饋，清晰的知道自己的操作。

清晰認知頁面的主題和交互狀態(tài)。

效率

簡化流程。清晰明確的含義界面快速認知和理解。

結(jié)果可控

用戶可自由操作，包括撤銷、回退、終止當前操作等。

設(shè)計規(guī)范（具體可以參考 ANT DESIGN 網(wǎng)站設(shè)計規(guī)范，去制作本公司的網(wǎng)頁端的設(shè)計規(guī)范）

從原子：色彩、字體、間距、圓角、分割線。

分子：輸入框、選擇器、開關(guān)、上傳、時間日期選擇

組件：導(dǎo)航、表單、列表、數(shù)據(jù)可視化圖表、篩選

通用層面思考

色彩、文字、邊距和圓角、按鈕、間距、柵格

主色：B端建議盡量選擇冷色系避免太高亮

建議關(guān)鍵主色與白色對比度大于4.5

附：對比度檢測 https://webaim.org/resources/contrastchecker/

按鈕： 實心按鈕、空心按鈕、文字按鈕

PC端后臺：不推薦用大圓角

間距

一般選用8的倍數(shù)

8、16、24、32、40、48、56、64、72……

網(wǎng)頁柵格，一般選用24柵格布局

24欄+23水槽+2頁邊距

柵格應(yīng)用在內(nèi)容層，如下圖所示。

頂部導(dǎo)航的使用場景：

適用于一級導(dǎo)航數(shù)量較少，內(nèi)容較為簡單的系統(tǒng)

追求沉浸式閱讀的系統(tǒng)

多用于官網(wǎng)首頁

頂部導(dǎo)航的優(yōu)點：

占用屏幕空間小，為內(nèi)容區(qū)留出更多空間

對視覺的干擾小，符合從上到下的閱讀習慣

一般采用固定版心的方式，更容易適配

隨著業(yè)務(wù)的發(fā)展，拓展性變差

三三級導(dǎo)航點擊后隱藏，不利于用戶記憶和查找

側(cè)邊導(dǎo)航的優(yōu)點：

適用于更專注功能和快速操作的系統(tǒng)，有贊為例，如下圖所示。

多用于較為復(fù)雜的后臺系統(tǒng)

拓展性強，一級導(dǎo)航的數(shù)目可以展示更多

層級清晰，一二三級導(dǎo)航都可以流暢展示

操作效率高，用戶在操作和瀏覽中快速定位和切換當前位置

面包屑導(dǎo)航

使用場景：兩級及以上層級，最多不超過5級

作用：告知用戶你在哪里，且可以迅速回到上幾級導(dǎo)航

九設(shè)計師的自我修養(yǎng)

我們對設(shè)計充滿興趣和激情。

1 用心積累優(yōu)秀的設(shè)計案例。可以根據(jù)公司的行業(yè)競品，同類直接競品，跨界競品做好收集。

2 每日記錄設(shè)計靈感。比如：站酷收藏夾，按照主題收藏；花瓣靈感，分組命名。

3 執(zhí)行力強，遇到設(shè)計問題，換位思考。

4 超出預(yù)期，做好需求的設(shè)計方案，同時關(guān)注設(shè)計細節(jié)，超出需求方的預(yù)期和用戶的預(yù)期。

5 有上進心，工作做好后，做好設(shè)計的總結(jié)和作品整理，發(fā)到站酷設(shè)計平臺，與其他設(shè)計師一起交流設(shè)計。

6 眼界開闊，知識面廣：一個優(yōu)秀的設(shè)計師，不僅懂設(shè)計，還懂產(chǎn)品、運營、推廣、開發(fā)思維等方面的相關(guān)知識的學習和研究。有利于和上下游人士的溝通順暢。做到互相理解，團隊更好的完成項目的設(shè)計提案。

最后，讓自己保持著朝氣蓬勃的精神，保持著朝氣蓬勃而富有創(chuàng)造力的心態(tài)。

參考文獻如下：

1、《規(guī)律與邏輯》

2、《CCtalk B端產(chǎn)品設(shè)計課》by 美芳老師

3、《高級UI設(shè)計師》

4、《ANT-DESIGN 螞蟻金服》

5、《蘋果官網(wǎng)等設(shè)計網(wǎng)站》

原文地址：站酷

作者：峻溪POINTVISION

轉(zhuǎn)載請注明：學UI網(wǎng)》設(shè)計規(guī)范和適配

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

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

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

評論(0) 瀏覽(3678)

222022-9

Web產(chǎn)品的適配設(shè)計選型

seo達人

歷史長廊

在早期，硬件設(shè)備落后，網(wǎng)頁使用的是絕對靜態(tài)布局為主，絕對固定寬度的布局被稱為是靜態(tài)布局（StaticLayout），也有叫固定布局（Fixed Layout）。

后隨時代變遷，技術(shù)發(fā)展。因瀏覽器的增多，開發(fā)者們忙于兼容各種瀏覽器。在這個期間，實際已經(jīng)有了針對各設(shè)備適配的解決方案，只是未成為主流，這種新布局方式叫自適應(yīng)布局（Adaptive Web Design，簡稱AWD）。

在當時，大多指的就是寬度自適應(yīng)布局。在這種新思想下，又出現(xiàn)了兩派的具體解決方案：百分比寬度布局和流體式布局（Fluid Layout）。

在當時，大家都還沒有響應(yīng)式布局的概念，但此時出現(xiàn)了一個新的詞–漸進增強。漸進增強出現(xiàn)后，另一個詞優(yōu)雅降級也隨之出現(xiàn)了。這里只是舉個典型的例子：gmail和qqmail。這兩個都是百分比寬度布局，都屬于自適應(yīng)布局，但有區(qū)別。

qqmail就是css hack的完美體現(xiàn)，你用任何一個瀏覽器，幾乎可以看到同一個樣子的郵箱，為的是用戶體驗統(tǒng)一。gmail則使用了漸進增強，你的瀏覽器越新越強，你看到的效果就越好，為的是用戶體驗增強。再后來，Google發(fā)布了Android，移動互聯(lián)網(wǎng)爆發(fā)，html5標準發(fā)布。

互聯(lián)網(wǎng)大戰(zhàn)從PC打到了手機。手機雖然屏幕變小了，但是卻提供了更豐富的功能，用戶要求不斷提高，網(wǎng)站更加看重的是用戶體驗了，所以，谷歌式的漸進增強被廣泛認可，結(jié)合自適應(yīng)的思想，出現(xiàn)了響應(yīng)式布局 (Responsive Web Design)的概念——2010年由Ethan Marcotte提出。

描述響應(yīng)式界面最著名的一句話就是“Content is like water”——無論用戶正在使用筆記本還是iPad，我們的頁面都應(yīng)該能夠自動切換分辨率、圖片尺寸及相關(guān)腳本功能等，以適應(yīng)不同設(shè)備。

現(xiàn)如今，為何需要考慮多設(shè)備的兼顧呢，依然是因為時代發(fā)展與生活方式的變遷：

即便是PC或Mac用戶，有查顯示只有一半的人會將瀏覽器全屏顯示，而剩下的一般人使用多大的瀏覽器，很難預(yù)知；
臺式機、投影、電視、筆記本、手機、平板、手表、VR……智能設(shè)備正在不斷增加，“主流設(shè)備”的概念正在消失；
屏幕分辨率正飛速發(fā)展，同一張圖片在不同設(shè)備上看起來，大小可能天差地別。結(jié)合自身產(chǎn)品用戶訪問瀏覽器分辨率
鼠標、觸屏、筆、攝像頭手勢……不可預(yù)期的操控方式正在不斷出現(xiàn)。

因此我們需要在了解基本布局方式的特征下，選擇適合自身產(chǎn)品的布局實現(xiàn)方式。

布局方式對比

靜態(tài)式、自適應(yīng)、流體式、響應(yīng)式布局，A+R混合布局的特點對比如下：

靜態(tài)式布局：

窗口縮小后內(nèi)容被遮擋時，拖動滾動條顯示布局。不管在哪種設(shè)備，哪種瀏覽器上瀏覽都是一個樣。移動設(shè)備上則顯示太小或不全。

自適應(yīng)布局：

用自適應(yīng)技術(shù)(Adaptive)我們可以開發(fā)和提供不同的布局來為類似純觸屏或者混合觸屏設(shè)備這樣的一類具體場景提供最好的體驗。

分別為不同的屏幕分辨率設(shè)備設(shè)計不同的樣式布局，相當于多個靜態(tài)布局組成的一個系列合集，每個靜態(tài)布局對應(yīng)一個屏幕分辨率范圍，頁面通過百分比自動適配設(shè)備屏幕分辨率和可視窗口大小，當可視窗口改變時，不會出現(xiàn)橫向滾動條，UI，圖片，文字會自動縮放，元素內(nèi)容、布局、交互方式基本不變。

彈性布局：

以百分比作為頁面的基本單位，可以適應(yīng)一定范圍內(nèi)所有尺寸的設(shè)備屏幕及瀏覽器寬度，并能完美利用有效空間展現(xiàn)最佳效果。

流體式布局：

屬于自適應(yīng)的一個子集，也是通過百分比自動適配設(shè)備屏幕分辨率和可視窗口大小，不同于百分比自適應(yīng)的是隨著窗口大小的改變，頁面的布局會發(fā)生小的變化，可以進行適配調(diào)整，這個正好與自適應(yīng)相補。

響應(yīng)式布局：

如果從廣義上講，響應(yīng)式布局實際上就是更好、更機智、更靈活的去實現(xiàn)自適應(yīng)，他們都算是一種彈性布局。再通俗點講響應(yīng)式重在于「響應(yīng)」它會隨著設(shè)備屬性（如寬高）的變化。

頁面的設(shè)計和開發(fā)應(yīng)當根據(jù)用戶行為以及設(shè)備環(huán)境（系統(tǒng)平臺、屏幕尺寸、屏幕定向等）進行相應(yīng)的響應(yīng)和調(diào)整。具體的實踐方式由多方面組成，包括彈性網(wǎng)格和刪格、布局、圖片、css media query的使用等。

狹義上講，響應(yīng)式網(wǎng)頁設(shè)計指的是一個網(wǎng)站能夠兼容多個終端——而不是為每個終端做一個特定的版本。

A+R混合模型布局

R和A上的區(qū)別

當響應(yīng)式設(shè)計在基于預(yù)定義斷點之上用CSS或者JS調(diào)整布局和內(nèi)容。調(diào)整方法提供基于用戶代理和設(shè)備類型的預(yù)結(jié)構(gòu)化模版。

他們之間主要的區(qū)別是DOM結(jié)構(gòu)，當采用響應(yīng)式思維開發(fā)時，HTML代碼在各種情況下都會一樣（除非你用JS移除某些DOM節(jié)點），而在自適應(yīng)開發(fā)中我們可能會有不一樣的代碼結(jié)構(gòu)和體驗。

R采用流體＋斷點，在斷點之間，頁面依然會隨窗口大小自動縮放（通過fluid grid），直到遇到斷點改變界面樣式布局甚至內(nèi)容。R一般來說需要在網(wǎng)頁設(shè)計初期就開始（通常采用mobile first策略），所以舊的網(wǎng)站要做RWD很可能要完全重建。

A只在針對幾種分辨率（如320，480，760，960，1200，1600px）進行優(yōu)化，在斷點之間的自動過渡比較少。A采用保留現(xiàn)有桌面網(wǎng)站（desktop version）而對于更小的分辨率做針對性的優(yōu)化（適應(yīng)），減小重構(gòu)的成本。

兩種設(shè)計思維都是有效的，需衡量在項目中有多少組件、復(fù)雜性如何以及是否存在一種體驗是適合所有用戶的。開發(fā)web應(yīng)用時經(jīng)常會用到響應(yīng)式設(shè)計，例如通過自適應(yīng)開發(fā)來構(gòu)建定制化體驗。

兩種方法各有利弊，但是如果同時使用它們到底會得到什么呢？

A+R模型結(jié)合了基于單個主要臨界點的自適應(yīng)和響應(yīng)式方法。

混合式布局就是為不同終端設(shè)備的屏幕分辨率定義布局（適配各種尺寸的PC、手機、穿戴設(shè)備等等），在每個布局中，頁面元素隨著窗口調(diào)整而自動適配，混合了百分比、像素為基本單位的組合方式?？梢园鸦旌鲜讲季挚醋魇菑椥圆季帧⒆赃m應(yīng)布局的融合。

自適應(yīng)布局、彈性布局、混合布局都是響應(yīng)式布局方式的一種。其中自適應(yīng)布局的實現(xiàn)成本最低，但拓展性比較差；而彈性布局與混合布局效果都是比較理想的響應(yīng)式布局實現(xiàn)方式。

很多時候，單一方式的布局響應(yīng)無法滿足理想效果，需要結(jié)合多種組合方式，但原則上盡可能是保持簡單輕巧，而且同一斷點內(nèi)（發(fā)生布局改變的臨界點稱之為斷點，后面內(nèi)容會講到）保持統(tǒng)一邏輯。

否則頁面實現(xiàn)太過復(fù)雜也會影響整體體驗和頁面性能。一般通欄、等分結(jié)構(gòu)的布局適合采用彈性布局方式，非等分的多欄結(jié)構(gòu)布局則需要采用混合布局的實現(xiàn)方式。

選型

如何考慮實踐過程中的判斷呢。一是看應(yīng)用場景，二是看如何設(shè)計“響應(yīng)式”方案。簡單、輕量的頁面直接用media query實現(xiàn)響應(yīng)性就很好。比如blog、小型企業(yè)站之類?，F(xiàn)在的CSS框架基本都具備響應(yīng)性。

但請注意響應(yīng)式不僅僅是響應(yīng)式布局。對于大型站簡單用media query是遠遠不夠的。于是在同一個controller層上，識別UA，渲染不同版本的模板，組合相應(yīng)的靜態(tài)資源。這也算是響應(yīng)式。開發(fā)及維護成本明顯提高。

當各個版本間的差異很大時，維護成本很可能會大到無法接受。即便分開做，架構(gòu)上也要調(diào)整，后端服務(wù)化，應(yīng)用層app化。

根據(jù)不同公司的技術(shù)特點，調(diào)整的成本也難講是否可行。對于大型站，分開做更清晰，同時用響應(yīng)式組件解決復(fù)用、功能同步的問題?？傊?，根據(jù)場景響應(yīng)式可以從各種層面，各種粒度上做。這是現(xiàn)代web開發(fā)的特點。

建議開發(fā)一套響應(yīng)式電腦網(wǎng)站（過渡到平板端，不過渡到手機端）和開發(fā)一套響應(yīng)式手機端網(wǎng)站（過渡到平板端以下的尺寸，不過渡到平板端）

響應(yīng)式布局有可能造成冗余的代碼較多，對研發(fā)的要求也更高，比如如何更好地讓圖片，適配，UI動畫自適應(yīng)各種布局。

大站還是要考慮數(shù)據(jù)計算和承載的問題，會對桌面和移動端輸出不同數(shù)據(jù)，減輕壓力。

實踐與技巧

首先，我們需要了解幾種分辨率的差別。

ps：原生應(yīng)用可查詢橫縱兩個方向的像素密度，通常瀏覽器可查詢1個系統(tǒng)像素對應(yīng)多少物理像素。而設(shè)計角度通常需要參考的是所獲取的系統(tǒng)分辨率

以一個SaaS類后臺產(chǎn)品為例，對于基本流量來自Web端網(wǎng)頁的產(chǎn)品而言，需要了解當下的瀏覽器分辨率現(xiàn)狀 Web端不同屏幕分辨率占比情況，數(shù)據(jù)來源百度統(tǒng)計，如圖所示：

如上所述，選擇適配方式時，設(shè)計目標為：區(qū)分web與pad端可共享的設(shè)計布局大于手機端，且產(chǎn)品規(guī)劃上web端為主流量來源，pad端屬于短期兼顧?？紤]技術(shù)維護成本與開發(fā)成本的平衡，于是判斷需要選擇A+R模式來完成產(chǎn)品的跨端設(shè)計。

自適應(yīng)（A）方法能讓我們在不同的設(shè)備上有不同的體驗、內(nèi)容甚至是功能。如將960px作為主要的自適應(yīng)臨界點，根據(jù)全局統(tǒng)計信息定義，我們會得到一些相似處：

左側(cè)的可視區(qū)代表整個屏幕小于960px時的具體布局和內(nèi)容
右側(cè)的可視區(qū)代表整個屏幕大于等于960px時的另一種布局

在使用響應(yīng)式（R）技術(shù)時，我們可以利用主要臨界點創(chuàng)建兩個互不相同的體驗情景，每種體驗里，我們都可以在可用空間內(nèi)定義二級臨界點去調(diào)整布局。

通過結(jié)合自適應(yīng)和響應(yīng)的方法，我們得到A+R模型。利用自適應(yīng)技術(shù)，我們將致力于體驗和功能，作出兩種不同的情景設(shè)計。使用響應(yīng)式組件，我們可以處理上下文內(nèi)的UI組件和布局。

這種設(shè)計方法要求設(shè)計師真正了解他們想要提供的體驗，以便于定義要遵循的模型。此模型非常適合那些在較少功能或結(jié)構(gòu)完全不同的小型移動設(shè)備上運行的大型APP。就像你看到的，你的產(chǎn)品將具有很強的靈活性，但同時也很復(fù)雜。

因為你要處理不同的代碼庫和環(huán)境（非強制性）,Twitter、Facebook和Github將此模式應(yīng)用在他們的移動網(wǎng)站上。如果你在移動設(shè)備上瀏覽這些網(wǎng)站，則可以根據(jù)移動用戶的期望來檢驗它們是如何改變的用戶體驗的。

其他輔助手段

刪格

柵格系統(tǒng)可以幫助我們設(shè)計，但卻不能保證我們的設(shè)計。它有多種可能的用途，并且每個設(shè)計師都可以尋找適合其個人風格的解決方案。對于簡化復(fù)雜的響應(yīng)式布局規(guī)則而言，這是一項十分有效的輔助手段。

1. 列和槽（Columns and Gutters）

列（Column）用于對齊內(nèi)容。其中的槽（Gutter）是指相鄰列之間的空間，把控頁面留白,有助于分隔內(nèi)容。

2. 頁面邊距（Side Margins）

頁邊距是指內(nèi)容和屏幕邊緣之間的空間。將邊距寬度定義為固定值，這些值決定了每個屏幕尺寸的最小呼吸空間。

3. 用于組成柵格的列數(shù)稱為列結(jié)構(gòu)。

8、12、16和20是響應(yīng)式布局中最常見的幾種列結(jié)構(gòu)。而這取決于我們對產(chǎn)品的設(shè)計要求。12列結(jié)構(gòu)是相對靈活的。它可以進一步細分，將內(nèi)容排列在4-4-4或3-3-3-3大小的文本框中，也有部分設(shè)計系統(tǒng)采用來24列的形式，如Ant-D

4. 斷點

是指屏幕尺寸的特定范圍，列結(jié)構(gòu)、列寬、槽寬和邊距都取決于斷點。在這個范圍內(nèi)，布局會根據(jù)可用的屏幕尺寸重新調(diào)整，以獲得最佳的布局視圖。

如果較小的屏幕有足夠的可用空間容納內(nèi)容，則列將按比例縮小。如果一列的內(nèi)容無法在較小屏幕上顯示，該列將垂直放置圖文內(nèi)容。

5. 網(wǎng)格規(guī)則

列跟槽的寬度是以網(wǎng)格作為基本單位來做增減，所以應(yīng)該先定義好柵格的原子單位，“網(wǎng)紅款”8點網(wǎng)格指的是設(shè)計頁面時，也應(yīng)該遵循8點規(guī)律。值得注意的是，列跟槽的值盡量取8的倍數(shù)，但不是非得是8的倍數(shù)。

產(chǎn)品中各類元素應(yīng)該遵循這個倍數(shù)原則（圖標、組件大小等），不同的設(shè)計系統(tǒng)根據(jù)自身需求，設(shè)定這個規(guī)則。例如在Material Design中使用的是2X網(wǎng)格。

6. 流體柵格與混合刪格

流體柵格有不同寬度的列，固定的槽和固定的邊距。流體柵格有靈活的內(nèi)容寬度，根據(jù)屏幕大小變化在流體柵格中，列可以增長或收縮以適應(yīng)可用空間。

混合柵格既有不同的寬度，也有固定寬度。在現(xiàn)代布局中，一些元素超出了網(wǎng)格邊緣，與屏幕邊緣對齊。頁眉、頁腳、出血都是一些常見的例子。

如果內(nèi)容寬度大于可用的屏幕尺寸，那么一個固定柵格就會轉(zhuǎn)變成一個適應(yīng)屏幕可用空間的流動?xùn)鸥?，以充分適應(yīng)內(nèi)容。

結(jié)語

設(shè)計需在技術(shù)方案前介入，根據(jù)你的產(chǎn)品特點，進行設(shè)計方案評估，可借助的手段有刪格，網(wǎng)格規(guī)則等，設(shè)計斷點規(guī)則時，需關(guān)注設(shè)備的常見系統(tǒng)分辨率。

移動和桌面設(shè)計的差別遠不止是布局問題。只要有足夠的編程量，這些差別是可以通過響應(yīng)式設(shè)計來解決的。事實上，你可以認為如果一種設(shè)計不能兼顧兩種平臺的主要差別，就不能算是合格的響應(yīng)式設(shè)計。

但是，如果確實想要處理好平臺間的所有差異，我們就回到了原點：進行兩種不同的設(shè)計或者使用A+R的模型，在尋求合適的過程中，關(guān)注技術(shù)的革新。

A與B不是硬幣的正反面，它們?yōu)榱私鉀Q同一個問題而生，是同一種思想的延伸。

作者：神樂

配圖：沙拉

轉(zhuǎn)載請注明：學UI網(wǎng)》Web產(chǎn)品的適配設(shè)計選型

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

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

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

評論(0) 瀏覽(765)

222022-9

讓我一個沒有美術(shù)基礎(chǔ)的人畫插圖，太難為我了吧！

seo達人

這是一個科技類網(wǎng)頁的小插圖，這樣看是OK的，但第一版的圖就一言難盡了，如下：

做完設(shè)計之后，我往回看看了，發(fā)現(xiàn)第一稿真讓人頭皮發(fā)麻呀～
最后的呈現(xiàn)效果比之前做的都要強太多了。

不管是顏色方向、質(zhì)感、細節(jié)上都甩前者一大截，原因是什么呢？我總結(jié)了以下幾點：

一、層次關(guān)系

客戶就說“畫面視覺太平了，沒有層次，黑白灰關(guān)系沒有拉開！細節(jié)也沒有！顏色不好看！自己回去再想想吧！”……

黑白灰關(guān)系什么意思呢？我的理解就是先把設(shè)計稿去色不就能看到黑白灰了嗎？

很多同學在做設(shè)計時不會考慮黑白灰這個問題，但其實顏色也是有變化的；在顏色中黑白灰的關(guān)系就是色彩的明度關(guān)系，明度越高就越白。
正常情況下畫面中的黑白灰關(guān)系拉得越開，就越有空間感、層次感。

如果畫面中黑白灰關(guān)系沒有拉開，就會使畫面飄飄的，很奇怪、不接地氣。

如上圖就是一個正常的黑白灰關(guān)系，每一層都區(qū)分的很開，它就會有空間層次感。

而且我們也需要保持畫面的平衡感，黑色多了就會使得畫面沉，白色多了就會使畫面飄，灰色多了就會使畫面悶。

所以我們得把握一個度，把握黑白灰在畫面中的節(jié)奏感！

我們再把黑白灰關(guān)系運用到實際工作中：

整個背景采用暗灰色調(diào)，主體底板用亮灰色，內(nèi)容就用亮色系，陰影及厚度用暗色調(diào)。這樣一來畫面的層次拉開了。

那么客戶說的細節(jié)該怎么去加呢？

二、細節(jié)

沒有細節(jié)、太平了，我就想到把它做成立體的感覺，讓畫面豐富起來，也可以加一些點綴的小元素來修飾畫面。

從平面二維到立體三維畫面的細節(jié)就豐富多了,而且三維空間更加容易出效果。

在加細節(jié)的過程中，我感覺到了畫面中有點太過于規(guī)規(guī)矩矩了，全是方方正正形狀，就很呆板的感覺，特別是左下角的矩形框，與整個畫面之間沒有聯(lián)系、不協(xié)調(diào)。

這就是構(gòu)圖出了問題。

解決的方法很簡單，只要讓圖形與圖形之間互相穿插、疊加，讓它們你中有我我中中有你；甚至可以把圖形加以旋轉(zhuǎn)，讓圖形產(chǎn)生“正”與“斜”的對比。

這種方法就可以解決畫面死板的問題。

但是我覺得不能夠加矩形了，畫面中方形形狀已經(jīng)很多了，那么我們是不是可以考慮一下用圓去增加畫面節(jié)奏感。

方的對比是圓，也是一個對比關(guān)系，但圓的占比面積太大了，咱們就可以用弧線去代替。

這不，弧線把方正的矩形打破了，畫面就更加生動有節(jié)奏。

還有一個細節(jié)：

如圖所示，這里就涉及到一個識別度的問題，我們在做設(shè)計的時候，一定要把形體交代清楚；

我做了一個銀幣的效果，但是形體邊緣輪廓沒有交代清楚，整個銀幣糊在一堆了，看不清里面的字符是什么，這樣的感覺不是很好，整個元素是虛的。

還有上升的線條取消發(fā)光效果是不是去掉會更好呢？

這樣是不是畫面會更加的完整呢，這點很重要呀，我們得把物體交代清楚，不能模棱兩可就糊弄過去了！物體虛虛的給人感覺很飄，不穩(wěn)。

其實還有中間的一稿，但是顏色一不小心就弄臟了：

三、顏色臟的小技巧

經(jīng)過嘗試，我總算明白為什么顏色漸變會偏臟了；我總結(jié)了以下幾點：

1、飽和度低的顏色占比不要太多，多了顏色就容易顯得臟。

如圖，右邊的顏色飽和度偏低，這類顏色就會發(fā)灰，灰色多了能不臟嗎？

2、盡量不要用對比色去拉漸變，對比色漸變對于新手來說不太友好，“紅配綠賽狗屁”就是這種說法。

只要注意到這兩點就基本可以避開顏色太臟的情況

總結(jié)

以上就是這次小案例帶給我的啟發(fā)和思考，希望當遇到類似我這種問題的時候能夠給你點啟發(fā)，能夠幫助到你！

作者：橙汁

轉(zhuǎn)載請注明：學UI網(wǎng)》讓我一個沒有美術(shù)基礎(chǔ)的人畫插圖，太難為我了吧！

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

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

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

評論(0) 瀏覽(773)

222022-9

從構(gòu)思講起，手把手帶你繪制一套彩鉛噪點人物插畫！

seo達人

怎么樣，是不是很耐思~有沒有想動筆的沖動！那接下來把話筒交給青燈，讓他開始他的表演吧！

YoYo，大家好！我是最近畫到手痛的青燈，這次是我第一次做插畫教程，做的不夠好的地方就請大家多多指教啦！

知識重點：構(gòu)圖分析和構(gòu)思、人物轉(zhuǎn)化、肌理筆刷疊加、不同材質(zhì)表現(xiàn)操作工具：數(shù)位板 | Photoshop

操作難度：★★★☆☆

這期的彩鉛顆粒風格主要是用扁平人物和元素+方型構(gòu)圖+彩鉛肌理刻畫的結(jié)合。

構(gòu)圖靈感來源自法國藝術(shù)家 Gasp art 的插畫作品，這個系列作品以扁平人物為主，用演奏樂器的方式結(jié)合了植物的生長，可以很直觀的感受到每個人物的動作和元素都是框在一個正方形里，給人一種規(guī)整又舒適的感覺。

藝術(shù)家 Gasp art 的插畫作品，僅供賞析

總結(jié)一下 Gasp art 的插畫構(gòu)圖，其實主要就是人物加元素組成方型構(gòu)圖，可以用植物和道具元素或者是人物動作彎折的形式構(gòu)成方形邊框。

這次的刻畫方式我們選擇了兩種風格：一種是偏粗糙的鉛筆肌理風格，第二種是偏柔和的細膩噪點風格，讓我們來欣賞一下圖片：

藝術(shù)家 Nadiia Zhelieznova 的插畫作品，僅供賞析

藝術(shù)家 Wnjing Yang 的插畫作品，僅供賞析

我們截取第一種風格的局部，放大觀察并總結(jié)一下：

1. 噪點顆粒明顯，并且噪點的間隙會把底部的顏色透出來。

2. 疊加肌理時會透出上一層肌理，但是疊加的越重就會越實。

3. 在結(jié)構(gòu)轉(zhuǎn)折處和邊緣有描邊。

再總結(jié)一下第二種風格的插畫特點：

1. 顏色和噪點的過渡柔和

2. 邊緣用亮色或重色拉開對比，輪廓清晰

3. 在最亮處有高光點

把這 6 點結(jié)合起來就是我們這次的刻畫風格啦~

1. 確定主題收集圖片素材：

在開始之前，要先想想畫啥。咱們列個思維導(dǎo)圖，把場景分成室內(nèi)室外都在干啥，可以多想一些好玩的事。這里我選了做瑜伽，躺著玩手機，路上踩到了口香糖和快樂逛街這 4 個。

現(xiàn)在關(guān)鍵的來了，根據(jù)這 4 個小場景來找合適的人物動作參考和一些道具參考，一定要多找參考?。?！多找參考?。?！找參考?。?！重要的事情說三遍！

瑜伽篇：

瑜伽這張我找了個動作接近框型的一個動作，然后根據(jù)瑜伽休閑愜意的感覺，我找了個室內(nèi)植物還有小鳥和紙飛機，想代表她隨著身體的放松，精神也慢慢飛向了遠方。

在動筆之前我們先分析一下人物的比例和特點。

人物風格分析：

① 人物頭身比特點：人物比例在 11 頭身左右，因為人物動作有折疊，頭占畫面七分之一左右。

人物上半身在 4 頭左右，腿長 7 個頭左右，手長 6 頭左右。

② 人物四肢特點：四肢偏粗方，可以想象是多個矩形和梯形相接，銜接的時候注意關(guān)節(jié)弧度。

2. 畫草圖

① 先提取動作框架，根據(jù)我們分析好的頭身比例調(diào)整放在框里使得四肢貼邊呈方形。

② 給框架加肉，根據(jù)之前的四肢分析，多用方形和圓矩形概括，這里我把女生的頭發(fā)換成了大波浪，增加了飄逸的感覺。同時曲線也會方便后期刻畫。

③ 同理，植物直接用一個彎的水滴型概括葉片和葉莖，鳥用半圓形概括身子加上小半圓的頭和四邊形的尾巴就概括出來了啦~

④ 最后整合一下元素開了個“天窗腦洞”，紙飛機飛進這個天窗。然后在植物邊上用黃色的線條加了一些靈動的水滴，這張瑜伽就做好了。

快樂逛街篇：

第二張購物的也是同理先找參考，大部分逛街的動作都是比較平緩的走路類的姿勢，這里我特意找了一個幅度較大的舞蹈動作，再找了一些服裝參考。另外我打算用水加上金幣流入黑洞的方式表現(xiàn)“花錢如流水”的概念。

步驟和之前的都是一樣的，這里加入一個水流小 tip：

踩到口香糖篇：

第三張我想的是男生在趕去上班的路上踩口香糖，草圖同樣是從動態(tài)提取入手，我想讓手和腳上的口香糖有個互動，就把原動作的腳抬起來了一點，讓手靠近鞋子去抓口香糖。另外我把左邊的手大臂伸平小臂轉(zhuǎn)過來做一個看手表的動作，表示他要遲到的焦急。

躺著玩手機篇：

第四張我這邊提取的是一個躺著翹腿的人物動態(tài)，為了讓整個人物能符合方形構(gòu)圖，我把人物左手抵著地把人物上半身撐起來了點，頭發(fā)用大小不一的泡泡在邊緣處排列，接著我夸張了翹起來的腿使得整個動作幅度更大，同時也讓整個構(gòu)圖更充實。最后我在手機前面加入了一個大泡泡的元素，暗示我們時常沉浸在手機信息帶來的巨大泡影里。

鋪色可以用鋼筆勾閉合形狀，也可以用 ps 自帶的硬邊緣筆刷畫。

配色以補色為主，在色輪上呈 180 度的變化，以這張瑜伽舉例，能看到比較明顯的橙色和藍色，在這對顏色基礎(chǔ)上再加入了它們的相鄰色作為點綴色，在色輪上呈 30 度左右變化。

筆刷介紹

終于到了激動人心的刻畫環(huán)節(jié)了，這次給大家準備了村口高質(zhì)量彩鉛噪點筆刷~~我這邊已經(jīng)按照繪畫順序和效果類別整理好了~~（后臺回復(fù)【插畫046】領(lǐng)?。?

這里重點介紹一下這幾個筆刷！

皮膚刻畫

給皮膚增加色素，首先我們要增加的區(qū)域分為：

1. 五官例如：鼻子，眼睛，腮紅，耳朵

2. 陰影例如：脖子，腋下，衣服的陰影，以及身體轉(zhuǎn)折處來加重

以人物面部舉例，選一個比皮膚更深一點的顏色用【軟底紋筆刷】由重到輕地上色素，顏色就會自然的過渡過去。

接著用【點狀排線筆】再加重一遍。

TIPS：在身體轉(zhuǎn)折的地方可以用套索工具圈出區(qū)域上色。

用一樣的方法把身體部分畫完，最后可以在邊緣處（比如手腳接觸的地方，手指縫）加重線用于區(qū)分色塊

服裝道具刻畫：

畫衣服和道具這類面積比較大元素時，第一步先把顏色提亮，第二步再鋪排線紋理（選一個你喜歡的方向）并在關(guān)節(jié)處加重。

TIPS：畫重色色塊上色時先把顏色提亮以便后續(xù)加肌理效果明顯，同時把底色透出來會更有通透感。

第三步用【軟底紋筆刷】根據(jù)光源加重褲子陰影，腿彎折處用套索工具勾出來鋪色加重，第四步用【點狀排線筆刷】加重陰影處，顏色越重面積越小。

最后在轉(zhuǎn)折處勾勒更深的邊線就 ok 了~

背景元素刻畫：

用【軟底紋筆刷】加肌理，【速寫鉛筆】加裝飾線的方式把其他的植物和小鳥元素刻畫完。

暗色背景的星星第一步在星星里鋪上背景色，然后用亮色把中間提亮，第二步給星星中間用白色畫個細十字線，星星底部順著四個角畫延長線條再復(fù)制一層縮小旋轉(zhuǎn) 45 度，最后用【高光筆】點底部點一個亮光，亮色背景的星星不用刻畫直接做延長線和提亮高光就可以。

TIPS：飛機后面的拖尾可以通過【后悔藥筆刷】擦除呈現(xiàn)半透明狀態(tài)，然后再用【軟底紋筆刷】加入其他顏色。

頭發(fā)刻畫：

首先第一步也是把頭發(fā)底色提亮，第二步用波浪線把頭發(fā)分成中間粗兩邊細的葉片形式，然后第三步在葉片里加線條，線條遵循兩側(cè)密中間疏的原則向焦點聚攏。

TIPS：在把頭發(fā)區(qū)分成葉片的時候同時區(qū)分一下葉片的大小會讓頭發(fā)更自然哦~

第四步在線條密集的地方用使用【軟底紋筆刷】加重，中間輕輕帶過，頭發(fā)體積感就出來了。

最后再在頭發(fā)亮的地方用線性減淡的圖層模式用【高光筆刷】提亮一下，邊緣用【速寫鉛筆】輕輕勾勒一條淺色邊緣就ok了~

背景肌理：

第一步先把背景提亮至白色，第二步用【軟底紋筆刷】用力的涂色，這樣鋪完色后就會有些白色的點點透出來了。

第三步用【點狀排線筆刷】加重物體下方讓他們看起來有點投影的狀態(tài)就 ok 了！

材質(zhì)和質(zhì)感表現(xiàn)：

1. 水滴材質(zhì)：

來到了我們畫面的點睛之筆的部分了，在畫這種半透明狀的物件東西是可以吸環(huán)境色涂在中間，讓水滴兩側(cè)保持亮色就會有透明的質(zhì)感呈現(xiàn)出來，最后點上高光水滴的透明質(zhì)感就做出來了。

2. 泡泡材質(zhì)：

在這張?zhí)芍词謾C里有一個泡泡的材質(zhì)，它的繪制邏輯其實跟紙飛機拖尾是一樣的，但是泡泡的顏色會更復(fù)雜一點，所以我們先來分析一下泡泡的顏色怎么畫。

拿泡泡的一個小弧度邊舉例，從左到右的顏色就是從黃→紅→粉→紫→藍→綠這樣的顏色變化。

所以我們照葫蘆畫瓢，先畫出一個一樣的形狀，用【后悔藥】橡皮擦，擦出透明漸變，擦的時候在弧度凸的地方多保留一點，凹的地方輕輕擦。

接著用【軟底紋筆刷】畫出顏色，注意顏色的位置和占比也一樣參考照片。在顏色銜接的地方用筆刷輕輕的覆蓋上去就會比較自然，在光源位置畫出白色的高光。

繼續(xù)把完整的泡泡畫出來，再加上一點線條裝飾一個泡泡就畫好了！

3. 畫面光澤：

用【高光筆刷】把圖層模式調(diào)成線性減淡模式在光源方向提亮，再用【速寫鉛筆】在最亮處點一個小高光，整張就畫完啦~

掌握了這些刻畫方式，再加一點耐心和時間這 4 張就畫好啦~~

1. 人物動作轉(zhuǎn)化和道具的分配要貼合方形構(gòu)圖。

2. 加入主色的鄰近色豐富畫面。

3. 刻畫顏色遵循陰影顏色越重面積越小，高光越亮面積越小的邏輯，讓重的更重，亮的更亮，拉開對比。

4. 你永遠可以相信后悔藥橡皮擦，畫多了就擦掉所以大膽畫吧~

作者：藍貴蓮

轉(zhuǎn)載請注明：學UI網(wǎng)》從構(gòu)思講起，手把手帶你繪制一套彩鉛噪點人物插畫！

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

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

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

評論(0) 瀏覽(1118)

222022-9

當互聯(lián)網(wǎng)遇上線下門店，設(shè)計師能做些什么？

seo達人

從根兒上捋一捋，人類社會經(jīng)濟最根本的是“互通有無，各取所需”這八個字。更高效的生產(chǎn)力決定了更好的交換能力。只要制造業(yè)的生產(chǎn)線還能繼續(xù)開足馬力，源源不斷的生產(chǎn)出生活必需品，那么就有相應(yīng)的“場景”去交換它們。這個“場景”最終的末端形式就是“店”。有了互聯(lián)網(wǎng)交易這個場景之后，門店（門市）就成了“線下店”。“線上店”就啥都好嗎？

顯然不是。人跟人之間隔著一個“網(wǎng)線”，我們對小物件或者低價值的小商品或許還有很大的容忍度。但是，對于你的家庭服務(wù)需求，你要找的是一位共同在家里生活朝夕相處、帶娃、護老的阿姨，不見一見，放心嗎？所以就需要這么“一個專業(yè)的家庭服務(wù)門店”來提供面對面的咨詢，以及培訓(xùn)出優(yōu)秀的阿姨來提供令你和你的家人滿意的服務(wù)。

不得不說，在這個領(lǐng)域里，還沒有一個“一統(tǒng)天下”的品牌和絕對“統(tǒng)治力”的產(chǎn)品。而順應(yīng)趨勢來看，開放生育和老齡化，這確實是一個“有發(fā)展空間”的行業(yè)，需要這么一個“門店”。有的行業(yè)在沒落，有的，則在生長。

門店標準化背后有怎樣的運作邏輯？它的本質(zhì)是什么？后疫情時代如何做門店形象標準化？

門店做標準化當然不僅是說品牌露出好、有助于打開潛在客戶心智、顧客選擇偏向這些理由。標準化本身除了品牌、效率之外的比較重要一點，就是這套運營標準能使加盟老板、乃至員工都能夠迅速進入“經(jīng)營”的狀態(tài)，并逐步迭代總結(jié)，再通過標準化把經(jīng)驗傳遞下去。標準化這套法子能使老板少走彎路，早盈利。老板盈利賺到錢了，品牌方就有了更大的話語權(quán)，實現(xiàn)更大的商業(yè)企圖。

在后疫情時代，人們的錢袋子緊了，老板在經(jīng)營投入上謹慎了，設(shè)計上的發(fā)揮空間狹窄了。門店的裝修標準化不妨從“設(shè)計形式上比友商好一點，材料便宜點，執(zhí)行容易點”上入手。

設(shè)計形式好一點

往大了說是“差異化”。從材料、顏色、鋪貼方式三個角度去探索，任何一個角度提上一個LEVEL就可以。

如果只差一點，等友商迭代升級怎么辦？

不同于“線上店”，線下門店的裝修周期有比較明確的規(guī)律。三年小裝，五年大裝，裝修早了不賺錢，裝修晚了不符合當下品牌發(fā)展階段了，保持小步迭代的策略即可。

材料便宜點

裝修材料水深，不探討材料的品牌和產(chǎn)地。這里的便宜體現(xiàn)在品牌商的標準化管理成本，就是加盟商對材料的采購難易程度。如果買不到或者總?cè)必?，加盟商的免租期是有限的，很可能?dǎo)致“平替”的事情發(fā)生，但這個“平替”不是真的能平，很可能是向下“平”。從而出現(xiàn)失控的設(shè)計落地結(jié)果。同時，對品牌元素應(yīng)保持絕對的掌控力，統(tǒng)一采購配發(fā)（路邊廣告店自由發(fā)揮的結(jié)果超乎想象）。

上面提到的裝修周期，這也決定了在選材上要選擇符合盈利模型的材料。不要追求極致的耐用而導(dǎo)致成本提升。

執(zhí)行容易點

讓施工的人能明白標準化的設(shè)計意圖。不同的施工師傅對同樣的設(shè)計圖紙理解而施工出來的結(jié)果可能是不同的。所以做出明確設(shè)計意圖、圖紙、以往項目中的錯誤做法。并不是說，寫得越多越詳細越好。我恰恰在這上面深有體會，忽略了施工師傅的辦公環(huán)境和項目節(jié)奏。我們管這叫“由于缺少用戶習慣調(diào)研導(dǎo)致產(chǎn)品無法觸達用戶心智?！?

要知道，用戶面對，洋洋灑灑幾大篇的描述，往往不愿意去閱讀，所以盡量采用短視頻的形式去說明效果會更好。

在弱矩陣組織中設(shè)計的影響力邊界在哪？受控環(huán)境下的設(shè)計管理如何發(fā)揮最大效能？

說到這，終于到了正題。似乎設(shè)計師往往都是弱勢群體，很大程度上取決于組織架構(gòu)的形式。大多數(shù)品牌公司的設(shè)計組織都是依托于產(chǎn)品側(cè)的訴求。例外的是乙方設(shè)計公司，因為設(shè)計本身對公司來說就是產(chǎn)品。

弱矩陣的組織更像是臨時抽調(diào)人力組成的作戰(zhàn)小組，平時各職能人員都在自己組織內(nèi)處理常規(guī)業(yè)務(wù)需求發(fā)揮職能。這個組織形式上，也影響了參與者在項目中的投入精力。設(shè)計師在有限投入的情況下，需要更好的把設(shè)計流程和設(shè)計落地規(guī)則以及檢驗標準沉淀，以供其他各個環(huán)節(jié)的職能人員查閱和重復(fù)利用。

上面所說的，經(jīng)驗豐富的設(shè)計師可能已經(jīng)駕輕就熟了。再說說另外的思考。

我想，還可以做進一步完善審批流程、輔助工具、權(quán)重區(qū)分、沉淀文檔四個部分。

審批流程

提到審批流程，十幾年前新興的互聯(lián)網(wǎng)行業(yè)熱衷于“扁平化”，對傳統(tǒng)行業(yè)的審批流程嗤之以鼻。時至今日，當年的新興的互聯(lián)網(wǎng)也演化成了傳統(tǒng)互聯(lián)網(wǎng)，組織架構(gòu)越發(fā)龐大，職能劃分也越來越細，業(yè)務(wù)也趨近于穩(wěn)定。現(xiàn)在再看扁平化，不過是企業(yè)或者行業(yè)在發(fā)展初期無法形成穩(wěn)定的流程體系和組織結(jié)構(gòu)。審批流程在高并發(fā)、時效性強的項目中，可以為你分擔更多的監(jiān)督節(jié)點。各個職能去監(jiān)督各自擅長領(lǐng)域，識別和規(guī)避風險。

輔助工具

這一年最大的感觸就是資源同步問題。從以郵件分發(fā)演進到網(wǎng)盤云端下載，都沒能很好的解決這個問題。家庭服務(wù)行業(yè)之前從未真正有過的品牌化的運營。加盟商對品牌的理解力和協(xié)同力是非常初步的。并不像隔壁的3C數(shù)碼行業(yè)駕輕就熟，隔壁的加盟商甚至形成了自己的一套品牌管理組織架構(gòu)，主動去擁抱品牌。品牌標準化的落地不要局限于“手冊”，讓“手冊”靈活起來并不是一件難事。嘗試通過線上智能客服的方式，使加盟商通過關(guān)鍵字獲得資源同步，或常見疑問解答。要保證溝通平臺不能跳躍，比如常用微信群溝通，就不要一竿子支到公眾號，這反而增加了理解成本。好的工具可以事半功倍，將設(shè)計師從重復(fù)的溝通中解放出來，將其精力投入到設(shè)計當中。

權(quán)重區(qū)分

加盟商開店和裝修項目是一個高并發(fā)的項目。往往集中在行業(yè)淡季，這就導(dǎo)致在有限時間和有限資源配置下，做出權(quán)重區(qū)分。厘清各個項目條件的輕重緩急，比如說：搬家新址的項目權(quán)重是最高的，因為他面臨舊址無法繼續(xù)運營的情況。翻新升級的可以稍等一段時間，不影響他的正常運營。

沉淀經(jīng)驗

不總結(jié)不沉淀，就跟人失憶是一樣的。好的經(jīng)驗要沉淀，失敗的經(jīng)驗也要沉淀。甚至說，失敗的經(jīng)驗比正確的經(jīng)驗更有用。這說明它有盲區(qū)，也許是管理上的盲區(qū)，也許是執(zhí)行上的盲區(qū)，它可能是系統(tǒng)性的問題。這在跨部門溝通和團隊擴張的過程中會幫助業(yè)務(wù)變得更加穩(wěn)定，為項目增加抗體。

以上就是我分享的內(nèi)容。當然，我并不是都做到了盡如人意，也有還在進行和改進中的事項。如果整套搬運項目管理體系會與項目的“土壤”不匹配。做好流程裁剪，因地制宜吧。

設(shè)計更多的是事前去思考和謀劃如何去實現(xiàn)，這其中少不了去理解行業(yè)和落地流程，深入思考和理清邏輯。設(shè)計師的認知邊界在哪里，影響力的邊界就在哪里。

逆水行舟，不進則退。

作者：環(huán)鐵藝術(shù)家

轉(zhuǎn)載請注明：學UI網(wǎng)》當互聯(lián)網(wǎng)遇上線下門店，設(shè)計師能做些什么？

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

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

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

評論(0) 瀏覽(858)

首頁

底部標簽欄全面解析

一、標簽欄是什么？

二、為什么標簽欄要放于底部？

三、標簽欄的三大原則

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

3.2 位置清晰

3.3 可預(yù)測行為

四、標簽欄的基礎(chǔ)規(guī)范

4.1 圖標視覺大小

4.2 標簽欄布局

4.2.1 屏幕等分

4.2.2 圖標左右間距相等

4.3 標簽欄熱點區(qū)域

五、標簽欄的圖標樣式

5.1 線性圖標

5.2面性圖標

5.3線性+面性圖標

5.4輕質(zhì)感圖標

六、標簽欄的展示形式

6.1圖標+文字

6.2純圖標

6.3純文字（部分含標識）

6.4舵式

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

7.1視覺層面

7.1.1設(shè)計裝飾性圖標

&整體裝飾圖標

&單個裝飾性圖標

7.1.2加入品牌基因

&品牌顏色

&品牌LOGO

&品牌元素

&品牌名稱

&品牌性格

&品牌吉祥物

7.1.3讓用戶自定義

&用戶頭像

&捏臉

7.2交互層面

7.2.1標簽功能切換

&承載2個功能案例

&承載3個功能案例

7.2.2觸覺與聽覺

&觸覺

&聽覺

7.2.3標簽動畫

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

&虎牙-抖動+趣味表達

&汽車之家-結(jié)合容器+細節(jié)晃動

如何讓你的圖標具有說服力？

1、圖標的定義

2、圖標類型（基于功能劃分）

2-1釋意性圖標：

2-2交互性圖標：

2-3裝飾性圖標：

3、圖標類型（基于基礎(chǔ)樣式+表現(xiàn)手法）

3-1線性圖標（6種）

3-2面性圖標（6種）

3-3線面結(jié)合圖標（6種）

3-4擬物化圖標

3-5輕質(zhì)感圖標

二、圖標設(shè)計規(guī)范

1、圖標尺寸

2、圖標的keyline

3、像素

3-1像素統(tǒng)一

3-2避免小數(shù)位

4、圖標的曲率

5、傾斜角度

6、斷點形態(tài)

7、圖標間距

8、透視

9、視覺重心

10、圖形整潔

11、命名

三、圖標的性格走向

1、粗曠類圖標

2、活潑類圖標

3、商務(wù)類圖標

一、標簽欄是什么？

二、為什么標簽欄要放于底部？

三、標簽欄的三大原則

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

2、圖標類型（基于功能劃分）

二、圖標設(shè)計規(guī)范

2、圖標的keyline

3、像素

6、斷點形態(tài)

7、圖標間距

8、透視

10、圖形整潔

11、命名

三、圖標的性格走向

2、活潑類圖標

3、商務(wù)類圖標

4、精致類圖標

四、圖標的評判標準

1、識別性

2、圖標氣質(zhì)

3、一致性

4、協(xié)調(diào)性

5、品牌調(diào)性

客戶：要多、要大、要好看，能安排不?

二、把文字圖形化

三、把文字場景化

四、圖文組合

五、加入人物或動物插畫

六、精致的排版和配色