聊聊線框圖：UED和PD對於線框圖不同的定位

本周和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爭論了很久，確認的麵包屑和搜索篩選的位置，結果到了視覺設計的時候，視覺設計師將我的麵包屑調整到了不同的位置，為此還起了糾紛。因為這些位置的調整，是會影響之前確認的功能邏輯的。

大家如果有什麼疑問，也歡迎繼續討論，那就先這樣吧～