“私塾”網頁界面設計文案

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

一、產品風格定義

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

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

二、圖標設計

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

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

三、色彩設計

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

四、版式設計

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

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

首頁的最頂部是導航欄，分為企業首頁、關于我們、企業動態、實訓案例、教師團隊和聯系我們，每一個按鈕都可以跳轉到相應頁面，而且我把導航欄設置為固定式導航，這樣有便于用戶在下拉后依然可以點擊導航欄的每一個按鈕來跳轉頁面。

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

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

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

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

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