方案價(jià)值

金融行業(yè)UI設(shè)計(jì)方案價(jià)值
  • 功能新增

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

  • 產(chǎn)品體驗(yàn)改進(jìn)

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

  • 新價(jià)值輸出

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

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

工作方法

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

協(xié)作機(jī)制

  • 時(shí)間:根據(jù)調(diào)研訪談?dòng)?jì)劃
  • 參與人:藍(lán)藍(lán)設(shè)計(jì)、訪談對(duì)象
  • 主要溝通內(nèi)容:相關(guān)需求
  • 成果:訪談紀(jì)要、調(diào)研反饋與總結(jié)
  • 時(shí)間:每周二
  • 參與人:雙方項(xiàng)目組負(fù)責(zé)人
  • 主要溝通內(nèi)容:工作完成情況,設(shè)計(jì)方案、資源協(xié)調(diào)、風(fēng)險(xiǎn)預(yù)案。
  • 成果:項(xiàng)目周報(bào)(界面及交互設(shè)計(jì)展示)
  • 時(shí)間:交互設(shè)計(jì)和UI設(shè)計(jì)節(jié)點(diǎn),開發(fā)節(jié)點(diǎn)
  • 參與人:雙方項(xiàng)目組
  • 主要溝通內(nèi)容:對(duì)交互設(shè)計(jì)和UI視覺設(shè)計(jì)做評(píng)審及開發(fā)效果走查 培訓(xùn)
  • 成果:評(píng)審結(jié)果、修改意見
  • 時(shí)間:交互設(shè)計(jì)和UI設(shè)計(jì)節(jié)點(diǎn)
  • 參與人:雙方項(xiàng)目組
  • 主要溝通內(nèi)容:對(duì)交互設(shè)計(jì)和UI視覺設(shè)計(jì)做評(píng)審
  • 成果:評(píng)審結(jié)果、修改意見

方案亮點(diǎn)

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

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

金融行業(yè)UI設(shè)計(jì)經(jīng)驗(yàn)
02 專業(yè)的研究設(shè)計(jì)和研究方法

從用戶體驗(yàn)設(shè)計(jì)的角度
了解現(xiàn)有用戶對(duì)系統(tǒng)的日常使用情況及使用習(xí)慣,梳理產(chǎn)品體驗(yàn)和系統(tǒng)可用性問題,用戶對(duì)系統(tǒng)的使用場景和需求。

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

內(nèi)部用戶條件

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

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

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

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

每個(gè)參與者有一個(gè)指定的身份(分別以操作員、審查員的身份)代入?yún)⑴c小組座談會(huì)+工作坊討論。

外部用戶條件

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

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

操作角色(以數(shù)據(jù)錄入和上報(bào)等操作為主),審查角色(以業(yè)務(wù)審批、業(yè)務(wù)管理設(shè)置等操作為主) = 1:1

金融行業(yè)ui設(shè)計(jì)焦點(diǎn)小組方法討論
金融行業(yè)ui情景訪談
04 全流程交互原型設(shè)計(jì),對(duì)關(guān)鍵及復(fù)雜任務(wù)場景創(chuàng)新改變?cè)胁季趾凸ぷ髁鞒?/span>

對(duì)關(guān)鍵及復(fù)雜任務(wù)場景,進(jìn)行內(nèi)部及外部用戶的調(diào)研,了解用戶期待和使用時(shí)的痛點(diǎn)后,結(jié)合對(duì)產(chǎn)品的理解,專業(yè)的設(shè)計(jì)積累,顛覆性改變?cè)胁季趾凸ぷ髁鞒蹋瑒?chuàng)新改變交互方式,使軟件更易用。

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

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

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

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

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

所見即所得的頁面顯示和編輯,用戶不用跳出頁面和尋找其他入口包括結(jié)構(gòu)化的數(shù)據(jù)展示,表頭篩選,表格嵌套結(jié)構(gòu),主子表結(jié)構(gòu)設(shè)計(jì),高級(jí)篩選-選項(xiàng)顯示等功能。

金融行業(yè)UI表格設(shè)計(jì)
金融行業(yè)UI表格設(shè)計(jì)
08 優(yōu)化卡片內(nèi)容,尋求每個(gè)場景下的極致體驗(yàn)

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

金融行業(yè)UI卡片設(shè)計(jì)
金融行業(yè)UI卡片設(shè)計(jì)
09 輸入表單的美觀提升,易用增強(qiáng)

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

金融行業(yè)輸入表單UI設(shè)計(jì)
金融行業(yè)輸入表單UI設(shè)計(jì)
10 更多的提醒和顯示,減少操作錯(cuò)誤,提升業(yè)務(wù)效率
金融行業(yè)彈窗提示UI設(shè)計(jì)
11 情感化引導(dǎo),增強(qiáng)用戶引導(dǎo)流程

更多的提醒和顯示,減少操作錯(cuò)誤,提升業(yè)務(wù)效率。增強(qiáng)用戶引導(dǎo)流程,分別為增加設(shè)計(jì)全局性的首頁和子系統(tǒng)首頁;增加頁面提示引導(dǎo)信息。

金融行業(yè)用戶引導(dǎo)流程UI設(shè)計(jì)
金融行業(yè)用戶引導(dǎo)流程UI設(shè)計(jì)
金融案例

內(nèi)容調(diào)查