本文筆者將從一個案例出發(fā)，講述：UI設(shè)計師如何從業(yè)務(wù)需求出發(fā)做設(shè)計？以及，UI設(shè)計師甚于從業(yè)務(wù)需求出發(fā)做設(shè)計對于產(chǎn)品、運營以及其自身的成長有何作用？

每當(dāng)UI設(shè)計師拿到PM或交互設(shè)計師的原型圖時，PM一般會跟UI設(shè)計師講一下原型圖的交互邏輯、業(yè)務(wù)需求。之后很多UI設(shè)計師感覺沒什么問題，打開設(shè)計軟件就開始視覺產(chǎn)出，設(shè)計完之后大概率會改稿改稿。因為UI設(shè)計師對業(yè)務(wù)需求、產(chǎn)品背景沒有充分的了解， 最終的設(shè)計稿就可能違背了業(yè)務(wù)需求。

如果你之前的工作經(jīng)常是這樣的，那么今天用一個案例告訴你：UI設(shè)計師善于從業(yè)務(wù)出發(fā)做設(shè)計，對產(chǎn)品、對自身的成長起到多么重要的作用？

案例講解

從一張線框圖說起，下圖是產(chǎn)品經(jīng)理給到我的一個線框圖：

這是個很簡單的B端產(chǎn)品，通過在地圖上圈選區(qū)域或者輸入坐標(biāo)，還有上傳坐標(biāo)文件三種條件，查詢坐標(biāo)區(qū)域的所有類型數(shù)據(jù)。

三個條件分別是：

1. 在地圖上圈區(qū)域查詢數(shù)據(jù)
2. 輸入已有坐標(biāo)點查詢數(shù)據(jù)
3. 上傳坐標(biāo)文件查詢數(shù)據(jù)（可解析成坐標(biāo)的文件）

業(yè)務(wù)需求及目的：

通過在地圖上圈選區(qū)域，從數(shù)據(jù)庫中調(diào)取該區(qū)域的所有類型數(shù)據(jù)，拿到數(shù)據(jù)后做數(shù)據(jù)分析。

需要溝通的問題：

通過對業(yè)務(wù)需求的了解和線框圖分析，確定線框圖的功能是沒什么問題的，但是整個頁面沒有主次，一排一樣大小的藍(lán)色按鈕，會讓用戶不知所措，所以這一點需要著重優(yōu)化。

1. 三個查詢條件使用頻率是否是一樣的？
2. 按鈕都放在右邊有什么用意？
3. 復(fù)制坐標(biāo)是有什么業(yè)務(wù)需求？
4. “保存圈選”跟“我的數(shù)據(jù)集”什么關(guān)系？
5. 拖動地圖坐標(biāo)是否跟著變化？

以上這些問題都需要再次跟產(chǎn)品經(jīng)理進一步溝通，弄清楚這些問題會對產(chǎn)品業(yè)務(wù)有進一步的了解，對線框圖的功能重新布局也會有很大的幫助，通過溝通得出的結(jié)論是這樣的：

1. 條件一圈選，使用頻率大概85%以上；條件二輸入坐標(biāo)，使用頻率10%以下；條件三上傳文件，使用頻率5%以下。
2. 一排藍(lán)色按鈕并沒有什么用意。
3. 查詢完成后，使用者常常要復(fù)制坐標(biāo)記錄到文檔中。
4. 保存圈選后，此圈選會放到“我的數(shù)據(jù)集”。
5. 地圖拖動坐標(biāo)跟著實時變化。

這些問題的準(zhǔn)確了解，對UI設(shè)計來說有著重要參考價值，對產(chǎn)品經(jīng)理沒有考慮周全的地方也會有一個好的啟迪。

首先通過我們了解到的業(yè)務(wù)需求，把堆放在一起的線框圖功能，按優(yōu)先級重新布局，分成四大類。

分類1：

城市顯示會隨著地圖拖動的變化而變化，所以篩選框的樣式并不符合要求，把城市跟區(qū)縣級放到一起更為合理，同時白色的小三角指示，依舊可以手動選擇城市來定位地圖。

分類2:

三個查詢條件是一個屬性，所以放到一起，通過使用頻率的分析，把85%圈選功能放到tab切換的第一個，不常用的兩個查詢條件沒必要直接顯示出來，因為使用的次數(shù)太低頻，都放出來，視覺上會互相干擾，頁面看起來不夠簡介！

分類3:

使用者復(fù)制的都是圈選后的當(dāng)前坐標(biāo)，所以復(fù)制按鈕跟坐標(biāo)分為一類，這樣的指示非常明確，線框圖上的復(fù)制坐標(biāo)按鈕，并不能很好的表達(dá)這一點。

分類4:

圈選區(qū)域后，點擊“保存圈選”會保存記錄在“我的數(shù)據(jù)集”，所以這倆是一類需要放一起。

最終得到的頁面會相對更有邏輯性，清晰明了，容易上手。

其他優(yōu)化：

圈選后查詢數(shù)據(jù)都會用到的“查詢”按鈕，根據(jù)“菲茲定律”高頻按鈕相對放大，使其容易點擊，減少能量消耗，提高使用效率。

其次地圖的修改，因為要高頻率的在地圖上操作，所以地圖在屏幕上全屏展示，能保持一個相對更大的操作面積。

總結(jié)：

上面業(yè)務(wù)需求是圈選區(qū)域，查找該區(qū)域的所有類別數(shù)據(jù)，然后進行數(shù)據(jù)統(tǒng)計分析。如果業(yè)務(wù)需求的出發(fā)點是某一類的數(shù)據(jù)在指定區(qū)域的查詢，那么現(xiàn)在的產(chǎn)品設(shè)計就不符合業(yè)務(wù)需求。

例如：使用場景是用戶需要查詢“醫(yī)院”在某坐標(biāo)區(qū)域的數(shù)據(jù)量，這時產(chǎn)品就得以查詢的條件為優(yōu)先——例如加數(shù)據(jù)分類選擇項，數(shù)據(jù)類別輸入搜索框等。

所以，對業(yè)務(wù)需求理解有一點偏差或抓不準(zhǔn)，都會出來一個失敗的產(chǎn)品，不管是PM還是UI都需要充分的了解業(yè)務(wù)需求，這樣產(chǎn)品才會少改稿貼近業(yè)務(wù)需求，利于不敗之地。

重要內(nèi)容

優(yōu)秀的UI設(shè)計師設(shè)計中都考慮哪些問題？

1. 為誰而設(shè)計

一個產(chǎn)品好壞不能主觀的去判定，或者產(chǎn)品有多個角色用戶，只討好認(rèn)為重要的一個角色用戶，尤其B端產(chǎn)品有一定的特殊性，產(chǎn)品設(shè)計中會有很多不確定因素，不同的角色用戶對產(chǎn)品要求也是不一樣的！

拿上面的案例舉例：假設(shè)85%以上的公司員工都是用圈選完成自己的工作，剩下的兩個查詢條件是公司領(lǐng)導(dǎo)的查詢?nèi)肟?，或者產(chǎn)品的本身就存在兩種角色的用戶，每個角色的查詢?nèi)肟谑褂妙l率都是100%。那這個時侯我們是不是就要重新思考產(chǎn)品的交互邏輯了，所以搞清楚為誰而設(shè)計很重要。

2. 你的設(shè)計碰了誰的奶酪

我們UI設(shè)計師有時候會覺得這個按鈕入口放的位置不夠好看，或者邏輯上不該放到這里，然后把按鈕的樣式設(shè)計不夠凸顯或者放到了一個其他的位置，改了一下交互。哪怕很多人看來改的非常之好，但你的設(shè)計有可能影響了一個運營部門人員的績效KPI，影響了點擊量，這直接就影響了人家的收入，那這樣的設(shè)計能說是好的設(shè)計嗎？

所以，UI設(shè)計師對產(chǎn)品業(yè)務(wù)的了解， 產(chǎn)品背景的了解，整個產(chǎn)品的利益相關(guān)者的了解，是多么多么多么重要！

3. 你所了解的需求是不是最符合用戶心智

繼續(xù)拿上面的案例舉例，需求方給到的需求是：我們要通過地圖坐標(biāo)找到某個區(qū)域的數(shù)據(jù)，根據(jù)這樣的需求做產(chǎn)品。

最終出來的就是：需求方要一個凳子，你就給了他一個凳子，而其實你不了解他需要的是休息。如果挖掘到了更深層次的需求，我們最終的產(chǎn)品可能給到的就是一個沙發(fā)、一張床，這樣就能更貼近用戶心智。

這樣的需求不去挖掘，不去思考，需求方可能也不會意識到他需要的是休息，所以我們的專業(yè)也就體現(xiàn)在這些地方！

通過需求的進一步挖掘，需求方可能會告訴你：

• 拿到數(shù)據(jù)要跟領(lǐng)導(dǎo)匯報；
• 拿到數(shù)據(jù)要上傳到一個數(shù)據(jù)系統(tǒng)中；
• 要賣給客戶；
• 要整理做數(shù)據(jù)可視化圖標(biāo)。
• ……

當(dāng)我們知道他要做什么的時候，我就能沿著他之后的行為，讓產(chǎn)品更符合他的使用心智！

例如：滴滴打車，解決的就是讓用戶從A點到B點，如果不深入思考用戶的需求，可能輸入目的地時候就不會出現(xiàn)“家”“公司”的快捷入口了。

所以，一切設(shè)計都是為了能提供用戶更好的服務(wù)。

4. UI設(shè)計師不要總把“用戶體驗”掛嘴上

互聯(lián)網(wǎng)產(chǎn)品發(fā)展了這么多年，“用戶體驗”這個詞絕對是爛大街的詞了。尤其UI設(shè)計師在跟產(chǎn)品經(jīng)理或交互設(shè)計師探（撕）討（逼）產(chǎn)品時，UI設(shè)計師總會蹦出“用戶體驗不好”這樣的話，其實這樣的爭辯在產(chǎn)品經(jīng)理眼里，很多時候根本站不住腳。因為在產(chǎn)品經(jīng)理眼里業(yè)務(wù)需求更重要，所以我們UI設(shè)計師要懂業(yè)務(wù)，我們講的用戶體驗要有業(yè)務(wù)需求的支撐。

如果遇到用戶體驗問題，我們要怎么去表述，首先可以分析優(yōu)劣，一步一步的講解，不要上來就講：“這樣設(shè)計用戶體驗不好”，搞的UI設(shè)計師只會說“用戶體驗”似的。所以，少提這四個字，但是我們表述的其實就是用戶體驗。

現(xiàn)如今產(chǎn)品的用戶體驗好，其實就是產(chǎn)品的一個基本價值，并非是附加價值。既然是基本價值，講出來分量也就不高，再者說，大家都接觸了這么多年的互諒網(wǎng)產(chǎn)品對用戶體驗多少都了解。所以，我們要晉升到更高的層次講用戶體驗，因為我們是專業(yè)的（自豪臉）。

說到這里，我們了解業(yè)務(wù)過程就要跟產(chǎn)品經(jīng)理溝通需求，有時可能會有不同意見，如果我們篤定自己的方案更好，那應(yīng)該怎么去說服他呢？教你一招——“否” “新” “高”

• 否：否定產(chǎn)品經(jīng)理的觀點/方案（要委婉、分析優(yōu)劣、誰也不愿意被否定）。
• 新：提出新的觀點/方案。
• 高：站在更高的層次論證自己的方案。

記住這三個字，“否” “新” “高” 當(dāng)然這一切的前提，自己要有過硬的技能儲備。UI設(shè)計師懂產(chǎn)品交互，就能比PM站在更多更高的維度論證自己的觀點，但是也要善于接受別人的觀點，不做偏執(zhí)狂。

還有我們在探討產(chǎn)品時，盡可能的不要主觀表述問題，例如：“我個人認(rèn)為怎樣怎樣” “我覺得怎樣怎樣”，產(chǎn)品屬性本身就是客觀的存在，所以要站在客觀的角度去表述。

所以，之后聽到別人這樣評價我們的設(shè)計“我個人認(rèn)為你這個設(shè)計不合理”，然后就沒有然后了。那這時候就告訴他，你自己去一邊認(rèn)為去吧！哈哈開玩笑的！

總結(jié)

UI設(shè)計從來都不是單單美學(xué)上的設(shè)計，更多的是解決用戶問題與需求，為用戶設(shè)計更好的服務(wù)體驗，最終實現(xiàn)產(chǎn)品的商業(yè)目的！

最后要告訴UI設(shè)計師的是：未來的市場一個懂交互產(chǎn)品的UI設(shè)計師絕對是優(yōu)秀的！

加油！

作者：吳星辰，微信公眾號：互聯(lián)網(wǎng)設(shè)計幫

本文由 @吳星辰 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自Unsplash, 基于CC0協(xié)議