APP应用界面构图如何做?

发布时间:2020-01-17 09:37 | 浏览人次:浏览次数

网页的构图文章解析的特别多,页面排版的也是随手能找到。而APP界面设计的构图却少得可怜,但是这才是UI设计中的痛,UI设计师们日常工作中必须直面的任务,这篇文章像是实时雨出现,带给大家雨露。超级详尽的各种界面的构图举例解析。
APP应用界面构图如何做?

“人家设计得真好!”但是好在什么地方呢,却说不上来。这是阻拦你变成出色设计师的一大阻碍。设计是我们的本行,不会用设计语言来解构画面,是说然而去的。

移动互联网设计发展到今天,有许多传统的设计规律能够遵照,也提出了新的挑战。因为手持设备屏幕较小,怎样在有限的页面内展现或指导高效信息,又不显得凌乱臃肿,考验着设计师的能力。

为什么有的主题或app应用界面就那么舒服,那么清新,那么有情怀?里面蕴藏着哪些更基本的版式设计理念,让我们一块整理整理,给刚入UI设计的同学做个借鉴。

今天和大家讲讲构图。

构图版式三板斧

问题一:为什么要讲版式设计?有必要么?

就以我初入行UI设计失败经历为鉴吧,那同时,一拿到需要就立马开始设计,根本就不管什么版式,结果设计出来方案总是很别扭,显得尤其乱,往往被扣上“风格不统一”“用户体验差”的帽子。更开始我也是说服不了自己,觉得其他人不领会自己的作品。目前想想的确当时存有问题。UI设计必定分不开设计师的天马行空,可是它毕竟是要面向大众市场,做成全世界只有自己能领会的孤品有什么意义呢,UI里的“用户体验”又体目前什么地方呢?而这样的设计又反过来障碍了你的设计生涯,长时间的失败设计极容易带来挫折感和麻木感。

特别是作为刚入行的UI设计师,更有必要学习一些版式设计思路。所谓创新,也依然需求在了解已有的好设计基本之上进行,这里说这些不是让你生搬硬套,是让你站在前人的肩膀上看得更远。

问题二:为什么刚开始就要构图呢?

设计和绘画相同,对需要和内容进行探讨,选用得当的构图能够由繁化简,提高设计效率。在尝试比较多种构图后,设计师的思路会更为确定。期间消耗的时间成本更低,能够频繁进行调整,直到找到更加适合的构图方法再往下进行细分,增添元素,丰富画面。

1个项目给设计师的时间是有限的,我们核心关键在于搞清晰产品的功能核心和卖点,把它们突显出来,更终让会员获取更加舒服的体验。而凌乱无章的堆砌会显得非常的糟糕,甚至有同时,会员会因为找不着自己想要的东西而立马流失,留下非常不好的印象。通过早期构图,能够节约时间,让设计更有条理。

问题三:构图,会限制设计的创造力吗?

不会的。设计的痛苦莫太过“没有思路”和“芒无边际”,这二者都源自需要探讨不够,时候也与事先没有做好构图工作相关。构图为设计提供了确定的尝试方向,甚至通过不一样的构图能够产生的交互效应,满足出乎意料的成效。限制创造力的问题不要害怕,因为构图只是1个框架,同种类的构图彻底能够做出不一致的风格。尽管设计构图结构一样,但设计的表现方法和元素不一样,依然可以塑造出不一样的设计赶脚。灵活利用构图和布局更能让你把设计聚集在元素和产品特色上。

废话不多说,下面我将和大家讲述以下几种在界面中常用的构图形式:

九宫格构图,圆心点放射形构图,三角形构图,SF字形构图。

1.九宫格网格构图

这种版式重要利用在分类为主的一级页面,起到功能分类的作用。

通常在界面设计中,我们会运用网格在界面进行布局,依据水平方向和垂直方向区分所构成的辅助线,设计会进行得非常顺利。在界面设计中,九宫格这种种类的构图更加规范和常用,会员在采取历程中非常的便利,软件功能会显得格外确实定和突出。

九宫格给会员了如指掌的感觉,操作快捷是这种构图方法更主要的优点。

九宫格看似简单随便,用好了同样能展现出奇妙的成效。

灵活利用九宫格辅助线划分出来的方块。在有规律的设计形式中找打破,做设计肯定要侧重这一点!

在九个方块分配的同时,不肯定要1个格子对应1个内容,彻底能够一对二,一对多,突破平均分割的框框,增多留白,调整页面节奏,或突出功能点或广告。各个方块的不一样组成方法,页面的成效也会产生无数的变化。

我们能够看出这样的版式,同样能够使界面变得非常的灵活,内容简单,信息明了。

2.圆心点放射形构图

生活中,更加常见的就是圆形了,眼睛是圆的,太阳是圆的,碗也是圆的,天也是圆的。在界面设计中圆的利用可以说是点睛之笔。

圆是有圆心的,在界面中,往往通过构造1个大圆来起到聚合、突显作用。

放射形的构图,有突显位于之间内容或功能点的作用。在强调核心功能点的同时,能够试着将功能以圆形的范式排布到之间,以当前重要功能点为中心,将其他的按钮或内容放射编排起来。

我们将重要的功能设立在版式的中位置,就能指导会员的视野集中在想要突出的功能点上,就算视野本来不在之间的位置,也可以指导会员再度回到中心的集中处。

在界面设计中,圆形的利用能使界面显得格外生动,多数可操作的按钮上或交互动画中都能见到圆形的身影。

因为圆形具备灵动、活跃、有意思、可爱、多变的特质。在界面设计中善于将圆形的设计与动画结合,能让整个应用鲜活起来。

如再加上旋转围绕的动画,会让整个应用鲜活起来。界面中的圆形能聚集会员的视野,指导点击操作,突出重要的功能点或数据,把产品核心呈现出来。

圆心点放射形的设计,会使应用感觉更加智能化,包容万象。

假如要体现的功能点十分简单,只有几个功能按钮的同时,可尝试这种大圆的展示设计,突出更主要的功能,然后罗列并排出其他的功能点。这种方法非常实用,就和画关键相同,圈出更主要的数据。善于利用大圆构图,能撑起整个画面,让界面圆润而饱和。

3.三角形构图

这类的构图方法重要利用在文字与图标的版式中,能让界面维持平衡稳定。从上到下式的三角形构图,能把信息层次罗列得更加规整和确定。

在界面中三角形构图大多数全是图在上,字在下,阅读更加舒服,相关键有描述。

Gogobot登陆页在设计中将logo作为了图形的部分,输入框就是产品的核心描述

个人信息页比较常用三角形构图。头像确定了这个页面的内容,而下面的粉丝、喜爱等数据就是对本人的1个描述和讲述。 

当时在设计儿童卫士宝贝信息设立页时利用到了三角构图与圆形构图的结合。将体重刻度做成可滑动操作的方法,而卡通形象来突出设立的对象及这个页面的功能。

4.视野在界面中的构图法则(SF字形构图)

在设计实践中,怎样指导读者视野,对加强用户体验有主要作用。好的构图视野法则,可以获取非常舒服的阅读体验。而凌乱无章的构图,往往让会员厌烦。

在进行界面设计的同时,对会员的视觉移动方向的预设是非常主要的。在界面中参与更加通畅的构图设计指导会员视野移动的元素,就能使会员更多的观察到产品的核心和产品的卖点。 

视野流动的轨迹多则是从上到下从左至右移动,假如不能围绕这样的视野轨迹进行排版,会员在阅读的同时会变得很吃力,找不着关键,使会员产生抵触。所以在界面设计中格外需求留意这个地方。目前界面普遍是上下滑动的,做好视野指导,能够大大减小会员的负担和阅读疲劳。

界面中更基本的是S形视野构图

在界面中怎么利用S形视野构图呢?

S形视野大家都懂,重点是怎样利用好S形视野来抓住会员眼球。

首先我们看一下视野的轨迹,在视野转角处视觉轨迹更加密集,浏览更加聚集在变换的地方,视野转折的地方停留时间更长。所以我们应该把主要的想要突出的产品或功能摆在这块,这样更容易让会员记住产品的卖点。

苹果官方网站便选用了S形视野构图,指导阅读,大家能够从苹果官方网站好好体会一下。每个模块的图形进行交叉,能够起到协助折回视野的作用。产品图更多的让会员去记忆,设计指导消费!

另外,为了协助视野的移动方向,图片的处理也非常的讲究。

在iPod touch 的讲述中,第一张图片开展的成效用到了三角形构图,强化了指导视野轨迹的指示性。时候多张图片依靠手机排列方向指导到视野轨迹,非常好地实现了图片—文字—图片中间变换,将会员带入到整个产品画面中。

第一屏手机开展方向与视野维持一致

为了使会员阅读更有推动性,在图片层级和空间上,我们也需求侧重会员的视野成效,将焦点调整到合理的视野位置上,产品正面方向对准视野的来源点。通过这些调整不仅能使阅读通畅,更增强了界面的平衡性。

相较于左右构图,S形构图在上下滚动页面上优点非常显著。左右构图极容易给人疲劳感,而S形则将图片和文字完美结合在一起,配以大批的留白,正如山间的溪流,给人轻快流畅的感觉。

下图界面中,设计师非常好的利用到S视野形构图,加强了交叉感和灵动性。人物的信息上下交叉布局,头像则变成视野的拐点,使这种双列模式的排版更加有节奏。而具体到每一部分,头像与内容选用了三角形构图,内容描述段落用到了文本居中式,画面稳定、和谐。

在指导页中也会常常利用到S形的构图。图文进行交叉布局,这样的构图层级感分明,动感十足!

由图文版式布局,我们还能够演化出F字形构图,这种种类的构图大多数利用在图文左右匹配图和banner中,采取F形构图能让图文匹配更有张力,更大气,产品信息更加简单和确定。

在F形构图的规律中,主图为F的主干,右侧两行(或两部分)文字为辅,要留意合理调配图片和文字的比重。 

F形构图在banner中采取,能将标题更加突出,主题更为吸引视野。

值得留意的是,要充分运用主图的画面的指向性。例如,主图是人物,可将文字摆放于其眼神、朝向、手势等对应的方向,增强视野指导。假如是产品图,则能够通过产品的朝向来指导。这样做,会员能更迅速的关注到文本信息,增强认知度和选购度。

小结:这一课没有什么实战技能,更多的是指导大家学会欣赏,学会用基础的设计原理来描述自己看见的作品,而不是简单扔下一句“人家设计得真好”就完了,要明白其中道理,并努力为自己所用。构图先说到这里,当然版式不但仅指构图,还有许多东西可讲,偶尔间我再梳理给大家。

做设计要培育职业敏感,习惯用设计语言解构看见的画面。

上述内容就是小编今天为您带来的关于《APP应用界面构图如何做?》的全部内容,希望能对您有所帮助,我们是一家成立于北京的IT外包公司,如果您有app软件或者微信小程序需要定制开发,不妨联系我们。
免责声明:本站部分文章转载自网络,不代表本站的观点和立场,不以盈利为目的。如有侵犯公司或个人权益,本站会第一时间删除文章。我们是一家北京app开发公司,欢迎咨询免费获取思维导图!

本文地址:https://appbj.cn/article/3149/

网友热评

暂无更多评论
思捷智联

思捷智联是一家2009年成立于北京的IT外包公司,我们致力于为企业提供app软件开发和微信小程序开发服务。公司成立10年来,我们为民政部、方正电子、神州数码、联想控股、壹基金、首钢集团、北京大学、北京师范大学、今麦郎、丰汇租赁、万通控股等上百家企业提供了IT外包服务。我们努力实现每一位客户的托付,为客户创造实在的效益,让您与梦想走得更近。

微信咨询

扫描微信二维码
同市场经理沟通需求

我们积累了丰富的移动互联网开发和运营经验,在开发中为客户提供更多帮助!
咨询热线:18612209195