本次改版過程中的主要設(shè)計(jì)依據(jù)是尼爾森可用性原則以及《簡約至上》中的隱藏、刪除、組織和排列交互設(shè)計(jì)四策略，頁面上的細(xì)節(jié)設(shè)計(jì)根據(jù)用戶具體使用場景具體分析，以求達(dá)到最優(yōu)化。

項(xiàng)目概況

項(xiàng)目名稱：安暢云2.0改版設(shè)計(jì)

項(xiàng)目周期：2016.04.20-2016.06.10

項(xiàng)目背景：近年來，越來越多的企業(yè)出于安全考慮，更愿意將數(shù)據(jù)存放在私有云中，但同時(shí)又希望可以獲得公有云的計(jì)算資源，在這種情況下，混合云被越來越多的使用。安暢基于自身IDC資源優(yōu)勢，順應(yīng)發(fā)展趨勢，將“安暢云”平臺(tái)升級(jí)打造為既有公有云計(jì)算資源又有私有云安全保障的混合云管理平臺(tái)。

前期調(diào)研

通過項(xiàng)目啟動(dòng)會(huì)，設(shè)計(jì)師聚集相關(guān)利益者們著重弄清如下問題：

通過對我們公司客戶經(jīng)理（有些企業(yè)會(huì)委托客戶經(jīng)理在平臺(tái)上進(jìn)行操作）和其他企業(yè)的平臺(tái)使用者進(jìn)行用戶訪談，并將訪談?dòng)涗浾砝L制成用戶體驗(yàn)地圖

問題洞察

結(jié)合《用戶體驗(yàn)要素》一書中的觀點(diǎn)，我們從5個(gè)層面分析了現(xiàn)有平臺(tái)所存在的問題：

1. 戰(zhàn)略層：隨著公司發(fā)展和戰(zhàn)略調(diào)整，原有平臺(tái)不能滿足市場和客戶需求。
2. 范圍層：現(xiàn)有產(chǎn)品和業(yè)務(wù)過于局限，平臺(tái)功能急需升級(jí)，以滿足客戶的業(yè)務(wù)需求。
3. 結(jié)構(gòu)層：原平臺(tái)架構(gòu)與信息層級(jí)不夠明確，僅僅注重業(yè)務(wù)需求，對整體架構(gòu)、信息層級(jí)和體驗(yàn)考慮較少。隨著平臺(tái)更多功能和業(yè)務(wù)的拓展，我們需要重新梳理平臺(tái)結(jié)構(gòu)和信息層級(jí)，優(yōu)化用戶體驗(yàn)流程。
4. 框架層：部分頁面操作效率低下，認(rèn)知負(fù)荷與記憶負(fù)荷較大、文案不統(tǒng)一等，導(dǎo)致平臺(tái)可用性較差。
5. 表現(xiàn)層：原平臺(tái)視覺風(fēng)格老舊簡單，且與官網(wǎng)前臺(tái)頁面風(fēng)格不一致。另外，部分頁面視覺元素混亂，內(nèi)容層次區(qū)分不明顯，視覺流容易被打斷。

設(shè)計(jì)目標(biāo)

根據(jù)以上分析，從公司戰(zhàn)略以及客戶需求出發(fā)，基于尼爾森的十大可用性原則，我們確立了此次改版的目標(biāo)是：升級(jí)平臺(tái)功能、平臺(tái)架構(gòu)與信息層級(jí)清晰化、提高平臺(tái)可用性、提升細(xì)節(jié)體驗(yàn)、重塑平臺(tái)視覺形態(tài)。

改版過程

1.?完善平臺(tái)功能

為了使平臺(tái)功能更加完善，滿足客戶業(yè)務(wù)需求，我們對阿里云、青云和Ucloud進(jìn)行了分析，如下圖;

分析結(jié)果：

1. 增加優(yōu)惠金/券功能；
2. 增加標(biāo)簽管理，方便客戶通過標(biāo)簽來管理自己平臺(tái)中的資源；
3. 結(jié)合公司自身特色，增加對IDC的管理與查看，形成與競品的差異化；
4. 增加右鍵快捷操作功能，提升用戶管理平臺(tái)資源的效率；
5. 取消積分功能（因?yàn)榉e分對用戶的激勵(lì)效果沒有優(yōu)惠金/券大）。

2.?重構(gòu)平臺(tái)架構(gòu)與信息層級(jí)

原平臺(tái)存在問題：

（1）主要以公司云計(jì)算產(chǎn)品為主，左側(cè)只有“資源”和“管理”兩大模塊，物理架構(gòu)（IDC）的資源只是在導(dǎo)航欄中提供了“租用托管”快捷入口，物理架構(gòu)模塊的重要性沒有突出，且點(diǎn)擊后新開標(biāo)簽頁進(jìn)入到租用托管模塊中，這樣將云計(jì)算產(chǎn)品與物理架構(gòu)產(chǎn)品分成了兩個(gè)平臺(tái)，客戶需來回切換選項(xiàng)卡查看，操作效率較低。如圖：

（2）原先整個(gè)平臺(tái)只有云計(jì)算一種資源，所以“區(qū)域選擇”功能可以針對平臺(tái)全局去篩選和切換，但是新平臺(tái)將物理架構(gòu)資源與云計(jì)算資源整合到同一個(gè)平臺(tái)中，而物理架構(gòu)資源無所屬區(qū)域，不需要區(qū)域篩選，所以“區(qū)域選擇”功能放在針對平臺(tái)全局篩選的位置就不合適，需作調(diào)整。

（3）原平臺(tái)中與用戶相關(guān)的操作與信息入口分布較散，一部分在“管理”模塊中，另一部分放在導(dǎo)航欄的快捷入口中，如備案、工單、賬戶中心等，這樣用戶很難對平臺(tái)形成統(tǒng)一的結(jié)構(gòu)認(rèn)知，增加了用戶的認(rèn)知負(fù)荷。如圖：

（4）有些比較高頻使用的功能層級(jí)較深，如“用戶信息”放在了“賬號(hào)”的下一層級(jí)，若要進(jìn)入“消息中心”，還需先進(jìn)入到“我的賬戶”頁面，然后才能找到消息中心的入口，這樣操作路徑太長，大大降低了用戶的操作效率。如圖：

新平臺(tái)優(yōu)化：

（1）根據(jù)公司戰(zhàn)略以及客戶需求出發(fā)，用更精準(zhǔn)的文案命名平臺(tái)各模塊（改變文案是提升用戶體驗(yàn)性價(jià)比最高而且效果還不錯(cuò)的方法），如：根據(jù)交互設(shè)計(jì)策略的分組原則，原先平臺(tái)的“資源”模塊根據(jù)現(xiàn)有資源的屬性，在新平臺(tái)中分組為“云計(jì)算”和“物理架構(gòu)”兩個(gè)模塊，這樣用戶就非常清晰的知道平臺(tái)中有兩大資源模塊，入口清晰，操作方便。如圖

（2）將“區(qū)域選擇”功能放到具體云產(chǎn)品的列表和新建頁面中去，只針對云產(chǎn)品進(jìn)行地區(qū)篩選。如圖：

（3）將相關(guān)的操作和入口整合到同一模塊中，統(tǒng)一認(rèn)知，如工單管理、費(fèi)用中心（包含賬戶概覽、訂單管理、消費(fèi)記錄、賬單管理、代金券管理）、消息中心、標(biāo)簽管理等等全部放在“用戶中心”模塊中。

（4）將“用戶信息”、“賬號(hào)管理”的層級(jí)簡化，直接顯示在用戶中心模塊中?？s短高頻使用功能的操作路徑，提高用戶操作效率。如圖：

根據(jù)優(yōu)化思路以及需要增加的功能點(diǎn)，最終我們確定了新的平臺(tái)架構(gòu)由控制臺(tái)首頁、云計(jì)算、物理架構(gòu)、用戶中心和導(dǎo)航欄的一些快捷入口構(gòu)成。

3.?提升平臺(tái)可用性與細(xì)節(jié)體驗(yàn)

新平臺(tái)基于尼爾森可用性原則以及簡約至上中的交互設(shè)計(jì)策略做了以下優(yōu)化：

（1）增加狀態(tài)可見性

清晰的狀態(tài)認(rèn)知可以快速的讓用戶了解自己處于何種狀態(tài)、對過去發(fā)生、當(dāng)前目標(biāo)、以及未來去向有所了解。

1）左側(cè)tab欄選中記錄更加明顯，用戶很清晰的知道當(dāng)前所處位置

2）對于層級(jí)較深的頁面，增加面包屑記錄用戶到達(dá)當(dāng)前頁面的路徑，既可以讓用戶清晰知道當(dāng)前位置，也可讓用戶輕松返回到歷史路徑的任何位置，增加用戶對平臺(tái)的控制感，提升用戶體驗(yàn)。

3）給用戶的操作積極反饋，讓用戶知道當(dāng)前發(fā)生了什么，以及后面會(huì)發(fā)生什么，減少用戶的焦慮。例如：當(dāng)用戶點(diǎn)擊新建云服務(wù)器后，我們的頁面會(huì)提示用戶云服務(wù)器正在創(chuàng)建中，并且告知用戶整個(gè)過程大概所需的時(shí)間。

（3）支持撤銷重做

為了避免用戶的誤操作，平臺(tái)提供撤銷和重做功能。例如：當(dāng)用戶在平臺(tái)中刪除了某個(gè)資源時(shí)，我們不會(huì)將資源真正的徹底刪除，而是放入回收站保留2小時(shí)，方便用戶“恢復(fù)資源。

（3）增加平臺(tái)的一致性（操作的一致性、文案的一致性）

1）操作一致性

平臺(tái)中所有列表頁面，將高頻使用的功能按鈕放在外面，低頻使用功能按鈕以及不鼓勵(lì)用戶操作的功能按鈕都收納” 更多操作”里面去。

2）文案一致性

平臺(tái)中相同場景和操作下，頁面中對應(yīng)的文案應(yīng)該保持一致。例如：與支付有關(guān)的統(tǒng)一都用“支付”文案，不要使用“付款”文案。不要出現(xiàn)未支付、已付款這樣的情況。

（4）防止用戶出錯(cuò)

通過頁面的設(shè)計(jì)、重組或特別安排，防止用戶出錯(cuò)。比出現(xiàn)錯(cuò)誤信息提示更好的是更用心的設(shè)計(jì)防止這類問題發(fā)生。例如：將資源的刪除操作收納到“更多操作”中去，而且右擊資源后快捷操作中不放“刪除”，避免用戶錯(cuò)刪資源。

（5）盡可能讓用戶識(shí)別而不是回憶

當(dāng)用戶通過在各個(gè)資源上點(diǎn)擊?“右鍵”?來進(jìn)行更多操作時(shí)，在彈窗中再次告訴用戶是針對哪個(gè)資源進(jìn)行此次操作的，避免用戶右鍵時(shí)誤操作點(diǎn)擊到其他的資源上去，給用戶造成損失。

（6）提高平臺(tái)操作的靈活性與效率

讓指用戶在使用產(chǎn)品時(shí)能夠方便快捷的完成相關(guān)任務(wù)或動(dòng)作，即讓用戶以最快最便捷的方式完成任務(wù)。

（7）突出重點(diǎn)，弱化和剔除無關(guān)信息（易掃原則）

我們的用戶瀏覽網(wǎng)頁的動(dòng)作不是讀，不是看，而是掃。這說明了用戶要更高效的獲取到關(guān)鍵信息，其他信息可以暫時(shí)忽略，在需要的時(shí)候再展示出來。

（8）容錯(cuò)原則

錯(cuò)誤信息應(yīng)該用語言表達(dá)（不要用代碼），較準(zhǔn)確地反應(yīng)問題所在，并且提出一個(gè)建設(shè)性的解決方案。

（9）提供人性化幫助

為用戶提供必要的幫助文檔，文檔中包含用戶所要的各種情況和信息，幫助文檔要全、簡單、用詞要本地化。如下圖，

4.?重塑平臺(tái)視覺形態(tài)

唐納德·諾曼說：好看的界面讓人覺得用戶體驗(yàn)更佳，更好用。所以，平臺(tái)的視覺形態(tài)非常重要，我們的視覺設(shè)計(jì)師根據(jù)公司整體VI形象，確定了平臺(tái)主色調(diào)為安暢紅（#e2003b）與磨砂黑（#2f323a），輔助色為淺灰（#eef0f6）與各種狀態(tài)色。接下來從3個(gè)方面來具體說說如何重塑平臺(tái)視覺形象的。

（1）圖標(biāo)輕量化、統(tǒng)一化

老平臺(tái)中的圖標(biāo)樣式不統(tǒng)一，質(zhì)感太重，識(shí)別度不高。改版過程中，我們對平臺(tái)中的圖標(biāo)進(jìn)行了梳理和再設(shè)計(jì)，確保使用的圖標(biāo)簡潔易識(shí)別。為了打造平臺(tái)的統(tǒng)一感，所有圖標(biāo)都沿用了相同的視覺元素，統(tǒng)一的圓角使圖標(biāo)有一定活潑感，不生硬，增加了平臺(tái)的趣味性。

（2）化繁為簡，減少頁面元素種類

結(jié)合現(xiàn)有設(shè)計(jì)趨勢，去除所有裝飾元素，減少不必要元素（如投影），適當(dāng)增加留白、行間距以及字間距，保持頁面干凈、清晰。作為云計(jì)算產(chǎn)品，為了達(dá)到清晰易懂的目的，適當(dāng)增加提示，提高用戶的理解效率。

（3）統(tǒng)一視覺規(guī)范，提升工作效率

在完成平臺(tái)主要頁面設(shè)計(jì)的同時(shí)，制定統(tǒng)一的視覺規(guī)范，這樣不僅能提高后續(xù)頁面的設(shè)計(jì)效率，還能讓前端開發(fā)的小伙伴形成統(tǒng)一的認(rèn)知，進(jìn)而提高整個(gè)團(tuán)隊(duì)的效率，同時(shí)，也為公司其他業(yè)務(wù)線的產(chǎn)品提供規(guī)范，保持整個(gè)公司不同產(chǎn)品風(fēng)格一致。

寫在最后

本次改版過程中的主要設(shè)計(jì)依據(jù)是尼爾森可用性原則以及《簡約至上》中的隱藏、刪除、組織和排列交互設(shè)計(jì)四策略，頁面上的細(xì)節(jié)設(shè)計(jì)根據(jù)用戶具體使用場景具體分析，以求達(dá)到最優(yōu)化。

另外，針對本項(xiàng)目我們制定了一套設(shè)計(jì)規(guī)范——《常用中后臺(tái)交互設(shè)計(jì)控件使用場景與規(guī)范總結(jié)》，旨在統(tǒng)一公司項(xiàng)目的前端 UI 設(shè)計(jì)，規(guī)避不必要的設(shè)計(jì)差異和實(shí)現(xiàn)成本，實(shí)現(xiàn)設(shè)計(jì)和前端資源的效率最大化。

作者：潘達(dá)，個(gè)人公眾號(hào)：潘達(dá)設(shè)計(jì)小站，歡迎勾搭

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