編輯導(dǎo)語：利用設(shè)計系統(tǒng)，設(shè)計師可以更高效率地達成目標，結(jié)合設(shè)計系統(tǒng)進行設(shè)計，產(chǎn)品也可以給用戶帶來更好的使用體驗。那么設(shè)計系統(tǒng)包括哪些內(nèi)容？在做設(shè)計系統(tǒng)時，又容易出現(xiàn)哪些常見誤區(qū)？本文作者就此進行了總結(jié)，一起來看一下。

一、 設(shè)計師眼中的設(shè)計系統(tǒng)都有哪些

為了給用戶帶來良好的用戶體驗，設(shè)計系統(tǒng)是其中的一個重要環(huán)節(jié)，一組基本設(shè)計體系大致包括風格、內(nèi)容、基礎(chǔ)、組件、模式5大部分，其中的基礎(chǔ)與組件又是我們身為設(shè)計師接觸最頻繁的兩個部分。win10激活密鑰

1. 風格

談到風格，相信大家都不會陌生，像設(shè)計語言一樣，設(shè)計原理講的都是風格問題。許多設(shè)計系統(tǒng)網(wǎng)站上，都可以看到企業(yè)對設(shè)計系統(tǒng)風格的標注說明。

風格應(yīng)用在創(chuàng)建界面或其他設(shè)計交付物階段時候，對視覺參考和設(shè)計原則的品牌風格的指導(dǎo)。風格部分主要承擔著兩個主要的任務(wù)：

1. 對內(nèi)部：對設(shè)計師來說需要自己梳理產(chǎn)品應(yīng)該具有什么樣的風格個性，產(chǎn)品外觀為什么要設(shè)計成這種風格（風格）。

2. 對外部：對于外部用戶來說，如何將企業(yè)品牌形象有效地傳遞給用戶是風格的使命。

總之，好的品牌風格能夠?qū)?nèi)輻射產(chǎn)品定位，對外輻射企業(yè)的宣傳推廣。很多設(shè)計系統(tǒng)中都會有對風格的定義，像國外的蘋果設(shè)計系統(tǒng)的風格語言定義為“完整，一致，簡約”，國內(nèi)的貝殼設(shè)計系統(tǒng)風格語言定義為“生長、觸摸、關(guān)聯(lián)”。win10企業(yè)版激活

一些企業(yè)在產(chǎn)品手冊中會強調(diào)“一致性”的設(shè)計原則，比如美團外賣這款產(chǎn)品，不管是線下的物料宣傳還是線上產(chǎn)品，都大量采用了“黃色”這個顏色，為團隊設(shè)計提供清晰的設(shè)計指導(dǎo)，讓用戶的感官標準一致，感受到“一致性”的設(shè)計理念。

2. 內(nèi)容

內(nèi)容指的是我們在產(chǎn)品界面中使用的文案，也就是人們常說的“微文本”，一些影音產(chǎn)品還會注重其文案的語氣、語調(diào)，并根據(jù)用戶的屬性為設(shè)計成員編寫詞匯用法表，避免設(shè)計文案時給用戶帶來的焦慮情緒。

許多產(chǎn)品在內(nèi)容設(shè)計上都花了不少心思，比如即刻APP的彈窗設(shè)計，新版本的彈窗則用更有趣、更易懂的文案“保存并繼續(xù)”來取代枯燥乏味“一下步”的文案，并且跟隨一小段“請根據(jù)提示引導(dǎo)完成后續(xù)操作”的提示，清楚地引導(dǎo)用戶進行操作。

再比如嗶哩嗶哩這款產(chǎn)品，在輸入密碼的場景中，根據(jù)用戶輸入密碼的場景選擇了合適的表達方式，當用戶輸入登陸密碼時，產(chǎn)品的吉祥物就會將眼睛捂住。這樣的設(shè)計不僅能很好地表達產(chǎn)品的個性，也能傳達產(chǎn)品的溫度。

假如你認為內(nèi)容的改版僅僅是提升體驗，那么你就錯了，有這樣一個典型的案例會給企業(yè)帶來巨大的收益。

比如在 Google酒店搜索中，一開始用“Book a room（預(yù)定房間）”這個詞來吸引用戶點擊，隨后的改版中將“Book a room（預(yù)定房間）”修改為“Check Availability（查看可用房間）”后，成功地將這一功能的交互點擊率提升17%。所以說內(nèi)容（微文案）改版不僅僅提升用戶的體驗，還可以給產(chǎn)品帶來數(shù)據(jù)的提升，從而帶動企業(yè)收益的增長。win10激活

3. 基礎(chǔ)

基礎(chǔ)可以理解為是設(shè)計表現(xiàn)層當中最小顆粒度的合集，簡單地理解就是將一頁中的元素不斷地拆解，拆解到無法拆解的狀態(tài)之后，剩下的元素就是“基礎(chǔ)”，比如字體、顏色、圖標、布局（間距）、聲音、動效等等。

“基礎(chǔ)”的搭建馬虎不得，因為他是最小的構(gòu)件，應(yīng)該用最科學的方法來設(shè)計。例如在搭配顏色這個元素時，我們可以采用拓展公式計算方法、手工疊加、公式計算、色彩曲線工具等方法來設(shè)定精確的色值。

4. 組件

組件也稱之為組件庫，組件庫是身為設(shè)計師接觸最多的事物了，也是設(shè)計系統(tǒng)的靈魂所在了，主要可以分為設(shè)計組件庫和代碼組件庫兩這兩個大部分。

設(shè)計組件庫相信大家都不會陌生，這里我推薦兩個工具網(wǎng)站semantic-ui.和tetrisly，尤其是tetrisly它包含sketch與figma的組件使用很方便。

https://semantic-ui.com/

https://tetrisly.com/figma/

代碼組件庫主要是前端開發(fā)人員使用，會有一些代碼規(guī)范的說明。這里我推薦QMUI工具和Bit.dev兩款工具。win11激活密鑰

重點推薦Bit.dev，這是一種由第三方組件構(gòu)建的平臺，它有一個叫做組件共享的功能，即當鼠標懸停在一個組件上時，會產(chǎn)生高亮狀態(tài)，以提示該組件的名稱、版本和父區(qū)域。

假設(shè)鼠標點擊按鈕此組件時，還將跳轉(zhuǎn)到相關(guān)聯(lián)頁中顯示這些按鈕組件的范圍，有興趣的同學可以體驗一下。

一套完整的設(shè)計組件庫一般是由公共組件和業(yè)務(wù)組件構(gòu)成的，它和設(shè)計系統(tǒng)一樣，只是作為參考的規(guī)范使用，組件庫也是要根據(jù)業(yè)務(wù)進行微調(diào)整，需要不斷進行優(yōu)化的，所以并不是一塵不變的。

隨著業(yè)務(wù)和產(chǎn)品的數(shù)量增多，公共組件庫的數(shù)量也一定會增加，因此搭建組件庫時候有兩個問題特別值得注意：

1. 注意點一：在組件庫搭建時候尤其要注意公共組件庫的使用效率問題，如果使用率較低的組件總是出現(xiàn)，那么公共組件庫就會很臃腫，所以要及時去除不通用的組件保留常用組件。

2. 注意點二：公共和業(yè)務(wù)組件并不是越多越好，盲目地追求“大而全”一定是不可取的，要時刻提醒自己“合適的組件庫要比全面的組件庫更為重要”。