6.2最美时光产品原型制作.pptxVIP

第六章 综合实战案例解析 第二节 最美时光 最美时光 / 01 最美时光 3 “最美时光”是一款专注于时间记录的软件。其拥有简洁明了的画面，每一个色彩都对应了一个日期，支持公历和农历两种。日期越近，颜色条越短，所有时间状态尽收眼底。其拥有丰富的纪念日分类，日期与颜色也可以自由组合。下面我们将对“最美时光”的产品架构、产品流程、视觉效果、交互效果进行梳理，学习其优点，同时也指出其不足之处。 【实例效果】 （1）如图所示，在页面框架中，按照规范进行布局。 最美时光 4 （2）在“版本记录”中，记录好当前原型版本的版本号、新增/修改内容、修改人、提交日期，如图所示。 最美时光 5 （3）如图所示，在“产品框架图”中使用思维导图软件拆解“最美时光”APP的产品框架。 最美时光 6 （4）根据“产品框架图”中的产品梳理，“最美时光”的列表页如图所示。在进行原型设置时，图标可以在矢量网站中下载，列表由有填充色的矩形加白色文字组合而成。 最美时光 7 （5）如图所示，在“新建”功能中梳理新建的流程，然后按照新建流程进行新建页面的布局。本实例的新建流程属于较简单的模式，在产品设计过程中，不存在创建失败和异常反馈的情况，所以直接按照流程创建即可创建成功。 最美时光 8 （6）如图所示，根据新建流程图进行新建流程的原型布局。 最美时光 9 （7）在“选择场景”页面中，单击场景按钮，可在相应场景中填写“分类”“标题”等内容。 （8）在“填写内容”页面，下方的选择背景可以左右滑动，具有左右边界值。单击图片，可以对背景进行变更。 （9）如图所示，在“查看”功能中，单击页面，当前页面内容逐渐隐藏，操作选项逐条向右滑动显示；再次单击页面，操作选项逐条向左滑动显示。 最美时光 10 【实例准备】 （1）在“demo”页面中，准备自定义名称为“最美时光”的动态面板，其中有“列表”“新建”“查看”“更多”“设置”五种状态，如图所示。整个动态面板的尺寸设置为720像素×1280像素。 最美时光 11 （2）在“最美时光”动态面板的“新建”状态中，放置两个动态面板，分别自定义名称为“新建-背景”“新建-内容”。“新建-背景”动态面板置于底层，“新建-内容”动态面板置于顶层。 （3）使用两个动态面板的目的如下。使用“新建-背景”动态面板的主要目的是调节当前背景，而“新建-内容”动态面板是为了显示的内容。“新建-内容”“新建-背景”两个动态面板可以独立切换状态。 （4）如图所示，在“新建-背景”动态面板中，放置五张图片作为背景，便于切换背景图片。 最美时光 12 （5）如图所示，在“新建”面板中，新增“选择场景”和“填写内容”状态。所有的元素都用矩形展示，选取有色彩的填充色，并且在矩形的【填充】中将【不透明】设置为“50”。 最美时光 13 （6）在“填写内容”状态中，最底部放置“设置背景面板”的动态面板，面板尺寸设置为720像素×170像素。 （7）如图所示，在“设置背景面板”的动态面板中放置六张图片，组成组合，自定义名称为“设置背景”，组合的尺寸设置为1120像素×170像素。六张小图片中，第一张为选择图片，后五张为“新建-背景”动态面板中背景图片的缩略图。 最美时光 14 （8）如图所示，在“最美时光”动态面板的“查看”状态中放置一张图片作为背景展示。上层放置自定义名称为“查看-内容”的动态面板，其中有“内容展示”“操作选项”两种状态。 （9）“查看-内容”动态面板主要用于内容的切换。其中，“操作选项”状态中，所有内容默认状态下全部隐藏。 （10）“查看-内容”动态面板放置在一张图片上，这样可以在切换“查看-内容”中的“内容展示”和“操作选项”时，不改变背景。 最美时光 15 【实例总结】 “最美时光”是小而美的时光记录软件。简单的交互效果、精美的视觉设计都会使我们产生极佳的体验，如图6-51所示。在研究产品时，通过原型的仿真，可以更深层次地理解产品结构的设计方法。在新建功能的流程中，如果从“填写内容”页面返回“分类选择”页面时，点击左上角的“返回”按钮，误操作则返回到“列表页”中，那么这个操作就需要去设计。没有明确的指示，返回到之前的页面，用户已经习惯点击“返回”按钮，这样的设计必然会使用户产生不佳的体验。体验上的小瑕疵不影响功能的整体发挥，但是我们要争取把体验做到极致，精雕细琢才会出精品。 T hanks.