UI設(shè)計(jì)師新寵！聊聊sketch那些方便好用的貼心功能

編者按：Sketch最近成了很多UI設(shè)計(jì)師的新寵，同學(xué)們紛紛表示要放手Photoshop，轉(zhuǎn)投Sketch的懷抱。于是就有了這樣的疑問：這個(gè)上線才一年多的軟件魅力在哪？今天@呼嘯而過Charles?聊聊Sketch那些貼心好用到愛上改稿的神奇功能。

首先，感謝原作者Jean-Marc Denis撰寫優(yōu)秀的文章。本文只是將其翻譯成中文，如有不妥之處請(qǐng)批評(píng)指教。以下為譯文正文：

當(dāng)我最近一次在舊金山參加蘋果開發(fā)者大會(huì)（WWDC 2013)時(shí)，有幸與Sketch設(shè)計(jì)師會(huì)面。

我嘗試了Sketch（目前僅限Mac平臺(tái)）。其發(fā)布已經(jīng)一年之久。它的一些性能缺點(diǎn)和不便促使我又回到Photoshop。然而，設(shè)計(jì)圈仍對(duì)它充滿熱情。因此我決定花費(fèi)一些時(shí)間探索它并自學(xué)一些基礎(chǔ)功能。這個(gè)想法的目的在于評(píng)估Sketch能否在一定程度上代替Photoshop。

如今，我的設(shè)計(jì)工作有80%出自Sketch。過度到Sketch花了我不到一個(gè)月的時(shí)間。目前為止我沒有絲毫后悔。個(gè)中原因待我一一道來。

為什么拋棄Photoshop？

為什么Photoshop還不夠好？當(dāng)我越發(fā)關(guān)注品質(zhì)、效率、協(xié)同合作時(shí)，我越發(fā)感到我正在使用一個(gè)行將就木的工具。

并非為我們而設(shè)計(jì)

Photoshop最初的目的是數(shù)字圖片處理。貝塞爾曲線路徑和矢量工具僅僅在第2版本出現(xiàn)。當(dāng)關(guān)注版本歷史和最近的更新時(shí)，可以明顯的看出用戶界面設(shè)計(jì)師不是此軟件的目標(biāo)用戶。我們忘記了實(shí)際上我們使用Photoshop的功能并非其最初的目的，在某種程度上我們“破壞了該軟件”。事實(shí)上，我們需要一款性能更簡(jiǎn)單、更簡(jiǎn)潔的軟件。Photoshop過度強(qiáng)大。

不能適應(yīng)移動(dòng)領(lǐng)域

如果你需要輸出多種分辨率的文件，那么這將是場(chǎng)災(zāi)難。即使有神一般的技術(shù)，你也需要將所有的元素與柵格對(duì)齊，并花費(fèi)大量時(shí)間。多數(shù)節(jié)省時(shí)間的功能都來自第三方插件：iOS屏、圖標(biāo)模版、柵格布局和符號(hào)。

過時(shí)的引擎

由于Photoshop是一款擁有幾十年歷史的圖片處理軟件，其引擎需要大量資源。盡管Adobe工程團(tuán)隊(duì)完成了令人印象深刻的優(yōu)化方案，但軟件仍然慢得令人難以忍受。即使一個(gè)非常基礎(chǔ)的功能在不同團(tuán)隊(duì)間溝通的時(shí)候都會(huì)像皮球一樣被踢來踢去。我們不能苛責(zé)他們，因?yàn)樗麄兊能浖枰缙脚_(tái)支持。

廉頗老矣

還記得視網(wǎng)膜屏發(fā)布的時(shí)候，我們等待了多久才等到Photoshop的軟件更新嗎？點(diǎn)劃線邊框？動(dòng)態(tài)圓角？例子已數(shù)不勝數(shù)。我已經(jīng)默默的接受并不再責(zé)備他們了。龐大的團(tuán)隊(duì)通常行動(dòng)遲緩。事實(shí)是我們?nèi)匀粺崆械钠谂我恍┥形创嬖诘年P(guān)鍵功能：漂亮的文字渲染、多層混合選項(xiàng)、實(shí)用的智能參考線等。

為什么Sketch成為主角？

自動(dòng)保存和版本管理

可曾想過無需點(diǎn)擊“?+s”？是的，Sketch自動(dòng)為你保存，甚至允許你恢復(fù)到文件曾經(jīng)的版本。

“Browsing All Versions…” 將向你展示一個(gè)時(shí)間機(jī)器的界面，展示你曾經(jīng)保存的文件。

矢量編輯和完美像素

矢量意味著可無限縮放。這意味著你將不會(huì)浪費(fèi)時(shí)間在預(yù)設(shè)的尺寸或大或小上。Sketch通過完美像素級(jí)別幫你消除此煩惱。當(dāng)你設(shè)計(jì)圖標(biāo)或者插畫時(shí)，轉(zhuǎn)換到像素試圖將非常有用。

點(diǎn)擊 ^P 可以在像素視圖和矢量視圖間轉(zhuǎn)換。

智能參考線

你是否喜愛xScope（xScope for Mac是一個(gè)集測(cè)量、校準(zhǔn)和檢查圖形和布局于一身的功能強(qiáng)大的工具－引自互聯(lián)網(wǎng)）？你是否使用過選框工具獲得尺寸？痛苦的參考線？智能參考線將幫你通過簡(jiǎn)單的方式獲得正確的對(duì)齊、邊距的元素。它節(jié)省我許多時(shí)間和精力。我認(rèn)為是最有用的功能之一。

選擇你的形狀或者群組，點(diǎn)擊 ?并拖動(dòng)鼠標(biāo)，懸停在其他的形狀或者群組上。

自由編輯元素

可以動(dòng)態(tài)編輯高度、寬度圓角半徑？是的，可以。我經(jīng)常使用它，坦率地講有了它讓我轉(zhuǎn)換到Sketch時(shí)安心了許多。通過在輸入框中輸入數(shù)值得到完美的形狀尺寸或者圓角半徑是我最喜愛的功能之一。現(xiàn)在我明顯的感到我已經(jīng)無法脫離它了。

形狀連接（布爾運(yùn)算－譯者注）

你可以將形狀合并，從而得到新的形狀。很容易得到合并、相減、相交和相異（取A和B兩部分，取A減B的部分，取A和B相交的部分，取A和B不相交的部分－譯者注）。這些并不稀奇，令人興奮的是子形狀也可以再自由的編輯。同時(shí)，由于形狀以列表形式呈現(xiàn)，你可以輕而易舉的單獨(dú)的選中他們，為其分層等。不必再糾結(jié)于將其前后移動(dòng)。這將有利于你管理和創(chuàng)建更加復(fù)雜的形狀。

單圖層多重混合模式選擇

浮夸的單圖層Photoshop趨勢(shì)已經(jīng)一去不復(fù)返了。在Sketch中，你可以對(duì)單圖層盡情發(fā)揮。這意味著4個(gè)單色或者漸變色填充和無限的邊框、陰影、內(nèi)陰影等。

最多4個(gè)填充、無限的邊框和陰影

四舍五入至最近的像素邊

使形狀或者圖層四舍五入至最近的像素邊。如果形狀的X邊在5.3像素，它將四舍五入至5像素。不再有十進(jìn)制像素、臟兮兮的形狀和透明度混合像素。我會(huì)使用快捷鍵以確保形狀達(dá)到完美像素。這樣比一一對(duì)其格柵效率高很多。

點(diǎn)擊 ? ? x。我用的最多的功能之一。

鏈接樣式

如果你在處理文字繁多的設(shè)計(jì)，linked style（鏈接樣式）允許你設(shè)置特殊的樣式，并可以將其運(yùn)用到任何文字中。如果你修改鏈接樣式，它將自動(dòng)調(diào)整到所有使用該樣式的文字。非常棒是吧？它同樣適用于形狀哦。

你可以快速簡(jiǎn)便的修改所有使用鏈接樣式的文字

優(yōu)秀的輸出

切圖和輸出通常是最痛苦的流程之一，即使有更多的Photoshop切圖工具。Sketch做為一款考慮周全的矢量軟件，輸出只需點(diǎn)擊一次，并允許輸出不同的尺寸和格式（pdf, eps, svg, png, jpg, tiff）。當(dāng)然這并非插件或者第三方應(yīng)用，它是內(nèi)置的。

點(diǎn)擊一次即可輸出

分配間距

當(dāng)你為復(fù)雜的內(nèi)容（比如圖片）確定漂亮的樣式，這項(xiàng)功能將幫助你快速測(cè)試多種樣式。

格柵

“格柵是一種二維架構(gòu)。用過一系列的縱軸和橫軸交錯(cuò)的線來架構(gòu)內(nèi)容。格柵作為一種架構(gòu)使設(shè)計(jì)師能夠更理性的管理文字和圖片，同時(shí)也易于接受。”

你當(dāng)然可以使用格柵，這是一個(gè)不錯(cuò)的工具。

自由設(shè)定格柵

文字渲染

使用其自帶的高級(jí)文字渲染，Sketch在顯示文字和字體方面表現(xiàn)出色。趕快離開Photoshop的抗鋸齒吧！

優(yōu)雅的文字渲染

CSS樣式

如果（并非是我）你從事一些網(wǎng)站開發(fā)工作或者是一名網(wǎng)站開發(fā)人員，這功能將所有混合選項(xiàng)翻譯成CSS代碼。

只需簡(jiǎn)單的粘貼代碼到任何地方（CSS文件會(huì)是一個(gè)理想選擇）

漸變邊框目前還不支持

旋轉(zhuǎn)式復(fù)制

又是一個(gè)小工具，節(jié)省許多時(shí)間和麻煩。

Sketch Play（已發(fā)布該功能，現(xiàn)在稱之Mirror－譯者注）

該功能是在iOS設(shè)備上直接顯示設(shè)計(jì)效果。

反饋力是成功的關(guān)鍵

Sketch是一個(gè)小團(tuán)隊(duì)，他們成長(zhǎng)迅速。按照他們的更新日志聲明，每次更新會(huì)給這個(gè)平臺(tái)帶來新的相關(guān)功能。

Sketch教程新鮮奉送！
《設(shè)計(jì)師新寵！教你利用SKETCH創(chuàng)建彩色開關(guān)（上）》
《設(shè)計(jì)師新寵！教你利用SKETCH創(chuàng)建彩色開關(guān)（下）》

原文地址：medium
譯文地址：blog.sina
譯者：@呼嘯而過Charles

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是一個(gè)分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程的干貨網(wǎng)站。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量74萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設(shè)計(jì) 微信號(hào)：【youshege】?jī)?yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：