轉載請注明：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
UI設計中，除了界面整體的布局，還有一些圖標、插畫的設計，大部分都是素材的填充，而這么重要的部分往往被設計師所忽略。
對于素材的隨意挑選，殊不知選圖的技巧和方法有很多，眾多素材中如何找到我們心儀的配圖呢？這就是今天要和大家分享的主題，用科學合理的方法找到最合適的素材。
一、選擇配圖的常見錯誤
在為產品尋找配圖素材時，是一個長久過程。所以素材的運用即能幫你提升界面的效果，也能拉低界面的效果，很多設計師不在意選材的重要性，往往因為配圖后界面效果還不如原型圖看起來規范好看。下面我總結出三個方法可以提升配圖的效果。
1、素材與用戶預期：
不真正調研產品的用戶群里和心里。搭配的素材必然達不到用戶預期。每款產品的使用人群是不同的，我們的素材配圖要符合產品使用人群的預期。
如下圖：是一款有關于售車的界面效果，此項目的用戶的目標已經確定，主為高端用戶，我們來看看左右配圖的區別。
左圖中我們在找配圖時如果不能保證對高端車的認知，必然會有低端車的產品圖的出現，由于不符合產品的使用人群，給用戶造成心理落差；而右圖則是我們了解高端車后的選圖，內容是符合用戶心理預期的，同時通過配圖再次提升產品的逼格。
PS：我上面說到圖片內容的心理預期與用戶不符，其實在關于選圖上，也是存在這個問題的，例如左側是通過百度找到的素材，不夠精致，無法提高界面的整體效果，而右側則是在站酷海洛找到的素材：
只要進行裁剪，縮放比例即可使用，界面整體檔次也提升很多。
2、素材與主視覺：
說到主視覺，就先要說說有關顏色的歸類，顏色主要分為暖色系，冷色系和中性色系三種，在界面中不同的顏色可以帶來不一樣的感受，如果不理解主視覺所要表達的感受，便找不到合適的配圖，無法提升界面效果。所以我們在選擇配圖時一定要追尋界面的主色系所以傳達的情感。
如下圖：左側是以冷色為主的直播界面，右側是以暖色為主的產品詳情頁。
左圖由于忽略了主視覺的關系，配圖為顏色過多，頁面整體表達出來的情感不夠直觀，無法產生共鳴。
右圖中我們通過控件可知主色為暖色系，選擇同色系的素材進行搭配，通過素材和主視覺的完美搭配才能明確傳達產品想要給用戶的感受。
3、素材與素材：
這是最容易出現的錯誤，我們通常只關注于素材的整體感覺，反而忽略同類素材之間的差異，不是所有的同類素材都可以放到一起來用的，我們還要注意素材與素材內容的差異化。
如下圖：左圖為一款外賣食品列表的效果圖，右圖為商品列表的效果圖，大家可以分別感受一下左右兩側的哪個更舒服些。
左圖中列表的素材與素材的內容是不同的，雖然都是食物圖，但有的是實物，有的是適量圖，給人的感覺是不同的，這也是大家總是覺得哪里不對，卻又說不出來的問題。
再看右圖中的列表，配圖元素統一，同為國外真人模特，符合素材與素材之間風格的統一。
PS：我們平時在做概念稿時，找同類型的產品圖消耗的時間也是很大的，不是圖片少，而是同質量的素材太少了。
所以一定要在專業的素材平臺找查找，因為專業的素材平臺會根據設計師的需要提供方便快捷的素材集合。
例如上圖，我在站酷海洛中的搜索水果，便的到各個角度和不同風格的同質量圖片，可以有更多的選擇去搭配。
二、運用配圖的常見錯誤
上面我們說的是如何選擇素材，而下面一部分主要是讓大家了解到沒有量身定做的素材，不是什么素材都可以拿來直接用的，理想是豐滿的，現實是骨感的。
辛辛苦苦找到的素材，就差一步便可以提升作品的效果，卻因為嫌修改麻煩而失之交臂，我們來看看下面三種方法是如何將素材進行優化的。
1、統一素材比例：
在設計界面時，素材被拉伸變形，填充不滿等低級問題出現的已經越來越少了，所以這里要說的不是基礎的尺寸問題，而且是素材內容的占比比例。要保證素材中的內容與背景的占比是一致的，才能提升界面規范性。
如下圖：兩張運動類產品的界面列表，我們來分別單獨預覽兩個界面，有沒有發現同樣的界面同樣的產品，但預覽產品的順序是不同的，這是什么原因導致的呢？我們往下看。
左圖中的產品展示內容與背景的占比不統一，可能是按現實中的比例進行擺放的，有大有小，界面顯亂，干擾用戶的閱讀順序。
右圖通過更改圖片比例后，統一了圖片內容與背景的比例，不會干擾用戶閱讀界面的順序。
2、統一素材角度：
素材因為角度不一，給人的感受也是不同的，在一個界面中的素材如果角度各式各樣，會影響到用戶的點擊欲望。所以在挑選素材時應該注意參考圖的角度，統一的拍攝角度可以讓界面變得更有秩序。
如下圖：左右兩張界面的產品展示部分。
左側界面中產品配圖角度各異，有正視拍攝，有俯視拍攝的界面毫無秩序感。而右側則對配圖進行了規范，都為正視圖，讓界面看起來更統一規矩。
3、統一顏色：
很多素材的構圖和內容都很棒，但放到界面中卻顯得格格不入，主要原因在于顏色之間的差異。選用素材后，如果對差異較大的顏色不做改變，便會造成顏色混亂，弱化了主視覺的顏色，用戶對其產品的認識便會漸弱。
如下圖：播放器界面中唱片封面的顏色差異。
左圖我們為播放器尋找到了合適的素材封面，但素材的顏色是橙色的，素材與整體的顏色調性是不融洽的，破壞了界面的統一性，并不適合。
所以我們可以將封面改變其顏色變為符合我們界面中按鈕以及播放時長的進度條的藍色即可。
三、線上運營用圖
前面說到的都是關于概念稿選擇素材用到的一些技巧，可能大家看了會覺得這是概念稿，在實際的線上是沒辦法控制的，這個觀點我并不同，實際線上的配圖就真的沒辦法提升了嗎？還是我們選擇性忽略了呢？也許我們最初的選擇就是美麗的謊言。
1.確保真實用圖：
在設計初期我們就應該使用真實的運營圖片進行設計，防止上線后才發現圖片與設計風格不符的情況，為時已晚。
如下圖：兩組圖為圖書展示模塊區域。
左圖為設計時擺放的封面，都是精心挑選的優質素材，美化了模塊的效果。
而右側為線上效果，無法保證封面設計的統一性，所以切勿使用與實際上線不符的圖片，會影響產品最終效果的判斷。
2.不可重復用圖：
很多設計師在做設計稿時，通篇只用一張素材圖，交給開發，其實這樣做出的設計，和原型無太大差異。
但是我們的設計稿是為了給運營提供參考的基礎模版，為了能和線上效果保持一致，所以設計稿中的素材不可在一個界面中出現兩次。
如下圖：視頻App中的頻道頁，左側為復用素材設計，右側為選擇不同素材設計。
左側的復用設計其實和原型區別不大，無法根據界面中的素材選擇運營圖，可利用性不大。而右側更貼近線上效果，可以給運營提供找素材圖的方向，避免返工。
3.圖片的清晰度：
模糊的圖片會使用戶的視覺體驗變得糟糕，現在的用戶對于圖片的瀏覽量每天都是不計其數的，如果想要在配圖上得到用戶的親睞，就必須要清晰且看著舒服的圖片。
如下圖：兩張同樣的界面展示，分別用了模糊的素材和清晰的素材。
左圖中圖片清晰度不夠，影響用戶的瀏覽，同時也會給用戶造成未加載完成的錯覺。
右圖中的素材則清晰可見，增加界面的美觀度。所以我們在用圖時，不可以用小尺寸的圖片強行拉伸，會導致圖片模糊不清，請選擇高清大尺寸的配圖。
4.圖片比例：
同一張圖片可能需要在多個界面中進行展示，而展示的尺寸也有可能存在差別，所以我們需要統一制定界面中運營圖的尺寸規則，也可以做好安全區，避免界面因比例不對造成的圖片拉伸或者顯示不全等情況。
如下圖：下面的圖片是原圖素材，接下來要將原圖分別放入不同的區域內，他們的尺寸也不同。
在左側界面中，如果任由系統自動適配比例就會出現前兩種的錯誤，留白或變形，所以我們應該把較大的圖片制作規范，畫出安全區。
如右圖banner通過上面等比例縮放到剛好填充滿即可，下面的素材也是等比縮放大填滿整個擺放區域后在進行裁剪。
5.元素太多不使用：
很多運營的用圖元素過多，一心想把能放的都放進去，最后圖片內容中沒有重點，用戶看的也是一頭霧水，元素少，突出重點的圖來使用。
如下圖：同為視頻App中熱播模塊，同樣的美劇和字段，只是素材有所不同。
左側素材中元素過多，影響用戶對圖片閱讀，無重點，沒有點擊欲望。
而右側的配圖簡單清晰一目了然，不會給用戶帶來閱讀負擔，更是挑選影片中簡單清晰的畫面作為封面使用，增加用戶點擊欲望。所以我們要選擇元素少的運營圖作為配圖。
6.格式太大：
圖片格式過大是一件很嚴重的問題，用戶預覽時加載速度過慢影響用戶體驗的流暢性，圖片過大也會增加用戶流量的使用費用。所以我們在導出運營用圖時，一定要記得壓縮圖片，對于壓縮到什么程度，要看圖片本身的大小，只要保證壓縮完依然清晰就可以。
如下圖：兩張同樣的素材圖，他們的清晰度是一樣的，可大小卻有區別。
左側為原圖大小，右側為壓縮后的圖片大小，我們可以看到壓縮后的圖片明顯占用的內存更小了。
7.不要使用白色背景：
目前線上產品中白色背景的產品占比還是很高，所以我們在選用素材時，要避開白色背景的素材，當界面背景也為白色時，會造成無邊緣感。
如下圖：兩個模塊中選擇用了不同背景底色的素材圖。
左側素材中用了大量的白色背景的素材，無法判斷圖片與圖片之間的距離，同時也會造成圖片大小不一的錯覺。
右圖中使用有背景色的素材，可以清晰的區分每一個模塊的間距，整齊規范。
總結
我們在做概念稿時都知道需要精心選擇配圖，為什么在做線上稿時，圖片的質量就變得那么差，是一件需要思考的事情，難道沒有好的素材，我們就放棄了產品的美觀度嗎？
我們不應該把美化調整運營圖變成日常的流程中嗎？這樣才能保證產品的最終質量。好看的素材不是找出來的，而是通過我們優化出來的。
作者：海邊來的設計師
轉載請注明：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
在數據可視化的分析過程中，用戶是所有行為的主體，通過獲取的可視信息形成認知，在交互分析過程中獲取解決問題的方法。
在這個過程中，感知和認知能力直接影響著信息的獲取和處理進程，進而影響用戶對外在世界環境做出的反應，這也是設計數據可視化產品服務藍圖的基礎邏輯。
從數據到知識有兩個途徑:交互的可視化方法和自動的數據挖掘方法。
我們可以看到，下圖展示的便是一個典型的可視分析流程圖和每個步驟中的過渡形式。這個流水線的起點是輸入的數據，終點是提煉的知識。
可視化的首要任務是準確地展示和傳達數據所包含的信息。根據預期和需求，提供有效輔助手段以方便用戶理解數據，從而完成有效的可視化。
但是當出現數據尺寸大、結構復雜的情況時，有限的空間大大限制了靜態可視化的效果，有限的可視化空間和數據過載之間的處理是非常復雜的。有時我們會通過物理環境的變化來改變服務模型，但是更多時候我們需要通過交互設計來完成對復雜信息的處理，提升用戶對數據解讀的便捷性。
那么當我們在設計一張數據大屏時，我們該如何通過交互提升用戶獲取有效數據的效能呢，下面我們一起來探討如何完善大屏設計中的交互設計：
一、信息架構
1、清晰易理解、可拓展的信息架構
2、清晰易理解的導航關系
3、清晰易理解的層級關系
案例分析：
在我們收到原型圖時，首先我們需要梳理清楚大屏的信息架構，比如整個大屏的模塊比例是按照1:1:1還是1:3:1的結構。又或者是如何設計重要功能的入口，比如整屏的導航tab選項，在布局設計上用戶是否可以明晰它是是否是全屏篩選，在交互邏輯上用戶是否可以通過最短的路徑快速篩選抵達內容。那么當用戶進行了導航的切換后又返回到上一頁面，整個行為是可以形成路徑閉環的。
二、流程設計
1、可下鉆的模塊需給用戶以引導
2、相同功能的用戶體驗路徑需保持一致
3、逆向流程的功能設計能形成閉環
案例分析：
我們經常會在大屏中間設計地圖的樣式來展示某個省的數據情況，比如，如圖所示，當業務側需要從湖北省跳轉至武漢市，查看武漢市的詳細數據，那么我們可以在省級地圖輪播的數據氣泡上給予用戶以提示，用戶可以清楚獲取到跳轉市級大屏的路徑方法。
三、界面展示
1、一致可控的圖表組件
可視化大屏中最核心的數據展示形式就是圖表模塊，我們需要正確地展示圖表組件外觀與組件關系，把控好相似功能的橫向一致性，我們可以細分為以下幾點。
（1）選擇正確清晰的圖表組件
（2）正確表達組件元素之間的關系
（3）一致性的組件樣式和交互行為
（4）不要忽視組件的不可用狀態（按鈕）
（5）刪減影響用戶視線和注意力的冗余元素
案例分析：
當一個模塊內需要展示數據的多個維度，我們如何將該模塊設計得更加清晰呢。如下圖，根據人從左往右的閱讀習慣，在左邊展示數據1和數據2的總指標數，在右邊展示數據1和數據2的詳細走勢，右上角我們還可以添加tab選項，用戶可以進行tab切換查看更多維度的數據內容。
所以，我們可以將用戶使用習慣和交互行為很好地結合起來，不僅免去了圖表多亂雜的場景，用戶也可以更快地查看到想要獲取的數據信息。
2、清晰的數據展示
配合圖表展示的就是我們的“數據數字”內容了，在我們將設計稿傳遞給前端同事后，填充真實數據后的視覺效果可能看起來沒有效果圖規整，一方面在進行繪制效果圖之前，可以與產品業務側共同探討數據內容，盡量給視覺設計師提供真實的數據，另一方面，在我們作圖搬磚的時候，也要注意一下幾點：
（1）不要遺漏了“無數據”的缺省空界面，當無法獲取到數據時，我們需要給前端提供這樣的缺省圖；
（2）清晰的數據排序規則，比如環形圖中，總起始點到終點，數據對應的數值量應該是遞減的排序規則；
（3）考慮數據的極值情況，比如在搜索列表中學校名稱文字的極限字數是多少，超出多少字用省略號顯示，這些我們都需要考慮到；
（4）是否需要標明數據的更新時間節點，有的大屏強調數據實時性，我們經常會在右上角增加數據截止更新時間來來引導用戶；
（5）特定的數值按照特定的格式和單位顯示，比如羊字符能讓用戶第一時間識別到是人民幣，而如果金額數字過長后面再加元會降低識別效率。
案例分析：
3、選擇與輸入的信息反饋
（1）展示合適的首選項或默認值
（2）輸入前有效的文本提示
（3）輸入完成后需及時反饋
案例分析：
4、用動效進行有效的交互引導
利用動效進行交互引導，即使大屏操作鏈路過長，也可以讓用戶快速上手操作，減少流程學習時間。進入下一場景后，又會有對應的區域提示用戶返回全局或查看其他場景；當做到層層有響應，就能減少用戶在每一步操作上的困惑時間，幫助用戶快速上手操作流程，并且大大提升工作效率。
但是我們需要注意的是，不要為了酷炫而做太多無用的動效，不僅會讓頁面加載速度慢，也會讓用戶覺得雜亂無重點。
總結：
交互可提高可視化系統的效率，幫助用戶處理更多的數據，完成更復雜的任務。然而，實現交互本身也有額外成本?；拥南到y可以使用戶能探索更大的信息空間，但隨之而來的成本是用戶需要花費更多的時間與精力去瀏覽和探索數據。
因此，可視化系統應當采用數據挖掘算法自動發現用戶可能會關心的數據或者模式；并通過可視化呈現給用戶，用戶在這個基礎上通過互動進行更深入的挖掘。設計師的設計決定了系統的可理解性，一旦掌握了這個邏輯，再復雜的頁面也會變得有條不紊。
我們仍需在數據可視化的道路上不斷探索挖掘數據價值，給決策者提供有效的數據分析支撐，讓設計驅動數據價值最大化。
一、什么是格式塔原理？
格式塔心理學誕生于1912年，是由德國心理學家組成的研究小組試圖解釋人類視覺的工作原理。他們觀察了許多重要的視覺現象并對它們編訂了目錄。其中最基礎的發現是人類視覺是整體的：我們的視覺系統自動對視覺輸入構建結構，并在神經系統層面上感知形狀、圖形和物體，而不是只看到互不相連的邊、線和區域?！靶螤睢焙汀皥D形”在德語中是Gestalt，因此這些理論也稱做視覺感知的格式塔原理。
格式塔學派主張人腦的運作原理屬于整體論，“整體不同于其部件的總和”。例如，我們對一朵花的感知，并非純粹單單從對花的形狀、顏色、大小等感官資訊而來，還包括我們對花過去的經驗和印象，加起來才是我們對一朵花的感知。
格式塔心理學家認為這些原則之所以存在，是因為頭腦具有天生的傾向，可以根據某些規則感知刺激中的模式。（是不是覺得hin神奇）
比如，這是著名的“人臉花瓶幻覺”圖。如果以黑色為背景，白色為圖形，則是一個花瓶；如果以黑色為圖形，白色為背景，則是兩個人的側臉。它也反映了圖形和背景對一幅圖的影響。
二、格式塔原理分析
使用不同數量的空格來合并或分離元素是傳達有意義的分組的關鍵。例如，在Ant Design的標題區域中，“ 搜索”功能與站點的主要導航位于同一行。但是，主導航和搜索之間的多余空格表示它們屬于不同的組，因此具有獨特的功能。對于使“ 搜索”功能在主菜單的其余部分中脫穎而出，此空格至關重要。
但是，在較小的屏幕上，無法保持此間距。為了避免將這些區域視為一個整體，頁面收縮寬度的時候，搜索后的文字隱藏了。
應具有固定或鎖頭標題的網站特別可以從使用獨特的背景顏色或清晰的邊框中受益，從而有效地將標題與下面滾動的頁面內容區分開。此外，大頁腳的單一統一背景色 可有效地表示該區域中的所有鏈接都屬于一個組。
創建清晰的邊界是一種強大的視覺提示，可以壓倒其他分組原則，例如接近性或相似性。因此，當需要包含幾種不同類型的UI元素或無法調整對象之間的空白量時，它是一種強大的工具。我們做頁面時如果需要把兩個元素放成一組與其他元素區分，那么我們可以用線框畫出邊界來達到目的。
如果其它因素相同，那么相似的物體看起來歸屬于一組。接下來從形狀、顏色、尺寸上來說明相似性原理，這也就是我們平時做視覺設計時的原理，比如我們設計稿宣講時可能會被開發、產品以及測試同學問到“為什么用這個形狀？為什么這里用這個顏色？為什么這兩個尺寸不一致？等等，細細體會這個相似性原理就會給我們答案，讓我們在畫設計稿時能夠有理有據。
在上圖中，我們頭腦中自然而然的會分成“四列”，也就是圓形一列，三角形一列，然后再圓形一列，三角形一列，而不會看成“三行”
應用共享的顏色來表示某些項目是相關的，因此可能具有相似的功能，這很有效。通用顏色往往比其他特征（例如形狀）更加突出，因此可以用于組合不同類型的元素并傳達它們確實相關。
在用戶界面設計中，顏色通常用于指示常用功能。例如，使用單個鏈接顏色作為與用戶交流可點擊內容，鏈接顏色應僅保留給交互式文本和其他可單擊元素，因為用戶會意識到所有具有此特征的項目都是相關的，并且以相同的方式工作。因此，鏈接顏色不應用于關鍵字，不可點擊的標題或實際上不可點擊的附近圖標。
如上圖，就是一個用色的反面例子，“ 消息中心”中的所有按鈕均為綠色，因此用戶必須花時間確定哪個是提交表單的主要按鈕。（此外，“ 提交”按鈕離消息區域很遠，并且根據Fitts的定律，這種缺乏接近性也會降低用戶的速 度。）
相同顏色的按鈕將被視為具有相同的重要性級別。因此，應為主要操作性按鈕保留單獨的顏色，以幫助它們在輔助按鈕中脫穎而出。
在用戶界面中，我們經常使用大小來強調內容或按鈕中最重要的部分。相同的大小表示相同的視覺突出度，并且在所有其他條件相同的情況下，將共享該屬性的所有元素連接在一起。一致地使用大小會創建視覺層次結構，并使頁面易于掃描，因為人們可以立即看到并理解這些類型分組。
例如，在產品列表頁面中，每個單獨的產品列表都以相同的大?。ê拖嗤男螤睿╋@示。這種一致的視覺樣式告訴我們該區域中的所有物品都是產品。共享大小將其與其他不同的UI元素分開。當某項商品在此列表中以不同的大小或形狀出現時，就會突出顯示為不屬于產品分組。下面這個產品集合的促銷以單個產品列表大小的兩倍顯示。
下面是我最開始嘗試的招聘系統首頁的改版：
根據上面的相似性原理和接近性原理就可以很容易看出來，這個頁面結構和邏輯不清晰：
1.待處理和招聘日程兩個模塊之間的區分不夠清晰：因為這兩個模塊右側應用了同樣的形狀和顏色的按鈕（相似性原理），讓用戶在心理上產生聯想，同時這兩個模塊之間只靠間距來區分，區分的太弱了（接近性原理）
2.招聘日程頭部日期與下面的面試安排卡片聯系太弱：因為面試卡片用了非常強的邊界區分的線條（接近性原理-構建清晰的結構）確實在面試模塊之間構建了清晰的結構，與此同時卡片與頭部的日期之間看起來沒有什么關聯。
3.首頁的選中效果太弱，分析這個頁面的層級，左側首頁選中才應該是最重的，能讓用戶第一眼就知道在系統中的位置，很顯然目前來看很容易忽視首頁這個位置，關注點被吸引到了快捷入口。這并不是我們想要傳達給用戶的。
根據格式塔原理中的相似性原理和接近性原理，對頁面的結構進行了調整，就看起來清晰多了。
所以，我們在制作完設計稿后，可以應用格式塔原理，分析下最終呈現給用戶的結構和邏輯是否清晰。而這也是做視覺的理由和底氣。
視覺傾向于感知連續的形式而不是離散的碎片。
連續理解起來是很簡單的，但連續卻解決了非常復雜的問題。通過找到非常微小的共性將兩個不同的環連接成一個整體。在引導頁中經常會用到這個。
視覺系統自動嘗試將敞開的圖形關閉起來，從而將其感知為完整的物體而不是分散的碎片。
閉合可以實現統一整體，這不難理解。但是有一個非常有趣的現象值得我們去觀察和思考，就是不閉合時候也會實現統一的整體，更確切的說，這種現象是一種不完全的關閉。這些圖形與設計給人以簡單，輕松、自由的感覺。所以，完全的閉合是沒有必要的。最著名的應用便是蘋果公司的logo，咬掉的缺口喚起人們的好奇、疑問，給人巨大想象空間。
我們傾向于分解復雜的場景來降低復雜度。
我們的大腦將視覺區域分為主體和背景。主體包括一個場景中占據我們主要注意力的所有元素，其余則是背景。這個原理經常會在海報設計中應用，這也是為什么我們做海報，做平面時，一定要制作好背景，背景的氛圍很重要。
情感化設計在我們的決策過程中起著至關重要的作用，因為加入情感化的設計可以改變與產品交互的人的整體現實。
人類是一種情緒驅動的物種，我們選擇某些產品并不是因為它們有意義，而是因為我們認為它們會讓我們感受到不一樣的感覺。也正因如此，在未來的界面將在產品設計的基礎上使用情感的概念，人們使用的經驗將基于智商（IQ）和情商（EQ）。
本文試圖展望未來，看看我們將在未來十年內設計哪些接口。我們將仔細研究三種情感化界面設計的互動：
語音
增強現實（AR）
虛擬現實（VR）
未來情感化界面的實際例子
界面如何？即使我們還沒有回答這個問題，我們也可以討論接口可能具有哪些特性。在我看來，我確信我們最終將擺脫充滿菜單，面板，按鈕的接口，并轉向更“自然的界面”，也就是情感化的界面。未來的界面不會被鎖定在物理屏幕上，而是會集合五種感官的力量。因此，他們需要較少的學習曲線，理想情況下，根本沒有學習曲線。
情商情緒在商業中的重要性
除了使體驗更自然并減少學習曲線之外，為情感設計還為產品創造者帶來了另一個好處：它提高了用戶對產品的采用率?？梢岳萌祟悓η榫w的行動能力來創造更好的用戶參與度。
真實的語音界面
使用語音作為主要界面的產品正變得越來越流行。我們中的許多人使用Amazon Echo和Apple Siri進行日?；顒樱缭O置鬧鐘或預約。但是，目前市場上可用的大多數語音交互系統仍然具有自然的局限性：它們不會考慮用戶的情緒。因此，當用戶與Google Now等產品進行互動時，他們對與機器進行通信具有強烈的溝通感 - 而不是真正的人。系統可預測地響應，并且他們的響應是腳本化的，與這樣的系統進行有意義的對話是不可能的。
但是目前市場上有一些完全不同的系統，其中一個是Xiaoice，一個社交聊天機器人應用程序。這個應用程序的核心是情感計算框架，該應用程序的基礎是，首先與用戶建立情感聯系。Xiaoice可以動態識別情緒，并在與相關響應的長時間對話中吸引用戶。結果，當用戶與Xiaoice交互時，就像是與真人交談一樣。
Xiaoice的局限在于它是一個基于文本的聊天應用程序。很明顯，你可以通過基于語音的交互來實現更強大的效果（人聲具有不同的特征，例如可以傳達強大的情感譜的音調）。
我們中的許多人已經在電影“她”（2013）中看到了基于語音的互動的力量。Theodore愛上了Samantha（一個復雜的操作系統）。這也使我們相信，未來基于語音的系統的主要目的之一將是用戶的虛擬伴侶。這部電影最有趣的事情是西奧多沒有薩曼莎的視覺形象，他只有她的聲音。要建立這種親密關系，必須產生反映一致性格的回應。這將使系統既可預測又值得信賴。
技術離Samantha這樣的系統還有很長的路要走，但我相信語音優先的多模式接口將是語音接口發展的下一章。這樣的接口將使用語音作為主要交互方式，并在創建和建立連接感的上下文中提供附加信息。
為Brain.ai設計的語音界面示例（圖片來源：Gleb Kuznetsov）
AR體驗的演變
增強現實（AR）被定義為現實世界之上的數字覆蓋，并將我們周圍的對象轉換為交互式數字體驗。我們的環境變得更加“智能”，用戶對手指尖上的“有形”物體產生幻覺，從而在用戶和產品（或內容）之間建立了更深層次的聯系。
使用AR重新構想現有概念
AR的獨特之處在于它為我們提供了與數字內容進行物理交互的非凡能力。它允許我們看到以前無法看到的東西，這有助于我們更多地了解我們周圍的環境。此AR屬性可幫助設計人員使用熟悉的概念創建新的關卡體驗。
例如，通過使用移動AR，可以創建新級別的飛行體驗，允許乘客查看有關其班級或當前航班進度的詳細信息：
AR在空中客車A380的飛行體驗中。（圖片來源：Gleb Kuznetsov）
AR幫助我們找到通過空間的方式，并一目了然地獲得所需的信息。例如，AR可用于為您當前的位置創建豐富的上下文提示。被稱為技術SLAM（小號 imultaneous 大號 ocalization 甲 ND 中號 apping）非常適合此。SLAM允許實時映射環境，并且還可以將多媒體內容放入環境中。
為用戶提供價值的機會很多。例如，用戶可以將他們的設備指向建筑物，并在其屏幕上了解更多信息。它可以顯著減少工作量，并通過允許導航和訪問實現輕松的情感體驗。
在上下文中提供其他信息（圖片來源：Gleb Kuznetsov）
我們周圍的環境（例如墻壁或地板）可以成為交互場景，過去僅限于我們的智能手機和計算機。
你在下面看到的概念正是如此; 它使用物理對象（白墻）作為通常使用數字設備傳送的內容的畫布：
交互式墻的概念 - 在現實世界之上的數字覆蓋。（圖片來源：Gleb Kuznetsov）
避免信息過載
我們中的許多人都看到了名為“超現實”的視頻。在這段視頻中，物理和數字世界已合并，用戶被大量信息所淹沒。
技術允許我們同時顯示幾個不同的對象。當它被誤用時，很容易造成過載。
信息過載是一個嚴重的問題，對用戶體驗產生負面影響，避免它將成為AR設計的目標之一。精心設計的應用程序將使用AI的強大功能過濾掉與用戶無關的元素。
高級個性化
當系統實時地根據用戶的需求和期望來管理內容或功能時，就會發生數字體驗的個性化。許多現代移動應用程序和網站使用個性化概念來提供相關內容。例如，當您訪問Netflix時，您看到的電影列表會根據您的興趣進行個性化。
AR眼鏡允許創建新的個性化水平，即“高級”個性化水平。由于系統“看到”用戶看到的內容，因此可以利用此信息提出相關建議或在上下文中提供其他信息。想象一下，你很快就會戴上AR眼鏡，轉移到你視網膜的信息將根據你的需要量身定制。
從增強現實走向虛擬現實，創造沉浸式體驗
AR體驗具有自然的局限性。作為用戶，我們在內容和內容之間有明確的界限; 這條線將一個世界（AR）與另一個世界（現實世界）分開。這條線引起了AR世界顯然不真實的感覺。
您當然可能知道如何解決這個限制，即使用虛擬現實（VR）。VR并不是一種新的媒介，但只是在過去的幾年里，技術已經達到了允許設計師創造身臨其境體驗的程度。
沉浸式VR體驗消除了現實世界與數字之間的障礙。當你戴上VR耳機時，你的大腦很難處理你收到的信息是否真實。關于VR體驗如何在最近的將來看起來的想法在電影“Ready Player One”中有很好的解釋：
以下是設計人員在創建沉浸式虛擬環境時需要記住的內容：
1.寫一個故事
有意義的VR有一個強大的故事的核心。這就是為什么在你開始設計VR環境之前，你需要為用戶旅程寫一個敘述。一個稱為“故事板”的強大工具可以幫助您。使用故事板，可以創建故事并檢查所有可能的結果。當您檢查故事時，您將看到何時以及如何使用視覺和音頻提示來創建身臨其境的體驗。
2.與角色建立更深層次的連接
為了讓用戶相信VR中的所有內容都是真實的，我們需要創建與用戶所扮演的角色的連接。最明顯的解決方案之一是在虛擬場景中包含用戶手的表示。這種表示應該是實際的手 - 而不僅僅是一個操縱的復制品?？紤]不同的因素（如性別或膚色）至關重要，因為它會使交互更加真實。
用戶可以看到他或她的手，看他們看起來像一個角色。（來源：leapmotion）
也可以將現實生活中的一些對象帶到VR環境中以創建此連接。例如，一面鏡子。當用戶查看鏡像并在反射中看到他們的角色時，它可以在用戶和虛擬角色之間實現更真實的交互。
虛擬現實用戶會查看虛擬鏡像，并將自己視為VR環境中的角色。致謝：businesswire。
3.使用手勢代替菜單
在設計沉浸式VR體驗時，我們不能依賴傳統的菜單和按鈕。為什么？因為通過顯示菜單來打破沉浸感相對容易。用戶會知道他們周圍的一切都不真實。設計師不需要使用傳統菜單，而是需要依賴手勢。設計界仍然在定義使用手勢的通用語言，參與這項活動是有趣和令人興奮的運動。棘手的部分是讓用戶熟悉并可預測手勢。
Hovercast VR菜單試圖將現有的交互概念重用于VR體驗。不幸的是，這個概念可以打破沉浸感。新媒體需要新的互動模式。
4.與VR環境中的元素交互
要創建一個感覺真實的環境，我們需要讓用戶能夠與該現實中的對象進行交互。理想情況下，環境中的所有對象都可以以允許用戶觸摸和檢查它們的方式進行設計。這些物體將充當刺激，并將幫助您創造更加身臨其境的體驗。觸摸對于探索環境非常重要; 嬰兒在頭幾天獲得的最重要信息是通過觸摸獲得的。
5.VR
VR中分享情感有一個真正的機會，成為一個新的社會體驗水平。但為了實現它，我們需要解決一個重要問題，即將非語言線索帶入交互中。
當我們與其他人互動時，我們獲得的信息的重要部分來自肢體語言。驚喜，厭惡，憤怒 - 所有這些情緒都在我們的面部表情中，在面對面的互動中，我們從眼睛區域推斷信息。當人們在VR環境中進行交互以創建更真實的交互時，提供此信息非常重要。
好消息是頭戴式設備（HMD）將很快涵蓋情感識別。幾乎任何人與人之間的互動都將受益于VR中的面部表情。
在VR空間分享情感（來源：MITReview的 Rachel Metz ）
6.為VR環境設計聲音和音樂適合
音頻是沉浸式體驗的重要組成部分。如果不為環境設計聲音，就不可能創造出真正身臨其境的體驗。聲音既可以用作背景元素（即風的環境聲音），也可以用作方向性的。在后一種情況下，聲音可以用作提示 - 通過播放方向性（聲音來自哪里）和距離（可以將用戶的注意力集中在特定元素上）。
在為VR設計音頻時，制作聲音3D至關重要。2D聲音不能很好地用于VR，因為它使一切都太平。3D聲音是您可以在周圍的各個方向聽到的聲音 - 前方，后方，上方和下方 - 遍布整個地方。您不需要專門的耳機來體驗3D聲音; 可以使用HMD的標準立體聲揚聲器來創建它。
頭部跟蹤是良好聲音設計的另一個重要方面。讓聲音以逼真的方式表現至關重要。這就是為什么當用戶移動他的頭部時，聲音應該根據頭部運動而改變。
7.預防暈車
動是VR的主要痛點之一，這是一種在視覺感知運動和前庭系統的運動感之間存在分歧的情況，而讓用戶在體驗VR時保持舒適至關重要。
有兩種流行的理論導致VR中的暈動?。?
“感覺沖突”理論：根據這一理論，暈動病的發生是由于預期的運動和實際經歷的運動之間的感覺上的不一致。
“眼動”理論：在“ VR書：虛擬現實的以人為本設計 ”一書中，杰森杰拉德提到暈動病的發生是因為保持場景圖像在視網膜上穩定所需的不自然的眼球運動。
以下是一些提示，可以幫助您防止用戶接觸到病箱：
身體運動應與視覺運動相匹配。有時即使是小的視覺抖動也會對體驗產生巨大的負面影響。
讓用戶在移動場景之間休息（這在VR體驗非常動態時尤為重要）。
減少虛擬旋轉。
結論
當我們考慮產品設計的現代狀態時，很明顯我們只是處于冰山一角，因為我們僅限于平面屏幕。
我們正在目睹人機交互（HCI）的根本轉變 - 重新思考數字體驗的整體概念。在接下來的十年中，設計師將打破玻璃（我們今天所知的移動設備時代）并轉向未來的接口 - 復雜的語音接口，先進的AR和真正的沉浸式VR。當談到創造一種新的體驗時，必須要明白我們唯一的邊界是我們的大腦告訴我們它必須始終如一。
寫在前面
B端產品和C端產品作為兩種很不一樣的產品形態一直服務著廣大的用戶。它們各有各的作用，有很多B端產品還是一個非常龐大的系統工程，甚至有很多的公司就是專注于開發B端產品，我從業以來曾經參與過很多的（兩位數）B端產品項目，有的是從0到1的開發，也有的是在原基礎上更新優化，下面就從我個人的設計經驗整理出一些觀點。
什么是B端和C端產品
概念：B端面向商家和公司，組織；C端面向普通的大眾用戶；
B端是指：business--泛指生意，商業，公司和組織； To B即是面向商家和公司，組織，是給專職專業的用戶使用的產品，例如微信公眾平臺給制定的公眾號持有人使用，某公司的指揮調度系統，某停車管理系統，以及相關的后臺管理系統等。C端是指：consumer--消費者，顧客，用戶，是指被設計為能給普通大眾使用的產品；To C即是面向普通的老百姓用戶，例如微博，QQ，微信，新聞客戶端，淘寶等；
幾乎男女老少都會使用的微信
面向專職崗位人員使用的后臺管理系統
兩者的不同點
C端產品追求極致的體驗，；B端產品追求簡約、高效的完成工作
C端產品是為了滿足用戶某一主要的、固定 的核心需求，因此設計的目標是圍繞著這個核心需求，簡單直接解決用戶的需求，追求的是極致的用戶體驗，因為對C端產品而言，產品不好用，體驗不好，用戶就流失了，也就沒有盈利的可能了。
B端產品的目標是幫助用戶把大量的復雜的工作，整理歸納，使得他們能高效便捷的完成工作，追求的是產品的簡約實用，提高效率，能很好的處理工作，有時候為了達成業務目標，甚至不惜犧牲部分用戶體驗。
To B端界面的設計應該要重點注意什么
很多新手設計師在接到新的需求的時候會沒有頭緒，不知道如何開展工作，在不了解業務的前提下很多時候被產品牽著鼻子走。那么問題來了，是拿到產品給過來的原型之后就開始設計了嗎？又或者沒有原型只有一些簡單的描述，又該如何開展呢。以下是我的幾個建議
1，要了解業務
因為B類產品不同于C類產品，并不是大多數人日常都會很普及用到的，所以就需要設計師主動的去了解行業，了解業務需求，不同的行業有不同流程和規則，甚至是一些特殊的需求；啟動用戶群體調研和用戶使用場景調研，有條件的可以開展用戶問卷調研甚至面對面訪談，整理出用戶的使用流程，調研后要求設計師自己能非常清楚這個產品的作用、用戶人群、和在特定的使用場景下的使用目標、和不同情境下的操作流程等。
2，交互流程設計
B端產品往往包含了比較復雜的業務，那在復雜的業務背景下如何通過設計來提高用戶的工作效率，這就對設計師有比較高的要求。在交互流程上要整理出一些操作路徑，要考慮它們的層級關系，先后順序，行業習慣等。通過操作體驗給用戶留下明確的印象，可以降低用戶的學習成本，提高產品的易用性。
To B端界面的視覺設計
①、界面布局，分固定的和自適應的分辨率兩種，一般來說自適應的布局比較適合操作和展示內容比較多的系統，固定的寬度的分辨率的布局一般多用1200px以適應適配更多低分辨率的顯示器，現在的大屏幕設備非常普及了，很多系統轉為以1400px的寬度來設計，至于用哪一種的布局要取決于產品的功能了。
界面布局視覺上的區分；當我們設計一個系統的主頁到時候，B端產品通常會分為很多功能模塊，即便產品經理會提供原型給UI設計師，他們有時候往往會在原型按照他們的想法來布局，這時候設計師需要主動地去了解業務去弄清楚各個模塊的主次之分。通過調研后，整理歸類任務模塊，按照業務流程和規則來區分模塊優先級。（圖例）
②、顏色，B端系統的界面顏色也非?？季浚凑障到y的功能特性來定，一般常規的系統界面都是以白色底色配以一種主色調的顏色來搭配的；第二深色的底色界面，深色界面能起到一種很好的襯托界面內容（如大量文字，數據，圖形，視頻等）的作用，深色界面再附以一些點線面和光的元素就能營造出一種炫酷的科技感。三是現在流行漸變色，漸變色和純色會給人一種繽紛，輕松愉悅，有活力的年輕的感覺，所以大家在設計不同的B端系統界面的時候要考慮產品的功能性質來選擇用顏色。
③、導航，導航可以解決用戶在訪問頁面時：在哪里，去哪里，怎樣去的問題。一般導航會有「側欄導航」和「頂部導航」2 種類型。一：側欄導航：可將導航欄固定在左側，提高導航可見性，方便頁面之間切換；頂部可放置常用工具，如搜索條、幫助按鈕、通知按鈕等。適用于復雜的、功能多的中后臺的管理型、工具型網站。二：頂部導航，順應了從上至下的正常瀏覽順序，方便瀏覽信息；頂部寬度限制了導航的數量和文本長度
④、按鈕，通常B端產品分為較多的功能模塊，也對應有很多不同的按鈕，在設計按鈕的時候，我們第一要分清楚哪些按鈕對應哪些功能，在設計上要做出區分。
⑤、表格，表格的設計遵循簡潔和易讀性為主，表里面的文字內容是主要的設計重點，例如信息層次的明確、對齊的原則等。
⑥、彈窗，不僅有操作反饋的作用，同時又是一個承載更多的操作功能的容器，彈窗的設計要有規范性，組件化。
視覺設計方面除了常規的設計流程，我想說的是綜合考慮和相關的系統銜接，體驗的一致，視覺風格的統一和品牌的建設。
設計師還能做些什么
雖然設計師和產品經理以及開發已經溝通過相關的業務需求，但設計師一定要懂得切換角度來看待問題，一方面設計師的視角相對注重視覺上和交互上的設計細節；第二我們也要懂得站在開發和產品的角度考慮，哪些效果能不能實現，也是需要我們和開發同事密切配合的；另一方面要更加注重代入用戶的角度來思考，這樣才能做出合理適用的設計，甚至能挖掘新的需求，提出一些很好的建議，給產品和項目帶來加分和利好。
總結
因為B端產品業務需求，用戶目標，使用場景和用戶群體都不相同，所以設計師接到B端產品的設計需求時一定要先了解清楚業務，做好前期調研，其次要多站在用戶的角度來看待和設計產品。其實C端和B端產品，它們都要求要簡單實用和有效準確，都是為了更好的滿足用戶的需求，解決用戶的痛點。做好了以上這些關鍵點，無論遇到多么復雜的B端產品，我相信所有問題都會迎刃而解。
前兩篇，探討了個人對交互設計價值觀的理解，以及其對從業者和用戶的價值。
這一篇，我們就來探討一下，如何做到之前提到的 4 點價值觀。
先從“周到“開始。
僅為一家之言。歡迎留言交流，說出你的看法。
本著嚴謹的態度，先捋一捋概念。
常言道，金杯銀杯，不如百姓口碑。
同理，周不周到，最終還是用戶說了算。那用戶是怎么評判的呢？通常是憑主觀感受。
拿上篇文章中網易號文章編輯頁面的例子來說，因為“保存”和“存草稿”功能做的不夠好，所以給筆者留下了不夠周到的印象。
翻譯過來，就是，一些體驗細節，影響了用戶的印象。
《設計師要懂心理學》這本書中有條原則，叫“整體認知主要依靠周邊視覺而非中央視覺”。
講的是視覺和 UI 層面的用戶認知。就是說，用戶會關注并不顯眼的邊邊角角的設計，而且這些邊邊角角的設計會影響用戶對整體設計的認知和印象。
舉個例子。假如說，微博信息流頁面的掃一掃圖標，在風格、大小等方面和其它圖標不統一，就會給用戶留下比較糟糕的印象，用戶很可能會覺得微博的設計不夠專業。
這些是 UI 設計層面的。在交互設計層面，也是類似的道理：體驗細節會影響用戶的認知。
總的來說，至少在常用的交互細節上，不要給用戶留下負面印象，也不要讓用戶產生負面情緒，避免所有的不周到，才算是周到。
個人覺得，最關鍵的地方，是滿足好小需求。
啥是小需求？
個人觀點，籠統的講， 小需求是一種共性需求， 主要是一些體驗細節。比如信息的分類與展示、銜接不同頁面的各種彈窗與提示、對各種狀態的提示、對各種情況的到位解釋，等等。
有小需求，就有大需求。
所謂大需求，更多是一種個性需求， 不同的產品，會有不同的大需求。比如短視頻產品，它的大需求會包含視頻的拍攝、上傳、播放等；資訊類產品，它的大需求則包含文章的撰寫、編輯、發布、查看等。
工作經歷，筆者見過一些交互設計不夠周到的產品。它們的共同特點就是： 大需求基本上得到了很好的滿足，小需求沒有得到很好的滿足。
這一大段，就圍繞如何更好的滿足小需求來展開。主要建議如下。
筆者有個客戶，是從事教育行業的，之前并沒有接觸過互聯網行業的產品與設計工作。
這位客戶找到筆者的時候，是想要設計一款小程序的界面。當時客戶非常自豪的對筆者說，這個（原型）是我用墨刀畫的，現學現做。
說起墨刀，本人也用過。和 Axure 相比，確實好用太多，在簡潔性和智能性方面，感覺和 Sketch 有異曲同工之處。
關于墨刀如何好用，網上已經有太多溢美之詞。筆者就結合自己的使用經歷，簡單總結一下：
1 好用，上手快。零基礎，只要會操作常用辦公軟件，簡單學一下就能上手
4 能查看頁面之間的跳轉邏輯。借助工作流功能，可實現這一點
以上主要是墨刀自身的優點。結合本段主題，我們再探討一下，對于日常工作，墨刀這把利器有哪些優勢。
1.1 可以把更多精力花在創作上
當我們不會用一款工具時，通常會有一些挫敗感。如果必須要用，接著很可能就會有一點焦灼了。
而墨刀，基本上不會讓我們體會到這些感覺。
我們也不用花無謂的時間去學習一些艱難的高深的技法，而是可以把更多的時間花在“創作”這件事上。
1.2 可以更好的去滿足小需求
部分公司，可能面臨如下情況。
公司沒有專門的交互設計師，產品的原型由產品經理來畫。產品經理本身還兼任項目經理。
如果項目又特別趕，客觀上，產品經理確實沒有太多時間去關注交互的體驗細節。
主觀上，如果產品經理對這些交互細節的興趣或重視程度不足、同時產品經理上面的決策層也不去抓這些體驗細節，最終的結果，就是產品的原型上可能會丟失很多體驗細節。
筆者就有類似的經歷。
一款 App，產品經理用 Axure 畫的原型。評審或宣講需求的時候，大家都是在電腦或會議室大屏幕上來看這個原型，同時所有人最先關注的是大需求。
理解完大需求，會有部分同學就大需求提出自己的看法或建議。最后，才會有部分同學就小需求指出不足并提出建議。
受限于職責、時間等各種因素，大家也不可能針對小需求提出太多建議。結果就是，仍然會有相當數量的小需求被遺漏，或者沒有被很好的滿足。
墨刀有兩個功能，可以較好的規避這些問題。一個是工作流功能，一個是手機端預覽功能。
工作流功能，類似流程圖，即把所有頁面以合乎邏輯的方式鏈接起來。客觀上，會促使我們畫出所有包含小需求的頁面，包括彈窗、狀態提示等。
支持多人的手機端預覽功能，使得我們在手機上，可以通過點擊等方式來模擬體驗這款 App。這樣的環境下，我們會更容易理解大需求，也更容易發現小需求存在的問題。
所以，個人的建議，就是用墨刀來畫原型，同時把工作流和多人手機端預覽（針對 App、小程序）這兩項，作為硬性標準。
一款產品，在體驗或使用時，非常容易發現問題。
因為這時候，我們可以松弛下來，把自己切換成普通用戶。忘掉所有費腦子的需求和設計原理，只依賴經驗和直覺來用這款產品。我們的主觀感受，會告訴我們，這款產品的交互，到底周不周到。
據陸樹燊的《微信團隊的實驗室文化》一文顯示，張小龍評審微信的功能，不看原型圖，不看設計稿，也不看 Demo，而是體驗前后臺代碼開發好后的產品。這就意味著，如果一個功能在給到用戶前有 N 個方案，就會有 N 個方案對應的前后臺代碼。
一定程度上，微信團隊就是通過這種在正式發布前反復試錯、不斷打磨的方式，最終給用戶提供了優秀的交互體驗。
估計，絕大部分團隊和公司，都做不到微信這樣，開發 N 個版本，并去一一體驗和比較這 N 個版本。
無法體驗已經開發好的 N 個版本。但是，在真實的設備上體驗 N 個原型，我們還是可以做到的。
原型雖然沒有開發好的產品那么順暢和流暢，但是，如果用墨刀在手機端體驗一款加了鏈接和動效的 App 原型，一樣可以發現很多問題。
不過，根據經歷和觀察，筆者發現，我們人類，是不喜歡體驗原型的。
想一想，平常工作中，我們可能會樂此不疲的去體驗開發好的測試版產品。但對于原型，大部分時候，都是匆匆忙忙就過掉了。
個人有個猜測，就好像人類喜歡逗貓遛狗、卻不太喜歡逗桌子上的模型貓和模型狗一樣，我們人類是不太愿意花費太多時間和精力去和原型這種“假產品”互動的。
所以，某種程度上，體驗原型，是一種反人性的行為。
但卻是一種非常經濟和高效的方法。
因為首先，大部分時候，我們都是先選中一個原型方案，然后去設計、去開發；其次，等到開發好進入測試環節，這時候，原型往往就成了測試的標準，依靠測試來優化原型是不現實的。
所以，結合現狀，綜合來看，小需求能不能得到很好的滿足，很大程度上還是要依靠原型。
也就是說，很有必要對原型進行優化。具體方法，就是在真實的設備上體驗原型、反復體驗、多人體驗，并進行相應優化。
如前所述，用利器來創作原型，反復在原型里體驗產品，這些強調的是內部力量，即自身的努力。
下面，再談一談外部力量，即外界海量的知識與經驗。
說起外界知識，除了直接參考其他產品的設計以外，大家參考最多的，可能就是《iOS Human Interface Guidelines》和《Material Design》這些設計規范了。
根據筆者的實際經驗，這兩個來自蘋果和谷歌的設計規范，很多時候，我們都是拿它們當字典用。即哪一點不會或不太確定的時候，去翻一翻查一查。
雖然這倆規范很優秀，但是卻很難被我們“物盡其用”，因為它們的知識體系過于龐大，有點像一本字典。拿著“字典”里的每一條原則去檢驗我們的交互設計，這是很難做到的。
但是有一個設計規范，去非常適合拿來檢驗我們的交互設計，那就是尼爾森十大可用性原則。
太詳細的就不贅述了，這里我們再簡單回顧下這十條原則。
1) 狀態可見
用戶時刻清楚，正在發生什么
2) 環境貼切
營造一個用戶熟悉的環境，比如語言、詞語、圖標等
3) 用戶可控
控制權交給用戶，并且多數時候，考慮支持撤銷重做
4) 一致性
方方面面的統一，比如文案、視覺、操作等
5) 防錯
盡最大可能，幫助用戶，避免用戶犯錯
6) 易?。鹤R別比記憶好
通過把組件、按鈕等元素可見化，降低用戶記憶負擔
7) 靈活高效
優先考慮人數最多的中級用戶，同時兼顧高級和初級用戶
8) 易掃：優美且簡約
閱讀體驗要好，掃視體驗也要好；保持簡約和美觀
9) 容錯
幫助用戶識別、診斷，并從錯誤中恢復
10) 人性化幫助
日常的使用最好脫離幫助文檔，但有必要提供幫助文檔
個人非常建議，在日常工作中，把尼爾森十大可用性原則作為一把標尺，來時時刻刻檢驗我們的交互設計。
交互設計，在涉及體驗細節的小需求上，避免所有的不周到，方才是周到。
用利器創作原型，要包含流程圖；多體驗原型或產品，以體驗結果為準、而非討論結果為準；參考優秀的設計規范，用尼爾森十大可用性原則來檢驗原型。
以上三點，可以幫助我們做到交互設計的周到。
其中，個人認為，最為核心的是第二點：多體驗原型或產品，直到自己覺得周到為止。
因為，正如電影《霸王別姬》的一句臺詞所說：人，得自個兒成全自個兒。
最近有同學問老王，UI設計師是不是需要交互設計能力？
當然需要，不懂交互的UI不是好UI~
首先UI設計不僅僅需要把功能需求可視化，還需要注重用戶體驗。所謂用戶體驗，其實就是用戶與頁面的交互。而在交互設計中有很多的方法和理論，如格式塔心理學、尼爾森可用性原則、7+2法制、3次點擊法制、功能可見性原則、菲茨定律等。他們大多的方法也是共同的。
所以呢，今天老王來說說交互設計用的最多的原則——尼爾森十大可用性原則。
很多情況用戶是不知道當前狀態的，所以在適當的時間內做出反饋很重要。不僅能讓用戶知道情況，還能防止用戶發生錯誤操作。常見反饋有刷新提示、新頁面加載提示、支付提示、下載提示。除了結果反饋提示外，對于進程中的頁面會用進度條進行表現。
今日頭條APP首頁中，看過的文章標題變為了灰色、而沒讀過的文章標題依舊保留了黑色字體。
簡單來說就是讓軟件看起來跟符合真實世界，還原現實認知。通過直觀的視覺快速傳達給用戶。
音樂軟件通過模擬現實唱片并結合旋轉的播放動畫，從而降低了學習成本，更輕松的理解界面。
說白了就是給用戶發后悔藥，當用戶誤操作時要給用戶提供提供撤銷、取消、重做等相關功能。買錯商品可以無條件包郵退回。
拼多多凸顯了“退貨免運費”“7無理由退回”服務，解決了用戶買到不滿意產品的售后擔心。減少了承擔運費的成本，從而促使了用戶快速下單。
一個好的產品從視覺上首先是統一的，色彩、字體、元素保持統一，能加強用戶的記憶力。在交互中同樣如此，頁面結構、操作反饋都需要保持一致性。
QQ首頁列表中不管你點擊那一條目，下一級界面都是由右往左滑出。點擊左上角返回按鈕，會從左往右滑回，體驗完全一致；幾乎所有產品進入下一層級頁面的交互方式都是如此。
為了減少用戶錯誤的可行性，進階是給出錯誤反饋是不夠的，用心一點的設計師其實會發現很多的產品是這樣做的。為了防止錯誤的發生，會進行防錯設計。
比如在發朋圈時，點擊返回按鈕出現的提示彈窗。彈出框方式會增加不可逆操作的難度，減少操作刪除帶來的順勢。更人性化的是，提示給出了保留和不保留按鈕選擇，選擇保留退出還可以再次編輯。
通過把組件、按鈕及選項可見化，減少用戶的記憶負荷，讓使用更輕松。在使用過程中不需要記住上一頁面的信息就能完成當前頁的操作。
通常更新完APP之后，會出現新功能引導。引導提示能告訴用戶新功能所在的位置和作用。這也是協助記憶原則的體現。
好的產品不僅僅需要滿足新用戶，還需要滿足深度用戶。保證第一次使用者，能清晰明白功能。對于老用戶需要提供更高效使用方式。
對用戶重復使用的功能，提供便捷按鈕。比如叮咚買菜的再次購買。
適當的留白能讓頁面功能突出，也能讓視覺更加舒服。精致的圖形元素能給用戶留下好的印象。
很多K12的產品會運用IP形象進行延展，不僅強化了品牌記憶力，更增強了互動感。
好了，以上就老王對尼爾森十大原則的解析。其實原理很簡單，甚至很多都是很直觀的廢話，但如果不把它們一條條列出來，還是有很多人連這些廢話都做不到。
關注細節，才能成就大事！
一、什么是交互設計？
先來看一下百度百科的定義
交互設計（英文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版本的轉化率、跳出率、留存率等
感謝閱讀！
米勒定律背景：
1956年經美國心理學家發表了一篇名為《神奇數字7》的論文，論文中討論了一維絕對判斷的極限和短期記憶極限之間的關系：一維絕對判斷的備選數目與短期記憶極限的數目大致相當，數字都在 7 左右徘徊。在后來的好些研究雖然也對論文中的一些概念進行了改善，但這個數字7依然被保留。這也是人們關于短時記憶內容最早期的研究結果，現在也普遍適用在設計中，也就是現在的米勒定律。
米勒定律定義：
從心理學的角度來看，人類處理信息的能力是有限度的。人腦在處理信息塊的時候會受到7±2規則的限制，即人的大腦最多同時處理5到9個信息塊。原因是短期記憶儲存空間的限制，超過9個信息團，將會使得大腦出現錯誤的概率大大提高。
思考結論：人們的短期記憶有限，通常只能記憶7±2信息塊。信息塊越多，人們能記憶的信息精準度越小，越容易出錯。
米勒定律應用：
在產品設計中，米勒定律可以說是信息內容處理的一條規范準則。通過減少對信息層級的劃分、歸類分組、輔助記憶等，來提高用戶對信息的高效識別與記憶。在追求極致用戶體驗的趨勢下，用戶對信息的預見與計劃在產品設計中也是極為注重，無論在產品設計的初期還是成熟期，合理的信息處理將會大大提高用戶對產品的好感度。
01、控制數量，減少用戶選擇
人們對信息的記憶處理是有限的，通常信息越多我們將越難以記憶。所以在做產品設計的過程中應該控制好信息塊的數量，增強輔助用戶識別與記憶，提高用戶體驗。
02、信息分段，輔助用戶記憶
在產品設計時我們經常能遇見一連串信息（數字、文字、段落等）的情況，當信息數量較大的時候，我們可以采用對信息分段的處理方法，將一連串的信息以7±2個內的信息數量為一個段點，輔助用戶記憶。
03、流程分步，優化用戶操作
經常會遇到信息特別多或者復雜業務場景，特別是在B端產品設計。通常我們都會先梳理業務流程，然后分步驟處理對應的信息。從而減少單屏信息內容過多給用戶帶來的急躁，讓用戶每個步驟都沉浸與當前的操作。
04、信息排序，引導用戶記憶
人們在記憶一組多數據信息塊的時候，通常都會對首末的兩個位置信息塊的記憶會相對比較強，所以在產品設計的時候，需考慮把重要的信息放在首位/末尾位置，引導用戶去記憶該信息。這也就是系列位置效應（首因效應、近因效應）。
A、首因效應：指在整個序列的信息塊中，相比中間位置的信息，人們對最前面的信息記憶更加清晰。
B、近因效應：指在整個序列的信息塊中，相比中間位置的信息，人們對最后面的信息記憶更加清晰。
C、設計思考：人們對信息流排序的時候應把重要的元素放置在首位或者末尾。若用戶是長期記憶的的話考慮首因效應、短期記憶思考近因效因，人們的記憶不僅受到位置的影響，同時也受時間影響，在不同的場景下合理應用系列位置效應.
米勒定律在產品設計中的應用主要是解決信息塊對用戶的記憶問題，合理的信息布局和信息處理可以大大的提高用戶對信息的閱讀和記憶。還可以根據不同的業務場景引導和輔助用戶識別和交互，增強用戶對產品的好感與體驗。
文章來源：站酷 作者：TerryChen_
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、
BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn