金融信息云平臺總體設計

1、 金融信息云平臺總體設計目 錄 TOC o 1-2 h z u HYPERLINK l _Toc32759234 平臺總體方案 PAGEREF _Toc32759234 h 2 HYPERLINK l _Toc32759238 1.1平臺業(yè)務方案 PAGEREF _Toc32759238 h 2 HYPERLINK l _Toc32759239 1.2技術方案 PAGEREF _Toc32759239 h 3 HYPERLINK l _Toc32759240 1.3產品功能列表 PAGEREF _Toc32759240 h 35平臺總體方案平臺業(yè)務方案業(yè)務全景圖金融信息云平臺圍繞中小微企業(yè)，以

2、企業(yè)采購，銷售，結算，授信，分銷商管理，催收款等流程為主線，提供覆蓋企業(yè)生產全流程的面向不同部門人員使用的一系列輕量應用群，在解決企業(yè)痛點需求基礎上，快速擴大蘭州銀行存貸量，打造同業(yè)最強的對公互聯網金融信息服務生態(tài)圈。金融信息云平臺面向中小微企業(yè)服務，有可復制性，填補了傳統銀行面向中小微企業(yè)服務空白。采用最新的移動互聯網和云平臺技術，充分利用銀行服務優(yōu)勢和個人存款業(yè)務優(yōu)勢，面向企業(yè)不同關鍵人，提供一系列輕量應用，切入企業(yè)痛點，擴大存貸量。通過以小微企業(yè)為目標，貫穿起包括企業(yè)剛需進銷存、企業(yè)投融資、企業(yè)記賬理財、企業(yè)協同辦公、企業(yè)業(yè)務支持、信息查詢等全套服務，構建面向中小微企業(yè)的金融服務平臺，實

3、現將金融產品對企業(yè)在各環(huán)節(jié)上的支持提升到新的水平，在企業(yè)轉型互聯網潮流中占據先機，取得行業(yè)領先優(yōu)勢。關鍵特性設計 金融信息云平臺整體服務基于SaaS和PaaS模式設計，用戶使用租用的方式享受云服務，用戶不必自己搭建應用、配置硬件與軟件環(huán)境。小微企業(yè)云平臺提供企業(yè)常用輕應用和各種平臺級基礎服務，第三方平臺也可以快速接入平臺，快速形成服務能力。 根據小微企業(yè)設計各種基礎角色，方便企業(yè)不同人群按需使用服務。擁有完善的權限管理系統，可以控制到頁面菜單級別，讓企業(yè)數據更加安全。技術方案系統設計原則先進性系統采用符合信息技術發(fā)展趨勢的先進技術，硬件系統應選擇先進、成熟、穩(wěn)定、性價比高的設備；軟件系統的選擇

4、與開發(fā)應建立在跟隨行業(yè)發(fā)展與滿足業(yè)務需求的基礎上，具有易開發(fā)、易升級、易操作、易維護等特點。前瞻性高起點規(guī)劃，高標準建設，高水平管理。充分把握互聯網金融與電子商務的發(fā)展趨勢，滿足系統上線后的可持續(xù)運營發(fā)展與完善。穩(wěn)定性系統應具有較高的可靠性和持續(xù)使用能力，保證全年724小時穩(wěn)定運行，具有強大的并發(fā)處理能力及快速的擴充能力。安全性系統必須具有嚴謹周密的安全體系結構，必須能夠提供有效、全方位、多層次的安全機制，抵御可能產生的惡意攻擊和病毒侵蝕，并且在系統安全、網絡安全和支付安全等多方面具備合理可靠的安全策略。可擴展性系統設計遵循模塊化、組件化、參數化設計原則，方便靈活，易于改造和擴展；并能通過系統

5、預留的升級接口獨立地、平滑地進行版本升級，功能擴展不會明顯影響系統效率。標準化和開放性系統應具有開放的、標準的接口，能夠實現與行內各系統及行業(yè)應用第三方系統的聯接?？蓪徲嬓詼蚀_記錄所有關鍵操作和訪問記錄，可再現用戶操作痕跡，并作出適當分類以便稽查。用戶體驗良好系統應具有簡潔精美、結構清晰的用戶界面，操作流程須便捷合理，符合用戶行為習慣，用戶請求的響應時間應控制在可忍受范圍內。故障恢復系統須具有完整的故障檢測和恢復機制，最大限度的減少故障帶來的損失和危害。高效實用性系統結構合理、效率高、響應速度快、資源占用率低；適用的硬件系統應具有先進性、成熟性、穩(wěn)定性，性價比較高；適用的軟件系統應具有易開發(fā)、

6、易升級、易操作、易維護等特性。可管理性能夠對網絡、數據庫、應用等資源進行實時監(jiān)控、管理和調度，并根據需要快速進行調整。可移植性系統須兼容大型服務器集群與云計算平臺等多種異構環(huán)境，并能夠穩(wěn)健、快速、安全地進行環(huán)境遷移，過程中服務不可中斷。性能設計原則穩(wěn)定性通過良好的系統架構設計，通過集群、負載均衡等軟硬件設備的運用，通過與安全支撐平臺的接口等多種手段，保證系統運行的穩(wěn)定性。響應速度系統保證在大用戶量時的較高的網站響應和訪問速度。不間斷性為保證二十四小時不間斷訪問，系統在關鍵路徑上實現冗余，關鍵點上實現熱備或群集，并保證運行中的數據同步和故障發(fā)生時的系統自動接管?？杀O(jiān)控性網絡設備采用智能化、可管理

7、的設備，同時采用網絡管理軟件實現分布式管理，使運維人員能夠監(jiān)控整個系統的運行狀況，合理分配系統資源、動態(tài)配置網絡負載，迅速確定系統故障等。時效性平臺系統要求很高的時效性，系統設計應考慮滿足各種服務指標的要求。接口設計原則接口設計遵循標準化、開放性、安全性、穩(wěn)定性四大原則：標準化采用統一的REST標準和規(guī)范設計接口，是目前行業(yè)主流的標準化接口設計方式，并對業(yè)務接口進行統一規(guī)劃，支持多渠道接口支持，避免業(yè)務接口的重復設計。所有的資源都可以使用URL的方式進行標識，通過標準HTTP操作進行交互，每次操作都含有完整的字描述信息。接口設計支持超鏈接關聯，所有的請求對應虛擬的一系列頁面。開放性開放性的接口

8、具備“跨平臺、公網通訊、文檔公開”三大特性?？缙脚_：跨平臺特性從通訊協議、數據格式、國密算法三個方面實現：接口采用HTTP通訊協議，通過HTTP請求和返回進行系統間交互。HTTP協議是構成互聯網信息傳播的通用基礎協議，不受平臺架構、開發(fā)語言等限制，能夠確保與幾乎所有網絡系統實現互聯互通。通過接口傳輸的數據，采用行業(yè)標準的XML或JSON格式進行封裝；為適應多語言環(huán)境，接口傳輸數據的字符集規(guī)范建議采用UTF-8字符集。在設計接口安全機制時，采用主流開發(fā)語言均能支持的標準國密算法，如DES、AES、MD5等。公網通訊：接口對公共互聯網開放（HTTP接口不需要另外開放端口），接收來自互聯網上的任何位

9、置的訪問請求。文檔公開：在安全的范圍內容公開包括接口規(guī)范、參數定位、返回值說明、開發(fā)示例等在內接口文檔（“系統互聯”的接口文檔僅在內部公開，“開放平臺”的接口文檔通常發(fā)布在網站上向所有開發(fā)者公開）。安全性從接口鑒權、數據加密、入侵防護等方面制定全面的安全保障機制：接口鑒權：根據IP地址、系統標識、鑒權密碼等數據進行接口鑒權，只有通過鑒權的請求才會被正常處理，否則拒絕請求并記錄異常日志。平臺對自己的服務有控制權，調用者對自己的數據有控制權。接口代理層的安全檢測包括Token防偽檢測、Token有效期檢測、Token廢品檢測、調用者有效性檢測、授權IP認證、Referer同源檢測。數據加密：采用對

10、稱加密算法（DES或AES）對接口傳輸數據進行加密，避免數據被非法截獲或解讀；同時采用單向不可逆的非對稱加密算法（MD5）對傳輸數據進行簽名驗證，以防止數據被篡改或偽造，防止公共數據被他人竊聽。入侵防護：除了通過加密驗證、漏洞掃描、網絡隔離等手段進行技術性防護外，進一步設計并實現對接口安全的監(jiān)控機制和后臺管理功能，包括：接口日志查詢、接口異常預警、實時請求監(jiān)控、接口運行情況統計分析，等等。穩(wěn)定性接口的穩(wěn)定可靠，需要確保：平臺架構穩(wěn)定、海量訪問性能、運營及快速響應三個要素，對數據一致性方面有較高的要求，需要完善可靠的系統間數據校對機制和相應的功能。平臺架構穩(wěn)定：包括基礎通訊協議、系統參數定義、業(yè)

11、務接口規(guī)劃等等方面的設計方案需盡可能保持穩(wěn)定，如確實需要調整時，應在推出新版接口的同時，保持對舊版接口的向下兼容。海量訪問性能：平臺接口需要支撐海量、高并發(fā)的接口請求，除提高系統性能和吞吐能力外，接口設計方案需包含完善的狀態(tài)檢測、失敗重試、流量監(jiān)控保障等機制。平臺對接口訪問有嚴格的頻度控制，根據不同調用者實施不同的優(yōu)先級待遇，在平臺資源受限時，重點保障重要業(yè)務的快速響應。平臺支持自我過載保護，當訪問壓力接近系統容量閥值時，會主動進行訪問控制，保障系統正常運行，不產生雪崩效應。運營及快速響應：在提供接口的同時，設計實現完善的后臺管理功能，實現平臺接口的可運營、可管理、可監(jiān)控。包括：接口權限分配、

12、鑒權參數設置、流量控制、日志查詢、異常預警、臨時干預手段、數據統計分析等功能模塊。系統間數據校對：設計完善的數據校對機制和功能，保持關聯系統間的數據一致性。包括：定時跑批校對、手工校對、差異數據提取和處理等。系統架構概述金融信息云平臺具有靈活性、擴展性，并擁有強大的后端業(yè)務服務和后臺管理系統，可對業(yè)務體系進行水平擴展，低耦合，可快速開發(fā)、擴展、迭代、上線。以下是系統總體架構圖： 軟件技術架構金融信息云平臺技術架構由寶潤興業(yè)根據需求進行定制化設計與開發(fā),通過多種技術手段，與行內現有的各個渠道進行內容推送。該技術架構，具備一定的的開放性、靈活性和擴展性，同時兼具通訊的高度安全性、可靠性和穩(wěn)定性。技

13、術架構應充分借鑒大型互聯網網站的成功應用經驗，體現互聯網架構的高度靈活、高可用性、高可靠性、高可配置性的思想并能實現快速開發(fā)迭代。完全開放型的平臺，易于擴展，配置靈活；開放式的設計架構，可實現和第三方軟件的接口與集成；充分借用大型互聯網網站的成功應用經驗；操作系統，數據庫，開發(fā)工具盡量采用成熟可靠的軟件產品；無縫升級和橫向擴展能力；基于SOA架構模式。所有服務通過統一方式定義和發(fā)布到平臺，服務之間通過平臺上的消息總線以及統一的內部標準數據結構進行數據交互；完全的模塊化設計，模塊拆分靈活，可平滑升級；系統采用PC服務器群，應用服務器和數據庫支持無限級橫向擴展；采用負載均衡技術，和高效的緩存系統；

14、采用國內主流強大的開發(fā)、測試、管理和維護工具，并可提供；采用多種安全技術，確保安全性和保密性。總體技術架構如下： 整體項目技術架構采用三層體系結構設計開發(fā)。由用戶端的瀏覽器、移動端app、HTML、腳本語言程序組成三層體系中的客戶層；由基于Java應用程序的邏輯事物處理程序組成整個系統最主要的中間層；由數據庫系統和緩存系統等組成系統的數據層。外部接口設計與對接方案外部接口設計規(guī)范 接口設計遵循標準化、開放性、安全性、穩(wěn)定性五大原則： 標準化 采用統一的REST標準和規(guī)范設計接口，是目前行業(yè)主流的標準化接口設計方式，并對業(yè)務接口進行統一規(guī)劃，避免業(yè)務接口的重復設計。所有的資源都可以使用URL的方

15、式進行標識，通過標準HTTP操作進行交互，每次操作都含有完整的字描述信息。接口設計支持超鏈接關聯，所有的請求對應虛擬的一系列頁面。 開放性 開放性的接口具備“跨平臺、公網通訊、文檔公開”三大特性。 跨平臺：跨平臺特性從通訊協議、數據格式、加密算法三個方面實現：接口采用HTTP通訊協議，通過HTTP請求和返回進行系統間交互。HTTP協議是構成互聯網信息傳播的通用基礎協議，不受平臺架構、開發(fā)語言等限制，能夠確保與幾乎所有網絡系統實現互聯互通。 通過接口傳輸的數據，采用行業(yè)標準的XML或JSON格式進行封裝； 為適應多語言環(huán)境，接口傳輸數據的字符集規(guī)范建議采用UTF-8字符集。在設計接口安全機制時，

16、采用主流開發(fā)語言均能支持的標準加密算法，如DES、AES、MD5等。公網通訊：接口對公共互聯網開放（HTTP接口不需要另外開放端口），接收來自互聯網上的任何位置的訪問請求。文檔公開：在安全的范圍內容公開包括接口規(guī)范、參數定位、返回值說明、開發(fā)示例等在內接口文檔（“系統互聯”的接口文檔僅在內部公開，“開放平臺”的接口文檔通常發(fā)布在網站上向所有開發(fā)者公開）。安全性 從接口鑒權、數據加密、入侵防護等方面制定全面的安全保障機制： 接口鑒權：根據IP地址、系統標識、鑒權密碼等數據進行接口鑒權，只有通過鑒權的請求才會被正常處理，否則拒絕請求并記錄異常日志。平臺對自己的服務有控制權，調用者對自己的數據有控制

17、權。接口代理層的安全檢測包括 Token 防偽檢測、Token 有效期檢測、Token 廢品檢測、調用者有效性檢測、授權IP認證、Referer同源檢測。 數據加密：采用對稱加密算法（DES或AES）對接口傳輸數據進行加密，避免數據被非法截獲或解讀；同時采用單向不可逆的非對稱加密算法（MD5）對傳輸數據進行簽名驗證，以防止數據被篡改或偽造，防止公共數據被他人竊聽。 入侵防護：除了通過加密驗證、漏洞掃描、網絡隔離等手段進行技術性防護外，進一步設計并實現對接口安全的監(jiān)控機制和后臺管理功能，包括：接口日志查詢、接口異常預警、實時請求監(jiān)控、接口運行情況統計分析等。 穩(wěn)定性 接口的穩(wěn)定可靠，需要確保：平

18、臺架構穩(wěn)定、海量訪問性能、運營及快速響應三個要素，對數據一致性方面有較高的要求，需要完善可靠的系統間數據校對機制和相應的功能。 平臺架構穩(wěn)定：包括基礎通訊協議、系統參數定義、業(yè)務接口規(guī)劃等等方面的設計方案需盡可能保持穩(wěn)定，如確實需要調整時，應在推出新版接口的同時，保持對舊版接口的向下兼容。 海量訪問性能：平臺接口需要支撐海量、高并發(fā)的接口請求，除提高系統性能和吞吐能力外，接口設計方案需包含完善的狀態(tài)檢測、失敗重試、流量監(jiān)控保障等機制。平臺對接口訪問有嚴格的頻度控制，根據不同調用者實施不同的優(yōu)先級待遇，在平臺資源受限時，重點保障重要業(yè)務的快速響應。平臺支持自我過載保護，當訪問壓力接近系統容量閥值

19、時，會主動進行訪問控制，保障系統正常運行，不產生雪崩效應。 運營及快速響應：在提供接口的同時，設計實現完善的后臺管理功能，實現平臺接口的可運營、可管理、可監(jiān)控。包括：接口權限分配、鑒權參數設置、流量控制、日志查詢、異常預警、臨時干預手段、數據統計分析等功能模塊。 系統間數據校對：設計完善的數據校對機制和功能，保持關聯系統間的數據一致性。包括：定時跑批校對、手工校對、差異數據提取和處理，等等。 與其它平臺系統對接概述 金融信息云平臺系統架構是基于IT業(yè)界開放式標準，且應符合的IT整體架構規(guī)劃和中遠期IT戰(zhàn)略部署要求，對系統中的各種網絡協議、數據接口等進行統一規(guī)劃，滿足與第三方軟件的信息交互要求，

20、為未來的系統擴展奠定基礎。 金融信息云平臺與現有系統如網上銀行、手機銀行、各終端機、統一用戶認證等系統的連接，數據交互內容和數據交互方式應滿足招標人的管理規(guī)范; 電商平臺支持當前互聯網的主流通訊協議，包括：HTTP,HTTPS,TSL 等；支持主流的服務調用方式，包括：RPC、REST 和 Web Server 等；支持當前互聯網數據交換格式，包括：JSON，RSS, Atom，XML，SOAP等。 支持開放API接口供行內系統及第三方應用調用，通過API接口服務為統一信息發(fā)布及金融產品移動展示的用戶提供個性化的服務；支持用戶將平臺使用的第三方應用以接入模式動態(tài)添加到平臺應用列表中，滿足用戶個

21、性化需求。同時，針對法人機構特色金融產品，支持快速定制部署。 統一接口技術（可外接多種協議） 寶潤興業(yè)有一套自主研發(fā)的統一接口服務框架，提供多渠道、多協議的接入支持，可以適配多種通訊協議，接口可定義，支持接口擴展。 主要功能是屏蔽了接口多樣化對核心功能的干擾，實現了核心業(yè)務功能與接口之間的解耦，保證核心功能無需關心數據的流入來源以及數據的輸出目的。 多協議：支持HTTP協議、tcp協議、UDP協議、ftp協議。 多種報文：支持XML格式、JSON格式、文本格式、流格式。 多中間件：支持Webservcie、MQ(activeMQ等)、Mina、cxf、socket、 servlet，現場二次適

22、配。 下圖是統一接口服務接入技術工作機制： 下圖是統一接口服務接入技術具體實例說明： 與網銀系統的對接 金融信息云平臺支持和已有網銀系統對接，可通過服務總線平臺或者遵循與已有的接口規(guī)范進行對接，將銀行相關數據推動到各企業(yè)應用。與手機銀行的對接 金融信息云平臺和已有手機銀行對接，可通過服務總線平臺或者遵循與已有的接口規(guī)范進行對接，把統一信息發(fā)布及金融產品移動展示平臺中的內容推送到手機銀行頁面上。 金融信息云平臺將以H5的形式在手機銀行中進行展示。與各個終端的對接 金融信息云平臺支持和已有有各個終端進行對接，寶潤興業(yè)技術團隊會針對不同終端所采用的技術進行調研，使用最合適的推送方式將內容推送至各個終

23、端。與短信平臺對接金融信息云平臺支持和短信平臺對接，完成 過程中短信驗證功能。用戶體驗設計 終端瀏覽器適配 PC 端支持 IE、firefox、chrome、360、opera 等主流瀏覽器；移動端支持 safri、UC等常用瀏覽器。對不同瀏覽器的兼容性遵循以下規(guī)范，并給予用戶良好的用戶體驗： 高內聚低耦合：頁面結構區(qū)域劃分清晰，各個區(qū)域內容緊密集中。低耦合：區(qū)域劃分如果很明顯，那么各區(qū)域之間的相互關聯的影響性就會最低。高內聚：如果一個 Class（或 id）就可以解決本區(qū)域的所有設置，那就盡量寫一個 Class。因為如果一旦出現了兼容性問題，修改一個Class會很容易以及明確，代碼的可讀性和

24、可維護性、靈活性（必要時在分離開）也大大提高。 高度頁面統一性：將功能相似、頁面相似的代碼塊全部提取出來單獨封裝。便于出現兼容問題后容易修改與維護。 遵循 FF IE：在開發(fā)過程中，要先以非IE核心的瀏覽器為基準，確保在非IE核心向下兼容，那IE也就同時兼容了，頁面也就可以達到大部分瀏覽器兼容的要求。 頁面響應式設計 隨著移動互聯網及智能移動設備的快速發(fā)展，除了智能手機之外，使用平板電腦甚至是電視機進行上網的用戶也在持續(xù)增加。在這種形勢下，怎樣讓網站盡量兼容各種類型的設備，并確保優(yōu)良的用戶體驗，將是越來越重要的問題。 通過響應式Web設計(Responsive Web design)，可以使網

25、站頁面隨瀏覽設備的不同而自行響應，動態(tài)的調整布局結構、元素規(guī)格樣式，將相同的內容以不同的格式呈現給不同設備的用戶。 響應式設計的基本理念，是頁面的設計與開發(fā)應當根據用戶行為以及設備環(huán)境(系統平臺、屏幕尺寸、屏幕定向等)進行相應的響應和調整，通常包括“頁面設計”和“前端實現”兩個方面： 頁面設計以移動web設計優(yōu)先，一般以重內容而輕UI的設計方式，對圖片及顯示內容設計要保證寬度縮小后一樣保持可讀性及視覺美觀；兼顧不同平臺交互形式的操作習慣，例如可點擊元素在小分辨率適應手機端時，要更符合手指點觸操作，所以可設計得大而平；考慮系統對flash的兼容性情況，避免用flash等。前端實現 結合HTML，

26、 CSS， JavaScript等，對整體頁面應用液態(tài)網格布局，結合彈性圖片或彈性影片的技術，以打造靈活的布局結構；使用CSS3 Media Query，或者用JavaScript函數判斷設備種類、分辨率大小、屏幕定向，再按各自不同的特點，及用戶使用習慣準備不同的顯示樣式及交互方式，考慮屏幕大小，有時對某些元素的顯隱作出設置。 在實際應用中，通常針對寬屏電腦、平板電腦（窄屏電腦）、智能手機三種主流屏幕環(huán)境，進行響應式設計（三套布局）。 響應式設計就是頁面應該有能力去自動響應用戶的設備環(huán)境。響應式網頁設計就是一個網站能夠兼容多個終端，而不是為每個終端做一個特定的版本。 響應式設計采用Html5+

27、Css3，只需要設計一套UI，根據不同終端適配匹配多種樣式表，即可實現用戶訪問時，程序自動檢測當前設備同時加載相匹配的終端頁面。 響應式設計效果展示如下： 頁面前端交互技術 寶潤公司基于開源的前端框架和交互組件集Bootstrap進行二次開發(fā)，形成了基于HTML，CSS，Javascript的簡單靈活的頁面前端交互技術框架。 該技術框架具有以下幾個特點： 適應各種技術水平的開發(fā)人員，無論是設計師還是開發(fā)工程師，無論是高級開發(fā)還是初級開發(fā)，都能用來開發(fā)簡單的應用，也能構造更為復雜的系統； 跨設備、跨瀏覽器，最新版本的框架支持所有主流的瀏覽器，同時對平板和智能手機的支持進行了優(yōu)化； 在核心應用層，

28、有穩(wěn)定和靈活的柵格系統可以讓開發(fā)變得更加簡單?？梢赃x用內置的柵格或者自行手寫； 提供完整的響應式特性，所有的組件都能根據分辨率和設備靈活縮放，從而提供一致性的用戶體驗； 框架提供易用易擴展的組件設計方式，同時也提供了定制的jQuery內置插件； 通過LESS構建CSS，避免了傳統枯燥的CSS寫法，通過使用變量，嵌套，操作，混合編碼，低成本的完成CSS的編寫； 支持HTML5的標簽和語法； 支持幾乎所有的CSS3標簽和語法，逐步改進組件達到最佳效果。 模板引擎技術 使用強大的模板引擎技術，基于成熟的Freemarke技術，可生成文本、靜態(tài)頁、XML、Java代碼等。通過Freemarke來實現頁

29、面內容的標簽，支持廣告、公告、資訊等內容以及圖片、音視頻的調用等等。 重構工程師將頁面 UI 重構之后，交給開發(fā)實施人員，開發(fā)人員將重構頁面根據標簽組件進行完善，即可完成內容模板的制作。 Freemarke具有以下特性： 可生成各種不同的文本格式：HTML、XML、RTF、JAVA源代碼等； 不依賴于Web容器，可以隨意嵌入任何產品當中，輕量級； 插件式模板載入器，可從任何源數據（本地文件、數據庫等）載入模板；支持模板切換，一套數據源可制作多個模板，可根據具體需求來進行模板之間的切換。 UI規(guī)范及設計方案 平臺系統將采用專業(yè)的 UI/UE 設計師進行美工設計與代碼開發(fā)，使用 HTML5/CSS

30、3 利用主流支持屏幕適配的排版框架進行頁面排版，并通過適當的動畫效果與交互設計，提升用戶體驗。系統前后端支持Ajax異步傳輸，同時采取壓縮javascript庫與代碼文件、CSS合理布局、Lazyload加載圖片等方式與策略優(yōu)化性能、節(jié)省帶寬。網頁版需支持包含 IE 8+、Firefox、Safari、Chrome 等在內的主流瀏覽器，并實現相應適配代碼。 頁面設計原則 網站風格符合的CI標準和要求；網頁色調和諧美觀，視覺簡潔、穩(wěn)重，結構編排合理。整個網站色彩較為統一，單個頁面色彩不會太雜；文本字體及顏色設計合理，既保證在一屏中能顯示足夠多的內容，又盡量減少客戶的視覺疲勞；在用戶瀏覽任何所選標

31、題的內容時，所看內容在一個窗口內，并且按照窗口的寬度排好內容文字，避免用戶左右移動鼠標或放大窗口，達到方便使用的效果；規(guī)范化處理：在網站整體目錄結構劃分、頁面風格控制、公用文件控制、圖片處理等各方面采用標準化處理，便于日后維護和更新；兼容性：頁面兼容不同的瀏覽器，在各種主流瀏覽器下均能正確瀏覽；新設計的產品的使用界面和操作習慣和原有的產品保持一致能夠縮短用戶用新系統的學習時間和學習成本； 良好的用戶交互設計系統能夠幫助用戶更快的達到目的； 保持統一信息發(fā)布及金融產品移動展示平臺的所有產品的一致性和良好的連貫性，便于版本升級； 簡化產品設計文檔和操作說明的撰寫，因為很多界面和標準的交互行為的描述

32、不再需要過多的解釋，便于網站總體提升用戶體驗。設計工作流程 為指導后續(xù)的設計和制作工作，進一步提高設計標準的規(guī)范性及工作效率，我們需要引入規(guī)范化的工作流程。 產品原型設計制作規(guī)范化的工作流程如下圖所示： 需求獲取階段： 此階段主要進行描述問題、提出初步目標，假想可能的解決方案、預估資源并梳理時間計劃等。 需求分析階段： 基于項目本身，要針對競爭對手、行業(yè)現狀等做詳盡的收集和分析，關注歷史數據并進行分析，通過必要的頭腦風暴，獲取發(fā)散而全面的信息集合。 用戶訪談階段：對于一些條件允許的項目，建議能在項目初期通過問卷訪談等方法，尋求一些用戶的信息，定義一些用戶的屬性，為之后的交互設計打下堅實的基礎。

33、 需求修正階段： 與需求方討論研究需求的合理性、可行性，明確最終的修正目標，并對達成目標所涉及的重點突破點有理性的分析判斷，篩選出各設計點的優(yōu)先級。 設計草稿階段 確定項目目標和設計方向后，進入核心的設計環(huán)節(jié)。設計草稿包括交互流程和線框草圖等形式。一些核心的設計點，是需求修正階段確認的設計重點，需針對這些核心點做業(yè)界調研和分析。 設計細化階段 輸出第一階段的設計工作成果，包括用戶調研報告、需求確認文檔、交互流程、線框草圖、核心設計調研分析、核心設計詳細說明、交互流程整體說明等。 專家評審階段 針對初步設計成果，進行小范圍專家評審。 設計優(yōu)化階段 根據專家評審意見及其他反饋意見，對初步設計成功進

34、行優(yōu)化。 仿真原型（演示版）制作階段 由設計師（美工）和重構工程師（前端設計）根據產品設計方案，制作精準的仿真原型（演示版）。 測試驗證階段 仿真原型（演示版）出來之后，將進入最后的測試驗證階段，根據項目的實際情況，可能是QA測試，也可能是用戶測試。 完成設計階段 最后的設計階段，根據之前的測試驗證評估報告，交互設計師要對所有之前的輸出做一次嚴格的檢查和修正，完成最后的輸出。 設計和制作工具 為了更好地監(jiān)控原型設計的產出物符合一致性，并能夠后續(xù)設計的延續(xù)性，我們需要對設計制作的工具提出統一的建議。 產品原型設計工作分為“原型設計”和“視覺設計”兩個部分。 原型設計 原型設計的目的是優(yōu)化產品與用

35、戶間的交互過程，通過設計產品中所有的操作流程、反饋方式、界面布局等，使產品的布局和流程更容易被用戶理解，讓用戶使用起來順暢、沒有疑惑之處、操作簡單方便。 使用原型制作軟件“Axure RP”作為原型設計工具軟件。 Axure RP是美國Axure Software Solution公司的出品一款原型制作軟件。Axure RP 是目前互聯網行業(yè)使用最廣泛的原型制作軟件，包括騰訊、百度、阿里巴巴、新浪等頂尖互聯網企業(yè)的產品設計團隊均使用Axure RP作為主要的原型制作工具。Axure RP的事件機制能夠模擬大多數Web應用中出現的交互行為，并且它的輸出物是 html，能夠直觀的通過“使用”原型，

36、來想象產品的最終形態(tài)，思考原型是否反映了自己的真實需求。 視覺設計 視覺設計又稱“UI設計”，是針對產品外觀和界面的視覺元素進行的圖像化設計，以確定產品最終呈現的外觀形態(tài)（包括但不限于：布局、線框、色彩、圖標、背景、控件樣式、裝飾圖、模擬信息中的圖像元素，等等）。視覺設計過程中需要大量的專業(yè)圖像處理技術和工具。 使用圖像處理軟件“Photoshop”作為視覺設計工具軟件。 Adobe Photoshop（通常簡稱Photoshop或“PS”）是一個由Adobe Systems 開發(fā)和發(fā)行的圖像處理軟件，它集圖像掃描、編輯修改、圖像制作、廣告創(chuàng)意、圖像輸入與輸出于一體，是目前圖形圖像處理市場占有

37、率最高的工具軟件。目前絕大多數（90%以上）的互聯網產品視覺設計工作是使用Photoshop完成的。原型演示及培訓 在設計過程中便于相關參與討論，需要設計過程中使用的原型演示及設計進行培訓。用于演示和培訓的原型設計成果通常分為“低保真原型”和“高保真原型”兩種，其中： “低保真原型”的作用是跟需求方確認產品的需求和業(yè)務邏輯，通常會盡可能采用簡單概要的表現方式（比如簡單的線框、示意圖、文字說明等），避免在確認需求的過程中，引起與業(yè)務核心邏輯無關的討論。 “高保真原型”是用于測試驗證和需求驗收的最終輸出物，另一方面也作為產品開發(fā)實現的標準和依據，高保真原型會高度仿真產品的最終形態(tài)，在制作時通常包括

38、視覺效果和交互行為，與產品開發(fā)后的最終形態(tài)非常接近。 在產品設計的不同階段，需要使用原型進行演示和培訓。通常根據產品設計的不同階段，或產品的復雜程度，來選擇是采用“低保真原型”還是“高保真原型”。 產品評審演示 在產品設計過程中，需要不斷組織內部評審和專家評審，收集反饋意見作為修正設計思路、優(yōu)化設計方案的依據。在產品評審過程中，通過對產品原型進行演示和講解，參與評審人員能夠準確地對階段性設計成果進行評估。 由于評審需要多次組織和反復進行，通常應使用“低保真原型”進行演示和講解。只有在產品設計基本定型，進入測試驗收階段時，才考慮使用“高保真原型”進行最終的評審。 開發(fā)人員培訓 在產品完成設計后交

39、付開發(fā)時，應對參與該產品開發(fā)的相關人員進行產品培訓，培訓內容包括：產品原型演示、業(yè)務流程及功能細節(jié)講解、交互效果演示和講解、產品實現要求說明等。 進入開發(fā)人員培訓階段時，產品設計已基本完成，主要業(yè)務流程和交互體驗已基本通過評審定型。此時應盡可能使用“高保真原型”進行演示和講解，有利于開發(fā)人員準確把握產品的最終形態(tài)，最大程度減少產品開發(fā)實現過程中產生的誤差，降低由于開發(fā)成果與設計要求間的偏差而導致的反復修改成本。 原型控件規(guī)范 為了提高原型設計的規(guī)范性、統一性和工作效率，我們引入原型控件庫的概念，在基本控件的基礎上，針對具體的設計需求完善個性化的原型控件。 基本的組件包含 Web 組件、IOS

40、組件、Android 組件三大類在內，共計 19套常用組件，如下表所列： 序號組件組件內容1WEB組件網站常用部件 2網站頁面布局 3Tabs標簽 4WidgETLib 5菜單和按鈕 6淡灰色調部件 7導航和分頁 8社交媒體部件 9Better%20Defaults 10Axure Color Swatches 11IOS組件iPhone基礎組件 12mobile-iPhone-Bodies 13mobile-iPhone-Horizontal 14mobile-iPhone-UI 15iPad基礎組件 16iPad Wireframe 17Android組件Android常用組件 18And

41、roid 4.0 - Holo Dark 19Android 4.0 - Holo Light 基本組件均采用 Axure RP組件的形式，可導入產品設計人員的Axure團RP 軟件中直接使用。 使用原型設計工具Axure RP進行原型設計時，產品經理能夠通過引用控件快速完善低保真及高保真的原型設計，在與相關視覺設計人員、交互設計人員、開發(fā)人員以及業(yè)務方進行需求討論時更加高效。 原型控件的設計原則 在統一信息發(fā)布及金融產品移動展示平臺原型設計過程中，幫助網站與用戶進行交互，產生信息的互動反饋，從而產生用戶對產品的感知和體驗效果，因此需要調用原型的控件，而相關的控件會遵從一定的操作原則以及通用規(guī)

42、范。具體如下： 對鼠標指針移動的響應必須即時有效； 響應形式必須明確清晰（如：鼠標移過按鈕，按鈕有被按下的效果）； 在鼠標指針移開時對象必須即時恢復原來狀態(tài)； 命令按鈕也經常被顯示為鏈接樣式（文本+下劃線），此時為了與普通的鏈接相區(qū)分，必須提供非常明顯的不同于鏈接的受范性指示； 顯示為不可用狀態(tài)的按鈕或文本必須保持與可用狀態(tài)的位置、大小、形態(tài)保持一致，僅色彩、灰度和立體效果等發(fā)生變化；操作不可用的情況主要包括：菜單性質和導航性質的操作不可用時不能隱藏，應該顯示為不可用狀態(tài)；工具欄按鈕不可用時不能隱藏，應該顯示為不可用狀態(tài)；當一個操作在用戶進行了某行為（如填寫或選擇了某選項時）就變?yōu)榭刹僮?，則該

43、操作不可用時不能隱藏，應該顯示為不可用狀態(tài)各類通用原型控件說明 為了更好地提高原型設計的效率，通過對控件的使用進行規(guī)范，UE 設計人員不需要更改其他顏色、大小、操作體驗即可完成調用進行設計。 根據梳理原型設計中通用控件的使用情況，針對日歷、密碼、收貨地址、信用卡支付、友情提示、彈框窗口、文件上傳以及內容編輯等控件進行規(guī)范。 日歷控件 日歷控件在網站原型設計中會被經常使用，使用的場景包括但不限于：會員選擇下單時間、會員設置自己的出生年月日、選定出行時間、查詢訂單時間、網站后臺管理員進行數據查詢等。 控件界面如下圖： 控件由日期顯示區(qū)與日期選擇區(qū)組成，當用戶點擊日期選擇區(qū)時，會彈出日歷選擇框，如下

44、圖： 用戶點擊左右箭頭選擇年份與月份，點擊具體日期，選擇最終的日歷時間。 密碼控件 密碼控件在網站原型設計中應用的場景包括但不限于：會員注冊、登錄、賬戶綁定、交易密碼設置等。 控件界面如下圖： 密碼控件由密碼輸入框、密碼確認輸入框以及密碼輸入框提示組成，用戶鼠標指向密碼輸入提示，會彈出提示用語，提示用戶密碼輸入的規(guī)則或者注意事項，如下圖： 地址選擇控件 地址的控件應用的場景包括但不限于：維護會員地址、以及會員的信息維護等。 控件界面如下圖： 控件由兩個輸入框與一個下拉框組成，由于目前原型設計中采用的多數時三聯動的下拉框，用戶只需通過下拉框選擇省市區(qū)，并加上詳細地址就能完成地址的添加，因為那是個

45、性化定制的控件，因此這里就不作介紹。 友情提示控件 友情提示控件作為人機交互中，最能體現用戶體驗度的控件，一個友善的友情提示會給網站加分不少，同時會讓用戶增加好感度。該控件應用廣泛，只要產品經理認為有必要使用，均能調用該控件。 控件界面如下圖： 由于友情提示控件應用廣泛，因此我們會把友情提示控件設計得適用性強，能夠適合各種應用環(huán)境，會以不同的方向進化呈現。 彈框控件 彈框控件作為用戶主動發(fā)起與網站進行人機交互的控件，因此彈框控件的使用體驗以及視覺體驗需要具有一致性，減少用戶的思考難度，該控件應用的場景非常廣泛，只要產品經理認為需要使用，均可進行調用。 控件界面如下圖： 用戶點擊該按鈕，通過遮罩

46、層的形式，進行彈出框的呈現，通過遮罩層能夠減少用戶的視覺干擾，讓用戶能夠聚焦到彈出框的內容上，如下圖： 彈出框的界面顯示的要素包括彈出框的名稱、關閉按鈕、取消按鈕以及確認按鈕，并有意把確認按鈕與其他按鈕的樣式進行區(qū)分，以作識別。 文件上傳控件 文件上傳控件在網站中，應用最多的場景包括但不限于：上傳圖片、上傳憑證、上傳照片等。界面控件如下圖： 控件由輸入框與按鈕組成，輸入框中顯示上傳的文件名，用戶點擊上傳按鈕，彈出文件選擇對話框，如下圖： 用戶在文件選擇框中，進行文件的選擇及上傳確認。 內容編輯框控件 內容編輯框控件應用在發(fā)布內容編輯中，由于該編輯框需要集成多個文字樣式以及嵌入多個控件，因此我們

47、需要用一個界面進行信息的整合?？丶缑嫒缦聢D： 該控件目前只是一個通用性控件，進行個性化定制后，能夠輕松嵌入各種應用控件。包括但不限于：文字的顏色、大小、文字編輯、上傳圖片等。 重構嵌套頁面的設計 嵌套頁面作為網站對外掛的頁面，在設計風格上必須嚴格按照網站的設計規(guī)范進行制作，這樣能夠保持視覺的統一性，不會讓用戶覺得已經跳出網站的頁面，從而降低對網站的信任感。 嵌套頁面必須遵從以下原則： 頁面頭部必須沿用網站頭部；頁面底部必須沿用網站底部； 頁面配色方案必須根據網站logoVI色為基礎進行，視覺和諧統一； 頁面文字設計使用規(guī)范必須符合網站文字使用規(guī)范； 頁面的模塊間距必須按照網站模塊的間距標準；

48、 頁面的交互元素必須按照網站的交互規(guī)范進行設計； 頁面的瀏覽器兼容必須符合網站兼容規(guī)范； 頁面下面不能再嵌套二級頁面； 通過以上對嵌套頁面的設計進行規(guī)范，務求達到擴大網站的經營范圍外，同時能夠在視覺上保持統一，實現用戶愉快購物的體驗。 視覺設計規(guī)范 網站視覺規(guī)范是團隊協作的需要，它能提高團隊工作效率，保持視覺風格統一，讓視覺還原更容易。規(guī)范一般在首頁風格確定后開始制作，根據首頁風格定義出各個頁面的標準。 視覺是一個整體的，通過網站品牌、網站VI及網站UI規(guī)范的統一，能夠把網站產品的定位準確而傳遞出去，讓用戶能夠對網站有個整體的感覺。 品牌及網站VI規(guī)范 積極實施銀行品牌戰(zhàn)略，建立品牌文化，豐富品牌內涵，創(chuàng)新品牌產品，采取多種途徑強化品牌認知度和忠誠度，以提升品牌競