Skip to content

B端设计交互搜集

边距

视觉对齐

左侧的组件使用了相同的 Padding,但视觉效果存在偏差。
当边缘元素不是圆形时,设计师通常会将实际的 Padding增大
按照经验来说,2xPadding 可以起到不错的效果。

模态框/对话框

明确选中状态

务必确保所选项的一目了然,更改元素背景色是一种简单直接的方案。这样做带来的体验提升很具有性价比,用户能轻易的知晓他当前选择的是什么

二次验证

永远 不要允许用户在没有验证的情况下删除任何内容。
永久丢失信息会带来伤害,也会使用户对产品形成负面评价。
确保您的介面支持(任何方式)删除验证
即使由“不可抗力”限制而无法实现撤销功能,也要确保二次验证

正确强调

始终尽可能的淡化“删除”这类危险行为。
优先考虑默认操作,而不是危险或不可逆转的操作。
此外,视觉层级也可以提供正反馈,引导用户进行正确的操作(颜色、大小、类型、位置等)

删除交互

设计师请特别注意在删除模态框下的交互体现。
当用户进行破坏性操作时,尽可能的准确描述完成操作后会产生的后果并且给予用户更准确的 CTA(Call To Action) 文案。
请不要吝啬你的文字,准确的表述是在节约用户的时间

提示框

经典的 ToolTip 是鼠标悬停至抽象元素上时触发并解释。
在桌面端,这个功能运行得十分完美!
然而 — 移动设备不支持悬停效果。
为了解决这个问题,在抽象元素旁边添加一个可点击的帮助图标。当用户轻触图标时,显示相应的工具提示文本

参考

体验设计提升小技巧 - 明确的选中状态

Last updated: