Page 1

Yi-Shan ‘s Learning trip


about me 莊宜珊 Yi-Shan Chang E ducat i on Master Sep 2018

National Cheng Kung University Major: Industrial Information Management Institute of Information Management

Bachelor

Sep 2014 - Jun 2018

National Taipei University Major: Computer Science and Information Engineering (CSIE) Minor: Economics Program: 1.Economic Analysis and Global Leadership Elite (E.A.G.L.E.) Program 2.The Program of Mobile Devices Software

S k ill s 3ds Max Adobe Illustrator Adobe Premiere Adobe PhotoShop Android Studio c/c++


Contents

App UI/UX Design Introdution

App UI/UX Design Illustration

Poster&Senior Projects


App UI/UX Design

Gerli Accounting App

動機簡介

市面上琳瑯滿目的記帳app,其中介面清楚方便且讓使用者愛不 釋手的記帳軟體甚少。於是我們發想Gerli記帳軟體,可以「透過 簡易直覺操作,增進使用者的記帳輸入體驗」為主要特色。

產品功能

三種輸入模式: 語音、按鈕點擊、輸入特定自然語言格式 簡易圖表統計分析 語音吐槽功能 雲端同步 社群功能:facebook發文

學習奉獻

學生於作業專案負責整體系統整合、圖表統計分析功能實現、介 面設計流程、整體美工設計,以JAVA以及Android Studio開發 環境撰寫。 全體工作分配得當,藉由每週上課開會,提出當時開發上的瓶頸 ,互相交流討論,讓學生從一開始無Android Studio基礎,直 到完成專案。介面設計使學生開始接觸學習Illustrator,設計出 介面流程流暢,符合使用者經驗的介面。

介面設計

簡易明瞭的設計風格,設計者身分站在使用者角度思考,如何讓 使用者操作更加便利直覺。利用簡單三色調以及ICON,創造出簡 約且不失去焦點的設計。


App UI/UX Design

介面設計說明

主畫面: 中間主要記錄每天記帳細項 ,使用者可以自行選定記帳 模式,左右滑動可更變日期 ,自統自動計算預算餘額, 使用者可以自訂日、週、月 預算金額。

語音記帳: 主畫面按下麥克風icon之後 就進入語音記帳模式,使用 者按照範例句說出今天消費 金額即可,接者畫面轉換到 主畫面。

按鈕記帳: 主畫面按下下方鍵盤icon即 可進入按鈕記帳。先跳出機 算機畫面,方便使用者計算 消費金額,接著使用者選擇 類別,按下OK即可輸入進主 畫面。

聊天記帳模式: 主畫面下面聊天icon即可進 入。使用者可以輸入支出金 額和支出名稱,輸入上面小 icon依序是 點選類別icon、 常用類別icon、小計算機 icon。下方畫面往左滑即可 輸入收入金額以及收入名稱 。輸入金額之後,電腦自動 會吐槽使用者花費習慣。


App UI/UX Design

介面設計說明

月份計畫: 於主畫面旁邊的側邊列表, 點選月份計畫即可進入。 主要紀錄哪天花費比較多事 項,系統當天會在主畫面體 醒使用者。

年度計畫: 於側邊列表,點選年度計畫 即可進入畫面。 點選要記錄的月份,即可輸 入事項。提供使用者紀錄哪 一月有重大事項必須繳費(花 費),EX繳稅、買家電etc.

設定: 側邊列表點選設定,即可進 入。 使用者可以調整,是否雲端 備份、臉書提醒、預算提醒 。 風格部分,使用者可以選定 主題顏色。


App UI/UX Design

介面設計說明

圖表分析: 側邊列表點選圖表分析即可進入。 畫面往左滑即可更邊 day、week、month、year分析。 Day:分析當日類別比例,並且在下面幫使用者排名類別。可以自行選定當週類別分 析。 Week: 分析當周類別比例,並且在下面幫使用者排名類別。可以自行選定當週類別 分析。同時分析這周總消費,讓使用者明瞭這周消費波動。 Month: 分析當月類別比例,並且在下面幫使用者排名類別。可以自行選定當月類 別分析。 Year: 分析當年類別比例,並且在下面幫使用者排名類別。同時分析今年總消費, 讓使用者明瞭今年消費波動。


Poster&Senior Projects

學生畢業專題海報製作,專題題目為與語音辨識,學生利用麥克風造型概念 製作與題目相應的海報,希望瀏覽我們專題作品的觀眾能夠印象深刻。


Poster

2015擔任系學會網編以來,開始陸續自學視覺傳達相關技能,如Adobe Illustrator 、 Adobe Premiere、Adobe Photoshop等軟體,同時將設計思維 的觀念和攝影融入作品之中,在大二至大三的報告與工作需求中,製作許多動 態影像以及平面作品。也利用閒暇時,自學3D建模,製作城堡建模。目前已 製作10件平面作品 ,2部動態影像。 於大二軟體工程課課程,負責介面設計以及App軟體架構整合。 希望透過每部作品,深刻體驗使用者感受,進而思考設計者、使用者、工程師 三端整合。


Poster

這學期在學校系辦舉辦家長座談、就業覽會、專題展等等主視覺設計,此次專 題展學生設計排版更貼近簡約舒服等概念。展現出資訊工程學系專題展覽的專 業性,從無到有過程中,學生以幾何為主要元素,利用不同質感的菱形打造畫 面呈現的整潔。

Yi-Shan's Learing trip  

大學關於設計的學習作品

Yi-Shan's Learing trip  

大學關於設計的學習作品

Advertisement