如何定義一套設計語言1-設計準則

成熟的設計語言

設計語言,近來比較流行,關于設計語言的參考也特別多,最出名的莫過于蘋果的Apple HIG和谷歌材料設計Material Design,也是設計語言的鼻祖,下面我將對設計語言,如何去創造一個設計語言,設計語言包含什么,通過幾期分享逐步拆解

為什么需要設計語言

1.對內

對內?

? 上圖,應該是很多設計團隊都有的情況, 一個按鈕很多尺寸,顏色,大小,有時候我們已經有了規范,但是,各種業務方強※,要個性化,要不一樣,導致整個APP設計 變的很混亂,這是我們設計中經常遇見的,很多APP因為缺少這是基礎原則,導致我們的APP界面每個頁面都不一 樣,設計師都是按照個人的主觀經驗做設計,導致風格層次不齊,缺乏統一性,所以對內,很多時候設計語言 是為了解決統一性和效率為前提下,避免開發工程師重復開發一些組件!

2.對外

對外

對外,統一的品牌符號,品牌特征,有助于加深產品在 用戶心中的印象,統一的顏色和交互形式能幫助用戶加 深對產品的熟悉感和信任感,一個好的設計語言本身可 以在體驗上為產品加分,試想,當你走進星巴克的時 候,發現LOGO變了,咖啡的包裝換了,是不是會覺得是 山寨的感覺,就好比我們在國內去華萊※,吃東西時候雖然都是同樣的薯條,但是總感覺是山寨!好的規范,能夠更好創造一致性的體驗。

設計語言能解決什么問題

①一致性:在整個平臺創造一致性

②明確設計原則:讓每一位設計同學都清楚,我們的產品需要傳遞給用戶的東西是什么,以及整個平臺的約束是什么。

③效率:更好的提升效率,減少重復性工作

④多平臺統一:我們現在處于一個各種設備百花齊放的社會,各種設備繁多。

設計語言包含什么

一套完整的設計語言包含設計原則、色彩系統、圖形、柵格系統、字體、投影、圖文關系這些組成部分。

設計語言的核心內容-設計原則

設計原則包含了一個公司的產品定位以及企業價值觀,是設計語言的靈魂

APPLE HIG

Apple的設計規范,這個比較出名,每一個接觸UI的同學都該先去學習,蘋果的設計規范包括:完整性,一致性,直接操作,反饋,隱喻,用戶控制等幾個設計原則




同樣的,在facebook的設計原則語言里面,也首先強調了他們的設計價值觀:通用,人性,干凈,統一,有用,快速,透明,在facebook所有設計中,都圍繞這幾個點去作為他們設計指導準則

facebook設計語言


airbnb設計語言

Airibnb在建立他們設計語言之前,先根據整個產品公司 定位,價值觀,先得出他們整一個設計語言的關鍵詞:

old

統一:每個設計應該是統一的,不能有太多個性差異化的特征

關于內容:用戶應該更多關注的是內容,而非設計本身

確定的:在設計中減少不確定的因素,和預期

2019

統一:每一部分都是一個更大整體的一部分,應該在規模上對系統作出積極貢獻。不應該有孤立的特征或異常值。

通用:Airbnb在世界各地被廣泛的全球社區使用。我們的產品和視覺語言應該是歡迎和容易接近的。

標志性我們專注于設計和功能。我們的工作應該大膽而清晰地談到這個重點。

對話式我們的動作讓我們的產品煥然一新,讓我們能夠以易于理解的方式與用戶進行溝通。


由此可以

所以我們在建立一個設計語言的第一步,應該先建立一個設計準則,關于設計準則如何定義,我會在下面和大家詳細講解。

如何敲定一個設計原則?

1 提取設計原則的一級關鍵詞


提取一級關鍵詞

第一步,我們先要去提取出關鍵詞,這個關鍵詞怎么來,有幾種方式獲取,第一個從我們整個公司戰略出發,任何一個產品一定有他的戰略,品牌戰略,商業戰略,舉個例子!假設我們是eaby,我們的整個公司今年戰略是全球化,高品質,正品,那么這個就是一級核心關鍵詞!我們所有的設計語言一定要和公司戰略結合起來,可以理解微戰略關鍵詞是整個設計語言頂部金字塔

2.運用情緒版提取二級關鍵詞


我們有了一級關鍵詞后,需要去思考,那么什么樣的設計能給人全球化的感受呢,什么樣的感覺能有高品質感覺,正品應該傳遞什么樣的感覺呢?此刻需要用到第二個方法就是情緒板,不知道情緒板同學,可以百度搜索情緒板設計方法,總之,我們需要通過情緒板去把這些符合這些關鍵詞感受的圖形具體化

高品質的特征是什么?

下圖是一組日本一組花茶設計,那么在這組設計中,設計師是如何體現高品質呢?


首先包裝很精美,耐看,設計簡單簡約


做工精良,源于富士山下


采摘環境很透明,值得被信任


品茶的過程也特別讓人向往,很有儀式感


整個設計很完整,設計感很足



二級詞匯拆解

通過以上一些案例拆解,我們能對這個局品質的關鍵詞有更加進一步的理解,高品質原來在情感層面是一個這么抽象的感覺?但是很多同學會問,那么這次二級詞匯也很抽象,我如何靠這個來做設計呢,太抽象了,很難去理解,表達,別著急,還有下一步?

高品質設計表現形式?

那么關于高品質在視覺形式上如何來體現了,那些設計感覺能代表高品質呢,這個時候就需要我們去尋找一些設計參考, 一些好的設計案例,這些案例,要能代表高品質


?好有品質清晰的圖片


?牛皮癬,不精致不可取


?優雅的排版和留白,文字清晰,雜志感受


?圖文密集雜亂,缺少板式


?精致的布局柵格體系,品質感十足


?缺少板式,設計感太差


?有設計細節,有節奏


?無細節,無設計感


?配色合理,簡單清晰


?配色山寨不可取

設計分層

以上就是我們從一個戰略關鍵詞逐步推導到一級關鍵詞,以及二級關鍵詞,到設計手法,以及對應設計表達,推導的一個全過程。


總結

以上大概微一個設計關鍵詞的,全部推導過程,到設計手法的確定,也是設計語言里面最難的部分,后面的關鍵詞也是類似的思考方法和思路,最終通過推導我們需要得出每個關鍵詞的情緒圖,以及對應設計特征,以及最終需要在界面中展示的形色字構質,一個完整過程!

比如國際化,同樣通過前面思路,我們需要去思考國際化如何在設計中體現,需要我們能去提煉出代表國際化的象征物,如地標,國旗,郵戳,貨幣等等,包括如何在界面中融于國際化元素,以及人物和節日場景


最后

希望大家可以通過我這期的分享,能夠詳細理解到如何從公司戰略層,提取到核心一級關鍵詞,到二級關鍵詞,以及對應的設計手法,對應到形色字構質!

See you next month !

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。