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