一、什么是交互設(shè)計？

先來看一下百度百科的定義

交互設(shè)計（英文Interaction Design, 縮寫IXD)，是定義、設(shè)計人造系統(tǒng)的行為的設(shè)計領(lǐng)域，它定義了兩個或多個互動的個體之間交流的內(nèi)容和結(jié)構(gòu)，使之互相配合，共同達成某種目的。交互設(shè)計努力去創(chuàng)造和建立的是人與產(chǎn)品及服務(wù)之間有意義的關(guān)系，以“在充滿社會復雜性的物質(zhì)世界中嵌入信息技術(shù)”為中心。交互系統(tǒng)設(shè)計的目標可以從“可用性”和”用戶體驗“兩個層面上進行分析，關(guān)注以人為本的用戶需求。簡而言之，交互設(shè)計是解決特定場景下的人群如何高效使用機器或軟件的目標行為。

為什么要做交互設(shè)計

在使用網(wǎng)站，軟件，消費產(chǎn)品或各種服務(wù)的時候（實際上是在同它們交互），使用過程中的感覺就是一種交互體驗。隨著網(wǎng)絡(luò)和新技術(shù)的發(fā)展，各種新產(chǎn)品和交互方式越來越多，人們也越來越重視對交互的體驗。當大型計算機剛剛研制出來的時候，可能為當初的使用者本身就是該行業(yè)的專家，沒有人去關(guān)注使用者的感覺；相反，一切都圍繞機器的需要來組織，程序員通過打孔卡片來輸入機器語言，輸出結(jié)果也是機器語言，那個時候同計算機交互的重心是機器本身。當計算機系統(tǒng)的用戶越來越由普通大眾組成的時候，對交互體驗的關(guān)注也越來越迫切了。因此交互設(shè)計作為一門關(guān)注交互體驗的新學科在二十世紀八十年代產(chǎn)生了。

從用戶角度來說，交互設(shè)計是一種如何讓產(chǎn)品易用，有效而讓人愉悅的技術(shù)，它致力于了解目標用戶和他們的期望，了解用戶在同產(chǎn)品交互時彼此的行為，了解“人”本身的心理和行為特點，同時，還包括了解各種有效的交互方式，并對它們進行增強和擴充。

通過對產(chǎn)品的界面和行為進行交互設(shè)計，讓產(chǎn)品和它的使用者之間建立一種有機關(guān)系，從而可以有效達到使用者的目標，這就是交互設(shè)計的目的。

二、交互設(shè)計常用原則和定律有哪些？

尼爾森十大可用性原則

1、狀態(tài)可見原則

系統(tǒng)應該讓用戶時刻清楚當前發(fā)生了什么事情，也就是快速的讓用戶了解自己處于何種狀態(tài)、對過去發(fā)生、當前目標、以及對未來去向有所了解，一般的方法是在合適的時間給用戶適當?shù)姆答仯乐褂脩羰褂贸霈F(xiàn)錯誤。

即在用戶操作界面功能時給予實時反饋，例如：頁面加載狀態(tài)提示、按鈕點擊后的狀態(tài)變化、進度條提示等。

2、環(huán)境貼切原則

設(shè)計的一切表現(xiàn)和表述，盡可能貼近用戶所在的環(huán)境，將現(xiàn)實環(huán)境的操作功能巧妙的轉(zhuǎn)化為線上功能，使其貼近用戶。使用用戶能聽懂的專業(yè)術(shù)語，涉及到專業(yè)化語言時要轉(zhuǎn)化成用戶熟悉的語言。

即模擬真實的事物，使用戶更容易理解。例如：天氣應用中的天氣插圖、音樂播放器的膠片都是生活中熟悉的場景和物品，降低理解成本。

3、操作可控原則

對于用戶的誤操作，提供二次確認或者撤銷的功能，這樣可提高用戶的操作可控性。

例如：刪除聯(lián)系人二次確認提示、消息可撤回操作。

4、一致性原則

遵循統(tǒng)一的產(chǎn)品設(shè)計規(guī)范／邏輯。這里的一致性包含產(chǎn)品和跨平臺產(chǎn)品之間的一致性。

一致性包含視覺交互、文案描述、組建樣式等，例如：微信小程序設(shè)計規(guī)范。

5、防錯原則

設(shè)置防錯的機制，減少用戶犯錯。在用戶選擇動作發(fā)生之前，就要防止用戶容易混淆或者錯誤的選擇。

例如：用戶名稱校驗提示、手機號碼位數(shù)限制等。

6、易取原則

減少用戶記憶負荷，在適合的時機給用戶需要獲取的信息。

例如：驗證碼讀取、找人轉(zhuǎn)賬提示等。

7、靈活高效原則

提供靈活的操作和高效的獲取信息能力。

例如：手機號碼一鍵登錄、消息關(guān)鍵字識別等。

8、優(yōu)美簡約原則

保留產(chǎn)品最主要的信息，如果不是優(yōu)先級最高，要盡一切可能避免去影響產(chǎn)品的簡潔和美觀。

9、容錯原則

用戶在使用產(chǎn)品過程中出現(xiàn)了問題，及時準確的告知用戶出現(xiàn)問題的原因。

例如：信息輸入提示、搜索無結(jié)果等。

10、提供人性化幫助

在用戶需要的時候提供必要的幫助說明。

例如：新功能引導、解釋說明文案等。

七個交互設(shè)計定律

1、菲茲定律

點擊一個目標的時間同以下兩個因素有關(guān)：

（1）設(shè)備當前位置和目標位置的距離（D）。距離越長，所用時間越長；

（2）目標的大?。⊿）。目標越大，所用時間越短。

該定律經(jīng)常運用于鼠標從點A到點B的運動。

例如常用按鈕的尺寸設(shè)計等。

2、希克定律

一個人面臨的選擇（n）越多，所需要作出決定的時間（T）就越長。

交互設(shè)計中要合理設(shè)置選項，以免用戶使用中決策時間過長，降低使用效率。

3、米勒7±2定律

喬治米勒對短時記憶能力進行了定量研究，他發(fā)現(xiàn)人類頭腦最好的狀態(tài)能記憶含有7（±2）項信息塊，在記憶了 5-9 項信息后人類的頭腦就開始出錯。

例如：手機號碼的分位顯示、應用中標簽欄數(shù)量等

4、鄰近性法則

人們通常將距離近的事物劃分為一組。

界面設(shè)計中可以用對象間的相對距離來區(qū)分信息層級。

5、復雜性守恒定律

每個應用程序都具有其內(nèi)在的、無法簡化的復雜度。無論在產(chǎn)品開發(fā)環(huán)節(jié)還是在用戶與產(chǎn)品的交互環(huán)節(jié)，這一固有的復雜度都無法依照我們的意愿去除，只能設(shè)法調(diào)整、平衡。

例如：在智能手機出現(xiàn)之前，手機上的操作按鈕都是實體按鈕。在智能手機出現(xiàn)手，手機被整個屏幕占據(jù)后，所有的操作都集合在了手機系統(tǒng)之中，等于把物理操作轉(zhuǎn)移到了系統(tǒng)操作中，其本身的功能復雜程度并沒有發(fā)生改變，只是轉(zhuǎn)移了而已。

6、防錯原則

大部分的意外都是由設(shè)計的疏忽，而不是人為操作疏忽。因此，在設(shè)計中要有必要的防錯機制；在此，特別要注意在用戶操作具有毀滅性效果的功能時要有提示，防止用戶犯不可挽回的錯誤。

例如：登錄時用戶名校驗，手機號碼位數(shù)限制等。

7、奧卡姆剃刀原則

“切勿浪費較多東西去做，用較少的東西，同樣可以做好的事情。

”這個原理稱為“如無必要，勿增實體”，即“簡單有效原理”。

在設(shè)計中可以使用戶關(guān)注最主要的信息而非其它無關(guān)緊要的事物，從而提升使用效率。

三、交互設(shè)計如何開展工作

首先在交互設(shè)計師拿到需求后不要急著打開軟件開始繪制線框圖，而是要先分析需求，了解產(chǎn)品的戰(zhàn)略層和范圍層的業(yè)務(wù)目標。把握產(chǎn)品設(shè)計大方向，只有方向?qū)α撕竺娴墓ぷ鞑攀怯袃r值的。

把握了產(chǎn)品方向，下面就該進行需求的分析，

首先針對需求考慮5個問題：

1、為什么要做這個功能？（業(yè)務(wù)需求）

2、產(chǎn)品期望得到怎樣的成果？（業(yè)務(wù)目標）

3、誰來使用？（目標用戶）

4、他們要怎樣使用？（用戶需求）

5、如何讓他們都來使用？（將業(yè)務(wù)目標轉(zhuǎn)化為用戶行為）

清楚這5個問題后，再根據(jù)交互設(shè)計流程進行一步一步的進行

這實際上就是對需求的戰(zhàn)略層分析。

我們進一步分析業(yè)務(wù)需求（業(yè)務(wù)目的、業(yè)務(wù)目標）和用戶需求（目標用戶、用戶體驗目標），把握關(guān)鍵因素（用戶的動機、擔憂和影響目標達成的障礙）。

歸納這些需求，明確設(shè)計策略。

將“業(yè)務(wù)目標”轉(zhuǎn)化為“用戶行為”，通過引導用戶的使用來幫助產(chǎn)品實現(xiàn)目標。

從設(shè)計“用戶行為”到設(shè)計“用戶界面”，用戶行為決定了用戶界面，用戶界面也導致了用戶會出現(xiàn)什么樣的行為。

設(shè)計需求分析方法就是要幫助用戶創(chuàng)造動機、排除擔憂、解決障礙。

四、如何進行用戶研究，方法有哪些

評估的形式及方法

常見的評估形式分為三類：

1、評估主體：根據(jù)評估的主體不同來進行區(qū)分，即誰來做評估。

按照評估主體來區(qū)分主要有兩個主體：用戶和專家

用戶評估主要靠收集用戶使用數(shù)據(jù)，也就是用戶測試，它的數(shù)據(jù)相對客觀，但時間和費用較多，評估范圍較窄。

專家評估是讓工程師及設(shè)計師等專家基于自身的專業(yè)知識和經(jīng)驗進行評估的一種方式。專家評估相對主觀，但費時少、費用少、評估范圍窄。

兩種評估方法可以相互補充，并結(jié)合使用。

2、評估性質(zhì)：例如定性評估、定量評估或著其它方式。

按照評估的性質(zhì)來區(qū)分可以分為定量評估和定性評估。

定量評估是指對可以計量的部分進行評價，如點擊量、使用率等，可以用數(shù)據(jù)來說明。

定性評估是指對非計量性的部分進行評價，如流暢度、舒適性、創(chuàng)造性等進行評價。它只能表示一個度，無法準確用數(shù)據(jù)來說明問題。

3、評估過程：按照評估的過程來進行區(qū)分。

從評估的過程來區(qū)分可以分為理性評估和感性評估。

理性評估相對客觀，從客觀的角度出發(fā)判斷客觀事物。

感性評估更為主觀，評估結(jié)果并沒有客觀規(guī)律。

在實際應用中也需要將理性評估和感性評估結(jié)合使用，才能完整的完成我們的任務(wù)，達到我們的目標。

常見的評估方法有四種：

1、原型評估方法：在產(chǎn)品研發(fā)過程中，對于界面設(shè)計以及程序的測試來獲得用戶的反饋是至關(guān)重要的。以用戶為中心和交互式設(shè)計的重要因素之一就是原型方法，原型方法的目的是將界面設(shè)計與用戶的需求進行匹配。

一般來說原型評估方法分為三大類型：

（1）快速原型：原型迅速成型并分配實施，在原型實驗收集的信息基礎(chǔ)上，系統(tǒng)從草案中得以完善。

（2）增量原型：應用與大型系統(tǒng)，從系統(tǒng)的基本骨架開始，需要階段性的安裝，及系統(tǒng)的本質(zhì)特征是在初次安裝完成后允許階段性測試，以減少遺漏的重要特征。

（3）演化原型：對前期的設(shè)計原型不斷進行補充和優(yōu)化，直到成為最后的系統(tǒng)。

2、簡易測試評估方法

在條件不允許的情況下，可以采取簡易的方法來對用戶體驗進行評價。步驟是：

（1）實驗室環(huán)境準備：準備好測試用的電腦或其他媒介。兩個房間，房間1用來對被測試者進行測試，房間2用于設(shè)計師和工程師的觀察。

（2）被試選擇：分為用戶組和專家組。

（3）進行測試：房間1中被試者根據(jù)自己的選擇進行操作和測試，同時說出自己的內(nèi)心想法，觀察員在調(diào)查表上記錄被試者的每一次的操作情況，包括出錯情況和被試者的口語描述，當被試者在測試過程中遇到困難或操作無法進行時，觀察員要給予一定的客觀提示。房間2中通過相關(guān)設(shè)備將房間1的情況傳輸?shù)椒块g2，設(shè)計師和工程師實時觀察和記錄被試者的情況，以便今后對產(chǎn)品做進一步的修改和完善。

（4）結(jié)果分析：通過多次測試后，將測試結(jié)果匯總，提取出交互設(shè)計中存在的問題，以及對交互設(shè)計有益的建議形成測試報告。

3、眼動評估方法

眼動追蹤可以用來評價對產(chǎn)品（包括硬件產(chǎn)品和軟件產(chǎn)品）設(shè)計的感性意象，評測產(chǎn)品設(shè)計特征。眼動評估的主要指標有注視熱點圖、搜索過程測量指標、興趣區(qū)域即用戶視覺注意的焦點區(qū)。可以結(jié)合口語分析法了解用戶的所想 和所做。

4、腦電評估方法

通過對腦電信號的分析，研究者可以探索大腦的認知加工過程和受試者的心理狀況。近年來腦電評估方法在人機交互心理學等領(lǐng)域應用廣泛，被用來評估交互設(shè)計、人機界面、產(chǎn)品設(shè)計等方面的內(nèi)容。但是腦電評估也有一定的缺陷，例如空間分辨率上的局限性，因而對某些認知過程和腦區(qū)的定位并不是很準確。第二，在許多相似的實驗研究中，由于研究者采用了不同的實驗材料和方法等，實驗結(jié)果也存在差異性。第三 ，由于采集記錄時間的滯后性，腦電所記錄的并不一定是當下被試者所想到的內(nèi)容。

采取哪種方法來開展用戶測試和評估，要根據(jù)不同的任務(wù)結(jié)合不同的環(huán)境來開展，比如：時間、成本、資源等。

啟發(fā)式評估法

是專家評估法的一種，也被稱為經(jīng)驗性評估，最初由Nielsen博士提出。簡單來說，啟發(fā)式評估是一種簡易的可用性評估方法，使用一套相對簡單、通用、有啟發(fā)性的可用性原則，讓幾個評審根據(jù)專業(yè)知識和經(jīng)驗來進行評估，發(fā)現(xiàn)產(chǎn)品潛在的可用性問題。

啟發(fā)式評估的兩大要素：評估者和評估參照的原則。   

對評估者的要求主要有四個方面：

（1）人數(shù)：推薦3-5人，有時會更少

（2）知識：最好同時具有可用性知識及設(shè)計知識

（3）身份：最好是非設(shè)計者本人，否者不具有客觀性

（4）崗位：設(shè)計師或用戶研究員

評估參照的原則有：尼爾森十大可用性原則、八項黃金法則、首頁可用性指南、ios設(shè)計指南、拓展原則、HHS網(wǎng)頁設(shè)計與可用性指南等。具體需要根據(jù)實際項目來選擇，常用的是尼爾森十大交互原則。

什么時候適合使用啟發(fā)式評估法？

交互設(shè)計和UI設(shè)計階段、測試優(yōu)化和產(chǎn)品發(fā)布后的階段。

啟發(fā)式評估的優(yōu)缺點有哪些？

優(yōu)點：成本低、效率高、發(fā)現(xiàn)大多數(shù)可用性問題，甚至是用戶測試時不會出現(xiàn)的問題。

缺點：不能代表真實用戶，相對主觀、有時候發(fā)現(xiàn)問題過多、對評估人員知識背景要求較高。

什么時候適用？

（1）適合時間、資源有限的情況下快速發(fā)現(xiàn)可用性問題，降低風險及成本。

（2）版本變動不大的情況下，小成本檢驗。

（3）作為可用性測試的之前準備。

啟發(fā)式評估流程是什么？

（1）準備階段：確定范圍、背景調(diào)查、參考評估原則、評委邀約、材料準備

（2）執(zhí)行階段：任務(wù)走查、整體走查、結(jié)果記錄

（3）分析階段：匯總討論、報告總結(jié)、優(yōu)化方案

可用性測試

先來看一下我們在平時工作中常常會聽到這樣的問題

產(chǎn)品經(jīng)理：我們的用戶覺得產(chǎn)品好不好用？使用過程中會不會遇到問題？他們是否滿意？

設(shè)計師：設(shè)計的過程有一些糾結(jié)的地方，不知道實際用戶是怎么理解和操作的怎么辦？

產(chǎn)品開發(fā)后：想在大推前檢驗一下產(chǎn)品是否靠譜，適不適合大推？

當我們遇到這樣的一些問題時，如何找到方法快速得到答案呢？

那就是接下來要介紹的可用性測試方法。

可用性測試是一種常用的、高效的方法。

它的定義是：通過觀察具有代表性的用戶，完成產(chǎn)品的典型任務(wù)，從而找出產(chǎn)品可用性問題并解決，目的是為了改善產(chǎn)品，讓產(chǎn)品更容易使用。

什么時候適合做可用性測試呢？

一般是在：交互設(shè)計或UI設(shè)計、測試優(yōu)化、正式發(fā)布三個階段來做。當然是越早做越好，可以盡早發(fā)現(xiàn)問題并及時調(diào)整。

類型分為兩種：形成式和總結(jié)式

形成式特點：小樣本、發(fā)現(xiàn)問題為主、不能做定量對比。

總結(jié)式特點：大樣本（30人以上）、定量的評估、可以做對比評估

可用性測試可以解決什么樣的問題？

1、發(fā)現(xiàn)問題，產(chǎn)品在體驗上是否存在問題

2、檢驗實現(xiàn)，期望的設(shè)計目的有沒有達成，是否滿足了用戶的期望

3、產(chǎn)品評估，用戶是否會滿意

4、理解用戶，了解用戶行為習慣，了解用戶認知，找到某些問題的原因

測試流程是什么？

整體上分為4個階段：1、準備  2、測試  3、分析  4、優(yōu)化

1、準備階段要做的有哪些？

確定目標：確定測試目標決定了后面測試過程要怎樣去設(shè)計

常見的測試目標有：

·對整個產(chǎn)品做可用性評估

·對新增的功能模塊進行評估

·提前觀察新方案對新老用戶有怎樣的影響

·提前檢測改版是否達到預計目標

·設(shè)計時存在爭議，如何選擇解決方案

·某個環(huán)節(jié)流失率較高，檢測是否為設(shè)計原因?qū)е?

·需要拓展某一類特殊用戶，測試針對這類用戶在設(shè)計上是否需要作出調(diào)整

準備測試方案

方案中應當包含以下內(nèi)容：

·測試目的：明確測試的目的及范圍，測試目的決定了測試方案

·測試關(guān)注點：與負責的設(shè)計師一起梳理測試中要關(guān)注的問題

·用戶招募：招募要求，樣本配比，招募渠道

·經(jīng)費預算：獎勵的形式和額度

·時間計劃：用于把控時間計劃

撰寫測試腳本：設(shè)計測試任務(wù)，通過用戶行為去觀察提問來獲得我們想要的內(nèi)容

基本的流程有：

·暖場：3min，簡單聊天，消除用戶的緊張情緒

·測試說明：2min，對測試內(nèi)容規(guī)則做說明

·測試前訪談：10min，了解用戶基本信息

·簡單試用：3min，讓用戶熟悉產(chǎn)品

·測試執(zhí)行：30-45min，提示任務(wù)并觀察

·事后訪談：15min，針對疑點問點追問，填寫評價表

·道別：5min，支付禮金，送用戶離開

招募用戶

招募什么樣的用戶呢？

·根據(jù)測試目的來定，找出與測試目標有關(guān)的篩選緯度

·特別考慮用戶使用行為相關(guān)的特征，例如競品使用經(jīng)驗，使用產(chǎn)品的目的，用戶的活躍度等

·挑選最核心的緯度，轉(zhuǎn)化成用戶招募的條件，并盡量客觀化，具體化，可衡量

·避免設(shè)置交叉條件過多，導致樣本代表性降低

·學會辨別真假的用戶信息

招募多少用戶合適？

·以發(fā)現(xiàn)問題為目的快速可用性測試，6-8名即可

·考慮產(chǎn)品的復雜性，覆蓋人群差異性，適當做調(diào)整，拓展到10-15名

招募渠道有哪些？

·公司內(nèi)部

·現(xiàn)有產(chǎn)品用戶庫

·公司其他產(chǎn)品用戶庫

·熟人，朋友等

·推廣渠道：官微、公眾號、門戶網(wǎng)等

·社區(qū)，論壇，qq群等

·第三方調(diào)研公司

準備測試素材：低保真或高保真原型，或線上已經(jīng)可以使用的產(chǎn)品，也可以準備一些量表工具來輔助測試。在測試

過程中需要用到的電腦或手機設(shè)備，攝像頭，紙，筆，桌椅等。

測試場地選擇：

·專業(yè)可用性測試實驗室：一般對測試質(zhì)量要求較高，旁聽人數(shù)較多且需要采集豐富的數(shù)據(jù)的時候采用此方法。實驗室有兩個房間，一個測試間，一個觀察間，中間有單向玻璃分隔。測試間中有多角度的攝像頭，用來記錄測試過程，觀察間可以同步看到測試間里的情況，

·普通測試環(huán)境：在觀察人數(shù)較少（小于3人），條件有限時使用。

預測試階段：正式測試前進行預測試，保證測試流程通暢

·走查：記錄可能出現(xiàn)的問題

·預測試：找人先測試一下

·調(diào)整：調(diào)整測試流程

正式測試階段

測試參與人員有

·主持人：引導整個測試流程

·記錄員：記錄操作行為，訪談內(nèi)容，發(fā)現(xiàn)問題等

·產(chǎn)品團隊：參與旁聽，觀察，結(jié)束后交流

·用戶：完成測試及訪談任務(wù)

測試過程中需要觀察的要點：

·用戶是否獨立完成了任務(wù)

·是否存在無效操作或不知所措的情況

·用戶是否滿意

結(jié)果分析

邊測試邊總結(jié)，越及時越好

·測試完一個用戶，做一次小結(jié)

·測試結(jié)束當天寫小結(jié)，與設(shè)計師當場討論

·重要問題反饋后再總結(jié)分析報告

·邊測邊改，邊改邊測

結(jié)果分析4個步驟：1、對發(fā)現(xiàn)分類  2、整理不確定項  3、評定優(yōu)先級  4、結(jié)果記錄

撰寫報告

從4個方面來寫：

·總體如何

·有哪些問題

·嚴重程度如何

·建議是什么

·除此之外，還可以圍繞關(guān)注的問題，未滿足需求補充分析

優(yōu)化跟蹤

在測試之后需要出優(yōu)化的方案，測試優(yōu)化的過程是循環(huán)的。

測試之后如果還有其他問題沒有得到解決，可以結(jié)合其他的一些測試方法來得到。

問卷調(diào)研

問卷調(diào)查法是以書面提出問題的方式搜集數(shù)據(jù)的一種研究方法，研究者將所要研究的問題編制成問題表格，讓受訪對象以郵寄、當面作答、在線作答或追蹤訪問的方式填寫，從而了解被試者對某一現(xiàn)象或問題的看法和意見。問卷調(diào)研可以用于需求挖掘階段，也可以用于產(chǎn)品上線后的評估階段。

如果是想了解用戶對產(chǎn)品上線后的滿意度，可以使用問卷調(diào)研的方法。它比較適合去了解用戶的認知態(tài)度，也可以附帶了解用戶的行為習慣，

問卷調(diào)研的優(yōu)缺點

優(yōu)點：統(tǒng)一性、靈活性、量化性、匿名性

缺點：（1）只能獲得書面的信息，而不能了解到生動、具體的情況。（2）缺乏彈性，很難做深入的定性調(diào)研。（3）調(diào)查者難以了解被調(diào)查者是否認真作答，是不是自己填寫的。（4）填寫問卷比較容易，有些別調(diào)查者會隨意選擇，或者按照社會主流觀點選擇，這樣會使調(diào)查失去真實性。（5）回復效率低，對無回答者的研究比較困難。

問卷調(diào)查的使用場景

適用于：（1）需要進行定量分析的調(diào)研。（2）需要匿名進行調(diào)研的問題。（3）對已有假設(shè)進行檢驗。（4）尋找問題隱藏的關(guān)聯(lián)。（5）對產(chǎn)品設(shè)計用戶認知及態(tài)度的評估。

不適用于：（1）發(fā)現(xiàn)和描述具體問題。（2）探索受訪對象的模糊態(tài)度。（3）獲取創(chuàng)新想法。（4）獲取精確的行為數(shù)據(jù)。

問卷調(diào)研流程

1、確定目標：確定調(diào)研目的、對象、分析目的和應用對象。

2、調(diào)研方案：通過訪談、經(jīng)驗、理論等，確定調(diào)研框架，題目選項，分析思路，投放渠道，相本配比等。

3、問卷設(shè)計：問卷設(shè)計，問題美化，投放渠道。

4、問卷測試：多人測試，確保問卷的可讀性，邏輯通暢

5、問卷投放：按照計劃好的投放渠道進行投放，回收數(shù)據(jù)，數(shù)據(jù)清洗

6、問卷分析及填寫報告：分析及報告填寫，調(diào)研結(jié)果落地

數(shù)據(jù)分析

概述：通過在網(wǎng)站或應用中進行數(shù)據(jù)埋點，獲取用戶對產(chǎn)品的使用和行為數(shù)據(jù)，并進行基于產(chǎn)品體驗優(yōu)化的數(shù)據(jù)進行分析。

數(shù)據(jù)分析可以做什么？

1、可以做到用戶從哪里來，來了多少

2、獲取用戶屬性，用戶地域，用戶設(shè)備

3、訪問了哪些頁面，使用了哪些功能，消費了多少錢，消耗了多少時間

4、哪些流量可能存在問題，忠誠度如何，活躍度如何，有沒有達到目標，和行業(yè)相比如何

5、流失情況如何，離開之后是否還回來

可以作為產(chǎn)品的眼鏡和大腦，提供客觀衡量的依據(jù)，可以持續(xù)優(yōu)化改進。

數(shù)據(jù)獲取方式的對比

日志文件：優(yōu)勢，完整的服務(wù)端請求記錄。

                  缺點，日志的獲取和清洗有過濾成本，許多頁面操作無法記錄。

JS頁面標記：優(yōu)勢，數(shù)據(jù)獲取可控、靈活，可以對頁面操作記錄進行記錄，獲取數(shù)據(jù)比較完整豐富。

                      缺點，需要在頁面植入JS標記代碼，某些情況下無法獲取，如當用戶禁用JS功能時。

常用的數(shù)據(jù)監(jiān)控平臺

1、第三方監(jiān)控平臺：如Google Analytics、百度統(tǒng)計、騰訊云分析等

2、自研平臺

數(shù)據(jù)分析流程

1、監(jiān)控  2、定義  3、埋點  4、測量  5、分析  6、優(yōu)化

Web分析常用的指標

PV：是指頁面瀏覽量，網(wǎng)頁瀏覽數(shù)實施評價網(wǎng)站流量最常用的指標之一，用戶每一次訪問網(wǎng)站中的頁面均被記錄，對統(tǒng)一頁面多次訪問，訪問量累計

UV：是指獨立訪客，是通過互聯(lián)網(wǎng)訪問、瀏覽這個頁面的自然人

UPV：是指唯一身份綜合瀏覽量

訪問：是指在一定時間范圍內(nèi)，網(wǎng)站所有訪問者對網(wǎng)站發(fā)起訪問的總次數(shù)，從訪客來到網(wǎng)站到最終關(guān)閉網(wǎng)站所有頁面，記為一次訪問

識別用戶的方式：IP、IP+User Agent、cookie、User ID、設(shè)備ID、其他

復合指標

跳出率：指用戶來到網(wǎng)站，只瀏覽了一個頁面就離開的訪問次數(shù)，占全部訪問次數(shù)的百分比，簡稱“來了就走”。跳出率可以被用來衡量流量和頁面質(zhì)量，高跳出率表示訪問者對著陸頁面不感興趣，沒有繼續(xù)訪問更深入的頁面。也可能頁面設(shè)計存在問題，也可能是導入的用戶不匹配。跳出率可以通過調(diào)整廣告渠道，優(yōu)化頁面內(nèi)容來降低。

退出率：訪問者離開網(wǎng)站一次被記錄為一次退出，某一范圍內(nèi)退出的數(shù)量/該范圍的綜合訪問量就是退出率。如果關(guān)鍵流程中的某一頁面退出率高，代表某一頁面可能出現(xiàn)了問題。

訪問時長：網(wǎng)站停留時長，頁面停留時長，應用使用時長。訪問量是訪問質(zhì)量的一個衡量指標，較長的訪問時間說明用戶與產(chǎn)品進行了較多的互動。

訪問深度：可以理解為單個用戶平均訪問的頁面數(shù)，是PV/UV的比值。訪問深度也是訪問質(zhì)量的一個衡量指標，可以考察用戶是否和網(wǎng)站進行了較多互動。這個比值越大，代表網(wǎng)站的粘性越高。

轉(zhuǎn)化率：指在一個統(tǒng)計周期內(nèi)，完成轉(zhuǎn)化目標行為的次數(shù)占總訪問次數(shù)的比率。根據(jù)設(shè)置不同目的進行計算，例如注冊轉(zhuǎn)化率、付款轉(zhuǎn)化率等，是一個重要的分析指標。

移動端基礎(chǔ)指標

移動端的基礎(chǔ)指標監(jiān)測與web端略有不同，但分析思路大致相同。指標分為：新增設(shè)備、累計設(shè)備、啟動次數(shù)、單詞使用時長。

常見分析內(nèi)容

流量分析（哪里來？）、用戶分析（什么樣的用戶？）、行為分析（如何使用的？）、路徑轉(zhuǎn)化（表現(xiàn)如何？）、流失分析（粘性如何？）

A/B test

A/B測試是一種幫助網(wǎng)頁優(yōu)化實驗的方法。A/B測試的目的在于通過科學的實驗設(shè)計和采集數(shù)據(jù)的方式，來獲得具有代表性的實驗結(jié)論，從而尋找到更好的產(chǎn)品策略。

簡單來說，就是為同一目標制定兩個方案，讓一部分用戶使用A方案，另一部分使用B方案，記錄用戶的使用情況，對比兩個方案的結(jié)果，選擇更符合的方案。

A/B test一般會在產(chǎn)品改版正式上線之前使用，來驗證新的設(shè)計是否可以提高產(chǎn)品的表現(xiàn)。

A/B test可以測試的元素有：標題、圖片、顏色、社交元素、段落文本、按鈕、導航、任務(wù)流程、頁面布局、價格、視頻等。可一次只改變一個元素或一次改變多個元素的方式來測試，這就是兩個測試類型單變量測試和多變量測試。

A/B test工具

Google Website Optimizer：搜索巨頭提供的免費A/B test工具，一個很好的入門級工具，但是沒有一些先進的功能。

Visual Website Optimizer：一個易于使用的A/Btest測試工具，包含功能有所見即所得的編輯器，單機地圖，訪問者分割和標簽等。

Unbounce and Performable：集成著陸設(shè)計的A/B測試工具。

Vertster,SiteSpect,Webtrends Optimize and Omniture's Test&Target：企業(yè)級測試工具

App Adhoc Optimizer：國內(nèi)A/B Test工具，同時支持前端（Web/H5、IOS、Android）及后端（Node.JS、PHP、Java）AB測試服務(wù)的專業(yè)Saas平臺

Optimizely：是網(wǎng)上現(xiàn)有的最專業(yè)的AB測試工具之一，它的價格要比其他的工具高很多（也可以免費使用一個月），它提供了一些非常好的功能。

Unbounce：對于登錄頁面的測試來講非常不錯，而且它不僅僅是個測試工具，還可以在無需自己編寫任何代碼的情況下來創(chuàng)建登錄頁面。

如何做A/Btest

1、確定目標，例如提高網(wǎng)站的付費轉(zhuǎn)化率，降低跳出率等

2、測試方案，建立假設(shè)：購買按鈕的顏色會影響點擊率？縮短流程可以提高復費率？改變導航可以降低跳出率等？

3、創(chuàng)建相比較的兩個版本，改變其中的變量

4、發(fā)布測試，將部分流量導向B方案，但不一定是5：5

5、數(shù)據(jù)分析，收集數(shù)據(jù)，對比AB版本的轉(zhuǎn)化率、跳出率、留存率等

感謝閱讀！

UI設(shè)計中，除了界面整體的布局，還有一些圖標、插畫的設(shè)計，大部分都是素材的填充，而這么重要的部分往往被設(shè)計師所忽略。

對于素材的隨意挑選，殊不知選圖的技巧和方法有很多，眾多素材中如何找到我們心儀的配圖呢？這就是今天要和大家分享的主題，用科學合理的方法找到最合適的素材。

一、選擇配圖的常見錯誤

在為產(chǎn)品尋找配圖素材時，是一個長久過程。所以素材的運用即能幫你提升界面的效果，也能拉低界面的效果，很多設(shè)計師不在意選材的重要性，往往因為配圖后界面效果還不如原型圖看起來規(guī)范好看。下面我總結(jié)出三個方法可以提升配圖的效果。

1、素材與用戶預期：

不真正調(diào)研產(chǎn)品的用戶群里和心里。搭配的素材必然達不到用戶預期。每款產(chǎn)品的使用人群是不同的，我們的素材配圖要符合產(chǎn)品使用人群的預期。

如下圖：是一款有關(guān)于售車的界面效果，此項目的用戶的目標已經(jīng)確定，主為高端用戶，我們來看看左右配圖的區(qū)別。

左圖中我們在找配圖時如果不能保證對高端車的認知，必然會有低端車的產(chǎn)品圖的出現(xiàn)，由于不符合產(chǎn)品的使用人群，給用戶造成心理落差；而右圖則是我們了解高端車后的選圖，內(nèi)容是符合用戶心理預期的，同時通過配圖再次提升產(chǎn)品的逼格。

PS：我上面說到圖片內(nèi)容的心理預期與用戶不符，其實在關(guān)于選圖上，也是存在這個問題的，例如左側(cè)是通過百度找到的素材，不夠精致，無法提高界面的整體效果，而右側(cè)則是在站酷海洛找到的素材：

只要進行裁剪，縮放比例即可使用，界面整體檔次也提升很多。

2、素材與主視覺：

說到主視覺，就先要說說有關(guān)顏色的歸類，顏色主要分為暖色系，冷色系和中性色系三種，在界面中不同的顏色可以帶來不一樣的感受，如果不理解主視覺所要表達的感受，便找不到合適的配圖，無法提升界面效果。所以我們在選擇配圖時一定要追尋界面的主色系所以傳達的情感。

如下圖：左側(cè)是以冷色為主的直播界面，右側(cè)是以暖色為主的產(chǎn)品詳情頁。

左圖由于忽略了主視覺的關(guān)系，配圖為顏色過多，頁面整體表達出來的情感不夠直觀，無法產(chǎn)生共鳴。

右圖中我們通過控件可知主色為暖色系，選擇同色系的素材進行搭配，通過素材和主視覺的完美搭配才能明確傳達產(chǎn)品想要給用戶的感受。

3、素材與素材：

這是最容易出現(xiàn)的錯誤，我們通常只關(guān)注于素材的整體感覺，反而忽略同類素材之間的差異，不是所有的同類素材都可以放到一起來用的，我們還要注意素材與素材內(nèi)容的差異化。

如下圖：左圖為一款外賣食品列表的效果圖，右圖為商品列表的效果圖，大家可以分別感受一下左右兩側(cè)的哪個更舒服些。

左圖中列表的素材與素材的內(nèi)容是不同的，雖然都是食物圖，但有的是實物，有的是適量圖，給人的感覺是不同的，這也是大家總是覺得哪里不對，卻又說不出來的問題。

再看右圖中的列表，配圖元素統(tǒng)一，同為國外真人模特，符合素材與素材之間風格的統(tǒng)一。

PS：我們平時在做概念稿時，找同類型的產(chǎn)品圖消耗的時間也是很大的，不是圖片少，而是同質(zhì)量的素材太少了。

所以一定要在專業(yè)的素材平臺找查找，因為專業(yè)的素材平臺會根據(jù)設(shè)計師的需要提供方便快捷的素材集合。

例如上圖，我在站酷海洛中的搜索水果，便的到各個角度和不同風格的同質(zhì)量圖片，可以有更多的選擇去搭配。

二、運用配圖的常見錯誤

上面我們說的是如何選擇素材，而下面一部分主要是讓大家了解到?jīng)]有量身定做的素材，不是什么素材都可以拿來直接用的，理想是豐滿的，現(xiàn)實是骨感的。

辛辛苦苦找到的素材，就差一步便可以提升作品的效果，卻因為嫌修改麻煩而失之交臂，我們來看看下面三種方法是如何將素材進行優(yōu)化的。

1、統(tǒng)一素材比例：

在設(shè)計界面時，素材被拉伸變形，填充不滿等低級問題出現(xiàn)的已經(jīng)越來越少了，所以這里要說的不是基礎(chǔ)的尺寸問題，而且是素材內(nèi)容的占比比例。要保證素材中的內(nèi)容與背景的占比是一致的，才能提升界面規(guī)范性。

如下圖：兩張運動類產(chǎn)品的界面列表，我們來分別單獨預覽兩個界面，有沒有發(fā)現(xiàn)同樣的界面同樣的產(chǎn)品，但預覽產(chǎn)品的順序是不同的，這是什么原因?qū)е碌哪?？我們往下看?/span>

左圖中的產(chǎn)品展示內(nèi)容與背景的占比不統(tǒng)一，可能是按現(xiàn)實中的比例進行擺放的，有大有小，界面顯亂，干擾用戶的閱讀順序。

右圖通過更改圖片比例后，統(tǒng)一了圖片內(nèi)容與背景的比例，不會干擾用戶閱讀界面的順序。

2、統(tǒng)一素材角度：

素材因為角度不一，給人的感受也是不同的，在一個界面中的素材如果角度各式各樣，會影響到用戶的點擊欲望。所以在挑選素材時應該注意參考圖的角度，統(tǒng)一的拍攝角度可以讓界面變得更有秩序。

如下圖：左右兩張界面的產(chǎn)品展示部分。

左側(cè)界面中產(chǎn)品配圖角度各異，有正視拍攝，有俯視拍攝的界面毫無秩序感。而右側(cè)則對配圖進行了規(guī)范，都為正視圖，讓界面看起來更統(tǒng)一規(guī)矩。

3、統(tǒng)一顏色：

很多素材的構(gòu)圖和內(nèi)容都很棒，但放到界面中卻顯得格格不入，主要原因在于顏色之間的差異。選用素材后，如果對差異較大的顏色不做改變，便會造成顏色混亂，弱化了主視覺的顏色，用戶對其產(chǎn)品的認識便會漸弱。

如下圖：播放器界面中唱片封面的顏色差異。

左圖我們?yōu)椴シ牌鲗ふ业搅撕线m的素材封面，但素材的顏色是橙色的，素材與整體的顏色調(diào)性是不融洽的，破壞了界面的統(tǒng)一性，并不適合。

所以我們可以將封面改變其顏色變?yōu)榉衔覀兘缑嬷邪粹o以及播放時長的進度條的藍色即可。

三、線上運營用圖

前面說到的都是關(guān)于概念稿選擇素材用到的一些技巧，可能大家看了會覺得這是概念稿，在實際的線上是沒辦法控制的，這個觀點我并不同，實際線上的配圖就真的沒辦法提升了嗎？還是我們選擇性忽略了呢？也許我們最初的選擇就是美麗的謊言。

1.確保真實用圖：

在設(shè)計初期我們就應該使用真實的運營圖片進行設(shè)計，防止上線后才發(fā)現(xiàn)圖片與設(shè)計風格不符的情況，為時已晚。

如下圖：兩組圖為圖書展示模塊區(qū)域。

左圖為設(shè)計時擺放的封面，都是精心挑選的優(yōu)質(zhì)素材，美化了模塊的效果。

而右側(cè)為線上效果，無法保證封面設(shè)計的統(tǒng)一性，所以切勿使用與實際上線不符的圖片，會影響產(chǎn)品最終效果的判斷。

2.不可重復用圖：

很多設(shè)計師在做設(shè)計稿時，通篇只用一張素材圖，交給開發(fā)，其實這樣做出的設(shè)計，和原型無太大差異。

但是我們的設(shè)計稿是為了給運營提供參考的基礎(chǔ)模版，為了能和線上效果保持一致，所以設(shè)計稿中的素材不可在一個界面中出現(xiàn)兩次。

如下圖：視頻App中的頻道頁，左側(cè)為復用素材設(shè)計，右側(cè)為選擇不同素材設(shè)計。

左側(cè)的復用設(shè)計其實和原型區(qū)別不大，無法根據(jù)界面中的素材選擇運營圖，可利用性不大。而右側(cè)更貼近線上效果，可以給運營提供找素材圖的方向，避免返工。

3.圖片的清晰度：

模糊的圖片會使用戶的視覺體驗變得糟糕，現(xiàn)在的用戶對于圖片的瀏覽量每天都是不計其數(shù)的，如果想要在配圖上得到用戶的親睞，就必須要清晰且看著舒服的圖片。

如下圖：兩張同樣的界面展示，分別用了模糊的素材和清晰的素材。

左圖中圖片清晰度不夠，影響用戶的瀏覽，同時也會給用戶造成未加載完成的錯覺。

右圖中的素材則清晰可見，增加界面的美觀度。所以我們在用圖時，不可以用小尺寸的圖片強行拉伸，會導致圖片模糊不清，請選擇高清大尺寸的配圖。

4.圖片比例：

同一張圖片可能需要在多個界面中進行展示，而展示的尺寸也有可能存在差別，所以我們需要統(tǒng)一制定界面中運營圖的尺寸規(guī)則，也可以做好安全區(qū)，避免界面因比例不對造成的圖片拉伸或者顯示不全等情況。

如下圖：下面的圖片是原圖素材，接下來要將原圖分別放入不同的區(qū)域內(nèi)，他們的尺寸也不同。

在左側(cè)界面中，如果任由系統(tǒng)自動適配比例就會出現(xiàn)前兩種的錯誤，留白或變形，所以我們應該把較大的圖片制作規(guī)范，畫出安全區(qū)。

如右圖banner通過上面等比例縮放到剛好填充滿即可，下面的素材也是等比縮放大填滿整個擺放區(qū)域后在進行裁剪。

5.元素太多不使用：

很多運營的用圖元素過多，一心想把能放的都放進去，最后圖片內(nèi)容中沒有重點，用戶看的也是一頭霧水，元素少，突出重點的圖來使用。

如下圖：同為視頻App中熱播模塊，同樣的美劇和字段，只是素材有所不同。

左側(cè)素材中元素過多，影響用戶對圖片閱讀，無重點，沒有點擊欲望。

而右側(cè)的配圖簡單清晰一目了然，不會給用戶帶來閱讀負擔，更是挑選影片中簡單清晰的畫面作為封面使用，增加用戶點擊欲望。所以我們要選擇元素少的運營圖作為配圖。

6.格式太大：

圖片格式過大是一件很嚴重的問題，用戶預覽時加載速度過慢影響用戶體驗的流暢性，圖片過大也會增加用戶流量的使用費用。所以我們在導出運營用圖時，一定要記得壓縮圖片，對于壓縮到什么程度，要看圖片本身的大小，只要保證壓縮完依然清晰就可以。

如下圖：兩張同樣的素材圖，他們的清晰度是一樣的，可大小卻有區(qū)別。

左側(cè)為原圖大小，右側(cè)為壓縮后的圖片大小，我們可以看到壓縮后的圖片明顯占用的內(nèi)存更小了。

7.不要使用白色背景：

目前線上產(chǎn)品中白色背景的產(chǎn)品占比還是很高，所以我們在選用素材時，要避開白色背景的素材，當界面背景也為白色時，會造成無邊緣感。

如下圖：兩個模塊中選擇用了不同背景底色的素材圖。

左側(cè)素材中用了大量的白色背景的素材，無法判斷圖片與圖片之間的距離，同時也會造成圖片大小不一的錯覺。

右圖中使用有背景色的素材，可以清晰的區(qū)分每一個模塊的間距，整齊規(guī)范。

總結(jié)

我們在做概念稿時都知道需要精心選擇配圖，為什么在做線上稿時，圖片的質(zhì)量就變得那么差，是一件需要思考的事情，難道沒有好的素材，我們就放棄了產(chǎn)品的美觀度嗎？

我們不應該把美化調(diào)整運營圖變成日常的流程中嗎？這樣才能保證產(chǎn)品的最終質(zhì)量。好看的素材不是找出來的，而是通過我們優(yōu)化出來的。


文章來源：站酷   作者：海邊來的設(shè)計師

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)