网页设计排版问题
如果想要一个良好的网页阅读体验，每行应该约60个字符，在每行上拥有适当的字符数量是您的文本可读性的关键，如果每行文字太短，视线*反复折回来，打破读者的节奏。下面介绍网页设计排版问题，希望这些内容对您有帮助。
1. 较少使用字体数量
使用超过 3 种不同的字体使网站看起来非结构化和不专业，太多的类型尺寸和样式一次也可能破坏任何布局。
一般来说，整个网站字体的数量限制在较多两种，一种一般就足够了。如果您使用多个字体，请确保字体系基于字符宽度互补。如图：左边组的字体相对就比较和谐，而右边字体的粗细对比太明显，则显得轻重比例很不和谐了。
2. 尝试使用标准字体
字体嵌入服务(如Google Web字体或Typekit)有许多有趣而标准的系统字体，而因为用户更加熟悉标准字体，所以可以更快地读取它们。
除非您的网站对于自定义字体(如品*宣传或创建身临其境的体验)非常有吸引力，否则通常较好使用系统字体。
3. 限制线长度
如果你想要一个良好的阅读体验，你应该每行约 60 个字符。在每行上拥有适当的字符数量是您的文本可读性的关键。如果每行文字太短，视线*反复折回来，打破读者的节奏。如果一行文字太长，用户的眼睛将很难专注于文本。
对于移动设备，您应该每行30- 40 个字符 。以下是在移动设备上查看的两个网站的示例。*一个使用每行50- 75 个字符(打印和桌面的每行较佳字符数)，而第二个使用较佳30- 40 个字符。
4. 选择各种尺寸的字体
确保您选择的字体在较小的屏幕上清晰可辨!
5. 使用可区分字母的字体
许多字体使得很容易混淆类似的字母，特别是与“i”和“L”(如下图所示)，所以当选择你的字体类型时，请确保在不同的上下文中检查你的类型，以确保不会为你的用户造成问题。
6. 避免英文全部大写
请勿强制用户阅读所有大写字母，与小写类型相比，那只会大大延缓了用户扫描和阅读的速度，让他们分分钟爆炸。
7. 不要较小化线间距
行间距一般是字符高度的30%，以便良好的可读性。
而段落之间的间距可以比行间距提高20%，留白可以为用户提供消化内容的时间。下图左：几乎重叠的文字。右：良好的间距有助于可读性。
8. 确保您有足够的颜色对比度
不要对文本和背景使用相同或相似的颜色。文本越明显，用户能够扫描和阅读的速度越快。
△ 这些文本行不符合颜色对比度建议，难以根据背景颜色进行阅读
△ 这些文本行符合颜色对比度建议，并且易于阅读背景颜色
9. 避免将文字着色为红色或绿色
建议使用除颜色以外的其他线索来区分重要信息。也避免单独使用红色和绿色来传达信息，避免有色盲用户无法顺利阅读的情况。
10. 避免使用闪烁的文字
闪烁或闪烁的内容可能会使一些敏感人群发疯，并且对于一般使用者来说，这可能是令人讨厌或分心的。
结论
使排版具有可读性，可理解性、清晰明了至关重要。至关重要。好的排版可以让您的网站感觉清爽而令人眼前一亮。另一方面，糟糕的排版选择令人分心。排版是为了内容更好的呈现，应以不会增加用户认知负荷的方式来尊重内容。
网页设计排版中哪些元素较重要
1.文字
虽然有时候可能一个页面的文字没有几个，但你可千万别小瞧文字的作用。字体的选择，字体的大小、间距以及多种字体如何自然地搭配都是决定你设计的关键因素。在同一个页面有限的文字区域内你所用到的字体样式不止一种，甚至会有三四种，这是为了打破单一字体给用户带来的单调感。字体的搭配是将两种或更多字体通过合理的排版达到较佳效果的过程。对于很多初学者来说，他们觉得选择只用选择漂亮字体就够了，事实上，选择漂亮的字体并不难，如何让它们地搭配在一起，相得益彰，这才是应该好好下功夫的地方。
2.图片
图片可以说是一个网站的核心了，许多设计师都会把大量的精力放在图片设计上，因为很多用户在浏览网页的时候停留的时间不会太久，更不会花太多时间阅读你的内容。这个时候，一张好看的图片就能够有效地抓住用户的眼球。大家所熟知的苹果公司官网大部分都是这样的套路，直接将产品的图片呈现在大家面前，没有过多的赘述，反而会让用户觉得简洁明了。
3.交互
交互设计在网页设计中有着相当好的势头，那么在设计交互的时候，必定会涉及到许多的页面、组件。由于这么多的组件元素要排列在同一个页面上，要考虑的情况也就多了许多。在做交互设计之前，你*站在用户的角度考虑，菜单导航应该在哪个地方较清晰可见?组件应该通过什么样的方式展现用户才会觉得方便?组件和组件之间要怎样排布才会不影响用户的视觉效果?这就要求网页设计师有一个流畅的原型设计过程，通过借助一些原型设计工具(Axure，Mockplus, Justinmind等)来设计出合理、带来良好用户体验的交互设计。
4.视频和动画
如果一个网页只有文字和图片这样静态的元素，难免少了一些生气。现如今，视频和动画的制作成本很低，网络传播性强，与社交媒体网站的兼容性好，甚至在一定程度上，视频和动画传播的有效信息比文本还要多。于是，在网页设计排版中，视频和动画也会被设计师们加入其中。但要注意的是，视频或者和动画设计在同一个版面上不能出现太多，较好一到两处就可以，否则会让用户感到眼花缭乱，甚至它们会喧宾夺主，导致顾客找不到你产品的重点。
网页设计中文字排版设计的技巧
行长
我们随手拿起一本书或者一份报纸，数一数每行的文字，一般情况下都不会超过40个汉字。这是因为如果每行文字过长，读者会不停的转动脖子，感到疲惫的同时也会降低阅读效率;目光从行尾移至下一行首，也很容易串行，影响读者浏览文章的节奏。这点同样适用于网页上的文章阅读。由于显示器是横向的，我们更要注意划分阅读区域。文本宽度控制在450-700px为宜，此范围内参照字号大小;英文每行80-100个字母(空格算一个字母)为宜;中文每行30-40个汉字为宜。
行宽
我们可以想象一下：如果一行文字过长，视线移动距离长，很难让人注意到段落起点和终点，阅读比较困难;如果一行文字过短，眼睛要不停来回扫视，破坏阅读节奏。因此我们可以让内容区的每一行承载合适的字数，来提高易读性。传统图书排版每行较佳字符数是55—75，实际在网页上每行字符75—85更流行。中文在14号字体时，建议35—45个文字。
间距
通过设置间距，我们就可以控制文字的密度。网页设计中，如果每行间距太小，与文字过长一样，读者浏览文章时也容易串行;如果行距过宽，阅读时就会感觉文章不够连贯。间距没有固定的值，通常是根据字体大小来定义的。在word里我们常看到双倍行距、单倍行距和1.5倍行距的选项。网页上行距的单位常用em来表示，不管是中文网站还是英文网站，大家多喜欢用1.5em-1.8em的行距。以1.6em的行距为例，字号16px的字，行距就是25.6px。
关于段距，我们要考虑一下具体实际情况。比如文章篇幅较短，就不需要很宽的段距;二文章篇幅很长，特别是那些偏学术的比较枯燥的文章，就要多利用段距把握文章的节奏，给阅读者喘息和思考的机会，且使文章更有层次和可读性。如(图)所示，1.5-1.8em的行距的确是非常适于阅读的文字密度。
另外，行高/段落之间的空白=0.754。行间距正好是段落间距的**是非常常见的。比如简书16号字体，行间距27px/段间距36px=**。文字字号本身比较大，所以行间距也不需要严格按照1—1.5倍的比例设置，*行间距和段间距的比例符合**，看起来很不错，这样的视觉效果让人在阅读时保持一种节奏感，这就是在实际情况中将规范的灵活应用。
行对齐
排版中很重要的一个规范就是把应该对其的地方对齐，比如每个段落行的位置对齐。
不论哪种视觉效果，精美的、正式的、有趣的还是严肃的，一般都可以应用一种明确的对齐来达到目的。
通常情况下，建议在页面上只是用一种文本对齐，尽量避免两端对齐。
文字留白
在排版文字时，在版面需要留出空余空间，留白面积从小到大应该遵循的顺序是：字间距、行间距、段间距。此外，在排版内容区之前，需要根据页面实际情况给页面四周留出余白。
对齐
在网页设计中，元素在页面上不能随意摆放，每一项都应与页面内容存在某种联系。对齐可对齐是网页设计必不可少的部分，它可以帮助设计师做出吸引人的设计，是网页设计的潜在要求。
亲密性
位置的接近意味着存在关联，亲密性是指将相关项组织在一起让它们从整体看看起来和谐统一。亲密性可以从两点入手：适当留白、以视觉重点突出层次感。比如以下案例中图文搭配，这是多个元素在一起的组合排版。
网页设计中常见的可用性错误
链接未突出显示
我经常发现某些网页的链接没有以这样或那样的形式突出显示，这让我的浏览体验很不顺畅，这可能也是我见过的较愚蠢的错误了。相比那些链接和普通文字使用同一颜色的，我更加愿意访问链接设置成突出蓝色的网站。因为这样的网站更显友好，用户需要知道如何前往不同的页面或在哪儿能点击链接。你不能指望访客使用鼠标一行行浏览所有文字去寻找"隐藏的"链接，不是所有访客都有足够的时间和耐心的。我也完全能够理解，有时候出于设计考虑(如保持协调一致等)，链接不能使用某种颜色来突出显示，否则它们会显得太过突兀。但在这种情况下，我们可以添加文字样式或虚线框。不管使用什么样的形式，只要能够起到强调链接的作用就够了。
访问过的链接也应当以不同的方式来显示，以区别于默认的链接颜色。这样的设置可以让用户知道他们已经浏览过哪些页面，从而确定下一步前往哪个页面。有些网站可能页面、链接比较多，不少访客在访问时会感到困惑，这时将访问过和未访问的链接区别开来，能够让他们对网站更有好感，提升网站的可用性。
排版糟糕
排版并不总是与突出的标题或美观的文本区块联系在一起的。 当我们谈到排版在网站的可用性上的作用时，我们更加注重排版如何使网站内容更易于阅读。通常，紧密排列的大段文字只会使访客感到非常头疼，*这对设计师来说简直是小菜一碟。因为设计师只需简单的增加行高，分段，增加文字大小，改变字体，就能够使整段文字焕然一新了。在网页设计中，如何搭配字体的或如何使用颜色触动访客的心理情绪并没有那么重要(当然，如果你会更好)。我强调这一点是因为在过去的几年中，我们总是错误的让网站的美感凌驾于网站的功能性之上，网站的排版很糟糕，各种内容和信息也无法有效的展示出来。其实网站较重要的特性在于它的可用性，有时候它不需要那么好看，能够正常工作就好。
让我来进一步解释一下，目前网站设计中较新涌现出的两股设计思潮，极简主义和扁平化设计，都聚焦于网站内容的良好呈现，而不是更加绚丽的背景图。它们变得越来越流行的原因就在于他们非常简单,而且性能良好。有时候真的很难相信如此简单的一个网站就能获得这么巨大的成功。访客进入网站, 获取自己想要的信息，然后退出离开, 没有任何其他元素会使他们分心, 没有Flash, 没有减慢网站加载速度的Javascript, 没有绚丽的背景图, 仅仅是内容而已。现在, 你应该明白了让内容变得易于访问是多么的重要了吧! 因此在设计网站时不要在*一时间花费太多的精力去思考该如何让网站变得多漂亮，而是应该注重网站的可用性，而合理的网页排版在这方面发挥着很重要的作用。
不参照惯例
参照设计惯例和一些关于网站可用性的建议是非常重要的。毕竟，这些惯例都是经过实践检验的，那些可用性的建议都是精心提炼出来的。也许它们并不能适应你的网站，但至少其中的大部分内容可以增加一定的访客量，让你和其他网站站在同一条起跑线上。
举一个例子来说。有这么一个网站，在导航菜单栏上放置了一个选项用来退出。大部分网站的导航菜单都不会放置这样的按钮，这个网站的设计就违反了惯例，它也无法起到什么实质性的帮助。 *近几年这种情况不多，但还是存在一些不该出现的低级错误，比如：导航链接失效，或者点击链接的时候弹出了对话框。记得遵循一定的设计惯例。
未回答核心内容
访客在浏览网页时都是目的性的：娱乐一下、查找信息、又或是其他目的。不管是什么，这总有一个目标的存在。而绝大多数情况下访客浏览网站就是为了获得一些信息，比如，他们去谷歌上搜索信息，去维基百科上学习知识又或是浏览公司网站了解某种产品。
而不少网站就出现了没有核心内容的情况。这种问题在我身上已经发生n次了. 我能理解一些网站不将价格明确展示出来，因为产品的变量太多了。可是如果一个发廊不告诉我理发需要多少钱, 一家洗车公司的网站上不告诉我洗车多少钱，那我浏览网站的意义何在，我始终在这些网站上没有获得自己想要的答案，这只会让我对那些网站的印象变得更差。
因此，站长要尽量了解自己的目标群体，了解访客可能想要在网站上浏览的内容。如果有人想去下载博客主题, 那就引导他们到下载区域, 如果他们是为了玩游戏而来, 那就尽量多放些游戏在上面, 如果他们是来了解产品价格或者你所能提供的服务的, 那就突出强调它们。记住，一个网站就是为访客而建的，它的**目的就是满足访客的需求。
小块可点击区域
自从我买了台Mac后，我就再也没用鼠标了，因为对我来说再没有什么需要用到鼠标的地方了。我还记得五年前，那是还在使用PC，鼠标并不总是很精确，而且在悬停于小块区域的时候定位比较困难。 现在我再也没有这个问题了，和我一样，大约有数以亿计的用户都在使用触屏和移动设备。小块可点击区域有时候令人觉得不舒服。你或许想让字体显得小一点，因为你相信这样看起来很漂亮，但你要考虑到它对可用性的影响。可点击的区域越小，访客在点击时的困难就越大。而且随着网站越趋向移动化，布局需要适应更小的屏幕的背后意味着可点击区域应该在便携式设备上变得更大，好让它们容易被点击。同样的策略也适用于桌面环境。新的扁平化用户界面的风潮是这个理念的助力者。在PC端享受到又大又清晰的点击区域，访客也会觉得更加轻松。
缺少联系信息
有一件事比糟糕的用户服务更让人觉得恼怒，那就是无法联系到该公司或事务的负责人，这个问题很多情况下都是由于缺少联系信息造成的。正如我们之前讨论的，访客总是带着目的来浏览网页。如果他们的目的就是跟你取得联系，你的网站上却没有联系信息，这样一来网站对他们来说就毫无意义了。一个网站缺少联系信息没有任何借口，也许你会说不想将自己的手机号码公之于众，那么你可以留下自己的email地址。你也可以选择使用Twitter或者Facebook地址，这些方法都可以，只要能给客户提供一种可以联系到你的方式。
更多培训课程，学习资讯，课程优惠等学校信息，请进入 赣州天琥设计培训学校 网站详细了解，免费咨询电话：400-998-6158
