网页框架设计图片 第1篇
整齐简洁的网格排布(类似九宫格)样式从来都没有过时过，不管它是否按照栅格系统精细的划分了板块还是仅仅只有4X4的块状结构，一排排整齐的网格方块从一开始就清晰的为你展示了网站的内容框架，它们经过了高度的总结概括，开门见山的让你看到了网站的大体轮廓，从而发现自己感兴趣的板块。
网格版式在设计师中非常的流行，他们常用来制作个人网站，通过网格的样式错落有致的展示自己的视觉作品，让观者有种走进画廊的感觉。
网格版式还可以以彩色色块或容器与文本结合的样式呈现，网格分割线根据实际情况可有可无。有很多参数需要考虑，记住要科学规划每个格子的大小，以及网格间的间距，这些细节都是影响整个设计是否成功的重要因素。
工作原理：一个功能良好的网格版式是无与伦比的，它能够让用户不费吹灰之力便能找到并且深入了解自己感兴趣的内容，同时整个页面在视觉上也会更加的和谐统一。
网页框架设计图片 第2篇
研究表明，人们在查看一个网站的时候眼睛滚动的区域呈现出特定的F模式。首先会查看网站顶部的导航，然后从左到右的阅读，之后垂直向下移动，直到底部的辅助信息。
根据F模式我们就可以把用户感兴趣的内容放到最合适的位置。同时，根据这个概念就可以把内容的顺序有序的排列下来。
头部和导航
左边栏作为主要内容区
右侧侧边栏可以放相关链接和一些辅助性的信息，侧边栏的高度适中即可，不必延伸到底部。
底部内容
工作原理：人们是习惯性的生物，这个测试显示出人们的思维方式以及浏览网站的习惯。把这种习惯充分应用到网站设计中，就能够设计出很棒的作品。
网页框架设计图片 第3篇
这种方式重点是突出最小分层的内容区域，纯色的大背景让用户感到很放松，这样所有的精力都会集中对焦点信息浏览上了。大空间中排列着看似简单整齐的图层，但是这些图层集合的信息却并不简单，它们可能比你想象更加复杂，而它的样式也相对更加的精致。
这种把商业目的和简约设计有机融合在一起的方式在许多的项目类型中得到了应用，它的可行性和可塑性都是很高的。这就使用户能够不花费任何学习成本就能习惯性的完成订单的购买，例如Apple官网就是一个很好地例子。
工作原理：分层布局可以按照视觉元素的重要等级依次排列，尤其适用于简约风格的网站，图层上非常精炼的把商品的特点用文字描述出来，再配合精致的图片，极大的促进了用户的购买欲望。
使用细微的渐变和阴影来定义不同图层内容的差异性，虽然这种方式已经很落伍了，但是使用得当效果还是不错的。这些细微的变化是只有用户在进行操作时才能察觉到的交互细节。谷歌的Material Design就是把现实的真实体验带入二唯空间的最好的例子。