chaos混亂中依然存有秩序

新金融科技2-3…首頁布局(Home page design)

在bank3.0一書中提到有88%的消費者是先透過網路認識銀行,

試著先回想你的Portal如何?

前二章提到了佈局網站的結構, 包含

1. 整體動線規劃(使用者會怎麼走訪這個網站)

2. 網站地圖sitemap (我們要怎麼引導他走訪這個網站)

有了這些概念以後, 你得開始思考網站的首頁風格布局,

有些是主打品牌(branding), 有些是主打機能性(functional), 甚至有些是以行銷導向規劃(marketing orientation), 也因此不同的訴求會造就成不同的布局, 為什麼一直強調”布局”

原因正是因為金融網站的資訊量太大了, 怎麼布局才能夠讓進入的消費者感受到這些資訊

是有條理的配置在他的畫面, 而不是雜亂的資訊陳列在眼前?

以下將簡介網頁設計理念並搭配現有官網做說明:

1.圖像資訊化(infographic):

還記得過去的象形文字嗎? 他就是一種圖像化的概念表達, 近幾年又流行回來了,

你看著你的手機, windows的介面這些都是充分利用了圖像資訊來跟使用者做溝通。

以下圖土地銀行與台新銀行為例:

2.泰斯勒定律(tesler’s law):

每樣東西都有他的複雜度, 而怎麼收納就是設計師的功力, 以金融網站來看, 又有機能面,

又有行銷面, 又得兼顧法令公告的事宜, 泰斯勒定律的概念就是將總複雜度不變, 但是能

夠有條理地去將這些元素做呈現。

以下圖中國信託為例: 當有多檔廣告呈現可以利用巧妙收納方式(輪播或頁簽),

因此在複雜度不變之下仍能以好的UI呈現給使用者。

3.一致性(consistency):

一致性包含整體網頁的風格, 以金融網站為例, 金控類的網站更是如此,

因為他更是以集團式的思維去布局他的銀行, 投信, 證券等官方網站, 給予消費者更一致性的感知。

以下圖國泰金控為例, 無論是金控, 銀行, 投信都是一致的風格,

因為對於消費者而言他們都屬於國泰,

透過一致性的規劃讓消費者的體驗與識別更能聚焦。

4.一頁式設計(one page design)

現在的使用者多用手機滾動方式瀏覽網頁,

也因此在PC的版面利用滾動式手法模擬手機的操作行為,

除此之外當網頁縮為小版時, 更是維持畫面上的一致性。

例如:玉山銀行(https://www.esunbank.com.tw/bank/personal)

5.區塊設計(block design)

當你要更以區隔化的方式要怎麼做? 區塊設計就是一種很好的做法,

透過區塊設計, 消費者的視覺動線能夠被你的色塊所引導,

因此可以分為機能與行銷等其他區塊,

但也因為區塊的清楚分割讓使用者操作上不被誤導, 如下圖未來資產投信。

6.響應式網頁設計(Responsive web design, RWD)

RWD是近年最流行的網頁設計方式, 利用CSS下media query讓一套程式碼可以供不同版型使用,

值得思考的是當你採用RWD時你的思維更要從mobile first的角度出發,

過去PC右上角的叉叉很容易讓人馬上跳脫, 別忘了手機的Home鍵…

當你的Home page不是他所想看到的, “他就會用Home鍵離開你打造的Home了”

設計理念有許多, 至於為什麼只介紹6種, 按照7正負2的理念,

若是提出太多設計理念參雜或許會成為選用上的負擔,

或是造成你對設計理念的印象不強烈,

我的建議是, 若是能把一個設計理念發揮的淋漓盡致那也就足夠了,

試想: apple不就是把”極簡”的理念發揮到極致所以讓人印象深刻!