UI專案
財經類APP
改善
此為登入與註冊時會跑出來的動畫。
設計理念
現代人在閒暇之餘，也會研究財經領域投資股票等，來增加自己額外的收入，因此財經類使用者多，故筆者選擇財經領域來做UI專案。
筆者認為擁有一個，讓人想要馬上購買課程和講座的介面非常重要，故此專案特挑了一家財經公司的APP為樣本，重新設計出一個簡約高級、多功能、直接APP內觀看課程、能增加購買率的介面。
公司原APP：熱門爆料 | 股市爆料同學會 (cmoney.tw)
設計工具
本專案為獨立製作，使用Adobe XD，使用其是因可與Photoshop、Illustrator互相搭配使用。
設計架構
APP共包含主頁、商城、爆料、通知、我的這五個部分。
點擊登入，會跑出輸入帳密畫面，可選擇是否要記住密碼。
點擊註冊，則會跑出設定帳密的一連串動畫。
主頁頁面，包含大盤走勢、熱門產品推薦、最新討論情況。
商城頁面，包含各產品分類、熱門產品推薦、愛心可進入已有興趣之產品。 另外點擊已購買之產品，則可以直接觀看。
爆料頁面，包含爆料內容、問答討論、追蹤推薦、新聞日報。
通知頁面，包含官方公告、重要訊息、社團動態、留言通知。
我的頁面，包含個人設置、發文紀錄、所屬社團、收藏內容。
此為實際上ADOBE XD內的設計畫面。
設計目的
設計規範
設計規範
(1)紅色為主要色，來刺激購買慾望，色調偏粉色一些，增添高級感；(2)黃色則是次要色，用立即購買的明顯的按鈕；
(3)綠色則是我的頁面的重新整理，來顯示追蹤人數、電話設置等更新(4)另以灰咖啡色調來當作背景。
使用四角圓方框來增添平易近人之感，可增加點擊的慾望。
設計目的
主要為改善以下幾點
1.讓頁面中內容更簡化明瞭
2.公司產品可直接在APP內購買、觀看
3.使公司商品購買率上升
4.顏色的改變成柔和些許
1.讓頁面中內容更簡化明瞭
當使用者打開介面時，不免有些眼花撩亂，重點內容很多。
改善方式:
使下方選單改成為五個，並依照設計架構去做修改。
2.公司產品可直接在APP內購買、觀看
原本APP設計是沒有商品頁面之設計的。
改善方式:
增加商品頁面，以及愛心符號，使消費者可以隨時查看、購買。
APP除了可以看到股市最新資訊，也可以直接使用觀看。
3.使公司商品購買率上升
原本APP完全沒有推薦產品之設計。
改善方式:
在各個頁面有放置愛心符號，皆可連接使消費者可以購買、觀賞。
4.顏色的改變
白色頁面太多，反而會有刺激眼睛之感，且顏色比較沒有重點。
改善方式:
以紅色為主要色，來刺激購買慾望，色調偏粉色一些，增添高級感。
黃色則是次要色，用立即購買的明顯的按鈕。
綠色則是我的頁面的重新整理，來顯示追蹤人數、電話設置等更新。
其中另以灰咖啡色調來當作背景。
設計內容
登入與註冊頁面
如何改善於設計目的與結果中有詳細描述。
另動畫效果是筆者特別設計出的有趣互動。
主頁
商城
爆料
通知
我的
設計動畫效果
登入與註冊，進入主頁面。
五個頁面相互轉換結果。
主頁整個滑動效果，點讚是紅色、倒讚是綠色，與股票漲跌有關。
商品購買的頁面操作，愛心是有興趣的產品。
爆料的頁面呈現。
我的頁面更新，查看追蹤人數和手機設置等，最下方是登出。
設計結果
1.讓頁面中內容更簡化明瞭
當使用者打開介面時，不免有些眼花撩亂，重點內容很多。
改善方式:
使下方選單改成為五個，並依照設計架構去做修改。
改善結果:
頁面簡潔、需求功能明顯，容易尋找關鍵按鈕。
2.公司產品可直接在APP內購買、觀看
原本APP設計是沒有商品頁面之設計的。
改善方式:
增加商品頁面，以及愛心符號，使消費者可以隨時查看、購買。
APP除了可以看到股市最新資訊，也可以直接使用觀看。
改善結果:
增加APP的實用功能、隨時觀看課程，增加產品購買率。
3.使公司商品購買率上升
原本APP完全沒有推薦產品(愛心符號)之設計。
改善方式:
在各個頁面有放置愛心符號，皆可連接使消費者可以購買、觀賞。
改善結果:
使愛心符號在主頁、商城、我的頁面皆可看到，增加產品購買率為APP設計的主要目標。
4.顏色的改變
白色部分太多，反而會有刺激眼睛之感，且顏色比較沒有重點。
改善方式:
以紅色為主要色，來刺激購買慾望，色調偏粉色一些，增添高級感。
黃色則是次要色，用立即購買的明顯的按鈕。
綠色則是我的頁面的重新整理，來顯示追蹤人數、電話設置等更新。
其中另以灰咖啡色調來當作背景。
改善結果:
以灰咖啡等色調，去遮住過多的的白色部分，使APP色調較為柔和、具風格高級感、有區域重點呈現。