[互联网]网站架构实用手册.doc

《[互联网]网站架构实用手册.doc》由会员分享，可在线阅读，更多相关《[互联网]网站架构实用手册.doc（33页珍藏版）》请在三一文库上搜索。

1、作者：练燕杰 gmail: msn:网站架构实用手册一、网站架构之主页设计用户体验良好的网站其主页需要具备的十二个使命2第一个任务：体现站点的标识和使命2第二个任务：网站导航和站点层次4第三个任务：搜索4第四个任务：导读4第五个任务：内容更新4第六个任务：登陆注册4第七个任务：快捷方式5第八个任务：友情链接5第九个任务：让用户看到他正在寻找的东西5第十个任务：告诉用户还有他没有寻找到的5第十一个任务：告诉用户从哪里开始5第十二个任务：建立可信度和信任感6二、频道首页的架构-把最棒的内容最大面积的呈献给用户7一）、Web2.0门户频道首页架构篇7二）、第一代门户频道首页架构篇10三）、Web2.

2、0和第一代频道架构模型优势缺点对比12三、网站架构之点击长尾，内容为王的网站其底层页面的架构12第一：何谓点击长尾？13第二：何谓内容为王?13第三：何谓底层页面？13现在我们再来看一下今天的标题：“点击长尾，内容为王的网站其底层页面的架构”14经过多三大门户单页对比发现的相同点141：在顶部采用23px高度的单行导航。152：导航下方的面包屑153：在页面的右上角提供简易搜索框154：左边为正文大标题、正文、相关新闻、评论、打印类的功能按钮。165：右边为推荐区，包括功能推荐、内容推荐、热门推荐、以及情色八卦。16以上是新闻资讯类门户网站，他们的内容单页对比，这里作个小节：16四、用户个人空

3、间及其管理后台的架构-用户的自留地17第一:用户空间前台页面架构的基本元素17第二：用户个人空间管理后台的架构19五、网站导航的设计-让用户浏览网站像在逛家乐福19网站的导航设计201、用户感觉不到网站大小的解决办法202、用户在网站中感觉不到方向怎么办？213、用户在网站上感觉不到位置的解决办法21家乐福的导航设计23在这之前，思域想和大家回顾一下超市中有那些元素被用做导航。27六、大型网站从SEO角度考虑的网站架构相关27第一、建立架构良好的网站地图28建立网站地图的重要性28如果创建一个网站地图？28创建网站地图要注意什么？29第二、根据网站的自身特点来对网站的频道或者页面地址结构进行优

4、化29网站地址的物理结构29网站链接的逻辑结构31第三、积极的更新网站的内容33一、网站架构之主页设计用户体验良好的网站其主页需要具备的十二个使命思域最近在给编辑部培训的时候发现一个问题，就是他们在设计专题或者页面的时候自我意识太强，缺少页面设计的基本思维，想怎么设计就怎么设计，有些只是看到别人的页面是这样，他也就闷头模仿，还给思域传递了一句名言：“模仿是雷管，创新是炸药”。话虽如此，可是既然要成为一名专业的编辑或者页面设计师就必须懂得页面设计有哪些准则，如何站在公司的角度考虑公司的利益，如何站在用户的角度给用户良好的体验，如何站在行业的角度延续行业长期培育起来的用户习惯。下面思域想重点说说，

5、在主页设计的时候我们应该赋予主页的十二个任务：第一个任务：体现站点的标识和使命上次看到一组数据，说当今全球网站数量已经上亿了，平均每天看1万个网站，那么一个人要花30年才能看完这些网站，可是30年中又会有无数的网站诞生，也许又要花60年才能再看完，总之这辈子思域是看不完了。说明网站竞争相当激烈，同一个类型的网站同时有上万家在竞争是不足为奇的，所以在竞争中一个网站的主页就显得格外重要。主页要不能放过任何一个可能访问或者正在访问甚至访问过的用户，大家都削尖了脑袋想办法如何处理这三个问题。那么对于任何一个访问你网站的用户你就要了解他第一次打开你网站他关心什么。经过思域长时间的调查和试验，用户第一次打

6、开一个网站大部分是这四个问题：A 这是什么网站？B 网站上有什么？C 我能在这里做什么？D 为什么我应该选择这里，而不是其他地方？下面我们以阿里巴巴为例看看他是如何表达这四个问题的。阿里巴巴在国内是电子商务类网站用户体验公认做得最好的，这个思域不想论证，就看他的网站LOGO，橙色加黑色，网站整体CI就是这个色，标识下方的“全球领先的网上贸易市场”第一个问题：阿里巴巴是做什么的？看完这个LOGO如果您还不知道，那么接着您的视线从LOGO位置水平向右移，看到导航，还不知道是做什么的？天！好吧，请托动滚动条，浏览一下网页。第二个问题：我能在这里做什么？从阿里巴巴首页右上角的导航条，很明显的告诉用户，

7、用户在这里可以“采购”和“销售”这是主打服务，其他的看用户的需求。第三个问题：网站上有些什么？如果前两个问题你在阿里巴巴上已经没有疑问了，那么这个问题阿里巴巴已经在主页上很好的回答你了。第四个问题：为什么我应该在这里？“全球领先的网上贸易市场”这句话的效果不要小看哦！好了，通过阿里巴巴的例子，已经告诉各位看官主页的第一个任务体现站点的标识和使命。主页要告诉用户我这是什么网站，我是做什么的，为什么你应该来我的网址。第二个任务：网站导航和站点层次网站要给出网站提供的服务的概貌，既要包括内容“我能在这里找到什么？”。也要包括功能“我能做什么？”。还有这些服务是如何组织的。这项工作通常由持久导航来处理

8、。其实一个网站的导航是非常重要的，他是网站的通道，通道如何设计才能让用户最方便快捷的到他想去的页面，如何设计才能把网站最好的内容体现在用户面前，导航设计有哪些讲究，避免出现哪些错误，这些问题思域后面的文章都会一一解答。第三个任务：搜索对于信息量大的网站搜索是很必要的，否则即使你其他元素处理得再好，用户在你网站上体验的感觉就像波音747的靠背椅全部换成了小板凳！第四个任务：导读就像杂志封面一样，主页要用一些“里面有精彩内容”的暗示来吸引我，“内容推荐”部分应该突出最新、最好、最热门等的内容片断，例如头条或者热销和热文等等。“功能推荐”部分邀请用户去访问网站更多的栏目或者使用一些个性化功能或邮件简

9、报等。第五个任务：内容更新如果网站的成功取决于用户是否经常来访，那么主页应该有一些经常更新的内容。即使是不需要固定访问者的网站也需要有一些活跃的迹象，哪怕只是一个到最新的新闻链接，告诉用户这里并不是一潭死水。第六个任务：登陆注册如果网站使用会员制，主页应该为新用户注册和老用户登陆提供链接或者直接登陆框，免得用户四处寻找，至于是提供链接还是直接的登陆框，需要设计师来衡量，是黏性较强还是较弱，是老用户多还是新用户多，页面位置该不该腾出一个地方出来放置登陆框，用户的习惯会是怎样的，关于登陆框的问题，思域以后说。第七个任务：快捷方式最常访问的内容片断，如软件升级等，值得在主页上放置链接，免得用户四处寻

10、找。现在很多网站的快捷方式是网站一厢情愿的，不是用户经常访问哪些内容网站就把这部分内容以快捷方式的形式体现在首页，而是网站方面最近新推出了什么业务，网站有什么新的动向，把这些内容作为快捷方式，思域认为最好是根据网站特点来考虑，看看是为用户多考虑合适还是为自己多考虑合适。第八个任务：友情链接需要在主页上预留空间，用来放置广告、交叉推广、合作品牌的友情链接等等，这里思域不多说了，有很多人问思域，一个新的网站如何与别人交换链接？如何交换到质量较好的链接？交换链接的质量好坏如何评定？一篇文章咱说不完。思域会专门来说这个问题。第九个任务：让用户看到他正在寻找的东西主页应该让用户想要的任何东西显而易见，如

11、果这些内容在站内某个角落的话。当然，不是把网站的所有东西都罗列出来，弄得一个主页十几屏，用脑子嘛！第十个任务：告诉用户还有他没有寻找到的主页应该让用户看到一些很精彩的、用户也许会感兴趣的内容，就算用户并没有寻找他们。第十一个任务：告诉用户从哪里开始用户第一次到一个网站还无从下手，感觉就像和女生睡觉，都把她衣服脱光了，她还呆若木鸡，面无表情。网站首页应该如何安排才能完成这个任务，其实方法有很多，这里不多说，思域后面会详细的说。（写道这里思域好像累计了好几篇文章啦，找个时间向各位看官慢慢解答）第十二个任务：建立可信度和信任感对于一些访问者来说，主页将是你的网站给他们留下好印象的唯一机会。好了，主页

12、的十二个任务，思域草草的罗列了一下，具体如何运用还需要大家根据自身的特点，站在网站自身的角度，站在用户的角度，站在行业的角度，十二个任务是纵向的，三个角度是横向的，各位看官用心的取舍，细细的考究吧！下面还是用阿里巴巴的页面作为例子来结束此文！二、频道首页的架构-把最棒的内容最大面积的呈献给用户前几期已经讲到了 首页内容的展示 底层页面的内容展示 今晚我们就讨论一下 频道页面如何展示内容就围绕三个问题来说第一 是内容的展示，不是功能、渠道、互动的展示 也不是关系的展示第二 如何把精彩的内容展示在用户面前第三 怎样做才能把内容最大面积的展示在用户面前很多人问思域：“为什么在内容的展示上下那么大的功

13、夫，内容似乎不能产生盈利模式。”这就是症结的所在，大家的观念里面，内容只是让人看的听的，光看看听听而已，怎么可能产生价值呢，不过是内容多、内容好，大家会多看看，而带来网站的流量而增长广告的收益而已。所以，在光靠广告已经不能带来决定性的投资收益的互联网时代，大家考虑更多的是技术和具体的应用。但是,技术和应用的成熟，如果上面没有内容，或者不是因为内容而产生，那只是实验室的技术和应用而已，所有的互动模式，也只是在和空气和一个虚幻的ID互动而已。内容不来吸引眼球，不来区分大家的喜好，不来区分人群，那么我们在互联网上到底在干什么呢？思域仍然坚持内容非常重要。内容不仅决定了网站的类型，比如是体育论坛还是技

14、术博客，并且决定了网站的独特性。独特的内容能让一个网站的价值提高，而抄袭内容会让这一价值下降。谁会想着买一个Youtube视频下载的代码站点呢？网上已经有数千个站点提供相同内容了。那么既然内容如此重要，我们如何把最精彩的内容最大面积的展示在用户面前呢？有人说显示器就那么大，页面就那么大 内容如何最大面积展示?其实显示器虽然是那么大，但是如果一个网站的逻辑清晰 他展示的内容是可以有区别的，不要忘记，数字世界和现实世界无论是空间还是时间上都是有差别的。大家是不是觉得新浪网站内容很多? 同时也感觉眼花 内容根本看不过来?我们先来看web2.0门户再来看新浪这样的第一代门户一）、Web2.0门户频道首

15、页架构篇大家打开六间房这个网站拿他做例子 看一下他的频道页面是如何展示内容的http:/ 就类似新浪的新闻频道所有节目都在这个频道里面这个频道一打开，看起来内容不多，第一屏才显示10个。其实不然，这个页面对于视频分享类型的网站处理得还不错，内容展示也很到位大家看下面这个图注意他的导航分布 频道导航，横着展示； 有最新发布 最常播放 等六个频道分类导航，竖着展示；16个分类 每屏显示20个节目6*16*20=1920个节目六间房这个页面其实展示了1920个节目，加上翻页，完全可以显示上万个内容。那么，用户是不是真的会从这上万个节目里面挑呢?不是的。作为第一次来这个网站的用户大多是扫一眼，也许不会

16、点击频道或者分类，可是作为对这个网站稍微熟悉的用户 是会对自己想看的内容分类的，这时候网站就要揣摩用户的心理。而六间房，好就好在，他把主动权交给了用户。横处显示所有频道，竖的显示所有分类，用户要看什么内容用户自己作主，很明显，两条直角边是垂直的，而且用户在网页上有位置感图里面的每个灰色的小点 就是用户所在的位置 用户不容易迷失，而且点与点之间的切换很方便那么三角形的两条边不变 你如何组装让他们的面积最大呢?上面那个图 红色边为A 蓝色边为B他们之间当然是成为直角的时候 组成的三角形面积最大了所以 这个垂直看大家如何理解了大家再来看看他的形式和六间房类似，左边也有分类，可是点左边的分类大家就会发

17、现不同了。那么对于哪些网站适合用六间房这种模式呢?对于分类清晰，内容更新量不是很大，用户以娱乐体验为主的社区类网站比较适合六间房这种方式而donews采用了这种模式，反而误导了用户“内容为直角展示模型图”有十五个灰点，要看哪个灰点的内容 这个是你的选择频道页面不是网站首页，他们的任务也不一样不知道大家是否还记得首页的十二个任务而频道页面最重要的一个任务就是最大面积的将内容展示在用户面前，而且要展现得合理，不要让用户反感如果你想看看，一周以来六间房上有哪些热门的节目你会如何操作呢？六间房安排了 最新节目|最常播放|最多评论|最多收藏|最高评分|历史推荐 这六个分类，不是瞎弄的，因为行业告诉他 用

18、户比较关注这六项而新浪 其实你是不知道他上面哪些会是热门的消息 作为新闻站 能上首页的也许就是热门关注了 也是最新的了二）、第一代门户频道首页架构篇有人说六间房和新浪不是一个类型的网站非常正确 今天要说的就是这两类不同的网站 他们内容都展示得很到位 那么他们分别都是采用什么展示方式http:/ 大家打开新浪的新闻频道今天我们说频道首页和底层页面的内容展示前几期说过了来看一下新浪的这个频道他是如何安排内容的，一样有频道导航和分类导航，顶部那个就是频道导航了下面小一些的红圈就是分类导航了排行 滚动 图片 国内 国际 社会 军事 宽频 法治 评论 健康 环保 天气 体育 娱乐 科技 财经 专题 文字

19、版 手机版 这是这个频道的分类大家看看是不是散落在页面上的?而且散落得有规律，得一直往下拉页面六间房采用了，不停的点击鼠标的方式，而新浪采用了不停的拉滚动条的方式六间房采用了内容在一个直角三角形里面展示的方式新浪呢?来看一个图新浪的每个频道是一个面这个面上有规则的散落着他的分类而面与面之间用网站导航串起来三）、Web2.0和第一代频道架构模型优势缺点对比web1.0门户频道内容展示与web.0网站频道内容展示模型对比三、网站架构之点击长尾，内容为王的网站其底层页面的架构在说这个话题之前，思域想先说明三个问题。第一：何谓点击长尾？点击长尾就是在网站点击量的长尾理论，如上图，通俗的说，就是这个蓝色

20、的尾巴部分 当他立起来的时候，其实你会发现，他比红色的还要高，或者说，蓝色尾巴的面积，会比红色部分要大。一个网站也许只有一个首页，但是却可能有百万的内容单页，而就算首页一天会被1万人访问，平均10个单页才有1一个人访问，那么单页加起来一共有10万人访问。这就是长尾理论的基本原理：只要存储和流通的渠道足够大，需求不旺或销量不佳的产品所共同占据的市场份额可以和那些少数热销产品所占据的市场份额相匹敌甚至更大。即众多小市场汇聚成可与主流大市场相匹敌的市场能量。 第二：何谓内容为王?所谓内容为王，就是指其成败关键看传播的内容是否能够抓住读者、影响读者。那么很显然，新浪、网易、人民网等这些以资讯为主的网站

21、就是典型，另外一些所谓的web2.0的网站，个人成为内容发布的中心，比如博客、播客、维客等等，如果没有内容还有什么看头？除这两类网站以外，还不得不说B2C和下载类网站，例如当当、卓越与天空下载站、华军软件园，产品与软件就是他们的内容。第三：何谓底层页面？对于百度、谷歌每个搜索结果显示页就是它的底层页面，这样的页面虽然页面框架类似，但是根据你搜索的关键字不同，也许会出现几亿个这样的页面。对于新浪这样的资讯门户，它的底层页面除了搜索结果显示页之外更重要的是它的内容单页，因为用户来到新浪是以点击链接看资讯为主，而不是搜索为主，那么新浪建站那么多年，会沉淀多少内容？也许是千万级的吧？也许对于底层页面的

22、诠释还有更科学的，不过思域今天这里说的底层页面就是搜索结果展示页和内容单页。现在我们再来看一下今天的标题：“点击长尾，内容为王的网站其底层页面的架构”今天我们要说的是新闻资讯类网站的内容单页架构。下面列举三个大家比较熟悉的资讯门户网站，新浪、网易、搜狐。思域做为了方便大家对比，做了一张图。各位看官点击大图应该不难发现，这三个网站内容单页，在去了广告之后其页面结构几乎一摸一样，是互相抄袭还是他们各自经过几年的摸索，都发现了内容单页应该设计成这样才最有利？这不是巧合，这样的架构一定有它的道理。根据上图的对比我们看看其中有哪些道理。经过多三大门户单页对比发现的相同点1：在页面顶部采用一行高度大概为2

23、3px的导航条。2：导航条下方均为面包屑3：在页面的右上角提供简易搜索框3：页面采用左右比例7：34：左边为正文大标题、正文、相关新闻、评论、打印类的功能按钮。5：右边为推荐区，包括功能推荐、内容推荐、热门推荐、以及情色八卦。可以说几大门户在内容单页上是花了很多心思，虽然看起来形式简单，可是其中的效果只有他们才真正体会。根据这5个相同点，思域与各位看官一一分解。1：在顶部采用23px高度的单行导航。虽然，这个导航看起来不起眼，因为这是内容单页，突出的应该是正文，严格来说，作为门户网站的任何一个页面都不能缺少导航，包括首页、频道首页、栏目首页、更多列表、专题页面、内容单页他们的导航形式又各有不同

24、，内容单页的导航要力求简洁，将网站的主打频道罗列出来，首页是入口，其导航首要意义就是引导用户到达每个频道，让用户找到需要的内容，内容单页面即是入口也是出口，有数据显示，89的用户是通过搜索引擎进入一个网站的，而绝大部分是通过搜索关键字进入某网站的内容单页，首页是整个网站的大门，出了这个门就离开网站了，所以导航要做得尽量丰富。而内容单页作为网站的最底层，是一定要留出口的，其顶部的单行导航是出口，面包屑也是出口。2：导航下方的面包屑在童话故事“汉泽尔和格雷特尔”中，当汉泽尔和格雷特尔穿过森林时，他们在沿途走过的地方都撒下了面包屑，让这些面包屑来帮助他们找到回家的路。虽然这只是一个孩子们的童话故事，

25、但它却蕴涵了多种含义。实际上，网站设计者亦可从中受到启发：在结构上纵深的网站应该采用这种“面包屑型”导航结构，以足迹的方式呈现用户走过的路径，或者说以层层渐进方式呈现该网页在整个网站架构中所处的位置，从而为用户提供清晰分明的网站导览。“面包屑型”架构让用户对他们所访问的此页与彼页在层次结构上的关系一目了然。这种网站结构的其中一个最明显的特性体现莫过于返回导览功能。3：在页面的右上角提供简易搜索框网站导航就是超市里面的指路牌，网站的搜索框就是超时里面的询问处。你在逛超时的时候是不是希望有疑惑的时候随手就可以抓个询问员过来？但是对于超时来说安排越多的询问员其成本就越高，可是对于网站来说，只是占用了

26、小指头那么大的地方，不浪费你多少成本，还能使你的用户访问更多你网站的内容，因为在用户的浏览模式中，任何一条新闻都是具有相关性的，他浏览了这个新闻，想了解一下这个新闻的背景就会想到“询问”一下了。4：左边为正文大标题、正文、相关新闻、评论、打印类的功能按钮。这个是根据用户最佳的浏览模式来设计的，大部分浏览者会把注意力放在页面的左边。大概是因为我们中国人从小就从左向右看一句话的原因吧。标题和正文是作为新闻内容单页所不能缺少的，可是“相关新闻”却有很多网站忽略了，作为这三大门户的“相关新闻”基本上是按照内容关键字来做相关的，系统自动生成也不难，但是效果却非常的好。之所以分众传媒现在那么成功，一个是因

27、为他抓住了广告受众群体在等待中的时间，让大众在等待中欣赏广告，另一个重要的原因就是做到了有的放矢，对不同层次的用户发布不同内容的广告，把广告受众群体与广告内容挂钩，广告深入人心。形成良好的效果。5：右边为推荐区，包括功能推荐、内容推荐、热门推荐、以及情色八卦。通过本文开头部分所说的点击长尾来看，内容当夜的总访问量也许会大大超过首页升值首页与其他页面访问量之和，而如果你的网站之采用一套内容单页模板，也就是说每个单页只有正文和相关新闻的内容不同，其他地方都是相同的。那么对于新浪网这样一个数以千万计的单页内容，每天数以亿计的浏览量，（当然，也许新浪不止一套单页模板），那么除了正文与相关新闻之外的每个

28、文字每天都会千万次的展示在浏览着面前，所以新浪的内容单页“画中画”广告报价毫不逊色于首页的广告。那么在如此重要的地方，就把你的精彩内容、主推的服务、最近热门的消息推荐给用户吧，当然，无论如何都缺少不了那些可以立刻抓住人眼球的内容，比如情色与八卦。以上是新闻资讯类门户网站，他们的内容单页对比，这里作个小节： 第一 永远突出主题内容，比如新闻的正文，其他内容不要喧宾夺主 第二 简洁大方，尽量不要搞那么多弹出、漂浮、全屏的广告了。 第三 要保持内容相关度，尽量做到内容的立体 第四 把热门的内容推荐在用户面前 第五 通过简单的导航告诉用户，你网站大概是做什么的，还有其他什么内容四、用户个人空间及其管理

29、后台的架构-用户的自留地今天这个话题不好说,主要包括两个内容.第一是用户空间前台页面的架构第二是用户空间管理后台的架构而现在用户空间种类很多,比如博客、播可、维客、个人相册、招聘网站的个人简介、征婚交友的个人魅力空间等等,这些都是个人空间,而且每种空间的架构各不相同.既然如此我们不可能泛泛的把每个都说一遍,也不好逐个细纠.那就从用户的需求出发,也罗列一下个人空间前台页面以及后台管理的一些基本元素吧!第一:用户空间前台页面架构的基本元素.要了解一个页面的基本元素,应该角色入手,页面做出来是给人看的、听的、用的.一个用户体验良好的页面,就应该是没有一点多于的内容和功能,就像一个精神抖擞的业务员,身

30、上没有一块烂肉.对于空间的前台页面有两个基本角色我们需要考虑浏览者和空间的主人浏览者有四个动作:看、听、交流、抓取空间的主人就两个目的:展示、交流那么我作为空间的主人,要展示什么我作主.文字、图片、动画、音频、视频.展示可以看到和听到的,展示主人社会关系，另外也展示主人的个性,”你看,我是世界上独一无二的.”这些也真是浏览者看和听的内容.关于交流无非就是四种：留言、评论、发邮件、即时聊天.对于浏览者的抓取,就是收藏、订阅、转载、引用、下载用户的内容,比如文字、图片、音频、视频.好了,我们整理一下:个人空间可展示的内容包括: 文字、图片、动画、音频、视频、个人简介、好友、圈子个人空间可提供的功能

31、包括: 留言、评论、发邮件、即时聊天、收藏、订阅、转载、引用、下载以上是个人空间可能展示的全部内容和功能。并不是所有空间都要具备以上这些内容和功能，思域要说的是根据自己网站和用户群体的不同，有针对性的挑选出一些组装成一个合乎用户需求的空间。个人只是整个网络的一分子，个人空间就是网络上一个属于自己的地方或者说一亩三分地。我们用Emre Sokullu的这幅图来说明一下个人在网络社会中所扮演的角色。这幅画所代表的就是个人，大众化网络文化的劳动者，这个巨大的用户创造的社会化网络中的参与者。加入上图左边那个人的轮廓就是你，下面是对图中的线圈做的描述：蓝色虚线：是你每时每刻被他人所看到的外在的那一面。

32、红色云装物：是你的思维，想法，记忆和其他你生命中的事物（不仅仅是昙花一现的那些）； 黑色内圈：是你最内在的那一面，你的恐惧，你通常会藏起来，不让外人看到的那些东西； 绿色箭头：代表着你和其他人的关系和交流。 把这几个东西加起来，就成为了你网络上既公开又私密的你。进一步说，这似乎会成为一种趋势。Emre Sokullu叫它OpenYou，它意味着网络中的人们正越变越开放。按照上图的几个圈，个人空间按照用户需求可以分为展示型、沟通型、存储型、综合型。展示为主：求职招聘网站、类似淘宝和易趣之类的网上商店等等用户在你的空间可以看到、听到与你有关联的内容，比如你的个人档案、文章、产品等等。沟通为主：电子

33、邮箱、SNS社会网络等等网站为你提供了信息传送的功能，作为这部分网站，他应该不断的完善其为用户提供的此类功能。存储为主：个人相册、网络硬盘、私秘日记等等存储为主的个人空间，也许更多的是一个私人世界，这里有你的相册、你的日记、你的资料、你需要方便携带的东西。所以安全性、保密性、空间大小是用户看重的。综合型：综合型就是综合了展示、沟通、存储，例如征婚交友网站、播客、播客、维客等等。综合型的个人空间，就是个人的虚拟世界，他能在这里生活、工作、学习、交友，BSP就是由千万个这样的虚拟世界组成的。关于个人空间前台展示的总结：任何一个网站只有两样东西内容和功能，即用户看得到、听得到、用得到的。你给用户提供

34、空间的类型不同，决定了你应该在哪方面下功夫。第二：用户个人空间管理后台的架构思域考虑了一下，这部分打算延续到人机交互设计这个主题的时候再详细说，因为后台是给用户使用的，在做架构的时候勿必要站在用户的角度，以用户为中心来设计和架构五、网站导航的设计-让用户浏览网站像在逛家乐福之前思域说到了主页的设计，如果把主页比作网站门面，那么导航就是通道，这些通道走向网站的每个角落，导航的设计是否合理对于一个网站是具有非常大意义的。 第一：决定用户在网站中穿梭浏览的体验，有的网站让用户感觉流连忘返，有的网站处处死胡同，让用户随地碰壁。第二：网站导航设计合理，可以将网站的内容和服务最大面积的展现在用户面前。第三

35、：合理的导航设计可以增加用户黏性，提高网站的浏览深度，从而提高网站Page Views per user。第四：促进用户消费，提高网站盈利。引导用户消费，将用户真正需要的产品和服务展示在他面前，甚至用户想不到的服务你也呈现。第五：提高网站广告价值，增加网站广告收益。有很多好处，这里思域不详细列举，今天思域想重点说说，如何合理的设计导航，让用户体验像在逛超市。我们先开始网站导航的设计，后面思域会带大家去逛家乐福的。网站的导航设计家乐福是个物理空间，可以用作导航的元素很多，他有上下、左右、前后，消费者在其中有空间感，可是网站怎么办呢？网站是个数字空间，在这里你似乎感觉不到这个空间的大小，感觉不到网

36、站到底有多少页面；你或许也感觉不到方向，没有东西南北；甚至你不知道自己处在网站的什么地方，感觉不到位置。那么用户的这一系列不好的体验，网站是不是就真的因为自己是数字空间而不知所措呢？不是的！这时候就应该充分发挥网站导航的作用。我们就来牛刀小试一下！1、用户感觉不到网站大小的解决办法1）网站首页体现频道导航2）网站地图参考中国网地图3）告诉用户你网站的逻辑关系例如哪个是首页、哪些是频道首页、哪些是栏目页面、哪些是信息列表、哪些是内容页。大家注意观察就会发现，很多网站的头部文件是不同的，首页、频道页、内容页的头部文件都不同，想过为什么没有？4）样式控制例如用户未点击的链接是蓝色，点击之手的是紫色，

37、这样用户会把你的信息量化，大小的感觉在他潜意识就产生了。5）搜索功能很多网站提供站内搜索，其实这个功能不仅仅帮助用户找到他想要的，还可以告诉用户网站里面他想要的内容有多少。小节：从上面看来，网站地图是导航、页面的差异是导航、样式也是导航、搜索还是导航，要告诉用户你网站有多大的方法有很多。2、用户在网站中感觉不到方向怎么办？虽然网站没有东西南北，但是网站是有上一级下一级之分的，比如首页、频道页、信息列表页、内容页。网站把这个逻辑关系用灌输大用户脑子里，使用户养成习惯，看到你页面的头部就知道自己是在网站的那个级。我们来看看上图，网易汽车频道首页，网易在头部用了3个地方告诉用户，这里是网易的汽车频道

38、。3、用户在网站上感觉不到位置的解决办法1）不要吝啬你的title2)给用户亮起一盏灯上图是艾瑞咨询内容页面的截图，他巧妙的利用了导航，用户在阅读的内容属于哪个频道，那么导航就会在这个频道上亮起一盏灯。3）为用户提供层级菜单4）网站也有“堆头”哦都说百字不如一图，上面说到了超市的堆头，他为什么要摆放在过道中，难道真是因为这样消费者容易拿取么？为什么堆头大部分是促销产品？思域觉得堆头更多的是让别人容易发现，发现这个促销产品，发现堆头周围的这一产品“频道”上图是网易汽车频道的第一屏截图，网易巧妙的排布使得用户不看文字就知道这个页面大概是哪方面的内容。那么，如果用户在你网站上不存在“感觉不到大小、感

39、觉不到方向、感觉不到位置”这些问题的时候，逛网站就像逛超市这是不是就有可能了？是的，这只是个可能，只是基础而已，更精彩的还在后面！好了，说完网站导航的设计，思域下面带大家去看看家乐福是如何做导航的！家乐福的导航设计昨天思域去家乐福买菜(好久没有弄些好吃的犒劳自己啦思域好像是个购物狂，但不是购物频率很高那种，而是不鸣则矣，一鸣惊人那种。看到上面这图，应该没有哪位看官会问这是哪里？这里有什么？能在这里做什么？我为什么应该来这里？（这四个问题是主页设计一文中用户最常问的问题）之类的问题吧！那各位看官就随思域开始这次家乐福吧！左出右进，不要错位了哦！上图是超市入口处的导航墙，思域为了说明行进路线添加了

40、红色线条和蓝色圆点，箭头表明方向，蓝色圆点代表思域产生购买的位置。一眼看去这个导航图似乎并没有什么特点，但是思域根据这次的购物体验，我的重点是去买菜的，可是似乎菜没有买多少，其他东西买了一堆，也许这就是典型的感性购物或者冲动型购物，所以再细细回想自己购物的经历和分析这种导航上他们的产品布局，有几个地方思域想说说。（为下一篇网站导航设计做铺垫）从外到内，环环相扣。超市的外围基本上是农作物，比如水果、蔬菜、鱼、肉等等，这些是我这次来的重点，因为要作些好吃的犒劳自己。接着通过奶制品和饮料区，来到超市的内部，这里大多是生活用品，比如洗发水、沐浴露、牙膏、洗衣粉，还有厨房用品和零食便当等等。思域要问了，

41、为什么把农产品放外围？而外围是进入超市中心的通道。思域猜想，也许农产品的消费群体比较特殊，农产品只是超市的周边产品，或者部分所需，但是农产品保存时间有限，比如蔬菜、水果、肉类如果不即时销售很容易变质。对于用户、对于超市看来把农产品放外围还是有道理的。而超市中部安排日用品、零食、厨房用品等等因为这里是通过收银台的必经之地，而这些东西是大众所需，消费者在这停留的时间也最长。其实思域在选购了几袋牛奶之后就直奔收银台的，可是天晓得，因为人多，我在排队的时候顺便向四周看了看，还有什么我需要的东西，该死的于是我就被超市设计进去了，最后我买单打印出来的小票一米长。大家到超市可以注意一下，收银台附件都摆放什么

42、产品，思域发现很多超市在收银台附件摆放的产品都是类似的，一定有他们的道理。超市不会放过任何一个客户，任何一个购买机会，即使你在排队那些产品都会像站街女一样的向你招手，对于超市，这是成功的。那么对于网站我们怎么来做呢？稍候会说。下面先来看看这些“站街女”是如何向我招手的吧！奥！天哪，直到现在思域都还想把这些“站街女”全部拉回家，实战是太诱人了！什么网站要是能给我这种感觉，我立即加入收藏夹，设为首页。思域承认，思域是自愿的，自愿的被这些“站街女”强奸，被奸之后思域还大呼好爽，无论买单的时候我是多么心疼，但是至少这次购物体验是非常好的，我被超市精心设计的购物路线套住了。其实超市不仅仅设计了线路，还做

43、了很好的引导。当然，超市的很多地方不会用这样的导航，因为文字导航实在是太没有技术含量了，超市喜欢用实物或者颜色做导航。这个是网站值得借鉴的。比如超市用堆头做导航，因为堆头一般是放在过道中间，用户很远就可以看到，这样消费者就会知道哪些东西大概在这堆头附近，有客官问什么是堆头？堆头是超市里面的专业束语，请看下图。至于颜色，思域就不多说了，看看上面那些向思域招手的“站街女”，看她们的身着的颜色差异就知道。上面说了思域在超市的购物体验，现在回到主题，网站导航如何合理的设计，让用户在网站上浏览也像在这超市里面那样酣畅？在这之前，思域想和大家回顾一下超市中有那些元素被用做导航。1、超市门前的牌坊告诉人们这

44、是哪里2、超市入口周围的布置以及进出标示告诉人们从哪里进出3、超市入口处的超市产品布局图告诉人们产品在超市中的位置4、琳琅满目的产品告诉人们这里有什么。5、过道拐角处的导航灯箱6、产品区的堆头7、产品区的颜色区别8、产品分类指示牌9、气味、温度、声音，当你闻到香水味也许洗发水就离你不远，感觉空气冰凉可能冷冻食品就在附近，你会闻到鱼腥味，你会听到剁肉的声音，你会听到儿童玩具的音乐六、大型网站从SEO角度考虑的网站架构相关作为大型网站的UE从业人员，关注和讨论比较多的是人机交互，是用户的体验，这个用户的概念是人。而其实网站还有另一个访问者是我们需要关注的，那就是搜索引擎的蜘蛛。别以为这不是UE的一

45、部分，蜘蛛既然也是用户，就是我们的服务对象。而且蜘蛛对你的网站体验的好坏大家应该知道结果。那么我们在做网站架构的时候，应该考虑哪些因素，来提高蜘蛛的体验呢？思域觉得大家有必要考虑以下三个因素第一、 建立架构良好的网站地图第二、 根据网站的自身特点来对网站的频道或者页面地址进行优化第三、 积极的更新网站的内容下面思域对这三点做逐一说明：第一、建立架构良好的网站地图用SEOer的话说：“网站地图首先是一个网页，这个网页主要是描述它所在网站的架构布局，访问者可以通过它陈列的网站内部分类链接快速找到自己所需要的信息。”还不了解什么是网站地图的朋友可以去百度一下。建立网站地图的重要性网站地图对大型网站很

46、有必要，因为搜索引擎蜘蛛顺着网站链接爬行的深度一般最大不会超过三级，而大型的网站链接深度一般会在三级以上，例如新浪：首页新闻中心国内新闻新闻的时间档正文。因为大型网站信息量比较大，无论出发点是针对搜索引擎还是网站访问用户，作个网站地图是很理智的。基于网站地图的特殊性质，一旦搜索引擎收录了一个网站的网站地图，那么搜索引擎蜘蛛程序就可以通过这个网页更好地来了解整个网站的架构布局，它可以顺着网站地图提供的内部链接来搜寻其他网页。一个网站如果被搜索引擎收录的页面数越多，那么访问者通过搜索引擎查找到该网站的范围就越大，这是很有助于增加网站的流量的。简单的说，对于“人”这个用户来说，index页就是网站的首页，而对于“蜘蛛”这个用户来说，网站地图sitemap页就是它的首页。如果创建一个网站地图？思域推荐大家一个快速的方法。快速创建网站地图下面先讲讲创建网