這次終于要對忍了很久的騰訊云下手了
今天主要改版的對象，是一個我忍了很久，也被折磨了很久的東西 ——?騰訊云產(chǎn)品列表菜單。
簡單介紹一下，就在登錄到系統(tǒng)后臺以后，置于頂部的一個折疊菜單，通過鼠標懸浮展開，然后菜單面板中羅列騰訊云的相關產(chǎn)品條目。
問題分析
因為騰訊云包含的產(chǎn)品數(shù)量太多，所以這個菜單做了5列，且因為還是容納不完所以可以上下進行滾動。下面是完整的菜單截圖。粗略算了下有67個產(chǎn)品類型，每個類型有1到20個不等的子服務，你們可以感受一下...
是不是看了已經(jīng)眼花繚亂了，你們可以理解成它就是一個導航欄，如果使用騰訊云通常你不會只開通一個服務，往往會關聯(lián)開啟好幾個不同的服務，所以經(jīng)常要在服務間跳轉(zhuǎn)，或者打算開通新的服務，而正常使用這個菜單的體驗只能用災難形容。
理論上，對自己啟用服務熟悉的情況下，使用輸入框去來搜就行了，但類似我這種非專業(yè)后端或運維的用戶來講，很多名詞是沒記下來的，過后不一定記得叫什么，然后只能在這個列表里翻……
關于體驗上罄竹難書的問題先不繼續(xù)展開，我們就直接開始分析如何對它進行優(yōu)化的思路。提前聲明，類似這個菜單的優(yōu)化屬于組件級優(yōu)化，主要覆蓋的方向包含?體驗設計、交互設計和信息設計，通過對信息展示和交互的優(yōu)化來提升菜單使用的效率。
首先梳理一遍這個組件的功能模塊，如下圖所示：
在這個框架下，首先拆分成了左右兩欄，左邊上方是快捷訪問，下方是平臺工具。右側(cè)上方是訪問記錄、搜索，下方是產(chǎn)品的列表。
先拋開產(chǎn)品列表不談，快捷訪問這個功能在初期沒啟用是空的，而平臺工具是相對低頻的工具，所以用戶前期使用必然以右側(cè)模塊為主。
最近而搜索欄距離云產(chǎn)品按鈕距離又過長，搜索的結(jié)果又是左對齊的。不僅操作距離長，視覺聚焦的位置移動跨度也很大，周邊干擾的元素又非常多，很難聚焦到關鍵的要素。
如果搜索的結(jié)果多，包含多個分類，那么又會根據(jù)之前的所在列生成結(jié)果，形成多列的搜索結(jié)果，并且單列超出依舊要上下滾動才能看到……
然后我們再看具體的產(chǎn)品列表，雖然包含5列，但你們仔細看其實每列的寬度是不一致的，而且標題左右的間距往往非常小，粘合在一起。
同時，如果我們以找出某個服務為目標按續(xù)逐一查看這些標題的話，那么瀏覽的順序就是先從左側(cè)第一列向下看，滾動完3、4屏高度以后，回到頂部開始看第二列，然后再滾動3、4屏高度再返回頂部。
這是完全不符合我們正常的 F 型瀏覽習慣，因為使用左右查看的話，不同分類高度不一致，很難把握住檢索的完整性，會漏看或重看，過程是很折磨的，比如下面這樣（已經(jīng)開始氣了……）：
雖然這些產(chǎn)品服務是根據(jù)一定的邏輯做出的排列順序，比如數(shù)據(jù)庫類產(chǎn)品顯然靠的比較近，但好像又不完全是，我沒辦法去建立對這個排序規(guī)則的認知，那么內(nèi)容對于我來講就是 “無序”的。
而且每個產(chǎn)品的分類雖然只是文本不能點擊，但是置灰的做法對于識別沒有任何提升，它的權(quán)重被過度削弱不利于檢索的效率。
最后還有就是部分服務屬于我已經(jīng)開通了的，不打快捷訪問不能標記出來，這是作為新用戶而言不能接受的（不管你背后有什么考慮）。
改版說明
所以，對它的優(yōu)化我要做出這幾點改動：
優(yōu)化整體布局，減少組件中模塊的不規(guī)則組合感
優(yōu)化搜索相關的交互，提高搜索效率和體驗
增加對已開通產(chǎn)品的篩選更好的找到正在使用的服務
對產(chǎn)品類別進行組織，構(gòu)建相關的展示排序邏輯
優(yōu)化產(chǎn)品列表排列形式，順應用戶的瀏覽習慣
步驟1：基礎框架構(gòu)建
我的第一步就是重構(gòu)這個組件的框架，不再做成左右兩欄，而是做成上下兩欄。上面是搜索和歷史欄，下面是產(chǎn)品列表欄。
其中，搜索欄是固定懸浮視圖，而產(chǎn)品列表欄是一個滾動視圖，列表滾動不影響頂欄。并且快速訪問模塊打算做到產(chǎn)品列表內(nèi)，默認情況下不開啟，只有用戶添加快捷方式以后，才會出現(xiàn)。
步驟2：構(gòu)建列表的信息展示形式
前面說過，產(chǎn)品雖然分類多，但這些分類顯然是有一定相關性的，我們可以對它們進行歸類。同時，我們還要對它們進行排序，但是使用字母順序的排序顯然是不符合業(yè)務需求的，因為很多核心業(yè)務的初始文字都是非?？亢蟮淖帜?，如云服務、平臺、數(shù)據(jù)等，所以排序是根據(jù)服務的熱門程度和重要性來定的。
所以在列表的展示里，我要按傳統(tǒng)一點的導航來制作，左側(cè)放合并的1級分類導航（大致加的，不是很嚴謹，忽略這個細節(jié)），右側(cè)放對應的產(chǎn)品列表，可以通過左側(cè)導航快速進行大分類的頁面滾動定位。并且，確保瀏覽的順序是符合 F 型的先左右，后向下的單列排序模式。
步驟3：開始正式制作細節(jié)的原型
有了框架的規(guī)劃，下一步開始具體的制作。首先就是確定這個菜單要做多大的問題，原來的設計中，菜單用的大概是1280px的寬，但實際使用過程中，我們?nèi)绻霉P記本經(jīng)常會縮小窗口，菜單也沒有做窗口自適應，導致右側(cè)內(nèi)容展示不全，比如下面這樣。
所以，我定義菜單的初始寬度為 980px，減少可視區(qū)域的寬度，提升瀏覽效率。因為騰訊云內(nèi)容頁本身支持響應式，那么沒理由不讓這個菜單不支持，所以我的設計結(jié)構(gòu)也要確保這個響應式可用。
接著就是在這個在這個畫布中完成對應的原型設計，因為產(chǎn)品數(shù)量太多，屬于沿用原本12px的字號，以及在列表中使用教小的間距，確保顯示的密度和數(shù)量夠大。
其中，移除掉圖標的應用，實際測試下來，圖標在整個組件范圍里沒有起到任何作用，我們不可能通過它來識別模塊，也不需要它在這個場景下提升視覺氛圍或者效果。下圖是加了和沒加的區(qū)別。
而之后建立的信息檢索邏輯，就是先從列表中的標題列開始看起，找到對應的大類再進入下級列表查看。即使是用普通的 F型逐一排查，頁不需要來回進行滾動。
步驟4：對相關交互的拓展
之后完成相關的交互的操作，首先就是搜索和啟用服務的篩選，它們的篩選結(jié)果樣式是基本一致的。
然后是關于響應的應用，寬度上縮小后產(chǎn)品列表可以排列到第二行去，時間關系我就不做解釋了。
最后，改完以后，我們再簡單做個對比
結(jié)尾
時間關系其實還有很多想試的改法沒空做了，暫時就用最好實現(xiàn)的版本來完成。
這里也有一點想法要提供的，就是對于面向 SaaS使用的產(chǎn)品，一些模塊的設計和規(guī)劃，是要向“可用性”看齊的，而不是完全根據(jù)“業(yè)務指導”，否則最基礎的可用性缺失那么其它的規(guī)劃就都沒有意義。
后面有機會再對官網(wǎng)頁面和系統(tǒng)中其它的管理頁面做優(yōu)化思路的分享，有什么云服務產(chǎn)品使用體驗中想吐槽的，也可以私信發(fā)給我。
如果想要深入學習提升變強，就快來B端產(chǎn)品設計全能班學習吧，感受一把投入學習的快樂！
即刻預約立刻開學～
