简介：淘宝网是亚太地区最大的网上零售及商业社区，由阿里巴巴集团于2003年5月创办，淘宝网是中国最受欢迎的网络购物及零售平台，拥有近5亿注册用户，每天新增用户1亿，常客超过6000万，日均在线商品数已超过8亿，平均每分钟售出4.8万件商品。

界面设计分析：淘宝的首页除了天猫（淘宝商城）部分，其他的都给人点进去就很乱的感觉，要找什么东西，还要一直往下滚，一个一个的找，这样只会降低用户体验，让用户觉得很烦，也懒得去寻找，所以可能会直接转到其他购物平台去购物，导致用户流失。虽然界面上有搜索框每个人百度搜索内容一样吗，可以通过搜索框搜索商品，但是并不是所有人都清楚，这样做的结果就是增加了用户的负担，从而降低了用户体验。虽然淘宝是国内最成功的网络购物网站，但是这个网站的界面设计却比天猫部分要简洁很多，给人的感觉也更好，体验也更好。所以对于我来说，如果买东西的话，一般都是去淘宝直接点进天猫商城，很少会在淘宝首页搜索自己需要的商品。

2.2 爱奇艺网页版

简介：爱奇艺是龚宇于2010年4月22日创办的视频网站。2011年11月26日，“爱奇艺”品牌正式启用并启用全新Logo。

爱奇艺自成立以来，始终坚持“畅享品质”的企业理念，视“用户体验”为生命，通过持续的技术投入和产品创新，为用户提供清晰、流畅、人性化的观看体验。

界面设计分析：爱奇艺首页的内容如上图所示每个人百度搜索内容一样吗，除了利用了主页左侧大部分的空间来循环展示当前的热门视频和右侧以文字形式展示的视频之外，底部还有视频分类。我觉得底部视频栏的内容分类设计不是很合理，首先这么大一块的分类内容挤在一起而且字体也是黑底白字，看起来用户很难看懂，很不舒服，也不容易快速找到想要找的分类，我觉得这个设计不太好，对于一些数量较多的搜索分类，没必要直接显示在页面上，毕竟一堆密密麻麻的小字看起来也不是很舒服。我觉得可以把这些内容设置在单独的侧边栏，比如当鼠标移到某个按钮上面的时候，会自动滑出一个侧边栏，这些搜索分类就可以放在这样的侧边栏里。不仅可以节省空间，这些类别还可以进一步细分优化，字体的选择和布局也可以重新设计，让用户更容易找到自己想要的内容，使用起来更加舒适便捷。

启发：在交互设计中，比较密集的搜索或者分类按钮可以设计在单独的侧边栏，而不要放在主页面。

2.3 家本易APP

简介：家本易驾驶学习平台是国内首个通过移动互联网技术开发新型网络智能驾驶学习系统的驾驶学习平台。

界面设计分析：打开APP之后首页内容需要打开定位才能显示，不然就是空白的，在这款APP中，打开之后的首页如上图，可以看到整个页面上方超过三分之一的部分是灰色区域，用户需要开启定位功能才能看到指定的内容，但其实很少有用户会随时开启定位功能，所以打开APP第一眼看到的就是这个灰色区域，给人的印象并不是很好。

启示：在设计APP首页时，一般不要采用需要用户开启定位等额外功能才能显示内容的界面设计，这样很容易给用户留下不好的第一印象。需要用户开启额外功能才能显示的内容最好放在其他页面。交互设计要保证用户在使用时有良好的第一印象，所以首页的设计很重要，不应该要求用户进行额外操作才能查看内容。像这款APP这样的设计，几乎完全忽略了用户体验。

2.4 boch虚拟机

简介：这是一款开源的可调试虚拟机，在开发操作系统初期，我们可以将我们的程序运行在虚拟机上，虚拟机可以设置内存断点，查看寄存器状态或数据，设置内存地址范围，将内容反编译为汇编语言，查看内存区域的数据等。

界面设计分析：点击按钮会立即执行，没有任何响应。在这个应用中，用户启动虚拟机工作，界面如上图。虚拟机顶栏菜单中有很多功能，但是这些功能都是不响应点击的。以及二次确认设置，比如最右边的关机按钮，当用户点击这个按钮时，虚拟机会直接退出，没有任何停顿，这样可能会导致用户丢失一些没有保存的操作，而且这个虚拟机能显示的内容只有如图所示的一条内容，已经被推到最上面了，用户无法通过滑动滚轮再次查看，如果需要查找相关数据，必须重新输入命令进行搜索。

启示：在执行一些重要的、不可逆的操作时，交互设计应该允许用户进行二次确认，以确保不是用户的错误，从而避免给用户带来损失。所以当用户点击一些重要的按钮时，可以设置弹框来确认用户是否真的要执行这个操作。交互设计应该确保用户在执行某些重要的操作时需要进行二次确认，这样才能避免用户犯错，造成不必要的损失。

2.5 百度文库

简介：百度文库是用户在线共享文档的平台。百度文库中的文档由百度用户上传，需要经过百度审核后才能发布。百度本身不会编辑或修改用户上传的文档内容。用户可以阅读和下载这些文档。百度文库中的文档涵盖了教学资料、考试题库、专业资料、公文写作、法律文件等领域。百度用户通过上传文档可以获得一定的积分，下载有价文档需要积分。目前平台支持主流文件格式。

界面设计分析：界面布局无用项太多，广告过于浮夸。这是一款查找、查看文档的app，在我看来，这种类型的应用应该更简洁一些，没必要添加那么多首页内容如上图所示。这个界面布局非常糟糕，顶部的搜索栏和菜单栏下面有一个大广告，广告下面又是一个大广告，是热门搜索。这个界面设置更像是百度浏览器而不是文档app，我觉得可以把热门搜索栏完全去掉，最差也可以像微博一样，在搜索栏里加一个，然后在右下角有一个广告图标。有时候打开app就会弹出一个占据半个屏幕的红包广告，真的很烦人。随时、任何页面都会强行塞进app里，感觉如果采用这种做法，产品寿命和口碑都不会长久。

教训：在设计界面时，最好将一些无用的功能隐藏在其他功能之下。直接将它们放在界面上不仅会浪费宝贵的空间，还会降低用户的兴趣。最重要的一点是，没必要放那么多广告。好吧，整个界面除了几个功能外，全是广告。整个应用的一半都是广告，让人在使用时感到沮丧。在交互设计中，界面应该体现应用的主要功能，将一些用户不经常使用的附加功能放在顶部。最好放在其他栏目下。

2.6 扇贝词

简介： Word是提供的一款英语单词学习APP，开发者为南京北晚教育科技有限公司。 Word采用智能启发式学习方式，通过引导的方式帮助用户学习或复习单词。

界面设计解析：当学习完今天的单词并复习完之后，用户会发现只能复习一次，首先这个应用的使用感我觉得还是很不错的，我觉得是单词学习软件里面最硬核的一款，我只是想指出它其中一个功能上的小瑕疵，每天学习完设定的单词量之后，用户可以进行复习，但是如果用户复习完一次之后想要再次复习的话，就会显示已经完成了当天的复习，也就是说用户只能复习一次，我觉得这个设定不太好。

启示：在设计某些功能时，要考虑其合理性，最好依靠用户的意愿，而不是直接设计。对于一些可以重复使用的功能，最好不要限制用户使用次数。在设计时，最好不要限制用户使用某些合理功能的次数。

第三部分-界面设计总结

3.1 了解用户

目标群体会在产品阶段就确定下来，所以当你开始设计网站时，你需要对目标客户群体有很好的了解。你需要知道什么？你可以从需求和愿望两个方面入手，从而设计出符合他们需求的网站。同时，你应该开始浏览大量相关页面，并看看竞争对手的页面设计，总结哪些部分是共同的，哪些部分更具创新性和令人印象深刻。

3.2 遵循用户体验

网页有弹窗是正常现象，但弹窗过多就不正常了，会极大影响用户的阅读体验，让用户无法静下心来仔细阅读内容。除了弹窗的频率，数量也要控制，不要太多。通过在弹窗之上再添加一个弹窗，可以将第一个弹窗做成一个完整的界面，或者将第二个弹窗放在第一个消息弹窗里面。

3.3 页面文本布局

看过咪蒙微信公众号的读者肯定都有这样的印象，与其他微信公众号不同的是，咪蒙的文章两端缩进量非常大，因此没有过多的内容宽度，每行文字都较短，在页面浏览时会比较快地返回寻找下一行开始阅读，页面利用率会更高。

3.4 标准化按钮位置和文本

页面上多次出现且功能相同的元素应该尽量保持清晰一致，比如我之前做的全栈工程师专题页面，每个咨询按钮都应该附带与该版块相关的文案，并且位置在每个版块中都应居中。

3.5 内容直观清晰

用户的注意力是有限的。如果你想让他们看到并记住你想要展示的信息，你必须尽可能直观地呈现文本。你可以使用图表和视觉效果来传达信息和数据。

但不要把关键信息和特效填满整个页面，也不要把所有信息分散在一页上，过多的信息会给读者带来认知负担。

三、快速原型交互界面设计实验报告1、实验目的

1.掌握软件开发原型模型的概念。

2. 练习 RP 原型设计

2.实验设备

1. 一台计算机。

2.工具软件。

3.RP软件介绍

1. 角色扮演

RP 可以让桌面应用程序和 Web 站点的设计人员以比任何其他当前用于创建静态原型的工具（例如，，，，，，，，，，GUI 等）更快、更高效的方式创建线框、流程图、原型和规范文档。RP 是一个真正的原型设计工具，支持多人协作设计和版本控制管理。设计师渴望拥有一个专用的原型设计工具，它为此而精心打造。它被 1000 家大型公司使用，已成为创建成功产品的必备工具。淘宝、雅虎、腾讯、当当等国内公司的产品经理也在使用它。

2.原型的作用和好处

制作是简化文档准备、吸引用户参与、及早识别缺失需求、最大限度降低外部需求风险的有效方法。将大量文本文档转换成带注释和交互的可视化图像可以抓住利益相关者和用户的注意力抖音搜索关键词推广★64xl.com做下拉词工具，360搜索手机下拉，让用户在软件编程开始之前确认自己的需求。快速原型设计（RP）是一种有效、高效的以用户为中心（User-）的技术，可以帮助用户体验专家、设计师和工程师创建更有用、更易用的产品。目前，全球财富1000强企业和重要机构都在使用RP，国内淘宝、雅虎、腾讯、当当等公司的产品经理也在使用。

3.工作环境

工作环境允许可视化拖放操作，从而可以轻松快速地创建带注释的线框。

无需编程，即可在线框图中定义简单链接和高级交互。一个包即可生成线框图、HTML交互原型和规范Word文档。以下是RP工作环境的简单描述：

图4-1 RP工作环境

1.主菜单和工具栏执行常见操作，例如打开文件、保存文件、格式化控件以及自动生成原型和规范。

2、站点地图面板用于添加、删除、重命名和组织已设计页面（包括线框图和流程图）的页面层次结构。

3. 控制面板 该面板包含线框控件和流程图控件，例如按钮、图片、文本面板、矩形等。这些控件可用于设计线框和流程图。此外，您还可以加载现有的组件库（*.）并创建自己的组件库。

4. 模块面板 模块是一个可重复使用的特殊页面，在此面板中可以添加、删除、重命名模块，组织模块分类层级。

5. 线框工作区（或页面工作区） 线框工作区是原型设计的主要区域。在此区域中，您可以设计线框、流程图、自定义组件和模块。

6. 页面注释与交互区添加和管理页面级的注释和交互。

7、控件交互面板定义控件的交互，如：链接、弹出、动态显示、隐藏等。

8、控件注释面板对控件的功能进行注释。

4.登录界面案例操作

1). 设计要求

① 设计桌面版QQ的模拟界面（包括登录，越逼真越好）

② 创建模拟网银界面，要求界面布局和交互逼真，无需输入复杂的数据（部分背景图片可以从原网站剪切复制）

③利用GUI或者RP为热力学计算模型设计三种界面效果（rp源文件+HTML网页）：基本对话框界面、标签栏界面、菜单界面

2). 设计结果

①模拟桌面版QQ

注意：点击桌面上的TIM图标，出现TIM登录界面，同时任务栏中出现灰色图标。

注：输入账号密码即可登录，点击“注册账号”和“找回密码”按钮可以打开外部链接注册账号和找回密码。有“记住密码”和“自动登录勾选框”功能。右下角有多账号登录和二维码登录交互功能。窗体支持最小化和关闭，如果开启了最小化，再次点击任务栏图标即可唤醒，点击关闭即可关闭QQ。如果输入的密码（）出现错误，会出现如下提示界面：

如果用户名或密码不正确，可以点击找回密码重新找回密码，或者点击取消返回。如果输入的密码正确，则会进入聊天窗口：

②模拟网上银行

模拟中国银行，支持登录、转账、查账等操作，点击右上角即可登录个人网银：

输入任意账号和密码登录：

转账操作界面：

③热力学计算模型

标签栏：

菜单栏：

基本对话框：

5. 总结设计过程的技巧

1.解决中文输入法问题，目前部分中文输入法支持得不是很好，搜狗拼音输入法无法使用，谷歌拼音没有问题，但是会强制转换为全角，需要手动点击转换为半角。

2. 超快速移动工作区 当设计页面变大时，为了选择不同位置的对象，您必须经常使用垂直和水平滚动条，这会减慢选择对象的动作。请尝试这个技巧：鼠标光标在中间，按住键盘上的空格键。鼠标光标将切换为手形，您可以用它抓住屏幕并将其滑动到任何地方，而不会打乱任何对象的位置。既轻松又愉快。

3.穿透控件选中下层控件，在对象上按住鼠标左键1秒以上，松开鼠标左键再点击下方的对象，即可穿透上层对象，选中下层对象。

4. 参照或在其他软件中的对象：使用复制和粘贴功能将其他应用程序（如 、 、 和 ）中的对象粘贴到 RP 中。一般来说，这些粘贴的对象将成为 中的图形。您还可以将一个应用程序中的对象或屏幕复制并粘贴到另一个应用程序中。

5. 单选组（ ） 可以一次选中多个组，右键点击，选择“编辑 -> ”来设置组关系，这样导出的时候就会形成一个真正的单选界面。

6.去除IE中的X警告信息当您使用IE打开电脑中的HTML原型时，浏览器中可能会出现X警告信息，要暂时去除IE中的警告信息，请单击IE浏览器中出现的X警告信息，然后选择“允许阻止的内容”，这样您就可以在IE浏览器上看到电脑中的HTML原型了。

7. 只导出符合规格的必要项目。如果导出的项目选择得太详细，很可能会产生数百页的 Word 文档，难以阅读。因此，最好在导出前格式化文档。在设置中取消勾选不必要的项目，只保留有意义的项目。

8. 将默认的规格书标题改为中文。将格式化的文件标题改为中文，例如将格式设置名称“”改为“软件规划说明”，将“页面树”改为“界面列表”；或将格式设置名称“用户”改为“用户屏幕”。这样在输出到规格文件时，这些章节标题会更容易阅读。

9、撤消操作 有时想要在某个面板（比如站点地图面板或者模块面板）中恢复某个操作，只需要在这个面板上单击鼠标（相当于让焦点进入这个面板），然后按下键盘“Ctrl+Z”键就可以恢复在这个面板中执行的操作。

四、附录

资源链接：