图标系统

Icon System

一、图标设计原则

简洁直观

图标设计简洁明了,图标+文字 组合使用,避免单独图标造成理解困难。

风格统一

所有图标采用统一的线性风格,线条粗细一致(2px),圆角处理一致。

尺寸足够

图标尺寸不小于 36px,重要操作图标不小于 44px

色彩区分

选中状态使用品牌主色 #B84C3C,未选中使用 #8C8076

二、底部导航图标

首页
消息
养生好物
商城
我的

三、功能图标

挂号
问诊
开方
理疗
养生
处方
药房
个人

四、状态图标

成功
警告
错误
信息
用户
订单
分销
直播

五、操作图标

下拉
收起
右箭头
左箭头
添加
关闭
减号
购物车
地址
定位
时间
日期

六、图标尺寸规范

使用场景 图标尺寸 线条粗细 说明
底部导航 44px 2px TabBar图标
功能入口 48px 2px 首页功能图标
列表图标 36px 2px 列表项图标
按钮图标 32px 2px 按钮内图标
状态图标 40px 2px 成功/失败等状态

七、图标色彩规范

主色
主色
#B84C3C
选中状态、主要操作
灰色
未选中
#8C8076
默认状态、次要操作
深灰
深灰色
#5C5146
正文内容图标
白色
白色
#FFFFFF
深色背景上的图标