大部分的B端產(chǎn)品可能是被特定的一群人使用，所以設(shè)計師更需要去調(diào)研產(chǎn)品背后的使用者，只有這樣才能更好的符合用戶的需求。

什么是B端產(chǎn)品？

面對企業(yè)平臺的一種產(chǎn)品，大多是為了提高效率，比如大家所熟知的OA系統(tǒng)。

與移動端產(chǎn)品區(qū)別

1. 使用人群

B端產(chǎn)品使用人群范圍會更具體，比如OA系統(tǒng)，使用人群就是辦公室的員工，財務(wù)系統(tǒng)是針對會計出納人員，倉庫系統(tǒng)是對倉管人員的設(shè)計。這里可能還會涉及到文化水平，比如倉管和會計，可能就會有區(qū)別，需要有更多的考量。

因為B端產(chǎn)品可能是被特定的一群人使用，所以設(shè)計師更需要去調(diào)研產(chǎn)品背后的使用者。因為設(shè)計師可能不是產(chǎn)品的最終用戶，如果按自己的想法去設(shè)計，到時候產(chǎn)品可能根本不符合用戶的需求。

相對來說移動端的產(chǎn)品【面向的用戶】就會更大眾化，比如淘寶、微信。

2. 最終展示的方式

B端產(chǎn)品主要是在PC端，那么就涉及到屏幕大小，響應(yīng)式/自適應(yīng)設(shè)計的調(diào)整，內(nèi)容呈現(xiàn)的多少。

PC端產(chǎn)品的布局，也會比較固定，以左右布局居多，左導(dǎo)航右內(nèi)容。

移動端的產(chǎn)品，受硬件設(shè)備-手機的屏幕寬度高度受限，所以在展示的內(nèi)容，交互的方式上面都有別于B端PC產(chǎn)品。

現(xiàn)在部分B端產(chǎn)品也會同時做移動端，比如Trello和Teambition, 但是體驗還是PC方便，而且有時候離了辦公室不是很想在手機上辦公。

3. 大BOSS喜歡的大盤

B端產(chǎn)品與移動端不同的一點，付錢的是老板，雖然使用的是員工。

BOSS都喜歡看一些大盤數(shù)據(jù)，比如運營系統(tǒng)，就需要各種數(shù)據(jù)的大盤，人員的工作量，運營維護提升百分比等等。

有些產(chǎn)品會特定站在BOSS的角度，做一些BOSS喜歡的功能，比如BOSS會想知道，最近他下屬都做了什么項目，工作量多少，完成時間，都有誰在干活。不過這一類的需求，一般是大公司會比較需要，小公司就幾個人這個需求也就沒多大意義。

做B端產(chǎn)品，遇到的困境

做移動端產(chǎn)品的時候，習(xí)慣會先下一堆競品來分析，對各大產(chǎn)品的功能點、配色、排版等進行一些梳理，找出他們的亮點。但是做B端中后臺產(chǎn)品往往是沒有競品，或者競品很少，而且邏輯性會更強。

這時候，就只能自己去摸索，問一問使用者，并試著帶入使用者的角度去看待問題，花更多時間去了解產(chǎn)品，不懂就問，直到自己明白后，才開始畫原型。

記得剛做B端產(chǎn)品的時候，接到的第一項目是跟代碼掃描相關(guān)的，完全懵。腦袋里面各種問題，代碼方面之前只接觸了前端的一些代碼，但是涉及到后臺，JAVA這些，真是不知該如何。所以只能百度，google，先讓自己有一些基礎(chǔ)的了解，看著產(chǎn)品給的文檔，查著專有名詞，問著各種問題。

從一點不知到開始有慢慢的了解，然后自己把整個產(chǎn)品邏輯梳理出來。對我來說，是困境，也是突破，原來自己是可以做到的。

B端產(chǎn)品一般都會涉及到表格的設(shè)計，表格正常情況下，也挺正常的，直到你發(fā)現(xiàn)這個表格有10幾個字段，一堆操作后……當(dāng)你和業(yè)務(wù)方聊的時候，對方告訴你，這些字段都要，都重要。

怎么辦？如果不想字段擠在一塊，那就只能出現(xiàn)橫向滾動條，但是這種體驗，很抓狂?。?！所以決定再溝通，再溝通。最后的解決方案是，按字段的優(yōu)先級來，分為基本字段和擴展字段，這樣使頁面不會出現(xiàn)滾動條。

問題會有，辦法也會有的

功能先，還是體驗先

B端中后臺產(chǎn)品，更傾向功能方向。本身產(chǎn)品就是要提高效率，不管你體驗做多好，但是用戶要的功能你沒有，對用戶來說，可能直接影響他今天工作完成的效率。所以應(yīng)該在做好功能的前提下，開始優(yōu)化產(chǎn)品體驗，留住用戶，讓用戶有更流暢的體驗。

設(shè)計規(guī)范

B端產(chǎn)品離不開規(guī)范，設(shè)定的規(guī)范后，可以節(jié)省大家很多時間，不管是對設(shè)計師來說，還是對前端來說。而且也會讓整個設(shè)計更加統(tǒng)一，更加專業(yè)。

設(shè)計尺寸大小遵循一定的規(guī)范，你可以選擇4/8/10倍率的，看你使用情況。螞蟻金服是用8倍率，金融暈是用4倍率。

中后臺設(shè)計需要注意的地方

1. 用戶習(xí)慣

B端產(chǎn)品設(shè)計，會涉及是否符合用戶習(xí)慣的問題。比如說，對于移動端來說，我們可能習(xí)慣有漢堡導(dǎo)航，一些功能的隱藏折疊，但是對PC中后臺設(shè)計來說，導(dǎo)航的設(shè)計就會很不一樣，頂部導(dǎo)航，側(cè)導(dǎo)航，都是一級菜單的展示在外面，方便用戶一眼就知道這個產(chǎn)品的主要功能是什么。

同時用戶在使用產(chǎn)品時，主動性會更強，假設(shè)我今天要請假，我就直接去找請假入口，發(fā)起審批，然后就去做其他工作。不像移動端，可能我一打開APP就各種推薦，然后你再選擇感興趣的，或許只是逛逛打發(fā)時間

2. 內(nèi)容填充真實性

名稱數(shù)據(jù)的填充盡量采用真實名稱，如果涉及敏感數(shù)據(jù)，自己可以改一下，但是最好遵循字段的長度，這樣在排版當(dāng)中會更接近上線后的產(chǎn)品，也可以減少后期在UI上的調(diào)整。

3. 角色權(quán)限

B端中后臺產(chǎn)品，都會有角色權(quán)限的需求，根據(jù)設(shè)計需求的不同，在頁面上體現(xiàn)的方式也會不一樣，但是設(shè)計師需要注意的地方是，要弄清楚權(quán)限問題，特別是涉及到復(fù)雜權(quán)限時。

4. 文案

在文字的表達上面要更精煉，讓用戶一眼就看明白，而不是要來回想。對于專業(yè)性強的字段或者功能可以加個i來進行字段解釋，因為平臺上面的新用戶可能會不知道。

表單當(dāng)中，字段盡量不要出現(xiàn)以“的”來連接的字段，比如【關(guān)聯(lián)的業(yè)務(wù)】，直接就可以是【關(guān)聯(lián)業(yè)務(wù)】。字段也不要過于太長。input加入默認提示，會讓整個表單更充實，特別是涉及字數(shù)限制的input，更要提示，這樣用戶心理才有個心理預(yù)期，不會說，輸著輸著就不動了……

5. 頁面跳轉(zhuǎn)/返回

這個是經(jīng)常被忽略的地方，因為在設(shè)計稿上面是很難體現(xiàn)的，而產(chǎn)品文檔也不會涉及，交互稿上面的文字表述，經(jīng)常被開發(fā)忽略，所以在設(shè)計驗收的時候，這個點要注意。比如【新建產(chǎn)品】完成后，頁面到底是跳產(chǎn)品列表頁面，還是到產(chǎn)品詳情頁面呢？對于用戶來說，到底哪個更能引導(dǎo)用戶接下去操作呢？這都是要考慮到交互的細節(jié)

6. 成功/失敗反饋

產(chǎn)品當(dāng)中會涉及到反饋的地方，一般是增刪改查，一些操作的成功失敗。這些都需要反饋給用戶結(jié)果，用戶等待的心情不管是在移動端還是PC端都是一樣的，就是不想等。所以如果有反饋是必須的，不能立刻反饋出結(jié)果，可以用進度條，讓用戶知道，他的操作正在進行中，不是跑到外太空，減少用戶焦慮。

7. 頁面刪除需要有二次確認

刪除，是整個系統(tǒng)操作當(dāng)中比較重要的操作之一。一般是不可能刪了一條數(shù)據(jù)后，用戶還能去【垃圾筒】去回收下。所以二次確認是很重要的操作，畢竟誤點的可能性是不能排除的，所以做個保護操作。

控件的選擇

1. 選擇下拉框還是單選框

如果選項超過4個，則用下拉框。

如果選項在4個以內(nèi)，且信息是簡短文字，則用單選框。因為這樣可以少一個步驟，并且更直觀。

2. 主要按鈕vs次要按鈕

除了增刪改查外，還有針對本身業(yè)務(wù)有一些特定性的操作，如果把全部操作放一起，可能會太擁擠，所以需要對功能按鈕進行折疊，或者按優(yōu)先級來區(qū)分，可以把主要按鈕做得明顯，次要按鈕就可以根據(jù)需求進行弱化。

3. 圖表的選擇

圖表主要分為餅圖、折線圖、曲線圖、柱狀圖。但是并不是所有的數(shù)據(jù)都適合，要根據(jù)具體數(shù)據(jù)要呈現(xiàn)的重點，來選擇。比如業(yè)務(wù)銷售量占比的圖表，餅圖的表達就會更清晰，而業(yè)務(wù)銷量趨勢，就更適合用折線圖來表達。

每個數(shù)據(jù)要找到適合它的圖表，這樣展示出來的數(shù)據(jù)，才會讓用戶看明白，更能提現(xiàn)報表的價值。

4. 選擇toast還是彈窗

根據(jù)提示信息的重要性，如果是需要操作的，或者需要用戶高度重視的反饋，最好用彈窗。如果是只是提示的，比如新建成功，更新成功這些可以用toast提示，不會中斷用戶的操作，又能給用戶反饋

最后，設(shè)計驗收

這一步，是每個設(shè)計師必定要做的。設(shè)計驗收，關(guān)系到設(shè)計稿實現(xiàn)的重要一步。永遠不要期待開發(fā)會照你的設(shè)計稿100%實現(xiàn)，先不要談代碼實現(xiàn)和作圖工具畫出來的本身出現(xiàn)偏差，開發(fā)和設(shè)計師本身就是占在不同角度來看設(shè)計稿的，所以肯定是需要設(shè)計師來把控最后一步的視覺交互。而且還會有可能，設(shè)計稿展示沒有問題，但是代碼實現(xiàn)后的視覺是有問題，需要調(diào)整的，這都有可能。

注意，不單單只驗收視覺，交互的驗收也很重要。驗收出現(xiàn)的問題，推薦整理個文檔，最好是在線共享，開發(fā)改了問題，可以標注，設(shè)計這邊也可以看到，然后去驗證，提高工作效率。

作者：柒設(shè)

來源：https://www.jianshu.com/p/abe1a73e2b2c

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

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