路野TK

隨著互聯網的發展,各互聯網公司的產品也變得越來越成熟,58本地版也在不斷的更新迭代。58本地版的業務線越來越多,也做的越來越深入,在這個時間段,我們迫切需要一份設計規范來幫助我們對產品提效。這個項目從去年開始,我們通過與各位同事不斷溝通迭代,于今年搭建了一份58本地版APP的設計規范。借著這個時間,希望與大家一起探討下如何搭建一份高質量的設計規范。

 

?01.我們為什么要建立設計規范

· 各業務線獨立

各業務線因屬性不同,且由不同的設計師來分別負責,各業務線之間頁面存在風格差異較大的問題。

?

不同的業務線

 

· 組件化思維不強

在項目中,會出現大量重復的組件,但因業務線相對獨立,設計師在設計過程中不能互通有無,會出現不同樣式的同一功能組件。

?

不同的底部bar

 

· 無歷史文件管理

產品在不斷的迭代過程中,產生了大量的冗余文件。當我們設計一個新需求時,往往會發現某個組件有多個版本,不知道哪個才是最新版本。設計師設計出一個優秀的新組件時,也沒有辦法推廣到平臺。

版本更迭

 

· 開發效率低

開發工程師團隊因沒有規范指導,缺少一些組件庫,導致多個組件樣式單獨開發,造成了大量的重復開發。且當我們想要改動某個組件時,同功能的組件無法統一更改。

版本更迭

?

· 協作效率低

設計師與設計師之間,開發工程師與開發工程師之間,設計師與開發工程師之間,因缺少設計規范,缺少組件庫,溝通效率很低,走查成本卻很高。

低效協作

 

這些問題在業務前期可能影響并不大,但對于一個不斷發展的產品來說卻很嚴重。產品體量會越變越大,涉及到的頁面也會越來越多,“千里之堤,毀于蟻穴”,不加以解決將會累積成越來越大的問題。因此我們需要一份規范幫我們厘清現有產品,找到產品的DNA,讓產品能夠更清晰有序的持續進化。

 

02.設計規范的前期準備

· 確認當前適合建立設計規范

設計規范是產品發展到一定階段的產物。比較簡單的產品結構暫不需要它,因為作用不大;體量太大的產品因頁面復雜又比較難以執行。而設計規范的建立需要大量的人力物力,所以需要大家一起來確認現階段是不是適合搭建設計規范。

會議溝通

 

· 設計規范的收集整理

在規范搭建前期,我們需要去收集一些現有優秀產品的設計規范,了解一份優秀的設計規范包含哪些內容。其次,我們也需要進行思考什么樣的規范更適合自己的團隊使用,怎樣使得規范更加易用。

優秀應用設計規范收集

 

· 對現產品進行分析

總結各頁面共有的元素并加以整理,明確現有產品的設計風格,找出更具基礎性的元素來制定設計規范。并且這些元素能夠構成產品約80%的基礎場景,確保產品基礎體驗的統一。

現產品分析

?

03.開始搭建設計規范?

· 確認產品設計風格

首先我們要確認產品的設計風格,找出它獨有的特點。設計風格往往體現在比如icon的風格,文字排版的風格,設計組件的風格等。

首頁icon風格

 

· 梳理規范內容,進行整理分類

我們需要對形成設計基礎體驗的元素進行整理分類,將他們一一列出。一般情況下,這些元素能夠覆蓋產品80%的基礎場景。

規范分類

 

· 制定設計規范模板

制定規范的規范:規范也是一個小型產品,想要一份清晰易讀的規范,我們要對規范本身進行規范。比如我們需要有規范的封面與名稱,規范的使用情況說明等。

規范封面及說明頁

 

規范的排版樣式:我們對規范的排版樣式也需要進行規范。標題的樣式,內容的樣式,說明的樣式等。比如為了方便大家理解制定規范的思路,我在很多頁面左側展示設計視覺樣式,右側展示布局與標注來提升它的易讀性,無論是設計還是開發都能夠很好的理解規范的組成。

規范排版

 

· 細化規范場景

在實際使用過程中,許多基礎組件會產生很多的延伸擴展,在這里我們也建議將這些擴展逐步更新到規范中去。當別的業務也需要這樣的樣式時,可以很方便地理解布局并拖拽使用。

頂部欄狀態細化

 

04.推進設計規范落地

· 設計規范組件化

設計源文件的組件化:設計規范要方便設計師使用,需要將源文件整理為組件,在大家需要使用的時候復用即可。在這里我們推薦大家使用一些好用的第三方工具,我們選擇使用了藍湖設計規范云,整個app的設計規范幾乎全部分類上傳。設計師可以拖拽使用,也可以共同維護,可隨時對規范文件進行更新。

設計源文件組件

?

開發組件庫的建立:搭建完成設計規范后,我們找到開發工程師團隊,與他們進行合作。這樣避免了開發工程師團隊的重復開發,提升了設計師的走查效率,也提升了項目的可維護性。比如我們剛剛完成的字體組件的開發,解決了字體間距的控制問題,后期經過驗證后將會進行全面推廣。

開發組件庫

 

· 制定規范的上傳、更新、使用、審核規范

設計規范是一個團隊的共識,所以后續需要我們大家一起來維護它。我們將會兩周進行一次規范溝通會,收集大家對規范的意見和建議,加強大家的共識。規范同產品一樣,也是需要不斷進化來適應時代的發展,為了確保規范的可控性和可持續性,我們后續將會推出規范的上傳、更新、使用、審核規范。

共同維護??

 

05.設計規范可能出現的弊端

設計規范對于團隊的好處上文已經講得很詳細,這里就不再贅述。除此之外對個人來說,通過整理搭建設計規范,也能夠鍛煉分類整理,總結歸納以及推動項目落地的項目管理能力。但是設計規范也可能會出現以下弊端:

· 過于嚴格,寬容度不夠

規范的作用是輔助產品,不是主導產品,我們需要給創新留出空間,好的創新也會反過來推動規范更新,不要讓規范成為創新的枷鎖。

· 落地難,執行難

設計規范搭建出來后,只有使用它才能體現它的價值。設計規范需要多人參與使用,還需要開發團隊進行配合開發組件,因此在推進的過程中也會面臨許多障礙。

· 更新迭代難

一定要建立定期回收建議并迭代規范的制度,規范需要不斷迭代進化,如果規范不能更新,在后期就會成為阻礙產品發展的絆腳石。

?

綜上所述,希望大家都能夠根據自己團隊的情況,搭建出一份高質量的設計規范。發揮設計規范的優勢,解決設計規范的弊端,讓我們的產品變得更好。

 

原文地址:58UXD?(公眾號)

作者:?環鐵藝術家

 

轉載請注明:學UI網 » 設計沉思錄丨如何搭建一份高質量的設計規范

登錄收藏
 
你可能喜歡的:
從「物種起源」到「設計進化論」- 阿里云設計語言哲思從「物種起源」到「設計進化論」- 阿里云設計語言哲思
中臺系統基礎知識- 文字規范系統中臺系統基礎知識- 文字規范系統
組合組件的交互規范整理方法組合組件的交互規范整理方法
今天,我對標簽的理解,透了!今天,我對標簽的理解,透了!
既然已經有了iOS、Android規范了,為什么我們還是要整理規范既然已經有了iOS、Android規范了,為什么我們還是要整理規范
組件化思維的設計流程組件化思維的設計流程
iOS13 的設計趨勢及思考分享iOS13 的設計趨勢及思考分享
聽說你們設計稿里的控件總是亂糟糟的?聽說你們設計稿里的控件總是亂糟糟的?
以Ant Design為例來說說B端設計的基本套路以Ant Design為例來說說B端設計的基本套路
產品中出現這3大問題,說明你的引導沒有做好?產品中出現這3大問題,說明你的引導沒有做好?
?
类似钱咖的高额赚钱 下载江西麻将 捉鸡麻将技巧 股票指数代表 e球彩坑死人 河南22选5.239期开奖 实况足球2010德甲补丁 风彩喜乐彩 体育彩票36选7 跌停洗盘后暴涨的股 网上赚钱项目