文章标签 ‘Web Design’
原来的freicurv v2因为不支持wordpress 2.7+以上版本，懒得看代码，直接换成了现在的chrome主题。感觉还不错，效果见本站吧。就是右侧的站外RSS不能显示内容，本来想通过这个显示一下相册的图片，有空再看看代码好不好改吧。 本来还想自己做做主题设计，不过前两天sai同学问了我一个css的问题，我想出解决方法的时候，那边已经解决了….顿时发现自己的技术严重倒退ing….T_T，真的要放弃技术路线了
其实这篇blog写很久前就写完了，鉴于分析内容是SBBS美工站务的面试题一直没有发出来，今天难得早起，发一下。有兴趣的可以先看看之前的这篇《www2.seu.edu.cn UI设计分析》，里面提到的很多问题，本文中可能就不重复再讲了。 页面地址：http://www.seu.edu.cn 先看一下整个页面： 一个首页面用了16个色块（包括不同选项卡）的背景色，其中如果按面积和位置计算，至少有4种颜色可以用来当作“主色调”，很显然，颜色的搭配是最大的问题，颜色的问题也就到此为止了，反正推倒重来是唯一的出路，也就不多挑毛病了。 而右侧的4个图片链接（9～12），几次会议上所有人都一致同意去掉，不知道为什么新版首页上却还留着…… 接着从上往下看，1区里面的内容非常饱满，到了2里面，超过70%的面积是空着的，完全没有平衡感。不过，往好的方向想…大家的注意力肯定更多的被东南大学4个字吸引过去了… 开始挑小问题：右上角的English到左右|的间距都有不一样…… 再看下拉菜单，鼠标必须悬停到文字上，文字才会变色，不然只有背景变色。这个虽然不能完全算是低级错误，但也不是高级的……。其他问题也很多，宽度不一，不同浏览器效果不统一等等。不过有一点算是进步，在我使用Opera(9.50 beta)测试的时候，没有出现BBS上很多同学说的浏览器崩溃的现象，不知道是苏迪的人修复了这个bug还是新版本Opera的兼容性比原来强了（经测试Opera 9.26前版本仍存在问题）。 不过这个导航栏也不是一无是处，把“盘”改成“蟠”，多少算一个进步（这个其实还要归功于sunway同学打的数个电话……）。 顺便再扯个用户体验的问题，下半部分的四个选项卡都是鼠标悬停自动切换的，并没有加上悬停时间判断等设置，在选项卡上也没有选中效果变化（虽然下面的内容会更换背景色）。这样就造成了一个结果，如果鼠标从上方移动至下方想点击一条新闻，但却经过别的选项卡，就会点不中（鼠标路径如图所示）。 再到Firefox里转转，那个问题叫多啊，随便帖几张图。其他浏览器里的问题就不全部列举了。总之，惨不忍睹。 导航栏和banner的重叠部分。 右侧图片链接上方没对齐。 搜索框宽度不对就算了，还移到了灰色底色之外。 最后来看看代码： 1． DTD声明从来没找到过 2． Div里套着table，td里面还套着js 3． Div的ID命名使用div1、div2….. 4． Div有了id还将css写在style=””里 5． Css里面都没有*{} 6． 使用iframe调用页面统计代码 7． Meta信息缺乏症，详见《从www2.seu.edu.cn看<meta>的重要性》 8． 其他n多不符合w3c标准的html/js代码 顺便提个老毛病：ICP备案的格式及链接都不符合要求，哪天被人抓到小尾巴又要折腾几天了。 如果说页面设计上不好看，看着看着没准就习惯了。但是以上这些问题却都是做Web Design的新手犯的低级错误，如果是BBS上的一个没什么人去的内页，那么勉勉强强可能还能接受，但是作为一所大学的首页，这些就不大合适了。
应xiaoxiao师兄到要求整理了一下上周五的”第二期网页设计交流会”中讨论到的与新版校首页相关的部分，外加了（很多…）自己的意见。 页面地址: http://www2.seu.edu.cn 浏览器环境: IE 7 / Firefox 2.0.0.12 / IE 6 (Multiple IE) 自上而下，Banner很简洁，但是感觉有些过于简洁（与下面的图相比）。其右侧的“旧版 | English”(图中红圈内部份)使用了11px，导致”旧版”两个字出现锯齿，如增大至12px或使用PMingLiU字体来解决，English的链接也没有加。这一块的链接最好还是用文字代替图片，否则不利于搜索引擎的分析。 Banner下面的导航栏的链接顺序比旧版首页要好，最好在后台进行一下流量分析，进一步优化调整。按钮的设计上整体感觉不错，但是建议两个按钮相接部分的细节再处理一下，另外文字及其前面的箭头在按钮上不居中也应该修正。还有一个小问题，就是应该是”虎踞龙蟠BBS”。每个按钮下的下拉框的配色等最好能重新设计，与整体风格不是很搭配。 导航栏下方的图片中的中间那一点很有味道（虽然点歪了，也不够精细），右侧边缘的那1px似乎是处理失误。 中间部分在”东大新闻”的选项卡里，所有的文章标题在50%左右的位置做了截断，但其他三个选项卡内并没有相同的处理，应统一处理方式。同时，就目前文章标题长度来看，最长的标题仅占所处容器宽度的75%，右侧部分仍显得比较空，可以考虑加上新闻发布时间进行填充。 在新闻的部分的”more”之下还有大快的空白区域，不知道设计上的用意何在？ 其右侧的友情链接中图片的距离留白过大，在图片已经做过边框处理的情况下完全没有必要。而下方的下拉框及搜索的input的左侧应保持与上方图片相同的margin。另外，两个”搜索”按钮是一个比较明显的错误。 再往下，footer中还是”© 2006“，E-mail地址上最好还是加上mailto链接，后面的ICP备案也不符合信息产业部的要求。 页面整体上比旧版的一个明显不足就是在1024×768分辨率下不能显示所有内容，而第一屏之外基本没有任何有效信息。以我使用的Maxthon 2.0.8标准模式为例，第一屏的最后一行正好能显示最后一条新闻的一半，用户会习惯性的下滚但找看不到更多信息。如果能前两张图中的多余空白去掉，应该可以解决。 从代码上分析，有很多类似于<style type=“text/css”><!– –></style>的冗余代码，整体上使用已经被淘汰的table布局方式导致冗余代码量的进一步增加，而<head>区的<meta>信息也很不完整。站内图片、css等文件引用上采用的都是绝对链接，这一点是否应该更改不好说，因为从链接上分析目录结构比较乱。另外，在</html>之后还是用了一个iframe调用了一个统计文件（一开始还以为是被挂马了…）建议改用类似Google Analytics那样的js脚本形式放在</body>之前。
工作的问题其实已经定下来很久了，乱七八糟事情多又懒，也没写点面经啥的。转眼间08年都过去半个月了，回想起07还是感觉很不寻常，这一年对我未来的影响可能会很大，很大。 在微软实习的时候就是在PR Team，觉得PR有些意思，也很适合自己，虽然偶尔也有找个PR方面工作的念头，但从来没有认真的想过以后真的以此为职业。知道二面结束，HR问我“你完全可以去一个外企做PR，为什么选择蓝色光标？”的时候，我脑子里还在想着我为什么选PR而不是WEB Designer？ 给自己一个挑战？或是与专业划清界限的机会？其实自己也不知道。第一天笔试，隔了两天天上午一面，晚上二面，晚饭还没吃完拿offer，次日签约。一切都来得太快了，特别要谢谢Hanna的建议和Ran的那长长的一串各类咨询公司的list，以及其他朋友们的帮助和支持。 下个学期不打算去实习，好好享受一下最后的大学生活。毕设选题是会务管理系统，就是从头把DRPT网站做一遍，只不过这次自己不仅仅要当美工，还有programmer，PHP、MySQL、UI还有所谓的用户体验。也许这是自己最后一个需要写代码的项目了。还想接点小活挣点小钱下学期出去旅游，可突然又发现我刚刚把自己能接的所有项目都介绍给别人了…..sigh….. //突然想起来，还欠Ran一篇实习感受…该抽空写写了
