1、作者：练燕杰 gmail: msn:用于 UCDchina 小组讨论 1网站架构实用手册一、网站架构之主页设计用户体验良好的网站其主页需要具备的十二个使命 .2第一个任务：体现站点的标识和使命 .2第二个任务：网站导航和站点层次 .4第三个任务：搜索 .4第四个任务：导读 .4第五个任务：内容更新 .4第六个任务：登陆注册 .4第七个任务：快捷方式 .5第八个任务：友情链接 .5第九个任务：让用户看到他正在寻找的东西 .5第十个任务：告诉用户还有他没有寻找到的 .5第十一个任务：告诉用户从哪里开始 .5第十二个任务：建立可信度和信任感 .6二、频道首页的架构-把最棒的内容最大面积的呈献给用户
2、.7一）、Web2.0 门户频道首页架构篇 .7二）、第一代门户频道首页架构篇 .10三）、Web2.0 和第一代频道架构模型优势缺点对比 .12三、网站架构之点击长尾，内容为王的网站其底层页面的架构 .12第一：何谓点击长尾？ .13第二：何谓内容为王? .13第三：何谓底层页面？ .13现在我们再来看一下今天的标题：“点击长尾，内容为王的网站其底层页面的架构” .14经过多三大门户单页对比发现的相同点 .141：在顶部采用 23px 高度的单行导航。 .152：导航下方的面包屑 .153：在页面的右上角提供简易搜索框 .154：左边为正文大标题、正文、相关新闻、评论、打印类的功能按钮。 .
3、165：右边为推荐区，包括功能推荐、内容推荐、热门推荐、以及情色八卦。 .16以上是新闻资讯类门户网站，他们的内容单页对比，这里作个小节： .16四、用户个人空间及其管理后台的架构-用户的自留地 .17第一:用户空间前台页面架构的基本元素 .17第二：用户个人空间管理后台的架构 .19五、网站导航的设计-让用户浏览网站像在逛家乐福 .19网站的导航设计 .201、 用户感觉不到网站大小的解决办法 .202、 用户在网站中感觉不到方向怎么办？ .213、 用户在网站上感觉不到位置的解决办法 .21家乐福的导航设计 .23在这之前，思域想和大家回顾一下超市中有那些元素被用做导航。 .27作者：练燕
4、杰 gmail: msn:用于 UCDchina 小组讨论 2六、大型网站从 SEO 角度考虑的网站架构相关 .27第一、建立架构良好的网站地图 .28建立网站地图的重要性 .28如果创建一个网站地图？ .28创建网站地图要注意什么？ .29第二、根据网站的自身特点来对网站的频道或者页面地址结构进行优化 .29网站地址的物理结构 .29网站链接的逻辑结构 .31第三、积极的更新网站的内容 .33一、网站架构之主页设计用户体验良好的网站其主页需要具备的十二个使命思域最近在给编辑部培训的时候发现一个问题，就是他们在设计专题或者页面的时候自我意识太强，缺少页面设计的基本思维，想怎么设计就怎么设计，有
5、些只是看到别人的页面是这样，他也就闷头模仿，还给思域传递了一句名言：“模仿是雷管，创新是炸药”。话虽如此，可是既然要成为一名专业的编辑或者页面设计师就必须懂得页面设计有哪些准则，如何站在公司的角度考虑公司的利益，如何站在用户的角度给用户良好的体验，如何站在行业的角度延续行业长期培育起来的用户习惯。下面思域想重点说说，在主页设计的时候我们应该赋予主页的十二个任务：第一个任务：体现站点的标识和使命上次看到一组数据，说当今全球网站数量已经上亿了，平均每天看 1 万个网站，那么一个人要花 30 年才能看完这些网站，可是 30 年中又会有无数的网站诞生，也许又要花 60年才能再看完，总之这辈子思域是看不
6、完了。说明网站竞争相当激烈，同一个类型的网站同时有上万家在竞争是不足为奇的，所以在竞争中一个网站的主页就显得格外重要。主页要不能放过任何一个可能访问或者正在访问甚至访问过的用户，大家都削尖了脑袋想办法如何处理这三个问题。那么对于任何一个访问你网站的用户你就要了解他第一次打开你网站他关心什么。经过思域长时间的调查和试验，用户第一次打开一个网站大部分是这四个问题：A 这是什么网站？B 网站上有什么？作者：练燕杰 gmail: msn:用于 UCDchina 小组讨论 3C 我能在这里做什么？D 为什么我应该选择这里，而不是其他地方？下面我们以阿里巴巴为例看看他是如何表达这四个问题的。阿里巴巴在国内
7、是电子商务类网站用户体验公认做得最好的，这个思域不想论证，就看他的网站 LOGO，橙色加黑色，网站整体 CI 就是这个色，标识下方的“全球领先的网上贸易市场”第一个问题：阿里巴巴是做什么的？看完这个 LOGO 如果您还不知道，那么接着您的视线从 LOGO 位置水平向右移，看到导航，还不知道是做什么的？天！好吧，请托动滚动条，浏览一下网页。第二个问题：我能在这里做什么？从阿里巴巴首页右上角的导航条，很明显的告诉用户，用户在这里可以“采购”和“销售”这是主打服务，其他的看用户的需求。第三个问题：网站上有些什么？如果前两个问题你在阿里巴巴上已经没有疑问了，那么这个问题阿里巴巴已经在主页上很好的回答你
8、了。第四个问题：为什么我应该在这里？“全球领先的网上贸易市场”这句话的效果不要小看哦！好了，通过阿里巴巴的例子，已经告诉各位看官主页的第一个任务体现站点的标识和使命。主页要告诉用户我这是什么网站，我是做什么的，为什么你应该来我的网址。作者：练燕杰 gmail: msn:用于 UCDchina 小组讨论 4第二个任务：网站导航和站点层次网站要给出网站提供的服务的概貌，既要包括内容“我能在这里找到什么？”。也要包括功能“我能做什么？”。还有这些服务是如何组织的。这项工作通常由持久导航来处理。其实一个网站的导航是非常重要的，他是网站的通道，通道如何设计才能让用户最方便快捷的到他想去的页面，如何设计才
9、能把网站最好的内容体现在用户面前，导航设计有哪些讲究，避免出现哪些错误，这些问题思域后面的文章都会一一解答。第三个任务：搜索对于信息量大的网站搜索是很必要的，否则即使你其他元素处理得再好，用户在你网站上体验的感觉就像波音 747 的靠背椅全部换成了小板凳！第四个任务：导读就像杂志封面一样，主页要用一些“里面有精彩内容”的暗示来吸引我，“内容推荐”部分应该突出最新、最好、最热门等的内容片断，例如头条或者热销和热文等等。“功能推荐”部分邀请用户去访问网站更多的栏目或者使用一些个性化功能或邮件简报等。第五个任务：内容更新如果网站的成功取决于用户是否经常来访，那么主页应该有一些经常更新的内容。即使是不
10、需要固定访问者的网站也需要有一些活跃的迹象，哪怕只是一个到最新的新闻链接，告诉用户这里并不是一潭死水。第六个任务：登陆注册如果网站使用会员制，主页应该为新用户注册和老用户登陆提供链接或者直接登陆框，免得用户四处寻找，至于是提供链接还是直接的登陆框，需要设计师来衡量，是黏性较强还是较弱，是老用户多还是新用户多，页面位置该不该腾出一个地方出来放置登陆框，用户的习惯会是怎样的，关于登陆框的问题，思域以后说。作者：练燕杰 gmail: msn:用于 UCDchina 小组讨论 5第七个任务：快捷方式最常访问的内容片断，如软件升级等，值得在主页上放置链接，免得用户四处寻找。现在很多网站的快捷方式是网站一
11、厢情愿的，不是用户经常访问哪些内容网站就把这部分内容以快捷方式的形式体现在首页，而是网站方面最近新推出了什么业务，网站有什么新的动向，把这些内容作为快捷方式，思域认为最好是根据网站特点来考虑，看看是为用户多考虑合适还是为自己多考虑合适。第八个任务：友情链接需要在主页上预留空间，用来放置广告、交叉推广、合作品牌的友情链接等等，这里思域不多说了，有很多人问思域，一个新的网站如何与别人交换链接？如何交换到质量较好的链接？交换链接的质量好坏如何评定？一篇文章咱说不完。思域会专门来说这个问题。第九个任务：让用户看到他正在寻找的东西主页应该让用户想要的任何东西显而易见，如果这些内容在站内某个角落的话。当然
12、，不是把网站的所有东西都罗列出来，弄得一个主页十几屏，用脑子嘛！第十个任务：告诉用户还有他没有寻找到的主页应该让用户看到一些很精彩的、用户也许会感兴趣的内容，就算用户并没有寻找他们。第十一个任务：告诉用户从哪里开始用户第一次到一个网站还无从下手，感觉就像和女生睡觉，都把她衣服脱光了，她还呆若木鸡，面无表情。网站首页应该如何安排才能完成这个任务，其实方法有很多，这里不多说，思域后面会详细的说。（写道这里思域好像累计了好几篇文章啦，找个时间向各位看官慢慢解答）作者：练燕杰 gmail: msn:用于 UCDchina 小组讨论 6第十二个任务：建立可信度和信任感对于一些访问者来说，主页将是你的网站
13、给他们留下好印象的唯一机会。好了，主页的十二个任务，思域草草的罗列了一下，具体如何运用还需要大家根据自身的特点，站在网站自身的角度，站在用户的角度，站在行业的角度，十二个任务是纵向的，三个角度是横向的，各位看官用心的取舍，细细的考究吧！下面还是用阿里巴巴的页面作为例子来结束此文！作者：练燕杰 gmail: msn:用于 UCDchina 小组讨论 7二、频道首页的架构-把最棒的内容最大面积的呈献给用户前几期已经讲到了 首页内容的展示 底层页面的内容展示 今晚我们就讨论一下 频道页面如何展示内容就围绕三个问题来说第一 是内容的展示，不是功能、渠道、互动的展示 也不是关系的展示第二 如何把精彩的内
14、容展示在用户面前第三 怎样做才能把内容最大面积的展示在用户面前很多人问思域：“为什么在内容的展示上下那么大的功夫，内容似乎不能产生盈利模式。”这就是症结的所在，大家的观念里面，内容只是让人看的听的，光看看听听而已，怎么可能产生价值呢，不过是内容多、内容好，大家会多看看，而带来网站的流量而增长广告的收益而已。所以，在光靠广告已经不能带来决定性的投资收益的互联网时代，大家考虑更多的是技术和具体的应用。但是,技术和应用的成熟，如果上面没有内容，或者不是因为内容而产生，那只是实验室的技术和应用而已，所有的互动模式，也只是在和空气和一个虚幻的 ID 互动而已。内容不来吸引眼球，不来区分大家的喜好，不来区
15、分人群，那么我们在互联网上到底在干什么呢？思域仍然坚持内容非常重要。内容不仅决定了网站的类型，比如是体育论坛还是技术博客，并且决定了网站的独特性。独特的内容能让一个网站的价值提高，而抄袭内容会让这一价值下降。谁会想着买一个 Youtube 视频下载的代码站点呢？网上已经有数千个站点提供相同内容了。那么既然内容如此重要，我们如何把最精彩的内容最大面积的展示在用户面前呢？有人说显示器就那么大，页面就那么大 内容如何最大面积展示?其实显示器虽然是那么大，但是如果一个网站的逻辑清晰 他展示的内容是可以有区别的，不要忘记，数字世界和现实世界无论是空间还是时间上都是有差别的。大家是不是觉得新浪网站内容很多
16、? 同时也感觉眼花 内容根本看不过来?我们先来看 web2.0 门户再来看新浪这样的第一代门户一）、Web2.0 门户频道首页架构篇大家打开六间房这个网站作者：练燕杰 gmail: msn:用于 UCDchina 小组讨论 8拿他做例子 看一下他的频道页面是如何展示内容的http:/ 他的“节目“频道 就类似新浪的新闻频道所有节目都在这个频道里面这个频道一打开，看起来内容不多，第一屏才显示 10 个。其实不然，这个页面对于视频分享类型的网站处理得还不错，内容展示也很到位大家看下面这个图注意他的导航分布 频道导航，横着展示； 有最新发布 最常播放 等六个频道分类导航，竖着展示；16 个分类 每屏
17、显示 20 个节目6*16*20=1920 个节目六间房这个页面其实展示了 1920 个节目，加上翻页，完全可以显示上万个内容。那么，用户是不是真的会从这上万个节目里面挑呢?不是的。作为第一次来这个网站的用户大多是扫一眼，也许不会点击频道或者分类，可是作为对这个网站稍微熟悉的用户 是会对自己想看的内容分类的，这时候网站就要揣摩用户的心理。而六间房，好就好在，他把主动权交给了用户。横处显示所有频道，竖的显示所有分类，用户要看什么内容用户自己作主，很明显，两条直角边是垂直的，而且用户在网页上有位置感图里面的每个灰色的小点 就是用户所在的位置 用户不容易迷失，而且点与点之间的切换很方便那么三角形的两
18、条边不变 你如何组装让他们的面积最大呢?作者：练燕杰 gmail: msn:用于 UCDchina 小组讨论 9上面那个图 红色边为 A 蓝色边为 B他们之间当然是成为直角的时候 组成的三角形面积最大了所以 这个垂直看大家如何理解了大家再来看看 他的形式和六间房类似，左边也有分类，可是点左边的分类大家就会发现不同了。那么对于哪些网站适合用六间房这种模式呢?对于分类清晰，内容更新量不是很大，用户以娱乐体验为主的社区类网站比较适合六间房这种方式而 donews 采用了这种模式，反而误导了用户“内容为直角展示模型图”有十五个灰点，要看哪个灰点的内容 这个是你的选择频道页面不是网站首页，他们的任务也不
19、一样不知道大家是否还记得首页的十二个任务而频道页面最重要的一个任务就是最大面积的将内容展示在用户面前，而且要展现得合理，不要让用户反感如果你想看看，一周以来六间房上有哪些热门的节目你会如何操作呢？六间房安排了 最新节目 | 最常播放 | 最多评论 | 最多收藏 | 最高评分 | 历史推荐 这六个分类，不是瞎弄的，因为行业告诉他 用户比较关注这六项而新浪 其实你是不知道他上面哪些会是热门的消息 作为新闻站 能上首页的也许就是热门关注了 也是最新的了作者：练燕杰 gmail: msn:用于 UCDchina 小组讨论 10二）、第一代门户频道首页架构篇有人说六间房和新浪不是一个类型的网站非常正确 今天要说的就是这两类不同的网站 他们内容都展示得很到位 那么他们分别都是采用什么展示方式http:/ 大家打开新浪的新闻频道今天我们说频道首页和底层页面的内容展示前几期说过了来看一下新浪的这个频道他是如何安排内容的，一样有频道导航和分类导航，顶部那个就是频道导航了
