DMA01
Wireframe 的重要性

Wireframe 的重要性

Importance of wireframe to analytics

寓意科技

了解什麼是Wireframe,學會繪製Wireframe。

前情提要

 

這種對話幾乎出現在我們的日常,講者會覺得講得很清楚,聽者能夠全盤理解。但往往在資訊傳遞的過程中,每經過一個角色將會有20%的資訊流失,到最後執行方時,就可能剩下原本的

60% 或是 40%了。

章節內容

什麼是Wireframe?

根據維基百科的解釋:

 

A website wireframe, also known as a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website.Wireframes are created for the purpose of arranging elements to best accomplish a particular purpose. The purpose is usually being informed by a business objective and a creative idea. The wireframe depicts the page layout or arrangement of the website's content, including interface elements and navigational systems, and how they work together.

 

Wireframe是頁面設計得第一環節,將會呈現未來網站的兩個主要內容: 

 ㄧ. 定義會頁面擁有的內容

 二. 物件的排版位置

由於Wireframe 的精細程度不會太高(畢竟他叫做線框搞),特色是製作時間不會太長,在產品開發初期扮演拉近所有人想法的工具。

執行方式

如何繪製Wireframe?

在執行繪製Wireframe之前,要先執行需求訪談,製作User Story 以及 Funtional Map,基於這兩份文件,我們可以勾勒出網站的樣貌。

 

有很多人會詢問,要繪製Wireframe需不需要有程式的基礎,可以沒有,但是有前端的概念是加分的,在未來我們這份文件是要提供給設計師以及前端工程師開發,在一開始的Wireframe包含了程式的概念及邏輯,對於開發是一定有幫助的,這邊提供兩個小技巧有助於Wireframe的製作:一. 網頁佈局  二. 重覆利用性.

一、網頁佈局

大多數得網頁組成都包含這三個大架構,Header / Body / Footer:

  • Header
    固定在網站的最上方,通常包含了 Logo / Navbar / log in /sign in。

     

  • Body
    主要顯示網站內容,會依照不同的頁面有不同的功能/邏輯。

     

  • Footer
    固定在網站的最下方,顯示 頁面導覽 /  聯絡方式 ..等訊息。

在最一開始定義了網站內容,每個頁面都要套用這模式,在Wireframe的製作上也需要注意。

二、重覆利用性

在實作過程當中,有時候在B面會發現共用組件會有露缺,當下只改了B面的內容,導致其他頁面沒有一起修改,最終設計師/工程師,收到檔案時會有不知道如何執行。

 

為了避免這種情況,在執行過程中,我們可以透過大量的組件化/模組化,不同頁面可以套用相同組件,只要一改動該組件,所有的頁面都會一起變動,通常會將:Header / Menu / Footer / 以及一些大量重覆使用到的元件組件化。

Wireframe到底要多精細?

這問題沒有一定,要取決於團隊的大小,以及設計的產品。 依照筆者的情況,我屬於遠端開發,當面與設計師/工程師討論機會不多,在Wireframe的製作上就會花比較多時間,減少遠端溝通上面的誤解。此外當我在設計後台產品時,往往也都會使用一些可以製作出高仿真的工具,例如使用Axure 搭配 Semantic UI Library, 在這環節只要涉及產品規模不大,是可以省略設計師的環節,但這邊也要考驗PM本身的功力了。

Wireframe的工具?

市面上有很多Wireframe工具,每一套都有不同得特色,這也導致了選擇的困難性,依照筆者的經歷曾經用過: Axure / 墨刀 / Portt / Drew.io …..等等。最終會依照團隊所使用的工具,作為主力開發,如果是新手建議可以選用 Axure,在Youtube 或各大網站擁有豐富的教學資源,可惜有試用期限。當學會一套工具時,在不同工具之間的切換也不會有太大困難。

隨堂練習

挑選一個自己喜歡的網站,先執行網站架構,確認該網站有幾個頁面,以及頁面的邏輯,再來從首頁開始拆解, 依照該網站的邏輯猜拆解成 Wireframe,練習自我的觀察能力。


 

寓意科技
寓意科技

寓意科技提供專業的及系統資訊科技管理顧問服務,協助企業規劃並完成軟體建置

fable寓意科技官方網站:https://www.fable.com.tw/

fable寓意科技 Medium:https://medium.com/@fableltd

淺談線框圖(Wireframe)
嚴格來說,真正製作完成的 Wireframe 是一種描述產品規格的技術文件,Wireframe 告訴團隊的設計師與工程師們如何執行計畫,讓專案的開發者們能夠確認規格流程、判斷難易度、評估所需時程等訊息。
產品上架/上市的流程介紹 (以iOS App部屬流程為例)
本篇主要講解IOS app產品上架或者上線的流程,包含上線前準備、上架、發布以及後續追蹤
遠端(距)工作的風險與挑戰
對於一個遠端工作者來說,主要會遇到的風險有 1.個人品牌/信任問題 2.管理成本(個人/企業) 3.資訊落差/溝通成本 4.資安風險 5.結果就是一切