建站常識
互聯(lián)網(wǎng)界面設(shè)計模式
2010-08-25 08:02:00
封皮上是這樣描述本書的:想知道怎樣在今天的Web上創(chuàng)造偉大的用戶體驗(yàn)嗎?……本書以當(dāng)前最流行的Web站點(diǎn)為例,介紹了兩大良行之有效的Web界面設(shè)計模式。如果你想構(gòu)建或重構(gòu)站點(diǎn),并希望站點(diǎn)以豐富的交互為特色,那么本書就是你出奇制勝的寶典。
首先,這是一本工具書。
其次,這是自認(rèn)為一本比較糟糕的好書。好書,因?yàn)樗峁┝舜罅克悸放c操作辦法(“最佳實(shí)踐”的部分);糟糕的是平庸的用例和花里胡哨的組織(重復(fù)與濫用)。鑒于此,我廢棄書中巧言令色、不知所云的“六大原理”,按功能重新組織。另外,這本書定價80元,有點(diǎn)離譜。
正文之前,必須強(qiáng)調(diào):“偉大的用戶體驗(yàn)”并不等同于原理和模式的疊加,而是有選擇、有特色地按需部署?,F(xiàn)在的互聯(lián)網(wǎng)富交互技術(shù)已經(jīng)呈現(xiàn)泛濫之勢了。
一、鼠標(biāo)原理
涉及鼠標(biāo)的“直接操作”分類到鼠標(biāo)原理中。
1、懸停
懸停即現(xiàn),基于懸停顯示工具可以減少界面上的視覺干擾。設(shè)計時要避免任何元素的偏移;否則用戶的視線就到了不該到的地方。
2、單擊
“編輯”鏈接
頁內(nèi)單擊編輯內(nèi)容,一來,用戶不用離開頁面;二來,編輯時可以直接參考上下文。要么能讓用戶知道這里可以編輯,要么就加上“編輯”的字樣或按鈕。
3、雙擊
書中貌似沒提到這點(diǎn),但用過網(wǎng)上地圖的人(可能)知道,有“放大地圖”的功效。關(guān)于此條的建議同下。
4、右鍵
右鍵菜單,執(zhí)行任務(wù)就像應(yīng)用程序那么方便了。右鍵菜單一般不容易發(fā)現(xiàn),所以一定得具有可替代性。
5、拖放
拖放布局
拖放排序、布局和拖放處理任務(wù),符合用戶的心智模型。要適時地提示可以拖放,算好啟動拖放的距離單位(5像素)和時間單位(按住鼠標(biāo)0.5秒)。拖放時,用戶需要隨時獲得必要信息。
6、滾動
滾動實(shí)時加載新內(nèi)容
滾動實(shí)時加載新內(nèi)容,脫離翻頁的枷鎖?;趥€人所有的連續(xù)性內(nèi)容用這個辦法比較好。個人認(rèn)為,還應(yīng)該保證顯示的流暢性。比如,谷歌閱讀器和谷歌圖片搜索很流暢,而人人網(wǎng)和QQ空間老給人一卡一卡的感覺。
二、鍵盤原理
歸類方法同鼠標(biāo)原理。
1、實(shí)時建議
用戶不用輸完也許就能命中。一般而言,每輸入一個字符顯示一次反饋比較好。保證有足夠的有用信息基礎(chǔ)之上,選中建議條目也應(yīng)提供多種辦法:回車、上下箭頭和鼠標(biāo)單擊。我認(rèn)為,取消建議條目也應(yīng)如此。
2、自動完成
同上。個人認(rèn)為,自動完成對條目的精確性要求更高,一次也不宜給過多條目。
3、實(shí)時提示
比如用戶密碼強(qiáng)度。
三、顯示原理
顯示原理中包含的模式與鼠標(biāo)和鍵盤沒有直接聯(lián)系,它作為一種輔助效果,簡化交互,提升用戶體驗(yàn)。
1、聚焦
突顯界面變化。個人認(rèn)為,如果用得亂七八糟的話,還是別用了。
2、擴(kuò)展與隱藏
擴(kuò)展與隱藏
用不著的相關(guān)內(nèi)容或其他面板可以隱藏起來。這是一種很古老的技術(shù)了,用的時候要注意切換時的連貫性,硬生生地割裂畫面就不好了。
3、菜單按鈕
菜單按鈕
它提供默認(rèn)的按鈕操作,又有更多操作的提示,方便快捷。設(shè)計時,避免目標(biāo)過小,另一方面,保證鍵盤和移動設(shè)備能正常訪問。
4、流程處理
書中寫的是刪除一條評論時應(yīng)簡化步驟,保證在一個頁面之內(nèi)。這個……唔,現(xiàn)在都是這樣做的吧?什么,你還不是?
5、操作引導(dǎo)
有了新功能(商品),或者網(wǎng)站改版,用靜態(tài)(或動態(tài))頁面引導(dǎo)用戶學(xué)習(xí)、認(rèn)識。靜態(tài)頁面引導(dǎo)可以利用未完成的區(qū)域引導(dǎo)用戶操作,人類的天性會促使用戶想“完成”它。動態(tài)引導(dǎo)(比如小氣泡什么的)則該簡明扼要、過程簡單。我認(rèn)為,還要能屏蔽引導(dǎo)或再次打開引導(dǎo)。
6、部件嵌入
個人認(rèn)為,添加了這樣部件(比如購物車或聊天窗口),能在訪問多頁面的同時,集中某個任務(wù)的操作。
7、彈出層
彈出層
書中用詞是“覆蓋層”,我認(rèn)為“彈出層”更通俗。有了彈出層,便可以在文本流中處理任務(wù),省去了跳轉(zhuǎn)頁面的麻煩。相比彈窗,它占用資源少,速度快,更容易控制樣式。可以用作“確認(rèn)對話框”、“詳細(xì)信息”和“輸入覆蓋”等。
8、定時刷新
定時刷新無須用戶介入就可以保持站點(diǎn)內(nèi)容新鮮,極其方便。唯一需要注意的是,刷新不能太頻繁,要在易讀和關(guān)聯(lián)之間尋求平衡。
9、其他動畫效果
這一點(diǎn)夾雜在書中各個角落,無非是淡入淡出、平移滑動之類的效果。適當(dāng)?shù)木Y飾,網(wǎng)站的流暢性和用戶體驗(yàn)肯定上一個檔次。
原文:http://cuikai-wh.com/archives/702
近期更新
- [2023-06-25 23:22:29] 優(yōu)秀網(wǎng)站設(shè)計的五大特點(diǎn)
- [2023-04-27 14:05:55] Html 5 響應(yīng)式網(wǎng)站設(shè)計制作
- [2023-04-10 11:07:30] 網(wǎng)站建設(shè)制作流程知多少
- [2022-10-14 10:11:30] 做網(wǎng)站設(shè)計應(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è)計的好看,這個網(wǎng)站就成功了一大半!
- [2022-05-20 09:34:19] 網(wǎng)站后臺管理系統(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è)計都有哪些新的趨勢?
延伸閱讀
- [2007-05-18 12:10:00] 網(wǎng)絡(luò)界面設(shè)計中的批判性思維
- [2010-03-13 16:00:00] 商務(wù)Web應(yīng)用程序的界面設(shè)計(譯文)
- [2006-02-24 20:25:00] 好萊塢電影網(wǎng)站界面設(shè)計師談電影網(wǎng)站設(shè)計
- [2008-01-05 18:04:00] 注冊登錄界面設(shè)計的八種錯誤表現(xiàn)
- [2009-07-13 07:48:00] 良好的用戶界面設(shè)計
- [2008-01-28 17:53:00] 人機(jī)交互界面設(shè)計的三個工作流程
- [2010-07-15 15:55:00] 泛泛而談界面中的斑馬紋設(shè)計
- [2007-01-15 16:18:00] 網(wǎng)頁界面設(shè)計教程七:動畫設(shè)計
- [2007-01-15 16:15:00] 網(wǎng)頁界面設(shè)計教程四:色彩設(shè)計
- [2009-09-15 22:23:00] 用戶界面設(shè)計10原則
- [2007-01-15 16:13:00] 網(wǎng)頁界面設(shè)計教程三:圖形圖象設(shè)計
- [2007-01-15 16:17:00] 網(wǎng)頁界面設(shè)計教程六:版式的構(gòu)成與設(shè)計
解決方案
輪胎行業(yè)網(wǎng)站設(shè)計解決方案 機(jī)械行業(yè)網(wǎng)站設(shè)計解決方案 房地產(chǎn)行業(yè)網(wǎng)站設(shè)計解決方案 科技企業(yè)網(wǎng)站設(shè)計解決方案 電子家電網(wǎng)站設(shè)計解決方案 食品行業(yè)網(wǎng)站設(shè)計解決方案 集團(tuán)公司網(wǎng)站設(shè)計解決方案 企事業(yè)單位網(wǎng)站設(shè)計解決方案 外貿(mào)行業(yè)網(wǎng)站設(shè)計解決方案 健身運(yùn)動網(wǎng)站設(shè)計解決方案 美容與化妝品網(wǎng)站設(shè)計解決方案 建筑設(shè)計行業(yè)網(wǎng)站設(shè)計解決方案 物流行業(yè)網(wǎng)站設(shè)計解決方案
TAGS關(guān)鍵字
官網(wǎng)網(wǎng)站建設(shè) 青島不錯的英文網(wǎng)站建設(shè)公司 網(wǎng)站SEO php程序 插畫 SEO優(yōu)化 外貿(mào)網(wǎng)站建設(shè) 搜索引擎蜘蛛 網(wǎng)站建設(shè),手機(jī)網(wǎng)站 集團(tuán)官網(wǎng) 手機(jī)端的網(wǎng)站 網(wǎng)站制作 營銷策略 扁平化設(shè)計 robots 如何做網(wǎng)站優(yōu)化 膠南網(wǎng)站建設(shè)公司 海信網(wǎng)絡(luò)科技 青島網(wǎng)站建設(shè) 網(wǎng)站建設(shè)的步驟有哪些 青島SEO 青島網(wǎng)站SEO 良好的導(dǎo)航 微官網(wǎng)帶來的好處 H5 GOOGLE 舒適的界面 微信營銷的優(yōu)勢 集團(tuán)性網(wǎng)站 搜索引擎