网站前端设计的一些感想

最近两天完成了一个网站的前端设计。这里谈一下自己的感想和收获。由于没有专门学习过设计相关的理论知识，这里只是记录自己在进行设计时候的一些体会。

首先，做设计之前，应该首先确定网站所要展示的主要内容和面向的主要用户群体。无论是电子商务网站、视频网站、社交网站还是企业的宣传网站，都有不同的设计思想和设计理念。我所设计的网站是将从不同新闻网站抓取的新闻进行集中和展示，是基于文字内容的，面向的是企业内部的用户。

接下来，网站的色彩搭配很重要。网站的主色调不仅要考虑主要用户的喜好，而且要和企业的整体风格和logo相契合。典型的有美团的蓝色、豆瓣的前蓝色、小米的橘黄色、美丽说的粉红色和淘宝的黄色。我的网站使用浅紫色、蓝色和绿色作为主要的三种颜色。其中浅紫色主要用于顶端的导航条、网站底部的背景色和网站主体部分的边框蓝色；蓝色主要用于导航和部分标题的字体颜色；绿色主要用于网站部分标题的字体颜色，除此之外，还有一些浅绿色和象牙白用于展示内容的背景色。

网站的字体选择也很重要，一般使用12px、14px和16px的组合。12px主要包括具体的内容，14px是小标题，16px是大标题（包括一些导航条字体和一些整体的模块的标题）。

其次，需要设计网站的整体布局。这里通过讨论主页的设计布局来进行说明。主页的设计分为四部分：导航条、页面顶部（导航和图片展示等）、页面的主体部分和页面底部。导航条包括的主要信息包括：系统的名称、注册和登陆，以及用户的一些个人信息。一般使用在顶部固定的方式，并且随着页面的滚动一直显示在顶部的形式。页面顶部的导航主要包括页面模块的主要分类和名称，主要有两种方式：一种是网站的logo、搜索框和导航信息在一行，此时导航信息的显示没有背景色；另外一种形式是网站的logo、搜索框为一行，导航信息为另外一行，此时的导航信息有背景色。页面顶部的图片展示可以选择全屏幕或者与屏幕两边有间距的形式。这里的图片需要自己制作，主要是企业的宣传或者热门的信息或者公告。页面的底部主要包括一些简单的帮助信息、链接信息和网站的版权声明。最关键的是网站的主体部分。网站的主体部分应该在左右间隔150px的距离，居中的位置。一般分为左右两部分，其中左边包括需要展示的主要内容，右边是一些热门的新闻或者商品信息（用户比较关心的内容）。主体部分最好是分块来进行显示，这样显得比较有条理，而且形式比较简单。当然，如果网站是企业的宣传网站，可以按照从顶部到底部，分为几段的方法来说明公司的主要业务，它们之间可以使用不同的背景色进行分隔。

实现过程中要有好的编码风格，比如每个模块部分的备注、所有的样式信息均要写入css文件中。要选择适合网站的css库，个人比较偏好简单和扁平化的设计风格，所以选择使用bootstrap+jquery的样式和js组合。尽量使用css样式，而不要过多的使用js，否则会导致页面的加载速度比较慢，从而降低网站的并发数量。

除此之外，还需要考虑不同的浏览器的差异。所以需要在IE、火狐和Chrome等不同的浏览器上分别进行测试，从而保证用户使用不同的浏览器都可以正确的显示网站的内容，保证用户的体验。