作者：胡卫军
出版社：电子工业出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
网页UI与用户体验设计5要素(全彩)试读：
前言
什么是用户体验？用户究竟在乎什么样的使用体验？用户体验是心理需求还是功能需求？我想这些问题一定困扰着很多网站设计人员。用户体验从某种意义上来讲，解决的是产品的黏性问题。对于网站设计来说，不仅表现在精美的视觉效果上，还包括出色的交互设计、便捷流畅的使用方式，以及给用户一种安全和信任感，使用户感觉到亲切。一个好的网站除了内容精彩、定位准确以外，还要方便用户浏览，使用户可以方便快速地在网站中找到自己感兴趣的内容。本书针对网站设计中的用户体验细节要素进行了全面的详细分析和介绍，并通过案例的分析使读者更容易理解。
本书内容
本书在借鉴国内外用户体验设计的前沿理念和实践成果的基础上，对网站用户体验进行了全面而详细的讲解，力图以清晰、有条理的语言和生动翔实的案例向读者系统地介绍用户体验设计中的各方面重要因素。
第1章 感官体验要素。感官体验是呈现给用户视听上的体验，强调的是用户使用网站的舒适性。本章将向读者详细介绍影响用户感官体验的相关要素，包括网站的风格、尺寸、布局、色彩、导航等多个方面，使读者能够从不同的方面体会到感官体验设计的方法和技巧。
第2章 交互体验要素。交互体验是呈现给用户操作上的体验，强调网站的可用性和易用性。本章将向读者详细介绍影响用户交互体验的相关要素，以及如何对这些交互要素进行设计处理，包括网站会员注册机制、填写表单、错误提示、在线咨询、意见反馈、在线搜索等多个方面，通过这些方面的交互体验设计，提升网站的易用性。
第3章 浏览体验要素。浏览体验从某种意义上来说与感官体验有点相似，但是并不完全相同，在浏览体验中强调的是如何使网站内容的层次更加清晰、明确，用户在浏览网站的过程中更加流畅，强调的是如何使网站中的内容更加具有吸引力。
第4章 情感体验要素。情感体验是偏向于呈现给用户心理上的体验，强调网站的友好度问题。本章将向读者详细介绍影响用户情感体验的相关要素，包括心流体验、沉浸感、情感化设计、用户分类、会员激励、色彩情感等多个方面的内容，通过情感化体验要素的设计使网站能够真正打动用户的心，使网站与用户成为朋友。
第5章 信任体验要素。任何产品，信任才是基础，网站也不例外。对于互联网来说，要建立真正的信任，是需要突破很多心理障碍的，在网站体验中，信任体验应该是最好的目标之一。本章向读者介绍了有关安全性、给用户被保护感、信任度和网站信任体验细节等相关的内容，从而帮助大家提高网站的信任体验。
本书特点
要真正做好用户体验设计，除了掌握本书中介绍的基础要点和技巧外，如何拿捏用户不同时段的需求，也是我们必须要思考的，当然这也是一个熟能生巧的过程。
◎紧扣主题
本书通过5个方面全面细致地讲解了用户体验设计的相关要素和重点，将每一个用户体验要素都拆分为多个细节进行讲解，使读者能够更加容易理解和接受。
◎易学易用
在对用户体验的每个细节要素进行分析讲解的过程中，基础知识与案例分析相结合，图文并茂的讲解方式，使读者能够更好地理解，使学习的成果达到最大化。
本书作者
参与本书编写的有胡卫军、高金山、张艳飞、鲁莎莎、吴潆超、田晓玉、佘秀芳、王俊平、陈利欢、冯彤、刘明秀、谢晓丽、孙慧、陈燕、胡丹丹。书中难免有错误和疏漏之处，希望广大读者朋友批评、指正。编 者1 感官体验要素页面设计中的感官体验指的是产品呈现给用户视觉和听觉上的体验。这种体验是最为直接的，将直接影响到用户对产品的印象。从而让用户决定继续浏览还是马上离开。感官体验最重要的是要带给用户舒适感，以促使用户继续浏览页面。影响用户感官体验的要素有设计风格、Logo设计、页面浏览速度、合理布局页面、页面色彩搭配、动画效果、页面导航、正确的页面尺寸、图片展示、选择合适的图标、广告位和背景音乐等元素，下面来逐一介绍。设计风格
一个人拥有自己独特的风格，是一般人所没有的，就会让人注意到那个人的特别，若那个人的风格是正面的，就会引起别人的羡慕与注意，或是赞赏。就如同一个网站，拥有别的网站所没有的风格，就会让浏览者愿意多停留些时间，细细品尝该站的内容，甚至会得到多人的鼓励与注目。知识点分析
网站的设计风格必须要符合目标客户的审美习惯，并有一定的引导性。设计师需要注意的是，在对网站进行设计之前，必须明确该网站所针对的目标客户群体，并针对目标客户群体的审美喜好进行分析，从而确定网站的总体设计风格。网站常见设计风格
1.超清晰
如果只能选择一种风格或手法来设计网站，我一定会选择超清晰风格。在我看来，超清晰不仅仅代表一种风格，也是设计清晰实用的网页的理想方式。超清晰网站偏向于极简主义风格，但是它们更关注的是做到清晰明了，而非越少越好。可以说这种设计是视觉享受与简单实用的完美统一。总之，超清晰追求的是功能完备且不失优雅的完美目标。
在该设计公司的网站页面设计中运用了超清晰的设计风格，页面中运用通栏的宣传图像来分割页面中不同部分的内容，再加上错落有致的布局，使得页面内容表现得非常清晰、整齐。页面中清晰的视觉指引和整齐有序的外观都能够给人良好的用户体验。
在该游戏介绍的专题页面设计中抛弃了以往游戏页面的传统表现风格，而是运用了超清晰的设计风格。使用同色系不同明度的蓝色调将整个页面从上至下划分为多个不同的内容区域，在每部分的内容区域中，又综合运用图文结合和色彩对比的手法，使得页面结构层次非常清晰。
2.极简
极简风格一直很流行，历来都是最可行、最受欢迎的一种网站设计风格。这种风格不但能够提供最实用的设计，而且永远都不会过时。以这种风格设计的网站也非常易于创建和维护。但先不要太高兴，因为设计和实现极简风格可不是一件容易的事儿，极简风格需要在细节上煞费苦心，在微妙之处独具慧眼。
该网站页面运用了极简的设计风格，不仅设计简洁，并且通过文字的排版方式以及局部背景图像的运用，体现出浓郁的传统文化特色，非常直观、大方。
极简设计在移动端页面设计中非常常见，并且能够给人很好的视觉效果。在该移动端家具产品页面中，仅仅使用简洁的家具产品图与文字介绍相结合，通过背景颜色的烘托而没有使用其他任何装饰性元素，给人一种精致、典雅的感受，并且能有效突出产品的表现。
3.照片
使用照片作为网站背景？好可怕，听起来好像是十几年前互联网刚兴起时的做法。但如果看到处理得好的网站，你就不会这么想了。这些使用照片作为主要元素的网站都让人耳目一新，它们比常见的网站更加具有条理性。
千万不要低估了照片在网页中所能取得的效果，同时牢记住一点：越有效果的东西，使用起来越要小心。照片风格可能生动、有冲击力、意义丰富，但如果使用得不恰当，也可能使整个网站页面的表现效果相当糟糕。
在该时尚品牌网站页面中使用满屏的大幅模特照片作为页面的整体背景，时尚感扑面而来，在页面局部排列少量的简洁菜单文字，使背景图像完全占据主导地位，网站信息被最小化了但同时制作精美。
在该旅游介绍页面中同样使用当地的风景照片作为满屏背景，使浏览者仿佛身临其境。需要注意的是，因为页面中有较多的介绍内容，为了使信息内容清晰易读，背景的风景照片使用了比较简单的部分，从而不影响页面内容的表现。
专家支招
使用照片设计风格时，还有一个重要事项需要注意，如果背景图片很复杂，那么前景就需要设计得朴素一些，这样是为了避免页面过于凌乱，当然这样也能够更好地使页面信息凸显出来。
4.插画
作为一名设计师，画插画绝对是信手拈来的事。也许插画风格最明显的优势就是在设计中添加一些新颖、独特的元素。在这个注意力持续时间几乎为零的数字世界中，任何突出的东西都能够引人注目。
该运动品牌促销页面运用了插画的设计风格，将时尚的运动人物与卡通手绘插画背景相结合，运动人物与插画背景设计浑然天成，且运用得恰到好处。产品图片放置在主题图片的下方，在我看来，这就是主题设计与传统设计的完美平衡。
该果汁饮品的移动端页面设计运用了插画设计风格，将产品图片巧妙地融入到插画当中，不但体现出该果汁的新鲜与原生态，并且每个页面中安排的文字内容较少，使浏览者仿佛在看一幅幅连环画，能够给浏览者留下深刻而美好的印象。
5.三维
互联网更像是平面的和静态的，这就使那些具备一些空间感的网站看起来相当与众不同。为设计的某些方面添加一些立体感就能够很好地强化网页的总体视觉感受，并使其变得独特，并能够提供一种空间开阔的感觉。
在网页设计中可以通过一些简单的技术和视觉技巧体现出三维立体感。最常用的技巧就是将元素重叠放置，如果众多元素中的某一个是实际物体的图像，这种方式尤其适合，通过让图像与页面设计相重叠，就形成了立体感。另一种简单的技术就是使用阴影，靠近物体的阴影会让物体具有立体感，因此会带来一种空间感。如果阴影看起来是从物体上延伸下来的，那就更有效果了。
该运动品牌页面设计采用了典型的三维设计风格，在我们心目中，人物肯定是要占据空间的，因此网页的背景就自然而然地被拉远了。在该页面中同时将运动人物放置在页面的中间位置，并且在垂直方向上占据整屏的空间，仿佛运动人物是活动的，要冲出页面，给人很强的视觉冲击力。
该女装品牌页面的设计非常简洁、单纯，通过与页面背景颜色相对比的色块来突出重点信息和图片，在页面中为多个重要的元素都运用了强烈的阴影效果，页面中的大号主题文字、色块以及图片，有效地表现出页面的空间感，仿佛内容跃然于背景之上。
6.以字体为主
以字体为主的这种设计风格可以归类为极简主义风格，这两种风格的细微差别是，以字体为主的风格更加关注以优雅的方式来使用字体。以字体为主风格的网页能够表现出字形的自然美，并让它传达出网站的主要信息。使用这种风格的话，特大号的字体会成为整个页面的焦点，所以一定要表现重要信息。
在该页面设计中以字体作为主要的设计元素，通过随性的手写字体加上巧妙的布局，使页面给人一种随意而个性十足的感觉。
该页面的设计风格也可以称为极简风格，运用黑白图片作为页面背景，在背景之上并没有过多的装饰而是在不同的部分使用不同的字体来表现页面中不同的内容，页面内容的层次结构非常清晰，给人一种自信、大胆且稳重可靠的感觉。
7.纯色
随着移动互联网的广泛应用，在网站中运用纯色风格十分流行。也就是说，许多设计师不再使用图片或装饰容器，转而采用更基本的方式并大量利用纯色。
虽然这种风格名为“纯色”，但并不意味着完全只使用一种颜色，应该把思路放开，不要拘泥于形式。另外，使用纯色设计的网站能够真正实现快速加载。
该网页的整体设计采用的就是纯色风格，运用色块对页面进行倾斜分割，不但清晰地划分了页面中不同的内容，而且能够产生对比的效果，这种设计使网站看上去更加明快、整洁。
该移动端页面设计同样采用了纯色的设计风格，运用鲜艳的纯色划分页面中不同功能和内容的区域，使得页面内容的划分非常清晰，而且也便于浏览者使用手指进行点击操作。
专家支招
使用纯色风格设计的网页实现起来比较容易，并且使用这种设计风格的网站加载速度也会比较快，这种风格非常适合电子商务类的综合网站以及移动端的网站使用。
8.扁平化
设计页面时，去除多余烦琐的装饰效果，只使用最简单的色块布局。使用更少的按钮和选项，使整个页面更加干净整齐。既便于用户操作，又可以将想要表达的内容直接表达出来，这就是扁平化设计。
扁平化设计风格的提出是在近几年手机端页面设计时为了节省页面体积，便于用户查看出现的一种设计风格。
该页面采用了典型的扁平化设计风格，页面中各部分内容都采用了大面积的纯色块进行分割，使得页面中各部分内容的划分非常清晰、直观，没有过多的修饰，表现内容的方式更加直接。
受到移动设备屏幕尺寸和操作方式的限制，移动端的页面需要给浏览者提供更加直观的信息和便捷的操作，所以在移动端的页面设计中扁平化的设计风格非常普遍。
技巧点拨
网站页面的设计风格可以有很多，无论用户采用何种风格进行设计，都要与网站本身内容相符，这样才能将想要传达的内容快速传达给浏览者。否则一味地追求花哨的页面效果，将使网站本身的核心内容被忽略掉。观点总结
设计风格在设计领域中变得越来越重要。设计风格通常不会有特定的相关元素，却又因为它们不同的外观而为人所认识。以上这些都是设计方法中的总体理论。举一个例子，极简主义设计风格可以阐释特定设计是如何影响设计师的作品的，该风格定下了网站外观和气质的基调，但不会强制指定特定的图像。而其他的风格，如照片风格、三维风格、扁平化风格等就更为具体化，会有一些明显的模式以及明显的外观形式。确定网站的设计风格不是一件随心所欲的事情，网站所表现出来的风格是很重要的，设计师应该认真考量，从而使网站风格起到展示网站品牌和传达网站信息的作用。尺寸
网页设计的难点在于每个浏览者的使用环境不尽相同，网页存在太多的变数，一般的设计并不能胜任，因此，能否有效地处理这种情况，直接影响到该页面的用户体验。知识点分析
一个网页的尺寸设置与浏览者所使用的浏览器与系统存在很大的关系，我们在设计网页时不可能满足所有用户的最佳尺寸需求，但是我们能做的就是让绝大多数的浏览者得到最佳的视觉体验。
对网页尺寸产生重要影响的因素主要有3个，分别是：操作系统、浏览器和系统分辨率。关于尺寸对网页感官的用户体验，将通过以下两个方面分别进行讲解。
1.影响网页尺寸的主要因素
2.安全的网页宽度与首屏高度影响网页尺寸的主要因素
通过对影响网页尺寸的主要因素进行分析，可以得到能够适应大多数用户获得最佳视觉体验的网页尺寸。
1.操作系统
在操作系统的底部都会显示系统任务栏，该部分会占据一定的屏幕显示空间，Windows XP系统中默认的任务栏高度为30px，Windows 7、Windows 8与Windows 10操作系统中默认的任务栏高度均为40px。
2.浏览器
不同的浏览者可能会使用不同的浏览器，在浏览器窗口中默认都会显示状态栏、菜单栏和滚动条，这些都会占据网页在浏览器窗口中的显示区域，这些因素也是设计师在设计网页前需要考虑的。主流浏览器的界面参数如表1-1所示。表1-1 主流浏览器的界面参数
3.系统分辨率
不同的显示器有着不同的分辨率设置，这就导致在浏览网页时不同系统分辨率中的可视面积是不同的。根据调查机构对30万以上的客户端进行测试，得到如下的测试数据。
通过以上的系统分辨率调查数据结果可以得出适合大多数用户进行浏览的安全分辨率为1 024×768，可建议大分辨率为1 280×800。安全的网页宽度与首屏高度
根据以上对操作系统、浏览器和系统分辨率的分析，可以得出设计网页的安全宽度为1 002px，可建议的较大宽度为1 258px。
在Windows XP常见分辨率1 024×768下，去除系统任务栏、浏览器窗口的菜单栏和状态栏后得到的网页首屏可视高度平均值为584px。
在Windows 7常见分辨率1 440×900下，去除系统任务栏、浏览器窗口的菜单栏和状态栏后得到的网页首屏可视高度平均值为716px。
上面两张截图为网页在不同分辨率下的显示效果，分辨率为1 024×768的网页看起来比较方正，而分辨率为1 366×768的网页则呈宽屏显示。可是，虽然分辨率有变化，该网页中内容的展现却没有任何问题，这就要求网页设计者在进行网页设计时考虑到，网页尺寸需要让绝大多数的浏览者得到较好的视觉体验。该网页使用一张大幅图像作为页面的背景，这样在大多数的分辨率下都能够获得很好的视觉体验。观点总结
虽然现在桌面电脑显示器的屏幕分辨率越来越高，但随着移动设备的普及，使用平板电脑或智能手机来浏览网站的用户也越来越多，但是平板电脑与智能手机等移动终端的屏幕分辨率都要小于桌面电脑显示器，为了使网页能够适应在多种不同的设备中进行浏览，需要在制作网页时考虑一套页面能够自适应多种屏幕分辨率或多种终端设备。
在制作网页时，内容与四周的边框间距以及图片与图片之间的间距等都要使用百分比的相对值进行设置，字体大小可以在一开始给出标准设计图所用的字体大小，程序实现后根据在真机中的测试效果再进行调试。还需要考虑移动设备的框架，网站中是3栏，移动端可能仅为1栏，制作时需要根据网页中内容的优先级使用原型框架做好布局框架。关于Logo
作为具有传媒特性的网站Logo，为了在最有效的空间内实现所有的视觉识别功能，一般是通过特定图案及特定文字的组合，达到对被标识体的出示、说明、沟通和交流，从而激发浏览者的兴趣，达到增强美誉、记忆等目的。知识点分析
说到网站Logo设计，就不得不谈一下传统的Logo设计。传统的Logo设计，主要传达一定的形象与信息，真正吸引我们目光的不是Logo标志，而是其背后的图像信息。例如，一本时尚杂志的封面，相信很多读者首先注意到的是漂亮的女生或是炫目的服装，如果感兴趣才会进一步去了解其他相关的信息。网站Logo的设计与传统设计有着很多的相通性，但由于网络本身的限制以及浏览习惯的不同，它还有一些与传统Logo设计相异的特点。比如网站Logo一般要求简单醒目，虽然只占方寸之地，但是除了要表达出一定的形象与信息外，还得兼顾美观与协调。
作为独特的传媒符号，Logo一直是传播特殊信息的视觉文化语言。无论是古代繁杂的龙纹，还是现代洗练的抽象纹样、简单字标等都是在实现着标识被标识体的目的，即通过对标识的识别、区别，引发联想、增强记忆，促进被标识体与其对象的沟通与交流，从而树立并保持对所标识体的认同，达到高效提高认识度、美誉度的效果。作为网站标识的Logo设计，更应该遵循企业CIS中所规定的配色原则及表现方式并有所突破。关于Logo对网页感官的用户体验，将通过以下两个方面分别进行讲解。
1.网站常见Logo表现形式
2.设计网站Logo的一般流程网站常见Logo表现形式
网站Logo形式一般可以分为特定图案、特定字体和合成字体。
1.特定图案
特定图案属于表象符号，具有独特、醒目，图案本身容易被区分、记忆的特点，通过隐喻、联想、概括、抽象等绘画表现方法表现被标识体，对其理念的表达概括而形象，但与被标识体关联性不够直接。虽然浏览者容易记忆图案本身，但对其与被标识体的关系的认知需要相对较曲折的过程，但是一旦建立联系，印象就会比较深刻。
左侧两个网站Logo的设计均使用了特定行业图案。通过使用具有行业代表性的图像作为Logo图形的设计，使用户看到Logo就知道该网站与什么行业有关，搭配简洁的文字，表现效果一目了然。
2.特定文字
特定文字属于表意符号。在沟通与传播活动中，反复使用被标识体的名称或是其产品名用一种文字形态加以统一，含义明确、直接，与被标识体的联系密切，容易被理解、认知，对所表达的理念也具有说明的作用。但是因为文字本身的相似性，很容易使浏览者对标识本身的记忆产生模糊。
左侧的两个网站Logo均使用了对特定文字进行艺术处理的方式来表现Logo。使用文字来表现Logo是一种最直观的表现方式，通过对主体文字或字母进行变形处理，使其具有很强的艺术表现效果。
所以特定文字一般作为特定图案的补充，选择的字体应与整体风格一致，应该尽可能做全新的区别性创作。完整的Logo设计，一般都应考虑至少有中英文及单独的图案、中文、英文的组合形式。
这两个网站Logo的表现效果更加丰富，将Logo文字进行艺术化的变形处理并且与具有代表性的Logo图形相结合，使得Logo的整体表现效果更加直观与具有艺术感，能够给人留下深刻的印象。
3.合成文字
合成文字是一种表象表意的综合，指文字与图案结合的设计，兼具文字与图案的属性，但都导致相关属性的影响力相对弱化。其综合功能为：一是能够直接将被标识体的印象透过文字造型让浏览者理解；二是造型化的文字，比较容易使浏览者留下深刻的印象和记忆。
将文字进行变形处理与图形相结合表现出意象的效果，同时具有文字的可识别性也兼具图形的表现力，非常适合表现Logo，能够给人留下深刻的印象。
技巧点拨
网站Logo是网站特色与内涵的集中体现，它用于传递网站的定
试读结束[说明：试读内容隐藏了图片]