針對一對一個性化定制的B端產(chǎn)品，鮮有競品參照猾骡，大到行業(yè)小到公司個體瑞躺，業(yè)務多少都不一樣敷搪。這時，只有對業(yè)務各個場景有詳細的了解幢哨，你才能做出符合業(yè)務的交互設計赡勘，減少開發(fā)的返工。即B端產(chǎn)品的交互思維來源于你對業(yè)務場景的了解捞镰。
真正讓我重視交互設計是我的測試工作闸与，多次的測試失敗（測試不全面岸售，上線了用戶反饋出新問題）践樱，加上領導的引導，我開始思考為什么測試不嚴謹凸丸。一直被領導吐槽邏輯感很差拷邢，邏輯？是的邏輯漏洞屎慢，但歸根到底還是對用戶的使用場景了解的不夠全面瞭稼。用戶萬分之一會觸發(fā)的可能情況，我們都要在測試中操作一遍抛人，看是否能正常操作弛姜，是否有提醒，界面呈現(xiàn)的結(jié)果是否正確妖枚。
那從測試往前推廷臼，不難發(fā)現(xiàn)，實質(zhì)對于0-1項目的搭建绝页，一開始的界面交互設計和交互說明文檔至關重要荠商， 并且好的交互設計/說明可以大大降低與開發(fā)的溝通成本以及開發(fā)對該項目的理解難易程度，以便能較準確地預估實施難度续誉，比如需要調(diào)取哪些數(shù)據(jù)表等莱没，從而盡快進入開發(fā)環(huán)節(jié)。
好的交互對開發(fā)來說是邏輯的完整性酷鸦，對用戶來說是體驗的流暢性饰躲。交互說明是PM前期需求分析、用戶調(diào)研臼隔、界面設計落實到紙質(zhì)上的一種呈現(xiàn)方式嘹裂。
那一份完整的交互設計文檔該如何實現(xiàn)？我們可以從以下三個步驟著手編寫：
一摔握、梳理清楚功能邏輯
1. 梳理業(yè)務流程圖
它可以幫助我們站在開發(fā)角度寄狼，確定功能涉及到數(shù)據(jù)上的增刪改查，包括單頁面和多頁面間的數(shù)據(jù)流向氨淌。通過和開發(fā)溝通業(yè)務流程圖泊愧，提前將技術問題梳理清楚伊磺，避免功能設計后技術實現(xiàn)困難或根本實現(xiàn)不了。
2. 明確需求出現(xiàn)的所有場景
這需要我們運用邏輯思維窮盡需求可能發(fā)生的所有情況删咱，這是一個非承悸瘢考驗邏輯完整性的過程，我們可以通過腦圖軟件幫助我們遍歷場景腋腮。
二雀彼、面向?qū)ο蠓治龉δ軐傩?/b>
學習開發(fā)思維壤蚜，使用面向?qū)ο笏枷敕治龉δ軐傩约垂眩瑤椭覀冏畲笙薅鹊谋苊馐杪?/p>
1. 列舉功能的所有屬性
2. 確定修改屬性的交互事件
3. 確定修改后的屬性
三、輸出設計規(guī)范文檔
1.頁面整體說明模塊
a. 頁面整體的排版布局（比較直觀可不寫袜刷，特殊點可注明細說下）
b. 相同的交互方式聪富，比如彈窗、新標簽頁等
2. 對象
用戶身份和系統(tǒng)功能頁面緊密相關著蟹。比如某申請流程中的申請者和審批者墩蔓。
3. 限制
a.范圍值：比如列表超過10項出現(xiàn)滾動條
b.極限值：比如某個字段文字超過展示極限值才有缺省，hover氣泡展示全部
4. 表單校驗
表單校驗邏輯：是實時校驗還是觸發(fā)按鈕后做校驗萧豆，還是兩者結(jié)合奸披，表達清楚邏輯并將相關的提示和反饋描述清楚。
5. 操作與反饋
a. 操作：
- 交互方式：點擊涮雷、拖動阵面、長按泻拦、縮小才沧、放大等
- 文本框等：獲取焦點、失去焦點暴构，比如輸入時出現(xiàn)下拉列表等
- 熱區(qū)范圍：比如列表展示形式可將序列標題或者序列某一范圍作為可觸發(fā)操作的區(qū)域
b. 反饋：
- 提示內(nèi)容：系統(tǒng)對用戶操作的及時反饋览爵，比如報錯提示置鼻、失敗提示、成功提示等
- 提示形式：提示的控件樣式蜓竹，比如警告框箕母、確認彈框等
- 跳轉(zhuǎn)：跳轉(zhuǎn)形式是當前窗口/新窗口？跳轉(zhuǎn)到哪里俱济？寫清楚標號或者頁面名稱
6. 狀態(tài)變化
a. 默認：
- 默認選項選中
- 默認顯示的文案
- 默認排序方式
b. 正常：
- 正常場景下的操作帶來的變化嘶是，比如點擊表格的表頭排序
c. 特殊：
- 特殊功能，比如點擊查重功能
- 特殊場景姨蝴，比如無數(shù)據(jù)情況俊啼、加載失敗、網(wǎng)絡錯誤
最后 配合開發(fā)進行業(yè)務梳理
1. 復雜業(yè)務邏輯的梳理
2. 所有交互邏輯的梳理
3. 所有文案的梳理
4. 頁面流程圖的梳理（前提：跨頁面設計）
舉個筆者最近設計的案例：添加推薦機構(gòu)及顧問
前言：教育培訓行業(yè) 學生是由某機構(gòu)的某顧問推薦而來左医，本公司課程顧問在錄入該學生信息時授帕，需要選擇某機構(gòu)某顧問同木，結(jié)果發(fā)現(xiàn)系統(tǒng)沒有該機構(gòu)該顧問信息，需要進行添加跛十。
一彤路、梳理清楚功能邏輯
共3種場景，整理如下：
- 場景1：無該機構(gòu)芥映，無該顧問洲尊，要添加機構(gòu)，添加顧問（該顧問附屬于該機構(gòu)）
- 場景2：有該機構(gòu)奈偏，無該顧問坞嘀，要添加顧問（該顧問附屬于該機構(gòu)）
- 場景3：無該機構(gòu)，有該顧問惊来，要添加顧問（該顧問不附屬于任何機構(gòu)丽涩，是獨立顧問或校內(nèi)顧問）
場景2：類似于場景1，優(yōu)化方案是先選擇列表里已有的該機構(gòu)裁蚁，再添加該機構(gòu)下的顧問矢渊。
場景3：屬于特殊場景，為了讓用戶準確將顧問定位于對應機構(gòu)（防止不同機構(gòu)有同名顧問枉证，不知選擇哪個顧問矮男，這也屬于查重機制），所以機構(gòu)類型里添加了獨立顧問/校內(nèi)顧問室谚，需要先選擇獨立顧問或者校內(nèi)顧問毡鉴，再添加該顧問。
二舞萄、面向?qū)ο蠓治龉δ軐傩?/b>
三眨补、輸出符合設計規(guī)范的文檔
參照上述說明，在此舉例：
1.頁面整體說明模塊
點擊“+”,跳出彈窗倒脓，添加推薦機構(gòu)/顧問
4.表單校驗
在選擇已有機構(gòu)情況下撑螺，添加顧問時實時校驗是否重名
5.操作與反饋
a. 操作：
添加顧問未添加機構(gòu)，點擊確定按鈕時崎弃，彈出警告框甘晤，提示：機構(gòu)名必填。
b. 反饋：（失敗場景的toast文案）
- 不填寫/不選擇已有機構(gòu)直接點擊提交或者清空已填寫/已選擇機構(gòu)：機構(gòu)名必填饲做；
- 添加已有機構(gòu)的同名顧問：該機構(gòu)中已有同名顧問线婚，請核實；
- 選擇已有機構(gòu)不添加顧問：顧問不能為空盆均。
6.狀態(tài)變化
推薦機構(gòu)的下拉列表默認前兩項是獨立顧問/校內(nèi)顧問塞弊。
小結(jié)
工作上多學習優(yōu)秀產(chǎn)品和多復盤自身設計，空余時間多讀優(yōu)秀書籍和文章。長期堅持下來游沿，我們的交互設計能力一定能有階梯式的提升饰抒。從表象判定交互思維的提升，大概就是你的設計稿越來越易被開發(fā)理解诀黍，同時這也讓你的設計越易讓業(yè)務方可接受袋坑。
- 文/潘曉璐 我一進店門鞋屈，熙熙樓的掌柜王于貴愁眉苦臉地迎上來范咨，“玉大人，你說我怎么就攤上這事厂庇∏。” “怎么了？”我有些...
- 文/不壞的土叔 我叫張陵权旷，是天一觀的道長替蛉。 經(jīng)常有香客問我，道長拄氯，這世上最難降的妖魔是什么躲查？ 我笑而不...
- 正文 為了忘掉前任，我火速辦了婚禮译柏，結(jié)果婚禮上镣煮，老公的妹妹穿的比我還像新娘。我一直安慰自己鄙麦，他們只是感情好典唇，可當我...
- 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著胯府，像睡著了一般介衔。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上骂因，一...
- 文/蒼蘭香墨 我猛地睜開眼僚碎，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了阴幌？” 一聲冷哼從身側(cè)響起勺阐，我...
- 正文 年R本政府宣布芍锚，位于F島的核電站昔园，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏并炮。R本人自食惡果不足惜默刚，卻給世界環(huán)境...
- 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望逃魄。 院中可真熱鬧荤西，春花似錦、人聲如沸嗅钻。這莊子的主人今日做“春日...
- 文/蒼蘭香墨 我抬頭看了看天上的太陽养篓。三九已至秃流，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間柳弄，已是汗流浹背舶胀。 一陣腳步聲響...
