產品設計基礎-Wireframe是什麼？ 有5個繪製重點

“Wireframe是產品設計初期便於討論有關產品功能＆服務架構的“低擬真”產品原型稿。在這個階段只需以“線框稿”呈現產品內容，避免被UI設計元素影響了關於產品決策上的重要判斷。

什麼是Wireframe？

Wireframe一般稱為“線框稿”，線框稿適合產品初期規劃時，便於用來內部討論的低擬真產品原型，重點不在於看起來好不好看，而是方便用來討論產品架構、資訊、功能、行為、流程等…內容。我們也可以把Wireframe想像成模型玩具的使用說明書，內容需要清楚的說明該如何正確的完成一件模型玩具（應用產品）。

01.化繁為簡只表達元素

就像前面所提到的，在Wireframe階段我們去除所有設計的視覺與細節，只專注在每個頁面中所呈現的內容元素本身，避免內部討論/決策時失焦。

02.明確的架構與排版

每個頁面的資訊架構與排版佈局也是在Wireframe階段需要溝通討論的重點之一，好的架構＆佈局可以幫助設計師與未來的實際用戶更直覺順暢的使用產品。

03.精確的文案&描述內容

每個頁面中的元素要如何正確的表達內容＆元素，怎麼讓用戶直覺明白按鈕與其他控件的用意也是Wireframe呈現的重點其一。

04.功能的定義與操作說明

頁面中的所有功能在操作上會觸發什麼事件＆內容可以標注說明，方便內部討論時可以更加精確不模糊。

05.頁面間的操作關係

每個頁面中的按鈕＆控件，在點擊操作時會連接到哪些頁面，對應的又是哪些內容皆需要精確的定義，這樣也才能重新檢視該如何進一步優化使用流程。

總結

個人認為Wireframe是產品規劃前期絕對不可省去的步驟，因為精確的Wireframe內容可以幫助團隊在內部討論時，迅速找出目前的產品在使用流程上是否會出現操作問題與可以在優化的細節等，同時也可以讓執行團隊有個可以初步評估時程的樣稿，而不是完全靠通靈的方式來評估產品大概何時可以完成！

感謝你們的瀏覽閱讀，如果你覺得這篇文章寫得不錯並且有幫助到你，希望你能給我一點「拍手鼓勵」，也歡迎在下方留言讓我知道你的想法，我會持續分享更多實用＆實戰的經驗方式給你們。

若想隨時掌握最新設計教學可關注我的IG:jielin.designer

拍手小秘訣： 只要將滑鼠(或手指)持續按著不放手掌的icon，就能夠連續拍手囉，試試看吧！