[爆卦]apple wallet會員卡製作是什麼?優點缺點精華區懶人包

為什麼這篇apple wallet會員卡製作鄉民發文收入到精華區:因為在apple wallet會員卡製作這個討論話題中,有許多相關的文章在討論,這篇最有參考價值!作者FANG0100 (那個誰)看板iPhone標題Re: [問題] 台灣有什麼能用的APP支援Wa...



昨天在這串的原文推文貼了我自製的Wallet,

今天睡醒發現大家好像對客製化Wallet滿有興趣的,

因為可能不太有時間寫教學文,簡單講一下我是怎麼做的。

-

其實有很多客製化Wallet的第三方服務,

基本上這些服務都是直接調用Apple Wallet的API

並且提供一個UI來讓使用者自訂票卡的各種屬性,

再通過網站生成的QR CODE來佈署到手機裡。


我是使用網頁版Passdock製作,他們提供的客製化選項很多,

而且可以增加地理資訊跟iBeacon資訊到票卡裡,

例如我把住家附近的全聯都加進地理資訊,當我GPS定位到這些地點的時候,

手機就會自動推送相對應的票卡給你使用。

網路上Passdock的教學文很多,大家可以去Google一下,

在設定條碼的部分只要參照實體卡片背面條碼底下的那一串數字來設定就好,
(那串數字就是條碼裡面包含的資訊 通常都只是卡號)

格式記得選實體卡條碼相應的格式,例如最常見的麵條形條碼就是CODE 128。

-

票卡設計的部分,

Passdock在製作票卡時都會提供上傳圖檔的地方,也都有尺寸標示,

我是搭配illustrator來製作我想要的圖檔。

票卡顏色就用滴管工具去吸各品牌的標準色來搭配XD

資料欄位就隨個人喜好打上去就好了(卡號 姓名什麼的)

-

最後講一個小技巧,Apple Wallet裡面的每張卡都有一個Certificate。

可以把Certificate想成是商家的簽署,來自同一個Certificate的卡片,

會全部堆疊在一起(因為系統看起來就是來自同一個商家),

就像Stocard做出來的那樣,你要先點進去那個卡堆中,

裡面的卡片才會橫向展開讓你左右滑動選取,而不是一張一張有秩序的站好。

所以說,如果我有五張卡片想讓他排排站好一目瞭然,

那我就需要五個Certificate,那Certificate要怎麼取得呢?

就是花100美金去買蘋果開發者帳號使用SDK去生成...

為了這幾張無關痛癢的卡片花100美金我想一般人都無法接受吧XD

重點來了,Passdock提供多達十組的Public Certificate,

這也是我會使用Passdock來製作的原因。


在用Passdock製作票卡的時候,按下網頁右上方的Advance

切換到進階模式,會有一欄是讓你設定Certificate,共有十組可以用。

所以最後出來的成果就會是每張卡片都有隔開不會堆疊。

大概就是這樣囉...


啊...不知不覺就寫了這麼多XD



P.S.不是每個商家都認數位形式的卡片,有些也是要帶實體卡,

有板友提到全聯只認實體卡,因為我最近都沒去消費,所以也沒拿給店員刷看看。

不過以往我去全聯買東西都只報電話而已...哈

補個圖

http://imgur.com/a/BYktW
http://imgur.com/a/ibmeK

--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 211.21.157.223
※ 文章網址: https://www.ptt.cc/bbs/iPhone/M.1490930934.A.3B4.html
wenyic: 推 03/31 11:32
EROS4: 推 03/31 11:34
weizhu: 推 03/31 11:34
jesi: 推Certificate說明 03/31 11:38
itsdelovely: 推 03/31 11:50
Abiou: 推 03/31 11:53
hopeless3802: 太強大了!!! 03/31 11:56
halay02222: 推 03/31 12:09
panjiongkai: 全聯會員卡是用感應式的所以只認實體卡 03/31 12:14
awpex127: 長姿勢 謝謝 03/31 12:21
BBryson: 全聯不是都報電話嗎? 03/31 12:22
ShuwnYu: 可是有的卡是Code 32,Code 128不能用吧? 03/31 12:27
ShuwnYu: 我記得passdock只能選擇code 128,不知道能不能用圖檔? 03/31 12:31
Code32 Code39 Code128 編碼方式都是一樣的,條碼機一般也支援多種格式掃描,
但我沒有實測過,不確定自行轉換格式後店家是否可以掃。

如果無法的話,把實體卡的條碼截下來,
放在票卡的Strips圖檔欄位也是一種辦法。
shan86206: 推認證說明 03/31 12:41
yang0918: 推 但還是好難製作 03/31 12:54
zixiangsun: 推!太用心了~ 03/31 12:57
chart: 我想問的是為什麼票卡左上角有些圖可以顯示很大有的很小?? 03/31 13:13
Hollowcorpse: 可以用圖檔,就是另外做Code39的圖當主圖去放就可以 03/31 13:28
bluecat5566: 全聯有些優惠跟扣現金要用實體卡 03/31 13:33
Aquari: 所以最多只有十張卡能立排,再多就只能用橫排囉? 03/31 13:34
在使用Passdock公用Certificate的前提之下,是的。
你若有蘋果開發者帳號,可以生成更多Certificate。
c918: c大應該是在說這個,因為我的左上角的圖也是很小 03/31 13:53
dctmax: 推! 03/31 13:56
c918: http://i.imgur.com/fYl3FKP.jpg 03/31 13:56
補充一下,票卡有很多種類,我是使用Store Card格式去製作,
Store Card這個種類的票卡左上方只有Logo這一種圖片欄位可以放圖,
最寬支援到570px,所以有大有小我猜應該就只是圖片尺寸的關係了~
davidywc: http://imgur.com/eYLoroD 感謝F大的啓發,終於做好我的 03/31 14:31
davidywc: 了! 雖然costco那張是做開心的XD(應該不能用 03/31 14:32
不錯不錯,很漂亮XD
wicors: 推一個,昨天也是發現passdock的advance可以自定好多玩意 03/31 14:36
wicors: 除了條碼以外的資訊可以自己惡搞很好玩XDDD 03/31 14:36
wicors: 我看了一下卡片的條碼基本上是用CODE128,不要亂改比較好 03/31 14:38
※ 編輯: FANG0100 (211.21.157.223), 03/31/2017 14:39:55
wicors: 另外我發現GPS雖然有十個可以用,但修改後在進去編輯 03/31 14:40
wicors: 第六個以後的GPS資訊回不見,不知道是不是網站的問題 03/31 14:41
dctmax: david大做的也很漂亮! 03/31 14:42
guessssss: 看來D大要分享教學文了... 03/31 15:34
ccyou: 推分享~但字卡顏色好難調@@ 03/31 15:37
Mowd: http://i.imgur.com/bTLawC7.jpg 感謝分享心得,原先卡關在 03/31 15:57
Mowd: 把卡片分開,原來要改憑證 03/31 15:57
Mrmad: 提供教學與配色 https://goo.gl/0NIGFc 03/31 16:28
hopeless3802: passdock的比較好,條碼在相對比較上方 03/31 16:32
hopeless3802: 但也比較難設計,英文苦手QQ 03/31 16:34
cwl717033: 做好是做好了,但要怎麼把卡片分開放呀 憑證要怎麼改 03/31 16:47
cwl717033: ?@@ 03/31 16:47
cwl717033: http://i.imgur.com/SrUqwnf.jpg 03/31 16:48
Abiou: 成功把卡放進去 03/31 16:55
Abiou: http://i.imgur.com/ffsGbaO.jpg 03/31 16:55
phoebe147: 我自己打卡號上去的都不成功耶@@ 03/31 17:47
dctmax: 跟大家分享一下 我用ColorHelper 這個app 幫忙看色碼 不過 03/31 18:19
dctmax: 這個app介面還蠻簡陋的就是了 03/31 18:19
cwl717033: 我也成功了!感謝教學與幫助! 03/31 18:29
cwl717033: http://i.imgur.com/Qu55JCB.jpg 03/31 18:30
dctmax: 不知道F大方不方便分享素材 有些自己找的感覺沒F大的好 03/31 19:02
cathysakura: 大潤發會員號碼太長...超過了...XDD 03/31 23:35
moto615: 改憑證一直出現錯誤,卡關QQ 04/01 05:04
wei82519: 想請問logo放上去的狀況 已經調過與logo背景相同顏色 可 04/01 09:48
wei82519: 是最上面會有漸層效果 不知道是否可以避免>< 04/01 09:48
Feases: 原po的設計跟推文中的卡片都用得很漂亮耶,還以為是店家 04/01 10:38
Feases: 推出的公版 04/01 10:38
wayne2099xu: 終於也做好自己的了http://imgur.com/XwiqFUv 04/01 21:19
asusfrank: 大家好厲害!請問屈臣式的logo 怎麼找,因為找到都有 04/01 23:38
asusfrank: 白底! 04/01 23:38
awpex127: 找png檔 或是自己用修圖軟體把白底透明化 04/03 17:49
Ibugi: 謝謝原po 我學會了 http://i.imgur.com/9ivuHA3.jpg 04/04 01:32
TERRYB: 請問做好後,掃QRcode一直出現"沒有此條碼可用之票卡" 04/06 20:43
TERRYB: 這要怎麼處理呢??手機是5S、iOS10.3.1 04/06 20:44
awpex127: http://i.imgur.com/uQIP7et.jpg 04/07 14:15
awpex127: 謝謝教學看這篇才知道有進階模式 04/07 14:15
andy790612: 想詢問一下,我是使用passdock製作,怎麼把會員條碼放 04/07 23:11
andy790612: 到下方?還是只能把會員卡條碼製作成圖檔放在strip? 04/07 23:11
awpex127: 有一個選項是條碼格式 如果是code-128可以填數字 passdo 04/08 18:46
awpex127: ck會生出條碼 04/08 18:46

你可能也想看看

搜尋相關網站