手机app界面制作设计规范

app界面设计规范，这里的界面设计不是说视觉效果上的美化设计，而是一些如尺寸、间距、布局、比例、适配性方面的设计规范。虽然乍看都是小细节的东西，但作为一个合格的UI设计师，就是要在纠结每个像素单位的过程中练成像素眼来打造出一个合格的界面产品，差一点也许一般人分辨不出来，但一定会不同程度影响到一款产品的设计专业度，进而影响用户体验。下面是规范部分内容：

一、边距和间距

在移动端页面的设计中，页面中元素的边距和间距的设计规范是非常重要的，一个页面是否美观、简洁、是否通透和边距间距的设计规范紧密相连，所以说我们有必要对它们进行了解。

1、全局边距

全局边距是指页面内容到屏幕边缘的距离，整个应用的界面都应该以此来进行规范，以达到页面整体视觉效果的统一。全局边距的设置可以更好的引导用户竖向向下阅读。在实际应用中应该根据不同的产品气质采用不同的边距，让边距成为界面的一种设计语言，常用的全局边距有32px、30px、24px、20px等等，有一个特点就是数值全是偶数。通常左右边距最小为20px，这样的距离可以展示更多的内容，不建议比20还小，否则就会使界面内容过于拥挤，给用户的浏览带来视觉负担。30px是非常舒服的距离，是绝大多数应用的首选边距。

2、卡片间距

在移动端页面设计中卡片式布局是非常常见的布局方式，至于卡片和卡片之间的距离的设置需要根据界面的风格以及卡片承载信息的多少来界定，通常最小不低于16px，使用最多的间距是20px、24px、30px、40px，当然间距也不宜过大，过大的间距会使界面变得松散，间距的颜色设置可以与分割线一致，也可以更浅一些。

3、内容间距

一款APP除了各种栏（状态栏、导航栏、标签栏、工具栏）和控件icon就是内容了，内容的布局形式多种多样，这里不去探讨内容具体应该如何去布局，我们来说一说内容的间距设置问题。

格式塔原则中的一个重要的原则就是邻近性，格式塔邻近性原则认为：单个元素之间的相对距离会影响我们感知它是否以及如何组织在一起，，互相靠近的元素看起来属于一组，而那些距离较远的则自动划分组外，距离近的关系紧密。

二、内容布局

在APP的设计中内容的布局形式多种多样，这里介绍最常用的两种布局形式，列表式布局和卡片式布局。

1、列表式布局

列表式布局方式非常普遍，随便打开一个APP，基本都存在这种布局方式，其布局形式的特点在于能够在较小的屏幕中显示多条信息，用户通过上下滑动的手势能获得大量的信息反馈。而列表也是一种非常容易理解的展示形式。

以我们最常用的微信和QQ为例，其“信息”页面都是采用的列表式布局，在采用这种布局形式的时候要注意列表舒适体验的最小高度是80px，最大的高度要视内容的多少而定。

2、卡片式布局

形式非常灵活。其特点在于，每张卡片的内容和形式都可以相互独立，互不干扰，所以可以在同一个页面中出现不同的卡片承载不同的内容。而由于每张卡片都是独立存在的，其信息量可以相对列表更加丰富。

三、界面图片设计比例

在UI设计中，对于图片的尺寸和比例没有严格的规范，设计师往往凭借经验和感觉设置一个看起来不错的尺寸，但事实上我们是有章可循的。运用科学的手段设置图片的尺寸，可以获得最优的方案，常见的图片尺寸有16:9、4:3、3:2、1:1和1:0.618（黄金比例）等。这些比例不无根据，它们都和图片尺寸有关。16:9 是根据人体工程学的研究，发现人的两只眼睛的视野范围是一个长宽比例为16:9的长方形，4:3 是勾三股四弦五，在摄影中非常常见……

四、APP版式设计规范

1、对齐

对齐是贯穿版式设计的最基础，最重要的原则之一，它能建立起一种整齐划一的外观，带给用户有序一致的浏览体验。

2、对称

对称是宇宙间的设计哲学，是对立统一规律的本质属性，呈现出一种和谐自然的美，在应用界面的设计中，引导页设计、注册登录输入框和按钮等无一不是对称的设计。

3、分组

物以类聚，人以群分。分组是将同类别的信息组合在一起，直观的呈现在用户的面前，这样的设计能够减少用户的认知负担，在移动端界面的设计中最常见的分组方式就是卡片，为用户选择提供专注而又明确的浏览体验。

在这里要推荐一款一站式免费在线设计工具-千语创想，让你一个人轻松搞定「需求+产品+UI」所有设计工作；只需简单勾选、无需专业技能、低门槛使用，最重要的是免费使用。

快速创建思维导图，高效完成需求梳理

千语创想通过简单勾选就可以快速完成应用程序功能梳理, 用标准化、流程化的方式构建产品需求，基于庞大的产品模型库直接勾选功能，快速创建专业思维导图，从而生成数字化需求文件，聚焦核心业务分析。同时支持自定义添加页面功能，分析并梳理定制化需求，助力更多个性化、业务化、专属化的想法执行落地。整个过程一气呵成，行云流水。

预置丰富原型素材库，拿来就用

千语创想涵盖10大细分行业的产品设计模板，1000+通用功能库，只需简单勾选既可自动生成完整的业务需求表，帮助用户智能化搭建产品原型，减少了大量重复性工作，有效提升30%-60% IT项目效率，实现创意到产品的快速落地。

植入Sketch插件，方便二次定制设计

快速交互，多样批注，团队管理，可基于高保真原型自动生成一对一的UI设计源文件，并实现一键导入，为前端工程师实现自动切图标注功能，提高产设研开发团队的整体效率。