最近思考如何針對(duì)自己的專業(yè),突出自己的設(shè)計(jì)優(yōu)勢(shì)。最后決定在 Sketch 上下一番功夫俯邓。不同 Photoshop缎浇,它專為 UI 設(shè)計(jì)定制化打造扎拣,在 UI 設(shè)計(jì)上有的得天獨(dú)厚的優(yōu)勢(shì)。希望自己能總結(jié)一套自己的使用心得素跺,也歡迎和大家共同探討如何能更好使用 Sketch 來提高設(shè)計(jì)效率二蓝。
有一點(diǎn)需要說明的是,Adobe 的軟件有其自己的特點(diǎn)指厌。當(dāng)你發(fā)現(xiàn) Sketch 在實(shí)現(xiàn)某一效果比較費(fèi)力時(shí)刊愚,不妨就改用 Adobe 的軟件,輸出后再導(dǎo)入 Sketch 即可踩验。沒有最好的設(shè)計(jì)軟件鸥诽,只有不斷改進(jìn)的設(shè)計(jì)方法商玫。
第一期我想自己探索一下基本的設(shè)計(jì)流程,能不能給自己一些定量的指標(biāo)(后期不斷調(diào)整)牡借,用更理性的思維進(jìn)行 UI 設(shè)計(jì)拳昌。
設(shè)計(jì)探索思路:
- Grid layout
- Vertical rhythm
- Color palette
Grid layout
因?yàn)槭?APP 設(shè)計(jì),大部分 APP 是單列的钠龙。相比于 Column layout, Grid 布局個(gè)人覺的更為實(shí)用炬藤。Material Design 給出了參考是 4dp 的網(wǎng)格布局,我比較喜歡更寬松的感覺俊鱼,所以我設(shè)置了 12px
的網(wǎng)格布局刻像。Sketch 提供了方便的網(wǎng)格生成工具,View -> Canvas -> Grid setting.
使用 Grid 的時(shí)候并闲,Horizontal 方向上细睡,盡量讓元素貼著網(wǎng)格。Vertical 方向上帝火,盡量讓元素的 x-height 貼著網(wǎng)格溜徙。從而保證視覺間隔上的統(tǒng)一。
Vertical Rhythm
UI 上一個(gè)很重點(diǎn)的部分就是層級(jí)感犀填,重點(diǎn)內(nèi)容蠢壹,非重點(diǎn)內(nèi)容。從而劃分出一級(jí)文字九巡,二級(jí)文字图贸。給不同層級(jí)文字選擇一個(gè)好的比例就顯得很重要。給大家推薦一個(gè)設(shè)置文字層級(jí)的網(wǎng)站 Modularscale.
我的默認(rèn)文字大小是 14px
, 比例是 1.3
冕广,行高默認(rèn)是 1.3
疏日,所以上一級(jí)文字大小是 18px.
Color Palette
基礎(chǔ)布局完成后,需要根據(jù)你的想法調(diào)整一下顏色撒汉。這方面我還沒有太多經(jīng)驗(yàn)沟优,一般會(huì)選擇一個(gè)主色調(diào),然后根據(jù)視覺感受再選擇一個(gè)強(qiáng)調(diào)色睬辐,還是要多觀察大自然挠阁,多實(shí)驗(yàn)。
這里主色我設(shè)了三級(jí)顏色:
- 3D2E56溯饵,
87%
- 3D2E56侵俗,
54%
- 3D2E56,
23%
不同的透明度用來強(qiáng)調(diào)輔助強(qiáng)調(diào)內(nèi)容的重要性丰刊,藍(lán)灰色總體給人一種高格調(diào)的視覺感坡慌。
然后選擇了玫紅色作為強(qiáng)調(diào)色,提供一下點(diǎn)綴藻三。Tab欄的陰影需使用更淡的主色洪橘,調(diào)一個(gè)和諧的分隔感跪者,這里數(shù)據(jù)是 box-shadow: #3d2e56 5% 0 2px 24px 0
。
優(yōu)化
根據(jù)自己的審美熄求,觀察哪些地方看起來還不是很舒服渣玲,手動(dòng)進(jìn)行微調(diào)。重點(diǎn)是視覺上的平衡感弟晚。這里我放大了部分圖標(biāo)忘衍,使其視覺上更突出,且大小上相對(duì)應(yīng)卿城。同時(shí)調(diào)整了一下 margin枚钓,整體上看起來更平衡。
展示
添加個(gè)背景和圓角瑟押,就可以作為展示了搀捷。
總流程
數(shù)據(jù)總結(jié):
12px grid
1.3 vertical rhythm
14/1.3 base font size
87%, 54%, 23%, 5% color opacity hierarchy
Reference
Dribbble 參考:https://dribbble.com/shots/3455944-App-Travel-2
Meterial Icon: https://material.io/icons/#ic_settings_overscan
Lofter 地址:http://joeyqiang.lofter.com/post/1d7ab360_f5e7bd4