WireFrame Prototype|互動式線框圖

互動式線框圖

  • 線框稿
  • 線框稿是一個低擬真度來呈現產品設計的表示法,在開發流程中使用它目的有以下三點:
    1. 呈現產品頁面上主要的資訊
    2. 呈現資訊在頁面上的排版與架構
    3. 可視覺化,便於描述使用者如何與產品互動

    4. 圖片來源: low-fidelity prototype

    線框稿就像是建築師的藍圖,明確且清楚的定義房子要怎麼蓋。
    線框稿中的元素應該是非常精簡的,通常設計師只會使用方框、線和灰階的底圖 (來表現不同的階層)。某些內容在初期還未確定或實作時,可先利用方框或假文字來表示,例如:圖片、影片與文字等等。
  • 互動式線框稿
  • 有時候,設計師希望提高線框稿的擬真度、強調介面設計的某些部分或讓使用者更快理解以利進行測試,設計師會快速的製作可互動的線框稿,也就是可點擊式線框稿。
    初次與關係人或客戶介紹設計時,互動式線框稿將會是相當有用的。當這些人問說按下這個按鈕會發生甚麼事情?提報者可以在互動式線框稿上馬上操作,讓他們看到結果。這樣的方式肯定可以讓他們印象深刻並快速進入操作的情境中。
    以線框稿簡報時須注意幾點
    • 非專業的關係人 (如顧客或非技術領域的管理者等) 在觀看線框稿的時候,可能在心中會產生疑問,例如:到底這是不是最終設計?與最終設計之間的關係為何?
    • 這就是為什麼我們必須花點時間來解釋線框稿的定義,以及它在產品設計流程中的所扮演的角色與意義。在與不識此概念的關係人提報之前,提報者更需要自己釐清線框稿的目的與概念,才能有效的溝通並達成目的。

參考文獻
  1. 設計師必懂 (一) – WIREFRAME 與 PROTOTYPE 的不同
  2. 初學者的 Prototype
  3. Wireframe、Mockup與Prototype的差異?來看看完整的產品UI設計流程

Figma|WireFrame|Prototype原型資源

Figma|WireFrame|Prototype原型資源

以下提供Figma 分享之 WireFrame 資源,大家可以利用這些資源製作出屬於自己的 WireFrame 可更快速的製作以順利溝通討論。
也可以自行在Figma Community中,以 WireFrame 為關鍵字搜尋,可找到更多資源。
  1. Recreating Framer Examples with Figma
  2. Figma - Basic Prototyping
  3. FLOW Flexible Library for Optimised Wireframing
  4. FLOW Mobile wireframing kit
  5. Daresay Mobile UI Kit
  6. Artisan Kit 2.0
  7. Hacking Prototypes
  8. Figma Tutorials - Smart Animate Prototyping
  9. Wireframes for mobile UI design
  10. Flows To Wireframes
  11. Flows To Wireframes
  12. Wireframe Kit (WEB)
  13. contra wireframe kit
  14. Figma Wireframe Kit (WEB)

互動式線框圖範例

  1. Wireframe & Prototype for Information Portal
  2. 範例使用:Behance Wireframe & Prototype for Information Portal

    Figma中的互動式線框稿(Wireframe & Interactive Prototype) Wireframe & Prototype for Information Portal

    本範例僅為練習之用,實際畫面及內容,以專案主題為主,請依類似的做法,自行繪製屬於自己的 WireFrame (線框圖)。
  3. 學長姐範例1:STARBUCKS
  4. 1055445017-STARBUCKS-Wireframe
  5. 學長姐範例2:Pchome
  6. Pchome-UI-Design-Wireframe

互動式線框圖練習

互動式線框稿不需要複雜的Prototype技巧,僅需簡單的按鈕及頁面的連結即可,接下來示範簡單的Prototype練習。
    [Figma] Wireframe|Prototype|互動式線框圖練習|上課練習影音

  1. 開啟自己製作的WireFrame檔案。
    或可參考練習檔 Simple Wireframe Prototype
    下拉點選『Duplicute』複製後製作。

  2. 右側面板由『Design』切換至『Prototype』

  3. 點選第一頁歡迎畫面的『Sign up』註冊按鈕,會出現空心圓點,直接點選連接至下一頁即可。

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

  5. 輸入框出現鍵盤之作法:點選輸入框連接至鍵盤,點選『Open overlay』(打開覆蓋),Overlay覆蓋範圍設定為『Bottom Center』頂部中間。Animation動畫路徑為由上而下

  6. 點選鍵盤消失之作法:點選鍵盤,點選『Close overlay』(結束覆蓋)。

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

課後作業

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