“效率一直是公共輿論中的一個(gè)重要話題：在古希臘人眼中，它是政治和社會(huì)運(yùn)轉(zhuǎn)的方式；工業(yè)革命早期，亞當(dāng)·斯密將其視作提升生產(chǎn)力的強(qiáng)勁動(dòng)力?！睍r(shí)至今日，它被奉為公共生活的首要目標(biāo)，效率升級實(shí)質(zhì)是廣義世界里生產(chǎn)力的一次革新。
科技和物聯(lián)網(wǎng)以看不見的方式正重塑這個(gè)世界，從生活到工作，科技把每一張有形的辦公桌移到了云端，讓每一場可能發(fā)生的對話跨過了坐標(biāo)的限制。技術(shù)開放地定義著我們所理解的現(xiàn)實(shí)工作環(huán)境，騰訊文檔以對效率協(xié)作世界新的理解重新歸來。
我們希望“讓協(xié)作更高效，讓創(chuàng)作更輕松?！?站在新舊交替的路口，是時(shí)候以全新的設(shè)計(jì)語言，讓工具退去冷冰的外殼，走進(jìn)與智能隔空對話的新世界。
產(chǎn)品感知關(guān)鍵詞：
Phase 1
我們把騰訊文檔的品牌因子比做是架落與兩岸的橋，從時(shí)間和空間的角度，連接現(xiàn)在與未來。在這里，代表效率協(xié)作先進(jìn)生產(chǎn)力創(chuàng)造的新世界，轉(zhuǎn)承著龐大信息流的無限可能性。希望在這里發(fā)生的每一次虛擬與現(xiàn)實(shí)間的交流都是如此貼近你。
在此，我們賦予這個(gè)新世界以“數(shù)字”之名為前綴：
在數(shù)的數(shù)字（number）里，從有限0到無限∞；在物的數(shù)字（digital）里，從有形到無形。
就像霍金所說，宇宙最根本的東西首先是空間，其次是物質(zhì)，再次是時(shí)間。因?yàn)槲镔|(zhì)的存在和運(yùn)動(dòng)必須是在空間里進(jìn)行。而沒有物質(zhì)，談?wù)摃r(shí)間是沒有意義的。
而在這個(gè)廣闊的效率世界里，由無形的空間結(jié)構(gòu)支持，答應(yīng)著無聲的時(shí)鐘….
關(guān)鍵詞的聯(lián)想：
連結(jié)、握手、相遇、構(gòu)建、樂高、晶體、方塊、魔術(shù)、火花、夢想、成就、有序、幾何、空間、數(shù)字、代碼、窗口
從聯(lián)想中提煉具有關(guān)鍵的隱喻和形式：
把關(guān)鍵性的隱喻抽象出來，找到表現(xiàn)形式，使其更簡潔純粹，更容易被組合
品牌關(guān)鍵詞
秩序是一切天體、物質(zhì)、時(shí)間、生命、形態(tài)和形式秩序狀態(tài)運(yùn)行的最基本法則。
萬物有序，雖然呈現(xiàn)的現(xiàn)象千變?nèi)f化，但褪去復(fù)雜的外表，內(nèi)在規(guī)律卻是不變的。以更規(guī)整和原始的抽象基礎(chǔ)形為所有應(yīng)用元素的開端，以秩序作為布局的基本準(zhǔn)則。
正如我們騰訊文檔一直在思考的，尋找秩序中的效率，再從效率中找到變化的規(guī)律。
早在上世紀(jì)，透明性和通透感就追隨著設(shè)計(jì)的平面到立面。從沃德裝飾語言的中立性到密斯凡德羅建造的清晰，以形式的通透對內(nèi)容的冗雜，以材質(zhì)的純粹對結(jié)構(gòu)的多樣。
在這里，我們用“輕和透”來體現(xiàn)技術(shù)帶來的未來感，在畫面中敘述的更多是余白空間所帶來的無邊想象力。
“光從來都是為了它所照亮的事物存在而不是為了它本身?！?
流質(zhì)的光影和顏色是整體設(shè)計(jì)中氛圍的基調(diào)，用顏色之間緩慢的漸變預(yù)演空間中正在發(fā)生或者即將發(fā)生的故事。
我們用了色盤中相對沉靜的極光色系（藍(lán)紫綠），拓寬空間的邊界感。
與正在交融和變化的顏色中間態(tài)，一同隱喻了智能和科技作用下的每一次協(xié)作和創(chuàng)作的真實(shí)實(shí)現(xiàn)。
Metaphor Box 協(xié)作盒子，我們用一個(gè)變化的立方隱喻一個(gè)協(xié)作空間站。在這里有可能發(fā)生的是各種各樣的碰撞。思想的火花，創(chuàng)作的靈感，執(zhí)行的高效。這里有屬于一個(gè)也有屬于一群人的精彩。
最終我們將騰訊文檔的Logo圖形化，賦予Metaphor Box協(xié)作空間的概念。利用有序的幾何線條為空間背景構(gòu)圖。在原本的智慧的品牌藍(lán)基礎(chǔ)上，添加了一點(diǎn)靈動(dòng)偏暖的漸變色，為整體畫面增添生命力及親和力。最終完善后應(yīng)用到官網(wǎng)、官網(wǎng)登錄頁、閃屏頁、空頁面的場景。
閃屏
在閃屏的延展中，我們基于大的品牌理念延展出兩個(gè)不一樣的方向。
A. 以騰訊文檔logo的形狀為視覺元素載體空間，向里呈現(xiàn)一個(gè)輕盈有機(jī)的未來世界。
B. 以騰訊文檔產(chǎn)品“協(xié)作盒子”的概念，立體的展現(xiàn)一個(gè)代表科技為基底，多方協(xié)同運(yùn)轉(zhuǎn)的動(dòng)力世界。
最終，我們選擇了整體畫面更為清晰，主體更為清透明確的主圖形。
調(diào)整細(xì)節(jié)后應(yīng)用到閃屏
官網(wǎng)首頁Banner是最直接、最具感染力的視覺傳達(dá)路徑，我們需要讓用戶在進(jìn)入 docs.qq.com 即刻形成品牌印象，通過Slogan傳達(dá)騰訊文檔的產(chǎn)品價(jià)值，同時(shí)在Slogan的字段上添加了正在編輯態(tài)的光標(biāo)元素，體現(xiàn)文檔高效的協(xié)作能力，最終以響應(yīng)式的方式適配到移動(dòng)端。
在官網(wǎng)的其他頁面，我們將品牌語言進(jìn)一步落地。
在騰訊文檔空狀態(tài)的設(shè)計(jì)中，我們以幾何的ip形象為頁面穿插一個(gè)個(gè)不一樣的故事性敘白。傳遞騰訊文檔平易近人的智能語調(diào)。
在畫面的整體構(gòu)成中，我們增加了一些輕透的質(zhì)感元素，結(jié)合幾何形的整體圖形語言，讓畫面輕盈也豐富。
古爾德在《奇妙的生命》一書中寫道：“有些人覺得（人類是唯一智慧生命的）前景令人沮喪，我卻總為之感到振奮。我將它當(dāng)成是一個(gè)源泉，它帶來了自由，也帶來了道德上的責(zé)任?！毙实谋澈蟛恢故顷P(guān)于工作方式的改變，仍然需要不負(fù)所望：構(gòu)建責(zé)任。
我們在逐步進(jìn)化騰訊文檔的整體視覺語言系統(tǒng)。后續(xù)我們將推出下篇，向大家展示騰訊文檔品牌在UI語言和其他品牌延展中的更多設(shè)計(jì)。
在這個(gè)快時(shí)代，精耕出自己的風(fēng)格，打造更舒適的用戶體驗(yàn)，敬請期待......
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
作者：騰訊ISUX團(tuán)隊(duì) 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
2015年之后的中國互聯(lián)網(wǎng)，人口紅利、流量紅利逐漸退場。2019年遭遇第一場資本寒冬，上半年投資總金額同比下降了58.5%。也在2019年，“精益創(chuàng)業(yè)”、“精益數(shù)據(jù)分析”、“增長黑客”等一系列數(shù)據(jù)思潮開始流行。而UX設(shè)計(jì)師作為半個(gè)產(chǎn)品經(jīng)理，我們很容易將這股“數(shù)據(jù)熱”遷移到自己身上：每個(gè)UX設(shè)計(jì)師都要學(xué)數(shù)據(jù)分析了嗎？數(shù)據(jù)和設(shè)計(jì)是什么關(guān)系？天天盯數(shù)據(jù)會(huì)限制設(shè)計(jì)師的想象力嗎？數(shù)據(jù)到底要怎么用？……
過往，設(shè)計(jì)師一般不會(huì)把“數(shù)據(jù)”掛在嘴邊。我們提倡“以用戶為中心，打磨極致用戶體驗(yàn)”，較少考慮成本和商業(yè)效益。
通俗來說，就是產(chǎn)品經(jīng)理負(fù)責(zé)“生意”，設(shè)計(jì)師負(fù)責(zé)“體驗(yàn)”。以“造鞋”為例子，產(chǎn)品經(jīng)理做了市場調(diào)研，決定要生產(chǎn)兒童運(yùn)動(dòng)鞋，設(shè)計(jì)師負(fù)責(zé)設(shè)計(jì)“適合4-11歲的兒童在城市公園玩鬧”的鞋子應(yīng)該長什么樣、穿著它跑跑跳跳是不是舒服的。但是設(shè)計(jì)師不需要擔(dān)心運(yùn)動(dòng)鞋的銷量，產(chǎn)品經(jīng)理則要跟老板匯報(bào)銷量業(yè)績。
在紅利消退、產(chǎn)品同質(zhì)化嚴(yán)重和快速迭代的多重壓力下，UX設(shè)計(jì)迎來了更高的挑戰(zhàn)：僅憑主觀判斷“好不好用、好不好看”來打磨產(chǎn)品內(nèi)在體驗(yàn)，不考慮產(chǎn)品的生存、增長和盈利，很難在行業(yè)立足。與此同時(shí)，隨著數(shù)據(jù)采集工具的日漸成熟，數(shù)據(jù)以“客觀”和“便捷”兩大特點(diǎn)，幫助我們更快獲得“設(shè)計(jì)的依據(jù)”。精益化設(shè)計(jì)是必然趨勢，而“數(shù)據(jù)分析”是精益化設(shè)計(jì)的手段之一。
沿用“設(shè)計(jì)鞋”的案例，UX設(shè)計(jì)師要在自己所在領(lǐng)域思考：在設(shè)計(jì)調(diào)研的過程中，我們用什么數(shù)據(jù)指標(biāo)來衡量這個(gè)兒童鞋好穿、好賣？在鞋進(jìn)行批量生產(chǎn)前，我們有沒有數(shù)據(jù)資源支持我們研究父母/小孩對鞋子外觀的偏好、小孩運(yùn)動(dòng)時(shí)容易受到哪些物理傷害等等？如果有條件進(jìn)行小范圍的數(shù)據(jù)實(shí)驗(yàn)，我們?nèi)绾卧O(shè)計(jì)數(shù)據(jù)實(shí)驗(yàn)來評估好穿好賣？
“理解任何事物都需要先對它進(jìn)行定義，這樣才能夠在頭腦中清楚地知道正在討論的是這個(gè)東西，而不是其他東西?！狈浅Ｏ矚g美國經(jīng)濟(jì)學(xué)家Thomas Sowell在《經(jīng)濟(jì)學(xué)的思維方式》里說的這句話。
如果我們對“數(shù)據(jù)”下定義，那么產(chǎn)品設(shè)計(jì)語境中的“數(shù)據(jù)”具體是什么？數(shù)據(jù)是怎么產(chǎn)生的？
從數(shù)據(jù)采集手段來看，互聯(lián)網(wǎng)產(chǎn)品的數(shù)據(jù)來源主要有3個(gè)：二手資料數(shù)據(jù)、問卷調(diào)研數(shù)據(jù)和應(yīng)用埋點(diǎn)數(shù)據(jù)。
行業(yè)數(shù)據(jù)和競品數(shù)據(jù)一般通過二手資料獲得，包括商業(yè)交易數(shù)據(jù)、用戶群的態(tài)度和意愿、用戶輿論指數(shù)、競品的用戶規(guī)模和盈利狀況等宏觀數(shù)據(jù)。常用的搜索渠道有：百度指數(shù)、企鵝智酷、艾瑞、尼爾森、各大科技資訊平臺(tái)等。
我們可以將這些理解為“市場數(shù)據(jù)”，在立項(xiàng)期對產(chǎn)品方向有一定指導(dǎo)意義，能快速了解市場概況，也能幫助產(chǎn)品思考差異化定位的問題。
以“騰訊文檔為”項(xiàng)目為例，我們想提高騰訊文檔用戶創(chuàng)建文檔的成功率，通過模板創(chuàng)建文檔是關(guān)鍵路徑之一。研究用戶通過模板創(chuàng)建的路徑時(shí)，想大概了解用戶找模板時(shí)可能會(huì)在意什么。于是我們嘗試使用百度指數(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è)、再進(jìn)行抽樣統(tǒng)計(jì)的方法來得到用戶口述的答案。也就是，問卷傾向于聽用戶說了什么、而看不見用戶真正做了什么。嚴(yán)謹(jǐn)?shù)膯柧矸治鲆矔?huì)比對后臺(tái)數(shù)據(jù)，校驗(yàn)用戶說的和做的是否一致，以清洗無效數(shù)據(jù)。
較之于問卷調(diào)研數(shù)據(jù)，我們想看“用戶做了什么”，則通過分析應(yīng)用埋點(diǎn)數(shù)據(jù)獲得。
“應(yīng)用埋點(diǎn)數(shù)據(jù)”也叫“埋點(diǎn)數(shù)據(jù)”、“前端頁面數(shù)據(jù)”，我們可以簡單理解為“通過技術(shù)手段獲得用戶在應(yīng)用內(nèi)（網(wǎng)站、客戶端、小程序等）的操作行為數(shù)據(jù)”。其背后原理是：用戶和界面發(fā)生交互，系統(tǒng)需要向服務(wù)器發(fā)送請求和返回請求，把這些請求預(yù)埋一段計(jì)數(shù)代碼，就能得到頁面的曝光數(shù)據(jù)和用戶的操作數(shù)據(jù)。
埋點(diǎn)需要產(chǎn)品經(jīng)理或設(shè)計(jì)師做好數(shù)據(jù)指標(biāo)的定義，跟開發(fā)工程師提前溝通，讓開發(fā)工程師在代碼中嵌入埋點(diǎn)。一個(gè)埋點(diǎn)由多個(gè)字段組成，規(guī)范地定義字段，有利于我們在數(shù)據(jù)平臺(tái)搜索埋點(diǎn)更方便。當(dāng)我們懷疑數(shù)據(jù)有效性時(shí)，也更方便排查埋點(diǎn)問題。
埋點(diǎn)類型可分為曝光埋點(diǎn)、操作埋點(diǎn)和時(shí)長埋點(diǎn)：
1. 曝光埋點(diǎn)可以捕捉頁面被展示的次數(shù)，可以是針對整個(gè)頁面，也可以是頁面中的某個(gè)區(qū)域。即我們常說的PV、UV。
2. 操作埋點(diǎn)則是在用戶對頁面某個(gè)區(qū)域（按鈕、卡片、提示條等）進(jìn)行手勢操作（點(diǎn)擊、雙擊、長按、滑動(dòng)等）時(shí)，進(jìn)行打點(diǎn)記錄。對應(yīng)的，也稱之為某個(gè)操作的PV、UV。
3. 時(shí)長埋點(diǎn)是通過標(biāo)記以上兩類埋點(diǎn)、并計(jì)算時(shí)間差獲得的。比如，我們記錄用戶選取模板耗費(fèi)的時(shí)長，可以通過離開頁面的時(shí)間（t2）-進(jìn)入頁面的時(shí)間（t1）計(jì)算。而離開頁面則用點(diǎn)擊左上角返回按鈕、點(diǎn)擊具體模板等“離開”操作來核算。
基于以上3種原始數(shù)據(jù)，我們可以運(yùn)算得出點(diǎn)擊率、功能滲透率、人均點(diǎn)擊次數(shù)、人均使用時(shí)長等具有對比價(jià)值的數(shù)據(jù)。
較之于二手資料和調(diào)研數(shù)據(jù)，埋點(diǎn)數(shù)據(jù)更加貼近用戶的真實(shí)表現(xiàn)，作為反饋指標(biāo)的靈敏度更高，可挖掘性更強(qiáng)，也能作為客觀衡量指標(biāo)引入到每一次產(chǎn)品迭代中。
設(shè)計(jì)師理解埋點(diǎn)的原理，有助于在數(shù)據(jù)采集環(huán)節(jié)跟數(shù)據(jù)開發(fā)更好地溝通，并提出合理的數(shù)據(jù)需求。另外，當(dāng)我們拿到一組數(shù)據(jù)，也需要從根本原理上去判斷數(shù)據(jù)的信度和效度，確保數(shù)據(jù)沒有質(zhì)量問題再進(jìn)行下一步分析。
數(shù)據(jù)分析能力會(huì)在UX設(shè)計(jì)師的崗位招聘要求中被提及，但除了電商和廣告行業(yè)的數(shù)據(jù)化設(shè)計(jì)知識體系較為成熟，其他領(lǐng)域還在探索。另外，相比于市場營銷、產(chǎn)品經(jīng)理、產(chǎn)品運(yùn)營等職能，設(shè)計(jì)師的分析框架是相對晚熟的。
實(shí)際上，我們很難從招聘廣告中歸納“具備數(shù)據(jù)分析能力的設(shè)計(jì)師”長什么樣，但我們期望這樣的設(shè)計(jì)師對數(shù)據(jù)的感知力強(qiáng)、分析邏輯清晰、數(shù)據(jù)經(jīng)驗(yàn)豐富，對某個(gè)垂直領(lǐng)域的數(shù)據(jù)儀表盤了如指掌等等。
數(shù)據(jù)對UX設(shè)計(jì)有什么用？或者說，在設(shè)計(jì)鏈路的哪一個(gè)環(huán)節(jié)，數(shù)據(jù)和設(shè)計(jì)才能發(fā)生化學(xué)反應(yīng)？
UX設(shè)計(jì)日常流程為：得到一個(gè)需求（需求評審/需求挖掘）——輸出設(shè)計(jì)方案（設(shè)計(jì)決策）——驗(yàn)證設(shè)計(jì)方案（設(shè)計(jì)實(shí)驗(yàn)）。順著這個(gè)流程，我們來看看數(shù)據(jù)在UX設(shè)計(jì)各階段的作用。
肖恩·凱利斯在《增長黑客》開篇就提到“倉筒組織”這個(gè)概念：職能組織有各自的KPI，但未必對最終的業(yè)務(wù)目標(biāo)都有利。比如開發(fā)人力有限的情況下，產(chǎn)品經(jīng)理想上線新功能，市場運(yùn)營想搞推廣活動(dòng)，設(shè)計(jì)想做UI大改版做炫酷的動(dòng)畫——就像N匹馬有N個(gè)方向，馬車跑不快。
尤其是當(dāng)產(chǎn)品進(jìn)入成長期，我們會(huì)發(fā)現(xiàn)“能做的事情真的太多了”！不僅僅是來自老板和產(chǎn)品經(jīng)理的需求，每天都有用戶想教你做產(chǎn)品，剛剛競爭對手又上線了N個(gè)新功能等等。另外，當(dāng)多個(gè)產(chǎn)品經(jīng)理分管不同業(yè)務(wù)線，每個(gè)產(chǎn)品經(jīng)理都會(huì)認(rèn)為自己提的需求優(yōu)先級最高。那么，ABCD這幾個(gè)需求，哪個(gè)更值得即刻實(shí)現(xiàn)？
有目標(biāo)導(dǎo)向和成本意識的設(shè)計(jì)師，不會(huì)拿到PRD就開始畫稿，而是做需求評審。下次產(chǎn)品經(jīng)理給你提需求，或者自己想要主動(dòng)提案，不妨從下面幾個(gè)問題開始思考效益。
如果這個(gè)新功能上線或?qū)σ延泄δ茏鲞@些優(yōu)化點(diǎn)：
｜正向評估：如果做，能使哪些用戶在什么場景受益？用戶會(huì)因此使用、消費(fèi)、甚至推薦我們的產(chǎn)品嗎？
｜負(fù)向評估：如果不做，是否會(huì)造成用戶口碑變差，甚至棄用我們的產(chǎn)品？
｜數(shù)據(jù)導(dǎo)向：預(yù)估這個(gè)需求對大盤數(shù)據(jù)（AARRR）有何貢獻(xiàn)？如果無法在短期看到對大盤數(shù)據(jù)的直接提升，應(yīng)該取什么樣的數(shù)據(jù)指標(biāo)來評估其價(jià)值（GSM模型）？
｜比對優(yōu)先級：目前有ABCD四個(gè)需求，而人力資源有限，當(dāng)下最應(yīng)該解決哪個(gè)數(shù)據(jù)環(huán)節(jié)的問題？
我們以騰訊文檔的Excel按行填寫功能為例，闡述如何在需求評審階段就思考數(shù)據(jù)效益。
一開始，我們只是從用戶吐槽中了解到在手機(jī)端使用Excel錄入信息的困擾：協(xié)作人之間容易竄行誤刪誤改別人填寫的行，甚至把創(chuàng)建人輸入的表頭信息都給刪掉了。
我們模擬信息收集場景，摘出Excel移動(dòng)端輸入的體驗(yàn)節(jié)點(diǎn)，發(fā)現(xiàn)“在有限的屏幕內(nèi)去處理表格信息，需要來回滾動(dòng)/縮放表格，再回到自己的行再輸入”這一點(diǎn)最容易發(fā)生錯(cuò)誤，尤其在沒有凍結(jié)首行的情況下。
我們有收集表功能，也支持表格轉(zhuǎn)收集表，但是都依賴創(chuàng)建人主動(dòng)去使用這個(gè)品類/這個(gè)功能。我們是否可以在創(chuàng)建人不干預(yù)的情況下，直接把來回滾動(dòng)的表格輸入變成縱向的表單輸入？
以上都是從“感知”角度發(fā)現(xiàn)和分析問題，確認(rèn)了“存在這么一個(gè)問題”，然后提出了一個(gè)可行的想法。往往這個(gè)時(shí)候，我們?nèi)菀诪橹d奮。
但是如果我們堅(jiān)持更精益的投入產(chǎn)出比，我們應(yīng)當(dāng)評估“這是不是一個(gè)要優(yōu)先解決的問題”，即評估收益：改變Excel移動(dòng)端的輸入體驗(yàn)，能帶來什么收益？
首先，我們做正負(fù)向評估。
｜正向評估：如果做，用戶可以在手機(jī)端更順暢地錄入信息，避免串行刪改的錯(cuò)誤。雖然這不足以吸引新用戶使用我們的產(chǎn)品，但這個(gè)體驗(yàn)未在競品實(shí)現(xiàn)，能形成差異化的記憶點(diǎn)，也許能帶來好的口碑。
｜負(fù)向評估：如果不做，手機(jī)端的Excel輸入體驗(yàn)跟其他競品無差，用戶倒不會(huì)因此流失，但是創(chuàng)建人會(huì)因?yàn)閰f(xié)作者的犯錯(cuò)苦惱，也許會(huì)因此轉(zhuǎn)為采用“IM一對一溝通”來避免出錯(cuò)。
然后是設(shè)定數(shù)據(jù)目標(biāo)：如果這個(gè)功能落到數(shù)據(jù)板上，能作何貢獻(xiàn)？
｜數(shù)據(jù)導(dǎo)向：我們預(yù)期這個(gè)功能能夠通過提升手機(jī)端的輸入體驗(yàn)，來避免用戶出錯(cuò)，降低創(chuàng)建人整理數(shù)據(jù)的負(fù)擔(dān)，以提高用戶留存（而非預(yù)期這是一個(gè)拉新功能）。并且，設(shè)計(jì)假設(shè)正確，應(yīng)該能通過一些數(shù)據(jù)指標(biāo)看到用戶的行為變化。
最后，對比同期提出的幾個(gè)產(chǎn)品需求，評估優(yōu)先級。
｜比對優(yōu)先級：假設(shè)Excel按行填寫的需求是A（圖中黃色點(diǎn)），同期有一個(gè)影響文檔安全分享的需求B。如果我們按照正負(fù)向評估去考量優(yōu)先級，將AB兩個(gè)需求都放在象限圖里，越外層越應(yīng)該優(yōu)先處理，那么我們就應(yīng)該優(yōu)先處理需求B。
以上是為了將思維可視化呈現(xiàn)給讀者，實(shí)操時(shí)更重要的是數(shù)據(jù)意識和敏感度。圖示僅供參考，用何種形式表達(dá)不重要。
掌握一套清晰的需求評審思路，才有話語權(quán)去討論這個(gè)需求是做還是不做、即刻要做還是延后再做。這不僅僅是UX設(shè)計(jì)師需要具備的目標(biāo)導(dǎo)向思維和需求分析能力，而是整個(gè)團(tuán)隊(duì)都應(yīng)該建立的數(shù)據(jù)意識和工作流。這也適用于對設(shè)計(jì)師提案的自我審查，避免自娛自樂。
產(chǎn)品在不同的成長階段關(guān)注的短期效益會(huì)有所不同。初創(chuàng)期，產(chǎn)品先要驗(yàn)證其假設(shè)的需求是不是用戶真實(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)前是否健康。
如何檢驗(yàn)產(chǎn)品健康度呢？我們首先關(guān)注宏觀的數(shù)據(jù)轉(zhuǎn)化是否符合預(yù)期，即AARRR。海盜指標(biāo)這一套，想必大家耳熟能詳。但對設(shè)計(jì)師來說，難點(diǎn)在于如何將宏觀數(shù)據(jù)轉(zhuǎn)化與具體的用戶使用場景進(jìn)行關(guān)聯(lián)，進(jìn)而落實(shí)到具體的設(shè)計(jì)任務(wù)。
以騰訊文檔為例，在線文檔的核心用戶價(jià)值是“從創(chuàng)作到協(xié)作的多人多端無縫同步”，因此我們定義用戶的關(guān)鍵路徑是“創(chuàng)作→分享→協(xié)作”，即：
基于關(guān)鍵路徑，我們繼續(xù)下鉆分析每一個(gè)環(huán)節(jié)，建立用于監(jiān)控“轉(zhuǎn)化質(zhì)量”的行為漏斗。比如在“分享”這一步，落到APP里，這個(gè)行為漏斗是：
我們發(fā)現(xiàn)僅30%的創(chuàng)建人在分享文檔前設(shè)置了非私密權(quán)限——這個(gè)數(shù)據(jù)并不符合我們的預(yù)期，因?yàn)檫@會(huì)導(dǎo)致創(chuàng)建人分享文檔后，協(xié)作人無法直接查看或編輯文檔。協(xié)作人需要進(jìn)行權(quán)限申請，創(chuàng)建人則需要處理相應(yīng)的權(quán)限申請通知或更改權(quán)限，從“申請權(quán)限”到“審批通過”的時(shí)間差降低了協(xié)作效率。
我們進(jìn)一步去找關(guān)聯(lián)的數(shù)據(jù)指標(biāo)，來確認(rèn)“這給用戶造成了困擾”——“有多少用戶在文檔分享出去之后再返回來設(shè)置權(quán)限”‘、“一個(gè)創(chuàng)建者平均要處理多少次權(quán)限申請”等等。
通過小范圍的用戶測試，我們了解到“權(quán)限設(shè)置”是一個(gè)視覺盲區(qū)。于是，我們優(yōu)化分享頁的信息展示，來改善“用戶看不見權(quán)限設(shè)置”這個(gè)問題。另外，當(dāng)創(chuàng)建人在處理權(quán)限申請的通知時(shí)，提供修改權(quán)限的入口，以避免重復(fù)處理同一個(gè)文檔的申請消息。
最終，我們將“分享前進(jìn)行權(quán)限設(shè)置”的轉(zhuǎn)化提高到80%——吹牛的，業(yè)務(wù)數(shù)據(jù)太敏感，無法以真實(shí)數(shù)據(jù)跟大家分享，本文的數(shù)字皆為脫敏數(shù)據(jù)。
這就像一個(gè)剝洋蔥的過程。先找到產(chǎn)品的核心價(jià)值和對應(yīng)的主路徑，再拆解到對應(yīng)的多個(gè)用戶任務(wù)流，關(guān)注微觀的某個(gè)環(huán)節(jié)轉(zhuǎn)化是否有問題。利用數(shù)據(jù)診斷產(chǎn)品健康度，然后繼續(xù)用數(shù)據(jù)或其他研究方法下鉆，下鉆到可以落地到設(shè)計(jì)點(diǎn)的層面。
2016年聽了白木彰老師在杭州的一次現(xiàn)場分享，他對“Design”的理解非常透徹?！癝ign”是“標(biāo)志”，應(yīng)該是大家最共通的常識，就像國旗是這個(gè)國家的sign。那“De”是什么？臺(tái)下有人回答“重新定義”，而白木彰很自信地說：“不，這是一個(gè)否定詞”。
對于UX來說，同理。每一次的設(shè)計(jì)都是一次否定，否定現(xiàn)有體驗(yàn)的合理性，否定現(xiàn)有的產(chǎn)品、服務(wù)或某一功能完全滿足需求。反過來想，則是審問自己的設(shè)計(jì)方案：每一次的“否定”，真的更好嗎？
這里舉一個(gè)“小需求”為例：騰訊文檔Excel的PC端右鍵菜單高度優(yōu)化。筆者目前負(fù)責(zé)騰訊文檔編輯模塊的UX工作，日常就是很多這樣的“小優(yōu)化”，其實(shí)這更加考驗(yàn)數(shù)據(jù)敏感度和對“嚴(yán)謹(jǐn)”的堅(jiān)持。
需求背景就是用戶反饋“右鍵菜單太長了，小屏幕看不到菜單底部的內(nèi)容”。
“展示問題”的解法有很多：
解法1/ 用UI手段，降低單個(gè)menu item的高度。
解法2/ 重新歸類，通過折疊來縮短菜單。
解法3/ 當(dāng)菜單無法完整展示，重新錨定其在屏幕的坐標(biāo)。
對比競品，確實(shí)有表格產(chǎn)品通過（2）去解決這個(gè)問題，但是我們撈數(shù)據(jù)發(fā)現(xiàn)：右鍵菜單中，插入行列是高頻操作（紅色部分），點(diǎn)擊次數(shù)比其他功能高5～130倍，且人均點(diǎn)擊量分別是3次和2次。我們決定不去對增加行列進(jìn)行菜單折疊，因?yàn)檫@樣做雖然我們解決了“菜單太高”的問題，但降低了點(diǎn)擊效率。
接到某個(gè)需求的“A問題”，我們?nèi)菀滓蝗~障目。但是，會(huì)不會(huì)因?yàn)槲覀兘鉀Q了A問題而引發(fā)B問題呢？數(shù)據(jù)幫助我們快速?zèng)Q策，避免B問題的出現(xiàn)。謹(jǐn)慎對待每一次小設(shè)計(jì)，因?yàn)槊恳淮涡≡O(shè)計(jì)都是一次否定。
大家對數(shù)據(jù)實(shí)驗(yàn)應(yīng)該不陌生，常用的方法有AB測試和灰度測試，是一種控制變量的抽樣實(shí)驗(yàn)方法。
AB測試是指通過抽取抽取等量用戶樣本進(jìn)行AB兩個(gè)設(shè)計(jì)方案的投放，對比兩組數(shù)據(jù)，進(jìn)行方案擇優(yōu)。這兩個(gè)方案的差異要嚴(yán)格控制在“僅有一個(gè)因素的差異”。這跟我們初中做生物實(shí)驗(yàn)論證“一棵小樹的生長需要陽光”的思路一樣：兩組等量的小樹，一組有陽光，一組沒有陽光，經(jīng)歷相同的時(shí)間后對比生長的平均高度差。水、空氣、養(yǎng)分等其他條件要嚴(yán)格一致。因此大改版等“多變量”的設(shè)計(jì)并不適用于AB測試去印證。
大改版則通過灰度測試或拆分變量去做AB測試來確保效果?；叶葴y試是指如果軟件要在不久的將來推出一個(gè)全新的功能，或者做一次比較重大的改版的話，要先進(jìn)行一個(gè)小范圍的嘗試工作，然后再慢慢放量，直到這個(gè)全新的功能覆蓋到所有用戶。也就是說在全量發(fā)布的黑白之間有一個(gè)灰，所以這種方法也通常被稱為灰度測試。
設(shè)計(jì)師需要觀察綜合的數(shù)據(jù)指標(biāo)，以騰訊文檔為例常規(guī)的指標(biāo)有：PV、UV、人均點(diǎn)擊次數(shù)、功能滲透率、使用該功能的留存率等等。另外是多渠道收集用戶反饋，包括騰訊文檔的“吐個(gè)槽”社區(qū)、微博搜索關(guān)鍵詞、隨訪身邊的用戶朋友等。
數(shù)據(jù)化設(shè)計(jì)不是對“精心打磨體驗(yàn)”的否定。恰恰相反，對設(shè)計(jì)工匠來說，數(shù)據(jù)分析能力是一種新的“打磨工具”，提倡在設(shè)計(jì)實(shí)施和決策過程中更科學(xué)和客觀。UX和數(shù)據(jù)的關(guān)系，就像我們期望鞋子被量產(chǎn)之前能夠有數(shù)據(jù)佐證“這款鞋好看好穿好賣”，而不是否定“好看又好穿的鞋子能帶來更好的銷量”。
最后，“價(jià)值-設(shè)計(jì)-數(shù)據(jù)”是一個(gè)動(dòng)態(tài)課題，必然隨著業(yè)界經(jīng)驗(yàn)的沉淀和數(shù)據(jù)工具的發(fā)展，不斷迭代。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
作者：騰訊ISUX團(tuán)隊(duì) 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
通知是產(chǎn)品中極其重要的一部分，它能快速將內(nèi)容的狀態(tài)及變化通過不同的方式傳達(dá)給用戶，以便用戶在收到信息后根據(jù)所傳遞的內(nèi)容及時(shí)做出應(yīng)對策略。
在這里，有一個(gè)很現(xiàn)實(shí)的問題，很多產(chǎn)品喜歡一股腦的把有效的/無效的、重要的/不重要的、用戶想知道的/不想知道的等所有信息通通推送給用戶。那么，你的推送渠道真的用對了嗎？是否做了信息優(yōu)先級區(qū)分？推送時(shí)間段是否有效？站在用戶角度，下面這些場景你肯定碰到過：
◇ 手機(jī)屏幕總是頻繁彈出信息，接二連三的震動(dòng)、提示音讓你一怒之下卸載了一些不太常用的APP；
◇ 桌面圖標(biāo)99+、主頁的消息入口99+、進(jìn)入消息分類還是99+，清理起來非常麻煩，還不如關(guān)閉幾個(gè)分類通知，少一個(gè)也能緩口氣；
◇ 一天少看了幾個(gè)小視頻，好不容易節(jié)省出來的流量被通知無情的消耗，還不如關(guān)閉系統(tǒng)通知權(quán)限來得快；
◇ 每隔一段時(shí)間，都要在手機(jī)短信中回復(fù)一大堆TD（退訂），想吐的感覺；
◇ ......
在頻繁地打擾下，用戶關(guān)閉了一個(gè)個(gè)通知權(quán)限、甚至一度卸載APP。不難看出，好的消息通知能巧妙的將用戶求留?。ú糠钟脩衾猛ㄖ湍鼙３謱ξ⑿拧Q的控制欲），做的不好就會(huì)起到負(fù)面作用、失去了消息通知的初衷，這里面最需要把控就是推送的一個(gè)“度”。
用戶可能因?yàn)橐粭l走心的推送而轉(zhuǎn)化、也可能因?yàn)楸淮驍_而放棄使用，站在設(shè)計(jì)角度，需盡可能打造讓用戶更喜歡的通知系統(tǒng)。那么，對于不同的業(yè)務(wù)需求及使用場景，又該如何差異化的進(jìn)行消息推送，筆者通過本文進(jìn)行分析總結(jié)，與大家一起了解。
一、消息推送的基本知識
二、消息通知渠道
三、讓用戶再次開啟通知權(quán)限
四、提高觸達(dá)率的小技巧
五、結(jié)語
消息通知是產(chǎn)品提供的一項(xiàng)服務(wù)，能夠及時(shí)將產(chǎn)品的期待或內(nèi)容的變化、根據(jù)其等級權(quán)重合理的通過不同渠道及時(shí)同步給用戶，常見的如互動(dòng)提醒、老用戶召回、活動(dòng)拉新、產(chǎn)品更新或幫助提醒等，通過站內(nèi)紅點(diǎn)、彈窗、短信、郵件等方式與用戶進(jìn)行信息交換。
用戶層面，方便及時(shí)獲取到想要知道的信息、以及對信息交換的控制權(quán)。例如：用戶發(fā)布一條新的短視頻想要對評論/點(diǎn)贊及時(shí)掌控、給心上人發(fā)了信息想在第一時(shí)間看到回復(fù)...等，產(chǎn)品也是借此用戶對內(nèi)容的控制欲，利用消息推送提升用戶的使用體驗(yàn)。
產(chǎn)品層面，通過主動(dòng)推送想讓用戶知道的信息，以達(dá)到新/老用戶轉(zhuǎn)化的目的。例如：通過手機(jī)短信形式發(fā)放優(yōu)惠券對老用戶召回、應(yīng)用內(nèi)通知或桌面推送對用戶拉新...等，以此提高產(chǎn)品收益，獲取更大的商業(yè)價(jià)值。
首先，一個(gè)好的消息系統(tǒng)首先需要將消息內(nèi)容設(shè)計(jì)的全面，以便用戶通過消息通知能準(zhǔn)確無誤的了解到對應(yīng)內(nèi)容；
其次，消息的觸達(dá)方式需合理有效，必須提供便捷的操作入口以供用戶及時(shí)反饋；
另外，為了避免過于打擾用戶，需選擇合理的推送渠道，提高用戶觸達(dá)概率及反饋效率。
消息通知渠道分為應(yīng)用內(nèi)通知應(yīng)用外通知。應(yīng)用內(nèi)通知主要來源于消息中心或系統(tǒng)主動(dòng)觸發(fā)的彈窗來體現(xiàn)，而應(yīng)用外通知包括桌面圖標(biāo)紅點(diǎn)、手機(jī)短信、電子郵件、push、公眾號信息（需綁定）等渠道推送。
1）消息功能入口
消息功能入口提示也稱為紅點(diǎn)提示，主要有底部Tad欄、首頁右上角、個(gè)人中心右上角三種形式。當(dāng)有新的通知出現(xiàn)時(shí)，對應(yīng)圖標(biāo)的右上角會(huì)出現(xiàn)小紅點(diǎn)提示，清晰明了，關(guān)于小紅點(diǎn)設(shè)計(jì)，之前《小紅點(diǎn)篇 | 用好這招，讓用戶的觸達(dá)率大幅度提升！》這篇文章有詳細(xì)說明。
紅點(diǎn)提示的用戶觸達(dá)率較高，但需要用戶在登錄狀態(tài)下才能查看，比如訂單狀態(tài)變化、用戶與用戶/產(chǎn)品之間的互動(dòng)消息、產(chǎn)品活動(dòng)通知等。
2）消息列表
當(dāng)產(chǎn)品的消息類型較多時(shí)，點(diǎn)擊消息功能入口即可跳轉(zhuǎn)至二級分類列表。與上述相比，消息列表的內(nèi)容則更加清晰，通過第一次消息入口功能的引導(dǎo)觸發(fā)，這里的用戶觸達(dá)率將成倍增加。
3）彈窗通知
以彈窗的形式覆蓋在頁面內(nèi)容頂層，阻礙用戶的當(dāng)前操作并迫使用戶對彈窗做出決策，可以是系統(tǒng)主動(dòng)彈出或用戶手動(dòng)觸發(fā)，對用戶的干擾極大。
彈窗通知最大的優(yōu)勢在于會(huì)100%被用戶看到，無法忽略，否則將不能進(jìn)行其他操作，很適合產(chǎn)品的一些重要事件提醒，例如應(yīng)用升級、活動(dòng)通知、優(yōu)惠券引流等。
4）Toast 通知
Toast通知是用戶在操作之后給出的即時(shí)反饋，與當(dāng)前頁面內(nèi)容關(guān)聯(lián)性極強(qiáng)，但不會(huì)中斷用戶的操作，出現(xiàn)的時(shí)間很短，一般持續(xù)3秒后自動(dòng)消失，對用戶的干擾也比較小。
需要注意的是，Toast容易在用戶不注意的情況下被遺漏，所以適合用于操作后不影響大局、且不可二次操作、不可逆轉(zhuǎn)的輕量提示，例如刪除成功、提交成功等。
1）桌面小紅點(diǎn)
小紅點(diǎn)通常以圓點(diǎn)+數(shù)字的形式出現(xiàn)在圖標(biāo)右上角，用來提示應(yīng)用內(nèi)的未讀消息數(shù)量，進(jìn)入應(yīng)用查看或清除后小紅點(diǎn)則會(huì)消失。桌面小紅點(diǎn)有一個(gè)必備前提，需要同時(shí)開啟設(shè)備和應(yīng)用內(nèi)的通知權(quán)限方能接收提醒通知。
在部分應(yīng)用中，桌面小紅點(diǎn)具有較大的價(jià)值，能對用戶產(chǎn)生積極的影響，使用頻率得到進(jìn)一定的提升。例如：社交類應(yīng)用中的私信、評論、點(diǎn)贊等；商家端的咨詢信息、下單提醒等，用戶在看到后都會(huì)有強(qiáng)烈的點(diǎn)擊欲望，對一些數(shù)據(jù)的提升起到推動(dòng)作用。
2）PUSH推送
PUSH推送通知常見于設(shè)備頂部橫幅（幾秒后消失）、通知中心以及鎖屏后的中部區(qū)域，用戶可從卡片中的內(nèi)容獲取信息類型及重要程度，用以決策是否需要立即打開。
這種推送方式，用戶幾乎很難忽略，不處理的話會(huì)長時(shí)間浮于屏幕之上，非常適合價(jià)值及時(shí)效性較高的消息通知。除視覺提醒之外，還可通過聽覺觸達(dá)用戶，例如支付號、微信的收款信息等，不過依然要同時(shí)開啟設(shè)備和應(yīng)用內(nèi)的通知權(quán)限。
3）手機(jī)短信
短信推送是大家很熟悉的通知渠道了，畢竟現(xiàn)在都是用手機(jī)注冊賬號，手機(jī)號獲取難度幾乎為“0”，常見的有驗(yàn)證碼短信（用戶請求）、營銷短信（產(chǎn)品推送）兩種：
驗(yàn)證碼類似“一問一答”的互動(dòng)，沒有什么特別的玩法；
營銷類短信對于拉取新用戶、老用戶召回、節(jié)日/活動(dòng)促銷能起到不可替代作用，產(chǎn)品可通過短信發(fā)送圖片、文字以及超鏈接，內(nèi)容的時(shí)效性、用戶的觸達(dá)率都相對較高。
著重說明一點(diǎn)，因?yàn)槎绦磐ㄖ某杀据^高，在使用之前需要足夠的思考分析，細(xì)分用戶群體做到精準(zhǔn)投放，避免所花費(fèi)的成本與產(chǎn)生的價(jià)值不成正比。另外，如果需要放超鏈接，那么短信內(nèi)容一定要有足夠的說服力及吸引力，總是被用戶當(dāng)做詐騙短信刪除、舉報(bào)的話還不如不放。
為了減少對用戶的打擾，讓產(chǎn)品更人性化，一般會(huì)在短信結(jié)尾提供TD（退訂）提示，用戶回復(fù)即可取消后續(xù)的推送，但是否真的取消成功，這就得看產(chǎn)品了(???)...
4）電子郵件
電子郵件推送方式使用的并不多，一方面需要產(chǎn)品有web端服務(wù)，純粹的移動(dòng)端APP郵件推送不會(huì)有什么效果；另一方面，絕大多數(shù)的用戶登錄電子郵箱并不頻繁，還容易被用戶一鍵清理或誤刪。
電子郵件唯一的好處就是用戶可通過超鏈接直達(dá)內(nèi)容出處，相比APP應(yīng)用，免去了下載等一系列操作，還可以長時(shí)間滯留，便于用戶隨時(shí)查看或添加星標(biāo)，處理時(shí)間段選擇較為靈活，很適合web端服務(wù)。針對一些商業(yè)化的郵件推送，也需要花費(fèi)一定的經(jīng)濟(jì)成本。
產(chǎn)品獲取用戶郵箱地址的難度較大（郵箱賬號除外），不難理解，使用手機(jī)號一鍵登錄、驗(yàn)證碼登錄、第三方賬號登錄遠(yuǎn)比郵箱地址登錄要方便的多。除此之外，還可以通過個(gè)人設(shè)置的添加郵箱、問卷調(diào)查的郵箱地址預(yù)留來獲取，不過這就要看用戶的主動(dòng)意愿了。
5）公眾號消息
公眾號背靠社交應(yīng)用，普及程度及用戶觸達(dá)率是極高的，不過這需要產(chǎn)品利用部分業(yè)務(wù)、活動(dòng)為導(dǎo)向，引導(dǎo)用戶關(guān)注公眾號后方能接收到消息通知。
目前公眾號只能向用戶發(fā)送符合部分場景要求的服務(wù)通知，例如刷卡通知、物流軌跡變化、商品購買等。如果預(yù)算足夠的話，還可以購買公眾號列表、內(nèi)容詳情頁、朋友圈等產(chǎn)品廣告位進(jìn)行特定用戶群體推送，無需用戶關(guān)注也可以看到并進(jìn)行轉(zhuǎn)化。
用戶一旦關(guān)閉通知權(quán)限，對產(chǎn)品來說無疑是一個(gè)損失，這意味著沒有消息通知的推動(dòng)，用戶的使用頻率以及與產(chǎn)品之間的互動(dòng)顯然會(huì)減少（就連夫妻之間都需要時(shí)?；?dòng)與溝通交流，何況對于有選擇余地的產(chǎn)品），時(shí)間長了，用戶轉(zhuǎn)投其他產(chǎn)品的“懷抱”也不是不可能。
有沒有想過，用戶只是關(guān)閉通知權(quán)限而已，并沒有卸載APP，真的就沒辦法了嗎？是不是該做點(diǎn)什么...
用戶之所以還未卸載APP，說明還有價(jià)值，歸根結(jié)底，關(guān)閉通知權(quán)限的原因都是因?yàn)橄⒌摹翱褶Z亂炸”帶來的無盡騷擾，幾乎沒有例外，而產(chǎn)品還會(huì)添上一把火，用戶再次打開APP時(shí)無底線的催促用戶再度開啟，耗盡用戶最后一點(diǎn)耐心后，或許再也沒有機(jī)會(huì)了。
這個(gè)時(shí)候，設(shè)計(jì)師考慮的不是頻繁提醒用戶開啟，而是用戶關(guān)閉通知的真正原因（“狂轟亂炸”只是概括），細(xì)化各種可能性，然后從中找出機(jī)會(huì)點(diǎn)，但凡有所改進(jìn)都值得試一試，畢竟相比什么都不做不會(huì)更糟。這么解釋似乎毫無說服力，下面舉個(gè)例子：
當(dāng)產(chǎn)品中的某項(xiàng)免費(fèi)服務(wù)突然有一天開始收費(fèi)了，但受到了大多數(shù)用戶的抵觸，這個(gè)時(shí)候你該怎么做，是無視用戶訴求繼續(xù)收費(fèi)、還是恢復(fù)到之前的免費(fèi)？這并不是一個(gè)選擇題，繼續(xù)收費(fèi)會(huì)導(dǎo)致大量用戶流失、恢復(fù)免費(fèi)可能連維持運(yùn)營成本都難，所以不經(jīng)思索的選擇草草收場、連下下策都算不上。用戶抵觸的原因可能收費(fèi)過高或是與實(shí)際價(jià)值不符，有沒有想過利用限時(shí)折扣、附加其他增值服務(wù)（成本較?。┗蛘呓M合捆綁銷售也不失為一種策略。
那么，到底該如何做既能愉快的發(fā)送消息通知、還能能挽回用戶的心呢？
用戶關(guān)閉通知權(quán)限，并非沒有需求，最典型的就是在某寶、某東加了滿滿一“車”商品等待降價(jià)，然后抱怨消息通知太吵關(guān)掉了通知權(quán)限，最后就是無法收到折扣通知、還把問題怪在了APP身上，著實(shí)太冤。用戶只要還有需求，通知權(quán)限就還有被重新開啟的機(jī)會(huì)。
1）損失厭惡/利益引誘
首先，我們需要找出對應(yīng)的價(jià)值點(diǎn)，利用優(yōu)秀的文案給予用戶思考的余地，用戶每多思考一會(huì)，結(jié)果都有可能發(fā)生改變。
人們都討厭失去，對于損失的不可控很難接受，在引導(dǎo)用戶開啟通知權(quán)限時(shí)，需要強(qiáng)調(diào)不開啟會(huì)失去什么，畢竟面對“得到”和“失去”時(shí)，損失更加讓人難以忍受，例如物流產(chǎn)品告訴用戶“未開啟通知，將錯(cuò)過重要的快遞信息”。還可以通過激勵(lì)等進(jìn)行利益引誘，如“開啟后能及時(shí)獲取紅包卡券、折扣通知”等，并提供快捷通道，促使用戶重新開啟通知權(quán)限。
2）消息分類/分別處理
每種類型的通知都不可能符合所有用戶的“胃口”，針對社交、電商類產(chǎn)品，可將通知類型分類處理，用戶希望接收哪種類型的消息單獨(dú)開啟即可。
例如支付寶將消息拆分為多個(gè)類型；京東還增加了午休免打擾設(shè)置，開啟后在12：30-13：30不會(huì)收到任何消息提醒；微信群過多、消息太吵時(shí)，開啟免打擾又擔(dān)心錯(cuò)過重要人的信息，于是微信在去年上線了開啟群消息免打擾后、可設(shè)置群內(nèi)4個(gè)人的消息正常通知，算是比較人性化的設(shè)計(jì)了。
3）提供關(guān)閉/關(guān)不徹底
部分產(chǎn)品提供了關(guān)閉消息通知功能，但又關(guān)不徹底，這是產(chǎn)品基于妥協(xié)的基礎(chǔ)上，依然在低頻推送消息的“流氓”玩法，與用戶完全關(guān)閉相比，已經(jīng)算是不錯(cuò)的結(jié)果了。
常見于PC客戶端，就像很多軟件的插件一樣，不管怎么關(guān)，總是無法徹底關(guān)閉，甚至還將開啟操作偽裝成其他內(nèi)容引導(dǎo)用戶誤觸；手機(jī)短信推送也會(huì)有這種情況，用戶回復(fù)過“退訂”后依然會(huì)收到相關(guān)短信。
這種方式需謹(jǐn)慎使用，在用戶關(guān)閉通知后，需通過后續(xù)推送內(nèi)容的質(zhì)量、頻率試探用戶底線，然后逐漸提升，切不可無視用戶操作。
反復(fù)推送相同的內(nèi)容只會(huì)讓用戶更加反感，回復(fù)退訂、卸載應(yīng)用都可能在這一刻發(fā)生。
很明顯，消息發(fā)出后，如果用戶的觸達(dá)率較高就沒必要再次推送。反之觸達(dá)率較低，重復(fù)推送會(huì)讓用戶有種被催促、脅迫的感覺，適得其反，觸達(dá)率低有沒有可能是文案不夠友好、表達(dá)不夠清晰或者吸引力不夠？即便同一件事情，也盡量使用不同的表達(dá)方式，如何想辦法重新引起用戶的關(guān)注才是關(guān)鍵點(diǎn)。
中華文字博大精深，且有56個(gè)民族，其性格習(xí)慣各異，特別在利用當(dāng)前社會(huì)熱點(diǎn)、媒介進(jìn)行的營銷推送時(shí)，盡可能規(guī)避掉敏感信息，如地域/民族歧視、性暗示等。
很多時(shí)候，消息推送太少無法滿足產(chǎn)品目標(biāo)、太多則會(huì)惹惱用戶導(dǎo)致通知權(quán)限被徹底關(guān)閉，所以不僅要考慮消息推送頻率，更重要的是對受眾群體進(jìn)行分類、分別推送，不要每次都一股腦的將消息發(fā)給所有用戶，當(dāng)然，能做到千人千面（成本大）則會(huì)更好。
沒有用戶愿意在不明所以的情況下來看長篇大論的內(nèi)容，需確保消息內(nèi)容簡單直接、清晰易懂，并符合用戶認(rèn)知習(xí)慣，還得保持友好的語氣以及富有創(chuàng)造力的品牌形象。
處于營銷目的時(shí)，可利用感興趣的事件/事物勾起用戶的點(diǎn)擊欲望，例如網(wǎng)絡(luò)熱詞、時(shí)下熱點(diǎn)等，筆者雖然并不提倡“標(biāo)題黨”，但不得不說，很多標(biāo)題黨都能起到不錯(cuò)的效果。
消息通知需要一個(gè)有效操作入口，并且在消息內(nèi)容中有對應(yīng)的指向，點(diǎn)擊應(yīng)用內(nèi)通知切換APP界面、應(yīng)用外推送鏈接跳轉(zhuǎn)至web頁，從始至終都需要為用戶提供一個(gè)查看更多內(nèi)容或參與的有效途徑。
消息通知設(shè)計(jì)的主要目的是在正確的時(shí)間、以正確的方式將內(nèi)容呈現(xiàn)給用戶，并提高產(chǎn)品的轉(zhuǎn)化率，不管用戶愿不愿意接受，這始終都是一個(gè)呈現(xiàn)信息的不錯(cuò)途徑。
本文主要總結(jié)了消息的通知渠道、常見問題處理、提升用戶觸達(dá)率的方法，以幫助新手設(shè)計(jì)師快速掌握完整的消息系統(tǒng)。或許最終的結(jié)果事與愿違，但不能否認(rèn)其魔力，需要做好的是確保消息內(nèi)容質(zhì)量、對應(yīng)的受眾群體及合理的推送渠道，相信總有一種方式適合你產(chǎn)品。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
眾所周知，人機(jī)交互是一門集調(diào)研，構(gòu)思，設(shè)計(jì)和測試為一體的學(xué)科。作為一門覆蓋多領(lǐng)域的多學(xué)科，包括并不限于心理學(xué)，行為學(xué)，編程，工程，設(shè)計(jì)，調(diào)研，和工商管理，現(xiàn)代人機(jī)交互的核心已經(jīng)不再是從技術(shù)層面去解決問題， 而是側(cè)重于以多個(gè)視角去挖掘問題的本質(zhì)并思考問題背后的價(jià)值。也因此，人機(jī)交互學(xué)術(shù)界一直以來都試圖尋找一種思考模式，或者理論模型，去將復(fù)雜的思考流程提煉出來。
近三十年來，人機(jī)交互領(lǐng)域的方法論可謂百花齊放，盡管許多知名研究機(jī)構(gòu)與院校都發(fā)布了不同的設(shè)計(jì)模型與流程圖，但是其內(nèi)核終究大致相同（尋找問題——定義問題——設(shè)計(jì)——測試）。
以下是近年來國際最主流的七種人機(jī)交互設(shè)計(jì)模型：
1. 尼爾森諾曼集團(tuán)設(shè)計(jì)流程 （Nielsen Norman Group）
2. 斯坦福大學(xué)設(shè)計(jì)學(xué)院設(shè)計(jì)流程（Stanford Design Thinking Process）
3. 《情景化設(shè)計(jì):為生活而設(shè)計(jì)》 中的設(shè)計(jì)流程 （Contextual Design: Design for Life）
4. IBM環(huán)形設(shè)計(jì)模型 （IBM Loop Model）
5. 英國設(shè)計(jì)協(xié)會(huì)雙鉆石設(shè)計(jì)模型（Design Council Double Diamond）
6. LUMA 學(xué)院設(shè)計(jì)流程（LUMA Institute Design process）
7. Dubberly Design Office 橋型設(shè)計(jì)模型（Analysis-Synthesis Bridge Model）
其中，前6種應(yīng)該都是大家相對熟悉的，我們在文末也附上了官方鏈接供大家探索。今天這篇文章我們將簡要的帶大家了解列表中最后一個(gè)也是最有特色的一個(gè)人機(jī)交互模型：橋型模型（Analysis-Synthesis Bridge Model）。
橋型模型是美國 Dubberly Design Office發(fā)表的設(shè)計(jì)流程圖（Analysis-Synthesis Bridge Model），對于不清楚的讀者，此公司的創(chuàng)始人Hugh Dubberly 曾發(fā)布超五十篇人機(jī)交互領(lǐng)域的研究型文章，在多個(gè)知名設(shè)計(jì)協(xié)會(huì)掛名，并被錄入美國 ACM 的 SIGCHI Academy， 成為公認(rèn)對人機(jī)交互領(lǐng)域做出最杰出貢獻(xiàn)的人之一。Dubberly 也曾在多個(gè)美國知名大學(xué)任職，因此，此模型也是多數(shù)國際人機(jī)交互學(xué)科的公認(rèn)理論。
盡管相較于其他的流程圖，這個(gè)流程圖較為抽象，但是其所用的多維度分類卻相對明了的闡釋了設(shè)計(jì)的本質(zhì)。如圖所示，橋型模型的x軸分為現(xiàn)在和未來，y軸分為具象和抽象，以此來定義設(shè)計(jì)的狀態(tài)。同時(shí)也加入了動(dòng)詞“形容”，“分析”，“研究”，“制作”去定義設(shè)計(jì)中的操作。在這個(gè)橋型設(shè)計(jì)流程中，設(shè)計(jì)師從左下角到右下角的過程代表從現(xiàn)象走向抽象再從抽象走向產(chǎn)品的過程，與此同時(shí)也代表著從今天走向明天，或者說從問題的現(xiàn)在態(tài)走向解決問題后的未來態(tài)。
起點(diǎn)從左下角開始，（what “is”）代表著問題本身，而左上角的（model of what “is”） 代表問題的抽象模型或者問題的本質(zhì)。這兩個(gè)階段代表著設(shè)計(jì)中的調(diào)研階段（Researching）。此時(shí)的設(shè)計(jì)師應(yīng)該通過“形容具象的現(xiàn)象”（左下角格子 Describe+Concrete）即收集信息來拓寬對問題的了解然后再進(jìn)行“分析抽象的模型”（左上角格子Interpret+Abstract）去制作問題模型來更清晰的看到現(xiàn)象的本質(zhì)和規(guī)律。
在這個(gè)階段，“世界并不清楚他想要什么樣的設(shè)計(jì)”—— Paola Antonelli
在開始階段之所以要抽象出問題模型，是因?yàn)樽鳛樵O(shè)計(jì)師不能單純的聽從人們的訴求。當(dāng)生活中出現(xiàn)一個(gè)問題時(shí)，生活中人們往往不太清楚自己煩惱的本質(zhì)是什么，要么他們只看到了問題的表面，要么他們被太多因素混淆了。因此在這個(gè)階段，設(shè)計(jì)師的責(zé)任就是去分析問題存在的環(huán)境與原因，并且以人為中心的角度去分析表象下人們的真正需求。也是因此，避免以技術(shù)為中心的分析（machine-centered-research）而選擇以人為中心的研究（human-centered-research）才是交互設(shè)計(jì)師應(yīng)有的職責(zé)。
在做以人為中心的研究時(shí)，收集和分析信息時(shí)避免內(nèi)隱偏見（unconcious bias）是非常重要的。這里指由于生長在固定社會(huì)和文化下的而無意識帶有的偏見，比如身體健全的人忘記考慮殘疾人的需求，或者經(jīng)常用電子產(chǎn)品的人下意識認(rèn)為一些復(fù)雜操作很常規(guī)。在設(shè)計(jì)里，歧視不止包括在搜集用戶信息時(shí)忽略了個(gè)別群體，同時(shí)也包括設(shè)計(jì)師本身所帶的特定視角。一個(gè)成功的設(shè)計(jì)縱然應(yīng)該滿足大多數(shù)人的需求，但是一個(gè)向善的設(shè)計(jì)也不應(yīng)該忽視特殊群體的情況。這里不得不提到，雖然現(xiàn)如今很多設(shè)計(jì)往往依靠大數(shù)據(jù)來進(jìn)行設(shè)計(jì)，但是大數(shù)據(jù)本身就代表著忽略少部分群體的需求，導(dǎo)致少數(shù)群體的歧視愈發(fā)嚴(yán)重，甚至一度威脅到一些小眾的題材。因此在調(diào)研時(shí)考慮到人種，年齡，經(jīng)濟(jì)情況，教育程度，是否殘疾，和對科技的熟悉度可以更嚴(yán)謹(jǐn)?shù)姆治霾煌暯窍聠栴}的影響。
左下角常用的用戶研究方法有情景調(diào)查（contextual inquiry），利益相關(guān)者邏輯圖（stakeholder map)，和參與型研究(Participatory Research)等等。左上角常用的分析方式有帶入虛擬人格（persona）和流程圖（journey mapping）等等。
右側(cè)的兩個(gè)階段則代表問題的未來態(tài)或者設(shè)計(jì)原型態(tài)（prototyping）。右上角的 （model of what "could be")代表問題的未來的可能性，也就是一般說的設(shè)計(jì)和構(gòu)思部分，而右下角的（what “could be”）就是將這些未來的可能性做出來，從概念化為產(chǎn)品。
然而如何從右上角的抽象模型到右下角具體設(shè)計(jì)呢？在這里便需要了解一個(gè)大致的設(shè)計(jì)信息層級。
如圖所示，一個(gè)設(shè)計(jì)的是由多層結(jié)構(gòu)組成的，從抽象到具象分為五個(gè)階段，策略（Strategy），內(nèi)容（Scope），結(jié)構(gòu)（Structure），框架（Skeleton），視覺（Surface）。一個(gè)嚴(yán)謹(jǐn)?shù)脑O(shè)計(jì)應(yīng)該是從下而上發(fā)展的（從深層的策略到淺層視覺），并且每次在考慮深層的策略時(shí)應(yīng)該避免淺層的干擾。這是因?yàn)闇\層只是策略的表現(xiàn)的方式，而深層策略才是決定產(chǎn)品核心價(jià)值的關(guān)鍵。決定策略（Strategy）時(shí)應(yīng)該直接依據(jù)模型左上角“問題的本質(zhì)”來決定要設(shè)立什么樣的產(chǎn)品目標(biāo)。只有策略定了，才能確定這個(gè)產(chǎn)品的內(nèi)容與受眾群體。假如目標(biāo)是讓盲人點(diǎn)餐，那么內(nèi)容有可能就是在這個(gè)頁面提供特殊的菜單形式和電話快捷鍵。而假如目標(biāo)是讓人聽音樂，那么內(nèi)容可能就是提供音樂推薦與保存。而在結(jié)構(gòu)方面，確立內(nèi)容后只需要一個(gè)完善的邏輯，比如用戶的具體使用流程是什么，就可以快速具現(xiàn)這個(gè)產(chǎn)品的結(jié)構(gòu)。最后，框架和視覺階段則更多只是一種表現(xiàn)手法的選擇。無論最終選擇如何設(shè)計(jì)，只要保證框架和視覺元素在整個(gè)產(chǎn)品中保持一致并且符合產(chǎn)品定位即可。
從策略到視覺的過程也就是模型中從右上角到右下角的過程。每個(gè)設(shè)計(jì)師的目標(biāo)都應(yīng)該是以具象的產(chǎn)品實(shí)現(xiàn)相對抽象的策略。而要想讓視覺和策略緊密聯(lián)系，就應(yīng)該盡可能在每一步的過度時(shí)都考慮到前后步驟的銜接是否邏輯通順，避免層與層之間脫節(jié)的現(xiàn)象發(fā)生。盡管在現(xiàn)實(shí)中，層與層之間的分隔往往沒有這么清楚，但是這種分層的設(shè)計(jì)邏輯可以作為一個(gè)有用的構(gòu)思框架，讓設(shè)計(jì)師在發(fā)散思維的時(shí)候不偏離目標(biāo)。
而最后即便到了右下角的產(chǎn)品產(chǎn)出，一個(gè)完整的設(shè)計(jì)流程也不算結(jié)束。一個(gè)成功的設(shè)計(jì)總是需要多個(gè)設(shè)計(jì)迭代的。盡管在每一個(gè)一個(gè)迭代中，右下角可能是最終產(chǎn)出，但是在一個(gè)完整設(shè)計(jì)流程里，右下角還應(yīng)該連接左下角，將已經(jīng)完成的設(shè)計(jì)再一次進(jìn)行分析和測試并總結(jié)出優(yōu)缺點(diǎn)，再進(jìn)行下一輪的設(shè)計(jì)。
在右上角的設(shè)計(jì)部分中經(jīng)常使用的方法有故事模版（story boarding），紙質(zhì)低保真模版（paper prototyping），和以人為中心設(shè)計(jì)（human centered design）等等。
總而言之，橋型模型作為國際人機(jī)交互院校最常用的模型，從多個(gè)角度描述了從一個(gè)問題從研究到解決的過程。我們可以看得出，設(shè)計(jì)從來都不是一個(gè)隨性而為的過程。從左側(cè)的無偏見而系統(tǒng)的分析問題到右側(cè)的遵循結(jié)構(gòu)進(jìn)行設(shè)計(jì)，設(shè)計(jì)師都應(yīng)該在一個(gè)嚴(yán)謹(jǐn)?shù)目蚣芟逻M(jìn)行思考和設(shè)計(jì)，這樣才能做到有針對性的解決問題。在這里也希望大家能多多關(guān)注各類人機(jī)交互設(shè)計(jì)理念并從中獲取靈感亦或找到適合自己的設(shè)計(jì)流程。
下面是六種其他主流國際人機(jī)交互模型和官方鏈接供大家探索：
1. 尼爾森諾曼集團(tuán)設(shè)計(jì)流程 （Nielsen Norman Group）
研究問題領(lǐng)域（discover），探索不同可能（explore），測試設(shè)計(jì)（test)，和傾聽反饋(listen)
官網(wǎng)鏈接： https://web.stanford.edu/~mshanks/MichaelShanks/files/509554.pdf
2. 斯坦福大學(xué)設(shè)計(jì)學(xué)院設(shè)計(jì)流程（Stanford Design Thinking Process）
抽離問題(empathize)，定義問題(define)，尋找靈感(ideate)，制作原型(prototype)，測試成品(test)。
官網(wǎng)鏈接： https://web.stanford.edu/~mshanks/MichaelShanks/files/509554.pdf
3. 《情景化設(shè)計(jì):為生活而設(shè)計(jì)》 中的設(shè)計(jì)流程 （Contextual Design: Design for Life）
理解問題(understand)，發(fā)明未來(invent)，情景話設(shè)計(jì)(design)，制作原型(validate)，和開發(fā)產(chǎn)品(develop)。
書本鏈接：https://www.goodreads.com/book/show/33805307-contextual-design
4. IBM環(huán)形設(shè)計(jì)模型 （IBM Loop Model）
觀察(observe)，反思反饋(reflect)，和制作（make）。
官網(wǎng)鏈接： https://www.ibm.com/design/thinking/page/framework/loop
5. 英國設(shè)計(jì)協(xié)會(huì)雙鉆石設(shè)計(jì)模型（Design Council Double Diamond Model）
發(fā)現(xiàn)(discover)，定義(define)，制作(develop)，傳遞(deliver)。
6. LUMA 學(xué)院設(shè)計(jì)流程（LUMA Institute Design process）
看(looking)，理解(understanding)，制作(making)。
官網(wǎng)鏈接： https://www.luma-institute.com/about-luma/luma-system/
以上就是本篇的全部內(nèi)容了，希望大家讀完后能對國際主流人機(jī)交互領(lǐng)域多了一些了解或者從中獲取一些啟發(fā)。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
作者：騰訊ISUX團(tuán)隊(duì) 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
平時(shí)用QQ音視頻來做什么呢？和好友聊天？與家人聯(lián)系？還是工作開會(huì)？現(xiàn)在你有了新選擇，解鎖視頻娛樂新方式，QQ一起派對讓你不必出門，也能和好友一起玩聚會(huì)游戲。
挖掘更好玩的娛樂社交場景，能帶給用戶更愉悅的體驗(yàn)。疫情期間，線下聚會(huì)因此受限，線上娛樂應(yīng)運(yùn)而生，在此契機(jī)之下，期望借助音視頻實(shí)時(shí)互動(dòng)、聲影重現(xiàn)的特性，開啟了新的娛樂形態(tài)——QQ一起派對。
觀察競品普遍存在不足之處，即缺乏真實(shí)聚會(huì)游戲的氛圍與互動(dòng)。因此，解決社交游戲產(chǎn)品缺少真實(shí)情境的問題，成為QQ一起派對的創(chuàng)新機(jī)會(huì)點(diǎn)，有利于在競品中突圍，塑造差異化優(yōu)勢。
QQ一起派對是基于音視頻展開的線上聚會(huì)游戲，結(jié)合了實(shí)時(shí)互動(dòng)與娛樂化內(nèi)容。為了讓游戲過程更貼近真實(shí)聚會(huì)場景，我們從游戲氛圍和自然交互兩方面切入，尋找創(chuàng)新突破口。
游戲氛圍
構(gòu)建適用于游戲類型的界面框架，讓線上聚會(huì)更貼近真實(shí)世界，并運(yùn)用視覺感染力，營造環(huán)境氛圍，包括場景具象化、增強(qiáng)代入感等方法，實(shí)時(shí)感知好友的情感變化，從而獲得社交臨場感，在心理上感到彼此的存在。
自然交互
有別于競品需通過點(diǎn)擊按鈕作答，QQ一起派對利用實(shí)時(shí)語音識別，讓用戶通過更自然的人機(jī)交互方式，在游戲過程中進(jìn)行語音搶答，彷佛置身于真實(shí)世界中與好友互動(dòng)，成為QQ一起派對的獨(dú)特賣點(diǎn)（Unique Selling Proposition）。
綜上所述，QQ一起派對的設(shè)計(jì)要素包括：、
1. 社交臨場感（Social Presence）：場景具象化、高度同步實(shí)時(shí)響應(yīng)、感知他人情感變化
2. 沉浸感（Immersion）：營造氛圍、增強(qiáng)代入感、突出內(nèi)容與主角
3. 可玩性（Playability）：游戲界面、游戲機(jī)制、游戲互動(dòng)
4. 凝聚力（Cohesion）：將好友聚在一起、吸引更多用戶來玩
舞臺(tái)場景化布局
QQ一起派對能讓用戶創(chuàng)建房間，邀請好友參加線上聚會(huì)，促使游戲氛圍具象化。游戲類型聚焦于〝你演我猜〞、〝明星問答〞等猜題游戲，為了增強(qiáng)代入感，讓用戶融入情境之中，我們采用舞臺(tái)表演的界面隱喻（Interface Metaphor），借由深色背景突出內(nèi)容與表演者。界面框架選擇一個(gè)大畫面與多個(gè)小畫面的組合，更貼近輪流上臺(tái)表演的游戲類型。通過舞臺(tái)場景化布局，模擬線下互動(dòng)的真實(shí)感。
我們真實(shí)還原了線下?lián)尨鸬幕?dòng)體驗(yàn)，通過倒計(jì)時(shí)動(dòng)效、實(shí)時(shí)分?jǐn)?shù)標(biāo)簽，以及搶答成功反饋，增添游戲的緊張感與刺激感。
在游戲過程中，除了通過視頻畫面感知好友的情感變化，用戶的語音狀態(tài)也會(huì)實(shí)時(shí)反饋在頭像上，響應(yīng)搶答題目、好友交談，以及各種表達(dá)情緒的聲音，借著聲音視覺化的效果，搭配視頻與人聲的重現(xiàn)，交織出多層次的感官體驗(yàn)。
發(fā)送邀請是召集好友的重要途徑，而作為〝邀請函〞的消息，需要傳達(dá)明確的信息，讓用戶一眼就能感知房間內(nèi)的狀態(tài)，包括準(zhǔn)備開始、游戲中、游戲結(jié)束等，避免用戶點(diǎn)擊加入游戲時(shí)，卻因游戲已開始或結(jié)束而無法加入。為此，我們將邀請消息實(shí)況化，持續(xù)更新當(dāng)前狀態(tài)、參與成員等，讓用戶能實(shí)時(shí)感知派對房間的變化。
QQ一起派對初期聚焦于好友一起玩，但仍不免發(fā)生創(chuàng)建了房間，當(dāng)下找不到好友，或因等待過久而退出房間的狀況，使得創(chuàng)建房間到實(shí)際參與的轉(zhuǎn)化率受到影響。從用戶訪談結(jié)果來看，用戶存在排解寂寞的心理訴求，但對象不一定得是熟人好友，因此渴望找到游戲伙伴、快速開始游戲，成為QQ一起派對擴(kuò)展至陌生人玩法的契機(jī)。
針對找不到好友的問題，我們新增了匹配陌生人的能力，用戶可從游戲大廳進(jìn)行隨機(jī)匹配，倘若創(chuàng)建房間后找不到好友，也能在房間內(nèi)匹配玩家，降低游戲參與門檻。
此外，進(jìn)一步優(yōu)化房間內(nèi)的界面布局，將游戲卡片縮小平鋪排列，讓用戶一眼就能看到多款游戲，提升對游戲數(shù)量的感知與轉(zhuǎn)化率。在游戲類型上，新增了猜歌與知識問答兩款游戲，并提升現(xiàn)有題庫質(zhì)量，避免游戲趣味性不足，影響用戶留存率。
為了增強(qiáng)游戲氛圍，我們通過情感化設(shè)計(jì)帶領(lǐng)用戶進(jìn)入情景中，讓用戶更好地理解每個(gè)玩法，并從游戲玩法與情感訴求提煉出場景元素，以此搭建游戲世界觀，并將故事情節(jié)加以推演，增強(qiáng)趣味性與獨(dú)特性，還能進(jìn)一步提升記憶度。
光效有利于吸引和聚焦視線，并以不同的表現(xiàn)形式來影響情緒。我們從光的色彩、動(dòng)效、光感和造型等層面，創(chuàng)造出五種增強(qiáng)感官體驗(yàn)的光效設(shè)計(jì)，將其應(yīng)用在游戲大廳入口，借由不同的光效類型與動(dòng)畫形態(tài)，強(qiáng)化用戶的世界觀感知。
帶有情感的故事會(huì)在記憶中發(fā)酵，引領(lǐng)用戶進(jìn)入場景。我們將游戲入口的功能屬性，轉(zhuǎn)化為富有故事性的場景設(shè)計(jì)，當(dāng)用戶被故事所吸引，多感官區(qū)域被激活，將會(huì)激發(fā)用戶情緒，有利于記憶與理解游戲入口，對游戲產(chǎn)生共情，進(jìn)而超出產(chǎn)品的功能價(jià)值，與用戶建立情感鏈接。
例如匹配陌生人入口，使用QQ的IP形象駕駛UFO，準(zhǔn)備召集用戶前往神秘的太空之旅，意味著通過陌生人匹配，你將擺脫寂寞，以光速般的速度找到游戲伙伴、快速開始游戲。通過故事劇情激發(fā)情感共鳴，并適當(dāng)結(jié)合IP滲透品牌價(jià)值，吸引用戶參與游戲。
破格設(shè)計(jì)能夠加強(qiáng)張力、突出游戲主題，我們運(yùn)用破格效果的3D圖標(biāo)造型，彰顯游戲的獨(dú)特調(diào)性，樹立鮮明的品牌印象。
組件化除了提高設(shè)計(jì)效率，還能從整體一致性考量差異化。我們將游戲卡片、題庫卡片、提示卡片和入口卡片等功能界面，構(gòu)建一套組件系統(tǒng)，讓框架布局貫通全流程，打造體驗(yàn)一致的可玩性，利于后續(xù)的擴(kuò)充與延展。
根據(jù)游戲可玩性研究，提供挑戰(zhàn)與磨練技巧的機(jī)會(huì)，對持續(xù)參與游戲的動(dòng)機(jī)有正面影響。有鑒于此，除了提供隨機(jī)匹配、召集同好共樂，我們還設(shè)計(jì)了極限生存戰(zhàn)玩法，希望借著1v1淘汰賽制增添樂趣與挑戰(zhàn)性，激發(fā)用戶持續(xù)參與的動(dòng)力，特別是年輕人酷愛這種競技感，擊敗的對手越多，獲得的獎(jiǎng)勵(lì)就越高，有利于勾起用戶的勝負(fù)欲。
為了營造同場競技的臨場感，我們利用匹配動(dòng)效強(qiáng)化氛圍。隨著已加入玩家的數(shù)字不斷增加，底部會(huì)實(shí)時(shí)展示用戶頭像，具象化呈現(xiàn)玩家數(shù)量，烘托熱鬧氣氛，消除等待時(shí)的焦慮感，讓用戶處于蓄勢待發(fā)的狀態(tài)，而紅藍(lán)對戰(zhàn)布局則進(jìn)一步強(qiáng)化PK宣戰(zhàn)的氛圍。過程中若有玩家遭到淘汰，用戶也能通過底部頭像感知剩馀玩家數(shù)量，以此增強(qiáng)游戲臨場感與成就感。
每輪擊敗對手時(shí)，答題區(qū)域?qū)⒆優(yōu)槿恋膽c祝畫面，搭配撒花特效、頭像聚光燈，營造歡愉的勝利氛圍。而在游戲結(jié)果頁，我們同樣利用色彩和動(dòng)效的差異對比，塑造勝敗雙方的情緒氛圍，以此增強(qiáng)榮譽(yù)感與儀式感。在生存戰(zhàn)登頂挑戰(zhàn)成功的用戶，將會(huì)站上頒獎(jiǎng)臺(tái)授予最高榮譽(yù)，在舞臺(tái)聚光燈的照耀下，迎接光榮勝利。排行榜有助于強(qiáng)化擊敗眾多好手的感知，激發(fā)勝利者的分享欲。
QQ一起派對推出后深受用戶喜愛、獲得廣泛好評，調(diào)研結(jié)果顯示，用戶整體評價(jià)相當(dāng)高，也樂于將QQ一起派對推薦給好友。
綜而觀之，音視頻除了廣泛應(yīng)用在通訊場景，正逐漸賦能更多創(chuàng)新場景，而娛樂場景更成為兵家必爭之地。QQ一起派對開啟了新的娛樂形態(tài)，充分發(fā)揮音視頻聲影重現(xiàn)的獨(dú)特優(yōu)勢，消弭了空間距離，嘗試解決社交游戲產(chǎn)品缺少真實(shí)情境的問題，讓游戲過程更具臨場感，就像面對面進(jìn)行游戲一般。未來將從玩法豐富性、游戲挑戰(zhàn)性、題庫可玩性三方面持續(xù)優(yōu)化，打造更好玩的音視頻體驗(yàn)。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
作者：騰訊ISUX團(tuán)隊(duì) 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
距離業(yè)界首次提出“全鏈路設(shè)計(jì)師”這個(gè)概念已經(jīng)過去了幾年，從稱謂的變化我們就可以感受到設(shè)計(jì)師這一角色職責(zé)的變化。在近幾年的產(chǎn)品設(shè)計(jì)工作中，我們和上下游之間的協(xié)作越來越緊密，介入階段越來越往前，新的趨勢對設(shè)計(jì)師也提出了更高的要求，包括更深入的產(chǎn)品思考，對用戶的時(shí)時(shí)洞察，高效的溝通合作，以及細(xì)致的質(zhì)量把控等等。那么如何成為一個(gè)全能型的互聯(lián)網(wǎng)設(shè)計(jì)師呢？本文以日常工作流程為路徑，為大家整理了一波實(shí)用小技巧和小工具。希望能夠幫助大家在保持設(shè)計(jì)的專業(yè)度的同時(shí)，在工作的方方面面都能夠得心應(yīng)手。
有效的設(shè)計(jì)積累讓我們事半功倍。養(yǎng)成隨手記錄的習(xí)慣，逐漸形成自己的素材庫，不僅能夠讓我們在需要的時(shí)候能夠快速檢索靈感，偶爾回顧也總能有新的感受。
字體識別神器：WhatFont
當(dāng)你想知道一個(gè)設(shè)計(jì)精美的網(wǎng)站設(shè)計(jì)使用了什么字體時(shí)，可以安裝一款叫做 WhatFont 的瀏覽器插件，開啟時(shí)鼠標(biāo) hover 到文字上即可快速識別出字體、字號、字重、行高和顏色。對于不習(xí)慣使用控制臺(tái)的朋友來說非常簡單實(shí)用。
插件最新的版本停留在 2017 年，不過在大部分網(wǎng)頁上都是可以正常使用的。同類產(chǎn)品還有 Fonts Ninja 等，除了識別字體還可以收藏和管理字體，可根據(jù)你的需要進(jìn)行選擇。
用戶體驗(yàn)設(shè)計(jì)檔案: UXArchive
該網(wǎng)站收集了來自世界一流的科技公司的產(chǎn)品用戶體驗(yàn)流程。例如，你正在設(shè)計(jì)“忘記密碼”體驗(yàn)，需要參考時(shí)通常都是打開不同的 App 一個(gè)一個(gè)體驗(yàn)和截圖。而通過這個(gè)網(wǎng)站，你可以根據(jù)場景快速瀏覽其他公司的示例，對比不同的解決方案。
地址：https://uxarchive.com/
素材管理: Eagle
Eagle 應(yīng)該是很多設(shè)計(jì)師耳熟能詳?shù)乃夭墓芾懋a(chǎn)品了，它支持圖片和視頻等基礎(chǔ)格式，有豐富的標(biāo)簽系統(tǒng)和智能分類功能。此外還支持可視的字體管理，也能夠預(yù)覽 PSD 格式（常用的圖形和文稿格式基本都支持），可用于放一些 mockup 素材。自動(dòng)解析圖片色板，從而允許按顏色搜索也是相當(dāng)實(shí)用。
地址：https://cn.eagle.cool/
靈感速記: Flomo
Flomo 是一款非常輕量的筆記工具，用類似發(fā)微博的方式快速記錄一些知識片段。相比 Eagle 用于“剪藏”已有的內(nèi)容，F(xiàn)lomo 更注重主動(dòng)創(chuàng)造和記錄。產(chǎn)品的功能目前非常簡單，但背后的「卡片筆記法」理念很有意思，提倡先快速積累卡片，然后通過標(biāo)簽和關(guān)聯(lián)讓結(jié)構(gòu)涌現(xiàn)，積累知識的復(fù)利。感興趣的朋友可以了解他們對于“知識管理”的思考。
地址：https://help.flomoapp.com/weekly/orgin
當(dāng)我們進(jìn)入到產(chǎn)品設(shè)計(jì)工作中時(shí)，了解用戶往往是最重要的前提和基石。大公司的團(tuán)隊(duì)往往有專職的用戶調(diào)研團(tuán)隊(duì)來協(xié)助產(chǎn)品設(shè)計(jì)，但對小型一點(diǎn)都團(tuán)隊(duì)可能用戶調(diào)研這個(gè)流程是全部歸到設(shè)計(jì)師角色里的。而且即使有專門的用研報(bào)告，直接觀察用戶的行為和描述往往是最直觀的，也更容易洞察到問題和機(jī)會(huì)。這里介紹兩種我們常用的低成本的方法。
用戶反饋什么: 七麥
如果你的產(chǎn)品是一個(gè)成熟的上架了各大應(yīng)用商店的 App，可以通過一些第三方平臺(tái)看到各應(yīng)用商店的評分評論匯總，構(gòu)成和趨勢，也可以將自己的 App 和競品放到一起對比。例如我日常使用的“七麥”，可以通過微信訂閱每日評分變化，也可以導(dǎo)出指定時(shí)間段的評論的匯總表格，做更深入的檢索和分析。
用戶談?wù)撌裁? 微博
商店評分和用戶反饋通常的內(nèi)容通常比較有針對性，大部分都是圍繞已有的功能。如果想要看到用戶在生活中如何使用我們的產(chǎn)品，使用過程中有什么樣的情緒和感受，看他們?nèi)绾卫斫庠谟玫倪@個(gè)東西，則可以去社交平臺(tái)上搜索產(chǎn)品的關(guān)鍵詞，常常會(huì)有些很有趣的發(fā)現(xiàn)。據(jù)說早期微信的剪刀石頭布的想法就來源于一個(gè)微博用戶的分享。
來到我們最熟悉的設(shè)計(jì)實(shí)操階段。設(shè)計(jì)類工具非常多，Sketch 和 Figma 也都有相對豐富的插件市場，這里選擇了幾個(gè)我們?nèi)粘Ｊ褂玫男」ぞ邅磉M(jìn)行分享。聰明地使用已有資源，可以幫助我們呈現(xiàn)最好的設(shè)計(jì)概念。
Mesh Gradient 網(wǎng)格漸變工具
一款 Figma 插件，Illustrator 里強(qiáng)大的 Mesh 功能在 Figma 里也能用了。做好的漸變還可以保存下來多次復(fù)用。
Runner Pro
如果你主力使用 Sketch，習(xí)慣鍵盤操作，熟悉各種指令名稱，而且有完整的組件庫，那么 Runner Pro 將會(huì)是一個(gè)很好的 Sketch 助手。它的使用方式就像在 Mac 中使用系統(tǒng)聚焦搜索，通過一個(gè)搜索框即可快速完成組件插入，指令運(yùn)行，插件安裝，以及快速前往某個(gè)畫板。
Runner 的組件搜索支持中文，但對于多個(gè)關(guān)鍵詞的模糊搜索還是對英文支持比較完整。
Blush 插畫插件
一個(gè)由 Pablo Stanley 設(shè)計(jì)的免費(fèi)可商用的手繪風(fēng)格的插圖庫。任務(wù)造型有數(shù)十種選項(xiàng)可供選擇，可以自定義角色的頭發(fā)、褲子、膚色等等，無需打開 Illustrator 即可創(chuàng)建獨(dú)一無二的插圖。適合用來做運(yùn)營插畫，拼用戶故事版，PPT配圖等。
地址：https://blush.design/zh-CN
另外也有越來越多的設(shè)計(jì)師開始用 Figma 的原型功能直接做 PPT 了，順應(yīng)這個(gè)趨勢他們還提供同系列的 ppt 模板，一鍵套娃。
POSE 人體姿勢參考
在自己畫人物插畫的時(shí)候，如果對人體動(dòng)作和比例難以把握，那一定不能錯(cuò)過這個(gè)插件—POSE。它是我發(fā)現(xiàn)的用于創(chuàng)建解剖學(xué)和身體插圖的最佳工具。Gal Shir 在 Behance 和 Dribbble 上都有眾多的粉絲，這是他在 Snapchat 做插畫師時(shí)創(chuàng)作的軟件。
地址：https://galshir.com/pose/
動(dòng)畫曲線預(yù)覽
細(xì)膩的動(dòng)畫能夠讓體驗(yàn)更有溫度，這個(gè)網(wǎng)站提供了五種簡單的網(wǎng)頁版式和最基礎(chǔ)的三組動(dòng)畫曲線，你可以選擇最適合你的 demo，體驗(yàn)不同動(dòng)畫曲線在實(shí)際頁面上的感受。底部還可以調(diào)整具體參數(shù)來達(dá)到想要的效果。
地址：
需求過程中我們需要反復(fù)和上下游溝通，在這個(gè)階段里設(shè)計(jì)稿是解決方案的可視化呈現(xiàn)，是中間產(chǎn)物，首先要滿足方便溝通和傳遞的訴求。方案定稿后，交付的則是產(chǎn)品的設(shè)計(jì)藍(lán)圖，首要確保方案的完整性，要能夠拆解和執(zhí)行。
Design Project Template
這是由 Dropbox 團(tuán)隊(duì)整理的設(shè)計(jì)項(xiàng)目模板，可以從 Figma Community 中復(fù)制一份使用。每份設(shè)計(jì)稿都包含基礎(chǔ)的項(xiàng)目信息，責(zé)任人，進(jìn)度等概覽信息，尤其對于直接和開發(fā)、產(chǎn)品經(jīng)理共享 Figma 稿件的團(tuán)隊(duì)而言很好地保留了相關(guān)的上下文信息，提升項(xiàng)目溝通效率。
設(shè)計(jì)協(xié)作工具 XSHOW
XSHOW是一款由 ISUX 研發(fā)的高效設(shè)計(jì)協(xié)作平臺(tái)，通過其官方 Sketch 插件，你可一鍵將設(shè)計(jì)稿上傳到云端，XSHOW 會(huì)保留完整的版本記錄和成員操作。上傳到云端后分享給開發(fā)人員即可在線查看標(biāo)注，多端預(yù)覽。除此之外 XSHOW 的團(tuán)隊(duì)管理還可以控制權(quán)限時(shí)效，這一點(diǎn)在敏感項(xiàng)目對外合作的場景下可以說非常實(shí)用了。
地址:
https://xshow.tencent.com
還原自檢 Window Resizer + Zeplin
Window Resizer 是一款 Chrome 插件，正如其名就是可以把瀏覽器窗口固定到指定尺寸，可用于檢查網(wǎng)頁的自適應(yīng)策略，或截特定尺寸的圖。
我們常常配合標(biāo)注工具 Zeplin 的疊圖功能使用。將瀏覽器設(shè)置為和設(shè)計(jì)稿相同的尺寸，再將半透明設(shè)計(jì)稿疊上去即可一眼看出網(wǎng)頁是否還原到位，還有哪些地方需要調(diào)整。一圖勝千言，再也不怕開發(fā)哥哥說“看不出來”了，顯著提升了溝通效率和團(tuán)隊(duì)和諧氣氛。
使用示例: 上層為設(shè)計(jì)稿，下層為對應(yīng)瀏覽器尺寸的實(shí)現(xiàn)效果。
圖片壓縮工具
如果仍采用非在線的較為傳統(tǒng)的交付方式，通常需要導(dǎo)出為圖片發(fā)給對方。有時(shí)輸出網(wǎng)頁設(shè)計(jì)或者完整流程交互稿的尺寸較大，可以多做一步壓縮工作。一來同步方案的時(shí)候合作方更容易打開，另外需要導(dǎo)出多個(gè)版本時(shí)占用我們自己電腦空間也比較少。
如果圖片在 5M 以內(nèi)或者需要批量處理，可以用 ImageOptim 或者 Tinypng 應(yīng)用來進(jìn)行無損壓縮，通?？梢詼p少 60-90% 左右。但如果圖片尺寸超過 5M ，使用以上兩個(gè)應(yīng)用耗時(shí)較長而且容易失敗，此時(shí)可以試試在線壓縮網(wǎng)站 https://compresspng.com/，即使是超過 20M 的大圖也可以穩(wěn)定壓縮。
Rotato 動(dòng)態(tài) Mockup
Rotato 提供了很多常見的動(dòng)態(tài) Mockup 效果，只要將你的設(shè)計(jì)稿放進(jìn)去（圖片或視頻皆可），即可快速實(shí)現(xiàn)高端大氣的展示效果，支持非常完備的蘋果設(shè)備以及部分主流安卓設(shè)備，效果包括界面的反轉(zhuǎn)，拉近，滾動(dòng)展示等。
地址：
https://www.rotato.app/mockups
設(shè)計(jì)上線后效果如何？有效的驗(yàn)證能夠幫助我們有目的持續(xù)迭代精進(jìn)。
AB 測試用戶樣本計(jì)算小工具
AB 測試，也稱為分桶測試或分批測試。AB測試本質(zhì)上就是把平臺(tái)的流量分為為幾個(gè)不同的組進(jìn)行實(shí)驗(yàn)，然后觀察不同組的用戶數(shù)據(jù)指標(biāo)，例如：點(diǎn)擊率、次日留存、人均觀看時(shí)長等等核心指標(biāo)，最終選擇一個(gè)更有效的實(shí)驗(yàn)組上線。
在開始設(shè)計(jì)實(shí)驗(yàn)之前，需要明確實(shí)驗(yàn)的目標(biāo)。基于假設(shè)方案中的元素個(gè)數(shù)，AB 測試可以分為單一變量測試和多變量測試。這里以單一變量為例來進(jìn)行簡單的說明，如何進(jìn)行流量分桶。我們推薦這個(gè)免費(fèi)的小工具，來進(jìn)行流量分配：https://www.evanmiller.org/ab-testing/sample-size.html，根據(jù)實(shí)驗(yàn)的預(yù)期結(jié)果，大盤用戶量，來確定實(shí)驗(yàn)所需最小流量。
以騰訊文檔里面某一個(gè)按鈕的點(diǎn)擊率為例，目前大盤點(diǎn)擊率為5%，預(yù)期實(shí)驗(yàn)?zāi)軌蛱嵘?.5pp。
這個(gè)工具還可以進(jìn)行很多其他維度的流量配置，感興趣的同學(xué)可以進(jìn)行深入的研究。我們希望大家在設(shè)計(jì)的同時(shí)，能夠大膽創(chuàng)新的提出假設(shè)，然后進(jìn)行科學(xué)的驗(yàn)證，從而得到一個(gè)更有效的設(shè)計(jì)。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
作者：騰訊ISUX團(tuán)隊(duì) 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
Meet more beautiful colors.
在《騰訊文檔-構(gòu)建科學(xué)有效的色彩系統(tǒng)》這篇文章中，我們闡述了騰訊文檔如何升級了新的品牌色，為騰訊文檔塑造更加有未來科技感及智慧感的視覺感受和品牌認(rèn)知，以及如何構(gòu)建一個(gè)科學(xué)有效的調(diào)色板。
在設(shè)計(jì)系統(tǒng)的實(shí)際運(yùn)行中，我們也需要著眼于如何應(yīng)用調(diào)色板，建設(shè)協(xié)同工作流，并給各個(gè)角色提供有關(guān)色彩的擴(kuò)展指導(dǎo)，以達(dá)到在騰訊文檔中構(gòu)建一致且有品牌感的數(shù)字界面并有效提升效率的目的。
在建設(shè)騰訊文檔色彩系統(tǒng)的工作中，我們首先構(gòu)建了一個(gè)包含品牌色、灰色、輔助色的調(diào)色板，但僅有這個(gè)調(diào)色板不足以支撐我們流暢、無障礙的協(xié)同工作。日常工作中，“這里我用哪個(gè)藍(lán)色？”“這里我用哪個(gè)灰色？”“開發(fā)同學(xué)能否快速的變更某些元素的顏色？”等等問題層出不窮，建設(shè)系統(tǒng)的協(xié)同工作流迫在眉睫。
HIG強(qiáng)調(diào)不要在APP中使用“硬代碼”，即十六進(jìn)制色值進(jìn)行編碼，但前期我們構(gòu)建的調(diào)色板僅有色值，這種硬代碼應(yīng)用到app中導(dǎo)致項(xiàng)目效率低下，維護(hù)也會(huì)成本激增。
于是在騰訊文檔中，我們開始采用顏色變量（color token）和主題（theme）來管理顏色，顏色變量（color token）基于任務(wù)（role）、主題（theme），為UI中的任務(wù)指定十六進(jìn)制代碼的色值（hex value），以弭平設(shè)計(jì)師之間、開發(fā)與設(shè)計(jì)師之間的溝壑，將顏色變量（color token）嵌入設(shè)計(jì)組件中與開發(fā)代碼形成聯(lián)動(dòng)，便于開發(fā)利用程序中的變量來做全局修改，橫向提升團(tuán)隊(duì)的協(xié)作效率。
所謂顏色變量，通俗的意思就是可以將一個(gè)顏色按任務(wù)用途去抽象，抽象成一個(gè)有命名的顏色樣式，這個(gè)顏色樣式就是顏色變量。
在設(shè)計(jì)或者代碼中，可以通過修改這個(gè)顏色變量的值來進(jìn)行全局顏色的更新。例如，我們現(xiàn)在需要給button一個(gè)顏色，不要將其寫為 #1E6FFF這樣的色值，而是將button的顏色指定為命名是Fill-01的顏色變量， 如果有重大版本更新，僅需將顏色變量Fill-01的色值更新，即可實(shí)現(xiàn)全局顏色的高效更新。如果在不同的主題下（例如淺色/深色模式）button有不同的顏色表現(xiàn)，顏色變量Fill-01可以在不同主題下，映射不同的十六進(jìn)制色值。這就是我們建設(shè)協(xié)同工作流的的基礎(chǔ)邏輯。
調(diào)色板的各個(gè)色值（hex value）是最底層的基礎(chǔ)樣式，我們將色板上的顏色進(jìn)行規(guī)則化命名，以方便后期將其引用到顏色變量中。
騰訊文檔包含核心藍(lán)色、藍(lán)灰色、中性灰色及其他輔助色，按照顏色屬性，將其命名為：Primayblue、Gray、Grayblue、Purple、Indigoblue、Acidblue、Cyan、Greenblue、Yellow、Orange、Red，并在命名中加入色階后綴。
*騰訊文檔調(diào)色板命名圖表
1、 從調(diào)色板中選擇合適的顏色并測試
從調(diào)色板中根據(jù)UI中的任務(wù)挑選合適的顏色并進(jìn)行可用性測試，做具體任務(wù)中顏色選擇的最優(yōu)解。
例如，我們需要選擇一個(gè)藍(lán)色作為鏈接色，作為文本，對比度必須達(dá)到4.5:1以上才符合WCAG2.0的可用性標(biāo)準(zhǔn)。經(jīng)過測試我們選擇了primayblue-02作為鏈接色。
騰訊文檔的界面中，灰色系列占主導(dǎo)地位，起著至關(guān)重要的作用，為產(chǎn)品界面創(chuàng)造結(jié)構(gòu)、表達(dá)邊界、建立信息層次。在調(diào)色板中，我們選擇了兩種灰色：中性灰色和藍(lán)灰色，來支撐系統(tǒng)的設(shè)計(jì)。藍(lán)色系列是騰訊文檔產(chǎn)品和體驗(yàn)的主要?jiǎng)幼黝伾?
同時(shí)我們也使用了其他顏色以滿足一些沖突性任務(wù)（警示等）的顏色使用，這些顏色需要謹(jǐn)慎、有目的地使用。
經(jīng)常會(huì)有設(shè)計(jì)師問，“這里我能用這個(gè)灰色嗎？”出現(xiàn)這種問題，根本上還是顏色使用規(guī)則定義的不夠清晰，含混的口口相傳的規(guī)則會(huì)導(dǎo)致更多的混亂。于是，需要我們根據(jù)任務(wù)和使用場景把顏色的使用規(guī)則清晰的定義。
首先定義在界面中占主導(dǎo)地位的灰色、藍(lán)色的使用規(guī)則。
在騰訊文檔中，藍(lán)灰色與品牌藍(lán)共同建立品牌印象，由此，藍(lán)灰色主要應(yīng)用于與風(fēng)格相關(guān)的場景。包括：圖標(biāo)色、填充底色及大面積的背景色等。
中性灰色主要應(yīng)用于一些全局系統(tǒng)行為。如：文本、分割線及交互反饋hover、press等場景。
品牌藍(lán)色主要應(yīng)用于系統(tǒng)中的各種行為，如藍(lán)色圖標(biāo)、button、文本鏈接等。
其次定義在界面中用于警示、狀態(tài)提醒的其他顏色的使用規(guī)則。
紅色主要應(yīng)用于系統(tǒng)中需要警示的場景，如紅色警示圖形、錯(cuò)誤文本、紅色tag等。
在騰訊文檔中，會(huì)針對不同的任務(wù)應(yīng)用不同的顏色，如左滑操作、成功提示、高亮顯示等。
在騰訊文檔中，不同的品類有不同的基準(zhǔn)色。
定義了顏色在系統(tǒng)設(shè)計(jì)中的使用規(guī)則后，我們需要根據(jù)顏色變量的使用用途對其進(jìn)行語義化命名。一套好的語義化命名規(guī)則需要易于維護(hù)且具備可拓展性，如果只是將調(diào)色板的色值命名為 blue-01、blue-02... ，語義化的收益并不明顯。哪天設(shè)計(jì)團(tuán)隊(duì)需要調(diào)整品牌風(fēng)格，或是蘋果又掀起什么新潮流，把所有命名為 blue_x 的變量改為 gradient_serenity， 對于開發(fā)來說也是巨大的災(zāi)難。
根據(jù) HIG 的建議，語義化命名不應(yīng)該描述外觀或者色值，而是指明這個(gè)顏色的任務(wù)用途——標(biāo)簽 Labels，分割線 Sepatators 或者填充 Fill。
在思考如何賦予顏色語義化的命名時(shí)，設(shè)計(jì)師也需要用更概括和結(jié)構(gòu)化的視角來看待界面設(shè)計(jì)，同時(shí)也需與開發(fā)同學(xué)達(dá)成一致，使用同樣的命名，滿足以更好地維護(hù)一套收斂和統(tǒng)一的設(shè)計(jì)語言。
在騰訊文檔中，顏色的任務(wù)用途定義為為以下幾種：背景色 Background、文本色Text、圖標(biāo)色I(xiàn)con、分割線 Border、透明填充 Transparent fill 、實(shí)色填充 Opaque fill 、默認(rèn)交互反饋 Feedback、語義 Intent。統(tǒng)一使用ultrastrong、strong、medium、weak、ultraweak作為后綴來表達(dá)顏色強(qiáng)度。在需要更明確的用途說明的任務(wù)中，直接描述其用途，例如：hover，pressed、disabled等。
以上種種，最終目的在于建設(shè)團(tuán)隊(duì)的協(xié)同工作流，將顏色變量（color token）嵌入設(shè)計(jì)組件中與開發(fā)代碼形成聯(lián)動(dòng)，便于設(shè)計(jì)利用變量及組件、開發(fā)利用程序中的變量來做全局修改，橫向提升團(tuán)隊(duì)的協(xié)作效率。
在設(shè)計(jì)系統(tǒng)中，顏色變量屬于底層的設(shè)計(jì)原子，需要將其生成為顏色變量并嵌入到設(shè)計(jì)組件中，便于設(shè)計(jì)內(nèi)部使用。我們將已根據(jù)任務(wù)用途命名的色值，生成figma中的顏色樣式（color style），后續(xù)無論是進(jìn)行組件的設(shè)計(jì)，還是項(xiàng)目的設(shè)計(jì)，都可以直接賦予設(shè)計(jì)元素明確的顏色樣式。
我們生成了一個(gè)面向內(nèi)部、外部的顏色變量表，進(jìn)行顏色變量的說明和信息的同步，沉淀落到實(shí)處的資料文檔。（此處推薦使用騰訊文檔，多人協(xié)作實(shí)時(shí)溝通～）
最終形成了設(shè)計(jì)組件庫與開發(fā)組件庫的聯(lián)動(dòng)，構(gòu)建了一個(gè)協(xié)同工作流，橫向提升工作效率。
上篇的調(diào)色板設(shè)計(jì)后，一直在醞釀這篇調(diào)色板的實(shí)際應(yīng)用。在設(shè)計(jì)一個(gè)較為復(fù)雜、龐大的產(chǎn)品時(shí)，提效是永恒的課題。痛過、踩過坑的設(shè)計(jì)師應(yīng)該深有感觸，溝通的無力、推動(dòng)的困難都推動(dòng)著我們發(fā)動(dòng)自己的能量去想辦法提效。
設(shè)計(jì)師們可以在自己的項(xiàng)目中與開發(fā)同學(xué)多多溝通，嘗試這種方法，去建設(shè)更高效的色彩設(shè)計(jì)系統(tǒng)。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
作者：騰訊ISUX團(tuán)隊(duì) 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
交互文檔，是一份用來解釋項(xiàng)目交互方式、內(nèi)容、規(guī)則的說明文檔，也叫 DRD ( Design Requirement Document )。
在過去的分享中，我們有解釋過，B 端項(xiàng)目會(huì)包含大量的交互內(nèi)容，需要前期繪制交互原型來展示和確認(rèn)交互方案。
如果是比較簡單的小型項(xiàng)目，或成熟產(chǎn)品的小迭代，那么這樣的連線圖確實(shí)就足以表達(dá)交互的意圖和方案了，寫太多注釋文字反而會(huì)畫蛇添足提高觀看者的認(rèn)知成本。
但是，如果項(xiàng)目和展示的流程內(nèi)容，邏輯非常復(fù)雜，包含非常多的選項(xiàng)和狀態(tài)，那么單靠原型和連線是絕對不夠的，添加更多的圖文說明就變得非常有必要了。
同時(shí)在團(tuán)隊(duì)協(xié)作場景中，就需要將這些內(nèi)容制作成一份規(guī)范的 “文檔”，用來進(jìn)行統(tǒng)一的展示、備份、歸檔。
所以做交互光靠畫交互原型是不夠的，“文檔” 就成為必要的輸出成果。
在產(chǎn)品側(cè)（非開發(fā)），文檔就有好幾類：
- 商業(yè)需求文檔:BRD,Business Requirement Document
- 市場需求文檔:MRD,Market Requirement Document
- 產(chǎn)品需求文檔:PRD,Product Requirement Document
- 交互說明文檔:DRD,Design Requirement Document
- 設(shè)計(jì)規(guī)范文檔:DGD,Design Guidline Document
BRD 和 MRD 是一個(gè)產(chǎn)品經(jīng)理行業(yè)內(nèi)部也在反復(fù)科普討論的東西，和我們沒多大關(guān)系可以暫時(shí)忽略。設(shè)計(jì)規(guī)范文檔 DGD 大家應(yīng)該也有概念，比較容易辨識，也不需要在這里強(qiáng)調(diào)。
而產(chǎn)品需求文檔 PRD，是和交互文檔最撞臉的文檔類型。它們的文檔規(guī)格、樣式幾乎一致，還包含大量界限模糊、相互交叉的內(nèi)容范疇，會(huì)對新手的理解造成很大的不便。
要理解產(chǎn)品文檔和交互文檔的核心差異，就得從他們各自的工作職能說起，產(chǎn)品經(jīng)理的主要產(chǎn)出是解釋產(chǎn)品要做的功能和邏輯，所有的原型和連線的目標(biāo)都是為了解釋功能本身。
部分產(chǎn)品經(jīng)理會(huì) “順帶” 在這個(gè)基礎(chǔ)上增加交互的元素，以及相關(guān)的說明。這恰恰是問題的關(guān)鍵所在，因?yàn)楫a(chǎn)品經(jīng)理制作產(chǎn)品原型的過程是可以覆蓋一部分交互信息的，所以很多設(shè)計(jì)師也天真的認(rèn)為交互內(nèi)容是應(yīng)該由產(chǎn)品來出的。
這當(dāng)中一定要關(guān)注里面的 “順帶”，因?yàn)橐环萦行У?PRD 主旨一定不是以交互為核心的，在面對需要大量圖例、連線、方案、解釋的交互問題下面，產(chǎn)品經(jīng)理往往選擇直接跳過，只把功能描述清楚，剩下的就交給交互設(shè)計(jì)師還是 UI 設(shè)計(jì)師來完成具體的交互方案。
所以，交互文檔就是在產(chǎn)品文檔的基礎(chǔ)上，進(jìn)行交互內(nèi)容的補(bǔ)充，專注于解釋項(xiàng)目的交互內(nèi)容，讓設(shè)計(jì)師和前端開發(fā)可以更直觀得理解后續(xù)的工作內(nèi)容。
來自 UEDART 的付費(fèi)文檔，案例地址：http://vip.uedart.com/interactive.html
交互文檔和產(chǎn)品文檔是相互獨(dú)立和補(bǔ)充的，當(dāng)產(chǎn)品文檔無法完成對產(chǎn)品交互的有效解釋時(shí)，我們就應(yīng)該選擇輸出獨(dú)立的交互文檔，來提升項(xiàng)目協(xié)作的效率。
主流的交互文檔輸出有三種方式：
1. Axure/墨刀 導(dǎo)出
2. 一般文檔制作
3. 線上 Wiki 記錄
Axure 和墨刀是用來制作產(chǎn)品原型的軟件工具，也是目前在產(chǎn)品經(jīng)理、交互設(shè)計(jì)行業(yè)中應(yīng)用最廣泛的原型工具。
它的主要優(yōu)勢，在于可以比較方便的制作可交互的組件、連線、導(dǎo)出。
當(dāng)然，光制作原型圖并不能叫交互文檔，它們還提供了比較全面的內(nèi)容標(biāo)注、文本記錄、圖形繪制的功能。
這就可以讓我們完成原型繪制以后，結(jié)合頁面結(jié)構(gòu)的管理，添加交互文檔所需的其它信息，并最終輸出文件。
而在一些比較傳統(tǒng)的行業(yè)或外包領(lǐng)域，使用的記錄文檔往往要使用 Word 或 PPT（方便開會(huì)演示或要打?。?。這就要在原型完成以后，導(dǎo)出原型圖例，并使用這些文檔軟件進(jìn)行文字的記錄和連線。
受限于 Word、PPT 的布局限制（強(qiáng)行分頁），使用它們做交互文檔是非常難受的，并且這些文檔需要保存到本地，存在各種文檔版本管理的問題。
所以還有另一部分也希望使用普通文檔格式記錄，并滿足云端同步、備份、版本管理的團(tuán)隊(duì)，就會(huì)使用 Wiki 類的工具來制作交互文檔。如語雀、飛書、Confluence、Notion 等工具。
如果只是一些比較小的項(xiàng)目迭代、一次性使用的交互文檔，使用前兩種方法都可以勝任。而真正大型、系統(tǒng)性的交互文檔，往往都使用團(tuán)隊(duì)內(nèi)部的 Wiki 進(jìn)行創(chuàng)建和管理。和設(shè)計(jì)稿不同，這些使用了內(nèi)部賬號或需要內(nèi)網(wǎng)訪問的文檔資料，是不會(huì)沒事發(fā)到網(wǎng)上來分享的，這也是在網(wǎng)上找不到完整交互文檔的主要原因。
和你們網(wǎng)上可以找到的大多數(shù)交互設(shè)計(jì)干貨不同，我即不推薦你們使用 Axure/墨刀 來畫原型，也不推薦用它們或普通文檔、Wiki 的形式來輸出交互文檔。因?yàn)椋?
—— 太低效了！
產(chǎn)品經(jīng)理和交互設(shè)計(jì)師的主要產(chǎn)出物就是文檔，自然可以耗費(fèi)比較多的精力和時(shí)間去制作原型和編寫內(nèi)容。而 UI 設(shè)計(jì)師的主要工作肯定是最終的視覺界面和交付，所以用最復(fù)雜的方法去制作交互文檔，顯然是不合理的。
同時(shí)還要提一句，Axure/墨刀 等軟件用來制作一般的線框圖原型，效率實(shí)在是太低了。且絕大多數(shù)情況下的頁面跳轉(zhuǎn)、交互都是可以忽略不做的。而且隨頁面增加，它的左側(cè)導(dǎo)航層級、數(shù)量會(huì)非常龐大，導(dǎo)致查找和瀏覽的效率進(jìn)一步降低。
在我自己的所有課程和分享中，我始終都建議直接使用你們正在用的云端 UI 設(shè)計(jì)軟件直接繪制產(chǎn)品、交互原型并輸出文檔，如即時(shí)設(shè)計(jì)或 Figma。
原因包含：
- 速度快：能用 Axure 五分之一的時(shí)間完成所有原型繪制
- 可復(fù)用：做好的原型方便復(fù)用，而且可以直接在原型上完成后續(xù)設(shè)計(jì)
- 交互性：對于表達(dá)交互流程所需的基礎(chǔ)跳轉(zhuǎn)和動(dòng)效都能滿足
- 更自由：一些需要復(fù)雜圖文結(jié)合的說明方式不再受到普通文檔布局限制
比如下面這樣的原型案例，就可以通過一個(gè)簡單的鏈接快速分享出去，或者添加團(tuán)隊(duì)成員自由查看。
在我過去長期的實(shí)踐體會(huì)中，這種方式是優(yōu)勢最明顯，效率最高，最易懂，也符合 UI 設(shè)計(jì)師工作需要的。如果項(xiàng)目中有其它因素要求，你們也可以選擇前面的方式輸出。
任何文檔的目標(biāo)都是為了書面記錄和讓看的人更容易理解我們要表達(dá)的信息，不要被固定的方法局限住，要努力去探索適合團(tuán)隊(duì)當(dāng)前場景的方式。
前面把基本的信息聊完了，這里就來具體講講交互文檔應(yīng)該如何進(jìn)行輸出。
當(dāng)然，輸出交互文檔前需要先理解交互是什么，交互設(shè)計(jì)的具體設(shè)計(jì)內(nèi)容和步驟。交互文檔是對你已經(jīng)設(shè)計(jì)出來的方案的書面記錄，你不能在對交互一無所知的情況下強(qiáng)行編寫文檔。
交互文檔制作首先要確認(rèn)文檔的記錄內(nèi)容和文檔結(jié)構(gòu)。
記錄內(nèi)容指的是你在該文檔準(zhǔn)備放哪些交互內(nèi)容進(jìn)去，并不是每次項(xiàng)目設(shè)計(jì)都要把項(xiàng)目所有頁面和流程交互都重做一遍。
比如一次中等規(guī)模的迭代，新增幾個(gè)通用的列表頁面，調(diào)整了一些細(xì)節(jié)字段，增加了一個(gè)功能流程。那么文檔重點(diǎn)記錄內(nèi)容肯定就是流程而不是所有頁面。畢竟通用的列表頁和細(xì)節(jié)更改，在產(chǎn)品需求評審階段就可以完整的解釋，而功能流程則不行。
如果是全新的項(xiàng)目，包含數(shù)十上百個(gè)頁面。把所有流程、頁面的交互內(nèi)容全部表現(xiàn)出來的工作量是頂不住的，在繪制原型的過程中，你就會(huì)發(fā)現(xiàn)有大量的重復(fù)頁面、流程和交互。所以制作文檔就要有目的性的對重復(fù)的內(nèi)容進(jìn)行合并，以及只保留重要的頁面和流程。
具體該放什么要考慮項(xiàng)目的實(shí)際情況，需要設(shè)計(jì)師自己評估。除此以外，標(biāo)準(zhǔn)的交互文檔里面會(huì)包含背景介紹、編輯日志、文字圖例、業(yè)務(wù)流程、名詞解釋、頁面結(jié)構(gòu)等等。
這些 “文縐縐” 的細(xì)節(jié)，并不是必備的，你可以根據(jù)當(dāng)前場景自己決定需要加哪些。比如項(xiàng)目、業(yè)務(wù)背景前面的產(chǎn)品需求已經(jīng)講清楚了，業(yè)務(wù)流程、名詞解釋團(tuán)隊(duì)成員也都了如指掌的時(shí)候，那么這些頁面模塊就完全沒有放的必要。
并且，基于前面對放置內(nèi)容的考慮，結(jié)構(gòu)的順序并不一定要類似下方案例，完全按照產(chǎn)品的導(dǎo)航目錄來走。
所以，根據(jù)一個(gè)中等規(guī)模的迭代項(xiàng)目，我會(huì)制定一個(gè)這樣的一級文檔結(jié)構(gòu)。
- 基本信息：項(xiàng)目的簡單信息，快速目錄，參與人信息等
- 基本組件：涉及的相關(guān)組件展示和交互規(guī)則說明
- 原型一覽：本次迭代涉及的所有頁面原型和連線一覽
- 流程介紹1：流程1的所有頁面、狀態(tài)、說明展示
- 流程介紹2：流程2的所有頁面、狀態(tài)、說明展示
- 流程介紹3：流程3的所有頁面、狀態(tài)、說明展示
每個(gè)1級文檔結(jié)構(gòu)對應(yīng) UI 軟件中的 Page 目錄，力求所需的 Page 數(shù)量越少越好，而不是像 Axure 的做法一樣密密麻麻的。
結(jié)構(gòu)可以根據(jù)復(fù)雜程度做進(jìn)一步的細(xì)分，它像寫文章的大綱一樣，幫助我們提前規(guī)劃好后續(xù)完成文檔所需的內(nèi)容和工作量。
有了結(jié)構(gòu)，就要在對應(yīng)的 Page 中填充內(nèi)容了。其中一般的文字介紹、流程圖、思維導(dǎo)圖，只要正常輸入或?qū)?dǎo)出的圖例黏貼進(jìn)來就可以。
而針對具體的交互內(nèi)容，流程解釋上，則重點(diǎn)處理連線和標(biāo)注說明。比如下面是我自己在課程演示中的一個(gè)簡單的交互流程演示案例。
在 UI 軟件中，制作連線其實(shí)是很簡單的事情，只要畫出一個(gè)直線，再設(shè)置箭頭和尾部圖形、描邊色彩和粗細(xì)即可。
然后，將該線段的圖層放置在畫布之外，起點(diǎn)放置在觸發(fā)交互的區(qū)域之中，終點(diǎn)尖頭則緊貼目標(biāo)畫布的邊緣（不用特意延伸進(jìn)畫布內(nèi)）。如果使用水平、垂直的方式連接兩個(gè)畫布，那就可以雙擊進(jìn)去添加錨點(diǎn)制作 90 度的折角。
連線的應(yīng)用是非常簡單的操作，不要舍近求遠(yuǎn)通過插件或是其它的一些功能來實(shí)現(xiàn)。而除此之外，我在文檔中添加的解釋性文本主要有兩種，交互事件和交互規(guī)則。
交互事件代表了連線的兩個(gè)頁面是如何被觸發(fā)跳轉(zhuǎn)的，所以我會(huì)在線段中帖一個(gè)文字卡片，解釋觸發(fā)的條件和交互操作是什么。
然后，就是頁面或流程中的交互細(xì)則，包含兩個(gè)部分，數(shù)字標(biāo)簽和對應(yīng)文字注釋。它們都是用 Auto layout 可以快速制作出來的組件，每次要做備注的時(shí)候，只要復(fù)制標(biāo)簽到頁面上，設(shè)置對應(yīng)的數(shù)值，再將右側(cè)的文字卡片復(fù)制到頁面旁邊，再加上對應(yīng)的數(shù)字、內(nèi)容信息即可。
在設(shè)計(jì)軟件中，畫布的自由度極高，你想要怎么備注和添加內(nèi)容都沒關(guān)系，只要在內(nèi)容翔實(shí)的基礎(chǔ)上保證 —— 團(tuán)隊(duì)成員能看懂，就是一份優(yōu)秀的交互文檔。多在繪制過程中和同事溝通，優(yōu)化展示的做法，可以避免很多會(huì)出現(xiàn)的問題，進(jìn)一步加速我們的制作效率。
將文檔全部做完以后，最終就是關(guān)于交付和協(xié)作的問題了。
既然我們使用線上的 UI 軟件來完成交互文檔的制作，那么文件設(shè)置公開訪問權(quán)限，再分享鏈接自然是最簡單的辦法。
但每次項(xiàng)目分享個(gè)網(wǎng)頁鏈接，或者并行有好幾個(gè)項(xiàng)目，需要其它成員自己去收藏網(wǎng)址，也是挺麻煩的。所以盡量充分應(yīng)用軟件中的團(tuán)隊(duì)協(xié)作功能，通過創(chuàng)建一個(gè)團(tuán)隊(duì)，添加成員，讓他們自行查看當(dāng)前文件目錄中的交互文檔。
查看過程中，團(tuán)隊(duì)其它成員可以通過評論的功能對交互內(nèi)容進(jìn)行糾錯(cuò)、提問、建議，方便我們進(jìn)行優(yōu)化改進(jìn)。
通過這種簡單高效的文檔協(xié)作模式，我們可以非?？斓猛瓿烧w交互內(nèi)容的定稿，并開始后續(xù)的工作。
再回到前面的話題，我們是 UI 設(shè)計(jì)師，不是全職交互設(shè)計(jì)。原型文檔輸出完了，下一步可是要做視覺界面的，所以交互文檔就可以不用管了嘛？
交互文檔的最佳狀態(tài)是 —— 應(yīng)用最終界面圖例解釋交互內(nèi)容。
也就是當(dāng)我們把所有頁面內(nèi)容設(shè)計(jì)完成后，強(qiáng)烈建議將界面的展示和交互文檔進(jìn)行整合。除了前端和產(chǎn)品可以看到最終的交互落地效果外（有時(shí)候最終設(shè)計(jì)和前面的交互不一致），還可以直接通過這個(gè)文檔查看界面數(shù)值標(biāo)注，而不用往返于交互和設(shè)計(jì)文檔來回切換，這才能讓文檔作用最大化。
以上就是關(guān)于交互文檔的相關(guān)解釋。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
作者：酸梅干超人 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
網(wǎng)上對介紹導(dǎo)航文章已經(jīng)有很多，有部分已過時(shí)，今天自己再重新整理一遍，方便自己也方便更多人理解。
如2、社區(qū)產(chǎn)品引導(dǎo)用戶發(fā)帖子
如3、凸顯核心功能，如百度地圖、高德等
優(yōu)點(diǎn)：
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
作者：UX設(shè)計(jì)筆記 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
視覺設(shè)計(jì)排版：
第一步，先把文字內(nèi)容做好排版；
第二步，思考場景設(shè)計(jì)與信息層級處理；
第三步，進(jìn)行排版設(shè)計(jì)的布局；
第四步，最后做好色彩和細(xì)節(jié)的優(yōu)化，從整體出發(fā)到細(xì)節(jié)處理再回歸整體性的原則，做好包裝的設(shè)計(jì)展示。
一 格式塔原理在排版中的應(yīng)用
格式塔原理是 20 世紀(jì)早期的德國心理學(xué)家研究小組發(fā)現(xiàn)的人類視覺工作原理。人類視覺是整體性的，我們會(huì)對看到的事物自建結(jié)構(gòu)，并且在神經(jīng)系統(tǒng)層面上感知形狀，圖形和物體?！感螤?、區(qū)域」在德語中是 Gestalt，所以這些理論也就叫做視覺感知的格式塔原理。
格式塔原理的設(shè)計(jì)原則如下：
1. 鄰近性原則
物體之間的相對距離會(huì)影響我們認(rèn)知它們的關(guān)系。相互靠近的元素被認(rèn)為是一組，那些距離較遠(yuǎn)的則自動(dòng)劃分為組外。整體看來，距離近的關(guān)聯(lián)性更緊密。
下面左圖中的圓相互之間在水平方向比垂直距離近，那樣我們看到了4排圓點(diǎn)，而右圖看成2列。
如何應(yīng)用于UI設(shè)計(jì)：
鄰近性原則，在網(wǎng)頁端或移動(dòng)端的排版布局中有非常廣泛的應(yīng)用。設(shè)計(jì)師應(yīng)用此原則，調(diào)整距離或者用分割線等來分開不同設(shè)計(jì)模式的構(gòu)建。此原理應(yīng)用在設(shè)計(jì)中，界面層級好，視覺清晰。
按照原理，我們會(huì)將內(nèi)容相似的元素位置放置得更接近，在 UI 設(shè)計(jì)中的卡片化設(shè)計(jì)，列表組合等信息整合設(shè)計(jì)都會(huì)應(yīng)用到此原理。并且不同內(nèi)容之間我們使用分割線，留白，卡片區(qū)分等方式來使不同的內(nèi)容區(qū)分更為明顯。
2. 相似性原則
格式塔原理中的相似性通常和鄰近性原則一起運(yùn)用在產(chǎn)品設(shè)計(jì)中。它指出了影響我們感知分組的另外一個(gè)原則：有共同視覺元素的物體看起來更有關(guān)聯(lián)性。我們傾向于將看起來相似的對象視為一組或者一個(gè)模式，并且將它們與特定含義或者功能聯(lián)系在一起。
如何應(yīng)用于UI設(shè)計(jì)：
利用顏色，形狀，大小，方向，以及紋理等視覺元素，組成相近的樣式。UI 設(shè)計(jì)規(guī)范中的控件組合成的組件，大部分都會(huì)使用到相似性原則，統(tǒng)一視覺樣式，來表達(dá)統(tǒng)一的功能性。
3. 封閉性
人的眼睛在觀看時(shí)，大腦并不是在一開始就區(qū)分各個(gè)單一的組成部分，而是將各個(gè)部分組合起來，使之成為一個(gè)更容易理解的統(tǒng)一體。這個(gè)統(tǒng)一體是我們?nèi)粘Ｉ钪谐Ｒ姷男蜗螅缯叫?、圓形、三角形等，讓用戶容易理解。
如何應(yīng)用于UI設(shè)計(jì)：
這個(gè)原則也非常適用于圖形用戶界面的圖標(biāo)設(shè)計(jì)或界面設(shè)計(jì)中
4. 連續(xù)性原則
人的視覺具備一種運(yùn)動(dòng)的慣性，會(huì)追隨一個(gè)方向的延伸，以便把元素連接在一起成為一個(gè)整體。下圖是兩個(gè)交叉的圓弧軌跡，人們往往傾向于使視覺流跟隨著相同顏色的軌跡，而不會(huì)被干擾，我們能夠感知這是兩條弧線。
如何應(yīng)用于UI設(shè)計(jì)：
連續(xù)性目前在 app 產(chǎn)品中應(yīng)用非常廣泛。比如在電商產(chǎn)品中 banner 區(qū)域的左右滑動(dòng)交互模塊，滑動(dòng)組件和進(jìn)度條展示。
主要應(yīng)用范圍如下：
1 導(dǎo)航欄中的連續(xù)性設(shè)計(jì)
2 卡片模塊中的連續(xù)性設(shè)計(jì)
3 模塊的連續(xù)性設(shè)計(jì)
5. 主體/背景
我們的大腦將視覺區(qū)域分為主體和背景 2 個(gè)部分。這個(gè)特征有利于我們對重要信息和次要信息的感知。
主體和背景的區(qū)別可以從以下兩個(gè)方面來控制：
1 場景大?。何覀儍A向于將處于大場景中的中間小區(qū)域部分視為主體，而大場景視為背景；
2 層級關(guān)系：如果在同一個(gè)平面中，我們傾向于將處于視覺第一層級的物體視為主體。
如何應(yīng)用于UI設(shè)計(jì)：
此原則可以幫助設(shè)計(jì)師在設(shè)計(jì)界面的過程中抓住用戶注意力，并且讓用戶優(yōu)先看到我們想讓他們看到的事物。比如重要信息的彈窗提示，以及弱化背景從而突出內(nèi)容等界面中都有運(yùn)用到此原則。
二 移動(dòng)端版式設(shè)計(jì)原則：
版式設(shè)計(jì)，在有限的版面空間中，將版面構(gòu)成元素，如：文字、圖片、線條和顏色等，根據(jù)特定的內(nèi)容，進(jìn)行組合排列，并運(yùn)用造型要素及形式原則，把構(gòu)思與計(jì)劃以視覺的形式美感，表達(dá)出來。
一個(gè)優(yōu)秀的排版要考慮到用戶的閱讀習(xí)慣和設(shè)計(jì)美感，幫助用戶區(qū)分重點(diǎn)、提升可讀性。遵循平面設(shè)計(jì)原理，排版中的對齊、對比、重復(fù)、親密性 4 大原則。
對齊原則
對齊是版式設(shè)計(jì)的最重要的原則之一，對齊可以建立一種整齊的外觀，帶給用戶舒服的一致性的瀏覽體驗(yàn)?；趶纳系较?，從左到右的閱讀習(xí)慣，應(yīng)用在界面設(shè)計(jì)中，一般是左對齊、居中對齊和右對齊，同時(shí)同一豎線上的元素，要保持居中對齊。
對比原則
做排版設(shè)計(jì)時(shí)，重點(diǎn)的元素通過尺寸、色彩、造型等引起用戶關(guān)注，這樣重點(diǎn)內(nèi)容，才會(huì)突出出來。設(shè)計(jì)要有輕重緩急之分，不要讓用戶去找重點(diǎn)，Don't let users think，讓用戶順利的接受重要信息。
例如：圖片大小的對比，讓用戶感受到最重要的信息。
親密性原則
根據(jù)親密的原則來組織復(fù)雜的信息，將彼此相關(guān)的同一類的元素靠近，同時(shí)把遠(yuǎn)離不相關(guān)的元素，這樣就可以大大提高界面設(shè)計(jì)的可讀性。
三 作品集排版法則
設(shè)計(jì)排版法則：
1 左對齊
在頁面排版時(shí)，將你的文字設(shè)置為左對齊。為什么？在西方文化中，人們的閱讀習(xí)慣是從上到下，從左到右的。通過左對齊文字，眼睛能夠更容易地找到邊緣，更易于閱讀。避免因?yàn)檫@個(gè)原因縮進(jìn)段落的第一行。
2 使用一種字體
優(yōu)秀的設(shè)計(jì)師在排版設(shè)計(jì)中能夠完美使用兩種字體，是因?yàn)樗麄兡軌虬盐蘸土私馑x的字體的類型，并保證他們是互補(bǔ)的。
但是一般情況下，避免使用兩種相同類型的字體。例如，不要使用兩種以上的非襯線體、粗襯體或手寫體。
使用一種字體，直到你能夠很好的運(yùn)用和掌握它。如：蘋方字體或Dinner字體。
3 跳過一個(gè)字重
在改變字體權(quán)重時(shí)，從細(xì)體到粗體，或者從中粗體到超粗體。大師級的設(shè)計(jì)關(guān)鍵就是對比。
粗體和細(xì)體對比的標(biāo)題字體組合，獲得最大的對比。
4 雙倍字號尺寸
當(dāng)改變字號大小時(shí)，一個(gè)好的經(jīng)驗(yàn)法則是，你使用的字號大小是現(xiàn)有字號的兩倍或一半。
5 對齊到一個(gè)軸線
沿著一個(gè)主坐標(biāo)構(gòu)建你的字體排版，并將字體元素對齊到網(wǎng)絡(luò)線。無論文字類型或大小如何，在垂直軸上，字體對齊軸線的左邊緣。在水平軸上，尋找最佳水平元素，或?qū)R文字的大寫字母字高，或?qū)R文字基線即可。
6 使用條框分類
使用形狀/線條將相關(guān)的內(nèi)容信息塊進(jìn)行分類編組。這樣會(huì)使不同的元素排列很有順序。
7 注意間距
段落排版中到處都是間距。如果文字左對齊。右側(cè)會(huì)出現(xiàn)文字的參差不齊、起伏留白等。避免在段落的最后一行出現(xiàn)單字成行的情況，切勿使用強(qiáng)制對齊設(shè)置。
注意段落右側(cè)的起伏形狀，在一個(gè)句子中標(biāo)點(diǎn)符號之間使用單個(gè)空格，以避免形狀和角度不美觀。
間距的重要性。越是間距接近的元素，讀者就會(huì)假設(shè)在不同的信息塊之間存在這一種關(guān)系。
最后推薦 優(yōu)秀設(shè)計(jì)師的作品排版 ：
如下圖：來自國際化設(shè)計(jì)師 MIKE 的設(shè)計(jì)作品
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
作者：峻溪POINTVISION 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
藍(lán)藍(lán)設(shè)計(jì)的小編 http://sillybuy.com