建立正確的wireframe知識，朝UI/UX設計人才邁進 - Glints

Glints將於本文介紹Wireframe是什麼？ ... 使用障礙，且此方法克服了不易修正、資源浪費以及保存的問題，如果尚在初學階段建議可以投影片軟體來練習。

SkiptoContent 求職相關 履歷相關 面試相關 薪資福利 職涯成長 各類職務 行銷 軟體工程 PM 技能提升 工具 技能 其他資源 Glints大小事 企業／新創聖經 免費資源 企業人物專訪 開發客戶 公司文化 籌募資金 行銷寶典 未來趨勢 最新消息 搜尋職缺 Searchfor: Home 職涯成長技能提升工具建立正確的wireframe知識，朝UI/UX設計人才邁進 byShiningChan 在科技浪潮的推引下，如何轉型、數位化，成了各行各業不得不面對的問題，而因應數位服務體驗誕生的UI/UX設計人才更成為近年來需求翻倍、身價水漲船高的職業，根據天下雜誌2020年的報導【揭曉熱門職業前四名】，UI/UX設計人才名列第三名熱搜職業。

不管你是新鮮人，抑或是希望轉職，如果你心裡剛好也萌生了成為UI/UX設計人才的想法，卻不知道開從哪裡開始準備，不妨從認識與工作內容息息相關的「wireframe線框圖」開始吧！Glints將於本文介紹wireframe是什麼？為什麼要使用wireframe？並提供製作技巧和常用工具的分享。

目錄 wireframe是什麼？為什麼要使用wireframe？wireframe的3大製作技巧一、著重於架構示意二、避免使用顏色三、活用字級排版常見的wireframe製作工具一、入門工具：紙筆、剪貼二、簡易工具，投影片軟體如：PPT、GoogleSlides三、專業工具，如：framebox、wireframe.cc、Gliffy、Cacoo結論 wireframe是什麼？ wireframe線框稿是一種低擬真度的產品設計呈現方式，排除所有會影響視覺判斷的元素，如：字型、顏色、設計、內容，只保留頁面排版架構與功能。

為了讓觀看者可以專心於頁面排版結構上，僅會以極為簡單的灰階色彩、線條、符號及框線來呈現，避免失焦。

為什麼要使用wireframe？ wireframe的使用目的即是「溝通」，溝通內容包含： 資訊架構層面是否清楚使用者操作介面與流程是否順暢功能是不是符合使用者需求如何與使用者互動 透過wireframe可能衍伸的討論如：A欄位是不是該往下移一些，較符合閱讀習慣；頁面結尾的地方或許應該加入CTA按鈕，促使使用者行動。

我們可以把wireframe想像成房屋設計藍圖，在藍圖上，我們可以看出總共有幾層樓、不同樓層涵括了幾房幾廳、每一房每一廳的相對位置如何，以及每個空間分別有多大。

但在房屋藍圖確認之前，我們並不會請室內設計師替我們規劃各個空間應如何擺設、顏色該怎麼搭配。

如同使用wireframe時，此階段的討論重點應是排列、配置是不是符合使用者需求。

wireframe的3大製作技巧 一、著重於架構示意 「內容都還沒確認，該怎麼開始製作wireframe？」這絕對不是wireframe需要煩惱的問題。

如同前段強調，wireframe的強項是架構與排列，所有的文字都能夠以假字甚至是方框來呈現。

而圖片的部分則是不建議使用假圖，如果今天要製作的是手機新上市頁面，放了一張手機的假圖上去，可能衍伸：所以這裡的圖片要使用手機實際拍攝照？能否使用插圖介紹呢？等不必要的討論。

建議可以直接在方框中打個Ｘ，再附上輔助說明即可。

雖然wireframe是草圖，但還是需以簡潔、易於理解的排版來呈現，並盡可能地將區塊與區塊間對齊、行距比擬真實情況呈現，以免造成使用者感受失真的情況。

二、避免使用顏色 避免使用色彩的原因在於希望觀看者可以專注於架構的說明，而非陷入：A區塊要使用深色好，還是淺色好？B文字是不是該以更鮮明的顏色呈現？ 回到「為什麼使用wireframe」的說明段落，色彩的運用與設計非wireframe的存在目的，在這個階段花時間思考應該採用什麼配色是不必要的，因此會建議設計者整個頁面都使用灰階呈現，避免不必要的質疑與討論。

三、活用字級排版 雖然wireframe不建議使用特殊字型，但絕對歡迎使用不同字級。

不同字級可以用以代表文字的重要程度，希望凸顯的資訊，或是標題欄位，可以使用大一點的字級來強調，如果只是一般內容，那麼使用基本的font-size12或者是10即可。

當需要呈現大量的內容時，使用不同大小的字級排版，可以幫助閱讀者快速抓到重點在哪，並且輕鬆辨識每項資訊的輕重緩急，有助於使用者閱讀。

常見的wireframe製作工具 一、入門工具：紙筆、剪貼 wireframe的製作可以非常直覺、單純，當靈感來敲門時，隨手捻來桌上的紙筆，即可開始製作wireframe。

使用紙筆、剪貼繪製wireframe除了沒有任何入手門檻之外，即時、便利也是不可忽視的兩大優點。

但如果遇到要修改，或是畫錯需要重來的時候，就沒那麼容易修正，恐怕只能重來一次了！紙張資源的浪費與保存問題，也是紙筆或剪貼製作wireframe較難克服的問題。

二、簡易工具，投影片軟體如：PPT、GoogleSlides 除了紙筆、剪貼之外，投影片軟體也是製作wireframe相當熱門的工具，相信多數人對PPT、GoogleSlides及Keynotes都非常容熟悉，不會有使用障礙，且此方法克服了不易修正、資源浪費以及保存的問題，如果尚在初學階段建議可以投影片軟體來練習。

但當需要製作較為複雜的wireframe時，則不建議以簡報軟體製作，受到功能限制，投影片軟體難以支援複雜的流程設計。

三、專業工具，如：framebox、wireframe.cc、Gliffy、Cacoo 坊間有許多專業的wireframe規劃工具，可支援flow、功能、說明等較複雜、專業的功能，雖功能相對齊全，但學習曲線也較為陡峭，不像紙筆、投影片軟體等工具，大部分的人都可以立刻上手。

專業工具大致可分為免註冊型、註冊型及付費型，免註冊型的功能較為受限，如：framebox、wireframe.cc；註冊型雖多了一道程序，但功能比免註冊型的完善，如：Gliffy；付費型為了讓使用者心甘情願掏錢，無庸置疑，功能想必最齊全，如：Cacoo、Mockflow。

有關以上工具的詳盡介紹，可參考【網頁設計的wireframe全攻略！6大wireframe工具推薦】。

結論 若以工作內容來看，除了UI/UX設計人員需要懂得使用wireframe之外，對PM來說wireframe也是必備技能，如想了解更多關於PM的工作內容，可參考【PM是什麼？想知道適不適合當PM，先問自己3個問題】。

相信大家看完wireframe的簡介、使用目的、製作技巧以及常見製作工具之後，對於wireframe的認識也更上一層樓了，擁有正確的基礎觀念之後，別忘了實作練習、學以致用，方能朝wireframw專家之路邁進。

如果你希望可以得到更多資訊，可以追蹤Glints的臉書粉絲頁，每個星期都可以看到熱門職缺與職涯資訊。

你也可以到Glints–Taiwan去了解更多！或是註冊帳號，收到職缺通知！ 延伸閱讀： 對找工作有興趣的人，可以看看Glints的其他精選文章 【東南亞最大的人才媒合平台–Glints】【找遠端海內外職缺？讓Glints幫你找到理想工作！】【看看亞洲國家的薪水，居家工作領海外薪水，吸引你嗎?】【職涯規劃，完成4個階段找到理想工作！】【Glints職涯平台：獵人頭公司做不到的！】【Glints：最快14天內幫你找到適合你的公司、適合你的工作！】 AboutAuthor旅遊成癮患者，同時也是愛海的山系女子 熱愛文字的所有樣貌，除了知識型文章，也寫生活、寫旅遊 PostNavigation PreviousPost 免費、雲端同步、操作簡易！6個功能教學立即上手Simplenote筆記本 NextPost 【Bootstrap教學】網頁設計小白也能輕鬆駕馭 LeaveACommentCancelreplyYouremailaddresswillnotbepublished.Requiredfieldsaremarked* Savemyname,email,andwebsiteinthisbrowserforthenexttimeIcomment. 搜尋搜尋熱門文章 求職相關薪資福利[勞基法特休懶人包]–特休天數有幾天？怎麼算？可以換錢嗎？ 求職相關面試相關面試優缺點:要怎麼回覆「請告訴我，3個你最大的優點與缺點。

」？ 求職相關面試相關收到理想公司的錄取通知，不會回?一分鐘教會你，錄取通知回覆怎麼寫！ 其他資源職涯成長一封體面的離職信，讓你和公司好好說再見[內含離職信範例] 求職相關面試相關離職原因:為何離開前公司，怎麼回答才算好？ 文章類別