UI專案
財經類網站改善
本專案使用Adobe XD，因是使用免費版本，故無法以連結方式直接操作，因此筆者以截圖(圖片可局部縮放)、錄製動畫影片來介紹。
內有Adobe XD的原始檔（UI設計）
手機APP
此為首頁這個頁面往下滑動的呈現樣貌。
設計理念
現代人在閒暇之餘，也會研究財經領域投資股票等，來增加自己額外的收入，因此財經類使用者多，故筆者選擇財經領域來做UI專案。
筆者認為擁有一個，讓人想要馬上購買課程和講座的介面非常重要，故此專案特挑了一家財經公司之網頁為樣本，重新設計出一個簡約高級、富有風格、能增加購買率的介面。
設計工具
本專案為獨立製作，使用Adobe XD，使用其是因可與Photoshop、Illustrator互相搭配使用。
設計架構
網頁共包含首頁、商城、講座、影音、作者這五個部分。
整體設計(五個頁面皆有)，上方是點擊列表、登入註冊、社群媒體。
最下方則是公司資訊及聯絡方式。
其兩側為方便欄的設計，將常用的連結、搜尋、已購買產品、產品即時狀態更新放置於此，隨著滾輪移動，使用者可以隨時點擊、搜詢、查看。
首頁之頁面內容，包含公司背景、熱門商品、公司地址、聯絡方式。
另有中間圖案可以點擊，進入到另一個頁面，這裡特別有一連串的動畫特效設計。主要用意是人才招募，能夠抓住人的眼球。
進入此頁面後，內容包括四個面試步驟，以及報名的按鈕與說明。
商城頁面，包含了熱門商品、往下是各分類產品推薦；
講座頁面，包含近期推薦講座報名、還有已上線的影音課程購買；
影音頁面，包含可免費觀看的課程影片，左右鍵查看；
作者方面，包含各格作者的簡介、搭配特色背景圖。
此為實際上ADOBE XD內的設計畫面。
設計目的
設計規範
(1)以紅色為主要色，來刺激購買慾望，色調偏粉色一些，增添高級感；
(2)黃色則是次要色，用來顯示註冊、立即購買的明顯的按鈕；
(3)藍色則是用來FB登入、搜尋。
(4)使用四角圓方框來增添平易近人之感，可增加點擊的慾望。
設計目的
主要為改善以下幾點
1.讓畫面中相同的資訊更集中簡約
2.讓產品使用狀態隨時被看見
3.讓使用者對產品公司更為了解
4.顏色的改變成柔和些許
1.讓畫面中相同的資訊更集中簡約
當使用者打開介面時，不免有些眼花撩亂，重點內容很多。
改善方式:
(1)把上方推薦欄表(黑底)，放置某個區域內集中，改善最後兩個選項變成第二列的雜亂感。讓最上方只剩LOGO、列表、FB登入與註冊。
(2)將最新消息放置正中間，即時動態另外拉出來。
(3)FB粉絲專業移到最上方。
2.讓產品使用狀態隨時被看見
即時動態，顯示的是購買者正在使用何者產品。當使用者隨著滾輪往下移動時，卻沒有跟著移動。
改善方式:
(1)可以讓推薦欄、即時動態、搜尋產品列、我的理財寶，能夠跟著滾輪一起向下移動。
(2)讓使用者可以隨時看到別的消費者使用情況、購買按鈕可即時操作，可以大大增加購買率。
3.讓使用者對產品公司更為了解
原本公司網站往下移動，可以看到商品、講座的推薦，但是產品的類別也並沒有全部列上，只有少數兩個，既然如此，不如只放上熱門產品，點擊時可以跳到另外商城的頁面。
改善方式:
(1)由於前面已經將最上方列表簡單化，使用者很容易找到需求按鈕點擊，所以不必硬要將商品與講座內容全都放在首頁。
(2)原網站比較沒有公司介紹的部分，但是除了極力推銷使用者產品之外，如果將公司的背景沿革、地址以及相關資訊清楚描寫，則會讓使用者對於公司的信任度大為提升，進而增加購買率。
(3)一進網站就可以看到公司的辦公環境圖，可以增強公司整體印象。
4.顏色的改變
雖然紅色的確是刺激消費者購買率上升的顏色，但是此處的鮮紅色實在是太過刺眼了，容易造成眼睛不舒服。
改善方式:
(1)把鮮紅色改成了較為柔和一些的玫瑰紅，不僅減少了刺眼問題，還可以為公司整體網站形象提高了高級感。
(2)黃色則應用在關鍵按鈕上，以達到顯眼的目的。
(3)藍色則是用在搜尋上面，顏色比較特別、亦區分。FB則是原本就是藍色。
設計內容
首頁
原版:
新版:
1.首頁內容改變
為了讓使用者信服財經公司的產品與課程，也為了讓公司可以招募對其有興趣的人才。首頁可以放公司的標語以及背景沿革介紹，使用者對其會有比較深刻的認識。
2.公司環境呈現
中間放一張公司進門的圖，讓人有親近、一目瞭然之感，正在招募工程師訓練營中，點進去可以跳到另外一個頁面。
3.兩側方便欄設計
旁邊兩側有會跟著滾輪移動的推薦欄位及即時動態更新，讓使用者知道最夯的APP是甚麼。
4.熱門商品推薦
中間放了熱門商品推薦，滾輪可移動，更詳細的商品類別可以直接點選商品頁面。
5.頁面底部資訊欄
最下方紅色底端放了些公司的相關資訊，有一個向上的箭頭可以回到頁面最頂端；右側也有TOP的按鈕，有著同樣功能。
6.頁面右側內容索引
右側有公司背景、熱門商品、公司地址、聯絡方式，各點選都會跳至相應位置。
7.公司地址查詢
公司地圖可以上下左右移動，來查看公司周圍之地標。
8.網頁整體布局
按中間辦公室圖，可以進入戰鬥營招募的動畫效果頁面。此處是使用TIME-AUTO-ANIMATE來製作一連串的動畫效果。
其餘點選上方按鈕可到各自頁面去。
熱門商品可以直接跳至商品頁面，直接種類選擇。
如何改善於設計目的與結果中有詳細描述。
另動畫效果是筆者特別設計出的有趣互動。
首頁之跳轉頁面
原版:
新版:
商城
原版:
新版:
講座
原版:
新版:
影音
原版:
新版:
作者
原版:
新版:
設計動畫效果
按中間辦公室圖，可以進入戰鬥營招募的動畫效果頁面。其餘點選上方按鈕可到各自頁面去。熱門商品可以直接跳至商品頁面，直接種類選擇。
按鈕碰觸後之展現、即時動態可上下移動查看更新。
此為首頁這個頁面往下滑動的呈現樣貌。
按下旁邊的公司背景、熱門商品、公司地址、聯絡方式，可以馬上跳至這個頁面的相應位置。此處是使用TAP-SCROLL TO的效果。
熱門商品可以左右移動查看。
此處使用拖曳效果，展現兩種圖形、箭頭的變化、方向的改變，這裡是用DRAG-AUTO-ANIMATE效果。
而點選紫框則會跳出立即報名之按鈕，是使用TAP-OVERLAY效果。
可以點選左右方箭頭做查看，碰觸到影片封面時，會從模糊效果轉變至清晰，中間白色箭頭便成為粉色。
可以往左拖移再點選一次即可查看各作者。
設計結果
1.讓畫面中相同的資訊更集中簡約
當使用者打開介面時，不免有些眼花撩亂，重點內容很多。
改善方式:
(1)把上方推薦欄表(黑底)，放置某個區域內集中，改善最後兩個選項變成第二列的雜亂感。讓最上方只剩LOGO、列表、FB登入與註冊。
(2)將最新消息放置正中間，即時動態另外拉出來。
(3)FB粉絲專業移到最上方。
改善結果:
(1)第一眼重點是公司的內部環境圖，公司印象感強烈。
(2)相似內容物移到同個地方，使介面看起來整體簡約。
(3)配置看起來較清晰明瞭，關鍵按鈕容易看見。
2.讓產品使用狀態隨時被看見
即時動態，顯示的是購買者正在使用何者產品。當使用者隨著滾輪往下移動時，卻沒有跟著移動。
改善方式:
(1)可以讓推薦欄、即時動態、搜尋產品列、我的理財寶，能夠跟著滾輪一起向下移動。
(2)讓使用者可以隨時看到別的消費者使用情況、購買按鈕可即時操作，可以大大增加購買率。
改善結果:
(1)即時動態隨著使用者滑動就到哪，能知道哪款產品最為熱門。
(2)右方欄是商品類，可以隨時搜尋商品、查看已購買商品。
(3)左方欄是推薦連結集中，可以隨時查看股市最新情況。
3.讓使用者對產品公司更為了解
原本公司網站往下移動，可以看到商品、講座的推薦，但是產品的類別也並沒有全部列上，只有少數兩個。既然如此，不如只放上熱門產品，點擊時可以跳到另外商城的頁面。
改善方式:
(1)由於前面已經將最上方列表簡單化，使用者很容易找到需求按鈕點擊，所以不必硬要將商品與講座內容全都放在首頁。
(2)原網站比較沒有公司介紹的部分，但是除了極力推銷使用者產品之外，如果將公司的背景沿革、地址以及相關資訊清楚描寫，則會讓使用者對於公司的信任度大為提升，進而增加購買率。
(3)一進網站就可以看到公司的辦公環境圖，可以增強公司整體印象。
改善結果:
(1)首頁內容增加公司介紹，使消費者更了解公司。
(2)熱門商品重點放置，簡單易懂。
(3)第一眼重點是公司的內部環境圖，公司印象感強烈。
4.顏色的改變
雖然紅色的確是刺激消費者購買率上升的顏色，但是此處的鮮紅色實在是太過刺眼了，容易造成眼睛不舒服。
改善方式:
(1)把鮮紅色改成了較為柔和一些的玫瑰紅，不僅減少了刺眼問題，還可以為公司整體網站形象提高了高級感。
(2)黃色則應用在關鍵按鈕上，以達到顯眼的目的。
(3)藍色則是用在搜尋上面，顏色比較特別、亦區分。FB則是原本就是藍色。
改善結果:
顏色較為柔和不那麼刺眼，又有高級之感。
5.講座拖移效果
改善結果:
藉由與使用者互動方式，四方型、圓形、中間三角形之變化，增添趣味活潑之感。
6.作者拖移效果
改善結果:
依照每個作者的頭像背景，各放置適合的背景圖案，增加印象美觀感，左右拖移比起條列式擺放更為生動。