Sketch進階教程-原型設計入門

Sketch for Mac是一款運行在Mac平臺上的專業矢量繪圖軟件，sketch mac 中文破解版提供了豐富的矢量繪圖和文字工具，你可使用sketch mac 破解版來設計界面、網站、圖標等，很是的實用。Sketch做爲工具已經足夠優秀，可是玩轉Sketch系列不只僅是工具教程，咱們還想借着Sketch教程講解一些不同的東西，例如交互設計思考、最一線的項目實操經驗、提升工做效率可行辦法等等。這次小編就帶你們瞭解下Sketch作原型設計。sketch永久激活版獲取方式在文章尾部。

一、虛擬項目說明
爲方便教程的講解，後續教程中會加入一個虛擬的短視頻項目，同時，咱們爲這個項目取了一個好聽的名字：夜視。

二、在瞭解這些以前不要打開Sketch
在使用Sketch進行原型設計以前，咱們首先須要瞭解原型設計的三要素，分別是目標、黑白、真實。

（1）目標
原型須要達到什麼樣的目標？驗證咱們的想法？是，但不夠細化。臨摹原型？是，學習專用，但缺少思考。原型設計的目標必定是具體的，細化的而且目標明確的。例現在天咱們所學習的夜視項目首頁設計，目標就是經過首頁探討具體的框架定位，實現首頁瀏覽短視頻、搜索短視頻的需求。

（2）黑白
原型黑白就好，不要埋沒了視覺設計師的創意。並且，黑白的原型可讓咱們排除顏色的干擾項，專一於核心業務功能的實現。

（3）真實
原型必定要真實反映最終產品的樣子，按鈕是按鈕的形狀，而不是五角星；真實的文字內容可能出現換行，而不是設計稿規定的一樣的四、5個字；用戶自發上傳的圖片可能很醜，達不到設計稿的精美圖片要求。

三、夜視首頁原型設計

（1）首頁功能分析
瀏覽短視頻：做爲短視頻應用，瀏覽感興趣的短視頻是最優先須要知足的需求，視頻展現包含兩大模塊：精選（banner）以及push流。push流視頻的信息又應該包括最起碼的視頻標題、發佈時間、上傳者、以及視頻長度。
搜索短視頻：在海量內容中查找感興趣的視頻內容，標準配置。
APP導航：在原型設計時，導航設計通常在首頁就體現出來，夜視使用的是標準的底部tab導航，分爲四個菜單：首頁、夜裏、關注、個人。

（2）夜視短視頻首頁設計
作好功能分析以後，咱們就能夠利用Sketch來進行首頁的原型設計了。爲了「節約開發資源」，咱們先開發IOS版本，因此，在設計中，咱們先採用IOS的設計標準。

第一步：框架搭建
還記得第四期中的Artboard（畫布）嗎？它能夠很方便的知道iPhone7的尺寸。操做路徑爲插入Artboard，在檢查器中選擇「Apple Device」-「iPhone7」便可看到原型尺寸爲「375*667」。

因爲咱們不建議使用單獨的Artboard建立單獨的頁面，因此咱們能夠先新建一個較大尺寸的Artboard，再在Artboard上面畫一個375*667的矩形，就初步完成咱們的框架。

第二步：添加狀態欄和菜單欄
第二步就是添加狀態欄（20px）和菜單欄（49px），在Sketch中添加這二者將變得很是簡單，徹底能夠不用去網上搜索iOS設計規範，只須要在Sketch菜單欄中選擇「File」-「New From Template」-「IOS UI Design」便可看到Sketch自帶的IOS組件庫，再從中選擇狀態欄(status bar)、主菜單欄(Tab bars)便可，真正的傻瓜式操做。

另外，咱們能夠適當增長定位線來進行定位，規範咱們的設計。

第三步：設計運營banner
短視頻做爲內容輸出產品，首先須要考慮是爲用戶減小決策範圍；另外，在有限的空間內在首屏爲用戶呈現更多的內容，沒有比輪播運營banner更好的方式了。還記得咱們的原型設計三要素嗎？使用真實的圖片、真實的文字吧。

第四步：設計短視頻push流
即首頁除了輪播運營banner外，其餘須要提供給用戶的內容。展現的方式見仁見智：能夠採用九宮格的方式，在有限的空間內展現更多的內容，常見於大型視頻APP，例如騰訊視頻；能夠採用富有衝擊力的列表展現方式，每一行展現一個內容，例如開眼。夜視採用的是相似開眼的展現方式，以推薦精品應用爲主。展現內容包括：視頻預覽圖、視頻標題、視頻做者、視頻長度、發佈日期等。
注意：短視頻應用，展現視頻長度是必須的，它能讓用戶心理對短視頻的長度有一個預期，合理安排碎片化時間。

第五步：添加搜索
不要漏了搜索，搜索對於內容應用來講相當重要，搜索的入口，既要實現對用戶瀏覽視頻不形成困擾，又要放在顯眼的位置，方便用戶調用，在首頁頂部的位置放置搜索按鈕是較好的選擇。

以上就是小編爲你們帶來Sketch進階教程-原型設計入門介紹，還有更多詳細、實用的功能以及相關軟件sketch和其餘Mac軟件獲取，你們快來Macdown.com自行探索一番吧。