当前位置:丝路教程网 > UI设计 > 移动UI >

手机UI视觉设计构图的基本法则

2016-10-27 16:44 来源: 丝路教程网 分类: 移动UI
211 作者:丝路教程网

[导读] 苹果手机的UI 视觉设计构图都是我们值得去学习的好案例。 这节课主要讲解UI视觉设计构图的基本原则。 1、什么是构图? 构图就是有限的画面中,将各种元素进行合理地布局和安排,使

5626f2fa3dfae991b7000001

  苹果手机的UI 视觉设计构图都是我们值得去学习的好案例。

  这节课主要讲解UI视觉设计构图的基本原则。

  1、什么是构图?

  构图就是有限的画面中,将各种元素进行合理地布局和安排,使图形和文字在画面中达到最佳位置,产生最优视觉效果。

  构图是整个画面的骨架,决定了视觉营销界面是否准确的表达主题,吸引用户注意。

  2、构图的四项基本法则—分别为:均衡、对比、律动、视点

  今天跟大家分享的主要从APP引导页设计,APPbanner图设计说起,这四项基本视觉构图法则适合偏平面设计。当然这也是大家学习APP ui设计的基本理论知识。

  当然一个完整的引导页界面包含:主题图、背景渲染图、文字、点缀图以及动画元素组成。

  第一条构图法则:均衡

5626f3073dfae923cb000001

  各元素在布局上保持视觉重量的平衡和匀称,从而使视觉界面具有平衡感和稳定性。堆成是均衡的一种极端情况,平衡感和稳定性很强,适合表现但局限性较大、缺乏变化。

  视觉构图的理论模型图如下:

5626f2fd3dfae9b650000001

  第二条构图法则:对比

5626f2f83dfae97aee000001

  在视觉界面中通过大小对比、字体大小、粗细对比、疏密对比、曲直对比等形式来突出和强化主题,引起用户关注。

  视觉构图的理论模型图如下:

5626f2fb3dfae9ad4f000001

  第三条构图法则:律动

  可以理解为有节奏、规律、跳跃、动感等元素。

5626f3043dfae91bc5000001
5626f3023dfae9110a000001

  起引导用户的视觉轨迹的作用。研究表明,画面右上角最能吸引人的关注,而左下角对人的吸引力最小。律动能给人视觉上富有规律的节奏效果,进而吸引用户了解APP界面内容。

  视觉构图的理论模型图如下:

5626f2ff3dfae9be3c000001

  第四条构图法则:视点

  即 视觉的中心点或者是视觉焦点 跟我们拍照的时候,需要顶一个焦点。也是视觉传达要素的核心点。

5626f2f53dfae971a8000001

  视点:即画面的视觉中心。构图的视觉中心一定是界面最重要的内容,也是必须让用户了解的内容。视觉中心常常在画面中八分之五的地方,以此为基础进行视点构图,能更突出地表现视觉主题,并将用户的注意力集中到主要内容上。

  视觉构图的理论模型图如下:

5626f3003dfae9075b000001

  所以,均衡、对比、律动、视点就是UI视觉设计构图的四项基本法则,大家必须会充分理解和会使用。

  希望下面的5个视觉设计基本表现手法,值得大家好好的理解和使用。

  ① 秩序法:均衡、对称、扩大缩小、平行位移等有秩序有节奏地构图,制造形式美。

  ② 对比法:色彩、形状等的对比,给人鲜明生动的视觉印象。

  ③ 元素法:强化点、线、面构图元素,创造视觉交响,寓多样性于个性之中。

  ④ 矛盾空间法:颠倒、错位、镜像,在空间上构成特殊性,产生一种无限可能、无限发展、无限趣味的空间感。

  ⑤ 共形法:巧妙嵌合边缘形态,重叠共用,互生互补,变幻相生,给人新颖奇特,别开生面之感。


免责声明:

丝路教程网的部分文章信息来源于网络以及网友投稿,本网站只负责对文章进行整理、排版、编辑,是出于传递更多信息之目的,如权利人发现存在误传其作品情形,请及时与本站联系。

Copyright © 2008-2017 blog.silucg.com 丝路教程网 版权所有 网站地图
点击这里给我发消息
丝路教育