欢迎来到合肥浪讯网络科技有限公司官网
  咨询服务热线:400-0678-380

细节规划之美:扩展可操作区域

发布时间:2019-12-01 文章来源:本站  浏览次数:80

从 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”时,才将加载好的下一页内容显示出来。

应用在淘宝上的话,也能够让查找成果页仅保存一个“下一页”按钮。当用户翻滚时,预加载内容;当用户点击“下一页”时,则立刻展现。这样,能够做到动态更新广告,能减少用户等待页面加载的时刻,一起能尽可能的防止无谓的加载。

不知道我们怎么看?说说你的主意,欢迎评论

上一条:浅析规划与内容出现的联系...

下一条:十个极具酷感的涂鸦风格网...