单页面网页设计

Category: /blog /website
Tags: website

最近看了看Javascript, 忽然喜欢上了单布面布局的网站. 好多事其实没必要做得那么复杂. 单页面的好处是所有的信息都在一个页面上, 对搜索引擎索引信息有好处. 用户看一回后就能把内容存到cache里, 以后再看很容易. 有个缺点是第一次要下载所有的信息, 如果内容太多下载时间过长人家不会等那么久.

List

下面列几个我收集的链接, 按时间顺序列在下面. 

我把上面的每一个网站都看了一遍, 并且试了试简单的操作, 基本形成了自己的喜好, 总结如下.

我对单页面的理解

  • 文件大小一定不能太大. 如果人家等了好长时间还什么都看不到, 那可能永远也不会再来了. 根据这个原则, 我会把内容压缩在500KB以下, 包括HTML/CSS/Images, 不要Flash/Applet/Silverlight. 可以有第三方Javascirpt, 但一定是异步读取, 不能影响加载时间. 测试标准是象手机的网速下也能只花2秒就能看到全部内容. jquery and mootools are OK
  • 如果想做得花哨一点的话可以在布局上花心思, 利用CSS做不规则定位. 这是大网站不会做的东西. 我也不知道大公司为什么不这么做, 原因可能是这样不能充分利用空间. 但是小网站内容不多, 这么做反而有发挥的余地.
  • 用户来源: 一般是从广告, email的链接里点过来看网站的. 让他们搜索和凭记忆找过来几乎不可能. 那他们既然有过来看的兴趣, 就有两点好处:

    1. 他们有心理预期你的网站不会太大, 等待时间多一两秒没关系(不能再长了)
    2. 他心理可能已经有要看的东西了, 你的网站要把人家要找的内容尽快展示出来.
  • 做网页最主要的目的是联系客户, 应该把电话放到每个页面上.
  • 不要用mouse-over效果, 这影响手机界面.
  • 尽量不让人scroll down/up, 可以用fixed top or left navigation menu. 我倾向是fixed top menu, 那样比left menu省空间.

The ones I like

Simple and clean

Fancy for inspiration

Good for photographer

评论

提示

  • 如果看不到评论部分, 请暂时关掉adblock in Firefox/Chrome
  • 本网站使用Javascript实现评论功能, 此处外链对提高您的网站PR没有帮助. (潜台词: 请不要灌水, 谢谢)