《宝石之国》——UI练习

用户头像
上海/UI设计师/5年前/2717浏览
《宝石之国》——UI练习
————————废话可跳过hhh————————
这套练习拖了好久,遇到挺多问题的,换了风格,动效不满意,断断续续在做。感觉不能再拖着扎进去不出来了,发出来记录总结下。
去年最早做了一版本镜子镜片拟物的ui挺失败= -,想融入作者灵骨肉的设定,然后主要是月人和宝石人冲突,于是一边加入了很圆润很软的月人的祥云丝带元素;一边加入了宝石的棱角折射碎片元素;然后希望每个宝石出场的时候,整个界面被那个宝石自身的色调光芒带动整个界面色调。想全都要的结果,最后糅杂得四不像。丢失了能贯穿一整套的要素的感觉,而想要每个人物界面色调不一样导致很难选择合适的正负向or中立功能按钮颜色。害,感觉确实要抛弃一些开始构思时让自己兴致勃勃的想法,切换成理工科角度去丢弃一些想法统一规则,找到合适的有趣和功能的权衡点去做ui。(当然我觉得也是因为本身能力不足。。无法统一这些元素。因为毕竟他们是一个作品里面的,说作品本身自带的元素互相排斥其实是有种逃避去权衡它们的意味)
最后总结下这套ui的设计想法吧。想要做二次元扁平风的。二次元的目现在十分的多,我很想要做不一样的感觉的出来。
做这套之前沉迷了一小段时间蒸汽波,那时候尝试了下用蒸汽波风格做ui,很好奇为什么看似随意拼贴的元素(比如大卫雕塑、石膏像、扭曲切合的各类不相关素材、汽油状的各种色彩、故障艺术等),可以聚在一起,形成一套其实并不是那么随便反而很有自己风格化的东西。接着我意识到了,这种拼接各类素材的感觉,还有切割感,还有各色颜色糅杂的感觉,似乎恰恰就能满足我对宝石之国ui想实现却矛盾的想法。
开始类比石膏像和立绘,参考蒸汽波各色颜色的使用来做这套二次元扁平ui。最后我选择了黑白作为背景色,蒸汽波比较具有代表性的蓝粉,作为主角的磷叶石的湖绿,而这三者在黑白的背景色下加上邻近色和光效也很容易有宝石的光泽的感觉。
对于蒸汽波元素之间的拼贴感还有大量的渐变应用有所下降,因为感觉对于界面的可读性是有所影响和冲突的(当然也可能是我用不好,哈哈哈哈哈),不过这个点之后用在宣传图or卡池图里应该不错。
颜色方面整体饱和度调低,因为我感觉蒸汽波有的高饱和度还好,有的高饱和就显得只是美式土味的感觉。
最后用反色和一点故障艺术尝试了一直想做的和喜欢的作品音乐结合的动效练习。
Current Time 0:00
/
Duration Time 0:00
Progress: NaN%
Playback Rate
1.00x
Current Time 0:00
/
Duration Time 0:00
Progress: NaN%
Playback Rate
1.00x
《宝石之国》——UI练习(图ZMjIxMTUzNDY4) - 游戏UI - 站酷设计师豆浆包包原创素材 - 站酷ZCOOL
标题界面,也很想做动起来!像动画里一样3d宝石碎开形成标题的感觉!考虑了下性价比还是算了 哈哈哈。可能之后就做个待机画面这样kkk
收藏
《宝石之国》——UI练习(图ZMjk1NDk1NjAw) - 游戏UI - 站酷设计师豆浆包包原创素材 - 站酷ZCOOL
希望有做出想要的蒸汽波感觉。
顶栏是想要实时全服开战,在线的玩家一起操作角色对抗月人!很想做战斗界面ui其实。。但是感觉找不到合适的素材。。或许再回去看一次动画能找到灵感。
收藏
《宝石之国》——UI练习(图ZMjk1NDk1NTQw) - 游戏UI - 站酷设计师豆浆包包原创素材 - 站酷ZCOOL
这里比较满意的地方是用了拼图做了宝石的记忆,因为拼图本身的概念就和宝石很像,再加上用作记忆,太棒啦!
这里比较不满意的地方也还是拼图,一开始用了一般的拼图太过圆润感觉和整体确定的较硬的切割感框体等都不太搭,改小了圆角好了一些,但是本身的样式还是有点。。感觉不太搭。害。
收藏
《宝石之国》——UI练习(图ZMjIxMTUzMzU2) - 游戏UI - 站酷设计师豆浆包包原创素材 - 站酷ZCOOL
用月亮圆缺做卡池分页。概念是玩家是月人,抽卡是抓它们!
收藏
《宝石之国》——UI练习(图ZMjIxMTUzMzQ0) - 游戏UI - 站酷设计师豆浆包包原创素材 - 站酷ZCOOL
运用来回交差反色做动效,这张是在ps里大体做的效果。动效后面和音乐结合做了视频。
收藏
《宝石之国》——UI练习(图ZMjIxMTUzMzYw) - 游戏UI - 站酷设计师豆浆包包原创素材 - 站酷ZCOOL
单抽展示,收集到磷叶石碎片,收集度是80.1%。
收藏
《宝石之国》——UI练习(图ZMjIxMTUzMzY4) - 游戏UI - 站酷设计师豆浆包包原创素材 - 站酷ZCOOL
这里的背景大字用了渐变,红紫色,感觉能有宝石要被抓的紧张感,反色以后的颜色也很像是月人的颜色,完美!哈哈哈哈
收藏
《宝石之国》——UI练习(图ZMjIzODEyNzQ4) - 游戏UI - 站酷设计师豆浆包包原创素材 - 站酷ZCOOL
圆粒金刚石登场预热
收藏
《宝石之国》——UI练习(图ZMjIzODEyNzUy) - 游戏UI - 站酷设计师豆浆包包原创素材 - 站酷ZCOOL
Bort登场,想法是预热图的动态飞过来然后挥刀切碎分割屏幕,出现文字。
收藏
《宝石之国》——UI练习(图ZMjIxMTUzMzg0) - 游戏UI - 站酷设计师豆浆包包原创素材 - 站酷ZCOOL
这个是网络不好重连的等待画面。
收藏
《宝石之国》——UI练习(图ZMjIxMTUzMzcy) - 游戏UI - 站酷设计师豆浆包包原创素材 - 站酷ZCOOL
感觉中间这帧宝石图案变形很好看,就单独截取了。
收藏
《宝石之国》——UI练习(图ZMjIxMTUzMzgw) - 游戏UI - 站酷设计师豆浆包包原创素材 - 站酷ZCOOL
最后是水波感觉的效果,也用在视频动效的切分页里了,我很喜欢这个哈哈哈。
收藏
《宝石之国》——UI练习(图ZMjIxMTUzNjI0) - 游戏UI - 站酷设计师豆浆包包原创素材 - 站酷ZCOOL
这个没有配合音乐做的,也比较简单,就单独导出了gif。
收藏
99
举报
|
74
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
你可能喜欢
相关收藏夹
UI
UI
UI
UI
UI
21
UI
UI
UI
UI
UI
13
大家都在看
登录注册