用户体验设计

网页表单是一个老生常谈的话题。出于这样或那样的目的，一些示例中都会包括用户注册，电子商务结算，用户设置甚至联系人表格。而输入栏是非常容易用现代的CSS3技术来应用样式。但是到底什么决定整体用户体验？ 在这篇文章中，我想展示一些免费的开源jQuery插件来帮助开发者创建更简易的web表单。访问者不用太多的犹豫就能完成表单的填写。你也许不想太过华丽页面元素，它会干扰手头的任务。考虑这些附加的特性，它就像一个用户指南，能帮助用户填写表单，而它们又涉及到唯一的或者不熟悉的内容。 jQuery Autotab 自动挑格是个很棒的功能，这个功能我们完全可以从头开发。但是如果你想节省时间的话，可以选择 jQuery AutoTab 这个强大的插件去简化这个功能。当一个字段达到最大长度时，jQuery AutoTab将会检测到，并自动跳到form表单的下一个元素中。 所有的input标签都是由以逗号间隔的字段组成的长字符串作为jQuery选择器来创建的。我喜欢这样的方式——使用这个插件，基于每个字段的tabindex属性，动态的，而不是手动地定义每个元素。它还有非常酷的过滤功能，以供你输入不同的内容，例如，数字的电话号码，或数字字母组合的街道地址。你可以从 Github官网 获得一个副本，来看一下这个插件是如何工作的。 Pickadate.js 不久之前

用户界面（UI）测试初学者指南 本指南介绍了有关GUI测试的关键问题：它是什么？ 它为什么如此重要？ 什么是主要的GUI测试类型和技术？ 阅读此综合指南以发现这些问题的答案，并学习如何创建GUI测试计划并编写GUI测试用例。 什么是GUI测试？ 如果智慧的开始是术语的定义，那么对GUI测试的理解必须从术语 GUI 的定义开始 。 这是 图形用户界面 的缩写 ，或用户可见的应用程序的一部分。 GUI可能包含诸如菜单，按钮，文本框和图像等元素。 第一批成功的图形用户界面之一是Apple Macintosh，它通过文件夹，日历，垃圾桶和计算器来推广用户“桌面”的概念。 早期的GUI：1984年发布的Apple Macintosh。 图片来源： folklore.org CC许可 在当今的GUI测试环境中，“简单计算器应用程序”不再局限于计算机的桌面。 它可能是在所有主要移动平台上可用的移动应用程序。 或者，它可能是所有主流浏览器都必须支持的云应用程序。 测试人员必须执行跨浏览器和跨平台测试来识别缺陷并确保应用程序满足所有要求。 因此，GUI测试是指测试用户可见的应用程序的功能。 在计算器应用程序的示例中，这将包括验证应用程序是否正确响应诸如单击数字和功能按钮等事件。 GUI测试还会确认外观元素（如字体和图像）符合设计规范。 UI测试与GUI测试一样吗？

Task（1）：基于我们列出的 7 条UX评价准则，分析『 南通大学-教学综合信息服务平台 』 在用户体验设计方面让你觉得满意的地方（不少于2点），请陈述理由。 1.界面都为统一蓝白色调，比较简约和赏心悦目。（符合UX设计评价准则中的界面符合惯例） 2.各页面中英文自由切换，满足不同国家学生需求（符合UX设计评价准则中的适合各类用户） Task（2）：同样，分析 “ 南通大学-教学综合信息服务平台 ” 在用户体验设计方面让你觉得最不满意的地方（不少于3点），描述现象、陈述理由、给出建议。 1.初始登录的用户名和密码过于简单，若信息被盗取冒用，会出现各种意想不到的情况。 ps：高中时用的选课系统就因为用户名密码太过简答，导致我的号被盗取无法选课的情况，当时真的非常麻烦，那次被盗的太多甚至使得学校被迫重置了选课系统（违反了UX设计评价准则中保证用户控制权一条，用户极易丧失控制权） 2.临近期末，大家最关心的考试安排却迟迟不出，再加上开学初那时课表查不了，系统进不去的情况，我认为这个平台做得太差了，如果一个教学信息平台都不能及时给出学业方面的信息，那这个平台无疑是失败的，各种考试和课程的信息完全靠辅导员班委给出，效率低下还容易遗漏。（违背UX设计评价法则中给用户及时反馈，消息最重要的就是及时性，要是等到课上了一半课程表才出来，期末考试全部结束了考试安排才姗姗来迟，那我们还要这个平台干什么

Task（1）：基于我们列出的 7 条UX评价准则，分析『 南通大学-教学综合信息服务平台 』 在用户体验设计方面让你觉得满意的地方（不少于2点），请陈述理由。 1.界面符合惯例，使用用户名密码登陆，简洁明了，也可用用户扫一扫登陆，操作简单。 2.适合各类用户（不绝对）。适用于教师和学生共同登录，满足网站存在的需求。 Task（2）：同样，分析 “ 南通大学-教学综合信息服务平台 ” 在用户体验设计方面让你觉得最不满意的地方（不少于3点），描述现象、陈述理由、给出建议。 1.违背“界面符合惯例”原则。 理由：小界面混在一起，看起来很乱，很多是不用看到的东西，没有必要都放在登陆进入的首页。 建议：将通知等放入导航栏。 2.违背“用户控制权（主人）”原则。 理由：无法返回至上一个界面，增加了用户使用的烦恼。 建议：建立索引、整体导航栏或者超链接等解决问题。 3.违背“一致性和标准化”原则。 理由：即使将语言转化为英语，通知和文件还是中文的状态，不能够满足每个人的需求。 建议：全部转换为英语，从而符合标准化，与周边文字达成一致。 来源： https://www.cnblogs.com/lxy716/p/11992956.html

Task（1）：基于我们列出的7条UX评价标准，分析“南通大学教学综合信息服务平台”，在用户体验设计方面觉得满意的地方，请陈述理由。 1.系统提供中英文两种语言选择，方便不同的人选择适合自己的界面。 遵循适合各类用户的设计准则。 2.进行课表查询时可以及时作出回应反馈。 遵循给用户及时快速反应的设计准则。 3.用户可以根据个人所需添加自己经常使用的应用或需要的应用。 Task（2）：同样，分析“南通大学教学综合信息服务平台”，在用户体验设计方面觉得最不满意的地方，描述现象，陈述理由，给出建议。 1现象：分类较多，且有些分类意思相近。让我选错分类且不想继续看分类。 理由：容易造成选择错误。违背了给用户提供必要的提示和帮助文档的原则 建议：减少分类，可将意思功能的相近的组成一个大分类。 2.现象有些功能并没有完善，便将其放在界面。 理由：显示不出与其标题相符的信息。浪费资源 建议：暂时没有完善好的的功能撤下。 3.现象：进入不了系统，出现错误 理由：一旦连系统都进入不了，很容易给用户“系统很差”的第一映像，给系统软件“差评”违背了给用户及时快速反应准则。 建议：尽量保证后台服务器可以保证系统的正常运行。 来源： https://www.cnblogs.com/zhang100/p/11991348.html

Task1： 一、给用户及时反馈 理由：响应速度较快，很少出现延迟 二、必要的提示和帮助文档 理由：红色字体很好的提示了第一次使用的用户（如果没有这几行字体我差点登不上系统） Task2： 一、界面符合惯例 理由：1、信息显示不够直观，第一眼看到这些数字不能直截了当的知道这些数字的意义。 2、课表应该做到第一眼就能看到每天有哪些课，而不应该做的视图那么大，一张课表要两个屏幕才能看完。 3、不同条目的前置图标基本相同，不写详细内容的前提下，图标也不加以区分。 建议：1、课表内容应精简，显示较为重要的任课老师、课时等信息即可，其余信息可以将课程名制作成超链接，另外点入查看。 2、用心设计图标，让用户一眼就能知道各条目的不同 二、一致性和标准化 理由：全英文情况下依然显示有中文，图片里的中文也依然有中文 建议：1、为英文模式设计专门的图片，并且上线系统前仔细测试，登录系统按理来说应该是最先测试的才对，无法理解登录界面都会有遗漏 三、界面符合惯例 理由：每次点开管理我的应用，对话框总是不能完整出现在屏幕的正中间 建议：好好针对不同的显示尺寸优化对话框出现的位置和比例 来源： https://www.cnblogs.com/pjs199999/p/11990797.html

•　　产品经理 　　–　　注意，有的团队中并没有完整的UED 团队，很多时候产品经理需要承担UED团队里面 　　　　的部分工作职能，例如交互设计，项目管理等。 •　　交互设计 •　　视觉设计 •　　网页重构 •　　项目管理 　　–　　由于一个UED团队可能承载多个UED项目，所以当多个项目在同时进行的时候，需要有 　　　　　项目管理这个职能来对整个团队进行工作上的组织和管理 ------------------------------------------------------------------------------------------- ♦　　UED团队中常见的输出物与作用职责 ①　　产品经理 　　–　　输出 　　　　•　　用研文档 　　　　•　　竞品分析文档 　　　　•　　产品需求与需求文档分类 　　–　　配合工作 　　　　•　　协助UED相关人员对产品的调性进行把控 　　　　•　　协助UED相关人员进行测试与组织管理 ②　　交互设计师　　 　　–　　输出物 　　　　•　　完整产品原型图含交互设计 　　　　•　　用户使用流程 　　　　•　　产品信息结构图 　　–　　配合工作 　　　　•　　交互设计，测试交互还原度 　　–　　工作职责 　　　　•　　为产品设计具体的行为，界面设计，组织良好的产品信息结构， 　　　　　　提高产品的可用性与易用性 ③　　视觉设计师 　

Task1 满意之处 （1）在登录的时候下方有登录密码提示信息，对于像我这种不怎么登录教务系统不记得初始密码的人来说是非常方便的。 体现了UX设计原则第五条“适合各类用户（不绝对）”以及第七条“必要的提示和帮助文档”。 （2）页面布局整体比较整洁，且重点关注消息有标识，比较明了。以左右板块的形式，符合一般人使用习惯。 符合UX设计标准第二条“界面符合惯例”以及第四条“一致性与标准化”。 （3）响应式布局，适合于分屏和在手机上浏览网页的用户，体现了UX设计原则第五条“适合各类用户（不绝对）”。 Task2 不足之处 （1）一打开页面就看到了左边很大的一块空白区域。鉴于多数人都没有添加应用，用这么大一块区域，还放在左上方似乎有点浪费空间了，而且不够美观。 有一个系列位置效应提过系列中的第一个和最后一个项目更容易被用户记住，所以这一块空白是没必要的。 此外还带来一个问题就是在屏幕缩放时，最上面的就是我的应用。 违反了UX设计原则第二条“界面符合惯例”。 我的建议是调整一下全局页面的布局，把用的少的模块放下面，并减少所占面积，用滚动条。 （2）成绩查询时无法显示相应信息。 违反了UX设计原则第一条“给用户及时快速反馈”。 建议做好这一模块，用户一点击就能分页显示成绩信息。 （3）课表只能批量下载，不能先预览。对于只是想查看课表的人来说是不方便的，下载这部也是多余的。

Task(1):满意的地方： 1、“我的应用”部分。用户可以根据自己的需求设置常用的工具。例如：学生、教职工的常用工具是不同的，这样就是不同的用户更加方便快捷。符合“适合各类 用户”的UX设计评价准则。 2、“登录”时，下面有提醒文字。使用户更加准确无误的登录。之前登录某款软件，登录时没有表明是用学号还是身份证号，结果两个都得试一下。符合“必要的提示和帮助文档”的UX设计评价准则。 ·Task(1):不满意的地方： 1、很多工具都需要用户自己“探索”。例如：“我的应用”用户可能一开始并不知道是可以根据自己的需要添加工具，可能会认为那么大的空白无用。违背了“必要的提示和帮助文档”的UX设计评价准则。 2、课表在手机上的显示一言难尽。即使导出后也不符合了“界面符合惯例”的UX设计评价准则。 3、在维修期间，用户可能无法进行任何查询，不方便使用。违背了“帮助用户排除软件缺陷”的UX设计评价准则。 建议：最大的建议是提供一些必要的帮助文档，方便用户使用。其次，有些地方不符合用户的查看要求，例如，表格要适应手机的显示，没必要做的那么长，可以做成正常的表格，利用放大缩小的方式，这样应该更符合用户查看的习惯。最后，根据小范围的调查，90%的用户不喜欢此页面，8%的人表示不关心。 来源： https://www.cnblogs.com/xurui789/p/11963757.html

♦　　学习理解互联网产品用户体验设计（UED）相关知识 　　–　　什么是UED 　　–　　UED 具体包含什么内容 　　–　　普通产品团队的UED工作流程是什么样子的 　　–　　UED 团队是怎么分工的 　　–　　每个UED 的智能 　　　　•　　主要工作内容 　　　　•　　主要输出 　　–　　UED 团队间的相互协作 ------------------------------------------------------------------------------------------------------------ •　　用户体验设计（简称UED） 　　–　　User Experience Design 　　–　　UED 的通常理解，就是 “我们做的一切都是为了呈现在恁眼前的产品”。 　　–　　UED 是针对用户心灵，眼睛，耳朵，触感的设计 　　–　　用户体验就是用户在使用一款互联网产品的整体感受度 •　　UED 相关的一些概念 　　•　　UE 　　　　–　　User Experience 　　•　　UCD 　　　　–　　User-Centered Design 　　　　–　　以用户为中心的设计-强调以用户体验优先的产品设计理念，是一种思想 　　•　　HCI 　　　　–　　Human-Computer Interaction 　　　　–　　人机交互 　　•