如果你是一位經(jīng)驗(yàn)豐富的設(shè)計(jì)師，你應(yīng)該會(huì)同意這個(gè)觀點(diǎn)：從他人的作品中獲取到靈感并不算偷竊他人的作品。這是屬于在對(duì)設(shè)計(jì)進(jìn)行深入研究呀，這也屬于一種設(shè)計(jì)模式呀，而且還遵守設(shè)計(jì)規(guī)范呢。所以，當(dāng)然要以用戶們所熟悉的那些模式來創(chuàng)造出可用性界面。
不過，有的設(shè)計(jì)師則會(huì)認(rèn)為，過于遵守設(shè)計(jì)規(guī)范，而且，經(jīng)常性的從他人的作品中獲取靈感的話，自己本身的創(chuàng)造能力就會(huì)下降，這就導(dǎo)致了這樣一個(gè)結(jié)果——一天下來，你的所有APP都長(zhǎng)一個(gè)樣。
從交互設(shè)計(jì)的角度看，我們會(huì)發(fā)現(xiàn)一個(gè)問題。什么問題呢？
習(xí)慣性的去應(yīng)用一些所謂的最好的設(shè)計(jì)模式，可能會(huì)讓你覺得Google，F(xiàn)acebook，Instagram或者說其他的一些你最喜歡的APP總是做的非常棒，你會(huì)覺得，他們的設(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萬的文章來爭(zhēng)論它了。如果你一篇都未曾讀過，試著去讀一兩篇吧。其實(shí)，簡(jiǎn)單說來，這些文章討論的主題更主要的是這個(gè)圖標(biāo)里所隱含的那些導(dǎo)航，而不是這個(gè)圖標(biāo)自身。
上面圖片這樣的設(shè)計(jì)對(duì)于設(shè)計(jì)師來說其實(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)航能夠更多的增加用戶的依賴度和滿意程度，甚至為你帶來更多的收入。所以說，現(xiàn)在的好多大公司的播放器都拋棄了以前的漢堡圖標(biāo)，將最常用的一些導(dǎo)航一直顯示給了用戶。
如果說你的導(dǎo)航比較復(fù)雜，那么，請(qǐng)?jiān)诳紤]優(yōu)先級(jí)的基礎(chǔ)上適當(dāng)?shù)仉[藏導(dǎo)航。
2、圖標(biāo)，隨處可見的圖標(biāo)
由于移動(dòng)端的屏幕大小限制，許多無腦的設(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ā)送什么信息嗎？
或者說，假如你從來沒用過谷歌翻譯，那么，你會(huì)期待下圖的這個(gè)圖標(biāo)實(shí)現(xiàn)什么樣的功能呢？
你總是假設(shè)你的用戶們非常熟悉那些抽象的圖標(biāo)，或者說，你總以為用戶們會(huì)花大量的時(shí)間去研究和學(xué)習(xí)你的這個(gè)圖標(biāo)的含義。這是一個(gè)很普遍性的錯(cuò)誤，很多設(shè)計(jì)師都會(huì)犯這個(gè)錯(cuò)誤。
Bloom.fm上讓人覺得迷糊的標(biāo)簽欄
如果說你曾經(jīng)設(shè)計(jì)過一個(gè)需要一個(gè)彈出框來解釋從而提高可用性的圖標(biāo)，那么，即使你的用戶們會(huì)不管怎么樣都能了解它，你的這個(gè)做法也是錯(cuò)誤的。
當(dāng)然，并不是說你在設(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è)文本來進(jìn)行說明。這樣，你的圖標(biāo)才是真正有用的。同時(shí)，還能夠提高菜單的可發(fā)現(xiàn)性，也能夠?yàn)槟愕腁PP添加漂亮的觸感和個(gè)性。
Pixelmator的導(dǎo)航
對(duì)于基本的功能，可以使用圖標(biāo)來展現(xiàn)；但是，對(duì)于復(fù)雜的功能，就需要使用文本來說明了。(如果你要使用圖標(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ì)們的圈子中流行了起來，許多的APP都圍繞著手勢(shì)操作來進(jìn)行設(shè)計(jì)。
Clear里的手勢(shì)操作
就像隱藏的導(dǎo)航欄和使用圖標(biāo)代替文本一樣，手勢(shì)看起來似乎能夠?yàn)樵O(shè)計(jì)師節(jié)約一些屏幕空間。(“屏幕上不應(yīng)該有刪除按鈕的存在，人們只需要向左或者向右輕掃就可以進(jìn)行刪除了。我們會(huì)決定怎么操作的。”)
關(guān)于手勢(shì)，你首先需要知道的是，手勢(shì)是不可見的。人們需要記住它們，就像漢堡菜單的例子一樣。如果你隱藏了一個(gè)選項(xiàng)，那么，用到那個(gè)選項(xiàng)的人就會(huì)越少。
另外，手勢(shì)存在著與圖標(biāo)相同的問題：眾所周知的手勢(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中，就表示將郵件存檔
或者說，想一想，搖晃你的手機(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)記來解釋界面元素。
dcovery APP里的新手引導(dǎo)
為什么說這是一個(gè)很爛的解決方案呢？因?yàn)樵S多用戶都會(huì)跳過你的介紹，他們想做的就是趕緊使用這個(gè)APP。即使他們注意到了你的這些標(biāo)記，當(dāng)他們把這個(gè)關(guān)掉的時(shí)候，這些所謂的教程也被他們忘得一干二凈了(尤其是當(dāng)屏幕上擠滿了信息的時(shí)候)。最后說一句重要的，在你的屏幕上添加這些引導(dǎo)的標(biāo)記，并不會(huì)提高APP的易用性，記住下面這句話：
原圖翻譯：用戶界面就和講笑話一樣，如果這個(gè)笑話還需要解釋才能明白的話，那么，這也不是一個(gè)好笑話。
對(duì)于你的用戶來說，新手引導(dǎo)也許可以使用其他的方式來設(shè)計(jì)的更加有用。比如Slack這個(gè)APP，使用第一屏來創(chuàng)建一個(gè)用戶場(chǎng)景。簡(jiǎn)單的介紹一下他們自己，著重于利益而不是屏幕上的功能。
留住你的第一批用戶的一個(gè)更有效的方法就是逐步的引導(dǎo)。比如Duolingo，他沒有向用戶們解釋這個(gè)APP是如何工作的，而是促使人們做一個(gè)指定語(yǔ)言的快速測(cè)試(甚至不需要登錄)，因?yàn)橛脩魝兛梢栽谧鰷y(cè)試的過程中了解到這個(gè)APP是如何使用的。同時(shí)，這也是展示這個(gè)APP的價(jià)值的一個(gè)更有影響力的方法。
記得住左右輕掃的手勢(shì)在Apple的Mail APP里和在MailBox里的不同嗎？看看他們的逐步引導(dǎo)是如何做的：用戶們?cè)陂_始使用APP之前，必須在APP所提供的一個(gè)練習(xí)場(chǎng)景里嘗試使用這個(gè)APP里的每一個(gè)手勢(shì)。
在你準(zhǔn)備在一個(gè)半透明的覆蓋層上設(shè)計(jì)你的引導(dǎo)標(biāo)記的時(shí)候，停下來好好想想第一次使用你的APP的用戶會(huì)有寫什么樣的經(jīng)歷。關(guān)注一下使用環(huán)境，通常情況下，有更好的方法來歡迎你的用戶們。
5、充滿了創(chuàng)造力，但是并不直觀的空白狀態(tài)
很多沒有經(jīng)驗(yàn)的設(shè)計(jì)師很容易忽略APP的空白狀態(tài)。但是，從一個(gè)APP的整體用戶體驗(yàn)上來說，這是一個(gè)很重要的方面。
有的時(shí)候，設(shè)計(jì)師們把錯(cuò)誤信息和空白狀態(tài)的界面當(dāng)作一塊展示他們創(chuàng)造力的畫布。
比如下面這張Google Photo的空白狀態(tài)界面：
第一眼看去，簡(jiǎn)直太棒了不是嗎？一個(gè)漂亮的矢量圖加上完全符合設(shè)計(jì)規(guī)范的布局。
但是，再看一下，就會(huì)覺得有寫奇怪的東西了：
?這塊屏幕里什么收藏也沒有，但為什么這里會(huì)有一個(gè)那么顯眼的搜索按鈕呢？難道是想讓用戶在什么都沒有的界面里搜索什么？
?第二個(gè)很顯眼的元素就是這個(gè)矢量圖，很明顯不可以點(diǎn)擊(雖說會(huì)有很多人去嘗試點(diǎn)擊)。
?屏幕上的提示說，我應(yīng)該找到在頂部的那個(gè)超級(jí)不起眼的“＋”標(biāo)志。為什么這個(gè)提示自己不包含一個(gè)添加按鈕呢？就像是在說“點(diǎn)擊繼續(xù)按鈕來繼續(xù)”
總而言之，上面這個(gè)空白屏幕沒有能夠幫助用戶理解用戶所在的這個(gè)環(huán)境：
?什么是收藏？他們?yōu)槭裁从杏媚兀?
?為什么我什么都沒有呢？
?我可以做些什么嗎？(我應(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)更為直觀。
多問多想
不要說我是錯(cuò)的：設(shè)計(jì)模式和最佳的實(shí)踐仍然是你的好伙伴。但是要知道，APP和用戶是不一樣的：在一個(gè)APP里能夠適用的方案，在你自己的APP里，也許就一點(diǎn)不適用。這不是一個(gè)通用方案就能解決的事情。另外，你永遠(yuǎn)不可能知道為什么一個(gè)APP會(huì)以某種方式來設(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)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.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è)東西，我們又愛又恨，愛的是它能夠記錄并且在工作中讓大家高效的協(xié)調(diào)合作，恨的就是很多人對(duì)文檔嗤之以鼻非常敷衍，以至于文檔不但沒有起到它應(yīng)有的作用，反而成為了一個(gè)不負(fù)責(zé)任的借口。所以一份合格或者優(yōu)秀的交互輸出文檔對(duì)于一個(gè)項(xiàng)目的流轉(zhuǎn)以及團(tuán)隊(duì)的配合來說是至關(guān)重要的。交互文檔的主要利益相關(guān)者通常是以下幾個(gè)角色：交互、產(chǎn)品、開發(fā)、UI
交互
首先優(yōu)秀的交互文檔必須在交互組內(nèi)部進(jìn)行過審核，包括一致的撰寫標(biāo)準(zhǔn)和模式的使用，一個(gè)比較規(guī)范的交互設(shè)計(jì)組對(duì)于交互的撰寫標(biāo)準(zhǔn)也是有嚴(yán)格的規(guī)范的，以及在什么情況使用什么交互模式還有組件庫(kù)的調(diào)用都會(huì)有詳細(xì)的說明，那么你的交互輸出文檔就必須滿足團(tuán)隊(duì)設(shè)定的規(guī)范。
其次對(duì)于其他交互設(shè)計(jì)師來說，你的設(shè)計(jì)方案中是否會(huì)出現(xiàn)其他人負(fù)責(zé)的模塊，那么在評(píng)審的時(shí)候需要同步，雖然交互輸出文檔對(duì)于其他交互來說不是直接受益人，但是在團(tuán)隊(duì)同步過程中也是非常重要的。
產(chǎn)品
每個(gè)公司對(duì)于文檔的要求和規(guī)則不一樣。小公司可能沒有交互設(shè)計(jì)這個(gè)崗位，那么可能產(chǎn)品連prd文檔也沒有，僅僅只是一個(gè)簡(jiǎn)易的需求說明文檔，就更不用說針對(duì)交互規(guī)則的說明文檔了。
很多有完善規(guī)模和流程的團(tuán)隊(duì)不僅會(huì)有詳細(xì)的需求說明文檔也有很完善的交互說明文檔。我們首先要明確的一點(diǎn)是那么多文檔最后是給誰看的，一共在項(xiàng)目中會(huì)有多少文檔產(chǎn)生。
通常產(chǎn)品經(jīng)理會(huì)在項(xiàng)目初期做一份prd文檔（Product-RequirementDocument，需求說明文檔），這個(gè)prd文檔主要是給業(yè)務(wù)方、交互和開發(fā)看的，在這個(gè)文檔中需要包含一些業(yè)務(wù)規(guī)則以及交互規(guī)則，所以交互的輸出文檔是需要和產(chǎn)品的prd文檔合并的。
當(dāng)然如果你是一位很有自驅(qū)力的人，那么你可以自己推進(jìn)需求并落地，一個(gè)人就可以完成prd文檔的撰寫和需求的落地了。
開發(fā)
特別想給各位提個(gè)醒，在開發(fā)需求評(píng)審的過程中，請(qǐng)一定記住你們?cè)u(píng)審的目的，開發(fā)同學(xué)也要注意，請(qǐng)把重點(diǎn)放在需求是否能實(shí)現(xiàn)以及開發(fā)相關(guān)的地方即可，請(qǐng)不要考慮為什么要這樣做，或者你覺得應(yīng)該怎么設(shè)計(jì)，一旦進(jìn)入了開發(fā)對(duì)需求和設(shè)計(jì)的評(píng)頭論足那么這個(gè)會(huì)議效率就相當(dāng)?shù)拖隆?/strong>專業(yè)的事情就交給專業(yè)的人去做吧，可以私下討論但不要在評(píng)審會(huì)上各抒己見。
交互輸出文檔對(duì)于開發(fā)的作用就是，開發(fā)可以更好的還原該功能中交互的跳轉(zhuǎn)以及邏輯，所以我們盡量把交互規(guī)則寫明白寫詳細(xì)，比如按鈕在press和default時(shí)候是否樣式會(huì)有變化，或者頁(yè)面轉(zhuǎn)場(chǎng)的方向，這都是一些細(xì)節(jié)，減少不必要的低效溝通。你會(huì)發(fā)現(xiàn)有些時(shí)候?yàn)槭裁撮_發(fā)總是來問一些規(guī)則，就是因?yàn)槲臋n中沒有描述準(zhǔn)確，所以開發(fā)和交互都需要花時(shí)間去同步這個(gè)細(xì)節(jié)。
所以這個(gè)也非?？简?yàn)交互設(shè)計(jì)師對(duì)需求文檔撰寫的功底，并不是圖片文字隨意擺放就可以的。和開發(fā)合作時(shí)也是一項(xiàng)內(nèi)部的體驗(yàn)設(shè)計(jì)，你把文檔寫好了，開發(fā)看起來也舒服，滿意度也高。如果是一堆文案，連基本的對(duì)齊都沒做到的話，誰來看都會(huì)看不下去。
UI
交互輸出文檔對(duì)于UI來說，作用就非常簡(jiǎn)單了，但是這里也會(huì)碰到問題，那就是交互同學(xué)只需要把信息的層次表示出來即可，千萬不要畫到連視覺同學(xué)都沒有發(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è)需求的來源以及推導(dǎo)過程和如何落地的說明）：
1.項(xiàng)目概要
a.需求背景
這個(gè)是一個(gè)項(xiàng)目最重要的部分，可以說背景沒有搞清楚，后面都可以不用做。這個(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í)候通過物流包裹上的二維碼，讓用戶進(jìn)行掃碼參與活動(dòng)這樣的玩法。
所以這個(gè)需求對(duì)于業(yè)務(wù)方來說是一個(gè)轉(zhuǎn)化手段，通過掃碼參與活動(dòng)-領(lǐng)券-消費(fèi)，確實(shí)是一個(gè)不錯(cuò)的玩法，但是大家如果只盯著眼前的問題或許就不夠了，比如當(dāng)周年慶結(jié)束之后這個(gè)功能還有什么用，他在以后的規(guī)劃中的存在是怎樣的。在所有的包裹中印上活動(dòng)的二維碼這個(gè)時(shí)間周期和成本有多大。
其次，對(duì)于用戶來說，掃一掃并不是幫助他們解決了某個(gè)問題，而是我做了一個(gè)東西，同時(shí)搭配著這個(gè)功能讓你們?nèi)ナ褂?，?duì)用戶來說是一個(gè)很可有可無的功能，如果線下包裹上的二維碼破損了也是非常影響體驗(yàn)并且是不可控的。那么綜上所述，既然要做一個(gè)臨時(shí)的活動(dòng)用其他的方式會(huì)不會(huì)更好？
所以在這個(gè)文檔中的第一步，首先就是要確定需求的背景、價(jià)值，也就是說，你這個(gè)需求是怎么來的，比如再來講我們一個(gè)店鋪的優(yōu)化項(xiàng)目，在這個(gè)項(xiàng)目中，首先我們必須在評(píng)審的時(shí)候說清楚我們?yōu)槭裁匆獙?duì)其進(jìn)行優(yōu)化和改版，一定是出現(xiàn)了或者我們定義到了某個(gè)比較嚴(yán)重的問題，這邊大家對(duì)我們app業(yè)務(wù)可能不是很了解我就簡(jiǎn)單說了，就是個(gè)人中心和店鋪營(yíng)銷場(chǎng)景重合過多，并且賣家的同時(shí)可以買和賣兩個(gè)場(chǎng)景存在，所以店鋪頁(yè)通過我們的數(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)很好理解，就是我們希望通過這次需求迭代達(dá)到一個(gè)什么成果，比如我們之前做過一次整體的體驗(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)景遷移的問題。設(shè)定目標(biāo)之后，就是為了在上線后對(duì)其進(jìn)行復(fù)盤和數(shù)據(jù)跟蹤還有用戶跟蹤。
可以用一句話來描述：針對(duì)什么用戶在什么場(chǎng)景下解決用戶的什么問題，達(dá)到什么目的？
c.需求范圍
需求范圍也相當(dāng)于范圍層，指的就是在該需求中我們需要做哪些相關(guān)功能以及功能涉及面。舉個(gè)例子，之前說的掃一掃功能，不同的產(chǎn)品定位對(duì)于掃一掃功能的要求也是不同的，比如說微信在掃一掃功能中承載了：掃一掃、相冊(cè)、封面、街景、翻譯、手電筒等諸多功能，再比如淘寶，有掃一掃（ar、拍立淘）、相冊(cè)、歷史、幫助、手電，這說明了不同產(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ù)來支撐我們方案的客觀性，所以在這一板塊中輸出的結(jié)論就非常重要，比如之前的首頁(yè)改版，經(jīng)過用戶研究小組的訪談和數(shù)據(jù)分析得出相關(guān)的結(jié)論，通過埋點(diǎn)找到相應(yīng)板塊的點(diǎn)擊數(shù)據(jù)和異常點(diǎn)，然后再進(jìn)行一系列的問卷和訪談研究，找到結(jié)果，都是為了輔助項(xiàng)目的背景以及在評(píng)審中大家對(duì)需求價(jià)值的靈魂拷問。由于數(shù)據(jù)和調(diào)研結(jié)果比較敏感就不過多放了。
e.版本日志
日志是一個(gè)非常重要的組成部分，做過開發(fā)的同學(xué)都知道log 的重要性，當(dāng)我們跑不通的時(shí)候我們都會(huì)去檢查log，然后多測(cè)試幾遍可能就找到問題所在了，其實(shí)我們的版本日志的作用也是這樣，但是一個(gè)是對(duì)自己來說可以記錄自己的工作過程，還有思路的變化，第二就是對(duì)外，包括和需求方的討論，會(huì)議的紀(jì)要等。
要注意的是會(huì)議紀(jì)要在備注中需要詳細(xì)說明，以做證據(jù)。同時(shí)也要郵件通知相關(guān)人員和負(fù)責(zé)人。可能有些公司還會(huì)放一些評(píng)審記錄，比如各部門負(fù)責(zé)人對(duì)方案和需求的建議，業(yè)務(wù)方和技術(shù)負(fù)責(zé)人的一些建議也會(huì)放在項(xiàng)目概要中，而這個(gè)prd文檔也可通過內(nèi)部服務(wù)器進(jìn)行實(shí)時(shí)更新和保存，如svn。方便大家對(duì)需求的進(jìn)度和迭代有一個(gè)直觀的追蹤。
f.項(xiàng)目成員
這個(gè)就不用多說了，產(chǎn)品、運(yùn)營(yíng)、交互、視覺、開發(fā)各司其職，照相館人員即可，就不至于當(dāng)項(xiàng)目開始進(jìn)行了人員分配還沒到位就尷尬了。
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)用戶開始觸發(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ì)說明。
界面流程圖：
界面之間的跳轉(zhuǎn)關(guān)系和路徑，在這個(gè)流程圖中，我們不需要吧詳細(xì)的說明寫上，只需要將需求中涉及到的頁(yè)面跳轉(zhuǎn)進(jìn)行敘述即可。
b.相關(guān)說明和規(guī)則
接下來就要開始我們交互文檔最為關(guān)鍵的部分了，如何書寫交互說明，以及交互說明應(yīng)該包含的內(nèi)容。
1.全局思考
在做交互方案也就是我們畫原型的時(shí)候會(huì)思考一些問題：
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.逆向流程和非正常流程的思考有沒有完全；
3.流程的閉環(huán)有沒有做好；頁(yè)面跳轉(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)后臺(tái)的配置獲??；并且獲取的方式是如何的，是需要手動(dòng)下啦刷新還是切換頁(yè)面自動(dòng)刷新，還是設(shè)定時(shí)間自動(dòng)刷新。
字段、圖標(biāo)是從接口獲取還是前端寫死，以及氣泡展示的規(guī)則等等。另外一張圖片可能用在多個(gè)地方，而可能呈現(xiàn)的尺寸不同，所以在涉及到相關(guān)圖片使用時(shí)要注意剪裁規(guī)則和圖片的來源。
b.緩存機(jī)制
圖片以及一些資源通常我們需要對(duì)其進(jìn)行緩存，有些同學(xué)不清楚什么是緩存，緩存是在計(jì)算機(jī)上的一個(gè)原始數(shù)據(jù)的復(fù)制集，一般來說需要緩存的內(nèi)容是通過瀏覽產(chǎn)生的，包括圖片以及cookie等，瀏覽過的視頻和廣告也會(huì)被緩存。同時(shí)在不同的網(wǎng)絡(luò)環(huán)境下緩存的時(shí)間標(biāo)準(zhǔn)也不同，無網(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)無緩存第一次進(jìn)入）、空狀態(tài)（無任何內(nèi)容比如空的購(gòu)物車）、常規(guī)狀態(tài)、異常狀態(tài)（網(wǎng)絡(luò)中斷、接口報(bào)錯(cuò)）還有過期狀態(tài)等
d.顯示
數(shù)據(jù)和內(nèi)容的極限值，最大和最小，比如粉絲和關(guān)注的數(shù)量，小于1萬人則顯示完整的數(shù)量，大于等于1萬小于11000則顯示1萬，大于11000小于12000則顯示1.1萬，這樣的方式。另外包括標(biāo)題極限為一行顯示，超過部分的顯示規(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ì)交互也需要說明，比如滑動(dòng)后內(nèi)容置頂、拖拽、左右輕掃的tab滑動(dòng)、重按的3dtouch等等
4.加載
使用模態(tài)還是非模態(tài)，如果是模態(tài)加載請(qǐng)盡量使用情感化設(shè)計(jì)來減少用戶焦慮。如果是非模態(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和大屏幕尺寸上使用起來效果很好，但是小屏幕的時(shí)候這個(gè)交互控件顯得就很難受，所以需要仔細(xì)斟酌用戶的使用情況。另外還有橫豎憑情況的交互方案是否兼容、是否需要與其他硬件進(jìn)行兼容。
b.白天和晚上是否需要做不同的風(fēng)格設(shè)計(jì)，以及在是否需要給用戶遮擋隱私的功能。
6.文案
文案這點(diǎn)很多設(shè)計(jì)師都忽略了，你們有沒有聽說過一個(gè)叫文案設(shè)計(jì)師的崗位。其實(shí)文案在我們產(chǎn)品設(shè)計(jì)中是非常重要的。首先一個(gè)產(chǎn)品的文案對(duì)應(yīng)的語(yǔ)氣和產(chǎn)品調(diào)性也是相關(guān)的，就好比我們說產(chǎn)品有它自己的性格一樣，另外文案的使用直接就影響用戶對(duì)該信息的理解，比如一個(gè)對(duì)話框的文案是：確定退出嗎？下面會(huì)有兩種不同的選擇，一個(gè)確定，一個(gè)是退出，大家覺得哪個(gè)比較好？還有就是不加“嗎”，就變成了：確定退出？這樣描述出來的語(yǔ)言給人感覺很冰冷，甚至有一些威脅。
所以首先我們的文案是否有溫度，和產(chǎn)品的個(gè)性是否相匹配。其次文案的表述是否準(zhǔn)確和通俗易懂，比如你告訴程序員一句話，幫我去菜市場(chǎng)買西瓜，如果有西紅柿，幫我買兩個(gè)，你會(huì)帶什么東西回家？程序員版：if（看到西紅柿）西瓜等于2；else 西瓜=1。buy 西瓜。條件：看見西紅柿 執(zhí)行命令：買兩個(gè)西瓜一語(yǔ)道破版：其實(shí)吧，看到西紅柿呢是賣兩個(gè)西瓜的觸發(fā)條件…沒看到就買一個(gè)西瓜，看到就買兩個(gè)西瓜。所以這里出現(xiàn)的不僅僅是程序員的思維和我們的差異化，也說明了一句話沒有表述清楚所帶來的問題是很大的。
另外就是文案用語(yǔ)的一致性，在整個(gè)產(chǎn)品同樣的場(chǎng)景中，我們需要統(tǒng)一文案用語(yǔ)。
7.常見控件
具體見下方列表
8.撰寫方式
作為一個(gè)設(shè)計(jì)師，不管是否在做視覺，我們都需要對(duì)文檔有一個(gè)美化意識(shí)，如果你的文檔非常凌亂，那么在別人眼里就會(huì)覺得你是一個(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ò)。
說明
在撰寫規(guī)則與說明時(shí)可以通過標(biāo)簽法進(jìn)行標(biāo)簽說明的撰寫方式，同樣在視覺上保持美觀，對(duì)比與對(duì)齊的運(yùn)用，具體該寫什么東西上面已經(jīng)說明就不贅述了。除了交互規(guī)則以外，高階的交互設(shè)計(jì)或者產(chǎn)品經(jīng)理還需要補(bǔ)充業(yè)務(wù)規(guī)則，比如排序、商品抓去規(guī)則、權(quán)重、算法、活動(dòng)規(guī)則等等這里就不展開說了。
總結(jié)
文檔的形式有非常多種，針對(duì)不同的公司和產(chǎn)品也需要作出相應(yīng)的調(diào)整，能夠滿足需求和方便協(xié)作，目的就達(dá)到了，我們并不希望過多的時(shí)間花在文檔的撰寫上，而是希望大家在做設(shè)計(jì)時(shí)多思考業(yè)務(wù)，本次分享就到這里啦～
轉(zhuǎn)載請(qǐng)注明：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.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è)放置陰影或非常精細(xì)的邊框（僅比實(shí)際陰影暗一點(diǎn)）可以使這些元素看起來更清晰、更清晰，并幫助你避免那些看起來渾濁的陰影。
你的標(biāo)題很可能會(huì)比正文更大，也比正文更重，所以字母之間的間距有時(shí)會(huì)看起來更大，
減少一點(diǎn)間距，就可以使你的標(biāo)題更加清晰
在ui中實(shí)現(xiàn)圖標(biāo)時(shí)，保持一致。
確保它們具有相同的視覺風(fēng)格； 相同的重量，或者填充，或者輪廓。
在創(chuàng)建設(shè)計(jì)時(shí)只使用一種字體是比較好的，這樣做實(shí)際上可以幫助你產(chǎn)生統(tǒng)一的設(shè)計(jì)效果。
使用字重、大小和顏色的組合，你還是可以用一個(gè)單獨(dú)的字體表達(dá)清晰的文字的結(jié)構(gòu)
留白可以讓你的設(shè)計(jì)具有呼吸感，更加舒適
通過選擇一個(gè)基色，然后使用你選擇的顏色的色調(diào)和陰影，可以以最簡(jiǎn)單的方式為你的設(shè)計(jì)增加一致性
允許用戶隨時(shí)跳過你的移動(dòng)應(yīng)用程序登錄序列，并將該跳過鏈接放在拇指容易觸及的位置。
只是一個(gè)簡(jiǎn)單的調(diào)整，可以讓你的用戶有更好的體驗(yàn)（我常常體驗(yàn)國(guó)內(nèi)一些APP，關(guān)閉按鈕特別遠(yuǎn)，特別難按）
確保你的陰影總是來自同一個(gè)光源，會(huì)素描的同學(xué)很好理解，光源關(guān)系一致表達(dá)空間統(tǒng)一性的基礎(chǔ)
基本的處理方式是，在圖片上增加一個(gè)透明漸變蒙版來使得字體看的更加清楚
如果只使用一個(gè)字體，盡量選擇有多字重的字體，比如：阿里巴巴普惠體、思源、OPPO
在淺色背景下工作時(shí)，文字顏色不要太淺，雖然看起來很舒服，但可見性不較差，不利于閱讀
當(dāng)涉及到長(zhǎng)格式的內(nèi)容時(shí)，某些常規(guī)的粗體字體在屏幕上看起來還是有點(diǎn)太重，太呆板了。
建議，選擇像深灰色（即# 4f4f）來降低文本的色調(diào)，這樣閱讀起來會(huì)更加舒服
通過使用顏色對(duì)比、尺寸和標(biāo)簽，確?！靶袆?dòng)按鈕”盡可能突出
隨著字號(hào)的減小，增加行高可以獲得更好的易讀性。
在設(shè)計(jì)應(yīng)用程序內(nèi)部使用的菜單時(shí)，請(qǐng)確保提供最常用的操作（即； 上傳圖像，添加文件等…）最突出的屏幕
只需從你的產(chǎn)品圖像中挑選顏色，然后將你選擇的顏色的各種色調(diào)和陰影應(yīng)用到你的背景、文本、圖標(biāo)……，就能為你的設(shè)計(jì)增添大量的視覺趣味
不同x高度的字體需要不同的行高測(cè)量來實(shí)現(xiàn)文本行之間的正確分隔。
即使你可能有兩種字體大小相同（即； 18px）它們的x高度可能會(huì)有很大差異，選擇正確行高是非常有必要的
通過使用字體大小、權(quán)重、顏色和布局的組合，你可以輕松突出UI中最重要的元素
在用戶剛剛執(zhí)行的操作附近添加一條錯(cuò)誤消息，可以幫助用戶提高正確登入，也可以緩解用戶焦慮（他可以更加清晰那里出錯(cuò)）
當(dāng)為移動(dòng)設(shè)備設(shè)計(jì)時(shí)，嘗試創(chuàng)建足夠大的可點(diǎn)擊區(qū)域
對(duì)于按鈕和僅由文本組成的鏈接來說，點(diǎn)擊區(qū)域會(huì)很小，所以盡可能使用帶有標(biāo)簽的圖標(biāo)。
iOS和Android的最低建議點(diǎn)擊區(qū)域
iOS為44 x 44pt
安卓48 x 48dp
長(zhǎng)標(biāo)題都是大寫字母的話，閱讀轉(zhuǎn)化上比較慢（你明白他是什么意思比較慢）
短標(biāo)題都是大字母的話，相對(duì)來說比較快可以和記憶中的單詞對(duì)應(yīng)上
始終確保淺色文本在淺色圖像背景下清晰可見。
只需在文本后面應(yīng)用一個(gè)低透明的深色背景，就能保持這些元素之間的良好對(duì)比度
標(biāo)題、正文、標(biāo)題、正文……這樣的排列中如果是間距都是相同的，那么在閱讀上就很難區(qū)分標(biāo)題是屬于上文還是下文的。
正確的做法是，標(biāo)題距離上文的距離＞標(biāo)題距離下文的距離，這樣閱讀起來，標(biāo)題會(huì)比較清晰的對(duì)應(yīng)的是下文
當(dāng)下載速度是一閃而過時(shí)，則無需提示
當(dāng)下載等待時(shí)間＞3S時(shí)，建議給進(jìn)度提示
在項(xiàng)目中處理文本時(shí)，選擇正確的字體將影響文本的語(yǔ)音類型。 那么大聲、或者溫柔、或者正式，嚴(yán)肅，或者有趣。每種字體都有自己獨(dú)特的聲音
基于人閱讀情緒，如果閱讀一行很長(zhǎng)，一直閱讀下去，會(huì)出現(xiàn)你眼前閱讀的內(nèi)容“不見”的情況
對(duì)于單列頁(yè)面，45到75個(gè)字符被廣泛認(rèn)為是令人滿意的行長(zhǎng)，66個(gè)字符的行（包括字母和空格）是最合適的。
當(dāng)然，字體大小和行高也是決定可讀性的一個(gè)因素，但是對(duì)于行長(zhǎng)，要保持在45到75個(gè)字符之間
需要適當(dāng)，如果裝飾的強(qiáng)了主要表達(dá)的，則不可取
按鈕。 通知。 UI中兩個(gè)獨(dú)立但必不可少的元素。
一定要確保你的用戶能夠快速準(zhǔn)確地將他們區(qū)分開來
舒服的投影會(huì)增加你的設(shè)計(jì)的質(zhì)感，和透氣感。太重的投影會(huì)顯得你畫面比較臟
高度飽和的顏色（明亮的藍(lán)色、紅色、綠色等）在網(wǎng)站上看起來很不錯(cuò)，但過度使用時(shí)，會(huì)讓用戶眼睛疲勞，主要是與文本內(nèi)容一起使用時(shí)。
在向設(shè)計(jì)中添加圖標(biāo)時(shí)，使用用戶熟悉認(rèn)知的圖標(biāo)。新的圖標(biāo)雖有很好看，很有個(gè)性，但是會(huì)讓用戶疑惑
需要承上表達(dá)的元素，排版上接近對(duì)應(yīng)的元素，可以讓用戶心理聯(lián)系起來是一體的
與長(zhǎng)格式正文文本（需要足夠的行高以提高可讀性）不同，標(biāo)題通常要短得多，因此可以稍微縮小間距。標(biāo)題的建議行高通常是文本大小的1到1.3倍
類比色和鄰近色是最和諧的配色方案之一，也是最不會(huì)出錯(cuò)的配色
在處理特定項(xiàng)目時(shí)，使用類似于所有小寫字母的文本可以表達(dá)更加輕松的意思
但需要注意，在圖像和文本之間使用某種顏色疊加，以獲得更強(qiáng)的對(duì)比度
當(dāng)在淺色背景下設(shè)置深色文本時(shí)，偶爾可以選擇較輕的字體。
但是…
反之：淺色文本>深色背景。
最好是把字體的重量增加一點(diǎn)，尤其是長(zhǎng)文本，原因是，讓用戶避免視覺疲勞，獲得更好的易讀性
正確的字體選擇對(duì)于讓你的內(nèi)容更快的正確傳達(dá)更重要
只需稍微增加字母之間的間距，就可以提高字跡的易讀性，并為大寫字母增加一些設(shè)計(jì)感
確保錯(cuò)誤提示，解釋了哪里出錯(cuò)和如何解決
始終讓用戶了解最新情況，即使是普通的表單，讓這些錯(cuò)誤消息變得有用，不要讓用戶懵逼
使用占位符可以更好的緩解用戶焦慮
在應(yīng)用可能產(chǎn)生后果的特定操作之前，請(qǐng)?jiān)敿?xì)地通知用戶。尤其適用于具有不可逆轉(zhuǎn)后果的行為，例如永久刪除某個(gè)內(nèi)容。讓用戶知道將要發(fā)生什么，并要求他們確認(rèn)
用戶需要采取的基本操作（例如，注冊(cè)或登錄）隱藏在下拉列表中，甚至可能找到用戶想要的。
解決：將重要的功能提出來，不要隱藏
原文地址：站酷
作者：木七木七
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.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ì)公司
一、VUI的現(xiàn)狀
隨著智能音箱的迅速發(fā)展，谷歌（Google Home）、亞馬遜（echo）天貓精靈、小愛音箱......智能產(chǎn)品的井噴式增長(zhǎng)，人們對(duì)智能語(yǔ)音產(chǎn)品的需求也越來越多，也越來越高，智能音箱對(duì)人們的生活的影響也越來越深，自然孕育而生一些新的職業(yè)需求，比如VUI（語(yǔ)音交互設(shè)計(jì)師Voice User Interfaces Designer），語(yǔ)音體驗(yàn)設(shè)計(jì)師VUE（Voice User Experience Designer），但其實(shí)VUI和VUE的分界線是很模糊的，這里不做多敘述。國(guó)際的一些大公司已經(jīng)做了很好的示范了，比如亞馬遜，谷歌等等，都會(huì)有設(shè)立專門的職位，做一些專門的研究，當(dāng)然近期國(guó)內(nèi)的相關(guān)招聘也會(huì)看到有相關(guān)的職位，且薪資不低。那么接下來會(huì)個(gè)大家詳細(xì)的分享VUI（語(yǔ)音交互設(shè)計(jì)師Voice User Interfaces）
二、VUI起源/歷史
1.VUI的第一個(gè)時(shí)期
20世紀(jì)50年代，貝爾實(shí)驗(yàn)室建立了一個(gè)單人語(yǔ)音數(shù)字系統(tǒng)
20世紀(jì)90年代，誕生了第一個(gè)可行的非特定人的語(yǔ)音識(shí)別系統(tǒng)
交互式語(yǔ)音應(yīng)答IVR系統(tǒng)的出現(xiàn)，代表了VUI的以一個(gè)重要時(shí)期
2.VUI的第二個(gè)時(shí)期
也就是我們現(xiàn)在所處的的時(shí)期
我們的現(xiàn)狀，我們正處于下一階段的初期階段，我們手機(jī)已經(jīng)可以用語(yǔ)音處理很多事情了，但是還有很多事情是無法處通過語(yǔ)音完成的
3.VUI的一些優(yōu)勢(shì)和局限性
優(yōu)勢(shì)
1.速度
顯而易見的是速度變快了，國(guó)內(nèi)的語(yǔ)音，語(yǔ)音轉(zhuǎn)文字的技術(shù)已經(jīng)很大程度上提高了人們效率
2.釋放雙手
比如你在開車的時(shí)候，你可以直接對(duì)著你的手機(jī)語(yǔ)音助手說，嘿XX，麻煩你幫我做XXX
3.直覺性
說話是每個(gè)人的天性（當(dāng)然排除特出情況）
4.同理心
語(yǔ)音包含了語(yǔ)氣、音量、音調(diào)、語(yǔ)速，這些特征包含了大量的感知信息，能夠讓你感知到對(duì)方在表達(dá)些什么。
局限性
1.環(huán)境
對(duì)環(huán)境的要求比較高，在公共場(chǎng)合，人多的地方不利于語(yǔ)音的接受和錄入
2.不適應(yīng)
還是有很多用戶不喜歡，不適應(yīng)對(duì)著語(yǔ)音設(shè)備說話的
3.喜歡打字
就是喜歡打字的一些用戶，打字從某個(gè)方面能夠帶給他一些愉悅
4.隱私
這個(gè)就很容易理解了，每個(gè)人都不希望自己的隱私被別人知道。
三、VUI設(shè)計(jì)師是什么（是做什么的）？
1.需要思考，在系統(tǒng)和終端用戶間，從開始到結(jié)束的整個(gè)個(gè)對(duì)話過程
2.用戶研究是不可少的
3.負(fù)責(zé)設(shè)計(jì)，產(chǎn)品原型和產(chǎn)品描述
4.需要了解底層技術(shù)的優(yōu)缺點(diǎn)
5.分析數(shù)據(jù)的能力
從項(xiàng)目的發(fā)布階段到發(fā)布階段都扮演著非常重要的角色。
當(dāng)然很多人看到上面5條可能會(huì)有點(diǎn)怵，其實(shí)也并不是需要全部都需要會(huì)，也可以專門負(fù)責(zé)其中的一個(gè)鏈條，節(jié)點(diǎn)。比如用戶研究，數(shù)據(jù)分析....
四、VUI的基本設(shè)計(jì)原則
1.對(duì)話式設(shè)計(jì)
定義：簡(jiǎn)單來說就是我問你答
目前我們使用的智能設(shè)備基本只能支持單輪對(duì)話，但這樣并不是人們習(xí)慣的對(duì)話方式
一輪以上的對(duì)話，才是符合用戶心理預(yù)期的。
請(qǐng)大家回憶下自己使用智能音箱的一些場(chǎng)景體驗(yàn)，
舉個(gè)例子（天貓精靈）
用戶:天貓精靈，明天我有鬧鐘么？
天貓：您明天沒有鬧鐘呢
用戶：那可以幫我設(shè)定一個(gè)么？
天貓：.....
你會(huì)發(fā)現(xiàn)，智能音箱這個(gè)時(shí)候像是失憶了一般，毫無反應(yīng)，顯然這并不是我們想要的一個(gè)交互，從用戶社交屬性來說，人們溝通的方式一直都是一輪以上對(duì)話式的，并不是單輪式的，一般來說，我們要做到讓用戶決定對(duì)話要持續(xù)多久，很顯然，你有親身體驗(yàn)過的話，能做到多輪對(duì)話的比較少。
插一個(gè)題外話，最近天貓精靈更新了游戲語(yǔ)音的玩法，算是踏進(jìn)一步了吧，雖然不是很棒的體驗(yàn)，但起碼跨進(jìn)了多一步，相信未來會(huì)越來越棒的。那對(duì)話式是如何設(shè)計(jì)出來呢？大致是怎么樣的一個(gè)流程呢？
2.設(shè)計(jì)工具、
這里說的設(shè)計(jì)工具并不是說是一個(gè)具體的工具，更多是指一個(gè)方法論
示例對(duì)話
定義：示例對(duì)話字面意思就是演示舉例對(duì)話，它看起來像一個(gè)電影腳本，像兩個(gè)人一起在對(duì)話
特點(diǎn)：是整個(gè)設(shè)計(jì)對(duì)話過程的關(guān)鍵方法。成本較低，簡(jiǎn)單易操作
用法：把要做成一件事情的場(chǎng)景用文字寫出來，然后大聲讀出來，你會(huì)發(fā)現(xiàn)書寫和口語(yǔ)化的還是有很多區(qū)別的，甚至是有些奇怪的，這時(shí)候你會(huì)發(fā)現(xiàn)有很多可以改進(jìn)的地方，所以你會(huì)看到一些招聘都會(huì)有這一項(xiàng)對(duì)應(yīng)的要求，甚至是要求一些事有話劇功底，有劇本寫作相關(guān)經(jīng)驗(yàn)優(yōu)先。
作用：它能夠讓你在投入開始研發(fā)之前，知道你的設(shè)計(jì)效果是如何。
3.視覺原型
雖然是語(yǔ)音交互，但是還是離不開GUI的，它可以結(jié)合示例對(duì)話，將用戶體驗(yàn)可視化。示例對(duì)話和原型組成了我們產(chǎn)品的故事板，GUI+VUI是用戶一套完整的體驗(yàn)，所以，VUI和GUI在早期階段就開始合作，這樣對(duì)用戶體驗(yàn)會(huì)更加流暢。
4.流程圖
也叫做呼叫流程圖，一般來說我們的流程圖需要包括用戶使用中所有可能存在的分支，但這樣下來會(huì)有千萬條復(fù)雜的情況，流程圖就會(huì)很亂，也很難梳理，所以我們采用分組的方法，
具體的分類的方法可以根據(jù)分成多組（日歷功能、搜索功能，電話..），也可以根據(jù)不同的目的進(jìn)行分組。
流程圖的使用到的工具就非常多了，這里就不一一列舉了。
那大概我們?cè)O(shè)計(jì)完成了一組示例對(duì)話之后，我們就要對(duì)一些細(xì)節(jié)進(jìn)行細(xì)致的研究，比如；確認(rèn)
五、如何進(jìn)行確認(rèn)
1.用戶語(yǔ)音的確認(rèn)
2.非語(yǔ)言式確認(rèn)
3.通用確認(rèn)
4.視覺的確認(rèn)
1.用戶語(yǔ)音的確認(rèn)
最重要的是用戶語(yǔ)音的確認(rèn)，分為顯性確認(rèn)和隱形確認(rèn)
顯性確認(rèn)即：比較重要，強(qiáng)制用戶確認(rèn)信息。比如：天貓精靈你能幫我一份奶茶么？查到附近XXX奶茶，使用優(yōu)惠后的價(jià)格是XX元，你要來一份么？
隱形確認(rèn)：即不需要用戶確認(rèn)消息，比如：用戶：XX你能幫我設(shè)定明天10點(diǎn)的鬧鐘么？好的，已經(jīng)幫你設(shè)定好明天早上10點(diǎn)的鬧鐘。
1.1那么如何去判定什么時(shí)候用隱性確認(rèn)和顯性確認(rèn)呢？
那么下面就要介紹一下三級(jí)置信度。
系統(tǒng)將在一定的閥值內(nèi)作出明確的形式確認(rèn)信息。而這個(gè)閥值我們?cè)O(shè)定為三個(gè)等級(jí)
1.2置信度？
就是智能音箱能識(shí)別到聲音的清晰度。
用易懂的話說就是人與人之間溝通的語(yǔ)言接受的清晰度，當(dāng)然聽不清對(duì)方說什么話的時(shí)候時(shí)候一般會(huì)發(fā)起詢問，或者直接說，對(duì)不起，我沒有聽清，你可以再說一遍嗎？
1.3三級(jí)置信度
比如幫我再買一份外賣
1.當(dāng)置信度大于80%，使用隱性確認(rèn)
好了已經(jīng)幫你在訂了一份外賣。
2.當(dāng)置信度為45~79%，使用顯性確認(rèn)
您是想再多訂一份外賣是嗎？
3.當(dāng)置信度小于45%
對(duì)不起，我沒有聽清您的講話，您想買些什么？
2.只用隱形確認(rèn).
智能語(yǔ)音音箱能夠非常清晰的識(shí)別到你說的內(nèi)容的時(shí)候，可以直接用隱形確認(rèn)，這樣帶來的體驗(yàn)流暢感舒服很多
3.非語(yǔ)言式
比如說，燈光花幾秒才能，那么只是讓系統(tǒng)先恢復(fù)好了或者知道的來讓用戶知道后面發(fā)生什么。還有加一些特定的音效，來代表特定某一個(gè)意思。
4.有趣的通用確認(rèn)。
就是說智能語(yǔ)音音箱不會(huì)單獨(dú)的回答你是和否，會(huì)主動(dòng)會(huì)詢問您一些的問候，通過這樣情感化的一些設(shè)計(jì)，將能夠讓用戶感到更加的溫暖和舒服。
那我們前面講到了那么多的一些確認(rèn)策略，那我們接下來再說一下對(duì)話式的標(biāo)識(shí)。因?yàn)槭亲層脩袅私饨徽勥M(jìn)展以及進(jìn)展情況的重要方式
5.對(duì)話式的標(biāo)識(shí)
它包括了以下三個(gè)方面。
1時(shí)間線，開始，進(jìn)行中，結(jié)束。
2接收回執(zhí)，謝謝，知道了，好的。了解了。
3積極反饋。哇，你這個(gè)消息真的很棒。
那對(duì)話式對(duì)話作用是什么呢？是讓用戶了解交談進(jìn)展以及進(jìn)展情況的重要方式。能夠更好的追蹤到用戶的使用過程中的一種路徑方法。
大家會(huì)發(fā)現(xiàn)我們很多時(shí)候智能語(yǔ)音設(shè)備并不是每次都能夠快速，精準(zhǔn)接受識(shí)別我們的信息的。出錯(cuò)率相對(duì)來說是比較高的，下面大概說下語(yǔ)音識(shí)別的出現(xiàn)錯(cuò)誤異常的幾種情況
六、語(yǔ)音出現(xiàn)錯(cuò)誤異常和解決方法
錯(cuò)誤異常的幾種情況
1.未檢測(cè)到語(yǔ)音
2.檢測(cè)到語(yǔ)音，但沒有識(shí)別
3.檢測(cè)到語(yǔ)音，但沒有識(shí)別
4.部分語(yǔ)音識(shí)別錯(cuò)誤
1.未檢測(cè)到語(yǔ)音
未檢測(cè)到語(yǔ)音有大概兩種情況，一是用戶說了，系統(tǒng)沒有接收到。二是用戶沒說。
主要說下用戶說了，系統(tǒng)沒有接收到的情況，建議采取兩種解決方式，
第一種前面我們說到的三級(jí)置信度，我們采取直接詢問，“對(duì)不起，我沒有聽清你說的話，你能再說一遍么？”
第二種是采取什么也不做
1.1那什么情況下使用詢問呢？
用戶必須回復(fù)后，系統(tǒng)才能繼續(xù)進(jìn)行任務(wù)
你的系統(tǒng)只是支持語(yǔ)音
沒有其他回復(fù)方式了
1.2什么情況下更適合使用什么也不做呢？
用戶還有其他選擇（比如手機(jī)界面課、通過一個(gè)按鍵操作）
什么也不做，不會(huì)中斷對(duì)話
有視覺信息可以提示用戶做出明確的選擇
2.檢測(cè)到語(yǔ)音，但沒有識(shí)別
處理方式和未檢測(cè)到語(yǔ)音基本是一直的，這里就帶過了
3.檢測(cè)到語(yǔ)音，但沒有識(shí)別
出現(xiàn)這種情況的原因一般是兩點(diǎn)
1.系統(tǒng)程序沒有針對(duì)這種情況的回復(fù)
2.程序中寫了錯(cuò)誤的回復(fù)
解決方法，這里我們就要通過測(cè)試來發(fā)現(xiàn)具體是哪個(gè)環(huán)節(jié)出了問題了，通過數(shù)據(jù)的收集分析能夠找到具體的答案
4.部分識(shí)別錯(cuò)誤
大概就是這樣的場(chǎng)景，天貓精靈，嗯...我想..。嗯，好的，為您帶來一首XXX的歌曲。
解決方法：這個(gè)還是需要技術(shù)的介入，可以通過使用N-Best列表（可以通過這個(gè)列表規(guī)避二次錯(cuò)誤）和鎮(zhèn)適用固件后相應(yīng)的數(shù)據(jù)分析來構(gòu)建此問題的解決方法
說完了錯(cuò)誤異常處理以及解決方式，我們接下來說下延遲和消除歧義
5.延遲
在交互一般用戶等待的時(shí)間是7秒（現(xiàn)在可能是5秒），當(dāng)你詢問等待回答的時(shí)間超過這個(gè)閾值，用戶就會(huì)懷疑是不是系統(tǒng)出問題了，甚至煩躁。
解決方法：一是通過“請(qǐng)稍等”讓用戶知道你在運(yùn)作和查找。2.非語(yǔ)言提示，比如音效，等等。
6.消除歧義
很多時(shí)候用戶提供的信息只有一部分，再加上中文的多層含義的特殊性，消除歧義對(duì)用戶體驗(yàn)的的提升有重要作用。
比如：?jiǎn)柕孛奶鞖猓袊?guó)很多鎮(zhèn)區(qū)的地名都是一樣的。
鼓樓 河南省_開封市_鼓樓區(qū), 福建省_福州市_鼓樓區(qū), 江蘇省_南京市_鼓樓區(qū), 江蘇省_徐州市_鼓樓區(qū)
解決方法：還是可以采用置信度的方式去判別，如果很確定就直接回答，要么就多輪詢問確定
7.幫助功能
最后的模塊說下幫助功能。也是至關(guān)重要的，能夠在一定程度上消除用戶的“恐慌”，所以，在我們VUI中設(shè)計(jì)對(duì)應(yīng)的幫助是非常有必要的，比如：詢問智能語(yǔ)音設(shè)備你能干什么呢？它會(huì)告訴你他能做些什么？比如：我的設(shè)備怎么樣鏈接你的藍(lán)牙。APP：好的，長(zhǎng)按......
七、語(yǔ)音交互的幾點(diǎn)原則
1.應(yīng)該是省時(shí)、高效的
2.簡(jiǎn)短的
3.能夠被隨時(shí)打斷
4.能夠鏈接上下文語(yǔ)境
1.應(yīng)該是省時(shí)、高效的
和視覺界面交互其實(shí)是差不多的，用戶是非常不愿意花很多時(shí)間達(dá)到他想要完成的任務(wù)的。越高效，越短時(shí)間，用戶的體驗(yàn)會(huì)更加愉悅。
2.簡(jiǎn)短的
只需要告訴用戶主要關(guān)鍵信息即可，不要過于冗余。舉個(gè)簡(jiǎn)單的例子購(gòu)物APP的商品表現(xiàn)形式，一般都是把名稱和價(jià)格放在主要的位置，把詳情放進(jìn)下一級(jí)頁(yè)面。采用盡可能簡(jiǎn)短的表現(xiàn)形式，讓用戶直接獲取到他想要的，當(dāng)然這對(duì)用戶的了解和洞察都要需要經(jīng)驗(yàn)的積累和感知的
3..能夠被隨時(shí)打斷
舉個(gè)例子，用戶：明天的天氣怎么樣？APP：明天XXX地方的天氣19℃，小雨，適合穿.......，用戶可能只是想知道天氣而已，這時(shí)候我們是需要做到可以被用戶打斷，而不是“執(zhí)拗”的把話說完，如果一直說下去，不允許用戶打斷，用戶的請(qǐng)求沒有被回應(yīng)，這時(shí)候用戶會(huì)產(chǎn)生反感心理，
4.能夠鏈接上下文語(yǔ)境
這是目前很多智能語(yǔ)音設(shè)備體驗(yàn)上沒有那么好的地方，也就是前面說的，可以進(jìn)行多輪對(duì)話，當(dāng)然如果要設(shè)定多輪對(duì)話，中間的交互情況將會(huì)比現(xiàn)在更佳龐大，需要考慮的可能性也會(huì)更佳復(fù)雜。
語(yǔ)音交互設(shè)計(jì)的前半部分設(shè)計(jì)流程基本已經(jīng)概述完了，主要說了VUI的起源，一些VUI中用到的一些方法論，設(shè)計(jì)工具，一些異常情況的處理，和VUI設(shè)計(jì)的幾點(diǎn)原則。下面將會(huì)和大家聊下用戶測(cè)試和預(yù)發(fā)布、確認(rèn)發(fā)布......
八、用戶測(cè)試
語(yǔ)音用戶界面的測(cè)試其實(shí)和視覺界面測(cè)試的方法有一些相同的地方，但也有一些差異。
一般來說，在開始測(cè)試之前呢，還是需要做用戶調(diào)研的。大概分為以下幾個(gè)步驟。
1.了解需求（用戶用例背景研究。）
1.做用戶研究和訪談之前，我們要先搞清楚，這個(gè)利益方的需求是什么，業(yè)務(wù)需求，用戶訴求是什么，我們的產(chǎn)品能夠給用戶帶來什么？能夠給他們解決什么問題？最后我們要確定我們的目標(biāo)用戶，然后進(jìn)行訪談和調(diào)研（大體的方法，詳細(xì)可以去看一下阿里提出的五導(dǎo)家加方法論）
2.制定設(shè)計(jì)研究方案。
2.1給目標(biāo)用戶制定，任務(wù)流程。
就是給每一個(gè)受訪的用戶，一個(gè)特定的任務(wù)流程，但很多時(shí)候我們并不是只是測(cè)試一個(gè)任務(wù)，會(huì)有很多任務(wù)，那就會(huì)涉及到任務(wù)排序的問題。還有最好的方法是采用拉丁方陣設(shè)計(jì),這樣的話不必通過出現(xiàn)所有可能的排斥方式來試驗(yàn)。
那么設(shè)定好這次任務(wù)之后呢，我們就要進(jìn)行招募受試人員了
2.2.招募受試人員
需要注意以下幾點(diǎn)。
1.要在目標(biāo)用戶里抽取測(cè)試用戶
2.人數(shù)大概控制在5~12人，可用性專家Jakob Nielseb提出效果一般控制在5-8人左右為最佳
對(duì)于小公司招募測(cè)試用戶可能會(huì)相對(duì)比較困難，成本相對(duì)來說會(huì)比較高，當(dāng)然是可以招募你身邊的朋友和公司的同事來協(xié)助你的，但最好避開項(xiàng)目的直接核心人員。
那么在目前人員完成之后呢，我們大概會(huì)進(jìn)行一些進(jìn)行中的一些測(cè)試，比如說我們做一些提問。
請(qǐng)問這里會(huì)涉及到一個(gè)方法，我們?cè)诮换ピO(shè)計(jì)里面叫它為用戶體驗(yàn)地圖。
3.用戶體驗(yàn)地圖
我會(huì)給到用戶一些任務(wù)的體驗(yàn)流程，然后根據(jù)他的一些反饋，通過語(yǔ)言、表情，然后繪制出用戶體驗(yàn)地圖，從而判斷出，用戶在這個(gè)任務(wù)流程中，得到了一些體驗(yàn)感受，找到可能存在問題的所在節(jié)點(diǎn)，然后進(jìn)行修改。下面說下在訪談中需要注意的I點(diǎn)，如何進(jìn)行訪談
4.訪談需要注意的點(diǎn)
那么在口頭提問的過程中，我們需要注意些什么呢？
4.1.提問不要有一些語(yǔ)句上的偏袒，不要出現(xiàn)故意引導(dǎo)，比如說你喜歡這個(gè)功能嗎？這樣提問是不太合理的。最好提問是，你用完這個(gè)功能之后，你是什么樣的一個(gè)感受？或者說你覺得怎么樣？
4.2.要注意引導(dǎo)用戶得出具體的結(jié)論。而不是用戶說大概，可能我覺得應(yīng)該是等等之類的詞。要有具體的例子，不要一個(gè)抽象的結(jié)果。
4.3.少用為什么開頭，會(huì)讓受訪者覺得你是在質(zhì)疑他，或者說故意的，刁難他。比如說受訪者說，語(yǔ)音天氣詢問功能特別難用，能夠簡(jiǎn)單說一下你的使用場(chǎng)景嗎？他是在什么情況下讓你感覺到難用？描述我們需要更加具體化一些，而不是籠統(tǒng)的，抽象的。
5.可用性測(cè)試（用戶調(diào)研）
目的是測(cè)試工作流程和易用性。但是在語(yǔ)音交互過程中，識(shí)別問題往往會(huì)阻礙用戶完成任務(wù)。最好是找?guī)孜粶y(cè)試用戶，嘗試找出主要的識(shí)別問題，然后修復(fù)它。
可用性測(cè)試大概分為幾類
5.1.遠(yuǎn)程測(cè)試（電話/視頻訪談）
優(yōu)點(diǎn)
更容易找到符合特征的用戶
成本較低，只需要遠(yuǎn)程即可，不需要支付其他額外的支出，比如說來到你約定地方差旅費(fèi)。
會(huì)更加自然，更貼近真實(shí)情景。
用戶心理負(fù)擔(dān)沒有那么大會(huì)比較自在。
可以沒有測(cè)試主持人
條件允許的話，最好使用視頻通話，這樣我們可以錄制影像，后期方便我們?nèi)ビ^察用戶的表情和反應(yīng)，以得出更加正確的測(cè)試結(jié)果。
缺點(diǎn)
沒有辦法實(shí)時(shí)跟進(jìn)參與人員的反應(yīng)。
5.2.攔訪
這種測(cè)試方式是非常有難度的。意味著我們要去到公共場(chǎng)合去攔截受訪者，然后讓他參與到你這個(gè)測(cè)試當(dāng)中，因?yàn)槿伺c人的戒備心理，所以很多人都會(huì)拒絕你，如果你想提高成功率，最好準(zhǔn)備一些小禮品或者其他的小獎(jiǎng)勵(lì)，這樣有助于你提高攔訪的成功率。當(dāng)然你也很有可能得到的結(jié)果，會(huì)有一些偏差，受訪者會(huì)出于某些目的而回答你的一些問題，有可能并不是出于真心的。所以呢，這里不是很建議大家用這種方法。
5.3測(cè)試完成
測(cè)試完之后，我們需要進(jìn)行我們的結(jié)果分析和統(tǒng)計(jì)。
測(cè)試衡量的一些指標(biāo)，我們大概分為5個(gè)關(guān)鍵指標(biāo)。
準(zhǔn)確性，響應(yīng)速度，認(rèn)知速度，清晰度，友好度和聲音
5.4.注意事項(xiàng)
這里需要注意的點(diǎn)是，一定先要預(yù)先設(shè)定好，確定每項(xiàng)任務(wù)完成的標(biāo)志是什么。不然后期對(duì)結(jié)果的一個(gè)標(biāo)準(zhǔn)很難去統(tǒng)計(jì)，會(huì)比較混亂。
我們需要總結(jié)這是用戶對(duì)問題的回答及完成任務(wù)率錯(cuò)誤數(shù)量和類型等等，從中找出用戶的痛點(diǎn)，用戶的一些干擾點(diǎn)。按任務(wù)出錯(cuò)時(shí)，用戶是否能夠自己解決呢？等等，具體需要得出的一些結(jié)論，要根據(jù)自己想要測(cè)試的一些目的來定。
在這樣我們就完成了整個(gè)可用性測(cè)試的流程。
6.預(yù)測(cè)試
發(fā)布之前需要做一次與測(cè)試，可以權(quán)重沒有那么高。但也是關(guān)鍵的一步。
7.識(shí)別測(cè)試
最重要的還是識(shí)別測(cè)試，這關(guān)系著整個(gè)產(chǎn)品的體驗(yàn)問題，整體的測(cè)試流程需要用三級(jí)置信度和N-Best列表、以及后臺(tái)的表格相結(jié)合，找出相對(duì)應(yīng)的問題節(jié)點(diǎn)，并且修復(fù)它。
8.負(fù)載測(cè)試
你得清楚明白你的設(shè)備，最多的承載量，不然流量一進(jìn)來，服務(wù)器就崩潰了，這樣的體驗(yàn)是極其差的。
9.效果的評(píng)估
你還得去做效果的評(píng)估。在試運(yùn)行開始之前，你需要制定目標(biāo)，然后看是否達(dá)到這個(gè)目標(biāo)，這個(gè)效果大概是什么樣的？是否達(dá)到預(yù)期？任務(wù)的完成率也是非常關(guān)鍵的一個(gè)成功指標(biāo)。
10.試運(yùn)行
最后到達(dá)發(fā)布階段。為了產(chǎn)品的穩(wěn)妥起見，我們還是會(huì)進(jìn)行一次試運(yùn)行，
11.發(fā)布
12.迭代
條件允許的話，重復(fù)上面一次的用戶調(diào)研的方法，然后得出一些現(xiàn)階段的一些問題。我們需要實(shí)時(shí)跟蹤系統(tǒng)的故障并快速的改進(jìn)，這是我們非常需要要做到的。
大概全部的語(yǔ)音交互流程就說到這里了，我們簡(jiǎn)單的回顧下下
1.語(yǔ)音交互設(shè)計(jì)的起源
2.語(yǔ)音交互設(shè)計(jì)的設(shè)計(jì)原則-示例對(duì)話
3.確認(rèn)原則/糾錯(cuò)方法-三級(jí)置信度
4.可用性測(cè)試
5.發(fā)布
那語(yǔ)音交互設(shè)計(jì)的未來點(diǎn)在那里？設(shè)計(jì)師我們的機(jī)會(huì)在哪里
戰(zhàn)略選擇
世界一直都是存在不確定性的，如何能夠應(yīng)對(duì)呢？眼界和選擇。
這里延伸下梁寧在《產(chǎn)品思維30講》里面說到的點(diǎn)線面的戰(zhàn)略選擇的問題，她大概說了這樣的例子：比如有一對(duì)雙胞胎，2010年一起大學(xué)畢業(yè)，一個(gè)進(jìn)入了騰訊，一個(gè)進(jìn)入了報(bào)社。7年之后呢，騰訊的那位如果不出意外應(yīng)該是年薪百萬，而且滿街都是獵頭在挖，投資人在挖，只要出來創(chuàng)業(yè)就給錢，而去了報(bào)社的那位呢，報(bào)社的情況我們今天肯定了解整個(gè)產(chǎn)業(yè)都沉淪了，曾經(jīng)他寄托理想的整個(gè)產(chǎn)業(yè)都沒有了，其實(shí)一切都需要重來，在這個(gè)時(shí)候并不是說雙胞胎他們的個(gè)人的素質(zhì)有問題，或者是他們的能力點(diǎn)有問題，點(diǎn)是沒有問題的，也不是他們分別跟隨的領(lǐng)導(dǎo)，比如說我們就跟老大，他們的老大的能力點(diǎn)和個(gè)人操守也都是沒有問題的，但是問題在哪里？問題是說這兩個(gè)單位所附著的經(jīng)濟(jì)體，一個(gè)是在快速崛起，一個(gè)是在快速崩潰。你努力工作的公司收益，遠(yuǎn)遠(yuǎn)不如你在2010年以前或者2013年以前，比如說買騰訊的股票，或者是說你買一套北上廣的房子，
我們本身是一個(gè)點(diǎn)，我們這個(gè)點(diǎn)需要附著在整個(gè)整個(gè)快速崛起的“線”上，戰(zhàn)略的選擇，眼界的層面顯得尤為重要，和努力一樣重要，甚至往往有時(shí)候選擇比努力更重要，但選擇也是努力累計(jì)的結(jié)果。我們?cè)O(shè)計(jì)師如何做出順應(yīng)這個(gè)迅速崛起的經(jīng)濟(jì)體的選擇，也是我們當(dāng)下 的機(jī)會(huì)，我們能看到什么機(jī)會(huì)，我們要附著到什么樣的線上，在當(dāng)下職業(yè)邊界愈發(fā)模糊的時(shí)代，我們能力和眼界的提升，可以做到從容的應(yīng)對(duì)未來的種種變故。
那么同樣，隨之AI的發(fā)展，5G的到來，我們的很多工作方式都有可能被顛覆，語(yǔ)音交互設(shè)計(jì)的將會(huì)是一片藍(lán)海，雖然現(xiàn)在有諸多的桎梏，但這是趨勢(shì)，是快速崛起的趨勢(shì)。設(shè)計(jì)師工作你能想象未來沒有顯示器么？沒有臃腫的主機(jī)么？等等，未來都有可能會(huì)發(fā)生。而這一切也正在發(fā)生.....
原文地址：站酷
作者：木七木七
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.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ì)公司
在終端APP中，動(dòng)畫非常常見，它可以輔助視覺制造焦點(diǎn)，同時(shí)也可以讓用戶交互更加順滑，但動(dòng)畫的實(shí)現(xiàn)卻是設(shè)計(jì)師和研發(fā)群體的一個(gè)痛點(diǎn)。如何輔助設(shè)計(jì)師設(shè)計(jì)高性能炫酷的動(dòng)畫、如何將設(shè)計(jì)師設(shè)計(jì)的動(dòng)畫準(zhǔn)確無誤的還原到終端APP上是業(yè)界不斷探索和解決的問題。
圖1 傳統(tǒng)動(dòng)畫實(shí)現(xiàn)流程圖
當(dāng)前最好的動(dòng)畫設(shè)計(jì)軟件是Adobe After Effects（簡(jiǎn)稱AE），從AE動(dòng)畫制作到終端APP呈現(xiàn)，傳統(tǒng)的實(shí)現(xiàn)方式如圖1所示，有三大痛點(diǎn)：實(shí)現(xiàn)成本高、溝通成本高和性能難以保證。
近幾年，業(yè)界誕生了像Lottie、SVGA這樣的動(dòng)畫工作流解決方案，雖然在一定程度上提升了生產(chǎn)效率，但存在AE支持能力有限、動(dòng)畫性能難以保證、配套工具支持有限的問題。
PAG（Portable Animated Graphics）是騰訊PCG發(fā)布器中臺(tái)自主研發(fā)的一套完整的動(dòng)畫工作流解決方案，助力于將AE動(dòng)畫方便快捷的應(yīng)用于各平臺(tái)終端。PAG的流程圖如圖2所示，設(shè)計(jì)師在AE上設(shè)計(jì)出動(dòng)畫后，可以通過導(dǎo)出插件導(dǎo)出pag文件，同時(shí)PAG提供了桌面端預(yù)覽工具，支持實(shí)時(shí)預(yù)覽效果，在確認(rèn)效果后，通過運(yùn)行配置上線，各平臺(tái)終端可以通過PAG SDK加載渲染pag動(dòng)畫。
圖2 PAG動(dòng)畫工作流流程圖
與Lottie、SVGA相比，PAG增加支持了服務(wù)端。除此之外，如圖3所示，PAG動(dòng)畫方案在導(dǎo)出動(dòng)畫文件大小、AE特性支持和可編輯性方面具有較大的優(yōu)勢(shì)。
圖3 PAG和Lottie對(duì)比圖
和Lottie、SVGA實(shí)現(xiàn)不同的是，PAG不依賴平臺(tái)端渲染接口，可以實(shí)現(xiàn)各平臺(tái)的渲染一致性。PAG與Lottie、SVGA的矢量能力支持如附表1《AE特性能力支持》所示。
無論是PAG還是Lottie、SVGA，所支持的AE特性僅僅是AE眾多特性中的很少的一部分，這在一定程度上限制了設(shè)計(jì)師的創(chuàng)造力。針對(duì)這個(gè)問題，PAG新增了BMP預(yù)合成的導(dǎo)出方式，支持導(dǎo)出所有AE特性，適用于不可編輯的場(chǎng)景。其原理如圖4所示，在合成的層面將渲染結(jié)果截取成圖片，然后進(jìn)行視頻編碼。
圖 4 BMP預(yù)合成原理圖
針對(duì)視頻不支持透明通道而動(dòng)畫需要包含透明通道的問題，在編碼的層面擴(kuò)展了透明通道的支持，如圖5所示。
圖6 PAG矢量和BMP預(yù)合成混合導(dǎo)出
針對(duì)導(dǎo)出動(dòng)畫和AE設(shè)計(jì)動(dòng)畫存在偏差的問題，PAG導(dǎo)出插件增加了使用了不支持AE特性提醒功能，如下圖7所示。
圖7 PAG導(dǎo)出面板
在預(yù)覽界面，同樣有不支持特性的提示，如圖8所示。
圖8 PAG導(dǎo)出面板預(yù)覽窗口
在使用AE設(shè)計(jì)動(dòng)畫的過程中，設(shè)計(jì)師可以方便快捷的提前查看使用了那些不支持直接導(dǎo)出的AE特性，換種實(shí)現(xiàn)方式或者導(dǎo)出成BMP預(yù)合成，有效的解決了設(shè)計(jì)動(dòng)畫和導(dǎo)出動(dòng)畫存在偏差的問題。
在AE動(dòng)畫設(shè)計(jì)的過程中，PAG導(dǎo)出面板提供了一鍵設(shè)置BMP預(yù)合成的方法，如下圖9所示。需要提示的是，一旦設(shè)置了BMP預(yù)合成，該合成中的文本和圖片將不能再被用戶編輯。
圖9 BMP 預(yù)合成設(shè)置
由于BMP預(yù)合成可能會(huì)影響到可替換圖片的數(shù)量，PAG同時(shí)會(huì)實(shí)時(shí)更新可替換圖片的數(shù)量給設(shè)計(jì)以提示。
在用pag設(shè)置的素材中，經(jīng)常會(huì)遇到用戶填充的圖片與默認(rèn)占位圖尺寸不一致的情況，在導(dǎo)出面板中PAG增加圖片填充的四個(gè)規(guī)則，如圖10所示：
圖10 可替換圖片填充設(shè)置
其中：
不縮放：畫面不縮放，從左上角位置開始裁剪
黑邊：在保持高寬比的情況下縮放到設(shè)備的可用屏幕大小，圖像不發(fā)生變形，如果圖片尺寸和填充區(qū)域比例不一致，會(huì)出現(xiàn)黑邊，為默認(rèn)填充模式
拉伸：不保持寬高比填充，會(huì)發(fā)生失變形
裁剪：在保持高寬比的情況下縮放到完全填滿可用的屏幕大小
具體效果如圖11所示。
圖11 圖片填充效果圖
PAGViewer支持桌面端預(yù)覽PAG文件動(dòng)畫效果，如下圖所示。支持查看動(dòng)畫文件中包含有多少個(gè)可編輯文本和可編輯圖片，且支持設(shè)計(jì)師本地填充素材，實(shí)時(shí)預(yù)覽填充效果，無需等待上線后才能確認(rèn)真實(shí)效果。圖片占位圖支持填充圖片或視頻，如果PAG文件內(nèi)置了音頻文件，支持播放音頻效果。具體效果如圖12所示。
圖12 PAG效果預(yù)覽
在pag動(dòng)畫實(shí)際使用的過程中，PAG經(jīng)常遇到的問題是設(shè)計(jì)師辛辛苦苦設(shè)計(jì)的動(dòng)畫在終端上性能表現(xiàn)不佳，需要進(jìn)行返工優(yōu)化，同樣的問題在使用Lottie方案時(shí)候也會(huì)存在。
除了效果預(yù)覽，PAGViewer還增加了性能展示面板，可以很方便的看到pag動(dòng)畫的基本信息，如時(shí)長(zhǎng)、幀率、尺寸、bmp預(yù)合成的數(shù)量，圖層總數(shù)等，還有量化的性能指標(biāo)，定量的評(píng)估pag文件的性能，如圖13所示，方便設(shè)計(jì)師進(jìn)行針對(duì)性的優(yōu)化，而不需要等到上線前才會(huì)暴露性能問題。具體效果如圖13所示。
圖13 PAG性能展示面板
目前PAG方案已經(jīng)廣泛應(yīng)用于騰訊公司內(nèi)外幾十款產(chǎn)品中，涵蓋了眾多的國(guó)民級(jí)應(yīng)用。
總結(jié)下來，PAG目前主要使用在以下幾大場(chǎng)景：
圖15 UI動(dòng)畫場(chǎng)景
設(shè)計(jì)師設(shè)計(jì)出動(dòng)畫文件后，研發(fā)只需要替換預(yù)設(shè)的文本內(nèi)容即可，并且文件體積非常小。
圖16 貼紙動(dòng)畫場(chǎng)景
圖17 照片/視頻模板場(chǎng)景
PAG支持將內(nèi)置的圖片作為占位圖替換，并保留所有動(dòng)畫效果。因此可以將整個(gè)PAG動(dòng)畫設(shè)計(jì)成一個(gè)模板，把預(yù)設(shè)的占位圖替換成用戶選取的照片，自動(dòng)套用效果生成視頻。全程可以讓設(shè)計(jì)師自由批量生產(chǎn)模板，無需研發(fā)介入。
仍然基于圖片替換原理，PAG也支持將占位圖替換為視頻，實(shí)現(xiàn)視頻模板功能。
圖18 智能剪輯場(chǎng)景
智能剪輯是圍繞用戶上傳的視頻內(nèi)容，生成定制化的模板，模板本身是不固定的，可以從多個(gè)PAG文件組合而成，類似活字印刷。設(shè)計(jì)師可以利用這個(gè)特性，構(gòu)建自己的特效組件庫(kù)，然后對(duì)接AI的識(shí)別能力，根據(jù)一定規(guī)則組合得到無限數(shù)量的模板效果，可以做到一鍵出片。這塊目前的典型應(yīng)用場(chǎng)景是王者榮耀的周戰(zhàn)報(bào)功能，隨機(jī)生成游戲高光時(shí)刻視頻。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.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ì)公司
動(dòng)效是用戶體驗(yàn)的重要組成部分，也是產(chǎn)品調(diào)性的重要體現(xiàn)。如今動(dòng)效設(shè)計(jì)也有了更多的解決方案，如Framer、Principle、Flinto、Protopie等，這些軟件在制作交互原型時(shí)，確實(shí)有更輕量便捷的優(yōu)勢(shì)，但效果也有一定的局限性，或者要求使用者有代碼基礎(chǔ)，比較適合有針對(duì)性的人群。而After Effects作為動(dòng)效軟件的鼻祖，以其強(qiáng)大的兼容性、效果豐富性和清晰明了的圖層操作邏輯深得設(shè)計(jì)師們喜愛，不論是UI、運(yùn)營(yíng)還是多媒體類型的設(shè)計(jì)都能滿足，無疑是目前最具有普適性的動(dòng)效軟件。本文從AE的插件、操作以及落地三個(gè)方面，為大家整理了一波實(shí)用技巧，希望能幫助大家在工作中更加得心應(yīng)手。
工欲善其事必先利其器，不論是AE還是其他軟件，好的插件都能配合軟件本身達(dá)到事半功倍的效果。這里介紹十款A(yù)E上不容錯(cuò)過的精品插件。
AE與PS有很好的兼容性，PS的圖層以及各種樣式都能無偏差的導(dǎo)入到AE，但同樣是Adobe家族的AI，要導(dǎo)入AE卻特別麻煩，更不用說沒有血緣的Sketch了。偏偏AI和Sketch卻經(jīng)常需要和AE打交道，這時(shí)候以下兩款插件便應(yīng)運(yùn)而生。
Overlord不僅可以實(shí)現(xiàn)AI導(dǎo)入AE，還能隨時(shí)從AE導(dǎo)回AI修改，這對(duì)本身不適合用于繪制圖形的AE來說，無疑是補(bǔ)上了一個(gè)短板。
最新的Overlord支持路徑、形狀、參數(shù)圖形、剪切關(guān)系、文本、甚至大部分的漸變參數(shù)都能無偏差互導(dǎo)，并且可以設(shè)置導(dǎo)成子圖層還是獨(dú)立圖層，可以說是非常方便了。
官網(wǎng)鏈接：https://www.battleaxe.co/overlord
如果說Overlord是AI和AE之間的一座橋梁，那AEUX就是Sketch和AE之間的一座橋梁。導(dǎo)入前在Sketch里將圖層整理好，導(dǎo)入AE后圖層關(guān)系也是一目了然。
官網(wǎng)鏈接：https://aeux.io/
如果說AE只能裝一款插件，那必然是Motion Tools了，它將很多常用操作整合到一個(gè)面板上，并且可以跳過繁瑣的常規(guī)操作。包括快速調(diào)整曲線、定位圖層錨點(diǎn)、克隆關(guān)鍵幀、制作回彈效果、錯(cuò)位圖層序列、生成多圖層空對(duì)象等。這里演示幾個(gè)常用功能。
快速調(diào)整速度緩動(dòng)曲線：
不用再通過輸入表達(dá)式，做出操控便捷又靈活的回彈效果：
錨點(diǎn)是元素變換時(shí)的基準(zhǔn)點(diǎn)，更改錨點(diǎn)也是高頻操作。Motion Tools不僅可以快速修改圖層錨點(diǎn)，并且支持多圖層批量操作：
官網(wǎng)鏈接：https://motiondesign.school/products/motion-tools/
新轉(zhuǎn)成的預(yù)合成尺寸總是占滿畫布，不方便做動(dòng)畫且干擾其他圖層選擇。手動(dòng)調(diào)節(jié)的話會(huì)影響元素的位置、位移等屬性，Auto Crop很好地解決了這個(gè)問題，能夠?qū)㈩A(yù)合成裁切至適合當(dāng)前元素的尺寸。
官網(wǎng)鏈接：https://aescripts.com/auto-crop
Auto Sway能夠很便捷的制作頭發(fā)或者服裝飄動(dòng)的效果，在日常運(yùn)營(yíng)設(shè)計(jì)中，讓你的人物快速變得生動(dòng)靈活起來。
官網(wǎng)鏈接：https://aescripts.com/autosway
AE自身帶有粒子效果器，點(diǎn)擊“效果 → 模擬 → CC Particle World ”就是。但更強(qiáng)大更為人所熟知的卻是這款粒子插件—Red Giant旗下Trapcode插件包里的“Particular”。
很多運(yùn)營(yíng)或游戲頁(yè)面中的氛圍元素，例如落花、飄雪、灰燼、火花、彩帶等，Particular都可以快速做出。
除了運(yùn)營(yíng)設(shè)計(jì)，粒子在很多UI場(chǎng)景也同樣適用，例如結(jié)合形變或路徑做的飄散和拖尾效果，就可以用在充電或掃描等場(chǎng)景。
官網(wǎng)鏈接：https://www.maxon.net/zh/red-giant-complete/trapcode-suite
Bodymovin能夠?qū)E中矢量圖形做成的動(dòng)效導(dǎo)成json文件，變成一串純粹的代碼，再被Lottie渲染還原出來。這就讓“尺寸”和“幀率”擺脫了以往體積的束縛，導(dǎo)出的即使是又高清又流暢的大圖，也可以保持很小的體積。
QQ最新的Q彈超清表情，就是用Lottie實(shí)現(xiàn)的，大家可以在手機(jī)QQ上親自體驗(yàn)這種爽滑Q彈的感覺哦。
官網(wǎng)鏈接：https://aescripts.com/bodymovin/
PAG（Portable Animated Graphics ）是一套完整的動(dòng)畫工作流，在動(dòng)畫導(dǎo)出與渲染方面和Lottie相似，但更進(jìn)一步的是，PAG還引入了視頻序列幀結(jié)合矢量的混合導(dǎo)出能力，這就保證了PAG能支持AE的所有特性和效果。
另外PAG還提供完善的桌面預(yù)覽工具、性能監(jiān)測(cè)可視化、運(yùn)行時(shí)可編輯等特點(diǎn)，能很好的打通設(shè)計(jì)與開發(fā)之間，從創(chuàng)作到素材交付上線的流程。
官網(wǎng)鏈接：https://pag.io/
Gif格式因?yàn)椴恢С职胪该鲄^(qū)域且容易有鋸齒，如今的實(shí)際開發(fā)中已經(jīng)有了Apng、Lottie等很多更好的替代方案，但在網(wǎng)頁(yè)瀏覽、文檔編輯等許多場(chǎng)景，還是需要使用Gif來演示動(dòng)效或者作為封面縮略圖。AE從2014版本后就不支持Gif導(dǎo)出了，而Gifgun就是一款能很好地導(dǎo)出Gif格式的插件。
Gifgun導(dǎo)出的格式小巧清晰，本文所有動(dòng)圖就是用這款插件導(dǎo)出，真香。
官網(wǎng)鏈接：https://aescripts.com/gifgun/
AE本身不支持直接導(dǎo)出MP4，很多時(shí)候只能先導(dǎo)出體積龐大的MOV格式，再通過第三方軟件轉(zhuǎn)成MP4，操作繁瑣不說，還損失畫質(zhì)。
Adobe自家的多媒體編碼軟件Media Encoder，也可以完美導(dǎo)出MP4格式，不過這款軟件本身體積較大，每次打開都要運(yùn)行很久。
這里推薦使用更實(shí)用的MP4導(dǎo)出軟件 — Aftercodecs。安裝后在輸出模塊設(shè)置里，就能找到對(duì)應(yīng)的導(dǎo)出項(xiàng)了，并且導(dǎo)出的MP4也是小巧高清的。
官網(wǎng)鏈接：https://aescripts.com/aftercodecs/
小技巧這部分，整理了AE高頻操作經(jīng)常會(huì)遇見的一些問題，以及對(duì)應(yīng)比較高效的解決方案。
當(dāng)我們想調(diào)整的元素已經(jīng)打上過關(guān)鍵幀，這時(shí)直接調(diào)整元素的位置或縮放屬性，就會(huì)影響到原本的效果，使用空對(duì)象就可以解決這一問題。
關(guān)鍵幀比較多時(shí)，按住 “ Option ” 鍵，用鼠標(biāo)拖動(dòng)最末尾的關(guān)鍵幀，可以對(duì)所選關(guān)鍵幀進(jìn)行整體等比拉伸，并且支持多圖層同時(shí)操作。
新建形狀層的定位錨點(diǎn)總是不對(duì)齊圖層的中心，這在做一些帶縮放或旋轉(zhuǎn)屬性的動(dòng)畫時(shí)就特別不方便，按住“Command”雙擊“平移錨點(diǎn)工具”，即可使圖層錨點(diǎn)快速對(duì)位到圖層中心。
還有更直接的方法，就是在“首選項(xiàng)”里將“在新形狀圖層上居中放置錨點(diǎn)”打上勾，以后新建的形狀層錨點(diǎn)都會(huì)自動(dòng)對(duì)齊圖層中心啦。
AE的很多插件和表達(dá)式對(duì)中文版本不兼容，包括很多教程也都是國(guó)外案例，所以其實(shí)直接用英文版的AE是最好的。但是難免也有跟我一樣看見英文界面就抓瞎的同學(xué)，平時(shí)還是習(xí)慣用中文版，有需要時(shí)才換成英文版。這里介紹一種AE快速切換中英文的方法，對(duì)2018以上的版本都適用。
以macOS系統(tǒng)為例，在以下路徑找到：
前往 \ 電腦 \ Macintosh HD \ 資源庫(kù) \ Application Support \ Adobe \ Adobe After Effects CC \ AMT \ application.xml
將“application.xml”這個(gè)文件用“文本編輯”打開，然后按“Command + F”使用查找命令，將“zh_CN”文本替換為“en_US”，保存后重啟AE就是英文版了。
Windows也是同理，對(duì)應(yīng)路徑為：
C: \ Program Files \ Adobe \ Adobe After Effects CC \ Support Files \ AMT \ application.xml
然后將“application.xml”這個(gè)文件用“記事本”打開，同樣的查找“zh_CN”后替換“en_US”就好。
之后可以將“application.xml”文件分別存一份“zh_CN”中文和“en_US”英文的版本，下回再要切換時(shí)，直接將對(duì)應(yīng)的“application.xml”文件復(fù)制到原路徑替換即可。
新置入一段想要循環(huán)的視頻素材時(shí)，很多人習(xí)慣將素材復(fù)制多次，或者通過時(shí)間重映射打上關(guān)鍵幀后在添加循環(huán)表達(dá)式。其實(shí)并不需要這么麻煩，在項(xiàng)目窗口右鍵對(duì)應(yīng)的素材，選擇“解釋素材 → 主要”，在彈出窗口直接就可以設(shè)置素材循環(huán)次數(shù)。
雖然AE的全部快捷鍵可以寫滿長(zhǎng)長(zhǎng)一串列表，但在精不在多。實(shí)際使用時(shí)，其實(shí)只要記住一些常用的關(guān)鍵快捷鍵，就已經(jīng)可以效率翻倍，享受“鍵步如飛”的感覺了。
以最常用的“添加關(guān)鍵幀”為例，在不使用快捷鍵的前提下，想要給對(duì)象添加一個(gè)“位置”關(guān)鍵幀，需要至少3個(gè)步驟：
而使用快捷鍵 “ Option+Shift+P ”，一步即可完成，并且不會(huì)展開不相關(guān)的屬性：
這對(duì)于一個(gè)工程里需要用到成百上千次的k幀操作來說，著實(shí)可以省下不少時(shí)間，可以說是不得不用的一個(gè)快捷操作。
秉持在精不在多的原則，整理出以下一些高效又常用的快捷鍵，親測(cè)好用哦！
因?yàn)樽髡呤荕acOS系統(tǒng)，所以下文中提到的 Option 可以對(duì)應(yīng) Windows 的 Alt ； Command 對(duì)應(yīng) Windows 的 Control 。
五大基礎(chǔ)變換屬性
在對(duì)應(yīng)圖層使用這五個(gè)快捷鍵，即可快速展開或收起對(duì)應(yīng)屬性。
位置：P（Position）
縮放：S（Scale）
旋轉(zhuǎn)：R（Rotation）
不透明度：T（Transparency）
錨點(diǎn)：A（Anchor）
常用工具選擇
選擇工具：V
形狀工具：Q
鋼筆工具：P
攝像機(jī)工具：C
關(guān)鍵幀操作
快速添加關(guān)鍵幀：Option + Shift + “ * ”（ * = 對(duì)應(yīng)屬性快捷鍵）
向右移動(dòng)關(guān)鍵幀一幀：Option + 右箭頭
向左移動(dòng)關(guān)鍵幀一幀：Option + 左箭頭
向右移動(dòng)關(guān)鍵幀十幀：Option + Shift + 右箭頭
向左移動(dòng)關(guān)鍵幀十幀：Option + Shift + 左箭頭
緩動(dòng)關(guān)鍵幀：F9
時(shí)間指針操作
定位到上一可見關(guān)鍵幀：J
定位到下一可見關(guān)鍵幀：K
定位到圖層入點(diǎn)：I
定位到圖層出點(diǎn)：O
設(shè)置當(dāng)前為工作區(qū)開始：B
設(shè)置當(dāng)前為工作區(qū)結(jié)束： N
圖層操作
將圖層拆分 ：Shift + Command + D
裁去時(shí)間線左側(cè)圖層：Option + [
裁去時(shí)間線右側(cè)圖層：Option + ]
設(shè)置當(dāng)前為入點(diǎn)： [
設(shè)置當(dāng)前為出點(diǎn)： ]
復(fù)制圖層：Command + D
其他常用操作
展開/收起帶關(guān)鍵幀的屬性：U
展開/收起所有屬性：UU
展開/收起遮罩屬性：M
展開/收起音頻屬性：L
轉(zhuǎn)為預(yù)合成：Shift + Command + C
圖像自適應(yīng)合成寬高：Shift + Option + F
After Effects官方快捷鍵大全：https://helpx.adobe.com/cn/after-effects/user-guide.html/cn/after-effects/using/keyboard-shortcuts-reference.ug.html
設(shè)計(jì)再好的動(dòng)效如果不能實(shí)際落地，那一切也只是徒勞，所以動(dòng)效輸出在對(duì)接開發(fā)時(shí)非常關(guān)鍵。按照輸出和實(shí)現(xiàn)的方式不同，我們可以將動(dòng)效分為兩種類型，一種是播放型動(dòng)效，一種是交互型動(dòng)效。
播放型動(dòng)效是指在輸出時(shí)效果就已經(jīng)固定的動(dòng)效，滿足觸發(fā)條件后播放出來，過程中并不會(huì)有影響效果的元素。
例如常見的APP底部導(dǎo)航點(diǎn)擊效果，icon動(dòng)效在用戶點(diǎn)擊時(shí)觸發(fā)播放，這個(gè)效果在輸出時(shí)就是固定的，不受任何其他因素影響，可以由設(shè)計(jì)師直接導(dǎo)出。
播放型動(dòng)效有以下幾種比較常見的輸出格式：
Gif、Apng、Webp本質(zhì)上都是將位圖進(jìn)行壓縮和轉(zhuǎn)換，而Lottie則是基于代碼層面的動(dòng)畫渲染，PAG則結(jié)合了兩者的特性。目前一般使用Apng、Lottie、和PAG就已經(jīng)可以覆蓋大部分的輸出場(chǎng)景，是可以優(yōu)先考慮的動(dòng)圖格式。
交互型動(dòng)效是指變換內(nèi)容跟我們的交互操作相關(guān)聯(lián)的動(dòng)效，并且包含無法由設(shè)計(jì)師直接導(dǎo)出的元素，比如用戶的頭像、名稱等。
比如這個(gè)支付面板切換的效果，變換的元素中包含了用戶的余額和綁卡信息，這些信息是無法由設(shè)計(jì)師輸出的。
這種動(dòng)效需要開發(fā)在代碼側(cè)還原。如果只是輸出視頻demo，開發(fā)同學(xué)很難將其中的細(xì)節(jié)（例如時(shí)間出入點(diǎn)、曲線速率等）還原出來。這就需要設(shè)計(jì)師有一份清晰的標(biāo)注文檔，將動(dòng)效的細(xì)節(jié)參數(shù)跟開發(fā)更好的明確下來。
一份規(guī)范的動(dòng)效標(biāo)注文檔，至少應(yīng)該包含以下幾個(gè)方面，
觸發(fā)：在什么條件下觸發(fā)動(dòng)效，例如點(diǎn)擊、雙擊、滑動(dòng)、長(zhǎng)按等；
對(duì)象：發(fā)生變換的對(duì)象，例如按鈕、列表、文字等；
屬性：具體變換的屬性，例如位移、縮放、不透明度等；
參數(shù)：換化屬性的具體參數(shù)，例如不透明度值從0到1；
時(shí)長(zhǎng)：變換的起始時(shí)間點(diǎn)、持續(xù)時(shí)間；
曲線：變換的速率曲線，描述在固定的時(shí)長(zhǎng)范圍內(nèi)，速度是如何變化的；
以上圖的支付面板首次切換過程為例，我們的標(biāo)注文檔是這樣的：
第一步定義好頁(yè)面的起始和結(jié)束狀態(tài)，并標(biāo)明動(dòng)效元素
第二步則是將各元素的運(yùn)動(dòng)細(xì)節(jié)用具體參數(shù)描述清楚
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.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)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.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ù)可視化的分析過程中，用戶是所有行為的主體，通過獲取的可視信息形成認(rèn)知，在交互分析過程中獲取解決問題的方法。
在這個(gè)過程中，感知和認(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è)步驟中的過渡形式。這個(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ù)過載之間的處理是非常復(fù)雜的。有時(shí)我們會(huì)通過物理環(huán)境的變化來改變服務(wù)模型，但是更多時(shí)候我們需要通過交互設(shè)計(jì)來完成對(duì)復(fù)雜信息的處理，提升用戶對(duì)數(shù)據(jù)解讀的便捷性。
那么當(dāng)我們?cè)谠O(shè)計(jì)一張數(shù)據(jù)大屏?xí)r，我們?cè)撊绾瓮ㄟ^交互提升用戶獲取有效數(shù)據(jù)的效能呢，下面我們一起來探討如何完善大屏設(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ì)上用戶是否可以明晰它是是否是全屏篩選，在交互邏輯上用戶是否可以通過最短的路徑快速篩選抵達(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ì)地圖的樣式來展示某個(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é)合起來，不僅免去了圖表多亂雜的場(chǎng)景，用戶也可以更快地查看到想要獲取的數(shù)據(jù)信息。
2、清晰的數(shù)據(jù)展示
配合圖表展示的就是我們的“數(shù)據(jù)數(shù)字”內(nèi)容了，在我們將設(shè)計(jì)稿傳遞給前端同事后，填充真實(shí)數(shù)據(jù)后的視覺效果可能看起來沒有效果圖規(guī)整，一方面在進(jìn)行繪制效果圖之前，可以與產(chǎn)品業(yè)務(wù)側(cè)共同探討數(shù)據(jù)內(nèi)容，盡量給視覺設(shè)計(jì)師提供真實(shí)的數(shù)據(jù)，另一方面，在我們作圖搬磚的時(shí)候，也要注意一下幾點(diǎn)：
（1）不要遺漏了“無數(shù)據(jù)”的缺省空界面，當(dāng)無法獲取到數(shù)據(jù)時(shí)，我們需要給前端提供這樣的缺省圖；
（2）清晰的數(shù)據(jù)排序規(guī)則，比如環(huán)形圖中，總起始點(diǎn)到終點(diǎn)，數(shù)據(jù)對(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í)間來來引導(dǎo)用戶；
（5）特定的數(shù)值按照特定的格式和單位顯示，比如羊字符能讓用戶第一時(shí)間識(shí)別到是人民幣，而如果金額數(shù)字過長(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)，即使大屏操作鏈路過長(zhǎng)，也可以讓用戶快速上手操作，減少流程學(xué)習(xí)時(shí)間。進(jìn)入下一場(chǎng)景后，又會(huì)有對(duì)應(yīng)的區(qū)域提示用戶返回全局或查看其他場(chǎng)景；當(dāng)做到層層有響應(yīng)，就能減少用戶在每一步操作上的困惑時(shí)間，幫助用戶快速上手操作流程，并且大大提升工作效率。
但是我們需要注意的是，不要為了酷炫而做太多無用的動(dòng)效，不僅會(huì)讓頁(yè)面加載速度慢，也會(huì)讓用戶覺得雜亂無重點(diǎn)。
總結(jié)：
交互可提高可視化系統(tǒng)的效率，幫助用戶處理更多的數(shù)據(jù)，完成更復(fù)雜的任務(wù)。然而，實(shí)現(xiàn)交互本身也有額外成本?；?dòng)的系統(tǒng)可以使用戶能探索更大的信息空間，但隨之而來的成本是用戶需要花費(fèi)更多的時(shí)間與精力去瀏覽和探索數(shù)據(jù)。
因此，可視化系統(tǒng)應(yīng)當(dāng)采用數(shù)據(jù)挖掘算法自動(dòng)發(fā)現(xiàn)用戶可能會(huì)關(guān)心的數(shù)據(jù)或者模式；并通過可視化呈現(xiàn)給用戶，用戶在這個(gè)基礎(chǔ)上通過互動(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é)家組成的研究小組試圖解釋人類視覺的工作原理。他們觀察了許多重要的視覺現(xiàn)象并對(duì)它們編訂了目錄。其中最基礎(chǔ)的發(fā)現(xiàn)是人類視覺是整體的：我們的視覺系統(tǒng)自動(dòng)對(duì)視覺輸入構(gòu)建結(jié)構(gòu)，并在神經(jīng)系統(tǒng)層面上感知形狀、圖形和物體，而不是只看到互不相連的邊、線和區(qū)域。“形狀”和“圖形”在德語(yǔ)中是Gestalt，因此這些理論也稱做視覺感知的格式塔原理。
格式塔學(xué)派主張人腦的運(yùn)作原理屬于整體論，“整體不同于其部件的總和”。例如，我們對(duì)一朵花的感知，并非純粹單單從對(duì)花的形狀、顏色、大小等感官資訊而來，還包括我們對(duì)花過去的經(jīng)驗(yàn)和印象，加起來才是我們對(duì)一朵花的感知。
格式塔心理學(xué)家認(rèn)為這些原則之所以存在，是因?yàn)?strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;">頭腦具有天生的傾向，可以根據(jù)某些規(guī)則感知刺激中的模式。（是不是覺得hin神奇）
比如，這是著名的“人臉花瓶幻覺”圖。如果以黑色為背景，白色為圖形，則是一個(gè)花瓶；如果以黑色為圖形，白色為背景，則是兩個(gè)人的側(cè)臉。它也反映了圖形和背景對(duì)一幅圖的影響。
二、格式塔原理分析
使用不同數(shù)量的空格來合并或分離元素是傳達(dá)有意義的分組的關(guān)鍵。例如，在Ant Design的標(biāo)題區(qū)域中，“ 搜索”功能與站點(diǎn)的主要導(dǎo)航位于同一行。但是，主導(dǎo)航和搜索之間的多余空格表示它們屬于不同的組，因此具有獨(dú)特的功能。對(duì)于使“ 搜索”功能在主菜單的其余部分中脫穎而出，此空格至關(guān)重要。
但是，在較小的屏幕上，無法保持此間距。為了避免將這些區(qū)域視為一個(gè)整體，頁(yè)面收縮寬度的時(shí)候，搜索后的文字隱藏了。
應(yīng)具有固定或鎖頭標(biāo)題的網(wǎng)站特別可以從使用獨(dú)特的背景顏色或清晰的邊框中受益，從而有效地將標(biāo)題與下面滾動(dòng)的頁(yè)面內(nèi)容區(qū)分開。此外，大頁(yè)腳的單一統(tǒng)一背景色 可有效地表示該區(qū)域中的所有鏈接都屬于一個(gè)組。
創(chuàng)建清晰的邊界是一種強(qiáng)大的視覺提示，可以壓倒其他分組原則，例如接近性或相似性。因此，當(dāng)需要包含幾種不同類型的UI元素或無法調(diào)整對(duì)象之間的空白量時(shí)，它是一種強(qiáng)大的工具。我們做頁(yè)面時(shí)如果需要把兩個(gè)元素放成一組與其他元素區(qū)分，那么我們可以用線框畫出邊界來達(dá)到目的。
如果其它因素相同，那么相似的物體看起來歸屬于一組。接下來從形狀、顏色、尺寸上來說明相似性原理，這也就是我們平時(shí)做視覺設(shè)計(jì)時(shí)的原理，比如我們?cè)O(shè)計(jì)稿宣講時(shí)可能會(huì)被開發(fā)、產(chǎn)品以及測(cè)試同學(xué)問到“為什么用這個(gè)形狀？為什么這里用這個(gè)顏色？為什么這兩個(gè)尺寸不一致？等等，細(xì)細(xì)體會(huì)這個(gè)相似性原理就會(huì)給我們答案，讓我們?cè)诋嬙O(shè)計(jì)稿時(shí)能夠有理有據(jù)。
在上圖中，我們頭腦中自然而然的會(huì)分成“四列”，也就是圓形一列，三角形一列，然后再圓形一列，三角形一列，而不會(huì)看成“三行”
應(yīng)用共享的顏色來表示某些項(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)常使用大小來強(qiáng)調(diào)內(nèi)容或按鈕中最重要的部分。相同的大小表示相同的視覺突出度，并且在所有其他條件相同的情況下，將共享該屬性的所有元素連接在一起。一致地使用大小會(huì)創(chuàng)建視覺層次結(jié)構(gòu)，并使頁(yè)面易于掃描，因?yàn)槿藗兛梢粤⒓纯吹讲⒗斫膺@些類型分組。
例如，在產(chǎn)品列表頁(yè)面中，每個(gè)單獨(dú)的產(chǎn)品列表都以相同的大?。ê拖嗤男螤睿╋@示。這種一致的視覺樣式告訴我們?cè)搮^(qū)域中的所有物品都是產(chǎn)品。共享大小將其與其他不同的UI元素分開。當(dāng)某項(xiàng)商品在此列表中以不同的大小或形狀出現(xiàn)時(shí)，就會(huì)突出顯示為不屬于產(chǎn)品分組。下面這個(gè)產(chǎn)品集合的促銷以單個(gè)產(chǎn)品列表大小的兩倍顯示。
下面是我最開始嘗試的招聘系統(tǒng)首頁(yè)的改版：
根據(jù)上面的相似性原理和接近性原理就可以很容易看出來，這個(gè)頁(yè)面結(jié)構(gòu)和邏輯不清晰：
1.待處理和招聘日程兩個(gè)模塊之間的區(qū)分不夠清晰：因?yàn)檫@兩個(gè)模塊右側(cè)應(yīng)用了同樣的形狀和顏色的按鈕（相似性原理），讓用戶在心理上產(chǎn)生聯(lián)想，同時(shí)這兩個(gè)模塊之間只靠間距來區(qū)分，區(qū)分的太弱了（接近性原理）
2.招聘日程頭部日期與下面的面試安排卡片聯(lián)系太弱：因?yàn)槊嬖嚳ㄆ昧朔浅?qiáng)的邊界區(qū)分的線條（接近性原理-構(gòu)建清晰的結(jié)構(gòu)）確實(shí)在面試模塊之間構(gòu)建了清晰的結(jié)構(gòu)，與此同時(shí)卡片與頭部的日期之間看起來沒有什么關(guān)聯(lián)。
3.首頁(yè)的選中效果太弱，分析這個(gè)頁(yè)面的層級(jí)，左側(cè)首頁(yè)選中才應(yīng)該是最重的，能讓用戶第一眼就知道在系統(tǒng)中的位置，很顯然目前來看很容易忽視首頁(yè)這個(gè)位置，關(guān)注點(diǎn)被吸引到了快捷入口。這并不是我們想要傳達(dá)給用戶的。
根據(jù)格式塔原理中的相似性原理和接近性原理，對(duì)頁(yè)面的結(jié)構(gòu)進(jìn)行了調(diào)整，就看起來清晰多了。
所以，我們?cè)谥谱魍暝O(shè)計(jì)稿后，可以應(yīng)用格式塔原理，分析下最終呈現(xiàn)給用戶的結(jié)構(gòu)和邏輯是否清晰。而這也是做視覺的理由和底氣。
視覺傾向于感知連續(xù)的形式而不是離散的碎片。
連續(xù)理解起來是很簡(jiǎn)單的，但連續(xù)卻解決了非常復(fù)雜的問題。通過找到非常微小的共性將兩個(gè)不同的環(huán)連接成一個(gè)整體。在引導(dǎo)頁(yè)中經(jīng)常會(huì)用到這個(gè)。
視覺系統(tǒng)自動(dòng)嘗試將敞開的圖形關(guān)閉起來，從而將其感知為完整的物體而不是分散的碎片。
閉合可以實(shí)現(xiàn)統(tǒng)一整體，這不難理解。但是有一個(gè)非常有趣的現(xiàn)象值得我們?nèi)ビ^察和思考，就是不閉合時(shí)候也會(huì)實(shí)現(xiàn)統(tǒng)一的整體，更確切的說，這種現(xiàn)象是一種不完全的關(guān)閉。這些圖形與設(shè)計(jì)給人以簡(jiǎn)單，輕松、自由的感覺。所以，完全的閉合是沒有必要的。最著名的應(yīng)用便是蘋果公司的logo，咬掉的缺口喚起人們的好奇、疑問，給人巨大想象空間。
我們傾向于分解復(fù)雜的場(chǎng)景來降低復(fù)雜度。
我們的大腦將視覺區(qū)域分為主體和背景。主體包括一個(gè)場(chǎng)景中占據(jù)我們主要注意力的所有元素，其余則是背景。這個(gè)原理經(jīng)常會(huì)在海報(bào)設(shè)計(jì)中應(yīng)用，這也是為什么我們做海報(bào)，做平面時(shí)，一定要制作好背景，背景的氛圍很重要。
提到輪播首先可能想到的是廣告，我們經(jīng)常在移動(dòng)端首頁(yè)或網(wǎng)站首頁(yè)會(huì)看到各式各樣的輪播banner，不管在移動(dòng)端還是網(wǎng)頁(yè)上通常點(diǎn)擊數(shù)據(jù)都是非常差的，本篇文章帶你深入了解banner輪播。
如果需要設(shè)計(jì)一個(gè)輪播，我們應(yīng)該考慮哪些因素？如何讓輪播更具有價(jià)值？如何讓輪播的體驗(yàn)更好？如何避免輪播常見的問題。
本篇文章通過以下幾點(diǎn)探索輪播的特性，預(yù)計(jì)閱讀20分鐘
1、用戶真的使用輪播嗎
2、輪播的輪換形式
3、輪播的進(jìn)度展示
4、輪播定位
5、輪播的切換
6、對(duì)輪播進(jìn)行分類
7、使用縮略圖進(jìn)行預(yù)知
8、輪播異形化
9、輪播時(shí)間
10、總結(jié)
用戶是否對(duì)輪播有感知，這個(gè)則需要根據(jù)不同的場(chǎng)景進(jìn)行判斷，包括每個(gè)產(chǎn)品中的每個(gè)輪播對(duì)用戶用戶的定位也不相同，常見的應(yīng)用場(chǎng)景品牌曝光、活動(dòng)營(yíng)銷、產(chǎn)品展示，每個(gè)場(chǎng)景下相關(guān)的數(shù)據(jù)也不相同。
促銷輪播banner
品牌推廣輪播banner
產(chǎn)品介紹輪播banner
同時(shí)還有個(gè)關(guān)鍵因素，輪播的占比，這里以pc端為例若是產(chǎn)品是以品牌效應(yīng)吸引用戶的，大多輪播是以大的屏幕占比為主通常會(huì)占首屏的50%，如果是以營(yíng)銷、內(nèi)容為主的產(chǎn)品，輪播通常以16:9、7:4的常規(guī)比例進(jìn)行展示。
用戶在使用產(chǎn)品時(shí)會(huì)默認(rèn)忽略輪播區(qū)域，一般輪播都會(huì)有自動(dòng)輪換機(jī)制，一定時(shí)間后自動(dòng)輪放下一張banner，那么每當(dāng)頁(yè)面上進(jìn)行輪播時(shí)便會(huì)吸引用戶進(jìn)行關(guān)注，效果上會(huì)有一定的提升，所以在輪播中第二張第三張的效果往往會(huì)比第一張輪播的效果更有效一些。
還有一種用戶比較喜歡關(guān)注輪播過去的banner以此來滿足好奇心。
如果banner是作為內(nèi)容傳播希望用戶通過banner了解內(nèi)容，那么則要避免放在最后一位置，對(duì)于用戶而言最后一張輪播路徑過于長(zhǎng)，并且用戶很少會(huì)手動(dòng)滑動(dòng)banner。
國(guó)外一家公司在針對(duì)輪播中進(jìn)行了相關(guān)的研究測(cè)試，隨著頁(yè)數(shù)的增加用戶的點(diǎn)擊逐步下降。
那么如果想讓產(chǎn)品中的輪播更具有效果，則需要根據(jù)不同的場(chǎng)景設(shè)定策略達(dá)到目的。
不管在移動(dòng)端還是手機(jī)端，輪播都有各種交互形式和尺寸，以pc為例在交互上會(huì)多樣化一些，常見的幾種則是通過滾輪滑動(dòng)、通過點(diǎn)擊切換兩種。
如下圖某藝術(shù)網(wǎng)站，它則是通過鼠標(biāo)滾輪進(jìn)行切換輪播banner，并且banner的占比也是鋪滿首屏，這種輪播形式適合一些品牌、產(chǎn)品宣傳等相關(guān)的網(wǎng)站以此來突出產(chǎn)品的亮點(diǎn)，同時(shí)也符合用戶目標(biāo)。
在看下面這個(gè)醫(yī)美網(wǎng)站它的切換方式則是通過鼠標(biāo)點(diǎn)擊進(jìn)行切換，并且占比也是鋪滿首屏，在醫(yī)美領(lǐng)域用戶更關(guān)注美感，而輪播形態(tài)也是符合用戶的心理預(yù)期更加沉浸美觀。
而在移動(dòng)端輪播的形式就比較統(tǒng)一，大多都是自動(dòng)播放+手指滑動(dòng)進(jìn)行切換。
在網(wǎng)頁(yè)中輪播都會(huì)有當(dāng)前的定位點(diǎn)，許多用戶的習(xí)慣是點(diǎn)擊進(jìn)度條進(jìn)行切換banner這樣能夠更快的達(dá)到目標(biāo)，不用一張一張切換，但是在有些產(chǎn)品中會(huì)忽略這一點(diǎn)，設(shè)計(jì)中會(huì)做的非常小導(dǎo)致用戶在點(diǎn)擊上可用性不太友好，如下圖中的banenr進(jìn)度點(diǎn)設(shè)計(jì)上過于小導(dǎo)致點(diǎn)擊上有些阻礙。
如以下網(wǎng)站去除進(jìn)度定位的方式，通過縮略圖預(yù)覽來告知用戶下一個(gè)banner的內(nèi)容，空白區(qū)域也可以添加縮略圖引導(dǎo)介紹等關(guān)鍵信息，幫助用戶提前預(yù)知在體驗(yàn)上相對(duì)較好。
以下國(guó)外某網(wǎng)站在進(jìn)度定位的設(shè)計(jì)上采用了標(biāo)簽文案方式進(jìn)行設(shè)計(jì)，能夠幫助用戶更加全局的了解banner內(nèi)容
定位主要是用來指示當(dāng)前輪播的進(jìn)度，像上圖中講的便于用戶更加全局的觀看banner的張數(shù)和當(dāng)前進(jìn)度。
以下網(wǎng)站的設(shè)計(jì)中則把定位與進(jìn)度相結(jié)合，進(jìn)度條展示該banner預(yù)計(jì)多久會(huì)切換下一張，對(duì)于自動(dòng)切換的產(chǎn)品輪播這個(gè)更直觀的進(jìn)度展示體驗(yàn)上相對(duì)較好。
以下是某個(gè)國(guó)外網(wǎng)站，不管是pc還是移動(dòng)端都在輪播底部添加了水平條，告知用戶當(dāng)前位置
隨著市場(chǎng)上產(chǎn)品同質(zhì)化嚴(yán)重，產(chǎn)品的競(jìng)爭(zhēng)力也更依賴體驗(yàn)，在下圖中的數(shù)據(jù)可視化的網(wǎng)站上，在進(jìn)度條上就利用了產(chǎn)品的特性以餅狀圖的形式進(jìn)行展示。
在剛才上面舉的例子中很多優(yōu)秀的網(wǎng)站在設(shè)計(jì)上都很有創(chuàng)新性，但是需要注意一個(gè)點(diǎn)，在輪播中不只有自動(dòng)播放，還需要考慮用戶手動(dòng)切換，因?yàn)樵趯?shí)際用戶瀏覽中可能會(huì)對(duì)產(chǎn)品的播放時(shí)間達(dá)不到預(yù)期，此時(shí)則會(huì)使用手動(dòng)切換，除去可點(diǎn)擊的進(jìn)度點(diǎn)，還需要上一張和下一張的入口切換。
在此基礎(chǔ)上需要注意，在處于最后一張banner時(shí)，下一張切換還能不能點(diǎn)擊，第一張時(shí)上一張切換還能不能切換，這個(gè)取決于產(chǎn)品特性和輪播張數(shù)，如果輪播張數(shù)過小的話則需要進(jìn)行循環(huán)播放，如果過多的頁(yè)數(shù)則第一步和最后一步不可點(diǎn)擊。
上一張和下一張的距離遠(yuǎn)近取決于banner的大小，如果輪播banner占比較大時(shí)則需要考慮用戶的操作時(shí)長(zhǎng)，距離越短時(shí)間越快，為了避免用戶操作失誤在相對(duì)較近的切換按鈕則需要在視覺上做的比較突出，便于用戶尋找。
如果banner占比在首屏中占比較少的情況下則需要讓切換按鈕的間距拉大，保持視覺平衡，因?yàn)樾^(qū)域banner用戶能夠更加全局的觀看，在使用上不會(huì)猶豫。
反觀移動(dòng)端在輪播中除了展示banner進(jìn)度外很少展示切換按鈕，移動(dòng)端更加依賴手勢(shì)交互。
當(dāng)輪播banner過多時(shí)利用標(biāo)簽進(jìn)行分類，用戶通過點(diǎn)擊標(biāo)簽進(jìn)行查看相關(guān)的輪播組合。
此方式更適合一些電商平臺(tái)、新聞網(wǎng)站這種內(nèi)容過多的產(chǎn)品
如下圖國(guó)外社交媒體網(wǎng)站則使用了標(biāo)簽進(jìn)行分類，此處提一句輪播不僅限于首屏banner。他的用處可落地在各個(gè)場(chǎng)景。
在banner首屏中，顯示的內(nèi)容越多，越能激發(fā)用戶進(jìn)行點(diǎn)擊，像上面講過的農(nóng)業(yè)產(chǎn)品網(wǎng)站就使用下一張預(yù)覽圖的形式進(jìn)行展示，當(dāng)然不僅局限于這種形式，如下圖中的餐飲網(wǎng)站把所有的輪播banner展示給用戶觀看。
相對(duì)于縮放圖，圖標(biāo)展示效果上也較好，空間占用更少，使用這種方式需要謹(jǐn)慎，對(duì)圖標(biāo)的識(shí)別性要求較高，我印象中能夠使用的這種方法的網(wǎng)站是蘋果官網(wǎng)，讓產(chǎn)品抽象化展示。
在移動(dòng)端也存在這種設(shè)計(jì)手法，但是基于分辨率原因移動(dòng)端的縮略圖展示過少，最常見的如下圖中的馬蜂窩和企鵝電競(jìng)。
輪播最大的缺陷則是像剛開始講的用戶會(huì)默認(rèn)為廣告，對(duì)此可以使用個(gè)性化設(shè)計(jì)突破用戶心理障礙，使輪播banner更具備親和力。
如下圖中的數(shù)碼科技網(wǎng)站，利用產(chǎn)品與背景的結(jié)合營(yíng)造出一種功能性的展示。
再例如下圖中蘋果官網(wǎng)入口，結(jié)合百度的定制化功能在大搜中進(jìn)行個(gè)性化處理，把常規(guī)的banner輪播以功能卡片形式進(jìn)行展示，同時(shí)卡片承載產(chǎn)品動(dòng)畫引導(dǎo)用戶進(jìn)行點(diǎn)擊。
蘋果官網(wǎng)進(jìn)入后隨意點(diǎn)擊產(chǎn)品介紹頁(yè)后會(huì)發(fā)現(xiàn)，蘋果把輪播結(jié)合鼠標(biāo)滾輪營(yíng)造沉浸式觀看，每個(gè)屏效內(nèi)都展示產(chǎn)品一個(gè)功能特點(diǎn)，打破傳統(tǒng)banner的展現(xiàn)形式。
自動(dòng)播放的輪播會(huì)根據(jù)用戶的耐心和用戶的訴求進(jìn)行調(diào)整優(yōu)先級(jí)，如我們平常使用產(chǎn)品時(shí)會(huì)忽略banner廣告，我們會(huì)更加關(guān)注移動(dòng)中的東西，特別是在移動(dòng)端上通常是banner進(jìn)行輪播時(shí)才會(huì)關(guān)注。
谷歌設(shè)計(jì)團(tuán)隊(duì)曾對(duì)banner輪播的時(shí)間進(jìn)行測(cè)試，測(cè)試結(jié)果得出5s-7s的輪播時(shí)間最佳，在這個(gè)時(shí)間內(nèi)用戶有足夠的時(shí)間對(duì)輪播banner上的產(chǎn)品內(nèi)容進(jìn)行了解。
如下圖谷歌商店的輪播時(shí)間設(shè)定在6s。
同時(shí)還需要注意，在自動(dòng)播放的過程中如果用戶鼠標(biāo)hover上去后，則需要判定播放暫定，避免用戶錯(cuò)過感興趣的內(nèi)容。
本文從輪播的樣式、特性、用戶對(duì)輪播的認(rèn)知等多方面的介紹，在實(shí)際產(chǎn)品中輪播有很多可用性上的問題存在，我們?cè)谠O(shè)計(jì)中則需要根據(jù)自己產(chǎn)品的特性、用戶群體特點(diǎn)等多維度去思考適合什么樣的輪播形式。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.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ù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.yvirxh.cn
