realign

早些时候完成了网站中浏览量非常大的product页面的改版。这次改版，在我看来并不属于redesign，应该算是realign。这项工作其实完成有一段时间了，现在看来当时的一些做法还比较幼稚，现在整理一下主要是记录～～当然也还有一些些可以借鉴的经验～ 在此之前，product几乎延用了06年的页面代码，无论从设计还是别的角度看都有很多的不足。4年前的页面是由程序员负责实现（甚至是设计）的，遗留下来的主要问题是： 1 主次不清晰。 2 样式混乱：正文和超链结都是棕色，区分度不大。颜色、字体样式使用的比较随意，和逻辑层次没有必然联系。各个元素的间距有些过紧，也不统一，各个块之间不整齐。 3 大部分元素都是随手写进去的，结构不清晰 4 大面积没有太大作用的flash广告。 5 发表评论部分不明显，看起来不太像能发表什么东西 6 代码比较混乱，基本难以修改⋯⋯所以从06年到现在一直没有改。 当时的版面截图（不过看起来没当时那么难以接受⋯⋯） 由于product页面的浏览量非常的大，几乎是大部分用户接触网站的第一个页面（通过搜索引擎搜产品），需要有一个更为友好的界面，便于用户了解信息，吸引用户评论、驻留、参与到网站的其他活动中。这是第一次进行比较复杂的页面修整，我比较保守滴保留了原来页面中出现的95％的元素，只删除了几个被要求从页面去掉的flash广告。先在ps里弄出预期的效果图～参考了zol、京东商城、豆瓣三个网站（其实对比学习的过程蛮漫长的，但是我真的都忘记了！）。这是v1.0的效果图： 接下来就要下手啦，第一步是便是抛弃原有css，重新整理了一遍html，清理掉所有的<b>、<font>，统一页面的正文和超链结颜色，并使二者有比较明显的区分。按照页面的信息大概分块来重新调整元素和元素间的结构，分配更为合适的id和class。然后样式表～后来还加入了产品相关贴子列表版块，加强产品与论坛内容的联系。我个人认为如果能在论坛的贴子中加入对产品的反向联系效果会更好。这是v2.0版的效果图啦，根据内部反馈，对个别元素的样式进行了改动。 这是最终实现的“产品信息”、“产品评价”部分。相关的贴子部分去掉了图片，改为全文字，这是考虑到筛选出合适图片需要更多的人力～ 在“产品信息”部分，真的有很多很多信息！除了理化数据表格外，还有图片、销售区域、价格、厂家信息、提交报错链接、访问人数和分享按钮（他们在原来的布局中就紧挨着理化信息）。从逻辑分类上看，首先将不属于产品信息的访问人数和分享扔到外边去，他们属于“页面”。再把图片相关的划到一边。销售区域、价格、厂家信息、提交报错链接这几个东西让我有些犯难，各个都需要被强调（他们都是希望被用户注意到的功能），空间却只有2行左右。最后我用了按钮样式来强调他们。这个结果并不太理想，有一个反馈意见认为它们仍然不够“强”，我认为它们能够出现在第一屏就已经有天然的优势了，现在这种情况还能够接受。总之这块暂时就这么地了，是否有更好的改进方法？我还会慢慢想的。 这是产品评价部分： 评价，是产品口碑的指标，更是吸引用户更深入参与网站的活动。因此，它最好是“低门槛”的，只需要点一两下就能完成，不需要被“对不起，您还没注册”之类的失败信息打扰。当然，在指标的计算上，我们实际上是排除了那些“游客”打分和一些被怀疑为是“刷分”的打分，具体是怎样判断的，并没有公开，这样是为了防止有人有针对性地绕开规则刷分。评价部分的交互行为其实是以豆瓣评分为原型设计的，用灰常菜的js搞完了，可喜可贺。一开始打算用ajax的，这样打分体验好一些（感觉门槛更低），不过因为没有时间跟负责后台的程序员好好交流下，作罢。评分条的行为，除了hover状态，有两种unactive状态：1 原先的打分，暗色；2 本次已经评价，但是还未提交的打分，用了比较跳跃的亮色。亮色和右下角的提交按钮颜色近似，这样能在视觉上形成一种联系，暗示用户需要点那个提交，以及两个指标都需要打分。 产品评论的部分模仿了豆瓣的评论，可以原地展开全文。下方留有大大的白色输入框来诱导用户参与评论。察看全部评论的链结被反馈不够明显～～这个页面当中有太多被认为不够强调的地方了～～路曼曼其修远兮 与产品页面配套的还有一些子页面，不一一赘述了。 关于web界面设计，大道理往往很容易懂，可实际做起来很难一蹴而就。一开始往往只是靠自己的感觉和经验，一点一点的改善。自己在一点点进步，整个网站也在一点点进步。可能步伐并不大，还追不上大部队，至少我们正在往前走。