网页设计的排版的技巧

网页设计的排版的技巧

以下就是网页设计的排版的技巧等等的介绍,希望为您带来帮助。

网页设计的排版的技巧

1. 减少不同类型字体的使用

使用超过3种不同的字体让网站看起来没有结构且不专业。记住,太多的尺寸类型和风格也可能破坏任何布局。

为了防止这种情况,尝试将字体数量限制在最小限度。

一般来说,将字体数量限制在最小限度(两个很充足,通常一个就足够了),并粘贴相同的字体到整个网站。如果使用多个字体,请确保字体系基于字符宽度互相补充。以下面的字体组合为例。Georgia和Verdana(左)的组合具有相似的价值,配对的很和谐。比较与Baskerville和Impact(右)的配对,其中大大加重的Impact使与其对应的衬线字体没有光彩。

确保字体系基于字符宽度互相补充。

2. 使用标准字体

字体的嵌入服务(如Google Web Fonts或Typekit))可以为你的设计提供新鲜的和意想不到的许多有趣的字体。它们也非常容易使用。以Google为例:

选择任何字体,如Open Sans

在HTML文档的中生成代码并粘贴。

完成!

实际上,这种方法有一个很严重的问题:因为用户更熟悉标准字体,因此可以更快地读取它们。

除非你的网站对于自定义字体(如对品牌宣传或创建沉浸式体验)非常有吸引力,否则通常最好使用系统字体。最安全的方法是用一个系统的字体:Arial,Calibri,Trebuchet等。记住,好的排版可以吸引读者到内容中去,而不是排版本身。

3. 限制行的长度

每行拥有适当的字符数量是让文本具有可读性的关键。它不是你的设计,决定你的文本的宽度,它应该是一个可读性的问题。考虑Baymard Institute关于可读性和行的长度的建议:

“如果你想有一个好的阅读体验,应该每行约60个字符。每行拥有适当的字符数量是让你的文本具有可读性的关键。”

如果行太短,视线必须经常返回,这就会打破读者的节奏。如果一行文字太长,用户的视线将很难专注于文本。

对于移动设备,应该每行30-40个字符。以下是在移动设备上查看的两个网站的示例。第一个是使用每行50-75个字符(打印和桌面的每行最佳字符数),而第二个使是用最佳的30-40个字符。

在网页设计中,可以通过使用em或像素限制文本的宽度来实现每行最佳数量的字符。

4. 选择一个能在各种尺寸中工作的字体

用户会从具有不同屏幕尺寸和分辨率的设备访问你的网站。大多数用户界面需要各种大小的文本元素(按钮复制,字段标签,章节标题等)。选择一个能够在多种尺寸和重量上运行良好的字体以保持每个尺寸的可读性和可用性是非常重要。

Google的Roboto字体

确保你说选择的字体在较小的屏幕上清晰可辨!尝试避免使用草书的字体,例如Vivaldi(在下面的示例中):虽然它们很漂亮,但它们很难阅读。

Vivaldi字体很难以在小屏幕上阅读。

5. 使用可区分字母的字体

许多字体让相似的字形很容易混淆,特别是与“i”和“L”(如下图所示)以及在字母间距较小的空间中,例如当“r”和“n”看起来像“M”。因此,在选择你的排版时,请务必在不同的文本环境中检查你的排版,以确保不会为用户造成问题。

6. 避免所有的大写

所有大写字母:意思是文本中的所有大写字母,在不涉及阅读的上下文中很好(如首字母缩略词或标识),但是当你的信息涉及阅读时,不要强制用户阅读所有大写文字。正如Miles Tinker所说,在他的具有里程碑意义的作品中,可读性的印刷,全部大写印刷与小写排版相比,大大地延缓了用户的阅读速度。

7. 行间距的重要性

在排版中,我们有一个特殊术语,用于两行文本之间的间距(或行高)。通过增加行高,可以增加文本行之间的垂直空白空间,通常提高可读性以换取屏幕空间。作为一个规则,行高应该是字符高度的30%,以提高可读性。

好的间距有助于可读性。

正如Dmitry Fadeyev所指出的那样,正确地使用段落之间的空白已被证明可以将理解提高20%。使用空白的技能在于为用户提供可消化量的内容,然后剥离无关紧要的细节。

8. 确保你有足够的颜色对比度

不要在文本和背景中使用相同或相似的颜色。文本越明显,用户就能更快地扫描和阅读它。 W3C建议对身体文字和图像文字的对比度如下:

与其背景相比,小写文字的对比度应至少为4.5:1。

大文字(14pt/ 常规18pt及以上)的背景对比度应至少为3:1。

一旦你选择了颜色,必须要在大多数设备上与真实用户进行测试。如果测试显示阅读副本有问题,那就可以确定你的用户具有完全相同的问题。

9. 避免文本为红色或绿色

色盲是一种常见的情况,特别是在男性中(8%的男性是色盲),建议使用除这些颜色以外的其他颜色来区分重要信息。也避免单独使用红色和绿色来传达信息,因为红色和绿色色盲是最常见的色盲形式。

10. 避免使用闪烁的文字

闪烁的内容可能会引发敏感个体的癫痫发作。它不仅可以引起癫痫发作,而且对于一般用户来说,这是令人讨厌且使人分心。

结论

排版是一件重要的事情。做出正确的排版选择可以让你的网站看上去更优雅。另一方面,糟糕的排版选择会让人分心,往往会引起对排版的注意。让排版具有可读性,可理解性和清晰度是至关重要。

网页设计的色彩应用技巧

一、黑白灰的搭配技巧

色彩分有彩色和无彩色。黑白灰属于无彩色,其它的色彩都属于彩色。色相,明度和纯度,是色彩的三要素,而无彩色只有明度属性。黑白灰是万能色,当两种色彩的搭配不协调时,加入黑或灰色,会有意想不到的效果。很多网站色彩设计留出大块的白色空间,这种设计成为“留白艺术”。这种留白设计能让人感觉心情放松,有无限遐想。白色也是网页设计中最普遍的一种色彩设计。

二、色彩三要素的应用技巧

1.色相色相,指色彩的相貌,色彩最显著的特征,是色彩之间的主要区。比如红色,黄色,蓝色等各自代表不同的色相。同一色相的色彩,调整明度或纯度比较容易搭配,比如深红,大红,粉红,紫红。某种色彩并不一定代表了固定的某种含义,是在具体情景下具有恰当的含义;在特定的场合下,同种色彩也可以表现出不同的含义。

2.明度明度,指的是色彩的明暗程度,也称作亮度,色彩越亮明度就越高。比如一些儿童类、购物类网站。多是一些鲜艳明亮的色彩设计,让人感觉生气勃勃,欢快绚丽。明度越低,颜色越暗。一些游戏类网站的暗色调设计,充满了神秘感;运用一些暗色调的设计能够充分表达个人的孤僻或忧郁等性格。有明度差大的色彩比较容易调和。

3.纯度纯度,指色彩的鲜艳程度,原色纯度最高,调和其他颜色越多,色彩纯度越低。纯度低的色彩暗、淡且含灰色。

三、色彩的调和方法

1.相近色相近色是指色环中相邻的三种颜色。相近色在网站设计中极为常用。相近色的色彩搭配使人感觉舒适自然。是一个SOHO网站,它很有艺术性,整个网站的色调考究,以邻近色、暖调、中明度搭配,舒适自然。2.互补色互补色又称补色,是指色环中相对的两种色彩,色彩对比度大。在互补色的设计中,适当的调整一下补色的亮度,能够是对比的视觉效果更出色。

四、网页设计中冷暖色彩的运用技巧

1.暖色暖色一般应用于购物类网站,电子商务网站,儿童类网站等等,用以体现商品的琳琅满目,儿童类网站的活泼、温馨等效果。2.冷色冷色一般适合表达严肃,稳重等效果,绿色蓝色、蓝紫色等都属于冷色系列。冷色系色调多应用于一些高科技,游戏类网站。冷色与白色搭配能达到一种不错的效果。

网页设计的排版的技巧

五、色彩均衡技巧

网站图文的合理排版,能使人感到舒适协调,色彩的均衡搭配使网站的视觉、心理更加平衡和谐。网站色彩设计不会单一的运用某一种颜色,设计者必须要考虑色彩的均衡的问题。色彩的均衡,包括色彩的位置,每种色彩所占的面积、不同色彩的比例等等。比如灰暗的色彩面积过多,回事人产生压抑等感觉;鲜艳明亮的色彩面积如果过多,则会使人感觉刺眼不舒适。

六、确定网站的主题色

网站鲜明独特的主题色,让客户即目标明确,也兴致盎然。网站设计者必须考虑主题色的确定。网页选用的色彩尽量控制在4种左右,太多的色彩会让人感觉凌乱混沌、不能突出主题特色。确定好主题色,配色与主题色搭配必须能够有助于烘托主题。另外确定明度,纯度、色相那种要素占主导。色彩为网站内容服务,必须与网站的主题以及气氛相适应,色彩的搭配不仅仅是单纯的运用,必须考虑诸多因素,例如,了解你的网站所要传达的讯息和品牌,明确网站的职能;了解你的读者群,掌握访问者的类别、社会背景、心理需求和场合的差异等,社会背景不同,目的不同,往往会对色彩的感受也不同,因此网站的用色必须尽可能的吸引各种的注意力。

结语

色彩的搭配数之不尽,设计者不能机械按照某些配色法则搭配设计色彩方案。在确定主题涵义的基础上,依据网页风格来确定主色调,劲儿完善整个页面的配色方案,达到和谐悦目的视觉整体感。

实用的网页设计技巧

除了内容作为信息本身极其重要以外,还有一项对网站信息传递、用户浏览体验十分重要的因素,那就是网页排版。事实上,网站内容会因字体类型或排版形式的变化而有所改变,合理的网页排版不仅能够突出网站的重点内容,提高内容的可读性,还能保证网站的协调一致,让用户在浏览上更加轻松方便。

打个比方来说,如果网页内容是钻石戒指,合理的排版就是珠宝盒,是信息的载体,能将信息以恰当、有效的方式展现出来。既然网页排版如此重要,今天就带大家一起看看什么是网页排版,网页排版有哪些好处以及怎样做好网站排版(以文字排版为主)。快来一起来看看吧!

1、 调整行长和行距

行长,是指单行文字的长度。如果一行文字太长,访客很难注意到该段落的起点和终点,阅读起来比较困难;而一行文字过短,访客在浏览时需要不停的来回扫视,这也会破会阅读的节奏。所以每一行文字的字数应该合理安排,提高网站的可读性。中文在14号字体时,建议35—45个文字。

行距,顾名思义,行与行的间距。行距对网站的易读性也有很大的影响。过宽的行距会让内容失去延续性,而太窄的行距又会易使访客跳行、出现阅读障碍。除此以外,我们还可以通过调整行距展现独特的版式效果,宽一点的行距更显轻松、随意,宽窄行距并存也能增加网站内容的层次感。行距通常随字体的改变而变化,行间距稍稍大于字体的大小(如果使用了10号字体,,那么默认的间距是12号)。这种默认的设置一般看上去很拥挤,你可以考虑增加间距提高可读性,不过也要记住不能增加太多,把握适度原则。

2、 适当留白

在排版中,我们也要使用留白,事实上前面的字间距、行间距、段间距都是留白的几种表现形式。除了这些以外,网站的不同区块、图片等之间也要留下充足的空间,让访客在获取、加工这些信息时更加容易。

做好网站的排版并不简单,它涉及到方方面面的元素,需要花费很多时间和精力。新的字体和排版趋势每天都在不断更新,当前有效的布局和主题某一天可能就会过时。不过不用担心,快来起飞页自助建站平台做一个响应式网站吧!还有,虽然网页字体、排版布局版式变更很快,但如果你找到了一款非常适合的字体和排版类型,记得使用一段时间,看看效果,不要盲目追逐潮流。

网页设计与色彩分析

一、网页中的色彩

在现实世界中,我们看到的色彩由三种色光组成,他们本身不能再拆分出其他的色彩成分,所以被称为三原色。光学的三原色由红、绿、蓝组成,这三种光混合则会形成白色光。电脑的屏幕成像同样符合这一原理,由三原色光构成色彩。在网页html语言中,我们使用RGB色彩模式,通过调节三原色的数值表达确定的色彩。

二、色彩对网页设计的影响

(一)色彩与网页可用性网站的重中之重就是其功能性。网页需要有效地传递信息,帮助用户在互联网“地图”中来回自由穿梭,能够去往想去的地方,不至于迷路,最终攫取到自身所需的内容。网页在多大程度上能实现其目标功能被称为网页的可用性,而色彩是其中重要的影响因素之一。在导航设计中,文字与背景色彩的选择决定用户是否能快速地察觉链接并正确地点击。导航中色彩组合会影响点击精度和速度,如果一个目标对象相对显眼,相应的搜索时间可以提升83%。选用不当的图底对比色彩组合,会使文字模糊不清,难以在第一时间察觉和辨别,不仅影响搜索效率,更是不美观。在颜色的选择时,应该仔细思考选择目的和期望的效果,再添加适合的颜色。在网站的布局方面,色彩起着分组和层级的作用,是用于创造界面布局的最有影响力的元素。通过色彩的选择,我们可以将界面的某些元素突出或隐藏起来。色彩不仅将元素分割开来,比如导航菜单内容文字、标题、图片、符号和广告灯等内容,也可以使界面元素互相协调,达到设计的一致性。错误的颜色选择则会导致混乱,使界面上出现“坏斑”,破坏整体效果。

(二)色彩、认知与美感有数据表明,用户会在打开网页的最初5秒钟内形成对网页的初步印象,并且决定是否继续浏览该网页。所以,从认知形成的角度来说,色彩很大程度上决定着一个网页的生死。色彩还有一种使人增强记忆的作用。巧妙而独特的网页色彩搭配可以浏览者留下深刻的印象,从而从海量的网站中脱颖而出。“没有丑陋的颜色,只有丑陋的搭配。”色彩的组合是影响页面美感的重要因素。有研究表明,虽然每个人对于色彩的偏好是不同的,但是其中存在着一定的规律。对于特定人群,需要开发迎合其审美的色彩组合。在选用色彩时,可以遵守视觉设计普遍规律:对比与平衡。

(三)色彩与情感心理学家认为,情感是指个体对客观事物是否符合自身需要的态度体验。人在接触网页色彩后,会通过直觉形成一种“感觉”,继续深入探索和思考后,就会引起悲、喜、优等心理反应,形成更高层次的“感情”。在不同的用户群体中,美感偏好具有高度的主观性和差异性。根据Norman的人脑识别处理的三个层次理论,人脑对美感呈现中的色彩搭配的处理处于“本能层次(VeisceralLevel)”,即在大脑处理前就会对对象进行生理反馈。但是这一点在之前的研究中体现的不多,应为美感偏好不仅受本能影响,还会受思考(reflective)的影响。

三、网页色彩的评估方式

对于网页色彩功能侧重点的不同,网页设计的色彩评估方式也会变化。以下为评估网页色彩对网页可用性、网页色彩偏好和网页色彩情感表达时常用的评估方法。网页色彩可用性评估:

1.通常在选定评估对象,如导航栏、文字段落、按钮等后,以色彩为变量设置对比试验组并完成相应任务,通过测算完成时间、正确率等参数评估网页可用性;

2.在评估网页信息传达效率,可以通过使用眼动仪设备追踪用户瞳孔,记录注意力轨迹和视线集中点,评估重要信息是否容易被用户接受。色彩偏好评估:通常以分发调查问卷,获取被测者对网页色彩方案的评分为评估手段。在分析数据时,除了分析数据平均值外,必要时还需要分析数据方差,找出获得最高一致性评价和平均分的方案。色彩方案的方差得分可以作为平均分的补充,验证该方案是否能达成较一致的偏好感受。

色彩情感表达评估:

可借鉴感性工学方法,引入SD语义法。使用色彩模型,例如RGB、CMYK、PANTON、NCS等色彩体系,提取色彩属性,分发5或7点量表问卷,将情感标签量化为色彩的属性值,建立色彩与情感主题的科学关系。这一评估方法可以一定程度上地将感性的色彩进行量化,通过确定的数值找到最切合主题的色彩方案。

四、结语

欧洲与日本对色彩的研究非常深入,并取得了相当的成就。欧洲最早进行城市色彩规划,并与1963年成立了流行色协会。而国内的色彩消费和应用市场日益壮大,但是,国内的色彩研究却还未跟上,需要通过大量实践和研究,找出符合国人审美和独具东方韵味的网页色彩搭配。色彩拥有无限的可能性。人们在浏览网站时,第一感受就是其色彩带来的整体印象,其次才是探索网站的内容。色彩影响着网站的可用性,更是调动着用户的情绪和感受。同样的网站运用不同的色彩方案,就会渲染出不一样的氛围和意义,这就是色彩的魅力所在。在选择网页中的色彩时,设计师不能够凭着自身喜好设计,而是应该有一个严谨、科学的选择方式。设计师需要在充分了解网页侧重功能与目标人群后,考虑色彩对网页的各方面影响,若有条件可以通过实验设置验证色彩搭配的准确性。

12 12 分享:

相关课程

发表评论

登录后才能评论,请登录后发表评论...
提交评论

最新文章