最近思考如何針對(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 grid1.3 vertical rhythm14/1.3 base font size87%, 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
