交互设计及用户体验

Design.Open.Raina—活动页设计心得二三

蓝蓝

 

又一年总攻节的硝烟刚散,各大电商网站连通大小门户平台都经历过一轮铺天盖地的促销与各类花色繁多的相关运营推广活动。

看了好些五彩斑斓的活动页面,结合最近阅读的相关文章和自己参与应用中心活动页设计以来积累的一些不成熟的经验,总结出了关于活动页设计的一些小心得,值此佳节(昂=_=?),希望能抛一些砖并与大家共同寻找玉的存在^^。

 

活动页简析

活动专题页面,顾名思义是承载各种形式的节庆促销、宣传推广、营销产品发布等等活动的页面,形式与内容也多种多样。 典型的静态活动页面通常使用页头banner+标题再配以活动入口的展示形式,主要以背景、banner和标题字体的视觉处理来烘托整体氛围;如今也越来越多的活动页会加入游戏等趣味性强的互动方式,采用flash形式展现,今年TMALL的喵星球抢红包活动就是绝佳例子。

设计师要抱着对待朋友的心态去对待用户

蓝蓝

现在,互联网在为我们带来便捷生活的同时,也为我们筑起了高墙。人与人之间的关系越发淡薄,人与电脑的关系却越发密切,很多人无意间将自己的感情寄托在电脑上,也可以说是互联网产品上。大多数用户的70%的时间都花在这些产品上,他们通过产品界面完成所有的互动,界面是由设计师来设计的,也就是说这些用户70%的时间是在和设计师进行沟通交流,那么设计师是不是应该以一种好朋友的姿态来对待他们的用户呢?试想一下,在实际生活中,如果一个人愿意用70%的时间和你交流沟通,那ta肯定是你的闺蜜或很好的朋友吧。

作为设计师,我认为自己应该像对待好朋友一样,去对待我们的用户,用心地帮助ta们,关心ta们。在实际生活中,你会怎样对待你的好朋友呢?怎么对待朋友就怎么对待用户吧,下面我用自己收集来的案例来说明我们如何待”用户“如待”友“。

 

1. 你总能向朋友很形象地描述些些事情

设计案例1:你对朋友说:讲话慢就像乌龟跑得慢一样,讲话快就像兔子跑得快一样

设计案例2:你告诉朋友:开心表情代表消息发送成功时,难过表情代表消息发送失败

设计案例3:你告诉朋友:”你摸小鸭icon,小鸭icon也会张开翅膀;icon也有心情也有微表情。

移动设备的转场设计

蓝蓝

移动设备的转场设计

 

讲到移动设备的转场设计,我们先来看看移动设备。 移动设备有三个主要的特点:

1. 屏幕小,相对于普通的PC来看移动设备的屏幕相对要小很多。

 

2. 使用环境多变,由于移动设备便携的特点我们会在各种环境中使用。

3. 由于屏幕小一次展示的内容少加上各种不稳定操作环境,软件上有简单易学易于操作的特性

回到正题来看转场 说到“转场”一般都会想到电影和PPT里面的转场,

下面来看转场在这两个领域的定位和作用

网页设计中建立良好的视觉层级,好文!

蓝蓝

 

随着互联网信息爆炸式增长,用户浏览单个网页时,并不像我们想象的如阅读文章般从左到右、从上倒下逐一查看,为什么?

一、 视觉层级为什么重要

左侧是设计师期望用户的浏览方式,右侧为用户实际的浏览方式—摘自《Don’t make me think》

用户来到一个网站有他自己特定的目标,如阅读新闻、购物、查看新消息,然而信息量太大,逐一查看需要大量时间,这就要求网站能抓住主流用户特征,将重点推送给他,用户找到自己的目标或感兴趣的点,才有可能继续浏览或产生下一步动作,否则就会离开。

用户时间有限加上互联网信息量巨大,这两项原因正是考验视觉设计师要建立良好的视觉层级呈现给用户,帮助用户快速找到目标的功力。

总结一下,建立有效的视觉层级主要从以下四个方面着手:

1、简约: 有选择的展现信息,让用户在有限的信息中发现重点

2、组织: 预先对信息进行科学的分类,整理好优先级,可以得到更好的传播效果

3、呈现: 多种表现方法结合,呈现最好的视觉层级效果,这个点细化后有很多可挖,这里总结了几个点,欢迎继续哈

4、引导: 遵循用户习惯,同时给予适当的引导推荐

怎样的设计能给人留下深刻印象?

蓝蓝

 怎样的设计能给人留下深刻印象?

  名人效应 (借助名人或明星效应,产生不言而喻的说服力)

  每人内心都有自己仰慕或效仿的对象,而且有一种想尽可能地向他靠近的心理欲求,从而获得心理上的满足。在选择人物形象时必须要与产品的品格相吻合、使用户快速理解产品传递的特点和价值,比如我们以往的设计作品中经常会使用到马云的形象,他在互联网具有极高的话语权,选择用他的形象来推广产品能产生不可言喻的说服力,当然你不能滥用。

  时势结合 (紧随潮流,激发思想和感情上的共鸣)

  结合当前社会事件如钓鱼岛、奥运会、中秋节、中国好声音等等,或当下流行的语言词汇如屌丝、高富帅、白富美等等,紧随潮流的事物反应当下的社会形态,潜移默化的感染到用户的思想或感情,产生震撼和共鸣。下面的例子就是结合现在最流行最热门的节目“中国好声音”。

四两拨千斤的网页设计产品经理工作小工具分享!

蓝蓝

本篇的主题是分享一些四两拨千斤的小工具。 没有下面的软件的同学,一定会喜欢!已经有的同学,就可以飘走了!~

注意,所有小工具都是绿色的!绿色意味着你不用安装,体积极小,拷贝一份即可使用。
为什么要推荐?这么多年来,这些工具一直陪伴我的工作,并且已经私下里推荐给很多同学,用过的人都叫好。

NO.1 截图利器之FSCapture
  • 推荐理由: 绿色、轻量+强大截图功能,装机必备之利器
  • 应用场景: 截图啊!做帮助文档啊!插图啊!太多了!比如下图就是用此用具截图并编辑的:

用户体验设计答疑对话(半吊子和纯外行)

蓝蓝

[总结]:在用户的视角来看,我们也希望他看到的都是最简单最愉悦的一面。作为客户培训师,你不需要知道产品数据在我们后台是存储在什么服务器的。用户搜索产品时,也更加不需要了解一个检索词是经过了多少词解析判断计算,跑了几台服务器,最终把结果呈现给他的。但是作为工作人员,我们得了解需要怎么做,才能够把最简单最愉悦的结果呈现出来。(Heidi注:如图5所示)

P1030876

图5:简明网站产品建设流程图

这个图呈现的流程,依赖于多个部门的通力合作。从战略层高瞻远瞩的判断、从产品经理对于市场的分析以及功能、内容的规划、描述,到用户体验团队,开发和测试团队的全力配合,而网站产生后,还要依赖于SEO、市场营销、销售和客服的工作。

成功的网站,一定是多个部门一起围绕相同目标运作的结果,但是其中一个环节失败,则可能会造成全盘皆输。

本文虽然篇幅已经很长,但是涉及到具体的流程、方法,都只能简单带过,希望大家要记住这是对话的场景,不要以偏概全哦。
你对他提出的问题,想如何回答呢?如果你有问题,质疑,鼓励……欢迎交流。

工作的信息搜集及管理方法,如何从搜索引擎找东西?

蓝蓝

图1:信息搜集及整理术循环图
本文经授权刊载于《程序员》杂志2012年12月期刊。请勿转载作为商业用途。
其他转载请注明出处及保留原文。
关注我请点击:http://weibo.com/heidixie

 
写在前面
几个月前,团队邀我做次内部的分享,主题是如何有效搜索信息。这是因为平时工作中,我经常会分享一些专业学习文档,而这些文档的出现往往很及时,回应一些我们自己项目的困惑,所以大家会好奇我如何及时找得到那么专业且对口的参考资料。

 
这些资料有些来自网络搜索,有些却是来自我的“个人资料库”,它分门别类,容易检索,所以很轻易就能够翻出来示人。所以后来,这次分享便从“搜索术”,扩大为如何获取、整理各种信息的技能。

 
这原来我认为是常识的东西,却在简单分享后得到好评。受到鼓励之余,我也明白了并不是所有人都明白有效的信息搜集及整理有多么重要,也并不是所有人,都掌握了行之有效的方法和技巧。故整理成文,做抛砖引玉之用。

 
一.信息搜集及整理循环图

 

如上图1所示,我认为“信息搜集及整理术”会包含三个关键阶段:
  • 搜索:“找信息”——用各种搜索渠道快速找到所需的精准信息。
  • 集成:“存信息”——简单来说,就是把你找到的信息,定制成为个人资料库,按照自定义的主题,分类存储在自己很方便访问的地方。
  • 整理:“理信息”——信息单纯集成而不加整理,时间长了就会杂乱不堪,所以才会出现很多人自己的硬盘资料库已经塞满了,每当需要什么资料的时候,还是需要去搜索。定期对所集成的信息进行整理(归类,去重,留精,加可供搜索的标签等等),能够显著提升信息搜索效率。

如何写一份交互说明文档

蓝蓝

离开交互圈已经有段时间了。但由于博客还在,还是能够偶尔收到一些邮件,上周有位同学问我:我在求职,我看到很多招聘说明上需要交互设计师编写界面交互设计文档 ,请问界面交互设计文档是什么文档?怎么编写呢


这让我想起来2009年自己在项目里也大力推行过交互说明文档(在下文中,简称为DRD),格式倒没什么限制,交互设计师自己写到界面上也行,单独文档成文也行,总之就是让交互设计师能够将界面承载不了的信息通过文档沉淀下来,降低项目里的沟通成本和风险。今天整理电脑, 翻出以前的PPT,分享之。

这将涉及到几个问题:
一. 什么是交互说明文档(DRD)?

 
所谓DRD即是用来承载交互说明,并交付给前端、测试以及开发工程师参考的文档。

 
在项目中,交互设计师的主要产出物可能依次是:site map,page flow,wireframes。有的大型项目前期,交互设计师有可能还会产出用户需求分析文档(与PD产出的市场需求文档不一样的是,URD更多侧重于对目标用户的需求分析)。

 
DRD则很少有人专门撰写。如果需要对交互设计进行说明,聪明的交互设计师往往会直接标注在线框图里,或者在项目中不断和前端工程师和开发工程师口口相传,反复验收,不断迭代修改来确保所有的交互设计意图最终得以呈现。

二. 为什么要写?

 
DRD非项目必需环节,一般情况下也不会为交互设计师专门留出相应的时间预估。没有这份文档,项目也会继续,但是可能项目会为此承担不必要的沟通成本和时间成本。严重的话,项目的质量也会受到影响。所以写与不写,交互设计师需要做把握,时间被统一包含在“线框图”环节内——如果你要写,请在评估时预留1-2天的时间。

 
那么,结合我过去的经历,谈一下此文档的必要性。

 
下图是一个产品开发项目基本的流程。


 
敏捷开发意味着很多不同角色的流程需要并行操作。如果等到产品经理的FRD已经全部敲定,交互设计师再开始去画线框图,固然会减少沟通成本和返工风险,但是同时意味着交互设计师的很多想法不被采纳。如果产品经理再强一些,他甚至会在FRD里连原始的DEMO也一并绘制出来了,功能性的需求和界面交互的需求有时无法区分太清楚——比如他会在FRD里直接要求每页条目40条,超过40条即分页。而交互设计师可能会认为像蘑菇街那样不断装载出足够长的页面会更亲和……所以,我们希望是和产品经理同时开始工作,在术业有专攻的时候相互补充。

 
同样,开发工程师也希望及早介入需求,在FRD并未确认的时候就了解需求,进而将商业需求和功能需求转化为开发工程师看得明白的开发需求清单(这个清单,大部分叫做UC,即USE CASE),当这份清单由工程师需求分析师——在过去,这个角色被叫简称为RA,但是目前已经取消此专门的职位,而是由开发工程师代表担纲此环节工作,为了便于描述,在此文里,我仍然将做这件事情的人称为RA——交付给具体的执行工程师后,执行工程师基本上可以当作一条条的checklist开始工作,而不必再思考商业逻辑和需求。同样,测试工程师也需要编写具体的文档去指导很多测试人员在开发后测试,这也是基于UC和FRD去撰写的。


 

不要让“合理性”成为阻碍设计前行的绊脚石

蓝蓝

“这个不符合用户的心理”,“这个功能打破了我们产品整体的平衡性,放在这里在我看来是不太合理的”…

作为互联网行业里万千鼠标民工中的一员,诸如以上的对话,每天都在我们的生活中不断演绎着。合理性慢慢的成为了检验我们专业技能以及设计水平最重要的一种指标;诚然,足够的合理性能够为我们所设计的产品保驾护航,能够给其带来可预见性的回报和收获,但长此以往,却很难再出现令我们叫“WOW!!”的产品了。让我们来看颗栗子~ 

iPhone5自9月13日发布以来,就受到了前所未有的神吐槽,在这一次,大家都能很明显的感受到没有了乔帮主以后,苹果不再是创新界的翘楚了。

1

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档