若何操纵网格体系科学地制造APP界面

文章分类:设计前沿 发布时间:2018-10-30 原文作者:dede58.com 阅读( )

  在视觉设想师设想一款APP的时候,最先要制定一套完美可行的设想规范,此中会细致定义颜色、文字、图标、布局、结构、间距等要素。可是良多设想师往往会轻忽一个主要的工具,那就是网格系统的建立。网格系统能够说是整个页面的骨架,它将页面中所有的设想元素高效有序地组织起来,从而让整个APP的设想具有高度的分歧性和纪律性,秒速赛车开奖直播提高设想师工作效率,避免凭感受做设想。

  本文将从网格系统的根基概念引见出发,逐渐探索建立网格系统的需要性、网格系统的现实使用方式、以及利用网格系统可能碰到的坑。

  网格系统是操纵一系列垂直和程度的参考线,将页面朋分成若干个有纪律的列或格子,再以这些格子为基准,节制页面元素之间的对齐和比例关系,从而搭建出一个具有高度次序性的页面框架。例如谷歌的Material Design中,将整个页面看做是一个网格,所有页面元素都与网格线对齐,而且将这一法则贯穿于整个产物的设想中。

  早在20世纪初,秒速赛车德国、荷兰、瑞士等国的平面设想师们就起头倡导用客观的设想道理进行文字的编排,二战后这种理念在瑞士获得了优良的成长,直到20世纪40年代后期,第一次呈现了利用网格进行辅助设想的印刷作品。由瑞士设想师大师 约瑟夫·米勒-布罗克曼 所著的《平面设想中的网格系统》一书,自1961年出书以来畅销至今,对设想界有着深远的影响。目前,网格系统曾经普遍地使用在杂志、平面设想、网页设想、挪动端界面设想之中。

  当多名设想师配合设想一款APP的时候,一个颠末深图远虑的网格系统就变得尤为主要。每个设想师都有一套本人的设想方式和习惯,若是没有一个同一的框架去束缚的话,有可能在设想雷同的组件或页面时,分歧设想师会给出分歧的设想解法,如许的话整个APP内的页面城市比力紊乱。例如下图,设想师A和B都各自遵照一套尺寸规范去搭建页面,可是设想成果给人的感受却完全纷歧样。

  因而,具有一套同一的网格系统,就能包管设想师们的产出具有高度的分歧性、纪律性,合作起来愈加地高效。

  分歧于纯感性创作出来的艺术品,UI设想也是需要理性的、客观的、具无数学逻辑美感的。熟练使用网格系统可以或许让你的设想更有次序和节拍感,页面消息的展示愈加清晰,提高阅读效率,从而供给给用户舒服的利用体验。

  作为强迫症高发人群,良多设想师在处置页面细节的时候,经常会为了一个更好的视觉结果频频推敲,以至为了一个图标到底该当利用20px好仍是24px好而忧愁,如许十分影响设想效率。即便几个页面的设想都达到了本人对劲的视觉结果,也很有可能由于利用了分歧的尺寸法则,而让设想缺乏了同一性。

  制定完美的网格系统,能让设想师在页面结构和细节处置上更明白、自傲、高效,一切设想行为都是有据可循的,削减由于一些细节推敲而形成的不需要的时间成本,拒绝拍脑袋做设想。

  前面我们引见了网格系统是由程度和垂直的线,将页面划分成一个个藐小的正方形格子,那么这个正方形的格子,就是网格系统里面最根基的元素“单位格”,即图中黄颜色的区域。作为接管过九年权利教育的好青年,想必大师在中学的时候都接触过化学的根本学问,物质的最小单元是原子,原子构成分子,分子构成无机物……我们能够把这个单位格看做是一个原子,那么图标、按钮就是分子,整个页面就是由无数原子构成的无机物。

  在APP页面中,所有内容城市显示在两头的内容区域里,那么内容区域与屏幕的摆布两头所留出的空间,就被称为外边距。

  外边距数值越大,页面显得越宽松,数值越小越显得比力“满”,因而需要按照本人现实的环境去确定具体数值。例如Airbnb的产物调性就是简约大气,全体结构比力宽松,因而在外边距的数值上选择的是48px。再例如网易云音乐,页面中以专辑、歌单等的封面为主,偏重于表示图片的视觉冲击力,因而页面内容区域比例会比力大,外边距的数值选择了12px。

  页面的内容区域由N个列和(N-1)个水槽构成。在WEB端设想中,N的数值一般会采用12、16、24,可是在挪动端设想中,列的数量不宜过多,由于手机屏幕宽度无限,列的数量越多,页面就会被朋分的越“碎”,在页面设想时就会越难把控。

  水槽宽度数值对页面的影响,与外边距大体雷同,即数值越大页面越宽松,反之亦然。例如Airbnb选择的是24px,而网易云音乐则是6px。

  在杂志的设想排版中,会经常利用到基线系统,即程度标的目的会分布着一条条间距不异的参考线,用以规范文字和图片在程度标的目的的节拍关系。然而平面排版中尺寸相对固定,挪动端的屏幕宽度和元素组件高度确都具有不确定性,因而这套基线系统不克不及间接照搬过来,需要视环境利用。

  在文本段落中,横向间距就能够利用基线系统,用以规范程度标的目的上文字的节拍关系,这种环境多呈现于阅读类产物的注释页。基线的间距数值,则按照本身产物现实环境而定。例如下图中基线px,则字号和行间距均利用4px的整数倍,因而每一行字城市精确压在基线上,包管了视觉节拍的分歧性。

  而组件与组件之间的横向间距,就和纵向间距的利用纪律连结分歧,即选用最小单位格整数倍的一系列数值,来规范组件在程度标的目的上的节拍关系。例如下图中的最小单位格设置为8px,那么横向间距的数值就会选用8px、16px、24px、32px等。

  最小单位格的数值,大大都APP会选择4-10这个范畴内一个偶数。那么选用哪个值最为合适呢?这需要从两方面考虑,一方面是该数值能否能被大大都手机屏幕的宽度整除,即普遍的合用性,另一方面是在具体利用时能否具有必然的矫捷性。在合用性方面,4、6、8、10这四个数值都是根基能够满足的,在矫捷性方面,4px表示最佳,可是页面就会被朋分的很是细碎,在设想时比力难于把控。

  因而我们需要按照APP的现实环境选择合适的数值,4px或6px单位格比力适合页面内容消息较多,结构排版比力复杂的产物,例如淘宝、考拉等电商类APP;而8px单位格对一般的设想场景都能够很好的满足,比力适合大大都的APP产物,因而是比力保举利用的。

  既然确定了最小单位格的数值,那么页面里所有的间距(包罗水槽、外边距、横向间距等)、组件尺寸等都需如果最小单元的整数倍,以达到同一视觉节拍的目标。例如单位格选择为8px,那么所有用到的间距尺寸将会是8px、16px、24px、32px、40px……

  我们在设想APP页面时,用到的最多的结构体例就是等分结构,即页面内容区域被N等分,每一份的宽度则按照屏幕宽度自顺应调整。那么就从这个角度出发,思虑一下页面的网格该当设置为几多列,才能最大程度的满足各类等分结构的需要。

  以下列举了几种典型环境(4列、10列、16列等大师有乐趣的话能够本人测验考试一下,这里就不逐个列举了),我们发觉12列和24列除了5等额外,其他环境都能够满足,6列相对稍微差了一点,即成果为:12列=24列6列8列。不外此中24列明显将无限的手机屏幕朋分的太碎了,因而在现实利用中仍是以12列和6列为主。

  操纵sketch的结构设置功能,即可快速搭建出网格系统的参考结构,在日常平凡做设想的过程中,能够经常利用Ctrl+L快速键切换结构的显示,提高设想效率。(别的有几点需要留意:1、总宽=屏幕总宽度-外边距x2;2、偏移=外边距;3、“装订线在外部”不要勾选。)

  这里我们以网易漫画APP的首页为例,操纵8px、12列网格系统来一次设想实战。

  在首页设想的初期,还没有使用完整的网格系统进行规范,组件之间的间距纪律根基以10px、20px、30px为主,各个结构模块之间没无形成内在联系关系的位置关系,视觉的节拍感不流利,样式分歧一。下面两个页面中,大部门元素都没有与网格贴合,结构无纪律,没有一个客观的参考。

  此刻我们起头同一利用8px、12列网格系统,对首页进行一次结构优化。鄙人面三张图中我们看到,无论是顶部图标、入口图标、竖版封面仍是横版封面,都由网格系统全体串联起来了,不再是凌乱独立的个别,阅读起来更顺畅。横向的间距也都起头利用8px的整数倍,给用户带来更有节拍的浏览体验。

  并不是每个元素都必必要与网格对齐的,app设计要按照本人的现实需要而定,若是硬套进去的话,页面就会显得很奇异。图中左面的页面的三个tab题目想要在网格上与封面临齐,可是题目之间距离太大,看起来很不恬逸。这里三个tab题目的间距是固定值,不需要按照屏幕宽度去适配,因而要把三个tab题目看做是一个全体,即一个tab组件,组件左端与网格贴合即可。

  仍是以这张图为例,大师在做设想稿的时候,最常用的画布尺寸也许就是iPhone6/7/8的750*1334px了,有些同窗会发觉,在这个尺寸下若是以8px为最小单位格时,画布是无法被整除的,即750px宽度下除去所有外边距和水槽后,每一个红色的列宽现实为42.5px。那么大师就会发生疑问:如许的话,网格系统是不是就意味着不克不及用了?

  其实这属于一般现象,由于没有哪一套网格系统,在任何屏幕分辩率下都能完满整除的。而且同样是8px单位格,在750px手机上无法被整除,而在720px手机上就完全没有问题。

  例如下图的尺寸中,代表外边距和水槽的蓝色数值,是我们需要供给给研发的固定值,而红色的数值是按照屏幕现实宽度计较得来的。因而我们只需要包管供给给研发的数值遵照网格系统纪律即可,至于页面入彀算得来的数值,那0.5px的误差肉眼是感受不出来的。

  网格系统是视觉设想师强无力的辅助东西,它能指点我们用更科学的体例制造APP界面,从而让页面结构规范有序、节拍同一,让设想师效率翻倍。然而正如文中所说,网格参数品种繁多,因而需要按照本身需要,建立一个适合本人、合适产物调性的网格系统。