最近这两年一直使用ASP.NET MVC开发游戏周边的网站,包括交易平台、运营平台、推广系统等,还有一些小型的财务管理方面的网站。公司内部使用和自用的一般界面设计弱,经常使用LigerUI搞定大多数。下面挑一些能看的界面,顺便说一说我在团队中一直应用的前端原则。
一、交易平台:
首先这个是交易平台的,采用经典的DDD分层架构,采用到的框架、库和产品:ASP.NET MVC+Entity Framework+Structure+AutoMapper+Log4net+STSdb4+ChnCharInfo。前端相关:Jquery系列+LigerUI+uploadify+fancyBox+ckeditor。由于交易平台的后台是比前台更重要更复杂的网站,因此采取独立网站的方式处理,图片上采用了又拍云。服务器采用的阿里云。数据库页是阿里的云数据库。此处特别对LigerUI的作者谢略表示感谢,LigerUI可以方便的查看并修改源码,作者的良心真是大大的好。
解决方案目录:
先上前台的截图:
如果禁用了js,你只可以从幻灯不变化和下拉组件不响应点击看出来js被禁用了。从这里谈谈我对团队中前端相关部分的要求。主要由以下4点:
1.不考虑动画时,看不出来页面是否禁用了js。如图片滚动。 2.不考虑交互时,看不出来控件是否禁用了js。如ul+a模拟的下拉列表,a模拟的button和checkbox。 3.UI组件的css中根据父元素的大小定义样式,js根据父元素大小进行动画。使用时通过js调用父元素选择器起作用。 4.不考虑动画看不出来UI组件是否禁用了js。因此,UI组件的父元素css必须定义好布局,UI组件必须和父元素结合起来使用。对于后端,基本的功能必须由html+form实现,不能依赖前端,比如验证,比如导航树、分页和搜索的基础功能。js只是用来处理需要动画和优化用户体验的部分,哪怕完全禁止了也不能影响测试和基本使用。
用户中心:
商品发布:这个是所有交易平台中最复杂部分,不同的游戏有不同的商品分类,不同的分类有不同的属性,必须都能上线后动态配置和扩展。交易还有不同的类型和流程,还有商品的自动上下架等功能,这是简单的说。复杂的说,我见过差的团队一两年都搞不明白需求和业务逻辑。不是你简单的在网上找一些例子和所谓的处理方案就能解决里面很多的性能问题。
资金明细:各种资金流动都必须记录,各种资金流向就二十多种类型,涉及到提现和交易押金的更是必须细心设计和测试。
后台:先上个能看到整个菜单项的图,这个是游汇总查询里的游戏订单统计。
参数配置:内容不用说明了
首页幻灯配置:
游戏里商品的扩展属性:
客服:各种客服统一管理,每种客服只能登录自己后台,管理自己的业务。
帮助文档:
交易平台这个已经烂尾2年的项目,从没有需求的各种问题的遗留ASP.NET Web Form项目,到3个月搞定需求,6个月基本完成。感谢后期加入的美工,没有他我们的界面根本不像个正规产品。
二、运营平台:
运营平台主要是页游方面的游戏对接功能。比起上一个项目简单了太多,虽然比一些小项目完善,但是除了在架构方面有所优化,前端组件略有更新外,没有特别多的亮点。
前台的:
用户中心:
DBA7EDD8A0B65FD.png" alt="" />
游戏大厅:
游戏主页:
论坛:我们有能力制作独立后台,论坛更不在话下,对接其他的没必要,对接、配置和剪裁太麻烦了,刚刚好满足需求才是最好的程序,而不是什么都拿开源的来充数。
后台:这个项目压力基本不在网站上,而在游戏服务器上,因此没必要前后台分别部署。
游戏接入:这里采用了CSScript,上线后随时动态对接游戏。
推广项目有2个,相对上面的简单很多,端游的那个太丑了不拿出来吓人,页游的也直上一张图:
剩下的还有一些小型项目就省略了。没有什么技术上的升级和借鉴价值。
由于项目中的实际应用和解决方案的多次重构,让我架构方面和项目规划方面不断的进行思考、总结和改进。