2005年07月29日

网页可以说是网站构成的基本元素。当我们轻点鼠标,在网海中遨游,一副副精彩的网页会呈现在我们面前,那么,网页的精彩与否的因素是什么呢?色彩的搭配、文字的变化、图片的处理等,这些当然是不可忽略的因素,除了这些,还有一个非常重要的因素——网页的布局。下面,我们就有关网页布局谈论一下。

网页布局类型

  网页布局大致可分为“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型,下面分别论述。

  1、“国”字型:也可以称为“同”字型,是一些大型网站所喜欢的类型,即最上面是网站的标题以及横幅广告条,接下来就是网站的主要内容,左右分列一些两小条内容,中间是主要部分,与左右一起罗列到底,最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是我们在网上见到的差不多最多的一种结构类型。

  2、拐角型:这种结构与上一种其实只是形式上的区别,其实是很相近的,上面是标题及广告横幅,接下来的左侧是一窄列链接等,右列是很宽的正文,下面也是一些网站的辅助信息。在这种类型中,一种很常见的类型是最上面是标题及广告,左侧是导航链接。

  3、标题正文型:这种类型即最上面是标题或类似的一些东西,下面是正文,比如一些文章页面或注册页面等就是这种类。

  4、左右框架型:这是一种左右为分别两页的框架结构,一般左面是导航链接,有时最上面会有一个小的标题或标致,右面是正文。我们见到的大部分的大型论坛都是这种结构的,有一些企业网站也喜欢采用。这种类型结构非常清晰,一目了然。

  5、上下框架型:与上面类似,区别仅仅在于是一种上下分为两页的框架。

  6、综合框架型:上页两种结构的结合,相对复杂的一种框架结构,较为常见的是类似于“拐角型”结构的,只是采用了框架结构。

  7、封面型:这种类型基本上是出现在一些网站的首页,大部分为一些精美的平面设计结合一些小的动画,放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示。这种类型大部分出现在企业网站和个人主页,如果说处理的好,会给人带来赏心悦目的感觉。

  8、Flash型:其实这与封面型结构是类似的,只是这种类型采用了目前非常游戏行的Flash,与封面型不同的是,由于Flash强大的功能,页面所表达的信息更丰富,其视觉效果及听觉效果如果处理得当,绝不差于传统的多媒体。

  9、变化型:即上面几种类型的结合与变化,比如本站在视觉上是很接近拐角型的,但所实现的功能的实质是那种上、左、右结构的综合框架型。

关于第一屏

  所谓第一屏,是指我们到达一个网站在不拖动滚动条时能够看到的部分。那么第一屏有多“大”呢?其实这是未知的。一般来讲,在800*600的屏幕显示模式(这也是最常用的)下,在IE安装后默认的状态(即工具栏地址栏等没有改变)下,IE窗口内能看到的部分为778px*435px,一般来讲,我们以这个大小为标准就行了,毕竟,在无法适合所有人的情况下,我们只能为大多数考虑了。

  说了那么多,无非是一个标准的问题,其实接下来不用我说大家也能想到,第一屏当然要放最主要的内容,关键要知道的是,我们要对第一屏能显示的面积要有个估计,而不要仅仅以自己的机器为准。其实网页制作的一个很麻烦的地方就是浏览者的机器是未知的。

有关导航栏的位置

  导航栏能让我们在浏览时容易的到达不同的页面,是网页元素非常重要的部分,所以导航栏一定要清晰、醒目,一般来讲,导航栏要在“第一屏”能显示出来,但是有时第一屏可能会小于上面所说的435px,积于这点考虑,那种横向放置的导航栏要优于纵向的导航栏考虑,原因很简单:如果浏览者的第一屏很矮,横向的仍能全部看到,而纵向的就很难说了,因为窗口的宽度一般是不会受浏览器设置影响的,而纵向的则不确定性要大的多。

什么样的布局是最好的

  这是初学者可能会问的问题。其实这要具体情况具体分析的:比如如果内容非常多,就要考虑用“国字型”或拐角型;而如果内容不算太多而一些说明性的东西比较多,则可以考虑标题正文型;那几种框架结构的一个共同特点就是浏览方便,速度快,但结构变化不灵活;而如果是一个企业网站想展示一下企业形象或个人主页想展示个人风采,封面性是首选;Flash型更灵活一些,好的Flash大大丰富了网页,但是它不能表达过多的文字信息。还没有提到的就是变化型了,我只是想把这个留给读者了,因为,只有不断的变化才会提高,才会不断丰富我们的网页!

  大致就这些了,希望您有所启发。

Trackback: http://www.lanxuan.com/web/view_web.asp?id=173

谈网页优化

谈起网页的优化这个问题很多人都没有什么概念,有很多的业内人士都对网页优化一无所知或者知之甚少。说起对网页优化的理解,我曾经去各大搜索引擎上搜索过“网页优化”一类的话题,结果都是介绍如何优化搜索引擎排名的文章,其实这只是优化概念的一个组成部分,而网页的优化工作是由很多方面的优化组成的,作为一名优秀的网页优化工作人员必须具备多方面的知识,不仅仅要掌握网站设计制作技术(包括网站架构设计、网页设计以及制作页面编写代码等等);还要掌握很多计算机其他方面的知识(包括电子商务、人机交互、易用性和一些相关的软件知识等等);甚至需要掌握心理学、商业运作等相关知识。

我认为网页的优化应该是由两个方面组成的:1.技术优化,2.人文优化(这个分类只是我总结的,没有人给出过具体定义)。技术优化指的是代码的优化、目录结构的优化和针对搜索引擎的优化等等针对技术方面的优化工作,一般都是看不见摸不着的但是会给用户带来不少方便也会给网站带来更大的效益,技术优化有一定的模式而且需要优化的东西也比较固定相对简单一些只是时间问题;人文优化指的是交互性优化、易用性优化等等针对用户使用方面的优化工作,这一部分是网站用户看得见摸的着的东西,人文优化是最花经历最困难的因为我们要猜测使用者的心理。下面我就分别对这两个方面进行解释。

1.技术优化:

技术优化主要分为代码优化、目录结构优化和针对搜索引擎的优化三个部分。这一部分的优化工作主要是由网站开发人员测试提出方案完成的,而且有一定的规则,所以相对要简单一些只是时间问题。

(1)代码优化:

代码优化主要解决的问题就是页面浏览速度和适应性的问题。文字和图片是构成页面的两个主要因素,所以我们的优化也要从文字和图片开始。文字我们在制作页面的时候基本上都是定义好的一般使用宋体和12px,随着代码的标准化字体的样式大小等等的指定应该使用css样式表来完成,而现在被广泛应用的<h1></h1>、<font size=×× color=××></font>等等标签都是不标准的,也会慢慢被css取代,现在很多大型的网站包括各个门户网站像是这样不标准的问题还是广泛存在几乎每个页面都会有,所以css样式表是我们在优化过程中应该注意检查的问题(其实这个问题应该是在页面制作的时候就解决的)。

图片问题主要存在size过大的问题,在这里我们把图片的优化归在代码优化一部分一起介绍而不另分一类,是因为图片优化与代码内容优化的目的是一样的。网页中一般应用两种格式的图片jpeg和gif,这两种图片的应用很多人把握的并不是很好,jpeg适用于颜色比较多、构成比较复杂的图片(比如一些照片、渐变颜色等等),gif适用于颜色比较少、构成比较简单的图片(比如网站的logo、大的色块构成的图片等等)。Gif图片尤其要注意导出的时候选择颜色数目这样也会达到很好的减小尺寸的效果。对于一些比较大的图片我们还可以将它切割成比较小的图片进行拼接这样也可以提高网页的下载速度。

减小网页size提高网页下载速度还有一种简易的方法就是使用一些网页减肥的小工具,我们可以去下载一些这样的工具他们可以使你的网页缩小20%~50%达到事半功倍的效果。

表格是页面最重要的排版方式,在浏览器读取网页代码的时候,必须读完一个完整的table才会显示出来, 如果一个大的table里边含有很多小的table那么浏览器会在读完整个大的table才将整个的内容显示出来。我们在浏览一些页面的时候经常会出现页面半天才会显示出来,最后是在等不及了按了“停止”按钮,页面一下子显示出来了,这就是在一些小的table外边嵌套了一个大的table,而小table已经读完了就是还没读完整个的table浏览器不会显示,这样会大大减慢页面浏览速度。因此我们要尽量减少表格层次,尽量避免将一些小的表格嵌套在大的表格中间。

还应该注意的是在使用dreamweaver制作网页的时候经常会出现很多垃圾代码,注意检查删除一些没有用的代码。网页的适应性就是在不同系统、不同浏览器和不同分辨率的适应能力。要注意的是分辨率,应该最低照顾到800×600的用户(分辨率800×600的显示尺寸780×428、分辨率1024×768的显示尺寸1007×600),所以页面最宽不要超过780,一定不要让用户横向拖页面。

(2)目录结构优化:

现在很多网站都将所有的页面零散的放在同一个文件夹下而没有分类,这样做虽然可以但是会对以后的维护等工作带来很大的麻烦。我建议应该是建立一个大文件夹,里边包括各个频道的文件夹、网页页面图片文件夹、网页内容图片文件夹等等一个一个的单独类别的文件夹,使得在维护时候可以方便的找到每一个页面的具体位置。

(3)针对搜索引擎的优化:

搜索引擎优化是很多人都知道的一种优化项目,也是完整的优化工作必不可少的一个步骤。 “关键字”在搜索引擎这个话题里是一个核心的字眼,几乎所有的针对搜索引擎优化问题都是围绕着“关键字”展开的。有很多人盲目的追求在网页中处处体现关键字,觉得这样就会更容易被搜索引擎搜到,其实这样做并不一定合适。比如前一阵子流行过的“鬼影秘笈”,方法就是用和网页背景相同的颜色在页面中隐藏了很多关键字,很多人现在还在用这个方法,但是随着搜索引擎功能越来越强大这个方法已经不那么好用了,甚至会起到反作用。(这种做法会被搜索引擎惩罚,有专门的举报系统)

“关键字”的体现要合理,比如我们可以制作一个“网站导航”的页面,网站导航页面会淋漓尽致的体现各个关键字,这个页面不但方便用户使用也会更容易的被搜索引擎找到起到事半功倍的作用。随着搜索引擎都有了图片搜索功能,网页里边的图片也是体现关键词的好地方,在页面里边加入图片后千万别忘记给图片起一个“名字”(如:<IMG SRC="images.gif" WIDTH="100" HEIGHT="100" BORDER=0 ALT="图片名称">)我们给图片的名称就可以是关键字。域名里边含有关键字也很重要,但是不宜过多,一般一个或者两个最重要的就可以了,如果过多就会影响网站在搜索引擎的排名而且不方便用户记忆。子页面的名称也是一样,现在很多网站的子页面名称就是关键字的堆砌,其实这样会降低每个关键词的出现机率,结果每个关键词都被打了折扣甚至被忽略适得其反。在子页面的命名上也有很大的学问,几个关键词构成了子页面的名称,但是这几个关键词用什么连接呢?如果用分隔符断开关键字那么搜索引擎不会认为他们是一个一个的词而会当他们是一个词处理,但是有的分隔符搜索引擎同样认不出来,比如“_”和“-”在google里边下划线“_”就不被接受,所以建议大家使用“-”和空格(空格码:%20),一般所有的搜索引擎都会接受。千万不要用中文给页面命名,页面名称、图片名称等等都要用英文字母(如:“首页.html”或者“图片.gif”一定要写成“index.htm”“image.gif” 等等)。

现在很多网页虽然很好看但是并不实用,我们就拿现在很流行的跳转页面来说吧!现在很多企业网站都流行做一个跳转页面,或者是一段动感的flash或者是一张漂亮的图片,他们认为这样很漂亮特别能够体现公司的形象,其实他们并不知道这样做非常影响搜索引擎搜索你的网站。(搜索引擎无法通过FLASH找到你真正的内容页)

人文优化主要是交互、易用性和网站表现的优化。

我曾经看过一本书是美国著名的优化大师斯蒂夫.克鲁格写的,他推崇的效果优化第一原则就是“别让我动脑”。也许这个概念看上去好像一点头绪没有,我第一次接触这句话的时候也是有点晕,如果想要做到这一点那可是非常困难的。“别让我动脑”这个概念在不同的人身上有着不一样的概念,这就回到了上边所说的“人文优化是最花经历最困难的因为我们要猜测使用者的心理”这句话。

人和人是不一样的,每个人会因为生活的地域不同有着文化差异,或者因为受到的教育经历不同有着理解问题的差异,或者是个人观点和习惯的不同等等有着各种各样的差异,我们要让所有人都能够理解我们的网站能够方便的使用网站达到他想要达到的目的这简直是太难了,而人文优化要做的就是要把这些差异变为统一。

各个网站都会有不同的目的,有电子商务网站、企业的展示网站、个人站点等等。现在我们就以最最需要进行人文优化的电子商务类型网站为例研究人文优化的大概过程。

电子商务网站这个概念很明确,就是要体现商务,可以是网上购物的、可以是在线票务的、可以是网上的交易平台,总之就是让用户在网络上实现商务目的。现在电子商务网站大体会有两个部分B2B(商家对商家)、B2C(商家对普通零散用户)。

B2C是电子商务网站设计的最高境界,如果能够做出成功的B2C网站那么别的什么企业展示网站或者B2B的商务网站等等就都不算什么了,原因也很简单,就是因为上边所提过的人和人的差异。电子商务网站有一个很重要的指标就是“转化率”(也就是上网浏览网页的浏览者转变为顾客的比率)。这个概念也就是我们衡量一个电子商务网站是否成功的重要指标,他也在优化过程中占有重要地位。

介绍完电子商务的一些相关概念我们言归正传,当我们要对网站进行优化的时候,我们很快的就完成技术优化,因为技术优化有特定的步骤需要优化的项目也比较固定而且有据可依。但是很多人不知道人文优化该如何入手,其实也很简单那就是“试用”。

一般试用会分为两个部分:首先我们会自己试用一下对网站有一个大概的了解,然后我们需要找一些普通用户进行试用,在普通用户试用过程中我们不会给予任何提示只需要默默的观察他们的操作步骤记录每一个步骤的操作过程和所用时间了解他们的一些想法。在“试用”以后我们就可以根据测试的结果分析出需要修改的部分。切记在试用过程中我们千万不能给被测试的用户任何提示尽量不要打扰他们。

说回上边提到的“别让我动脑”这个概念,其实这句话就表达了一个意思就是“简单”,使用简单是一个电子商务网站成功的基础。“简单”宗旨我们需要贯穿整个网站的每一个部分。下边我们按照“试用”流程分析一下在优化过程中需要注意的问题。从登陆这个网站开始,我们是不是能够清楚的看到这个网站叫什么名字?是干什么的?那里是产品的目录?那里是导航菜单?那里是今天的重点推荐产品?那里是折扣产品专区?这一连串的问号是针对电子商务网站而言的,如果对于别的网站我们会考虑别的因素,比如针对一个新闻页面而言,我们就会考虑那里是今天的头条新闻?我要看昨天晚上中国队足球赛的比分和图片在那里?等等。这种测试并没有特定的规范,任何动作都是随机的都是我们突发的动作,所以这样的测试不能像是那种商场或者专卖店等等地方的测试一样给我们一个很长的表格让我们去画对勾画杈子。一切测试做的都要非常自然,只有这样我们才可以真正了解到用户在使用过程中遇到的困难。

我们有的时候也可以给被测试人一个题目让他去完成,比如:让他去网站上买一张最新的大片DVD,或者然他们去查找一个最新的消息甚至是一条一个月以前的消息。整个测试都要在和谐的环境下进行,不要让参与测试的人感到紧张,那样会大大降低测试结果的正确性。测试还需要根据经费、网站规模等等情况制订不同的方案。

下面是一个用户浏览一个网站的过程图,这张图有助于我们了解用户浏览网站的整个过程。我们可以根据这张图列出的步骤细心观察测试时候用户在网站上完成一个工作时候在每一个步骤里所用的时间、都做了些什么,并记录下来认真分析这些数据,这些数据也是我们优化动作的依据。

通常我们优化的重点都会集中在导航菜单、产品目录、站内搜索、页面布局、购买流程等等。下边我要举一些小例子分析一下现在很多网站所犯的错误,我们如何进行优化。

我们先看一个大多数网站都会犯下的文字错误,文字是构成网页的最重要的元素之一,我们文字可以用文字的颜色、大小和位置来区分他们的重要性,分为标题、内容等等。有很多网站的首页进去我们一眼看到的是黑压压的一片文字,马上我们会对这个网站都没有好感。这就是我们国内很多网站都有的错误,网站会因不同的目的有不同的设计方向,很多企业的领导者并不懂得设计,他们会去参考一些别人的网站来对设计者提出自己网站的设计要求和想法,这样就会造成不管什么方向的网站感觉都一样,从而失去了自己的主题。比如现在我们去一些企业的网站,上去之后没看到这个企业是干什么的,第一眼就是大片的企业新闻,这样的大片新闻感觉企业网站变成了新闻网站。

有人说了那我们把企业介绍放在首页吧,这样一上网站的首页人家就看见我们公司是做什么的了。看上去真是好主意,但是我们应该明确一点用户是在“浏览网页”而不是在“阅读网页”,这样大片的文字根本不会有人有兴趣看,用户只会对自己感兴趣的东西进行阅读,其它基本上都是浏览。

我们可以作一个简单的试验,现在你可以递给你身边的一个人一张报纸,让他们看报纸,细心观察一下他们怎么看报纸,每一个人都会整个把报纸翻一下,起码他会看完一整版的标题然后开始阅读一个文章。绝对没有人会拿起报纸从左上角或者右下角开始一个字一个字的阅读报纸。网站的好处就是在于“链接”,我们可以充分的利用链接引导用户阅读他们感兴趣的东西,或者引导他们阅读我们希望他看见的东西。我们现在就可以去优化一下以前的网站了,去掉首页大片的文字,根据需要改成链接。

还有一个各个商业网站都会犯下的错误,就是在让客户填写注册信息的时候需要必填的栏目太多。很多上网的人都有这样的经历,现在大多说商务网站都会有注册一栏,如果注册成为会员就会有什么什么样的服务,很好我们进去注册一下吧。点击注册按钮,打开页面,好家伙怎么要天那么多条,还都是画着红色星号的必填!算了还是不注册了!一下子这个网站会因为注册少了很多顾客。有的人没被吓跑坚持填写,好吧开始填写了用户名、密码、确认密码……“身份证号码”?“手机号码”?一下子我们停住了,不填这些可以么?但是画着红色星号,算了我不想让别人知道这些信息,我也走吧,看看别的网站有没有同样的服务而且需要的信息少一点,尽管别的网站服务不好而且不如这个网站有名气。这就是很多人上网的经历,很多网站的拥有者急于求成,想马上控制到客户的资料,他们会觉得这样就会占到市场的先机。其实他们错了,想一下我们先让用户都来使用我们的网站慢慢的他们觉得我们这里很安全而且服务很好就会有人想得到更多的服务,他们自然而然的就会注册这些信息了。但是我们在用户还没有了解这个网站的时候就把他们吓跑了我们就会彻底的失去这部分用户的,这样给网站和企业带来的损失要远远大于那些不管怎么都会注册的用户带来的利益要大。所以当我们在优化过程中看到网站的注册过程中有这些栏目的时候我们要建议他们把必填改为自愿填写,而且在一些关键页面里边添加一些关于注册客户和普通客户会享受不同待遇的提示,这样会起到事半功倍的作用。

我们已经介绍了两个关于人文优化的例子,由于这样的例子很多我们也不一一列举,要在实际的工作中去总结。并不是最好看的网页就是最好的网页,实用性要比艺术性更重要。

上边这些优化的问题适用于我们对一个已有的网站进行优化,如果我们要重新做一个新的网站,最好在初期就考虑一些这样的问题,毕竟做任何事事先考虑要比事后弥补强的多。这些紧紧是我自己的一些经验总结和大家分享,文章还有很多不足之处,希望大家多多提点!我的QQ:250596 以后多多交流!希望大家都能够做出最棒的网站,提高中国网站设计制作行业在世界的地位!

Trackback: http://www.lanxuan.com/web/view_web.asp?id=172

UI的本意是User Interface也就是用户与界面的关系。他包括交互设计用户研究与界
设计三个部分。

一个通用消费类软件界面的设计大体可分为五个步骤:
1.需求阶段
2.分析设计阶段
3.调研验证阶段
4.方案改进阶段
5.用户验证反馈阶段

需求阶段   
软件产品依然属于工业产品的范畴。依然离不开3W的考虑(Who,where,why.)也就是使用者,
使用环境,使用方式的
需求分析。所以在设计一个软件产品之前我们应该明确什么人用(用户
的年龄,性别,爱好,收入,教育程度等)。什么地方用(在办公室/家庭/厂房车间/公共场
所)。如何用(鼠标键盘/遥控器/触摸屏)。上面的任何一个元素
改变结果都会有相应的改
变。


除此之外在需求阶段同类竞争产品也是我们必须了解的。同类产品比我们提前问世,我们要比
他作的更好才有存在的
价值。那么单纯的从界面美学考虑说哪个好哪个不好是没有一个很客观
的评价标准的。我们只能说哪个更合适,更合适于我们的最终用户的就是最好的。如何判定最
合适于用户呢,后面我会介绍
用户调研


分析设计阶段
  
通过分析上面的需求,我们进入设计阶段。也就是方案形成阶段。我们设计出几套不同风格的
界面用于被选。首先我们应该制作一个体现用户定位的词语坐标。例如我们为25岁左右的白领
男性制作家居娱乐软件。对于这类用户我们分析得到的词汇有:品质,精美,高档,高雅,男
性,时尚,cool,,个性,亲和,放松等。分析这些词汇的时候我们会发现有些词是绝对必须
体现的,例如:品质,精美,高档,时尚。但有些词是相互矛盾的,必须放弃一些,例如:亲
和,放松与cool,个性与等。所以我们画出一个坐标,上面是我们必须用的品质,精美,高档,
时尚。左边是贴近用户心理的词汇:亲和,放松,人性化。右边是体现用户外在形象的词汇:
cool,个性,工业化。然后我们开始搜集相呼应的图片,放在坐标的不同点上。这样根据不同作
标点的风格,我们设计出数套不同风格的界面。


调研验证阶段
http://www.designatnet.com
几套风格必须保证在同等的设计制作水平上,不能明显看出差异,这样才能得到用户客观的反
馈。

测试阶段开始前我们应该对测试的具体细节进行清楚的分析描述。

例如:
数据收集方式:厅堂测试/模拟家居/办公室。
测试时间:X年X月X日X日。
测试区域:北京、广州、天津。
测试对象。某消费软件界定市场用户。

主要特征为:

·对电脑的硬件配置以及相关的性能指标比较了解,电脑应用水平较高;
·电脑使用经历一年以上;
·家庭购买电脑时品牌和机型的主要决策者
·年龄:X-X岁;
·年龄在X岁以上的被访者文化程度为大专及以上;
·个人月收入X以上或家庭月收入X元及以上;
·样品
·五套软件界面
·样本量:X个,实际完成X个。

调研阶段需要从以下几个问题出发:
· 用户对各套方案的第一印象
· 用户对各套方案的综合印象
· 用户对各套方案的单独评价
· 选出最喜欢的
· 选出其次喜欢的
· 对各方案的色彩,文字,图形等分别打分。
· 结论出来以后请所有用户说出最受欢迎方案的优缺点。

所有这些都需要用图形表达出来,直观科学。

方案改进阶段   
经过用户调研,我们得到目标用户最喜欢的方案。而且了解到用户为什么喜欢,还有什么遗憾
等,这样我们就可以进行下一步修改了。这时候我们可以把精力投入到一个方案上(这里指不
能换皮肤的应用软件或游戏的界面)将方案做到细致精美。


用户验证阶段   
改正以后的方案,我们可以将他推向市场。但是设计并没有结束。我们还需要用户反馈,好的
设计师应该在产品上市以后去站柜台。
零距离接触最终用户,看看用户真正使用时的感想。为
以后的升级版本
积累经验资料

  
改正以后的方案,我们可以将他推向市场。但是设计并没有结束。我们还需要用户反馈,好的
设计师应该在产品上市以后去站柜台。
零距离接触最终用户,看看用户真正使用时的感想。为
以后的升级版本
积累经验资料

Trackback:  http://www.lanxuan.com/ui/ui01.htm

在网络项目开发过程中,这个阶段也叫做构建阶段,是工作量最大、最艰苦也是最难以控制的阶段。不管一座大楼的设计蓝图多宏伟,若没有管道工、泥瓦匠、水电工等各种工匠一砖一瓦地艰辛积累,密切协作,这座大楼始终是空中楼阁、海市蜃楼。 

本章包括以下内容: 
一:界面设计打开用户之门 
二:交互设计建立沟通的桥梁 
三:程序开发是系统的基石 
四:本阶段的重点工作 
五:总结 

一:界面设计打开用户之门 
  对于以Web服务为模式的项目,无论是访问用户还是系统管理员,主要工作都是通过浏览器的界面交互完成。给系统设计合理友好的*作界面就像给人穿衣服一样,合体舒适的搭配能给人耳目一新的感觉,反之则令人敬而远之,甚至失去进一步深入了解的兴趣,这无疑不是开发人员所期望的结果。 
  以网站为表现方式的系统界面设计所涉及的知识远远超过了美术的范畴,作为一个优秀的Web界面设计师来说,需要掌握的不仅仅是电脑制图的能力,还应该具备心理学、广告创意、美术工艺、排版艺术等多方面的综合素质,系统界面绝不是孤芳自赏令人难以理解的抽象画,而应该成为绝大多数用户共同接受的最方便的日用品。 
  关于Web美工创作的*作技巧不是本文所关注的,我们希望知道的是用户最需要的是什么样的界面?根据笔者的经验,在进行产品设计和项目开发的界面设计中是有所不同的。产品通常是指可大量分发销售的成熟性的产品,具体用户是不确定的,而项目大多是针对具体客户的需求进行开发,不具备二次销售的条件,当然,在二者之间总还是能找到共同点的。 
  产品设计由于面对的是未知的用户,因此界面设计必须挖掘的是用户习惯和观念的共性,大众化产品(例如邮件系统、BBS、门户网站等)、商业应用产品(例如交易系统、电子办公系统)或专业应用产品(例如财务系统、杀毒系统)等等,需要考虑的是所有人或某一类的人的共同习惯和审美观念,而不是刻意地出奇招、不断地考验用户的智商和耐心。 
  项目开发则相反,面对明确的具体用户考虑更多的是个性化设计,也许有些是非常规的要求,但是用户已经具有特殊的偏好和习惯时,应尽可能满足用户的需求进行设计。在笔者参与某个行业的办公系统设计过程中,用户就提出了非常特别的要求,所有的界面不能出现外国人和外国场景的形象,每一页都需要变换颜色,另外站点标题要大得出乎寻常,失去比例,这时候美工只能迁就用户的心理和习惯,可是这样的设计用到产品设计上,大多人都会感到不舒服。 
  不管是产品设计还是项目开发,界面设计都应该遵循以下共同的规则: 
* 界面风格需要一致: 
  每个新的系统对用户来说都是一次新的学习过程,如果界面风格经常变化,不保持统一,无疑更增加了用户的学习难度,也许会导致用户的厌烦。比如:第一页的导航条是图片型的放在页面顶部横排的,而在第二页导航条却成了文字型居左竖排,用户会为了捉摸不清设计师的意图而大光其火。再比如,有些设计师考虑到用户方便,在页面上放置了后退的按钮,但是要是不注意保持一致的话,用户也许会糊涂后退、回首页、BACK、上一页这些按钮究竟有什么区别?也许非常恼火你是不是拿他在开涮! 
* 界面元素对象化: 
  在程序设计中需要注重模块化,而界面设计中对象化同样非常重要。将界面元素对象化,比如底部版权信息、导航条等,图片、JS也尽可能复用,比如站点标志、搜索按钮、滚动信息的JS文件等等; 
* 建立标准的文档管理和设计规范:界面设计涉及的要素比较多,文件类型复杂,而界面文件往往还需要另外通过程序进行编译,这就要求了界面设计人员必须建立规的设计规范和标准的文档管理方法: 
* 制定文件命名标准 
* 设定文件统一路径 
* 保存原始创作文件(例如PSD、Fla源文件) 
* 最终完成文件(经过用户认可的文件) 
* 单独管理摸版文件(经过编译或嵌入程序的文件) 
* 考虑用户偏好习惯和方便性: 
  我们经常可以听到界面设计师说:“怎么在我机器上看得好好的,怎么在你那里就变样了?”其实道理很简单,用户的*作环境和习惯与设计环境是有差别的,界面设计同程序一样需要进行测试,主要测试的对象为: 
* 浏览器类型和版本兼容问题:假如有个很重要的菜单是需要IE5.5支持的,但是用户万一使用的是IE4.0版本,那么这个菜单就再也打不开,结果可想而知; 
* 分辨率:界面设计师的屏幕也许是17寸的,分辨率甚至做到1280×960都是可以接受的,但是用户的如果用的14寸显示器,分辨率只能达到640×480,界面布局看起来会很可笑; 
* 字体大小:利用样式表精确控制页面元素,特别是字体是很重要的。有不少用户喜欢更改浏览器默认的字体显示大小,当设计师看到用户将字体显示调整成最大而将表格撑得乱七八糟的时候,或许会痛心疾首的; 
* 考虑特殊情况:用户或许在浏览器设置了禁止显示图片或禁止JS脚本等,有必要为图片设置好尺寸以免影响其他元素的显示,并有其他的方式代替JS需要显示的效果和信息。 
* 编写帮助: 
  无论多么出色的界面设计对用户来说都是陌生的,那么编写站点帮助或软件帮助是个非常有效的办法,把你的设计意图和使用介绍明明白白地告诉用户,在用户遇到困难的时候能够得到最快的帮助,不但可以降低用户的不满程度,同时可以帮助用户更加系统深入地学习和掌握。 

二:交互设计建立沟通的桥梁 
  作为交互设计人员应该读读Alan Cooper的《软件创新之路》,被誉为“VB之父”地Alan Cooper明确地提出了将程序开发划分为交互设计和编码设计两大部分,笔者非常赞同。 
  “软件越来越难用,越来越难学。”我们不止一次地听到用户如此地抱怨,也许程序员认为机器就是如此理解程序的,随着系统的日益复杂和功能的不断强大,软件原来越难用,门槛越来越高是很正常的,但是别忘记用户才是系统的所有者和使用者,期望用户成为计算机专家的要求显然是难以接受的。在国内无论是从事商务的技术人员还是技术型的商务人员都极其缺乏,交互设计师就理所当然地应该成为彼此沟通的桥梁。 
   
  程序员和用户的差别是很明显的,因此通过交互设计建立良好的沟通是非常需要的。 

(一)交互设计师的侧重点并不在程序的编码实现,而注重于用户如何最好地与系统交互*作,在设计中重点需要考虑的是: 
* 系统易用性: 
  并非每个用户都是计算机的熟练用户,面对隐藏的层和特殊设计的菜单可能会抓瞎,用户不见得能明白双击左键能自动滚屏或者怎样能让自动滚屏停下来、直接看最下面的结果?交互设计师特别需要重视的就是系统的易用性。有条件的话,可以让不同的陌生用户从首页开始*作,不给予任何提示和帮助,观察用户的上手和熟练程度,记录并查找所有的陷阱和缺陷,加以改进。 
* 流程简便: 
  “简单就是美”,在系统交互设计方面更是如此,如何用最少的*作,最明显的提示和帮助,完成一项流程的*作是需要花大力气进行优化的。 
* 盲点测试: 
  用户的*作并不是严格的按照系统的提示顺序进行,也不一定会按照系统的提示要求去做,而程序员在设计的过程中是按照既定的逻辑进行开发的,测试中也难免以自己的习惯*作,这时就可能出现盲点,即系统存在未被测试到的状态环境。编写测试软件或利用其他测试工具可以大大提高测试的可靠性。 
  例如一份表单正常提交以后,假如用户利用历史记录后退,回到提交前的状态,这时候修改了提交内容,又再一次提交,那么结果是什么呢?再比如,假如设计的弹出窗口的尺寸是700×500,且不可改变大小,隐藏滚动条,而用户万一使用640×480的分辨率,那么弹出的窗口中,用户如何能点击到最下面的按钮? 
* 出错及异常提示: 
  凡是软件都是有BUG的,因此对各种出错或异常状态给予用户一个友好的提示和帮助,并提示用户大概是由于什么原因,那么用户会愉快的多。 
  笔者遇到过一个用户注册系统,用户注册后希望修改密码,有的能做成功,而有些人怎么也改不了,检查了很长时间才发现由于密码设置的是不少于三位不大于八位,许多用户密码超过了八位,因此无法修改成功,但是由于没有提示出错原因,所以用户就不断拼命地提交,最后只好愤怒地去投诉。 
  再例如发布信息的时候,可能会因为填写时间过长,提交时被系统拒绝数据丢失,那么用户辛辛苦苦撰写的内容永远消失了,还有什么比这个更令用户沮丧的吗?在填写的输入部分给用户一个时间提示,或允许后退找回刚才的内容,至少可以让用户容易接受一些。 
* 利用用户环境测试 
  利用用户的*作环境进行测试,用户的服务器、网络线路和客户机也许跟开发环境差别巨大,用户的机器配置、网络环境对系统的要求是不一样的。比如设计客户端的APPLET时也许会因为客户机的内存不足而崩溃,也可能因为文件过大,远程访问时处理时间过长而响应失败,。 

  (二)Web的交互设计师需要掌握的技能主要是Javas cript、VBs cript、Dhtml、Flash等,还需要了解心理学、人因工程学、系统工程等方面的经验和知识,认真把握每个交互动作的合理性和可行性,这个交互也许是个链接,也可能是个表单、提示窗口或者是滚动条的拉动距离,检查是否最优化和最合理的方式。 
  举个很简单的例子,在链接列表过多出现翻页的时候,程序员很自然地会将上一页、下一页的翻页按钮放在了最底下,但是列表很长的时候,用户每次翻页的时候都需要把滚动条拉到最下面才可以点击到翻页按钮,用户可能就会抱怨,明明知道在某一页,却每次要点击后拉滚动条寻找翻页按钮,而如果将翻页按钮在列表的上面也放一条,并且设置直接跳转到某页的按钮,则大大减轻了用户的工作量,类似的例子在我们的设计中屡见不鲜。 
   
三:程序开发是系统的基石 
  程序员进行编码,构成了系统的基础。在进行系统分析和软件建模以后,程序开发便进入实质性的过程。但是在程序员动手之前不单需要和系统分析员打交道,还要和界面工程师,交互设计师,业务流程分析员以及客户交流,除了理解程序逻辑以外,同时需要理解界面设计和交互设计的要求,使得程序开发成功的可能性大大提高,达到事半功倍的效果。 
  随着网络开发技术的日益发展和用户需求的不断增长,系统开发中的编码工作日益繁重,不仅仅需要考虑性能和功能的实现,而且需要考虑今后的维护和扩展,需要考虑到系统的集成和稳定,许多稍微复杂一些的系统开发便不再是一个人能独立完成的,因此程序开发需要遵照严格规范的开发过程。 
* 文档规范:软件即文档。 
  良好的文档习惯是系统开发极其重要的,文档是程序的一部分,程序员花一定时间进行文档编写是份内的工作。具备完整的文档记录,对于系统今后的二次开发、查错、升级具有重大的作用。可以说即使代码全部扔掉,只要文档完整,很快就可以再造一个系统出来,而只保留了代码,缺乏文档的时候,就像被抽了脊梁的标本,再难站起来恢复原样。 
* 编码规范:编码规范包含了程序排版、注释、命名、可读性、变量、程序效率、质量保证、代码编译、代码测试和版本控制等等注意事项。 
  程序员最常见的问题之一:“别人写的代码看不懂,与其改写不如重写”。基本上都是没有按照编码规范开发的缘故。所以我们经常听说某个程序员离职以后,他所写的那些模块就没法维护和管理了。 
* 代码复用:代码复用是程序员的梦想,也是系统成熟度的重要标志,关于代码复用方法的讨论不在本文之列,但是做为代码复用是程序员走向成熟和提升的必经之路。 
* 测试测试再测试:笔者在软件工程的讨论会上,微软的一位项目经理在介绍微软如何保证产品质量时说:“微软质量保证的秘密就是:测试测试再测试!”在IE4.0的开发小组中,200名开发程序员意外还有200多名测试工程师,而且测试工程师的水平甚至高于开发工程师。测试是系统质量最直接有效的手段。在国内的开发环境达到这样的投入和水平显然是不太现实的,但是尽可能提高测试环境和加强测试管理,是程序员和测试工程师共同的方向。 

四:本阶段的重点工作: 
  在这个阶段是整个项目组参与角色最多,也是协作最密切最难控制的过程,笔者认为做为项目经理特别需要关注以下问题: 
  1:建立项目小组的沟通渠道: 
  沟通是项目小组具有密切协作形成凝聚力的最重要的手段,在项目开发过程随着各个角色的工作进展,冲突和矛盾是必不可少的,无论是通过论坛、邮件、会议、口头还是私下沟通,项目管理人员有责任和义务建立小组通畅及时的沟通渠道,根据有经验的HR经理分析:有效的沟通应该是在问题发生的48小时之内,否则解决的效率会降低75%。 
  2:建立文档规范和管理办法,借助PVCS、WINCVS等相关工具建立整个项目小组的文档; 
  2:建立BUG报告系统,在内部预先创建测试环境,将BUG尽可能早地消除掉。 
  3:测试和文档工程师的工作自始自终地贯穿着项目开发过程,这在以后的文章中会继续介绍。 


五:总结 
* 沟通是本阶段最需要注意的问题; 
* 建立文档管理体系; 
* 建立测试环境和测试标准; 
* 界面设计是为用户设计的,不是用来自己欣赏的艺术品; 
* 为用户着想,人性化设计是项目成功的保证; 
* 代码复用,对象化模块化设计是界面设计、交互设计和程序开发共同追求的目标。

□ 作者:九点    2003-2-11 10:18:00 
2005年07月27日

上周末,连续收到一条短信,说当当网有了新书,请上网购买云云。可气的是,周五半夜12:00多了,又连续发了两次,同样的内容。

最一开始,我认为是当当不定搞到了那个sp的合作,不断地重复发短信是为了尽可能地利用有限的合作时间。到了周日下午,又接到一条当当的短信:“因技术失误,于夜间频发短信造成骚扰,乞请海涵。特奉上10元礼券(已装入你的帐户,不限使用范围及购物金额),聊以补过,恭颂夏安!当当网”。

至此,方觉得当当此次的营销操作好像还有点小水平。当然,如果较真地去投诉当当,可能还会的倒更多地礼券,但本文想要探讨的是营销方面的东西,其他的暂不考虑。

关掉短信,我一点上网去看当当有什么促销的冲动都没有。会有人为这10元的礼券上一次当当么?也许下次上当当的时候你会用这10元的礼券,起码能顶替一次快递的费用。

既然连上网一看的愿望都没有引起,说明当当的此次短信营销还是有问题。症结在哪里呢?什么信息才会让我上去一看呢?我想应该是具体到某一本书、某一张碟、某一款软件、某一场演出的,正好我知道、并准备顺手购买的,如果有这样的信息,那么顺着这10元礼券,也许就买下了。一定不是我已知的急需的,因为如果那样,我自己早就主动去寻找购买了。

所以说,电子商务的本质还是商务,要从商务的角度去说。日常我们路过街边小店,听到的促销大致可分为两种,一,拆迁大甩卖,全部商品2折。——–结果,进去的人并不多,大家已经麻木。二,某品牌男皮鞋,剩余不多,2-6折,卖完为止。——–结果,人挺多,效果不错。

当当的做法,类似第一种。错在认为有限的广告资源想要传递全部的促销信息,拉下哪款都觉得不忍心。事实上,买皮鞋的进来后,目光主视野里的货架还有别的商品,就有可能被顺手买走。落实在网站,就是发布的也许是某张碟的促销,进到网站,主视野里有促销图书等,结果会好于全部的打折信息。

促销的事情本来说到这里就可以结束了,但突然想到了网站的内容营销其实和商品营销有类似之处。再说几句。

网站其实就是商店,内容就是商品,来你网站看了内容,就等于来你商店购买了商品。新浪陈彤开的是一个大超市,里面都是别的厂家的商品,因为规模大、开的早,所以生意不错。二类网站,相当于地区或者专项经营超市,目标客户的范围窄,专业货物比较齐全比较早。个人网站,相当于街边便利店?性保健品专卖店?

新浪最近被人诟病,是因为他还缺少些什么。比如,缺少web2.0。比喻到商场上来说,最大的超市里,利润最大的商品是该超市自产自销的商品,比如自制的糕点、自加工的部位肉。映射到网站,就是自有内容的创作。新浪的自有内容已知起不来,所以,bokee网站看到了超越新浪的契机,信誓旦旦。

不过,bokee的努力方向有点跑偏,开始学新浪大面积转载(大量进货了)(还有很多网站在学新浪),自有的东西没能发展,自有产品的展位还受到了外来商品的冲击。

zdnet的主编高飞(笔名)与我有段对话,是针对bokee的。大意是,以bokee现有的240人的规模,应该用200人分20的方向,每个方向10个人,每天每个人写一篇有水平的blog,那么,bokee每天将产生200篇有价值的自有商品。符合web2.0的精神,胜过转载1000篇别的网站的内容。三个月后,基本独霸一方。

最后慎告:上面的偏方无毒有毒请自判,bokee慎用。药理:来自一线的内容才是最有价值的内容,大家其实都没有做到、做好。另,bokee及当当如煎服,我和高飞要收处方费用。

————————————-

最新补充,bokee今天将达到300人。2005年如此烧钱的网站绝无仅有



Trackback: http://tb.donews.net/TrackBack.aspx?PostId=481363


[点击此处收藏本文]   发表于 2005年07月26日 11:15 AM
2005年07月26日

IT方面的论坛太多了,有综合,有专业,有行业,在各个论坛里混了几年,体会颇深,以前是论坛哪里人多,往哪里去,新浪论坛,网易是经常去的,人多啊,好几十万,去了以后才发现没有意思,没有共同的语言,于是逛专业论坛,行业论坛,终于找到了共同语言,总结一下论坛的经验:人不在多,有仙则灵,贴不在多,有精则行,逛了大半辈子,一个IT人发展方向一定要除了技术外,业务,理论,思想一个都不能少,于是我推荐如下这些论坛,或许真能帮助您,做论坛,都是赔本的买卖,不收费还帮助你学习,得向斑竹们致敬啊。
  
    以下论坛排名不分先后,还有许多业界知名的论坛,主要有点偏门,这个不做概述,呵呵。
  
    IT技术开发综合类
  
    http://community.csdn.net/
  
    适合人群:只适合软件开发者
  
    技术开发最全面的论坛,里面可以遇到很多牛人,版面也很全,什么J2EE,.NET啊,该有的全上,在这里基本上可以提出任何问题,人气也是最旺的,不过一般提出的意见都有正方两面的,所以最终解决问题,还是靠自己。
  
    评价:专业,很牛逼,就是速度慢。
  
    www.itpub.net
  
    适合人群:数据库开发人员
  
    数据库方面是非常著名的,牛人不少,不过,现在比较杂,什么都做,网络,操作系统,行业应用,到体育贴图,当然有些也不错,人气非常高,特别是灌水方面,^_*.
  
    评价:强,速度一般;
  
    http://bbs.chinaunix.net/forum/
  
    适合人员:系统工程师
  
    这里的特色就是操作系统方面在业界是最著名的,牛人不少,目前,在数据库,网络方面也颇有建树,当然灌水方面也不赖,呵呵,属于温柔性
  
    评价:强,速度还可以
  
    bbs.chinajavaworld.com/
  
    适合人员:JAVA开发
  
    JAVA方面非常综合的论坛了,牛人也很多,是一个难得的JAVA论坛,涉及你想象的关于JAVA目前任何技术。
  
    评论:强,速度还可以。
  
    http://www.huihoo.com/forum/
  
    适合人员:中间件开发者
  
    人气不错,版面风格独特,在开源,中间件,工作流方面非常不错,问题讨论都非常深刻、也很专业。
  
    评价:很好,速度一般;
  
    IT售前技术顾问综合类
  
    http://www.sysvs.com/bbs
  
    适合人员:IT售前及技术顾问
  
    业界知名的售前技术顾问论坛,比较新异的知识点,各个IT行业版快划分也比较好,也非常专业,绝对是我稀饭(喜欢)的风格,网站风格业内罕见,也有很多专业文章,没有地方灌水,厉害。
  
    评价:很好,速度比较快
  
    网络工程类
  
    www.1000bbs.com
  
    适合人员:布线/网络工程师
  
    人气很旺,特色是版面比较紧凑,综合布线这一块很权威,很窄很专,时间非常久了,颜色比较明快,就是太低端了,
  
    评价:不错,速度一般
  
    http://www.sharecenter.net/
  
    适合人员:网络工程师
  
    之所以我喜欢是这个网站很多做CISCO工程都知道,也是别人介绍我去的,时间非常久了,颜色比较暗谈,属于忧郁型。
  
    评价:不错,速度也还可以
  
    IT营销管理类
  
    http://www.topren.net/forum/index.php 
  
    适合人员:企业策划,CIO
  
    业界知名的知识站点“唐人社区”,信息化管理顾问可以去看看,人也很多,可惜,都是下载,实质性内容需要改观,我记得是非常专业的网站。
  
    评价:不错,速度也还可以。
  
    IT管理综合类
  
    http://club.amteam.org/
  
    适合人群:大多数,
  
    评论类比较多,基本上在其他媒体上看到的评论,这里都会有,要想了解IT发展的情况,就来这里看看。
  
    评价:很好,休闲工作都可以看。


(全文4207字节)



引用地址
:http://xltxlm.com/csdn/archives/b86.htm