UI 設計

[wutingy]

專案 UI: https://www.sketch.com/s/4238b387-3057-4a39-9dca-65d936899c69 Wireframe: https://hopk8t.axshare.com/#id=iz4xi8&p=%E5%96%AE%E7%AF%87_-_%E9%98%BB%E6%93%8B&g=1

Global

header status buttons status icons 文字

文章解鎖

單篇經驗分享頁面 - locked 解鎖成功 notify - desktop 解鎖成功 notify - mobile

公司解鎖

薪資工時 locked 薪資工時 locked 點開 薪資工時 locked 點開 RWD

方案

方案頁面 方案頁面 - hover 方案頁面 - mobile

方案管理

目前方案 有付費 目前方案 沒付費 - 沒解鎖 目前方案 沒付費 - 有留言解鎖 方案紀錄

付費

付費 not-login 付費 填寫信用卡 付費 選擇信用卡 付費 error msg 付費 使用別張信用卡 付費 新增信用卡 付費 loading 3D 確認中 交易成功 交易失敗

付費 Wrapper note 付費 mobile - not login 付費 mobile 付費 mobile 2

[barry800414]

To be discussed

• [x] RWD
• [x] Hover / Active Status
• [x] wording: 立即分享
• [x] wording: 方案頁面

[wutingy]

UI 修改

• [x] Header 文字改成「分享經驗」
• [x] 方案頁面 stye 修改（加背景顏色、文案位置調整）
• [x] 新增兩個 mobile 示意
• [x] Global buttons, icons 這次用到的

[wutingy]

文字樣式對應 guideline: https://www.sketch.com/s/4238b387-3057-4a39-9dca-65d936899c69/a/g09lK3k#Inspect

[wutingy]

goodjob-icons.zip @peteranny

[wutingy]

Wrapper note Paying mobile - not login Paying mobile Paying mobile 2

信用卡 icon（download from tappay） https://js.tappaysdk.com/tpdirect/image/visa.svg https://js.tappaysdk.com/tpdirect/image/mastercard.svg https://js.tappaysdk.com/tpdirect/image/jcb.svg https://js.tappaysdk.com/tpdirect/image/amex.svg https://www.tappaysdk.com/_nuxt/img/union_pay.8271208.png

[wutingy]

@peteranny UI 我上面有再更新幾個喔

[wutingy]

@peteranny UI 我有再補上

公司解鎖

薪資工時 locked 薪資工時 locked 點開 薪資工時 locked 點開 RWD

麻煩解鎖的 RWD 再幫我調整一下！ ↓↓現在 dev 上面 ↓↓

↓↓↓ 預期的UI ↓↓↓