古风游戏GUI界面设计(网易向)-章节选择面板
杭州/UI设计师/4年前/3017浏览
版权
古风游戏GUI界面设计(网易向)-章节选择面板
因为热爱,所以坚持到底,该作品为网易风格古风界面的设计练习,参考了大量网易游戏的风格及元素,结合自己的创意设计制作的一款GUI界面,期待通过对游戏的热爱和对网易游戏的向往,可以实现一直以来的梦想,加油!

章节面板:
章节面板是界面中最主要的交互面板,每一个板块分为上下两部分,上半部分为关卡图和章节情况显示,搭配古色古香的古窗边框,既体现了古风元素,也配合了网易的细线边框风格,文字区域使用的透明底层也参考了网易设计风格;下半部分采用透明印花,加强了古风元素,等级面板采用了灯笼形式,正在进行的章节灯笼和面板底层都会亮起发光,强化视觉效果
四个面板暂时定义为春、夏、秋、冬四时(因视觉效果需要暂将夏置于春前),每个面板都有对应的元素拓展,例如夏季的荷花、秋季的枫叶等,每个元素和相邻面板接触寓意四季变迁,而待解锁面板我选用冬季元素,呈现冰封效果,搭配古锁链体现古风视觉,章节按顺序进行,也寓意春去秋来,四季交替
动效设计:
每次点击面板会进行一次下压弹起,同时掉落对应元素,例如点击秋章节,屏幕会落下一片枫叶,飘至水面泛起一小阵涟漪,且底层面板会发光;解锁画面为锁链打开,冰层融化,冰雪散去,也寓意冰雪消融,冬去春来。
章节面板是界面中最主要的交互面板,每一个板块分为上下两部分,上半部分为关卡图和章节情况显示,搭配古色古香的古窗边框,既体现了古风元素,也配合了网易的细线边框风格,文字区域使用的透明底层也参考了网易设计风格;下半部分采用透明印花,加强了古风元素,等级面板采用了灯笼形式,正在进行的章节灯笼和面板底层都会亮起发光,强化视觉效果
四个面板暂时定义为春、夏、秋、冬四时(因视觉效果需要暂将夏置于春前),每个面板都有对应的元素拓展,例如夏季的荷花、秋季的枫叶等,每个元素和相邻面板接触寓意四季变迁,而待解锁面板我选用冬季元素,呈现冰封效果,搭配古锁链体现古风视觉,章节按顺序进行,也寓意春去秋来,四季交替
动效设计:
每次点击面板会进行一次下压弹起,同时掉落对应元素,例如点击秋章节,屏幕会落下一片枫叶,飘至水面泛起一小阵涟漪,且底层面板会发光;解锁画面为锁链打开,冰层融化,冰雪散去,也寓意冰雪消融,冬去春来。

选篇面板:
选篇为三个章节按键,我选择了交错排列,大小不一的排版形式,按键样式为荷叶,意在配合整体界面元素主题,增强画面的韵律和节奏感
三个按键分别为大小、颜色不一的荷叶,既充满韵律节奏,、也符合现实生活,搭配主题风格相得益彰,为增强统一性和文化性我将三个篇幅命名为序章、中章、尾章,画面中为点击中章按键效果
动效设计:
点击荷叶选择篇幅时荷叶会进行一次下沉弹起,伴随荷叶拍打在水面的声效并在底层掀起一阵涟漪,(模拟现实生活中荷叶被按进水里的样子),被选中的荷叶底层会发光
点击选中荷叶时会有一只小青蛙跳到荷叶上,产生声效和小涟漪,点击另外一片荷叶会随即跳跃至选中荷叶上并进行相同交互动效(若游戏中有宠物功能设定或可与之产生联动)
选篇为三个章节按键,我选择了交错排列,大小不一的排版形式,按键样式为荷叶,意在配合整体界面元素主题,增强画面的韵律和节奏感
三个按键分别为大小、颜色不一的荷叶,既充满韵律节奏,、也符合现实生活,搭配主题风格相得益彰,为增强统一性和文化性我将三个篇幅命名为序章、中章、尾章,画面中为点击中章按键效果
动效设计:
点击荷叶选择篇幅时荷叶会进行一次下沉弹起,伴随荷叶拍打在水面的声效并在底层掀起一阵涟漪,(模拟现实生活中荷叶被按进水里的样子),被选中的荷叶底层会发光
点击选中荷叶时会有一只小青蛙跳到荷叶上,产生声效和小涟漪,点击另外一片荷叶会随即跳跃至选中荷叶上并进行相同交互动效(若游戏中有宠物功能设定或可与之产生联动)

返回面板:
返回按键的设计,我参考了大量的网易游戏按键设计,提炼出了对应的点线结合切角风格,设计出了较为符合网易风格的返回键,并结合主题风格元素——水灯笼,定义这是一个镂空雕刻在水灯笼顶层的一个返回键,主体是一个漂浮在水面上俯瞰视角发着亮光的水灯笼,返回键以镂空的形式被雕刻在顶上,透过镂空的部分发出亮光使返回键产生一种透光感,显得更有生命力且自然、唯美
边上的章节选择文字面板我参考了网易部分游戏官方网页中的透明渐变底层设计,搭配网易风格的祥云边框,又增加了画面中的古风元素和柔美感,微微发光的边框更增加了一层在水中的朦胧感和微弱的光感
动效设计:点击触碰返回键会导致水灯笼产生一次熄灭再亮起的短暂动效,模拟现实中灯一开一关的感觉,同时底层出现一小层涟漪
返回按键的设计,我参考了大量的网易游戏按键设计,提炼出了对应的点线结合切角风格,设计出了较为符合网易风格的返回键,并结合主题风格元素——水灯笼,定义这是一个镂空雕刻在水灯笼顶层的一个返回键,主体是一个漂浮在水面上俯瞰视角发着亮光的水灯笼,返回键以镂空的形式被雕刻在顶上,透过镂空的部分发出亮光使返回键产生一种透光感,显得更有生命力且自然、唯美
边上的章节选择文字面板我参考了网易部分游戏官方网页中的透明渐变底层设计,搭配网易风格的祥云边框,又增加了画面中的古风元素和柔美感,微微发光的边框更增加了一层在水中的朦胧感和微弱的光感
动效设计:点击触碰返回键会导致水灯笼产生一次熄灭再亮起的短暂动效,模拟现实中灯一开一关的感觉,同时底层出现一小层涟漪

补充说明:
1.该设计方案的概念是一个沉浸在荷塘水面里的空间,主要分为三大层——背景底层、交互中层、水面上层,背景层就是背景图片,中间水域为交互层,上层的水面只有返回键和一层用于表面大交互的水面层(触碰屏幕产生涟漪)
2.最上面的水面层是用于娱乐性交互,例如在界面上点击交互按钮之外的区域,可在手指触碰屏幕的地方掀起一小阵涟漪,伴随水滴落入水中的清脆声音(如图秋章节上的大范围涟漪)
3.启动该界面的过场动画可设计为水雾笼罩着湖面,触碰启动界面为手指触碰屏幕——一滴水从屏幕中间落下,发出水滴湖面的清脆声音,并掀起一阵大的涟漪(屏幕波动、水雾随着涟漪往外扩散开来,界面呈现),参考画面如图
4.为加强界面的趣味性和互动性,可给游动的小鱼添加操作指令,添加交互动作,例如手指点击、触碰屏幕会导致小鱼游动至触碰区域,或其它趣味性的交互动作,意在使界面更生动灵活
5.本界面设计主旨在于强调娱乐性、交互性、美观性和实用性,主要是希望营造一个让玩家有沉浸式体验的游戏界面,在交互的过程中感受界面的生命力和唯美的氛围,提升玩家在游戏中的趣味性、互动性和游戏感官体验,令人沉浸其中,感受古风的意境和魅力
1.该设计方案的概念是一个沉浸在荷塘水面里的空间,主要分为三大层——背景底层、交互中层、水面上层,背景层就是背景图片,中间水域为交互层,上层的水面只有返回键和一层用于表面大交互的水面层(触碰屏幕产生涟漪)
2.最上面的水面层是用于娱乐性交互,例如在界面上点击交互按钮之外的区域,可在手指触碰屏幕的地方掀起一小阵涟漪,伴随水滴落入水中的清脆声音(如图秋章节上的大范围涟漪)
3.启动该界面的过场动画可设计为水雾笼罩着湖面,触碰启动界面为手指触碰屏幕——一滴水从屏幕中间落下,发出水滴湖面的清脆声音,并掀起一阵大的涟漪(屏幕波动、水雾随着涟漪往外扩散开来,界面呈现),参考画面如图
4.为加强界面的趣味性和互动性,可给游动的小鱼添加操作指令,添加交互动作,例如手指点击、触碰屏幕会导致小鱼游动至触碰区域,或其它趣味性的交互动作,意在使界面更生动灵活
5.本界面设计主旨在于强调娱乐性、交互性、美观性和实用性,主要是希望营造一个让玩家有沉浸式体验的游戏界面,在交互的过程中感受界面的生命力和唯美的氛围,提升玩家在游戏中的趣味性、互动性和游戏感官体验,令人沉浸其中,感受古风的意境和魅力
34
创作信息
Report
声明
78
Share
相关推荐
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
You may like
相关收藏夹
Log in
34Log in and synchronize recommended records
78Log in and add to My Favorites
评论Log in and comment your thoughts
分享Share





















































































