ShaktiGrid

ShaktiGrid 在手机上展示一组可再生能源资产。我设计了两种页面，一个列表页和一个详情页，所以这是一个很小的案例，讲的是如何从前者走到后者。

屏幕上的所有资产、数字和条款都是示例数据。

列表以一个衬线体标题开头，接着是 Active 与 Complete 的切换控件，控件下方是当前显示内容的计数。每张卡片把大部分面积留给场站的插图，名称、位置和一个标签放在下面，让人先看到地方，再看到数据。

详情页把名称和位置留在顶部，并把条款放进一张表格：技术、项目的 MW 数、位置、投资期限和资产类型。每行只有一个标签和一个数值，便于快速扫读；上方的一排选项卡一直延伸到屏幕边缘之外，通向其他主题。

这两种页面都有两个版本：白色页头配蓝色字标，或者纯蓝色一直延伸到状态栏。页头以下的内容保持不变：用衬线体标题说明资产是什么，用朴素的无衬线体呈现细节。两个悬浮按钮，一个用于无障碍，一个用于聊天，在两个版本里都停在屏幕底部。