提到產(chǎn)品的 UI 設(shè)計，人們通常想到的是各種各樣的酷炫界面，推崇的是 Dribbble 風(fēng)及 Behance 上的酷炫風(fēng)格。平常在工作中，我也經(jīng)常思考，設(shè)計的意義及本質(zhì)在哪里？真的是越好看的界面越受用戶喜愛的嗎？？但逐漸積累發(fā)現(xiàn)，酷炫的界面只是停留在表面層，追求好看且不好看已經(jīng)沒有當(dāng)初感受的那么重要，真正支撐設(shè)計起來的還是業(yè)務(wù)訴求及商業(yè)目標。從這幾年設(shè)計趨勢發(fā)展來看，也確實論證了這個想法。盲目追求視覺表現(xiàn)力的時代正在慢慢遠去，以產(chǎn)品文化而去作為設(shè)計主導(dǎo)則變的更為流行。設(shè)計師要想跟上時代的腳步，除了視覺表現(xiàn)力，對業(yè)務(wù)的思考及對產(chǎn)品的理解也需進一步提升起來。

今天給大家?guī)淼倪@篇文章更多闡述的是設(shè)計思維，并非技法，也是對我工作這段時間的總結(jié)。我們在對接業(yè)務(wù)方需求方的時候，一個設(shè)計稿，往往面臨著多樣的挑戰(zhàn)，業(yè)務(wù)方或許會問你，為什么要這樣設(shè)計？但我知道，大多數(shù)時候，設(shè)計往往是根據(jù)感性而設(shè)定的，很難有理性支撐。那么如何跟業(yè)務(wù)方去進行溝通，把握住設(shè)計話語權(quán)呢？所以要想真正讓你的設(shè)計稿具有說服力，首先你得清楚你的設(shè)計為何而來？產(chǎn)品真正想要傳達給用戶的是什么？像這些都需要理性分析所支撐。在做項目需求時，只有感性與理性相結(jié)合，所產(chǎn)出的設(shè)計作品才是優(yōu)秀的，也是用戶所需要的，也更容易得到業(yè)務(wù)方的認可。

感性的設(shè)計難以具有說服力

在我的印象中，很多設(shè)計師在接受需求后，第一件事，就是找相應(yīng)的參考，直接吸取顏色，隨之確定相應(yīng)的風(fēng)格，做出視覺草稿，交差敷衍了事。或許這樣做出來的設(shè)計是比較漂亮的，還簡單省事，滿足設(shè)計師心中的想象，但這樣的設(shè)計真的完美嗎？其實借鑒優(yōu)秀作品，一直以來都不是什么很壞的的事情。偉人說過，站在巨人的肩膀上，才能比別人看的更遠。但在設(shè)計流程中，有個很重要的一點，就是設(shè)計師到底有沒有進行過獨立思考？如果是在設(shè)計前，理性的分析過業(yè)務(wù)需求，梳理過信息傳達的邏輯，最后才再找參考，這樣的設(shè)計師才會有所進步。如果缺乏獨立思考，單純靠找參考，感性完成任務(wù)，長此以往設(shè)計師只會變得更加懶惰，并難以得到業(yè)務(wù)方的認可。這樣的設(shè)計師只會變的越來越消極，幾年過去后甚至還在原地踏步，跟不上時代的腳步。

這樣就不難理解了，沒有經(jīng)過思考的設(shè)計，是很難被肯定的。其實有的時候業(yè)務(wù)方不喜歡你的設(shè)計，不是不喜歡你的審美，甚至可能在業(yè)務(wù)方看來，你做的設(shè)計稿很漂亮，但是并沒有得到產(chǎn)品所想表達的點，所以會一味的要求你進行修改，直達業(yè)務(wù)方?jīng)Q策層滿意為止。這個時候，主動權(quán)已經(jīng)到了業(yè)務(wù)方手中，業(yè)務(wù)方會要求設(shè)計師進行持續(xù)修改，但業(yè)務(wù)方在視覺層畢竟不專業(yè)，這樣雙方都會變的很痛苦。

一般會出現(xiàn)這種現(xiàn)象，大部分原因還是在于設(shè)計師沒有掌握到業(yè)務(wù)重點，做需求的時候沒有理解需求 Demo，缺乏與業(yè)務(wù)方的溝通，結(jié)果自然令人不滿意。所以在工作中，設(shè)計師也要學(xué)會經(jīng)常進行自我總結(jié)反思。當(dāng)然，不排除有小部分業(yè)務(wù)方喜歡無理取鬧，找存在感。

支撐設(shè)計的往往是商業(yè)目標

目前我們所從事的 UI 設(shè)計，還是屬于商業(yè)設(shè)計的一種。把握商業(yè)利益和用戶體驗的平衡是設(shè)計師需要做到的一點。經(jīng)常設(shè)計師在做需求時，會過度關(guān)注視覺表現(xiàn)力及設(shè)計流行趨勢，沒有考慮到如何用視覺表現(xiàn)，來有效的引導(dǎo)用戶，還原用戶認知。所以這樣處理出來的作品，嚴格意義上是不合格的。產(chǎn)品設(shè)計與藝術(shù)設(shè)計不一樣，作品能突出體現(xiàn)產(chǎn)品核心切入點，理解達成業(yè)務(wù)目標，才稱的上是合格的產(chǎn)品設(shè)計。

△ 插圖素材刻度盤

由此不難理解，不去熟悉理解產(chǎn)品業(yè)務(wù)，沒有數(shù)據(jù)支撐，那么你的設(shè)計作品真的很難具有說服力。

在設(shè)計流程中有很多點是設(shè)計師都需要考慮到的，單獨站立一點去進行理解，都是不行的。在與業(yè)務(wù)方發(fā)生意見分歧時，應(yīng)適當(dāng)思考如何解決問題，如何通過溝通達成一致，改善事情的結(jié)果。

△ 圖片素材等級網(wǎng)絡(luò)

另外在專業(yè)設(shè)計團隊，對于設(shè)計師模型的定義，也有著很清楚的要求，對于高階設(shè)計師，分析并梳理產(chǎn)品需求，參與設(shè)計前置環(huán)節(jié)，提供產(chǎn)品更多設(shè)計方向是考察設(shè)計師能力中必不可缺的一點。很多設(shè)計師很想提高自己的能力，但大部分時間都花在了通過臨摹優(yōu)秀作品提高視覺基本功，但卻忽略了對產(chǎn)品及業(yè)務(wù)的理解。我看到過很多設(shè)計師的簡歷，里面放了很多手機模型視覺圖及很多原型圖，或許界面設(shè)計的還算漂亮，但卻沒有說明如何通過設(shè)計手段，來提升產(chǎn)品的價值屬性。單獨放一堆這樣沒有意義的作品集，可能是第一輪都通不過了，當(dāng)然除非是你的視覺真的非常優(yōu)秀，足以撼動你的面試官。在專業(yè)的設(shè)計團隊中，面試時不單只考察表面層。缺乏對業(yè)務(wù)的思考與理解，只依靠盲目追風(fēng)所做出來的設(shè)計師，在市場中很難具有競爭力。如何理解用戶真正需要的是什么？如何通過設(shè)計手段來滿足用戶的訴求？這是每個優(yōu)秀設(shè)計師都需要考慮的點。

設(shè)計前的初步?jīng)Q策很重要

剛剛梳理了設(shè)計師的作品為什么容易遭受挑戰(zhàn)的原因。那么下面我給大家分享一下我平時在工作中所用到的一些設(shè)計方法。

在互聯(lián)網(wǎng)設(shè)計流程中，相信一名優(yōu)秀的 UI 設(shè)計師，絕對不是在拿到產(chǎn)品需求后第一時間打開設(shè)計工具，快速的替換出頁面。而是在原型圖拿到前，就會參與到設(shè)計決策中來，通過專業(yè)影響力來推動整個流程的發(fā)展，我們把它叫做首要設(shè)計轉(zhuǎn)變。

為了讓大家更好的理解，以我之前在斗魚所做的一個項目舉例。項目背景是為了提升直播間的互動氛圍，體驗升級，提高產(chǎn)品給用戶帶來的愉悅感。通過主播設(shè)定相應(yīng)的任務(wù)，水友贈送禮物讓主播完成所設(shè)定的要求。是一個全新的直播互動形式，增加用戶粘性，提高主播效益。這個功能的名字叫做充能任務(wù)，只要水友送的禮物達到相應(yīng)的數(shù)量，主播就執(zhí)行相應(yīng)的任務(wù)，大家也可以下載斗魚APP進行體驗。當(dāng)時在與產(chǎn)品同學(xué)確定了要做這個需求后，第一時間與產(chǎn)品同學(xué)進行了溝通，參與到項目的前置決策中來。通過溝通，能提供更多的設(shè)計方向，幫助產(chǎn)品同學(xué)達成業(yè)務(wù)目標。在溝通中，我分別做了以下幾件事情。

1. 分析目標用戶群體，明確產(chǎn)品定位

通過分析，斗魚的用戶畫像偏向于年輕化。而充能任務(wù)是一個通過贈送禮物進行互動的一個活動，所以我們單獨對數(shù)據(jù)進行了分析。發(fā)現(xiàn)熱愛觀看游戲類的觀眾，愿意接受新鮮事物，更愿意為主播贈送禮物，來提高活躍度，愿意使用游戲模型策劃出來的活動，會更符合用戶的心理預(yù)期。我們還發(fā)現(xiàn)，愛看直播的用戶從眾心理較強。所以設(shè)想的通過這一小部分活躍用戶，參與活動，來帶動整個直播間的活躍氣氛。通過前期分析，我們直接定位了產(chǎn)品的一個特色風(fēng)格。

2. 定義設(shè)計目標，確定需求優(yōu)先級

通過與產(chǎn)品、交互的溝通整理。大家一致認為，強調(diào)突出充能任務(wù)的內(nèi)容，能讓用戶看的明白，知道怎么玩，這個才是最重要的，禮物進度為其次。如果特意強調(diào)禮物，反而用戶會對整個活動喪失興趣。那么通過這些，我們很容易就能定義好設(shè)計目標。

設(shè)計目標

• 突出主播設(shè)定任務(wù)，降低用戶認知成本
• 通過動畫互動，提高直播間互動趣味性
• 重點區(qū)別已完成與未完成任務(wù)
• 優(yōu)化前臺顯示效果，引導(dǎo)用戶進行決策

通過梳理，明白主要需要凸顯的點，這個時候就可以跟產(chǎn)品同學(xué)進行溝通，合理的安排排期。通過先定義第一期的內(nèi)容，上線第一期，快速占領(lǐng)市場，再通過第一期的數(shù)據(jù)，進行后續(xù)分析并優(yōu)化。

這個時候我們可以通過設(shè)計工具快速繪制高保真頁面，通過前期的分析定位，你能很清楚的知道你所需要設(shè)定什么樣的風(fēng)格，才能受到用戶的喜愛。通過使用情緒版，我快速繪制出了第一版設(shè)計稿樣式。

3. 通過溝通，優(yōu)化結(jié)果

第一版的設(shè)計稿往往由于時間較趕，對于產(chǎn)品的理解難以深入。通過主動與業(yè)務(wù)方繼續(xù)溝通后，分別挖掘了以下的一些問題

• 重要信息不夠突出
• 按鈕不夠突出
• 進度條不明顯

通過仔細分析，我們可以對問題進行分解羅列，發(fā)現(xiàn)問題點，對設(shè)計稿進行修改。

重要信息不夠突出

其實就是信息層級過多，各層級區(qū)別不夠明顯。

按鈕不夠突出

其實按鈕已經(jīng)很大了，但是由于進度條多個搶眼，所以側(cè)面感覺按鈕較小。

進度條不夠明顯

進度條從視覺層其實已經(jīng)很大了，可能是展示形式不太對。

通過以上分析，我對設(shè)計稿進行了優(yōu)化修改并給出以下兩套按鈕顏色不一樣的方案，調(diào)整出來的界面雙方都較為滿意。

4. A / B方案測試，落地推動

在項目中，往往有的時候會出現(xiàn)多種方案難以選擇，這里我們可以通過測試來解決問題。通過不同渠道的投放，用數(shù)據(jù)驗證。在上面案例中，由于考慮按鈕的層級關(guān)系，所以按鈕使用了黃色跟白色兩種方案。白色的按鈕會使的頁面更為簡潔，黃色按鈕更容易達成業(yè)務(wù)目標。后通過測試，發(fā)現(xiàn)黃色按鈕的點擊UV更多一些，最終確定使用黃色按鈕方案，并對產(chǎn)品第一期剩下頁面進行細節(jié)調(diào)整，推動項目落地執(zhí)行。

△ 斗魚直播間-充能任務(wù)設(shè)計稿

數(shù)據(jù)能很好的從側(cè)面驗證你的設(shè)計

一般如果是新項目，我們大多數(shù)只能通過調(diào)研或者參照競品，來獲得參考依據(jù)。但在設(shè)計團隊日常需求中，大部分都是版本迭代，完善產(chǎn)品的需求。在做這種版本迭代或者是改版需求中，數(shù)據(jù)是個很好的衡量指標。通過數(shù)據(jù)驗證，我們能很好的檢驗設(shè)計成果。或許有些剛?cè)胄械男屡笥巡恢溃谶@里我們先來看一下數(shù)據(jù)行業(yè)中的一些專業(yè)名詞解釋

• PV：Page view 瀏覽點擊量，用戶每打開一個網(wǎng)站頁面，就記為1個PV。用戶多次打開同一頁面，瀏覽量累計。同一個頁面被訪問多次，瀏覽量也會累計，也就是統(tǒng)計一共被點擊數(shù)量。
• UV：User View訪問用戶量，指訪問某個站點或點擊某條 Banner 的不同 IP 地址的人數(shù)，一天內(nèi)同一訪客多次訪問網(wǎng)站只計算 1 個訪客(uv)，通俗易懂點就是有多少實際人數(shù)訪問了你的頁面。
• 轉(zhuǎn)化率：轉(zhuǎn)化率=轉(zhuǎn)化次數(shù)/訪問次數(shù)，比如以頁面的一個核心指標為例，當(dāng)天頁面的訪問量在 10 萬，頁面核心按鈕點擊次數(shù)為 1.2 萬次。那么該指標的轉(zhuǎn)化率為? 1.2 ÷10 = 12%。
• 跳出率：跳出率是指訪客來到網(wǎng)站后，只訪問了一個頁面就離開網(wǎng)站的訪問次數(shù)占總訪問次數(shù)的百分比。跳出率=只訪問一個頁面就離開網(wǎng)站的訪問次數(shù)/總訪問次數(shù)，跳出率越低說明流量質(zhì)量越好，用戶對網(wǎng)站的內(nèi)容越感興趣。
• 平均訪問時長：平均訪問頁數(shù)是用戶訪問網(wǎng)站的平均瀏覽頁數(shù)。平均訪問頁數(shù)=瀏覽量/訪問次數(shù)。平均訪問頁數(shù)很少，說明訪客進入你的網(wǎng)站后訪問少數(shù)幾個頁面就離開了。

更多數(shù)據(jù)基礎(chǔ)術(shù)語，可以看這篇：

通過數(shù)據(jù)，我們能用它很好地衡量檢驗設(shè)計是否有效，或者來挖掘發(fā)現(xiàn)一些新的問題。比如有個改版的項目，我們通過對這個頁面的數(shù)據(jù)進行分析，發(fā)現(xiàn)整個頁面點擊區(qū)域集中在上部分，下部分的轉(zhuǎn)化率較低。那么是不是我們可以嘗試分析原因，通過合理的布局，縮短頁面長度，提高底部曝光率來平衡整個頁面的流量呢？通過分析對比改版前后的數(shù)據(jù)，則能很輕松的發(fā)現(xiàn)問題所在。我們可以通過數(shù)據(jù)指標，找準關(guān)鍵切入點，對方案進行優(yōu)化。其實在整個設(shè)計流程，我們都能使用數(shù)據(jù)進行參考，用來作為判斷的依據(jù)。

那么我們?nèi)绾蝸砜磾?shù)據(jù)呢，剛剛有提到，可以通過對比來進行分析，那么這里我提供幾個小方法，幫助大家進行理解。

1. 通過時間差看變化趨勢

如頁面通過進行視覺改版，跳出率持續(xù)降低，平均停留時長持續(xù)增長，就說明這個改版是有效的。

2. 通過對比查看差異

類似分析一個欄目的特征，我們可以通過比較同一個欄目下的多個子欄目的差異，尋找一些參考特征，通過對比類似產(chǎn)品，查看一些相對的狀況，來得出產(chǎn)品本身的一些問題，從而改善。

3. 通過細分用戶群體分析

通過對按照不同分析的需要，對用戶群體進行分割。將不同人群的數(shù)據(jù)進行分析，查看各人群的表現(xiàn)差異化，通過差異化對產(chǎn)品進行理解，尋找規(guī)律，找到突破點。

更多的數(shù)據(jù)分析方法參考本文：

以上是一些常用的數(shù)據(jù)分析法，通過數(shù)據(jù)支撐，梳理業(yè)務(wù)設(shè)計目標，后續(xù)所進行的設(shè)計那么也一定是用戶所需要的。當(dāng)然，在數(shù)據(jù)理解這塊，還有更為專業(yè)的數(shù)據(jù)因素分析，聚類分析，當(dāng)然還有更為權(quán)威的 GSM 數(shù)據(jù)模型。這里給大家大概科普一下 Google 設(shè)計團隊所提出來的 GSM模型，其中 G（目標）設(shè)計目標，S（信號）現(xiàn)象信號，M（指標） 。通過設(shè)計目標來推導(dǎo)現(xiàn)象信號，再根據(jù)這些現(xiàn)象信號進行轉(zhuǎn)換，得到指標。Google 體驗團隊除提出行業(yè)內(nèi)部領(lǐng)先的 GSM 模型外，還有 HEART 模型來定義用戶行為數(shù)據(jù)，有所作為的同學(xué)可自行了解研究下，這里不再進行展開。

從心理學(xué)角度來理解設(shè)計

產(chǎn)品設(shè)計的目的就是以用戶為中心，最大程度的滿足用戶需求，為用戶提供更好的服務(wù)。用情感化設(shè)計打造出來的產(chǎn)品，會更容易受到用戶喜愛。這里給大家分開介紹，通過對用戶心智模型的研究，來完善對產(chǎn)品的情感設(shè)計理論及方法，讓設(shè)計更好的與用戶產(chǎn)生情感共鳴。

心智模型這個詞是蘇格蘭心理學(xué)家在上個世紀四十年提出來后，被研究認知領(lǐng)域所采用，并逐漸慢慢成為人機交互中的常用名詞。心智模型是指深植入我們心中，關(guān)于我們自己、別人、組織及周圍世界每個層面的假設(shè)、形象和故事。深受習(xí)慣思維、定式思維、已有認知的局限。也指人們一種習(xí)以為常、理所當(dāng)然的認知。

那么什么是符合用戶心智模型的體驗?zāi)兀亢喍虂碚f就是，基于用戶的心理行為，對用戶進行預(yù)判，比用戶提前一步預(yù)知用戶接下來的行為，從而提高更為合適的服務(wù)。

心智模型是人的一切行為方式，思考方式背后的規(guī)律和形式，能夠直接或者間接影響我們的行為。

如果還不能很好理解，我這邊給大家舉個例子。比如網(wǎng)易云音樂的播放器。當(dāng)開始播放的時候，指針往下挪動到唱片，唱片轉(zhuǎn)動。而且唱片中間，加載的正是這首音樂的專輯圖。這正是完整的延續(xù)了用戶心智的過程，與用戶所理解的一致，達成共鳴。

總結(jié)下來，對匹配用戶心智模型分別可以歸納為以下幾個要素

• 找準關(guān)鍵切入點做情感化，讓機械的界面與用戶達成共鳴
• 別想著讓用戶去思考，降低用戶的學(xué)習(xí)成本
• 不要總嘗試改變用戶認知，最好讓用戶覺得理所當(dāng)然

更多心智模型：

互聯(lián)網(wǎng)高速發(fā)展，設(shè)計趨勢也經(jīng)歷了幾個較大的跨越。從最開始，為了讓用戶更輕松的接受互聯(lián)網(wǎng)，使用的擬物化設(shè)計。到現(xiàn)在為了降低用戶認知成本，而使用的扁平化設(shè)計。從互聯(lián)網(wǎng)剛興起，到現(xiàn)在的百花怒放，除了產(chǎn)品在不斷進步，人類對于產(chǎn)品的理解也在進步，而且在持續(xù)不斷的進步。

所以設(shè)計師更需要學(xué)會快人一步接受新鮮事物，將好的一面用在設(shè)計之中，體驗升級，改用戶對于產(chǎn)品的認知。以長遠眼光布局整個產(chǎn)品生態(tài)形象，通過版本迭代，逐步來培養(yǎng)用戶的友好行為，這也是優(yōu)秀設(shè)計師需要考慮的地方。

總結(jié)

設(shè)計師真的是一個很苦逼的職位，不但通常被當(dāng)做是美工，還不容易得到認可，操著皇帝的心，拿著太監(jiān)的工資。互聯(lián)網(wǎng)行業(yè)爆發(fā)，越來越多的朋友加入了設(shè)計行業(yè)，這個行業(yè)同時也變得越來越專業(yè)。越到后面越發(fā)現(xiàn)，真想把設(shè)計做好，并不是一件容易的事情。希望能通過這篇文章，給剛?cè)腴T的設(shè)計師朋友一點啟發(fā)，提升關(guān)于理性方面的認知，間接提高自己的能力。

筆者文筆不太好，對于專業(yè)的理解力也有限，需要后續(xù)學(xué)習(xí)補充。文中很多地方也描述的不夠?qū)I(yè)，部分描述欠佳。對大家有用的地方，大家可以參考學(xué)習(xí)一下，不好的地方，還請各位同行多提點，謝謝各位支持！(文中部分圖片素材、專業(yè)詞段來源于網(wǎng)絡(luò)，此文僅作為學(xué)習(xí)交流使用，如有侵權(quán)，還請聯(lián)系）

歡迎關(guān)注作者的微信公眾號：「UX小學(xué)」