app开发商品主图设计(网店产品主图设计)

网站建设 574
本篇文章给大家谈谈app开发商品主图设计,以及网店产品主图设计对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、电商APP首页设计,终于有人讲明白了!

本篇文章给大家谈谈app开发商品主图设计,以及网店产品主图设计对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。

本文目录一览:

电商APP首页设计,终于有人讲明白了!

移动端产品设计的难点在于在很小的屏幕上展示所有的业务。屏幕限制和移动端的客户碎片化阅读的习惯和高流失率。对于业务复杂的App产品设计难度更高。电商产品就是典型的复杂业务产品之一,是要展示内容最多、最难做的一类App。

电商APP首页设计结构

电子商务网站的首页是网站的形象页面,一个网站能否吸引浏览者留在该站中漫游,全凭首页设计效果的好坏。所以,首页设计对于任何网站都是至关重要的。

首页从根本上说,就是全站内容的目录,也是一个索引。一般的电商app都有页头、页中和页尾这3 个设计区:

l 页头: 包括网站名称、搜索组件、焦点广告、导航等版块。

页头首先要体现网站主题。用企业名称、标语、徽号或图像概括地反映企业形象、经营理念和服务定位。搜索、导航提供了对关键页面的浏览链接,通过图标和文字表明产品其他页面载有的主要信息;用户能够在最短时间、最便捷的操作迅速地到达他们所需信息的其他页面中。

l 页中: 包括公告、最新活动、个性化产品推荐、友情链接等版块。

在首页上公告信息,到达率非常高。同时,产品中在进行的各种活动信息,也是吸引用户停留并购买的重要手段。随着互联网产品设逐步创新,数字化,原来千人一面的首页分类产品列表由简单罗列,变成了根据用户喜好和行为习惯进行个性化的商品推荐,产品变得更了解用户也更能触发用户购买行业发生了。

l 页尾: 包括版权、联络方式、计数器等版块。

版权的常见做法是在首页底部标示简短的声明,再用链接附带一个有详细使用条款的说明页面,既避免首页的杂乱又把重要内容说清楚了。页面底部的联系方式,方便用户与产品相关人员取得联系,让产品所属企业获得用户反馈。

页尾的内容在web端界面设计中是不可缺少的区域,但在移动端首页基本都被移到了”设置”中进行展示,这是由于移动端界面空间实在太少,而且移动端多以手式向上不断滑动查看新内容,造成页尾信息如果放在页面尾端查看十分不方便。

首页设计组件介绍

一、搜索栏

大多数用户发生购买行为有明确的目的性。我知道我想要买什么,所以我需要快速的搜到商品。因此App把最显眼的位置留给搜索栏。

一个完整的搜索组件设计应该由三个阶段组成:

1.找到搜索框

2.录入关键词

3.搜索结果展示

搜索框的设计需要注意:

电商App的搜索框通常放在界面的最上面,明显、惹眼,用户可以直接进入信息录入阶段。

电商App的首页搜索框,即使用户需要查找的内容属于不同类别,在设计上也最好给用户最简单的全站内容搜索组件。

搜索框的设计风格应该和整体产品风格保持一致

信息录入的设计需要注意:

提供多种信息录入方式,最常见的文字录入当然还是主流,除此之外最好可以提供语音、图片录入搜索等方式。

除了多样录入方式,还应配套提供信息录入提醒设计,如:用户历史搜索记录、搜索关键词热榜、录入关键词时联想响应

搜索结果的设计需要注意:

搜索结果设计重点在于展示不同类型和级别的内容。例如在淘宝搜索账单,结果包括账单相关信息,店铺和资讯等,不同独立应用加图标展示。不同内容类别以tab切换的形式展示。

搜索结果过多,可以加检索组件帮助用户在搜索结果中进行二次查找,减少花时间翻页或滑动查询。另外搜索结果为零的时的空页面,给用户设计合适的说明界面。

二、导航

电商App中,必不可少的两个导航:

l产品主导航

l商品分类导航

产品主导航

电商App中的主导航设计为用户提供了跳转相对独立的信息内容的路径。例如:

淘宝的主导航项:淘首页、逛逛、消息、购物车、我的淘宝

京东的主导航项:首页、分类、发现、购物车、我的

发现、消息、购物车、我的这些内容之间没有很强的关联,但又是用户在电商平台购物过程中必不可少要查看的信息。

京东、淘宝主导航

同时,从“商品买卖”的业务角度来看,有几个重要的业务信息,无论做任何电商产品,都应该让用户可以快速、方便的查找到是毋庸置疑的。它们是:

1.用户的购物车---购物车模块

2.用户在产品的中的个人信息---我的模块

3.用户买卖过程中的交流信息---消息模块

这些重要的业务信息,多数都放在了电商App的主导航中,即使没有放在主导航,也一定能够在首页的副导航中看到。

商品分类导航

不同类型的电商平台,商品分类导航有一些区别。

如下图中淘宝、京东平台,这两个平台是成熟的综合电商平台,在平台中不但有各类第三方商品销售,而且平台也有自营的品牌和独立应用在平台内销售,如淘宝的天猫商城、饿了么、天猫超市;京东的京东超市、就东到家等。

因此,商品分类导航中的商品分类覆盖十分广泛,尤其商品分类导航的C位往往加入了平台自营的品牌和应用。

垂直类的电商App,商品分类导航中的内容覆盖面窄很多,以商品类型分类引导用户查找商品的特点更明显示。

例如下图中唯品会的商品分类导航,因为唯品会的产品定位在折扣女士用品,所以导航中的分类都集中在服装、鞋帽、箱包等商品类别。

另外,在设计上不像主导航设计需要控制导航项数量,商品分类导航中的分类项数量往往大于5个,因此使用双排、可左右滑动的拖拽导航几乎成为最常见的商品分类导航样式。

三、活动

电商产品中的活动类型很多,最常见的有16种:

1. 打折

2. 秒杀

3. 免单

4. 满减

5. 满送

6. 满返

7. 买送/捆绑

8. 搭售

9. 包邮

10. 好评晒图

11. 试用

12. 抽奖

13. 积分/会员

14. 团购

15. 预售

16. 众筹

在电商App首页,见到最多的是前两种活动:打折、秒杀。而且,首页的活动往往都带有极强的时效性表示,例如在规定的时间才可以享受更加优惠的商品价格。

因此,活动在首页上的设计要向用户传达三个要素,即用户最关心的:

什么时间有活动

有什么活动商品

活动的价格有多优惠。

如下图的“京东秒杀”的设计就非常完整的呈现了这3个要素。当然,并不是所有的活动表达都一定要遵循这一规律,淘抢购的设计就打破了3要素传达的规则,隐去了商品促销价格。

京东秒杀与淘抢购

四、商品推荐

个性化的商品推荐现在在电商App设计中己经十分成熟,推存商业最先被用户接触到的地方就是首页。

用户在电商App或有意、或无意浏览的商品,都会被产品记录下来。再由商品推荐模块根据你最近的浏览记录,推荐一些相关的商品、分享或者店铺。由于每个人关注的商品都不一样。所以产品对于每个人呈现的界面内容也都是不一样的。

例如下图,淘宝通过性别判断,如果产品发现你是男性用户,默认推荐“男神范”;如果判断你是女性用户,则默认推荐“爱逛街”。

淘宝内容推荐

不仅仅如此,用来展示电商平台每个细分商品品类推荐商品的区域,也都引入了个性化商品推荐的设计。

在使用全品类商品展示+优惠价格来打动用户进行消费的同时,现在的电商App往往会再融合情感因素、参考用户的特点、喜好展示各品类中最可能吸引用户的商品,促使用户在产品中“逛街、购物”。

例如京东精选中集合了全品类的商品推荐,以用户行为进行时实的个性化推荐。

案例:主流电商App首页分析

一、淘宝

首页内容:

1.搜索,淘宝把搜索二级页面关键词直接展示在一级搜索位置下方,相当于关键词搜索功能层级上升;

2.banner;

3.8个平台型导航,主要是从淘宝诞生,已经可以独立运营的产品;

4.活动广告位,占据banner大小的位置,平台活动快捷入口;

5.淘宝头条,根据分类滚动推荐产品的文章;

6.二级购物功能区,展示各个频道,如天天特卖,每日好店。

7.商品列表,安卓和苹果展示不一样。安卓每个版块半屏往下铺开。苹果是上方做了分类导航,下方列表。

二、京东

首页内容:

1.搜索;

2.8个banner;

3.活动广告位;

4.平台型功能区,有部分是独立的应用如京东生鲜,还有部分是京东的商品类别频道;

5.京东快报;

6.二级购物频道,放了些主推的购物板块;

7.活动板块,铺开了活动的每个类别;

8.频道推荐,把频道纳入到10个标签里,每个频道都有超过5个二级标签。

三、苏宁易购

首页内容:

1.搜索;

2.8个banner;

3.活动广告位;

4.平台型功能区,这一块主要是频道和分类,分类有16个。

5.苏宁头条;

6.二级购物频道;

7.活动板块,展开了活动的每个类别;

8.频道推荐,展示很多二级频道,分的特别细。

四、小米有品

首页内容:

1.搜索;

2.活动板块,动画展示活动的交互很新颖;

3.平台型功能区, 5个功能频道,销售榜单作为一个推荐功能很实用;

4.banner,共5张;

5.活动板块推荐,分了各活动分类的专场;

6.特色频道推荐,含榜单(把榜单部分商品展示出来)、限时购、年货节热卖、小米众筹、有货集市、品味生活,和功能区呼应,以商品展示为主;

7.类别频道推荐,每个展示一屏,以商品展示为主。

五、网易严选(自营平台)

首页内容:

1.搜索和导航;

2.Banner;严选没有功能区,直接开始推荐商品或者频道。

3.推荐标签的商品,焦点位给了个性化推荐,非常重视更精准得来个性化推荐;

4.VIP会员的服务特权,网易重点突出了这一块;

5.二级功能频道,只放了三个频道;

6.猜你喜欢。

六、网易考拉(垂直综合平台)

首页内容:

1.搜索;

2.banner;

3.品类场馆,像商场的楼层一样,逻辑清晰;

4.活动板块;

5.特色频道推荐,标签下面细分了很多相关的功能频道;

6.用户专享;

7.精选活动,以每个板块商品列表来展示;

8.个性化推荐,以三个角度列表展示。第一个角度是个性化商品,第二个角度度是商品推荐清单类文章;第三个角度是品质商品推荐。

七、拼多多(综合平台)

首页内容:

1.Banner;

2.功能区,所有的平台频道和分类功能都在这里面了,有16个,偏重社交分享,如拼团;

3.活动板块推荐;

4.商品列表展示,分商品和店铺两个角度推荐商品,穿插了一排品牌馆推荐。

电商app中设计商品页时从布局如果想以文字为主图片为辅应选用

题主是否想询问“电商app设计商品页,从布局如果想以文字为主图片为辅应该用哪种类型”?1、首先列表式布局,列表布局就是以列表的形式展示内容,通常有对话列表、商品列表等,是可以滚动的列表布局方式,并且具有依据数据所占空间自动适应其高度的特点,这也是快速的APP布局方式。

2、其次宫格式布局,九宫格是从很久以前就开始流行的经典设计布局,通俗来说,即一个被等分成三行三列的方形格子。

3、最后标签式布局,标签式布局以标签的方式显示它的子视图元素,就像在各个浏览器中的一个窗口中显示多个网页一样,通过滑动或者点击,APP再提供丰富的标签选项,以达到提高用户体验的目的。

如何设计APP软件图标

每一个iOS应用都会以一枚APP启动图标的形式展现给使用者,它能传达应用程序的基础信息,并能够给用户带来第一印象感受。它能直接引导用户下载并使用应用程序。UI设计人员有时设计出来的图标看起来很炫,但是投入市场后却得不到用户的认可,点击率很低,这其中的原因很多,单从视觉设计的层面讲,如何提升APP软件图标的视觉效果从而提升点击率已经成为每一个UI设计人员都应该考虑的问题。 一、APP软件图标的视觉设计 1.视觉设计要符合平台开发的设计规范性 ——不同的应用平台往往会产生截然不同设计结果。了解学习平台开发规范,磨刀不误砍柴工。例如苹果移动平台和Windows_Phone_7移动平台的视觉规范就有很大不同。 2.视觉设计要找到共性,抓住个性 ——分析了解同类的APP软件及各自图标设计的定位,找到设计方向的共性及其自身软件的独特个性。在itunes里搜索软件关键字会发现有很多相似的图标。从搜索结果中不难发现,那些APP软件图标会吸引用户的关注。 3.视觉设计要力求设计表现的完整性 ——明确任务,大胆设计;简化设计元素(主图形、辅助图形),突出设计主题;层次分明,不刻意追求质感。 4.视觉设计要遵循横向、纵向比较的统一性 ——设计好图标后,放在同类别APP图标中,去审视自己设计的图标是否能够抓住用户的眼球;有时不同平台会产生不同的视觉效果,某些系列化的APP软件产品更需要通过比较来分析产品的统一性。比较之后可以有针对性的微调、预调,但不要随便更改设计意图及表现形式。 5.视觉设计要保持设计过程的连续性 ——随着软件版本的升级,APP软件图标也应该在产品升级的大背景下有所体现。比较好的做法是有计划有组织的视觉递进式改进。 二、APP软件图标的设计方法 2.重视APP图标视觉设计的层次感,质感表现恰到好处。 3.在APP图标的视觉设计过程中不要浪费一个知名品牌的现有的元素。 4.在设计过程中运用直接了当的文字内容表现隐喻的设计主题。 5.在设计过程中运用行业标准图形或主题图像概括主要内容。 6.在设计过程中最大限度的激发用户的好奇心。 三、设计APP软件图标时容易出现的问题 1.陶醉于无意义的视觉质感,主题重点本末倒置。 2.APP软件启动图标主题元素与软件内容脱节,缺少关联。 3.在设计过程中胡乱使用文字表达主题。 4.设计方案里的图像元素在不同平台、不同尺寸下的视觉呈现存在明显差异,看不清所要表达的主题。 5.APP软件图标给用户的视觉感受“粉”“灰”“模糊”。

app开发商品主图设计的介绍就聊到这里吧,感谢你花时间阅读本站内容,更多关于网店产品主图设计、app开发商品主图设计的信息别忘了在本站进行查找喔。

扫码二维码