墨刀公测&设计大赛优秀奖获得者刘钰德的交互设计教程

新知榜官方账号

2023-09-17 23:02:31

墨刀公测&设计大赛优秀奖获得者刘钰德的交互设计教程

本文介绍了墨刀公测&设计大赛优秀奖获得者刘钰德的交互设计教程，包括汉堡菜单、通知栏载入变色、商品轮播图、颜色切换表带颜色、切换选中表盘尺寸等设计思路和详解。

汉堡菜单

汉堡菜单的思路与通知的差不多，依然是状态1是汉堡菜单收起状态，状态2是汉堡菜单打开状态，通过点击事件来互相切换。

设计详解

新建一个动态组件，并转换为母版，同时新建两个状态，分别是未点击状态，点击展开状态。然后将汉堡菜单的点击事件跳转到点击展开状态，动效时长2S，展开状态的收起按钮的点击事件也跳转至未点击状态，这样互相跳转一个汉堡菜单就做好了。

通知栏载入变色

通过观察我们可以发现，顶部蓝色的一个通知栏在进入的时候是蓝底白字，经过2秒之后渐变成了灰底黑字。

设计详解

新建一个动态组件，并转换为母版；并在其中新建两个状态，一个是白底蓝字，一个是灰底黑字。在状态1设置定时器事件，等待1S之后自动切换为状态2，动效时长2S。这样一个简单的定时变色的通知栏就做好了。

商品轮播图

新建动态组件分别在动态组件中新建3个状态，分别是手表正面，侧面，表带。然后给每一个状态添加全局定时事件，让每一张图等待2秒的事件切换到下一张图。都设置好之后一个轮播图的效果就完成了。

颜色切换表带颜色

通过点击颜色切换按钮来切换表带的颜色，每点击一个颜色，表带就切换到相应的颜色。

设计详解

将当前页面复制4个页面状态出来，并将每一个页面中的表带选中颜色与页面状态颜色保持一致，比如第一个页面是柠檬黄色，第二个页面是冰洋蓝色。并将每一个颜色点击跳转到相应的页面，这样就简单的实现了通过选中来切换颜色。

切换选中表盘尺寸

在电商产品中经常会有这种切换选中的样式，就是点击不同的按钮切换选中。选中的时候给一个边框。

设计详解

新建一个动态组件，并转换为母版，并将两个按钮放入其中，其中一个样式设置为选中样式，将另外一个未选中的点击事件跳转到另一个状态，这样，按钮互相切换效果就做好了。

经过这次使用，发现墨刀改进了不少，尤其是状态这一块，越来越好用了，我们也可以用状态来做更多的效果，做起来也非常简便。

本页网址：https://www.xinzhibang.net/article_detail-12048.html

寻求报道，请

关键词

分享至微信：

相关工具

Magic Design

在线设计工具Canva推出的AI设计工具

IconifyAI

AI App图标生成器

Poly

AI生成3D材质

墨刀AI

墨刀推出的AI产品原型设计助手

Spline AI

Spline推出的AI生成3D物体、动画、材质

Logomaster.ai

AI Logo生成工具

菜鸟品牌焕新历程

定位&理念我们从认知度，识别度，理解度等层面，对菜鸟原品牌进行了调研，发现随着业务定位越来越明晰，旧品牌体系渐渐无法承载菜鸟的定位与理念。加之菜鸟子品牌与母品牌关联性弱，在实际使用时容易让消费者产生困惑。我们明确了品牌焕新的需求。我们在设计前期进行了一系列的调研，明确了菜鸟的使命与理念：菜鸟是价值链

分类标签菜鸟智能物流数据驱动

12-03 08:47

BAT云计算大战：从LOGO看三家巨头的战略布局

BAT云计算大战：从LOGO看三家巨头的战略布局8月9日，阿里云在《云栖大会·北京峰会》上宣布启用全新动态LOGO。阿里给出的解释是，之前用了六年的“云“LOGO，已经无法准确的表达阿里云的理念，新LOGO全面提升品牌形象，加速品牌的国际化。实际上，这是继3月份腾讯云更换LOGO战略升级，7月份马化

分类标签 BAT云计算LOGO

12-03 08:46

阿里云更新动态LOGO，以守护客户价值为理念

阿里云更新动态LOGO，以守护客户价值为理念近期，阿里云启用了全新的动态LOGO，以更好地展现出公司的理念。新LOGO采用简洁的符号设计，更加清晰地传达了阿里云“为了无法计算的价值”的理念。这是阿里云自2009年成立以来第二次更新LOGO。新LOGO形象包含守护的动作，寓意着阿里云将以安全稳定的服务

分类标签阿里云LOGO更新价值守护

12-03 08:45

入行后需常用到的几个工具软件

入行后需常用到的几个工具软件本文介绍了入行后需常用到的几个工具软件，包括原型设计工具和文档工具，帮助产品经理提高工作效率。原型设计工具原型设计工具已经是产品经理必备的工具之一，由最初的单纯原型设计及PRD撰写基本都可以通过原型设计工具来完成。以下是几个主流的原型设计工具：AxureRP：作为专业的原

分类标签产品经理原型设计工具文档工具

11-26 02:09

信息资源类APP产品对比及原型模板介绍

信息资源类APP产品对比及原型模板介绍随着信息时代的快速发展，获取信息已不再成为一件难事，但是如何对信息进行全面了解、整合利用似乎有些复杂。于是信息资源类APP就应运而生，为了便于大家进行比较和判断，本次我们对今日头条和人人都是产品经理这两种资讯类产品进行了整理。今日头条作为新闻行业软件的佼佼者，今

分类标签信息资源类APP产品经理今日头条人人都是产品经理原型模板

11-19 08:50

墨刀公布优秀奖获奖者交互动效作品

墨刀公布优秀奖获奖者交互动效作品，陈默、刘少立、Dr.Jason等10名小伙伴获奖。墨墨姐选摘了他们的作品供大家欣赏！恭喜优秀奖的小伙伴将会获得相关礼物，感谢大家对这次公测&设计大赛的支持。针对参赛者对新「状态」功能的反馈，墨刀的产品/设计/技术团队已经在进行优化。新版「状态」功能预计在10月份就能

分类标签墨刀交互动效优秀奖

11-17 22:28

掌握这5个关键步骤，产品小白也能快速学会原型设计

掌握这5个关键步骤，产品小白也能快速学会原型设计原型设计是产品设计过程中非常关键的一环，它可以帮助产品经理更好地理解用户需求并提供更好的解决方案。但对于产品小白来说，原型设计可能会是一个比较陌生的领域。下面介绍了掌握这5个关键步骤的重要性，并提供了一些实用的技巧和建议，帮助产品小白快速学会原型设计。

分类标签产品经理原型设计关键步骤

11-14 08:03

十大设计大神钟爱的软件推荐

十大设计大神钟爱的软件推荐相信有很多人都很羡慕那些设计大神能够做出杰出的设计，但你知不知道那些大神是用什么软件做出来的呢？下面介绍的这10款软件都是设计大神钟爱的，仔细看一看，总有一款适合你。1.CorelDRAWCorelDRAW作为图形设计软件的代表，以其杰出和革新的特性赢得了长期的声誉和用户的

分类标签设计软件CorelDRAWAffinityDesignerPhotoshopIllustratorAxureRPMockplusAdobeXDFigma墨刀Pixso

11-10 02:27

万兴科技旗下墨刀携创意软件产品亮相NDT2023中国新能源数字科技峰会

10月27日，以“数字科技智启未来”为主题的NDT2023中国新能源数字科技峰会在上海开幕。万兴科技（300624.SZ）受邀参加，携旗下墨刀等创意软件产品亮相峰会。期间，墨刀凭借协同效率提升、打通产设研流程等层面的优秀表现，引得不少展商及参会观众咨询交流。据介绍，墨刀优秀的协同能力和强大的企业素材

分类标签万兴科技墨刀新能源

10-28 22:15

AI配音：让你的视频说全世界的话

AI配音：让你的视频说全世界的话近日美国女歌星霉霉(泰勒·斯威夫特)说中文的短视频火遍全网，视频中霉霉操着一口流利地道的中文，神情自若几乎没有早期，译制片女主角的那种腔调口型也能对得上。还有一段马斯克采访视频中马斯克流畅地用法语向媒体侃侃而谈，阐述他对于AIl威胁的看法：不仅音色、语气以假乱真，就连

分类标签 AI配音口型同步音色克隆

10-26 10:03

ChatGPT Midjourney 文心一言文心一格 bing新必应 Stable diffusion 稿定设计墨刀AI mastergo Adobe Firefly runway