用户体验与网站建设

1、建设 2用户体验与主要内容：（一） 以用户为中心的设计（二） UE 用于首页设计（三） UE 在细节中的体现学习目标：（一） 了解 UE 用于首页设计中的方法（二） 了解 UE 在细节中的体现（三） 了解用户为中心的设计（一） 以用户为中心的设计1、感官体验2、交互体验3、浏览体验4、情感体验5、信任体验如何站在公司的角度设计的用户体验一、感官体验所谓的感官体验就是呈献给用户视听上的体验，强调舒适性。一个要想吸户给用户带来好的体验，首先就要有一个好的设计风格，简洁明了颜色搭配看起来比较舒适，那下面我要讲到的几点可能并不全面，但基本代表了用户在打开一个时感官上的感受。首先设计风格要符合大众审美，

2、并具有一定的引导性。那么在这里我要强调一下在设计之前，你必须要明确目标客户群体，并针对目标客户的审美喜好进行分析，从而确定的总体设计风格。再来说的 logo 既要确保品牌的清晰展示而且又不能占据过分的空间。那关于页面的速度正常情况下尽量确保页面在 5 秒内打开。字体的大小呢，应该保证的 14px，网页浏览的分辨率是 1024x768，最后呢要说的就是搜索框。搜索框的设计要方便用户，最好能增加智能所搜功能。当用户输入一个简短的词语以后，搜索会为其二、交互体验最相关的词语。交互体验就是呈现给用户操作上的体验，强调易永和可用。对于一个简便性，功能的易用性是最为重要的。来说，操作的一般的和用户的交互方

3、面主要会涉及到以几个方面。 这里就来看看淘宝的会员时怎么样的。首先是会员申请，这里就需要介绍清晰的会员权责并提示用户确认已阅读条款，其次就是会员，关于这个流程大家都希望清晰简洁，并且尽量的减少填写步骤。详细的资料可以等到会员成功之后进行完善。再次呢就表单的填写，表单填写时因尽量采用下拉选择，须填写部分须填写要写的内容并对必填之段做出限制。三、浏览体验下面接着再来看浏览体验，浏览体验就是呈现给用户浏览上的体验，强调吸引性。的浏览体验方面应该始终贯穿一个，就是要么能够帮助用户解决问题，要么能使用户得到。在浏览体验方面一般包含这么几点：导航，清晰明确，让用户看到导航，就很明了这个能给我提供什么东西。

4、栏目的层级最多不超过三层，让用户在浏览首页时，最多点击三次，就可以阅读到你想要的内容，内容的分类对于同一栏目下，不同的分类需清晰明确，不要互相包含或者。内容的丰富性，每个栏目，应确保足够的信息量，避免栏目无内容出现，那关于内容的性，尽量多采用的内容，以确保内容的可靠性，确保信息稳定的更新频率，以吸引浏览者经常来你的。四、情感方面的体验那么什么是情感体验呢？这里所说的，针对的情感体验，就是呈现给用户心理上的体验，强调对用户的友。通常在制作方面。情感体验包含以下几个方面：客户分类将不同的浏览者进行区分。友好提示：对于每个操作，都是以增加浏览者的亲和度。那会员交流呢：则是提供便利的会员交流，如、博客

5、还有一些的互动方式来增进会员的感情。这里可以参看下百合婚恋网，首先进入的时候，就有很温馨的欢迎语， 用户欢迎你，看到这样的话，是不是会感到比较温暖呢？是不是自然增加了的亲和呢？而又让会员进行了分类，根据客户需求的不同而提供了相应的服务，并且还增加了会员的活动区域，在增加会员感情的同时，还促进了配对的成功率，自然也就达到了本身的一个目的。五、信任体验那现在呢要说的就是信任体验，浏览了一个，似乎就忘了呢？还是收藏起来进行下次光顾呢？这个与给的信任度有很大的关系。那信任体验就是呈现给用户的可信，强调的可靠性。一般的用户都会看以下几个方面，公司介绍，公司规模，发展状况，公司资质等。服务保障可以将公司的

6、服务条款以及用户的权益精心列出，增强客户的信任感。备案主要是让浏览者去确认的，认证资质点进去就会出现的页面。、比如；的位数，等等，避免一些无效的信息，那最后就是表单的提交，表单填写后需输入，以防止软件，提交成功后呢还显示感谢用户的提示语。回顾讲完了以用户为中心的之后，来做一个小小的回顾，看看你记住了多少？主要有五方面的内容，感官体验、浏览体验、交互体验、情感体验和信任体验。接下来看看UE 用于首页设计中，应该从哪些角度去进行？我主要会分三个方面去讲解，分别是：如何站在公司的角度设计用户体验？如何站在用户的角度设计用户体验？他也是本小节的重点内容，请特别注意。最后一个，如何站在行业的角度，延续行

7、业长期培育起来的用户。下面，就来看一下如何站在公司的角度设计的用户体验。六、如何站在公司的角度设计的用户体验社会竞争相当激烈，同一个类型的同时有上万家在竞争是不足为奇的，所以在竞争中，一个的主页就显得格外重要。主页不能放过任何一个可能或者正在甚至过的用户，大家都削尖了脑袋想办法争取尽可能多的用户，那么对于任何一个你的用户你就要了解他第一次打开你的他关心的是什么。进入一个都会带着“这是什么？这个上有什么？我能在这个上作什么？我为什么应该选择这个是最基本的需求。？”这样的问题，其实，这就是作为用户一个下面，就以阿里巴巴为例看看它是如何表达着四个问题的？第一个问题，阿里巴巴是做什么的？看完这个 lo

8、go，如果你还不知道，接着你的视线 会从 logo 的位置向右移，看到导航，还不知道是做什么的呢？天哪，好吧，紧拖动滚动条，浏览一下整个网页。第二个问题：我能够在这里做什么？从阿里巴巴首页右上角的导航条，很明显的就已经告诉用户，用户可以在这里可以采购和销售，这是主打服务，其他的就要看用户的需求了。第三个问题，上有些什么？如果前两个问题你在阿里巴巴上已经没有疑问了，那么这个问题阿里巴巴已经在主页上很好的回答你了。第四个问题，为什么我应该在这里？商人的和企业做生意的地方，这句话的效果么？我是做什么的？为什么你要来？（二） UE 用于首页设计1、如何站在用户的角度该去设计 UE？一、如何站在用户的角

9、度该去设计 UE？站在用户的角度该如何去设计 UE？用户在浏览时，首先看到的就是的导航，导航栏就是设计中最重要的元素，因为用户很难在用户没有导航的情况下去浏览一个里的内容。因此，一个设计合理的导航栏，能令用户浏览到感的内容。不要小看哦，他已经很好的回答了你这个问题了。好，通过阿里巴巴的这个例子，我已经告诉各位看官，主页的第一个任务就是：体现站点的标识和使命，主页要告诉用户，我这是什导航栏最重要的任务是明确指向的各个部分的内容，但这些内容很难通过一两个关键字来表达清楚，因此，要采用描述性的导航栏可以让访客在点击之前就能了解到自己将能看到什么方面的内容。导航要给出服务的盖帽。需要包括内容，我能在这

10、里找到什么？也要包括功能，我能在这里做什么？还有这些服务是如何组织的？这些工作一般由持久的导航来处理，其实，一个的导航时非常重要的，它是的通道，通道如何设计才能让用户方便快捷的到他想去的页面，这也成了导航中考虑最多的。（三） UE 在的站内搜索细节中的体现1、2、3、4、5、6、的成功取决于用户是否经常来访？用户的主页如何延续长期以来培养的用户呢UE细节一、的站内搜索的站内搜索来讲就是一个或者网上商城的大门口，现在的用户越来越懒，为了节约用户查找商品或者是信息的的时间。于是，站内搜索在形式上包括了两个方面：搜索和搜索结果页面。站内搜索已经成为电子商务主导航的标配，因为有了站内搜索，用户可以精准

11、的找到所需产品，从而也提高了的转换率。现在随着海量信息的涌现，几乎每个都会有自己的站内搜索。像一些交友，会员数量上千万，如果没有良好的站内搜索，根本很难找到匹配的会员。还有资讯类的，因为信息量巨大，所以必须要有这样站内搜索来方便用户阅读的内容。导读的导读就像是杂志的封面一样，肯定要用一些有内容的暗示来吸引客户。内容部分应该写出最新、最好、最热门的内容片断，应用的比较多的就是购物类型的，比方说热卖商品，劲爆等等。而在资讯类的里，比较常用的是热点专题， TOP 排行榜等这些比较有吸引力的词，会给用户浏览起到很大的引导作用，有助于提高的粘度和提高的 PV。现在一般的都很注意 这方面的体验了。导读是近

12、几年出现的一种标题形式，主要是方便人们阅读，激起人们阅读的。二、的成功取决于用户是否经常来访？如果说的成功取决于用户是否经常来访？那么的主页就应该有一些经常更新的内容，即使是不需要固定者的，也需要有一些活跃的迹象，哪怕只是一个最近的，你就得告诉用户，这里并不是一潭，内容更新的频率，代表着的活跃度，同时内容更新的频率越高也往往意味着内容更丰富，对于建立在行业内的性是相当重要的。现在的基本都是根据日新显示更新频率，这样根据时间的先后顺序来查找信息，而且还可以根据日新进行归导，方便用户阅读。这些看似小小的改变，其实，对于用户来讲就方便了很多。三、用户用户时体验一个的开始，用户登录流程，应该尽量简单，

13、符合用户浏览的。那么有很多的相当的复杂，就会给用户带来极大的不方便，应该尽量好辨认，这样也方便用户更快更省事的登录你的。如果还使用了会员制，那么主页应该为新用户的和老用户的登录提供或者直接的登录框，免得用户到处去寻找。那至于是提供呢，还是提供直接登录框呢？是粘性较强还是较弱，是老用户多还是新用户多等等这些问题都是要还有页面位置该不该腾出一个地方出来放置登录框，用户的设计师来进行衡量的。会是怎样的？这是有关于登录框的问题，可以在课下翻阅的资料来进行学习，那在这里，想告诉大家，尽可能的简化，用户登录的流程讲一种理念而已。一开始接触快捷方式这个词语，都是从桌面上这些五颜六色的图标开始的吧。快捷方式是

14、一种快速打开文件、文件夹的方法，它是应用程序的快速。那么的快捷方式就是首页提供给用户经常或感的页面或者产品的。用户最常的，值得在主页上放置的，免得用户去寻找。现在很多的快捷方式都是一厢情愿的，不是用户经常那些内容，就把那部分内容以快捷方式的形式体现在首页，而是方面最近推出了什么新业务？有什么样的新？把这些内容作为了快捷方式。那认为呢，最好的快捷方式就是根据特点来考虑，看看你到底给用户考虑的多，还是为自己考虑的多，这样，你就会知道你的快捷方式里，应该改成显示什么样的内容了。四、的主页那牌的友情能显示的做好之后呢，还是要在主页上预留出来空间，用来放置交叉推广，合作品等等。必须要在网页代码中，找到的

15、名称。和名称来。而且浏览网页的时候，那关于友情呢，主要有以下几种，第一种，文字。第二种，logo。第三种，同时支持文字和 logo 的。并且你放置的这些友情最好都是和自己行业内部的，或者说比较相近的，这样用户在来浏览你的时候，就会感觉很正规。另外，他也可以通过友情来其他自己感的。的主页应该让用户想要的任何东西简而易见，如果用户想看的内容分散在各个角落很难找到的话，你想想看，会出现什么样的。对了，他自然不会喜欢你的，也许，仅此一次后，不再浏览你的首页。当然，我并不是说把了。那么，你需要做的是，将用户想看的内容合理的放置在的所有东西都罗列出来，那怎么办呢？那如何将上的内容尽可能展现清楚的前提下又不

16、影响页面的美观呢？开动一下你聪明的大脑哦！可以将你上的信息归类设计，根据产品服务特点或用户搜索进行，总之，只要上，懒散和杂乱的东西穿起来，再以列表的形式呈现出来，就像这样，用户进入你的网站之后，是不是也能在这些信息中，很快找到自己最需要的呢？其实的主页还应该让用户看到一些很的、用户也许会感的内容，就算用户并没有寻找他们，这样不仅会增加的粘度，还会增加的浏览量。还有这样的一种状况，比方说，一个本身设计的比较复杂，不是很易用，用户第一知道一个，他无从下手，不知道在哪里，不知道该怎么使用？不知道这个时候，他们很需要的就是使用说明或者帮助之类的，这个时候呢，作为设计者来说，需要给用户提供一个的使用帮助

17、，告诉用户到这个以后，应该是怎么样的一个流程，在用户清楚的知道每一个步骤是什么？在这里可以详细的告诉用户的会员等级制度，各种使用说明的帮助，尤其适用于电子商务型的。、五、如何延续长期以来培养的用户呢？现在，就让来看看站在行业的角度，如何延续长期以来培养的用户呢？对于一些者来说，主页将是你的给他留下好印象的唯一机会。那么具备一定的备案和资质，对于建立起用户的信任度来说，有很大的帮助，运营备案的目的，就是为了防止在网上出现的的经营活动，打击不良信息的。可以看下当当网和阿里巴巴首页的最下方都具有备案的资质。一般来说，有这样备案资质标识的的用户来讲就会感觉比较安全可靠，也会给人很正规的感觉，这是在形式

18、的体现。外好，到这里，关于 UE 用于的首页设计全部内容都讲完了，你记住了多少啊？想想看吧。嗯，在这个专题里，讲了三个部分的内容，首先呢，是站在公司的角度，如何设计 UE？还记得不？是用阿里巴巴的作为一个分析。其次呢，主要讲了，站在用户的角度，如何设计 UE？共涉及了十个方面，分别都是什么呢？大家跟我一起来回忆一下。的导航，站内的搜索，导读，的内容更新，登录，快捷方式，友情，让用户看到他正在寻找的东西，告诉用户还有他没有找到的，告诉用户从哪里开始？最后呢，咱们讲了站在行业的角度，如何设计 UE？主要涉及的备案和资质。六、UE细节前面，学完了 UE 如何用于的首页设计？那在这个部分，我要给大家讲

19、的是 UE在细节中的体现。的设计中，有导航条、表单设计、字体行距、空白、比如：去了一个，歌曲，当你了几曲或者收藏几首后，系统会自动的根据你的行为，给你提示，你可能会喜欢的歌单。还有，现在去淘宝购物，购物结束后，系统会自动提醒你，看看和你了同样商品的人，他们还了什么？另外，他还会根据你的收藏和行为给你些，比如：猜你会喜欢什么？虽然这些界面可能并不是你想要的，但是感觉比较温暖，你会觉得的服务比较周到，这样的，相信你下次还会去选择的，不是吗？表单聚焦、404 错误页面等元素，可以说，每个页面都是由以上各种元素组成的，因此，对于网页用户体验来说，就是如何组合并设计的一些东西。细节成就完美，无论是企业，

20、个人博客，或者购物，。都希望能吸引者并且给他们留下愉快的体验。那下面的十条提高 UE 的通用方法，相信会给大家以后的工作带来一些帮助。那接下来，就来看看第一个方法是什么呢？先来看看第一个方法，当前位置导航，就是说，要让用户在任何时候都知道自己生成的模块，或者在浏览那个分类。比如浏览爱美网，你浏览到了哪里？页面上方一般都有会让你知道自己当前位置的导航条，即是你现在在哪里，是通过那些页面到达的？对任何来说，这都可以极大的可用性。在这一点上，创建当前位置导航可以算是的可用性方式之一了。还有比较重要的一点需要注意，你的导航显示鼠标划过后，颜色不同。这是很多所不注意的。但是，爱美网的导航设计上，这一点就

21、做的比较好。随意将鼠标放在导航的任意内，这时候，字体的颜色就变了，这让很容易就区分出那些文字是可以直接点击，这样在很大程度上，增强了客户的浏览体验。现在有很多的都设计了这样的功能，就是设计可用的表单和按钮，究竟是什么意思呢？就是可以通过改变鼠标指针形状的方式来提醒用户，这个地方是可以进一步点击的地方还有一些用户可能没看到的内容。将这个图里的小手指示的地方可以看到蓝色，就是在提醒用户可以进行这个操作，这个，只需要一两行代码就可以了，然后就可以进行实践了，那具体的实践方法在章节里会有详细的讲解。那做成这样之后，用户很容易就会知道这个链接是可以点击的，让用户可以更加准确的找到自己所需要的信息。我认为

22、呢，的 logo 如果不能到的首页，是一件令人很沮丧的事情。那恰恰有很多的并没有这样做。用户表明，这样做是很需要的，用户需要他。如今越来越多的给 logo 加的重要性。用户以及不满足于标记类的文字，他的希望，点一下 logo 就可以回到首页。拿金融界的来作为一个例子，你看看，在进入以后，浏览了很多页面的内容以后，这是你又想去看看首页上的某条信息，这个时候，你要点击页面左上角的 logo，你就可以轻松的回到首页了。这对用户体验来说，是非常不错的，省得用户满屏幕的找返回首页的按钮。这里，我再给大家讲一个可以可用性的小细节，就是增大网页面积帮助用户更方便的浏览网页，究竟怎么做呢？那我来告诉你一下，他

23、只需要你增加周围的 padding值。那什么又是 padding 值呢？其实 padding 就是内容与边框的空隙。看看这吧，你就会对 padding 会有的认识。那增大了 padding 值，就可以增大网页的点击面积，这样的改变对任何一个人来说，都是一个值得尝试的方法，因为，它可以防止用户误点或点到对于用户来说，阅读体验会有很大的帮助，可以让用户更方便的浏览网页的内容了。还有一种增强用户体验的方法，大家经常上网就会发现，就是在处于激活状态的单元素添加焦点显示，那说到这里，大家可能对这个术语并不明白，那我给大家提了张淘宝 注册的图，相信大家都一目了然了。现在这种方式，越来越成为 UI 设计的一

24、种设计，它可以让用户了解自己做了什么，在做什么。这是一种简单但有效的向用户传递有用细节信息的方式。在用户进行完每步的操作后，都会有相应的提示，或者背景颜色的改变，来提示用户那些是已经操作过的，接下来，刚才的操作，那些是有问题的？需要重新操作等等。这样，就避免了，在你进行了一系列表单的填写后的情况下，又因为前面的某个步骤出错，而导致整个流程全部重来。行距是网页设计中，经常被忽视和的地方。尽管设计师不大部分不会撰写的实际内容，不过，他们对于内容的整体组织仍然。设计师的作用就是保证内容的展现方式足够易读。那么增加行间距，也能给用户带来更为舒适的阅读体验，行距是可以从书报杂志等传统直接过度到网页上的元

25、一。这些内容的和改进已经进行了数百年，已经积累了大量优秀的经验，所以，你下次在设计之前，大可以先翻翻杂志找找灵感。那大家这，左右两边的字体行间距，是不是可以给你带来不同的视觉冲击呢？左侧标注19 的页面行间距是不是没有右侧24 的行间距看起来舒服呢？看来行间距是用户体验中非常重要的一点，大家以后在工作中，一定要牢牢记住。如今文案 3 撰写已经成为了一个很大的话题，做有越来越多的细节需要考虑，其中，对文字环境的要求也变得越来越重要。现在的大多数都主张缩减一半的内容，转了列表的形式。几乎都一样的长短，而用列表的形式呈现，比如说，这上的文字已经根本就没有给人阅读的。其实用户往往更喜欢的是一种轻松愉悦

26、的阅读氛围，这就需要的内容编辑，要用和朋友的方式来撰写文案，让用户感到一种舒适温馨的氛围，就像这样的文章撰写方式，相信也是用户所喜欢的。当用户时，看到这样一些内容，就会少一些急促感，即使他们遇到了使用上的问题，也会心情愉悦的在上用户帮助上中寻找解决的方法，而不是一遇到问题就关闭离开了。那这里，我再次说下 404 页面吧，一个设计合理的 404 错误页面不仅仅是完整性的一部分，还是的可用性的重要体现。好的 404 错误页面设计，可以大大增强的用户体验。要建立一种可以帮助他们正确找到他们错误信息提示的页面，比如淘宝的 404 页面在显示一些抱歉语的同时，还加上了搜索框，文章或是首页等等，努力的把用户留在上，而不是把责任推卸给用户，输入错误，出现 404 错误页面的格式，完全可以看见的态度和对用户的用心程度。所以，关于 404 错误页面后，以后可能会在实际的过程中，会经常碰到，千万不要忽视啊。将内容元素归类组合，是显示内容的式，你可以使用，边框，或者仅仅是使用空白，归类区分，可以创造自然和谐的用户体验，即使用户来你只是匆匆的