Page 1

Love Pet's A Social Network for Your Pets

寵愛於你.點綴生活樂趣 交友聊天 x 分享生活 x 飼寵新知  報告人:吳珊繻 / 羊萃茹 / 楊純儀


1

目錄 CONTENTS

2

設計源起 前言背景 | 動機目的 | 用戶調查分析

設計發展策略 競品分析 | SWOT分析| 目標對象| 設計原則

3

創作設計說明

4

設計規範展示

5

情緒版 | 品牌形象 | 核心價值| 產品說明

LOGO發想心智圖∣LOGO手稿∣圖標LOGO | 字型與色彩計畫 | UI KIT| 功能地圖∣流程圖 | 線框圖∣頁面流程 | 頁面標注∣視覺圖稿 | 互動原型圖

製作團隊 工作進度∣幕後花絮 | 職責分配 | 心得感想


PART

前言背景 | 動機目的 | 用戶調查分析


設計源起∣設計發展策略∣創作設計說明∣設計規範展示∣製作團隊

 前言背景 寵物逐漸被當成家人一般對待,然而在生活中可能碰到一些食衣住食 育樂的問題,如果能有一個平台匯整與寵物的相關訊息和提供交流服 務,就能讓飼主不用到處爬文找資料,還能找到同好夥伴,省下時間 能陪伴自己的愛寵……

 動機目的 我們希望所提供的平台能減少飼主找答案的時間,更能擴大自己交友圈 和展現寵物生活的交流中心


設計源起∣設計發展策略∣創作設計說明∣設計規範展示∣製作團隊

点击此处添加标题

 Persona

Momo∣35Y∣經理人 終結單身生活∣養有2狗1貓  行為特徵 . 期望能找到也喜歡毛孩的另一半 . 事業有成卻是個腐女,愛宅在家陪 伴毛小孩玩耍 . 會照顧浪浪,有固定餵養區域

 需求與目的 . 想結識更多同好,聊毛孩與出遊

Wawa∣28Y∣櫃姐 開朗外向愛交朋友∣超級貓奴

. 希望在36歲前終結單身,找到真愛 . 了解更多毛小孩資訊,希望幫浪浪 們找到新家

Yang∣20Y∣寵物美容師 自營寵物店∣養有2狗

 行為特徵

 行為特徵

. 工作繁忙,重視與寵物的休閒時光

. 喜歡上網交友,尋求心靈安慰

. 常辦貓聚,時常為了聚會地點煩腦

. 交友軟體的重度使用者

. 期待認識貓友能一起分享育貓話題

. 早晚會在自家社區遛狗

 需求與目的

 需求與目的

. 在家時間少,一直想幫愛貓找同伴

. 想尋找愛毛小孩的伴侶

. 常會帶愛起出遊,希望有懶人包來

. 脫離魯宅一族、填補心靈空虛

減少規劃行程的時間 . 愛買寵物零食、玩具,希望能有同 好來一起分享貓奴生活與優惠資訊

. 幫寵物店招攬新客戶


設計源起∣設計發展策略∣創作設計說明∣設計規範展示∣製作團隊

 Scenario 标题数字等都可以通过点击和重新输

标题数字等都可以通过点击和重新输

入进行更改,顶部“开始”面板中可 舉辦貓聚,需規劃行程 以对字体、字号、颜色等进行修改。 以对字体、字号、颜色等进行修改。 規劃行程需要 與尋找能帶寵物同行的 多方搜集資料 場所 入进行更改,顶部“开始”面板中可

開朗外向愛交朋友∣超級貓奴

物 通勤的捷運上

手機

Story

人 Wawa∣28Y∣櫃姐

Wawa愛參加貓聚,以往都是跟團貓友們排定好的行程…這次自已當起了 貓聚主辦人,想要呼朋引伴來個二天一夜的聚會。 因工作繁忙,能規劃活動的時間不多,只能在通勤路途中上網爬文,但 火紅打卡景點或餐廳又不歡迎寵物進入,難得出遊不想因行程安排不妥 而擾亂了旅遊的興緻,某天下班回家途中,趁著搭車空擋在規劃行程時 又卡彈了,她一直想著,為什麼就沒有一個地方匯集了全台愛寵行程

懶人包可以參考使用咧……?


設計源起∣設計發展策略∣創作設計說明∣設計規範展示∣製作團隊

 A.E.I.O.U 【想要尋找寵物友善場所】 行動 Activity 環境 Environments 互動 Interactions 物件 Objects 使用者 Users

• 很難在一個網站上找到適合寵物聚會的景點、餐廳和民宿的 全部資訊

• 通勤的路上

• 上網看一堆部落客分享的資訊,效果不好且資料零散

• 將蒐尋到的資料匯整成筆記,既費工費時

• 被零散訊息淹沒的寵聚主辦人


PART

競品分析 | SWOT分析| 目標對象| 設計原則


設計源起∣設計發展策略∣創作設計說明∣設計規範展示∣製作團隊

 C.P.A APP名稱

PetNfans 優點 .視覺俏皮活潑、配色鮮明可愛插畫風 .提供中文與英文語系可切換 .可透過FB、GOOGLE帳號快速註冊

缺點 .選單不明確,無法輕易了解內容選項 .設定過多,過於複雜


設計源起∣設計發展策略∣創作設計說明∣設計規範展示∣製作團隊

 C.P.A APP名稱

Match dog 優點 .照片多畫質優 . 快速篩選選單設計使用容易 . 首頁有訊息盒子提示新訊息

缺點 . 簡潔紅黑白色系,視覺上較單調 . APP讀取超慢、註冊程序複雜 .資訊內容功能資料極少 .沒內容不應顯示,會導致訊息雜亂


設計源起∣設計發展策略∣創作設計說明∣設計規範展示∣製作團隊

 SWOT

S 資訊:分類明確,訊息集中 操作:直覺易上手 資安:重視使用者資安與隱密性

W 需有人工審核確保資料正確性

O 智慧型與平版手機使用率普及 建立會員分級制度,讓user更 樂於分享資訊

T 交友型社交app太多, 比較容易被混淆爛用


設計源起∣設計發展策略∣創作設計說明∣設計規範展示∣製作團隊

 目標對象

S 總 結

市場區隔

目標選擇

男女不拘、18 歲以上

愛寵物的男女,喜歡交朋友、樂

收入23K以上

於分享,對生活品質有要求。

喜歡交朋友、有耐心、富有愛心 有寵物飼養疑問等需求

以寵物社交、服務為主的app

品牌定位

與同好線上交流 ,隨時能以貓狗

網羅全台寵物生活育樂資訊,

會友,為您與愛寵的生活帶來更

在LOVE PETS一起找到愛寵物的

多便捷和樂趣。

同好!

T P


設計源起∣設計發展策略∣創作設計說明∣設計規範展示∣製作團隊

 設計原則:歡樂.活力.溫馨

設計重心在其

友好性、易用性、舒適性 界面設計遵循以下原則

. 統一的圖標設計風格

. 資訊頁內容無過度裝飾,注重界面流暢感 . 可控的界面配色、佈局層次分明 . 多功能一站式服務


PART

情緒版 | 品牌形象 | 核心價值| 產品說明


設計源起∣設計發展策略∣創作設計說明∣設計規範展示∣製作團隊

 Mood board

Love Pet’s


設計源起∣設計發展策略∣創作設計說明∣設計規範展示∣製作團隊

 品牌形象 & 核心價值 交友聊天 x 分享生活 x 飼寵新知

交流 讓喜愛萌寵的人們聚集, 透過線上交談→線下互動, 擴大自己的交友圈

同樂

分享

滿足現代人追求與眾不同

整合樂活相關資訊,提供

炫耀的心態,提供曬萌寵

友善寵物景點、餐廳與民

專可放影片與照片

宿訊息,規劃出遊行程省 時又省力


設計源起∣設計發展策略∣創作設計說明∣設計規範展示∣製作團隊

 About Product

A Social Network for Your Pets

寵愛於你.點綴生活樂趣 交友聊天 x 分享生活 x 飼寵新知

『 Love Pet‘s 』 是一款以寵物社交、服務為主的app。 為寵物建立獨特的成長日誌、即時掌握友善店家資訊、與 同好線上交流!隨時能以貓狗會友,為您與愛寵的生活帶 來更多便捷和樂趣。


PART

LOGO發想心智圖∣LOGO手稿∣圖標LOGO| 字型與色彩計畫 | UI KIT| 功能地圖∣流程圖 | 線框圖∣頁面流程 | 頁面標注∣視覺圖稿 | 互動原型圖


設計源起∣設計發展策略∣創作設計說明∣設計規範展示∣製作團隊

 Logo發想心智圖


設計源起∣設計發展策略∣創作設計說明∣設計規範展示∣製作團隊

 LOGO 手稿


設計源起∣設計發展策略∣創作設計說明∣設計規範展示∣製作團隊

 LOGO設計理念 交流、情感、互動、剪影、溫馨、社交

=

+

設 計 理 念 採用暖色系配色 呈現人與寵物互動般的溫馨感 以雙手托住毛孩 如同將其捧在掌心般地呵護對待 詮釋出人與毛孩間密不可分的情感

+


設計源起∣設計發展策略∣創作設計說明∣設計規範展示∣製作團隊

 Typographic & Color

使用字體粗細 小大和顏色做區分突顯重要訊息

主色使用暖色系 展現溫馨、和協,讓用戶使用時有愉悦感


設計源起∣設計發展策略∣創作設計說明∣設計規範展示∣製作團隊

 UI KIT 基本上以線性圖標繪製為主,給用戶乾淨清爽感,在相同區域的圖標之粗細、圓角、質感等都保持一致性 52*52

45*45

28*28

16*16


設計源起∣設計發展策略∣創作設計說明∣設計規範展示∣製作團隊

 Functional Map


設計源起∣設計發展策略∣創作設計說明∣設計規範展示∣製作團隊

 FLOW CHART


設計源起∣設計發展策略∣創作設計說明∣設計規範展示∣製作團隊

 UI FLOW + 線框圖


設計源起∣設計發展策略∣創作設計說明∣設計規範展示∣製作團隊

 頁面標註


設計源起∣設計發展策略∣創作設計說明∣設計規範展示∣製作團隊

Mockup 介面展示


設計源起∣設計發展策略∣創作設計說明∣設計規範展示∣製作團隊

引導頁 + 登入頁 社群綁定 x 快速登入 情境式畫面導入 與簡易會員註冊機制 引領進入寵物與你的專屬小天地


個人專區 日誌天地 x 清楚分類


設計源起∣設計發展策略∣創作設計說明∣設計規範展示∣製作團隊

友善景點 x 帶上毛孩樂活出遊 毛孩樂活行 網羅全台 餐廳、住宿、景點 等友善環境資訊 明確的分類與便捷的搜尋機制 讓您能快速找到喜愛場所並加入收藏 是您規劃出遊不可或缺的小幫手


設計源起∣設計發展策略∣創作設計說明∣設計規範展示∣製作團隊

分享萌寵 x 展現生活中的小確幸 毛孩伸展台 採瀑布流方式瀏覽,輕鬆補捉並分享生活的分 秒瞬間!可發佈相片和影片,並同步保存在個 人檔案的毛孩日誌中,盡情紀錄您與萌寵每日 的生活點滴。


設計源起∣設計發展策略∣創作設計說明∣設計規範展示∣製作團隊

同好聚集 x 終結孤單 毛孩搖尾巴 【附近動態】 分享生活大小事,找到目前能一起見面的對象

【快速配對】 GPS定位,右滑找到附近想交友聊天的對象

【聊天群組】 自創話題群組,支援文字/貼圖/圖片傳送,暢聊無設限


設計源起∣設計發展策略∣創作設計說明∣設計規範展示∣製作團隊

寵物領養、走失 x 線上快速號召 毛孩緊急令 【走失】 當心愛的毛孩走失,毛爸媽們總是心急如焚!寵 物失蹤協尋機制提供散佈走失訊息的管道,借力 使力~讓love pets裡廣大愛心網友一同尋找愛寵!

【領養】 讓平台會員可張貼愛心領養訊息.並提供民間動 保團體最即時的犬、貓認養資訊,鼓勵大家以認 養代替購買,幫助毛孩找到溫暖的家


設計源起∣設計發展策略∣創作設計說明∣設計規範展示∣製作團隊

同步更新 x 即時資訊不漏接 毛孩報馬仔 【合作店家優惠】 合作店家陸續新增中,提供最優惠的愛寵週邊商 品資訊,輕鬆當個小資採購族

【寵物快報/展覽資訊】 強檔精選活動,大至世貿寵物展,小至友餐場所 的私人揪團寵聚,通通網羅為您呈現

【政府資訊快報】 串連各縣市政府動保處資訊,一起守護關於毛孩 的大小事


設計源起∣設計發展策略∣創作設計說明∣設計規範展示∣製作團隊

 APP UI Design


設計源起∣設計發展策略∣創作設計說明∣設計規範展示∣製作團隊

 APP UI Design


設計源起∣設計發展策略∣創作設計說明∣設計規範展示∣製作團隊

 行銷宣傳


PART

工作進度∣幕後花絮 | 職責分配 | 心得感想


設計源起∣設計發展策略∣創作設計說明∣設計規範展示∣製作團隊

 工作進度 手繪草圖 Wireframe App主題發想

UI Flow、Flow Charts

Logo發想設計

UI kit設計

User Story

視覺圖稿製作

創意發想

App畫面繪製

專題發表

9/13~9/15

9/25~10/3

10/12

9/17~9/22

10/4~10/11

App 企劃

APP功能展示

競品分析

Protoype 原型製作

SWOT分析

簡報製作

STP策略分析

FB建置 (設計、po文)

功能架構規劃

APP宣傳海報設計

素材蒐集

作品集整理: Marvel、issuu


設計源起∣設計發展策略∣創作設計說明∣設計規範展示∣製作團隊

羊萃茹 / 設計手

羅仕浩 / 掌舵手

對於UI設計原先沒有概念

嗯~我來看看

經過密集的課程訓練下來 一起完成了這個專題作品 也在製作中學習到很多 ❤

吳珊繻 / 企劃手

楊純儀 / 搜集手

從創意發想開始

原本對視覺介面設計零基礎

一步步在老師的指導下努力

在老師指導與團隊合作下

看到App作品逐漸成型→成果發表 這是很大成就感

製作出這個專題作品 過程中也學習到很多自己完全沒接 觸的事情


Love Pet's 交友聊天 x 分享生活 x 飼寵新知 A Social Network for Your Pets

帶著您的寵物 一起來交朋友吧

Love pets  

A Social Network for Your Pets

Love pets  

A Social Network for Your Pets

Advertisement