轉(zhuǎn)載請注明：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、
UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
如果你是一位經(jīng)驗(yàn)豐富的設(shè)計(jì)師，你應(yīng)該會同意這個觀點(diǎn)：從他人的作品中獲取到靈感并不算偷竊他人的作品。這是屬于在對設(shè)計(jì)進(jìn)行深入研究呀，這也屬于一種設(shè)計(jì)模式呀，而且還遵守設(shè)計(jì)規(guī)范呢。所以，當(dāng)然要以用戶們所熟悉的那些模式來創(chuàng)造出可用性界面。
不過，有的設(shè)計(jì)師則會認(rèn)為，過于遵守設(shè)計(jì)規(guī)范，而且，經(jīng)常性的從他人的作品中獲取靈感的話，自己本身的創(chuàng)造能力就會下降，這就導(dǎo)致了這樣一個結(jié)果——一天下來，你的所有APP都長一個樣。
從交互設(shè)計(jì)的角度看，我們會發(fā)現(xiàn)一個問題。什么問題呢？
習(xí)慣性的去應(yīng)用一些所謂的最好的設(shè)計(jì)模式，可能會讓你覺得Google，F(xiàn)acebook，Instagram或者說其他的一些你最喜歡的APP總是做的非常棒，你會覺得，他們的設(shè)計(jì)目標(biāo)和你自己的設(shè)計(jì)目標(biāo)并沒啥差別，但是，人家成功了，而你的作品卻失敗了。所以，這里推薦一些被公認(rèn)為是(至少曾經(jīng)被公認(rèn)為)最好的設(shè)計(jì)模式，可能在你第一次看來，這些設(shè)計(jì)模式也就那樣。
1、隱藏導(dǎo)航
關(guān)于漢堡圖標(biāo)，已經(jīng)有不下于50萬的文章來爭論它了。如果你一篇都未曾讀過，試著去讀一兩篇吧。其實(shí)，簡單說來，這些文章討論的主題更主要的是這個圖標(biāo)里所隱含的那些導(dǎo)航，而不是這個圖標(biāo)自身。
上面圖片這樣的設(shè)計(jì)對于設(shè)計(jì)師來說其實(shí)是很有吸引力的，而且簡直太方便了。根本不用擔(dān)心屏幕大小的限制，只需要這樣一個圖標(biāo)，然后，把所有的導(dǎo)航全部塞進(jìn)這個可以上下滾動的東西里，然后，讓他默認(rèn)隱藏。就這樣，就這么簡單。
但是，實(shí)驗(yàn)證明，與完全隱藏導(dǎo)航相比，適當(dāng)?shù)恼故境鲆恍?dǎo)航能夠更多的增加用戶的依賴度和滿意程度，甚至為你帶來更多的收入。所以說，現(xiàn)在的好多大公司的播放器都拋棄了以前的漢堡圖標(biāo)，將最常用的一些導(dǎo)航一直顯示給了用戶。
如果說你的導(dǎo)航比較復(fù)雜，那么，請?jiān)诳紤]優(yōu)先級的基礎(chǔ)上適當(dāng)?shù)仉[藏導(dǎo)航。
2、圖標(biāo)，隨處可見的圖標(biāo)
由于移動端的屏幕大小限制，許多無腦的設(shè)計(jì)師為了節(jié)省空間，在任何只要能夠使用圖標(biāo)替換的文本域，都使用了圖標(biāo)。大家都這樣想，象形文字或者圖標(biāo)占的空間又少，不需要額外的轉(zhuǎn)換，而且，人們都很熟悉這些圖標(biāo)，難道不是這樣嗎？所以，每一個APP都這樣做了。
設(shè)計(jì)師們將上面的那種假設(shè)放在腦海里，于是，有的時候，他們將實(shí)用性的功能蘊(yùn)含在了圖標(biāo)里面，但事實(shí)上，那個圖標(biāo)是難以識別的。比如，你能猜到在下圖的Instagram里的這個圖標(biāo)點(diǎn)擊之后能夠發(fā)送什么信息嗎？
或者說，假如你從來沒用過谷歌翻譯，那么，你會期待下圖的這個圖標(biāo)實(shí)現(xiàn)什么樣的功能呢？
你總是假設(shè)你的用戶們非常熟悉那些抽象的圖標(biāo)，或者說，你總以為用戶們會花大量的時間去研究和學(xué)習(xí)你的這個圖標(biāo)的含義。這是一個很普遍性的錯誤，很多設(shè)計(jì)師都會犯這個錯誤。
Bloom.fm上讓人覺得迷糊的標(biāo)簽欄
如果說你曾經(jīng)設(shè)計(jì)過一個需要一個彈出框來解釋從而提高可用性的圖標(biāo)，那么，即使你的用戶們會不管怎么樣都能了解它，你的這個做法也是錯誤的。
當(dāng)然，并不是說你在設(shè)計(jì)中就一點(diǎn)都不使用圖標(biāo)。你的用戶們熟悉大量的圖標(biāo)，這些圖標(biāo)中，有很大一部分都是能夠代表普通的功能的，比如搜索，播放視頻，郵件，設(shè)置等等。(但是，用戶們可能不會很確定當(dāng)他們點(diǎn)擊一個心形圖標(biāo)的時候，會發(fā)生什么。)
一些能夠被大多數(shù)用戶所識別的圖標(biāo)并且被認(rèn)為是通用的
對于復(fù)雜的和抽象的圖標(biāo)，在顯示的時候，應(yīng)該總是在旁邊加上一個文本來進(jìn)行說明。這樣，你的圖標(biāo)才是真正有用的。同時，還能夠提高菜單的可發(fā)現(xiàn)性，也能夠?yàn)槟愕腁PP添加漂亮的觸感和個性。
Pixelmator的導(dǎo)航
對于基本的功能，可以使用圖標(biāo)來展現(xiàn)；但是，對于復(fù)雜的功能，就需要使用文本來說明了。(如果你要使用圖標(biāo)的話，要時常性的做可用性測試)
3、基于手勢的導(dǎo)航操作
當(dāng)蘋果公司在2007年發(fā)布了iPhone的時候，多指觸控技術(shù)就成為了人們關(guān)注的主流技術(shù)，用戶們發(fā)現(xiàn)他們不僅可以在屏幕上進(jìn)行點(diǎn)擊，還可以進(jìn)行放大，縮小和左右輕掃。
手勢在設(shè)計(jì)們的圈子中流行了起來，許多的APP都圍繞著手勢操作來進(jìn)行設(shè)計(jì)。
Clear里的手勢操作
就像隱藏的導(dǎo)航欄和使用圖標(biāo)代替文本一樣，手勢看起來似乎能夠?yàn)樵O(shè)計(jì)師節(jié)約一些屏幕空間。(“屏幕上不應(yīng)該有刪除按鈕的存在，人們只需要向左或者向右輕掃就可以進(jìn)行刪除了。我們會決定怎么操作的?！?
關(guān)于手勢，你首先需要知道的是，手勢是不可見的。人們需要記住它們，就像漢堡菜單的例子一樣。如果你隱藏了一個選項(xiàng)，那么，用到那個選項(xiàng)的人就會越少。
另外，手勢存在著與圖標(biāo)相同的問題：眾所周知的手勢有點(diǎn)擊，放大，上下滾動，同時，每個APP也有那些需要慢慢發(fā)現(xiàn)和學(xué)習(xí)的手勢。
不幸的是，觸屏界面的設(shè)計(jì)仍然是一個新的領(lǐng)域，在各個APP中，大多數(shù)手勢還不標(biāo)準(zhǔn)和統(tǒng)一。一個很簡單的手勢，比如左右輕掃，在各種各樣的郵件APP中可能都會大相徑庭。
在Apple的Mail APP中，向右輕掃，顯示出了“標(biāo)記為未讀”的選項(xiàng)
同樣的手勢，在Mail Box中，就表示將郵件存檔
或者說，想一想，搖晃你的手機(jī)，在兩個APP中，也會有兩種不同的含義。在iOS中表示撤銷，在Google Maps中表示發(fā)送反饋信息。
永遠(yuǎn)都要記住，手勢是隱藏的操作，人們不得不去記住它們。對于你的用戶，這需要大量的努力。如果你是一個發(fā)起人，也許你可以讓全世界的向右輕掃的含義都一樣——但是，只有當(dāng)它是你APP的概念設(shè)計(jì)里必不可少的一個部分的時候。
4、新手引導(dǎo)
新手引導(dǎo)，最近很火的一個話題，適用于用戶第一次與APP打交道的時候。在很多情況下，這個簡單的方式能夠在一個透明的覆蓋層上為用戶展示一些標(biāo)記來解釋界面元素。
dcovery APP里的新手引導(dǎo)
為什么說這是一個很爛的解決方案呢？因?yàn)樵S多用戶都會跳過你的介紹，他們想做的就是趕緊使用這個APP。即使他們注意到了你的這些標(biāo)記，當(dāng)他們把這個關(guān)掉的時候，這些所謂的教程也被他們忘得一干二凈了(尤其是當(dāng)屏幕上擠滿了信息的時候)。最后說一句重要的，在你的屏幕上添加這些引導(dǎo)的標(biāo)記，并不會提高APP的易用性，記住下面這句話：
原圖翻譯：用戶界面就和講笑話一樣，如果這個笑話還需要解釋才能明白的話，那么，這也不是一個好笑話。
對于你的用戶來說，新手引導(dǎo)也許可以使用其他的方式來設(shè)計(jì)的更加有用。比如Slack這個APP，使用第一屏來創(chuàng)建一個用戶場景。簡單的介紹一下他們自己，著重于利益而不是屏幕上的功能。
留住你的第一批用戶的一個更有效的方法就是逐步的引導(dǎo)。比如Duolingo，他沒有向用戶們解釋這個APP是如何工作的，而是促使人們做一個指定語言的快速測試(甚至不需要登錄)，因?yàn)橛脩魝兛梢栽谧鰷y試的過程中了解到這個APP是如何使用的。同時，這也是展示這個APP的價值的一個更有影響力的方法。
記得住左右輕掃的手勢在Apple的Mail APP里和在MailBox里的不同嗎？看看他們的逐步引導(dǎo)是如何做的：用戶們在開始使用APP之前，必須在APP所提供的一個練習(xí)場景里嘗試使用這個APP里的每一個手勢。
在你準(zhǔn)備在一個半透明的覆蓋層上設(shè)計(jì)你的引導(dǎo)標(biāo)記的時候，停下來好好想想第一次使用你的APP的用戶會有寫什么樣的經(jīng)歷。關(guān)注一下使用環(huán)境，通常情況下，有更好的方法來歡迎你的用戶們。
5、充滿了創(chuàng)造力，但是并不直觀的空白狀態(tài)
很多沒有經(jīng)驗(yàn)的設(shè)計(jì)師很容易忽略APP的空白狀態(tài)。但是，從一個APP的整體用戶體驗(yàn)上來說，這是一個很重要的方面。
有的時候，設(shè)計(jì)師們把錯誤信息和空白狀態(tài)的界面當(dāng)作一塊展示他們創(chuàng)造力的畫布。
比如下面這張Google Photo的空白狀態(tài)界面：
第一眼看去，簡直太棒了不是嗎？一個漂亮的矢量圖加上完全符合設(shè)計(jì)規(guī)范的布局。
但是，再看一下，就會覺得有寫奇怪的東西了：
?這塊屏幕里什么收藏也沒有，但為什么這里會有一個那么顯眼的搜索按鈕呢？難道是想讓用戶在什么都沒有的界面里搜索什么？
?第二個很顯眼的元素就是這個矢量圖，很明顯不可以點(diǎn)擊(雖說會有很多人去嘗試點(diǎn)擊)。
?屏幕上的提示說，我應(yīng)該找到在頂部的那個超級不起眼的“＋”標(biāo)志。為什么這個提示自己不包含一個添加按鈕呢？就像是在說“點(diǎn)擊繼續(xù)按鈕來繼續(xù)”
總而言之，上面這個空白屏幕沒有能夠幫助用戶理解用戶所在的這個環(huán)境：
?什么是收藏？他們?yōu)槭裁从杏媚兀?
?為什么我什么都沒有呢？
?我可以做些什么嗎？(我應(yīng)該做什么？)
當(dāng)需要創(chuàng)造力時，越少有時會越有用。下面這個空白狀態(tài)屏在可用性上就做的十分完美。(先讓我們忽略那個“現(xiàn)在就點(diǎn)擊下面這歌按鈕吧”的引導(dǎo)提示)
在Lootsy里的空白狀態(tài)屏
記住，空白狀態(tài)(類似于網(wǎng)頁里的404頁面)并不只是美感和品牌特色。在可用性上，他們更為重要。要讓空白狀態(tài)更為直觀。
多問多想
不要說我是錯的：設(shè)計(jì)模式和最佳的實(shí)踐仍然是你的好伙伴。但是要知道，APP和用戶是不一樣的：在一個APP里能夠適用的方案，在你自己的APP里，也許就一點(diǎn)不適用。這不是一個通用方案就能解決的事情。另外，你永遠(yuǎn)不可能知道為什么一個APP會以某種方式來設(shè)計(jì)。
自己要多想想，多設(shè)計(jì)，多研究。
衡量，測試，驗(yàn)證——如果能夠做得更好，就不要害怕打破設(shè)計(jì)規(guī)范。
作者： 鄭小小莊
轉(zhuǎn)載請注明：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、
UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
交互輸出文檔的作用
文檔這個東西，我們又愛又恨，愛的是它能夠記錄并且在工作中讓大家高效的協(xié)調(diào)合作，恨的就是很多人對文檔嗤之以鼻非常敷衍，以至于文檔不但沒有起到它應(yīng)有的作用，反而成為了一個不負(fù)責(zé)任的借口。所以一份合格或者優(yōu)秀的交互輸出文檔對于一個項(xiàng)目的流轉(zhuǎn)以及團(tuán)隊(duì)的配合來說是至關(guān)重要的。交互文檔的主要利益相關(guān)者通常是以下幾個角色：交互、產(chǎn)品、開發(fā)、UI
交互
首先優(yōu)秀的交互文檔必須在交互組內(nèi)部進(jìn)行過審核，包括一致的撰寫標(biāo)準(zhǔn)和模式的使用，一個比較規(guī)范的交互設(shè)計(jì)組對于交互的撰寫標(biāo)準(zhǔn)也是有嚴(yán)格的規(guī)范的，以及在什么情況使用什么交互模式還有組件庫的調(diào)用都會有詳細(xì)的說明，那么你的交互輸出文檔就必須滿足團(tuán)隊(duì)設(shè)定的規(guī)范。
其次對于其他交互設(shè)計(jì)師來說，你的設(shè)計(jì)方案中是否會出現(xiàn)其他人負(fù)責(zé)的模塊，那么在評審的時候需要同步，雖然交互輸出文檔對于其他交互來說不是直接受益人，但是在團(tuán)隊(duì)同步過程中也是非常重要的。
產(chǎn)品
每個公司對于文檔的要求和規(guī)則不一樣。小公司可能沒有交互設(shè)計(jì)這個崗位，那么可能產(chǎn)品連prd文檔也沒有，僅僅只是一個簡易的需求說明文檔，就更不用說針對交互規(guī)則的說明文檔了。
很多有完善規(guī)模和流程的團(tuán)隊(duì)不僅會有詳細(xì)的需求說明文檔也有很完善的交互說明文檔。我們首先要明確的一點(diǎn)是那么多文檔最后是給誰看的，一共在項(xiàng)目中會有多少文檔產(chǎn)生。
通常產(chǎn)品經(jīng)理會在項(xiàng)目初期做一份prd文檔（Product-RequirementDocument，需求說明文檔），這個prd文檔主要是給業(yè)務(wù)方、交互和開發(fā)看的，在這個文檔中需要包含一些業(yè)務(wù)規(guī)則以及交互規(guī)則，所以交互的輸出文檔是需要和產(chǎn)品的prd文檔合并的。
當(dāng)然如果你是一位很有自驅(qū)力的人，那么你可以自己推進(jìn)需求并落地，一個人就可以完成prd文檔的撰寫和需求的落地了。
開發(fā)
特別想給各位提個醒，在開發(fā)需求評審的過程中，請一定記住你們評審的目的，開發(fā)同學(xué)也要注意，請把重點(diǎn)放在需求是否能實(shí)現(xiàn)以及開發(fā)相關(guān)的地方即可，請不要考慮為什么要這樣做，或者你覺得應(yīng)該怎么設(shè)計(jì)，一旦進(jìn)入了開發(fā)對需求和設(shè)計(jì)的評頭論足那么這個會議效率就相當(dāng)?shù)拖隆?/strong>專業(yè)的事情就交給專業(yè)的人去做吧，可以私下討論但不要在評審會上各抒己見。
交互輸出文檔對于開發(fā)的作用就是，開發(fā)可以更好的還原該功能中交互的跳轉(zhuǎn)以及邏輯，所以我們盡量把交互規(guī)則寫明白寫詳細(xì)，比如按鈕在press和default時候是否樣式會有變化，或者頁面轉(zhuǎn)場的方向，這都是一些細(xì)節(jié)，減少不必要的低效溝通。你會發(fā)現(xiàn)有些時候?yàn)槭裁撮_發(fā)總是來問一些規(guī)則，就是因?yàn)槲臋n中沒有描述準(zhǔn)確，所以開發(fā)和交互都需要花時間去同步這個細(xì)節(jié)。
所以這個也非?？简?yàn)交互設(shè)計(jì)師對需求文檔撰寫的功底，并不是圖片文字隨意擺放就可以的。和開發(fā)合作時也是一項(xiàng)內(nèi)部的體驗(yàn)設(shè)計(jì)，你把文檔寫好了，開發(fā)看起來也舒服，滿意度也高。如果是一堆文案，連基本的對齊都沒做到的話，誰來看都會看不下去。
UI
交互輸出文檔對于UI來說，作用就非常簡單了，但是這里也會碰到問題，那就是交互同學(xué)只需要把信息的層次表示出來即可，千萬不要畫到連視覺同學(xué)都沒有發(fā)揮余地的程度。所以為什么現(xiàn)在UXD體驗(yàn)設(shè)計(jì)那么火，就是因?yàn)榻换ズ蚒I其實(shí)重合度是很高的，只要有智能化組件庫和工具做支撐，那么在交互和UI的設(shè)計(jì)流程中，時間就會大大降低。
交互輸出文檔的內(nèi)容
在這里，我們就將整個prd文檔的內(nèi)容給大家分享一下，不僅僅是交互需要輸出的部分。因?yàn)橐粋€高階的交互是需要能夠獨(dú)自產(chǎn)出prd文檔的。然后不同的公司對與文檔的要求也是不同，大家做參考即可。
一份基礎(chǔ)的prd文檔主要由這幾部分組成（其實(shí)就是這個需求的來源以及推導(dǎo)過程和如何落地的說明）：
1.項(xiàng)目概要
a.需求背景
這個是一個項(xiàng)目最重要的部分，可以說背景沒有搞清楚，后面都可以不用做。這個指的就是我們做這個需求的價值和原因。比如我們app中業(yè)務(wù)方（運(yùn)營）需要做一個掃一掃功能，那么這個功能首先我們就從業(yè)務(wù)價值和用戶價值兩個方面去評估，根據(jù)對業(yè)務(wù)方的溝通之后我們發(fā)現(xiàn)掃一掃功能將會在周年慶的時候通過物流包裹上的二維碼，讓用戶進(jìn)行掃碼參與活動這樣的玩法。
所以這個需求對于業(yè)務(wù)方來說是一個轉(zhuǎn)化手段，通過掃碼參與活動-領(lǐng)券-消費(fèi)，確實(shí)是一個不錯的玩法，但是大家如果只盯著眼前的問題或許就不夠了，比如當(dāng)周年慶結(jié)束之后這個功能還有什么用，他在以后的規(guī)劃中的存在是怎樣的。在所有的包裹中印上活動的二維碼這個時間周期和成本有多大。
其次，對于用戶來說，掃一掃并不是幫助他們解決了某個問題，而是我做了一個東西，同時搭配著這個功能讓你們?nèi)ナ褂?，對用戶來說是一個很可有可無的功能，如果線下包裹上的二維碼破損了也是非常影響體驗(yàn)并且是不可控的。那么綜上所述，既然要做一個臨時的活動用其他的方式會不會更好？
所以在這個文檔中的第一步，首先就是要確定需求的背景、價值，也就是說，你這個需求是怎么來的，比如再來講我們一個店鋪的優(yōu)化項(xiàng)目，在這個項(xiàng)目中，首先我們必須在評審的時候說清楚我們?yōu)槭裁匆獙ζ溥M(jìn)行優(yōu)化和改版，一定是出現(xiàn)了或者我們定義到了某個比較嚴(yán)重的問題，這邊大家對我們app業(yè)務(wù)可能不是很了解我就簡單說了，就是個人中心和店鋪營銷場景重合過多，并且賣家的同時可以買和賣兩個場景存在，所以店鋪頁通過我們的數(shù)據(jù)分析和用戶的訪談我們發(fā)現(xiàn)了一些機(jī)會點(diǎn)，以及我們必須突出一個核心場景讓用戶有明確的分辨。
另外就是背景的描述也可以帶上你的調(diào)研結(jié)果和分析，比如之前我們做首頁優(yōu)化，我們觀察了近5個月的數(shù)據(jù)，都呈現(xiàn)下降的趨勢，所以之后有進(jìn)行了一系列的訪談和用戶體驗(yàn)地圖分析才有了這個需求的背景產(chǎn)生。
b.需求目標(biāo)
目標(biāo)很好理解，就是我們希望通過這次需求迭代達(dá)到一個什么成果，比如我們之前做過一次整體的體驗(yàn)優(yōu)化改版，那么我們的目標(biāo)就是減少用戶的流程跳失、提升整體體驗(yàn)滿意度、提高用戶的任務(wù)轉(zhuǎn)化率，其中我們做了一個商品關(guān)注的功能，由于是限時特價商品所以是限量的，在規(guī)定時間進(jìn)行搶購，為了讓用戶的使用場景統(tǒng)一我們打算在應(yīng)用內(nèi)做一個商品關(guān)注功能，所以在這個需求的初期，我們對這個功能的目標(biāo)和預(yù)期是提升xx百分比的轉(zhuǎn)化，提高x%比的gmv，提高用戶對關(guān)注商品下單的效率和滿意度，之前很多用戶想要購買商品需要自己在手機(jī)端設(shè)置鬧鐘，不方便。所以這個功能的一個目標(biāo)就是解決用戶場景遷移的問題。設(shè)定目標(biāo)之后，就是為了在上線后對其進(jìn)行復(fù)盤和數(shù)據(jù)跟蹤還有用戶跟蹤。
可以用一句話來描述：針對什么用戶在什么場景下解決用戶的什么問題，達(dá)到什么目的？
c.需求范圍
需求范圍也相當(dāng)于范圍層，指的就是在該需求中我們需要做哪些相關(guān)功能以及功能涉及面。舉個例子，之前說的掃一掃功能，不同的產(chǎn)品定位對于掃一掃功能的要求也是不同的，比如說微信在掃一掃功能中承載了：掃一掃、相冊、封面、街景、翻譯、手電筒等諸多功能，再比如淘寶，有掃一掃（ar、拍立淘）、相冊、歷史、幫助、手電，這說明了不同產(chǎn)品對掃一掃功能有不一樣的要求，所以在需求范圍內(nèi)我們需要把本次需要做的功能進(jìn)行描述，并且該功能是否影響其他功能的使用和對整個產(chǎn)品的影響范圍。并且我們也會講所需要的功能進(jìn)行拆解和優(yōu)先級拆分，在表格中編輯。
d.調(diào)研分析
調(diào)研分析其實(shí)就是為我們第一步背景和價值做準(zhǔn)備，由于匯報(bào)方案和評審，或者在項(xiàng)目推進(jìn)時，我們需要有相應(yīng)的論據(jù)來支撐我們方案的客觀性，所以在這一板塊中輸出的結(jié)論就非常重要，比如之前的首頁改版，經(jīng)過用戶研究小組的訪談和數(shù)據(jù)分析得出相關(guān)的結(jié)論，通過埋點(diǎn)找到相應(yīng)板塊的點(diǎn)擊數(shù)據(jù)和異常點(diǎn)，然后再進(jìn)行一系列的問卷和訪談研究，找到結(jié)果，都是為了輔助項(xiàng)目的背景以及在評審中大家對需求價值的靈魂拷問。由于數(shù)據(jù)和調(diào)研結(jié)果比較敏感就不過多放了。
e.版本日志
日志是一個非常重要的組成部分，做過開發(fā)的同學(xué)都知道log 的重要性，當(dāng)我們跑不通的時候我們都會去檢查log，然后多測試幾遍可能就找到問題所在了，其實(shí)我們的版本日志的作用也是這樣，但是一個是對自己來說可以記錄自己的工作過程，還有思路的變化，第二就是對外，包括和需求方的討論，會議的紀(jì)要等。
要注意的是會議紀(jì)要在備注中需要詳細(xì)說明，以做證據(jù)。同時也要郵件通知相關(guān)人員和負(fù)責(zé)人。可能有些公司還會放一些評審記錄，比如各部門負(fù)責(zé)人對方案和需求的建議，業(yè)務(wù)方和技術(shù)負(fù)責(zé)人的一些建議也會放在項(xiàng)目概要中，而這個prd文檔也可通過內(nèi)部服務(wù)器進(jìn)行實(shí)時更新和保存，如svn。方便大家對需求的進(jìn)度和迭代有一個直觀的追蹤。
f.項(xiàng)目成員
這個就不用多說了，產(chǎn)品、運(yùn)營、交互、視覺、開發(fā)各司其職，照相館人員即可，就不至于當(dāng)項(xiàng)目開始進(jìn)行了人員分配還沒到位就尷尬了。
2.需求方案設(shè)計(jì)
a.業(yè)務(wù)、任務(wù)、界面流程圖
有些同學(xué)不是特別明白業(yè)務(wù)流程圖和任務(wù)流程圖的區(qū)別，這邊給大家簡單介紹一下
業(yè)務(wù)流程圖：
意思就是在這個需求系統(tǒng)中，相關(guān)利益者的業(yè)務(wù)關(guān)系，任務(wù)信息的流向的一個圖標(biāo)。比如這個簡單的例子，用戶在點(diǎn)外賣這個場景中，相關(guān)的利益者有用戶、店家、外賣員三者，那么當(dāng)用戶開始觸發(fā)流程后，這3者在這個流程中就會各司其職，而業(yè)務(wù)流程圖也很明顯的告訴大家所有聯(lián)動者的指責(zé)和流程走向。
任務(wù)流程圖：
用戶在具體執(zhí)行某一個任務(wù)時候的工作流程，以及其核心任務(wù)的操作步驟，比如在登錄注冊這個任務(wù)中，用戶需要進(jìn)行一系列的操作，在這個流程中用戶的操作引發(fā)的系統(tǒng)判斷需要詳細(xì)說明。
界面流程圖：
界面之間的跳轉(zhuǎn)關(guān)系和路徑，在這個流程圖中，我們不需要吧詳細(xì)的說明寫上，只需要將需求中涉及到的頁面跳轉(zhuǎn)進(jìn)行敘述即可。
b.相關(guān)說明和規(guī)則
接下來就要開始我們交互文檔最為關(guān)鍵的部分了，如何書寫交互說明，以及交互說明應(yīng)該包含的內(nèi)容。
1.全局思考
在做交互方案也就是我們畫原型的時候會思考一些問題：
a.整體思考
1.信息架構(gòu)是否容易理解，信息分類是否合理，比如我們的信息架構(gòu)是否采用了用戶容易理解的，市面上常用的信息架構(gòu)。
2.信息層級和路徑是否合理，不一定要最簡，但是要高效，信息的優(yōu)先級是否放置準(zhǔn)確，信息組織是否具有相關(guān)性、邏輯性。
3.主題是否清晰，3秒內(nèi)告訴“我”在哪里，并且可以做什么
4.方案的延展和后續(xù)功能規(guī)劃的可擴(kuò)展性
b.用戶權(quán)限
根據(jù)不同用戶的權(quán)限對該需求進(jìn)行檢查，比如普通用戶、vip用戶、內(nèi)外網(wǎng)用戶、游客用戶，在登錄未登錄時候?qū)π枨髢?nèi)功能的使用是否有影響
c.登錄方式
用戶登錄和注冊、終端的兼容，不同方式注冊的用戶是否需要補(bǔ)填相關(guān)信息等等
d.流程
1.該需求中的功能流程是否和其他類似或者相同功能流程保持一致性；
2.逆向流程和非正常流程的思考有沒有完全；
3.流程的閉環(huán)有沒有做好；頁面跳轉(zhuǎn)的方式是否合理；
4.中斷后的恢復(fù)狀態(tài)如何呈現(xiàn)；
5是否保留原信息等等
2.內(nèi)容、狀態(tài)和顯示
a.內(nèi)容的獲取來源
例如下方的圖片為例，banner的圖片來源和發(fā)現(xiàn)feed流的圖片來源肯定是不同的，那么就要寫清楚，圖片或者數(shù)據(jù)的來源是來自于用戶的上傳還是系統(tǒng)后臺的配置獲??；并且獲取的方式是如何的，是需要手動下啦刷新還是切換頁面自動刷新，還是設(shè)定時間自動刷新。
字段、圖標(biāo)是從接口獲取還是前端寫死，以及氣泡展示的規(guī)則等等。另外一張圖片可能用在多個地方，而可能呈現(xiàn)的尺寸不同，所以在涉及到相關(guān)圖片使用時要注意剪裁規(guī)則和圖片的來源。
b.緩存機(jī)制
圖片以及一些資源通常我們需要對其進(jìn)行緩存，有些同學(xué)不清楚什么是緩存，緩存是在計(jì)算機(jī)上的一個原始數(shù)據(jù)的復(fù)制集，一般來說需要緩存的內(nèi)容是通過瀏覽產(chǎn)生的，包括圖片以及cookie等，瀏覽過的視頻和廣告也會被緩存。同時在不同的網(wǎng)絡(luò)環(huán)境下緩存的時間標(biāo)準(zhǔn)也不同，無網(wǎng)絡(luò)那肯定只能讀取緩存文件，wifi環(huán)境下緩存時間可設(shè)置的短一些，而流量環(huán)境下時間就可以設(shè)置的偏長。
c.狀態(tài)
狀態(tài)大家都應(yīng)該都會寫，主要包含的就是初始狀態(tài)（冷啟動無緩存第一次進(jìn)入）、空狀態(tài)（無任何內(nèi)容比如空的購物車）、常規(guī)狀態(tài)、異常狀態(tài)（網(wǎng)絡(luò)中斷、接口報(bào)錯）還有過期狀態(tài)等
d.顯示
數(shù)據(jù)和內(nèi)容的極限值，最大和最小，比如粉絲和關(guān)注的數(shù)量，小于1萬人則顯示完整的數(shù)量，大于等于1萬小于11000則顯示1萬，大于11000小于12000則顯示1.1萬，這樣的方式。另外包括標(biāo)題極限為一行顯示，超過部分的顯示規(guī)則。敏感信息、錯誤提示以及超時的信息提示。金額的格式使用￥xxx還是xxx元，小數(shù)點(diǎn)保留的規(guī)則。日期的顯示格式是xxxx年xx月xx日還是xxxx-xx-xx還是xxxx/xx/xx等等
3.反饋、提示、手勢
反饋和提示的樣式有很多種，一般反饋指的是用戶對某一個控件進(jìn)行觸發(fā)后獲得的反饋，比如按鈕按下的反饋，以及之后收到的反饋，是進(jìn)行跳轉(zhuǎn)還是給用戶提示，采用的是模態(tài)還是非模態(tài)的提示。比如點(diǎn)擊關(guān)注某個人的按鈕后會提示關(guān)注成功，比如退出某個圖文編輯會二次確認(rèn)是否退出，再比如抖音長按后出現(xiàn)的3個操作反饋，還有支付成功后的動效提示、惡意多次操作后的提示等等
如果有手勢交互也需要說明，比如滑動后內(nèi)容置頂、拖拽、左右輕掃的tab滑動、重按的3dtouch等等
4.加載
使用模態(tài)還是非模態(tài)，如果是模態(tài)加載請盡量使用情感化設(shè)計(jì)來減少用戶焦慮。如果是非模態(tài)，根據(jù)信息呈現(xiàn)和體驗(yàn)采用分步加載還是預(yù)加載還是智能加載。如果是分布加載就選擇先加載資源較小的內(nèi)容，再加載圖片，可以先將圖片模糊化粗渲染給用戶呈現(xiàn)，包括在瀏覽信息流的時候的分頁加載也是可以的。如果更智能化一些也可以預(yù)判用戶的行為進(jìn)行內(nèi)容加載，例如當(dāng)用戶在某個圖文前停留時間達(dá)到某個值后就預(yù)先給用戶加載里面的內(nèi)容。
加載的全局方式在方案中需要考慮，頁面加載、下啦刷新等等，需要統(tǒng)一。
5.環(huán)境、設(shè)備與場景
a.不同設(shè)備、廠商的不同版本
都會影響到方案的落地和用戶體驗(yàn)這個要非常注意。比如一些交互控件我們在6、iphonex和大屏幕尺寸上使用起來效果很好，但是小屏幕的時候這個交互控件顯得就很難受，所以需要仔細(xì)斟酌用戶的使用情況。另外還有橫豎憑情況的交互方案是否兼容、是否需要與其他硬件進(jìn)行兼容。
b.白天和晚上是否需要做不同的風(fēng)格設(shè)計(jì)，以及在是否需要給用戶遮擋隱私的功能。
6.文案
文案這點(diǎn)很多設(shè)計(jì)師都忽略了，你們有沒有聽說過一個叫文案設(shè)計(jì)師的崗位。其實(shí)文案在我們產(chǎn)品設(shè)計(jì)中是非常重要的。首先一個產(chǎn)品的文案對應(yīng)的語氣和產(chǎn)品調(diào)性也是相關(guān)的，就好比我們說產(chǎn)品有它自己的性格一樣，另外文案的使用直接就影響用戶對該信息的理解，比如一個對話框的文案是：確定退出嗎？下面會有兩種不同的選擇，一個確定，一個是退出，大家覺得哪個比較好？還有就是不加“嗎”，就變成了：確定退出？這樣描述出來的語言給人感覺很冰冷，甚至有一些威脅。
所以首先我們的文案是否有溫度，和產(chǎn)品的個性是否相匹配。其次文案的表述是否準(zhǔn)確和通俗易懂，比如你告訴程序員一句話，幫我去菜市場買西瓜，如果有西紅柿，幫我買兩個，你會帶什么東西回家？程序員版：if（看到西紅柿）西瓜等于2；else 西瓜=1。buy 西瓜。條件：看見西紅柿 執(zhí)行命令：買兩個西瓜一語道破版：其實(shí)吧，看到西紅柿呢是賣兩個西瓜的觸發(fā)條件…沒看到就買一個西瓜，看到就買兩個西瓜。所以這里出現(xiàn)的不僅僅是程序員的思維和我們的差異化，也說明了一句話沒有表述清楚所帶來的問題是很大的。
另外就是文案用語的一致性，在整個產(chǎn)品同樣的場景中，我們需要統(tǒng)一文案用語。
7.常見控件
具體見下方列表
8.撰寫方式
作為一個設(shè)計(jì)師，不管是否在做視覺，我們都需要對文檔有一個美化意識，如果你的文檔非常凌亂，那么在別人眼里就會覺得你是一個比較粗心大意，不夠負(fù)責(zé)任的人，所以我們盡量在做交互輸出文檔的時候也畫的美觀一些。
目錄
首先在目錄的撰寫時候要進(jìn)行分類，通常我做的時候會對該需求以頁面父子集關(guān)系進(jìn)行創(chuàng)建，父集為核心頁面，子集為其下的相關(guān)子頁面，這樣頁面的流轉(zhuǎn)和歸屬關(guān)系就不會搞錯。
說明
在撰寫規(guī)則與說明時可以通過標(biāo)簽法進(jìn)行標(biāo)簽說明的撰寫方式，同樣在視覺上保持美觀，對比與對齊的運(yùn)用，具體該寫什么東西上面已經(jīng)說明就不贅述了。除了交互規(guī)則以外，高階的交互設(shè)計(jì)或者產(chǎn)品經(jīng)理還需要補(bǔ)充業(yè)務(wù)規(guī)則，比如排序、商品抓去規(guī)則、權(quán)重、算法、活動規(guī)則等等這里就不展開說了。
總結(jié)
文檔的形式有非常多種，針對不同的公司和產(chǎn)品也需要作出相應(yīng)的調(diào)整，能夠滿足需求和方便協(xié)作，目的就達(dá)到了，我們并不希望過多的時間花在文檔的撰寫上，而是希望大家在做設(shè)計(jì)時多思考業(yè)務(wù)，本次分享就到這里啦～
轉(zhuǎn)載請注明：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、
UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
轉(zhuǎn)載請注明：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、
UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
在數(shù)據(jù)可視化的分析過程中，用戶是所有行為的主體，通過獲取的可視信息形成認(rèn)知，在交互分析過程中獲取解決問題的方法。
在這個過程中，感知和認(rèn)知能力直接影響著信息的獲取和處理進(jìn)程，進(jìn)而影響用戶對外在世界環(huán)境做出的反應(yīng)，這也是設(shè)計(jì)數(shù)據(jù)可視化產(chǎn)品服務(wù)藍(lán)圖的基礎(chǔ)邏輯。
從數(shù)據(jù)到知識有兩個途徑:交互的可視化方法和自動的數(shù)據(jù)挖掘方法。
我們可以看到，下圖展示的便是一個典型的可視分析流程圖和每個步驟中的過渡形式。這個流水線的起點(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ù)雜的情況時，有限的空間大大限制了靜態(tài)可視化的效果，有限的可視化空間和數(shù)據(jù)過載之間的處理是非常復(fù)雜的。有時我們會通過物理環(huán)境的變化來改變服務(wù)模型，但是更多時候我們需要通過交互設(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)系
案例分析：
在我們收到原型圖時，首先我們需要梳理清楚大屏的信息架構(gòu)，比如整個大屏的模塊比例是按照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)航的切換后又返回到上一頁面，整個行為是可以形成路徑閉環(huán)的。
二、流程設(shè)計(jì)
1、可下鉆的模塊需給用戶以引導(dǎo)
2、相同功能的用戶體驗(yàn)路徑需保持一致
3、逆向流程的功能設(shè)計(jì)能形成閉環(huán)
案例分析：
我們經(jīng)常會在大屏中間設(shè)計(jì)地圖的樣式來展示某個省的數(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)一個模塊內(nèi)需要展示數(shù)據(jù)的多個維度，我們?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ù)，另一方面，在我們作圖搬磚的時候，也要注意一下幾點(diǎn)：
（1）不要遺漏了“無數(shù)據(jù)”的缺省空界面，當(dāng)無法獲取到數(shù)據(jù)時，我們需要給前端提供這樣的缺省圖；
（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ù)的更新時間節(jié)點(diǎn)，有的大屏強(qiáng)調(diào)數(shù)據(jù)實(shí)時性，我們經(jīng)常會在右上角增加數(shù)據(jù)截止更新時間來來引導(dǎo)用戶；
（5）特定的數(shù)值按照特定的格式和單位顯示，比如羊字符能讓用戶第一時間識別到是人民幣，而如果金額數(shù)字過長后面再加元會降低識別效率。
案例分析：
3、選擇與輸入的信息反饋
（1）展示合適的首選項(xiàng)或默認(rèn)值
（2）輸入前有效的文本提示
（3）輸入完成后需及時反饋
案例分析：
4、用動效進(jìn)行有效的交互引導(dǎo)
利用動效進(jìn)行交互引導(dǎo)，即使大屏操作鏈路過長，也可以讓用戶快速上手操作，減少流程學(xué)習(xí)時間。進(jìn)入下一場景后，又會有對應(yīng)的區(qū)域提示用戶返回全局或查看其他場景；當(dāng)做到層層有響應(yīng)，就能減少用戶在每一步操作上的困惑時間，幫助用戶快速上手操作流程，并且大大提升工作效率。
但是我們需要注意的是，不要為了酷炫而做太多無用的動效，不僅會讓頁面加載速度慢，也會讓用戶覺得雜亂無重點(diǎn)。
總結(jié)：
交互可提高可視化系統(tǒng)的效率，幫助用戶處理更多的數(shù)據(jù)，完成更復(fù)雜的任務(wù)。然而，實(shí)現(xiàn)交互本身也有額外成本?；拥南到y(tǒng)可以使用戶能探索更大的信息空間，但隨之而來的成本是用戶需要花費(fèi)更多的時間與精力去瀏覽和探索數(shù)據(jù)。
因此，可視化系統(tǒng)應(yīng)當(dāng)采用數(shù)據(jù)挖掘算法自動發(fā)現(xiàn)用戶可能會關(guān)心的數(shù)據(jù)或者模式；并通過可視化呈現(xiàn)給用戶，用戶在這個基礎(chǔ)上通過互動進(jìn)行更深入的挖掘。設(shè)計(jì)師的設(shè)計(jì)決定了系統(tǒng)的可理解性，一旦掌握了這個邏輯，再復(fù)雜的頁面也會變得有條不紊。
我們?nèi)孕柙跀?shù)據(jù)可視化的道路上不斷探索挖掘數(shù)據(jù)價值，給決策者提供有效的數(shù)據(jù)分析支撐，讓設(shè)計(jì)驅(qū)動數(shù)據(jù)價值最大化。
一、什么是格式塔原理？
格式塔心理學(xué)誕生于1912年，是由德國心理學(xué)家組成的研究小組試圖解釋人類視覺的工作原理。他們觀察了許多重要的視覺現(xiàn)象并對它們編訂了目錄。其中最基礎(chǔ)的發(fā)現(xiàn)是人類視覺是整體的：我們的視覺系統(tǒ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神奇）
比如，這是著名的“人臉花瓶幻覺”圖。如果以黑色為背景，白色為圖形，則是一個花瓶；如果以黑色為圖形，白色為背景，則是兩個人的側(cè)臉。它也反映了圖形和背景對一幅圖的影響。
二、格式塔原理分析
使用不同數(shù)量的空格來合并或分離元素是傳達(dá)有意義的分組的關(guān)鍵。例如，在Ant Design的標(biāo)題區(qū)域中，“ 搜索”功能與站點(diǎn)的主要導(dǎo)航位于同一行。但是，主導(dǎo)航和搜索之間的多余空格表示它們屬于不同的組，因此具有獨(dú)特的功能。對于使“ 搜索”功能在主菜單的其余部分中脫穎而出，此空格至關(guān)重要。
但是，在較小的屏幕上，無法保持此間距。為了避免將這些區(qū)域視為一個整體，頁面收縮寬度的時候，搜索后的文字隱藏了。
應(yīng)具有固定或鎖頭標(biāo)題的網(wǎng)站特別可以從使用獨(dú)特的背景顏色或清晰的邊框中受益，從而有效地將標(biāo)題與下面滾動的頁面內(nèi)容區(qū)分開。此外，大頁腳的單一統(tǒng)一背景色 可有效地表示該區(qū)域中的所有鏈接都屬于一個組。
創(chuàng)建清晰的邊界是一種強(qiáng)大的視覺提示，可以壓倒其他分組原則，例如接近性或相似性。因此，當(dāng)需要包含幾種不同類型的UI元素或無法調(diào)整對象之間的空白量時，它是一種強(qiáng)大的工具。我們做頁面時如果需要把兩個元素放成一組與其他元素區(qū)分，那么我們可以用線框畫出邊界來達(dá)到目的。
如果其它因素相同，那么相似的物體看起來歸屬于一組。接下來從形狀、顏色、尺寸上來說明相似性原理，這也就是我們平時做視覺設(shè)計(jì)時的原理，比如我們設(shè)計(jì)稿宣講時可能會被開發(fā)、產(chǎn)品以及測試同學(xué)問到“為什么用這個形狀？為什么這里用這個顏色？為什么這兩個尺寸不一致？等等，細(xì)細(xì)體會這個相似性原理就會給我們答案，讓我們在畫設(shè)計(jì)稿時能夠有理有據(jù)。
在上圖中，我們頭腦中自然而然的會分成“四列”，也就是圓形一列，三角形一列，然后再圓形一列，三角形一列，而不會看成“三行”
應(yīng)用共享的顏色來表示某些項(xiàng)目是相關(guān)的，因此可能具有相似的功能，這很有效。通用顏色往往比其他特征（例如形狀）更加突出，因此可以用于組合不同類型的元素并傳達(dá)它們確實(shí)相關(guān)。
在用戶界面設(shè)計(jì)中，顏色通常用于指示常用功能。例如，使用單個鏈接顏色作為與用戶交流可點(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)。
如上圖，就是一個用色的反面例子，“ 消息中心”中的所有按鈕均為綠色，因此用戶必須花時間確定哪個是提交表單的主要按鈕。（此外，“ 提交”按鈕離消息區(qū)域很遠(yuǎn)，并且根據(jù)Fitts的定律，這種缺乏接近性也會降低用戶的速 度。）
相同顏色的按鈕將被視為具有相同的重要性級別。因此，應(yīng)為主要操作性按鈕保留單獨(dú)的顏色，以幫助它們在輔助按鈕中脫穎而出。
在用戶界面中，我們經(jīng)常使用大小來強(qiáng)調(diào)內(nèi)容或按鈕中最重要的部分。相同的大小表示相同的視覺突出度，并且在所有其他條件相同的情況下，將共享該屬性的所有元素連接在一起。一致地使用大小會創(chuàng)建視覺層次結(jié)構(gòu)，并使頁面易于掃描，因?yàn)槿藗兛梢粤⒓纯吹讲⒗斫膺@些類型分組。
例如，在產(chǎn)品列表頁面中，每個單獨(dú)的產(chǎn)品列表都以相同的大?。ê拖嗤男螤睿╋@示。這種一致的視覺樣式告訴我們該區(qū)域中的所有物品都是產(chǎn)品。共享大小將其與其他不同的UI元素分開。當(dāng)某項(xiàng)商品在此列表中以不同的大小或形狀出現(xiàn)時，就會突出顯示為不屬于產(chǎn)品分組。下面這個產(chǎn)品集合的促銷以單個產(chǎn)品列表大小的兩倍顯示。
下面是我最開始嘗試的招聘系統(tǒng)首頁的改版：
根據(jù)上面的相似性原理和接近性原理就可以很容易看出來，這個頁面結(jié)構(gòu)和邏輯不清晰：
1.待處理和招聘日程兩個模塊之間的區(qū)分不夠清晰：因?yàn)檫@兩個模塊右側(cè)應(yīng)用了同樣的形狀和顏色的按鈕（相似性原理），讓用戶在心理上產(chǎn)生聯(lián)想，同時這兩個模塊之間只靠間距來區(qū)分，區(qū)分的太弱了（接近性原理）
2.招聘日程頭部日期與下面的面試安排卡片聯(lián)系太弱：因?yàn)槊嬖嚳ㄆ昧朔浅?qiáng)的邊界區(qū)分的線條（接近性原理-構(gòu)建清晰的結(jié)構(gòu)）確實(shí)在面試模塊之間構(gòu)建了清晰的結(jié)構(gòu)，與此同時卡片與頭部的日期之間看起來沒有什么關(guān)聯(lián)。
3.首頁的選中效果太弱，分析這個頁面的層級，左側(cè)首頁選中才應(yīng)該是最重的，能讓用戶第一眼就知道在系統(tǒng)中的位置，很顯然目前來看很容易忽視首頁這個位置，關(guān)注點(diǎn)被吸引到了快捷入口。這并不是我們想要傳達(dá)給用戶的。
根據(jù)格式塔原理中的相似性原理和接近性原理，對頁面的結(jié)構(gòu)進(jìn)行了調(diào)整，就看起來清晰多了。
所以，我們在制作完設(shè)計(jì)稿后，可以應(yīng)用格式塔原理，分析下最終呈現(xiàn)給用戶的結(jié)構(gòu)和邏輯是否清晰。而這也是做視覺的理由和底氣。
視覺傾向于感知連續(xù)的形式而不是離散的碎片。
連續(xù)理解起來是很簡單的，但連續(xù)卻解決了非常復(fù)雜的問題。通過找到非常微小的共性將兩個不同的環(huán)連接成一個整體。在引導(dǎo)頁中經(jīng)常會用到這個。
視覺系統(tǒng)自動嘗試將敞開的圖形關(guān)閉起來，從而將其感知為完整的物體而不是分散的碎片。
閉合可以實(shí)現(xiàn)統(tǒng)一整體，這不難理解。但是有一個非常有趣的現(xiàn)象值得我們?nèi)ビ^察和思考，就是不閉合時候也會實(shí)現(xiàn)統(tǒng)一的整體，更確切的說，這種現(xiàn)象是一種不完全的關(guān)閉。這些圖形與設(shè)計(jì)給人以簡單，輕松、自由的感覺。所以，完全的閉合是沒有必要的。最著名的應(yīng)用便是蘋果公司的logo，咬掉的缺口喚起人們的好奇、疑問，給人巨大想象空間。
我們傾向于分解復(fù)雜的場景來降低復(fù)雜度。
我們的大腦將視覺區(qū)域分為主體和背景。主體包括一個場景中占據(jù)我們主要注意力的所有元素，其余則是背景。這個原理經(jīng)常會在海報(bào)設(shè)計(jì)中應(yīng)用，這也是為什么我們做海報(bào)，做平面時，一定要制作好背景，背景的氛圍很重要。
Dribbble 平臺對于互聯(lián)網(wǎng) UI 界面設(shè)計(jì)有著舉足輕重的定位，對 Dribbble 設(shè)計(jì)的研究會讓我們看清設(shè)計(jì)的方向。
為了保證這篇文章的質(zhì)量，Dribbble 年度的每個作品都超過 550 贊。在此原則下挑選了 828 件作品，作品總的大小為 2.2G。
從挑選出的 828 件作品中，排名前十的作品中 9 件為 B 端設(shè)計(jì)，另一件作品也是 B 端產(chǎn)品 C 端化的產(chǎn)物。其中：
明眼人都能看出其中的比重關(guān)系，B 端設(shè)計(jì)再次大火，為什么是再次？因?yàn)?B 端設(shè)計(jì)之前火過，只不過沒有趕上一個好的時代，在 C 端設(shè)計(jì)風(fēng)光的十年里而忽略了其存在。隨著 C 端市場飽和與數(shù)字化的浪潮下，實(shí)體經(jīng)濟(jì)、ToB、ToG 的產(chǎn)業(yè)再次迎來了它的曙光。視頻動效的作品占比也已超過 C 端界面設(shè)計(jì)，相信今年視頻動效作品占比還會再次提升。
Dribbble 年度最佳作品來自大家最熟悉的 UI8 團(tuán)隊(duì)中的 Tran Mau Tri Tam ?，作者來自越南西貢，最佳作品截止目前355K瀏覽量，2933個贊。
為什么看似平平無奇的作品卻能獲得 Dribbble 年度最佳作品呢？既不是 C 端也不是純 B 端的作品，更像一個網(wǎng)頁與平面的結(jié)合體。如果去掉搜索圖標(biāo)、分類圖標(biāo)和按鈕，你可以理解它就是一個平面作品，一個字體加幾何形體構(gòu)建的作品，為了豐富畫面的層次，讓畫面更加的活潑采用了多彩加幾何色塊，讓標(biāo)題閱讀有停頓感和呼吸感。faster 底部的橫線讓它從標(biāo)題文字中脫穎而出，這種使用線條突出重要信息的設(shè)計(jì)也是今年Dribbble 設(shè)計(jì)流行趨勢之一。
MetroUI 是 Windows8 的界面設(shè)計(jì)語言，在 2010 年至 2013 年間曾經(jīng)風(fēng)靡一時，那也是移動互聯(lián)網(wǎng)的發(fā)展元年，現(xiàn)在國家推行實(shí)體經(jīng)濟(jì)、數(shù)字化帶動 To B、To G 的發(fā)展元年，通過幾何色塊（MetroUI）實(shí)現(xiàn) B 端產(chǎn)品與 C 端設(shè)計(jì)風(fēng)格的傳承與銜接，你會發(fā)現(xiàn)歷史總是驚人的相似。最后背景結(jié)合今年最流行的微軟風(fēng)，毛玻璃的多彩高斯模糊漸變風(fēng)，年度作品當(dāng)之無愧。
最后來看下按鈕的設(shè)計(jì)，正常的按鈕要么文字加色塊，要么左圖標(biāo)加右文字，它設(shè)計(jì)成左文本加右圖標(biāo)，更加注重信息的可讀性和易讀性，也體現(xiàn) B 端設(shè)計(jì)重功能和交互體驗(yàn)，視覺點(diǎn)到為止的設(shè)計(jì)理念。
下面我們來欣賞年度最佳作品里面的流行趨勢吧。
1. 易讀性（停頓感）
字體三原則：可讀性、易識性、易讀性。當(dāng)你同時讀一篇文言文和一篇設(shè)計(jì)文章，肯定設(shè)計(jì)文章的內(nèi)容可讀性更好。易識性是用在字體設(shè)計(jì)上，不能過于浮夸的改變字體骨架、形體而不易識別。易讀性和每個位設(shè)計(jì)師都息息相關(guān)，因?yàn)槲覀兌夹枰幣盼谋?。?dāng)我們小時候?qū)懽魑臅r，不會寫的文字可以用拼音代替。這時候讀者讀到拼音時會有停頓感，更加適合用戶閱讀。
通過給用戶制作停頓感來增加用戶的易讀性。可以在相關(guān)聯(lián)文本后面添加圖片、表情、圖標(biāo)來更好的理解文本內(nèi)容，豐富文本內(nèi)涵。比如情侶間表達(dá)愛意時會輸入文本，“我愛你”、“我 Love 你”、“我 ai 你”、“我??你”，哪個更加會有情感共鳴呢？不言而喻，相信你心中已經(jīng)有答案了。
2. 曲線
在標(biāo)題文字上添加曲線來突出重要文案是 2021 Dribbble 最流行的趨勢之一，第一個設(shè)計(jì)目的就是突顯文字，其次就是想表現(xiàn)鉛筆真實(shí)書寫的感覺。之前很多帶有簽名的設(shè)計(jì)中，簽字的文本都是手寫體的感覺，手寫體對比電腦的機(jī)械字體會帶有一種人文氣息，也會讓兩者之間產(chǎn)生一種對比、矛盾。
除了突顯文本外，曲線還有視覺引導(dǎo)的作用。通過視覺引導(dǎo)讓用戶按照設(shè)計(jì)師編排的順序進(jìn)行瀏覽界面。當(dāng)然還有比這更科學(xué)的工具就是眼動儀測試，通過真實(shí)用戶眼睛瀏覽界面顯示對應(yīng)的熱點(diǎn)圖。
3. 多彩高斯?jié)u變風(fēng)
多彩高斯?jié)u變風(fēng)是從色彩的角度來傳達(dá)和豐富畫面的，多彩高斯?jié)u變風(fēng)其實(shí)是從制造矛盾到平衡矛盾的過程，多彩漸變多為冷暖對比來制造畫面的沖突，需要控制冷暖畫面的大小來實(shí)現(xiàn)平衡。主流的還是以暖色突顯為主。多彩漸變主要起到活躍氣氛、吸引目光、平衡畫面的作用。
多彩高斯?jié)u變還可以結(jié)合輕擬物、幾何圖形、三維等新的組合方式去創(chuàng)新，給用戶呈現(xiàn)一種更加新穎的視覺表現(xiàn)形式。最后我們還是要回歸到內(nèi)容上，為了更好的傳達(dá)信息需要去設(shè)計(jì)與內(nèi)容相匹配的視覺風(fēng)格。
1. 側(cè)邊欄 Sidebar
B 端設(shè)計(jì)的火爆帶動了 B 端相關(guān)模塊設(shè)計(jì)，更多的人也愿意嘗試 B 端相關(guān)模塊設(shè)計(jì)，側(cè)邊欄作為產(chǎn)品架構(gòu)中重要的導(dǎo)航系統(tǒng)，好的側(cè)邊欄設(shè)計(jì)能為用戶帶來更好的效率。主流側(cè)邊欄都做了展開、收起、拖拽等交互效果，也是受限于 PC 屏幕為展示更多數(shù)據(jù)而騰空間。側(cè)邊欄主要承擔(dān)的功能有導(dǎo)航、分類、自定義篩選、共享、新增等。Dribbble 的 B 端產(chǎn)品設(shè)計(jì)已經(jīng)不再是假大空概念設(shè)計(jì)，而是一套實(shí)用美觀可落地的設(shè)計(jì)。
2. 儀表盤設(shè)計(jì)
儀表盤設(shè)計(jì)是一個很好的隱喻，想象一下開摩托車或汽車主駕駛前面的屏幕，汽車儀表有燃油表、車速表、里程表、水溫表、轉(zhuǎn)速表、故障指示燈等。B 端類產(chǎn)品后臺界面的儀表盤設(shè)計(jì)也需要展示一些重要的數(shù)據(jù)和各種狀態(tài)，大體分為側(cè)標(biāo)欄、導(dǎo)航欄、待辦任務(wù)、個人信息、報(bào)表數(shù)據(jù)、消息中心、快捷入口等。當(dāng)然最重要的就是報(bào)表數(shù)據(jù)，團(tuán)隊(duì)收益、任務(wù)進(jìn)度、轉(zhuǎn)化比例、新增、存量、團(tuán)隊(duì)工作時長等都是老板或領(lǐng)導(dǎo)關(guān)心的內(nèi)容。每個公司業(yè)務(wù)不同、每個人員權(quán)限不同，自定義的儀表盤也各有差異。重要的是突顯數(shù)據(jù)和業(yè)務(wù)狀態(tài)，需要分層級系統(tǒng)性去思考和設(shè)計(jì)。
3. 流程設(shè)計(jì)
復(fù)雜的事情簡單化，簡單的事情標(biāo)準(zhǔn)化，標(biāo)準(zhǔn)的事情流程化，流程的事情自動化。流程設(shè)計(jì)是每一個企業(yè)核心功能和業(yè)務(wù)，可自定義的管理流程系統(tǒng)搭建也是 B 端產(chǎn)品設(shè)計(jì)的難點(diǎn)，需要對業(yè)務(wù)高度抽象，讓每一個業(yè)務(wù)人員可自定義的流程才是好的流程設(shè)計(jì)。
4. B 端 C 化
B 端 C 化是 B 端產(chǎn)品設(shè)計(jì)的視覺表現(xiàn)力慢慢往 C 端產(chǎn)品設(shè)計(jì)的視覺靠齊，國內(nèi) B 端產(chǎn)品界面設(shè)計(jì)視覺水平還有很大的提高空間。除了視覺上的提升外，由于業(yè)務(wù)的發(fā)展，B 端產(chǎn)品也開始移動化、智能化，國內(nèi)主流還是通過小程序、H5 來現(xiàn)實(shí) B 端產(chǎn)品 C 端化。
5. 輕代碼化
輕代碼化是一種低代碼賦能無代碼的方式，彌補(bǔ)無代碼拓展性差、覆蓋場景少的問題。在保有無代碼靈活、易用、快捷的同時，又能覆蓋低代碼使用場景。簡單理解就是無需代碼開發(fā)即可如搭積木般快速、靈活地創(chuàng)造屬于你的個性化管理系統(tǒng)，輕松實(shí)現(xiàn)多元業(yè)務(wù)場景的數(shù)字化管理。
輕代碼化將功能進(jìn)行打包，升級成全局可以用的配置，技術(shù)人員配置好后，業(yè)務(wù)人員在應(yīng)用編輯時直接選擇使用模版，綁定對應(yīng)的變量即可使用。
1. 人文氣息
為什么人加色塊的組合方式能流行起來？還是 B 端行業(yè)流行帶動的。B 端講的更多的是企業(yè)對企業(yè)。企業(yè)對企業(yè)除了講行業(yè)解決方案外，還需要傳達(dá)公司的價值觀、使命、愿景。人加色塊的組合方式非常適合體現(xiàn)公司的企業(yè)文化。對于一家全球化的公司不同膚色的人物組合在一起，這種人文氣息和價值觀已經(jīng)就不言而喻了。
當(dāng)然企業(yè)也需要進(jìn)行營銷，抓人眼球。幾千年來的遺傳證明了，人的大腦對食物、性、動的東西、人臉和眼睛、危險(xiǎn)的動物很敏感。人加色塊的組合方式也具有抓人眼球營銷的功能。真可謂一舉兩得。
這種風(fēng)格更適合大公司，國內(nèi)的一些手機(jī)廠商 OPPO、VIVO 等也會通過手機(jī)+背景+人物來體現(xiàn)科技與人文的結(jié)合，而對于中小型公司產(chǎn)品差異化和行業(yè)解決方案展現(xiàn)應(yīng)該還是重中之重。
2. 毛玻璃效果
毛玻璃效果加大了模糊程度，透明效果更加扁平，很好的順應(yīng)當(dāng)下 UI 扁平化的設(shè)計(jì)趨勢。蘋果 Mac OS Big Sur 系統(tǒng)的圖標(biāo)、界面中運(yùn)用了大量毛玻璃和半透明元素，界面更扁平。至于 C4D 三維彩色玻璃的視頻教程可以在 B 站搜索“透光藝術(shù)-C4D 創(chuàng)建彩色玻璃的 4 個技法”，完全能滿足 UI 設(shè)計(jì)師。當(dāng)然還有一個好消息就是 Mac 用戶可以享有 OC 一年免費(fèi)的使用權(quán)，具體安裝購買方法上某寶就可以輕松搞定，真香。
3. 輕擬物
輕擬物這幾年一直流行，在 UI 設(shè)計(jì)中趨于穩(wěn)定的位置。從寫實(shí)到扁平再到輕擬物，其實(shí)是設(shè)計(jì)師們一路不斷探索的結(jié)果。本質(zhì)就是光影對形體產(chǎn)生的視覺感受。在色彩中對高光、亮面、明暗交界線、暗面、反光（環(huán)境光）五個部分的處理。寫實(shí)三維的圖標(biāo)等設(shè)計(jì)更適用于簡潔的畫面中，扁平等設(shè)計(jì)更適用于復(fù)雜一點(diǎn)的界面中，比如 B 端產(chǎn)品界面中的功能圖標(biāo)。輕擬物可使用的范圍更廣，效果更佳。Sketch、Figma 軟件對于漸變、高光、投影、高斯模糊處理已經(jīng)非常簡單且出彩。
4. 簡潔設(shè)計(jì)
簡潔設(shè)計(jì)遵從了密斯·凡德羅的“少即是多”的設(shè)計(jì)原則，在 B 端產(chǎn)品界面中更加需要簡潔設(shè)計(jì)，我們最熟悉的 Sketch 軟件界面已經(jīng)是相當(dāng)?shù)暮啙嵙恕；氐浆F(xiàn)實(shí)當(dāng)需求功能不斷增加，產(chǎn)品界面的編排如何取舍，如何保證界面的簡潔是設(shè)計(jì)師需要深度思考的問題？如何與上級溝通？該功能是否可做可不做？是否需要埋點(diǎn)用數(shù)據(jù)說話？如果只是一味競品有我們就需要有，功能不斷累加只會讓界面越來越重。
5. 幾何圖形
幾何圖形和幾何插畫有異曲同工之妙，幾何圖形多為產(chǎn)品界面和宣傳內(nèi)容的抽象，產(chǎn)品界面的幾何圖形多為占位符形式，加上色彩和幾何色塊讓其成為一個整體。B 端產(chǎn)品視覺設(shè)計(jì) C 端化的進(jìn)程中，幾何圖形、幾何色彩不失為最好的突破口，相信今年Dribbble B 端產(chǎn)品的視覺設(shè)計(jì)一定會更上一個臺階。
幾何圖形另一個場景化的地方就是品牌，作為一名 UI 設(shè)計(jì)師一定會經(jīng)歷從圖標(biāo)到幾何圖形到品牌設(shè)計(jì)的過程，品牌設(shè)計(jì)的技巧基本還是以幾何圖形為主，至于品牌的內(nèi)涵需要更深層次的解讀。掌握主流品牌設(shè)計(jì)的技巧對產(chǎn)品定位、品牌宣傳打下扎實(shí)的基礎(chǔ)。
6. 暗黑設(shè)計(jì)
暗黑模式的設(shè)計(jì)是解決在微弱環(huán)境下內(nèi)容也可以有更高的可讀性。隨著用戶夜晚及深夜使用電子設(shè)備時長增大，如何在夜晚這個特定場景下使用更加舒適。合理使用暗黑模式可以減輕眼睛疲勞，提高在夜間使用的可讀性。
在設(shè)計(jì)暗黑主題時，不能為了突顯視覺上的逼格，而去使用高飽和度鮮艷的色彩來突顯界面的品質(zhì)感。而應(yīng)該把舒適度、可讀性作為設(shè)計(jì)的衡量指標(biāo)。Material Design 給出了暗黑主題的設(shè)計(jì)準(zhǔn)則，即正文和背景之間的對比度應(yīng)至少為 15.8:1。按照此標(biāo)準(zhǔn)設(shè)計(jì)，可讀性都還不錯。這里介紹一個插件“Stark”（Figma、Sketch、XD、Chrome 插件）用來測試界面的對比度。
7. 模塊化（組件化）
為什么叫模塊化，而不叫組件化，組件化更多的利用原子系統(tǒng)從原子、分子、組織、模版、頁面來快速的搭建界面，但在 B 端產(chǎn)品設(shè)計(jì)中基礎(chǔ)組件和業(yè)務(wù)組件的搭建是以提高工作效率為前提，是否有從 0 到 1 搭建 B 端產(chǎn)品組件的經(jīng)歷是設(shè)計(jì)師一生中最寶貴的經(jīng)驗(yàn)之一，它能提高設(shè)計(jì)師的系統(tǒng)化思維、邏輯思維和抽象思維能力。
產(chǎn)品模塊化設(shè)計(jì)就是將產(chǎn)品分成幾個部分，也就是幾個模塊，每一部分都是具有獨(dú)立功能，具有一致的連接接口和一致的輸入、輸出接口的單元，相同種類的模塊在產(chǎn)品族中可以重用和互換，相關(guān)模塊的排列組合就可以形成最終的產(chǎn)品。通過模塊的組合配置，就可以創(chuàng)建不同需求的產(chǎn)品，滿足客戶的定制需求 。
8. 插畫
插畫作為設(shè)計(jì)的一大品類，不同的插畫師都有自己擅長的風(fēng)格，本質(zhì)是都有自己的個性，但是在產(chǎn)品設(shè)計(jì)中更多是需要共情、共性來講故事，表達(dá)產(chǎn)品理念和價值觀。這就需要插畫師去嘗試并探尋出適合互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)類的插畫風(fēng)格。設(shè)計(jì)的本質(zhì)是舊元素的重新組合，插畫不會過時，而是需要結(jié)合當(dāng)下和產(chǎn)品找到最匹配的設(shè)計(jì)風(fēng)格。
9. 幾何插畫
幾何插畫算是插畫簡化的一種表現(xiàn)形式，人和物的形態(tài)不再寫實(shí)，而是抽象成幾何圖形拼湊的感覺，同時保留人物形態(tài)的神韻。加上幾何色塊與人物交互形態(tài)的表現(xiàn)，傳達(dá)出簡潔、科技的現(xiàn)代感。難點(diǎn)還是在人物形態(tài)的表現(xiàn)上，平時多練習(xí)練習(xí)速寫還是很有必要的。
10. 線面插畫
線面插畫最近一兩年非常流行，準(zhǔn)確的說是非常適合。首先線面插畫主要是由線條和塊面組合而成，用塊面表現(xiàn)人物形態(tài)時某些結(jié)構(gòu)會表現(xiàn)不出來，這時候用線條簡單勾勒后，結(jié)構(gòu)就會清晰明了。其次當(dāng)線面插畫運(yùn)用在界面上時，可以打破界面純文字或組件化的機(jī)械和沉悶感。線面插畫的風(fēng)格提升畫面熱鬧感的同時，還能保持界面的干凈整潔。
1. 微交互
界面微交互動效會讓用戶的體驗(yàn)更加精致到位。想要打造優(yōu)秀的產(chǎn)品設(shè)計(jì)，微交互和動效設(shè)計(jì)是繞不開的，UI 界面設(shè)計(jì)通過微交互反饋告知用戶當(dāng)前正在發(fā)生的事情，所處的狀態(tài)。細(xì)微的動效更能調(diào)動用戶情緒，取悅用戶。C 端產(chǎn)品微交互和動效已經(jīng)很成熟了，一部分功勞來自 iOS 系統(tǒng)原生自帶的效果。B 端產(chǎn)品的微交互和動效更多還是在學(xué)習(xí)海外產(chǎn)品，還需要給前端工程師灌輸微交互和動效的設(shè)計(jì)價值，共同打造產(chǎn)品體驗(yàn)細(xì)節(jié)。
2. Mg 動畫
Mg 動畫需要很好的節(jié)奏感、韻律，每一個場景動畫都需要其中的元素進(jìn)行連接變化，讓轉(zhuǎn)場動畫更加自然，MG 人物動畫通過點(diǎn)線面的動效變化讓畫面更加有趣、自然，通過粒子效果讓特定場景無限循環(huán)會讓人更加印象深刻。
1. 三維圖標(biāo)
MacOS Big Sur 系統(tǒng)圖標(biāo)的更新帶動了三維圖標(biāo)的流行，三維圖標(biāo)的應(yīng)該場景還是需要有較大留白空間的界面，因?yàn)槿S圖標(biāo)太小后就看不到更多細(xì)節(jié)。三維圖標(biāo)感覺又回到了擬物化和扁平化哪個更好的問題上？設(shè)計(jì)師應(yīng)該保持開放多元的視角。設(shè)計(jì)本身也在不斷的演化融合，存在即合理。合適最重要，它們都會有適合自己的場景和設(shè)計(jì)價值。
2. 輕三維
為什么輕三維在界面設(shè)計(jì)中占有一席之位？一個是設(shè)計(jì)師不斷追求差異化的產(chǎn)物。另一個是更好的表現(xiàn)內(nèi)容，并與用戶產(chǎn)生共鳴。輕三維的基礎(chǔ)模型都是來自手機(jī)界面中的各種元素，比如組件、開關(guān)、按鈕、占位符、圖表、幾何圖形、圖標(biāo)、進(jìn)度條等，這些都是用戶日常使用系統(tǒng)軟件常見的元素，通過簡單的幾何形體建?！驘艄狻硬馁|(zhì)—渲染—PS調(diào)色。難度系數(shù)不大但效果很出彩。第一個出彩點(diǎn)是模型帶有厚度的倒角，結(jié)合燈光渲染的光澤是二維軟件不能比擬的。第二個出彩點(diǎn)就是材質(zhì)自由添加，特別是當(dāng)下流行的毛玻璃效果，玻璃材質(zhì)渲染效果更佳。第三個出彩點(diǎn)就是可以加局部燈光，局部的漸變色或環(huán)境光更加出彩。
3. P4D（PS+C4D）
P4D 是 PS 加 C4D 的設(shè)計(jì)表現(xiàn)技法，也是視覺設(shè)計(jì)的最后一個環(huán)節(jié)，通過 PS 對 C4D 的渲染圖片進(jìn)行調(diào)色，利用 PS 的調(diào)色技巧可以很好的解決 C4D 打燈光的瑕疵，還可以利用 PS 強(qiáng)大的合成功能，將渲染圖片與圖片素材進(jìn)行合成，來表現(xiàn)畫面的視覺度，當(dāng)然三維軟件比較難實(shí)現(xiàn)的水、粒子、煙花等效果，也可以通過 PS 的后期合成來實(shí)現(xiàn)，這也是 P4D 的強(qiáng)大之處。
4. 卡通 IP
卡通 IP 設(shè)計(jì)最近三四年技術(shù)的迭代已經(jīng)慢慢的走上成熟，卡通 IP 也從傳統(tǒng)的純 PS 手繪技法，轉(zhuǎn)到 C4D 建?！巧壎ā狹D衣服制作—OC渲染—PS（靜態(tài)）/AE（動態(tài)）調(diào)色。
卡通 IP 火的本質(zhì)更適合做營銷，相比于品牌或 Slogan，卡通 IP 具有親和力和畫面感。隨著各種手辦行業(yè)大熱，受互聯(lián)網(wǎng)大廠影響下，卡通 IP 已經(jīng)是互聯(lián)網(wǎng) B 輪以上公司的標(biāo)配了。如果團(tuán)隊(duì)中沒有這樣能力的人，也可以通過繪制好二維，一套三維可以選擇外包完成。
對于 UI 設(shè)計(jì)師來說學(xué)習(xí)是有成本的，暫時并不是必備技能，如果喜歡完全可以學(xué)習(xí)，從設(shè)計(jì)差異化的角度來看三維視覺確實(shí)有一定的競爭力。
5. 三維動畫
C4D 三維場景動畫通過構(gòu)建實(shí)物和場景模擬生活中的現(xiàn)實(shí)場景，會讓用戶體驗(yàn)真實(shí)感，三維軟件制作動效的最大優(yōu)勢是通過動力學(xué)和表達(dá)式來模擬真實(shí)感，未來在 AR/VR 領(lǐng)域會有更好的發(fā)展。相對于界面動效學(xué)習(xí)成本難度也相對較大。在三維動畫中 C4D 軟件對于域、動力學(xué)還是有一定的優(yōu)勢。
上一次寫 Dribbble 流行趨勢還是兩年前了，通過兩年的沉淀對趨勢流行有了更深的認(rèn)知。十年的互聯(lián)網(wǎng)行業(yè)風(fēng)風(fēng)火火，隨著最近的互聯(lián)網(wǎng)裁員潮大家也慢慢的進(jìn)入到反思層，客觀的看待和理解這個真實(shí)的世界，曾經(jīng)的流行趨勢也需要慢慢的沉淀下來。
存在即合理，趨勢流行稍縱即逝，注定是不長久的，只有大浪淘沙歷史遺留下來的風(fēng)格才能更長久。但我們也不能不去關(guān)注，因?yàn)槟挠惺裁此^的創(chuàng)新，只不過是舊元素的重新組合，并符合當(dāng)下這個時代人的審美需求。香奈兒的“時尚易逝，風(fēng)格永存”大概就是這個意思吧。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
前兩篇，探討了個人對交互設(shè)計(jì)價值觀的理解，以及其對從業(yè)者和用戶的價值。
這一篇，我們就來探討一下，如何做到之前提到的 4 點(diǎn)價值觀。
先從“周到“開始。
僅為一家之言。歡迎留言交流，說出你的看法。
本著嚴(yán)謹(jǐn)?shù)膽B(tài)度，先捋一捋概念。
常言道，金杯銀杯，不如百姓口碑。
同理，周不周到，最終還是用戶說了算。那用戶是怎么評判的呢？通常是憑主觀感受。
拿上篇文章中網(wǎng)易號文章編輯頁面的例子來說，因?yàn)椤氨４妗焙汀按娌莞濉惫δ茏龅牟粔蚝茫越o筆者留下了不夠周到的印象。
翻譯過來，就是，一些體驗(yàn)細(xì)節(jié)，影響了用戶的印象。
《設(shè)計(jì)師要懂心理學(xué)》這本書中有條原則，叫“整體認(rèn)知主要依靠周邊視覺而非中央視覺”。
講的是視覺和 UI 層面的用戶認(rèn)知。就是說，用戶會關(guān)注并不顯眼的邊邊角角的設(shè)計(jì)，而且這些邊邊角角的設(shè)計(jì)會影響用戶對整體設(shè)計(jì)的認(rèn)知和印象。
舉個例子。假如說，微博信息流頁面的掃一掃圖標(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ù)面情緒，避免所有的不周到，才算是周到。
個人覺得，最關(guān)鍵的地方，是滿足好小需求。
啥是小需求？
個人觀點(diǎn)，籠統(tǒng)的講， 小需求是一種共性需求， 主要是一些體驗(yàn)細(xì)節(jié)。比如信息的分類與展示、銜接不同頁面的各種彈窗與提示、對各種狀態(tài)的提示、對各種情況的到位解釋，等等。
有小需求，就有大需求。
所謂大需求，更多是一種個性需求， 不同的產(chǎn)品，會有不同的大需求。比如短視頻產(chǎn)品，它的大需求會包含視頻的拍攝、上傳、播放等；資訊類產(chǎn)品，它的大需求則包含文章的撰寫、編輯、發(fā)布、查看等。
工作經(jīng)歷，筆者見過一些交互設(shè)計(jì)不夠周到的產(chǎn)品。它們的共同特點(diǎn)就是： 大需求基本上得到了很好的滿足，小需求沒有得到很好的滿足。
這一大段，就圍繞如何更好的滿足小需求來展開。主要建議如下。
筆者有個客戶，是從事教育行業(yè)的，之前并沒有接觸過互聯(lián)網(wǎng)行業(yè)的產(chǎn)品與設(shè)計(jì)工作。
這位客戶找到筆者的時候，是想要設(shè)計(jì)一款小程序的界面。當(dāng)時客戶非常自豪的對筆者說，這個（原型）是我用墨刀畫的，現(xiàn)學(xué)現(xiàn)做。
說起墨刀，本人也用過。和 Axure 相比，確實(shí)好用太多，在簡潔性和智能性方面，感覺和 Sketch 有異曲同工之處。
關(guān)于墨刀如何好用，網(wǎng)上已經(jīng)有太多溢美之詞。筆者就結(jié)合自己的使用經(jīng)歷，簡單總結(jié)一下：
1 好用，上手快。零基礎(chǔ)，只要會操作常用辦公軟件，簡單學(xué)一下就能上手
4 能查看頁面之間的跳轉(zhuǎn)邏輯。借助工作流功能，可實(shí)現(xiàn)這一點(diǎn)
以上主要是墨刀自身的優(yōu)點(diǎn)。結(jié)合本段主題，我們再探討一下，對于日常工作，墨刀這把利器有哪些優(yōu)勢。
1.1 可以把更多精力花在創(chuàng)作上
當(dāng)我們不會用一款工具時，通常會有一些挫敗感。如果必須要用，接著很可能就會有一點(diǎn)焦灼了。
而墨刀，基本上不會讓我們體會到這些感覺。
我們也不用花無謂的時間去學(xué)習(xí)一些艱難的高深的技法，而是可以把更多的時間花在“創(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í)沒有太多時間去關(guān)注交互的體驗(yàn)細(xì)節(jié)。
主觀上，如果產(chǎn)品經(jīng)理對這些交互細(xì)節(jié)的興趣或重視程度不足、同時產(chǎn)品經(jīng)理上面的決策層也不去抓這些體驗(yàn)細(xì)節(jié)，最終的結(jié)果，就是產(chǎn)品的原型上可能會丟失很多體驗(yàn)細(xì)節(jié)。
筆者就有類似的經(jīng)歷。
一款 App，產(chǎn)品經(jīng)理用 Axure 畫的原型。評審或宣講需求的時候，大家都是在電腦或會議室大屏幕上來看這個原型，同時所有人最先關(guān)注的是大需求。
理解完大需求，會有部分同學(xué)就大需求提出自己的看法或建議。最后，才會有部分同學(xué)就小需求指出不足并提出建議。
受限于職責(zé)、時間等各種因素，大家也不可能針對小需求提出太多建議。結(jié)果就是，仍然會有相當(dāng)數(shù)量的小需求被遺漏，或者沒有被很好的滿足。
墨刀有兩個功能，可以較好的規(guī)避這些問題。一個是工作流功能，一個是手機(jī)端預(yù)覽功能。
工作流功能，類似流程圖，即把所有頁面以合乎邏輯的方式鏈接起來?？陀^上，會促使我們畫出所有包含小需求的頁面，包括彈窗、狀態(tài)提示等。
支持多人的手機(jī)端預(yù)覽功能，使得我們在手機(jī)上，可以通過點(diǎn)擊等方式來模擬體驗(yàn)這款 App。這樣的環(huán)境下，我們會更容易理解大需求，也更容易發(fā)現(xiàn)小需求存在的問題。
所以，個人的建議，就是用墨刀來畫原型，同時把工作流和多人手機(jī)端預(yù)覽（針對 App、小程序）這兩項(xiàng)，作為硬性標(biāo)準(zhǔn)。
一款產(chǎn)品，在體驗(yàn)或使用時，非常容易發(fā)現(xiàn)問題。
因?yàn)檫@時候，我們可以松弛下來，把自己切換成普通用戶。忘掉所有費(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)品。這就意味著，如果一個功能在給到用戶前有 N 個方案，就會有 N 個方案對應(yīng)的前后臺代碼。
一定程度上，微信團(tuán)隊(duì)就是通過這種在正式發(fā)布前反復(fù)試錯、不斷打磨的方式，最終給用戶提供了優(yōu)秀的交互體驗(yàn)。
估計(jì)，絕大部分團(tuán)隊(duì)和公司，都做不到微信這樣，開發(fā) N 個版本，并去一一體驗(yàn)和比較這 N 個版本。
無法體驗(yàn)已經(jīng)開發(fā)好的 N 個版本。但是，在真實(shí)的設(shè)備上體驗(yàn) N 個原型，我們還是可以做到的。
原型雖然沒有開發(fā)好的產(chǎn)品那么順暢和流暢，但是，如果用墨刀在手機(jī)端體驗(yàn)一款加了鏈接和動效的 App 原型，一樣可以發(fā)現(xiàn)很多問題。
不過，根據(jù)經(jīng)歷和觀察，筆者發(fā)現(xiàn)，我們?nèi)祟?，是不喜歡體驗(yàn)原型的。
想一想，平常工作中，我們可能會樂此不疲的去體驗(yàn)開發(fā)好的測試版產(chǎn)品。但對于原型，大部分時候，都是匆匆忙忙就過掉了。
個人有個猜測，就好像人類喜歡逗貓遛狗、卻不太喜歡逗桌子上的模型貓和模型狗一樣，我們?nèi)祟愂遣惶敢饣ㄙM(fèi)太多時間和精力去和原型這種“假產(chǎn)品”互動的。
所以，某種程度上，體驗(yàn)原型，是一種反人性的行為。
但卻是一種非常經(jīng)濟(jì)和高效的方法。
因?yàn)槭紫?，大部分時候，我們都是先選中一個原型方案，然后去設(shè)計(jì)、去開發(fā)；其次，等到開發(fā)好進(jìn)入測試環(huán)節(jié)，這時候，原型往往就成了測試的標(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)化。
如前所述，用利器來創(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)，這兩個來自蘋果和谷歌的設(shè)計(jì)規(guī)范，很多時候，我們都是拿它們當(dāng)字典用。即哪一點(diǎn)不會或不太確定的時候，去翻一翻查一查。
雖然這倆規(guī)范很優(yōu)秀，但是卻很難被我們“物盡其用”，因?yàn)樗鼈兊闹R體系過于龐大，有點(diǎn)像一本字典。拿著“字典”里的每一條原則去檢驗(yàn)我們的交互設(shè)計(jì)，這是很難做到的。
但是有一個設(shè)計(jì)規(guī)范，去非常適合拿來檢驗(yàn)我們的交互設(shè)計(jì)，那就是尼爾森十大可用性原則。
太詳細(xì)的就不贅述了，這里我們再簡單回顧下這十條原則。
1) 狀態(tài)可見
用戶時刻清楚，正在發(fā)生什么
2) 環(huán)境貼切
營造一個用戶熟悉的環(huán)境，比如語言、詞語、圖標(biāo)等
3) 用戶可控
控制權(quán)交給用戶，并且多數(shù)時候，考慮支持撤銷重做
4) 一致性
方方面面的統(tǒng)一，比如文案、視覺、操作等
5) 防錯
盡最大可能，幫助用戶，避免用戶犯錯
6) 易取：識別比記憶好
通過把組件、按鈕等元素可見化，降低用戶記憶負(fù)擔(dān)
7) 靈活高效
優(yōu)先考慮人數(shù)最多的中級用戶，同時兼顧高級和初級用戶
8) 易掃：優(yōu)美且簡約
閱讀體驗(yàn)要好，掃視體驗(yàn)也要好；保持簡約和美觀
9) 容錯
幫助用戶識別、診斷，并從錯誤中恢復(fù)
10) 人性化幫助
日常的使用最好脫離幫助文檔，但有必要提供幫助文檔
個人非常建議，在日常工作中，把尼爾森十大可用性原則作為一把標(biāo)尺，來時時刻刻檢驗(yàn)我們的交互設(shè)計(jì)。
交互設(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ì)的周到。
其中，個人認(rèn)為，最為核心的是第二點(diǎn)：多體驗(yàn)原型或產(chǎn)品，直到自己覺得周到為止。
因?yàn)?，正如電影《霸王別姬》的一句臺詞所說：人，得自個兒成全自個兒。
最近有同學(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ì)用的最多的原則——尼爾森十大可用性原則。
很多情況用戶是不知道當(dāng)前狀態(tài)的，所以在適當(dāng)?shù)臅r間內(nèi)做出反饋很重要。不僅能讓用戶知道情況，還能防止用戶發(fā)生錯誤操作。常見反饋有刷新提示、新頁面加載提示、支付提示、下載提示。除了結(jié)果反饋提示外，對于進(jìn)程中的頁面會用進(jìn)度條進(jìn)行表現(xiàn)。
今日頭條APP首頁中，看過的文章標(biāo)題變?yōu)榱嘶疑?、而沒讀過的文章標(biāo)題依舊保留了黑色字體。
簡單來說就是讓軟件看起來跟符合真實(shí)世界，還原現(xiàn)實(shí)認(rèn)知。通過直觀的視覺快速傳達(dá)給用戶。
音樂軟件通過模擬現(xiàn)實(shí)唱片并結(jié)合旋轉(zhuǎn)的播放動畫，從而降低了學(xué)習(xí)成本，更輕松的理解界面。
說白了就是給用戶發(fā)后悔藥，當(dāng)用戶誤操作時要給用戶提供提供撤銷、取消、重做等相關(guān)功能。買錯商品可以無條件包郵退回。
拼多多凸顯了“退貨免運(yùn)費(fèi)”“7無理由退回”服務(wù)，解決了用戶買到不滿意產(chǎn)品的售后擔(dān)心。減少了承擔(dān)運(yùn)費(fèi)的成本，從而促使了用戶快速下單。
一個好的產(chǎn)品從視覺上首先是統(tǒng)一的，色彩、字體、元素保持統(tǒng)一，能加強(qiáng)用戶的記憶力。在交互中同樣如此，頁面結(jié)構(gòu)、操作反饋都需要保持一致性。
QQ首頁列表中不管你點(diǎn)擊那一條目，下一級界面都是由右往左滑出。點(diǎn)擊左上角返回按鈕，會從左往右滑回，體驗(yàn)完全一致；幾乎所有產(chǎn)品進(jìn)入下一層級頁面的交互方式都是如此。
為了減少用戶錯誤的可行性，進(jìn)階是給出錯誤反饋是不夠的，用心一點(diǎn)的設(shè)計(jì)師其實(shí)會發(fā)現(xiàn)很多的產(chǎn)品是這樣做的。為了防止錯誤的發(fā)生，會進(jìn)行防錯設(shè)計(jì)。
比如在發(fā)朋圈時，點(diǎn)擊返回按鈕出現(xiàn)的提示彈窗。彈出框方式會增加不可逆操作的難度，減少操作刪除帶來的順勢。更人性化的是，提示給出了保留和不保留按鈕選擇，選擇保留退出還可以再次編輯。
通過把組件、按鈕及選項(xiàng)可見化，減少用戶的記憶負(fù)荷，讓使用更輕松。在使用過程中不需要記住上一頁面的信息就能完成當(dāng)前頁的操作。
通常更新完APP之后，會出現(xiàn)新功能引導(dǎo)。引導(dǎo)提示能告訴用戶新功能所在的位置和作用。這也是協(xié)助記憶原則的體現(xiàn)。
好的產(chǎn)品不僅僅需要滿足新用戶，還需要滿足深度用戶。保證第一次使用者，能清晰明白功能。對于老用戶需要提供更高效使用方式。
對用戶重復(fù)使用的功能，提供便捷按鈕。比如叮咚買菜的再次購買。
適當(dāng)?shù)牧舭啄茏岉撁婀δ芡怀?，也能讓視覺更加舒服。精致的圖形元素能給用戶留下好的印象。
很多K12的產(chǎn)品會運(yùn)用IP形象進(jìn)行延展，不僅強(qiáng)化了品牌記憶力，更增強(qiáng)了互動感。
好了，以上就老王對尼爾森十大原則的解析。其實(shí)原理很簡單，甚至很多都是很直觀的廢話，但如果不把它們一條條列出來，還是有很多人連這些廢話都做不到。
關(guān)注細(xì)節(jié)，才能成就大事！
一、什么是交互設(shè)計(jì)？
先來看一下百度百科的定義
交互設(shè)計(jì)（英文Interaction Design, 縮寫IXD)，是定義、設(shè)計(jì)人造系統(tǒng)的行為的設(shè)計(jì)領(lǐng)域，它定義了兩個或多個互動的個體之間交流的內(nèi)容和結(jié)構(gòu)，使之互相配合，共同達(dá)成某種目的。交互設(shè)計(jì)努力去創(chuàng)造和建立的是人與產(chǎn)品及服務(wù)之間有意義的關(guān)系，以“在充滿社會復(fù)雜性的物質(zhì)世界中嵌入信息技術(shù)”為中心。交互系統(tǒng)設(shè)計(jì)的目標(biāo)可以從“可用性”和”用戶體驗(yàn)“兩個層面上進(jìn)行分析，關(guān)注以人為本的用戶需求。簡而言之，交互設(shè)計(jì)是解決特定場景下的人群如何高效使用機(jī)器或軟件的目標(biāo)行為。
為什么要做交互設(shè)計(jì)
在使用網(wǎng)站，軟件，消費(fèi)產(chǎn)品或各種服務(wù)的時候（實(shí)際上是在同它們交互），使用過程中的感覺就是一種交互體驗(yàn)。隨著網(wǎng)絡(luò)和新技術(shù)的發(fā)展，各種新產(chǎn)品和交互方式越來越多，人們也越來越重視對交互的體驗(yàn)。當(dāng)大型計(jì)算機(jī)剛剛研制出來的時候，可能為當(dāng)初的使用者本身就是該行業(yè)的專家，沒有人去關(guān)注使用者的感覺；相反，一切都圍繞機(jī)器的需要來組織，程序員通過打孔卡片來輸入機(jī)器語言，輸出結(jié)果也是機(jī)器語言，那個時候同計(jì)算機(jī)交互的重心是機(jī)器本身。當(dāng)計(jì)算機(jī)系統(tǒng)的用戶越來越由普通大眾組成的時候，對交互體驗(yàn)的關(guān)注也越來越迫切了。因此交互設(shè)計(jì)作為一門關(guān)注交互體驗(yàn)的新學(xué)科在二十世紀(jì)八十年代產(chǎn)生了。
從用戶角度來說，交互設(shè)計(jì)是一種如何讓產(chǎn)品易用，有效而讓人愉悅的技術(shù)，它致力于了解目標(biāo)用戶和他們的期望，了解用戶在同產(chǎn)品交互時彼此的行為，了解“人”本身的心理和行為特點(diǎn)，同時，還包括了解各種有效的交互方式，并對它們進(jìn)行增強(qiáng)和擴(kuò)充。
通過對產(chǎn)品的界面和行為進(jìn)行交互設(shè)計(jì)，讓產(chǎn)品和它的使用者之間建立一種有機(jī)關(guān)系，從而可以有效達(dá)到使用者的目標(biāo)，這就是交互設(shè)計(jì)的目的。
二、交互設(shè)計(jì)常用原則和定律有哪些？
尼爾森十大可用性原則
1、狀態(tài)可見原則
系統(tǒng)應(yīng)該讓用戶時刻清楚當(dāng)前發(fā)生了什么事情，也就是快速的讓用戶了解自己處于何種狀態(tài)、對過去發(fā)生、當(dāng)前目標(biāo)、以及對未來去向有所了解，一般的方法是在合適的時間給用戶適當(dāng)?shù)姆答?，防止用戶使用出現(xiàn)錯誤。
即在用戶操作界面功能時給予實(shí)時反饋，例如：頁面加載狀態(tài)提示、按鈕點(diǎn)擊后的狀態(tài)變化、進(jìn)度條提示等。
2、環(huán)境貼切原則
設(shè)計(jì)的一切表現(xiàn)和表述，盡可能貼近用戶所在的環(huán)境，將現(xiàn)實(shí)環(huán)境的操作功能巧妙的轉(zhuǎn)化為線上功能，使其貼近用戶。使用用戶能聽懂的專業(yè)術(shù)語，涉及到專業(yè)化語言時要轉(zhuǎn)化成用戶熟悉的語言。
即模擬真實(shí)的事物，使用戶更容易理解。例如：天氣應(yīng)用中的天氣插圖、音樂播放器的膠片都是生活中熟悉的場景和物品，降低理解成本。
3、操作可控原則
對于用戶的誤操作，提供二次確認(rèn)或者撤銷的功能，這樣可提高用戶的操作可控性。
例如：刪除聯(lián)系人二次確認(rèn)提示、消息可撤回操作。
4、一致性原則
遵循統(tǒng)一的產(chǎn)品設(shè)計(jì)規(guī)范／邏輯。這里的一致性包含產(chǎn)品和跨平臺產(chǎn)品之間的一致性。
一致性包含視覺交互、文案描述、組建樣式等，例如：微信小程序設(shè)計(jì)規(guī)范。
5、防錯原則
設(shè)置防錯的機(jī)制，減少用戶犯錯。在用戶選擇動作發(fā)生之前，就要防止用戶容易混淆或者錯誤的選擇。
例如：用戶名稱校驗(yàn)提示、手機(jī)號碼位數(shù)限制等。
6、易取原則
減少用戶記憶負(fù)荷，在適合的時機(jī)給用戶需要獲取的信息。
例如：驗(yàn)證碼讀取、找人轉(zhuǎn)賬提示等。
7、靈活高效原則
提供靈活的操作和高效的獲取信息能力。
例如：手機(jī)號碼一鍵登錄、消息關(guān)鍵字識別等。
8、優(yōu)美簡約原則
保留產(chǎn)品最主要的信息，如果不是優(yōu)先級最高，要盡一切可能避免去影響產(chǎn)品的簡潔和美觀。
9、容錯原則
用戶在使用產(chǎn)品過程中出現(xiàn)了問題，及時準(zhǔn)確的告知用戶出現(xiàn)問題的原因。
例如：信息輸入提示、搜索無結(jié)果等。
10、提供人性化幫助
在用戶需要的時候提供必要的幫助說明。
例如：新功能引導(dǎo)、解釋說明文案等。
七個交互設(shè)計(jì)定律
1、菲茲定律
點(diǎn)擊一個目標(biāo)的時間同以下兩個因素有關(guān)：
（1）設(shè)備當(dāng)前位置和目標(biāo)位置的距離（D）。距離越長，所用時間越長；
（2）目標(biāo)的大小（S）。目標(biāo)越大，所用時間越短。
該定律經(jīng)常運(yùn)用于鼠標(biāo)從點(diǎn)A到點(diǎn)B的運(yùn)動。
例如常用按鈕的尺寸設(shè)計(jì)等。
2、?？硕?
一個人面臨的選擇（n）越多，所需要作出決定的時間（T）就越長。
交互設(shè)計(jì)中要合理設(shè)置選項(xiàng)，以免用戶使用中決策時間過長，降低使用效率。
3、米勒7±2定律
喬治米勒對短時記憶能力進(jìn)行了定量研究，他發(fā)現(xiàn)人類頭腦最好的狀態(tài)能記憶含有7（±2）項(xiàng)信息塊，在記憶了 5-9 項(xiàng)信息后人類的頭腦就開始出錯。
例如：手機(jī)號碼的分位顯示、應(yīng)用中標(biāo)簽欄數(shù)量等
4、鄰近性法則
人們通常將距離近的事物劃分為一組。
界面設(shè)計(jì)中可以用對象間的相對距離來區(qū)分信息層級。
5、復(fù)雜性守恒定律
每個應(yīng)用程序都具有其內(nèi)在的、無法簡化的復(fù)雜度。無論在產(chǎn)品開發(fā)環(huán)節(jié)還是在用戶與產(chǎn)品的交互環(huán)節(jié)，這一固有的復(fù)雜度都無法依照我們的意愿去除，只能設(shè)法調(diào)整、平衡。
例如：在智能手機(jī)出現(xiàn)之前，手機(jī)上的操作按鈕都是實(shí)體按鈕。在智能手機(jī)出現(xiàn)手，手機(jī)被整個屏幕占據(jù)后，所有的操作都集合在了手機(jī)系統(tǒng)之中，等于把物理操作轉(zhuǎn)移到了系統(tǒng)操作中，其本身的功能復(fù)雜程度并沒有發(fā)生改變，只是轉(zhuǎn)移了而已。
6、防錯原則
大部分的意外都是由設(shè)計(jì)的疏忽，而不是人為操作疏忽。因此，在設(shè)計(jì)中要有必要的防錯機(jī)制；在此，特別要注意在用戶操作具有毀滅性效果的功能時要有提示，防止用戶犯不可挽回的錯誤。
例如：登錄時用戶名校驗(yàn)，手機(jī)號碼位數(shù)限制等。
7、奧卡姆剃刀原則
“切勿浪費(fèi)較多東西去做，用較少的東西，同樣可以做好的事情。
”這個原理稱為“如無必要，勿增實(shí)體”，即“簡單有效原理”。
在設(shè)計(jì)中可以使用戶關(guān)注最主要的信息而非其它無關(guān)緊要的事物，從而提升使用效率。
三、交互設(shè)計(jì)如何開展工作
首先在交互設(shè)計(jì)師拿到需求后不要急著打開軟件開始繪制線框圖，而是要先分析需求，了解產(chǎn)品的戰(zhàn)略層和范圍層的業(yè)務(wù)目標(biāo)。把握產(chǎn)品設(shè)計(jì)大方向，只有方向?qū)α撕竺娴墓ぷ鞑攀怯袃r值的。
把握了產(chǎn)品方向，下面就該進(jìn)行需求的分析，
首先針對需求考慮5個問題：
1、為什么要做這個功能？（業(yè)務(wù)需求）
2、產(chǎn)品期望得到怎樣的成果？（業(yè)務(wù)目標(biāo)）
3、誰來使用？（目標(biāo)用戶）
4、他們要怎樣使用？（用戶需求）
5、如何讓他們都來使用？（將業(yè)務(wù)目標(biāo)轉(zhuǎn)化為用戶行為）
清楚這5個問題后，再根據(jù)交互設(shè)計(jì)流程進(jìn)行一步一步的進(jìn)行
這實(shí)際上就是對需求的戰(zhàn)略層分析。
我們進(jìn)一步分析業(yè)務(wù)需求（業(yè)務(wù)目的、業(yè)務(wù)目標(biāo)）和用戶需求（目標(biāo)用戶、用戶體驗(yàn)?zāi)繕?biāo)），把握關(guān)鍵因素（用戶的動機(jī)、擔(dān)憂和影響目標(biāo)達(dá)成的障礙）。
歸納這些需求，明確設(shè)計(jì)策略。
將“業(yè)務(wù)目標(biāo)”轉(zhuǎn)化為“用戶行為”，通過引導(dǎo)用戶的使用來幫助產(chǎn)品實(shí)現(xiàn)目標(biāo)。
從設(shè)計(jì)“用戶行為”到設(shè)計(jì)“用戶界面”，用戶行為決定了用戶界面，用戶界面也導(dǎo)致了用戶會出現(xiàn)什么樣的行為。
設(shè)計(jì)需求分析方法就是要幫助用戶創(chuàng)造動機(jī)、排除擔(dān)憂、解決障礙。
四、如何進(jìn)行用戶研究，方法有哪些
評估的形式及方法
常見的評估形式分為三類：
1、評估主體：根據(jù)評估的主體不同來進(jìn)行區(qū)分，即誰來做評估。
按照評估主體來區(qū)分主要有兩個主體：用戶和專家
用戶評估主要靠收集用戶使用數(shù)據(jù)，也就是用戶測試，它的數(shù)據(jù)相對客觀，但時間和費(fèi)用較多，評估范圍較窄。
專家評估是讓工程師及設(shè)計(jì)師等專家基于自身的專業(yè)知識和經(jīng)驗(yàn)進(jìn)行評估的一種方式。專家評估相對主觀，但費(fèi)時少、費(fèi)用少、評估范圍窄。
兩種評估方法可以相互補(bǔ)充，并結(jié)合使用。
2、評估性質(zhì)：例如定性評估、定量評估或著其它方式。
按照評估的性質(zhì)來區(qū)分可以分為定量評估和定性評估。
定量評估是指對可以計(jì)量的部分進(jìn)行評價，如點(diǎn)擊量、使用率等，可以用數(shù)據(jù)來說明。
定性評估是指對非計(jì)量性的部分進(jìn)行評價，如流暢度、舒適性、創(chuàng)造性等進(jìn)行評價。它只能表示一個度，無法準(zhǔn)確用數(shù)據(jù)來說明問題。
3、評估過程：按照評估的過程來進(jìn)行區(qū)分。
從評估的過程來區(qū)分可以分為理性評估和感性評估。
理性評估相對客觀，從客觀的角度出發(fā)判斷客觀事物。
感性評估更為主觀，評估結(jié)果并沒有客觀規(guī)律。
在實(shí)際應(yīng)用中也需要將理性評估和感性評估結(jié)合使用，才能完整的完成我們的任務(wù)，達(dá)到我們的目標(biāo)。
常見的評估方法有四種：
1、原型評估方法：在產(chǎn)品研發(fā)過程中，對于界面設(shè)計(jì)以及程序的測試來獲得用戶的反饋是至關(guān)重要的。以用戶為中心和交互式設(shè)計(jì)的重要因素之一就是原型方法，原型方法的目的是將界面設(shè)計(jì)與用戶的需求進(jìn)行匹配。
一般來說原型評估方法分為三大類型：
（1）快速原型：原型迅速成型并分配實(shí)施，在原型實(shí)驗(yàn)收集的信息基礎(chǔ)上，系統(tǒng)從草案中得以完善。
（2）增量原型：應(yīng)用與大型系統(tǒng)，從系統(tǒng)的基本骨架開始，需要階段性的安裝，及系統(tǒng)的本質(zhì)特征是在初次安裝完成后允許階段性測試，以減少遺漏的重要特征。
（3）演化原型：對前期的設(shè)計(jì)原型不斷進(jìn)行補(bǔ)充和優(yōu)化，直到成為最后的系統(tǒng)。
2、簡易測試評估方法
在條件不允許的情況下，可以采取簡易的方法來對用戶體驗(yàn)進(jìn)行評價。步驟是：
（1）實(shí)驗(yàn)室環(huán)境準(zhǔn)備：準(zhǔn)備好測試用的電腦或其他媒介。兩個房間，房間1用來對被測試者進(jìn)行測試，房間2用于設(shè)計(jì)師和工程師的觀察。
（2）被試選擇：分為用戶組和專家組。
（3）進(jìn)行測試：房間1中被試者根據(jù)自己的選擇進(jìn)行操作和測試，同時說出自己的內(nèi)心想法，觀察員在調(diào)查表上記錄被試者的每一次的操作情況，包括出錯情況和被試者的口語描述，當(dāng)被試者在測試過程中遇到困難或操作無法進(jìn)行時，觀察員要給予一定的客觀提示。房間2中通過相關(guān)設(shè)備將房間1的情況傳輸?shù)椒块g2，設(shè)計(jì)師和工程師實(shí)時觀察和記錄被試者的情況，以便今后對產(chǎn)品做進(jìn)一步的修改和完善。
（4）結(jié)果分析：通過多次測試后，將測試結(jié)果匯總，提取出交互設(shè)計(jì)中存在的問題，以及對交互設(shè)計(jì)有益的建議形成測試報(bào)告。
3、眼動評估方法
眼動追蹤可以用來評價對產(chǎn)品（包括硬件產(chǎn)品和軟件產(chǎn)品）設(shè)計(jì)的感性意象，評測產(chǎn)品設(shè)計(jì)特征。眼動評估的主要指標(biāo)有注視熱點(diǎn)圖、搜索過程測量指標(biāo)、興趣區(qū)域即用戶視覺注意的焦點(diǎn)區(qū)?？梢越Y(jié)合口語分析法了解用戶的所想 和所做。
4、腦電評估方法
通過對腦電信號的分析，研究者可以探索大腦的認(rèn)知加工過程和受試者的心理狀況。近年來腦電評估方法在人機(jī)交互心理學(xué)等領(lǐng)域應(yīng)用廣泛，被用來評估交互設(shè)計(jì)、人機(jī)界面、產(chǎn)品設(shè)計(jì)等方面的內(nèi)容。但是腦電評估也有一定的缺陷，例如空間分辨率上的局限性，因而對某些認(rèn)知過程和腦區(qū)的定位并不是很準(zhǔn)確。第二，在許多相似的實(shí)驗(yàn)研究中，由于研究者采用了不同的實(shí)驗(yàn)材料和方法等，實(shí)驗(yàn)結(jié)果也存在差異性。第三 ，由于采集記錄時間的滯后性，腦電所記錄的并不一定是當(dāng)下被試者所想到的內(nèi)容。
采取哪種方法來開展用戶測試和評估，要根據(jù)不同的任務(wù)結(jié)合不同的環(huán)境來開展，比如：時間、成本、資源等。
啟發(fā)式評估法
是專家評估法的一種，也被稱為經(jīng)驗(yàn)性評估，最初由Nielsen博士提出。簡單來說，啟發(fā)式評估是一種簡易的可用性評估方法，使用一套相對簡單、通用、有啟發(fā)性的可用性原則，讓幾個評審根據(jù)專業(yè)知識和經(jīng)驗(yàn)來進(jìn)行評估，發(fā)現(xiàn)產(chǎn)品潛在的可用性問題。
啟發(fā)式評估的兩大要素：評估者和評估參照的原則。
對評估者的要求主要有四個方面：
（1）人數(shù)：推薦3-5人，有時會更少
（2）知識：最好同時具有可用性知識及設(shè)計(jì)知識
（3）身份：最好是非設(shè)計(jì)者本人，否者不具有客觀性
（4）崗位：設(shè)計(jì)師或用戶研究員
評估參照的原則有：尼爾森十大可用性原則、八項(xiàng)黃金法則、首頁可用性指南、ios設(shè)計(jì)指南、拓展原則、HHS網(wǎng)頁設(shè)計(jì)與可用性指南等。具體需要根據(jù)實(shí)際項(xiàng)目來選擇，常用的是尼爾森十大交互原則。
什么時候適合使用啟發(fā)式評估法？
交互設(shè)計(jì)和UI設(shè)計(jì)階段、測試優(yōu)化和產(chǎn)品發(fā)布后的階段。
啟發(fā)式評估的優(yōu)缺點(diǎn)有哪些？
優(yōu)點(diǎn)：成本低、效率高、發(fā)現(xiàn)大多數(shù)可用性問題，甚至是用戶測試時不會出現(xiàn)的問題。
缺點(diǎn)：不能代表真實(shí)用戶，相對主觀、有時候發(fā)現(xiàn)問題過多、對評估人員知識背景要求較高。
什么時候適用？
（1）適合時間、資源有限的情況下快速發(fā)現(xiàn)可用性問題，降低風(fēng)險(xiǎn)及成本。
（2）版本變動不大的情況下，小成本檢驗(yàn)。
（3）作為可用性測試的之前準(zhǔn)備。
啟發(fā)式評估流程是什么？
（1）準(zhǔn)備階段：確定范圍、背景調(diào)查、參考評估原則、評委邀約、材料準(zhǔn)備
（2）執(zhí)行階段：任務(wù)走查、整體走查、結(jié)果記錄
（3）分析階段：匯總討論、報(bào)告總結(jié)、優(yōu)化方案
可用性測試
先來看一下我們在平時工作中常常會聽到這樣的問題
產(chǎn)品經(jīng)理：我們的用戶覺得產(chǎn)品好不好用？使用過程中會不會遇到問題？他們是否滿意？
設(shè)計(jì)師：設(shè)計(jì)的過程有一些糾結(jié)的地方，不知道實(shí)際用戶是怎么理解和操作的怎么辦？
產(chǎn)品開發(fā)后：想在大推前檢驗(yàn)一下產(chǎn)品是否靠譜，適不適合大推？
當(dāng)我們遇到這樣的一些問題時，如何找到方法快速得到答案呢？
那就是接下來要介紹的可用性測試方法。
可用性測試是一種常用的、高效的方法。
它的定義是：通過觀察具有代表性的用戶，完成產(chǎn)品的典型任務(wù)，從而找出產(chǎn)品可用性問題并解決，目的是為了改善產(chǎn)品，讓產(chǎn)品更容易使用。
什么時候適合做可用性測試呢？
一般是在：交互設(shè)計(jì)或UI設(shè)計(jì)、測試優(yōu)化、正式發(fā)布三個階段來做。當(dāng)然是越早做越好，可以盡早發(fā)現(xiàn)問題并及時調(diào)整。
類型分為兩種：形成式和總結(jié)式
形成式特點(diǎn)：小樣本、發(fā)現(xiàn)問題為主、不能做定量對比。
總結(jié)式特點(diǎn)：大樣本（30人以上）、定量的評估、可以做對比評估
可用性測試可以解決什么樣的問題？
1、發(fā)現(xiàn)問題，產(chǎn)品在體驗(yàn)上是否存在問題
2、檢驗(yàn)實(shí)現(xiàn)，期望的設(shè)計(jì)目的有沒有達(dá)成，是否滿足了用戶的期望
3、產(chǎn)品評估，用戶是否會滿意
4、理解用戶，了解用戶行為習(xí)慣，了解用戶認(rèn)知，找到某些問題的原因
測試流程是什么？
整體上分為4個階段：1、準(zhǔn)備 2、測試 3、分析 4、優(yōu)化
1、準(zhǔn)備階段要做的有哪些？
確定目標(biāo)：確定測試目標(biāo)決定了后面測試過程要怎樣去設(shè)計(jì)
常見的測試目標(biāo)有：
·對整個產(chǎn)品做可用性評估
·對新增的功能模塊進(jìn)行評估
·提前觀察新方案對新老用戶有怎樣的影響
·提前檢測改版是否達(dá)到預(yù)計(jì)目標(biāo)
·設(shè)計(jì)時存在爭議，如何選擇解決方案
·某個環(huán)節(jié)流失率較高，檢測是否為設(shè)計(jì)原因?qū)е?
·需要拓展某一類特殊用戶，測試針對這類用戶在設(shè)計(jì)上是否需要作出調(diào)整
準(zhǔn)備測試方案
方案中應(yīng)當(dāng)包含以下內(nèi)容：
·測試目的：明確測試的目的及范圍，測試目的決定了測試方案
·測試關(guān)注點(diǎn)：與負(fù)責(zé)的設(shè)計(jì)師一起梳理測試中要關(guān)注的問題
·用戶招募：招募要求，樣本配比，招募渠道
·經(jīng)費(fèi)預(yù)算：獎勵的形式和額度
·時間計(jì)劃：用于把控時間計(jì)劃
撰寫測試腳本：設(shè)計(jì)測試任務(wù)，通過用戶行為去觀察提問來獲得我們想要的內(nèi)容
基本的流程有：
·暖場：3min，簡單聊天，消除用戶的緊張情緒
·測試說明：2min，對測試內(nèi)容規(guī)則做說明
·測試前訪談：10min，了解用戶基本信息
·簡單試用：3min，讓用戶熟悉產(chǎn)品
·測試執(zhí)行：30-45min，提示任務(wù)并觀察
·事后訪談：15min，針對疑點(diǎn)問點(diǎn)追問，填寫評價表
·道別：5min，支付禮金，送用戶離開
招募用戶
招募什么樣的用戶呢？
·根據(jù)測試目的來定，找出與測試目標(biāo)有關(guān)的篩選緯度
·特別考慮用戶使用行為相關(guān)的特征，例如競品使用經(jīng)驗(yàn)，使用產(chǎn)品的目的，用戶的活躍度等
·挑選最核心的緯度，轉(zhuǎn)化成用戶招募的條件，并盡量客觀化，具體化，可衡量
·避免設(shè)置交叉條件過多，導(dǎo)致樣本代表性降低
·學(xué)會辨別真假的用戶信息
招募多少用戶合適？
·以發(fā)現(xiàn)問題為目的快速可用性測試，6-8名即可
·考慮產(chǎn)品的復(fù)雜性，覆蓋人群差異性，適當(dāng)做調(diào)整，拓展到10-15名
招募渠道有哪些？
·公司內(nèi)部
·現(xiàn)有產(chǎn)品用戶庫
·公司其他產(chǎn)品用戶庫
·熟人，朋友等
·推廣渠道：官微、公眾號、門戶網(wǎng)等
·社區(qū)，論壇，qq群等
·第三方調(diào)研公司
準(zhǔn)備測試素材：低保真或高保真原型，或線上已經(jīng)可以使用的產(chǎn)品，也可以準(zhǔn)備一些量表工具來輔助測試。在測試
過程中需要用到的電腦或手機(jī)設(shè)備，攝像頭，紙，筆，桌椅等。
測試場地選擇：
·專業(yè)可用性測試實(shí)驗(yàn)室：一般對測試質(zhì)量要求較高，旁聽人數(shù)較多且需要采集豐富的數(shù)據(jù)的時候采用此方法。實(shí)驗(yàn)室有兩個房間，一個測試間，一個觀察間，中間有單向玻璃分隔。測試間中有多角度的攝像頭，用來記錄測試過程，觀察間可以同步看到測試間里的情況，
·普通測試環(huán)境：在觀察人數(shù)較少（小于3人），條件有限時使用。
預(yù)測試階段：正式測試前進(jìn)行預(yù)測試，保證測試流程通暢
·走查：記錄可能出現(xiàn)的問題
·預(yù)測試：找人先測試一下
·調(diào)整：調(diào)整測試流程
正式測試階段
測試參與人員有
·主持人：引導(dǎo)整個測試流程
·記錄員：記錄操作行為，訪談內(nèi)容，發(fā)現(xiàn)問題等
·產(chǎn)品團(tuán)隊(duì)：參與旁聽，觀察，結(jié)束后交流
·用戶：完成測試及訪談任務(wù)
測試過程中需要觀察的要點(diǎn)：
·用戶是否獨(dú)立完成了任務(wù)
·是否存在無效操作或不知所措的情況
·用戶是否滿意
結(jié)果分析
邊測試邊總結(jié)，越及時越好
·測試完一個用戶，做一次小結(jié)
·測試結(jié)束當(dāng)天寫小結(jié)，與設(shè)計(jì)師當(dāng)場討論
·重要問題反饋后再總結(jié)分析報(bào)告
·邊測邊改，邊改邊測
結(jié)果分析4個步驟：1、對發(fā)現(xiàn)分類 2、整理不確定項(xiàng) 3、評定優(yōu)先級 4、結(jié)果記錄
撰寫報(bào)告
從4個方面來寫：
·總體如何
·有哪些問題
·嚴(yán)重程度如何
·建議是什么
·除此之外，還可以圍繞關(guān)注的問題，未滿足需求補(bǔ)充分析
優(yōu)化跟蹤
在測試之后需要出優(yōu)化的方案，測試優(yōu)化的過程是循環(huán)的。
測試之后如果還有其他問題沒有得到解決，可以結(jié)合其他的一些測試方法來得到。
問卷調(diào)研
問卷調(diào)查法是以書面提出問題的方式搜集數(shù)據(jù)的一種研究方法，研究者將所要研究的問題編制成問題表格，讓受訪對象以郵寄、當(dāng)面作答、在線作答或追蹤訪問的方式填寫，從而了解被試者對某一現(xiàn)象或問題的看法和意見。問卷調(diào)研可以用于需求挖掘階段，也可以用于產(chǎn)品上線后的評估階段。
如果是想了解用戶對產(chǎn)品上線后的滿意度，可以使用問卷調(diào)研的方法。它比較適合去了解用戶的認(rèn)知態(tài)度，也可以附帶了解用戶的行為習(xí)慣，
問卷調(diào)研的優(yōu)缺點(diǎn)
優(yōu)點(diǎn)：統(tǒng)一性、靈活性、量化性、匿名性
缺點(diǎn)：（1）只能獲得書面的信息，而不能了解到生動、具體的情況。（2）缺乏彈性，很難做深入的定性調(diào)研。（3）調(diào)查者難以了解被調(diào)查者是否認(rèn)真作答，是不是自己填寫的。（4）填寫問卷比較容易，有些別調(diào)查者會隨意選擇，或者按照社會主流觀點(diǎn)選擇，這樣會使調(diào)查失去真實(shí)性。（5）回復(fù)效率低，對無回答者的研究比較困難。
問卷調(diào)查的使用場景
適用于：（1）需要進(jìn)行定量分析的調(diào)研。（2）需要匿名進(jìn)行調(diào)研的問題。（3）對已有假設(shè)進(jìn)行檢驗(yàn)。（4）尋找問題隱藏的關(guān)聯(lián)。（5）對產(chǎn)品設(shè)計(jì)用戶認(rèn)知及態(tài)度的評估。
不適用于：（1）發(fā)現(xiàn)和描述具體問題。（2）探索受訪對象的模糊態(tài)度。（3）獲取創(chuàng)新想法。（4）獲取精確的行為數(shù)據(jù)。
問卷調(diào)研流程
1、確定目標(biāo)：確定調(diào)研目的、對象、分析目的和應(yīng)用對象。
2、調(diào)研方案：通過訪談、經(jīng)驗(yàn)、理論等，確定調(diào)研框架，題目選項(xiàng)，分析思路，投放渠道，相本配比等。
3、問卷設(shè)計(jì)：問卷設(shè)計(jì)，問題美化，投放渠道。
4、問卷測試：多人測試，確保問卷的可讀性，邏輯通暢
5、問卷投放：按照計(jì)劃好的投放渠道進(jìn)行投放，回收數(shù)據(jù)，數(shù)據(jù)清洗
6、問卷分析及填寫報(bào)告：分析及報(bào)告填寫，調(diào)研結(jié)果落地
數(shù)據(jù)分析
概述：通過在網(wǎng)站或應(yīng)用中進(jìn)行數(shù)據(jù)埋點(diǎn)，獲取用戶對產(chǎn)品的使用和行為數(shù)據(jù)，并進(jìn)行基于產(chǎn)品體驗(yàn)優(yōu)化的數(shù)據(jù)進(jìn)行分析。
數(shù)據(jù)分析可以做什么？
1、可以做到用戶從哪里來，來了多少
2、獲取用戶屬性，用戶地域，用戶設(shè)備
3、訪問了哪些頁面，使用了哪些功能，消費(fèi)了多少錢，消耗了多少時間
4、哪些流量可能存在問題，忠誠度如何，活躍度如何，有沒有達(dá)到目標(biāo)，和行業(yè)相比如何
5、流失情況如何，離開之后是否還回來
可以作為產(chǎn)品的眼鏡和大腦，提供客觀衡量的依據(jù)，可以持續(xù)優(yōu)化改進(jìn)。
數(shù)據(jù)獲取方式的對比
日志文件：優(yōu)勢，完整的服務(wù)端請求記錄。
缺點(diǎn)，日志的獲取和清洗有過濾成本，許多頁面操作無法記錄。
JS頁面標(biāo)記：優(yōu)勢，數(shù)據(jù)獲取可控、靈活，可以對頁面操作記錄進(jìn)行記錄，獲取數(shù)據(jù)比較完整豐富。
缺點(diǎn)，需要在頁面植入JS標(biāo)記代碼，某些情況下無法獲取，如當(dāng)用戶禁用JS功能時。
常用的數(shù)據(jù)監(jiān)控平臺
1、第三方監(jiān)控平臺：如Google Analytics、百度統(tǒng)計(jì)、騰訊云分析等
2、自研平臺
數(shù)據(jù)分析流程
1、監(jiān)控 2、定義 3、埋點(diǎn) 4、測量 5、分析 6、優(yōu)化
Web分析常用的指標(biāo)
PV：是指頁面瀏覽量，網(wǎng)頁瀏覽數(shù)實(shí)施評價網(wǎng)站流量最常用的指標(biāo)之一，用戶每一次訪問網(wǎng)站中的頁面均被記錄，對統(tǒng)一頁面多次訪問，訪問量累計(jì)
UV：是指獨(dú)立訪客，是通過互聯(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、其他
復(fù)合指標(biāo)
跳出率：指用戶來到網(wǎng)站，只瀏覽了一個頁面就離開的訪問次數(shù)，占全部訪問次數(shù)的百分比，簡稱“來了就走”。跳出率可以被用來衡量流量和頁面質(zhì)量，高跳出率表示訪問者對著陸頁面不感興趣，沒有繼續(xù)訪問更深入的頁面。也可能頁面設(shè)計(jì)存在問題，也可能是導(dǎo)入的用戶不匹配。跳出率可以通過調(diào)整廣告渠道，優(yōu)化頁面內(nèi)容來降低。
退出率：訪問者離開網(wǎng)站一次被記錄為一次退出，某一范圍內(nèi)退出的數(shù)量/該范圍的綜合訪問量就是退出率。如果關(guān)鍵流程中的某一頁面退出率高，代表某一頁面可能出現(xiàn)了問題。
訪問時長：網(wǎng)站停留時長，頁面停留時長，應(yīng)用使用時長。訪問量是訪問質(zhì)量的一個衡量指標(biāo)，較長的訪問時間說明用戶與產(chǎn)品進(jìn)行了較多的互動。
訪問深度：可以理解為單個用戶平均訪問的頁面數(shù)，是PV/UV的比值。訪問深度也是訪問質(zhì)量的一個衡量指標(biāo)，可以考察用戶是否和網(wǎng)站進(jìn)行了較多互動。這個比值越大，代表網(wǎng)站的粘性越高。
轉(zhuǎn)化率：指在一個統(tǒng)計(jì)周期內(nèi)，完成轉(zhuǎn)化目標(biāo)行為的次數(shù)占總訪問次數(shù)的比率。根據(jù)設(shè)置不同目的進(jìn)行計(jì)算，例如注冊轉(zhuǎn)化率、付款轉(zhuǎn)化率等，是一個重要的分析指標(biāo)。
移動端基礎(chǔ)指標(biāo)
移動端的基礎(chǔ)指標(biāo)監(jiān)測與web端略有不同，但分析思路大致相同。指標(biāo)分為：新增設(shè)備、累計(jì)設(shè)備、啟動次數(shù)、單詞使用時長。
常見分析內(nèi)容
流量分析（哪里來？）、用戶分析（什么樣的用戶？）、行為分析（如何使用的？）、路徑轉(zhuǎn)化（表現(xiàn)如何？）、流失分析（粘性如何？）
A/B test
A/B測試是一種幫助網(wǎng)頁優(yōu)化實(shí)驗(yàn)的方法。A/B測試的目的在于通過科學(xué)的實(shí)驗(yàn)設(shè)計(jì)和采集數(shù)據(jù)的方式，來獲得具有代表性的實(shí)驗(yàn)結(jié)論，從而尋找到更好的產(chǎn)品策略。
簡單來說，就是為同一目標(biāo)制定兩個方案，讓一部分用戶使用A方案，另一部分使用B方案，記錄用戶的使用情況，對比兩個方案的結(jié)果，選擇更符合的方案。
A/B test一般會在產(chǎn)品改版正式上線之前使用，來驗(yàn)證新的設(shè)計(jì)是否可以提高產(chǎn)品的表現(xiàn)。
A/B test可以測試的元素有：標(biāo)題、圖片、顏色、社交元素、段落文本、按鈕、導(dǎo)航、任務(wù)流程、頁面布局、價格、視頻等?？梢淮沃桓淖円粋€元素或一次改變多個元素的方式來測試，這就是兩個測試類型單變量測試和多變量測試。
A/B test工具
Google Website Optimizer：搜索巨頭提供的免費(fèi)A/B test工具，一個很好的入門級工具，但是沒有一些先進(jìn)的功能。
Visual Website Optimizer：一個易于使用的A/Btest測試工具，包含功能有所見即所得的編輯器，單機(jī)地圖，訪問者分割和標(biāo)簽等。
Unbounce and Performable：集成著陸設(shè)計(jì)的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測試工具之一，它的價格要比其他的工具高很多（也可以免費(fèi)使用一個月），它提供了一些非常好的功能。
Unbounce：對于登錄頁面的測試來講非常不錯，而且它不僅僅是個測試工具，還可以在無需自己編寫任何代碼的情況下來創(chuàng)建登錄頁面。
如何做A/Btest
1、確定目標(biāo)，例如提高網(wǎng)站的付費(fèi)轉(zhuǎn)化率，降低跳出率等
2、測試方案，建立假設(shè)：購買按鈕的顏色會影響點(diǎn)擊率？縮短流程可以提高復(fù)費(fèi)率？改變導(dǎo)航可以降低跳出率等？
3、創(chuàng)建相比較的兩個版本，改變其中的變量
4、發(fā)布測試，將部分流量導(dǎo)向B方案，但不一定是5：5
5、數(shù)據(jù)分析，收集數(shù)據(jù)，對比AB版本的轉(zhuǎn)化率、跳出率、留存率等
感謝閱讀！
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.yvirxh.cn
