產(chǎn)品經(jīng)理如何搭建B端設(shè)計規(guī)范

1、編輯導(dǎo)語：在 B 端產(chǎn)品設(shè)計中，有效的設(shè)計規(guī)范有利于降低團隊溝通成本，提高開發(fā)效率，并在一定程度上保證產(chǎn)品應(yīng)用的一致性，最終推動產(chǎn)品設(shè)計的優(yōu)化。本篇文章里，作者總結(jié)了從0 開始搭建 B 端設(shè)計規(guī)范的注意事項與策略方法，一起來看一下。、戶 、.前言哈哈哈哈，最近事情太多了，已經(jīng)快三個月沒更新了，現(xiàn)在也忙的差不多了，咱們更新繼續(xù)今天給大家分享的是關(guān)于如何從零開始搭建 B 端設(shè)計規(guī)范。時間轉(zhuǎn)眼即逝，掐指一算，我接觸B 端已有 4 年之久了，當(dāng)年剛接觸的時候， B 端的從業(yè)人員比例還是很少的。近兩年B 端越來越火熱，無論從設(shè)計風(fēng)格還是產(chǎn)品數(shù)量上，都有了很大的提升。隨著 B 端的產(chǎn)品越來越完善，要求設(shè)計

2、師的專業(yè)性也要越來越強。設(shè)計規(guī)范作為基礎(chǔ)中的基礎(chǔ)，是大家都要熟練掌握的技能，我們不僅要會運用各種規(guī)范，還要會撰寫適合產(chǎn)品的規(guī)范。分享開始，敲黑板在搭建設(shè)計系統(tǒng)之前，我們要想清楚設(shè)計規(guī)范的目標(biāo)是什么？使用者是誰？設(shè)計規(guī)范要符合基本的設(shè)計原則，否則你的規(guī)范會雜亂無章。這里我總結(jié)了 6條原則供大家參考。這里一般采用柵格布局。說到柵格，有好多小伙伴又要再回顧一下知識點了。我今天再把柵格知識幫大家復(fù)習(xí)一遍，如果之前不是很了解柵格的，拿個小本本記下來，要考柵格布局能夠適應(yīng)各種屏幕尺寸及分辨率，確保整體布局的一致性。柵格建議使用 1、 2、 3、 4、 6 切分布局，可以進行多種布局組合，并在整個設(shè)計中保持

3、布局的結(jié)構(gòu)的一致性。頁面中一般采用 24 列自適應(yīng)網(wǎng)格，你可以使用它為各種屏幕尺寸創(chuàng)建靈活的布局。邊距Margins、歹!J Columns、間隔Gutters分別是什么？邊距Margins：邊距是內(nèi)容與左右邊緣之間的空間?？刂婆_內(nèi)容區(qū)的邊距選用 8 的倍數(shù)為設(shè)定值，一般采用 16/24px 的居多。需要注意的是：列Columns：在電腦端列的數(shù)量是個常量（24列），每一列寬度的尺寸隨 屏幕大小進行自適應(yīng)調(diào)整。間隔Gutters：間隔是列與列之間的空隙，控制臺產(chǎn)品gutter使用固定值也要是 8 的倍數(shù)，一般采用16/24px。需要注意的是：邊距Padding: padding指一個元素的內(nèi)容

4、和其邊界之間的空間，padding最小值是4px,然后其余均為8Px的倍數(shù)，建議值為8/16/24px。內(nèi)容區(qū)定寬：此場景常用于用戶歡迎頁、結(jié)果頁等需要將內(nèi)容區(qū)寬度設(shè)置為固定值的頁面。此時column和gutter保持不變，根據(jù)頁面寬度改變margin的值。色彩內(nèi)容主要包含基礎(chǔ)色（如品牌色、黑色、白色）和功能色（如鏈接色、提醒色等）。圖表配色為單獨的配色體系。在前期制定顏色規(guī)范的時候，精益求精的設(shè)定顏色，切忌顏色過多。顏色的狀態(tài)色盡量用原色進行轉(zhuǎn)換，設(shè)置一個合理的變色公式，讓所有顏色的狀態(tài)色都根據(jù)這個公式進行轉(zhuǎn)換。例：在設(shè)計規(guī)范中，盡量把顏色的色值和 rgba值都寫出來（這里是強迫癥患者 要標(biāo)

5、的，因為有時候色值完全一樣，但 rgba數(shù)值略有不同，雖然效果一樣，但 是對于強迫癥的你來說，舒服嗎）。狀態(tài)色有 4 狀態(tài)色：Normal、 Hover、 Click 、 Disable。在設(shè)定圖表顏色的時候，要考慮不同的使用樣式（柱狀圖、環(huán)形圖、餅圖等），同時也要考慮它的延展性，比如你設(shè)定12個chart色值，在使用的時候按著順序來使用，當(dāng)超過12 個后可以為同一個顏色。設(shè)定統(tǒng)一的字體規(guī)范，使用非襯線字體在各個操作系統(tǒng)下都有最佳展示效果。首先，要設(shè)置一個字體家族，保證產(chǎn)品界面的最優(yōu)展示。例如（僅作為展示，不是建議）： font-family ： “Chinese Quote， ” -appl

6、e- system， BlinkMacSystemFont ， “ Segoe U，I ” “ PingFang SC， ” “ Hiragino Sans GB” ， “ Microsoft YaHei ， “” Helvetica Neue， H” elvetica， Arial ， sans-serif，“Apple Color Emoji, “Segoe UI Emoji, ”“Segoe UI Symbol ”1）字號現(xiàn)在主流的產(chǎn)品中，主體字為 12px / 14px 的居多，可根據(jù)自身的產(chǎn)品定位以及用戶的習(xí)慣進行設(shè)定。字號不要出現(xiàn)奇數(shù)，否則在一些顯示器上會有對不齊像素的狀況發(fā)生。2

7、）行高行高常規(guī)的有兩種規(guī)范：我喜歡用第一種，就是字號大小 + 8px 作為行高的規(guī)范。行高是不可被忽略的重要細(xì)節(jié)之一，因為在算間距的時候，行高是要被算進去的。3）字重字重有很多，但是在真正的產(chǎn)品使用中，字重盡量不要太多種， 23 種即 可。4）字體顏色字體顏色數(shù)量建議在 34 個，不宜過多，但是每個層級之間區(qū)分要大一 些。文本應(yīng)該保持至少4.5： 1 （基于亮度值計算）的對比度以保持文本清晰；最佳對比度為7： 1。WCAG 2.0 中將顏色對比等級分為 3 種， A 級、 AA 級、 AAA 級，等級越 高意味著顏色的對比度越高，呈現(xiàn)出來的視覺壓力越大。設(shè)定統(tǒng)一的圖標(biāo)使用規(guī)范，讓視覺效果更和諧

8、。icon 大小icon 的常用尺寸有很多，需要注意的是icon 的大小中，相鄰的兩個尺寸至少相差4px,否則你會在后期用的時候會有選擇困難癥。同時功能 icon 盡量貼邊或盡量貼邊繪制，保證展現(xiàn)的視覺統(tǒng)一性（操作icon 除外）。單獨icon使用的時候，盡量不要太小，最小值建議為12px。icon 熱區(qū)icon 的熱區(qū)經(jīng)常被設(shè)計師和開發(fā)所忽略，本身 icon 的尺寸一般就很小，再加上如果沒有設(shè)置熱區(qū)的話，操作體驗極差。所以一定一定要設(shè)置icon 的熱區(qū)，設(shè)置的值我建議為 icon 大小的 2倍。例： icon 大小為 14 * 14px ，則熱區(qū)大小為 28 * 28px 。頁面內(nèi)布局間、模

9、塊間、模塊內(nèi)的各部件距離。尺寸大部分規(guī)范中都用的是8 的倍數(shù)，不用糾結(jié)，直接用就行。我這里有個公式：Sn=8px * n, n為正整數(shù)。特殊：最小支持 4px。交互我分為兩個方面：交互方式和交互狀態(tài)。交互方式指的是對某一個操作所進行的具體行為，比如刷新方式有下拉、上滑、按壓點擊等方式，這就是所謂的交互方式。交互方式有很多種，沒有最優(yōu)，只有最適合。交互方式要保持產(chǎn)品的統(tǒng)一性，同類別的交互不可有不同的操作感受。同時交互方式要符合大眾的認(rèn)知習(xí)慣，可創(chuàng)新但不可違背潛意識。隨著時代的發(fā)展，交互方式也在不斷的更新。比如最開始的手機是按鍵式的，隨著大眾對屏幕大小的需求不斷提升，到了現(xiàn)在的全面屏手機，如果這個

10、時候你再去做當(dāng)年火爆的按鍵手機，那你就只能跟市場說拜拜。總結(jié)交互方式的幾個關(guān)鍵點：創(chuàng)新、統(tǒng)一、緊跟趨勢。一個完整的產(chǎn)品生態(tài)是不會遺漏每一個交互狀態(tài)的。同樣是做售票的軟件，為什么高鐵管家就比 12306做的好呢？是因為高鐵管家把很多交互狀態(tài)友好地做了展現(xiàn)反饋，而不是冰冷的數(shù)據(jù)吞吐。同類產(chǎn)品中，每個都有自己獨特的交互狀態(tài)，可能你一直用某個軟件的原因只是有個功能的交互狀態(tài)打動了你，從此你就深深愛上了它?，F(xiàn)在工作中，我們都在講人效，拼命地去更新迭代，去研發(fā)新功能，開拓新產(chǎn)品，往往會忽略交互狀態(tài)這個點，因為很多時候付出收獲比是很低的，但是真正好的產(chǎn)品，這部分是不可或缺的。交互真的太大了，單獨寫一篇文章都

11、寫不完，這篇我只能拋磚引玉，勾起你的思維，如果有任何要探討的，歡迎來叨擾。引導(dǎo)分為5種：Newbie guide （新手引導(dǎo)）、Steps guide （步驟引導(dǎo)）、 Help/ Operation guide （幫助/操作引導(dǎo)）、New function guide （新功能引導(dǎo)）、 Blank guide （空白頁引導(dǎo)）。新手引導(dǎo)是針對新用戶的，首次進入產(chǎn)品的時候，我們要著重地把自己產(chǎn)品的亮點以及操作快速的介紹給新用戶，讓他用最短的時候上手我們的產(chǎn)品。新手引導(dǎo)要言簡意賅，并且如果非必要的話，盡量給用戶一個可以直接關(guān)閉的按鈕，讓用戶有選擇權(quán)。我就非常討厭有一些產(chǎn)品的新手引導(dǎo)，必須走完全部流程

12、后才能關(guān)閉，惡心得不行。步驟引導(dǎo)一般用在有固定操作步驟的場景下，指引用戶一步一步地完成想要的結(jié)果。常規(guī)的步驟引導(dǎo)建議在35 步之間為合理。幫助/操作引導(dǎo)的展現(xiàn)方式是比較豐富多彩的，可以是提示語、輔助性文本、 tooltips 等等，它的作用就是輔助用戶去了解并且知道如何操作這個功能。這個也是在產(chǎn)品中使用頻率最高的，運用好它，可以讓你的產(chǎn)品事半功倍。它就是常用在新功能上線后，用戶第一次登陸相關(guān)頁面后做的一些引導(dǎo)，目的是為了告訴用戶我們做了新東西，你快來試試吧?？瞻醉撘龑?dǎo)一般用在在缺省頁，對用戶進行一些操作指引，讓無信息的頁面變得更有價值。比如百度在一些缺省頁上就放了一些關(guān)于失蹤兒童的信息，就因為做了這個引導(dǎo)，幫助了千萬個家庭找到了失散的孩子。組件是設(shè)計系統(tǒng)里面最為龐大的東西。組件可以分為了 5 類：基本上這幾類已經(jīng)覆蓋了多數(shù)的組件，下面我把我自己整理的