用户体验技巧 by Jim Raptis
筛选与用户体验相关的 UI 设计案例和建议。
查看详情 社交登录
社交登录能让用户更轻松地加入平台, 从而提升转化。 建议把社交登录放在表单上方, 将邮箱密码登录放在下方。重视隐私的用户可能不愿使用社交登录, 因此最好同时提供传统登录方式。
查看详情 古腾堡原则
古腾堡原则, 也叫 Z 型布局, 认为用户视线会从左上沿 Z 字形移动到右下。 把 CTA 放在这条视线流的末端, 可以更自然地引导用户采取行动。
查看详情 删除弹窗
按钮文案要结合上下文, 避免使用 Yes / No 这类模糊表达。 直接写清楚按钮会执行什么操作, 让用户在确认前就知道后果。
查看详情 弱化危险操作
删除等危险或不可逆操作应该是次要动作, 不要抢走默认操作的注意力。 可以同时使用颜色、尺寸、字重和位置等多个特征来降低它的视觉优先级。
查看详情 首屏一定要有 CTA
很多访客不会继续滚动页面, 所以首屏必须提供明确的行动按钮。 让用户无需寻找下一步, 就能立即开始体验或完成转化。
查看详情 打造清晰的页头
页头应该先把注意力放在标题上, 再引导用户阅读清晰的描述。 可以使用更重的标题字重、稳定的字号比例、较低对比度的副标题、合适的行高和左对齐来建立层级。
查看详情 删除前先确认
不要让用户在没有确认的情况下删除内容。误触和永久丢失会给产品留下糟糕记忆。 可以使用内联确认、弹窗确认或撤销功能, 为不可逆操作增加一道保护。
查看详情 空状态提供模板
不要把用户丢回空白页面从零开始。 使用预制模板让用户更快体验产品价值, 同时提高激活和采用率。
查看详情 提前告知用户
不要让用户猜下一步会发生什么。明确按钮含义和后果, 能减少犹豫与转化损失。 像 Reserve 这样的强烈词语可能让用户担心是否会立即扣费, 文案应该主动消除这种不确定性。
查看详情 清晰区分选中项
选中状态要做到一眼可见。改变背景色是简单且易访问的方式。 必要时再叠加边框、图标或文字, 让用户快速判断哪些元素已经被选中。
查看详情 把链接做成更好的按钮
链接同样需要被认真设计。对于不在页头、页脚或文章正文里的链接, 传统按钮往往更有效。 使用可行动的文案, 暗示点击后会发生什么, 不要让用户猜。
查看详情 保持按钮一致
按钮的样式和文案要贯穿整个界面, 尤其是首屏区域。 在大多数情况下, 首屏只需要一个主 CTA, 不要用多个不同按钮分散用户注意力。
查看详情 用视觉引导注意力
人们会跟随他人的视线。利用人物视线或方向性视觉, 引导用户关注指定元素或继续向下滚动。
查看详情 提示用户继续滚动
当首屏内容不足以说明产品价值时, 露出下一段内容的一部分。 用户会知道页面还有更多信息, 也更容易产生继续探索的好奇心。
查看详情 突出最佳方案
用颜色、尺寸、阴影等多个设计手段突出最值得推荐的套餐。 这样可以帮助用户快速识别最常用的方案, 同时推动他们选择你的重点产品。
查看详情 避免通栏段落
过长的文字行会让用户疲劳, 也会降低阅读性。 把正文行宽限制在约 500-700px, 或使用 ch 单位控制每行字符数。
查看详情 让卡片看起来可点击
很多卡片没有明确告诉用户它们可以点击, 只依赖悬停效果或用户经验。 加入清晰的 CTA 按钮和动作文案, 不要把关键行为留给用户想象。
查看详情 让输入框自解释
placeholder 和输入类型是提升输入框体验的两件利器。 用 placeholder 引导用户而不是重复标签, 并用预设值限制错误输入来源, 例如自动提供国家代码。
查看详情 选择正确的控件
让用户用最简单的控件输入信息。选择合适的 UI 元素, 对提升体验非常重要。 例如整数数量适合使用步进器而不是通用文本框; 电商购物车里的加减按钮会让输入更快。
查看详情 强化视觉层级
视觉层级能提升体验并引导注意力。第一优先级应该是突出主 CTA。 同时保证文字可读, 让标签和按钮等不同元素明显区分, 再用字重、字号和行高调整视觉注意力。
查看详情 让 Tooltip 适配移动端
经典 Tooltip 依靠鼠标悬停, 在桌面端效果很好。 移动设备没有 hover, 因此可以在按钮旁放置可点击的帮助图标, 点击后显示补充说明。
查看详情 谨慎选择图表类型
折线图看起来更时髦, 但并不适合每种情况。横轴选项有限时, 柱状图通常更准确。 折线图可能暗示不存在的中间值, 让月度总量看起来像每天都有真实数据。
查看详情 图标要配标签
图标可能因为经验和文化差异被误解。 在图标旁增加简短文字标签, 能提升可访问性, 尤其适用于没有 hover 的移动端界面。
查看详情 视觉区分元素
用独特的形状、颜色、文案和图标区分界面元素, 让视觉层级更清楚。 最好组合使用多种线索, 而不是只依靠颜色, 这样也能避免色觉障碍带来的识别问题。
查看详情 巧用标签 2
带有预设值的颜色选择器可以灵活使用标签。根据应用场景, 有时可以省略标签。 但要考虑色盲用户, 他们可能无法只靠颜色识别选项。
查看详情 巧用标签 1
用视觉表示补充链接文案, 让用户看到所选值最终会是什么样子。 这种技巧并不总能使用, 但遇到合适的机会时, 值得把它做到底。
查看详情 把快捷键放在动作旁
键盘快捷键能提升效率并节省熟练用户的时间, 但它们往往很难记住。 把快捷键放在动作按钮旁, 用户就不必依赖记忆寻找下一步。
查看详情 用户讨厌意外
只要调整一句 UX 文案, 就能避免误解并改善产品体验。 任何让用户猜测按钮后果的小细节, 都可能制造大量摩擦。提前说清楚, 用户会更安心。
查看详情 优先考虑体验
为了提高转化而把高频操作放在拇指容易触达的位置, 可能带来更多误触。 短期多一个客户, 不应该以大量被打扰的用户为代价。十个恼火的用户远比一个额外转化更糟。
查看详情 用小技巧强化层级
降低次要信息的不透明度, 用粗体强调重点, 按固定比例放大标题, 并将相关元素放在一起。 对于从左到右阅读的语言, 左对齐通常更利于建立清晰的视觉路径。
查看详情 用留白分隔元素
菜单分组优先使用留白, 能让界面更干净并降低认知负担。 分隔线不是越多越好: 可以只在大组之间使用, 或完全用留白完成分组。