一、項目背景
百度文庫APP是一個在線文檔分享平臺，上線已有十余年的時間，是一款名副其實的老字號互聯(lián)網(wǎng)產(chǎn)品。隨著互聯(lián)網(wǎng)的成熟以及年輕用戶的涌入，時代語境和流行文化發(fā)生了變化。年輕化設(shè)計已經(jīng)成為互聯(lián)網(wǎng)產(chǎn)品設(shè)計中不可避免的話題。在日常對用戶反饋的監(jiān)測中，我們發(fā)現(xiàn)文庫APP當(dāng)時的體驗已經(jīng)不能滿足用戶多樣化的需求。并且在體驗走查以及用戶訪談中發(fā)現(xiàn)，文庫APP的視覺風(fēng)格、交互方式、使用感受都存在老舊、不貼合流行趨勢的問題。
二、由內(nèi)而外，打造年輕化感知
通過對年輕市場進行洞察，我們發(fā)現(xiàn)年輕用戶對產(chǎn)品的需求是多維度的。不僅對產(chǎn)品的“顏值”有高要求，他們更追求使用時的便捷和流暢度。他們對新鮮事物的接受程度更高，也更愿意去探索產(chǎn)品新的玩法，與產(chǎn)品進行沉浸的情感互動。
所以此次年輕化改版不能只是對“產(chǎn)品的外表”進行升級，要從視覺、體驗進行全方位、多維度的年輕化升級。由內(nèi)而外的打造年輕化感知。
三、“老字號”互聯(lián)網(wǎng)產(chǎn)品的煥新之路
2.1 視覺升級-更好看
2.2 體驗升級-更好用
寫在最后
從UI設(shè)計誕生初期，設(shè)計師在屏幕上模擬現(xiàn)實世界的交互方式，用擬物化的設(shè)計風(fēng)格幫助用戶熟悉UI界面操作。到現(xiàn)在用戶對移動屏幕越來越熟悉，設(shè)計師們可以在產(chǎn)品設(shè)計中去嘗試更多的可能性。產(chǎn)品與用戶共同成長才是年輕化設(shè)計的意義。
未來，我們也會保持好奇心和探索欲，不斷打磨產(chǎn)品體驗，與用戶共同成長。
感謝閱讀，以上內(nèi)容均由百度MEUX團隊原創(chuàng)設(shè)計，以及百度MEUX版權(quán)所有，轉(zhuǎn)載請注明出處，違者必究，謝謝您的合作。申請轉(zhuǎn)載授權(quán)后臺回復(fù)【轉(zhuǎn)載】。也歡迎加入MEUX視覺/交互/運營設(shè)計師，可投簡歷至MEUX@baidu.com (注明信息獲取來源如：站酷）
關(guān)于我們：
MEUX,百度移動生態(tài)用戶體驗設(shè)計中心，負(fù)責(zé)百度移動生態(tài)體系的用戶/商業(yè)產(chǎn)品的全鏈路體驗設(shè)計。服務(wù)的產(chǎn)品包括百度APP、百度搜索、百度百科、百度貼吧、百度商業(yè)產(chǎn)品等。MEUX以「簡單極致」為設(shè)計理念，創(chuàng)造極致用戶體驗的同時賦能商業(yè)，推動設(shè)計行業(yè)的價值和影響力，讓生活因設(shè)計而更美好。
作者：百度MEUX 來源：站酷
藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
今天來改一個海報分享頁的設(shè)計，這是最初的設(shè)計：
修改后：
我們分成兩大塊說說本次改稿思路：
1. 海報設(shè)計
2. 海報分享頁的整體設(shè)計
第一部分 海報的設(shè)計
現(xiàn)在海報上的內(nèi)容排版看著挺隨便的，沒有啥設(shè)計感。
海報上要放的內(nèi)容不多：用戶頭像、名稱、日期、文字、品牌信息（logo）
一開始我也沒有太多的修改靈感，但是在看了許多參考圖后，發(fā)現(xiàn)幾個共通點，這幾點完全能夠運用在類似的設(shè)計上，讓海報更有設(shè)計感。
第一點：數(shù)字/日期的特殊處理
特征總結(jié)下來就是這三點：
1.對某個數(shù)字單獨用不同的字體
2.數(shù)字用更大的字號
3.與其他文字結(jié)合而出的特殊排版
用以上的思路，改一下我們的稿子：
這樣是不是好一點？
第二點：海報采用實景的照片，那文字最好用白色
觀察類似的參考，幾乎99.99%的實景圖上的文字都是采用白色。
不排除有的分享卡片用的淺色圖、黑色字。
觀察得知：
淺圖黑色字，重在強調(diào)文字內(nèi)容，對比更強烈,而深圖淺色字，文字更融入畫面，更溫和一些.
這里我們更想采用淺色的文字：不用那么強調(diào)文字，重在讓畫面更和諧。
第二部分 海報分享頁面的設(shè)計
第一點：遮罩用什么方式？
除了海報本身之外，整個分享頁面也是要設(shè)計。
大多以背景圖疊一層毛玻璃遮罩，看起來更有質(zhì)感。
這種設(shè)計相比于純黑色透明度的遮罩方式要更有層次感，不至于那么平，也讓頁面更聚焦在海報本身。
第二點：分享彈窗的幾種形式
a. 將分享方式一屏全擺出來
適用于用戶可分享的方式 不是那么多的情況，否則會占據(jù)畫面太多高度。
b. 側(cè)滑
用戶可分享的方式很多的話，可以采用側(cè)滑。缺點是需要用戶滑動才能看到后面的功能。
在這里我們只有五個分享平臺，用不著再側(cè)滑，直接都擺出來就行。
第三點：取消按鈕的形式
a. 底部按鈕：更容易操作關(guān)閉
b. 海報上部的“陰暗角落”：更不容易點擊，相較也不那么容易被發(fā)現(xiàn)。
究其原因可能是，產(chǎn)品想讓用戶去分享，不想讓用戶很快就離開這個頁面。
取消按鈕也用不著那么強調(diào)，修改后：
c. 分享彈窗的右上角：不如a更易點擊，但比b好點
最后一點：除非是分享長圖，否則海報最好一屏就展示完。
這也是我之前忽略了的一點，導(dǎo)致做出來的海報展示不全。
總結(jié)
很多的 APP 都有海報分享功能，這次看了許許多多的類似設(shè)計，并且把通用的點，總結(jié)分享給大家，我總結(jié)的這些，希望能對你有幫助！～
藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
作者：花菜 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
這些天遇到了些問題，在進行視覺設(shè)計的時候，老是覺得自己設(shè)計上差點意思，總覺的哪里不太滿意。
也不是不好看，就是覺得還能夠設(shè)計得更加深入些，不管是從板式、字體、圖形、顏色等方面。
為了找到解決的辦法，我不斷的去欣賞別人的作品，從站酷到behance，從behance到各類獲獎作品。
嗯...為什么別人能夠有這么新穎的設(shè)計想法？我總結(jié)來幾點大家。
這是世界三大平面設(shè)計之一岡特·蘭堡的作品。
這是不是會給你一些靈感？我第一眼感覺這有點熟悉，似乎在別人的作品中運用過這種版式、元素。
在這版設(shè)計中，與岡特·蘭堡的作品相似之處就有：黃底黑字的橫條和藍色調(diào)的背景，再結(jié)合一些設(shè)計圖形，就能產(chǎn)生出一種新穎的設(shè)計風(fēng)格。
就是在大師的視覺中提取元素靈感進行轉(zhuǎn)化，運用在我們的設(shè)計中會有不一樣的視覺體驗。
我們接著看他的其他作品。
這張作品就能給我很不錯的靈感，把想要突出的地方用強烈的對比手法進行設(shè)計?；蛘邔⑾胍怀龅脑剡M行特殊化處理。
類似于這樣的作品。
當(dāng)靈感有限的時候，我們就可以靜下心來分析一下其他大師的作品，認(rèn)真觀察大師的作品，有哪些地方是可以提取靈感出來。
再結(jié)合自己的設(shè)計讓其提高升華，讓自己的作品耳目一新，使作品獲得新生。
保持這種發(fā)掘思維去分析作品，久而久之你就會有源源不斷的靈感浮現(xiàn)腦海里。
你走你的陽關(guān)道，我過我的獨木橋，反其道而行，雖然在國內(nèi)市場不太友好，但是嘗試一下走獨木橋的感覺，是否會帶給你不一樣的反饋。
特立獨行的視覺，做出差異化會給人們一種新穎的視覺觀感，就會吸引用戶，就比如喬布斯手下的蘋果產(chǎn)品，打破了當(dāng)時對電子產(chǎn)品的認(rèn)知，且對細(xì)節(jié)的把控極致到位。
人們其實都有視覺疲勞，長時間的保持這種風(fēng)格，難免會讓人覺得平庸，突然出現(xiàn)的新穎視覺或想法，就能夠打破這種局面。
好比這個官網(wǎng)，首頁第一屏在我們印象中就是一個banner，在我們做網(wǎng)站的時候就認(rèn)為第一屏就是應(yīng)該放個banner在那里！
我們就好像思維固化了，第一屏就非得是個banner嗎？我們可以根據(jù)企業(yè)的屬性進行判斷，我們是否還有更優(yōu)的方案，盡可能的賦予設(shè)計靈魂。
類似于這樣的首頁是否就是反其道而行呢？與同行就拉開差別了呢？自己品牌更加深入人心呢？
比如一個正常的首頁，在開始設(shè)計時，最頂部的是導(dǎo)航欄，導(dǎo)航欄中最左邊是一個logo，其次在右邊是產(chǎn)品介紹等等...
我們有沒有想過為什么會這么布局？我們可以反問自己：這種布局是最合適的嗎？最好看的嗎？還有沒有更加合適的方式？
這種方式把logo放中間突出品牌就挺不錯的。還有一些把導(dǎo)航欄折疊起來的。
剛開始我們是這樣布局的，這就很普通沒有做出差異化。
我們是不是可以把文案進行精細(xì)處理，提取重要的詞句，把他們放大，要有視覺沖擊力，重要的元素再次放大！
這樣布局方式就新穎很多，突出了主要文案，加強了視覺沖擊，又加深了品牌印象。
沒有新穎的想法往往是自己的思路、思維還沒有打開，開始進行視覺設(shè)計的時候：選擇這類行業(yè)自己認(rèn)為還不錯的視覺方向，開始進行視覺輸出。
那就錯了，假如開始設(shè)計APP，只找一些APP的視覺稿那肯定是不夠的，風(fēng)格就比較單一，你的視覺參考都不夠豐富，怎么能夠做出讓人眼前一亮的風(fēng)格！
我們不妨跳出圈子出來觀察！
可以去看別人品牌設(shè)計的、數(shù)字藝術(shù)設(shè)計的、圖形設(shè)計的、包裝設(shè)計的、服裝設(shè)計的甚至產(chǎn)品設(shè)計的都可以。有可能是某一個小地方讓你有所啟發(fā)。
大量的看，覺得很好的視覺就思考：我們的視覺是這樣的會不會更好！
就比如這張視覺稿，色彩很艷麗，顏色跨度很大，有黑色的粗線，如果把這風(fēng)格運用在APP視覺上會是怎樣的效果？
看到一張足夠吸引你的視覺稿，就想想如何轉(zhuǎn)化到工作中去，那可能就會有不一樣的視覺風(fēng)格。
所以在設(shè)定風(fēng)格時，
不局限于同行。
不局限于風(fēng)格。
打開搜索范圍，讓頭腦風(fēng)暴更猛一些。
做設(shè)計不是完成任務(wù)，所思考的是多方面的，好的設(shè)計是得花很多心思的；得保持冷靜，讓自己放松，著急或者有壓力的心境下你的思緒是亂的，根本就做不了設(shè)計。
所以有時候做設(shè)計得臉皮厚一些。
再者平時的審美積累是非常重要的，這個就相當(dāng)于你的底子，有底子往上爬的速度也會快一些。
做到這些你就離大師不遠(yuǎn)了！
最后，設(shè)計是永無止境的探索！加油共勉。
藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
作者：橙汁 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
大家平時多的界面應(yīng)該都是常規(guī)類型的居多，應(yīng)該很少會接觸到游戲類型的界面設(shè)計吧？哈哈。今天就給大家分享一個游戲類型的排行榜界面，看看是怎么做。和咱平時的又有什么不同呢？
先來看看效果：
確實和普通頁面還是有很大差異的哈，可以發(fā)現(xiàn)所有的模塊更風(fēng)格化，也蘊含了光影細(xì)節(jié)在里面。
這樣一張界面細(xì)節(jié)很多，我們今天主要講講1、2、3名的頭像框怎么做出等級差異。
首先我們就要先明確游戲風(fēng)格的界面和普通界面有什么不同，特點有哪些，造型、光影、質(zhì)感等等。
明確了才能動手去執(zhí)行。
大家平時應(yīng)該也會遇到很多排行類的需求，需要做出等級感。那是如果如何表現(xiàn)等級差異的呢？我主要是從以下三個點去推進，分享給大家：
2.1顏色
·主色：
首先就是三個等級的顏色差異
比如第一名最尊貴，我們就可以選用和背景色對比最強烈的金色去表現(xiàn)。
金色本身也帶有尊貴感。
第二名和第三名的顏色就可以選用背景的類似色或者同類色比如紫色和藍色，讓它們在視覺上天然的弱化下去一個等級。
·微漸變：
采用微漸變的形式，讓顏色更豐富，不會顯得很平，同時靠顏色的變化也能表現(xiàn)出輕微的質(zhì)感。
2.2復(fù)雜度
第二點就是復(fù)雜度了。
這個很好理解，就是越重要的，在造型上就會有越多的細(xì)節(jié)和層次。第一名層次細(xì)節(jié)非常豐富，第三名就簡簡單單的，從造型上表現(xiàn)出等級差異感。
2.3大小
比較常規(guī)的一個方法就是大小差異了，第一名最大，二三名一樣大就可以了。
明白了原理，怎么把細(xì)節(jié)做到位也是很重要的，我們拿第一名框的造型舉例，說說是怎么做出復(fù)雜度這么高的造型的。
3.1 重復(fù)
先有一個基礎(chǔ)圓，然后我們重復(fù)幾個。這一步很簡單，很多同學(xué)都會做。但也有很多同學(xué)到這就做不下去了。重點要學(xué)會后面怎么做。
3.2 圓的對比
全是相同的圓就會顯得很重復(fù)，沒有細(xì)節(jié)。我們可以調(diào)整圓線段的不同粗細(xì)、形式去增加細(xì)節(jié)。
把他們組合到一起看看。
有點那味了，有些同學(xué)做到這一步就不知道該怎么繼續(xù)了，可能會繼續(xù)加圓，這肯定是不行的。
3.3 豐富基礎(chǔ)形
如果我們繼續(xù)加圓圈可能又會變得重復(fù)了，這是因為我們的基礎(chǔ)形單一，所以我們要加入別的基礎(chǔ)性在畫面里去。
為了方便理解，我們加入一個比較直觀的形狀正方形看看：
正方形組合又組成很多三角形，造型一下就豐富了很多！所以基礎(chǔ)形狀的多樣性是我們豐富造型很重要的一個點哦。
本案例就加入了其它相對更復(fù)雜一些的基礎(chǔ)形，效果會更細(xì)膩一些，但道理是相同的。
4. 加入點綴和光影
因為是游戲風(fēng)格的，加上一點外發(fā)光更有感覺，再加上一些星星點綴，可以進一步提升豐富度。
看下頁面效果：
等級差異明顯，造型精致，整體還是比較滿意的。
很多時候，我們會發(fā)現(xiàn)，我們加的質(zhì)感有點平，比如像下面這種：
很明顯，這種地方就有點平：
原因就是因為“顏色掉層次了”，我們只需要在他的中間再加一層顏色，就可以讓它的質(zhì)感飽滿起來。
具體步驟就是，我們可以先給它加一些“形狀”然后進行羽化:
我們可以看下前后對比，這樣就不會那么平了：
一旦發(fā)現(xiàn)質(zhì)感有點平，就可以用這種“顏色掉層次”的思維去嘗試優(yōu)化！
這是一位同學(xué)做的質(zhì)感臨摹練習(xí)：
顏色有點太悶了，不夠透徹，我們先來把顏色弄的透一點，我用圓形來表示，首先我們的顏色不能太重，弄個小漸變：
這是我們的一個基礎(chǔ)，如果感覺明暗對比不夠，可以再適當(dāng)加強對比：
然后加一點反光，這是非常靈魂的一個步驟：
然后再加一點左上角的高光：
這時候我們再來加中間的暗部形狀，我們看原版的有一個很大的問題，就是中間的暗部愛心和背景有點糊在一起了：
就是因為兩層都是暗色，所以沒有區(qū)分開，所以這也是為什么我們把背景色調(diào)亮的一個原因，我們把中間的形狀加上去：
然后再來個內(nèi)陰影和邊緣光：
大功告成，我們再來對比下前后的質(zhì)感：
是不是好了很多。
有時候我們會覺得自己的設(shè)計有點主次不分，這種感覺往往和顏色有關(guān)。
下面兩個圓形，你會覺得那個更吸引你的眼球：
對，沒錯，肯定是第一個，因為第一個顏色的飽和度比較高，顏色比較純，所以更加吸引眼球。
那我們看下面跟米同學(xué)的啟動圖標(biāo)作業(yè)：
感覺所有顏色有點糊在一起，甚至感覺背景比形象還要吸引眼球，就是因為背景的顏色飽和度太高了！
當(dāng)跟米把背景的顏色飽和度降低時，我們再看下效果：
我們可以很清晰的把視線聚焦在吉祥物的身上。
所以我們在做視覺的時候，一定要注意，你的重點是什么，注意飽和度對比、明暗對比，千萬不要本末倒置！
藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
一、改版背景
QQ游戲中心是手Q用戶觸達游戲的重要場景，每天有海量用戶來此進行游戲相關(guān)的互動操作，隨著產(chǎn)品的功能迭代，體驗的逐步更新，用戶對QQ游戲中心也有著更多更強的訴求。
在2022年的研究報告《游戲中心核心價值及機會點定性研究》中發(fā)現(xiàn)用戶在游戲中心內(nèi)最為關(guān)心的是領(lǐng)取福利，通過在游戲中心獲得游戲相關(guān)的禮品道具幫助提升游戲體驗。同時用戶對游戲有著較強的社交感、成就感、沉浸感訴求。
隨著產(chǎn)品目標(biāo)的調(diào)整，游戲中心的功能也逐漸豐富化，除開領(lǐng)福利和找游戲，用戶可以在此消費游戲內(nèi)容、購買游戲道具、以及使用游戲相關(guān)功能等，用戶觸達游戲的方式變得更加多元，用戶的粘黏性也進一步提升，產(chǎn)品依勢也需要打造更好的產(chǎn)品游戲氛圍感和品牌印象來建立用戶口碑、提升轉(zhuǎn)化。
同時，以“生機”為設(shè)計理念的QQ，也進行了體驗上的版本迭代，游戲中心作為QQ內(nèi)的重要業(yè)務(wù)，也將跟隨緊隨其后完成體驗的更迭，提升用戶體驗、延續(xù)QQ品牌基因。
二、制定設(shè)計策略
對用戶、產(chǎn)品、設(shè)計的訴求進行整合后，梳理出本次改版的基本設(shè)計思路——在提升產(chǎn)品用戶體驗的基礎(chǔ)上，以品牌符號強化產(chǎn)品的記憶點，一方面從產(chǎn)品體驗上給用戶帶來更順暢體驗，同時以品牌圖形強化游戲感和沉浸感，提升用戶心中的品牌印象。
優(yōu)化基礎(chǔ)體驗：跟隨手Q“生機”設(shè)計理念和界面風(fēng)格，統(tǒng)一UI界面樣式 ；重構(gòu)內(nèi)容消費的信息容器，提升內(nèi)容消費效率；提升設(shè)計效率，以及打造更高效團隊合作方式。
打造品牌記憶點：通過品牌基因的植入、游戲氛圍感的增強，讓產(chǎn)品更具辨識度，同時加強產(chǎn)品的游戲?qū)傩裕瑥娀脩舻某两小?
游戲中心改版總覽圖
三、解決問題
3.1 基礎(chǔ)體驗優(yōu)化
游戲中心本次改版在體驗上的優(yōu)化聚焦在3方面：
① 煥新界面
隨著產(chǎn)品功能的擴充和迭代，游戲中心的界面風(fēng)格開始趨于參差，同時伴隨QQ設(shè)計規(guī)范——Q語言的更新，游戲中心的首要任務(wù)即完成界面風(fēng)格的統(tǒng)一。
· 統(tǒng)一風(fēng)格
以往的游戲中心，采用更為豐富多彩的設(shè)計語言，導(dǎo)致從手Q進到游戲中心較為強烈的割裂感。而本次改版中延續(xù)手Q的簡約透氣的風(fēng)格表現(xiàn)，通過色彩樣式、組件、圓角等設(shè)計要素將界面進行規(guī)范統(tǒng)一，保證體驗的一致性。
· 求同存異
在首頁、游戲、攻略這3個場景，界面的風(fēng)格向手Q設(shè)計語言靠攏，色調(diào)以手Q藍為主，以相對簡潔的界面風(fēng)格保證內(nèi)容傳遞的高效性。
同時根據(jù)業(yè)務(wù)訴求，也保持了游戲中心自有特色——在福利和商城tab兩個主場景下強化游戲氛圍感：采用3D圖形和多彩圖標(biāo)、界面主色調(diào)使用情緒更高的橙黃色，讓整體感知更符合產(chǎn)品的特質(zhì)。
除開界面風(fēng)格，圖標(biāo)的設(shè)計也融入了游戲中心的特色——保持基礎(chǔ)型與手Q圖標(biāo)一致外，同時將一些圖標(biāo)通過游戲化語義表達出來，使其更具趣味性和游戲感。
②重構(gòu)容器
· 優(yōu)化內(nèi)容消費體驗
內(nèi)容卡片結(jié)構(gòu)化
游戲中心的消費內(nèi)容來源豐富，包含問答站、小世界、頻道等多處內(nèi)容源，給用戶帶來海量內(nèi)容的同時，也導(dǎo)致了信息容器的冗雜，增加用戶的認(rèn)知負(fù)擔(dān)、降低瀏覽效率。
在前期和產(chǎn)品的梳理中，發(fā)現(xiàn)游戲中心的feed類型可以分為4大類，總計有21種樣式。為解決用戶的瀏覽體驗問題，對feeds結(jié)構(gòu)進行了結(jié)構(gòu)化整理，以流式布局將所有樣式整合為6個部分，基于不同消費內(nèi)容去排列組合feed類型，簡化產(chǎn)品邏輯，同時用戶更聚焦內(nèi)容閱讀。
· 提升游戲分發(fā)效率
游戲tab作為游戲分發(fā)的主要場景，改版前主要以橫向列表容器去承載游戲信息，用戶探索新游的效率較低，同時雷同化的結(jié)構(gòu)，容易瀏覽疲勞。
針對以上情況，在頁面設(shè)計上豐富了承載容器的樣式，采用高效率的游戲圖標(biāo)排列或者游戲合集卡片，提高了瀏覽效率，也讓用戶更容易命中自己鐘愛的游戲類型，不同的容器類型組合也讓整個瀏覽更有節(jié)奏，減少疲勞感。
③提升設(shè)計效率
游戲中心在以往產(chǎn)品功能的快速迭代中，由于規(guī)范和組件的不完善以及和開發(fā)同學(xué)協(xié)作模式的不確定性，讓產(chǎn)品界面的實現(xiàn)往往不盡滿意，無論是開發(fā)效率還是還原程度都受到一定的影響，最終導(dǎo)致用戶體驗的不完滿，所以本次的改版，提升設(shè)計的效率也是體驗提升的重要一環(huán)
· 統(tǒng)一設(shè)計規(guī)范
界面的基礎(chǔ)樣式和控件，和手Q基本規(guī)范保持一致，包括顏色、圖標(biāo)風(fēng)格、基礎(chǔ)控件、圓角、柵格等。同時基于業(yè)務(wù)的訴求，我們在手Q基礎(chǔ)上拉出一條規(guī)范支線用于游戲中心的設(shè)計——主要在基礎(chǔ)色、圖標(biāo)等拓展了更多樣式。
· 提升協(xié)作效率
以往黑夜模式的適配，開發(fā)和設(shè)計需要同時輸出和還原兩次設(shè)計稿，導(dǎo)致適配成本較高。在本次改版中，將新風(fēng)格頁面的組件token化，搭建起設(shè)計和開發(fā)之間界面樣式的映射關(guān)系，開發(fā)和設(shè)計只需還原一次設(shè)計稿，即可完成黑夜模式的適配，達到高效設(shè)計、快速上線迭代目的。
黑夜模式的上線，也提升了游戲中心的瀏覽感受，讓用戶的體驗更友好、更親近用戶，回歸Q語言親和自然的設(shè)計原則。
3.2 打造品牌記憶點
① 打造品牌記憶符號
QQ圍繞社交有效性、社交廣度與深度、社交動力等維度，打造一個積極向上充滿生命力的社交生態(tài)體系。生機的理念承載樂觀活力與積極延續(xù)，具備有序和精致的特點，也象征萬物發(fā)展所蘊含的生命力。——Q語言-設(shè)計理念
在游戲的世界觀中，“能量”經(jīng)常作為源動力元素以推動游戲進展，QQ游戲中心承接Q語言“生機”的設(shè)計理念，提煉衍生“能量”概念，以能量元素將生機理念具像化，賦予產(chǎn)品積極快樂充滿活力的品牌感知。
在確定能量作為核心關(guān)鍵詞后，對此發(fā)進行情緒版關(guān)鍵詞的發(fā)散，結(jié)合前文提到各方訴求，最終把關(guān)鍵詞鎖定到能量、游戲感、氛圍上。
② 品牌基因拓展
在對關(guān)鍵詞的發(fā)散階段，討論和嘗試了多種能將“能量”概念視覺化的元素，考慮到UI界面的延展性和可用性，最終把可視化元素鎖定在寶石和光上——寶石造型上相對簡單，光在動畫塑造上能擁有多樣豐富的表現(xiàn)形式。
為契合概念的設(shè)定和后續(xù)的延展，我們把寶石定義為能量石。在能量石的設(shè)計上，特意營造出能量充盈、光感琉璃的視覺感受，造型上采用多面切割結(jié)構(gòu)，色彩上兼容藍色和黃色兩種色調(diào)，以匹配游戲中心的整體界面風(fēng)格。
除開主體圖形，也從其他設(shè)計維度去落地能量的設(shè)計理念：
能量之石
除開前面的基礎(chǔ)寶石，也設(shè)計了多種能量石的造型，并兼容磨砂質(zhì)感，以應(yīng)對不同場景使用。
在UI界面的運用
在產(chǎn)品的核心界面上，將能量石作為背景圖案使用，強化品牌和氛圍感；
和業(yè)務(wù)也進行結(jié)合——以能量石將商城的幸運值圖形化，讓品牌和功能直接連接起來；
把能量石材質(zhì)和游戲元素進行結(jié)合——王者皮膚墻功能內(nèi)，將游戲LOGO賦予能量石材質(zhì)，讓游戲和平臺品牌之間產(chǎn)生品牌上的關(guān)聯(lián)。
能量之石圖形在界面內(nèi)的運用
與3D圖形的結(jié)合
寶箱是游戲中心一個重要道具，每日有大量活躍用戶來游戲中心做任務(wù)開寶箱，開寶箱成為了產(chǎn)品觸達用戶的高頻場景。
因此對寶箱進行了設(shè)計，希望在高觸發(fā)場景加強用戶的品牌感知，強化游戲感。寶箱在造型上采用了和寶石一樣的切割造型，同時寶箱上加入了能量石，把3D圖形和能量石進行結(jié)合。
除開寶箱外，對業(yè)務(wù)內(nèi)常用的圖標(biāo)進行了3D化處理。
3D圖形在界面內(nèi)的運用
· 動效
在動效的設(shè)計上，也承接能量的設(shè)計理念，以光為設(shè)計靈感，設(shè)計了游戲感強烈，電光火石般的的動畫效果——能量光，用于界面內(nèi)UI界面和3D圖形動畫，強化整個產(chǎn)品的游戲氛圍感。
動效在界面中的運用
· 顏色
在界面顏色的使用上，主界面延續(xù)手Q的標(biāo)準(zhǔn)藍色調(diào)，包括控件、字色也與手Q統(tǒng)一，保證界面整體色調(diào)的延續(xù)性。同時基于業(yè)務(wù)訴求，拓展了情緒感知更強烈的“游戲橙”。
對于以內(nèi)容體驗為主的頁面——比如游戲中心的首頁、游戲發(fā)現(xiàn)頁、攻略頁，使用手Q的標(biāo)準(zhǔn)藍；在需要強氛圍和游戲感的頁面——游戲福利頁和游戲商城頁，采用游戲橙。
· 質(zhì)感
由于游戲中心內(nèi)多處用到的3D元素，對3D的質(zhì)感進行了規(guī)范統(tǒng)一。
材質(zhì)
考慮到UI界面的通用性，避免3D材質(zhì)的喧賓奪主，材質(zhì)風(fēng)格以簡單通用為主，顏色以界面主色調(diào)為基礎(chǔ)，漫射材質(zhì)多營造輕黏土的通用質(zhì)感；針對能量石的材質(zhì)，則采用光感通透的玻璃材質(zhì)。
燈光
燈光采用基本的三點布光，旨在表現(xiàn)物體的質(zhì)感、立體感和空間透視感。整體布光氛圍積極，友好，明朗，透傳QQ活力生動的品牌氣質(zhì)。
· 字體
游戲平臺內(nèi)，有著較多需要運營設(shè)計的場景，字體是信息展示的重要元素，選擇了造型感較強造字工房的逼格青春字體，作為界面內(nèi)的強調(diào)字體，更好的營造游戲氛圍感。
字體在運營活動和UI界面中的運用
四、總結(jié)
QQ游戲中心作為QQ用戶觸達游戲的重要途徑，用戶們在體驗鏈路上有著各式各樣的訴求。產(chǎn)品功能的多元化也讓用戶體驗必須追隨功能持續(xù)迭代。擁有幾億用戶的QQ，各類產(chǎn)品的統(tǒng)一優(yōu)質(zhì)體驗，也是“一切以用戶為中心”原則的必要體現(xiàn)。
如今人們出行都離不開手機，都通過手機接觸過互聯(lián)網(wǎng)地圖，手機地圖憑借著可手勢直觀操作、地圖可快速迭代、信息可實時更新的優(yōu)勢，形成了成熟的地圖交互體驗。在解析手機地圖的體驗設(shè)計前，讓我們先看看地圖的發(fā)展歷程。
地圖擁有著古老的歷史，記錄了人類對世界認(rèn)知的演進過程，經(jīng)歷過泥板、壁畫、羊皮、紙張等載體，依據(jù)使用和文化需要擁有著豐富多樣的美術(shù)形式。不同時期、材質(zhì)、美術(shù)形式的地圖見證人們認(rèn)識世界的過程。
隨著照相機和飛機的發(fā)展，出現(xiàn)了航空攝影測量技術(shù)，讓地圖的測繪精準(zhǔn)度達到頂峰。交通、旅游、印刷業(yè)的發(fā)展，讓紙媒地圖開始融入人們的生活，地圖的平面設(shè)計更是百花齊放，有具體也有抽象，讓地圖兼顧功能、美感、有趣。
再隨著衛(wèi)星影像、瓦片地圖技術(shù)和互聯(lián)網(wǎng)的發(fā)展，人們可以日常地使用電子地圖。受限于網(wǎng)絡(luò)速度的限制，矢量地圖應(yīng)運而生，在特定范圍顯示相應(yīng)的矢量瓦片信息，讓互聯(lián)網(wǎng)地圖的形狀趨向統(tǒng)一化。
iPhone革命性的觸屏體驗，通過手勢與地圖進行直觀自然的交互體驗，結(jié)合內(nèi)置GPS、陀螺儀傳感器，小藍點成為地圖定位的通用標(biāo)志，激發(fā)更多地圖的功能和創(chuàng)意。
二、手機地圖的創(chuàng)新體驗
手機地圖繼承了互聯(lián)網(wǎng)電子地圖的可快速迭代、信息可實時更新的優(yōu)勢，結(jié)合觸屏手勢操作后，大大的提升了地圖展示信息的維度。電子地圖從工具逐步被引入到各種垂類服務(wù)和社交娛樂中，這些場景也不斷豐富和完善著地圖的信息。
手勢交互讓地圖從移動到縮放都高效地動起來，激勵人們探索更廣的區(qū)域。更革命性的是讓地圖從平面到立體之間的順滑轉(zhuǎn)換，幫助人們更好的映射到真實世界。
可視化信息是互聯(lián)網(wǎng)地圖的主要優(yōu)勢之一，將數(shù)據(jù)轉(zhuǎn)化為可視化圖形，歸類在不同的數(shù)據(jù)層，可以單個或多個層級疊加在地圖上展示，傳達位置上的數(shù)據(jù)。
底圖是手機地圖的基礎(chǔ)，通常就是地圖本身，它承托著上面的可視化信息。隨著地圖可更自由地縮放，地圖本身的內(nèi)容不斷細(xì)化和歸類，在不同的縮放層級下，展示符合用戶查看場景的核心內(nèi)容。
觸屏手勢交互有別于搖桿、鼠標(biāo)、觸控筆等物理外設(shè)的控制方式，讓用戶在小小的屏幕對大范圍的地圖有更隨心所欲的操作，讓原本受矢量圖形限制的地圖有了更多層次、更豐富立面的信息呈現(xiàn)方式。
單指拖動
拖動是地圖最基本的閱讀操作，一般以用戶的定位為初始中心點，用戶可以有目的有方向地查看附近的地點。
單指劃動
當(dāng)用戶想快速翻閱時會撥走要略過的內(nèi)容，劃動模擬了這一行為。地圖被劃動后也會模擬物理世界以一定的摩擦力停下，向用戶展示地圖的新區(qū)域，是比拖動要快速的瀏覽方式。
雙指拖動縮放
物理控件只能讓地圖根據(jù)屏幕中心進行縮放，而觸屏縮放能讓地圖根據(jù)兩個指尖的中心點縮放，并同時位移，符合用戶空間操控認(rèn)知。
雙指劃動縮放
劃動縮放和劃動一樣，讓用戶以更輕量的手勢加速的縮放地圖，并以一定的摩擦力減速停止，讓用戶快速找到目標(biāo)位置。
單指快捷縮放
為了讓用戶能單手并可控地縮放地圖，不少地圖都設(shè)計了自己獨有的縮放方式。 zenly，通過屏幕兩側(cè)的邊緣，直接完成地圖的最大和最小縮放跨度。
snapchat拖動右側(cè)邊可緣喚起縮放滑塊，并使用emoji來表達距離，充滿幽默感。
騰訊地圖，通過劃動右側(cè)的滑塊，實現(xiàn)單手順滑地縮放，滑塊也支持劃動手勢。
百度地圖，通過點擊一個縮放控件，讓地圖以當(dāng)前中心點進行分段縮放。
無限循環(huán)的地圖
地球是圓的，可以無限巡航，一些應(yīng)用將縮到最小的世界地圖做循環(huán)處理，以呼應(yīng)地球的循環(huán)轉(zhuǎn)動體驗。
方向視角切換
在陌生的環(huán)境用戶未必能分得清楚南北方向，利用手機的陀螺儀，可以告知用戶正在面向的方向。定位按鈕的二次點擊，將地圖從南北向轉(zhuǎn)到用戶面向的方向，有助于用戶二次確認(rèn)自己的定位。
更多地圖使用了2D/3D視角的切換方式，2D是南北向的標(biāo)準(zhǔn)地圖，3D是用戶面向方向的地圖，幫助用戶更直觀地對應(yīng)物理空間。
旋轉(zhuǎn)方向
可通過雙指或陀螺儀旋轉(zhuǎn)地圖，地圖上的文字也做出相應(yīng)調(diào)整，保持水平、沿道路方向調(diào)整，以保證可讀性。
3D的旋轉(zhuǎn)也一樣，在保持水平和沿道路方向的同時，文字保持垂直。
當(dāng)縮小到足夠遠(yuǎn)時，用戶面向的方向意義就不大了，蘋果在縮小到一定范圍時，將地圖回彈保持南北向。
雙指拖動調(diào)整視角
地圖3D視角也支持自由調(diào)節(jié)，通過雙指平行的上下滑動，可以平順調(diào)整3D視圖鳥瞰的角度。
在地圖的最低視角做回彈處理，生動不呆板。
遠(yuǎn)近也能影響鳥瞰的視角變化，視角越低越接近平視，拉進時有俯沖的感覺。
四、可視化信息：生動呈現(xiàn)地圖動態(tài)數(shù)據(jù)
從古代開始，人們就已經(jīng)懂得通過繪制山脈、河流、海洋、建筑等對重要位置信息進行標(biāo)記，地圖本身就是一個信息可視化工具。 互聯(lián)網(wǎng)地圖最大的優(yōu)勢，就是能提供實時的信息數(shù)據(jù)。將數(shù)據(jù)標(biāo)記在相應(yīng)位置的坐標(biāo)上，并分別歸類在不同的層級，疊加在地圖上查看。
地圖的常用數(shù)據(jù)形式可大致分為：點、線、面、熱力圖等，一個地圖可同時喚起多種類型、多個圖層的信息內(nèi)容。
點數(shù)據(jù)
點數(shù)據(jù)是單個地理坐標(biāo)上的標(biāo)記，代表該位置上的信息，是地圖上最常用的數(shù)據(jù)信息。地圖通過不同的小圖標(biāo)來區(qū)分位置類型，使用頻率越高的樣式越簡潔，地標(biāo)建筑做形象化圖形標(biāo)識。
聚合圖在地圖上呈現(xiàn)也是點數(shù)據(jù)，它實質(zhì)是顯示一定區(qū)域內(nèi)的信息聚合，但不強調(diào)具體的區(qū)域。聚合圖可以避免因為該區(qū)域的點數(shù)據(jù)過多，在地圖上信息過于密集。
百度的充電樁地圖就是以區(qū)域聚合充電樁數(shù)量，根據(jù)縮放調(diào)整數(shù)據(jù)的聚合。
騰訊地圖的文博地圖也是聚合圖，并根據(jù)文物的類型做了快速篩選。
線數(shù)據(jù)
線數(shù)據(jù)在地圖上呈現(xiàn)為線性，一般都沿著可行道路展示信息。導(dǎo)航路線是最常用的線數(shù)據(jù)，它提供具體行駛路線方案，并實時展示線路行駛的進度與方向。
也有粗略表示進度的線路數(shù)據(jù)，如快遞的物流進度路線就不需要具體的實際線路，只需要示意大致進程。
街景地圖則僅展示有全景圖的道路范圍，不提供進度與方向。
面數(shù)據(jù)
面數(shù)據(jù)要展示地圖上的具體區(qū)域，疫情環(huán)境下出現(xiàn)了區(qū)域風(fēng)控需求，需通過了面數(shù)據(jù)畫出區(qū)域范圍。疫情地圖采用了聚合圖、面區(qū)塊兩種數(shù)據(jù)形式。
zenly使用了反向的面數(shù)據(jù)，根據(jù)用戶的行走記錄，將用戶走過的范圍擦亮，用戶未走過的地方是一塊彩色的平面，充滿娛樂感。
熱力圖
熱力圖以特殊的高亮梯度顯示地圖上區(qū)域的熱度，熱力圖的數(shù)據(jù)不會指向地圖上具體的位置，它能呈現(xiàn)熱度變化的趨勢。百度地圖用熱力圖直觀展示地區(qū)上的擁擠程度。
高德地圖的空氣質(zhì)量地圖，使用聚合圖作為空氣質(zhì)量評分，熱力圖作為空氣質(zhì)量范圍。
snapchat使用熱力圖來表現(xiàn)該區(qū)域用戶發(fā)布動態(tài)的熱度，引導(dǎo)用戶發(fā)現(xiàn)內(nèi)容，由于熱力圖不指向具體位置，能更好的保護用戶隱私。
熱力圖并不局限于面，路線也可以反映道路的熱度。Strava利用用戶的騎行數(shù)據(jù)，生成光點線路的熱力圖，可以看出哪些是熱門的騎行線路和必經(jīng)地點。
路況也是一種線性的熱力圖，路況使用按段測量的方式，熱力值的梯度相對跳躍。
讓數(shù)據(jù)動起來
地圖是安靜的，但真實世界是忙碌的，讓數(shù)據(jù)動起來，給地圖增添更多情感化設(shè)計，緩解用戶的等待壓力。
忙碌的商家
外賣小哥端午節(jié)雨中送餐
公交努力奔來
五、底圖：為更好呈現(xiàn)信息的色彩系統(tǒng)
手機地圖的底圖最常使用矢量瓦片地圖，因為數(shù)據(jù)體積小，在互聯(lián)網(wǎng)環(huán)境下讀取速度快。矢量地圖用幾何圖形來表達區(qū)域，不展示具體細(xì)節(jié)，因此需要通過顏色去傳達不同區(qū)域的屬性或功能。
人們對于顏色和環(huán)境是能建立一定的聯(lián)想的，如綠色想到大自然，藍色想到水，紅色想到警示。根據(jù)人們對色彩的聯(lián)想，給矢量地圖中不同屬性的區(qū)域進行配色，幫助用戶理解地圖。谷歌地圖就曾經(jīng)為不同類型的信息標(biāo)記出700多種顏色，最后簡化為25個顏色，形成了地圖的色彩系統(tǒng)。
工具類地圖應(yīng)用以地圖為核心基礎(chǔ)，對矢量圖形有最全面的歸類，因而擁有最豐富的配色系統(tǒng)。由于人們對區(qū)域功能的顏色聯(lián)想是相似的，各地圖廠商的標(biāo)準(zhǔn)地圖的配色都很接近。地圖用色素雅，才能讓多個顏色能和諧的同時存在，降低用戶的視覺疲勞，并能突出地圖上的信息圖層，讓用戶聚焦所關(guān)心的數(shù)據(jù)。
而一些垂直場景的應(yīng)用，地圖區(qū)域功能的描述相對次要，通常會對地圖的用色進行大幅度精簡。以打車應(yīng)用為例，地圖用色少且色調(diào)相近，突出核心的打車狀態(tài)信息顏色，同時體現(xiàn)應(yīng)用的品牌特色。
不少運用地圖的概念設(shè)計中，會更極致的使用單色系地圖，僅突出數(shù)據(jù)信息的顏色，充滿未來感。
六、未來的地圖
隨著網(wǎng)絡(luò)速度的提升，手機硬件的升級，順應(yīng)AR/VR技術(shù)的發(fā)展，地圖逐步進入3D和全真時代。蘋果地圖在現(xiàn)有的地圖的3D視圖下，已對地標(biāo)建筑賦予更多細(xì)節(jié)，并在夜間模式模擬了燈光效果。
3D地圖就像是虛擬世界中的基礎(chǔ)建設(shè)一樣，蘋果地圖添加精細(xì)地標(biāo)模型后，同時應(yīng)用到Carplay的導(dǎo)航中，在駕駛時可直觀看到與現(xiàn)實世界對應(yīng)的3D地標(biāo)。
谷歌更是提出“沉浸式視圖”的高保真3D地圖，使用圖像還原一座城市的面貌，為瀏覽一座城市提供了幾乎真實的鳥瞰視角。
同時全真模擬日照和天氣系統(tǒng)，和現(xiàn)實一樣模擬東升西落的光線方向，模擬晚上和雨天下的城市面貌。
隨著地圖的立體全真化，地圖的數(shù)據(jù)也將向空間延伸。相對全真地圖而言，人們本身就身置真實的地圖場景中，未來借助AR設(shè)備，人們無需對照地圖即可完成導(dǎo)航。
結(jié)語
地圖歷來是人們借助藝術(shù)的手法，以極具想象力的方式對世界進行再現(xiàn)，它遵循科學(xué)測量的法則，使用幾何的線條和形狀對地球的進行抽象化。地圖反映了制作者對世界的認(rèn)知，而現(xiàn)代的科學(xué)技術(shù)讓地圖呈現(xiàn)盡可能客觀。但地圖并非單純地呈現(xiàn)地球，而是呈現(xiàn)人們眼中的世界，它寄托著人們對美好生活的想象，更好的認(rèn)識、探索和規(guī)劃世界。
藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~——————————
工欲善其事，必先利其器。好的工具可以有效的激發(fā)設(shè)計師的靈感、提升設(shè)計師的效率。我們準(zhǔn)備做一個設(shè)計效率工具系列，整個系列將好的設(shè)計工具貫穿到完整的設(shè)計流程中，并結(jié)合日常我們使用的情況向大家做推薦。通常的設(shè)計流程分為日常的積累、研究分析、設(shè)計創(chuàng)作、測試評估、對外宣傳這幾個環(huán)節(jié)。此篇為綜述篇，之后的篇章會針對不同環(huán)節(jié)進行深入的陳述。
設(shè)計師日常除了應(yīng)對當(dāng)下的需求，每天可以拿出一定時間保持學(xué)習(xí)的習(xí)慣。不僅可以讓我們緊跟最近的設(shè)計趨勢、設(shè)計潮流、設(shè)計方法，也可以讓我們潛移默化中得到提升。
Panda幫助設(shè)計師不錯過每天的設(shè)計靈感和資訊，包括新的設(shè)計方法理念、流行潮流、也有一些新產(chǎn)品推出。我們可以把Panda替換Chrome主頁，每次打開瀏覽器頁面都可以隨時看到最新的設(shè)計資訊。一些英文的訂閱也可以用chrome瀏覽器的翻譯功能可以粗略查看。
地址：https://app.usepanda.com/#
全球頂尖創(chuàng)意內(nèi)容平臺，作為中國成立最早、最受歡迎的創(chuàng)意垂直網(wǎng)站，以 “Open Your Mind” 為宗旨，始終專注在全球創(chuàng)意、藝術(shù)、靈感、人文領(lǐng)域?qū)ふ易钣匈|(zhì)感的聲音。
我們總在生活中與「一瞬間的感動」相遇。Voicer的理念即是發(fā)現(xiàn)這「感動」， 將它傳遞給更多熱愛生活的人們。內(nèi)容包括創(chuàng)意內(nèi)容品牌、在線雜志等。致力于分享生活和設(shè)計之美。
地址：https://www.voicer.me
涵蓋設(shè)計商業(yè)思維、產(chǎn)品設(shè)計原則、設(shè)計系統(tǒng)等關(guān)于推動設(shè)計團隊前進的實踐讀物，同時提供PDF和有聲格式。
地址：https://www.designbetter.co
——————————
設(shè)計師在調(diào)研過程會研究用戶、記錄用戶的行為和需求，會使用一些高效的記錄工具。同時繁多的調(diào)研的信息需要匯總整理，協(xié)作整理，這里會推薦一些記錄和整理的工具給大家。
Noted 是一款將錄音和筆記相機相結(jié)合的軟件。我們做訪談用戶或做會議紀(jì)要的時候，經(jīng)常錯過記錄的內(nèi)容，如果通過一些軟件錄音的話，后期回聽需要比較多時間成本。Noted可以在記錄筆記的同時記錄輸入文字的時間點所對應(yīng)的錄音，輸入的每個字的時間點都會對應(yīng)到。當(dāng)內(nèi)容沒記錄下來時可以隨時跳到對應(yīng)時間的錄音進行回聽，方便在漫長的錄音文件中快速檢索。
重塑學(xué)習(xí)方式的閱讀筆記工具，更加高效閱讀書籍和學(xué)習(xí)，可以在閱讀時摘錄筆記，制作學(xué)習(xí)卡，提取關(guān)鍵詞，根據(jù)筆記生成思維導(dǎo)圖，梳理知識框架。非常適合閱讀專業(yè)書籍，閱讀論文以及復(fù)習(xí)。
地址：https://www.marginnote.com/chinese/home
一款功能強大的手寫筆記軟件，擁有多種筆記封面和紙張模板可以選擇，支持自定義模板，可以簡單處理圖片，可以導(dǎo)入pdf、ppt等文稿并做標(biāo)記，也適合做電子手賬。
地址：https://www.goodnotes.com/zh-cn
調(diào)研階段方便多人一起搜集資料和匯總，多人同時在線編輯，內(nèi)容實時同步。隨時隨地高效協(xié)作，輕松創(chuàng)作。
地址：https://docs.qq.com/home
功能強大的思維導(dǎo)圖軟件，極簡設(shè)計，流暢體驗，多種結(jié)構(gòu)圖風(fēng)格選擇，方便資料的匯集和思路的整理。
地址：https://www.xmind.cn
——————————
當(dāng)設(shè)計目標(biāo)確定時，接下來進行具體的創(chuàng)意設(shè)計。設(shè)計師除了通過腦暴進行發(fā)散方案以外，一些高效的設(shè)計工具可以讓我們事半工倍。
UI設(shè)計靈感庫，基于dribbble平臺精心挑選優(yōu)質(zhì)內(nèi)容，提高效率便捷，為設(shè)計師提供專項更好的靈感。同時支持郵件訂閱推送。
地址：https://collectui.com
Adobe color不僅從各個維度解決了我們的配色需求，同時也提供找圖需求。其中包含 9 種智能調(diào)色模式可以選擇。拾取主題色、拾取圖片中的漸變色、協(xié)助工具可以合理幫助檢查不同顏色的對比、探索behance趨勢。
地址：https://color.adobe.com/zh/create
圖標(biāo)動態(tài)效果庫，當(dāng)繪制的圖標(biāo)需要一些巧妙的微動態(tài)效果時可以參考。
地址：https://useanimations.com/index.html
當(dāng)插件特別多時候，F(xiàn)igmaEX極大的改善了Figma中使用插件的體驗，將插件可視化?？梢赃M行展開，同時顯示插件的名稱與圖標(biāo)?？梢酝ㄟ^拖拽調(diào)整插件的順序，調(diào)節(jié)高度。
地址：https://moonvy.com/figmaEX/
Autoflow｜流程圖插件
輸出交互設(shè)計稿的時候，方便快捷的在不同畫板之間連線，提升輸出效率。
地址：https://www.figma.com/community/plugin/733902567457592893/Autoflow
這是一個非常簡單實用的 Figma 插件，它可以幫你將任何形狀元素傾斜過來。
地址：https://www.figma.com/c/plugin/741472919529947576/SkewDat?ref=prototyprio
最棒最全的插畫庫，支持快速搜索，一鍵調(diào)整顏色。
地址：https://undraw.co/illustrations
一款免費的在線服務(wù)，它通過 AI 自動去除圖片中不需要的部分，只需要上傳圖片，等待幾秒鐘即可。用鼠標(biāo)把不要的部分劃掉，松開鼠標(biāo)就會閃幾下，被劃掉的部分就消失了，比如去水印之類的小東西，如果用 PS 的圖章，估計要十來分鐘，而用 Magic Eraser 就幾秒鐘，簡單易用，推薦使用。
地址：https://www.magiceraser.io
設(shè)計輸出后可以通過這個清單去做最后的檢查。網(wǎng)站列舉了一些通用場景（頁面、元素、流程、主題、品牌）下的基本設(shè)計要素?？梢詸z查你的設(shè)計在這些場景下是否符合規(guī)范。樣式、顏色、命名、易用性等是否合適。
地址：https://www.checklist.design/?ref=prototyprio
——————————
好的方案不是一蹴而就的，設(shè)計方案需要不斷的打磨和迭代。方案需要持續(xù)和用戶進行溝通和測試，才能得到完善的方案。也需要和開發(fā)工程師不斷溝通，以達到最佳的實現(xiàn)效果。
用戶測試階段方便高效的收集用戶反饋，一般用于定量的用戶測試。
地址：https://docs.qq.com/
一般的眼動跟蹤設(shè)備比較昂貴，使用繁瑣。這個名為鷹眼的眼動追蹤APP，可以通過手機前置攝像頭捕捉用戶在使用產(chǎn)品時的視覺動向。
地址：https://www.usehawkeye.com/?ref=prototyprio
覆蓋產(chǎn)品經(jīng)理、設(shè)計師、工程師協(xié)作需求。設(shè)計交付更輕松，有效管理和使用設(shè)計資產(chǎn)。
地址：https://codesign.qq.com/
在項目上線前設(shè)計師都會對最終的產(chǎn)品實現(xiàn)效果進行走查，以保證設(shè)計還原的準(zhǔn)確性，體驗的流暢性。這是一款視覺還原工具，幫助前端工程師在頁面重構(gòu)階段就能快速發(fā)現(xiàn)開發(fā)稿與視覺稿的差異，實時對比、實時修改，減少工程師與設(shè)計師的溝通成本，提升整體開發(fā)效率。 ：
pixeleye.暫未對外開放敬請期待
——————————
設(shè)計完成后匯報展示、產(chǎn)品的宣傳包裝等，提供更便捷優(yōu)秀的展示形式。
樣機的類型全面而且免費，綜合質(zhì)量很高。
地址：https://www.mockupworld.co
素材非常優(yōu)質(zhì)精美，有免費和付費的資源。
地址：https://www.ls.graphics/#UI
主要面向設(shè)計師群體，幫助設(shè)計師建立個人在線作品集。幾分鐘就可以建好一個作品集網(wǎng)站，提供精美模板選擇。最大的特點是易于操作，無需懂網(wǎng)頁程式，都能在建立一個網(wǎng)站。最重要的是你可以使用自己的域名。Adobe Portfolio需要收費。已訂閱用戶可免費使用。
地址：https://portfolio.adobe.com/start
此綜述篇大家有了比較整體的了解，在設(shè)計流程中每個環(huán)節(jié)，介紹了一些比較好用的工具，后續(xù)的設(shè)計工具系列文章會針對某一環(huán)節(jié)進行更深入的探索。
藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
作者：騰訊ISUX團隊 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
“效率一直是公共輿論中的一個重要話題：在古希臘人眼中，它是政治和社會運轉(zhuǎn)的方式；工業(yè)革命早期，亞當(dāng)·斯密將其視作提升生產(chǎn)力的強勁動力。”時至今日，它被奉為公共生活的首要目標(biāo)，效率升級實質(zhì)是廣義世界里生產(chǎn)力的一次革新。
科技和物聯(lián)網(wǎng)以看不見的方式正重塑這個世界，從生活到工作，科技把每一張有形的辦公桌移到了云端，讓每一場可能發(fā)生的對話跨過了坐標(biāo)的限制。技術(shù)開放地定義著我們所理解的現(xiàn)實工作環(huán)境，騰訊文檔以對效率協(xié)作世界新的理解重新歸來。
我們希望“讓協(xié)作更高效，讓創(chuàng)作更輕松?！?站在新舊交替的路口，是時候以全新的設(shè)計語言，讓工具退去冷冰的外殼，走進與智能隔空對話的新世界。
產(chǎn)品感知關(guān)鍵詞：
Phase 1
我們把騰訊文檔的品牌因子比做是架落與兩岸的橋，從時間和空間的角度，連接現(xiàn)在與未來。在這里，代表效率協(xié)作先進生產(chǎn)力創(chuàng)造的新世界，轉(zhuǎn)承著龐大信息流的無限可能性。希望在這里發(fā)生的每一次虛擬與現(xiàn)實間的交流都是如此貼近你。
在此，我們賦予這個新世界以“數(shù)字”之名為前綴：
在數(shù)的數(shù)字（number）里，從有限0到無限∞；在物的數(shù)字（digital）里，從有形到無形。
就像霍金所說，宇宙最根本的東西首先是空間，其次是物質(zhì)，再次是時間。因為物質(zhì)的存在和運動必須是在空間里進行。而沒有物質(zhì)，談?wù)摃r間是沒有意義的。
而在這個廣闊的效率世界里，由無形的空間結(jié)構(gòu)支持，答應(yīng)著無聲的時鐘….
關(guān)鍵詞的聯(lián)想：
連結(jié)、握手、相遇、構(gòu)建、樂高、晶體、方塊、魔術(shù)、火花、夢想、成就、有序、幾何、空間、數(shù)字、代碼、窗口
從聯(lián)想中提煉具有關(guān)鍵的隱喻和形式：
把關(guān)鍵性的隱喻抽象出來，找到表現(xiàn)形式，使其更簡潔純粹，更容易被組合
品牌關(guān)鍵詞
秩序是一切天體、物質(zhì)、時間、生命、形態(tài)和形式秩序狀態(tài)運行的最基本法則。
萬物有序，雖然呈現(xiàn)的現(xiàn)象千變?nèi)f化，但褪去復(fù)雜的外表，內(nèi)在規(guī)律卻是不變的。以更規(guī)整和原始的抽象基礎(chǔ)形為所有應(yīng)用元素的開端，以秩序作為布局的基本準(zhǔn)則。
正如我們騰訊文檔一直在思考的，尋找秩序中的效率，再從效率中找到變化的規(guī)律。
早在上世紀(jì)，透明性和通透感就追隨著設(shè)計的平面到立面。從沃德裝飾語言的中立性到密斯凡德羅建造的清晰，以形式的通透對內(nèi)容的冗雜，以材質(zhì)的純粹對結(jié)構(gòu)的多樣。
在這里，我們用“輕和透”來體現(xiàn)技術(shù)帶來的未來感，在畫面中敘述的更多是余白空間所帶來的無邊想象力。
“光從來都是為了它所照亮的事物存在而不是為了它本身?！?
流質(zhì)的光影和顏色是整體設(shè)計中氛圍的基調(diào)，用顏色之間緩慢的漸變預(yù)演空間中正在發(fā)生或者即將發(fā)生的故事。
我們用了色盤中相對沉靜的極光色系（藍紫綠），拓寬空間的邊界感。
與正在交融和變化的顏色中間態(tài)，一同隱喻了智能和科技作用下的每一次協(xié)作和創(chuàng)作的真實實現(xiàn)。
Metaphor Box 協(xié)作盒子，我們用一個變化的立方隱喻一個協(xié)作空間站。在這里有可能發(fā)生的是各種各樣的碰撞。思想的火花，創(chuàng)作的靈感，執(zhí)行的高效。這里有屬于一個也有屬于一群人的精彩。
最終我們將騰訊文檔的Logo圖形化，賦予Metaphor Box協(xié)作空間的概念。利用有序的幾何線條為空間背景構(gòu)圖。在原本的智慧的品牌藍基礎(chǔ)上，添加了一點靈動偏暖的漸變色，為整體畫面增添生命力及親和力。最終完善后應(yīng)用到官網(wǎng)、官網(wǎng)登錄頁、閃屏頁、空頁面的場景。
閃屏
在閃屏的延展中，我們基于大的品牌理念延展出兩個不一樣的方向。
A. 以騰訊文檔logo的形狀為視覺元素載體空間，向里呈現(xiàn)一個輕盈有機的未來世界。
B. 以騰訊文檔產(chǎn)品“協(xié)作盒子”的概念，立體的展現(xiàn)一個代表科技為基底，多方協(xié)同運轉(zhuǎn)的動力世界。
最終，我們選擇了整體畫面更為清晰，主體更為清透明確的主圖形。
調(diào)整細(xì)節(jié)后應(yīng)用到閃屏
官網(wǎng)首頁Banner是最直接、最具感染力的視覺傳達路徑，我們需要讓用戶在進入 docs.qq.com 即刻形成品牌印象，通過Slogan傳達騰訊文檔的產(chǎn)品價值，同時在Slogan的字段上添加了正在編輯態(tài)的光標(biāo)元素，體現(xiàn)文檔高效的協(xié)作能力，最終以響應(yīng)式的方式適配到移動端。
在官網(wǎng)的其他頁面，我們將品牌語言進一步落地。
在騰訊文檔空狀態(tài)的設(shè)計中，我們以幾何的ip形象為頁面穿插一個個不一樣的故事性敘白。傳遞騰訊文檔平易近人的智能語調(diào)。
在畫面的整體構(gòu)成中，我們增加了一些輕透的質(zhì)感元素，結(jié)合幾何形的整體圖形語言，讓畫面輕盈也豐富。
古爾德在《奇妙的生命》一書中寫道：“有些人覺得（人類是唯一智慧生命的）前景令人沮喪，我卻總為之感到振奮。我將它當(dāng)成是一個源泉，它帶來了自由，也帶來了道德上的責(zé)任?！毙实谋澈蟛恢故顷P(guān)于工作方式的改變，仍然需要不負(fù)所望：構(gòu)建責(zé)任。
我們在逐步進化騰訊文檔的整體視覺語言系統(tǒng)。后續(xù)我們將推出下篇，向大家展示騰訊文檔品牌在UI語言和其他品牌延展中的更多設(shè)計。
在這個快時代，精耕出自己的風(fēng)格，打造更舒適的用戶體驗，敬請期待......
藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
作者：騰訊ISUX團隊 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
2015年之后的中國互聯(lián)網(wǎng)，人口紅利、流量紅利逐漸退場。2019年遭遇第一場資本寒冬，上半年投資總金額同比下降了58.5%。也在2019年，“精益創(chuàng)業(yè)”、“精益數(shù)據(jù)分析”、“增長黑客”等一系列數(shù)據(jù)思潮開始流行。而UX設(shè)計師作為半個產(chǎn)品經(jīng)理，我們很容易將這股“數(shù)據(jù)熱”遷移到自己身上：每個UX設(shè)計師都要學(xué)數(shù)據(jù)分析了嗎？數(shù)據(jù)和設(shè)計是什么關(guān)系？天天盯數(shù)據(jù)會限制設(shè)計師的想象力嗎？數(shù)據(jù)到底要怎么用？……
過往，設(shè)計師一般不會把“數(shù)據(jù)”掛在嘴邊。我們提倡“以用戶為中心，打磨極致用戶體驗”，較少考慮成本和商業(yè)效益。
通俗來說，就是產(chǎn)品經(jīng)理負(fù)責(zé)“生意”，設(shè)計師負(fù)責(zé)“體驗”。以“造鞋”為例子，產(chǎn)品經(jīng)理做了市場調(diào)研，決定要生產(chǎn)兒童運動鞋，設(shè)計師負(fù)責(zé)設(shè)計“適合4-11歲的兒童在城市公園玩鬧”的鞋子應(yīng)該長什么樣、穿著它跑跑跳跳是不是舒服的。但是設(shè)計師不需要擔(dān)心運動鞋的銷量，產(chǎn)品經(jīng)理則要跟老板匯報銷量業(yè)績。
在紅利消退、產(chǎn)品同質(zhì)化嚴(yán)重和快速迭代的多重壓力下，UX設(shè)計迎來了更高的挑戰(zhàn)：僅憑主觀判斷“好不好用、好不好看”來打磨產(chǎn)品內(nèi)在體驗，不考慮產(chǎn)品的生存、增長和盈利，很難在行業(yè)立足。與此同時，隨著數(shù)據(jù)采集工具的日漸成熟，數(shù)據(jù)以“客觀”和“便捷”兩大特點，幫助我們更快獲得“設(shè)計的依據(jù)”。精益化設(shè)計是必然趨勢，而“數(shù)據(jù)分析”是精益化設(shè)計的手段之一。
沿用“設(shè)計鞋”的案例，UX設(shè)計師要在自己所在領(lǐng)域思考：在設(shè)計調(diào)研的過程中，我們用什么數(shù)據(jù)指標(biāo)來衡量這個兒童鞋好穿、好賣？在鞋進行批量生產(chǎn)前，我們有沒有數(shù)據(jù)資源支持我們研究父母/小孩對鞋子外觀的偏好、小孩運動時容易受到哪些物理傷害等等？如果有條件進行小范圍的數(shù)據(jù)實驗，我們?nèi)绾卧O(shè)計數(shù)據(jù)實驗來評估好穿好賣？
“理解任何事物都需要先對它進行定義，這樣才能夠在頭腦中清楚地知道正在討論的是這個東西，而不是其他東西?！狈浅Ｏ矚g美國經(jīng)濟學(xué)家Thomas Sowell在《經(jīng)濟學(xué)的思維方式》里說的這句話。
如果我們對“數(shù)據(jù)”下定義，那么產(chǎn)品設(shè)計語境中的“數(shù)據(jù)”具體是什么？數(shù)據(jù)是怎么產(chǎn)生的？
從數(shù)據(jù)采集手段來看，互聯(lián)網(wǎng)產(chǎn)品的數(shù)據(jù)來源主要有3個：二手資料數(shù)據(jù)、問卷調(diào)研數(shù)據(jù)和應(yīng)用埋點數(shù)據(jù)。
行業(yè)數(shù)據(jù)和競品數(shù)據(jù)一般通過二手資料獲得，包括商業(yè)交易數(shù)據(jù)、用戶群的態(tài)度和意愿、用戶輿論指數(shù)、競品的用戶規(guī)模和盈利狀況等宏觀數(shù)據(jù)。常用的搜索渠道有：百度指數(shù)、企鵝智酷、艾瑞、尼爾森、各大科技資訊平臺等。
我們可以將這些理解為“市場數(shù)據(jù)”，在立項期對產(chǎn)品方向有一定指導(dǎo)意義，能快速了解市場概況，也能幫助產(chǎn)品思考差異化定位的問題。
以“騰訊文檔為”項目為例，我們想提高騰訊文檔用戶創(chuàng)建文檔的成功率，通過模板創(chuàng)建文檔是關(guān)鍵路徑之一。研究用戶通過模板創(chuàng)建的路徑時，想大概了解用戶找模板時可能會在意什么。于是我們嘗試使用百度指數(shù)搜索“模板”、“文檔模板”、“PPT模板”、“Word模板”、“Excel模板”，從搜索量得知：PPT模板搜索量最高，符合我們的推測；Word模板內(nèi)容中，簡歷、合同需求量較大，而部分用戶只是想要好看的Word背景等等。雖然我們得到的有效信息不多，但我們能夠通過二手資料的方式，快速了解用戶需求的基本面。
問卷調(diào)研數(shù)據(jù)是通過向目標(biāo)用戶發(fā)放問卷獲得的，側(cè)重于收集人口學(xué)信息、用戶自述的歷史行為、主觀態(tài)度或意愿，比如用戶滿意度調(diào)查、流失用戶原因調(diào)查等。本質(zhì)上是通過建立假設(shè)、再進行抽樣統(tǒng)計的方法來得到用戶口述的答案。也就是，問卷傾向于聽用戶說了什么、而看不見用戶真正做了什么。嚴(yán)謹(jǐn)?shù)膯柧矸治鲆矔葘笈_數(shù)據(jù)，校驗用戶說的和做的是否一致，以清洗無效數(shù)據(jù)。
較之于問卷調(diào)研數(shù)據(jù)，我們想看“用戶做了什么”，則通過分析應(yīng)用埋點數(shù)據(jù)獲得。
“應(yīng)用埋點數(shù)據(jù)”也叫“埋點數(shù)據(jù)”、“前端頁面數(shù)據(jù)”，我們可以簡單理解為“通過技術(shù)手段獲得用戶在應(yīng)用內(nèi)（網(wǎng)站、客戶端、小程序等）的操作行為數(shù)據(jù)”。其背后原理是：用戶和界面發(fā)生交互，系統(tǒng)需要向服務(wù)器發(fā)送請求和返回請求，把這些請求預(yù)埋一段計數(shù)代碼，就能得到頁面的曝光數(shù)據(jù)和用戶的操作數(shù)據(jù)。
埋點需要產(chǎn)品經(jīng)理或設(shè)計師做好數(shù)據(jù)指標(biāo)的定義，跟開發(fā)工程師提前溝通，讓開發(fā)工程師在代碼中嵌入埋點。一個埋點由多個字段組成，規(guī)范地定義字段，有利于我們在數(shù)據(jù)平臺搜索埋點更方便。當(dāng)我們懷疑數(shù)據(jù)有效性時，也更方便排查埋點問題。
埋點類型可分為曝光埋點、操作埋點和時長埋點：
1. 曝光埋點可以捕捉頁面被展示的次數(shù)，可以是針對整個頁面，也可以是頁面中的某個區(qū)域。即我們常說的PV、UV。
2. 操作埋點則是在用戶對頁面某個區(qū)域（按鈕、卡片、提示條等）進行手勢操作（點擊、雙擊、長按、滑動等）時，進行打點記錄。對應(yīng)的，也稱之為某個操作的PV、UV。
3. 時長埋點是通過標(biāo)記以上兩類埋點、并計算時間差獲得的。比如，我們記錄用戶選取模板耗費的時長，可以通過離開頁面的時間（t2）-進入頁面的時間（t1）計算。而離開頁面則用點擊左上角返回按鈕、點擊具體模板等“離開”操作來核算。
基于以上3種原始數(shù)據(jù)，我們可以運算得出點擊率、功能滲透率、人均點擊次數(shù)、人均使用時長等具有對比價值的數(shù)據(jù)。
較之于二手資料和調(diào)研數(shù)據(jù)，埋點數(shù)據(jù)更加貼近用戶的真實表現(xiàn)，作為反饋指標(biāo)的靈敏度更高，可挖掘性更強，也能作為客觀衡量指標(biāo)引入到每一次產(chǎn)品迭代中。
設(shè)計師理解埋點的原理，有助于在數(shù)據(jù)采集環(huán)節(jié)跟數(shù)據(jù)開發(fā)更好地溝通，并提出合理的數(shù)據(jù)需求。另外，當(dāng)我們拿到一組數(shù)據(jù)，也需要從根本原理上去判斷數(shù)據(jù)的信度和效度，確保數(shù)據(jù)沒有質(zhì)量問題再進行下一步分析。
數(shù)據(jù)分析能力會在UX設(shè)計師的崗位招聘要求中被提及，但除了電商和廣告行業(yè)的數(shù)據(jù)化設(shè)計知識體系較為成熟，其他領(lǐng)域還在探索。另外，相比于市場營銷、產(chǎn)品經(jīng)理、產(chǎn)品運營等職能，設(shè)計師的分析框架是相對晚熟的。
實際上，我們很難從招聘廣告中歸納“具備數(shù)據(jù)分析能力的設(shè)計師”長什么樣，但我們期望這樣的設(shè)計師對數(shù)據(jù)的感知力強、分析邏輯清晰、數(shù)據(jù)經(jīng)驗豐富，對某個垂直領(lǐng)域的數(shù)據(jù)儀表盤了如指掌等等。
數(shù)據(jù)對UX設(shè)計有什么用？或者說，在設(shè)計鏈路的哪一個環(huán)節(jié)，數(shù)據(jù)和設(shè)計才能發(fā)生化學(xué)反應(yīng)？
UX設(shè)計日常流程為：得到一個需求（需求評審/需求挖掘）——輸出設(shè)計方案（設(shè)計決策）——驗證設(shè)計方案（設(shè)計實驗）。順著這個流程，我們來看看數(shù)據(jù)在UX設(shè)計各階段的作用。
肖恩·凱利斯在《增長黑客》開篇就提到“倉筒組織”這個概念：職能組織有各自的KPI，但未必對最終的業(yè)務(wù)目標(biāo)都有利。比如開發(fā)人力有限的情況下，產(chǎn)品經(jīng)理想上線新功能，市場運營想搞推廣活動，設(shè)計想做UI大改版做炫酷的動畫——就像N匹馬有N個方向，馬車跑不快。
尤其是當(dāng)產(chǎn)品進入成長期，我們會發(fā)現(xiàn)“能做的事情真的太多了”！不僅僅是來自老板和產(chǎn)品經(jīng)理的需求，每天都有用戶想教你做產(chǎn)品，剛剛競爭對手又上線了N個新功能等等。另外，當(dāng)多個產(chǎn)品經(jīng)理分管不同業(yè)務(wù)線，每個產(chǎn)品經(jīng)理都會認(rèn)為自己提的需求優(yōu)先級最高。那么，ABCD這幾個需求，哪個更值得即刻實現(xiàn)？
有目標(biāo)導(dǎo)向和成本意識的設(shè)計師，不會拿到PRD就開始畫稿，而是做需求評審。下次產(chǎn)品經(jīng)理給你提需求，或者自己想要主動提案，不妨從下面幾個問題開始思考效益。
如果這個新功能上線或?qū)σ延泄δ茏鲞@些優(yōu)化點：
｜正向評估：如果做，能使哪些用戶在什么場景受益？用戶會因此使用、消費、甚至推薦我們的產(chǎn)品嗎？
｜負(fù)向評估：如果不做，是否會造成用戶口碑變差，甚至棄用我們的產(chǎn)品？
｜數(shù)據(jù)導(dǎo)向：預(yù)估這個需求對大盤數(shù)據(jù)（AARRR）有何貢獻？如果無法在短期看到對大盤數(shù)據(jù)的直接提升，應(yīng)該取什么樣的數(shù)據(jù)指標(biāo)來評估其價值（GSM模型）？
｜比對優(yōu)先級：目前有ABCD四個需求，而人力資源有限，當(dāng)下最應(yīng)該解決哪個數(shù)據(jù)環(huán)節(jié)的問題？
我們以騰訊文檔的Excel按行填寫功能為例，闡述如何在需求評審階段就思考數(shù)據(jù)效益。
一開始，我們只是從用戶吐槽中了解到在手機端使用Excel錄入信息的困擾：協(xié)作人之間容易竄行誤刪誤改別人填寫的行，甚至把創(chuàng)建人輸入的表頭信息都給刪掉了。
我們模擬信息收集場景，摘出Excel移動端輸入的體驗節(jié)點，發(fā)現(xiàn)“在有限的屏幕內(nèi)去處理表格信息，需要來回滾動/縮放表格，再回到自己的行再輸入”這一點最容易發(fā)生錯誤，尤其在沒有凍結(jié)首行的情況下。
我們有收集表功能，也支持表格轉(zhuǎn)收集表，但是都依賴創(chuàng)建人主動去使用這個品類/這個功能。我們是否可以在創(chuàng)建人不干預(yù)的情況下，直接把來回滾動的表格輸入變成縱向的表單輸入？
以上都是從“感知”角度發(fā)現(xiàn)和分析問題，確認(rèn)了“存在這么一個問題”，然后提出了一個可行的想法。往往這個時候，我們?nèi)菀诪橹d奮。
但是如果我們堅持更精益的投入產(chǎn)出比，我們應(yīng)當(dāng)評估“這是不是一個要優(yōu)先解決的問題”，即評估收益：改變Excel移動端的輸入體驗，能帶來什么收益？
首先，我們做正負(fù)向評估。
｜正向評估：如果做，用戶可以在手機端更順暢地錄入信息，避免串行刪改的錯誤。雖然這不足以吸引新用戶使用我們的產(chǎn)品，但這個體驗未在競品實現(xiàn)，能形成差異化的記憶點，也許能帶來好的口碑。
｜負(fù)向評估：如果不做，手機端的Excel輸入體驗跟其他競品無差，用戶倒不會因此流失，但是創(chuàng)建人會因為協(xié)作者的犯錯苦惱，也許會因此轉(zhuǎn)為采用“IM一對一溝通”來避免出錯。
然后是設(shè)定數(shù)據(jù)目標(biāo)：如果這個功能落到數(shù)據(jù)板上，能作何貢獻？
｜數(shù)據(jù)導(dǎo)向：我們預(yù)期這個功能能夠通過提升手機端的輸入體驗，來避免用戶出錯，降低創(chuàng)建人整理數(shù)據(jù)的負(fù)擔(dān)，以提高用戶留存（而非預(yù)期這是一個拉新功能）。并且，設(shè)計假設(shè)正確，應(yīng)該能通過一些數(shù)據(jù)指標(biāo)看到用戶的行為變化。
最后，對比同期提出的幾個產(chǎn)品需求，評估優(yōu)先級。
｜比對優(yōu)先級：假設(shè)Excel按行填寫的需求是A（圖中黃色點），同期有一個影響文檔安全分享的需求B。如果我們按照正負(fù)向評估去考量優(yōu)先級，將AB兩個需求都放在象限圖里，越外層越應(yīng)該優(yōu)先處理，那么我們就應(yīng)該優(yōu)先處理需求B。
以上是為了將思維可視化呈現(xiàn)給讀者，實操時更重要的是數(shù)據(jù)意識和敏感度。圖示僅供參考，用何種形式表達不重要。
掌握一套清晰的需求評審思路，才有話語權(quán)去討論這個需求是做還是不做、即刻要做還是延后再做。這不僅僅是UX設(shè)計師需要具備的目標(biāo)導(dǎo)向思維和需求分析能力，而是整個團隊都應(yīng)該建立的數(shù)據(jù)意識和工作流。這也適用于對設(shè)計師提案的自我審查，避免自娛自樂。
產(chǎn)品在不同的成長階段關(guān)注的短期效益會有所不同。初創(chuàng)期，產(chǎn)品先要驗證其假設(shè)的需求是不是用戶真實需求、商業(yè)模式是否可行。當(dāng)產(chǎn)品發(fā)展到一定的用戶規(guī)模，我們可以通過對比關(guān)鍵數(shù)據(jù)指標(biāo)，去判斷現(xiàn)階段是否符合預(yù)期。這就像我們?nèi)メt(yī)院抽血做體檢，血樣指標(biāo)可以反映我們當(dāng)前是否健康。
如何檢驗產(chǎn)品健康度呢？我們首先關(guān)注宏觀的數(shù)據(jù)轉(zhuǎn)化是否符合預(yù)期，即AARRR。海盜指標(biāo)這一套，想必大家耳熟能詳。但對設(shè)計師來說，難點在于如何將宏觀數(shù)據(jù)轉(zhuǎn)化與具體的用戶使用場景進行關(guān)聯(lián)，進而落實到具體的設(shè)計任務(wù)。
以騰訊文檔為例，在線文檔的核心用戶價值是“從創(chuàng)作到協(xié)作的多人多端無縫同步”，因此我們定義用戶的關(guān)鍵路徑是“創(chuàng)作→分享→協(xié)作”，即：
基于關(guān)鍵路徑，我們繼續(xù)下鉆分析每一個環(huán)節(jié)，建立用于監(jiān)控“轉(zhuǎn)化質(zhì)量”的行為漏斗。比如在“分享”這一步，落到APP里，這個行為漏斗是：
我們發(fā)現(xiàn)僅30%的創(chuàng)建人在分享文檔前設(shè)置了非私密權(quán)限——這個數(shù)據(jù)并不符合我們的預(yù)期，因為這會導(dǎo)致創(chuàng)建人分享文檔后，協(xié)作人無法直接查看或編輯文檔。協(xié)作人需要進行權(quán)限申請，創(chuàng)建人則需要處理相應(yīng)的權(quán)限申請通知或更改權(quán)限，從“申請權(quán)限”到“審批通過”的時間差降低了協(xié)作效率。
我們進一步去找關(guān)聯(lián)的數(shù)據(jù)指標(biāo)，來確認(rèn)“這給用戶造成了困擾”——“有多少用戶在文檔分享出去之后再返回來設(shè)置權(quán)限”‘、“一個創(chuàng)建者平均要處理多少次權(quán)限申請”等等。
通過小范圍的用戶測試，我們了解到“權(quán)限設(shè)置”是一個視覺盲區(qū)。于是，我們優(yōu)化分享頁的信息展示，來改善“用戶看不見權(quán)限設(shè)置”這個問題。另外，當(dāng)創(chuàng)建人在處理權(quán)限申請的通知時，提供修改權(quán)限的入口，以避免重復(fù)處理同一個文檔的申請消息。
最終，我們將“分享前進行權(quán)限設(shè)置”的轉(zhuǎn)化提高到80%——吹牛的，業(yè)務(wù)數(shù)據(jù)太敏感，無法以真實數(shù)據(jù)跟大家分享，本文的數(shù)字皆為脫敏數(shù)據(jù)。
這就像一個剝洋蔥的過程。先找到產(chǎn)品的核心價值和對應(yīng)的主路徑，再拆解到對應(yīng)的多個用戶任務(wù)流，關(guān)注微觀的某個環(huán)節(jié)轉(zhuǎn)化是否有問題。利用數(shù)據(jù)診斷產(chǎn)品健康度，然后繼續(xù)用數(shù)據(jù)或其他研究方法下鉆，下鉆到可以落地到設(shè)計點的層面。
2016年聽了白木彰老師在杭州的一次現(xiàn)場分享，他對“Design”的理解非常透徹?！癝ign”是“標(biāo)志”，應(yīng)該是大家最共通的常識，就像國旗是這個國家的sign。那“De”是什么？臺下有人回答“重新定義”，而白木彰很自信地說：“不，這是一個否定詞”。
對于UX來說，同理。每一次的設(shè)計都是一次否定，否定現(xiàn)有體驗的合理性，否定現(xiàn)有的產(chǎn)品、服務(wù)或某一功能完全滿足需求。反過來想，則是審問自己的設(shè)計方案：每一次的“否定”，真的更好嗎？
這里舉一個“小需求”為例：騰訊文檔Excel的PC端右鍵菜單高度優(yōu)化。筆者目前負(fù)責(zé)騰訊文檔編輯模塊的UX工作，日常就是很多這樣的“小優(yōu)化”，其實這更加考驗數(shù)據(jù)敏感度和對“嚴(yán)謹(jǐn)”的堅持。
需求背景就是用戶反饋“右鍵菜單太長了，小屏幕看不到菜單底部的內(nèi)容”。
“展示問題”的解法有很多：
解法1/ 用UI手段，降低單個menu item的高度。
解法2/ 重新歸類，通過折疊來縮短菜單。
解法3/ 當(dāng)菜單無法完整展示，重新錨定其在屏幕的坐標(biāo)。
對比競品，確實有表格產(chǎn)品通過（2）去解決這個問題，但是我們撈數(shù)據(jù)發(fā)現(xiàn)：右鍵菜單中，插入行列是高頻操作（紅色部分），點擊次數(shù)比其他功能高5～130倍，且人均點擊量分別是3次和2次。我們決定不去對增加行列進行菜單折疊，因為這樣做雖然我們解決了“菜單太高”的問題，但降低了點擊效率。
接到某個需求的“A問題”，我們?nèi)菀滓蝗~障目。但是，會不會因為我們解決了A問題而引發(fā)B問題呢？數(shù)據(jù)幫助我們快速決策，避免B問題的出現(xiàn)。謹(jǐn)慎對待每一次小設(shè)計，因為每一次小設(shè)計都是一次否定。
大家對數(shù)據(jù)實驗應(yīng)該不陌生，常用的方法有AB測試和灰度測試，是一種控制變量的抽樣實驗方法。
AB測試是指通過抽取抽取等量用戶樣本進行AB兩個設(shè)計方案的投放，對比兩組數(shù)據(jù)，進行方案擇優(yōu)。這兩個方案的差異要嚴(yán)格控制在“僅有一個因素的差異”。這跟我們初中做生物實驗論證“一棵小樹的生長需要陽光”的思路一樣：兩組等量的小樹，一組有陽光，一組沒有陽光，經(jīng)歷相同的時間后對比生長的平均高度差。水、空氣、養(yǎng)分等其他條件要嚴(yán)格一致。因此大改版等“多變量”的設(shè)計并不適用于AB測試去印證。
大改版則通過灰度測試或拆分變量去做AB測試來確保效果。灰度測試是指如果軟件要在不久的將來推出一個全新的功能，或者做一次比較重大的改版的話，要先進行一個小范圍的嘗試工作，然后再慢慢放量，直到這個全新的功能覆蓋到所有用戶。也就是說在全量發(fā)布的黑白之間有一個灰，所以這種方法也通常被稱為灰度測試。
設(shè)計師需要觀察綜合的數(shù)據(jù)指標(biāo)，以騰訊文檔為例常規(guī)的指標(biāo)有：PV、UV、人均點擊次數(shù)、功能滲透率、使用該功能的留存率等等。另外是多渠道收集用戶反饋，包括騰訊文檔的“吐個槽”社區(qū)、微博搜索關(guān)鍵詞、隨訪身邊的用戶朋友等。
數(shù)據(jù)化設(shè)計不是對“精心打磨體驗”的否定。恰恰相反，對設(shè)計工匠來說，數(shù)據(jù)分析能力是一種新的“打磨工具”，提倡在設(shè)計實施和決策過程中更科學(xué)和客觀。UX和數(shù)據(jù)的關(guān)系，就像我們期望鞋子被量產(chǎn)之前能夠有數(shù)據(jù)佐證“這款鞋好看好穿好賣”，而不是否定“好看又好穿的鞋子能帶來更好的銷量”。
最后，“價值-設(shè)計-數(shù)據(jù)”是一個動態(tài)課題，必然隨著業(yè)界經(jīng)驗的沉淀和數(shù)據(jù)工具的發(fā)展，不斷迭代。
藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
作者：騰訊ISUX團隊 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
藍藍設(shè)計的小編 http://www.yvirxh.cn