一 設(shè)計(jì)規(guī)范的目標(biāo)
在搭建設(shè)計(jì)系統(tǒng)之前，我們要想清楚設(shè)計(jì)規(guī)范的目標(biāo)是什么？使用者是誰(shuí)？
· 目標(biāo)：保持產(chǎn)品風(fēng)格統(tǒng)一性、提高設(shè)計(jì)輸出效率、減少無(wú)效溝通。
· 使用人群：UI、交互、前端、測(cè)試。
二 設(shè)計(jì)原則
設(shè)計(jì)規(guī)范要符合基本的設(shè)計(jì)原則，否則你的規(guī)范會(huì)雜亂無(wú)章。這里我總結(jié)了 6 條原則供大家參考。
· Unity（統(tǒng)一性）：頁(yè)面風(fēng)格、色彩、布局等要保持全局統(tǒng)一，不可為了某一功能的美觀(guān)而去破壞整體性。
· Accessibility（易用性）：易用是首要考慮的因素，能一步解決的事情絕不兩步。
· Proximity（親密性）：如果信息的關(guān)聯(lián)性強(qiáng)，則他們的距離就要相應(yīng)的縮短，讓他們看起來(lái)是一個(gè)視覺(jué)單元；反之，則距離要加大。要讓用戶(hù)對(duì)信息的區(qū)域劃分一目了然。
· Alignment（對(duì)齊原則）：在界面中，將元素進(jìn)行對(duì)齊，即符合用戶(hù)的認(rèn)知，也可以引導(dǎo)視覺(jué)流向，讓用戶(hù)更加流暢的閱讀信息。
· Contrast（對(duì)比原則）：對(duì)比是增加視覺(jué)效果最有效方法之一，同時(shí)也能在不同元素之間建立一種有組織的層次結(jié)構(gòu)，讓用戶(hù)快速識(shí)別關(guān)鍵信息。
· Repetition（重復(fù)原則）：相同的元素在整個(gè)界面中不斷重復(fù)，不僅可以有效降低用戶(hù)的學(xué)習(xí)成本，也可以幫助用戶(hù)識(shí)別出這些元素之間的關(guān)聯(lián)性。
三 框架布局
這里一般采用柵格布局。說(shuō)到柵格，有好多小伙伴又要再回顧一下知識(shí)點(diǎn)了。我今天再把柵格知識(shí)幫大家復(fù)習(xí)一遍，如果之前不是很了解柵格的，拿個(gè)小本本記下來(lái)，要考~~
柵格布局能夠適應(yīng)各種屏幕尺寸及分辨率，確保整體布局的一致性。
柵格建議使用 1、2、3、4、6 切分布局，可以進(jìn)行多種布局組合，并在整個(gè)設(shè)計(jì)中保持布局的結(jié)構(gòu)的一致性。
頁(yè)面中一般采用 24 列自適應(yīng)網(wǎng)格，你可以使用它為各種屏幕尺寸創(chuàng)建靈活的布局。
邊距 Margins、列 Columns、間隔 Gutters 分別是什么？
· 邊距 Margins：邊距是內(nèi)容與左右邊緣之間的空間。控制臺(tái)內(nèi)容區(qū)的邊距選用 8 的倍數(shù)為設(shè)定值，一般采用 16/24px 的居多。
需要注意的是：
·· 減去 margin 后，列在頁(yè)面區(qū)域均分，保證每列的寬度是一致的；
·· 在區(qū)域有 margin 的情況下，劃分列的區(qū)域不能包含 margin。
· 列 Columns：在電腦端列的數(shù)量是個(gè)常量（24列），每一列寬度的尺寸隨屏幕大小進(jìn)行自適應(yīng)調(diào)整。
· 間隔 Gutters：間隔是列與列之間的空隙，控制臺(tái)產(chǎn)品 gutter 使用固定值也要是 8 的倍數(shù)，一般采用 16/24px。
需要注意的是：
·· 布局的左右兩邊的分界線(xiàn) gutter 可以為 0；
·· 必須保證 column 的寬度是一致的。
· 邊距 Padding：padding 指一個(gè)元素的內(nèi)容和其邊界之間的空間，padding 最小值是 4px，然后其余均為 8px 的倍數(shù)，建議值為 8/16/24px。
· 內(nèi)容區(qū)定寬：此場(chǎng)景常用于用戶(hù)歡迎頁(yè)、結(jié)果頁(yè)等需要將內(nèi)容區(qū)寬度設(shè)置為固定值的頁(yè)面。此時(shí) column 和 gutter 保持不變，根據(jù)頁(yè)面寬度改變 margin 的值。
四 設(shè)計(jì)風(fēng)格
4.1 Color（顏色）
色彩內(nèi)容主要包含基礎(chǔ)色（如品牌色、黑色、白色）和功能色（如鏈接色、提醒色等）。圖表配色為單獨(dú)的配色體系。
在前期制定顏色規(guī)范的時(shí)候，精益求精的設(shè)定顏色，切忌顏色過(guò)多。
顏色的狀態(tài)色盡量用原色進(jìn)行轉(zhuǎn)換，設(shè)置一個(gè)合理的變色公式，讓所有顏色的狀態(tài)色都根據(jù)這個(gè)公式進(jìn)行轉(zhuǎn)換。例：
· Hover：H不變 S加10 B減5；
· Click：H不變 S加20 B減10；
· Disable：HSB均不變，不透明度 30%。
在設(shè)計(jì)規(guī)范中，盡量把顏色的色值和 rgba 值都寫(xiě)出來(lái)（這里是強(qiáng)迫癥患者要標(biāo)的，因?yàn)橛袝r(shí)候色值完全一樣，但 rgba 數(shù)值略有不同，雖然效果一樣，但是對(duì)于強(qiáng)迫癥的你來(lái)說(shuō)，舒服嗎？）
狀態(tài)色有 4 狀態(tài)色：Normal、Hover、Click、Disable。
在設(shè)定圖表顏色的時(shí)候，要考慮不同的使用樣式（柱狀圖、環(huán)形圖、餅圖等...），同時(shí)也要考慮他的延展性，比如你設(shè)定 12 個(gè) chart 色值，在使用的時(shí)候按著順序來(lái)使用，當(dāng)超過(guò) 12 個(gè)后可以為同一個(gè)顏色。
4.2 Font（文字）
設(shè)定統(tǒng)一的字體規(guī)范，使用非襯線(xiàn)字體在各個(gè)操作系統(tǒng)下都有最佳展示效果。
首先，要設(shè)置一個(gè)字體家族，保證產(chǎn)品界面的最優(yōu)展示。
例如（僅作為展示，不是建議）：font-family: "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
4.2.1 字號(hào)
現(xiàn)在主流的產(chǎn)品中，主體字為 12px / 14px 的居多，可根據(jù)自身的產(chǎn)品定位以及用戶(hù)的習(xí)慣進(jìn)行設(shè)定。字號(hào)不要出現(xiàn)奇數(shù)，否則在一些顯示器上會(huì)有對(duì)不齊像素的狀況發(fā)生。
4.2.2 行高
行高常規(guī)的有兩種規(guī)范：
· 字號(hào)+8px；
· 1.5倍 / 2倍 * 字號(hào)。
我喜歡用第一種，就是字號(hào)大小 + 8px 作為行高的規(guī)范。行高是不可被忽略的重要細(xì)節(jié)之一，因?yàn)樵谒汩g距的時(shí)候，行高是要被算進(jìn)去的。
4.2.3 字重
字重有很多，但是在真正的產(chǎn)品使用中，字重盡量不要太多種，2~3 種即可。
4.2.4 字體顏色
字體顏色數(shù)量建議在 3~4 個(gè)，不宜過(guò)多，但是每個(gè)層級(jí)之間區(qū)分要大一些。
文本應(yīng)該保持至少 4.5:1 （基于亮度值計(jì)算）的對(duì)比度以保持文本清晰；最佳對(duì)比度為 7:1。測(cè)試對(duì)比度的網(wǎng)站：https://contrast-ratio.com
WCAG 2.0 中將顏色對(duì)比等級(jí)分為 3 種，A級(jí)，AA級(jí)，AAA級(jí)，等級(jí)越高意味著顏色的對(duì)比度越高，呈現(xiàn)出來(lái)的視覺(jué)壓力越大。
· A級(jí)：對(duì)比度 3:1，是普通觀(guān)察者可接受的最低對(duì)比；
· AA級(jí)：對(duì)比度 4.5:1，是普通視力損失的人可接受的最低對(duì)比度；
· AAA級(jí)：對(duì)比度 7:1，是嚴(yán)重視力損失的人可接受的最低對(duì)比度。
4.3 icon（圖標(biāo)）
設(shè)定統(tǒng)一的圖標(biāo)使用規(guī)范，讓視覺(jué)效果更和諧。
4.3.1 Icon 大小
icon 的常用尺寸有很多，需要注意的是 icon 的大小中，相鄰的兩個(gè)尺寸至少相差 4px，否則你會(huì)在后期用的時(shí)候會(huì)有選擇困難癥。同時(shí)功能 icon 盡量貼邊或盡量貼邊繪制，保證展現(xiàn)的視覺(jué)統(tǒng)一性（操作 icon 除外）。
單獨(dú) icon 使用的時(shí)候，盡量不要太小，最小值建議為 12px。
4.3.2 Icon 熱區(qū)
icon 的熱區(qū)經(jīng)常被設(shè)計(jì)師和開(kāi)發(fā)所忽略，本身 icon 的尺寸一般就很小，再加上如果沒(méi)有設(shè)置熱區(qū)的話(huà)，操作體驗(yàn)極差。所以一定一定要設(shè)置 icon 的熱區(qū)，設(shè)置的值我建議為 icon 大小的 2倍。例：icon 大小為 14 * 14px，則熱區(qū)大小為 28 * 28px。
4.4 size（尺寸）
頁(yè)面內(nèi)布局間、模塊間、模塊內(nèi)的各部件距離。
尺寸大部分規(guī)范中都用的是 8 的倍數(shù)，不用糾結(jié)，直接用就行。我這里有個(gè)公式：Sn = 8px * n，n為正整數(shù)。特殊：最小支持4px。
五 交互
交互我分為兩個(gè)方面：交互方式和交互狀態(tài)。
5.1 交互方式
交互方式指的是對(duì)某一個(gè)操作所進(jìn)行的具體行為，比如刷新方式有下拉、上滑、按壓點(diǎn)擊等方式，這就是所謂的交互方式。交互方式有很多種，沒(méi)有最優(yōu)，只有最適合。
交互方式要保持產(chǎn)品的統(tǒng)一性，同類(lèi)別的交互不可有不同的操作感受。同時(shí)交互方式要符合大眾的認(rèn)知習(xí)慣，可創(chuàng)新但不可違背潛意識(shí)。
隨著時(shí)代的發(fā)展，交互方式也在不斷的更新。比如最開(kāi)始的手機(jī)是按鍵式的，隨著大眾對(duì)屏幕大小的需求不斷提升，到了現(xiàn)在的全面屏手機(jī)，如果這個(gè)時(shí)候你再去做當(dāng)年火爆的按鍵手機(jī)，那你就只能跟市場(chǎng)說(shuō)拜拜。
總結(jié)交互方式的幾個(gè)關(guān)鍵點(diǎn)：創(chuàng)新、統(tǒng)一、緊跟趨勢(shì)。
5.2 交互狀態(tài)
一個(gè)完整的產(chǎn)品生態(tài)是不會(huì)遺漏每一個(gè)交互狀態(tài)的。
同樣是做售票的軟件，為什么高鐵管家就比 12306 做的好呢？是因?yàn)楦哞F管家把很多交互狀態(tài)友好的做了展現(xiàn)反饋，而不是冰冷的數(shù)據(jù)吞吐。
同類(lèi)產(chǎn)品中，每個(gè)都有自己獨(dú)特的交互狀態(tài)，可能你一直用某個(gè)軟件的原因只是有個(gè)功能的交互狀態(tài)打動(dòng)了你，從此你就深深?lèi)?ài)上了它。
現(xiàn)在工作中，我們都在講人效，拼命的去更新迭代，去研發(fā)新功能，開(kāi)拓新產(chǎn)品，往往會(huì)忽略交互狀態(tài)這個(gè)點(diǎn)，因?yàn)楹芏鄷r(shí)候付出收獲比是很低的，但是真正好的產(chǎn)品，這部分是不可或缺的。
交互真的太大了，單獨(dú)寫(xiě)一篇文章都寫(xiě)不完，這篇我只能拋磚引玉，勾起你的思維，如果有任何要探討的，歡迎來(lái)叨擾。
六 引導(dǎo)
引導(dǎo)分為 5 種：Newbie guide（新手引導(dǎo)）、Steps guide（步驟引導(dǎo)）、Help / Operation guide（幫助/操作引導(dǎo)）、New function guide（新功能引導(dǎo)）、Blank guide（空白頁(yè)引導(dǎo)）。
6.1 Newbie guide（新手引導(dǎo)）
新手引導(dǎo)是針對(duì)新用戶(hù)的，首次進(jìn)入產(chǎn)品的時(shí)候，我們要著重的把自己產(chǎn)品的亮點(diǎn)以及操作快速的介紹給新用戶(hù)，讓他用最短的時(shí)候上手我們的產(chǎn)品。
新手引導(dǎo)要言簡(jiǎn)意賅，并且如果非必要的話(huà)，盡量給用戶(hù)一個(gè)可以直接關(guān)閉的按鈕，讓用戶(hù)有選擇權(quán)。我就非常討厭有一些產(chǎn)品的新手引導(dǎo)，必須走完全部流程后才能關(guān)閉，惡心的不行。
6.2 Steps guide（步驟引導(dǎo)）
步驟引導(dǎo)一般用在有固定操作步驟的場(chǎng)景下，指引用戶(hù)一步一步的完成想要的結(jié)果。常規(guī)的步驟引導(dǎo)建議在 3~5 步之間為合理。
6.3 Help/Operation guide（幫助/操作引導(dǎo)）
幫助/操作引導(dǎo)的展現(xiàn)方式是比較豐富多彩的，可以是提示語(yǔ)、輔助性文本、tooltips 等等，他的作用就是輔助用戶(hù)去了解并且知道如何操作這個(gè)功能。
這個(gè)也是在產(chǎn)品中使用頻率最高的，運(yùn)用好他，可以讓你的產(chǎn)品事半功倍。
6.4 New function guide（新功能引導(dǎo)）
他就是常用在新功能上線(xiàn)后，用戶(hù)第一次登陸相關(guān)頁(yè)面后做的一些引導(dǎo)，目的是為了告訴用戶(hù)我們做了新東西，你快來(lái)試試吧。
6.5 Blank guide（空白頁(yè)引導(dǎo)）
空白頁(yè)引導(dǎo)一般用在在缺省頁(yè)，對(duì)用戶(hù)進(jìn)行一些操作指引，讓無(wú)信息的頁(yè)面變得更有價(jià)值。比如百度在一些缺省頁(yè)上就放了一些關(guān)于失蹤兒童的信息，就因?yàn)樽隽诉@個(gè)引導(dǎo)，幫助了千萬(wàn)個(gè)家庭找到了失散的孩子。
七 組件
組件是設(shè)計(jì)系統(tǒng)里面最為龐大的東西。組件可以分為了 5 類(lèi)：
· Navigation（導(dǎo)航）
· Data Entry（數(shù)據(jù)錄入）
· Data Display（數(shù)據(jù)顯示）
· Feedback（反饋）
· Other（其它）
基本上這幾類(lèi)已經(jīng)覆蓋了多數(shù)的組件，下面我把我自己整理的這幾類(lèi)分別都包含哪些組件，以及組件的簡(jiǎn)單介紹給列出來(lái)，快來(lái)保存吧。
7.1 Navigation（導(dǎo)航）
· Affix（固釘）：將頁(yè)面元素釘在可視范圍。
· Breadcrumb（面包屑）：顯示當(dāng)前頁(yè)面在系統(tǒng)層級(jí)結(jié)構(gòu)中的位置，并能向上返回。
· Menu（導(dǎo)航菜單）：為頁(yè)面和功能提供導(dǎo)航的菜單列表。
· Pagination（分頁(yè)）：采用分頁(yè)的形式分隔長(zhǎng)列表，每次只加載一個(gè)頁(yè)面。
· Steps（步驟條）：引導(dǎo)用戶(hù)按照流程完成任務(wù)的導(dǎo)航條。
7.2 Data Entry（數(shù)據(jù)錄入）
· Checkbox（多選框）：可選擇多個(gè)。
· Radio（單選框）：只可選擇一個(gè)。
· Switch（開(kāi)關(guān)）：開(kāi)關(guān)選擇器。
· Form（表單）：具有數(shù)據(jù)收集、校驗(yàn)和提交功能的表單，包含復(fù)選框、單選框、輸入框、下拉選擇框等元素。
· Input（輸入框）：通過(guò)鼠標(biāo)或鍵盤(pán)輸入內(nèi)容，是最基礎(chǔ)的表單域的包裝。
· Select（選擇器）：下拉選擇器。
· Skeleton（加載占位圖）：在需要等待加載內(nèi)容的位置提供一個(gè)占位圖。
· Time selectors and sliders（日期時(shí)間選擇過(guò)濾器）：當(dāng)用戶(hù)需要輸入一個(gè)時(shí)間或日期，可以點(diǎn)擊標(biāo)準(zhǔn)輸入框，彈出時(shí)間面板進(jìn)行選擇。
· Transfer（穿梭框）：雙欄穿梭選擇框。
· Upload（上傳）：文件選擇上傳和拖拽上傳控件。
7.3 Data Display（數(shù)據(jù)顯示）
· Badge（微標(biāo)）：圖標(biāo)右上角的圓形徽標(biāo)數(shù)字。
· Card（卡片）：通用卡片容器。
· Collapse（折疊面板）：可以折疊/展開(kāi)的內(nèi)容區(qū)域。
· Popover（氣泡卡片）：點(diǎn)擊/鼠標(biāo)移入元素，彈出氣泡式的卡片浮層（可操作）。
· Tabs（標(biāo)簽頁(yè)）：選項(xiàng)卡切換組件。
· Table（表格）：展示行列數(shù)據(jù)。
· Tag（標(biāo)簽）：進(jìn)行標(biāo)記和分類(lèi)的小標(biāo)簽。
· Timeline（時(shí)間軸）：垂直展示的時(shí)間流信息。
· Tooltip（文字提示）：簡(jiǎn)單的文字提示氣泡框。
· Tree（樹(shù)形控件）：文件夾、組織架構(gòu)、生物分類(lèi)、國(guó)家地區(qū)等等，世間萬(wàn)物的大多數(shù)結(jié)構(gòu)都是樹(shù)形結(jié)構(gòu)。使用樹(shù)控件可以完整展現(xiàn)其中的層級(jí)關(guān)系，并具有展開(kāi)收起選擇等交互功能。
7.4 Feedback（反饋）
· Alert（警告提示）：警告提示，展現(xiàn)需要關(guān)注的信息。
· Notification（通知提示框）：全局展示通知提醒信息。
· Drawer（抽屜）：抽屜從父窗體邊緣滑入，覆蓋住部分父窗體內(nèi)容。用戶(hù)在抽屜內(nèi)操作時(shí)不必離開(kāi)當(dāng)前任務(wù)，操作完成后，可以平滑地回到到原任務(wù)。
· Modal（對(duì)話(huà)框）：模態(tài)對(duì)話(huà)框和非模態(tài)對(duì)話(huà)框。
· Progress（進(jìn)度）：展示操作的當(dāng)前進(jìn)度。
· Spin（加載）：用于頁(yè)面和區(qū)塊的加載中狀態(tài)。
7.5 Other（其它）
· Button（按鈕）：按鈕用于開(kāi)始一個(gè)即時(shí)操作。
· chart（圖表）：圖標(biāo)數(shù)據(jù)顯示。
· Copyright（版權(quán)）：版權(quán)信息。
· Divider（分割線(xiàn)）：區(qū)隔內(nèi)容的分割線(xiàn)。
· logo（標(biāo)志）：logo 的使用。
· LocaleProvider（國(guó)際化）：為組件內(nèi)建文案提供統(tǒng)一的國(guó)際化支持。
· Text link（文字鏈）：點(diǎn)擊有鏈接跳轉(zhuǎn)的文字。
· Scrollbar（滾動(dòng)條）：在特定界面區(qū)域內(nèi)進(jìn)行內(nèi)容的更多展示。
以上組件可根據(jù)自己的產(chǎn)品進(jìn)行增刪，把組件規(guī)范設(shè)計(jì)完成后，整個(gè)設(shè)計(jì)規(guī)范就完成了 90% 以上，可以算一個(gè)比較完整的設(shè)計(jì)規(guī)范了。
總結(jié)
每一個(gè)設(shè)計(jì)規(guī)范都是有靈魂的，規(guī)范是為了更好的做設(shè)計(jì)，而不是限制設(shè)計(jì)師雙手的枷鎖。
設(shè)計(jì)規(guī)范也不是一成不變的，他在落地使用的時(shí)候多少都會(huì)有問(wèn)題，需要慢慢的去反復(fù)檢驗(yàn)規(guī)范的合理性，發(fā)現(xiàn)不合理的及時(shí)更正。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話(huà)，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼ben_lanlan，報(bào)下信息，會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢(xún)、商務(wù)合作，也請(qǐng)與我們聯(lián)系。
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)