台灣銀行APP ReDesign
台灣銀行APP ReDesign
台灣銀行APP ReDesign
台灣銀行APP ReDesign
簡化操作流程，強化視覺識別讓金融服務更直覺、更貼近使用者。
簡化操作流程，強化視覺識別讓金融服務更直覺、更貼近使用者。
簡化操作流程，強化視覺識別讓金融服務更直覺、更貼近使用者。
簡化操作流程，強化視覺識別讓金融服務更直覺、更貼近使用者。
視覺流程優化 & Side Project
視覺流程優化 & Side Project
專案背景
專案背景
專案背景
現在因為手機帶來的便利性，使用行動網銀就能隨時隨地使用金融服務，不受時間、地理的限制，沒有實體銀行的較多限制，也能夠提升個人化的自由度。
因為本身是台灣銀行的用戶，覺得在使用上介面設計不夠直觀外風格也較為過時，使用流程繁瑣複雜，因此以重新設計該APP作為這次練習。
現在因為手機帶來的便利性，使用行動網銀就能隨時隨地使用金融服務，不受時間、地理的限制，沒有實體銀行的較多限制，也能夠提升個人化的自由度。
因為本身是台灣銀行的用戶，覺得在使用上介面設計不夠直觀外風格也較為過時，使用流程繁瑣複雜，因此以重新設計該APP作為這次練習。
問題分析
問題分析
問題分析
根據我自己使用的體驗感受，以及從Google Play 跟 IOS APP 商店上面蒐集使用者的留言，我總結了當前需要調整的問題。
根據我自己使用的體驗感受，以及從Google Play 跟 IOS APP 商店上面蒐集使用者的留言，我總結了當前需要調整的問題。
介面視覺
第一眼看到台灣銀行APP，莫過於那過度擁擠的內容所帶來的窒息感。
每個元件之間的排列沒有給予適當的空間，過多的色彩使用及文字說明，對於本就功能資訊複雜的金融APP來說，會造成瀏覽以及操作的複雜度。
而舊版的視覺風格也較為傳統，和最近幾年流行的扁平化風格落差很大，所以針對這次在 APP 上做了許多變化，讓整體設計能跟上現今簡潔清新的風格趨勢。
第一眼看到台灣銀行APP，莫過於那過度擁擠的內容所帶來的窒息感。
每個元件之間的排列沒有給予適當的空間，過多的色彩使用及文字說明，對於本就功能資訊複雜的金融APP來說，會造成瀏覽以及操作的複雜度。
而舊版的視覺風格也較為傳統，和最近幾年流行的扁平化風格落差很大，所以針對這次在 APP 上做了許多變化，讓整體設計能跟上現今簡潔清新的風格趨勢。
資訊架構混亂 導航不夠明確
裡面功能規劃太過複雜，資訊缺乏視覺層級以及好的架構，因此對很多使用者來說產生很多認知負擔並混亂，需要思考怎麼操作，使用起來不夠直覺。
像是登入前的首頁畫面，有列出幾個台銀用戶比較常使用的功能選項。假如我今天要使用網路銀行功能，當我登入後初始畫面為我的帳戶頁，當前畫面只有顯示目前餘額，除了選單按鈕外並沒有顯示其他資訊，也沒有清楚的導航。如需使用其他功能，下方雖有文字說明告知使用者，但光是閱讀密密麻麻的文字，只會讓用戶更加困惑 。
裡面功能規劃太過複雜，資訊缺乏視覺層級以及好的架構，因此對很多使用者來說產生很多認知負擔並混亂，需要思考怎麼操作，使用起來不夠直覺。
像是登入前的首頁畫面，有列出幾個台銀用戶比較常使用的功能選項。假如我今天要使用網路銀行功能，當我登入後初始畫面為我的帳戶頁，當前畫面只有顯示目前餘額，除了選單按鈕外並沒有顯示其他資訊，也沒有清楚的導航。如需使用其他功能，下方雖有文字說明告知使用者，但光是閱讀密密麻麻的文字，只會讓用戶更加困惑 。
另外當使用者要使用其他功能，則必須在茫茫的選單頁中一層一層的往下點擊，加上擁擠的介面排版，缺少易用性原則。
針對大家比較常用的轉帳功能，將目前台灣銀行APP的操作流程畫出後，可以發現過程過於繁瑣，也有一些畫面跳轉順序的問題。
另外當使用者要使用其他功能，則必須在茫茫的選單頁中一層一層的往下點擊，加上擁擠的介面排版，缺少易用性原則。
針對大家比較常用的轉帳功能，將目前台灣銀行APP的操作流程畫出後，可以發現過程過於繁瑣，也有一些畫面跳轉順序的問題。
類似項目重複 增加思考選擇困難
我們可以看到類似功能的項目重複，像是轉帳功能就又區分為三個按鈕選項，約定戶、非約定戶、手機號碼，以及交易明細查詢，也分為當日、往來、歷史往來三個選項。
過多的選擇會讓使用者感到困惑，當選擇提供越多，使用者就需要花費更多心思經歷選擇困難，除了徒增使用上的時間，也會造成滿意度降低。
我們可以看到類似功能的項目重複，像是轉帳功能就又區分為三個按鈕選項，約定戶、非約定戶、手機號碼，以及交易明細查詢，也分為當日、往來、歷史往來三個選項。
過多的選擇會讓使用者感到困惑，當選擇提供越多，使用者就需要花費更多心思經歷選擇困難，除了徒增使用上的時間，也會造成滿意度降低。
梳理架構與定義視覺方向
梳理架構與定義視覺方向
梳理架構與定義視覺方向
資訊架構
在開始視覺設計和頁面排版之前，我先整理清楚合理的資訊，規劃出大方向的功能架構，再根據列出的項目產出Wireframe，梳理排版以及操作流程。
在開始視覺設計和頁面排版之前，我先整理清楚合理的資訊，規劃出大方向的功能架構，再根據列出的項目產出Wireframe，梳理排版以及操作流程。
視覺設計以乾淨舒適為主
我參考了其他家銀行APP的設計，都是以簡約為主，視覺體驗簡單明瞭並且增加留白區，提升用戶操作體驗。
我參考了其他家銀行APP的設計，都是以簡約為主，視覺體驗簡單明瞭並且增加留白區，提升用戶操作體驗。
設計理念｜視覺展示
設計理念｜視覺展示
設計理念｜視覺展示
明亮的視覺感受 資訊清晰易讀
在重新設計的介面視覺上，主要色沿用台灣銀行原本的品牌色，避免因為重新設計而喪失使用者對該品牌的識別度。
在重新設計的介面視覺上，主要色沿用台灣銀行原本的品牌色，避免因為重新設計而喪失使用者對該品牌的識別度。
整體加強留白，調整視覺層級，讓畫面與各元件之間有了更多的呼吸空間，讓介面看起來更為乾淨、舒服。更加清晰的介面，對於大量的資訊功能瀏覽起來也不會過於負擔，加上清楚明確的導航，能夠幫助使用者快速瀏覽做切換。
另外選單頁的部分，調整字的大小間距、降低色彩的使用以及統一icon的樣式，都能降低視覺的混亂感。
整體加強留白，調整視覺層級，讓畫面與各元件之間有了更多的呼吸空間，讓介面看起來更為乾淨、舒服。更加清晰的介面，對於大量的資訊功能瀏覽起來也不會過於負擔，加上清楚明確的導航，能夠幫助使用者快速瀏覽做切換。
另外選單頁的部分，調整字的大小間距、降低色彩的使用以及統一icon的樣式，都能降低視覺的混亂感。
更好的操作流程體驗
當我們從首頁點擊進入某一功能，下方會出現Tab Bar，可以幫助使用者能夠在部分功能做快速做切換，解決了舊版必須一直切回到選單頁選擇的問題。
而在中間的首頁功能按鈕特別設計了兩個跳轉選項，一個是可以直接回到首頁，另一個則為跳到選單頁，一覽全部的功能。
當我們從首頁點擊進入某一功能，下方會出現Tab Bar，可以幫助使用者能夠在部分功能做快速做切換，解決了舊版必須一直切回到選單頁選擇的問題。
而在中間的首頁功能按鈕特別設計了兩個跳轉選項，一個是可以直接回到首頁，另一個則為跳到選單頁，一覽全部的功能。
原本舊版我的帳戶頁原本只有較少的資訊功能，以及原本下方過多的文字說明。這次調整加入明確的訊息導航，把多餘的文字拿掉，讓用戶操作起來更直觀，順暢。
針對原本繁瑣的流程，例如前面說到的轉帳流程，也因為功能架構的調整，可以直接從下方的tab bar快速切換。
原本舊版我的帳戶頁原本只有較少的資訊功能，以及原本下方過多的文字說明。這次調整加入明確的訊息導航，把多餘的文字拿掉，讓用戶操作起來更直觀，順暢。
針對原本繁瑣的流程，例如前面說到的轉帳流程，也因為功能架構的調整，可以直接從下方的tab bar快速切換。
類似功能整合 減少用戶選擇
為了能有效引導使用者的瀏覽動線、避免可能的階層迷航，我將類似的功能整合在一起，減少操作流程以及用戶需要先思考才有辦法進行下一步。
為了能有效引導使用者的瀏覽動線、避免可能的階層迷航，我將類似的功能整合在一起，減少操作流程以及用戶需要先思考才有辦法進行下一步。
整體加強留白，調整視覺層級，讓畫面與各元件之間有了更多的呼吸空間，讓介面看起來更為乾淨、舒服。更加清晰的介面，對於大量的資訊功能瀏覽起來也不會過於負擔，加上清楚明確的導航，能夠幫助使用者快速瀏覽做切換。
另外選單頁的部分，調整字的大小間距、降低色彩的使用以及統一icon的樣式，都能降低視覺的混亂感。
整體加強留白，調整視覺層級，讓畫面與各元件之間有了更多的呼吸空間，讓介面看起來更為乾淨、舒服。更加清晰的介面，對於大量的資訊功能瀏覽起來也不會過於負擔，加上清楚明確的導航，能夠幫助使用者快速瀏覽做切換。
另外選單頁的部分，調整字的大小間距、降低色彩的使用以及統一icon的樣式，都能降低視覺的混亂感。
PROTOTYPE展示
信用卡頁面資訊
舊版信用卡功能使用分為多個頁面，需要返回再去選取其他功能，我將功能統一在同一個頁面中，像是餘額查詢、消費明細等資訊，根據用戶的需求去做操作。
而用戶有申請的信用卡則會直接顯示在畫面上，根據數量藉由左右滑動即可快速瀏覽。
舊版信用卡功能使用分為多個頁面，需要返回再去選取其他功能，我將功能統一在同一個頁面中，像是餘額查詢、消費明細等資訊，根據用戶的需求去做操作。
而用戶有申請的信用卡則會直接顯示在畫面上，根據數量藉由左右滑動即可快速瀏覽。
而我也特別針對消費明細的地方，參考了其他APP的設計，覺得這設計很不錯加上我自己也有在使用，所以也加入此設計能幫助使用者掌握每個月的消費習慣。
而我也特別針對消費明細的地方，參考了其他APP的設計，覺得這設計很不錯加上我自己也有在使用，所以也加入此設計能幫助使用者掌握每個月的消費習慣。
PROTOTYPE展示
個人設定
舊版的個人設定本來是各自分開的，我將相關的功能集中在同一畫面，這樣用戶直接點選設定進入該頁面就可以一覽相關功能，除了清晰明瞭之外也可以減少選單頁的項目。
舊版的個人設定本來是各自分開的，我將相關的功能集中在同一畫面，這樣用戶直接點選設定進入該頁面就可以一覽相關功能，除了清晰明瞭之外也可以減少選單頁的項目。
反思與總結
反思與總結
