Archive

Archive for the ‘WebThoery’ Category

设计网事读书笔记

June 13th, 2010 CoCoWool No comments

从三月份的时候开始读,利用零零星星的时间,终于读完了千年的《设计网事》这本书。虽名为书,实则是他最近几年的博文汇集而来。纵观此书,却与阅读单篇感觉很不一样。下面是读书的时候,摘抄的一些句子。

SEO的迎合对象是搜索引擎,而我们主张的迎合对象是用户需求

搜索引擎的需求其实就是用户需求的不完全表述

提供服务的关键是有没有效,而不是叫SEO或UCD

1998年,W3C发布HTML 4.0 Specification

每天都有无数的网站消失、无数页面在改版

改版的目标是平稳过渡,让大家不觉得这么陌生

用户挑剔,说明还在乎

Web Design是跨学科的技艺结合体,将来一定是互联网的世界

通过事物的本质去总结出概念,而不是通过概念放大理解事物的本质

超过90%的原创者无法做到有效积累,同样超过90%的阅读者对内容好坏没有准确判断力

互联网设计不是行业,只是个技术领域,参考立足于传统行业设计

规则有规则的秩序感,不规则有不规则的位置感

做真实的自己,不要想复制别人的生活方式和轨迹

此书并没有长篇累牍的的设计理论,也没有太多枯燥无味的技术教程,加上合理的编排,让我感觉受益良多

1、互联网产品,甚至做任何事情都得有自己的想法。所有事情都需要经过自己的思考提炼,而不是人云亦云。就像有一篇讨论电梯按钮排布的文章,平凡的日常现象,其实背后也有通用的艺术设计原则。我们一则是需要认真的观察,同时还需要融入自己的思考。做事情,不能为完成而完成,加入自己的想法,才能使产品不断地进步。

2、流程化的管理和团队合作非常重要。现在互联网的项目,不再是单枪匹马就能够做出花样的年代。Ajax、CSS、DOM结构、后台,构建一个成熟的Web 2.0应用时,这些东西必不可少,在不可能一个人全完成的情况下,团队协作和流程管理就非常重要。我目前所在的单位,基本上就是按照瀑布式的开发方式来进行的,我想国内多数做互联网的团队应该也都是这个模式。敏捷目前还没试验过,感觉其实现门槛比较高,只有小组成员都具备了敏捷的能力之后,才能谈得上。所以,我相信,规范化的管理流程,是推进提高生产率的关键因素。

3、用户体验,需要用心、细致的去做。在一个趋同的审美背景下,要把自己的产品做到出彩,做到令人过目不忘常回头。在用户体验的界面设计上,必须要用心、细致的去做。互联网产品的产生过程,是一个技术和艺术结合的过程。我们不能只看艺术性而忽略了开发商的难度,也不能只考虑开发上的便捷性,而把一堆丑陋的页面丢给用户。从重要性上来看,应该吧界面设计与交互设计放在技术开发之前。首先,很多需求的产生是来自战略层而不是技术人员,所以需要有足以说服人的细化的原型作为基础。

以上是一些合上书之后的胡思乱想,看来自己的思维系统性和整理性还是有待强化。

Technorati 标签: ,,,,,

警惕Div和Class的滥用

April 4th, 2010 CoCoWool No comments

大概在06年的时候,我刚接触Div+Css的网站布局,那个时候大家对于标准的热情非常高涨,蓝色论坛里经常为了Table还是Div+Css而争论的热火朝天。现在,大家已经形成了共识,Table用来布局是不行的,但是网页里完全不用Table,也是不好的。

于是大家就开始都用Div+Css布局,这样做的目的本来是为了让网页文档更语义化、结构更加清晰、代码更加少、便于维护,这是一个非常好的目标。但是事实告诉我们,有好的目标,不一定能够做出好的事情来。紧接着,就开始出现了Div和Class的过渡使用。特别是在借用了一些Css框架,诸如960.gs,YUI Grid 这样的CSS框架的时候,我们会不自觉的多使用一些Div。

这些CSS框架为我们提供了一套解决方案,使用框架确实能为我们节省不少的时间(其实,我们如果经常写页面的话,也会积累一些常用的CSS,但是并没有汇集成框架),但同时也减少了我们自主考虑的空间,增加了我们的惰性。

以 960.gs 为例,这是一个很著名的理论,国内的一些博客上曾经做过介绍,其原则就是将960px的宽度进行不同程度分割,来达到标准化、模块化使用的目的。如下图,通过使用 960.gs 只需要一个简单的 class 就可以为我们提供不同的标准分割。

image 在其内部,我们可以按照自己的规划进行布局。

image 可以看到,这套框架非常好用,但同时,我们不可避免要使用很多的Div以及Class,按照这套框架的要求来进行结构的编写,同时,加上我们页面中个性化的内容时,过度就开始了。

为了避免这种情况,有几个原则可以遵循:

1、只使用必要地类。特别是框架提供的类,需要那种布局,就明确使用哪种类;
2、在除了 html、head、meta、param、script、title、style之外的元素上,都可以使用类,所以如果希望实现三栏的布局,不必一定要 <div class="grid_3"><img src… 完全可以直接在 img 标签上使用 class="grid_3",这样,无疑就减少了三对 div 的使用。而且,有时候这样用起来,更加符合语义文本的目标。
3、在父元素中使用类,而不是在每个子元素中都加。这个貌似是地球人都知道的规则,但其实真正在实际过程中,如果没有对于样式结构及其继承关系做规划的话,很容易的就需要在子元素中写上很多的特殊的类。这就要求我们必须具有抽丝剥茧的精神,将可以共用的元素样式都抽取到上一级元素上。

 

参考资料:
1、Fight Div-itis and Class-itis
2、960 Grid System
3、YUI2 Grid CSS

Categories: WebThoery Tags:

BLOG首页展示的几种方式

September 14th, 2009 CoCoWool 3 comments

Blog的首页是一个重要的入口,所以如何能够做好入口的整理和展示非常重要。

大约在多年以前,按照日志的时间格式进行排列的类似于编年史样的风格非常流行,但是最近,摘要形式的首页展示开始变得流行起来,还有一些其他的展现形式,我们的Blogger们利用自己的聪明才智,充分的发挥了BLOG在互联网中的作用。

今天,就来介绍几种BLOG首页的展现形式。

首先,我们应该都了解首页是非常重要的,任何一个新的访客都希望从首页上获得足够多的信息,并且从易用性和导航的角度来考虑,首页也是一个站点中浏览次数最多的页面。

我们能够使用的BLOG展现形式有三种:全文形式、摘要形式、杂志形式。下面就其优缺点分别介绍一下:

1、全文形式。全文形式是指将日志文章的内容以时间为顺序全部展示出来,并不进行删减和截断。优点:
用户可以不用离开页面而阅读全部的文章:现在已经越来越少人这么做了,但是这种方法仍保留着吸引读者的优势,唯一的缺点就是发表评论了(也许我们可以借助Ajax解决发表评论问题);
与短文章配合的很好:如果你的日志基本上是在500字以内的短文章,那么这种全文的方式也许就非常适合;
没有打断用户的浏览:用户不必文章看到一半再点击下一页或者全文去浏览剩余的部分;

2、摘要形式。摘要形式就是显示一部分文字内容,或者显示文章摘要的形式。优点:
扫描更加容易:任何浏览者都有扫描页面的浏览习惯,而这种摘要的方式更加方便读者扫描最近的新作(想想Google Reader);
控制表现力(Control of Design):摘要的形式更利于设计师们控制他们的设计(设计元素单元变小了,更容易组合,不必担心破坏整个布局);
带来更多的PV:因为用户不能在首页完成全部的阅读,所以必然会被引导到另外一个全文页,这样能够增加整个站点的PV;
避免重复的内容:全文的首页和全文页带来了内容的重复,而这是搜索引擎所不喜欢的,我们应该尽量避免;

3、杂志形式。这有点类似与摘要形式,但是日志的内容出现并不需要按照时间的顺序来排布,可以根据分类或者其他的指标来灵活的进行日志内容的排布。优点:
更好的内容组织:可以将相似的内容组织在一起,有利于集中读者的注意力;
控制表现力(Control of Design):同2;
看起来更像典型的新闻站点;

任何一种BLOG的布局方式都有起特点,我们应该根据自己站点的情况和发展状况,选择合适的形式并且进行动态的调整,因为适度的变化才能更加的吸引读者。

参考资料:
1、Blog Front Page

Categories: WebThoery Tags: