編輯導(dǎo)語(yǔ)：控制臺(tái)是用戶通過(guò)web端管理和使用云產(chǎn)品的入口，是一種直觀的圖形化界面。那么，在混合云做控制臺(tái)是一種什么樣的體驗(yàn)?zāi)?？本篇文章作者將結(jié)合自身經(jīng)驗(yàn)對(duì)混合云控制臺(tái)展開(kāi)一系列的講述，感興趣的小伙伴們快來(lái)一起看看吧。

一、控制臺(tái)體驗(yàn)

控制臺(tái)(Console）是用戶通過(guò)web端管理和使用云產(chǎn)品的入口，是一種直觀的圖形化界面。

幾乎所有云廠商都提供控制臺(tái)，以方便對(duì)云產(chǎn)品和服務(wù)進(jìn)行購(gòu)買、查看、使用等操作。

1. 公混用戶差異

相比公共云幾千萬(wàn)的線上用戶數(shù)，混合云用戶數(shù)可謂寥寥無(wú)幾。公共云上人人都是 DevOps，是服務(wù)的開(kāi)發(fā)者，是原廠工程師。

用戶只需在一個(gè)控制臺(tái)上購(gòu)買產(chǎn)品和服務(wù)，出現(xiàn)故障也無(wú)需擔(dān)心運(yùn)維修復(fù)，因?yàn)檫@些問(wèn)題都會(huì)被云廠商自行解決。

混合云以大型企業(yè)用戶為主，部門多、角色多、需求差異大，難以在一個(gè)控制臺(tái)完成所有工作。每種角色都是一個(gè)專業(yè)的群體，All in one Console 的產(chǎn)品思路可能會(huì)讓控制臺(tái)變成一艘航空母艦，但對(duì)于每個(gè)崗位的專家用戶而言 “大而全” 不如 “少而?！薄?/p>

2. 混合云管理平臺(tái)

阿里云混合云管理平臺(tái)（Apsara Uni-manager）是面向阿里云專有云和混合云場(chǎng)景的企業(yè)級(jí)云管理平臺(tái)，提供全方位的云資源供給、運(yùn)維和運(yùn)營(yíng)管理能力，具備一體化管控、自動(dòng)化運(yùn)維、智能化分析及個(gè)性化擴(kuò)展等核心競(jìng)爭(zhēng)力；致力于為客戶提供優(yōu)質(zhì)的用戶體驗(yàn)，簡(jiǎn)化混合云管理，加速政企數(shù)字化轉(zhuǎn)型。

“分平臺(tái)，聚能力”的產(chǎn)品形態(tài)為多崗位用戶帶來(lái)了獨(dú)立的管理體驗(yàn)，但給“跨平臺(tái)，體驗(yàn)難統(tǒng)一”埋下了隱患。

混合云對(duì)外交付產(chǎn)品數(shù)量眾多，過(guò)往各產(chǎn)品擁有自己獨(dú)立的產(chǎn)品體驗(yàn)和技術(shù)選型，這就給客戶側(cè)帶來(lái)產(chǎn)品風(fēng)格差異大、管控行為不統(tǒng)一的體驗(yàn)心智。

一致性（Consistency）是每個(gè)復(fù)雜系統(tǒng)平臺(tái)追求的首要體驗(yàn)?zāi)繕?biāo)之一。

體驗(yàn)一致，能讓用戶在跨平臺(tái)使用中形成熟悉感，也能讓產(chǎn)研規(guī)?；蓮?fù)制。

我們將“打造面向企業(yè)級(jí)用戶簡(jiǎn)單+高效+統(tǒng)一的混合云管控體驗(yàn)”作為構(gòu)建體驗(yàn)競(jìng)爭(zhēng)力的長(zhǎng)期目標(biāo)，并在多個(gè)版本產(chǎn)品迭代中逐步滲透管云方法論。

把簡(jiǎn)單留給用戶，把復(fù)雜留給自己。

3. 有序建立，共識(shí)驅(qū)動(dòng)

“一致性”不是一天建立起來(lái)的。首先，設(shè)計(jì)師要直面“業(yè)務(wù)錯(cuò)綜復(fù)雜、依賴公共云產(chǎn)品、客戶需求多樣化”的產(chǎn)研外環(huán)境，又要克服“資源少、交付快、多版本”的研發(fā)內(nèi)環(huán)境。

在每個(gè)版本研發(fā)周期中，留給我們的時(shí)間其實(shí)非常少，如何將“一致性”分階段有效落實(shí)是我們必須面臨的挑戰(zhàn)。

我們將一致性目標(biāo)分為“物理層、行為層、感知層”三層分別推進(jìn)。

在每個(gè)版本的研發(fā)初期，設(shè)計(jì)師要和業(yè)務(wù)、研發(fā)梳理本次必須優(yōu)化治理的體驗(yàn)關(guān)鍵項(xiàng)，并從影響面、產(chǎn)品價(jià)值、研發(fā)成本等角度評(píng)估，哪些是高優(yōu)先級(jí)務(wù)必要落入版本的，哪些是可以在下個(gè)版本進(jìn)行的。

達(dá)成共識(shí)后，設(shè)計(jì)師就能有的放矢地對(duì)每個(gè)體驗(yàn)項(xiàng)針對(duì)性推進(jìn)。

二、物理層

關(guān)注業(yè)務(wù)、系統(tǒng)、設(shè)備差異，打磨“細(xì)致見(jiàn)微”的界面觀感。

1. 拉通公混設(shè)計(jì)底層，打造“一朵云”體驗(yàn)

對(duì)于企業(yè)用戶而言，無(wú)論多少部署地點(diǎn)，無(wú)論購(gòu)買了多少云產(chǎn)商的產(chǎn)品服務(wù)，控制臺(tái)都應(yīng)該提供“一朵云”的管理體驗(yàn)。未來(lái)的企業(yè)用戶很大可能是混合云用戶，也會(huì)是多云用戶。

所以，我們從設(shè)計(jì)系統(tǒng)創(chuàng)建初期就與阿里云公共云保持設(shè)計(jì)共建，在設(shè)計(jì)語(yǔ)言、全局樣式、基礎(chǔ)組件庫(kù)上達(dá)成了一致。

再者，混合云控制臺(tái)中有大量頁(yè)面直接集成公共云頁(yè)面，所以拉通設(shè)計(jì)底層，只會(huì)讓內(nèi)部整體更一致、更可控。

2. 統(tǒng)一導(dǎo)航模式，形成組件化應(yīng)用

導(dǎo)航是信息架構(gòu)中最重要的“冰山一角”。各產(chǎn)品的頂部導(dǎo)航在統(tǒng)一之前“相似但又不同”，主要有三類問(wèn)題：

1. 菜單個(gè)數(shù)超量，局部信息過(guò)載，深度不均勻
2. 多場(chǎng)景、多角色區(qū)分不強(qiáng)，分析鏈路存在斷點(diǎn)
3. 各業(yè)務(wù)獨(dú)立開(kāi)發(fā)維護(hù)，不利于新產(chǎn)品復(fù)用

我們嘗試把“頂部導(dǎo)航”看做一個(gè)大組件封裝，來(lái)解決上述問(wèn)題：

1. 結(jié)合業(yè)務(wù)邏輯梳理導(dǎo)航具備的功能，形成子功能區(qū)塊，并進(jìn)行模塊化開(kāi)發(fā)。
2. 運(yùn)用窮舉思路，列舉各區(qū)塊在不同權(quán)限、角色、內(nèi)容下的不同樣式，通過(guò)配置化方式讓不同類型的樣式在各種業(yè)務(wù)中靈活調(diào)用。

3. 信息展示：高密度，快獲取，易定位

控制臺(tái)單頁(yè)面的信息量往往非常大，“高密度，快獲取，易定位”一直是我們?cè)谛畔⒄故旧蠄?jiān)持的設(shè)計(jì)理念。

（1）高密度

讓同一層級(jí)或關(guān)聯(lián)性強(qiáng)的內(nèi)容聚攏，減少留白。比如，我們讓每個(gè)表格都具備了緊湊模式，讓用戶在一屏中能多看30%的內(nèi)容。

（2）快獲取

通過(guò)優(yōu)化元素之間的間距和對(duì)齊、通欄和分割，讓視線盡量成直線移動(dòng)，更快掃視數(shù)據(jù)。

（3）易定位

“瀏覽”和“切換”是用戶最高頻的兩類行為。在用戶需要頻繁在不同對(duì)象中切換的場(chǎng)景下，我們把切換區(qū)（Switch）始終固定在頁(yè)面頂部，讓用戶滾動(dòng)時(shí)內(nèi)始終看到可切換項(xiàng)，既保持明確的定位感，也能在瀏覽中方便快速切換定位。

4. 關(guān)注用戶真實(shí)設(shè)備系統(tǒng)，讓操作更沉浸、更優(yōu)雅

我們發(fā)現(xiàn)大部分企業(yè)用戶還是使用臺(tái)式機(jī)為主，一般只有鍵盤和鼠標(biāo)（沒(méi)有觸摸板）。

在某些滾動(dòng)場(chǎng)景，橫向滾動(dòng)體驗(yàn)非常糟糕。比如，在多行多列的鎖列列表頁(yè)中，用戶需要先用鼠標(biāo)滑到頁(yè)面底端才能找到橫向滾動(dòng)條，然后拖拽橫向滾動(dòng)條進(jìn)行左右滑動(dòng)以瀏覽表頭其他字段。

如果既要上下滾動(dòng)又要左右滾動(dòng)，體驗(yàn)就會(huì)非常糟糕。

我們對(duì)控制臺(tái)中的所有表格都內(nèi)置了一種“全屏模式”的交互態(tài)。在全屏模式下，表格高度始終固定，縱向和橫向滾動(dòng)條能在首屏就被看見(jiàn)，方便用鼠標(biāo)拖動(dòng)；從信息傳達(dá)角度來(lái)看，全屏也加大了表格寬度，讓更多表頭字段在一屏內(nèi)同時(shí)得到暴露。

另外，我們還關(guān)注到大部分企業(yè)用戶電腦是 Windows 系統(tǒng)，而設(shè)計(jì)師常用 macOS 進(jìn)行設(shè)計(jì)，很多系統(tǒng)差異帶來(lái)的細(xì)節(jié)點(diǎn)會(huì)被忽略。

比如，macOS上已經(jīng)存在覆蓋式滾動(dòng)條，該操作系統(tǒng)有”始終顯示/滾動(dòng)時(shí)顯示/根據(jù)鼠標(biāo)顯示”三種模式可選，而Windows 10前還沒(méi)有一個(gè)設(shè)置來(lái)控制滾動(dòng)條的可見(jiàn)性。

這就導(dǎo)致 Windows 10 之前系統(tǒng)下的“F型”頁(yè)面滾動(dòng)條“又多又粗”，視覺(jué)上非常不美觀。

所以針對(duì) Windows，我們對(duì)滾動(dòng)條進(jìn)行了樣式覆蓋預(yù)置，讓滾動(dòng)條看上去更優(yōu)雅、更美觀。

不過(guò)，近期微軟也宣布將重新設(shè)計(jì)非覆蓋式滾動(dòng)條，以適應(yīng)Fluent Design的設(shè)計(jì)理念，并在Windows 11/10得以運(yùn)用，我們需要保持關(guān)注后續(xù)如何適配新系統(tǒng)的變化。

5. 讓文案及時(shí)有、講清楚、好理解

文案，是中后臺(tái)平臺(tái)系統(tǒng)的細(xì)胞。文案治理是個(gè)長(zhǎng)期過(guò)程，需要和國(guó)際化內(nèi)容團(tuán)隊(duì)緊密溝通，建立內(nèi)容定期走查和更新機(jī)制。好的文案體驗(yàn)應(yīng)該是：

（1）及時(shí)有

在用戶容易產(chǎn)生疑慮的位置，盡可能多增加文案進(jìn)行解釋說(shuō)明。

（2）講清楚

與公共云相似的文案場(chǎng)景，要明確展示出差異化。

（3）好理解

避免機(jī)器語(yǔ)言直接暴露，也要考慮國(guó)際化翻譯后是否符合當(dāng)前語(yǔ)境。

三、行為層

將“選擇”、“搜索”、“篩選”的用戶行為收斂為幾種固定交互模式，讓用戶形成統(tǒng)一的操作心智。

1. 數(shù)據(jù)動(dòng)態(tài)獲取，分梯度制定面板樣式和能力

動(dòng)態(tài)獲取導(dǎo)致下拉面板的菜單個(gè)數(shù)容易發(fā)生變化，比如有些客戶可能購(gòu)買了上百款云產(chǎn)品，有些客戶只購(gòu)買了幾個(gè)，“一刀切”的面板樣式難以承載動(dòng)態(tài)數(shù)量的菜單展示，而有些數(shù)據(jù)結(jié)構(gòu)是相對(duì)固定的。

比如，同一云廠商的云產(chǎn)品都有“一級(jí)分類”→“云產(chǎn)品”→“二級(jí)資源”這樣相似而穩(wěn)定的層級(jí)結(jié)構(gòu)，所以就有可能根據(jù)層級(jí)和數(shù)量推導(dǎo)不同樣式，并封裝在一個(gè)大組件里，在超量時(shí)提供分組、搜索和錨點(diǎn)能力，讓選擇更快速。

2. 根據(jù)用戶習(xí)慣，收斂為少而精的數(shù)據(jù)過(guò)濾模式

我們將數(shù)據(jù)過(guò)濾收斂為“實(shí)時(shí)篩選”和“多條件篩選”兩種過(guò)濾模式，滿足不同條件個(gè)數(shù)、不同查詢頻次的使用訴求。

“實(shí)時(shí)篩選”是一種逐步縮小范圍的查詢心智，適合條件個(gè)數(shù)不多的業(yè)務(wù)場(chǎng)景；“多條件篩選”是一次性多個(gè)條件并發(fā)查詢命中結(jié)果的心智，適合條件個(gè)數(shù)多而且復(fù)雜、接口實(shí)時(shí)查詢慢的業(yè)務(wù)場(chǎng)景。在多條件篩選中，我們將某些高頻條件常駐在面板外，提高內(nèi)容的曝光率。

四、一致性落地

任何設(shè)計(jì)規(guī)范從產(chǎn)生到落地，都是一個(gè)意識(shí)傳遞的過(guò)程。

在業(yè)務(wù)規(guī)?；l(fā)展的重壓下，我們一直在探索如何讓設(shè)計(jì)規(guī)范在產(chǎn)研鏈路中又“快”又“準(zhǔn)”的傳遞。

（1）快

面向產(chǎn)品經(jīng)理和設(shè)計(jì)師，我們建立了一個(gè)搭建平臺(tái)Teamix，將混合云設(shè)計(jì)規(guī)范內(nèi)置到搭建物料中，讓需求方在原型階段更多關(guān)注業(yè)務(wù)邏輯本身而少關(guān)注設(shè)計(jì)規(guī)范的約束，讓專業(yè)人做專業(yè)事。

需求溝通和設(shè)計(jì)協(xié)同在一個(gè)平臺(tái)上進(jìn)行，也是為了讓不同角色能更可視、更精準(zhǔn)、更自由的「在線」表達(dá)。

（2）準(zhǔn)

面向開(kāi)發(fā)者，我們提供了“精于心，簡(jiǎn)于行”的前端開(kāi)發(fā)解決方案Teamix Pro。

它預(yù)設(shè)了混合云業(yè)務(wù)所有通用場(chǎng)景的UI樣式和邏輯性代碼，讓開(kāi)發(fā)者大膽跳過(guò)那些「重要但你又不想關(guān)心的樣式、邏輯」，全力關(guān)注真正復(fù)雜的業(yè)務(wù)邏輯實(shí)現(xiàn)。

Teamix Pro致力于完美還原設(shè)計(jì)規(guī)范，用大組件思路拼裝頁(yè)面，最大程度減少頁(yè)面代碼量，讓「高質(zhì)量還原」和「高效開(kāi)發(fā)」同時(shí)成為可能。

可視化搭建和可視化配置是我們探索設(shè)計(jì)規(guī)范價(jià)值最大化的兩個(gè)方向，設(shè)計(jì)資產(chǎn)無(wú)論是以Lowcode還是Procode形態(tài)輸出都是為了提高”設(shè)計(jì)規(guī)范流轉(zhuǎn)效率”。

由于篇幅有限，本文重點(diǎn)講述近半年來(lái)我們?cè)?strong>物理層、行為層的一致性提升工作，后續(xù)會(huì)用專門一篇文章來(lái)介紹感知層的實(shí)踐，敬請(qǐng)期待。

作者：壹??；公眾號(hào)： Alibaba Cloud TxD

原文鏈接：https://mp.weixin.qq.com/s/Ag8sjlBTbk4CjsgOmWa3iw

本文由 @Alibaba Cloud TxD 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自Unsplash ，基于CC0協(xié)議。