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

补充说明： 1.该设计方案的概念是一个沉浸在荷塘水面里的空间，主要分为三大层——背景底层、交互中层、水面上层，背景层就是背景图片，中间水域为交互层，上层的水面只有返回键和一层用于表面大交互的水面层（触碰屏幕产生涟漪） 2.最上面的水面层是用于娱乐性交互，例如在界面上点击交互按钮之外的区域，可在手指触碰屏幕的地方掀起一小阵涟漪，伴随水滴落入水中的清脆声音（如图秋章节上的大范围涟漪） 3.启动该界面的过场动画可设计为水雾笼罩着湖面，触碰启动界面为手指触碰屏幕——一滴水从屏幕中间落下，发出水滴湖面的清脆声音，并掀起一阵大的涟漪（屏幕波动、水雾随着涟漪往外扩散开来，界面呈现），参考画面如图 4.为加强界面的趣味性和互动性，可给游动的小鱼添加操作指令，添加交互动作，例如手指点击、触碰屏幕会导致小鱼游动至触碰区域，或其它趣味性的交互动作，意在使界面更生动灵活 5.本界面设计主旨在于强调娱乐性、交互性、美观性和实用性，主要是希望营造一个让玩家有沉浸式体验的游戏界面，在交互的过程中感受界面的生命力和唯美的氛围，提升玩家在游戏中的趣味性、互动性和游戏感官体验，令人沉浸其中，感受古风的意境和魅力

017bf56171813011013e894326c479.jpg

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

01eea8617176b211013f22cf7a127d.jpg

01c7726171738f11013f22cf71ffa4.jpg

67a416ce273220p5d0av3s3694.png

一捻丹枫-国风ui

013a8jdvyic6eqk8l20mub3235.jpg

国风二次元—UI界面

0139c460308dc311013ef90fc56f7b.png

仙侠游戏-祥云录

01d0f361d1cafb11013f01cdae4c3e.jpg

苍翠欲滴

01787c5a696398a80121346650ac60.png

2017煅瑟作品集

01989a5aa8e4aaa80121246dc0e8ea.jpg

中国风游戏UI

0112b061d1cafb11013e8cd0305059.jpg

01479259321e1aa8012193a3aee28a.jpg

Q版游戏界面

01109e5b80dccca8012190f26c98e4.jpg

日和风-出生点

《梦华录》同人插画创作——顾盼生辉

站酷推荐设计师

01avrsvnwv2uqwp5q9bn0s3237.jpg

015ynipuuogd7n807sgney3730.png

一起修仙ui设计2

01f71b5a696398a8012134669e2dd3.png

2018上半年做的一些iOS游戏商店图（5图）

01ffca5b828ff8a8012190f2beefb1.jpg

01cduwklqyhor6cut5ms2e3134.png

二十四节气系列

01gdmhp1qilgtnboda9hqi3739.png

中国风-个人练习

010lqf0lt10gbqprsjros93137.jpg

国风练习作品——浮光如梦

01f5945d5cb184a8012187f4c3346d.jpg

游戏UI

01a2a559365411a8012193a368b117.jpg

熹妃传 凰若新生版本

01c0715e624e17a801216518d0df00.png

中国风UI练习

66b5f4d35941eda4xe0q3n4449.png

DOTA2游廊《红莲》

01xrkiesw0pcgp0yto9awj3536.png

《遇仙》活动概念练习

01e9556054d21011013e87f4339f6d.png

仙侠

01d5ed5c66b866a801203d225e9c4d.png

01qmqlx90bseacowej2mij3438.jpg

国风UI练习

01c10f5c21969ba8012029ac0ce826.jpg

中国风项目-Jack ui

0123145b861d25a8012126ced3aa78.jpg