首页 > 编程知识 正文

做交互原型的软件(ui交互原型图)

时间:2023-05-05 04:44:31 阅读:88751 作者:96

人人都来产品经理【起点学院】,BAT实战派产品总监的手把手系统带你学习产品,学习运营。

接上一篇《产品原型设计之交互体验的思考过程(一)》,我主要详细介绍一下微记第二版的原型设计调整的思考过程。

下面是第一篇微型笔记本原型的设计稿

说明第一版有问题和是怎么发现的。

最初我们开始谈论各个微设计,微设计有三种形式

对于图片+文字

第2版的设计结构是第1部【用户的头像、昵称、发表时间、点赞】第2部【照片】第3部【标题文字内容】

关于第一部分和第三部分几乎没有问题,但主要关于第二部分,是多张照片的展示设计

在目前的展示方式中,优先展示用户选择的第一张照片,剩下的照片集中配置在左上角,原则上没有问题,但视觉上很拥挤,没有一张照片是完全没有问题的,但是照片多了之后第一张照片就会被遮挡,视觉上很困扰所以我决定改变这部分。

首先,第二张、第三张、第四张……我希望把照片放在第一张上的设计走样,所有的照片都统一大小来展示,或者互相不干涉。 一开始,我选择了将那张照片统一大小进行展示。 然后,相对于宽度稍微增加了第二部分的位置,使其看起来比第一部分和第三部分要宽一些,强调了第二部分。

以下是我修改过的微记(照片文字)的原型设计原稿

罗马不是一天建成的。 当然,设计稿也不是一两次就能完成原稿的,修改后,虽然在设计方面没有问题,但是交互上有点不协调。 让用户上下滑动,然后偶尔左右滑动看图片,不方便用户看微记,用户体验不流畅。

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

以下是我再次修改后的微记(照片文字)的原型设计原稿,原稿已经确定

以下是象形图和纯文本的原型设计,以及迄今为止象形图功能界面的原型设计原稿

当时,拿着这个版本对一些用户进行测试时,体验明显比前一个版本的用户流畅,但也存在意想不到的问题。 为了让大家知道,我稍后会细述调整的一些方法和理由。 现在说一下现在的原稿问题:

No.1 )大多数用户没有点击日历图标。 但是,大部分用户没有点击的理由是,他们认为“这只是图像,不具有交互功能”。 No.2 )前一天和第二天,有用户表示,自己能看到的内容可能有限(不太考虑随着用户的增加,内容自然会增加)。 关于第1个)的理由,将日历图标放在“添加微记”上。 在此进行说明,如果两个图标多,则有可能会影响用户的浏览

以下是我修改过的微记原型设计稿

这样可以很好地解决“用户认为日历只是一张图像”的问题。 这样设计后,“日历”的交互功能变得更容易理解,用户查看点击也变得更容易。

现在整体的微型笔记本的设计没有问题,所以必须更深入地考虑。 从整体功能性来考虑,日历图标的出现和我用“昨天、今天、明天”的形式来表现微信的表现形式,是不是在功能上有点冲突? 两者的存在意义是不是有点相同?

我在《麦粒-其产品原型设计的交互思考过程(一)》上说过,微记是用照片和文字为家人记录他们每天、每天的生活点滴,创造全家人的共享记忆。 日历的功能实际上满足了用户在“天”上看微信的需求,“昨天、今天、明天”的设计形式,似乎多此一举。 然后,如果丢失了用户可以阅览的内容,就决定放弃以前的设计方式。

我直接把它去掉,原型设计稿如下图。

最后,产品经理希望用户不仅可以发布一个功能界面,还可以随时发布微信,因此将导航移动到界面的底部,将“添加微信”放在了中心位置。

设计原稿如下。

我从第一版的设计到现在最终稿的原型,都给大家看,方便从整体、细节上看其变化和思考过程。

这只是产品的功能接口之一。 之后也会继续更新更多的文章和作品.

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

这篇文章发表了@大圣原创人人都是产品经理。 未经许可禁止转载。

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。