designer-wireframe-work-flow-1

云南体彩网編者按:初級設計師的設計流程和高級設計師有什么區別?一組線框圖就能看出來!今天?這篇好文教授的線框圖流程,可以幫你避免在不成熟的idea上面花去了過多的時間精力,并在短時間內拿出盡量多的問題解決方案,同時對方案之間的優劣作出正確的判斷。全是干貨!

十一年前的我21歲,剛卒業,進了一家小agency做視覺設計,人人也都知道,做agency肯定會遇到一言不合就改改改的殘暴客戶,他們才不會管你鮮肉不鮮肉。做了段時間我學精了,開始學會用電子檔的線框圖去見客戶,然后測驗考試和他們講清楚一切。線框圖嘛,好畫好改,跟客戶坐而論道根本不虛。一般走這樣的流程的話,客戶就很少會提出一些匪夷所思的新“需求”,項目往后推薦慷慨向也不大會改變很多了。

云南体彩网回顧職業生涯的這段傻白甜時光,才發現原來這樣的做法其實是誤用了線框圖這種設計工具,并沒有發揮到其真正的價值,因為我用錯了地方,或者說用得太過片面了。以我這個從業11年的老司機現在的眼里看來,線框圖其實就是將項目細分成好多小任務,然后一步步的完成,將項目從“探索期”推進到“準備認真搞起期”,而上面提到的,防止用戶或者領導改變主意殺你一個措手不及只是其中一個小小的方面。其時我沒有留意到,其實線框圖的更深條理的意義是贊助你解脫一些設計上非常明顯的而陷入傍邊又難以逃出的定勢思維,它贊助你更好的讓你看清自己的想要的器械,讓你在走上錯路之前先慢慢地選好一個正確的方向。

初級設計師的設計進程

wz201607131

云南体彩网以上這則小插圖是從大神Julie Zhou的文章,中拿來的。很好了論述了新人們在畫線框的時候普遍都存在的一個現象:當一個想法出來之后我們都知道先用線框畫下來,但是畫著畫著,總覺得紕謬勁,總覺得加上視覺元素之后能力真正看出效果來。在線框圖階段,這個“看出效果來”不知道浪費了多少設計小新的時間。

云南体彩网初級設計師總是無意之中就把注意力過多的集中到視覺層面之上,而忽視了功能上面的設計,而功能上的設計卻正正是線框圖階段最緊要的事情。視覺條理,最先也最易被感受和判斷,所以人人容易被吸引過去,想是不是符合最先的潮流啦,能不克不及在追波上獲得很多贊啦,夠不足扁平啦,夠不足漸變啦,能不克不及發票圈炫耀一下啦,能不克不及放到簡歷里面啦blabla。初級設計師容易陷入這種讓視覺滿足過分占據我們大腦的毛病狀態之中。

高級設計師的設計流程

wz201607134

在設計界摸爬滾打多年之后,哥領略到了,搞清楚一個器械的運作方式,遠遠比它看起來怎么樣更加重要。高級設計師會更少地花時間在外觀上面,他們反而會在選擇一個正確的發展方向上面更舍得花心思。看看上面那幅圖,高級設計師解決問題的方法和初級小鮮肉截然分歧。

一輛小破車,無論你噴多貴的車漆,也不會讓它內在變革好。

所以,我們怎么能力夠避免在不成熟的idea上面花去了過多的時間精力?怎么能力在避免浪費過多時間的前提下拿出盡量多的問題解決方案?怎么對方案之間的優劣作出正確的判斷?

做有用的線框圖

下面我會跟人人分享我在線框圖階段的工作流程,流程自己不重要,重要的是里面的思路。

一般我會在線框圖階段探索解決問題的方法。本文中的線框圖指的是紙質線框圖,紙質線框圖的好處人人都知道,真正的快,真正的好,真正的簡單,每個人都能畫,修改起來也不會心疼。(詳見譯者的另外一篇文章《先別急著畫高保真原型》

云南体彩网使用紙質線框圖能夠避免你把“漂亮的線框圖”跟“好的idea”混淆。

第一步

開始吧。我會拿起一本好點的筆記本,先畫上也許20個矩形框作為我們的屏幕,請依照你們所要設計的對象設備屏幕的比例來畫。

第二步

拿起筆,先把最先涌現在你腦海中的器械畫出來,然后繼續思考,盡量在每個矩形里面都畫上你的idea。

云南体彩网在這個過程中,你基本弗成能畫出20個你都很滿意的方案來,然而這就是重點,讓你從舒適區中跳出來,強迫自己想一些自己不知道的器械。當然,并不是讓你像完任務一樣毫無事理地畫滿20個矩形,當你感到畫無可畫、想無可想的時候,試著讓自己做一些以前都沒做過的器械,好比:只留下圖片怎么樣?沒圖片會怎樣?蘋果有案例看看嗎?谷歌會怎么做呢?如果不消列表會怎樣呢?能不克不及把重要的器械放在靠近用戶拇指那一側呢?對于我來說,當畫到第十個idea左右,有趣的器械就差不多來了。也請記得暫時忽略視覺設計思維,暫時看起來是很丑,但是線框圖階段我們設計的是功能結構。

wz201607135

云南体彩网如果沒有把20個都填滿,那么勉強一下自己,想多一些,直到自己真的想不出任何方案來了。要舍得在產品的功能性上面運營更多的時間,即便畫出的來的器械可能看起來非常怪異。

第三步

云南体彩网理想狀態下,當上述的步調得出了結果,那么接下來就應該轉入視覺層面上的工作了對嗎?但是這種情況實際上很少見,我建議先別急著打開電腦。讓你的想法在紙上多呆一陣子,讓這種一切還能改變的狀態多留久一些。

將脫穎而出的方案拿出來,在新的紙上畫出更大的矩形框,將方案畫成保真度更高的線框圖。這個階段我們主要的任務就是驗證這些方案能否承載得起更多的細節。

wz201607132
wz201607133

云南体彩网當這些工作做完之后你就能夠拿去跟同事領導進行探討了,看看有沒什么改進的地方。由于我們之前的工作一直是在紙上進行的,已經節省了好多時間,而且目前我們的方案還停留在紙上,這時候一定要擺好心態,不要怕改,繼續發揮線框圖的作用。

下一階段

僅花去了相對較少的時間,你可能就獲得了一個或數個拿得出手的方案。因為前面你已經做出了你想獲得的和不那么容易想獲得的假設,又獲得了數次反饋,對方案的細節也有了一定的探索了。(拿著線框圖就做線框圖的事情,在收集反饋意見的時候也請盡量引導人人往基本框架和功能的層面去討論。)

云南体彩网線框圖階段的工作大致完成之后要去做什么在這里我們就不討論了,但是我可以簡單的分析一下自己接下來的工作流程。我推薦人人去讀讀這篇文章,它里面的概念對我判斷idea之間的異同和設計工作的推進有一些啟發性的贊助。通常我不會那么快就結束掉線框階段的工作,我會將關鍵屏的線框圖放到流程里面的再考慮一番,看看前后銜接上面會不會涌現問題,當這一步走查工作完成之后我才會制作電子格式的原型,然后在真實設備上體驗。

理想條件之下,通過這個方法,你能夠獲得數個分歧的想法,最后對比之下選出一個你認為最佳的方案。這樣你就能夠最洪水平之上避免了過早的拿出了并不那么成熟的方案了。我想這就是作線框圖的真正價值。

「優設七月份的交互設計好文」

畫線框圖之前要做哪些事?
《畫線框圖前,交互設計師要做的3件事》

網易云音樂設計師的教程:
《超全面!教你打造美觀清晰易使用的交互文檔》

為AR應用做設計有哪些要注意的?
《現在超火!為AR應用做交互設計時需要思考的3個問題(有彩蛋)》

原文地址:

yestone-uisdc-2

【優設網 原創文章 投稿郵箱:2650232288@qq.com】

================關于優設網================
“優設網7daer.cn“是國內人氣最高的網頁設計師學習平臺,專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書:史上最全的設計師圖書導航:http://hao.7daer.cn/book/
設計微博:擁有粉絲量160萬的人氣微博 ,歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航:全球頂尖設計網站推薦,設計師必備導航:http://hao.7daer.cn

點贊
收藏 1
繼續閱讀相關文章

發表評論 快來秀出你的觀點

還可以輸入 800 個字
 
 
載入中....
評論 收藏