隨著職涯進展,我學到在進行視覺設計之前,先給客戶看線稿 (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 張以後才開始變得有趣。
想要知道關於更多線稿的分享吧,快點擊以下連結,帶著你探索更多喔!!!
Line OA / 服務類
網站技術:PHP/MySql
針對銀老族群與有需求者要使用的產品都可以透過來復易LINE OA官方帳號來做詢問,了解產品資訊、如何挑選、照護須知.....等等。功能介面簡易不複雜,所有年齡操作都不是問題。
精選專案.網頁設計.RWD響應式網站 / 金融保險業
網站技術:PHP . Javascript/MySql
可以透過網站中的虛擬人才點數,搭配網站獨家的Alpha金融演算模型,實現美股虛擬交易的功能。
精選專案.網頁設計.RWD響應式網站.企業形象網站 / 電子工業類
網站技術:PHP . Javascript/MySql
RWD響應式網站設計/網頁設計,網頁切版,後台程式管理
電話:(02)2739-9096 | 傳真:(02)2739-6637 | 客服:[email protected] | 臺北市信義區和平東路3段257號6樓map
© 2019 傑立資訊 All rights reserved.| 網站隱私政策