Web前端网页设计学习

时间：2023-10-07 14:00:01 | 来源：网站运营

时间：2023-10-07 14:00:01 来源：网站运营

Web前端网页设计学习：不知道你在接受一个新的网页设计的项目时候有没有那么一刻的盲目：这次接手的项目该从哪里还是下手去做呢？之所以有这种盲目无疑就是之前没有过类似项目经验，便就有了做点从来没有过的作品的冲动了。但是这种冲动一般都在伴随着设计的细化里、需求的磨合中、渐渐的就淡了。但事实上很多时候网页的布局在很多时候好像是差不多的，甚至有些网页的布局模式是经久不衰的。

一些网页的布局框架或者模式几本上都是按照以往的“约定俗称”的，因为它们本身就比较贴切用户对于内容的使用习惯以及识别模式。这次来分享的是五种使用期限比较长久网页布局，也许会对你以后在网页设计的项目里面会有帮助吧。

1、单栏布局、单页设计

在近几年里面单页式的网页设计都是非常受欢迎的，单页设计比较适合展现简单的内容，或者是专门针对一个话题/主题。如果网站主题集中并且内容的故事也是比较固定的话，就完全可以用单页单列的布局方式去展现不需要用到复杂的布局。

·导航

·主要内容区域，文字+图片为主

·页脚

用这种单页的布局模式的话在元素和元素之间的疏密关系设计师也是需要反复去试用，因此对于空间的控制是尤其重要，要经验相当丰富的设计师才能把网页设计留白以及布局平衡起来，要是控制的不好的话给人一种很混乱的感觉，太过紧密又会有局促感，总之就是会影响用户体验。

原理：一般小型项目和小网站比较适合使用单页式网页设计方式，可以用单页式制造简单的界面介绍，这样就显得把需要强化的内容更加有重量感以及形式感，不会那么单调。比如一些简单的内容的网站博客之类的选择单页式设计也是挺不错的。

趋势：有码互联认为动效设计和视差滚动是跟单页设计结合最紧密的，这两个结合让淡化单页的单调设计更加生动有趣，让网页有更强的生命力。

2、极简分层

这种极简化的设计一直都是非常流行的，开放式的空间可以让用户感觉更加轻松，这样的话想展现的内容就会更加容易被突出了。可要是在极简化的页面里加上一些并列的内容层的话就会让信息更加有层次感，也就让原本极简的页面有了更加细节。这些有趣的设计也不复杂。它可以适配更多不同类型的项目。这也明白了为什么用户都喜欢这类的apple官网这样的设计。

原理：为了让极简化的更加有视觉焦点可以在页面里面加入几个简单的分层，特别是在设计者想要让用户关注在某一个要推的内容的时候，这种极简页面布局就会更加容易实现一些。

趋势：在极简页面里要强化元素之间的层次感常会是使用渐变以及微妙的阴影，这些方法在曾经有过“过时”的一段时间，但是现在又被大量运用起来了。

3、简单的栅格和顶部大图

不管是多大的屏幕，这种设计风格都可以充分的提供用户探索和浏览。因为这种设计风格会因为屏幕或设备的差别而有所差别，所以很多的设计师都较爱把网页设计成固定的宽度或者横跨整个页面的布局，可在视觉的总体上面都是多少有些差异的。

·导航栏

·顶部大图，图片上叠有文字标题

·2~4个分栏，承载不同类别的信息，有的会有图标

·主要的内容区域

·页脚

这类的设计风格更加清爽干净，一目了然，让人有足够强的视觉效果。而且经常运用响应式设计风格，断点方面设计师也就更好控制了。一些大面积的顶部轮播图或banner也会通过很多的应用或插件来实现页面设计。

原理：这种方法布局整个流程都非常有逻辑性，而且里面每一个元素都各司其职，顶部的大图不仅可以营造很好的氛围而且带给用户的特定体验度也都非常好。往下的次一级元素也可以做很好的支撑。

趋势：色彩风度的插画式图标已经被越来越多的这类网页设计风格采用，并且扁平化的设计风格与这类设计风格都浑然天成。

4、自定义栅格

一些整齐分割出来的网页布局从未过时。不管是大块的还是细碎的网页区域，大多数是需要借助一整套干净整齐的栅格来支持。内容被安置在不同的区域里都是在上述基础里被精心组织出来的。

你在设计师的作品集里面可以看见各种自定义的栅格布局。这种布局方式展现内容优势在于能够同事呈现很多的视觉化内容，内容看起来很有档次并且也很丰富。

栅格里不一样的区块的区分方法有很多，不一定是要用线条去分割。并且在栅格里填充色彩也能用来承载文字内容。但一定要控制好栅格间的距离和尺寸。否则的话整个页面设计的平衡感就会被破坏了。

原理：有码互联觉得它的优势对用户来说拥有可预期性以及规律性，并且也是非常有组织性。一个好的栅格系统可以使用户更快的找到想要的内容。在视觉效果上面也很自然。

趋势：人们很容易把栅格当做一种卡片这种类型的元素，也可以加各种各样的翻转动态效果，呈现出更多的视觉层次记忆信息量。

5、经典的F式布局

按照观察数据表面，用户在浏览网页习惯从左往右由上往下，再继续从左往右呈F式的方式来浏览。这种浏览方式对应网页布局来讲就是F式布局。

·页头和导航

·靠左的一栏相对较宽，展示主要的内容

·靠右常为侧边栏，展示相关链接等内容

·页脚

原理：大多数人的行为会被习惯影响，从研究结果里也证明了人行为和思考都是模式化从左往右，从上往下。所以F式的布局模式就有了很号的适用性，方便用户的理解和交互了。

趋势：F式布局里的侧边有很多不一样的玩法，有人会结合导航，又或者在页面顶部加上大图banner。

总结

这次分享的这些布局方法都是经过长期的使用经验的经典设计，只要选对了设和的设计方法在把这些布局结合起来，往往能够带来不错的效果。