Sketch APP UI 10天特訓(xùn) - 1

Sketch 特訓(xùn) - 1

最近思考如何針對(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ì)探索思路:

  1. Grid layout
  2. Vertical rhythm
  3. 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.

12 px grid layout

使用 Grid 的時(shí)候并闲,Horizontal 方向上细睡,盡量讓元素貼著網(wǎng)格。Vertical 方向上帝火,盡量讓元素的 x-height 貼著網(wǎng)格溜徙。從而保證視覺間隔上的統(tǒng)一。

Gird layout

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.

Modularscale

我的默認(rèn)文字大小是 14px, 比例是 1.3冕广,行高默認(rèn)是 1.3疏日,所以上一級(jí)文字大小是 18px.

Vertical Rhythm

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í)顏色:

  1. 3D2E56溯饵, 87%
  2. 3D2E56侵俗, 54%
  3. 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枚钓,整體上看起來更平衡。

優(yōu)化

展示

添加個(gè)背景和圓角瑟押,就可以作為展示了搀捷。

展示

總流程

Design flow

數(shù)據(jù)總結(jié)

  1. 12px grid
  2. 1.3 vertical rhythm
  3. 14/1.3 base font size
  4. 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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市多望,隨后出現(xiàn)的幾起案子嫩舟,更是在濱河造成了極大的恐慌,老刑警劉巖怀偷,帶你破解...
    沈念sama閱讀 223,002評(píng)論 6 519
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件家厌,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡椎工,警方通過查閱死者的電腦和手機(jī)饭于,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,357評(píng)論 3 400
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來维蒙,“玉大人掰吕,你說我怎么就攤上這事∧疚鳎” “怎么了畴栖?”我有些...
    開封第一講書人閱讀 169,787評(píng)論 0 365
  • 文/不壞的土叔 我叫張陵随静,是天一觀的道長(zhǎng)八千。 經(jīng)常有香客問我,道長(zhǎng)燎猛,這世上最難降的妖魔是什么恋捆? 我笑而不...
    開封第一講書人閱讀 60,237評(píng)論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮重绷,結(jié)果婚禮上沸停,老公的妹妹穿的比我還像新娘。我一直安慰自己昭卓,他們只是感情好愤钾,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,237評(píng)論 6 398
  • 文/花漫 我一把揭開白布瘟滨。 她就那樣靜靜地躺著,像睡著了一般能颁。 火紅的嫁衣襯著肌膚如雪杂瘸。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,821評(píng)論 1 314
  • 那天伙菊,我揣著相機(jī)與錄音败玉,去河邊找鬼。 笑死镜硕,一個(gè)胖子當(dāng)著我的面吹牛运翼,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播兴枯,決...
    沈念sama閱讀 41,236評(píng)論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼血淌,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了念恍?” 一聲冷哼從身側(cè)響起六剥,我...
    開封第一講書人閱讀 40,196評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎峰伙,沒想到半個(gè)月后疗疟,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,716評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡瞳氓,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,794評(píng)論 3 343
  • 正文 我和宋清朗相戀三年策彤,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片匣摘。...
    茶點(diǎn)故事閱讀 40,928評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡店诗,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出音榜,到底是詐尸還是另有隱情庞瘸,我是刑警寧澤,帶...
    沈念sama閱讀 36,583評(píng)論 5 351
  • 正文 年R本政府宣布赠叼,位于F島的核電站擦囊,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏嘴办。R本人自食惡果不足惜瞬场,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,264評(píng)論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望涧郊。 院中可真熱鬧贯被,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,755評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至幌陕,卻和暖如春桌吃,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背苞轿。 一陣腳步聲響...
    開封第一講書人閱讀 33,869評(píng)論 1 274
  • 我被黑心中介騙來泰國打工茅诱, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人搬卒。 一個(gè)月前我還...
    沈念sama閱讀 49,378評(píng)論 3 379
  • 正文 我出身青樓瑟俭,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國和親契邀。 傳聞我的和親對(duì)象是個(gè)殘疾皇子摆寄,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,937評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容