通过对不同类型的app进行总结,总结出app的字体规范。

一、字体选择

1.IOS:苹果ios 9系统开始,系统最新的默认中文字体是:苹方。英文字体是: San Francisco

2.Android:英文字体:Roboto,中文字体:Noto

二、案例分析

1.以今日头条界面为例,导航主标题字号为40px,正文标题为36px,辅助性说明文字为24px,小字(视频长短,标题栏按钮名)为20px,头像名为28px。字体大小代表的层级关系一目了然。

2.正文部分,导航栏标题文字为36px,内容标题为48px,正文为36px,小字为22-20px。

(因app性质不同,今日头条作为阅读类型的app,会更注重文本的阅读便捷性。所以字号选择上会偏大一些。)

3.再以微信为例,导航栏标题文字为36px,内容标题文字为34px,内容为28px,辅助性说明文字为24px。

4.最后以豆果美食为例,豆果美食是我认为界面阅读很漂亮的一个app。文字阅读给人一种很精致舒服的感觉。同阅读类型的新闻app和工具类型的app在字号选择上相比,它的文字选择的要稍小一些。如导航栏的字号为30px,页面最大字号为34px(分类标题),其次是32px,28px,24px,20px

这是豆果美食的内容详情页,在正文标题用到了36px,正文内容为32px,次要文字为28px,其次是24px,22px,20px。

三、总结

总结如图,选择字体大小时应根据app的性质,风格,定位来进行选择,应通过文字大小表现出内容的轻重,层级划分,做到层级关系明显。除了对字体进行字号大小的区别,还可对文字进行样式(加重字体)和颜色的区分。

(原创分享,喜欢的小伙伴儿给我点个赞吧~O(∩_∩)O谢谢)

App界面设计规范-字体规范的更多相关文章

  1. app界面设计字体规范

    通过对不同类型的app进行总结,总结出app的字体规范. 一.字体选择 1.IOS:苹果ios 9系统开始,系统最新的默认中文字体是:苹方.英文字体是: San Francisco 2.Android ...

  2. IOS与Android APP界面设计规范要点

    IOS篇 一.尺寸及分辨率 iPhone界面尺寸:320*480.640*960.640*1136 iPhone6:4.7英寸(1334×750),iPhone6 Plus:5.5英寸(1920×10 ...

  3. iOS和Android的app界面设计规范(转)

    记录一下iOS和Andoird的界面设计规范,方便进行标准的产品设计,并与设计师顺畅沟通 iOS篇 界面尺寸 设备 分辨率 状态栏高度 导航栏高度 标签栏高度 iPhone6 plus 1242×22 ...

  4. 【产品设计】【转】APP界面设计规范编写指南(人人都是产品经理)

    转自 :http://www.woshipm.com/ucd/608557.html 作者:EID_UX_DESIGN,微信公众号:EID_center 原文地址:http://www.ui.cn/d ...

  5. APP设计尺寸规范大全,APP界面设计新手教程【官方版】(转)

    正值25学堂一周年之际,同时站长和APP设计同仁们在群里(APP界面设计 UI设计交流群,APP界面设计⑥群 APPUI设计③群58946771 APP设计资源⑤群 386032923欢迎大家加入交流 ...

  6. App界面交互设计规范

    策划007-App界面交互设计规范 字数1805 阅读3544 评论20 喜欢154 交互设计规范 在上篇<策划006-APP界面设计风格>确定下来后,产品经理(兼交互设计)还不用着急将所 ...

  7. App界面交互设计规范(转)

    在上篇<APP界面设计风格>确定下来后,产品经理(兼交互设计)还不用着急将所有的交互稿扔给设计师进行细致的界面设计.在细节设计启动前,拉上设计师和安卓前端开发.ios前端开发一起商议确定设 ...

  8. Android/IOS APP界面设计之尺寸规范

    1.尺寸以及分辨率 iPhone的界面尺寸不用多说,640*960是基本OK的,也可以是适应5S的640*1136,马上iPhone 6也快来了(随便吐槽一下网上曝的真机谍照,真是丑到离谱...),只 ...

  9. 如何在移动端app中应用字体图标icon fonts (转)

    原文: http://www.cnblogs.com/willian/p/4166757.html?utm_source=tuicool&utm_medium=referral How to ...

随机推荐

  1. div+css中height:auto !important; height:663px; min-height:663px !important;区别

    height:auto !important是高度自适应,主要的是,!important只是对于ie6不认识而已,其他浏览器都是以这个为最高的优先级,执行这个,ie6会无视这个,不是只有火狐而已hei ...

  2. 最全Python爬虫总结(转载)

    [html] view plain copy 最近总是要爬取一些东西,索性就把Python爬虫的相关内容都总结起来了,自己多动手还是好. (1)普通的内容爬取(2)保存爬取的图片/视频和文件和网页(3 ...

  3. 【hdu】4521 小明序列【LIS变种】【间隔至少为d】

    题目链接:https://vjudge.net/contest/228455#problem/B 转载于:https://blog.csdn.net/a709743744/article/detail ...

  4. 第一章 Python入门

    一. 语言 计算机语言:人和计算机之间沟通的语言计算机语言: 按照级别分类:(越高级月进阶人类) 机器语言: 汇编语言: 助记符 ag. add 2 3 高级语言: c, PHP, java , .n ...

  5. python爬虫之反爬虫(随机user-agent,获取代理ip,检测代理ip可用性)

    python爬虫之反爬虫(随机user-agent,获取代理ip,检测代理ip可用性) 目录 随机User-Agent 获取代理ip 检测代理ip可用性 随机User-Agent fake_usera ...

  6. python小工具myqr生成动态二维码

    python小工具myqr生成动态二维码 (一)安装 (二)使用 (一)安装 命令: pip install myqr 安装完成后,就可以在命令行中输入 myqr 查看下使用帮助: myqr --he ...

  7. Windows10下 tensorflow-gpu 配置

    引言 越来越多的的人入坑机器学习,深度学习,tensorflow 作为目前十分流行又强大的一个框架,自然会有越来越多的新人(我也刚入门)准备使用,一般装的都是 CPU 版的 tensorflow,然而 ...

  8. MySql:Table 'database.TABLE_ONE' doesn't exist

    1. 问题描述 由于最近使用本地的MySQL奔溃了,在修改管理员密码时,不慎修改错误,导致无法重新写会,甚至按照MySQL官网手册都无法修改正确,遂放弃修改root密码,直接将一个未有数据的纯净版My ...

  9. 关于Git的总结

    首先我们先看一张图: 首先我们必须要先理解这几个概念:暂存区,本地仓库,远程仓库 暂存区:这个是我们每一次进行代码修改的地方,例如我们ieda的所编译的代码就是缓存区 本地仓库:是我们每一次pull, ...

  10. openstack IPV6

    openstack queens  配置有状态DHCPv6 概念: DHCPv6是一个用来配置工作在IPv6网络上的IPv6主机所需的IP地址.IP前缀和/或其他配置的网络协议. IPv6主机可以使用 ...