本周和PD們進行了一次《線框圖以及Axure入門》培訓。這是應幾位PD的需求,他們也要學習如何設計線框圖,所以想更加高效進行入門。

在場的有UED,有PD,我發現,對于兩者都要畫線框圖,引發了一些討論,這也是我事先預想到可能會引發爭議的部分。
其中有個PD講,有一次,老板是要求她來畫線框圖給他看的,她花了很多心思在線框圖上,結果交付給交互設計師的時候,交互設計師不知道如何進行發揮了,交互設計師說:你都畫這么好了,我不知道畫什么了。之后,交互設計師進行了“潤色”后,交付給視覺設計師,結果視覺設計師發現自己也無從發揮了,因為視覺稿已經出來了,都上了色了。
如果能夠提升項目效率,這樣倒真的也是好事。PD直接畫出確認版的線框圖,然后直接給視覺設計師,交互就不需要了。在很多小公司,也確實如此運作,也蠻好的嘛。
交互設計師說:交互設計師承擔了一種需求翻譯的工作,將PD的商業需求,進行具象化,并加入一些用戶的視角,幫助優化產品,之后翻譯成視覺設計師能夠理解的語言,最后產生視覺稿。這也只講到了一部分,如果PD也能夠具象化,并傳達得很好,為何還需要交互呢?
但是,在實際的工作環境里,我們必須得承認一個前提:術業有專攻,每個人的精力是有限的。
所以,PD,交互,以及視覺,雖然都在畫圖,究竟畫得有什么不同呢?

這是在這個PPT里其中的一頁,也得到了在場的PD以及UED的認可。
PD畫線框圖有時是不可以避免的,他們需要:
1. 細化思路,幫助自己寫需求文檔
2. 更好傳達自己的需求給其他人,比如交互
3. 一些預研型的項目,需要據此讓老板認可并拍板
但是做為PD,同樣也擔心之后交付給交互,會影響交互的發揮。而且,人人都有追求完美的傾向,在做了一個簡陋版的線框圖后,總是覺得太簡陋,總是不由自主增加很多細節,以使之先得更加專業。但是,PD需要將重點放到“輔助表達想法”上,對“有用”負責,比如,功能點、內容塊、業務流程,而那些打著叉叉的方面,不是說絕對不關注,絕對不表達,而是需要加上“僅供參考”。
做為PD,你認為版塊A非常重要,比版塊B重要得多,你可以在線框圖上把版塊A放大,放到首要位置,但是“位置”和“結構”不是你主要要控制的,你要傳達給交互的是:版塊A非常重要,以及為什么,而你所做的處理,僅供參考。聰明的交互會理解你的需求,且不會因為你妨礙了他的表達。
同樣,交互和視覺,雖然是一個團隊的,也經常發生因為邊界問題,比如:交互不由自主加了很多顏色和質感,視覺不知道如何處理。視覺更改了線框圖的結構,導致交互認為和自己傳達的邏輯不相符。
所以,作為交互,請注意那些必須要關注的東西:
1. 任務流——根據用戶需求、行為,分析用戶的任務,以及任務流程,簡化任務。
2. 布局/結構——信息分幾類,什么樣的布局更加易用
3. 位置/順序——各個版塊之間按照什么樣的位置進行排列,引導用戶的順序是怎么樣的
4. 層次/輕重——版塊之間、文本之間的層次如何
請注意,在表達位置/順序以及層次時,交互會忍不住為線框圖加注顏色,進行字體的設計,但是在交付時,這些也是“僅供參考”的。要傳達給視覺設計師的,仍然是“這些比哪些更重要,更應該被強化,以及為什么”。聰明的視覺設計師自然知道如何去表達而不是會覺得受到束縛。
到了視覺階段,視覺設計師不管接到多么像視覺的稿子,也需要重新進行思考定位,需要輸入目標用戶特征,需求,進行產品的風格定位。
我建議,在改變線框圖結構的時候,要和交互設計師保持溝通。上次,我在做線框圖的時候,和幾個PD,以及我們的幾個UED爭論了很久,確認的面包屑和搜索篩選的位置,結果到了視覺設計的時候,視覺設計師將我的面包屑調整到了不同的位置,為此還起了糾紛。因為這些位置的調整,是會影響之前確認的功能邏輯的。
大家如果有什么疑問,也歡迎繼續討論,那就先這樣吧~
討論:http://www.missyuan.com/viewthread.php?tid=480249
情非得已
21個Sketch實用高頻小技巧2019-02-15
25款值得收藏的優秀網站模板免費下載2015-09-16
20套高質量的免費網頁模版PSD素材2013-09-02
20款國外時尚大氣的按鈕開關PSD素材下載2013-07-31
CSS實例教程:十步學會用CSS建站2011-10-05
網頁設計師:淺淡網頁BANNER設計2010-09-27
網頁細節教程:WEB設計精確點滴2010-09-13
網頁設計中的點滴細節把握2010-09-01
總結交互組件創新的四種方式2010-06-28
最全的國外電子商務CSS模板下載2010-06-18
多種方法快速掌握不同的插畫風格
相關文章2912018-10-10
巧用這5個網頁設計技巧玩轉視差特效
相關文章2812017-11-17
詳細解析網頁設計中的視覺解剖分享
相關文章2602016-09-09
10張圖秒懂UI和UX到底有何不同
相關文章2782016-09-09
聊聊Web網站設計和移動App的六大差異
相關文章2932016-02-20
探究網頁HTML5頁面的不同表現手法
相關文章2892015-07-20
詳解解決設計網頁各種組件元素煩惱
相關文章2852014-07-18
網頁如何自適應不同的分辨率界面
相關文章61622014-04-23
