李健偉(運(yùn)城學(xué)院,山西 運(yùn)城 044000)

一、產(chǎn)品風(fēng)格定義

“私塾”網(wǎng)頁(yè)設(shè)計(jì)理念是體驗(yàn)至上，以人為本，以提高用戶的體驗(yàn)為核心，不斷改進(jìn)工作，跟蹤用戶的本質(zhì)需求，提供熱情的服務(wù)和超期望的產(chǎn)品。在功能設(shè)計(jì)上，對(duì)于點(diǎn)擊按鈕的反饋?zhàn)龀隽嗽卦O(shè)計(jì)。體驗(yàn)至上，就是在滿足網(wǎng)頁(yè)本身的功能需求時(shí)，還要在視覺(jué)上有良好的體驗(yàn)?！八桔印本W(wǎng)站整體風(fēng)格既凸顯扁平化設(shè)計(jì)風(fēng)格的潮流，又具有濃郁的教育元素。

一款優(yōu)秀的產(chǎn)品往往體現(xiàn)在功能和界面兩個(gè)方面，功能可以帶給用戶良好的用戶體驗(yàn)，但是吸引用戶眼球的往往是界面的美觀和設(shè)計(jì)風(fēng)格，用戶在第一時(shí)間進(jìn)入網(wǎng)頁(yè)界面時(shí)，最先給用戶反饋的是視覺(jué)效果，其次是用戶體驗(yàn)，好的產(chǎn)品最具視覺(jué)效果，也是最具有吸引用戶的一個(gè)關(guān)鍵點(diǎn)。排版、用色和細(xì)節(jié)刻畫(huà)均可使每個(gè)頁(yè)面都能夠擁有良好的視覺(jué)效果。所以，在每一個(gè)頁(yè)面中都進(jìn)行了深層次的排版，主要排版方式有列表式、宮格式、卡片式等等，都具有美化頁(yè)面的效果。

二、圖標(biāo)設(shè)計(jì)

進(jìn)入“私塾”企業(yè)，第一頁(yè)便是企業(yè)的首頁(yè)，最頂端“私塾”兩個(gè)字體直接表達(dá)了企業(yè)的名稱，字體運(yùn)用的是微軟雅黑，藍(lán)色加粗效果，表現(xiàn)出整個(gè)企業(yè)濃郁的教育元素。

企業(yè)站主要以視覺(jué)效果為主，在不缺視覺(jué)效果方面增添一些功能型圖標(biāo)和當(dāng)今比較流行的扁平化圖標(biāo)可以帶來(lái)更深層次的視覺(jué)效果體驗(yàn)。首先每張頁(yè)面都有精心設(shè)計(jì)的banner圖，圖上的“一對(duì)一在線教育平臺(tái)”九個(gè)大字運(yùn)用微軟雅黑設(shè)計(jì)，且兩個(gè)“1”都做了加粗、傾斜的效果來(lái)體現(xiàn)企業(yè)的一對(duì)一教育風(fēng)格。頁(yè)面的“more”按鈕進(jìn)行了著重的設(shè)計(jì)，漸變色的關(guān)系以及字體的鏤空和描邊都能夠突出按鈕的視覺(jué)效果，另外加以彌散投影，更加突出按鈕的可點(diǎn)擊效果。每一個(gè)頁(yè)面都由板塊拼接而成，且每一個(gè)板塊都對(duì)應(yīng)其相應(yīng)的功能，并加以小標(biāo)題注釋。板塊之間的距離都經(jīng)過(guò)精準(zhǔn)的計(jì)算，不會(huì)給用戶產(chǎn)生錯(cuò)論感。小標(biāo)題也經(jīng)過(guò)多層修改和修飾，每一個(gè)板塊都運(yùn)用同一個(gè)標(biāo)題設(shè)計(jì)，給人一種吻合感。

三、色彩設(shè)計(jì)

在界面設(shè)計(jì)中，色彩的搭配及用色是設(shè)計(jì)中的重中之重，一個(gè)有氣質(zhì)的項(xiàng)目作品，主要看的是色彩的運(yùn)用。首先從視覺(jué)出發(fā)，選擇了飽和度較高的色彩做為主色時(shí)，要考慮因?yàn)轭伾娣e過(guò)多而造成的視覺(jué)疲勞。所以企業(yè)站以藍(lán)色為主色調(diào)、綠色為輔助色，外加橙色作為界面的點(diǎn)綴顏色。藍(lán)色是永恒的象征，它沉穩(wěn)的特性，具有理智，準(zhǔn)確的意象，作為企業(yè)的主色調(diào)，可以給用戶在視覺(jué)上帶來(lái)安靜、祥和的視覺(jué)效果，給學(xué)生營(yíng)造一種平心靜氣的學(xué)習(xí)環(huán)境。綠色作為輔助色，可使界面具有活力、生動(dòng)感。外加橙色作為點(diǎn)綴，冷暖對(duì)比色是自然平衡的規(guī)律，可以使作品非常的出彩，不顯單調(diào)。

四、版式設(shè)計(jì)

“私塾”網(wǎng)站的界面整體采用了列表式、宮格式和卡片式的排版方法。圖標(biāo)與文字相結(jié)合，不僅增加了頁(yè)面的趣味性，而且節(jié)省了空間，使整個(gè)頁(yè)面看起來(lái)更加的舒適。

網(wǎng)站首頁(yè)體現(xiàn)的是一個(gè)企業(yè)的門(mén)面，是企業(yè)最主要的信息交流界面，也是網(wǎng)站項(xiàng)目設(shè)計(jì)中最重要的部分。一款成功的項(xiàng)目，首頁(yè)一定是最吸引用戶的地方，它可以讓瀏覽者在第一時(shí)間領(lǐng)略到企業(yè)的特色所在，也能夠讓用戶在第一時(shí)間了解企業(yè)文化和企業(yè)信息。

首頁(yè)的最頂部是導(dǎo)航欄，分為企業(yè)首頁(yè)、關(guān)于我們、企業(yè)動(dòng)態(tài)、實(shí)訓(xùn)案例、教師團(tuán)隊(duì)和聯(lián)系我們，每一個(gè)按鈕都可以跳轉(zhuǎn)到相應(yīng)頁(yè)面，而且我把導(dǎo)航欄設(shè)置為固定式導(dǎo)航，這樣有便于用戶在下拉后依然可以點(diǎn)擊導(dǎo)航欄的每一個(gè)按鈕來(lái)跳轉(zhuǎn)頁(yè)面。

“關(guān)于我們”界面引用圖文排版的方式，頁(yè)面主要內(nèi)容包括有關(guān)于我們、文化歷史和企業(yè)服務(wù)。頁(yè)面頂部依然是固定式導(dǎo)航欄，banner下方標(biāo)有頁(yè)面跳轉(zhuǎn)指向，可以減少用戶記憶，讓用戶一目了然的知道自己所在的頁(yè)面。底部精心設(shè)計(jì)的分頁(yè)導(dǎo)航，運(yùn)用描邊來(lái)凸顯跳轉(zhuǎn)的頁(yè)面以及跳轉(zhuǎn)按鈕，頁(yè)面所在的導(dǎo)航，運(yùn)用填充加描邊來(lái)凸顯，可以讓用戶更直白的看到頁(yè)面跳轉(zhuǎn)的數(shù)量。

“企業(yè)動(dòng)態(tài)”界面，頁(yè)面大部分都以圖片的形式展示，界面運(yùn)用宮格式布局將圖片一一呈現(xiàn)在界面上，在這里，用戶不僅可以時(shí)刻關(guān)注我們企業(yè)的動(dòng)態(tài)，而且可以點(diǎn)擊教學(xué)視頻下方的每一個(gè)視頻科目來(lái)進(jìn)行學(xué)習(xí)。每一個(gè)科目都設(shè)計(jì)了鼠標(biāo)懸停效果，彌散投影加描邊恰到好處的融合，給用戶產(chǎn)生不一樣的視覺(jué)效果，使平淡無(wú)奇的課程列表，瞬間增添幾分活力。

“教學(xué)課程”界面，運(yùn)用列表式布局將整個(gè)頁(yè)面鋪滿，每張卡片都運(yùn)用了彌散投影，并且統(tǒng)一左邊文字右邊圖案，整體視覺(jué)干凈整齊，每張卡片的最左邊都標(biāo)有阿拉伯?dāng)?shù)字，在視覺(jué)上，給用戶一種順序感，滿足用戶從上到下的觀看體驗(yàn)。

“師資力量”是每一位學(xué)生及家長(zhǎng)密切關(guān)注的點(diǎn)，為了吸引更多的用戶，把師資力量單獨(dú)放在一個(gè)頁(yè)面，具體且詳細(xì)的介紹了公司的每一位教師及學(xué)校的師資，并且還配有每一位老師的授課視頻。頁(yè)面整體采用宮格式布局，可圈可點(diǎn)的字體設(shè)計(jì)及大膽的用色，更加突出每一處的與眾不同。

“聯(lián)系我們”界面，界面最大的特點(diǎn)便是在頁(yè)面中間放置了一個(gè)站點(diǎn)地圖，站點(diǎn)地圖上方標(biāo)有公司的地址、電話及公司名稱，用戶可以通過(guò)此頁(yè)面看到我們公司的詳細(xì)地址，站點(diǎn)地圖中有一個(gè)似放大鏡一樣的兩個(gè)圓，這是為了放大公司附近的地圖路線及周邊明顯的建筑物，便于用戶更容易找見(jiàn)我們公司。