L10官网FAB简单总结

从L10倩女幽魂手游项目成立初开始，就有幸负责了L10官网及fab的主视觉设计，下面针对该项目视觉设计做一个简单小结，还有许多需要改进的地方，还望大家多多指点~

常规布局和信息

目前手游类fab及官网首屏（重要信息尽量在800以内）除了slogan，视频播放按钮，logo，分享，进入官网以外下载区域必含有的标准五件套：苹果下载按钮（牛逼哄哄的苹果爸爸还不允许更改按钮的颜色造型等等），安卓下载按钮，桌面版本下载按钮，二维码及礼包按钮，偶尔还会添加一些小彩蛋等。

设计方式

一般官网的fab及首页都会有专业的原画大大们提供kv的原画素材，设计师们需要根据原画的素材和游戏的风格进行设计发挥，由于设计大大们都比较喜好大视觉，留白等等高逼格的设计风格，所以在不破坏画面完整度的同时，都希望尽可能少的放上信息，因此这五件套说多不多，说少不少，分散放会觉得画面散，合起来放在太明显的地方又会觉得破坏了画面，所以一般会使用这几个方法：

1.选择和文字结合放在靠边角落或者画面的中心，这样既明显又不会很突兀

2.在自适应的情况下，也适用于全屏视频的形式，打破主视觉集中在1200以内的范围，放在左右两边

3.自由与画面中的主体元素结合例如画面中有卷轴时，可以做为卷轴的挂饰装饰

SLOGAN设计

倩女幽魂从端游到手游，整体的游戏风格明确，玄幻、唯美古风，由此在字体的选择上以毛笔字为主，毛笔字以笔画柔软，飘逸为优，不能太过纤细，对比也不能太强~~

设计方式

根据实践，选择了三款比较适合字体，也找寻了一些毛笔字网站，当然也少不了小伙伴贡献的毛笔字（毛笔字一般字库都会缺胳膊少腿，字体并没有那么完全，所以需要在线生成补缺）

三款字体：禹卫行书简体  祥南行書体   流丽太行书 

毛笔字网站：http://sf.zdic.net/sf/ks/0203/402cfc50be025d8d8bf56d9182322dc3.html

                    http://www.epinv.com/online/

目前，我大致将slogan字体分为一文一武两种

文将

武将

这两款字体设计都不是很难控制，在开始推荐的3款字体上进行变形即可，文将：收笔时增加一些弧度或者细收尾；武将：首尾时注意一定的气势，留一些笔锋

在这里提供一个小技巧，适合不会写，但是会画的同学们，直接在字体上进行初稿绘画，最终再勾勒成型。

整体画面的处理

设计方法

又爱又恨，是光效（光效对于动画和技术大大们那个狠呀~~~)

为了避免复杂背景图和文案背景过度的不自然，一般我会使用在文字背后放大的光效，来自然结合，这样画面不会很突兀。

尤其适合kv色调略偏鬼畜或者画面过于丰富，然而营销还必须要保留原始画面的时候。（下面这张原画还是美美哒，但是背景内容很多~~）加了光效，结合场景，像是照进屋子里~~~

从设计方面先分享总结以上一些常规内容，总的来说Fab一般有固定的kv，所以需要从细节上去处理不同的组合，从kv本身出发，去用一些元素，让画面看起来更加完整，增加一些小元素也可以增加画面的趣味，灵气。

小彩蛋（也是之前有踩过的坑）

1. 整体画面设计到中途时可以用黑白模式看下黑白灰的层级关系，尤其适合画面内容过多的时候。

2. 借鉴好的设计，以防出现雷同，有一个小诀窍借鉴了颜色就不要看板式，借鉴了板式就不要看颜色，就只借鉴其中一个，这样做出来就不会雷同，每个人设计思    考的方式都不同。甚至会比参考的更加出彩~~

3. ps里面的动作记录，可以批量产出（文件—自动—批处理）

4. 当psd文件长时间设计会变得很大，电脑会很卡，此时可以全选中右键复制组到新建，即可，瞬间瘦身哦~

总结到此就告一段落了，不足之处望多多指出，也可交流~~~~~~ (*￣︶￣)

网易云新用户大礼包：https://www.163yun.com/gift

本文来自网易实践者社区，经作者陈蕾授权发布。