如果您對 UI/UX 小有研究的話，可能已經聽過 Wireframe（線框稿）這個詞了，Wireframe 是產品設計過程中一個很重要的部分，但您是否還是對 Wireframe 一知半解？
Gremlin Works 在本篇文章中，將提供 Wireframe 的大解密，從 Wireframe 的基本介紹開始，至如何建構 Wireframe，不藏私一次告訴你。
話不多說，讓我們一起從 Wireframe 新手變成專家吧！
什麼是 Wireframe（線框稿）？
Wireframe（線框稿）是一個網頁或 APP 的二維骨架輪廓，Wireframe 可以手繪也可以以其他方式創建，通常代表了最初的產品概念、造型與顏色等。
而 Wireframe 是 UI/UX 設計師最常使用的設計方式之一，因為它提供了一個清楚的頁面架構、用戶使用流程與預期行為的概述，使所有人在開發人員開始動工開發之前 ，能就基本功能的位置等先達成一致的看法，避免後期無法修改的災難發生。
甚麼時候該進行 Wireframing（線框設計）？
Wireframing 一般是在產品開發週期早期（團隊還在研究商品時）進行，於確認公司的基本需求之後，設計師們會於這個階段提出產品的構想，並進行測試，最後向大家分享完整的概念，也可以在獲得用戶的反饋之後，以 Wireframing 為基礎來進行優化。
關於 Wireframe 您不可不知的三大優點
Wireframe 有三個您不可不知道的優點，以客戶為中心將概念聚焦、可以闡明與定義網站功能與創建非常簡便又快速，接下來將進行更詳細的介紹：
Wireframe 可以以客戶為中心將概念聚焦
Wireframe 被設計師們視為最有效的溝通工具之一，設計師們可以於 Wireframing 階段進行用戶測試或者通過一些小巧思，如於最後新增「頁面有甚麼地方需要進行改善」相關問題，不但可以藉此衡量用戶與介面互動的方式，也可以讓設計師得到最真實的反饋並以此找到關鍵痛點，從中進行優化，創造出直觀且易於使用的產品。
Wireframe 可以闡明與定義網站功能
與客戶溝通時，他們可能會因為不懂 “ hero image ”或 “ CTA ”等專業術語而有溝通上的障礙，但 Wireframe 能夠有效解決這個問題。
Wireframe 可以將網站的架構與主視覺設計展示給客戶，也可以清楚的展示所有設置的功能與位置與其具體作用，讓客戶更直觀的知道整個頁面甚至按鈕的配置與功能，讓雙方在溝通時不會雞同鴨講，能夠更有效率。
Wireframe 的創建非常簡便又快速
Wireframe 最棒的優點就是它非常容易創建而且價格便宜。如果您手上剛好有紙跟筆，您可以不花一毛錢就快速的勾勒出一個 Wireframe，當然也有許多工具可以協助創建 Wireframe，後續都會向大家進行介紹。
Wireframe 有甚麼類型？
Wireframe 主要分為三種類型，低度保真線框稿、中度保真線框稿與高度保真線框稿，而他們最大的不同在於其詳細的程度，以下將一一進行介紹：
Low-fidelity wireframes（低度保真線框稿）
低度保真線框稿通常拿來做為設計的出發點，因此往往是粗糙、沒有任何比例與網格，只包含簡單圖像、對話框等基本的視覺表現。
以低度保真線框稿作為與客戶初次溝通的工具是非常適合的，可以進行快速地勾勒且方便更改整體的架構與設計方向，能夠一開始就依照客戶需求設計，有效節省彼此溝通往返與修改的時間。
Mid-fidelity wireframes（中度保真線框稿）
三種線框稿中最常被使用的一種，相較於低度保真線框稿，中度保真線框稿更精確的表達了相關配置，且功能之間有明顯的區別，雖然一樣是以黑白色為主，但加入了不同的元素來使頁面更加突出與豐富。
High-fidelity wireframes（高度保真線框稿）
最後則是高度保真線框稿，高度保真線框稿通常用於產品設計週期的最後階段，藉由前面兩個階段的不斷討論與修改，高度保真線框稿的頁面包含了所有細節，如：實際的圖像與內容，讓客戶能夠知道成品完成後實際的樣子，高度保真線框稿通常不會進行大幅度的改動，僅會做一些細部的調整。
Wireframe 中須包含甚麼？
正如剛剛所提到的，一個線框稿中需要包含甚麼取決於它是屬於哪一種類型，一般的線框稿中常出現的元素有：標題、搜尋功能與分享按鈕等等，顏色以黑白為主要色調，於高度保真線框稿中才會出現其他顏色來進行標示，重要的是，因為線框稿是二維的，它僅能展示頁面的配置，而無法展現頁面的進階功能，如：下拉、隱藏等。
網頁 Wireframe Ｖ.S 行動裝置 Wireframe
當我們提到線框稿時，通常會直接聯想到網頁的線框稿，但行動裝置的線框稿則需要特別設計，那兩者最大的差別是甚麼呢？
尺寸
由於行動裝置與電腦的尺寸有相當大的差異，因此在設計時必須特別注意，網頁線框稿可能包含許多的頁面，而行動裝置線框稿礙於尺寸因素被限制在兩個頁面以內。
用戶行為
於電腦上用戶多使用鼠標來瀏覽頁面，還可以點即某即按鍵來顯示額外資訊，而於行動裝置上用戶必須藉由點擊才可以使用功能，因此頁面與按鈕的設計就非常重要，需要仔細思考如何讓用戶有較好的體驗。
互動方式
與電腦最大的不同在於，行動裝置常常提供用戶下載內容以離線使用的選項，因此在設計行動裝置線框稿時記得將離線使用考慮進去。
如何輕鬆創建完整的 Wireframe ？
在科技進步的今天，有許多可以創建線框稿的工具可供設計師使用，但目前最知名的設計工具還是非 Sketch 莫屬，它有大量的模板還有各式各樣的形狀可供選擇，使設計師能夠輕鬆地勾勒出頁面大致上的樣貌，並且還有符號的功能，能夠打造最完整的線框稿。
創建屬於您的 Wireframe
現在您知道了關於 Wireframe（線框稿）的所有一切，從基本介紹到實際案例，雖然線框稿看起來很基本但他萬萬不可以被忽略，良好的線框設計可以使用戶有更佳的使用者體驗，進而使公司或產品獲得更多用戶的認可，心動不如馬上行動，現在就開始創造屬於自己的線框稿吧！
