翻譯:三步成為 Sketch 大師

翻譯:鎮(zhèn)雷

原文鏈接:Become a Sketch Guru in 3 Easy Steps

最舒適的是什么——是我們的舒適區(qū)从诲!

每個(gè)人都有自己的舒適區(qū)香缺,作為設(shè)計(jì)師强挫,我們會(huì)有四五款應(yīng)用幾乎在睡夢(mèng)里都可以使用死嗦,數(shù)百小時(shí)積累起來的肌肉記憶力肪笋、快捷鍵和令人熟悉的小怪癖會(huì)讓我們?cè)谑褂眠@些應(yīng)用時(shí)就像躺在一個(gè)老舊但是舒適的扶手椅中窒悔。但當(dāng)我們嘗試轉(zhuǎn)換到一個(gè)新工具時(shí)呜袁,總會(huì)覺得它太難用了——至少在最開始的幾個(gè)星期。

面對(duì)這樣的新應(yīng)用蛉迹,誰(shuí)都想直接達(dá)到到高效傅寡、高產(chǎn)、熟練的使用水平北救。所以今天我們就來介紹關(guān)于 Sketch 的三個(gè)小訣竅荐操,而它們通常只能在經(jīng)驗(yàn)豐富的 Sketch 大師身上才能看到。

Tip#1:做一個(gè)鍵盤快捷鍵的忍者

Sketch 鍵盤快捷鍵設(shè)計(jì)的不能再簡(jiǎn)潔了珍策,大部分時(shí)候我們只需要 command 加上某個(gè)鍵就能實(shí)現(xiàn)目標(biāo)托启,甚至更多時(shí)候只要一個(gè)單鍵就可以(如 A:創(chuàng)建畫板 Artboard)。放心攘宙,在 Sketch 中設(shè)計(jì)時(shí)屯耸,你永遠(yuǎn)不會(huì)把你的手指纏繞在一起拐迁。

不少快捷鍵都非常直觀,或者與 Photoshop 中的同類功能有相同的按鍵疗绣,因此它們也常被忽視——但卻是最使用的一批快捷鍵线召。

單鍵快捷鍵:

A:創(chuàng)建畫板

T:創(chuàng)建文本

V:創(chuàng)建向量

O:創(chuàng)建圓形

R:創(chuàng)建矩形

U:創(chuàng)建圓角矩形


多鍵快捷鍵

Z + 單擊/選區(qū):將屏幕縮小到特定區(qū)域

Enter:對(duì)當(dāng)前選中的圖層啟用編輯模式

Shift + Tab:依次選擇下一個(gè)圖層(上一個(gè)圖層是單按 Tab)

Option + 拖動(dòng)圖層:復(fù)制一個(gè)新圖層并移動(dòng)

Option + 鼠標(biāo)懸停圖層:顯示兩個(gè)圖層之間的距離

Command + 單擊:選中一個(gè)組中的圖層

Command + R:重命名圖層或畫板

Command + Shift + H:顯示/隱藏圖層

Command + 滾輪:縮放頁(yè)面

Command + Shift + E:激活導(dǎo)出模式

Command + Option + C:復(fù)制圖層樣式

Command + Option + V:粘貼圖層樣式

究竟哪些快捷鍵是重要的,最終還是取決于你的工作環(huán)境與工作內(nèi)容多矮,如果你想更多地了解 Sketch 的快捷鍵缓淹,Jean-Marc Denis 提供了一個(gè)列表:Sketch Keyboard Shortcuts

Tip#2:細(xì)心整理頁(yè)面和畫板

如果使用 Sketch 來繪制用戶界面,相信經(jīng)常需要?jiǎng)?chuàng)建某個(gè)頁(yè)面的多個(gè)其他樣式塔逃,用以解釋讯壶、展示這個(gè)頁(yè)面上的交互動(dòng)作與效果。一般 2-10 個(gè)畫板足以描繪一個(gè)頁(yè)面湾盗,具體要視頁(yè)面中動(dòng)態(tài)內(nèi)容的數(shù)量而定伏蚊。

創(chuàng)建一個(gè)新的畫板(如果你忘了怎么做:CMD + A),它會(huì)直接出現(xiàn)在最后一個(gè)已有畫板的右側(cè)格粪,所以他們大約是一個(gè)100px 間距的隊(duì)列躏吊。但也許你根本不希望畫板按照這種形式排列,比如打算按照坐標(biāo)軸方向進(jìn)行畫板放置匀借。

最整潔的界面組織順序應(yīng)當(dāng)是從左到右颜阐,或者從桌面到移動(dòng)端,讓所有界面都排列在一條新的線上吓肋。你所要做的凳怨,就是將每個(gè)界面的那些畫板整齊地?cái)[放在水平或垂直方向。

當(dāng)打算設(shè)計(jì)一個(gè)全新的網(wǎng)頁(yè)時(shí)是鬼,你可以在 Sketch 創(chuàng)建一個(gè)新的 Page肤舞,在圖層管理器的頂部點(diǎn)擊「+」號(hào)即可【郏可以發(fā)現(xiàn)李剖,右鍵點(diǎn)擊 Page 并且選擇復(fù)制后,可以快速?gòu)?fù)制所有的畫板尺寸以及通用元素囤耳,刪除起來也很方便篙顺。

一個(gè) Sketch 文件應(yīng)當(dāng)包含整個(gè)網(wǎng)站設(shè)計(jì),每個(gè)頁(yè)面應(yīng)該分配到不同的 Page 中充择,而這些 Page 里德玫,水平方向的畫板放置的是不同的頁(yè)面,垂直方向的畫板則擺放了這些頁(yè)面各自的動(dòng)態(tài)內(nèi)容呈現(xiàn)椎麦。

(譯者注:這里翻譯得有點(diǎn)生硬宰僧,簡(jiǎn)單解釋一下。一般設(shè)計(jì)時(shí)观挎,除了每個(gè)頁(yè)面的主要視覺以外琴儿,還需要展示這些頁(yè)面在特定情況下的呈現(xiàn)樣式段化,比如知乎主頁(yè)除了 Timeline 以外,還要繪制出點(diǎn)贊的界面造成、評(píng)論的頁(yè)面显熏、懸停查看用戶信息的頁(yè)面等。本文建議設(shè)計(jì)師把不同的功能放置到不同的 Page 中谜疤,在每個(gè) Page 里佃延,橫向擺放不同的界面主視覺,而縱向則繪制每個(gè)主視覺中不同操作下所得到的視覺效果夷磕。)

Tip#3:保持干燥——活用樣式和符號(hào)

(Photo credit: m01229)

這可不是最新止汗劑的廣告。這里干燥(DRY)所指的是「Don't Repeat Yourself」的縮寫仔沿,也就是不要讓自己重復(fù)坐桩。此處的概念和編程中創(chuàng)建函數(shù)、類封锉,將會(huì)反復(fù)使用的復(fù)雜功能都規(guī)整起來的做法很類似绵跷。

沒有人想要變得濕漉漉「Wet」——每件事都干兩次「Write Everything Twice」。

共享樣式成福、文字樣式和符號(hào)的操作都很類似碾局,但卻使用于不同的設(shè)計(jì)場(chǎng)景。共享樣式主要用于形狀奴艾,文字樣式主要是用于文字净当,而符號(hào)則作用于圖層組。使用它們的目的是將這些樣式統(tǒng)一命名蕴潦,以便未來可以重復(fù)使用像啼。如果你熟悉 CSS,這和其中的 classes 是很類似的潭苞。

共享樣式與形狀無(wú)關(guān)忽冻,比如我們創(chuàng)建一個(gè)矩形,生成共享樣式后并將其命名為「按鈕」此疹,我們就可以將這種樣式應(yīng)用到其他沒有樣式的矩形上僧诚,使得它們成為一個(gè)新的「按鈕」,而如果應(yīng)用到一個(gè)圓形或者多邊形上蝗碎,一樣可以使得它們成為一個(gè)該樣式的「按鈕」湖笨。共享樣式可以在檢查器(右邊)中應(yīng)用和移除,文字樣式和符號(hào)也與之類似衍菱。

符號(hào)略微有些區(qū)別赶么,主要在于其一并共享了形狀、尺寸和位置等信息脊串,并且作用于整個(gè)圖層組辫呻,包含了其中所其他共享樣式和文字樣式清钥。

如果你調(diào)整了一個(gè)符號(hào)圖層組的尺寸,所有其中的內(nèi)容都會(huì)被縮放放闺;如果修改祟昭、新增一個(gè)新的圖層到這個(gè)符號(hào)中,所有共享這個(gè)符號(hào)的圖層組中也都會(huì)修改或新增這個(gè)新圖層怖侦〈畚颍總而言之,如果你的設(shè)計(jì)用到了很多模塊化的內(nèi)容匾寝,符號(hào)功能是非常非常實(shí)用的搬葬。

總結(jié)

書上得來終覺淺,所有的操作不試試怎么能深刻理解呢艳悔,所以打開 Sketch 來實(shí)際操作看看吧急凰。如果你是一個(gè) Logo 或界面設(shè)計(jì)師,這三個(gè)技巧會(huì)幫你用光速成為 Sketch 大師的猜年。沒有人想離開他們的舒適區(qū)抡锈,但是離開那些熟練軟件(Photoshop、AI等)一兩個(gè)小時(shí)乔外,下載 Sketch 試試床三,你會(huì)愛上它的。

作者 Daniel Schwarz 是一名設(shè)計(jì)師和開發(fā)者杨幼,目前正和他的妻子世界旅行撇簿,體驗(yàn)最棒的游歷生活。Daniel 是Digital Art Inspiration & Designer News的聯(lián)合創(chuàng)始人推汽、館長(zhǎng)和編輯补疑,同時(shí)還擔(dān)任Airwalk Studios的創(chuàng)意總監(jiān)。對(duì)了歹撒,他還是 Sketch 的粉絲刹泄。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末倦炒,一起剝皮案震驚了整個(gè)濱河市益涧,隨后出現(xiàn)的幾起案子两芳,更是在濱河造成了極大的恐慌,老刑警劉巖迈着,帶你破解...
    沈念sama閱讀 207,248評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件竭望,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡裕菠,警方通過查閱死者的電腦和手機(jī)咬清,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,681評(píng)論 2 381
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人旧烧,你說我怎么就攤上這事影钉。” “怎么了掘剪?”我有些...
    開封第一講書人閱讀 153,443評(píng)論 0 344
  • 文/不壞的土叔 我叫張陵平委,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我夺谁,道長(zhǎng)廉赔,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,475評(píng)論 1 279
  • 正文 為了忘掉前任匾鸥,我火速辦了婚禮蜡塌,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘勿负。我一直安慰自己岗照,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,458評(píng)論 5 374
  • 文/花漫 我一把揭開白布笆环。 她就那樣靜靜地躺著,像睡著了一般厚者。 火紅的嫁衣襯著肌膚如雪躁劣。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,185評(píng)論 1 284
  • 那天库菲,我揣著相機(jī)與錄音账忘,去河邊找鬼。 笑死熙宇,一個(gè)胖子當(dāng)著我的面吹牛鳖擒,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播烫止,決...
    沈念sama閱讀 38,451評(píng)論 3 401
  • 文/蒼蘭香墨 我猛地睜開眼蒋荚,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了馆蠕?” 一聲冷哼從身側(cè)響起期升,我...
    開封第一講書人閱讀 37,112評(píng)論 0 261
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎互躬,沒想到半個(gè)月后播赁,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,609評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡吼渡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,083評(píng)論 2 325
  • 正文 我和宋清朗相戀三年容为,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,163評(píng)論 1 334
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡坎背,死狀恐怖替劈,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情沼瘫,我是刑警寧澤抬纸,帶...
    沈念sama閱讀 33,803評(píng)論 4 323
  • 正文 年R本政府宣布,位于F島的核電站耿戚,受9級(jí)特大地震影響湿故,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜膜蛔,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,357評(píng)論 3 307
  • 文/蒙蒙 一坛猪、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧皂股,春花似錦墅茉、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,357評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至蘑辑,卻和暖如春洋机,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背洋魂。 一陣腳步聲響...
    開封第一講書人閱讀 31,590評(píng)論 1 261
  • 我被黑心中介騙來泰國(guó)打工绷旗, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人副砍。 一個(gè)月前我還...
    沈念sama閱讀 45,636評(píng)論 2 355
  • 正文 我出身青樓衔肢,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親豁翎。 傳聞我的和親對(duì)象是個(gè)殘疾皇子角骤,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,925評(píng)論 2 344

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