美文网首页
5. 从小程序设计指南看界面设计常用字体规范

5. 从小程序设计指南看界面设计常用字体规范

作者: Minus | 来源:发表于2016-12-22 13:59 被阅读68次

1. 小程序字号标准

字体的使用与所运行的系统字体保持一致,常用字号为20, 18, 17, 16,14 13, 11(pt),使用场景具体如下:

微信小程序字号标准

2. 小程序字体颜色标准

主内容 Black 黑色,次要内容 Grey 灰色;时间戳与表单缺省值 Light 灰色;大段的说明内容而且属于主要内容用 Semi 黑;

微信字体颜色

3. 微信中的应用

消息列表字号颜色 零钱字号颜色
  • 导航,主标题字号:20pt

  • 内文展示:一般分为三个层级,正文,副文,提示小字,字号由大到小,颜色由浅到深
    正文--一级内容:17pt, black,#000000
    副文--二级内容:14pt,gery,#888888
    小字--三级内容:13pt,light,#b2b2b2 ,辅助信息

  • 主操作,大按钮:18pt
    数字:40pt
    链接:13pt
    版权信息:11pt

  • 背景色:#EBEBEB
    分割线:#F8F8F8

背景色,分割线

4. 其他应用

网易云音乐 百度外卖

字体大小是瞎标的……
可以看出基本上所有内容按重要程度可分为3个层级:重要,一般,较弱,所以3种大小的字体可以适用于80%的文字,再加设特大,特小来描述需重点强化或非常弱化的内容,就已经足够完整表述信息。

依据小程序设计指南,可以用17pt,14pt,13pt表示重要,一般,较弱;20pt特大表示最重要内容,11pt表示辅助信息,可以忽略的内容。

欢迎关注

相关文章

  • 5. 从小程序设计指南看界面设计常用字体规范

    1. 小程序字号标准 字体的使用与所运行的系统字体保持一致,常用字号为20, 18, 17, 16,14 13, ...

  • 设计指南二 视觉规范

    引用 官方文档 一、概要 本文主要为微信小程序设计指南文章中,视觉规范部分的笔记 微信小程序 设计指南一 二、字体...

  • 微信小程序 文档目录

    一、官方文档 官方文档 二、设计规范 设计指南一 设计指南二-视觉规范 拾旧微信小程序设计规范 小程序减肥过程 三...

  • 界面设计必备,常用字体规范

    好长时间没发帖,净想过年了,过年哈,倒腾工作总结和年货是大事。 这几天有人问我说:“最近看了好多教程,都老高大上了...

  • 设计规范

    YY设计规范:http://t.cn/Rtrrxfy 常用字体规范:http://t.cn/RcWAnmU 字体排...

  • 每日交互体验小记

    今天看交互设计IOS人机界面设计指南的时候,看到提到适时提供设置的快捷路径这个规范,突然想起以前自己使用很...

  • 一堆设计规范

    iPhone人机界面设计指南–PDF版本 iPad人机界面设计指南– PDF版本 黑莓6.0智能手机界面设计指南–...

  • ios字体适配

    1.关于常用字体的规范,仿照网易和淘宝规律总结 2.关于美工给的字体和系统字体的大小转换

  • 无标题文章

    UI设计规范 1.色彩 2.字体排版(字体名称、大小、行间距) 3.度量与间距 4.icon 5.按钮 6.导航栏...

  • UI设计课程笔记(二)

    界面设计: 1.素材 素材收集和整理 制作素材,切图技巧 2.颜色 颜色属性 颜色模式 配色 3.字体 常用中英文...

网友评论

      本文标题:5. 从小程序设计指南看界面设计常用字体规范

      本文链接:https://www.haomeiwen.com/subject/mmmcvttx.html