騰訊設計師是這麼理解和運用的設計規範的

2021-10-13 13:19:37 字數 3603 閱讀 1845

設計規範是乙個老生常談的話題了,網上相關的文章也非常多,但我相信有很多設計師對設計規範的理解還是比較模糊,認為設計規範指的就是字型,顏色,控制項規範那些,這種理解其實是比較狹隘的。

於我而言,設計規範用一句話總結就是:設計規範是針對特定產品所制定出來的一整套產品標準,包括流程標準,技術標準,設計規則等等。通過這套標準,能減少錯誤發生率並提高設計質量和輸出穩定性。

舉個例子,我在做qq的3d厘公尺秀專案的時候,一開始合作方提交的設計資源正確率很低,風格也各不相同。然後為了解決這個問題,我在專案中定義了流程標準,資源標準,cp合作標準等等。通過這些規範讓多個不同設計團隊能合作到一起,提公升了整體協作的效率和質量,這些標準就成了設計規範的一部分。

可以說,每個專案因合作方式,人員習慣,落地形式的不同,所形成的規範是有區別的。所以,設計規範更應該是針對專案來說的,除非是問你android或ios這種已經廣泛適用的平台級規範。不然是很難有標準答案的,回答更應該是一種思路的描述,比如你會如何定義一套規範、解決了哪些問題以及如何驗證這套規範真的助力了產品的體驗提公升。

1. 遵守使用者習慣,減少認知成本

don』t make me think。大家都知道,好用得產品都是盡可能的減少使用者思考,不斷去貼近使用者的使用習慣。比如在ios系統裡想返回上乙個頁面時,你會熟悉的去左上角找返回操作,但如果把返回操作放在右上角就會很不習慣;再比如對國內使用者來說,他們習慣正確按鈕用綠色,錯誤按鈕用紅色,如果你非要反過來製造所謂的差異化,使用者就會感到困惑,誤操作的概率也可能會大量增加。

2. 統一品牌性格

品牌性格不論是大到公司層面,還是小到具體某乙個產品,都需要有一套品牌識別體系來約束,只有統一得視覺印象才能更好的讓使用者記住。那這些品牌識別體系其實也是設計規範的一部分,在具體執行中,可以根據一些品牌核心概念規範快速做一些風格決策。

3. 降低新人學習成本

這裡所說的新人不單純指剛入職場的設計新人,也包括剛參與到乙個新專案的設計老手,設計規範是能夠以最低的溝通成本實現快速上手。有成熟的控制項資源和標桿的設計參考,就算是之前完全沒做過的設計師也能搭建出乙個還不錯的頁面。

4. 提高開發效率

有了好的設計規範,開發就能把一些常用的樣式進行封裝,在需要復用的場景中直接呼叫。這樣做,一方面可以通過呼叫的方式減少樣式**的複製使用,提公升效率的同時降低軟體包體積,另一方面也可以減少不必要的工作量,方便後期維護。

5. 保證設計的一致性

有設計規範的約束,能讓團隊在乙個既定的框架內做設計,統一大家的輸出質量,從而保證設計的一致性。

設計規範的學習肯定不是靠死記硬背,而是要講究方法,從我自身的經驗來說,我覺得大致可以有以下2個步驟:

在新手期,多去看一些大廠的設計規範,先建立認知,不要求全部記住。把這些規範當成字典,先大致了解一遍,等真正做的時候拿不準再去查閱就好了。這裡推薦幾個必看的大廠設計規範官網,建議收藏。

谷歌material design設計官網:

微軟fluent design system設計官網:

ibm設計官網:

facebook設計官網:

螞蟻金服設計官網:

這也就是我為什麼不寫具體規範數值的原因,因為網上的資料實在是太多太詳細了,寫一些重複的知識實在是沒多少價值。學知識的路上一定不要什麼都等別人餵給自己,需要更多的主動性,這樣才能提公升自己的學習能力和解決問題的能力。

針對自己要做的模組,有針對性的找市面上大廠的應用作為參考,直接截圖示注,自己總結規律印象會更加深刻。

我開始做ui的時候就這樣學習的,不知道字型該用多大,間距用多大,顏色怎麼用,就直接去找相類似的介面截圖參考,量它們的尺寸,吸它們的顏色,然後就這樣一步步的把規範經驗積累起來了。

比如從qq的動態tab頁面中,我們可以借鑑到很多資訊,比如列表的高度,列表左側的圖示尺寸和圓角,間隔線高度和配色,右側的箭頭大小和配色,列表文字的字型大小和配色,使用者頭像大小和結合的樣式,圖示與文字的間距等等。這些借鑑並非是抄襲,要你做的跟這個介面一模一樣,只是參考這裡面的某幾個屬性然後結合自己的產品綜合運用,減少出錯。

發現了嗎?乙個優秀的介面設計,上面的任何資訊其實都可以拿來參考,就看你會不會用了。

需要強調的是,這些參考來的標準,並非是標準答案,還是要根據自己的實際專案需要做調整,只是至少知道乙個範圍,在這個範圍內不大會犯錯。

這就像剛開始做設計時一樣,去參考這些規範相當於做臨摹的練習,這種臨摹是需要的,臨摹的過程中不斷加入自己的思考,然後通過總結,變成自己的知識體系。

隨著對設計規範理解的加深,自身設計能力的不斷提高,就要開始從設計規範的使用者轉變為規範的制定者了。如何制定針對專案的設計規範呢?我的經驗是在專案過程中把做的好的和踩坑後的正確解法進行總結,並形成文字,積累多了就形成了規範。要把每一次遇到的問題都當成是一次改進流程和規範的機會。

我自己是有隨時記錄的習慣,專案中一旦發現問題就會趕緊把它記錄下來。有時候甚至還蠻期待出現問題的,因為出了問題才能找到優化的機會,自己也能從中找到解決問題的成就感。

曾經在qq的3d厘公尺秀專案中遇到過非常多的坑,然後從填坑的過程中慢慢總結出各種設計規範,去幫助專案減少錯誤率,提公升設計質量。從最終的產出和結果來看,自身的進步是可觀的,對產品的幫助也比較大,所以很值得去做。

剛掌握設計規範的時候,幹活是特別舒服的一件事,因為做需求可以很快,好像拼拼元件就能完成。但稍微做久一點時間,又會覺得好像沒啥進步,天天拼元件,擔心影響設計的創意性,真是挺矛盾的。

其實,規範也是要在遵守和引領使用者習慣中不斷迭代的。既要保持大的設計規範框架不變化,又要在設計的過程中給使用者製造驚喜。比如,整個ui的配色和字型需要保持統一,但在一些圖形,動效上可以做出亮點,讓使用者在整個使用體驗中既是沉浸的又能有些小驚喜。規範的打破與重建一定是需要乙個動態平衡的過程。

設計規範絕對不需要死記硬背,而是要充分理解並靈活使用,才能發揮它的價值。隨著ui行業的不斷成熟,設計工具的簡單化,各種元件化資源和思維越來越普及,可以預見的是未來一般的ui介面會高度元件化,設計師單純在介面上花費的時間可能會越來越少。

這從行業的發展來說,減少了很多體力勞動,讓設計和開發有更多的時間去打磨產品細節,肯定是好事。但對設計師自身來說,省下了以前那種常規設計需求的時間後還能做些什麼,設計師的價值又在哪?值得每個設計師去思考。

什麼是UX設計師,UX設計師面試的6個技巧

面試是乙個過程,可以幫助招聘人員找到合適的人,可以以理想的方式滿足他們的要求。它包括一系列問題和答案,以使對方了解他 她的技能,興趣和態度。有多種方法可以在面試中表現出色,下面列出了一些可以幫助您下次面試的有用提示。什麼是ux設計師,ux設計師面試的6個技巧 1.做好準備 在面試之前,您要做的第一件...

設計師社群 你和設計大咖一起溝通的平台 集設

集設網 ijishe.com 社群聚集了大量某一領域的優秀設計師持續分享的原創作品,設計欣賞,文章經驗教程等等,涵蓋的設計領域非常全面。為設計師而生的設計交流平台 專注創意設計分享與設計技術交流,全力構建更全面的交流分享互動平台,共同尋找設計的靈魂之美,讓你的作品更有價值讓設計更有意義。包容性 社群...

哪些響應式布局框架是設計師使用的?

目前流動網路領域發展越來越快,為了在移動裝置上有良好的閱讀體驗,很多 都開始使用響應性布局設計 responsive web design 但是製作乙個響應性布局的 是一件非常費時的事情,所以很多設計選擇了使用響應性布局框架 responsive frameworks 今天達人收集很多流行的響應性布...