上一篇： «
下一篇： »

天津麻将-电视大奖赛-UI设计-前端开发

今天展示一下五月底用4天时间完成的一个小项目，天津麻将电视大奖赛的专题官网UI设计+前端开发。这个项目要的很急，呵呵，所以非常非常赶…界面方面可能还有很多不如意的地方，但是网页的前端代码我是在既追求效率又追求质量的基础上完成的。这个项目的交互原型和详细需求不是我出的，所以内容结构和内容量、布局等不是我能大规模修改的。我只能在原型的基础上进行创意设计和修饰配色等。


先来两张首页效果图:

两个版本之间的区别只在于赛事进程版块内，由于需求的内容量过大，所以导致页面很单调，版本一是我优化的，版本二是按需求的内容量设计的。这个需求我看到第一眼就觉得很无奈，这么庞大的信息量，有必要吗？！用户100%不会耐着性子把内容看完的，反倒是需要一些突出的图片或是颜色来引导用户浏览网页中最重要的内容，比如这个页面中的”报名”按钮、”赛事进程”板块和参赛步骤。再有就是既然是麻将游戏的电视比赛，那就一定要通过设计元素突出主题，能让用户在没有看到文字的时候也能大致了解页面的主题内容是什么，提高页面的可识别性。Banner的Q版电视人物和一些麻将就是起到这个效果。

关于页面的风格，我借鉴了很多腾讯的设计风格，走清新路线，希望能在炎炎夏日给人以清爽的感受….导航是Copy的，哇咔咔….时间紧迫啊….尽管拍我吧，哈

顺便说个题外话，哈，那个”易游开心”很山寨… 囧rz

天津麻将电视大赛首页效果图-版本1

天津麻将电视大奖赛-首页效果图1
点击小图查看清晰大图

天津麻将电视大赛首页效果图-版本2

天津麻将电视大奖赛-效果图2
点击小图查看清晰大图

天津麻将电视大赛专题网站Demo(点击查看)

下面来总结一下我使用的一些前端技术和经验，希望能对大家有所帮助，大家如果有更好的意见欢迎留言，互相学习。

1.CSS书写顺序

css-书写顺序

注重CSS书写顺序使很多前端开发新人所忽视的，其实这种习惯的好处不用说大家也能猜出一二，最最主要的还是方便日后的查询和维护。

2.结构化CSS代码

css-结构化-树形

将CSS代码结构化之后，让它符合树形结构，便于查找各级元素的CSS样式属性。

3.杜绝使用CSS Hack

很多前端新人都把学习重点放在CSS Hack上，为了让大部分主流浏览器兼容自己的网页，想方设法在CSS代码中插入适用于各种不同浏览器的Hack。其实完全没有必要，通常情况下的网页，基本上都可以在不使用CSS Hack的情况下达到浏览器兼容效果，当然，这需要扎实的CSS基础和丰富的经验。

4.针对IE6兼容问题采用”单挑”原则

ie6-兼容性-css

如果是IE6单独存在的问题，那我会单独命名一个CSS文件，把适合IE6的标准CSS样式写在这个文件中，并在网页里使用IE条件注释达到仅让IE6读取该CSS文件的目的。呵呵，出于我对IE6的愤慨之情，所以把文件名命名为这个比较不”和谐”的名字。

注释如下:
<!–[if IE 6]>
<link rel=”stylesheet” type=”text/css” href=”style/fuck_ie6.css” />
<![endif]–>

5.为CSS写目录索引

css-目录索引

这个没什么好说的，作用类似图书的目录，大家有兴趣可以阅读彬Go关于CSS索引注释的文章《CSS最佳实践:为今后的项目制作空白CSS模板文件》，这里面详细讲解了关于如何写CSS索引注释和它的好处。

6.遵循命名规范

命名规范对于一个团队来说是相当重要的，对于个人来说也是有一定的好处的。之前彬Go发表过一篇《Web UI 设计(网页设计)命名规范》，是我个人总结的一些相关命名规范内容，感兴趣的话可以看看。

7.纯CSS实现导航标签”面包屑”效果

css-导航-面包屑

我个人认为这个没什么可说的，但是考虑到很多前端新人可能不太了解如何实现，所以简单说一下实现的原理。它的效果就是让导航(已选择)标签停留在相应的页面上。比如首页的话，导航标签的”首页”高亮；在”奖品详情”页面，相应的”奖品详情”标签高亮。

基本实现原理就是在不同的页面为<body>标签添加一个id。比如首页是<body id=”home”>,赛事报道页面则是<body id=”report”>,以此类推。然后就可以使用CSS专门针对不同的body id值设置CSS样式了。我的样式是这样的(已缩减):

#home .nav_home a:link,#report .nav_report a:link  {background-position:0 -78px;color:#005ea5;}

8.CSS Sprites(CSS图像拼合) 技术

CSS Sprites近期收到了国内前端们的热烈追捧，但我只在网站中的导航上使用了这个技术。为什么呢？原因有以下两点:

1.CSS Sprites增加了切图时间，但这个项目时间很紧。
2.这个网站的流量不大，使用CSS Sprites技术没什么意义，不会有什么明显的减小流量和请求的效果。

也就是说CSS Sprites的优势基本无法在这个网站上得到体现。所以我这次放弃使用CSS Sprites技术，从而换来了开发(切图)效率上的提高。

如果大家想了解更多关于CSS Sprites的知识，可以看看《CSS Sprites(CSS图像拼合技术)教程、工具集合》。

9.通过W3C xHTML 和 CSS 官方验证

css-w3c-认证

这个是必须的，这玩意儿地球人都知道，我就不多说了。但遗憾的是，这个认证只停留在我的Demo中，运营中的实际网站已经有很多错误了，是为网站填充内容的运营客服人员搞乱的，无奈一下….我也懒得改了，有Demo就行了。

天津麻将电视大赛专题网站Demo(点击查看)

好了，关于使用到的技术我目前只想到这些，以后可能还会补充新的。最后想说一下，前端开发并不是非要追求所有高级技术，并不是在一个项目中使用最高级的技术就能证明米的能力有多强。真正的高手是懂得分析一个前端开发项目，用最适合的前端技术实现当前项目的人，这样才能记得到质量有追求了最高的效率。比如我刚才说的CSS Sprites，它明显不适用于这个项目。再比如滑动门，我也没有使用在导航上，因为这个专题网站是有有效期的，基本上不会涉及到导航文字的改变，所以浪费时间在使用这些技术上的话毫无意义。我相信有更多的高手能使用比我更恰当的技术来完成自己的项目，所以在下才把这篇文章发上来，希望能互相学习。大家尽管拍砖啦….嘎嘎嘎~~

留意更新

订阅彬Go以查看前端开发/CSS相关最新教程及资源。

转载声明:
原载:彬Go——集前端开发/网页设计/网站可用性/用户体验于一体的趣味互联网生活
本文链接:http://blog.bingo929.com/tianjin-ma-jiang-mahjong-contest-website-ui-design-css.html
如需转载必须以链接形式注明原载或原文地址，谢谢合作

相关日志