存档: ‘交互’ 分类

“称心”的体验(一)

5 条评论 2010年7月27日

banner0727

每次体验一个网站的时候,打动人心往往是那些细节上的体验。在这里做个记号,以便以后查看。

 

爱护用户的“鼠标手”

 

一、光标输入焦点初始化

 

每天受伤较多的除了眼睛就是我的右手, 老是要在键盘和鼠标之间切换,老是要做光标的定位操作,老是 现在很多网站很贴心的会把鼠标光标默认在某输入框内,以减少该行为的操作步骤 常用到就是搜索输入框,如各大搜索网站的首页,都会默认把光标定位在输入框内。 还有一种情况就是表单页面,如注册, 登录, 发表日志等页面,会把光标定位在第一项表单元素  

 

如:网易邮箱的登录页面 

163 

 

二、“就地”解决

 

曾经“弹窗”让我们可以在同一个页面里解决很多需求,实现了“足不出户”,后来渐渐的被赋予了太多的功能,久而久之“名声”显得很不好。在这里要讨论的是数据操作这一类的弹窗展现形式。如用户提交“删除”请求时,会有个确认的对话框。一般情况下是,对话框会出现在屏幕的正中央,用户的鼠标需要前进一段“道路”才能定位到操作对象。我们的手很多时候就是在做这些“移动”的操作。 

再看看QQ的微薄“确认”操作,显得轻巧很多,更主要是用户几乎不需要再次挪动鼠标,就可以“就地”解决。 

delete

 

其实这一点在著名的“费茨法则”里也早就提到了。 

 

 

“温馨”的提示 

 

一、必要的“干扰”提示

 

提示过多,表现形式过于复杂,都会干扰到用户的体验。但有一些提示,如一些没有进行数据提交就离开页面的提示,就显得很有必要,避免了因误操作而给用户带来的损失

下图是网易邮箱没保存/发表下,离开写信页面的提示。但很多网站都忽略了这点。

mail

 

 

二、“动画类”的反馈提示

我们经常用“文字”来传达提示的主要内容,用“颜色”属性来对比突出,但随着技术的发展,更多新颖的交互模式得到广泛应用,“动画类”的提示就是一种。

下面看一下具体的实例:

 

搜狐白社会的打卡成功提示:

bai

 

新浪微薄的发表成功后的划出效果:

sina

 

上面的提示比“文字”类提示显得更形象,更有趣味性。

 

这次就写到这里,下期再会。

 

《实站》第二期—UI设计模式

7 条评论 2010年3月24日

《实站》第二期—UI设计模式

UI设计模式是针对设计中某类具体问题的的概括性的解决方案。在提高设计效率的同时,也可以减轻用户的认识成本。

这次《实站》主题就是介绍线上比较著名的UI设计模式网站。

1.    理论型  

 yahoo-pattern

雅虎设计模式库

网址:http://developer.yahoo.com/ypatterns/

介绍:这个业内比较著名的,也是传播影响较大的设计模式网站之一, 基本每个模式会从“是什么” “什么时候用”“怎么用”“为什么要用”方面进行阐述。 

 

ui-pattern 

ui-patterns

网址:http://ui-patterns.com/

介绍:除了基本理论结介绍外,还有图片的举例说明。可以跟雅虎互补浏览一下。

 

2.    实例型(图片截图为主) 

 pattern-tap

Pattern Tap

网址:http://patterntap.com/

介绍:网站现有45个模式外,还有页面风格的标签分类,例如简洁,可爱,明亮等。而且更新较快,是设计师的建议浏览网站之一。

 

pattern

UI设计模式库

网址:http://www.dingzhijun.com/pattern

介绍:这是个人自己建立的设计模式库。主要是自己喜欢作品的截图,对其进行了初步分类。由于技术有限,用wordpress进行搭建,体验起来不是很顺畅。目前资源还很少,但会持续更新请关注。。

其他资源

1. 40+ Helpful Resources On User Interface Design Patterns

2. Designing Social Interfaces

3. Patterns in Interaction Design

书籍: 《Web界面设计》     《网站交互设计模式》

上期主题:让你意想不到的搜索

鼠标交互中的费茨法则

3 条评论 2010年2月20日

费茨法则是用户界面设计人机工程学中的著名原则,其基本思想是: 

目标越远,鼠标到目标所花费的时间就越长。

目标越小,鼠标到目标所花费的时间就越长。 

所以要让用户比较容易的完成操作,我们在设计界面时应该让目标够大,离鼠标所在位置够近。 

目标距离

较容易操作的示例: 

1

 

新浪微薄的很多细节交互中做的很人性化,比如这个音乐的浮层就在当前鼠标位置的下方,用户无需移动较远的距离就可以把鼠标的光标定位到文本框。 

看看我们19楼编辑器的插入音乐效果,浮层是在浏览器窗口的正中间。用户需要移动较远的距离,这样就显得费劲了。 

2

在我们导航中公共会所的下拉菜单也存在这样问题,如果用户想要点击最右边的频道就要滑动接近一个屏幕的宽度,如果划出该区域,又要重新单击公共会所的链接。 

目标大小 

3

在这次大改版中,我们对原来的翻页模块进行了改进,原来让人抓狂的小方块,变得大了,距离也拉开了,操作也就方便多了。 

在一些较小的目标时,也可以用代码建立一个比目标大的<a>链接 。

 

如果不遵守菲茨法则,也不会给用户的操作带来很大的阻碍。但细节中的交互改进可以让产品更加易用,让用户更加愉悦。

扩展阅读:Windows 设计规范中的鼠标交互