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