层级技巧 by Jim Raptis
筛选与层级相关的 UI 设计案例和建议。
查看详情 打造清晰的页头
页头应该先把注意力放在标题上, 再引导用户阅读清晰的描述。 可以使用更重的标题字重、稳定的字号比例、较低对比度的副标题、合适的行高和左对齐来建立层级。
查看详情 正确使用品牌色
品牌色是界面的核心元素之一, 但最常见的错误就是使用过量。 只用主色强调最重要的元素, 其他区域使用主色的明暗变化, 让层级更清楚。
查看详情 清晰区分选中项
选中状态要做到一眼可见。改变背景色是简单且易访问的方式。 必要时再叠加边框、图标或文字, 让用户快速判断哪些元素已经被选中。
查看详情 突出最佳方案
用颜色、尺寸、阴影等多个设计手段突出最值得推荐的套餐。 这样可以帮助用户快速识别最常用的方案, 同时推动他们选择你的重点产品。
查看详情 用小技巧强化层级
降低次要信息的不透明度, 用粗体强调重点, 按固定比例放大标题, 并将相关元素放在一起。 对于从左到右阅读的语言, 左对齐通常更利于建立清晰的视觉路径。
查看详情 用留白分隔元素
菜单分组优先使用留白, 能让界面更干净并降低认知负担。 分隔线不是越多越好: 可以只在大组之间使用, 或完全用留白完成分组。