一、馬蜂窩 — 人性化設計識別文章地點
二、微博 — 社區游戲化設計提升互動率
三、QQ — 通過手勢消除未讀消息
四、最右 — 情感化設計保護用戶隱私
五、抖音 — 深夜提醒貼心的功能
六、網易音樂 — 把分享游戲化
七、QQ音樂 — 歌詞沉浸式體驗
八、盯潮 — 趣味性banner輪播，增加用戶點擊
在馬蜂窩任意文章中，如果出現地區則可以通過當前頁面對地區進行提取
減少用戶操作路徑，降低產品使用成本
日常在各個平臺瀏覽文章時大家都會遇到在文章內會出現一些如地名、人名、物品等相關名詞，此時如果對名詞感興趣則需要切換場景去進行搜索，而馬蜂窩在這方面深入洞察到用戶痛點，基于旅游社交產品背景下在添加地點直達（包含多個地點）功能，解決了對景點感興趣的用戶使用體驗。
根據馬蜂窩這個人性化功能，是否可以在不同的產品內進行應用，如在一些游戲社區中所提到的虛擬裝備、道具等物品添加彈窗簡要說明，幫助新手玩家快速理解玩法、功用等
在微博動態詳情中進行長按點贊觸發動畫
通過游戲化點贊玩法激勵用戶進行互動，提升互動率
打破傳統點贊動畫，微博設計動效采用大膽創新的全屏動畫并搭配上散發的微表情，在長按與連點兩種手勢下動效規律不同，消除用戶枯燥感，微博作為國內最大社交平臺，頁面展示上已經形成用戶深刻認知，在不影響基本風格上進行彩蛋設計有效的提成用戶互動率
在qq聊天頁面中對底部消息氣泡進行拖動，消除所有未讀消息
提升用戶操作效率和使用體驗
qq作為社交工具，每位用戶都會添加大量人、群以及關注各種推送，在這種場景下用戶每條消息都去操作需要花費大量時間，QQ把傳統的消息已讀以一種簡單的交互手勢作為代替，相對全部已讀在操作上更佳便捷
通過qq的這個交互細節，在其他產品場景中同樣適用，如一些音樂、電臺相關的產品在離開播放頁面后播放狀態會懸浮在頁面之上，如果關閉的話則需要點擊暫?；蛘哌M入詳情后關閉，也可以考慮使用拖動手勢進行關閉
在最右登錄頁面輸入密碼時ip形象會出現捂眼睛動作
強化用戶隱私和心理信任感
日常在使用一些敏感性操作時我們都會注重隱私，如一些表單的填寫、密碼輸入等相關操作，最右在登錄頁面使用到了ip形象的動作去向用戶傳遞心理上的暗示，這種手法很好的把品牌曝光與體驗相結合
長時間刷抖音時會系統會提示，在深夜使用時會支持設置提醒時間
防止用戶疲勞使用產品，定時緩解注意力
在使用抖音時大家可能會經常深陷其中無法自拔，往往忽略了時間影響身體健康，提醒機制則在深夜不同時間段進行間接提示，雖然在用戶體驗中不提倡打擾用戶，但在短視頻這個場景下如果過渡沉浸便會造成反向影響
在網易音樂對某首音樂進行分享時可以對音樂進行個性化定制，對歌曲進行編輯添加文字、圖片、語音等以視頻方式呈現
把分享以一種偏游戲化的形式呈現，提升用戶分享率
傳統分享基本是直接讓用戶分享到第三方平臺，而網易音樂這個設計把分享場景進行多元化處理，以定制音樂罐子為切入點，用戶自由編輯個性化處理裝進罐子進行分享，是一種視頻剪輯融合音樂的一種新玩法，破圈傳統枯燥的分享場景，提升用戶分享率
在音樂歌詞頁面中可以支持設置歌詞主題
新穎的呈現手段，強化用戶沉浸式聽歌
傳統的音樂產品在詳情頁面展示了一屏歌曲歌詞，面對大量的文字用戶在尋找某段歌詞時效率不是很高，對大量的字段也極為枯燥，而qq音樂使用了創新的展現形式，把手機主題概念融入歌詞中達到新的視覺體驗，根據不同的主題對應的動畫也不同，大大的提高了用戶的視聽體驗
在盯潮首頁banner處對其進行拖動甩出
通過交互玩法提升用戶對banner的點擊
banner在頁面通常點擊率較低，用戶會默認為廣告，在盯潮內滑動banner時會發現banner可以進行拖動，并且松開時會自由掉多，把傳統的banner切換做出了可玩性更高的效果，同時這個設計手段也能吸引用戶注意力引導用戶對banner進行點擊
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
認知負荷是完成一項任務所需的精神努力總量。您可以將其視為用戶與產品交互所需的處理能力。如果需要處理的信息超出了用戶的處理能力，那么認知負荷就太高了。
造成用戶認知負荷的的原因大多都是，產品在交互和視覺上過于復雜，設計的統一性不夠，導致用戶在使用時不斷進行思考無法形成習慣
例如移動端中的空狀態，目的是為了引導用戶完成任務，在設計時無論是文案展示與視覺表現都應簡單明了、層次分明、視覺統一
用戶獲得的初始信息會影響后續的判斷，用戶對某件事做出判斷時，會不自覺的將開始看到的信息作為衡量標準。
在日常生活中錨點效應非常常見，例如平常不帶帽子，偶爾帶帽子出門的你，走在大街上會發現挺多人都有帶帽子，因為心理活動是把帶帽子這件事作為起始衡量，而你刻意的在尋找與帽子產生共鳴的事
在產品設計中最典型的就是會員體系，例如某視頻平臺的會員價格默認選中的那一欄會比其他的價格低，那么用戶在使用時心理會默認這是會員的價格，相對應其他更高的價格只是作為衡量這個最低價格而存在
又稱對比效應，指人們對兩個不相上下的選項進行選擇時,因為第三個新選項(誘餌)的加入,會使某個舊選項顯得更有吸引力，通過對比誘導人購買商家想讓他購買的商品。
有一位著名的行為經濟學家他叫丹·艾瑞里教授，他曾經做過一本《經濟學人》雜志的定價策略，這里不細講感興趣的可以搜一下。誘餌效應運用最多的是在超市場景，我們經?？吹匠械呢浖苌蠒锌雌饋砗軐嵒莸奈锲吩?，如一袋泡面可能是5元，而旁邊還有3包泡面一起出售可能也就12元，然后開心的拿走了，這就是誘餌效應，那一袋5元的就是誘餌，商家的目的就是為了讓你買走12元的
而在線上產品策略中運用最多的則是電商場景，如下圖中的圖書商品，單價610元，定價980元，三件單價488元，這里的單價和定價都是誘餌，目的是為了讓用戶同時購買三件商品，而用戶內心是欣然接受因為更劃算
在檢查所有可能的結果時，我們傾向于關注一些看起來合理且熟悉的事物，從而忽略了其他結果。
13年9月twitter公司宣布IPO，當時11月份才開始交易，但是在這兩個月時間里有一家名為twweeter的公司三天內漲了13倍，只是在名字上與推特公司極為相似，但實際業務毫無關系，機構就是利用用戶的注意偏差讓不了解實際情況的投資者只看到相關性，而另一面的不相關的結果用戶自然的忽視掉
在產品設計的客服助手中，就屬于注意偏差，我們習慣的認為向客服回復人工等關鍵字時，會自動切換人工客服，而產品則會設置一些虛擬的智能客服來節省成本，而用戶在這個過程中則忽略了細節，誤以為智能客服是人工客服
前蘇聯前蘇聯心理學家菜斯托夫提出特殊事物才易被人牢記。也就是說，有個性的人、與眾不同設計得商品、不尋常的事情，都會讓人留下更深的印象。
生活中我們很難記住某個點或某件事，但是當這件事足夠突出擁有獨特的個性我們便會深深印在腦海里，比如一串字符ezol4tpmb，我們最容易記住的是4，因為他是唯一的數字，在比如說讓你去記憶國內某些城市的特點，如西安、開封、浙江我們想到的就是秦皇陵、包青天、西湖等著名具有特征的地點，因為這些事物比較特殊更容易被記住
在品牌設計中菜斯托夫效應運用的比較廣泛，如何通過視覺的表現讓用戶對產品更加的印象深刻，對此就衍生出產品IP、品牌符號這種具有特殊意義的標識便于加強產品印象
任意一點移動到目標點的時間與該目標點的距離和大小有關，距離越遠時間越長，目標越大時間越短，公式：
T = a + b log2(D/W+1)
在交互設計中經常用到此定律，無論是正向還是逆向此定律都能夠很好的運用到交互中，如mac系統上的關閉按鈕，始終在左上角并且很小，我們的鼠標在右側，移動到左側上角時間會隨之變長，因此這一交互結構就避免了用戶誤操作關閉軟件
再例如移動端中會把重要的按鈕操作放置在屏幕右下或者居下，因為大多數人是右手使用手機，因此在使用時右手拇指距離點擊區域會更近
幸存者偏差是指把一些事的不同角度的人員篩選出來，篩選出一部分人進行采訪從而制造輿論，觀察者只能看到事物的一面，而另一面則被忽略，也被稱為以偏概全
某次春節記者采訪到一些在火車上的群眾，聊一些購票的過程以及買到票的心理感受，最后向公眾公布出今年回家的票大家都買到了，但這個過程中卻忽略了那些不在車上或者沒買到票的人們，因此就以偏概全的傳輸單方面信息，這些被采訪到的人們就是幸存者
在做產品時經常會聽到用戶畫像這個詞，用戶畫像就是利用幸存者偏差而把廣大的用戶數據通過典例呈現，當然這個幸存者的樣本必須是壓倒性的龐大，否則就掉入幸存者偏差的陷阱
彼此靠近或接近的對象往往會組合在一起，相近的元素可以建立關系，人們會不自然的把相近的元素看作一個整體。
在UI設計中，經常會用到鄰近法則進行設計，如一些組件、卡片的建立，由不同的元素組成變成一個整體，其次鄰近法則能夠有效的用戶層級的劃分，如下圖中的一些卡片、icon進行規律的排布最后組成一個整體，與上下模塊的層級有效的區分
特斯勒定律又稱復雜性守恒定律，他指出對于任何系統都存在一定的復雜度并且是無法避免的，問題是誰來處理它。
在任何產品設計中無論是功能還是流程都存在一定的復雜度，依據特斯勒定律有些復雜度是無法避免的，那么需要我們在設計中去解決這些問題，保證在用戶的角度來看它是合理的簡單的
像我們常見的話題功能，輸入#自動引導出關鍵詞供用戶填寫省去用戶輸入時間，再例如b站的一鍵三連，長按點贊的同時會把收藏、打賞功能一并完成；結構層面也會用到此定律如產品中的設置頁面，按照不同的維度進行區分如系統維度、反饋維度、功能維度幫助用戶更快的完成操作
它是由意大利經濟學家帕累托提出，它指出對于許多事件，大約80%的影響來自20%的原因
在設計中我們會發現一個產品頁面有幾十上百個，對于用戶而言能夠提供價值的可能也就那么幾個功能頁面，這幾個頁面可能占總產品的20%左右，那么我們在做優化的時候則需要去考慮如果把20%做好把它的價值放大
再往細了說，例如打車軟件在這個頁面中能夠為用戶提供核心價值的區域則是地圖區域和選擇目的地區域，那么在做優化體驗時應當著重關注此區域，而頁面中剩下的區域則受上面20%的影響
社會證明是用戶用來確定行為方式的便捷捷徑，當他們不確定目標時，他們最有可能認為并接受他人的行為是正確的，人數越多，行動似乎越合理。
最近抖音在評論區新增了一個踩一下與點贊進行互補，但是奇怪的是我們進行踩一下時并不會展示具體數量，試想一下當點贊的數量大于踩一下的時候，我們有時就會被影響認為這條評論值得點贊
再例如購物中的評論排序，像京東把好評優先展示在前面，當好評的數量大于其他維度時就會影響用戶判斷，用戶會把數量多的好評當作參考依據認定這個商品符合自己的需求
指用戶知道的內容與他們想要或需要知道的內容之間的空間，這個空間叫做差距，差距會導致痛苦，要消除痛苦，用戶需要填補知識差距。
例如在做產品設計中都會涉及到登錄注冊流程，那么對于有些產品則需要在登錄注冊階段大量收集用戶信息完成更好的推薦策略，但對于用戶而言用戶的認知是固有的流程，如填完手機號就收到驗證碼，最后完成注冊進入首頁，如果說中間的過程需要收集用戶信息，則需要對應的解決方案來彌補用戶的心理差距
即可App在收集用戶信息的階段使用了偏趣味性的一些設計表現，在用戶的這個空間差里面來緩解用戶的情緒，激起用戶填寫欲望
心智模型是對某人關于事物在現實世界中如何運作的思考過程的解釋，它是對周圍世界的表示，可能準確或不準確，用戶認為他們對您的產品的了解會改變他們使用產品的方式。
心智模型其實就是我們對未來發展的預測，內心對要發生的事情進行預判，然后采取行動，例如我們要購物想到的就是淘寶、京東，想到吃飯可能就是美團、餓了么，這些產品就打入了用戶的心智。往細了說心智模型是一個廣泛的概念，它還包括行為模型、實現模型、表現模型
像我們常用的聊天軟件，在聊天過程中撤回消息，就會有個重新編輯功能，這就是滿足用戶的心智模型，預判用戶的操作例如微信、釘釘、飛書
擬態是在頁面中模仿現實世界物品，通過它的外觀和交互模仿現實，擬物化適合用來讓用戶適應新的頁面和技術形態。
我們在做頁面時都會涉及到圖標的繪制，那么那些具有業務屬性的圖標則需要通過擬物的方式進行呈現，對于用戶能夠降低理解成本，如經典的紅包、自如的金剛區等
與群體相比，用戶對個人的關注不成比例，與大型抽象群體相比，人們更愿意同情一個單一的、可識別的人。
這個如果用逆向思維來想的話，類似于我們說的“對抗性人格”在大多數人都對一件事或事物看法一致時，出現一個不一樣的聲音，試想一下我們在刷短視頻時評論區總有那么些人與大多數人的看法不太一致，這就是奇點效應
在設計中體現最多的是等級體系和勛章體系，一方面為用戶的攀比心理，另一方面則是奇點效應，這類用戶的想法就是為什么要一樣，為什么不可以獨樹一幟。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
B端產品是很容易交互設計不一致的，隨著多平臺陸續融合為一個平臺，暴露的問題就越發明顯，因此改變現狀便迫在眉睫，此時保證交互設計的一致性就是我們重點要考慮的問題。
目前有很多較火的組件平臺，例如：Ant Design 、Element等。由于公司內部一些原因，前端開發會直接使用組件庫，沒有規范的約束，隨意使用組件也是導致平臺體驗不佳的一點。
由于產品上線后，售后組、業務組經常會反映一些關于體驗相關問題，有時只是單一模塊進行迭代、改版、完善而遺漏了與它相關聯的其他模塊，便會影響全局感觀。
此時會有人產生疑問，明明平臺現存很多樣式問題，功能交互不統一，為什么首要不是先快速建立設計規范文檔？
因為在沒有設計一定量的設計稿之前，所有規范都是華麗的泡泡！前期在設計階段會遇到很多具體場景化的問題，根據不同的場景會不停的修改，還有多方評審來達到最優方案。此時的設計稿處在極不穩定的時期，自然而然也沒什么規范文檔可言，因此現階段要做的工作是找到重點模塊進行設計稿基礎搭建。
當然設計師在做設計時一定要有全鏈路的思考和拆解問題的能力，不能局限于單個需求，鉆入牛角尖。畢竟B端產品體量大，功能模塊多，系統耦合度高，交互設計文檔又是一個全局概念，這最基礎也是最重要的第一步是非?？简炘O計師的。
重點模塊功能搭建好設計稿以后，可以先讓產品穩定發展一段時間。當團隊對產品初期有了一定熟悉程度，此時就很適合創建自己的交互設計規范了。
把控視覺統一，減少重復出圖，提高效率。在公司有多個設計師協同工作時，可保證體驗、設計、交互等等的統一性。
提高設計稿的還原度，根據規范中組件使用情況建立公共組件庫，提高復用率，減少返工，極大的提高開發效率。
在畫原型圖遵循交互設計規范以及排版格式會減少開發在看原型圖和設計稿之間產生歧義，當然產品原型圖不需要精致，只需按照規定規范中的交互制定即可。
通用組件通過測試后，以后將不在花時間在測試組件交互上，避免了重復工作。
B端最重要的設計原則就是效率優先，保證效率的前提是組件一致，交互及時反饋，以及合理的使用場景。
因此設計交互規范不僅僅只是顏色、文字以及一個個組件的展示，這樣的文檔對產品、測試毫無意義。規范是由基礎容器盒子+組件庫+交互狀態+正確使用場景組成，在規范中每一項都應標注清楚。
思路：將原子【文字、顏色、控制器等】組合成分子【狀態提示、數據展示、數據錄入等】最終組合成元素【不同的容器頁面、彈窗、抽屜、卡片等】一個一個的元素互相搭配，組成完整的基礎平臺。
在設計過程中，設計師需要建立適配的概念，根據具體情況進行適配，以及考慮哪些區塊需要動態布局。中臺系統的用戶的主流分辨率為 1920*1080、1440*900 和 1366*768，一般常用畫板1440進行區塊動態適配。
柵格寬度：建議柵格系統的網格大小選定8作為柵格系統的原子單位，目前主流設計屏幕分辨率在水平以及垂直方向都可以被8整除，使用8作為最小原子足夠適配。
水槽寬度：根據業務可自定義水槽的值。比如8、16、24、32、40等，經過實踐經驗，正常情況下，水槽寬度為24時，視覺效果最佳。
非常規設計時：不需要死板的堅持傳統柵格系統，根據設計場景可自行修訂。
頂部導航欄高度計算范圍公式：48+8n。
側邊欄寬度計算范圍公式：200+8n。
界面最大可達顯示器最大值，側邊導航為定寬，右側內容隨柵格變化而變化。
為保持視覺、交互一致性，統一容器范圍。容器是用來收納原子、分子的，理論上信息不應該超出容器。
以有遮罩基本彈窗為例子進行分析，包括視覺+交互。開發可根據彈窗盒子創建基礎容器組件，像素級也可幫助測試進行校準。產品及設計可根據使用場景規范自身，在制作原型以及設計稿時正確使用組件。
按鈕用于開始一個即時操作。通常分為基礎按鈕（分為主按鈕、次按鈕）、圖標按鈕、文字按鈕、圖標+文字按鈕，在不同場景下使用不同的按鈕達到最佳交互效果。
基礎按鈕應用廣泛，較多人分析這種場景。所以下面主要分享一下圖標+文字按鈕的基礎規范以及使用場景。
錄入類由輸入框、選擇器、單選框、多選框等多種控件組成，基礎交互包括（默認、懸浮、點擊、失效四種狀態）
不同的控件相互組合成信息頁、表單頁、問卷頁等。
基礎輸入框包括（標題+輸入框）根據不同場景有多種情況，下面僅列出交互場景，具體視覺標注不再展示。
平臺中反饋機制是非常重要的設計，能及時提醒用戶當前操作是否成功，或是失敗在哪里，因此不同的場景需要特定的反饋提示。
反饋提示包括（警告提示、全局提示、通知提示、氣泡確認框提示、以及tips提示）
下面僅列出交互場景，具體視覺標注不再展示。
文字、顏色、間距、圓角相當于元素中的原子，完整的界面正是由這些原子一點一點組合而成，承載著最基礎但也是最重要的一部分，因此規范也要更詳細。
產出文檔是否能真正落地需要來自多方評審包括產品、技術、測試等，盡量從多角度、全方位來進行審核。
投入開發前，多方評審，各抒己見達到最優方案。
投入開發后，若要優化修改定稿部分，需再次拉通會議討論，結合當前實際情況將歷史問題一次性解決到位，避免遺漏再次造成不統一。
由于篇幅原因，規范只是展開個別案例進行分析。
最終需要落地實現才是最重要的一步，所以我們還有很長的路要走。也要不斷進行思考與總結，如何讓一致性設計規范更符合設計原則和業務場景～
原文地址：站酷
作者：食文貘
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
如果你是一位經驗豐富的設計師，你應該會同意這個觀點：從他人的作品中獲取到靈感并不算偷竊他人的作品。這是屬于在對設計進行深入研究呀，這也屬于一種設計模式呀，而且還遵守設計規范呢。所以，當然要以用戶們所熟悉的那些模式來創造出可用性界面。
不過，有的設計師則會認為，過于遵守設計規范，而且，經常性的從他人的作品中獲取靈感的話，自己本身的創造能力就會下降，這就導致了這樣一個結果——一天下來，你的所有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會以某種方式來設計。
自己要多想想，多設計，多研究。
衡量，測試，驗證——如果能夠做得更好，就不要害怕打破設計規范。
作者： 鄭小小莊
轉載請注明：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的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.撰寫方式
作為一個設計師，不管是否在做視覺，我們都需要對文檔有一個美化意識，如果你的文檔非常凌亂，那么在別人眼里就會覺得你是一個比較粗心大意，不夠負責任的人，所以我們盡量在做交互輸出文檔的時候也畫的美觀一些。
目錄
首先在目錄的撰寫時候要進行分類，通常我做的時候會對該需求以頁面父子集關系進行創建，父集為核心頁面，子集為其下的相關子頁面，這樣頁面的流轉和歸屬關系就不會搞錯。
說明
在撰寫規則與說明時可以通過標簽法進行標簽說明的撰寫方式，同樣在視覺上保持美觀，對比與對齊的運用，具體該寫什么東西上面已經說明就不贅述了。除了交互規則以外，高階的交互設計或者產品經理還需要補充業務規則，比如排序、商品抓去規則、權重、算法、活動規則等等這里就不展開說了。
總結
文檔的形式有非常多種，針對不同的公司和產品也需要作出相應的調整，能夠滿足需求和方便協作，目的就達到了，我們并不希望過多的時間花在文檔的撰寫上，而是希望大家在做設計時多思考業務，本次分享就到這里啦～
轉載請注明：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
在某些元素周圍使用多個放置陰影或非常精細的邊框（僅比實際陰影暗一點）可以使這些元素看起來更清晰、更清晰，并幫助你避免那些看起來渾濁的陰影。
你的標題很可能會比正文更大，也比正文更重，所以字母之間的間距有時會看起來更大，
減少一點間距，就可以使你的標題更加清晰
在ui中實現圖標時，保持一致。
確保它們具有相同的視覺風格； 相同的重量，或者填充，或者輪廓。
在創建設計時只使用一種字體是比較好的，這樣做實際上可以幫助你產生統一的設計效果。
使用字重、大小和顏色的組合，你還是可以用一個單獨的字體表達清晰的文字的結構
留白可以讓你的設計具有呼吸感，更加舒適
通過選擇一個基色，然后使用你選擇的顏色的色調和陰影，可以以最簡單的方式為你的設計增加一致性
允許用戶隨時跳過你的移動應用程序登錄序列，并將該跳過鏈接放在拇指容易觸及的位置。
只是一個簡單的調整，可以讓你的用戶有更好的體驗（我常常體驗國內一些APP，關閉按鈕特別遠，特別難按）
確保你的陰影總是來自同一個光源，會素描的同學很好理解，光源關系一致表達空間統一性的基礎
基本的處理方式是，在圖片上增加一個透明漸變蒙版來使得字體看的更加清楚
如果只使用一個字體，盡量選擇有多字重的字體，比如：阿里巴巴普惠體、思源、OPPO
在淺色背景下工作時，文字顏色不要太淺，雖然看起來很舒服，但可見性不較差，不利于閱讀
當涉及到長格式的內容時，某些常規的粗體字體在屏幕上看起來還是有點太重，太呆板了。
建議，選擇像深灰色（即# 4f4f）來降低文本的色調，這樣閱讀起來會更加舒服
通過使用顏色對比、尺寸和標簽，確?！靶袆影粹o”盡可能突出
隨著字號的減小，增加行高可以獲得更好的易讀性。
在設計應用程序內部使用的菜單時，請確保提供最常用的操作（即； 上傳圖像，添加文件等…）最突出的屏幕
只需從你的產品圖像中挑選顏色，然后將你選擇的顏色的各種色調和陰影應用到你的背景、文本、圖標……，就能為你的設計增添大量的視覺趣味
不同x高度的字體需要不同的行高測量來實現文本行之間的正確分隔。
即使你可能有兩種字體大小相同（即； 18px）它們的x高度可能會有很大差異，選擇正確行高是非常有必要的
通過使用字體大小、權重、顏色和布局的組合，你可以輕松突出UI中最重要的元素
在用戶剛剛執行的操作附近添加一條錯誤消息，可以幫助用戶提高正確登入，也可以緩解用戶焦慮（他可以更加清晰那里出錯）
當為移動設備設計時，嘗試創建足夠大的可點擊區域
對于按鈕和僅由文本組成的鏈接來說，點擊區域會很小，所以盡可能使用帶有標簽的圖標。
iOS和Android的最低建議點擊區域
iOS為44 x 44pt
安卓48 x 48dp
長標題都是大寫字母的話，閱讀轉化上比較慢（你明白他是什么意思比較慢）
短標題都是大字母的話，相對來說比較快可以和記憶中的單詞對應上
始終確保淺色文本在淺色圖像背景下清晰可見。
只需在文本后面應用一個低透明的深色背景，就能保持這些元素之間的良好對比度
標題、正文、標題、正文……這樣的排列中如果是間距都是相同的，那么在閱讀上就很難區分標題是屬于上文還是下文的。
正確的做法是，標題距離上文的距離＞標題距離下文的距離，這樣閱讀起來，標題會比較清晰的對應的是下文
當下載速度是一閃而過時，則無需提示
當下載等待時間＞3S時，建議給進度提示
在項目中處理文本時，選擇正確的字體將影響文本的語音類型。 那么大聲、或者溫柔、或者正式，嚴肅，或者有趣。每種字體都有自己獨特的聲音
基于人閱讀情緒，如果閱讀一行很長，一直閱讀下去，會出現你眼前閱讀的內容“不見”的情況
對于單列頁面，45到75個字符被廣泛認為是令人滿意的行長，66個字符的行（包括字母和空格）是最合適的。
當然，字體大小和行高也是決定可讀性的一個因素，但是對于行長，要保持在45到75個字符之間
需要適當，如果裝飾的強了主要表達的，則不可取
按鈕。 通知。 UI中兩個獨立但必不可少的元素。
一定要確保你的用戶能夠快速準確地將他們區分開來
舒服的投影會增加你的設計的質感，和透氣感。太重的投影會顯得你畫面比較臟
高度飽和的顏色（明亮的藍色、紅色、綠色等）在網站上看起來很不錯，但過度使用時，會讓用戶眼睛疲勞，主要是與文本內容一起使用時。
在向設計中添加圖標時，使用用戶熟悉認知的圖標。新的圖標雖有很好看，很有個性，但是會讓用戶疑惑
需要承上表達的元素，排版上接近對應的元素，可以讓用戶心理聯系起來是一體的
與長格式正文文本（需要足夠的行高以提高可讀性）不同，標題通常要短得多，因此可以稍微縮小間距。標題的建議行高通常是文本大小的1到1.3倍
類比色和鄰近色是最和諧的配色方案之一，也是最不會出錯的配色
在處理特定項目時，使用類似于所有小寫字母的文本可以表達更加輕松的意思
但需要注意，在圖像和文本之間使用某種顏色疊加，以獲得更強的對比度
當在淺色背景下設置深色文本時，偶爾可以選擇較輕的字體。
但是…
反之：淺色文本>深色背景。
最好是把字體的重量增加一點，尤其是長文本，原因是，讓用戶避免視覺疲勞，獲得更好的易讀性
正確的字體選擇對于讓你的內容更快的正確傳達更重要
只需稍微增加字母之間的間距，就可以提高字跡的易讀性，并為大寫字母增加一些設計感
確保錯誤提示，解釋了哪里出錯和如何解決
始終讓用戶了解最新情況，即使是普通的表單，讓這些錯誤消息變得有用，不要讓用戶懵逼
使用占位符可以更好的緩解用戶焦慮
在應用可能產生后果的特定操作之前，請詳細地通知用戶。尤其適用于具有不可逆轉后果的行為，例如永久刪除某個內容。讓用戶知道將要發生什么，并要求他們確認
用戶需要采取的基本操作（例如，注冊或登錄）隱藏在下拉列表中，甚至可能找到用戶想要的。
解決：將重要的功能提出來，不要隱藏
原文地址：站酷
作者：木七木七
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的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的到來，我們的很多工作方式都有可能被顛覆，語音交互設計的將會是一片藍海，雖然現在有諸多的桎梏，但這是趨勢，是快速崛起的趨勢。設計師工作你能想象未來沒有顯示器么？沒有臃腫的主機么？等等，未來都有可能會發生。而這一切也正在發生.....
原文地址：站酷
作者：木七木七
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的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的識別能力，根據一定規則組合得到無限數量的模板效果，可以做到一鍵出片。這塊目前的典型應用場景是王者榮耀的周戰報功能，隨機生成游戲高光時刻視頻。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的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；
時長：變換的起始時間點、持續時間；
曲線：變換的速率曲線，描述在固定的時長范圍內，速度是如何變化的；
以上圖的支付面板首次切換過程為例，我們的標注文檔是這樣的：
第一步定義好頁面的起始和結束狀態，并標明動效元素
第二步則是將各元素的運動細節用具體參數描述清楚
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
藍藍設計的小編 http://m.skdbbs.com
