mobile APP UI - DIVIDER

<aside> 💡 總覺得分帳很麻煩嗎？聚餐結束後總是一群人圍在桌前或是櫃檯前按著計算機？還是旅遊出行時總是在煩惱著該付給哪位多少錢？如果你有以上困擾，Divider簡單清楚的設計幫助你一步步地完成分帳程序並清楚還有多少未付款及未還款。

</aside>

Divider使用直覺的內容安排及簡潔的設計讓所有操作變得更加上手，以藍色為主色來營造乾淨的版面，捨去多餘裝飾讓使用者能更專注於操作的進行，放入許多具操作提示的圖示代替文字使資訊消化變得更加容易。

設計時長：約48小時。

工作含括：前期資料蒐集、原型設計、prototype設計。

使用者需求

user story.png

產品介紹

著陸頁

分帳程式是資訊較為複雜的應用程式，因此在開始動畫後設計了著陸頁，讓使用者在使用APP前對基礎功能有一定的認識。

註冊頁

著陸頁後緊接著是註冊及登入頁面。 DIVIDER擁有分享帳款、快速收付款的功能，有些資訊較私人，因此希望使用者可以先註冊帳號再登錄這些資訊，所以在一開始使用此APP時便會出現註冊頁面，而先前已經擁有帳戶的使用者也能切換至登入頁面。

總覽頁 - 提醒、複製功能

不論是在群組區塊或是帳款列區塊，皆有著方便使用的提醒及複製功能按鈕，方便使用者快速設定提醒或是分享群組、帳款資訊到其他應用程式。

動作完成提醒以黑色背景搭被白色字體呈現於螢幕偏上的位置，給予使用者動作已完成的回饋。

總覽頁 - 帳款列

帳款以票券的形象呈現，帳目結清後右側會變暗，就像是票券使用完畢後的樣子。

左方的帳款資訊包含收付款人、金額、繳款期限、帳目所屬群組；右側則為帳目處理狀況。

右側的收付款以按鈕方式呈現，按下按鈕後會出現對話框呈現重要訊息，訊息中標註收付款人及款項。

因為帳款列是需要呈現較多資訊量的區塊，因此在上方提供標籤列方便使用者篩選、檢視帳款。

總覽頁 - 增加新群組

有時使用者會需要依照活動來記錄與不同人交互的款項，這時就需要群組的建立。

群組建立提供兩種方式：創建新群組及黏貼連結加入現有群組。

建立新群組的過程中，會依序引導使用者填入包含群組名稱、群組類別、成員名稱等資訊，跟著指示便可簡單填寫完成所需資料。

新創立群組會短暫變色，以此作為使用者成功創建群組的回饋。

群組頁

群組頁中包含總覽、紀錄及統計三個頁面，將所有的帳款資訊都好好地收進資料夾中，是此頁面的設計概念。

總覽頁面中呈現每日花費長條圖及群組成員間的帳款訊息(淨收、付款)；紀錄頁面則顯示帳目清單；統計頁面中為群組、各自成員的預算、金額花費的呈現，提供使用者兩種圖表及清單檢視。

成員可以在統計頁面中設置自己的花費統計是否要公開給其他成員。