插件设计UI规范

1 插件图标

插件图标是用户对你所开发的插件的第一印象。设计插件图标,应遵循以下设计规范。这个规范并不意味着限制你设计图标,而是强调用统一的规则去让你的插件
能够正常运作以及更好地为用户所接受。

本章所包含的建议是以Adobe Photoshop / Fireworks / Illustrator 为基础

1.1 使用场景

  • UC浏览器插件面板

  • 插件管理界面

  • UC+ 插件发行平台

  • 在你插件中需要用到logo的界面

1.2 图标尺寸

  • 输出尺寸

    UC浏览器插件中,仅使用一个尺寸在不同场景下进行适配使用大小 54x54像素 ,圆角 3像素(输出透明背景.png格式切图)请务必使用此尺寸进行设计,否则插件图标很可能无法正常显示

  • 图形大小

    图标的主要图形大小建议为40*40像素,,让插件图标显得饱满而协调

1.3 推荐样式

  • 简洁易懂

    尽量使你的图标简洁明了,易于理解与记忆,抓住主要特征,尽量不使用复杂的图形

  • 细腻的质感

    使用较简洁细腻的质感,不宜过度拟物化也不宜纯扁平化

  • 图标视角

    使用前视角,,可带有轻微透视,,避免出现过于明显的透视

  • 光源

    使用从上到下的90度光源

  • 图标配色

    使用简洁明快的中高纯度配色,缓和的渐变。请勿使用大面积灰色,以免与插件面板背景对比太弱或者给用户不可用的感觉。不建议使用大跨度的渐变。

2 文字/文本段落

文字内容是界面的重要组成部分,甚至是界面的最重要信息。

插件的文字需要具备合理的背景对比度、字号大小、颜色值、文字段落宽度、文字行距,让用户能快速获取信息进行快速操作。

2.1 字体

  • 用于Android 4.x版本

    • 中文 Droid Sans Fallback

    • 英文 Roboto

  • 用于Android 4.x之前的版本

    • 中文 Droid Sans Fallback

    • 英文 Droid Sans

  • 色值

  • 弹窗标题栏 #878787

  • 默认文本色值 # 4e4c59

  • 次要文本色值 #808080

    以上为推荐色值,可根据需要进行调整

2.2 字号

  • 标题文字 26px

  • 默认文本内容 24px

  • 次要信息/文字较多的按钮 22px

2.3 间距

  • 推荐间距 1.5倍

3 GUI组件

GUI组件是构成插件界面的基本元素,为了让你更方便地创建插件,本章节中我们会提供一些基本组件使用方法以及GUI组件源文件。UC浏览器插件标准组件库.psd

3.1 按钮

UC浏览器插件中,有普通按钮和高亮按钮,在弹窗类型插件中,如果只有一个操作按钮的话,使用长条形按钮。所有按钮都有默认(Normal)和点击(Pressed)两种状态。避免出现不可操作状态的按钮。

3.2 单选、复选、开关

单选、复选、开关 三个组件均有 默认状态和选中状态。

3.3 输入框

输入框有 默认、点击 两种状态,当点击后背景恢复默认状态背景,进行文字输入/编辑。

3.4 工具栏

全屏界面类型的插件中,一般以底部的工具栏作为界面出口/返回上一级,以及承载部分功能入口。

3.5 下拉列表

下拉列表有 默认、点击、展开状态,展开列表中包含点击状态。

3.6 长按菜单

长按对象弹出的菜单选项。有默认、点击两种状态。

在UC浏览器中,对话框是大部分插件会都会使用到的模块,如下列出几种最为常见的对话框。

所有对话框在弹出状态下,都需要在屏幕中叠加 不透明度30%,色值为 #000000 的蒙版以表示弹窗外的不可操作状态。

3.7 介绍/开关式插件对话框

带有插件图标、内容介绍、功能开关的插件对话框,一般作为功能比较单一的插件开关。

3.8 询问/确认操作类对话框

当用户使用插件进行不可逆的操作时,给出的询问提示。

3.9 多功能操作对话框

在对话框上承载较多信息,能进行输入、选择等操作,具体功能请根据实际情况进行增减。

在插件操作中,有时候不可避免地需要用户等待,在等待过程中,需要合理地运用加载状态。以下是几种在UC浏览器中较为常见的加载状态:

3.10 中断型 加载状态

在中断型加载状态出现时,界面其它区域需要叠加 不透明度30%,色值 #000000 的蒙版,以提示用户不可操作。并且需要给用户取消的功能。

3.11 非中断型 加载状态

一般用于 列表内容加载、图标加载等。

4 UC浏览器插件标准组件库

UC浏览器插件标准组件库.psd