如果你是一名網(wǎng)頁(yè)設(shè)計(jì)師硕旗，相信你一定對(duì) Sketch 這個(gè)軟件不陌生了勋篓。作為一個(gè)交互設(shè)計(jì)師行贪，UI設(shè)計(jì)乃一核心內(nèi)容。以前常使用 Photoshop 進(jìn)行 P 圖删豺，但總覺(jué)的其實(shí)在是比較冗余剔氏。于是轉(zhuǎn)而運(yùn)用 Sketch 進(jìn)行 UI 設(shè)計(jì)为朋。該文將通過(guò)一個(gè)完整案例來(lái)介紹如何運(yùn)用 Sketch 進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)的疤孕，同時(shí)也會(huì)分享筆者的一些 tricks.
這次的網(wǎng)站設(shè)計(jì)主題是 An eCommerce Website，教程地址 tuts+距境，筆者最終版本可見(jiàn)筆者 Behance.
基本設(shè)置
畫(huà)布
按住鍵盤(pán) A 快捷鍵申尼，可以創(chuàng)建畫(huà)布。 Sketch 已經(jīng)良心的為你默認(rèn)設(shè)置了各種設(shè)備尺寸垫桂，你想要的全都有师幕，如下圖。
柵欄
通過(guò) Layout settings 設(shè)置柵欄[布局參考線]诬滩，這個(gè)功能好的真是不要不要的[下文回介紹其實(shí)際用處]霹粥，可以根據(jù)需要自主選擇每列寬度，間隔寬度以及最外側(cè) margin 寬度碱呼，見(jiàn)下圖蒙挑。
這時(shí)畫(huà)布上就出現(xiàn)了柵欄參考線，文字段落的寬度愚臀，按鈕的寬度，圖片的寬度都可以根據(jù)柵欄進(jìn)行合理設(shè)置。通過(guò)柵欄布局可以極大的統(tǒng)一頁(yè)面的布局設(shè)置姑裂，給人一種和諧美[Ctrl + L 可以快捷鍵顯示/隱藏柵欄]馋袜，效果如下。
字體
注重對(duì)比和統(tǒng)一舶斧。對(duì)比是指在需要突出區(qū)別的地方用不同字號(hào)欣鳖，粗細(xì)和字體突出不同。統(tǒng)一是指對(duì)于網(wǎng)站同一元素茴厉，使用相同的字體設(shè)置泽台，比如 H1, Body Text. 英文字體建議兩種即可, 一個(gè) sans-serif 字體作為標(biāo)題，顯眼矾缓；一個(gè) serif 字體作為正文怀酷，易讀∈任牛可以提前設(shè)計(jì)好各個(gè)字體的數(shù)值蜕依，利用 Sketch 的 Style Text 功能進(jìn)行保存，方便以后頻繁使用琉雳。也可以再設(shè)計(jì)的時(shí)候样眠，邊做邊保存[前者適合在經(jīng)驗(yàn)用戶，后者更適合初學(xué)者]翠肘，如下圖檐束。
對(duì)字體另外一個(gè)重點(diǎn)是確定 line height [行高]，確定行高的作用是方便確定控件上下 margin, 左右 margin 可以通過(guò)柵欄進(jìn)行確定束倍。比如你確定默認(rèn)字體大小為 20px, 行距為 1.5被丧，則行高 = 20px * 1.5 = 30. 那么控件之間的上下間距則可以設(shè)為 30px 的倍數(shù)，比如 30px, 60px, 90px, 以此類推肌幽。間距和行高相同可以使頁(yè)面看起來(lái)更加和諧美觀晚碾。
調(diào)色板
一個(gè)好的配色對(duì)界面美觀的重要性不言而喻。Sketch 也貼心的為用戶提供了顏色版用于記錄顏色喂急，方便你重復(fù)使用格嘁，見(jiàn)下圖。
最主要的是一下幾個(gè)顏色廊移，背景色糕簿，默認(rèn)字體顏色，減淡字體顏色狡孔，強(qiáng)調(diào)色懂诗，邊框顏色，和適當(dāng)數(shù)量的輔助色[Material Design鼓勵(lì)用多種顏色苗膝，用鮮明大膽顏色]殃恒。這里再說(shuō)一下陰影顏色，Material Design 建議使用 #000 全黑，然后減弱 opacity 不透明度离唐，而不是直接設(shè)置灰度顏色病附。因?yàn)檫@樣可以保證陰影不論在亮色還是暗色背景下都有一個(gè)良好的視覺(jué)效果。
操作
頁(yè)面
Sketch 的左側(cè)提供了頁(yè)面導(dǎo)航列表亥鬓。用戶可以創(chuàng)建不同頁(yè)面完沪，同一頁(yè)面中又可以創(chuàng)建不同畫(huà)布。這樣一來(lái)嵌戈，用戶便可以將網(wǎng)站的所有頁(yè)面有條理的保存在一個(gè) Sketch File 中[見(jiàn)下圖]覆积，it is amazing!
間距
Sketch 對(duì)于排版可謂是考慮的極其周到。學(xué)習(xí) CSS 的朋友應(yīng)該知道在排版時(shí)熟呛，對(duì)于 margin 的四個(gè)數(shù)值往往糾結(jié)不以宽档，往往憑感覺(jué)設(shè)置。而 Sketch 可以在設(shè)計(jì)時(shí)就解決這個(gè)問(wèn)題惰拱，鼠標(biāo)選中指定元素雌贱，按下 Alt 鍵，界面自動(dòng)現(xiàn)實(shí)該元素的 margin top, right, bottom, left. 精確到 1px 的設(shè)計(jì)偿短，讓設(shè)計(jì)稿和實(shí)現(xiàn)稿無(wú)縫對(duì)接欣孤，見(jiàn)下圖。
Symbol
Sketch 還提供了保存組件的功能昔逗。如果某些元素在設(shè)計(jì)中會(huì)重復(fù)出現(xiàn)降传，則可以利用 Symbol 功能進(jìn)行保存，需要時(shí)直接插入即可勾怒。一次設(shè)計(jì)婆排，循環(huán)使用。
結(jié)構(gòu)
一個(gè)好的交互設(shè)計(jì)師需要對(duì)網(wǎng)站結(jié)構(gòu)有一個(gè)非常清楚的認(rèn)知笔链。這個(gè)網(wǎng)站的目的是什么段只，用戶群是誰(shuí)，為了實(shí)現(xiàn)目的需要有哪些功能鉴扫，這些功能如何組織成頁(yè)面赞枕，頁(yè)面之間如何跳轉(zhuǎn)，功能如何實(shí)現(xiàn)等坪创。比如該網(wǎng)站是銷(xiāo)售網(wǎng)站模板的購(gòu)物網(wǎng)站炕婶，導(dǎo)航欄有如下幾項(xiàng)：主頁(yè)，聯(lián)系頁(yè)莱预，支持頁(yè)柠掂，購(gòu)物頁(yè)，個(gè)人賬戶依沮，購(gòu)物車(chē)涯贞，如下圖枪狂。
先設(shè)置主頁(yè)，然后由主頁(yè)發(fā)散延展到其他界面肩狂。當(dāng)然摘完，這一切應(yīng)該在 UI 設(shè)計(jì)之前的交互稿就考慮清楚姥饰。UI 更加強(qiáng)調(diào)美觀性傻谁，如何利用美觀更好的引導(dǎo)用戶實(shí)現(xiàn)既定目標(biāo)。
交互
設(shè)計(jì)時(shí)需要考慮用戶使用網(wǎng)站時(shí)的交互場(chǎng)景列粪。
界面的交互狀態(tài)审磁，比如登陸和未登錄時(shí)界面的不同狀態(tài)，如下圖岂座。
元素的交互狀態(tài)态蒂，Hover 和未 Hover，Click 和未 Click费什，是否 Disabled等钾恢。細(xì)節(jié)產(chǎn)生美！
插件
Sketch 的插件是獨(dú)立與 Sketch 本身鸳址，可以第三方開(kāi)發(fā)的瘩蚪。在這里像那些默默奉獻(xiàn)的偉大程序員們表示無(wú)比的敬意。強(qiáng)推插件下載軟件 Sketch Toolbox[見(jiàn)下圖]稿黍≌钍荩可以一鍵下載/卸載插件，再也不用從 GitHub 上下載然后拖到指定文件夾了巡球，節(jié)省了大量時(shí)間言沐。
Sketch 用了快三個(gè)月了，插件也嘗試過(guò)20多個(gè)酣栈，現(xiàn)在把我喜歡的插件分享如下险胰，希望能夠幫到朋友們。
- Artboardzoom: Cmd + 4 一鍵 zoom in 畫(huà)布到適當(dāng)大小矿筝。
- Sketch Arrange Artboards：可以將多個(gè)畫(huà)布整齊排列起便。
- Content Generator Sketch Plugin：添加偽元素必備。
- Generate Gif Sketch 也可以做 Gif 動(dòng)圖跋涣。
- Magicmirror：透視變形圖讓你的作品集看起來(lái)更酷缨睡。
- Sketch User Fontawesome：一鍵添加字體圖標(biāo)。
總結(jié)
盡管 Sketch 相比 PS 而言缺乏很多操作位圖的功能陈辱，插件穩(wěn)定性不足奖年，同時(shí)限定了只能 Mac 用戶使用。但作為一個(gè)初學(xué)者沛贪，個(gè)人確實(shí)覺(jué)的使用 Sketch 比 Photoshop 更加適合 UI 設(shè)計(jì)陋守。它的各項(xiàng)工具都是專門(mén)為 UI 流程進(jìn)行設(shè)計(jì)的震贵，比如畫(huà)布尺寸，控件水评，指定尺寸導(dǎo)出等猩系。相信使用 Sketch 可以極大的提升你的工作流程，從項(xiàng)目初期設(shè)計(jì)階段到項(xiàng)目最終實(shí)施階段中燥。還沒(méi)有嘗試過(guò) Sketch 嗎寇甸？更多功能等待你去探索呢。如果你有其他的 tricks疗涉，let me know in the comments!
題外
- 希望 Dribbble 的設(shè)計(jì)師大拍妹梗可以給個(gè)邀請(qǐng)碼讓我也有機(jī)會(huì)發(fā)布作品，非常感謝咱扣。
- 本人打算今年暑假去那里實(shí)習(xí) interaction design 或者 user experience design, 希望在 Silicon Valley Uber 總部上班的朋友能提供個(gè)內(nèi)推機(jī)會(huì)绽淘。
- 有在美國(guó)這個(gè)暑假打算在加州找實(shí)習(xí)的小伙伴么，求組隊(duì)闹伪，個(gè)人微信在簡(jiǎn)書(shū)首頁(yè)沪铭，求加。
