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

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

文章目录[隐藏]


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

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

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

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

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

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

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

对于图片+文字

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

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

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

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

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

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

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

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

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

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

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

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

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

  • 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

相关推荐

  • Sketch 49 新增交互原型能力

    看到更新弹窗蛮讶异的,完全没有见到相关消息或Beta版本,官方博客与Medium也毫无动静,太过突然,总之就是这样:“Prototyping: You can now connect Artboards with Links and Hotspot layers to create prototypes of your designs that can be viewed in Sketch Preview,Sketch Cloud,a...

    2018-03-02
  • 标签栏设计的心理暗示:高亮与视觉纵深的心理模型

    UI在设计上服从于交互,形式上不拘于一格,视觉纵深也只是其中一种心理模型。
    注:本文面向入门级设计师,大神请飘过~

    2017-05-18
  • 《用户体验可视化指南》视频讲书(6)

    《用户体验可视化指南》书中第2章的第2部分从伦敦地铁地图,看体验地图的元素、范围和根据目标的取舍。点击视频观看(大约10分钟,推荐室内安静、有wifi环境下播放)兰静同学听后分享从这里开始讲绘制共线图前的5个思考点:视角、范围、焦点、结构和用途。蓉姐在这节视频中主要讲解了视角和范围这2点。1、视角有2个决定因素,目标用户和想要绘制的体验类型。a. 每类目标用户,在产品互动的关键触点上,应该是有明显差异的。哪些企业的主目标用户,哪些是次级...

    2018-04-10
  • 【新锐玉商风云榜】颜传赞:以‘用户体验’为支点 撬动家装行业“一键式”转型升级

    在父辈创造的奇迹上,是传承、是创新、是开拓,每一位新生代年轻玉商都在给出自己的答案。——“新锐玉商”专栏总题记新锐玉商风云榜他是“2016浙商年度创新人物”;他提出“构家”如“构车”的“一键式”整体家装新理念,推动家装行业从传统的手工作业升级为家装工业4.0;他的公司“构家”获得复星集团数亿A轮投资。他就是坊间广称为“船长”——杭州构家创始人兼CEO颜传赞。在经济创新这条漫长的大道上,颜传赞以玉环人海派的作风和追求卓越品质的韧性,谱写“...

    2018-02-03
  • 细节体验|你离用户只差一个好的交互

    上一篇我们简单的提到过“在合适的时机出现”这个交互细节打磨点,今天我们继续沿着这个点,剖析一些常见的交互细节点及案例。

    2017-05-18
  • iOS和Android规范解析:提示框(Toast)对比

    在交互设计稿中Toast是其中很常用的一种用户反馈手段,但是作者却发现在iOS中根本没有toast这种部件,那么在设计该如何处理呢?一起来看看作者的解读。Snackbars包含一行与进行的操作直接相关的文案(文案前不可有icon)。它可以包含一个操作。Toast优先适用于系统提示。它也在屏幕下方出现,但是不能被划出屏幕外(而被清除)。潜移默化地将状态改变或者其它类型的反馈放进你的界面中。理想的情况是:用户可以不用进行操作或者被打扰,就能得知重要的信息。
    Unobtrusively integrate status and other types of feedback into your interface.Ideally, users can get important information without taking action or being interrupted.

    2017-05-05
  • 让产品经理无言以对的交互设计流程

      首先,要感谢我的 Leader 和师姐,在他们的帮助下,我才理清了这个交互设计流程。   虽不敢说这套方法一定是最优的,但至少是我工作以来一个的专业上里程碑。   话不多说,直接开讲。   日常…

    2017-03-06
  • 网页设计中视频运用的7个技巧

    随着网络传输速度的提升,视频在网页中的应用越来越多,也越来越广泛,带宽和流量对于网页视频的限制已经不再像5年前那么明显。而移动端设备的性能的提升,在移动端网页中使用视频也并不显得吃力。所以,今天我们常常能在不同的网页中看到各种不同功用的视频。

    2017-05-08
  • 交互设计:补上学校不教的这一环

    作者:郦橙 锦妖链接:https://zhuanlan.zhihu.com/p/25279058不知道其他专业有多么具体和细致,我自己的专业(CMU Mii-PS)是典型地抓大放小,各种设计实操细节统统不讲,全靠自己摸索。我也曾经狂看blog,看书,…

    2017-08-02
  • 帅气的YouTube改版交互设计,获Adobe大奖

    美国设计师Ziarekenya Smith为Youtube制作的概念交互设计,获得2014年Adobe设计大奖。项目视频↓↓↓Ziarekenya Smith一人承担了设计、动画、音效所有内容.新Logo,一个简洁的取景器,更强调用户UGC特色新的登录页面新…

    2017-08-02