在某些元素周圍使用多個放置陰影或非常精細的邊框（僅比實際陰影暗一點）可以使這些元素看起來更清晰、更清晰，并幫助你避免那些看起來渾濁的陰影。
你的標題很可能會比正文更大，也比正文更重，所以字母之間的間距有時會看起來更大，
減少一點間距，就可以使你的標題更加清晰
在ui中實現圖標時，保持一致。
確保它們具有相同的視覺風格； 相同的重量，或者填充，或者輪廓。
在創(chuàng)建設計時只使用一種字體是比較好的，這樣做實際上可以幫助你產生統(tǒng)一的設計效果。
使用字重、大小和顏色的組合，你還是可以用一個單獨的字體表達清晰的文字的結構
留白可以讓你的設計具有呼吸感，更加舒適
通過選擇一個基色，然后使用你選擇的顏色的色調和陰影，可以以最簡單的方式為你的設計增加一致性
允許用戶隨時跳過你的移動應用程序登錄序列，并將該跳過鏈接放在拇指容易觸及的位置。
只是一個簡單的調整，可以讓你的用戶有更好的體驗（我常常體驗國內一些APP，關閉按鈕特別遠，特別難按）
確保你的陰影總是來自同一個光源，會素描的同學很好理解，光源關系一致表達空間統(tǒng)一性的基礎
基本的處理方式是，在圖片上增加一個透明漸變蒙版來使得字體看的更加清楚
如果只使用一個字體，盡量選擇有多字重的字體，比如：阿里巴巴普惠體、思源、OPPO
在淺色背景下工作時，文字顏色不要太淺，雖然看起來很舒服，但可見性不較差，不利于閱讀
當涉及到長格式的內容時，某些常規(guī)的粗體字體在屏幕上看起來還是有點太重，太呆板了。
建議，選擇像深灰色（即# 4f4f）來降低文本的色調，這樣閱讀起來會更加舒服
通過使用顏色對比、尺寸和標簽，確?！靶袆影粹o”盡可能突出
隨著字號的減小，增加行高可以獲得更好的易讀性。
在設計應用程序內部使用的菜單時，請確保提供最常用的操作（即； 上傳圖像，添加文件等…）最突出的屏幕
只需從你的產品圖像中挑選顏色，然后將你選擇的顏色的各種色調和陰影應用到你的背景、文本、圖標……，就能為你的設計增添大量的視覺趣味
不同x高度的字體需要不同的行高測量來實現文本行之間的正確分隔。
即使你可能有兩種字體大小相同（即； 18px）它們的x高度可能會有很大差異，選擇正確行高是非常有必要的
通過使用字體大小、權重、顏色和布局的組合，你可以輕松突出UI中最重要的元素
在用戶剛剛執(zhí)行的操作附近添加一條錯誤消息，可以幫助用戶提高正確登入，也可以緩解用戶焦慮（他可以更加清晰那里出錯）
當為移動設備設計時，嘗試創(chuàng)建足夠大的可點擊區(qū)域
對于按鈕和僅由文本組成的鏈接來說，點擊區(qū)域會很小，所以盡可能使用帶有標簽的圖標。
iOS和Android的最低建議點擊區(qū)域
iOS為44 x 44pt
安卓48 x 48dp
長標題都是大寫字母的話，閱讀轉化上比較慢（你明白他是什么意思比較慢）
短標題都是大字母的話，相對來說比較快可以和記憶中的單詞對應上
始終確保淺色文本在淺色圖像背景下清晰可見。
只需在文本后面應用一個低透明的深色背景，就能保持這些元素之間的良好對比度
標題、正文、標題、正文……這樣的排列中如果是間距都是相同的，那么在閱讀上就很難區(qū)分標題是屬于上文還是下文的。
正確的做法是，標題距離上文的距離＞標題距離下文的距離，這樣閱讀起來，標題會比較清晰的對應的是下文
當下載速度是一閃而過時，則無需提示
當下載等待時間＞3S時，建議給進度提示
在項目中處理文本時，選擇正確的字體將影響文本的語音類型。 那么大聲、或者溫柔、或者正式，嚴肅，或者有趣。每種字體都有自己獨特的聲音
基于人閱讀情緒，如果閱讀一行很長，一直閱讀下去，會出現你眼前閱讀的內容“不見”的情況
對于單列頁面，45到75個字符被廣泛認為是令人滿意的行長，66個字符的行（包括字母和空格）是最合適的。
當然，字體大小和行高也是決定可讀性的一個因素，但是對于行長，要保持在45到75個字符之間
需要適當，如果裝飾的強了主要表達的，則不可取
按鈕。 通知。 UI中兩個獨立但必不可少的元素。
一定要確保你的用戶能夠快速準確地將他們區(qū)分開來
舒服的投影會增加你的設計的質感，和透氣感。太重的投影會顯得你畫面比較臟
高度飽和的顏色（明亮的藍色、紅色、綠色等）在網站上看起來很不錯，但過度使用時，會讓用戶眼睛疲勞，主要是與文本內容一起使用時。
在向設計中添加圖標時，使用用戶熟悉認知的圖標。新的圖標雖有很好看，很有個性，但是會讓用戶疑惑
需要承上表達的元素，排版上接近對應的元素，可以讓用戶心理聯系起來是一體的
與長格式正文文本（需要足夠的行高以提高可讀性）不同，標題通常要短得多，因此可以稍微縮小間距。標題的建議行高通常是文本大小的1到1.3倍
類比色和鄰近色是最和諧的配色方案之一，也是最不會出錯的配色
在處理特定項目時，使用類似于所有小寫字母的文本可以表達更加輕松的意思
但需要注意，在圖像和文本之間使用某種顏色疊加，以獲得更強的對比度
當在淺色背景下設置深色文本時，偶爾可以選擇較輕的字體。
但是…
反之：淺色文本>深色背景。
最好是把字體的重量增加一點，尤其是長文本，原因是，讓用戶避免視覺疲勞，獲得更好的易讀性
正確的字體選擇對于讓你的內容更快的正確傳達更重要
只需稍微增加字母之間的間距，就可以提高字跡的易讀性，并為大寫字母增加一些設計感
確保錯誤提示，解釋了哪里出錯和如何解決
始終讓用戶了解最新情況，即使是普通的表單，讓這些錯誤消息變得有用，不要讓用戶懵逼
使用占位符可以更好的緩解用戶焦慮
在應用可能產生后果的特定操作之前，請詳細地通知用戶。尤其適用于具有不可逆轉后果的行為，例如永久刪除某個內容。讓用戶知道將要發(fā)生什么，并要求他們確認
用戶需要采取的基本操作（例如，注冊或登錄）隱藏在下拉列表中，甚至可能找到用戶想要的。
解決：將重要的功能提出來，不要隱藏
原文地址：站酷
作者：木七木七
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( m.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
一、VUI的現狀
隨著智能音箱的迅速發(fā)展，谷歌（Google Home）、亞馬遜（echo）天貓精靈、小愛音箱......智能產品的井噴式增長，人們對智能語音產品的需求也越來越多，也越來越高，智能音箱對人們的生活的影響也越來越深，自然孕育而生一些新的職業(yè)需求，比如VUI（語音交互設計師Voice User Interfaces Designer），語音體驗設計師VUE（Voice User Experience Designer），但其實VUI和VUE的分界線是很模糊的，這里不做多敘述。國際的一些大公司已經做了很好的示范了，比如亞馬遜，谷歌等等，都會有設立專門的職位，做一些專門的研究，當然近期國內的相關招聘也會看到有相關的職位，且薪資不低。那么接下來會個大家詳細的分享VUI（語音交互設計師Voice User Interfaces）
二、VUI起源/歷史
1.VUI的第一個時期
20世紀50年代，貝爾實驗室建立了一個單人語音數字系統(tǒng)
20世紀90年代，誕生了第一個可行的非特定人的語音識別系統(tǒng)
交互式語音應答IVR系統(tǒng)的出現，代表了VUI的以一個重要時期
2.VUI的第二個時期
也就是我們現在所處的的時期
我們的現狀，我們正處于下一階段的初期階段，我們手機已經可以用語音處理很多事情了，但是還有很多事情是無法處通過語音完成的
3.VUI的一些優(yōu)勢和局限性
優(yōu)勢
1.速度
顯而易見的是速度變快了，國內的語音，語音轉文字的技術已經很大程度上提高了人們效率
2.釋放雙手
比如你在開車的時候，你可以直接對著你的手機語音助手說，嘿XX，麻煩你幫我做XXX
3.直覺性
說話是每個人的天性（當然排除特出情況）
4.同理心
語音包含了語氣、音量、音調、語速，這些特征包含了大量的感知信息，能夠讓你感知到對方在表達些什么。
局限性
1.環(huán)境
對環(huán)境的要求比較高，在公共場合，人多的地方不利于語音的接受和錄入
2.不適應
還是有很多用戶不喜歡，不適應對著語音設備說話的
3.喜歡打字
就是喜歡打字的一些用戶，打字從某個方面能夠帶給他一些愉悅
4.隱私
這個就很容易理解了，每個人都不希望自己的隱私被別人知道。
三、VUI設計師是什么（是做什么的）？
1.需要思考，在系統(tǒng)和終端用戶間，從開始到結束的整個個對話過程
2.用戶研究是不可少的
3.負責設計，產品原型和產品描述
4.需要了解底層技術的優(yōu)缺點
5.分析數據的能力
從項目的發(fā)布階段到發(fā)布階段都扮演著非常重要的角色。
當然很多人看到上面5條可能會有點怵，其實也并不是需要全部都需要會，也可以專門負責其中的一個鏈條，節(jié)點。比如用戶研究，數據分析....
四、VUI的基本設計原則
1.對話式設計
定義：簡單來說就是我問你答
目前我們使用的智能設備基本只能支持單輪對話，但這樣并不是人們習慣的對話方式
一輪以上的對話，才是符合用戶心理預期的。
請大家回憶下自己使用智能音箱的一些場景體驗，
舉個例子（天貓精靈）
用戶:天貓精靈，明天我有鬧鐘么？
天貓：您明天沒有鬧鐘呢
用戶：那可以幫我設定一個么？
天貓：.....
你會發(fā)現，智能音箱這個時候像是失憶了一般，毫無反應，顯然這并不是我們想要的一個交互，從用戶社交屬性來說，人們溝通的方式一直都是一輪以上對話式的，并不是單輪式的，一般來說，我們要做到讓用戶決定對話要持續(xù)多久，很顯然，你有親身體驗過的話，能做到多輪對話的比較少。
插一個題外話，最近天貓精靈更新了游戲語音的玩法，算是踏進一步了吧，雖然不是很棒的體驗，但起碼跨進了多一步，相信未來會越來越棒的。那對話式是如何設計出來呢？大致是怎么樣的一個流程呢？
2.設計工具、
這里說的設計工具并不是說是一個具體的工具，更多是指一個方法論
示例對話
定義：示例對話字面意思就是演示舉例對話，它看起來像一個電影腳本，像兩個人一起在對話
特點：是整個設計對話過程的關鍵方法。成本較低，簡單易操作
用法：把要做成一件事情的場景用文字寫出來，然后大聲讀出來，你會發(fā)現書寫和口語化的還是有很多區(qū)別的，甚至是有些奇怪的，這時候你會發(fā)現有很多可以改進的地方，所以你會看到一些招聘都會有這一項對應的要求，甚至是要求一些事有話劇功底，有劇本寫作相關經驗優(yōu)先。
作用：它能夠讓你在投入開始研發(fā)之前，知道你的設計效果是如何。
3.視覺原型
雖然是語音交互，但是還是離不開GUI的，它可以結合示例對話，將用戶體驗可視化。示例對話和原型組成了我們產品的故事板，GUI+VUI是用戶一套完整的體驗，所以，VUI和GUI在早期階段就開始合作，這樣對用戶體驗會更加流暢。
4.流程圖
也叫做呼叫流程圖，一般來說我們的流程圖需要包括用戶使用中所有可能存在的分支，但這樣下來會有千萬條復雜的情況，流程圖就會很亂，也很難梳理，所以我們采用分組的方法，
具體的分類的方法可以根據分成多組（日歷功能、搜索功能，電話..），也可以根據不同的目的進行分組。
流程圖的使用到的工具就非常多了，這里就不一一列舉了。
那大概我們設計完成了一組示例對話之后，我們就要對一些細節(jié)進行細致的研究，比如；確認
五、如何進行確認
1.用戶語音的確認
2.非語言式確認
3.通用確認
4.視覺的確認
1.用戶語音的確認
最重要的是用戶語音的確認，分為顯性確認和隱形確認
顯性確認即：比較重要，強制用戶確認信息。比如：天貓精靈你能幫我一份奶茶么？查到附近XXX奶茶，使用優(yōu)惠后的價格是XX元，你要來一份么？
隱形確認：即不需要用戶確認消息，比如：用戶：XX你能幫我設定明天10點的鬧鐘么？好的，已經幫你設定好明天早上10點的鬧鐘。
1.1那么如何去判定什么時候用隱性確認和顯性確認呢？
那么下面就要介紹一下三級置信度。
系統(tǒng)將在一定的閥值內作出明確的形式確認信息。而這個閥值我們設定為三個等級
1.2置信度？
就是智能音箱能識別到聲音的清晰度。
用易懂的話說就是人與人之間溝通的語言接受的清晰度，當然聽不清對方說什么話的時候時候一般會發(fā)起詢問，或者直接說，對不起，我沒有聽清，你可以再說一遍嗎？
1.3三級置信度
比如幫我再買一份外賣
1.當置信度大于80%，使用隱性確認
好了已經幫你在訂了一份外賣。
2.當置信度為45~79%，使用顯性確認
您是想再多訂一份外賣是嗎？
3.當置信度小于45%
對不起，我沒有聽清您的講話，您想買些什么？
2.只用隱形確認.
智能語音音箱能夠非常清晰的識別到你說的內容的時候，可以直接用隱形確認，這樣帶來的體驗流暢感舒服很多
3.非語言式
比如說，燈光花幾秒才能，那么只是讓系統(tǒng)先恢復好了或者知道的來讓用戶知道后面發(fā)生什么。還有加一些特定的音效，來代表特定某一個意思。
4.有趣的通用確認。
就是說智能語音音箱不會單獨的回答你是和否，會主動會詢問您一些的問候，通過這樣情感化的一些設計，將能夠讓用戶感到更加的溫暖和舒服。
那我們前面講到了那么多的一些確認策略，那我們接下來再說一下對話式的標識。因為是讓用戶了解交談進展以及進展情況的重要方式
5.對話式的標識
它包括了以下三個方面。
1時間線，開始，進行中，結束。
2接收回執(zhí)，謝謝，知道了，好的。了解了。
3積極反饋。哇，你這個消息真的很棒。
那對話式對話作用是什么呢？是讓用戶了解交談進展以及進展情況的重要方式。能夠更好的追蹤到用戶的使用過程中的一種路徑方法。
大家會發(fā)現我們很多時候智能語音設備并不是每次都能夠快速，精準接受識別我們的信息的。出錯率相對來說是比較高的，下面大概說下語音識別的出現錯誤異常的幾種情況
六、語音出現錯誤異常和解決方法
錯誤異常的幾種情況
1.未檢測到語音
2.檢測到語音，但沒有識別
3.檢測到語音，但沒有識別
4.部分語音識別錯誤
1.未檢測到語音
未檢測到語音有大概兩種情況，一是用戶說了，系統(tǒng)沒有接收到。二是用戶沒說。
主要說下用戶說了，系統(tǒng)沒有接收到的情況，建議采取兩種解決方式，
第一種前面我們說到的三級置信度，我們采取直接詢問，“對不起，我沒有聽清你說的話，你能再說一遍么？”
第二種是采取什么也不做
1.1那什么情況下使用詢問呢？
用戶必須回復后，系統(tǒng)才能繼續(xù)進行任務
你的系統(tǒng)只是支持語音
沒有其他回復方式了
1.2什么情況下更適合使用什么也不做呢？
用戶還有其他選擇（比如手機界面課、通過一個按鍵操作）
什么也不做，不會中斷對話
有視覺信息可以提示用戶做出明確的選擇
2.檢測到語音，但沒有識別
處理方式和未檢測到語音基本是一直的，這里就帶過了
3.檢測到語音，但沒有識別
出現這種情況的原因一般是兩點
1.系統(tǒng)程序沒有針對這種情況的回復
2.程序中寫了錯誤的回復
解決方法，這里我們就要通過測試來發(fā)現具體是哪個環(huán)節(jié)出了問題了，通過數據的收集分析能夠找到具體的答案
4.部分識別錯誤
大概就是這樣的場景，天貓精靈，嗯...我想..。嗯，好的，為您帶來一首XXX的歌曲。
解決方法：這個還是需要技術的介入，可以通過使用N-Best列表（可以通過這個列表規(guī)避二次錯誤）和鎮(zhèn)適用固件后相應的數據分析來構建此問題的解決方法
說完了錯誤異常處理以及解決方式，我們接下來說下延遲和消除歧義
5.延遲
在交互一般用戶等待的時間是7秒（現在可能是5秒），當你詢問等待回答的時間超過這個閾值，用戶就會懷疑是不是系統(tǒng)出問題了，甚至煩躁。
解決方法：一是通過“請稍等”讓用戶知道你在運作和查找。2.非語言提示，比如音效，等等。
6.消除歧義
很多時候用戶提供的信息只有一部分，再加上中文的多層含義的特殊性，消除歧義對用戶體驗的的提升有重要作用。
比如：問地名的天氣，中國很多鎮(zhèn)區(qū)的地名都是一樣的。
鼓樓 河南省_開封市_鼓樓區(qū), 福建省_福州市_鼓樓區(qū), 江蘇省_南京市_鼓樓區(qū), 江蘇省_徐州市_鼓樓區(qū)
解決方法：還是可以采用置信度的方式去判別，如果很確定就直接回答，要么就多輪詢問確定
7.幫助功能
最后的模塊說下幫助功能。也是至關重要的，能夠在一定程度上消除用戶的“恐慌”，所以，在我們VUI中設計對應的幫助是非常有必要的，比如：詢問智能語音設備你能干什么呢？它會告訴你他能做些什么？比如：我的設備怎么樣鏈接你的藍牙。APP：好的，長按......
七、語音交互的幾點原則
1.應該是省時、高效的
2.簡短的
3.能夠被隨時打斷
4.能夠鏈接上下文語境
1.應該是省時、高效的
和視覺界面交互其實是差不多的，用戶是非常不愿意花很多時間達到他想要完成的任務的。越高效，越短時間，用戶的體驗會更加愉悅。
2.簡短的
只需要告訴用戶主要關鍵信息即可，不要過于冗余。舉個簡單的例子購物APP的商品表現形式，一般都是把名稱和價格放在主要的位置，把詳情放進下一級頁面。采用盡可能簡短的表現形式，讓用戶直接獲取到他想要的，當然這對用戶的了解和洞察都要需要經驗的積累和感知的
3..能夠被隨時打斷
舉個例子，用戶：明天的天氣怎么樣？APP：明天XXX地方的天氣19℃，小雨，適合穿.......，用戶可能只是想知道天氣而已，這時候我們是需要做到可以被用戶打斷，而不是“執(zhí)拗”的把話說完，如果一直說下去，不允許用戶打斷，用戶的請求沒有被回應，這時候用戶會產生反感心理，
4.能夠鏈接上下文語境
這是目前很多智能語音設備體驗上沒有那么好的地方，也就是前面說的，可以進行多輪對話，當然如果要設定多輪對話，中間的交互情況將會比現在更佳龐大，需要考慮的可能性也會更佳復雜。
語音交互設計的前半部分設計流程基本已經概述完了，主要說了VUI的起源，一些VUI中用到的一些方法論，設計工具，一些異常情況的處理，和VUI設計的幾點原則。下面將會和大家聊下用戶測試和預發(fā)布、確認發(fā)布......
八、用戶測試
語音用戶界面的測試其實和視覺界面測試的方法有一些相同的地方，但也有一些差異。
一般來說，在開始測試之前呢，還是需要做用戶調研的。大概分為以下幾個步驟。
1.了解需求（用戶用例背景研究。）
1.做用戶研究和訪談之前，我們要先搞清楚，這個利益方的需求是什么，業(yè)務需求，用戶訴求是什么，我們的產品能夠給用戶帶來什么？能夠給他們解決什么問題？最后我們要確定我們的目標用戶，然后進行訪談和調研（大體的方法，詳細可以去看一下阿里提出的五導家加方法論）
2.制定設計研究方案。
2.1給目標用戶制定，任務流程。
就是給每一個受訪的用戶，一個特定的任務流程，但很多時候我們并不是只是測試一個任務，會有很多任務，那就會涉及到任務排序的問題。還有最好的方法是采用拉丁方陣設計,這樣的話不必通過出現所有可能的排斥方式來試驗。
那么設定好這次任務之后呢，我們就要進行招募受試人員了
2.2.招募受試人員
需要注意以下幾點。
1.要在目標用戶里抽取測試用戶
2.人數大概控制在5~12人，可用性專家Jakob Nielseb提出效果一般控制在5-8人左右為最佳
對于小公司招募測試用戶可能會相對比較困難，成本相對來說會比較高，當然是可以招募你身邊的朋友和公司的同事來協(xié)助你的，但最好避開項目的直接核心人員。
那么在目前人員完成之后呢，我們大概會進行一些進行中的一些測試，比如說我們做一些提問。
請問這里會涉及到一個方法，我們在交互設計里面叫它為用戶體驗地圖。
3.用戶體驗地圖
我會給到用戶一些任務的體驗流程，然后根據他的一些反饋，通過語言、表情，然后繪制出用戶體驗地圖，從而判斷出，用戶在這個任務流程中，得到了一些體驗感受，找到可能存在問題的所在節(jié)點，然后進行修改。下面說下在訪談中需要注意的I點，如何進行訪談
4.訪談需要注意的點
那么在口頭提問的過程中，我們需要注意些什么呢？
4.1.提問不要有一些語句上的偏袒，不要出現故意引導，比如說你喜歡這個功能嗎？這樣提問是不太合理的。最好提問是，你用完這個功能之后，你是什么樣的一個感受？或者說你覺得怎么樣？
4.2.要注意引導用戶得出具體的結論。而不是用戶說大概，可能我覺得應該是等等之類的詞。要有具體的例子，不要一個抽象的結果。
4.3.少用為什么開頭，會讓受訪者覺得你是在質疑他，或者說故意的，刁難他。比如說受訪者說，語音天氣詢問功能特別難用，能夠簡單說一下你的使用場景嗎？他是在什么情況下讓你感覺到難用？描述我們需要更加具體化一些，而不是籠統(tǒng)的，抽象的。
5.可用性測試（用戶調研）
目的是測試工作流程和易用性。但是在語音交互過程中，識別問題往往會阻礙用戶完成任務。最好是找?guī)孜粶y試用戶，嘗試找出主要的識別問題，然后修復它。
可用性測試大概分為幾類
5.1.遠程測試（電話/視頻訪談）
優(yōu)點
更容易找到符合特征的用戶
成本較低，只需要遠程即可，不需要支付其他額外的支出，比如說來到你約定地方差旅費。
會更加自然，更貼近真實情景。
用戶心理負擔沒有那么大會比較自在。
可以沒有測試主持人
條件允許的話，最好使用視頻通話，這樣我們可以錄制影像，后期方便我們去觀察用戶的表情和反應，以得出更加正確的測試結果。
缺點
沒有辦法實時跟進參與人員的反應。
5.2.攔訪
這種測試方式是非常有難度的。意味著我們要去到公共場合去攔截受訪者，然后讓他參與到你這個測試當中，因為人與人的戒備心理，所以很多人都會拒絕你，如果你想提高成功率，最好準備一些小禮品或者其他的小獎勵，這樣有助于你提高攔訪的成功率。當然你也很有可能得到的結果，會有一些偏差，受訪者會出于某些目的而回答你的一些問題，有可能并不是出于真心的。所以呢，這里不是很建議大家用這種方法。
5.3測試完成
測試完之后，我們需要進行我們的結果分析和統(tǒng)計。
測試衡量的一些指標，我們大概分為5個關鍵指標。
準確性，響應速度，認知速度，清晰度，友好度和聲音
5.4.注意事項
這里需要注意的點是，一定先要預先設定好，確定每項任務完成的標志是什么。不然后期對結果的一個標準很難去統(tǒng)計，會比較混亂。
我們需要總結這是用戶對問題的回答及完成任務率錯誤數量和類型等等，從中找出用戶的痛點，用戶的一些干擾點。按任務出錯時，用戶是否能夠自己解決呢？等等，具體需要得出的一些結論，要根據自己想要測試的一些目的來定。
在這樣我們就完成了整個可用性測試的流程。
6.預測試
發(fā)布之前需要做一次與測試，可以權重沒有那么高。但也是關鍵的一步。
7.識別測試
最重要的還是識別測試，這關系著整個產品的體驗問題，整體的測試流程需要用三級置信度和N-Best列表、以及后臺的表格相結合，找出相對應的問題節(jié)點，并且修復它。
8.負載測試
你得清楚明白你的設備，最多的承載量，不然流量一進來，服務器就崩潰了，這樣的體驗是極其差的。
9.效果的評估
你還得去做效果的評估。在試運行開始之前，你需要制定目標，然后看是否達到這個目標，這個效果大概是什么樣的？是否達到預期？任務的完成率也是非常關鍵的一個成功指標。
10.試運行
最后到達發(fā)布階段。為了產品的穩(wěn)妥起見，我們還是會進行一次試運行，
11.發(fā)布
12.迭代
條件允許的話，重復上面一次的用戶調研的方法，然后得出一些現階段的一些問題。我們需要實時跟蹤系統(tǒng)的故障并快速的改進，這是我們非常需要要做到的。
大概全部的語音交互流程就說到這里了，我們簡單的回顧下下
1.語音交互設計的起源
2.語音交互設計的設計原則-示例對話
3.確認原則/糾錯方法-三級置信度
4.可用性測試
5.發(fā)布
那語音交互設計的未來點在那里？設計師我們的機會在哪里
戰(zhàn)略選擇
世界一直都是存在不確定性的，如何能夠應對呢？眼界和選擇。
這里延伸下梁寧在《產品思維30講》里面說到的點線面的戰(zhàn)略選擇的問題，她大概說了這樣的例子：比如有一對雙胞胎，2010年一起大學畢業(yè)，一個進入了騰訊，一個進入了報社。7年之后呢，騰訊的那位如果不出意外應該是年薪百萬，而且滿街都是獵頭在挖，投資人在挖，只要出來創(chuàng)業(yè)就給錢，而去了報社的那位呢，報社的情況我們今天肯定了解整個產業(yè)都沉淪了，曾經他寄托理想的整個產業(yè)都沒有了，其實一切都需要重來，在這個時候并不是說雙胞胎他們的個人的素質有問題，或者是他們的能力點有問題，點是沒有問題的，也不是他們分別跟隨的領導，比如說我們就跟老大，他們的老大的能力點和個人操守也都是沒有問題的，但是問題在哪里？問題是說這兩個單位所附著的經濟體，一個是在快速崛起，一個是在快速崩潰。你努力工作的公司收益，遠遠不如你在2010年以前或者2013年以前，比如說買騰訊的股票，或者是說你買一套北上廣的房子，
我們本身是一個點，我們這個點需要附著在整個整個快速崛起的“線”上，戰(zhàn)略的選擇，眼界的層面顯得尤為重要，和努力一樣重要，甚至往往有時候選擇比努力更重要，但選擇也是努力累計的結果。我們設計師如何做出順應這個迅速崛起的經濟體的選擇，也是我們當下 的機會，我們能看到什么機會，我們要附著到什么樣的線上，在當下職業(yè)邊界愈發(fā)模糊的時代，我們能力和眼界的提升，可以做到從容的應對未來的種種變故。
那么同樣，隨之AI的發(fā)展，5G的到來，我們的很多工作方式都有可能被顛覆，語音交互設計的將會是一片藍海，雖然現在有諸多的桎梏，但這是趨勢，是快速崛起的趨勢。設計師工作你能想象未來沒有顯示器么？沒有臃腫的主機么？等等，未來都有可能會發(fā)生。而這一切也正在發(fā)生.....
原文地址：站酷
作者：木七木七
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( m.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
“生活就像是一顆巧克力，你永遠不知道下一顆是什么滋味?！泵ず械恼Q生，給“box”的意象又增加了一份神秘。2020年作為大眾廣為人知的盲盒元年，隨著12月第一支“盲盒股”在港交所掛牌上市，盲盒零售店和自動盲盒機都如雨后春筍一般席卷了大小消費集散地。抽盲盒、買盲盒、再到次級市場交易盲盒，一個百億盲盒市場被快速“拆”了出來。
從潘多拉的墨盒、薛定諤的貓，再到盲盒的隱藏款，“抽盒”在搭上潮玩這趟商業(yè)快車的同時，也在不斷試探年輕的好奇心和為此豪擲千金的底線。根據《95一樣玩家剁手力榜單》顯示，收藏盲盒手辦從最開始的“亞文化”消費，已經成為當下95后熱度最高的收藏愛好。也不難理解，盲盒低至50-80元的單價，和Z世代年輕人群體逐漸下沉的消費趨勢一拍即合。而搭載了游戲及商業(yè)IP的盲盒，除了有得天獨厚的爆款產出特性，也在更多方面和更高層次上滿足Z世代年輕人的好奇心、收集欲并拓展了線下社交的可能性。
那么同樣備受年輕人喜愛的社交產品手Q，在這趟“萬物皆可盲盒”的浪潮中，又可以扮演怎樣的角色呢？我們給出的答案是：數字盲盒。借助平臺已有的大量IP，數字盲盒相比線下實體盲盒搭乘IP紅利的成本更低，推陳出新，以速度和“量”取勝是一大優(yōu)勢。同時，我們也希望以日簽打卡的方式，在滿足手Q、Z世代用戶收集欲望的同時，打造一種基于線下盲盒收集但同時潛在拓展數字“盲盒”社交的新玩法。
在傳承線下玩法的同時打造線上盲盒新玩法，則需要考慮到許多問題。我們留意到，線下盲盒有許多優(yōu)勢是無法照搬的，比如實體盲盒的觸感，購買、拆開實體盲盒所獲得的即時心理反饋等。但盲盒的核心特點，就在于它給普通的商品增加了游戲屬性。
因此，我們也嘗試通過挖掘虛擬盲盒的獨特之處，保留并增添整個抽盒過程的娛樂性和驚喜。從設計層面而言，我們從一下三個角度切入構思：
1） IP：篩選線下盲盒成功案例，敲定以Q萌的盲盒為主推IP；并且線上盲盒可以實現短平快上架IP，結合時效熱點，孵化出更出圈的虛擬IP。
2） 包裝：趨同于線下盲盒包裝，繼承實體盲盒的視覺審美體驗；線下盲盒受包裝成本所限，線上盲盒可以打磨出更新穎的盲盒包裝。
3） 隱藏玩法：同步線下盲盒玩法邏輯，采用N+1的種類形式，在每套盲盒系列中設定一個隱藏款。在用戶抽盒過程中，整套盲盒以動畫輪播的方式呈現，隱藏款則用問號代替，驅動玩家好奇心。并且依附QQ關系鏈，引導用戶交換已經擁有的重復盲盒，從而收集整套端盒。
主打IP對品牌形象的構造有至關重要的作用。這種重要性不外乎企鵝之與手Q，因此敲定、完善頭部IP，是設計手Q虛擬盲盒的首要考慮。在設計的首個階段，我們選定了四類優(yōu)質虛擬盲盒IP：
1） 自有潮玩IP：選擇現有ISUX體系下已孵化成熟的精品潮玩IP，比如PUPU&藍莓之夜，UPUP牛&牛年大吉等；
2） 自有虛擬IP：在手Q用戶群中知名度高、在禮物系統(tǒng)中受到粉絲熱捧的IP。比如多肉植物、Alice夢游仙境系列等；
3） 外部虛擬IP：聯名外部爆款IP。手Q以95后年輕用戶為主，也是外部各大爆款IP的目標消費者聚集地。因此我們挖掘了包括超人氣虛擬偶像洛天依，迪士尼的達菲熊&星黛露春節(jié)系列在內的外部IP合作；
4） 外部潮玩IP：擁抱主流盲盒潮玩IP，將消費者粉絲與盲盒的情感從線下延續(xù)至線上。知名IP包括star moly萌力星球、迷萌假日派對、達么吉發(fā)財者聯盟系列等。
敲定IP方向后，我們綜合了幾個方面考慮虛擬盲盒的IP設計和上架思路：
1） 目標匹配度：IP是否和手Q用戶群體產生足夠的共鳴；
2） 品牌定位：IP是否和虛擬盲盒平臺的風格、氛圍及調性協(xié)調一致；
3） 制作成本：在估算虛擬盲盒IP生命周期的基礎上，是否能以較低的設計、生產及修改成本進行批量生產。
“從Box出發(fā)”這一理念，也淋漓盡致地體現在數字盲盒視覺設定的方方面面。
在logo設定上，我們將“盒”的意象與字母Q的形態(tài)相結合，并充分考慮移動端設備屏幕的呈現空間，以30度的軸測圖視角構建出一個正方形的盒子。這樣既突顯了logo的存在感，又給整個視覺界面留出了充足的展示空間。同時，logo三維六邊形的框架設計，也突出了產品的格調和設計感。
在配色設定方面，我們提取傳統(tǒng)線下盲盒品牌中核心玩家廣泛認可的粉色，也從QQ品牌色中提取出藍色，調和出一種明度更深的藍色作為互補色。字體設定上，我們選擇了造字工房元黑體搭配DIN的家族字體作為虛擬盲盒平臺的運營字體。這款字體字形較為硬朗粗壯，但同時又兼顧圓角的設定，符合虛擬盲盒品牌“活潑，潮流，可愛”的氣質定位。
同時，我們在平臺界面的視覺方面也延續(xù)logo的設計思路，通過使用30度軸測圖的空間正方形，衍生為基礎圖形并在不同頁面中配合主題品牌色使用。同時，該基礎圖形也在虛擬盲盒的其他頁面結合產品形態(tài)靈活變形，強化虛擬盲盒品牌形象。
“盒”的涉及理念也延展到頁面的涉及思路中。在抽盒延展上，我們基于30度平行透視的設計理念進行了一系列構思。首先在抽盒頁面，我們將頁面簡單分割為上下兩個部分。盒內產品放置在一個通過透視視角構建出的“桌面”上，并通過動畫進行進行系列產品展示。頁面下半部分則用于信息及其他相關操作。
在ARK傳播、用戶贈送虛擬盲盒的界面，我們也利用30度平行透視的涉及思路，在分享卡片中對虛擬盲盒及相關產品進行了空間視覺處理。此外，貫穿始終的純色背景在突出盲盒產品本身的前提下，也保證了整體風格的一致性。
在包裝設定上，我們延續(xù)線下盲盒常規(guī)的視覺慣例，以“盒”的形式進行產品包裝，并以logo的30度側軸圖作為基礎預覽視角。眾所周知，雖然線下盲盒的包裝五花八門，比如浮雕、專色印刷，但最終還是落腳到“紙本”這一包裝形式。相比之下，虛擬盲盒包裝不受制作成本限制，發(fā)揮空間就更為廣闊。在此基礎上，我們將虛擬盲盒的包裝設計成具有磨砂質感的毛玻璃材質。這一設計不僅讓虛擬盲盒更有視覺沖擊力和格調，同時霧化的透明磨砂表面也可以隱隱透露出盒內產品的輪廓和顏色，勾起用戶抽盒過程中的緊張好奇情緒。
在此基礎上，每個盲盒配合各系列的IP字體、規(guī)范化的系列編號、品牌LOGO和IP色，則可以高效統(tǒng)一IP形象，規(guī)范化輸出系列盲盒包裝。
完成了盲盒靜態(tài)視覺的構思后，就進入了動畫設定的階段。我們將抽盒UI中的動畫種類大致分為三種：
一、 輔助型循環(huán)動畫：限制較少的頁面動畫，主要目的是烘托抽盒界面的氛圍。
二、 輔助操作的反饋型動畫：主要為用戶抽盒后喚醒的交互動畫，增強抽盒結果的用戶心理反饋。由于此類動畫基于用戶操作觸發(fā)，因此時長限制較為嚴格。動畫過長會直接減緩載入速度，消耗用戶等待時長，適得其反。
三、 載入動畫：動畫形式簡單，主要目的是在等待的過程中加入趣味的細節(jié)，動畫資源要保證盡可能小。界面設計繼承品牌圖形設計思路，風格統(tǒng)一。
抽盒頁面的設計是整個虛擬盲盒設計的重中之重。這就要求設計師既突出展示盲盒產品本身，又保證抽盒界面的趣味性。在底層動畫中，我們繼續(xù)延續(xù)30度平行透視視角的設計邏輯，使用After Effects的攝像機工具以Y軸旋轉的方式做成Fake 3D的效果。在制作Fake 3D動畫時，我們也使用了Lottie組件。Lottie組件的優(yōu)勢在于在實現動畫高保真還原的同時，也可以通過在AE內替換對應素材即可在統(tǒng)一標準下實現量化輸出，規(guī)范后續(xù)動畫生產標準，提高生產效率，降低設計成本。
在底層動畫上，我們也加入了四層動畫進行功能和效果的區(qū)分。在疊加的首層動畫上，我們對每套虛擬盲盒的所有產品進行了展示，進一步加深用戶對可能拆出的盲盒產品的期待心理。在第二層和第三層動畫上，我們以Z軸旋轉的動畫特效，將虛擬盲盒進行一種立體的空間感展示，并使用粒子效果配合光環(huán)旋轉的動畫特效環(huán)繞虛擬盲盒，引導用戶的點擊路徑。同時在最頂層，也就是第四層動畫，我們還加入了手Q具有代表性的大黃臉表情，并賦予它彈跳和位移的效果，增添抽盒界面的趣味性。
但在盲盒抽取結果動畫設計方面，我們在項目前期的嘗試中就遇到一個難題——拆盒動畫最重要的部分就是盒子打開并告知用戶抽中了哪款盲盒。如果每一個抽盒結果都配置不同的動畫，那么單獨一套盲盒“UPUP牛&牛年限定鵝”，將至少需要設計六種盲盒結果動畫，不同系列的盲盒的動畫設計成本也將成幾何倍數增加。
因此我們需要找到一種盡可能控制開發(fā)資源和成本，同時又不拘泥于盲盒IP類型和風格的通用方案。我們設計了一款拆盒動畫作為底層素材，并且搭配放大效果和粒子碎花下落的“撒花”慶祝的氛圍特效，最終制作出一段不超過800ms的物品從盒子“蹦出”的效果動畫，流暢處理了抽盒結果的過場動畫，也完善了整個虛擬盲盒的抽取邏輯。
本次虛擬盲盒的設計項目時間緊，需要趕在年前新版本發(fā)布之前敲定設計細節(jié)。因此設計的重點和難點，就是需要找出一個和品牌強關聯的視覺元素，提綱挈領地引導整個視覺設計方案。而我們給出的30度軸測圖視角，就成功給予了虛擬盲盒空間的概念，并將這一設計細節(jié)靈活貫穿項目始終。此外，一些視覺類設計比如盲盒Z軸旋轉，也需要從視覺設計師的視角出發(fā)，提前通過和包括開發(fā)在內的相關項目團隊進行對接，給予解決方案。這在很大程度上也節(jié)約了人力成本，推動了項目的快速落地。
而在整個虛擬盲盒的設計過程中我們也反復思考，如何通過打磨虛擬盲盒的特點和亮點，實現超過線下抽盒的體驗。比如在一開始就提到，線下盲盒從項目創(chuàng)立、建模、工廠生產打樣、后期形態(tài)修正再經過一系列生產運輸到達消費者面前，時間長、成本高。而相比之下，虛擬盲盒則在抓熱點、做爆款上具備得天獨厚的優(yōu)勢。通過和潮流IP快節(jié)奏展開合作，在短期內提升影響力及曝光度，觸達大批潛在受眾。
與此同時，我們也體現出虛擬盲盒的亮點.在一些特性上做到超過線下抽盲盒體驗
盲盒IP選擇，在線下盲盒運營策略中，從項目立項到設計師創(chuàng)意建模再到工廠生產打樣，反復修正盲盒最終的形態(tài)，下線生產物流到消費者面前，是一個非常冗長的過程。相比線上盲盒的節(jié)奏則會輕盈很多，我們在線上虛擬盲盒中發(fā)揮特點，篩選出一些時效性強，熱度高的IP，快速制作素材上架虛擬盲盒平臺。以「創(chuàng)造營2021」為例，線上盲盒可以在最短時間內響應熱點，制作出短時間內出團成員的IP素材并且上架虛擬盲盒平臺，這些都是線下盲盒所無法觸及的。
盲盒潮玩是z世代身邊最熱門的話題之一，消費主義浪潮過后，人們從新審視「盲盒」的價值意義，未嘗不是一件好事。虛擬盲盒固然無法代替真實盲盒帶來的重量和觸摸手感，但是現實盲盒潮玩逃不開工業(yè)化的生產成本，虛擬盲盒平臺通過有低成本扁平化的策略，有溫度的情感化設計，和用戶建立起來另一種連接。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( m.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
在終端APP中，動畫非常常見，它可以輔助視覺制造焦點，同時也可以讓用戶交互更加順滑，但動畫的實現卻是設計師和研發(fā)群體的一個痛點。如何輔助設計師設計高性能炫酷的動畫、如何將設計師設計的動畫準確無誤的還原到終端APP上是業(yè)界不斷探索和解決的問題。
圖1 傳統(tǒng)動畫實現流程圖
當前最好的動畫設計軟件是Adobe After Effects（簡稱AE），從AE動畫制作到終端APP呈現，傳統(tǒng)的實現方式如圖1所示，有三大痛點：實現成本高、溝通成本高和性能難以保證。
近幾年，業(yè)界誕生了像Lottie、SVGA這樣的動畫工作流解決方案，雖然在一定程度上提升了生產效率，但存在AE支持能力有限、動畫性能難以保證、配套工具支持有限的問題。
PAG（Portable Animated Graphics）是騰訊PCG發(fā)布器中臺自主研發(fā)的一套完整的動畫工作流解決方案，助力于將AE動畫方便快捷的應用于各平臺終端。PAG的流程圖如圖2所示，設計師在AE上設計出動畫后，可以通過導出插件導出pag文件，同時PAG提供了桌面端預覽工具，支持實時預覽效果，在確認效果后，通過運行配置上線，各平臺終端可以通過PAG SDK加載渲染pag動畫。
圖2 PAG動畫工作流流程圖
與Lottie、SVGA相比，PAG增加支持了服務端。除此之外，如圖3所示，PAG動畫方案在導出動畫文件大小、AE特性支持和可編輯性方面具有較大的優(yōu)勢。
圖3 PAG和Lottie對比圖
和Lottie、SVGA實現不同的是，PAG不依賴平臺端渲染接口，可以實現各平臺的渲染一致性。PAG與Lottie、SVGA的矢量能力支持如附表1《AE特性能力支持》所示。
無論是PAG還是Lottie、SVGA，所支持的AE特性僅僅是AE眾多特性中的很少的一部分，這在一定程度上限制了設計師的創(chuàng)造力。針對這個問題，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增加圖片填充的四個規(guī)則，如圖10所示：
圖10 可替換圖片填充設置
其中：
不縮放：畫面不縮放，從左上角位置開始裁剪
黑邊：在保持高寬比的情況下縮放到設備的可用屏幕大小，圖像不發(fā)生變形，如果圖片尺寸和填充區(qū)域比例不一致，會出現黑邊，為默認填充模式
拉伸：不保持寬高比填充，會發(fā)生失變形
裁剪：在保持高寬比的情況下縮放到完全填滿可用的屏幕大小
具體效果如圖11所示。
圖11 圖片填充效果圖
PAGViewer支持桌面端預覽PAG文件動畫效果，如下圖所示。支持查看動畫文件中包含有多少個可編輯文本和可編輯圖片，且支持設計師本地填充素材，實時預覽填充效果，無需等待上線后才能確認真實效果。圖片占位圖支持填充圖片或視頻，如果PAG文件內置了音頻文件，支持播放音頻效果。具體效果如圖12所示。
圖12 PAG效果預覽
在pag動畫實際使用的過程中，PAG經常遇到的問題是設計師辛辛苦苦設計的動畫在終端上性能表現不佳，需要進行返工優(yōu)化，同樣的問題在使用Lottie方案時候也會存在。
除了效果預覽，PAGViewer還增加了性能展示面板，可以很方便的看到pag動畫的基本信息，如時長、幀率、尺寸、bmp預合成的數量，圖層總數等，還有量化的性能指標，定量的評估pag文件的性能，如圖13所示，方便設計師進行針對性的優(yōu)化，而不需要等到上線前才會暴露性能問題。具體效果如圖13所示。
圖13 PAG性能展示面板
目前PAG方案已經廣泛應用于騰訊公司內外幾十款產品中，涵蓋了眾多的國民級應用。
總結下來，PAG目前主要使用在以下幾大場景：
圖15 UI動畫場景
設計師設計出動畫文件后，研發(fā)只需要替換預設的文本內容即可，并且文件體積非常小。
圖16 貼紙動畫場景
圖17 照片/視頻模板場景
PAG支持將內置的圖片作為占位圖替換，并保留所有動畫效果。因此可以將整個PAG動畫設計成一個模板，把預設的占位圖替換成用戶選取的照片，自動套用效果生成視頻。全程可以讓設計師自由批量生產模板，無需研發(fā)介入。
仍然基于圖片替換原理，PAG也支持將占位圖替換為視頻，實現視頻模板功能。
圖18 智能剪輯場景
智能剪輯是圍繞用戶上傳的視頻內容，生成定制化的模板，模板本身是不固定的，可以從多個PAG文件組合而成，類似活字印刷。設計師可以利用這個特性，構建自己的特效組件庫，然后對接AI的識別能力，根據一定規(guī)則組合得到無限數量的模板效果，可以做到一鍵出片。這塊目前的典型應用場景是王者榮耀的周戰(zhàn)報功能，隨機生成游戲高光時刻視頻。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( m.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
Meet more beautiful colors.
在《騰訊文檔-構建科學有效的色彩系統(tǒng)》這篇文章中，我們闡述了騰訊文檔如何升級了新的品牌色，為騰訊文檔塑造更加有未來科技感及智慧感的視覺感受和品牌認知，以及如何構建一個科學有效的調色板。
在設計系統(tǒng)的實際運行中，我們也需要著眼于如何應用調色板，建設協(xié)同工作流，并給各個角色提供有關色彩的擴展指導，以達到在騰訊文檔中構建一致且有品牌感的數字界面并有效提升效率的目的。
在建設騰訊文檔色彩系統(tǒng)的工作中，我們首先構建了一個包含品牌色、灰色、輔助色的調色板，但僅有這個調色板不足以支撐我們流暢、無障礙的協(xié)同工作。日常工作中，“這里我用哪個藍色？”“這里我用哪個灰色？”“開發(fā)同學能否快速的變更某些元素的顏色？”等等問題層出不窮，建設系統(tǒng)的協(xié)同工作流迫在眉睫。
HIG強調不要在APP中使用“硬代碼”，即十六進制色值進行編碼，但前期我們構建的調色板僅有色值，這種硬代碼應用到app中導致項目效率低下，維護也會成本激增。
于是在騰訊文檔中，我們開始采用顏色變量（color token）和主題（theme）來管理顏色，顏色變量（color token）基于任務（role）、主題（theme），為UI中的任務指定十六進制代碼的色值（hex value），以弭平設計師之間、開發(fā)與設計師之間的溝壑，將顏色變量（color token）嵌入設計組件中與開發(fā)代碼形成聯動，便于開發(fā)利用程序中的變量來做全局修改，橫向提升團隊的協(xié)作效率。
所謂顏色變量，通俗的意思就是可以將一個顏色按任務用途去抽象，抽象成一個有命名的顏色樣式，這個顏色樣式就是顏色變量。
在設計或者代碼中，可以通過修改這個顏色變量的值來進行全局顏色的更新。例如，我們現在需要給button一個顏色，不要將其寫為 #1E6FFF這樣的色值，而是將button的顏色指定為命名是Fill-01的顏色變量， 如果有重大版本更新，僅需將顏色變量Fill-01的色值更新，即可實現全局顏色的高效更新。如果在不同的主題下（例如淺色/深色模式）button有不同的顏色表現，顏色變量Fill-01可以在不同主題下，映射不同的十六進制色值。這就是我們建設協(xié)同工作流的的基礎邏輯。
調色板的各個色值（hex value）是最底層的基礎樣式，我們將色板上的顏色進行規(guī)則化命名，以方便后期將其引用到顏色變量中。
騰訊文檔包含核心藍色、藍灰色、中性灰色及其他輔助色，按照顏色屬性，將其命名為：Primayblue、Gray、Grayblue、Purple、Indigoblue、Acidblue、Cyan、Greenblue、Yellow、Orange、Red，并在命名中加入色階后綴。
*騰訊文檔調色板命名圖表
1、 從調色板中選擇合適的顏色并測試
從調色板中根據UI中的任務挑選合適的顏色并進行可用性測試，做具體任務中顏色選擇的最優(yōu)解。
例如，我們需要選擇一個藍色作為鏈接色，作為文本，對比度必須達到4.5:1以上才符合WCAG2.0的可用性標準。經過測試我們選擇了primayblue-02作為鏈接色。
騰訊文檔的界面中，灰色系列占主導地位，起著至關重要的作用，為產品界面創(chuàng)造結構、表達邊界、建立信息層次。在調色板中，我們選擇了兩種灰色：中性灰色和藍灰色，來支撐系統(tǒng)的設計。藍色系列是騰訊文檔產品和體驗的主要動作顏色。
同時我們也使用了其他顏色以滿足一些沖突性任務（警示等）的顏色使用，這些顏色需要謹慎、有目的地使用。
經常會有設計師問，“這里我能用這個灰色嗎？”出現這種問題，根本上還是顏色使用規(guī)則定義的不夠清晰，含混的口口相傳的規(guī)則會導致更多的混亂。于是，需要我們根據任務和使用場景把顏色的使用規(guī)則清晰的定義。
首先定義在界面中占主導地位的灰色、藍色的使用規(guī)則。
在騰訊文檔中，藍灰色與品牌藍共同建立品牌印象，由此，藍灰色主要應用于與風格相關的場景。包括：圖標色、填充底色及大面積的背景色等。
中性灰色主要應用于一些全局系統(tǒng)行為。如：文本、分割線及交互反饋hover、press等場景。
品牌藍色主要應用于系統(tǒng)中的各種行為，如藍色圖標、button、文本鏈接等。
其次定義在界面中用于警示、狀態(tài)提醒的其他顏色的使用規(guī)則。
紅色主要應用于系統(tǒng)中需要警示的場景，如紅色警示圖形、錯誤文本、紅色tag等。
在騰訊文檔中，會針對不同的任務應用不同的顏色，如左滑操作、成功提示、高亮顯示等。
在騰訊文檔中，不同的品類有不同的基準色。
定義了顏色在系統(tǒng)設計中的使用規(guī)則后，我們需要根據顏色變量的使用用途對其進行語義化命名。一套好的語義化命名規(guī)則需要易于維護且具備可拓展性，如果只是將調色板的色值命名為 blue-01、blue-02... ，語義化的收益并不明顯。哪天設計團隊需要調整品牌風格，或是蘋果又掀起什么新潮流，把所有命名為 blue_x 的變量改為 gradient_serenity， 對于開發(fā)來說也是巨大的災難。
根據 HIG 的建議，語義化命名不應該描述外觀或者色值，而是指明這個顏色的任務用途——標簽 Labels，分割線 Sepatators 或者填充 Fill。
在思考如何賦予顏色語義化的命名時，設計師也需要用更概括和結構化的視角來看待界面設計，同時也需與開發(fā)同學達成一致，使用同樣的命名，滿足以更好地維護一套收斂和統(tǒng)一的設計語言。
在騰訊文檔中，顏色的任務用途定義為為以下幾種：背景色 Background、文本色Text、圖標色Icon、分割線 Border、透明填充 Transparent fill 、實色填充 Opaque fill 、默認交互反饋 Feedback、語義 Intent。統(tǒng)一使用ultrastrong、strong、medium、weak、ultraweak作為后綴來表達顏色強度。在需要更明確的用途說明的任務中，直接描述其用途，例如：hover，pressed、disabled等。
以上種種，最終目的在于建設團隊的協(xié)同工作流，將顏色變量（color token）嵌入設計組件中與開發(fā)代碼形成聯動，便于設計利用變量及組件、開發(fā)利用程序中的變量來做全局修改，橫向提升團隊的協(xié)作效率。
在設計系統(tǒng)中，顏色變量屬于底層的設計原子，需要將其生成為顏色變量并嵌入到設計組件中，便于設計內部使用。我們將已根據任務用途命名的色值，生成figma中的顏色樣式（color style），后續(xù)無論是進行組件的設計，還是項目的設計，都可以直接賦予設計元素明確的顏色樣式。
我們生成了一個面向內部、外部的顏色變量表，進行顏色變量的說明和信息的同步，沉淀落到實處的資料文檔。（此處推薦使用騰訊文檔，多人協(xié)作實時溝通～）
最終形成了設計組件庫與開發(fā)組件庫的聯動，構建了一個協(xié)同工作流，橫向提升工作效率。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( m.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
動效是用戶體驗的重要組成部分，也是產品調性的重要體現。如今動效設計也有了更多的解決方案，如Framer、Principle、Flinto、Protopie等，這些軟件在制作交互原型時，確實有更輕量便捷的優(yōu)勢，但效果也有一定的局限性，或者要求使用者有代碼基礎，比較適合有針對性的人群。而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了，它將很多常用操作整合到一個面板上，并且可以跳過繁瑣的常規(guī)操作。包括快速調整曲線、定位圖層錨點、克隆關鍵幀、制作回彈效果、錯位圖層序列、生成多圖層空對象等。這里演示幾個常用功能。
快速調整速度緩動曲線：
不用再通過輸入表達式，做出操控便捷又靈活的回彈效果：
錨點是元素變換時的基準點，更改錨點也是高頻操作。Motion Tools不僅可以快速修改圖層錨點，并且支持多圖層批量操作：
官網鏈接：https://motiondesign.school/products/motion-tools/
新轉成的預合成尺寸總是占滿畫布，不方便做動畫且干擾其他圖層選擇。手動調節(jié)的話會影響元素的位置、位移等屬性，Auto Crop很好地解決了這個問題，能夠將預合成裁切至適合當前元素的尺寸。
官網鏈接：https://aescripts.com/auto-crop
Auto Sway能夠很便捷的制作頭發(fā)或者服裝飄動的效果，在日常運營設計中，讓你的人物快速變得生動靈活起來。
官網鏈接：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還提供完善的桌面預覽工具、性能監(jiān)測可視化、運行時可編輯等特點，能很好的打通設計與開發(fā)之間，從創(chuàng)作到素材交付上線的流程。
官網鏈接：https://pag.io/
Gif格式因為不支持半透明區(qū)域且容易有鋸齒，如今的實際開發(fā)中已經有了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系統(tǒng)為例，在以下路徑找到：
前往 \ 電腦 \ 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”文件復制到原路徑替換即可。
新置入一段想要循環(huán)的視頻素材時，很多人習慣將素材復制多次，或者通過時間重映射打上關鍵幀后在添加循環(huán)表達式。其實并不需要這么麻煩，在項目窗口右鍵對應的素材，選擇“解釋素材 → 主要”，在彈出窗口直接就可以設置素材循環(huán)次數。
雖然AE的全部快捷鍵可以寫滿長長一串列表，但在精不在多。實際使用時，其實只要記住一些常用的關鍵快捷鍵，就已經可以效率翻倍，享受“鍵步如飛”的感覺了。
以最常用的“添加關鍵幀”為例，在不使用快捷鍵的前提下，想要給對象添加一個“位置”關鍵幀，需要至少3個步驟：
而使用快捷鍵 “ Option+Shift+P ”，一步即可完成，并且不會展開不相關的屬性：
這對于一個工程里需要用到成百上千次的k幀操作來說，著實可以省下不少時間，可以說是不得不用的一個快捷操作。
秉持在精不在多的原則，整理出以下一些高效又常用的快捷鍵，親測好用哦！
因為作者是MacOS系統(tǒng)，所以下文中提到的 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
設置當前為工作區(qū)開始：B
設置當前為工作區(qū)結束： 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
設計再好的動效如果不能實際落地，那一切也只是徒勞，所以動效輸出在對接開發(fā)時非常關鍵。按照輸出和實現的方式不同，我們可以將動效分為兩種類型，一種是播放型動效，一種是交互型動效。
播放型動效是指在輸出時效果就已經固定的動效，滿足觸發(fā)條件后播放出來，過程中并不會有影響效果的元素。
例如常見的APP底部導航點擊效果，icon動效在用戶點擊時觸發(fā)播放，這個效果在輸出時就是固定的，不受任何其他因素影響，可以由設計師直接導出。
播放型動效有以下幾種比較常見的輸出格式：
Gif、Apng、Webp本質上都是將位圖進行壓縮和轉換，而Lottie則是基于代碼層面的動畫渲染，PAG則結合了兩者的特性。目前一般使用Apng、Lottie、和PAG就已經可以覆蓋大部分的輸出場景，是可以優(yōu)先考慮的動圖格式。
交互型動效是指變換內容跟我們的交互操作相關聯的動效，并且包含無法由設計師直接導出的元素，比如用戶的頭像、名稱等。
比如這個支付面板切換的效果，變換的元素中包含了用戶的余額和綁卡信息，這些信息是無法由設計師輸出的。
這種動效需要開發(fā)在代碼側還原。如果只是輸出視頻demo，開發(fā)同學很難將其中的細節(jié)（例如時間出入點、曲線速率等）還原出來。這就需要設計師有一份清晰的標注文檔，將動效的細節(jié)參數跟開發(fā)更好的明確下來。
一份規(guī)范的動效標注文檔，至少應該包含以下幾個方面，
觸發(fā)：在什么條件下觸發(fā)動效，例如點擊、雙擊、滑動、長按等；
對象：發(fā)生變換的對象，例如按鈕、列表、文字等；
屬性：具體變換的屬性，例如位移、縮放、不透明度等；
參數：換化屬性的具體參數，例如不透明度值從0到1；
時長：變換的起始時間點、持續(xù)時間；
曲線：變換的速率曲線，描述在固定的時長范圍內，速度是如何變化的；
以上圖的支付面板首次切換過程為例，我們的標注文檔是這樣的：
第一步定義好頁面的起始和結束狀態(tài)，并標明動效元素
第二步則是將各元素的運動細節(jié)用具體參數描述清楚
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( m.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
帳號作為用戶身份在互聯網產品中的投射，是用戶在產品中重要的身份信息。突出用戶個性風格的頭像信息可以促進用戶之間互動社交行為，提高用戶對產品的粘性。
帳號作為用戶身份在互聯網產品中的投射，是用戶在產品中重要的身份信息。我們可以通過用戶的頭像、用戶名、掛件等快速辨識用戶性格興趣喜好等特征。在用戶進行社交時，帳號頭像是最直觀、最快速的了解用戶的方式之一。識別性強的頭像信息可以促進用戶之間互動社交行為，提升評論區(qū)活躍度與氛圍感，從而提高用戶對產品的粘性。在百度APP中真實頭像占比較低，讓用戶上傳/拍攝圖片作為頭像，對用戶而言成本較高，并且存在圖片質量和內容監(jiān)管等問題。因此產品內部的推薦頭像就顯得尤為關鍵。
當前百度APP中默認推薦頭像設計過時，不能滿足當下用戶群體對專屬個人身份標識的訴求。本次目標就是提升用戶真實頭像占比、同時提升百度APP社區(qū)氛圍體驗，強化用戶個人屬性身份認知，由此來塑造帳號的真實感。
對默認推薦頭像進行重新設計，如何滿足百度APP龐大的用戶群體是設計中的重點難點。第一是需要滿足用戶不同的身份特征個性訴求，第二是設計需要滿足整體產品設計定位。
在上述前提下我們啟動了百度APP帳號人格化創(chuàng)新設計，進一步滿足了用戶對個性化的訴求，并提高用戶粘性。
一、需求洞察
首先是問題定位，目前僅有30%的用戶自定義真實頭像，相較于競品處于較低的狀態(tài)。并且默認頭像設計過時，氛圍感不?，體驗較差。本次目標就是提升用戶真實頭像占比、同時提升百度APP社區(qū)氛圍體驗，強化用戶個人屬性認知，由此來塑造帳號的真實感。
二、設計打法
確定目標后，圍繞真實感氛圍營造展開了一系列的發(fā)散。以業(yè)務、人群、人格三個維度進行切入；分析和探索后發(fā)現單純的業(yè)務和人群劃分較為局限。為滿足百度APP用戶群體各年齡層、多種性格等的訴求，最終確定為心理學人格方向，以心理學“榮格人格”為理論基礎進行展開。
心理學家榮格定義了人類基礎人格的12個主要類型。每種類型都有自己的價值觀、意義和性格特點，從性格中提取關鍵詞，分別篩選出有共性的、大眾熟知度高的動物形象來匹配12種人格。
三、形象設計
基于人格理論依據開始將動物具像化，經過大量的討論、草圖繪制、篩選和優(yōu)化。
草圖繪制確定動物形象基礎造型與特征。以天真者為例，為了表現形象俏皮、可愛的特性，兔子一邊耳朵折疊，并且選用圓潤的外觀，搭配臉上的腮紅。通過表情大眼睛，張嘴微笑來表達心理人格。
在繪制的草圖中選取最符合人物性格，并且用戶可以接受的可愛的沒有對抗性的設計。
將選定的草圖在三維軟件中進行模型制作。優(yōu)化模型布線并制作模型貼圖、燈光、材質，完成三維化制作。通過以上的設計流程完成12種人格的動物形象制作。
為了進一步提高IP形象的影響力，推動更多業(yè)務場景的應用。對IP頭像進行身體延展，打造專屬IP團體，進一步符合人格化定位，提升形象辨識度。
四、應用&收益
為了保證用戶選擇多樣性和不同的圈層喜好，除了12個動物形象，還提供了一系列實景拍攝照片，包括風景、藝術、生活、中國風等主題等來滿足用戶需求。
頭像設置頁面優(yōu)化升級，提升頁面容器屏效。將之前頭像尺寸減小并縮小間距，保證有限屏幕內用戶可以看到更多的頭像。并將頭像以分類形式顯現，方便用戶挑選符合自己喜好的頭像樣式。下方“拍照”和“從相冊選擇”入口樣式更新，突出拍照入口。
42個新增頭像已經在PASS源頭進行鋪設使用，在百度APP產品內、以及PC端PASS注冊環(huán)節(jié)做了相關的使用引導，保證用戶可觸達新版的頭像。
整套帳號人格化頭像設計完成百度系產品落地應用，助力全系產品提升用戶粘性。
除了百度APP端內場景運用外，還在端外場景提升IP形象影響力。2021年牛年春節(jié)推出牛年專享新春紅包。為金牛形象設計專屬新春服飾&場景，打造財神牛形象，以搭配農歷春節(jié)時間段，金牛、元寶、祥云相結合突出節(jié)日喜慶的氣氛。
帳號人格化頭像上線后得到了良好的反饋，用戶滿意度及推薦度遠超預期，得到了近90%的用戶反饋。同時通過相關的場景推薦綜合提升了百度APP用戶真實頭像占比，并且數據還在持續(xù)提升中。
一、提高用戶粘性
帳號頭像是真實用戶在產品中的身份標識，可以展示用戶的個人性格特點、興趣愛好。提升用戶在產品中的辨識度，同時提升用戶互動氛圍，提高用戶粘性。后期還可通過運營和推廣手段，形成具體用戶畫像，達成精準的內容推送。
二、持續(xù)供給裝扮資產
帳號人格化形象設計上線后得到了良好的用戶反饋及數據收益。我們會繼續(xù)思考IP形象的拓展以及產品中的深度應用。之后IP形象不止單單出現在用戶頭像設置上，會繼續(xù)精細化設計完成場景、裝扮等精細化設計。并應用于百度APP首頁皮膚、號主頁背景裝扮、頭像掛件等場景。持續(xù)供給百度APP裝扮資產，綜合
提升用戶吸引力&用戶粘性。
文章來源：UI中國 作者：百度MEUX
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( m.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
1.為什么這個配色會怪？
我們在畫線性圖標的時候，有時候會用深淺色配合，比如描邊用亮藍色和深藍色，像這種：
我們會覺得很和諧，為什么？雖然他們飽和度、明度不同，但他們有相同的色相，有一定的關聯性。
還有一種情況就是相同明度、飽和度，但是有兩種色相，比如藍綠，藍黃：
我們也都覺得很和諧，為什么？因為有相同的明度、飽和度，他們也有一定的關聯性！
但是如果是這樣兩個描邊配色在一起：
就感覺有些不和諧，就是因為色相、飽和度、明度沒有一項是有關聯的，所以就感覺不太搭。
像下面這位星友做的練習，也是一樣的道理：
這個配色多少有點不太和諧，我們放大一個圖標來展示下，比如這個：
這兩個配色，不論是在明度、飽和度、色相上都沒有關聯，所以看起來有點違和。
我們只要讓它稍微有點相同屬性，就會好很多，比如我們讓兩個顏色的色相有點關聯，都用藍色色相：
再比如讓兩個顏色飽和度有點關聯，都用比較灰的顏色，哪怕色相完全不同，都會比較和諧：
我們在做這種圖標描邊配色時候時候，一定要注意這個內在關聯性的邏輯。
當然，這里說的只是做圖標描邊時候的配色，視覺畫面配色，不在討論范圍。
2.為什么你的圖標看不清？
這個點之前其實有強調過，很多同學在做圖標的時候很糊，像下面這組練習：
其中一個很重要的因素就是投影問題，投影千萬不要加的太重，要和你主體物的顏色區(qū)分開，比如我的主體物是藍色：
然后投影也用這個藍色：
那肯定很糊呀，所以我們必須要用一個淡藍色：
直接降低透明度也行，沒有什么操作成本，所以投影千萬別再和主體物黏在一起了。
3.對比就能出來基礎的設計感
很多時候，我們的設計感其實只要做好對比就能出來，比如下面這組信息：
我們做一個大小對比：
再做一個粗細對比：
再做一個深淺對比：
然后再來一個景上添花的樣式對比，就是數字來一個特殊數字：
這其實就算是比較穩(wěn)的一個效果了。
我們可以看一些界面：
他們里面也是用了這樣的對比，比如大小對比、樣式對比、深淺對比，再來點小圖形等等。
所以，一定要善用這些對比，讓你的設計更有層次，更有沖擊力。
4.平時多積累圖形的布爾運算
平時在練習圖標的時候，大家一定要多積累圖形的布爾運算，以備不時之需。
比如火箭的外輪廓，當頭部比較圓潤的時候，我們可以直接用橢圓來做：
如果頭部比較尖的時候，我們可以用兩個橢圓相交切，然后再切：
像這樣的形狀，我們不僅可以做火箭頭，還可以做魚的外輪廓等等:
還可以做眼睛的外輪廓：
多去聯想，多去實踐，當腦庫存達到一定量，我們就可以得心應手了！
文章來源：UI中國 作者：菜心設計鋪
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( m.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
什么是瓷片區(qū)
由運營板塊拼接而成，視覺上像一塊塊瓷片，靈活性高。適用于各種運營模式，具有較高的轉化率
卡片布局
瓷片的外容器排版
單行
優(yōu)點：節(jié)省屏效，日常營銷為重點業(yè)務留白
缺點：坑位有限，三個以上時營銷氛圍設計受限
左右排列
優(yōu)點：主次層級清晰，適合作為功能入口
缺點：坑位越多，越影響營銷氛圍；推行者需具備與各業(yè)務溝通的能力，協(xié)調入口之間的平衡
上下排列
優(yōu)點：個數不受限，易塑造氛圍感
缺點：高信噪比
圖文排版
瓷片區(qū)的常見排版通常用：滿版型、上下分割型、左右分割型、中軸型、傾斜型
滿版型
以圖片為吸引點，充斥整個瓷片區(qū)，文本內容居左排版為主，常見旅游、電競、資訊類
上下分割型
版面分為上下兩部分，分別配置文字或圖片，常見上文下多圖的形式，符合常規(guī)的閱讀順序，該場景下圖片更易引起用戶興趣，常見電商類
左右分割型
版面分割成左右兩部分，分別配置文字或圖片，常見左文右圖的形式，該場景下，文本偏理性，具有直觀的表述能力；圖片偏感性，輔助文本信息點綴模塊。常見資訊類、產品入口等
中軸型
常見垂直排列，信息更集中有活力
傾斜型
版面主體傾斜排列，常見對角線式形式。能承載更多的信息內容，頁面層級也更活躍
配圖風格
常見類型有兩種：實物與插畫
實物類
優(yōu)點：識別性高、更直觀、可復用、設計效率高，個性化推薦更精準
缺點：對圖片素材要求較高，個性化服務需要開發(fā)資源
插畫類
優(yōu)點：創(chuàng)意性強、可塑性強、具有趣味性、易形成品牌調性
缺點：抽象圖形不直觀，復用性低，繪制耗時，不易做個性化
Tips：設計師要牢記，設計時思考延展性和平臺風格如何為業(yè)務（運營、產品、技術）賦能，但長期影響CTR（點擊率）一定是由業(yè)務內容決定，避免背鍋。
文章來源：UI中國 作者：七月七咸
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( m.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
前段時間在年終總結會上，產品經理向設計團隊提出了一個問題：怎么證明你的設計是有價值的？如何衡量驗證Ui、UX的設計效果？
很多人都認為，公司的業(yè)績取決于產品和運營，和設計師關系不大，甚至有些公司想取消年終績效。那么，改如何判斷設計結果是否好壞，設計產生的影響又該怎樣被量化？
我相信回復肯定是：可以通過數據來找到答案。
但又會有新的問題出現：需要哪些數據可以驗證設計效果？又該怎樣通過數據來判斷設計的效果究竟是好是壞？
滿意度
簡單來說是用來衡量用戶對產品服務和體驗的整體滿意程度。我們都知道，要提高滿意度，要滿足很多個條件，比如產品功能、運行速度等。這里我們分兩個維度，用戶體驗質量和產品目標。
1）用戶體驗質量
用戶體驗指標可以從凈推薦值（NPS）來衡量，凈推薦值意為用戶是否愿意將產品推薦給身邊人的指標。凈推薦值是有一個公式：NPS值=推薦者所占比例-批評者比例。
9-10分（推薦者）：活躍度很高的用戶
7-8分（被動者）：對產品滿意但忠誠度不高的用戶
0-6分（批評者）：對產品不滿意的用戶
還可以通過反饋，來收集功能或界面的問題反饋比例，更直觀的評估用戶操作過程中的感受反饋，來進一步優(yōu)化迭代。
降低用戶的學習成本也能提高體驗質量，通俗的講，就是用戶對產品接受度和使用成本的高低，更偏向于產品和交互層面。
2）產品目標
簡單來說，就是希望產品上線以后，會達到什么樣的結果。
例如一個列表篩選功能，其核心目標是為了讓用戶在多維度混合排列里找到自己想要的目標群。
當用戶篩選后，找到了想要的信息且進入了目標頁面，說明指標已成功；反之沒找到想要的結果，中斷了操作流程，說明任務失敗。以此為依據，通過是否完成的維度來進行衡量，確定篩選按鈕到任務界面的UV轉化率。
結合上面的用戶體驗質量，來驗證設計需要注意哪些方面，關注哪些數據來達到目的。
活躍用戶數
通常觀察日活（DAU）和月活（MAU）就可以?；钴S用戶數用于衡量產品的用戶粘性，便于了解產品一段時間的用戶情況，了解產品的用戶變化趨勢。
日活（DAU）：一個用戶一天通過相同的渠道多次訪問產品，DAU仍只算一個；
月活（MAU）：在一月內多次訪問產品，MAU仍只算一個。
日活越高，說明有剛需的忠實用戶越多。月活越高，說明新增的用戶越多，但未必是忠實用戶。當然，活躍度的高低也需要根據用戶的停留時長有一定的聯系。如果只是打開產品而并沒有使用，其實這個數據的意義并不是很大。
用戶留存率
一般是衡量產品或功能的新用戶增長程度，對產品或功能的新用戶占比。這對于新產品或新功能特別有用。
提取數據的一般周期為1日、7日或者30日。日留存率通常用來衡量產品粘性；周留存率通常用于判斷產生的忠實用戶數；月留存率通常用于衡量版本迭代的效果。
如果產品做了更新迭代，并且提升了月留存率，而其他變量沒有變化時，說明此次迭代很成功。所以通過留存率可以很直觀的判斷產品的用戶粘性是上升還是下降。同時老用戶的留存率也需要關注，好的更新迭代不僅可以留住新用戶，還可以喚醒“沉睡用戶”。
完成率
衡量流程設計的合理性，通常用于產品中主要任務流程的內容，這里單指設計中操作流程的順暢度。
完成率是產品設計中重要的指標之一，完成率越高，產品的操作體驗就越好。
最后
數據只是有效驗證的方法之一，并不是萬能的。就如調查問卷一樣，都會有一定的局限性和不確定性，數據能明確看到結果，但不能說明具體原因，只能作為支撐來驗證設計師的想法或決定，但無法代替設計直覺、用戶研究和設計可用性。
文章來源：站酷 作者：UX設計幫
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( m.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://m.yvirxh.cn