使用者介面設計｜WireFrame

線框圖練習 使用者介面設計講義 Userinterfacedesign，UI 首頁/使用者介面設計講義 WireFrame線框圖 線框圖概述 線框圖範例 WireFrame資源 線框圖練習 課後作業 WireFrame｜線框圖 線框圖（Wireframe）是一種低保真度的設計原型，在去除所有視覺設計細節之下，進行頁面結構、功能、內容規劃。

初次接觸Wireframe的人會非常不習慣這種呈現方式，頁面上只有方框和文字，沒有圖片和色彩。

繪製Wireframe的目的在於確認每一個頁面的構成，重點在於畫面上要呈現什麼內容、而不是看起來漂不漂亮。

線框圖除去各種視覺影響的複雜元素，只用簡單的線條、方框和灰階色彩來繪製，將看到的人專注在該模型的功能和操作上。

不管是用手繪或是軟體繪圖都可以。

簡單來說，線框圖就是一個網站或是一個程式的介面草圖，在發展出一個真正的網頁/程式之前，必須先有個明確的架構，與客戶溝通，確認對方想要的型，再與其他的人（工程師、UI設計師）溝通、討論、實施產出。

如果在中途有發現不能使用或是無法放置的情況下，可適時地作修改，直到東西完整為止。

以下為幾項製作技巧： 謹慎使用視覺元素 為了降低認知的負擔，不必要的視覺元素越少越好，避免花俏的表現。

視覺元素的幾點使用建議： 所有的文字只使用深灰色，例如#333333 限制自己只用單一字型，例如黑體 最多只用三或四種字級大小，例如大標、次標題、一般內文、小字 不要用照片或插圖，系統要填入圖片的地方一律用方框打叉叉(或使用灰色塊) 不要用插畫風格的icon或裝飾性圖案，減少花俏，避免視覺風格的暗示 圖片來源：A-Simple-Wireframe-Kit 使用適當的比例做基礎畫布 建議選定目標裝置的比例尺寸，作為一開始的畫布大小。

圖片來源：iPhoneDevice&ScreenSizesandResolutions 只描繪UI元件以及使用UX文案 Wireframe是指示精確的建築藍圖，所以盡可能保持畫面上每一個文字、線條或幾何圖形簡潔，只為了表達規格而使用視覺元素。

參考文獻 繪製線框圖（Wireframe）的視覺處理小技巧 什麼是Wireframe? Wireframe線架構圖 Wireframe常用圖形 線框圖（Wireframe）標註的識別規劃小技巧 線框圖 螢幕尺寸相關觀念整理 WireFrame｜線框圖範例 APPWireFrame|手機APP線框圖｜UiFlow範例 You'reItWireframe流程圖 APPWireFrame|非灰階色調的手機APP線框圖 Presence APPWireFrame|黑底呈現的手機APP線框圖 Credee APPWireFrame|手機APP線框圖 完整線框圖請點連結：Wireframe-trip-app|手機APP線框圖 WebsiteWireFrame|網站設計登陸頁線框圖 OptimizedLandingPage(Website) Behanc上UI發表之WireFrame相關之呈現 FitnessAppUI/UXDesignKit TrafficPoliceTicketingApps|UIUXCaseStudy Veterinaryclinic|獸醫診所（人物誌） AbustrackingappUX/UICaseStudy（人物誌） YOGO-TripPlannerApp PetCareMobileAppUI/UX｜Figma檔案分享｜PetCareMobileApp Figma｜WireFrame資源 Figma｜WireFrame資源 以下提供Figma分享之WireFrame資源，大家可以利用這些資源製作出屬於自己的WireFrame可更快速的製作以順利溝通討論。

也可以自行在FigmaCommunity中，以WireFrame為關鍵字搜尋，可找到更多資源。

A-Simple-Wireframe-Kit AiOSAppWireframes MobileWireframeUIKit SimpleWireframeKit AntUXWireframes UXFlowWireframes FlowsToWireframes WireframesformobileUIdesign FlowsToWireframes FlowsToWireframes WireframeKit(WEB) contrawireframekit FigmaWireframeKit(WEB) InstagramiOS WireFrame｜線框圖練習 範例使用A-Simple-Wireframe-Kit做為元件資料庫。

大家可使用合適的資源，或自己繪製皆可。

本範例僅為練習之用，實際畫面及內容，以專案主題為主，請依類似的做法，自行繪製屬於自己的WireFrame（線框圖）。

WireFrame｜線框圖練習｜上課練習影音 首先在page中加入新的一頁，命名為『WireFrame練習』。

Frame選擇適合的裝置尺寸進行單位畫布，範例以iphone11pro為裝置尺寸。

切換的Assets資料庫介面。

加入圖框元素，將之調整為符合裝置的尺寸，作為底圖之表示。

加入中型按鈕，作為註冊與登入按鈕 調整按鈕尺寸，並修改文字（更簡約的線框圖，不更改文字） 修改下方按鈕為白底灰框，灰字，以做為區別。

調整字體樣式。

加入標題文字，加入字體樣式，完成歡迎頁。

利用資料庫中之元素，調整輸入框寬度，及相關位置，完成第二頁 將最後完整之WireFrame整理於Frame頁框中，或複製於簡報中，即完成線框圖之製作。

另調整順序，加上流程線，即完成UIFLOW之製作。

學長姐範例參考 可參考範例進行製作，需注意： 顏色盡量單純：黑灰白為主，頂多加入企業主色 確定手機螢幕尺寸規格 預留頂部訊息內容，可尋找時間電池訊息模組置入 將常用的元件設定組件 文字請輸入正確訊息，圖片可以灰色塊或交叉圖代替 學長姐範例 宜得利｜1081445074 a.mart愛買｜1085445048 金石堂書局｜1081445054 MOSOrder｜1081445042 CPBL｜1081445045 台北等公車AppReDisign COSTCO｜1081445047 QUEENSHOP｜1081445025 PXPAY｜1085445013 課後作業 延續進度，進行線框圖及UIFlow的製作： 請以『Figma展示範例』（內容及設計樣式可自行更改及設計，範本樣式僅供參考），持續完成期中作業的內容。