美文网首页
网格中元素的大小与位置

网格中元素的大小与位置

作者: 乱乱Clover | 来源:发表于2019-08-27 23:30 被阅读0次

在利用网格来布局界面元素时,请注意参考如下关于大小和位置的提示

重要的元素要大一点,即便比例失调也可以考虑一下。

比如你在设计一个体育新闻网站,把高尔夫球弄得跟英式足球一样大似乎不够精确,但要是使用实际大小,反而会让人觉得网球大师杯赛还不如全美足球大联盟赛重要似的。体育迷们可能会因此争论,但体育频道的编辑则更倾向于对各种运动一视同仁。

体育新闻网站

不太重要的界面元素应该小一些。要想办法表现出不同的重要性,否则用户就会被搞迷糊。

记住这条规则:如果一个元素的重要性为1/2,那就把它的大小做成1/4。

把相似的界面元素放在一起,能够有效的减少视觉上的干扰因素(如:色标、标签、边框),也不必解释他们之间的关系。这样也可以让用户更容易集中注意力,因为它们不必在屏幕前东张西望了。

说到在计算机屏幕上布局导航元素,我从来没有发现任何证据能够证明导航条靠在屏幕的左边或右边,甚至横跨在屏幕上方的效果肯定更好。当然,这并不是针对网站而言的。真正应该担心的问题是,用户能不能轻易的找到想找的按钮。对于网站来说,这通常意味着把重要的链接与内容一起放到中间位置。

然而,移动端界面的问题还要复杂一些。把应用的导航按钮放在屏幕底部,用户触摸他们不会挡住屏幕。而大型的触摸屏上,导航放在右侧(或左侧)可能会给习惯用右(左)手的人带来麻烦。

相关文章

  • 网格中元素的大小与位置

    在利用网格来布局界面元素时,请注意参考如下关于大小和位置的提示 重要的元素要大一点,即便比例失调也可以考虑一下。 ...

  • 原生JS获取元素的位置与大小

    原生JS获取元素的位置与尺寸 1、内高度、内宽度: 内边距 + 内容框clientWidthclientHeigh...

  • JavaScript -- 元素大小和位置

    在 JavaScript 操作 DOM 的过程中我们可能需要经常获取一个元素的大小,在处理鼠标事件的时候可能需要知...

  • css布局

    1.固定布局:浏览器大小改变,元素大小位置均不变 2.流体布局(自适应布局):浏览器大小改变,元素位置不变大小改变...

  • vue判断两个元素是否重叠

    我做的是通过接口返回的列表数据渲染元素,元素可以调整位置和大小,所以遍历中的item包含元素的positionX,...

  • DOM操作注意点整理

    获取元素位置 getBoundingClientRect()返回一个对象,提供当前元素节点的大小、位置等信息。 让...

  • 选择排序和冒泡排序

    规则:比较大小,位置交换 选择排序:数组中的每个元素都进行比较 冒泡排序:数组中相邻元素进行比较 选择排序 for...

  • 元素偏移量,元素可视区,元素滚动

    概述 使用offset系列相关属性可以动态获得元素的位置和大小 获得元素距离带有定位的父元素的位置 获得元素自身大...

  • jQuery篇之操作jQuery对象(样式)

    获取/设置 元素内容 获取/设置 元素属性 获取/设置 元素样式 获取/设置 元素位置和大小

  • 前端优化之六:避免大型、复杂的布局和布局抖动

    布局是浏览器计算各元素几何信息的过程:元素的大小以及在页面中的位置。 根据所用的 CSS、元素的内容或父级元素,每...

网友评论

      本文标题:网格中元素的大小与位置

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