一、交互設(shè)計(jì)是什么意思

交互設(shè)計(jì)（英文：Interaction Design，英文縮寫：IXD）, 是指設(shè)計(jì)人和產(chǎn)品或者服務(wù)互動(dòng)的一種機(jī)制，以用戶體驗(yàn)為基礎(chǔ)，使得最終用戶在使用產(chǎn)品時(shí)愉悅、符合自己的邏輯、有效完成并且高效的使用產(chǎn)品。交互設(shè)計(jì)努力去創(chuàng)造和建立的是人與產(chǎn)品及服務(wù)之間有意義的關(guān)系，以"在充滿社會(huì)復(fù)雜性的物質(zhì)世界中嵌入信息技術(shù)"為中心。交互系統(tǒng)設(shè)計(jì)的目標(biāo)可以從"可用性"和"用戶體驗(yàn)"兩個(gè)層面上進(jìn)行分析，關(guān)注以人為本的用戶需求。

二、交互設(shè)計(jì)的主要內(nèi)容

從用戶角度來說，交互設(shè)計(jì)是一種如何讓產(chǎn)品易用，有效而讓人愉悅的技術(shù)，它致力于了解目標(biāo)用戶和他們的期望，了解用戶在同產(chǎn)品交互時(shí)彼此的行為，了解"人"本身的心理和行為特點(diǎn)，同時(shí)，還包括了解各種有效的交互方式，并對(duì)它們進(jìn)行增強(qiáng)和擴(kuò)充。交互設(shè)計(jì)還涉及到多個(gè)學(xué)科，以及和多領(lǐng)域多背景人員的溝通。交互設(shè)計(jì)主要關(guān)注以下內(nèi)容：

1、文案

文案（尤其是交互中使用的文本，如按鈕上的文本）應(yīng)該有意義且易于理解。他們應(yīng)該向用戶傳達(dá)信息，但也不能用過多的信息淹沒用戶的認(rèn)知。

2、視覺表達(dá)

它涉及到用戶與之交互的圖形元素，如圖像、字體和圖標(biāo)。這些和文本信息相配合，補(bǔ)充性地向用戶傳達(dá)信息。

3、實(shí)體以及空間

用戶通過什么實(shí)體與產(chǎn)品進(jìn)行交互？一臺(tái)筆記本電腦，是帶鼠標(biāo)還是觸摸板？還是觸屏的智能手機(jī)？用戶在什么樣的物理空間內(nèi)這樣做？例如，用戶是站在擁擠的火車上，同時(shí)在智能手機(jī)上使用應(yīng)用程序，還是坐在辦公室的桌面上瀏覽網(wǎng)站？這些都會(huì)影響用戶和產(chǎn)品之間的交互。

4、時(shí)間

雖然這個(gè)維度聽起來有點(diǎn)抽象，但它主要指的是隨時(shí)間變化的媒體（動(dòng)畫，視頻，聲音）。動(dòng)作和聲音在向用戶的交互提供視覺和語音的反饋方面起著至關(guān)重要的作用。同樣值得關(guān)注的是用戶花費(fèi)在與產(chǎn)品交互上的時(shí)間：用戶能不能了解他們的進(jìn)度，或是否能在一段時(shí)間之后繼續(xù)他們的交互？

5、行為

這包括產(chǎn)品的機(jī)制：用戶如何在網(wǎng)站上執(zhí)行操作？用戶如何操作產(chǎn)品？換句話說，它體現(xiàn)了前面的維度是如何定義產(chǎn)品交互的。它還包括"反應(yīng)" —— 例如用戶對(duì)產(chǎn)品的情緒反應(yīng)或反饋。

三、交互設(shè)計(jì)的目的

通過對(duì)產(chǎn)品的界面和行為進(jìn)行交互設(shè)計(jì)，讓產(chǎn)品和它的使用者之間建立一種有機(jī)關(guān)系，從而可以有效達(dá)到使用者的目標(biāo)，這就是交互設(shè)計(jì)的目的。交互設(shè)計(jì)從"目標(biāo)導(dǎo)向"的角度解決產(chǎn)品設(shè)計(jì)：

1、要形成對(duì)人們希望的產(chǎn)品使用方式，以及人們?yōu)槭裁聪胗眠@種產(chǎn)品等問題的見解。

2、尊重用戶及其目標(biāo)。

3、對(duì)于產(chǎn)品特征與使用屬性，要有一個(gè)完全的形態(tài)，而不能太簡(jiǎn)單。

4、展望未來，要看到產(chǎn)品可能的樣子，它們并不必然就像當(dāng)前這樣 。

四、交互設(shè)計(jì)的原則

從用戶角度來說，交互設(shè)計(jì)是一種如何讓產(chǎn)品更易用，讓用戶更愉悅的產(chǎn)品設(shè)計(jì)。它致力于了解目標(biāo)用戶和他們的期望，了解用戶在同產(chǎn)品交互時(shí)彼此的行為，了解用戶心理和行為特點(diǎn)，在進(jìn)行交互設(shè)計(jì)中遵循尼爾森十大交互原則。

1、狀態(tài)可見原則

系統(tǒng)應(yīng)該讓用戶時(shí)刻清楚當(dāng)前發(fā)生了什么事情，也就是快速的讓用戶了解自己處于何種狀態(tài)、對(duì)過去發(fā)生、當(dāng)前目標(biāo)、以及對(duì)未來去向有所了解，一般的方法是在合適的時(shí)間給用戶適當(dāng)?shù)姆答?，防止用戶使用出現(xiàn)錯(cuò)誤。

2、環(huán)境貼切原則

網(wǎng)頁的一切表現(xiàn)和表述，應(yīng)該盡可能貼近用戶所在的環(huán)境（年齡、學(xué)歷、文化、時(shí)代背景），而不要使用第二世界的語言。《iPhone人機(jī)交互指南》里提到的隱喻與擬物化是很好的實(shí)踐。此外，還應(yīng)該使用易懂和約定俗成的表達(dá)。

3、用戶可控原則

用戶常常會(huì)誤觸到某些功能，我們應(yīng)該讓用戶可以方便的退出。這種情況下，我們應(yīng)該把"緊急出口"按鈕做的明顯一些，而且不要在退出時(shí)彈出額外的對(duì)話框，很多用戶發(fā)送一條消息、總會(huì)有他忽然意思到自己不對(duì)的地方，這個(gè)叫做臨界效應(yīng)；所以最好支持撤銷/重做功能。

4、一致性原則

對(duì)于用戶來說，同樣的文字、狀態(tài)、按鈕，都應(yīng)該出發(fā)相同的事情，遵從通用的平臺(tái)慣例；也就是，同一用語、功能、操作保持一致。產(chǎn)品的一致性包括：

(1)、結(jié)構(gòu)一致性：保持一種類似的結(jié)構(gòu)，新的結(jié)構(gòu)變化會(huì)讓用戶思考，規(guī)則的排列順序能減輕用戶的思考負(fù)擔(dān)；

(2)、色彩一致性：產(chǎn)品所使用的主要色調(diào)應(yīng)該是統(tǒng)一的，而不是換一個(gè)頁面顏色就不同；

(3)、操作一致性：能讓產(chǎn)品更新?lián)Q代時(shí)仍然讓影虎保持對(duì)原產(chǎn)品的認(rèn)知，減小用戶的學(xué)習(xí)成本；

(4)、反饋一致性：用戶在操作按鈕或者條目的時(shí)候，點(diǎn)擊的反饋效果應(yīng)該是一致的；

(5)、文字一致性：產(chǎn)品中呈現(xiàn)給用戶閱讀的文字大小、樣式、顏色、布局都應(yīng)該是一致的；

5、防錯(cuò)原則

比一個(gè)優(yōu)秀錯(cuò)誤提醒彈框更好的設(shè)計(jì)方式，是在這個(gè)錯(cuò)誤發(fā)生之前就避免它?？梢詭椭脩襞懦恍┤菀壮鲥e(cuò)的情況，活在用戶提交之前給他一個(gè)確認(rèn)的選項(xiàng)。在此，特別要注意再用戶操作具有毀滅性效果的功能時(shí)要有提示，防止用戶犯不可挽回的錯(cuò)誤。

6、易取原則

通過把組件、按鈕及選項(xiàng)可見化，來降低用戶的記憶負(fù)荷。用戶不需要記住各個(gè)對(duì)話框中的信息。軟件的使用指南應(yīng)該是可見的，且再合適的時(shí)候可以再次查看。

7、靈活高效原則

有經(jīng)驗(yàn)的用戶通常可以在人機(jī)交互的過程中迅速掌握系統(tǒng)，新手用戶則不行。要設(shè)計(jì)出完善的系統(tǒng)，同時(shí)滿足有經(jīng)驗(yàn)的用戶和經(jīng)驗(yàn)不足的新手，保持靈活高效。

8、優(yōu)美且簡(jiǎn)約原則

對(duì)話中的內(nèi)容應(yīng)該去除不相關(guān)的信息或幾乎不需要的信息。任何不相關(guān)的信息都會(huì)讓原本重要的信息更難被用戶察覺。

9、容錯(cuò)原則

幫助用戶從錯(cuò)誤中恢復(fù)，將損失降到最低。如果無法自動(dòng)挽回，則提供詳盡的說明文字和指導(dǎo)方向，而非代碼，比如404。

10、人性化幫助原則

即使系統(tǒng)不適用幫助文章是最好的，但我們也應(yīng)該提供一份幫助文檔。任何幫助信息都應(yīng)該可以方便地搜索到，以用戶的任務(wù)為核心，列出相應(yīng)的步驟，但文字不能太多。

五、交互設(shè)計(jì)的定律

1、菲茲原則（費(fèi)茨法則）

任意一點(diǎn)移動(dòng)到目標(biāo)中心位置所需時(shí)間與該點(diǎn)到目標(biāo)的距離和大小有關(guān)，距離越大時(shí)間越長，目標(biāo)越大時(shí)間越短。

菲茲原則（費(fèi)茨法則）

得到結(jié)論：越是重要按鈕，按鈕要越大，這樣操作時(shí)間就越短，越方便。位置距離用戶操作越近，這樣用戶越易點(diǎn)擊。

2、米勒定律（7±2法則）

米勒定律（7±2法則）是交互設(shè)計(jì)中一個(gè)常用的定律。1956年美國心理學(xué)家喬治·米勒對(duì)短時(shí)記憶能力進(jìn)行了定量研究，他發(fā)現(xiàn)人的短時(shí)記憶能力廣度為7±2個(gè)信息塊，記憶信息超過了該范圍就容易出錯(cuò)。這說明人的大腦短時(shí)記憶容量約為"7"，并在7+2與7-2之間浮動(dòng)，因此心理學(xué)家把這個(gè)神奇的記憶容量規(guī)律稱為"7±2法則"。由7±2法則我們可以得出，一般人接受新事物的記憶容量最多不會(huì)超過9。

米勒定律

3、席克定律

席克定律是一種心理物理學(xué)定律。用戶所面臨的選擇數(shù)量越多，做出選擇所花費(fèi)的時(shí)間就越長，在人機(jī)交互的界面中選項(xiàng)越多，意味著用戶做出決策的時(shí)間越長。

席克定律雖然給設(shè)計(jì)帶來的是克制，但也不能用于極端場(chǎng)景，妨礙用戶選擇，以"強(qiáng)奸"的方式強(qiáng)迫用戶遵照產(chǎn)品目標(biāo)去選擇，比如某產(chǎn)品退押金的流程設(shè)計(jì)，從發(fā)現(xiàn)退款按鈕到"好像申請(qǐng)成功"的過程，你是不是暗自吐槽過？當(dāng)然這里是站在用戶角度去看待這個(gè)設(shè)計(jì)，如果站在產(chǎn)品角度去審視它，會(huì)發(fā)現(xiàn)它是一個(gè)產(chǎn)品、交互、UI三者配合非常棒的案例。

席克定律

4、接近法則（親密性）

我們通常把位置相對(duì)靠近的事物當(dāng)成一個(gè)整體：

接近法則

同樣都是圓，在視覺呈現(xiàn)上你會(huì)認(rèn)為哪些是一組的呢？

接近法則的"權(quán)重"非常大，大到可以抵消其他法則，比如為上面的圓形添加顏色，甚至改變形狀，我們也會(huì)把接近圖形當(dāng)成一個(gè)組：

接近法則

接近法則也是格式塔理論中我們最為熟悉、最常用的一種法則，它描述的是觀察者看到彼此鄰近（空間或時(shí)間）的物體時(shí)，會(huì)將它們視為一個(gè)整體。在界面設(shè)計(jì)中，對(duì)信息的組織已經(jīng)離不開這個(gè)法則了，他在界面中所體現(xiàn)的就是把相關(guān)的信息塊組合在一起，不太相關(guān)的分離開，增強(qiáng)與區(qū)分元素之間的關(guān)聯(lián)性，所強(qiáng)調(diào)的是空間和位置。接近法則產(chǎn)生于群組，它可以減少信息設(shè)計(jì)的復(fù)雜性，對(duì)引導(dǎo)用戶的視覺流、便于用戶對(duì)界面的解讀起到至關(guān)重要的作用。

5、泰斯勒定律（復(fù)雜性守恒定律）

泰斯勒定律

泰斯勒定律又稱復(fù)雜性守恒定律，該定律認(rèn)為每一個(gè)過程都有其固有的復(fù)雜性，這個(gè)復(fù)雜性存在一個(gè)臨界點(diǎn)，超過了這個(gè)點(diǎn)就不能再簡(jiǎn)化了，你只能將固有的復(fù)雜性從一個(gè)地方移動(dòng)到另外一個(gè)地方。比如我們發(fā)現(xiàn)頁面的功能是必須的，但當(dāng)前的頁面信息過載，那么就需要將次要的功能收起或者轉(zhuǎn)移，但是你卻無法刪除他，只能想辦法權(quán)衡。

這一觀點(diǎn)主要被應(yīng)用在交互設(shè)計(jì)領(lǐng)域，作為一名以體驗(yàn)至上的交互設(shè)計(jì)師在面對(duì)復(fù)雜需求、復(fù)雜場(chǎng)景、復(fù)雜流程、復(fù)雜頁面的時(shí)候，如何在不影響業(yè)務(wù)和功能的情況下，保證用戶的使用體驗(yàn)。而不是為了所謂的頁面簡(jiǎn)潔、設(shè)計(jì)趨勢(shì)，就自以為是的刪除一些用戶認(rèn)為重要的東西，最終導(dǎo)致功能滿足不了用戶。

6、奧卡姆剃刀原理

奧卡姆剃刀原理

奧卡姆剃刀原理的核心思想為："切勿浪費(fèi)較多東西去做用較少東西同樣可以做好的事——如無必要，勿增實(shí)體，即簡(jiǎn)單有效原理"。

在功能性頁面設(shè)計(jì)過程中，在動(dòng)手前就要養(yǎng)成先理解用戶使用場(chǎng)景和行為的習(xí)慣。流程內(nèi)的引導(dǎo)盡量弱化于主流程，流程外的內(nèi)容，沒有必要的不要增加，這一點(diǎn)其實(shí)很重要，簡(jiǎn)單的頁面讓用戶一眼就能找到他們感興趣的內(nèi)容，使用戶瀏覽更舒適，更能專心于你要表達(dá)的內(nèi)容上。而復(fù)雜的頁面會(huì)讓用戶找不到信息的重點(diǎn)，容易分散用戶的視覺注意力，這些弊端加起來會(huì)影響用戶使用的效率。不管是實(shí)體、視覺還是認(rèn)知上，多余的設(shè)計(jì)元素，有可能造成失敗或者引發(fā)其他問題。

同時(shí)這個(gè)原理也強(qiáng)調(diào)了在相同的條件下，如果有兩種不同的方案，且沒有條件做AB測(cè)試、灰度測(cè)試，應(yīng)當(dāng)優(yōu)先選擇更簡(jiǎn)單、更合適的那個(gè)，如果連前提條件都不同，那就根本無從對(duì)比。當(dāng)下快節(jié)奏的移動(dòng)互聯(lián)網(wǎng)時(shí)代，每位產(chǎn)品設(shè)計(jì)者都需要在寸土寸金的屏幕上快速處理各自的需求，那么這個(gè)原理也會(huì)很實(shí)用。

這個(gè)原理還有視覺上的魅力，可以比喻成"修剪"設(shè)計(jì)中多余的元素、去除雜質(zhì)，最后的設(shè)計(jì)將會(huì)更嚴(yán)謹(jǐn)、更純粹，恰到好處的留白和清晰信息指引影響著用戶在使用產(chǎn)品過程中的重要感受。而設(shè)計(jì)需要從開始的發(fā)散，最終回歸到克制，因?yàn)槟闶巧虡I(yè)屬性的產(chǎn)品設(shè)計(jì)師。

7、新鄉(xiāng)重夫：防錯(cuò)原則

用戶在界面中發(fā)生的錯(cuò)誤大部分是由設(shè)計(jì)和開發(fā)過程中的疏忽造成的，而不能認(rèn)為是用戶操作疏忽（不能認(rèn)為用戶是xx）。因此，在設(shè)計(jì)中非常有必要考慮防錯(cuò)機(jī)制，尤其是用戶的操作具有毀滅性效果的功能時(shí)要有強(qiáng)提示和強(qiáng)確認(rèn)，防止用戶犯不可挽回的錯(cuò)誤。

六、交互設(shè)計(jì)的流程

1、需求挖掘與分析

在這個(gè)階段，交互設(shè)計(jì)師要配合產(chǎn)品經(jīng)理做好市場(chǎng)調(diào)研工作，深刻理解需求，因?yàn)橹挥欣斫饬诵枨?，才能做出符合自身產(chǎn)品特性的好設(shè)計(jì)。同時(shí)也要對(duì)競(jìng)品進(jìn)行一定的調(diào)研與分析，充分的競(jìng)品分析完善你的用戶場(chǎng)景，幫你更好地了解產(chǎn)品用戶。尋找你的產(chǎn)品與競(jìng)品之間的共通性及差異點(diǎn)，找到自己產(chǎn)品的競(jìng)爭(zhēng)優(yōu)勢(shì)，可以幫你清晰自身產(chǎn)品定位，打通自身產(chǎn)品賣點(diǎn)。

2、設(shè)計(jì)洞察與概念設(shè)計(jì)

剖析用戶，洞察設(shè)計(jì)機(jī)會(huì)點(diǎn)：拆解用戶需求，提出設(shè)計(jì)方案，解決用戶的問題。在這個(gè)階段，輔助各種方法、工具，如用戶畫像、用戶行為旅程，對(duì)用戶需求進(jìn)行深入解讀，弄清楚用戶真正的痛點(diǎn)，它們真正想要的是什么，并結(jié)合自己現(xiàn)在已有的商業(yè)、技術(shù)資源，我們當(dāng)前可以做什么，什么值得做，進(jìn)一步清晰產(chǎn)品定位。

3、產(chǎn)品設(shè)計(jì)功能/內(nèi)容規(guī)劃

細(xì)化產(chǎn)品功能、內(nèi)容，得出交互原型，進(jìn)行測(cè)試驗(yàn)證。這個(gè)階段，需要對(duì)產(chǎn)品的信息、功能進(jìn)行優(yōu)先級(jí)排布，進(jìn)一步細(xì)化產(chǎn)品形態(tài)，得出詳細(xì)的功能、流程設(shè)計(jì)，并畫出設(shè)計(jì)原型，交互Demo，并交與用戶測(cè)試。

(1)、信息架構(gòu)設(shè)計(jì)

在產(chǎn)品設(shè)計(jì)流程中，信息架構(gòu)主要用于對(duì)收集到的信息進(jìn)行分組和導(dǎo)航結(jié)構(gòu)的設(shè)計(jì)，方便用戶了解周邊環(huán)境，并快速找到自己想要的功能。信息架構(gòu)有【自上而下】和【自下而上】?jī)煞N分類方式。

(2)、功能與流程設(shè)計(jì)

產(chǎn)品功能的設(shè)計(jì)一般由產(chǎn)品經(jīng)理來完成，需要對(duì)用戶有深入的了解，知道用戶的細(xì)分場(chǎng)景有哪些，在這些細(xì)分場(chǎng)景下，用戶的關(guān)注對(duì)象有哪些，這些關(guān)注對(duì)象是由哪些要素構(gòu)成的，然后將這些要素抽象為用戶可操作的功能點(diǎn)。產(chǎn)品經(jīng)理可結(jié)合腦圖，一步步將功能模塊兒進(jìn)行細(xì)化，拆分成細(xì)小的功能點(diǎn)。在功能設(shè)計(jì)完備了之后，交互設(shè)計(jì)師需要將各個(gè)功能進(jìn)行連線，對(duì)功能之間的跳轉(zhuǎn)進(jìn)行設(shè)計(jì)，梳理功能流程及業(yè)務(wù)流程。并根據(jù)產(chǎn)品定位，結(jié)合用戶需求，劃分各個(gè)細(xì)分場(chǎng)景下的優(yōu)先級(jí)，將其拆分為一個(gè)個(gè)具體的頁面。

(3)、原型設(shè)計(jì)與測(cè)試

在功能與流程設(shè)計(jì)完備了之后，交互設(shè)計(jì)師需要通過交互原型的方式將頁面功能及交互流程得以呈現(xiàn)，這個(gè)過程中交互設(shè)計(jì)師需要完善具體的交互細(xì)節(jié)：頁面布局、交互動(dòng)效、icon大小都要在這個(gè)階段進(jìn)行完善與確定。并在原型設(shè)計(jì)完成之后，交與用戶測(cè)試，對(duì)產(chǎn)品的可用性、易用性進(jìn)行驗(yàn)證，以及前期的猜想是否正確，交互邏輯是否合理，產(chǎn)品的價(jià)值是否在測(cè)試當(dāng)中得到了良好展現(xiàn)…結(jié)合測(cè)試結(jié)果，調(diào)整交互原型。

4、產(chǎn)品開發(fā)支持

驗(yàn)證/追蹤在UI設(shè)計(jì)師完成了視覺設(shè)計(jì)之后，產(chǎn)品就到了開發(fā)測(cè)試的階段，在這個(gè)階段，交互設(shè)計(jì)師要配合開發(fā)人員、測(cè)試人員、UI設(shè)計(jì)師，對(duì)設(shè)計(jì)還原度、產(chǎn)品可用性進(jìn)行走查，推動(dòng)產(chǎn)品上線。

5、搜集用戶反饋階段

對(duì)于迭代中的產(chǎn)品來說，這一點(diǎn)需要持續(xù)關(guān)注。通常采用的方式是用戶調(diào)研、可用性測(cè)試、各種用戶反饋渠道搜集。交互設(shè)計(jì)師需要分析用戶反饋問題的合理性、是否需要優(yōu)化。對(duì)于值得重視的反饋，需要思考設(shè)計(jì)方案、推進(jìn)實(shí)現(xiàn)。

七、交互設(shè)計(jì)規(guī)范

當(dāng)產(chǎn)品規(guī)模大了之后就需要多個(gè)產(chǎn)品設(shè)計(jì)師協(xié)作完成整個(gè)產(chǎn)品，由于不同產(chǎn)品設(shè)計(jì)師之間的設(shè)計(jì)理念、設(shè)計(jì)方法、設(shè)計(jì)習(xí)慣的不同，協(xié)作完成的產(chǎn)品往往會(huì)導(dǎo)致產(chǎn)品一致性差，質(zhì)量參差不齊。這個(gè)時(shí)候會(huì)需要一份交互設(shè)計(jì)規(guī)范來規(guī)范和指導(dǎo)產(chǎn)品設(shè)計(jì)，從而保證產(chǎn)品設(shè)計(jì)的一致性，提升整體產(chǎn)品質(zhì)量。

1、頁面規(guī)范

頁面信息規(guī)范主要指頁面的靜態(tài)信息應(yīng)該遵循的規(guī)則，包括：

(1)、標(biāo)題規(guī)范

用于規(guī)定整個(gè)產(chǎn)品中所有不同層級(jí)不同功能的頁面應(yīng)該使用的標(biāo)題的規(guī)則。

(2)、新窗口鏈接規(guī)范

用于規(guī)定頁面鏈接是采用新窗口打開還是本窗口打開的規(guī)則。

(3)、圖片規(guī)范

用于規(guī)定圖片信息是否帶有alt title值，這些值又取自那里。

2、信息規(guī)范

交互提示規(guī)范主要用于規(guī)定在交互過程中交互的方式及其信息提示，包括：

(1)、預(yù)先信息提示

所有交互進(jìn)行前需要提供充分給用戶的預(yù)先應(yīng)該知道的提示信息。

a.表單提交類

表單提交的步驟，每個(gè)表單項(xiàng)的要求需要給出提示信息。（如密碼要多少多少位。搜索框鼓勵(lì)輸入什么內(nèi)容。）

b.謹(jǐn)慎類操作

一個(gè)操作對(duì)用戶來說需要慎重操作的。如扣除金幣等。需要預(yù)先提示。（如：扣除金幣的操作需要預(yù)先提示扣除金幣數(shù)目，以及當(dāng)前金幣是否足夠等等。）

c.差異化規(guī)則

當(dāng)一個(gè)功能的規(guī)則與用戶習(xí)慣的規(guī)則具有一定的差異或比較復(fù)雜時(shí)，需要給出提示。或者給出幫助鏈接。

(2)、操作信息提示

所有交互進(jìn)行中需要提供操作相關(guān)的提示。

A、操作確認(rèn)提示

一個(gè)操作涉及數(shù)據(jù)刪除，等需要謹(jǐn)慎操作的操作需要給出刪除確認(rèn)提示框。

B、操作錯(cuò)誤提示

當(dāng)用戶的操作不符合操作的規(guī)則，需要給出操作提示。（如評(píng)論字?jǐn)?shù)為0或超過限制字?jǐn)?shù)，搜索框未輸入內(nèi)容時(shí)提交）

(3)、結(jié)果信息提示

交互進(jìn)行后給出結(jié)果反饋是應(yīng)該給出適當(dāng)?shù)奶崾尽?

A、查詢類結(jié)果

任何信息列表、查詢結(jié)果，當(dāng)對(duì)應(yīng)信息無結(jié)果的時(shí)候需要給出有無結(jié)果狀態(tài)提示。

B、保存類結(jié)果

一個(gè)表單是用戶提交保存數(shù)據(jù)的。如設(shè)置個(gè)人資料。提交保存后需要給出提示。成功綠色、失敗紅色、普通灰色。

C、附加類結(jié)果

一個(gè)表單是對(duì)其他數(shù)據(jù)進(jìn)行附加的，如評(píng)論等。提交成功后應(yīng)直接跳轉(zhuǎn)到操作產(chǎn)生的結(jié)果展示部分。（如提交評(píng)論后應(yīng)該直接展示給用戶他提交的評(píng)論）

3、控件規(guī)范

當(dāng)有一些功能會(huì)被多個(gè)模塊復(fù)用的時(shí)候（如標(biāo)準(zhǔn)評(píng)論框、標(biāo)準(zhǔn)好友選擇器等），需要把這些功能提煉出來設(shè)計(jì)成通用控件被多個(gè)模塊共用。

有了頁面信息規(guī)范、交互信息規(guī)范、通用控件規(guī)范就能保證頁面信息的一致、交互方式及提示的一致、通用功能模塊一致。從而保證產(chǎn)品的一致性，并提高產(chǎn)品質(zhì)量。

八、交互設(shè)計(jì)常用工具

1、axure 原型工具

Axure是交互設(shè)計(jì)師最核心的工具，Web端產(chǎn)品使用較多。通過它輸出的"原型"（交互稿）是交互設(shè)計(jì)師與產(chǎn)品經(jīng)理、前端開發(fā)、后端開發(fā)、測(cè)試等人員溝通的最好媒介。"原型"是產(chǎn)品開發(fā)前期的重要設(shè)計(jì)內(nèi)容，它直觀的體現(xiàn)了產(chǎn)品的框架結(jié)構(gòu)、界面內(nèi)容以及功能模塊之間的邏輯關(guān)系，且不斷確認(rèn)產(chǎn)品中的模糊部分，為后續(xù)的視覺設(shè)計(jì)，產(chǎn)品開發(fā)提供了準(zhǔn)確的產(chǎn)品信息。主要功能除了繪制"原型設(shè)計(jì)圖"，還包括"操作流程圖"、"信息架構(gòu)圖"等其它內(nèi)容。

2、Sketch （蘋果電腦）

Sketch大部分功能和操作思路，和Axure是一樣的，如果我們期待做更精致的原型界面，或者出高保真原型時(shí)，sketch是個(gè)很好的工具。各種方便的插件，大大提升了工作效率。目前工作過的團(tuán)隊(duì)基本UI設(shè)計(jì)都是使用的sketch，如果大家使用同一種工具，那么在交流、修改等時(shí)間成本上就會(huì)快很多。

3、Xmind or Mindmanager思維導(dǎo)圖工具

XMind/mindmanager是非常實(shí)用的思維導(dǎo)圖軟件，簡(jiǎn)單易用，功能強(qiáng)大。在進(jìn)行產(chǎn)品規(guī)劃，頭腦風(fēng)暴，任務(wù)分析等工作時(shí)，都需要借助XMind來完成。XMind的文件可以導(dǎo)出成Word，PPT，PDF，圖片等格式，方便將內(nèi)容與其他人共享。

4、Viso

viso這款工具主要是用于繪制流程圖，操作簡(jiǎn)單易懂，小伙伴們上手練練就能懂。另外就是ProcessOn，這是一個(gè)在線作圖工具的聚合平臺(tái)，它可以在線畫流程圖、思維導(dǎo)圖、UI原型圖、UML、網(wǎng)絡(luò)拓?fù)鋱D、組織結(jié)構(gòu)圖等等，無需擔(dān)心下載和更新的問題，不管Mac還是Windows，一個(gè)瀏覽器就可以隨時(shí)隨地的發(fā)揮創(chuàng)意，規(guī)劃工作。

5、Figma

Figma是一個(gè)基于瀏覽器的在線工具，與墨刀相似，現(xiàn)在也有桌面版，個(gè)人版免費(fèi)；界面與Sketch相仿，可以制作可交互原型。在國外是時(shí)下最多人用的交互設(shè)計(jì)軟件之一。但Figma只有英文版，對(duì)網(wǎng)絡(luò)也有要求。很好用的一個(gè)交互工具，只是目前在國內(nèi)不好推廣。

6、MockingBot 墨刀

墨刀是一款在線原型設(shè)計(jì)與協(xié)同工具，以前只有網(wǎng)頁版，現(xiàn)在也有客戶端，但都需要聯(lián)網(wǎng)使用。有點(diǎn)類似于Figma，國產(chǎn)中文版的一款很好的交互設(shè)計(jì)軟件。

優(yōu)點(diǎn)：墨刀上手難度不高，墨可以實(shí)現(xiàn)元素切換、界面跳轉(zhuǎn)，動(dòng)效平滑，可以調(diào)試參數(shù)；支持win和mac，有桌面版，支持移動(dòng)端預(yù)覽（iOS&AndROId），有Sketch插件等。

不足：也是無法實(shí)現(xiàn)條件判斷等復(fù)雜交互邏輯（不過這對(duì)于很多項(xiàng)目來說也不一定要做出來，有時(shí)間成本和學(xué)習(xí)難度）。

7、Mockplus

Mockplus（摹客）是一款簡(jiǎn)潔快速的原型圖設(shè)計(jì)工具。適合制作低保真原型，界面簡(jiǎn)單，能夠快速上手。

優(yōu)點(diǎn)：界面簡(jiǎn)潔，快速上手，有交互組件可用，可生成單獨(dú)的壓縮包，打開即可演示。摩客還有一個(gè)原型托管平臺(tái)，也挺方便，不過要收費(fèi)~

缺點(diǎn)：無法實(shí)現(xiàn)復(fù)雜邏輯如條件判斷等情況的交互，市面上可用的組件較少；適合做手機(jī)的簡(jiǎn)單原型，不適合做網(wǎng)頁的原型。2年前用過，不知道現(xiàn)在這么樣，平臺(tái)收費(fèi)，開發(fā)運(yùn)維不易，支持國產(chǎn)。

總結(jié)

優(yōu)化猩SEO：交互設(shè)計(jì)強(qiáng)調(diào)的是互動(dòng)設(shè)計(jì)，也即是用戶體驗(yàn)的概念設(shè)計(jì)，交互設(shè)計(jì)可以使一個(gè)產(chǎn)品設(shè)計(jì)更合理更符合用戶體驗(yàn)，一個(gè)研發(fā)團(tuán)隊(duì)如有條件增加交互設(shè)計(jì)崗位對(duì)提升產(chǎn)品質(zhì)量具有一定的幫助作用。

參考鏈接：

交互設(shè)計(jì)（一種設(shè)計(jì)）_百度百科

https://baike.baidu.com/item/%E4%BA%A4%E4%BA%92%E8%AE%BE%E8%AE%A1/7769950

尼爾森十大交互設(shè)計(jì)原則 - 簡(jiǎn)書

https://www.jianshu.com/p/3b4f968c6dc0

交互設(shè)計(jì)主要做什么，交互設(shè)計(jì)的五個(gè)維度_HMI設(shè)計(jì)

http://www.faceui.com/hmi/detail/765.html

一文讀懂交互設(shè)計(jì)7大定律 設(shè)計(jì)達(dá)人

https://www.shejidaren.com/7-laws-of-interaction-design.html

修改于2023-08-26