來聊聊Wireframe吧!(下篇)

終於要進入主題了
怎麼開始?從哪邊開始?用什麼工具開始?

這部份沒有標準答案。
依大家習慣方便運用的工具即可

有人用手繪,有人用線上付/免費工具
由於我們內部都是設計師,所以盡可能以設計軟體優先
如果你不是設計相關背景,初期要熟練需要花點力氣

我們早期使用illustrator,後來轉戰SketchAPP
優點是當你完成Wireframe,只要元件跟規劃內容準確
其實可以直接取用,快速進入設計戰鬥模式。

當然,他不是沒有缺點….
“MAC限定”,使用PC的朋友可能要換其他工具

目前我們接觸到的Wireframe有3種風格:

    1.手繪
    適合公司內部初步討論
    這樣做很快,也因為快速很容易遺漏內容
    文字的部份多半是線條示意,非製作者可能很容易會搞不清楚是線條還是內容。



    圖片來源:(按我連結)

    2.線稿
    除非是熟悉網路服務的公司,比較能接受這個
    大部分看到畫面打叉,又是黑白灰配色
    客戶多半都會面露難色
    沒有好的開始,很難繼續往下討論


    圖片來源:(按我連結)

    3.精緻色塊 (我們偏向這個路線)
    透過配色和塊狀圖片釐清單元邏輯
    不管是內部過稿或是向客戶提案,都可以減少口語溝通

    小缺點….不!大缺點!
    相較於前面兩者,它非常耗時
    但如果你抓到訣竅,掌握工作節奏
    後面進行視覺設計或者讓前端人員偷跑,先做HTML結構
    它會是最省力的方法。

    如果收了Wireframe製作費了,還是老老實實把畫面做美美的吧~
    除了好溝通外,自己看了也賞心悅目,你說對吧?!


    圖片來源:(按我連結)

以我們先前製作的專案 TutorABC手機活動網站為例
和客戶確認需求,確認製作合約後
我們會針對會議中討論的需求,整理流程圖 / 網站地圖
製作時盡可能按照真實比例規劃
可以大大減少未來畫面製作時出現尺寸或者比例不對的窘境



看起來是不是很簡單呢?!
好啦!我知道大家都很聰明….
不管怎麼做,總是會有遺漏的可能

我們曾經碰過幾個狀況,和大家經驗分享
可以的話,盡可能避免:
1.少用Lorem Ipsum這類假字,盡可能找出一則真實資料模擬。
全部塞假字當然很快,但是真的進入視覺設計的時候,很有可能會碰到下面這種窘狀
寬度不夠,高度也不夠,版面空間就這麼大,客戶也不願意讓你縮減上方圖片
這時候真的會超阿雜~


圖片來源:(按我連結)

2.盡可能把所有完成的頁面湊成線上閱覽頁面,確認是否有遺漏或是流程不順的問題。
早期我們做好畫面後,會透過HTML封包成DEMO頁面
現在不用了,只要透過SketchAPP外掛工具,就可以快速上傳到Prototype的平台網站,省時省力。
我們最常使用的是MarvelAPP

附上我們先前上線的賓士精品Wireframe連結和大家分享:(由此連結)

3.頁面單元內的元件和照片,盡可能依照格線(Grid System)比例製作
這樣的方式將有助於後面視覺執行。

我知道有些可能不是正統作法
在考量提案流暢性還有客戶易懂程度
目前這些作法是最適合我們團隊執行的工作模式

搞定!打完收工
希望這些經驗對大家能有幫助。

Published by Genie Chen

Genie Chen 陳小吉 1981/8/1 A型 獅子座 Innovation Plus Creative Lab 超能力設計戰隊隊長兼網頁視覺設計師