原文地址:http://hi.baidu.com/webwatch/blog/item/9393861b97adeff8ae51335d.html
本文試圖闡述WEB交互頁面設計的一些指導性原則,這些原則有利于避免發生不愉快的操作體驗。這些原則是用戶友好性的,是在完成同一種操作要求下,使用戶最感到輕松、簡單、舒適的WEB交互界面設計原則。我們假定我們討論的WEB頁面都是功能正常的,符合美學觀點的。需要說明我們討論的原則可能會和設計上的美學觀點以及既有的功能設計有所沖突。如果發生這種情況,基于“實用的就是美的”觀點,我們會建議您酌情放棄原先的美學觀點與功能設計。
1. 輸入控件的自動聚焦和可用鍵盤切換輸入焦點
使用JavaScript實現頁面加載完成后立即自動聚焦(focus)到第一個輸入控件。可用TAB鍵(IE缺省實現)或方向鍵切換聚焦到下一個輸入控件。
2. 可用Enter(或Ctrl+Enter)鍵提交,確保和點擊提交按鈕的效果是相同的
不要在提交按鈕上加入onClick=”…”這樣的JavaScript代碼。
3.鼠標動作提示和回應
對用戶的鼠標定位操作,當移動到可響應的位置上時,應給予視覺或聽覺的提示。
4.盡可能早的在客戶端完成輸入數據合法性驗證
輸入數據的合法性檢驗應該在客戶端使用JavaScript進行驗證。除非驗證只能在服務器端完成,否則驗證工作應在最早能完成的情況下進行。
5.根據應用場景決定在表單頁面和提交后返回頁面間是否使用中間過渡頁面
根據應用場景,決定是否顯示接收表單頁面(表單頁面和提交后返回頁面間的中間過渡頁面),以及使用何種方式顯示接收表單頁面。
6.防止表單重復提交處理
對提交按鈕點擊后做變灰處理避免在網絡響應較慢情況下用戶重復提交同一個表單。使用頁面過期失效避免用戶后退瀏覽重復提交表單。
7.頁面鏈接是打開新窗口、使用原窗口還是彈出窗口的原則
一般而言,首頁上鏈接可以使用target=”_blank”屬性打開新窗口,而其他頁面上的鏈接都應使用原窗口或彈出窗口。如果鏈接頁面內容相對原頁面來說不重要,是附屬性質的,可以使用彈出窗口方式。
8.盡可能少的排列可選項,盡可能少的安排操作步驟
根據用戶操作習慣安排盡可能少的操作菜單選項,同時要保證盡可能少的操作步驟。
9.操作邏輯無漏洞,保證數據是操作安全的
多個頁面間的操作和同個頁面上的多個操作間的邏輯關系在設計上是安全和嚴謹的。保證不會出現不被允許的用戶操作組合,至少不會因為用戶的不適當的操作導致出錯。
| |||||||||
日 | 一 | 二 | 三 | 四 | 五 | 六 | |||
---|---|---|---|---|---|---|---|---|---|
28 | 29 | 30 | 1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 | |||
12 | 13 | 14 | 15 | 16 | 17 | 18 | |||
19 | 20 | 21 | 22 | 23 | 24 | 25 | |||
26 | 27 | 28 | 29 | 30 | 31 | 1 | |||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
生活將我們磨圓,是為了讓我們滾得更遠——“圓”來如此。
我的作品:
玩轉Axure RP (2015年12月出版)

Power Designer系統分析與建模實戰 (2015年7月出版)
Struts2+Hibernate3+Spring2 (2010年5月出版)
我的作品:
玩轉Axure RP (2015年12月出版)

Power Designer系統分析與建模實戰 (2015年7月出版)

Struts2+Hibernate3+Spring2 (2010年5月出版)

留言簿(263)
隨筆分類
- Ajax(3)
- Ant(1)
- Auto Code(4)
- Cewolf
- CMMI(1)
- CSS(2)
- CVS(1)
- database(15)
- Design Pattern(11)
- Eclipse BIRT(1)
- EJB
- extremecomponents(1)
- GIS(2)
- Hibernate(8)
- iBATIS(2)
- IDE(1)
- Inno Setup(2)
- IT評論(2)
- Java(36)
- Javascript(32)
- JBoss(1)
- JFreeChart(3)
- JFreeReport(3)
- JSF
- Linux(3)
- MySql(11)
- Open Source(4)
- Oracle(5)
- Other(13)
- Spring(12)
- Sql Server(1)
- Struts(7)
- Struts2(8)
- Tomcat
- UML
- Web(8)
- Web Service(3)
- Workflow
- 產品原型設計(8)
- 似水流年(13)
- 協議(12)
- 原創小說(1)
- 技術評論
- 架構師之路(12)
- 電信知識(3)
- 網絡通信相關(11)
- 職場感悟(6)
- 解決方案(12)
- 項目管理(8)
隨筆檔案
- 2016年3月 (2)
- 2015年11月 (1)
- 2015年9月 (1)
- 2015年6月 (3)
- 2015年5月 (4)
- 2014年12月 (2)
- 2014年7月 (1)
- 2014年6月 (1)
- 2014年5月 (2)
- 2014年1月 (2)
- 2013年10月 (1)
- 2013年8月 (1)
- 2013年7月 (1)
- 2013年4月 (1)
- 2013年2月 (1)
- 2012年11月 (2)
- 2012年10月 (1)
- 2012年1月 (1)
- 2011年11月 (8)
- 2011年10月 (4)
- 2011年9月 (1)
- 2011年8月 (2)
- 2011年7月 (5)
- 2011年2月 (2)
- 2011年1月 (1)
- 2010年12月 (3)
- 2010年11月 (9)
- 2010年9月 (1)
- 2010年7月 (2)
- 2010年6月 (2)
- 2010年5月 (5)
- 2010年4月 (2)
- 2009年12月 (4)
- 2009年11月 (2)
- 2009年10月 (1)
- 2009年9月 (3)
- 2009年8月 (5)
- 2009年7月 (5)
- 2009年5月 (1)
- 2008年10月 (3)
- 2008年9月 (3)
- 2008年8月 (1)
- 2008年6月 (2)
- 2008年5月 (3)
- 2008年4月 (2)
- 2008年2月 (2)
- 2008年1月 (11)
- 2007年12月 (9)
- 2007年11月 (7)
- 2007年10月 (9)
- 2007年9月 (12)
- 2007年8月 (24)
- 2007年7月 (10)
- 2007年6月 (2)
- 2007年5月 (3)
- 2007年4月 (18)
- 2007年3月 (24)
- 2007年2月 (24)
文章分類
相冊
關注blog
積分與排名
- 積分 - 2296322
- 排名 - 3
最新評論

- 1.?re: 新書推薦:《Power Designer系統分析與建模實戰》
-
你好。買了書,麻煩把書中的樣例工程文件發給我。非常感謝。
我的郵箱:wen027andy@163.com - --文良
- 2.?re: 新書推薦:《Power Designer系統分析與建模實戰》
-
@智祿
謝謝指出,下次改版修正:) - --阿蜜果
- 3.?re: 新書推薦:《Power Designer系統分析與建模實戰》
-
6.1.3 9.存儲函數
存儲函數與存儲函數類似,……
此處應該是:存儲函數與存儲過程類似,……
我買的是多看上的電子版,請修改
- --智祿
- 4.?re: 新書推薦:《Power Designer系統分析與建模實戰》
-
您好,今天買了您的這本書,為了更好的學習,麻煩將書中的樣例工程文件發給我,萬分感謝,感謝作者寫出這么好的書,我特別需要,祝大賣~~
yaozhilu@foxmail.com - --智祿
- 5.?re: 新書推薦:《Power Designer系統分析與建模實戰》
-
您好,書不錯,已經買了,麻煩發套樣例工程吧,最好詳細點的,萬分感激!
jackylee365@163.com - --李成龍
閱讀排行榜
- 1.?常用加密算法的Java實現總結(二)——對稱加密算法DES、3DES和AES(143718)
- 2.?用Ant實現Java項目的自動構建和部署(123992)
- 3.?異常備忘:java.lang.UnsupportedClassVersionError: Bad version number in .class file(114282)
- 4.?Java代碼規范、格式化和checkstyle檢查配置文檔(71836)
- 5.?常用加密算法的Java實現總結(一)——單向加密算法MD5和SHA(62394)
- 6.?通用權限管理系統設計篇(三)——概要設計說明書(61753)
- 7.?使用XFire+Spring構建Web Service(一)——helloWorld篇(53673)
- 8.?基于注解的Spring MVC+Hibernate簡單入門(52601)
- 9.?在阿里云Linux服務器上安裝MySQL(49660)
- 10.?關系型數據的分布式處理系統MyCAT(1)—概述和基本使用教程(47777)