前言
寫這篇文章的初衷是由于工作中帶新人發(fā)現(xiàn)他們從拿到一個(gè)需求不知道如何下手開展自己的工作，即使開展了也是丟三落四，需要反復(fù)回爐重造。希望通過這篇文章可以對(duì)他們有一些幫助的同時(shí)也是對(duì)自己工作的一個(gè)思考總結(jié)。有什么不足之處還請(qǐng)各位見諒，也可以和我一起探討一下。由于我的工作內(nèi)容基本都是設(shè)計(jì)一些B端產(chǎn)品，并且團(tuán)隊(duì)項(xiàng)目中沒有產(chǎn)品經(jīng)理的崗位，經(jīng)常的情況就是直接對(duì)接客戶，接觸最原始的需求，這些需求很可能是客戶的一段話，也可能是一個(gè)需求文檔，所以對(duì)于我們?cè)O(shè)計(jì)人員理解需求的要求就比較高了。我常常跟別人說，一定要多思考。因?yàn)樵O(shè)計(jì)師所有的產(chǎn)出物都依賴于我們的思維。在動(dòng)手之前一定要多動(dòng)腦。
01.B端產(chǎn)品設(shè)計(jì)原則
B端產(chǎn)品最重要的價(jià)值應(yīng)該就是降本增效了。那么我們?cè)O(shè)計(jì)師如何通過專業(yè)的角度，去發(fā)現(xiàn)問題，解決問題，實(shí)現(xiàn)企業(yè)通過產(chǎn)品達(dá)到降本增效的目的呢？我總結(jié)了十個(gè)設(shè)計(jì)原則：可用性、易用性、可見性、明確性、一致性、合理性、習(xí)慣性、便捷性、高效性、擴(kuò)展性。可用性：我們做的任何產(chǎn)品和需求都是給人使用，解決某人在某種場景下的某個(gè)問題的，那就要可實(shí)現(xiàn)可用。舉個(gè)例子：小明是個(gè)光頭，你走過去跟他說，洗剪吹了解一下。那他一定不會(huì)搭理你。對(duì)他來說當(dāng)下你的建議沒有可用性。易用性：我們經(jīng)常會(huì)說這個(gè)東西太好用了，這個(gè)東西設(shè)計(jì)的反人類，太難用了。這就是易用性的價(jià)值。直接影響用戶體驗(yàn)的問題。可見性:我認(rèn)為可見性的問題就是信息結(jié)構(gòu)分類分層的問題，重要的信息是否清晰可見，可以快速引導(dǎo)用戶當(dāng)前在什么場景能做什么事。明確性：產(chǎn)品信息內(nèi)容的準(zhǔn)確表達(dá)，用詞明確。一致性:產(chǎn)品的跳轉(zhuǎn)邏輯，交互方式，結(jié)構(gòu)布局，語言體系都要保持統(tǒng)一，并且和品牌形象保持一致，創(chuàng)建用戶的認(rèn)知和使用習(xí)慣。減少用戶的學(xué)習(xí)成本。合理性:業(yè)務(wù)流程符合操作邏輯，交互設(shè)計(jì)和視覺設(shè)計(jì)層符合規(guī)范，遵循一定的現(xiàn)實(shí)物理特性。習(xí)慣性 ： B端產(chǎn)品很大一部分需求是將一些線下流程的線上化處理，所以在設(shè)計(jì)業(yè)務(wù)流程的時(shí)候要考慮用戶處理流程的習(xí)慣性問題以及用戶使用平臺(tái)操作的習(xí)慣性問題。比如我們習(xí)慣把五角星的圖標(biāo)識(shí)別為收藏功能。就不要打破用戶的這種認(rèn)知習(xí)慣。便捷性：基于B端產(chǎn)品的業(yè)務(wù)復(fù)雜性，我們要適當(dāng)?shù)脑谀承┑胤教峁┛旖莶僮?，提高用戶的操作便捷性。比如?dǎo)航的快捷搜索功能。高效性：B端產(chǎn)品里用戶的使用目標(biāo)就是高效處理任務(wù)。所以平臺(tái)在功能設(shè)計(jì)上要盡量簡化操作，能一步完成的事一定不用二步，提高用戶的工作效率。擴(kuò)展性：在設(shè)計(jì)框架和內(nèi)容的過程中要考慮后續(xù)擴(kuò)展的可能性，有些框架內(nèi)容如果有增加或者修改要怎么處理和展現(xiàn)。接下來我們就結(jié)合B端產(chǎn)品的特點(diǎn)圍繞這十個(gè)原則，講述一下交互設(shè)計(jì)過程中的思考總結(jié)。
02.設(shè)計(jì)目的和業(yè)務(wù)邏輯的理解
積極有效的溝通貫穿整個(gè)設(shè)計(jì)過程！一定要溝通！溝通！溝通！我們?cè)O(shè)計(jì)的過程要與項(xiàng)目組的很多角色對(duì)接，客戶，需求，開發(fā)，測試，每個(gè)角色站的角度不同，考慮問題的方向就不同，積極有效的溝通可以避免走很多彎路。一定不要自己悶頭想當(dāng)然，你以為的并不是你以為的！簡單說就是有疑問就找相關(guān)負(fù)責(zé)人溝通?！按蚱粕冲亞柕降住痹谶@里非常適用。首先我們要了解需求（也可能是產(chǎn)品，這里就拿需求來講）的背景，結(jié)構(gòu)和內(nèi)容。
1.為什么做這個(gè)需求？
這個(gè)需求從何而來？這個(gè)問題有助于我們了解它產(chǎn)生的原因，挖掘真實(shí)的需求。它是為解決什么問題而產(chǎn)生的，跟它所關(guān)聯(lián)的內(nèi)容有哪些？這個(gè)需求是屬于新增的還是優(yōu)化的，還是bug修復(fù)？如果是優(yōu)化的需求，是什么原因要做這個(gè)優(yōu)化？方便我們快速找到問題，做出優(yōu)化方案。比如我們發(fā)現(xiàn)有一些需求是隸屬于某一個(gè)系統(tǒng)下的，那么我們?cè)O(shè)計(jì)的時(shí)候就要遵循一下以往的設(shè)計(jì)規(guī)范與原則。保留用戶的操作習(xí)慣等等一些繼承的問題。
2.這個(gè)需求有什么功能？
大概了解一下這個(gè)需求要實(shí)現(xiàn)哪些功能？這些功能的復(fù)雜程度是怎樣的？（這里需要跟開發(fā)人員也溝通一下大概實(shí)現(xiàn)的難度和周期。）實(shí)現(xiàn)的周期是多少（我們要根據(jù)周期制定我們?cè)O(shè)計(jì)的方案）？要在哪些終端上展現(xiàn)？權(quán)限是怎樣劃分的？用戶角色有哪些？
3.怎么實(shí)現(xiàn)這些功能？
這些功能要通過哪些技術(shù)手段實(shí)現(xiàn)？實(shí)現(xiàn)的方法有很多，我們要判斷在資源，時(shí)間，成本，實(shí)現(xiàn)難度，用戶體驗(yàn)等等的各種因素下用那種實(shí)現(xiàn)方案更優(yōu)？這個(gè)階段需要跟各方人員共同商議出一個(gè)解決方案。當(dāng)然這是一個(gè)比較概括的方案。我們往往會(huì)制定幾套方案，在實(shí)際執(zhí)行的過程中隨時(shí)調(diào)整這個(gè)方案。
結(jié)構(gòu)梳理
這里就需要用到思維導(dǎo)圖了。我們要對(duì)整個(gè)需求的信息架構(gòu)做梳理。包括功能結(jié)構(gòu)，業(yè)務(wù)流程，跳轉(zhuǎn)邏輯。
1.功能結(jié)構(gòu)
功能結(jié)構(gòu)其實(shí)就是對(duì)整個(gè)需求的框架結(jié)構(gòu)的呈現(xiàn)。根據(jù)需求功能劃分框架結(jié)構(gòu)。主要分為樹形結(jié)構(gòu)，矩形結(jié)構(gòu)，線性結(jié)構(gòu)，信息結(jié)構(gòu)。樹形結(jié)構(gòu)：從上到下的信息架構(gòu)完整地容納需求的所有內(nèi)容?；締挝皇枪?jié)點(diǎn)。比如個(gè)人設(shè)置是一個(gè)大的模塊單元，里面包含基本信息設(shè)置/賬號(hào)密碼設(shè)置等。適用于層級(jí)較深，每個(gè)單元模塊之間保持一定的獨(dú)立性，呈樹形結(jié)構(gòu)的信息內(nèi)容系統(tǒng)。矩形結(jié)構(gòu)：這種結(jié)構(gòu)用戶可以帶著不同的需求快速找到自己想要的內(nèi)容。不同分類下的內(nèi)容相互穿插。適用于內(nèi)容的標(biāo)簽分類篩選系統(tǒng)。例如表格頁面的標(biāo)簽分類篩選功能。線性結(jié)構(gòu)：單向流程結(jié)構(gòu)。適用于專注度高，業(yè)務(wù)流程單一的結(jié)構(gòu)，用戶在當(dāng)前頁要么返回，要么下一步，只能沿著一條線往下進(jìn)行。例如注冊(cè)，新建內(nèi)容等場景。信息結(jié)構(gòu)：適合簡單的信息呈現(xiàn)，按照信息的重要程度做分層處理，劃分出結(jié)構(gòu)。
2.業(yè)務(wù)流程
業(yè)務(wù)處理的每一步過程去向，下一步的處理邏輯和反饋結(jié)果，返回路徑，業(yè)務(wù)角色權(quán)限劃分，操作流程路徑是否一致？異常情況，例如中斷的處理與提示。
3.跳轉(zhuǎn)邏輯
在分析跳轉(zhuǎn)邏輯之前要明確業(yè)務(wù)功能之間的關(guān)聯(lián)，是上下級(jí)關(guān)聯(lián)關(guān)系，還是分屬同級(jí)模塊？或者是頁面操作的新增，修改，編輯，詳情等內(nèi)容？頁面層級(jí)關(guān)系決定跳轉(zhuǎn)邏輯，同樣層級(jí)關(guān)系的跳轉(zhuǎn)邏輯&跳轉(zhuǎn)方式要保持一致。業(yè)務(wù)流程如何跳轉(zhuǎn)才能清晰引導(dǎo)用戶？一個(gè)頁面中操作會(huì)不會(huì)有關(guān)聯(lián)或沖突？這些問題都要在這一步考慮清楚。常見的跳轉(zhuǎn)方式有直接跳轉(zhuǎn)、左右跳轉(zhuǎn)、上下跳轉(zhuǎn)，側(cè)滑，彈窗等，在設(shè)計(jì)時(shí)需要考慮好其中的關(guān)聯(lián)性，給出最符合用戶心理預(yù)期的過渡方式，從而做出最合適的設(shè)計(jì)。具體的跳轉(zhuǎn)方式的使用這里就不詳細(xì)講解了。網(wǎng)上有很多相關(guān)的教程。
03.交互設(shè)計(jì)
這一步我們需要交付交互設(shè)計(jì)文檔和線框圖。這一步一邊做一邊也要及時(shí)跟開發(fā)和需求去溝通，一方面確認(rèn)自己的業(yè)務(wù)理解和展現(xiàn)形式符合業(yè)務(wù)邏輯和客戶的要求。一方面確認(rèn)你的設(shè)計(jì)方案開發(fā)可以有效高效地實(shí)現(xiàn)（很多設(shè)計(jì)小伙伴說我的設(shè)計(jì)方案很好呀，只是開發(fā)沒能力實(shí)現(xiàn)。emmm….）。每個(gè)公司的開發(fā)團(tuán)隊(duì)能力都不一樣，要根據(jù)團(tuán)隊(duì)里的實(shí)際情況去做設(shè)計(jì)推動(dòng)項(xiàng)目的落地。畢竟我們做的設(shè)計(jì)還是要讓人用起來的呀。所以懂一些開發(fā)知識(shí)是很有必要的，到底真的是開發(fā)哥哥想偷懶，還是真的有難度，豈能躲過我們的火眼金睛??！交互設(shè)計(jì)這件事如果展開說恐怕要說三天三夜也說不完。我這里只給大家提供一個(gè)設(shè)計(jì)思路，大致需要注意的一些關(guān)鍵點(diǎn)。詳細(xì)的交互設(shè)計(jì)知識(shí)，還需要大家慢慢了解學(xué)習(xí)。尤其是想專注做交互設(shè)計(jì)的伙伴們。我們?cè)谳敵鼋换ピO(shè)計(jì)的過程，大致要從信息載體，信息設(shè)計(jì)，導(dǎo)航設(shè)計(jì)，權(quán)限設(shè)計(jì)，圖表設(shè)計(jì)，組件設(shè)計(jì)，反饋機(jī)制，語言設(shè)計(jì)，特殊場景，動(dòng)效設(shè)計(jì)這幾個(gè)方面去考慮。注意設(shè)計(jì)過程中交互時(shí)的操作狀態(tài)是否明確合理，交互效果是否可以實(shí)現(xiàn)以及不同終端的設(shè)計(jì)規(guī)范和原則。
1.信息載體
我們要清楚我們做的需求是要在哪些終端上展現(xiàn)？不同的終端有不同的交互方式。是pc端還是移動(dòng)端或者是車載設(shè)備，電子屏幕？是ios系統(tǒng)還是安卓系統(tǒng)？我們的設(shè)計(jì)要符合不同系統(tǒng)和平臺(tái)的設(shè)計(jì)規(guī)范。橫豎屏幕要如何展現(xiàn)？分辨率都有哪些？如何適配不同分辨率下的展現(xiàn)效果？是否需要版本適配？是否需要硬件交互：話筒，藍(lán)牙，定位，相機(jī)等。是否需要硬件聯(lián)動(dòng)：打印機(jī)，出票機(jī)等。
2.信息設(shè)計(jì)
B端的信息設(shè)計(jì)包括信息來源，信息分類，信息狀態(tài)，信息顯示等。信息來源：我們要明確信息的來源是哪里？后臺(tái)傳輸還是前臺(tái)展示還是用戶錄入。信息獲取的方式是什么？自動(dòng)更新還是操作觸發(fā)？刷新的方式是手動(dòng)還是自動(dòng)？信息分類：根據(jù)業(yè)務(wù)需求，劃分信息類型，顯示層級(jí)，由高到低，按照設(shè)計(jì)原則規(guī)劃信息展現(xiàn)的比重和方式，把數(shù)據(jù)結(jié)構(gòu)化。信息狀態(tài)：要考慮信息的默認(rèn)狀態(tài)，為空狀態(tài)，常規(guī)狀態(tài)，內(nèi)容過期狀態(tài)下應(yīng)該怎么顯示和布局。信息顯示：信息的顯示要考慮信息的極限值，非最優(yōu)展示效果，重復(fù)或短缺（顯示不全怎么辦）情況，異常顯示：敏感詞，內(nèi)容違規(guī)，數(shù)據(jù)獲取異常，加載時(shí)間過長等情況。
3.導(dǎo)航設(shè)計(jì)
導(dǎo)航的結(jié)構(gòu)決定了整個(gè)需求的架構(gòu)系統(tǒng)，頁面層級(jí)。簡單清晰的導(dǎo)航可以讓用戶快速清晰地獲取整個(gè)需求的功能和內(nèi)容概覽。一般根據(jù)導(dǎo)航層級(jí)和內(nèi)容的不同，我們會(huì)分為橫向?qū)Ш?，豎向?qū)Ш?，?biāo)簽導(dǎo)航，組合導(dǎo)航等方式去安排布局。功能復(fù)雜的導(dǎo)航應(yīng)提供搜索與快捷菜單。
4.權(quán)限設(shè)計(jì)
角色權(quán)限影響功能和數(shù)據(jù)的展現(xiàn)。要注意角色類型的清晰劃分。角色能不能轉(zhuǎn)變？怎么創(chuàng)建角色轉(zhuǎn)變的系統(tǒng)感知？
5.圖表設(shè)計(jì)
圖表的內(nèi)容分為：標(biāo)題，指標(biāo)，指標(biāo)值。我們要根據(jù)業(yè)務(wù)需要選擇合適的圖表形式展現(xiàn)圖表的內(nèi)容。比如柱狀圖一般適合表示各個(gè)指標(biāo)之間的對(duì)比關(guān)系，折線圖一般適合一段時(shí)間內(nèi)的指標(biāo)變化趨勢(shì)。還要根據(jù)頁面布局空間大小選擇合適的展現(xiàn)形式。確定指標(biāo)的枚舉值，指標(biāo)值的范圍。圖表之間的關(guān)聯(lián)性等。
6.組件設(shè)計(jì)
這里就不一一列舉了，具體的分類和使用方法可以在ANTD的官網(wǎng)查看一下就知道了。https://ant.design/docs/spec/overview-cn組件的交互形式按照使用場景，保證功能的全面性，避免漏掉組件交互狀態(tài)。這部分我會(huì)在以后的文章里詳細(xì)總結(jié)。
7.反饋機(jī)制
反饋分為系統(tǒng)反饋給用戶的，用戶對(duì)系統(tǒng)的主動(dòng)反饋，系統(tǒng)通知。用戶反饋要設(shè)置好入口與方式。防止反饋對(duì)用戶的干擾，簡化反饋流程。系統(tǒng)的通知要確認(rèn)好方式，是郵件，信息還是其他。通知時(shí)間，內(nèi)容格式的統(tǒng)一規(guī)范。操作后的結(jié)果反饋時(shí)間，方式，位置的設(shè)定。操作異常的提示，公告引導(dǎo)的提示，錯(cuò)誤糾正。反饋機(jī)制要做到簡單明確，輕重得當(dāng)，前后統(tǒng)一。既防止用戶的誤操作，又做到人性化的提醒作用。
8.語言設(shè)計(jì)
平臺(tái)的語言表述要統(tǒng)一，提示用語，稱謂，菜單與命令用語，標(biāo)點(diǎn)格式，產(chǎn)品和功能名稱要保持一致性，符合操作場景，能明確引導(dǎo)下一步操作，要有一定的人性化表達(dá)。以人為本，風(fēng)格恰當(dāng)。B端產(chǎn)品的語言體系要區(qū)別于其他產(chǎn)品，大眾化詞語難以達(dá)到業(yè)務(wù)術(shù)語的精煉效果，強(qiáng)制大眾化反而不易理解。
9.特殊場景
注意一些極端情況下的設(shè)計(jì)，比如惡意使用的場景考慮，我們的使用場景和規(guī)則都是基于正常的使用場景去做設(shè)計(jì)，但是不能排除就是有些人想跟你唱反調(diào)，我就是要這么做，系統(tǒng)該怎么反應(yīng)？如何處理這種操作？內(nèi)容缺省異常狀態(tài)該怎么設(shè)計(jì)？中斷情況，比如硬件故障，斷網(wǎng)，用戶退出，系統(tǒng)該如何處理當(dāng)前的場景？設(shè)計(jì)的過程中不要漏掉這部分的容錯(cuò)和防錯(cuò)機(jī)制。還有一些其他因素的考慮，比如一些情感趣味性，品牌傳達(dá)，商業(yè)性的融合設(shè)計(jì)。
10.動(dòng)效設(shè)計(jì)
在設(shè)計(jì)這部分內(nèi)容的時(shí)候主要考慮轉(zhuǎn)場過渡方式的選擇以及節(jié)奏的把控。具體的設(shè)計(jì)方法筆者會(huì)在以后的分享里跟大家碎碎念，一起來探討。也會(huì)出一部分動(dòng)效的作品給大家。希望大家到時(shí)候能關(guān)注。筆芯～
04.視覺設(shè)計(jì)
這部分想聊一個(gè)問題：總是會(huì)有非設(shè)計(jì)人員對(duì)你的界面指指點(diǎn)點(diǎn)，我相信幾乎每個(gè)設(shè)計(jì)師都會(huì)遇到這個(gè)問題。我們要用專業(yè)的視角去告訴別人，你為什么這么做？而不是憑感覺做設(shè)計(jì)，哪怕是界面上的一根線，也要做到有理有據(jù)。給予別人專業(yè)的建議，一個(gè)圓和一個(gè)方形，那個(gè)更適合放在界面當(dāng)中，為什么？會(huì)讓人更理解你的設(shè)計(jì)。我們要具有解釋設(shè)計(jì)作品的能力。視覺設(shè)計(jì)要運(yùn)用到很多相關(guān)的知識(shí)體系。比如人的視覺焦點(diǎn)：會(huì)沿著f曲線運(yùn)動(dòng)，人的大腦處理圖形的速度遠(yuǎn)大于文字。注意設(shè)計(jì)過程中的對(duì)比和一致性，配色，排版，文字，間距，圖形的運(yùn)用。比如柵格系統(tǒng)，可以使你的界面布局保持一致，整潔和規(guī)范。B端系統(tǒng)的配色要注意紅綠色的使用。因?yàn)橐话銜?huì)用這種顏色區(qū)分一些業(yè)務(wù)等級(jí)，隨便的使用可能會(huì)造成一定的誤解。整套的配色方案應(yīng)該和品牌形象結(jié)合在一起，根據(jù)顏色的性格，明確主色，輔色，點(diǎn)綴色，注意不同色塊體積的運(yùn)用。排版要做適當(dāng)?shù)牧舭祝瑢?duì)齊。文字的顏色、大小，字重區(qū)分層級(jí)，間距。整個(gè)系統(tǒng)的視覺表達(dá)風(fēng)格統(tǒng)一。
原文地址：墨染動(dòng)效（公眾號(hào)）
作者：喬公子
轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》B端交互設(shè)計(jì)過程中的思考
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ì)公司
