鸥米

一，布局Layout

在选择布局时需注意以下原则：

·了解用户用例。理解页面包含的信息。

·对内容优先级进行排序。将最重要的信息凸显出来。

·将相关内容放在一起。提高用户使用效率。

1.记录型布局

由页面头部 page header、主要内容区 main content area和侧边导航sidebar组成。

页面头部穿透整个可视区域。用户滚动时，这一面板固定不动以提供固定背景，但会收缩以留出更多纵向空间（？）but it shrinks to preserve vertical real estate。

主要内容区占据2/3的可视区域。侧边导航占据1/3，最低宽度400px以保证可读性。如果这一布局位于一个主从表内，则侧边栏就会缩减为一个tab标签。

·工作区布局（？）

帮助用户针对记录进行合作。通过将这一信息放在更大的内容区域来高亮正在进行的讨论或活动，同时将相关记录展示在侧边栏中。针对这一纪录的详情展示在整个内容区域的顶部一个面板中。

·引用型布局（？）

适用于用户经常进入链接相关记录的情景。将链接记录的相关信息在更大的内容区域展示。相关项目在较小的侧边栏内展示。记录相关详情展示在内容区域顶部的一个面板内。

2.列表式布局 List Layouts

由简单的页面头部header和身体body构成，以方便用户在已有项目之间切换。常用的控制功能包括排序、筛选、做图表以及其他和项目类型相关的操作。用户还可通过“显示”菜单切换列表的布局样式。

根据用例选择合适的列表类型

·表格——适用于有大量数据和对比值的情景

·仪表盘——用于监控工作流或里程碑，用户可以在不同的阶段之间拖拽卡片以现实进度

·主从型——让用户可以在一屏中查看和编辑某一项目的详情

·表格

占用全部视图，以行和列来展示。

固定列宽，占用必要的横向空间。不随窗口大小改变列宽。用户可以选择展示那些列和每列多宽。如果表格宽于屏幕视图，则提供横向滚轴。

可以有无限高度，随着用户滚动不断加载。

不要采用页码控制器。

·仪表盘

当项目随着流水线式工作而不断发生变化时采用仪表盘布局，它能让用户快速将项目在不同的工作阶段之间移动。

这种布局基于参数表将项目按列展示。项目在列中按一叠卡片形式呈现，并且能在各列之间移动。每一列都能选择性地展示该列项目中的某些数据之和，如机会列表中某一列的总价值。

最小的列宽为12rem，最大25rem以保证卡片的可读性。

注：rem（font size of the root element）是指相对于根元素的字体大小的单位，如根元素字体大小font-size:14px，2rem就相当于2*14px=28px。即：

.test-box{

    font-size:2rem;

    /*font-size:28px;*/

}

如果列表内容过多，用户可以横向滚动窗口以查看更多内容。

如果列表内容较少，列宽被撑大到最宽，最右列保持内容为空。

·主从型

适用于任务对象是一系列项目时，可以让用户在同一屏中查看和编辑多个项目。

这一布局方式结合了两种布局样式，呈现一对多的关系。在主视图中选择一个项目，子视图中的项目详情就会相应改变，结合了引用型布局和工作区布局。

主从型布局也很适用于在很深的树形结构中进行浏览搜索，如同一个文件系统，将树形结构展示在左边，桌面内容展示在右边，这让用户在不同的树枝间切换时能勾看到每个点的完整信息。

此布局适用大屏幕，小屏幕需拆分两页。

二，加载

帮助用户再次确认系统正在运行获取数据。

1.旋转图标 Spinners

正在接收数据或计算较慢时显示此图标。

旋转图标为SVG或GIF格式。

它减少了尴尬的白屏和为空的页面，让用户知道系统正在运行。在没有进行刷新操作，但页面正在进行异步更新时显示该图标。

将Spinner在对应面板中居中，当处于文字或其他视觉元素之上时需要浅色或深色的蒙版衬托。（处于卡片中心，或列表中心和底部等）

需要时可使用文字描述系统在做什么，如“下载数据中……”

2.默认模板 Stencils

默认模板是当内容正在加载时，用于描述该部分内容大概样式的占位符。

Stencils 显示出加载完成后的内容布局的大概样式。

用于整个页面的刷新而不是异步刷新的情况。相比在整个页面各个部分展示旋转图标，默认模板提供了视觉更优的体验。

当获取数据时长超过300ms时使用，在短于300ms时直接展示数据。当加载用了301ms时，默认模板渐渐消失，数据浅浅出现，不要在默认模板和数据之间出现突兀的白闪。

当某个部分只有有数据时才出现时，不要展示默认模板。

让默认模版简单轻量化，使用简单轻微的形状来展示内容，但不要包括按钮和其他UI元素。让形状的高度保持一致以减少视觉噪音。

Stencils 应当是响应式的。

从页面左上往右下加载Stencils。

·表格数据加载默认模板 Table Data Loading Stencils

对于表格列表，不要将整个屏幕都用Stencils占满。复制20行Stencils，然后每行透明度依次减少5%，形成一种从100%到0%透明度的渐变，给出无限数据的效果。

·记录详情默认模板 Record Detail Stencil

用5个消息的逐渐淡化，来展示无限滚动的效果。每一个相关列表都展示一个该部分的特定默认模版。

二，加载

让用户知道系统正在接收数据中。

1.旋转图标Spinners

在接收数据和计算较慢时使用。

采用SVG或GIF格式。减少白屏和空白板块的尴尬，告知用户系统正在运行。适用于未进行页面级刷新时，异步加载的情况。

在板块中居中展示，不要直接覆盖在文字或其他视觉元素之上，应使用深色或浅色蒙版。

需要时使用提示文案说明系统正在做什么，如“数据加载中……”

例子：卡片加载/延迟加载/列表加载/模态窗口加载/全屏加载

2.模板Stencils

说明内容正在加载的视觉占位符。

Stencils展示出最终内容的大体结构。适用于整体页面刷新，而非异步加载的情况。让整体页面有更加友好的视觉体验。

当数据接收需要的时间超过300ms时使用。少于300ms直接展示数据。

如果需要301ms进行加载，则模板逐渐消失，数据逐渐展现，不要出现转换之间的“白闪”现象。

如果板块仅在有数据时呈现，则不要展示模板。

保持模板的简单轻量，

使用简单轻量化的形状来代表内容，不要包含按钮或其他UI元素的位置。让占位形状的高度保持一致以减少视觉噪音。

模板应当是自响应的。

从左上至右下进行模板的加载。

·表格数据加载模板

不要将整屏都填满模板。将某一条模板复制20次，并且，每一条的透明度减少5%，直到透明，制造一种无限数据的效果。

·记录详情模板

使用5个样例模板逐渐透明化以暗示出可无限滚动。每个相关列表板块展示一个模板样例。