插件设计基本样式

1 设计原则

UC插件遵循简单清晰、通俗易懂及一致性三大设计原则。

1.1 简单清晰

  • 简单明确,不要在一个插件中提供过多的功能、跳转过多的界面以及提供过长的文本。

  • 清晰有条理,避免分工不清、错综复杂的功能架构,缺乏重点、组织混乱的界面以及难以理解、思路不清的文字。

1.2 通俗易懂

  • 通用设计,以用户熟悉的设计为参考标准,不创造非常见的、特殊的样式,不使用生僻的文本。

  • 表意直接,容易明白,交互方式、UI样式和文字表达皆不宜过于隐晦。

1.3 一致性

  • 用户行为与交互形式保持一致,交互方式、流程需符合用户的心理模型。

  • 相同操作的交互方式保持一致,避免混乱的交互方式及过高的学习成本。

  • UI样式与交互样式保持一致,允许UI样式多元化,但需传达出与交互样式一致的信息

2 全屏界面

全屏界面用于承载某一功能模块的所有内容。

2.1 主要特点

  • 信息量大,可容纳某一功能模块的完整信息
  • 包容性强,可承载、承接多种交互样式
  • 界面量级较重,与当前页面的关联性较低

2.2 出口

  • 若插件只有一级界面,则点击底部工具栏右侧的“返回”按钮退出

  • 若插件有多级界面,则点击底部工具栏有责“返回”按钮返回上一级

2.3 界面组成

全屏界面主要由三大部分组成,即标题栏、内容区及工具栏。

  • 标题栏

标题栏位于全屏界面的顶部,起到标识插件的作用,主要由标题/标签及按钮(非必要元素)组成。如果标题栏样式为标题时,则标题居中排列;

如果标题栏出现按钮,则按钮位于标题栏的左右两侧。

  • 内容区

    内容区位于全屏界面中部,高度不定,是展示对话框具体内容的W区域(包括信息展示、操作、设置等)。内容区可根据需要放置不同类型的内容,也可容纳多种控件。

  • 工具栏

工具栏位于全屏界面底部,提供与插件相关的操作,其样式可根据实际设计稍作调整

3 对话框

对话框用于承载简单的信息、操作以及重要的提示。

3.1 主要特点

  • 信息量少,一般承载简短的信息、操作或者为用户提供提示

  • 包容性较全屏界面差,可承载、承接的交互样式比全屏界面少

  • 对话框量级中等,与当前页面有较高的关联度

3.2 出口

一般情况下,点击“取消”“关闭”等中性或否定性质的按钮关闭对话框,若操作区只容纳一个非“取消”或“关闭”性质的操作按钮,则关闭按钮允许置于标题栏右侧区域

  • 特殊性

若非特殊情况,一般不建议对话框承接对话框的交互流程

3.3 界面组成

  • 标题栏

    标题栏位于对话框的顶部,用于说明该对话框的主题,主要由图标、标题/标签及按钮(非必要元素)组成。

    若标题栏样式为标题时,则标题居中排列;若标题栏出现按钮,则按钮位于标题栏的右侧。

  • 内容区

    内容区位于对话框中部,是插件功能的展示区(包括信息展示、操作、设置等)。

    内容区可根据需要放置不同类型的内容,也可视实际需要摆放不同的控件,如输入框、下拉菜单、列表等。

4 操作区

操作区位于对话框的底部区域,为用户提供与对话框内容相关的操作按钮。

其特点包括:

  • 形式:一般为成对出现的选择按钮,且其中一个为“取消”按钮,但允许“取消”或其他操作按钮单独放置的情况

  • 按钮位置:若按钮个数过于一个,,则按钮排布跟随手机系统

  • 用语规范:默认为“确定”“取消”,但可视实际情况进行更改

  • 推荐选项:高亮处理(具体效果请见UI设计规范)

5 蒙版

在UC插件中,蒙版承担单项功能的快速操作面板以及情景化出现的流程向导两项主要职能。

5.1 主要特点

  • 可承载的交互样式较少

  • 量级中等,但与当前页面具有较高的关联性

5.2 界面组成

蒙版的界面主要由半透明蒙版、内容及按钮区组成。其中,按钮区为非必要元素,若界面中出现按钮区,则默认位于蒙版顶部区域。

  • 出口

    • 默认为蒙版右上角的“关闭”按钮,位置可视情况作出更改

    • 机菜单栏中的“返回”按钮

  • 特殊性

    • 蒙版的自由度大,在样式上不做过多限制,但必须为用户提供半透明蒙版的出口。

6 悬浮条

悬浮条通常用于展示少量信息,或提供某一功能模块的菜单。

6.1 主要特点

  • 信息量少,包容性差
  • 悬浮状态,不中断页面操作
  • 始终固定于屏幕底部,浏览器工具条之上
  • 无固定出口,可收起和展开
  • 悬浮条量级较轻,但与当前页面的关联程度最大

6.2 界面组成

  • 悬浮条的组成部分相对简单,包括简单的信息、按钮,或者两者结合。