随着移动设备的广泛应用和互联网的飞速发展,移动电商应用市场的规模飞速增长。相比于其他社交类、资讯类APP,电商APP的设计难度比较高,因为它不仅要展示完整的业务功能,还要在突出商品核心卖点的基础上保证用户体验,因此非常考验设计师的水平。本文,Pixso以社区平台中的BLIIYE休闲服饰app为例,为大家剖析页面中的“时尚”与“体验”。

BLIIYE休闲服饰app

登录页

登录页是用户第一次接触APP并获取信息的首要场合,作为门面的存在,无论是界面视觉表现还是交互流程都是不可或缺的。登录页面应包含产品符号(LOGO)、主要登录或注册途径的功能。作为服装类电商APP,在登录页运用了与服装相关的图片作为背景,强化了行业属性,可以让用户感知到产品的用途。此外,局部放大的产品图画面感非常突出,时尚氛围感更强。

登录页

首页

图标

衬线字体对尖角处削减,使字体轻松有趣。就连时尚杂志,也非常钟爱纤细的衬线体呢!同理,线性的图标非常适合服装类APP。

首页入口的线性图标展现了服装细腻优雅的一面,细腻的线条让页面更加鲜活。线性图标通过线条塑造轮廓,具有辨识度高、清晰、简约易识别的优点,而且线性图标不会对页面造成太多的视觉干扰,从而吧用户的视觉重心落在商品上。

图标

倒计时

倒计时可以说是一种视觉的显示器,秒数的跳动可以让用户在第一时间感知到变化性、紧迫性,体会到时间与机会流失的感觉。但在使用倒计时组件时也要注意,需要有明确的行动指引来帮助用户消除这种紧迫感,因而要有可触发的操作。

首页使用了折扣倒计时的交互设计组件,让用户产生了购买的渴望以及机会渐渐流失的亏损感,从而激励用户浏览、下单。

商品入口

卡片

作为承载商品信息的容器,卡片可以承载多种元素,且能够灵活适应不同的设备和屏幕尺寸。卡片简约、容易扩展,很适合应用于外卖类、电商类、资讯类app。

首页应用了卡片把内容固定的商品名称、价格、图片进行了区块划分,便于理解和记忆。借助这一容器,可以吸引用户在浏览中二次跳转,给其他页面引流。

feed

当你在刷微博、知乎、今日头条时,是否会发现不知不觉时间就被吞噬掉了?这就是feed流的厉害之处。feed流是投喂用户想要的内容,常在购物类、资讯类app中出现。

feed流可以帮助用户持续地获取最新的商品信息。用户需要什么,系统就是通过大数据自动推送什么。从技术层面来说,就是胃不同的用户推荐他们感兴趣的内容,吸引用户无限下拉。

其次,图文性的feed流可以产生较好的视觉冲击力,在展示方面弱化其他元素,短时间内可以引起用户的情感共鸣。图文的浏览速度相较于单纯文本快,因而在滑动的过程中,可以减少其他因素的干扰,沉浸式购物。

商品详情

商品图

消费者无论通过关键词搜索或是类目搜索,呈现出来给消费者的必然是商品的主图,消费者通过主图进入详情页,从而产生有效的流量。商品主图的优劣是影响消费者关注和点击的重要因素,通过清晰、构图良好的主图可以为商家带来收益。

商品图需要完整展示商品的外观、细节。由模特进行商品试穿,能够拉进买家与商品的距离,让卖家产生联想,从而刺激下单。

服装类电商app对产品图片要求更严格:素材要求无文字、无边框、无水印、不分割、商品居中、背景为浅色纯色。

按钮

根据眼动阅读轨迹“Z”形,即从左上角到右上角,再到左下角、右下角。因此,右下角作为视觉落点应该放置“立即购买”的交互按钮。

而根据用户的操作习惯,核心的行动操作都会放置在右侧。相比于 “加入购物车”,“立即购买”的权重更高,更符合用户的习惯和预期,因此放在右侧且实色填充更合适。

此外,按钮尺寸要够大、对比度高,这样才能吸引用户的注意力,促成下单。

评分和评论

买家秀、评论、评分可以让用户之间形成互动,鼓励购物。用户通过评分和评论可以加深对商品的了解,如果商品评价好,从众心理还会促成用户下单。

人在基因层面上就是欠缺安全感的动物,我们会通过从众来降低风险,让自己处于安全处境。通过第三者的评论,可以提高用户的信任感,从而刺激用户购买商品。

联系客服

客服可谓是运营赛道的隐形冠军,高效率的客服是商家的强大竞争力。客服是店铺形象的第一窗口,可以塑造店铺的形象。客服可以给用户提供更好的购物建议,解答用户疑问,在体验为王的时代,用户通过与客服问答互动,可以提高下单率,增强和商城的粘性。

客服的头像附近有绿色的在线状态,表明客服可以即时接收到用户消息,增强了用户的安全感,如同在商场中随时可以召唤导购员为自己服务。

在客服页面,可以隐去每条对话气泡的头像,此举可让用户更专注于获取咨询内容,避免视觉干扰。毕竟,购物类APP不需要太强的社交色彩。

客服页面

值得一提的是,以上所有的界面都是借助Pixso完成。Pixso是国内 UI/UX 设计师和产品经理都在使用的专业设计工具,大量内置iOS、Android设计系统资源,能帮助快速启动设计工作。

你也可以选择每天花时间浏览Pixso社区学习基础知识,了解最新设计趋势,探索各种设计风格,为自己的项目收集大量视觉灵感和创意。赶快来Pixso设计一款潮流的服装电商app吧!

Pixso社区