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