如何利用网格系统科学地打造APP界面?

2018-10-17 - APP界面 APP界面策划 界面设计

在视觉设计师设计一款APP的时候,最先要制定一套完善可行的设计规范,其中会详细定义颜色、文字、图标、结构、布局、间距等要素。但是很多设计师往往会忽视一个重要的东西,那就是网格系统的构建。网格系统可以说是整个页面的骨架,它将页面中所有的设计元素高效有序地组织起来,从而让整个APP的设计具有高度的一致性和规律性,提高设计师工作效率,避免凭感觉做设计。

本文将从网格系统的基本概念介绍出发,逐步探寻构建网格系统的必要性、网格系统的实际运用方法、以及使用网格系统可能遇到的坑。

什么是网格系统?

(1)网格系统的定义

网格系统是利用一系列垂直和水平的参考线,将页面分割成若干个有规律的列或格子,再以这些格子为基准,控制页面元素之间的对齐和比例关系,从而搭建出一个具有高度秩序性的页面框架。例如:谷歌的Material Design中,将整个页面看做是一个网格,所有页面元素都与网格线对齐,并且将这一规则贯穿于整个产品的设计中。

(2)网格系统的由来

早在 20 世纪初,德国、荷兰、瑞士等国的平面设计师们就开始提倡用客观的设计原理进行文字的编排,二战后这种理念在瑞士得到了良好的发展,直到 20 世纪 40 年代后期,第一次出现了使用网格进行辅助设计的印刷作品。由瑞士设计师大师 约瑟夫·米勒-布罗克曼 所著的《平面设计中的网格系统》一书,自 1961 年出版以来畅销至今,对设计界有着深远的影响。

目前,网格系统已经广泛地运用在杂志、平面设计、网页设计、移动端界面设计之中。

为什么要学习网格系统?

1.  提高团队协作设计效率

当多名设计师共同设计一款APP的时候,一个经过深思熟虑的网格系统就变得尤为重要。每个设计师都有一套自己的设计方法和习惯,如果没有一个统一的框架去约束的话,有可能在设计类似的组件或页面时,不同设计师会给出不同的设计解法,这样的话整个APP内的页面都会比较混乱。

例如下图,设计师A和B都各自遵循一套尺寸规范去搭建页面,但是设计结果给人的感觉却完全不一样。

因此,拥有一套统一的网格系统,就能保证设计师们的产出具有高度的一致性、规律性,合作起来更加地高效。

2.  更加理性的做设计

不同于纯感性创作出来的艺术品,UI设计也是需要理性的、客观的、具有数学逻辑美感的。熟练运用网格系统能够让你的设计更有秩序和节奏感,页面信息的展现更加清晰,提高阅读效率,从而提供给用户舒适的使用体验。

3.  减少做决定的时间

作为强迫症高发人群,很多设计师在处理页面细节的时候,经常会为了一个更好的视觉效果反复推敲,甚至为了一个图标到底应该使用20px好还是24px好而发愁,这样十分影响设计效率。即便几个页面的设计都达到了自己满意的视觉效果,也很有可能因为使用了不同的尺寸规则,而让设计缺乏了统一性。

制定完善的网格系统,能让设计师在页面布局和细节处理上更明确、自信、高效,一切设计行为都是有据可循的,减少因为一些细节推敲而造成的不必要的时间成本,拒绝拍脑袋做设计。

网格系统的基本构成要素

1.  单元格

前面我们介绍了网格系统是由水平和垂直的线,将页面划分成一个个细小的正方形格子,那么这个正方形的格子,就是网格系统里面最基本的元素“单元格”,即图中黄颜色的区域。

作为接受过九年义务教育的好青年,想必大家在中学的时候都接触过化学的基础知识,物质的最小单位是原子,原子组成分子,分子组成有机物……我们可以把这个单元格看做是一个原子,那么图标、按钮就是分子,整个页面就是由无数原子组成的有机物。

处处留白,外贸网站转化率反而变高?

外贸网站设计留白时兼顾网页布局均衡,会注意设计元素之间的联系性,并不会一味留白。

APP开发产品策划:消息系统设计有哪些注意之处

APP开发产品而言,消息系统都是一个必不可少的功能模块,其核心目的是让产品直接与用户产生交互

移动端网站设计:图文和按钮的布局方法

今天给大家一起学习移动端网站UI设计过程中的视觉布局方法,只有合适的布局没有对错的布局。...