Wireframe｜Prototype｜互動式線框圖

使用者介面設計，教學網站，User interface design，UI，中國科大，視傳系. ... Figma中的互動式線框稿（Wireframe & Interactive Prototype） Wireframe & Prototype ... 使用者介面設計講義 Userinterfacedesign，UI 首頁/使用者介面設計講義 WireFramePrototype｜互動式線框圖 互動式線框圖 互動式線框圖資源 互動式線框稿範例 互動式線框圖練習 課後作業 互動式線框圖 線框稿 線框稿是一個低擬真度來呈現產品設計的表示法，在開發流程中使用它目的有以下三點: 呈現產品頁面上主要的資訊 呈現資訊在頁面上的排版與架構 可視覺化，便於描述使用者如何與產品互動 圖片來源：low-fidelityprototype 線框稿就像是建築師的藍圖，明確且清楚的定義房子要怎麼蓋。

線框稿中的元素應該是非常精簡的，通常設計師只會使用方框、線和灰階的底圖(來表現不同的階層)。

某些內容在初期還未確定或實作時，可先利用方框或假文字來表示，例如:圖片、影片與文字等等。

互動式線框稿 有時候，設計師希望提高線框稿的擬真度、強調介面設計的某些部分或讓使用者更快理解以利進行測試，設計師會快速的製作可互動的線框稿，也就是可點擊式線框稿。

初次與關係人或客戶介紹設計時，互動式線框稿將會是相當有用的。

當這些人問說按下這個按鈕會發生甚麼事情?提報者可以在互動式線框稿上馬上操作，讓他們看到結果。

這樣的方式肯定可以讓他們印象深刻並快速進入操作的情境中。

以線框稿簡報時須注意幾點 非專業的關係人(如顧客或非技術領域的管理者等)在觀看線框稿的時候，可能在心中會產生疑問，例如:到底這是不是最終設計?與最終設計之間的關係為何? 這就是為什麼我們必須花點時間來解釋線框稿的定義，以及它在產品設計流程中的所扮演的角色與意義。

在與不識此概念的關係人提報之前，提報者更需要自己釐清線框稿的目的與概念，才能有效的溝通並達成目的。

參考文獻 設計師必懂(一)–WIREFRAME與PROTOTYPE的不同 初學者的Prototype Wireframe、Mockup與Prototype的差異？來看看完整的產品UI設計流程 Figma｜WireFrame|Prototype原型資源 Figma｜WireFrame｜Prototype原型資源 以下提供Figma分享之WireFrame資源，大家可以利用這些資源製作出屬於自己的WireFrame可更快速的製作以順利溝通討論。

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

RecreatingFramerExampleswithFigma Figma-BasicPrototyping FLOWFlexibleLibraryforOptimisedWireframing FLOWMobilewireframingkit DaresayMobileUIKit ArtisanKit2.0 HackingPrototypes FigmaTutorials-SmartAnimatePrototyping WireframesformobileUIdesign FlowsToWireframes FlowsToWireframes WireframeKit(WEB) contrawireframekit FigmaWireframeKit(WEB) 互動式線框圖範例 Wireframe&PrototypeforInformationPortal 範例使用：BehanceWireframe&PrototypeforInformationPortal Figma中的互動式線框稿（Wireframe&InteractivePrototype）Wireframe&PrototypeforInformationPortal 本範例僅為練習之用，實際畫面及內容，以專案主題為主，請依類似的做法，自行繪製屬於自己的WireFrame（線框圖）。

學長姐範例1：STARBUCKS 1055445017-STARBUCKS-Wireframe 學長姐範例2：Pchome Pchome-UI-Design-Wireframe 互動式線框圖練習 互動式線框稿不需要複雜的Prototype技巧，僅需簡單的按鈕及頁面的連結即可，接下來示範簡單的Prototype練習。

[Figma]Wireframe｜Prototype｜互動式線框圖練習｜上課練習影音 開啟自己製作的WireFrame檔案。

或可參考練習檔SimpleWireframePrototype 下拉點選『Duplicute』複製後製作。

右側面板由『Design』切換至『Prototype』 點選第一頁歡迎畫面的『Signup』註冊按鈕，會出現空心圓點，直接點選連接至下一頁即可。

同理，點選不同按鈕或文字，至欲連結的頁面。

輸入框出現鍵盤之作法：點選輸入框連接至鍵盤，點選『Openoverlay』（打開覆蓋），Overlay覆蓋範圍設定為『BottomCenter』頂部中間。

Animation動畫路徑為由上而下 點選鍵盤消失之作法：點選鍵盤，點選『Closeoverlay』（結束覆蓋）。

線框圖的互動方式簡單易懂即可，不需太複雜的操作，便於與內部（工程師、設計師）及外部（客戶）溝通討論基本架構與流程，以及操作順暢度為目標。

課後作業 下週完成期中報告，以及互動式線框稿，發表期中報告 『期中作業』