一、什么是交互設計？

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

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

為什么要做交互設計

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

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

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

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

尼爾森十大可用性原則

1、狀態可見原則

系統應該讓用戶時刻清楚當前發生了什么事情，也就是快速的讓用戶了解自己處于何種狀態、對過去發生、當前目標、以及對未來去向有所了解，一般的方法是在合適的時間給用戶適當的反饋，防止用戶使用出現錯誤。

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

2、環境貼切原則

設計的一切表現和表述，盡可能貼近用戶所在的環境，將現實環境的操作功能巧妙的轉化為線上功能，使其貼近用戶。使用用戶能聽懂的專業術語，涉及到專業化語言時要轉化成用戶熟悉的語言。

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

3、操作可控原則

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

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

4、一致性原則

遵循統一的產品設計規范／邏輯。這里的一致性包含產品和跨平臺產品之間的一致性。

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

5、防錯原則

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

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

6、易取原則

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

例如：驗證碼讀取、找人轉賬提示等。

7、靈活高效原則

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

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

8、優美簡約原則

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

9、容錯原則

用戶在使用產品過程中出現了問題，及時準確的告知用戶出現問題的原因。

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

10、提供人性化幫助

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

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

七個交互設計定律

1、菲茲定律

點擊一個目標的時間同以下兩個因素有關：

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

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

該定律經常運用于鼠標從點A到點B的運動。

例如常用按鈕的尺寸設計等。

2、?？硕?

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

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

3、米勒7±2定律

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

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

4、鄰近性法則

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

界面設計中可以用對象間的相對距離來區分信息層級。

5、復雜性守恒定律

每個應用程序都具有其內在的、無法簡化的復雜度。無論在產品開發環節還是在用戶與產品的交互環節，這一固有的復雜度都無法依照我們的意愿去除，只能設法調整、平衡。

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

6、防錯原則

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

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

7、奧卡姆剃刀原則

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

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

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

三、交互設計如何開展工作

首先在交互設計師拿到需求后不要急著打開軟件開始繪制線框圖，而是要先分析需求，了解產品的戰略層和范圍層的業務目標。把握產品設計大方向，只有方向對了后面的工作才是有價值的。

把握了產品方向，下面就該進行需求的分析，

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

1、為什么要做這個功能？（業務需求）

2、產品期望得到怎樣的成果？（業務目標）

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

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

5、如何讓他們都來使用？（將業務目標轉化為用戶行為）

清楚這5個問題后，再根據交互設計流程進行一步一步的進行

這實際上就是對需求的戰略層分析。

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

歸納這些需求，明確設計策略。

將“業務目標”轉化為“用戶行為”，通過引導用戶的使用來幫助產品實現目標。

從設計“用戶行為”到設計“用戶界面”，用戶行為決定了用戶界面，用戶界面也導致了用戶會出現什么樣的行為。

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

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

評估的形式及方法

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

1、評估主體：根據評估的主體不同來進行區分，即誰來做評估。

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

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

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

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

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

按照評估的性質來區分可以分為定量評估和定性評估。

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

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

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

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

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

感性評估更為主觀，評估結果并沒有客觀規律。

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

常見的評估方法有四種：

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

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

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

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

（3）演化原型：對前期的設計原型不斷進行補充和優化，直到成為最后的系統。

2、簡易測試評估方法

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

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

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

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

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

3、眼動評估方法

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

4、腦電評估方法

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

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

啟發式評估法

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

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

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

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

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

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

（4）崗位：設計師或用戶研究員

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

什么時候適合使用啟發式評估法？

交互設計和UI設計階段、測試優化和產品發布后的階段。

啟發式評估的優缺點有哪些？

優點：成本低、效率高、發現大多數可用性問題，甚至是用戶測試時不會出現的問題。

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

什么時候適用？

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

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

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

啟發式評估流程是什么？

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

（2）執行階段：任務走查、整體走查、結果記錄

（3）分析階段：匯總討論、報告總結、優化方案

可用性測試

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

產品經理：我們的用戶覺得產品好不好用？使用過程中會不會遇到問題？他們是否滿意？

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

產品開發后：想在大推前檢驗一下產品是否靠譜，適不適合大推？

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

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

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

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

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

一般是在：交互設計或UI設計、測試優化、正式發布三個階段來做。當然是越早做越好，可以盡早發現問題并及時調整。

類型分為兩種：形成式和總結式

形成式特點：小樣本、發現問題為主、不能做定量對比。

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

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

1、發現問題，產品在體驗上是否存在問題

2、檢驗實現，期望的設計目的有沒有達成，是否滿足了用戶的期望

3、產品評估，用戶是否會滿意

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

測試流程是什么？

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

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

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

常見的測試目標有：

·對整個產品做可用性評估

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

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

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

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

·某個環節流失率較高，檢測是否為設計原因導致

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

準備測試方案

方案中應當包含以下內容：

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

·測試關注點：與負責的設計師一起梳理測試中要關注的問題

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

·經費預算：獎勵的形式和額度

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

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

基本的流程有：

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

·測試說明：2min，對測試內容規則做說明

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

·簡單試用：3min，讓用戶熟悉產品

·測試執行：30-45min，提示任務并觀察

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

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

招募用戶

招募什么樣的用戶呢？

·根據測試目的來定，找出與測試目標有關的篩選緯度

·特別考慮用戶使用行為相關的特征，例如競品使用經驗，使用產品的目的，用戶的活躍度等

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

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

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

招募多少用戶合適？

·以發現問題為目的快速可用性測試，6-8名即可

·考慮產品的復雜性，覆蓋人群差異性，適當做調整，拓展到10-15名

招募渠道有哪些？

·公司內部

·現有產品用戶庫

·公司其他產品用戶庫

·熟人，朋友等

·推廣渠道：官微、公眾號、門戶網等

·社區，論壇，qq群等

·第三方調研公司

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

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

測試場地選擇：

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

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

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

·走查：記錄可能出現的問題

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

·調整：調整測試流程

正式測試階段

測試參與人員有

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

·記錄員：記錄操作行為，訪談內容，發現問題等

·產品團隊：參與旁聽，觀察，結束后交流

·用戶：完成測試及訪談任務

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

·用戶是否獨立完成了任務

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

·用戶是否滿意

結果分析

邊測試邊總結，越及時越好

·測試完一個用戶，做一次小結

·測試結束當天寫小結，與設計師當場討論

·重要問題反饋后再總結分析報告

·邊測邊改，邊改邊測

結果分析4個步驟：1、對發現分類  2、整理不確定項  3、評定優先級  4、結果記錄

撰寫報告

從4個方面來寫：

·總體如何

·有哪些問題

·嚴重程度如何

·建議是什么

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

優化跟蹤

在測試之后需要出優化的方案，測試優化的過程是循環的。

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

問卷調研

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

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

問卷調研的優缺點

優點：統一性、靈活性、量化性、匿名性

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

問卷調查的使用場景

適用于：（1）需要進行定量分析的調研。（2）需要匿名進行調研的問題。（3）對已有假設進行檢驗。（4）尋找問題隱藏的關聯。（5）對產品設計用戶認知及態度的評估。

不適用于：（1）發現和描述具體問題。（2）探索受訪對象的模糊態度。（3）獲取創新想法。（4）獲取精確的行為數據。

問卷調研流程

1、確定目標：確定調研目的、對象、分析目的和應用對象。

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

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

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

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

6、問卷分析及填寫報告：分析及報告填寫，調研結果落地

數據分析

概述：通過在網站或應用中進行數據埋點，獲取用戶對產品的使用和行為數據，并進行基于產品體驗優化的數據進行分析。

數據分析可以做什么？

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

2、獲取用戶屬性，用戶地域，用戶設備

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

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

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

可以作為產品的眼鏡和大腦，提供客觀衡量的依據，可以持續優化改進。

數據獲取方式的對比

日志文件：優勢，完整的服務端請求記錄。

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

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

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

常用的數據監控平臺

1、第三方監控平臺：如Google Analytics、百度統計、騰訊云分析等

2、自研平臺

數據分析流程

1、監控  2、定義  3、埋點  4、測量  5、分析  6、優化

Web分析常用的指標

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

UV：是指獨立訪客，是通過互聯網訪問、瀏覽這個頁面的自然人

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

訪問：是指在一定時間范圍內，網站所有訪問者對網站發起訪問的總次數，從訪客來到網站到最終關閉網站所有頁面，記為一次訪問

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

復合指標

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

退出率：訪問者離開網站一次被記錄為一次退出，某一范圍內退出的數量/該范圍的綜合訪問量就是退出率。如果關鍵流程中的某一頁面退出率高，代表某一頁面可能出現了問題。

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

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

轉化率：指在一個統計周期內，完成轉化目標行為的次數占總訪問次數的比率。根據設置不同目的進行計算，例如注冊轉化率、付款轉化率等，是一個重要的分析指標。

移動端基礎指標

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

常見分析內容

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

A/B test

A/B測試是一種幫助網頁優化實驗的方法。A/B測試的目的在于通過科學的實驗設計和采集數據的方式，來獲得具有代表性的實驗結論，從而尋找到更好的產品策略。

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

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

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

A/B test工具

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

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

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

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

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

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

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

如何做A/Btest

1、確定目標，例如提高網站的付費轉化率，降低跳出率等

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

3、創建相比較的兩個版本，改變其中的變量

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

5、數據分析，收集數據，對比AB版本的轉化率、跳出率、留存率等

感謝閱讀！

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

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

一、選擇配圖的常見錯誤

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

1、素材與用戶預期：

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

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

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

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

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

2、素材與主視覺：

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

如下圖：左側是以冷色為主的直播界面，右側是以暖色為主的產品詳情頁。

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

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

3、素材與素材：

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

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

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

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

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

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

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

二、運用配圖的常見錯誤

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

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

1、統一素材比例：

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

如下圖：兩張運動類產品的界面列表，我們來分別單獨預覽兩個界面，有沒有發現同樣的界面同樣的產品，但預覽產品的順序是不同的，這是什么原因導致的呢？我們往下看。

左圖中的產品展示內容與背景的占比不統一，可能是按現實中的比例進行擺放的，有大有小，界面顯亂，干擾用戶的閱讀順序。

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

2、統一素材角度：

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

如下圖：左右兩張界面的產品展示部分。

左側界面中產品配圖角度各異，有正視拍攝，有俯視拍攝的界面毫無秩序感。而右側則對配圖進行了規范，都為正視圖，讓界面看起來更統一規矩。

3、統一顏色：

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

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

左圖我們為播放器尋找到了合適的素材封面，但素材的顏色是橙色的，素材與整體的顏色調性是不融洽的，破壞了界面的統一性，并不適合。

所以我們可以將封面改變其顏色變為符合我們界面中按鈕以及播放時長的進度條的藍色即可。

三、線上運營用圖

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

1.確保真實用圖：

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

如下圖：兩組圖為圖書展示模塊區域。

左圖為設計時擺放的封面，都是精心挑選的優質素材，美化了模塊的效果。

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

2.不可重復用圖：

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

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

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

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

3.圖片的清晰度：

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

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

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

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

4.圖片比例：

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

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

在左側界面中，如果任由系統自動適配比例就會出現前兩種的錯誤，留白或變形，所以我們應該把較大的圖片制作規范，畫出安全區。

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

5.元素太多不使用：

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

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

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

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

6.格式太大：

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

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

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

7.不要使用白色背景：

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

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

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

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

總結

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

我們不應該把美化調整運營圖變成日常的流程中嗎？這樣才能保證產品的最終質量。好看的素材不是找出來的，而是通過我們優化出來的。


文章來源：站酷   作者：海邊來的設計師

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

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

“人家設計得真好！”可是好在什么地方呢，卻說不出來。這是阻擋你成為優秀設計師的一大障礙。設計是我們的本行，不會用設計語言來解構畫面，是說不過去的。

移動互聯網設計發展到今天，有很多傳統的設計規律可以遵循，也提出了新的挑戰。因為手持設備屏幕較小，如何在有限的頁面內呈現或引導有效信息，又不顯得雜亂臃腫，考驗著設計師的能力。

為什么有的主題或App界面就那么舒服，那么清新，那么有情懷？里面蘊含著哪些最基礎的版式設計理念，讓我們一塊梳理梳理，給初入UI設計的同學做個參考。

今天和大家講講構圖。

構圖版式三板斧

問題一：為什么要講版式設計？有必要么？

就以我剛入行UI設計失敗經歷為鑒吧，那時候，一拿到需求就馬上開始設計，根本就不管什么版式，結果設計出來方案總是很別扭，顯得特別亂，往往被扣上“風格不統一”“用戶體驗差”的帽子。最開始我也是說服不了自己，覺得別人不理解自己的作品。現在想想確實當時存在問題。UI設計必然離不開設計師的天馬行空，但是它畢竟是要面向大眾市場，做成全世界只有自己能理解的孤品有什么意義呢，UI里的“用戶體驗”又體現在什么地方呢？而這樣的設計又反過來阻礙了你的設計生涯，長期的失敗設計很容易帶來挫敗感和麻木感。

尤其是作為初入行的UI設計師，更有必要學習一些版式設計思路。所謂創新，也仍然需要在了解已有的好設計基礎之上進行，這里說這些不是讓你生搬硬套，是讓你站在前人的肩膀上看得更遠。

問題二：為什么一開始就要構圖呢？

設計和繪畫一樣，對需求和內容進行分析，采用適當的構圖可以化繁為簡，提高設計效率。在嘗試比較多種構圖后，設計師的思路會更加明確。期間耗費的時間成本最低，可以反復進行調整，直到找到最為合適的構圖方式再往下進行細化，添加元素，豐富畫面。

一個項目給設計師的時間是有限的，我們核心重點在于弄清楚產品的功能核心和賣點，把它們凸顯出來，最終讓用戶獲得更為舒服的體驗。而雜亂無章的堆積會顯得非常的糟糕，甚至有時候，用戶會因為找不到自己想要的東西而馬上流失，留下非常不好的印象。通過前期構圖，可以節省時間，讓設計更有條理。

問題三：構圖，會限制設計的創造力嗎？

不會的。設計的痛苦莫過于“沒有思路”和“漫無邊際”，這兩者都源于需求分析不夠，同時也與事先沒有做好構圖工作有關。構圖為設計提供了明確的嘗試方向，甚至通過不同的構圖可以產生的交互效應，達到意想不到的效果。限制創造力的問題不要擔心，因為構圖只是一個框架，同類型的構圖完全可以做出不一樣的風格。雖然設計構圖結構相同，但設計的表現方式和元素不同，仍然能夠塑造出不同的設計趕腳。靈活運用構圖和布局更能讓你把設計集中在元素和產品特色上。

廢話不多說，下面我將和大家介紹以下幾種在界面中常用的構圖方法：

九宮格構圖，圓心點放射形構圖，三角形構圖，SF字形構圖。

1.九宮格網格構圖

這種版式主要運用在分類為主的一級頁面，起到功能分類的作用。

通常在界面設計中，我們會利用網格在界面進行布局，根據水平方向和垂直方向劃分所構成的輔助線，設計會進行得非常順利。在界面設計中，九宮格這種類型的構圖更為規范和常用，用戶在使用過程中非常的方便，應用功能會顯得格外的明確和突出。

九宮格給用戶一目了然的感覺，操作便捷是這種構圖方式最重要的優勢。

九宮格看似簡單隨意，用好了同樣能呈現出奇妙的效果。

靈活運用九宮格輔助線區分出來的方塊。在有規律的設計方法中找突破，做設計一定要注重這一點！

在九個方塊分配的時候，不一定要一個格子對應一個內容，完全可以一對二，一對多，打破平均分割的框框，增加留白，調整頁面節奏，或突出功能點或廣告。各個方塊的不同組成方式，頁面的效果也會產生無數的變化。

我們可以看出這樣的版式，同樣可以使界面變得非常的靈活，內容簡單，信息明了。

2.圓心點放射形構圖

生活中，最為常見的就是圓形了，眼睛是圓的，太陽是圓的，碗也是圓的，天也是圓的。在界面設計中圓的運用可謂是點睛之筆。

圓是有圓心的，在界面中，往往通過構造一個大圓來起到聚焦、凸顯作用。

放射形的構圖，有凸顯位于中間內容或功能點的作用。在強調核心功能點的時候，可以試著將功能以圓形的范式排布到中間，以當前主要功能點為中心，將其他的按鈕或內容放射編排起來。

我們將主要的功能設置在版式的中位置，就能引導用戶的視線聚集在想要突出的功能點上，就算視線本來不在中間的位置，也能引導用戶再次回到中心的聚集處。

在界面設計中，圓形的運用能使界面顯得格外生動，多數可操作的按鈕上或交互動畫中都能見到圓形的身影。

因為圓形具有靈動、活躍、有趣、可愛、多變的特質。在界面設計中善于將圓形的設計與動畫結合，能讓整個軟件鮮活起來。

如再加上旋轉圍繞的動畫，會讓整個軟件鮮活起來。界面中的圓形能集中用戶的視線，引導點擊操作，突出主要的功能點或數據，把產品核心展現出來。

圓心點放射形的設計，會使軟件感覺更為智能化，包容萬象。

如果要體現的功能點非常簡單，只有幾個功能按鈕的時候，可嘗試這種大圓的展示設計，突出最重要的功能，然后羅列并排出其他的功能點。這種方式非常實用，就和畫重點一樣，圈出最重要的數據。善于運用大圓構圖，能撐起整個畫面，讓界面圓潤而飽滿。

3.三角形構圖

這類的構圖方式主要運用在文字與圖標的版式中，能讓界面保持平衡穩定。從上至下式的三角形構圖，能把信息層級羅列得更為規整和明確。

在界面中三角形構圖大部分都是圖在上，字在下，閱讀更為舒服，有重點有描述。

Gogobot登陸頁在設計中將logo作為了圖形的部分，輸入框就是產品的核心描述。

個人信息頁比較常用三角形構圖。頭像明確了這個頁面的內容，而下面的粉絲、喜歡等數據就是對本人的一個描述和介紹。

當時在設計兒童衛士寶貝信息設置頁時運用到了三角構圖與圓形構圖的結合。將體重刻度做成可滑動操作的方式，而卡通形象來突出設置的對象及這個頁面的功能。

4.視線在界面中的構圖法則（SF字形構圖）

在設計實踐中，如何引導讀者視線，對增強用戶體驗有重要作用。好的構圖視線法則，能夠獲得非常舒服的閱讀體驗。而雜亂無章的構圖，往往讓用戶厭倦。

在進行界面設計的時候，對用戶的視覺移動方向的預設是非常重要的。在界面中加入更為順暢的構圖設計引導用戶視線移動的元素，就能使用戶更多的觀察到產品的核心和產品的賣點。

視線流動的軌跡多則是從上至下從左到右移動，如果不能圍繞這樣的視線軌跡進行排版，用戶在閱讀的時候會變得很吃力，找不到重點，使用戶產生反感。所以在界面設計中格外需要注意這個地方?，F在界面一般是上下滑動的，做好視線引導，可以大大減小用戶的負擔和閱讀疲勞。

界面中最基礎的是S形視線構圖

在界面中怎么運用S形視線構圖呢？

S形視線大家都懂，關鍵是如何運用好S形視線來抓住用戶眼球。

首先我們看一下視線的軌跡，在視線轉角處視覺軌跡最為密集，瀏覽更為集中在切換的地方，視線轉折的地方停留時間最長。所以我們應該把重要的想要突出的產品或功能放在這塊，這樣更容易讓用戶記住產品的賣點。

蘋果官網便采用了S形視線構圖，引導閱讀，大家可以從蘋果官網好好體會一下。每個模塊的圖形進行穿插，可以起到幫助折回視線的作用。產品圖更多的讓用戶去記憶，設計引導消費！

此外，為了幫助視線的移動方向,圖片的處理也非常的講究。

在iPod touch 的介紹中，第一張圖片展開的效果用到了三角形構圖，強化了引導視線軌跡的指示性。同時多張圖片借助手機排列方向引導到視線軌跡，很好地實現了圖片—文字—圖片之間切換，將用戶帶入到整個產品畫面中。

第一屏手機展開方向與視線保持一致

為了使用戶閱讀更有推進性，在圖片層次和空間上，我們也需要注重用戶的視線效果，將焦點調整到合理的視線位置上，產品正面方向對準視線的來源點。通過這些調整不僅能使閱讀順暢，更加強了界面的平衡性。

相比于左右構圖，S形構圖在上下滾動頁面上優勢非常明顯。左右構圖很容易給人疲勞感，而S形則將圖片和文字完美結合在一起，配以大量的留白，如同山間的溪流，給人輕快流暢的感覺。

下圖界面中，設計師很好的運用到S視線形構圖，增強了穿插感和靈動性。人物的信息上下穿插布局，頭像則成為視線的轉折點，使這種雙列模式的排版更為有節奏。而具體到每一部分，頭像與內容采用了三角形構圖，內容描述段落用到了文本居中式，畫面穩定、和諧。

在引導頁中也會常常運用到S形的構圖。圖文進行穿插布局，這樣的構圖層次感分明，動感十足！

由圖文版式布局，我們還可以演變出F字形構圖，這種類型的構圖大部分運用在圖文左右搭配圖和banner中，使用F形構圖能讓圖文搭配更有張力，更大氣，產品信息更為簡單和明確。

在F形構圖的規律中，主圖為F的主干，右側兩行（或兩部分）文字為輔，要注意合理分配圖片和文字的占比。

F形構圖在banner中使用，能將標題更為突出，主題更加吸引視線。

值得注意的是，要充分利用主圖的畫面的指向性。比如，主圖是人物，可將文字放置于其眼神、朝向、手勢等對應的方向，加強視線引導。如果是產品圖，則可以通過產品的朝向來引導。這樣做，用戶能最快速的關注到文本信息，加強認知度和購買度。

小結：這一課沒有什么實戰技巧，更多的是引導大家學會欣賞，學會用基本的設計原理來描述自己看到的作品，而不是簡單扔下一句“人家設計得真好”就完了，要明白其中道理，并努力為自己所用。構圖先說到這里，當然版式不僅僅指構圖，還有很多東西可講，有時間我再整理給大家。

做設計要培養職業敏感，習慣用設計語言解構看到的畫面。


文章來源：站酷   作者：micu設計

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

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

【譯者注】本文是移動原型工具Proto.io的設計團隊8月份在自家博客上發表的一篇“軟文”，通過與移動設計界大牛們的對話，幫助大家了解在進行 移動設計時應該特別注意的禁忌，順便推了一下Proto這個工具。大家可以回顧一下自己團隊的應用正在觸犯哪些禁忌，想必會有點意思。讀完本文，相信你能 找到優化自家移動應用設計的方向。

規則就是用來打破的？這完全取決于規則本身。在移動應用界面設計（后續簡稱：移動設計）的世界里，大家對美學、手勢和動效的看法略有不同。有時一個簡單的功能性應用比華麗的應用帶來的效果更好，而有時候卻恰恰相反。

不過，有些基本規則是人們不愿意去打破的。如果你的移動設計使得用戶無法順利觸達關鍵功能，這顯然是行不通的。假使你的文字字號過小導致沒人能順利完成閱讀，那么你得回爐重做。淺色背景搭配白色文字？重來吧。

我們試圖了解優秀的設計師們心目當中移動設計的7宗罪是什么。經過垂詢三組設計專家，我們得到了三個略有區別的結果，看看你是否能從其中找到一致的地方呢。

來自AKTA的意見

Alyssa Burke與Macy Nguyen是AKTA（一個數字體驗咨詢公司）的設計師，倆人都曾為財富500強的公司以及迅速增長的創業公司效力，參與過原生移動設計項目，為某些機構的頂級項目貢獻設計輸出。以下是他們認為無法接受的移動設計7宗罪：

1、忽略上下文情境

目標用戶的個人檔案（年齡、生活習慣、技術潛能等）與他們的物理環境（室內室外，在線離線，早晨晚上等）會影響許多設計決策。移動設計師應該在迭代流程中 充分考慮上下文因素，以降低可用性不足的風險。即使擁有平滑的過渡轉場、光滑的按鈕和美麗的字體，一些應用也會因為整體界面設計不符合特定用戶場景（深色 界面用于戶外場景：糟糕的移動設計）而失去成名機會。

2、閉門造車

設計和開發數字產品是一項需要團隊協作的工作。即使有項目成員（開發、新人、極客、狂熱者、朋友、陌生人、你的哥們兒和設計師潮人）對具體項目內容完全不 了解，將設計工作及早并及時推廣到整個項目周期中的不同角色之間也是非常關鍵的。我們需要讓他們了解到必要的上下文信息，并持續保持相關信息互通。與其在 發布后修復問題，不如在項目進程早期預留調整空間。

3、怠慢開發人員

程序員和工程師（以及偶爾酗酒的碼農）不僅是你的同伴，而且是技術先導。他們除了知道哪些能夠在現實中奏效之外，還能夠如你設想的那般確保你的想法得到完 美落地。有些移動設計在技術上行不通，有些或許可行，但這些都需要很多努力或時間在項目中驗證。如果不問你或許永遠無法確定能否做到。在項目交付時，開發 人員會把你的設計成果實現出來，此刻，他們可能很欣賞你，也可能很討厭你。

4、低估動效設計

隨著物聯網逐步成熟，數字界面在人們與周圍真實世界的互動中扮演了更重要的角色，界面設計的這一部分需要被設計師更加慎重的對待。人類擁有與生而來的本 能，從所處環境的變化中得到不同的感知與反應。使用合理的界面動效是一種呈現優先級和重要內容的有效方式。在某些情形下的恰當運用，甚至能夠引發用戶的愉 悅。有興趣的讀者可以了解下迪斯尼動畫的12項基本法則。

5、字號太小

比起紙質內容，人們在手機屏幕上進行閱讀的精確度和深入度略有不足。正如移動設計拇指觸控規則所定義，數字界面的字號最少應該兩倍于印刷字號。不同情形適 用不同的字體和設置，尤其當用戶試圖在移動設備上完成多類任務時。為了避免字號太小，還需要優先考慮按鈕形狀、圖片及交互等界面元素對整體體驗有何影響。

6、忽略觸控目標

許多移動設計師仍然對用戶手指大小不同的現狀缺乏重視。一旦涉及行動或者任務導向的觸控目標，盡可能的使它簡單而且容易點擊。為老人設計時要考慮觸控時的 抖動因素，同樣為兒童設計時需要考慮點擊的不準確性。建議為圖形資源周圍增加留白區域，以便本質上提升觸控面積，幫助提升完成任務的速度。

7、死摳平臺規范

在Android和iOS平臺上統一一套設計方案有一定局限性，也容易對全局體驗目標帶來副作用。兩個平臺上有各自用戶熟悉的設計模式，設計師不應該只熟悉規范，而應該探索在兩個平臺上流行的應用。

來自Moblico Solutions的意見

我們同Moblico Solutions（一家提供移動關系管理方案的企業，其目標是協助品牌“打造更多有意義的移動瞬間”）的一些員工進行了交流，他們不僅為諸多行業客戶提 供了“如何讓他們的移動應用體驗更棒”的建議，而且掌握移動設計方面的竅門。以下是他們認為移動設計的7大禁忌：

1、在用戶設備上占用過多容量只為了體現存在感

當用戶收到“磁盤空間不夠”的提示時，會馬上遍歷手機上已經安裝的應用并開始選擇刪除的對象。如果一個移動應用體積很大，占用了過多的容量卻并未提供等同的價值會怎么樣？后會有期，用戶肯定拿你開刀。記得保持應用在體積上足夠輕量，這樣至少用戶不會輕易把你刪掉。

2、在應用啟動時及要求允許權限控制（推送、地理位置、攝像頭等）

回想下，有多少次我們興沖沖的下載一個應用并準備開始使用時，一個對話框立馬跳出來掃了興？我不關心這個對話框描述什么內容，只想馬上關掉它并繼續使用應用功能。它是啥？好吧，菜鳥應用！

3、下載后在使用前就要求登錄、注冊甚至收費

實際上，這條或許應該排為第一禁忌，很難讓人忍受。你能對用戶所做最糟糕的事情就是：在他們下載你的應用后告訴他們必須付費才能使用。爛，爛，爛，重要的事情說三遍，趕緊刪之。

4、設計的移動應用界面看起來像網頁

如果這樣，還需要移動應用干嘛呢？要說有一件事情可以毀掉一個移動開發者，那就是把網頁的體驗縮小到移動端并且稱之為移動應用。移動應用應該有其具體優勢，只提供縮水的網頁體驗遠不能滿足用戶期望。

5、粗暴投放廣告，或者只提供極難點擊的廣告關閉按鈕

當你在滾動瀏覽移動站點時，只是手指不小心長按了某張圖片就觸發了瀏覽器廣告，這難道不是讓人煩躁的事情？偏偏還提供極小的關閉按鈕，誰能點得到？想要點擊簡直跟賭博一樣。嘗試點擊關閉的時候還總是因為手指觸控面積較大誤觸了廣告，真是要了命！

6、消息推送過載

沒錯，現在你的應用出現在數百萬人的手機屏幕上，它有巨大的影響力。不過，在推送之前請三思，捫心自問：推送是否與用戶相關？用戶是否真的需要它？當然，你可以在你的移動店鋪每次上新時都推送一下，但真的至于么？影響力越大，責任也越大，慎重使用消息推送吧。

7、移動賬號缺乏單點登錄支持

當移動開發者認同并尊重用戶不愿意重復勞動的想法時，最好的體驗才可能產生。沒人愿意為你的應用重新登錄一次。我們得接受單點登錄的現行趨勢，Facebook在這點上非常成功，繼續加油吧。

來自Ideaware的意見

Andres Max是數字創新機構Ideaware（致力于幫助創業團隊和財富500強的公司打造有競爭力的移動應用）的創始人。在創建Ideaware之前，Max 是Mashable設計團隊的    負責人。經歷過為眾多行業巨頭設計移動產品之后，Max對移動設計7宗罪有自己深刻的見解：

1、用戶點擊后無反饋

看在上帝的份上，當用戶在你的應用中進行點擊后請給予及時的反饋吧，否則用戶會以為你的應用掛了，并且馬上退出。

2、無休止的引導

如果使用自己的手機，我只想快速完成相關任務。別問我各種問題或者讓我填寫亂七八糟的內容。

3、觸控熱區尺寸不對

請停止把按鈕和輸入框做的太小，這不是網頁。我的手指需要輕松觸及行動按鈕，而不是要進行精確到像素級的點擊。

4、使用古怪的導航模式

想讓用戶可以快速熟悉你的應用？那就不要以自己獨特的方式來組織導航。Apple的人機交互規范和Google的設計指南就是最好的參照標準。導航設計方面別引入爭議，從而給潛在用戶一個卸載應用的理由。

5、選取糟糕的配色色系

給眼睛一些休息的空間，你不必采用黃黑色文本那樣的出挑配色。

6、留白

移動應用需要很多留白空間，把各種視覺元素進行區分，按鈕得加大處理，所有一切都依靠留白來提供視覺緩沖。移動端首屏的概念沒有網頁那么夸張，所以切忌把所有東西都塞到首屏當中。

7、無休止的推送

為了上帝，請不要每天推送20條消息給用戶了。用戶在收到幾條推送后，就會深深的感覺到想要卸載應用的那股沖動。

你心目中的移動設計7宗罪是什么呢？

盡管不同設計師心目中的7宗罪不盡相同，我們依然可以看到不少相似點和共識。最重要的兩條是：1、除非確有必要，避免推送消息；2、通過使用符合習慣與直覺的導航，以及提供其當尺寸的視覺元素，讓你的移動設計具備可用性。

我們還能想到的一條是：忽略數字原型。在原型設計階段能夠發現很多移動設計問題，以及讓它們更具可用性更加出色的寶貴反饋。這也是Proto.io為什么堅持提供強大又易用的原型解決方案的原因。

譯者：1688事業部/無線交互/舒舟
文章來源：站酷   作者：阿里巴巴CBU設計

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

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務