古风游戏GUI界面设计(网易向)-章节选择面板

Recommand
杭州/UI设计师/4年前/3017浏览
古风游戏GUI界面设计(网易向)-章节选择面板Recommand
因为热爱,所以坚持到底,该作品为网易风格古风界面的设计练习,参考了大量网易游戏的风格及元素,结合自己的创意设计制作的一款GUI界面,期待通过对游戏的热爱和对网易游戏的向往,可以实现一直以来的梦想,加油!
先上完成效果图(*^▽^*)
先上完成效果图(*^▽^*)
Collect
背景:
背景是主导整体界面视觉效果的重要部分,也是占版面最大的部分,因此背景一定要突出主题,我选择的画面和整体游戏视觉的效果是——俯瞰的荷塘<br>对于这个画面的视觉效果,我的想法是增强趣味性和强化沉浸感,选取的元素有荷叶、荷花、鱼、鹅卵石、涟漪、水<br>整体画面是俯瞰荷塘的视觉效果,可以让玩家在点开界面进行选择、等待时观赏美丽的背景图,有美丽的荷花荷叶、也有可爱的鱼儿,不同的叠加层次和投影深浅,加上底层若隐若现的鹅卵石增强了画面的层次感,配合水的效果,意在呈现一种安静、有意境、让玩家沉浸其中的视觉效果<br>动效设计:<br>鱼儿可以在水中游动,时不时吐个泡让水面泛起一阵涟漪
背景:
背景是主导整体界面视觉效果的重要部分,也是占版面最大的部分,因此背景一定要突出主题,我选择的画面和整体游戏视觉的效果是——俯瞰的荷塘
对于这个画面的视觉效果,我的想法是增强趣味性和强化沉浸感,选取的元素有荷叶、荷花、鱼、鹅卵石、涟漪、水
整体画面是俯瞰荷塘的视觉效果,可以让玩家在点开界面进行选择、等待时观赏美丽的背景图,有美丽的荷花荷叶、也有可爱的鱼儿,不同的叠加层次和投影深浅,加上底层若隐若现的鹅卵石增强了画面的层次感,配合水的效果,意在呈现一种安静、有意境、让玩家沉浸其中的视觉效果
动效设计:
鱼儿可以在水中游动,时不时吐个泡让水面泛起一阵涟漪
Collect
章节面板:
章节面板是界面中最主要的交互面板,每一个板块分为上下两部分,上半部分为关卡图和章节情况显示,搭配古色古香的古窗边框,既体现了古风元素,也配合了网易的细线边框风格,文字区域使用的透明底层也参考了网易设计风格;下半部分采用透明印花,加强了古风元素,等级面板采用了灯笼形式,正在进行的章节灯笼和面板底层都会亮起发光,强化视觉效果<br>四个面板暂时定义为春、夏、秋、冬四时(因视觉效果需要暂将夏置于春前),每个面板都有对应的元素拓展,例如夏季的荷花、秋季的枫叶等,每个元素和相邻面板接触寓意四季变迁,而待解锁面板我选用冬季元素,呈现冰封效果,搭配古锁链体现古风视觉,章节按顺序进行,也寓意春去秋来,四季交替<br>动效设计:<br>每次点击面板会进行一次下压弹起,同时掉落对应元素,例如点击秋章节,屏幕会落下一片枫叶,飘至水面泛起一小阵涟漪,且底层面板会发光;解锁画面为锁链打开,冰层融化,冰雪散去,也寓意冰雪消融,冬去春来。
章节面板:
章节面板是界面中最主要的交互面板,每一个板块分为上下两部分,上半部分为关卡图和章节情况显示,搭配古色古香的古窗边框,既体现了古风元素,也配合了网易的细线边框风格,文字区域使用的透明底层也参考了网易设计风格;下半部分采用透明印花,加强了古风元素,等级面板采用了灯笼形式,正在进行的章节灯笼和面板底层都会亮起发光,强化视觉效果
四个面板暂时定义为春、夏、秋、冬四时(因视觉效果需要暂将夏置于春前),每个面板都有对应的元素拓展,例如夏季的荷花、秋季的枫叶等,每个元素和相邻面板接触寓意四季变迁,而待解锁面板我选用冬季元素,呈现冰封效果,搭配古锁链体现古风视觉,章节按顺序进行,也寓意春去秋来,四季交替
动效设计:
每次点击面板会进行一次下压弹起,同时掉落对应元素,例如点击秋章节,屏幕会落下一片枫叶,飘至水面泛起一小阵涟漪,且底层面板会发光;解锁画面为锁链打开,冰层融化,冰雪散去,也寓意冰雪消融,冬去春来。
Collect
选篇面板:
选篇为三个章节按键,我选择了交错排列,大小不一的排版形式,按键样式为荷叶,意在配合整体界面元素主题,增强画面的韵律和节奏感<br>三个按键分别为大小、颜色不一的荷叶,既充满韵律节奏,、也符合现实生活,搭配主题风格相得益彰,为增强统一性和文化性我将三个篇幅命名为序章、中章、尾章,画面中为点击中章按键效果<br>动效设计:<br>点击荷叶选择篇幅时荷叶会进行一次下沉弹起,伴随荷叶拍打在水面的声效并在底层掀起一阵涟漪,(模拟现实生活中荷叶被按进水里的样子),被选中的荷叶底层会发光<br>点击选中荷叶时会有一只小青蛙跳到荷叶上,产生声效和小涟漪,点击另外一片荷叶会随即跳跃至选中荷叶上并进行相同交互动效(若游戏中有宠物功能设定或可与之产生联动)
选篇面板:
选篇为三个章节按键,我选择了交错排列,大小不一的排版形式,按键样式为荷叶,意在配合整体界面元素主题,增强画面的韵律和节奏感
三个按键分别为大小、颜色不一的荷叶,既充满韵律节奏,、也符合现实生活,搭配主题风格相得益彰,为增强统一性和文化性我将三个篇幅命名为序章、中章、尾章,画面中为点击中章按键效果
动效设计:
点击荷叶选择篇幅时荷叶会进行一次下沉弹起,伴随荷叶拍打在水面的声效并在底层掀起一阵涟漪,(模拟现实生活中荷叶被按进水里的样子),被选中的荷叶底层会发光
点击选中荷叶时会有一只小青蛙跳到荷叶上,产生声效和小涟漪,点击另外一片荷叶会随即跳跃至选中荷叶上并进行相同交互动效(若游戏中有宠物功能设定或可与之产生联动)
Collect
返回面板:
返回按键的设计,我参考了大量的网易游戏按键设计,提炼出了对应的点线结合切角风格,设计出了较为符合网易风格的返回键,并结合主题风格元素——水灯笼,定义这是一个镂空雕刻在水灯笼顶层的一个返回键,主体是一个漂浮在水面上俯瞰视角发着亮光的水灯笼,返回键以镂空的形式被雕刻在顶上,透过镂空的部分发出亮光使返回键产生一种透光感,显得更有生命力且自然、唯美<br>边上的章节选择文字面板我参考了网易部分游戏官方网页中的透明渐变底层设计,搭配网易风格的祥云边框,又增加了画面中的古风元素和柔美感,微微发光的边框更增加了一层在水中的朦胧感和微弱的光感<br>动效设计:点击触碰返回键会导致水灯笼产生一次熄灭再亮起的短暂动效,模拟现实中灯一开一关的感觉,同时底层出现一小层涟漪
返回面板:
返回按键的设计,我参考了大量的网易游戏按键设计,提炼出了对应的点线结合切角风格,设计出了较为符合网易风格的返回键,并结合主题风格元素——水灯笼,定义这是一个镂空雕刻在水灯笼顶层的一个返回键,主体是一个漂浮在水面上俯瞰视角发着亮光的水灯笼,返回键以镂空的形式被雕刻在顶上,透过镂空的部分发出亮光使返回键产生一种透光感,显得更有生命力且自然、唯美
边上的章节选择文字面板我参考了网易部分游戏官方网页中的透明渐变底层设计,搭配网易风格的祥云边框,又增加了画面中的古风元素和柔美感,微微发光的边框更增加了一层在水中的朦胧感和微弱的光感
动效设计:点击触碰返回键会导致水灯笼产生一次熄灭再亮起的短暂动效,模拟现实中灯一开一关的感觉,同时底层出现一小层涟漪
Collect
货币面板:
界面上类似于返回界面,同样使用云纹和透明底层作为范围边框,两款icon都意在符合主题风格,加入了大量荷塘元素,除充值按钮点击发光外无特殊动效
货币面板:
界面上类似于返回界面,同样使用云纹和透明底层作为范围边框,两款icon都意在符合主题风格,加入了大量荷塘元素,除充值按钮点击发光外无特殊动效
Collect
金币选择了基础的圆形样式,中间镂空并制作了一个缺角,意在做成一个荷叶的造型,金币上也绘制了一层荷叶花纹,在缺角上方又增加了一片荷花花瓣作为装饰,体现主题
金币选择了基础的圆形样式,中间镂空并制作了一个缺角,意在做成一个荷叶的造型,金币上也绘制了一层荷叶花纹,在缺角上方又增加了一片荷花花瓣作为装饰,体现主题
Collect
高级货币(钻石)我选择了符合古风主题设计的玉石作为载体,形象为月牙形的绿色玉石上镶嵌了白银花纹和一朵金色荷花,突出了昂贵感和美观性
高级货币(钻石)我选择了符合古风主题设计的玉石作为载体,形象为月牙形的绿色玉石上镶嵌了白银花纹和一朵金色荷花,突出了昂贵感和美观性
Collect
补充说明:
1.该设计方案的概念是一个沉浸在荷塘水面里的空间,主要分为三大层——背景底层、交互中层、水面上层,背景层就是背景图片,中间水域为交互层,上层的水面只有返回键和一层用于表面大交互的水面层(触碰屏幕产生涟漪)<br>2.最上面的水面层是用于娱乐性交互,例如在界面上点击交互按钮之外的区域,可在手指触碰屏幕的地方掀起一小阵涟漪,伴随水滴落入水中的清脆声音(如图秋章节上的大范围涟漪)<br>3.启动该界面的过场动画可设计为水雾笼罩着湖面,触碰启动界面为手指触碰屏幕——一滴水从屏幕中间落下,发出水滴湖面的清脆声音,并掀起一阵大的涟漪(屏幕波动、水雾随着涟漪往外扩散开来,界面呈现),参考画面如图<br>4.为加强界面的趣味性和互动性,可给游动的小鱼添加操作指令,添加交互动作,例如手指点击、触碰屏幕会导致小鱼游动至触碰区域,或其它趣味性的交互动作,意在使界面更生动灵活<br>5.本界面设计主旨在于强调娱乐性、交互性、美观性和实用性,主要是希望营造一个让玩家有沉浸式体验的游戏界面,在交互的过程中感受界面的生命力和唯美的氛围,提升玩家在游戏中的趣味性、互动性和游戏感官体验,令人沉浸其中,感受古风的意境和魅力
补充说明:
1.该设计方案的概念是一个沉浸在荷塘水面里的空间,主要分为三大层——背景底层、交互中层、水面上层,背景层就是背景图片,中间水域为交互层,上层的水面只有返回键和一层用于表面大交互的水面层(触碰屏幕产生涟漪)
2.最上面的水面层是用于娱乐性交互,例如在界面上点击交互按钮之外的区域,可在手指触碰屏幕的地方掀起一小阵涟漪,伴随水滴落入水中的清脆声音(如图秋章节上的大范围涟漪)
3.启动该界面的过场动画可设计为水雾笼罩着湖面,触碰启动界面为手指触碰屏幕——一滴水从屏幕中间落下,发出水滴湖面的清脆声音,并掀起一阵大的涟漪(屏幕波动、水雾随着涟漪往外扩散开来,界面呈现),参考画面如图
4.为加强界面的趣味性和互动性,可给游动的小鱼添加操作指令,添加交互动作,例如手指点击、触碰屏幕会导致小鱼游动至触碰区域,或其它趣味性的交互动作,意在使界面更生动灵活
5.本界面设计主旨在于强调娱乐性、交互性、美观性和实用性,主要是希望营造一个让玩家有沉浸式体验的游戏界面,在交互的过程中感受界面的生命力和唯美的氛围,提升玩家在游戏中的趣味性、互动性和游戏感官体验,令人沉浸其中,感受古风的意境和魅力
Collect
因为热爱,所以全力以赴
<br>因为热爱,所以披荆斩棘<br><br>因为热爱,所以终会胜利<br><br>至热爱游戏的每一位玩家,努力成为那个最优秀的游戏热爱者,加油!
因为热爱,所以全力以赴

因为热爱,所以披荆斩棘

因为热爱,所以终会胜利

至热爱游戏的每一位玩家,努力成为那个最优秀的游戏热爱者,加油!
Collect
34
|
Report
|
78
Share
相关推荐
评论
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
You may like
星球探索计划IP设计
Homepage recommendation
相关收藏夹
喜欢的插画
喜欢的插画
喜欢的插画
喜欢的插画
作品收藏夹
U-ui
U-ui
U-ui
U-ui
作品收藏夹
游戏
游戏
游戏
游戏
作品收藏夹
短学期  国风
短学期  国风
短学期  国风
短学期  国风
作品收藏夹
Ui游戏
Ui游戏
Ui游戏
Ui游戏
作品收藏夹
UI
UI
UI
UI
作品收藏夹
大家都在看
Log in