Redesign the viewing experience of data plugins
在【微調(diào)】基于使用場(chǎng)景的走查像云，優(yōu)化產(chǎn)品體驗(yàn)中创译，我提到當(dāng)前云臺(tái)助手對(duì)數(shù)據(jù)模塊的信息組織不合理胜榔。
蘇寧官方在云臺(tái)助手手機(jī)端接入兩方面數(shù)據(jù)：本店數(shù)據(jù)和行業(yè)數(shù)據(jù)方仿。而行業(yè)信息為付費(fèi)服務(wù)筏养，目前云臺(tái)助手將數(shù)據(jù)信息分在兩個(gè)插件展示：數(shù)據(jù)管理和行業(yè)縱覽寻咒。
The mobile version of sellers’ workstation provide data service through two plugins. One presents the selling data of the sellers' own store for free (the left one in Figure 1) , while the other presents the whole category which is for charge (right).??
但此設(shè)計(jì)不合理原因有二：
1. 由于工作臺(tái)和本店數(shù)據(jù)插件中無(wú)引導(dǎo)頁(yè)面或功能谭胚，商家如果不自行去插件庫(kù)查找徐块，很難知道蘇寧提供此功能，不利于轉(zhuǎn)化漏益。
2. 商家開(kāi)通服務(wù)后蛹锰，同類指標(biāo)和相關(guān)聯(lián)的信息割離在不同模塊，瀏覽不方便绰疤，不利于對(duì)比洞察铜犬、理解數(shù)據(jù)。
However, there are two main drawbacks of the?separation of the two perspectives of data.?
1.It damages the?viewing experience. Viewers needs to go back and forth?to compare the data of their stores and the whole category, which brings more loads to their information digestion.
2.It damages the conversion. A great percentage of users don't know that there is a category one, since the free plugin doesn't give a hint on the interface.? ?
為提高行業(yè)功能的認(rèn)知度并優(yōu)化瀏覽體驗(yàn)轻庆，我建議將兩個(gè)模塊整合癣猾。
As a result, I integrate the plugins for higher awareness of the category function and for a better viewing experience.
結(jié)構(gòu)層優(yōu)化 Structure level
為了優(yōu)化數(shù)據(jù)信息的瀏覽體驗(yàn)，在信息架構(gòu)上的優(yōu)化要點(diǎn)有兩方面：
There are two main points in the refinement of the information architecture：
1. Prioritize real-time data （based on the finding of event tracking）
show the real-time data on the homescreen
2.Enhance vertical and horizontal comparison.
horizontal: the change of store' data over time
vertical: the comparison between the store and the whole category
需提高實(shí)時(shí)數(shù)據(jù)的顯示優(yōu)先級(jí)余爆，是根據(jù)頁(yè)面點(diǎn)擊分析得出結(jié)論纷宇。為此，我將用戶較為關(guān)注的實(shí)時(shí)數(shù)據(jù)整合在首頁(yè)蛾方，并與待辦數(shù)據(jù)做區(qū)分展示像捶。
本篇主要討論的優(yōu)化數(shù)據(jù)模塊內(nèi)部的信息組織。當(dāng)前數(shù)據(jù)管理模塊按時(shí)間（實(shí)時(shí)）桩砰、經(jīng)營(yíng)環(huán)節(jié)（流量拓春，銷售）和經(jīng)營(yíng)角色（店鋪整體，買家）整合一級(jí)導(dǎo)航亚隅，此邏輯較為合理硼莽，且用戶在云臺(tái)web端和云臺(tái)助手app端也已習(xí)慣了此種結(jié)構(gòu)，因此可暫時(shí)保持一級(jí)導(dǎo)航結(jié)構(gòu)煮纵《遥基于此種結(jié)構(gòu)，我將數(shù)據(jù)管理和行業(yè)縱覽內(nèi)部各個(gè)信息子模塊做分類整合行疏。
While integrating the two plugins, I remain the current way of main navigation: real-time, traffic, sale匆光，customer. Since users are used to this navigation on mobile and web, it's better not to change in order to keep consistency and to reduce the cognitive loads of learning new pattern.?
整合后的架構(gòu)如下
框架層優(yōu)化 Skeleton level
由于要將信息合并，在每個(gè)頁(yè)面的交互設(shè)計(jì)上出現(xiàn)大概兩方面的設(shè)計(jì)要點(diǎn)：
整合點(diǎn)：解決如何將本店和行業(yè)信息組合展示的問(wèn)題
優(yōu)化點(diǎn)：優(yōu)化已有控件和模塊的交互和瀏覽體驗(yàn)酿联。
下面逐個(gè)介紹殴穴。
Due to the merging of information, there are two main points in the interaction design of each page.
Integration: How to present store and category data integrally.
Optimization: Optimizing the interaction components to improve the ease of use.
整合點(diǎn) Integration
1. 基于“先概覽，再細(xì)節(jié)；先本店采幌，再行業(yè)”的邏輯組織信息?
Basic Narrative: first overview then detail, first own store then category??
將本店和行業(yè)信息融合在四個(gè)一級(jí)模塊下劲够，導(dǎo)致每個(gè)模塊的信息量增多，此時(shí)需要選擇一種合理的敘事順序休傍，引導(dǎo)商家瀏覽數(shù)據(jù)和理解信息征绎。我建議的方式是“先概覽，再細(xì)節(jié)磨取；先本店人柿，再行業(yè)”。
?“先概覽忙厌，再細(xì)節(jié)”? ?以流量分析為例凫岖，先提供整個(gè)店鋪關(guān)鍵指標(biāo)的數(shù)據(jù)概覽（一屏），再詳細(xì)展示流量來(lái)源逢净、商品排行等細(xì)節(jié)信息哥放。?
“先本店，再行業(yè)”
以銷售總覽為例爹土，在頁(yè)面整體和局部卡片上甥雕，均遵循此邏輯。
2. 同類信息融合展示 Integration of different?dimensions
a) 同指標(biāo)不同維度對(duì)比?
The redesign integrates the different dimensions of the same index. For example, the redesigned line chart pesents the real-time PV (the orange line in the?second left interfaces) with the reference of the PV of one day before（the blue line）
b) 同類信息列表合并
3. 對(duì)未開(kāi)通功能的狀態(tài)顯示
When users are using the free version, they will see the notification “Please upgrade your plugin for category data” and button “upgrade now” for a quick access to the purchase page.?
優(yōu)化點(diǎn)
1. 擴(kuò)大瀏覽面積
行業(yè)縱覽中篩選欄占頁(yè)面比例較大琼娘，如何優(yōu)化節(jié)約頁(yè)面空間峭弟？
我有兩方面建議，一是充分利用標(biāo)題欄融合功能脱拼，將較為常用的時(shí)間切換控件放在標(biāo)題欄孟害，將不常切換的放在篩選欄原位，二是用沉浸式技巧挪拟，向上滾動(dòng)（瀏覽頁(yè)面下方內(nèi)容）時(shí)收起篩選欄，向下滾動(dòng)（回頂部）時(shí)展開(kāi)击你。
In order to expand the viewing areas, I integrated the data picker into the title bar.
2. 時(shí)間控件優(yōu)化
當(dāng)前時(shí)間控件里玉组，時(shí)間和時(shí)間段用列表的方式平鋪展示，不僅不直觀且需要翻頁(yè)丁侄，浪費(fèi)空間較多惯雳。
Current data picker shows dates in a long list which is inconvenient to choose from.?
重新設(shè)計(jì)時(shí)間控件，將日期按日歷樣式展示鸿摇，讓日期的展示更直觀石景。并在用戶選擇時(shí)加以控制，通過(guò)不顯示和置灰約束其選擇超出范圍的時(shí)間。
In my redesign, the data picker is changed into calendar style which is more intuitive. For the dates that are disabled I present them in light grey or just them invisible.?
3. 信息可視化集成
當(dāng)前店鋪排名用列表式展示潮孽，不夠直觀揪荣，可將名次用縮略曲線圖展示，突出變化趨勢(shì)往史。
To emphasize the change of store ranking, I use an?thumbnail（the line charts）to improve data-ink ratio and make the trend more obvious.?
小結(jié)
作為BI產(chǎn)品，體驗(yàn)上的要點(diǎn)之一是節(jié)約用戶的認(rèn)知成本椎例，讓用戶關(guān)注在理解信息并利用信息挨决，而非查找信息上。在信息呈現(xiàn)上订歪，要合理利用可視化手段脖祈，將一組組的數(shù)據(jù)結(jié)合為結(jié)論導(dǎo)向的圖表，幫助用戶生成洞察刷晋。本次優(yōu)化盖高，主要在將以功能導(dǎo)向的設(shè)計(jì)語(yǔ)言，轉(zhuǎn)換成以用戶導(dǎo)向的設(shè)計(jì)掏秩，以用戶理解為出發(fā)點(diǎn)組織信息或舞。
