你與資深設(shè)計(jì)大牛就差這幾點(diǎn)微妙細(xì)節(jié)！

更新時(shí)間:2018-06-20 來(lái)源:黑馬程序員瀏覽量:

隨著移動(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)題】

一、統(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)。

二、圖標(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)整。

三、優(yōu)化你的分割線

界面設(shè)計(jì)中往往細(xì)節(jié)的處理最容易被忽略，根據(jù)界面配色的不同，我們?cè)诜指罹€色彩的選擇上面也要做出相應(yīng)的調(diào)整。由于分割線的作用是區(qū)分上下信息層級(jí)和界面裝飾，配色的表現(xiàn)力要低于文字信息的力度，通常我們會(huì)選擇淺色而否定深色，這樣界面會(huì)更加簡(jiǎn)潔通透。深色的分割線要慎用，除非在一些特定的產(chǎn)品場(chǎng)景下。

四、合理的運(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é)平衡。

五、不要過(guò)度裝飾，讓界面更簡(jiǎn)潔

設(shè)計(jì)需要準(zhǔn)確的把握“度”，過(guò)度的設(shè)計(jì)會(huì)干擾信息的傳達(dá)。減少不必要的設(shè)計(jì)元素，讓信息脫引而出，整個(gè)界面將會(huì)更加簡(jiǎn)潔清爽，也不會(huì)分散用戶的注意力。

六、圖片比例&視平線的統(tǒng)一性

在人物展示的設(shè)計(jì)中，如果并列出現(xiàn)多個(gè)人物形象，為了保持視覺(jué)平衡我們需要調(diào)整并列圖片的大小比例，就像所有角色都是在相同焦距下拍攝的。在人物上下位置的調(diào)整上面我們要盡量控制視平線的方向，讓他們的眼睛處于相同的位置左右。

七、控制好界面中的配色數(shù)量

一個(gè)界面中出現(xiàn)3種左右的配色是相對(duì)比較容易把控的，如果超過(guò)3種以上的配色，是非常考驗(yàn)設(shè)計(jì)師功底的，如果顏色的處理不到位就會(huì)出現(xiàn)五彩斑斕的“視覺(jué)盛宴”。

在選擇配色組合時(shí)，使用相似色的配色方案可以使顏色更加協(xié)調(diào)和交融;如果希望更鮮明地突出某些元素，對(duì)比色是不錯(cuò)的選擇。無(wú)論選擇何種配色方案，都要控制好界面中的配色比重，使信息傳達(dá)不受干擾。

八、合理的進(jìn)行設(shè)計(jì)對(duì)比

通過(guò)對(duì)比可以讓信息模塊更加獨(dú)立，界面層級(jí)關(guān)系更加豐富。案例中以不同的背景顏色區(qū)分不同的信息模塊，提升了整個(gè)界面的節(jié)奏感。顏色的選擇可以是同色系中不同明度的梯度表現(xiàn)，也可以選擇不同色相的穿插搭配。

九、提高配圖的質(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)。