详细设计与高保真原型设计教学内容

从零开始教你做⾼保真原型图+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的绿⾊与棕⾊的搭配⽅案。

在颜⾊这个领域分为代表⾊、辅助⾊、搭配⽅案这三⽅⾯的内容。

⼀般配⾊⽅案是，⼀种彩⾊作为重要信息的突出⾊彩，配上不同深浅的⿊⽩灰或者蓝、棕⾊等⽆⾊彩或者⾊彩感⽐较弱的搭配⽅案。

这样的搭配⽅案，在信息呈现⽅⾯会⽐较清晰。

⽽在做设计⽅案中，还需要考虑的是，设计出不同底⾊的搭配⽅案，⽅便在不同场景的⽅案进⾏统⼀。

高保真原型设计实验实训主要内容下载提示：该文档是本店铺精心编制而成的，希望大家下载后，能够帮助大家解决实际问题。

文档下载后可定制修改，请根据实际需要进行调整和使用，谢谢！本店铺为大家提供各种类型的实用资料，如教育随笔、日记赏析、句子摘抄、古诗大全、经典美文、话题作文、工作总结、词语解析、文案摘录、其他资料等等，想了解不同资料格式和写法，敬请关注！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. 教学辅助手段：教案设计中可以考虑使用一些教学辅助手段，如多媒体课件、实物模型、图片等，以提高教学效果。

以上是教案详细设计的一般要求，具体的教案设计还需要根据不同学科和教育阶段的要求进行调整和补充。

这个案例用的是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、然后将下图这拉杆向后拉动到一个位置，在拉动的时候可以看到“看不见的控制”这个矩形在向下移动。

第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）组织学生进行实践演练，设置具体的设计任务和时间节点，指导学生使用原型工具进行产品设计。