如何让作品更有设计“亮点”?

用户头像
上海/UI设计师/1年前/566浏览
如何让作品更有设计“亮点”?
如何让作品更有设计“亮点”?(图ZMTQ5NDkyODg=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
骨头老师
收藏
哈喽哈~宝子们!
我是叶子学堂的骨头33。
转眼就到2024年年底啦!
是谁还在为准备作品集没有思路而烦恼呢?面试时常说到的设计“亮点”究竟是什么?如何给你的面试官来点xiu~xiu~的创意震撼呢?
叶子学堂每年都会遇到许多很有想法的学员,他们对万事万物都抱有强烈的好奇心,喜欢探索,没事儿就拉着老师头脑风暴一下。
再经由老师的调教后,这些学员也往往能做出让人眼前一亮的作品,快速找到满意的工作。
所以今天我们就来复盘一下叶子学堂往期的学员作品,希望他们的创意和“爱迪尔”也能启发到你。
(本文一共1937个字,阅读完需要5分钟)
首先我们来看,第一组陈同学设计的蜘蛛侠IP的UI作品:
01  蜘蛛侠美式卡通UI
一般选取知名动画IP作品作为改编会是双刃剑:一方面对于观众来说,热门IP会带来强烈的首因效应:
“这不就是XXX嘛?”
使得他们在看到其他同主题的个人作品时,会不自觉地拿它们和已经成熟的市场产品对标。
而这种先入为主的效应呢也会对大家设计上带来考验,一旦设计的风格和主题跳脱,就很容易产生“割裂感”。
如何让作品更有设计“亮点”?(图ZMTQ5NDkyOTI=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
所以就需要大家在设计之初
明确这套作品风格中核心的SEED是什么
:
比如街头涂鸦、漫画分镜,《蜘蛛侠:平行宇宙》和《蜘蛛侠:纵横宇宙》中的美漫半调网格,以及线条、对话框以及拟声词。
陈同学的这套作品就很好地抓住了《蜘蛛侠》命题下的蛛网和漫画感两大元素。
如何让作品更有设计“亮点”?(图ZMTQ5NDkyOTY=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
整个界面上采用了放射性构图,在引导观众视线聚焦角色的同时,也让整个画面看起来,更有视觉张力。
最后诸如:封条,涂鸦元素的融入,给作品主题带来新意。
不同以往《蜘蛛侠》游戏烘托的英雄形象,而是更接地气,更有平民英雄的感觉。
“嗨~我叫彼得帕克,你的好邻居。”
02  复古欧美UI
聂风同学是一位从电商美工转行过来的同学,我们在视频平台上还做过他的采访。
他的作品是黑帮,犯罪主题,灵感来自于《浴血黑帮》和《大侦探福尔摩斯》等20世纪初的西方底层社会故事。
如何让作品更有设计“亮点”?(图ZMTQ5NDkzMDA=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
所以在UI设计中就需要表现出“复古”的氛围感。
比如英伦风格的报纸,某品牌复古汽车等。
如何让作品更有设计“亮点”?(图ZMTQ5NDkzMDQ=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
如何让作品更有设计“亮点”?(图ZMTQ5NDkzMTY=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
比较巧妙的是,当整体的UI配色为深色调时,我们可以选用金色贯穿了整套UI的控件配色,同时选用红色为醒目色来提亮画面。
红色也是很多火漆印章中常见的颜色。
如何让作品更有设计“亮点”?(图ZMTQ5NDkzMjA=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
在比较有主题感的界面设计中,我们常会
使用“俯视角”构图来提升代入感
。
将画面中以一个主物件比如报纸作为贯穿整体UI的视觉要素。在画面的四周加入与主题相关的元素,比如手枪,子弹,打火机,文件袋等等。
再结合整体的光源塑造
,让我们的视觉中心更聚焦,同时也可以更突出当前态的主题。
如何让作品更有设计“亮点”?(图ZMTQ5NDkzMjQ=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
我们再整体看看几张作品中的光源表现:基本上都是控制在比较弱光源的逆光氛围当中。
同时需要注意人物氛围光,和物件光晕的塑造,包括人物前景飘散的火星,这些都是大厂设计师非常看重的设计要点。
再来看另一套乙女二次元风格的UI作品:
03  乙女二次元UI
在这套思思同学的作品当中,我们看到了比较能抓人眼球的部分是其中的
“线性设计”
。
优秀的线性设计,既能满足基础的功能,又能很好地起到装饰作用。比如在第一张图当中运用了线性设计串联起了相遇,回忆,梦境谈等。
如何让作品更有设计“亮点”?(图ZMTQ5NDkzMjg=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
同样在返回托底处,以及页签的装饰部分,立绘边框的包装部分都运用了线性装饰设计。
如何让作品更有设计“亮点”?(图ZMTQ5NDkzMzI=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
也和原画上老公们的肌肉线很好的相互呼应。
干的好呀思思同学!
04  潮酷二次元UI
阿勇同学的这两张二次元风格对比之下,黑色界面控制得更优秀一些。“五彩斑斓”的黑中运用了红色提亮了画面。背景中藏着的字母做了部分高斯模糊与叠加材质的处理。
如何让作品更有设计“亮点”?(图ZMTQ5NDkzMzY=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
05  星座二次元UI
NAYO同学的这套二次元UI的设计亮点,可以说是以星座元素为SEED贯穿了整套UI。
首先最明显的,是星座元素作为视觉亮点设计在了LOGO上,ICON当中,标题里。
如何让作品更有设计“亮点”?(图ZMTQ5NDkzNDA=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
如何让作品更有设计“亮点”?(图ZMTQ5NDkzNDQ=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
其次我们再仔细看看整体UI的背景,其实第一张的“星流之夜”就已经选用了一张星空作为背景;到了第二张的“跃迁星轨”的背景就用了更为辽阔的“宇宙”,构图上用了“银河”一样的元素来贯穿整体的ICON。
如何让作品更有设计“亮点”?(图ZMTQ5NDkzNDg=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
同时我们发现,除了星座元素之外,还有一个类似“拱门”一样的元素高频出现。
一般越抽象的概念,就需要这种简洁明确的设计语言来具象化表现
。
 
骨头老师的笔记
那么我们回顾一下,给大家分享的这些UI设计,要想让作品更有设计“亮点”,我们需要做到:
  1. 与IP紧密结合;
  2. 需要考虑到具体落地到项目中的可行性;
  3. 采用特殊视角,结合光源塑造;
  4. 用好“线性设计”塑造画面;
  5. 材质处理以及层次梳理;
  6. 不同游戏风格可结合不同的表现形式;
  7. SEED贯穿整套UI设计。
当然,让作品更有设计“亮点”的技巧还有很多,想了解更多,比较有效的方法就是:
1. 多做审美累积,多从优秀的游戏作品,或者影视、动画作品中学习;
2. 系统学习和提升,期待大家能创作出更优质的作品!
那么,今天的分享就到这里啦,大家对于本期的作品分享有什么想法或者想要表达的,欢迎给我们留言和互动! 
7
阅读原文
|
举报
|
6
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
钱包ui模板
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
UI 登录界面设计模板包
APP/小程序商业项目UI模板|99个高保真UI+79个原型
盲盒APP UI设计
手表表盘UI系列
【新年UI图标】礼物/活动icon
我的钱包-UI界面设计-app
UI界面 组件
户外旅行飞机情侣假日出行
Security Camera UI kit
【新年UI图标】钱包icon
高级感金属拟物 UI设计组件库
3D卡通UI界面图标可爱插画免扣素
【新年UI图标】汽车icon
新能源APP应用UIKit
【新年UI图标】30个图标
拟物风质感写实UI卡片合集源文件
UI通用设计素材1
智能家居中心 简约 UI设计组件库
【新年UI图标】会员icon
【新年UI图标】体育icon
3D渐变流体抽象矢量UI背景图
你可能喜欢
相关收藏夹
大家都在看
登录注册