header_v0.7.32

【DPS 2015】打造一款自己的App

2年前发布

原创文章 / 平面 / 教程
hlcc 原创,如需商业用途或转载请与hlcc联系,谢谢配合。

【DPS 2015】打造一款自己的App,结合InDesign制作一款属于自己的APP吧。

今天收到Adobe的邮件,说是我的Adobe DPS 2015试用帐号快到期了,所以赶紧把这部分的教程先写掉。后面的内容制作部分在后续教程中补充。


Adobe DPS 2015提供了更个性化的定制功能,利用它完全可以打造一个相当专业的App,关键是你还不用写一行代码。DPS 2015 是把你传统纸质出版物数字化的最便捷的方法。


本质上DPS 2015是一个在线的内容管理和打包工具,利用InDesign 或 Html5生产内容,然后用DPS 2015打包成App,生成APP之后,内容是通过在线加载呈现的,并不像DPS(2015之前的版本统称为DPS)可以缓存到本地。



效果演示(实际很流畅的,录的不好)

花了点时间做了个简单的演示案例,最顶上的是一个横幅,点击有链接跳转到网页,接着是产品的集合,最后一个文字也是一个横幅,但只放了一张图片,且占1X1的网格。产品页用了另一个布局,并且采用的展示卡片也和首页不一样。



DPS2015 申请试用地址(30天)

https://trial.publish.adobe.com/


界面介绍


在左侧的导航菜单里,两个灰色的链接文字,只有企业版登陆才会启用,主要是用于统计、指导营销的。最重要的一项就是内容和布局,而且也不容易理解,我尽量去解释的更有条理一些,大家还是要多动手尝试才能深入理解。


DPS 2015工作界面



项目设置


修改项目需要先选中项目,后面的四个按钮对应左侧导航的功能。




项目设置只需要设置基本、应用程序导航两项就可以。(分析有点带星号的,也和链接引用一样填写)

项目标题:随意

链接引用:反向域名的格式,如com.wvm.dps

社交共享:启用后能分享到facebook,微博之类的

品牌图像:生成App之后,左侧导航将会显示这个图像,一般用品牌logo。

应用程序导航:1个顶级,和2个顶级导航。如果你想让这个App同时兼容ipad,iphone那么就用2个顶级导航。这个效果就像是现在的自适应网页,在手机端和PC端显示的布局是不一样的。


项目完成之后,就可以为项目指定用户,并为每个用户指定权限,比较简单不作介绍。



内容和布局


在DPS 2015中需要你手动上传内容,内容必须是.article格式的文章,加一个缩略图。并为你的文章指定标题和描述,方便在程序中调用。如不需要可以不添加描述,但标题一定要写。

(如果你的InDesign不能导出.articleDPS文章,请查看DPS介绍那篇文章更新软件。)



发布文章:发布内容至APP,你的客户能看到这些文章。

生成预览:没有发布也可以在测试的客户端里看到内容,每次有新增、修改都需要点击这个按钮,客户端才会看到新增、修改的内容。



新增文章只需处理前面三个选项卡,文章元数据填写标题和描述就可以了;图像上传缩略图,内容文件上传.article文件(此时并不会上传这个文件,点完成它才会开始上传)。


在文章元数据选项卡里,下方有一项叫“文章重要性”,这里大家先注意一下,后面会讲到。

新增文章有两个类型,还一个叫“横幅”,只要上传一张图片并指定跳转连接就可以了。



集合


集合这个概念是没错,但对国人来说理解起来还是有点别扭,它的作用是将多个文章放到一个集合里,然后通过布局和卡片来定义这个集合将以什么方式显示出来。


举个例子:假如你的APP里有卖鞋子,和衣服。那么你就可以把鞋子的文章放到一个集合里,把衣服放到另一个集合。这样你可以通过布局让他们的显示方式不一样。上文提到的重要性就是作用于布局的,假如你有一款新品需要推荐,那么可以将他的重要性设为最高,这样在显示的时候可以根据重要性让他的图片显示更大、更显眼。



default是一个特殊的集合,当你创建项目时会自动为你创建一个顶级集合。打开App时的首页就是显示这个集合下的第一个集合或文章。如果你在新建项目时选了2个顶级导航,这里就会出现两个。他们分别控制平板和手机的布局方式。



创建集合的方法和文章类似,有一个选项需要特别注意,集合打开的默认值,如果选择“浏览页面”,那么打开这个集合时,会将集合下所有的文章列出来(相当于一个文章列表);若选择“内容视图”,打开这个集合时,将直接转到这个集合下的第一个文章的详细内容页。


集合中可以添加集合、文章、横幅这些类型,顶级导航(default集合)下的集合或文章名称,将会以菜单的形式显示在APP的左侧导航。


卡片


卡片是用来显示某个集合或文章内容的,系统自带了5个常用的卡片格式,如下。


卡大小:卡在布局网格上所占的网格数,如果4x2,表示的是横向4格,纵向2格

卡样式:设置卡的边框和背景

卡布局:卡所调用在图片和文字的布局微调

卡元数据:调用哪些数据(标题、描述等等)

元数据样式:设置标题、描述等字体、大小、颜色、边距等

关联布局:将卡关联到一个布局


布局


布局是呈现页面的基础,是以网格的形式表现的,而卡片就在这些网格中占位,然后再把集合或文章的内容读取出来。

注意:卡片应该与网格数匹配,如布局是3X3的网格,如果卡片设成了4X3,超过布局的网格数,那么卡片将不起作用。


最多可以设成12列,设置单元长宽比以满足不同的展示需求,最好是整数。若要使用集合背景,请在设置集合时添加一张大的背景图像,使用时会自动裁切。


这个布局应用了两个卡,一个放横幅的Banner卡,和一个Default默认卡。拖动后边的箭头,可以改变优先级。


关联集合,意思是这个布局要调用哪些内容。可以在集合里设置布局关联。


创建应用程序


可以创建三个平台的应用程序,右上角的Signing Tool是签名工具,Windows版只能签名安卓系统,Mac版可签名IOS和安卓系统。没有签名的程序是不能直接安装到手机上的,签名需要用到App开发者证书(后面再出教程),签名之后就可以安装到手机测试了。测试完成之后,可以直接提交到AppStore供用户下载。通知功能同样需要用到App开发者证书,在后台可以给客户端推送通知。




BUNDLE ID也用反向域名的写法,记得勾选“启用预览”,这样不用发布就可以在自己的手机上测试效果。



上传程序图标和启动界面。

40
    意见反馈
    没有新消息
    密码登录
    短信登录
    微信二维码登录

    提示文案

    提示文案

    提示失败
    提示成功