方案價值

金融行業(yè)UI設計方案價值

  • 功能新增

    增加協(xié)作流程的功能，增強全局菜單、全局搜索等跨系統(tǒng)功能,增強不同角色的協(xié)作和業(yè)務流轉針對金融細分行業(yè)的創(chuàng)新功能。

  • 產品體驗改進

    一致性全局菜單導航，更好的操作定位,設置高頻操作的快捷入口及每日任務匯總,增強符合用戶習慣的信息查找檢索,所見即所得的頁面顯示和編輯，方便用戶操作,更多的提醒和顯示，減少操作錯誤，提升業(yè)務效率流程化的信息顯示， 增加操作步驟和動線提示，幫助連貫操作,考慮不同角色的使用和操作簡便性，去除不必要的操作和界面。

  • 新價值輸出

    從單一經辦變成一站式業(yè)務工作站，將數(shù)據的在線瀏覽編輯變成所見即所得的編輯操作，將記錄報送變成業(yè)務流程的融合工作空間，針對金融細分行業(yè)提供關鍵場景應用創(chuàng)新。

  • 金融行業(yè)用戶研究
    • 用戶研究
    • 1、代入典型用戶角色進行討論，圍繞業(yè)務場景流程，明確角色權限，梳理業(yè)務規(guī)則
    • 2、梳理操作任務和使用流，梳理系統(tǒng)交互操作和用戶交互操作，并進行區(qū)分
    • 3、體系化梳理已有交互體驗和易用性問題，討論并補充新問題
    • 4、提出新的設計建議
  • 金融行業(yè)交互優(yōu)化
    • 交互優(yōu)化
    • 1、了解軟件業(yè)務及功能，從整體信息架構上梳理整合菜單及功能
    • 2、梳理系統(tǒng)平臺首頁不同角色所用業(yè)務，針對用戶需求取舍內容，概要展示
    • 3、畫出全流程頁面交互原型，優(yōu)化操作流程，提升用戶體驗，提高用戶的工作效率。
    • 4、滿足目標用戶的需求和習慣，建立人性化的交互引導。
  • 金融行業(yè)UI視覺優(yōu)化升級
    • UI視覺優(yōu)化升級
    • 1、系統(tǒng)UI視覺要符合主流設計審美趨勢、符合行業(yè)特性、具備品牌特色
    • 2、需要支持國際化，符合國際化UI設計規(guī)范
    • 3、整個系統(tǒng)需要形成一套完整的UI設計規(guī)范
    • 4、布局靈活，適配不同布局要求
  • 金融行業(yè)UI設計規(guī)范沿用
    • 規(guī)范沿用
    • 1、后續(xù)的UI規(guī)范更好的沿用到其他子系統(tǒng)
    • 2、提升優(yōu)化用戶體驗的方法論和知識
    • 3、系統(tǒng)風格沿用至少5年不被淘汰
    • 4、開發(fā)中建立對應的組件代碼庫和主題庫

工作方法

  • 準備階段
  • 開始
  • 中期
  • 成果
  • 交付物
  • 節(jié)點確認
用研 了解系統(tǒng)及構思用研方式
1.熟悉系統(tǒng)
2.梳理訪談內容
3.確定訪談方式
4.確定邀請人選 進行用戶研究 		1.邀請用戶訪談
2.了解用戶使用過程中痛點難點
3.進行業(yè)務場景歸類，了解不同業(yè)務場景用戶使用習慣 根據用研結果驗證交互可行 		針對用研階段的問題，進行交互驗證，查驗是否解決用戶問題。 校驗交互設計稿，對比提出修改意見 1.用研問題清單
2.系統(tǒng)存在問題清單
3用研報告 		用研報告確認函
交互 成為系統(tǒng)用戶
1.熟悉系統(tǒng)
2.梳理系統(tǒng)架構
3.參考競品
4.??體發(fā)現(xiàn)的問題
5.初步構思解決方案 		1.協(xié)助用研同事進行用戶訪談
2.記錄用研過程中的問題
3.將記錄的問題與準備階段發(fā)現(xiàn)的問題進行交叉對比驗證，找出哪些是共性問題，哪些是新增問題，為交互設計提供支撐。 		1 設計交互原型，先進行關鍵模塊的設計。
2. 聯(lián)系客戶進行原型測試，并收集測試反饋。
3.依據用研反饋問題和用戶反饋問題，進行迭代修改。
4.重復此過程完成全部。 		分批確認交互原型至確認 1.補充問題清單
2.需求分析文檔
3 關鍵節(jié)點的交互設計圖
4全流程的交互設計 		交互設計確認函
視覺 1.熟悉系統(tǒng)、目標用戶
2搜集相關軟件資料 		1.搜集相關設計風格圖片、競品設計 依據原型圖進行視覺設計 分批確認視覺稿至確認 視覺設計 視覺設計確認函
開發(fā) 了解系統(tǒng)技術前端開發(fā)框架，做好技術選型 和設計師溝通，熟悉設計稿的交互跳轉方式操作邏輯 依據視覺設計稿進行前端開發(fā)，進行視覺走查，保證良好的復原度和良好的使用 接入數(shù)據、對好接口和聯(lián)調，后端寫好功能，通過綜合測試 軟件代碼 前端開發(fā)確認函
階段目標 1.消除對系統(tǒng)的陌生感
2.找出當前系統(tǒng)在交互和信息架構上存在的問題 		對齊認知，消除認知偏差，深入了解用戶需求完善場景劃分，了解現(xiàn)在系統(tǒng)和用戶期望之間的差距，確定優(yōu)化方法。 對用研反饋的問題進行針對性的改進，并落地形成可視化解決方案。 依據交互設計，提供完整的視覺設計方案，前端開發(fā)接近設計稿，完成最終開發(fā)功能及測試

協(xié)作機制

  • 時間：根據調研訪談計劃
  • 參與人：藍藍設計、訪談對象
  • 主要溝通內容：相關需求
  • 成果：訪談紀要、調研反饋與總結
  • 時間：每周二
  • 參與人：雙方項目組負責人
  • 主要溝通內容：工作完成情況，設計方案、資源協(xié)調、風險預案。
  • 成果：項目周報（界面及交互設計展示）
  • 時間：交互設計和UI設計節(jié)點，開發(fā)節(jié)點
  • 參與人：雙方項目組
  • 主要溝通內容：對交互設計和UI視覺設計做評審及開發(fā)效果走查 培訓
  • 成果：評審結果、修改意見
  • 時間：交互設計和UI設計節(jié)點
  • 參與人：雙方項目組
  • 主要溝通內容：對交互設計和UI視覺設計做評審
  • 成果：評審結果、修改意見

方案亮點

01 十年積累，對征信系統(tǒng)、數(shù)據報送、反洗錢、1104、east等軟件業(yè)務的理解

藍藍設計持續(xù)關注征信系統(tǒng)、數(shù)據報送、反洗錢、1104、east等軟件的細分領域，通過和多家公司合作此類項目的經驗，對業(yè)務功能及用戶喜好有一定了解。
      參加金融、銀行的各種工作坊，關注國外行業(yè)領先者產品，不斷學習和提升，形成先進的方法論，并在項目中已驗證落地。
可以整合系統(tǒng)架構，畫出軟件整體全流程頁面交互原型，合并或展開任務步驟頁面，優(yōu)化操作流程，提升用戶滿意度和工作效率。

金融行業(yè)UI設計經驗
02 專業(yè)的研究設計和研究方法

從用戶體驗設計的角度
了解現(xiàn)有用戶對系統(tǒng)的日常使用情況及使用習慣，梳理產品體驗和系統(tǒng)可用性問題，用戶對系統(tǒng)的使用場景和需求。

  • 提問：您通常使用哪些功能？為什么這些功能對您很重要？
  • 詢問：您認為目前軟件哪些方面做得好？哪些方面可以改進？
  • 探討：使用中是否遇到了任何困難或挑戰(zhàn)？有什么建議？
金融行業(yè)UI設計研究方法
03 邀約最終典型用戶和內部用戶，傾聽洞察用戶的觀點，開展工作坊

內部用戶條件

來自咨詢部、交付中心的工作同事

熟悉業(yè)務場景要求，熟悉任務操作流程要求

熟悉界面功能以及用戶操作，了解典型性問題和代表性問題。

代表系統(tǒng)的典型用戶，分角色參與討論

每個參與者有一個指定的身份(分別以操作員、審查員的身份)代入參與小組座談會+工作坊討論。

外部用戶條件

來自終端銀行的業(yè)務部門的典型用戶，熟悉業(yè)務場景要求，熟悉任務操作以及流程要求

為日常高頻使用系統(tǒng)的用戶，熟悉系統(tǒng)/子系統(tǒng),熟悉界面功能以及系統(tǒng)操作，了解典型性問題和代表性問題

操作角色(以數(shù)據錄入和上報等操作為主)，審查角色(以業(yè)務審批、業(yè)務管理設置等操作為主) = 1：1

金融行業(yè)ui設計焦點小組方法討論
金融行業(yè)ui情景訪談
04 全流程交互原型設計，對關鍵及復雜任務場景創(chuàng)新改變原有布局和工作流程

對關鍵及復雜任務場景，進行內部及外部用戶的調研，了解用戶期待和使用時的痛點后，結合對產品的理解，專業(yè)的設計積累，顛覆性改變原有布局和工作流程，創(chuàng)新改變交互方式，使軟件更易用。

金融行業(yè)UIUE案例
金融行業(yè)UIUE案例
05 用儀表盤搭建管理駕駛倉，讓用戶秒懂整個平臺工作運行情況

全局首頁主要功能地位為讓用戶了解整個平臺工作運行情況，當天任務情況；并將用戶分流引導至關注的子系統(tǒng)中。
      用多維表格儀表盤快速搭建了豐富的管理看板，它可以幫助管理者快速查看業(yè)務數(shù)據，管理者也可以根據自己的需求自定義配置圖表，隨時、全面地從多維度了解業(yè)務進展狀況，及時調整業(yè)務策略，提高業(yè)務效率和業(yè)績。

金融行業(yè)全流程原型設計
06 微動效信息折疊收納，界面空間利用更合理

金融業(yè)務的復雜性直接影響了產品設計中的信息量和展示方式，這對設計師提出了嚴峻挑戰(zhàn)，在有限的視覺空間內如何高效、清晰地傳達關鍵信息。以便攜式筆記本為例，一屏看到的內容有限，往往導致頁面布局擁擠，影響用戶體驗。
      面對這種信息過載的問題，我們提出了“折疊收納”的設計策略。通過合理的信息層次劃分和交互設計，將大量信息進行有序的組織和隱藏，使得用戶在需要時能夠方便地展開獲取，而在不需要時則保持頁面的簡潔和清晰，實現(xiàn)信息與美觀的雙重優(yōu)化。

金融行業(yè)UI設計微動效
07 多維表格解決表格內容過多，打破舊有表現(xiàn)形式，直觀生動傳達數(shù)據

所見即所得的頁面顯示和編輯，用戶不用跳出頁面和尋找其他入口包括結構化的數(shù)據展示，表頭篩選，表格嵌套結構，主子表結構設計，高級篩選-選項顯示等功能。

金融行業(yè)UI表格設計
金融行業(yè)UI表格設計
08 優(yōu)化卡片內容，尋求每個場景下的極致體驗

卡片式設計包含圖片以及文案并且有明顯邊界的信息區(qū)塊，本身可以是一個完整的信息區(qū)塊，也可以作為更多具體內容的一個入口，同時也能承載豐富的互動方式。同時卡片的里面內容的層級關系，以及信息的主次在設計時是要特別注意的，否則會讓信息顯得雜亂。所以卡片設計作為一個獨立的容器，可以在內容上進行良好的布局組織，將信息分塊，突出重點，讓用戶快速找到感興趣的內容，避免在繁雜的信息集中浪費時間。需要展示給用戶的第一要素是『這是什么應用』，每個獨立卡片中承載的圖標和名稱可以以最生動形象的感知傳達給用戶。 注重功能化導向設計，讓用戶愉悅的完成任務，注重感知和情緒設計會讓用戶更加喜歡。

金融行業(yè)UI卡片設計
金融行業(yè)UI卡片設計
09 輸入表單的美觀提升，易用增強

在金融數(shù)字中臺產品設計中，由于業(yè)務體量龐大、信息復雜。對于信息的準確性也要求非常高。那么，對于承載信息錄入的表單來說，表單的設計就變得尤為的重要。如何快速的讓用戶在最短的時間內錄入好正確的信息。是我們在設計表單時常常值得思考和深究的問題，為用戶減負為目標，在完成數(shù)據采集任務的時候盡量給用戶帶來最小的操作負擔；表單效率是衡量表單設計優(yōu)劣的重要指標，通過合理的信息輸入組件與頁面布局和交互方式可以使用戶快速完成表單頁的信息填寫任務。

金融行業(yè)輸入表單UI設計
金融行業(yè)輸入表單UI設計
10 更多的提醒和顯示，減少操作錯誤，提升業(yè)務效率
金融行業(yè)彈窗提示UI設計
11 情感化引導，增強用戶引導流程

更多的提醒和顯示，減少操作錯誤，提升業(yè)務效率。增強用戶引導流程，分別為增加設計全局性的首頁和子系統(tǒng)首頁；增加頁面提示引導信息。

金融行業(yè)用戶引導流程UI設計
金融行業(yè)用戶引導流程UI設計
金融案例

內容調查