中国移动统一门户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