《书与花》乙女风作品复盘

上海/UI设计师/1年前/609浏览
《书与花》乙女风作品复盘
“叉歪” 同学由 “23K、业荣老师”指导,以下为学生复盘
01  幻梦的初始
我叫XYXYcoord,简称叉歪,曾创立过一款独立游戏项目。2019年毕业时从事平面设计,与GUI行业没有交集。但那一年的《明日方舟》吸引了我,产生了一丝当GUI的想法,但平时工作太忙,业余时间还在搞独立游戏,所以没采取什么行动。21年以策划背景进入了游戏行业,这时候《重返未来1999》开始宣发,平面设计与UI结合的运用更上一层楼。我太想钻研其中奥秘了,化学反应下,我抛弃了策划,决心成为一名GUI。然后在朋友的了解下,知道了叶子学堂,就报班了。
《书与花》乙女风作品复盘
Collect
这套作品集的前身是2021年时我给朋友的独立游戏做的一套UI,现在来看这套UI真的很菜呢,问题种种。
《书与花》乙女风作品复盘
Collect
游戏玩法是魔塔那种,剧情是走文艺路线。讲述一名少女逐渐自我救赎的故事(此处省略很多字)最终意向选用了蒲公英(代表女主)、书籍(女主的记事本)来展开设计。
02  入梦的懵懂
一开始立项的时候就沿用了这个方向,故事设定成了一名失忆少女一场大梦之中,遇到了过去的形色各异的人。蒲公英拓展到花,书籍拓展到纸制品,故事调性往古旧、回忆的方向走,便设计了最初的情绪板和方案
《书与花》乙女风作品复盘
Collect
情绪版和初期方案
《书与花》乙女风作品复盘
Collect
一开始我根本没有把角色当成UI的一部分。或许是玩FGO玩的,他角色画风不统一、风格不统一,所以从来没有觉得这两者之间会有关联(一些个人的拙见)。23k老师提出立绘不搭这点之后,我就开始找立绘并以立绘为主导进行了第二次大修改,重新根据立绘的蓝色蝴蝶、紫色花再加上纸制品的概念修改成了下图的样子。
《书与花》乙女风作品复盘
Collect
此时恰好课也上到了关于UE的部分,让我明白了从一开始UE就有问题。之后参考1999和终末地,把旧UE整个换掉,同时把画面偏冷的情感往暖的方向去走。
《书与花》乙女风作品复盘
Collect
现在的问题是画面被我调得太暖了,白平衡直接崩掉,显得画面特别闷,而且周围的UI元素都是放在桌面上的,这就显得角色也是一个放在桌面上的纸片,不符合逻辑。最终这个界面从角色信息界面改成了关卡选择的界面。期间23K老师给了我思路方向,把手账地图的概念结合到画面之中。
《书与花》乙女风作品复盘
Collect
《书与花》乙女风作品复盘
Collect
对画面的白平衡进行了调整,找了大量的手账元素做参考设计,同时关卡选择界面是地图铺在桌子上,也更有合理性了,看上去便协调了很多。
其中还有一个小细节,一开始作为关卡点的信封很简陋没有细节,而且拐角很锐利,不符合作品的柔和的调性,便进行了优化迭代,提高完成度。
《书与花》乙女风作品复盘
Collect
《书与花》乙女风作品复盘
Collect
就这样,这套作品集的风格稿定下来了,便以此作为参考进行延伸设计。
到此为止的这个阶段的最大的几个收获便是:
1、角色与UI是一体的,要相辅相成,两者毫无关系是不行的。
2、UE是UI相当重要的一部分,与UI的关系就好比骨骼与皮肤。
3、UI画面的疏密、起伏、明暗的节奏能打破画面死板的感受。
4、别搁着一天天的想搞原创,多找点优秀参考比什么都实在。
03  翩梦的轻触
风格稿完成后紧接着做的界面就是章节选择界面,因为我想做一些海报。《幻梦》、《春露轻语》、《暖夏回响》、《秋暮童话》、《深冬繁星》、《迈出》便是女主从入梦到走出阴霾的历程,我最喜欢的是《秋暮童话》篇章的故事(此处省略很多字)。话说回来,章节界面的布局是受到了1999的影响,所以初稿整个界面就是参考他来做的。
《书与花》乙女风作品复盘
Collect
《书与花》乙女风作品复盘
Collect
我又犯了空间上的问题:海报离墙太近、桌面延伸太浅,让画面显得很压抑,而且海报的标题都是在顶部,海报之间的节奏就变得平均、无聊。还有左上角阳光照射的光感没有做出来。
有个细节,我初稿挂牌的绳子连接处,视觉上感觉是在牌子后面的,如果是现实情况的话牌子就会翻下去,不太能这样稳稳挂住。这一刻我明白了,做设计最终还是在描绘现实,特别是拟物类的,更要符合现实的法则
《书与花》乙女风作品复盘
Collect
在修改的时候,我把桌子移除,让牌子与墙的距离拉远,加了小牌子营造层次,都是为了让空间体现出来。至于初稿里的植物前景,因为我担心与海报抢视觉,便去掉了,但这却……
《书与花》乙女风作品复盘
Collect
将再稿给23k老师看后,第一个反馈就是画面色调太油了,不透气,建议我把植物加回来,而我担心的抢视觉问题,其实海报被框住之后,它已经算是组件的一部分了,被限制在了框里,加上植物打破这种拘束反而是好的。然后便得到章节选择的最终稿件,把植物一加上,画面一下子就透气轻快了,之前那种沉闷感觉烟消云散。
《书与花》乙女风作品复盘
Collect
做完这张界面最大的几个领悟是:
1、设计不能太一拍脑子脱离现实,特别拟物类的更要符合现实规律。
2、节奏感很关键,要避免过于平均,不然就绝对化的平均。
3、光很重要,永远要记得光。
04  长梦的深潜
章节界面完成后,我原本是想到了一开始废弃的角色信息界面,但奈何没有什么灵感,便打算从时装界面过渡一下。出门上街的时候,逛到了服装店,以此为灵感,就把时装界面设定在一个拍摄试衣间。便以胶片、舞台、时尚杂志封面为灵感大概做了个初稿。
《书与花》乙女风作品复盘
Collect
初稿被指出的一个问题是,背景显得很3D,角色太2D了,而且背后文字的穿插会显得很诡异,感觉是浮空的,而且UE部分左边太乱太花,交互也不对。
在思考怎么修改的时候,听了23k老师的公开课,讲到了设计的目的是要考虑用户需求。我意识到这套作品集在一开始并没有想这些,甚至被剧情框架给束缚住。我改变策略,把这个时装界面改成了任务界面和主界面这两个较为常见的界面。换个思考方式思路就清晰了很多,
《书与花》乙女风作品复盘
Collect
《书与花》乙女风作品复盘
Collect
这张界面的问题是,和左边平滑节奏相比,右边节奏平均又笨重,画面不舒服。“故事”、“邂逅”的控件底衬不够实,背景透过来会显得画面很花。此外,主界面角色下方为了压边,加了一抹暗色,被业荣老师指出显得很脏。
《书与花》乙女风作品复盘
Collect
最终定稿,控件更小巧精致。给“故事”、“邂逅”的控件底衬加了模糊,透过它看到背景之外又不显得眼花。同时把背景拉远了一些(加了一层光),让层次更分明。
《书与花》乙女风作品复盘
Collect
接着来到活动弹窗的环节。
其实活动弹窗的灵感比主界面更早产生,但没有主界面做背景的话,活动弹窗就空洞洞的。这个弹窗一开始被老师指出和我整套作品风格不搭,因为我做这个弹窗的时候风格并没有跟着作品走,而是跟着立绘走了,所以色调选了较深的暗色。
《书与花》乙女风作品复盘
Collect
这个初稿给业荣老师看过之后,被指出颜色太黯淡了,看上去灰灰的。之后老师帮我调整了一个大方向,把背景压暗,还将弹窗内的颜色丰富、提亮了很多。
《书与花》乙女风作品复盘
Collect
在业荣老师调整之后,画面效果一下子就出来了。这其中最让我思路打开的是,老师居然大幅优化了立绘原本色调。在我之前的认知里立绘是不敢改的。但其实在GUI工作中立绘也是素材的一部分,根据需求调整色调是项目里很常见的需求。此外,业荣老师还提出,尽可能避免立绘暗部出现大面积死黑色,这会让画面显脏。暗部带有色相,会让画面色彩丰富起来。
到此为止,我最大的感受就是:
1、节奏感是从大到小由里至外都要有的,不仅仅是宏观层面,微观层面也要注意。
2、元素尺寸很重要,大一些小一些的感受就会非常不一样。
3、立绘、素材最终还是要为画面服务,只要是画面上的东西都可以根据需求调整。
05  大梦的苏醒
到此为止,所记录的都是我创作过程中的思考,关于技法并没有记录太多,但其中还是用到了很多以前没用过的技法,特别是AI(图像生成)相关的
《书与花》乙女风作品复盘
Collect
《书与花》乙女风作品复盘
Collect
《书与花》乙女风作品复盘
Collect
作品集里贯穿始终的植物们其实都是AI生成然后手绘修正的,这在效率上提高了很多,整个主界面背景也是AI参与的。在找不到素材卡手的时候,AI真的能帮很大忙。
《书与花》乙女风作品复盘
Collect
我最后制作的界面,就是登录界面了,是这套作品集最开始想好的画面,为什么放到这里讲?因为登录界面也用了AI参与。
故事里主角一入梦就是在一片花海,所以登录界面就选定了花海,在花海之上我加了许多能勾起回忆的元素,千纸鹤、胶卷、旧书桌、老窗户,还有记录过去的书。因为是梦里,所以真实性就不那么重要了,物体的尺寸我就给的很夸张。
《书与花》乙女风作品复盘
Collect
到具体执行的时候本来我想试试看能不能用AI出个大概的方案,结果因为不同的东西多了,而且是以这种奇妙的方式组合在一起,AI根本理解不了要生成什么,所以我只用AI生成了一片花海,至少这个效果是很好的。
《书与花》乙女风作品复盘
Collect
至于花海上的物体,我选择了用3D辅助一下,稍微搓了点简单玩意输出放到花海里,再用AI跑一下统一画风。
《书与花》乙女风作品复盘
Collect
最后调个色、处理一下物体的穿插细节和光影,就得到登录界面的背景了。
《书与花》乙女风作品复盘
Collect
最后加上UI和标题。
《书与花》乙女风作品复盘
Collect
以上就是这套作品的全部界面了,来整体看一看吧。
《书与花》乙女风作品复盘
Collect
(注:以上作业为个人原创UI作品,角色立绘与道具图标来源与网络,仅做练习素材,不进行商业使用。感谢原作者,如有冒犯,请联系删除或署名。)
(注:以上作业为个人原创UI作品,角色立绘与道具图标来源与网络,仅做练习素材,不进行商业使用。感谢原作者,如有冒犯,请联系删除或署名。)
Collect
06  梦境的回响
作品完成体和最初的想法有很多不同。过程中收获很多,感悟也很多。最大的感悟是,好的作品必定有一个完备的设定、一个明确的用户目标、一个确立的情感表达。有了这些在铺开设计的时候会非常顺畅,可能不用想太多灵感就会自己冒出来。
记得23K老师在一开始说过“苦干八小时,不如思考三小时”,大意如此。“人是一支有思想的芦苇”。如果没有思想,人和芦苇真就没区别了。而且最好是能有一位优秀老师指引,让思考方式契合到轨道上。
只能说我很感谢那位推荐我报叶子学堂的人,也很感谢叶子学堂的老师们。以上,便是我与这套作品集的故事,感谢你能看到这里,愿您能安享好梦。
《书与花》乙女风作品复盘
Collect
指导评语:
叉歪同学对细节极其注重,虽然他是转行学员,但我感觉他简直就像是先天UI圣体。每次反馈修改后都有意料之外的惊喜。希望他可以继续保持对细节的追求,随着行业经验的积累不断进步~
《书与花》乙女风作品复盘
Collect
指导评语:
叉歪同学作为一名转行学员,真的非常努力。而这也证明了,认清自己现状,全力以赴,一定能获得巨大进步。虽然行业竞争进入了深水区。但你只要清楚自己的目标,并为之努力,我们叶子学堂一定能帮你加速!
14
阅读原文
|
Report
|
15
Share
相关推荐
教程
教程
教程
教程
作品收藏夹
如果美术当了老板,产品能做成什么样?
Homepage recommendation
文章内容含视频
「新怪谈」如何用美术 营造诡异氛围
Homepage recommendation
文章内容含视频
为什么我们的招牌不好看|艺海旅人
Recommanded by editor
文章内容含视频
评论
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
You may like
相关收藏夹
教程
教程
教程
教程
作品收藏夹
GUI
GUI
GUI
GUI
作品收藏夹
IP形象——动物类
IP形象——动物类
IP形象——动物类
IP形象——动物类
精选收藏夹
作品收藏夹
ip形象设计+表情包
ip形象设计+表情包
ip形象设计+表情包
ip形象设计+表情包
精选收藏夹
作品收藏夹
企业展厅/文化墙 参考
企业展厅/文化墙 参考
企业展厅/文化墙 参考
企业展厅/文化墙 参考
精选收藏夹
作品收藏夹
IP形象及IP内容
IP形象及IP内容
IP形象及IP内容
IP形象及IP内容
精选收藏夹
作品收藏夹
大家都在看
Log in