产品原型设计之交互体验的思考过程(一)

我有两种方式 来建立这种认识。
简单而迅速的方式是用一句话把它写出来,包括我要设计什么,要遵循哪几条设计规则,尽量使用最简单的术语。然后,在面对设计功能对照表而犹豫不决时,我就会暂时停下来,问我自己:“做这个表是为了什么?”这个描述是我判断设计是否简单的基准。在做一些比较小的设计(大型网络中的一个页面)或者在我多多少少了解到设计背景的情况下,这种方式都是很奏效的。
更好而花费时间更长的方式是描述我希望用户拥有什么样的体验。具体一点说,就是描述用户的使用背景,以及我的设计怎么满足用户在该情下的需求。在设计一些大型啊项目时(比如整个网站或者移动设备),这种方式很适合,因为我这种方式可以让我深入透彻地考虑到每一个细节。

产品原型设计之交互体验的思考过程(一)

当我拿到产品或者界面功能结构图时,我首先会做以下三点考虑:

  1. 该产品定位是什么,我希望用户拥有什么样的体验【至关重要,考虑到每一个细节问题】
  2. 对界面逻辑功能分析,我需要和那些功能打交道
  3. 竞品分析,或者相似功能界面设计、交互分析

三点思考内容,不分顺序,在思考的过程中,很多时候三点是相互影响、相互渗透的

说一下自己的拿到功能结构图的整个思考过程,主要从以下几个方面思考。

产品原型设计之交互体验的思考过程(一)

Part   one

产品定位分析:

No.1  微记,通过图片和文字为家庭成员记录他们每一刻、每一天的生活点滴,创造全家人的共享记忆;

Part   two

界面功能结构分析:

  1. 四个常规tab(家庭微记、家人、家书、我的),和添加微记botton;
  2. 用于用户及时发布动态消息,包括用户头像,发布时间,动态内容(图片、文字);
  3. 更加注重用户隐私,只有点赞,不包含评论、转发等分享行为;
  4. 加入日历功能,方便用户及时查看当天动态;

Part three

相似功能分析界面分析

No.1  朋友圈、qq空间

A、相同点:及时发布动态消息,包含用户头像,发布时间,动态内容(图片、文字);

B、不同点:

  • 没有评论、转发的分享功能;
  • 朋友圈和qq空间更在于分享,微记更在于记录微记对于用户的每一条状态

更加重视,不是单纯的下拉刷新,一条条动态简单粗暴的刷过去;

No.2  日记类功能app

A、相同点:真正的回归记录,把重点放在用户的每一篇、每一天生活记录,记录方式、

记录目的更加明确,使用户感受到自己每天的生活都在被记录;

B、不同点:

  • 日记大多在于记录自己个人生活,微记在于记录家庭每一个成员的生活,
  • 使他们之间达到共享的家庭状态。关于自己的记录内容,对于家庭成员,
  • 可以选择公开或不公开的方式;

综上,对于微记的原型界面设计有了明确的方案

记录方式

No.1  每一条微记内容

A、微记更靠近日记的记录的方式,每一条微记以块状形式,独立呈现,包含用户头像、用户昵称、发表时间、发表内容

针对发表内容,说明一下,根据功能要求,用户最后呈现发表状态,共有三种

a、图片+文字

b、纯图片

c、纯文字

所以要出三种状态原型。

No.2  多条微记的呈现形式:

  • 上下滑动同一天不同时刻的所有家庭成员所发表的微记
  • 向左滑动,后一天不同时刻的所有家庭成员所发表的微记
  • 向右滑动,前一天不同时刻的所有家庭成员所发表的微记

四个常规tab(第一本版本中,“我的”因当时特殊考虑,没有放上去,不影响整体交互体验效果)

之所以选择将4个tab包括添加微记botton放在页面的顶部,是因为:如果4个tab放在界面底部,当用户上滑查看一天家庭成员的动态,用户手指的滑动与界面的交互位置和4个tab放在底部的位置,会有一些重合,引发用户误点,影响用户体验。

好吧,这个想法,自己现在看起来,确实是有点“想多了”。

不过,在这里,我要说明一下我这里所犯的错误–作为交互设计师,自己在空想用户使用产品的过程,虽然很多时候我们需要模拟用户使用产品的场景,也许用户的大多使用习惯,是我们在过去的经验中、在自己的使用场景中、在书本中,是可预见的,但是有时候自信的一味的空想模拟,就会忽视很多的用户细节,如果被忽视的细节一旦多了,那差距想必会影响整个产品的用户体验。

后话,自己找到几款需要下滑查看动态,并且tab在界面底部的app,推荐自己的一些不同年龄、不同性别的朋友使用,并悄悄观察他们的交互状态、体验效果,事实上,大部分的用户,当他们手指准备点击屏幕上滑时,大家会刻意回避这个区域,只要标签栏高度合理,界面交互范围符合用户手势舒服的合理区域,由于上滑,造成误点的情况几乎没有

关于添加微记的botton

由于把四个tab放在了顶部的最上面,考虑到视觉平衡,一开始准备将botton放在最中间,但是如果将botton放在中间,用户点击起来相对比较麻烦,所以,综合考虑来看,决定将botton放在最右边,一方面,方便用户点击。另一方面,微记上面需要加上当天的日期,避免整个微记界面中间拥挤的情况。

日历botton

因为将当天日期放在了每天最新微记的上面,所以,便将日历放在了其旁边,同一性质,都在于根据时间查看当天微记内容

上述一段,就是我对微记第一版本的考虑。

无论是移动端界面、还是PC端界面,都需要对什么是简单的体验有一个明确认识。

关于建立这种认识,我很喜欢Gildes Colborne在《简约至上–交互设计四策略》提到的的方法,在这里复述一下,和大家共勉,希望能给读者带来启发和帮助!

我有两种方式 来建立这种认识。

简单而迅速的方式是用一句话把它写出来,包括我要设计什么,要遵循哪几条设计规则,尽量使用最简单的术语。然后,在面对设计功能对照表而犹豫不决时,我就会暂时停下来,问我自己:“做这个表是为了什么?”这个描述是我判断设计是否简单的基准。在做一些比较小的设计(大型网络中的一个页面)或者在我多多少少了解到设计背景的情况下,这种方式都是很奏效的。

更好而花费时间更长的方式是描述我希望用户拥有什么样的体验。具体一点说,就是描述用户的使用背景,以及我的设计怎么满足用户在该情下的需求。在设计一些大型啊项目时(比如整个网站或者移动设备),这种方式很适合,因为我这种方式可以让我深入透彻地考虑到每一个细节。

下面就是微记第一稿的原型图设计以及基本的交互效果动图

  • 上下滑动,查看同一天不同时刻的所有家庭成员所发表的微记
  • 向左滑动,查看后一天不同时刻的所有家庭成员所发表的微记
  • 向右滑动,查看前一天不同时刻的所有家庭成员所发表的微记

微记原型图效果(第一稿)

产品原型设计之交互体验的思考过程(一)

微记原型图交互效果动图(第一稿)

如果大家想看动图的话,可以到behance看我的原稿:链接:https://www.behance.net/portfolio/editor?project_id=33050391

现在看来,很多交互上的错误都显而易见。

记得,当时第一稿完成的时候,自己兴致勃勃拿给公司同事“欣赏”,我原以为大家会很流畅的滑动起来,好吧,并没有,他们中几大部分人只是停在界面上,或者乱点一通,并没有滑动的意思,我有问过他们,为什么不尝试着上下或者左右滑动一下呢?他们的回答是:

  • 我并没有看懂界面到底在表达什么;
  • 我怎么知道上下左右有内容呢;
  • 额,我应该要这么做吗,但是你没有提示啊;

说实话,当时的确有很深的挫败感,然并卵,及早发现问题,那就开始解决问题。从大家给我的反馈意见和我对他们的观察中,我做了以下总结:

第一稿错误的原因:

  • 这个原因前面也有提到过,就是太盲目按照自己的想法,没有切身从用户体验角度出发,先是体验,再是设计,应该时刻放在心上,应该时刻使用户感受到产品简单之美;
  • 形式大于体验,过分将重点放在自以为“与众不同”的设计,违背了一些交互设计最基本的准则,“可见性”、“自解释”等都没有很好的遵守。

第一稿错误的设计方法:

  • 将微记状态的块状结构过于大,非常不方便用户浏览,用户第一眼需要的信息量远远超过我给予他们的信息量;
  • 微记发表及时的时间,属于用户当前最需要知道的信息,却没有明确展示,而是放在了每篇微记的最底部;
  • 没有足够的提示设计,需要用户思考;

在这里说明一下,在第二版的设计之前,期间也有无数的小版本,小想法,但大多不成熟,会很快被自己否决。

第二稿将做以下调整:

1、块状缩小,一屏,可以正常显示1到3个微记内容;

关于微记内容的设计:

  • 此前设计样式只符合一张图片,再多发表一张,用户是看不到的。这里的做法应该是让用户看的到,但是看不清,触发用户点击;
  • 将发表时间提到微记内容的上面,增加点赞botton;

2、4个tab依然放在界面顶部;

3、添加微记botton放在最右手边,方便用户点击,触发用户点击;

4、因为微记块状的缩小,所以取消左右滑屏,改为左右有一个时间导航(前一天,后一天),用于用户点击;

下面就是我第二版改版的设计原型图

产品原型设计之交互体验的思考过程(一)

第二版针对第一版出现的严重问题,做了很多的而改进,但依然存在或多或少的问题,仍然需要不断怀疑和提高,针对第二版的改进,我会在《产品原型设计之交互体验的思考过程(二)》中继续更新说明。

 

作者:大圣(微信号wzydml),交互设计师。

本文由 @大圣 原创发布于人人都是产品经理。未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/29309/

(0)
CatherineCatherine
上一篇 2017-05-23 20:11
下一篇 2017-05-23 22:14

相关推荐

  • APP设计当中不容忽视的20个小细节

    APP设计当中不容忽视的20个小细节如下: 1、一致,一致,还是一致 你能做的最重要的事情就是保证用户界面运作的一致性。对于列表框来说,如果双击其中的项,使得某些事件发生,那么双击任何其它列表框中的项,都应…

    2015-04-14
  • 《用户体验可视化指南》视频讲书(3)

    《用户体验可视化指南》书中第一章的第二部分。客户旅程是一条线路,用户地图是多条线路的集中展示,专注于服务蓝图的交互可视线之上的部分。心智模型本质是聚类,空间地图用于更复杂的系统去表达信息流和内容之间的关系。点击视频观看(大约10分钟)兰静同学听后分享这节视频有3个内容,其中有个非常重要的内容,解决了我也疑虑已久的问题:客户旅程图和体验地图,到底有什么区别?视频中详细的说明了二者的区别:一条线和多条线。客户旅程图强调了用户是怎么一步一步做...

    2018-04-01
  • 移动应用程序可视化流程图示例

    移动应用程序可视化流程图示例

    2016-06-20
  • 真诚的用户体验设计

    不知道身为「用户体验设计师(UX Designer)」的诸位是否也有过和我一样的困惑:初入行时兴冲冲觉得自己就是那个为一切产品用户体验问题负责的「真命天子」,积极主动去搜集反馈访谈用户,可当真正卷起袖子打算为解决这些「体验问题」大干一场的时候,却发现有些无从下手。

    2017-05-26
  • 新知 | 在打造用户体验上,连雷军都要向这家企业学习

    在我们之前发布过的一篇文章《小米八周年:雷军揭秘四大成功之道》中提到过,雷军在创建小米时受到了美国零售连锁超市好市多(Costco)的启发,从价值体系上来看,小米与好市多相同,都是希望用户能以可承受得起的价格享用更好的产品。好市多以优质、低价出名,在全球拥有700多个分店。从2006年到2016年,好市多的市值增长了五倍,如今的市值约为670亿美元。好市多亚洲区总裁张嗣汉在2018零售业年会上分享了好市多的运营模式、会员制度,以及管理层...

    2018-05-04
  • 【译文】UI设计评审成就微创新

    产品设计流程中,有必要对设计进行评审是大家的共识。在我每周的工作内容中,参加各类大大小小的设计评审是必不可少的一环。既有脑力激荡的评审让设计方案脱胎换骨的,也有针锋相对的评审让设计方案摇摆不定的。怎样进行一场高质量的设计评审?设计师应该如何应对设计评审,更好的表达设计意图,并收集意见改进方案?怎样避免设计评审变成竞稿或PK?如何确保设计评审这样的流程能带来更大价值?带着这些问题,我们一起看看原文作者Jason的观点。*在你点评的设计细节上开始询问背后的原因及意图。为什么我们需要这条信息?对于允许索取这条信息我们设置了哪些期望?我们会用它做什么?如果我们能回答它们,再进入讨论解释各种元素的优劣以及与之对应的不同意见会比较好。“为什么”引出一个故事,解释某件事情的真实性。如果你问为什么,一切都无法奏效,你更想要创造一个故事,无论真实与否。这是让你感到糟糕的危险领域。 与询问“为什么”不同的是,考虑询问“如何”能够引出一个创造流程的故事,不必为它的存在辩护。然后你可以问设计师之前考虑过的各种可能,认真倾听设计师在提供方案之前做过的尝试。他们也许过于看重某些东西,不过没必要深究。优秀的适时交互是让产品(服务)吸引或失去客户的关键区别。将间歇性的互动变为持久关联的秘诀在于一系列精彩微交互,以及当用户需要时恰好出现的信息内容。 在设计评审流程中,应当询问每一个行动、每一次询问或者每一次数据展示是否出现在正确的时机,以确保界面在切换时传递信息时顺畅。随着扁平化设计与用户体验趋势的摇摆变化,我们能预感到页面部件缺少视觉线索的风险,因此动画能减少这种风险。 这种动效可能是颜色、透明度的变化,也可能是用猴子的手臂延伸页面这种细节,或者用户完成任务后展示太阳升起的效果。询问在UI设计中加入逐步动效的可能将极大的推动设计师改善设计,使得设计师思考时间维度的设计细节,而不只是局限在空间维度。这是一个很好的问题,我认为它是每个人都应该吸收的教训,尽管并非如此。我总喜欢提到:对用户的真实目标来说,页面或屏幕上的任何元素都不是解决方案的一部分,而是噪音和干扰。 在设计的每一步中,我们都需要自问:我们如何能够创造更小思考成本下能发挥同样作用的产品?在设计评审中,这是要求把方案简化的最佳表达。在设计中保持界面清晰很重要,使用尽可能少的点击、文案和输入框来达成目标更好。踏踏实实的把用户需要完成工作的消耗降到最低,用户会感激不尽。我们认为,很棒的产品描述(比如产品手册)对用户来说就跟“坐在60码时速的车上看到的广告牌一样”,UI设计师们比较难理解用户是如何忽略这些产品界面细节的,尽管设计师为此付出诸多努力。 优秀的设计评审放慢节奏,考虑每个元素,但是能认识到这些设计细节可能不会被用户注意到。如果参加评审的人员在颜色、字体及体验设计方面没有专业知识,他们可以考虑以下重要因素:经验告诉我,不要试图一概而论。例如我会问“我不确定开放的banner是否足以传达品牌?”,而不是问“哇,用户根本不会理解我们的品牌价值。”这就是为什么我认为每个设计师应该花时间观察用户并且使用自己的产品(又称可用性测试)。

    2017-05-18
  • 译文|为什么产品思考将成为交互设计中的一大重要的步骤

    生命有限,不能去浪费时间去做一些没人用的东西“明确用户想要什么,不是用户本身的责任” – Steve Jobs“沉浸在一个问题当中,而不是一个具体的解决方案。”- Laura Javier“创造功能很容易,但是创造出合适的功能给需要的人就很具有挑战了。”

    2017-05-29
  • 交互说明标注工具合集

    最近很多同学在问交互原型里里的标注怎么做的? 其实很多原型工具可以做到例如Axure、justinmind,但是做起来比较慢且不美观。有没有专业的工具呢?这不我们介绍几款常见的产品。   Specctr 首先是由 Onpixel …

    2016-04-06
  • 老外看中国的移动App设计精髓-1 ui设计的十大精髓

    摘要:本文作者Dan Grover用最直接的方式体会了中国移动互联网的发展。这是一个外国人眼中的应用UI在中国的趋势,基本反映了当前国内UI设计的状况,从他的所感所想中,认真审视这些在别人看来,我们自己身上所拥有…

    2014-12-11
  • 用户体验和可用性之间的联系和差异,你都知道吗?

    本文转自本文由优设网作者 :Amy Smith,版权归作者所有阅读需 5 分钟Amy Smith – 最近几年来,用户体验设计逐步成为了目前设计圈中广泛认同的重要设计环节。而“可用性”这一词也作为改善用户体验设计的重要度量而发挥着无与伦比的作用。于是乎,除了“用户体验设计师”这一职位,在欧美的产品和设计团队当中还诞生了“可用性工程师”这样的专业职位。另一方面,这些相互关联,在含义和功能上有所重叠的专业词汇,让许多设计师和相关的从业者感到...

    2018-03-03