antd
# 前言
想对antd ui 框架做下简单分析,并且记录一下心得。react 的生态很好,antd是它的一个ui库,配置umi使用很不错。
# 宝藏点
定制主题、替换时间库、全局样式
# 定制主题
https://ant.design/docs/react/customize-theme-cn
皮肤,通过覆盖原antd中的less的变量,来达到样式的更新。
比如在webpack中的通过less的modifyvars来覆盖变量。
比如在umi中的config中去添加一个theme选项,然后在这里面直接变量名 key value的方式,从而覆盖原变量。
# 替换时间库moments
https://ant.design/docs/react/replace-moment-cn
在开发中必不可少的就是时间库,这个非常常用,moment.js是个非常经典的库,但是它的体积比较大,所以一般都会使用day.js或者data-fns来优化它。
当你使用到时间相关的antd组件时,需要包裹一层噢。
# 全局样式
色彩:https://ant.design/docs/spec/colors-cn
色彩分为两个体系,一个系统级别和产品级别的体系。这个我不是很了解,设计师可以通过使用官方色板然后创建自己的专属色板,就像通过原始皮肤创建出个性化皮肤。
布局:https://ant.design/docs/spec/layout-cn
画板统一是1440,适配主要时1920、1440、1366、1280,antd最经典的就是左右布局和上下布局这两种适配方案,左右布局和上下布局。
网格基数是8。
栅格默认是24,一列等于column+gutter两个部分组成,24 * (column+gutter)。
常用规模,所有ui的布局数值都保持了8的倍数,从而形成了鲜明对比的UI布局空间决策数组。
字体:https://ant.design/docs/spec/font-cn
字体有 字体家族、主字体、字阶与行高、字重、字体颜色。
主字体从12px上升到14px。
字阶与行高有很多个对应,建议主要字体为14px,与之对应的行高为22px,一个页面中的子阶选择控制在3-5中之间。
字重,分为Regular 400、Medium 500、Semibold 600。其中Semibold 600 是在英文加粗的时候使用。
字体颜色,将正文文本、标题、背景色之间保持在7:1以上的对比度。
图标:https://ant.design/docs/spec/icon-cn
和色彩一样,设计师可以基于官方图标来创建自己的图标,比如可以借鉴antd 和 iconfont的图标。
设计原则是 确定 和 自然,设计出 准确、简单、节奏、愉悦的图标。
还有一些有趣的设计概念,通过上面链接自行阅览。
阴影:https://ant.design/docs/spec/shadow-cn
通过模拟元素的投影,来展示元素之间的高度距离与层次关系。
阴影的高度有四级,无、低、中、高。输入框 可以无阴影,卡片hover 这样的悬浮可以用低阴影,下拉面板这样的跟随 可以用中阴影,完全独立的,就像对话框可以用高阴影。
光源越远,阴影距离物体越远,阴影的方向用x,y来表示。
阴影值,阴影向下,用于组件内部或者组件本身;阴影向上,用于底部导航或者工具栏;阴影向左,主要用于右边导航栏、抽屉组件或者固定表格栏;阴影向右主要用于左侧导航栏、抽屉组件、固定表格栏。通过三层阴影的方式表达模拟出真实世界的阴影。
阴影是由 阴影颜色rgba、方向xy、模糊度blur、扩展值spread而成。
暗黑模式:https://ant.design/docs/spec/dark-cn
将UI换成黑色或者深色的一个主题模式,有12套基础色板可以使用。
# 个人理解
https://ant.design/docs/spec/overview-cn
页面可通过功能的方式来拆分,拆分为各种不同的模板,比如Dashboard、表单页、列表页、详情页、结果页。这些不同的模板也可以拆分为不同的页面模块,比如通知菜单模块、页头模块、图表模块、列表模块。这些不同的页面模块可以分为按钮组件、面包屑组件、步骤条组件、日期选择框组件、徽标数组件等等。
antd 的设计版块很不错,有时间可以系统的过一遍,会是今后接触其它UI框架的一个首要参考概念。
# UI组件
https://ant.design/components/overview-cn/
antd的组件总览页,提供了搜索组件的功能,非常的方便。
# 类别
通用组件:Button、Icon、Typography。
布局组件:Divider、Grid、Layout、Space。
导航:Affix、Breadcrumb、Dropdown、Menu、Pagination、PageHeader、Steps。
数据录入:AutoComplete、Checkbox、Cascader、DatePicker、Form、InputNumber、Input、Mentions、Rate、Radio、Switch、Slider、Select、TreeSelect、Transfer、TimePicker、Upload。
数据展示:Avatar、Badge、Comment、Collapse、Carousel、Card、Calendar、Descriptions、Empty、Image、List、Popover、Statistic、Segmented、Tree、Tooltip、Timeline、Tag、Tabs、Table。
反馈:Alert、Drawer、Modal、Message、Notification、Progress、Popconfirm、Result、Spin、Skeleton。
其它:Anchor、BackTop、ConfigProvider。
重型组件:EditableProTable、ProLayout、ProForm、ProTable、ProDescriptions、ProList。