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

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

文章目录[隐藏]


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

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

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

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

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

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

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

对于图片+文字

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

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

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

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

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

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

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

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

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

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

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

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

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

  • 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

相关推荐

  • 交互设计的五要素:用户、行为、目标、场景、媒介

    在公众号里经常收到朋友的留言,到底什么是交互设计师?交互设计师具体是干什么的?为什么很多互联网公司都没有交互设计师这个岗位?希望通过这篇文章把交互的本质说清道明。

    2017-05-14
  • 译文|「设计师学习商业」中「Why」与「How」的问题

    Airbnb、Pinterest、Kickstarter、小米等一系列的创业企业有什么共性?他们都有设计师作为创始人,在创始团队中就加如了设计的基因。商业决策者们在努力地把商业策略融入到产品设计的内涵里,而你——一名设计师,又是否了解商业呢?今天我们分享两篇文章,分别讨论了「设计师学习商业」中「Why」与「How」的问题,希望你能有所启发。

    2017-05-25
  • 腾讯CDC标叔力作!聊聊我与交互设计的那10年

    编者按:很有幸能看到这篇文章,作者见证了腾讯CDC从寥寥数人变成一个成熟团队的整个过程,成长经历相当有可读性,且值得设计师学习反思的地方太多,无论是哪个领域的同学,都推荐阅读收藏。 前言:今年同时是我工…

    2015-11-29
  • 设计室开题 | 用户体验设计从入门到实战

    凯诺设计室(Canopy Design Studio)基于研究、实际项目而设立,每期6-12人、5-10周,在设计室讲师的带领下,从无到有生成完整方案,基于线上教学,打破地域限制,回归设计专业基于studio教学的本质,主题涵盖建筑、景观、城市、艺术、人机交互、用户体验设计等领域。*设计室开题请关注凯诺公众号或官网这是第38个凯诺设计室▽Chenyu SiWanderlust Inc 产品设计师加州大学圣地亚哥分校HCI学士凯诺优秀讲师...

    2018-04-07
  • 乐观派UI:真实的谎言

    我真诚地希望,这篇文章能帮助你理解乐观派UI设计背后的核心观念。乐观主义,形容词,对于未来充满希望和信心。

    2017-05-15
  • 还有不知道锤子ROM新特性的吗?Smartisan OS v2.0.0 更新日志

    Smartisan OS v2.0.0 开始公测,本次更新新增功能 10 项。主要有:1.丑颜相机;2.超大图标;3.透明桌面;4.桌面人脸识别功能;5.欢喜云查岗。今天我们会将该版本随机推送给 520 位 Smartisan T1 手机用户。欢迎收到…

    2015-08-05
  • 孟菲斯设计风:重回80年代,为网页注入迷人的设计风格

    复古一直在流行,这也是为什么过去许多设计趋势常常会沉寂若干年之后,又再次走到潮流的最前线。今天,我们要聊的是孟菲斯设计风(Memphis Design),这种设计风格充满了80年代的特征,明亮的色彩和多样的图形与线条充斥其间,它也是近年重归流行的设计风格之一。

    2017-05-12
  • 新零售下的智能终端设备全链路用户体验设计分析

    作者:阿里UED/丹妮2017年被称作是新零售的元年,阿里巴巴集团CEO张勇提出的“新零售”概念,提出通过大数据、互联网重新构造“人、货、场”场景,数字化技术已被逐渐应用在传统实体零售的每一个环节。在小店业态中,智能终端设备成为收集大数据的唯一通道,被互联网行业视为重中之重,而在纷杂的POS市场中,绝大部分都是沉重的桌面式收银POS机器,这时智能移动POS机作为收银POS机器的补充设备应运而生,智能移动POS机以移动便捷、功能齐全等优势...

    2018-01-31
  • 两会唤醒全民关注用户体验

    聚焦2018年全国两会,共有13位人大代表和政协委员提倡在相关领域内发展与提升用户体验,范围遍布于新能源汽车、互联网、通信、教育科研、传媒、版权保护、交通运输与医药等数十个行业,引起了社会各界的广泛关注。两会期间,全国政协委员叶友达向大会提交了《关于鼓励基于用户体验的设计创新,加速科技创新成果转化的提案》。叶友达建议,从国家层面启动基于用户体验的设计创新倡议,构建用户体验设计创新战略和行动纲领。同时要加大对基于用户体验的设计创新的宣传力...

    2018-03-28
  • Sketch迎来重大更新,叫板PS爸爸?

    11月8日晚,Sketch 悄悄的更新至 Sketch 41。至此3X系列已经离我们而去,4X系列正式到来!在此次更新中,还是有不少惊喜的。今天一一做个盘点。全新 LogoSketch 拟物化黄色钻石 Logo 已经成为历史。新Logo 顺应了设计潮流,简化色彩并弱化光影关系。不过有一点令我很在意,就是新Logo的倒角处理(面与面之间的接缝)。之前的Logo倒角很锋利,有种割破手的感觉,典型的 2D 图形拼接效果;新Logo倒角光滑,做...

    2018-04-26