“页面该怎么布局?”交互方法论之古腾堡原则

前沿:此文仅记载自己对设计知识点的理解和梳理,非权威发布,欢迎设计爱好者们多多交流。

在UX设计中,我们常常会面临按钮、行动点的设计,排除样式风格,在位置上为什么常常会将其放置最底部,当有双选按钮出现时,左右该如何排布?指导原则又是什么?

按钮布局

什么是古腾堡原则?

古腾堡原则展示了人们在阅读时遵循的一般规律。这个规律表明当我们在阅读时,眼睛运动规律是水平方向的从左到右,在页面上上下滑动。人们在阅读时的载入点是左上角,并且在退出页面的时候视觉落点在右下角,这是人们阅读时的自然路径。

古腾堡原则

第一视觉区

页面的左上部分是用户的主要焦点,无论用户在搜索内容、主动阅读或者快速浏览,这都是用户阅读的第一落点区域。

因此在这个区域我们应放置一级内容或者核心功能。例如标题,二级TAB。这样用户才会第一时间获取最重要的信息去影响下面的浏览行为。


强休息区

视觉从左上角的第一落点区域移开时,视线会移动到页面的右上部分,重要性不高,因此在这个阶段,我们不应该去设置一个重要的行动点,一方面用户容易忽视,另一方面,当用户浏览完中心区域的内容后,再返回到强休息区操作,视线会有个折回过程,用户体验并不太理想。

这个区域不容易引起注意,因此这里可以放置辅助性功能或者需要谨慎操作的行为。(如修改后的保存)


弱休息区

左下部分的区域是人们浏览最弱的区域,用户对这块的注意程度也最低。

此区域注意力最弱,因此也用来放置最弱的信息提示(比如时间,话题来源等)


视觉终端区

右下部分是阅读视线最终的落点区,当用户浏览到这个部分时,阅读或扫描的行为会被中断并且采取措施,我们可以在这里插入按钮或者行动点。这也就能解释为什么按钮都会在右下角出现。

这个区域是用户浏览行为的最终落点区域,当用户的浏览行为结束后,可以进行操作反馈。


思路拓展

星巴克的弹窗说明就是完全运用了古腾堡原则设计。

标题居于左上角,按钮居于右下角。现在国内的APP说明性弹窗还是居中显示的比较多,两者都可以,因为弹窗所承载的内容较少,人们在阅读是基本不需要寻找的,因此居中显示也适合。按照目前的接受度,个人看法,居中显示反而更容易让人接受。

但是当我们在浏览上下滑动页面的时候,如果有子标题,标题居左对齐大多数情况下是最好的选择。(当用户有对此页面是有兴趣的时候,用户的浏览行为是适用于古腾堡原则,但是当用户对页面是无兴趣的时候(例如搜索),按照尼尔森的研究表明,更多的时候会以“F”形浏览。)

弹窗设计

实操演练

设计一张广场动态的页面。

这是一张常见的动态发布页面,将评论与点赞的互动机制置于每一条动态容器的右下角,左下角的时间日期弱化,在整个页面来看,发布的核心功能置于页面的右下角。

社区动态列表设计
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,029评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,238评论 3 388
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,576评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,214评论 1 287
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,324评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,392评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,416评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,196评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,631评论 1 306
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,919评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,090评论 1 342
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,767评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,410评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,090评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,328评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,952评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,979评论 2 351