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

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

一、選擇配圖的常見錯(cuò)誤

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

1、素材與用戶預(yù)期：

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

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

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

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

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

2、素材與主視覺：

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

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

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

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

3、素材與素材：

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

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

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

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

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

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

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

二、運(yùn)用配圖的常見錯(cuò)誤

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

辛辛苦苦找到的素材，就差一步便可以提升作品的效果，卻因?yàn)橄有薷穆闊┒е槐郏覀儊砜纯聪旅嫒N方法是如何將素材進(jìn)行優(yōu)化的。

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

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

如下圖：兩張運(yùn)動(dòng)類產(chǎn)品的界面列表，我們來分別單獨(dú)預(yù)覽兩個(gè)界面，有沒有發(fā)現(xiàn)同樣的界面同樣的產(chǎn)品，但預(yù)覽產(chǎn)品的順序是不同的，這是什么原因?qū)е碌哪兀课覀兺驴础?/span>

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

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

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

素材因?yàn)榻嵌炔灰唬o人的感受也是不同的，在一個(gè)界面中的素材如果角度各式各樣，會影響到用戶的點(diǎn)擊欲望。所以在挑選素材時(shí)應(yīng)該注意參考圖的角度，統(tǒng)一的拍攝角度可以讓界面變得更有秩序。

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

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

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

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

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

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

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

三、線上運(yùn)營用圖

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

1.確保真實(shí)用圖：

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

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

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

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

2.不可重復(fù)用圖：

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

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

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

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

3.圖片的清晰度：

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

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

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

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

4.圖片比例：

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

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

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

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

5.元素太多不使用：

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

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

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

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

6.格式太大：

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

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

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

7.不要使用白色背景：

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

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

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

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

總結(jié)

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

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

      在數(shù)據(jù)可視化的分析過程中，用戶是所有行為的主體，通過獲取的可視信息形成認(rèn)知，在交互分析過程中獲取解決問題的方法。

     在這個(gè)過程中，感知和認(rèn)知能力直接影響著信息的獲取和處理進(jìn)程，進(jìn)而影響用戶對外在世界環(huán)境做出的反應(yīng)，這也是設(shè)計(jì)數(shù)據(jù)可視化產(chǎn)品服務(wù)藍(lán)圖的基礎(chǔ)邏輯。

     從數(shù)據(jù)到知識有兩個(gè)途徑:交互的可視化方法和自動(dòng)的數(shù)據(jù)挖掘方法。

     我們可以看到，下圖展示的便是一個(gè)典型的可視分析流程圖和每個(gè)步驟中的過渡形式。這個(gè)流水線的起點(diǎn)是輸入的數(shù)據(jù)，終點(diǎn)是提煉的知識。

     可視化的首要任務(wù)是準(zhǔn)確地展示和傳達(dá)數(shù)據(jù)所包含的信息。根據(jù)預(yù)期和需求，提供有效輔助手段以方便用戶理解數(shù)據(jù)，從而完成有效的可視化。

     但是當(dāng)出現(xiàn)數(shù)據(jù)尺寸大、結(jié)構(gòu)復(fù)雜的情況時(shí)，有限的空間大大限制了靜態(tài)可視化的效果，有限的可視化空間和數(shù)據(jù)過載之間的處理是非常復(fù)雜的。有時(shí)我們會通過物理環(huán)境的變化來改變服務(wù)模型，但是更多時(shí)候我們需要通過交互設(shè)計(jì)來完成對復(fù)雜信息的處理，提升用戶對數(shù)據(jù)解讀的便捷性。

     那么當(dāng)我們在設(shè)計(jì)一張數(shù)據(jù)大屏?xí)r，我們該如何通過交互提升用戶獲取有效數(shù)據(jù)的效能呢，下面我們一起來探討如何完善大屏設(shè)計(jì)中的交互設(shè)計(jì)：

一、信息架構(gòu)

1、清晰易理解、可拓展的信息架構(gòu)

2、清晰易理解的導(dǎo)航關(guān)系

3、清晰易理解的層級關(guān)系

案例分析：

在我們收到原型圖時(shí)，首先我們需要梳理清楚大屏的信息架構(gòu)，比如整個(gè)大屏的模塊比例是按照1:1:1還是1:3:1的結(jié)構(gòu)。又或者是如何設(shè)計(jì)重要功能的入口，比如整屏的導(dǎo)航tab選項(xiàng)，在布局設(shè)計(jì)上用戶是否可以明晰它是是否是全屏篩選，在交互邏輯上用戶是否可以通過最短的路徑快速篩選抵達(dá)內(nèi)容。那么當(dāng)用戶進(jìn)行了導(dǎo)航的切換后又返回到上一頁面，整個(gè)行為是可以形成路徑閉環(huán)的。

二、流程設(shè)計(jì)

1、可下鉆的模塊需給用戶以引導(dǎo)

2、相同功能的用戶體驗(yàn)路徑需保持一致

3、逆向流程的功能設(shè)計(jì)能形成閉環(huán)

案例分析：

我們經(jīng)常會在大屏中間設(shè)計(jì)地圖的樣式來展示某個(gè)省的數(shù)據(jù)情況，比如，如圖所示，當(dāng)業(yè)務(wù)側(cè)需要從湖北省跳轉(zhuǎn)至武漢市，查看武漢市的詳細(xì)數(shù)據(jù)，那么我們可以在省級地圖輪播的數(shù)據(jù)氣泡上給予用戶以提示，用戶可以清楚獲取到跳轉(zhuǎn)市級大屏的路徑方法。

三、界面展示

1、一致可控的圖表組件

可視化大屏中最核心的數(shù)據(jù)展示形式就是圖表模塊，我們需要正確地展示圖表組件外觀與組件關(guān)系，把控好相似功能的橫向一致性，我們可以細(xì)分為以下幾點(diǎn)。

（1）選擇正確清晰的圖表組件

（2）正確表達(dá)組件元素之間的關(guān)系

（3）一致性的組件樣式和交互行為

（4）不要忽視組件的不可用狀態(tài)（按鈕）

（5）刪減影響用戶視線和注意力的冗余元素

案例分析：

當(dāng)一個(gè)模塊內(nèi)需要展示數(shù)據(jù)的多個(gè)維度，我們?nèi)绾螌⒃撃K設(shè)計(jì)得更加清晰呢。如下圖，根據(jù)人從左往右的閱讀習(xí)慣，在左邊展示數(shù)據(jù)1和數(shù)據(jù)2的總指標(biāo)數(shù)，在右邊展示數(shù)據(jù)1和數(shù)據(jù)2的詳細(xì)走勢，右上角我們還可以添加tab選項(xiàng)，用戶可以進(jìn)行tab切換查看更多維度的數(shù)據(jù)內(nèi)容。

所以，我們可以將用戶使用習(xí)慣和交互行為很好地結(jié)合起來，不僅免去了圖表多亂雜的場景，用戶也可以更快地查看到想要獲取的數(shù)據(jù)信息。

2、清晰的數(shù)據(jù)展示

配合圖表展示的就是我們的“數(shù)據(jù)數(shù)字”內(nèi)容了，在我們將設(shè)計(jì)稿傳遞給前端同事后，填充真實(shí)數(shù)據(jù)后的視覺效果可能看起來沒有效果圖規(guī)整，一方面在進(jìn)行繪制效果圖之前，可以與產(chǎn)品業(yè)務(wù)側(cè)共同探討數(shù)據(jù)內(nèi)容，盡量給視覺設(shè)計(jì)師提供真實(shí)的數(shù)據(jù)，另一方面，在我們作圖搬磚的時(shí)候，也要注意一下幾點(diǎn)：

（1）不要遺漏了“無數(shù)據(jù)”的缺省空界面，當(dāng)無法獲取到數(shù)據(jù)時(shí)，我們需要給前端提供這樣的缺省圖；

（2）清晰的數(shù)據(jù)排序規(guī)則，比如環(huán)形圖中，總起始點(diǎn)到終點(diǎn)，數(shù)據(jù)對應(yīng)的數(shù)值量應(yīng)該是遞減的排序規(guī)則；

（3）考慮數(shù)據(jù)的極值情況，比如在搜索列表中學(xué)校名稱文字的極限字?jǐn)?shù)是多少，超出多少字用省略號顯示，這些我們都需要考慮到；

（4）是否需要標(biāo)明數(shù)據(jù)的更新時(shí)間節(jié)點(diǎn)，有的大屏強(qiáng)調(diào)數(shù)據(jù)實(shí)時(shí)性，我們經(jīng)常會在右上角增加數(shù)據(jù)截止更新時(shí)間來來引導(dǎo)用戶；

（5）特定的數(shù)值按照特定的格式和單位顯示，比如羊字符能讓用戶第一時(shí)間識別到是人民幣，而如果金額數(shù)字過長后面再加元會降低識別效率。

案例分析：

3、選擇與輸入的信息反饋

（1）展示合適的首選項(xiàng)或默認(rèn)值

（2）輸入前有效的文本提示

（3）輸入完成后需及時(shí)反饋

案例分析：

4、用動(dòng)效進(jìn)行有效的交互引導(dǎo)

     利用動(dòng)效進(jìn)行交互引導(dǎo)，即使大屏操作鏈路過長，也可以讓用戶快速上手操作，減少流程學(xué)習(xí)時(shí)間。進(jìn)入下一場景后，又會有對應(yīng)的區(qū)域提示用戶返回全局或查看其他場景；當(dāng)做到層層有響應(yīng)，就能減少用戶在每一步操作上的困惑時(shí)間，幫助用戶快速上手操作流程，并且大大提升工作效率。

     但是我們需要注意的是，不要為了酷炫而做太多無用的動(dòng)效，不僅會讓頁面加載速度慢，也會讓用戶覺得雜亂無重點(diǎn)。

     總結(jié)：

     交互可提高可視化系統(tǒng)的效率，幫助用戶處理更多的數(shù)據(jù)，完成更復(fù)雜的任務(wù)。然而，實(shí)現(xiàn)交互本身也有額外成本。互動(dòng)的系統(tǒng)可以使用戶能探索更大的信息空間，但隨之而來的成本是用戶需要花費(fèi)更多的時(shí)間與精力去瀏覽和探索數(shù)據(jù)。

     因此，可視化系統(tǒng)應(yīng)當(dāng)采用數(shù)據(jù)挖掘算法自動(dòng)發(fā)現(xiàn)用戶可能會關(guān)心的數(shù)據(jù)或者模式；并通過可視化呈現(xiàn)給用戶，用戶在這個(gè)基礎(chǔ)上通過互動(dòng)進(jìn)行更深入的挖掘。設(shè)計(jì)師的設(shè)計(jì)決定了系統(tǒng)的可理解性，一旦掌握了這個(gè)邏輯，再復(fù)雜的頁面也會變得有條不紊。

     我們?nèi)孕柙跀?shù)據(jù)可視化的道路上不斷探索挖掘數(shù)據(jù)價(jià)值，給決策者提供有效的數(shù)據(jù)分析支撐，讓設(shè)計(jì)驅(qū)動(dòng)數(shù)據(jù)價(jià)值最大化。

一、什么是格式塔原理？

        格式塔心理學(xué)誕生于1912年，是由德國心理學(xué)家組成的研究小組試圖解釋人類視覺的工作原理。他們觀察了許多重要的視覺現(xiàn)象并對它們編訂了目錄。其中最基礎(chǔ)的發(fā)現(xiàn)是人類視覺是整體的：我們的視覺系統(tǒng)自動(dòng)對視覺輸入構(gòu)建結(jié)構(gòu)，并在神經(jīng)系統(tǒng)層面上感知形狀、圖形和物體，而不是只看到互不相連的邊、線和區(qū)域?！靶螤睢焙汀皥D形”在德語中是Gestalt，因此這些理論也稱做視覺感知的格式塔原理。

       格式塔學(xué)派主張人腦的運(yùn)作原理屬于整體論，“整體不同于其部件的總和”。例如，我們對一朵花的感知，并非純粹單單從對花的形狀、顏色、大小等感官資訊而來，還包括我們對花過去的經(jīng)驗(yàn)和印象，加起來才是我們對一朵花的感知。

       格式塔心理學(xué)家認(rèn)為這些原則之所以存在，是因?yàn)?strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;">頭腦具有天生的傾向，可以根據(jù)某些規(guī)則感知刺激中的模式。（是不是覺得hin神奇）

       比如，這是著名的“人臉花瓶幻覺”圖。如果以黑色為背景，白色為圖形，則是一個(gè)花瓶；如果以黑色為圖形，白色為背景，則是兩個(gè)人的側(cè)臉。它也反映了圖形和背景對一幅圖的影響。

二、格式塔原理分析

1、接近性原理
接近性原理說的是物體之間的相對距離會影響我們感知它是否以及如何組織在一起?；ハ嗫拷ㄏ鄬τ谄渌矬w）的物體看起來屬于一組，而那些距離較遠(yuǎn)的則自動(dòng)劃為組外。             

接近性原理的應(yīng)用1--將相關(guān)元素彼此靠近放置

使用不同數(shù)量的空格來合并或分離元素是傳達(dá)有意義的分組的關(guān)鍵。例如，在Ant Design的標(biāo)題區(qū)域中，“ 搜索”功能與站點(diǎn)的主要導(dǎo)航位于同一行。但是，主導(dǎo)航和搜索之間的多余空格表示它們屬于不同的組，因此具有獨(dú)特的功能。對于使“ 搜索”功能在主菜單的其余部分中脫穎而出，此空格至關(guān)重要。

但是，在較小的屏幕上，無法保持此間距。為了避免將這些區(qū)域視為一個(gè)整體，頁面收縮寬度的時(shí)候，搜索后的文字隱藏了。

接近性原理的應(yīng)用2--構(gòu)建清晰的結(jié)構(gòu)

應(yīng)具有固定或鎖頭標(biāo)題的網(wǎng)站特別可以從使用獨(dú)特的背景顏色或清晰的邊框中受益，從而有效地將標(biāo)題與下面滾動(dòng)的頁面內(nèi)容區(qū)分開。此外，大頁腳的單一統(tǒng)一背景色  可有效地表示該區(qū)域中的所有鏈接都屬于一個(gè)組。

創(chuàng)建清晰的邊界是一種強(qiáng)大的視覺提示，可以壓倒其他分組原則，例如接近性或相似性。因此，當(dāng)需要包含幾種不同類型的UI元素或無法調(diào)整對象之間的空白量時(shí)，它是一種強(qiáng)大的工具。我們做頁面時(shí)如果需要把兩個(gè)元素放成一組與其他元素區(qū)分，那么我們可以用線框畫出邊界來達(dá)到目的。

2、相似性原理

如果其它因素相同，那么相似的物體看起來歸屬于一組。接下來從形狀、顏色、尺寸上來說明相似性原理，這也就是我們平時(shí)做視覺設(shè)計(jì)時(shí)的原理，比如我們設(shè)計(jì)稿宣講時(shí)可能會被開發(fā)、產(chǎn)品以及測試同學(xué)問到“為什么用這個(gè)形狀？為什么這里用這個(gè)顏色？為什么這兩個(gè)尺寸不一致？等等，細(xì)細(xì)體會這個(gè)相似性原理就會給我們答案，讓我們在畫設(shè)計(jì)稿時(shí)能夠有理有據(jù)。

A相似性原理之形狀：

在上圖中，我們頭腦中自然而然的會分成“四列”，也就是圓形一列，三角形一列，然后再圓形一列，三角形一列，而不會看成“三行”

B相似性原理之顏色：

應(yīng)用共享的顏色來表示某些項(xiàng)目是相關(guān)的，因此可能具有相似的功能，這很有效。通用顏色往往比其他特征（例如形狀）更加突出，因此可以用于組合不同類型的元素并傳達(dá)它們確實(shí)相關(guān)。        

在用戶界面設(shè)計(jì)中，顏色通常用于指示常用功能。例如，使用單個(gè)鏈接顏色作為與用戶交流可點(diǎn)擊內(nèi)容，鏈接顏色應(yīng)僅保留給交互式文本和其他可單擊元素，因?yàn)橛脩魰庾R到所有具有此特征的項(xiàng)目都是相關(guān)的，并且以相同的方式工作。因此，鏈接顏色不應(yīng)用于關(guān)鍵字，不可點(diǎn)擊的標(biāo)題或?qū)嶋H上不可點(diǎn)擊的附近圖標(biāo)。

如上圖，就是一個(gè)用色的反面例子，“ 消息中心”中的所有按鈕均為綠色，因此用戶必須花時(shí)間確定哪個(gè)是提交表單的主要按鈕。（此外，“ 提交”按鈕離消息區(qū)域很遠(yuǎn)，并且根據(jù)Fitts的定律，這種缺乏接近性也會降低用戶的速    度。）

相同顏色的按鈕將被視為具有相同的重要性級別。因此，應(yīng)為主要操作性按鈕保留單獨(dú)的顏色，以幫助它們在輔助按鈕中脫穎而出。

C相似性原理之大?。?strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;">大小也可以用來表示關(guān)系。大小相似的對象可能被認(rèn)為是相關(guān)的，通常具有相同的重要性。

在用戶界面中，我們經(jīng)常使用大小來強(qiáng)調(diào)內(nèi)容或按鈕中最重要的部分。相同的大小表示相同的視覺突出度，并且在所有其他條件相同的情況下，將共享該屬性的所有元素連接在一起。一致地使用大小會創(chuàng)建視覺層次結(jié)構(gòu)，并使頁面易于掃描，因?yàn)槿藗兛梢粤⒓纯吹讲⒗斫膺@些類型分組。

例如，在產(chǎn)品列表頁面中，每個(gè)單獨(dú)的產(chǎn)品列表都以相同的大?。ê拖嗤男螤睿╋@示。這種一致的視覺樣式告訴我們該區(qū)域中的所有物品都是產(chǎn)品。共享大小將其與其他不同的UI元素分開。當(dāng)某項(xiàng)商品在此列表中以不同的大小或形狀出現(xiàn)時(shí)，就會突出顯示為不屬于產(chǎn)品分組。下面這個(gè)產(chǎn)品集合的促銷以單個(gè)產(chǎn)品列表大小的兩倍顯示。

下面是我最開始嘗試的招聘系統(tǒng)首頁的改版：

根據(jù)上面的相似性原理和接近性原理就可以很容易看出來，這個(gè)頁面結(jié)構(gòu)和邏輯不清晰：

1.待處理和招聘日程兩個(gè)模塊之間的區(qū)分不夠清晰：因?yàn)檫@兩個(gè)模塊右側(cè)應(yīng)用了同樣的形狀和顏色的按鈕（相似性原理），讓用戶在心理上產(chǎn)生聯(lián)想，同時(shí)這兩個(gè)模塊之間只靠間距來區(qū)分，區(qū)分的太弱了（接近性原理）

2.招聘日程頭部日期與下面的面試安排卡片聯(lián)系太弱：因?yàn)槊嬖嚳ㄆ昧朔浅?qiáng)的邊界區(qū)分的線條（接近性原理-構(gòu)建清晰的結(jié)構(gòu)）確實(shí)在面試模塊之間構(gòu)建了清晰的結(jié)構(gòu)，與此同時(shí)卡片與頭部的日期之間看起來沒有什么關(guān)聯(lián)。

3.首頁的選中效果太弱，分析這個(gè)頁面的層級，左側(cè)首頁選中才應(yīng)該是最重的，能讓用戶第一眼就知道在系統(tǒng)中的位置，很顯然目前來看很容易忽視首頁這個(gè)位置，關(guān)注點(diǎn)被吸引到了快捷入口。這并不是我們想要傳達(dá)給用戶的。

根據(jù)格式塔原理中的相似性原理和接近性原理，對頁面的結(jié)構(gòu)進(jìn)行了調(diào)整，就看起來清晰多了。

所以，我們在制作完設(shè)計(jì)稿后，可以應(yīng)用格式塔原理，分析下最終呈現(xiàn)給用戶的結(jié)構(gòu)和邏輯是否清晰。而這也是做視覺的理由和底氣。

3.連續(xù)性原理

視覺傾向于感知連續(xù)的形式而不是離散的碎片。

連續(xù)理解起來是很簡單的，但連續(xù)卻解決了非常復(fù)雜的問題。通過找到非常微小的共性將兩個(gè)不同的環(huán)連接成一個(gè)整體。在引導(dǎo)頁中經(jīng)常會用到這個(gè)。

    

 4、封閉性原理

視覺系統(tǒng)自動(dòng)嘗試將敞開的圖形關(guān)閉起來，從而將其感知為完整的物體而不是分散的碎片。

閉合可以實(shí)現(xiàn)統(tǒng)一整體，這不難理解。但是有一個(gè)非常有趣的現(xiàn)象值得我們?nèi)ビ^察和思考，就是不閉合時(shí)候也會實(shí)現(xiàn)統(tǒng)一的整體，更確切的說，這種現(xiàn)象是一種不完全的關(guān)閉。這些圖形與設(shè)計(jì)給人以簡單，輕松、自由的感覺。所以，完全的閉合是沒有必要的。最著名的應(yīng)用便是蘋果公司的logo，咬掉的缺口喚起人們的好奇、疑問，給人巨大想象空間。

5、對稱性原理

我們傾向于分解復(fù)雜的場景來降低復(fù)雜度。

6、主體/背景原理

我們的大腦將視覺區(qū)域分為主體和背景。主體包括一個(gè)場景中占據(jù)我們主要注意力的所有元素，其余則是背景。這個(gè)原理經(jīng)常會在海報(bào)設(shè)計(jì)中應(yīng)用，這也是為什么我們做海報(bào)，做平面時(shí)，一定要制作好背景，背景的氛圍很重要。

情感化設(shè)計(jì)在我們的決策過程中起著至關(guān)重要的作用，因?yàn)榧尤肭楦谢脑O(shè)計(jì)可以改變與產(chǎn)品交互的人的整體現(xiàn)實(shí)。

人類是一種情緒驅(qū)動(dòng)的物種，我們選擇某些產(chǎn)品并不是因?yàn)樗鼈冇幸饬x，而是因?yàn)槲覀冋J(rèn)為它們會讓我們感受到不一樣的感覺。也正因如此，在未來的界面將在產(chǎn)品設(shè)計(jì)的基礎(chǔ)上使用情感的概念，人們使用的經(jīng)驗(yàn)將基于智商（IQ）和情商（EQ）。

本文試圖展望未來，看看我們將在未來十年內(nèi)設(shè)計(jì)哪些接口。我們將仔細(xì)研究三種情感化界面設(shè)計(jì)的互動(dòng)：

• 語音

• 增強(qiáng)現(xiàn)實(shí)（AR）

• 虛擬現(xiàn)實(shí)（VR）

未來情感化界面的實(shí)際例子

界面如何？即使我們還沒有回答這個(gè)問題，我們也可以討論接口可能具有哪些特性。在我看來，我確信我們最終將擺脫充滿菜單，面板，按鈕的接口，并轉(zhuǎn)向更“自然的界面”，也就是情感化的界面。未來的界面不會被鎖定在物理屏幕上，而是會集合五種感官的力量。因此，他們需要較少的學(xué)習(xí)曲線，理想情況下，根本沒有學(xué)習(xí)曲線。

情商情緒在商業(yè)中的重要性

除了使體驗(yàn)更自然并減少學(xué)習(xí)曲線之外，為情感設(shè)計(jì)還為產(chǎn)品創(chuàng)造者帶來了另一個(gè)好處：它提高了用戶對產(chǎn)品的采用率?？梢岳萌祟悓η榫w的行動(dòng)能力來創(chuàng)造更好的用戶參與度。

真實(shí)的語音界面

使用語音作為主要界面的產(chǎn)品正變得越來越流行。我們中的許多人使用Amazon Echo和Apple Siri進(jìn)行日常活動(dòng)，例如設(shè)置鬧鐘或預(yù)約。但是，目前市場上可用的大多數(shù)語音交互系統(tǒng)仍然具有自然的局限性：它們不會考慮用戶的情緒。因此，當(dāng)用戶與Google Now等產(chǎn)品進(jìn)行互動(dòng)時(shí)，他們對與機(jī)器進(jìn)行通信具有強(qiáng)烈的溝通感 - 而不是真正的人。系統(tǒng)可預(yù)測地響應(yīng)，并且他們的響應(yīng)是腳本化的，與這樣的系統(tǒng)進(jìn)行有意義的對話是不可能的。

但是目前市場上有一些完全不同的系統(tǒng)，其中一個(gè)是Xiaoice，一個(gè)社交聊天機(jī)器人應(yīng)用程序。這個(gè)應(yīng)用程序的核心是情感計(jì)算框架，該應(yīng)用程序的基礎(chǔ)是，首先與用戶建立情感聯(lián)系。Xiaoice可以動(dòng)態(tài)識別情緒，并在與相關(guān)響應(yīng)的長時(shí)間對話中吸引用戶。結(jié)果，當(dāng)用戶與Xiaoice交互時(shí)，就像是與真人交談一樣。

Xiaoice的局限在于它是一個(gè)基于文本的聊天應(yīng)用程序。很明顯，你可以通過基于語音的交互來實(shí)現(xiàn)更強(qiáng)大的效果（人聲具有不同的特征，例如可以傳達(dá)強(qiáng)大的情感譜的音調(diào)）。

我們中的許多人已經(jīng)在電影“她”（2013）中看到了基于語音的互動(dòng)的力量。Theodore愛上了Samantha（一個(gè)復(fù)雜的操作系統(tǒng)）。這也使我們相信，未來基于語音的系統(tǒng)的主要目的之一將是用戶的虛擬伴侶。這部電影最有趣的事情是西奧多沒有薩曼莎的視覺形象，他只有她的聲音。要建立這種親密關(guān)系，必須產(chǎn)生反映一致性格的回應(yīng)。這將使系統(tǒng)既可預(yù)測又值得信賴。

技術(shù)離Samantha這樣的系統(tǒng)還有很長的路要走，但我相信語音優(yōu)先的多模式接口將是語音接口發(fā)展的下一章。這樣的接口將使用語音作為主要交互方式，并在創(chuàng)建和建立連接感的上下文中提供附加信息。

為Brain.ai設(shè)計(jì)的語音界面示例（圖片來源：Gleb Kuznetsov）

AR體驗(yàn)的演變

增強(qiáng)現(xiàn)實(shí)（AR）被定義為現(xiàn)實(shí)世界之上的數(shù)字覆蓋，并將我們周圍的對象轉(zhuǎn)換為交互式數(shù)字體驗(yàn)。我們的環(huán)境變得更加“智能”，用戶對手指尖上的“有形”物體產(chǎn)生幻覺，從而在用戶和產(chǎn)品（或內(nèi)容）之間建立了更深層次的聯(lián)系。

使用AR重新構(gòu)想現(xiàn)有概念

AR的獨(dú)特之處在于它為我們提供了與數(shù)字內(nèi)容進(jìn)行物理交互的非凡能力。它允許我們看到以前無法看到的東西，這有助于我們更多地了解我們周圍的環(huán)境。此AR屬性可幫助設(shè)計(jì)人員使用熟悉的概念創(chuàng)建新的關(guān)卡體驗(yàn)。

例如，通過使用移動(dòng)AR，可以創(chuàng)建新級別的飛行體驗(yàn)，允許乘客查看有關(guān)其班級或當(dāng)前航班進(jìn)度的詳細(xì)信息：

AR在空中客車A380的飛行體驗(yàn)中。（圖片來源：Gleb Kuznetsov）

AR幫助我們找到通過空間的方式，并一目了然地獲得所需的信息。例如，AR可用于為您當(dāng)前的位置創(chuàng)建豐富的上下文提示。被稱為技術(shù)SLAM（小號 imultaneous 大號 ocalization 甲 ND 中號 apping）非常適合此。SLAM允許實(shí)時(shí)映射環(huán)境，并且還可以將多媒體內(nèi)容放入環(huán)境中。

為用戶提供價(jià)值的機(jī)會很多。例如，用戶可以將他們的設(shè)備指向建筑物，并在其屏幕上了解更多信息。它可以顯著減少工作量，并通過允許導(dǎo)航和訪問實(shí)現(xiàn)輕松的情感體驗(yàn)。

在上下文中提供其他信息（圖片來源：Gleb Kuznetsov）

我們周圍的環(huán)境（例如墻壁或地板）可以成為交互場景，過去僅限于我們的智能手機(jī)和計(jì)算機(jī)。

你在下面看到的概念正是如此; 它使用物理對象（白墻）作為通常使用數(shù)字設(shè)備傳送的內(nèi)容的畫布：

交互式墻的概念 - 在現(xiàn)實(shí)世界之上的數(shù)字覆蓋。（圖片來源：Gleb Kuznetsov）

避免信息過載

我們中的許多人都看到了名為“超現(xiàn)實(shí)”的視頻。在這段視頻中，物理和數(shù)字世界已合并，用戶被大量信息所淹沒。

技術(shù)允許我們同時(shí)顯示幾個(gè)不同的對象。當(dāng)它被誤用時(shí)，很容易造成過載。

信息過載是一個(gè)嚴(yán)重的問題，對用戶體驗(yàn)產(chǎn)生負(fù)面影響，避免它將成為AR設(shè)計(jì)的目標(biāo)之一。精心設(shè)計(jì)的應(yīng)用程序?qū)⑹褂肁I的強(qiáng)大功能過濾掉與用戶無關(guān)的元素。

高級個(gè)性化

當(dāng)系統(tǒng)實(shí)時(shí)地根據(jù)用戶的需求和期望來管理內(nèi)容或功能時(shí)，就會發(fā)生數(shù)字體驗(yàn)的個(gè)性化。許多現(xiàn)代移動(dòng)應(yīng)用程序和網(wǎng)站使用個(gè)性化概念來提供相關(guān)內(nèi)容。例如，當(dāng)您訪問Netflix時(shí)，您看到的電影列表會根據(jù)您的興趣進(jìn)行個(gè)性化。

AR眼鏡允許創(chuàng)建新的個(gè)性化水平，即“高級”個(gè)性化水平。由于系統(tǒng)“看到”用戶看到的內(nèi)容，因此可以利用此信息提出相關(guān)建議或在上下文中提供其他信息。想象一下，你很快就會戴上AR眼鏡，轉(zhuǎn)移到你視網(wǎng)膜的信息將根據(jù)你的需要量身定制。

從增強(qiáng)現(xiàn)實(shí)走向虛擬現(xiàn)實(shí)，創(chuàng)造沉浸式體驗(yàn)

AR體驗(yàn)具有自然的局限性。作為用戶，我們在內(nèi)容和內(nèi)容之間有明確的界限; 這條線將一個(gè)世界（AR）與另一個(gè)世界（現(xiàn)實(shí)世界）分開。這條線引起了AR世界顯然不真實(shí)的感覺。

您當(dāng)然可能知道如何解決這個(gè)限制，即使用虛擬現(xiàn)實(shí)（VR）。VR并不是一種新的媒介，但只是在過去的幾年里，技術(shù)已經(jīng)達(dá)到了允許設(shè)計(jì)師創(chuàng)造身臨其境體驗(yàn)的程度。

沉浸式VR體驗(yàn)消除了現(xiàn)實(shí)世界與數(shù)字之間的障礙。當(dāng)你戴上VR耳機(jī)時(shí)，你的大腦很難處理你收到的信息是否真實(shí)。關(guān)于VR體驗(yàn)如何在最近的將來看起來的想法在電影“Ready Player One”中有很好的解釋：

以下是設(shè)計(jì)人員在創(chuàng)建沉浸式虛擬環(huán)境時(shí)需要記住的內(nèi)容：

1.寫一個(gè)故事

有意義的VR有一個(gè)強(qiáng)大的故事的核心。這就是為什么在你開始設(shè)計(jì)VR環(huán)境之前，你需要為用戶旅程寫一個(gè)敘述。一個(gè)稱為“故事板”的強(qiáng)大工具可以幫助您。使用故事板，可以創(chuàng)建故事并檢查所有可能的結(jié)果。當(dāng)您檢查故事時(shí)，您將看到何時(shí)以及如何使用視覺和音頻提示來創(chuàng)建身臨其境的體驗(yàn)。

2.與角色建立更深層次的連接

為了讓用戶相信VR中的所有內(nèi)容都是真實(shí)的，我們需要?jiǎng)?chuàng)建與用戶所扮演的角色的連接。最明顯的解決方案之一是在虛擬場景中包含用戶手的表示。這種表示應(yīng)該是實(shí)際的手 - 而不僅僅是一個(gè)操縱的復(fù)制品?？紤]不同的因素（如性別或膚色）至關(guān)重要，因?yàn)樗鼤菇换ジ诱鎸?shí)。

用戶可以看到他或她的手，看他們看起來像一個(gè)角色。（來源：leapmotion）

也可以將現(xiàn)實(shí)生活中的一些對象帶到VR環(huán)境中以創(chuàng)建此連接。例如，一面鏡子。當(dāng)用戶查看鏡像并在反射中看到他們的角色時(shí)，它可以在用戶和虛擬角色之間實(shí)現(xiàn)更真實(shí)的交互。

虛擬現(xiàn)實(shí)用戶會查看虛擬鏡像，并將自己視為VR環(huán)境中的角色。致謝：businesswire。

3.使用手勢代替菜單

在設(shè)計(jì)沉浸式VR體驗(yàn)時(shí)，我們不能依賴傳統(tǒng)的菜單和按鈕。為什么？因?yàn)橥ㄟ^顯示菜單來打破沉浸感相對容易。用戶會知道他們周圍的一切都不真實(shí)。設(shè)計(jì)師不需要使用傳統(tǒng)菜單，而是需要依賴手勢。設(shè)計(jì)界仍然在定義使用手勢的通用語言，參與這項(xiàng)活動(dòng)是有趣和令人興奮的運(yùn)動(dòng)。棘手的部分是讓用戶熟悉并可預(yù)測手勢。

Hovercast VR菜單試圖將現(xiàn)有的交互概念重用于VR體驗(yàn)。不幸的是，這個(gè)概念可以打破沉浸感。新媒體需要新的互動(dòng)模式。

4.與VR環(huán)境中的元素交互

要?jiǎng)?chuàng)建一個(gè)感覺真實(shí)的環(huán)境，我們需要讓用戶能夠與該現(xiàn)實(shí)中的對象進(jìn)行交互。理想情況下，環(huán)境中的所有對象都可以以允許用戶觸摸和檢查它們的方式進(jìn)行設(shè)計(jì)。這些物體將充當(dāng)刺激，并將幫助您創(chuàng)造更加身臨其境的體驗(yàn)。觸摸對于探索環(huán)境非常重要; 嬰兒在頭幾天獲得的最重要信息是通過觸摸獲得的。

5.VR

VR中分享情感有一個(gè)真正的機(jī)會，成為一個(gè)新的社會體驗(yàn)水平。但為了實(shí)現(xiàn)它，我們需要解決一個(gè)重要問題，即將非語言線索帶入交互中。

當(dāng)我們與其他人互動(dòng)時(shí)，我們獲得的信息的重要部分來自肢體語言。驚喜，厭惡，憤怒 - 所有這些情緒都在我們的面部表情中，在面對面的互動(dòng)中，我們從眼睛區(qū)域推斷信息。當(dāng)人們在VR環(huán)境中進(jìn)行交互以創(chuàng)建更真實(shí)的交互時(shí)，提供此信息非常重要。

好消息是頭戴式設(shè)備（HMD）將很快涵蓋情感識別。幾乎任何人與人之間的互動(dòng)都將受益于VR中的面部表情。

在VR空間分享情感（來源：MITReview的 Rachel Metz ）

6.為VR環(huán)境設(shè)計(jì)聲音和音樂適合

音頻是沉浸式體驗(yàn)的重要組成部分。如果不為環(huán)境設(shè)計(jì)聲音，就不可能創(chuàng)造出真正身臨其境的體驗(yàn)。聲音既可以用作背景元素（即風(fēng)的環(huán)境聲音），也可以用作方向性的。在后一種情況下，聲音可以用作提示 - 通過播放方向性（聲音來自哪里）和距離（可以將用戶的注意力集中在特定元素上）。

在為VR設(shè)計(jì)音頻時(shí)，制作聲音3D至關(guān)重要。2D聲音不能很好地用于VR，因?yàn)樗挂磺卸继健?D聲音是您可以在周圍的各個(gè)方向聽到的聲音 - 前方，后方，上方和下方 - 遍布整個(gè)地方。您不需要專門的耳機(jī)來體驗(yàn)3D聲音; 可以使用HMD的標(biāo)準(zhǔn)立體聲揚(yáng)聲器來創(chuàng)建它。

頭部跟蹤是良好聲音設(shè)計(jì)的另一個(gè)重要方面。讓聲音以逼真的方式表現(xiàn)至關(guān)重要。這就是為什么當(dāng)用戶移動(dòng)他的頭部時(shí)，聲音應(yīng)該根據(jù)頭部運(yùn)動(dòng)而改變。

7.預(yù)防暈車

動(dòng)是VR的主要痛點(diǎn)之一，這是一種在視覺感知運(yùn)動(dòng)和前庭系統(tǒng)的運(yùn)動(dòng)感之間存在分歧的情況，而讓用戶在體驗(yàn)VR時(shí)保持舒適至關(guān)重要。

有兩種流行的理論導(dǎo)致VR中的暈動(dòng)?。?

• “感覺沖突”理論：根據(jù)這一理論，暈動(dòng)病的發(fā)生是由于預(yù)期的運(yùn)動(dòng)和實(shí)際經(jīng)歷的運(yùn)動(dòng)之間的感覺上的不一致。

• “眼動(dòng)”理論：在“ VR書：虛擬現(xiàn)實(shí)的以人為本設(shè)計(jì) ”一書中，杰森杰拉德提到暈動(dòng)病的發(fā)生是因?yàn)楸３謭鼍皥D像在視網(wǎng)膜上穩(wěn)定所需的不自然的眼球運(yùn)動(dòng)。

以下是一些提示，可以幫助您防止用戶接觸到病箱：

• 身體運(yùn)動(dòng)應(yīng)與視覺運(yùn)動(dòng)相匹配。有時(shí)即使是小的視覺抖動(dòng)也會對體驗(yàn)產(chǎn)生巨大的負(fù)面影響。

• 讓用戶在移動(dòng)場景之間休息（這在VR體驗(yàn)非常動(dòng)態(tài)時(shí)尤為重要）。

• 減少虛擬旋轉(zhuǎn)。

結(jié)論

當(dāng)我們考慮產(chǎn)品設(shè)計(jì)的現(xiàn)代狀態(tài)時(shí)，很明顯我們只是處于冰山一角，因?yàn)槲覀儍H限于平面屏幕。

我們正在目睹人機(jī)交互（HCI）的根本轉(zhuǎn)變 - 重新思考數(shù)字體驗(yàn)的整體概念。在接下來的十年中，設(shè)計(jì)師將打破玻璃（我們今天所知的移動(dòng)設(shè)備時(shí)代）并轉(zhuǎn)向未來的接口 - 復(fù)雜的語音接口，先進(jìn)的AR和真正的沉浸式VR。當(dāng)談到創(chuàng)造一種新的體驗(yàn)時(shí)，必須要明白我們唯一的邊界是我們的大腦告訴我們它必須始終如一。

寫在前面

 

B端產(chǎn)品和C端產(chǎn)品作為兩種很不一樣的產(chǎn)品形態(tài)一直服務(wù)著廣大的用戶。它們各有各的作用，有很多B端產(chǎn)品還是一個(gè)非常龐大的系統(tǒng)工程，甚至有很多的公司就是專注于開發(fā)B端產(chǎn)品，我從業(yè)以來曾經(jīng)參與過很多的（兩位數(shù)）B端產(chǎn)品項(xiàng)目，有的是從0到1的開發(fā)，也有的是在原基礎(chǔ)上更新優(yōu)化，下面就從我個(gè)人的設(shè)計(jì)經(jīng)驗(yàn)整理出一些觀點(diǎn)。

 

什么是B端和C端產(chǎn)品

概念：B端面向商家和公司，組織；C端面向普通的大眾用戶； 

B端是指：business--泛指生意，商業(yè)，公司和組織； To B即是面向商家和公司，組織，是給專職專業(yè)的用戶使用的產(chǎn)品，例如微信公眾平臺給制定的公眾號持有人使用，某公司的指揮調(diào)度系統(tǒng)，某停車管理系統(tǒng)，以及相關(guān)的后臺管理系統(tǒng)等。C端是指：consumer--消費(fèi)者，顧客，用戶，是指被設(shè)計(jì)為能給普通大眾使用的產(chǎn)品；To C即是面向普通的老百姓用戶，例如微博，QQ，微信，新聞客戶端，淘寶等；

  

幾乎男女老少都會使用的微信

面向?qū)Ｂ殟徫蝗藛T使用的后臺管理系統(tǒng)

兩者的不同點(diǎn)

C端產(chǎn)品追求極致的體驗(yàn)，；B端產(chǎn)品追求簡約、高效的完成工作 

C端產(chǎn)品是為了滿足用戶某一主要的、固定 的核心需求，因此設(shè)計(jì)的目標(biāo)是圍繞著這個(gè)核心需求，簡單直接解決用戶的需求，追求的是極致的用戶體驗(yàn)，因?yàn)閷端產(chǎn)品而言，產(chǎn)品不好用，體驗(yàn)不好，用戶就流失了，也就沒有盈利的可能了。

B端產(chǎn)品的目標(biāo)是幫助用戶把大量的復(fù)雜的工作，整理歸納，使得他們能高效便捷的完成工作，追求的是產(chǎn)品的簡約實(shí)用，提高效率，能很好的處理工作，有時(shí)候?yàn)榱诉_(dá)成業(yè)務(wù)目標(biāo)，甚至不惜犧牲部分用戶體驗(yàn)。

To B端界面的設(shè)計(jì)應(yīng)該要重點(diǎn)注意什么

很多新手設(shè)計(jì)師在接到新的需求的時(shí)候會沒有頭緒，不知道如何開展工作，在不了解業(yè)務(wù)的前提下很多時(shí)候被產(chǎn)品牽著鼻子走。那么問題來了，是拿到產(chǎn)品給過來的原型之后就開始設(shè)計(jì)了嗎？又或者沒有原型只有一些簡單的描述，又該如何開展呢。以下是我的幾個(gè)建議

1，要了解業(yè)務(wù)

因?yàn)锽類產(chǎn)品不同于C類產(chǎn)品，并不是大多數(shù)人日常都會很普及用到的，所以就需要設(shè)計(jì)師主動(dòng)的去了解行業(yè)，了解業(yè)務(wù)需求，不同的行業(yè)有不同流程和規(guī)則，甚至是一些特殊的需求；啟動(dòng)用戶群體調(diào)研和用戶使用場景調(diào)研，有條件的可以開展用戶問卷調(diào)研甚至面對面訪談，整理出用戶的使用流程，調(diào)研后要求設(shè)計(jì)師自己能非常清楚這個(gè)產(chǎn)品的作用、用戶人群、和在特定的使用場景下的使用目標(biāo)、和不同情境下的操作流程等。

 

2，交互流程設(shè)計(jì)

B端產(chǎn)品往往包含了比較復(fù)雜的業(yè)務(wù)，那在復(fù)雜的業(yè)務(wù)背景下如何通過設(shè)計(jì)來提高用戶的工作效率，這就對設(shè)計(jì)師有比較高的要求。在交互流程上要整理出一些操作路徑，要考慮它們的層級關(guān)系，先后順序，行業(yè)習(xí)慣等。通過操作體驗(yàn)給用戶留下明確的印象，可以降低用戶的學(xué)習(xí)成本，提高產(chǎn)品的易用性。

 

To B端界面的視覺設(shè)計(jì)

①、界面布局，分固定的和自適應(yīng)的分辨率兩種，一般來說自適應(yīng)的布局比較適合操作和展示內(nèi)容比較多的系統(tǒng)，固定的寬度的分辨率的布局一般多用1200px以適應(yīng)適配更多低分辨率的顯示器，現(xiàn)在的大屏幕設(shè)備非常普及了，很多系統(tǒng)轉(zhuǎn)為以1400px的寬度來設(shè)計(jì)，至于用哪一種的布局要取決于產(chǎn)品的功能了。

界面布局視覺上的區(qū)分；當(dāng)我們設(shè)計(jì)一個(gè)系統(tǒng)的主頁到時(shí)候，B端產(chǎn)品通常會分為很多功能模塊，即便產(chǎn)品經(jīng)理會提供原型給UI設(shè)計(jì)師，他們有時(shí)候往往會在原型按照他們的想法來布局，這時(shí)候設(shè)計(jì)師需要主動(dòng)地去了解業(yè)務(wù)去弄清楚各個(gè)模塊的主次之分。通過調(diào)研后，整理歸類任務(wù)模塊，按照業(yè)務(wù)流程和規(guī)則來區(qū)分模塊優(yōu)先級。（圖例）

②、顏色，B端系統(tǒng)的界面顏色也非?？季浚凑障到y(tǒng)的功能特性來定，一般常規(guī)的系統(tǒng)界面都是以白色底色配以一種主色調(diào)的顏色來搭配的；第二深色的底色界面，深色界面能起到一種很好的襯托界面內(nèi)容（如大量文字，數(shù)據(jù)，圖形，視頻等）的作用，深色界面再附以一些點(diǎn)線面和光的元素就能營造出一種炫酷的科技感。三是現(xiàn)在流行漸變色，漸變色和純色會給人一種繽紛，輕松愉悅，有活力的年輕的感覺，所以大家在設(shè)計(jì)不同的B端系統(tǒng)界面的時(shí)候要考慮產(chǎn)品的功能性質(zhì)來選擇用顏色。

③、導(dǎo)航，導(dǎo)航可以解決用戶在訪問頁面時(shí)：在哪里，去哪里，怎樣去的問題。一般導(dǎo)航會有「側(cè)欄導(dǎo)航」和「頂部導(dǎo)航」2 種類型。一：側(cè)欄導(dǎo)航：可將導(dǎo)航欄固定在左側(cè)，提高導(dǎo)航可見性，方便頁面之間切換；頂部可放置常用工具，如搜索條、幫助按鈕、通知按鈕等。適用于復(fù)雜的、功能多的中后臺的管理型、工具型網(wǎng)站。二：頂部導(dǎo)航，順應(yīng)了從上至下的正常瀏覽順序，方便瀏覽信息；頂部寬度限制了導(dǎo)航的數(shù)量和文本長度

④、按鈕，通常B端產(chǎn)品分為較多的功能模塊，也對應(yīng)有很多不同的按鈕，在設(shè)計(jì)按鈕的時(shí)候，我們第一要分清楚哪些按鈕對應(yīng)哪些功能，在設(shè)計(jì)上要做出區(qū)分。

⑤、表格，表格的設(shè)計(jì)遵循簡潔和易讀性為主，表里面的文字內(nèi)容是主要的設(shè)計(jì)重點(diǎn)，例如信息層次的明確、對齊的原則等。

⑥、彈窗，不僅有操作反饋的作用，同時(shí)又是一個(gè)承載更多的操作功能的容器，彈窗的設(shè)計(jì)要有規(guī)范性，組件化。

視覺設(shè)計(jì)方面除了常規(guī)的設(shè)計(jì)流程，我想說的是綜合考慮和相關(guān)的系統(tǒng)銜接，體驗(yàn)的一致，視覺風(fēng)格的統(tǒng)一和品牌的建設(shè)。

 

設(shè)計(jì)師還能做些什么

雖然設(shè)計(jì)師和產(chǎn)品經(jīng)理以及開發(fā)已經(jīng)溝通過相關(guān)的業(yè)務(wù)需求，但設(shè)計(jì)師一定要懂得切換角度來看待問題，一方面設(shè)計(jì)師的視角相對注重視覺上和交互上的設(shè)計(jì)細(xì)節(jié)；第二我們也要懂得站在開發(fā)和產(chǎn)品的角度考慮，哪些效果能不能實(shí)現(xiàn)，也是需要我們和開發(fā)同事密切配合的；另一方面要更加注重代入用戶的角度來思考，這樣才能做出合理適用的設(shè)計(jì)，甚至能挖掘新的需求，提出一些很好的建議，給產(chǎn)品和項(xiàng)目帶來加分和利好。

總結(jié)

因?yàn)锽端產(chǎn)品業(yè)務(wù)需求，用戶目標(biāo)，使用場景和用戶群體都不相同，所以設(shè)計(jì)師接到B端產(chǎn)品的設(shè)計(jì)需求時(shí)一定要先了解清楚業(yè)務(wù)，做好前期調(diào)研，其次要多站在用戶的角度來看待和設(shè)計(jì)產(chǎn)品。其實(shí)C端和B端產(chǎn)品，它們都要求要簡單實(shí)用和有效準(zhǔn)確，都是為了更好的滿足用戶的需求，解決用戶的痛點(diǎn)。做好了以上這些關(guān)鍵點(diǎn)，無論遇到多么復(fù)雜的B端產(chǎn)品，我相信所有問題都會迎刃而解。

前兩篇，探討了個(gè)人對交互設(shè)計(jì)價(jià)值觀的理解，以及其對從業(yè)者和用戶的價(jià)值。

這一篇，我們就來探討一下，如何做到之前提到的 4 點(diǎn)價(jià)值觀。

先從“周到“開始。

僅為一家之言。歡迎留言交流，說出你的看法。

01 怎樣算是周到？

本著嚴(yán)謹(jǐn)?shù)膽B(tài)度，先捋一捋概念。

常言道，金杯銀杯，不如百姓口碑。

同理，周不周到，最終還是用戶說了算。那用戶是怎么評判的呢？通常是憑主觀感受。

拿上篇文章中網(wǎng)易號文章編輯頁面的例子來說，因?yàn)椤氨４妗焙汀按娌莞濉惫δ茏龅牟粔蚝?，所以給筆者留下了不夠周到的印象。

翻譯過來，就是，一些體驗(yàn)細(xì)節(jié)，影響了用戶的印象。

《設(shè)計(jì)師要懂心理學(xué)》這本書中有條原則，叫“整體認(rèn)知主要依靠周邊視覺而非中央視覺”。

講的是視覺和 UI 層面的用戶認(rèn)知。就是說，用戶會關(guān)注并不顯眼的邊邊角角的設(shè)計(jì)，而且這些邊邊角角的設(shè)計(jì)會影響用戶對整體設(shè)計(jì)的認(rèn)知和印象。

舉個(gè)例子。假如說，微博信息流頁面的掃一掃圖標(biāo)，在風(fēng)格、大小等方面和其它圖標(biāo)不統(tǒng)一，就會給用戶留下比較糟糕的印象，用戶很可能會覺得微博的設(shè)計(jì)不夠?qū)I(yè)。

這些是 UI 設(shè)計(jì)層面的。在交互設(shè)計(jì)層面，也是類似的道理：體驗(yàn)細(xì)節(jié)會影響用戶的認(rèn)知。

總的來說，至少在常用的交互細(xì)節(jié)上，不要給用戶留下負(fù)面印象，也不要讓用戶產(chǎn)生負(fù)面情緒，避免所有的不周到，才算是周到。

02 如何做到周到？

個(gè)人覺得，最關(guān)鍵的地方，是滿足好小需求。

啥是小需求？

個(gè)人觀點(diǎn)，籠統(tǒng)的講， 小需求是一種共性需求， 主要是一些體驗(yàn)細(xì)節(jié)。比如信息的分類與展示、銜接不同頁面的各種彈窗與提示、對各種狀態(tài)的提示、對各種情況的到位解釋，等等。

有小需求，就有大需求。

所謂大需求，更多是一種個(gè)性需求， 不同的產(chǎn)品，會有不同的大需求。比如短視頻產(chǎn)品，它的大需求會包含視頻的拍攝、上傳、播放等；資訊類產(chǎn)品，它的大需求則包含文章的撰寫、編輯、發(fā)布、查看等。

工作經(jīng)歷，筆者見過一些交互設(shè)計(jì)不夠周到的產(chǎn)品。它們的共同特點(diǎn)就是： 大需求基本上得到了很好的滿足，小需求沒有得到很好的滿足。

這一大段，就圍繞如何更好的滿足小需求來展開。主要建議如下。

1 工欲善其事，必先利其器

筆者有個(gè)客戶，是從事教育行業(yè)的，之前并沒有接觸過互聯(lián)網(wǎng)行業(yè)的產(chǎn)品與設(shè)計(jì)工作。

這位客戶找到筆者的時(shí)候，是想要設(shè)計(jì)一款小程序的界面。當(dāng)時(shí)客戶非常自豪的對筆者說，這個(gè)（原型）是我用墨刀畫的，現(xiàn)學(xué)現(xiàn)做。

說起墨刀，本人也用過。和 Axure 相比，確實(shí)好用太多，在簡潔性和智能性方面，感覺和 Sketch 有異曲同工之處。

關(guān)于墨刀如何好用，網(wǎng)上已經(jīng)有太多溢美之詞。筆者就結(jié)合自己的使用經(jīng)歷，簡單總結(jié)一下：

1 好用，上手快。零基礎(chǔ)，只要會操作常用辦公軟件，簡單學(xué)一下就能上手

2 內(nèi)置主流控件（iOS，安卓，WeUI等），非常方便

3 能在手機(jī)端預(yù)覽。加入鏈接和動(dòng)效后，會很酷

4 能查看頁面之間的跳轉(zhuǎn)邏輯。借助工作流功能，可實(shí)現(xiàn)這一點(diǎn)

以上主要是墨刀自身的優(yōu)點(diǎn)。結(jié)合本段主題，我們再探討一下，對于日常工作，墨刀這把利器有哪些優(yōu)勢。

1.1 可以把更多精力花在創(chuàng)作上

當(dāng)我們不會用一款工具時(shí)，通常會有一些挫敗感。如果必須要用，接著很可能就會有一點(diǎn)焦灼了。

而墨刀，基本上不會讓我們體會到這些感覺。

我們也不用花無謂的時(shí)間去學(xué)習(xí)一些艱難的高深的技法，而是可以把更多的時(shí)間花在“創(chuàng)作”這件事上。

1.2 可以更好的去滿足小需求

部分公司，可能面臨如下情況。

公司沒有專門的交互設(shè)計(jì)師，產(chǎn)品的原型由產(chǎn)品經(jīng)理來畫。產(chǎn)品經(jīng)理本身還兼任項(xiàng)目經(jīng)理。

如果項(xiàng)目又特別趕，客觀上，產(chǎn)品經(jīng)理確實(shí)沒有太多時(shí)間去關(guān)注交互的體驗(yàn)細(xì)節(jié)。

主觀上，如果產(chǎn)品經(jīng)理對這些交互細(xì)節(jié)的興趣或重視程度不足、同時(shí)產(chǎn)品經(jīng)理上面的決策層也不去抓這些體驗(yàn)細(xì)節(jié)，最終的結(jié)果，就是產(chǎn)品的原型上可能會丟失很多體驗(yàn)細(xì)節(jié)。

筆者就有類似的經(jīng)歷。

一款 App，產(chǎn)品經(jīng)理用 Axure 畫的原型。評審或宣講需求的時(shí)候，大家都是在電腦或會議室大屏幕上來看這個(gè)原型，同時(shí)所有人最先關(guān)注的是大需求。

理解完大需求，會有部分同學(xué)就大需求提出自己的看法或建議。最后，才會有部分同學(xué)就小需求指出不足并提出建議。

受限于職責(zé)、時(shí)間等各種因素，大家也不可能針對小需求提出太多建議。結(jié)果就是，仍然會有相當(dāng)數(shù)量的小需求被遺漏，或者沒有被很好的滿足。

墨刀有兩個(gè)功能，可以較好的規(guī)避這些問題。一個(gè)是工作流功能，一個(gè)是手機(jī)端預(yù)覽功能。

工作流功能，類似流程圖，即把所有頁面以合乎邏輯的方式鏈接起來?？陀^上，會促使我們畫出所有包含小需求的頁面，包括彈窗、狀態(tài)提示等。

支持多人的手機(jī)端預(yù)覽功能，使得我們在手機(jī)上，可以通過點(diǎn)擊等方式來模擬體驗(yàn)這款 App。這樣的環(huán)境下，我們會更容易理解大需求，也更容易發(fā)現(xiàn)小需求存在的問題。

所以，個(gè)人的建議，就是用墨刀來畫原型，同時(shí)把工作流和多人手機(jī)端預(yù)覽（針對 App、小程序）這兩項(xiàng)，作為硬性標(biāo)準(zhǔn)。

2 去用去感受

一款產(chǎn)品，在體驗(yàn)或使用時(shí)，非常容易發(fā)現(xiàn)問題。

因?yàn)檫@時(shí)候，我們可以松弛下來，把自己切換成普通用戶。忘掉所有費(fèi)腦子的需求和設(shè)計(jì)原理，只依賴經(jīng)驗(yàn)和直覺來用這款產(chǎn)品。我們的主觀感受，會告訴我們，這款產(chǎn)品的交互，到底周不周到。

據(jù)陸樹燊的《微信團(tuán)隊(duì)的實(shí)驗(yàn)室文化》一文顯示，張小龍?jiān)u審微信的功能，不看原型圖，不看設(shè)計(jì)稿，也不看 Demo，而是體驗(yàn)前后臺代碼開發(fā)好后的產(chǎn)品。這就意味著，如果一個(gè)功能在給到用戶前有 N 個(gè)方案，就會有 N 個(gè)方案對應(yīng)的前后臺代碼。

一定程度上，微信團(tuán)隊(duì)就是通過這種在正式發(fā)布前反復(fù)試錯(cuò)、不斷打磨的方式，最終給用戶提供了優(yōu)秀的交互體驗(yàn)。

估計(jì)，絕大部分團(tuán)隊(duì)和公司，都做不到微信這樣，開發(fā) N 個(gè)版本，并去一一體驗(yàn)和比較這 N 個(gè)版本。

無法體驗(yàn)已經(jīng)開發(fā)好的 N 個(gè)版本。但是，在真實(shí)的設(shè)備上體驗(yàn) N 個(gè)原型，我們還是可以做到的。

原型雖然沒有開發(fā)好的產(chǎn)品那么順暢和流暢，但是，如果用墨刀在手機(jī)端體驗(yàn)一款加了鏈接和動(dòng)效的 App 原型，一樣可以發(fā)現(xiàn)很多問題。

不過，根據(jù)經(jīng)歷和觀察，筆者發(fā)現(xiàn)，我們?nèi)祟悾遣幌矚g體驗(yàn)原型的。

想一想，平常工作中，我們可能會樂此不疲的去體驗(yàn)開發(fā)好的測試版產(chǎn)品。但對于原型，大部分時(shí)候，都是匆匆忙忙就過掉了。

個(gè)人有個(gè)猜測，就好像人類喜歡逗貓遛狗、卻不太喜歡逗桌子上的模型貓和模型狗一樣，我們?nèi)祟愂遣惶敢饣ㄙM(fèi)太多時(shí)間和精力去和原型這種“假產(chǎn)品”互動(dòng)的。

所以，某種程度上，體驗(yàn)原型，是一種反人性的行為。

但卻是一種非常經(jīng)濟(jì)和高效的方法。

因?yàn)槭紫?，大部分時(shí)候，我們都是先選中一個(gè)原型方案，然后去設(shè)計(jì)、去開發(fā)；其次，等到開發(fā)好進(jìn)入測試環(huán)節(jié)，這時(shí)候，原型往往就成了測試的標(biāo)準(zhǔn)，依靠測試來優(yōu)化原型是不現(xiàn)實(shí)的。

所以，結(jié)合現(xiàn)狀，綜合來看，小需求能不能得到很好的滿足，很大程度上還是要依靠原型。

也就是說，很有必要對原型進(jìn)行優(yōu)化。具體方法，就是在真實(shí)的設(shè)備上體驗(yàn)原型、反復(fù)體驗(yàn)、多人體驗(yàn)，并進(jìn)行相應(yīng)優(yōu)化。

3 參考設(shè)計(jì)規(guī)范

如前所述，用利器來創(chuàng)作原型，反復(fù)在原型里體驗(yàn)產(chǎn)品，這些強(qiáng)調(diào)的是內(nèi)部力量，即自身的努力。

下面，再談一談外部力量，即外界海量的知識與經(jīng)驗(yàn)。

說起外界知識，除了直接參考其他產(chǎn)品的設(shè)計(jì)以外，大家參考最多的，可能就是《iOS Human Interface Guidelines》和《Material Design》這些設(shè)計(jì)規(guī)范了。

根據(jù)筆者的實(shí)際經(jīng)驗(yàn)，這兩個(gè)來自蘋果和谷歌的設(shè)計(jì)規(guī)范，很多時(shí)候，我們都是拿它們當(dāng)字典用。即哪一點(diǎn)不會或不太確定的時(shí)候，去翻一翻查一查。

雖然這倆規(guī)范很優(yōu)秀，但是卻很難被我們“物盡其用”，因?yàn)樗鼈兊闹R體系過于龐大，有點(diǎn)像一本字典。拿著“字典”里的每一條原則去檢驗(yàn)我們的交互設(shè)計(jì)，這是很難做到的。

但是有一個(gè)設(shè)計(jì)規(guī)范，去非常適合拿來檢驗(yàn)我們的交互設(shè)計(jì)，那就是尼爾森十大可用性原則。

太詳細(xì)的就不贅述了，這里我們再簡單回顧下這十條原則。

1) 狀態(tài)可見

用戶時(shí)刻清楚，正在發(fā)生什么

2) 環(huán)境貼切

營造一個(gè)用戶熟悉的環(huán)境，比如語言、詞語、圖標(biāo)等

3) 用戶可控

控制權(quán)交給用戶，并且多數(shù)時(shí)候，考慮支持撤銷重做

4) 一致性

方方面面的統(tǒng)一，比如文案、視覺、操作等

5) 防錯(cuò)

盡最大可能，幫助用戶，避免用戶犯錯(cuò)

6) 易取：識別比記憶好

通過把組件、按鈕等元素可見化，降低用戶記憶負(fù)擔(dān)

7) 靈活高效

優(yōu)先考慮人數(shù)最多的中級用戶，同時(shí)兼顧高級和初級用戶

8) 易掃：優(yōu)美且簡約

閱讀體驗(yàn)要好，掃視體驗(yàn)也要好；保持簡約和美觀

9) 容錯(cuò)

幫助用戶識別、診斷，并從錯(cuò)誤中恢復(fù)

10) 人性化幫助

日常的使用最好脫離幫助文檔，但有必要提供幫助文檔

個(gè)人非常建議，在日常工作中，把尼爾森十大可用性原則作為一把標(biāo)尺，來時(shí)時(shí)刻刻檢驗(yàn)我們的交互設(shè)計(jì)。

結(jié)語

交互設(shè)計(jì)，在涉及體驗(yàn)細(xì)節(jié)的小需求上，避免所有的不周到，方才是周到。

用利器創(chuàng)作原型，要包含流程圖；多體驗(yàn)原型或產(chǎn)品，以體驗(yàn)結(jié)果為準(zhǔn)、而非討論結(jié)果為準(zhǔn)；參考優(yōu)秀的設(shè)計(jì)規(guī)范，用尼爾森十大可用性原則來檢驗(yàn)原型。

以上三點(diǎn)，可以幫助我們做到交互設(shè)計(jì)的周到。

其中，個(gè)人認(rèn)為，最為核心的是第二點(diǎn)：多體驗(yàn)原型或產(chǎn)品，直到自己覺得周到為止。

因?yàn)?，正如電影《霸王別姬》的一句臺詞所說：人，得自個(gè)兒成全自個(gè)兒。

最近有同學(xué)問老王，UI設(shè)計(jì)師是不是需要交互設(shè)計(jì)能力？

當(dāng)然需要，不懂交互的UI不是好UI~

首先UI設(shè)計(jì)不僅僅需要把功能需求可視化，還需要注重用戶體驗(yàn)。所謂用戶體驗(yàn)，其實(shí)就是用戶與頁面的交互。而在交互設(shè)計(jì)中有很多的方法和理論，如格式塔心理學(xué)、尼爾森可用性原則、7+2法制、3次點(diǎn)擊法制、功能可見性原則、菲茨定律等。他們大多的方法也是共同的。

所以呢，今天老王來說說交互設(shè)計(jì)用的最多的原則——尼爾森十大可用性原則。

1、預(yù)見性原則

很多情況用戶是不知道當(dāng)前狀態(tài)的，所以在適當(dāng)?shù)臅r(shí)間內(nèi)做出反饋很重要。不僅能讓用戶知道情況，還能防止用戶發(fā)生錯(cuò)誤操作。常見反饋有刷新提示、新頁面加載提示、支付提示、下載提示。除了結(jié)果反饋提示外，對于進(jìn)程中的頁面會用進(jìn)度條進(jìn)行表現(xiàn)。

今日頭條APP首頁中，看過的文章標(biāo)題變?yōu)榱嘶疑?、而沒讀過的文章標(biāo)題依舊保留了黑色字體。

2、場景化原則

簡單來說就是讓軟件看起來跟符合真實(shí)世界，還原現(xiàn)實(shí)認(rèn)知。通過直觀的視覺快速傳達(dá)給用戶。

音樂軟件通過模擬現(xiàn)實(shí)唱片并結(jié)合旋轉(zhuǎn)的播放動(dòng)畫，從而降低了學(xué)習(xí)成本，更輕松的理解界面。

3、可控性原則

說白了就是給用戶發(fā)后悔藥，當(dāng)用戶誤操作時(shí)要給用戶提供提供撤銷、取消、重做等相關(guān)功能。買錯(cuò)商品可以無條件包郵退回。

拼多多凸顯了“退貨免運(yùn)費(fèi)”“7無理由退回”服務(wù)，解決了用戶買到不滿意產(chǎn)品的售后擔(dān)心。減少了承擔(dān)運(yùn)費(fèi)的成本，從而促使了用戶快速下單。

4、一致性原則

一個(gè)好的產(chǎn)品從視覺上首先是統(tǒng)一的，色彩、字體、元素保持統(tǒng)一，能加強(qiáng)用戶的記憶力。在交互中同樣如此，頁面結(jié)構(gòu)、操作反饋都需要保持一致性。

QQ首頁列表中不管你點(diǎn)擊那一條目，下一級界面都是由右往左滑出。點(diǎn)擊左上角返回按鈕，會從左往右滑回，體驗(yàn)完全一致；幾乎所有產(chǎn)品進(jìn)入下一層級頁面的交互方式都是如此。

5、防錯(cuò)原則

為了減少用戶錯(cuò)誤的可行性，進(jìn)階是給出錯(cuò)誤反饋是不夠的，用心一點(diǎn)的設(shè)計(jì)師其實(shí)會發(fā)現(xiàn)很多的產(chǎn)品是這樣做的。為了防止錯(cuò)誤的發(fā)生，會進(jìn)行防錯(cuò)設(shè)計(jì)。

比如在發(fā)朋圈時(shí)，點(diǎn)擊返回按鈕出現(xiàn)的提示彈窗。彈出框方式會增加不可逆操作的難度，減少操作刪除帶來的順勢。更人性化的是，提示給出了保留和不保留按鈕選擇，選擇保留退出還可以再次編輯。

6、協(xié)助記憶原則

通過把組件、按鈕及選項(xiàng)可見化，減少用戶的記憶負(fù)荷，讓使用更輕松。在使用過程中不需要記住上一頁面的信息就能完成當(dāng)前頁的操作。

通常更新完APP之后，會出現(xiàn)新功能引導(dǎo)。引導(dǎo)提示能告訴用戶新功能所在的位置和作用。這也是協(xié)助記憶原則的體現(xiàn)。

7、靈活高效原則

好的產(chǎn)品不僅僅需要滿足新用戶，還需要滿足深度用戶。保證第一次使用者，能清晰明白功能。對于老用戶需要提供更高效使用方式。

對用戶重復(fù)使用的功能，提供便捷按鈕。比如叮咚買菜的再次購買。

8、輕量化原則

適當(dāng)?shù)牧舭啄茏岉撁婀δ芡怀?，也能讓視覺更加舒服。精致的圖形元素能給用戶留下好的印象。

很多K12的產(chǎn)品會運(yùn)用IP形象進(jìn)行延展，不僅強(qiáng)化了品牌記憶力，更增強(qiáng)了互動(dòng)感。

9、容錯(cuò)原則

10、人性化幫助原則

好了，以上就老王對尼爾森十大原則的解析。其實(shí)原理很簡單，甚至很多都是很直觀的廢話，但如果不把它們一條條列出來，還是有很多人連這些廢話都做不到。

關(guān)注細(xì)節(jié)，才能成就大事！

米勒定律背景：

1956年經(jīng)美國心理學(xué)家發(fā)表了一篇名為《神奇數(shù)字7》的論文，論文中討論了一維絕對判斷的極限和短期記憶極限之間的關(guān)系：一維絕對判斷的備選數(shù)目與短期記憶極限的數(shù)目大致相當(dāng)，數(shù)字都在 7 左右徘徊。在后來的好些研究雖然也對論文中的一些概念進(jìn)行了改善，但這個(gè)數(shù)字7依然被保留。這也是人們關(guān)于短時(shí)記憶內(nèi)容最早期的研究結(jié)果，現(xiàn)在也普遍適用在設(shè)計(jì)中，也就是現(xiàn)在的米勒定律。

米勒定律定義：

從心理學(xué)的角度來看，人類處理信息的能力是有限度的。人腦在處理信息塊的時(shí)候會受到7±2規(guī)則的限制，即人的大腦最多同時(shí)處理5到9個(gè)信息塊。原因是短期記憶儲存空間的限制，超過9個(gè)信息團(tuán)，將會使得大腦出現(xiàn)錯(cuò)誤的概率大大提高。

思考結(jié)論：人們的短期記憶有限，通常只能記憶7±2信息塊。信息塊越多，人們能記憶的信息精準(zhǔn)度越小，越容易出錯(cuò)。

米勒定律應(yīng)用：

在產(chǎn)品設(shè)計(jì)中，米勒定律可以說是信息內(nèi)容處理的一條規(guī)范準(zhǔn)則。通過減少對信息層級的劃分、歸類分組、輔助記憶等，來提高用戶對信息的高效識別與記憶。在追求極致用戶體驗(yàn)的趨勢下，用戶對信息的預(yù)見與計(jì)劃在產(chǎn)品設(shè)計(jì)中也是極為注重，無論在產(chǎn)品設(shè)計(jì)的初期還是成熟期，合理的信息處理將會大大提高用戶對產(chǎn)品的好感度。

01、控制數(shù)量，減少用戶選擇

人們對信息的記憶處理是有限的，通常信息越多我們將越難以記憶。所以在做產(chǎn)品設(shè)計(jì)的過程中應(yīng)該控制好信息塊的數(shù)量，增強(qiáng)輔助用戶識別與記憶，提高用戶體驗(yàn)。

02、信息分段，輔助用戶記憶

在產(chǎn)品設(shè)計(jì)時(shí)我們經(jīng)常能遇見一連串信息（數(shù)字、文字、段落等）的情況，當(dāng)信息數(shù)量較大的時(shí)候，我們可以采用對信息分段的處理方法，將一連串的信息以7±2個(gè)內(nèi)的信息數(shù)量為一個(gè)段點(diǎn)，輔助用戶記憶。

03、流程分步，優(yōu)化用戶操作

經(jīng)常會遇到信息特別多或者復(fù)雜業(yè)務(wù)場景，特別是在B端產(chǎn)品設(shè)計(jì)。通常我們都會先梳理業(yè)務(wù)流程，然后分步驟處理對應(yīng)的信息。從而減少單屏信息內(nèi)容過多給用戶帶來的急躁，讓用戶每個(gè)步驟都沉浸與當(dāng)前的操作。

04、信息排序，引導(dǎo)用戶記憶

人們在記憶一組多數(shù)據(jù)信息塊的時(shí)候，通常都會對首末的兩個(gè)位置信息塊的記憶會相對比較強(qiáng)，所以在產(chǎn)品設(shè)計(jì)的時(shí)候，需考慮把重要的信息放在首位/末尾位置，引導(dǎo)用戶去記憶該信息。這也就是系列位置效應(yīng)（首因效應(yīng)、近因效應(yīng)）。

A、首因效應(yīng)：指在整個(gè)序列的信息塊中，相比中間位置的信息，人們對最前面的信息記憶更加清晰。

B、近因效應(yīng)：指在整個(gè)序列的信息塊中，相比中間位置的信息，人們對最后面的信息記憶更加清晰。

C、設(shè)計(jì)思考：人們對信息流排序的時(shí)候應(yīng)把重要的元素放置在首位或者末尾。若用戶是長期記憶的的話考慮首因效應(yīng)、短期記憶思考近因效因，人們的記憶不僅受到位置的影響，同時(shí)也受時(shí)間影響，在不同的場景下合理應(yīng)用系列位置效應(yīng).

總結(jié)：

米勒定律在產(chǎn)品設(shè)計(jì)中的應(yīng)用主要是解決信息塊對用戶的記憶問題，合理的信息布局和信息處理可以大大的提高用戶對信息的閱讀和記憶。還可以根據(jù)不同的業(yè)務(wù)場景引導(dǎo)和輔助用戶識別和交互，增強(qiáng)用戶對產(chǎn)品的好感與體驗(yàn)。