聊聊數字化產品的「設計語言」
數字化經濟日益發達的現階段,數字化產品作為線上觸點,也就逐漸成為服務中的標配,它更像一個服務員通過屏幕與用戶發生對話。在這場對話中,好的設計應該像一門語言,能夠承載起傳達與溝通的工具屬性。
一、為什么我們需要設計語言系統(DLS)
我們也可以見到,越來越多的設計團隊都會構建一套屬于自己產品的設計語言系統。對于團隊內部,它的意義在于通過系統化的設計規則,來控制產品長期迭代的熵值,以及提升團隊的協同效率。同時,設計師有機會從重復的勞動中解脫出來,投入更多精力到探討問題本質實現價值創新。
就好像在石器時代,祖先們記錄事件或表達情感的混亂程度,遠遠高于現代人,關鍵在于是否擁有一套成熟的語言系統。
對于外部用戶,設計語言系統可以讓產品在不同終端、不同場景中的表現保持一致性,也有機會通過植入品牌基因的方式形成視覺錘,提升產品的識別度以及消費者對品牌的認知。就好像,我們可以通過“豬鼻”車頭識別出那是寶馬,通過“青蛙眼”車燈知道那是保時捷,是因為這些汽車品牌通過長期保持某個“一致性”的表現,形成一套高識別度的設計語言來表達“這就是我”。
二、界面設計的語言屬性
在這里我們將借助語言學的角度,來探討數字化產品界面設計語言系統的構建。在語言的應用中,我們通常會涉及語法、語素、語句、語境、語氣等維度,通過不同的組合達成應景的表達與適時的溝通。
1. 語法
設計原則,可以理解為設計語言中的語法,是構建設計語言系統的起點,用于傳達品牌主張或設計理念,它將指引業務設計執行的方向。
制定設計原則時,首先研究用戶特性,聚焦產品核心價值,然后通過腦暴等形式選擇有特點的維度,結合用戶體驗與品牌屬性將其視覺化,最后用簡要的語言歸納出來。
例如Airbnb的設計原則簡單歸納為幾點:
- 統一性:每一塊設計,都是更大整體中的一部分,因此必須站在更大范圍的角度上,給予系統積極正面的貢獻。設計功能不應該是孤立的,也不能是離群的。
- 普遍性:Airbnb在全世界使用,用戶更是一個全球性的社區。我們的產品和可視化語言應該受到用戶歡迎,同時也要易于訪問。
- 標志性:我們專注于設計和功能,因此在這兩方面,我們要即大膽又清晰。
- 對話性:呼吸對生命如此重要,我們要把同樣的設計理念融入到產品里面,通過更容易理解的方式與我們的用戶進行交流、溝通。
2. 語素
視覺基礎是構成設計語言的最小單位,就像語素是語言中最小的音義結合體。在原子設計理論中,它屬于最小粒度的元素,通常包括:顏色、字體、圖標、網格等。
3. 語句
組件就像由若干個語素組成的語句,比如一個基礎按鈕,通常就是由顏色、字體、邊距等元素組成。而我們平時所說的組件庫,其實就是一部詞典,其中包含了設計系統中所需的基礎組件與用法,在界面設計中也具有較高的通用性。
4. 語義
符號是語言的載體,但符號本身沒有意義,只有被賦予含義的符號才能夠被使用,這時候語言就轉化為信息,而語言的含義就是語義。在視覺傳達設計中也一樣,使用的圖標或圖形,需具備正確的語義屬性,如果商場導視設計中非要使用“裙子”圖標來代表“男廁”入口,如此混淆語義挑戰公眾認知,那就等著被投訴吧。
5. 語境
這里說的語境包含3個維度:一是流程意義上的上下文;二是產品屬性中的語境;三是用戶當下所處的環境。
當設計需要對上下文進行特別處理時,有可能對話的層級次序是受限于屏幕稀缺性,通??刹捎肸-Depth疊加(Material Design屬性)、步驟條、元素關聯轉場動效等方式。舉個常見的例子,當用戶發起一個刪除數據的請求時,界面會彈出一個二次確認的模態會話,用戶點擊確認之后才會執行刪除操作。
過去很長一段時間,數字產品設計圈內熱衷于討論的兩種風格類型:隱喻(擬物化)與抽象(扁平化),時至今日可以說扁平化的風格在應用數量上壓倒擬物化風格。
然而,我依舊認為設計的風格策略取決于產品屬性中的語境,這也是如今iOS人機界面設計規范所提倡的,它不再像早前的規則片面拒絕隱喻設計,而是鼓勵設計師將用戶在現實中最為熟悉的視覺樣式即操作方法映射與界面設計之中,蘋果官方的Garageband就是一個很有說服力的例子。
針對用戶當下所處的環境來適配界面語境,常見通過界面換膚的手法來實現,比如:微信讀書等閱讀應用為用戶提供白天模式或黑夜模式的選擇。用戶所處的外部環境因素可以很大程度上決定界面語言的應用,就好像在菜市場買東西要靠吼,在圖書館借書僅需要用肢體語言便能達成。
如上,微信讀書針對外部環境因素的自定義“語境”
6. 語氣
交互界面通常需要使用說明或提示文案來指導用戶完成操作,大多數情況下都是使用第二人稱,就像在與用戶對話。從以用戶為中心的角度上講,建議保持謙遜、友善的語氣,盡可能避免使用晦澀的專業術語,謹慎使用帶有強烈情感屬性的感嘆號,或過于口語化的語言。另外,語氣的拿捏也將直接影響到與用戶的距離感,以及當下的應景度。
正確示例:使用檢索可以快速搜索任務。
不良示例:你一定會愛上方便快捷的檢索功能!
7. 語速
語速在這里指的是界面的信息密度,在不同的場合對語速的控制能夠提升接受者的體驗,視覺設計也同樣需要注意把握間距與留白,網格系統在這里可以起到“節拍器”的作用,借助節拍器可以讓設計更具節奏感。而交互意義上的語速,更多體現在操作路徑的長度,以及動效的速率。
如上,富途證券在產品介紹與盤中交易2個不同場景下的“語速”
8. 響度
其實就好像我們說話可以通過音量大小來控制信息的可感知程度,希望接受者聽清楚的就說大聲一點。
湯姆奧斯本(Tom Osborne)的視覺響度指南(visual loudness guide)是一個如何系統地處理按鈕和鏈接的例子,它們不是單獨列出,而是作為一個套件呈現,并且根據每個元素的視覺沖擊力會相應的擁有一個「響度」值。我們在構建設計語言系統時,也同樣需要設置梯級“響度”的按鈕、字重等組件來滿足不同場景的表達需求。
Tom Osborne的視覺響度指南
設計語言系統的生態性
1. 基因遺傳
同一個語系下的語言,無論是經過了朝代更迭,還是地域的遷徙,一定會保留一些固有的特性,這就是語言系統本身具有基因遺傳的生態特性。
一套成熟的設計語言系統,也同樣對產品設計表現有著基因級別的底層影響力:在“代際”遺傳上,體現在經久不衰的堅持,比如:Burberry的格子紋理,無論是在哪一年的產品款式上,都不會丟失這個屬性;在“同輩”影響上,通常體現在不同終端場景下產品表現的一致性,或是兄弟產品的相似程度。
2. 動態進化
設計語言系統不是一份靜態的組件庫與規范文檔,而是一個動態的且能自我進化的系統。它的動態進化屬性基于3個契機:
- 設計師基于可復用組件的設計系統構建產品功能設計時,可省下更多的時間,轉移到設計系統上的優化;
- 隨著產品發展,設計師將會遇到更多特殊需求,從而也會創建新的設計模式來解決問題,而這些新的設計模式也將同時反哺設計系統,不斷提升系統的完善程度;
- 設計系統中可復用組件等的規?;瘧?,便于設計單元缺陷的暴露,這也將為系統單元優化提供優勝劣汰的方向。
3. 開放兼容
語言同時具備工具屬性與文化屬性,開放兼容對一門語言的意義在于被更多人接受、應用。
當前谷歌、蘋果、微軟、阿里巴巴等大型企業推出了開源的設計語言,這些成熟的設計體系其實承載著大量的項目實踐與經驗總結,對其他企業也有較大的借鑒的價值意義。同時,對于平臺級企業,開放統一的數字語言,讓不同地域、不同類型的項目得以在共同的規則下發展、共生,這對于平臺生態無疑的利好的。
設計語言作為工具來說,需具備普適性,在文化層面上也需具備兼容度——在滿足企業自身品牌與業務需求之上,應該盡可能規避因宗教、民俗等因素帶來的沖突。
舉個例子,在法國和比利時,人們都厭惡墨綠色,因為二戰期間兩國飽受德國納粹侵略之苦,而納粹的軍服是墨綠色的。那么,面向這兩個國家用戶的設計上,便應該避免使用墨綠的元素。這時,設計語言系統中組件元素的豐富程度,很大程度決定了設計表現的選擇空間與可能性。
就好像,在美國街頭詢問公共廁所時,老美可能聽不懂WC,那就用他們聽的懂的Restroom吧,這里想表達的是,你的語言系統中“詞匯”越豐富,越能兼容不同文化背景下的表達。
作者: vertuhuang,公眾號:TalkUX(ID:TalkUX)
來源:https://mp.weixin.qq.com/s/JxIpKfvs5F9Pyjv_7UOuPQ
本文由 @ vertuhuang 授權發布于人人都是產品經理,未經作者許可,禁止轉載
題圖來自Unsplash,基于CC0協議
??