文章目录

UI设计规范
- 手机端尺寸规范
- APP布局规范
- 文字规范和切图规范
- 图标设计规范
动态海报
- 动态海报制作及学习教程推荐
总结

很多初学者在开始做移动端UI设计的时候，往往对界面的一些尺寸规范不是十分清楚，很多时候都是凭借自己的感觉和经验去绘制界面，心里并没有一个清晰的概念，导致做出来的页面总是不那么尽如人意。本文整理的一些UI界面的设计规范方便初学者进一步理解界面设计。除此之外，本文还会介绍设计成员中的一员——动态海报的设计。

UI设计规范

手机端尺寸规范

显示屏尺寸	分辨率尺寸	状态栏高度	导航栏高度	标签栏高度
iphoneSE:4英寸	640×1136px	40px	88px	98px
iphone6s/7/8:4.7英寸	750×1334px	40px	88px	98px
iphone6s/7/8plus:5.5英寸	1242×2208px	60px	132px	147px
iphoneX:5.8英寸	1125×2436px	132px	132px	147px

APP布局规范

APP常用边距：32px、30px、24px、20px;
卡片常用边距：20px、24px、30px、40px,不低于16px;
内容列表布局：最小高度80px;
界面图片设计比例：16:9、4:3、3:2、1:1、1:0.618;
图标统一：造型规则、圆角大小（直角矩形，圆角矩形，半圆角矩形）、线条粗细、图形样式、复杂程度、设计语言保持统一；
色彩统一：确定产品需要的色彩数量，确定色相的主色以及辅助色，点缀色，确定字体和各个模块的颜色；

文字规范和切图规范

文字规范
常用字体：华文黑体、谷歌思源、冬青、苹方；
字体颜色和字体粗细：字体颜色设置一般很少用纯黑色，一般用深灰色和浅灰色、细体和粗体（注意要用字体本身的字重，不能用 PS 的加粗功能）通过字重来区分重要信息和次要信息，进行信息层级的划分。
切图规范
切图对象：icon、不规则图形；
搜索栏：标注尺寸，圆角大小，背景值，不透明度；
标注工具：Markman、PXcook；
标注内容：字号大小，颜色，不透明度，各图标及列表之间的间距；
切图的命名规范：1.用英文命名，不要拼音；2.每一部分用下划线分隔；切图可能需要多个属性的英文单词拼凑起来，那么在多个英文单词中间它需要有一个下划线的分隔才能解释清楚整一个切片的命名到底是什么；3.两倍图在名字最后要加@2X，三倍图要加@3X。（在导出的时候它的命名规范是最后要加@2X，这样便于开发分清楚。）

图标设计规范

1.尺寸
应用图标：设计图标时建1024×1024px的尺寸，定稿后输出其他尺寸。
功能图标：以界面的大小为标准，常见尺寸有48×48px、32×32px和24×24px，通常为4的倍数。
2.网格和参考线
应用图标：将设计完成的图形放在图标栅格系统中，根据参考线来调整大小和位置。
功能图标：通常尺寸比较小，需要把画布放大进行设计，可以使用网格和参考线来辅助设计。网格一般在菜单“视图”中开启。
3.图标展示

动态海报

动态海报是动态设计的其中一员，具备动态的同时兼具功能性与视觉创意性。在动态海报中，简单的图形元素结合多变的动态形式就可使设计锦上添花，更加有趣高效地向受众传达信息。动态海报通过元素的的旋转、位移、渐入等变化形式，在二维平面内实现了延伸扩展，在时间的推移下向观众传达更多的信息。

动态海报制作及学习教程推荐

推荐使用的工具：AE
AE 适用范围：适用于从事设计和视频特技的机构，包括电视台、动画制作公司、个人后期制作工作室以及多媒体工作室。目前是十分流行火爆的后期制作软件，许多电影特效，电视广告、片头动画都出自AE合成。
动态海报展示：

除了AE，PS也可以制作动态海报

其基本步骤就是

建立画布
设置独立图层
设置每帧画面
导出GIF（储存为web所有格式，导出gif动态图）

总结

Ui设计规范，动态海报介绍到此为止，具体学习还得多看多操作，先从临摹开始，多学学别人的作品，鉴赏优秀作品，提高自己的审美能力，规范自己的设计，只有这样，自己的水平才能不断的提高。

2021-10-25 UI设计规范及动态海报相关推荐

UI设计规范-全文篇
目录 UI设计规范 1 1. 界面规范 1 1.1. 总体原则 1 1.2. 原则详述 2 1.2.1. 用户控制 2 1.2.2. 清楚一致的设计 2 1.3. 细节约定 3 1.3.1. 界面风 ...
2021.10.25-10.31 AI行业周刊（第69期）：AI进化之路
本周<Opencv基础及AI项目实战>以及<Pytorch模型推理及多任务通用范式>两门课程已经完结. 两门课程中,针对所有完成作业的同学,都颁发了毕业证书. 并且对于完成比较 ...
ui设计移动端字体适配_移动端UI设计规范全方位汇总(附演示PPT下载）
很多新人在开始做移动端UI设计的时候,往往对界面的一些尺寸规范不是十分清楚,对做UI设计的基础概念也没有清晰的认识,很多时候都是凭借自己的感觉和经验去绘制界面,心里并没有一个清晰的概念,导致做出来的页 ...
vue+element 实现试卷答题功能，单选题 ,多选题，判断题，简答题（2.0版本，2021.3.25更新）
vue+element 实现试卷答题功能,单选题 ,多选题,判断题,简答题(2.0版本,2021.3.25更新) 文章目录 vue+element 实现试卷答题功能,单选题 ,多选题,判断题,简答 ...
processing动态代码大全_做一张动态海报需要多少步？
人们习惯性地把程序员跟设计师分成两种不同性质的人,好像程序员就不会有美感,设计师逻辑思维就一定会很弱,但最近几年我们发现越来越多的程序员学设计,设计师学编程的跨界故事. 新媒体艺术家,邱伟豪也是其中一 ...
基于python的科技论文_实地科研 | 上海财经大学 | 金融科技、商业分析、人工智能：机器学习、人工智能及其在金融科技中的应用（2021.1.25开课）...
课题名称 = 机器学习.人工智能及其在金融科技中的应用 = 项目背景随着云时代的到来,机器学习.人工智能.大数据技术具有越来越重要的战略意义,并逐渐渗透到每一个行业和业务职能领域,成为 ...
ios底部栏设计规范_超全面的UI设计规范整理，你值得收藏！
很多新人在开始做移动端UI设计的时候,往往对界面的一些尺寸规范不是十分清楚,很多时候都是凭借自己的感觉和经验去绘制界面,心里并没有一个清晰的概念,导致做出来的页面总是不那么尽如人意. 本文整理汇总了一 ...
Day19-22 2021/10/13-16 JAVA贪吃蛇全注释版
Day19-22 2021/10/13-16 贪吃蛇帧:如果时间足够小就是动画键盘监听定时器 Timer package snale; import javax.swing.*; /*** @ ...
读论文——Pre-Training with Whole Word Masking for Chinese BERT（2021 11.25）
第一遍标题以及作者(2021 11.25) 摘要本文基于BERT,在RoBERTa上进行一系列改进,提出了用于中文的预训练模型MacBERT. 提出了一种新的掩码策略,MLM as correct ...
Diabetes 糖尿病及其并发症.|2021/1/25（未完待续）
目录前言: 正文: ①宏观严重性: ②普遍状况:" 三多一少": ③定义 : ③胰岛素(Insulin,一种激素(harmone)) ④引出糖尿病病理: 1> 1-型糖尿病 ...

2021-10-25 UI设计规范及动态海报