详细设计与高保真原型设计教学内容
从零开始教你做高保真原型图+UI设计规范
从零开始教你做⾼保真原型图+UI设计规范编者按：《从零开始设计App》系列到这篇已经是第三期了，上期是低保真原型图，这期聊聊如何从零开始制作⾼保真原型图和UI 。
往期回顾：1.2.Hi-fi 输出上篇⽂章提到，在Hi-fi阶段⼤概可以分为前期、中期和后期三个阶段。
这篇⽂章就是对Hi-fi阶段的详细解说。
前期前期的主要任务是hero screen（主功能页⾯）的尝试设计，通过它进⾏视觉风格上的确定。
APP进⼊视觉风格确定的时期，主要确定的内容包括颜⾊、字体、图标三⼤块。
1. 颜⾊确定的过程先做好⼼理准备，很⼤程度上会来回折腾，改来改去。
着⼿点可以从产品点位出发，结合企业视觉系统进⾏统⼀形象设计。
如果企业有⾃⼰的logo和产品线，那视觉出发点可以在保持现有产品线的基础上，进⾏APP个性定位。
通俗点说，就是保持统⼀的前提下，有所区别。
打个⽐⽅，Nike+系列的产品，有Nike+RunClub、Nike+Move、Nike+Training、Nike+，从整体上来看，他们都⽤统⼀的带有运动感的荧光绿作为主⾊调，然后⽤⿊⽩灰进⾏搭配。
三者⼜有⼀定的区别，⽐如说Nike+RunClub的header是绿⾊，Nike+Training的header 是⿊⾊，前者更有活⼒运动感，户外使⽤阅读更⽅便，后者对室内体验更友好。
如果没有企业视觉系统，⼀切从0开始的话，建议从竞品分析开始，市⾯上做得⽐较成功的产品进⾏分析，以及从⾃⾝产品特性和⾏业特性进⾏出发。
⽐⽅说餐饮⾏业代表⾊是橙⾊，运动⾏业蓝⾊，⾼科技领域不同⾊值的篮等等，也可以另辟蹊径做出个性化的尝试，⽐如keep的绿⾊与棕⾊的搭配⽅案。
在颜⾊这个领域分为代表⾊、辅助⾊、搭配⽅案这三⽅⾯的内容。
⼀般配⾊⽅案是，⼀种彩⾊作为重要信息的突出⾊彩，配上不同深浅的⿊⽩灰或者蓝、棕⾊等⽆⾊彩或者⾊彩感⽐较弱的搭配⽅案。
这样的搭配⽅案，在信息呈现⽅⾯会⽐较清晰。
⽽在做设计⽅案中，还需要考虑的是，设计出不同底⾊的搭配⽅案，⽅便在不同场景的⽅案进⾏统⼀。
产品高保真原型的制作与规范
1原型的定义 2原型的种类 3原型的工具 4高保真原型
建立控件库
制作步骤 建立组件库
故事版
设计辅助页
原型注释
绘制流程图 设计关键页
10
1原型的定义 2原型的种类 3原型的工具 4高保真原型
高保真原型注意事项
1. 灰度线框图：颜色会干扰视觉设计，效果会影响大家对易用性的判断。 2. 清晰地展示流程：好的操作流程是易用性的最基本标准。 3. 关键功能要有故事版：更好的、更快的理解产品。 4. 要有注释：图只能展示界面元素，图文并茂才能准确全部传达设计思想。 5. 有一致性：一致性会降低用户对界面的学习和识别成本。 6. 有规范性：好的软件或者网站绝对是规范的。
12
1原型的定义 2原型的种类 3原型的工具 4高保真原型
STEP 2: 建立组件库
Accordion(手风琴)
Tag Cloud(标签云)
能够完成一个功能点，形成一种模块，能够被重复使用，从而降低开发成本， 实现界面的一致性，规范性，突出界面的风格特征。
13
1原型的定义 2原型的种类 3原型的工具 4高保真原型
原型是对一个产品的可视化呈现，主要传达 一个产品的信息架构、内容、功能和交互方 式。
3
1原型的定义 2原型的种类 3原型的工具 4高保真原型
原型是对一个产品的可视化呈现，主要传达 一个产品的信息架构、内容、功能和交互方 式。
4
1原型的定义 2原型的种类 3原型的工具 4高保真原型
保真度
低
高
保
保
真
6
1原型的定义 2原型的种类 3原型的工具 4高保真原型
2: 低保真原型
低保真原型能够准确的 传达界面的布局和交互 方式，但是美观、效果 欠佳。可以理解为介于 纸面原型和高保真原型 之间的输出的统称，往 往也可以作为需求设计 稿输出。
高保真原型设计实验实训主要内容
高保真原型设计实验实训主要内容下载提示：该文档是本店铺精心编制而成的，希望大家下载后，能够帮助大家解决实际问题。
文档下载后可定制修改，请根据实际需要进行调整和使用，谢谢！本店铺为大家提供各种类型的实用资料，如教育随笔、日记赏析、句子摘抄、古诗大全、经典美文、话题作文、工作总结、词语解析、文案摘录、其他资料等等，想了解不同资料格式和写法，敬请关注！Download tips: This document is carefully compiled by this editor. I hope that after you download it, it can help you solve practical problems. The document can be customized and modified after downloading, please adjust and use it according to actual needs, thank you! In addition, this shop provides you with various types of practical materials, such as educational essays, diary appreciation, sentence excerpts, ancient poems, classic articles, topic composition, work summary, word parsing, copy excerpts, other materials and so on, want to know different data formats and writing methods, please pay attention!高保真原型设计实验实训主要内容在高保真原型设计实验实训中，学生将通过一系列任务和项目，掌握高保真原型设计的基本原理和技能，提升其在用户界面设计领域的能力。
教案详细设计包括哪些
教案详细设计包括哪些
教案详细设计包括以下几个方面：
1. 教学目标：明确教学目标是教案设计的首要任务。
教学目标应该明确、具体，并且与教学内容相匹配。
教师需要根据学生的年级、能力水平和学科要求来确
定教学目标。
2. 教学内容：根据教学目标，确定教学内容。
教学内容应该与学生的背景知识
和实际生活经验相结合，具有一定的系统性和层次性。
3. 教学方法：选择适合的教学方法是教案设计的重要组成部分。
教师可以根据
学生的学习风格和能力水平选择合适的教学方法，如讲授法、讨论法、实验法、案例法等。
4. 教学步骤：教学步骤是教案设计的核心内容。
教师需要详细规划每个教学步骤，包括引入新知识、知识讲解、示范演示、练习巩固、反馈评价等环节。
每
个步骤都应该有明确的时间安排和具体的教学活动。
5. 教学资源：教学资源是教案设计的重要组成部分。
教师需要准备教材、教具、多媒体课件等教学资源，以支持教学步骤的实施。
6. 评价与反馈：教案设计中应考虑评价与反馈的环节。
教师可以设计合适的评
价方式，如作业、测验、小组讨论等，以检验学生对知识的掌握程度，并及时
给予反馈。
7. 拓展与延伸：对于学习能力较强的学生，教案设计中可以考虑拓展与延伸的
内容，以满足他们的学习需求。
8. 教学辅助手段：教案设计中可以考虑使用一些教学辅助手段，如多媒体课件、实物模型、图片等，以提高教学效果。
以上是教案详细设计的一般要求，具体的教案设计还需要根据不同学科和教育阶段的要求进行调整和补充。
高保真原型(与“原型”有关优秀PPT文档)
谢谢您的耐心学习！
第5页，共5页。
第2页，共5页。
高保真原型
如果只具备水平、垂直两种原型的其中一种，则与实际的用户体验相差甚远。因为水平原型最多算是界面的样本，而垂直
型用户只能体验一个功能，没有其他选择。但是如果我们将其合二为一，就能行程一个可以让用户使用的原型了，这种广度 和深度兼备的原型就是T原型。
这因比以以以 但以以如因比比以这 垂这比比以这 以因如如是是平直制为是为如制制制是制制果为如如制是直是如如制是制为说说 从 从 原 原 作水 从 水 说 作 作 作如 作 作 只 水 说 说 作 从原 从 说 说 作 从作 水网 网表表型型一 平表平网一一一 果一一具平网网一操 型表网网一表 一平原站 站现现就是个 原现原站个个个 我个个备原站站个作 是现站站个现 个原型注 注层层是只网 型层型注网网网 们网网水型注注网层 只层注注网层 网型做册 册出出只具站 最出最册站站站 将站站平最册册站出 具出册册站出 站最成流 流发发需备产 多发多流产产产 其产产、多流流产发 备发流流产发 产多什么程 程的的要某品 算的算程品品品 合品品垂算程程品的 某的程程品的 品算样原 原浅浅制一原 是浅是原原原原 二原原直是原原原深 一浅原原原浅 原是，型型式式作项型界式界型型型型为型型两界型型型式项式型型型式型界还是， ，原原网功为 面原面，为为为 一为为种面，，为原 功原，，为原 为面要用 用型型站能例 的型的用例例例 ，例例原的用用例型 能型用用例型 例的取户 户。。首的： 样。样户：：： 就：：型样户户：。 的。户户：。 ：样决虽 虽页原本本虽能的本虽虽原虽虽本于你然 然和型，，然行其，然然型然然，的不 不第。而而不程中而不不。不不而项能 能一垂垂能一一垂能能能能垂目搜 搜层直直搜个种直搜搜搜搜直的时索 索链型型索可，型索索索索型间和 和接用用和以则用和和和和用、购 购层户户购让与户购购购购户成本买 买面只只买用实只买买买买只以商 商的能能商户际能商商商商能及品 品原体体品使的体品品品品体原， ，型验验，用用验，，，，验型制但 但。一一但的户一但但但但一作可 可个个可原体个可可可可个能以 以功功以型验功以以以以功力。实 实能能实了相能实实实实能际 际，，际，差，际际际际，体 体没没体这甚没体体体体没验 验有有验种远有验验验验有注 注其其注广。其注注注注其册 册他他册度他册册册册他功 功选选功和选功功功功选能 能择择能深择能能能能择的 的。。的度。的的的的。整 整整兼整整整整个 个个备个个个个流 流流的流流流流程 程程原程程程程。。 。 型 。 。 。 。就是T原型。
五步做一个高保真可交互原型-Principle教程
这个案例用的是Principle这款软件做的。
Principle近段时间非常流行的一款做原型的软件。
很多公司官方对于联动有有一大段的解释，但是如果没有做个是很难看懂的，但没有关系，因为接下来会通过实例来介绍这个功能。
第一步：将素材导入到principle中方法有2种：1、拖动素材到principle中，需要一个个拖2、在sketch中做好素材，将sketch保持打开状态，再打开principle选择导入就可以了第二部步：制作上下滑的动作1、创建一个矩形，把矩形的高度做的很长。
命名为“看不见的控制”，调整Vertical属性为Drag。
这样就可以在preview中上下拖动这个矩形了。
（见下图）为什么第一步要这样做呢？这是因为我们要上下滑动这个矩形的时候，分针和时针可以旋转。
那么这个矩形就是联动源，矩形和分针、时针之间是联动关系。
为了更好的理解这个概念，我们看一下官方的解释：联动源（Driver Sources）想要创建联动，在画板上必须存在一个可改变的属性，这叫做联动源。
在联动视图中列表中，可拖拽图层、可滚动图层，以及选择属性将自动展示出来。
2、然后将这个矩形的Fill属性中的透明度调整到最高。
让这个矩形变透明。
（见下图）但是注意：不能直接调整Opacity这个属性，是因为如果这么做，那拖动这个矩形不会产生任何效果的。
第三步：将分针和“看不见的控制”联动，即上下滑动屏幕时分针会旋转。
1、首先要把分针的图片处理一下。
因为分针要围绕表盘中心转动，所以分针的中心要调整到针的末尾。
但principle暂不能调整中心点（有谁知道如何调整可以告诉我，感激不尽）。
所以我有个笨办法，就是复制一个分针，放到对称的位置，选中这两个分针，按住cmd＋G组合。
再把其中一个分针调整为透明。
就调整好中心了。
2、然后关键时刻到来啦。
选中“分针”这个组，点击Driver，点击时针旁边的＋号选择Angle。
3、然后将下图这拉杆向后拉动到一个位置，在拉动的时候可以看到“看不见的控制”这个矩形在向下移动。
产品原型设计教程
学而不厌 诲人不倦
图层、组合
对齐、分布
锁定
文字编辑
文字分布
填充、线框
坐标、像素
学而不厌 诲人不倦
矩形的形状变化，其中，圆角的大小是可以控制的，使用不同的形状得到一些组合形状。
学而不厌 诲人不倦
母版是一种可重复利用的页面，比如页面的模板、导航栏、页首、 页脚等这些类似的元素都可以通过母版来调用。
学而不厌 诲人不倦
矢量图
概念：又称为向量图，它是以数学的矢量方式来记录图形的内容，矢量图形的元素称为对象，每一个对象都 是独立的，都具有自己的属性。
组成：由软件本身所提供的线、圆、矩形等组成，经过再组和编辑而成。 特点：可以任意缩放，放大以后不会产生失真现象。并且它的文件占用的空间小。 缺点：不宜做色调丰富的图像。 常见格式：ai（ illustrator生成） cdr （ coreldraw生成） dwg （ cad软件生成）
动作1 动作2 动作3 动作1 动作2 动作3
学而不厌 诲人不倦
定义链接可以让一个元件响应一个动作 时（如鼠标点击、飘过）链接到其他页 面。 四种链接方式： 1、链接到设计中的页面； 2、连接到外部网址或文件； 3、重新载入当前页面； 4、返回上个页面。
工作区
样式管理
交互面板
学而不厌 诲人不倦
页面地图是产品页面的导航面板，在这里面 可以对所有设计的页面进行添加、删除、重 命名和组织排序等。
双击选择的页面即可打开页面进行修改。按 住选定的页面移动即可修改相关排序和组织 结构。
学而不厌 诲人不倦
元件面板中包括线框图、流程图、常用图标 等多种类型，用这些元件可以进行线框图和 流程图的相应设计。用户也可以自由添加其 他元件。
《AxureRP9网站与App原型设计》教学教案—10支付宝App低保真原型设计
第10章支付宝App低保真原型设计10.4.1 底部标签导航母版设计绝大部分移动App软件喜欢采用底部标签导航方式，App一般会设计3~5个标签导航菜单，标签导航菜单将软件模块划分地很清晰，每个菜单承载自己的内容，用户看到菜单名称，大致可以知道该界面所要表达的内容。
支付宝App采用标签导航这种导航方式，分为4个标签：支付宝、口碑、朋友、我的，这4个标签在很多页面都会使用到，把它制作成母版，可以实现一次制作，多次复用的效果。
（1）在母版区域里新建一个母版“标签导航”，打开该母版；拖曳一个“矩形1”元件到工作区域作为手机屏幕背景，将其宽度设置为320，高度设置为480，坐标位置设置为（0,0），颜色填充为灰色（#F2F2F2），去除边框线。
手机屏幕背景（2）拖曳一个“矩形1”元件到工作区域，将其宽度设置为320，高度设置为50，坐标位置设置为（0,430），边框颜色设置为灰色（#E4E4E4），作为底部标签导航背景；拖曳4个“图片”元件到工作区域，将其宽度和高度设置为25。
标签导航图标（3）拖曳4个“文本标签”元件到工作区域，将其文本内容分别命名为“支付宝”“口碑”“朋友”“我的”，字号设置为11号字，标签也分别命名为“支付宝”“口碑”“朋友”“我的”；在页面区域上建立4个页面“支付宝”“口碑”“朋友”“我的”。
导航菜单名称及页面名称（4）拖曳一个“热区”元件到“支付宝”标签导航上，为其添加鼠标单击时触发事件：在当前窗口打开相应“支付宝”页面。
打开支付宝页面（5）分别拖曳一个“热区”元件到“口碑”“朋友”“我的”标签上，为其添加鼠标单击时触发事件：在当前窗口打开相应页面。
打开相应页面（6）将标签导航母版通过新增页面的方式引用到“支付宝”“口碑”“朋友”“我的”4个页面。
母版引用到页面（7）进入到“支付宝”页面里，添加页面载入时触发事件，通过富文本的方式设置“支付宝”文本字体加粗，该标签导航菜单呈现为选中状态，运用同样的方式为其他3个标签导航设置选中状态。
如何设计出具有可用性的高保真原型
如何设计出具有可用性的高保真原型在产品设计的过程中，高保真原型是非常重要的一环。
它可以帮助设计师和开发人员更好地理解用户需求，同时也可以用于用户测试和验证设计方案的有效性。
然而，设计出具有可用性的高保真原型并不是一件容易的事情。
本文将探讨如何设计出具有可用性的高保真原型，以提高产品设计的效果和用户体验。
1. 确定目标和需求在设计高保真原型之前，首先要明确产品的目标和用户需求。
通过用户调研和需求分析，了解用户的痛点和期望，有助于设计出更符合用户期望的原型。
同时，也要考虑产品的定位和市场竞争情况，以便在设计过程中做出更明智的决策。
2. 选择适当的工具和技术设计高保真原型需要选择适当的工具和技术来实现。
目前市面上有许多原型设计工具可供选择，如Axure、Sketch、Figma等。
这些工具提供了丰富的组件库和交互设计功能，可以帮助设计师快速搭建出高保真原型。
此外，还可以考虑使用HTML、CSS和JavaScript等前端开发技术来设计原型，这样可以更灵活地实现一些复杂的交互效果。
3. 注重细节和交互设计一个具有可用性的高保真原型应该注重细节和交互设计。
在设计过程中，要注意每一个细节，包括按钮样式、字体选择、颜色搭配等。
这些细节可以影响用户的使用体验，因此需要认真对待。
此外，交互设计也是非常重要的一环。
要考虑用户的操作习惯和心理预期，设计出符合用户期望的交互效果，提高用户的满意度和使用效率。
4. 进行用户测试和迭代设计高保真原型后，需要进行用户测试和迭代。
通过与真实用户进行交互，收集用户的反馈和意见，了解用户对产品的看法和需求，从而改进设计方案。
用户测试可以帮助发现原型中存在的问题和不足之处，及时进行修正和优化。
通过多次迭代，逐步完善原型，最终设计出具有可用性的高保真原型。
5. 关注可用性和用户体验设计高保真原型的最终目的是提高产品的可用性和用户体验。
因此，在设计过程中要始终关注这两个方面。
要确保原型的界面设计简洁明了、易于理解和操作，避免过多的复杂性和冗余的功能。
产品原型图教学设计
产品原型图教学设计产品原型图教学设计是为了让学习者能够理解并掌握如何使用原型工具进行产品设计和展示的过程。
在本文中，我将从以下几个方面介绍产品原型图教学设计的内容：定义与目标、教学设计原则、教学流程、实施步骤、评价与改进等。
1. 定义与目标产品原型图教学设计是指通过教学活动，教授学生如何使用原型工具设计和展示产品的技能和知识。
其主要目标是培养学生的产品设计思维，提高他们的设计能力和创新能力。
同时，还可以帮助学生更好地理解用户需求，提升产品的用户体验。
2. 教学设计原则教学设计应遵循以下原则：（1）以问题为导向：教学设计要紧密结合实际问题，引导学生通过原型设计解决实际问题。
（2）以学生为中心：教学设计应考虑到学生的兴趣、能力和学习风格，设计合适的教学活动和评价方式。
（3）灵活多样：教学设计要灵活多样，根据学生的不同特点和需求调整教学方法和内容。
（4）适度挑战：教学设计要适度挑战学生，促进其主动学习和探究能力。
3. 教学流程（1）前期准备：明确教学目标、教学内容和教学资源。
可以组织学生进行前期的调研和需求分析，了解用户需求和产品设计的具体要求。
（2）教学导入：向学生介绍产品原型图的概念、作用和应用场景，引发学生对原型设计的兴趣。
（3）知识传授：讲解原型工具的基本操作和功能，如Sketch、Axure等。
同时，向学生介绍产品设计的基本原理和方法。
（4）实践演练：组织学生参与实际的产品原型设计活动，引导他们运用所学的知识进行设计实践。
（5）小组合作：鼓励学生进行小组合作，共同完成产品原型设计和展示，提高他们的协作能力和创新能力。
（6）教学总结：对学生的设计成果进行总结和评价，引导他们总结经验教训，提升产品设计能力。
4. 实施步骤（1）引导学生了解产品原型图的概念和作用，并介绍常用的原型工具。
（2）通过讲解和实例演示，向学生传授原型工具的基本操作和功能。
（3）组织学生进行实践演练，设置具体的设计任务和时间节点，指导学生使用原型工具进行产品设计。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
详细设计与高保真原型设计
物理设计
本系统界面采用b/s模式，显示内容以浏览器为框架，其界面提供登录或者免费注册界面。
可进入个人中心管理个人信息，若没有登录，则跳转到登录界面。
该界面设有一条导航栏，包括四个导航选项卡，分别为首页、书店区、最新消息、讨论区。
点击对应导航选项卡会进行对应页面跳转。
本文档为在低保真原型设计的基础上改进的高保真原型，描绘了每个模块的详细界面。
主页选项卡提供搜索框，可根据输入的图书名或作者名进行搜索，也可进行高级搜索。
搜索框下方提供筛选条件，如图书区未售、图书区已售等，点击了搜索按钮之后，进行页面跳转，进入搜索结果显示页面。
主页下方主体主要分为四部分，一类是左侧图书的分类部分，方便用户对图书进行筛选，中间部分是四个大类，分别是”销售排行”、”综合书店排行”、”书摊排行”、”新加盟书店排行”。
右侧上半部分为在线客服，下半部分为公告、新手指南和交易规则。
书店区选项卡中同样提供搜索功能，不过搜索方式略有不同，更加侧重图书区的特点，下方的主体是各种图书的分类，其中有选项卡，选择不同类的图书，选择具体选项卡之后就是相应类别的图书，图书以九宫格的形式展示，每一个格子是一本书，格子中提供图书的图片和图书名以及价格。
右侧提供书店搜索框，可根据书店名进行搜索，也可点击下方按钮查看书店排行榜。
最新消息区选项卡提供最新的热点新闻、市场动态和访谈。
左上角为最新的热点图片以及其标题。
左下角陈列出热点与新闻动态标题。
左上角为最新访谈、往期访谈以及专家介绍。
左下角为今日热卖商品的简介。
讨论区选项卡类似于贴吧，提供搜索功能，通过输入关键词来搜索帖子，也可选择书店区搜索和拍卖区搜索。
下方为行业小动态的帖子标题、作者、回复/阅读数量以及最后发表人和时间。
●高保真原型图
◆主页
◆书店区
◆最新消息区
◆讨论区
●评估
本高保真原型针对大学生图书交易平台进行交互界面的简短设计，以浏览器
为显示框架，涉及网页超文本基本元素，如超链接、图片等。
在保证性能的情况下提供了搜索的功能，同时针对图书交易的具体需求，对图书或者书店进行了分类，方便了用户对于信息的获取。
并在低保真原型设计的基础上对各个模块进行了更加精细的设计，添加了最新消息模块的设计和讨论区的设计，方便用户了解最新的消息和动态，以及发表个人的看法和见解。
并对版块比例以及各版块之间的间隔进行了更精细的设计和排版。
使界面更加清晰、美观。