你可能一行代码都不会写,但每天打仗这么多手机App心里总会有些痒痒,如何在没有任何编程根本上开拓一款逻辑分明、架构完善的手机运用程序?实在借助一些工具,无需任何打算机理论我们也可以轻松完成这一义务。
接下来我们就为大家先容一种大略的开拓路子,你只须要准备笔纸或者大略的PS技巧,只需10分钟,一款精良的手机App就出身了。

不会编程也能做 10分钟学会开拓手机Ap

首先我们须要借助这款开拓神器——POP-Prototyping on Paper,这款App旨在帮助我们仅仅通过手绘来完成手机运用的界面、UI设计、框架搭建和开拓。
你只须要把想要开拓的界面原型画出来,通过手机拍照和热点互链完成交互,就能将一个App画出来。

手绘制作的App

不会编程也能做 10分钟学会开拓手机App

为了更好的演示POP开拓手机App的过程,我们决定为大家重新开拓一款手绘板“中关村落在线”App,详细向大家手机App是如何通过铅笔画出来的。

2笔纸结合 手工绘制界面图形

笔纸结合 手工绘制界面图形

在开拓手机App之前,我们必须有完成的交互方案,比如什么地方放什么东西,两个页面之间若何实现交互,不同的内容之间怎么形成沟通,是不是须要添加新的功能等。
在方案App时你须要把自己当做一名产品经理,既要完善功能、用户体验还要兼顾都雅实用。

中关村落在线App的界面设计

鉴于ZOL技能部和设计部的大大们已经完成了所有成型的方案,我们只须要照抄就行,下面便是我们为手绘版“中关村落在线”App设计的各个界面的草图(画的不好,ZOL技能部和设计部的大大们请多多见谅)。

手绘版框架搭建

手绘版框架搭建

前面我们已经打好了框架,因此在画草图的时候每一个能够打开的页面都须要我们手工画出来,事情量比较大。
当然如果你想追求都雅和效率,也可以直策应用PS完成。
(把稳,POP根据不同的手机设置有不同的分辨率,以是我们在画草稿时一定要把稳屏幕的比例,苹果的开拓上风这个时候就显现出来了)。

绘制时一定要把稳比例

3添加交互 让手机App动起来

添加交互 让手机App动起来

接下来我们要在POP新建项目,和头像上传的办法一样,手机App也可以通过图片或者手绘一个圆角icon,现在是展示大家绘画功底的时候了(笔者手绘功底垃圾,这里盗一张设计部设计的图标)。

开拓App界面

依次将已经绘好的草图上传上来,点击左下角的相机标志即可录入刚才我们手绘的界面,这里还有大略的编辑功能,比如裁图,翻转角度、高亮等,填补拍摄的毛病。

上传手绘页面

添加链接

接下来我们要做的便是将所有的页面进行热区互链,比如在首页中有很多链接,包括组图、新闻链接以及各种功能按钮,现在我们只须要给每一个区域添加交互链接即可。

添加各种操作动作

点击左下角界面中间涌现一个赤色的伸缩框,把它拖动到我们须要链接的区域并进行缩放,然后就能链接到其他页面,比如点击下方的图赏按钮即可转换到图赏页。
POP供应多样性的点触和手势滑动动作,转场动作也有几个可以选择,完成的链接会显示绿色。

4视频演示 看一看我们做的App

视频演示 看一看我们做的App

按照前面的方案,我们须要在每个页面添加各种链接,你可以选择点触、滑动、捏合和双击等动作,基本上覆盖了目前所有App开拓所须要的动作。
完成以上操作之后一个完全的App就做好了。

正式版和手绘板比拟

视频演示

以下便是我们已经完成的手绘板中关村落在线手机App,除了绘画有些粗糙之外,操作体验的流畅度和原版没有太多差异,你也可以感想熏染一下自己设计手机运用程序的快感。
不过POP也有一些毛病,比如无法添加外链,添加的所有链接必须要我们逐一绘制出来。
但对付那些学习产品开拓的初学者来说利用有用,你可以通过POP来体验全体App的开拓流程,并实现各种动作的演示,进而能够理解个中涌现的问题,帮助我们快速创造。
如果你有兴趣,不妨也来考试测验做出一个来。