本丞工业设计|你了解吗？，设计中常见的三种布局排版( 二 )
文章图片
F模式布局
雅各布·尼尔森（JacobNielsen）在其公司进行的眼动追踪研究之后首次提出了这种模式 。 在F模式中经常会迷失的是 ， 这些原始的研究是针对大量文本设计和搜索结果进行的 。
与其他模式一样 ， 眼睛从上/左开始 ， 然后水平移动到上/右 ， 然后又回到左边缘 ， 然后再向右进行水平扫描 。 这第二次扫描不会延伸到第一次扫描 。
在第二次大扫描之后 ， 附加扫动向右移动的次数越来越少 ， 并且在大多数情况下 ， 当向下移动时 ， 眼球会紧贴左边缘 。
文章图片
在F模式表明：
1.重要信息应放置在设计顶部 ， 通常可以在上面阅读 。
2.较少的信息应沿着设计的左边缘放置 ， 通常应放置在项目符号点上 ， 此处几乎不需要水平移动眼睛即可将所有内容带入 。
3.人们不在网上阅读 。 他们更多是在扫描 。
不幸的是 ， 这种模式似乎已应用于网上的所有内容 ， 而不仅仅是文本繁多的内容 。 如果你在下面查看Nielsen的原始热图 ， 您会看到F包含在主要内容中 ， 并且没有扩展到完整设计 。
在应用F模式思维扫描仪并放置内容时 ， 这些扫描仪很可能会对F感兴趣 。 将重要信息放在顶部 ， 以及旨在将某人拉到页面下方的信息 。
但是请记住 ， 如果有人扫描您的页面很有趣 ， 那么他们会阅读 ， 因此您可以将信息放置在F之外的那些会读书的人 。
文章图片
关于3种模式的思考
我已经提到过几次了 ， 但重要的是要理解这些模式描述了当设计缺乏层次感时眼睛自然会走到哪里 。 它们描述了均匀分布和文本内容丰富的自然模式 。
不幸的是 ， 这些模式通常应用于存在现有视觉层次结构的设计中 ， 以及应用于包含多个文本的设计中 。 模式也比其名称所暗示的更相似 。 在所有这三个视图中 ， 查看器从顶部/左侧开始 ， 然后向右移动 。 在Z和F模式中 ， 它们可能会向右移动一点 ， 但仍会向右移动 。
Z模式和古腾堡均在同一位置结束并在中间移动 。 F模式未到达末尾的原因可以通过以下方式解释：
1.内容不完全吸引读者 。 可悲的是 ， 大多数在线内容都是如此 。
2.倒金字塔形的写作 ， 可能会导致读者在页面向下移动时迷失方向 。
3.人们正在扫描以确定是否要阅读更多内容 。
奇怪的是 ， 任何发现你的内容被吸引的访问者都想阅读更多内容并突破到达终端区的F模式 。
最后一点是 ， 随着这些模式的讨论越来越多 ， 它导致更多的设计强调模式 。 如果您确信你的用户将遵循这些模式之一 ， 那么您可能会创建增强该模式的设计 。 这导致了一个鸡和蛋的场景 。
联络点模式
我之所以继续关注大量文本的原因 ， 是因为一旦您开始给设计元素赋予不同的视觉权重并创建层次结构和流程 ， 以上的模式将不再适用 ， 并且您只需要了解一种模式 ， 即一个完全由你控制的 。
它不是一种模式 ， 它是扎实的设计原则 ， 但是由于我们在这里谈论模式 ， 所以我给它起一个名字 。
焦点模式：它表示用户将首先查看页面上最主要的元素（视觉重量最大的元素或区域） 。
从那里 ， 眼睛会遵循主导元素 ， 其他重点路径点的设计 。 顺序将取决于这些焦点的相对权重以及指示下一步要看的任何视觉提示 。
文章图片
在谈到焦点、平衡和流动时 ， 我经常会提到康定斯基的作品《八》（见上图） 。
推荐阅读
- 『老干妈』腾讯状告老干妈！误会？来了解一下老干妈的家族式企业
- 「5g手机」千元档也能上双模5G，三款不到两千的5G手机了解一下
- 华为mate40▲鸿蒙加持，华为Mate40售价4千出头，工业设计别具一格
- SOWORD科技言|为什么NodeJS是创业公司的首选？了解用于Web开发的NodeJS
- 呆科技|带你迅速了解小米10和小米10Pro有何区别
- 加速度测评室|华为Mate40Pro曝光，前后双屏主打商务，超前的工业设计
- 大斌看电视|一加电视新品系列一文了解怎么样？小米电视大师系列很火抢其风头
- 「javascript」为什么NodeJS是创业公司的首选？了解用于Web开发的NodeJS
- 固态硬盘▲两块硬盘合二为一，电脑读写翻倍？这样的“好事”你必须得了解
- 斗牛财经大数据|此高利润行业你了解吗？曾大赚垄断利润！现又面临新挑战