三步快速打造欧美风格UI界面

发表于2016-11-25
评论0 3.4k浏览

对于刚接触游戏UI或者对UI设计感兴趣的小伙伴们来说,大多会遇到一个问题,即便是掌握了一些绘制技法和软件操作方法,在面对UI界面设计时总感觉无从下手。这篇教程想要分享一些UI界面制作的思路方法,与大家共同探讨学习。(本次分享教程中的角色图片以及技能图标来源于《王者荣耀》,背景图片来源于网络,特此说明)


一、了解归纳
  开始尝试做一个界面练习时,需要做的第一步是搞清楚将要制作的这个界面到底是什么样的。它都包含了哪些功能和元素,哪些是重要的,哪些是次要的,哪些是不必要的。做到心中有数,知己知彼百战不殆。
  这里我们以本次活动的主题为例,选择制作一个:欧美风格的游戏UI子界面。首先我们需要收集一些同类游戏的界面作品,多看多观察,提炼出它们共同的元素点,参考借鉴同类游戏的布局,然后根据实际需要调整排版,画出草稿线框图,输出交互稿。



在游戏公司做项目时,策划会提供需求文档,在设计前需要我们多多与策划同事交流,了解清楚需求案各项的功能点和目的。大型的游戏公司还设有交互设计师岗位,直接给出交互稿,这一步会更快速一些。


这一阶段需要关注的重点:UI设计以买家体验为首要,了解买家习惯,尽可能方便玩家操作,帮助玩家快速了解游戏相关功能和重要信息内容。


  二、确定风格配色
  在交互稿确认后我们开始进入风格确定阶段。这一阶段需要大量收集参考图片,选择对自己有启发点的图片或作品,可考虑各种跨界图片的收集,不仅限于游戏类。可从色彩搭配、材质表现、造型等多个纬度去进行收集。



针对欧美风格的游戏特点做出一些自己的分析和总结。
  1欧美风的游戏作品具有狂野奔放、硬朗夸张等特点。
  2、UI材质表现丰富、有重量感,多包括:石材、木材、布料、皮革、金属等。
  3、色彩:欧洲国家的绘画作品,配色大多喜欢使用低纯度的暖色系色彩组合,北欧也有喜欢鲜蓝鲜绿等色彩。
  收集工作完成后就是着手制作风格稿的阶段,这是一个反复推翻重来的阶段,在做项目的时候想要一稿定乾坤可以说是不大可能的,需要做多种尝试,找出最为符合项目整体需求的方案。
1、选择合适的背景图片和角色图片(本次分享选用了《王者荣耀》的角色图片以及技能图标,背景图片来源于网络,特此说明)


2、拼接调整,制作成为背景底图

3、放入之前准备好的交互布局稿


4、输出风格稿
  这一阶段的小技巧:可以有效利用我们收集到的素材,先快速粗率拼出初稿,不断讨论找到感觉。尽量避免在这一时期抠细节和纯手绘稿刻画效果,时间成本非常高。


三、细化打磨
   风格方案确定后剩下的就是细化打磨的阶段,这个阶段就像进入副本,开始集中精力反复打磨,各种细节表现刻画制作。刻画表现的方法包括:纯手绘制作、矢量制作、两者结合。
  同样需要收集各种参考图片


本阶段需注意的重点
  1、不可太过夸大突出UI本身的装饰物件,避免喧宾夺主。
  2、尽量考虑元件的共用,避免大面积特殊装饰物,便于减少输出时的切图大小,节约游戏美术资源。切图相关的一些方法和技巧是需要在这一阶段提前考虑到的,所以新接触UI设计的小伙伴们可以先了解一下,避免设计出的作品好看不实用。
  输出设计稿



  由于看到活动的时间太晚,制作时间较短,未能完善最终稿,还有很多地方未做出最后的效果和设计,为能赶上活动截稿时间就此发布。本次教程主要是分享整个界面制作的构思和创作过程,下次有机会将做更完善的准备。谢谢观看

如社区发表内容存在侵权行为,您可以点击这里查看侵权投诉指引