沒(méi)錯(cuò)，是sketch，一款用在MAC上的UI設(shè)計(jì)軟件，不是你們知道的Sketchup。作為一個(gè)UI設(shè)計(jì)師，如果你還不知道Sketch，那你是應(yīng)該考慮應(yīng)該多多學(xué)習(xí)而不是悶頭工作了。今天的文章一起來(lái)看看Sketch能帶來(lái)什么改變。一聽(tīng)到設(shè)計(jì)軟件，大家的反應(yīng)必須是Adobe家的Photoshop，Illustrator等等等等。那么今天筆者要為大家介紹的，則是這款Sketch。這款軟件的定位非常精準(zhǔn)，首先，它是一款矢量制圖軟件；其次，這款軟件的目標(biāo)用戶是APP設(shè)計(jì)師（當(dāng)然用來(lái)設(shè)計(jì)網(wǎng)頁(yè)也是可以的）。到這里大家伙可能有點(diǎn)不解，既然Photoshop這樣的工具已經(jīng)可以滿足我們?cè)O(shè)計(jì)App效果圖的需求，那么這款軟件又有什么與眾不同之處以至于我們非要用呢？ 別著急，聽(tīng)筆者慢慢往下講。

Sketch 是一款適用于所有設(shè)計(jì)師的矢量繪圖應(yīng)用。矢量繪圖也是目前進(jìn)行網(wǎng)頁(yè)，圖標(biāo)以及界面設(shè)計(jì)的最好方式。但除了矢量編輯的功能之外，我們同樣添加了一些基本的位圖工具，比如模糊和色彩校正。我們盡力讓 Sketch容易理解并上手簡(jiǎn)單，有經(jīng)驗(yàn)的設(shè)計(jì)師花上幾個(gè)小時(shí)便能將自己的設(shè)計(jì)技巧在Sketch中自如運(yùn)用。對(duì)于絕大多數(shù)的數(shù)字產(chǎn)品設(shè)計(jì)，Sketch 都能替代Adobe Photoshop，Illustrator 和 Fireworks。

——摘自《sketch用戶手冊(cè)》

在sketch用戶手冊(cè)中，編者毫不掩飾sketch的強(qiáng)大功能，甚至說(shuō)：對(duì)于絕大多數(shù)的數(shù)字產(chǎn)品的設(shè)計(jì)，sketch可以完全替代photoshop，illustrator和fireworks。 最初看到這些句子的時(shí)候，筆者有點(diǎn)不以為然，但好奇心還是驅(qū)使筆者將這個(gè)程序下載下來(lái)，打開(kāi)這個(gè)鉆石形狀的圖標(biāo)，筆者看到一排看起來(lái)很簡(jiǎn)單的圖標(biāo)，在上邊 可以拖動(dòng)來(lái)畫(huà)各種形狀，但并沒(méi)有感受到更特別的地方。 由于工作忙，筆者在打開(kāi)后沒(méi)多久便關(guān)閉了程序開(kāi)始忙其他的事情。 就這樣大概十幾天時(shí)間就過(guò)去了。這段時(shí)間內(nèi)，正值筆者負(fù)責(zé)設(shè)計(jì)的app改版后期，工作非常忙，而且要負(fù)責(zé)安卓和iphone兩個(gè)平臺(tái)的同時(shí)開(kāi)發(fā)，工作量非常大。光是切圖，就有三四套，其中還不包括細(xì)節(jié)的調(diào)整工作。 筆者之前一直沒(méi)有標(biāo)注效果圖的習(xí)慣，一來(lái)工作時(shí)間所迫，二來(lái)是偷懶。效果圖作完在手機(jī)上預(yù)覽感覺(jué)良好，就直接給到開(kāi)發(fā)工程師，告知一些細(xì)節(jié)如何處理然后將切圖交付。然后等工程師完成后就坐在他們跟前來(lái)調(diào)整界面。

這是一個(gè)漫長(zhǎng)而且非常磨人的過(guò)程，由于細(xì)節(jié)非常多，所以即使使用之前筆者講述的fireworks批量切圖法，依然可以把人搞的頭昏腦漲。而且由于沒(méi)有標(biāo)注設(shè)計(jì)稿的字號(hào)，圖片尺寸，前端工程師全憑感覺(jué)開(kāi)發(fā)。所以到他們認(rèn)為可以交付的程度，其實(shí)整個(gè)界面還是慘不忍睹的，在以前，筆者會(huì)搬個(gè)小椅子坐在他們跟 前，與他們一起“目測(cè)”調(diào)整字號(hào)，圖片大小。 但，在這個(gè)過(guò)程中，筆者越來(lái)越發(fā)現(xiàn)，這種方式效率是及其低下的，一來(lái)浪費(fèi)了雙方大量的時(shí)間來(lái)調(diào)整，二來(lái)由于都是目測(cè)調(diào)整，所以最終效果不太理想。

之前筆者一直認(rèn)為，標(biāo)注效果圖是一件非常無(wú)意義的事情，但，這件事促使我開(kāi)始反省，也許我是錯(cuò)的。 在與開(kāi)發(fā)工程師溝通后，筆者認(rèn)為設(shè)計(jì)稿標(biāo)注是有章可循的，使用px標(biāo)注的字號(hào)可以與安卓和ios平臺(tái)通過(guò)一定規(guī)律進(jìn)行轉(zhuǎn)換為dp或者sp，大多數(shù)其他間距也可以實(shí)現(xiàn)較為精確的匹配。 所以筆者決定開(kāi)始標(biāo)記一些主界面的效果圖做嘗試。

標(biāo)注效果圖是一項(xiàng)很繁瑣的工作，雖然我們可以嘗試使用一些標(biāo)記軟件（筆者尋找的標(biāo)記軟件是一款名為markman的基于air開(kāi)發(fā)的程序，這款軟件在初期為我的標(biāo)注工作帶來(lái)了很大幫助），但大部分標(biāo)記軟件充其量就是一個(gè)標(biāo)尺和取色器的結(jié)合體，可以滿足一部分的工作，但對(duì)于字號(hào)的標(biāo)注一樣無(wú)能為力，我需要在設(shè)計(jì)軟件中先查看字體屬性，然后再現(xiàn)打字到標(biāo)注軟件中，效率啊效率，實(shí)在是讓人抓狂。最終，筆者看到了這款躺在我dock上已經(jīng)十來(lái)天沒(méi)打開(kāi)過(guò)的sketch。

首先筆者先去度娘了一下，發(fā)現(xiàn)已經(jīng)有一些討論組和文章存在，但大部分是外文翻譯過(guò)來(lái)的。借助這些文章，我了解到skech的獨(dú)特之處。

還在用Photoshop切圖的童鞋，推薦一款神器給你們！

Slicy for mac(圖像處理軟件) v1.1.7 蘋(píng)果電腦版

• 類型：圖像處理
• 大小：2.59MB
• 語(yǔ)言：英文軟件
• 時(shí)間：2014-08-18

查看詳情

效果圖智能標(biāo)記

sketch實(shí)現(xiàn)了軟件內(nèi)的智能標(biāo)記！這比用標(biāo)記軟件還要方便好多倍。拋棄那些效果圖標(biāo)記軟件吧，至于如何標(biāo)記，筆者將在以后的文章中詳細(xì)講解。

第二點(diǎn)吸引筆者的，是他的切圖工具，借助sketch的切片工具，我們可以輕松將一個(gè)圖標(biāo)導(dǎo)出為適用于ios和安卓的各種尺寸，你甚至不用理解大部分的原理（當(dāng)然了解切圖尺寸的關(guān)系還是非常有用的），就可以順利的切出沒(méi)有毛刺，精確適配xxhdpi，xhdpi，hdpi，ios下一倍和兩倍的切片。

雖然photoshop cc 2014版本改進(jìn)了一些輔助對(duì)齊功能，但對(duì)比skech簡(jiǎn)直就是小巫見(jiàn)大巫。sketch的對(duì)齊工具可以幫我們更輕松的對(duì)齊大部分的元素，絲毫不差。

sketch中沒(méi)有畫(huà)布的概念，整個(gè)空白區(qū)域都可進(jìn)行創(chuàng)作，因?yàn)樗腔谑噶康摹?但我們?cè)谀承r(shí)候需要一個(gè)“框”，來(lái)具象化我們的設(shè)計(jì)。在ps及其他設(shè)計(jì)軟件中，他叫畫(huà)布，但在skech中，他被賦予了一個(gè)新詞，artboard。我們可以在一張畫(huà)布上創(chuàng)建無(wú)數(shù)張artboard。這對(duì)于app的連貫性來(lái)說(shuō)，是非常有幫助的，我們可以將一個(gè)app界面看做一個(gè)artboard，然后在一個(gè)界面中，對(duì)比和查看他們的不同之處，或者將他們的交互過(guò)程串聯(lián)起來(lái)。一切都非常方便。然后我們可以將這些artboard分別導(dǎo)出為pdf或者分為一個(gè)個(gè)的圖片文件，方便產(chǎn)品經(jīng)理或開(kāi)發(fā)者查看。一切只需要一到兩步的操作。

有時(shí)候我們需要在設(shè)計(jì)稿中調(diào)用安卓或者ios系統(tǒng)自帶的控件，比如彈出的提示框，浮動(dòng)鍵盤(pán)。但我們一定要自己再畫(huà)一次嗎？不必，sketch有豐富的素材庫(kù)，我們可以直接將需要的部分拖進(jìn)來(lái)即可，這節(jié)省了我們大部分的時(shí)間，使我們可以將騰出來(lái)的時(shí)間用于更加核心的產(chǎn)品設(shè)計(jì)思考上。

sketch中自帶了一個(gè)mirror的功能，可以像psplay和photoshop的遠(yuǎn)程連接工具一樣，將你的設(shè)計(jì)稿在移動(dòng)設(shè)備上即時(shí)預(yù)覽查看，非常方便。

對(duì)于產(chǎn)品經(jīng)理，sketch完全適用，用他來(lái)畫(huà)原型圖簡(jiǎn)直輕而易舉，他豐富的組件庫(kù)和精確的尺寸控制讓我們的原型圖更逼真。更有利于交流和前期的展示。你甚至可以考慮將Axure 拋棄了。

好的，介紹了幾點(diǎn)sketch最引人注目的特性。那么筆者在這里先放出他的下載地址（筆者寫(xiě)文時(shí)，sketch的最新版本為3.0.4）。下邊兩款軟件，大家一并先下載并安裝好。

Sketch軟件下載地址：http://www.bohemiancoding.com/sketch/

Sketch軟件破解版下載地址：

最佳矢量繪圖設(shè)計(jì)軟件Sketch for Mac v101.5 最新中文特別版

• 類型：圖像處理
• 大?。?/span>87.7MB
• 語(yǔ)言：英文軟件
• 時(shí)間：2024-11-17

查看詳情

最后，筆者差點(diǎn)忘了，Sketch現(xiàn)在還沒(méi)有windows版，想要體驗(yàn)sketch的魅力，請(qǐng)大家買(mǎi)一臺(tái)Mac設(shè)備吧。

最新評(píng)論