我的建站心得Part2——美化网站

Website

随着公司的发展,公司官网的改版重制工作逐渐提上了日程。领导在一个月内提了两次网站改版,给小伙伴们提了许多网站内容和外观的建议。

但是,想要制作一个让所有人过目不忘、流连忘返的公司网站,仅仅关注内容和外观就够了吗?

为此,结合我两年“从零开始”的建站血泪史,来和大家聊聊关于网站建设的那些事。

 

文章目录

★Part1——搭建

★Part2——美化

★Part3——内容

★Part4——推广

★Part5——运营

 


 

如何美化网站?

 

网站搭建结束,看着新诞生的网站,心中有没有初为人父的小激动呢?

接下来,就让我们开始打扮网站,变身高富帅,迎娶白富美。

 

一、合理的配色

在创建网站选择色调时,大多数人想到的是美观。其实,颜色所起到的作用远超出人们的想象。

网站主要分为三种颜色:背景色、文本色和高亮色

对于背景色,全白色(#FFFFFFF)是可以搭配任何文本的最安全的颜色。如果想选用其他的背景颜色,建议采用#FFFFFF到#CCCCCC之间的颜色。

一般来说,文字最好避免使用墨黑色,深灰色一般更容易阅读。比较舒服的文字颜色范围:#333333到#666666。

如果你选择好几种不同的色调来,那么你的配色方案绝大多数是有问题的。颜色用得越多,页面就越来越难以控制。

所以,在网页以灰色基调的前提下,最好只选择一种鲜艳的颜色来作为你想要突出的事物,比如标题、菜单、按钮等等。

高亮颜色可以是蓝色、红色、绿色,等等。

一旦选择了高亮的颜色,从该点移动滑块来选择接下来的颜色。

在设计中也需要其他的颜色,高亮色的稍微变化会让你的颜色选择变得简单。

 

关于颜色与购买习惯的心理学书籍比比皆是,在选择配色前可以对颜色一些基本规律进行了解,如各种颜色代表着什么,分别将吸引哪些人群等等。

关于配色的选择,可以参考以下博文:

扁平化设计的流行配色方案

总之,对于任何类型的网站,颜色使用过多容易造成视觉混乱,使用单一颜色往往会产生强烈的视觉冲击。

除此之外,12个人中就有1人是色盲,其中更有许多对颜色并不敏感的人(从穿着便能看出)

因此,像照片和插图一样,颜色应当用来支撑信息的表达,而不该成为信息本身。

可以尝试着把颜色去掉,看看是否还能表达相同的信息。

 

二、简洁的界面

我们在日常上网中不难发现,越是注重设计的公司,其官方网站越是简洁美观,让人一目了然、心旷神怡。

iwatch

(苹果设计师善于用产品本身打动消费者,无需过多的文字粉饰)

反之如果用户需要花好几秒的时间才知道你的网页的主要内容是什么的话,

可能你的网页设计就过于复杂,那么这对用户以及客户来说,都是个麻烦。

复杂的网页降低了网页的可读性以及可用性,也增加判断难度,用户体验随之降低。

haitai

(海泰钢管官网,居然还有弹窗消息= =!)

切记切记,在主要内容页面中千万不要放置过多的动态Flash,

会极大降低浏览者对于内容主题的关注度,产生烦躁的心理,可能在深入阅读前就早早关闭了网页。

并且Flash对于搜索引擎的爬虫也不是十分友好,所以请不要把主题内容以Flash的方式呈现。

 

三、清晰的菜单

网站导航菜单的重要性是绝对不容忽视的。

由于用户很难在没有导航的情况下去浏览一个网站里的内容,导航菜单不但能帮助用户摸清网站的结构,并且能帮助用户在网站中定位,以免迷失了方向。

这也是为什么网站设计师们都会花额外的时间来想办法让自己网站的菜单不仅仅只是美观而已,而且还要方便实用。

Microsoft

(微软官网的导航配有产品图片,清晰明了)

同样的,搜索引擎不会识别图片和FLASH,所以导航应采用容易被搜索引擎识别和抓取的文本链接。

 

四、科学的布局

关于网站的内容布局设计,其实不应该放在最后的,因为它是一个网站的骨架。

对页面的内容布局进行设计前,需先对网站的用户群体进行需求分析,把用户关注最多的内容放置在首页的最重要位置。

一般按照用户的浏览方式,页面内容布局按照内容重要程度由左上到右下进行布置。

也就是说最重要的内容要放置在首页左上位置,而广告或最不重要的内容可放置在页面的右下位置。

因此在Google和百度等互联网巨头的网站中,我们可以发现搜索框永远放在首页的正中间,周围是大幅的空白;

而在搜索结果页中,结果链接全部在屏幕左侧排布,右侧只有少部分的文字广告。这样的布局看似单一,却非常有效地强调了网站的功能性。

 

再来看两个例子:伦敦政府官网上海政府官网

上海的政府官网链接琳琅满目,让人很难快速找到需要的功能。

反观伦敦的政府网站则是小而全的风格,将不同的链接分类整理进下拉菜单中,简洁明了。重点的内容用大幅图片突出显示,让访客一眼就能了解到最新资讯。

其实网站想要设计令人满意的布局并不困难,大幅的动画(Flash)虽然漂亮美观,但会极大影响网站打开速度,冗长的Flash代码对搜索引擎也非常不友好。

而静态元素(图片和文字)能够让人感觉整洁、温和、沉稳,通过布局的设计,将重要的元素放在用户比较容易注意的地方。

对于一些不太重要,却又想让浏览者看到的元素,可以稍微的让它们“动”一下,或者在色彩上和其他部分做一个层次上的差异,让浏览者目光扫到这里的时候,可以引起他们的点击。

 


 

 

其他元素:

 

1.使用大背景图片

大图的使用也是一种趋势。这些图像可以极大程度上增加网页的吸引力。特别是如果你有一副精美绝伦的摄影作品,能够与网站的主题相搭配,那么不要犹豫,就把它完整地展现出来吧!

 

2.使用HTML5和CSS3

网页设计师获得更多更方便的导航是HTML5和CSS3的优势,它有助于更快地加载网站。这也使得网站更容易与社会化媒体工具编译并链接。当然,以使其更加有效,除了设计,要学会正确使用HTML5和CSS3是非常重要的。

 

3.移动化适配

随着移动设备上网的普及,网站也将进行调整,方便用户可以轻松地在手机和平板电脑上查看他们 。网页设计师创建的网站应当有自适应屏幕的较小版本。

Leave a comment

Your email address will not be published. Required fields are marked *