信息传达 Messaging

在系统中形成统一的信息表达方式,增强用户对产品的感知,减少陌生感

    原则

    信息传达的目的是为用户提供足够的信息,帮助用户克服障碍顺利达成目标。因此设计师需要基于当前场景下用户的首要目标来对信息类型做定义、选取组件,并遵循以下原则:

    • 谨慎克制:不要在同一个页面中出现多于两种的信息承载组件,多个临时出现的 UI 组件会让用户感到手忙脚乱而无法顺利完成后续操作。因此在处理多条信息时,设计师需将信息做精简与合并

    • 灵活处理:有时我们会由着惯性来选用组件,比如在一个流程中多次地使用 Notice Modal 来达到效果,这样简单粗暴的设计方法导致用户在该流程中多次被打断,忽略了用户的实际体验。因此设计师需要从流程体验的角度来回顾信息的传达方式,提升流程的用户体验

    信息类型

    我们使用颜色与图标来区分信息类型,包含提示、警示、成功、失败四类:

    • 提示类:需要在用户到达时告知用户的提示或帮助信息,如页面功能提示、新功能上线通告、产品推广信息...

    • 警示类:如我们预见到用户的操作会导致较严重的问题,需要在用户操作前警示用户或在二次确认时警示用户

    • 成功类:如成功修改任务位置、邀请成员成功等积极信息

    • 失败类:如删除文件失败、网络断开等消极信息

    组件行为

    • 推开:这类组件在出现时会把页面内容向对应方向推开,消失时同理,不会影响页面内容的阅读与操作。如 Notice、Global Notice

    • 悬浮覆盖:这类组件在出现时会伴随动效出现并直接覆盖在页面内容之上,会影响页面内容的阅读与操作,往往会配合自动消失的行为。如 Toast Alert

    • 遮罩覆盖:这类组件在出现时会伴随遮罩覆盖在页面内容之上,强制用户进行操作。如 Notice Modal

    可选组件

    Toast Alert

    使用弹出动效及指示条来吸引用户的注意力,位于窗口左下角。用于对用户操作的即时反馈或临时提示,更多请查阅:Toast Alert

    Notice

    使用横向的信息条来承载信息,可位于卡片内或内容区。用于对场景或功能的前置提示,更多请查阅:Notice

    Global Notice

    使用横向通栏的信息条来提供全局信息传达,位于导航栏与内容区之间。用于系统级、产品级信息的传达(如系统报错、账户异常、产品公告...),更多请查阅:Global Notice

    Modal Notice

    使用模态弹窗的形式来强制获取用户的注意力。用于重要信息的传达(如二次确认),更多信息请查阅:Modal Notice