2022-3-1 周周
隨著跨設(shè)備跨平臺的趨勢不斷顯現(xiàn)，比如最近很火的鴻蒙，一部手機就可以完成辦公場景到生活娛樂場景的轉(zhuǎn)化，未來B端的管理系統(tǒng)不在局限于pc端，體驗將不斷向移動化對齊，使B端用戶不再受時間和地點限制。
B端各個端口的特性：
在保證使用體驗下。pc端、pad端、pc端的功能會是一個下放的過程，屏幕越小功能越簡化。
比如有贊的美業(yè)工作臺，手機端只有宮格功能入口，PAD端除了功能入口外，把工作內(nèi)容也做了露出，PC端則展示了數(shù)據(jù)圖表、快捷功能，以及其他提升效率的入口，內(nèi)容交互更加的復(fù)雜。三端里，不僅屏幕尺寸不一樣，使用場景和角色也完全不同，比如PC端店長使用頻次更高，用于管理店鋪查看經(jīng)營狀況。PAD端則普通員工頻次更高，用于查看具體工作內(nèi)容，需要接待的客人。手機端更通用，所有角色所有場景都會使用，有可能是在店里、家里、路上所以在設(shè)計移動端時要考慮如何在提升操作效率的同時兼容可用性。
B端的典型表單，由數(shù)據(jù)錄入和操作按鈕構(gòu)成，往細拆解的話包含1.標題、2.標簽、3.提示信息、4.輸入?yún)^(qū)、5操作按鈕。
標題：表單的主題，起到說明表單模塊的作用，尤其是在分組的表單中格外重要。
必填提示：用于區(qū)分多個表單內(nèi)容項的必填和非填項，一般使用紅色的“*”表示。
標簽標簽：表單內(nèi)容項的名稱，說明對應(yīng)表單含義以及向用戶說明應(yīng)該錄入信息的類型。
提示：幫助用理解表單，最多見的是引導(dǎo)說明信息和反饋信息。
輸入?yún)^(qū)：表單的核心區(qū)域，承載用戶主要的交互。
操作按鈕：完結(jié)表單操作的觸發(fā)器，用于確認數(shù)據(jù)或者取消數(shù)據(jù)，表單越復(fù)雜按鈕也會越多樣。
大部分場景我們希望用戶能盡快完成表格。但在有些場景呢又希望用戶能放慢速度，使他們能夠深思熟慮，比如下面的三個場景：
1.在一些資質(zhì)審核的頁面，希望用戶能仔細填寫。
2.小屏幕的場景，要求表單縱向或者橫向最小化。
3.國際本地化的需求，表單需要適應(yīng)不同的長度和多種語言。
這張圖是醫(yī)生端注冊流程的競品對比。他們哪種方案能更好的為用戶和產(chǎn)品服務(wù)呢？接下來我們來看下三種典型的表單，能幫助你更好的理解。
1.左對齊標簽
優(yōu)點：如果用戶不熟悉表單要錄入的數(shù)據(jù)，或者是復(fù)雜內(nèi)容，左對齊會更容易些。視覺動線會更符合人們閱讀習(xí)慣，并能節(jié)省縱向的空間。
缺點：長標簽會增加標簽和輸入框的距離，導(dǎo)致延長完成時間。
從馬泰奧-彭佐在2006年進行的眼動研究里發(fā)現(xiàn)，左對齊標簽速度是最慢的，用戶眼動定位的次數(shù)最多的。如果希望用戶能放慢速度，并仔細閱讀表單中的每個輸入框，左對齊會是一個很好的辦法。特別是含有大量的可選輸入框，或者陌生數(shù)據(jù)，比如像資質(zhì)認證頁、金融申請頁等。
在左對齊標簽里，內(nèi)容也有右對齊的方案，如下圖。這解決了長標簽帶來的適配問題，使空間能更好地利用。但關(guān)聯(lián)度會降低，增加理解成本。并會導(dǎo)致眼動距離拉長，適合選擇類的錄入方式，緩解此缺點。
2.頂對齊標簽
優(yōu)點：有較多的橫向空間，并且閱讀效率快，對于國際化的設(shè)計或長標簽特別有用。
缺點：會占用較多的縱向空間。
在同一個實驗中，標簽到輸入框只花了50毫秒，比左對齊快了10倍。
以下是B端的典型列表，主要是信息的查看和操作?；臼怯?.卡片、2.切換篩選、3.搜索、構(gòu)成。
卡片：在移動端列表中更多的是以卡片式的形式呈現(xiàn)，卡片利于展示信息的深度和承載更好的交互。在移動app中我們可以大膽的嘗試使用卡片式設(shè)計，不僅信息能夠很好的突出，也能適應(yīng)多端設(shè)備的展示。
篩選：篩選對于整個表單來說是非常重要的，它可以幫助用戶在表單茫茫數(shù)據(jù)中進行快速的數(shù)據(jù)定位以及劃分，縮短用戶對于數(shù)據(jù)的尋找時間；
搜索：將想要查詢的信息輸入到相應(yīng)的搜索器中，用戶可直達任務(wù)目標。
貼近場景的設(shè)計可以舒緩數(shù)據(jù)頁面帶來的心理壓力，擬物元素與表單的結(jié)合的呈現(xiàn)形式能夠給用戶帶來愉悅感。
如下圖的例子，途牛商旅用了差旅審批單粗細線條元素，醫(yī)鹿用了病歷本上面的釘扣，餓了么商家版模擬小票的設(shè)計。
B端典型數(shù)據(jù)頁，他們基本是由1.數(shù)據(jù)統(tǒng)計、2.可視化卡片、3.篩選、4.數(shù)據(jù)明細構(gòu)成。
數(shù)據(jù)統(tǒng)計：將用戶所需關(guān)注的重點摘出來，并展示和業(yè)務(wù)相關(guān)的其他數(shù)據(jù)。通常是主數(shù)據(jù)+副數(shù)據(jù)的結(jié)構(gòu)。
可視化卡片：數(shù)據(jù)分析里有一句話叫“一圖勝千言”，當面對海量數(shù)據(jù)時（右圖），利用圖表可以幫助用戶快速理解數(shù)據(jù)含義。
而圖表是數(shù)據(jù)頁面里的重要組件，經(jīng)過圖形化、通俗化、形象化后的數(shù)據(jù)可以幫助我們直觀的理解數(shù)據(jù)。
激勵性數(shù)據(jù)設(shè)計
2008 年，為了減少電力消耗，有一家電力公司向 35,000 名客戶發(fā)送了一封帶有簡單圖表的信，向客戶展示了他們和鄰居的電力消耗情況。
在圖表中，可以看到一個條形圖，代表 3 個不同組的功耗：節(jié)能的鄰居、所有鄰居和收信人的家庭。這向客戶顯示他們是否比鄰居消耗更多或更少的電力。
最后這些收到信件的客戶平均降低了 2% 的功耗 ，雖然就個人電費而言，這似乎很小，但對所有客戶而言，這相當于節(jié)省了大量電力和百萬美元。從那時起，全國其他電力公司都采用了這種方法。而這種方法也叫做激勵性的數(shù)據(jù)設(shè)計。
移動端圖表
實際執(zhí)行中，要針對具體場景，選擇合適的方案。比如在一個多折圖表要選曲線的還是直角的，直角能精準的體現(xiàn)數(shù)據(jù)而曲線降低認知負擔使視覺愉悅。
下圖淘特首頁設(shè)計中，需要在較少的縱向空間里設(shè)計可視化圖表，可以看出這里簡化了y軸的標簽以及取值范圍，最后反應(yīng)到圖表上會是一個較平滑的曲線。而這種設(shè)計方案上更多的是感知價值而不是精準的數(shù)據(jù)，這跟激勵性的數(shù)據(jù)設(shè)計有相同的作用。
工作臺是一個幫助用戶快速掌握工作進度及進入工作狀態(tài)的導(dǎo)航頁面。也是用戶感知產(chǎn)品價值的重要門面；所以首頁工作臺是體驗規(guī)范和視覺風(fēng)格的核心場景。
我們來觀察下醫(yī)蝶谷為什么這樣改版。從原型的變化可以發(fā)現(xiàn)，這次改版更多的是去滿足業(yè)務(wù)上的變化，我認為有以下幾點
業(yè)務(wù)優(yōu)化：
1.這樣的改版體現(xiàn)了醫(yī)蝶谷在業(yè)務(wù)策略上的變化。觀察老版本我們發(fā)現(xiàn)，極速問診占了首頁的4/10。這個階段更多是考慮患者訂單響應(yīng)時間，所以接單較慢的新手醫(yī)生體驗較差。
2.將極速問診的內(nèi)容進行收起，醫(yī)生搶單的成本更高，并且將原本tab的問診整合進了首頁。使醫(yī)生在首屏就可以快速掌握工作進度及進入工作狀態(tài)。
視覺優(yōu)化：
1.老版本的快捷工具圖標顏色更豐富容易被用戶發(fā)現(xiàn)，但是在醫(yī)生常用的工作臺里，又顯得有些用力過猛，新版本弱化常用功能圖標的視覺，讓醫(yī)生關(guān)注到更有價值的信息上。
2.在新版的首頁里，因為極速問診改變了位置，我們可以在設(shè)計上做一些差異化的改變，去適應(yīng)新功能的承載。
前面提到了B端的表單、列表、數(shù)據(jù)頁面、工作臺的案例。為了表達透徹下面我跟大家分享下我在工作中碰到的案例。
醫(yī)生這個職業(yè)對我們來說熟悉又陌生，在我們生活里每過一段時間幾乎都會去和醫(yī)生打交道。醫(yī)生一上午可能就有多達幾十位患者就診，平均到每位患者僅有3～4分鐘的診斷時長。在這短暫的時間內(nèi)，要完成病癥的診斷處置、病歷填寫，還要面對來自病患各種問題，難度可想而知。而這種場景映射到互聯(lián)網(wǎng)上也是同樣的，何況大部分還是兼職醫(yī)生。所以我們要做的是讓產(chǎn)品更易用，降低流程的復(fù)雜度。
通過醫(yī)生調(diào)研發(fā)現(xiàn)，醫(yī)院排班并不按照周循環(huán)，平常臨時突發(fā)事情多。所以一日的排班里，時間會有一定的跨度。
舉個例子，大家去看病時候時候一定遇到一個場景，是醫(yī)生讓你去拿報告，在回來的時候你不是重新排隊的狀態(tài)，醫(yī)生需要在這時候?qū)δ氵M行干預(yù)。
設(shè)計應(yīng)當順應(yīng)醫(yī)生的工作特點，考慮在特殊場景上的使用，我們提出的以下策略。
精簡布局，提升屏效
1.在前文B端列表有提到，列表頂對齊的方式用戶閱讀起來效率是最高的。所以這里將時間標簽調(diào)整到內(nèi)容上方，同時調(diào)整卡片里任務(wù)名稱和時間的權(quán)重。
2.優(yōu)化前任務(wù)排序結(jié)構(gòu)是按時間規(guī)律往下排布，一小時占用一行。因為醫(yī)生平日事情多突發(fā)，排期上無法按照一定的規(guī)律。如果需要查看下午、晚上的排期交互步驟則會被增長。所以在設(shè)計上將無任務(wù)的時間標簽進行收縮，這樣在首屏也能看到在晚上的排期狀況。
利用色彩，少即是多
色彩是最具本質(zhì)影響力的表現(xiàn)因素，在設(shè)計即簡單又重要。研究表明，人們只需 90 秒就能對一種產(chǎn)品做出下意識的判斷，而其中高達 60%以上的判斷僅基于顏色。
排期表借助色彩關(guān)系，提高用戶查找效率和傳遞更多的信息。如下圖一開始的想法是按照患者端的邏輯，依據(jù)業(yè)務(wù)圖標進行區(qū)分，但兩端統(tǒng)一要考慮的因數(shù)比較多，不適合復(fù)用。最后考慮采用顏色標簽的形式進行區(qū)分
優(yōu)化路徑，去繁化簡
從前期的調(diào)研的結(jié)果來看，醫(yī)生的排班是無規(guī)律多突發(fā)的，會出現(xiàn)在一天里添加多個不連續(xù)時段的場景。所以我們針對醫(yī)生的排班的設(shè)置做了以下優(yōu)化
優(yōu)化前添加一個時段需要4步，添加一天不連續(xù)的3個時段需要3x4=12步，需要用戶判斷復(fù)雜的邏輯，而優(yōu)化后添加一個時段需要3步，添加一天不連續(xù)3個時段需要4x1=4步，邏輯簡單明了
這是醫(yī)生端其中一個案例，可以看到一個視覺、交互上的優(yōu)化都是針對醫(yī)生實際的工作場景去設(shè)計的，在醫(yī)生這個行業(yè)，有著很大的行業(yè)壁壘，需要我們逐一去調(diào)研給出設(shè)計方案。這也是B端設(shè)計中需要重點關(guān)注的地方。
代碼框架
B端設(shè)計師最常接觸的設(shè)備就是PC，而要做移動B端基本上也是會通過H5、RN等技術(shù)實現(xiàn)。這樣方便多平臺復(fù)用，下面我以web為例子，講述我們該如何理解前端的頁面結(jié)構(gòu)
提升開發(fā)效率
設(shè)計的過程中，好的工作流程可以幫助開發(fā)節(jié)約工時。如果公司有交互的基本是能做到提前開發(fā)的。沒有的話，我們最好有框架思維，先搭好框架，截圖給開發(fā)參考，開發(fā)會根據(jù)你提供截圖，進行基礎(chǔ)模塊搭建，最后在根據(jù)標注文檔進行css上面的調(diào)整。
降低服務(wù)器成本
我們將切圖給予到開發(fā)以后，開發(fā)會將其傳到服務(wù)器上面。
用戶在訪問我們的頁面時其實是相當于發(fā)送一次請求，將服務(wù)器里面的圖片下載下來，如果圖片的數(shù)量太多或者文件太大，會占用大量用戶的帶寬帶來極差的體驗。
而服務(wù)器的空間也是需要公司付費購買的，所以盡量一張圖在多處使用。如果是非常高清的圖片，可以將圖片里的人物切出來，在不同的場景去復(fù)用。實測一張4k的官網(wǎng)banner，人物單獨切出進行復(fù)用可以減少banner50%的大小。
占位符
在一些需要實現(xiàn)文本換行的效果里，開發(fā)很難去通過去寫間距，因為會有換行的關(guān)系。一般會通過占位符的方式去實現(xiàn)，而在占位符里有分為好幾種，下圖我列舉了最常用的三種占位，分別能實現(xiàn)三種不同的間距。
字重
字重的功能是為了在文本種突出重點強調(diào)內(nèi)容，在文本中常采用3種規(guī)格的字重（regular，Medium，Smlbold）。但在h5的環(huán)境里，只有字體標準和粗的還原效果。在標注文件里也能發(fā)現(xiàn)標準體和粗體在標注文件里都會顯示字重為500，而500在前端里的顯示和標準體是是沒有區(qū)別的，我們需要寫好規(guī)則，和開發(fā)約定，以后只要看到medium就寫成600字重。
如何推動規(guī)范
通常在一個版本我們就算把開發(fā)大佬的頭搞禿了，都很難吧所有規(guī)范改完，因此我們需要將自己作為PM的角色，針對現(xiàn)有的需求進行拆分，并排出優(yōu)先級、分版本迭代進產(chǎn)品，并同步需求。
另外在推動規(guī)范的過程中，有可能會出現(xiàn)上圖的情況。這里可以使用表格的方式進行推動上線，可以好的避免以下情況。
文章來源：站酷 作者：丸子法師
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設(shè)計( www.wnxcall.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍藍設(shè)計的小編 http://www.wnxcall.com