起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識如何將業務轉化為產品設計（下）
怎樣將一個之前未接觸過的新業務，轉化為研發可以具體開發的詳細產品方案呢？本文主要針對的是具體的的交互設計方法，一起來看一下吧。
一、畫界面：交互設計、信息設計
1. 交互設計
1）尼爾森十大交互原則
尼爾森十大原則由畢業于哥本哈根的人機交互學博士Jakob Nielsen發表，他提出十大可用性原則，用來評價用戶體驗的好壞，每個產品設計者都可以根據這十大原則進行自查。
（1）系統可見性原則（Visibility of system status）
保持界面的狀態可見，變化可見，內容可見。讓用戶知道發生了什么，在適當的時間內做出適當的反饋。
比如用戶在網頁上的任何操作，不論是單擊、滾動還是按下鍵盤，頁面應即時給出反饋。
（2）貼近場景原則（Match between system and the real world）
用用戶的語言，用詞，短語和用戶熟悉的概念，而不是系統術語。功能操作符合用戶的使用場景。
（3）可控性原則（User control and freedom）
用戶經常錯誤地選擇系統功能而且需要明確標識離開這個的“出口”。比如訂單支持取消，保存的草稿文件允許撤銷和刪除的功能。
（4）一致性和標準化原則（Consistency and standards）
遵循平臺的慣例。也就是，同一用語、功能、操作保持一致。同一個平臺對同一個內容的稱呼要一致，功能的一致比如時間選擇器，采用同一個組建，篩選，操作的布局在同一個位置。
（5）防錯原則（Error prevention）
更用心的設計防止這類問題發生，在用戶可能犯錯時進行提醒，比如刪除可能造成的后果。
（6）協助記憶原則（Recognition rather than recall）
盡量減少用戶對操作目標的記憶負荷，動作和選項都應該是可見的。用戶不必記住一個頁面到另一個頁面的信息。系統的使用說明應該是可見的或者是容易獲取的。
比如在后臺當操作有內在邏輯，或者說明的時候，直接將相關的說明放在操作的附近，并進行明顯的提醒
（7）靈活高效原則（Flexibility and efficiency of use）
允許用戶進行頻繁的操作。
比如：后臺有關聯的功能表單等，訂單，賬單，流水表單，他們都與訂單有關，可以通過各自地方的訂單編號直接查看訂單的信息或者跳轉訂單詳情信息，不需要復制訂單賬號，然后再去訂單列表進行查詢。
用戶登錄設計中，將各種登錄方式匯聚，如果用戶想要更換登錄方式，那么可以非?？旖莸倪M行切換操作。
（8）審美和簡約設計原則（Aesthetic and minimalist design）
不應該包含無關緊要的信息。
比如財務流水相關的列表，則不需要放太多商品相關的詳細信息，比如規格等，因為這個地方主要關注資金的信息
（9）容錯原則（Help users recognize, diagnose, and recover from errors ）
錯誤信息應該用語言表達（不要用代碼），較準確地反應問題所在，并且提出一個建設性的解決方案。
比如填寫一個內容并進行提交，如果對提交的內容字段需要判斷是否符合標準，如果不符合標準那就不能只是統一報錯，而應該反饋具體是哪個地方出錯，出了什么錯誤，并進行定位
（10）人性化幫助原則（Help and documentation）
有必要提供幫助和文檔。任何信息應容易去搜索，專注于用戶的任務，列出具體的步驟來進行。
比如說：對于必填及不必填的字段進行標識；將一個復雜的內容填寫項，進行分拆，拆分為幾個步驟，每個步驟匯聚相關信息；對于容易出現疑問的地方，將相關的說明文檔直接放在疑問點處；對于操作之后有分支流程的，進行彈窗提醒
2. 信息設計-以后臺內容類列表頁為例
業務驅動的BSSP設計方法分為四步，分別是梳理業務、梳理場景、設計方案、設計頁面，該方法的目標是先挖掘出業務需求，再進行更細節的原型設計。
B端信息設計涉及的頁面主要包括列表頁、表單頁、詳情頁和組織這些頁面的導航。列表頁又可分為內容類（商品列表頁）、審核類（商品審核）和服務類（訂單列表頁）。
內容列表頁一般可分為幾個區域：篩選區域、查看區域、操作區域。
篩選區域又分為Tab導航和篩選項，查看區域又分為列表區域、排序功能和分頁區域。列表頁的擴展功能有信息的通知和列表頁信息的導出。
將每個頁面畫為幾個大的區域，然后對每個區域進行細分，逐層拆解下去（具體字段及操作），這樣能夠做到結構化的分拆，不會顯得雜亂無章，而且也避免重復和遺漏。
整體設計原則和規范可以參考螞蟻設計：
https://ant.design/docs/spec/introduce-cn
1）整體
比如下方是一個商品的列表，全局的區域還要加上目錄欄，頂部的賬號通知等。
2）具體頁面內容
具體內容列表頁區域：篩選區域、查看區域、操作區域，這個布局也是基本通用。
3）篩選區域
阿里的螞蟻設計提供的設計，篩選區域有有差異，當篩選內容超出3行時可以進行收起，刪選也需要提供重置功能，如下圖
4）查看區域
用戶查看列表的步驟是，通過篩選項查找內容，這些內容會顯示在列表區域。該列表區域可分成三部分，分別是識別、決策和操作。
5）操作區域
信息操作一般為增刪改查，可能還有其它一些操作，但這幾種最多，比如以下為一個家政服務培訓學員的管理頁面的操作項目
以下是一些常用的參考內容：
螞蟻可視化（數據可視化）： https://antv.vision/zh/
螞蟻設計（交互及設計規范，包含組件） ：https://ant.design/docs/spec/layout-cn
iconfont圖標https://www.iconfont.cn/search/index?searchType=icon&q=%E4%B8%8B%E8%BD%BD
專欄作家
Markzou，8年產品經驗，人人都是產品經理專欄作家。主要專注于本地生活、O2O、到家服務、新零售領域；曾任職于多家本地生活垂直領域頭部公司，具有豐富的本地生活行業經驗。
本文原創發布于人人都是產品經理，未經作者許可，禁止轉載。
題圖來自 Unsplash，基于 CC0 協議
該文觀點僅代表作者本人，人人都是產品經理平臺僅提供信息存儲空間服務。
如果有不明白的地方，可以加markzou1988
尼爾森的原則很受用