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