当前位置: 首页 > news >正文

ai如何对齐两个图形边缘_UI设计中如何更好的运用排版法则

  排版在平面设计领域极为重要,它不只在海报、广告中使用,在制作UI的作品集、UI界面设计、网页设计、运营设计也要注重设计排版,今天由我给大家分享一些版式设计法则,通过这些法则来规范移动UI设计,并提升作品的精品感和品质感。

b83bd35884d3357a6304887378a53141.png

  视觉设计排版:

  第一步,先把文字内容做好排版;

  第二步,思考场景设计与信息层级处理;

  第三步,进行排版设计的布局;

  第四步,最后做好色彩和细节的优化,从整体出发到细节处理再回归整体性的原则,做好包装的设计展示。

7427b81fe01129940e6a2ddf929a2a3b.png

  一 格式塔原理在排版中的应用

d009a981b3c468196201921a250d713f.png

  格式塔原理是 20 世纪早期的德国心理学家研究小组发现的人类视觉工作原理。人类视觉是整体性的,我们会对看到的事物自建结构,并且在神经系统层面上感知形状,图形和物体。「形状、区域」在德语中是 Gestalt,所以这些理论也就叫做视觉感知的格式塔原理。

  格式塔原理的设计原则如下:

  1. 邻近性原则

  物体之间的相对距离会影响我们认知它们的关系。相互靠近的元素被认为是一组,那些距离较远的则自动划分为组外。整体看来,距离近的关联性更紧密。

  下面左图中的圆相互之间在水平方向比垂直距离近,那样我们看到了4排圆点,而右图看成2列。

d1ec593062f40fc7cd30f1a8a16d8b4b.png

  如何应用于UI设计:

  邻近性原则,在网页端或移动端的排版布局中有非常广泛的应用。设计师应用此原则,调整距离或者用分割线等来分开不同设计模式的构建。此原理应用在设计中,界面层级好,视觉清晰。

  按照原理,我们会将内容相似的元素位置放置得更接近,在 UI 设计中的卡片化设计,列表组合等信息整合设计都会应用到此原理。

  并且不同内容之间我们使用分割线,留白,卡片区分等方式来使不同的内容区分更为明显。

54c50075ec86342241aa7ea977793ad2.png

  2. 相似性原则

  格式塔原理中的相似性通常和邻近性原则一起运用在产品设计中。它指出了影响我们感知分组的另外一个原则:有共同视觉元素的物体看起来更有关联性。我们倾向于将看起来相似的对象视为一组或者一个模式,并且将它们与特定含义或者功能联系在一起。

  如何应用于UI设计:

  利用颜色,形状,大小,方向,以及纹理等视觉元素,组成相近的样式。UI 设计规范中的控件组合成的组件,大部分都会使用到相似性原则,统一视觉样式,来表达统一的功能性。

a607e956a2010689b55c3ca6fb146e55.png

  3. 封闭性

  人的眼睛在观看时,大脑并不是在一开始就区分各个单一的组成部分,而是将各个部分组合起来,使之成为一个更容易理解的统一体。

  这个统一体是我们日常生活中常见的形象,如正方形、圆形、三角形等,让用户容易理解。

e0233caf1745a6d5d027db3c4b372258.png

  如何应用于UI设计:

  这个原则也非常适用于图形用户界面的图标设计或界面设计中

2061b234d526a0773122919c00484e65.png

  4. 连续性原则

  人的视觉具备一种运动的惯性,会追随一个方向的延伸,以便把元素连接在一起成为一个整体。下图是两个交叉的圆弧轨迹,人们往往倾向于使视觉流跟随着相同颜色的轨迹,而不会被干扰,我们能够感知这是两条弧线。

  如何应用于UI设计:

  连续性目前在 app 产品中应用非常广泛。比如在电商产品中 banner 区域的左右滑动交互模块,滑动组件和进度条展示。

  主要应用范围如下:

  1 导航栏中的连续性设计

  2 卡片模块中的连续性设计

  3 模块的连续性设计

a8501fed00793ca76894729d17a76bc5.png

  5. 主体/背景

  我们的大脑将视觉区域分为主体和背景 2 个部分。UI设计中如何更好的运用排版法则https://www.aaa-cg.com.cn/ui/2714.html这个特征有利于我们对重要信息和次要信息的感知。

  主体和背景的区别可以从以下两个方面来控制:

  1 场景大小:我们倾向于将处于大场景中的中间小区域部分视为主体,而大场景视为背景;

  2 层级关系:如果在同一个平面中,我们倾向于将处于视觉第一层级的物体视为主体。

  如何应用于UI设计:

  此原则可以帮助设计师在设计界面的过程中抓住用户注意力,并且让用户优先看到我们想让他们看到的事物。

  比如重要信息的弹窗提示,以及弱化背景从而突出内容等界面中都有运用到此原则。

0d5fbbc54e77a7ab36dd5813fc24b270.png

  二 移动端版式设计原则

24d3031fcea70e138e7e05589aab1682.png

  版式设计,在有限的版面空间中,将版面构成元素,如:文字、图片、线条和颜色等,根据特定的内容,进行组合排列,并运用造型要素及形式原则,把构思与计划以视觉的形式美感,表达出来。

  一个优秀的排版要考虑到用户的阅读习惯和设计美感,帮助用户区分重点、提升可读性。遵循平面设计原理,排版中的对齐、对比、重复、亲密性 4 大原则。

  对齐原则

  对齐是版式设计的最重要的原则之一,对齐可以建立一种整齐的外观,带给用户舒服的一致性的浏览体验。

  基于从上到下,从左到右的阅读习惯,应用在界面设计中,一般是左对齐、居中对齐和右对齐,同时同一竖线上的元素,要保持居中对齐。

cf6efad5201899fb671e02e0b9d4b0b0.png

  对比原则

  做排版设计时,重点的元素通过尺寸、色彩、造型等引起用户关注,这样重点内容,才会突出出来。设计要有轻重缓急之分,不要让用户去找重点,Don't let users think,让用户顺利的接受重要信息。

  例如:图片大小的对比,让用户感受到最重要的信息。

9bfd928ca0a888af9ec7996182e05e80.png

  亲密性原则

  根据亲密的原则来组织复杂的信息,将彼此相关的同一类的元素靠近,同时把远离不相关的元素,这样就可以大大提高界面设计的可读性。

2f2b4a8bdca94c2dd48b4b6fbac87f8c.png

  三 作品集排版法则

7cae88a8cc6e0baaa7998e9631e5f01e.png

  设计排版法则:

  1 左对齐

  在页面排版时,将你的文字设置为左对齐。为什么?在西方文化中,人们的阅读习惯是从上到下,从左到右的。

  通过左对齐文字,眼睛能够更容易地找到边缘,更易于阅读。避免因为这个原因缩进段落的第一行。

  2 使用一种字体

  优秀的设计师在排版设计中能够完美使用两种字体,是因为他们能够把握和了解所选的字体的类型,并保证他们是互补的。但是一般情况下,避免使用两种相同类型的字体。例如,不要使用两种以上的非衬线体、粗衬体或手写体。

  使用一种字体,直到你能够很好的运用和掌握它。如:苹方字体或Dinner字体。

  3 跳过一个字重

  在改变字体权重时,从细体到粗体,或者从中粗体到超粗体。大师级的设计关键就是对比。

  粗体和细体对比的标题字体组合,获得最大的对比。

  4 双倍字号尺寸

  当改变字号大小时,一个好的经验法则是,你使用的字号大小是现有字号的两倍或一半。

  5 对齐到一个轴线

  沿着一个主坐标构建你的字体排版,并将字体元素对齐到网络线。无论文字类型或大小如何,在垂直轴上,字体对齐轴线的左边缘。

  在水平轴上,寻找最佳水平元素,或对齐文字的大写字母字高,或对齐文字基线即可。

  6 使用条框分类

  使用形状/线条将相关的内容信息块进行分类编组。这样会使不同的元素排列很有顺序。

  7 注意间距

  段落排版中到处都是间距。如果文字左对齐。右侧会出现文字的参差不齐、起伏留白等。避免在段落的最后一行出现单字成行的情况,切勿使用强制对齐设置。注意段落右侧的起伏形状,在一个句子中标点符号之间使用单个空格,以避免形状和角度不美观。

  间距的重要性。越是间距接近的元素,读者就会假设在不同的信息块之间存在这一种关系。

  因此,您现在已经了解了与UI设计师的工作相关的主要技能。如果您想了解更多信息,请给我点个关注,我之后还会发包含有关在该领域工作的更多相关文章。

UI设计中踩过的坑

UI设计中的筛选控件指南

UI设计色彩趋势总结

UI设计中面性图标设计总结

UI设计中AI常用的快捷键和小技巧

相关文章:

  • 世界地图新西兰_新西兰又被实名羡慕了!在这个榜单排名第1,美国才排第34!...
  • 字体感觉小了 引入的vant_Vant中使用rem
  • eplices开发android_Eclipse 安装(Neon 版本)
  • 加密狗模拟器_汽车驾驶模拟器新软件功能
  • 触摸屏开发_莱宝高科:暂无大规模扩充触摸屏产能计划,正开发OFM结构触摸屏...
  • 模拟黑洞图像_nasa绘制黑洞图像(这次我终于看到了! NASA模拟的黑洞高清令人震惊的画面,令人窒息!)...
  • github覆盖远程分支内容_Github快速上手笔记
  • 显示某年某月日历_一眼就沦陷!一款深藏中国文化古韵的日历应用
  • 深度装机大师一键重装_深度一键重装系统软件
  • idea jsp引用路径_JSP学习4
  • 于朦胧 机器人_《两世欢》上线,于朦胧演技成笑点:像个没有感情的走路机器人...
  • 无法加载 mysql 扩展_请检查您的 php 配置. - 文档_无法加载 mysql 扩展,请检查您的 PHP 配置 最新解决办法...
  • mysql可以运行oracle报错_Oracle启动报错ORA-03113解决
  • csv导入到mysql_导入CSV到MySQL
  • mysql alter identity_mysql alter 语句用法,添加、修改、删除字段【转】
  • JavaScript 如何正确处理 Unicode 编码问题!
  • 【Redis学习笔记】2018-06-28 redis命令源码学习1
  • 【知识碎片】第三方登录弹窗效果
  • 〔开发系列〕一次关于小程序开发的深度总结
  • Java|序列化异常StreamCorruptedException的解决方法
  • JDK 6和JDK 7中的substring()方法
  • Laravel 菜鸟晋级之路
  • Odoo domain写法及运用
  • Vue全家桶实现一个Web App
  • -- 查询加强-- 使用如何where子句进行筛选,% _ like的使用
  • 对话 CTO〡听神策数据 CTO 曹犟描绘数据分析行业的无限可能
  • 翻译 | 老司机带你秒懂内存管理 - 第一部(共三部)
  • 分布式任务队列Celery
  • 爬虫进阶 -- 神级程序员:让你的爬虫就像人类的用户行为!
  • 前端每日实战 2018 年 7 月份项目汇总(共 29 个项目)
  • 如何实现 font-size 的响应式
  • 使用Swoole加速Laravel(正式环境中)
  • 体验javascript之美-第五课 匿名函数自执行和闭包是一回事儿吗?
  • 我这样减少了26.5M Java内存!
  • 移动互联网+智能运营体系搭建=你家有金矿啊!
  • 云大使推广中的常见热门问题
  • 大数据全解:定义、价值及挑战
  • ​插件化DPI在商用WIFI中的价值
  • ​中南建设2022年半年报“韧”字当头,经营性现金流持续为正​
  • $ is not function   和JQUERY 命名 冲突的解说 Jquer问题 (
  • (10)工业界推荐系统-小红书推荐场景及内部实践【排序模型的特征】
  • (16)UiBot:智能化软件机器人(以头歌抓取课程数据为例)
  • (ZT)一个美国文科博士的YardLife
  • (附源码)python旅游推荐系统 毕业设计 250623
  • (排序详解之 堆排序)
  • (三十五)大数据实战——Superset可视化平台搭建
  • (已解决)什么是vue导航守卫
  • (转载)VS2010/MFC编程入门之三十四(菜单:VS2010菜单资源详解)
  • ***汇编语言 实验16 编写包含多个功能子程序的中断例程
  • ***通过什么方式***网吧
  • .[backups@airmail.cc].faust勒索病毒的最新威胁:如何恢复您的数据?
  • .【机器学习】隐马尔可夫模型(Hidden Markov Model,HMM)
  • .babyk勒索病毒解析:恶意更新如何威胁您的数据安全
  • .NET Core WebAPI中使用Log4net 日志级别分类并记录到数据库
  • .NET Core 和 .NET Framework 中的 MEF2