給工程師的Sketch Prototyping 簡易入門教學 - TechBridge 技術 ...

Sketch 是一個Mac 上的輕量級介面設計工具。

2010 年由荷蘭公司Bohemian Coding 所創建，目前提供30 天試用版，正式版99 鎂（教育價5折優惠），不過 ... TechBridge技術共筆部落格 Menu Home About Tags Archives RSS SignIn 前言 Sketch是近來非常火紅的輕量級UI設計工具，簡易好上手的設計讓許多設計師紛紛從PS和以拉等其他工具跳槽過來，整個Sketch生態系也蓬勃發展。

雖然筆者本業是工程師，但前陣子趁著買Flinto（可以很輕易將Sketch的靜態頁面轉成Prototype）送Sketch的行銷活動時同時入手了這兩套設計工具（雖然我把它當成買Sketch送Flinto啦：P），因此藉著機會分享一下給工程師的SketchPrototyping簡易入門教學。

當然有些讀者會疑惑：工程師學Sketch是要設計師搶飯碗嗎？（事實上很難啦） 一般來說，在整個產品開發的過程當中，工程師和設計師的愛恨情仇已經可以編成好幾檔連續劇了，然而溝通不良的原因除了設計流程的問題外，有很大一部分是因為對於彼此的世界不了解（一個住火星，一個住土星？）。

因此工程師和設計師若是試著了解對方的語言，或許就可以降低彼此的溝通成本，從此相親相愛了呢！而天賦異秉的人甚至有機會成為新創團隊人見人愛的超全端工程師（superfull-stack engineer）獨角獸，集設計、前後端、行動端、行銷業務技能於一身（咦）？好啦，言歸正傳，接下來就讓我們好好了解Sketch這個好用工具吧！ Sketch基本介紹 Sketch是一個Mac上的輕量級介面設計工具。

2010年由荷蘭公司BohemianCoding所創建，目前提供30天試用版，正式版99鎂（教育價5折優惠），不過目前只有提供Mac版本，所以只能先跟使用其他作業系統的朋友說聲Sorry啦！ 究竟Sketch有哪些優點，讓許多設計師因此琵琶別抱呢？ Sketch優點 活躍的第三方套件生態系！ 專為UI設計而生（Artboard設計可以方便UI設計） 輕量級，簡單好上手（工程師OS：就像Sublime之於Eclipse） 內建和可擴充的豐富UI模版（iOS、MaterialDesign等） 搭配Flinto、Zeplin可讓工程師更開心，設計師提早下班 可以取代大部分PS、以拉、Fireworks等功能 知名網路、科技公司都在用 看完了Sketch優點，相信讀者們一定摩拳擦掌準備牛刀小試啦！ 使用Sketch設計MobileAppUI 一般設計流程我們通常會有以下三種階段： Wireframe（線框圖） 保真度低（lowfidelity）、修改成本低。

適合初期討論產品架構和基本功能。

通常使用紙筆手繪，但建議於完成後電子化 Mockup（視覺稿） 保真度中（middlefidelity）、修改成本中。

於Mockup階段著重於整體視覺、排版的靜態討論和確認，而Sketch主要會是在Mockup階段進行設計 Prototype（原型） 保真度高（highfidelity），接近最終產品、修改成本高。

確認互動設計的流程並確認架構和視覺規劃是否有需要調整之處 先介紹一下Sketch工作空間，左邊是圖層區，右邊是屬性、中間是工作區、上面是工具欄： 工具欄可以點擊右鍵自定義： 由於UI設計是Sketch主要的強項（尤其是行動端），在Sketch中Artboard是基礎的設計單元（成果展示區域），我們可以在一個Page中定義多個Artboard。

根據Sketch的設計，我們可以一次瀏覽多個Artboard（也可說是多個介面），這樣可以更清楚整個設計flow，這是Sketch蠻大的一個優點（一覽眾山小？）。

現在，我們終於開始設計我們的新AppUI啦！首先，我們透過左上方的新增按鈕新增了一個Artboard，並選擇了iPhone6當做設計基底（有iPhone、Android、RWD等可以選）。

接下來我們要打開在Sketch中內建的元件模版，iOS和MaterialDesign、icon設計等（網路上也有很多網友提供自己的設計可以下載），這邊因為是使用iPhone6的Artboard，因此我們打開iOS元件模版。

接下來進行複製貼上大法！將元件複製到Artboard上就可以了！現在小工程師也可以設計簡單的UI啦！可以透過右上角工具預覽或是分享的方式看到成果！ 從Mockup到Prototype 透過Sketch設計完成靜態檔案，若我們想將靜態檔案轉成Prototype進行使用者測試，我們可以使用Flinto好工具！透過簡單的連結就可以讓你的Sketch動起來啦（目前支援了簡單的手勢和動畫）！ 結論 以上就是給工程師的SketchPrototyping簡易入門教學。

事實上透過整合Zeplin（可以方便註解和查詢設計相對位置和色碼）、Invision（支援變更記錄，可以當做版本控管使用）等工具進行協作，還可以更加加快整個產品設計流程。

透過前期的完善溝通討論，不但可以降低後續的溝通成本更可以讓完成的產品更接近最初的設計，更重要的是讓工程師和設計師的感情更好了！若你對於Sketch有興趣可以參考這份投影片有更完整的教學介紹。

另外也可以參考官方教學影片。

最後再次強調工程師學Sketch並非要去搶設計師搶飯碗。

而是工程師和設計師若是試著了解對方的語言，或許就可以降低彼此的溝通成本。

同理也建議設計師們可以去試著學一些簡單的程式語言基礎概念。

筆者才疏學淺，若讀者有任何學習心得也歡迎分享交流：） 常用外掛 外掛管理工具SketchToolbox Notebook註解好幫手 SketchFlinto從Mockup到Prototype ContentGeneratorSketchPlugin生成假資料 SketchMeasure測量位置、大小 IconStamper簡單生成不同大小icon 延伸閱讀 Sketch簡體中文教學 Sketch問答 關於作者： @kdchang文藝型開發者，夢想是做出人們想用的產品和辦一所心目中理想的學校。

AStarter&Maker.JavaScript,Python&Arduino/Androidlover.:) #Sketch #Prototyping #Wireframe #Mockup KDChang Follow Following Founder@TechBridge/CoderBridge 文藝型開發者，夢想是做出人們想用的產品和辦一所心目中理想的學校。

AStarter,SoftwareEngineer&Maker.JavaScript,Python&Arduino/Androidlover.:) Facebook RelatedPosts [筆記]後端基礎-PHP krebikshaw 七天打造自己的GoogleMap應用入門-Day06 ClayGao 關於Background-image與響應式 hoyi-23 Newsletter Subscribe Comments Submit SignIntojoininthediscussion. Edit Submit Edit Submit Reply Submit