在科技浪潮的推引下,如何轉型、數位化,成了各行各業不得不面對的問題,而因應數位服務體驗誕生的UI/UX設計人才更成為近年來需求翻倍、身價水漲船高的職業,根據天下雜誌2020年的報導【揭曉熱門職業前四名】,UI/UX設計人才名列第三名熱搜職業。

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


wireframe是什麼?

wireframe線框稿是一種低擬真度的產品設計呈現方式,排除所有會影響視覺判斷的元素,如:字型、顏色、設計、內容,只保留頁面排版架構與功能。為了讓觀看者可以專心於頁面排版結構上,僅會以極為簡單的灰階色彩、線條、符號及框線來呈現,避免失焦。

wireframe sample

為什麼要使用wireframe?

wireframe的使用目的即是「溝通」,溝通內容包含:

  1. 資訊架構層面是否清楚
  2. 使用者操作介面與流程是否順暢
  3. 功能是不是符合使用者需求
  4. 如何與使用者互動

透過wireframe可能衍伸的討論如:A欄位是不是該往下移一些,較符合閱讀習慣;頁面結尾的地方或許應該加入CTA按鈕,促使使用者行動。

我們可以把wireframe想像成房屋設計藍圖,在藍圖上,我們可以看出總共有幾層樓、不同樓層涵括了幾房幾廳、每一房每一廳的相對位置如何,以及每個空間分別有多大。但在房屋藍圖確認之前,我們並不會請室內設計師替我們規劃各個空間應如何擺設、顏色該怎麼搭配。如同使用wireframe時,此階段的討論重點應是排列、配置是不是符合使用者需求。

wireframe的3大製作技巧

一、著重於架構示意

「內容都還沒確認,該怎麼開始製作wireframe?」這絕對不是wireframe需要煩惱的問題。如同前段強調,wireframe的強項是架構與排列,所有的文字都能夠以假字甚至是方框來呈現。

而圖片的部分則是不建議使用假圖,如果今天要製作的是手機新上市頁面,放了一張手機的假圖上去,可能衍伸:所以這裡的圖片要使用手機實際拍攝照?能否使用插圖介紹呢?等不必要的討論。建議可以直接在方框中打個X,再附上輔助說明即可。

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

二、避免使用顏色

避免使用色彩的原因在於希望觀看者可以專注於架構的說明,而非陷入:A區塊要使用深色好,還是淺色好?B文字是不是該以更鮮明的顏色呈現?

回到「為什麼使用wireframe」的說明段落,色彩的運用與設計非wireframe的存在目的,在這個階段花時間思考應該採用什麼配色是不必要的,因此會建議設計者整個頁面都使用灰階呈現,避免不必要的質疑與討論。

三、活用字級排版

雖然wireframe不建議使用特殊字型,但絕對歡迎使用不同字級。不同字級可以用以代表文字的重要程度,希望凸顯的資訊,或是標題欄位,可以使用大一點的字級來強調,如果只是一般內容,那麼使用基本的font-size12或者是10即可。

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

常見的wireframe製作工具

一、入門工具:紙筆、剪貼

wireframe的製作可以非常直覺、單純,當靈感來敲門時,隨手捻來桌上的紙筆,即可開始製作wireframe。使用紙筆、剪貼繪製wireframe除了沒有任何入手門檻之外,即時、便利也是不可忽視的兩大優點。但如果遇到要修改,或是畫錯需要重來的時候,就沒那麼容易修正,恐怕只能重來一次了!紙張資源的浪費與保存問題,也是紙筆或剪貼製作wireframe較難克服的問題。

draw the wireframe

二、簡易工具,投影片軟體如:PPT、Google Slides

除了紙筆、剪貼之外,投影片軟體也是製作wireframe相當熱門的工具,相信多數人對PPT、Google Slides及Keynotes都非常容熟悉,不會有使用障礙,且此方法克服了不易修正、資源浪費以及保存的問題,如果尚在初學階段建議可以投影片軟體來練習。但當需要製作較為複雜的wireframe時,則不建議以簡報軟體製作,受到功能限制,投影片軟體難以支援複雜的流程設計。

三、專業工具,如:frame box、wireframe.cc、Gliffy、 Cacoo

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

專業工具大致可分為免註冊型、註冊型及付費型,免註冊型的功能較為受限,如:frame box、wireframe.cc;註冊型雖多了一道程序,但功能比免註冊型的完善,如:Gliffy;付費型為了讓使用者心甘情願掏錢,無庸置疑,功能想必最齊全,如:Cacoo、Mockflow。有關以上工具的詳盡介紹,可參考【網頁設計的 wireframe 全攻略!6大 wireframe 工具推薦】。


結論

若以工作內容來看,除了UI/UX設計人員需要懂得使用wireframe之外,對PM來說wireframe也是必備技能,如想了解更多關於PM的工作內容,可參考【PM是什麼?想知道適不適合當PM,先問自己3個問題】。相信大家看完wireframe的簡介、使用目的、製作技巧以及常見製作工具之後,對於wireframe的認識也更上一層樓了,擁有正確的基礎觀念之後,別忘了實作練習、學以致用,方能朝wireframw專家之路邁進。

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

你也可以到Glints – Taiwan去了解更多!或是註冊帳號,收到職缺通知!

延伸閱讀:

對找工作有興趣的人,可以看看Glints的其他精選文章

About Author

旅遊成癮患者,同時也是愛海的山系女子
熱愛文字的所有樣貌,除了知識型文章,也寫生活、寫旅遊

Leave A Comment

Your email address will not be published. Required fields are marked *