网站设计那些事儿

互联网的发展，由web1.0的门户网站时代过渡到了web2.0的搜索时代，再过渡到如今的移动互联网时代。技术的迭代更新让人们认识世界的方式发生了极大的改变，但网站则在这数十年的发展变化中，一直发挥着它独特的作用。不同的产品形态（web/wap、APP、PC客户端等）遵从着不同的套路，那么 网站设计有什么套路呢？

1年前，曾在摸爬滚打中完成了某官网的改版。在这个过程中，认识到了自己的边界和不足。结合1年前设计网站时踩过的那些坑，我们来聊一聊网站设计那些事，希望我们都能从过往中学习，让未来走得更远。

1、如果让你做一个网站，你会怎么做？

如果有人问你，我要做一个网站，你来帮我规划，你会怎么做？ 在开始画原型、画脑图之前，需要弄清楚哪些事？

我认为要搞明白的事情主要是这几点：（1）网站的定位；（2）网站的信息架构；（3）导航设计。

网站的定位，指的是网站的目标用户是谁，主要承载的是什么功能，体现什么价值? 这个问题看起很简单，只是一句话的事，但是却决定了产品在交互、视觉、层级结构等方面如何设计。

举例来说，如果网站的目标用户是年轻用户，那么视觉和交互需要大胆、个性化、酷炫，而如果网站的目标用户是中老年用户，则考虑到这些用户对互联网的使用能力相对较低，则需要将交互和视觉设计得更简单，以便于用户操作。

如果网站的定位是展示公司的企业形象，那么比较偏重内容和美观；如果网站的定位是展示商品进行交易，比如常见的电商网站，那就比较侧重功能和性能，响应是否快、是否能够承受较高的并发量等。

网站的信息架构，指的是网站的层级结构。通常网站的路径相对比较固定，比如对于内容类网站的路径是：首页—>列表页—>详情页；电商类网站的路径是：首页—>列表页—>商品详情页—>提交订单页——>支付页面—>支付完成页。相对固定的路径带来的好处是：1）信息的过滤需由多到少，符合用户寻找信息的套路；2）相对固定的路径，便于养成用户的认知习惯，降低用户的体验成本；3）相对固定的路径，便于设计和技术实现的统一，提高复用性。比如内容类网站的路径是：首页—>列表页—>详情页，那么在进行UI设计的时候，就可以设计三类模版——首页、列表页、详情页。技术在实现的时候，也可以复用一些组建或方法。

网站的信息架构不宜过长，对于用户来讲，在到达目标页面的每一个环节，都有可能流失。因此，为了抓住用户的注意力，我们需要尽可能的缩短用户的体验路径（也即网站的信息架构）。

网站的导航，是网站设计中最重要的元素 。导航可以分为两类：tab类导航和面包屑导航。导航最重要的作用是，告诉用户当前处于什么位置。PM作为设计者，通常能够明白自己的产品的层级关系，但是用户却不一定能够搞懂。当用户浏览到某一个页面发现没有自己想要的内容时，用户需要知道如何回到最初。

1年前在做网站改版的时候，我犯了一个明显的错误。网站层级为：首页—>列表页—>详情页。点击首页的不同按钮可进入到多个列表页，但是列表页上并没有导航，导致到了列表页的用户，一旦发现列表页不是自己想要的内容想要回到首页，不知道如何操作。

2、如果在做网站的时候，提前规划好SEO的需求，TDK的作用是什么？

关于搜索引擎SEO

TDK是SEO优化的一种常用方法。

T 代表页头中的title元素，D 代表页头中的description元素，K代表页头中的keywords元素

其中”T”代表页头中的title元素，这里可能还要利用到分词技术，当标题(Title)写好后，我们就尽可能不要再去修改了，尽量简洁，没意义的词尽量不要加入到标题中，避免干扰到搜索引擎识别网站主题（标题在三十个以内）。

其中”D”代表页头中的description元素，要知道描述是对网页的一个概述，也是对title的补充，因为title中只能书写有限的字数，所以在description中就要稍微详细的补充起来，一般用一句两句话概括文章的内容，内容要精简,但是次数不要超过4 次，3次最佳，一定要自然。

其中”K”代表页头中的keywords元素，提取页面中的主要关键词，数量控制在三到六个内。想方设法让主关键字都出现。

标题、描述、关键词在 seo界也被称为三个标签。

当我们使用搜索功能时，搜索引擎蜘蛛会抓去网页上的关键词等信息，这会作为权重的一部分。好的TDK，可以提升网站在搜索引擎的权重。

SEO的优化是一个长期的工作，也是比较专业的一个工作，通常有专业的SEO人员做此部分工作。TDK的配置，可以参考一些站长工具中提供的热词。

3、网站常见媒体资源

网站上常见的媒体资源有：文本、图片、音频、视频。文本、图片、音频的设计和处理相对简单，此部分主要讲述视频资源的基本知识，以及网站设计中需要考虑的内容。

网站的基本知识：

视频清晰度：常见的视频清晰度有：720p,1080p。

720p就是影片的屏幕尺寸为帧宽度1280、帧高度720，即1280×720的意思，是数字电影成像技术和计算机技术的融合。

1080p就是对于16:9的而言指的是帧宽度1920、帧高度1080，即1920×1080的意思，对于4:3的而言指的是帧宽度1440、帧高度1080，即1440×1080。

高清视频的清晰度取决于其码率的大小，对于同一部影片来说码率越大清晰度越好，文件也相应地更大。但前提是转码时不是人为地把码率进行调高，这样做是毫无意义的。

码流：码流（Data Rate）是指视频文件在单位时间内使用的数据流量，也叫码率，是视频编码中画面质量控制中最重要的部分。同样分辨率下，视频文件的码流越大，压缩比就越小，画面质量就越好。

网站中使用视频资源主要注意视频清晰度和响应时长是否平衡；

视频清晰度取决于分辨率和码流。从 用户体验的角度来讲， 视频越清晰越好，但是高清晰度的视频会导致网站的加载速度变慢，反而给用户较差的体验。因此需要在保证清晰度的同时，提高资源加载速度，这时候就需要对视频进行压缩。

4、网站常见性能指标

（1）.响应时间：对请求作出响应所需要的时间（我们可以简单理解为，用户点击了网站上的某个按钮，多长时间有反应）响应时间一般需要遵从 2-5-8原则：（据统计当网站慢一秒就会流失十分之一的客户）

当用户再2-5秒之间得到响应时，会感觉系统的响应速度还可以；

当用户再5-8秒内得到响应时，感觉蛮，但是还可以接受；

当用户大于8秒内得到响应时，感觉无法接受；

（2）吞吐量（Throughput）

指的是在单位时间内客户端和服务器成功传送数据的数量；

（3）客户端的同一批用户同时执行一个操作的数量。

（4）兼容性：网站能够在哪些浏览器版本正常显示。通常根据网站用户使用的浏览器及浏览器版本决定。

5、不要只关注于眼下，要考虑未来

当需求方说，我要在网站首页加一个按钮，你会怎么做？不加思索的找个空白的位置？还是选择一个扩展性更好的位置？

加一个按钮的事，只要在网站上挤一挤，总还是能找到那么一点位置的。但是，如果之后还要加一个按钮，两个按钮该怎么办？

一个好的产品方案，一定是具有良好的扩展性的。在最开始做设计的时候，就应当考虑到未来可能发生的情况。眼前的偷懒，将会成为未来的大坑，方法总比问题多，想一想总还是有更好的解决方案的。