燕千雲作為一款Saas産品，自産品研發初始以來不斷嘗試優化産品的功能和界面設計為用戶提供更好的産品體驗，伴随着燕千雲業務的不斷發展，2022年9月我們發布了1.15視覺體驗升級版本。

本次視覺升級主要從品牌色彩、信息布局、組件交互體驗、插畫情感化設計等方面進行了優化和升級，借此機會，來和各位分享一下産品升級理念及相關設計成果。

2022年9月我們發布了1.15視覺體驗升級版本

【一】

我們的理念

燕千雲産品的全面升級以用戶體驗為中心，将差異化、簡潔化、品牌化融入視覺與交互設計中。倡導簡單、實用、美觀的設計理念，聚焦服務于燕千雲的核心“問詢方便、解答快，智能服務企業員工和客戶”而産生價值。

在交互方面：站在用戶的角度，以解決問題的産品思維去提升用戶體驗。用理解的心态去關注用戶情緒，發現其中問題，找到設計撬動點；關注用戶每個鍊路的體驗環節及過程中的心理變化，不斷簡化用戶操作路徑。

在視覺方面：從“形色字構質”等多方面參考設計流行趨勢，對燕千雲進行視覺升級改造，通過收集、整理、分析相關信息，最終推導出合适的設計方案。

【二】

我們的目标

認知減負：通過可讀性優化、複雜性簡化等減少用戶認知成本。

視覺統一：搭建以用戶體驗為中心的視覺設計體系，綜合用戶使用習慣，提升産品視覺符号，為産品賦能。

信息降噪：通過對信息層級的重新編排和處理幫助用戶高效處理工作。

【三】

我們升級了哪些？

本次我們從系統的品牌色彩、整體信息布局、産品視覺組件、插畫情感化設計四大模塊進行了優化和升級。不僅提升了燕千雲視覺美觀度以及品牌辨識度，也在操作和視覺上為用戶帶來更好的用戶體驗。

01 品牌色彩

色彩是信息傳達與品牌體現的關鍵因素，構建科學高效的色彩系統，建立産品的品牌形象，對産品設計極具指導意義。

科技感的品牌色

藍色被視為高效、安全、穩定、可信任的象征，代表産品的專業與信賴之感。同時藍色也是科技感、品質感數字化創新的主旋律，是大衆對科技的色彩認知。

此次升級燕千雲藍配合湖藍及钴藍的加入，多色的搭配為品牌增添了可能性與獨特的個性表達，避免視覺疲勞，蘊含了更多的活力和想象力，與燕千雲作為可自助、可評價、可量化、可優化、可沉澱的數字化服務中心的定位非常契合。

與此同時，我們盡可能多地體現品牌色的概念，把品牌色融入界面設計中，提高識别度與情感化，帶來更多個性化的新體驗。

豐富多元的輔助色

結合品牌升級中對品牌色的定義，延展出豐富的色彩體系，并應用于産品頁面設計中，最終構建出豐富多元的輔助色。更多輔助色彩的運用，為界面适配的選擇帶來無限可能的操作空間，進一步提升産品的豐富性和清爽度。

清新的中性灰色

灰色是産品體驗設計中至關重要的一節，B端産品的界面設計通常由大量列表、表單、卡片組成，而灰色是為産品界面創造結構、表達邊界、建立信息層次、保持舒适對比度的顔色，是提高可讀性和吸引用戶注意力的關鍵。

在升級的界面設計中，我們将中性的灰色中加入了品牌色，形成新的“擴展藍灰色相”，共同構建灰色的色彩體系，應用于圖标、容器，從而構建更加具有識别度、舒适清爽的産品界面。

02 信息布局

任務中心

1. 列表區域加入快速篩選區，可以進行條件快速篩選，再配合高級篩選增強搜索條件的擴展性。

2. 列表操作中加入對字段顯示/隐藏的配置，拖拽字段可快速排序，滿足用戶自定義列表視圖的需求。

3. 列表表頭添加拖拽調節列寬的功能，方便用戶自定義列寬。

4. 整體添加觸發反饋效果，讓用戶在使用中有及時被回應的感受。

服務目錄

1. 左側菜單選中目錄區域使用和右邊内容一樣的白色背景，使選中目錄部分和右邊内容部分在視覺上形成一體，方便用戶理解左側選中對應右側内容的關系。

2. 服務目錄頁區别于首頁服務目錄卡片，左側選擇目錄的下拉改為樹形平鋪，便于用戶選擇操作，同時适用于獨立頁面更寬闊的空間。

知識中心

1. 整體結構采用左右布局分為菜單和内容區域，用顔色引導用戶聚焦于知識内容區域，減少了用戶的認知負荷。

2. 主頁增加了最近浏覽區域，可以幫助用戶快速定位到需要編輯查看的文檔。

3. 我的知識和收藏并入門戶知識中心菜單内，關注終端用戶的使用體驗，便于用戶收集整理相關知識内容。

服務工作台

1. 在收集實際使用問題和根據工作台定義的基礎上，按照所有單據和單據類型進行劃分，初始化各個單據類型常用的儀表盤和篩選器。

2. 儀表盤可以選擇不同的圖标類型、數據源、配色方案進行圖表定義，組合成用戶實際業務場景。每個業務場景下的圖表類不僅有可視化的統計圖展示，還可以通過拖拽圖表，控制其在頁面展示的位置和大小比例，自定義個性化儀表盤。

單據詳情

1. 整體布局:通過對詳情頁面内容進行重組，削弱分割，使層級更加清晰，同時增加空間的利用率。在卡片部分和模塊之間統一橫向及縱向的間距，使之更為整體性；每個模塊之間适當留白，強調視覺節奏，提高浏覽舒适度。

2. 分級展示功能:

示例一：操作欄按鈕分主次層級展示，不僅可以減少信息幹擾，還能避免誤操作。

示例二：SLA組件重構，把同一類型的解決和響應重組，增加空間使用率，減輕視覺壓力，同時在交互上取消了hover顯示詳情按鈕，直接把詳情按鈕展示出來，簡化用戶認知與操作負荷。

3. 按鈕統一布局:将舊版漢堡按鈕統一移到右側，和其它按鈕位置保持一緻，可縮短交互鍊路，減少用戶記憶負擔，統一操作規範。

4. 提升操作效率:單據詳情側欄Tab寬度增加，由原來的隻有圖标樣式更換為圖标加文字樣式，可以直觀的查看該Tab的指示含義，減少用戶思考時間，提升操作能效。

5. 空狀态引導：在空狀态使用上不僅有提示信息，還放置了操作按鈕，引導用戶進行操作。

03 組件升級

輸入框組件

1. 懸停：通過增加懸停效果以及随之出現的清除按鈕，給用戶反饋的同時，也提供了清除數據的便捷入口。

2.禁用：通過對用戶調研，重新調整禁用樣式，以解決用戶在不同分辨率屏幕顯示時都能清晰讀取數據，提升用戶體驗感。

3. 前置後置标簽：豐富前置後置标簽組件，以滿足不同場景的使用。

4. 數字輸入框：在操作數字“增加”或“減少”按鈕上添加背景展示，區分内容區與操作區，同時也增加了一定的美觀性。

選擇器

1. 選擇按鈕去掉分割線，一是和輸入框的後綴做區分；二是選擇按鈕本身就是選擇框的一部分，不需要在用分割線做區分，這樣也會有割裂感。

2. 多選标簽做了優化，舊版本的标簽是用逗号隔開，這樣做既不能清晰地區分數據，又不能快速針對局部數據做删減；優化後的不僅視覺效果看起來整齊，還可以對某個數據進行針對性删減。

單選/複選/開關

單選/複選/開關在原有基礎上大加圓角，提高組件精細化和精美觀度，更加明确交互效果。

頭像

頭像組件默認顔色由純色改為漸變色，相比純色，漸變色在視覺上的變化更豐富，層次感更強。

04 插畫呈現

不同于傳統B端産品給人以枯燥、呆闆的形象，此次升級我們運用插圖或圖标作為配圖。配合文案，正确、清晰、直觀地表達出當前的狀态，結合情感化設計與用戶産生情緒上的共鳴，從而避免用戶産生疲憊感。

根據插畫表意和複雜度，可分為“簡單場景”和“複雜場景”。燕千雲插畫系統中如缺省圖、狀态等較多使用“簡單場景”類插圖；運營類如banner、注冊等較多使用“複雜場景”類插圖。

簡單場景

當遇到數據缺省、異常報錯等情況時，用戶會産生茫然、無助的負面情緒。我們通過一些文字、圖案告訴用戶“怎麼回事”，“應該怎麼做”，從而緩解用戶的負面情緒。不同于舊版缺省圖隻使用中性灰色系，此次升級的缺省圖加入品牌色，增加空狀态時的豐富感及趣味性。

複雜場景

複雜場景适用于banner，注冊頁面，引導頁等頁面篇幅占比較大的場景。此次升級的配圖不僅準确到位地展示産品特色，還能讓用戶容易抓住關鍵點。

結語

以上是我們在燕千雲1.15視覺升級中一些階段性成果，産品的視覺風格、用戶體驗是一個不斷推進和提升的過程。

後續，我們将持續關注用戶的聲音，不斷地打磨産品的設計細節和體驗細節，給用戶帶來更好的産品體驗，以設計賦能業務增長，助力業務持續發展，創造更多價值!

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!