游戏

交互设计流程图美图秀秀交互再设计

2019-05-15 02:06:46来源:励志吧0次阅读

1 : 美图秀秀交互再设计

出于职业习惯,使用1款产品时总会不自觉地对其设计进行分析。当打开美图秀秀时,我知道,我又开始了。

美图秀秀是厦门美图科技有限公司旗下的1款产品,分别有 PC 客户端, Android, iPhone 利用。公司旗下还有其它几款产品:美图看看免费看图软件,美图拍拍摄像头自拍软件,美图淘淘店图片批理处理软件,美图化装秀强大的上妆软件。个人非常看好美图淘淘,依托淘宝这个大平台,它为广大淘宝店家们解决了开店进程中必须面对的问题,这个需求是非常刚性的,而且目标用户的使用频率还非常高。

但是,今天我重点分析是美图秀秀这款利用在 Android, iPhone上的交互设计。这是1款典型的工具型利用,用户在开启利用时就面临着选择:美化图片,拼图。下面是具体的操作流程:

在使用进程中,通过设计引导,很轻松地完成了任务,目标导向非常明确。但是,这样1款完全工具化的利用用户粘度有多大呢?当用户的新鲜度过后,他们开启此利用的频率还有多高呢?不知美图秀秀的产品设计者是否是有想过建立自己的图片社区,正好与 PC 上的 美图秀秀、美图看看联系在1起,不管在上,还是在 PC 上,用户都可以方便地把图片同步的云端。

具体到交互设计上,我们只能在图片阅读器中查看美图秀秀美化过的图片,而要调起美图秀秀时只能通过退出图片阅读器或多任务管理,不管哪一种方式都不够方便。常常会遇到这个的使用情形:用户向朋友展现他用美图秀秀美化过的图片,朋友询问这个是如何做到的,这时候用户就得去启动美图秀秀,演示给朋友看。那末我们为何不设计成直接在利用内就能够查看美化过的图片呢,当要再次美化时可以迅速切换呢?

为此,我对美图秀秀的整体信息架构进行了调剂,依照自己的想法进行了原型设计 。以下:

我在程序界面下方加入了导航栏,把原来在界面中间的功能选项:美化图片,拼图 移到了导航栏上,还加入了 图片 选项,用户可以通过切换 Tab 项来方便地查看图片,新手帮助、 关于、 设置 这些都放入到了 更多 中。通过此设计,用户可以选择各 Tab 项来进行相应的操作,对全部利用的交互有个全局的把控。

以上只是自己对美图秀秀这款产品在设计上的1些想法,全当抛砖引玉,还请指导。

文章来源:转载请注明出处链接。

2 : 交互设计流程图怎样画?

1 甚么不是设计流程图?

以下是百度百科关于流程图的定义:

以特定的图形符号加上说明,表示算法的图,称为流程图或框图。流程图是流经1个系统的信息流、观点流或部件流的图形代表。在企业中,流程图主要用来讲明某1进程。这类进程既可以是生产线上的工艺流程,也能够是完成1项任务必须的管理进程。

我把见过的流程图大致归纳成两类。

1类是表示算法或内部逻辑的,像这张图:

可以看出来这类流程图是描述算法逻辑,或可以理解成物体的底层的运作逻辑。它的特点是底层,复杂。但它不是设计流程图。

1类是表示业务或工作流程的,像这两张图:

业务流更常见于1些办事流程、服务进程,里面有各个不同的单位、人、物品参与其中,它的特点是宽泛,简单。但它不是设计流程图。

2 流程图的基本构成。

从上面几张图可以看到,流程图由特定的图形构成,但具体的样子由图本身的目的和浏览者的浏览习惯(或约定)来决定,所以使用的图形其实不是固定的,比如有人用圆形表示开端和结束,有人则用圆角矩形,有人有云团表示其他流程的援用,有人用矩形加文字来表示,情势不重要,到达描述的效果而阅读者能读懂才是重要。设计流程图也遵守这个原理。

3 设计流程图。

设计流程图长得其实不特别,跟全球流程图都差不多,也一样是作为1种表达工具存在。区分只在于描写的对象和组成的内容不1样。设计流程图的1大重点是面向表现层,也就是说,描述的是界面(或叫屏幕)的变化,是用户看到的界面的行动流。什么行动呢,界面之间的跳转逻辑,也就是导航逻辑。

导航是信息架构的1部分(教科书把信息架构划分为组织、导航、标签、搜索4个系统),固然是交互设计的重要1环,导航的设计思路就可以用流程图表达出来(或也能够说用流程图来辅助设计吧),这也是个人觉得设计流程图的重要运用。看下图:

从图中可以看出构成:

a 界面。

1个矩形代表1个界面,这个流程中用户走过两个界面(登录页和首页),由于表达的是界面的跳转,界面是用户实实在在接触到的媒介,非界面的内容,不要出现。

b 动作。

矩形之间也就是界面之间加上1个触发动作,比如从界面A点击下1步按钮,到达界面B,“点击下1步”就是连接这两个界面的关键动作,需要标示出来,上图例子就是“单击提交按钮”。

c 条件。

1个动作以后可能有多种“是/否”的结果,则在矩形之间、动作以后加上1个或多个判断菱形。如上图的()检验账号密码是否是输入正确。

2、注意什么?

1 坚持表达表现层。

不要1个流程图里面,又有内部算法逻辑,又有界面逻辑,下图标红的矩形就是过剩的,这个不关用户的事情,会扰乱你的导航设计思路:

不要把步骤和界面本身都用矩形表示,比以下图标红的矩形(况且你还不知道用户填写的顺序呢,我先填密码不行啊):

2 抛弃系统毛病。

甚么是系统毛病呢,也就是非用户犯的毛病,比如登录的时候服务器当了,络连接毛病等致使登录失败。除非你特别想强调系统毛病后的提示界面,否则建议不要加进去流程图里面,由于每步操作都可能毛病,你的流程图会因此变得很庞大。以下图:

3 情势可以很灵活。

a 如果1个界面可以通往多个界面,而你又真要描写出这些跳转,那就1个矩形长出多条线路,对应标示上对应的动作就ok了。如图:

b 如果几个界面属于同1逻辑,比照实际是1个界面的几个tab,则可以这样把几个tab包起来:

c 如果你想把1些警告窗口等临时窗口表达出来,也能够自定义1些图形,比如:

d 更详细1点,如果你想把1个界面的主要内容表达出来,也能够以下图(还可以细分里面的内容究竟是信息还是下个界面的入口):

3、没法做到的和延伸的。

这类流程图对交互流程表达也不是万能的,它不适用于同界面的局部交互,比如1些工具类产品,由始至终只有1个界面,像PS。又比如某些表单的各种提示,提示在同1界面的不同位置按某种规则出现,要表达这类规则只好使用算法流程图,但其实也片面,由于我们不知道用户的输入顺序。

除导航逻辑,设计师还可以在其他时候使用流程图,比如做服务设计描写服务蓝图的时候,流程里有相干的人、场景、接触点、工具、所需资源、输出等等。以下图:

3 : B2C站购物流程中优惠券的交互设计优化方案

我们在互联上常常买东西,也会常常收到优惠券,近有空做了1个小调研,在1个站上,有30%的用户具有超过10张的生效优惠券,但是,当我们使用优惠券的时候,我们发现1个问题,很多站在购物结算页面只能显示10张优惠券,那么,如果多于10张优惠券后,我们怎样选择使用呢?

我摹拟1个用户,当我去1家超市,我购买了很多或单件商品后,我发现我包包里有N张优惠券,我开始纠结了,我该使用那张呢?因而,我开始翻包里的优惠券,看看哪张快过期了,哪张是我这次想用的,我下次使用的,平时呢,不会理这些优惠券,只有当使用的时候才会看1眼。

我看过国内N多B2C站,在优惠券上,都没有做过这样的交互

但是我发现这样用户,随着购的逐渐增多,愈来愈多有人有更多的优惠券

所以,我在来做这个交互

到了B2C,我们怎样满足这些用户的需求呢?

解决方案有几种:

1,为了好看和前端页面加载不是很多,就限制10张,结果就是30%的用户不能使用显示外的优惠券

2,为了使用,30%的用户会看到好几页的优惠券,找起来也很麻烦

现在我们理1下逻辑关系

1, 做优惠券的交互设计解决那些问题?

答:

做优惠券的交互设计是为了满足自己B2C站上30%有多于10张优惠券的用户使用优惠方便,简单

2做优惠券的交互设计是为了让70%没有多于10张优惠券的用户使用起来简单,易懂

2, 做优惠券的交互设计有甚么好处?

答:

做优惠券的交互设计,可以满足上有具有多于10张优惠券的用户的复杂选择,同时又不会给具有少于10张优惠券减少操作复杂,同时促进用户体验,使用户用起来舒服,不会生气

首先,我们来解决排序问题,根据大部份名的数据来看,依照结束时间倒序排列,是我比较偏向的1种排序方式

在支付环节中,列出优惠券的时候,可以根据定单金额,商品,首先挑选出符合使用的优惠券,例如你买的东西是100元的 那些 200⑸0的就不用显示出来了。

其次,如果有同1种优惠券,则1行显示就行了。有个小+号 展开。不然都是 200⑴00 同1时期领的。全部显示 看起来头疼 怎样排序都头疼

我们先来解决如果优惠券少于10张的用户的优惠券选择需求

这些用户很简单,我们设置优惠券默许显示5张,如果有5张之内,那末我们就全部显示出来就能够了,而且页面也很美观

固然,也有1些用户是大于5张优惠券却少于10张的,他点击更多后会有下面这样图的显示

从上面这张图上可以看出,显示10张优惠券,已很多了,

这时候候,我手中有张我想使用的优惠券,怎样办?作为用户,我很自然的想到,添加优惠券呗

那么用户点击增加新优惠券,就能够解决添加优惠券的需求了,由于,在支付环节中,真正增加新优惠券的用户,只有35%,所以,我淡化了增加新优惠券按钮,使用户可以更清晰的使用

但是添加后再哪里呢?

问题就来了

优惠券的排列顺序大致有这几种

1, 依照有效时间的开始时间排序

2, 依照有效时间的结束时间排序

3, 1张激活的排列的上面

其实,这些都不是主要的,由于根本就没有解决用户的需求

用户的需求就是,我想用哪张,就用哪张,我自己来挑

所以就有了我这个新的页面,当用户的优惠券多于10张,就会有更复杂的交互

当用户点击更多挑选条件后

在开始做的时候,我对两个事情很纠结,

1, 要不要翻页功能,被我否定了,由于翻页功能对1次只使用1张优惠券的支付页面来说,太厚重了,不需要

2, 要不要增加激活时间呢,也就是有的用户想查看他刚刚激活的优惠券,怎样办呢?也被我否定了,我想,如果他刚刚激活,那么,优惠券号他输入后就能够查出来了,如果他想查看,他可以点击您共有X张优惠券,可以新页面打开用户中心优惠券页面,自己渐渐看就行了

3, 其实,用户用的翻页功能和查看都不是他目前想做,他目前想做的就是选定1张优惠券,使用就能够了,所以,查出来用,这样就能够了

更年期月经不调怎么调
益母颗粒怎么喝
怎么判断月经过多
分享到: