轉(zhuǎn)場(chǎng)動(dòng)效在UI界面中所起到的作用無(wú)疑是顯著的。相比于靜態(tài)的界面，動(dòng)態(tài)的轉(zhuǎn)場(chǎng)動(dòng)效更符合人類(lèi)的自然認(rèn)知體系，有效地降低了用戶(hù)的認(rèn)知負(fù)載，屏幕上元素的變化過(guò)程，前后界面的變化邏輯，以及層次結(jié)構(gòu)之間的變化關(guān)系，都在動(dòng)效的加持之下，變得更加清晰自然。從這個(gè)角度上來(lái)說(shuō)，動(dòng)效不僅是界面的重要支持元素，也是用戶(hù)交互的基礎(chǔ)。

動(dòng)效設(shè)計(jì)，尤其是協(xié)助交互的轉(zhuǎn)場(chǎng)動(dòng)效，如今日趨成熟。通過(guò)大量的案例分析和過(guò)來(lái)人的經(jīng)驗(yàn)，我們逐步總結(jié)出優(yōu)秀轉(zhuǎn)場(chǎng)動(dòng)效的5個(gè)核心的規(guī)則，今天的文章，我們就來(lái)分享這5個(gè)知識(shí)點(diǎn)。

交互篇

什么是滴滴試駕商業(yè)B端平臺(tái)App

商業(yè)B端平臺(tái)app是滴滴出行旗下試駕針對(duì)廠商內(nèi)部開(kāi)發(fā)的一款app，通過(guò)進(jìn)入試駕B端，廠商能夠快速的獲取相關(guān)數(shù)據(jù)。app內(nèi)有滴滴試駕在c端的基本數(shù)據(jù)和畫(huà)像分析。合作廠商還可以查詢(xún)具體與試駕合作項(xiàng)目的基本情況、畫(huà)像分析、車(chē)輛情況等數(shù)據(jù)。

簡(jiǎn)單的來(lái)說(shuō)就是從滴滴試駕c端提取數(shù)據(jù)到B端以供廠商查尋。

我上周參加了一個(gè)工作坊，也算是ThoughtWorks與我所在團(tuán)隊(duì)的交流活動(dòng)。如果你有了解過(guò)IXDC，你能夠在15年的活動(dòng)中找到四個(gè)由他們團(tuán)隊(duì)組織的工作坊，其在一個(gè)就與我上周參加的那個(gè)相同——《從1到100》。如果我今天把這篇文章發(fā)出去，就算是這個(gè)工作坊的劇透了吧（也是經(jīng)過(guò)他們?cè)试S了的）。

這個(gè)工作坊講的是一個(gè)完整的設(shè)計(jì)方法，即拿到一個(gè)項(xiàng)目需求，如何從設(shè)計(jì)思考（DesignThinking）開(kāi)始，確定用戶(hù)畫(huà)像，構(gòu)建場(chǎng)景地圖，頭腦風(fēng)暴，繪制故事版，設(shè)計(jì)產(chǎn)品，直至用戶(hù)測(cè)試。他們把整個(gè)流程分為四個(gè)階段：

• 探索：用戶(hù)、需求
• 定義：目標(biāo)、資源
• 設(shè)計(jì)：產(chǎn)品形態(tài)
• 驗(yàn)證：測(cè)試反饋

我們現(xiàn)在所面臨的網(wǎng)絡(luò)安全問(wèn)題一直都很?chē)?yán)峻。無(wú)論是更改社交媒體帳號(hào)，注冊(cè)新論壇，還是下載新的APP，我們都的數(shù)字身份一直都存在各種各樣的潛在安全風(fēng)險(xiǎn)。開(kāi)發(fā)團(tuán)隊(duì)花費(fèi)了大量的時(shí)間精力投入到開(kāi)發(fā)和設(shè)計(jì)當(dāng)中，改進(jìn)流程，優(yōu)化加密方案，來(lái)規(guī)避這些問(wèn)題。

黑客攻擊有網(wǎng)絡(luò)安全專(zhuān)家和開(kāi)發(fā)者來(lái)應(yīng)對(duì)，而用戶(hù)所面對(duì)的多數(shù)問(wèn)題，則更多的需要設(shè)計(jì)師來(lái)動(dòng)腦筋解決。通過(guò)流程和UI優(yōu)化，設(shè)計(jì)師能夠讓用戶(hù)盡可能地規(guī)避一些潛在的安全問(wèn)題，即使這個(gè)過(guò)程中可能會(huì)產(chǎn)生體驗(yàn)上的障礙和不適。

1、不同內(nèi)容的交互界面應(yīng)該看起來(lái)不同

每當(dāng)用戶(hù)要執(zhí)行關(guān)鍵性的任務(wù)或者操作的時(shí)候，比如更改賬戶(hù)設(shè)置與密碼，這個(gè)時(shí)候用戶(hù)應(yīng)該保持緊張和專(zhuān)注，那么設(shè)計(jì)上就應(yīng)該幫助他們進(jìn)入這樣的狀態(tài)。因此，UI 應(yīng)該讓用戶(hù)清楚他們應(yīng)該做什么。

上篇文章簡(jiǎn)單的介紹了數(shù)據(jù)可視化的基礎(chǔ)，將數(shù)據(jù)進(jìn)行設(shè)計(jì)可視化后，可以讓我們有一種全新的方式去認(rèn)識(shí)數(shù)據(jù)，改變對(duì)數(shù)據(jù)的呈現(xiàn)和思考方式。那現(xiàn)在就讓開(kāi)始做一份數(shù)據(jù)的可視化表，一步步的來(lái)看下我們?nèi)绾潍@取數(shù)據(jù)，以及如何進(jìn)行可視化的展示。

在上章內(nèi)容中，提到了關(guān)于【數(shù)據(jù)可視化迭代過(guò)程】的步驟，這也能看出整個(gè)過(guò)程包含的步驟，大致有：

1. 確定主題 - 2．?dāng)?shù)據(jù)獲得 - 3.圖表選擇（表達(dá)）- 4圖表繪制

當(dāng)然了我們也可以看到可視化是要一個(gè)不斷迭代的過(guò)程，步驟之間都需要多次的迭代修改的。

確定主題

這肯定是第一步了，在做數(shù)據(jù)可視化的時(shí)候，首先你要明了你要做什么，想要從數(shù)據(jù)獲中取什么信息，有了目標(biāo)才能明確的往下做。

那我們這次還是來(lái)做關(guān)于空氣質(zhì)量PM2.5的數(shù)據(jù)展示，了解歷年來(lái)PM2.5的實(shí)際情況和發(fā)展趨勢(shì)。

為了借助社交產(chǎn)品的流量，讓用戶(hù)主動(dòng)分享APP中的內(nèi)容到社交平臺(tái)來(lái)達(dá)到拉新和促活的目的，市場(chǎng)上絕大多數(shù)APP都有第三方分享的功能，它是內(nèi)容分發(fā)的最有效途徑，并且大大降低了企業(yè)的營(yíng)銷(xiāo)成本。

作為用戶(hù)和產(chǎn)品之間的橋梁，社交分享在產(chǎn)品的發(fā)展過(guò)程中扮演了重要的角色。尤其是剛上線的產(chǎn)品，很難通過(guò)產(chǎn)品的內(nèi)部體系來(lái)實(shí)現(xiàn)快速的用戶(hù)增長(zhǎng)，所以會(huì)更加依賴(lài)于分享來(lái)達(dá)到廣泛的傳播，獲取目標(biāo)用戶(hù)。

在常用的社交分享組件中，微信（微信好友和朋友圈）、微博、QQ（QQ好友和QQ空間）是三大主要平臺(tái)，而其中微信憑借高達(dá)9.38億的月活躍用戶(hù)以及高達(dá)29%的日均手機(jī)應(yīng)用使用率，成為各款A(yù)PP選擇最多、排位最靠前的分享途徑。即便同樣是騰訊系下的QQ，也在QQ空間中加入了分享到微信好友和朋友圈的功能。

用戶(hù)分享內(nèi)容到社交媒體或好友，不應(yīng)該是一種粗暴的強(qiáng)制行為。我們應(yīng)該在保證產(chǎn)品本身內(nèi)容有吸引力的核心前提下，仔細(xì)揣摩用戶(hù)心理，結(jié)合產(chǎn)品本身的特色，在不同情境下提供給用戶(hù)最合適的分享平臺(tái)及方式，讓用戶(hù)分享成為一種水到渠成的自然行為，甚至在某些時(shí)候還能給用戶(hù)帶來(lái)一些小的驚喜就更棒了。

下面我們會(huì)從不同維度來(lái)分析一下APP的社交分享功能設(shè)計(jì)，看看這里面有哪些值得探討之處。

這是我近期獨(dú)立完成的一個(gè)紅包分享項(xiàng)目，暫時(shí)入口在滴滴app里的積分商城，我也跟著同步上傳份項(xiàng)目總結(jié)吧

以下圖片都為設(shè)計(jì)效果圖，具體內(nèi)容，具體文案以線上為準(zhǔn)。

項(xiàng)目背景

1. 增加滴滴紅包樣式，拓展商業(yè)化渠道，促進(jìn)滴滴紅包變現(xiàn)。
2. 實(shí)現(xiàn)商家品牌推廣。
3. 為滴滴用戶(hù)獲得滴滴優(yōu)惠乘車(chē)券提供新的渠道。
4. 豐富滴滴產(chǎn)品形態(tài)，實(shí)現(xiàn)用戶(hù)拉新同時(shí)提升用戶(hù)使用頻次及活躍度。

項(xiàng)目目標(biāo)

1. 形成滴滴商家紅包購(gòu)買(mǎi)生態(tài)，增添滴滴商業(yè)化的新形式
2. 讓商家為乘客的優(yōu)惠出行助力
3. 進(jìn)一步提升滴滴口碑，增加滴滴良好的社會(huì)影響力
4. 新用戶(hù)拉新，老用戶(hù)活躍度提升
5. 同時(shí)為普通用戶(hù)提供紅包購(gòu)買(mǎi)渠道，促進(jìn)普通用戶(hù)之間的社交

信息圖

信息圖本身是一個(gè)合成詞，由信息和圖兩個(gè)詞組成多稱(chēng)之為（Infographics或Infographics Graphics），在40年代的時(shí)候就開(kāi)始出現(xiàn)，使用在報(bào)紙及新聞?lì)愲s志方面，其中杰出的代表阿根廷的信息圖先驅(qū)Alejandro Malofiej，在1993年西班牙設(shè)立了以他為名的主要針對(duì)信息圖表設(shè)計(jì)的Malofiej獎(jiǎng)。

在報(bào)紙、雜志等紙質(zhì)媒體中，為了讓讀者感到新奇且直觀容易的理解，運(yùn)用了大量的信息圖解的表現(xiàn)。

如下圖所示：

每一個(gè)選項(xiàng)都是一個(gè)tab ，tab 的形式千千萬(wàn)，但今天只講這種選中后下面帶橫線的。（我們給這個(gè)橫線起個(gè)名字叫做小短線吧，下文都這么叫了哈！）

今天的大綱如下：

• tab是用來(lái)干嘛的
• tab 的分類(lèi)
• 幾種常見(jiàn)的小短線
• 小短線的注意事項(xiàng)一
• 小短線的注意事項(xiàng)二