使用Sketch 畫UI (含Prototyping 簡易入門教學) - 逗點人7netic ...

Sketch 是近年流行的UI 介面設計工具，簡單上手的設計讓許多設計師（包括我）紛紛從PS 和AI(以拉)等其他工具跳槽了。

Sketch目前只有Mac 版，官方 ... Skiptocontent 使用Sketch畫UI(含Prototyping簡易入門教學) Sketch 是近年流行的UI介面設計工具，簡單上手的設計讓許多設計師（包括我）紛紛從PS和AI(以拉)等其他工具跳槽了。

Sketch目前只有Mac版，官方提供30天試用版，正式版為US99（約台幣三千）。

Sketch的優點 專門為UI設計而生（Web、App、Mobile等） 向量繪圖軟體（即使放大和縮小都不會失真） 比Adobe系列輕量（安裝後為46.6MB/Adobe至少1GB以上…） 簡單好上手（內建豐富和可擴充的UI模版） 可以取代大部分PS、AI功能 知名網路、科技公司都在用 一般在產品開發的過程中，設計師對應到工程師可能溝通不良的原因，除了設計流程的問題外，有很大一部分是因為對於彼此的世界不了解。

因此工程師和設計師若是試著了解對方的語言，就可以降低彼此的溝通成本囉！而Sketch就是扮演著設計師和工程師之間溝通橋樑的角色：設計師將腦海中設計的圖像用Sketch呈現，讓工程師了解設計方向與呈現方式。

在UI設計流程中，會有以下三種階段，Sketch就是在Mockup流程中，扮演設計師和工程師之間溝通橋樑的角色： Wireframe（線框圖） 為初期討論產品架構和基本功能。

通常使用紙筆手繪，但建議於完成後電子化。

修改成本低。

Mockup（視覺稿） 於Mockup階段著重於整體視覺、排版的靜態討論和確認，而Sketch主要會是在Mockup階段進行設計。

Prototype（原型架構） 確認互動設計的流程並確認架構和視覺規劃是否有需要調整之處。

接近(或等於)最終產品、修改成本最高。

  使用Sketch內建Template元件樣板庫 先 下載 開啟Sketch後，會看到以下畫面 可依專案內容，使用內建Templates或新增NewDocument，我們先選擇MaterialDesign，打開後有滿滿的免費元件樣版庫可以使用！ 驚呼之餘，我們點選工具列左上方Insert>Artboard 接著就複製模板的元件，貼上至Artboard。

設計完成的畫面可以使用右上方Export 匯出或Share直接分享你的設計圖囉！   使用Sketch設計UI 接著來介紹一下Sketch工作空間的版面配置： 上方為工具列、中間是工作區、左邊是Pages(圖層區)，右邊為屬性區(調整位置、圖片大小、透明度等)。

建立iPhoneX介面Artboard（Insert>Artboard）  右方屬性區有許多app樣板，選擇iPhoneX，再複製貼上樣版庫的元件，即可簡單輕鬆的設計iPhoneX的介面了！   是不是很簡單呢？（笑）   以下來介紹一些Sketch好用、強大的功能： 1.Artboard 類似以拉裡的Artboard，為每個你設計的流程畫面，Sketch用Page來區分不同Artboard，也可利用不同的Artboard來製作各種尺寸的icon。

2.建立可同步修改的Symbols、Styles 這應該是我從AI跳槽到Sketch的一大推力，把元素轉成同步的Symbols，像是一個模組一樣可以重複使用，若需要修改，只要改Symbols就可以同步完成！ 假如以一個App來說，所有的畫面都有一個黑色的NavigationBar，萬一某天客戶說要全改成白色背景和修改文字顏色，在Photoshop或以拉要怎麼製作? OS:可能會改到天荒地老哪…   3.Plugins常用外掛 推薦外掛管理工具 SketchToolbox ，已整理好超多外掛，直接下載安裝到指定目錄即可！ 外掛管理工具SketchToolbox Notebook註解好幫手 SketchFlinto從Mockup到Prototype ContentGeneratorSketchPlugin生成假資料 SketchMeasure測量位置、大小 IconStamper簡單生成不同大小icon   關於作者： @7netic以淺顯易懂的方式，介紹分享平面設計領域，並衍伸出其它不同的創意角度與觀點，從文字設計、網站編排、平面設計、品牌視覺、數位∕動態、影像紀錄、插畫作品…等等，希望帶給大家多元視覺的風格體驗！喜歡我們的文章嗎？歡迎分享按讚給予我們支持和鼓勵！分享此文：分享到Twitter(在新視窗中開啟)按一下以分享至Facebook(在新視窗中開啟)請按讚：喜歡正在載入... 相關 7netic2018-01-10T14:30:29+08:00 相關文章： 設計師入坑指南-給想踏入設計業的人幾個建議與入行方法 257月,2021 | 0條評論 利用網站分析評分工具，獲取更高的SEO分數（內含詳細介紹） 57月,2021 | 0條評論 7個取得『網站速度優化工具』漂亮分數的秘訣 286月,2021 | 0條評論 使用.htaccess強制將HTTP轉成HTTPS（2020更新版本） 313月,2020 | 0條評論 Pageloadlink   載入迴響中...   發表迴響… 電子郵件(必要) 名稱(必要) 網站 %d位部落客按了讚： GotoTop