1. 首页 >
  2. 资讯公告 >
  3. 北京UI设计培训_用户界面设计中的平面构成

北京UI设计培训_用户界面设计中的平面构成

 May 31, 2019 11:51:43 AM  331人 来源: 火星人

平面构成是具有共性的设计语言,已为当今社会各个艺术、涉及门类所应用,平面构成与其他应用设计的学科一样,都是为了完善与创造更赋予现代感的设计理论和表现形式。平面构成以一个全新的造型观念,给艺术设计注入了新鲜的血液。

统一与变化

在界面的设计中,考虑用户的视觉会长时间的停留在某个页面阅读信息,所以统一的列表形式是非常有必要的,可以减少用户阅读时的障碍,然而长时间单一样式的列表阅读会使用户视觉疲劳,产生厌烦的心里,所以这时就要在列表内穿插不同的模块给统一的列表页面加以变化。就像高速公路的设计为何都不是笔直的,除了地理原因之外,还有部分原因是驾驶者长时间行驶在没有变化的直线容易产生倦意,从而造成危险,这就是统一与变化的必要性所在。统一是主导,变化是从属。统一强化了版面的整体感,多样变化突破了版面的单调、死板。界面中相同元素的风格统一是界面设计的基础统一原则,增强设计效率的同时也会增强开发的效率,而不同表意的板块之间就可以通过不同的版式形式变化,可以让页面充满生命力与运营感。

一两个互联网招聘产品的页面比较为例:

例如上面的左图是拉钩的主页,多样的板块变化让用户首次进入主页时能感觉到产品是“活”的,这里遵循字号,配色,板块间距等的基本统一之外,各不同板块之间的样式又保持绝对的统一。遵循统一规范的同时再进行版式上的变化会让页面视觉上整体而又不会产生“闷”的视觉与心理感受,使产品更具生命力。再如BOSS直聘,单一的职位列表让首页没有了版式的变化,就会容易让用户视觉疲劳,当然从产品角度来讲,交互效率会有象征性的提升,至于如何取舍就要看产品的最终需求了,这里仅从版式进行分析。当然这些是大方向的统一与变化,其实细小的图标的设计同样有这个原理要遵循,在设计同表意的图标时,统一配色、线条粗细、尺寸的前提下,在外形上不受约束的进行变化同样会产生视觉上的美感。

对不与调和

平面设计中的版式对比分为很多种,在界面设计中,对比是为了强调差异突出主题,让页面信息更有主次,而调和是为了寻找共同点,调整页面的舒适感。我们常用整体调和,局部对比的方法。首先是大小对比,往大了说有 板块之间面积的对比,往小了说 有字体之间的字号大小对比。以京东金融的主页来举例说明。

如图所示,京东理财卡部分主要虽文字信息不多,却占据了整个页面的四分之一左右,与下面的板块熊面积上形成大小对比,从而使界面有主次,并且可以主观上通过设计指引用户点击主要板块。从小的板块面积又差不多相等,起到了调和页面的作用。

如果说上面的例子时大板块的对比与调和,那么下面就以知乎的信息列表为例,讲一下界面细节上对比与调和的体现。

如图所示,一个信息卡片的文字使用了三个对比层级,主题字最大,简介文字其次,然后就是话题名称以及评论点赞信息等。通过简单的字号对比就可以让信息层级清晰可见,然后第三层级的文字用在了两个地方,话题名称与底部的评论信息处都用了同样的字体,这就是调和的作用,避免过多的物意义对比使页面层级过多。

对称与平衡

界面设计中的版式对称与平衡是一对统一体,常表现为既对称有均衡,实质上都是求取视觉心理上的静止和稳定感。界面的设计虽然无法主观的控制产品内字段的长度,但设计者可以通过给不同元素合理的存在位置,从而最大程度的让页面对称与平衡。以简书的发现页面来举例说明。


如图所示,整个页面仅从版式来看还是比较均衡的,仔细分析来看,左面的大篇幅文字被右边的图片从版式上“压”住了,使得从用户心理上这个列表左右的重量是相同的。再比如为你推荐模块的人物卡片,上方的头像与下方的按钮也行程了一种视觉重量上的平衡。而下方标题栏处五个图标,中间的红色按钮起到视觉平衡点的作用,两边的四个图标对称显示,所以整个页面显得非常规矩,这就是视觉上版式舒适的原理所在。

节奏与韵律

有始有终的设计才完整

说到节奏与韵律,最基础要注意到的就是要让设计的版面有始有终。有始有终,是一种态度。就算是单个版面,也要给用户明确的视觉发起点和视觉结束点,长图或者多个版面的设计更是如此。优秀的设计者做设计总是首位呼应,这是对用户最基本的尊重。


关键词:北京UI设计培训,北京界面设计,UI界面设计培训