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