2020 APP UX/UI DESIGN
POCKET MOVIE
打造專屬於你的影視圈
Design by Nayamunai
產品背景 目標族群
人物誌 情境故事 使用者旅程 競品分析 情緒版 心智圖
目錄 Catalogue
產品介紹
開啟頁面展示
商標設計
登入
視覺規範
探索(4)
組件設計
推薦(2) 嗑影 個人 其他頁面
產品背景
Product Design Background
電影 是現代人最平價的餘興節目
用最短的時間 濃縮一個故事的精華 影劇作品可以是百無聊賴的消遣 也可以是探索心靈的寄託、 沉澱自我的過程。 本APP希望能將這些人們喜愛的 影視資訊整合 並成為影劇交流的空間 透過彼此討論及相互推薦 共同創造更好的影視環境。
目標族群 Target Groups
性別
年齡 功能 訴求
男女不拘
/16y~45y /任何關注影視的年齡層 便利
收藏
品味
團體
快速收納喜愛的電影 以便捷的方式查詢上映的電影 推撥各類型電影片單 可加入取向類型電影討論群組 打造自己的影視圈
人物誌
APP DESIGN
PERSONA
行為
行為
行為
需求
需求
需求
情境故事法
APP DESIGN
Scenario approach
想趁著連假與好久不見的朋友看電影 自己最喜歡看的電影就是恐怖片了
Linda 21歲 學生
無奈自己挑片的眼光差、看影評又怕暴雷 所以拜託同行的友人先行挑選 到了約定日的前一天才發現附近戲院沒有上映 只好另選它片。
使用者旅程
APP DESIGN
User Journey Map
階段 接觸點 情緒 解決
連假前一周 約朋友看電影
連假前天
看電影
看預告選片 爬文被劇透 才發現附近的 影廳沒上映
院線預告觀看 不暴雷短評
看電影
與朋友談論心得
閱後
在社交媒體抒發心得
重新選片
院線上映查詢 (開啟位置匹配)
觀影類型興趣圈
書寫閱後感言
長篇影評查看
閱後電影標記
競品分析
APP DESIGN
Conpetitive Analysis 毒舌電影
豆瓣
巴賽電影
電影管家
影視社區
影書音資料庫
影視內容平台
吐槽影視備忘錄
討論群數少
有大量的評分樣本
沒有分類搜索
內容較少 訊息雜亂
介面視覺
配色鮮明統一 按鈕轉換突兀
配色多 畫面豐富
乾淨、配色典雅 過場動畫簡單流暢
ICON有一致性
關鍵差異
完整的品牌視覺設計
完善的影視資料
可保存瀏覽紀錄
有上映提醒功能
品牌配色 產品定位 功能優缺點
情緒版
APP DESIGN
Mood board
根據在電影院內的觀影體驗，發想出以下關鍵字 並將其可視化，以利為設計方向定下基礎。
昏暗
群體
爆米花
分享
心智圖 Mind Map
利用心智圖發想 逐步建構出功能地圖。
APP DESIGN
產品介紹
APP DESIGN
Product Introduction
標語 打造專屬於你的影視圈
功能 興趣分類
討論群
影展資訊推廣
閱後電影標記
熱門榜單
商標設計
APP DESIGN
Logo Design
LOGO設計概念 取電影(MOVIE)開頭M的字母跟口袋的結合
選色概念 寓意為將感興趣的電影 收納進口袋名單中
暗藍色代表戲院開演時的昏暗環境 明亮黃代表螢幕映入戲院的光
視覺規範
APP DESIGN
Visual Specifications 色彩規範 主色
字體顏色
#FFEE00
#002140
#000000
#4D4D4D
#707070
#D5D4D4
輔色
#00196E
#FFD500
#BF2604
#D96704
#4D4D4D
#707070
#D5D4D4
字型規範 蘋方體
/部份英文及數字
Segoe UI
Medium/Regular/Light
26pt 24pt 22pt 16pt
14pt
12pt
11pt
18pt 10pt
Playfair Display
Blod/Regular
20pt
10pt
Blod
24pt
組件設計
APP DESIGN
Icon Design
Tab bar
探索
嗑影
推薦
我
探索
嗑影
推薦
我
Tab bar的Icon是最能代表整體ICON設計風格的基礎
故設計了兩款不同風格的Icon，最後則選定了配色重的風格作為設計
Navigation Bar
Other Icons
啟動頁展示
APP DESIGN
Startup Page
深藍=戲院內昏暗的場景 亮黃色=電影放映 主要是依此為情境的發想 --暗色底圖配亮色Logo利用顏色的反差增加印象 Logo向右傾斜帶出俏皮可愛感 星型的符號則代表App最主要的電影評分功能
登入頁展示
APP DESIGN
Login Page
登入流程 填入帳號密碼後亮起綠燈 代表所填資訊無誤 按下下方圓圈按鈕亮起黃燈 即代表登入成功
登入介面 帳號及密碼選用人頭及鑰匙孔 的圖樣，讓人一看就明瞭。 考慮到現代人對於隱私的重視 故增加了略過註冊的功能 但相對的能享受的功能就有限。 同時支援第三方登入的功能 增加選擇性。
探索頁面設計
APP DESIGN
Discover Page Design
探索 院線及熱門電視劇的榜單頁面 即時熱映影視的評分及簡短介紹 和即將放映的影視預告。
日簽 類似於每日打卡的功能 每日分享電影海報及對白 也提供下載、轉發分享的服務 分享電影；融入生活。
探索頁面設計
APP DESIGN
Discover Page Design
透過查看場次 即可瀏覽附近上映的戲院及場次
透過定位搜索便可自動統合院線資訊
院線影訊 可開啟定位 搜索附近戲院上映的電影 就算是連鎖的影院，上映的電影也不盡相同 透過資訊整合可從而解決觀眾的困擾
探索頁面設計
APP DESIGN
Discover Page Design
分類 透過興趣分類 匹配相關影視作品
搜索 查詢感興趣的影視評分 也可查詢導演、演員的基本資訊 近期熱門的搜索詞會被列為熱門關鍵字
探索頁面設計
APP DESIGN
Discover Page Design
電影介紹 除了基本的劇情簡介、演員表外 還有評分、觀看分級、片長...等等。 還可將喜愛的影視作品收藏 或將興趣影視納入口袋名單
限制短評字數 盡量降低暴雷的機率
推薦頁面設計
APP DESIGN
Recommend Page Design
個人收藏片單快捷鍵 即時收藏觀看，讓好片不漏網。
每周末推薦 影人私房觀影指南
推薦 集結各類熱門影片 影友熱推興趣片單 省去搜索繁複的過程 直擊最愛的興趣影劇名單
推薦頁面設計
APP DESIGN
Recommend Page Design
片單 興趣片單介面 可收藏；可分享
影展或影視活動的推撥BANNER
資訊 影視相關新聞 提供最新影視圈資訊
嗑影頁面設計
APP DESIGN
Popcorn Page Design
可發文或自行開啟話題、興趣圈
興趣圈 興趣影視圈 透過類型同好彼此的交流討論 創造更優質的影視討論圈環境 透過熱門影評相互的討論及關注 促進興趣圈的發展
展開
發文 組建興趣圈 開啟話題 收回
個人頁面設計
APP DESIGN
MyPage Design
會員基本資料更改 夜間模式切換 設定
問題反饋 關於我們 登出
收藏
活動
短評
訊息
個人頁面以這四種為主要功能選項 收藏影劇 影展或其他影視活動消息
個人主頁 收藏的電影清單及片單 都會集結到個人主頁上 關注的影人、粉絲數量 和所加入的興趣圈也會顯示於此頁面。
個人過往短評的回覆及更新 興趣圈的訊息或個人訊息的收發
其他頁面設計
APP APP DESIGN DESIGN
Other Page Design
錯誤頁 以爆米花撒落的圖樣 來表達錯誤頁的狀態 主要出現的場合為 未能查找到相關作品 或未連接網路時的資訊
Loading 利用影盤旋轉的意象 宛如等待電影放映時的場井 故將此設計為等待頁面的狀態
結尾 End
面
頁 總
示
展 覽 APP DESIGN