第五章 电子原型草图设计.pptxVIP

电子原型草图设计互联网产品设计：用户体验与UI交互（附微课视频）

目录CONTENT5.1低保真原型设计（LFP）5.2高保真原型设计5.3开发者协作

学习目标（2）熟练掌握低保真原型设计的基本原则，能灵活运用到产品设计中。（5）通过本章系统学习，真正理解原型设计的价值和意义。（3）熟练掌握高保真原型设计的相关规范，了解产品研发评估的相关流程和注意事项。（4）了解原型草图的实现工具、开发平台和工具之间的优缺点。（1）了解原型草图的基本概念，以及低保真原型和高保真原型的相互关系。

5.1低保真原型设计（LFP）

低保真原型设计（LFP）什么是低保真原型？设计低保真原型的好处有哪些？低保真原型的基本特征和主要内容有哪些？

低保真原型设计（LFP）低保真原型（Low-FidelityPrototyping）设计是在纸上画的草图或原型，也可以是在电脑上设计的产品页面，它的作用是表现产品中最重要的用户流程和功能所涉及的页面关系。设计低保真原型的最大好处是省时、高效。同样由于它的制作快速，不太重视界面细节部分的设计，可能会带来沟通上的困难。

低保真原型设计（LFP）低保真原型的基本特征和主要内容

低保真原型设计的基本原则低保真原型设计的基本原则包括功能完整、流程正确和交互设计合理。

界面布局方式-大平移式

界面布局方式-宫格式

界面布局方式-大侧滑式

界面布局方式-列表式

界面布局方式-手风琴式一级二级

界面布局方式-卡片式

界面布局方式-瀑布流式

界面布局方式-多面板式

界面布局方式-不规则式

界面布局方式-Z轴视差

实现工具：Axure/MockPlus

原创案例《初文》

原创案例《初文》

5.2高保真原型设计

高保真原型设计一套完整详细的设计规范拥有很多益处，确立品牌的个性，形成稳定且长期的延续性、统一性、协同性和高效性。根据统一的设计标准，使得整个APP产品在视觉上统一，提高用户对APP产品的认知和操作便捷性。界面类型可从两个维度出发，分别从产品的类型和页面的种类来分类。

高保真原型设计界面类型（从产品的类型出发）

高保真原型设计界面类型（从页面的种类出发）

界面通用规范分辨率与像素倍率

界面通用规范界面设计尺寸状态栏：电量条、时间显示的区域，高度为132px导航栏：顶部条所在区域，高度为132px标签栏：底部条，高度为147px内容区域：中间空白区域高度

界面通用规范界面安全区域设计时注意安全区域，操控元素都应该置于安全区域内。安全区域外不是不能有任何信息，而是不能有重要的文本信息或者交互信息。

控件规范常用控件间距

控件规范常用控件间距

控件规范icon图标规范

控件规范字体规范

控件规范导航栏

控件规范搜索栏

控件规范标签栏

控件规范分段控件

控件规范选择器控件

功能信息权重界面权重区域划分一级：底部区域此区域在整个界面中权重最高二级：头部区域该区域内容通常情况下是当前模块下的标签与功能三级：内容区域通常情况下是当前一级功能下的所有信息的展示

功能信息权重各区域内容控件权重划分（底部区域）通常情况下底部区域有2～5个功能标签。对于内容型APP，中间通常为特色核心功能，能够代表产品核心玩法。

功能信息权重各区域内容控件权重划分（头部区域）标题部分：标题用来显示当前页面名称（例如微信界面头部）或当前状态（例如微信已登陆提示）。

功能信息权重各区域内容控件权重划分（头部区域）功能控件部分：常见的控件有“搜索栏控件组”“其他更多”等。常用的会直接显示在头部区域，例如淘宝头部界面中的扫描、消息提醒、拍照等。

功能信息权重各区域内容控件权重划分（头部区域）分类选项部分：Tab最常用的方式为文字加下划线，下划线为当前选中状态，iOS系统常用“胶囊”控件。

功能信息权重各区域内容控件权重划分（内容区域）此区域在界面中占比最大，展示区域包括钻石展位广告、金刚区、内容列表（小图多文）、内容瀑布流（大图少文）等。

交互体验用户行为路径对用户路径的了解可以让团队更了解用户行为与使用习惯，进而推动产品迭代优化。

交互体验可用与易用性交互体验强调的是易用性和可用性，对于产品本身是一个非常重要的属性，主要表现在操作有效、易学、好记、少错和识别度高等。

交互体验用户心理预期（操作前结果预期）

交互体验用户心理预期（操作后结果反馈）

交互体验用户心理预期（操作后结果反馈）

视觉反推人类根本无法想象没见过的东西，并且对未来事物的所有预测都是基于已经出现的科学技术或者事物，哪怕再发达的右脑，也无法脱离既有的事物和理论基础。

研发评估DEV环境（开发自己玩的）黑盒/SIT（第一版测试环境）沙盒/UAT(准生产）生产环境（发布上线）UE/UI介入流程进行视觉核验开发流程顺序

研发评估实现方法（原生开发）

研发评估实现方法（web开发）

研发评估