苗麗娟 李銀鈴 孟慶紅

摘要本文首先闡述和分析了界面設計的含義及其重要性,然后界定了什么是交互式學習網站及其特點,最后嘗試提出一個有效的交互式網站界面設計思路或者理論模型。

關鍵詞界面設計交互式網站結構設計交互設計

中圖分類號:TP393.02文獻標識碼:A

網絡信息技術的發(fā)展使得人們越來越緊密地同網絡進行接觸,各色網站是人們與網絡進行親密接觸的門戶,而網站界面是實現(xiàn)“人機交互”的第一站,良好的界面設計將是為用戶營造良好“第一印象”的第一重要工作。網站不再是將所有內容平鋪在電腦屏幕上,而是將復雜的內容以簡單方式呈現(xiàn)在用戶的面前,讓用戶選擇自己感興趣的方面進行深入的學習和了解。

1 網站界面設計及含義

網站的界面是網站與用戶交互的最直接的層,網站的形態(tài)就是從界面上體現(xiàn)出來的,因此網站的形態(tài)設計的關鍵就是界面設計。以往的界面設計大都從設計者的角度出發(fā),以設計者的技術水平和審美來規(guī)劃網站,而忽視了用戶對網站的要求,沒有這個好的界面作為切入點,就不能很好的實現(xiàn)網站的價值。這里筆者從形態(tài)設計理念出發(fā),給界面設計下一個定義:界面設計是為了方便用戶獲取信息以及吸引用戶的持續(xù)關注而對界面的結構布局、交互形式和整體風格進行的設計。未來成功的學習網站,重要的是讓學習者體驗到學習的樂趣和滿足,而不是從內容上告訴他所學習的內容是如何的有價值,學習后會考很高的分數(shù)等。很明顯,教育網站的“提高分數(shù)”功能已經被放到了相對次要的位置,怎樣吸引學習者的關注,怎樣迎合學習者的學習興趣等等成了網站設計者首要關注的內容。

2 交互式學習網站的界面設計

2.1交互式學習網站及其特點

交互式學習網站是以學習者為中心,依據一定的教學思想、教學理論和學習理論,以網站平臺為依托,提供豐富而生動的學習內容,促進學習者有效的學習,并且學習者、教師、網站開發(fā)人員之間保持實時的和非實時的信息交流和信息反饋,以幫助完善網站的學習功能。交互式學習網站不僅是對傳統(tǒng)的課堂教學的補充,還可以作為一個交流的平臺,強化學習者之間、學習者與教師之間的溝通,通過各種交互手段,學習者不再只是學習內容的接受者,而是積極的參與到學習中來,脫離了課堂學習中的約束和緊張的氛圍,將自己完全融入這個環(huán)境里感受學習的滿足感和成就感。這些都是交互式學習網站所具有的特點和功能。

2.2交互式學習網站的界面設計

在進行界面設計時必須明確學習者即網站的適用人群,進行界面設計之前必須要明確學習者是誰。界面設計應該遵循整體到局部的順序,先制定出頁面的整體布局和結構,確定導航類型和位置,再確定整體的風格和顏色的變換。

(1)結構設計。結構設計是界面設計的骨架,通過對內容分析和用戶分析,制定出產品的整體架構,需要對整體布局有一個清晰的輪廓。界面的結構一般分為多窗體、單窗體以及資源管理器等多種風格。根據內容的組合和設計要求及設計者的審美觀點來進行選擇。資源管理器的窗體設計清新明朗,最上邊的橫向導航條將網站的內容分為幾個大類型,左側則是所選類型的細化分類,客戶可根據自己的需要來選擇閱讀和了解自己感興趣的文章或模塊。用戶可以很快選擇自己喜歡的內容進行學習,其他的內容不會占用僅有的屏幕和頁面空間,影響學習的心情。

(2)交互設計。交互設計的目的是使網站讓用戶能簡單的使用。 任何網站功能的實現(xiàn)都是通過人和機器的交互來完成的。因此,用戶的因素應作為設計的核心被體現(xiàn)出來,使得用戶在使用產品時愉悅、符合自己的邏輯、有效完成并且是高效使用產品。用于交互功能的主要有導航條、選擇按鈕、出錯提示,兼用鼠標鍵盤,當前位置報告等等,總之交互的目的就是讓學生在網站里來去自由,盡快達到自己的目的。在所有交互的設計中,導航條的設計尤為重要。同樣使用了導航條,網頁給人的感覺就有很大的差別,同樣是內容很多的分類,豎向排列就要比橫向排列更有層次性和條理性。

(3)視覺設計。視覺設計首先要確立網站的整體風格,是明快鮮艷型的、是古典樸素型的、還是清新素雅型的,確立整體風格后可以依據風格進行色彩的選擇和搭配,二者是相互融合的。此外,文字的字體、大小、顏色等樣式也要配合整體的顏色和風格,圖像和動畫雖可以增加注意力,但要控制圖文比例,不能給人以眼花繚亂的感覺,而且太多了會大大降低網頁的瀏覽速度。

做好以上設計工作,一個網站的基本結構和格調就已經確立了,即確立了大方向后還要對界面的東西進行細化的調整和修改。網站的設計不是一個一蹴而就的任務,需要在進行網站建設時不斷的改進和創(chuàng)新,本文探討了有關交互式學習網站的界面設計的一些問題,并對具體的界面設計提出了一些流程和規(guī)劃,相信會對進行交互式學習網站的界面設計的教師和開發(fā)者有些幫助。