网页设计排版布局技巧
以下就是网页设计排版布局技巧等等的介绍，希望为您带来帮助。
1.页面尺寸：页面尺寸和显示器大小及分辨率有关系，网页的局限性就在于你无法突破显示器的范围，而且因为浏览器也将占去不少空间，留下给你的页面范围就变得越来越小。一般，分辨率在1024×768的情况下，页面的显示尺寸为1007×600;分辨率在800×600的情况下，页面的显示尺寸为780×428个象素;分辨率在640×480的情况下，页面的显示尺寸则为620×311个象素。从以上数据可以看出，分辨率越高页面尺寸越大。浏览器的工具栏也是影响页面尺寸的原因，目前的浏览器的工具栏都可以取消或者增加，那么当你显示全部的工具栏和关闭全部工具栏时，页面的尺寸是不一样的。
在网页设计过程中，向下拖动页面是惟一给网页增加更多内容(尺寸)的方法。但我想提醒大家，除非你能肯定站点的内容能吸引大家拖动，否则不要让访问者拖动页面超过三屏。如果需要在同一页面显示超过三屏的内容，那么你最好能在上面做上页面内部连接，以方便访问者浏览。
2.整体造型：什么是造型，造型就是创造出来的物体形象。页面的整体形象，应该是一个整体，图形与文本的接合应该层叠有序，有机统一。虽然，显示器和浏览器都是矩形，但对于页面的造型，你可以充分运用自然界中的其它形状以及它们的组合：矩形，圆形，三角形，菱形等。
对于不同的形状，它们所代表的意义是不同的。比如矩形代表着正式，规则，你注意到很多ICP和政府网页都是以矩形为整体造型;圆形代表着柔和，团结，温暖，安全等，许多时尚站点喜欢以圆形为页面整体造型;三角形代表着力量，权威，牢固，侵略等，许多大型的商业站点为显示它的权威性常以三角形为页面整体造型;菱形则代表着平衡，协调，公平，一些交友站点常运用菱形作为页面整体造型。虽然不同形状带表着不同意义，但目前的网页制作多数是结合多个形状加以设计，其中又以某种形状为主。
3.页头：页头又可称之为页眉，页眉的作用是定义页面的主题。比如一个站点的名字多数都显示在页眉里。这样，访问者能很快知道这个站点是什么内容。页头是整个页面设计的关键，它将涉及到下面的更多设计和整个页面的协调性。页头常放置站点名字的图片或公司标志以及旗帜广告等。
4.文本：文本在页面中多数以“行”或者“块”(段落)出现，它们的摆放位置决定者整个页面布局的可视性。在过去因为页面制作技术的局限，文本放置位置的灵活性非常小，而随着DHTML的兴起，文本已经可以按照自己的要求放置到页面的任何位置。
5.页脚：页脚和页头相呼应。页头是放置站点主题的地方，而页脚则是放置制作者或者公司信息的地方。你能看到，许多此类信息都是放置在页脚的。
6.图片：图片和文本是网页的两大构成元素，却一不可。如何处理好图片和文本的位置成了整个页面布局的关键。而你的布局思维也将体现在这里。
7.多媒体：除了文本和图片，还有声音，动画，视频等等其它媒体。虽然它们不是经常能被利用到，但随着动态网页的兴起，它们在网页布局上也变得更重要起来。
网页重设计该如何解决
1、保留全部内容
我明白，做取舍总是一件艰难的事情。现有的内容已经和你的网站一同存在了多年，要舍弃其中的某一部分对你而言，是一件艰难的事情。
但是，当你决定要重新设计网站的时候，不妨问一下你自己：现在的这数百个页面是否真的能解决你的访客所有的问题么?
在取舍的问题上，单纯审视内容是否需要保留并不足以做出决策——你得有足够的理由说服自己这些内容值得保留。保留全部内容是一个典型的“囤积控”的心态，对于网站的访问者而言，这样心态下重设计的网站所带来的体验可能是灾难性的。网站内容应当重新审核。同网站的实际用户和潜在用户去沟通，用实际的反馈和数据来作为重设计的支撑。同陈旧过时的内容说再见，用精炼的语言和精简的页面来构建一个新的网站吧。
很多时候，内容策略师的角色更像是婚姻关系顾问，你需要确定哪些内容是冗余、过时、琐碎的，为什么它们会造成困惑，而哪些是实际有用的。
2、重视趋势，忽略持久价值
视差滚动，长阴影，视频背景，粘滞式导航，全景大图背景，无限滚动，作为一名设计师你应该不会忽视这些正在流行的设计趋势，毫无疑问。
时下流行的设计趋势，总会出现在你打开的每一个网站上，它们时刻都在暗示你它们是如此的受欢迎。当你准备重新设计网站的时候，它们总会第一时刻涌入你的大脑，毫无违和感地介入到你的设计方案中来。但是别忘了，网站重设计的首要任务并非炫技，而是重新组织内容，帮助网站访客解决问题。
这个时候，你需要记住三个原则：不要为了设计而设计;对你的品牌保持忠诚;易用性永远在第一位。
如果设计趋势真的符合用户需求，能提升整体体验，拿来使用不无不可。如果它仅仅是让网站更加炫酷，那么是否采用还值得商榷。合适的才是真的好。
3、全是重点
当我们被客户告知他们说的每一条信息都很重要的时候，他们所处的状况可能需要我们提供很多帮助。但是当你真正深入了解的时候，就会发现什么是真正重要的，而其他的是次重要的，甚至有些信息是不重要。
当你的利益相关方，尤其是甲方为你提供信息的时候，这种情况发生的机率相当高。当你开始网站重设计的时候，你可能会希望每一条信息都要出现在首页，紧接着，你会发现这样设计出来的首页，很可怕。
“如果所有都是重点，那么就不存在重点了。
这是一个最常见的误区，它所导致的直接结果缺少层次，信息过载。所以，你应当让每个页面有一个重点，一个核心，这意味着有些信息将不会得到重视，但是用户总不会因为没有重点而无所适从——至少你所呈现出来的重点，会被用户注意到。
4、主观臆测
“用户在手机上永远用不到这些内容。”
实际上这是这个令人不安的对白出现的频率还挺高的。纵观过去十年，当人们需要针对移动端来设计网页的时候，他们会将网页原有的一部分内容直接去除掉。
当然，重设计过程中，减少内容通常是一件好事情。但是，当你开始基于自己的主观假设而开始针对特定内容进行删除的时候，情况就稍微有点危险了。用户在电脑上翻看网页的时候还好，结果打开手机浏览的时候，发现某些他所需要的部分没了，情形无疑是尴尬的。
一般说来，没有数据支撑的假设直接拿来做设计，并不是好主意。
虽然我们常常号称“站在普通用户的角度”来分析，但是作为设计者和产品经理的思维方式与普通用户相去甚远，关注的点差别很大。所以，在做精简或者删减工作的时候，不要代表实际用户来做这种假设。尽量将完整的流程，全部的模块合理的进行重新设计，呈现在小屏幕上，并且通过用户调研和反馈来进行优化和精简。
5、忽略沟通
当你在设计网站的时候，总是期待将普通访客转化为网站的客户，对不对?
你期望自己的网站能够为客户带来某些价值，给予帮助，但是那个小小的“联系我们”链接总是在角落里面，许多普通用户打开网页之后，很少会继续往深处点击，浏览的人多，咨询的人少，真正下单购买产品和服务的就更少了。
所以，真正要解决这个问题，你需要让用户尽可能方便的同你开始沟通，提供注册也好，通过邮箱订阅信息也罢，提供社交帐号授权也可，鼓励用户同你和你的网站构建联系，哪怕他此刻不会购买产品，但是留下了沟通的渠道，至少让他不会忘记你的网站和产品。
另外有一点也值得注意，网站通常不会只有一个首页，用户常常会通过搜索引擎进入某个子页面或者单页，你应当在设计的时候注意让这些页面也拥有沟通的链接或者邮件订阅入口。
6、干扰用户体验
的确，你应当吸引用户的注意力，但是这不能以“欺骗”用户，或者辜负用户的信任为代价。
当你被一个充满噱头的新闻标题吸引了注意力，点开却发现内容完全不是你想的那样。标题党令人生厌。同样的，通过搜索引擎找到你想要的产品或者素材，打开页面之后却直接出现弹出框，要你注册，要你支付，有的甚至压根就不是相关的页面。所有的一切都是在干扰、打断用户体验。
也许在网站中采用这样的设计，短期内会有一定的效果，但是从长期来看，这种干扰性的用户体验很难让用户留存。
你的网站是在帮助用户达成目标，获得价值，千万不要打断他们正在进行的流程，破坏用户体验，尊重使用你的网站的用户，当你给予用户足够尊重之时，他们会用尊重予以回馈的。
在此之后，用更高价值的产品、服务和内容来吸引用户，而不是强迫用户注册。如果你真正在意你的用户，就不要干扰用户体验，而是让他们注意到注册之后拥有更高的附加值，有更好的服务，这样的设计才是双赢的。
7、不考虑用户的过渡
重设计网站无疑是一件好的事情，但是对于老用户而言，大规模的改变是好事还是坏事还值得商榷。
忽略老用户在重设计之后的过渡是许多网站重设计中的败笔。重设计对于许多老用户而言，是需要重新学习和熟悉的，毕竟以往熟悉的东西变换了位置，甚至直接没有了。意想不到的改变，会导致整个体验上的缺失和挫折。
解决方案其实也不复杂，将原本的用户流程也纳入到新网站的设计当中来，通过诸如 intro.js 这样的功能模块来提升网站的新用户引导流程。还有的网站会让旧版和新版同时存在，使用301重新定向，将用户从旧版引导到新版来帮助用户进行过渡。
浅谈当下网页设计趋势
1.响应式网页设计(Responsive Web Design)
现在越来越多用户都拥有多种终端：台式机，笔记本，平板电脑，手机，能够适应不同尺寸显示屏的网页是现在的潮流，甚至是未来很长一段时间的设计趋势。那么响应式网页设计就是来解决这个问题的。这种特别的开发方式能保证网页适应不同的分辨率，让网页要素重组，使其无论在垂直的平板电脑还是智能手机上，都能达到最好的视觉效果。
除了多终端的多样化，我们还可以看到我们的电脑屏幕，手机屏幕都在不断变大，而在对未来生活的预测、概念设计里，“屏幕”这个产物更是被运用到多种新平台上。例如微软发布的“未来生活概念视频”里，厨房、室内墙壁、办公室玻璃墙面都成为了交互平台。所以我们可以发现，响应式网页设计所具备的良好的适应性和可塑性，在未来的网页设计里将占有举足轻重的位置。
2.全屏网页设计(Full Screen Design)
所谓设计不分家，近年来平面设计里“纯净”“留白”等概念也被互联网设计吸取，为了更简单明了的突出主体，提供更舒适的感官感受，很多网站开始采用全屏网页设计，利用精心挑选设计的漂亮背景，加上合理的页面布局，视觉冲击力大可很好的吸引观者注意。通常页面内的文字内容不会特别多(所出现的少量文字加上精美的排版将会变得更加吸引人)，主要以图片展示为主。这个样子的网站多用于摄影团队或个人作品集展示会比较常见。虽然简单养眼，但是承载信息有限，公司部门的主页很少见这样的设计。
3.视差滚动设计(Parallax Design)
视差设计可以说是近年来网页设计中的一大突破，也备受推崇。视差滚动是让多层背景以不同速度滚动，以形成一种3D立体的运动效果，给观者带来一种独特的视觉感受。
除此以外，鼠标滚轮的流畅体验，让用户在观看此类网站时有一种控制感，简单来说这是有响应的交互体验。就好像童年看到走马灯，转动它你就能看到人物动起来，还能欣赏故事。视差滚动设计的趣味也在于此。所以无论是网站还是电商商品宣传页都经常采用视差设计，吸引眼球也很受用户喜爱。
4.扁平化设计(Flat Design)
扁平化设计可以说是去繁从简的设计美学。去掉所有装饰性的设计，可以说是对之前所推崇的拟物化设计的颠覆。我们不能妄加评论说这是好还是不好，只能说它提供了一种新的设计思维。扁平化设计是否会成为将来的趋势我们也无法回答，尽管褒贬不一，备受争议，但是就现在来说它是当下的一种潮流。
5.滚动侦测网页设计(Scrollspy)
利用CSS的实现将导航栏固定在网页顶部(大多数是顶部，当然也有侧面或底部)，并将版面内容按照导航顺序垂直或横向排布，使得用户点击相应导航tab时页面自动滑到相应页面，而若点击内容，导航也将随之改变。这样的网页设计页面基本不会跳转，每一个tab所指向的页面内容也基本一屏显示完整，所以在页面呈现的内容上会有所局限。为不影响布局一般也会伴随自适应。
滚动侦测式的网页会给设计师带来了很大挑战——要在有限空间内保证内容呈现的完整性，故设计师会在版面上下足功夫。而这类网站结构和视差设计有异曲同工之处，所以我们发现很多网站会结合两者，给观者带来不一样的视觉感受和用户体验。
6.无限滚动模式(瀑布流)
有一些网站内容很多，但他们并没有简单分页，而是采用的是一种垂直瀑布流的方式布局。将那些内容垂直排布，当用户纵向滚动时，内容会不断更新好像永无止境。这样的瀑布流很早之前就开始流行，最早采用该布局的是pinterest。这样的滚动页面就大大减少了分页的数量，个人认为对于这类信息量大，每日更新数据快的网站是比较不错的方案。
7.网页的风格化设计
现在的网页早已不再像过去受诸多条件和技术限制了。其呈现方式颇为丰富。风格从清新到复古，插画手绘到拟真设计，无奇不有。无论是版面版式，还是设计元素，用标新立异这个词形容绝不为过。根据自己撇到的冰山一角，提一下对我感触最深的变化：
(1)平面设计感的加强
网页设计随着设备和技术的革新，早已突破了过去单一框架的限制，变得更加灵活。所以就页面风格更多地开始向平面设计靠近，许多页面设计得极赋海报和杂志的版式感。时尚而富有冲击力。
(2)注重字体设计
近年来很多设计师将字体设计也融入了网页设计中，并作为设计的一个重要元素提升整个网页品味。通过使用CSS3设计师可以拥有许多自定义的字体，这给网页的视觉设计也增加了一个重要的设计思路。
(2)注重字体设计
近年来很多设计师将字体设计也融入了网页设计中，并作为设计的一个重要元素提升整个网页品味。通过使用CSS3设计师可以拥有许多自定义的字体，这给网页的视觉设计也增加了一个重要的设计思路。
通过观察这些趋势如何影响现代网站设计，或许可以为网页设计师带去指引，发散出新想法。
虽然设计师和开发者都需要和市场接轨并跟上潮流的脚步，但是所谓的潮流是当下的，未来确是未知的。我们的确需要保证自己不被行业趋势甩到队尾，但更重要的是在浪潮中适应和学习。
网页设计中交互设计的流行趋势
交互用在人和界面之间的浏览、点击、切换使之方便、快捷、平滑，好的交互是使用户依赖，能使产品长久留住用户。视觉则是人的眼睛看起来舒服、舒适，让用户惊喜，让用户愿意去尝试。网页则是一个产品类型，同时需要用到交互和视觉来是此产品更好地宣传需要展示的内容的载体。成为交互的话需要把握产品受众人群的心理，了解产品的特性，以及要有新颖的创新思想，能想到让人一亮的让人用起来更舒服的点子。
交互设计与视觉设计他们本身可为是相互相成的关系。不同的地方是各自的侧重点不同。交互侧重与人的心理认知过程和各方面的习惯及心理感受。视觉设计侧重与页面的美感，视觉效果。这就需要一个优秀的网页设计。
一、响应式设计日益成熟
就在几年前，提起“响应式网站”，还意味着它的适配平台仅限于桌面，平板和智能手机等客户端。随着智能手表，智能电视和其他智能家用设备的迅猛增长，响应式设计的定义也得到了极大的扩展。
很多大公司近几年着重推进响应设计的研发进程。如google前些时间推出的moto 360，以及苹果推出的iwatch，三星、LG、华为都推出了自家的智能手表。这标志着未来在智能可穿戴设备将超过手机发展势头，随之而来的就是全面革新的响应式设计闯入生活，未来的生活方式将更加有趣。
二、幽灵按钮
幽灵按钮就是隐藏形式的按钮，不破坏整体的画面感，保持了画面简洁，统一，但又不失功能性。可以说是未来在流行简约、背景大图的一大必然趋势。
三、更强调字体
出现这一趋势主要有两个方面。首先传统的一些Web字体价格昂贵，意味着网站排版需要更多的预算。如今，这种情况在改变，设计师只要更少的预算甚至免费的字体就能在网页上自由设计。另外，在流行的简约风格下，背景基本都是缺少故意装饰的图案，部分网页只有背景和文字，有时会缺乏整体的设计感，所以更大的标题文字能使画面更具冲击力，主次分明，使人印象深刻的同时又不使画面显得凌乱。
四、滚动主导点击
移动互联的不断发展，刷新了移动终端的使用频率，人们越是依赖手机等设备就是越是促进移动交互的设计，所以，更加方便的滚动逐渐主导点击，成为移动交互的新宠儿。
五、卡片式设计继续
随着信息处理能力的增强，部分以堆加信息的设计逻辑依然能存活。这里就有典型例子，卡片式设计。不同于其它走简约的信息分类，它直接醒目的将各个内容图片铺开放在一起，这样做的好处是，用户筛选信息快速、方便，不用进入下一级就可以基本全部了解信息。例如，微博和视觉中国的图文信息排版。
