時間:2022-05-01 05:12:23
序論:速發表網結合其深厚的文秘經驗,特別為您篩選了11篇網頁界面設計論文范文。如果您需要更多原創資料,歡迎隨時與我們的客服老師聯系,希望您能從中汲取靈感和知識!
[中圖分類號]J524.3[文獻標識碼]A[文章編號]1009-5349(2011)06-0089-01
在今天的中國,大多數的人每天都在使用互聯網。查找信息、閱覽文章、娛樂、交友、購物等都可以在網絡上實現,查看網頁已經成為了人們生活的重要內容。
網頁由多個設計元素組成,各個設計元素向我們傳達著信息。其中色彩是最先映入人們眼簾的,它決定了網頁的印象,同時也影響到網頁界面設計的成敗。設計者在網頁界面設計中利用色彩來表達網站主題,烘托網站內容,滿足網頁展示方的意愿。與此同時,設計者更應該注重瀏覽用戶的使用需求。在色彩設計上充分考慮瀏覽用戶的心理特征、視覺習慣和操作習慣,使網頁界面色彩設計人性化,便于瀏覽用戶能夠輕松地使用網頁。
如何實現網頁界面色彩設計的人性化?本文從色彩對人的生理和心理產生影響的角度,對網頁設計中的配色問題提出幾點看法。
一、配色和諧,提高網頁文字的易見度
由于顏色有同化作用,人的眼睛識別顏色的能力有一定的限度,色相對比強的顏色易于辨認,色相對比弱的則難于分辨。在網頁界面里,文字、圖案、背景都有自己的顏色,用戶使用網頁時,背景與文字的配色直接影響用戶對內容的辨別和閱讀。而網頁中,文字是用戶攝取的主要內容,在設計時必須考慮文字與其他元素的色彩對比,注意文字的易見度。
在高明度的背景上低明度的文字易于識別,在低明度的背景上高明度的文字易于識別。但如果背景和文字的明度相近,則會出現難以認讀的情況。如,白色的背景上使用黑色文字易見度非常高,而使用檸檬黃的文字則易見度很低。
二、科學使用顏色,避免視覺疲勞
人的視網膜對不同色彩的興奮度有所不同。當人看到高明度、純度高的顏色時,視網膜的興奮度高,因此它讓人感覺到刺眼。當人看到低明度、純度低的顏色時,視網膜的興奮度低,因而會覺得較舒適。
在眾多色彩中容易引起人注意的通常是刺激強度高的高明度色,但如果這樣的顏色在網頁界面中大面積使用極易使瀏覽用戶產生視覺疲勞,因此應盡量少使用高明度背景。而低明度色不會強烈刺激人眼,但過多的使用會給瀏覽用戶帶來壓抑感。
通常,我們可以使用淺色調輔以小面積鮮艷的色塊,使畫面既有對比又統一和諧。如果碰到暗色調的網頁,也可以使用小面積的高明度色來調和。避免網頁色彩過艷或過暗帶給瀏覽用戶視覺上的疲勞。
三、了解瀏覽用戶的色彩心理,合理配色
色彩可以作用于人的感官,刺激神經,喚起人們的特殊情感,這是色彩的心理效應。不同的顏色對同一個人會產生不同的心理效應,不同的人會對同一種顏色產生不同的心理體驗。這種體驗,從認識論的角度來說,是人對客觀世界的主觀反映,是由于每個人的年齡、性別、文化、生活環境、豐富習慣等因素所造成的。
有的設計者在設計網頁界面時,對色彩的選擇僅憑自己的直覺和喜好,沒有對瀏覽用戶群體的心理特征和審美需求進行調查分析,這樣設計出的網頁界面往往難以把握瀏覽用戶對信息的獲取量。因此,網頁界面的色彩設計要了解并把握瀏覽用戶的色彩心理。例如,網頁界面的瀏覽用戶是兒童,界面的用色應選取兒童喜歡的活潑、明亮的顏色。而瀏覽用戶是老年人的話則采用成熟、穩重的顏色。不同的民族對同一種色彩可能有不同的理解。在中國古代,黃色代表威嚴,巴西則代表熱情。紅色在中國寓意為喜慶,但在西方人的眼里,它是恐怖、危險的象征。這些因素在設計網頁色彩時都是應該考慮并加以運用的。符合瀏覽用戶色彩心理的設計才會激發他們的閱讀興趣,利于信息的傳播。
色彩給我們的感受是豐富而奇妙的,它每時每刻都在影響著人們的生活。網頁界面的設計者應在掌握人的色彩心理的情況下,充分發揮色彩的特性,網頁界面達到悅目并且適用的要求,實現網頁界面設計人性化的第一步。
【參考文獻】
[1]旭日東升.網頁設計與配色經典案例解析[M].電子工業出版社,2009.6.
[2]馬炅.色彩的情感屬性在網頁配色中的應用探析[J].長春理工大學學報(高教版),2009.11.
中圖分類號:TP393文獻標識碼:A文章編號:1009-3044(2011)04-0779-03
1 感性化網頁界面設計
1.1 界面設計的發展
界面設計的概念首先是在西方國家提出來的,而且存在了很長的時間,發展到今天己經有了一套自己成熟的理論和實踐經驗,韓國和日本對于網頁界面設計的研究已經走在這方面研究的前端。雖然感性的人機界面設計成為設計領域的焦點,其理論主要用在產品界面設計,在歷年研究生的論文中,大多是從網頁界面設計的色彩、存在的形態及學科相關性方面闡述、或者只是網站建模,很少將理論與設計實踐相結合來研究。人機界面設計的一個細小分支:網頁人機界面的感性化設計在國內還處于起步階段。
1.2 感性工學
上個世紀80年代末在日本出現了感性工學的課題和研究。感性工學(KanseiEngineering)是界于設計學、工學及其他學科之間的一門綜合叉學科。“感性”是一種主觀的難以用文字來描述的心理體驗,它是一種認知的概念,受個人知識、經驗和個性的影響,是個性化的認識。同時感性也是直覺與理智相互作用的結果,感性對美的、情趣的事物特別敏感。對于設計者而言就是把消費者腦海中的構建法則探尋出來,通過破譯消費者的感受,再利用這些探尋出來的法則去進行設計,這就是感性工學設計的首要任務。
1.3 感性工學與界面設計的關系
首先從指導思想上講,感性工學設計的出發點是考慮人的感受即以人為本。從人的角度度上考慮問題高于一切,因為設計的目的就是為了讓產品更好的為人服務。只有以人的感受作為基礎和原始資料,以“以人為本”作為指導思想,從人的感受方面去尋找設計靈感,才能保證設計符合使用者的需求,這是設計的源頭也是設計的動力。其次從設計周期方面講,基于感性工學的網頁界面設計方法論精簡了傳統的設計理念的步驟,設計程序不再那么復雜。對設計過程的精簡不僅提高了設計效率,簡化了繁瑣的設計流程,而且從根本上解除了設計師在思想上的束縛,使設計更加靈活。最后,從設計結果上講,它避免了許多不必要的或者是重復的信息設置,無論是布局還是內容,每一個小細節都來自用戶的真實感受,都經過設計師的深思熟慮。由基于感性工學的網絡形象設計理念設計出來的“產品”應該是符合用戶群體需求,符合市場需求的。網頁界面設計發展到現今的階段,功能合理,適用有效或是有某種外在的美感已經不再能滿足網頁用戶的需求了,感性化網頁界面設計已經成為設計的必然。在網頁界面的設計過程中,研究用戶是其最基礎的一個環節。為了提供自然和直觀的網頁界面,我們就需要表現出以用戶和交流為向導的新的設計方法。對于用戶來說,用恰當的文字和語言來表達自己的“感性”并不是一件容易的事情,設計師就更難辨別出產品的哪些屬性可以喚起人們的何種感性,以及人們的感性是如何隨著產品屬性的改變而改變的,在更多情況下,人們的感性并不只由某一種產品屬性決定。感性工學,因其運用科學先進的現代工具和技術,可以幫助消費者表達自己的感性,甚至是一些他們自己都沒有意識到的情感,設計師可以準確便捷地獲取消費者基于產品和概念的特性的主觀評價,取得消費者對于產品的潛在感受和需求。感性工學除了是可以運用的設計上的工具,更是可以輔助設計師弄清人們感性的利器,從而可以針對不同消費者和消費群體的感性需求,設計出不同的產品造型,在客戶滿意度與設計制造成本之間取得一個平衡點。
2 少兒網頁界面感性化設計現狀調查
本文以常用少兒網站新浪少兒網,希望谷,迪斯尼中國站為例,分析目前的少兒網站感性化設計發展現狀,為下文的研究提供數據依據。
2.1 數據來源及其分析
這項研究分別從用戶和網站角度進行研究。通過對用戶的調查,可以得到用戶的體驗,以及從用戶的角度得到對網站的評價,并且可以發現網站中存在的一些問題。通過對少兒網站的調查,可以了解到網站中吸引用戶的重要因素,以及用戶對網站的評價,從而為網站的設計提供建議。
2.1.1 問卷調查
問卷調查是以書面提出問題的方式搜集資料的一種研究方法。研究者將所要研究的問題編制成問題表格,以郵寄方式、當面作答或者追蹤訪問方式填答,從而了解被試對某一現象或問題的看法和意見,所以又稱問題表格法。在各種調查研究當中,所得結果是否達到調查的目的和要求,以及所搜集到的資料的可靠程度和完善程度都取決于調查問卷設計水平的高低,在可用性研究中,問卷調查可以用來了解用戶的滿意度和遇到的問題,也可以根據客戶服務的反饋,實際使用的記錄或實地測試的方法來了解用戶的實際使用情況。 問卷調查方式可以得到在特定的情況下對使用網絡的體驗,比如少兒上網是為了娛樂,結交朋友還是還是其他,可以得到在這個使用范圍內的精細的用戶需求。本次調查的用戶對象是深圳地區少年兒童。由于深圳是個移民城市,來深建設者來自全國各地,人口多樣化,少年兒童也都是來自全國各地,從而使得調查的數據人口廣泛而具有代表性。在問卷調查的這個環節里,我們的主要目的是發現少兒網站用戶瀏覽網站的目的,瀏覽網站過程中的喜好,期望得到什么,這些期望是如何滿足的,或者為什么沒有滿足。在知己知彼網發表調查問卷,再通過學而思教育機構將將網站公布給深圳五區各小學,每個區都有學生作答問卷,網站對調查問卷的結果進行統計分析,由于篇幅有限只列舉部分問卷結果,問卷調查大多為多項選擇題。從圖1可以看出,少年兒童瀏覽網站時的目的有70%以上是娛樂。
圖1 學生瀏覽網站的目的 圖2 網站吸引用戶因素調查
從圖中可以看出人們在瀏覽一個網站的時候,喜歡一個網站的原因74%的人表示是因為娛樂;瀏覽網站的目的學習與娛樂的需要各占一半;有50%的人是被這個網站的內容所吸引;大多數的用戶喜歡清新,可愛,卡通的界面風格;44%的人認為目前的網站學習資源比較少,同時35%的人認為網站不容易操作,只有65%的人表示在三次以內就能熟練操作一個陌生的網站;59%的人表示容易找到需要的內容;大多數少年兒童希望能夠將資料年級分類以便查找; 59%的人表示希望能夠在線互動;大多數人喜歡網站提供展示自己才藝的平臺;從目前網站存在四個比較嚴重的問題,這個問題分別是網頁彈出廣告,出現錯誤的信息,網頁打開慢,網頁內容更新慢,這四個方面比較嚴重的問題也是我們今后網站設計改進的方向。
2.1.2 文案法
文案調查以收集少兒上網的文獻性信息為主,具體表現為各種文獻資料,可以通過網絡搜索,少兒報紙雜志和報紙來收集相關信息,尤其是通過網絡,可以從更寬廣得角度來獲得更多地有關少兒上網的知識。它可以用來發現少兒上網的問題并為研究提供重要參考依據。這些收集來的數據無法直接使用,需要經過加工才能使用,整個過程對調查者的要求比較高。
2.1.3 啟發性測試
為了得到用戶深層次的體驗,我們以”新浪少兒網”,”希望谷”,為例對用戶進行啟發性測試,在整個過程中從各個方面進行測試,整個界面測試涉及17個問題.比如,發現其中的三個比較嚴重的問題是:打開網站時彈出廣告,這一點是用戶非常反感的。還有一個問題就是網站不容易操作,而有的用戶發現網站不容易操作之后就幾乎放棄再次進入該網站.還有一個問題是,當孩子遇到不會的問題時,沒有老師在線答疑,甚至沒有留言等功能,也就是說這樣的網站缺少互動功能。
3 少兒網站感性意向分析
3.1 設計原則與方法
可用性的設計觀念采用的是逆向式推理感性工學的方法,它將設計的重點放在用戶對真實產品的體驗上,通過對“體驗”的觀察和總結對產品進行不斷的修改和糾正,最終達到“可用性”的目的。
感性網頁界面設計必須把重點放在以用戶為中心,從用戶的需要和用戶的感受出發,設計符合用戶需求的網頁界面,而不是讓用戶來適應界面,從而使界面友好使用。以用戶為中心的設計(UCD)是一種關于產品/系統設計過程的方法論,這個方法論以使用產品系統的人的信息為基礎。無論產品的使用流程、產品的信息架構、人機交互方式等,都需要考慮用戶的使用習慣、預期的交互方式、視覺感受等方面。UCD過程通過產品的計劃、設計和開發聚焦在用戶身上,整個過程包含了以人為中心的活動,它貫穿于產品開發的整個生命周期。
一個好的以用戶為中心的設計方法包括以下三個維度:效率,效能,用戶在特定環境下使用產品的滿意度,滿意度包括產品的易用性,吸引用戶的程度,用戶使用完產品后心理層面的感受。在感性設計的過程中,捕捉用戶的感性需求是感性網頁界設計的最為重要的一步。以少兒網站為例,通過以用戶為中心的感性工學方法提取出少兒網站設計的感性意向。具體從以下三個方面著手:
1) 調查網站和瀏覽者背景信息。
2) 選擇具有代表性的網站進行研究,從而得到用戶體驗。
3) 分析統計實驗得來的數據,并將其轉化成可設計因素。
3.2 少兒網站感性意向分析
每一種類型的少兒網站都有自己的優勢,綜合考慮影響訪問量的因素有以下幾點:網站用戶群體的定位、網站頁面的可用性、網站頁面的易用性、網站頁面的交互性。除此之外,還有一些小細節的設計也能影響用戶的感受,比如網站的注冊流程繁瑣且填寫過的內容不能被存儲記憶,這就會讓用戶感到異常的煩躁不安。基于上述的調查,得出少兒網站形象設計應該簡單,可愛,易用,這才符合少年兒童的心理發展,符合使用需求。
階層分析法
感性工學的階層類別分析法是根據新產品的感性層面來進行分析和分類,以建立產品的感性結構來獲取設計細節,因此主要運用在新產品的開發過程中,將運用階層類別分析法研究出的某種產品屬性決策歸納采入到新產品設計中去。在階層類別分析法操作過程中,首先要對目標產品做一個感性市場的調查。調查主要收集來自于各種渠道的信息,如用戶訪談、市場調研、報刊網絡資料收集等。在此之后,著重的是研究小組成員間的想法表達與充分討論,通過討論凝聚成一個產品概念作為0階感性概念??紤]到0階感性概念的抽象性及難懂性,將其轉譯成稍微具體的1階感性概念就很有必要了。研究人員采用層次遞推的方法,將用戶對產品的感性認識范疇向下拆解形成1階感性概念。接著再由1階感性概念逐次逐步層次分解推論子概念,每一個衍生子概念再分別向下拆解展開成樹狀結構。假如設計團隊無法從某一階層得到具體的設計細節部分,則將繼續往下拆解,直到能夠得到出現物理量的細節設計的詳細說明的階層(作為“N階”)為止,最終獲得符合感性訴求的產品設計物理特性,作為產品開發的基礎。這個“感性――物理特性”的樹狀圖關系,就是貫穿階層類別分析法的一條主要脈絡。
捕捉用戶的感性體驗是是一個網站成功的關鍵地方,從調查設計中的幾個常用的網站看都缺乏這方面的設計。將少兒網站的調查研究結果利用階層分析法,我們將少兒網站的設計定位于以用戶為中心,通過娛樂性,易用性,美觀性,交互性四個一次感受來體現以用戶為中心的0次感受。比如,一次感受中的娛樂性,又是通過趣味性和可玩性的二次感受來體現的。因為少年兒童的心理具有特殊性,所以內容不能嚴肅和呆板,要讓網站達到寓教于樂的目的,內容要充滿童趣,少年兒童對外在的世界還充滿無比的好奇,所以開發交友功能來滿足他們的好奇心。再將1次感性繼續細分,經過N次感性化后最終得出物理上的設計細節。這樣我們就將過去難以量化、只能定性的、非理性無邏輯可言的感性反應,轉化為設計要素。少兒網站感性樹狀圖如圖3所示。
4 結論
通過對以上幾個網站的感性設計現狀調查 ,再將調查的結果運用感性工學方法得出感性意向樹狀圖,得出一下幾點結論:1)增強少兒網站的娛樂性,少兒上網的目的性不是很強,網站的內容要達到寓教于樂的效果;2)增強少兒網站內容易用性,少兒處于接觸網絡的初始階段,操作的簡易性符合少兒用戶心理;3)界面應該卡通化充滿童趣,這樣才能符合兒童的審美;4)增強網站的交互性可以從數據庫方面來考慮,再就是網站的的功能,提供在線問答,問題反饋功能能增強網站的可性度,也是吸引和留住用戶的一個重要方面。樹狀圖的具體物理設計細節就是將瀏覽用戶的感性體驗轉化成了具體的設計細節,這樣的設計符合用戶需求,達到了少兒網站感性化設計的目的。
參考文獻:
[1] 方惠敏,楊國勝,丁文珂.基于人性化網站界面設計的用戶建模[J].計算機技術與發展,2008(2):187-190.
[2] 鐘廈,宋曉晨,孫亞云.感性工學中量化的基本程序介紹[C]//2005年國際工業設計研討會暨第十屆全國工業設計學術年會論文集.北京:機械工業出版社,2005:728-731.
[3] 梅云.感性設計:人機界面設計新思維[J].科技資訊,2008(9):217.
[4] 徐曉莉.基于感性工學的網絡形象設計理念研究[D].濟南:山東大學,2008.
[5] 吳潔.設計藝術學[D].上海:上海交通大學,2007.
[6] 劉增.以用戶為中心的網絡界面設計研究[D].南京:南京航空航天大學,2007.
[7] 李立新.感性工學-門新學科的誕生[J].藝術生活,2006(3):71-73.
[8] 羅仕鑒,潘云鶴.產品設計中的感性意向理論,技術與研究進展[J].機械工程學報,2007(3):8-13.
1、網頁界面設計的現狀和問題
近年來,隨著網絡的廣泛普及,網站已然成為人們吸收了解外界的載體,人們通過上網瀏覽網頁便可以做到足不出戶就可以獲得所需要的信息和物品,網購行業也隨之快速的發展起來,這是因為網頁可以承載圖片、色彩、文字等多種元素,能夠提供給瀏覽者足夠的信息,方便了人們的生活。但是網頁設計迅猛發展的同時,也產生了整體水平良莠不齊的問題:1.信息多且雜亂無序,把相關的信息和元素全部羅列出來,不分層次和重點,沒有規范性,有多少內容就擠多少內容,使瀏覽者難以快速找到所需信息;2.喧賓奪主的設計,使用花哨的圖案作為背景,干擾讀者的視線。有些網站為了追求視覺的沖擊力,放一些絢麗的,風格各異的圖片,導致網頁調性不統一,整體性差;3.一味的追求視覺美感而忽略網站的實用性,凸顯不出產品的優勢和特點,缺少與瀏覽者的互動性。視覺效果固然重要,但是一味的追求視覺效果是否真的能夠提高網站瀏覽量和產品銷售量?
我認為網頁界面設計應該符合美觀性和實用性雙重要求。簡約主義下的網頁設計已經不能單純的追求信息承載量,有一些網站把企業簡介、企業榮譽和資質,全都展現在一級頁面的位置,長篇大論的寫公司的優勢獲得的榮譽,希望消費者一下子就能夠了解自己的公司實力,反而將消費者更加關注的各類產品和主要信息模糊放在在一起,看似信息多了豐富了,效果卻恰恰相反,這讓很多消費者很難在網站里快速找到所需的信息,瀏覽者更是不會看長篇的介紹,這不僅沒有讓消費者了解自己,還會引起消費者的反感導致銷量減少。簡約主義下的網頁設計也不能夠單純的追求色彩,絢麗畫面,過多的顏色會擾亂消費者的視線,找不到重點,反而體會不到視覺的美感,從而降低了用戶體驗。
2、簡約主義在網站設計中的應用(結合蘋果官網分析)
簡約主義源于是20世紀西方現代主義,歐洲現代主義建筑大師與設計大師米斯?凡德羅所提出的“少即是多”的理論,換句話說就是把設計簡化,強調它本身內在的東西。這一理論被稱為簡約主義的核心。當今社會,人們工作強度高,節奏快生活壓力大,人們需要一種可以互補的東西來調節神經高壓。簡約主義以簡潔的表現形式來滿足人們對產品那種感性的、本能的和理性的需求,符合了當今人們快節奏、高效率和高審美的要求,越來越多的設計師把眼光放在了簡約主義風格的設計上,網頁設計在簡約主義風格的影響下也發展迅速。以蘋果官網為例,蘋果公司一直追求簡而精的風格――簡約主義風格。自喬布斯iPhone4,蘋果官網界面設計風格越發簡約。蘋果官網新推出的產品――蘋果7為例,風格依舊遵循著簡約風格,整個頁面除了黑色,找不到其它的色彩,網頁上沒有放置很多的文字內容,也沒有很多絢麗的圖片和色彩,通過極致的黑色和幾根流暢的線條充分的展現出蘋果7的簡約奢華和精致,一張滿屏幕的產品大圖不用長篇文字的描述就已經讓人感受到蘋果公司強大的實力,這種簡約風格的形式遠比那些人們從不會去閱讀的長篇大論更有力量!更有說服力!更加吸引瀏覽者的眼球!大大增強了消費者的購買欲望。然而單純的追求簡約主義設計風格,簡約的畫面和幾張高精大圖就是提高網頁瀏覽量和銷售量的關鍵嗎?顯然不是。
3、簡約主義風格下如何與瀏覽者產生互動,提高用戶體驗
簡約的畫面只是網站設計最終顯示出的效果,在網站設計過程中不僅僅只是考慮網站設計的畫面效果,當然畫面效果也很重要,但更重要的是要考慮消費者和瀏覽者在瀏覽網頁的時候能否產生良好互動和用戶體驗。在簡約主義風格下,如何才能與瀏覽者產生互動,提高用戶體驗呢?1.增加細節的設計。細節決定成敗,網頁設計也是如此。2. 建立清晰的視覺信息導向,使瀏覽者在眾多同類產品中能夠快速明確的定位所需要的信息。
簡約主義下的網頁設計不是空洞的,單調的而是讓人感受舒適、放松的設計。簡約主義風格的網頁設計細節處理是非常重要的。如何才能做到網站設計細節豐富,版式簡約,有內涵而不繁瑣,有形式而又實用呢? 以云米官網為例,云米凈水器網頁設計綜合了視覺、布局、交互綜合設計方法。用扁平化的圖標設計代替了人們看不懂的數據表格,因為產品特點和優勢不僅僅是一句話就能夠讓人信服的,需要用人們能理解的語言展示出來,才更有說服力。用圖片的形式展示產品結構更清晰更加直觀,從視覺上提升了科技感和沖擊性。將實用性與美觀性相結合,畫面更加簡約,細節處理更加豐富,更加吸引瀏覽者的眼球。讓消費者看到這樣的產品就產生一種感覺――買!
良好的可用性和清晰的視覺信息導向引導消費者快捷簡便的定位到所需要的信息,增強用戶的體驗。網頁信息篩選也決定了消費者瀏覽網頁所耗費的時間,云米官網一級頁面展示了品牌故事,超能凈水器,超能濾芯,全屋凈化以及生活周邊。當瀏覽者鼠標放在所需要的類別時,網頁在一級界面自動拉出小的產品框,方便消費者快速找到所需要的產品。二級頁面直接的展示出產品以及產品細節各類信息,高清晰、高品質產品細節圖更加具有吸引力,讓人一下感受到產品的品質。
結論
當下,國內網頁仍存在著很多的問題,在簡約主義風格的帶動下越來越多的設計開始關注并且完善網頁設計的美觀性與實用性的結合,以提高客戶體驗和互動性為目標,用簡明易懂的圖形文字組合代替長篇的數據,把“簡而精”的概念融入到網頁設計中去。
網站界面設計,英文的全稱是Web User Interface Design,又叫UI設計。包括三個方面:可用性,交互設計和視覺設計。通常研究的是讓網站的界面具有更多的可用性,更良好的用戶體驗,以及更美觀的視覺設計,概言之就是“人性化設計”。[1]在全球人口逐漸老齡化的今天,應該把更多的“人性化設計”真正應用在老年人這一弱群體上。本文旨在從老年用戶的生理和心理各要素出發進行綜合考慮,探析以老年用戶為中心的網站界面(UI)設計要點。
1 老年用戶研究
設計優秀老年用戶網站界面的先決條件是與老年用戶進行有效的交流,充分理解老年用戶的需求,重視老年用戶的生理和心理特征。
1.1 老年網民用戶人數眾多
據調查顯示,近些年來,我國老年網民的比例一直在攀升,增長率已經超過了網民總體的增長速度,對于互聯網的應用日益廣泛。根據相關統計報告顯示,2008年年底,51~60歲的網民從1999年的10.6萬人增長到1251.6萬人,60歲以上的由3.5萬增長到447萬人。雖然我國老年網民絕對數量不多,10%不到,處于上網人群的弱勢群體,但卻是以令人矚目的速度增長著。
1.2 老年人對互聯網的多樣化需求
老年人由于心理上和生理上的變化,與兒童、少年、青年人和中年人人群有著不同的特殊需求。根據The Usbased Spry基金會報告顯示,老年人的需求主要表現在四個主題:財產安全、身體健康、精神愉悅和良好的社會氛圍以及參加智力活動。[2]具體表現在:獲取相關信息,一些老年人希望上網瀏覽和查詢最新的外界信息保持“耳聰目明”的狀態,有些則是投身老年論壇,希望利用網絡查詢、瀏覽養生保健和常見疾病等信息溝通交流,有些希望通過網絡和子女視頻聊天、互發郵件;財務管理,還有相當一部分老年人希望能夠使用網絡來購物、買賣股票以及付賬等。總之,老年人對互聯網的多樣化需求一點都不亞于其他人群。
1.3 老年人的生理和心理特點
從50歲到60歲這個階段,明顯地會出現一些衰老的跡象,主要表現在容易健忘,愛發脾氣,認知過程缺乏適應能力;視覺模糊,色彩辨別力降低,視野范圍和判斷距離的能力通常大大不如過去;動作緩慢,手眼配合欠佳,聽覺便開始逐漸減退。[3]總之,因此,隨著年齡增長,工作效率逐漸下降。具體表現如下:
(1)近距離視力退化更大。比如在35厘米左右的讀書距離內,視力減退的驚人,并伴有老眼昏花。據統計,70歲健康老人的視力超過0.6的只有51.4%。
(2)聽力顯著下降。特別是對較復雜和速度快的語言的理解,男性比女性減退的更明顯。老年人并不知道自己的聽力在下降,而是認為別人說話不清楚。
(3)記憶的減退,但也有自己的特點,比如老年人對往事的記憶清晰,而對新近發生過的事物或者新近學習過的內容遺忘較快;對需要將記憶材料進行組織加工使之進入長時儲存方面的記憶力較差;老年人的意義識記減退較少,機械識記減退較多。例如,老年人對人民、地名、數字等東西的記憶效果就不好;
(4)思維能力弱化。在調查里,許多老年人常常抱怨自己已經不能像早先那樣很好的思考問題了,這反映人的思維能力到老年時出現逐漸衰老的趨勢。
2 以老年用戶為中心的網站界面設計要點
在對老年用戶做了研究之后,筆者認為適宜老年人的網站界面設計的總體原則是以人性化為本,同時注意網站的易用性,規范性,美觀性,具體如下五點:
2.1 將操作任務化繁為簡
在越來越強調人機交互的今天,對于老年用戶來說,最好的人機交互就是簡化操作任務,減少不必要的任務,[4]盡量讓老年用戶在網站上面的操作變得簡單,同時又不宜出錯。比如強調基本功能,盡量減少和弱化附加功能。如Gmail的登陸界面,簡化到“登錄信息+登錄設置”即可,無須要其他的附加信息。
2.2 合理的信息顯示
互聯網的根本目的是提供信息,合理的信息顯示包括兩方面的內容:劃分信息功能區和減少視覺密度。[5]
(1)劃分信息功能區。當頁面的信息較多時,為了避免視覺混亂,應該劃分信息功能區。最重要的信息放在頁面的視覺中心;同一類的信息放在一起,并與其他類信息間隔一定的空間;同一類的信息用同一種顏色或同一色系的顏色來表示;不同信息區又可以用不同背景色來區分。
(2)減少視覺密度。網站界面需表達的信息很多時,易造成界面看起來非常擁擠,信息擠在一團,對于老年人來說很難一眼就能獲得所需的信息。因此,必須減少視覺的密度,比如:考慮適當的留白,適當的留白將使整個界面看起來清楚而美觀;降低品牌識別logo、名稱的大小,無需為了彰顯品牌形象而刻意放大;使用簡單的圖形,盡量平面化,不要使用過度復雜的圖像;使用空白空間,而非線條去區分文字內容;使用簡潔的語句表達信息,避免內容過多等等。
如upcoming的首頁設計,依據信息的不同類別劃分板塊,并按重要性擺放在相關位置。焦點活動咨訊配圖放在視覺中心點,緊接著下面是活動信息介紹,左邊的活動類型板塊,右邊是活動的輔助信息。信息安排布局井然有序,是劃分信息功能區和減少視覺密度的最佳例子之一。
2.3 合理的文字規劃
文字對于網站界面的作用不言而喻,對于老年用戶來講,網頁文字的漂亮是建立在易讀易辨的基礎上的,合理的文字規劃,主要表現為以下兩個方面:[6]
(1)文字內容盡量簡潔,配上有意義的圖標或者圖片,同時應該避免使用專業術語。字體的選擇也要易于老年用戶辨認,網頁默認的字體是宋體??梢愿鶕枰x擇一些特別字體。例如,為了體現專業可以使用粗仿宋體,體現設計精美可以用廣告體,體現親切隨意可以用手寫體等等,但前提是一定要易于老年人辨認。
(2)井然有序的排版。有時候別出心裁的界面設計或許會帶給使用者眼睛一亮、賞心悅目的視覺感,但無論何,井然有序的文字區規劃,才易達成最有效、最舒適的效果。如有較多的說明文字,要讓說明具有順暢地閱讀連貫性。舉個例來說,一個向中對齊與一個向左對齊的文字區塊,明顯地,向左對齊的區塊讀起來順暢多了,因為使用者在讀完一行字后,自然而然往左下方繼續讀下去,不需要重新找尋開頭,相較之下,向中對齊的區塊看起來混亂多了。因此,有規矩地文字區規劃將可大幅度提升用戶界面的品質。
2.4 合理的色彩規劃
網站界面的色彩對于老年人來說同樣重要。老年人的視覺衰退很明顯,一個好的色彩規劃可以提高界面的視認性,從而提高操作的準確性和效率;可以減輕視覺上的疲勞。另外,通過色彩規劃來增強界面的美感和親和力。[7]
具體來講,老年用戶界面中,最好不要超過3到5種顏色。大區域最好使用淺色調,如白色、淺灰等。對于老年人而言,配色要采用視認性高的色彩,要加大色彩的對比度,背景與主體對比度要大,背景色不宜采用有金屬反光的顏色,如銀色和金色。對于重要的按鈕或信息要用誘目性高的色彩來表達,但顏色不宜過多,且區域不可以太大,否則看起來過度混亂,缺少美感,也容易造成視覺上的疲勞。
2.5 細節為王
對于老年用戶來說,細節同樣重要,比如盡量使用有意義的圖標,盡量不要使用生澀難懂的專業術語,注意提供精確的導航提示,提供聲音控制,盡量減少噪音干擾,克制使用新技術的欲望等等。
3 結束語
關注老年人網站界面設計,是以人為本的需要,也是國內所有優秀設計師的責任。限于篇幅有限,對于老年人使用的網站界面設計,筆者也只能泛泛而談,有所不足和欠缺,還望讀者指正。同時,撰寫本文,以期拋磚引玉,引起大家對老年人更多的關愛和設計出更多更好適宜老年人使用的產品。
參考文獻:
[1] 劉春花.基于用戶體驗的界面設計UI研究[C].天津工業大學碩士學位論文,2007(12).
[2] 楊足.老年人使用的家電的人機界面設計研究[C].江南大學碩士學位論文,2004(06).
[3] 廖曄.網頁界面設計及其學科相關性研究[C].湖南師范大學碩士學位論文,2006(04).
[4] 趙侃用戶體驗設計――網頁界面設計的重中之重[J].藝術與設計(理論),2010(09).
[5] 何榮.淺析網站界面設計[J].科技信息,2008(26).
網頁界面藝術設計是伴隨著計算機互聯網絡的產生而形成的藝術設計新課題,是網頁設計者以所處時代所能獲取的技術和藝術經驗為基礎,依照設計目的和要求自覺地對網頁的構成元素進行藝術規劃的創造性思維活動,必然要成為設計藝術的重要組成部分,并隨著網絡技術的發展而發展。表面上看,它表面上看,它不過是有關網頁版式編排的技巧和方法,而實際上,它不僅是一種技能,更是藝術和技術的高度統一。?網頁設計包括風格定位、版面編排、色彩處理、瀏覽方式、鏈接功能等諸多方面,其中色彩處理有著舉足輕重的功能。色彩既是網頁作品的表述語言,又是視覺傳達的手。所以首先要了解一個新問題那就是摘要:
1制作網頁包括具體都包括哪幾部分呢?
1.1圖形、圖像處理制作網頁界面藝術設計,提到界面還有藝術,那在網頁上插入一些精美、適當的圖片是必要的,否則,不會有人去瀏覽你的頁面,因此,在設計網頁之前,就應搜集或制作一些好看、適用的圖片。提到圖形、圖像處理,大家都會想到的軟件是Photoshop這個軟件,對,這個軟件是進行圖形、圖像處理的軟件,但是,它不是專門的處理網絡圖像的軟件,Photoshop這個軟件會用到去進行一些平面的圖形圖像,我們網絡的圖形、圖像處理用的是Fireworks軟件,它可以制作出傳輸較快的gif格式的圖片,占的空間也比較小,一般大小也就是KB,而Photoshop制作出來的是jpg格式的位圖,并且是有損壓縮,象素大了圖像就清楚,但這樣的話上傳到網上會影響瀏覽速度,象素小了就會出現模糊或者馬賽克小方格,所以我們采用的是Fireworks軟件進行處理圖形、圖像。
1.2動畫制作網頁界面藝術設計,肯定也少不了動畫的加入,并且還要有藝術氣息在里面,這就要求我們的設計者要有藝術修養和對顏色的綜合把握了,在沒有FLASH軟件之前,用的是Golive這個軟件,再后來就用傳統的做法,在html中嵌入Java程序編寫的動畫,但這要求設計者要對Java語言熟悉。隨著軟件的發展,如今有了許多制作動畫的軟件,二維的、三維的等等,如現在我們用的FLASH軟件,用它制作的動畫,小巧迷人,只需作為一個.swf格式文件導出,再導入到網頁編輯器里就可以了。
1.3文本的編寫一般是采用在網頁中用html語言中的標簽編寫,也可以用網頁編輯工具的“所見即所得”功能直接寫入文字,如摘要:Dreamweaver軟件或者Frontpage軟件等都可以進行文本的編寫。還有一點要注重的就是,顯示文本的時候,設計者的機器上裝了很多漂亮的字體,設計的時候采用了,但是等上傳到網上以后,別人在瀏覽的時候,假如別人機器上沒有安裝字體,那就顯示不出來我們采用的漂亮樣式字體,因此,在考慮網頁界面藝術設計的基礎上,我們是把文字提前在Photoshop或Fireworks可以將字體先選擇自己喜歡的樣式,然后轉換柵格化圖片再用切片切成小塊,分別進行優化。輸出的格式可以為gif或jpeg,再導入到Dreamweaver進行具體編輯,做鏈接可以用圖片特有的屬性進行熱區鏈接,這樣就完成我們想要的字體樣式效果了,就不會出現字體樣式顯示不出來的情況啦。
1.4框架的應用框架是網頁的常用形式,它可以使網頁更為清楚,可以把不同的頁面超鏈接到同一框架中,使的頁面更加緊湊。一般框架用在小說瀏覽頁面,或者介紹圖書章節的部分,或者教學網頁用到的的框架比較多。
1.5表格的應用表格是網頁中用處最廣泛的,可以布局,定位等等,它是網頁中最活躍的元素。它的應用可以使用網頁更加靈活。表格(br)是頁面中的重要元素,是頁面排版的主要手段。我們可以設定表格的寬度、高度、邊框、背景色、對齊方式等參數。很多時候,我們將表格的邊框設為0,以此來定位頁面中的元素,或者籍此確定頁面中各元素的相對位置。我們知道摘要:瀏覽器在讀取網頁html源代碼時,是讀完整個br才將它顯示出來的。假如一個大表格中含有多個子表格,必須等大表格讀完,才能將子表格一起顯示出來。我們在訪問一些站點時,等待多時無結果,按“停止”按鈕卻一下顯示出頁面就是這個原因。因此,我們在設計頁面表格的時候,應該盡量避免將所有元素嵌套在一個表格里,而且表格嵌套層次盡量要少。在使用Dreamweaver制作網頁時,會自動在每一個td內添加一個空字符。假如單元格內沒有填充其它元素,這個空字符會保留,在指定td的寬度或高度后,可以在源代碼內將其刪去。
2色彩的運用
網頁界面藝術設計離不開色彩的應用,當打開一個網站的時候,給用戶留下第一印象的既不是網站豐富的內容,也不是網站合理的布局,而是網站的色彩,尤其是在體現界面的時候,色彩對人的視覺效果非常明顯,一個網站設計的成功和否,在某種程度上取決于設計者對網頁界面設計顏色的運用和搭配。
網頁界面設計是一種審美活動,成功的設計作品一般都很藝術化。但藝術只是設計的手段,而并非設計的任務。設計的任務是要實現設計者的意圖,而并非創造美。網頁界面頁面設計的任務,是指設計者要表現的主題和要實現的功能。站點的性質不同,設計的任務也不同。從形式上,可以將站點分為以下三類摘要:第一類是資訊類站點,像新浪、網易、搜狐等門戶網站。這類站點將為訪問者提供大量的信息,而且訪問量較大。因此需注重網頁界面設計頁面的分割、結構的合理、頁面的優化、界面的親和等新問題。第二類是資訊和形象相結合的網站,像一些較大的公司、國內的高校等。這類網站在設計上要求較高,既要保證資訊類網站的上述要求,同時又要突出企業、單位的形象。第三類則是形象類網站,比如一些中小型的公司或單位。這類網站一般較小,有的則有幾頁,需要實現的功能也較為簡單,頁面設計的主要任務是突出企業形象。這類網站對設計者的美工水平要求較高。
3網頁界面的優化
在頁面設計中,網頁界面的優化是較為重要的一個環節。它的成功和否會影響頁面的瀏覽速度和頁面的適應性,影響觀者對網站的印象。
在資訊類網站中,文字是頁面中最大的構成元素,因此字體的優化顯得尤為重要。使用css樣式表指定文字的樣式是必要的,通常我們將字體指定為宋體,大小指定為12px,顏色要視背景色而定,原則上以能看清且和整個頁面搭配和諧為準。在白色的背景上,我們一般使用黑色,這樣不易產生視覺疲憊,能保證瀏覽者較長時間地瀏覽網頁。一般我們網頁默認的字體是宋體。為了體現站點的“和眾不同”和特有風格,我門可以根據需要選擇一些非凡字體。例如,為了體現專業可以使用粗仿宋體,體現設計精美可以用廣告體,體現親切隨意可以用手寫體等等。當然這些都是個人看法,你可以根據實際情況,選擇更貼切的字體。目前常見的中文字體有二三十種,常見的英文字體有近百種,網絡上還有許多專用藝術字體下載,要尋找一款滿足的字體并不算困難。需要說明的是摘要:使用非默認字體只能用圖片的形式,因為很可能瀏覽者的PC里沒有安裝你的非凡字體,那么你的辛勞設計制作便將付之東流。
網頁的適應性是很重要的,在不同的系統上,不同的分辨率下,不同的瀏覽器上,我們將會看到不同的結果,因此設計時要統籌考慮。一般我們在800×600下制作網頁,最佳瀏覽效果也是在800×600分辨率下,在其它情況下只要保證基本一致,不出現較大新問題即可?,F在我們設計網頁,一般要考慮800×600和1024×768兩種分辨率,因此我們的表格一般為居中的770左右的表格,表格的寬度最寬不要超過778。事實上,"做網頁"不是單純意義上的"制作網頁",假如想讓自己制作的網頁美觀大方,就必須要考慮"設計網頁"的過程,一個好的作品,不通過仔細的"設計"就成形是絕對不可能的。
中圖分類號:U46 文獻標識碼:A 文章編號:1009-914X(2016)04-0216-01
我們生活的21世紀已經進入了信息時代,近年來隨著智能手機,平板電腦的不斷發展發展。人機界面的設計和開發已經成為國際上計算機設計領域最為活躍的研究方向。在網站策劃、網站設計和網站運營的過程中,人機交互和用戶體驗是經常被談及與運用的概念。一個網站布局得不合理,首先會表現在功能和頁面設計的契合度上,具體表現就是用戶在網站上找不到需要的信息,或者是我想完成一個操作找不到相應的按鈕。這就是在設計網站時沒有從用戶的角度出發所造成的。為了讓學生運用網站配色與布局知識設計出人性化的網站,更好的與就業崗位對接,在本階段的課題研究中我將“網頁布局與人機學的研究與實踐”作為我研究的課題。學生在設計作品時能夠運用人機學的知識,提高用戶體驗的舒適度。
一、網頁布局與人機學的研究意義
通過本課題的研究,學生能夠運用色彩原理進行網頁顏色的搭配并且能夠運用布局技巧進行網頁的布局設計。同時能從臨摹網頁到自主設計,讓網頁效果設計真正從想法逐漸變成現實。在綜合項目實戰中,貫穿網頁配色與布局的知識,綜合運用人機學的原理,達到對網頁設計制作的整體把握。有助于提高中職學生網頁制作的能力。
二、網頁布局與人機學的研究目標
通過對網頁布局與人機學的研究與實踐,不斷改進網頁布局綜合案例的教學策略,力求找到提高我校學生網頁設計能力的方式方法,提高教育教學質量,有效的把課堂變為真正的工作室。在綜合項目實訓中設計出與就業崗位充分對接的網頁作品,為學生就業打下堅實基礎。
三、網頁布局與人機學的研究過程
(1)準備階段(2013年7月~2013年8月)
專題研究準備階段的主要任務是學習與課題研究有關知識,確定專題研究目標、研究對象、研究方法和研究內容,制定研究實施計劃。
(2)實施階段(2013年9月~2014年6月)
根據市場調研結果明確專業核心能力,制定相應的計劃,編寫技能檢測手冊。
(3)總結階段(2014年7月~2014年9月)
對本課題研究過程及資料進行收集整理,形成課題總結報告,并將專題論文、調查報告和研究個案匯編成集,撰寫個人結題研究報告。
四、教學實踐的成果和結論
在學校課題的研究分類中,我主要承擔的是《網站配色與布局》這本教材中網頁布局與人機學這部分的教學研究。在幾年的網頁制作課程的教學實踐中,不斷嘗試應用多種信息化教學手段,以“學生為主體教師為主導”的教學理念貫穿整個教學過程。體現了“做中學,做中教”的職業教學理念,充分調動了學生學習的主動性和積極性,較好的培養了學生獨立思考,分析與解決問題的能力,取得了很好的教學效果。在教學中旨在網頁布局與人機學的教學實踐中有更為突出的成果,培養中職學生的職業能力,為學生今后成為一名優秀的網頁設計師打下堅實基礎。2013年7月在撫順市信息化教學設計中獲得一等獎;2013年9月遼寧省“創新杯“信息技術說課大賽一等獎;2013年11月獲得國家級”創新杯“信息技術說課大賽一等獎;2013年12月獲得撫順市級優秀課。2015年11月獲得國家級信息技術教學設計大賽二等獎。
1.網頁布局與人機學的相關概念研究
通過對此概念的研究,在教學過程中,我采用實例講解的方式。從iPad看人機學。iPad是當今社會較為流行的電子設備,也可以稱之為街機。同學們對我列舉的實例會非常感興趣,由此學生會非常渴望即將要講解的知識。iPad是著名的蘋果公司出的平板電腦。iPad在人機交互操作上做得非常細致。為什么iPad無論老人小孩都會用,其基本操作甚至很少需要別人的協助和說明書?究竟是孩子容易接受iPad?還是iPad容易讓孩子接受?iPad的設計可謂“童叟無欺”,老人、孩子都可以流暢使用。人機學應該是“傻瓜式”的,去追求一種更“本能”的操作,就像吃飯穿衣一樣簡單。通過以上實例的講解,學生很快理解人機學的概念,并且知道在網站配色與布局這本書中為什么給我們介紹人機學的概念。讓學生充分理解了網頁的易用性和美觀性非常重要,這樣同學們就能很認真的學習人機界面設計的原則及設計方法。在教學中有效的突出了教學重點,突破教學難點。
2.網頁布局綜合案例的設計風格研究
引入案例――網頁布局的風格類型。本案例的主要目的是在不改變網頁內容的前提下,改變網頁的風格類型。這就需要用的布局的知識。在之前的學習中我們已經掌握了各種網頁布局的知識與技巧。不同的網頁有不同布局。這樣綜合起來就形成了不同的網頁風格類型。那我們常見的網頁風格類型有哪些?有什么特點?引入理論學習知識,教學過程很自然的過度。經過理論講解后,進行實戰案例――設計臨摹典型商業型網站。
在教學過程中引入實際案例,教師通過案例講解相關理論知識,再讓學生應用所學理論知識完成實戰案例,使學生能夠 “學以致用”,完成本課的技能目標。這樣不僅增強了講解的直觀性,降低了學生學習的難度,還可以有效的激發學生的學習興趣,充分調動和發揮了學生學習的積極性、主動性、創造性,培養職業核心能力,實現教、學、做一體化。
3.電子商務網站個案研究
網頁設計是一項系統工程,它包含了從用戶調研到最終上線的全過程。我將以一個電子商務網站為例,系統地講解整個網頁的設計過程。
在項目實戰案例――新蛋購物網站主頁制作講解過程中。首先了解技術要點,包括(1)確定網站整體風格。(2)網頁色彩搭配。(3)網頁布局技巧。其次進行案例分析:隨著網絡的普及,網購已經火起來,給同學們闡述 “沒有人上街不代表沒有人逛街”的現象。同學們在這個過程中就會紛紛議論都在哪些網站上買過東西,喜歡瀏覽哪些網站,為什么喜歡去瀏覽那些網站,引出網頁設計的重要性。電子商務網站作為網購的首要利器,是用戶和商家的唯一互動平臺。所以界面設計的好壞,對其銷售額起著重要的影響作用。在授課過程中自然引入案例,要求在設計制作過程中注意體會如何運用網頁配色與布局的知識來設計出人性化的購物網站。使學生能夠自主學習、獨立操作和自我評測。
通過對新蛋購物網站首頁的制作,更加熟練的使用之前學過的技巧。深入了解頁面的合理用色和顏色之間搭配使網頁更有效果;圖片在畫面中的合理擺放;準確劃分頁面結構等。對前面所學的知識融會貫通,學以致用。在設計網站的時候,要分析網站的主題內容,選擇符合主題表現形式的布局,采用搭配合理的色彩表現主題的風格,加上細心的構思和新穎的創意,必然可以設計出優秀的網站。
五、存在的問題和今后的設想
學生到企業學習的機會太少,沒有實際開發項目的經驗。每個企業都有自己的團隊,每個人都有自己指定的設計項目,這就要求都得是有經驗的設計師。而我們的學恰恰就缺少這中間的鍛煉過程,很少會給我們中職學生提供實踐的機會。這使我們中職學生不能夠很好的與企業對接。
要想解決這一問題,我覺得我們任課教師必須走入企業,先接觸一些開發網站的公司,在企業參觀學習。在網頁制作的課堂上,拿一些企業的真正案例讓學生實踐,制作網頁配色和布局的整個流程,這樣同學們才能真正的得到鍛煉。讓學生深刻體會網頁界面布局的人性化設計,真正的將課堂變為企業的創作工作室,使學生能快速適應工作環境,提高中職學生的就業率。
1 設計模式思想簡介
設計模式思想的主旨是針對常見的設計問題提供已被驗證為有效的解決方案,從而充分利用前人經驗和成果解決設計問題,避免無意義的重復勞動。該思想最早由建筑師、加州大學伯克利分校建筑學教授Christopher Alexander在20世紀70年代提出。Alexander如此論述建筑設計模式的價值:“每一模式描述我們周圍環境中一再反復發生的某個問題,接著敘述解決這一問題的關鍵所在,這樣,你就能千百次地重復利用這種解決問題的辦法而又不會有老調重彈之感?!?[1]
Alexander闡述了設計模式的基本構成要素,他認為,每個模式都是一個規則,由三部分組成,表達了一個特定情境、一個問題和一個解決方案之間的關系。[2]其中,“情境”表示該模式在解決問題時的周圍環境和狀況,“問題”表示該模式的目的或預期目標,“解決方案”表示解決該問題的方法的核心。然而,設計模式思想影響最為深遠的領域并非建筑,而是軟件工程。20世紀90年代,Erich Gamma等人將設計模式思想推廣到了軟件工程領域。在Alexander的理論基礎上,Gamma等人制定了軟件設計模式的格式規范。他們認為一個模式有四個基本要素:模式名稱、問題、解決方案、模式效果。[3]
Alexander和Gamma等人并沒有發明新的解決方案,而只是分別對建筑和軟件設計中現存的“無名”(即存在于設計實踐中,但尚未被人明確命名并提出)的優秀解決方案進行了系統化的總結和歸納,并以設計模式的形式表述出來。盡管如此,設計模式的價值仍得到了高度認可。尤其是在軟件工程領域,設計模式已成為重要的程序設計指導理論。近年來,設計模式思想在界面設計領域也逐漸受到重視。
2 界面設計領域的設計模式研究現狀
Alexander的設計模式思想很早就已進入交互設計研究者的視線。早在1988年,Donald A.Norman就在他影響深遠的著作《The Psychology of Everyday Things》(后更名為《The Design of Everyday Things》)中提到了Alexander的研究成果。[4]但設計模式在該領域的發展較為緩慢,直到2000年前后,國外的交互設計和界面設計研究者對設計模式的關注才開始逐漸加深,并逐漸出現了一些重要的研究成果。一些研究者和機構提出了自己的界面設計模式規范和模式庫,如Jenifer Tidwell在《界面設計模式》一書中以設計模式的形式總結了界面設計的法則,給出了常見問題的解決方法及其在實踐中的運用,并以該書內容為基礎構建了一個設計模式庫。[5]雅虎公司也了一套具有影響力的網頁設計模式庫。[6]其他知名模式庫包括、Quince等。
相對于國外研究的逐漸興起,國內對于數字產品界面設計模式的相關研究和應用則十分匱乏。雖然近年來出現了少量關于界面設計模式的論文和著作,如《Web2.0界面設計模式》,但這些文獻并未深入挖掘設計模式的思想,也未能提出較為系統、規范和全面的設計模式庫,實用價值有限。總體而言,國內的相關研究和應用與國外相比有較大差距,研究文獻的數量極少,深度不足,極其缺乏理論化、系統化的中文研究資料。
目前,界面設計模式相關研究主要集中于設計模式個體的研究和構建。雖然也涉及不同設計模式之間的關系,但并未系統和深入地探討設計模式的編目方法,即如何將多個設計模式組織、統籌起來,以跳出單個設計模式的狹窄范圍,服務于更高層次的用戶目標。這是目前相關研究的一個不足之處。Alexander雖然提出了“模式語言”的編目思想,但該思想仍然主要基于個人的主觀經驗,缺乏可推廣性。Robert Hoekman,Jr.和Jared Spool的研究起到了一定彌補作用。他們在《網站設計解構:有效的交互設計框架和模式》一書中提出,應將多個設計模式組織成框架體系,從而從全局的角度指導由多個設計模式組成的完整的界面系統設計。[7]在該書理論的基礎上,他們創建了一個公共的框架體系資源庫,包含了網頁交互設計的幾種常見框架示例。其框架格式與設計模式格式類似,主要包含應用情境、用戶目標、任務流程、所用模式等。[8]
總體來說,現有的界面設計模式研究主要存在三點不足:(1)缺乏對模式在設計實踐中的使用方式、方法和流程的研究。 (2)缺乏對模式編目方式(即如何綜合運用多個模式解決問題)的研究。 (3)缺乏對模式庫建立(包括模式識別、模式記錄)及擴充過程的系統化研究。目前,模式庫的建立主要依靠建立者個人的經驗和觀察。
3 界面設計模式的應用價值
在交互界面設計中,設計模式的價值主要在于[9]: (1)設計模式包含了問題的相關信息,使得解決方案能夠確實地發揮作用。 (2)設計模式詳細闡述了解決方案是如何受上下文(即情境)限制的。 (3)設計模式闡述了解決方案的基本原理,其中包括了前人積累下來的經驗性知識。 (4)設計模式具有一種潛力:多個模式可以組織成一種模式語言,使設計師能夠以一種積極活躍的方式來跨越性地解決不同細節層次上的設計問題。
如上所述,設計模式不僅能有效地解決問題,而且充分考慮到了問題的上下文情境,并從方法論的角度闡述解決方案的原理。這是設計模式與一般的零散性設計原則的重要區別。
設計模式的另一個應用價值是它有效地彌補了目前廣泛應用的設計指南(guideline)的不足。設計指南通常由企業,為該企業相關產品的界面設計提供指導和參考,以保證設計的一致性,幫助設計師提高設計質量。典型例子有蘋果公司的《iOS Human Interface Guidelines》《iOS 7 UI Transition Guide》等。與設計模式庫相比,設計指南通常實例數量較少,且多闡述抽象和綱領性原理,而非像設計模式那樣提供具體設計案例,因而難以為設計師提供具體問題的解決方法。而利用設計模式,設計師可以更為系統化、具體化地解決設計問題。例如,西門子公司在實踐中成功運用設計模式提高了其軟件開發效率。該公司從2000年起就持續對界面設計模式進行探索,并建立起了一個內部界面設計模式庫,其模式的應用范圍覆蓋了桌面、網頁應用和移動設備等不同平臺。[10]
4 總結與展望
從以上研究可以看出,設計模式在交互設計和界面設計領域的研究和應用已取得了一定進展,但近年來數字產品發展迅速,以iPhone等移動設備為代表的新一代數字產品在我國迅速普及,扁平化、模塊化等新設計思想不斷涌現,設計模式思想也需要不斷跟進,以符合時代快速發展的需求,體現出新一代數字產品的界面設計理念。國內雖然引進出版了《界面設計模式》等一批重要著作,但設計模式思想的影響力仍然不足,并未在界面設計領域得到廣泛認知。如何挖掘設計模式的優點,將其推介給國內設計界,從而對產品的界面設計有所助益,是國內界面設計研究者應該思考的方向。該領域還存在其他一些有待探索的研究方向,比如如何將零散的設計模式以系統化的方法組織起來構成整體框架,以及如何將設計模式應用到硬件界面的設計中。此外,最新涌現的扁平化設計、響應式界面設計等界面設計思想也亟須得到設計模式理論的支持??傮w而言,界面設計模式在界面設計領域仍有很大發展潛力,有待于設計研究者進一步探索。
參考文獻:
[1] Christopher Alexander,et al.建筑模式語言[M].北京:知識產權出版社,2002:3.
[2] Christopher Alexander.建筑的永恒之道[M].北京:知識產權出版社,2002:194.
[3] Erich Gamma,et al.設計模式:可復用面向對象軟件的基礎[M].北京:機械工業出版社,2000:2.
[4] D.A.Norman.The Psychology of Everyday Things[M].Basic Books,New York,1988:229.
[5] Jenifer Tidwell.界面設計模式[M].北京:電子工業出版社,2013.
[6] Yahoo!Inc.[DB/OL]http:///ypatterns/.
[7] Robert Hoekman Jr.,Jared Spool.網站設計解構:有效的交
互設計框架和模式[M].北京:人民郵電出版社,2010.
[8] Robert Hoekman Jr.,Jared Spool.[DB/OL]http:///.
[9] Stefan L.Pauwels,Christian Hübscher,Javier A.Bargas-Avila,Klaus Opwis.Building an interaction design pattern language:A case study[J].Computers in Human Behavior,2009,26(3):452-463.
[10] Helmut Degen,袁小偉.UX最佳實踐:提高用戶體驗影響
1、引言
Unity3D不只是單純的游戲引擎,而是已經涉及到多種不同領域的一個跨平臺的三維游戲與虛擬現實開發工具,該工具支持多腳本語言以及強大的物理引擎等特點。論文通過研究Unity3D與HTML交互機制,實現場景中對象的動態交互行為,也就是控制各裝配體的裝配順序并實現碰撞檢測、零件實時編輯等功能,從而使得整個裝配過程具有邏輯合理性和可控制性。
2、Unity3D與HTML交互機理
2.1 Unity3D瀏覽器調用HTML網頁中的函數
Unity3D瀏覽器通過執行Application.ExternalCall()來調用任何在HTML網頁里定義JavaScript函數,比如下面一句調用了HTML網頁里SayHello()函數,并傳遞了一句話作為參數。
Application.ExternalCall( "SayHello", "The game says hello!" );
2.2 HTML網頁調用Unity3D瀏覽器中的腳本函數
Unity3D 瀏覽器的插件或ActiveX控件都有一個SendMessage()的函數,HTML網頁通過這個函數與Unity3D進行通信,通過該函數可以傳遞對象名、函數名以及簡單參數,然后SendMessage()就會調用Unity3D中GameObject上綁定的函數。在調用SendMessage()函數之前,必須先得到Unity Web Player的引用。這里可以使用JavaScript 對象Document的getElementById()函數來獲得該引用。
3、減速器虛擬裝配的實現
3.1交互界面設計
交互式虛擬裝配的重點不僅在于產品虛擬裝配的過程,還在于它可以與用戶進行實時交互。系統界面分為兩部分:網頁中為利用HTML提供的控件加入按鈕、列表框、滾動條、文本區、標簽等;Unity3D瀏覽器中為利用Unity提供的GUI接口加入按鈕、窗口、標簽等控件分別實現了減速器裝配體的自動裝配、手動裝配、原理演示、零件查看、零部件實時編輯等功能,充分實現用戶參與下的人機實時交互。
3.2碰撞檢測及裝配順序規劃
虛擬裝配是一個實時交互系統,如用戶可以在虛擬場景中用鼠標選取裝配體的零件進行拆裝。Unity3D引擎本身提供了基本形體的碰撞器,通過PhysX物理引擎自動檢測碰撞。根據Unity3D碰撞器提供的OnCollisionEnter方法,獲得相關碰撞信息,然后由它繼續調用其他處理過程(相對位置檢測、碰撞檢測等),實現手動裝配過程。
虛擬裝配過程中零件拆裝順序的檢測也是一個關鍵問題,用戶選擇零件正確與否直接決定該零件是否進行拆裝。系統為每一個零件定義一個唯一識別拆裝順序的順序號,當用戶選擇某一零件后,調用相應的拆裝順序檢測模塊進行比較當前選擇零件的順序號與系統預定的順序號是否一致決定拆裝是否進行或者根據零件間的位置約束關系判斷某零件當前是否可以移動來決定拆裝是否進行。
3.3 裝配體零件的任意移動及實時編輯
在虛擬裝配中,用戶對場景中零件的選取及操作(位移、顏色等的實時修改)是交互性最充分的體現。當用戶在虛擬場景中用鼠標點擊或指向某一零件時,系統應該做出響應,如被指向或點擊的零件應實時改變顏色或彈出對話框提示用戶等。Unity3D的GUI接口提供了各種控件可以非常方便的編輯一些按鈕、窗口等用戶界面,通過重寫鼠標事件可以檢測用戶的各中輸入信息并作出正確的響應。通過變換組件可以完成產品的平移和任意角度旋轉操作以及裝配體零件某一方向比例變換。
4、結論
本文對基于Unity3D的虛擬裝配相關技術進行了研究,并實現了在用戶參與的人機界面下的虛擬裝配實例。對在虛擬裝配過程中零件的碰撞檢測、裝配順序規劃、零件選取及實時編輯等功能的實現提出了有效的方法,具有一定的參考價值。
【參考文獻】
中圖分類號:TU-024
文獻標識碼:A
文章編號:1008-0422(2009)05-0109-02
1 背景介紹
自從1991萬維網(www)出現以來,相關技術及其應用一直呈現著革命性的進步。展現出蓬勃生機和無限潛力。但是網絡界面一直相對穩定地保持著以瀏覽器、按鈕、圖形和文字為構件,以視窗為框架的基本形式。界面設計師應該以一種前瞻的態度來審視現有的網絡界面設計,開創設計新思路,從而在界面設計方面為未來新技術的發展提供鋪墊和激勵。
2 文獻綜述
在Webster字典里,“界面”被定義成為:
1)分割兩個物體,空間,或相態的邊界:
2)一些獨立的,又往往不相關的系統相互接觸,相互作用,又相互交流的場所。
可以看出,第一個定義強調了界面的幾何特性,第二個定義強調了界面的功能特性。因此,界面設計應圍繞著不同的但又相互聯系的三個方面――視覺性,功能性,及實用性。其中,實用性本是人―機界面的功能性的一個重要組成部分。
Mullet and Sane(1995)指出,在包括圖形設計,工業設計及室內設計在內的各類視覺設計領域中,許多設計原則都非常適合用于處理圖形用戶界面設計的問題。然而,在現有的以視屏窗口為基礎的圖形用戶界面設計當中,其以二維構型為主體的基本形式極大地限制了室內設計原則的應用。
三維的應用在界面設計中逐漸出現,比如,在Tactile 3D界面中,(http://tactile3d.corn/),用戶可以在一個三維環境中方便地進行各類文檔操作。Bowman,et.al(2004)從技術的角度對三維用戶界面做了全面的概述,并對其中的硬件設備及軟件技術,以及三維互動技術的設計原則進行了探討。這些技術方面的進展為網絡界面設計方面的研究提供了難得的機遇和挑戰。
3 理知空間及網絡界面的特性及設計要素
本文的一個基本前提在于把“網絡界面”理解為一個聯接實體及虛擬世界的復雜時空環境。由此,網絡界面的“虛擬性”及“互動性”能夠通過利用三維環境的豐富空間特性從而獲得超越傳統上二維圖形及文字說明(本質上一維)等方式的表現效果。
作為以三維空間為背景的卓越藝術形式,建筑和室內設計與網絡界面中的虛擬環境設計有直接的可比性和通用性。不僅如此,在一個更抽象的層面上,實體與虛擬三維環境的相關性可通過“理知空間”的概念進一步理解并得以強化。
本文引入一個“理知空間”的概念來理解網絡界面環境及其與實體和虛擬環境的相互關系。具體而言,我們把理知空間定義為多重實體環境以及它們的多層次多角度的具體化和抽象化形式的總和。而網絡界面則可理解支持實體及虛擬空間之間相互作用的基礎環境。由此,網絡界面必然地在一定程度上繼承了實體空間,虛擬空間,甚至理知空間的各種空間及功能特征。參考圖1顯示了理知空間,實體空間,虛擬空間及網絡界面之間的邏輯關系。
基于上述理論框架,我們不難提煉出網絡界面的七大基本特性:
1)共生性:多重結構,多種形式可并存于一個網絡界面當中。
2)高維性:如果說虛擬空間可被抽象地理解為一個復雜的數據庫,那么數據的可視性則需要經由網絡界面來實現。數據庫的復雜性直接地導致了界面環境的高維性。
3)動態性:網絡界面時時刻刻通過動態的方式來表述或控制信息的輸入輸出。動態性也可理解為網絡界面的時間維。
4)互動性:界面最關鍵的動態性是通過人一機互動而實現。由此,用戶指令可通過界面傳達,而指令的執行結果也通過界面得以反饋。
5)變換性:網絡界面中的對象不必遵循實體空間中通常的物理規律,從而其幾何特性可通過各類簡單變換而相對靈活地改變。
6)多重尺度:由于網絡界面可包含多重虛擬或實體空間以及它們之間的各種相互作用,人們往往需要有多種方式來進行評估或量化,
7)“病態結構”:在參照傳統經驗的時候。復雜的網絡界面結構往往會呈現出異常特性,以萬維網頁為例,由網絡聯結連接的網頁具有比任何書本格式更為復雜的拓撲結構,因為后者本質上是線性的,換句話說,只是個一維的結構形式。
以上總結的七大特征可引申出以下關于界面設計的四條基本建議:
1)關于界面符號及幾何對象的設計
符號及幾何對象的應用有其審美上和功能上的需要。通過對界面環境的多重性,高維性及互動性的認識,我們能夠自然地理解為什么網絡界面中三維環境能夠較二維環境更為有效地用于表達復雜信息,支持人一機互動,進而模擬實體世界中的切身體驗。
2)關于界面智能設計
網絡界面的智能性決定了人一機系統的功能性。如果沒有智能性,上述符號和幾何對象不過是沒有大腦的軀體,不具有完備的功能性。
3)關于界面性能設計
認識到網絡界面僅僅是連接實體與虛擬空間的場所,設計者必須考慮到隱藏在網絡界面以下的系統本身的性能特征(例如中央處理器的速度,網絡帶寬等),從而保障上述所提及的智能性具備充分的系統軟硬件支持。
4)關于界面虛擬性設計
盡管三維虛擬環境能夠很大程度上借鑒人們在實體三維環境中的經驗,虛擬環境同時也具有一些與實體三維截然不同的特征。合理利用這些特征可以成為進一步提高網絡界面實用性的重要手段。
三維虛擬環境的引入為實現上述界面特征以及應用上述設計原則提供了廣闊前景。具體而言,三維虛擬環境能夠讓用戶重溫置身于實體世界中的體驗,而這種體驗幫助用戶對新的界面系統更快地建立認同感,更方便地定位和瀏覽,從而對使用本系統更有興趣。其次,三維空間的采用能夠更為有效地組織和表現復雜信息。此外,在三維環境中人一機互動可通過連續光滑的運動而完成,智能性可由此而得以更充分的實現。
本文在理論探討之外也開發了一個包含三維環境在內的界面設計原型,用以校驗文中所提及的各種概念。鑒于目前三維購物網站仍很缺乏,而其間最大障礙是基于網絡資源方面的限制,本文以此為出發點來探索未來三維化網上購物環境設計的一些可能性。
本設計是在文中提出的四條原則的指導下完成,包舍了作者對網絡界面七條特征的理解。一個具體設計目標在于通過合理地結合二維、三維以及文字描述等方式來有效地組織表現信息,并為用戶提供一個方便、愉悅的網上
購物環境。
在本設計中,我們盡量保持主界面的單頁感受。圖2概括了主界面的邏輯結構。首先主界面橫向分割成兩大模塊:左為定位模塊,右為購物模塊。定位模塊又細分為四個區域。其中第四區為三維商場,在整個界面中處于核心地位。另外三個輔助區域提供各項便利手段。其中,區域一支持文字定位方式;區域二根據用戶位置實時提供商場信息;區域三陳列三維商場的平面圖,并支持用戶在商場內各攤位之間隨意跳躍。這些區域之間的協同合作為用戶營造了方便而豐富的購物氛圍。顯然,該商場平面規劃及三維區域中的攤位設計,自然而然地直接用到建筑和室內設計的各項知識和經驗。根據主界面的邏輯結構設計的網絡界面樣板。
為了體現網絡界面變換性的應用,我們設計一個橫向滑動的滑標來控制空間變換,從而達到迅速定位的最佳效果。具體而言,通過移動滑標,用戶可以根據自己的需要來調整商場中各攤位的大小及其相對位置,從而使得商場攤位陳列與用戶的興趣保持一致。這樣既保持了平面圖的整體美觀性,同時又具備了輔助定位的功能。此外,這個商場的平面設計中所包含的自相似性使得該商場具有良好的延展性。而由滑標實現的空間變換則在個體攤位層面上保證了高度的公平性。
關于虛擬性的設計,我們在三維區域中給每個攤位設置了一個轉動環,當鼠標置于環上,整個購物單元順時針旋轉,并依次展現不同的商品。顯然,在現實世購物環境中,這樣的裝置是既不現實又不適用的。
4 結論
盡管計算機屏幕是一個二維平面,網絡界面仍然應當理解為一個具有一些明顯特征的多維環境,而此環境的三維表現賦予界面用戶以“走進”屏幕并享受由第三維數而衍生的豐富信息與功能。換句話來講,三維空間模型在網絡界面設計中的應用,為理解和體現“理知空間”的復雜性提供了一系列強有力的手段,而傳統的設計領域,特別是建筑及室內設計在這個過程中有著不可替代的地位。
參考文獻:
[1]Bowman, D.A., Krui]ff, E., LaViola, J.J., &Poupyrev, I., (2004). 3D User Interfaces:Theory and Practice. Addison-Wesley.
[2] Mullet, K., & Sano, D., 11995). DesigningVisual Interaces. Sun Microsystems, Inc.
前言
多媒體課件以豐富的視聽信息,生動的圖形、圖像,高科技表現手段使教學內容化繁為簡,化宏觀為微觀,形象生動,創設情境,論文使理論學習、問題輔助學習、激發興趣和協作學習等在教學中得以體現,使學生由被動學習變為主動學習,由個體獨立學習變為群體合作學習,由復制性學習變為創造性學習[1]。本文采用的Authorware7.0軟件,通過Fireworks8.0創作動畫輔助,將多種教學媒體和教學方法有機結合,完成《電子測量技術》課程的課件設計。
1課件的設計
《電子測量技術》課程是高等職業教育電子信息、應用電子、自動化等專業的專業基礎課,同時也是新知識點較多的一門課程。針對職業教育特點,我們主編了《電子測量技術》規劃教材,2003年由電子工業出版社出版,教材目前印刷7次,印數已達3萬冊。因此,從教學角度出發,考慮該教材已獲得廣泛承認,課件內容以該書為基礎,涵蓋《電子測量技術》全書12章節內容,并且借鑒原來基于PowerPoint課件的經驗,各章節自成體系,按教學大綱劃分出知識點;其次是課件應具有良好的用戶界面和視覺、聽覺效果,課件所使用的計算機硬件和軟件開發環境相對兼容,便于升級擴展。
1)腳本的編寫
編寫詳細的腳本,是整個多媒體課件開發過程中的一個重要環節,它把課件設計與制作緊密地聯系在一起,成為課件制作的重要依據。畢業論文編寫腳本包括界面設計、交互設計和風格設計3個方面[2]。
界面是教學信息在屏幕上的顯示區域及用戶操作區域,設計時我們主要突出“教為學”的思想,圍繞教學內容這一中心,既防止課件界面色彩、聲像效果等過分濃烈、喧賓奪主,影響學習內容;又考慮課程部分內容如儀器內部電路抽象、枯燥,而學生需要感官刺激,激發興趣的特點。
同時,我們體會多媒體課件的強大生命力主要體現在交互能力上,比如只需通過單擊屏幕上某個特殊的鏈接設置,方便實現不同對象之間的跳轉。本設計中創建了兩個導航結構,一種是利用“導航”圖標指向框架圖標中的某一頁,來實現程序內部的跳轉和調用。另一種是通過“框架”圖標內嵌的導航控件來實現不同頁面間的瀏覽、翻頁。除此之外還可以通過設置相應的超文本鏈接來實現交互性能。
在風格設計上主要體現界面、字幕和顯示對象上整體的和諧統一。
2)框架結構的設計
編輯之前考慮到有大量的文本的輸入,實現各個章節之間的翻轉如果只使用“交互”圖標,也是可以實現翻頁功能,但碩士論文制作起來比較麻煩,而且在查找頁和指定固定頁方面力不從心。因此運用“框架”圖標及“導航”圖標制作文本瀏覽,就方便多了[2]。
“框架”圖標和“導航”圖標密切相關,經常放在一起使用。導航結構提供了選擇路徑的方法,可以根據設置自動跳轉到指定的目標頁上;“框架”圖標可以方便地設計含有圖形、聲音、動畫等組件的頁面,最重要的是在“框架”圖標的內部內嵌了一整套導航控件,通過這一控件可以更容易實現頁面之間的來回翻轉。
基本框架結構設計后,對有的地方進行了編輯,如更改控制按鈕的位置和圖標、設置按鈕防止頁面回繞、編輯進入和退出畫面等,使其更適合課件的使用。
2多種媒體素材的使用
要實現多媒體課件的內容豐富多彩,使用多種媒體素材是必不可少的。其中文本、圖形、圖像是最基本元素,此外還有聲音、動畫、視頻等媒體信息??紤]到職業教育“淡化理論、夠用為度、培養技能、重在應用”的特點,我們認為對測量原理部分的講解應力求突出基本概念,通俗易懂,工作總結便于自學,因此課件這部分主要以文本、圖片形式,比較詳細;而測量方法則應突出操作應用,在設計時則主要以視頻演示為主;對測量儀器儀表則重點講清工作原理和組成框圖,在設計時主要以動畫、網頁內容為主,整個課件設計力求對多媒體資源的合理布局,使它們既符合教材要求,又突出多媒體特征。
1)文本的輸入
Authorware可以直接將外部的文本輸入到其內部,但是它有一特點就是在文本的輸入格式方面有一定的限制,它只能輸入TXT、RTF格式的文件[3]。對于不是這種格式的文檔如果采用常規直接進行輸入勢必會占用很多時間,不利于課件的開發。因此借助系統剪貼板使用復制、粘貼的方法來添加文本。當文本過長時,或者輸入的文本篇幅較大,采用滾動文本的輸入方式,這樣在預覽時會顯得更方便。
2)圖片的應用
使用系統本身的繪圖工具箱可以繪制出比較簡單的畫面,但對于《電子測量技術》這門課程僅僅依靠繪圖工具箱不能達到實際的要求,如大量的儀器原理圖、接線圖、儀器面板圖等,我們采取的第一個方法是采用Authorware7.0提供的插入外部對象的功能,將原來以Protel99SE、Word、LabVIEW等制作轉換為圖片形式,醫學論文使設計的原料變得更加豐富。
3)添加背景音樂
在Authorware7.0系統中可以支持多種類型的聲音文件格式,如WAV、SWA、AIFF、PCM、MP3等[3],在制作課件時,通過“聲音”圖標來插入音頻和設置聲音播放,如控制播放次數、設置播放時間、速率等,可以輕松引用這些聲音素材添加到課件中。在課件中導入背景音樂有它的優點,但是并不是每個人都喜歡有音樂,因此通過對“計算”圖標和按鈕響應的設置,編寫按鈕激活代碼使課件在播放時可以由使用者根據自己的意愿單擊相應的按鈕,實現有聲和靜音之間的轉換[4]。
4)動畫的調用
動畫是多媒體作品中不可缺少的一部分,也是設計中的一個亮點,但使用Authorware本身只能制作出二維的動畫,即動畫的對象只能在一個平面內運動,這樣使演示的效果大打折扣,然而這并不說明Authorware不能演示三維動畫,它可以通過文件插入的方式來演示其他軟件制作的三維動畫,同時系統本身也提供多種效果的頁面切換功能,對各種外部和內部資源加以利用同樣可以達到理想的效果。
制作動畫的軟件有很多,使用起來也各有特色。選擇合適的創作工具是設計成功的關鍵,通過查閱相關的資料,了解Authorware系統提供了對GIF動畫圖像的支持,可以將其應用到課件中。GIF動畫是一種特殊的圖像格式,其中包含了多幀圖像,這些圖像按照一定的時間頻率交替顯示,從而達到動畫顯示的效果,具體是通過MacromediaFireworks8.0來設計。在Fireworks中制作動畫的一種方法是通過創建元件并不停地改變它們的屬性來產生運動的錯覺。當按順序播放所有的幀時就成了動畫[5]。
5)智能對象與數字電影
智能對象就像一個插入Authorware作品的邏輯包,它是一個強有力的開發工具,它的不同之處在于它與向導的聯接,向導可以給Authorware作品提供設置界面,職稱論文并且可以在插入智能對象的位置添加各種變化、新的內容和邏輯關系。它能使看似繁瑣的工作變得更加容易完成,即使是沒有經驗的開發人員也更容易更有效地完成任務。實際上智能對象在多媒體編輯上做出了根本性的改革。比如智能對象與數字電影的結合應用[3]。在課件中引入數字電影如果只是采用之前的方法,就是在流程線上添加相應的圖標進行導入,在程序運行過程中當執行到該圖標,系統會直接彈出播放的窗口,不利于下一操作,但是通過MovieController智能對象可以容易實現播放進度的調節。
6)網頁鏈接
在課件設計時,考慮到有些儀器由于價格昂貴或者其他原因,學校無法購置,如數字通信測試用誤碼儀、邏輯分析儀等,課件設計中考慮實現網頁的鏈接,鏈接到知名企業的網頁上,已加強學生感性認識。這一功能是通過Fireworks中使用URL來實現,編輯選中的熱點并對其指定URL路徑,最后導出此URL即可實現指定網頁的鏈接。
課件的主界面如圖1所示,課件第1章界面如圖2所示。
3課件的調試與打包
課件主要是為《電子測量技術》教材而制作的,因此為方便發行和使用,課件的后期工作就是進行調試和打包處理。
由于課件發行打包后將不允許用戶再修改,打包之前應盡可能排除其中的錯誤,確認課件可以正常運行。英語論文調試可以通過兩種方法來實現。一種是利用區段標志(開始/停止標志),另外一種是通過控制面板的使用。通過使用調試工具可以控制程序流程執行的區段,逐個執行程序流程中的設計圖標。將制作好的課件與課件中的庫文件一起打包能夠提高文件的性能,減少文件的數量,使最后的作品的安裝、運行更為容易,并且增加了作品運行的可靠性,避免運行時因為找不到外來函數或庫文件而發生錯誤。
打包好的課件進行設置,可以運行在Windows95、Windows98、WindowsXP、或者是WindowsNT、Windows2000這樣的32位操作系統中。其中要求的CPU應該是Pentium166以上兼容機種、內存是64M以上、硬盤容量780M、支持DirectX的顯卡、光驅是8倍速以上的光驅,此外由于演示窗口大小設置為832*624像素,因此可以用于不低于16英寸顯示器。制作好課件并打包后,就可以,課件時必須隨同程序中用到的外部媒體文件或外部函數文件一同,Authorware7.0提供了作品的功能,該功能可以將運行作品所需的各種文件及外部函數輸出到指定的目錄中,從而形成用于發行的最終作品[3]。
4結論
隨著各種多媒體教學的推廣和普及,計算機輔助教學作為一種先進的教學手段,以其直觀性、靈活性、實時性、立體化的優勢,留學生論文越來越受到大家的青睞。要想運用好計算機輔助教學這一現代化的教學手段,其關鍵是要設計和制作出符合教學要求的多媒體課件[6]。我們的作品雖然完成了,但是在各院校使用過程中,一定還會發現很多不盡人意之處,我們將與時俱進,將作品更加完善,以更好的實現教學目的,達到教學效果。
參考文獻
[1]胡欣杰.時尚教師多媒體課件DIY[M].北京:中國宇航出版社,2005.14-18
[2]孫印杰,李春暉,封新亞.新世紀多媒體CAI課件制作培訓教程[M].北京:電子工業出版社,2004
[3]NaheedaRavjani.UsingAuthorware7[M/CD].Macromedia,Inc.600TownsendSt.SanFrancisco,CA94103,2003
DOI:10.16640/ki.37-1222/t.2016.03.178
1 汽車電商平臺綜述
在這個信息日益全球化的今天智能終端影響著人們生活的方方面面,然而,相當多的智能終端產品因其復雜的操作方法讓人們望而卻步。而傳統工業設計方法著重強調形式和功能的辯證關系,在強調產品可用性和用戶體驗的今天很難解決智能終端產品“難用”的問題。這就突出了“以用戶為中心”交互設計在工業設計中的重要性。
本論文對汽車電商平臺的分析主要從視覺設計和交互設計兩個方面進行?,F在獨自創建的汽車電商平臺有:汽車之家、易車網、等等。我們通過分析網頁設計、框架設計、內容排版、圖片運用等等,來總結個個平臺的優劣勢,從而為我們提供一定的依據和參考。
首先拿汽車之家舉例:網頁欄目留白的間距不夠多,每個欄目之間區分的不明顯。整體框架三列板塊式布局,視覺給人扎實穩重,重點地方的色彩突出的比較明顯,給人一目了然。但是在搜索車型的用戶體驗沒有易車網好,對于人們關心的價格搜索并沒有設置。
在網站內部的搜索欄給用戶體驗的感覺也沒有易車網那樣簡潔明了。在品牌和車型海選的時候沒有產品縮略圖,僅僅是文字的敘述,略顯單調。
然后我們從另一個角度分析一下易車網,我們從視覺設計的角度來看,比如圖標設計:
這兩組網站的圖標,都存在一定的問題,首先第一組圖標風格不統一,第一個汽車報價大全圖標做了投影浮雕效果,而后面的確實扁平化的風格。然后圖標設計沒有簡潔實用,圖標差異性也沒有表達出來。
第二組圖標的設計以扁平化為主,色彩樣式統一,圖標表達的含義也較為簡單清晰,但是可以明顯的發現缺乏設計元素和想法,僅僅只是簡單的幾何圖形配上一個文字或者符號。在互聯網高速發展的今天,為了追求一個工作效率和時間成本,這樣的設計從另一個角度上來說是可行,但是這樣的圖標后期是一定要去優化和修改的。我們可以從它的樣式、風格、藝術性、識別性、獨創性上進行改善。從而在提升視覺效果的同時也可以節省用戶的時間,提升點擊效率。
2 汽車網站用戶需求和構架
汽車電商的平臺的興起,就一定要分析和研究用戶需求,從而帶來好的用戶體驗。
分析用戶需求我們主要從用戶特點來分析。目標用戶主要是指進行網上購物的人群,年齡階層偏向上班組的中年段,在用戶的使用中也要考慮不會用按鈕點擊,復雜操作的中老年人。
網站構架,以功能需求為主,大的構架包括新車買賣、二手車買賣、汽車配件三大板塊。
3 用戶體驗與界面設計
好的界面設計可以大幅度提升用戶體驗,我們的設計要充分符合中國人的使用習慣并結合人們的審美需求。
以下是通過實際的案例來分析和研究,好的交互設計是如何實現和運用的。這個首頁的界面設計,視覺沖擊力非常強,簡潔明了,顏色的運用的也非常的好。先從色彩上來說,以白色為主,在需要強調的地方運用了紅色和深灰色,不僅色彩的對比強烈,也充分符合企業VI手冊的色彩識別標準。再如購物車橙色的按鈕,符合人們的心理需求,橙色讓用戶更有點擊的欲望。
接著我們分析一下恒信首頁的圖標設計。最顯而易見的是六個欄目的大圖標,寫實風格,有一定的趣味性,圖標的色彩雖然五顏六色,但并不雜亂,主要原因是因為色彩多,但色彩的使用面積并不大,整個頁面的主色調依然是白色和灰色為主,圖標的色彩很好的作為輔助顏色,點綴其中。然后六個圖標的風格統一,識別性強,給人們的體驗是看圖即知道含義。接著登陸框的兩個小圖標也與之前的圖標做了很好的對比,層次清晰。底部六個常駐圖標,在色彩上略顯過深,從形式上來說具有一定的藝術性,下面的文字也很好的和圖標形成了一個層次對比,黑白灰的運用不會給你帶來審美疲勞。
網站的整體設計風格,我們可以看出,設計以簡潔為主,這樣設計的原因,主要還是基于前期的需求分析和產品經理給的產品原型來定的。不難發現這樣的設計很好的明確了目標,沒有多余的地方,一方面給用戶節省了時間,另一方面也可以減少服務器負擔,節省企業成本,優化網站運行速度。
所以在界面設計中如何做到盡量的簡潔和好的用戶體驗顯的格外的重要。圖標在當今的web端和移動端都大量的運用到,它的特點視覺沖擊力比文字強,帶給人們新鮮感,吸引人們點擊和使用。當然用戶體驗的提升不僅僅局限于圖標的視覺設計。
在這兩個頁面中,登錄框的大小、擺放的位置、文字的大小、色彩、頁面布局、點擊樣式、鼠標放上去的樣式、頁面跳轉的合理性都是影響用戶提的方面。
中國人的使用習慣是視覺中心偏向右邊,登錄框放在banner的右邊位置醒目,誘使人們進行注冊登錄,積累平臺潛在客戶。文字的大小以12號為主,顏色使用并不用純黑色,而是深灰色,這樣做的原因是視覺對比有,人們感官上會顯的舒服。頁面布局穩重,有層次,也簡潔很多。點擊樣式鼠標放上去的效果,引導人們點擊,和幫助人們更好找到點擊的目標區域,頁面跳轉設置也摒除了繁瑣的幾步跳轉,直接鏈接到了目標頁面,給人們好的體驗。
汽車電商平臺圖標的差異化的研究,主要通過實例來分析。在這個頁面設計上圖標的差異化并沒有表現出來,沒有區分團購、特賣、促銷。這六個圖標設計中都運用了車的元素,相反的給了用戶一定的誤導,沒有差異化的圖標,設計出來是失敗的,扁平化的設計,在視覺沖擊力上來說也略顯單薄。
4 總結
用戶產品設計和圖形設計的傳統方法著重關注的是與工藝、美感和形式相關的美學品質。解決設計問題乃以情感價值為依據,對成果的評判或批評也往往是在藝術領域的范疇進行的。與之不同的是,交互設計將重心從視覺效果轉移到了人這方面上。
參考文獻:
[1]梅哲.圖形圖像界面中的圖標設計[D].武漢理工大學,2009.