Sketch for Mac是一款運行在Mac平臺上的專業(yè)矢量繪圖軟件，sketch mac 中文版提供了豐富的矢量繪圖和文字工具，你可以使用sketch mac 破解版來設(shè)計界面、網(wǎng)站、圖標(biāo)等，非常的實用。Sketch作為工具已經(jīng)足夠優(yōu)秀，但是玩轉(zhuǎn)Sketch系列不僅僅是工具教程，我們還想借著Sketch教程講解一些不一樣的東西，例如交互設(shè)計思考、最一線的項目實操經(jīng)驗、提高工作效率可行辦法等等。此次小編就帶大家了解下Sketch做原型設(shè)計。sketch永久激活版獲取方式在文章尾部。

1、虛擬項目說明

為方便教程的講解，后續(xù)教程中會加入一個虛擬的短視頻項目，同時，我們?yōu)檫@個項目取了一個好聽的名字：夜視。

2、在了解這些之前不要打開Sketch

在使用Sketch進(jìn)行原型設(shè)計之前，我們首先需要了解原型設(shè)計的三要素，分別是目標(biāo)、黑白、真實。

（1）目標(biāo)

原型需要達(dá)到什么樣的目標(biāo)？驗證我們的想法？是，但不夠細(xì)化。臨摹原型？是，學(xué)***，但缺乏思考。原型設(shè)計的目標(biāo)一定是具體的，細(xì)化的并且目標(biāo)明確的。例如今天我們所學(xué)習(xí)的夜視項目首頁設(shè)計，目標(biāo)就是通過首頁探討具體的框架定位，實現(xiàn)首頁瀏覽短視頻、搜索短視頻的需求。

（2）黑白

原型黑白就好，不要埋沒了視覺設(shè)計師的創(chuàng)意。而且，黑白的原型可以讓我們排除顏色的干擾項，專注于核心業(yè)務(wù)功能的實現(xiàn)。

（3）真實

原型一定要真實反映最終產(chǎn)品的樣子，按鈕是按鈕的形狀，而不是五角星；真實的文字內(nèi)容可能出現(xiàn)換行，而不是設(shè)計稿規(guī)定的同樣的4、5個字；用戶自發(fā)上傳的圖片可能很丑，達(dá)不到設(shè)計稿的精美圖片要求。

3、夜視首頁原型設(shè)計

（1）首頁功能分析

瀏覽短視頻：作為短視頻應(yīng)用，瀏覽感興趣的短視頻是最優(yōu)先需要滿足的需求，視頻展示包含兩大模塊：精選（banner）以及push流。push流視頻的信息又應(yīng)該包括最起碼的視頻標(biāo)題、發(fā)布時間、上傳者、以及視頻長度。

搜索短視頻：在海量內(nèi)容中查找感興趣的視頻內(nèi)容，標(biāo)準(zhǔn)配置。

APP導(dǎo)航：在原型設(shè)計時，導(dǎo)航設(shè)計一般在首頁就體現(xiàn)出來，夜視使用的是標(biāo)準(zhǔn)的底部tab導(dǎo)航，分為四個菜單：首頁、夜里、關(guān)注、我的。

（2）夜視短視頻首頁設(shè)計

做好功能分析之后，我們就可以利用Sketch來進(jìn)行首頁的原型設(shè)計了。為了“節(jié)約開發(fā)資源”，我們先開發(fā)IOS版本，所以，在設(shè)計中，我們先采用IOS的設(shè)計標(biāo)準(zhǔn)。

第一步：框架搭建

還記得第四期中的Artboard（畫布）嗎？它可以很方便的知道iPhone7的尺寸。操作路徑為插入Artboard，在檢查器中選擇“Apple Device”-“iPhone7”即可看到原型尺寸為“375*667”。

由于我們不建議使用單獨的Artboard創(chuàng)建單獨的頁面，所以我們可以先新建一個較大尺寸的Artboard，再在Artboard上面畫一個375*667的矩形，就初步完成我們的框架。

第二步：添加狀態(tài)欄和菜單欄

第二步就是添加狀態(tài)欄（20px）和菜單欄（49px），在Sketch中添加這兩者將變得非常簡單，完全可以不用去網(wǎng)上搜索iOS設(shè)計規(guī)范，只需要在Sketch菜單欄中選擇“File”-“New From Template”-“IOS UI Design”即可看到Sketch自帶的IOS組件庫，再從中選擇狀態(tài)欄(status bar)、主菜單欄(Tab bars)即可，真正的傻瓜式操作。

另外，我們可以適當(dāng)增加定位線來進(jìn)行定位，規(guī)范我們的設(shè)計。

第三步：設(shè)計運營banner

短視頻作為內(nèi)容輸出產(chǎn)品，首先需要考慮是為用戶減少決策范圍；另外，在有限的空間內(nèi)在首屏為用戶呈現(xiàn)更多的內(nèi)容，沒有比輪播運營banner更好的方式了。還記得我們的原型設(shè)計三要素嗎？使用真實的圖片、真實的文字吧。

第四步：設(shè)計短視頻push流

即首頁除了輪播運營banner外，其他需要提供給用戶的內(nèi)容。展示的方式見仁見智：可以采用九宮格的方式，在有限的空間內(nèi)展示更多的內(nèi)容，常見于大型視頻APP，例如騰訊視頻；可以采用富有沖擊力的列表展示方式，每一行展示一個內(nèi)容，例如開眼。夜視采用的是類似開眼的展示方式，以推薦精品應(yīng)用為主。展示內(nèi)容包括：視頻預(yù)覽圖、視頻標(biāo)題、視頻作者、視頻長度、發(fā)布日期等。

注意：短視頻應(yīng)用，展示視頻長度是必須的，它能讓用戶心理對短視頻的長度有一個預(yù)期，合理安排碎片化時間。

第五步：添加搜索

不要漏了搜索，搜索對于內(nèi)容應(yīng)用來說至關(guān)重要，搜索的入口，既要實現(xiàn)對用戶瀏覽視頻不造成困擾，又要放在顯眼的位置，方便用戶調(diào)用，在首頁頂部的位置放置搜索按鈕是較好的選擇。

以上就是小編為大家?guī)鞸ketch進(jìn)階教程-原型設(shè)計入門介紹，還有更多詳細(xì)、實用的功能以及相關(guān)軟件sketch和其他Mac軟件獲取，大家快來Macdown.com自行探索一番吧。