視覺設計師應該如何對接用研和交互的工作？

12-14

想問下大家，作為一名視覺設計師，該如何更好的對接用戶研究師和交互設計師的工作，也就是說該如何從用研和交互那裡得到相應的成果才能有助於視覺設計的開展？

UI設計師應具備一定的產品思維和意識，和全局觀。

先說個例子：
當我面試設計師的時候，如果他的上一份工作參與過APP項目，我會先讓他介紹一下這款產品：這是一個做什麼的應用？怎麼用或怎麼玩。你們有哪些競品？你覺得它解決了用戶的什麼痛點？是否有盈利模式？如果有是怎麼樣的？你覺得它的界面設計和體驗如何？可做哪些改進？

很多設計師，尤其是外包公司出來的設計師，雖然已經跟完了整個項目，但對產品的認識還停留在非常淺顯的階段。他們很難用清楚的語言跟我介紹這款產品，更別提怎麼說出它的商業模式，和用戶的痛點。他的設計和產品好像是2個不相干的事情。

初入職場的設計師朋友，看到這些面試問題，也可以自己想想看，我能答上來嗎？不帶著產品思維工作的UI設計師，可能會讓自己的職業生涯止足不前哦。

在產品PRD宣講的階段，帶上腦子參與進去，提出自己的見解，別怕說錯！認真聽，聽懂產品經理在說什麼，聽不懂就問吧~

很多設計師在參加宣講會時隨便聽聽，到作圖時就會因為沒有十分理解產品，只能照著原型圖出個畫面精細點的複製品。為了不成為一個畫圖工具，你需要在參與PRD宣講時，捕獲以下內容：

需求來自哪裡？我們接下去要做什麼功能？主要針對用戶是誰，幫助用戶解決什麼問題，解決的方案流程是什麼，上線後會有什麼階段性的預期效果？這些不要求瞭然於胸，但必須都聽過，知道。

如果在會上，有什麼不明白的地方，或有疑義的地方，一定要及時的提出來，拋出風險或問題。如果不提，即默認為明白、清楚、我都能搞定。那當你在設計中出現問題時，再去糾結交涉或詢問，就非常尷尬了。

在閱讀PRD，或聽產品經理宣講時，通過產品經理的講解及簡單的原型圖輔助，設計師應在腦中預設出成品所呈現的樣子，具體到關鍵按鈕的位置、顏色，某個頁面的畫面風格、彈窗的樣式等等，形成一些碎片化的思路。對應到UI的工作上，確定本次任務的設計方向、調性，標記需要注意的細節問題。

2、看懂交互原型和文檔，讓模型落地。甚至能以設計師的視角，幫助交互去優化原型。

UI作為產品研發的輔助崗位，需要清楚的了解到，我們接下去要做的新功能、優化要達到什麼目的。UI需要做哪些優化設計去幫助目標的達成。交互們遇到不清楚功能流程的UI會非常頭疼，他可能需要花很長時間跟UI梳理流程，讓他明白每一環節之間的關係，哪些頁面相對重要，需要更著重的設計感，按照日常的UI規範去做就好，哪些頁面比較常規，某些交互動作需要怎樣的動效、圖形等等。

設計師需要把交互原型表現的邏輯流程，用具象、豐富、美觀的方式呈現放大，變得漂亮又好理解。

譬如我們經常見到的空狀態頁面，原型圖可能只在空白處寫著一段空狀態提示。設計師如果完全按照原型的內容，給一個乾巴巴的頁面，照搬原樣，而忽略空狀態的用途意義，就是失敗的設計。當產品需要用戶去嘗試功能、進入、點擊時，空狀態著重體現引導性、愉悅感。當產品出現報錯、斷網、內容空缺等情況，空狀態又著重提現保留用戶、安撫情緒、表達歉意等。

這些內心戲豐富的空狀態頁面，細節都需要精準的文案和圖形配合呈現。需要設計師花時間動腦筋去創意。

假設這是為一個文章列表做的空狀態頁面，你或許需要做一個和文字、文章、筆、書等元素相關的圖片，配上提示文字。假設這是一個購物車的空狀態頁面，你或許需要購物車、錢、商品等元素組成的圖片，配上文字和醒目的購買按鈕。如果設計師把APP里的空狀態頁面都做的千篇一律，一眼看去長的都一樣，用戶甚至會區分不出自己到底在哪個頁面~

圖片來自網路

圖片來自網路

3、與交互、用研良好的溝通是理解問題的基石

很多設計師內心細膩，但不善表達，他們更喜歡戴著耳機沉浸在自己的設計中，敲著快捷鍵，讓一個白畫框化腐朽為神奇。這也許很適合獨立的創作者，比如插畫師。

但在快節奏的互聯網公司里，高效的當面溝通比發郵件、QQ微信更能快速的推進進度，也比悶頭做，自己慢慢揣摩來的更快。作為原型的實現者，對原型的理解一定包含著很多主觀的想法、創意，有時候也容易會錯意，比如交互給的是做A，UI變現出來的卻偏向B。因此和交互密切的溝通非常重要。

通常，如果你不確定應該怎麼呈現界面，可以使用以下的句式去提問：
··此處的提示是否重要？重要級別是什麼？要使用普通的提示彈窗（按鈕）還是醒目特殊的？
··我們可以在常規的界面上，做一些細節的創意讓用戶一眼就看到這個新點子。比如XXXXXXXXX，你覺得怎麼樣？
··這個交互效果我做了一些樣式，你看看哪個最符合你的要求？
這個頁面的重點是哪一部分？需要重點突出
我覺得此處應有更簡單的交互方式，XXXXX，你看可行嗎？

圖片來自網路

如圖所示：用研在初期主動的和產品經理探討調研需求，提供自己的專業意見；在這之後（也可以同時）交互和視覺根據部分調研結果尋找合適的競品做競品分析；用研報告和競品分析完成後，設計師可邀請產品經理結合業務要求，一起定義出設計方向；最後交互和視覺根據設計方向開始設計工作。
在這個過程中，UED的工作是連貫的，前面的成果得到有效的延續；並且大家的思想和認識得到高度統一，而不是像之前互不通氣，背對背的工作；設計師也不再被動應戰，而是採取合作、積極主動的態度。在這個過程中，UED和產品經理形成兩股平衡的力量，而不再是以「產品經理為中心的設計」。最終形成商業和體驗的平衡。

4、就算你不是UI，（從用研那裡)了解用戶也非常重要。

無論你是平面設計師、視覺設計、還是室內設計、遊戲原畫等等等等···抱住用戶的大腿，對用戶的喜好了如指掌才能做好設計。

在幼兒園的牆壁上畫哥特插畫、骷髏、裸女、黑烏鴉，估計會被孩子家長群毆致死。低價的快消品超市，店面看起來像奢侈品店，顧客可能也不敢進。極端例子或許不會在現實中出現。大部分設計師們其實也都有意識的去靠近用戶，只是做的還不夠細緻。

假設你正參與共享單車APP的設計。

用研應該能提供出主要用戶來自哪裡、他們的性別、年齡層、主要的需求目標、喜好、每天的生活軌跡、運動習慣等數據。設計師可以從中拎出來一些有用的細節，比如顏色、畫風偏好，常規的字體大小等，找到產品的設計調性。再從中捕捉到一些細節，比如主要的業務範圍是江浙滬地區，城市富裕，生活節奏快，是否可用小資的、時尚的風格？通過競品分析，我們的競品黃色、綠色、藍色都用過了，那我們再選一個什麼顏色既醒目又和諧呢？

用研報告的每一個點，都可以作為設計師的參考，累計的用戶資料越豐富，越能準確的把握設計的風格。

綜上，養成換位思考的思維方式，把自己當成用研和交互，參與到產品的每一環節，養成全局的視野，不閉門造車。用審慎緊密的邏輯支撐放飛自我的設計。一點拙見，希望有用~

謝邀

個人覺得這個問題，要從思維方式轉變。樓主能提出這個問題，說明已經具備了一定的責任心。

無論什麼崗位，其實本質目的都是一樣的。服務於產品，使產品做的更好，提升產品價值。

學會站在產品角度去思考問題是非常重要的，時常問自己幾個問題：為什麼這麼做？用戶人群有哪些？是在什麼場景下使用？目的是什麼？

站在這個角度思考問題，再加上自己工作的內容，那麼呈現的東西效率就會很高，也會很接近需求（這裡指用研/交互）想要的。

舉個例子：用研目的就是發掘用戶需求，了解用戶痛點，提出優化方案進而提升產品價值。那麼你拿到的能轉換成設計的，可能就是用戶人群是什麼，什麼場景下使用。

比如這個需求調研老年人平時在家做什麼？那麼你要考慮符合用戶人群（老年人）的用戶體驗：

老年人普遍視力差，手指不夠靈活，閱讀起來較慢等等。

所以你的設計中的文字要大一些，元素間距要更易讀，設計的顏色飽和度要搞一些等等。

所以樓主問題中的成果，都是需要進一步轉化，當你能夠了解他們的目的，那麼這些所謂的成果就形同於自己的東西，那麼自己的東西用起來自然順手了。

我喜歡極簡，所以回答問題也不想啰嗦
視覺首先對整個產品有所了解，然後需要理解交互的設計邏輯，信息層級，並且嘗試辯證地看交互，因為不是每個交互設計師都靠譜，把自己看成用戶，理解交互和信息，有問題與交互溝通。最後，在你對交互理解的基礎上自由發揮你的美學理念吧，不必拘泥於交互稿的排版和視覺

在日常的產品設計流程中，視覺設計師這一角色往往處在用戶研究和交互設計之後介入項目，而正是由於介入項目較晚，視覺設計師可能不會及時的了解用研和交互的意圖，而導致與預期效果有一定的偏差。

那麼視覺設計師在工作當中應該如何與用研和交互對接工作呢？在用研和交互的流程當中，視覺應當怎樣配合才能更好的為產品服務呢?

視覺設計師對接用研

目的：了解項目目標，確定產品的視覺風格

在用戶研究的階段，視覺設計師雖然不能完全將精力投入進去，但可以參與到部分工作，比如參與競品分析中的表現層分析、對當前產品的視覺診斷等工作，並了解用研的輸出結果，明確用戶是誰？需求來自哪裡？要做哪些功能？預期效果是什麼？從而確定產品的視覺風格類型、顏色搭配等。

具體工作：
1.了解項目背景（包括項目概況、客戶需求、目標用戶等）

2.參與項目現有產品的前期診斷（表現層階段，建議參考視覺評估要素）

3.參與競品分析（表現層階段），並明確競品的視覺風格和優劣勢

4.根據用研進行的可用性測試等反饋可以總結出視覺優化方案

5.明確客戶與用戶的意向視覺風格，了解用戶的喜好，收集意向素材（建議參考工具方法：情緒板）

6.通過以上工作確定配色方案、視覺風格、質感材質等

所需用研提供材料：項目背景介紹，競品分析報告，可用性測試反饋等。

視覺設計師對接交互

目的：優化交互原型，將線框圖轉化為用戶能夠讀懂的頁面，並進行視覺美化

在交互設計的階段，視覺設計師可以通過交互原型和文檔等輸出物去了解交互流程及功能，並審視功能和信息的層級關係，審視交互邏輯和創新點，從而進一步的優化交互原型。從審視框架到拆解布局再到演變版式，完成視覺創新設計。

具體工作：
1.看懂交互原型和文檔，梳理交互流程，了解頁面之間的關係，哪些頁面相對重要，需要更著重設計感，哪些頁面比較常規，哪些頁面需要動效／圖形等

2.根據交互原型確定信息的優先順序（通過位置、形式、大小對比、色彩對比等方法）

3.審視頁面視覺流，考慮信息強點的處理方式

4.考慮界面布局和信息內容處理方式，通過視覺引導用戶行為

所需交互提供資料：交互原型圖、交互文檔、功能架構圖、流程圖等。

視覺設計輸出物標準

1.視覺規範文檔 PDF
2.視覺源文件 PSD
3.視覺效果圖 JPG
4.標註圖 JPG
5.標註源文件
6.切片資源 PNG

其實不管是什麼崗位，本質的目的都是一樣的，都是服務於產品，把產品做得更好，提升產品的價值。在這個過程中學會換位思考尤其重要，視覺設計師可以把自己當成用研和交互，參與到產品設計的每一個環節，並逐漸具備一定的產品思維和全局的視野是每一位設計師都需要努力的！