

在當今互聯網產品越來越多元化的時代,設計系統也從早期的設計與開發之間協作的標準資源庫,演變成同時肩負着透傳品牌價值的重任。在多元化的產品當中,我們應當從始至終傳導給用戶一個統一的品牌感受,而非過於強調歸屬於多元當中的某個單元。以一個傳統工業設計當中的「車」來舉例,常規車輛的前進氣隔扇結合Logo永遠是辨識車輛品牌的基本要素。那麼在搭建設計語言手冊時保持統一尤為關鍵,在降低用戶認知及學習成本的同時,形成該產品獨有的使用習慣,提升品牌的辨識度並透傳品牌的價值。
我們將產品劃分為三個階段:
1.0:滿足了以產品為中心的設計,達成生產售賣通順閉環;
2.0:滿足了以消費者為中心的設計,考慮更多用戶體驗;
那麼明確了我們本次升級的方向後,制定了整個產品的框架,底層加入了人文感官品牌情懷的相關因素,再應用到我們現有的業務上,在協同上進行高效的鏈接,產品到設計,設計與設計,設計到開發。最終形成了我們的前台展現頁面。

其實用戶對我們的要求是一款提升生活品質及愉悅感的產品,而非工具。

綜上所述,我們確定了以品質生活成為我們的本次設計語言升級的slogan,再結合業務的自身特性,我們進行了詳細的拆分後提煉出了以下相關關鍵詞,來滿足用戶更多的情感訴求。
光
專業
高效
親和力
慢生活...
在對用戶的相關情感訴求結合業務進行了落地後,對效率類設計原則也進行了相應的升級。
應用整體架構也是一個應用對外呈現的基礎結構,是系統風格的體現形式之一,除了特殊設計訴求,通常情況下,應用需要使用通用的應用架構來保持系統的一致性和用戶操作的易用性。
布局不是靜態固定的,柵格系統在一個應用內的重要程度不言而喻。我們設定了以4dp / 4pt為基數的柵格系統。
文本作為產品中用戶獲取信息的主要信息載體,字號大小和字重決定了信息的層級和主次關係。對字號、字重、行高以及組合字體進行了設定,為不同的場景創造了層級分明以及清晰的信息讀取體驗。
針對頁面內容區域的通用元素間距進行了分類。設計師結合具體場景的情況,來調用間距參數的適配邏輯。以此來結合柵格系統進行更好的適應相關視覺元素符號的對應變化。
圓角參數
結合業務屬性保證親和力的透傳,在產品儘量避免出現銳角圖形的設計表達手法。故此針對圓角的大小也進行了系統級別的定義,進行深度統一管理!
語意原則及動效等,並依據相關設計原則產出了組件庫。

設計方案的落地尤為重要
掃碼進群

轉載時請連同下方內容一起轉發
請與該公眾號聯繫獲取內容授權
長按二維碼 輕鬆關注
微信公眾號:i58UXD
58同城用戶體驗設計中心