GOV.UK Design System
GOV.UK デザインシステム / 2012– / 风格 / 设计体系
英国政府的 Government Digital Service 为公共服务公开并维护的设计语言。全部内容排成没有装饰的左对齐单栏，用 GDS Transport 字体，不做圆角的绿色按钮靠下边一条深绿的带获得厚度，按下去正好沉下这个厚度。取得键盘焦点的元素则变成黄底加黑色下划线。
没有装饰的左对齐单栏，几乎不用边框，也不用阴影 / 不做圆角的绿色按钮，下边铺着一条深绿的带，按下时正好沉下这一层厚度 / 只有取得焦点的元素会变成黄底，下面再画一条黑线 / 字号只有 48、36、24、19、16px 这几档，中间没有别的尺寸
.png)
辞典词条
- 适用场景
- 要把行政或公共服务的申请页面改成一屏一问的左对齐单栏时；要让只用键盘操作的人毫无疑问地知道焦点现在在哪里时
- 字体
- 只用一种无衬线，字号固定为五档，不做中间值。标题加粗，正文以 19px 为准。
- 版面
- 把内容宽度收成一栏，全部对齐到左边同一条线。不分栏也不加边框，话题的分界只用一条横线来表示。
- 材料
- 颜色只与含义绑定，不拿来做装饰。按钮圆角为零，靠下边自身更深一档颜色的带做出厚度。焦点固定为黄底加黑色下划线。
- 注意
- 为了好看而把按钮做成圆角、把输入框的边线改细，就会抹掉这套样式唯一依靠的两个信号，可按的厚度和焦点的位置。
- 延伸阅读
- GOV.UK Design System の Styles にある色の使用規則 / govuk-frontend の focused ヘルパーが黄色い地と黒い下線をどう作っているか / GDS Transport という書体の出自と、なぜ政府サービス向けに限って配られるのか
相关词条
引用此条目
这部辞典就是用来被链接的。请取用适合你写作场合的那一种形式。
- Link
- https://indexstyle.org/zh/styles/govuk-design-system
- Markdown
- [GOV.UK Design System — IndexStyle](https://indexstyle.org/zh/styles/govuk-design-system)
- HTML
- <a href="https://indexstyle.org/zh/styles/govuk-design-system">GOV.UK Design System — IndexStyle</a>