設計新人如何開始一份設計規范

當你建立設計系統的時候,你需要把它當做一個產品來設計,你在設計的是一個可以幫助團隊高效協作與持續產出的設計工具。


最近總有一些剛入行的新人問我一些關于建立個人設計系統的問題,我總結了一下大致有以下幾種類型的提問:


“我應該從哪里開始?”

“我現在沒有任何的資源積累怎么辦?”

“我加入的是一個創業公司,或者目前的設計團隊很小,沒有其他設計師和前端開發幫助我來建立”


作為一個曾經在小團隊的設計師來說,我在這里想分享一些我關于如何建立設計系統的經驗。


建立一個細節詳細、保持迭代的設計系統壓力是非常大的,特別是你處于一個相對缺乏資源的小團隊中,但是另一方面,在這樣的環境中,你可以快速地做出決定,不用花費大量的時間與其他人協調。


當你建立設計系統的時候,你需要把它當做一個產品來設計,你在設計的是一個可以幫助團隊高效協作與持續產出的設計工具。接下來是建立設計系統的步驟:


1、完全理解你的產品,列出所有的組件


完全理解你所要設計的產品是第一步,然后回顧你產品中的每一個部分,把所有重要的組件列在一張表上,按一定的用途給他們分類。比如樣式部分一定有顏色、字體等,構件部分則會包含按鈕、卡片、表格等等。

在這個部分,會有一些細節會產生糾結,比如,相同尺寸的按鈕在不同的頁面會有不同的顏色,那么到底要確定多少規范色?在這個部分時,可以先不考慮,暫時先放一邊,要做的是總結與分類。


2、在Sketch中建立組件庫


Sketch僅僅是舉個例子,你們也可以用ps、ai等,重要的是建立一個單獨的頁面來列出所有的組件。


在建立這個頁面時可以從最基礎最重要的一些部分做起,比如字體、顏色。建立一張色卡,確定主色和輔色。然后是色彩的陰影規范,常用的一些陰影樣式。

在建立字體列表的時候,列出字體樣式與用例,比如一級標題、二級標題、標簽、卡片標題、正文、按鈕等。

在這兩個的基礎上,便可以開始建立一些更為復雜的元素。


如果你用的是sketch的話,通常用“symbols”來繪制,這樣子在將來可以經常復用。其次一些通用的命名規則也有助于你快速找到他們。(這個在每個公司有自己的命名規則,如果沒有的話自己可以建立一套通用的命名規范)。

另外需要關注每一個控件的不同狀態,比如按鈕控件,會有up、over、down、disable的狀態。


3、將設計原則以文檔形式確定

當你建立了所有的元素以后,就要開始著手寫文檔的部分了:設立原則、使用方法、信息架構。你需要總結一些通用的規則方法,這樣對與后來的迭代或者其他使用者來說十分明確。


這里有兩個比較好的設計規范:macOS Human Interface Guidelines、Material design guidelines  蘋果的設計規范包括了四種不同的平臺:手機電腦、手表、電視,每個部分都有相當多的用例和規范。谷歌的MD則是包括了動效、樣式、圖層、控件、模式,還有許多例子。

為了保證你的文檔明確易讀,最好使用一些圖片、動效的例子甚至demo來解釋。文檔才是整個設計規范最花費時間的部分。

來源:UI中國-Dux_

上一篇: 說說UI設計的工作流程都有哪些?

下一篇: 入門必讀!UI設計的整個工作流程是怎樣的?

分享到: 更多
易游eu8com网页登录下载 快三我一直想回血怎么办 晴天棋牌 不倒翁投注法的效果 时时彩前二组选稳赚 mg游戏 快乐十分任二稳赚技巧 快三全能必中计划软件怎么注册 重庆时时开彩结果官网 全能计划 江西时时骗局 必中计划软件幸运飞 彩票走势图 大赢家 手机app制作软件 最牛稳赚5码计划群 幸运飞艇定位胆怎么玩