视觉效果技巧 by Jim Raptis
筛选与视觉效果相关的 UI 设计案例和建议。
查看详情 设计更好的菜单
菜单经常存在可读性问题。为每个操作配一个图标, 用户无需读完所有文案也能快速识别动作。 如果菜单有当前页面或当前标签, 还要用清晰的选中状态突出它。
查看详情 如何对齐不等高元素
对齐尺寸不一的元素时, 即使间距一样, 视觉结果仍可能显得奇怪。 一个快速修复方法是统一所有元素的宽度, 直接采用最大元素的宽度。
查看详情 弱化危险操作
删除等危险或不可逆操作应该是次要动作, 不要抢走默认操作的注意力。 可以同时使用颜色、尺寸、字重和位置等多个特征来降低它的视觉优先级。
查看详情 打造清晰的页头
页头应该先把注意力放在标题上, 再引导用户阅读清晰的描述。 可以使用更重的标题字重、稳定的字号比例、较低对比度的副标题、合适的行高和左对齐来建立层级。
查看详情 透明头像的兜底方案 1
透明 PNG 头像可能破坏界面的一致性。 给头像加上与应用背景同色的细边框和底色, 可以稳定不同头像素材的显示效果。
查看详情 透明头像的兜底方案 2
另一种保持透明头像一致性的方式, 是加一圈与背景同色的边框。 边框既像背景的一部分, 又能让头像和封面区域清楚分开。
查看详情 统一圆角
圆形图片放进小圆角卡片时容易显得突兀。 可以遵循一个简单规则: 外层圆角约等于内层圆角的两倍。精确公式还要考虑两层边框之间的间距, 但这个经验值足够实用。
查看详情 正确使用品牌色
品牌色是界面的核心元素之一, 但最常见的错误就是使用过量。 只用主色强调最重要的元素, 其他区域使用主色的明暗变化, 让层级更清楚。
查看详情 清晰区分选中项
选中状态要做到一眼可见。改变背景色是简单且易访问的方式。 必要时再叠加边框、图标或文字, 让用户快速判断哪些元素已经被选中。
查看详情 用视觉引导注意力
人们会跟随他人的视线。利用人物视线或方向性视觉, 引导用户关注指定元素或继续向下滚动。
查看详情 提示用户继续滚动
当首屏内容不足以说明产品价值时, 露出下一段内容的一部分。 用户会知道页面还有更多信息, 也更容易产生继续探索的好奇心。
查看详情 强化视觉层级
视觉层级能提升体验并引导注意力。第一优先级应该是突出主 CTA。 同时保证文字可读, 让标签和按钮等不同元素明显区分, 再用字重、字号和行高调整视觉注意力。
查看详情 圆角卡片的内边距
卡片四周使用相同内边距, 视觉结果却可能不平衡。 当边缘元素不是圆形图标而是文字或直角内容时, 可以把这一侧的内边距加倍。
查看详情 视觉区分元素
用独特的形状、颜色、文案和图标区分界面元素, 让视觉层级更清楚。 最好组合使用多种线索, 而不是只依靠颜色, 这样也能避免色觉障碍带来的识别问题。
查看详情 用小技巧强化层级
降低次要信息的不透明度, 用粗体强调重点, 按固定比例放大标题, 并将相关元素放在一起。 对于从左到右阅读的语言, 左对齐通常更利于建立清晰的视觉路径。
查看详情 用留白分隔元素
菜单分组优先使用留白, 能让界面更干净并降低认知负担。 分隔线不是越多越好: 可以只在大组之间使用, 或完全用留白完成分组。