Mockup設計］頁面設計｜以Figma製作介面設計精稿

風格設定與範例設計 使用者介面設計講義 Userinterfacedesign，UI 首頁/使用者介面設計講義 Mockup設計頁面設計｜以Figma製作介面設計精稿 風格設定與範例設計 UI無障礙設計 FigmaMockup｜精稿製作 功能與技巧 作業說明 ［Mockup精稿］風格設定與範例設計 風格設定 風格與美學：以Wireframe完成溝通後，便開始著手風格與美學設計。

我們會跟客戶討論情緒板（mood-board)還有他們希望透過哪些配色來傳達訊息（例如融合品牌識別），以確定顏色組合緊密地配合UI元素和品牌形象。

UI元素及不同狀態：想取得設計靈感，市場上已存在大量免費的UI元件包可以使用。

不過如果你想別樹一幟，還是要透過產品來展現獨特的個人風格。

同時還會一邊參考其他設計作品集和內容，一邊收集靈感。

視覺稿：當大部份顏色組合定案以後，接著我們會開始進行mockup。

不過在取得客戶或PM的初步意見之前，建議不要一口氣完成所有mockup。

最好循序漸進地先完成主要的頁面，待收到反饋後才繼續餘下的設計（例如空白的狀態）。

既可以縮短反饋的時間，同時幫助客戶省下反覆修改主設計的不必要支出。

工作重點：1.設計插圖、圖示、圖像和UI元件。

2.從線框規劃到設計完稿，我們都會根據客戶已確認的設計風格、方向、UI元素及各種狀態進行設計。

資料來源：打造AppleAppStore得獎程式：我們的設計師是這樣設計的！ 頁面設計風格｜範例 插畫為主的APP CaseStudy:ABetterWaytoHandleYourMoney｜以黑白為主色彩簡潔的插畫風金融APP KodaAppConcept FoodOrderingSystem-UI/UXCaseStudy｜外送服務APP 以女性為主要對象到插畫風格APP 色彩為主的APP MobileAppforMuseums｜優雅的博物館APP Okkocinema-redesign.UX&UIstory｜具有強烈對比色彩的影城APP SophieMessagingappuikit｜訊息APP YogaAPP｜女性柔性漸層色調瑜伽APP XARA'SKITCHEN-FOODAPPCASESTUDY｜以明亮黃色為主的餐廳APP 粉嫩色彩的果汁APP 以產品或圖片為主的APP MaynoothFurnitureWebsite&Appdesign｜風格優雅的家具網站及APP RecipeAppUXCaseStudy｜食譜APP ＡＰＰ案例 LuvlyApp女生專屬的匿名社群 相關推薦文章連結 為使用者設計一個體貼的註冊登入頁 超完整登入註冊流程UX分析 UI/UX｜註冊登入流程．超完整的深入教學（上） UX設計師寫給UI新手的7個法則（上） UX設計師寫給UI新手的7個法則（下） UI設計界大勢潮流：扁平化設計 解讀！介面設計的風格 知名設計師展望2019年：UI、UX設計將會出現十大趨勢 如何成為一個UIDesigner？ 設計師在日本的UI專案設計流程 WelcomePage｜歡迎頁面｜教學影片 LoginScreenUIDesignwithFigma FigmaTutorial-SignInUIDesign [BEGINNER]Lesson10:Project2SplashScreenAppDesign-Part1(FIGMAUX/UIAPPDESIGNCOURSE) UserInterfaceDesign｜無障礙設計 無障礙網站的廣義目的是希望對於所有身障者、所有大眾，能有一個好操作無虞的網路環境，因此網站設計也要顧及更多面向，以下參考文章提供較為詳細的無障礙網頁設計說明，目前以參考【無障礙網頁祕技】介面設計大補丸，專注在「介面設計」上，在接下來的設計上，提醒更多需要注意的設計細節，讓介面設計更溫暖、更好理解，更好操作。

無障礙設計四原則 介面設計於無障礙設計上需注意之細節設計 於Figma中，製做prototype互動設計時，出現的灰色圓型，即代表手指大小，請注意每個需點選的設計，大小是否合宜？是否保持適當距離？點選時是否舒適順暢？都是在設計介面時的重要考量。

讓元件能輕易被點擊可點擊的元件，包含按鈕或icon，必須確保有一定的大小，不管是用電腦瀏覽、或是手機螢幕觸碰點擊，都能夠方便點選及辨識。

精簡的按鈕字數 保持按鈕間的間距 適當的文字與背景對比度 給予文字內容行高與段落間距 文字不能過小及過細 賦予元件強調樣式 更友善的表單設計 避免單靠顏色傳遞資訊 提供網站導覽頁 延伸閱讀｜ 【無障礙網頁祕技】介面設計大補丸 【無障礙網頁祕技】認識無障礙網頁與分級 可達性設計(DesignforAccessibility)—基於介面之上 符合無障礙規範一定要了解！把「通用設計」的思考融入骨子裡 我們都應該了解的無障礙網頁概念 ［Mockup設計］頁面設計｜以Figma製作介面設計精稿 FigmaMockup｜製作步驟 確定APP尺寸 設定標準色、輔助色等樣式（ColorStyle） 設定字體及樣式（Style） 設定按鈕、表單、對話框等風格樣式，並設為組件（Component） 是否有插畫？繪製插畫及相關圖像 蒐集產品照片、相關圖片、出現的文字等相關資訊 開始製作，注意無障礙設計原則，並即時修改各項設定 手機下載FigmaMirror，並確認按鈕、文字大小是否適合？閱讀是否舒適？流程是否順暢？ 範例影音 Mockup設計以Figma製作介面設計精稿｜案例解析(109-2) 可參考範例影片，或參照以下製作步驟的逐步說明，以此延伸至其他頁面，完成精稿製作。

上課練習範例 確定APP尺寸 使用Frame(框架)工具，選擇右側APP尺寸，開始製作。

畫面選定的是iPhone11Pro/X，尺寸為375pxX812px。

設定標準色、輔助色等樣式 使用設定好的情緒板（MoodBoard），選取imagePalette｜圖像配色提取工具，快速產生產品建議色彩。

可由這些色彩中調整為主色調與輔助色等。

當然也可以直接使用從photoshop中取得的色彩。

（上一張情緒板內容） 設定字體及樣式 請預先設定好幾種常用的字體樣式，以方便後續的設計與修改，建議的中文字體為思源黑體及明體，是用中英文字體，且有多種粗細變化： NotoSansTC｜非襯線字｜思源黑體｜七種粗細等級 NotoSerifTC｜襯線字｜思源明體｜七種粗細等級 若覺得字體規格不符預期，也可以編輯修改樣式設定。

設定按鈕、表單、對話框等風格樣式 設計符合風格之按鈕、輸入框、功能列等，並將之建立為組件（CreateCompenent）。

課堂範例，暫時利用利用iconfy插件功能，設計『功能列表』，並將之建立為組件（CreateCompenent）。

實際製作，請以APP風格，設計屬於自己專屬的ICON功能列表。

製作歡迎頁 參考Figma範例，製作歡迎頁、註冊頁、列表頁。

歡迎頁，以圖片為背景，利用Unsplash插件功能，以及圖片編輯功能，加上漸層效果，使圖片更有層次，加上歡迎文字，以及設定好為組件的按鈕，修改文字 製作註冊頁 利用設定好的組件，修改文字，成為註冊頁 製作列表頁 利用設定好的組件，加以修改，並利用Unsplash插件功能，豐富畫面，成為列表頁，注意文字樣式的對應與層次感。

注意上方顯示列及下方功能列表的對齊方式，並勾選鎖定。

歡迎頁、註冊頁、列表頁 是否有插畫？繪製插畫及相關圖像 開始製作，注意無障礙設計原則，並即時修改各項設定 手機下載FigmaMirror，並確認按鈕、文字大小是否適合？閱讀是否舒適？流程是否順暢？ DesignSystem｜參考範例 MaterialBaselineDesignKit(Community) iOS/iPadOS13DesignUIKit(Community) Figmaplugins｜AutoLayout｜自動排版｜Tips&Tricks｜小技巧 Figmaplugins｜推薦 Unsplash｜圖庫｜可直接獲得免費高畫質圖庫相片｜可以直接插入隨機圖像，或搜索特定圖像。

除了畫質精美外，Unsplash還允許將圖像免費用於商業和個人專案。

ImagePalette｜圖像配色提取｜ImagePalette幫你從所選圖片中提取5種顏色，很適合用來定義產品與品牌形象類型的介面色彩 Mapsicle｜自動建置模擬地圖 ClayMockups3D｜使用3D模型樣式的設備模型創建模型。

為您的模型自定義顏色，相機角度和設備模型。

包括適用於iPhone11，Pixel4和MacbookPro的型號。

Vectary3DElements｜Figma的Vectary3D插件可在此處為2D設計添加缺少的三維尺寸。

將您的Figma設計放入預定義的3D模型中，或加載自定義3D元素以增強設計。

Webgradients｜色彩漸層｜可以協助設計師快速製作漸層，無須自己吸色選取。

內建多種漂亮的漸層配色 Blobs｜創建不規則向量色塊｜讓你輕鬆創建有機斑點形狀。

生成的每個形狀都是獨一的，很適合用來做Landingpage的背景。

透過設定可以控制形狀的節點數，形狀是使用SVG創建的，能得到不失真且線條優雅的曲線。

Figmotion｜Figmotion是在Figma中內置的動畫工具。

由於不需要切換到完全獨立的運動工具（例如Principle，Haiku或AfterEffects），這使動畫製作變得更加輕鬆便捷。

為你試用-給Figmanewbies的21款plugin與資源 Automatework.Bringinrealdata.Extendwhat’spossiblewithFigmaPlugins. AutoLayout｜自動排版 AutoLayout｜自動排版，是Figma2019年的新功能，可以使設計更為便利。

AutoLayout｜自動排版｜官方範例 Figma-Auto-Layout-playground-Community 使用自動排版創建動態設計｜CreatedynamicdesignswithAutoLayout 使用自動排版設計，更多設計，更少尺寸｜Designmore,resizeless,withAutoLayout AutoLayout｜自動排版｜Tips&Tricks｜小技巧｜教學影片 FigmaTutorial:DeviceFramesandScrolling｜Figma教程：裝置框架和滾動 Figma：裝置框架和滾動 Figma:AutoLayout:SimpleModal FigmaTips&Tricks-UIDesigner'sSuperpower 作業說明 Mockup設計與製作 第十三週：開始製作Mockup，以及色彩樣式、文字樣式、組件等。

第十四週：製作Mockup精稿與設定DesignSystm設計系統。

第十五週：製作Prototype，互動式精稿｜Behance線上發表製作 第十六週：遠距教學｜圖像設計 第十七週：期末報告，Behance發表 第十八週：期末報告，Behance發表，檢視期末成績與最後修改