怎樣將一個之前未接觸過的新業(yè)務(wù)，轉(zhuǎn)化為研發(fā)可以具體開發(fā)的詳細(xì)產(chǎn)品方案呢？本文主要針對的是具體的的交互設(shè)計方法，一起來看一下吧。

一、畫界面：交互設(shè)計、信息設(shè)計

1. 交互設(shè)計

1）尼爾森十大交互原則

尼爾森十大原則由畢業(yè)于哥本哈根的人機交互學(xué)博士Jakob Nielsen發(fā)表，他提出十大可用性原則，用來評價用戶體驗的好壞，每個產(chǎn)品設(shè)計者都可以根據(jù)這十大原則進(jìn)行自查。

（1）系統(tǒng)可見性原則（Visibility of system status）

保持界面的狀態(tài)可見，變化可見，內(nèi)容可見。讓用戶知道發(fā)生了什么，在適當(dāng)?shù)臅r間內(nèi)做出適當(dāng)?shù)姆答仭?/p>

比如用戶在網(wǎng)頁上的任何操作，不論是單擊、滾動還是按下鍵盤，頁面應(yīng)即時給出反饋。

（2）貼近場景原則（Match between system and the real world）

用用戶的語言，用詞，短語和用戶熟悉的概念，而不是系統(tǒng)術(shù)語。功能操作符合用戶的使用場景。

（3）可控性原則（User control and freedom）

用戶經(jīng)常錯誤地選擇系統(tǒng)功能而且需要明確標(biāo)識離開這個的“出口”。比如訂單支持取消，保存的草稿文件允許撤銷和刪除的功能。

（4）一致性和標(biāo)準(zhǔn)化原則（Consistency and standards）

遵循平臺的慣例。也就是，同一用語、功能、操作保持一致。同一個平臺對同一個內(nèi)容的稱呼要一致，功能的一致比如時間選擇器，采用同一個組建，篩選，操作的布局在同一個位置。

（5）防錯原則（Error prevention）

更用心的設(shè)計防止這類問題發(fā)生，在用戶可能犯錯時進(jìn)行提醒，比如刪除可能造成的后果。

（6）協(xié)助記憶原則（Recognition rather than recall）

盡量減少用戶對操作目標(biāo)的記憶負(fù)荷，動作和選項都應(yīng)該是可見的。用戶不必記住一個頁面到另一個頁面的信息。系統(tǒng)的使用說明應(yīng)該是可見的或者是容易獲取的。

比如在后臺當(dāng)操作有內(nèi)在邏輯，或者說明的時候，直接將相關(guān)的說明放在操作的附近，并進(jìn)行明顯的提醒

（7）靈活高效原則（Flexibility and efficiency of use）

允許用戶進(jìn)行頻繁的操作。

比如：后臺有關(guān)聯(lián)的功能表單等，訂單，賬單，流水表單，他們都與訂單有關(guān)，可以通過各自地方的訂單編號直接查看訂單的信息或者跳轉(zhuǎn)訂單詳情信息，不需要復(fù)制訂單賬號，然后再去訂單列表進(jìn)行查詢。

用戶登錄設(shè)計中，將各種登錄方式匯聚，如果用戶想要更換登錄方式，那么可以非?？旖莸倪M(jìn)行切換操作。

（8）審美和簡約設(shè)計原則（Aesthetic and minimalist design）

不應(yīng)該包含無關(guān)緊要的信息。

比如財務(wù)流水相關(guān)的列表，則不需要放太多商品相關(guān)的詳細(xì)信息，比如規(guī)格等，因為這個地方主要關(guān)注資金的信息

（9）容錯原則（Help users recognize, diagnose, and recover from errors ）

錯誤信息應(yīng)該用語言表達(dá)（不要用代碼），較準(zhǔn)確地反應(yīng)問題所在，并且提出一個建設(shè)性的解決方案。

比如填寫一個內(nèi)容并進(jìn)行提交，如果對提交的內(nèi)容字段需要判斷是否符合標(biāo)準(zhǔn)，如果不符合標(biāo)準(zhǔn)那就不能只是統(tǒng)一報錯，而應(yīng)該反饋具體是哪個地方出錯，出了什么錯誤，并進(jìn)行定位

（10）人性化幫助原則（Help and documentation）

有必要提供幫助和文檔。任何信息應(yīng)容易去搜索，專注于用戶的任務(wù)，列出具體的步驟來進(jìn)行。

比如說：對于必填及不必填的字段進(jìn)行標(biāo)識；將一個復(fù)雜的內(nèi)容填寫項，進(jìn)行分拆，拆分為幾個步驟，每個步驟匯聚相關(guān)信息；對于容易出現(xiàn)疑問的地方，將相關(guān)的說明文檔直接放在疑問點處；對于操作之后有分支流程的，進(jìn)行彈窗提醒

2. 信息設(shè)計-以后臺內(nèi)容類列表頁為例

業(yè)務(wù)驅(qū)動的BSSP設(shè)計方法分為四步，分別是梳理業(yè)務(wù)、梳理場景、設(shè)計方案、設(shè)計頁面，該方法的目標(biāo)是先挖掘出業(yè)務(wù)需求，再進(jìn)行更細(xì)節(jié)的原型設(shè)計。

B端信息設(shè)計涉及的頁面主要包括列表頁、表單頁、詳情頁和組織這些頁面的導(dǎo)航。列表頁又可分為內(nèi)容類（商品列表頁）、審核類（商品審核）和服務(wù)類（訂單列表頁）。

內(nèi)容列表頁一般可分為幾個區(qū)域：篩選區(qū)域、查看區(qū)域、操作區(qū)域。

篩選區(qū)域又分為Tab導(dǎo)航和篩選項，查看區(qū)域又分為列表區(qū)域、排序功能和分頁區(qū)域。列表頁的擴展功能有信息的通知和列表頁信息的導(dǎo)出。

將每個頁面畫為幾個大的區(qū)域，然后對每個區(qū)域進(jìn)行細(xì)分，逐層拆解下去（具體字段及操作），這樣能夠做到結(jié)構(gòu)化的分拆，不會顯得雜亂無章，而且也避免重復(fù)和遺漏。

整體設(shè)計原則和規(guī)范可以參考螞蟻設(shè)計：

https://ant.design/docs/spec/introduce-cn

1）整體

比如下方是一個商品的列表，全局的區(qū)域還要加上目錄欄，頂部的賬號通知等。

2）具體頁面內(nèi)容

具體內(nèi)容列表頁區(qū)域：篩選區(qū)域、查看區(qū)域、操作區(qū)域，這個布局也是基本通用。

3）篩選區(qū)域

阿里的螞蟻設(shè)計提供的設(shè)計，篩選區(qū)域有有差異，當(dāng)篩選內(nèi)容超出3行時可以進(jìn)行收起，刪選也需要提供重置功能，如下圖

4）查看區(qū)域

用戶查看列表的步驟是，通過篩選項查找內(nèi)容，這些內(nèi)容會顯示在列表區(qū)域。該列表區(qū)域可分成三部分，分別是識別、決策和操作。

5）操作區(qū)域

信息操作一般為增刪改查，可能還有其它一些操作，但這幾種最多，比如以下為一個家政服務(wù)培訓(xùn)學(xué)員的管理頁面的操作項目

以下是一些常用的參考內(nèi)容：

螞蟻可視化（數(shù)據(jù)可視化）： https://antv.vision/zh/

螞蟻設(shè)計（交互及設(shè)計規(guī)范，包含組件） ：https://ant.design/docs/spec/layout-cn

iconfont圖標(biāo)https://www.iconfont.cn/search/index?searchType=icon&q=%E4%B8%8B%E8%BD%BD