写点什么

布局检测与优化(一),android 手机串口开发

作者:嘟嘟侠客
  • 2021 年 11 月 28 日
  • 本文字数:2447 字

    阅读完需:约 8 分钟

2. 恰当的浏览模式

其实每个人在观看内容的时候,都会有一个潜意识的观看模式。这种模式可能会因为用户正在查看的内容类型的不同而有所差异,但是可以说最受用户欢迎的两种浏览模式是 Z 型模式和 F 型模式。


两种浏览模式都可以根据要设计的内容类型来达到独特的目的。这些浏览模式将页面的信息流动起来,帮助观者获得更好的体验。让我们更详细地看一下这两种模式。


Z 型视觉动线


Z 型视觉动线的设计最适合于文字信息不繁重的页面中。将内容设计成以这种模式的排布将帮助读者快速浏览每个元素,并清晰地知道每个元素的重要性。



在 Apple 的网站中,页面顶部有多个 Mac 的选项,所以我们首先会进行水平浏览,然后沿对角线方向看到标语,最后以目标产品的详细介绍作为结束。所有信息的布局都非常清晰明了,同时大多数人已经下意识地被这种浏览模式吸引了。


F 型视觉动线


F 型视觉动线更多地使用在诸如文章和博客之类的文字比较密集的页面上。


对于文章和资讯内容繁杂的网站,简单的 F 型布局可以有效地帮助读者扫描图像和标题。



以这种浏览模式进行设计布局时,尽管读者可能会扫描前几行的信息,但随着他们快速向下移动视线时,他们通常只会浏览最吸引其注意力的地方。

3. 布局规则

通过使用参考线和网格来布局设计,可以使所有元素保持整洁和对齐,从而不会破坏观者的浏览体验。他们的注意力知道要跟踪的位置,并且这些信息都是整齐的对齐和分组,所以每组元素都可以紧密关联。


诸如黄金分割率之类的公式试图做到这一点;但是可以将重要元素从这些既定规则中分离出来,以增加其视觉层次。这也可以帮让设计更具动感和乐趣。



Mercedez


在这个的示例中,网站为了保持整体界面的工整,使用网格的方式来排布信息,但是为了更加关注 Mercedez 的形象,图片忽略了网格布局,从而创建了一种弹出效果。

4. 合理使用字体

正确的字体可以让网站拥有自己的个性,并引起用户对某些领域的关注。具有不同大小和粗细的字体也可以用于增加层级结构,并使更重要的文本信息脱颖而出。


大多数网站旨


《Android 学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》

【docs.qq.com/doc/DSkNLaERkbnFoS0ZF】 完整内容开源分享


在利用不同大小的标题来强调与它们相关的内容。优良作法是将主标题用作页面的最大和最重要的标题,并使用副标题、小标题等来标注不太重要的内容。这也有助于读者浏览文本页面,以准确定位在他们感兴趣的区域。



Slack


Slack 的网站就是一个很好的例子,该网站使用恰当的标题为内容赋予重要性。在标题部分,它们具有最大的主标题,其中包含介绍信息和号召性用语。横幅下方有许多带有较小标题的版块,以介绍更多功能。

5. 平衡与对称

在页面上对称出现的元素可以帮助平衡设计,使信息保持简单,有条理并且易于遵循。


如下图所示,Avioc 利用其主页上的对称性将重点放在其主要优势上,同时在图像的两边提供更丰富的文字摘要。焦点直接位于中心,可以轻松浏览页面以查找更多信息,而不会感到迷茫。



Avioc


有时候除了标准的平衡,我们还可以在设计中打破乏平衡和对称性来传达某些信息的重要性,让我们的设计布局显得更加流畅和活泼。

6. 使用大小和比例吸引焦点

调整大小是一项非常基本但至关重要的原则,这样可以使重点元素比其他元素更突出,有助于将观众的视线吸引到特定区域。


通过增达重点元素的比例,可以立即吸引观看者的注意力。但是在设计过程中,需要注意的是不要放大太多的元素,以免降低屏幕上其他元素的重要性。



Simply Chocolate


Simply Chocolate 就是一个很好的示例,用来说明如何使用比例的变化来强调视觉层级。在这个页面中,最先吸引我们视线的是放大的标题文字而不是底部的图片,这些文字解释了产品的全部含义。同时这样的方式不会影响屏幕上其他的元素。

7. 使用颜色和对比

颜色可以与元素大小的调整一起使用,以提高设计中关键信息的重要性。通常,明亮的颜色比无色的或者不饱和的颜色更能吸引观众的注意力。



颜色变化


同样,具有较高对比度的颜色将显得更重,更接近观看者,从而赋予它们更多的重要性。在上面的示例中可以看到,较亮的颜色在较暗的背景下看起来更近,而在较亮的背景上则较远。



fullstory


无论信息在界面中怎样排布,使用一种明亮的颜色作为焦点都可以帮助吸引注意力。


在上面的网页以及大多数网站的导航中,我们都会注意到按钮上高对比度的颜色,这是最关键的操作暗示。通过为用户带来良好的操作导航提示,为他们提供更愉快的体验并增加所需流量的转化。

8. 运用动效

还记得互联网还很新的时代,每个弹出窗口或标注都必须眨眨眼才能引起用户的注意?这种做法确实引起了我们的注意,但是在此过程中,它牺牲了令人愉悦的体验,并给观者带来了烦躁的感觉,这对参与度没有帮助。


如今,我们可以更细微的方式使用这些相同的动效原理来引起注意或重视某些领域。同样页可以简单地以巧克力为例,说明它们如何结合微妙的动作来吸引注意力并提供提示,促使用户参与设计。



Simply Chocolate


在滚动口味选择中时,颜色会更改以匹配产品。当把鼠标悬停在包装纸上时,它会打开一条条条,露出内部的巧克力,给用户的印象是可以将其打开以了解更多信息。

总结

这里我们讨论了许多不同的 UX 设计原则和视觉层级结构的示例。它们现在可能都有意义,但是当需要将它们付诸实践并找出一种在所有设计中平衡所有这些原理的方法时,有时候页会更加令人困惑。


视觉层级结构用于帮助将重点放在设计的某些元素上,但是认为“最重要”的元素越多,完善设计的难度就越大。


从简单开始,专注于最重要的一件事,它可以帮助设计走向成功。

结尾

  • 腾讯 T4 级别 Android 架构技术脑图;查漏补缺,体系化深入学习提升



  • 一线互联网 Android 面试题含详解(初级到高级专题)


这些题目是今年群友去腾讯、百度、小米、乐视、美团、58、猎豹、360、新浪、搜狐等一线互联网公司面试被问到的题目。并且大多数都整理了答案,熟悉这些知识点会大大增加通过前两轮技术面试的几率



有 Android 开发 3-5 年基础,希望突破瓶颈,成为架构师的小伙伴,可以关注我


本文已被CODING开源项目:《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》收录

用户头像

嘟嘟侠客

关注

还未添加个人签名 2021.03.19 加入

还未添加个人简介

评论

发布
暂无评论
布局检测与优化(一),android手机串口开发