关于网页UI与用户体验设计中的感官体验，一起来了解一下。
一、设计风格
网站的设计风格必须要符合目标客户的审美习惯，并有一定的引导性。设计师需要注意的是，在对网站进行设计之前，必须明确该网站所针对的目标客户群体，并针对目标客户群体的审美喜好进行分析，从而确定网站的总体设计风格。
网站常见设计风格
1）超清晰
在该设计公司的网站页面设计中运用了超清晰的设计风，页面中运用通栏的宣传图像来分割页面中不同部分的内容，再加上有条理跳跃亮黄色点缀，使得页面内容表现得非常清晰、整齐。页面中清晰的视觉指引和整齐有序的外观都能够给人良好的用户体验。
在该产品介绍的专题页面设计中抛弃了以往的传统表现风格，而是运用了超清晰的设计风格。使用不同色系不同明度的蓝色调将整个页面划分为多个不同的内容区域，在每部分的内容区域中，又综合运用运用图文结合和色彩对比的手法，使得页面结构层次非常清晰。
2）极简
该网站页面运用了极简的设计风格，不仅设计简洁，并且通过文字的排版方式以及局部背景图像的运用，体现出现代传统文化特色，非常直观、大方。
极简设计在移动端页面设计中非常常见，并且能够给人很好的视觉效果。在该移动端家具产品页面中，仅仅使用简洁的家具产品图与文字介绍相结合，通过背景颜色的烘托而没有使用其他任何装饰性元素，给人一种精致、典雅的感受，并且能有效突出产品的表现。
3）照片
在该科技类品牌网站页面中使用满屏的大幅度产品照片作为页面的整体背景，科技感扑面而来，在页面局部排列少量的简洁菜单文字，使背景图像完全占据主导地位，网站信息被最小化了但同时制作精美。
在该时尚运动服饰介绍页面中同样使用了产品照片作为满屏背景，使浏览着仿佛身临其境。需要注意的是，因为页面中又较多的介绍内容，为了使信息内容清晰易读，背景的风景照片使用了左屏的部分，从而不影响页面内容的表现。
＊使用照片设计风格时，还有一个重要事项需要注意，如果背景图片很复杂，那么前景就需要设计得朴素一些，这样是为了避免页面过于凌乱，当然这样也能够更好地使页面信息凸显出来。
4）插画
该少女服饰品牌页面运用了插画的设计风格，将时尚的少女人物与卡通手绘插画结合，人物与插画背景设计浑然天成，且运用恰到好处。
该网页设计也运用了插画设计风格，将产品图片巧妙地融入到插画当中，不但体现出年轻和可爱，并且每个页面中安排的文字内容较少，使浏览者仿佛在一起看一幅幅连环画，能给浏览者留下深刻而美好的印象。
5）三维
该游戏界面采用了典型的三维设计风格，在我们心目中，人物肯定是要占据空间的，因此网页的背景就自然而然地被拉远了。在该页面中同时采用s型的美感构成，内容与背景形成空间对比，给人一种很强的视觉冲击力。
该页面设计，通过与页面背景颜色相对比的色块来突出重点信息和图片，在页面中为多个重要的元素都运用了强烈的阴影效果，页面中的大字号主题文字、色块以及图片，有效地表现出页面的空间感，仿佛内容跃然于背景之上。
6）以字体为主
在该页面设计中以字体作为主要的设计元素，通过随性的手写字体加上巧妙的布局，使页面给人一种随意而个性十足的感觉。
该页面的设计风格也可以称为插画风格，通过插画来体现字体设计，内容形式很具创意感，给人一种情感化的传达，大胆创新，个性鲜明的感觉。
7）纯色
该网页的整体设计采用的就是纯色风格，运用色块对页面进行倾斜风割，不但清晰地划分了页面中不同的内容，而且能够产生对比的效果，这种设计使网站看上去更加明快、整洁。
该网页设计同样采用了纯色的设计风格，运用鲜艳的纯色划分页面中不同功能和内容的区域，使得页面内容的划分非常清晰。
＊使用纯色风格设计的网页实现起来比较容易，并且使用这种设计风格的网站加载速度也会比较快，这种风格非常适合电子商务类的综合网站以及移动端的网站使用。
8）扁平化
该网页采用了典型的扁平化设计风格，页面中各部分内容都采用了大面积的纯色块进行分割，使得页面中各部分内容的划分非常清晰、直观，没有过多的修饰，表现内容的方式更加直接。
受到移动设备屏幕尺寸和操作方式的限制，移动端的页面需要给浏览者提供更加直观的信息和便捷的操作，所以在移动端的页面设计中扁平化的设计风格非常普遍。
＊网站页面设计风格可以又很多，无论用户采用何种风格进行设计，都要于网站本身内容相符，这样才能将想要传达的内容快速传达给浏览者。否则一味地追求花哨的页面效果，将使网站本身的核心内容被忽略掉。
二、尺寸
网页设计的难点在于每个浏览者的使用环境不尽相同，网页存在太多的变数，一般的设计并不能胜任，因此，能否有效地处理这种情况，直接影响到该页面的用户体验。
对网页尺寸产生重要影响的因素主要有3个，分别是：操作系统、浏览器和系统分辨率。
关于尺寸对网页感官的用户体验，经通过以下两个方面分别进行讲解。
影响网页尺寸的主要因素
1）操作系统
在操作系统的底部都会显示系统任务栏，该部分会占据一定的屏幕空间，windowsxp系统中默认的任务栏高度为30px，windows7、windows8与windows10操作系统中默认的任务栏高度均为40px。
2）浏览器
不同的浏览者可能会使用不同的浏览器，在浏览器窗口中默认都会显示状态栏、菜单栏和滚动条，这些都会占据网页在浏览窗口中的显示区域，这些因素也是设计师在设计网页前需要考虑的。主流浏览器的界面参数如下－所示。
主流浏览器的界面参数
3）系统分辨率
不同的显示器有着不同的分辨率设置，这就导致在浏览网页时不同系统分辨率中的可视面积是不同的。根据调查机构对30万以上的客户端进行测试，得到如下的测试数据。
通过以上的系统分辨率调查数据结果可以得出适合大多数用户进行浏览的安全分辨率为1336*768，可以建议大分辨率为1280*800。
安全大网页宽度与首屏高度
根据以上对操作系统、浏览器和系统分辨率的分析，可以得出设计网页的安全宽度为1002px，可建议的较大宽度为1258px。
在windowsxp常见分辨率1024*768下，去除系统任务栏、浏览器窗口的菜单栏和状态栏后得到的网页首屏可视高度平均值为584px。
在windows7常见分辨率1440*900下，去除系统任务栏、浏览器窗口的菜单栏何状态栏后得到的网页首屏可视高度平均值为716px。
三、关于LOGO
作为具有传媒特性的网站logo，为了在最有效的空间内实现所有的视觉识别功能，一般是通过特定图案及特定文字的组合，达到对被标识体的出示、说明、沟通和交流，从而激发浏览者的兴趣，达到增强美誉、记忆等目的。
常见logo表现形式
网站logo形式一般可以分为特定图案、特定文字和合成字体。
1）特定图案
两个网站logo的设计均使用了特定行业的图案。通过使用具有行业代表性的图像作为logo图形的设计，使用户看到就知道该网站与什么行业有关，搭配简洁的文字，表现效果一目了然。
2）特定文字
上面两个logo均使用了对特定文字进行艺术处理的方式来表现logo。使用文字来表现logo是一种做直观的表现方式，通过对主体文字或字母进行变形处理，使其具有很强的艺术表现效果。
所以特定文字一般作为特定图案补充，选择的字体应与整体风格一致，应该尽可能做全新的区别性创作。完整的logo设计，一般都应考虑至少又中英及单独的图案、中文、英文的组合形式。
这两个网站logo的表现效果更加丰富，将logo文字进行艺术化的变形处理并且与具有代表性的logo图形相结合，使得logo的整体表现效果更加直观与具有艺术感，能够给人留下深刻的印象。
3）合成文字
将文字进行变形处理与图形相结合表现出意象的效果，同时具有文字的可识别性也兼具图形的表现力，非常适合表现logo，能够高人留下深刻的印象。
＊网站logo是网站特色与内涵的集中体现，它用于传递网站的定位和经营理念，同时便于人们识别。在网页中应用logo是需要注意确保logo的保护空间，确保品牌的清晰展示，但页不能过多地占据网页空间。
设计网站logo的一般流程
第一步：明确需求－我们的网站需要一个什么样的logo？
第二步：思维导读
使用铅笔在白纸上绘制logo的思维导图。思维导图可以很好地帮助我们发散思维。除了使用纸、笔外，也可以使用一些专业的思维导图软件。
用户可以从一个关键词开始，逐步构建整个思维导图。不要局限自己的思维，尽量发散，以获的更多的可能性。
通过思维导图，可以获得几个重要的关键词。利用这些关键词寻找设计灵感，把想法图形化。接下来就开始绘制logo的草图。
第三步：绘制草图
我们不可能凭空去想象所有的东西，特别是当我们的思维被局限在某一点时，
可以在一些专业的设计网站中找到很多优秀的logo设计。看图借鉴并不代表“抄袭”，在设计的时候不要去抵触各种优秀的作品，重要的是从中获得灵感和启发，而不是一味的生搬硬套。
第四步：在软件中精细绘制logo图形
第五步：设计logo文字，来个完美组合
＊现代人对简洁、明快、流畅、瞬间印象的诉求使得logo的设计越来越追求一种独特的、高度的洗练。一些已在用户群中产生了一定印象的公司为了强化受众的区别性记忆及持续的品牌忠诚度，通过设计更独特、更易理解的图案来强化对既有理念的认同。
四、网站打开速度
提高网站页面打开速度，改善用户体验
1）优化图片
图片是网页中最基本的元素之一，图文结合能够简明扼要地阐述主题，提高用户阅读兴趣。对于图片的处理及优化，可以将图片进行自定义大小，能够有效帮助减少页面大小，设置图片的质量，适当控制其容量大小，提高网页图片的加载速度。
2）选择合适的图片格式
3）图片宽度和高度设置问题
4）合并优化
5）延迟显示可见区域外的内容
6）精简代码
7）延迟加载和执行非必要脚本
8）减少网页的响应次数
五、合理布局
网页布局最重要的基础原则是重点突出、主次分明、图文并茂。网页的布局必须与企业的营销目标相结合，将目标客户最感兴趣的，最具有销售力的信息放置在最重要的位置。
关于网站页面合理布局的用户体验：
常见的网页布局形式
一栏式布局
3）左右均等
三栏式布局
网页布局的原则：协调、一致、流动、均衡、强调等，
另外，在进行网页布局设计时，需要考虑导网站页面的醒目性、创造性、造型性、可读性和明快性等因素。
六、色彩色彩常识网页等基本配色方法
单色
类似色
补色
邻近补色
无彩色
＊在网页进行配色时，使用的颜色最好不要超过4种，使用过多的颜色会造成页面繁杂，让人觉得没有侧重点。一个网页必须确定一种或两种主题色，在对其他辅助色彩进行选择时，需要考虑其他配色与主题色的关系，这样才能使网页的色彩搭配更加和谐、美观。
与传统媒体不同，网页界面中除了文字和图像以外，还包含动画、声音和视频等新兴多媒体元素，更有由代码语言编程实现等各种交互式效果，这极大地增加了网页界面的生动性和复杂性。
在网站页面中合理地应用与网站主题风格相统一的声音或视频元素，可以极大地丰富网站页面的视听效果，但还是要为用户提供控制声音或视频的开关，将选择权交给用户，避免对用户造成困扰。
本文由@乘良－Leon原创发布于人人都是产品经理。未经许可，禁止转载。