交互设计之“简单”说


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

  文章来源:腾讯CDC 转载请注明出处链接。

时间: 2024-09-11 19:54:50

交互设计之“简单”说的相关文章

好的交互设计就是简单

交互设计是近几年流行的一个词语.现在市场上有许多资料来介绍什么是交互设计,如何做交互设计等.从场景,任务,用户,操作等分析.但由于受实际情况的限制,往往不能很深入.所以笔者结合实际工作体验与大家分享下,具体做设计时候是怎么考虑的.如果要说什么是一个好的交互设计,个人浅见就是简单.本文以下内容都是围绕简单2字进行展开. 简单在本文中包括认知和操作两个部分:1. 认知主要是指人的思维过程,本文中主要说明用户是如何做决定的:2. 操作在本文中说明用户的浏览和点击行为. 先来说下认知,我们时常能够看到"

交互设计案例:突出重点一目了然,简单而不简陋

文章描述:交互设计案例:突出重点一目了然,简单而不简陋. 看到这张照片,我们一眼能够看到天宏(图中这位UED俊男)的眼睛.我们能从他的表情里读出一些他的性格.一张好的摄影作品,最重要的一点,就是这个照片是否有焦点,照片的主题是否一目了然.而摄影作品的用光.构图.景深等等手法,其实就是在让一个照片能够有其焦点,并且利用这些艺术手法来烘托气氛,提升主题. 一个优秀的页面亦如此:应当突出重点,一目了然.相信大家也知道,一个用户在浏览网页的过程中,只是扫描页面,而不会像是在看书似的阅读每一处地方,每一行

交互设计分析:紧紧围绕简单进行交互设计

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

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

文章描述:操作不太重要,需要突出内容的易读性,可以讲操作隐藏于鼠标悬停之后. 交互设计是近几年流行的一个词语.现在市场上有许多资料来介绍什么是交互设计,如何做交互设计等.从场景,任务,用户,操作等分析.但由于受实际情况的限制,往往不能很深入.所以笔者结合实际工作体验与大家分享下,具体做设计时候是怎么考虑的.如果要说什么是一个好的交互设计,个人浅见就是简单.本文以下内容都是围绕简单2字进行展开. 简单在本文中包括认知和操作两个部分: 1. 认知主要是指人的思维过程,本文中主要说明用户是如何做决定的

一份简单实用的微交互设计指南

  功能差不多的情况下,如何让用户一见倾心?微交互是决定用户印象的关键之一,今天这篇好文列举了使用微交互的注意点,以及五个最常见的使用场景,全是干货,来收! 好的产品往往做好了两点:功能和细节设计. 功能吸引用户使用你的产品,细节设计将你的用户留下.优秀的细节设计能够使你的产品在众多竞品中脱颖而出,优秀的微交互设计往往能够让用户在初次使用产品时就能够留下深刻的印象.作为一个交互设计师,在设计微交互方案的时候不仅要考虑视觉上的冲击力,还要想办法赋予其信息传递的功能. 什么是微交互? 微交互是产品中

交互设计中的5项视觉指导原则

  视觉是人的第一感观,它在影响用户行为方面起着决定性作用,视觉信息对产品的交互产生了深远影响. 来自UXPin的Jerry Cao,通过本文向我们解释了如何保持视觉与交互的协调. 我不想贬低文字的重要性,但也不想忽视视觉.两者是同等重要的交互设计元素.文字就是交互,但那些视觉元素(比如图标.菜单.图像等)才是用户实际上操作的东西.虽然有些可用性专家会提及Craigslist甚至Amazon,作为丑陋但可用(而且受欢迎)的网站案例.但毫无疑问,美感总会有所帮助. 情感是用户体验的关键:视觉设计优

交互设计就是要把握以用户为中心的宗旨

文章描述:交互设计规范原则. 古巴比伦王颁布了汉摩拉比法典, 刻在黑色的玄武岩, 距今已经三千七百多年, 你在橱窗前- 熟悉吧?没错,这就是周董的爱在西元前歌词.前不久工作不是很忙,于是乎萌出整理交互设计的规范想法,也就是篆刻公司用户体验设计的汉摩拉比法典.既然要制定规范,首先得树立一个指导思想,也就是法律中的宪法:也像是个自然科学树立一种哲学思想,作为一种世界观和方法论来指导用户体验设计.哲学虽然感觉很虚,但是很重要哦,大师级别的科学家很多也是哲学家. 用户体验设计原则就像宪法,是交互设计最基

网页界面交互设计:系统的用户体验的衡量标准

文章描述:精益用户体验(UX):摆脱只注重结果的工作(留意互动机构的区别之处). By Jeff Gothelf from SmashingMagazine.com翻译&编辑:DamnDigital, (转载请说明翻译来源, 尊重我们的努力) 网页(以及交互设计,界面设计,等)传统上是基于可交付的形式来执行.框架.网站地图.流程图.内容清单.分类系统.原型和规范文档(又称"The Spec"),帮助定义网站在其起步阶段的执行.这些结果构成了一个系统的用户体验的衡量标准. 随着时

一个完整的交互设计流程是怎样的?

  一.定性研究(Qualitative Research):针对可能使用你的产品的人,可以是问卷.访谈-- 二.确定人物角色(Persona):即产品的典型用户,可以有一种或几种.例如可以有一个人物角色叫CEO. 三.写问题脚本(Problem Scenario):罗列人物角色在使用产品时可能遇到的问题,可以整理成一个故事便于别人理解 四.写动作脚本(Action Scenario):像写故事一样,写人物角色在使用你设计好的产品时,发生的细节.注意,这个时候你的交互方案的概念模型已经基本成型了