知识点5.1 如何利用图形划分区域.pdf

INTERFACE DESIGN 交互式界面设计 知识点5.1 如何利用图形划分区域 目录 CONTENTS 01 02 03 PART 01 PART 02 PART 03 引言 网格排版布局 视觉导向布局 01 引言 在界面中，我们能够根据图形的排列来划分区域， 这使我们能够在同一页面上对功能进行分类。这种将 信息模块化的方法确实有效，在有限的界面内进行视 觉元素的罗列与安排。 不美观 美观 测试现场： • 界面元素保持一样 • 一部分取款机得界面布局不够美观 • 另一部分取款机的界面布局及按键进行了规整、美化 日本学者测试 结果使用者普遍认为： 那些排列美观的取款机更好用。可见经过设计美化的界面会给 用户带来好的体验。 利用图形划分区域一般有两种，第一种是网格排版布局，第二种是视 觉导向布局。 网格排版布局 视觉导向布局 02 网格排版布局 视觉设计首先从页面布局开始，页面布局相当于物体的造型，它是视觉 印象的根本。 网格排版布局： 视觉设计 页面布局 物体造型 视觉印象 传统的纸媒：通过划分几何区域来区分不同的版块， 以每一个界面的一致性来强调整体界面的规范化与统一 性，从而更好地展现清晰的空间与组织性。 与传统纸媒中的网格排版不同的是，设计师可以在划分好的网格中安排标题 栏、菜单栏、工具栏以及工作区域等等。 网格排版布局常常用于产品的主页或导航页，例如手机的导航页，无 论是图iOS 平台规则图标排列中的隐形网格，还是图Windows Phone 平台 鲜明的矩形阵列网格都是利用图形进行网格布局设计的。 iphone隐形网格 Windows Phone 矩形阵列网格 界面中的图形分解常常采取等分的形式，等分分解又分为等形分解与等量 分解。 等形分解1 等形分解2 等量分解 等形分解特点：分解后的各单位形状或空间形态相同、面积相同，具 有严谨的分解线，造型整齐，秩序感强 等量分解只要求分解后的各单位面积比例一样，不要求形态相同。 03 视觉导向布局 视觉导向布局是以人的视觉流为主导。此处的视觉流是指人们浏览界面内 容的顺序，这是根据用户视觉扫描页面的时候进行视线跟踪而测得的。 用户的浏览习惯 在进行界面布局时，设计师要充分考虑到用户的浏览习惯，遵循视觉流 规律，将界面中最重要的内容安排在最方便看到的地方。 据科学统计，人们在对一个页面进行浏览时，视线集中区域呈“F”的形 状。这个区域最容易引起用户的注意。 总之，最重要的