當(dāng)前位置: 首頁 > 設(shè)計資訊 > 設(shè)計教程 > 正文

10個幫你UI設(shè)計提速的Sketch使用技巧

2018-01-27 1203 0
編者按:選擇使用Sketch的理由很多,因為好奇跟風(fēng)安裝的同學(xué)應(yīng)該不在少數(shù),看了介紹覺得功能強大而安裝的應(yīng)該也不少。當(dāng)然,如果你是一名UI/網(wǎng)頁設(shè)計師,你的Mac和我一樣感覺跑PS不堪重負(fù),那么Sketch絕對能幫你排憂解難,從此告別卡頓和無所不在的進(jìn)度條。 越來越多的設(shè)計師開始選擇使用Sketch 設(shè)計網(wǎng)頁、UI了,開發(fā)團(tuán)隊 Bohemian Coding 居功至偉。雖然這個還在不斷迭代的軟件還有不少Bug,并且在功能上尚未完全替代PS,但是已然可以逐漸降低使用PS這款臃腫軟件的頻率了。如果你想知道你是否適合使用Sketch,可以看看兩大軟件的對比:《巔峰對決!新晉神器SKETCH VS. 經(jīng)典老炮PHOTOSHOP》。 上手新軟件,許多功能都不太就手,設(shè)計一個界面可能會比在PS上耗費更多的時間。所以,掌控一些實用的小技巧就非常重要了。哪怕你是Sketch新手,下面的10個小技巧也能幫你節(jié)省不少時間。

1、為畫板選擇合理尺寸
artboard2 好吧好吧,看起來這并不是太高端的技巧,但是在Sketch中,畫板的設(shè)定非常實用也非常易用。Sketch 中提供了非常多預(yù)設(shè)的畫板尺寸(要不怎么說它是UI設(shè)計神器呢?這個軟件就是為UI設(shè)計而生的啊?。?,你只需要點擊A按鍵,就可以選擇你需要的畫板了!

2、搞定柵格
layout 借助柵格系統(tǒng)來設(shè)計UI和網(wǎng)頁是經(jīng)常用到的技巧,在Sketch中,你只需要選擇 View(視圖) -> Layout Settings (布局設(shè)置) 就可以快速配置布局,或者使用Ctrl+L 這個快捷鍵來調(diào)用默認(rèn)的布局。

3、幾秒內(nèi)快速復(fù)制……任何東西!
duplicate2 這一功能在AI和PS中常常使用,Sketch的開發(fā)者將這一功能也完全實現(xiàn)在這一軟件中。你可以按住Option鍵,點擊要復(fù)制的元素拖動就可以。當(dāng)你將這一元素拖拽到你要的區(qū)域之后,然后使用Command+D的快捷鍵,就可以復(fù)制這一動作了。 注意:如果你發(fā)覺無法操作的話,可以去Preferences (偏好設(shè)置)-> Layers(圖層)中解鎖 pasted & duplicated objects (粘貼&復(fù)制 對象)這一選項。

4、距離測算
measurement2 如果你想設(shè)計出精美的作品,那么一定要對所有的細(xì)節(jié)了如指掌。如果你想測量頁面上所有元素之間的距離,只需要選定元素,按住Option鍵就可以。接下來,就是屬于你自己的強迫癥時間了~

5、善用共享樣式,你會獲益匪淺的
styles 如果你的這個項目有一百多個頁面,并且項目的評審已經(jīng)推進(jìn)到第三輪了。眼看著終止日期要到了,奇葩甲方深夜打電話給你:“咱們把所有的按鈕都改成藍(lán)色的咋樣?” 好吧,先不要忙著掀桌子砸電話罵娘,你可以說“OK”的,因為你可以使用共享樣式來搞定這些按鈕。當(dāng)你在創(chuàng)建你這些UI元素的時候,對于那些要重復(fù)使用的樣式,你可以在左側(cè)菜單中點擊“No Shared Style”調(diào)出菜單,然后給這個樣式起一個難忘的名字,然后就可以運用到更多的UI中去了。

6、”濫用”符號(Symbols)
symbols2 符號,也就是Symbols 是Sketch 中一個非常實用的功能,盡管看起來有點濫用的趨勢,但是它確實非常有用。 如果你設(shè)計的UI上有許多不同的狀態(tài)、模式或者選項,那么你可以將單個屏幕設(shè)定為一個“符號”,然后單擊工具欄中的 “轉(zhuǎn)化為符號(Convert to Symbol)按鈕”,再在畫板上復(fù)制這一“符號”,并且創(chuàng)建你所需要的不同狀態(tài),唯一需要做的就是添加你設(shè)定的這個符號(Insert -> Symbol)。當(dāng)你改變這個符號中的元素的時候,所有的屏幕會同時跟著更新,絕對夠快捷。

7、繪制圖形時拖拽它們
drag2 這是一個超級實用的技巧。當(dāng)你在繪制圖形的時候,比如你要畫一個圓形,但是你很難一次畫好并放置在正確的位置。不過,如果你在繪制過程中按住空格按鍵,那么你就可以在創(chuàng)建好之后立刻移動它到對的位置,然后繼續(xù)調(diào)整尺寸。

8、飛速改變透明度
transparency 這一功能應(yīng)該也是來源于PS,盡管很多人并不太去使用它。當(dāng)你要調(diào)整一個元素的透明度的時候,不用去慢慢調(diào)節(jié)進(jìn)度條,你只需要使用數(shù)字按鍵(1-0)來設(shè)定透明度,比如3就是30%透明度。

9、善用“比例(Scale)”功能
scale2 很多時候,你在創(chuàng)建的UI元素并不一定符合需求,大了或者小了都很正常。比如你設(shè)置了一個邊緣半徑20px、邊框4px的按鈕,如果你直接鼠標(biāo)拖拽縮放,效果恐怕不會理想。如果你點擊“比例(Scale)”按鈕,這樣來調(diào)整,效果會好很多。

10、最大限度地利用你的工作空間
maximize-space 大家都扛著筆記本干活兒,但是幾乎所有的軟件在筆記本上顯示的時候,都感覺屏幕空間不夠,但又不是所有時候都正好有個屏幕在旁邊幫你輸出屏幕內(nèi)容,這個時候,就需要你善用屏幕空間了。如果你要隱藏左右兩邊的菜單欄,點擊Ctrl+Option+Cmd+3 組合鍵,如果要單獨隱藏左邊或者右邊,快捷鍵是Ctrl+Option+Cmd+1 和Ctrl+Option+Cmd+2 。


8
評論區(qū)(0)
正在加載評論...