建站常識(shí)
細(xì)節(jié)決定成敗 總結(jié)項(xiàng)目中的交互設(shè)計(jì)
2009-06-23 08:11:00
總結(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í)支持再次搜索。
#p#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
近期更新
- [2023-06-25 23:22:29] 優(yōu)秀網(wǎng)站設(shè)計(jì)的五大特點(diǎn)
- [2023-04-27 14:05:55] Html 5 響應(yīng)式網(wǎng)站設(shè)計(jì)制作
- [2023-04-10 11:07:30] 網(wǎng)站建設(shè)制作流程知多少
- [2022-10-14 10:11:30] 做網(wǎng)站設(shè)計(jì)應(yīng)該更看重框架搭建還是視覺觀感?
- [2022-08-09 15:57:48] 以“產(chǎn)品”思維搭建網(wǎng)站!
- [2022-08-08 09:12:57] 一家公司的網(wǎng)站應(yīng)該有哪些板塊內(nèi)容?
- [2022-08-05 09:28:06] 企業(yè)網(wǎng)站建設(shè)為什么要設(shè)置新聞板塊?
- [2022-07-04 15:58:06] 網(wǎng)站首頁設(shè)計(jì)的好看,這個(gè)網(wǎng)站就成功了一大半!
- [2022-05-20 09:34:19] 網(wǎng)站后臺(tái)管理系統(tǒng)是什么?有什么作用?
- [2022-05-17 11:29:32] 作為消費(fèi)者,應(yīng)該如何選擇一家水平高的網(wǎng)站建設(shè)公司
- [2022-05-17 11:27:01] 高端網(wǎng)站定制與模板化網(wǎng)站應(yīng)該怎么選擇?
- [2022-04-22 16:00:41] 現(xiàn)在高端的網(wǎng)站設(shè)計(jì)都有哪些新的趨勢(shì)?
延伸閱讀
- [2010-08-24 17:38:00] 頭像web版交互設(shè)計(jì)總結(jié)
- [2021-01-15 17:23:46] 建設(shè)網(wǎng)站細(xì)節(jié)也十分重要
- [2010-06-29 15:19:00] 妖文化凝粹——QQ西游官網(wǎng)改版紀(jì)實(shí)
- [2009-09-25 07:53:00] 背著包袱跳著走
- [2008-01-27 09:58:00] 交互設(shè)計(jì)中的視覺引導(dǎo)
- [2010-01-19 11:11:00] 交互設(shè)計(jì)(6)–突出重點(diǎn),一目了然
- [2010-10-12 08:39:00] 合理限制用戶的操作
- [2009-12-17 11:55:00] 淺談白社會(huì)交互設(shè)計(jì)的創(chuàng)新(一)
- [2010-12-28 08:25:00] 正確的引導(dǎo)(一)
- [2009-11-04 22:35:00] 交互設(shè)計(jì)表格
- [2009-06-19 08:15:00] 用戶不會(huì)記得點(diǎn)了多少下
- [2009-07-31 22:54:00] 交互設(shè)計(jì)模式——分頁
解決方案
輪胎行業(yè)網(wǎng)站設(shè)計(jì)解決方案 機(jī)械行業(yè)網(wǎng)站設(shè)計(jì)解決方案 房地產(chǎn)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 科技企業(yè)網(wǎng)站設(shè)計(jì)解決方案 電子家電網(wǎng)站設(shè)計(jì)解決方案 食品行業(yè)網(wǎng)站設(shè)計(jì)解決方案 集團(tuán)公司網(wǎng)站設(shè)計(jì)解決方案 企事業(yè)單位網(wǎng)站設(shè)計(jì)解決方案 外貿(mào)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 健身運(yùn)動(dòng)網(wǎng)站設(shè)計(jì)解決方案 美容與化妝品網(wǎng)站設(shè)計(jì)解決方案 建筑設(shè)計(jì)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 物流行業(yè)網(wǎng)站設(shè)計(jì)解決方案
TAGS關(guān)鍵字
青島黃島、紅島網(wǎng)站建設(shè)公司 官網(wǎng)網(wǎng)站建設(shè) 青島IT資訊 新的元素 青島不錯(cuò)的英文網(wǎng)站建設(shè)公司 青島好的網(wǎng)站優(yōu)化公司 青島網(wǎng)絡(luò)公司 企業(yè)網(wǎng)站建設(shè) 海信網(wǎng)絡(luò)科技 網(wǎng)站品牌 搜索引擎 網(wǎng)站動(dòng)畫 青島網(wǎng)站優(yōu)化 SEO優(yōu)化 青島網(wǎng)站案例 網(wǎng)站設(shè)計(jì)趨勢(shì) H5 平面設(shè)計(jì) 外貿(mào)網(wǎng)站設(shè)計(jì) 舒適的界面 網(wǎng)站的速度 審美 青島輪胎網(wǎng)站設(shè)計(jì)公司 青島網(wǎng)站設(shè)計(jì)哪家好 青島flash網(wǎng)站 膠南網(wǎng)站建設(shè)公司 青島高端網(wǎng)站建設(shè)公司哪家好 青島網(wǎng)站制作 H5專題頁面 集團(tuán)公司網(wǎng)站建設(shè)