什麼是Wireframe ? · 嫁給RD 的UI Designer

Wireframe 是一種低保真度的設計原型，在去除所有視覺設計細節之下，進行頁面結構、功能、內容規劃。

初次接觸Wireframe的人會非常不習慣這種呈現 ... 嫁給RD的UIDesignerAkaneLeeUIDesignerTaipei,Taiwan uiux.akane Tweetsby@akane_lee老實說我受夠某客戶和某設計公司老是把Wireframe喊做Storyboard了！每次聽到都要克制翻白眼的欲望。

拜託不要開口閉口說「我們很重視UI、我們很有經驗」，卻連基本名詞都講錯。

這跟義大利跟維大力一樣、相差十萬八千里啊！Wireframe是一種低保真度的設計原型，在去除所有視覺設計細節之下，進行頁面結構、功能、內容規劃。

初次接觸Wireframe的人會非常不習慣這種呈現方式，頁面上只有方框和文字，沒有圖片和色彩。

繪製Wireframe的目的在於確認每一個頁面的構成，重點在於畫面上要呈現什麼內容、而不是看起來漂不漂亮。

就像是室內設計平面圖，只有簡單的幾何圖型，卻是裝修最重要的依據。

如果不繪製Wireframe就直接上機開工，會發生做到一半漏了某個功能、或是頁面操作不流暢，反過頭來修修改改浪費更多時間力氣的窘境。

（講是這樣講，我還是會加一點圖型、加一點灰階做區分啦，不然整個畫面都是大框框套小框框，框框相連到天邊很難第一眼就辨識出每個框帶表什麼含意。

底圖也是方框、按鈕也是方框，直接把底圖範圍填上實心的灰色來得直覺。

）每個頁面都已繪出？ 從FunctionalMap延伸出來的UIFlow，就是繪製Wireframe的依據，UIFlow上規劃哪幾個頁面，按照編號就該有幾頁的Wireframe、如果有較特殊的過場動畫或特效，就需要更多頁的Wireframe來說明。

這個步驟能確保整個App架構完整度。

所需功能都被規劃到了嗎？ 有些較細節的功能在UIFlow上是看不到的，必須回到FunctionalMap一一確認。

像是使用者欲刪除某些檔案所跳出的Alert警告、或是操作到一半網路突然斷線的提示。

畫面上元件是否易於操作？ 依照HIG和大眾操作的慣性，回前頁在左上角，編輯、確定通常會在右上角。

有沒有小於44x44px的按鈕、或是小於12pt的中文字？是否塞太多資訊進去導致畫面擁擠？Wireframe製作成本低，容易被修改、繪製快速，在開發初期是溝通和發想的重要步驟，節省時間和人力成本，又可防止開發中期發現缺漏或不合用導致全盤重來。

很多時候案子都很趕，沒有時間讓UI/UX在開發後期進行易用性測試，所以在Wireframe階段就要將易用性考慮進去，可以說未來所有的設計都是以Wireframe為基準。

別小看它只是份簡單的框線圖稿，責任非常重大。

除了畫面結構外、額外的說明註解也是Wireframe的一部份。

在每個按鈕或是可操作的元件上說明其變化和狀態，讓這份文件即使不經由說明也能夠讓人理解所有元件的操作與畫面組成。

註解說明通常有幾大類：過場動畫、特效 像是視窗是由右往左推、還是從下方往上浮現？是左右翻轉還是撕去一頁的擬真動畫？這部份如果沒有明確指示，RD就得依照自己的想像製作，極有可能不是原本規劃人員心裡想的那個樣子。

也有可能製作這樣的特效需要花費更多的時間，礙於時程沒辦法製作。

越初期決定這些細節越能節省開發成本，所以在Wireframe上就要清楚註明。

畫面操作 TableView內建手指往左划動、該欄位會出現刪除按鈕；手指將列表向下拉即重新整理；雙手指是否可在圖片上放大縮小等等，各種操作導致畫面變更、怎麼變更的方式都需寫明。

視窗種類 新開的視窗是Popover、Alert還是ModelWindow？雖然畫面一看就知道，但還是標記一下吧。

狀態改變 電話功能在iPod上無法使用，所以要偵測機型、在iPod隱藏播打電話的按鈕。

或是地圖搜尋到一半網路突然斷線，檔案下載到中途就失去連線等等，各種突發狀態會影響App的功能與操作，在這種情況下的畫面顯示也需在畫Wireframe時就考慮進去並詳細說明應對方法。

本文中的Wireframe圖片上其實省略很多說明文字，真的要寫是寫不完的。

有些UI設計師會把Wireframe串成很大一張Flow，這能快速了解每個頁面的層級順序。

但這對RD來說就是個吃效能的怪物，Wireframe結合Flow的圖片尺寸非常非常大張。

要從這麼大張的圖找到其中某一格是自己想看的那頁很困難，負責刻介面的RD比較長時間盯著其中一頁在工作、而不是對著整大張Flow圖滿畫面亂跑。

上面這張Flow原始對應的App只有14個頁面左右，在沒有任何文字說明的情況下，圖檔原始尺寸就已達1260x3358px。

如果把Wireframe結合Flow的作法套用在更複雜的App介面設計上，再加上說明文字等等，相信這張圖會大到沒有人想去開它、看著圖上標示的去執行，即使RD必須照著Wireframe工作。

好幾位RD跟我抱怨過，為什麼UI設計師老愛這樣做，除了看起來很炫好像很專業印出來可以當壁紙外，開大圖根本就是在為難他們的電腦。

其實我也不知道，我的電腦效能不太好，Lag過後就學乖了，立刻捨棄這種大圖作法另尋解決方案。

所以每一頁Wireframe都需要編號的原因在這裡，RD可以把純文字版的UIFlow當成是目錄，對照編號找到Wireframe，只需開啟一張單頁Wireframe圖檔和一張文字版的Flow圖檔，這兩張圖尺寸都不大，不僅節省電腦效能和閱讀圖片時間精力，更能讓RD專注在寫Code這件事上。

Older»為什麼要畫3次Wireframe？«Newer十大易用性原則 commentspoweredbyDisqus最新課程資訊台北5月UX課CategoriesPodcast 4UI雜談 64UX相關 28Youtube 6個人經驗 51好書推薦 28爬舊文有風險 11設計思考 1課程講座 31軟體與操作 53遊記 15開發流程 38Tagcloud3D adobe Android App CLIPSTUDIOPAINT CX FlowChart FunctionalMap GrowthHack Guideline HTML HTML,CSS Illustrator iOS iPhone MacOS MagicaVoxel Mockup Photoshop Podcast Prototype Rails RWD StarWars TOOL Tutorial UI UIFlow UI和RD UI雜談 UX UX相關 Wireframe 作品集 個人經驗 公司營運 切圖 初學者 加拿大 動態效果 半途而廢 台灣 吃貨 好書推薦 工作職責 我的生活 手繪 拆解UI 接案 文具 日本 書單 服務設計 標示文件 歐洲 泰國 研究方法 簡歷 設計思考 課程 遊戲 開發流程 面試 香港