2017年，從業(yè)以來一直在做各類C端設(shè)計的我，有幸參與了一個B端項目，前后經(jīng)歷了整整一年的時間，期間為了做好B端設(shè)計，查閱了很多資料，參看了很多前輩的經(jīng)驗總結(jié)。

而目前，我知曉身邊有很多設(shè)計師都不愿意做B端項目，因為相對C端而言，B端界面顯得更為枯燥，可設(shè)計性不強。但其實，想把B端設(shè)計做好并不是一件容易的事。

一、B端和C端有什么不同

首先我們需要了解B端與C端究竟有什么不同。

1.C端

即 Customer，我們一般手機上使用的大多數(shù)軟件都屬于C端，是用戶接觸最為廣泛的界面。

C端的用戶群體相對單一且固定，一般為個人的單一維度。不同用戶擁有著相對統(tǒng)一標準的用戶流程。C端的設(shè)計注重使用簡單，流程簡潔，更注重個人的用戶體驗。

△微信APP，圖片來源于網(wǎng)絡(luò)，侵刪

2.B端

即 Business，一般多用于企業(yè)使用，ERP、OA等都屬于B端產(chǎn)品。

B端的用戶群體面向多角色、多維度。不同的用戶在同一個界面可能會有不同的用戶操作流程，不同用戶之間的流程差異較大，因此業(yè)務(wù)場景比較復(fù)雜。不同行業(yè)不同的客戶使用，還需要不同的專業(yè)解決方案。B端的設(shè)計注重工作效率、成本的管控，更追求穩(wěn)定性和安全性。

△企業(yè)管理后臺，圖片來源于網(wǎng)絡(luò)，侵刪

3.需求來源差異

在設(shè)計需求調(diào)研階段，這種不同更為明顯。

C端需求一般來自產(chǎn)品或運營，根據(jù)產(chǎn)品發(fā)展進行功能性需求，或?qū)Ξa(chǎn)品數(shù)據(jù)分析進行相應(yīng)需求調(diào)整，對于某些冷門功能可能會進行刪減等需求調(diào)整。

而B端需求來自于客戶，哪怕再冷門的功能，都不能隨意刪減。還有一些企業(yè)因為原先內(nèi)部的工作流程規(guī)范性就不足，工作流程不合理等等，在給予優(yōu)化建議后，仍認為還是保留原先的流程時，還是得按照原先有缺陷的流程進行設(shè)計。因為，對于這些需求，企業(yè)用戶只要一句“我需要”就夠了。

就像前面說的，B端面向多角色多維度，為了讓多角色第一時間獲取自己所需的信息，一般會對界面進行模塊化設(shè)計處理。需要更為精細優(yōu)化的界面，有時還可以提供自定義組合模塊的功能。

B端最常見的設(shè)計組件非表單、列表莫屬。所以設(shè)計優(yōu)化最先應(yīng)先從這兩方面入手。

二、表單

B端中，企業(yè)的業(yè)務(wù)操作往往需要錄入大量的信息。怎么高速而準確的錄入就是我們的設(shè)計之重。

1.布局

在最初我嘗試了很多種布局，都是一些常見的布局方法。那孰優(yōu)孰劣呢？其實這可以通過視覺動線解決。

△視覺動線示意圖

視覺動線就是當(dāng)用戶進入一個頁面時，視覺所經(jīng)過的路線。

最好的布局應(yīng)當(dāng)是視覺動線距離最短的布局，視覺動線的距離長短意味著閱讀速度的快慢。

這是在理論上。而在事實上，在我采用上下布局后，我的產(chǎn)品經(jīng)理告訴我，我們客戶覺得這種布局太浪費空間，他們希望在一屏內(nèi)盡可能多的展示所有內(nèi)容。我想了想，從用戶的角度來說，的確是這樣的。在很多表單信息需要輸入的時候，輸完一部分，去滾動頁面再輸入另一部分的體驗的確不是很好。表單內(nèi)容很多也不適宜進行一列的布局，采用多列布局，哪怕是方式3的布局，也需要視線進行“之”字閱讀，無疑增加了動線距離。于是最終采用了方式二。

方式一與二的差別在于對齊方式。右對齊的方式使得字段名更靠近輸入框，用戶輸入時能更快地獲取所需輸入的名稱。

總結(jié)一下：當(dāng)表單呈現(xiàn)一列時，建議采用方式3的布局。當(dāng)表單信息較多，呈現(xiàn)2列以上時，還是建議采用方式2的方式。

2.排列順序

這里的排列順序是指表單中字段的排列順序要符合邏輯順序。

△排列順序示意圖

一般的思想邏輯已在平時的生活工作中形成，不要隨意挑戰(zhàn)。

3.輸入框長度匹配

在進行輸入時，輸入框的長度要與將輸入的長度相匹配，使用戶在輸入前就對將輸入的內(nèi)容長度有所預(yù)期。

△輸入框長度示意圖

但又不是每一項輸入框都需要剛好與將輸入的內(nèi)容相匹配，需要考慮整體表單的統(tǒng)一性，避免錯落雜亂。所以還是需要根據(jù)具體內(nèi)容具體分析。

4.輸入自動篩選匹配

有時候B端用戶在輸入表單時，會需要輸入一些復(fù)雜而難記憶的信息。更常見的是在搜索信息時，比如搜索訂單號等等。

△輸入自動篩選匹配示意圖

提升體驗的一個很好辦法就是輸入時進行自動篩選匹配，給出可能的相關(guān)項讓用戶進行直接選擇。這個在很多大型網(wǎng)站中其實也非常常見。百度等搜索軟件中更是常見。

5.能選擇的盡量不輸入

這是一個很重要的設(shè)計原則。當(dāng)輸入的信息只能為確定的幾項內(nèi)容時，采用選擇而不采用輸入的方式，一是為了減少輸入出錯，二是為了增加輸入速度。

△選擇項示意圖

對于選項較多的下拉選擇框，還可以采用可輸可選并自動篩選匹配的方式。

6.區(qū)分必選和可選字段

在B端，不可避免的存在著大量的表單內(nèi)容，而對于業(yè)務(wù)本身而言，很多情況下并不是所有表單內(nèi)容都必須填寫完整的。這時候區(qū)分必選和可選就顯得尤為重要。

一般采用加星號標紅的方法表示必選項，并將必選字段集中放于表單前面，是用戶可以集中處理必填字段。

△必選項示意圖

有一種特殊情況是表單中大多數(shù)都是必填項，只有少數(shù)是可選字段，這時候其實建議也可以反過來設(shè)計，只標注出可選字段。

三、表格

1.利用線或色塊區(qū)分

可以利用最不起眼的列表描邊或填充，對列表進行顯隱變化設(shè)計，增強視覺突出。一般多采用色塊劃分的方式，來強調(diào)行的區(qū)分，增強橫向信息的連貫性。

△表格區(qū)分示意圖

其實利用隱藏或弱化縱向的線，也可以強調(diào)突出行的特性。

而對橫向的線進行隱藏或弱化處理后，則會增強上下行之間的對比性。

2.數(shù)據(jù)對齊方式

對表格中的數(shù)據(jù)進行規(guī)范性的對齊，有助于用戶的視覺統(tǒng)一，更迅速的找到自己所需要的內(nèi)容。

△對齊方式示意圖

對于一般的文本類信息通常采用左對齊的方式，因為人的閱讀習(xí)慣是由左往右，符合正常的邏輯。但是對于一些數(shù)據(jù)信息則應(yīng)采用右對齊方式，更加直觀的表現(xiàn)數(shù)字的大小對比。

3.表格計算

在涉及一些統(tǒng)計數(shù)據(jù)或數(shù)據(jù)分析型表格時，可以進行一些自動計算處理。

比如在采購清單中，用戶需要輸入采購物品、單價、數(shù)量與金額。在用戶輸入單價及數(shù)量之后，若自動計算出金額并填入，無疑是非常增加用戶友好度的一件事。

4.長表格的設(shè)計交互

由于B端的復(fù)雜性，常常會導(dǎo)致需要有著大量數(shù)據(jù)而產(chǎn)生的長表格，一頁顯示不下。這時就會需要通過水平滾動查看。

考慮用戶需要第一時間或者自己所需要的數(shù)據(jù)，因此首頁的表格可以展示一些重要信息，其余不太重要或者是非常規(guī)的數(shù)據(jù)可以隱藏，水平滾動后再查看。

△長表格的設(shè)計示意圖

表格的首列往往是數(shù)據(jù)的對象，在滾動時，將首列固定，可以使用戶更好的將數(shù)據(jù)與對象相匹配。

表格的尾列有時包含對列表的操作，這時也可以將其固定，方便用戶隨時操作。

5.表格的操作

表格的操作按鈕常見的有兩種：一種放置于表格外部（大多數(shù)情況是上方），另一種則放置于表格內(nèi)部。

△表格操作示意圖

放置于表格外部的操作按鈕通常是對表格的批量操作；而內(nèi)部的操作通常是對于所在行的單獨操作。

有時候由于功能的不斷迭代，發(fā)現(xiàn)導(dǎo)致表格的操作按鈕越來越多，顯得十分雜亂。其實在B端設(shè)計中，權(quán)限設(shè)計是很重要的一環(huán)，當(dāng)按鈕太多時，還可以通過對權(quán)限的控制隱藏那些崗位并不需要的功能。這里暫且不做深入探討。

四、總結(jié)

B端設(shè)計也許看上很枯燥乏味，但其實你靜下心來，會發(fā)現(xiàn)有很多值得去研討的地方。做B端并不比做C端容易，甚至在做C端設(shè)計時，你自己本身就是一個用戶，而B端卻可能是一個你從來沒接觸毫無下手之地的行業(yè)。這個時候才是鍛煉你如何“以用戶為中心的設(shè)計”的時候。

這里只做了一些簡單常用的設(shè)計總結(jié)，希望你能有所收獲！如果覺得有所幫助，請點個贊，謝謝！

更多內(nèi)容，請搜索關(guān)注我的微信公眾號：夜的UE筆記，謝謝！