眾所周知，B端產(chǎn)品（To Business）是面向企業(yè)、商家等，根據(jù)戰(zhàn)略目標(biāo)或工作需要，逐漸將原本繁瑣復(fù)雜的線下流程系統(tǒng)化、平臺(tái)化、體系化，從而提高辦事效率，降低溝通成本，實(shí)現(xiàn)戰(zhàn)略目標(biāo)。

那么聽上去如此高端大氣上檔次的B端產(chǎn)品，在實(shí)際的設(shè)計(jì)工作中，存在哪些直擊設(shè)計(jì)師們內(nèi)心深處的問題呢？

 

懷揣藝術(shù)家夢(mèng)想的視覺設(shè)計(jì)師們，在“嚴(yán)謹(jǐn)、嚴(yán)肅、嚴(yán)格”的三大原則下，絞盡腦汁發(fā)揮著自己對(duì)配色無限的遐想，奮戰(zhàn)三天三夜，最終還是只能硬著頭皮以科技藍(lán)作為自己第n+1個(gè)B端產(chǎn)品的收?qǐng)?；以擁有?qiáng)大的底層邏輯為傲的交互設(shè)計(jì)師們，在拿到需求的第一天看到無數(shù)漏洞后感到興奮不已，想了無數(shù)功能強(qiáng)大、自認(rèn)完美的解決方案，最終都還是敗給了技術(shù)限制、字符限制，并且在調(diào)整間距排版的路上，一去不復(fù)返。

說到調(diào)間距、調(diào)排版，就不得不提一提……

 

·那些年我們改過的表格·

提到改表格，相信不少設(shè)計(jì)B端產(chǎn)品的小伙伴們都能為之一顫。就連sketch強(qiáng)大的組件庫功能，都無法動(dòng)搖改表格在改稿界的社會(huì)地位。

 

當(dāng)然，今天小編不是給大家普及什么是sketch組件庫（懵懂期的同學(xué)們可以度娘一下，有很多關(guān)于組件庫的概念文章及基礎(chǔ)教程），在研究了很多大廠設(shè)計(jì)系統(tǒng)、規(guī)范、組件庫的源文件后，發(fā)現(xiàn)了普遍存在的缺口，那就是B端系統(tǒng)最常出現(xiàn)的表格，只有規(guī)范，并無可直接調(diào)用的組件。親自創(chuàng)建過組件庫的同學(xué)們可能也都知道，雖然組件庫的建立會(huì)使設(shè)計(jì)工作的效率提升一大步，但它固然有它的局限性，自然關(guān)于chart組件的創(chuàng)建就是被大大局限的一種。

 

不過小編沒有被現(xiàn)實(shí)情況所屈服，大廠素材沒有提供難道我們就不做不用了嗎？

 

當(dāng)然不行！

 

作為一個(gè)新時(shí)代女性，我們要學(xué)會(huì)經(jīng)濟(jì)獨(dú)立……啊不不不，作為一個(gè)新時(shí)代設(shè)計(jì)師，我們要學(xué)會(huì)資源獨(dú)立！我們要具備自己為自己的工作創(chuàng)建便利條件、提升工作效率的能力。

·建立適應(yīng)產(chǎn)品的chart組件·

像做產(chǎn)品一樣做適應(yīng)產(chǎn)品適合自己的組件，以下小編就以表格組件的建立舉個(gè)栗子。

一、分析建稿/改稿（表格）痛點(diǎn)

    表格需具備隨頁面做適應(yīng)性變化的特點(diǎn)，大量的文字元素、圖形元素讓圖層負(fù)擔(dān)過重，所以建稿/改稿時(shí)，無論是行的選中/拖拽，還是列的選中/拖拽，都是讓人頭痛不已。

比如，像這樣一個(gè)簡(jiǎn)單的僅三行四列的表格，圖層可達(dá)幾十層甚至更多。無論是視覺設(shè)計(jì)還是交互設(shè)計(jì)，在建稿/改稿時(shí)，都有可能因?yàn)楦鞣N各樣的原因?qū)е赂腻e(cuò)或漏改，甚至是1px細(xì)微的位置偏移。

 

二、明確組件要解決的問題

    1.行/列選擇移動(dòng)、對(duì)齊；
    2.支持根據(jù)字段長(zhǎng)短進(jìn)行適應(yīng)性拉伸；
    3.行/列文字顏色變化；
    4.表格適應(yīng)頁面高度；
    5 .icon的跟隨；

 

三、根據(jù)產(chǎn)品定性，創(chuàng)建適合自己使用的組件庫

表格存在的樣式多種多樣，我們首先要確定好表格樣式，就像做視覺時(shí)首先要定風(fēng)格一樣，接下來再根據(jù)實(shí)際情況去確定我們的組件需要包括的組成部分以及各部分的參數(shù)。

 

1、基礎(chǔ)素材組件

首先建立好表格用基礎(chǔ)素材的組件，包括字號(hào)、字體、粗細(xì)、顏色、表頭底色、表格底色、單行數(shù)據(jù)底色、描邊色、單行過渡色、狀態(tài)icon等。

2、表格組成拆分

以“列”為單位（帶四周描邊），分為：左、中、右三部分，其中左側(cè)除了數(shù)據(jù)列還可能是復(fù)選框列，右側(cè)還可能是操作列。利用上述基礎(chǔ)素材組件，按照拆分好的表格組成部分，逐一建立組件。

 

3、建立表格列（參數(shù)以個(gè)人實(shí)際應(yīng)用為準(zhǔn)）

以表格左側(cè)邊列為例：

步驟一：

選取「color/描邊」建立寬為201px的矩形為圖層a，選取「color/white」建立寬為200px，高為40px的矩形為圖層b，與圖層a的左邊及上邊各留出1px作為描邊，并向下復(fù)制排列多個(gè)間距為1px的圖層b，具體數(shù)量根據(jù)實(shí)際情況而定，建議多復(fù)制幾個(gè)。

步驟二：

將圖層a底邊拉伸至超出最后一個(gè)「color/white」1px的高度。

步驟三：

選取「text/normal」排列放置多個(gè)圖層b中，左對(duì)齊。（也可以放置其他素材，如icon等）

步驟四：

將除圖層a以外的全部圖層打包成組1。置入一個(gè)矩形于圖層a之上，作為組1的蒙版，蒙版矩形大小剛好與圖層a上、左、下邊縮減1px。

步驟五：將圖層a及蒙版矩形按照下圖左側(cè)卡片調(diào)整尺寸，將圖層b及全部text圖層按照下圖右側(cè)卡片調(diào)整尺寸。

以此類推做出表格其他組成部分的組件，根據(jù)需要進(jìn)行組合即可。經(jīng)過這樣的尺寸調(diào)整，將希望固定的元素固定，就能實(shí)現(xiàn)表格的任意橫向、縱向拉伸拖拽，并且描邊始終可以跟隨?？梢妶D層清晰程度也大大有所不同。

由于每個(gè)人的工作習(xí)慣以及軟件使用習(xí)慣都不同，小編的栗子是根據(jù)小編自己的工作習(xí)慣來提供給大家一個(gè)思路，目的還是要?jiǎng)?chuàng)建一個(gè)，屬于你們自己的工作“幫手”，甚至不僅僅局限于數(shù)據(jù)表格，都需要大家在摸索中慢慢開發(fā)。