首页的设计——吃鸡社区重设计（一）

ユニ.jpg

这几天的时间把绝地求生社区的首页设计了一下，设计目标是之前在《吃鸡社区重设计（零）》里讲到的：

• 1、尝试用开放式的布局塑造一种未来感
• 2、尽可能多的运用枪战游戏的元素
• 3、突出游戏的有气势的感觉

这篇文章会从这3个点来简单总结一下首页的设计。

1、尝试用开放式的布局

说到未来感的时候，我首先会想到VR设备。在VR设备里的操作界面，没有明显的条条框框的束缚，眼前的景色就是界面的载体。我虽然没有接触过VR界面的设计，可是我能体会到那种没有舒服的感觉很棒，现在的绝大部分APP的布局都是屏幕多大就把内容塞多满，与之相对应的UI应该就是内容游离于屏幕之内，但是又有一定的规整性吧。所以我尝试了下面的布局。为了能把首页动态中的图片和视频做一下区分，所以采用了两种不同的布局。图片为了能展示更多的内容，比例为4：3；而视频是现在普及度最高的的16：9，如下图所示。

Image.png

Video.png

在保证整体宽度相同的情况下，图标和也进行了对齐。

2、尽可能多的运用枪战游戏的元素

这个页面里用到了很多游戏的元素。

• 绝地求生的罗盘

为了能更好的模拟绝地求生的罗盘，把代表方向的刻度和指针移到了跟图标的同一个高度的位置，并且遵循每个间隔为15°的规则。下面的文字为了模拟罗盘和进大远小的效果，以及罗盘可以循环的特点，中间的文字字号比较大，而与靠近旁边字号越小且不透明度越低。同时，为了区分选中和未选中，选中的文字使用了黄色，未选中的文字为白色。

APP Bar.png

• 瞄准镜、子弹和弹孔

枪战游戏最具特征的元素就是子弹和弹孔，所以我把这些元素也试着用在了界面中。banner中的圆形的洞，会使人联想到弹孔，而且有种通缉令的感觉。banner指示器，选中的状态是一个简化了的瞄准镜。播放视频的按钮也很自然的融入了子弹的这一要素。

Bannner.png

视频.png

3、突出游戏的有气势的感觉

这个方面主要说的是图标。在设计图标的时候我们有多种选择，比较细的描边适合一些很文艺的APP，比较粗的描边会给人安心和稳定感以及可靠的感觉，所以这里采用了3pt的描边。

图标也分为圆角、直角和折角三种类型。

• 这里显然圆角不合适，圆角一般会用在一些很可爱和童趣的APP里
• 直角太稳定了，没有什么变化，适合用在一些需要给人稳定感的APP中，比如银行等
• 折角这种装饰会给人一种科技感和未来感

所以我这里选用了折角这种装饰的元素，如下图所示。

icon.png

在底部导航栏图标的选择上，选用了游戏中的元素作为图标，雷达、望远镜、对讲机和面具，这些在枪战游戏中很常见，并且融入了上面讲到的直角，如下图所示。

4 Tabs.png

这就是首页的设计思路，整体效果如下。

首页.png

之后的文章可能会讲到abstract和sketch library的结合使用，待续......

Uni.jpg