基于用户体验的家具展示类网站设计研究

时间：2023-10-11 13:12:02 | 来源：网站运营

时间：2023-10-11 13:12:02 来源：网站运营

基于用户体验的家具展示类网站设计研究：工业革命以来，生产方式的改进推动了现代设计、现代技术和现代艺术的同步发展，出现了大量的经典家具设计。经典之所以经典，是因为经典家具设计的时代创新性、在家具设计史上的影响力以及设计美感都是不可否认的。家具与互联网于我们而言，都是日常生活中必不可少且高频率使用的产品，但在产品更新迭代极快的新媒体互联网时代，人们关注更多的是高科技产品、快时尚生活，常常忽略了这些颇具工匠精神的经典产品设计。通过运用新媒体技术将经典家具产品用直观、有趣的方式展示出来，同时注重用户体验设计，为用户营造愉悦感，以期更多人能够了解经典家具设计，同时辅助相关的学术研究。

1 基于用户体验的网站设计概述

1.1 用户体验

用户体验是指产品如何与外界发生联系并发挥作用，也就是人们如何接触和使用它[1]。包括用户整体感知的与产品、服务或组织进行交互的各个方面。用户体验作为一个学科与构成介面的所有元素相关,包括版式、视觉设计、文本、品牌、声音、交互等。用户体验工作旨在协调这些元素为用户创造最优交互体验[2]。首先，用户体验是非常主观的。由于个体差异的影响，所以没有确切的标准来进行判断。因为每个人的喜好、思维、心理状态、情感诉求的方式等的不尽相同，导致产品对于不同用户的作用是不一样的，即使是相同的产品或服务，不同的用户也可能会得到完全不同的体验，给予不同的评价。个性化、人性化的互联网产品界面设计能大幅度提升用户的使用体验，有利于实现了用户体验角度下的互联网产品生命周期的良性循环[3]。其次，用户体验应当是整体体验。用户体验不仅是针对于该网站的其中一部分，而是包括网站内容、界面、交互性、效率等整个网站展现给用户的整体感受。最后，用户体验是有情境的，当用户使用不同设备的背景下，随着环境和情况常常变化，有了很大的不确定性，因此用户体验也会经常变化。

1.2 用户体验的表现形式及意义

是否具有好的用户体验关乎到网站设计的成功与否。对于网站用户体验的表现形式大体上可以分为以下5大类，感官体验、交互体验、情感体验、浏览体验和信任体验[4]。

感官体验主要是用户视听体验，偏重于使用时视觉和听觉上的舒适体验；交互体验体现在用户在使用网站时对网站进行互动操作的体验，在这方面，网站的可用性和易用性的重要性则被凸显出来；情感体验是关乎用户心理状态的体验，注重过程友好；浏览体验主要是吸引用户浏览及更舒适的信息的识别与获取的体验；信任体验指用户更多地会选择可信赖的网站进行使用，网站为用户营造一种可靠感。其中，视听体验方面从设计风格上来说，网站给人的第一印象就是它的设计风格了，这关系到能否吸引到用户停留并继续使用，因此就要求设计师必须通过了解调研及分析目标用户，获得用户的审美习性，然后根据分析结论来确定网站的整体设计风格，并依照整体风格准则进行细化设计。这样确定出来的网站设计的总体风格才会更加容易接受，从而给使用者留下完美的第一印象[5]。网站设计中要依照整体设计风格进行整套的标志设计、结构设计、界面设计及图标设计等，有主有次，图文位置规范，着重考虑整体性，以保证整体效果统一。另外，在使用网站的时候，所涉及的界面加载效果体验、动效、文本导航、甚至简单的文字描述都应该有清晰明确的定位，设计要容易被用户理解以及保证易用性。要保证该网站是清晰易懂的这样才不会在使用过程中给用户带来麻烦。除此之外还有听觉体验效果，主要涉及到的内容就是网站中音频部分，要与网站所表达的内容和谐统一，不能干扰正常的网站使用。总的来说，用户体验在网站的各个部分都有所体现，贯穿整个网站设计，要求设计师和前端后台人员充分配合，以用户为中心，营造友好舒适的使用环境。

1.3 基于用户体验的网站设计

James Garrett对网站的用户体验极具操作性用户体验5个层次模型：（1）战略层，产品目标和用户需要；（2）范围层，功能规格和内容说明；（3）结构层，交互设计与信息架构；（4）框架层，介面设计、导航设计和信息设计；（5）表现层，视觉设计[6]。结合实践需要总结出的基于用户体验的网站开发流程见图1。

前期用户需求及情境分析。用户是网站的实际使用者，在进行信息架构时应事先明确网站的目标用户群，且要准确掌握用户群的具体情况，探究用户使用网站的契机，作出适宜的情景分析，从而更加准确地向用户传递有效信息。

用户体验设计。用户体验设计并不是一种具体的设计方法，而是一种以用户为中心的设计理念[7]。必须着重注意以下3点内容：目标用户群、用户的目的和习惯、达成目标所必需的因素。要站在用户的角度来探究什么样的用户体验是更加合适友好的。比如以尊重用户习惯为例来说，虽然人们各有各的不同习惯，但是总有一些约定俗成的社会普遍认可的行为方式，而人们往往会喜欢按照这种行为习惯进行操作，人们会认为这是友好、可靠的，因此，在设计时，要考虑到这一点，迎合用户合理的行为习惯。比如网页设计时PC端页面导航居于界面顶部，手机端的网页导航往往在左侧和上侧，Logo在页面左上角、关闭或退出图标在右上角、网站相关信息在底部等，这些设计都是用户习惯的，如果遵从这些方案可以帮助用户降低学习难度，提升易用性。但并不是所有的习惯都是一成不变的，倘若有更佳的用户体验的交互设计方案，可以对用户进行友善引导，使用户习惯更合理舒适的交互方式。

网站结构设计。网站的结构是站内信息数据的分类方式，是网站的骨架，在设计结构时，要考虑到用户的动线是否能够在引导下保证他们在使用网站时能够简便快捷、清晰明了地找到自己所要的信息[8]，因此，如何做好网站结构和信息数据的表现形式十分重要。网站结构一般分为以下几种：层级性分类结构、分面分类型结构、辐射型结构、列表与内容型结构、直线型结构。










界面设计。网站界面是和用户产生最直接交流的部分，在界面设计中，要注意以下几点。第一，界面设计要在用户体验的基础上进行；第二，界面设计要考虑页面的形式和基本要素；第三，界面设计的美观性；第四，交互设计的应用，打造良好的交互体验。

技术实现。针对于网站的具体设计采用适宜的技术，如Html5,JavaScript,CSS3等。如果做响应式设计，在响应式设计中要解决的问题有很多，比如图片大小的问题，可以采用液态图片，如图片同比缩放技术，只要没有另外规定图片的具体宽度，页面上所有的图片就会以其原始宽度进行加载，除非其容器可视部分的宽度小于图片的原始宽度[9]。再如不同设备的布局问题，可以采用弹性布局，所谓弹性布局就是不对浏览器的宽度作任何设定，即非固定式布局，因而可以适应不论是水平式的还是竖直式的终端设备[10]。

网站调试与发布。网站程序部分编写完毕时，网站的基础形态便形成了。随后要对网站进行可用性测试，从用户体验出发，进行细致观察，并作出相关评估与分析总结，以便制定完善策略。解决完所有问题后，完成域名注册，把网站上传到虚拟主机空间，即完成发布。

后期维护、优化、更新。网站上线后，并不代表工作完成，此时网站依然有许多没有发现的漏洞，接下来要继续完善，同时要对网站安全进行维护以及网站内容的更新迭代。此外，推广网站也是必须要做的一项重要任务。

2 家具展示类网站设计实践——Furny趣家

2.1 前期分析

设计师和用户如同在跳交际舞，既要顺应着对方的步伐，又要进行一定的引导。对方是一个人，不只是你感受的到他的温度，他也闻得到你身上的味道，对你时时刻刻进行着评价，因此我们有必要进行准确的网站定位和用户相关分析。根据100份问卷调查总结得出以下分析。

本项目研究目的是通过直观、有吸引力的趣味性的创意交互体验，以现代人最易接受的形式，将中外经典家具设计生动形象地展示出来，让用户有主动选择的愉悦感和更舒适的用户体验，从而使更多人关注、了解中外经典家具设计，普及家具文化，同时弥补传统的家具展示方式的静态不足、互动不足。为家具设计师提供资料，同时丰富教学内容和方式，辅助相关研究。

目标用户：青少年、家具爱好者、相关专业师生、设计行业相关人士、追求品质生活的人士等。

用户特征：好奇心强，喜欢新鲜事物，乐于尝试，爱好有趣的东西，对生活品质有一定要求，尊重设计，十分适应快时代生活，对网站加载速度有着较高的要求。

用户痛点：当想要通过网络了解某些经典家具设计时，苦于寻找相关资料，加上网上信息散乱、不全面、枯燥、含金量低，导致学习效率降低，耐性变差，产生糟糕情绪。

2.2 用户体验设计

感官体验。界面视觉上色彩采用蒙德里安三原色，字体大方，版面秩序感好，个别家具展示视频配乐高雅，与该展示页所表达的内容和谐统一，整体视听体验佳。依照该设计风格进行整套的标志设计、界面设计及图标设计等，有主有次，图文位置规范，着重考虑整体性，以保证整体效果统一。

交互体验。体现在用户在使用网站时对网站进行互动操作的体验，在这方面，网站的可用性和易用性的重要性被凸显出来，在设计时采用了大量的与各个家具产品本身息息相关的互动设计效果，有清晰明确操作提示，且易于理解，同时一改以往纯图文网站信息的繁杂与无趣，满足用户对趣味性和互动性的需求，同时可以激发学习欲望，有利于用户获得良好的产品体验；

情感体验。是关乎用户心理状态的体验，注重过程友好。如“赞助”界面采用友好的方式向用户请求赞助资金，金额随意，并表示感谢，使得用户不会产生强烈排斥心理，以期用户能在获取有效信息和资料后乐于支持本网站的建设；“联系我们”则采用界面内显示信息的方式而非新打开一个界面，提高了用户使用网站时的效率，为用户节省了时间，从而获得更愉悦的体验。

浏览体验。趣味性页面设计吸引用户浏览，同时注重更舒适的信息的识别与获取的体验。

信任体验。用户更多地会选择可信赖的网站进行使用，网站为用户营造一种可靠感。针对用户有购买产品的需求而设立“Furny商店”，提供便利的周边产品和家具产品分类，购买采用链接形式，以大家常用的淘宝为平台进行交易，增强用户购买时的信任感；再如“联系我们”则采用界面内显示信息的方式而非新打开一个界面，提高了用户使用网站时的效率，为用户节省了时间，从而获得更愉悦的体验，同时，联络信息公开透明，增加了用户信赖度，提高了可靠感，一定程度上加强了用户忠诚度。

2.3 功能架构、流程、原型设计

Furny功能架构见图2,Furny流程图见图3,Furny原型设计见图4。

2.4 界面及视觉设计

2.4.1 Logo及图标设计

由于本网站汇集世界经典家具设计，家具形式多样，交互动效、画面丰富，因此为尽量避免视觉干扰，对整体的界面风格采用简约经典风格，以达到不影响家具展示效果的目的。在Logo和图标设计上保持统一性，Logo及图标设计见图5，依据经典、简约、扁平风格，通过纯色黑、白、红3种经典色彩作为图标元素设计，给人安全、可靠的感觉，增强用户信赖度，同时，图标简约大方，不会过分影响到视觉效果更为丰富的家具展示界面从而影响经典家具文化主体信息的传达。在每个单独的家具界面都有“more”图标，图标设计以红色为底色，十分醒目，可以引导用户去点击，从而了解更多相关信息。

2.4.视觉及交互动效设计

界面整体以简约大方为主题风格，主页以蒙德里安三原色彩色标签导航为主体，吸引用户眼球，随后用户可点击进入各个家具界面，或通过顶部下拉导航进入其他功能页面或信息页面，各信息界面设计见图6。在各功能及信息界面设计中统一采用黑、白、红3色作为主色，同样采用极致简约的设计风格，界面规划清晰有条理，用户学习时间成本低，从而提高学习效率，同时提高使用愉悦感。以主页为例，将Logo放在用户所普遍习惯的页面左上方，下标置于页面底部，关闭图标置于右上角，导航位于界面顶部，界面中心为各个家具界面的引导标签，色彩上采用蒙德里安作品经典色——红、黄、蓝及其邻近色为主色调，色彩时尚、饱满。家具标签采用可以通过鼠标或触屏进行左右滑动，最中心的家具标签突出最大，以表示用户当前所选为该标签。













各家具界面设计见图7，以经典家具本身设计文化内涵为中心进行相关界面设计，将与其设计内涵适宜的交互动效融入到各个界面设计中，在交互动效设计与平面视觉设计的共同作用下，完成经典家具界面的设计。




在各个家具展示页面中，视觉设计部分将重要内容如家具产品及介绍明显且清晰展示，同时具有一致的元素色彩及品牌识别性；界面设计部分页面布局清晰，交互和非交互元素区分明显；导航设计部分导航分类清晰；信息设计有通俗易懂的文案和清晰的选项；信息架构中信息分类清晰、层级关系明确、任务路径清晰；交互设计部分具备及时的操作反馈、操作结果符合用户心理预期、避免了重复或过多的操作、遵循惯例；功能规格部分提供了用户需要和期望的家具信息库功能，同时对较为复杂或特殊的的操作给予帮助；内容上为用户提供了必要但不过多的家具信息。

在使用时所涉及的界面采用细腻贴心的加载效果体验、易于理解和操作的互动动效、清晰明确的导航系统、适当但不过多的信息提示，使设计容易被用户理解以保证其易用性。

植物椅界面见图8，它由英国设计师R&E Bouroullec设计，该椅子的特点是如植物一样自然生长的结构，植物在园艺技术的影响下按照一开始所设定好的形态生长，而该椅子也是仿照植物汁液似得通过液态塑料流动制成，这也是椅子的生长概念在工艺上的体现。在此设计理念的背景下，在界面设计上采用了植物元素，以生长的植物作为界面内的视觉中心，将植物椅放在视觉中心偏右处，与生长的植物互相配合，在页面右上角设有花洒图标，并给予用户明确的文字提示，用户通过点击右上角花洒图标，触发下方植物生长，通过模拟植物浇水形成生动形象的植物动态生长效果帮助用户更深入理解植物椅的设计理念。左侧是植物椅简要介绍及更多资料链接“more”图标，用户可点击“more”图标进入链接页面获取更多相关图片、视频、文献资料等，为用户提供全面、可靠的学习资源。

2.5 基层语言及响应式设计实现

2.5.1 基层语言

根据界面和交互动效设计，所需要的基层语言有HTML5、CSS3、JavaScript。对一个网页来说，HTML用于网页结构的搭建，CSS用于网页样式的描述，JavaScript用于网页相关设置。HTML5是该语言的第五次重大修改，其优点是可以提高可用性及友好的用户体验、支持多媒体元素、能够代替Flash和Silverlight，支持多种设备，支持跨平台，支持自适应网页设计，支持即时更新等。CSS（层叠样式表），样式定义如何显示HTML元素，其语法为selector{property:value}(选择符{属性：值})[11]。CSS3是升级版本，向着模块化发展，现已有更多的模块加入，大大缓解了曾经只有一个模块盒子所造成的庞大与复杂程度。JavaScript是一种脚本语言，其源代码在发往客户端运行之前不需经过编译，而是将文本格式的字符代码发送给浏览器由浏览器解释运行，支持跨平台。可以为网页增加动态设计。

2.5.2 响应式设计

在本网站的设计中采用响应式设计，以适应不同屏幕尺寸，而不是仅仅局限于某一种设备尺寸。响应式网页设计是Ethan Marcotte在2010年提出的，最初是指可以自动识别屏幕宽度，并作出相应调整的网页设计，现扩展为页面的设计与开发应当根据用户的行为以及设备环境，能够进行自动的响应和相应的调整，做到“一源多屏”[12,13]。

2.5.3 调试与发布

网站交互的动态网页制作过程的最后，即为网页调试和发布。很多问题是在调试过程中才被发现的，随后及时对此进行修正，以求达到设计时的预期效果，以便在发布后本网站能够更好地为用户服务。调试期间，首先以电脑端为基准，对界面和交互动效进行调试，方案确定后再将网站进行响应式移动端与电脑端协调调试响应式设计，以潘顿椅界面为例，调试出适应不同尺寸设备界面效果，Furny响应式设计见图9。最终经过32次的细节调整完成调试，及制作后台、完善数据、发布网站。发布后，对网站进行及时查看与确认，发现问题及时解决，以确保用户正常使用。

2.6 网站维护、优化与更新

体验的优化、数据的更新、以及用户的问题与建议是十分重要的。用户通过提交反馈及上传相关家具资料实现用户与本站之间的沟通交流。不仅要主动对网站体验进行优化处理，而且要深切结合用户反馈信息，定期对网站所回收的用户数据进行处理、分析，进一步对本站进行设计及技术上的优化处理，作出适宜的改进以及数据更新。

3 结语

在互联网盛行的时代背景下，随着HTML5、CSS3、JavaScript技术的改进和开发，这对设计和实现一个具有优良互动和舒适用户体验的网站是十分有利的。将互联网与经典家具设计文化相结合，将科学技术与艺术形式进行创新性融合[14,15,16]，使经典家具设计文化以现代人最易接受的互联网形式推广、传承。项目通过新媒体形式下的交互式网站设计实践将经典家具呈现在公众视野面前，展示的产品能与受众产生互动，为用户提供最直观的展示方式、趣味性设计和独具特色的空间，让用户产生愉悦感，获得更舒适的用户体验，使受众群体由传统的参观者变成能亲自参与的体验者，普及家具文化内涵[17]，使更多人关注、了解中外经典家具设计，同时辅助相关教学研究。