室内网页设计布局 第1篇
网页中主要的划分区域的尺寸使用百分数（搭配宽度最大值、最小值属性使用），例如，设置网页主体的宽度为80%，最小宽为960px，（最小宽也就是保证页面内容不会错乱的情况下的宽度，到达最小宽度后，不再适应，出滚动条）图片也作类似处理（宽度:100%, 最大宽一般设定为图片本身的尺寸，防止被拉伸而失真）。
注意：
宽度自适应，但是里面的图标、字体等也是固定大小的，并不是所有的东西都是自适应的。一些大的图片，设置宽度为百分比自适应即可，随着屏幕大小进行变化,对于小图标或者文本等, 一般都是固定宽高大小。
同时考虑到页面具体模块、弹窗、字段等在最小宽度下的显示，比如给出字段最小宽度，在最小宽度显示不下时如何处理。可以参考阿Zi之前的文章：
在网页布局中，我们通过设置元素的宽高定义元素的显示大小，但是，在不同窗口大小，不同分辨率下，宽高相同的元素显示状况是不同的。所以，我们往往需要元素的大小能够根据窗口或子元素自动调整以达到自适应。没错，在页面设计中，自适应的规则往往是需要设计补充的最多的。
因为阿Zi所在公司的管理系统是采用左侧导航栏固定，右侧内容区自适应的流式布局，所以举几个实际工作中的应用的规约例子：
a.弹窗自适应
b.模块、卡片自适应
一种是当页面横向拉伸时，卡片里内容个数不变，布局不变。可以把宽度均分成几块，然后内容在模块内居中，给出最小宽度；如下，设定单个最小宽100px，如到达最小宽度后显示不全，出现横向滚动条；更灵活的情况就是收缩时内容/区块布局变动的。同样要设置区块最小宽；向右自适应—横向排序，右侧不够则折行；最小宽度平均分成均等份，剩余宽度均分到其他列。
据统计，PC端用户的主流分辨率主要为 1920、1440 和 1366，个别系统还存在 1280 的显示设备。有些情况下不太好控制内容自适应，那么就需要出2，3套尺寸的设计稿来适配。可以根据具体情况判断系统是否需要进行适配，以及哪些区块需要考虑动态布局，哪些时候出多套尺寸。
室内网页设计布局 第2篇
- END -
注：以上图片仅供欣赏，版权归属设计者所有
关键词回复：(可见相对应知识文章）
印刷、名片、海报、logo设计、茶包装、色谱、折页、BANNER、吐槽视频、外卖餐饮、AV、报价、日式海报、版式、民国、软件、奥运、福利、简历、月饼、天猫、双十一、菜谱、红包......
学“废”了就点个赞
室内网页设计布局 第3篇
示例1----Dribbble
在1960-2048的屏幕下，显示5列内容
在950-1330-1960屏幕下显示3到4列
在500-620-950尺寸下显示1-2列布局，并且把头部主导航、搜索框、用户设置等内容收起到到左上角菜单：
示例2----Event Apart
互动设计会议Event Apart创造了从其主要网站到其移动网站的无缝过渡。
他们选择在大多数平台上保持大多数相同的布局，平板电脑版本与台式机相同，并且可以使用。这是因为他们为清晰起见选择在白色背景上以粗体显示内容，并且在调整大小时，可以轻松滚动信息。
唯一真正的变化是，对于移动版本，顶部的面包屑折叠成一个汉堡菜单，并用“菜单”一词明确指示。
示例3----Popular Science
无论使用哪种设备，Popular Science都能为您带来出色的用户体验。
正如您所期望的那样，内容处于中心位置，并且具有响应式图像和简洁的版式，Popular Science成功地创建了易于阅读和使用的响应式网站。本网站上的信息以一种可以在各种设备上轻松按比例缩小其所有内容的方式显示。
最后
虽然目前响应式设计的模式的普及还是有很多难题需要突破：比如响应式的图片、跨端交互、更高的性能、全新的合作流程等等。但是随着科技不断发展，响应技术逐渐完善，给响应式设计提供强有力的技术支持；响应式设计可以在不同终端提供完美展示效果与友好的用户体验，吻合用户体验至上的趋势。所以说，响应式设计必定是未来发展趋势。
参考文章：
室内网页设计布局 第4篇
全屏图像网页排版布局通过将超大的视觉效果放在屏幕前面和中间，可以引人注目且让访客身临其境。大型的媒体功能如视频可以在很短的时间内传达很多信息。这种网页排版布局也非常适配移动设备，非常适合想要突出特定细分市场或产品并且希望拥有出色营销视觉效果的企业。
如下图Pixso资源社区中的所示，网页通屏都是能够引起访客共鸣的照片，呼吁访客关注世界上饱受饥饿折磨的孩子。
室内网页设计布局 第5篇
使用Z型的网页排版布局，标志通常被放置在主页的左上角，以便用户第一时间可以注册。在它的对面，即最右边的角落，通常会放置导航菜单以及突出的号召性用语。Z 模式的对角线部分，从上到下横跨页面，是放置需要吸引用户目光的信息的地方。这种网页排版布局理念非常适合高度可视化的页面，而且非常适用于特定转换目的的登录页。
如Pixso资源社区中的所示，首屏的左上角放置了LOGO，右上角放置了联系的CTA按钮，左下角也放置了引导用户操作的按钮，完全遵循Z型的网页排版布局，访客一进来就可以轻松地注意到这些信息。
室内网页设计布局 第6篇
08
F型布局
F型的布局是适合很多的页面，有研究表明，用户在浏览网页的时候，会习惯于沿着F式的阅读轨迹来浏览信息。从左到右的阅读是用户阅读的习惯，用户通过从左到右的阅读然后向下阅读，继续从左到右。F型的布局有很明确的视觉层次结构。