查看: 3950|回复: 1
打印 上一主题 下一主题

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

[复制链接]

1240

主题

11

听众

6720

积分

版主

Rank: 7Rank: 7Rank: 7

纳金币
5474
精华
6

荣誉管理 论坛元老 突出贡献 优秀版主

跳转到指定楼层
楼主
发表于 2017-4-10 17:07:19 |只看该作者 |倒序浏览
1.jpeg
苹果手机的UI视觉设计构图都是我们值得去学习的好案例。
这节课主要讲解UI视觉设计构图的基本原则。
1、什么是构图?
构图就是有限的画面中,将各种元素进行合理地布局和安排,使图形和文字在画面中达到最佳位置,产生最优视觉效果。
构图是整个画面的骨架,决定了视觉营销界面是否准确的表达主题,吸引用户注意。
2、构图的四项基本法则—分别为:均衡、对比、律动、视点
今天跟大家分享的主要从APP引导页设计,APPbanner图设计说起,这四项基本视觉构图法则适合偏平面设计。当然这也是大家学习APP ui设计的基本理论知识。
当然一个完整的引导页界面包含:主题图、背景渲染图、文字、点缀图以及动画元素组成。
第一条构图法则:均衡
2.jpeg
各元素在布局上保持视觉重量的平衡和匀称,从而使视觉界面具有平衡感和稳定性。堆成是均衡的一种极端情况,平衡感和稳定性很强,适合表现但局限性较大、缺乏变化。
视觉构图的理论模型图如下:
3.jpeg
第二条构图法则:对比
4.jpeg
在视觉界面中通过大小对比、字体大小、粗细对比、疏密对比、曲直对比等形式来突出和强化主题,引起用户关注。
视觉构图的理论模型图如下:
5.jpeg
第三条构图法则:律动
可以理解为有节奏、规律、跳跃、动感等元素。
6.png
7.jpeg
起引导用户的视觉轨迹的作用。研究表明,画面右上角最能吸引人的关注,而左下角对人的吸引力最小。律动能给人视觉上富有规律的节奏效果,进而吸引用户了解APP界面内容。
视觉构图的理论模型图如下:
8.jpeg
第四条构图法则:视点
即  视觉的中心点或者是视觉焦点  跟我们拍照的时候,需要顶一个焦点。也是视觉传达要素的核心点。
9.jpeg
视点:即画面的视觉中心。构图的视觉中心一定是界面最重要的内容,也是必须让用户了解的内容。视觉中心常常在画面中八分之五的地方,以此为基础进行视点构图,能更突出地表现视觉主题,并将用户的注意力集中到主要内容上。
视觉构图的理论模型图如下:
10.jpeg
所以,均衡、对比、律动、视点就是UI视觉设计构图的四项基本法则,大家必须会充分理解和会使用。
希望下面的5个视觉设计基本表现手法,值得大家好好的理解和使用。
游客,如果您要查看本帖隐藏内容请回复


分享到: QQ好友和群QQ好友和群 腾讯微博腾讯微博 腾讯朋友腾讯朋友 微信微信
转播转播0 分享淘帖0 收藏收藏0 支持支持0 反对反对0
回复

使用道具 举报

0

主题

3

听众

959

积分

初级设计师

Rank: 3Rank: 3

纳金币
44
精华
0

最佳新人 活跃会员 热心会员 灌水之王 突出贡献

沙发
发表于 2021-5-25 17:51:27 |只看该作者
好好学习 天天向上
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

手机版|纳金网 ( 闽ICP备2021016425号-2/3

GMT+8, 2024-11-11 07:36 , Processed in 0.093805 second(s), 34 queries .

Powered by Discuz!-创意设计 X2.5

© 2008-2019 Narkii Inc.

回顶部