自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(35)
  • 收藏
  • 关注

原创 购物类App原型制作分享-Polyvore

Polyvore是一款个性时尚的购物App,你可以在这里寻找穿衣搭配灵感,同时也会收获各种潮流新品。这款App对新用户特别友好,第一次进入时,大部分页面都会有蓝色的指引箭头来引导操作,在原型设计中,可以使用箭头组件,调整箭头线条幅度和线型来实现引导。其中还有一些小的交互在这款原型中都有体现哦。先简单看看动图:点击这里,可以立即在线预览:https://run.mockplus.cn/gbic5eC...

2018-03-26 10:50:44 482

原创 饮品类App原型制作分享-Starbucks

Starbucks是星巴克的一种便捷购买App,可以在店内付款或提前订购。其中还内置了奖励,你可以收集星星,赚取免费的饮料和食物。这款App中,采用了一些小插画,交互动效也很特别,有的页面切换之后,会出现一些小动画,这在Mockplus中可以使用“载入时”触发方式实现。有的页面切换方式是向上下展开切换,目前我们在原型阶段还暂时做不到,但是这种交互方式是可以借鉴的,它能让我们的App变得生动有趣。先...

2018-03-20 13:08:04 460

原创 求职类App原型制作分享-Part-time Clouds

Part-time Clouds 是一款兼职信息平台,你可以在此寻找合适的兼职工作。这款App使用起来十分简单,不用登录注册即可直接可以进入主页,主页展示了大量兼职信息,你可以根据需求收藏职位、查看详情,或一键拨打联系电话,其中还有详细的职业分类页面。先简单看看动图:点击这里,可以立即在线预览:https://run.mockplus.cn/7unHBjc8xIqiK5k2/index.html再...

2018-03-13 10:12:51 395

原创 优秀原型设计欣赏:社交类App原型制作分享-LinkedIn

LinkedIn是全球最大的职业社交平台,通过LinkedIn可以连接机会并挖掘你的专业潜力。该应用程序可以更轻松地发现、连接和培养与重要人物的关系,搜索和申请工作,并获得有关主题和公司的最新信息。这类社交App,最重要的就是前期个人信息的填写,因此在原型中,做了大量个人信息填写相关的页面,这其中的流程和逻辑是值得学习的。先简单看看动图:点击这里,可以立即在线预览:https://run.mock...

2018-03-06 11:50:50 977

原创 阅读类App原型制作分享-Another Read

Another Read是一款阅读学习App,它主要是带给你最具创意的作家与插图画家出版的儿童读物。在这款App中,你可以根据喜好来左滑或者右滑书籍,喜欢的书籍将会被保存下来。在Mockplus中,这种滑动的动效是可以实现的,这里我采用的是移动交互和旋转交互结合使用,只需设置好旋转角度和移动距离就可以轻松实现。先简单看看动图:点击这里,可以立即在线预览:https://run.mockplus.c...

2018-02-26 17:36:25 1752

原创 优秀原型设计欣赏:美食类App原型制作分享-Sooshi

Sooshi是一款美食类的App,专门介绍各种寿司的制作,这款App最大的亮点在于每个菜单页面都使用了重力感应,使这款简单的App变得十分有趣。在寿司制作的详情介绍里,还使用了动画+文字的方式来呈现每一个制作步骤,生动明了,在这个页面的原型中,采用的是将所有步骤文字分别写好,然后全部隐藏,点击上一个步骤文字,显示下一个步骤的文字,使简单的制作步骤有互动的效果。先简单看看动图:

2018-02-07 16:39:42 1220

原创 优秀原型设计欣赏:交通类App原型制作分享-DiDi

DiDi是一款打车App,这类App中用得最多的就是地图,在Mockplus中,有静态的地图组件,可以直接使用,然后为了还原App中的定位图标,我使用了圆形图标来拼凑了一个新的定位图标,其次,图标库中有几种不同的车辆图标,可以直接使用。下面一起来看看。先简单看看动图:点击这里,可以立即在线预览:https://run.mockplus.cn/2eauJMh9abzkwt

2018-01-30 10:46:32 817

原创 天气类App原型制作分享-ColorfulClouds

ColorfulClouds是一款界面精美的天气预报App,它可以准确预报降雨量、污染程度等。这款App最美的是它的首页天气插画,扁平精美,同时配上了适当的动效,把普通的天气变得漂亮有趣,十分吸引眼球。同时,这类App中会用到大量的天气图标,在Mockplus中,拥有2000+的矢量图标,可以轻松找到各类所需天气图标。先简单看看动图:

2018-01-23 12:08:25 818

原创 视频类App原型制作分享-VUE

VUE是一款短视频拍摄和剪辑App,是视频社交达人必备神器。它的配色简单鲜明。第一次进入App首页时,会有简单的操作引导说明,这在Mockplus中即可使用单独的一个页面来制作,又可使用弹出面板来制作。其次是录制视频时,点击开始按钮,会出现视频录制进度条,这里使用的是调整尺寸动画,将进度条(可以用形状组件表示)原始宽度设置到最小,然后调整进度条宽度即可实现。先简单看看动图:

2018-01-15 16:41:45 329

原创 视频类App原型制作分享-PocketVideo

PocketVideo是专为iPhone视频创作者设计的最强大的视频编辑应用程序。这款原型中,当切换到视频编辑页面时,视频下方的图像与音频会自动播放,在Mockplus中,可以采用载入时的触发方式,设置移动动画,估算好移动距离,将动画时间设置长一些(时间越长,移动速度越慢),这样就可实现图像的自动播放效果。先简单看看动图:点击这里,可

2018-01-09 13:54:54 382

原创 效率类App原型制作分享-Swipes

这是一款效率工具类App,可以记录事情和帮助提升工作效率。原型主要制作了登录注册页面和几个主要页面。在登录注册页面中,常常会有这样的效果,当输入了密码,登录按钮会改变颜色并且可点击。在Mockplus中,你可以使用改变颜色交互,当然触发方式依然是点击时(可设置为点击输入框),点击后登录按钮颜色就会改变。一起来看效果。先简单看看动图:点击这

2018-01-02 18:55:02 324

原创 教育类App原型制作分享-Encode

这款原型例子是教育类型的App,主要学习编程方面的知识,配色是偏系统的颜色,布局也相对简单明了。首页采用的是列表形式,采用快速格子可以快速实现列表的布局,其次是长页面的滚动效果,在Mockplus可以通过两种方法实现:一是拉长手机模型;二是使用滚动区,之后的例子中可以给大家介绍下二者的区别,现在一起来看效果。先简单看看动图:点击这里,

2017-12-25 13:32:58 630

原创 美食类App原型制作分享-Beanhunter

Beanhunter是一款咖啡App,它帮助喜欢喝咖啡的用户找到世界上最好喝的咖啡馆。它的配色是温暖浓烈的,就像咖啡带给人的感受一样,香醇,浓厚。和美食类应用一样,这款App也是需要大量的图片来布局,从引导页面到主页面,都是采用图片+文字的方式,引导页之间的跳转采用的是滑动动画,虽然Mockplus还不支持手势操作,但在原型阶段,滑动的页面切换方式,可以达到同样的效果。先简单看

2017-12-19 15:27:24 946

原创 工具类App原型制作分享-Workflow

Workflow是一款个人自动化工具,这款App最大的亮点在于配色和引导动画,在原型阶段为了突出这款App,制作时把颜色和动画都高度还原了。Mockplus在动画这方面的支持还是不错的,使用“载入时”的触发方式即可实现页面切换后,动画自动播放的效果。下面来看看效果有多赞。先简单看看动图:点击这里,可以立即在线预览:https://ru

2017-12-12 11:05:00 281

原创 服务类App原型制作分享-South Devon Accounting

这是一款服务类App,主要提供会计和商业咨询类服务。这款App首页局部很简单清晰,直接把主要分类菜单以图标+文字的形式排列出来,这让我直接使用了Mockplus的图标按钮组件,该组件既可添加图标,又可编辑文字,并且外形可以自由选择,十分好用,同时丰富的图标库,让我在选择图标时,轻松快速。先简单看看动图:点击这里,可以立即在线预览:ht

2017-12-04 14:43:31 206

原创 购物类App原型制作分享-Lyst

这是一款来自英国的时尚购物信息平台,传统的购物加上时尚信息推送是现在购物类应用常见的方式,购物类App讲究分类全面,搜索准确,布局通常是内容丰富但又条理清晰。所以在原型设计阶段,逻辑与布局显得尤为重要。先简单看看动图:点击这里,可以立即在线预览:https://run.mockplus.cn/Cob973YGOHnuBWhF/inde

2017-11-28 10:27:47 479

原创 工具类App原型制作分享-Pocket Fuel

这款App在配色上非常清新,启动页和登录注册页面都是采用的渐变色彩,目前Mockplus中还不支持渐变色彩,但在原型设计阶段似乎并无影响。之后的版本中会加入渐变色的支持,让原型设计更自由和有更多发挥的空间,甚至,UI后期的美化都将可以直接在Mockplus中去实现。先简单看看动图:点击这里,可以立即在线预览:https://run.m

2017-11-20 17:31:13 324

原创 体育类App原型制作分享-AusOpen

AusOpen是一款澳大利亚网球信息App,精彩的赛事,实时更新。体育新闻类的App,具有时效性,同时赛制信息也要展示得清晰明了。这款原型涉及到了一些重复布局的页面,比如列表,制作时,先做好其中一个列表项,使用快速格子(Repeater)功能,右键转化为格子以后,只需一拖,多个相同的列表项就轻松呈现,快速高效,一试便知。先简单看看动图:

2017-11-14 10:05:20 731

原创 健康类App原型制作分享-Pillow

Pillow,一款健康类App,主要是睡眠管理类型的,这类App比较讲究页面视觉上的舒适安心。功能上,有一个时间选择器,这个功能采用的是两个滚动区组件,分别在组件内设置小时和分钟数值,演示时,用户可以上下滑动来分别选择时和分的数值,直观的表达了交互效果。先简单看看动图:点击这里,可以立即在线预览:http://run.mockplus

2017-11-07 10:51:27 592

原创 教育类App原型分享-Mimo

Mimo 是一款学习类的App,在做这套原型的时候,我特地将App启动引导页面也做出来了。一款好的产品,是会在细节上引导和帮助用户轻松了解产品的特点以及使用方法,因此,引导页的作用就非常的大,它既是对产品的第一印象,又是对产品的功能的简单说明和使用帮助。之后,我还会尝试让引导页动起来,下面我们一起来看效果吧。先简单看看动图:点击这里,可以

2017-10-31 11:30:39 912

原创 效率类App原型制作分享-One List

One List是一款效率类工具,这款App最大的亮点是前面用了6页动画,来引导用户如何操作这款软件,引导页采用动画的形式,比较有趣,且演示清晰易懂。今天我也会给大家分享如何利用原型工具Mockplus来实现引导动画。先简单看看动图:点击这里,可以立即在线预览:http://run.mockplus.cn/W2qfYImZXg5zEaH4/index.html引

2017-10-24 11:42:46 330

原创 工具类App原型制作分享-Asana App

Asana是一款工作任务管理工具,它有手机端和网页端,这款App在配色上很棒,采用了一些渐变色,这里由于是制作原型,采用的色彩依然是黑白灰,主要体现功能和交互,这类App,功能上,注重任务创建方便快速、任务完成进度跟踪,任务分类归档清晰,对于团队任务,分工明确,管理便捷等,下面一起来看原型,之后会和大家分享这款软件的网页版,可以对比App端和网页端的一些设计规范和区别。先简单看看动图:

2017-10-17 11:29:58 453

原创 美食类App原型制作分享-Bon App!

Bon App!是一款美食类App,这次也是尝试做出高保真的原型,最大可能的还原了App的配色和交互。因为是高保真,所以特别注意的就是细节的设计,图标、按钮形状、输入框样式等,在属性上都做了相应的设置,Mockplus的组件属性还是相当丰富,但如果涉及到一些个性化的组件,就需要使用一些基本组件的拼凑(比如二维码扫描);另外,交互方面也高度还原,弹出、内容切换、滑动这些基本交互都能轻松实现,一起来看

2017-10-10 15:26:49 941

原创 旅游类App原型制作分享-Triposo

今天带给大家的,还是一款旅游类App,这类App在设计时的一些注意问题前面已经给大家分享过了,这次重点给大家展示的是这一款原型中的启动页面,在设计的时候,只用了一个简单的交互效果:隐藏显示,触发方式是载入时。只需要几秒钟,这个启动页面的交互效果就轻松搞定。一起来看:先简单看看动图:点击这里,可以立即在线预览:http://run.mo

2017-09-26 16:13:19 774

原创 运动类App原型制作分享-Zombies, Run

Zobies, Run,一款运动类App,帮助监督你实行自己的健身计划。这款App我试着做了板块的立体视觉效果,由于Mockplus中没有阴影效果(当然在原型阶段这是不必要的),但是为了尝试让这款App的特点更突出,我用矩形组件去除部分边框,只留下底部边框,再将底部边框颜色加深,从而实现一个立体效果的选项,其次,分隔条我也使用了两根不同颜色的线条组合,做出了立体分割的效果。下面,来一起看看效果吧。

2017-09-19 10:12:27 565

原创 Guides-旅游类App原型分享

Guides是一款旅行类App,这款App本身的颜色并不多,重点是要突出各个旅游景点的图片,所以这类App讲究后期对图片质量的把控,特别是图片占比较大的页面。在原型设计上,主要还是注意交互友好、对景点的介绍全面以及搜索方便等,下面一起看看效果。先简单看看动图:点击这里,可以立即在线预览:http://run.mockplus.cn/H

2017-09-12 12:37:08 599

原创 工具类App原型制作分享-Asana App

Asana是一款工作任务管理工具,它有手机端和网页端,这款App在配色上很棒,采用了一些渐变色,这里由于是制作原型,采用的色彩依然是黑白灰,主要体现功能和交互,这类App,功能上,注重任务创建方便快速、任务完成进度跟踪,任务分类归档清晰,对于团队任务,分工明确,管理便捷等,下面一起来看原型,之后会和大家分享这款软件的网页版,可以对比App端和网页端的一些设计规范和区别。先简单看

2017-09-08 10:20:08 502

原创 FitStar Yoga-健身类App原型分享

FitStar Yoga是一款瑜伽App,这类App帮助用户轻松学习瑜伽课程,主要以视频为主,由于是原型设计,所以不必把真的视频导入其中,这里除了用相应的视频图标来表示视频外,Mockplus中也提供了常用的批注组件,当在原型中有的组件无法表现完整的功能时,我们就可以使用批注组件来标注说明我们这个组件的完整功能,既减轻了设计工作量,又便于后期沟通。下面来看看成果。先简单看看动图

2017-08-29 12:03:33 869

原创 【摩客专访】简单易用的背后是吹毛求疵的追求 | 专访“方片收集”作者田飞

采访者:做原型更快更简单的Mockplus 企划经理 Martin受访者:“方片收集”作者田飞先生及其团队本期“摩客专访”我们非常荣幸邀请到了“方片收集”和“水滴清单”的作者田飞先生和他的团队,他们设计开发的“方片收集”是一个优美高效的信息收集应用,曾连续获得苹果 App Store 连续 6 次推荐,多次登榜“付费工具榜单”第 1 名,并摘得 App Store

2017-08-22 17:20:29 503

原创 音乐类App原型制作分享-Qello Concerts

Hi~今天做了一套音乐类App Qello Concerts,这类App和美食、旅游类较类似,都是需要后期图片的填充,因此图片质量至关重要。在做原型的过程中,基本组件就能满足要求,但是这次尝试用Mocplus中的基本组件结合移动交互做了一个异性选项卡,外观和切换动画效果还不错,下面一起来看看吧!先简单看看动图:点击这里,可以立即在线预

2017-08-22 12:25:21 512

原创 购物类App的原型制作分享

Villoid App是一个购物类的APP,这次是按照原型的标准,采用了黑白灰的配色,这便于UI设计师后期在颜色上的发挥和设计。细节方面,做了一些页面跳转时加载的动态效果,这也是我们在做原型设计时可以多考虑的地方。下来一起来看看效果吧。先简单看看动图:点击这里,可立即在线预览:http://run.mockplus.cn/NQwAhu

2017-08-08 10:54:53 1899

原创 2017年UX设计流行的六大趋势

UX设计在接下来的2017年会有怎样的发展趋势呢?让我们一起回顾去年用户体验设计领域中的变化,来展望新一年用户体验设计的发展趋势吧。1. 原型制作的爆炸性增长随着用户体验设计师和用户界面设计师的界限变得越来越模糊,这两种独立的设计也必将会成为更加融合的设计流程。2017年随着新型原型设计工具的不断推出,将概念变为现实将比以往更加容易,原型设计也会成为每个设计

2017-03-16 16:08:57 488

原创 解决Axure发布分享预览的3个方法

公司的同事制作的一个产品原型,要发给我,我当时正在客户这里,电脑上并没有Axure,客户又催得急,感到一阵无奈。这次回来之后,经过一番摸索,发现还是有办法的。这里给大家分享一下Axure发布分享预览的方法。1、使用AxShare这个是Axure官方提供的服务。方法是:把你的rp文档,上传到http://share.axure.com(Axure软件里

2017-03-16 09:29:22 2053

原创 解决Axure发布分享预览的3个方法

公司的同事制作的一个产品原型,要发给我,我当时正在客户这里,电脑上并没有Axure,客户又催得急,感到一阵无奈。这次回来之后,经过一番摸索,发现还是有办法的。这里给大家分享一下Axure发布分享预览的方法。1、使用AxShare这个是Axure官方提供的服务。方法是:把你的rp文档,上传到http://share.axure.com(Axure软件里

2017-03-16 09:24:45 1941

原创 使用摩客原型托管发布原型的五大理由

之所以喜欢摩客原型推广,主要在于简单、安全(摩客有40万用户,当然信任),和Mockplus一样,简单高效。摩客原型托管支持Axure, Justinmind, Sketch导出的HTML原型。 五大理由: 1  轻松上传一键轻松上传原型,彻底告别部署繁琐、操作复杂的SVN、SAE等(SVN、SAE令人头疼)。 2  快速分享上传原型后,立即生成

2017-03-10 16:59:30 679

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除