锐客网

  1. 首页 > it技术 > >

墨刀之原型图设计

概述

一个项目从立案到项目结束,项目的原型图设计师必不可少的,作为一个iOS开发者而言,其实我更应该关注一些程序方面的事情,而不是设计方面的问题,但是由于公司人员紧张,没办法只好把我这个小白拉上设计大业的刀锋浪口,正所谓工欲善其事,必先利其器.所以要想要正好设计原图,必先要有好的设计工具,如博客的文章开头图片所示,我这里推荐两个设计工具墨刀和Ature RP.



墨刀
[图片上传失败...(image-8f937d-1528437992826)]](http://upload-images.jianshu.io/upload_images/1396375-e0b9710e54e183d4.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

老话说得好,墨刀不误砍材工.墨刀这款原型设计工具,在我看来是一个轻量级的图像设计软件.支持网页编辑和本地客户端编辑两种方式.墨刀最强大之处就在于它支持手机查看设计原型功能.下面我们一一来看各个功能.

首先进入首页是这样的,墨刀的网页画风非常简约,也是我很喜欢的一个原因.在这里我们可以注册登录以及下载客户端.


墨刀之原型图设计
文章图片
图片发自App 这里登录注册我就过多说了,比较简单,我们不必使用企业级的,只要个人免费版的账号就够我们使用的了.接下来,我们登录上我们的账号进入我们的工作区(由于我的账号使用好长时间,所以跟新申请的账号有一些出入,但不影响后期的使用.)


墨刀之原型图设计
文章图片
图片发自App

首先进入创建应用页面之后,我们只需要创建一个空白的模板即可.


墨刀之原型图设计
文章图片
图片发自App 然后选择我们的应用平台,这里我就直接选择iOS,平台类型后期是可以进行修改的.


墨刀之原型图设计
文章图片
图片发自App 然后我们在接下来的面板就可以对应用的名称图标,设备类型进行设置了.随意去一个名字,然后这样我们的第一个应用原型就创建好了.


墨刀之原型图设计
文章图片
图片发自App 然后进入我们的第一个应用当中,我们就可以进行我们的创作了.工作区的页面布局是如下所示的.


墨刀之原型图设计
文章图片
图片发自App 首先我们先看工作区,这是我们应用原型的面板,我们需要往上面添加各个元素,当然了,如果实际页面高度超过手机的屏幕高度,那么程序就会成为滑动的了.


墨刀之原型图设计
文章图片
图片发自App 看完了工作区之后,我们看一下菜单栏,主要分为组件、母版、组合撒个模块.组件模块主要是存放各种元素各种组件的位置,我们可以直接使用鼠标把各种组件拖拽到工作区.当然,每一个组件具体什么功能,这里就不过多的解释了.


墨刀之原型图设计
文章图片
图片发自App 然后菜单栏的第二个模块是母版模块,有人会问,什么叫母版呢?通俗点讲,母版就是把一些组件组合起来的模块,我们可以直接拖拽使用,不用再次使用组件组合,缩短了创建时间.一般情况下,一些组件组合使用的次数较多,我们就可以创建母版来保存这个组合方便下次使用.这里提供了两个母版,一个是轮播图,一个是下拉菜单.当然了,我们也可以自己创建母版以及导入其他项目的母版了.


墨刀之原型图设计
文章图片
图片发自App
第三个是组合,类似于母版,但是更加的复杂,比如日历、弹出框等等我们都可以从这里面找到.


墨刀之原型图设计
文章图片
图片发自App 对于组件,如果我们不想使用系统默认的样式或者颜色,那么该怎么办呢?这时候我们需要对组件的属性进行设置,只要我们点击一下组件就可以出现属性列表,设置对应的属性即可.


一个应用不可能只由一个页面组成,那么如何创建页面多个页面呢?如图所示即可创建页面.


上面的一步我们是创建好了页面,页面的跳转怎么实现呢?我们看到每一个组件都有一个小尾巴,我们只需要把这个小尾巴拖拽到右边的页面单元上即可.同时我们可以通过选项菜单进行跳转动画的设置.



那么当所有都搞完了,我们如何查看我们的应用原型图呢?只需要点击运行就可以了,当然了我们也可以把应用原型图下载到手机上查看只要在预览页面点击分享按钮然后扫描二维码即可.

【墨刀之原型图设计】点击运行即可

    推荐阅读


    上一篇：清晨的公园

    下一篇：传统行业的你，怎么利用互联网赚钱（）