知识点4.4 移动产品中界面的布局规范.pdfVIP

INTERFACE DESIGN 交互式界面设计 知识点4.4 移动产品中界面的布局规范 目录 CONTENTS 01 02 03 PART 01 PART 02 PART 03 概述 布局规范 iPhoneX 布局要点 01 概述 概述 01 可点击对象的区域，尺寸不要小于44*44px 02 将重要的内容和功能放在权重高的位置，将重要元素放在前半屏 比较好，对于阅读习惯从左到右的用户来说，更贴近屏幕左侧位 置容易引起关注。 03 利用视觉表现形式的权重和平衡，尺寸较大的元素具有更高的权 重，对于尺寸较小的元素来说，更能吸引目光，看上去更加重要。 02 布局规范 框架 首先，说一下应用程序的一 般框架，顶部导航栏、顶部标签栏、 内容区和底部标签栏四部分组成了 一个应用程序的主要内容。模块间 距一般为30px （注意关键词： “一般”很多时候都是视情况而定 的），内容区块和两边的边距为 20px。 顶部导航栏 导航栏的色彩一般为APP的主色，反白处理文字。如果主色较重，为 了方便长时间使用且不过度刺激眼睛，一般会选择灰白这种中间色。导航 栏左右两侧可使用图标，也可使用文字。顶部导航栏区域一般为88px。 iPhone导航栏设计 顶部标签栏 顶部标签栏有两种 样式，一种是模仿iOS的 IOS分段器设计 分段器设计 ，另一种是 模仿Android 系统的标 签栏样式。 Android标签样式 03 iPhone X布局要点 iPhone X布局规范 重点说明一下iPhoneX的布局规范:iphonnX的超大尺寸、高分辨率以及它的全面 屏给我们带来了前所未有的沉浸式体验和丰富的内容展现。 （1）屏幕尺寸 iPhone X竖屏时屏幕 宽度与iPhone6、iPhone7 和iPhone8的4.7英寸屏幕 是一样的。iPhoneX 的屏 幕比 4.7 英寸屏幕高出 145pt，所以内容区域的垂 直空间增加了20％。 4.7英寸iPhone与iPhone X对比 （2）布局要点 在为iPhoneX进行设计时，你需要确保布局 充满整个屏幕，但是不要被设备的圆角、传感器以 及进入主屏幕的指示器遮挡。 很多app使用标准的、系统提供的UI元素，例 如导航栏、表单和图集，它们可以自适应设备的新 形式。背景素材延伸到了显示屏的边缘，UI元素也 要在合适的地方放置。对于一些自定义布局的app ， 大部分使用系统提供的标准UI元素（如 尤其是用了自动布局并且遵守安全区域以及页边距 导航栏）的APP会自动适应iPhone X （图