移动端网店设计要点

电子商务网页设计与制作Design

and

Creation

of

E-commerce

WebPages移动端网店设计要点主讲人：傅俊THISIS导入：移动端网店的趋势移动端网店的构成移动端网店的设计要点Content随着智能移动端设备的普及和高速发展，网店平台向移动端迁移成为了趋势。移动端网店不仅仅是PC端网店的补充，很多时候已经超越了传统的PC端的营收和关注度。例如从2017年的双十一近一个月的PC&移动端趋势走向可以看出全网的关注度来源，移动端大概是PC端的4倍，更是占到总体趋势的80%以上，这说明大部分关注用户是用手机等其他移动设备进行搜索。导入-移动端网店的趋势移动端网店的主要组成元素同样是图像、文字、超链接等项目。其中文字和图像是用来表达网店的商品和促销活动资料内容。同时网店不可能只有一个页面，超级链接就起到了串联各个页面的作用其中，最为明显的就是图像，用来宣传网店活动与展示网店中商品效果的作用。宣传部分可以分为店标、店招以及宣传广告等。特别是这些宣传广告具体可以分为单列图像、双列图像、焦点图、活动头图像等。移动端网店的构成店标店标是移动网店中的核心标识，是店铺的标志，建议尺寸为80*80像素。这里移动端和PC端在图标上面最多的区别，一个是尺寸上的，还有一个就是占比上的。店标的占比和所处位置，移动端就比PC端要明显很多。这也使得当顾客搜索店铺类目，或是进行店铺收藏的时候，好的店标设计容易让人印象深刻。一般来说移动端店标与PC端店标使用的是同一个，在移动端网店中通常放置在店招左侧位置。移动端网店的构成店招移动端的店招与PC端的店招作用是一样的，一般一个平台上的尺寸是一致的，如手机淘宝网店而言，店招为642*200像素。这个店招一般和PC端不一样，没有更多空间放置例如优惠券、主推产品等其他元素，移动端的店招相当PC端而言更为简单，需要注意的是要给店标预留位置，一般不希望店标遮挡住店招的重要信息。移动端网店的构成宣传网店商品的广告图在移动端起到广告宣传作用的当属图像，在细分的图像模式中，目的还是为了吸引访问者的目光，增加流量，提升转化率，这也是好的主题图像广告的作用。这类图像被寄与很大希望，所占位置主要为焦点图位置，幅面也占了首屏中大面积的位置从而来提高顾客的关注度。和PC端的焦点轮播图一样，有些移动端网店在这一位置也引入了轮播图，通过手指滑动可以切换多张广告图。移动端网店的构成移动端网店中的文字文字展示是移动端网店的重要组成元素。这类文字主要有两类，一类就是以文本形式加以展现的，另一类是图文混合在一起的。无论是哪种，对于移动端而言，可视性是最为重要的因素，这点远远大于PC端的要求。移动端网店的构成移动端的链接网店不可能始终展示给消费者就一个主页，必然有其他栏目页面和各商品的详情页来构成，这点和PC端是一样的，同样存在网店的首页。需要注意的是移动端屏幕尺寸的影响，特别是手机端上，一般访问的更习惯纵向划动屏幕而不是横向的划动，这样导航的宽度往往有限，栏目的划分会大大少于PC端。对于链接而言，更倾向于扁平化，更小的点击次数。一般链接有直接到商品的详情页，不同类型产品通过分类、产品参数的链接做跳转。还有一类点击首页的系列也就是类目，跳转到类目页，让顾客再选具体商品。移动端网店的构成从总的流程和设计要素上来说，移动端网店与PC端网店并没有本质的不同。而且现阶段越来越多网店被要求能够具有跨平台的特性。在设计之初就要考虑到在不同尺寸的平台上加以展示。除了尺寸以外，当然还是有些因素需要考虑的。PC端网页在移动端设备上首要的障碍就是导航的使用，这点前面也说过。优化移动端页面的几个实用技巧：仅使用垂直滚动。不要使用水平滚动，让用户只需单方向滚动就能浏览主要的内容。尽量通过CSS来控制页面宽度、位置和图片的缩放。控制分栏的数目，尽量使用一栏单列式的布局。移动端网店的设计要点让CTA（行为召唤按钮）在移动端上友好易用用户经常会忽略移动端页面上的一些元素，所以尽量使用CTA按钮，确保用户不会错过它们。和PC端的情况不同，需要将CTA按钮置于主要、显眼的位置，确保他们容易发现，容易点击触发。CTA按钮应该易于点击，并且不会同页面中其他的元素形成干扰或者干涉。要做到这点：是简洁的文案醒目的主色调易识别的形状特别的图形元素移动端网店的设计要点让菜单简短且易用详细而全面的菜单设计在PC端上能够良好运行，但是当它出现在移动端上的时候，菜单就显得过长了，要在其中找到想要的内容就相当难了。根据以往的经验，尽量不要让菜单超过7个条目。让搜索框显眼在你的网店或者网站中，搜索具有重要的功能，那么在做移动端页面优化的时候应该突出这一功能，确保它足够显眼是很有必要的。搜索应当是用户一打开页面就能看到的控件。通常应当让搜索框置于页面顶部，以文本输入框的形式存在。移动端网店的设计要点设计便于触摸交互的页面针对移动端的设计，离不开手指的触摸。那么网页中按钮的尺寸应当和手指的大小相匹配。通过研究发现，指面的触摸尺寸平均大小为10-14mm，而指尖的平均尺寸是8-10mm，也就是说10mmx10mm的控件尺寸设计是比较合理的大小。另外一个需要考虑的是就是可触摸控件指尖的距离。如果两个按钮比较靠近，那么用户在移动端上就很容易出现误触的情况了。如果想要解决这个问题，就需要根据实际情况重新调整尺寸和按钮之间的距离，以适应用户手指交互的需求。移动端网店的设计要点为每项任务选择最简单的输入方法当访问者需要从有限的几个选项中做出选择时，相较于输入文字，通过图标按钮或者列表菜单中进行选择，特别是点按大的切换图标会更方便。为每个任务选择最简单的输入方法，并始终确保点按的目标足够大，清晰可辨。让用户在一个浏览器窗口中完成操作移动端的窗口间切换始终比PC端麻烦，用户找不到原来的页面的风险是现实存在的。尽量让用户在一个窗口中完成全部的浏览和操作，简化流程和复杂的交互，让用户一直待