【干货】设计概念稿的进阶思路
2954 11
实名

通过了实名认证的内容创造者

发布于 2022-12-23 15:43:03

您需要 登录 才可以下载或查看,没有帐号?注册

x



511b160173986f0913d0cc967fc8941c.jpg


前言:个人喜欢看电影和玩游戏,有一个习惯会把电影中截图存下来,这样方便以后在练习的地方可以做完素材用上。
e75ed72508b5e26976ab737ac9bb9328.jpg
比如最近上映的电影我就发现妇联4的logo改成了紫金色,这个配色会让人觉得档次更高、神秘。为啥这样做呢,因为已经从第一部拍到第四部了,如果还是延续之前的logo配色不好。
在游戏行业我们设计中颜色升级的口诀是:白绿蓝紫橙如果妇联5拍摄logo估计是金、橙色系了。。。。。

c287e400731560a80dfa84c7de7faf11.jpg
动效设计也逐渐变成各平台的一个设计趋势,建议大家做练习时候可以想象一下界面的转场连贯性和互动问题。

8c5399341542bcd6e8c3c447980784ea.jpg
这样的的景深处理值得学习,也可以用作作品中。

0c882da333545da7d7d38e2f545bd776.jpg
沙发和皮衣质感的处理很棒,是否能用在ui的界面或图标设计表现中?

例如:我们在收集了很多素材后,经过不断修改设计得到了自己想要的创意设计方案。
6dc78242f41b0ef3be42c69d55aab329.jpg

案例1:
我做游戏开发概念设计时候,会前期找很多生活中的素材,然后进行提炼加工和重组。如果我们设计一个很潮,很新的设计,这样认知成本很高,一般的普通人接受难度很大,因此在组合设计时候还是以生活的原型来提炼设计为好。

这就好比游戏中的坏蛋大部分都是人形怪、兽形,也都是为了大家减少认知成本,一看就明白对应生活中见到的物种。
比如我做的下图,蜘蛛侠的新角色设计设计灵感分解图
1fff6be9a0c7c8792efe413abc5521d5.jpg

策划需要设计一个女性萝莉奶妈,我们一般做概念稿会按下面流程来思考。。。

素材搜集素材设计提取验证设计是否合理调整配色调整细节


9c71219f4bf06e26134bcb5c3e355947.jpg

找到适合项目需求的素材并提炼选取适合的设计通常项目角色设计时候我们在明确风格后,需要考虑的是身材、发型、服饰搭配、装饰物、配色等。

4a1b8053db243f15333822b2b703a7ea.jpg
头部是非常重要的,毕竟玩家都是看脸的,我们定义萝莉的时候身材不需要设计的“胸器”太突出,而应该做好女性化的卷发和青春热情的五官。


c5eb75408e071916269da1ce959fbc02.jpg


身材不需要太夸张,但是一定的形体曲线需要变现出来。
这边作者最终的原画设计在素材上面添加了一些银条和修身的设计,显得更加科技和时尚了,大爱。
75b55e0c75bbee34072e65d8590923b6.jpg

素材中是一个中长红色格子裙,我们游戏中女性往往要可爱、性感,所以做概念设计我们需要提炼取舍,把裙子变短,这样女性的大长腿就突出了。
奶妈职业大家都知道游戏中是加血的,背个小包或者提个小包都不便于后期奔跑动作的调整和一些技能动作施展,因此做一个小型的挎包在腰上很到位。
29122ea64a36e4409673005eaf700cb1.jpg

这边我们看到之前素材是黑色丝袜,如果给一个奶妈职业不适合。
在这里:黑色颜色属性是性感、神秘、沉稳。
白色代表正义、纯洁、时尚,因此白色更适合奶妈职业。
另外一张素材是白色网袜,这个比较偏情趣方面,正常的小萝莉很少这样穿,都是白色丝袜不带网格的,所以这些都需要我们去根据项目中角色定位来思考取舍素材。
我们在白丝袜的上面加入一些蕾丝和吊带设计可以偏一点点性感情趣,不过头又迎合了喜欢萝莉的大叔们审美爱好。
af492e69aafd0abdb4f610993d45a1d5.jpg
这位职业的武器是短枪,考虑到保护性和职业惯性,作者设计了黑色手套,并且是露出手指的。这个细节设计很到位,既起到了保护手掌作用,也增加了握枪的摩擦力,避免战斗过程中出汗手套打滑~
设计手套时它的材质、颜色、细节是什么,需要绘制出来或者提供参考细节给3D同事,这样便于项目的沟通
e50f19230e611cd3f27ad25f557e6a09.jpg

素材图片中鞋子是黑色的,这边统一人物颜色改成了红色,而且鞋子用的是适合小萝莉的学生红色圆头皮鞋,做概念设计时候没有使用大高跟尖头皮鞋,思路正确。

4b5283ab6c27b6fb83aabda6a7151bed.jpg

如果我们使用了下面这个素材就不太适合小萝莉奶妈职业,太性感了,焦点一下子全都跑到大长腿上,和角色定位和年龄不符。
496c8616c2662b322c9715771d356cbb.jpg


最终设计完成如下

2a4c0e15e917f31e319b2e11e093ffaa.jpg


提交设计图:
4bd6fd35d05b4f3ab0e488ee6283249a.jpg

真实游戏项目中我们需要像这样把角色的一些性格表情和人物形体参考也排列一下,这样其它同事更方便了解我们设计稿。
611c9c61d628e4ca3775a43c3810b740.jpg
(其它游戏项目角色设定图)

比如我们熟悉的守望先锋游戏这个角色,大家思考一下他的元素和创意主要借鉴了哪些素材灵感呢?(答案文章最后揭晓)

34d75e91039407f7c19ceb0ef5f61ec7.jpg
(守望先锋游戏角色设定图)


案例2:
制作一组中国风的概念设计稿,继续沿用我们总结的概念设计方法思路
素材搜集素材设计提取验证设计是否合理调整配色调整细节
从素材中找到符合项目的资料进行分析和设计提炼
322d1d169f51fb35dc62b343cd000df1.jpg

分析项目中的原画和场景,为后期配色做准备
07e91d3cf718f38f1f5e526dd1f1d793.jpg
设计界面需要在前期的角色、场景原画基础上思考,注意颜色、设计方面相互配合和呼应,不能天马行空任意发挥。。。
例如这边我们使用原画中的一些衣服装饰和暗纹,提炼出来边框、暗纹、提示图标,这样整体界面和原画搭配就不突兀,很统一。
13b79b31dea5d9702ceee77fc7465aac.jpg

根据男女主角的宣传海报进行颜色分析并提炼
49108f086f768f9dab5486d27a5fa5aa.jpg

为了迎合当下90、00后年轻的游戏玩家,我们概念设计加入了一些淡黄色,这样整体游戏风格会更加时尚和活力。
11d6472c217f1080a2af1fc5e32f1d4e.jpg
推荐使用PS自带的滤镜(晶格化)方便大家过滤杂色,容易提取自己需要使用的颜色

43e7c8843b9f0f0c935d819c119822e2.jpg

继续根据项目原画和素材进行细节设计和提炼,我们在很多细节上下了些小功夫
fb0f8ca6ef9d3c20e72ec78ef2a555f1.jpg
这也是我之前为啥先讲解一个原画设计案例,好让大家了解游戏的开发过程和工作流程。
看了之前案例1的原画设计,再看这些ui的细节设计应该问题不大了吧?
每一个游戏都有一个不同凡响的世界观,个人认为了解游戏背景再开始做设计很重要,好的概念设计都是有故事的。

6a608f46badbb37686b2f5ebe69607ba.jpg
有了世界观就需要制作一些基本的美术或系统功能方案需求,在游戏公司我们叫下面的美术案子为“交互稿”。

0f618a28642fc74ebe1d164390b5e198.jpg
通常做为策划稿只需要把内容表达清楚就可以。
字体多大,哪里放按钮,人物多大放什么位子其实这是交互设计师的工作,常常有人混淆策划给的案子不够专业,今天也给常常背锅的策划打抱不平。
不过很多中小公司往往缺少这一环节,很多UI设计师拿到的案子基本和下面这张图差不多情况

17695b064ef19d21d6dbf1e2b7c2e1b4.jpg

我见过最简单的策划案是这样的!
00dbe922dae4370bf1fcf7d7a36e09d5.jpg

最后定稿是这样
b9cfedd35aadb383875197183535d846.jpg

这是另外一位设计师概念稿的案例
其实做的也是挺棒的,可是为什么被没使用呢?
e4e74bd01bc2a7d3c403b899877b08e0.jpg

还记得上面案例1讲的红色高跟鞋的问题么?存在问题:
1、角色偏日风,和之前的色调和画风不匹配2、文字处理很碎,不够整体和突出“首次充值”3、物品图标很小,对玩家没有吸引力4、装饰物和按钮、人物比例问题较为严重

专业的设计师在制作项目前期都需要思考这些界面表象后面的东西。
手游项目少则十几个界面,多则几百个界面,我们需要考虑UI规范,字体使用,元素和风格的统一性。
外人看来ui设计很简单,其实资深级别的设计师最值钱的能力是风格把控和项目整体资源统一。
做好几个界面不难,做精彩100多个界面还保证风格统一有细节设计,在行业有独特的代表性就很难。

b6f470235c35062de45b66e4f56be7ff.jpg


概念设计完成稿:捏脸界面
511b160173986f0913d0cc967fc8941c.jpg
活动界面1
6cf52a784e1979fb7406c887f279ec00.jpg
活动界面2
b9cfedd35aadb383875197183535d846.jpg


一个设计作品完成后是需要同行和市场来检验的,当我们做完后可以把自己设计稿和市面上大公司的资深设计做的稿子比比,看看还有什么可以改进的地方。
某大公司项目上线作品
5d63f6ebc9f8d4628de3f0683b2be537.jpg

511b160173986f0913d0cc967fc8941c.jpg

游戏中的ui界面设计主要是服务游戏功能,好看是建立在不影响玩家操作游戏,实现功能的前提,如果一个界面过于花哨和抢眼,那么往往是没有经验的新人做的。

分享完毕!谢谢大家,下期见。




★ 网易设计专家,腾讯游戏学院-UI讲师 主编【游戏UI实战必修课】书籍 ★

回复 使用道具 举报 登录

论坛版权
元素界王神  发表于 2022-12-26 15:45:13  
2#
干货满满的啊!
回复 收起回复
B Color Smilies
还可输入 500 个字符

使用道具 举报 登录

黑洞帝皇  发表于 2022-12-28 17:34:40  
3#
这里面的捏脸界面是哪款游戏啊??
回复 收起回复
B Color Smilies
还可输入 500 个字符

使用道具 举报 登录

附容若皆之心  发表于 2022-12-31 14:30:12  
4#
可以
回复 收起回复
B Color Smilies
还可输入 500 个字符

使用道具 举报 登录

附容若皆之心  发表于 2022-12-31 14:30:27  
5#
能不能分享一波3d模型文件给我
回复 收起回复
B Color Smilies
还可输入 500 个字符

使用道具 举报 登录

附容若皆之心  发表于 2022-12-31 14:30:30  
6#
谢谢
回复 收起回复
B Color Smilies
还可输入 500 个字符

使用道具 举报 登录

附容若皆之心  发表于 2022-12-31 14:30:37  
7#
看到麻烦回复
回复 收起回复
B Color Smilies
还可输入 500 个字符

使用道具 举报 登录

附容若皆之心  发表于 2022-12-31 14:30:51  
8#
这个女性的3d模型
回复 收起回复
B Color Smilies
还可输入 500 个字符

使用道具 举报 登录

附容若皆之心  发表于 2022-12-31 14:30:57  
9#
男的就不要了
回复 收起回复
B Color Smilies
还可输入 500 个字符

使用道具 举报 登录

附容若皆之心  发表于 2022-12-31 14:31:06  
10#
男的不喜欢
回复 收起回复
B Color Smilies
还可输入 500 个字符

使用道具 举报 登录

wang385708063  发表于 2023-1-1 18:26:55  
11#
所有的设计都有一半事抄袭的
回复 收起回复
B Color Smilies
还可输入 500 个字符

使用道具 举报 登录

狂奔de蜗牛  发表于 2023-1-2 20:34:53  
12#
回复 收起回复
B Color Smilies
还可输入 500 个字符

使用道具 举报 登录

您需要登录后才可以回帖 登录 | 注册

本版积分规则

关闭

元素公告!上一条 /1 下一条

快速回复 返回顶部 返回列表