Sketch專為App繪圖場景而生,也可以少量處理位圖圖片。通過下午3個(gè)小時(shí)的官方用戶文檔中文版的閱讀和實(shí)踐,我發(fā)現(xiàn)Sketch真得做到了“花最少的時(shí)間就能上手的繪圖工具,讓你專注于設(shè)計(jì)本身”
熟練使用Sketch需要理解一些概念:
- 選區(qū)
- 圖層
- 群組
- 切片: 畫布中的特定區(qū)域?qū)С鰹橐粋€(gè)文件
- 符號(Symbol),類似于布局文件里的標(biāo)簽<include>
- 蒙板,這個(gè)的作用類似安卓里的SetXfermode方法
剛打開Sketch可以對每個(gè)菜單欄下的內(nèi)容熟悉一遍,Sketch的界面可以分為四個(gè)部分
- 最左邊的Page展示
- 頂部的工具欄
- 右邊的檢查器
- 中間的畫板
我的學(xué)習(xí)過程就是按著Sketch官方用戶手冊上的介紹實(shí)踐了一遍,現(xiàn)在感覺已經(jīng)能自己修改圖標(biāo)了(要有圖片素材),剩下的就是對各種快捷鍵和繪圖小技巧的熟練使用。
注意事項(xiàng):
- 當(dāng)你為 Mac 或網(wǎng)頁設(shè)計(jì)時(shí),你會想打開子像素抗鋸齒效果,但是為 iOS 設(shè)計(jì)時(shí),你會想關(guān)掉它。
- 文字渲染遇到的問題是普通的屏幕里并沒有足夠多的像素來精確的展現(xiàn)文字的曲線。這就需要用到子像素抗鋸齒技術(shù)了,它會將那些被文字曲線遮住一部分的像素稍稍變亮一些,并且在視覺上產(chǎn)生更平滑的效果。
- 順利實(shí)現(xiàn)子像素抗鋸齒效果,文本必需出現(xiàn)在一個(gè)不透明的(有色的)背景上
- 實(shí)現(xiàn)圖層混合模式,Sketch 需要在一個(gè)透明背景上渲染所有的圖層
一次實(shí)踐案例
在App設(shè)計(jì)里,這張圖標(biāo)表示“我的”或“個(gè)人中心”,未選中時(shí):
未選中的我的圖標(biāo)
未選中的數(shù)據(jù)列表圖標(biāo)
當(dāng)選中時(shí),顏色由灰色變成紅色,并且填充顏色頭像,看起來有面的即視感:
選中的我的圖標(biāo)
選中的數(shù)據(jù)列表圖標(biāo)
使用Sketch就能很高效的完成這樣的改動,具體使用到的操作在官方用戶手冊的“圖片”分類下和“導(dǎo)出”分類下說明得很到位,本文就不再贅敘了。
小結(jié)
這次跨界的感受是在安卓開發(fā)過程中,能做到對設(shè)計(jì)師給的切圖心中有數(shù),降低了彼此的溝通成本。加深一種解決問題的認(rèn)識:實(shí)現(xiàn)某種UI顯示效果,從代碼環(huán)節(jié)轉(zhuǎn)移到圖片處理環(huán)節(jié)上