技能 | 是时候给钱包减减肥了

封面 

电子钱包这个词最早是在中国移动那里听到的,但是一直没有使用,也没法使用,国内设备也不支持。前几年,在国内发行的手机中,支持NFC的越来越多,于是中国移动搞了个和包App,只要你手机支持和包NFC,那就能把手里的银行卡添加到手机里,甚至公交卡也可以,以后只带手机就可以出门了。理论上是这样,可实际上,还要看和包这个App跟你当地的银公交公司或者其他商家有没有合作。

我今天要说的,不是和包,而是 iPhone 中的 Passbook,现在应该叫 Wallet 。

在 Wallet 中添加银行卡也不是什么新鲜事,各大银行也都有教程。今天不讲银行卡,这个太简单,只要你有银行的客户端或者微信公众号,都能从中学会如何把银行卡添加到 Wallet 中。

之前用过 Passbook / Wallet 的都知道,向大众点评、猫眼电影、豆瓣电影、国行无线等等这些App,都支持 Passbook / Wallet 。比如你在猫眼电影这个App上买了电影票,那么这张电影票是可以添加至 Passbook / Wallet 中的,而且支持更新,用过之后就不能再用了。

App Store 中支持 Wallet 的应用

实际生活中,我们使用最多的不是像电影票这样的电子凭证,钱包里除了银行卡,就是各个门店的会员卡或者积分卡,这些卡片中绝大多数是不支持 Passbook / Wallet 的,平时出门又要带很多卡,因为指不定什么时候就能用到。所以,很多人的钱包都是鼓鼓的,很不方便。

有没有办法把这些卡片都装进手机?

有!

但是需要你确定一件事,那就是你的会员卡是不是通过扫码来使用的,这个你在使用过程中就能看出来,如果收银员拿扫码枪来扫你的卡,那就支持扫码。如果是磁条卡,那今天讲的方法就跟你无关了。当然,也有的卡片是条码和磁条都支持的,必要时去门店确认一下。

言归正装,接下来教大家如何使用 Passdock 这个神器把你的卡片添加至 Wallet 中。Passdock 有网页版,也有iOS版,最大的特点就是可以自己设置卡片的外观,你用自己照片都可以,毕竟起作用的是卡片上的那个条码。

以下方法是在 Passdock 网页版中完成的,国外的网站,有点慢,想要快的自己想办法,你懂得。


1. 注册并登陆 Passdock


api.passdock.com 页面

在浏览器(我用的是Chrome)中输入地址:api.passdock.com,前往注册并登陆。

我的账号

上面是我的账号,之前已经做过三张了,分别是好又多会员卡、济南华联商厦会员积分卡,真维斯VIPCARD,亲测能用。

2. 准备素材

准备好三种尺寸、格式为png的图片

Passdock 最大的特点是可以自己设计卡片,不同的模板需要的素材不一样,我做的是简单的那种,所以只准备三张图片素材。尺寸分别为58×58、570×72、620×250,格式均为png,其他的格式不支持上传。注意看第二种尺寸的图片,除了蓝色符号之外的背景,不是白色,而是透明的,这就是为什么要用png格式,就是因为它有Alpha通道,可以把没有用的部分设置成透明。

下面是两种大尺寸图片在卡片上的位置(不同的模板是不一样的)。

图片素材在卡片上的位置

3. 制作模板

3.1 上传图片素材

选择 Store Card

选择 Store Card 模板  在页面右上角“NEW TEMPLATE FROM SCRATCH”这一组图标中的第四个。

点击 Create Store Card

在弹出的确认窗口中,点击 Create Store Card,进入 Store Card 设计页面。

Store Card 设计页面

上传图片素材  在页面左上角,有四个上传素材的按钮,我们只对前三个上传,第四个不用管,上传后如下图。模板中预设的那些英文还在,跟图片重叠了,先不用管,下面会讲。注意看 520×72 这张图片,如果背景色不是透明的话,会是什么样子?

上传素材之后的页面

3.2 设置卡片背景色

将背景色设置成白色

因为条码是黑色的,为了能够使条码准确识别,卡片的背景色设置成白色,将 Background Color 中的值改为“rgb(255,255,255)”即可。

如果你选择其他模板的话,整个背景你都可以自己设计,而不是单纯的颜色。

3.3 设置卡片信息

在卡片详细的信息设置中,Passdock 划分了多个部分,姑且把他们叫做模块吧,这样好理解,下面只讲用到的几个模块。

GENERAL TEMPLATE SETTING

这个模块唯一一个要填的就是 Name,不填无法创建模板,Name 后面有个“*”,表示必填。

HEADER SECTION

这个模块中的信息显示在卡片的右上角,见下图,看箭头指示。可以不填,把右上角这块空出来。也可以自己发挥,我填的分别是2016、VIPCARD。

HEADER SECTION 在卡片中的位置

PRIMARY SECTION

这个模块的信息就是跟刚才上传的那个尺寸最大的图片重合的部分,这个部分要不要填,取决于你自己。如果要填的话,要注意的是,上传的素材中要给这部分信息流出足够的空间,要填什么还是看自己需要,如下图。真维斯的LOGO放在了图片的右下角,那么 PRIMARY SECTION 这个模块的信息就会显示在图片的左上角,不会出现重合的现象。

PRIMARY SECTION 在卡片中的位置

我主张简洁,less is more,不会把卡片做的过于复杂,所以这部分信息空着,这样在制作图片素材的时,就可以把真维斯的LOGO放在图片的正中心,如下图。

简洁的卡片

SECONDARY SECTION

在图片的下方,大多数情况下会写持有人的身份信息,像我这样不想让收银员知道我大名的,就不会把名字写上。为了应对扫码失败这种事,我就把卡号写上了。

SECONDARY SECTION 在卡片中的位置

要注意的是,现在做的只是模板,你可以在这个模板上生成很多张卡片,所以在填信息的时候,要根据具体情况而定。如果制作自己用的卡片,这时候填写上有自己个性的内容当然可以,但如果以后要为朋友或者同事做一张同样的卡片式,你还得重新修改模板信息。

2D CODE SECTION

这是个很重要的环节,错了就要重新修改。之前一直说 Passdock 最大的特点是支持自己设计,如果说还有一个特点的话,那就是这部分了。

Passdock 提供了4种格式,包括3种二维码和1中条形码,如下图。需要哪种格式还要看你的实体卡上是哪种,比如星巴克的星享卡是“PDF417"这种,一般超市或者门店的会员卡是”128Code“这种。

Passdock 提供的4中编码

真维斯会员卡中的码是条形码,所以选择“128Code”这种格式。“Message”中的值生成的是条形码,“Alternative”的位置在条形码的下方,可以不填。

2D CODE SECTION 在卡片中的位置

BACK SECTION

就是卡片背面的信息,软肋,不填也罢。说他是软肋,因为不支持中文,填了也白搭。如果你的卡片是高大上的外文卡,可以填上。当然,也没必要非得按照卡片背面的信息来填,我随便填了一下。

切换至卡片背面的方法
卡片背面信息

至此,模板做完了,点击“Update Template”生成模板。

新生成的模板

新模板做好了,可以直接点击“New Passes”创建新的卡片,我们不在此处创建,而是点击上方的“Templates”回到模板页面。

4. 制作会员卡

刚才只是做了一个模板,想要生成自己的卡片还需要几步操作。如下图,刚生成的模板中有“JEANSWEST CARD”字样,那就是 GENERAL TEMPLATE SETTING 中的 Name,就是模板的名字。

新生成的模板

在新生成的模板中,点击下拉箭头,在下拉菜单中选择 New,开始创建新的卡片。

开始创建卡片

进入卡片设置页面,注意有三个模块是蓝色的,填写这三个就够了,其他的在前面创建模板的时候都已经设置了。

进入卡片设置页面

在 Message 中填入你的卡号,Alternote 中自己发挥,我填的是卡号,常见的条形码下面就是卡号。注意在 Message 中填入卡号时,右边卡片中的条形码不会有任何变化

至于 SECONDARY SECTION 和 BACK SECTION 这两个模块,自己发挥吧,我空着了。

填写卡片信息

点击“Create Pass”生成新的卡片,如下图,为防止泄露信息,所有账号信息都做了遮盖处理。

生成的新卡片

至此,这张真维斯的会员卡就做好了,接下来就是把这张会员卡添加至 Wallet。

5. 添加至 Wallet

Passdock 提供了四种添加至 Wallet 的方式扫描二维码、邮件、URL 和 直接下载。

如果你用的是 Mac,可以直接点击 “Add to Passbook” 按钮,将刚生成的卡片下载至电脑,然后直接双击打开,如下图。

下载的 Passbook 文件

在 Passbook 文件的右下角,点击“添加到 Wallet”,前提是你的 Mac 和 iPhone 是用同一个账号登录的,如下图。

添加至 Wallet 的真维斯会员卡

如果没有 Mac 电脑,或者 Mac 电脑与 iPhone 没有用同一账号登录,可以也可以将做好的 Passbook 文件下载(谁知道以后会不会误删),然后通过邮件、QQ、微信或者其他方式,将此 Passbook 文件传送至 iPhone,在 iPhone 中打开即可。

除了下载文件之外,还有三种方式:直接扫描网页中的二维码、在网页上添加邮箱地址、将网页提供的网址输入手机浏览器。

下面是我手机中存放的四张会员卡,每张都能正常使用,出门的时候,钱包中起码可以少带四张卡片。

手机中的四张会员卡

总结

今天讲了利用 Passdock 制作 Passbook 文件的方法,注意以下几点:

1. 只支持扫码卡片,磁条卡片不支持;

2. 设计素材要注意模板中要求的尺寸和格式(一般是png);

3. 要根据实体卡片选取二维码或者条形码的编码格式。

结束!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,732评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,496评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,264评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,807评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,806评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,675评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,029评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,683评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,704评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,666评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,773评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,413评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,016评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,204评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,083评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,503评论 2 343

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,019评论 4 62
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,451评论 25 707
  • 如果“喜欢”是座岛 那它定是孤岛 或花木繁盛 或寸草不生 那里除了你不会再有其他人
    哀慕熙荣阅读 182评论 0 1
  • 春天来了,然而我并没有带春天的衣服,这个月的零花钱也花的差不多了,只够生活。我就想让妈妈支援我一点,买个外套。 晚...
    丹阳world阅读 317评论 0 0
  • 记得前段时间在@英语口译控的微博上看到他对口译工作类型的总结,分为四类:焦虑且紧急的、焦虑但不紧急的、不焦虑但紧急...
    英语翻译Aria阅读 1,085评论 0 2