9招教你如何设计一款电商APP图标

2016-02-16 22:41 12 1 收藏

下面是个9招教你如何设计一款电商APP图标教程,撑握了其技术要点,学起来就简单多了。赶紧跟着图老师小编一起来看看吧!

【 tulaoshi.com - 平面设计 】

移动产品设计社区Lemon Labs的联合创始人和CEO Tomas Dirvonskas发布文章,通过一个案例分享了他关于重新设计一款电商应用的体会,文章如下:

近日一家名为Vinted的创业公司成功从Insight Venture Partners风投那里获得了2700万美元的融资,这家公司是面向女性用户的二手衣服交换和买卖在线市场。一年之前,他们还完全没有移动端的访问,但是现在App访问量已经占到了全部的50%。

是我们帮Vinted重新设计了移动应用,实现了使用量170%的增长,下面是我们在这个过程中学到的9条经验:

1. 对于要显示的信息考虑好清晰的优先级

如果只能给出一条建议,那就是这条。比如我们重新设计了Vinted的用户页面,因为这款产品是关于服装和时尚的,所以用户信息中最重要的信息是服装,要把他们放在最前面。其他的信息要简化。这样做会加强用户体验,让用户关注主要内容,用户关注的越多,进行交易的可能性就越高。

2. 交易按钮要总在屏幕显示之上

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

交易按钮要总保持在屏幕的可见范围之内,甚至可以设计成红色或绿色等醒目的颜色,不要夸张到干扰了用户体验就好。之前的设计直接把交易按钮放在了产品图片的下面,而我们把按钮添加到了工具栏中,这样用户在浏览页面时,可以随时点击顶部下单。

3. 内容容易接触,步骤简单

在重新设计产品目录的时候,我们考虑到了这点,但是这条建议实际上可以应该到所有的地方。用户才不关心你的目录设计的多么巧妙,他们只想要更简单的找到产品。之前Vinted的目录有6个层次,现在被减少到2层。

4. 在移动端要使用聊天的方式沟通

9招教你如何设计一款电商APP图标,PS教程,图老师教程网

邮件的通信方式对于移动端来说,很不合适,聊天就要自然的多。对于电子商务网站,商家很有必要跟用户进行沟通,这样可以减少交易时间。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

5. 注册页面要短

当你看到一个很长的注册页面时,用户会感到厌倦和难以忍受。不要在注册的时候问太多的问题,先把用户拉进来再说。

6. 内容为先,描述次之

我们发现应用上的内容越多,交易也就越多。所以要鼓励用户上传自己的东西,可以先上传图片,再进行描述,而不是反向的程序。

7.对于iOS应用来说,左边是导航,右边是交易

对于iOS应用导航按钮总是出现在左上角,这个已经习惯了。但是右边的设计,不要堆积很多功能,要尽可能简单明了。

8. 心要比星好

如果你的应用现在允许用户为自己喜欢的东西打星,那么改用心形图吧。这个改变让这个功能的使用量增加了10倍。实际上,我们是从Airbnb那里学到的这个经验。

9. 为设计流程写文档

9招教你如何设计一款电商APP图标,PS教程,图老师教程网

Vinted应用会有超过90个页面,如何才能对这些内容充分进行沟通,需要一个很好的文档系统。好的设计也需要文档的帮忙。

总之,经过重新设计,应用的各个指标都有了明显的提升。安卓版的使用量增加163%,下载量增加74%,一年时间内的总下载量增加200万次。

来源:http://www.tulaoshi.com/n/20160216/1575954.html

延伸阅读
本教程介绍简单的水晶风格图标制作方法。思路及过程都比较简单,只要用钢笔工具勾出物体的选区,然后填充渐变色,再适当加上高光及暗调,水晶效果就出来了。 最终效果 1、新建一个600 * 600像素的文件,背景填充白色。新建一个图层,用钢笔勾出图1所示的选区。 图1 2、选择渐变工具,颜色设置如图2,拉出图3所示的线性渐变。 ...
本教程的介绍喇叭图标的制作方法。教程中基本上是用灰色和白色为主色调,当然可以使用自己喜好的色调。制作的时候需要把握好高光部分的制作,只要认真做好一个高光选区,其它的都是同样的方法。 最终效果 1、新建一个600 * 600像素的文件,背景填充白色,按Ctrl + R调出标尺,然后拉出两条相交的参考线,参考线交点最好是在图层的中心位置...
木屋的制作难点是小木块部分的制作。不过只要我们了解了木板的构造,制作起来很容易。木板由底色及一些木纹构成,制作木纹的时候需要用钢笔勾出不规则的弧形路径,填充颜色或渐变色后用蒙版调整边缘的不透明度,能够跟底色自然结合。木纹有深有浅,制作的时候要不断调节。 最终效果 1、新建一个800 * 800像素的文档,选择渐变工具,颜...
标签: flash教程
地震这几天邻居家小孩天天不上课闹着要教他flash.正好,好久也没做教程了拿出来分享一下吧,纯给新人练手,老鸟可以飞了。 最终效果:   1:先做橡皮那块.新建图层用矩形工具上圆角改为5,5下圆角为0,0画一个圆角矩形(数值根据自己的画布大小自己调)   2,shfit+F9给他做个线性渐变    3:铁皮部份,...
畅游在各大电商网站的你,在网购时不知曾否察觉到有些小不同? 排开具体的商品内容、视觉样式,回忆下那些我们熟悉的商品页面 当然,这里并不是玩大家来找茬游戏的,需要火眼金睛审视于细枝末叶。我们可以从界面的细节去体验,甚至还可以眯起眼去发现点什么。 亲,你有没有想起有哪里不同? 好吧,揭晓答案:不同点在于商品详情页面的购买按...

经验教程

345

收藏

26
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部