用户体验下的网页交互设计流程,网页设计论文

用户体验下的网页交互设计流程,网页设计论文本篇论文目录导航：【题目】【第一章】【2.1-2.4】【2.52.6】【第三章】用户体验下的网页交互设计流程【第四章】【总结/以下为参考文献】第3章用户体验下的网页交互设计流程本着一切从用户体验的视角出发，就笔者在商业或平常的实践中所做的网站设计案例进行讨论，分析并总结出网页交互设计的方式方法与流程。3.1用户需求和产品应用场景分析某种意义上，产品的成功总是鉴于在对用户需求给予极大知足的基础之上，帮助企业快速的达成既定目的。对用户需求和场景的分析是产品项目起始的第一步，也是比拟重要的一步，它直接决定着产品实现的目的和大方向。在做网站设计之前，必需要深切进入的了解网站的用户群体，知晓他们都有如何的目的和需求，以及他们本身所具备的能力，有哪些困难，企业对于产品都有哪些规划和期望，主要业务是什么。只要这样才能帮助研发团队尽快找准网站的定位，明确网站设计的方向，懂得网站应该具备什么样的特性以及要实现如何的功能，进而制定切实可行的网站设计方案。在充分了解用户需求之后，随后最重要的、最不可或缺的一步就是要对用户的使用场景进行分析。用户场景分析是贯穿于产品研发全经过的一个关键环节，从产品构思、设计方案的拟定到设计制作再到最后投放市场，华而不实的各个步骤都需要建立在对用户应用场景进行深切进入研究的基础之上。同时，它也是验证产品可行性的有效方式，也就讲要将产品的规划、构思以及拟定的设计方案等切实放在用户实际使用的环境之中进行考察，以避免研发团队在对产品的把控上出现偏差，与用户真实的应用场景相背离，产生闭门造车的现象，使得产品陷入不切实际的窘境。用户的使用场景通常受不同时段、不同地点、不同设备等因素的制约。通过场景，研发人员能够确切的判定出用户群体的特征、使用习惯、使用状态等，这些往往决定了产品的主要功能。功能的设定又直接影响着网站的整体设计，包括外观界面的呈现，具备什么样的交互行为，怎样进行操作，以及带给用户最直观的印象和感受是什么。友联是一款帮助企业和用户进行实时沟通的应用软件。由此针对友联产品的特点，其官网的用户群体主要是那些强调以客户为中心、致力于为用户带来更好服务的大中小企业和机构。他们以不断提升客户的满意度为宗旨，以加快客户服务和提高在线营销水平为需求。华而不实，用户群体大体可分为两类：一是对友联产品比拟了解或使用过的用户，他们访问网站是带着某种目的，比方下载产品，如此图3.1,在改版后的友联网站中，老用户只需通过点击导航栏中产品下载的快速方式，网站就会进入一键下载的形式，自动下载友联客户端，有效减少了用户的操作步骤，避免了跳转到网站下方注册下载区域，需要用户点击下载友联的图标后才能下载。二是经别人推荐或本身无意中打开网站的新用户，他们访问网站是阅读式的，会通过阅读产品介绍、优势、成功案例、与客服进行对话等内容，在深切进入了解产品之后再决定要不要进行试用或下载。整个网站呈现简洁的扁平化风格，用明朗的色彩、条理清楚明晰的模块化方式来吸引用户，进而便于新用户更清楚的了解产品，为企业捉住网站中的潜在用户。3.2绘制合理的产品原型图原型图是将研发团队在对用户进行深切进入调研和分析后于脑海中所构成的较为抽象的产品概念进行勾画，通过绘制产品的原始模型图，展现出一个完好的用户界面，使产品愈加可视化、明朗化、详细化，它直观的展现了产品界面大体上的最终形态，是对产品整体框架构造的有力描绘叙述，也是交互设计师与项目经理、产品经理以及开发人员进行沟通的有效根据。原型设计不仅要考虑网站内容间的主次关系、界面的美观性，包括文字、位置、比例、色调等各部分因素的影响，更要考虑界面中怎样为用户呈现简洁、有效的行为方式，它是对网站内容、交互行为和界面形式的一个综合性的表示出。原型图的绘制离不开对界面层级关系的梳理，也就是要站在用户的视角按照用户获取不同内容的热切程度、用户完成任务的难易程度、网站内容间的深切进入程度、附属关系以及用户的考虑形式等对页面层级进行明确划分，使其分门别类、有条有理，任务操作步骤合理。网站的页面层级可分为第一层级页面、第二层级页面、第三层级页面，第一层级页面为网站首页，一般是对网站内容的一个大而概括的总述，展现的是网站中的核心产品、业务或服务，是网站最想要呈现给用户，通常也是用户最迫切期望看到的以及用户最常用的内容。网站的层级划分越深，子页面的内容就越具体、越具有针对性。但并非页面层级越多越好，层级的过分增加往往会造成网站的交互步骤增加，使用户的操作行为变得繁琐，网站看上去愈加神秘，一些隐蔽功能或内容很可能被用户忽视。网站中的原型图主要可根据两种类型进行划分。一方面，根据材质的不同，可将其分为纸原型和线框图；纸原型图是研发人员在纸张上以手绘形式开创建立的界面原型，它不受限于任何的设备和场所，能够随时随地及时地进行绘制和修改，更为方便、快速，但界面表现相对较为随意，规范性较差，是网站在诞生早期的最初始状态，往往也离网站的最终界面呈现具有一定的差距。线框图是借助计算机绘制的界面原型，和纸原型图相类似，都是粗略、概括的显示页面的大体布局。因此在进行线框图绘制时，不必太在意页面中视觉和形式美感的表示出，不必拘泥于细节设计，只需表示清楚每个区块的位置、内容和大致的样式即可。经常在公司或企业的实际项目中纸原型和线框图会经过研发人员选择其一进行页面布局构造的表现。另一方面，按照原型图呈现能否愈加真实，能否更贴近用户最终使用的界面形式，可将其分为低保真原型图和高保真原型图，这两者的差异不同在于对细节设计的把控上。低保真原型图指的是逼真度较低的原型图，它的绘制与纸原型和线框图相比，规范性更强，也相对更为细致，与网站真实的应用设备更为契合，对网站中的内容、行为和形式有了更明确的规定，如内容区块、版式、字体、字号、颜色、图片位置、交互方式等。高保真原型图在低保真的基础上对网站页面进行愈加深切进入的表现，它通过将低保真原型图中的各个规定逐一实现，使得界面愈加完善，更符合网站真实的视觉效果，所以高保真原型图往往也被等同于页面的最终效果图，它经常被视为设计师对界面设计的最后一道工序，随后直接交由开发人员进行开发。比方就上述友联官网的界面层级划分和原型图的制作而言，用户阅读其页面的目的是多少对产品有些兴趣，想要对其有所了解以及在对产品有所熟悉后想要下载、注册产品进行使用。而较为全面的了解一个产品需要从产品介绍、公司的经营理念、产品优势、成功案例等几个方面出发，同时页面中更要留有注册、下载、试用以及联络方式和留言板的入口，方便用户及时进行体验并给予反应，这就构成了一级层级页面，也就是网站首页的内容。首页一般是对产品较为广泛的介绍，假如用户想对产品有更进一步的深切进入了解，能够在页面中通过点击产品简介下的公有云和私有云链接，进入第二层级页面，与其平行的同为二级页面的有了解更多产品优势的链接页面。在对页面内容层级和交互行为有了清楚明晰的认识后，研发团队能够通过纸原型图，比方图3.2.1所绘制的友联官网的手绘原型草图，在经过团队成员对页面的讨论、修改直到确定后，用axure软件绘制线框图和低保真交互原型图。通过axure,可快速绘制出带注释的页面示意图，并能够对网页中的一个或多个事件设定包括鼠标点击、划过等动作，其模拟效果和网站最终呈现的交互效果几乎无异，这样更能够清楚明晰的展示网站的操作流程、交互方式以及能够自动生成符合网页规格的文件进行演示，然后结合网站可用性进行测试，最后通过photoshop软件完成高保真原型图的制作，呈现出网站的完好效果图。点菜菜是一款提供外卖服务的WebApp,是笔者为求职面试时所做的个人作品。它是针对广大用户群体面对当下由诸多店铺入驻的送餐app中所出现的经常因对卖家店铺不了解而造成选餐难的现象所提出的解决方案，意在帮助用户快速、准确的找到更美味、更优惠的商铺进行下单。它更倾向于构建一个吃货的家园，而不仅仅仅是一个网络订餐平台。在这里的每一个会员用户都有着一双擅长发现美食的眼睛，他们在追逐美食的道路上一路狂奔，好像家人一样，热爱沟通与共享。通过美食圈模块，用户能够及时看到吃货达人的美食推荐、家族成员们的晒图与讨论，更有实时优惠分享功能，获得已购朋友的优惠券共享，这种通过买家口口相传的方式不仅能够帮助用户找到更好吃的美味儿，还能够替拥有优质美食的店铺提早做了有力宣传，同时可使得商家之间构成良性竞争，有助于将点菜菜打造成一个有着高品质美食和服务的电子商务类外卖送餐平台。找准产品定位和目的用户后，首先要做的就是对点菜菜webApp的业务流程进行分析，如以下图3.2.2所示，流程图的绘制使得各个页面的主要功能点一目了然，并能够有效的帮助研发团队梳理页面层级关系，删减掉冗余的页面，为页面能有良好的交互行为打下基础。其次，根据流程图绘制出恰当的界面原型图，将手绘的纸原型图以更规范的方式在计算机中制作成低保真原型图，如此图3.2.3点菜菜的低保真原型图所示，在制作之前必需要考虑产品实际的应用设备和环境，由于点菜菜主要是在移动端进行使用的WebApp,所以在绘制低保真原型图时，要保证界面中的各个元素都能够在用户手掌的可控范围之内，尤其对于页面中的重要模块，要尽量确保用户能够依靠单手轻松地完成操作。也就是讲针对页面中各个板块的面积大小、所在位置、比例关系等，既不能太松懈也不能太拥挤，太松懈则会造成用户使用起来费力，太拥挤又容易引发用户行为上的误操作，使产品陷入难用的窘境。页面制作中的每一阶段都是一个不断修改、实时调整的经过，低保真原型图尤其如此，它需要研发人员对产品进行反复琢磨、不断讲究，最终绘制出与其相吻合的页面高保真的视觉形态图，就像图3.2.4一样。按照点菜菜WebApp,笔者又设计了一个与其相匹配的网页版官网界面，使得点菜菜这个产品愈加完好、更成体系。3.3打造友好的交互设计实现了网站的视觉界面，通过代码完成网站页面制作后，接下来最重要的一环就是对网站的可用性进行测试，使网页中的交互设计愈加友好。可用性测试是衡量网站的交互方式能否合理、交互经过能否顺畅、交互行为能否易用的有效方式，也是研发团队在产品在上线之前经常需要倾注最多时间和精神，对其进行十分关注的部分。它的测试方式方法有一下两种：第一，是研发团队对产品的自评阶段。第二，是对部分用户进行测试，针对用户的使用体验对产品进行不断改善。当一个产品已经基本完成之时，首先要做的不是对一部分用户进行测试，更不是立即上线，而是研发团队本身对产品所进行的一个自评阶段，其主要根据是Web易用性领域的领物JakobNielsen所提出的交互设计十大可用性原则。华而不实什么，系统给了如何的反应。例如，网页中的按钮点击前、点击时的状态一般是不同的，可能是颜色的不同，可以能是用户点击时会有提示，鼠标会由箭头变为手型的变化，这些差异都是系统给用户反应的有效措施，明确的告诉用户即将进行的下一步操作；二。系统应与用户所在的环境相吻合。即网页中的表述应符合用户所处的真实环境，按照用户的考虑方式使用用户最通俗易懂的语言进行表示出而非专业术语；三。为避免用户出现误操作，系统应允许用户随时能够撤销和重做。四。系统要保持一致性和标准性。也就是网站的界面、功能、操作应保持一致。五。防止用户出错；六。尽量减少用户在操作目的任务经过中的记忆负担，包含操作步骤、行为动作、选项等；七。保证系统灵敏高效，方便用户使用。八。为系统瘦身，弱化和去除无关紧要的信息；九。帮助用户判定、辨别并纠正错误，保证系统操作时的流畅性；十。必要时可通过帮助文档或使用手册，以给用户提供适时的帮助。这十条可用性原则尽管提出的时间较早距如今有一段距离，但还是当前在进行网页交互设计时或者对网页中已存在的交互形式进行检验的最有效方式，华而不实一些内容已在第二章交互设计法则中的进行了具体的阐述。通过可用性原则，研发团队可对网站中的交互设计进行有效的自评、自检，对网页中的一些不恰当的交互形式及时的进行修改。其次，最具权威的可用性测试莫属于通过部分目的用户亲身体验所得出的结论分析。即在产品的目的用户群体中抽取一些具有差异的并能够代表不同年龄层、不同文化水平、不同生活环境的用户进行调研。在他们对产品完全不熟悉且不受任何外界指导的情况下，关注他们对产品的使用经过、操作方式、每一步操作所花费的时间以及最后完成的效果。除此之外，等到被调研用户体验完产品后，不可或缺的一步就是对其进行细致的访问，了解他们对产品的认知、有哪些不好用的功能或界面、或者有哪里令人迷惑的地方、他们对产品完成结果的满意程度怎样、与同类产品相比的优劣是什么、能否考虑会再次使用该产品等。最后，将调研所统计的数据进行分析，并在产品中加以修改，使得交互行为步骤间的关系更为严密，操作上更为粗浅易懂，切实做好用户的行为引导，以最大化的减少在每个操作步骤经过中的用户流失。只要这样，才能懂得产品在用户眼中到底是如何的，有哪些需要改良的地方，才能使产品愈加贴近用户，做到真正是为目的用户量身打造的产品，而不仅仅仅是局限于站在研发人员的角度进行开发。电商通是一款为企业或个人在主流的电商渠道解决店铺中的订单处理和仓库处理的一体化的网商进销存软件。如此图3.3所示，为笔者在公司实践中所做的电商通网站界面的改版设计。能够看出，整个网站与常见的企业站所塑造的冷静、拘束、严肃的形象截然不同，页面中的视觉元素大都运用扁平化的表现手法，以灵敏的布局、靓丽的色彩进行展现，只为与电商网站的视觉风格相吻合，为用户营造出一种活泼、热闹、愉快的网站气氛，以凸显电商通这款软件的应用领域及所针对目的用户群体。在交互设计上，最突出的亮点是页面中导航栏的设计。从图中能够看出，网站中的导航以垂直式的菜单布局，悬浮固定在页面右侧，以网购人士最熟悉的、电商网站最常用的小图标的图形方式来展现各个菜单模块的主要内容，通过导航，用户可快速的纵览网站全貌，了解整个网站的大概情况。相比单纯的文字型导航来讲，视觉吸引力更强，也更能够引起用户的关注。当用户将鼠标滑到各个小图标上时，每个图标所对应的文字菜单信息就会立即展现出来，这样便于用户明确知晓当下所在的行为操作入口，能够快速进入他们感兴趣的模块，避免由猜想而造成的对菜单内容的误解和行为上的误操作。同时，针对网站老用户来讲，导航栏能够经过最下方的箭头进行折叠，以给用户展现最大的可视窗口。另外，网站中的banner设计不仅仅仅是对电商通产品的宣传与推广，而且在这里基础上还增添了两个功能操作入口，方便用户根据需要快速进入到产品详情和登录的链接页面。在交互细节上，当用户对两个按钮进行点击操作时，鼠标会由箭头变成手型标识，按钮颜色也会相应变成深色，以此与点击前和点击后的按钮状态构成区分，提示用户当下的操作行为。电商通网站的导航栏和banner中多链接的访问入口功能，都大大提高了用户与网站互动时的效率，使得用户行为操作上愈加有效、易用，进而带给用户良好的使用体验。3.4做好网站后期维护经常有这样一种情况，当网站上线后，企业或研发团队就开场松懈了，总以为产品已经大功告成，殊不知这只能算是完成了一半的工作量，后期网站在运营经过中的站点维护才是定夺网站成败的关键因素，因此愈加不能掉以轻心。时刻倾听用户的心声，关注网站中的用户反应，做好网站的维护与更新，不断优化网站的用户体验，是一个产品能否在互联网时代下推陈出新、不断进步，进行有效迭代的依归，也是怎样能够在诸多互联网产品大军中脱颖而出、具有强有力竞争、长存长青的必备法宝，更是一个企业建立良性健康发展的不竭源泉。站点维护的大方向主要由网站运营时所监测的数据指标来决定。开发者通过后端语言，可对用户行为操作进行实时监控。用户每访问或点击一次，与网站进行一次交互，就会往数据库发送一次请求，进而留下一次访问记录。此时企业或开发者通过数据库中抓取到的用户的相关信息，就能够实时把握网站页面的阅读量、点击量、访问热区、访问速度、用户在网站中的活泼踊跃时段，以及根据用户IP地址可了解网站的大概访问人数、哪些是经常访问网站的老用户、他们所在地的区域范围等，这些数据信息能够有效的帮助企业或研发团队了解网站的运营效果，知晓用户的爱好，包括用户最喜欢访问哪些页面、最关注哪些信息、与网站有着哪些频繁的交互。对于网站中用户很少关注或访问的板块立即进行修改与更换，同时，就用户在与页面交互时出现异常、报错等现象做好及时处理，真正做的一切从用户出发，使得产品在内容、行为、形式的各个方面都能够向用户靠拢，在不断优化页面的经过中，逐步逼近用户心中的产品样子容貌，让用户信服与信赖。就笔者早先在某电商企业实习的感受而言，电商网站相比普通企业类网站，更是非常注重对用户行为数据信息的采集与分析。比方在电商网站首页首屏的正区域，用户经常会看到有近10款滚动的banner轮播图作为网站的购