网页设计案例解析（初级）

-

不同的高度视野不同，见识越多的人越能临危不惧，你可以不住在高山上，但你要爬上去看看日出。

我之前很幸运从事过教育相关的职业，对于刚刚接触设计行业的初学者的疑惑与求知有一些初步的了解。

-

在网页设计中企业网站在实际生活中的运用较为常见，那么我们在企业网站首页的设计当中应该注意些什么呢？

企业网站首页中必须具备的几个版块有：关于我们、业务范围、案例展示、联系我们等，关于我们对于一个企业而言至关重要，有多重要相信大家都不言而喻，那么我们今天就来针对性的了解一下关于我们这个板块。

-

在准备探讨的这个问题之初，我自己做了九个版式设计，我分别称它们为版式设计1-9，在接下来逐一探讨。这次的探讨比较详细，适用于初学者，不足之处大家可以指出交流。

以整个关于我们版块为前提，为了达到层次鲜明的效果，标题色号：#333333 正文内容色号：#888888 ；因为个人喜好正文内容的字号采用了16号（因为网页设计为了保证文字细节效果只采用偶数字号，一般说明性质的文字采用12号，采用16号字体的好处在于中间还留出了14号字体以备不时之需）；标题字号根据每个版式设计有所变化没有统一；字体都是微软雅黑，文案图片均来源于网络，后附源文件提供参考。

-企业网站之关于我们版式设计1

大家在做企业网站的时候应该会感受到企业网站与专题网站等的不同之处就在于设计样式比较传统，但是传统不代表一尘不变与呆板。现在的企业网站中基本上不会见到3D立体等风格，扁平简约风格已经成了一个流行趋势，版式设计1就是常见的扁平简约风格之一。

-企业网站之关于我们版式设计2

大家可见版式设计1与版式设计2当中有很多相似之处，比如都有一个矩形条，可见在觉得版式空、散的时候合理运动矩形条不仅可以当作装饰让版面更加好看还能很轻松的解决间距松散、版式空泛的问题。

那么不同之处大家有注意到吗？是的，版式设计1的背景颜色是纯白色，而版式设计2的背景颜色为浅灰色。为什么版式设计2会用到浅灰色背景呢？这里就涉及到一个整体问题了，大家在企业网站首页设计中会运用到不止一个版块，关于我们只是其中一个。如果全是白色背景那么就不容易区分每个版块，对于结构层次很不理想，那么这里运用一个简单的浅灰色矩形块当作背景就解决了这个问题。

-企业网站之关于我们版式设计3

很明显版式设计3与前两者的不同之处在于页面已经超出了安全距离，这种设计样式适用于整体设计左右倾向明显的布局，因为这种设计较容易形成视觉偏右的现象，如果上下某个版块有视觉偏左的情况那么这样反而达到的平衡的效果。大家可以对比一下版式设计1-3的选图，版式设计3的图片整体色调明显没有版式设计1-2那么抢眼，如果想要减弱左右偏移的视觉现象，在选图上注意一下整体色调的明度和纯度不要太高，相反想要增强左右偏移的视觉效果就提高明度和纯度。

ps:色彩的纯度是指色彩的纯净程度，它表示颜色中所含有色成分的比例。明度是指色彩的明亮程度。

-企业网站之关于我们版式设计4

版式设计4在排版上较版式设计1-3较为灵活，采用了部分重叠遮挡的方式。这种排版适用于整体排版较为灵活的布局，左边图片选择明度和纯度较高的，右边用一个相对较长的浅灰色块来达到平衡效果。

-企业网站之关于我们版式设计5

大家会发现版式设计5没有加入图片，是纯文字设计。这种设计方式适用于整体图片偏多的设计，在视觉上可以达到舒适放松的节点。这种排版的缺点在于整体版块较为单调，没有较强的视觉抓力；优点在于如果文案分类较多有适量的空间可以录入。

-企业网站之关于我们版式设计6

相较与版式设计 5的区别，很明显版式设计6只是加了一个背景图片，但是效果却截然不同，版式设计6在视觉上达到了较强的视觉冲击力。这里可以注意一下文字全是采用的纯白色号：#ffffff，采用这个色号可以和背景形成鲜明的对比，如果正文内容继续采用#888888可能会造成看不清的情况，因为就算在这张图片上这个色号是OK的，在网页上线后背景图片也不会一直不变的。

-企业网站之关于我们版式设计7

版式设计7与版式设计6同样都有背景图片，在视觉上如上有较强的视觉冲击力。这种排版的文字采用居中排版是比较取巧的，为什么呢？因为这种排版的文字摆放比较简单。ps:不管在什么情况下文字居中排版可以采用231的长度比例，这样的比例的文字排版出来通常会比较好看。但是也要考虑实际文案的情况哦~

-企业网站之关于我们版式设计8

版式设计8和版式设计6-7同样采用了背景图的设计样式，相信大家很快就发现了背景图的不同之处。是的，版式设计6-7的背景图我是采用了黑色矩形块和给图片降低透明度的方式结合，那么这样问题来了：如果我不想降低图片的透明度，想100%展展示图片但是又要保证文字的清晰度怎么办？如图所示，加上纯色矩形块就完美解决了问题，这里要注意的是矩形块的颜色取色纯度尽量高，同时与背景颜色尽量不要太接近。

版式设计8的文案排版和版式设计5-6都比较多，但是版式设计8的排版方式相较于版式设计5-6更加清晰明了。

-企业网站之关于我们版式设计9

版式设计9的排版设计综合上面的版式设计1-8而言较为复杂，既采用了蓝白纯色矩形块，还采用了降低透明度的黑色矩形块，这里要注意标题的位置尽量选择在背景图片较为干净、颜色较单一的地方。

和版式设计6-8一样，这样的排版方式既能满足100%展示图片，又能满足多类的文案需求。不过像这种采用大面积的图片作为背景，对于图片的取材是非常重要的，稍微不注意图片的选择不当就会影响整个页面的美感。

-总结

好了，讲到这里基本就结束了。看了这几种版式设计有没有帮你找到适合你的排版方法呢？最后再唠叨一下网页设计的细节非常重要，大家在开始做的时候一定要先统一色号、字号、字体、间距等，这样会为最后的调整节省很多时间，把握好整体的结构、层次、美感，最后就是的交互一定要考虑到舒适可行性。

-

PSD源文件链接：https://pan.baidu.com/s/1ylxcH9jp8iitu1V6MLiFIA  （仅供参考，想要提升一定要多多练习鸭~）

高清大图源文件链接：https://pan.baidu.com/s/1RVah6cCYYrEpvPjImA7bEg  （选图的重要性是一个方面，在图片没有选择的余地的时候，修图的能力也是很重要的呐~）

-

感谢大家耐心看完，有什么不足的地方欢迎大家提出来~如果大家喜欢的话我会继续出其他板块的文章，同时也欢迎大家提出你想了解哪些网页设计的知识，我们一起来讨论鸭~