TRIPTALK DESIGN PROCESS

NYU CLOUD EXPO' 2012

03

As you going to plan a trip for our vacation, searching forthe information through the Internet or asking for friends’ advices is the most usual way. But how we summarize the useful traveling information in a more efficient way?

Now, “TripTalk” can help travelers search and sort the nearby scenic spots’ information! They can find the place rapidly.longi tudinal operating map relates you with the neighboring area. Horizontally “timeline” operating mode helps you scheduling the plans on the time axis. You can map out the journey easily! Most attractive, you can share your plans to your friends by “TripTalk”, they can give suggestions and revise to your plan instantly!

TripTalk

規劃出遊的資訊通常來自網路及朋友的推薦，這些資訊

要如何有效率的整合而能派得上用場呢?

Tri pTalk幫助旅行者搜尋鄰近景點並分類，旅行者能快速

找到想要去的景點；直向的Map介面告訴你與鄰近景點

的關係，橫向操作的 timeline模式則能將景點快速的在

時間軸上規劃，輕鬆的完成行程準備；最重要的是能將

行程分享給多位朋友，朋友幫忙修改行程並隨時提供建

議；多人參與討論，讓行程更豐富有趣！

h t t p : / / Tr i p Ta l k . c o m /

Share the trip, share the saying

02

官佩萱林奕岑張子文李泓其張秉鈞羅子為

NYU CLOUD EXPO' 2012 02 TripTalk

04

12

快速搜尋景點並分類搜尋結果；輸

入目的地搜尋鄰近景點，並將景點

分成吃飯、住宿、經典景點及歷史

足跡四類，幫助旅行者更快速的找

到需要的資訊，加入旅程的清單。

Map1

快速儲存規劃好的行程，並分享給

多位朋友，讓多位朋友可以同步在

行程中加入意見。

Trip List2

3

Edit the trip橫向的時間行程模式幫助旅

行者快速將清單中的選項規

劃到時間軸中，同時可加入

行程註解與建議或是修改行

程順序，旅行者和友人可直

接在這個平台上互動，讓旅

途更豐富更有趣。

3

02


03

【Brain Storming 】

由三個大方向：

社會、經濟、自然搜尋相關的事件與議題，發

散式的發想可以得到比較多元且廣泛的結果。

【發散式發想】

每個人發想數個議題，再將所有結果匯集起

來，討論每個議題和人的相關性及發展的可能

性，分類、排序，歸納出最適合的10個議題。

【Idea 收斂】

從社會、經濟、自然共30個議題中，

進一步列出可能性與發展模式，並統

整並票選出適合的8個議題。

5 . 圖像化預知身材

6 . 二手書交換平台

7 . 失智老人認知輔助

8 . 我愛做體操

step : Topic Search1 主題發想與收斂

03

1 . 家庭溝通平台

2 . 音樂語言治療

3 . 旅遊行程抱佛腳

4 . 實材控管料理推薦

1


0404

使用者→廣泛的找出需求此類app的使用者，進一步可以設定使用情境與需求。

需求→與使用者相輔相成，由使用對象推斷使用者的需求。

做什麼→因應使用者的需求，app可以用哪些手法解決這些問題。

場景→ app使用的情境。

差異性→歸納現有app功能、列出現有app尚未做到的功能或尚存在的問題。

step : Mind Mapping

最後選定旅遊行程抱佛腳為app主題。

並透過使用者/差異性/需求/使用場合

等面向分析此主題，繪製Mind Map。

組員共同mind mapping，app 有初步的定位。2

1 2

2


03

【訪問對象】

對象主要分為三類：學生/ 商務人士

/ 家庭。針對訪問對象列出題目，在

訪問對象分享經驗時，視情況加入問

題詢問使用者的意見。

【訪問技巧】

1 . 問題是開放式的，盡量避免是非題、

選擇題、或是引導式的問題。

2 . 一開始暖身多閒聊一些是不錯的方式

，可以建立信任基礎、逐漸打開心房。

3 . 多問為什麼，盡量能夠挖掘到背後真

正的需求是什麼。

step : Persona3


04

step : User Study

【character mapping 】整理出目標使用者的特色，也可以說是我們Persona的個性。

Persona：外向/喜歡旅遊/喜好分享/有效率的整裡旅遊行程的使

用者。確認目標使用者後可以比較明確的設定使用情境，進一步歸

納app的核心概念及功能。

4


03

【Scenario 】龍：官佩萱，我禮拜六要去嘉義，可以去哪?

官：唉呀，我那天不在嘉義欸。

龍：那你直接跟我說哪好玩，什麼好吃?

官：你要先租車，中午到的話可以去吃大同火雞肉

飯，然後去公園走一走，然後…

龍：欸! 你講這麼多我聽不懂啦!

官：我用where can i go 直接幫你規劃啦!

設定最好的使用情境，歸納出最重要的核心概念。

Concept

使用情境與概念初步設定

【Concept 】朋友口頭推薦的行程太模糊，不清楚。

where can i go 運用你的社交圈，讓朋

友替你規劃一趟他覺得好玩且值得推薦

給你的行程。

1 . 讓你走一套朋友推薦的行程。

2 . 我問路，你(朋友)指路。

3 . 結合地圖不迷路。

【5W1H 】WHO ─ 喜歡旅遊以及分享的使用者

WHERE ─ ANYWHERE

WHEN ─ 旅遊前的準備/ 旅遊當下的搜尋

WHAT ─ 尋求朋友幫忙規畫行程

WHY ─ 隔空問路霧煞煞

HOW ─ 朋友幫我填行程

5step :

5


04

1. 景點推薦（朋友打卡＋ google map）。

2. 推薦分類（自己/吃/住/玩/al l）。

3. 自己增加景點。

4. 在目前所在位置設定半徑，超過半徑的只有top-

ten景點才可以顯示，使用者可調整半徑大小。

5. 搜尋景點。

6. 在地圖下方顯示時間軸。

核心功能彙整

7. 可直接將景點加入時間軸做編輯。

8. 可將行程草稿寄給朋友讓朋友加入額外標記。

9. 點開單一景點可顯示詳細資訊

（照片、留言、建議）。

10. 在地圖上顯示行程（與導航）。

11. 記錄旅遊的花費。

12. 使用者可直接加入時間提醒。

step : Scenario使用情境

【情境故事法】

作法：預設目標族群一天可能遇到的情境，

將每個情況對應一個app的功能。

6目的：

1.檢視app功能是否能真正解決遇到的狀況。

2.依據情境的不同修正app功能。

3.每個人發想到的情境可能不盡相同，可能想出

之前沒有想到的情境，可以發展出其他功能。

5


03


1 2 3 4

5 6 7 8

step : Where can I go功能頁面初步架構

好友足跡玩透透

旅遊資訊來自好友推薦與

網路知名景點，並提供景

點熱門TOP10。

臨近景點任逍遙

根據使用者輸入的交通工

具和設定移動的半徑，推

薦時間內可達的景點。

搜尋分類效率高

針對琳琅滿目的景點，提

供分類過濾和快速搜尋的

功能，讓你更方便閱讀並

找到目的地。

私房好物報你知

建立並分享你生活中的私

房景點，讓你的朋友有更

豐富的選擇。

景點輕鬆便行程

地圖景點可以拖曳至時間

軸讓你清楚且輕鬆的編輯

行程。

專屬行程導覽員

提供每一個景點的詳細

資訊並附有旅程導航及

備忘稿。

朋友指點更道地

將行程草稿發送給朋

友，讓朋友為你增加或

修改，變成道地且個人

化的行程。

貼身秘書不出包

提供預算規劃，隨時記錄

花費狀況，另外可針對時

間點設定備忘提醒。

7


04


step : Trip Talk介面修改/ Wireframe

8


03

介面修改/ Wireframe

M a p o u t 主要設計概念讓旅行

者可以在短時間內規劃一趟

行程，並即時將行程發送給

在地的朋友，讓朋友幫忙規

劃行程，我們講主軸是 " 規

劃行程 "，因此將 a p p 命名為

mapout，意思是規劃、安排。


04


03

{ 情境影片 }


04


03

台科大工商業設計/ 林奕岑

U X、G U I 設計、影片製作及P r o j e c t Ma n a g e r

【User Experiences】

了解使用者需求在初期，確切的了解與分

析使用者的回饋，在訪談內容當中找到真

正的需求作概念的延伸。

1. 架構分析

試著和使用者與資工人員溝通，確認介面的

每一個動作與流程都符合一般使用習性。

2. 介面流程確認

詳細介面流程圖繪製，並考量各種使用上可

能的錯誤，避免它們發生。

【UI Design】1. 設計風格

在設計概念產出之後，與另一UI 設計組

員決定app 的整體風格與美感元素。

2. 靜態UI 設計

使用A d o b e 系列的工具( P h o t o s h o p /

Illustrator) 設計每個介面細節，規模

組化各項UI元件介面。

3. 互動UI 發想

美化UI 之後便是介面的互動設計發想，

實現相對應的視覺效果，決定每個動作的

回饋是如何。

{設計過程分享 } AA

01


04

B

台科大工商業設計/ 官佩萱

U X、G U I 設計、影片製作及P r o j e c t Ma n a g e r

【User Experiences】1. 找到正確的切入點

在使用者訪談當中用開放式的問答，得到較廣泛

的回應；順著使用者分享的過程，插入跟app較

貼近的問題，得到真正對app有幫助建議。

2. 挖掘使用者潛在需求

發現使用者沒有察覺的問題，創造需求，開發新

的功能讓使用者印象深刻。

3. 介面流程規劃與討論

折衷資工團隊邏輯性的思考模式及設計團隊偏向

人性化的思考模式，一起討論是否符合使用者的

直覺反應或是是否達到引導使用者的效果。

【UI Design】1. 設計風格

與另一位組員共同討論app 整體架構，做出初

步的版本，再由另一位UI組員統整整體風格。

2. 靜態UI設計

i c on發想，並繪製成向量檔，再嘗試特效 ( P S )

再由另一位UI統整風格。

【感想】與資工同學一起發想概念和發展app功能是我印象最深也學到最多的部分，設計端較能掌握與使用者

相關的切入點，資工的同學則能夠有邏輯的評估合理性和適合操作的手法，起初花了不少時間平衡兩

邊不一樣的思考模式，但後期漸漸習慣且可以找到衡量的平衡點，整體運作起來效果是加乘的。

02


03

D台大資訊工程系/ 張秉鈞

C o d i n g 統整與主要功能架


C01

【Programming】

因為這次所要開發的 i O S 專案非常的複

雜，所以我們希望能夠使用資工系所學到

的設計模式 (Des ign Pattern) 將程式的

行為和負責修改的責任分開來。

以程式設計而言，我們用了非

常多的 ” S i n g l e t o n ” , “ O b j e c t A d a p t e r ” , “ O b s e r v e r ” , “ F a c t o r y M e t h o d ” 模式。最用我們在使

用”façade” 模型將我們專案的三個大功

能切割開來，分別是地圖的控制器、搜尋

資料庫的控制器和行程規劃的控制器。


04

DD 【景點資料庫】手機內含的熱門景點資料建置是來自於交通部觀光局的

介紹，提供使用者在沒有網路服務的情況下也可以進行

景點的搜尋及觀看介紹。

1. 新增─新增景點，若景點已存在進行資料更新。

2. 刪除

3. 搜尋─以關鍵字搜尋景點清單、以地理位置直半徑

搜尋景點清單、以景點ID 取得景點詳細資訊等。

02

台大資訊工程系/ 張子文

i o s 程式設計的資料庫是以

SQL i t e 3 . 0 來進行。資料庫設計的

種點在於隨叫隨用的AP I 架構，在

訂定好規格與細節之後，只需要協

調好溝通介面。可以減少需要用到

資料庫的人，使用上的複雜度。透

過資料庫提供的功能可達到新增、

刪除、搜尋等功能。

【行程資料庫】行程編輯完成後，可以儲存起來，或發送給朋友徵

詢意見或共同編輯。通過伺服器傳送而來的行程也

可以存入資料庫內。

【訊息資料庫】紀錄與聯絡人往返的訊息傳遞。

1. 新增共同編輯的對象、根據對

象與時間點新增一筆留言資訊。

2. 刪除留言。

3. 以行程ID取得共同編輯的聯絡

人、以聯絡人名稱取得所有的留

言、取得一筆行程的所有留言。


03

台大資訊工程系/ 張秉鈞

設負責C o d i n g 統整與主要功能架

01

【Storyboard】

Storyboard的部份為 xcode 4.2新提出之功能，將以往的 In ter face Bu i lder功能更加延伸。過去僅能針對單一個View設計其UI layout，而在Storyboard的環

境下，每個ViewCont ro l le r就像是App中的每個畫面，可以利用Segue連線的方

式將每個ViewControl ler都串接起來，因此從Storyboard上就可簡單的看到程式

的 f low d iagram！同時也降低了UI設計人員對於Xcode的門檻，讓程式與介面

設計能夠配合的更完整！


04

E02

【Facebook SDK】

因為 Tr i p Ta l k 規劃好的行

程可以發送給 F B 好友，請

朋友推薦、或是共同編輯這份

行程。因此我們就需要取得

Facebook Fr iends 的功能。

然而要在 iOS上開發Facebook相關的應用程式，絕對不能不

知道 H a c k b o o k ，它是一個

【介面動畫】

實作介面動畫的過程中

非常有趣，有時候千言

萬語不如一分鐘的影

片來的清楚！與設計

同學的溝通就靠著一

段影片，呈現明確且

清楚的需求，也讓我

在開發上相當順利！

開發內容主要都是利用

U I V i e w A n i m a t i o n 的

將 i O S F a c e b o o k大部分的

S D K 實作出來的範例，除

了看官方的 i O S Tu to r i a l f o r F a c e b o o k 之外，從

H a c k b o o k 中更可看到各

個 S D K 被實作使用的過

程，對於程式開發也更有

幫助。一開始遇到最大的

問題就是要利用D e l e g a t e的方式取得 F a c e b o o k的 A c c e s s T o k e n ，了解

D e l e g a t e與Pr o t o c o l的概

念後，對H a c k b o o k的程式

也能慢慢了解！

元件來實現，藉由設定起始

大小或位置、結束大小或位

置、動畫過程的時間…就可

讓我完成了：下拉抽屜的彈

性開關、地圖景點標記的縮

小放大、新增景點的彈力提

示以及圖片動畫等。實作後

覺得不是太複雜的功能，但

卻讓整個 App 的質感往上

加分的不少，效果滿分！


03

台大資訊工程系/ 羅子為

Tr ips 行程列表頁面以及手機之間訊息的傳遞。

(包含架設GAE Server以及Push推播通知功能)

01

【Trips 行程列表 - 外觀及功能】

這個地方的功能是要顯示所有的行程，包含自己的行程以及朋友送來的行程，一

開始要先”客制化”我們的列表，像是要放行程的名稱，修改的日期，以及行程

的preview還有共同編輯人的大頭照等等，在客制化的部分我先用StoryB oard

的元件把我們要的外觀先建立好，設定位置與長寬，然後再建立一個Class來描述

每個元件要做的事情，像是什麼資料要傳到什麼位置，或是點下哪個按鈕要發生

什麼事情等等，最後，在Trips的頁面匯入該Class來建立我們的table cell 就

成功了!

【Trips行程列表 - 網路資料與本機資料】

處理Trips 頁面的資料很麻煩，因為資料來源包含網路( 朋友寄過來的) 以及

本機( 自己儲存的)，所以在Trips 頁面我首先將網路的資料下載下來(Json 格

式)，用JSON 的library 去parse 他，將他存成Array 與Dictionary，然後再

與本機資料庫比對是否有新資料，有的話就存入本機端，等到本機與網路端Sync

完畢之後，再從本機端將所有資料讀出，顯示在Trips 頁面。

【發送行程頁面 - 資料傳送】

這頁的layout 以及facebook 選好友的功能是泓其做的，我主要是在處理選完好

友之後將行程送出的這件事，因為一個行程可能會有多位好友一起編輯以及含有

多個景點，所以在傳遞資料的時候就必須使用批次上傳的方法，然後在Server 那

邊再把整包好友或是景點解析出來。


04

F

02

【GAE Server】

為了讓手機之前可以傳遞資料，我用Google App Engine 架設

了一個Server，讓每隻手機的本機資料可以上傳到Server 做備

份，並且寄送給其他人，比較麻煩的部分是因為每個行程會有很

多的景點以及很多個共同編輯人，所以在處理上必須使用多維矩

陣去處理，然後再把矩陣轉成json 格式傳回手機。

【Push推撥通知】

為了讓我們的 a p p 更 f a n c y ，我

們把他做的像是w h a t ’s a p p 或

是 L i n e 一樣，當有人寄行程給

你時你的手機就會咑啷的響一

下，並起跑出我們的 m a r k 以

及一些文字，這個部分使用的

是 A p p l e P u s h N o t i f i c a t i o n S e r v i c e ( A P N S ) 的功能。要做

到Push 的功能，首先必須到 iOS

developer 的地方申請開通push 功能，並將要用來做push 的key hash 上傳到 iOS developer，上

傳成功以後再把新的憑證下載下

來安裝到要開發的電腦裡，然後

開始建立自己的push se rver ，

建立自己的push se rver 必須先

安裝架站程式 A p a c h e ，然後安

裝php，然後再安裝MySQL 資料

庫，

這三個東西可以分開裝也可

以下載別人的懶人包一次裝

好，懶人包在w i n d o w s 叫

做 X A M P P ，在 M a c 叫做

M A M P，w h a t e v e r 裝好架

站程式之後你就有一個個人

網站，然後開始架設 p u s h s e r v e r ，要架設 p u s h s e r 先我們先建立一個虛擬主機

(Vi rtual Host) 以免干擾到

正常的po r t 8 0，建立的方法

是在Apache 的config 檔案

裡面建立一個新的port 然後

指定到特定資料夾，建立完

Virtual Host 之後我們先運

行一個背景常駐程式來檢查

資料庫裡面有沒有需要p u s h 的資料，有的話就用我們剛

剛建立的 v i r t u a l h o s t 來

push 出去，如此一

來只要我們一把需要p u s h的

資料寫入資料庫時他就會自

動被p u s h出去，而如何將需

要p u s h的資料寫入資料庫就

是用一般的p h p + M y S Q L 語

法來實現，寫到這邊 p u s h

s e r v e r 終於做好了，但是

別忘記我們還要寫 i O S 的

c o d e，在手機部分為了實現

p u s h功能，我們必須得到每

支手機獨一無二的 t o k e n ，

注意是 t oken 不是機碼，一

隻手機只有一個機碼，但是

每個 a p p 都會有不一樣的

token for pushservice，獲

取 t o k e n 的方法是在手機的

de lega te 裡面加code來跟

APNS 索取token，然後再把

這個token註冊到我們自己的

手機。

TRIPTALK DESIGN PROCESS

Documents

Transcript of TRIPTALK DESIGN PROCESS