智慧社区交互界面UI设计及说明
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
返回至首页 翻看下页内容 翻看上页内容 无响应
栏目图片，展示当前用户处于哪个栏目 下
1. 每页显示4条政务公告内容，点击进 入政务公告详情页
2. 政务公告采用标题+图片的形式呈现 3. 政务公告图片及标题内容从政务公告
栏目中获取，若该条新闻无图片，则 从固定位置获取该栏目默认图片 4. 从下向上滑动屏幕，从该区域中间采 用杂志上翻页形式半屏翻动更新至下 页内容 5. 从上向下滑动屏幕，下翻页更新上一 页内容（不可循环） 6. 翻页过场如需加载，显示LOADING 过度界面
新闻详情
返回至上一级 翻看下页内容 翻看上页内容 无响应
1. 新闻详情采用新闻标题+图片+正文 的形式呈现
2. 从下向上滑动屏幕，从该区域中间采 用杂志上翻页形式半屏翻动更新至下 页内容
3. 从上向下滑动屏幕，下翻页更新上一 页内容（不可循环）
4. 翻页过场如需加载，显示LOADING 过度界面
政务公告
图片详情
返回至上一级 翻看下页内容 翻看上页内容 无响应
1. 图片详情采用图片+描述的形式呈现 2. 从下向上滑动屏幕，从该区域中间采
用杂志上翻页形式半屏翻动更新至下 页内容 3. 从上向下滑动屏幕，下翻页更新上一 页内容（不可循环） 4. 翻页过场如需加载，显示LOADING 过度界面
物管通
返回至首页 翻看下页内容 翻看上页内容 无响应
智慧社区交互终端包含功能
系统功能
已明确二级栏 目
当前 时间
新闻 头条
图览 龙城
天气 预报
政务 公告
缴费 查询
屏保 广告
物管通
价比 三家
畅游 常州
出租 出售
投资 理财
交互界面用户操作
• 点击作为基础，滑动作为辅助的操作方式
点击：进入相应界面
向右滑动：返回上级目录 向上滑动：翻看下一页内容 向下滑动：翻看上一页内容 左滑动：切换子栏目目录
1. 导航功能栏由七巧板处展开，要有动 态效果
2. 导航栏列出全部二级栏目，左右滑动 可滚动显示（不可循环）
3. 导航栏区域采用95%不透的形式，叠 加在底层内容之上显示
4. 在导航栏出现的情况下，点击导航栏 区域外部分，导航栏回收至七巧板处
新闻头条
返回至首页 翻看下页内容 翻看上页内容 无响应
栏目图片，展示当前用户处于哪个栏目 下
4. 滑动至尽头再向相同 方向滑动不响应
5. 滑动过程需要有过场 效果
屏幕尺寸：1080*1920
功能菜单——导航栏
点击导航栏中某栏目，则 先向导航栏回收至七巧板 内，再进入对应二级栏目 首页
栏目图片，展示当前用户处于哪个栏目 下
1. 七巧板为功能菜单按钮，点击后从该 位置展出导航栏
2. 此时七巧板仍处于自动晃动状态 3. 再次点击，从七巧板位置收回导航栏
政务公告详情
返回至上一级 翻看下页内容 翻看上页内容 无响应
1. 政务公告详情采用标题+图片+正文 的形式呈现
2. 从下向上滑动屏幕，从该区域中间采 用杂志上翻页形式半屏翻动更新至下 页内容
3. 从上向下滑动屏幕，下翻页更新上一 页内容（不可循环）
4. 翻页过场如需加载，显示LOADING 过度界面
1. 每页显示4条新闻内容，点击进入新 闻详情页
2. 新闻采用图片+标题的形式呈现 3. 新闻图片及标题内容从新闻栏目中获
取，若该条新闻无图片，则从固定位 置获取该栏目默认图片 4. 从下向上滑动屏幕，从该区域中间采 用杂志上翻页形式半屏翻动更新至下 页内容 5. 从上向下滑动屏幕，下翻页更新上一 页内容（不可循环） 6. 翻页过场如需加载，显示LOADING 过度界面
屏保广告形式
wenku.baidu.com
视频播放窗口，尺寸1080*635
天气预报
显示日期及时间
1. 屏保大图由前端发 布，可设定每隔*秒 切换至下一张图
2. 切换过程为从右向 左滑入方式
3. 屏保模式下不响应 用户触摸操作
广告图片区域，从系统 端某固定位置获取，得 到该组共*张，每*秒自 动更新
首页
天气及时间显示区域， 单独背景颜色 天气预报 1. 背景图片，可按时
间、天气等一定规 则自动更换 2. 图片内容取自系统 端某固定位置
广告图片区域，从系统 端某固定位置获取，得 到该组共*张，每*秒自 动更新
屏幕尺寸：1080*1920
视频播放窗口，尺寸1080*635
显示日期及时间 1. 七巧板为功能菜单按钮，点击从该位
置展出所有二级功能菜单（后有示意 图） 2. 首页七巧板以2秒周期自动晃动，提 示用户此处可点击操作 栏目名称显示区，首页下显示 “欢迎来到智慧社区”，二级栏 目下显示二级栏目对应图标（后 有示意图） 平铺二级界面入口，其中某些固定栏目 （新闻头条、图览龙城、投资理财）每5 秒自动刷新各栏目内最新5条图文内容 （参考WIN8界面效果）
首页-2
1. 首页二级界面平铺展 示区在一屏内平均分 为A、B两部分，同样 第二屏乃至更多屏内 容也将均分（C、D等）
2. 用户向右滑动一次屏 幕，则显示B、C部分 内容，再滑动一次则 显示C、D部分内容， 以此类推
3. 若目前只有A、B、C 三部分内容，则界面 只会出现A&B、B&C 的组合形式
图览龙城
返回至首页 翻看下页内容 翻看上页内容 无响应
栏目图片，展示当前用户处于哪个栏目 下
1. 每页显示4条图片内容，点击进入图 片详情页
2. 从下向上滑动屏幕，从该区域中间采 用杂志上翻页形式半屏翻动更新至下 页内容
3. 从上向下滑动屏幕，下翻页更新上一 页内容（不可循环）
4. 翻页过场如需加载，显示LOADING 过度界面
栏目图片，展示当前用户处于哪个栏目 下
1. 每页显示4条物管内容，点击进入详 情页（与新闻头条相同）
2. 物管内容采用标题+图片的形式呈现 3. 图片及标题内容从物管通栏目中获取，
若该条新闻无图片，则从固定位置获 取该栏目默认图片 4. 从下向上滑动屏幕，从该区域中间采 用杂志上翻页形式半屏翻动更新至下 页内容 5. 从上向下滑动屏幕，下翻页更新上一 页内容（不可循环） 6. 翻页过场如需加载，显示LOADING 过度界面
投资理财
返回至首页 翻看下页内容 翻看上页内容 无响应
栏目图片，展示当前用户处于哪个栏目 下
1. 每页显示4条理财内容，点击进入详 情页（与新闻头条相同）
2. 理财内容采用标题+图片的形式呈现 3. 图片及标题内容从投资理财栏目中获
栏目图片，展示当前用户处于哪个栏目 下
1. 每页显示4条政务公告内容，点击进 入政务公告详情页
2. 政务公告采用标题+图片的形式呈现 3. 政务公告图片及标题内容从政务公告
栏目中获取，若该条新闻无图片，则 从固定位置获取该栏目默认图片 4. 从下向上滑动屏幕，从该区域中间采 用杂志上翻页形式半屏翻动更新至下 页内容 5. 从上向下滑动屏幕，下翻页更新上一 页内容（不可循环） 6. 翻页过场如需加载，显示LOADING 过度界面
新闻详情
返回至上一级 翻看下页内容 翻看上页内容 无响应
1. 新闻详情采用新闻标题+图片+正文 的形式呈现
2. 从下向上滑动屏幕，从该区域中间采 用杂志上翻页形式半屏翻动更新至下 页内容
3. 从上向下滑动屏幕，下翻页更新上一 页内容（不可循环）
4. 翻页过场如需加载，显示LOADING 过度界面
政务公告
图片详情
返回至上一级 翻看下页内容 翻看上页内容 无响应
1. 图片详情采用图片+描述的形式呈现 2. 从下向上滑动屏幕，从该区域中间采
用杂志上翻页形式半屏翻动更新至下 页内容 3. 从上向下滑动屏幕，下翻页更新上一 页内容（不可循环） 4. 翻页过场如需加载，显示LOADING 过度界面
物管通
返回至首页 翻看下页内容 翻看上页内容 无响应
智慧社区交互终端包含功能
系统功能
已明确二级栏 目
当前 时间
新闻 头条
图览 龙城
天气 预报
政务 公告
缴费 查询
屏保 广告
物管通
价比 三家
畅游 常州
出租 出售
投资 理财
交互界面用户操作
• 点击作为基础，滑动作为辅助的操作方式
点击：进入相应界面
向右滑动：返回上级目录 向上滑动：翻看下一页内容 向下滑动：翻看上一页内容 左滑动：切换子栏目目录
1. 导航功能栏由七巧板处展开，要有动 态效果
2. 导航栏列出全部二级栏目，左右滑动 可滚动显示（不可循环）
3. 导航栏区域采用95%不透的形式，叠 加在底层内容之上显示
4. 在导航栏出现的情况下，点击导航栏 区域外部分，导航栏回收至七巧板处
新闻头条
返回至首页 翻看下页内容 翻看上页内容 无响应
栏目图片，展示当前用户处于哪个栏目 下
4. 滑动至尽头再向相同 方向滑动不响应
5. 滑动过程需要有过场 效果
屏幕尺寸：1080*1920
功能菜单——导航栏
点击导航栏中某栏目，则 先向导航栏回收至七巧板 内，再进入对应二级栏目 首页
栏目图片，展示当前用户处于哪个栏目 下
1. 七巧板为功能菜单按钮，点击后从该 位置展出导航栏
2. 此时七巧板仍处于自动晃动状态 3. 再次点击，从七巧板位置收回导航栏
政务公告详情
返回至上一级 翻看下页内容 翻看上页内容 无响应
1. 政务公告详情采用标题+图片+正文 的形式呈现
2. 从下向上滑动屏幕，从该区域中间采 用杂志上翻页形式半屏翻动更新至下 页内容
3. 从上向下滑动屏幕，下翻页更新上一 页内容（不可循环）
4. 翻页过场如需加载，显示LOADING 过度界面
1. 每页显示4条新闻内容，点击进入新 闻详情页
2. 新闻采用图片+标题的形式呈现 3. 新闻图片及标题内容从新闻栏目中获
取，若该条新闻无图片，则从固定位 置获取该栏目默认图片 4. 从下向上滑动屏幕，从该区域中间采 用杂志上翻页形式半屏翻动更新至下 页内容 5. 从上向下滑动屏幕，下翻页更新上一 页内容（不可循环） 6. 翻页过场如需加载，显示LOADING 过度界面
屏保广告形式
wenku.baidu.com
视频播放窗口，尺寸1080*635
天气预报
显示日期及时间
1. 屏保大图由前端发 布，可设定每隔*秒 切换至下一张图
2. 切换过程为从右向 左滑入方式
3. 屏保模式下不响应 用户触摸操作
广告图片区域，从系统 端某固定位置获取，得 到该组共*张，每*秒自 动更新
首页
天气及时间显示区域， 单独背景颜色 天气预报 1. 背景图片，可按时
间、天气等一定规 则自动更换 2. 图片内容取自系统 端某固定位置
广告图片区域，从系统 端某固定位置获取，得 到该组共*张，每*秒自 动更新
屏幕尺寸：1080*1920
视频播放窗口，尺寸1080*635
显示日期及时间 1. 七巧板为功能菜单按钮，点击从该位
置展出所有二级功能菜单（后有示意 图） 2. 首页七巧板以2秒周期自动晃动，提 示用户此处可点击操作 栏目名称显示区，首页下显示 “欢迎来到智慧社区”，二级栏 目下显示二级栏目对应图标（后 有示意图） 平铺二级界面入口，其中某些固定栏目 （新闻头条、图览龙城、投资理财）每5 秒自动刷新各栏目内最新5条图文内容 （参考WIN8界面效果）
首页-2
1. 首页二级界面平铺展 示区在一屏内平均分 为A、B两部分，同样 第二屏乃至更多屏内 容也将均分（C、D等）
2. 用户向右滑动一次屏 幕，则显示B、C部分 内容，再滑动一次则 显示C、D部分内容， 以此类推
3. 若目前只有A、B、C 三部分内容，则界面 只会出现A&B、B&C 的组合形式
图览龙城
返回至首页 翻看下页内容 翻看上页内容 无响应
栏目图片，展示当前用户处于哪个栏目 下
1. 每页显示4条图片内容，点击进入图 片详情页
2. 从下向上滑动屏幕，从该区域中间采 用杂志上翻页形式半屏翻动更新至下 页内容
3. 从上向下滑动屏幕，下翻页更新上一 页内容（不可循环）
4. 翻页过场如需加载，显示LOADING 过度界面
栏目图片，展示当前用户处于哪个栏目 下
1. 每页显示4条物管内容，点击进入详 情页（与新闻头条相同）
2. 物管内容采用标题+图片的形式呈现 3. 图片及标题内容从物管通栏目中获取，
若该条新闻无图片，则从固定位置获 取该栏目默认图片 4. 从下向上滑动屏幕，从该区域中间采 用杂志上翻页形式半屏翻动更新至下 页内容 5. 从上向下滑动屏幕，下翻页更新上一 页内容（不可循环） 6. 翻页过场如需加载，显示LOADING 过度界面
投资理财
返回至首页 翻看下页内容 翻看上页内容 无响应
栏目图片，展示当前用户处于哪个栏目 下
1. 每页显示4条理财内容，点击进入详 情页（与新闻头条相同）
2. 理财内容采用标题+图片的形式呈现 3. 图片及标题内容从投资理财栏目中获