起點(diǎn)課堂會(huì)員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會(huì)特權(quán)
個(gè)人IP打造特權(quán)
30+門專項(xiàng)技能課
1300+專題課程
12場(chǎng)職場(chǎng)軟技能直播
12場(chǎng)求職輔導(dǎo)直播
12場(chǎng)專業(yè)技能直播
會(huì)員專屬社群
榮耀標(biāo)識(shí)設(shè)計(jì)基礎(chǔ)：資深視覺(jué)詳解APP設(shè)計(jì)中的微妙細(xì)節(jié)
隨著移動(dòng)優(yōu)先的趨勢(shì)，APP的設(shè)計(jì)也越來(lái)越受到公司重視，不斷地提高APP的設(shè)計(jì)質(zhì)量是每個(gè)設(shè)計(jì)師的追求，有哪些設(shè)計(jì)中的細(xì)節(jié)被你忽略了呢？讓我們一起來(lái)看看這些細(xì)節(jié)你都把握住了嗎。
視覺(jué)表現(xiàn)型問(wèn)題
01、統(tǒng)一的圖標(biāo)設(shè)計(jì)風(fēng)格
圖標(biāo)設(shè)計(jì)在整個(gè)APP設(shè)計(jì)中是比重較大的板塊之一，圖標(biāo)設(shè)計(jì)風(fēng)格有：線性圖標(biāo)、填充圖標(biāo)、面型圖標(biāo)、扁平圖標(biāo)、手繪風(fēng)格圖標(biāo)和擬物圖標(biāo)等。無(wú)論我們選擇何種表現(xiàn)形式的圖標(biāo)都請(qǐng)保持統(tǒng)一性，相同的模塊采用一種風(fēng)格的表現(xiàn)形式，如果是線性圖標(biāo)就保持一致的描邊數(shù)值。
圖標(biāo)在配色上面也要保持有規(guī)律的統(tǒng)一，采用相同顏色是比較常用的配色方式。如果你采用不同色相的配色方式，要保持整體的配色協(xié)調(diào)，不要出現(xiàn)飽和度、明度反差過(guò)大的配色而影響整體的視覺(jué)協(xié)調(diào)。
02、圖標(biāo)大小的視覺(jué)平衡
同一個(gè)界面出現(xiàn)多個(gè)圖標(biāo)時(shí)，我們需要保持整體的視覺(jué)平衡。并非是所有圖標(biāo)都采用相同的尺寸就能達(dá)到平衡，由于圖標(biāo)的體量不同，相同尺寸下不同體量的圖標(biāo)視覺(jué)平衡也不相同，例如相同尺寸的正方形會(huì)比圓形顯得大。因此，我們需要根據(jù)圖標(biāo)的體量對(duì)其大小做出相應(yīng)的調(diào)整。
03、優(yōu)化你的分割線
界面設(shè)計(jì)中往往細(xì)節(jié)的處理最容易被忽略，根據(jù)界面配色的不同，我們?cè)诜指罹€色彩的選擇上面也要做出相應(yīng)的調(diào)整。由于分割線的作用是區(qū)分上下信息層級(jí)和界面裝飾，配色的表現(xiàn)力要低于文字信息的力度，通常我們會(huì)選擇淺色而否定深色，這樣界面會(huì)更加簡(jiǎn)潔通透。深色的分割線要慎用，除非在一些特定的產(chǎn)品場(chǎng)景下。
04、合理的運(yùn)用投影的顏色與透明度
通過(guò)對(duì)按鈕、卡片等進(jìn)行投影運(yùn)用可以增強(qiáng)立體感與層次感。我們?cè)谥谱魍队皶r(shí)，需要根據(jù)不同背景改變投影的顏色、透明度。
淺色背景下投影的顏色會(huì)選擇拾色器偏左上角的位置和透明度在10%~40%（個(gè)人經(jīng)驗(yàn)）之間進(jìn)行調(diào)整。深色背景下投影的顏色會(huì)選擇拾色器偏右下角的位置和透明度在20%~40%（個(gè)人經(jīng)驗(yàn)）之間進(jìn)行調(diào)整。
投影的權(quán)重要符合頁(yè)面設(shè)計(jì)的氛圍，投影的運(yùn)用是為了增強(qiáng)元素的立體感與層次感，而不是影響整個(gè)頁(yè)面的視覺(jué)平衡。
05、不要過(guò)度裝飾，讓界面更簡(jiǎn)潔
設(shè)計(jì)需要準(zhǔn)確的把握“度”，過(guò)度的設(shè)計(jì)會(huì)干擾信息的傳達(dá)。減少不必要的設(shè)計(jì)元素，讓信息脫引而出，整個(gè)界面將會(huì)更加簡(jiǎn)潔清爽，也不會(huì)分散用戶的注意力。
06、圖片比例&視平線的統(tǒng)一性
在人物展示的設(shè)計(jì)中，如果并列出現(xiàn)多個(gè)人物形象，為了保持視覺(jué)平衡我們需要調(diào)整并列圖片的大小比例，就像所有角色都是在相同焦距下拍攝的。在人物上下位置的調(diào)整上面我們要盡量控制視平線的方向，讓他們的眼睛處于相同的位置左右。
07、控制好界面中的配色數(shù)量
一個(gè)界面中出現(xiàn)3種左右的配色是相對(duì)比較容易把控的，如果超過(guò)3種以上的配色，是非常考驗(yàn)設(shè)計(jì)師功底的，如果顏色的處理不到位就會(huì)出現(xiàn)五彩斑斕的“視覺(jué)盛宴”。
在選擇配色組合時(shí)，使用相似色的配色方案可以使顏色更加協(xié)調(diào)和交融；如果希望更鮮明地突出某些元素，對(duì)比色是不錯(cuò)的選擇。無(wú)論選擇何種配色方案，都要控制好界面中的配色比重，使信息傳達(dá)不受干擾。
08、合理的進(jìn)行設(shè)計(jì)對(duì)比
通過(guò)對(duì)比可以讓信息模塊更加獨(dú)立，界面層級(jí)關(guān)系更加豐富。案例中以不同的背景顏色區(qū)分不同的信息模塊，提升了整個(gè)界面的節(jié)奏感。顏色的選擇可以是同色系中不同明度的梯度表現(xiàn)，也可以選擇不同色相的穿插搭配。
09、提高配圖的質(zhì)量
圖片的質(zhì)量影響著整個(gè)界面的格調(diào)，現(xiàn)在越來(lái)越多的產(chǎn)品都會(huì)對(duì)圖片進(jìn)行美化后再展現(xiàn)給用戶，目的就是為了提升產(chǎn)品在用戶心中的印象。我們?cè)谠O(shè)計(jì)提案的時(shí)候?qū)ε鋱D的選擇也要精挑細(xì)選，通過(guò)后期裁剪、曲線調(diào)整、色彩調(diào)整等技法使相同模塊的配圖視覺(jué)效果更加協(xié)調(diào)。
信息傳達(dá)型問(wèn)題
10、明確表達(dá)圖標(biāo)的含義
去掉圖標(biāo)文案之后界面會(huì)顯得更“逼格”，可是你確定用戶能看懂圖標(biāo)表達(dá)的含義嗎？我們?cè)谶M(jìn)行界面設(shè)計(jì)時(shí)，圖標(biāo)是為了輔助說(shuō)明文案所傳達(dá)的信息，如果去掉文案信息，那么需要圖標(biāo)本身帶有很強(qiáng)的信息傳達(dá)能力，確保用戶能正確的識(shí)別。
11、正確的表達(dá)按鈕屬性
按鈕的設(shè)計(jì)必須要清晰準(zhǔn)確的傳達(dá)出當(dāng)前狀態(tài)，不能為了視覺(jué)效果而帶給用戶錯(cuò)誤的判斷，例如深灰色的按鈕用戶會(huì)理解為是禁用狀態(tài)而放棄點(diǎn)擊。
通過(guò)按鈕的顏色、大小、風(fēng)格等來(lái)引導(dǎo)用戶進(jìn)行操作，需要強(qiáng)化的就要做得突出，不要整個(gè)界面都處于主次不明的狀態(tài)，分散用戶的注意力，削弱了界面需要傳達(dá)的主旨。
12、正確處理文字排版的層級(jí)關(guān)系
工作中我們拿到的需求總會(huì)出現(xiàn)大篇幅的文案，不能像概念設(shè)計(jì)那樣任性的刪減，在進(jìn)行文字排版的時(shí)候，正確的處理信息之間的層級(jí)關(guān)系將會(huì)提高用戶對(duì)信息的識(shí)別度。我們通常會(huì)通過(guò)字體大小、顏色、留白、層級(jí)分割等技巧來(lái)處理，把相同屬性的信息歸類設(shè)計(jì)，通過(guò)留白的不同達(dá)到層級(jí)的區(qū)分，讓整個(gè)信息排列主次分明，層級(jí)清晰。
13、線條與色塊分割的合理運(yùn)用
線條通常用于分割同一類別或擁有相同屬性的元素；而色塊更多的是用于分割不同類別或者區(qū)分不同屬性的元????素，以達(dá)到層次清晰，歸類明確的目的。我們?cè)谶x擇分割形式的時(shí)候要根據(jù)信息之間的關(guān)系作出明確的表達(dá)，不可為了視覺(jué)效果而盲目的穿插運(yùn)用。
14、要提前預(yù)估信息呈現(xiàn)的最大值
在進(jìn)行界面布局時(shí)，明確信息呈現(xiàn)的最大值，而不是取最小值進(jìn)行設(shè)計(jì)。過(guò)于理想的長(zhǎng)度范圍也許界面樣式更美觀，可是落地之后就會(huì)給用戶帶來(lái)非常糟糕的體驗(yàn)。
15、運(yùn)用提示符提高用戶的閱讀效率
在大篇幅的文字信息布局中，合理的運(yùn)用提示符會(huì)提高用戶對(duì)信息的理解和快速找到需要的信息。提示符可以是數(shù)字、字母、圖形、色塊等等，只要能有效的區(qū)分信息層級(jí)即可。
16、布局層次分明，重點(diǎn)突出
好的界面布局是為了更好的引導(dǎo)用戶閱讀和操作，界面布局要有層次和重點(diǎn)，而非簡(jiǎn)單的將信息進(jìn)行羅列。通過(guò)卡片模塊的區(qū)分和大小的變化可以很好的進(jìn)行視覺(jué)引導(dǎo)，大大提高用戶對(duì)界面的理解，從而提高用戶的操作效率。
17、信息布局符合閱讀習(xí)慣
從左到右，從上到下的進(jìn)行閱讀是我們已有的習(xí)慣，如果你要打破這個(gè)習(xí)慣進(jìn)行視覺(jué)表現(xiàn)，會(huì)承受挑戰(zhàn)用戶體驗(yàn)的強(qiáng)大壓力。
概念表達(dá)型問(wèn)題
18、相同界面下圓角&直角的統(tǒng)一性
在同一個(gè)界面設(shè)計(jì)中，圓角&直角的選擇要更加統(tǒng)一的出現(xiàn)在界面中，不要出現(xiàn)混合運(yùn)用造成視覺(jué)表達(dá)不一致。如果選擇圓角作為視覺(jué)語(yǔ)言，統(tǒng)一相同模塊下圓角的大小，不可出現(xiàn)大小不一致的情況，讓整個(gè)界面設(shè)計(jì)的視覺(jué)語(yǔ)言更加規(guī)范統(tǒng)一。
19、設(shè)計(jì)元素的表達(dá)符合用戶心理
設(shè)計(jì)是為了更好的幫助用戶理解界面的操作邏輯，如果你的設(shè)計(jì)改變了用戶的心理與習(xí)慣，可能會(huì)增加用戶的學(xué)習(xí)成本或者被用戶拋棄。我們?cè)谶M(jìn)行界面設(shè)計(jì)的時(shí)候，如果要設(shè)計(jì)一些創(chuàng)新的操作規(guī)則，需要做更多的調(diào)研和測(cè)試，確保這個(gè)規(guī)則符合用戶的心理。
20、設(shè)計(jì)表達(dá)的一致性
相同的信息模塊采用統(tǒng)一的設(shè)計(jì)表達(dá)，不要為了變化而加強(qiáng)用戶的理解。前后信息設(shè)計(jì)的多樣性也許在視覺(jué)上面更加豐富，可是用戶會(huì)理解為這是兩個(gè)不同的模塊，操作會(huì)不會(huì)也不同，無(wú)形中就增加了用戶的思考時(shí)間和學(xué)習(xí)成本。
21、別把網(wǎng)頁(yè)的習(xí)慣帶到APP設(shè)計(jì)中
網(wǎng)頁(yè)與APP的設(shè)計(jì)在本質(zhì)上面有很多不同的視覺(jué)表現(xiàn)規(guī)則，我們?cè)谠O(shè)計(jì)APP界面的時(shí)候要脫離網(wǎng)頁(yè)的一些交互習(xí)慣，回歸到移動(dòng)用戶的習(xí)慣中，讓界面的操作邏輯更加順暢。
22、讓表單設(shè)計(jì)更簡(jiǎn)潔
表單設(shè)計(jì)在界面中隨處可見(jiàn)，看到一望無(wú)際的表單用戶總是望而卻步。為了緩解用戶的這種心理活動(dòng)，我們?cè)O(shè)計(jì)的時(shí)候通常會(huì)通過(guò)合并歸納相同屬性的表單，采用逐步填寫來(lái)讓用戶感覺(jué)內(nèi)容很少，通過(guò)這樣的視錯(cuò)覺(jué)讓用戶完成表單的填寫。
23、空界面中插畫的運(yùn)用
為了提高APP的情感化設(shè)計(jì)，插畫的運(yùn)用也開始越來(lái)越普遍。在空界面的一些設(shè)計(jì)中也由以前的純文字轉(zhuǎn)變?yōu)橐恍?yīng)景的插畫表現(xiàn)，帶給用戶更多的愉悅感。
24、運(yùn)用真實(shí)的信息填充你的設(shè)計(jì)
經(jīng)?？吹揭恍┰O(shè)計(jì)稿整個(gè)界面都是一樣的配圖，胡亂輸入的文案，看起來(lái)顯得非常的不專業(yè)。為了降低視覺(jué)落地的差值，我們?cè)谠O(shè)計(jì)的時(shí)候盡量運(yùn)用真實(shí)有效的信息去填充我們的設(shè)計(jì)稿，在提案的時(shí)候才能給決策者一個(gè)還原真實(shí)場(chǎng)景的有效方案。
APP設(shè)計(jì)還有很多需要設(shè)計(jì)師注意的細(xì)節(jié)，這里就不一一列舉。很多理論來(lái)源于書籍和項(xiàng)目經(jīng)驗(yàn)，希望與你共勉。
設(shè)計(jì)是一條很漫長(zhǎng)的路，沒(méi)有任何結(jié)論是一成不變的，作為互聯(lián)網(wǎng)時(shí)代下的設(shè)計(jì)師，我們要不斷的反思總結(jié)，打破常規(guī)與束縛，接受更多新的元素，做出更加符合這個(gè)時(shí)代下的設(shè)計(jì)作品。
最后希望我的總結(jié)能對(duì)你有所幫助，不足之處希望留言指正。
作者：黎波（黑馬青年），現(xiàn)網(wǎng)易UEDC資深視覺(jué)設(shè)計(jì)師
本文來(lái)源于人人都是產(chǎn)品經(jīng)理合作媒體@網(wǎng)易UEDC，作者@黎波
??
學(xué)習(xí)了，順便問(wèn)一下，有哪些書籍會(huì)對(duì)設(shè)計(jì)規(guī)范有比較系統(tǒng)的講解？
書籍貌似比較少，一般都是看企業(yè)的開源規(guī)范的，常見(jiàn)的iOS、Android、MacOS、Win都有系統(tǒng)性規(guī)范，也是設(shè)計(jì)師應(yīng)該爛熟于心的東西。或者去看一些DPL，也是很有幫助。
有了這個(gè)，以后就能手撕UI了， ?? 嘿嘿嘿
這排版閱讀起來(lái)真累。。
蟹蟹。受益很多。把設(shè)計(jì)分成【視覺(jué)表現(xiàn)】【信息傳達(dá)】【概念表達(dá)】，很方便理解
都是工作中會(huì)遇到很細(xì)節(jié)的點(diǎn)，總結(jié)的很贊。
樓主有相關(guān)的書籍介紹嗎？ ?? 最近也需要做一些項(xiàng)目總結(jié)，老大希望輸出文檔的形式
最近有人出過(guò)一本《零基礎(chǔ)學(xué)UI》，但相對(duì)比較淺顯。不知道你要哪個(gè)層面的哪個(gè)方向的書籍？
這些細(xì)節(jié)總結(jié)得很到位，贊
網(wǎng)易的東西確實(shí)越做越好看了。
剛在dribble 看著閣下的作品。看文章的時(shí)候 還在想是誰(shuí)盜用別人的作品。 看完原來(lái)是本尊
??
好幾張示例圖我都沒(méi)有看出差異，是我自己沒(méi)看出來(lái)還是坐著上傳了一樣的圖？
細(xì)節(jié)有微小差異
圖片“下面”文字 是解釋。 你可能看混了。這也是作者的問(wèn)題。 作者應(yīng)該把數(shù)字放在圖片上面。文字放在圖片下面。 也不影響閱讀。 有些弄巧成拙的意思
嘻嘻，沒(méi)有一模一樣的圖，應(yīng)該看錯(cuò)了
哈哈，是我看的不仔細(xì)呢
0.1統(tǒng)一的圖標(biāo)設(shè)計(jì)風(fēng)格：
對(duì)于這個(gè)案例中的第二種方案，沒(méi)有必要強(qiáng)調(diào)一定要按照統(tǒng)一的風(fēng)格來(lái)進(jìn)行強(qiáng)制設(shè)計(jì)：
1.來(lái)增加產(chǎn)品視覺(jué)上的活潑性；2.使用不同的色彩來(lái)強(qiáng)調(diào)功能欄目的主次強(qiáng)弱；
（過(guò)度的強(qiáng)制只會(huì)導(dǎo)向用戶理解為“偏執(zhí)”而非合理）
06、圖片比例&視平線的統(tǒng)一性
如果僅是通過(guò)設(shè)計(jì)出來(lái)的頁(yè)面來(lái)進(jìn)行展示，讓人物聚焦的方式確實(shí)更好看，但若從技術(shù)實(shí)現(xiàn)的角度來(lái)看，人物頭像聚焦則無(wú)法控制（由統(tǒng)一的尺寸規(guī)范的圖片會(huì)好些）；
然后，這篇文章是干貨，若有清晰的結(jié)構(gòu)劃分的話更方便閱讀。點(diǎn)個(gè)贊！
01. 一般來(lái)說(shuō)這種“原則”性質(zhì)的總結(jié)，都是限定大范圍，不排除小范圍。不遵從這些建議也可以做出好設(shè)計(jì)，只是說(shuō)遵從這些建議一般做出的設(shè)計(jì)都不會(huì)太差。
06. 這里只是舉例啦，技術(shù)上的限制一定是要考慮在內(nèi)的。只是設(shè)計(jì)本身應(yīng)該指引一個(gè)方向，技術(shù)是約束條件。另外，在有些場(chǎng)景中，也不是說(shuō)所有的人像都無(wú)法控制圖片來(lái)源，還是有很多人像是設(shè)計(jì)師自己處理的，比如運(yùn)營(yíng)活動(dòng)這類自定義的頁(yè)面。
??