恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
女性向游戏UI设计-作品复盘
1.0°
2024-09-24 原创文章 教程 举报 192 0 2 0

大家好,我是叶子学堂24B的学员思思!

很荣幸受到文文老师邀请,在叶子学堂的公众号上分享我的作品,这也是我转行后完成的第一套作品。

我是一个很不典型的“工科生”,22年计算机专业毕业后,陆续在实习与工作中尝试了PM、用研、品牌咨询和系统策划这些职业;因为小时候积累了大概十年的美术基础,在这期间也给4A广告做过外包设计,给公益公众号画过漫画,还参与设计了一款腕表最终在小米有品商城上架,这也为我转行到GUI打下了基础。

而促使我决定报名叶子学堂的契机,也是看到公众号上叉歪同学的复盘分享,他跟我一样也是策划转UI,给了我很大的启发和动力,于是来到叶子学堂进行系统的学习。

这次复盘我想主要分享三个模块,是我回顾这次创作过程后觉得比较有意义的三个节点:

  • * 风格的确定——关于「关键词」
  • * 细节的填充——关于「图案」
  • * 氛围的完善——关于「素材应用」


风格的确定

关于「关键词」

「确定风格」是我一开始画这套作品就知道,并且后续花了较多精力去攻克的难题。因为是第一次画,又是跨行进入,经验不多,基础的UI规范、用色技巧、细化方法等等,这些都是我在「确定风格」途中迈过的一个个坎。期间感谢文文老师的陪伴和指导,让我快速冲出新手村,把之前关于美术的积累在短时间内发挥出来。

确定风格的过程,我事后总结,就是经过一张张图,不断填充和完善「关键词」的过程。

第一张图是课程中的一次作业练习,这里我就有意识地开始探索作品集的风格了。在刚报班的时候,我就决定接下来要做一套「女性向」风格的作品,所以第一张图,尽管很多地方都画得不成熟,也没想好风格的全貌,但定下来了第一个关键词:女性向

第二张图是在上一张的基础上重新画的,找了新的立绘,确定了紫色的暗色调,同时受到《世界之外》的影响,加入了第二个关键词:线

《世界之外》参考图

这张图中我用比较多「线条」的元素去勾勒形状,补充装饰。给老师反馈后也有一些问题,比如界面里的线有点细碎,缺乏层次;背景光有些单调等。

由于是作业练习,这张图到这里就没有后续修改了,我把问题理解消化后就开始画下一界面。

第三张图是一个活动界面,受到《闪耀暖暖》某套服装系列的启发,想给画面一些场景氛围,就有了第三个关键词:星空/宇宙

《闪耀暖暖》参考图

我想表达的情绪是宇宙空间的幽暗寂静,所以画面中大面积都是暗色,并加了少量点睛的亮光来烘托氛围。(当时想的还有一个元素是「音乐」,所以界面中间用了一些音符,但随后这个元素就被我迭代掉了,这里不多提。)

同样,这张图也延续了之前「线」的关键词,奖励框体用线表达了相纸、回形针这些实物,界面中间的曲线、标题字的背景装饰,同样出现了线。

但这张图也有不少问题,跟文文老师沟通后,有以下要注意的点:

  • * 界面中纯白较多,应当避免,需要给一些色相

  • * 界面中间的曲线,层次有点弱,显得单薄

  • * 奖励框的比例可以细长一点,现在显得有点木讷

  • * 奖励框的亮起特效,目前有点粗糙,可以多一些层次

  • * 奖励框的标题字需要和背景拉开差距,现在不太明显

  • * 最右侧奖励框,亮部太亮,显得过曝


其实这里最主要的问题是对于「线」这一关键词理解不够,导致界面里的线条显得苍白单调,这一问题在下面几张图中同样存在。

第四张图,主线选择界面。一开始对于它的构思,是想在构图上做些好玩的东西,所以选择了俯视视角,会觉得比较有冲击力。

期间又完善了作品的世界观,所以这张主线选择界面的设计就是:一颗奇迹石照亮了三扇门,每个门通往不同的世界。这张图其实画到这里我也觉得看起来怪怪的,于是就问了指导老师——文文老师,这才发现原来存在很多细节上的问题:

  • * 光影不合适。图中最亮的地方打在了地上,而需要突出的中间的控件却是暗的

  • * 文字透视推进的不彻底。画面因为构图的原因就是要重表现的,文字部分的透视做的不彻底,反而会破坏整个画面的感受

  • * 颜色方面,显灰:重没重下去,轻没轻上来;显脏:细碎的线比较多,地面纹理也需要再干净点

这张的构图我觉得继续画下去可能有点驾驭不了,所以就到此中断,试了一个新的构图。

到了第五张,还是主线选择界面,重新出了两版构图方案,想法是宇宙空间中漂浮着三扇门,每个门中有象征着星球的球体。

从中选择了一版进行细化。

画到这里,会觉得之前「女性向」的关键词有所丢失,并且遇到了一个瓶颈:不知道如何深入。

大家也能看出来,画面有了初步的氛围,但是每个模块的细节似乎只有单调的轮廓线。这时课上老师正好讲到了「图案」的重要性(下个模块会展开讲),于是我就以这一点为突破口,专门花时间琢磨框体纹样的设计,这才挣扎出来,有了下一张图。

第六张,在补充图案设计的过程中,定下了第四个关键词:塔罗,界面里用了星/月/日这些图案元素,并且用复杂但有规律的线条将线组合成面,构成完整的装饰模块。

构图方面,原本三个框体零散排列看起来有点乱,所以更改了构图透视,让中央三个框体的排列变得有规律。除此之外,拿掉了原本左下角的星石,交互上换成了左右滑动,更直观。

虽然这张图有了一些完成度,但其实当时还没有办法完全确定下来风格。你会发现这张图远端的背景里,我用了一些写实风格的碎石点缀,但其实这些点缀与画面近端所呈现的梦境、奇幻是有所不搭的。

当时我也意识到了这个细节,但没有想到更好的解决方案,就先开始了下一张新图。

第七张,这张图想画的是主界面,将「线」关键词拓展,用了较多「曲线」元素。画面主体是暗色调,右上和左下有亮光相呼应,协调平衡。在处理画面中央每个点击模块代表的实物时,想到1999的风格,就把它们做的有点复古风(用了比较明显的波点和异色手写体等)。

《重返未来:1999》参考图

但做到这里我意识到,这种复古风(起码是1999那种程度的复古)跟我前面界面想要传达的女性向的闪耀精致是不太搭的,但一时间也没想好这张图现在要怎么改,所以也先搁置住,希望在下一张图上,能把之前的这些对于风格的顾虑和摇摆做好统一。

第八张图,角色卡界面,终于确定了风格。这张沿用了前面积累下来的元素:女性向、线、宇宙的幽暗(紫色暗调)等,在画的过程中,也补充了一些新的元素来统一前面几张图想表达的感受,于是有了第五、六个关键词:闪光、倾斜

用极亮的光束与暗色的背景产生对比,能让暗的部分显得更暗,也让画面有了一些「闪耀梦幻」的情绪。画面在竖直方向上做了倾斜处理,希望能打破原有网格界面的枯燥,增加一些趣味。

通过这张定下来了作品集的风格之后,我开始着手调整前面几个界面,把风格向这个方向靠齐。

主线选择界面,做了如下调整:

  • * 调整色相为紫色,加强中央区域的亮部,让整体氛围和整套作品更搭

  • * 细化了画面下方的选择提示条和右下角按钮的背景曲线

  • * 远端背景的写实碎石换成飞鸟,更符合梦幻的气质

  • * 画面右上角加了一些闪烁的虹光,增加氛围感

主界面,做了如下调整:

  • * 去除原有的复古调调,旋转木马等实物改用模型(原来是我用AI生的图,能看出来马腿处有一些瑕疵)

  • * 增加画面主体曲线的层次。原本的曲线有点硬,修改后给曲线整体加了点发光效果,在一些比较硬的边缘周围新增虚化的曲线层次,再用蒙版擦出一些清透的感觉

  • * 强化右上角「开始」模块的层次。原本的按钮周围有很多杂物(卡片框、星球等),会分散走核心按钮的注意力,所以这次修改就弱化了这些装饰,强化主体

  • * 背景提亮,并增加丰富度。原来的背景看着很暗,也比较单一,所以就把背景的星球稍微提亮了一点,背景中增加一些有动势的流星点缀,不至于看起来太空旷

  • * 增强光影氛围,原本左下角的亮光区域有些单一,修改版增加了一些光晕效果


  • 而后,又根据角色卡界面的风格,延展出了剩下的五张图,这套作品就算完成了。

本模块到这里就结束了,总结下来,我觉得风格的确定是靠一些维度的限制来实现的,这些维度可以是关键词,也可以是其他,重点都是告诉自己,告诉读者,这是怎样的一个画面,这个画面要用何种方式填充细节。在画的期间我总结了一套方法,意在提供一些维度来更好地做限制,见下图:

如果把这套风格对应填进去,就是这样的:


细节的填充

关于「图案」

还记得老师在一堂课上讲过:“UI工种和原画工种拉开差距最主要的是图案(图形)设计能力”,之后他又强调了图案设计能力考察在求职过程中的重要性,所以我在后续画界面的过程中就有意识地关注了这一块,也尽量多留出图案设计的空间以供练习。

前文说到在画主线选择界面的时候,是「图案设计」帮我突破了瓶颈,这里详细聊下。

图中的框体,一开始是下图的样子,可以看到,有点简陋,装饰的东西只是简单常见的星、月,组合形式也是直给的矩形框。后面课上老师讲到进行图案设计之前要先明确风格要素,顺着这个思路,我开始了接下来的设计。

一开始,我对于这个框体最终呈现的效果是有构想的,不想要太厚重,所以主体是由轻盈的「线」所构成。可是只有这一点并不能支撑我进行接下来的设计,所以就要寻找其他的风格化要素,来给这个框体层层加码,最终让它变得丰富有看头。我后面想到的关键词是「西方」和「塔罗」,于是就找了很多欧式画框,和一些带有塔罗要素的装饰线,尝试从中提取设计语言。

最后的效果就是上图展示的那样,框体上下两端用曲线缠绕成比较优美的形状,然后加入「星」和「泪滴」这些轮廓形状点缀;框体左右两侧借鉴了参考中的某个画框,用密集排列的竖线搭配「点」来填充空白部分;框体中间区域觉得有点空,就借鉴塔罗常见的方形+圆形的嵌套组合,再用点状的虚线填充四角,让框体四周也有细节但不至于太闷。

接下来趁热打铁,用类似的表达方式做了三个地点的图形徽章:

  • * 永恒城:用星星+椭圆轨道表达「永恒」(象征天体运转不息),再加上城市的图案;右下角做了破形处理,显得不死板
  • * 宵色海岸:月形表达「宵色」,海浪曲线表达「海岸」;上半部分用倾斜的直线表达流星划过天空
  • * 边境以东:选择炮塔和旗帜来表达「边境」,同时在炮塔上点缀一些泪滴图案,不至于失去原本的女性向风格特征;因为前两个徽章分别出现了星和月,所以这里就用日的概念,在旗帜上做了放射的光芒

为了丰富表达,三个徽章中又都加入了点状虚线作为装饰。

这套图标风格确定后,后面的设计也沿用了这一标准。

总结来看,「图案设计」真的在填充细节上帮了我不少忙,最开始画的界面会显得单薄、没东西看,多半是图案设计没到位。我觉得每个图案其实都是一副小型的画作,也应该五脏俱全,也该被郑重对待。一幅幅小型画作聚集在一个界面里,整体完成度自然就高了。这一点在众多商业游戏上均有非常好的体现,值得我们后续多多研究,好好学习。


氛围的完善

关于「素材应用」

说起「营造氛围感」,其实是我在画图过程中偶然间悟到的技巧。

还是这张图。当时画到一半(图中上半部分),会觉得图案什么的也加了,为什么看起来完成度还是不够。分析原因,我也知道是背景看起来单调,都是黑黑的一片,没有变化,可问题是接下来要如何增加变化呢?

带着这个困惑和文文老师沟通的过程中,她发的一张《世界之外》的宣传图给了我启发,于是细细研究一番。

乍一看这张图,会发现同样是暗色背景,它就不会显得单调,反而很有氛围和意境。研究过后发现,图中会出现很多用来营造氛围的「素材」,比如光束、光斑、虹光、噪点肌理、光粒子等等,正是这些素材,让画面丰富了起来。(当然,「素材」也可以自己去画,我对素材的定义是易用性较高的装饰元素,这些东西完全可以自己从零去画,只是选择现成的「素材」效率更高~)

有了这个收获,我就尝试给原有界面中加了一些「光」的素材(上上图的下半部分),画面立刻变得有了氛围感,完成度也提高不少。

可以看到,之后的几张图中也试着继续沿用这一方法去完善氛围。

还有一个感悟也可以借此分享下:多多利用AI。在叶子学堂前面的课程中,业荣老师花了很大功夫去讲AI的知识,也强调了AI的强大和重要性,所以在画作品的时候,我也尽量多试着用用AI。下面这张图没有用到太复杂的AI技巧,只是用了一个扩图,但我觉得效果很好。

原来的卡面资源是接近4:3比例的竖版图,在登录奖励界面中,我一开始想把这张最终奖励的卡面放大处理,但试了几版效果都不理想。后面就想到,能不能营造一个更沉浸的环境,让整个卡面都变成界面的背景,卡面中的人物就置身于这个环境中。于是就用AI出了几张扩图,将左边的咖啡厅区域延申,变成左侧标题和奖励框体的背景,再处理下明暗和光影,就完成了。


以上,就是这次复盘的全部。再回顾一下:

  • * 用「关键词」锚定风格。这趟确定风格的过程实在不容易,经历了很多张图,才用一些关键词将风格要素确定下来。我总结了一套确定风格的脑图,后续实践过程中也一定会再去完善这套方法。

  • * 用「图案」填充细节。图形设计能力对于GUI工种来说十分重要,也很大程度上影响着界面的完成度,在这一点上值得深挖。

  • * 用「素材」完善氛围。我觉得氛围感大多是光与影的功劳,搞定这两块,再提高自己运用现成素材的能力,就能更好地运用技巧影响氛围,再用氛围传递情绪。

希望对大家有所帮助(鞠躬)。


写在最后

前几天看到游科创始人冯骥老师的一句话,分享给大家:“优先打动自己,再找市场交集。”

我职业生涯的选择是「找到自己」的过程,画这套作品每一张图的过程,无不都是在「打动自己」。冯骥老师说得对,只有先让自己喜欢上所从事的行当,所费心纠结的每个日夜,这个过程打动了自己,成果才有可能影响别人,才有可能创造出有价值的事物来。

画这套图的时候我最常听那英在今年歌手舞台上唱的《一颗星的夜》,我觉得和这套作品的风格莫名有点搭,也和我当时的心境有所牵连。

“就在明天 告诉世界 告诉自己没辜负这黑夜”

“所有付出换我自由的路 所有付出换我梦中的路”

感谢今年与叶子学堂邂逅,感谢叶子学堂的每位授课老师,他们真的十分专业,又平易近人、真诚十足;感谢一直陪我完成这套作品的文文老师,她在我迷茫困惑时鼓励我良多,又在我困难的节点给予指导和帮助,感谢你们!

最后,来看一下这套作品的汇总吧,谢谢你花时间看完这篇复盘,希望我们未来都能快快进步,越来越好~

素材来源于网络,仅用于个人界面设计中使用


文文老师点评

思思同学是一个很努力也很认真的同学,作为一名转行的学员,思思同学在做这套作品的时候需要兼顾上课,工作和作图三个方面,虽然进度稍微的有点缓慢,但正所谓功不唐捐,念念不忘必有回响。

每周我都能看到思思同学在作品上的进步,也总能给老师带来不同的惊喜。

因为是跟课程一起做的,所以很多综合性的问题没有很好的融合,前面的一张界面做了比较多的尝试,也为他这套作品最终稿奠定了一定的基础;

在做到 主线选择界面的时候,思思当时给这个作品的一些设定不是很能说服我,对于选中态我们之间产生了一些分歧,思思第一版用到的是投影(暗色)选中,未选中反而是亮光的,对于整体色调是暗色的界面来说,非常的违背交互逻辑和用户习惯,所以我当时给他快速的p了个效果图(选中态为亮光);然后再后面的细化方案中,思思同学通过版式课程学习后,一个界面做了多种方案的排版方式,尽量的让界面有创意

当时思思受到《世界之外》的影响比较大,导致做出来的作品很难摆脱对标作品的现有框架。

这其实也是很多同学都存在的问题,即只看到了市场上成熟产品所呈现出来的视觉效果,却忽视了影响这种视觉感受的内因。

所以为了跟《世界之外》区分开,我给到很多关于曲线的设计点(世界之外的曲线设计不多,更多的是透视),让这套作品尽量的“脱离”世界之外的影子,当时正好是王者荣耀的元流之子赛季更新,里面很多的流线设计引人注目,所以就把这个想法给到思思,在后续的界面中也都有体现;

至于改进的地方,比如角色卡界面,整个界面的流线感觉不是很多,基本都是倾斜的块,如果能改成流线的可能会更好。

除此之外标题、七日登录等活动的标题字体设计,也有很大提升空间。

不过,作为一个策划转GUI的新人设计师,在不脱产的情况下,依旧坚持学习,并逐步实现作品的构建和迭代,其实是特别的不容易。

虽然目前来看,作品中依旧存在不成熟的地方,但如果能给思思同学更多的时间,多跟老师交流沟通,多经历落地项目,我想他一定会做的更好,在游戏ui设计的道路上也能走的更远!

最后也预祝思思能进入自己心仪的公司和项目~

Powered by Froala Editor

更新:2024-09-24

收藏

0人已收藏

叶子学堂

叶子学堂 官网:http://www.yezixt.com

  • 211

    作品

  • 7271

    粉丝

  • 3

    关注

  • 黑神话的界面如何诠释东方美学?
  • 为什么海鲜仔“超鱿型”?喷射战士品牌考据
  • 你永远可以相信A社的审美 | 游戏UI浅析
  • “超鱿型”的鱿鱼体是如何被设计出来的?
相关标签

    猜你喜欢

      2024-09-24 原创文章 教程 举报 192 0 2 0

      女性向游戏UI设计-作品复盘

      1.0°

      你确定要举报女性向游戏UI设计-作品复盘

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2024年09月24日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      2
      0
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录