App界面设计规范-字体规范
通过对不同类型的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界面设计规范-字体规范的更多相关文章
- app界面设计字体规范
通过对不同类型的app进行总结,总结出app的字体规范. 一.字体选择 1.IOS:苹果ios 9系统开始,系统最新的默认中文字体是:苹方.英文字体是: San Francisco 2.Android ...
- IOS与Android APP界面设计规范要点
IOS篇 一.尺寸及分辨率 iPhone界面尺寸:320*480.640*960.640*1136 iPhone6:4.7英寸(1334×750),iPhone6 Plus:5.5英寸(1920×10 ...
- iOS和Android的app界面设计规范(转)
记录一下iOS和Andoird的界面设计规范,方便进行标准的产品设计,并与设计师顺畅沟通 iOS篇 界面尺寸 设备 分辨率 状态栏高度 导航栏高度 标签栏高度 iPhone6 plus 1242×22 ...
- 【产品设计】【转】APP界面设计规范编写指南(人人都是产品经理)
转自 :http://www.woshipm.com/ucd/608557.html 作者:EID_UX_DESIGN,微信公众号:EID_center 原文地址:http://www.ui.cn/d ...
- APP设计尺寸规范大全,APP界面设计新手教程【官方版】(转)
正值25学堂一周年之际,同时站长和APP设计同仁们在群里(APP界面设计 UI设计交流群,APP界面设计⑥群 APPUI设计③群58946771 APP设计资源⑤群 386032923欢迎大家加入交流 ...
- App界面交互设计规范
策划007-App界面交互设计规范 字数1805 阅读3544 评论20 喜欢154 交互设计规范 在上篇<策划006-APP界面设计风格>确定下来后,产品经理(兼交互设计)还不用着急将所 ...
- App界面交互设计规范(转)
在上篇<APP界面设计风格>确定下来后,产品经理(兼交互设计)还不用着急将所有的交互稿扔给设计师进行细致的界面设计.在细节设计启动前,拉上设计师和安卓前端开发.ios前端开发一起商议确定设 ...
- Android/IOS APP界面设计之尺寸规范
1.尺寸以及分辨率 iPhone的界面尺寸不用多说,640*960是基本OK的,也可以是适应5S的640*1136,马上iPhone 6也快来了(随便吐槽一下网上曝的真机谍照,真是丑到离谱...),只 ...
- 如何在移动端app中应用字体图标icon fonts (转)
原文: http://www.cnblogs.com/willian/p/4166757.html?utm_source=tuicool&utm_medium=referral How to ...
随机推荐
- Volley网络通信框架
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools=&q ...
- 编辑你的数学公式——markdown中latex的使用
前言 最近开始使用起markdown来记学习笔记,因为经常有公式要写,就需要用到latex,到网上查来查去又不太方便,而且也很少能查到写的比较全的,就准备写下这篇文章. 插入数学公式 在markdow ...
- Open Source Book For ML
The following is a list of free, open source books on machine learning, statistics, data-mining, etc ...
- BZOJ.2434.[NOI2011]阿狸的打字机(AC自动机 树状数组 DFS序)
题目链接 首先不需要存储每个字符串,可以将所有输入的字符依次存进Trie树,对于每个'P',记录该串结束的位置在哪,以及当前节点对应的是第几个串(当前串即根节点到当前节点):对于'B',只需向上跳一个 ...
- [POI2018]Pionek
[POI2018]Pionek 题目大意: 在无限大的二维平面的原点放置着一个棋子.你有\(n(n\le2\times10^5)\)条可用的移动指令,每条指令可以用一个二维整数向量表示.请你选取若干条 ...
- C、C++ 学习经历
1.可以考虑先学习C. 大多数时候,我们学习语言的目的,不是为了成为一个语言专家,而是希望成为一个解决问题的专家.做一个有用的程序员,做一个赚钱的程序员.我们的价值,将体现在客户价值上,而不是语言写得 ...
- BZOJ4122 : [Baltic2015]File paths
对于在$o$点的某个询问,有两种情况: 情况1:走到任意一个点$x$然后超链接跳到$o$的某个祖先$y$再走到$o$. 枚举所有$y$看看是否存在$x$即可. 时间复杂度$O(nm)$. 情况2:走到 ...
- wampServer 安装 Redis 扩展
REmote DIctionary Server(Redis) 是一个由Salvatore Sanfilippo写的key-value存储系统. Redis是一个开源的使用ANSI C语言编写.遵守B ...
- react-native基础教程(1)
转载链接:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/react-native-foundation-course/ React ...
- Spark MLlib 之 Vector向量深入浅出
Spark MLlib里面提供了几种基本的数据类型,虽然大部分在调包的时候用不到,但是在自己写算法的时候,还是很需要了解的.MLlib支持单机版本的local vectors向量和martix矩阵,也 ...