線框稿 (Wireframe)與原型 (Prototype)的運用

經常聽到製作團隊會提供線框稿 (Wireframe)與原型 (Prototype)做相關確認,這些項目有甚麼樣的輔助功能呢?每次專案進行,是否有存在的必要性?

與客戶提案獲確認需求時,若能將其專案規視覺化,可大幅度降低雙方的認知落差,亦可提升客戶對專案的信任度。



線框稿 (Wireframe)

需要將專案視覺化,且須釐清頁面項目、配置定位與排版、頁面相關性等,線框稿 (Wireframe)是一個非常好的選擇。


線框稿通常以低擬真度來呈現產品設計,在線框稿中的呈現項目是非常精簡的,通常設計師只會使用方框、線和黑白灰等顏色來呈現物件與畫面。將討論的方向集中在功能、資訊架構、UI、UX相關等。因為線框稿在頁面相關性的表現較不直覺,不少設計師會增加操作的互動性,提高感受的擬真度。


初次提報設計概念,客戶的需求尚未完全明朗化,有許多修改調整的空間時,透過互動式線框稿的呈現,很容易協助客戶釐清需求與想法,但也需要與客戶清楚告知,避免造成客戶認為此提報就是最終畫面的呈現。




原型 (Prototype)

當線框稿 (Wireframe)已經確認完畢,製作團隊通常都會使用原型 (Prototype),將規劃的產品呈現中到高度擬真,模擬一個完整的產品體驗與需求方溝通。


原型比線框稿接近於產品的最終樣貌,其中也包含呈現效果與配置。因為是接近完整的產品呈現,製作團隊除了會提供給需求者做為產品依據,也會透過原型來驗證產品的相關體驗,例如UI、UX、需求項目完善度…等,透過原型來發現產品的問題與需求者的回饋,也就可以在前期發現問題並修正,大幅降低許多後期修改的時間與成本。




專案完成

當原型 (Prototype)已經確認完畢後,需求者與製作團隊對於專案的所有細節都已達到共識,需求者對於專案會較為安心,製作團隊更可以依照原型的設定製作,雙方都可明確的控制時間與成本來完成專案。











對這篇文章有興趣

如果您對文章有興趣或討論相關合作

歡迎與麥獅聯繫