如何用Sketch進(jìn)行網(wǎng)頁設(shè)計(jì)_html/css_WEB-ITnose

如果你是一名網(wǎng)頁設(shè)計(jì)師，相信你一定對(duì) Sketch 這個(gè)軟件不陌生了。作為一個(gè)交互設(shè)計(jì)師，UI設(shè)計(jì)乃一核心內(nèi)容。以前常使用 Photoshop 進(jìn)行 P 圖，但總覺的其實(shí)在是比較冗余。于是轉(zhuǎn)而運(yùn)用 Sketch 進(jìn)行 UI 設(shè)計(jì)。該文將通過一個(gè)完整案例來介紹如何運(yùn)用 Sketch 進(jìn)行網(wǎng)頁設(shè)計(jì)的，同時(shí)也會(huì)分享筆者的一些 tricks.

這次的網(wǎng)站設(shè)計(jì)主題是 An eCommerce Website，教程地址 tuts+ ，筆者最終版本可見筆者 Behance .

基本設(shè)置

畫布按住鍵盤 A 快捷鍵，可以創(chuàng)建畫布。 Sketch 已經(jīng)良心的為你默認(rèn)設(shè)置了各種設(shè)備尺寸，你想要的全都有，如下圖。

柵欄通過 Layout settings 設(shè)置柵欄[布局參考線]，這個(gè)功能好的真是不要不要的[下文回介紹其實(shí)際用處]，可以根據(jù)需要自主選擇每列寬度，間隔寬度以及最外側(cè) margin 寬度，見下圖。

這時(shí)畫布上就出現(xiàn)了柵欄參考線，文字段落的寬度，按鈕的寬度，圖片的寬度都可以根據(jù)柵欄進(jìn)行合理設(shè)置。通過柵欄布局可以極大的統(tǒng)一頁面的布局設(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 可以通過柵欄進(jìn)行確定。比如你確定默認(rèn)字體大小為 20px, 行距為 1.5，則行高 = 20px * 1.5 = 30. 那么控件之間的上下間距則可以設(shè)為 30px 的倍數(shù)，比如 30px, 60px, 90px, 以此類推。間距和行高相同可以使頁面看起來更加和諧美觀。

調(diào)色板一個(gè)好的配色對(duì)界面美觀的重要性不言而喻。Sketch 也貼心的為用戶提供了顏色版用于記錄顏色，方便你重復(fù)使用，見下圖。

最主要的是一下幾個(gè)顏色，背景色，默認(rèn)字體顏色，減淡字體顏色，強(qiáng)調(diào)色，邊框顏色，和適當(dāng)數(shù)量的輔助色[Material Design鼓勵(lì)用多種顏色，用鮮明大膽顏色]。這里再說一下陰影顏色，Material Design 建議使用 #000 全黑，然后減弱 opacity 不透明度，而不是直接設(shè)置灰度顏色。因?yàn)檫@樣可以保證陰影不論在亮色還是暗色背景下都有一個(gè)良好的視覺效果。

##操作

頁面Sketch 的左側(cè)提供了頁面導(dǎo)航列表。用戶可以創(chuàng)建不同頁面，同一頁面中又可以創(chuàng)建不同畫布。這樣一來，用戶便可以將網(wǎng)站的所有頁面有條理的保存在一個(gè) Sketch File 中[見下圖]，it is amazing!

間距Sketch 對(duì)于排版可謂是考慮的極其周到。學(xué)習(xí) CSS 的朋友應(yīng)該知道在排版時(shí)，對(duì)于 margin 的四個(gè)數(shù)值往往糾結(jié)不以，往往憑感覺設(shè)置。而 Sketch 可以在設(shè)計(jì)時(shí)就解決這個(gè)問題，鼠標(biāo)選中指定元素，按下 Alt 鍵，界面自動(dòng)現(xiàn)實(shí)該元素的 margin top, right, bottom, left. 精確到 1px 的設(shè)計(jì)，讓設(shè)計(jì)稿和實(shí)現(xiàn)稿無縫對(duì)接，見下圖。

SymbolSketch 還提供了保存組件的功能。如果某些元素在設(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)站的目的是什么，用戶群是誰，為了實(shí)現(xiàn)目的需要有哪些功能，這些功能如何組織成頁面，頁面之間如何跳轉(zhuǎn)，功能如何實(shí)現(xiàn)等。比如該網(wǎng)站是銷售網(wǎng)站模板的購物網(wǎng)站，導(dǎo)航欄有如下幾項(xiàng)：主頁，聯(lián)系頁，支持頁，購物頁，個(gè)人賬戶，購物車，如下圖。

先設(shè)置主頁，然后由主頁發(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 本身，可以第三方開發(fā)的。在這里像那些默默奉獻(xiàn)的偉大程序員們表示無比的敬意。強(qiáng)推插件下載軟件 Sketch Toolbox [見下圖]?？梢砸绘I下載/卸載插件，再也不用從 GitHub 上下載然后拖到指定文件夾了，節(jié)省了大量時(shí)間。

Sketch 用了快三個(gè)月了，插件也嘗試過20多個(gè)，現(xiàn)在把我喜歡的插件分享如下，希望能夠幫到朋友們。

Artboardzoom : Cmd + 4 一鍵 zoom in 畫布到適當(dāng)大小。

Sketch Arrange Artboards ：可以將多個(gè)畫布整齊排列。

Content Generator Sketch Plugin ：添加偽元素必備。

Generate Gif Sketch 也可以做 Gif 動(dòng)圖。

Magicmirror ：透視變形圖讓你的作品集看起來更酷。

Sketch User Fontawesome ：一鍵添加字體圖標(biāo)。

##總結(jié)

盡管 Sketch 相比 PS 而言缺乏很多操作位圖的功能，插件穩(wěn)定性不足，同時(shí)限定了只能 Mac 用戶使用。但作為一個(gè)初學(xué)者，個(gè)人確實(shí)覺的使用 Sketch 比 Photoshop 更加適合 UI 設(shè)計(jì)。它的各項(xiàng)工具都是專門為 UI 流程進(jìn)行設(shè)計(jì)的，比如畫布尺寸，控件，指定尺寸導(dǎo)出等。相信使用 Sketch 可以極大的提升你的工作流程，從項(xiàng)目初期設(shè)計(jì)階段到項(xiàng)目最終實(shí)施階段。還沒有嘗試過 Sketch 嗎？更多功能等待你去探索呢。如果你有其他的 tricks，let me know in the comments!

##題外

希望 Dribbble 的設(shè)計(jì)師大?？梢越o個(gè)邀請(qǐng)碼讓我也有機(jī)會(huì)發(fā)布作品，非常感謝。

本人打算今年暑假去那里實(shí)習(xí) interaction design 或者 user experience design, 希望在 Silicon Valley Uber 總部上班的朋友能提供個(gè)內(nèi)推機(jī)會(huì)。

有在美國這個(gè)暑假打算在加州找實(shí)習(xí)的小伙伴么，求組隊(duì)，個(gè)人微信在簡書首頁，求加。

來自： http://joeyqiang.me/design/2016/01/06/如何用 Sketch 進(jìn)行網(wǎng)頁設(shè)計(jì)/

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com