Web端界面設(shè)計與實現(xiàn)
——以某理財網(wǎng)站頁面設(shè)計為例

目前，UI 設(shè)計是當(dāng)今互聯(lián)網(wǎng)網(wǎng)站設(shè)計中的重要一環(huán)。用戶對于互聯(lián)網(wǎng)上的Web 網(wǎng)站的要求越來越偏向高質(zhì)量、界面美觀、操作友好以及讓人一目了然，并且僅憑設(shè)計便可引導(dǎo)用戶進行正確的操作已經(jīng)是基礎(chǔ)要求。因此，建立一套完整的線上P2P理財Web 網(wǎng)頁，將有助于滿足目標客戶群的消費需求，提高消費者操作便利性，進而優(yōu)化產(chǎn)業(yè)結(jié)構(gòu)、資金的流通，降低流通難度，減少交易的成本，能夠更方便快捷、經(jīng)濟地與客戶進行溝通。

1 設(shè)計風(fēng)格

該理財網(wǎng)站的Web 網(wǎng)頁的設(shè)計項目在設(shè)計之初，根據(jù)用戶需求，確定整個項目的主色調(diào)為橘色，橘色的氣質(zhì)為熱情、溫暖，并且橙紅色可以勾起人的購買欲。界面風(fēng)格決定采用抽象扁平化的設(shè)計，這是目前設(shè)計潮流趨勢所向，再者P2P 理財類的設(shè)計，信息才是主體，若是以樣式精美的擬物化風(fēng)格進行設(shè)計容易使客戶“分心”，于是，信息的版式設(shè)計便是重中之重，將平面設(shè)計藝術(shù)中的版式融入設(shè)計當(dāng)中，這樣既能突出主次，也能保證整個版面的干凈整齊，帶給人一種視覺上的舒適感。理財網(wǎng)站W(wǎng)eb 端設(shè)計將以從實用和易用的角度出發(fā)，呈現(xiàn)給用戶舒適、方便、美觀交互體驗。

2 品牌形象LOGO 設(shè)計

LOGO 即商標，是logotype 的縮寫，它的作用是通過形象的圖案讓消費者記住公司主體和品牌文化，也就是說是一種“標識”，是公司或者項目抽象之后的代表，其重要性不言而喻。

LOGO 在設(shè)計之時參考了市面上比較成功的理財網(wǎng)站，設(shè)計出了三個方案：方案一，純圖案。方案二，英文縮寫加圖案。方案三，圖案加中文字樣。并最終選擇了方案一。

方案一的設(shè)計方面，圖案使用了產(chǎn)品主色調(diào)橙紅色為主，白色、淺灰為輔色，使用了古代金錢圖案為基礎(chǔ)，在左方用規(guī)則的圓切了一個開口，形成了一個“C”的圖案，缺了一邊有個隱含的含義是“缺錢找我們”。最后用個圓圈住了金錢，表示財不外泄。而文字方面使用了書法體，蒼勁有力的書法體與古代金錢的氣質(zhì)相符，顏色選擇了深灰色。效果如圖1 所示。

圖1 網(wǎng)站logo

3 Web 端頁面結(jié)構(gòu)設(shè)計

在網(wǎng)頁的原型設(shè)計方面，根據(jù)用戶需求，梳理網(wǎng)頁邏輯，畫出了草稿，再根據(jù)草稿在Photoshop中用鋼筆工具、形狀工具等勾畫出原型圖，并使用Axure 制作出高保真原型圖，使用軟件工程中的原型法進行頁面開發(fā)，能夠在開發(fā)初期，獲取和明確用戶需求，保證開發(fā)工作的順利進行。

網(wǎng)頁的頁面方面遠比App 少得多，所以邏輯也比較簡單明確，頁面跳轉(zhuǎn)部分比較少，大多數(shù)內(nèi)容可以在一個頁面中進行展示。將網(wǎng)站分為四個主頁面——首頁、我要理財、安全保障、關(guān)于我們。“首頁”與“我要理財”是需要重點進行設(shè)計的頁面，“首頁”主要作用是匯總、引導(dǎo)以及跳轉(zhuǎn)，展現(xiàn)的信息是詳細內(nèi)容的概述。于是將“首頁”分為7 個部分，分別是頭部導(dǎo)航欄、廣告輪播banner、本站的優(yōu)勢、投標種類、新聞動態(tài)、合作網(wǎng)站以及頁腳。而“我要理財”則分為頭部導(dǎo)航欄、新手福利、M 計劃、散標投資、債權(quán)轉(zhuǎn)讓以及頁腳。“安全保障”以及“關(guān)于我們”則是公司相關(guān)信息的呈現(xiàn)。

4 Web 端頁面設(shè)計與實現(xiàn)

4.1 導(dǎo)航欄的設(shè)計

導(dǎo)航欄是在banner 上邊的一排水平導(dǎo)航按鈕，它的作用是鏈接站點內(nèi)各個頁面。導(dǎo)航欄的左邊放置了LOGO，右邊則是導(dǎo)航按鈕排列。這樣設(shè)計的原因是因為人的閱讀習(xí)慣是從左往右，那么作為重要的標識，LOGO 自然是放在了左邊。而右邊導(dǎo)航按鈕的文字大小出于美觀方面的思考，所以選擇了14px 這個大小，因為小的字會顯得比較精美，按鈕底部放置了一塊寬70 高10px 的一塊長方形方塊，平時是不顯示的，而在鼠標懸停到上面的時候則會出現(xiàn)，同時字體也會隨之變色。

在網(wǎng)頁前端設(shè)計中，導(dǎo)航欄的實現(xiàn)是先用一個大DIV 將內(nèi)容包在寬1200px 的容器當(dāng)中，然后用一個DIV 裝LOGO，加上左浮動的樣式float：left 即可讓其浮在左邊，另一邊選擇了HTML 無序列表ul li+A 標簽來寫。而鼠標懸停的效果則使用了hover來實現(xiàn)。

4.2 輪播banner 的設(shè)計與實現(xiàn)

這一模塊的設(shè)計主要還是以banner 的內(nèi)容為主，整體設(shè)計方面自然是選擇了流行的通欄設(shè)計，顯得更有沖擊力，廣告的作用會更大，另外在此處特意添加了一個透明浮動窗口，以此來展示了一些信息來吸引客戶在本站進行注冊、投資，此處的“注冊”按鈕是腰圓形狀的按鈕，主色調(diào)為橘色。

在網(wǎng)頁前端設(shè)計中，套用了Javascript 使得banner 可以輪播，同時透明浮動窗口使用position：relative 樣式將其定位在設(shè)計圖上的位置，按鈕也同樣使用定位來調(diào)整位置，并用hover實現(xiàn)鼠標懸停效果。

4.3 首頁模塊設(shè)計

模塊的標題采用了中文加英文的組合，英文在這里為中文的裝飾，這個組合是平面設(shè)計中的一種常見設(shè)計方式，小字體顯精致，而大英文做裝飾則算是撐大了標題所占面積，顯得更醒目，從而達到不失精致而醒目的效果。

“我們的優(yōu)勢”模塊采用了上圖下文的排列對齊方式，圖案采用剪影加上深色背影，使其富有層次感。該模塊的背景使用了一個波紋過渡，從白色過渡到灰色，是為了將面板底色變?yōu)闇\灰色，使得在設(shè)計“投標種類”模塊時可以分清白色的卡片和背景。

“投標種類”模塊，為了體現(xiàn)信息的豐富，呈現(xiàn)了4 張卡片，卡片上的圖案選擇了卡通風(fēng)格，這種扁平卡通風(fēng)格能夠更加突出信息的重要性。右上方的“更多”按鈕是跳轉(zhuǎn)到“我要理財”頁面的一個入口。

此處使用圖片來進行布局，這樣布局的缺點是服務(wù)器需要承受負荷比較大，加載速度慢，而優(yōu)勢是兼容性好，代碼簡練，于是“我們的優(yōu)勢”模塊便使用DIV 實現(xiàn)居中，在CSS 樣式中將此DIV 背景設(shè)為在PS 中切好的圖片。而“投標種類”每個卡片需要切兩張圖，分別是普通狀態(tài)與鼠標懸停狀態(tài)，再用四個DIV 裝著四張普通狀態(tài)的圖片，再用hover 實現(xiàn)懸停效果。

“新聞動態(tài)”模塊分為上下兩個小模塊，上部分是常見的平面設(shè)計中的排版，一邊是圖片配文字，另一邊是純文字，為了不顯得呆板，于是右邊的日期做了放大、變化顏色的效果，凸顯趣味性。下部分則使用純圖片加黑色新聞標題背景的形式來顯示新聞標題，右邊使用了一張較大的圖片，提高了版面的跳躍率。

“合作伙伴”模塊主要呈現(xiàn)與公司合作企業(yè)的LOGO 圖片，讓用戶信賴公司發(fā)展實力。網(wǎng)站整體主色調(diào)選用了刺激消費的橘色而不是氣質(zhì)中可以體現(xiàn)安全可靠的藍色，因為傳達安全可靠的信息可以在模塊中通過圖文設(shè)計來體現(xiàn)，比如“合作伙伴”以及“法律保障”的頁面。

頁腳承擔(dān)的是一個展示網(wǎng)站合法信息、二級頁面跳轉(zhuǎn)、全站導(dǎo)航以及其他信息的地方。顏色選擇了白色，因為若是選擇深色系則與整個網(wǎng)站風(fēng)格不符。左邊是全站導(dǎo)航，在中間幾個二維碼占據(jù)位置，在右邊展示了聯(lián)系電話，顏色選擇橘色的鄰近色黃色，底部則是網(wǎng)站注冊信息。

4.4 “我要理財”頁面的設(shè)計

此頁面是功能型頁面，自然是要以實用為主，這里背景顏色選用了淺灰色，以大標題區(qū)分區(qū)域，以白色為底的圓角矩形將信息框起，讓人一目了然。關(guān)鍵文字、按鈕部分選擇了橘色。設(shè)計中將卡片內(nèi)的重要信息放大，這里放大的內(nèi)容是計劃的名稱、預(yù)期年利率、計劃時長。將重要信息字體放大有兩個原因，第一個原因，經(jīng)研究，來P2P 理財?shù)挠脩糇钤谝馐鞘芤妫浯伟踩c否。將受益放大，并且字體選擇了橘色，這樣可以得到一種沖擊眼球的效果，這是心理上的一種暗示。第二個原因是放大某個信息，整個版面才會有重點，有主有次，版面才會和諧，若全是小字體，用戶第一眼會不知道放在何處，并且會對大量文字產(chǎn)生厭惡感。

文字信息的排列尤其重要，本模板并未插入圖片，因為加上圖片之后會擠壓文字部分，文字部分會顯得擁擠，而且圖片會搶掉用戶的視線，使得用戶不能關(guān)注重要信息。

在“散標投資”模塊中，設(shè)置了一個篩選模塊，這樣有助于用戶更好根據(jù)自己的需要找到自己想要的標。“債權(quán)轉(zhuǎn)讓”模塊其主要設(shè)計風(fēng)格和“新手福利”“M 計劃”模塊相似，主要區(qū)別還是在文字上，突出的重點有所不同。

4.5 “安全保障”頁面設(shè)計

“安全保障”頁面主要展示的是本理財網(wǎng)站自身的水平、合作伙伴的實力、投資商的來源、以及風(fēng)控團隊的能力，但是以文字為主的頁面設(shè)計會顯得呆板、單調(diào)、枯燥，那么如何使得頁面鮮活起來是設(shè)計師需要思考的問題。于是將此頁面分為四個小版塊，每個模塊論述一個點，搭配的圖片選擇了與網(wǎng)站氣質(zhì)相符的卡通商務(wù)風(fēng)格，這種風(fēng)格在首頁的設(shè)計中也有使用，保持了網(wǎng)站整體設(shè)計風(fēng)格的一致性。

4.6 “聯(lián)系我們”頁面設(shè)計

“聯(lián)系我們”的設(shè)計主要講究左右對稱，依然是中文加英文的大標題，頁面中央放置了地圖，上下兩邊則放入了相應(yīng)的信息，聯(lián)系方式則分為兩行現(xiàn)實，分別為公司地址、商務(wù)合作，小字部分中標明了公司的詳細信息，分類使得這些文字信息變得一目了然。

5 結(jié)語

理財Web 網(wǎng)站界面設(shè)計中運用到了藝術(shù)設(shè)計、軟件工程等學(xué)科知識，結(jié)合了各類軟件進行網(wǎng)頁的原型——效果圖——Html 網(wǎng)頁的設(shè)計。在開發(fā)前期規(guī)劃了大體框架，研究了市面上的競品，對網(wǎng)站氣質(zhì)、配色、風(fēng)格進行確定，這樣才可形成獨特特色與風(fēng)格，具有市場競爭力。在交互設(shè)計中，從用戶的角度出發(fā)，網(wǎng)頁中文字、按鈕、圖片的擺放，版面、導(dǎo)航欄、頁腳、浮動窗口的設(shè)計，都需要首先考慮用戶的學(xué)習(xí)成本，一個清晰的、完整的網(wǎng)頁邏輯，可以讓用戶的體驗大幅度提升，如圖2 所示。

圖2 網(wǎng)頁設(shè)計效果展示