包含photoshop參考線(xiàn)的詞條

做GUI設計要學(xué)SKETCH？來(lái)看這份超全面的SKETCH使用體驗

Sketch作為一個(gè)為UI設計而生的工具，全矢量、輕量級、像素級精準，非常適合做移動(dòng)端應用類(lèi)的界面設計和簡(jiǎn)單的扁平圖標設計。下文是我通過(guò)一段時(shí)間的使用，對比PS，梳理了Sketch對我們而言的優(yōu)點(diǎn)和痛點(diǎn)，探討了下Sketch對提升工作效率是否有幫助。

它輕巧、優(yōu)雅、高效，三點(diǎn)相輔相成。出道至今已經(jīng)強力地占據了一片設計師市場(chǎng)，經(jīng)常被拿來(lái)跟PS對比。

Part 1 Sketch的八大優(yōu)勢1. 小清新顏值高

簡(jiǎn)潔高效 – 抗干擾

界面簡(jiǎn)潔美好，功能清晰。無(wú)懸浮面板，選擇一個(gè)對象/圖層（objects）就會(huì )展示對應檢查器（inspectors），不會(huì )有PS中處理大文件時(shí)各種開(kāi)關(guān)窗口情況。

▲軟件截圖（全屏）：左側欄為圖層區；右側欄為檢查器區

2. 使用暢快易上手

2.1 無(wú)限畫(huà)布畫(huà)板 – 自由度高

不管有多少畫(huà)布（pages）都被包含在同一個(gè)文檔中，還可以在程序內部進(jìn)行搜索，便于管理大型項目

在一個(gè)畫(huà)布中可以平鋪無(wú)限個(gè)畫(huà)板（Artboard），這樣的全局視野，規劃自由度高，也利于思考界面元素關(guān)系和維護界面設計的一致性，方便各種check。

▲示意文件截圖（局部）：右側為隨意擺放的* 個(gè)畫(huà)板

說(shuō)明：Sketch文檔PageArtboardLayer

在一個(gè)Sketch文檔中可以建立多個(gè)畫(huà)布（Page），畫(huà)布中可以自由放置畫(huà)板（Artboard）。

而每個(gè)元素/對象都作為一個(gè)圖層（layer），以圖層或組（group）的形式安置在artboard中。

2.2 無(wú)冷啟動(dòng)時(shí)間 – 運行快

0啟動(dòng)時(shí)間，也就是沒(méi)有類(lèi)似于PS的啟動(dòng)畫(huà)面，節省了等待時(shí)間

由于多是矢量文件，因此體量小，運行快。

2.* 簡(jiǎn)化操作 – 交互體驗好

操作人性，各種貼心設計，使眼與手在界面設計過(guò)程中更加輕松高效完成工作，上手指數超高。

方便選擇：

1. 上文提到的Sketch中不同面板位置是固定的，選中某個(gè)對象才會(huì )顯示對應的檢查器，不用在眾多屬性窗口中苦苦尋覓

2. 鼠標掠過(guò)畫(huà)布中元素的時(shí)，左側圖層欄會(huì )出現藍色框對對焦到選中的元素

* . 左側分欄可以看到矢量圖形的的縮略圖，不用仔細閱讀面板信息即可準確選擇

▲選中右側元素”BHBH“，左側藍色框自動(dòng)對焦圖層。

簡(jiǎn)而言之，不懂PS/AI的小白上手Sketch完全無(wú)礙。

* . 像素級精準

* .1像素級對齊

Sketch中在編輯路徑時(shí)，可以選擇三種對齊方式——

1. Don’t round to nearest pixels：不自動(dòng)對齊像素：編輯路徑時(shí)可以隨意移動(dòng)節點(diǎn)

2. Round to half pixels：以半像素為單位對齊：可能出現半像素

* . Round to full pixels：以1像素為單位對齊像素：錨點(diǎn)全部像素對齊，避免鋸齒，可以節省設計濕大量微調時(shí)間。

▲三種對齊方式

▲三種對齊方式的說(shuō)明圖 *圖片來(lái)源

* .2數值化編輯

矢量軟件的一大優(yōu)勢就是可以編輯精準，Sketch中可以實(shí)時(shí)調節形狀的半徑/數量等各個(gè)參數，數值化編輯讓設計更加精準和專(zhuān)業(yè)。

基于公式運算的變形：

PS中的標尺和矢量工具都很笨重，比如建立倍數關(guān)系的東西、按黃金分割分配比例、做菲波那切數列圖標什么的都很糾結。

而在Sketch中甚至可以直接完成簡(jiǎn)單運算：

▲像 100 * 1.* + * 0 這樣的運算可以在 Sketch 中進(jìn)行 *圖片來(lái)源

Sketch讓設計師更加關(guān)注數值，更理性有邏輯的去編排布局，而不是隨意拖拽元素。

* . 非破壞性編輯

隨時(shí)調節形狀的半徑/數量：

在PS中如果需改變已建圖形的半徑就要重新建立形狀，而Sketch則可以隨時(shí)編輯。

▲圓角變形就是辣么簡(jiǎn)單 *圖片來(lái)源

隨時(shí)編輯的布爾運算

跟PS和AI一樣，sketch也有吉印通 、相減、相交、差異這些布爾運算。

更方便的地方在于參與運算的子形狀都可以即時(shí)編輯。每個(gè)路徑都可以隨時(shí)修改運算方式和層次等操作，方便管理復雜的形狀組合。

比PS中的合并形狀更具自由度，也更容易理解層級關(guān)系。

▲每層與下一層發(fā)生布爾運算

九宮切片自動(dòng)化

導入位圖文件后可以調整九宮節點(diǎn)，直接實(shí)現九宮變形，節省了人工完成的時(shí)間。

▲九宮編輯

可視化漸變調節

由于是矢量文件，所以實(shí)現了參數可視化，在圖形可以看到直觀(guān)效果。

▲圖形上方即有漸變操作桿直接調節

復制旋轉

可以方便地建立旋轉圖形及編輯中心點(diǎn)。

總覺(jué)得有點(diǎn)酷炫。

圖層樣式可無(wú)限累加

可逐層設置的多種混合模式，也就是說(shuō)可以加外描邊的外描邊的外描邊的外描邊……

并可以任意調節各層樣式。另外，描邊寬度也可以加錨點(diǎn)改變噠（同AI）

* . 可調用的嵌套樣式

Sketch的明星功能符號（Symbol）和共享樣式（Shared style：layer stylestext styles）：

符號（Symbol）

就是共享元素，一次編輯，所有共用的地方全部生效，就像是 Photoshop 里的智能對象，且生效范圍僅在每一個(gè) .sketch文件中。不同之處在于Sketch中改變一個(gè)元素副本大小所有都同步，PS中智能對象的大小是獨立的；且Sketch的符號中文本是可以單獨編輯的。

符號被運用的最廣泛的地方可能是按鈕這樣的基本 UI 元素，舉個(gè)栗子，在PS中建立兩個(gè)文字不同的圖標需要新建智能對象或者文字與按鈕分離，編輯時(shí)需要打開(kāi)一個(gè)或兩個(gè)智能對象……Sketch中編輯就輕松很多。

共享樣式（Shared style：layer stylestext styles）

圖層共享樣式PS中也能復制黏貼，然文字樣式的編輯和共享PS中并沒(méi)有。共享文字樣式等同于直接在軟件中調用文字規范，非常有用的功能~

▲紫色文件夾即應用了符號（來(lái)源：官網(wǎng)）

* . 原生測量利器

十分好用的標尺工具

如果需要查看兩個(gè)元素之間的距離，在選中第一個(gè)元素后按住Alt然后將光標指向第二個(gè)元素即可。

此時(shí)如果按住Alt并移動(dòng)元素，便能在移動(dòng)過(guò)程中時(shí)刻看到元素之間的距離變化：

▲對齊也變得非常容易

布局網(wǎng)格和參考線(xiàn)

參考線(xiàn)是PS比較渣的點(diǎn)，只能一條條來(lái)，不支持布局式參考線(xiàn)（按比例建立多條），做界面設計時(shí)基本要借助第三方插件，而在Sketch中就很方便啦。

▲參考線(xiàn)批量一鍵設置

7. 靈活的切圖和輸出

批量輸出爽爆，還可以自動(dòng)畫(huà)出切片大?。╯lice），切片輸出直觀(guān)方便 （包括上文提到的九宮變形）

可以導出 0.* x、1x、2x、* x、* 12W 和 * 12H 的版本，同時(shí)還可以自定義不同尺寸的后綴。

▲一鍵導出多種尺寸和格式

* . 前景好迭代快

手機端配套支持

自帶的Sketch Mirror支持同步手機端，時(shí)時(shí)查看效果。

IOS 友好

IOS 各種支持的好，且內置的ios模板 （artboard），各種文檔尺寸不用手動(dòng)輸。

CSS友好

Sketch是寫(xiě)碼的設計師最?lèi)?ài)，可能是代碼調用方便（？）以下是Avocode（號稱(chēng)是連接設計師與碼農的橋梁）做的調研報告《How designer worked in 201* 》中關(guān)于軟件使用比例的截圖。

可以理解會(huì )有不少創(chuàng )業(yè)型小團隊將Sketch作為主力設計工具。

▲Sketch的使用比例快要趕上PS

社區繁榮插件多

Sketch由于備受追捧，社區的活躍度高，各種插件、資源查找方便。

小團隊迭代快

作為為設計師存在的軟件，據說(shuō)非常愿意傾聽(tīng)設計師意見(jiàn)，響應迅速、更新迭代快。

Part 2 Sketch的三大痛點(diǎn)1. 弱爆的位圖處理能力

位圖處理就在兩個(gè)地方：

簡(jiǎn)單的投影和模糊（* 種模糊方式）

位圖編輯功能：兩個(gè)選區工具（魔術(shù)棒和選擇工具）、反選、裁剪、矢量填充和直接填充。

當然并沒(méi)有畫(huà)筆、濾鏡種種，且圖層樣式只有四種：填充、描邊、投影、內陰影（沒(méi)有常用的內外發(fā)光斜面浮雕）

所以說(shuō)不適于做擬物類(lèi)界面設計，用Sketch挑戰繪圖向設計很低效。

2. 格式支持局限，難以團隊協(xié)作

不支持：PSD和AI文件，部分支持eps/svg。

支持：除圖片文件jpg/png/tiff/pdf外，可以導出eps/svg（可以與AI對接）

* . 平臺和語(yǔ)言限制

Sketch在官網(wǎng)上的定位就是 —— Sketch- Professional Digital Design for Mac

首先需要Mac，且只有英文系統 （可能會(huì )有中文字體支持問(wèn)題）

如：無(wú)法方便地為一段中英混合的文字指定中英文字體（一個(gè)知乎上看到的槽點(diǎn)）

“比如說(shuō)「你好Hello」這幾個(gè)字，在PS下可以先設為冬青黑，再設為Avenir Next，它就是冬青黑的中文+ Avenir Next的英文。但Sketch不支持這樣的操作，為大段文字設置不同的中英文字體就是災難?！?/p>

字體行高詭異

不同字體的實(shí)際行高也不一樣，做列表類(lèi)界面的時(shí)候特別麻煩。

另外 Sketch 的行高很有問(wèn)題，我隨手找過(guò)幾個(gè)字體對比過(guò)，比如在行高設為 * * px 時(shí)，每個(gè)字體的行高都不一樣，行高設為自動(dòng)時(shí)不同字體文本框 padding 也是不同的。

排版對齊很麻煩

Photoshop 的文字有分「段落文本（Paragragh）」和「點(diǎn)文本（Point）」，Sketch中 對應的則是「Fixed」和「Auto」，看上去 Auto 對應的是 PS 里的 點(diǎn)文本，但是 Sketch 的文本框上下會(huì )留出一些留白間距，而 PS 則是沒(méi)有留白間距的處理，這樣一來(lái)，對齊的時(shí)候 PS 感覺(jué)會(huì )更精準一些。

▲任意三種字體上對齊的結果

拼界面無(wú)明顯優(yōu)勢

運行超快的Sketch能否拿來(lái)拼（位圖）界面？

導入了一套約1* M的文件，其中包含jpg和png文件。移動(dòng)位圖過(guò)程中有明顯卡頓，九宮切圖因為自動(dòng)化所以會(huì )比（ps）較快，但無(wú)法做常用的位圖編輯，總體交互操作相較PS也沒(méi)有太多優(yōu)勢。

▲1* M輸出文件

Part * 結論：不妨一試

誠然Sketch對位圖編輯是非常不友好的，完全不能與PS 相提并論，因此現階段Sketch 一定不是必要工具。當然它的賣(mài)點(diǎn)本來(lái)就無(wú)關(guān)位圖，其針對UI設計的操作、交互模式大大提高工作效率。不過(guò)就像大家知道AI做矢量比PS高效，但就是不移步AI一樣（實(shí)際工作中位圖處理多過(guò)矢量)，軟件切換多少有心理成本。另外還涉及到團隊協(xié)作問(wèn)題，Sketch 現如今在我司還如此孤立無(wú)援，且還要多背一臺MacBook。

但是Sketch非常適合扁平化設計，順應了設計理念：數值化編輯像素級精準等等， 而且矢量化設計也是一種趨勢。

好玩好用，上手成本低，值得一試。

作為一枚GUI總結一下，Sketch在以下幾方面可能有所助益：

1. 移動(dòng)端APP和響應式網(wǎng)頁(yè)設計利器

全局化視野精準的自動(dòng)對齊符號和共享樣式…顯然就是為此而生

2. 簡(jiǎn)單的矢量化圖標

通過(guò)布爾運算能處理的圖標都適合在Sketch中操作，輸出也快速方便

* . 簡(jiǎn)易形（幾何組合造型）嘗試

Sketch的數值化編輯、非破壞性編輯使得圖形組合的自由度非常高

* . 游戲界面風(fēng)格稿前期設計

也就是刻畫(huà)之前的各階段：色彩搭配、布局調整、樣式設計

有利于聚焦在設計過(guò)程、界面邏輯，而非細節。即避免失控（設計點(diǎn)偏離）以及在豐富的材質(zhì)中迷失。

Abobe的反擊

當然PS也已經(jīng)向sketch學(xué)習，PS CC 201* 推出Design Mode，看上去也是萌萌噠。

▲Design Mode *圖片來(lái)源

并沒(méi)有用過(guò)?？从懻撌钦f(shuō)由于軟件體量悠久的操作習慣等問(wèn)題只是小改，沒(méi)有多好用。這個(gè)有空研究……

搜集資料的過(guò)程中還發(fā)現了CC不為人知（也許就我不知道）的功能Libraries panel（附教程）

▲看圖秒懂

看圖秒懂，就是可以各種調用：色板、sketch的共享字體樣式、常用圖片是不是都在這里了 。這個(gè)有空研究……

想到PS也有一個(gè)版本是可以平鋪很多畫(huà)板的，但并沒(méi)有很多人用。

對比Sketch和PS帶來(lái)的反思

1. 設計是核心：厘清設計思路很重要

兩家都是用來(lái)實(shí)現設計想法的工具，最關(guān)鍵的還是設計和想法，Sketch中的很多功能都是幫助設計師關(guān)注設計流程、把控層級的，

2. 主動(dòng)優(yōu)化流程

PS更新后有很多有意思的功能和冷知識可能因為以前的使用慣性等原因沒(méi)有去開(kāi)發(fā)；

培養好的使用習慣，比如圖層管理、資源整理；

也許偶爾花點(diǎn)時(shí)間去優(yōu)化流程會(huì )是一大助力；

新東西不妨弄一弄，讓自己的系統更加Flexible，多多自我迭代。

對Sketch和PS的研究都尚淺，我們學(xué)習UI設計專(zhuān)業(yè)日后是要從事UI設計工作的，因此我們需要掌握一定的評判標準自己首先學(xué)會(huì )去衡量評判我們自己的作品，再不斷地進(jìn)行修改，直至設計出一個(gè)讓自己滿(mǎn)意再讓用戶(hù)滿(mǎn)意的作品。然而，盡管有這樣的一些評判標準，我們想要全面掌握UI設計專(zhuān)業(yè)的知識及設計技能，目前最直接有效的方法還是參加專(zhuān)業(yè)的培訓班。國內幾家比較有代表性的培訓機構中，CGWANG無(wú)論從實(shí)力還是培訓效果都是有著(zhù)明顯優(yōu)勢，這也是為何目前這么多人選擇CGWANG的最重要原因。