為什么你做的設計都不咋好看?
編輯導語:在設計中,美觀是非常重要的一項,對于用戶來說,在使用產(chǎn)品時的第一感受就來自外觀,所以產(chǎn)品各種的各種設計出了注意功能以外,更要注意外觀的設計;本文作者分享了關(guān)于圖標設計的一些細節(jié),我們一起來了解一下。
很多同學經(jīng)常會問設計不精致怎么辦?今天就拿大公司的一個圖標舉例,爭取每個細節(jié)點你們都能get,并在項目中使用。下面我們就聊下圖標設計細節(jié),圖標尺寸以及對于頭像處理的小細節(jié),希望可以幫助到你。
一、圖標比例保持體量統(tǒng)一
這個頁面相信大家都平時工作中會做到,有很多圖標放在一起,里面可能是一些常用菜單,這個設計有什么問題呢?相信看在這里小伙伴腦海里有無數(shù)答案?不統(tǒng)一,還是什么?我們來分析下:
首先從大家關(guān)心的統(tǒng)一性來說,沒有任何問題,圖形都是在規(guī)范的圖標柵格里面,也非常的統(tǒng)一,那么問題出在哪里?
仔細觀察,會發(fā)現(xiàn)「聯(lián)系人」和「歷史消息」的圖標過于飽滿,雖然它們尺寸一樣,但是比「最近使用」這個圖標要大很多,因為后面這兩個圖標過于的飽滿。從視覺來說它們的重量太重了,所以看起來會比較大。
在做設計時候,如遇圖標比較瘦長或者圓形等不夠飽滿的情況,請酌情將圖標撐滿像素,來保證整體一致的視覺體量感。
如果圖標語義較飽滿的情況下,可使用微縮,來保證整體一致的視覺體量感。文中案例之所以出現(xiàn)這種情況,是因為沒有定義出圖形體量大小具體的繪制規(guī)則,所以導致圖形過于飽滿看起來和瘦長,會顯得視覺重量不一致。
所以需要對圖形繪制規(guī)則進行優(yōu)化,保證瘦長,或者飽滿的圖形在頁面中體感一致。提供了4個基礎圖形繪制技巧和對應的輔助線參考圖。
在實際應用時,可略微在可變范圍內(nèi)微調(diào),對于過于飽滿的圖形,高度變低時,需要增加寬度來保證視覺重量相等。
這樣調(diào)整后,整體的圖標視覺重量就會更加均衡,也會更加規(guī)則。所以如果你發(fā)現(xiàn)你們產(chǎn)品頁面中圖標大小體量不一樣,或許是因為你忘記對圖標體量進行規(guī)范。
二、圖標尺寸比例怎么定?
圖標在界面中使用場景很多,有時用大圖標,有時用小圖標,該如何去定義小圖標大小,大圖標大小,這時很多同學非常糾結(jié),有時候就亂定,導致頁面沒有秩序感。
第一步,要先去梳理頁面場景,看看哪些地方會用到圖標,全部把場景列出來。
列出來,然后根據(jù)APP設計的最小單元的倍數(shù)來定義圖標風格,比如支付寶最小單元是4,所有間距都是4的倍數(shù),那么在圖標這里,也是同樣的原則,全部的圖標尺寸,根據(jù)4的倍數(shù)去定義幾種大小,比如24X24,32X32,44X44,56X56,72X72等等,如果頁面中不夠用,同樣的在4的倍數(shù)基礎上進行新增。
三、圖標放大后,線條粗細該如何定義?
我相信大家都有這種情況,一組圖標在使用時候,會出現(xiàn)在各個場景,這個時候需要放大,甚至縮小,但是不知道放大后圖標粗細該如何確定,直接放大,直接縮小會出現(xiàn)圖標的細節(jié)粗細有問題,那么該如何處理呢?
第一步:需要確定圖標大小和線條比例,以支付寶為例,首先要確定圖標大小和線條粗細比例為14:1當然每個比例是不一樣的,可以根據(jù)你們產(chǎn)品的調(diào)性去決定,如果圖標比較細,可以設定為10:1,這些都沒有固定標準。
假如圖標需要設計一個140X140的大小,那么圖標粗細就應該是10px。
如果圖標是112尺寸大小,那么按照14:1的比例,那么圖標線條粗細就應該是8px,以此推動,通過這樣的方式來保證圖形的一致性和穩(wěn)定性。
以上三個小點,是絕大多設計師忽略掉的,也是設計中不太注意的細節(jié),但是今天設計的專業(yè)度,設計的細節(jié)程度往往就是由于這些細節(jié)組成,今天這3個技巧,看會了之后,你就可以直接在項目中去運用,希望可以幫助到你。
#專欄作家#
Sky,微信公眾號:我們的設計日記(ID:helloskys),人人都是產(chǎn)品經(jīng)理專欄作家。原支付寶體驗設計專家,阿里巴巴天貓設計專家;10年知名互聯(lián)網(wǎng)公司設計經(jīng)驗,對于產(chǎn)品從0到1、品牌定位、金融產(chǎn)品、設計規(guī)范、運營規(guī)范、大促等有豐富實戰(zhàn)經(jīng)驗。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來自?Unsplash,基于 CC0 協(xié)議
快遞費核對