close

關注功夫體驗設計與十萬讀者見證成長的力量

這是功夫體驗設計公眾號第238期分享

作者| 劉濤

經常有同學問我如何定義設計規範,網上很多文章看完後還是雲裡霧裡的,不知道如何下手做,即使看懂了一些,但真正當自己做的時候,就不知道怎麼開始。

今天我們主要來說說定義設計規範的基本思路流程,以及如何從原有產品中全局梳理出組件,重新進行優化定義。

01

設計規範的意義

大家知道,現在幾乎很多大企業都有自己的設計系統,目的是減少重複性工作,達到全平台體驗一致的效果。
設計規範具有明確的指導意義,幫助設計師、開發、產品等人員能夠更好的快速搭建設計原型,或者開發提效,最終起到降本增效的作用。
LineDesign System
對於企業而言,設計規範能夠對外形成一致的品牌調性。
從宏觀上來說增強企業對外的品牌感知,我們可以從蘋果硬件產品、官網、線下門店、手機軟件就能看出設計品牌語言一致的重要性,能夠讓用戶記住你,增強品牌傳播口碑率。
對設計師來說,掌握設計規範定義是我們的核心底層能力,現在幾乎任何產品都需要做設計標準定義,比如智能電視,手機端,智能手錶端,車機端等等。如果你不會,那麼你的競爭力自然會減少許多。

02

如何定義一個產品設計規範

設計規範的定義方法很多,不同的視角切入也會有不同的流程,今天我們分享主要以通用類型的思路,大家看完後這套底層的方法掌握,可以遷移到其他產品設計規範定義中。

這裡我選擇基於現有產品來展開講解說明。
第一步:全局梳理產品原有的組件,要有多細呢?
比如圖標、色彩、字體層級、按鈕、卡片比例、列表類型、網格、圓角、空狀態的樣式等等,這些所有的都要窮舉出來,把它們分類好,方便後面進行規則重新梳理。

NOKIA的設計規範

第二步:當你梳理完後,這一步需要從原則層面定義,因為設計原則能夠指導你接下來的一些工作,比如網格定義,圖標尺寸大小定義等。這一步很容易被大家忽略掉,最好加上去,儘量避免後續再補充。

蘋果設計原則

第三步:這裡就開始基於你定義出來的規則進行重新整理,比如圖標大小不統一,這時候你是不是需要重新定義大小,比如定義三個尺寸或者4個,只要滿足業務需求即可。

再來說個例子,比如列表,定義方法一樣的,把單行列表,雙行列表,三行列表,各種分類整理,規則統一,比如行高都是基於8dp的倍數。

AppleList
如上圖,蘋果列表,大家可以從圖中看出,都是單行列表,左側是小圖標,右側是大圖標,但是我們可以看看,在圖標區域他們大小都是統一的,這個就是高明之處。
蘋果圖標規範一致性統一
那麼其他組件的思路也是同樣的道理,一個個去推導定義出來,當然了,不能一股腦子直接定義,還需要一邊嘗試一邊定義。
第四步:梳理空狀態場景規則,比如加載不出來,無網絡等等,這種屬於全場景都會有,你需要規定統一的風格樣式,包括在頁面中的布局位置,也可以做成設計模式。

比如上圖,這些POPUP的場景圖形,同樣也是需要定義其位置和風格樣式,這些都是在規則裡面統一定義。

第五步:全局所有的組件,需要考慮命名規則。比如常用簡單命名方式,Btn_Ghost_Normal,這裡需要注意Btn是Buttons的縮寫,命名時候儘量可以使用縮寫單詞,其他組件也是同樣的思路。

幽靈按鈕和填充按鈕

當然命名方式很多種,可以根據自己業務和公司團隊協作方式來定。

第六步:到這一步基本上前面的定義完整了,這裡可以整理成UIKT和library輸出給團隊使用。

奧迪UIKT

03

設計規範優化和發展

設計規範並不是一層不變的,而是需要不斷使用,發現問題,然後優化調整到最好的狀態。

任何好的設計規範都是在不斷使用中,不斷滿足產品不同功能不同場景的使用需求。當然規範的發展壯大,並不是定義規則人的事情,需要整個團隊在使用過程中,發現問題後,即時提出來,交給規範小組去優化。

沒有什麼完美的規範,任何規範都很難去覆蓋到全場景,這就需要設計師個性化定製不同場景規則。


推薦閱讀

>>點擊圖片,閱讀往日推送>>

30歲之前學到哪些能力,可以讓你的專業飛速成長
2022歐洲設計大獎出爐,快來看看創意設計哪家強!
記得關注公眾號@功夫體驗設計
與十萬讀者見證成長的力量,功夫不負有心人
👇👇👇

記得關注我的另外一個公眾號
一個普通人的逆襲之路
👇👇👇

arrow
arrow
    全站熱搜
    創作者介紹
    創作者 鑽石舞台 的頭像
    鑽石舞台

    鑽石舞台

    鑽石舞台 發表在 痞客邦 留言(0) 人氣()