總結(jié)一下這次項(xiàng)目設(shè)計(jì)過程中的交互,（因?yàn)轫?xiàng)目沒上線，所以不能透漏項(xiàng)目的名稱）雖然某些上線前實(shí)現(xiàn)不了。

1:使可點(diǎn)擊的元素看起來都是可點(diǎn)擊的.

對(duì)象本身的靜態(tài)視覺啟示:

全站統(tǒng)一的鏈接顏色,鏈接顏色與普通文字的顏色要有明顯的區(qū)別;

按扭有立體效果,看起來像按扭;

動(dòng)態(tài)改變對(duì)象的視覺啟示，光標(biāo)經(jīng)過對(duì)象時(shí)改變光標(biāo)的視覺啟示:

鼠標(biāo)滑過鏈接的下劃線;鼠標(biāo)滑過圖標(biāo)的視覺變化;

圖標(biāo)與文字的組合,鼠標(biāo)滑過顯示的熱點(diǎn)區(qū)域應(yīng)包含圖標(biāo),而不僅僅是鏈接.

按扭和鏈接滑過的光標(biāo)啟示為手形,普通文字的光標(biāo)啟示為"工"形.這樣的習(xí)慣用法，用戶會(huì)很清晰此處不可點(diǎn)擊，但可復(fù)制。

2:盡量使每個(gè)操作都有可撤消的功能,避免使用"確認(rèn)"的彈出框.減少人機(jī)的交互.例如刪除功能,當(dāng)用戶單擊刪除時(shí),80%的用戶是確認(rèn)要?jiǎng)h除,彈出確認(rèn)的操作是沒有必要的.撤消功能的出現(xiàn)使20%用戶可能出現(xiàn)的誤操作可以撤消.又不會(huì)讓80%的用戶受到彈出框的打擾。

3:在視覺上表現(xiàn)元素之間平行(同一層次),包含(上下等級(jí))的關(guān)系.

平行關(guān)系通過元素之間的間距來體現(xiàn);

包含關(guān)系通過元素之間的縮進(jìn)來表現(xiàn);

4:使操作與結(jié)果的反饋更順暢.

通過排序的方式，如下圖：

上圖中，操作在上面，結(jié)果在下面，所以排序的方式，應(yīng)該是最新的記錄與輸入框的距離最近。越老的記錄與輸入框的距離越遠(yuǎn)，因?yàn)樽钚碌慕Y(jié)果此時(shí)在用戶視覺的中心。

再看下圖：結(jié)果在上面，操作在下面，則排序的方式與上圖的相反。也是因?yàn)橐曈X中心所在位置的緣故。

好友搜索，結(jié)果在當(dāng)前頁中顯示。

搜索結(jié)果與搜索條件在同一頁面顯示，比頁面跳轉(zhuǎn)的交互會(huì)更好，同時(shí)支持再次搜索。

5：功能的隱藏與顯示

功能的顯示是用戶一眼能看到的功能，功能的隱藏是鼠標(biāo)滑過才顯示或者完全取消某個(gè)功能。

功能的隱藏與顯示取決的不完全是視覺（因?yàn)榻?jīng)常聽到：“功能全顯示出來，不好看呀”），有時(shí)候取決于用戶的目標(biāo)。

在群共享中，用戶到此處的目的是上傳和下載文件，而不是僅僅查看文件列表。所以上傳和下載的功能應(yīng)該是顯示的，而不是鼠標(biāo)滑過才顯示。

又例如查看我所有的群：此時(shí)查看群的資料是重點(diǎn)，所以此時(shí)群的名稱，號(hào)碼，群類型，創(chuàng)建人及時(shí)間，群簡(jiǎn)介是最重要的，應(yīng)該完全顯示出來。而“邀請(qǐng)群成員“，”退出群“不是主要目標(biāo)，如果顯示，會(huì)給用戶造成視覺上的干擾，沒必要顯示。

在群成員管理中，對(duì)群成員的管理是用戶的目標(biāo)， “邀請(qǐng)群成員“”設(shè)置/取消管理員“”刪除群成員“應(yīng)該顯示，而不應(yīng)該隱藏。有興趣可以看我之前的文章：關(guān)于轉(zhuǎn)讓群的問題的一次交流

功能的隱藏與顯示有些時(shí)候取決于某個(gè)功能是否經(jīng)常使用，交互設(shè)計(jì)精髓一書中提到“常用的功能應(yīng)該就在手邊”。在群首頁中，對(duì)于管理員來說：群公告邀請(qǐng)群成員 是經(jīng)常操作的功能，所以應(yīng)該讓“管理員”一眼能看到這個(gè)功能。群公告最好能支持直接在首頁修改，而不是跳轉(zhuǎn)到群設(shè)置/群資料下修改。

功能的顯示與隱藏還涉及你面對(duì)的用戶群。常用的功能應(yīng)該顯示，高級(jí)的或者危險(xiǎn)的操作應(yīng)該隱藏得深一點(diǎn)，但又不被忽略，要考慮到高級(jí)用戶和其他用戶的需要。

6：采用非模態(tài)的提示，避免無禮的彈出框。

對(duì)話框缺點(diǎn):
使用者被迫在主窗口和很多對(duì)話框中跳來跳去,不可避免地帶來疲勞和沮喪.
將操作臨時(shí)轉(zhuǎn)移到了主流程之外,屏棄了用戶的主要關(guān)注點(diǎn).
對(duì)話框也打斷了用戶和程序之間順利交流的和諧,并且讓用戶對(duì)程序做出反映,而不是主動(dòng)駕駛于程序.

這種方式基本上是借鑒白社會(huì)的，有興趣可以看我的上一篇文章：值得借鑒的白社會(huì)的交互設(shè)計(jì)。

7:關(guān)于表單的設(shè)計(jì)

如下圖：

必填項(xiàng)應(yīng)該有明確的標(biāo)識(shí)，例如“*”，有些網(wǎng)站采用在必填項(xiàng)后面跟上（必填）的文字，個(gè)人覺得視覺上不夠明顯。使用“*”應(yīng)該有相應(yīng)的提示，例如我的表單上就會(huì)提醒用戶“帶*為必填內(nèi)容”。

在有界表單（數(shù)據(jù)限制）的旁邊應(yīng)該有提示，而且又不會(huì)干擾用戶的視覺，在此處，我采用了淺灰色的提示，提醒用戶可輸入數(shù)據(jù)的界限。

輸入框的大小（寬和高），當(dāng)為有界表單的時(shí)候，表單的長(zhǎng)度應(yīng)盡量等于可輸入的數(shù)據(jù)的長(zhǎng)度。當(dāng)都不是有界表單的時(shí)候，才可以考慮把所有表單對(duì)齊。

關(guān)于表單的錯(cuò)誤提示：

當(dāng)用戶產(chǎn)生錯(cuò)誤的時(shí)候，除了提示出錯(cuò)，還應(yīng)該給出解決方案，或者間接引導(dǎo)用戶更正錯(cuò)誤。

例如輸入數(shù)值的長(zhǎng)度超出限制的時(shí)候，應(yīng)該提示為“輸入的文字過長(zhǎng)，超出了N個(gè)字。”

有時(shí)幾個(gè)選項(xiàng)一起被檢測(cè)的時(shí)候，提示信息應(yīng)該為具體某個(gè)選項(xiàng)發(fā)生了錯(cuò)誤，而不應(yīng)該籠統(tǒng)的提示”輸入錯(cuò)誤“。

在填寫密碼的時(shí)候，當(dāng)按下了"Scroll Lock"鎖定鍵，最好也能給出提示。上次看某個(gè)同學(xué)就寫了篇關(guān)于大小寫鎖定鍵提示的文章。不過很多網(wǎng)站沒有做到。

系統(tǒng)對(duì)用戶輸入數(shù)據(jù)的檢測(cè)，應(yīng)該在提交表單前做檢測(cè)。發(fā)生錯(cuò)誤及時(shí)給出提示，以便用戶修改。如果提交表單后檢測(cè)，則用戶需要等待一些時(shí)間才發(fā)現(xiàn)錯(cuò)誤，然后更正，則增加了一次提交表單的等待時(shí)間。

8:關(guān)于窗口的問題

交互設(shè)計(jì)中提到幾個(gè)窗口的設(shè)計(jì)原則:

①把主要的交互操作放在主窗口中.
以目標(biāo)為導(dǎo)向,目標(biāo)有使用產(chǎn)品的總體目標(biāo)(全局目標(biāo)),和去到某個(gè)頁面的操作目標(biāo)(局部目標(biāo)),跟目標(biāo)相關(guān)的功能應(yīng)該都放在主窗口中.以群共享為列:在此頁面中,上傳,下載是主要目的,則此時(shí),上傳和下載的操作就應(yīng)該是在主窗口中.
 
②對(duì)話框適應(yīng)于那些主交互流以外的功能(任何可能會(huì)讓人覺得困惑,危險(xiǎn)或者很少使用的功能放在對(duì)話框中)
例如解散群中,2次輸入密碼完全可以在主窗口中進(jìn)行,這樣能減少用戶與機(jī)器的交互,但是解散群屬于危險(xiǎn)的,不可恢復(fù)的功能,所以須彈出窗口,予以警示.讓用戶的操作更慎重.
 
③對(duì)話框非常適合用來整理關(guān)于某個(gè)主題相關(guān)的對(duì)象或應(yīng)用功能.(學(xué)習(xí)的途徑)
④在功能對(duì)話框的標(biāo)題中使用動(dòng)詞;
⑤在屬性對(duì)話框的標(biāo)題中使用對(duì)象名;
④和⑤講到的是關(guān)于窗口的命名問題,在刪除某個(gè)帖子的時(shí)候,窗口的命名應(yīng)該為"刪除帖子",而不應(yīng)該是"提示".

9:關(guān)于搜索

搜索可以細(xì)節(jié)到搜索前,搜索后.

搜索前主要是表現(xiàn)形式上的處理.

★必須向用戶明示搜索范圍,如下圖的"輸入群名稱/群號(hào)碼/關(guān)鍵字",則是搜索范圍.

★類型的選擇:此處設(shè)計(jì)為全部類型,目的是:其1為即使用戶不輸入任何條件的情況下,用戶也能得到搜索結(jié)果,其2,有些關(guān)鍵字很難界定它所屬的范圍.

★搜索按扭的設(shè)計(jì),應(yīng)該立體一些,一眼就明白是可以點(diǎn)擊的,這里的效果還可以再做些改進(jìn)(本文的第1點(diǎn)也提到過).按扭上的文字是"搜索",而不應(yīng)該是其他的"查找","search".這是習(xí)慣,<<別讓我思考>>一書中也提到過.

搜索后是關(guān)于搜索結(jié)果的處理與搜索結(jié)果的展示:

搜索結(jié)果有3種情況:

1是用戶找到他想要的信息,這是最好的結(jié)果;

2是結(jié)果太多,用戶需要再次過濾;.(在寫這篇文章的時(shí)候,我們的項(xiàng)目在搜索這塊還需優(yōu)化,只能借鑒其他的網(wǎng)站.),還是以白社會(huì)為例:如下圖中的提示,"結(jié)果過多時(shí)，可以試試搜索框上方的其他查找方法",便是一種引導(dǎo),不過這做得還不夠好,因?yàn)槲矣X得應(yīng)該是對(duì)搜索結(jié)果的再次過濾,比如,增加搜索條件,在年齡,性別,在線等方面進(jìn)行過濾,而不是引導(dǎo)進(jìn)行其他方式的搜索.

3是結(jié)果為空,需要引導(dǎo)用戶重新搜索.這點(diǎn)白社會(huì)做得比較好,在下圖中,錯(cuò)誤信息上的搜索框和"更多尋找好友的便捷方式"都是再次引導(dǎo)搜索,不過我覺得文案還可以再優(yōu)化一下,"沒有找到相關(guān)結(jié)果,試試其他關(guān)鍵字或下面的查找方式".

還沒寫完，不一定很正確，本人的經(jīng)驗(yàn)加書上的理論結(jié)合，歡迎大家拍磚。

原文：http://ucdchina.com/snap/3864