Upgrade to Pro — share decks privately, control downloads, hide ads and more …

XONE UX Guideline 4.0

odeeew
March 25, 2016

XONE UX Guideline 4.0

odeeew

March 25, 2016
Tweet

More Decks by odeeew

Other Decks in Design

Transcript

  1. XONE UX Guideline V4 PAGE 2 兩個頁籤以上的樣式  21 轉場動畫  40

    橫向捲動的卡片(修正卡片間距)  52 容易店+ 頻道頁  66 容易店+向上捲動後  67 搜尋容易店+頻道內容  68 頻道內容篩選  69 篩選項目展開的情形  70 篩選項目第二層展開的情形  71 返回鍵  76 底部廣告 Banner 區塊  79 內容網頁  80 來電  91 稍後再讀  98 瀏覽記錄  99 會員身分  100 卡片點擊後畫面  101 活動網頁  123 置頂卡片機制說明  146 置頂卡片機制表格  147 內容卡片圖片尚未載入時  149 贊助內容顯示規則  149 容易+頻道頁面操作機制  158 篩選器中的項目  159 篩選器的多選機制  159 內容網頁導覽列機制  165 內容圖片尚未載入時  167 瀏覽記錄文章類型 (增加 icon 說明)   193 關於 Xoney 細節頁的入口  194 本次文件更新項目
  2. XONE UX Guideline V4 PAGE 3 前言 Guideline 是什麼?不是什麼? Guideline

    是定義原則 , 而不是限制細則 。 Guideline 是系統規格書 , 不是操作說明書 。 對公司內部而言 , 藉由 Guideline 可以減少溝通成本 , 避免 走迂迴道路 , 讓我們能 on the same page 。 對使用者而言 , 照 Guideline 設計的 App 具有一致性 , 降低 學習曲線 , 不需記憶 , 而是辨識 。 所以在這份 Guideline 裡 , 不會把所有的畫面列出來 , 而是 分項陳述會影響一致性的原則 。 也不會過分描述細節 , 不致於沒有彈性 。 將來要有新的功能 , 產生新的介面 , 甚至改換配色或圖形的 風格 , 都是 OK 的 , 只要在 Guideline 的架構下發展 , 一旦發 現現有的架構產生限制 , 隨時修改都是沒問題的 。 雖然目前這份 Guideline 才剛剛誕生 , 或許還有很多不夠完 善的地方 , 但是希望藉著這份 Guideline , 能增加大家工作 的效率 , 提昇使用者的滿意度 , 我們一起加油 ! 內容介紹 本手冊主要將內容分成圖形介面部分與操作流程部分 。 第一部分圖形介面主要描述 XONE 的外層設計原則 , 同時也 包含動畫效果的部份 ; 第二部分主要描述 XONE 內部運作的 邏輯與操作流程 。 每個部分的前篇會先講解可以通用的原則 , 後面的章節則會 依照不同的功能分章節 , 並詳述每個頁面的細節 。
  3. XONE UX Guideline V4 PAGE 4 目錄 本次文件更新項目  2 圖形介面準則

    基本準則 文件標示說明  10 圖檔命名原則  11 介面元素層級  12 頁面名稱一覽  14 色彩   16 字型  17 回饋樣式  18 無法操作樣式  19 上方導覽列樣式  20 頁籤  21 搜尋列樣式  22 下方功能列樣式  24 列表樣式  25 群組列表樣式  28 設定列表樣式  29 跳出視窗樣式  30 提示樣式  34 空狀態 (待討論)  36 圖片裁切方式  37 動畫效果 轉場動畫  40 登入註冊相關頁面 介紹頁  44 探索相關頁面 探索內容頁  48 內容卡片樣式  49 搜尋內容  54 條碼掃描器  55 條碼掃描結果  56 頻道相關頁面 我的頻道  60 編輯我的頻道  61 所有頻道  62 頻道頁  63 容易店+ 頻道頁  66 搜尋容易店+頻道內容  68 頻道內容篩選  69 內容相關頁面 內容頁  72 內容網頁  78 電話相關頁面 通話記錄  82 通訊錄  85 撥號盤  87 來電  89 通話中  90 結束通話  93 個人頁面 稍後再讀  96 瀏覽記錄  97 會員身分  98 設定頁面 設定  102 個人資料設定  103 Xr 值記錄  104
  4. XONE UX Guideline V4 PAGE 5 通話分鐘數記錄  105 通知設定  106

    修改暱稱  107 編輯大頭照  108 活動相關頁面 活動首頁  112 活動分類  113 單一活動類型頁  114 活動預覽頁  115 主辦單位詳細資訊頁  117 主辦單位的活動頁  119 禮物箱  120 活動網頁  121 活動日曆  122 其他頁面 通知  126 更多  127 邀請  128 操作流程準則 介面操作通則 操作回饋  134 錯誤狀況  135 空狀態 (待討論)  136 提示種類與對應之操作  137 URL Schme 參考表格  138 探索相關頁面流程 總流程 / 探索頁面流程圖  142 搜尋頁面操作機制  148 條碼掃描頁面操作機制  149 頻道相關頁面流程 頻道頁面流程圖  152 我的頻道頁面操作機制  153 所有頻道頁面操作機制  154 頻道頁面操作機制  155 容易+頻道頁面操作機制  156 內容相關頁面流程 總流程 / 內容頁面流程圖  160 內容頁面操作機制  161 通話相關頁面流程 通話頁面流程圖  168 通話記錄頁面操作機制  169 通訊錄頁面操作機制  170 撥號頁面操作機制  172 通話中頁面操作機制  177 活動相關頁面流程 活動日曆機制  182 設定頁面流程 設定頁面流程圖  186 設定頁面操作機制  187 其他頁面流程 總流程 / 內容頁面流程圖  190 個人頁面操作機制  191 會員身分頁面操作機制  192 用戶頁面操作機制 (Pending)  194 更多操作機制  195 通知操作機制  196
  5. XONE UX Guideline V4 PAGE 10 文件標示說明 單位 文件內的標示不會標示單位 。

    根據不同的開發環境可以套用 不同的單位 : iOS 的單位為 pt Android 的單位為 dp 截圖尺寸說明 文件中的截圖尺寸皆為 320 x 548 px (高度為568px扣除狀 態列20px , 但如有包含狀態列的截圖會額外附註說明) 。 此尺寸為 iOS 中的 1x ; Android中的mdpi 。 548 (扣除狀態列 20px) 320
  6. XONE UX Guideline V4 PAGE 11 圖檔命名原則 目的 檔名規則化的目的 ,

    是讓所有圖檔在同一個資料夾 (還是會 分解析度) 中按照檔名排序時 , 能根據前綴 (prefix) 來讓相 關的檔案排列在一起 , 可以加快套圖的速度 。 圖檔種類表 附加狀態表 注意事項 檔名命名規則須注意以下幾點 , 否則會無法編譯 : 1.小寫a~z 2.數字0~9 3.不能有空白 (使用底線_代替空白) 4.不能用橫線 「-」 v4_btn_dialpad_call_normal.png 圖檔種類代稱 用途 ic 代表圖示 btn 代表按鈕 bg 代表背景 lab 代表標籤 附加狀態 用途 normal 一般 highlight 點擊 selected 選取 disabled 無效 圖檔種類 (參考下表) 頁面名稱代稱 (參考表格) 主要名稱 附加狀態 (參考下表) 附檔名 版本數
  7. XONE UX Guideline V4 PAGE 12 介面元素層級 在探索頁中 , 內容

    「卡 片」 呈現的型態 。 在設計 上會用被景色跟間距營 造一則一則卡片的感覺 底色永遠都是 C5 導覽列會置於最頂部 卡片跟卡片的間距會露 出底色 C5 , 這也是為 什麼間隔線會是 C5 的 原因 。 一般原則 介面中的元素會有前後層的差別 。 所有介面的最底部都是 C5 , 而導覽列的層級永遠會置於所有介面之上 。 何謂元素層級? 為了讓使用者能自然地理解介面中資訊呈現的邏輯與方式 , 介面元素會有 「層次」 的概念 。 這種層次的概念會影響到介面 的操作方式 、 動畫跟外觀 , 是這一整套設計的核心概念 。 了解核心的概念後 , 在設計介面時就能經由這一套通用的設 計原則 , 舉一反三的套用不同的樣式 。
  8. XONE UX Guideline V4 PAGE 13 一般列表跟群組列表的差別在於一個是用 「卡片」 的方式呈現而另一個不是 。

    這也是為什麼兩個列表的底色會有所差異 。 一般列表不是卡片 , 感 覺上會像是 「黏」 底部的 感覺 , 所以底色應該要 使用 C5 卡片 介面中會運用卡片的概念區隔不同類型的資訊 。 舉例來講 , 群組列表跟探索頁中的內容卡片就是以卡片的形式呈現 , 而 卡片的底色都會是 C6 , 然後置於導覽列之下 。 間距是露出來的底色 , 不是線條 以卡片為基礎的設計下 , 在介面中用來區隔資訊的灰色間隔 線 , 在設計的時候應該要想成是 「因為卡片跟卡片之間的間 距而露出的底色」 , 而不是一條 15px 粗的間隔線 。
  9. XONE UX Guideline V4 PAGE 14 頁面名稱一覽 頁面種類 / 代稱

    頁面名稱 代稱 全域 / global -- global 介紹頁 / intro 介紹頁1 intro1 介紹頁2 intro2 介紹頁3 intro3 啟動頁 / landingpage 手機號碼輸入頁 number 簡訊驗證頁 sms 個人資料輸入頁 personal 暱稱驗證頁 usercheck 首頁 / home 首頁 home 編輯區塊 editblock 新增區塊 addblock 電話相關頁面 / voip 撥號頁面 dial 儲值 topup 線上儲值 payoline 電話卡儲值 paycard 費率表 rate 通話中頁面 calling 來電頁面 receiving 即時通訊相關頁面 / im 聊天室列表 chatting 頁面名稱 以次頁面名稱為主 , 有跨次頁面情形使用的 , 可以用主頁面 作 prefix , 有跨主頁面情形使用的 , 應用 global 作 prefix 。
  10. XONE UX Guideline V4 PAGE 15 聊天室頁面 chatroom 聯絡人相關頁面 /

    contact 聯絡人列表 contact 新增好友 invite 內容頁面 / content 單元頁 cate 頻道頁 channel 內容頁 content 分享頁面 share 我的收藏 bookmark 瀏覽紀錄 conhistory 稍後再讀 readlater 設定頁面 / setting 設定頁 setting 個人資料 profile 封鎖名單 blocklist 隱私設定 privacy 活動頁 / event 活動首頁 event 活動頁 event_content 活動網頁 event_web 活動日曆 calendar 通知中心 / notification 通知中心 notification
  11. XONE UX Guideline V4 PAGE 16 綜覽 介面內所有使用的色彩請參考右表之 HEX 色碼

    。 C1為主題色 , 可更日後品牌客製化使用 ; C2~C8 為基本色 , 灰色調為主 ; C9~C10 運用於通話 / 掛電話之按鈕為主 。 透明度 介面內也會使用不同的透明度來加強或減弱該顏色在介面 內的角色 。 右表為 Android 內建透明度代碼轉換對照表 。 色彩 代碼 HEX色碼 參考色 C1 #17AAC4 C2 #3F3F3F C3 #868686 C4 #BFBFBF C5 #F2F2F2 C6 #FFFFFF C7 #000000 C8 #E5E5E5 C9 #82D06F C10 #DF3F2D Opacity 代碼 1 FF 0.9 E6 0.8 CC 0.7 B3 0.6 99 0.5 80 0.4 66 0.3 4D 0.2 33 0.1 1A
  12. XONE UX Guideline V4 PAGE 17 綜覽 介面之中文為系統預設字體 。 標點符號皆為全形

    。 英文之預設字體為 Muli Regular 。 iOS 之單位為 pt ; Android之單位為 dp 。 字級大小以及特殊樣是如右表之整理 , 以下為進一步說明 第四版介面 第四版(XONE v4)之字型大小與第三版有所差異 , 為避免新 的字型樣式套用到舊的介面 , 請於開發時將此份文件內所提 到的字型代碼(S1~S4)皆以前綴 「v4」 與前一版本之字型代碼 做出區隔 , 例如 : S1 => v4_S1 。 中英文字距 當中文與英文同時出現於同一個句子內時 , 英文與中文間需 空出半格 。 標點符號 中文句子中如出現的標點符號皆為全型 。 中文中文 English 中文 123 Numbers 數字 字型 代碼 字級 S1 36 S2 25 S3 18 S4 15 S5 12 半型空格 半型空格
  13. XONE UX Guideline V4 PAGE 18 元件回饋的基本樣式 回饋的基本樣式通常會變化元件感應區內的色彩 , 覆蓋一層

    透明度20%的C7色塊 。 此樣式會常常應用至圖示類型的元 件 , 特別像是介面上方導覽列的部份 。 至於按鈕的部份則是會提供回饋需替換的圖片 , 檔名後方會 以 「highlight」 註明其狀態 。 v4_btn_dial_decline_normal v4_btn_dial_decline_highlight 回饋樣式 感應區 感應區 感應區 C7 / Opacity 0.2
  14. XONE UX Guideline V4 PAGE 19 元件無法操作的基本樣式 當介面中元件無法操作時 , 其元件的整體透明度需調整成原

    本的20% 。 已經是圖片的元件像是按鈕 , 則會提供對應狀態的圖片 。 v4_btn_dial_decline_normal v4_btn_dial_decline_disabled 無法操作樣式
  15. XONE UX Guideline V4 PAGE 20 上方導覽列樣式 導覽列樣式 上方導覽列的固定高度為50 ,

    背景為透 C6 。 上方導覽列的位置會固定於介面上方 , 覆蓋於其他介面的上 方 。 50 文字在範圍 內上下置中 對齊 標題 : S3/C2 靠左上下置中對齊 文字最長不超 過此線 文字最長不超 過此線 v4_btn_global_prev 感應區 高 50 寬 57 感應區 高 50 寬 57 12 12 12 12 10 35 50 文字在範圍 內上下置中 對齊 標題 : S3/C2 靠左上下置中對齊 文字最長不超 過此線 感應區 高 50 寬 57 12 12 50 文字在範圍 內上下置中 對齊 v4_btn_global_ hide_normal v4_btn_global_ hide_normal 標題 : S1/C2 靠左上下置中對齊
  16. XONE UX Guideline V4 PAGE 21 感應區 高 50 寬

    57 頁籤 頁籤樣式 頁籤中的數量是平均於中間的範圍中如下圖所示 。 兩個頁籤以上的樣式 如果頁籤數量超過兩個 , 頁籤會往左靠齊 。 超出可視範圍的頁籤會被覆蓋於右方的漸層下方 。 12 12 12 10 1/2 100% 1/2 文字左右 padding10 文字左右 padding10 文字左右 padding10 45 45 v4_btn_global_ hide_normal 50 50 文字在範圍 內上下置中 對齊 文字在範圍 內上下置中 對齊 感應區 感應區 選取中 : S4/C1 左右置中對齊 底線高度為2/C1 選取中 : S4/C1 左右置中對齊 底線高度為2/C1 待選取 : S4/C2 左右置中對齊 待選取 : S4/C2 左右置中對齊 v4_bg_global_tab_ gradian
  17. XONE UX Guideline V4 PAGE 22 搜尋列樣式 四種搜尋列狀態 列表上的搜尋列會出現四種狀態 :

    一般狀態 、 鎖定狀態 、 輸入 文字後狀態 、 無法操作狀態 。 無法操作狀態如同按鈕的無效狀態一樣 , 整個搜尋列透明度降 低至原本的20% 。 詳細的操作方式可參考通訊錄原型之搜尋 欄位 。 45 45 45 5 12 63 63 12 5 5 5 5 5 S4/C2 上下左右置中對齊 S4/C4 靠左對齊 S4/C2 靠左對齊 游標線 C3/寬1/高20 上下置中 左右padding 2 S4/C2 左右置中對齊 v4_ic_global_ search_clear 輸入框 C6 底色 C5 opacity 0.9 v4_ic_global_ search 感應區 高 50 寬 100% 5 體驗原型 (iPhone 5 規格) global_search/ content_ channel_title_my_channel global_search/ content_ channel_title_my_channel global_cancel
  18. XONE UX Guideline V4 PAGE 23 搜尋結果 搜尋結果的版型套用列表群組 , 以下為一般情況與空狀態

    。 搜尋結果符合的文字會highlight起來 。 70 70 45 10 S4/C4 靠右對齊 S4/C4 靠右對齊 文字最長不超過 此線 群組標題 S4/C2 靠左對齊 上下置中 global_ search_result N/global_result global_search_ not_found S4/C4 靠左對齊 上下置中 20 20 12 5 5
  19. XONE UX Guideline V4 PAGE 24 下方功能列樣式 下方功能列樣式 下方導覽列的固定高度為50 ,

    背景為C6 。 下方導覽列的位置會固定於介面下方 , 覆蓋於其他介面的上 方 。 導覽列中的圖示數量最多可放置5個 , 位置會依照螢幕寬 度比例配置 。 50 5 5 50 10 10 螢幕100%寬 螢幕100%寬 1/5 1/5 1/5 1/5 1/5 1/5 1/5 1/5 1/5 1/5 1/2寬 1/2寬 1/2寬 1/2寬 未選取狀態 : 字級大小 11/C3靠 上方圖片對齊/ 左右置中對齊 上下左右置中 v4_ic_nav_dot 靠右上對齊 已選取狀態 : 字級大小 11/C1靠上 方圖片對齊/ 左右置中對齊 導覽列底色 C6 底線於高70內 C8/1px 圖示靠上左右 置中對齊 感應區 高 50
  20. XONE UX Guideline V4 PAGE 25 列表樣式 基本列表樣式 介面中會廣泛的運用列表呈現資料 ,

    依出現的介面種類不同 可再區分為單行與雙行 。 基本的列表高度為70 , 列表中的資訊會於高度中上下置中 。 標題與副標題的行數皆僅限於一行 , 長度依據螢幕寬度而 定 , 最常不超過右側向內20 。 如有例外情況會於各個介面中詳細說明 。 70 70 6 文字在範圍 內上下置中 對齊 文字在範圍 內上下置中 對齊 20 20 20 10 10 50 50 標題 : S3/C2 靠左靠下對齊 標題 : S3/C2 靠左對齊 副題 : S4/C3 靠左靠上對齊 文字最長不超 過此線 v4_ic_global_avatar 圖示尺寸 : 50x50 感應區 高 70寬100%
  21. XONE UX Guideline V4 PAGE 26 頻道列表樣式 用來顯示頻道的列表樣式 , 前面頻道徽章的部分大小與基本

    列表樣式有所調整 。 70 60 10 5 5 20 10 60 標題 : S3/C2 靠左對齊 文字最長不超 過此線 ic_content_providerbadge_XXX 圖示尺寸 : 60x60 感應區 高 70寬100%
  22. XONE UX Guideline V4 PAGE 27 編輯列表 某些列表可提供使用者編輯 。 可編輯的項目視介面需求而定

    。 進入編輯模式時 原本列表的圖示與標題會往右側推移 。 標題內的文字如過長則比照列表標題過長時的狀況處理 。 70 70 70 70 60 60 60 23 23 18 23 10 10 10 10 10 10 12 12 10 10 10 12 12 18 18 18 60 60 60 標題 : S3/C2 靠左對齊 文字最長不超 過此線 v4_ic_global_ star_slide v4_ic_global_ delete_slide ic_content_providerbadge_XXX 圖示尺寸 : 60x60 降低至原本透明度的20%
  23. XONE UX Guideline V4 PAGE 28 列表群組 有時候列表內的物件會需要與不同類別的物件分隔 , 此時列

    表物件就需要以群組的形式排版 。 群組內的列表物件數量不一 , 視介面需求而定 。 「更多」 的按鈕會視介面需求出現或隱藏 。 可收合 、 標題捲動時置頂 大部分的群組列表 (基本上是指除了在所有頻道的群組列 表)都可以收合以及捲動時標題置頂 。 詳細操作請參考 Xr 值記錄的原型 。 群組列表樣式 70 75 45 15 20 15 70 70 10 v4_btn_channel_more S4/C2 靠右對齊 文字最長不超過 此線 群組標題 S4/C2 靠左對齊 第一個群組跟上方 margin = 15 跟下一個群組 margin = 15 20 12 10 10 5 5
  24. XONE UX Guideline V4 PAGE 29 設定列表樣式 20 20 20

    20 20 50 50 v4_btn_channel_more 靠右對齊 v4_btn_switch_on_ normal 靠右對齊 S3/C2 靠左對齊 上下置中 分隔線 1px/C5 S4/C3 靠左對齊 上下置中 背景 C5 S4/C3 靠右對齊 上下置中 已選取 S3/C1 靠右對齊 上下置中 20 20 12 S3/C2 靠左對齊 上下置中 v4_ic_global_done 靠右對齊 v4_ic_global_ search_clear 靠右對齊
  25. XONE UX Guideline V4 PAGE 30 跳出視窗樣式 視窗通用結構 一般介面中的跳出視窗會包含三個部分 :

    標題 、 內容 、 按鈕 。 這三個部分會根據不同的需求加入或移除 , 如有不同的需求 會於以下各個頁面的章節中再細部的講解 。 此章節將會列出 5種最常見的視窗 , 相信大部分的情況都能在此章節中找到 應用的方式 。 視窗於畫面中的位置 整個視窗會於畫面中上下左右置中對齊 。 跳出視窗的寬度固定為300 , 高度視內容物的高度而定 。 左右置中 上下置中 40
  26. XONE UX Guideline V4 PAGE 31 樣式1 - 標題+內容+2個按鈕 此樣式可能會是最常見的樣式

    。 一般而言底部的按鈕其中會有一個為強調按鈕 。 當按鈕數量 為2時 , 強調按鈕的位置預設為右側 。 查看跳出視窗畫面中的位置 。 300 150 25 50 25 25 150 40 40 標題 : S2 / C2 / 置中對齊 視窗底色 : C5 後方底色 : C7 Opacity 0.7 內容 : S4 / C4 / 置中對齊 強調按鈕 : S3 / C6 / 置中對齊 背景 C1 次要按鈕 : S3 / C2 / 置中對齊 背景 C6 圓角 : 10px
  27. XONE UX Guideline V4 PAGE 32 20 5 5 15

    15 15 5 setting_profile_nickname 描述 S5/C3 靠左對齊 底色 C5 S3/C2 靠左對齊 背景 : C8 文字 : S4/C3 置中對齊 v4_ic_global_ search_clear 樣式2 - 輸入欄+內容+2個按鈕 需要輸入值時會使用此樣式 。 底部描述的部份可選擇性的移除 。 查看跳出視窗畫面中的位置 。 300 圓角 : 10px 強調按鈕 : S3 / C6 / 置中對齊 背景 C1 次要按鈕 : S3 / C2 / 置中對齊 背景 C6 50 15 20
  28. XONE UX Guideline V4 PAGE 33 樣式3 -3個按鈕 當按鈕超過兩個 ,

    會變成上下並排的方式 。 查看跳出視窗畫面中的位置 。 300 50 50 50 強調按鈕 : S3 / C6 / 置中對齊 背景 C1 次要按鈕 : S3 / C2 / 置中對齊 背景 C6 圓角 : 7px 分隔線 : C8/1px
  29. XONE UX Guideline V4 PAGE 34 普通提示 : 背景 C2

    Opacity 0.9 / 文字 C6 S5 最多一行 可操作 不可操作 重要提示 : 背景 C10 Opacity 0.9 / 文字 C6 S5 最多一行 v4_btn_global_ toast_more v4_ic_global_toast_ close 提示樣式 提示通用結構 一般介面中的提示會包含三個部分 : 文字 、 表示可操作的箭 頭按鈕 、 關閉按鈕 。 可操作的箭頭按鈕只有當該則提示可被點擊時才會出現 。 提示於介面中的位置 提示的位置主要都是靠下方對齊 , 並與底線有 10 的間距 。 需特別注意出現提示的頁面如果有底部功能列或是按鈕時 , 與底部的間距則會變成 60 , 以避免妨礙操作 。 300 10 45 50 50 45 45 10 10 10 3 10 體驗原型 (iPhone 5 規格)
  30. XONE UX Guideline V4 PAGE 35 新的提示出 現在下方 多筆提示 當有新提示在前一筆提示尚未消失前進入介面

    , 前一則提示 往上推移 。 換句話說 , 最新的提示永遠會出現於最底部 。 一個畫面中出現的提示筆數不限 , 舊提示會一直向上堆疊 。 請參照線上原型 。 提示文字 請參考提示種類與對應之操作一表 。 提示停留時間 可操作之提示出現後於介面中停留的時間為 4 秒 ; 不可操 作之提示出現後於介面中停留的時間為 1 秒 。 請參照線上原型 。 提示進入介面 提示會從左側進入介面 。 進入動畫時間總長 0.2 秒 。 請參照線上原型 。 關閉提示 提示可以透過按下關閉按鈕或是等待該提示到達其停留時 間上限 。 以上兩個事件皆是讓提示關閉的方式 , 但是關閉時的淡出動 畫時間長度會有所不同 : 前者動畫長度為 0.2 秒 ; 後者動畫 長度為 0.5 秒 。 請參照線上原型 。 300 10 45 45 10 5
  31. XONE UX Guideline V4 PAGE 36 空狀態 (待討論) 圖片與文字替換 介面中會出現空狀態的畫面以及該畫面對應之圖片與文字

    請詳閱空狀態畫面一覽表 。 說明 當列表內沒有物件時 , 會引導使用者做其他操作 。 此畫面共有三個部分 : 圖片 、 標題 、 短敘述 、 行為按鈕 。 範圍內上下左右 置中對齊 沒有短敘述或按 鈕時一樣照圖片 與文字的高度保 持上下置中 文字最長不超過 此線 v4_bg_global_empty_ action_normal 按鈕文字 S4/C6 左右置中對齊 S4/C4 置中對齊 S4/C2 置中對齊 10 15 5
  32. XONE UX Guideline V4 PAGE 37 圖片裁切方式 基本原則 寬 ≤

    高時 , 寬 = 圖片顯示範圍的 100% , 原圖置上緣對齊 ; 寬 > 高時 , 高 = 圖片顯示範圍的 100% , 原圖左右置中對齊 。 介面中所有圖片都可以套用此原則 。 圖片顯 示範 圍高 100% 圖片顯示範圍寬 100% 圖片顯示範圍寬 100% 原圖 : 寬 > 高 於圖片顯示範圍內 左右置中 於圖片顯示範圍內 靠上對齊 於圖片顯示範圍內 靠上對齊 原圖 : 寬 = 高 原圖 : 寬 < 高
  33. XONE UX Guideline V4 PAGE 40 轉場動畫 說明 當頁面跟頁面做切換時 ,

    為顯示頁面之間的對應關係 , 會套 用動畫轉場的效果來暗示對應關係 。 返回圖示 如果是第二層的頁面 , 畫面左上角的返回鍵會暗示畫面的轉 場效果 。 向左的返回鍵 代表這個畫面是 透過左右推移進 入的第二層畫面 向下的返回鍵 代表這個畫面是 透過上下疊入進 入的第二層畫面
  34. XONE UX Guideline V4 PAGE 41 左右推移動畫效果 左右推移的效果會使用於具有上下層關係的畫面上 , 像是設

    定相關的頁面通常都是具有上下層關係 , 或是像內容頁一般 來講都會是第二層的頁面 。 推移效果可直接套用 App 內建數值即可 。 上下疊入動畫效果 需要使用上下疊入效果的畫面是要暗示此畫面是 「暫時性」 的 , 或是 「過渡性」 的畫面 , 像是頻道選單或是活動選單等 等 。 疊入效果可直接套用 App 內建數值即可 。 1st 1st 2nd 3rd 2nd 3rd
  35. XONE UX Guideline V4 PAGE 44 v4_ic_landing_ pager_highlight v4_ic_landing_ pager_normal

    介紹頁 頁面說明 新用戶進入 App 的預設第一個畫面 。 1秒內沒碰螢幕自動滑動至下一頁 。 碰觸螢幕並滑動後不再 自動滑動 。 30 10 10
  36. XONE UX Guideline V4 PAGE 48 v4_btn_explore_ search_normal v4_ic_global_notifi- cation

    v4_btn_glob- al_cat_normal v4_ic_nav_ profile v4_ic_nav_ call v4_ic_nav_ notification v4_ic_nav_ more 探索內容頁 頁面說明 進入 App 的預設第一個畫面 , 用來引導用戶發掘新的內容 。 20 20 參考樣式 頁籤 、 下導覽列 、 內容卡片 。 global_mine content_home_content_ topbar_title global_event voip_action- bar_title content_notifi- cation_center_ title global_more 體驗原型 (iPhone 5 規格)
  37. XONE UX Guideline V4 PAGE 49 內容提供者區塊 標題 稍後再讀 內容細節

    內容預覽 行為按鈕 沒有圖片 : 稍後再讀 、 標題 、 內容細節 、 內容預覽 、 行為按鈕網上移 沒有稍後再讀 : 標題與內容細節向左移 , 寬度加寬 沒有內容預覽 : 行為按鈕網上移 圖片 內容卡片樣式 通用結構 一般內容卡片中會涵蓋 : 內容提供者 、 圖片 、 稍後再讀 、 標題 、 內容細節 、 內容大綱 、 行 為按鈕 。 這七個部分可以根據不同的需求加入或移除 , 但排序固定 。 區塊的排序依序靠左靠上對齊 。 卡片間距 卡片與卡片間會有15的間距 。 第一張卡片會與導覽列間距15 。
  38. XONE UX Guideline V4 PAGE 50 規格限制 內容提供者 : 最多一行

    圖片 : 最大高度為200 標題 : 最多3行 標籤 : 僅顯示主分類 內容預覽 : 最多3行 內容預覽 C2/S5 靠左上對齊 標題 C2/S3 靠左上對齊 v4_ic_glob- al_tags_tiny v4_ic_glob- al_bookmark v4_ic_glob- al_liked_tiny 標籤 C4/S5 靠左對齊 上下置中 行為按鈕 C1/S5 上下左右置中 沒有稍後再讀時 標題&內容細節 對齊此線 分隔線 : 1px/C5 C1/S5 靠右對齊 內容提供者 C2/S4 靠左對齊 content_home_ channel_follow 20 12 20 30 45 50 10 10 10 10
  39. XONE UX Guideline V4 PAGE 51 沒有內容提供商區塊時的版面 在內容提供商頁面中的內容卡片不會顯示該內容提供商的 區塊 。

    當沒有內容提供商區塊時 , 會留下高20的區域 。 編輯精選 當卡片為編輯精選的內容時 , 會於標題下方出現 「編輯精選」 的標籤 。 其樣式與同一列中的 「喜歡」 、 「標籤」 一樣 , 唯字體顏 色 , 前方圖示不同 。 「編輯精選」 區塊置於 「喜歡」 與 「標籤」 區 塊之前 。 禮物專屬文章 如文章為禮物專屬文章 , 則會於該文章的內容卡片左上角出現 標記 。 v4_ic_explore_ card_gift 20 explore_editor_choice v4_ic_glob- al_liked_tiny S5/#F5A623/ 靠左對齊 12
  40. XONE UX Guideline V4 PAGE 52 橫向捲動的卡片(修正卡片間距) 在探索的瀑布流中會安插可橫向捲動的卡片 。 卡片數量為

    3 個以上 , 可視需求增加 。 詳細操作方式請參考原型 。 應用情境 此類型的卡片亦可替換成導下載功能 、 推薦頻道或推薦內 容 。 關閉按鈕 關閉按鈕按下後會隱藏整個可捲動的卡片區塊 。 C3/S4 靠左上下置中 最多一行 與上方卡片間距15 C2/S4 靠左上下置中 最多一行 v4_ic_glob- al_removelist 第一張卡片與 左側間距15 最後一張卡 片與右側間 距15 C4/S5 靠左上對齊 最多三行 v4_btn_content_ download_normal v4_btn_content_ bookmark_normal content_event_btn_ summary_app menu_item_main_ pinned_content v4_btn_content_ follow_normal 9 9 20 20 192 9 9 9 5 40 40 45 可左右滑 動的範圍 108 18 15 content_home_ channel_follow content_home_chan- nel_recommended 體驗原型 (iPhone 5 規格) 5 5
  41. XONE UX Guideline V4 PAGE 53 贊助內容卡片 請注意 , 中間影片之尺寸會比一般卡片來得大

    。 雖然乍看之 下與一般卡片很像 , 但還是有些許的差距 。 在製作時請留意 。 v4_ic_explore_ sponsor 靠左對齊 v4_ic_glob- al_removelist 靠右對齊 content_home_sponsor # F5A623/S4 靠左對齊 12 12 50 高度內物件 上下置中對齊 15 12 15 5
  42. XONE UX Guideline V4 PAGE 54 C1/S3 靠左上對齊 v4_ic_glob- al_qrcode

    搜尋內容 參考樣式 搜尋列樣式 、 頻道列表樣式 、 搜尋結果 20 20 45 10 20 15 45 content_home_ search global_cancel content_home_ search_hot content_home_ search_hot_channel 體驗原型 (iPhone 5 規格)
  43. XONE UX Guideline V4 PAGE 55 相機鏡頭畫面 C5 S4/C3 上下左右置中

    v4_bg_qrcode_ frame 上下左右置中 v4_ic_qrcode_ gallary v4_ic_qrcode_ flashlight v4_ic_glob- al_qrcode 上下置中 條碼掃描器 參考樣式 下方導覽列 。 qrcode_instruction qrcode_gallery qrcode_flashlight 80 12 50
  44. XONE UX Guideline V4 PAGE 56 簡敘述 : S4/C3/左右置中 最大寬不超過螢

    幕 70% 標題 : S2/C1/左右置中 最大寬不超過螢 幕 70% 100x100 置中對齊 按鈕背景C1 按鈕文字 C6/S3/左右置中 v4_ic_glob- al_qrcode 上下置中 條碼掃描結果 content_home_ channel_follow qrcode_result 50 12 5 50 範圍內上 下置中 20 20 結果種類 掃描結果會有各種不同的類型 , 但版型都是一樣的 。 不同的結果徽章跟文字都會替換更動 。 背景C6 S3/C2 靠左對齊
  45. XONE UX Guideline V4 PAGE 57 簡敘述 : S4/C3/左右置中 最大寬不超過螢

    幕 70% 沒有按鈕但還是 保留高度 標題 : S2/C1/左右置中 最大寬不超過螢 幕 70% 100x100 置中對齊 v4_ic_glob- al_qrcode 上下置中 qrcode_result 50 12 5 50 範圍內上 下置中 20 20 未知的類型 掃描結果可能會有未知的類型 。 此類型沒有行為按鈕 , 但還是需保留按鈕的高度 。 背景C6 S3/C2 靠左對齊
  46. XONE UX Guideline V4 PAGE 60 我的頻道 參考樣式 上導覽列 、

    頁籤 、 搜尋列樣式 、 頻道列表樣式 70 70 70 70 70 10 v4_btn_global_hide_ normal v4_ic_global_addnewlist 50 5 10 45 背景 C5 70 content_channel_ title_my_channel content_channel_ title_all_channel content_channel_ add_new_channel content_channel_ serach_all_channel 體驗原型 (iPhone 5 規格) 12 12 v4_ic_global_edit 10 10 10 10
  47. XONE UX Guideline V4 PAGE 61 編輯我的頻道 參考樣式 上導覽列 、

    頁籤 、 搜尋列樣式 、 頻道列表樣式 、 編輯列表樣式 70 70 70 70 70 v4_ic_global_delete 50 5 10 45 背景 C5 70 content_channel_edit_my_channel content_channel_serach_ my_channel 體驗原型 (iPhone 5 規格) 12 12 v4_ic_global_done 10 10 10 10
  48. XONE UX Guideline V4 PAGE 62 所有頻道 參考樣式 上導覽列 、

    頁籤 、 搜尋列樣式 、 頻道列表樣式 、 列表兩行時樣式 、 列表群組 70 75 45 15 15 70 70 10 v4_ic_global_add v4_btn_channel_more S4/C2 靠右對齊 S4/C2 靠左對齊 50 45 154 與高保持 比例 20 12 10 10 5 global_more content_channel_ti- tle_my_channel content_channel_ti- tle_all_channel content_channel_ serach_all_channel 置頂 Banner 圖片比例維持 320 : 154 。 此處圖片大小會與活動置頂共用 。 體驗原型 (iPhone 5 規格)
  49. XONE UX Guideline V4 PAGE 63 content_home_channel_ followed_count content_provid- er_info

    content_channel_ar- ticles_published 頻道頁 參考樣式 頁籤 、 內容卡片 、 沒有內容提供商區塊時 、 往上捲動後 80 80 50 20 v4_btn_global_ back_normal C4/S5 置中對齊 最多3行 C2/S5 置中對齊 最多1行 5 5 10 頻道頁 提供用戶瀏覽 、 關注 、 頻道 , 並顯示頻道資訊 。 頻道頁的內容 卡片不顯示內容提供者欄位 。 移除欄位後會於圖片上方保留 20高度 , 其他樣式與一般卡片一樣 。 體驗原型 (iPhone 5 規格) 10 10 15 15 20
  50. XONE UX Guideline V4 PAGE 64 參考樣式 頁籤 、 內容卡片

    50 50 20 20 v4_btn_global_ back_normal 向上捲動後 向上捲動後 , 內容提供者與頁籤會置頂 。 content_provid- er_info content_channel_ar- ticles_published 45 5 20 15 15 content_home_ channel_follow
  51. XONE UX Guideline V4 PAGE 65 參考樣式 頁籤 、 內容卡片

    、 群組列表 50 50 45 10 10 10 20 45 45 20 v4_btn_global_ back_normal C2/S4 靠左上對齊 內容提供商資訊 目前確認的區塊 : 關於 、 連絡電話 、 地址 、 網址 、 email 。 允許缺少部分區塊 , 沒有內容的區塊不顯示 。 都沒有內容時不顯示頁籤 , 但建議至少有 「關於」 區塊 。 content_provid- er_info content_channel_ar- ticles_published content_provid- er_about content_provider_ address content_provid- er_phone content_provider_ phone_call content_provider_ad- dress_openmap 45 5 15 15 15 20 20 content_home_ channel_follow
  52. XONE UX Guideline V4 PAGE 66 content_home_channel_ followed_count content_channel_ar- ticles_latest_coupons

    content_channel_ar- ticles_featured_stores content_channel_ar- ticles_vip_coupons 容易店+ 頻道頁 參考樣式 頁籤 、 內容卡片 、 往上捲動後 80 80 50 20 12 12 v4_btn_glob- al_prev v4_ic_global_ search v4_ic_global_fil- ter C4/S5 置中對齊 最多3行 C2/S5 置中對齊 最多1行 5 5 10 頻道頁 提供用戶瀏覽 、 關注 、 頻道 , 並顯示頻道資訊 。 此類頻道頁的 內容卡片會顯示內容提供者欄位 。 20 體驗原型 (iPhone 5 規格) 10 10 15 15
  53. XONE UX Guideline V4 PAGE 67 12 12 v4_btn_glob- al_prev

    v4_ic_global_ search v4_ic_global_fil- ter 參考樣式 頁籤 、 內容卡片 50 50 20 20 容易店+向上捲動後 向上捲動後 , 內容提供者與頁籤會置頂 。 45 5 15 15
  54. XONE UX Guideline V4 PAGE 68 C1/S3 靠左上對齊 v4_ic_glob- al_search

    搜尋容易店+頻道內容 參考樣式 搜尋列樣式 、 頻道列表樣式 、 搜尋結果 20 20 45 10 20 15 45 content_home_ search global_cancel content_home_ search_hot content_channel_ search_all_stores
  55. XONE UX Guideline V4 PAGE 69 S3/C2/靠左對齊 選取的選項 S3/C1/靠左對齊 未選取的選項

    S3/C2/靠左對齊 v4_ic_glob- al_check v4_ic_glob- al_expandlist v4_ic_glob- al_closelist content_channel_filter_title global_confirm 頻道內容篩選 頁面說明 被選取的項目會有不同的樣式 。 篩選項目的字串請參考以下表格 。 20 參考樣式 上導覽列 、 設定列表樣式 、 群組列表 背景 C2 Opacity 0.9 顯示地區 顯示優惠類別 content_channel_filter_all_areas content_channel_filter_all_coupon_types content_channel_filter_north content_channel_filter_eat content_channel_filter_central content_channel_filter_wear content_channel_filter_south content_channel_filter_live content_channel_filter_travel content_channel_filter_fun
  56. XONE UX Guideline V4 PAGE 74 內容頁 參考樣式 上導覽列 、

    下方功能列 視差滾動效果 內文主圖捲動時會有視差滾動之效果 , 請參考原型 。 主圖向上捲動的速度是主文區塊的0.5倍 ; 在文章最頂時放 大的倍率是下拉距離的0.002倍 。 1/3 1/3 1/3 100% v4_btn_global_prev S5/C4 靠左對齊 上下置中對齊 S5/C1靠左對齊 上下置中對齊 v4_ic_global_bookmark v4_ic_content_gift v4_ic_glob- al_like 置中對齊 iOS 版 : v4_ic_global_share_ios Android 版 : v4_ic_global_share_android S4/C2/靠右 v4_btn_chan- nel_more 50 25 5 12 5 50 content_published content_gift content_next 體驗原型 (iPhone 5 規格) 20 12 5 185 45
  57. XONE UX Guideline V4 PAGE 75 v4_btn_content_ like_normal S3/C2 靠左對齊

    行高25 底部間距25 S3/C1 靠左對齊 行高25 S3/C2 靠左對齊 底部間距20 S2/C2 靠左對齊 底部間距30 S2/C2 靠左對齊 25 20 30 25 12 12 25 5 5 標題上方圖片 當該篇文章沒有圖片時 , 下面的區塊會直接往上順移 。 185 20 20 5
  58. XONE UX Guideline V4 PAGE 76 content_read_more 感應區 感應區 content_tags

    「內容分類」 區塊 此區塊內放置文章的分類標籤 。 標籤與按鈕一樣有三個狀態 : normal/highlight/disabled 標籤間上下左右間距為12 。 底部區塊列表 底部區塊的樣式是以群組列表的樣式呈現 。 以下為各個出現區塊的樣式 。 返回鍵 當向下捲動時 , 左上方的返回鍵會切換為深色的版本 , 以方 便與底色區隔 。 切換時使用透明度漸淡效果 。 細部效果可參考原形 。 「原文出處」 區塊 原文出處樣式如右 。 完全比照群組列表的標題區塊 。 20 20 10 10 20 20 20 20 20 20 15 12 12 15 標籤 標籤 標籤 S4/C2 置中對齊 上下padding : 10 左右padding: 20 S4/C2 opacity 0.3 置中對齊 上下padding : 10 左右padding: 20 normal 狀態 邊線寬 : 1/C2 內填色: C6 標籤超過此線 則換行 highlight 狀態 邊線寬 : 1/C2 內填色: C4 disabled 狀態 邊線寬 : 1/C2/ opacity 0.3 內填色: C4 / opacity 0.3 v4_btn_global_prev_re- verse_normal
  59. XONE UX Guideline V4 PAGE 77 v4_btn_content_ follow_normal content_home_ channel_follow/

    content_home_ channel_followed content_provider 「內容提供」 區塊 內容提供商區塊放置簡短的敘述 。 敘述字數不超過 50 個字 。 此區塊樣式請參考列表群組 。 12 10 10 高度 彈性 20 15 45 5 15 12 10
  60. XONE UX Guideline V4 PAGE 79 底部廣告 Banner 區塊 此區塊會置於原文出處下方

    , 並與上下區塊間隔 15 。 15 15 原文出處區塊 廣告 banner
  61. XONE UX Guideline V4 PAGE 80 載入網頁時 最上方會出現進度條 : 高2/C1

    。 未載入時的背景色為C5 。 動畫可於原型中點擊 「原文出處」 後觀看 。 下方操作選項 操作動畫可於原型中點擊 「原文出處」 後觀看 。 內容網頁 v4_btn_global_ share_ios / v4_btn_ global_share_android S3/C2靠左對齊 最多一行 不超過此線 S4/C4靠左對齊 v4_btn_global _web_prev_disabled v4_ic_glob- al_like / v4_ic_glob- al_liked v4_btn_global _web_next_disabled v4_btn_global _refresh 50 v4_btn_global_prev v4_ic_glob- al_bookmark v4_ic_glob- al_like 12 5 12 體驗原型 (iPhone 5 規格) 10 10 10
  62. XONE UX Guideline V4 PAGE 84 通話記錄 參考樣式 列表樣式 、

    上導覽列 、 下導覽列 70 70 70 20 v4_btn_ global_dial- pad_normal v4_ic_voip_remain 50 背景 C5 global_today 70 voip_actionbar_title contact_title v4_ic_nav_ profile v4_ic_nav_ explore v4_ic_nav_ notification v4_ic_nav_ more global_mine global_explore content_notifi- cation_center_ title global_more 體驗原型 (iPhone 5 規格) global_yesterday v4_ic_dial_callin v4_ic_dial_callout v4_ic_dial_missed ic_global_xoneuser_online 15 x 15 靠右下對齊 ic_global_xoneuser_offline 15 x 15 靠右下對齊 v4_ic_dial_callin v4_ic_voip_prepay
  63. XONE UX Guideline V4 PAGE 85 參考樣式 上導覽列 call_log_empty 列表空畫面

    沒有任何通話記錄時的情況 。 20 50 S4/C4 置中對齊
  64. XONE UX Guideline V4 PAGE 86 通話記錄之細節呈現 聯絡人名稱下方會顯示該通電話之時間 , 版面呈現的方式如

    下 。 內容物上下置中對齊 實際日期 顯示文字 2014/05/05/13:20 今天 13:20 2014/05/05/13:19 今天 13:19 2014/05/04/13:19 昨天 13:19 2014/05/03/13:19 2014/05/04/13:19 1900/05/03/13:19 1900/05/03/13:19 上下置中對齊 判定是否為XONE 用戶的圖示 : 靠大頭貼右下對齊 S4/C3 S4/C1 S3/C2 6 7 10
  65. XONE UX Guideline V4 PAGE 87 通訊錄 參考樣式 列表樣式 、

    上導覽列 、 下導覽列 、 群組列表 、 搜尋 70 70 70 45 45 20 v4_ic_voip_remain 50 contact_list_group_title_fav contact_list_search contact_list_group_title_ contact 70 voip_actionbar_title contact_title v4_btn_ global_dial- pad_normal v4_ic_nav_ profile v4_ic_nav_ explore v4_ic_nav_ notification v4_ic_nav_ more 體驗原型 (iPhone 5 規格) v4_ic_voip_prepay
  66. XONE UX Guideline V4 PAGE 88 展開列表 列表樣式 、 群組列表

    45 70 70 70 5 6 6 5 45 30 間隔線 : 左右 padding 各 20/1px/C5/ 置中對齊 v4_ic_global_ delete 置中對齊 v4_contact_fav_ highlight 靠左對齊 S3/C2/靠左對齊 S4/C3/靠左對齊 v4_ic_global_edit 靠右對齊 體驗原型 (iPhone 5 規格) 30 20 20
  67. XONE UX Guideline V4 PAGE 89 打開撥號盤畫面 版面尺寸如下 。 上下置中

    v4_btn_global_ hide_normal 50 20 撥號盤高度 為畫面高度 67% v4_btn_dial_ num_0,1~9_normal 1/4上下置中 1/4上下置中 1/4上下置中 1/4上下置中 100% 1/3 左右置中 1/3 左右置中 1/3 左右置中 10 10 參考樣式 列表樣式 、 上導覽列 、 下導覽列 撥號盤 螢幕高度 5% 體驗原型 (iPhone 5 規格) S2 / C2 S2 / C3 v4_ic_global_ search_clear 背景 C5 10 撥號盤背景 C6 v4_btn_dial_ num_hashtag_ normal v4_ic_voip_pre- pay v4_btn_dial_ num_star_normal v4_ic_dial_ backspace v4_btn_dial_ decline_normal 數字鍵 感應區 感應區
  68. XONE UX Guideline V4 PAGE 90 號碼輸入框樣式 如輸入之號碼超過版面固定的寬度 , 則會維持上下置中並且

    照比例縮放大小 。 搜尋號碼結果 搜尋符合的號碼會如右圖的樣式變化 , 方便使用者對照結 果 。 70 上下置中 上下置中 20 12 10 v4_btn_global_ hide_normal 50 v4_ic_global_avatar 圖示尺寸 : 50x50 contact_private 維持上下置中縮小 最小縮到S3後前方文字出現 「...」 最多一行 沒有符合的號碼時 S3/C2 符合搜尋 結果的號碼 S4/C6 剩下的號碼 S4/C3 文字最長不超過 此線 2 12
  69. XONE UX Guideline V4 PAGE 91 特別注意 ! 此畫面為 320

    x 568 px , 有包含系統狀態列20px之高度 。 因此系統預設之狀態列會於此畫面隱藏 。 S4 / C3 左右置中 S4 / C3 左右置中 20 來電 10 70 範圍內上下 置中對齊 螢幕高度 5% 10 10 背景 C5 v4_ic_global_avatar 圖示尺寸 83x83 左右置中 S3/C2 左右置中 S4/C3 左右置中 voip_incoming_call voip_incoming_call_decline voip_incom- ing_call_re- ceive v4_btn_dial_de- cline_normal 左右置中 btn_dial_ call_active 左右置中 50% 50% 20
  70. XONE UX Guideline V4 PAGE 92 特別注意 ! 此畫面為 320

    x 568 px , 有包含系統狀態列20px之高度 。 因此系統預設之狀態列會於此畫面隱藏 。 通話種類 通話種類會根據通話方有所不同 。 請參考通話中頁面操作 。 80% 1/3 左右置中 1/3 左右置中 1/3 左右置中 1/3上下 置中 1/3上下 置中 10% 10% 通話中 畫面高度 67% 上下置中 1/3上下 置中 體驗原型 (iPhone 5 規格) v4_btn_calling_micoff_normal 上下左右置中對齊 v4_btn_calling_muteon_normal 上下左右置中對齊 v4_btn_calling_dialpadon_normal 上下左右置中對齊 v4_btn_calling_hold_normal 上下左右置中對齊 v4_ic_call- ing_head- seton_normal 上下左右置中 對齊 v4_btn_calling_ad- dcontact_normal 上下左右置中對齊 S3/C2 左右置中 背景 : C4 S4/C3 左右置中 S4/C2 左右置中 10 12 12 4 4 30 130 5 背景 C5 v4_btn_dial_de- cline_normal 左右置中 S4 / C6 / 上下左右置中對齊 ic_global_xo- neuser_offline 靠右下對齊 global_session_time / global_min voip_talk_ headset voip_talk_ad- dcontact voip_talk_ dialer voip_talk_ speaker voip_talk_hold voip_ talk_mute voip_dialing v4_ic_global_avatar 圖示尺寸 83x83 左右置中 感應區 感應區
  71. XONE UX Guideline V4 PAGE 93 100% 100% 1/3 左右置中

    1/3 左右置中 1/3 左右置中 1/4上下置中 1/4上下置中 1/4上下置中 1/4上下置中 10 10 特別注意 ! 此畫面為 320 x 568 px , 有包含系統狀態列20px之高度 。 因此系統預設之狀態列會於此畫面隱藏 。 撥號盤高度 為畫面高度 67% 背景 C5 v4_ic_calling_ close_dialpad 上下左右置中 v4_btn_dial_ decline_normal 10 上下置中 v4_btn_dial_ num_0,1~9_normal 打開撥號盤畫面 在通話中打開撥號盤後的版面尺寸如下 。 此畫面請將系統狀態列移除(以下畫面高度已扣除狀態列) 。 v4_btn_dial_ num_hashtag_ normal v4_btn_dial_ num_star_normal 數字鍵 感應區 螢幕高度 5% 螢幕高度 5% 體驗原型 (iPhone 5 規格) 30 20 20 起始樣式S1/C2 上下左右置中對齊 。 寬度過長時仍保持置中 , 但 文字字級按比例縮小 最小至S3/C2 可比照搜尋號碼輸入框 S4 / C3 / 上下左右置中對齊 文字不超過 此線 文字不超過 此線 感應區 global_session_time / global_min
  72. XONE UX Guideline V4 PAGE 94 打開音量調整功能 在通話中打開撥號盤後的版面尺寸如下 。 此畫面請將系統狀態列移除(以下畫面高度已扣除狀態列)

    。 特別注意 ! 此畫面為 320 x 568 px , 有包含系統狀態列20px之高度 。 因此系統預設之狀態列會於此畫面隱藏 。 100% 20 20 畫面高度 67% 100% 上下置中 1/3 左右置中 1/3 左右置中 1/3 左右置中 1/2上下 置中 1/2上下 置中 螢幕高度 5% v4_ic_calling_volume_input 上下左右置中對齊 v4_ic_calling_volume_output 上下左右置中對齊 v4_bg_calling_vol- ume_bar_high- lighted v4_ic_calling_head- seton_normal 上下左右置中對齊 v4_btn_call- ing_volume_ reset_disa- bled 上下左右置中 對齊 v4_bg_call- ing_volume_ bar_normal v4_ic_calling_vol- ume_control 上下左右置中對齊 S3/C2 左右置中 背景 : C4 S4/C3 左右置中 10 10 10 72 72 30 134 5 背景 C5 S4 / C6 / 上下左右置中對齊 ic_global_xo- neuser_offline 靠右下對齊 global_session_time / global_min voip_dialing v4_ic_global_avatar 圖示尺寸 83x83 左右置中
  73. XONE UX Guideline V4 PAGE 95 v4_btn_dial_ decline_disable 結束通話 特別注意

    ! 此畫面為 320 x 568 px , 有包含系統狀態列20px之高度 。 因此系統預設之狀態列會於此畫面隱藏 。 100% 1/3 左右置中 1/3 左右置中 1/3 左右置中 20 20 畫面高度 67% 高度彈性 調整 上下置中 上下置中 30 10 9 10 10 感應區 體驗原型 (iPhone 5 規格) 螢幕高度 5% S1/C2 上下左右置 中對齊 S3/C2 左右置中 voip_talk_ endcall v4_ic_global_avatar 圖示尺寸 83x83 左右置中 S4/C3 左右置中
  74. XONE UX Guideline V4 PAGE 98 稍後再讀 menu_item_main_histo- ry_content menu_item_main_

    pinned_content 參考樣式 頁籤 、 內容卡片 、 內容提供者區塊之變形 、 往上捲動後 、 列表 、 列表群組 80 80 50 12 12 v4_ic_global_ profile_settings v4_ic_global_ bookmarked 5 5 10 我的頁面功能 提供用戶瀏覽自己在 XONE 上的活動紀錄 , 包括稍後再讀( 或我的收藏) 、 瀏覽紀錄 、 喜歡的內容 、 分享過的內容 , 日後可 增加留言過的內容 。 此外也提供用戶編輯個人資料的捷徑 。 v4_ic_nav_ profile_ highlight 體驗原型 (iPhone 5 規格) 12 15
  75. XONE UX Guideline V4 PAGE 99 瀏覽記錄 menu_item_main_ pinned_content menu_item_main_

    pinned_content 參考樣式 頁籤 、 內容卡片 、 內容提供者區塊之變形 、 往上捲動後 、 列表 、 列表群組 12 v4_ic_global_ profile_settings S4/C3 靠左對齊 v4_ic_global_ viewed_tiny 靠左對齊 v4_ic_glob- al_liked_tiny 靠左對齊 v4_ic_global_ shared_tiny 靠左對齊 S5/C1 靠左對齊 v4_ic_global_ closelist 體驗原型 (iPhone 5 規格) 12
  76. XONE UX Guideline V4 PAGE 100 會員身分 會員身分顯示 針對台灣用戶 (以註冊之電話國碼為判斷依據)

    , 將顯示用戶 的會員身分 , 初期只有 2 種身分 : 一般用戶以及 VIP 會員 參考樣式 頁籤 、 內容卡片 、 內容提供者區塊之變形 、 往上捲動後 、 列表 、 列表群組 menu_item_main_ user_level global_barcode_scan profile_user_des_ normal profile_user_des_vip profile_membership_date profile_upgrade profile_check_dis- count_normal profile_check_dis- count_vip profile_user_ card_normal profile_user_ card_vip
  77. XONE UX Guideline V4 PAGE 101 卡片點擊後畫面 卡片點擊後 , 需要由下往上滑動顯示出用戶的識別條碼

    。 條碼周圍需要加上 3 單位的白邊 , 以便辨識 。 背景 C2 Opacity 0.9 global_bar- code_scan profile_upgrade profile_user_card_ des_normal profile_user_card_ des_vip profile_user_card_ logo profile_user_card_ logo v4_btn_global_ hide_normal_w profile_user_card_ title_normal profile_user_card_ title_vip ic_profile_user_ card_qr_vip
  78. XONE UX Guideline V4 PAGE 104 設定 20 100 20

    7 20 15 20 參考樣式 上導覽列 、 設定列表樣式 setting_title_profile menu_item_main_settings signup_profile_lab_con- tactupload_text setting_privacy_phone- book_sync_description setting_title_notification setting_btn_delete_ cache_description setting_verison setting_btn_delete_cache S5/C4/ 左右置中 S3/C10/ 左右置中 v4_bg_settings_ logo 左右置中 體驗原型 (iPhone 5 規格) 底部 Logo 與版本編號排版 列表的高度需包含底部的 Logo 與版本編號區塊 。 換言之 , Logo 與版本編號區塊會置於整個列表的底部 。 20 15
  79. XONE UX Guideline V4 PAGE 105 個人資料設定 20 20 20

    20 參考樣式 上導覽列 、 設定列表樣式 setting_title_profile setting_profile_nickname setting_profile_phone global_edit setting_profile_xr deposit_left_time S5/C1 左右置中 左右置中 20 7
  80. XONE UX Guideline V4 PAGE 106 Xr 值記錄 20 20

    15 15 參考樣式 上導覽列 、 設定列表樣式 、 群組列表 setting_profile_xr setting_xr_record S3/C1 靠右 S4/C2 靠右 S3/C2 靠右 S3/C10 靠右 S3/C2 靠右 S3/C4 靠右 v4_ic_glob- al_help v4_ic_global_ex- pandlist v4_ic_global_ closelist 體驗原型 (iPhone 5 規格) 20
  81. XONE UX Guideline V4 PAGE 107 通話分鐘數記錄 20 15 15

    20 參考樣式 上導覽列 、 設定列表樣式 、 群組列表 記錄種類字串表 setting_title_left_time deposit_left_time deposit_left_dollar 參考上方記錄種 類字串表 global_min S5/C10 靠右下對齊 S5/C1 靠右下對齊 S3/C4 靠右 v4_ic_global_ closelist 20 種類 String 播出電話 setting_left_time_callout 接聽電話 setting_left_time_callin 參加活動 setting_left_time_events 輸入邀請碼 setting_left_time_invited
  82. XONE UX Guideline V4 PAGE 108 通知設定 20 20 20

    參考樣式 上導覽列 、 設定列表樣式 setting_notification_ sound setting_notification_ function setting_notification_push setting_title_notification setting_notifica- tion_vibration 20
  83. XONE UX Guideline V4 PAGE 109 修改暱稱 參考樣式 跳出視窗 。

    setting_profile_nick- name_description signup_abort_register_ cancel global_save 背景 : C8 文字 : S4/C3 置中對齊 v4_ic_global_ search_clear
  84. XONE UX Guideline V4 PAGE 114 v4_btn_explore_ search_normal v4_ ic_event_hot

    v4_ ic_event_joined v4_ ic_event_new v4_btn_explore_ search_normal v4_ic_global_notifi- cation v4_btn_glob- al_cat_normal v4_ic_nav_ profile v4_ic_nav_ call v4_ic_nav_ notification v4_ic_nav_ more 活動首頁 20 20 70 70 70 參考樣式 頁籤 、 下導覽列 、 內容卡片 、 所有頻道 。 content_home_content_ topbar_title global_event global_mine voip_action- bar_title content_notifi- cation_center_ title global_more 置頂 Banner 圖片比例維持 320 : 154 。 此處圖片大小會與所有頻道置頂共用 。 體驗原型 (iPhone 5 規格)
  85. XONE UX Guideline V4 PAGE 115 活動分類 頁面說明 此頁面使用設定列表顯示 。

    如該項目內無物件 , 則隱藏該項目 。 20 20 explore_event_menu_title 參考樣式 上導覽列 、 設定列表樣式 、 群組列表
  86. XONE UX Guideline V4 PAGE 116 單一活動類型頁 20 20 頁面說明

    請注意此頁面沒有底部導覽列 。 參考樣式 上導覽列 、 頻道列表樣式 v4_btn_global_prev 12
  87. XONE UX Guideline V4 PAGE 117 活動預覽頁 參考樣式 上導覽列 、

    下方功能列 視差滾動效果 內文主圖捲動時會有視差滾動之效果 , 請參考原型 。 主圖向上捲動的速度是主文區塊的0.5倍 ; 在文章最頂時放 大的倍率是下拉距離的0.002倍 。 v4_btn_global_prev S5/C4 靠左對齊 上下置中對齊 50 5 12 5 content_published 體驗原型 (iPhone 5 規格) 20 12 5 185 45
  88. XONE UX Guideline V4 PAGE 118 content_read_more 感應區 「前往活動」 區塊

    原文出處樣式如右 。 完全比照群組列表的標題區塊 。 content_provider 「詳細資訊」 區塊 詳細資訊區塊放置簡短的敘述 。 敘述字數不超過 50 個字 。 此區塊樣式請參考列表群組 。 12 10 20 高度 彈性 15 15 45 5 12 10
  89. XONE UX Guideline V4 PAGE 119 主辦單位詳細資訊頁 content_provider_events content_provid- er_info

    參考樣式 頁籤 、 內容提供者區塊之變形 、 往上捲動後 、 列表群組 80 80 50 12 20 5 5 10 15 15 v4_btn_global_prev
  90. XONE UX Guideline V4 PAGE 120 參考樣式 頁籤 、 內容卡片

    、 群組列表 45 10 10 10 20 45 45 20 C2/S4 靠左上對齊 詳細資訊 目前確認的區塊 : 關於 、 連絡電話 、 地址 、 網址 、 email 。 允許缺少部分區塊 , 沒有內容的區塊不顯示 。 都沒有內容時不顯示頁籤 , 但建議至少有 「關於」 區塊 。 content_provid- er_info content_provid- er_about content_provider_ address content_provid- er_phone content_provider_ phone_call content_provider_ad- dress_openmap 15 15 20 20
  91. XONE UX Guideline V4 PAGE 121 主辦單位的活動頁 content_provider_events content_provid- er_info

    參考樣式 頁籤 、 往上捲動後 、 列表 80 80 50 12 12 5 5 10 12 15 15 v4_btn_global_prev
  92. XONE UX Guideline V4 PAGE 122 禮物箱 global_event_gift global_today global_yesterday

    參考樣式 群組列表 、 下導覽列 50 70 70 45 已讀過 : Opacity 0.5 已讀過 : Opacity 0.5 未讀過 : Opacity 0.1 未讀過 : Opacity 0.1 15 12 15 v4_btn_global_prev
  93. XONE UX Guideline V4 PAGE 123 載入網頁時 最上方會出現進度條 : 高2/C1

    。 未載入時的背景色為C5 。 動畫可於原型中點擊 「原文出處」 後觀看 。 活動網頁 S3/C2靠左對齊 最多一行 不超過此線 S4/C4靠左對齊 v4_btn_global _refresh 50 v4_btn_global_prev 12 5 12 v4_btn_global _web_prev_disabled v4_btn_global _web_next_disabled 10
  94. XONE UX Guideline V4 PAGE 124 標題日期格式 中式 : YYYY

    年 + global_event_calendar_month_1-12 西式 : global_event_calendar_month_1-12, YYYY 活動日曆 global_event_calen- dar_month_1-12 global_event_calen- dar_back global_event_calen- dar_week_1-7 50 240 (5 周) / 285 (6周) 彈性高度 可上下捲動 的活動列表 30 10 25 20 70 70 70 20 20 20 20 星期1-5 S4/C3/在這個範 圍內上下左右置 中對齊 星期6-7 S4/C1/在這 個範圍內上 下左右置中 對齊 文字 S4/C3 在這個範圍內上下 左右置中對齊 底圖 v4_btn_event_ calendar_date_ normal 文字 S4/C1 在這個範圍內上下 左右置中對齊 底圖 v4_ic_event_cal- endar_today 文字 S4/C1 在這個範圍內上下 左右置中對齊 底圖 v4_btn_event_ calendar_date_ highlight S3/C2/靠左 S5/C1/靠 右/上下 置中 5 體驗原型 (iPhone 5 規格) 12 v4_btn_global_prev 20 X 根據螢幕大小彈性伸縮 X X X X X X
  95. XONE UX Guideline V4 PAGE 125 日期種類 日曆上的日期可分為 : 今天的日期

    、 選擇的日期 、 其他一般的 日期 。 這三種日期會以不同的背景圖示跟文字顏色做表示 。 有事件的日子 有事件的日子會在日期底部加上點點 。 沒有活動的日子 沒有活動時下方的活動列表為空狀態 。 樣式如右 。 global_event_calen- dar_no_event 1 15 v4_ic_event_calen- dar_event_date S4/C3/左右置中 選取的日期 v4_btn_event_ calendar_date_ highlight 未選取的日期 v4_btn_event_ calendar_date_ normal 當天的日期 v4_ic_event_cal- endar_today
  96. XONE UX Guideline V4 PAGE 128 通知 content_notification_ center_title global_today

    global_yesterday 參考樣式 群組列表 、 下導覽列 50 70 70 45 已讀過 : Opacity 0.5 已讀過 : Opacity 0.5 未讀過 : Opacity 0.1 未讀過 : Opacity 0.1 15 v4_ic_nav_ notification_ highlight 12 15
  97. XONE UX Guideline V4 PAGE 129 更多 global_more menu_item_main_ settings

    setting_title_referral global_faq setting_contact_us setting_title_levels setting_profile_xr deposit_left_dollar setting_membership 參考樣式 設定列表 、 下導覽列 v4_ic_nav_ more_high- light
  98. XONE UX Guideline V4 PAGE 130 邀請 20 20 15

    20 參考樣式 上導覽列 、 設定列表樣式 setting_referral_my menu_item_main_settings setting_referral_invite_ description setting_referral_invite_ counter setting_referral_invite setting_referral_invite_ counter_description S4/C1/ 靠右對齊 S4/C3/ 靠右對齊 S4/C3/ 靠右對齊 20
  99. XONE UX Guideline V4 PAGE 136 操作回饋 回饋 為讓使用者了解操作時的正確性 ,

    介面中可操作的元件在使 用者點擊後會改變其元件原本的樣式以當做操作的回饋 。 感應區 使用者於介面中的可點擊範圍為 「感應區」 , 關於各種感應區 的大小規範請參考GUI 。
  100. XONE UX Guideline V4 PAGE 137 錯誤狀況 狀態列文字一覽 兩種機制 當系統出現錯誤時

    , 會有兩種機制出現 : 第一種是會於功能列下方出現錯誤狀態列 , 用於當錯誤不影 響正常使用 ; 第二種是跳出視窗 , 這會中斷使用者的操作 , 用 於會影響正常使用的錯誤 。 下表為對應狀況下的文字 , 其中括弧代表按鈕 。 錯誤代碼 錯誤代碼分類 、 範例如下 : 1~ 網路連線問題 2~ 登入註冊問題 3~ content server 問題 4~ SIP server 問題 5~ IM server 問題 9~ 未知問題 內容發生錯誤 為避免錯誤發生錯誤時沒有畫面可以呈現 , 會以網頁取代該 畫面 , 並讓使用者可以重新整理 。 通常此類錯誤會發生於需要載入網頁的介面 。 目前會出現的頁面為 : 介紹頁 、 首頁 、 頻道頁 。 其中介紹頁為全頁式 ; 首頁 、 頻道頁僅止於內容區塊呈現(即 功能列與導覽列下方的範圍) 。 跳出視窗文字一覽 狀況 出現文字 網路連線異常 無法連線到 XONE , 請檢查網路設定 (1001) Server time out 您的網路品質不佳 , 請檢查網路設定 (3001) 狀況 出現文字 IMSI 不一致 為了保障您的帳號安全 , 接下來將進行簡 訊認證 。 (2001)將發送簡訊到 XXXX-XXX-XXX [取消] [確定] 讀取簡訊時發生錯誤 讀取簡訊時發生錯誤 , 請將您的設備資訊 回報給開發團隊 , 我們將儘速為您處理 (2002) [取消] [回報] 狀況 出現文字 網路連線異常 無法連線到 XONE 請檢查網路設定(1001) [重新載入] Server time out 網路品質不佳 請檢查網路設定(3001) [重新載入]
  101. XONE UX Guideline V4 PAGE 138 空狀態 (待討論) 畫面 圖片

    標題 短敘述 按鈕文字 行為 通訊錄 v4_bg_global_ empty_contact. png contact_empty contact_empty_de- scription contact_empty_ action_button 開啟同步通訊錄功能 通話記錄 v4_bg_global_ empty_no_re- cord_2.png call_log_empty call_log_empty__de- scription call_log_empty_ action_button 打開播號盤 禮物箱 v4_bg_glob- al_empty_gift. png event_gift_emp- ty -- -- -- 通知中心 v4_bg_global_ empty_no_re- cord_3.png notification_ center_empty -- -- -- 稍後再讀 v4_bg_glob- al_empty_wait- ing_2.png global_list_ empty -- -- -- 瀏覽記錄 v4_bg_global_ empty_no_re- cord_1.png global_list_ empty -- -- -- 我的頻道 v4_bg_glob- al_empty_wait- ing_1.png my_channel_ empty my_channel_emp- ty_description my_channel_ empty_action_ button 前往所有頻道 空狀態出現機制說明 當列表內沒有物件時 (大部分會是第一次使用時) , 會使用圖 片 、 說明文字與按鈕來取代畫面 。 一方面告知使用者目前的 狀態 , 另一方面也可以引導使用者從事進一步的操作 。 隨機替換圖片 空狀態的圖片檔名如果含有數字 , 列如 v4_bg_global_emp- ty_no_record_2.png , 代表有可以替換的圖片 。 也就是說 , 使用 v4_bg_global_empty_no_record_2.png 圖片的畫面與使用圖 片 v4_bg_global_empty_no_record_1.png 共享圖片 , 並且在 載入畫面時隨機替換 。 標題 短敘述 按鈕文字 圖片
  102. XONE UX Guideline V4 PAGE 139 提示種類與對應之操作 提示類型 對應不同的通知種類 ,

    提示可分為可點擊 / 不可點擊兩大類 型 。 其中不可操作的提示又分為是否是重要提示 。 通知種類 提示類型 可否點擊 按下後行為 對應 string 語音信箱 普通 O 撥打語音信箱 im_message_new_audio 未接來電 普通 O 進入通話記錄 voip_miss_call_notification_content 活動序號獲得分鐘數 普通 O 進入通話分鐘數列表 deposit_activity_toast 邀請碼獲得分鐘數 普通 O 進入通話分鐘數列表 deposit_activity_toast 接聽獲得分鐘數 普通 O 進入通話分鐘數列表 deposit_activity_toast 獲得禮物(native) 普通 O 開啟相對應native畫面 content_reward_toast 獲得禮物(web) 普通 O 開啟相對應web畫面 content_reward_toast 活動通知(需後台發送 普通 O 開啟相對應活動 客製化文字 網路異常 重要 X -- splash_data_get_error_title
  103. XONE UX Guideline V4 PAGE 140 URL Schme 參考表格 功能

    格式 範例 撥號 xone://call/{phone number} xone://call/0980123456 撥號盤 xone://dialer xone://dialer 撥號盤 +預設號碼 xone://dialer/{phone number} xone://dialer/0980123456 APP下載 xone://app/{base64 encoded} xone://app/aHR0cHM6Ly9pdHVuZXMuYXBwbGUuY29tL2Fwc- C94b25lLW1lZGlhL2lkOTgxMzU0NDU4 輸入序號 xone://sn xone://sn 輸入序號+預設號碼 xone://sn/{serial number} xone://sn/123456789
  104. XONE UX Guideline V4 PAGE 145 下方導覽列 當點在探索頁面時 , 原本下方導覽列探索的位置會替換成按

    鈕的形式 。 當頁籤為 「內容」 時 , 按下按鈕後會到我的頻道 ; 當頁籤為 「活 動」 時 , 按下按鈕會到活動分類 。 以上可參考流程圖 。 上方頁籤列 當在捲動內容 , 向下捲動時 , 上方的頁籤會收合 ; 向下捲動 時 , 上方的頁籤會展開 。 此行為請參考原形 。 原本的圖示切換成按鈕
  105. XONE UX Guideline V4 PAGE 146 內容卡片行為按鈕 卡片下方的行為按鈕文字會視內容類型更動 。 卡片類型大致可歸類為下表

    : 置頂卡片機制說明 可橫向捲動的卡片包含一個圖片 、 標題 、 Logo 、 短描述和一 個 Action button 。 點擊的行為將卡片與按鈕分開 , 分別可以 是導至頻道頁 、 內容頁 、 單一活動頁 、 外部連結 (包括導下載) 、 打電話 、 或將內容加入稍後再讀清單 。 區塊內每 3 秒會自動滑動以顯示下一個卡片 , 用戶也可手動 滑動 。 當用戶下次進入首頁 , 或往下捲動到再次出現置頂版 位時 , 需顯示未 impression 過的卡片 , 如果所有小卡片都 impression 過 , 則從頭開始顯示 。 置頂卡片機制說明(續) 每 30 分鐘 , 第一次開啟 app 時 , 會顯示在 #1 則 (置頂) 。 其餘時間 , 除了不會顯示在 #20 (假設每次呼叫取得 20 筆 資料) 則 , 會亂數顯示在 #2 - #19 則 , 但任何兩則廣告不會相 鄰 。 #2 - #19 , 每20 則 (請將此設為變數 , 日後可以於後台設 定調整) 只會顯示1 個此類區塊 。 卡片類型 稍後再讀 點擊後行為 string 文章內容 可 進入內容頁 content_card_more 網頁 不可 進入內容網頁 content_card_more 其他 不可 播號畫面 、 加好友等等 App 內部行為 未定 行為按鈕 圖片 Logo 標題 短敘述 Action Button
  106. XONE UX Guideline V4 PAGE 147 可橫向捲動的卡片的關閉按鈕 若用戶關閉置頂版塊 , 30

    分鐘內出現頻率降低 50% , 並且 30 分鐘內最多降低 50% 。 例如 , 原本如果是 20 則內容才會出現廣告 , 調整後就會變成 40 則內容才出現廣告 , 並於 30 分鐘內不會低於 40 則 。 30 分鐘後恢復原本的 20 則 。 關閉動畫請參考線上原型 。 卡片類型 點擊卡片後 點擊行為按鈕連結後 按鈕文字 按鈕圖檔名 內容 進入該篇內容頁 將該篇內容加入稍後再 讀清單 menu_item_main_pinned_ content v4_btn_content_bookmark_ normal/ highlight 頻道 進入該頻道頁 關注該頻道 content_home_channel_fol- low v4_btn_content_follow_nor- mal/highlight 下載 前往下載連結 前往下載連結 content_event_btn_summa- ry_app v4_btn_content_download 撥號 撥號 撥號 content_call v4_btn_content_call 網頁 前往外部連結 前往外部連結 global_check_out_more v4_btn_content_check_ out_more 活動 前往活動頁 前往活動頁 content_event_btn_summa- ry_default v4_btn_content_check_ out_more 置頂卡片機制表格 可關閉區塊的 按鈕
  107. XONE UX Guideline V4 PAGE 148 內容提供者區塊 無論在首頁 、 頻道頁

    、 或瀏覽記錄 , 這裡永遠顯示的是內容提 供者 (provider) 的資訊 , 包括 logo 及 名稱 。 內容細節區塊 顯示喜愛該篇內容的人數 (如果尚未有喜愛的人數 , 則不顯 示) , 以及該內容所屬的主分類名稱 。 如果該內容為編輯精選內容 , 也會標示在這裡 。 內容卡片點擊範圍 整個內容卡片的範圍點擊後都可進入文章 。 除了點擊稍後再讀與內容提供者區塊會有不同的動作 。 禮物專屬內容 進入禮物專屬內容 , 於內容頁停留 3 秒以上 , 可獲得 30 分鐘 通話時間回饋(以上數值可視業務需求調整) 。 進入內容頁後也會有 「禮物專屬」 的標籤 , 點擊後會有跳出視窗 提示 。 內容提供者區塊 標題 稍後再讀 內容細節 內容預覽 行為按鈕 圖片 代表此篇內容為禮物專屬
  108. XONE UX Guideline V4 PAGE 149 內容卡片圖片尚未載入時 如果圖片尺寸過大無法即時載入 , 則圖片預設區域內會以

    C8 的色塊呈現 。 如果載入時間超過 1.5 秒 , 則直接不顯示圖片區塊 。 贊助內容顯示規則 內容時間軸中會安插廣告機制 , 且 不在資料流的第一則或 最後一則 。 如果資料流為 20 筆資料 (請將此設為變數 , 日後可以於後 台設定調整) , 贊助內容則不會出現於 #1 或 #20 , 另於 #2 至 #19 , 每隔 8 則 (請將此設為變數 , 日後可以於後台設定調 整) 輪替顯示不同廣告商的廣告 。 如果遇到為資料流 #1 或 #20 , 則於下一則顯示 。 (分別是 #9, #18 則為原生廣告) 假設 #7 = vmfive, #13 = yahoo, #19 = vmfive , 再次頁 #5 = yahoo, #11 = vmfive, #17 = yahoo 編輯精選內容卡片 由 server 標示為編輯精選的文章會安插於探索頁第一篇 。 C8
  109. XONE UX Guideline V4 PAGE 150 搜尋頁面操作機制 Pixate原型 (iPhone 5

    規格) 尚未開始搜尋前 內建鍵盤會展開 , 並自動進入輸入鎖定的狀態 。 底部會有 「熱門搜尋的關鍵字」 (最多 10 筆)與 「熱門搜尋的 頻道」 (最多 10 筆) 等欄位 。 搜尋後 搜尋後搜尋欄會依照內容 、 頻道 、 分類顯示搜尋結果欄位 , 並 於欄位旁顯示資料筆數 。 查看 搜尋結果樣式
  110. XONE UX Guideline V4 PAGE 151 條碼掃描頁面操作機制 未知的條碼 當掃描到未知的條碼 ,

    可以分成兩種情況 。 第一種是 Http 開頭的網頁 , 掃到後顯示網址還有行為按鈕 。 第二種是其他的非 XONE 的條碼 , 掃到後還是顯示該字串 , 但沒有行為按鈕 , 且不做任何行為 。 未知類型 圖檔 標題 內文 按鈕 Http v4_bg_glob- al_unknown-1 qrcode_result_unknown_http 網址 qrcode_result_visit_site 其他 v4_bg_glob- al_unknown-2 qrcode_result_unknown 原字串 無 點我查看 流程圖 Http 其他未知
  111. XONE UX Guideline V4 PAGE 155 我的頻道頁面操作機制 搜尋我的頻道 在此頁所搜尋的結果只會顯示已訂閱的頻道 。

    按下搜尋時我的頻道列表暫時不清空 , 直到使用者於搜尋欄 內按下確認 , 我的頻道列表便隨即切換為搜尋的結果 。 (請參考我的頻道原型) 編輯我的頻道 按下編輯我的頻道時 , 「新增頻道」 的按鈕隨即隱藏 , 直到退 出編輯模式為止 。 (請參考我的頻道原型) 滑動標記最愛 列表內的物件可以直接向右滑動標記最愛 。 標記為最愛的物件會直接置頂 。 最新背標記為最愛的物件會置於較舊標記的物件之上方 。 (請參考滑動頻道原型) 滑動取消訂閱 列表內的物件可以直接向左滑動取消訂閱 。 (請參考滑動頻道 原型) 滑動到底直接操作 列表內的物件滑動時 , 如果超過滑動範圍 , 則該操作會直接 生效 。 (請參考滑動頻道原型) 滑動頻道原型 (iPhone 5 規格) 我的頻道原型 (iPhone 5 規格) 右滑置頂 左滑取消訂閱 點我查看 流程圖
  112. XONE UX Guideline V4 PAGE 156 所有頻道頁面操作機制 搜尋所有頻道 在此頁所搜尋的結果會顯示已訂閱以及未訂閱的頻道 。

    按下搜尋時會出現熱門搜尋的頻道10筆 , 直到使用者於搜尋 欄內按下確認 , 列表便隨即切換為搜尋的結果 。 (請參考我的頻道原型) 直接關注頻道 在列表上未訂閱的頻道可以直接點選 「+」 關注 。 訂閱後該頻道不會消失 , 但 「+」 會消失 。 特色頻道 在列表最上方的圖片區域為特色頻道 。 特色頻道區域可左右滑動切換不同主題 。 點擊後可能依照該主題進入對應的分類頁 、 頻道頁 , 或文章 頁 。 特色頻道會自動輪播 。 (請參考所有頻道原型) 頻道分類 每個分類頻道最多顯示三個頻道 。 使用者可點擊標題旁的 「 更多」 進入頻道分類頁查看該分類中完整的頻道 。 (請參考我的頻道原型) 所有頻道 (iPhone 5 規格) 我的頻道原型 (iPhone 5 規格) 左滑取消訂閱 特色頻道 點我查看 流程圖
  113. XONE UX Guideline V4 PAGE 157 頻道內容組成 頻道的內容是取決於頻道的屬性 。 屬性可分成

    「內容提供商」 的頻道以及 「內容分類」 的頻道 。 內容提供商的頻道內只會出現該廠商產出的內容 ; 內容分類 的頻道內會出現所有歸類為該分類的內容 。 其他說明請參考內容分類機制 。 頻道頁面操作機制 關注頻道 關注頻道後下方的已關注人數會+1 。 內容文章排序 文章由新到舊排序 。 詳細資料 詳細資料視後端資料有無設定來顯示 ; 沒有資料時不顯示 。 沒有詳細資料時不顯示頁籤 。 詳細資料排序 關於> 網址 >聯絡地址>聯絡電話 頻道頁 (iPhone 5 規格) 打開內建地 圖App 進入播號 畫面 點我查看 流程圖
  114. XONE UX Guideline V4 PAGE 158 容易+頻道頁面操作機制 篩選器 篩選器有 2

    個區塊 : 地區與優惠類別 , 一次只會展開一個區 塊 , 預設先展開地區 。 當用戶點擊另一個區塊時 , 原本展開的 區塊會收合起來 。 第一次開啟此頁面列表會先勾選 全部地區/類別 。 之後進入 此畫面會維持上一次停留的狀態 。 全部地區/類別的邏輯 請特別注意 「全部地區/類別」 這個項目的 3 個機制 : 1- 選取 「全部地區/類別」 時 , 其他地區/類別的選項都會被取 消勾選 ; 2- 當 「全部地區/類別」 為選取狀態時 , 勾選其他任一選項會 取消 「全部地區/類別」 ; 3- 點擊已勾選的 「全部地區/類別」 不能取消勾選(不會有反 應) 。 確認 按下確認後隨即套用篩選結果 , 並關閉篩選器 。 儲存設定並 關閉 全部地區
  115. XONE UX Guideline V4 PAGE 159 篩選器中的項目 篩選項目只顯示該項以下有內容的項目 , 如項目下沒有內

    容 , 應隱藏該項目 。 例如假設北部地區中 , 基隆市沒有容易店+ , 則項目清單中 不顯示基隆市這個項目 。 篩選器的多選機制 篩選項目可以多選 , 但只限於同一個父節點以下的項目 , 例 如北部地區以下的區域可以同時被選 。
  116. XONE UX Guideline V4 PAGE 163 內容頁面操作機制 切換上下篇文章 在閱讀文章時可以向左滑動切換到下一篇文章 ,

    或是直接按 下功能列表上的 「下一篇」 按鈕 。 在切換到下一篇文章後 , 仍可以向右滑動回到上一篇文章 , 一直到從首頁進入的第一篇文章 。 返回鍵 不管目前的文章是第幾篇 , 或是其他相關文章 , 左上之返回 鍵永遠是回到進入第一篇文章前的頁面(可能是首頁或是頻 道頁等等) 。 下一篇文章B 正在閱讀的文章A 文章B 文章A 內容頁 (iPhone 5 規格) 禮物專屬內容 進入禮物專屬內容 , 於內容頁停留 3 秒以上 , 可獲得 30 分鐘 通話時間回饋 。 (以上數值可視業務需求調整) 當該篇文章為禮物專屬內容時 , 於發佈日期後會有 「禮物專 屬」 的標籤 , 點擊後會有跳出視窗提示 。 操作細節請參考原型之動態效果 。 視窗文字請參考 String Table : content_dialog_gift 。 禮物專屬標籤 文章發佈時間 文章發佈時間 文章發佈日期之格式統一為 : 發佈於 + [空白] + X月X日 + [空白] + XX:XX 點我看更多樣式 。 點我查看 流程圖
  117. XONE UX Guideline V4 PAGE 164 內容提供者資訊區塊機制 內容頁面上方與下方均有顯示內容提供者 (contentprovider) 的區塊

    , 其目的是為了替合作廠商增 加品牌知名度 , 因此這2個區塊永遠顯示的是內容提供者的 資訊 。 點擊內容提供者的文字或圖片會進入該內容提供者的頻道 頁 。 以上敘述可以直接參考原型之動態效果 。 底部功能列 當捲動文章時 , 底部的功能列位置固定 。 以上敘述可以直接參考原型之動態效果 。 底部功能 : 喜歡 使用者可以於文章結束後的喜歡按鈕或是底部功能列上的 喜歡圖示操作 。 當使用者按下任一個喜歡的功能 , 對應的按 鈕也會顯示已喜歡的狀態 。 以上敘述可以直接參考原型之動態效果 。 底部功能 : 儲存 按下儲存後該篇文章會被歸類到儲存的文章清單中 , 並且為 可以離線閱讀的版本 。 底部功能 : 分享 按下分享後會進入 Android 或 iOS 系統內建的分享畫面 。 Android 的分享按鈕與 iOS 的分享按鈕會使用不同的圖示 表示(看對應的 String) 。 分享 喜歡 儲存
  118. XONE UX Guideline V4 PAGE 165 內容網頁導覽列機制 當點擊內文中的外部連結或原文出處時 , 會進入內容網頁

    。 內容網頁一開始顯示上下的導覽列 , 開始往下捲動時 , 上下 導覽列皆收合 。 一旦向上捲動 , 上下導覽列會展開 。 在展開收合網頁時 , 網頁顯示區塊不被導覽列覆蓋 , 以便維 持有自己固定導覽列的網頁使用 。 以上敘述皆可以直接參考原型之動態效果 。 內容網頁的下導覽列說明 下導覽列中有前往網頁的上一頁 / 下一頁功能 。 當沒有上下 頁可以前往時 , 這些按鈕要呈現 Disabled 的狀態 。 你可能也會喜歡 每篇文章的最後會選出 1 ~ 3 篇與該篇文章最符合的文章 。 篩選的條件為 : 標籤全部符合 > 標籤部分符合 > 分類符合 相同條件下之篩選 : 文章熱門程度 > 文章更新時間 上下導覽列收合 , 但網頁區塊會 延展 網頁區塊不會被 導覽列覆蓋
  119. XONE UX Guideline V4 PAGE 166 內容分類機制 依照每個內容供應商的內容 , 不同內容的屬性可分類成主分

    類與次分類 。 點擊 「內容分類」 欄位中的標籤可進入分類的頻 道頁 。 換句話說 , 同一個內容供應商可能會出現於很多分類中 , 但 單一內容只會出現於單一的分類中 。
  120. XONE UX Guideline V4 PAGE 167 內容圖片尚未載入時 如果圖片尺寸過大無法即時載入 , 則圖片預設區域內會以

    C8 的色塊呈現 。 如果載入時間超過 1.5 秒 , 則直接不顯示圖片區塊 。 C8
  121. XONE UX Guideline V4 PAGE 171 通話記錄頁面操作機制 通話紀錄列表排序邏輯 通話紀錄列表最上方(第一筆資料)為上一通撥打的聯絡人 ,

    之後依照通話時間由近到遠依序排列 。 合併時機 為防止列表過多資料 , 故會如是 : 相同聯絡人 + 相同類別 + 10分鐘內 , 則會自動合併記錄 。 顯示時間 顯示時間會以該通話結束後距離現在的時間來計算 。 2天以上的紀錄會以日期表示 , 請參考右表 。 通話記錄細節之呈現 。 聯絡人種類 列表內顯示的聯絡人種類可分為三種 : XONE用戶 、 非XONE 用戶 、 離線的XONE用戶 , 點擊後會進入不同的通話畫面 。 關於圖示的樣式位置請參考撥號頁面 。 表示通數 日期 當通數超過100通 , 會 以99+表示 XONE用戶 非XONE用戶 離線的XONE用戶 實際日期 顯示文字 2014/05/05/13:20 今天 13:20 2014/05/05/13:19 今天 13:19 2014/05/04/13:19 昨天 13:19 2014/05/03/13:19 2014/05/04/13:19 1900/05/03/13:19 1900/05/03/13:19 Pixate原型 (iPhone 5 規格) 點我查看 流程圖
  122. XONE UX Guideline V4 PAGE 172 通訊錄頁面操作機制 展開/收合列表 按下通訊錄列表中的物件會以展開列表的方式呈現 。

    再點擊一次該列或展開其他列則收合該列表 。 詳細操作請參考原形 。 電話類型 電話號碼下方的敘述會依照內建通訊錄的設定而定 。 但是如果該號碼是該聯絡人註冊 XONE 所使用的號碼 , 則下 方會出現 「XONE」 , 而不是內建通訊錄的設定 。 一筆以上電話 如果聯絡人擁有一筆以上的電話 , 會以列表的方式依序項下 排列 。 Pixate原型 (iPhone 5 規格) 點我查看 流程圖 代表該號碼是可以撥 打 XONE 網內的號碼
  123. XONE UX Guideline V4 PAGE 173 列表滑動機制 與介面中其他列表的滑動機制一樣 , 向左滑動可刪除聯絡

    人 ; 而在此列表中向右滑動可直接撥打該聯絡人的主要電話 號碼 (排列順序第一位的號碼) 。 詳細操作請參考原形 。 刪除聯絡人 在 XONE 通訊錄刪除聯絡人不會將內建通訊錄內的聯絡人 刪除 。 刪除聯絡人後沒有辦法回復 , 所以不論滑動還是展開後按刪 除 , 都會有跳出視窗做確認 。 詳細操作請參考原形 。 搜尋聯絡人 當進入搜尋狀態時 , 滑動聯絡人列表會解除搜尋狀態 。 向右滑動可直接撥 打電話
  124. XONE UX Guideline V4 PAGE 174 撥號頁面操作機制 Pixate原型 (iPhone 5

    規格) 點我查看 流程圖 收合 / 展開撥號盤 當使用者開始操作通話紀錄列表或搜尋結果列表時 , 撥號盤 會自動收合 , 或透過在播號盤上向下滑動收合 。 展開撥號盤時點擊聯絡人會直接撥出 。 點擊底部功能列中的撥號盤圖示則可以再次展開撥號盤 。
  125. XONE UX Guideline V4 PAGE 175 輸入數字後 上方列表會切換成搜尋模式 。 搜尋的結果會依照號碼排序

    。 如果號碼相同 , 則判斷暱稱先後順序如下 : 數字 > 英文(A~Z) > 符號 > 中文第一個字的筆畫 > 中文第二 個字的筆劃 > 中文第 N 個字的筆畫 修正撥號結果 單次點擊為消除一個數字 ; 長按超過 2 秒後清除所有數字 。 當沒有數字輸入時 , 列表恢復文字 「通話紀錄」 。 欄位有號碼時右側會有 「清除全部」 的按鈕 。 語音信箱 使用者需長按 1 後可進入語音信箱 。 儲值按鈕 撥號盤左下角的 icon 需導至儲值畫面 , iOS 版則導至序號 輸入畫面 。 對應的文字會 Highlighted 清除全部 修正鍵 長壓 1 進入語音信箱 長壓 0 手動輸入國碼 儲值按鈕
  126. XONE UX Guideline V4 PAGE 176 國碼不會消失 長按 0 或在尚未

    輸入號碼前按下修 正鍵可直接手動輸 入國碼 選擇國碼 使用者按下號碼輸入欄位前的國碼時 , 會叫出我們有支援的 國家/地區 (碼) 的列表 (請參考原形) 。 從列表鐘選擇國碼後隨即帶入號碼輸入欄位前的國碼 。 預設國碼 號碼輸入欄位前的國碼會依照使用者在註冊時所選擇的國 家與地區帶入對應的國家代碼 。 每當離開撥號畫面再進入時 , 號碼輸入欄位前的國碼會恢復 成原本預設的國碼 。 國碼與撥號盤操作間的機制說明 號碼輸入欄位前的國碼會持續顯示於使用者欲輸入的號碼 前方 。 如果使用者於尚未輸入號碼的狀態下按下撥號盤上的修正 鍵 , 則號碼輸入欄位前的國碼會全部清除 , 讓使用者可直接 輸入國碼 。 輸入國碼時會比對現有支援的國碼自動轉化 。 詳細機制可參考 Skpye for iOS 或線上原形 。 國際電話 使用者需長按 0 輸入 + 為國際冠碼後方能播出國際電話 (如 開頭沒有 + 則皆視為國內電話) 。
  127. XONE UX Guideline V4 PAGE 177 撥號鍵 在尚未輸入數字前 , 如果按下撥號鍵

    , 將會直接於欄位內置 入上一位聯絡對象的號碼 。 如上一通撥出之電話為國際電 話 , 則會切換至國際電話模式 。 通話列表比照輸入數字後的行為處理 。 帶入上一次通話過 的電話號碼
  128. XONE UX Guideline V4 PAGE 178 撥號錯誤 如撥號發生錯誤 , 則會利用跳出視窗的方式說明原因

    。 原因 標題 內容 強調按鈕文字 次要按鈕文字 號碼格式錯誤 voip_call_fail_caused_ by_wrongformat_title voip_call_fail_caused_by_ wrongformat_content number_dialog_ btn_ok null 餘額不足 voip_call_fail_caused_ by_prepay_title voip_call_fail_caused_by_pre- pay_content number_dialog_ btn_ok null 網路問題 voip_call_fail_caused_ by_internet_title voip_call_fail_caused_by_in- ternet_content number_dialog_ btn_ok null
  129. XONE UX Guideline V4 PAGE 179 來電/通話頁 (iPhone 5 規格)

    點我查看 流程圖 通話中頁面操作機制 通話狀態描述 狀態 String Table 正在撥號 voip_dialing 正在通話 voip_talk_duration + [空格] + XX : XX 結束通話 voip_talk_endcall 狀態 String Table XONE用戶上線 voip_talk_freecall 非XONE用戶 global_session_time + N +global_min XONE用戶下線 global_session_time + N +global_min 可通話時間描述 通話狀態描述 XONE用戶 非XONE用戶 XONE用戶下線 可通話時間 可通話時間會依據不同的受話方顯示或隱藏 。
  130. XONE UX Guideline V4 PAGE 180 disabled , 下方文字透明度也 降低為20%

    highlight狀態代表已啟動該功能 通話中功能 使用者可於通話中操作之功能 , 無法使用之功能會是 Disa- ble 之狀態 , 並且會隱藏下方的文字 。 可以處於 「啟動」 狀態的功能 , 像是擴音或靜音 , 啟動後的樣 式是按鈕的highlight狀態 。 預設狀態 預設狀態下 , 擴音與靜音為關閉 、 免持裝置開關在沒有連接 耳機前是Disable , 連接後預設為開啟(highlight)狀態 。
  131. XONE UX Guideline V4 PAGE 181 可通話結束後 結束通話鍵會切換成disable狀態 , 並顯示已通話之時間

    。 通話結束後的畫面會停留2秒 , 然後切換至通話前的畫面 。 呈現disable狀態
  132. XONE UX Guideline V4 PAGE 184 活動日曆機制 Pixate 原型 (iPhone

    5 規格) 頂部年份月份標題 回到當月 頂部年份月份標題 切換月份時標題會切換到目前正在瀏覽的月份 。 詳細動畫請參考線上原形 。 回到當月 右上角的 「回到當月」 只會於使用者在瀏覽非當月份食材會 出現 。 按下後會回到今天日期的月份 。 詳細動畫請參考線上原形 。 日曆高度 日曆高度會根據月份週數 (通常會有 5-6 周) 做變化 。 詳細動畫請參考線上原形 。 上下滑動月份 切換月份是以上下滑動的方式 。 滑動的單位是以一個月份為單位 。 詳細動畫請參考線上原形 。
  133. XONE UX Guideline V4 PAGE 189 設定頁面操作機制 清除快取 當按下 「清除快取」

    按鈕 , 會再以跳出視窗做警示 。 清除完成後該按鈕會切換為 Disabled 狀態 。 Xr 值記錄 Xr 值記錄資料從上至下是由新到舊的規則排序 。 點擊右上方的 「?」 會直接開啟 FAQ 中關於 Xr 值說明的部 份 。 另外 , 資料會以月份當做群組分類的條件 , 屬於可以收合的 群組列表 。 通話分鐘數記錄 通話分鐘數記錄中也會顯示扣除點數的資訊 。 剩餘通話分鐘數/點數會在進入此頁面時更新 。 會增加或是扣除分鐘數的情況整理如下表 。 另外 , 資料是以單日當做群組分類的條件 , 屬於可以收合的 群組列表 。 修改暱稱 修改暱稱是使用跳出視窗的機制 。 視窗出現時自動 Focus 在輸入欄並開啟鍵盤 。 輸入暱稱欄位旁可計算以輸入的字元數 , 當被禁止的字元輸 入到欄位中 , 或是任何其他不符合欄位限制的情況出現時 , 「 儲存」 按鈕會呈現 Disabled 的狀態 。 表示剩餘的字元 清除欄位 欄位不符限制則變成 Disabled Pixate 原型 (iPhone 5 規格) Marvel 原型 (iPhone 5 規格) 點我查看 流程圖
  134. XONE UX Guideline V4 PAGE 193 個人頁面操作機制 直接關注 在瀏覽記錄中未關注頻道可以直接關注 。

    離線閱讀 稍後再讀的文章可以離線閱讀 。 文章由新到舊排序 。 瀏覽記錄文章類型 (增加 icon 說明) 分為 「喜歡過的」 、 「分享過的」 、 「觀看過的」 。 「觀看過的」 不與 「喜歡過的」 、 「分享過的」 重複 。 瀏覽記錄文章排序 依照事件發生的時間由新到舊排序 。 Pixate 原型 (iPhone 5 規格) 直接關注頻道 觀看過的 喜歡過的 分享過的 瀏覽記錄類型 移除稍後再讀 我的頁面功能 提供用戶瀏覽自己在 XONE 上的活動紀錄 , 包括稍後再讀( 或我的收藏) 、 瀏覽紀錄 、 喜歡的內容 、 分享過的內容 , 日後可 增加留言過的內容 。 此外也提供用戶編輯個人資料的捷徑 。 點我查看 流程圖 狀態 顯示圖檔名 觀看過的 v4_ic_global_viewed_tiny 分享過的 v4_ic_global_shared_tiny 喜歡過的 v4_ic_global_liked_tiny 分享並喜歡過的 v4_ic_global_liked_tiny + v4_ic_ global_shared_tiny
  135. XONE UX Guideline V4 PAGE 194 會員身分頁面操作機制 會員身分頁面顯示邏輯 僅針對台灣用戶(以註冊之電話國碼為判斷依據) 顯示這個

    頁面 , 其他地區用戶則照原先樣式顯示 。 掃描條碼功能可讓用戶於實體店家內掃描條碼以取得優惠 。 關於 Xoney 細節頁的入口 VIP 會員需顯示 Xoney 細節頁面的入口 , 關於這個頁面的細 節 , 請參考 "Xr 值記錄" on page 106 顯示用戶 id 條碼 開啟條碼掃瞄器 開啟會員升級網頁 (網頁尚未完成) 進入容易+頻道 進入Xoney 細節頁
  136. XONE UX Guideline V4 PAGE 196 用戶頁面操作機制 (Pending) 直接關注 可以直接關注聯絡人

    。 關注後首頁會顯示該聯絡人喜歡或分享過的文章 。 顯示的內容卡片類別 用戶頁顯示該聯絡人喜歡或分享過的文章 。 進入點 進入點 : 通訊錄>展開聯絡人>點擊聯絡人頭像 個人頁 (iPhone 5 規格) 用戶頁功能定義 供用戶瀏覽其他用戶的公開活動紀錄 , 包括喜歡的內容 、 分 享過的內容 。 可以關注用戶 , 以接收用戶的活動紀錄 , 並作為 內容投放邏輯的參考 。
  137. XONE UX Guideline V4 PAGE 197 更多操作機制 Marvel 原型 (iPhone

    5 規格) 動態顯示已邀請的人數 邀請的右側需顯示已邀請的人數 / 可邀請人數 。 直接參考原型 更多操作機制請點我看原型 。 聯絡客服 按下聯絡客服會呼叫內建的郵件寄信功能 。 收件人為 : [email protected] 主旨 : more_contactus_email_title 內文 : more_contactus_email_content 點我查看 流程圖 已邀請 可邀請
  138. XONE UX Guideline V4 PAGE 198 通知操作機制 Marvel 原型 (iPhone

    5 規格) 通知圓點 有新通知時底部通知按鈕旁會出現圓點 , 點擊底部通知按鈕 後 , 通知的圓點即消失 , 不需把所有通知設為已讀狀態 。 已讀 / 未讀 已讀的通知呈現 Disable 的樣式 , 但還是可以點擊查看 。 顯示資料件數 通知頁一開始只顯示 20 筆資料 , 當使用者往下捲到底時再 載入下 20 筆資料 , 依此類推 。 點我查看 流程圖 有通知圓點 無通知圓點 已讀的通知 未讀的通知