GUI前期如何做好交互小稿-2024

用户头像
福州/UI设计师/1年前/4017浏览
GUI前期如何做好交互小稿-2024
用户头像
小金狮
又是积累了好久,终于有更多的作品和大家分享了。今天先分享我们GUI设计前期如何做好排版和交互的细节,后期会和大家分享更多的毕业作品哦。
一直有同学反应想要一些
竖版的UI
设计,今天他来了,他来了。
这一次的界面排版增加了一些新的改动,除了更加重视交互的设计之外,还更加重视形状本身的构成设计。
GUI前期如何做好交互小稿-2024(图ZMzc0MzQyMTA4) - 游戏UI - 站酷设计师小金狮原创素材 - 站酷ZCOOL
收藏
GUI前期如何做好交互小稿-2024(图ZMzc0MzQyMTEy) - 游戏UI - 站酷设计师小金狮原创素材 - 站酷ZCOOL
收藏
GUI前期如何做好交互小稿-2024(图ZMzc0MzQyMTE2) - 游戏UI - 站酷设计师小金狮原创素材 - 站酷ZCOOL
收藏
主界面风格稿
主界面一直是最难的界面设计之一。
我将主界面大致分成几个构图
左中右主界面构图。
常见的游戏有
【下面十张图不带水印的为真实游戏的截图分析参考】
GUI前期如何做好交互小稿-2024(图ZMzc0MzQyMTIw) - 游戏UI - 站酷设计师小金狮原创素材 - 站酷ZCOOL
规整重复某一种形状的主界面设计,让右侧的按钮点击变得很容易。
收藏
GUI前期如何做好交互小稿-2024(图ZMzc0MzQyMTI0) - 游戏UI - 站酷设计师小金狮原创素材 - 站酷ZCOOL
也有右侧设计是具象的设计的,让游戏代入感更强一些。
收藏
GUI前期如何做好交互小稿-2024(图ZMzc0MzQyMTI4) - 游戏UI - 站酷设计师小金狮原创素材 - 站酷ZCOOL
也有场景化的主界面,网易的游戏特别擅长做这些风格,大量3D 的介入,让游戏的世界充满了想象力。
收藏
GUI前期如何做好交互小稿-2024(图ZMzc0MzQyMTMy) - 游戏UI - 站酷设计师小金狮原创素材 - 站酷ZCOOL
传统的SLG 的游戏,主界面则为四周分布,特别多的图标显示在四周,传统游戏的画面就是这么的密密麻麻,但是70-80后的玩家有时候就喜欢更传统一点的画面感。
收藏
GUI前期如何做好交互小稿-2024(图ZMzc0MzQyMTM2) - 游戏UI - 站酷设计师小金狮原创素材 - 站酷ZCOOL
时代在变化,新兴玩家都会更喜欢如原神一样的画面,游戏画面是纯3D的自由沙盒的玩法,主界面的图标更重视 单色和剪影造型 的设计,让画面更有631的层级感。
收藏
GUI前期如何做好交互小稿-2024(图ZMzc0MzQyMTQw) - 游戏UI - 站酷设计师小金狮原创素材 - 站酷ZCOOL
更多内容通过二级菜单来统一展示。
收藏
GUI前期如何做好交互小稿-2024(图ZMzc0MzQyMTQ0) - 游戏UI - 站酷设计师小金狮原创素材 - 站酷ZCOOL
吃鸡类游戏更加喜欢突出右下角的开始游戏按钮,其他东西都是规整扁平的排版。
收藏
GUI前期如何做好交互小稿-2024(图ZMzc0MzQyMTQ4) - 游戏UI - 站酷设计师小金狮原创素材 - 站酷ZCOOL
竖版主界面最喜欢突出下面的5个按钮设计,
收藏
GUI前期如何做好交互小稿-2024(图ZMzc0MzQyMTUy) - 游戏UI - 站酷设计师小金狮原创素材 - 站酷ZCOOL
剪影图标依旧是我们主界面最重视的构成部分,需要有强中弱的层级变化。

下面来欣赏下我们这一期界面高级班同学做的风格稿设计,还不是最终版,毕业作品将在后面陆续和大家分享哦!
收藏
GUI前期如何做好交互小稿-2024(图ZMzc0MzQyMTU2) - 游戏UI - 站酷设计师小金狮原创素材 - 站酷ZCOOL
改之前,作品的构成已经很有特色,
收藏
GUI前期如何做好交互小稿-2024(图ZMzc0MzQyMTYw) - 游戏UI - 站酷设计师小金狮原创素材 - 站酷ZCOOL
改之后增加了堆成构图,增加倾斜梯形和剪影图标,强化画面的矛盾和对称,冷暖对比和黑白对比也进一步加强,
收藏
GUI前期如何做好交互小稿-2024(图ZMzc0MzQyMTY0) - 游戏UI - 站酷设计师小金狮原创素材 - 站酷ZCOOL
收藏
GUI前期如何做好交互小稿-2024(图ZMzc0MzQyMTY4) - 游戏UI - 站酷设计师小金狮原创素材 - 站酷ZCOOL
收藏
GUI前期如何做好交互小稿-2024(图ZMzc0MzQyMTcy) - 游戏UI - 站酷设计师小金狮原创素材 - 站酷ZCOOL
收藏
GUI前期如何做好交互小稿-2024(图ZMzc0MzQyMTc2) - 游戏UI - 站酷设计师小金狮原创素材 - 站酷ZCOOL
收藏
GUI前期如何做好交互小稿-2024(图ZMzc0MzQyMTgw) - 游戏UI - 站酷设计师小金狮原创素材 - 站酷ZCOOL
收藏
GUI前期如何做好交互小稿-2024(图ZMzc0MzQyMTg0) - 游戏UI - 站酷设计师小金狮原创素材 - 站酷ZCOOL
收藏
GUI前期如何做好交互小稿-2024(图ZMzc0MzQyMTg4) - 游戏UI - 站酷设计师小金狮原创素材 - 站酷ZCOOL
收藏
GUI前期如何做好交互小稿-2024(图ZMzc0MzQyMTky) - 游戏UI - 站酷设计师小金狮原创素材 - 站酷ZCOOL
收藏
GUI前期如何做好交互小稿-2024(图ZMzc0MzQyMTk2) - 游戏UI - 站酷设计师小金狮原创素材 - 站酷ZCOOL
收藏
属性左中右构图
左中右一直是我不断在强调的三分画面的重要词语,左中右,强中弱,631,在做界面排版的时候最需要考虑的层级关系,
GUI前期如何做好交互小稿-2024(图ZMzc0MzQyMjAw) - 游戏UI - 站酷设计师小金狮原创素材 - 站酷ZCOOL
收藏
GUI前期如何做好交互小稿-2024(图ZMzc0MzQyMjA0) - 游戏UI - 站酷设计师小金狮原创素材 - 站酷ZCOOL
收藏
GUI前期如何做好交互小稿-2024(图ZMzc0MzQyMjA4) - 游戏UI - 站酷设计师小金狮原创素材 - 站酷ZCOOL
收藏
GUI前期如何做好交互小稿-2024(图ZMzc0MzQyMjEy) - 游戏UI - 站酷设计师小金狮原创素材 - 站酷ZCOOL
收藏
GUI前期如何做好交互小稿-2024(图ZMzc0MzQyMjE2) - 游戏UI - 站酷设计师小金狮原创素材 - 站酷ZCOOL
收藏
GUI前期如何做好交互小稿-2024(图ZMzc0MzQyMjIw) - 游戏UI - 站酷设计师小金狮原创素材 - 站酷ZCOOL
收藏
GUI前期如何做好交互小稿-2024(图ZMzc0MzQyMjI0) - 游戏UI - 站酷设计师小金狮原创素材 - 站酷ZCOOL
收藏
GUI前期如何做好交互小稿-2024(图ZMzc0MzQyMjI4) - 游戏UI - 站酷设计师小金狮原创素材 - 站酷ZCOOL
收藏
GUI前期如何做好交互小稿-2024(图ZMzc0MzQyMjMy) - 游戏UI - 站酷设计师小金狮原创素材 - 站酷ZCOOL
收藏
GUI前期如何做好交互小稿-2024(图ZMzc0MzQyMjM2) - 游戏UI - 站酷设计师小金狮原创素材 - 站酷ZCOOL
收藏
GUI前期如何做好交互小稿-2024(图ZMzc0MzQyMjQw) - 游戏UI - 站酷设计师小金狮原创素材 - 站酷ZCOOL
收藏
GUI前期如何做好交互小稿-2024(图ZMzc0MzQyMjQ0) - 游戏UI - 站酷设计师小金狮原创素材 - 站酷ZCOOL
收藏
GUI前期如何做好交互小稿-2024(图ZMzc0MzQyMjQ4) - 游戏UI - 站酷设计师小金狮原创素材 - 站酷ZCOOL
收藏
GUI前期如何做好交互小稿-2024(图ZMzc0MzQyMjUy) - 游戏UI - 站酷设计师小金狮原创素材 - 站酷ZCOOL
收藏
GUI前期如何做好交互小稿-2024(图ZMzc0MzQyMjU2) - 游戏UI - 站酷设计师小金狮原创素材 - 站酷ZCOOL
收藏
GUI前期如何做好交互小稿-2024(图ZMzc0MzQyMjYw) - 游戏UI - 站酷设计师小金狮原创素材 - 站酷ZCOOL
收藏
GUI前期如何做好交互小稿-2024(图ZMzc0MzQyMjY0) - 游戏UI - 站酷设计师小金狮原创素材 - 站酷ZCOOL
收藏
GUI前期如何做好交互小稿-2024(图ZMzc0MzQyMjY4) - 游戏UI - 站酷设计师小金狮原创素材 - 站酷ZCOOL
收藏
GUI前期如何做好交互小稿-2024(图ZMzc0MzQyMjcy) - 游戏UI - 站酷设计师小金狮原创素材 - 站酷ZCOOL
收藏
GUI前期如何做好交互小稿-2024(图ZMzc0MzQyMjc2) - 游戏UI - 站酷设计师小金狮原创素材 - 站酷ZCOOL
收藏
方块多 签到界面
GUI前期如何做好交互小稿-2024(图ZMzc0MzQyMjgw) - 游戏UI - 站酷设计师小金狮原创素材 - 站酷ZCOOL
收藏
GUI前期如何做好交互小稿-2024(图ZMzc0MzQyMjg0) - 游戏UI - 站酷设计师小金狮原创素材 - 站酷ZCOOL
收藏
GUI前期如何做好交互小稿-2024(图ZMzc0MzQyMjg4) - 游戏UI - 站酷设计师小金狮原创素材 - 站酷ZCOOL
收藏
GUI前期如何做好交互小稿-2024(图ZMzc0MzQyMjky) - 游戏UI - 站酷设计师小金狮原创素材 - 站酷ZCOOL
收藏
GUI前期如何做好交互小稿-2024(图ZMzc0MzQyMjk2) - 游戏UI - 站酷设计师小金狮原创素材 - 站酷ZCOOL
收藏
GUI前期如何做好交互小稿-2024(图ZMzc0MzQyMzAw) - 游戏UI - 站酷设计师小金狮原创素材 - 站酷ZCOOL
收藏
GUI前期如何做好交互小稿-2024(图ZMzc0MzQyMzA0) - 游戏UI - 站酷设计师小金狮原创素材 - 站酷ZCOOL
收藏
本次的界面分享就到这里了。
50
举报
|
106
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
加载中
推荐素材
扑克牌棋牌游戏UI图标设计素材
游戏节日古风UI标题框
神话图腾徽章设计
UI应用平面图标
卡通3D帆船
APP/游戏头像框
扑克牌棋牌游戏UI图标设计素材
【新年UI图标】游戏/娱乐icon
扑克牌棋牌游戏UI图标设计素材
卡通3D房子
扑克牌棋牌游戏UI图标设计素材
商业插画-游戏ui等等
扑克牌棋牌游戏UI图标设计素材
粒子背景素材科技
游戏UI有点华丽的宝箱
扑克牌棋牌游戏UI图标设计素材
金币与手素材
3D卡通UI界面图标可爱插画免扣素
扑克牌棋牌游戏UI图标设计素材
装金币的宝箱
魔法卷轴游戏UI设计
游戏界面图,ui,道具,界面设计,视觉设计
扑克牌棋牌游戏UI图标设计素材
扑克牌棋牌游戏UI图标设计素材
一个潮流描边城堡恐龙宝宝小木马的概念插画
你可能喜欢
相关收藏夹
大家都在看
登录注册