美文网首页
3招学会优化界面信息层级

3招学会优化界面信息层级

作者: 逍遥大虾 | 来源:发表于2018-08-06 10:45 被阅读0次

为什么觉得界面总是太平,不能突出主体缺乏层级感?

多半是因为信息层级没有处理好。

信息层级的处理有三个方面: 

组织信息

对比原则

视觉流

(总结)


1:组织信息

亲密性原则

将相同属性的信息组织在一起,建立内部良好的浏览秩序,符合用户阅读习惯,避免耗费过多的精力或看不懂的情况。

2)对比原则

核心思想:避免页面的元素过于相似,通过对比让页面上重要的元素首先引起用户的注意,而不是整体都很平庸。

方式:字体、粗细、大小、色彩

A:通常使用两种不同类型字体对比,突出重要信息。

例如:Banner里面用书法字体和辅助的无衬线体。

B:粗细对比(字重)

例如:导航栏切换经常使用,选中采用加粗字体,不选中则偏细。

C:大小对比:大的文字信息更有视觉冲击力

6-8的差别

D:色彩对比

色彩性格鲜明,对比无色相的黑白文字更加出彩,有很强的视觉吸引力,也可以添加背景色来区分。

例如:飞猪的运营看卡片设计。

3)视觉流:

根据谷歌的研究,用户浏览界面的内容是F型,越往下视觉注意力越少。


页面的上半部分是用户关注的职位信息和薪资待遇,下半部分则是次要的公司地址信息。

自左到右则是用户关注的招聘信息,右边则是次要的公司logo。

整体符合用户自上而下、自左到右的视觉阅读习惯。

总结:

首先:借助亲密性原则组织信息,使页面看起来整齐有序。

然后:通过对比原则来区分信息主次,突出主要信息。

最后:结合视觉流的原则审视自己的设计是否符合用户的阅读习惯。

相关文章

  • 3招学会优化界面信息层级

    为什么觉得界面总是太平,不能突出主体缺乏层级感? 多半是因为信息层级没有处理好。 信息层级的处理有三个方面: 组织...

  • 如何优化界面视觉信息层级

    一、重要性 说到视觉信息层级的重要性,就不得不说结合我们的工作重要性来说。 我们的工作担任整个产品构成到上线(由抽...

  • Android性能优化总结

    性能优化主要可以从以下几个方面入手: 一、界面 1.1 布局优化 思想:尽量减少布局文件的层级 措施: 删除无用的...

  • android性能优化总结

    1.绘制优化 卡顿造成原因: 界面绘制:①页面复杂,层级较深,造成measure,layout,draw都有可能耗...

  • 界面信息层级优化思路小结(以列表页为例)

    预计阅读时长:13m 34s(4050 字;13 图)配图制作工具:Figma、Xmind 一. 现状出发,定义问...

  • 【用户体验要素】框架层

    界面设计、导航设计、信息设计——更加清晰的一个层级 界面设计是我们熟知的关于“按钮、输入框和其他界面控件”的领域;...

  • Material Design中的动效需要注意的

    1通过过渡动画,表达界面之间的空间与层级关系,并且跨界面传递信息。 2从父界面进入子界面,需要抬升子元素的海拔高度...

  • 【15】视觉信息设计原则

    1、好的界面要传达品牌理念; 2、设计师需要对页面创建层级和建立联系; 创建层级:根据场景判断哪些信息是重要的和次...

  • 产品分析(天天小读)

    方案一: A.原界面信息层级分析 ①活动Banner ②会员权益 ③跨年马拉松及奖品展示 ④活动规则 原...

  • Reveal2破解+使用教程

    工欲善其事,必先利其器 Reveal是一个iOS界面调试利器。可以动态查看界面元素的位置信息、层级关系,通过实时修...

网友评论

      本文标题:3招学会优化界面信息层级

      本文链接:https://www.haomeiwen.com/subject/sjlwvftx.html