方案價(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)符合用戶(hù)習(xí)慣的信息查找檢索,所見(jiàn)即所得的頁(yè)面顯示和編輯,方便用戶(hù)操作,更多的提醒和顯示,減少操作錯(cuò)誤,提升業(yè)務(wù)效率流程化的信息顯示, 增加操作步驟和動(dòng)線提示,幫助連貫操作,考慮不同角色的使用和操作簡(jiǎn)便性,去除不必要的操作和界面。

  • 新價(jià)值輸出

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

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

工作方法

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

協(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),開(kāi)發(fā)節(jié)點(diǎn)
  • 參與人:雙方項(xiàng)目組
  • 主要溝通內(nèi)容:對(duì)交互設(shè)計(jì)和UI視覺(jué)設(shè)計(jì)做評(píng)審及開(kāi)發(fā)效果走查 培訓(xùn)
  • 成果:評(píng)審結(jié)果、修改意見(jiàn)
  • 時(shí)間:交互設(shè)計(jì)和UI設(shè)計(jì)節(jié)點(diǎn)
  • 參與人:雙方項(xiàng)目組
  • 主要溝通內(nèi)容:對(duì)交互設(shè)計(jì)和UI視覺(jué)設(shè)計(jì)做評(píng)審
  • 成果:評(píng)審結(jié)果、修改意見(jiàn)

方案亮點(diǎn)

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

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

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

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

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

內(nèi)部用戶(hù)條件

來(lái)自咨詢(xún)部、交付中心的工作同事

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

熟悉界面功能以及用戶(hù)操作,了解典型性問(wèn)題和代表性問(wèn)題。

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

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

外部用戶(hù)條件

來(lái)自終端銀行的業(yè)務(wù)部門(mén)的典型用戶(hù),熟悉業(yè)務(wù)場(chǎng)景要求,熟悉任務(wù)操作以及流程要求

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

操作角色(以數(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ù)場(chǎng)景創(chuàng)新改變?cè)胁季趾凸ぷ髁鞒?/span>

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

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

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

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

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

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

所見(jiàn)即所得的頁(yè)面顯示和編輯,用戶(hù)不用跳出頁(yè)面和尋找其他入口包括結(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è)場(chǎng)景下的極致體驗(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),讓用戶(hù)快速找到感興趣的內(nèi)容,避免在繁雜的信息集中浪費(fèi)時(shí)間。需要展示給用戶(hù)的第一要素是『這是什么應(yīng)用』,每個(gè)獨(dú)立卡片中承載的圖標(biāo)和名稱(chēng)可以以最生動(dòng)形象的感知傳達(dá)給用戶(hù)。 注重功能化導(dǎo)向設(shè)計(jì),讓用戶(hù)愉悅的完成任務(wù),注重感知和情緒設(shè)計(jì)會(huì)讓用戶(hù)更加喜歡。

金融行業(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ì)于承載信息錄入的表單來(lái)說(shuō),表單的設(shè)計(jì)就變得尤為的重要。如何快速的讓用戶(hù)在最短的時(shí)間內(nèi)錄入好正確的信息。是我們?cè)谠O(shè)計(jì)表單時(shí)常常值得思考和深究的問(wèn)題,為用戶(hù)減負(fù)為目標(biāo),在完成數(shù)據(jù)采集任務(wù)的時(shí)候盡量給用戶(hù)帶來(lái)最小的操作負(fù)擔(dān);表單效率是衡量表單設(shè)計(jì)優(yōu)劣的重要指標(biāo),通過(guò)合理的信息輸入組件與頁(yè)面布局和交互方式可以使用戶(hù)快速完成表單頁(yè)的信息填寫(xiě)任務(wù)。

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

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

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

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