CHATTIE CHATTING APP INTRO
Chattie是公司的交友app提案之一。目的是面向全世界的前沿約會和社交互動。期望功能簡單易用一目瞭然，一旦兩人互相向右滑動，就是配對成功，即可立即開始聊天。 不管在找朋友還是單純聊天，都可以在附近找到合得來的人並可以立即聊天。
FLOW CHART
確認function map後畫成流程圖，在此時釐清各頁面與選單之間的層級關係，可以更清楚了解分頁的動線與功能是否完善，以及各頁功能目的有被考慮進去。
此產品包含了交友、直播、聊天與分享等故以功能作分類，一個主題有兩個分頁，使用者可自行流留在關注的主題，透過篩選去選擇，不被不相關的功能干擾。
Cacoo
draw.io
WIREFRAME
依流程圖畫出線框稿，前期已用顏色區分出主頁及分頁的層級與前後關係，(1. 0. a)( 數字.數字.字母 )分別表示( 主頁.大分頁.小分頁 )，方便後期wireframe與視覺製作，工程師也能立即得知目前在修改的頁面，減少雙方的溝通成本。若此時遇到動線混亂的問題即回頭檢視甚至調整flowchart確保體驗無礙。
粗略的框線稿幫助了解各頁面的架構與位置訊息擺放，介面結構易讀性、操作是否流暢好懂。在規畫同時需要符合不同系統裝置的guideline，省去視覺干擾，僅以線條及方塊呈現，專心處理設計規範與細節，由於要製作幾百頁，所以此階段也提前了解哪些地方要做樣式。
balsamiq
LO-FI-
靜態線框後，以低保真模型確保可動狀態下，路線是否順暢。
balsamiq
0.0手機登入
0.1註冊輸入手機
0.2輸入驗證碼
0.3填寫個人資訊
0.4開啟定位服務.png
1.0附近
1.1瀏覽所有人
1.2篩選條件
1.a詳細資訊
2.0直播
2.1.a簡短資訊
2.1直播排行
2.2篩選條件
3.0訊息
3.1.a某則約會貼文詳細
3.1所有約會貼文
3.2成功約會
3.a與某人聊天訊息
4.0喜歡
4.1喜歡的人的貼文
4.2看過的人歷史紀錄
ELEMENTS
research 相關品牌、設計規範等資料後針對app調性開始做視覺呈現，包括字型字級icon主輔色等在搜集資料時就需有初步概念，以便後續一致性設計，並做好系統性樣式。
Sketch
DESIGN VISUAL
sketch
PROTOTYPE
以可動的高保真模型進入最後的動態畫面檢視，以模擬使用者操作情境及畫面。更加擬真的操作畫面可以具體呈現最終效果。
Prott