中国移动统一门户UI设计规范补充规范 - 图文

8.3. 内页

1 2 3

内容定义 1 头部 2 左侧导航 保持与首页相同 保持与首页相同 28

内页对应的左侧导航条目状态变化： 背景色为：# a8dbf9 字体：加粗 示例：3 内页内容 8.4. 顶部心情更换

? 点击三角形显示下拉菜单，如下图所示：

各省根据自身情况放置内容。

1、下拉菜单尺寸宽度为131PX，下拉的长度根据各省市心情下拉设置的数量自行调

整。下拉菜单背景色：#cfeafa 边框：1px # 1190db 边框阴影：右下各2px 阴影颜色：#dcdcdc

2、当前显示心情尺寸：131 x 34PX

下拉菜单选择心情文字项尺寸：131x29 PX 下拉心情选项尺寸：131x31PX

3、心情项悬停背景：

? 本区域为机动其余，各省市可根据自身运营需要确定是否设置本区域，选择心情显

示的文案内容和对应的图标也由省公司根据实际情况确定。

8.5. 左侧导航管理应用展示详细效果。

? 点击左侧导航的管理应用链接，弹出层显示效果图如下：

29

3 2 1 4

标记1：

半透明遮盖层颜色：#000；透明度80%； 标记2：

我的业务，话费服务，移动服务，社区应用分类展示；每个小条目可选是否显示。 条目展示同首页左侧。 模块标题如下图：

标题尺寸：140x28 标题文字大小：14px 标题文字规格：加粗 标题文字颜色：#555555

模块标题背景图：

标记3：

弹出层尺寸：670x545 弹出层边框：2px #5cc4f8 标记4：

保存及取消按钮组

30

背景：670x65 背景颜色：# d1e5eb

保存按钮：

按钮尺寸：100x34 按钮文字大小：4px 按钮文字颜色：#b33e3e 规格：加粗

取消按钮：

按钮尺寸：100x34 按钮文字大小：4px 按钮文字颜色：#555555 规格：加粗

按钮背景：

? 鼠标移动至左侧主应用分类时显示当前应用管理，效果如下：

1 2 3 5 4

标记1：

鼠标移动至主应用分类，标题右侧显示设置图标，规范如下： 图示：

图标尺寸：16x16

鼠标点击设置图标，弹出层显示！

标记2：

主应用分类标题

文字大小：14px 文字颜色：#555555 文字规格：加粗

标记3：

主应用分类各项展示，复选框选中项目显示在左侧，未选中则不显示。 每项尺寸：90x18 每项间距：左右上下5px

标记4： 弹出层框架

尺寸：宽度为220px，高度根据各主分类项目数量变化。

31