细节设计之美:扩大可操作区域
作者:lifesinger 来源:岁月如歌 发布时间:2009-08-01 11:32: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?”, 闲着也是闲着,不如放进链接里,扩大可点击区域。
上图是最近刚上线测试的“我的淘宝”。注意“已买到的宝贝”左边的小箭头,可点击区域很小。个人觉得这些收缩小按钮,都属于看起来很美但实际上基本无用的鸡肋设计。
最后,很想和各位朋友讨论一个问题:
Twitter 的自动加载,Firefox 自动加载下一页的 AutoPager 扩展,这种交互方式,究竟好不好?适用于哪些场景?
比如淘宝的搜索结果页面,如果采用自动加载,会带来哪些弊端?
对于 Twitter 的自动加载,我有一个想法是,保留“More”按钮,同时在用户滚动滚动条时,预加载下一页的内容,但仅当用户点击“More”时,才将加载好的下一页内容显示出来。
应用在淘宝上的话,也可以让搜索结果页仅保留一个“下一页”按钮。当用户滚动时,预加载内容;当用户点击“下一页”时,则立刻展现。这样,可以做到动态更新广告,能减少用户等待页面加载的时间,同时能尽可能的避免无谓的加载。
不知道大家怎么看?说说你的想法,欢迎讨论。
猜你喜欢
- 元素的CSS样式,除了包括内联的(即通过style属性加上的)样式定义外,还有页面嵌入的css和外部引入的css两种方式。但在JS中通过el
- 自己有一套模块化的思路,想搜索一下有没有共鸣结果排名靠前的是通过class拼凑页面的想法。模块化是twinsen提出来的,从我接收第一个po
- 本文只讨论Oracle中最常见的索引,即是B-tree索引。本文中涉及的数据库版本是Oracle8i。 一. 查看系统表中的用户索引 在Or
- 什么是合并多行字符串(连接字符串)呢,例如: SQL> desc test; Name Type Nullable Default C
- 小毅的blog:http://andymao.com/前天网上有个朋友发给我一个页面让我帮她看一下为什么鼠标翻转实现不了。我打开源文件看了一
- SQL Server数据库日志清除的两个方法:方法一一般情况下,SQL数据库的收缩并不能很大程度上减小数据库大小,其主要作用是收缩日志大小,
- 往往我们在建立一个较为大型的网站的时候会有很多的副页面框架模式甚至一些小的细节元素都是相同的,但是令人困扰的是在更新它们时却要费些周折,要一
- 影响的范围: IE的所有版本在表单的radio/checkbox控件中,一旦他们的DOM结构被更改过就会出现这个bug。bug描述当象下例中
- asp之字符串函数示例用字符串函数对字符串进行截头去尾、大小写替换等操作。函数语 * 能LenLen(string|varname)返回字符串
- 不论是做WEB设计还是做交互模型,最快确立创意与设计效果的最好办法就是用笔在纸上绘制出来。不过从事IT行业的人很少一部分是来自美术学院。当然
- 在程序的开发过程中,处理分页是大家接触比较频繁的事件,因为现在软件基本上都是与数据库进行挂钓的。但效率又是我们所追求的,如果是像原来那样把所
- 参数strSQL 要导出的SQL查询语句strFields 字段名称列表,如果为空字符,则使用SQL语句中的字段名用法示例:1:export
- 现在基于WEB页的HTML的编辑器在新闻系统,文章系统中用得越来越广,一个网页一粘就可以保持原来的样式,同时图片也可以在这个页中保持。但是在
- location是javascript里边管理地址栏的内置对象,比如location.href就管理页面的url,用location.hre
- asp代码 如下:读取注册表信息使用了对象WScript.Shell<%Dim strPath strP
- 联合结果集 新建临时工数据表 代码如下:CREATE TABLE T_TempEmployee (FIdCardNumber VARCHAR
- 许多服务器管理员都知道,MySQL数据库管理系统(RDBMS)是高度灵活的软件块,带有范围广阔的启动选项,可以用来修改相关行为。然而,大部分
- 函数getcache,会自动建立需要的缓存。 代码如下:Function getcache(funsname,isreset,is
- Oracle不像SQLServer那样在存储过程中用Select就可以返回结果集,而是通过Out型的参数进行结果集返回的。实际上是利用REF
- 文章背景:某天,我的一个同事给我看了CSDN上面的一篇关于编程语言排行榜的文章,里面我看到VB还是排名很不错的,我就说,asp(vbscri