Sketch實用新技巧詳解

標籤：

作為目前產品原型設計中的利器，Sketch特別適合移動APP和響應式網頁的設計開發。下面我們就來看看Sketch的一些入門指南以及如何利用Mockplus的外掛程式實現互動效果。

Sketch是一款基於Mac的向量繪圖應用。面對著功能複雜繁瑣的photoshop，Sketch相比較而言身輕如燕。最近也掀起了用Sketch設計產品原型的熱潮，因為用它來畫設計稿簡直輕而易舉，相比於Axure它有更豐富的組件庫和更全面的尺寸控制，讓我們的原型圖更逼真，更有利於交流和前期的展示。

作為目前產品原型設計中的利器，Sketch特別適合移動APP和響應式網頁的設計開發。下面我們就來看看Sketch的一些入門指南以及如何利用Mockplus的外掛程式實現互動效果。

一、 Artboard

在安裝好Sketch點擊金燦燦的鑽石icon前，我們首先得明確一個概念：Sketch是基於向量的繪圖軟體，沒有傳統的畫布的概念，整個空白地區都可進行創作， 但實際上我們也需要一個“畫框”設計限定我們的設計，在skech中這個東西叫做artboard。我們可以將一個app介面看做一個artboard，然後在同一介面中對比和查看或者串聯所有互動過程。然後我們可以將這些artboard分別匯出為pdf或者分為一個個的圖片檔案，方便產品經理或開發人員查看。

具體的操作的話，在介面左上方點擊insert，快顯功能表中選擇Artboard，滑鼠變為十字，即可自由拖動，右側的屬性面板還可以精準設定大小；此外在選擇Artboard後，右側欄也會提供一些常見裝置的預設尺寸，單擊選擇合適的即可。

二、組件

Sketch內建了豐富的素材庫，包括安卓或者iOS系統中的原生控制項，我們可以直接將需要的部分拖到artboard即可，這樣一來節約出大量的時間，使我們可以將騰出來的時間用於更加核心的產品設計思考上。

點擊功能表列中的file-New from Template，會出現五種最常見的平台或設計風格的模板，開啟後即可選擇想要的組件。有個小技巧：artboard預設選擇iPhone6或7的尺寸，這樣在iOS應用表徵圖中的尺寸就無須調整，直接拖拽即可。

如果想要快速地複用組件的話，也可以將組件或模組轉變為Symbol，性質跟Mockplus中的母片類似，從而方便我們在多個頁面中複用某組內容。選中需要的組件點擊create symbol即可。

字型和圖層也跟組件一樣存在著不斷複用的需求，在一份設計稿中，單獨對每個元素調整會比較繁瑣，Sketch中的“文本樣式”就能解決這個問題，類似於Mockplus中格式刷的功能。可以根據需要，整理一套自己常用的樣式規範，將成共用的樣式文本，在需要的地方直接複用即可，不僅能提高效率，還能保證整體的美觀性。

三、可擴充性

可拓展性也是Sketch最大的特色之一。Sketch開放了第三方外掛程式介面，設計師可以在幾百種的外掛程式中輕鬆找到適合自己工作方式的外掛程式，一切為了設計師更方便和有效率的進行工作。

不過，需要明確的一點是，Sketch產出的是靜態視覺稿，沒有動態互動效果，也無法進行團隊協作和標註；而互動正是一個原型的靈魂，是展示原型邏輯和思維最直觀的方式。結合Mockplus就可以輕鬆將Sketch中完成的設計稿轉變為可互動的原型，只需要在Sketch中安裝Mockplus的外掛程式。在Mockplus 3.2版本中支援將Sktech的設計文檔匯出為Mockplus的mp專案檔，這樣你就發行就緒為雲項目，輕鬆地利用8種預覽方式示範自己的原型項目；也可以升級為Team 專案，從而和小夥伴們一起進行協作和批註。

此外，Mockplus 3.2版本還支援即時產生流程圖和腦圖設計模式，配合Sketch使用會讓你的原型設計事半功倍！點擊這裡瞭解3.2版本的更多功能：Mockplus 3.2前瞻，五大特色功能讓你驚喜！

 

 

來源：網路

Sketch實用新技巧詳解