国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

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

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

1. 交互設(shè)計(jì)

1）尼爾森十大交互原則

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

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

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

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

（2）貼近場(chǎng)景原則（Match between system and the real world）

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

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

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

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

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

（5）防錯(cuò)原則（Error prevention）

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

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

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

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

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

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

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

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

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

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

比如財(cái)務(wù)流水相關(guān)的列表，則不需要放太多商品相關(guān)的詳細(xì)信息，比如規(guī)格等，因?yàn)檫@個(gè)地方主要關(guān)注資金的信息

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1）整體

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

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

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

3）篩選區(qū)域

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

4）查看區(qū)域

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

5）操作區(qū)域

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

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

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

螞蟻設(shè)計(jì)（交互及設(shè)計(jì)規(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