案例分析-车商店铺后台界面
刚刚结束了一个项目开发,写一波主要界面设计心得~

这次是为集团旗下公司以及外部经销商提供管理运营服务和车辆收售渠道的后台系统。
需求接到,熟悉产品基本业务流程帮助视觉风格定调;第二研究对标用户行为,分析产品功能点以及用户痛点,可以帮助快速了解交互逻辑以及优化交互流程。
【登陆页】
通常登陆页是最花时间琢磨的。由于我们这款产品用户群体并不是匿名而来,而是有稳定用户群体,因此登陆页的设计要更注重功能性便捷性:

1.登陆页
登陆页选用“商务场景”作为沉浸式背景图,突出产品功能TO B属性;而用户进入这个网页是有特定目的的——管理后台,所以我们不需要炫酷的界面样式,这不是使用者的诉求。
登陆窗口为扫码登录和密码登录两种模式,剔除多余样式干扰,以最简洁的页面突出流程,方便用户直线思维操作,扫码—登录、用户名—密码—登录。

2.工作台
未开通店铺前首页展示:
未开通微店铺前是没有数据显示的。放置banner,广告语简洁有力地突出我们服务优势“免费做推广”,吸引用户。
由于推广活动周期长,加之用户群体的B端特性,在大活动推广上决定摒除色彩艳丽的弹窗提醒,以免造成用户视觉疲劳和产品厌恶感;以单独一栏给予充分空间展示,清爽简洁的图标搭配活动标题。

开通店铺后首页展示:
开通店铺后,以展示店铺内基本信息为主。
原头部banner处展示用户身份名片,与小程序连接,微信扫描二维码可以在公众号里查看平台内车源信息。
右边以管理电铺内信息为主,车源更新、员工管理和用户反馈都在这一模块操作

主体内容部分展示对比:
下图是店铺开通前后对比。未开通时我们将每个模块功能以文字形式简要介绍,配以相关背景图吸引用户点击;开通后各模块以数据形式展示。
“车源” 和 “分销车源”,将搜索度最高前三款以轮播形式展示,方便用户及时调整销售策略;
“寻车” 功能是方便各商家在平台上发起资源共享,文字展示车型更容易减少用户学习时间,一眼看出重点;
“代采购” 的数据有三样,直接展示便于店家统计;
“常用联系人” 显示最常用的五个,该功能使用频率高,可直接点击修改;
“常用车型” 是收集用户发布最多的车型,以快捷键方式展示,方便用户一键发布节省填写信息时间。

发车源交互优化设计:
由于发车源的界面过于冗长,有大量的信息需要填写,在二期迭代的时候根据这个痛点做了很多优化方案,以下是一期和二期的对比
![]()

一期设计(左)虽然考虑到了信息流过长原因,在左侧添加了快捷键帮助定点展示,可用户始终是“懒”的,一个没招待好,可能就弃你而去;
所以在二期迭代上,我们将原来的长页面做成了窗口形式。页面的字数越多,越给人以不透气的封闭感,容易造成不友好的用户体验;将信息内容精简,以弹窗形式分批展现,无形中减轻了用户压力,避免第一眼就“打退堂鼓”的情况发生;
下面展示下迭代后的卡片式信息流:



![]()
产品定义功能,解决产品是否有价值;而交互的友好程度,视觉的美观程度,直接关系用户是否愿意使用该产品。设计师不单纯是做界面美化的,把自己当作小白用户发现问题,再作为专业人士从技术上解决问题。了解用户痛点,“想尽办法”提高用户转化率,这样才能让自己在项目中得到自我提升。





































