什么是一个好的交互设计:简单的设计

文章描述:操作不太重要,需要突出内容的易读性,可以讲操作隐藏于鼠标悬停之后.

 交互设计是近几年流行的一个词语。现在市场上有许多资料来介绍什么是交互设计,如何做交互设计等。从场景,任务,用户,操作等分析。但由于受实际情况的限制,往往不能很深入。所以笔者结合实际工作体验与大家分享下,具体做设计时候是怎么考虑的。如果要说什么是一个好的交互设计,个人浅见就是简单。本文以下内容都是围绕简单2字进行展开。

  简单在本文中包括认知和操作两个部分:
  1. 认知主要是指人的思维过程,本文中主要说明用户是如何做决定的;
  2. 操作在本文中说明用户的浏览和点击行为。

  先来说下认知,我们时常能够看到“装修前大清仓,最后3天”。这些促销用语,是商家用数字来制造稀缺,引起用户的注意,我们就来说说:数字是如何引导用户的。

制造稀缺和迫切的氛围

  要让人们渴望做一件事,只需要使做这件事的机会难以获得。
  1. 时间(通常用倒计时的方式呈现,给用户造成一种,“此时不买,只有后悔”的暗示,或者   推荐给好友,附带一句“赶快买,马上要结束了”)
  2. 数量(限量200件,仅剩20件)

小结
  1. 把原价,现价标出来,再去掉原价。因为只有一个价格用户不知道有多便宜;
  2. 给出原价,产生对比,帮助用户决策。至于现价是不是真的,很多用户不会考虑。

制造社会认同,刺激用户跟风
  社会认同是指一种群体影响力,简单说来,就是个人在群体中的从众心理,人们倾向于认为他人比自己更加了解所处的情况,他人的行为也总是合理和正确的。因此个人会做出和他人一样的行为,来获得群体的认同,这种效应就是“社会认同”。

数字提醒,让用户非点不可
  相信很多人都有立刻去点掉数字的冲动。这里的数字提醒,笔者以为与前面的略有不同。


  

  1. 起到最基本的提示引导作用;
  2. 这里的操作会让用户上瘾,从而培养用户习惯,增加用户粘性;
  3. 对于平台级的产品,是互相拉动,形成一站式体验。

小结:
  1. 数字不能弄虚作假,特别是电子商务网站,对于一些价格,时间、数量的数字要真实准确;
  2. 要在显眼的位置把这些数字显示出来,让用户有一个直观的判断和快捷的操作;
  3. 对于“微”提醒,界面上要设计的显眼,又不能打扰到用户。

  接下来就让我们说说操作的简单:

  这里笔者先抛出一个常见的场景:

  1. 按钮放这么远,用户会看不到;
  2. 按钮能不能大点,生动点,要有点击欲。

  这是日常工作中经常碰到的事,在这里我们能不能去提炼下呢?

  1. 邀请用户操作(评论,购买,注册)—功能需求;
  2. 要大,要近,要明显—设计需求。

  先来看一个事例:

 

  这是来自Digg的截图,Digg是一个社会化推荐的新闻站点,推荐是站点运营的核心,所以按钮要大,要明显,按钮更不能隐藏,这好像是废话。但需要引出本文一个概念—实时可见工具,该工具就是将用户操作入口明确化,表现形式上是各种按钮,文字链,图标等。接下来我们简单分析下它是否足够简单:

  1. 从认知角度来看,在这里主要是视觉部分。通过文字的颜色和大小,明度和间距的变化起到层次感,主次突出,方便阅读。
  2. 从操作层面上来说其实就是点击,已近是最简单的了。所以需要通过按钮的3态(默认,悬浮,点击)变化,动画效果(从Digg变到Dugg)等细节来提升产品的体验和口碑。

  下面我们看看一些主流的SNS的feed设计是如何的?

Qzone

facebook

新浪微博

腾讯微博

Digg
  里面包含了头像,发布者,内容,时间戳,操作入口等基本元素。这里需要考虑各元素之间的关系,从视觉上分清主次,从而方便阅读,特别在大面积feed的情况下,不凌乱,干净,整洁。是不是很简单,下面我们就看个反例,滥用按钮会怎么样。排布混乱,层次不清晰,具体就不累赘了。

  现在让我们看看Gmail是怎么做的。

  突出标记是对邮件分类很重要的功能,所以将他默认展示,通过明度调整使它从视觉上不突出,降低视觉干扰。点击后用高亮显示明确突出,简而言之,把最重要的东西默认放出来,通过处理,降低视觉干扰。

  最后我们小结下,实时可见工具需要注意的点:
  1. 涉及用户执行重要操作,应该保持始终可见;
  2. 减少视觉干扰,重点突出
  3. 保持可见操作最小化
  接下来我们看下另一个工具——悬停即现工具,简单来说就是鼠标悬浮触发操作入口。

  这是很明显的悬停操作,通过弱化背景,突出焦点区域的变化,来提示用户操作。这种交互方式适合于图片,列表等大面积的样式,并且需要提供操作又不希望影响版面阅读效果的场景。

  随着功能的越来越复杂,页面承载信息也越来越多,如何平衡各种引导,操作,反馈是衡量一个交互工作的基本点。

  这是一个照片编辑的事例,一般我们将显示和编辑分离,通过操作入口进入编辑页面,保存后反馈。随着技术的进步,以前需要的页面跳转现在也可以局部刷新解决了。

  接下来我们看一个例子:

  好处:即时编辑不用跳转,操作更方便,意味有更多元数据,从而产生更好的搜索和浏览体验 。

悬停即现工具-易发现性

  悬停即现-需要考虑易发现性,因为你把它隐藏了。 所以对于交互提示需要设计的很明显,这里,移动到头像上有浮雕效果,然后是下拉箭头用蓝色高亮显示,点击后三角形的箭头方向变换。所有都是细节的变化,有时候我会想到是否做的太过了会。最近工作中也和同事讨论,我们做产品做设计,有个假设:就是面对的海量用户,他们的互联网经验很少,不明白哪里可以点击,这个功能是什么意思。所以作为设计师需要做好引导,操作上把反馈做足够,鼓励用户去尝试和探索。简单来说,交互设计做的是产品的包装,要会讲故事,设计场景,吸引用户后,通过贴心的引导来留住用户。

小提示:

  1. 用户通常知道点击图像会有更多信息
  2. 在主要的操作路径触发悬停内容是个不错的方法

小结
  1.  操作不太重要,需要突出内容的易读性,可以讲操作隐藏于鼠标悬停之后
  2.  明显操作的时候需要保证页面布局不变化
  3.  编辑区域明显
  4.  鼠标状态变为编辑状态(I形)
  5.  空间合适的情况下可以放编辑入口

参考资料
1. http://www.socialbeta.cn/
2. 《web界面设计》

时间: 2025-01-30 06:16:42

什么是一个好的交互设计:简单的设计的相关文章

一个简单的设计最能够得到客户的信任

摘要: 现在百度一下导购网站,网站的数量非常多,但是仔细看下来误区也是蛮多的,甚至有些误区是致命性的.单从导购网站的角度来看,能够卖出商品才是王道的,深刻的思考之下,就不 现在百度一下导购网站,网站的数量非常多,但是仔细看下来误区也是蛮多的,甚至有些误区是致命性的.单从导购网站的角度来看,能够卖出商品才是王道的,深刻的思考之下,就不能够逃过商品谁来买,客户购买的欲望.用途.年龄层.消费水平等客观因素,这些因素也都是在建设网站的时候必要考虑的. 对于导购网站来说,视觉是第一位的,一个好的网站美工,

交互设计在产品设计中的工作流程小议

当产品的用户体验要求越来越高时,交互设计师的职责也越来越明晰了.交互设计师除了自身的基本功外,还需要有一个规范的流程,才能够使工作完整有序. 图1 交互设计在产品设计中的流程图 一.版本计划 版本计划是指在产品或项目立项时,对产品的一个总的规划,通常包括产品的需求与目标,比如能够实现哪些功能,性能上如何.这一过程,交互很少直接参与,或者列席一下发版立项,对计划情况有所知晓.交互可以纵观一下历史版本,对比行业内外的相关产品,以及满怀未来产品的一种期待:实用.方便.美观-- 二.需求分析 在版本计划

交互设计实例:创造设计中的优雅与节奏

首先是跑题的部分,最近听到"交互设计师的危机"的说法.这个话题已经有了不少讨论,比如Cooper上的文章"交互设计前途渺茫"(Alan Cooper,被誉为交互设计之父,见www.cooper.com,它的"concept Projects"我认为是情景应用于设计表达的一个良好范例).DavidW同学做了翻译,并有感而发的写了一些文章如"交互设计师如何提高自己的能力"其中颇具讽刺的语言风格很让人喜欢.又如Mark Blythe

一个门外汉的产品设计漫谈:设计无处不在

本文纯属门外汉YY的结晶,如有低级问题,敬请行家里手批评指正;如果文中煞有介事得出的结论与设计学科的经典理论不谋而合,则不胜荣幸.本文目的是闲侃软件产品尤其是互联网产品的设计,多处以传统产品甚至不登大雅之堂的东东来举例,这顺带也在证明设计无处不在,以及软件设计与传统设计在理念和方法上融会贯通. 设计无处不在,设计决定一切 设计无处不在,人类世界是被设计出来的.如果你细心观察,可以在生活的时时处处发现优秀的设计及其蕴含的智慧.现在低头看看你键盘上F.J两个键上面的小疙瘩;笔记本电脑电源按钮(不是凸

一个优秀的交互设计师是怎样练成的?

  1. 交互设计师应当具备的能力 如果我们简单的将用户体验领域涉及到的技能分为:用户研究.产品(概念/功能)设计.交互设计.视觉设计.工程技术,我认为任何一个交互设计师和视觉设计师等等,都应该具有整体的复合技能,只是哪部分更多哪部分更少的问题. 1) 用户研究:对于交互设计师,不具备基本的用户研究能力,无法吸收来自用户的「信息营养」,如何做出真正以用户为重心的设计呢?观察法.访谈法.问卷法.可用性测试.行为数据分析等等,这些基本的方法应该要有所掌握. 2) 产品(概念/功能)设计和交互设计:这

WP7应用开发中交互设计和UI设计的几点建议

文章描述:WP7交互特性浅析及APP设计探究. Windows phone7是无线领域的新生力量,但是迟迟没有进入中国市场.Mango(注意WP7和mango不是一个概念)的发布带来了中文的操作系统,也让人们看到了该系统的无限可能.在此,我结合自己在进行相关应用设计的经验以及自己对WP7系统认识和理解,浅谈一下这一特别系统的交互特性. 本文索引: 涅磐重生的WP7(以及它的历史简介) WP7对比iOS和Android WP7设计风格 WP7内容和结构框架及特有名词解释 WP7交互特质分析 WP7

区别交互设计,产品设计与用户体验设计

文章描述:交互设计,产品设计与用户体验设计. 交互设计,产品设计和用户体验设计经常被混淆,而实际上完全不是一个概念甚至不是一个纬度的概念: 一直认为交互设计与互动设计很接近,互动设计这个词更多用在flash设计中,维基百科中的交互设计的定义也证实这个想法: 交互设计,又称互动设计,(英文Interaction Design, 缩写 IxD 或者 IaD),是定义.设计人造系统的行为的设计领域.人造物,即人工制成物品,例如,软件.移动设备.人造环境.服务.可佩带装置以及系统的组织结构.交互 设计在

交互设计体验:WEB设计和拍电影

我觉得WEB设计和拍电影很像,交互设计师好比是编剧,视觉设计师则是导演,因为WEB交互设计就是WEB产品原型设计,他有个基本与根本的原则-易用性(易用性或可用性,以下统一用"易用性"概括),让产品更好用. 我是一个电影爱好者,一直关注中国电影.近几年,张艺谋拍了<英雄><十面埋伏><黄金甲>,冯小刚拍了<天下无贼><手机><非诚勿扰>,陈凯歌则拍了<无极><梅兰芳>,这些电影声势浩大,大牌大

关于PHP位运算的简单权限设计

本篇文章是对PHP位运算的简单权限设计进行了详细的分析介绍,需要的朋友参考下   1.写在最前面最近想写一个简单的关于权限处理的东西,之前我也了解过用二进制数的位运算可以出色地完成这个 任务.关于二进制数的位运算,常见的就是"或.与.非"这三种简单运算了,当然,我也查看了下PHP手册,还有"异或.左移.右移"这三个运算.记得上初 中时数学老师就开始唠叨个不停了,在此我也不想对此运算再作额外的说明,直接进入正题. 2.如何定义权限将权限按照2的N次方来定义值,依次类推