- 該鏈接里面有各種破解版本: http://www.zhinin.com/sketch-mac.html
- 學(xué)習(xí)網(wǎng)址: http://www.sketchcn.com/
- iOS GUI 10 Page: http://www.zcool.com.cn/article/ZNDI2MTE2.html
- iOS GUI 11 Page: http://sketch.im/resources/icon/
Sketch 定位于 Web/App UI 設(shè)計(jì), 完全是矢量圖花鹅。
打開Sketch 頂部是Toolbar但汞。 [ sket? 素描 'tu?lbɑ?(r) 工具欄 ]
然后是
- Layer List 圖層結(jié)構(gòu)纤壁,類似文件目錄衍慎,這里需要注意的是Page 和 Artboard [pe?d? ɑ?t'b??d]
- Canvas 是主要作圖區(qū)域秃励,也是中間的部分,所有的設(shè)計(jì)將在這里完成 [ 'k?n v?s 帆布 ]
- Inspector 用來調(diào)整元素的屬性 [ ?n' spek t? 檢查員]
用Artboard做同一頁面間的不同狀態(tài)苏潜,用Page做不同頁面的設(shè)計(jì)步责。
模板
Template ['tem p le?t]
在Great Simple Studio 推出了iOS10 GUI (http://iosdesignkit.io/ios-gui/) 這些模板都遵循iOS Humman Interface Guidelines 的標(biāo)準(zhǔn)規(guī)范,并且附帶很多原生的 iOS 界面鹅搪。
什么是 System 和 Styled Text ?
比如返回按鈕站绪,需要在很多界面中用到,如果每次都賦值粘貼丽柿,顯的笨效率低恢准,所以把它定義一個Symbol,在使用的時候直接插入就可以了。
在頂部菜單欄選擇Create Symbol甫题,右側(cè)Inspector中為Sysbol命名馁筐,然后在工具欄Insert - Sysbol中插入。
Styled Text 也是相同的道理坠非,只不過它是基于文本的定義敏沉,不是圖形的,但操作的方式都一樣炎码。
在菜單里面選擇File - Save as Template, 命名后單擊確定就可以了保存?zhèn)溆妹顺伲诓藛螜谶x擇File - New from Template,選中剛才保存好的文檔。
以 iPhone 7 為例潦闲, 實(shí)際上應(yīng)該是 750 px X 1334 px 攒菠。但是Sketch 讓這里的px 尺寸和真機(jī)的pt 尺寸一樣了,比如設(shè)計(jì)中 1 px 的邊框矫钓,在開發(fā)時要尔,就很容易對應(yīng)到1 pt 的邊框上,不在做單位的轉(zhuǎn)換新娜。
應(yīng)該選用哪個尺寸赵辕?
遵循的三個原則:
- 現(xiàn)有設(shè)備。為了能在真機(jī)上更好的感覺自己的設(shè)計(jì)概龄,要求設(shè)計(jì)尺寸和設(shè)備尺寸相符还惠。在使用Xcode 中的Storyboard進(jìn)行原型模擬時,也會有幫助的私杜。
- 目標(biāo)人群擁有的設(shè)備蚕键。比如應(yīng)用的目標(biāo)是中國人,那就應(yīng)該在 5.5英寸的屏幕上(iphone 7/ 7s Plus)上進(jìn)行設(shè)計(jì)衰粹,如果是歐美人锣光,可以在4.7英寸屏幕上(iphone 7/7s)設(shè)計(jì)。
3.保證設(shè)計(jì)的可伸縮性铝耻。如果在3.5英寸上做設(shè)計(jì)誊爹,可能很難想象在5.5英寸上的表現(xiàn)是什么樣子蹬刷。所以最好是能夠在一個大小適中的設(shè)備上進(jìn)行設(shè)計(jì)。