网页设计ui尺寸规范（网页ui的规范）

本文目录一览：

• 1、到底什么是UI设计规范
• 2、UI设计师一定要知道的ICON设计规范之图标尺寸
• 3、UI设计中的切图规范是怎么样的?
• 4、UI设计的规范标准有哪些

到底什么是UI设计规范

1、UI 设计（或称界面设计）是指对软件的人机交互、操作逻辑、界面美观的整体设计，也叫界面设计。UI 设计分为实体 UI 和虚拟UI，互联网说的 UI 设计是虚拟 UI， UI 即User Interface（用户界面）的简称。UI 设计师的职能大体包括三方面：一是图形设计，软件产品的产品“外形”设计。

2、不以规矩，不能成方圆。社会上的各种规范约束着我们生活的方方面面，促使着我们的生活轨道能够正常运行，一旦失去了这些社会规范，我们的生活可能会变得一团糟，UI设计界也同样如此。UI设计规范是对整个UI设计的要求。

3、图标规范 很多设计师以为UI设计就是设计图标。虽然事实并非如此，但图标的设计在整个UI设计中是比较基础的一个环节。图标与品牌标志一样，在设计时都需要做适当的减法，应该尽量用简约的线条去表达其含义，应该尽量避免出现线条结构过于复杂的设计。

UI设计师一定要知道的ICON设计规范之图标尺寸

1、在页面图标设计中最常见规格有：12×116×124×232×348×48等，这儿的提议是以48px做为基本图标的设计方案规格，由于iOS页面中的网格图尺寸是4的倍数，iPhone标准规定最少点一下总面积为44pt；安卓系统的网格图是8的倍数，最少实际操作商品详情页为48dp。

2、在功能上，icon分为不可点击的显示图标和可点击的按钮图标：显示图标不能点击，是为了辅助后面的文字内容，侧重于文字，一般尺寸为24×228×232×32。为了便于在小尺寸内识别图像，不要在界面上过于醒目，建议使用简单的线性或面性图标。

3、024。这些尺寸不是固定的，在设计中有特殊的尺寸。例如，谷歌在台式电脑上设计图标时，当鼠标和键盘是主要的输入法时，他们使用密集布局，基本网格缩小到20个。

UI设计中的切图规范是怎么样的?

切图资源尺寸必须为双数 切图资源尺寸必须为双数，这是是为了保证切图资源在工程师开发时是高清显示。

二倍图：按750x1334来切 一倍图：在二倍图的基础上压缩成50 iOS启动图：图标按照最大1024x1024来设计，之后按照比例缩小到每个尺寸。提交没有高光和阴影的直角方形图即可。

为了提升APP使用速度，尽量降低图片文件大小 为了提升APP使用速度，尽量降低图片文件大小，也就是说，图片切图一般情况下文件大小都是相对较大，不利于用户在使用app过程中加载页面，所以，UI设计师要尽量压低图片文件的大小，毕竟在切图资源输出中图标切图输出是很重要的部分，这一点希望大家能够明白。

切图的宽度。如果是一个通用的背景图，那么他的宽度应该是他在效果图中的最小宽度，也就是说这个背景可能在多处使用到了，就取最小的那个宽度就可以了。比较麻烦的是铺满全屏的时候，这就需要看看你做的效果图的宽屏宽度，所以说做效果图的时候最好是做小屏幕的效果图。

个人认为，从UI设计这个角度看，“UI设计”是一个团队协作的过程，“切图”是一个交付设计稿的过程，UI设计师理应在了解产品细节的前提下完成切图，建立简单沟通设计规范，并了解基础组建的开发成本，有必要的话还需配合调整切图。

UI设计的规范标准有哪些

设计中三大元素，色彩，字体，图形，那么第一步我们在建立一个系统时候，色彩是很重要一部分，我们需要定义好我们整个系统的色彩架构体系，色彩体系一旦建立好，后面我们的设计都将围绕这些色彩进行设计，色彩包括：品牌色、辅助色、字体黑白灰颜色、不可用颜色、超链接颜色、成功或失败颜色等等。

对齐与秩序 轴线在对称元素的布局中尤为明显，如iTunes专辑列表，左侧的专辑整齐排列，围绕着轴线，形成有序的视觉体验。这种对齐原则让人感到舒适，如同生活中的有序带给我们的安稳。

基础规范 基础规范我划分的是组成页面最小的元素、是最基础的一步。基础规范有文字、颜色、布局层级、图形、分割线等。组件规范 组件规范是由两个元素组成，且可点击的控件。组件规范有按钮、导航栏、搜索框、tab栏、列表、表格、筛选器等。

一：遵循一致的准则，确立标准并遵循 无论是控件使用，提示信息措辞，还是颜色、窗口布局风格，遵循统一的标准，做到真正的一致。二：（Color）颜色使用恰当，遵循对比原则 三：（Resource）资源 一个多姿多彩的人机交互界面，少不了精美的鼠标光标、图标以及指示图片、底图等。