兰亭妙微UI设计公司，以美团、饿了么、大众点评为案例，分析外卖平台搜索功能的价值、类型与设计方法，提炼出打造优质搜索体验的核心要点。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
按钮设计的直觉性，源于物理按钮给我们留下的行为习惯。回顾历史，物理按钮正是现代UI组件的鼻祖。它们至今仍被大量使用，其魅力在于：即便用户不懂内部原理，只需轻轻一按，就能让设备运转起来。正如《Power Button》一书作者Rachel Plotnick所言，按钮文化塑造了我们今天下达数字指令的方式。
“你只需按下按钮，剩下的交给我们。”——柯达公司的这句经典广告语，精准捕捉了按钮对用户的吸引力：用最简单的触碰，换来即时的满足感。
即便触摸屏日益普及，物理按钮也并未消失。它所塑造的交互习惯，深刻影响着数字界面按钮的设计，成为衡量直观性与易用性的永恒参照。
按钮向用户传达“可操作”的信号，广泛出现在对话框、表单、工具栏等场景中。
链接：用于导航到另一个地方，如“查看全部”、“阅读更多”。
按钮：用于执行具体动作，如“提交”、“合并”、“创建”、“上传”。
每个按钮都应具备清晰、无干扰的视觉反馈。其交互状态需明确定义，以区别于周围布局：
正常：可交互的默认状态。
焦点：通过键盘（如Tab键）进入可编辑状态时的提示。
悬停：鼠标指针置于元素上方时（主要适用于桌面端）。
按下：表示用户正在点击该按钮。
加载中：操作未立即完成，向用户反馈任务正在进行。
禁用：当前不可交互，但未来可能启用。
圆角矩形按钮因其高识别度最为常见。样式的选择取决于用途、平台及设计规范。主流样式大致分为：
填充按钮（实心）：视觉权重最高。
描边按钮（线框）：视觉权重次之。
文本按钮：视觉权重最弱。
利用样式差异构建清晰的动作层级，在多个选项中引导用户。通常，最重要的操作使用“首要”按钮样式，其他操作则按重要程度递减。
可用性专家Steve Krug曾说：“别让我思考。”用户早已被各类电子产品“教育”，对按钮的外观和功能形成了固定认知。任何与“标准”的较大偏差，都可能造成困惑。
切勿对交互式元素（如按钮、链接）和非交互式元素（如纯文本标签）使用相同的颜色，否则用户会因不确定哪里可以点击而感到迷茫。
“一致性是最强大的可用性原则之一。当事物总是以相同方式表现时，用户就无需担心意外发生。”——雅各布·尼尔森（Jakob Nielsen）
一致性提升了操作的效率和准确性，减少了误操作。它创造了可预测性，帮助用户掌控流程。在定义主要、次要等按钮样式时，请确保颜色、形状等元素的一致，不仅在项目内部，也应尽量遵循平台的整体规范。
按下一个按钮应是轻松简单的操作。如果用户容易误触相邻元素，会带来糟糕的负面体验。
推荐尺寸：对于多数平台，触摸目标建议至少为 48x48dp。无论屏幕大小，其物理尺寸应约为9mm。触摸屏元件的目标尺寸至少应在7-10mm之间。
图标按钮：务必确保其可点击的热区大于图标的可视范围。这一原则不仅适用于移动设备和平板，也同样适用于鼠标操作的网页端。
所有组件都应遵循无障碍设计原则。除了目标区域大小，字体尺寸、色彩对比度也至关重要。有许多工具可以帮助检测组件的可访问性表现。
手势（如滑动、双击、长按）能提供触觉反馈并节省时间。然而，对于普通用户而言，许多手势并不直观。建议将复杂手势作为快捷操作留给高级用户，同时为普通用户保留明确的按钮操作入口。
按钮传达的文字信息与其外观同等重要。模糊的标签会让用户感到困惑甚至误导。
使用动词：好的标签能引导行动，就像按钮在主动询问用户：“要把这件商品加入购物车吗？” 或 “要确认订单吗？”
避免模糊词汇：应避免使用“是/否”或过于通用的“提交”等标签。
“确定”与“取消”谁在前？两种方式各有道理：
确定在前（如Windows）：符合自然的从左到右阅读顺序。
确定在后（如macOS）：促使用户在行动前先评估所有选项，有助于减少错误。
两种顺序都没有绝对的对错，也不会造成严重的可用性问题。选择哪种，取决于平台规范与具体场景。
你是否曾面对一个灰色按钮，停留数秒甚至数分钟，却不知如何是好？滥用“禁用”状态极易引发用户的挫败感。
建议：尽量避免使用禁用按钮。更好的做法是始终启用按钮。如果用户遗漏了必填信息，只需在相应空白字段下方给出明确提示，或高亮显示错误项即可。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
在 AI 时代做产品设计时，“人性化” 体验依旧是不变的主旨，核心目标是让设计回归用户本身，在合理应用新技术的同时，尊重用户的认知习惯、情感需求与行为差异，让 AI 产品既好用、又 “懂用户”。兰亭妙微UI设计公司会介绍以下三个设计策略和典型案例：
希望会为你带来更多的设计灵感。
基于用户的个体特征、行为数据、场景语境与目标偏好，提供“千人千面”的专属设计方案。核心在于将体验从“通用适配”转向“精准贴合”，从而提升用户的认同感、满意度与留存率。
案例1：ChatGPT推出年度回顾功能，将用户一整年的AI对话转化为可视化数据、AI人格画像与定制诗歌。
案例2：Gemini新增“使用历史对话作为上下文”功能，实现更连续、更具记忆感的多轮对话体验。
案例3：ChatGPT推出多维度人格参数调节滑块，通过档位化控制实现交互风格的精准适配，标志着AI对话系统从统一输出转向用户主导的个性化体验设计。
案例4：Google发布Android 16，利用AI重构通知系统，自动将广告、新闻推送等不重要通知静音并生成摘要，帮助用户保持专注。同时强化图标、主题与深色模式的个性化表达，用户可以自由调整图标形状，让桌面更贴合个人风格。
AI智能体能够调动其他产品进行互动，协调多个不同产品或设备，实现它们之间的交互与协同工作，从而为用户提供更便捷、高效、智能的服务体验。
案例1：Gemini Agent上线租车功能，支持自动比价、读取邮箱及租车服务预订，AI正逐步进入端到端的生活服务领域。
案例2：OpenAI与Instacart合作，将“买菜”功能接入ChatGPT。用户可在聊天中一边讨论菜谱，一边生成购物清单，并直接完成结账，全程无需跳转应用。
案例3：Cursor为Cursor Browser推出全新可视化编辑器，将网页、代码与视觉编辑工具整合在同一窗口，支持拖拽调整界面、直接查看组件属性与样式，并通过自然语言指令快速修改，自动同步至底层代码。
案例4：谷歌将虚拟试穿门槛降至只需一张自拍，借助Gemini Nano Banana生成全身模型，将AI从可选趣味功能升级为低门槛、便捷实用的购物入口，进一步将搜索与电商融合为一体化、内容驱动的消费场景。
案例5：谷歌推出Workspace Studio，将AI自动化直接嵌入Gmail、日历与文档，开始重构企业日常工作的操作层。
通过简化决策、减少手动操作、贴合用户认知习惯等方式，让不同能力层级的用户都能轻松享受AI服务带来的价值。
案例1：Gemini Veo3.1正在小范围测试“视频模板库”，用户可在工具菜单中选择或自定义模板快速生成视频，让“人人皆可做电影”成为可能。
案例2：灵光App上线可视化“科普动画生成”功能，将抽象科学原理自动转化为动态演示，让教育与科普内容从纯文字升级为“秒懂级”的可视化表达，巩固了其在学习场景中的差异化优势。
案例3：知名组件库shadcn推出shadcn create，提供可视化方式自定义基础组件的结构、间距、字体与风格，并支持一键在Next、Vite、TanStack Start中启动生成主题，大幅降低构建专属设计系统的门槛。
案例4：Manus推出Design View，从“反复对话生成”逐步迈向“所见即改”的创作流程。
案例5：Google在Android版Google News中加入AI播客功能，将新闻自动转化为可收听内容，拓展了通勤、碎片时间等场景下的新闻消费方式。
案例6：Grok iOS版新增多种语音唤醒模式（默认、隔离、按住说话），在不同环境下提升了语音交互的可控性，打磨出“随时可用但不打扰”的语音入口，为AI助手向高频、低负担使用场景渗透铺平道路。
案例7：亚马逊旗下AI智能家居助手Alexa Plus上线网页端入口，将原本以语音和音箱为核心的家居控制能力延伸到桌面与工作流中，使其成为更常用的日常AI助理。
技术的边界在不断拓宽，但设计的温度始终取决于我们对“人”的底层关怀。在AI浪潮中，工具形态会随算法不断进化，而用户对尊重、高效与情感连接的需求从未改变。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
随着互联网产品的不断发展，在生活和工作的方方面面都有非常多的产品普及，用户的选择性更多了。想要打动用户，就要拿出更优质的服务和差异化的产品，当产品和服务拉不开差距的时候，产品设计的体验感变得至关重要了。
为了提升用户体验度，做出有温度的设计才能打动用户，兰亭妙微UI设计公司相信这些案例可以带给你一些启发。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
人们认为设计师是表面工作——设计师拿着盒子说‘它看起来好！’这不是我认为好的设计。设计可不只是看起来或者摸起来的样子，设计考虑的是用它的感觉。 ——Steve Jobs 2003年11月30日《纽约时报》
在日常的 B 端产品调研支持过程中，我们研究员经常会遇到这样的场景：
“你们帮我看看，产品方案满不满足用户需求？功能符不符合用户预期？”
“（研发问）功能上线的 ROI 是多少？用户对这类功能是否有需求？解决了用户什么问题？”
“你们多找一些用户验证一下 demo 方案行不行…”
无论是产品同学，还是设计同学，相信大家或多或少都会在需求文档、设计文档评审时被业务方、研发问到方案可行性和落地价值等方面的“灵魂拷问”，而这些疑惑同时也在拷问我们研究员。那么作为研究员，我们是如何从用户的角度去辅助产品同学和设计同学进行敏捷的方案验证呢？
首先，我们先来了解什么是产品可用性测试？
可用性（Usability），被定义为一种用来衡量界面好用程度的属性。好用程度的高低一般取决于以下五个要素：
可用性测试主要用于验证产品的可用性，该方法能够帮助产品同学和设计同学了解在实际使用情境中该设计方案（概念或创意）的质量（评估是否可用/是否有效/用户是否满意），并在测试结果的基础上进行改进。
换句话说，可用性测试是观察有代表性的用户，让用户完成产品中的各项任务，了解用户如何使用产品，界定出可用性问题并解决这些问题，让业务、产品、设计、研发等上下游角色尽快对产品方案达成共识并积极优化产品体验。
通过可用性测试，我们可以：
那么，什么情况下可以做可用性测试？
在实际项目执行中，我们通常会在几个特定阶段去进行产品可用性测试，不同阶段采取的调研方式也有所不同，所关注的内容亦随之变化。
（1）设计初始阶段，我们通常会进行前期用户需求挖掘或相似产品使用情况分析，并基于需求概念设计出来的草图方案进行探索性可用性测试，来确定方案内容和功能的范围是否符合用户预期方向和使用需求，以此初步评估草图方案的有效性和可用性。因此，在该阶段，我们常以纸张原型测试+定性深访为主，先从认知上与用户保持一致，理解了用户，做出来的产品方案更能贴近用户诉求。
（2）灰度上线前，我们一般对 demo 终稿进行评估性可用性测试，向目标用户介绍新设计，同时尽可能保证 demo 稿是用户能够直观测试使用的，以此来确定 demo 在功能满足、信息布局、流程交互，甚至是视觉样式上是否能够提供良好的用户体验。所以，在该阶段我们更多会进行面对面测试+可用性测试量表（SUS 量表），一般在会议室等固定安静的环境中进行，并要求用户按既定任务测试操作，任务测试过程中不打断用户并观察记录用户在关键流程环节使用中遇到的问题，测试完成后向用户提出问题或进一步探究原因。
（3）灰度上线或全量上线后，我们通常会对上线后的新方案进行对比性可用性测试，通过灰度方式在同一时间维度下比较新方案和原方案的可用性反馈和用户满意度，确保方案在全量上线之前修复任何潜在问题。因此，在该阶段我们以 A/B 测试+场景化调研问卷（如下图所示）为主，通过用户体验数据和业务数据来评估出最优版本。
实际执行中，我们怎么做可用性测试？主要实施步骤有：
可用性测试的基础是任务，任务测试内容的好坏是能够对测试结果的准确性有直接影响的。因此在招募用户之前，需要对测试的产品方案进行任务设计。比如，测试商家在 B 端营销系统报名营销活动流程方案的任务可以是：报名一场双 11 大促活动。
在设计比较合适的测试任务时需要注意以下几点：
在招募用户环节，最重要的是样本数量的确定。在实际的可用性测试中，我们常常被产品同学或设计同学问到：
“6 个用户提出的问题能代表全部么？”
“几个用户是不是太少了？他们提出的问题是可靠么？”
诸如此类的样本数量“挑战”，不胜枚举。人机交互博士 Jakob Nielsen 曾提出：“有 5 个人参加的用户测试，即可发现大多数（85%）的产品可用性问题。” Nielsen 这张经典图表（如下图）告诉我们答案：一般最严重的问题都是前几名用户发现的，随着用户数量增多，发现问题逐渐减少。
当然在实际执行中也会存在一些局限性，比如只能发现问题数量，但无法确定发现问题的严重程度，因此还是需要从实际情况比如测试任务的复杂程度、人力资源的投入程度等等来确定招募样本数量。
试点前测的目的是针对整个测试流程和提纲进行测试，便于前置发现流程和提纲中存在的问题，及时优化，避免造成真实测试用户的资源浪费。试点前测需要注意：
在观察测试中，需要检查用户任务目标和心理认知是否可以顺利执行下一步操作，以此来发现可用性问题，因此我们要对以下问题做到心中有数：
在事后访谈中，有以下几点小小访谈 tips：
一般情况下，可用性报告的内容主要包含以下三方面：
好的产品设计应当满足以下特征：可用性、易用性、好用性且具有吸引力。每个特征都是为了能让产品站稳脚跟而存在的，倘若想要让产品功能最终具备这些特征属性，就离不开产品可用性测试的过程。
而且一个产品设计方案在没有经过用户验证的情况下，容易在实际上线使用后出现一些隐性风险。而前置的设计验证，在一定程度上可以辅助我们产品功能在上线前发现问题，改进设计。
以上，共勉~希望能对大家有所启发。
转载：优设
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
竞品分析作为日常工作中常用的基础能力，在 C 端和 B 端两种截然不同的产品形态下需要面对的难点也是不尽相同的。那么作为面向企业、公司的 B 端产品，在做竞品分析时的流程以及侧重方向上都有哪些特点呢？兰亭妙微UI设计公司将从产品差异等几个方向为大家分享一下自己的思考和总结，以期能够提供参考和建议。
“竞品分析”我们从字面上理解，就是对现有的以及潜在的竞争产品的优劣进行分析和总结。用以了解市场行情及自身产品的定位，发现新的市场机会，探索产品迭代的有效策略。在正式介绍 B 端竞品分析的经验和思路之前，想先简单介绍一下 C 端产品和 B 端产品的差异点，也能更好的理解 B 端产品的特性。
| 对比维度 | B 端产品 | C 端产品 |
|---|---|---|
| 用户 | 企业客户、组织角色（管理者 / 员工） | 海量个人用户 |
| 场景 | 办公场景、工作流程、时间固定 | 生活场景、碎片化、强私人属性 |
| 设计 | 重流程、效率、稳定性 | 重体验、细节、拉新留存 |
| 竞品 | 公开度低、同质化低、难体验 | 公开易找、同质化高、易体验 |
| 盈利 | 定制化报价、按年 / 模块收费 | 明码标价、会员 / 广告 / 电商 |
定目标 → 2. 搭框架 → 3. 找竞品 → 4. 巧体验 → 5. 对比分析 → 6. 输出结论与迭代建议
转载：优设
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
“在设计的道路上，若暂时看不清远方，不妨先俯身夯实脚下。兰亭妙微坚信，真正的专业并非灵光一闪的偶然，而是源于严谨知识体系的必然。我们主张让每一个像素的落点都有理可依，让每一次交互的流转都有据可引。只有用逻辑筑起设计的基石，才能让作品在纷繁的视觉中站得稳、立得住，让人不仅看见美，更能看见背后的价值。”
古腾堡原则是由14世纪西方活字印刷术发明人约翰·古腾堡提出，早在20世纪50年代在设计报纸的过程中，提出了一项原则，认为人的阅读方式应该是遵循某种习惯进行的，像读书一样，由左到右，从上到下。
经过研究，他最终得出了被后人熟知的「古腾堡原则」，古腾堡你可能觉得既难懂还陌生，它还有另外一个名字：对角线平衡法则。
这个原则的支撑点为「阅读重心」，由人们一直以来的阅读习惯形成。将页面的设计与阅读的重心相协调，能帮助读者梳理阅读的逻辑。据研究发现，这么做能提高读者阅读的节奏和理解能力。
古腾堡原则指人的阅读方式遵循从左到右的眼动规律，且画面显示的东西都分成四个象限：
1、第一视觉区（Primary Optical Area）：处于左上方，读者首先注意到的位置。
无论用户在搜索内容、主动阅读或者快速浏览，这都是用户阅读的第一落点区域。因此在这个区域我们应放置一级内容或者核心功能。
2、最终视觉区（Final Optical Area）：处于右下方，视觉流程的终点。
这个区域是用户浏览行为的最终落点区域，当用户浏览到这个部分时需要采取措施，我们可以在这里插入按钮或者行动点。这也就能解释为什么按钮都会在右下角出现。当用户的浏览行为结束后，可以进行操作反馈。
3、强休息区（Strong Follow Area）：处于右上方，较少被注意到。
在这个阶段，我们不应该去设置一个重要的行动点，一方面用户容易忽视，另一方面，当用户浏览完中心区域的内容后，再返回到强休息区操作，视线会有个折回过程，用户体验并不太理想。
4、弱休息区（Weak Follow Area）：处于左下方，最少被注意到。
用户对这块的注意程度最弱，因此也用来放置最弱的信息提示。
遵循古腾堡法则，界面中的左上和右下是用户视觉最为重点关注的位置，设计师应该把界面的关键元素放在主视区，最终视觉区可以放按钮，休息区可以用来放一些相对次要的内容，如辅助图形、文字信息。
比如我们常用的页面弹窗、各种文件和合同文件等等就是采用这种原则进行设计的。
我们可以根据一般的用户视觉习惯，来放信息权重不同的内容。
第一视觉区是用户浏览网页的起始点，最终视觉区是结束离开网页的终点。整体是根据人们从上到下、从左至右有规律的阅读习惯设计的。
我们可以看到人人都是产品经理网站信息结构的布局
1、根据起点第一视觉区的特性把LOGO和导航放在左上角，推荐的文章也以图片的形式放在这里进行曝光；
2、弱休息区则放一些最新推荐的文章，吸引用户不断往下翻；
3、高闲置区则放文章内容之外的惊喜推送内容；
4、最终视觉区则是提供给用户相关推荐课程或者想要加入的社区入口，也是常见的放置广告的地方。
古腾堡图表应用最典型的例子就是商品详情页，在界面的顶部展示商品图片、名称、价格、快递和优惠等用户主要关心的信息；右上和左下通常是分享、客服和收藏等次要信息；右下角则放置最终促成用户交易的购买按钮。
结合古腾堡的视线强弱分析，我们可以得知左侧的首要视觉点一定是强视觉区，但是有时候简单的图片+文字的排列也会有很多设计思考。
比如：第一个图今日头条的布局，光看它的配图我们根本猜不出来整体条目所表达的内容，所以头条的图片元素传达信息的效率远不如文字，所以第一视觉区会留给文字信息；
而第二图中美团列表也图片所传达的信息效率更直观，会一眼告诉用户我这家是西餐还是中餐，是早点还是正餐，所以在美团的条目中图片会被放在第一视觉区。
这两种布局的目的都是让用户可以快速浏览，不让用户在接收信息时受阻造成体验打断。
此处还可以延伸一下，如上图第三个图，头条的视频条目也是先文字后视频，为什么呢？
按理说视频的传达信息效率要远大于配图，猜想一下，头条的设计是想将视频作为终端休息区进行视觉强化，第一，可以强化信息种类的分类让用户更好辨识，第二，让视频条目传达信息效率更快且满足整体使用APP时一致性的用户心智，让用户能快速上手并且顺畅体验浏览。
我们还可以依据古腾堡原则来解读关于按钮位置背后所呈现的设计思路。
我们都知道引导用户操作的页面中，一般页面按钮都在界面底部是因为离手近，方便操作，但不仅仅如此还因为浏览是用户的第一行为，他们的视线会根据页面元素进行移动，最终停留在底部结尾的地方。
根据古腾堡原则，将标题和内容放在顶部即第一视觉区，引导用户浏览所有内容后注意到底部的按钮作为终端休息区，这样的摆放即符合用户由上到下的阅读习惯又达到了产品预期的目标。
按钮的水平布局和垂直布局：
垂直布局下，用户浏览时的眼动路径单纯向下，这种由上自下的浏览效率是最高的。
水平布局时，用户由左至右的浏览效率要明显低于垂直布局，但也同时避免了垂直布局下过快的决策造成风险。
这和表单布局方向类似，那些想要让用户快速浏览并完成的表单往往采用了垂直布局，而需要用户仔细阅读、认真填写的表单往往使用了水平布局。
如果产品希望用户对每个按钮都有足够的关注度，垂直摆放是最佳选择，且【重要按钮应该放在页面最底部】，虽然垂直双按钮在样式上做了区分，但用户同样会停留一段时间将按钮的内容进行对比思考。
那么，按照古腾堡原则，重要的按钮应该放在页面最底部，但是现实我们看到的垂直摆放按钮的主次反而是相反的，主要的CTA 按钮往往被放置在了上方？
观察上图，有没有发现浅色按钮很容易被忽略掉，这样就违背了产品要保证每一个按钮都要有足够关注度的目的，所以我们要违背古腾堡原则来满足业务需求，正如我们所看到的微信授权页面一样。
为了保证「允许」与「拒绝」这两个独立的按钮能够被用户足够的重视，并且其中的任意一个按钮不会被轻易的忽略掉，这里将「允许」按钮颜色加重设定为主按钮，并且放在「拒绝」按钮之上，让眼睛原本垂直向下的运动轨迹产生回流的变化。
“拒绝”按钮能让用户注意到，这样便起到了防错性，缺点是会对用户造成流程上较强的打断性，适用于需要用户思虑、审核信息的场景。
所以，这也提示我在设计中要思考：设计原则虽是设计的基础，并非一成不变，要合理权衡设计原则与产品目标之间的关系。
水平摆放的按钮，最典型的就是电商类型的详情页，【加入购物车】和【立即购买】按钮。
结合古腾堡原则的视觉重点说明，右下角视为视觉终端区域，即视觉最终停留的位置，所以他们将与转化率相关的【立即购买】按钮放在了界面的右下角，让用户更容易关注到。
再比如：比较常见的「确认」和「取消」弹窗样式，通常是在需要让用户确认某种操作行为时出现，有可能是提交表单、确定信息、页面操作引导等等，目的是让用户最快地看到主要操作内容，为用户提高操作效率。
这些按钮的差异不仅仅是位置，还包含按钮的样式、颜色、尺寸等等维度都存在着明显差异。比如上图的，页面引导按钮，支付宝的转入转出按钮位置，都是一样的逻辑，也是我们在设计中的一些设计支持业务转化的一种方式。
为什么要这样设定水平按钮主次关系？
平常我们所看到的弹窗，推荐按钮都是在右侧，那么将推荐按钮放在左侧会怎么样？如下图所示：
当我们在设计表单中的组合按钮时，比如：取消与确认、提现与充值。根据古腾堡法则，用户使用界面时从第一视觉落点区是主视觉区(Primary Optical Area)，最终停留在结尾的终点区(Terminal Area)。
不难看出推荐按钮放在右侧后，眼睛的运动轨迹会在水平方向轴上来回的往复运动，无形中增加了用户选择时长。
水平多按钮同样存在着反面应用
当业务需求需要用户产生视觉回流，或者想要让用户习惯性的点击右下角终点位置，比如常见的卸载软件提示弹窗。
相比横排按钮，用户点击主操作按钮时会更加顺畅，有利于业务的转化，对于用户体验流程的打断也会比竖向按钮相对弱些，适用于能帮助用户快速完成流程的场景，具体使用哪种布局要权衡体验、用户与业务目标之间的统筹关系。
根据古腾堡原则，右上角区域属于强休息区，用户对这块的注意程度最低。
既然如此，为什么页面的“发布”、“编辑”等按钮都在右上角呢？
顶部按钮的设计，关键还在于可编辑内容区域，而不是按钮本身，顶部按钮更适用于「编辑页面」，顶部按钮尺寸较小，它所占空间有限，因此在操作上相对来说不便于点击，需要用户谨慎操作。
而底部按钮的核心在于按钮本身，而不是内容。底部按钮更适合全局最终的确定，提交等操作按钮。
1、虽然古腾堡图所揭示的阅读规律是普遍适用的，但是只在信息均匀分布的页面证明古腾堡原则的阅读规律。
若是为了突破常规或达到一种强烈的冲击，古登堡图所揭示的视觉规律经常被设计师所颠覆。常用的颠覆方法为采用特别醒目的形象，或者大小颜色更为鲜明抢眼的元素置于闲置区，从而改变玩家的阅读顺序。
上图banner中，右侧的3D内容第一吸引用户眼球，而后才会看到左边的文字，视觉流程如红色箭头，这就是突破古腾堡常规设计原则的常见设计。
2、语言本身的阅读顺序可能也会产生一定的影响，例如阿拉伯语从右至左的文字顺序可能并不符合古腾堡原则的阅读规律。
3、用户已熟悉，并养成独特阅读习惯的页面也不一定遵循此规律，比如用户自动跳过轮播广告的【轮播图盲视区】现象。
古腾堡图贯穿于界面设计的每个角落，只要谨记阅读引力的顺序：从上到下，从左到右，综合阅读流来排布视觉层级，即能做出合理的设计。
但设计师也不能局限于古腾堡图的规律中，要善用规律并结合其他设计知识做出更加完美的设计。
应用建议：
转载：人人都是产品经理
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
蓝蓝设计的小编 http://www.lanlanwork.com