隨著職涯進展,我學到在進行視覺設計之前,先給客戶看線稿 (wireframes) 可以替雙方節省時間。只不過,線稿看起來很弱。此做法的用意是讓我在面對客戶之前進行「快速修改」,我「決定方向」之後進入「設計流程」。它們應該比視覺設計更快做好,也就是更方便修改。只不過,在紙上描繪出來的線稿非常粗糙,難以在客戶面前展示,所以我還花些時間做成數位線稿。展示過線稿之後,我卻發現他們沒有因此說出有意義的對話。事實上,看到這些數位線稿幾乎沒有改變過什麼。
回顧之前的經歷,我感覺不到線稿的價值,這是因為我想解決的問題錯了。它成為讓專案從「探索」到「準備進行設計」階段的勾選清單,防止客戶之後改變想法。然而,我沒有領會到的是,最好的線稿創造一種機制,突破常見的設計典範。它為你想追求的方向辯護,在沿著錯誤的道路加速前,幫助你慢下來選擇正確方向。
新手設計師之間仍然普遍專注於視覺設計,看得比功能設計還重要。視覺設計因為容易分享以及接受評論,所以是最容易入門的方式。這個畫面符合目前的趨勢嗎?這可以在 Dribbble 獲得很多讚嗎?夠扁平化嗎?漸層夠漸層嗎?這對設計師的職涯前期很重要,或者是希望藉此錄取工作。耀眼的視覺效果很快可以完成;很容易放入作品集;指著說「那是我做的。」
身處設計的世界 10 年之後,我瞭解到物品的運作原理 (how something works) 或為何以此形式存在 (why something is the way it is),比起它看起來如何,重要多了。資深設計師很少花時間在為作品裝扮,而都在驗證方向是否正確。從上圖可以知道,資深設計師用不一樣的方式找出解答。
所以,你要如何避免把第一個想到的點子做得很漂亮?你要如何想出很多種方法,卻可以不用花費非常多時間?如果某個做法比上一個/下一個好,你要如何做決定?
有用的線稿
我想分享一個現正使用的簡單技巧,驅使我自己為多元方向進行探索與驗證。本篇之後提到的「線稿」,都是在紙上的描繪。在紙上進行線稿可以快速完成,強化一個想法時成本也低,直接丟棄更是安全。紙也可以讓任何團隊成員直接參與線稿的過程。
準備工作
開始做吧。拿出記事本(我喜歡 Borden & Riley’s Paris Paper for Pens),畫出至少 20 個長方形的格子。如果你正在做的是手機版 UI,就要讓長寬比例跟你打算用的裝置差不多。而桌面的 UI 就是跟螢幕的長寬差不多。
流程
現在用筆(我喜歡 PaperMate Flairs)針對你想要解決的設計問題,在每一個格子裡填入不同的做法。先描出你內心最清楚的點子,讓它們從腦袋裡提取出來,在每個格子都填過之前不要停下來。
你很難在所有的格子裡都能填入很棒的解決方案,而這就是重點了。你會為了盡量填滿,而讓想法從舒適圈進入未知的地方。如果掙扎於想不到新點子,逼迫自己作些不習慣的事情:如果選單是圓的會怎麼樣?如果只用圖片?如果完全不用圖片?蘋果公司會怎麼做?Google 會怎麼做?如果沒有清單或是網格會怎麼樣?除了把最重要的東西放在最靠近大拇指的位置,有沒有其他方法?對我來說,愈多總比沒有好,畫了大約 10 張以後才開始變得有趣。
想要知道關於更多線稿的分享吧,快點擊以下連結,帶著你探索更多喔!!!
精選專案.網頁設計.RWD響應式網站.企業形象網站 / 戶外旅遊類
網站技術:PHP/MySql
每個人旅遊方式百百種,有人喜愛快節奏、刺激;有人喜愛慢節奏、輕旅行。 樂晴可以為你設計一套獨一無二的套裝行程,針對不同的對象、目的都是可以安排的。不用擔心會玩的不開心,只怕會玩的太快樂!!
精選專案.網頁設計.RWD響應式網站 / 休閒餐飲類
網站技術:PHP . Javascript/MySql
用最純粹的方式來鎖住食材最天然的味道,因應不同季節推出當季的水果冰淇淋,讓消費者可以品嘗到在地好滋味。可以利用官網訂購冰淇淋,也可以親自到門市享用冰淇淋與其他甜點喔。
網頁設計.RWD響應式網站.行動版網站 / 美容保養類
網站技術:PHP . Javascript/MySql
電話:(02)2739-9096 | 傳真:(02)2739-6637 | 客服:[email protected] | 臺北市信義區和平東路3段257號6樓map
© 2019 傑立資訊 All rights reserved.| 網站隱私政策