应用框架

5.1.4.1 布局规范

屏幕尺寸

IdeaHub Board的实际屏幕尺寸为 3840 × 2160px，UI 设计稿按照 1 倍图尺寸 960 × 540px 进行设计，转换输出时等比放大。在 960 × 540px 的画布上，屏幕顶部的 30px 为系统状态栏，在设计时需要留出。底部 36px 为可收起的工具栏，不影响主体设计。

界面布局

基于操作和视觉的人因分析，我们给出了在 960 × 540px 画布上的布局推荐。

如图所示，画布顶部的 40px 为操作盲区，请避免放置重要的交互元素如页面导航、按 钮等在此区域；同时避免使用与屏幕上缘交互的手势，如从屏幕顶部下滑等。

中间绿色矩形为核心任务区。我们建议尽可能将当前任务的核心部分，如关键信息、

操作和反馈安排在同一核心任务区中，以保证用户能较为轻松地完成任务。

核心任务区四周的浅蓝色矩形为最大操作区，是用户在不移动位置的情况下能够操作 的最大区域。我们建议同一任务流程的所有操作不要超过该范围，以保证用户能够顺 利完成该任务。

核心任务区和最大操作区在竖直方向位置固定，水平位置由用户所在位置决定，在设 计中可自由、合理布局。

5.1.4.2 导航规范 导航栏

常用的导航栏：平级导航、层级导航、混合导航

建议使用底部导航和侧边导航的方式，便于用户操作且符合用户在手机端养成的操作 习惯。

顶部导航和底部导航切换页面时，可使用点击的方式，也可同时使用左右滑动的方 式。由于用户更习惯用点击的方式，而顶部导航处于操作盲区，所以不建议使用顶部 导航。底部导航的功能图标横向全屏分散布局时，用户一眼看不到所有的功能，需要 退后才能看全，需要左右移动才能点击到图标，所以不建议底部导航的图标过于分 散。

混合导航中，二级导航可由一级导航引出，但这种方式的界面不规整，且容易遮挡页 面内容，建议少使用混合导航。

5.1.4.3 常用应用框架

引导页

用于初次使用应用的时候，介绍应用的核心功能或进行必要的个人偏好设置。

启动页

针对内容型应用，应用的首页内容的获取需要花费一定的时间，此时可以使用启动页 缓解页面加载内容的等待感。启动页可以展示应用的品牌形象。

列表视图

列表视图通常用于文字和数据内容的展示。

列表应该按照一定的逻辑排序，便于用户浏览和操作。例如：按字母顺序排序、按时 间排序。

列表应该是同类项的集合，应该对外呈现一致的布局样式。

列表显示的内容不宜过多。用户应该一眼就能关注到重要信息和操作。

网格视图

网格视图通常用于图片和视频内容的展示。

网格视图显示同等重要的项目，具有统一的布局。

网格视图以图像为主组织内容。

网格视图可以辅以文字和操作。

分栏

分栏包含一个列表视图和一个内容视图。列表视图的项的具体内容会显示在内容视图 中。在列表视图中更新选择项后，内容视图也会进行相应的更新。