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

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

文章目录[隐藏]


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

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

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

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

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

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

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

对于图片+文字

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

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

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

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

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

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

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

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

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

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

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

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

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

  • 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

相关推荐

  • 用户体验分享-儿童玩具上的用户体验与交互设计

    大约在同一时间,我成为了一位父亲,我刚进入用户体验世界,试图找出如何使我的产品,够了吧,可以理解的、 易于使用,并且直观。我是一个巨大的玩具迷,还是玩,他们之前到达了我的儿子,但他在房子里意味着更多的玩具和更多的机会来观察他与他的玩具在他的生活非常首个月的交互。看着他让我想起了关于如何普遍经验和界面设计是在我们的生活从一开始,从这些经验,我们能学到多少 — — 尤其是如果我们打算建立一种可以理解的产品。

    2015-01-03
  • 作品集总结|本科建筑跨专业申请交互设计?Dream School还是皇艺?这可能吗?

    PS-ONE#20180504建筑背景,申请交互设计跨专业申请结果如何?本科建筑,转专业申请交互设计Master?并且Dream School还是世界第一的RCA皇家艺术学院?在经历了PS-ONE历时8个月的内部评审后她如愿以偿了吗?。。。。。。8个月后爱丁堡大学,get拉夫堡,get交互设计,是细节非常复杂的专业涉及到的知识点、设计思维,对转专业申请者来说,是很苛刻的所以拿到爱丁堡、拉夫堡这样强势院校的Offer已经是很不错的结果了但...

    2018-05-04
  • 【招聘】萧山众多高薪岗位专场来了,就在等你!

    萧山之窗移动生活由此开始....关注还在愁到哪里去上班吗?还在担心工资不够花吗?这里或许有适合你的岗位!2018萧山信息港小镇春季综合型人才招聘大会企业名称招聘岗位微医集团(浙江)有限公司资深Java开发工程师,搜索研发工程师,前端架构师,Java架构师,自然语言算法工程师,医学影像算法工程师,家庭医生,健康管理师,HRBP,客服专员浙江讯飞智能科技有限公司系统测试工程师,资深视觉设计师,视觉设计师,大数据工程师,高级交互设计师,研发架...

    2018-03-21
  • 7个实用规则,让你的设计更加简单直观

    简单直观的设计并不一定非得是极简的,它同样可以是丰富而又有趣的。

    2017-05-09
  • 走心!优秀的移动端UI应当如何用微交互打磨细节?

    UI设计的细节很重要,它不仅仅体现在静态的元素上,动效和微交互也是如今UI和UX设计中最重要的细节。想要打造优秀的移动端UI设计,微交互和动效设计是绕不开的问题,今天的文章我们来聊聊这个。

    2017-05-19
  • 你如何设计交互?

    进行界面设计时,很显然我们一上来就会想着画出整个流程。但这真的是最好的方法吗? 我曾偶然进行了编写一个具有想象的人机对话,之后我再继续使用画流程的方式。 编写人机对话的方法改变了我的思维方式,我再也没…

    2015-08-12
  • 特殊情况下的APP设计(6):交互走查表

    本文作者将用交互走查表的形式,对系列文章“特殊情况下的APP设计”进行一个总结。enjoy~

    2017-04-27
  • 使用无序列表的7项注意

    小圆点有助于分割大段文字,使得复杂的文章和博客更容易消化,突出关键信息。如何运用好无序列表?这篇文章提出了7个注意点。

    2017-05-02
  • 产品设计之行为学研究,四步打造影响力超高的产品!

    我们每天都感叹“改变”有多难——落空的新年计划、从未使用的健身卡、东西少吃点、存款留多点,可惜都止步在了yy。

    2016-08-29
  • 花了7天看了上千个交互动效神作,我总结出5个技巧

    对一个全无经验的动效新手而言,如何制作出「正确」而不是「华丽」的动效?今天这篇Medium 上的好文,从克制、交互叙述流程、一步完成、不是动效的错和把握细节五个方面,附上案例分析,帮你学会基础的动画制作技巧。

    2017-05-22