2024年网页设计的适合排版宽度 篇1
在网页设计中，文字排版为什么对于网站和用户之间建立良好的沟通以及帮助用户实现目标起着重要的作用的10点建议。
在网页设计中，文字排版对于网站和用户之间建立良好的沟通以及帮助用户实现目标起着重要的作用。当我们谈论网页是否能和用户建立有效的沟通的时候，通常是指文字排版在这里起到的作用：
“网页中95％以上的信息是以文字形式呈现的。”
良好的排版使用户更易于阅读，而混乱的排版则使用户失去继续浏览的意愿。正如“Oliver ReichensReichenstein在他的文章“Web Design is 95% Typography ”中写道：“排版的目的是优化可读性，访问率，可用性，保持和图形的平衡关系”
换言之，优化排版也在帮助您优化界面。本文中，我们提供一组规则，将帮助您提高文本内容的可读性和易读性。
1.不要使用过多的字体
网站排版中建议最多不要超过3种字体类型，不然会使网站看起来松散和不专业，不仅太多的字体类型会造成这种问题，太多的字体尺寸也会破坏网页布局。
通常情况下，将字体家族的数量限制在最小数量（2个是很多，1个通常就够了），整个网站坚持使用相同的原则。如果使用多个字体，请确保俩个字体是否和谐。以下面的字体组合为例，Georgia和Verdana的搭配相得益彰，相对比较和谐。相比于右边Baskerville和Impact则会有明显的冲突感，非衬线Impact明显的超过了Baskerville的视觉冲击力。
而在中英文排版中，建议大家中文使用标准中文字体，而英文、数字和字符使用标准的英文字体。以下面的图为例，是否可以对比处那个美观一些。
2.尽量使用标准字体
在Google Web Font或者Typekit，和国内的“有字库”的字体嵌入式服务有很多有趣的字体，对于国内设计师来说，痛苦的是中文字体会很大，一个字体动则几兆，十几兆的，这样用户在会增加用户浏览网站的载入时间；反之英文字体26个字母大小写，加数字标点符号一共几百k的字体是很容易在网页中使用的。
尽可能选择标准字体（近几年网页中通常使用思源黑体，PingFang，英文可以使用Arial，Calibri或者其他常见的易于屏幕阅读的黑体字，如没有特殊概念指导尽可能避免使用衬线字体，如宋体）
不是每位用户都可以在终端上看到同一个字体，意味着你选择的适合的字体，用户有可能看不到。
用户更熟悉标准字体，因此他们可以更快的阅读
特殊的、并且少量的字体可以制作成.svg格式的素材嵌入Web使用
良好的排版会使用户更加关注内容本身，而不是字体的类型。
3.限制一行文字的长度
保证每一行文字的字符数量是文本可读的关键。不是设计师来定义文本的宽度，而是根据用户的可读性来定义。
太宽-会使得单行文字太长，读者的眼睛会难于专注文字。因为长时间阅读容易串行，大段的文本中很难找到正确的行。
太短-会使得用户的眼睛经常回到下一行文本，会打破读者的阅读节奏，长时间阅读造成视觉疲劳。太短也会倾向于向读者发出一种信号，使得读者没有读完当前这行就去跳到下一行阅读，可能会忽略潜在的重要词句。
以Google和百度为例，我们不难看出这点
对于移动设备，应该每行30-40个字符（半角），具体显示多少个字数，与不同分辨率的屏幕、文本宽度和字体大小都会有关系，设计的原则是：保证用户可以流畅的阅读文本，文字不宜太小或太大。以iOS（手机）为例，正文文本最小字号不能小于24px，太小了用户阅读会难以阅读。以百度为例，可作为参考。
4.选择用有多个字重并显示良好的字体
用户将通过不同屏幕分辨率的终端设备访问你的网站，大多数用户界面需要各种大小尺寸的文本（标题、副标题、文本、标注等等）。选择一款能够在不同屏幕分辨率的设备上运行良好的字体以保证它的不同尺寸的字体都具有极高可读性(Readability)和可用性(Usability)也是非常重要的。
近俩年备受大家欢迎的思源黑体和PingFang字体都是不错的选择，当然，个人认为汉仪旗黑无论从家族字体的数量、字体质量、屏幕显示、纸媒印刷上来说都不逊色于前面俩款字体。参与过这款字体设计的设计师曾说过，思源黑体还是相对比较粗糙的一款字体。
同样，为了保证在屏幕上清晰可辨，尽量避免使用衬线体，尽管他们很漂亮。
5.使用识别度高的字体
在选择英文体的时候，有些字体的个别字母极易混淆，特别是“i”和“L”（如下图所示）；以及文字之间的间距。许多中文字体在使用较小字体的时候笔画会粘到一起(上图），不容易辨别；所以在选择字体类型的时候，请检查你选择使用的字体，确保不会为用户和产品造成不必要的损失。
6.避免在界面中大段的使用大写字母
不要所有文本使用大写字母，强制用户阅读大写字母，首字母大写，具有特殊含义的缩写等情况除外，与小写字母相比，大量的使用大写字母会严重降低用户的阅读效率和愉悦感。
7.将行间距控制在字体的1.5-2倍之间
在文字文字排版中，我们又一个特殊的术语，用于表示行与行之间的距离：行间距（或行高）。为了保证文本的可读性和易读性，使文本形成线性的阅读感受，将行间距控制在字体大小的1.5-2倍之间（中文字体）。英文字体推荐使用默认行间距，或根据默认行间距微调。
8.适当的颜色对比度
通常情况下，文本和背景尽量避免使用相同或相似的颜色。文本越明显，用户能够扫描和阅读的速度越快。当然，学会通过文本颜色、大小和背景的颜色关系来控制视觉层级也是必要的。
与背景相比，小文本和背景的对比度至少为4.5:1
大文本（14px/18px以上）应该保持与背景3:1以上的对比度
灰色通常作为辅助色使用，根据之前的项目经验，给大家分享一套我自己一直在使用的灰色，灰的有层次，清晰的区分信息层级是必要的
9.避免将文字着色为红色或绿色
色盲和色弱是我必须要照顾到的一部分用户，特别是在男性中（8％的男性是色盲）建议使用处颜色以外的其他方式来区分重要的信息（如下划线，加粗等）。避免使用红色和绿色单独传达信息。因为红绿色盲是最常见的色盲形式。（现在想想，那些因为红绿色盲而考不了驾照的童鞋是不是要分分钟恨死制定红绿灯规则的人，当然这只是个笑话，使用红绿灯是因为光学在物理传播方面的原因，这里不解释）
虽然在日常生活中我们总是用这种方式告知用户绿色是表示正确的操作，红色表示错误的操作，反思一下我们是否有去考虑色盲用户的操作和体验。或许我们是不是可以考虑换一个方式去表达正确或错误？
10.避免文字闪烁
闪烁的文字或内容可能会让某些用户感到不适，对于一般用户而言，这可能分散他们的注意力或者使他们感到烦躁。
虽然在网页设计中依然有很多需要我们注意的地方，最后，分享给大家一个想法就是：网页设计中排版很重要。做出正确的排版可以让你的网站感觉清爽，糟糕的网页排版会令用户分心，倾向于关注自己的感受而非内容。排版的关键在于使信息层级清晰、用户易于阅读、并且保证文字是可读的。文字的排版不应该增加用户的认知符合，以求达到尊重内容、尊重用户的目的。
2024年网页设计的适合排版宽度 篇2
1.尽量使用少的字体
使用超过 3 种不同的字体会使网站看起来缺乏结构化和不专业。 注意，较多的字体样式使用一次都可能破坏所有布局。
为了防止这样的情况，尝试将字体数量减少 ，一般来说，将字体数量限制在最小限度（两个算多的，一个是正好的）。 如果你使用一个以上的字体，确保字体具有系列感，且基于其字符宽度是相得益彰。
2.尝试使用标准字体
为什么？
1）不是每个人开启浏览器都可以访问到同一种字体，这意味因为您选择的用户体验较好的字体将无法展示在所有用户面前。
2）用户更熟悉标准字体，因此可以更快地读取它们想要的信息。 除非您的网站有足够吸引人的自定义字体（如品牌宣传或创建身临其境的体验），否则最好使用系统字体。
3.限制文本线长度
每行放置适当的字符数量是文本可读性的关键，它不仅是你的设计，决定你的文本的宽度，它也应该是一个可读性的问题。
如果一行文本太短，眼睛必须经常转回，打破读者的节奏。 如果一行文本太长，用户的眼睛也难长期专注于单行文本。
对于移动设备，基本保持每行30- 40 个字符。
文：事了了candy
如果您有网站建设相关需求，可以在下方留言。
2024年网页设计的适合排版宽度 篇3
网页设计与平面设计都是出于艺术设计，虽然核心的东西差不多，但是网站设计和平面设计还是有很多不同的地方，那么我们网页设计与平面设计的区别在哪?
一、在于视觉的呈现
两个设计在色彩方面的选择都是不一样的，平面和网页的设计时用的色彩模式都是不同的，平面页设计在创意是运用的色彩在其注重视觉的冲击力及视觉流的引导，网页设计注重的是信息结构，简洁明了关系的梳理，如果将色彩运用的过重过多过强，这样会很容易引起用户浏览时的视觉疲劳感。平面设计因为后期的实现是因为要依赖于印刷，才能展现在用户体验的视觉中，所以必须采用的是CMYK的色彩模式;而网页设计是根据其显像方式，在互联网上展示出真实的视觉，所以使用的是RGB色彩模式。
二、在于展现的形式
平面设计的的展示方式是静止状态的，而网页设计是拥有许多动态的元素，包括按钮、表单、导航等等。在视觉上也较为丰富，没那么死板，这样才能够引导用户有继续看下去的可能性，增加用户的互动性。
三、在于视觉的焦点
平面设计的完整性较强，用户在一页内基本上可获得相对直观的感受。而网页设计受制于显示屏大小，会尽可能将重要信息在第一屏内予以展示，因此完整性相对较弱。
四、在于排版的设计
在内容传播上，平面设计仅限于纸质媒介，传播力度小，因此在内容排版上的灵活性受限于纸质印刷尺寸的大小。而网站设计则可以灵活出现于各种电子产品载体当中，如桌面显示屏，智能手机、平板电脑等。而且随着互联网科技的发展，自适应页面技术日趋成熟，同样的内容，在不同尺寸的浏览器下都可以获得最佳的排版效果，加强了网页内容排版的灵活性。
五
、在于浏览的方式
平面设计的属于渐进式的浏览方式，无法对整个浏览的过程进行多样化串联，网页设计拥有滚动条下拉、按钮链接跳转等多样化的浏览信息方式，在拥有同样一种信息架构的条件下，信息之间的串联性更为丰富，用户选择信息的自由度更大。
这里主要介绍了网页设计与平面设计的技术性差异。从设计范畴来说，网页设计接近于平面设计，甚至说，网页设计是平面设计的一种也不为过，但是网页设计确实有其独特性，比如网页设计的设计空间、设计模式，与平面设计就有很大的不同。
这两种设计形式拥有着不同的用户体验，我们应该根据不同设计内容，选择正确的设计形式提升用户体验。
2024年网页设计的适合排版宽度 篇4
您好！很高兴回答您的问题！
一、平面
平面设计是这三种设计里最“古老”的专业了，可以说平面设计是一切设计的鼻祖，学任何设计都绕不开它。因为所有的设计理论比如配色，排版，字体等都是平面的基础也是设计的基础。同时平面设计也是比较复杂的，因为除了要了解基本的设计技巧以外也要了解材质，工艺等，不同的工艺和材质出来的效果也是千差万别，甚至在预算上都会差出好几个层级。
1.1载体
平面的载体在三类专业中算是比较多的，最常见的就是纸了，当然纸也分为了很多种，最常用的是铜版纸。铜版纸又根据克数的不同用途也有所区别。用到纸质的设计有画册，单折页，海报，杂志，名片等。这里关于名片多说一句，很多人说名片那么小的尺寸，如何才能有设计感？加的内容和装饰多了会显着很乱很拥挤，加的内容少了又给人的感觉没有设计感，这个问题如何解决呢？最简单的方法就是简约的设计+高档的纸+恰当的印刷工艺。不过这里所说的名片是比较高档的名片了，在公司里也是处于中高管理层的，一般的业务员因为分发的名片量比较大，所以就用最普通的纸就可以了，控制成本。
平面设计中还会用到的载体是喷绘和灯箱片用到的一种类似塑料的材质。此类材质的设计手法与其他设计无异，关于此类材质多说一句就是设计时的分辨率设置。一提到平面设计的分辨率很多人的第一反应就是300，这是个绝对的误区，其实在平面中也会用到150，72，甚至30。那这是如何划分的呢？最简单的一种解释方式就是阅读距离。一般捧在手上看的设计分辨率为300，比如杂志／单折页／画册等，因为阅读距离很近，如果分辨率比较低，会出现很明显的不清楚情况。
再有海报的设计一般是挂在墙上的，我们阅读时是有一些距离的，所以分辨率设置为150到200即可，很多人会问设计成300可不可以？当然可以，但有几个前提，首先你能找到那么大尺寸同时是300分辨率的素材图片，再有就是你的电脑是不是都能够带起来这么大尺寸同时分辨率又很高的文件，还是建议大家不要尝试了，结果一般比较惨。
再有还有72和30的分辨率，此类分辨率会用在阅读距离更远的设计上，比如马路上的大型围挡，商场大厦外面的五六层楼高的大型海报。
最后要提的一个材质是最近几年流行起来用的比较多的就是电子屏，在商场大厅，电梯墙壁，写字楼前台等地方现在都会用到电子屏来展示一些海报／通知／活动等。此类材质的好处就是更新内容方便，节省印刷成本，最重要的是没有印刷后果。印刷的风险比较大，因为印刷不可逆，印刷出来后出现了问题，基本没有补救的措施，而电子屏则没有这个风险。当然它的缺点就是没有很强的流通性，一般只能在固定的一个地方进行展示。
1.2用途
平面设计包含的品类是比较多，常见的画册／海报／单折页／名片／书籍装帧甚至包装等传统设计基本都是平面设计师的工作。除了这些印刷品以外还有logo设计，VI设计等工作。平面设计的品类就是比较多，所以想做一个优秀的平面设计师没有个几年的历练是很难达到的，这也是最初平面设计师转UI设计师和电商设计师比较容易比较多而网页转平面不容易的原因所在了。
平面设计师设计出来的内容很多，刚才提到了logo，VI我们统一称为品牌设计。画册，海报，包装我们统一称之为物料设计。两类设计统一归放到平面的名下一定是有原因的，品牌设计是用来宣传企业品牌的，规范企业的设计视觉，统一企业的宣传口径。
画册，海报，包装等物料是用宣传企业产品的，使自己的产品在原有的基础上更具商业价值。最具代表性的就是包装，我们经常会看到很多普普通通的产品包裹上漂亮的包装后，价格就会成倍的增长。所以不管是品牌也好还是物料也好都是用来做“宣传”的。这也是平面设计师最鲜明的特点，设计出来的东西用来做宣传。这个东西本身并不是产品，也不具备什么商业交易价值，都是为了公司为了产品服务的。
1.3技能
因为平面设计师需要做的内容涵盖的比较多，所以对于技能方面的要求也比较全面。比如除了最基本的PS／AI／ID等设计软件以外，还有了解到排版印刷工艺，材质使用，字体设计等。如果各位将来是做平面设计的话，印刷材质是关键，就像刚才说名片时提到的，同样的设计，如果材质不同给人的感觉也是完全不一样的。所以这一块除了看书学习以外，更直接的方式就是泡在印刷厂里，跟着老师傅走几遍流程，学到的东西会受益匪浅的。
二、网页设计
网页设计在现在的工作中又分成了两个工种，一种就是常规的网页设计师，设计企业的官网，或者是一些具备功能性的网站。另一种是电商设计师，在五年前，这个工种依然不被人看重，即便是现在也有很多电商企业称自己家的设计师为美工，这也就造成了很多设计师会不愿意来做电商设计，更不想承认自己是美工。但实际上做的好的电商设计师工资也是非常可观的，尤其是在一些大型的店铺，此类店铺的视觉自然也是能够在圈里数一数二的了。
2.1载体
网页的载体比较单一，在之前就主要是在PC端运用，后来移动互联网的流行与普及，使得网页在手机上也流行起来，还有平板等。为了保证能够多端正常显示，在html5和css3的帮助下流行开的一个名词叫着“响应式设计”，也就是使我们的网页能够在任何平台上都正常显示。
2.2用途
刚才我们说平面设计时提到了一个名词就是“宣传”。如果给网页也用一个名词概括的话，我觉着就是“载体”。没错，网页本身就是载体，企业站乘载了公司的产品信息，企业文化，品牌宣传等，是普通人了解一家企业的最基础入口。而类似于天猫淘宝此类的功能性网站，也是将网页作为了一个平台一个载体，来进行产品的销售的。网页本身是一个“容器”，里面“装”的内容决定了一个网页的价值。
2.3技能
在说平面时我提到了平面设计师转网页设计师是比较好转的，因为网页设计师同样需要具备对于色彩，排版和字体的敏感度。软件除了要会PS和AI以外还要需要了解Html和Dw。这里一定要跟大家强调的是网页视觉设计师不用对代码有非常深入的研究，因为在一家健康的运行公司里网页视觉设计师和前端工程师是两个工种。对于代码的态度是了解基础即可，深入了解如虎添翼。如果是做电商设计的话，从现在的趋势和2016年双十一的店铺设计来看最近一年是3D轻质感的天下，所以有心的设计师一定要会一款3D软件，市面上很多，3D MAX／MAYA／C4D等，给大家推荐的是C4D，出效果易上手。
三、总结
设计这个行业是一个充满了很多无奈的地方，表面光鲜，后面因为客户、资金、想法等所经历的坎坷只有自己体验了才知道。之前说过一句话，如果是因为看到了这个行业挣钱就来这里做的话，可以，没有问题。但是如果你很难使自己喜欢上设计的话，那还是奉劝各位需要慎重啊。因为如果不是真心喜欢的话，挣在再多钱也很难坚持下来，半途而废虎头蛇尾的事在这行里很常见的。
最后我一直跟人分享的一句话就是师父领进门 ，修行在个人。作为设计师你需要了解的是这个世界上最新的东西，紧跟时代，任何新东西的产生没有设计师是出不来的。所以无论是科班出身还是专业培训，一直都要做的就是自学。不要想着通过喷几句大品牌的设计来凸显自己的逼格更高，你自己的专业度和审美是无法和苹果几百人的团队来比拼的。喷Instagram的图标丑的都是没有用过的人。有心的人能谦虚的去看比自己优秀的作品，找出好处加以学习使自己进步。
最后说一句设计这个行业对于学历没有特别的门槛，你可以没有学历，但不能停止学习。