KRAKEN OFFICIAL APP INTRO
讓人一眼盡覽產品裝置、功能、服務與預約。 分別設置「搜尋」與「篩選」無論是想盡快尋找特定 機型或不清楚自身需求的人都可以快速預覽產品。 根據最愛功能可以得知客戶個人化的產品及配件。 甚至可與其他機型作產品比較，協助找到更適合自己的 產品，並前往服務據點獲得產品建議。
FLOW CHART
確認function map後畫成流程圖，在此時釐清各頁面與選單之間的層級關係，可以更清楚了解分頁的動線與功能是否完善，以及各頁功能目的有被考慮進去。
此產品聚焦在產品分類的功能分頁上，為求引導一目瞭然因此在產品篩選與細節頁面的流線比較多，固定的重覆頁面 / 回到同一分頁能有效且快速降低使用者的學習期，達到使用此app的目的。
Cacoo
draw.io
WIREFRAME
依流程圖畫出線框稿，前期已用顏色區分出主頁及分頁的層級與前後關係，(1. 0. a)( 數字.數字.字母 )分別表示( 主頁.大分頁.小分頁 )，方便後期wireframe與視覺製作，工程師也能立即得知目前在修改的頁面，減少雙方的溝通成本。若此時遇到動線混亂的問題即回頭檢視甚至調整flowchart確保體驗無礙。
粗略的框線稿幫助了解各頁面的架構與位置訊息擺放，介面結構易讀性、操作是否流暢好懂。在規畫同時需要符合不同系統裝置的guideline，省去視覺干擾，僅以線條及方塊呈現，專心處理設計規範與細節，由於要製作幾百頁，所以此階段也提前了解哪些地方要做樣式。
balsamiq
LO-FI-
靜態線框後，以低保真模型確保可動狀態下，路線是否順暢。
balsamiq
0.0index
1.0.a產品類別
1.1.a篩選-2
1.1.a篩選-3
1.1.a篩選-4
1.1記型電腦-1
1.1筆記型電腦-2
1.5產品資訊-1
1.5產品資訊-2
1.5產品資訊-3
3.0產品比較
4.0我的最愛
5.0最新消息-1
5.00最新消息-2
6.0活動專區
7.0服務專區
7.2.a以列表查詢
7.2.b以地圖查詢
8.0設定
9.0登入
10.0搜尋
ELEMENTS
research 相關品牌、設計規範等資料後針對app調性開始做視覺呈現，包括字型字級icon主輔色等在搜集資料時就需有初步概念，以便後續一致性設計，並做好系統性樣式。
Sketch
DESIGN VISUAL
sketch
PROTOTYPE
以可動的高保真模型進入最後的動態畫面檢視，以模擬使用者操作情境及畫面。更加擬真的操作畫面可以具體呈現最終效果。
inVision