运营喵,粗来!手把手教你做Dribbble上优秀作品

原创

爱盈利 刀刀哥

行业资讯

29

3月前

我们运营喵在公司虽然扮演的军师角色,为公司谋划发展大计,但是其实卑微的不行。

做个活动一要靠设计出图,二要靠产品经理进行排期,三要依赖技术实现。那种状态可谓是求爷爷告奶奶。



图片


所以,很多运营喵为了缩短需求实现路径,直接自学设计、产品。此情此景,感人肺腑。


今天,我们也为运营喵们准备了一些非常实用技术干货,全部来自 Dribbble ,希望大家从此活动不求人!


话不多说,赶紧来看吧~            

1.点赞       

点赞是产品中一个常见的功能,各个产品对于这个功能的设计都比较类似。

如:微博

图片

图片来源:墨刀素材广场-社交原型


YouTube


图片

图片来源:YouTube网站截图


抖音


图片

图片来源:墨刀素材广场-短视频原型1


从上面几个例子可以看出,目前主流的点赞设计是通过按键引起图标变色完成的。


而这次分享的点赞,则是通过手势和文案的变化来塑造出点赞,并且手势的动效将点赞诠释的更为生动具体。


图片

作品链接:Thumbs up button

作者主页:Aaron Iker

(点击蓝色文字,即可跳转)


这个效果完全可以利用墨刀的动态组件制作哦~


(p.s 墨刀是一个集原型、设计、脑图、流程图为一体的办公协作神器。有资源丰富的素材广场,点击即可使用,超节省工作时间;还能画思维导图、流程图,绘制原型,全方位助你完成设计创作。)


图片

(点击查看:完整版点赞效果帮助视频



日程管理                     



现在但凡厉害的人都精通于时间管理,利用日程管理产品把自己安排的明明白白。


虽然市面上日程管理的产品也不少,但是设计上大体都是日历+备忘录+提醒事项,交互效果大多是页面跳转为主。


图片


而我这次在Dribbble看到了一位设计师却是从向下、向上的弹窗形式来制作的日程管理,有一定的创新,并且从交互上看也很美观。



   


图片

图片

作品链接:PROJECT MANAGEMENT APP CONCEPT 3

作者主页:Leonid Arestov

(点击蓝色文字,即可跳转)



当然,这个墨刀也能做。    

第一步,去素材广场的跳转你喜欢的日历组件,或自己利用表格组件画一个也行。    

   


图片

图片来源:墨刀素材广场-Element时间、日期选择组件


图片

图片来源:墨刀-表格组件



   
第二步,,在页面编辑区,将保存到素材库的组件拖入页面,利用动态组件,制作一个类似于微信公众号菜单的弹窗。    

   


图片


图片来源:墨刀工作区-拖拽组件方法    

   


图片

(点击查看:完整版弹窗效果帮助视频



   
简单两步,立马上手。    





3.                    

开机动画&轮播                    



有些产品会在第一次使用的时候,会采取一些绚丽的开场,直接就奠定了自己独一无二的产品特质,而我往往也会被打动,不由地竖起大拇指,嘴里惊呼“牛啊”!


比如说这个作品:


图片

作品链接:MAGMA® INTERACTION SIGN IN

作者主页:Devox Software

(点击蓝色文字,即可跳转)



酷炫有没有?!看完让我注册就注册。    

   
其实,复刻一个这样的效果也不难,就是有点花时间,只需运用墨刀的状态功能即可。    

   


图片


(点击查看:完整版状态功能帮助视频    

   




4.                    

支付界面                    



相信大多数人使用手机最多的两个功能就是:聊天和支付。


对于支付界面的设计,大部分产品都以简洁为主,但是我要分享的这个作品,在简洁的交互中还保留一丝自己的小心思,增加了一些动态效果。


图片


作品链接:CHECKOUT EXPERIENCE

作者主页: Vishnu Prasad

(点击文字,即可跳转)


这个本质超简单的,就是价格页和资料页均采用表格组件即能完成,进度条则运用的状态功能。




5.                    

课堂作业                    



看完了上面作品,你有没有一些收获呢?


现在可以注册使用墨刀,新用户将获得15天企业版试用哦~


图片



最后,给大家布置一次课堂作业!


下面,我将继续分享一些来自墨刀素材广场的作品,大家不妨来说说,它们可以利用墨刀哪些功能可完成呢?



作品一                                    



图片



作品                                    



图片



想知道正解的话,不妨去墨刀素材广场找答案哦~        

   

   

墨刀官方网站

www.modao.cc            


微信扫码分享

分享到微信
交流圈

扫码进群免费领取会员

微信公众号

热门文章

{{item.title}}

{{item.time_desc}}

直播电商大数据分析平台
  • 实时直播
  • 爆款直播间
  • 达人榜单
  • 热门商品
  • 爆款视频
  • 电商干货
  • 电商问答
  • 更多功能

更多

运营喵,粗来!手把手教你做Dribbble上优秀作品
爱盈利 刀刀哥
29 浏览 3月前

我们运营喵在公司虽然扮演的军师角色,为公司谋划发展大计,但是其实卑微的不行。

做个活动一要靠设计出图,二要靠产品经理进行排期,三要依赖技术实现。那种状态可谓是求爷爷告奶奶。



图片


所以,很多运营喵为了缩短需求实现路径,直接自学设计、产品。此情此景,感人肺腑。


今天,我们也为运营喵们准备了一些非常实用技术干货,全部来自 Dribbble ,希望大家从此活动不求人!


话不多说,赶紧来看吧~            

1.点赞       

点赞是产品中一个常见的功能,各个产品对于这个功能的设计都比较类似。

如:微博

图片

图片来源:墨刀素材广场-社交原型


YouTube


图片

图片来源:YouTube网站截图


抖音


图片

图片来源:墨刀素材广场-短视频原型1


从上面几个例子可以看出,目前主流的点赞设计是通过按键引起图标变色完成的。


而这次分享的点赞,则是通过手势和文案的变化来塑造出点赞,并且手势的动效将点赞诠释的更为生动具体。


图片

作品链接:Thumbs up button

作者主页:Aaron Iker

(点击蓝色文字,即可跳转)


这个效果完全可以利用墨刀的动态组件制作哦~


(p.s 墨刀是一个集原型、设计、脑图、流程图为一体的办公协作神器。有资源丰富的素材广场,点击即可使用,超节省工作时间;还能画思维导图、流程图,绘制原型,全方位助你完成设计创作。)


图片

(点击查看:完整版点赞效果帮助视频



日程管理                     



现在但凡厉害的人都精通于时间管理,利用日程管理产品把自己安排的明明白白。


虽然市面上日程管理的产品也不少,但是设计上大体都是日历+备忘录+提醒事项,交互效果大多是页面跳转为主。


图片


而我这次在Dribbble看到了一位设计师却是从向下、向上的弹窗形式来制作的日程管理,有一定的创新,并且从交互上看也很美观。



   


图片

图片

作品链接:PROJECT MANAGEMENT APP CONCEPT 3

作者主页:Leonid Arestov

(点击蓝色文字,即可跳转)



当然,这个墨刀也能做。    

第一步,去素材广场的跳转你喜欢的日历组件,或自己利用表格组件画一个也行。    

   


图片

图片来源:墨刀素材广场-Element时间、日期选择组件


图片

图片来源:墨刀-表格组件



   
第二步,,在页面编辑区,将保存到素材库的组件拖入页面,利用动态组件,制作一个类似于微信公众号菜单的弹窗。    

   


图片


图片来源:墨刀工作区-拖拽组件方法    

   


图片

(点击查看:完整版弹窗效果帮助视频



   
简单两步,立马上手。    





3.                    

开机动画&轮播                    



有些产品会在第一次使用的时候,会采取一些绚丽的开场,直接就奠定了自己独一无二的产品特质,而我往往也会被打动,不由地竖起大拇指,嘴里惊呼“牛啊”!


比如说这个作品:


图片

作品链接:MAGMA® INTERACTION SIGN IN

作者主页:Devox Software

(点击蓝色文字,即可跳转)



酷炫有没有?!看完让我注册就注册。    

   
其实,复刻一个这样的效果也不难,就是有点花时间,只需运用墨刀的状态功能即可。    

   


图片


(点击查看:完整版状态功能帮助视频    

   




4.                    

支付界面                    



相信大多数人使用手机最多的两个功能就是:聊天和支付。


对于支付界面的设计,大部分产品都以简洁为主,但是我要分享的这个作品,在简洁的交互中还保留一丝自己的小心思,增加了一些动态效果。


图片


作品链接:CHECKOUT EXPERIENCE

作者主页: Vishnu Prasad

(点击文字,即可跳转)


这个本质超简单的,就是价格页和资料页均采用表格组件即能完成,进度条则运用的状态功能。




5.                    

课堂作业                    



看完了上面作品,你有没有一些收获呢?


现在可以注册使用墨刀,新用户将获得15天企业版试用哦~


图片



最后,给大家布置一次课堂作业!


下面,我将继续分享一些来自墨刀素材广场的作品,大家不妨来说说,它们可以利用墨刀哪些功能可完成呢?



作品一                                    



图片



作品                                    



图片



想知道正解的话,不妨去墨刀素材广场找答案哦~        

   

   

墨刀官方网站

www.modao.cc            


更多阅读

{{item.title}}

{{item.title}}

{{item.content}}