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