`
gray888
  • 浏览: 530503 次
  • 性别: Icon_minigender_2
  • 来自: 上海
最近访客 更多访客>>
社区版块
存档分类
最新评论

第五页 网页界面设计系列教程——文字的编排设计

阅读更多

       以语言进行信息传达时,语气、语调以及面部表情、姿态手势是语言的辅助和补充,而在界面设计中,文字的字体、规格及其编排形式,就相当于文字的辅助信息传达手段。

  宋体字型结构方中有圆,刚柔相济,既典雅庄重,又不失韵昧灵气,从视觉角度来说,宋体阅读最省目力,不易造成视觉疲劳,具有很好的易读性和识别性。

  楷体字型柔和悦目,间架结构舒张有度,可读性和识别性均较好,适用于较长的文本段落,也可用于标题。
  仿宋体笔画粗细均匀,秀丽挺拔,有轻快、易读的特点,适用于文本段落。因其字型娟秀,力度感差,故不宜用作标题。
  黑体不仅庄重醒目,而且极富现代感,因其形体粗壮,在较小字体级数时宜彩等线体(即细黑),否则不易识别。
  圆体视觉冲击力不如黑体,但在视觉心理上给人以明亮清新、轻松愉快的感觉,但其识别性弱,故只适宜作标题性文字。
  手写体分为两种,一种来源于传统书法,如隶书体,行书体,另一种是以现代风格创造的自由手写体,如广告体,POP体。手写体只适用于标题和广告性文字,长篇文本段落和小字体级数时不宜使用,应尽量避免在同一页面中使用两种不同的手写体,因为手写体形态特征鲜明显著,很难形成统一风格,不同手写体易造成界面杂乱的视觉形象,手写体与黑体宋体等规范的字体相配合,则会产生动静相宜,相得宜彰的效果。

  美术体是在宋体、黑体等规范字体基础上变化而成的各种字体,如综艺体、琥珀体。美术体具有鲜明的风格特征,不适于文本段落,也不宜混杂使用,多用于字体级数较大的标题,发挥引人注目,活跃界面气氛的作用。

  拉丁字母依据其基本结构可以分为三种类型:
  (1)饰线体(Serif):此类字体在笔画末端带有装饰性部分,笔画精细对比明显,与中文的宋体具有近似形态特征,饰线体在阅读时具有较好的易读性,适于用作长篇幅文本段落。代表字体是新罗马体(Times New Roman)。

  (2)无饰线体(Sans Serif):笔画的粗细对比不明显,笔画末端没有装饰性部分,字体形态与中文的黑体相类似。由于其笔画粗细均匀,故在远距离易于辨认,具有很好的识别性,多用于标题和指示性文字。无饰线体具有简洁规整的形态特征,符合现代的审美标准。代表字体是赫尔维梯卡体(Helvetica)。

  (3)装饰体(Decorative,也称Display):即通常所说的“花”体,由于此类字体信笺于形式的装饰意味,阅读时较为费力,易读性较差,只适合于标题或较短文本,类似于中文的美术体和手写体。代表字体是草体(Script)。

  在某些特殊场合,如广告或展示性的短语中,拉丁字母全部使用小写字母,能够造成一种平易近人的亲切感。

  拉丁字母字体大都包含字幅(正、长、扁)、黑度(细、粗、超粗)、直斜的变化,因而由一种基本字型可以变化出多种具有相似特征的同族字体,这些字体统称为“字族”。

  同一页面中字体应尽量在同一字族中选用,以保证界面具有明确、统一的风格特征。

  在计算机字库中,有关字体特征的表示大多彩缩略语,如Cn(Condensed,长体),Ex(Expanded,扁体),Lt(Light,细),Med(Medium,中粗),DemBol或Dm(Demi Bold,半粗),Bd(Bold,粗),XBd(Extra Bold,特粗),It(Italic,斜体)等。中文正文的字符数每行以20-35个为宜,西文则约40-70个字符最易阅读,因此较宽的文字幅面应考虑采用分栏的排布方式。通常设定行距为字高的150-200%,西文的行距通常小于中文行距。

  粗细对比是刚与柔的对比,也有人称之为男性性格与女性性格的对比。在同一行文字中使用粗细对比的效果最为强烈。粗字少细字多易取得平衡,给人以明快新颖的感觉,细字少粗字多,则不易平衡,但往往会产生具有幽默感的特殊效果。
界面中文字编排要求视觉上产生类似于天平平衡的印象,失去平衡的文字编排设计,将得不到浏览者的信赖,并给人以粗劣的印象。
可能通过左右延伸的水平线,上下延伸的垂直线,动感的弧线和斜线,穿插的图形来诱导视线依照设计师安排好的结构形式顺序浏览。

  在界面的四角配置文字或符号,界面的势力范围就明确地确定下来,界面中即使存在让人感觉动荡不定的元素也会因此而稳定下来。在四角中,左上和右下具有特殊的吸引力,是处理的重点,处理得好,可以使界面左右均衡,同时还会形成从左上到右下沿对角线流动的视觉过程,给人以自然稳定的感觉。

  非规律性造型形式的错落变化,应出现在周围有较充分的留白空间的场所,效果较为显著。如在界面中央或正上方表现效果较好,标题性文字往往使用此手法处理。

  分栏式结构中,文字群体通常只出现在一栏中,每行的字符数相对较少,易于浏览。分栏中如果都排布文字群体,界面会显得十分拥挤,故不宜采用。其他栏中可设置目录、标题、导航等简洁的文字信息,整体形式繁简对比,疏密得当。国内使用较多的是三分栏,国外四分栏式结构则较为普遍。

分享到:
评论

相关推荐

    形式感+ —— 网页视觉设计创意拓展与快速表现 高清完整 pdf

    《形式感+——网页视觉设计创意拓展与快速表现》是一本深入探讨网页设计美学与实践技巧的专业书籍。这本书聚焦于如何通过创新的形式感提升网页设计的吸引力和用户体验,旨在帮助设计师们拓展思维,快速实现设计概念...

    [破译文字编排设计].(美)艾娜·索尔兹.彩图版.rar

    在IT行业中,文字编排设计并非仅仅局限于传统的印刷品,它同样在网页设计、移动应用界面、游戏界面、数字广告等众多领域中扮演着至关重要的角色。良好的文字编排能够提高用户体验,使信息更易于阅读和理解,同时也能...

    C#界面设计教程

    本教程是清华大学内部计算机课程的一部分,专为学习C#界面设计的初学者和进阶者精心编排。总共220页的丰富内容,涵盖了从基础到高级的各种知识点,旨在帮助读者掌握C#编程环境下创建高效、用户友好的图形用户界面...

    一年级语文上册统编教材培训——教材编排概况.docx

    《一年级语文上册统编教材培训——教材编排概况》 这份文档主要介绍了小学一年级语文上册统编教材的编排结构和设计理念,旨在帮助教师更好地理解和使用教材,以适应一年级学生的认知发展需求。 教材的核心特色是以...

    浅谈网页艺术设计中的网页版式设计与编排.doc

    随着互联网技术的发展,网页版式设计也在不断演进,如响应式设计、动态布局等新趋势,使得网页设计更加灵活多变,适应不同设备和用户需求。 总结来说,网页艺术设计中的版式设计与编排是构建高质量网页的核心。它...

    网页界面设计中视觉传达的解读

    不同于传统的平面设计,网页设计不仅需要考虑视觉美感,还需要融入技术元素,实现艺术与技术的完美融合。这种创造性活动涉及众多领域,如消费者心理学、视觉设计美学、人机工程学等。本文旨在从视觉传达的角度探讨...

    图形与文字的编排

    在网页设计、移动应用、宣传材料或任何需要信息传递的媒介中,良好的图形与文字编排都是必不可少的。 1. **排版基础**:排版是设计的核心,包括字体选择、字号、行距、段落间距等。合适的字体可以增强内容的表达力...

    vb——通用考务编排系统

    《VB实现的通用考务编排系统详解》 在信息技术高度发达的今天,教育领域的考试管理也日益依赖于数字化工具。VB(Visual Basic)作为微软公司推出的可视化编程工具,因其简单易学、功能强大,被广泛应用于各种软件...

    C语言程序设计样例——成绩管理系统

    《C语言程序设计样例——成绩管理系统》是一个针对C语言初学者设计的简易项目,它在DOS环境下运行,旨在帮助学习者理解如何利用C语言编写一个简单的管理系统。在这个系统中,用户可以进行成绩的录入、查询、修改和...

    网页艺术设计中的网页版式设计与编排.doc

    最后,优秀的网页设计不仅要求内容的精益求精,更要求版式设计的合理性和艺术性。设计师需要深入理解消费者心理、视觉美学、人机交互等多学科知识,以创造出既满足信息需求又带来愉悦视觉享受的网页。版式设计是网页...

    三网页界面设计字体PPT课件.pptx

    网页界面设计字体是网页设计中的关键元素,它们不仅承担信息传递的任务,还直接影响用户的阅读体验和整体视觉感受。以下是对网页界面设计字体的详细解析: 1. 正确性:字体设计首先要保证准确无误,无论是汉字还是...

    网页美工经典案例教程(PDG)简介

    本教程——"网页美工经典案例教程(PDG)",正是为培养和提升这方面的专业技能而精心编排的。 PDG格式,全称为“超星阅读器文档格式”,是由超星公司开发的一种电子图书格式。它集文字、图像、音频、视频于一体,提供...

    《界面设计》课程标准.docx

    在能力目标方面,学生需熟练运用平面设计方法设计界面,掌握色彩构成原则进行配色设计,能够设计图标、页面和动画效果,精通手机和网页界面设计,包括文字编排和版式优化。同时,课程还要求学生能按照网页开发流程...

    网页设计与制作基础教程(第2版)课件姜慧霖

    "网页设计与制作基础教程(第2版)课件姜慧霖"是一套针对初学者精心编排的教学资源,旨在帮助学习者快速掌握网页设计的基本概念和技术。 在这一教程中,你可以期待学习到以下核心知识点: 1. **HTML基础知识**:...

    《版面艺术设计——PageMaker与方正飞腾技术教程》电子教案第六章.pptx

    第六章 高级排版——报纸编排设计 在版面艺术设计中,报纸的编排设计是一项至关重要的技能。方正飞腾4.1作为一款专业的排版软件,提供了丰富的文字编辑和版面设计功能。本章主要探讨报纸版面的编排与设计,通过实际...

    人机交互实验报告-网页界面设计与分析.pdf

    比较网页设计是为了评估网站的视觉语言,包括色彩、编排和布局。在这个实验中,我们找到三个网站,分别是中公教育培训网、北京领航考研网和中国移动通信集团公司,并对它们的网页设计进行评估。 比较搜索引擎是为了...

    网页设计dreamweaver8.0ppt教程

    总的来说,杨益民老师的这系列教程全面覆盖了Dreamweaver 8.0的使用技巧和网页设计的核心概念,无论你是初学者还是有一定经验的设计者,都能从中受益匪浅。通过深入学习和实践,你将能自如地运用Dreamweaver 8.0创作...

    浅谈网页设计中的文字.doc

    网页设计中的文字是构成网页视觉效果的关键因素,它在信息传递中起着至关重要的作用。在网页设计中,文字不仅仅是信息的载体,更是设计的艺术表现形式。本文将深入探讨文字的格式化、整体编排以及强调策略。 首先,...

Global site tag (gtag.js) - Google Analytics