設計師必懂(一) - Wireframe 與Prototype 的不同 - 設計大舌頭

線框稿(Wireframe) ... 線框稿是一個低擬真度來呈現產品設計的表示法，在開發流程中使用它目的有以下三點: ... 線框稿就像是建築師的藍圖，明確且清楚的定義房子要怎麼蓋。

Skiptocontent 設計師必懂(一)–Wireframe與Prototype的不同 UI/UX,教學文章,翻譯文章 304月,2014 Wilson 線框稿(wireframe)並不等同於原型(prototype)!這兩個術語甚至連有經驗的設計師也常常搞錯。

這兩者除了語意上的不同，實質面也具相當的差異，UXPin的CEO-MarcinTreder為我們解釋: 線框稿(Wireframe) 線框稿是一個低擬真度來呈現產品設計的表示法，在開發流程中使用它目的有以下三點: 呈現產品頁面上主要的資訊 呈現資訊在頁面上的排版與架構 可視覺化，便於描述使用者如何與產品互動 線框稿就像是建築師的藍圖，明確且清楚的定義房子要怎麼蓋。

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

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

使用線框稿(wireframe)的好處 以線框稿來呈現與規劃產品，最大的特色就是快速並節省企業資源。

尤其使用目前市面上好用的工具，諸如：UXPin、Balsamiq或是Axure，製作上更加方便迅速。

不過，必須在設計流程中合理適時的使用它。

在產品設計的前期，若要有效準確的收集開發者、客戶或使用者等回饋，線框稿是最好的方法!怎麼說?因為人們可以更專注於功能面、資訊架構面、使用者體驗、操作流程、使用性及使用者介面等的討論。

避免視覺設計的干擾，而無法達成或混淆收集回饋的目的。

此外，若是需求改變也可以很快的做出調整，而不需要直接修改原始碼或是視覺設計。

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

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

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

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

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

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

原型(Prototype) 原型與線框稿不同的地方在於，原型是屬於中到高度擬真來呈現最終使用者介面的方法。

運用原型的目的即是模擬使用者與介面之間的互動，例如說按鈕按下後會出現的操作方式與呈現等。

簡單來說，就是模擬一個產品完整的體驗。

原型的視覺要素與特質 就視覺設計而言，原型比線框稿更加的接近於最終產品的樣貌。

原型雖然看起來像最終的產品，但它不具有可運作的要素(例如程式碼與數據庫等)。

在原型表達上應該有下列要素:基本的色調可先被設定、關鍵的內容需被呈現、資訊架構應該被建立與互動的效果與方式。

使用原型的好處 為什麼在開發流程中使用原型這個工具非常重要?因為原型通常會對真實的使用者進行測試，來挖掘產品的問題。

如此一來，就可以在前期提早發現問題並修正，節省許多後期修改的時間與成本。

對設計與開發團隊而言，它絕對是一個相當棒的驗證工具。

此外，讓使用者在原型上進行一些必要的任務往往可以得到讓團隊驚訝的洞見。

原型不需要藉由編碼的方式來產出，現在有許多良好的工具可以幫助設計師以快速且低成本的方式製作，作者推薦了一些好用的工具UXPin,Proto.io,Balsamiq,Moqups,Mockingbird,Axure,Protoshare,InvisionApp。

原型經過使用者測試後，設計師可將產品的設計做精準的修改，而不需要浪費開發團隊的時間與精力。

設計流程 了解設計的本質以及線框稿與原型的不同，僅是進入使用者體驗設計的門檻。

更重要的是，你能不能讓整個產品開發流程有更高的凝聚力、效能與效率。

作者以多年管理使用者體驗部門的經驗提出:最大的錯誤在於團隊往往把線框稿視為一次性的(無需修改)與非必要的流程，因此團隊不希望花時間與精力在探討線框圖。

最後導致，產品是建構於簡略雜亂的藍圖下，造成未來維護及修改資源的浪費，並影響了最終產品的品質。

一些小建議(Wireframe&Prototype) 當進行線框稿的製作時，可以先規劃一些共用的元素。

到原型階段時，就可以更輕易的針對這些元素做設計了。

確保線框稿做完後，需與關係人與團隊成員討論，在得到回饋後進行修改。

利用好用的軟體工具來提升繪製的效率。

本篇內容翻譯於Wireframesvs.Prototypes:What’stheDifference?byMarcinTreder 本文章所屬設計大舌頭與作者所有，未經授權，不得轉載！如需轉載，煩請通知。

其他人也看了這些... 電子商務網站介面設計寶典(一) 老闆不要再打槍!把網站設計成這樣是有道理的 使用者中心設計是什麼? 了解使用者體驗(UX)的第一堂課 TED–線上演講新體驗 20個超強導航列(Navigation)設計 訂閱設計大舌頭 隨時關注第一手UX、UI、科技、設計新知 電子郵件 訂閱 Wilson 以設計思維解決問題，並創造獨特的使用者體驗。

全部文章 Shareonfacebook Facebook Shareonlinkedin LinkedIn Shareontelegram Telegram Shareontwitter Twitter Prev上一篇網路購物–信用卡篇 下一篇Line預覽貼圖有點小？Next 最新文章 Clubhouse為什麼熱門？從UIUX的角度淺談（一） 2021-02-08/ 0Comments 手機拿法也會影響介面設計–淺談拇指法則 2020-02-06/ 0Comments Supr.Link最安全的縮網址服務 2020-01-13/ 0Comments 開發流程優化人人有責：設計也能營運？ 2019-07-06/ 0Comments 台灣社會創新發展趨勢(本場次全程QA)–MIX2019Day1 2019-05-14/ 0Comments 數位金融–MIX2019Day1 2019-05-14/ 0Comments UI/UX 教學文章 心得分享 電子商務 體驗文 0 ×