优秀网站首页设计的四大布局技巧

1、网站首页设计的标准——颜色匹配

首页对用户来说是最具吸引力的。因此，主页设计标准必须有明确的主题和吸引人的色彩。最后，颜色要统一，属于同一色系。不超过三种颜色。如果颜色过多，会导致人们审美疲劳，从而失去一定数量的客户，导致PV下降。

2、网站首页设计的标准——在主页的设计中，要注意细节，细节决定了网站的成败

细节的数量将是令人耳目一新和愉快的。在美化我们的网站的时候，我们应该尽力去提炼每一个小细节，不要认为图片的每一个小角落都是不重要的。如果你不注意你的界面的小细节，你的访问者将有理由认为你的内容不好，这对你的网站不好。

3、网站首页设计的标准——首页内容丰富

首页列的数量可以大大提高你的域名质量。另一方面，来自主页的流量在整个网站中占有绝对优势，所以优化主页丰富度也是SEO的一个必要优化要求。

4、网站首页设计的标准——网站设计应遵循行业特点，有自己的风格

网站主页设计标准应符合行业特点。一个网站就像你的衣服，它有自己的风格和个性。但这种个性需要与一个人的身份工作相匹配。同样的网站也应该适合你的行业。例如，娱乐网站擅长使用橙色，科技网站擅长使用蓝色，政府门户大多是红色的。

5、网站首页设计的标准——奢侈应该是空白的

在网页设计中，适当使用空白可以起到意想不到的作用。我们用聪明的flash动画、视频、3D图形等设计了主页，但尽量避免过度使用这些元素。现在，人们经常使用各种便携设备来浏览网页，所以我们也应该考虑移动互联网用户的需求。在网页设计中，留白和空白应该小心准确地处理。然而，过多的留白会使网站缺乏吸引力。因此，在设计过程中要保持流体状态，不要过度使用。

环球网校小编为大家整理的《Ui设计师如何通过网站首页设计的标准，做好网站的建设与优化?》到这里就结束了，如果你希望能将这篇文章灵活应用，还需多加练习，如果你还想学习更多有关ui设计的技巧或知识，可以点击本文其他文章进行学习。

在制作网站前端时，需要遵循一些设计规范；

①　使用当前最流行的设计理念

②　网页特效更具有趣味性，建议使用目前最流行的H5流动效设计。

③　如果是需要制作营销型网站，那么首页内容要丰富，内页页面也不能沿用传统的固定格局，可以考虑多单独制版一些页面，这样更能体现公司实力。

④　内页设计与栏目名对应的主题图片，应该每个栏目页均有一张Banner图；

⑤　内页左侧制作相对应的二级栏目，增加访客良好体验；

⑥　不出现文字错误和图片错误；

⑦　对于可预料的内容进行提前设置，比如图片变形预案，字数多时页面会换行的解决办法；

⑧　最后，网页编码时一定要按照W3C标准编写代码，这样才能让浏览器更好地阅读和展现网页。

一、网站首页的必要元素虽然首页元素根据企业性质的不同会做改变，但是基本的页面元素必须要具备。如：导航栏、LOGO、Banner、按钮、图片、文字。1、导航栏导航栏如果设计得恰到好处，是会给网页本身增色很多(千万不要太花哨，它属于功能物件，喧宾夺主就不好了)。导航栏有一排、两排、多排、图片导航和Frame 框架快捷导航(民主湖论坛就是这种)等等各种情况的设计。有时候是横排，有时候则是竖排。另外还有一些动态的导航栏，如很精彩的Flash导航。2、LOGOLOGO是网站为了给大家一个比较直观的信息的表达工具。网站的LOGO，一般以静态的居多，也有动态的，但是LOGO的特点都是在表达网站的信息，是一个网站的直接的表现窗口。3、Banner是网站的广告展示，对于引起用户注意和记忆、增强画面效果有重要作用。4、按钮网页中的“用户登录”、“登录按钮”“More按钮”、“个股推荐”等等类似物件，通常都统称为按钮。它是引导用户进入其他页面的一个重要端口。

二、网站首页的整体规划对网站首页设计的整体要求体现在：1.有共性，才有统一，有细节区别，就有层次。2.防止设计与实现过程中的偏差，不要定死具体要放多少条信息。3.设计的各部分，要配合整体风格，夸张一点好像VI。4.不仅页面上各项设计要统一，而且网站的各级别页面也要统一。5.页面要“透气”，就是信息不要太过集中，以免文字编排太紧密。6.不要有太多分散注意力的点。动态闪烁要适中。7.页面留白部分，要根据平面设计原理来设计，请注意，分栏式结构不宜留白。8.还要考虑到浏览器上部占用的屏幕空间，防止图片截断等造成视觉效果不好。9.首页设计图片+导航，这是一种比较强的网站表达，可以根据时间的变化更改图片，一般用在专题网站上，如民主湖电台，还有很多公司的网页。

三、对网站首页功能易用性的要求任何网站都要把这个问题放在第一位。不过大家请注意以下几点：1.导航栏应最先调入，以便常客快速前往所需信息空间。2.页面长度要短，使得用户在信息空间内可迅速移动。3.导航设计方向要一致。支持导航的层次按钮应当从上到下或从左到右，但不要两者都用，不要混用方向。

四、网站首页设计要求体现出气氛情感表达气氛会自然地激发出一种情感，不管它来自图片、颜色、标题或者是动态的广告，只要是来自页面，本身就具备了一种表达思想。气氛的表达是一个网站的灵魂所在，在浏览网页的是时候给人的第一感觉是最重要的，气氛情感也代表着整个网站的主题，是浏览者最容易所到感染的隐藏因素。

制作主页是一项非常复杂的工作，跟创意合成有点类似。首先要根据客户的要求去找一些好的作品作为参考，找出一些灵感，然后搜集相关的素材，并按照自己的思路去慢慢溶图、渲染颜色，处理明暗及细节等。最终效果

一、网页首页模版创建

1、首先打开我们下载的ps软件，左上角选择文件-新建（快捷键ctrl+N），然后创建一个1920x3000的画布，网页设计分辨率选择72就可以，颜色模式我们选择RGB,点击创建；（注意宽度选择的是像素）

为什么我们要创建1920宽的呢，目前我们的显示器分辨率一般为1920px，所以创建1920px宽度的可以使我们的网页背景正好显示完整，左右不会出现空白。

2、接下来我们要将单位与标尺调整为像素，方便我们测量宽高。操作步骤为：编辑-首选项-单位与标尺（快捷键ctrl+K，找到单位与标尺）

3、选择 视图-标尺（快捷键ctrl+R）调用我们的刻度尺，方便直观的看到宽度和高度；左击刻度尺拖出2条参考线分别到360和1560刻度，使中间留有1200px的宽度。两个刻度尺中间的距离就为我们内容展示的区域，使用 （快捷键ctrl+）可以显示关闭刻度。

为什么要使用1200px的宽度呢，因为目前主流的网页设计主体内容宽度为980px和1200px，而1200px可以显示更多的内容，网页也可以显得更加的高端大气。

二、使用矩形工具制作黑色背景导航条：

1.选择“矩形工具”，设置填充色为“#333”，描边设为空；

2.创建“图层1”点击画布，在弹出的窗口中设置宽度1920，高度25，点击创建；

3.使用移动工具将导航条移动到左上角；

三、logo图片导入

1、使用文件->打开（ctrl+o），将logo图片打开；

2、ctrl+A选中图片，然后复制粘贴到当前页面中；

3、移动图片到指定的位置；