网站设计那些事儿

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

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

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

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

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

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

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

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

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

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

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

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

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