中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導語：設(shè)計師往往不止參與產(chǎn)品設(shè)計步驟，其工作也需要與其他部門組織協(xié)同。那么，B端設(shè)計師又該如何制定出一份合適的設(shè)計規(guī)范并使其落地？本篇文章里，作者就結(jié)合他的設(shè)計經(jīng)驗為我們詳細介紹了B端設(shè)計規(guī)范落地的關(guān)鍵要點，讓我們一起來看一下吧。

在B端設(shè)計中，設(shè)計規(guī)范怎么建立才能落實下去之前一直困擾著包括我在內(nèi)的廣大設(shè)計師老鐵們。

設(shè)計師期望參與產(chǎn)品的每一個角色（產(chǎn)品、設(shè)計、前端開發(fā)、測試）都能遵循設(shè)計規(guī)范，結(jié)合設(shè)計規(guī)范內(nèi)的內(nèi)容，保證前端開發(fā)頁面的還原度。因此從目標來說，其實設(shè)計師小伙伴與研發(fā)小伙伴的目標是一致的，但是實現(xiàn)起來其實并沒有想象中的簡單。

在業(yè)務(wù)初始階段對業(yè)務(wù)不熟悉、就盲目著手建立規(guī)范其實并不是一個明智的選擇。很多B端的萌新小朋友會在業(yè)務(wù)尚未明確情況下就從第一個版本就開始制定設(shè)計規(guī)范，這會蘊含巨大的風險，也不易推動落地。

在初期有限的研發(fā)資源里只有了解了業(yè)務(wù)的實際場景，針對場景進行深度思考與分析，與規(guī)范涉及人員進行深度溝通統(tǒng)籌各方面資源，才能最后形成一套可以落地執(zhí)行滿足設(shè)計標準和業(yè)務(wù)需求的設(shè)計規(guī)范。

一、B端設(shè)計為什么要制定設(shè)計規(guī)范？

1. 對產(chǎn)品來說

搭建原型可直接調(diào)用組件庫，能搭建出高保真的原型。與設(shè)計師溝通更加順暢，小的修改可以直接和開發(fā)溝通，不需要通過設(shè)計師出圖，極大加快了前期的節(jié)奏。

2. 對設(shè)計師來說

當同一個項目由多個設(shè)計師共同協(xié)作時，由于設(shè)計理解不一致等各種原因都會出現(xiàn)設(shè)計控件使用混亂等問題。此時，為了保證設(shè)計各方面統(tǒng)一性，需要一份設(shè)計規(guī)范做引導。

3. 對開發(fā)來說

按照設(shè)計規(guī)范建立好公共組件庫，開發(fā)效率有了明顯的提升?？蓮陀玫臇|西確定下來后不會頻繁改動，設(shè)計走查的問題也會逐漸減少。

4. 對測試來說

模凌兩可的交互可以有地方看交互樣式了，不需要再詢問設(shè)計師。有更多時間專注于測試功能上的問題了。

二、什么階段適合建立設(shè)計規(guī)范？

過往，設(shè)計師一般默認在啟動一個項目的初始階段進行設(shè)計規(guī)范的制作，具體時間點跟著版本節(jié)奏走。

在1.0版本之前就著手規(guī)范的制作，其實這是很欠缺考慮的做法，其中蘊含著極多風險因素在里面。此處分享個人工作中兩個比較建議的規(guī)范建立時間點供大家參考。

1. 業(yè)務(wù)處于探索期

在初始版本開發(fā)并未制定相應(yīng)的業(yè)務(wù)組件。規(guī)范主要涉及到色彩、字體、間距、布局、柵格等通用設(shè)計原則以及常用業(yè)務(wù)組件的定制。

此階段搭建的規(guī)范具備高效性以及靈活性的特點。由于尚未搭建特殊的業(yè)務(wù)組件（當領(lǐng)導想要突然調(diào)轉(zhuǎn)方向也不會很慌，改動較小就可以完成整體的規(guī)范轉(zhuǎn)向），此時搭建規(guī)范組件庫需要考慮到預(yù)留后續(xù)更改的空間。

• 優(yōu)點：靈活，滿足業(yè)務(wù)隨時更換的需求；
• 缺點：體量小，僅能支持初步業(yè)務(wù)場景。

2. 業(yè)務(wù)處于成長期

當業(yè)務(wù)已經(jīng)迭代幾個版本后，整個團隊對業(yè)務(wù)的理解都不可同日而語，產(chǎn)品也到了較為穩(wěn)定的版本。

此時若提出搭建組件庫，可以結(jié)合業(yè)務(wù)設(shè)計出符業(yè)務(wù)場景的樣式。每個符合當前業(yè)務(wù)的組件邏輯和樣式都不是初始階段憑空想象出來的，當產(chǎn)品有一定的發(fā)展、有足夠的業(yè)務(wù)邏輯、積累足夠的業(yè)務(wù)場景，才能設(shè)計出有著自身業(yè)務(wù)的完善組件庫。

• 優(yōu)點：可以依據(jù)反饋沉淀組件庫，發(fā)展到一定階段整體變數(shù)不會太大；
• 缺點：0-1階段需要設(shè)計師對整體業(yè)務(wù)設(shè)計有比較足的把控力。

我們公司在2020年初開啟的項目，目前已經(jīng)過了探索階段處于向成長階段過度，當時正值疫情高發(fā)，整個項目都由我個人負責。

現(xiàn)階段整個公司在今年第四季度把系統(tǒng)性的產(chǎn)品和服務(wù)競爭優(yōu)勢提上了日程，畢竟沒有設(shè)計規(guī)范、對整個業(yè)務(wù)底層設(shè)計架構(gòu)進行指引，是很難做好產(chǎn)品差異化和規(guī)范化的。也是趁此機會，設(shè)計可以針對性對現(xiàn)有的業(yè)務(wù)組件庫以及規(guī)范進行一次全面的復盤，迭代出一個新的版本，在團隊內(nèi)推動落地以便更好適應(yīng)產(chǎn)品的發(fā)展。

三、推動規(guī)范需要像需求一樣去迭代

1. 做好產(chǎn)品定位

在B端的項目評審時，設(shè)計師就需要做好B端的用戶畫像，弄明白產(chǎn)品的目標用戶以及使用用戶的區(qū)別，他們通常并非同一類人。

除了目標用戶的差異外，不同用戶的使用場景也是不一樣的。只有弄清楚了各個角色的關(guān)系以及功能設(shè)計的邏輯、具體用戶年齡、解決什么問題，才可以產(chǎn)出符合用戶需求的設(shè)計。

2. 整理規(guī)范的內(nèi)容和分類

在制定規(guī)范前，需要明確產(chǎn)品中主要有哪幾種分類，將最基礎(chǔ)的分類定義好方便后續(xù)針對分類內(nèi)容進行整理。B端產(chǎn)品與C端產(chǎn)品既有共同性、也有很大的差異化，可以借鑒但是切忌生搬硬套C端的設(shè)計規(guī)范。

3. 排優(yōu)先級嵌入版本迭代內(nèi)

一套完整的規(guī)范蘊含內(nèi)容是非常豐富的，將程序小哥的頭發(fā)全部薅完也難以在一個版本迭代里面改完的。

因此我們需要將自己作為設(shè)計規(guī)范這個項目的產(chǎn)品經(jīng)理，針對現(xiàn)有的需求進行拆分，并排出優(yōu)先級、分版本迭代進產(chǎn)品里面。我們可以依據(jù)從大到小的原則進行優(yōu)先級排序。對產(chǎn)品設(shè)計風格影響大的先排，影響小的后排。

那么針對我們業(yè)務(wù)優(yōu)先級排序是：設(shè)計準則＞框架布局＞組件＞控件＞場景。

當然設(shè)計規(guī)范的制定不單單局限于設(shè)計團隊內(nèi)部，在嵌入版本里面時可與產(chǎn)品和開發(fā)多溝通，以便達到更好的落地效果。

上面的場景是否很熟悉，開發(fā)小哥每天都得忙很多的事情，如果不用線上文檔進行同步的話，他們可能轉(zhuǎn)頭就會忘記哦。

四、B端的設(shè)計規(guī)范需要整理哪些東西？

1. 頁面布局

1）統(tǒng)一設(shè)計尺寸

據(jù)統(tǒng)計，目前 PC 端用戶屏幕分辨率占比排名前三的是 1920*1080、1366*768、1440*900。

以 1440 來設(shè)計的話是一個比較合適的尺寸，向上適配或者向下適配誤差會比較小。

2）頁面框架

主流頁面框架主要分為左右欄布局和上下欄布局。

• 左右布局：頂部菜單欄、左側(cè)菜單欄為固定結(jié)構(gòu)，右側(cè)主體內(nèi)容根據(jù)分辨率進行動態(tài)縮放。
• 上下布局：頂部菜單欄為固定結(jié)構(gòu)，主體內(nèi)容進行動態(tài)縮放，需定義兩邊空白區(qū)域?qū)挾取?/li>

3）柵格布局

柵格系統(tǒng)的使用是為了解決自適應(yīng)和響應(yīng)式問題，從而更好地進行產(chǎn)品設(shè)計和產(chǎn)品開發(fā)。

響應(yīng)式柵格常采用12和24列柵格系統(tǒng)實現(xiàn)，以滿足 2、3、4、5、6 分比布局等多種情況。固定寬度 Column，將間隔 Gutter 進行動態(tài)縮放。

• 網(wǎng)格（Grid）
• 柵格總寬度（Container）
• 列和槽（Column&Gutter）
• 邊距（Margin）
• 區(qū)塊（Col-n）

我們的產(chǎn)品是在1440px的框架下進行設(shè)計的，采用左右布局的形式，將左側(cè)菜單欄（100px）以及間距（24px）減去以后，就是自適應(yīng)的內(nèi)容區(qū)域（1292px）。

2. 顏色/字體

1）顏色

主色的選擇，需要依據(jù)使用人群、目標用戶、使用場景、產(chǎn)品屬性等因素綜合進行考慮。

在顏色使用上B端與C端的目的并不相同。C端顏色使用更大膽自由一些，以抓人眼球為主；而B端端使用則是以輔助產(chǎn)品功能為主，需要遵循對比原則，提升產(chǎn)品易讀性。

小例子：以我們產(chǎn)品舉例，在定義主色之前，我向產(chǎn)品要來了關(guān)于用戶人群的調(diào)研報告以輔助我去推測目標人群以及使用場景，并通過相關(guān)平臺（七麥網(wǎng)、艾瑞網(wǎng)）去找到競品的行業(yè)報告。這些資料不僅可以幫你定義產(chǎn)品使用的顏色，還可以輔助你進行風格的定義，將這些報告放入評審的會議里面可以極大增強設(shè)計說服力和專業(yè)性。

通過鯨準與艾瑞網(wǎng)等數(shù)據(jù)相關(guān)網(wǎng)站可以輕松獲取行業(yè)內(nèi)的一些基本數(shù)據(jù)，這些數(shù)據(jù)足以讓我們進行用戶畫像的初步建立了。

在規(guī)范好顏色以后，需要與前端進行同步，將顏色賦予單獨的編號，方便雙方就顏色上達成統(tǒng)一。如下圖所示，一個編號對應(yīng)一個RGB色值。

2）字體

B端頁面可讀性很大程度是由排版所決定端，而在排版中文字更是重點中的重點。

① 字體選擇

在參考相關(guān)線上的成熟產(chǎn)品后，發(fā)現(xiàn)字體的渲染是一個很復雜的過程，首先我們需要知道在Web世界中存在著五大字體家族，江湖人稱font-family：serif、sans-serif、monospace、cursive和fantasy。

font-family規(guī)定元素的字體系列，可以把多個字體名稱作為一個“回退”系統(tǒng)來保存。如果瀏覽器不支持第一個字體，則會嘗試下一個。

在實際使用場景中，用戶的電腦一般是PC和Mac。但是這兩個平臺的屏幕材質(zhì)、渲染方式都不一樣，所以使用的默認字體也是不一樣的。PC默認使用微軟雅黑，而Mac默認使用蘋方。

當我們打開一個網(wǎng)站，瀏覽器會讀取font-family中的字體名稱，并去檢索用戶電腦系統(tǒng)中的字體，如果有的話就顯示，沒有的話檢索下一個。

② 字號與字重

字號的選擇有多種方式進行參考，比如等差遞增和等比遞增的方式。我們自身在字體選擇上選擇由4為基數(shù)進行等差遞增方式，在定義字號大小時默認采用偶數(shù)。

字重的功能是為了在文本種突出重點強調(diào)內(nèi)容，在文本中常采用3種規(guī)格的自重（regular，Medium，Smlbold）。設(shè)定標題一律采用Medium，正文一律采用Regular，強調(diào)內(nèi)容采用顏色區(qū)分大于字重去區(qū)分。

在使用字體時，我們需要判斷其與背景色的對比度是否符合WCAG2.0的最低標準，即3:1。此處我們可以在創(chuàng)建文字樣式時將標準標注進去，當我們使用文字樣式的時候就可以隨時提醒我們不要濫用。

3. 分隔與間距

在日常工作中，會常常出現(xiàn)多個小伙伴協(xié)同工作時采用的間距不一致的情況。雖然之前有進行口頭上的統(tǒng)一（采用8px為基數(shù)）進行設(shè)計，但是還是會出現(xiàn)同一情況間距不一致的問題。

在參照現(xiàn)有的成熟系統(tǒng)以后，依據(jù)親密性原則與格式塔原理整理出符合現(xiàn)有業(yè)務(wù)的間距規(guī)范。

我會將間距分為豎向間距與橫向間距。為了方便管理與溝通我會將他們進行尺寸上的區(qū)分（XS、S、M、L、XL）。

• 豎向間距：常用于模塊與模塊之間，一般采用24px，32px，48px。
• 橫向間距：日常設(shè)計中使用頻率最高的間距，一般出現(xiàn)在組件與組件之間。

4. 圖標規(guī)范

B端設(shè)計和C端設(shè)計里的圖標無論是從功能、應(yīng)用場景、圖標的狀態(tài)等方面都有非常大的差異，如果按照C端的方法去繪制B端的圖標那簡直是費力不討好。在之前做C端的圖標時常常需要考慮精致感與氛圍營造，而B端圖標功能則是降低用戶認知為優(yōu)先。

為了方便圖標端管理我將圖標分為兩大類型，分別為基礎(chǔ)圖標和業(yè)務(wù)拓展圖標。

且圖標規(guī)定在3種尺寸分別為：XS=12px / S=16px / M=20px / L=24px以方便業(yè)務(wù)隨時調(diào)用，且遵循偶數(shù)原則。

• 基礎(chǔ)圖標：常規(guī)圖標，復用性高且出現(xiàn)地方多。
• 業(yè)務(wù)拓展圖標：依據(jù)不同業(yè)務(wù)場景進行定制化的圖標，常常跟著業(yè)務(wù)走。

1）圖標尺寸規(guī)范

與間距類似，將圖標同等進行劃分等級。12號字體搭配外框為12px 圖標；14號字體請搭配 16px 的圖標；16號以上的字體搭配 20px 圖標，以達到更好的視覺效果。

2）keyline

通過keyline我們可以保證繪制不同形狀的圖標的一致性，在keyline的基礎(chǔ)上畫圖標時，基線可以給予我們一定的參考避免圖標的比例失衡?？梢哉fkeyline是圖標的柵格也不為過。

3）業(yè)務(wù)圖標制作規(guī)范

除了常規(guī)基礎(chǔ)圖標外，針對業(yè)務(wù)場景制作的定制化圖標如果不加以限制就會顯得五花八門非常雜亂。當圖標數(shù)量增加到一定程度時就會出現(xiàn)同一表意圖標有不同的樣式結(jié)果。因此有必要在保持圖標美觀易讀的前提下對業(yè)務(wù)圖標進行規(guī)整。

4）圖標命名規(guī)范

隨著業(yè)務(wù)增多，團隊內(nèi)之前的隨意命名的習慣也開始凸顯出弊端。在圖標規(guī)范中，業(yè)務(wù)圖標需要將每個業(yè)務(wù)區(qū)分開，每個業(yè)務(wù)都有著單獨的后綴，這樣可以讓公用圖標與業(yè)務(wù)圖標更方便的溯源。

5）圖標的圖層整理

隨著業(yè)務(wù)線拉長，涉及的團隊人員也越來越多。簡潔整齊的圖層不但能提升團隊效率還可以讓會影響接手工作小伙伴的心態(tài)。所以圖層整理還是得納入規(guī)范內(nèi)的，此處不進行具體規(guī)范僅做提醒和警示作用。

6）圖標交付/iconfont

在與前端開發(fā)溝通達成共識、圖標制作完成確認后，將圖標上傳到阿里巴巴圖標庫中，更方便前端調(diào)用圖標大小和調(diào)整顏色。

如果開發(fā)需要自己去找到相關(guān)圖標，也可以給予權(quán)限讓開發(fā)從藍湖上傳圖標（前提是得整理好圖標到藍湖上）。

五、搭建組件庫你需要知道的幾件事

1. 組件庫到底是什么？

組件庫?？梢灶惐扔诔Ｍ娴臉犯咄婢?，每個組件都是積木，而產(chǎn)品相當于我們拼好的模型。我們可以根據(jù)業(yè)務(wù)需求，以“搭積木”的方式，讓“模型”快速拼起來。

但是并不是說我們可以隨心所欲搭建積木，至少需要看一看“說明書”，而這“說明書”就是設(shè)計規(guī)范。產(chǎn)品、組件和規(guī)范差不多就是這樣的關(guān)系。

2. 搭建組件庫前需要知道的小知識

1）原子設(shè)計/拆分

在業(yè)務(wù)已經(jīng)發(fā)展到一定體量情況下，需要將項目中具備服用行以及拓展性的模塊進行拆解。

對于B端產(chǎn)品來說，篩選的時候會依據(jù)之前迭代的版本內(nèi)容，把頁面一一羅列出來，將可替換與相似的模塊提取，并利用思維導圖的方式統(tǒng)一歸納，并做成可以被替換的組件。

組件的替換建議合成一個大的排期進行替換，避免了線上組件不一致導致體驗問題。

以我們產(chǎn)品為例，依據(jù)產(chǎn)品類型將組件拆分為：基礎(chǔ)組件 、業(yè)務(wù)組件、數(shù)據(jù)可視化組件、常用模塊。

2）原子設(shè)計

將產(chǎn)品拆分后，此時得到很多可復用組件。我們再依據(jù)原子設(shè)計理論針對性進行拆解直至拆分出5個層面：

• 原子（元素、要素）
• 分子（組件）
• 組織（模塊）
• 模板（原型）
• 頁面（填充內(nèi)容）

從原子開始重新依據(jù)定好的視覺規(guī)范進行更改，再由原子組成新的分子。

3）盒子box

在與開發(fā)小哥溝通設(shè)計規(guī)范制定的過程中，常提到他們寫CSS樣式的時候是采用盒子（box）去寫的。通過一個個盒子填充來將我們的組件元素放入其中，最終形成前端展示的頁面。

走查時使用瀏覽器我們也可以看到開發(fā)寫的盒子，了解盒子也可以方便我們走查時知道問題在哪。

3. 按鈕

按鈕設(shè)定有五種類型：主按鈕、次按鈕、虛線按鈕、文本按鈕和鏈接按鈕。

主按鈕在同一個操作區(qū)域最多出現(xiàn)一次。設(shè)計師可以依據(jù)自身業(yè)務(wù)屬性，針對性修改按鈕的圓角大小與描邊，圓角曲率越大越柔越小越硬朗。

除了按鈕狀態(tài)，在制定規(guī)范時還需要考慮到按鈕的其他情況。比如按鈕在放大使用時圓角曲率的變化。

1）按鈕的尺寸規(guī)定

常用的按高度可設(shè)定為：24px、32px、40px、48px，超出48px的按鈕都屬于特殊按鈕。需要進行單獨設(shè)置的，寬度隨著內(nèi)容區(qū)域自適應(yīng)。

常規(guī)的按鈕可分為：主要按鈕（Primary Button ）， 次要按鈕（Secondary Button），虛框按鈕（Dashed Button），失效按鈕（Disable Button ），危險按鈕（Danger Button），文字按鈕（Text Button）等，對照著不同使用場景靈活運用即可。

2）按鈕的自適應(yīng)

按鈕與按鈕間的間距隨著網(wǎng)頁尺寸變化而變化，常設(shè)定幾種斷點規(guī)格進行選擇。

4. 表單

表單承載著采集數(shù)據(jù)信息的功能，是用戶在數(shù)據(jù)輸入的核心模塊之一。表單基礎(chǔ)單位是由標簽，輸入框，填寫提示，操作按鈕構(gòu)成。一行行列表單位組成表單界面。

1）常見的組合樣式

據(jù)統(tǒng)計，表單內(nèi)常見的組件樣式有：文本框、文本域、選擇器、開關(guān)、checkbox、radio、步驟條，上傳/下載、標簽頁等。組件類別繁多，在選用組件時需要考慮其排布形式，在多列表情況下會著重描述這一點。

2）單列表單與多列表單如何選擇？

在web頁面內(nèi)，在左側(cè)導航條較小情況下會導致右側(cè)輸入?yún)^(qū)域空間較大、縱向空間不足的情況。

若此時業(yè)務(wù)需求輸入內(nèi)容較多且難以采取分模塊、分步驟交互時，采用雙列或多列表單的形式提高空間利用率也是可以接受的（ps：可以參照菲茲定律，采用多列的形式需要著重考慮文本框內(nèi)容長度以及表單間間距的合理性）。

下面以自身業(yè)務(wù)為例子，列舉在工作中多列表單出現(xiàn)的一些狀態(tài)。

3）多列表單極端情況

采用多列表單后，隨著復雜程度提升會出現(xiàn)各種各樣的情況，此時設(shè)計師還需考慮到極端情況下表單顯示問題。如標簽過長規(guī)則（標簽最好在最初階段進行限制）、帶按鈕如何進行換行、屏幕分辨率改變?nèi)绾芜M行處理等。建議由設(shè)計師制定規(guī)則時與前端小哥進行深入溝通，以保證最終的落地效果。

4）讓表單具有節(jié)奏感

之前我在表單寬度沒有進行有意識的規(guī)范，導致整個表單呈現(xiàn)一種無序狀態(tài)，通過有意識控制表單的寬度可以使我們對整體頁面有著更好對把控，整體對品質(zhì)感得到提升?？梢詫ΜF(xiàn)有業(yè)務(wù)的表單進行梳理，整理出適合自身業(yè)務(wù)的表單長度單位。此處推薦閱讀Ant_Design《整齊劃一？不如錯落有致》相信你會有更深的理解。

5. 表格

表格，常用語展示數(shù)據(jù)，用戶既可以在表格里面獲取信息，也可以在表格內(nèi)進行數(shù)據(jù)輸入。相對于表單，表格可以進行多維度的數(shù)據(jù)整理與分析。其難點在于表格的組件交互聯(lián)動多，以及數(shù)據(jù)展示的形式多。表格的信息密度很高是我們在B端頁面設(shè)計中涉及最多的一個組件。

1）表格的構(gòu)成

為了方便記憶，個人將表格分解為2大區(qū)域分別是：操作區(qū)域以及信息展示區(qū)域。

• 操作區(qū)域：標題、工具欄、操作單元格；
• 信息展示區(qū)域：表頭、信息展示單元格、分頁控件。

2）表頭與單元格

① 表頭

表頭分為帶選框與不帶選框/帶icon與不帶icon，需要注意的是表頭上文字表意要清晰，簡潔的表頭能讓用戶更快明白此列的內(nèi)容。此時需要與業(yè)務(wù)方溝通限制字數(shù)，若字數(shù)過長無法刪減，則可以考慮使用tooltips。

② 單元格

在與開發(fā)溝通后發(fā)現(xiàn)，開發(fā)在寫表格時并不與我們設(shè)計師的邏輯相仿，設(shè)計師在設(shè)計表格時是依據(jù)行與列的思維進行表格的設(shè)計，而前端則是通過許多的</tr>標簽與</td>標簽進行堆砌而成。因此在設(shè)計時將單元格規(guī)范好，前端將更容易還原好表格。

3）表格在頁面中的樣式規(guī)范

一般來說，表格內(nèi)組件功能復雜，為了提升整體表格統(tǒng)一性與設(shè)計效率，我整理了業(yè)務(wù)上幾乎所有的表格樣式。整理需求后發(fā)現(xiàn)幾乎所有的表格蘊含序列號與復選操作，故整理了一套通用表格規(guī)范以供小伙伴們參考。

常規(guī)頁面通過柵格，由列的數(shù)量決定列寬，與現(xiàn)在的主流框架組件一致；特殊頁面可以與前端溝通后，在設(shè)計稿里面標注某單元格進行固定寬度，其他百分比縮放進行處理。

4）業(yè)務(wù)中表格的常見問題

此處僅提出幾個個人業(yè)務(wù)中常見情況，更多的表格問題解決方案推薦查看CE青年《B端設(shè)計指南06 – 表格（下） 》。

① 有些特殊字段采取左對齊不美觀該怎么規(guī)范對齊方式？

• 常規(guī)文本字段：可點擊的字段、普通文本類、數(shù)字字母等，此類長短參差不齊的，建議采用左對齊的方式；
• 特殊字段：日期、時間、字符數(shù)一致且比較短可控的，建議與表頭居中對齊；
• 業(yè)務(wù)字段：金額、狀態(tài)標簽、類型標識等業(yè)務(wù)性較強的，可根據(jù)相關(guān)特性與閱讀習慣確定對齊方式。

② 文本內(nèi)容過長怎么解決？

當表格列數(shù)過多或者橫向數(shù)據(jù)過長時，難免出現(xiàn)單個單元格內(nèi)數(shù)據(jù)展示不下的問題，此時常采取換行的方式處理（ps換行處理后的結(jié)果需要與后端溝通好，避免出現(xiàn)換行不分字段的情況）。

③ 單元格內(nèi)操作項數(shù)量不一致時，該怎么處理？

此處建議采用平鋪式進行處理，此方式適用方式比較廣，穩(wěn)定性較高（親測）。

將所有操作按照一定的預(yù)設(shè)排列順序進行平鋪，這種方式能夠適應(yīng)B端的大多數(shù)場景。將操作都簡單平鋪出來雖然看上去簡單粗暴，但是在實際工作中，也是一種不錯的處理方式。

④ 每一頁表單展示多少行合適？

如果你經(jīng)常與開發(fā)打交道你就會發(fā)現(xiàn)，開發(fā)對表格信息的處理邏輯是通過逐行從上到下進行渲染處理的。如果不對行數(shù)進行特定的規(guī)范，那么開發(fā)可能會采取漸進式加載（用戶通過滾輪下滑的方式滾動到末尾再進行下一批量的數(shù)據(jù)加載）來解決表格內(nèi)容過多的問題，這就會導致體驗上的不統(tǒng)一。

可以梳理當前業(yè)務(wù)，遵循盡量不讓用戶過多滑動為原則定制每頁的行數(shù)。

6. 彈窗

B端業(yè)務(wù)中使用的彈窗主要分為模態(tài)彈窗和非模態(tài)彈窗，其最大區(qū)別在于對師傅會打斷用戶的操作流程，模態(tài)彈窗會要求用戶必須給予操作。而非模態(tài)彈窗不會打斷用戶當前操作流程，僅僅起提醒用戶的作用，非模態(tài)彈窗常常過一段時間會自動消失。

• 常見的模態(tài)彈窗有：對話彈窗、表單彈窗分、分步彈窗等；
• 常見非模態(tài)彈窗有：通知、全局提示、警告提示、氣泡提示、文字提示等。

1）彈窗依據(jù)柵格自適應(yīng)

為了方便規(guī)范系統(tǒng)內(nèi)等彈窗位置和大小，將彈窗作為一個單獨模塊進行處理是一個不錯的選擇，業(yè)務(wù)中彈窗的性質(zhì)一般都是橫向居中展示。

將彈窗納入柵格體系中。前端小哥可以讓彈窗的寬度隨著列寬的大小變化而變化。

7. 組件庫如何進行迭代

當我們把第一個版本組件庫搭建完成后，對于它當更新和迭代需要依據(jù)業(yè)務(wù)當發(fā)展不斷去維護。建議設(shè)計團隊內(nèi)有規(guī)劃有目地去維護組件庫當多樣性，以保證組件庫能隨著業(yè)務(wù)的發(fā)展一起成長起來。

因篇幅原因，此處遍不細講此部分內(nèi)容，如果大家感興趣后期可以再單開一篇講講組件庫的迭代流程，此處附上有贊的組件庫迭代流程供大家參考。

小總結(jié)：組件庫需要保持簡潔和清晰，不能為了做組件而做組件。最好的狀態(tài)是適合業(yè)務(wù)當前需求的狀態(tài)，組件在于精細而不在于數(shù)量。臃腫對組件庫不但不能提升整體團隊效率，反而會拖垮整個工作的節(jié)奏。

六、如何輸出規(guī)范？

搭建設(shè)計規(guī)范和我們?nèi)粘Ｌ幚砉ぷ餍枨箢愃?，并非輸出一份文檔就結(jié)束了。我們還需要將做好的設(shè)計規(guī)范推廣給包括設(shè)計小伙伴、PM和開發(fā)小伙伴的團隊內(nèi)外，并且需要得到團隊內(nèi)的一致認可才算是初步完成。

1. 如何推廣給PM

利益點：提升協(xié)作效率，減少工作成本。

在啟動設(shè)計規(guī)范的整理之前，內(nèi)部宣講讓PM對于設(shè)計規(guī)范的搭建已經(jīng)有了一個基礎(chǔ)的概念，否則也不會分配資源給予時間去搭建整體的設(shè)計規(guī)范。

可以通過提升PM與設(shè)計的效率和降低原型搭建成本去切入，通過組件庫以及通用模版的搭建PM只需要極低的成本學習一下組件庫怎么使用（我們的PM是使用sketch搭建原型），即可搭建高保真的原型界面。甚至完善好組件庫后直接不需要設(shè)計的參與，開發(fā)通過原型組件庫搭建頁面。

2. 設(shè)計團隊內(nèi)部如何推廣

利益點：提升設(shè)計效率，減少人力損耗。

設(shè)計規(guī)范一般由團隊內(nèi)小伙伴共同制定，基本上已經(jīng)對規(guī)范的優(yōu)勢達成共識。因此主要講講如何更好在團隊內(nèi)部使用規(guī)范。

Library共享+更新日志

通過Sketch Library 共享組件庫，并建立更新日志規(guī)范項目流程提升效率。

3. 研發(fā)團隊內(nèi)容如何推廣

利益點：封裝組件，更少的更改，縮短研發(fā)流程。

需要研發(fā)團隊認可設(shè)計規(guī)范，前期前端的參與是必不可少的。在制作規(guī)范時設(shè)計師了解了前端開發(fā)的一些簡單原理，前端開發(fā)也能及時了解設(shè)計師的想法，大家不再是各司其職而是串聯(lián)起來共同協(xié)作，當規(guī)范確認下來前端就不會頻繁改動組件，而且在有限的項目時間中。設(shè)計規(guī)范的統(tǒng)一極大縮短了設(shè)計和前端開發(fā)所需的時間，為后面的項目爭取了空間。

小總結(jié)：本人時常聽到一些小伙伴的反饋在公司內(nèi)部設(shè)計師的話語權(quán)不夠，公司不太重視設(shè)計。其實總結(jié)下來就是專業(yè)性得不到團隊內(nèi)的認可。

設(shè)計師在工作中如何體現(xiàn)自己的優(yōu)勢是通過一次次的需求業(yè)務(wù)來體現(xiàn)的，許多小伙伴在做業(yè)務(wù)時既沒有前期調(diào)研，也沒有進行資料收集，僅僅只是悶頭開始動手做，往往結(jié)果不會太好。

在處理需求時團隊內(nèi)部的同事也是可利用的資源之一，多與他們協(xié)作獲取業(yè)務(wù)相關(guān)的信息，不僅能幫你站在全局的角度去思考這個業(yè)務(wù)，而且能讓團隊內(nèi)部成員具有參與感，輸出的結(jié)果當然更容易讓他人認可。

七、整理設(shè)計規(guī)范對個人的影響！

1. 收集信息能力

通過整理規(guī)范，需要收集目標用戶、使用場景以及前期調(diào)研等眾多資料，此時我們需要去發(fā)現(xiàn)信息以及整理信息。這一點在日常工作中也常常被使用到，日常中我們在做需要時也需要不斷去挖掘相關(guān)對信息才能從容解決問題。

2. 歸納總結(jié)能力

將收集好的信息進行分類整理，這要求需要一定的邏輯性。

在設(shè)計基礎(chǔ)框架時，合理分類可以協(xié)助我們處理好每個控件對層級，這項能力無論是在工作還是日常中都有著巨大對好處，可以幫助我們從一堆繁雜的事物中“提綱挈領(lǐng)”，換言之就是“化整為零”，做減法，提取出最關(guān)鍵對因素。

3. 全面復盤能力

將信息歸納整理好后，需要對全局進行思考，全局的交互都需要考慮到位，比如什么情況下適合跳轉(zhuǎn)頁面、什么情況下適合給與用戶彈窗、大體符合什么交互原則。

除了對大體交互需要考慮到位，細節(jié)上也不可以忽視，比如異常情況、極端情況該如何去處理，組件之間該怎么去配合等。在日常工作中我們也可以逐漸有意識去培養(yǎng)此類技能，對項目全局思考的越多，那么對整體項目對把控能力也就越強，與他人合作也會越顯得專業(yè)。

4. 表達能力

在整理設(shè)計規(guī)范時，難免會遇到模凌兩可舉棋不定的時候。

此時可以尋求向上或者向下的資源尋求幫助，具備良好的表達能力能迅速幫助我們將問題闡述清楚，我認為表達能力是設(shè)計師需要具備的重要技能之一。每次在求助它人或向他人匯報，都需要在全面復盤問題過后做到心里有數(shù)，將問題自己復述一次是否有漏洞或者沒考慮清楚的地方。

長此以往你表達的事情會更清晰，別人也更容易聽懂你說的事情、快速理解內(nèi)在邏輯，那么說服別人推動工作的難度也會越小。

5. 溝通能力

在多次與他人溝通，個人認為是對我本人幫助最大的能力了。我總結(jié)了幾個和上下游溝通的小技巧希望能幫助到小伙伴們，在開始與他人溝通之前我們需要搞清楚我們溝通的原因與對象。

原因里面包含：

• 包含為什么要進行溝通？（推進項目還是告知）
• 想要達到什么結(jié)果？（自己能做多少妥協(xié)，底線在哪）
• 預(yù)判對方對這件事持什么態(tài)度？（支持/反對/無所謂）
• 希望對方做？自己的目的是啥？（求助還是說服）

對象里面包含：

• 和誰溝通？（上游還是下游）
• 他們對這件事了解多少？（比我多還是比我要少，需不需要簡單講解一些）

當然在溝通時還需要考慮方式和語氣，這些都需要好好斟酌。也遇到過情緒不太好的開發(fā)小哥，這個時候我們更不能將情緒激化。一般這些情緒化的態(tài)度過一會都會消散，可以采取冷處理，等情緒過后換一種方式溝通看看。

關(guān)于B端的設(shè)計規(guī)范想要落地其實并不是靠設(shè)計師這一環(huán)節(jié)努力就可以的，設(shè)計規(guī)范的建立本身就考驗設(shè)計團隊的設(shè)計能力以及推動落地的能力；一個設(shè)計規(guī)范能夠成為團隊內(nèi)的共識是多方共同協(xié)作的結(jié)果。

擁有一顆積極學習的心做事，就算最后結(jié)果不盡人意，從中也能獲取很多東西。終于在放假前整理完畢，最后如果我的分享對你有一絲絲幫助那就是對我最大的肯定，感謝看到最后。

參考文獻

1.Antdesign 的官網(wǎng)

2.美芳Mia/體驗設(shè)計手冊

3.CE青年——B端設(shè)計導航（強烈推薦）

4.羅耀——《概念——原子設(shè)計理論 》

作者：Weiyehe

原文鏈接：https://www.zcool.com.cn/article/ZMTIyMTgxMg==.html

本文由 @Weiyehe 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Unsplash，基于CC0協(xié)議