編輯導(dǎo)語(yǔ)：亞馬遜的AWS云產(chǎn)品連續(xù) 11 年被 Gartner 評(píng)為“全球云計(jì)算領(lǐng)導(dǎo)者”，作者在使用了這個(gè)產(chǎn)品之后，發(fā)現(xiàn)了一些設(shè)計(jì)特點(diǎn)，本文通過6個(gè)方面來進(jìn)行介紹，讓我們一起來看看吧！

最近體驗(yàn)了亞馬遜的AWS 云產(chǎn)品，發(fā)現(xiàn)了一些設(shè)計(jì)特點(diǎn)分享給大家。由于云產(chǎn)品業(yè)務(wù)比較復(fù)雜，我無法從業(yè)務(wù)角度做出分析，只能做一些交互方面的評(píng)判。大家也可以了解下國(guó)外產(chǎn)品與國(guó)內(nèi)產(chǎn)品在交互上的差異。

本文內(nèi)容主要有以下幾個(gè)方面：

1. 彈窗的應(yīng)用
2. 面包屑導(dǎo)航
3. 表格設(shè)計(jì)
4. 分屏展示
5. 版本切換
6. 懸停交互

PS：因?yàn)?AWS 云科技是一個(gè)大平臺(tái)，我只是做了部分產(chǎn)品的體驗(yàn)，難免有些遺漏或者以偏概全，感興趣的同學(xué)可以自己去體驗(yàn)一下?；蛟S有不一樣的發(fā)現(xiàn)。

一、彈窗替代

彈窗是B端產(chǎn)品中重要的組件，可以承載業(yè)務(wù)內(nèi)容、給出用戶反饋等等，使用頻率比較高。不過在亞馬遜云產(chǎn)品中，彈窗主要用在一些設(shè)置項(xiàng)和內(nèi)容選擇的場(chǎng)景中例如下圖，存儲(chǔ)桶名稱采用了文本框輸入形式，用戶也可以點(diǎn)擊按鈕打開彈窗選擇內(nèi)容。

不過有沒有更好的操作方式呢？輸入框改為下拉選擇控件是不是更簡(jiǎn)單呢？

是因?yàn)檫x擇項(xiàng)很多，下拉選擇不方便？或者用戶要查看存儲(chǔ)桶的詳細(xì)信息才能確定選擇目標(biāo)？這個(gè)點(diǎn)我沒想明白。

總的來說，彈窗用的比較少，而是采用其他形式做了替代。

1. 錯(cuò)誤信息內(nèi)嵌

在亞馬遜中，錯(cuò)誤信息直接展示在頁(yè)面底部，從而減少了彈窗的應(yīng)用，也減弱了阻斷感。

2. 高成本行為減少誤操作

刪除或者禁用內(nèi)容時(shí)，為了避免用戶誤操作，我們經(jīng)常會(huì)使用二次確認(rèn)彈窗。

在亞馬遜中則是采用了輸入固定信息的方式，避免用戶誤操作，也可以省略彈窗提示。不過用戶的交互成本是不是太高了呢？

3. 隱形彈窗

在亞馬遜上傳文件時(shí)，上傳的過程及完成后的結(jié)果采用的是弱彈窗樣式。并非傳統(tǒng)意義上增加了遮罩的彈出層。主要是由于內(nèi)容很多，干脆將彈窗鋪滿了整個(gè)內(nèi)容區(qū)，給人感覺像是普通頁(yè)面，只是需要通過右上角按鈕關(guān)閉窗口。

二、面包屑導(dǎo)航

在亞馬遜中，面包屑是一種非常重要的導(dǎo)航方式。用戶進(jìn)入到操作頁(yè)面時(shí)，左側(cè)導(dǎo)航菜單會(huì)自動(dòng)收起，給內(nèi)容區(qū)更大的展示空間。另外功能的配置大都采用頁(yè)面跳轉(zhuǎn)方式完成，導(dǎo)致功能路徑比較深。所以面包屑菜單成為了唯一的導(dǎo)航方式。

而在國(guó)內(nèi)云產(chǎn)品中，騰訊云、華為云都將頁(yè)面層級(jí)盡量扁平化，一般不超過3級(jí)，所以取消了面包屑導(dǎo)航。阿里云雖然保留了面包屑菜單，但是在二級(jí)頁(yè)面中都增加了“返回”按鈕，面包屑的作用也被弱化了。

三、表格設(shè)計(jì)

在B端產(chǎn)品中，表格是非常重要的組件。亞馬遜中表格設(shè)計(jì)有比較明顯的特點(diǎn)。

1. 右上角的翻頁(yè)器

亞馬遜將翻頁(yè)器放置在了表格的右上角，個(gè)人認(rèn)為不太符合用戶的視覺動(dòng)線。國(guó)內(nèi)翻頁(yè)器都是放在表格下方，畢竟用戶瀏覽到表格底部就可以翻頁(yè)了。放在右上角可能的原因有2點(diǎn)（個(gè)人猜測(cè)）：

節(jié)約空間。單獨(dú)的頁(yè)碼條會(huì)占據(jù)一行頁(yè)面空間；為了節(jié)約空間，表格每頁(yè)顯示的行數(shù)，被放在了首選項(xiàng)設(shè)置，表格項(xiàng)總量則被在了表格標(biāo)題后面（見上圖）；

亞馬遜通過調(diào)研或者數(shù)據(jù)了解到用戶翻頁(yè)行為比較少。主要是通過搜索定位內(nèi)容，并能夠在首頁(yè)就可以找到目標(biāo)；

2. 自動(dòng)換行

我們?cè)诒砀裰薪?jīng)常會(huì)遇到內(nèi)容顯示不下的場(chǎng)景。通常我們會(huì)選擇截?cái)喾绞?，鼠?biāo)懸停觸發(fā)氣泡顯示全部信息。

在亞馬遜產(chǎn)品中，則引入了excel 表格自動(dòng)換行的方式，在首選項(xiàng)中勾選自動(dòng)換行后，表格就可以完整字段信息，便于用戶更方便的瀏覽完整信息。

3. 右鍵功能

亞馬遜表格中沒有單獨(dú)的操作列，只能選定表格項(xiàng)后，激活功能按鈕進(jìn)行操作。而國(guó)內(nèi)表格大都支持批量和單個(gè)操作兩種方式。

不過為了彌補(bǔ)操作列的缺失，亞馬遜表格中增加了右鍵功能，用戶可以在表格首選項(xiàng)中開啟右鍵菜單功能，可以替代瀏覽器的右鍵菜單。另外右鍵的優(yōu)勢(shì)就是可以承載更多的菜單項(xiàng)。不過對(duì)于用戶來說，可能需要重新適應(yīng)這種交互方式。

四、分屏顯示

Web系統(tǒng)中詳細(xì)信息主要是采用彈窗、抽屜、頁(yè)面跳轉(zhuǎn)等方式呈現(xiàn)給用戶。在亞馬遜產(chǎn)品中設(shè)計(jì)了分屏模式。用戶選擇表格項(xiàng)后，下方會(huì)展示表格項(xiàng)的詳情內(nèi)容，并且分屏空間可以拖動(dòng)或者設(shè)定三個(gè)顯示尺寸。從而減少用戶的跳轉(zhuǎn)，操作更加高效。不過這種方式在大屏顯示器上應(yīng)用效果會(huì)更好。

五、版本切換

如果采用A/B test，我們更希望用戶體驗(yàn)新版本，從而獲得更多的反饋信息。所以舊版本入口大都會(huì)弱化展示。而亞馬遜則采用了開關(guān)方式切換版本，放置在醒目的標(biāo)題菜單的位置。

六、點(diǎn)擊VS懸停

在亞馬遜中很少使用懸停交互，更多采用點(diǎn)擊方式。例如表格中的訪問權(quán)限的解釋信息，是通過點(diǎn)擊操作完成的，想要去關(guān)閉浮窗信息，要點(diǎn)擊空白處或者關(guān)閉按鈕。

而我們?yōu)榱藴p少用戶操作，通常會(huì)優(yōu)先選擇鼠標(biāo)懸停的方式觸發(fā)內(nèi)容展示，隨用隨走，交互上更加輕量。

另外為了減少頁(yè)面信息量，我們會(huì)根據(jù)信息重要性，將解釋說明內(nèi)容隱藏在圖標(biāo)里，通過懸停方式觸發(fā)。在亞馬遜產(chǎn)品中，我沒見過這種交互方式。

七、總結(jié)

我不是AWS 云產(chǎn)品的重度用戶，體驗(yàn)也不深入。總的來說，感覺 AWS 與國(guó)內(nèi)的產(chǎn)品有較大的差異。AWS更加樸實(shí)，程序化風(fēng)格比較重。國(guó)內(nèi)的云產(chǎn)品則更多的融入了互聯(lián)網(wǎng)的風(fēng)格。以上就是我對(duì)AWS 云產(chǎn)品的體驗(yàn)總結(jié)。

#專欄作家#

子牧先生，微信公眾號(hào)：HelloDesign，產(chǎn)品體驗(yàn)設(shè)計(jì)師

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Unsplash，基于 CC0 協(xié)議