网页设计细节:扩大用户可操作区域

来源:互联网 责任编辑:栏目编辑 发表时间:2013-07-01 20:00 点击:
从 Google 的一个细节说起:

  
请添加描述


  整个虚线框都是“Next”的可点击区域。看似不经意,却直接提升了细节的可用性。其它页码也巧妙地和上面的字母 o 一起组成可点击区域。与百度和 Bing 的翻页相比,Google 优胜。

  再来看 Twitter 的注册页面:

  
网页设计


  很大很舒服。到了这个页面,瞎逛都会忍不住去填写填写。提示文字也恰到好处,能提供帮助,不恼人。

  我喜欢 Google. 来看下 Google Docs 中的颜色选择:

  
网页设计


  和其它富文本编辑器相比,Google 的颜色小框框大了不少。对比 FCKEditor 的:

  
网页设计


  再来看一个看起来很美的设计,TinyMCE 的颜色选择:

  
网页设计


  注意 A 旁边的下拉小箭头:只有点击到小箭头时,才能打开颜色选取框。点击在 A 上时,是取当前色进行设置。这是跟微软学的:

  
网页设计


  从功能上讲,微软的处理方式很强大。作为客户端软件的 Office, 按钮相对较大,重复使用同一颜色的频率也较高,这样设计无可厚非。但作为 Web 上的富文本编辑器,个人觉得没必要如此设计。这会让小箭头的可操作区域很少,影响可用性。

  再提一个按钮过小的极品例子,YUI 的编辑器:

  
网页设计


  用鼠标改变字体大小,必须点击到上下箭头上,这让我这个“高级用户”都很难操作成功。曾经将 YUI 的编辑器应用在淘宝上,结果这个细节,让用户非常恼火。最后修改成下拉框才好些。

  再说说翻页。记得 Twitter 之前就一个大大的“More”按钮(文案可能有出入,之前没截图,遗憾),非常好用。现在则干脆采用了自动加载,当用户的滚动条拉到一定程度时,自动加载下一页的内容。

  在 Firefox 下,对于自动翻页,有一个非常好用的扩展:AutoPager. 自从装上它,我很少很少需要去点击翻页了。(懒人创造世界哪,最喜欢这种让人变懒的小工具)

  刚又瞎逛了一圈,再给几个例子:

  
网页设计


  上图是新版 Yahoo 首页的注册链接。注意“New here?”, 闲着也是闲着,不如放进链接里,扩大可点击区域。

  
网页设计


  上图是最近刚上线测试的“我的淘宝”。注意&ldqu
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码:点击我更换图片
最新评论 更多>>

推荐热点

  • WordPress添加百度喜欢按钮小技巧
  • Wordpress 博客如何实现自定义Gravatar头像
  • 网站设计分析:建立良好的视觉层级
  • 创建不平衡的平衡:在网页设计中使用不对称设计
  • 7大主流B2C首页导航栏设计对比分析
  • Wordpress页面模板制作方法及使用
  • 网站设计分析:“中国式设计”的三个方向
  • 修改去掉Zblog列表插件文章排行调用标题前面的时间
  • 网站设计与开发:11个在新终端上的网页设计趋势
网站首页 - 友情链接 - 网站地图 - TAG标签 - RSS订阅 - 内容搜索
Copyright © 2008-2015 计算机技术学习交流网. 版权所有

豫ICP备11007008号-1