1、信息分类
相关联信息需要进行归类，我们日常无论是浏览新闻类还是商品类产品，习惯都是阅读标题后直接阅读内容，能够更加沉浸。

左侧为什么错？
从信息逻辑维度看，标题与说明文字本应形成紧密关联的内容整体，若在两者之间强行插入按钮，会直接割裂文字信息的连贯性，破坏内容的自然流转。从用户体验维度而言，酒店标题作为吸引用户深度阅读的核心聚焦点，其核心价值在于通过强化利益点的内容设计引导用户产生预约购买意愿。此时贸然添加按钮，不仅会拉长用户的阅读路径，导致关键信息无法被快速捕捉，降低信息获取效率；更会打断两段关联文字的浏览节奏，引发用户的短暂认知疑惑，最终削弱整体阅读体验的流畅性。

建议正确做法～～   
在任何类型的产品模块设计中，信息分层都是核心原则之一。当两段内容元素存在内在关联时，需将其整合为连贯的信息整体呈现给用户，避免人为割裂内容逻辑。这一设计思路恰好呼应了格式塔心理学中的视觉组织原理：通过接近原则让关联内容在空间上保持紧凑，借助相似原则强化同类元素的视觉统一性，依托共同命运原则确保相关内容在交互中保持一致的呈现逻辑 —— 以此让用户能直观感知内容间的关联性，提升信息理解效率与整体体验的流畅度。


实际产品中的应用


2、层级区分
两个独立的且不相关的元素，需要进行视觉区分

左侧为什么错？
在页面设计中，“新人尊享” 标签与 “立即上车” 按钮的颜色存在明显冲突 —— 这种视觉上的相似性容易让用户产生认知混淆：用户会自然困惑这两个元素是否均为可交互按钮。而当点击 “新人尊享” 标签却未获得任何反馈时，这种预期与实际体验的落差会直接造成操作困惑，不仅打断用户的浏览节奏，更会削弱对产品交互逻辑的信任感，最终影响整体用户体验的流畅度。

建议正确做法～

在设计过程中，需针对不同信息维度进行清晰的视觉区隔。以具体场景为例：“新人尊享” 作为标签类元素，其核心功能是传递信息提示，强化内容属性；而 “立即上车” 作为按钮类元素，本质是引导用户完成下一步操作，承载交互价值。

因此，面对类似的设计需求时，必须对不同维度的信息元素进行差异化处理 —— 通过视觉语言的精准表达实现 “所看即所得”：让用户能直观区分元素的功能属性，既清晰传递内容本身的含义，又避免因视觉混淆导致的操作误解，从而在保障信息传递效率的同时，守住用户体验的流畅性。

实际产品中的应用


3、突出热区
当模块具有按钮、文字链、图片入口等需要下一步操作的关键元素，需要进行高亮显示，以此帮助用户快速定位目标。

左侧为什么错？
图中 “查看主页” 入口采用灰色字体设计，尽管通过下划线强化了交互属性，但整体视觉识别度仍显不足。在信息密度较高的复杂页面中，这种弱化的视觉表现会导致用户在需要执行下一步操作时，难以快速定位到该入口 —— 这种 “寻找成本” 的增加，不仅直接降低了用户的操作选择效率，更可能因关键入口的识别障碍，影响用户对核心功能的使用意愿。

建议正确做法～～
无论是在整体页面还是局部模块中，当需要引导用户执行下一步操作时，对关键入口进行视觉高亮处理都是高效的设计策略。以右图的个人信息模块为例，“查看主页” 入口通过文字高亮结合下划线的设计，既借助颜色对比让用户能快速锁定操作入口，又保持了文字的自然呈现形态，不干扰正常阅读节奏。这种处理方式远优于色块按钮的突出形式 —— 若采用色块按钮，不仅会让模块布局显得冗余繁杂，更会因视觉重量过强而 “喧宾夺主”，破坏整体设计的平衡感与信息层级的清晰度。


实际产品中的应用


4、图标表意明确 
设计中经常会遇到图标相关设计，无论是通用图标还是金刚区、百宝箱图标，我们都需要注意图标的表意是否匹配功能。

左侧为什么错？
观察左侧图片不难发现：若去除文字仅保留图标，用户根本无法清晰理解功能的实际作用。核心问题在于图标设计与功能本身存在明显的匹配偏差 —— 这种视觉符号与功能含义的错位，会在用户使用过程中造成严重的认知歧义，不仅增加操作试错成本，更会因功能识别的不确定性让用户产生使用顾虑，最终削弱对产品的信任感与安全感。

建议正确做法～～
如右图中，我们在设计新的图标时只需要进行稍微注意下，就能够解决图标表意的问题，在认知层面解决用户的困惑，降低认知障碍。


实际产品中的应用


5、状态可见性
当产品需要用户完成多步骤任务时，清晰展示系统进度至关重要 —— 这能让用户实时感知自己的操作在整体流程中所处的位置，避免因信息模糊产生迷茫感。

以房屋装修信息填写流程为例（见下图），用户在面对这类多环节任务时，耐心本就容易因未知流程长度而消耗。此时通过设计添加系统状态进度条，实时提示当前所处节点，便能有效缓解用户的操作焦虑。这种设计逻辑同样适用于注册登录、信息完善等多步骤场景，其核心价值在于让用户对交互过程形成明确预期，通过 “可知可控” 的体验设计，减少操作不确定性，最终提升整体用户体验的流畅度与满意度。

实际产品中的应用


6、轻量投影
在 UI 设计中，阴影的核心价值体现在两大维度：一是通过视觉层次感的塑造实现信息层级的清晰区分，二是作为装饰元素提升界面的视觉质感。如同现实世界中大楼、植物、人物等物体自然形成的阴影是生活场景的有机组成部分，UI 设计中的阴影也应成为界面元素的 “隐性配角”—— 需根据模块的层级关系与视觉需求适度运用。

但设计中必须警惕阴影的过度使用：现实里的阴影从不会刻意抢夺视觉焦点，界面中的阴影同样不应成为用户关注的重心。过度叠加或夸张的阴影会打破界面的平衡感，甚至干扰信息的正常传递，反而背离了阴影服务于层级区分与质感提升的本质目的。因此，阴影的运用需以 “自然融入、恰到好处” 为原则，让其在增强界面表现力的同时，不喧宾夺主。

左侧为什么错？
我们看左图中的阴影，在这个房屋出租表单选择模块中阴影是用来告知用户已选择该表单，给一个视觉强提示，但在图中，阴影的范围以及深度都是用过度，在页面中不仅会喧宾夺主，还会影响基础的美观度。

建议正确做法～～
如右图中，在模块中若该元素已经有状态提示且需要阴影作为辅助进行突出，在设计时需要避免大面积深度阴影，使用轻量阴影即可起到辅助提示作用，既保证了页面美观，也不会影响使用。


实际产品中的应用


7、Z形阅读
z形原理也被称为“古腾堡原理”描述了在查看元素均分的设计时眼睛的运动规律，根据这个原理验证用户的眼睛从左上角到右下角以“Z”运动轨迹浏览内容。

更适合网页
Z形阅读习惯作为符合用户视觉流动规律的设计逻辑，更适用于大面积可视区域的信息排布 —— 其核心在于顺应用户的自然浏览路径，将关键信息精准锚定在视觉焦点上，实现高效传递。这种布局逻辑在网页设计中尤为常见，而在以大面积文字为主体的新闻类产品中，应用价值更为突出：由于文字内容密度较高，需借助图片的视觉吸引力引导用户聚焦特定模块，此时便可依据Z形浏览的路径节点，在对应的视觉停留点放置图片，让图片既成为打破文字单调感的视觉调剂，又能自然承接用户的浏览节奏，提升信息获取的流畅度与重点内容的触达效率。

建议正确做法～～
我们在设计内容复杂的网页时，建议根据产品诉求和用户目标，合理的放置元素，以此来达到目标，另一方面根据z形浏览顺序，可以让用户不会产生视觉疲惫，每个视觉点停顿时看到元素都是不同，提升用户体验。


实际产品中的应用


8、合理的字体加粗
在设计大面积文字排版时，应当注意字体粗细，它决定着我们的设计是否易读性高。

左侧为什么错？
左图中可以看到，无论是标题还是内容字体重量都很轻，基本的识别度已经快缺失了，而且正文内容通常都是成百上千字，长时间阅读这种纤细的字体很容易出现视觉疲劳。

建议正确做法～～
在设计UI界面中，无论是长文字体还是模块元素字体，我们都要注意字体的重量，要具备基本的识别度，保证用户在阅读时不会出现困难。


实际产品中的应用


9、刻意减少行高
行高并不是越大越好，在设计文本段落时，有时候刻意减少行高，能够使易读性更加高。

左侧为什么错？
我们可以看到，左图中标题行高过于大，与正文的间距层级出现了明显的割裂，用户阅读时从第一行到第二行的眼球跳动时间会变得更加大，所耗费时间更加长，我们自己感受下左图的阅读，是不是会发现有明显的疲惫感。

建议正确做法～～
与正文的处理方法相反，在长文本段落时，我们会刻意增加正文的行高，那是因为正文通常文字非常多，并且上下段落都很紧密，需要我们通过增加间距来提升阅读空间感，而标题内容正常偏短，因此可以提升标题的紧凑感来增加阅读效率，例如正文行高1.5倍，标题行高可以使用1.3倍，具体可以根据产品规范进行调整。


实际产品中的应用


10、面包屑导航的定位
在网页中经常会遇到面包屑导航，用户可以通过点击面包屑导航直达其他页面，因此我们需要注意面包屑导航的层级状态。

为什么错？
首先左图中当前界面的状态使用了置灰处理，这就会出现一个问题，用户无法清晰的查看当前所处位置，认知层面来说，一般在网页中导航区域灰色是可以点击的，而图中把可点击的状态用在当前位置，会产生操作上的误解，影响用户体验。

建议正确做法～～
在设计网页面包屑导航时，建议用户当前位置使用高亮处理，当用户想进行导航切换时第一时间能够注意到当前所处位置，避免误操作，而其他导航入口可以使用灰度或者其他弱化方式处理，告知用户其他页面可以通过此处跳转，降低用户思考时间，提升体验。


实际产品中的应用


总结
在 UI 设计中，需围绕信息传递效率与用户体验流畅性，把握十大核心设计原则：信息分类上，关联内容应整合为整体呈现，避免插入无关元素割裂逻辑，契合格式塔视觉组织原理；层级区分时，需通过视觉差异明确标签与交互按钮等不同维度元素的属性，实现 “所看即所得”；突出热区需对关键操作入口进行适度高亮，既便于用户快速定位，又不破坏整体平衡；图标设计要确保表意与功能精准匹配，减少认知歧义与试错成本；多步骤任务中需展示清晰的进度状态，让用户感知操作位置，缓解焦虑；阴影运用以轻量适度为原则，服务于层级区分与质感提升，避免过度使用喧宾夺主；大面积内容布局可遵循 Z 形阅读规律，在视觉焦点处合理放置元素，提升信息触达效率；字体加粗需保证基础识别度，避免纤细字体导致的阅读疲劳；行高设置需因内容类型调整，标题紧凑化、正文留白化以优化阅读节奏；面包屑导航应通过高亮当前位置、弱化其他入口，明确层级状态，降低用户定位成本。这些原则从信息逻辑、视觉呈现、交互体验等多维度发力，最终实现信息高效传递、操作流畅无惑的优质 UI 体验。