Modchat界面改版

项目背景：

2015年12月-2016年8月 在深圳战吼网络科技有限公司实习期间，参与游戏社交应用Modchat的移动端界面设计。

2016年12月-2017年4月 将网格系统相关理论运用到Modchat的界面设计中，对其进行界面改版。

网格系统：

贝斯·托恩德罗（美）在《破译网格设计》中认为：网格是所有设计的基础，对设计师来说，学会运用网格是进行所有设计的基础。

网格系统（Grid Systems）是在设计过程中通过制定网格指导设计师如何在一个版式中放置视觉元素的原则。这种设计方法来源于人类对秩序的探寻，现如今，网格系统已经被众多设计师应用到更广阔的设计领域中。

网格系统在手机APP界面设计中的价值：

1）优化功能布局。设计师可以通过网格系统为界面中的功能划分出合理的布局。

2）规范内容编排。和传统的平面设计一样，通过创建网格系统可以决定不同APP界面中文字和图片在内容区域中的位置与比例关系，使用户在获取手机APP界面中的内容时拥有更好的可读性。

3）提升视觉美感。在手机APP界面设计中，这种美感主要体现在手机APP界面间的一致性、连续性和标准性。

设计实践：

步骤1：创建尺寸为1334×750（像素）、分辨率为每英寸72像素的画布。

步骤2：设置水平边距。考虑到该手机APP界面多是采用垂直方向上的浏览方式，所以为了能够在手机屏幕中可以放置更多的内容，决定采用相对较小的数值作为水平边距，这里采用了24像素，即6像素的4倍。

步骤3：设置垂直边距。Modchat界面采用了天头和地脚的高度分别为12像素和24像素即1:2的比例作为垂直边距。这样，不管是在首页还是其他页面，采用1:2的比例更容易拉开内容与屏幕边缘的距离，使界面中的内容向上推起，给人一种轻盈舒适的感觉。

步骤4：创建网格。这里主要创建三种网格：分层网格、稿件网格和模块网格。

嘀~创建分层网格