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