020-29815005
预约专线时间:09:00-23:59

UI设计中如何合理应用对齐?

新闻来源:优漫动游 日期:2022-05-28
在我们日常浏览网站或者APP的时候,如果看到这个网页的内容排版布局很乱我们会怎么想?我们会想自己的网站都这个样子,那公司也不用去看了。也许立即就回关闭网页,浏览其他内容去了。合理的对齐能让你的设计更诱人,也能更方便用户浏览,提供极佳的阅读体验。接下来优漫…

  在我们日常浏览网站或者APP的时候,如果看到这个网页的内容排版布局很乱我们会怎么想?我们会想自己的网站都这个样子,那公司也不用去看了。也许立即就回关闭网页,浏览其他内容去了。合理的对齐能让你的设计更诱人,也能更方便用户浏览,提供极佳的阅读体验。接下来优漫动游小编给大家讲解一下该如何合理的利用对齐?


UI设计中如何合理应用对齐?


  不同寻常的对齐方式还要考虑到文化差异,有部分文化从右到左阅读,大部分文化都是从上到下,从左到右。因为大部分文化都是从左到右阅读,所以尽量不要采用右对齐,可读性很糟糕。右对齐一般在页底呈现,展示联系地址、联系信息,或者在顶部出现,展示导航链接。


  1.元素组

  无论是设计还是开发,当谈到“模块”这个词的时候,广义讲,含义差不多,都是一组彼此联系的元素。比如说一组链接便是一个链接模块,图像+覆盖其上的标题大文本也可以是标题模块。有两点需要考虑:模块内部元素的对齐?模块与模块之间的对齐?

  2.图像

  图像的对齐很麻烦,因为每一张图的尺寸都不一样。小尺寸的图像易于放置,而且不影响内容。大的图像会打破阅读节奏,因此好不要用过大的图像。一般有两种方法:第一种是把图像放在内容之外(开头或者结尾),另一种方法是文本内穿插图片。第一种方法很简单,可以采用全尺寸的大图,看起啦效果也不错,方便响应式设计。

  第二种方法稍稍复杂,图像的位置要把握好。图像首先要和文本区域合理对齐(左或右),这是一种方法。另一种方法是图像稍稍超出文本区域。

  在文本区域内嵌入图像,如果做得巧妙,文图结合的够好,会提高可读性、趣味性。

  3.模块与模块之间的对齐:

  再比方说链接,某些导航链接可能做得稍稍复杂,文章开头一个大标题主链接,然后下文又提供了稍小的副链接,同时还画出了一个图标,也能链接,这边是一个复杂的导航模块,可以尝试着用这个模块与其他模块对齐。

  4.模块内部元素的对齐:

  当然元素组并不一定要紧挨着,比如说Logo和导航链接这种,可能会在顶部和底部同时出现。这种元素组就一定要对齐,虽然当你浏览底部的时候会看不到顶部,但是如果上下Logo没有对齐,用户能“感觉”出来,这也很重要,一致性设计。

  5.背景图像

  背景图像是个限制,尺寸、图像选择都很困难。当背景图像和文本对齐结合时,背景图像需要符合CSS规则:绝对定位,上还是下?左还是右?这时候就需要根据自身设计来考虑背景图像的设置了。如果你的背景图像是重复的图案,便需要考虑图案与内容的对齐关系,如何利用背景图像来更好展现前景元素?

  以上就是优漫教育小编为大家介绍的“UI设计培训】:UI设计中如何合理应用对齐?”相关内容,希望能对大家有所帮助,想必现在你对对齐有了一定的了解,希望从现在开始,设计时考虑对齐因素,让设计更加有序,有组织的布局元素、元素族。利用栅格进行对齐,尽量保证每一个元素都对齐合理。学习ui设计培训,可以参考优漫教育提供的ui学习路线,该学习路线内容包含ps软件入门、AI与品牌设计、视觉表达技法、web视觉设计、图标设计、产品交互、移动端设计等,根据优漫提供的ui学习路线图,可以让你对学好ui需要掌握的知识有个清晰的了解,并能入门ui设计!