旭日集团销售管理系统
重新设计视觉风格,统一组件规范,确保信息的传达更加简单易懂。通过视觉的提升,带给用户更好的使用体验。同时我们优化了操作的流程,为用户减少操作的时间成本。一个好的系统应该成为易用高效的工具,而不是为工作增加负担。
职位:
UI设计师
类型:
公司项目(B端、设计规范)
2024年5月-2024年7月

设计目标
体验侧
视觉升级
内容清晰
视觉舒适
功能侧
操作优化
操作易用
信息获取高效
框架升级,统一用户心智
统一框架布局
侧导航设计
清晰页面结构,收敛页面类型
通过数据可视化,提升工作效率
提高页面有效信息传递
减负增效,增强易用性
提升多工种协同办公效率
视觉舒适,营造高效、亲和的使用体验
提高页面有效信息传递
减负增效,增强易用性
提升多工种协同办公效率
内容清晰,聚焦效率提升
提高页面有效信息传递
减少步骤、减少跳转
定位设计问题
产品维度
过多无用功能模块
操作复杂
设计维度
视觉风格老旧
UI输出不规范
体验维度
表单数据信息阅读困难
信息传达低效



UI输出不规范
信息传达低效
风格老旧
设计规范
页面布局
208px
24px
1184px/间距16px
标签层
/Label bar
内容层
/Sontent layer
背景层
/Background layer
侧导航栏
/Stde navlgation
色彩规范
文本色/中性色
文字黑
#1A1A1A
文字灰.1
#666666
文字灰色.2
#999999
文字灰色.3
#DCDCDC
文字白
#FFFFFF
中性色-1
#FFFFFF
中性色-2
#F0F2FA
中性色-3
#D5DAE8
中性色-4
#D5DAE8
中性色-5
#BDC4DB
主题色
主题色-1
#F1F4FE
主题色-2
#E9EEFD
主题色-3
#BECCFA
主题色-4
#93AAF6
主题色
#6C88F5
主题色-5
#335EEE
主题色-6
#0D2FA0
提示色
正确色-1
#D54941
错误色-2
#FFF0ED
提示色-1
#E37318
提示色-2
#FFF1E9
正确色-1
#2BA471
正确色-2
#E3F9E9
字体规范
12pt/14pt/16pt/20pt/24pt/28pt
思源黑体/Source Han Sans CN
Arial English Font
属性:
Regular
Medium
Arial:AaBbCcDdEeFfGj
1234567890
界面展示
启动页
新的启动页面板更简洁高效,视觉中心也更突出。同时通过Midjourney快速生成符合风格,切合品牌元素的背景。二者结合使用,凸显科技感。

背景通过Midjourney快速生成

侧边导航栏
展开收起样式
导航栏视觉更轻量化,同时使用了投影效果,使选中项与其他选项有足够的区分。能让用户直观了解系统结构,便捷找到所需功能,使操作更便捷、易用。




数据可视化
为了提升页面的用户体验,在原有基础上新增了数据可视化部分。通过折线图、条形图、饼状图等多种图表形式,轻松了解数据的变化趋势和分布情况。
数据展示
将数据放在工作台第一排,可以让用户第一时间明析关键指标,及时掌握数据变化。提升工作效率和运营效果,确保业务的良好运转。
数据趋势折线图
折线图可以直观的反映数据趋势的变化,能够帮助用户及时洞察业绩的变化,进行数据的对比,以便迅速调整经营,优化销售决策至关重要。


数据条形图
条形图能够清晰地展示各个类别之间的数量差异,便于直观地比较不同类别的数据大小。同时可以展示数据在各个类别中的分布情况,帮助识别趋势或模式。
数据饼状图
饼状图通过将整体分割成多个部分,直观地展示每个部分在整体中所占的比例。通过观察各个扇形的大小,可以快速比较不同类别在整体中所占的比例大小。
排行榜分析图
排行榜可以对项目、个体、组织等进行排名进行展示。直观地显示各项目的相对位置和优劣。
表格、表单
重新设计了表格、表单,使各个选项之间更清晰,可以应对不同使用情况。

增加间距
规范各个部分间距、排版
更多表格、表单






组件
为系统在原有的基础上,重新设计了组件。用以应对不同的使用场景,可以大幅降低用户的协作、沟通成本。
按钮
重新设计的按钮共两个尺寸,12款样式并新增了“开关”“返回顶部”按钮。多样的款式可以在不同的使用场景下,最直接清晰的操作指引。
导航
导航组件为侧边导航栏、分页导航,能让用户快速前往对应的工作界面,减少时间成本。
数据录入
数据录入是这套系统的主体功能之一,为之设计的组件为用户提供了清晰信息呈现。不同的组件状态,也适配了工作中可能出现的所用情况。
反馈
反馈组件主要作用是帮助用户在软件或网页界面中进行交互,使得用户可以更方便地识别或过滤数据,进行数据操作。




商品资料上传/审核
此页面涵盖了系统的基本内容和样式。左侧为侧导航栏,右侧顶部为搜索标签区。内容区域内包含页面导航、操作按钮、数据选择处理、表格。为了适配不同操作需求,数据选择处理区域共适配了4种不同尺寸的选择器样式,使页面更整齐规范。

侧边导航栏
搜索标签区
页面导航
操作按钮
数据选择、
处理
表格
国际码段设置
表格是系统中重要的操作内容,用户需要从表格中了解详细的数据,同时进行一些基本的操作。优化后的表格间距更合理、操作指引更明确,可以大大提高用户的使用体验。

上架申请

主要页面
资料上传、
标码设置、
oneone豪
批量修改申请

自检报告上传/审核



共20+页面
