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

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

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

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

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

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

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

圖1 網(wǎng)站logo

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

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

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

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

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

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

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

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

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

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

4.3 首頁模塊設(shè)計(jì)

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

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

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

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

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

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

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

4.4 “我要理財(cái)”頁面的設(shè)計(jì)

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

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

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

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

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

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

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

5 結(jié)語

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

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