首頁技術文章正文

你與資深設計大牛就差這幾點微妙細節(jié)!

更新時間:2018-06-20 來源:黑馬程序員 瀏覽量:

隨著移動優(yōu)先的趨勢,APP的設計也越來越受到公司重視,不斷地提高APP的設計質量是每個設計師的追求,有哪些設計中的細節(jié)被你忽略了呢?讓我們一起來看看這些細節(jié)你都把握住了嗎。

【視覺表現型問題】

一、統(tǒng)一的圖標設計風格

圖標設計在整個APP設計中是比重較大的板塊之一,圖標設計風格有:線性圖標、填充圖標、面型圖標、扁平圖標、手繪風格圖標和擬物圖標等。無論我們選擇何種表現形式的圖標都請保持統(tǒng)一性,相同的模塊采用一種風格的表現形式,如果是線性圖標就保持一致的描邊數值。

圖標在配色上面也要保持有規(guī)律的統(tǒng)一,采用相同顏色是比較常用的配色方式。如果你采用不同色相的配色方式,要保持整體的配色協(xié)調,不要出現飽和度、明度反差過大的配色而影響整體的視覺協(xié)調。

1529473872580_01.jpg

二、圖標大小的視覺平衡

同一個界面出現多個圖標時,我們需要保持整體的視覺平衡。并非是所有圖標都采用相同的尺寸就能達到平衡,由于圖標的體量不同,相同尺寸下不同體量的圖標視覺平衡也不相同,例如相同尺寸的正方形會比圓形顯得大。因此,我們需要根據圖標的體量對其大小做出相應的調整。

1529473878986_02.jpg

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

界面設計中往往細節(jié)的處理最容易被忽略,根據界面配色的不同,我們在分割線色彩的選擇上面也要做出相應的調整。由于分割線的作用是區(qū)分上下信息層級和界面裝飾,配色的表現力要低于文字信息的力度,通常我們會選擇淺色而否定深色,這樣界面會更加簡潔通透。深色的分割線要慎用,除非在一些特定的產品場景下。

1529473884361_03.jpg

四、合理的運用投影的顏色與透明度

通過對按鈕、卡片等進行投影運用可以增強立體感與層次感。我們在制作投影時,需要根據不同背景改變投影的顏色、透明度。

淺色背景下投影的顏色會選擇拾色器偏左上角的位置和透明度在10%~40%(個人經驗)之間進行調整。深色背景下投影的顏色會選擇拾色器偏右下角的位置和透明度在20%~40%(個人經驗)之間進行調整。

投影的權重要符合頁面設計的氛圍,投影的運用是為了增強元素的立體感與層次感,而不是影響整個頁面的視覺平衡。

1529473889596_04.jpg

五、不要過度裝飾,讓界面更簡潔

設計需要準確的把握“度”,過度的設計會干擾信息的傳達。減少不必要的設計元素,讓信息脫引而出,整個界面將會更加簡潔清爽,也不會分散用戶的注意力。

1529473894955_05.jpg

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

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

1529473901002_06.jpg

七、控制好界面中的配色數量

一個界面中出現3種左右的配色是相對比較容易把控的,如果超過3種以上的配色,是非常考驗設計師功底的,如果顏色的處理不到位就會出現五彩斑斕的“視覺盛宴”。

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

1529473907690_07.jpg

八、合理的進行設計對比

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

1529473913893_08.jpg

九、提高配圖的質量

圖片的質量影響著整個界面的格調,現在越來越多的產品都會對圖片進行美化后再展現給用戶,目的就是為了提升產品在用戶心中的印象。我們在設計提案的時候對配圖的選擇也要精挑細選,通過后期裁剪、曲線調整、色彩調整等技法使相同模塊的配圖視覺效果更加協(xié)調。

1529473919471_09.jpg


本文版權歸黑馬程序員視覺設計學院所有,歡迎轉載,轉載請注明作者出處。謝謝!

作者:黑馬程序員視覺設計培訓學院

首發(fā):http://zhongqishi.cn/special/uijpzly/index.html

分享到:
在線咨詢 我要報名
和我們在線交談!