網(wǎng)頁設(shè)計顛覆性利器 PS的替代者sketch下載和入門說明

發(fā)布時間：2016-07-25 15:09:12 作者：Jingdesign

沒錯，是sketch，一款用在MAC上的UI設(shè)計軟件，不是你們知道的Sketchup。作為一個UI設(shè)計師，如果你還不知道Sketch，那你是應(yīng)該考慮應(yīng)該多多學習而不是悶頭工作了。今天的文章一起來看看Sketch能帶來什么改變

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

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

——摘自《sketch用戶手冊》

踏破鐵鞋無覓處——初識效率之王Sketch

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

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

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

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

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

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

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

類型：圖像處理
大小：2.59MB
語言：英文軟件
時間：2014-08-18

查看詳情

效果圖智能標記

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

clip_image002

智能切片工具

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

先進的對齊工具

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

artboard——輕松完成整個設(shè)計

sketch中沒有畫布的概念，整個空白區(qū)域都可進行創(chuàng)作，因為他是基于矢量的。但我們在某些時候需要一個“框”，來具象化我們的設(shè)計。在ps及其他設(shè)計軟件中，他叫畫布，但在skech中，他被賦予了一個新詞，artboard。我們可以在一張畫布上創(chuàng)建無數(shù)張artboard。這對于app的連貫性來說，是非常有幫助的，我們可以將一個app界面看做一個artboard，然后在一個界面中，對比和查看他們的不同之處，或者將他們的交互過程串聯(lián)起來。一切都非常方便。然后我們可以將這些artboard分別導出為pdf或者分為一個個的圖片文件，方便產(chǎn)品經(jīng)理或開發(fā)者查看。一切只需要一到兩步的操作。

clip_image003

豐富的組件庫

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

clip_image004