|
做我們做任何設(shè)計(jì)都離不開(kāi)大小與重復(fù)的運(yùn)用,，這樣能使我們的設(shè)計(jì)更加理性和科學(xué),，經(jīng)得起推敲，那么我們一起來(lái)探討下如何在產(chǎn)品設(shè)計(jì)中運(yùn)用這一方法 為什么大的物體更吸引眼球 如上圖所示,，a球會(huì)比右邊b球更吸引我們?nèi)ラ喿x,，大的物體視覺(jué)重量會(huì)比較大，我們眼球的視覺(jué)方向就自動(dòng)轉(zhuǎn)向他 如上圖所示,，我們保持剛的大小,，把a(bǔ)的透明度改變下，視覺(jué)重量是不是發(fā)生了變化,？WHY,？ 當(dāng)我們把 a 球的視覺(jué)重量降低后，那么即使 b球很小,，他也會(huì)很吸引我們眼球，這是因?yàn)?b球視覺(jué)重量比較大 如上圖所示,，如果兩個(gè)球大小一樣呢,？還是b球會(huì)更吸引我們的眼球，因?yàn)閎球有色光輝第一進(jìn)入我們眼球 我們?cè)诋a(chǎn)品設(shè)計(jì)中如何運(yùn)用這些原理 如上圖數(shù)字所示他們的視覺(jué)重量依次排下來(lái),，最大的是序列 1 最小的是4,，不重要的元素我們可以通過(guò)把它們縮小或者降低透明度來(lái)弱化他們 看個(gè)例子： 重復(fù)在產(chǎn)品設(shè)計(jì)中的運(yùn)用重復(fù)？有沒(méi)有人打了個(gè)問(wèn)號(hào),，看到這個(gè)標(biāo)題,，之前我寫(xiě)了一篇文章叫一致性原則，當(dāng)中有順帶提了下重復(fù),，當(dāng)時(shí)說(shuō)的不太詳細(xì),，今天再來(lái)仔細(xì)重溫下。 重復(fù)的重要性,，能使產(chǎn)品的設(shè)計(jì)更加有節(jié)奏和高品質(zhì),，為什么這樣說(shuō)，我們能重復(fù)的原子單位有很多，顏色,，間距,，大小，組件,，圓角值,，功能屬性等等，交互層面能重復(fù)交互操作多頁(yè)面間相同屬性交互要一致 實(shí)例展示重復(fù)間距 上圖設(shè)計(jì)我一共就用了 3 個(gè)間距,。 特殊例子驗(yàn)證： 字里行間在首頁(yè)的板塊設(shè)計(jì)比較松散,，雖然也重復(fù)運(yùn)用了間距，但是沒(méi)有節(jié)奏,。圖片比例也比較奇怪,，多行段落文字顯得比較松散。 結(jié)果： 重復(fù)組件樣式（截圖來(lái)至網(wǎng)易蝸牛讀書(shū)） 上面截圖標(biāo)注出來(lái)的地方,，控件倒角一致,，形成一個(gè)隱形的視覺(jué)基因 下面是反面例子（截圖來(lái)至UC頭條） UC頭條的底部圖標(biāo)設(shè)計(jì)非常圓潤(rùn)，圖標(biāo)設(shè)計(jì)師延續(xù)了品牌 LOGO 鹿的圓潤(rùn)線條,。這里里面的設(shè)計(jì)語(yǔ)言就和底部圖標(biāo)有沖突,，大部分按鈕設(shè)計(jì)無(wú)圓角，尖銳的輪廓（1,、3）,，極少數(shù)按鈕帶有圓角即圖上標(biāo)出來(lái)的 2 4和5欄目圖文樣式的圓角值也是不一致的，整體設(shè)計(jì)不知道想要傳達(dá)什么樣的設(shè)計(jì)語(yǔ)言,。 在仔細(xì)去觀察下 某蝸牛讀書(shū)的 的產(chǎn)品設(shè)計(jì),，設(shè)計(jì)語(yǔ)言從圖片圓角到按鈕，標(biāo)簽,，圖標(biāo)設(shè)計(jì)都是帶有圓角幅度和他們產(chǎn)品logo氣息性格相符合,。 重復(fù)顏色它是什么？就是表示相同操作的功能所表達(dá)的視覺(jué)含義要一致 相同屬性顏色一致,，比如上面來(lái)至 IOS 系統(tǒng)軟件界面截圖,，可點(diǎn)擊地方顏色一致，IOS在這方面的設(shè)計(jì)確實(shí)是非常棒的,，控制的比較好,。 總結(jié)在做界面設(shè)計(jì)時(shí)候需要注意的點(diǎn)：
|
|
|
