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