2021-12-30 ui設計分享達人
B端全稱是Business即商家（泛指企業(yè)）的產品，通常是企業(yè)或商家，為工作或商業(yè)目的而使用的系統(tǒng)型軟件、工具或平臺。相對于C端產品，B端產品對業(yè)務邏輯和產品邏輯要求會更高。
本篇筆記將羅列B端設計過程中的核心設計思維和高頻設計要點，結尾附上大廠設計規(guī)范鏈接。供大家下載查閱。
設計開始要了解設計的目標，用戶的行為都是有「目標動機」的，B端產品的業(yè)務目標往往都是為了為企業(yè)或個人為了解決某一項工作上的問題。
當設計過程以「目標」為出發(fā)點，可以增強設計判斷力，輸出更有效設計解決方案。
B端產品的設計原則：提高使用者的工作效率，同時降低業(yè)務鏈路的操作及學習成本。
當你有了目標以后你的設計就可以圍繞這個目標展開：
對于B端的產品而言，用戶最關心它能為實際的工作帶來哪些便利，而并非這個界面做的多么的好看，以及用戶體驗多么棒。所以B端產品設計價值優(yōu)先級往往是 功能性＞表現(xiàn)力
B端產品設計需要站在整個業(yè)務線全局角度去把控各個設計點，不再是「用戶體驗」至上，為實現(xiàn)「任務目標」，「犧牲」一部分「用戶體驗」是必要的，這個時候視覺和一些體驗就不那么重要了。通過調研業(yè)務去了解各個角色職能的工作流程、相關痛點，讓產品能用，好用。
理想的B端設計需要了解業(yè)務目標以及業(yè)務鏈路中每一個環(huán)節(jié)的過程。將業(yè)務邏輯理解透徹再考慮應該如何進行設計實現(xiàn)。
這樣做的原因當你站在使用者的角度進行同理心設計可以更好的幫助用戶完成他要完成的工作，從而提高效率。產品原型一般基于「功能」本身，而設計師從用戶實際場景規(guī)劃用戶的任務流，可以優(yōu)化產品邏輯，補全缺失場景，通過了解業(yè)務流程也能給予創(chuàng)造性解決方案
B端產品往往是是服務于企業(yè)用戶，用戶畫像需要專注于用戶特征中的「群體職業(yè)身份」這類人無論性別、年齡、地區(qū)有何差異，他們都是一類角色，我們的產品要提供給這類角色使用，而不是某個人使用。
由于B端設計師不是產品的用戶，無法沉浸在與用戶相同的真實場景中，建立共情。所以設計師最好親自感受一下業(yè)務流程，獲得一手的用戶洞察，
「通過業(yè)務人員交流」業(yè)務人員可以幫助我們快速高效的描繪出典型客戶案例的用戶畫像。
「實地走訪」：觀察在自然狀態(tài)下用戶如何完成工作任務，并提問題：「你怎么做？」或者「為什么這么做？」
「建立種子用戶群」：聚集活躍的種子用戶群，收集意見和建議，并在群里驗證設計想法。
「親身體驗」：成為真正的客服小二，接聽客戶電話，記錄自己在工作臺場景下的真實體驗和感受。
獲取用戶畫像后了解該群體背后工作感受，行為習慣，以及任務類型。
安全感和信任感建立：人們越來越關注隱私和信息安全。如果你要求必須填寫敏感信息，請確保使用字段下方的注釋文本解釋為什么需要這些信息。
實際工作中我們曾經自動獲取過用戶之前表單中填寫的的支付類賬戶信息，在收集的用戶反饋中，用戶會感覺到隱私正在泄露并讓用戶信任感降低。所以即使用戶輸入體驗會更好，但是考慮到信任感，敏感類信息請不要自動獲取。
讓用戶感受到你正在幫助他操作：Jakob Nielsen于1994年提出的十大可用性原則中，其最后一條原則Help and documentation（幫助性指導原則）是搭建B端用戶幫助體系的核心準則，在理想情況下，沒有幫助文檔就可以使用系統(tǒng)是最好的，但在某些情況下（尤其是B端系統(tǒng)），提供一些引導性的幫助其實是必要的。
B端系統(tǒng)中可以嘗試搭建用戶幫助系統(tǒng)：
對B端產品來講，設計師在設計的時候是不需要耗費太多的思考的，只是去按照交互設計師的規(guī)劃堆砌圖表和列表。但是對于使用者來講，其中縱橫交錯的商業(yè)邏輯和業(yè)務邏輯卻是給用戶搭建了一個十分高的門檻。
例如修改資料的時候，使用彈窗、浮層等等交互操作會減少頁面跳轉的頻率。
但是與此同時，減少頁面跳轉并不代表真正的高效，例如瑞幸的供應商系統(tǒng)，供應商所產生的訂單需要按照指定的流程一步步進行操作確保不會出現(xiàn)問題這樣雖然頁面的跳轉增加，但是可以避免操作出錯給用戶帶來更大的困擾。
設計要根據(jù)用戶的瀏覽習慣和視覺動線。要嘗試引導用戶的視覺，舉個例子，如何引導：
B 端產品是以業(yè)務為核心，是需要用戶長時間操作并完成工作任務的，對于操作和展示內容無關的元素，越少越好。視覺為功能讓步，追求簡潔、清晰、克制、理性的視覺風格。設計語言盡量做到不干擾不打擾。
輸入順序：先易后難；先必填后選填；先公開信息后隱私信息；有關聯(lián)性的合成一組，特殊問題后置，用戶輸入時、不會覺得突兀、門檻太高 。
自動對焦（PC端）進行表單頁面，自動對焦第一個輸入字段可以引導用戶開始進行輸入。
標題：標題是對下文最短最精的概括。用戶一般都會跳過表單內容，而且?guī)缀醵疾粫屑氶喿x那種特別詳細的描述。所以用最少的文字說清楚一個表單的目的尤其重要。
用戶應該可以看一眼標題就知道他們應該怎么做，而不是非得把剩下的全部看完，
（附：這部分感興趣的同學可以搜索“微文案設計”）
在表單編寫方面，或者說各種寫作中，刪減詞語都要比添加詞語更加有益。 在仔細檢查不必要的詞語后，文章會更篤實，更連貫，更吸引人。
這個鏈接有什么用？關閉是點擊右上角的按鈕嗎？如果并沒有增效，那就是減效。每一個字，每一張圖片，都不是100% 必需的，這些都會降低你表單的轉換率。
刪除一個字段，表單提交率就可以提高 26%。（本篇筆記原本有12000余字，為了避免浪費大家時間，我僅保留4000余字的高頻要點內容）
PC端產品提示文字盡量不要放在框內
提示文字存在于框內常用在移動端，它的空間占比很小，對移動端的小屏來說，是非常友好的，但如果在交互上處理不好，會有很大的缺陷。
內部標簽結構，只有提示性文字，用作提示用戶應該輸入什么內容，但用戶在輸入的時候，內部的標簽/提示性文字就會消失，這時候，用戶會失去它是否輸入準確的唯一判別標準。
字段輸入通過部分人工智能自動將操作步驟可以變得簡潔高效 ，也包括諸如一些、自動定位、圖片識別、自動獲取，第三方導入等方式來使用戶的效率得以提升的功能。
打字是在線表單中最耗時、最密集的部分，而且經常會導致錯誤——尤其是在手機上。用按鈕、滑塊替換文本框并使用自動完成功能，將減少工作量并提高轉化率。
文本塊會更容易讓用戶記住內容：例如銀行賬戶、電話號碼等等。它指的是將信息排列成「塊」的過程，使內容更容易保留、處理和回憶。一份研究聲稱數(shù)字 3 是幫助人們吸收和回憶信息的神奇數(shù)字。
如果一個字段需要特定的格式輸入，請告訴用戶。例如密碼要求、語法規(guī)則、編號間距等等。
可以用輸入框長度提示用戶輸入的內容是否正確。
德萊厄斯研究所的可用性研究發(fā)現(xiàn)，如果一個字段太長或太短，用戶開始懷疑他們是否正確理解了標簽。
在用戶輸入的時候，右下角告訴用戶已經輸入了多少字，如果超過 80 字后會變紅色，用來警示用戶，并且此時的表單域也無法輸入新的內容。
如果用戶填寫錯誤，向用戶顯示錯誤發(fā)生的位置，并說明原因。
如果你的表單里的選項少于5個可以列出所有選項供用戶快速選擇，當大于5個時候可以嘗試用下拉框解決。
將第一個選項作為用戶最有可能的默認選項，且是最安全的選項，提前預判用戶的操作提升選擇效率。排列方式推薦數(shù)直排列，豎直排列相對于水平排列容易讀取和定位，提高用戶的瀏覽順序。
當前需要用戶填寫相對隱私的信息時，請給予解釋這么做的原因及目的。
完成表單的設計后可以給業(yè)務用戶進行簡單的測試，并記錄他們填寫的時間收集反饋，以及對這一連串的問題他們體驗如何。這也將有助于你下次評估表單的設計。
最后在情感化設計系統(tǒng)里記得感謝用戶填寫或者反饋問題，因為用戶是花時間的。所以請表示感謝。
表格的設計圍繞著「可讀性」和「易操作」兩個設計原則。設計易讀，易掃視，易比較，易操作的表格結構是表格設計的首要目標。
列寬有三種常見處理方式：
1. 根據(jù)內容的極限長度給出足夠的固定寬度；
2. 可以固定部分列的寬，其余列按百分比處理；
3. 列寬需要考慮最低寬度/最大寬度/文字極限狀態(tài)，內容為空狀態(tài)顯示方案；
4.需要設置列之間的最小寬度，表格響應式布局情況下最小不小于此寬度。
M-Densign規(guī)范中對齊方式會遵循如下規(guī)則：
表格的排序，應從用戶目的出發(fā)，遵循用戶查看數(shù)據(jù)的習慣，尊重數(shù)據(jù)之間的關聯(lián)性，設計用戶查看、操作數(shù)據(jù)的路徑，而非隨機排列（這部分可以在業(yè)務側調研時驗證，提高用戶體驗和閱讀效率）。
1. 文本信息/混合型文本左對齊，符合從左到右的閱讀習慣；
2. 數(shù)字信息右對齊，方便數(shù)字之間的直觀對比；
設計規(guī)范需要定義按鈕的四種狀態(tài)：正常狀態(tài)(Normal)、懸停狀態(tài)(Hover)、激活狀態(tài)(Active)、加載狀態(tài)(Loading)、禁用狀態(tài)(Disabled)
B端產品的開發(fā)一般涉及多個開發(fā)團隊協(xié)作，例如瑞幸的后臺修改按鈕顏色，都可能牽動10+工程師的協(xié)同。
所以B端產品在進行設計改版以及設計側調整時候要思考調整對于業(yè)務側是否有直接幫助，在設計和規(guī)范建立之前，切勿頻繁改動。
除了完全獨立設計開發(fā)的項目以外，還有大量的 B 端項目是采用第三方框架開發(fā)而成的，如 Ant、Element 等等。這是因為這些第三方程序可以幫助團隊節(jié)省大量的開發(fā)時間和精力。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯(lián)系。
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯(lián)系，我們立即更正或刪除。
藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務