weeen960的博客

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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