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

接着上一篇《产品原型设计之交互体验的思考过程(一)》,这篇主要针对微记第二版的原型设计调整的思考过程作一下详细的说明。

文章目录[隐藏]


接着上一篇《产品原型设计之交互体验的思考过程(一)》,这篇主要针对微记第二版的原型设计调整的思考过程作一下详细的说明。

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

下面这张是最初微记原型的设计稿

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

说明一下第一版存在问题,以及是怎么发现的。

一开始还是针对每一篇微记设计开始说,微记设计共有三种形式

  • 图片+文字
  • 纯图片
  • 纯文字

对于图片+文字

第二版的设计结构是  第一部分【用户头像、昵称、发表时间、点赞】+第二部分【图片】+第三部分【标题文字内容】

对于第一部分和第三部分,基本没有什么问题,主要针对第二部分,多照片的展示设计

现在的展示方式,优先展示用户选择的第一个照片,其余照片集中放在左上角,原则上是没有什么问题,但是给人的视觉太拥挤,没有一张图片是完整展示的,一张照片没有问题,但是一旦照片多了,就会遮挡第一张照片,造成视觉困扰。所以我决定将这块部分改一改。

首先,打破第二、三、四…图片放在第一张上的设计形式,希望所有图片统一大小展示或者相互之间不干扰,一开始,我是选择了使其图片统一大小展示,然后将第二部分位置相对宽度增加了一些,使其看起来比第一和第三部分宽一些,重点突出第二部分。

下面是我修改之后微记(图片+文字)的原型设计稿

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

罗马不是一天建成的。当然,设计稿也不是一两次就可以定稿的,修改之后,设计方面没有问题,但是交互却有些别扭。让用户在上下滑动,然后时不时的左右滑动查看图片,并不能方便用户查看微记,用户体验并不流畅。

于是,还是选择用户与图片之间采用点击的响应方式,但是要使他们之间相互不干扰。

下面是我再次修改之后微记(图片+文字)的原型设计稿,已经定稿

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

下面是微记纯图片和纯文字的原型设计,还有到目前为止微记功能界面的原型设计稿

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

当时拿着这一版给一些用户做测试的时候,明显较比前一版本用户体验流畅许多,但是也仍然存在着一些预期没有想到的问题。为了让大家了解,我后面微记调整的一些方法以及原因。我在这里把目前这稿的问题说一下:

  • No.1:日历图标,大部分用户并没有点击,然大部分用户没有点击的原因,是以为“这只是个图片而已,并不具有交互功能”;
  • No.2:前一天和后一天,有一些用户表示,自己能看的内容可能有限(用户多了,自然内容会增加,这点并没有做太多的考虑)

针对第一个(No.1)的原因,我将日历图标放在了“添加微记”的上面,在这里说明一下,考虑到两个图标比较多,可能会影响到用户浏览微记,所以这两个图标的交互动作,当用户向上滑动屏幕浏览时,两个图标消失,当用户停住或者向上滑动时,两个图标出现。

下面就是我修改之后的微记原型设计稿

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

这样就很好的解决了“用户认为日历只是一个图片的图片”,这样设计,“日历”交互功能显而易见,也更加方便用户查看点击。

现在整体微记的设计是没有问题的,那就要进行更深入的思考,从整体功能性考虑,日历图标的出现和我将微记展现形式用“昨天、今天、明天”的形式呈现,是否功能方面有些冲突。两者的存在意义是否有点相同。

我有在《麦粒-其产品原型设计的交互思考过程(一)》中说过:微记,通过图片和文字为家庭成员记录他们每一刻、每一天的生活点滴,创造全家人的共享记忆。而日历的功能其实已经满足用户用“天”的方式来查看微记,“昨天、今天、明天”的设计形式,似乎显得多此一举。而且如果去掉可以使用户可浏览的内容增多,所以我决定放弃之前的设计方式。

我便直接将其去掉,原型设计稿如下图所示:

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

最后,产品经理希望用户可以随时发表微记,而不是只在一个功能界面,于是我将导航移动到界面的底部,将“添加微记”放在了中间位置。

设计稿如下:

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

我从第一版的设计到现在最后定稿的原型,给大家展示一下,方便大家从整体、从细节查看其中的变化与思考过程:

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

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

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

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

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

 

这只是产品其中的一个功能界面而已。之后我会继续更新更多文章或者作品…

 

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

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

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

(0)
CatherineCatherine
上一篇 2017-05-23 18:16
下一篇 2017-05-23 20:11

相关推荐

  • 《用户体验草图设计工具手册》丨NOTES

    当前浏览器不支持播放音乐或语音,请在微信或其他浏览器中播放HappyPharrell Williams - Happy [From "Despicable Me 2"]本书讲了什么本书将指导你如何一步一步地用草图来表达你的设计理念,并介绍了多种草图方法。适合于所有设计行业的从业人员参考阅读,设计组织的领导者也可以参考阅读,包括设计师、可用性专家、人机交互界人士、产品经理人及商业高管等。作者什么来头Bill Buxton,微软首席用户体验...

    2018-05-08
  • 58内部方法!一个更适合产品迭代的卡片创意法

    58UXD:交互设计 师常常需要进行迭代设计,在已有的产品框架上发现问题,优化体验,更好地达成产品目标。

    2017-08-25
  • 交互开始的第一步:触发器详解

    最好的触发器应该是符合情景的,体贴用户的,触发器的控件应该与其要传达的状态匹配,且引人注目的程度要与其使用频率匹配,标签也应该简洁明了,通俗易懂。

    2017-05-22
  • 【IXD案例】国际第一时尚品牌VOGUE-iPhone端案例高保真原型-抽屉效果案例

    本次分享给大家展现依然是高保真效果的原型,上一次展现的是iPad版本的,这次是iPhone端版本的原型,和上次一样,我们依然以国际第一时尚品牌VOGUE为例:iPhone端的效果比iPad更复杂,难度更高,我们要做的是抽屉效…

    2016-02-26
  • 用户体验设计中的简单与复杂

    当大大小小的界面设计案都做过一轮之后,你就会发现,做一台小小的MP3拨放器,跟搞一台智能型机器人,过程中会遇到的问题,其实都是很类似的。所谓的简单与复杂,并不在于案子的规模,而在于你看事情的角度。 &nbsp…

    2014-12-05
  • UX设计师如何进行面试?

    面试,分两种:一种被人面,一种面别人。作为设计师我们肯定都被面过,当然也有高阶设计师面过别人。“如果被人面,你要展示哪些能力素质才能得到面试官的认可?”;“如果面别人,你要关注哪些信息才能找到合适的设计师人才?”到两个问题,答案其实可以是一个,理清思路不论是对求职的设计师,还是对负责招人的设计师都能有所帮助。最近看了一些设计师求职、面试相关的文章,结合我的经验重新做了整理,分享给大家。

    2016-05-30
  • 在设计过程中,设计师如何输出一个更落地的动效呢?

    优秀的动效设计更能让用户从中感到惊喜,让用户感受到产品的温度和调性。

    2017-05-05
  • 原型设计里的线框图与原型是什么鬼?发展历程是怎么样的?

    备注:IxD是交互设计缩写。 UX是用户体验缩写 导读:本文作者Jerry Cao是UXPin的内容决策者,也是UXPin 这款在线线框图/原型工具的在线内容开发者。如果你想学习设计原型的思路,熟悉相关工具,以及完整的设计流程…

    2015-06-11
  • 色彩和体验的平衡:为色盲用户设计网站

    如何为色盲用户设计网站?本文作者与大家分享了5点小技巧。WCAG 2.0级AA要求正常文本的对比度为4.5:1,大文本的对比度为3:1(14点和大于或大于18点或更大)。——WebAim颜色对比检查器

    2017-08-02
  • 【探索Facebook】Instant Articles 新方法来创建快速、互动、自动播放视频的文章

    文章前面就是演示视频,建议先看视频哦,流量党请找个WIFI,土豪就当我没说~! 我们很高兴地介绍即时文章Instant Articles,快速,互动体验阅读的文章在新闻内容。 使用在Facebook应用程序加载的照片和视频很快相同…

    2016-01-16