前端怎么加粗字体_to B 中后台系统 | Web 端 | UI Style Guideline amp; 前端交付文档...

本文总结近期 to B 中后台系统 UI 组件设计规范及相关经验。欢迎大家勘别甄误。

不懂 UI 的交互不是好前端，特别鸣谢 松若章 在设计稿落地过程中的严谨与指点。

组件规范 Components

如下列举常用组件库 UI Library，覆盖 Web 端 Navigation, Buttons, Notifications, Select, Input, Pagination 等 UI 样式及相应代码。

Ant Design: https://ant.design/components/button/
Elements: https://elemefe.github.io/element-react/#/zh-CN/radio
iView: https://www.iviewui.com/docs/guide/install-en
Material Design: https://material.io/design/components/buttons.html#text-button
Semantic UI: https://semantic-ui.com/ （不常用，但经典）

交互设计师可复用的组件模板

Web - Axure UI Kit – Ant Design: AntD Library

Web – 不提供设计师可直接编辑的模板，但提供前端可用代码Ant Design Pro: https://pro.ant.design/

另见：@文冠木的回答 - 知乎：如何看待 Ant Design 圣诞节彩蛋事件？

Web – Figma UI Kit - Ant Design System for Figma: https://www.antforfigma.com/

Web – XiaoPiu – XiaoPiu Web: https://www.xiaopiu.com/forum/posts/5b97a67b9c2a3520c7b5c804

Mobile - Sketch UI Kit - Ant Design Mobile: https://mobile.ant.design/

Mobile – XiaoPiu（一款支持在线PRD，动态交互原型，版本管理，团队协作的工具）: https://www.xiaopiu.com/forum/posts/5b97a6909c2a3520c7b5c808

Sitemap – Omnigraffle, Sketch, Axure, Affinity, Adobe XD – Ant Design: http://ux.ant.design/

User Workflow - XiaoPiu: https://www.xiaopiu.com/forum/posts/5c775d930d830d1b5c17edec

视觉规范 Visual Style Guideline：

1. Typography:

侧重功能性的中后台系统，在字体选用时，为避免 Over Design，以 2 种以内 Font Type 为佳
标题 Text Head 及正文 Text Body，需标注 Font Type, Font Size, Font Weight, Font Color

免费英文字体选用参考：Google Fonts: 可预览键入的文本效果 https://fonts.google.com/

2. Iconography:

确保视觉风格的一致性 Consistency: 统一使用线型 Icon 或块状 Icon；统一 Line Weight；针对 Icon 尺寸，将不同形状的 Icon，统一放置于同一Size 的正方形内，以便于前端同学设定 Icon 的Margin。

（图）

选择便于前端同学直接使用的开源 Icon 库，以节省开发时间及精力成本。如下列举两种常用 Icon 库：

（1）Ionicons: https://ionicons.com/

（由于 Ionicons 的 Icon 是以“字体”的形式储存的，也即是说，它们能被前端用 font-size 及 color 进行大小及颜色的直接调整。e.g. 使用元素的 font-size 样式指定图标的大小：<any style="font-size:100px;"> </any> 补充：经过测试，<md-icon class="icon ion-document-text " style="font-size: 48px;"> </md-icon>有效

回答参见：ionicons.min.css,怎么看到里面的图标是什么样子的，怎么修改大小和颜色，怎么拿来现成用？

作者：getU

（2）Font Awesome: https://fontawesome.com/kits/7f3df10ff1/use?welcome=yes

3. 导出格式 Export Format：当 Ionicons 找不到适合的 Icon，需使用其他平台的 Icon 时，e.g. https://thenounproject.com/ ，或自行绘制 Icon 时，导出格式择优 svg，而非 png。原因：

1）svg 作为矢量的优势，可适配不同尺寸的屏幕

2）svg 便于前端同学直接对颜色进行更改

3）png 作为图片，便不具备以上两种优势

4）同一元素的一倍图 png 格式大小，比 svg 格式大小，要大很多，如下图所示：

不同状态 Different Status：对于不同状态下的 Icon，如 Normal, Hover, Active (Clicked), Selected, Disabled, 设计相对应的配色

4. 不透明度 Opacity：为保证同一 Icon 在不同背景色上的呈现效果的统一性 Consistency，择优修改不透明度，而非选择固定色值（前端称“写死颜色”）。

5. Padding: 以“内边距”定位内部元素的“相对位置”

6. Margin: 以“外边距”定位外部元素的“相对位置”

7. Weight & Height: 以 Size 确定元素的“绝对大小”

写死 VS 配置（绝对位置 & 尺寸 VS 相对位置 & 尺寸）：

对于信息含量较为固定的组件，可使用“绝对位置 & 尺寸”（写死）。

e.g. 有 Input 字数限制的输入框，可设定最小尺寸 min-width 和最大尺寸 max-width。超出的部分，横向滑动展现，或以省略号形式展现

e.g. height 固定的穿梭框 transfer，超出 max-height 的部分，会出现纵向滚动条

对于信息含量变动较大的组件，择优选择“相对位置 & 尺寸”（配置）：

e.g. Form（表单）：Form 的 height 应随表内信息量多寡，做相应调整，即“信息有多少，表便撑多大”。各元素之间，以 margin 的相对位置来布局。若将 Form 的 height 写死，则会出现内容溢出的情况。当 Form 中内容超出其 max-height，Form 内部将出现纵向滚动条。需特别注意：Form 中 margin 需预留 Form 报错时的空间。如图所示。

Zoom in Details:

8. Components Status: 包含设计稿中所有组件样式，以及同一组件在不同状态下的不同色值，如Normal, Hover, Active (Clicked / Selected), Disabled时的不同色值（HEX，如有不透明度，需标注 Alpha）

*** 注：需考虑同一组件和文本在不同深浅背景上的不同呈现效果：

（1）分别为深浅色背景设计不同配色（前端颜色写死）：该方案适用于背景的深浅色值对比度差别大的情况，以保证组件及字体的可读性。（图）

（2）组件或文本仍保持相同不透明度（Opacity）：该方案适用于背景的深浅色值对比度差别小的情况，从而实现同一组件或文本在不同背景上，风格的一致性，使其与背景色自然的融合。（图）

9. 开发者工具 Inspector:

查看 Web 的 Font Type, Size, Color, Margin, Padding等

查看不同尺寸屏幕的呈现效果（图）

查看 Animation，且可慢速播放（图）

10. 浅色模式与深色模式下的层级关系

浅色模式：以阴影进行不同层级的区分

深色模式：以灰度拉开不同层级的层次：灰度越低，层级越近

学术背景：加州艺术学院（CCA）人机交互（HCI）笔者网站：ritalei.com

欢迎技术交流与知识勘误 :)