線框圖

 

Wireframes

線框圖

 

摘要 (Abstract):

較介面草圖更為精緻化,通常用來描述使用者介面中的元件細節與操作上的互動流程。通過線框圖將介面內容進行組織分類以及規劃頁面間的動線,建構出整個系統的全貌。

定義(Definition):

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

步驟(Procedure):

Step1. 了解想在頁面/畫面上放置的元素

Step2. 畫出線框圖(wireframe)

Step3. 拿給專案參與者(使用者、老闆、專案組員)看,與他們討論,交換意見

Step4. 修改線框圖

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

案例(Case):

Step1. 了解想在頁面/畫面上放置的元素

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

Step2. 畫出線框圖(wireframe)

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

Step.3 拿給專案參與者使用者、老闆、專案組員看,與他們討論,交換意見

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

Step.4 修改線框圖

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

關於這部分,小編編要跟大家說一下抱歉,一個不注意我們的美術小編就把它精緻化了,如果按照一般地線框圖,還是畫的跟上面一樣簡單就好囉!

再讓我們回到Step3

經過一連串反覆的Step3Step4最後生出來的結果就是這樣

完成!

參考資料(Reference):

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

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

Winnie Lim。新手線框圖指南。

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

Shu-Tsen Liu。個人作品集。

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

分享 Acadeck 給更多人!