UI设计规范及动态海报

Posted by 若曳 on 2021-12-02

UI设计规范及动态海报

很多初学者在开始做移动端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设计规范,动态海报介绍到此为止,具体学习还得多看多操作,先从临摹开始,多学学别人的作品,鉴赏优秀作品,提高自己的审美能力,规范自己的设计,只有这样,自己的水平才能不断的提高。