网页版面设计技巧.docx

网页版面设计技巧

网页版面〔制定〕技巧
以下就是网页版面制定技巧等等的介绍，希望为您带来帮助。

1.页面尺寸：页面尺寸和显示器大小及分辨率有关系，网页的局限性就在于你无法突破显示器的范围，而且因为浏览器也将占去不少空间，留下给你的页面范围就变得越来越小。一般，分辨率在1024768的状况下，页面的显示尺寸为1007600;分辨率在800600的状况下，页面的显示尺寸为780428个象素;分辨率在640480的状况下，页面的显示尺寸则为620311个象素。从以上数据可以看出，分辨率越高页面尺寸越大。
浏览器的工具栏也是影响页面尺寸的原因，目前的浏览器的工具栏都可以取消或者增加，那么当你显示全部的工具栏和关闭全部工具栏时，页面的尺寸是不一样的。
在网页制定过程中，向下拖动页面是惟一给网页增加更多内容(尺寸)的方法。但我想提醒大家，除非你能肯定站点的内容能吸引大家拖动，否则不要让访问者拖动页面超过三屏。如果必须要在同一页面显示超过三屏的内容，那么你最好能在上面做上页面内部连接，以方便访问者浏览。
2.整体造型：什么是造型，造型就是创造出来的物体形象。页面的整体形象，应该是一个整体，图形与文本的接合应该层叠有序，有机统一。虽然，显示器和浏览器都是矩形，但关于页面的造型，你可以充分运用自然界中的其它形状以及它们的组合：矩形，圆形，三角形，菱形等。
关于不同的形状，它们所代表的意义是不同的。比如矩形代表着正式，规则，你注意到很多ICP和政府网页都是以矩形为整体造型;圆形代表着柔和，团结，温暖，安全等，许多时尚站点喜爱以圆形为页面整体造型;三角形代表着力量，权威，牢固，侵略等，许多大型的商业站点为显示它的权威性常以三角形为页面整体造型;菱形则代表着平衡，协调，公平，一些交友站点常运用菱形作为页面整体造型。虽然不同形状带表着不同意义，但目前的网页制作多数是结合多个形状加以制定，其中又以某种形状为主。
3.页头：页头又可称之为页眉，页眉的作用是定义页面的主题。比如一个站点的名字多数都显示在页眉里。这样，访问者能很快知道这个站点是什么内容。页头是整个页面制定的关键，它将涉及到下面的更多制定和整个页面的协调性。页头常放置站点名字的图片或公司标志以及旗帜广告等。
4.文本：文本在页面中多数以"行'或者"块'(段落)出现，它们的摆放位置决定者整个页面布局的可视性。在过去因为页面制作技术的局限，文本放置位置的灵活性非常小，而随着DHTML的兴起，文本已经可以按照自己的要求放置到页面的任何位置。
5.页脚：页脚和页头相呼应。页头是放置站点主题的地方，而页脚则是放置制或者公司信息的地方。你能看到，许多此类信息都是放置在页脚的。
6.图片：图片和文本是网页的两大构成元素，却一不可。如何处理好图片和文本的位置成了整个页面布局的关键。而你的布局思维也将体现在这里。
7.多媒体：除了文本和图片，还有声音，动画，视频等等其它媒体。虽然它们不是常常能被利用到，但随着动态网页的兴起，它们在网页布局上也变得更重要起来。
网页排版制定的学习技巧
空间共享式文字排版
这种空间共享式排版是一种相当容易识别的制定手法。实际上，在一些海报和明信片制定中，也可以采纳这样的制定。它的最典型的特征是，文字或者相似的元素横跨多个图层、模块或者区块。
从广泛意义上来讲，这个制定手法的核心概念是某个元素和其他的元素共享空间，横跨不同区域，元素互相叠加。这种制定经常被视作为分屏制定的一种延伸。
图片和文本的混排
美丽的排版和精美的图片总能相辅相成。许多制定师都喜爱在使用共享空间式排版的时候，采纳垂直定向的图片(不过由于各种屏幕的高宽比不同，这种技术使用的比例并不高。)。
这样的制定有一个好处，由于文本必须要跨越不同的区域，配色不用坚持完全的统一，依据文字四周的背景色进行调整，这样的制定简单而容易上手。难的地方在于文本内容的分拆和合并的状态下，表达的含义是否都合适。
减少不同类型字体的使用
使用超过3种不同的字体让网站看起来没有结构且不专业。记住，太多的尺寸类型和风格也可能破坏任何布局。一般来说，将字体数量限制在最小限度(两个很充足，通常一个就足够了)，并粘贴相同的字体到整个网站。如果使用多个字体，请保证字体系基于字符宽度互相补充。
行间距的重要性
在排版中，我们有一个特别术语，用于两行文本之间的间距(或行高)。通过增加行高，可以增加文本行之间的垂直空白空间，通常提升可读性以换取屏幕空间。作为一个规则，行高应该是字符高度的30%，以提升可读性。
沿着视觉流向排布
沿着视觉流一直排布信息是一项重要的技巧。文字与图片发生逻辑关系，两者相辅相承，所以此时文字不能覆盖到图片的主体部分比如必须要展示的人物，或者产品本身。信息按照视觉流向排布的时候，图片中的主体会引导你去观看文字信息。
扩大
当你不知道要怎么处理素材的时候，试着扩大吧。这不仅仅针对图片，它还适用于文字的处理，扩大的元素更容易抓住用户的眼球。正如上述的两个案例，扩大的咖啡豆强化了对比，扩大的文字则极具冲击力。
极简网页制定思路
制定师在进行简约风格网页制定时，也必须要铭记一些简单的制定思路，简化整个制定过程
首先，先复杂，再逐个简化
为了防止漏掉某些制定元素或功能，制定师可以通过先将所有必须要的制定一一添加到界面中，然后再逐个依据必须要简化的思路，准确而稳步的进行优化。

当然，为对比前后效果，也可使用Mockplus将它们快速的制作成交互原型，逐个测试修改前后界面制定的有用性和有效性。而且其提供的8种预览和分享方式，关于制定师依据必须要，及时收集制定反馈和建议，作用也不容小觑。
其次，注意微调
简约制定风格，一定程度上讲，就是制定师细节制定的优化和竞争，所以，一定要注意网页界面细节的微调，再微调。
然后，注意把握全局
注意细节的同时，也不要忘记整体网页或软件应用在色彩，主题以及功能等方面的全局统一性。太过独立的页面制定，关于软件或网页页面的连贯性，以及用户使用时的流畅性，非常不利。所以，制定过程中，注意把握全局进行制定，做到胸有成足。
最后，原型测试必不可少
无论制定师的制定如何新颖独特，抑或简约直观，如假设无法得到用户的认可，一切都只是纸上谈兵。所以，制定师在制定的同时，也必须要选择优质好用的原型工具(比如功能强大的Mockplus)，及时地将简约的网页制定转化成交互性原型，测试其实际效用和可行性。
例如Mockplus的强大组件库和样式库，关于制定师添加，收藏，复用和分享必须要的组或组件制定，功能庞大。而其超过3000个的矢量图标库，关于制定师添加和制定简约的图标，按钮和logo，也是非常方便。此外，其新增的团队和企业版本的团队管理和协作功能，关于提升简约网页制定的团队协作效率也是非常有用。
网页制定中文字排版制定的技巧
行长
我们随手拿起一本书或者一份报纸，数一数每行的文字，一般状况下都不会超过40个汉字。这是因为如果每行文字过长，读者会不停的转动脖子，感到疲惫的同时也会降低阅读效率;目光从行尾移至下一行首，也很容易串行，影响读者浏览文章的节奏。这点同样适用于网页上的文章阅读。由于显示器是横向的，我们更要注意划分阅读区域。文本宽度控制在450-700px为宜，此范围内参照字号大小;英文每行80-100个字母(空格算一个字母)为宜;中文每行30-40个汉字为宜。
行宽
我们可以想象一下：如果一行文字过长，视线移动距离长，很难让人注意到段落起点和终点，阅读比较困难;如果一行文字过短，眼睛要不停来回扫视，破坏阅读节奏。因此我们可以让内容区的每一行承载合适的字数，来提升易读性。传统图书排版每行最正确字符数是5575，实际在网页上每行字符7585更流行。中文在14号字体时，建议3545个文字。
间距
通过设置间距，我们就可以控制文字的密度。网页制定中，如果每行间距太小，与文字过长一样，读者浏览文章时也容易串行;如果行距过宽，阅读时就会感觉文章不够连贯。间距没有固定的值，通常是依据字体大小来定义的。在word里我们常看到双倍行距、单倍行距和1.5倍行距的选项。网页上行距的单位常用em来表示，不管是中文网站还是英文网站，大家多喜爱用1.5em-1.8em的行距。以1.6em的行距为例，字号16px的字，行距就是25.6px。
关于段距，我们要合计一下具体实际状况。比如文章篇幅较短，就不必须要很宽的段距;二文章篇幅很长，特别是那些偏学术的比较枯燥的文章，就要多利用段距把握文章的节奏，给阅读者喘息和思索的机会，且使文章更有层次和可读性。如(图)所示，1.5-1.8em的行距确实是非常适于阅读的文字密度。
另外，行高/段落之间的空白=0.754。行间距正好是段落间距的75%是非经常见的。比如简书16号字体，行间距27px/段间距36px=75%。文字字号本身比较大，所以行间距也不必须要严格按照11.5倍的比例设置，不过行间距和段间距的比例符合75%，看起来很不错，这样的视觉效果让人在阅读时坚持一种节奏感，这就是在实际状况中将规范的灵活应用。
行对齐
排版中很重要的一个规范就是把应该对其的地方对齐，比如每个段落行的位置对齐。
不管哪种视觉效果，精美的、正式的、有趣的还是严正的，一般都可以应用一种明确的对齐来达到目的。
通常状况下，建议在页面上只是用一种文本对齐，尽量避免两端对齐。
文字留白
在排版文字时，在版面必须要留出空余空间，留白面积从小到大应该遵循的顺序是：字间距、行间距、段间距。此外，在排版内容区之前，必须要依据页面实际状况给页面四周留出余白。
对齐
在网页制定中，元素在页面上不能随意摆放，每一项都应与页面内容存在某种联系。对齐可对齐是网页制定必不可少的部分，它可以帮助制定师做出吸引人的制定，是优秀网页制定的潜在要求。
亲密性
位置的接近意味着存在关联，亲密性是指将相关项组织在一起让它们从整体看看起来和谐统一。亲密性可以从两点入手：适当留白、以视觉重点特别层次感。比如以下案例中图文搭配，这是多个元素在一起的组合排版。

第 9 页 共 9 页