“私塾”網(wǎng)頁界面設(shè)計文案

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

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

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

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

二、圖標設(shè)計

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

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

三、色彩設(shè)計

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

四、版式設(shè)計

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

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

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

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

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

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

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

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