静态原型的更多天气信息

天气的更多信息，是通过列表的形式展现的。

参数设计

列表项的高度在Material Design中，被定义成了48dp；并且整个list的顶部还有8dp的边距。

列表项由3部分组成，

• 图标：

• 项目名称：

• 项目取值（参考）：

注意：以上的数据都在Material Design的文档List当中有明确的定义。

添加列表项区域

创建一个360dp*48dp的矩形区域-row bound，作为第一条数据项使用的空间，

注意：list的顶部8dp边距，这里还没有加上。因为我准备在添加完成所有的列表项后，再做整体的移动。

添加图标

系统图标的尺寸是24dp的正方形，但是最外一圈还要有2dp的边距，所以真正的图标内容是局限在一个20dp*20dp的区域内的。

首先，

1. 创建一个24dp*24dp的矩形-icon bound；
2. 放到距row bound左边距16dp的位置；
3. 让它垂直居中；

然后，

1. 从事先准备好的资源文件中，找到风力.svg，拖入到Sketch的工作区域；调整图片大小为20dp*20dp;

   

2. 颜色设置成#000000，透明度54%；

   

3. 将其放置于icon bound的中心位置；

   

4. 删除icon bound的背景色和边线；

   

添加项目名称

在row bound的区域内，

1. 添加风力文字；
2. 设置左边距为72dp；
3. 字体为Noto，大小为16sp，字形是Regular；
4. 字体颜色设置成#000000，透明度为87%；

添加项目取值

在row bound的区域内，

1. 添加3级文字；
2. 设置右边距为16dp；
3. 字体为Noto，大小为14sp，字形是Regular；
4. 字体颜色设置成#000000，透明度为54%；

列表项组合

将风力文字、风力图标、3级、row bound、icon bound组合成一个新的组件风力，

最后把row bound的背景色和边线移除掉，

添加多个列表项

复制粘贴第一个列表项，把剩余的项目以此添加到画板当中，

之后将它们组合成一个组件-More info，

最后再整体把More info向下移动8dp，使之符合List的设计规范，

这里有个技巧：在制作列表的时候，会发现数据已经超出了手机屏幕的高度，这时候，可以把Mobile Portrait的高度扩展到足以容纳的尺寸，

至此，整个主要界面的设计就完成了。