界面技巧 by Jim Raptis
筛选与界面相关的 UI 设计案例和建议。
查看详情 设计更好的菜单
菜单经常存在可读性问题。为每个操作配一个图标, 用户无需读完所有文案也能快速识别动作。 如果菜单有当前页面或当前标签, 还要用清晰的选中状态突出它。
查看详情 对齐不等宽元素
元素尺寸不一时, 即使间距完全相同, 视觉上也可能不齐。 取最大元素的宽度并应用到其他元素上, 结果会更稳定。
查看详情 如何对齐不等高元素
对齐尺寸不一的元素时, 即使间距一样, 视觉结果仍可能显得奇怪。 一个快速修复方法是统一所有元素的宽度, 直接采用最大元素的宽度。
查看详情 弱化危险操作
删除等危险或不可逆操作应该是次要动作, 不要抢走默认操作的注意力。 可以同时使用颜色、尺寸、字重和位置等多个特征来降低它的视觉优先级。
查看详情 打造清晰的页头
页头应该先把注意力放在标题上, 再引导用户阅读清晰的描述。 可以使用更重的标题字重、稳定的字号比例、较低对比度的副标题、合适的行高和左对齐来建立层级。
查看详情 透明头像的兜底方案 1
透明 PNG 头像可能破坏界面的一致性。 给头像加上与应用背景同色的细边框和底色, 可以稳定不同头像素材的显示效果。
查看详情 透明头像的兜底方案 2
另一种保持透明头像一致性的方式, 是加一圈与背景同色的边框。 边框既像背景的一部分, 又能让头像和封面区域清楚分开。
查看详情 统一圆角
圆形图片放进小圆角卡片时容易显得突兀。 可以遵循一个简单规则: 外层圆角约等于内层圆角的两倍。精确公式还要考虑两层边框之间的间距, 但这个经验值足够实用。
查看详情 正确使用品牌色
品牌色是界面的核心元素之一, 但最常见的错误就是使用过量。 只用主色强调最重要的元素, 其他区域使用主色的明暗变化, 让层级更清楚。
查看详情 清晰区分选中项
选中状态要做到一眼可见。改变背景色是简单且易访问的方式。 必要时再叠加边框、图标或文字, 让用户快速判断哪些元素已经被选中。
查看详情 把链接做成更好的按钮
链接同样需要被认真设计。对于不在页头、页脚或文章正文里的链接, 传统按钮往往更有效。 使用可行动的文案, 暗示点击后会发生什么, 不要让用户猜。
查看详情 保持按钮一致
按钮的样式和文案要贯穿整个界面, 尤其是首屏区域。 在大多数情况下, 首屏只需要一个主 CTA, 不要用多个不同按钮分散用户注意力。
查看详情 突出最佳方案
用颜色、尺寸、阴影等多个设计手段突出最值得推荐的套餐。 这样可以帮助用户快速识别最常用的方案, 同时推动他们选择你的重点产品。
查看详情 避免通栏段落
过长的文字行会让用户疲劳, 也会降低阅读性。 把正文行宽限制在约 500-700px, 或使用 ch 单位控制每行字符数。
查看详情 让卡片看起来可点击
很多卡片没有明确告诉用户它们可以点击, 只依赖悬停效果或用户经验。 加入清晰的 CTA 按钮和动作文案, 不要把关键行为留给用户想象。
查看详情 让输入框自解释
placeholder 和输入类型是提升输入框体验的两件利器。 用 placeholder 引导用户而不是重复标签, 并用预设值限制错误输入来源, 例如自动提供国家代码。
查看详情 选择正确的控件
让用户用最简单的控件输入信息。选择合适的 UI 元素, 对提升体验非常重要。 例如整数数量适合使用步进器而不是通用文本框; 电商购物车里的加减按钮会让输入更快。
查看详情 强化视觉层级
视觉层级能提升体验并引导注意力。第一优先级应该是突出主 CTA。 同时保证文字可读, 让标签和按钮等不同元素明显区分, 再用字重、字号和行高调整视觉注意力。
查看详情 谨慎选择图表类型
折线图看起来更时髦, 但并不适合每种情况。横轴选项有限时, 柱状图通常更准确。 折线图可能暗示不存在的中间值, 让月度总量看起来像每天都有真实数据。
查看详情 圆角卡片的内边距
卡片四周使用相同内边距, 视觉结果却可能不平衡。 当边缘元素不是圆形图标而是文字或直角内容时, 可以把这一侧的内边距加倍。
查看详情 图标要配标签
图标可能因为经验和文化差异被误解。 在图标旁增加简短文字标签, 能提升可访问性, 尤其适用于没有 hover 的移动端界面。
查看详情 视觉区分元素
用独特的形状、颜色、文案和图标区分界面元素, 让视觉层级更清楚。 最好组合使用多种线索, 而不是只依靠颜色, 这样也能避免色觉障碍带来的识别问题。
查看详情 把快捷键放在动作旁
键盘快捷键能提升效率并节省熟练用户的时间, 但它们往往很难记住。 把快捷键放在动作按钮旁, 用户就不必依赖记忆寻找下一步。
查看详情 用小技巧强化层级
降低次要信息的不透明度, 用粗体强调重点, 按固定比例放大标题, 并将相关元素放在一起。 对于从左到右阅读的语言, 左对齐通常更利于建立清晰的视觉路径。
查看详情 用留白分隔元素
菜单分组优先使用留白, 能让界面更干净并降低认知负担。 分隔线不是越多越好: 可以只在大组之间使用, 或完全用留白完成分组。