線框圖

 

Wireframes

線框圖

 

摘要 (Abstract)

線框圖是一個網站圖形化的骨架,對於產品的作用就如同建築藍圖。比介面草圖更為精緻化,通常用來描述使用者介面中的元件細節與操作上的互動流程。通過線框圖將介面內容進行組織分類以及規劃頁面間的動線,建構出整個系統的全貌,表達用戶交互界面的主視覺和描述。

定義(Definition):

線框圖(Wireframes) 除去各種視覺影響的複雜元素,只用簡單的線條、方框和灰階色彩來繪製,將看到的人專注在該模型的功能和操作上。不管是用手繪或是軟體繪圖都可以。簡單來說,線框圖就是一個網站或是一個程式的介面草圖,在發展出一個真正的網頁/程式之前,必須先有個明確的架構,與客戶溝通,確認對方想要的型,再與其他的人(工程師、UI設計師)溝通、討論、實施產出。如果在中途有發現不能使用或是無法放置的情況下,可適時地作修改,直到東西完整為止。

步驟(Procedure):

Step1. 了解後列出在頁面/畫面上放置的元素

Step2. 畫出線框圖(wireframe)利用像素化的灰度界面工具集 ,所有元素的大小、位置和順序需要全部考慮清楚,這樣才可以更精確地設計用戶介面的運作方式,讓介面概念變得更清晰和詳細。

Step3. 拿給專案參與者(使用者、老闆、專案組員)看,互相討論以及交換意見。

Step4. 修改線框圖

  • Step3 跟 Step4 一直循環,直到專案參與者都說可以為止。

案例(Case)

Step1. 了解後列出在頁面/畫面上放置的元素

今天我們要做一個減重日記的APP,使用者希望透過FB登入,以方便APP的使用。登入後,輸入自己的基本身體資料,並可記錄自己每天的三餐及飲水量。透過加入減重群組,可以一群人相互討論減肥方式、減肥飲食及互相督促。

Step2. 畫出線框圖(wireframe)利用像素化的灰度界面工具集 ,所有元素的大小、位置和順序需要全部考慮清楚,這樣才可以更精確地設計用戶介面的運作方式,讓介面概念變得更清晰和詳細。

根據剛剛了解的功能,畫出一系列的基本圖型。

http://acadeck.com/wp-content/uploads/2017/10/線框圖.jpg

Step.3 拿給專案參與者(使用者、老闆、專案組員)看,互相討論以及交換意見。

經過了一些意見交換,決定將用FB登入的功能取消,改成額外註冊。APP開啟登入的背景圖改為日式美女圖,減重日誌的個人頁介面也有小幅的修改等等。

Step.4 修改線框圖

再根據討論修改部分,重新繪製一份線框圖。

※Step3 跟 Step4 一直循環,最後生出來的結果就是這樣。

完成!

案例二(Case)

Step1.了解後列出在頁面/畫面上放置的元素

保養品推薦APP,使用者希望透過FB登入,以方便使用。登入後,輸入自己的基本個資,再藉由APP內的肌膚檢測來判定膚況推薦適用的保養品,領取免費試用品。透過加入相同膚況群組,可以一群人相互討論使用保養品上的經驗。

Step2.畫出線框圖(wireframe)利用像素化的灰度界面工具集 ,所有元素的大小、位置和順序需要全部考慮清楚,這樣才可以更精確地設計用戶介面的運作方式,讓介面概念變得更清晰和詳細。

依據剛剛了解的功能及元素,畫出一系列的基本圖型。

http://acadeck.com/wp-content/uploads/2017/10/123.jpg

Step3.拿給專案參與者(使用者、老闆、專案組員)看,互相討論以及交換意見。

經過一些討論以及意見交換後,決定將APP中的返回圖示移置介面右上角。個人頁以及群組介面也有小幅的修改等等。

Step4.修改線框圖

再根據討論後修改,重新繪製一份新的線框圖。

※Step3 跟 Step4 一直循環,直到線框圖完整。

參考資料(Reference)

獸群之心。淺談線框圖(Wireframe)。

ez。網站企劃必懂─線框圖(wireframe)。

Winnie Lim。新手線框圖指南。

嫁給 RD 的 UI Designer。初學者的 Prototype。

Shu-Tsen Liu。個人作品集。

Emily Carr University。美味台灣app設計 。

Emily Carr University。美味台灣app設計

ITREAD01。你真的搞懂什麽是線框圖,什麽是原型圖了嗎?

用戶經驗資料庫。為什麼畫線框圖前應該先畫草圖?

資料整理:2018 黃翊婷、2019 連珮含、2021廖翊晴

總編輯:羅歆慈

編輯與排版:李明容

分享 Acadeck 給更多人!