吐血推荐分享网页手机游戏UI设计小技巧

Question

吐血推荐分享网页手机游戏UI设计小技巧，这些技巧不仅仅是游戏设计，平时我们在处理图片，设计海报封面等地方的时候也能用到这些实用的设计小技巧。

1、适当的锐化可以在一定程度上提高素材的精度

位图在进行拉伸或者缩放的情况下，都会有不同程度的质量损失，适当的锐化可以在一定程度上让缩放的素材看起来更精致，建议复制一层锐化，这样可以通过调节不透明度来控制锐化的程度。

2、相对的过度的锐化是应该避免的

左图是锐化了两次以后得到的效果，人物边缘及身上的线条出现了不同程度的疵边效果，这是锐化过度造成的，大家一定要把控好锐化的度，不要盲目依赖。

3、素材的选择要注意与整体画风一致

左图的金币属于Q版的素材，与偏古风的画面明显不搭，右图的金色铜板就很贴切，大家在选择素材的时候也要注意素材与画风是不是同一类的。

4、从更真实的角度考虑画面元素的合理性

试想一下，如果立块板子在沙滩上，板子一定会陷入沙子里面，有沙子遮住板子下方是很合理的，多从实际的角度去考虑画面塑造的合理性，当然前提也是不要过分影响到功能的实现。

5、使用水墨元素时切忌墨迹周围过于杂乱

杂乱的墨迹边缘会给人躁动和杂乱无章的感觉，不管是小范围的交互元素、毛笔飞白，还是大面积的墨迹铺底，过于杂乱都会使人产生不舒服的感觉。

6、强烈的冷暖对比更能烘托出画面的强烈与对抗性

如果想要表达对抗或冲撞的感觉，那么在你能力和素材允许的情况下，强烈的冷暖对比都将是表现最直观的不二之选。

7、搞清楚画面的主题究竟是什么，该弱化的元素不要吝啬

左图远处的城楼我拼凑了很久，但是出于合理性，以及突出人物眺望元素的高大上感觉，还是直接用烟雾进行遮挡，拼了半天遮住了不可惜么，答：不可惜，因为合理。

8、对字体进行简单的二次处理，有时会有意想不到的效果

左侧是直接使用的字体（Agency FB）加外发光的样式，右侧结合蒙版对每一个字母的中间进行了2像素的切割，是不是看起来很有科技感了？

9、标题在受光最强的地方可以考虑增加溢光的效果

这是一个生活中的自然现象，在受到强光的照射下，物体受光最强的部位一般会出现溢光的现象，同样物体受用，文字效果也受用。

10、有动势的素材可以在素材的周围加点动感模糊

左侧的人物虽然有动势，但是感觉像是静止的，右侧通过给人物边缘添加动感模糊效果，让原本静止的人物真正的动了起来。

11、永远不要使用低质量的素材

这一点不止针对于网页设计，相信整个设计领域都会很抵制低质量的素材，一句话就是渣图使人挨饿…

12、给物体添加投影时，不要让物体看起来像纸片一样贴在墙上

很多新手都会出现的一个问题，投影的距离和大小一定要根据实际情况去实时调整，要注意的是物体是有体积的，那么加投影的时候要适当加大一点点距离和大小。

13、保证识别度的前提下，尝试让主体凌驾于标题文字上方

这张图可能需要你仔细的观察，右图的文字置于人物身体后面的，有时候主体稍微遮挡一部分标题文字，在不影响识别度的情况下，可以让画面的层次感更强。

14、结合环境对文字变形可以让你的画面更出彩

考虑到《TOS》偏中世纪的复古奢华画风，对标题文字做了类似哥特的处理形式，是不是比左侧直接上大标宋的效果要好很多？

15、充分发挥你的想象力，让页面的形式丰富起来

左侧专题采用了常规的形式，大标题加5个平铺的入口，而右侧换了一种形式，将画面中的所有内容元素做在一个类似心形玫瑰花风铃的上，右侧的形式就丰富了许多。

16、切记！书法字体慎用描边效果

这一点是一定要切记的，因为混合选项中的描边在向外扩散的过程中会逐渐趋于圆润，会使整体变得萌萌哒，大家可以在描边的基础上手动添加毛笔笔触，以保证毛笔字的整体威严。

17、书法字体的选择也要分情景，并不是越霸气越好

书法字体不是只有苍劲有力的，也可以是清秀委婉的，需要根据不同的使用情景去挑选，对于上图清秀典雅的服饰风格，显然右图的书法字体看起来跟整体会更加搭配一些。

18、给画面中的发光元素添加环境光

这是一个很容忽视的细节，但又是生活中很合理的一个现象，光效、火焰等这些素材，周围应该会有淡淡的环境光晕，大家可以手动加上。

19、用有趣的形式吸引用户的交互操作

左图只是一个普通的手绘签到按钮，右图增加了一个小人（其实是个GIF动图，在不停的拍打按钮），增加了画面的趣味性，也在一定程度上吸引了用户的点击操作。

20、多沟通，是少走弯路的有效途径

很多情况下，需求方和设计师的思想并不在一个维度上，当你发现这种情况的时候，一定要去多加沟通，引导他们，如果他们理解的“大气”就是“大的透不过气”，那么恭喜你：你中签了！

在风格描述不明确的情况下，尝试让需求方找些能够表达他们风格的图作为参考。