2021-9-1 ui設(shè)計(jì)分享達(dá)人
對(duì)于設(shè)計(jì)師來說，在日常的互聯(lián)網(wǎng)設(shè)計(jì)工作中面對(duì)的主要是兩類產(chǎn)品設(shè)計(jì)類型，一類是C端(Consumer)指的是消費(fèi)者、個(gè)人用戶；顧名思義就是面向個(gè)人用戶提供服務(wù)的產(chǎn)品，是直接服務(wù)于用戶的。另一類是B端（Business）指的是企業(yè)或商家；顧名思義就是面向商家、企業(yè)級(jí)、業(yè)務(wù)部門提供的服務(wù)產(chǎn)品，是間接服務(wù)于用戶的。現(xiàn)在互聯(lián)網(wǎng)進(jìn)入下半場(chǎng)，C端產(chǎn)品逐漸靠近天花板，紅利逐漸消退，大部分的企業(yè)開始轉(zhuǎn)向B端。
對(duì)于設(shè)計(jì)師來說我們也要對(duì)自己有一個(gè)清晰的定位和轉(zhuǎn)換，如何才能在業(yè)務(wù)的轉(zhuǎn)換下，跟上企業(yè)的步伐，做好角色的轉(zhuǎn)變和切入。
當(dāng)然，從C端快速切換到B端設(shè)計(jì)或者從B端快速切換到C端都不是一件容易的事情，因?yàn)锽端和C端存在比較大的一些差異。其商業(yè)屬性，目標(biāo)用戶，使用場(chǎng)景，設(shè)計(jì)表達(dá)，產(chǎn)品訴求，用戶體驗(yàn)，設(shè)備載體等都是不同的。B端現(xiàn)對(duì)于C端的業(yè)務(wù)而言更為復(fù)雜，那么這次就聊一聊B端設(shè)計(jì)師從哪些方面發(fā)掘自身設(shè)計(jì)價(jià)值，更好的為產(chǎn)品服務(wù)，提升產(chǎn)品價(jià)值。
在我們開始接觸B端產(chǎn)品時(shí)，先要對(duì)B端產(chǎn)品有一個(gè)基本的概念，什么是B端產(chǎn)品？
常見的有OA系統(tǒng)，ERP，CRM，SAAS等（這里就不一一贅述，大家可以自行百度查看一下基本概念）
B端產(chǎn)品是幫助企業(yè)或者部門協(xié)同辦公，解決一條業(yè)務(wù)鏈問題，將線下操作通過系統(tǒng)化，流程化轉(zhuǎn)移到線上，提高辦公效率，節(jié)約成本，高效完成任務(wù)從而提高企業(yè)的效率，減低內(nèi)部不必要的消耗。
B端產(chǎn)品行業(yè)與行業(yè)之間的跨越度很大，因?yàn)椴煌臉I(yè)務(wù)屬性所要的產(chǎn)品訴求是不同的。但我們作為一個(gè)設(shè)計(jì)師，可能會(huì)遇到各種復(fù)雜的業(yè)務(wù)場(chǎng)景，復(fù)雜枯燥的行業(yè)術(shù)語也可能都不精通，就算學(xué)習(xí)了也不一定能非常懂，而且行業(yè)屬性較重，我們大概率不是用戶，業(yè)務(wù)場(chǎng)景還原成本高，甚至沒有條件還原。所以在做設(shè)計(jì)的時(shí)候還是會(huì)懵。往往我們需要深入用戶調(diào)研，盡可能地接近真實(shí)業(yè)務(wù)場(chǎng)景，與用戶共同創(chuàng)造，基于業(yè)務(wù)底層邏輯提煉出強(qiáng)整合性、高兼容性、高拓展性的系統(tǒng)規(guī)范。B端的產(chǎn)品設(shè)計(jì)也是一個(gè)不小的挑戰(zhàn)，那我們?nèi)绾未蚱七@個(gè)挑戰(zhàn)更快速的接觸，適應(yīng)B端設(shè)計(jì)呢？
B 端產(chǎn)品相對(duì)而言，場(chǎng)景、功能、業(yè)務(wù)流程、信息架構(gòu)要比 C 端更復(fù)雜，面對(duì)的異常情況也比較多，所以 B 端在設(shè)計(jì)風(fēng)格上盡量做到簡潔。B 端產(chǎn)品實(shí)用性大于美觀性，在每一個(gè)功能的設(shè)計(jì)都需要你去思考很多方面：用戶易用、信息層級(jí)、未來擴(kuò)展，你都要做出取舍，而對(duì)于每個(gè)模塊都需要你思考、結(jié)合用戶場(chǎng)景。
面對(duì)B端產(chǎn)品我們應(yīng)該如何分析和處理呢？
B 端的業(yè)務(wù)邏輯復(fù)雜，子業(yè)務(wù)多樣化，產(chǎn)品的規(guī)則，流程，訴求可能隨時(shí)就會(huì)調(diào)整，設(shè)計(jì)師應(yīng)當(dāng)基于B端的產(chǎn)品業(yè)務(wù)特性，市場(chǎng)與用戶的需求，在看似雜亂無章的業(yè)務(wù)中尋找共性，梳理模塊進(jìn)行合理的整理和設(shè)計(jì)。
在做B端業(yè)務(wù)前，我們要對(duì)我們即將要處理的業(yè)務(wù)有一個(gè)基本的理解和認(rèn)知，不同的部門員工因?yàn)槁殬I(yè)屬性，使用產(chǎn)品的訴求也是不同的，所以相對(duì)應(yīng)的設(shè)計(jì)方案流程也是不同的，這就需要我們充分理解業(yè)務(wù)流程，有針對(duì)性的梳理。
例如：我們要做一個(gè)考勤系統(tǒng)，我們需要清楚公司的考勤制度，事假/病假/年假/調(diào)休等如何處理，如何提交，如何審批，月底匯算，季度匯算等問題，前期了解的流程越多越清晰，就可以幫助我們規(guī)避很多不必要的問題。
要將功能流程歸類梳理整合，把雜亂的功能整理清楚，提高用戶效能。
用戶的時(shí)間就是金錢，這對(duì)于 B 端商家角色中尤為重要，大量訂單的處理、表格化的導(dǎo)入和導(dǎo)出、批量管理和網(wǎng)站運(yùn)營等方面，對(duì)于效率有著極高的要求，商家通過可視化界面來完成某項(xiàng)任務(wù)。
在這其中，影響最大的莫過于交互方式了，相信各位一定用過各大銀行的網(wǎng)站，頁面的導(dǎo)航關(guān)聯(lián)性弱、結(jié)構(gòu)不合理、提示不明確、交互流程過長，甚至有的網(wǎng)站光是登錄，就得大費(fèi)周章。
如何提高效率，我認(rèn)為主要從以下幾個(gè)方面著手：
如果你的產(chǎn)品，讓人看一眼就能上手，那么說明是非常友好的設(shè)計(jì)。易用性不一定意味著簡單和低智，依據(jù)復(fù)雜守恒定理（泰勒斯定理），每個(gè)應(yīng)用程序都有自己內(nèi)在的、無法簡化的復(fù)雜度。
所以，提高易用性意味著要設(shè)計(jì)合理的交互，易用性分為對(duì)新手（小白用戶）友好和對(duì)老用戶（專家用戶）友好，包括數(shù)量最大的中間用戶。
如果你的界面是僅僅對(duì)于新手友好，那么可能完成的任務(wù)都是簡單而輕松的。但是對(duì)于老用戶，他需要更復(fù)雜的功能來處理大量龐雜的任務(wù)；因此在設(shè)計(jì)的時(shí)候，既要提供傻瓜式的操作方式，也要對(duì)專家用戶提供提高效率的工具。
此處的智能化既包括通過大數(shù)據(jù)或者人工智能自動(dòng)將操作步驟變得簡潔高效，也包括諸如一些字段輸入、自動(dòng)定位、圖片識(shí)別、OCR 等方式來使用戶的效率得以提升的功能。
以前的用戶要摳圖可能會(huì)在 ps 中操作好幾個(gè)步驟才能完成，但是隨著機(jī)器學(xué)習(xí)技術(shù)的發(fā)展，ps 已經(jīng)可以更加智能的摳圖。當(dāng)然，還包括其他功能的智能化。
在 B 端 SaaS 領(lǐng)域，智能化也是一個(gè)重要的趨勢(shì)，針對(duì)不同的商家所面臨的不同的行業(yè)領(lǐng)域，我們或許可以提供更加全面且友好的服務(wù)。
提高系統(tǒng)內(nèi)的一致性，減少用戶認(rèn)知成本。在同一平臺(tái)內(nèi)的頁面，樣式和交互上要盡量保持一致性，不要有的地方是總金額，有的地方是總價(jià)格，這會(huì)讓用戶犯迷糊。提高通用性，也意味著你需要關(guān)注并熟悉系統(tǒng)內(nèi)不同功能之間的關(guān)聯(lián)性，盡量做到統(tǒng)一處理。
B端產(chǎn)品多在工作中需要長時(shí)間沉浸式使用，為幫助用戶集中注意力、高效完成任務(wù)，設(shè)計(jì)風(fēng)格多為冷靜、克制、干凈、簡潔，相較于視覺，更多的是注重如何讓用戶理解產(chǎn)品邏輯。如何通過設(shè)計(jì)的處理更好的提升產(chǎn)品的效率，留住用戶，讓用戶有更流程的產(chǎn)品體驗(yàn)。
在我們進(jìn)入一個(gè)產(chǎn)品內(nèi)容比較多的網(wǎng)站下，如何才可以讓用戶快速在網(wǎng)站中匹配到自己需求，解決自己的問題呢？最快速，便捷的處理方式就是搜索框輸入關(guān)鍵字，通過用戶的關(guān)鍵詞在系統(tǒng)中為用戶提供最匹配，最合適的內(nèi)容，縮短用戶尋找產(chǎn)品的時(shí)間，提升用戶的使用效率，讓用戶有更流暢的體驗(yàn)。
設(shè)計(jì)要點(diǎn)：
提高搜索框在網(wǎng)站中的曝光率
提升模糊搜索的正確率
盡量不要出現(xiàn)搜索結(jié)果為空
文案提醒要簡練，讓用戶掃一眼就知道要表達(dá)什么意思，不要讓用戶停下時(shí)間去思考，琢磨文字提示的信息，減少干擾信息，比如在處理input時(shí)加入默認(rèn)提示，讓表單更清晰，表意更明確；有字?jǐn)?shù)限制時(shí)，要明確可輸入字?jǐn)?shù)和已輸入字?jǐn)?shù)，這樣讓用戶有一個(gè)預(yù)期，不會(huì)出現(xiàn)輸著輸著沒法輸入新的內(nèi)容。
設(shè)計(jì)要點(diǎn)：
文字簡短，清晰，通俗易懂
文案風(fēng)格統(tǒng)一
用戶使用產(chǎn)品時(shí)，用戶與產(chǎn)品之間形成一種“溝通”，良好的反饋機(jī)制能夠大大提升這種“溝通”體驗(yàn)。用戶的每一步操作都應(yīng)當(dāng)?shù)玫较鄳?yīng)的反饋，尤其是在錯(cuò)誤時(shí)要及時(shí)糾正，以便用戶更準(zhǔn)確的操作下一步。但是這種操作不應(yīng)該只是錯(cuò)誤色彩提示。比如當(dāng)我們?cè)谳斎氡韱螘r(shí)，輸入錯(cuò)誤系統(tǒng)并沒有給我們?nèi)魏翁崾?，只是將輸入框變?yōu)殄e(cuò)誤操作的顏色，這樣會(huì)讓用戶無法流暢完成操作內(nèi)容。
設(shè)計(jì)要點(diǎn)：
及時(shí)糾正用戶錯(cuò)誤，減少用戶焦慮
將用戶的錯(cuò)誤操作清晰明了的表述出來
空狀態(tài)作用和文章中“承上啟下”的文字作用是一樣的，空頁面可以幫助我們理解上下文，讓用戶知道即將要發(fā)生什么，才會(huì)覺得舒服。最好的方式就是“展示和引導(dǎo)”：通過清晰的文字告知用戶發(fā)生了什么，并且通過按鈕/快速鏈接有效的引導(dǎo)用戶行為，避免用戶陷入死胡同，不知如何操作下一步。
設(shè)計(jì)要點(diǎn)：
空界面可以增加一些趣味性，個(gè)性化或者打造品牌感（IP形象/品牌logo衍生）
空界面狀態(tài)保持簡潔，直觀易懂
引導(dǎo)用戶操作
當(dāng)icon被用于設(shè)計(jì)時(shí)，最好使用用戶熟悉和容易識(shí)別的icon，以使用戶能夠迅速地了解其用途。如果icon無法傳達(dá)正確的意思，就會(huì)變成視覺噪音，讓使用者迷惑，成為使用者的認(rèn)知障礙。
設(shè)計(jì)要點(diǎn)：
icon要易識(shí)別，正確傳達(dá)表示含義
同一層級(jí)的icon，要統(tǒng)一標(biāo)準(zhǔn)，設(shè)計(jì)一致
B端的設(shè)計(jì)往往會(huì)有很多種情況，我們?cè)谧雒Q/數(shù)據(jù)的設(shè)計(jì)時(shí)盡量模擬真實(shí)的上線數(shù)據(jù)，如果涉及敏感數(shù)據(jù)可以自己改一下，但是盡量要采用字段長度，這樣可以在設(shè)計(jì)中無限接近上線后的產(chǎn)品，減少后期因?yàn)閿?shù)據(jù)展示出現(xiàn)的UI調(diào)整。
設(shè)計(jì)要點(diǎn)：
在設(shè)計(jì)階段無限接近真實(shí)上線環(huán)境
將上線后可能出現(xiàn)的展示樣式都要制作出來，避免后期的返工
確定功能操作的優(yōu)先級(jí)，將一些用戶關(guān)心的數(shù)據(jù)統(tǒng)計(jì)/報(bào)表展示一級(jí)頁面，使用頻率高的功能優(yōu)先靠前展現(xiàn)出來，輕量級(jí)操作的信息入口盡量收起，不要展示給用戶，以免造成不必要的困擾，增加用戶學(xué)習(xí)成本。
設(shè)計(jì)要點(diǎn)：
確定功能優(yōu)先級(jí)
高頻次入口優(yōu)先展示，低頻次折疊隱藏
B端產(chǎn)品邏輯嚴(yán)密和專業(yè)性較高，用戶在使用時(shí)經(jīng)常不可避免的操作失誤，尤其是涉及到刪除數(shù)據(jù)或者金額方面的操作，我們需要格外的謹(jǐn)慎處理。在用戶犯錯(cuò)時(shí)，我們要及時(shí)的提示用戶，這樣的操作會(huì)帶來什么樣的后果，提示的文案要注意語氣，不要將責(zé)任全部推在用戶身上，禮貌對(duì)待用戶。
設(shè)計(jì)要點(diǎn)：
要及時(shí)反饋用戶后果，避免因?yàn)椴划?dāng)操作造成傷害
頁面刪除盡量給二次確定，避免用戶誤點(diǎn)，做個(gè)人保護(hù)
盡量有垃圾箱回收，方便用戶后悔
避免加載中用戶等待焦慮，我們可以使用分布式的加載方式預(yù)先加載頁面框架然后加載內(nèi)容，在內(nèi)容未出現(xiàn)前通過占位符的方式展示，優(yōu)先加載占用網(wǎng)絡(luò)資源較少的元素，減少用戶的等待心理，占位符的方式可以讓用戶提前了解到頁面整體的展示樣式效果，給用戶加載好的錯(cuò)覺。
在加載過程中我們可以通過這幾個(gè)視覺表達(dá)方式來加載，通過顯示品牌元素加載；色塊加載；界面布局；灰色圖顯示等。
設(shè)計(jì)要點(diǎn)：
避免空白頁加載等待，增加用戶焦慮
選擇最符合產(chǎn)品調(diào)性的加載
我們要做到減輕界面視覺呈現(xiàn)，但這并不是意味著減少頁面功能。我們要幫助用戶簡化認(rèn)知負(fù)擔(dān)，增加界面可讀性，降低用戶閱讀瀏覽復(fù)雜的大塊內(nèi)容時(shí)的心理壓力和抵觸感。將一些復(fù)雜的表單內(nèi)容通過數(shù)據(jù)可視化的方式讓用戶更快，更便捷的查看數(shù)據(jù)，從而對(duì)業(yè)務(wù)有更直觀的理解。
設(shè)計(jì)要點(diǎn)：
數(shù)據(jù)可視化是一個(gè)不錯(cuò)的選擇
避免不必要的元素信息
保證可讀性
一個(gè)優(yōu)秀的進(jìn)度條可以讓用戶減少很多的焦慮，并且讓過程和結(jié)果步驟清晰可見，進(jìn)度條的目的在于通過向用戶反饋當(dāng)前響應(yīng)進(jìn)度來讓用戶在等待中放松下來，在用戶等待程序處理事情時(shí)，不應(yīng)該把用戶仍在一旁傻傻的猜想程序什么時(shí)候結(jié)束，這個(gè)步驟還有多長時(shí)間。正是這樣的情景下，進(jìn)度條剛好可以構(gòu)建用戶與系統(tǒng)之間溝通的橋梁。面對(duì)長時(shí)間的幾十秒的操作的進(jìn)度條不應(yīng)該只是一個(gè)進(jìn)度模糊顯示，更好的處理是應(yīng)該加入進(jìn)步完成的百分比，清晰明了告訴用戶系統(tǒng)完成了多少工作量還剩多少。
設(shè)計(jì)要點(diǎn)：
進(jìn)度條可以打消用戶對(duì)程序等待響應(yīng)的疑惑
針對(duì)響應(yīng)時(shí)間稍長的進(jìn)度加入顯示百分比
開發(fā)完成后設(shè)計(jì)師要開始設(shè)計(jì)走查，因?yàn)殚_發(fā)不可能百分之一百的還原設(shè)計(jì)圖，所以最后的設(shè)計(jì)把控是非常重要的，即使是開發(fā)按照設(shè)計(jì)圖還原界面但是可能代碼實(shí)現(xiàn)后還是有些問題，或者是不同尺寸的屏幕適配，或者是加入真實(shí)數(shù)據(jù)后一些展示問題，又或者是頁面的跳轉(zhuǎn)/返回以及一些彈窗提示等都需要最后的走查確定；不僅僅是視覺頁面驗(yàn)收，交互方面還要考慮去驗(yàn)證思考最符合用戶操作體驗(yàn)的流程。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)掃碼ben_lanlan，報(bào)下信息，會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( bouu.cn )是一家專注而深入的界面設(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ù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://bouu.cn