手机App界面设计规范

UI设计


浏览:3470 次

规范。这里的界面设计并不是指视觉效果的美化设计,而是指尺寸、间距、布局、比例和适应性等一些设计规范。虽然乍一看可能看起来像是小细节,但作为一名合格的UI设计师,有必要在与每个像素单元进行斗争的过程中开发一个像素眼,以创建一个合格的界面产品。虽然普通人可能无法区分,但它肯定会在不同程度上影响产品的设计专业知识,从而影响用户体验。以下是本规范的一部分:

1、 边距和间距

在移动页面的设计中,页面边距和元素间距的设计规范非常重要。页面是否美观、简洁、透明与页边距和间距的设计规范密切相关,因此我们有必要了解它们。

1.全球利润

全局边距是指页面内容与屏幕边缘之间的距离。整个App界面应该基于此进行标准化,以实现页面整体视觉效果的统一。全局边距的设置可以更好地引导用户垂直阅读。在实际应用中,应根据不同的产品质量使用不同的边距,使边距成为界面的设计语言。常见的全局边距包括32px、30px、24px、20px等。其中一个特点是值都是偶数。通常,最小的左右边距为20px。此距离可以显示更多内容。不建议小于20。否则,界面内容将过于拥挤,给用户的浏览带来视觉负担。30px是一个非常舒适的距离,也是大多数应用的首选边距。

2.卡片间距

卡片布局是移动终端页面设计中非常常见的布局方法。卡之间的距离应根据界面的样式和卡携带的信息量来定义。通常,最小距离不小于16px,最常用的间距是20px、24px、30px、40px。当然,间距不能太大。间距过大会使接口松动。间距的颜色设置可以与分割线一致,也可以更浅。

3.内容间距

除了各种栏(状态栏、导航栏、选项卡栏、工具栏)和图标控件外,APP就是内容。内容有多种布局形式。在这里,我们将不讨论如何布局内容。让我们来谈谈内容的间距设置。

格式塔原则的一个重要原则是接近。格式塔邻近原则认为:个体元素之间的相对距离将影响我们对它们是否以及如何组织在一起的感知。彼此接近的元素似乎属于一个组,而距离较远的元素则会自动划分到组外。密切的关系是密切的。

2、 内容布局

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

1.列表布局

表格布局非常常见。当你随意打开一个APP时,它基本上就存在了。它的布局特点是可以在一个小屏幕上显示多条信息,用户可以通过上下滑动获得大量信息反馈。该列表也是一种非常容易理解的显示形式。

以最常用的微信和QQ为例。他们的“信息”页面都是表格布局。使用此布局时,应注意列表舒适体验的最小高度为80px,最大高度取决于内容量。

2.卡片布局

形式非常灵活。其特点是每张卡片的内容和形式可以相互独立而不受干扰,因此不同的卡片可以出现在同一页上,以承载不同的内容。由于每张卡都是独立存在的,因此其信息内容可能比列表的信息内容更丰富。

3、 界面图片设计比例

在中国,对图片的大小和比例没有严格的规定。设计师通常根据经验和感觉来设定一个看起来不错的尺寸,但事实上我们有规则可循。通过科学手段设置图片的大小,可以获得最佳方案。常见的图片大小包括16:9、4:3、3:2、1:1和1:0.618(黄金比例)。这些比例基于图片的大小。16: 根据人体工程学研究,发现两只人眼的视野是一个长宽比为16:9的矩形,4:3是一个三股四弦五弦的矩形,这在摄影中很常见

4、 APP格式设计规范

1.对齐

对齐