研發不愿意開發幾套UI界面,那是因為你沒試過這個方法

1 評論 3911 瀏覽 16 收藏 11 分鐘

編輯導語:設計團隊在日常工作時,經常會遇到一些風格化等等不相同的問題,這時候需要一套設計原則來敲定界面,確定用戶真正想要的,也能提高團隊整體效率;本文作者分享了關于UI設計中的設計變量,我們一起來看一下。

設計系統基本就是組織如何構建數字產品的故事,在公司內部,設計系統改善了產品團隊之間的協作,而設計和工程團隊之間面臨的一個常見問題是:共享品牌準則和界面信息。在開發過程中,應該遵守還原設計的內容,但是我們都知道這并不是那么簡單。

從目標達成的角度來說,設計規則的創建與執行同樣重要。

我們期望參與產品的每一個角色,都能記住設計規范,結合設計原則(Perceptual Pattern )最終達成界面展示在用戶面前的樣子;這也就需要設計系統內,有一套控制性強、拓展性高的方法來維系產品的風格呈現,也就是我們今天將要討論的設計變量(Design Token)。

主題設計神奇來啦!知識點Get了嗎?

一、構成

什么是設計變量(Design Token)?

在數字產品的概念中,許多中心和微小的UI信息片段將在多個平臺上使用,被稱為:設計變量(Design Token),他們是設計系統中設計語言的構建塊,也是設計決策的呈現。

他們維護核心樣式的所有值:間距,顏色,版式,斷點,動畫,字體,平臺比例尺,組件狀態等,最終通過數據表示。

命名規范和結構化的約束,可確保產品體驗的統一度與靈活性,更進一步可為產品打造賦有情感的品牌認知;而對于SaaS類或者APass類的公司而言,設計變量還可提供給多個合作商所用,滿足多種定制化的訴求。

二、實施例舉

在以往的真實產品中,示例(如下)。

設計人員會發現,實現和樣式管理的環節在開發過程中是完全斷掉的,設計語言轉化為開發的語言時,缺少風格系統完整性的延續;我們通??吹降膕tyle代碼都是一些幾乎沒有體感的參數,且公司產品體量越龐大復雜,想要全局迭代就越是痛苦。

主題設計神奇來啦!知識點Get了嗎?

但如果我們將這些參數封裝起來,用語義化的方式來進行描述,就增強了“系統下的畫面感”,如“font-size-level03”、“border-distinguish-background” 等,就是設計準則下情景化的歸類與描述。

主題設計神奇來啦!知識點Get了嗎?

但語義命名只是一個最終呈現,真正讓設計與開發者都能“讀語義,識運用”;還需要我們在設計系統中建立一整套完整的設計變量對應表,并讓大家對它們有著清晰的記憶。

這里我們將以群核科技旗下,工具設計系統(Tools )中的設計變量為例,來給大家進行詳細分析。

首先在設計原則下,我們引申出設計變量規則的制定原則:精準、靈活、易讀。

意指歸類與對象的精準性,配置化的靈活度,語意命名上的易讀性。

主題設計神奇來啦!知識點Get了嗎?

對所需范圍進行定義,命名規則與前端書寫規則達成約定。

主題設計神奇來啦!知識點Get了嗎?

變量的“結構完整”,有助于設計與工程團隊在長期維護上,提升靈活度,3層繼承結構,很大程度保證了“精準”“靈活”這一原則。

主題設計神奇來啦!知識點Get了嗎?

定義完基礎規則,我們具體來看設計變量在產品構建中,三大主用途——主題定制、跨平臺呈現、優化工作流。

1)主題定制

我們找到產品界面中定義“核心樣式”的部分,例如顏色,字體大小,空間,動畫,陰影,斷點等等;通過這些具有統一命名規則的實體,用于代替硬編碼的值,直接集成到設計系統下的組件庫里,也在日常的產品界面開發中使用。

主題設計神奇來啦!知識點Get了嗎?

主題設計神奇來啦!知識點Get了嗎?

通過繼承,別名變量起到了銜接全局變量和指定變量的作用,指定變量影響了最終的樣式呈現,從而實現主題功能。

單個主題可供多個產品團隊使用,主題本身也提供可配置化,即擁有不同的主題外觀體驗能力——如“客戶訴求”、“用戶自定義”,“產品定位差異”等;也可通過創建新的主題,完成新的對應表,繼而產生相應的風格模式,例如“暗夜/日光模式”或“舒適/緊湊”布局模式,“企業品牌”定制模式等等。

主題設計神奇來啦!知識點Get了嗎?

主題設計神奇來啦!知識點Get了嗎?

主題功能在產品中體現:

主題設計神奇來啦!知識點Get了嗎?

主題設計神奇來啦!知識點Get了嗎?

2)跨平臺呈現

多端設計是未來發展趨勢。最新的iPadOS 14還為許多應用程序添加了側邊欄,包括音樂,照片,文件和快捷方式,更加高效;它使iPad更具Mac感,也降低了學習成本。

目前我們很多產品都要考慮在 Web、iOS、Android 上設計;如果有新的功能增加,設計和開發會消耗較多的時間在上面,而且很難去統一把控。

Design Token 在跨多端設計中不僅是存儲樣式的變量,更是一套用于各操作系統間進行翻譯的口令;我們希望通過變量來控制一些樣式的屬性,在不同終端做到自動化的映射。

假設在移動端正文字用14x,而在pc端為12px,雖然它們值不一樣,但他們都是使用的color_text__primary,在不同終端變量會自動根據設備來取不同的值,通過一套設計就能實現多端運行,提升效率節約成本。

主題設計神奇來啦!知識點Get了嗎?

主題設計神奇來啦!知識點Get了嗎?

主題設計神奇來啦!知識點Get了嗎?

3)優化工作流

擁有了強大的設計變量樣式庫之后,它對我們的工作流程將帶來什么革新呢?

顯而易見的是,團隊將節省非常巨大的工作量,我們不再依賴單個工程人員的修改質量,且能更大程度減少跨組依賴;此外,早期設計工具無法與設計變量生成器進行本地通信,我們通過優化Sketch插件,完成了變量命名數據的輸出,使得工程人員可直觀看見變量名稱,這將為設計驗收節省大量時間。

產品的大批量的歷史問題也得到解決,數字化的自動識別效率遠高于痛苦的人工調整,設計師和產品團隊都將收獲全新的迭代方式,這是有歷史意義的一刻。

主題設計神奇來啦!知識點Get了嗎?

三、結語

簡而言之,設計變量作為一個管理風格樣式的有效手段,可集成主題管理,對跨平臺開發也同樣起到作用。

簡化團隊合作協作流程,提升迭代維護效率,尤其適用于需要構建多個Web應用程序和跨終端應用程序的組織。

 

作者:神樂;參與:小柴,西之,沙拉;公眾號:酷家樂用戶體驗設計

本文由 @酷家樂用戶體驗設計 原創發布于人人都是產品經理,未經許可,禁止轉載

題圖來自 Unsplash,基于 CC0 協議

給作者打賞,鼓勵TA抓緊創作!
更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 請問這個最終落地實現效果怎么樣,后續維護以及迭代的情況呢

    回復