后台管理系统UI风格规则--Ant Design “设计” 中的一些实用点

Posted 2023-04-23

参考技术A

主色调色板 Daybreak Blue / 拂晓蓝

中性色板

色彩应用

更多： https://ant-design.gitee.io/docs/spec/colors-cn

何时使用

通过「小号间距」（8px）、「中号间距」（16px）、「大号间距」（24px）三种规格来划分信息层次

在这三种规格不适用的情况下，可以通过加减「基础间距」的倍数，或者增加元素（e.g. 分割线）来拉开信息层次。

—————————————————————————————————————————————

1）次按钮

常规按钮，用于非主要动作。如果 不确定选择哪种按钮，次按钮永远是最安全 的选择。

2） 主按钮

突出“完成”、“推荐”类操作； 一个按钮区最多使用一个主按钮 。

3） 文字按钮

弱化的按钮，采用更轻量的按钮样式，可用于需 大面积展示按钮场景，例如表格组件中的操作列 。

4）图标按钮

图标提供视觉线索，避免逐字阅读按钮文案，更高效地使用界面。

5）在按钮中添加图标

用于对按钮含义补充解释，提高按钮识别效率。

6 ）特殊按钮
虚线按钮、危险按钮、幽灵按钮等

将按钮区放置于用户浏览路径中，便于被用户发现，如 “F 浏览模式” 和 “Z 浏览模式” 。

什么时候需要在 Footer 中放置按钮区？（为了要和 Body 区区分开来）

按钮顺序

推荐操作是阅读的起点，折叠内容始终在最右侧。

按钮分组

布局相关：

验证导航系统 的设计好坏可对其进行压力测试：像跳伞一样跳进网站里，验证导航系统的极限。
1）忽略首页，随机直达网站某一页面；
2）看用户是否能知道当前位置以及与网站其他部分的关系。在哪个网站的哪个部分？上层网页是什么？
3）是否知道这个网页会带你到哪里去？链接文字是否能说明去向?

基础布局

页级的批量操作影响整个页面，可布置于页底。

选择模版

区隔方式

根据各个信息之间的相关性，判断各个信息模块之间的亲密度，通常情况下，相关性强的内容尽量靠近，相关性弱的的内容尽量拉开层次。

简单总结一下最主要思路和中心思想
1、首选light模式，特定情况（需要沉浸式/暗光）下选择dark暗黑模式
2、导航 按需，目的是帮助用户了解网站可用功能、当前位置、关系、去向
3、给内容区域最大的空间
4、根据内容选用合适模版、组件
5、注意布局与间距
6、注意排序、对齐、按钮、文案等

git-拉取项目---基于Ant-Design-Pro-2-0-的CMS管理后台入门系列

git 拉取项目CMS管理后台项目

github 项目地址：luwei.web.study-ant-design-pro

企业内部项目地址：study.ant-design-pro

注：github 上的项目暂不支持后台数据渲染对接的步骤，仅使用静态数据展示。

项目下载方式：

1. 使用 git clone 拉取
2. download zip

image

在此不做过多解释，若不了解 git 基本操作命令，请移步至 廖雪峰 - Git教程

文件简介

├── config                   # umi 配置，包含路由，构建等配置
├── mock                     # 本地模拟数据
├── public
│   └── favicon.png          # Favicon
├── src
│   ├── assets               # 本地静态资源
│   ├── components           # 业务通用组件
│   ├── e2e                  # 集成测试用例
│   ├── layouts              # 通用布局
│   ├── models               # 全局 dva model
│   ├── pages                # 业务页面入口和常用模板
│   ├── services             # 后台接口服务
│   ├── utils                # 工具库
│   ├── locales              # 国际化资源
│   ├── global.less          # 全局样式
│   └── global.js            # 全局 JS
├── tests                    # 测试工具
├── README.md
└── package.json

参考 Ant Design Pro v2.0 - 开始使用

分支说明

分支名称	分支作用	备注
master	主分支	最终效果【静态数据】
dev	开发分支	数据对接效果【动态数据】，github 上的项目暂不支持
page	创建页面	创建一个页面
query	增加查询业务的基本组件	静态数据
add	增加新增业务的基本组件	静态数据
del	增加删除业务的基本组件	静态数据
queryData	增加查询业务的数据对接	动态数据，github 上的项目暂不支持

作者简介：李尧晖，芦苇科技web前端开发工程师，代表作品：飞花亭小程序、续航基因、YY表情红包、YY叠方块直播竞赛小游戏。擅长网站建设、微信公众号开发、微信小程序开发、小游戏制作、企业微信制作、H5建设，专注于前端框架、服务端渲染、SEO技术、交互设计、图像绘制、数据分析等研究。

欢迎和我们一起并肩作战： [email protected]
访问 www.talkmoney.cn 了解更多

提供深圳微信公众号外包，高质量的钉钉开发，专业的企业微信建设，东莞微信小程序开发，广州小游戏制作，广东H5建设