移动设计字体规范
移动平台设计规范
05 IOS黄金栅格系统
苹果开发了一套黄金比例栅格系统，可以在你的图标上很好地确定元素的尺寸和对齐。
不过，即使在原生应用的图标上，苹果的设计师们也没有严格按照这个栅格系统来设
07 UI的手势交互概述
07 UI的手势交互概述
尺寸规范之Android篇
01 尺寸及分辨率
Android界面尺寸： 482 * 800 720 * 1280 1080 * 1920
Android的尺寸比IOS要多很多套，建议采用720*1280这个尺寸进行设计
Android的APP界面与IOS基本相同：状态栏、导航栏、主菜单栏以及中间的内容
UI平台设计规范
尺寸规范之IOS篇
01 尺寸及分辨率
iPhone界面尺寸： 320 * 480 640 * 960 640 * 1136 750 * 1334 1080 * 1920
iPad界面尺寸：
1024X * 768
2048 * 1536
单位都是PX（像素，网页UI与移动端UI分辨率一般都只要72）
C：表格标签：Regular 28px；
D：Tab页图标标签：Regular 20px
举例说明
我的音乐：34PX 我的、淘歌、发现：30PX MUXXX：34PX 本地音乐：30PX 泡沫、邓紫棋：24PX
05 图标尺寸大小
图标都按照最大1024*1024进行设计，之后按照比例进行缩小、调整
高光部分与圆角不需要做，ios系统自动生成
设计的时候不是每一个尺寸都做一套，一般采用750X1334的尺寸进行设计
Android系统字体规范
Android系统字体规范我们在做Android移动APP设计的时候，字号的选择也是很让人头疼，转载一份有关Android系统字体规范，如果在做Android项目的用户应该看看，如果有任何建议欢迎在留言处与我们交流探讨。
主要从以下几点做了分析：移动设计中与字号有关的基本概念Android系统默认字体及字号Android字体单位sp与px的换算规范字号的意义印刷业的规范字号的用法Android规范字号的近似用法如何向前端输出？如何在photoshop里选择字号？1.移动设计中与字号有关的基本概念px：Pixels即像素，基本原色素及其灰度的基本编码。
DPI：dots per inch，是印刷上的记量单位，意思是每个英寸上，所能印刷的网点数。
PPI：pixels per inch数字影像的解析度，意思是每英寸所拥有的像素数，即像素密度。
PPI=√（长度像素数²+宽度像素数²）/屏幕对角线英寸数pt：Point，磅因，国际通行的印刷单位，是一个自然界标准的长度单位。
inch=2.54cm=25.4mm=72pt，1pt≈0.35mmPhotoshop里的字体单位pt和point不一样。
在Photoshop里，同样是10pt的字，只要变换字体，字的高度就会变化。
dp：Density-independent pixels，以160PPI屏幕为标准，则1dp=1pxdp和px的换算公式：dp*ppi/160=pxsp：Scale-independent pixels.安卓的字体单位，以160PPI屏幕为标准，当字体大小为100%时，1sp=1pxsp与px的换算公式：sp*ppi/160=px2.Android系统默认字体Rotobo,限定使用以下字号3.Android字体单位sp与px的换算PPI=√（长度像素数²+宽度像素数²）/屏幕对角线英寸数sp与px的换算公式：sp*ppi/160=px以三星Note2为例，PPI=√（1280²+720²）/5.5=267经测量，三星Note2的字体高度确实如此，见下图：4.规范字号的意义保证相同字号的字在不同PPI屏幕上显示的物理高度一致，下面来验证一下。
字体自适应宽高公式
字体自适应宽高公式
字体自适应宽高的公式通常用于在网页设计或移动应用程序开发中，以确保文本在不同设备上都能够以合适的大小显示。
在网页设计中，可以使用CSS中的单位vw和vh来实现字体的自适应，公式如下：
假设设计稿的宽度为W，高度为H，字体大小为F。
根据宽度自适应公式，字体大小 = W 某个比例系数。
根据高度自适应公式，字体大小 = H 某个比例系数。
其中，比例系数可以根据实际需求进行调整，一般来说，可以根据设计稿的比例来确定。
在移动应用程序开发中，可以根据屏幕的宽度和高度来动态计算字体大小，以适应不同的设备。
公式如下：
假设屏幕的宽度为ScreenWidth，高度为ScreenHeight，字体大小为F。
根据宽度自适应公式，字体大小 = ScreenWidth 某个比例系数。
根据高度自适应公式，字体大小 = ScreenHeight 某个比例系数。
在实际应用中，可以根据具体的设计需求和用户体验来确定合
适的比例系数，以确保文字在不同设备上都能够以合适的大小显示。
除了以上的公式，还可以利用JavaScript或其他编程语言来实
现字体的自适应。
通过动态计算屏幕的宽度和高度，以及设定合适
的比例系数，来实现字体的自适应。
总之，字体自适应宽高的公式可以根据具体的设计需求和开发
环境来确定，但核心思想是根据设备的宽度和高度动态计算字体大小，以确保文字在不同设备上都能够以合适的大小显示。
字体设计_字体的创意设计说明书
直接表现（字体的形象化设计）
●运用具体的形象直接地表达出文字的含义。在保证其识 别性的基础上使汉子的某个笔画或局部转化为图形。有着 很好的视觉效果。 ●根据字或词的含义添加具体形象。这种形象化的设计手 法增加了直观性、趣味性，给人印象深刻。它包括笔画形 象化、整体形象化、添加形象和标记形象。 ●形象化设计要注意具体形象在文字中的位置及图形与文 字之间的关系。以不影响文字的完整性、可识性为前提， 起到加强字体表现力的作用。形象的应用要避免生搬硬套， 或简单图解化造成的字体格调平庸。
（3）统一结构
字体的笔形应 依照整体风格， 在起收笔方式、 行笔中，粗细 程度的变化、 转折处理和装 饰形的变化等 方面都应一致。
（4）调整细节
对结构过于特 殊的字，在把 握整体风格的 基础上，可作 微妙调整。
（5）方向统一
方向的统一在字体设计中有两层含义：一是指字体自身的斜 笔画处理，每个字的斜笔画都要处理成统一的斜度，不论是 向左或向右斜的笔画都要以一定的倾斜度来统一，以加强其 统一的整体感。二是为了造成一组字体的动感，往往将一组 字体统一有方向性的斜置处理。在作这种设计时，首先要使 一组字中的每一个字都按同一方向倾斜，以形成流畅的线条； 其次是对每个字中的副笔画处理时，也要尽可能地使其斜度 一致，这样才能在变化中保持同一的因素，增强其整体的统 一感。而不致于因变化不统一，显得零乱而松散，缺乏均齐 统一的美感，难以产生良好的视觉吸引力。
间接表现（字体的意象化设计）
●借用相关的符号、形象 间接地隐喻出文字的内涵。 它以强调典型特征或提示 的方法对文字加以艺术处 理，给人以想像，回味无 穷。意象化设计一般不以 具体形象穿插配合，而是 以文字笔画横、竖、点、 撇、捺、挑、钩等偏旁与 结构做巧妙变化。这需要 对文字设计有独特的理解 与创意，于平淡之中见神 奇，使内容与形式达到和 谐统一。
设计规范大全
设计规范大全设计规范是一种规定设计师在设计过程中应遵循的标准和准则。
遵守设计规范有助于提高设计质量、节约设计资源、增强设计的可维护性和可扩展性。
下面是一个设计规范的大全，总结了设计过程中需要注意的内容。
一、界面设计规范1. 保持一致性：界面各元素的布局、颜色、字体等要保持一致，使用户能够在不同页面间进行无缝切换。
2. 简洁明了：界面要简洁明了，避免过多的复杂信息和无关的内容，提供清晰的用户导航。
3. 强调重要内容：重要的信息要以突出的方式呈现，比如使用颜色、大小、位置等。
4. 合理布局：合理布局页面元素，符合用户阅读习惯和使用习惯。
5. 考虑响应式设计：界面要能够适应不同屏幕分辨率和设备的展示需求。
6. 考虑可访问性：界面要考虑到不同用户的特殊需求，比如视力障碍、听力障碍等。
二、图标设计规范1. 简洁明了：图标要简洁明了，表达意思清晰。
2. 无歧义性：图标的意思要直观无歧义，不容易引起误解。
3. 可区分性：图标要能够与其他图标区分开，不易混淆。
4. 缩放性：图标要能够在不同分辨率的屏幕上进行缩放，保持清晰度。
5. 配色一致性：图标的颜色要与界面的整体配色一致，与其他元素相协调。
三、字体设计规范1. 可读性：所使用的字体要具有良好的可读性，字体大小和行距要适中。
2. 一致性：字体的使用要保持一致，避免在不同页面或不同区域使用不同的字体。
3. 选择恰当的字体：根据设计需求选择恰当的字体，比如正经场合使用正式字体，活泼场合使用手写字体等。
4. 字重和字形的组合：合理组合字体的字重和字形，使文字呈现出更好的层次感。
5. 考虑多语言支持：如果需要支持多种语言，要选择适合该语种的字体。
四、色彩设计规范1. 考虑品牌色彩：根据品牌的视觉识别系统选择与品牌一致的色彩。
2. 避免过分使用鲜艳色彩：过分使用鲜艳的色彩可能分散用户的注意力，影响信息的传达。
3. 考虑色彩的情感表达：不同的色彩有不同的情感表达，选择合适的色彩来表达设计目标。
移动端设计指南
STYLE GUIDE 20146
TGIDEAS移动端页面设计规范
次要按钮
次要按钮一般跟随其相关的主要按钮，让画面轻量化
一些次要的按钮，一般用文字链或者线框的按钮来展示，如果次要按钮在两个以上 采用文字链为佳，如果只有一个则选线框的按钮为佳。 次要按钮弱化可以让注意力集中在其相邻的按钮身上。
正常态： 按压态： 不可用：
STYLE GUIDE 2016
TGIDEAS移动端页面设计规范
适配剩下35%尺寸
让设计稿在178:100的比例中显示最佳状态，在其他尺寸尽量信息完整
保证设计稿在178:100的比例中显示最佳状态，在其他尺寸中通过元素自定义布局的设置，保证 信息可以露出完整。 手游目标用户的机型通常要求较高，大多数属于主流机型。 考虑到目标用户为游戏玩家，对设备要求较高，故而舍弃过去兼容到4s的尺寸，也更加便于设计师的发挥。
TGIDEAS移动端页面设计规范
正文标题与内容
STYLE GUIDE 2016
TGIDEAS移动端页面设计规范
字体的选择
ios 系统
默认中文字体是苹方体 默认英文字体是Helvetica 默认数字字体是HelveticaNeue 无微软雅黑字体
android 系统
默认中文字体是Droidsansfallback 默认英文和数字字体是Droid Sans 无微软雅黑字体 winphone 系统 无微软雅黑字体
有一些案例，以上都比较常见——匹配内、外半径，缩放原始形状的尺寸，并增加在边界和 原来的内半径在一起。后者是迄今为止最好的表现方法， 一致的轮廓让整体视觉更舒服。
STYLE GUIDE 2016
TGIDEAS移动端页面设计规范
按钮指令
移动应用界面设计开发标准手册
移动应用界面设计开发标准手册第1章界面设计基础 (4)1.1 设计原则与规范 (4)1.2 设计工具与技术 (4)1.3 用户体验与交互设计 (4)第2章色彩与视觉元素 (4)2.1 色彩搭配与运用 (4)2.2 图标与按钮设计 (4)2.3 图片与插画应用 (4)第3章字体与排版 (4)3.1 字体选择与运用 (4)3.2 标题与正文排版 (4)3.3 文本输入与显示 (4)第4章布局与导航 (4)4.1 布局原则与类型 (5)4.2 栅格系统与间距 (5)4.3 导航模式与设计 (5)第5章交互与动画 (5)5.1 交互设计原则 (5)5.2 触控操作与反馈 (5)5.3 动画效果与过渡 (5)第6章列表与卡片 (5)6.1 列表展示与排序 (5)6.2 卡片式设计与应用 (5)6.3 滑动操作与筛选 (5)第7章表单与输入 (5)7.1 表单设计原则 (5)7.2 输入框与选择器 (5)7.3 错误提示与校验 (5)第8章消息提示与通知 (5)8.1 消息提示设计 (5)8.2 通知栏与推送 (5)8.3 弹窗与模态窗口 (5)第9章用户引导与教育 (5)9.1 新功能引导设计 (5)9.2 操作教程与提示 (5)9.3 帮助与反馈 (5)第10章跨平台与响应式设计 (5)10.1 跨平台设计原则 (5)10.2 响应式布局与适配 (5)10.3 平台特定设计与优化 (5)第11章功能优化与测试 (5)11.2 加载与刷新机制 (6)11.3 界面测试与评估 (6)第12章设计规范与交付 (6)12.1 设计规范与组件库 (6)12.2 设计交付物与协作 (6)12.3 设计迭代与优化 (6)第1章界面设计基础 (6)1.1 设计原则与规范 (6)1.2 设计工具与技术 (6)1.3 用户体验与交互设计 (7)第2章色彩与视觉元素 (7)2.1 色彩搭配与运用 (7)2.1.1 整体色调协调统一 (7)2.1.2 重点色运用 (7)2.1.3 色彩平衡 (7)2.1.4 调和对立色 (8)2.2 图标与按钮设计 (8)2.2.1 形状与线条 (8)2.2.2 颜色搭配 (8)2.2.3 尺寸与间距 (8)2.3 图片与插画应用 (8)2.3.1 选择合适的图片 (8)2.3.2 个性化插画 (8)2.3.3 合理布局 (9)第3章字体与排版 (9)3.1 字体选择与运用 (9)3.1.1 字体分类 (9)3.1.2 字体选择原则 (9)3.1.3 字体运用技巧 (9)3.2 标题与正文排版 (9)3.2.1 标题排版 (10)3.2.2 正文排版 (10)3.3 文本输入与显示 (10)第4章布局与导航 (10)4.1 布局原则与类型 (10)4.2 栅格系统与间距 (11)4.3 导航模式与设计 (11)第5章交互与动画 (12)5.1 交互设计原则 (12)5.2 触控操作与反馈 (12)5.3 动画效果与过渡 (13)第6章列表与卡片 (13)6.1 列表展示与排序 (13)6.1.2 列表的排序 (13)6.2 卡片式设计与应用 (14)6.2.1 卡片式设计的基本概念 (14)6.2.2 卡片式设计的应用 (14)6.3 滑动操作与筛选 (14)6.3.1 滑动操作 (14)6.3.2 筛选功能 (15)第7章表单与输入 (15)7.1 表单设计原则 (15)7.2 输入框与选择器 (15)7.3 错误提示与校验 (16)第8章消息提示与通知 (16)8.1 消息提示设计 (16)8.1.1 设计原则 (16)8.1.2 设计方法 (17)8.2 通知栏与推送 (17)8.2.1 通知栏设计 (17)8.2.2 推送设计 (17)8.3 弹窗与模态窗口 (17)8.3.1 弹窗设计 (17)8.3.2 模态窗口设计 (17)第9章用户引导与教育 (18)9.1 新功能引导设计 (18)9.1.1 明确目标用户群体 (18)9.1.2 简洁明了的引导界面 (18)9.1.3 逐步引导 (18)9.1.4 互动式引导 (18)9.1.5 个性化引导 (18)9.2 操作教程与提示 (18)9.2.1 结构清晰的教程内容 (18)9.2.2 图文并茂的教程形式 (19)9.2.3 关键步骤的提示 (19)9.2.4 适时出现 (19)9.3 帮助与反馈 (19)9.3.1 帮助中心 (19)9.3.2 在线客服 (19)9.3.3 用户反馈渠道 (19)9.3.4 优化更新提示 (19)第10章跨平台与响应式设计 (19)10.1 跨平台设计原则 (19)10.2 响应式布局与适配 (20)10.3 平台特定设计与优化 (20)第11章功能优化与测试 (21)11.1.1 代码优化 (21)11.1.2 资源管理 (21)11.1.3 网络优化 (21)11.2 加载与刷新机制 (21)11.2.1 页面加载优化 (21)11.2.2 数据刷新机制 (22)11.3 界面测试与评估 (22)11.3.1 界面功能测试 (22)11.3.2 界面评估 (22)第12章设计规范与交付 (22)12.1 设计规范与组件库 (22)12.1.1 设计规范 (22)12.1.2 组件库 (23)12.2 设计交付物与协作 (23)12.2.1 设计交付物 (23)12.2.2 协作 (23)12.3 设计迭代与优化 (23)12.3.1 设计评审 (23)12.3.2 用户反馈 (24)12.3.3 数据分析 (24)12.3.4 设计工具与方法 (24)第1章界面设计基础1.1 设计原则与规范1.2 设计工具与技术1.3 用户体验与交互设计第2章色彩与视觉元素2.1 色彩搭配与运用2.2 图标与按钮设计2.3 图片与插画应用第3章字体与排版3.1 字体选择与运用3.2 标题与正文排版3.3 文本输入与显示第4章布局与导航4.1 布局原则与类型4.2 栅格系统与间距4.3 导航模式与设计第5章交互与动画5.1 交互设计原则5.2 触控操作与反馈5.3 动画效果与过渡第6章列表与卡片6.1 列表展示与排序6.2 卡片式设计与应用6.3 滑动操作与筛选第7章表单与输入7.1 表单设计原则7.2 输入框与选择器7.3 错误提示与校验第8章消息提示与通知8.1 消息提示设计8.2 通知栏与推送8.3 弹窗与模态窗口第9章用户引导与教育9.1 新功能引导设计9.2 操作教程与提示9.3 帮助与反馈第10章跨平台与响应式设计10.1 跨平台设计原则10.2 响应式布局与适配10.3 平台特定设计与优化第11章功能优化与测试11.1 功能优化策略11.2 加载与刷新机制11.3 界面测试与评估第12章设计规范与交付12.1 设计规范与组件库12.2 设计交付物与协作12.3 设计迭代与优化第1章界面设计基础1.1 设计原则与规范界面设计是软件开发中的环节，它直接关系到用户对产品的第一印象及长期使用体验。
产品经理学习资料 - 典型的PRD规范2021
产品经理学习资料-典型的PRD规范前言PRD是衡量一个产品经理整体思维的标准，一个PRD可以看出产品经理在某个领域的专业性，和整体产品思维。
产品经理的整体思维主要体现在以下7个方面：（1）提炼核心需求（2）思考满足核心需求的方式（3）评估方式优劣选定方案（4）思考功能概要（5）思考支撑功能和关联功能（6）细化设计功能（7）子功能（功能间迭代）PRD给的是一种思想，将产品的整体思想和核心需求灌输给产品的相关人员。
每个公司都可以根据自己公司的实际需要，来写适合自己产品团队的PRD。
淘宝系PRD规范1、文件命名（编号）文件的编号很关键，一般命名规则“公司名+产品名+ PRD+ D1.0”（以第一版为例）。
如果是小的产品需求变动可以直接命名为“公司名-产品名-PRD-D1.01”。
如果涉及到功能需求增加可以命名为“公司名-产品名-PRD- D1.1”。
当出现产品第二版时，可以命名为“公司名-产品名-PRD-D2.0”。
2、修订控制页一般有这么几项：编号、文档版本、修订章节、修订原因、修订日期、修改人。
3、目录不考虑目录的内容，等写完PRD可以再去更新。
但建议用Mind manager来整理一下思路。
4、请与以下部门讨论PRDPRD做为一个承接作用的“载体”，会与技术、运营、财务等人员的沟通，而与这些人员沟通的主题都将会出现在子功能或在细节细化的基本上，需要与相关人员确定“沟通内容”，这对于产品整体流程将是很重要的。
同时对于产品核心功能的提取也是一个重要环节。
例如与客服中心：讨论预测客服成本、工作量；讨论客服如何支持；协助评估诈欺/数据窜改风险：欺诈/数据窜改风险、不正使用风险。
5、概述概念部分它包括：名词说明、产品概述及目标、产品roadmap、产品风险。
产品概述及目标：解释说明该产品是干什么的，为什么需要这样的产品。
同时产品想要达到什么样的目标。
产品概述及目标就是对产品核心功能讲解，同时希望可以达到的期望。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
iOS&Android 移动设计字体规范整理大全
对于一位移动APP设计师来说，字体的把控非常重要。
特别是app设计。
因为不同的字体在不同的移动终端显示出来的效果真是百花齐放。
终极没达到我们设计图的效果。
所以，ios和android都有各自的设计规范。
也是告诉各位一定APP设计和开发人员可以遵循这些规范来设计开发，尽量达到最佳显示效果。
一、IOS版本的字体设计规范和常识
iOS 的 1 pt = 逻辑像素 1 px = 物理像素 1 px（非 Retina）或 2 px（Retina）如果你新建 Photoshop 文档时将 PPI 设定为 72，则文档中 1 pt = 1 px；如果你把 PPI 设为 144，则 1 pt = 2 px。
单位术语：pt: point px: pixel PPI: pixels per inch Photoshop 默认使用 1 inch = 72 pt 的标准，所以为什么我们设计APP界面设计效果的时候，设置的分辨率就是72，主要是这样设计方便、免了换算之苦。
1、如果你是iOS客户端开发人员，你在编程时使用的默认简体中文字体，就是常用的华文Heiti SC。
2、如果你是iOS UI设计人员，你在设计时如果使用Photoshop，请选中“黑体-简”或Heiti SC，并设置为“细体”、“浑厚”是与iOS上的实际效果最接近的（Heiti SC Thin）。
或者是冬青黑简体、黑体等等。
英文字体是 Helvetica Neue Ultra Light。
如今iphone6和iphone6+开始流行，我们设计的字体规范也有所改变。
因为iPhone6和iPhone 6Plus都有标准模式和放大模式2种分辨率：
1.iPhone4和iPhone5宽度一样，5只是比4高176像素，所以5和4一套规范即可；
2.iPhone6的放大模式分辨率是640＊1136，和iPhone5正好相同；
3.iPhone6的标准模式分辨率为750*1334，整体放大1.5倍正好是iPhone6 Plus 的放大模式1125*2001。
我们来看淘宝购物车的截图（从左到右依次为iPhone4、5、6）：
总结：我们可以看出iPhone 4、5、6是可以共用一套字体大小规范。
而iPhone6 plus在放大模式下的字体正好是在此基础上放大 1.5倍：
如下我们来看下一般规律（72像素/英寸下的字号大小规律，即72ppt下面）导航栏标题：大概34px-42px；现在标题越来越小，一般36比较合适。
如果是iphone plus 那么字体大小应该是51-63px之间。
最合适的54px。
标签栏文字：20－24px。
ios自带应用都是20px。
个人认为标签栏时（图标＋文字）形式的的话不要大于22比较合适。
正文：28px－36px，新闻类基本都在用36，比如网易新闻正文部分。
除了新闻类，其他类型的APP 正文列表表单都可以是30-32px左右。
二、安卓android APP字体设计规范
安卓中文字体：droid sans fallback
安卓英文字体：roboto
安卓手机的默认中文字体都是droid sans fallback，是谷歌自己的字体，与微软雅黑很像，小米miui v5 用的也是这种字体。
sp与px的换算公式：sp*ppi/160 = px
如果想看下详细android字体：Android移动APP设计字体规范详解
题外话：为什么android安卓机器上的字体没ios的好看，原因有2点
第一点：android分辨率很多，字体渲染机制不一样。
第二点：和 iOS 相比，Android 的“字体系统”最大的一个缺点其实是缺字。
正好体现了 iOS 在 Android 字符数面前的优越感。
附加各大主流的移动或者桌面操作系统的默认中英文字体
以下列出的是西英文字体和简体中文字体：
Windows（Vista 及更高版本）
Segoe UI
微软雅黑 [1]（Windows 8 开始用微软雅黑 UI [2]）
Windows（Vista 之前）
Tahoma
中易宋体（又称宋体、SimSun）
Windows Phone
Segoe WP
方正等线（简体中文 locale，详见 [3]）或微软雅黑 [1]（英语 locale）Mac OS X
Lucida Grande
华文黑体（具体情况比较复杂，详见 [4]）
iOS
Helvetica Neue [5]（非 Retina display 的设备用 Helvetica）
华文黑体（该版本称作黑体-简，参见 [4]）
Android
Droid Sans（4.0 之前）或 Roboto [6]（4.0 及更高版本）
Droid Sans Fallback [1]（文泉驿微米黑之母）
Ubuntu
文泉驿微米黑 [1]
MIUI V5
方正兰亭中黑和方正兰亭黑。