- 电商品牌版式与视觉设计(全彩)
- 善本出版有限公司编著
- 654字
- 2024-11-01 10:31:47
移动端电商
调查机构 Baymard Institute 从他们的移动端电商研究中得到总结:移动端流量占到了网站访问总流量的30%~50%,而转换率却远低于PC端。移动设备的限制性、有别于PC端的浏览行为,以及技术的进步都为电商网站体验的策划与开发带来了更多的挑战。
![](https://epubservercos.yuewen.com/D0326C/17829662906943506/epubprivate/OEBPS/Images/38311_26_1.jpg?sign=1739305384-ZXuCGcaoGeoJxADD1rB4auq6hEyVvu9e-0-39672c17992327a53a7f53566994f5f8)
1.简约
小屏幕意味着只能在更小的空间来打造全面的购物体验。有效利用有限空间的最佳方法不是去填满,而是留自简化——让用户的注意力集中在产品上。
2.汉堡包菜单按钮
为了简单便利,隐藏菜单是移动端电商的常规做法。值得注意的是,由于目录导航是收起来的,而用户有滚动浏览的习惯,主页中展示的产品应当是最具代表性的。
3.搜索栏
搜索功能对移动设备特别重要,应该放在显眼的位置,并出现在每一个页面。这个元素指出了移动端电商的一个关键特征——便利。此外,“当前页搜索”功能的添加能极大地帮助到用户。
4.交互手势
一个好的移动端电商网站应该实现并提示用户通过手指轻触或伸合来放大或缩小图片,以查看细节或质量。另一个要考虑的手势是滑动,使图片浏览更为简单、直观,尤其是主页中的主图,因为自动旋转木马模式在移动端上并不推荐使用。
5.点击目标尺寸
人性化移动端体验的重要特征之一是面积更大的触碰区域,包括搜索栏、汉堡包菜单按钮、产品图片CTA、表格,或其他可点击的按钮和输入栏。与标准键盘相比,优化键盘中的大尺寸数字输入能减少错误输入。此外,自动探测显示相应的键盘是高度实用性的体现——数字输入栏显示纯数字键盘,邮箱地址输入栏显示邮箱键盘。
设计案例赏析
部分案例需打开网页查看全部布局。也有网址已更新,布局不同,请参考下方框架图学习即可。
![](https://epubservercos.yuewen.com/D0326C/17829662906943506/epubprivate/OEBPS/Images/38311_27_1.jpg?sign=1739305384-sdfjdNR3a1auAlFpxqCpzr8QJiztCjjm-0-1e1740952cd9b06c0a367c6528714001)
![](https://epubservercos.yuewen.com/D0326C/17829662906943506/epubprivate/OEBPS/Images/38311_27_2.jpg?sign=1739305384-sEi4b0UuZPkASd6mqWGt9D6EfA4niGfz-0-571a6d705bde9d93d23f222a580137cc)
![](https://epubservercos.yuewen.com/D0326C/17829662906943506/epubprivate/OEBPS/Images/38311_27_3.jpg?sign=1739305384-yvhloVCbpE9IbbHxJ257aAHvaBAMlkMw-0-20ea0575ec3f94b8955e250eabda0e87)
![](https://epubservercos.yuewen.com/D0326C/17829662906943506/epubprivate/OEBPS/Images/38311_27_4.jpg?sign=1739305384-gZl1xazRrOElgDwacaE6vy7ywno2PRyH-0-1a0fdc9718147e4776ae86d88ee49405)