廣州熱線

有時候咱們會遇到這樣一個事情，一個功能或者內容，到底是UX做，還是UI做？本文以keep的個人頁面為例，談談UX設計師與UI設計師的職責與合作。

在小公司，可能一個人需要同時擔任UX和UI兩種職責，只要是APP相關事宜，找到某位設計師就行了。但在大廠，因為職責分得比較細，而設計又是一項知識交叉比較多的業(yè)務，于是邊界也就不那么清楚，需要去判斷，到底一項活應該由交互去做呢還是由UI去做。

分清楚這件事的目的并不是為了推卸責任不去干活，而是為了明確事情比較適合哪個崗位的設計師去做，以達到時間和資源利用率上的最大化，用最少的人力去達到最大的效果。

以下是閣主所羅列的交互設計師的職責，如下圖。

今天咱們就用keep的個人頁面來說說，哪些事情是UX設計師應該做，哪些是UI設計師應該做的事，哪一項是兩者需要共同配合，一同完成的。請先查看keep的個人頁面，如下圖。

需求角度首先拿到PM給過來的需求之后，UX會開始從需求的角度分析問題，需求分為商業(yè)需求和用戶需求。

商業(yè)需求PM會比閣主講的更專業(yè)，在這里閣主只做初略解釋，即產品的目的是直接想達到讓用戶進行購買的行為，或者說收集用戶的數(shù)據(jù)進行間接盈利，通俗地說就是產品是怎樣賺錢的。

用戶的需求，即用戶為什么要使用該產品，使用該產品可以幫助用戶解決他的哪些問題，為他帶去哪些好處，為了達到這個目的，用戶愿意付出哪些成本。

再回到這個案例中，keep的產品定位為，為用戶提供優(yōu)質的健身視頻教程，并形成相應的社交圈子，讓用戶形成習慣之后靠電商去進行盈利。典型的從一個工具，到社交，再到電商的營銷模式。

它能幫助減肥，保持健康與好的身形，用戶為了達到目的，可以長時間沉浸在APP中。而好的身形本來就有利于社交，于是形成一個良性循環(huán)，健身-社交-更多社交-營銷。

在這種情況下，UX要做的事情是什么呢？一方面提高用戶在使用健身視頻中的愉悅感，另一方便將用戶往社交的方向引導。所有的出發(fā)點都是朝著這兩點進行前進。

設計角度原則確定之后，再來看看對于個人頁面，UX需要做什么。

流程是指，用戶在APP中的主流程，對應到keep中，則是打開APP——選擇訓練內容——跟著視頻做訓練——結束訓練——分享訓練的這樣這個路徑。信息架構是指APP的樹形結構，即它是由哪幾個tab組成，每個tab的內容是什么，大體如下圖。

而剩下的內容則都屬于單個頁面信息，包括頁面的布局，是像現(xiàn)在頁面分為兩大塊，上面一大塊是關于個人社交相關信息，包括頭像昵稱、粉絲數(shù)、關注數(shù)、動態(tài)數(shù)，而下面一大塊則是關于用戶個人的產出數(shù)據(jù)，又分為主頁和相冊兩個tab進行內容分區(qū)。在此案例中，布局中也包含了導航。

而信息的來源、屬性、優(yōu)先級、字段、關系，又代表著什么呢？打比方說，在圖中有個明顯地字體，KG.6，是指用戶的等級，由keep平臺制定規(guī)則，用戶達到相應的要求之后，等級數(shù)就會呈現(xiàn)。

那么這個“KG.6”的描述就是字段，由英文和阿拉伯數(shù)字組成；它的來源是由平臺的規(guī)則和用戶自己的貢獻一起產生；屬性在這里暫時可以理解成為描述和評估性質；優(yōu)先級和關系可以和整個頁面聯(lián)系起來考慮，它在個人主頁這個頁面來說重要級別低于整個頁面的個人數(shù)據(jù)表達，但是在單個主頁tab上，卻比其他的數(shù)據(jù)更加重要，所以在顏色和字體大小上做了強調。

動作是指什么呢，在這個個人主頁上，用戶的操作主要是上下滑動以及點擊的操作，那么用戶的滑動以及點擊的行為即用戶的動作。動作之后所帶來的頁面的變化即交互方式，點擊之后是會出現(xiàn)彈框呢還是push到一個子頁面，這些都屬于interaction交互方式。

而UI設計師則偏向于視覺語言的設計，顏色、字體、間距、插畫等等方面的工作。但也有UX和UI需要進行合作的，比方說空頁面，UX可以定義空頁面有哪些文本以及引導的動作，UI設計師可以繪制更幽默或者情感化的插畫進行表達，是可以進行合作的。

以上只是用一個案例從狹義的方面去表述交互設計師的工作內容具體有哪些，如果說要歸納起來的話，只要與用戶體驗的相關的內容，UX都需要進行考慮。能夠提高用戶感受或者效率的事情，UX都可以進行一些嘗試。還需要秉承一觀點，不管是UX、UI，哪怕是開發(fā)GG、QA童鞋，所提出的意見，能對項目有好處的，都可以進行決定，以及進行采納。

專欄作家

Sophiallg，微信公眾號：Sophia的玲瓏閣，人人都是產品經理專欄作家。一枚愛折騰，愛健身的交互設計妹紙。

本文原創(chuàng)發(fā)布于人人都是產品經理，未經許可，禁止轉載。