Sketch設計教室!從零開始學APP設計利器Sketch(一)

對于sketch,靜電的第一印象是Google的Sketch up,一款3d建模草圖軟件。 那么這次靜電提到的Sketch,則是一款全新的設計軟件。一聽到設計軟件,大家的反應必須是Adobe家的Photoshop,Illustrator等等等等。那么今天靜電要為大家介紹的,則是這款Sketch。這款軟件的定位非常精準,首先,它是一款矢量制圖軟件;其次,這款軟件的目標用戶是APP設計師(當然用來設計網頁也是可以的)。到這里大家伙可能有點不解,既然Photoshop這樣的工具已經可以滿足我們設計App效果圖的需求,那么這款軟件又有什么與眾不同之處以至于我們非要用呢? 別著急,聽靜電慢慢往下講。

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

——摘自《sketch用戶手冊》

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

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

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

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

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

首先靜電先去度娘了一下,發現已經有一些討論組和文章存在,但大部分是外文翻譯過來的。借助這些文章,我了解到skech的獨特之處。

還在用Photoshop切圖的童鞋,推薦一款神器給你們!《MAC下的切圖神器!SLICY使用說明》
see-more-slicy

效果圖智能標記

sketch實現了軟件內的智能標記!這比用標記軟件還要方便好多倍。拋棄那些效果圖標記軟件吧,至于如何標記,靜電將在以后的文章中詳細講解。

clip_image002

智能切片工具

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

先進的對齊工具

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

artboard——輕松完成整個設計

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

clip_image003

豐富的組件庫

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

clip_image004

設計稿可以在移動設備上即時預覽

sketch中自帶了一個mirror的功能,可以像psplay和photoshop的遠程連接工具一樣,將你的設計稿在移動設備上即時預覽查看,非常方便。

clip_image005

產品經理也可以輕松轉移到sketch

對于產品經理,sketch完全適用,用他來畫原型圖簡直輕而易舉,他豐富的組件庫和精確的尺寸控制讓我們的原型圖更逼真。更有利于交流和前期的展示。你甚至可以考慮將Axure 拋棄了。

下載Sketch,準備開啟新旅程

好的,介紹了幾點sketch最引人注目的特性。那么靜電在這里先放出他的下載地址(靜電寫文時,sketch的最新版本為3.0.4)。下邊兩款軟件,大家一并先下載并安裝好。

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

Sketch toolbox 下載地址:http://pan.baidu.com/s/1dD3VeUX

最后,靜電差點忘了,Sketch現在還沒有windows版,想要體驗sketch的魅力,請大家買一臺Mac設備吧。下期,我們來認識一下skech的基本操作。

同時歡迎關注靜電的微信 Jingdesign91

想深入探索 Sketch?來這兒就對啦!

先看看還有哪些貼心功能!
《UI設計師新寵!聊聊sketch那些方便好用的貼心功能》

幫你迅速上手Sketch的10個技巧!
《UI小課堂!幫你迅速上手sketch的10個技巧》

上手了就來創造吧!Sketch超詳細教程一枚!
《設計師新寵!教你利用SKETCH創建彩色開關(上)》

原文地址:ui
作者:@JingDesign

AD11-cover-all

【優設網 原創文章 投稿郵箱:2650232288@qq.com】

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

sdcweixin

點贊
收藏 11

發表評論 已發布 3

還可以輸入 800 個字
 
 
載入中....
相關推薦
3 收藏