分享网站建设知识
推动网站应用价值

提供短小精焊并有价值的建站知识分享。

企业建站首页策划设计技巧
2019-10-23 17:34:14

我们认为一个企业网站的首页设计,并不是一个单独的页面设计,而应根据网站的主要职能及品牌VI进行整体规划和延伸设计后,进行的一个比较重要的页面模型设计。一个有品质的网站首页,理应是一个能让用户快速获取登录本站所需要的核心资讯并留下第一个好印象。

 

 

那么有哪些因素和技巧可以让首页策划和设计得更有品质呢?

 

01

-

首屏

 

根据以前我们提到过的F浏览模式,用户的浏览习惯是从浏览器的左上角发散到其他内容版块,从左到右,从上往下,形成F形状。而整体来看,第一个F,就是首屏,独特的首屏至关重要。

 

所有的网站都是开始于第一印象的。所以,你需要创建一个有影响力,能够在第一眼就吸引用户的网站。

 

首先,你可以试着最大化你的视觉体验——通过大尺寸且高清的照片,视频或插图,可以有效地吸引观众。你所选用的图像应该是人们不想停止观看的,它应该完全具备你独有的元素,以便使它区别于任何其他的网站设计。

 

你可以将图像与几个关键词相结合,告诉用户他们是为了什么来到这里以及你的网站可以提供给他们什么内容。

 

这是你将它们全部放在一起所应该考虑的事情:首屏的大小尺寸必须恰好适合所有终端设备的第一个屏幕。所以你需要对内容进行响应式缩放,以便使整个图像和所有相关的内容文本在不滚动的情况下依然能在首屏清晰可见。

 

02

-

导航

 

将导航放置在边栏或屏幕顶部的日子一去不复返了。隐藏和弹出的导航样式目前来看已经成为大势,也被用户们缩认可和接受(部分归因于移动设备),所有网站设计都是可以接受这种样式的。即便如此,再艺术化设计的菜单导航,直观便捷的导航永远都是至关重要的。

 

但不要完全隐藏导航或使其变得难以使用。不管你对汉堡风格的导航喜欢与否,你已经不能否认这种样式导航已经成为隐藏导航中最主要的角色。用户已经学会了使用它,并且可以轻松地在页面上找到他们想要的东西。

 

你需要确保将导航收起的图标放置在用户容易找到的位置,你可以使其比典型图标更大以增强他的存在感(当然,不要做太过了),并确保导航功能完全可用。在上面Uve的网页设计中,它就做了一个优秀的示范。一个突出的汉堡包菜单图标,可以扩展到全屏菜单选项列表。最重要的是,用户不必猜测该如何使用它。

 

03

-

关联点

 

当你在你的网页设计工作中思考应该如何设计页面的时候,比如首屏,最重要的是创建单个焦点或实用消息。用户有意或偶然地访问了你的网站,他们最先需要的是清楚这个网站到底是做什么的。首页给每个内容模块创建一个与内页展开内容的关联点,很重要。

 

单一的视觉概念可以帮助用户联想(或关联)出你是谁以及你局提示在做什么。这可以通过多种不同方式的图像或文本来实现。

 

虽然复杂的设计风格也可以达到这种效果,但是何不开始思考简单的方式呢。极简主义既是时尚的,也是传达信息的有效途径。

 

 

04

-

文本

 

想想首屏作为一本书封面,而不是小说的第一页。它应该包括足够的文本信息来帮助用户参与到里面。一个简单的标题和小的文本块通常就足以做到这一点。虽然这个内容很少,但这可能是一个需要大量工作的过程。写作需要简洁,对于梳理出一套清晰的文本内容可能是具有挑战性的。首页策划与设计,需要有目的的使用文本进行排版设计。

 

以你的网站目标为准则。为什么用户在这里?你想要他们做些什么?使用文本创建该关联性并开始讲述你的故事。请记住向用户展示你的网站相对于其他的同类网站具有哪些优势或好处。

 

05

-

用户

 

网站设计提供独特视觉体验的同时,也需要提供一个理由给用户,使他们能够尽可能久的在你的网站上停留并浏览信息。所以,当你在考虑你的网站设计应该在第一屏加入什么元素时,切记要让用户可以参与到里面。找点合理的事情让用户做。有效的技巧比如行为召唤按钮的设计等。

 

行动可以包括:

 

· 填写表单,例如提供电子邮件地址;

 

· 为了销售而展示流动商品;

 

· 观看电影或轮播图。

 

你的首屏不仅仅只是需要包含其中的一个操作,同时应该完全清楚你的操作是什么以及用户应该做什么。 你的网页设计不能让他们感到是被迫做的。

 

在上面 The Big Short movie 的网站中,为用户提供了大量的信息。视频剪辑足以使你对电影感兴趣,并且有一个按钮来观看预告片。你对这个真实的故事感兴趣吗?同时,页面上还具备一个按钮来于专家会面。你有没有看过它,想分享你的想法?这有社交媒体按钮可以马上帮你做到这一点。从一开始就有很多方法与网站进行互动。

 

 

06

-

品牌

 

网站是一个企业品牌的延伸。它应该为品牌创造更多的空间。 

 

如果你不知道自己的网站设计是为那一类用户准备的,那么这个网站可能不会如你预期的那么有作用。基于这种考虑,你的首屏应该至少包括一个标志或能够关联到你网站背后的品牌形象。

 

品牌或公司名称可以产生很强的关联性和可信度。这使得网站看起来更“真实”(这对于包含任何类型的财务或个人交易的网站尤其重要,因为用户关心具体是谁获得了他们的信息)。

 

一些比较知名的品牌可以摆脱以上的束缚,因为许多人可能已经知道它们。而对于较小的品牌来说,我觉得是始终有必要的,清楚地显示标志和风格对于用户关联和信任的你的网站身份很重要。

 

07

-

聚焦

 

每个企业网站都有着其自身的职能。然而不能着急的在首页将全部的职能都体现完,需要精简,需要聚焦,极可能的避免用户分心。例如苹果官网的每一个页面,每一屏,几乎都考虑了这一点。 

 

在首屏的网页设计中,不要给用户太多可看的或过多需要处理的内容。它应该足够简单,精简以及集中。

 

如果你有很多内容,请在多个屏幕上有条理的逐步展示(这可以促进用户的参与感,并防止混乱或混乱的网站结构)。

 

Melanie DaVeid 做了一个优秀的示范,通过一个简单的视觉呈现,使你对它的其他工作感兴趣。通过动画,颜色和特殊的文字组合,在首屏就为用户创造了独特的感觉。

 

 

一、 学会做减法

 

跳出设计中的条条框框,搭配简单的配色,醒目又大方。

 

二、 结合用户界面设计-页面背景

 

1. 模糊背景

 

模糊背景的运用不仅让整个网站显得更加人性化,并且在很大程度上烘托出网站所要表现的氛围。

 

2. 暗色背景

 

在暗色背景中,明亮的输入框便吸引了所有的注意力。

 

3.扁平化纯色背景

 

三、清晰的视觉纵线

 

人的视觉浏览一般呈“L”型视线,意指从上到下,从左至右,表单的视觉浏览顺序符合“L”型规律就基本符合用户的心理预期。

 

-

网页设计应急小技巧

 

1、让几何元素提升网页Level

 

一个简单的几何元素在网页设计中起到的作用绝对能让你出乎意料,尤其在应对极简风格的网站时效果更佳。设计,无非是点、线、面的不断组合搭配,而立体几何的融入是如此拼搭过程中的一种升华。

 

2、换个视角看网页中的世界

 

整齐划一的元素排版难免会让页面显得有些沉闷和拘谨,但相同的画面只要稍作角度微调,效果就会大不一样,整个网页都变得俏皮灵动起来。如果在视觉上觉得有些别扭,不如借鉴案例中的方法,加入适当的滤镜效果,让画面更自然。

 

3、真真假假的网页效果

 

真实图片和虚拟事物图片的使用都能很有效的提升网页档次,但使用时的局限性比较大,网页的整体风格很容易就此封闭在一个小范围里。而“真假参半”的设计方式也许能带来独特的效果,不仅让网页更有人情味,也会让客户感受到设计师的用心。

 

4、万能的黄金比例

 

我们提到过,黄金比例会让大家的网页设计变得千篇一律,布局方式可以很大程度的体现出一个设计师的水准。但当你的设计时间很紧迫的时候,万能的黄金比例能快速帮到你,设计师能在此基础上做一些小创新。如下案例,设计师用人物肖像来作为页面的分界,既达到了黄金的视觉效果,又让界限的表现形式更自然流畅。

 

5、用色彩展现视觉冲击

 

最直接的视觉冲击力一定是由色彩带来的。色彩的使用是设计界永恒的话题,但在时间紧急的时候,设计师一定不愿意在选色上花费很久,这时,使用对比色是最合适的选择。对比色在网页设计中的运用要点是不能只关注视觉美观而已,也要同时注意用户体验。

 

6、让高清大图背景“决定”网页风格

 

可能有的网页设计师会觉得,使用了高清大图作为网页背景对于客户来说是一种“偷懒”的行为,其实不然。这种设计方法很考验设计师的能力,需要设计师在设计前事先设想好一个很完整的蓝图,与其说让图片“决定”风格,倒不如认为是风格“决定”图片。而之所以将这一方法也纳入应急技巧,主要因为这种设计的可塑性较强,如果之后有修改意见,步骤会相对简单一些。

 

7、精简文字并不是一种偷懒行为

 

人类都是视觉动物,潜意识中都更愿意接受简单的东西。按照这样的理论,长篇大论的文字板块应该在网页设计中尽量避免,下面的案例很好的证明了这一点。简简单单的一句话反而能令人对之后的内容产生好奇心。

 

8、韵律线带你提升带你飞

 

千万别不相信,一根线条就能颠覆整个网页的视觉感受!正因为作用如此妙不可言,所以被我们亲切的称为“韵律线”。想象一下,如果案例中的页面缺少韵律线组成的阴影部分,这个网页会变得再普通不过,而现在则显得充满设计感。

 

9、令人不得不爱的Metro风

 

 

Metro风随着Win8界面的发布变得渐渐热门起来,甚至很多国外的电子商务网站设计也纷纷加入Metro的阵营,下面的案例来自韩国的一家电商机构。如果觉得Metro风格的设计过于紧凑,网格布局也能适当借鉴。但基于是应急技巧的介绍,Metro的设计速度可能会更快一些。

分享该编文章:

免责声明:本站部分文章由本网用户编辑转载并发布,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请在30日内与本网联系,我们将在第一时间删除内容![声明]本站文章版权归原作者所有 内容为作者个人观点 本站只提供参考并不构成任何投资及应用建议。本站拥有对此声明的最终解释权。

相关资讯: