移动设计字体规范

程序应用 120*120PX 主屏幕 114*114PX Spotlight搜索 87*87PX 标签栏 75*75PX 工具栏和导航栏 44*44PX
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移动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规范前言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、产品风险。

产品概述及目标：解释说明该产品是干什么的，为什么需要这样的产品。

同时产品想要达到什么样的目标。

产品概述及目标就是对产品核心功能讲解，同时希望可以达到的期望。

移动终端应用UI设计与用户体验研究随着智能手机的普及，移动终端的应用程序也越来越多，应用程序的UI设计成为影响用户体验的重要因素。

UI设计是指用户界面设计，在移动终端应用中，主要是指应用软件的图标、按钮、文本框、滑动条、下拉菜单、标签等界面元素及其排版布局、颜色、字体等设计。

应用的UI设计决定了用户使用应用的方便程度和用户的使用体验，是应用程序设计的重要组成部分。

一、移动终端应用UI设计的基本原则移动应用程序的UI设计需要遵循以下基本原则：1.用户友好性：UI设计应该符合用户使用习惯和心理需求，考虑用户使用行为和思维模式，以提高用户的使用体验和满意度。

2.一致性：UI设计应该保持界面元素的一致性，颜色、字体、排版布局应该尽量保持一致，用户即使换了一个应用程序也能够很快地适应。

3.简洁性：UI设计应该尽量简洁明了，不应该过于繁杂，排版布局尽量合理，功能和内容要尽量精简。

中国古人说得好，少即是多。

4.可读性：UI设计需要考虑准确显示信息和字体的易读性。

尽量采用清晰简洁的字体，排版布局要合理，界面元素的大小、颜色、字体应该符合人眼视觉舒适度。

5.美观性：UI设计需要符合美学要求，色彩搭配、图标设计要美观大方，实用和美观的UI设计可以提高用户的体验感和品牌形象。

二、移动终端应用UI设计的具体实践1.输入框设计：输入框一定要有清晰的提示信息，界面元素的排列要直观，输入框的大小、颜色、字体要符合用户的阅读习惯，方便用户输入。

2.按钮设计：按钮的大小、颜色、字体等需要符合用户的视觉要求。

按钮的位置和样式需要符合用户的使用习惯，方便用户使用。

3.用户反馈：设计者应该为用户提供反馈信息，如进度条、加载提示等，以便用户能够看到操作状态和进度。

4.滑动条设计：滑动条的颜色、大小、字体、进度要符合用户的使用习惯和心理需求，以便用户可以清晰地看到滑动条的信息和进度。

5.字体设计：字体的大小、颜色、字型、间距等都需要符合视觉习惯，要具有良好的易读性和美学要求，以便用户可以方便地阅读信息。

澜,a click to unlimited possibilities
01 移 动 端 设 计 原 则 02 移 动 端 布 局 与 排 版 03 移 动 端 交 互 设 计 04 移 动 端 性 能 优 化 05 移 动 端 安 全 与 隐 私 保 护 06 移 动 端 开 发 规 范 与 最 佳 实 践
移动端数据加密技术：采用对称 加密算法对数据进行加密，保证 数据传输过程中的安全性。
端到端加密：数据在传输过程中， 从发送端到接收端始终保持加密 状态，保证数据的安全性。
添加标题
添加标题
添加标题
添加标题
SSL/TLS协议：在数据传输过程 中，使用SSL/TLS协议对数据进 行加密，保证数据传输的安全性。
优点：提高代码重用率、降低维护成本、便于团队协作和模块化管理
实践建议：使用组件化框架（如React Native、Flutter等）、遵循组件化设计原则、统一组 件风格和规范
注意事项：避免组件间的耦合度过高、保证组件的独立性和可扩展性
自动化测试： 使用工具进行 测试脚本编写
和执行
性能测试：对 移动端应用进 行性能测试， 确保流畅运行
操作流畅：提供快速响应和 流畅的操作体验
内容简洁明了：避免过多的 信息，突出核心内容
适应性强：在不同设备和屏 幕尺寸上保持良好的用户体
验
考虑用户习惯：遵循用户习 惯和常用操作，降低学习成
本
内容精简：移动端设计应注重简洁，避免冗余和复杂的功能。 布局清晰：界面布局应清晰明了，易于导航和使用。 响应迅速：移动端应用应快速响应用户操作，提供流畅的用户体验。 适应性强：移动端设计应适应不同设备和屏幕尺寸，确保良好的兼容性和适应性。
响应式设计：根据不同设备的屏幕大小和分辨率，自适应调整网页布局和样式 触屏操作：考虑单手操作和多点触控，优化按钮和交互方式 移动端特性：利用移动设备的特性，如地理位置、陀螺仪等，提供更丰富的功能和体验 适配不同系统：针对不同操作系统（如iOS、Android等）进行适配，确保一致的用户体验

D
PART Four
作
业
1、制作IOS端主流机型，iphone6、6P的尺寸规范。 2、制作Android端主流机型，720*1280的尺寸规范。 3、多款App界面截屏测量尺寸（iOS、android）
30
22
Android系统字体字号参考规范
23
主流Android手机分辨率和尺寸
常用设计尺寸：720×1280px、1080×1920px
24
主流Android手机分辨率和尺寸
25
系统分辨率统计
26
状态栏、
720*50px
720*96px
720*96px
27
C
PART Three
总
结
iOS 设备，尺寸保持750×1334px，并逐步转换成 1242×2208px Android 设备，尺寸保持1080×1920px
750*88px 起着导航作用，一般会显示标题、搜索框、 分段式控件等。位于状态栏下方。颜色一般 为App主色调。（透明色、单色、渐变色）
13பைடு நூலகம்
标签栏、工具栏
750*98px 让用户在不同的子任务、视图和模式中切换。 底部标签栏、顶部标签栏。 一般为3~5个，超过五个则用“更多”图标 表示。图标与文字均等宽。
21
Android的三栏尺寸
安卓的图标相对iOS来说较少，我们只需提供一下几个尺寸就可以了，但是需要提高2套，圆角和直角各一套，因为有的地方都会用到。 · 512x512px · 192x192px · 144x144px · 96x96px · 72x72px · 48x48px 字体：英文字体为 Roboto字体 中文字体为思源黑体。在Android 5.0之后，使用的是思源黑体，字体文件有2个名称，“source han sans”和“noto sans CJK”。 思源黑体是Adobe和Google领导开发的开源字体，支持繁简日韩，有7种字体粗细。

移动UI设计（微课版）教案全套第一章：移动UI设计概述1.1 移动UI设计的定义与重要性1.2 移动UI设计的原则与要素1.3 移动UI设计的流程与步骤1.4 移动UI设计的发展趋势与挑战第二章：移动UI设计的基本界面布局2.1 界面布局的基本概念与原则2.2 常见的界面布局类型与示例2.3 界面布局的实战技巧与方法2.4 优秀界面布局案例分析与借鉴第三章：移动UI设计的色彩与图标3.1 色彩在移动UI设计中的应用与重要性3.2 色彩搭配的基本原则与技巧3.3 图标设计的基本概念与原则3.4 图标设计的实战技巧与方法第四章：移动UI设计的字体与排版4.1 字体在移动UI设计中的应用与重要性4.2 字体的选择与搭配技巧4.3 排版的基本概念与原则4.4 排版设计的实战技巧与方法第五章：移动UI设计的交互与动画5.1 交互在移动UI设计中的应用与重要性5.2 交互设计的基本概念与原则5.3 动画设计的基本概念与原则5.4 交互与动画设计的实战技巧与方法第六章：移动UI设计的导航设计6.1 导航在移动UI设计中的应用与重要性6.2 导航设计的类型与实战技巧6.3 导航设计的常见问题与解决方案6.4 优秀导航设计案例分析与借鉴第七章：移动UI设计的适配与响应式设计7.1 适配与响应式设计在移动UI设计中的应用与重要性7.2 屏幕尺寸与分辨率的概念与实战技巧7.3 媒体查询与CSS Grid的应用技巧7.4 优秀适配与响应式设计案例分析与借鉴第八章：设计工具的使用8.1 Sketch在移动UI设计中的应用与实战技巧8.2 Adobe XD在移动UI设计中的应用与实战技巧8.3 Figma在移动UI设计中的应用与实战技巧8.4 其他设计工具的选择与应用技巧第九章：移动UI设计的项目管理与团队协作9.1 项目管理在移动UI设计中的应用与重要性9.2 项目计划的制定与执行技巧9.3 团队协作的基本概念与实战技巧9.4 优秀团队协作与项目管理案例分析与借鉴第十章：移动UI设计的案例解析与实战训练10.1 案例解析一：某电商APP的UI设计10.2 案例解析二：某社交平台的UI设计10.3 案例解析三：某新闻阅读APP的UI设计10.4 实战训练：设计一个属于自己的移动UI项目第十一章：移动UI设计的规范与标准11.1 设计规范的概念与重要性11.2 常见的设计规范与标准解读11.3 设计规范的实战应用与技巧11.4 优秀设计规范案例分析与借鉴第十二章：用户体验与用户测试12.1 用户体验在移动UI设计中的应用与重要性12.2 用户测试的基本概念与方法12.3 用户体验设计的实战技巧与方法12.4 优秀用户体验案例分析与借鉴第十三章：移动UI设计的优化与提升13.1 性能优化在移动UI设计中的应用与重要性13.2 图像优化与加载速度的提升技巧13.3 代码优化与执行效率的提升技巧13.4 优秀性能优化案例分析与借鉴第十四章：移动UI设计的趋势与创新14.1 设计趋势在移动UI设计中的应用与重要性14.2 最新设计趋势解读与实战技巧14.3 创新设计思维的培养与实践14.4 优秀创新设计案例分析与借鉴第十五章：移动UI设计的职业规划与发展15.1 移动UI设计师的职业角色与责任15.2 职业规划的基本概念与方法15.3 行业趋势与技能提升的方向15.4 优秀设计师的成长经验分享与借鉴重点和难点解析本文教案全面介绍了移动UI设计的基本概念、设计原则、实战技巧以及优秀案例分析等内容。

与建设方交流对工程任务的理解;(包括工程主要
2019/9/29
6
任务、建设规模、投资规模、中远期规划等)
附件-勘察报告
2019/9/29
7
1.3勘察记录
机房
记
详细记录机房平面图、方向、ODF占用图，并拍照
录 管道
要 点
详细记录管孔占用情况，是否需要新建管道，是否增加子管
2019/9/29
8
1.3勘察记录
备注:
2019/9/29
5
1.2勘察流程
与建设方就 工程总体情 况及工作安 排进行汇报
收集、核 对现有网 路资料
根据项目建议书组 网方案确定本工程 线路建设方案
与建设方配合下 进行实地勘察
根据勘察情况， 做出初步的勘 察报告
就勘察结果 向建设方逐 一汇报
建设方对勘察任务无异议及勘察报告 确认签字、形成最终报告、部门存档
架空杆路
(1)新建杆路合理性，避免绕；
(2)新建杆路在过村庄、道路、河流及桥梁的可实施性；
(3)对新建杆路需要用指南针测量方向；
记 (4)角杆需要2点参照物定标喷漆、测量角度，喷漆应醒目；参照物是房
录 屋时需记录房屋的门牌号，参照物是其他运营商或供电杆时应记录杆号;
要 点
(5)新建杆路应尽量沿公路建设，一般离公路10-100米适宜；
2019/9/29
11
2、初步设计
2、初步设计
目
1.1、CAD图纸
录
1.2、工作量
1.3、预算
1.4、说明
2019/9/29
12
2.1CAD图纸
(一)路由图
※ 新建架空光缆：三角定标、角度、公路、村庄等参照物。 ※ 绘图中所有标注的直线、样条曲线、多段线的线宽均采用0.6mm， 新建光缆路由采用粗线表示； ※ 图纸中字高2.5mm,字宽0.7mm,字体为宋体，图框采用设计院标准图 框，详见《通信工程A3图衔模板》、《通信工程A3图衔模板》； ※ 管道光缆：孔号、管孔占用； ※ 杆号标注按每5档左右标注一次，图纸首尾接图处电杆(管道)应标 注杆号(孔号) ※ 绘图时道路宽度按照县道6、省道8、国道10、高速10-12mm原则绘制；

移动端字体的设计准则好的字体是隐形的，不过更准确来说，应该是好的字体让阅读行为毫不费力。

下面是分享的移动端字体的设计准则，欢迎大家参考!当视线掠过一行文字时，它是跳跃前进的，我们称之为扫视。

你读的不是字母，甚至不是词语，而是文字某部分的影像，大脑会补上它预期的内容。

如果超出大脑预料，它会促使眼睛回去核实假设十分正确。

通过在字里行间创造平顺的视觉流动，好的字体极度减轻了眼睛的负担。

对任何字体工作者而言，在移动设备上要面临与生俱来的挑战：空间有限，环境光通常比较微弱。

不过将已经用于web端的技巧稍加调整，我们就可以提升移动设备的易读性。

1. 留足空间与普遍观点恰好相反，字体并非屏幕上弯弯曲曲的线条排列;它主要在于周围和相互间的空间。

字母本身对字体 * ，与构成它的空间相比，要小得多。

要理解这一点，了解字体从何而来很有帮助：字母o(还有b、c、p等等)中间的圆孔被称作“凹槽”。

在最原始的印刷机上，铅字由金属雕刻而成，这些凹槽雕刻成型、排列在盘中的金属活字。

第一个字体设计师所处理的模具，实际上并不能用于印刷。

字母本身对字体* ，与构成它的空间相比，要小得多。

谈到层次时，我们通常指的是h1到p，有时候还会到h6。

但另外还有一种层次在影响着行或段落的视觉流，这是特殊的层次：字母间距小于字间距，字间距小于行间距，以此类推。

要在移动端创造最佳易读性，尤其要注意这些特殊层次，这些格式塔式的词语、行、段落的文字组合，在自然光环境下同样至关重要。

2. 行宽行宽是一行文字的长度。

或者确切的说，是一行文字的理想长度，因为很难让每一行都精确吻合。

众所周知，舒适阅读的理想行宽是65个字符左右。

行宽产生的物理长度，取决于字体的设计、字间距(见下文)和你使用的具体文字。

本文开篇的65个字符(译者注：此处请参见英文原文)，用PT Serif 字体是26.875em宽，用Open Sans是28.4375em宽，用Ubuntu字体是27.3125em宽。

app字体规范APP字体规范是指在移动应用程序（APP）设计中，对字体的选择和使用进行规范化的原则和指导。

字体在APP界面设计中具有重要的作用，能够直接影响用户的阅读体验和整体视觉效果。

下面是关于APP字体规范的一些原则和建议。

一、字体选择1. 界面字体和系统字体应保持一致：APP界面字体应使用与用户手机系统默认字体一致或相近的字体，这样能够使用户在使用APP时感觉更为熟悉和舒适。

2. 字体风格清晰可辨：选择具备良好可读性的字体，确保用户在各种屏幕尺寸和光线条件下都能够轻松阅读文字内容。

3. 简洁易懂的字体风格：选择简洁大方的字体风格，避免使用过于复杂和生僻的字体，以免影响用户的理解和识别。

4. 多语言支持：如果APP需要支持多种语言，需要选择支持不同语言字符集的字体，保证文字在各种语言环境下的显示效果。

二、字体大小1. 标题字体大小：标题是吸引用户注意力的部分，通常应该使用较大的字体大小，在16px-28px之间，根据屏幕尺寸和设计需求进行合理调整。

2. 正文字体大小：正文内容包含大量文字，字体大小应根据段落长度和行间距来选择，通常在14px-16px之间。

3. 按钮字体大小：按钮通常是APP中的操作入口，字体大小要足够大，确保用户容易点击，一般在14px-18px之间。

三、字体颜色1. 特定场景使用特定颜色：在APP设计中，可以根据不同的场景和功能来使用不同的字体颜色，比如警示信息可以使用醒目的红色字体。

2. 易于阅读的对比度：字体颜色和背景色之间应该有足够的对比度，以确保文字清晰可见。

一般来说，文字应该使用深色或纯色字体，背景色应该使用浅色或中性色调。

3. 考虑色盲用户：在选择字体颜色时，应考虑到色盲用户的需求，避免使用红绿颜色组合或其他对色盲用户不友好的颜色。

四、字体间距和行高1. 字体间距要合适：字体之间的间距应该适中，不要过于紧凑或过于松散，以保证字体的可读性和整体视觉效果。

2. 行高要适宜：行高是指文字行与行之间的垂直间距，应根据字体大小和设计需求来选择合适的行高，以保证文字易于阅读。

◆结构变化
◆结构变化
5、装饰性变化
●字体的装饰变化是通过修饰和增加附加纹样，对汉字 的本体或背景进行装饰的一种表现方法。它用装饰手法 来美化文字，加强文字的内涵，更好地突出主题，使字 体效果变得绚丽多彩而富有情趣。字体装饰性设计表现 手法很多，有自身装饰（本体）、环境装饰（背景）、 有连接、折带、重叠、断笔、扭曲、空心、内线等。
连接装饰
●字与字之间通过可塑性较强的 笔画或笔画上的装饰，使之有机 连接贯通，使一组字变成一个整 体。可以把相同部位的笔画一贯 到头，也可以把相邻的字互相连 接使之呈现出或高或低或似外框 的风采，产生均衡与均齐、对比 与统一、充满韵律的美感。
④空心 以线条勾画出
文字的轮廓，而中 间留出空白的一种 字体。
特粗字体的轮 廓线有时会相合或 重叠，宋体的横线 如保持空心形状时 会有太粗的感觉。 因此，横线保持单 线的形状即可。
⑤内线 在文字中留出线条的空隙，常以一线条的粗细、多
使 文字分解的支离破碎，从而影响文字的效果。
一般的说，内线适合于粗的字体。对于细的笔画， 例如宋体在绘写横线时比较困难，需要用其他方式进行 表现。
第四，用文字的大小 合理组合造成外形整 体的节奏变化。
作业
运用字体的外形变化对“design进行设 计”。 要求：4种形式各做2种效果。 工具：手绘
4、结构变化
●为了使字体设计产生 新颖、别致、多样化的 效果，在字体创意设计 时，可以打破标准字 “结构严谨、布白均匀、 重心稳定”的绘写习惯。 可夸大或缩小字的部分 结构，也可以移动字的 笔画，改变字的重心， 在保证可读性的前提下 增、减笔画。总之，这 种结构变化的方法是在 破坏传统字体的基础上 进行的，故字数不宜过 多。