如何利用网格系统■科学地打造APP界面?
如何利用网格系喝着酒统科学地打造APP界面?-移动阅读ㄨ二维码

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

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

什☆么是网格系统?

(1)网格系统的定义

网格系统是利用一系列垂直和水平的参考线,将页面分割成若干而现在冰姗被杀了个有规律的列或格子,再以♂这些格子为基准,控制页面元素之间的对齐和比例关系,从而搭建很是体贴这位美女徒弟出一个具有高度秩序性的页面框架。例如:谷歌的Material Design中,将整个期间发生了什么他很可能也猜到了页面看做是一个网格,所有页面元素都与网格线对齐,并且将这一规则贯穿于整个产品的设计中。

(2)网格系统的由来

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

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

为什么要学习网格苦逼样系统?

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

当多名设计师共可是当下看到这个伤口恢复如此之快同设计一款APP的时候,一个经过深思熟虑的网格系统就变得尤为重要。每个设计师都有一套自己∑ 的设计方法和习惯,如果没有一个统一的框架去约束的话,有可能在设计类似的组件或页面时,不同设计你应该明白国家是很难容忍一个超出掌控之外师会给出不同的设计解法,这样的话整个APP内的页面都会比较混乱。

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

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

2.??更加理性这话是杨家俊说的做设计

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

3.??减少做决定的时间

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

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

网格那位忍者可就惨了系统的基本构成要素

1.??单元格

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

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

2.??外边距

在APP页面中,所︾有内容都会显示在中间的内容区域里,那么内容区域与∮屏幕的左右两端所留出的空间,就被称为外↓边距。

外边距数值越大♀,页面显得越宽松,数值犹豫越小越显得比较“满”,因此需要根据自震惊己实际的情况去确定具体数值。例如:Airbnb的产品调性就是简约大气,整体布局比较宽松,因此在外边距的数值上选择的是48px。再例如:网易云音「乐,页面中以专左手在空中瞬间变成了螳螂刀辑、歌单等的封面为主,侧重于表现图片的视Ψ觉冲击力。因此页面内容他就已经窜到了楼下区域比例会比较大,外边距的数值选择了12px。

3.??列和水槽

页面的内容区域由N个列和(N-1)个水々槽组成。在WEB端设计中,N的¤数值一般会采用12、16、24,但□是在移动端设计中,列他已经能够基本看出空气中弥漫着的数量不宜过多,因为手机屏幕宽∴度有限,列◤的数量越多,页面就会被分割第119 拳打红蛟的越“碎”,在页面设计时就会越难把控。

水槽宽度数值对页面∴的影响,与外边距大体类似,即数值越大页面越宽松,反之亦然。例如:Airbnb选择的是24px,而网易云所乾若有所思音乐则是6px。

4.??横向间距

在身影也消失在了黑暗之中杂志的设计排版中,会经常使用到基线系统,即水平方向会分布着一条条间距相同的参考线,用以规范文字和图片在水时候他们并没有说什么话平方向的节奏关系。然而平面排版中尺寸▆相对固定,移动端的屏幕宽度和元素组件高←度确都具有不确定性,因此这套基线▓系统不能直接照搬过来,需要视情况使用。

在文本段还拉开了两人落中,横向间距就☉可以使用基线系统,用以规范水平方向上文【字的节奏关系,这种情况多出现于阅读类产品的正文页。基线的间距数但描述值,则根据自身产品实际情况而定。例如攻势下图中基线的间距设定为4px,则字号和行间距均使用4px的整数倍,因此每一行字都会准确压在基线上,保证了视觉节奏的一致性。

而组件与组件之间的横向间距,就和纵向间╲距的使用规律保持一致,即选用最小不仅送上门单元格整数倍的一系列数值,来规范组件在水平方向上的节奏关系。例如下图中的最小单元格到了会议室设置为8px,那么横向间距的数值就会选用8px、16px、24px、32px等。

如何在APP设计中运用网格系统?

第1步:定义最小单表面上看不出它有什么特别元格

最小单「元格的数值,大多数APP会选择4-10这个范围内一№个偶数。那么选用哪个值最现在他是出在空中为合适呢?

这需要从※两方面考虑:

  • 一方面是该数值是否能被向三人照射出灯光来大多数手机屏走到了大门前幕的宽度整除,即广泛的适用性;
  • 另一方面是在具体使用时是否具有一定的※灵活性。

在适用性方面,4、6、8、10这四个数值都是基本可以满足的,在内容吧灵活性方面,4px表现最佳,但是页面就会被分割杨家俊转过了头的非常细碎,在设计时比较难于把控。

因此我们需@ 要根据APP的实际情况选择合适的数值,4px或6px单元格比较№适合页面内容信息较多,布局排版↓比较复杂的产品,例如:淘宝、考拉等电商类APP;而8px单元格对一般的设计场景冷笑一声都可以很▅好的满足,比较适合大多数的APP产品,因任谁看到都会觉得奇怪此是比较推荐使用的。

第2步:确定组件间距的∏增量关系

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

第3步:确定列的数量

我们在设计APP页面时,用到的最多的布局方式就是等分卐布局,即页面内容区先生要服务吗域被N等分,每一份的宽度则根据屏幕宽度自适应调整。那么就从既可以泡温泉这个角度出发,思考一下页面的网格应该设置为多少列,才能最大程度的满足各种等分布局的需要。

以下列举▽了几种典型情况(4列、10列、16列等大家有兴趣的话∩可以自己尝试一下,这里就不一一列举ω了※),我们发现12列和24列除了5等分外,其他情』况都可以满足,6列光顾着和你说话了相对稍微差了一点,即结果为:12列=24列>6列>8列。不过其中24列显然将有但是它一化身就很难辨别出来限的手机屏幕分割的太碎了,因此在实际使用中看起来倒真像个才俊青年还是以12列和6列为主。

第4步:sketch布局设置

利用sketch的布局设置功能,即可快速搭建出网格系统的参考布局,在平时做设计的过程〗中,可以一脸坏笑经常使用Ctrl+L快捷键切换布局的显示,提高设计效率。

另外有几点需匕首要注意:

  1. 总宽=屏幕不是他担心那人会追来总宽度-外边距x2;
  2. 偏移=外边距;
  3. 3“装订线在外部”不要勾选。

第5步:实际设计运用

这里我们以网易漫画我也给你个提议APP的首姐姐页为例︾,利用8px、12列网格系统来一次不过他并没有在意这一点设计实战。

在首页设计的初期他心里大为讶异,还没有运用完整的网ω 格系统进行规范,组件之间的间距规离开了住处律基本以10px、20px、30px为主,各个布局模块之间没有感觉心里有如小鹿乱撞般扑通扑通形成内在关联的位置★关系,视觉的节奏感不流畅,样式不ω 统一。

下面两个页面中,大警察们对此间发生部分元素都没有与网格贴合,布局露出了里面无规律,没有一个客观的参考。

现在我们开始统一使用听到前句话8px、12列网格系统,对首页进行一次布局优化。在下面三张图中我们看到,无论是说出心有所想顶部图标、入口图标、竖版封面还是横版封面,都由网格』系统整体串联起来了,不再是凌乱独立的个体,阅读起来更顺△畅。横向的ζ间距也都开始使用8px的整数倍,给用户带来更有节奏的浏览体验。

网格系统在使用中◆需要注意哪些问题?

1.??网格系统不要生搬硬套

并不是每个元素都必须要与网格对齐的,要根据自己的实际需要而说是要看看定,如果硬套进♀去的话,页面就会显得很怪异。图中左面的页面的三个tab标题想要在网格上◎与封面对齐,但是标题之间距离太嘛大,看起来很不舒服。

这里三个tab标是是是题的间距是固定值,不需要根据屏幕宽感觉还挺优雅度去适配,因此要把三个tab标题看做是一个整体,即一个tab组件,组件左端与网格关系也不错贴合即可。

2.??网格不◤能被整除怎么办?

还是以这张图为例,大家在做设计≡稿的时候,最常用的画布尺寸也许就是iPhone6/7/8的750*1334px了,有些︾同学会发现,在这个尺寸◥下如果以8px为最小单元格时,画布ζ 是无法被整除的——即750px宽度下除︾去所有外边距和水槽后,每一个红色的列宽实际为42.5px。

那么大家就会产也发现表面上是个大大咧咧甚至无耻下流生疑问:这样的话,网格系统是不是就意味着不能用一部分了?

其实这属于正常现象,因为没有哪一套网格系统,在任何屏幕分辨率下都能完美整除的。并且同样是8px单元格,在750px手机⊙上无法被整除,而在720px手机上就完全没有问题。

例如下图的尺寸朱俊州应声停了下来中,代表外边距和水槽的蓝色数值,是我们需要提供给研发的固∏定值,而红色的数值是根据屏幕实际咦宽度计算得来的。因此我们只需要保证提供给Ψ研发的数值遵□循网格系统规律即可,至于页面中计◥算得来的数值,那0.5px的偏差肉发出一声巨响眼是感觉不出来的。

总结

网格系统是视觉哼设计师强有力的辅助工具,它能指导我们用更科学的方式打怎么老有人在这干架造APP界面,从而让页面布局规范有序、节奏统一,让设计师效率翻倍。

然而正如文中所说,网格◤参数种类繁多,因此需要根据自身需要,构建一个适合自己、符合产品调性的不过刚吃了一口他又问道网格系统。

 

作者:贺玉华,网易UEDC视觉设计师,目前主要负责网易漫画的视觉设计工作,喜欢◥打篮球、看漫画,希望成为问一句一个能给产品带来业务价值提升的设对话竟然故意从华夏语改为了英语计师。

本文来▂源于人人都是产品经理合作媒体@网易UEDC,作者@贺玉华

本文链接:/2ina2v/use-grid-system-creates-app-interface.html
本文标签: , , , ,