SLS全新查詢分析體驗—v2.0總結與思考

随着SLS（阿裡雲日志服務）近幾年迅速發展，目前已經服務阿裡雲上萬級客戶，同時也成為了阿裡雲經濟體的基礎設施，為DevOps、AIOps、大資料分析、營運服務、大資料安全、成本管理等多個場景場景保駕護航。SLS産品控制台作為SLS的門面，受到了使用者們的厚愛，目前已是阿裡雲控制台PV/UV名列前茅的核心産品，SLS團隊也一直在緻力打造功能便捷易用，持續穩定高效、性能表現卓越的控制台産品。

雲原生下的機遇和挑戰

雲原生無疑是近年來最火的名詞，相關的技術如K8s、容器、Prometheus、Service Mesh等快速發展，雲原生技術帶來了革命性的變化，各大企業上雲後應用監控和管理的方式也在随着發生改變。在雲原生時代，CNCF（Cloud Native Computing Foundation）提出的可觀察性（Observability）中表示：監控告訴我們系統的哪些部分是工作的，而可觀察性告訴我們哪個部分是為何不工作的，利用Logging，Metrics，Tracing這三大資料的特性：Metrics用來發現問題，Trace發現異常節點，異常節點的Logging來定位根因。SLS也緊跟OpenTelemetry的發展，從底層支撐了這三類資料源，在原先Logging、Trace場景之後，也支援了Metrics類資料源和Prometheus協定。

對于SLS控制台來說，如何做好可觀察性是非常有難度的，在前台上将三類資料最佳的使用場景有機結合起來，形成一套直覺清晰且編便捷的互動理論，我們制定的幾大原則：

• 布局的一緻性（Logging、Metrics、Tracing）
• 功能可拓展性
• 同類功能的聚集性
• 次要操作就近原則
• 操作互動可回溯

查詢頁面是最高頻使用場景

SLS一直緻力于發展成一個DevOps的資料中台，為使用者提供豐富的機器資料接入、存儲、分析、可視化、資料加工等能力，我們也可以輕松地在SLS控制台完成這一系列的工作。當使用者完成了資料接入後，幾乎所有有關Logging/Metrics/Tracing的操作都在查詢頁面完成。

可以說做好查詢頁面的使用者體驗是SLS控制台非常重要的一環。

頁面分析和需求收集

v2.0查詢分析頁面，我們從兩個方面來進行前期規劃：

• 對舊版的頁面進行數分析，從中提取到關鍵功能和使用者習慣路徑，針對性強化和弱化
• 收集深度使用者的需求和業界做法

1. 資料分析

提取一段時間的埋點資料，并制作熱力圖，非常直覺可以看到查詢頁面的高頻操作分布，這裡我們可以看到幾個明顯的弊端：

• 查詢按鈕和時間選擇異常高頻，而兩者之間的操作路徑間隔較長，需要整合相關功能
• 設定相關功能按鈕的分布比較雜亂，左下角的設定按鈕幾乎無操作而日志右上方的設定功能存在語義重疊
• 原始日志、liveTail、日志聚類、統計圖表的使用頻次需要調整順序

2. 需求和功能拆解

有資料支撐之後，我們還需要收集深度使用者的一些需求，避免細節太多這裡提出兩個比較有代表性的例子：

2.1 上下文

上下文功能一直是SLS非常核心的功能，當我們通過查詢得到了一條日志後，很自然需要去找到前後日志并分析問題産生的原因，這個時候做好查詢結果到上下文預覽的鍊路是非常重要的。

舊版上下文通過右側彈層實作，我們收到一些很典型的問題回報：

• 右側彈層的出現視覺上的沖擊比較強，和原始日志割裂嚴重
• 可視區域較小，如果單條日志較大，無法完全看完整條日志
• 隻有過濾功能，二次互動比較雞肋

新版上下文改用下方劃上互動，減輕了視覺上變化帶來的沖擊，其次日志檢視和原始日志類似，互動保持一緻性的同時，可視區域和原始日志一樣，能容納頁面80%的空間給大日志進行展示，最後也增強了高亮顯示和過濾的相關功能，整體體驗更加友好

2.2 查詢分析框遮擋

當我們查詢分析語句過大時候，舊版的很容易出現遮擋問題，需要通過整個頁面的滾動條來解決：

新版我們支援了滾動收起+折疊查詢的互動模式，同時支援固定框

設計詳細

界面的詳細設計，以專業，高效，簡潔，清晰為主要設計原則，吸收了行業優秀産品的視覺及互動亮點，力争為使用者打造易學，易用，清晰的産品體驗，并希望在UI疊代的同時，逐漸建立和完善SLS視覺體系。

舊版

新版

1. 頁面總體布局

從衆多SLS使用者的習慣回報和經驗來看，此次界面設計中總體布局與舊版基本保持一緻，部分功能區域的内部元素位置做了适當調整，需要遵循的還是大的設計方向：同類功能的聚集性、次要操作就近原則。

1.1 Title行

将日志庫/快速查詢詳細資訊隐藏到左側Title中進行懸停顯示，右側按照使用頻率對排列相應的功能，保留從日志庫到快速查詢、告警等資源的延展，折疊設定和分享功能，設定功能以Tab形式也友善後續擴充，遵循：功能可拓展性。

1.2 Search行

根據次要操作就近原則，主要有以下2個變化：

• 原有Title行時間選擇功能移動到搜尋按鈕和查詢按鈕中間

  明确時間選擇功能的附屬屬性和優先級，同時友善操作。為強調查詢按鈕的最高優先級，将時間選擇功能調整為次按鈕樣式，減少主色過多産生的視覺噪聲，突出主要功能。           

• 自動重新整理功能從內建到查詢分析按鈕中

  符合其“按自定義時間自動實時查詢”的語義，這也遵循**次要功能就近原則**。
             

  

1.3 Histogram

保持原有Histogram樣式，底部紅色解釋性文字改為深灰色，減少頁面整體顔色數量，頁面更統一，更沉靜。

1.4 Tab

Tab樣式更加精簡，邏輯上還是與下方内容聯通，明确Tab與内容的從屬關系；同時将舊版Tab行右側的日志樣式配置轉移到日志内容上方的工具欄，明确日志功能邏輯和顯示邏輯之間的關系，顯示配置同樣也是是遵循了就近原則。

1.5 工具欄

工具欄中對于日志顯示設定功能較為複雜，本次改版重點對該位置進行了功能的梳理。

舊版的内容列顯示中內建了較多功能且組織相對複雜不易了解，通過埋點我們發現其中換行與整行顯示功能較為高頻，滿足使用者對不同類型日志的檢視需求，而JSON預設展開層級相對次要，其他功能并不常用，保留換行及JSON設定功能，并按照重要性分主次顯示：

原有内容列設定過于繁雜

從使用者的使用回報上來看，我們此次新增了原始模式和表格模式兩種形式的日志顯示方式，并進行個性化的設定，設定功能下來設計也有比較強的可擴充性：

• 原始顯示模式

  以原始模式的特點來看，重點在于SLS對日志進行的推薦樣式顯示，保留高頻整行、換行功能；其次提供設定圖示按鈕，将呼聲最高的tag設定提出，同時也保留JSON配置，這樣設計也友善擴充更多的個性設定功能。
             

  

• 表格顯示模式

  表格顯示模式更像一種專注模式，更加直覺清晰，表格模式下tag被平鋪是以更加需要突出的是列設定模式，統一的配置方式也不會給使用者帶來困擾
             

  另外，将翻頁器移至與顯示工具同行，友善感覺目前位置的同時，也增加了日志的顯示高度

1.6 快速分析

與舊版基本相同，在UI元素及微互動方面有所改進，下文中會涉及。

1.7 Log

Log功能布置方面，将 上下文查詢 和 Livetail 這兩個較為常用的功能從下拉中獨立出來，友善高頻功能的操作，與新增的tag标簽內建顯示在日志首行。

字型方面，采用了代碼字元較為适用的等寬字型，顯示更清晰，更習慣，更親切。

2. UI元素

2.1 顔色

舊版主色為淺青色：#00c1de，新版改為深藍色：#0070cc，相比之下，新版主色亮度降低，飽和度增加，色彩感受更穩重，專業，更有信任感：

采用新版深藍色為主色的另一個原因是，在使用過程中，發現當字型較小時，主按鈕上的文字的辨識度存在問題：

即主色與白色的對比度較低，造成按鈕文字顯示并不足夠清晰，為了定量确定主色與白色文字的對比度，我們做了如下驗證：

舊版的青色與白色文字的對比度是2.16:1，較大幅度的小于WCAG 2.0 AAA标準的4.5:1；

新版的深藍色：

新版顔色為阿裡雲大多數産品使用的頁面主色，通過資料發現，其與白色文字的對比度符合WCAG2.0 AAA标準，在顔色傳遞的主觀感受及資料展現的清晰度上來講，該顔色作為頁面主色更為合适。各頁面将逐漸全面替換舊版主色。

整體配色方面，有意展現頁面“統一、清新、輕”的視覺感受，克制顔色色相的使用，保證頁面主要任務的突出地位。取消histogram文字内容的紅色，減少頁面上的視覺噪聲。

為了改觀現有界面稍顯陳舊的觀感，在灰色的使用方面，加入主色色相，如快速查詢區域和工具欄區域的底色#FAFBFD，快速分析目前選中底色#E8F0F6，快速分析分割線#E5EEF3；日志key的底色#E5EEF3；這些位置的帶有主色色相的灰色，營造了界面的協調感，使界面不再陳舊原始。

2.2 圖示

為了滿足不同形狀圖示設計，使不同形狀圖示在整體審視時有着大緻相當的視覺權重，制定繪圖範圍框，不同形狀圖示在對應的參考線内設計圖形即可：

對于線性圖示，線型寬度模數為8，以8的整數倍規定線型粗細，不同疏密程度的圖示，線型粗細可上下增減，畫闆大小1024px，基礎描邊粗細為64px。

圖示風格外圓内方，圓角大小根據所處位置靈活調整，部分圖示效果：

3. 互動

在優化互動細節的同時，我們也做了一些大膽的互動嘗試，如上下文浏覽、Livetail的展示。

3.1 優化互動細節

• 取消日志顯示區域hover底色變化的互動：舊版日志顯示區域，滑鼠hover的背景色會變化，滑鼠經過時，底色與key的底色對比度較低，影響日志的觀察，且底色變化在此處沒有實際用途；
• 快速查詢字段，滑鼠hover底色變化，增強使用者操作感覺，同時點選整條底色區域，均可展開字段内容，點選區域變大，提高操作效率，另外舊版的眼睛圖示，改成了更貼合語義的箭頭圖示；

3.2 較大變化互動

1、滾動條向下滑動時，日志工具欄吸頂，隐藏搜尋框及histogram，友善使用者在觀察過程中進行各項操作。另外，由于翻頁器與工具欄內建，節省了縱向空間，頁面内容劃分更清晰；

2、重新規整的日志表格顯示模式，展示更為清晰，專業，除了自定義列設定，使用者可任意拖動列寬，按需進行長日志的展示，且系統會記住使用者的偏好設定，下次進入該日志，将展示使用者上次使用時設定的列寬。

表格模式拖動列寬

3、上下文、Livetail展示方式做了較大轉變，展示載體由右側滑出的pannel改為了從底部滑出，這樣的優點：

• 增強了目前日志與上下文/Livetail之間的緊密性，遵循同類功能聚集性；
• 上下滑設計，遵循可回溯性;
• 後續原始日志上的功能可擴充，遵循功能可拓展性；
• 增加了上下文浏覽/Livetail顯示視窗的面積，可以看到更多的日志内容；

新版上下文浏覽

舊版上下文浏覽

新版Livetail

舊版Livetail

4、同時，在上下文及Livetail中，增加了高亮顯示和過濾條件功能。

• 高亮功能，輸入框中輸入關鍵詞，通過回車按鈕即可highlight對應字段，已選擇的高亮字段存儲在輸入框頭部的下拉中，高效且節省了界面空間，但也存在缺點：需要較小的學習成本；回車後的效果感覺不明顯，後續将做優化。

• 新版上下文/Livetail高亮功能互動

  過濾功能類似高亮功能，由于過濾條件功能更重要，回車後，過濾條件顯示在輸入框後，友善觀察，可以随時增減過濾條件。

寫在最後

雲原生下的可觀察性日益受到企業的重視，在安全、穩定的基礎上，為了更好的服務各種可觀察性場景，SLS控制台對于整體頁面的互動體驗和性能也會持續探索和優化。灰階測試過程中也收到了使用者寶貴的意見建議，也得到了使用者的回報和肯定，我們會随時傾聽使用者的聲音，與使用者一起，打造易用，易學，清晰的SLS，歡迎一起交流。

特别鳴謝：@呂兆健 設計師對于SLS控制台的貢獻

歡迎各類前後端開發、大資料、分布式、機器學習的同學加入，招聘詳情：

https://talent.alibaba.com/off-campus-position/629751

知乎：

https://zhuanlan.zhihu.com/aliyunlog

微信公衆号：日志服務 or LogAnalytics

哔哩哔哩：

https://space.bilibili.com/630680534

開發者社群（存儲）：

https://developer.aliyun.com/group/storage/#/?_k=c756p3