上图中百度一下的鼠标按下状态加深了颜色,google搜索则直接将底色置灰,从视觉上给了浏览者最直观的感受这个按钮我按下了。
2、鼠标经过也可以这样
我们在设计的时候,为了让浏览者更好的理解文字表述的含义或当前所处的状态都会给文字配上相应的一个icon,当鼠标经过的时候通常的做法就是直接改变颜色和改变一下方向。但是淘宝首页处理极具创新,原来鼠标经过也可以这样。
ps:以上效果用Firefox 或 chrome 查看
上图中搜索后面的小三角在未动作的是指向下方的,当鼠标经过的时候小三角顺时钟旋转180度指向下方,鼠标离开后逆时针旋转180回到原位;淘宝天下前面的icon在鼠标经过的时候顺时针旋转35度,鼠标离开后逆时针旋转35度回到原位。这种处理方式让浏览者摆脱了枯燥的浏览,这个瞬间心情愉悦。
3、弹出层也有新花样
弹出层是我们浏览网页时经常会遇到的东东,它的好处我就不说了,这里我提出来是想说说它们出现和消失的方式。通常的作法是当浏览者触发之后给一个半透明遮罩层,弹出层与之一同出现。迅雷7就来了一个新花样。
上图中当我们点击皮肤设置(黄色小衣服)按钮之后,会看到时皮肤主题这个弹出层以180度水平旋转这个“高难度动作”登场,当我们点击关闭按钮时,它又以放大加渐隐“风骚”离去。和平常弹出层直来直往的方式相比,让我们在那一瞬间感受到愉快、兴奋。当然并不是所有的弹窗加上这样的效果就会提升满意度,效果的加强伴随而来的是过程时间的增加,在这里需要处理好的是平衡性的问题,在枯燥的一系列操作中,动态效果的点缀会使人眼前一亮,频繁的滥用只会产生视觉疲劳。
除了上面所说的按钮、鼠标经过的状态、弹出层还有很多细节比如:下拉菜单出现的方式可以由浅变深、由小变大等等,我这里就不一一列举了。每一个细节,每一个瞬间都有可能加强也可能摧毁浏览者对某个产品或公司的信心。我们在工作中应该注重每一个交互细节,它们对于完整的用户体验来说,都是不可或缺的一部分。只有不断的改进创新,才能提升用户的满意度。
最后借用书上的一句话“良好的用户体验,全在于那些完美的瞬间。” 以上表达了我个人对细节提升用户满意度方面的一些理解,水平有限,不足处,欢迎指正。
相关视频
相关阅读 自适应网页设计四步搞定网页设计与PS设计中的常用命令规范解析Dreamweaver8掌握网页代码基本格式Web设计师应该重视的10个设计元素网页设计中的字体图形化设计技巧详细解析网页设计中色彩表达的含义及搭配原则如何提升网页设计师的工作价值浅淡BANNER设计-Banner设计技巧之谈
热门文章 Wordpress本地安装教程dx1.5如何设置二级域名
最新文章
hbuilder有哪些快捷键Wordpress本地安装教程
Wordpress本地安装教程expression web 4文档乱码解决方法dz 2.5“收藏本版”关闭小对话框无法关闭解在制作安装软件之前,您必须先将易语言存盘,
人气排行 如何使用multipart/form-data格式上传文件Photoshop PS图层混合模式详解(非常详细)ISAPI_Rewrite3使用教程网站里添加收藏和设为首页代码桌面快捷方式图标不见了C#获取执行程序所在的当前路径的方法详解(XMLHttpRequest)进行跨域请求方法如何用远程桌面连接进行传输文件
查看所有0条评论>>