巴塞罗那vs维戈塞尔塔比分预测
今天是:
0634-6111386
專注于在線教育平臺、辦公信息化、微信小程序、手機客戶端、微信公眾號等系列軟件研發
新聞資訊 News當前位置:首頁 > 新聞資訊 > 行業新聞

網站的界面應該如何設計

作者:思科商務 來源:本站 發表時間:2016/1/28 13:51:43 查看:

上世紀最偉大的發明莫過于互聯網的發明,進入21世紀,互聯網代表著一種嶄新的信息交流方式,它使信息的傳播突破了傳統的政治、經濟、地域及文化的阻隔,使信息傳達的范圍、速度與效率都產生了質的飛躍。如果把互聯網比做一棵大樹,那成千上萬的網站則是組成這參天大樹的枝條,而每個網站都是由諸多網頁構成那么網頁就是這參天大樹上數不清的葉子,故網頁是構成互聯網的基本元素。我國這兩年的網絡發展非常快,每天都有數以千計的網站誕生,其中的網頁數量更是成幾何式的增長,然而關乎網站形象和瀏覽者用戶體驗的網站界面設計卻不容樂觀。除了一些大的專業網站在版面的編排上比較講究之外,其他很少見到界面設計考究、美術創意優秀的中文網站。如何設計出美觀(吸引受眾眼球)的網頁,如何用優秀的用戶體驗贏得受眾的一次又一次的瀏覽仿佛一夜間就擺在了眾設計師的案頭。就此本文從以下幾點討論了關于網站界面設計所需要重視的問題。

一、認識UI

(一)什么是 UI :

      UI的本意是用戶界面,是英文User和 interface的縮寫。

(二)什么是 GUI:

     Graphics User Interface 圖形用戶界面,也就是我們今天要主要研究的東西。

(三)什么是用戶界面設計:

在人和機器的互動過程中,最重要的一個方面就是我們所說的界面(。用戶界面設計是屏幕產品的重要組成部分。大致界面可分為感覺(視覺、觸覺、聽覺等)和情感兩個層次。界面設計是一個需要多方面專業知識的工作,認知心理學、設計學、語言學等在此都扮演著重要的角色。用戶界面設計的三大原則是:置界面于用戶的控制之下;減少用戶的記憶負擔;保持界面的一致性。從字面上看是用戶與界面2個組成部分,但實際上還包括用戶與界面之間的交互關系,所以這樣可分為3個方向,他們分別是:用戶研究、交互設計、界面設計。

1.用戶研究

用戶研究包含兩個方面:一是可用性研究,研究如何提高產品的可用性,使得網站界面的設計更容易被人接受、使用和記憶;二是通過可用性的研究,發掘用戶的潛在需求,為技術創新提供另外一條思路和方法。用戶研究是站在人文學科的角度來研究產品,研究用戶的需要,站在用戶的角度介入到產品的開發和設計中。對于設計師來說就是研究如何使自己的網站頁面更收瀏覽者的歡迎

用戶研究通過對于用戶的使用環境、瀏覽習慣等研究,使得在網站界面設計的前期能夠把用戶對于網站功能的期望、對設計和外觀方面的要求融入到網站的開發與設計過程中去。

2.交互設計

這部分指人與機之間的交互工程,在過去交互設計也由程序員來做,其實程序員擅長編碼,而不善于與最終用戶交互。在使用網站的過程中最能給瀏覽者留下深刻印象的一定是網站的視覺因素,也就是我們所談論的網站界面。所以,很多的網站雖然功能比較齊全,但是交互方面設計很粗糙,繁瑣難用,使用困難。如何使瀏覽者在使用網站時可以輕松自如的找到自己想要的資源,如何輕松實現網站的功能,給瀏覽者以愉悅的心情,拉攏瀏覽者下一次的登陸,這些都需要在網站的交互設計上下足工夫。

3.界面設計

在漫長的軟件發展中,界面設計工作一直沒有被重視起來。做界面設計的人也被貶義的稱為“美工”。其實網站界面設計就像工業產品中的工業造型設計一樣,是產品的重要買點。一個友好美觀的界面會給人帶來舒適的視覺享受,拉近人與電腦的距離,為網站創造賣點。如果把網站比做一個人的話,網站的后臺編程好比人的骨骼與肌肉,而界面則是者個人的外表,人人都喜歡美人,同樣有著良好視覺感受的網站界面也是網站拉攏人氣的關鍵所在。網站界面是網站靈魂的外在表現,忽略網站的界面設計最終會使你的網站輸在起跑線上。界面設計不是單純的美術繪畫,他需要定位使用者、使用環境、使用方式并且為最終用戶而設計,是純粹的科學性的藝術設計。檢驗一個界面的標準即不是某個項目開發組領導的意見也不是項目成員投票的結果,而是最終用戶的感受。

(四)界面構成要素

互聯網與傳統媒體最大的不同就在于除了文字和圖像以外,還包含聲音、視頻和動畫等新興多媒體元素,增加了網頁界面生動性的同時也使得網頁設計者需要考慮更多頁面元素合理性運用。

1.文字

從網頁最初的純文字界面發展至今,文字元素作為網站內容傳達的主體,文字有著其他任何元素無法取代的重要作用。首先是文字信息符合人類的閱讀習慣,其次因為文字所占存取空間小,節省了下載和瀏覽時間。網頁中的文字主要包括標題、信息、文字鏈接等形式。文字作為占據頁面重要比率的元素,同時又是信息重要載體,它的大小、字體、顏色和排布對頁面整體設計影響極大。以文字排布為主的網頁界面,只要文字排布得當,版面同樣可以生動活潑,分類條例清晰,不會給人單調感覺。

2圖形

在大多數網頁中,圖形占據了重要的位置,有的甚至是全部頁面。圖形往往能引起人們的注意,并激發閱讀興趣,合理的運用圖形,可以生動直觀、形象地表現設計主題。網頁中常用的圖形格式包括JPG、GIF和BMW。圖形元素包括標題、背景、主圖、鏈接圖標四種。以圖像作為標題和鏈接可以使網頁具有更好的視覺效果,配合文字增強生動和形象性。主圖與背景在裝飾性上小有不同,背景是襯托主題,主圖則是突出表現主題。主圖是整個網頁的視覺中心,它具有直觀性強的特點,可以為單調的文字信息增強活力,不需要像文字那樣去逐句閱讀,可以不受文化水平的限制,能給人強烈的視覺信息。

3多媒體

隨著網絡硬件設備的日益完善,網頁構成中的多媒體元素運用的也越來越多,主要包括音頻、視頻和動畫。這些是界面構成中最吸引人的元素,好的多媒體元素不但可以增加網站的活力還可以有效的提高網站與瀏覽者之間的互動交流。

二、網站界面布局

網頁設計源于平面設計但又與平面設計有所區別不同,相同的是在設計中多運用平面構成的基本原理,不同的是它的大小比較固定,傳載的媒體只限于電子顯示器(包括手機、PDA等),這樣就為設計者提出了更為苛刻的要求。

(一)頁面尺寸

由于網頁的瀏覽多是基于顯示器實現的,所以顯示器的分辨率就決定了網頁設計者設計網站頁面的大小,目前比較流行的顯示器的尺寸為

800*600、1024*768、1125*864、1280*720、1280*768、1280*960、1280*1024

而目前主流設計網站頁面的大小一般為

600*300、760*420、995*436

有效可視區域(單位:px)

屏幕

800

600

1024

768

1280

1024

IE6.0

779(+21)

432(+168)

1003(+21)

600(+168)

1259(+21)

856(+168)

IE7.0

779(+21)

452(+148)

1003(+21)

620(+148)

1259(+21)

876(+148)

Firefox2.0

783(+17)

417(+183)

1007(+17)

585(+183)

1263(+17)

841(+183)

Opera9.0

781(+19)

461(+139)

1005(+19)

629(+139)

1261(+19)

885(+139)

一般情況下寬度是一定的但頁面的寬度則可以根據內容的多少而進行調整,但設計寬度始終要比顯示器的實際大小窄20像素,這為的是給右側的滾動條留有一定的空間(見圖1)clip_image001(圖例1)

1. 最保守而最有兼容性的一屏大小是:779×432 

2. 最廣泛的一屏大小是:1003×600 

3. 適合目前國內的情況,一屏大小是779×600 

(二)視覺順序

網頁是通過視覺元素的引人注目而實現信息內容的傳達,為了使網頁獲得最大的視覺傳達功能,使網絡真正成為可讀強性而且新穎的媒體,網頁的設計必須適應人們視覺流向的心理和生理的特點,由此確定各種視覺構成元素之間的關系和秩序。因此,設計時應該研究各種視覺造型元素之間的距離、位置、面積和視覺流程的問題。

視覺流程的形成是由人類的視覺特性所決定的。因為人眼晶體結構的生理構造,只能產生一個焦點,而不能同時把視線停留在兩處或兩處以上的地方。人們在閱讀一種信息時,視覺總有一種自然的流動習慣,先看什么,后看什么,再看什么。視覺流程往往會體現出比較明顯的方向感,它無形中形成一種脈絡,似乎有一條線、一股氣貫穿其中,使整個版面的運動趨勢有一個主旋律。心理學的研究表明,在一個平面上,上半部讓人輕松和自在,下半部則讓人穩定和壓抑。同樣,平面的左半部讓人輕松和自在,右半部讓人穩定和壓抑。所以平面的視覺影響力上方強于下方,左側強于右側。這樣平面的上部和中上部被稱為“最佳視域”,也就是最優選的地方。

在網頁設計中一些突出的信息,如主標題、每天更新的內容等通常都放在這個位置。當然視覺流程是一種感覺而非確切的數學公式,只要符合人們認識過程的心理順序和思維發展的邏輯順序,就可以更為靈活地運用。在網頁設計中,靈活而合理地運用視覺流程和最佳視域,組織好自然流暢的視覺導向,直接影響到傳播者傳達信息的準確與有效性。所以在網頁的編輯設計中,視覺導向是一個要點,網頁的設計是一種創造,首先要立足信息的傳達,但又要符合人們較為普遍的思維習慣,做到視覺流程自然、合理、暢快。成功的視覺流程安排,能使網頁上的各種信息要素在一定空間內合理分布,能使頁面上各信息要素的位置、間隙、大小保持一定的節奏感和美感。

clip_image002(圖例2 視覺順序)

在布局設計中多使用平面的設計規律如“九分法”等 (見圖2)

(三)布局步驟

1. 草圖

這時設計師面對的是一張白紙,要做的就是簡單的用畫筆在紙上將創意的大致輪廓畫在紙上,以便給以后的設計做大致的指導。

2. 粗略布局

將紙上的輪廓在電腦上體現出來,對畫面進行分割,也可以用色塊進行填充,確定好在什么地方布置什么欄目,他們的大小等。(見圖例4)

clip_image003(圖例4)

3. 將布局細化

將粗略的布局進行細化,使色彩,LOGO,導航條等實現,一般用的工具多為PHOTOSHOP和FIREWORKS(見圖例5)

clip_image004(圖例5)

4. 點、線、面的運用

在網頁設計中同樣離不開平面設計中最基本的點、線、面的運用

4.1點的運用

在內容繁雜的網頁上為了可以讓瀏覽者更輕松的找到自己想要的信息,點的引導作用必不可少(見圖5)

clip_image005(見圖6)

4.2線的運用

線不但起到了頁面的分割作用,很好的運用線條還使網頁錦上添花(見圖7)

clip_image006(圖例7)

5.布局的原則

屏幕布局因功能不同考慮的側重點不同。各功能區要重點突出,功能明顯。無論哪一種功能設計,其屏幕布局都應遵循如下五項原則:

  平衡原則。注意屏幕上下左右平衡。不要堆擠數據,過分擁擠的顯示也會產生視覺疲和接收錯誤。

  預期原則。屏幕上所有對象,如窗口、按鈕、菜單等處理應一致化,使對象的動作可預期。

  經濟原則。即在提供足夠的信息量的同時還要注意簡明,清昕。特別是媒體,要運用好媒體選擇原則。

  順序原則。對象顯示的順序應依需要排列。通常應最先出現對話,然后通過對話將系統分段實現。

  規則化。畫面應對稱,顯示命令、對話及提示行在一個應用系統的設計中盡量統一規范。

三、 色彩在設計中的運用

(一)色彩的常識

  最基本的有三種(紅,黃,藍),其它的色彩都可以由這三種色彩調和而成。我們稱這三種色彩為“三原色”。 黑白灰屬于非彩色系列。其它的色彩都屬于彩色。任何一種彩色具備三個特征:明度、純度和色相,其中非彩色只有明度屬性。

  明度,也叫亮度指的是色彩的明暗程度的大小,明度越大,色彩越發亮。比如一些購物,兒童類網站。用的是一些鮮亮的顏色,讓人感覺絢麗多姿,生氣勃勃。明度越低,顏色越暗。主要用于一些游戲類網站,充滿神秘感;一些個人站長為了體現自身的個性,也可以運用一些暗色調來表達個人的一些孤僻,或者憂郁等性格。有明度差的色彩更容易調和。如紫色(#993399)跟黃色(#ffff00),暗紅(#cc3300)跟草綠(#99cc00),暗藍(#0066cc)跟橙色(#ff9933)等。

純度,指色彩的鮮艷程度,純度高的色彩純,鮮亮。兒童、動漫、時尚、購物等多用亮色調,給人以活潑、明朗、大方特點,純度底的色彩暗淡,含灰色。多用于藝術、科技等技術含量高的領域,給人以深遠、穩重之感。

色相,指的是色彩的名稱。這是色彩最基本的特征,是一種色彩區別于另一種色彩的最主要的因素。比如說紅色,綠色,藍色等等都代表了不同的色相。同一色相的色彩,調整一下亮度,或者純度很容易搭配,比如,深紅,暗暗,桃紅等。

  暖色,暖色跟黑色調和可以達到很好的效果。暖色一般應用于購物類網站,電子商務網站,兒童類網站等等,用以體現商品的琳瑯滿目,兒童類網站的活潑,溫馨等等效果。

冷色,冷色一般跟白色調和可以達到一種很好的效果。冷色一般應用于一些高科技,游戲類網站,主要表達嚴肅,穩重等效果,綠色,藍色,藍紫色等等都屬于冷色系列。

相近色:色環中相鄰的三種顏色。相近色的搭配給人的視覺效果很舒適,很自然。所以相近色在網站設計中極為常用。

  互補色,色環中相對的兩種色彩。對互補色,調整一下補色的亮度,有時候是一種很好的搭配。

  色彩均衡,網站讓人看上去舒適,協調,除了文字,圖片等內容的合理排版,色彩的均衡也是相當重要的一個部分。比如一個網站不可能單一的運用一種顏色,所以色彩的均衡問題是設計者必須要考慮的問題。色彩的均衡,包括色彩的位置,每種色彩所占的比例,面積等等。比如鮮艷明亮的色彩面積應小一點,讓人感覺舒適,不刺眼。這就是一種均衡的色彩搭配。

(二)色彩的運用

  藍色是現代商務領域的流行色,也是最“安全”的WEB流行色。如果設計師對自己控制色彩的能力沒有太大把握,那么使用藍色是最好的選擇。藍色受設備偏色的影響最小。

紅色既可以象征著熱血、激情、沖動、勇氣與力量也可以象征恐怖與暴力,在主要由紅色構成的色彩中,有桃紅色的浪漫與溫馨,也有深紅色的穩健與深沉,由于紅色本身的亮度和飽和度都比較強,所以在與亮度和飽和度同樣比較強的冷色(如藍色綠色)相配時,中間最好能有一些過渡行的顏色。比如純紅與純藍搭配時可以在中間插入面積適中的白色,這樣一來,頁面中各視覺元素之間的沖突就不會那么強烈。

黃色是一種非常難以駕馭的顏色,同一種黃色與其他顏色搭配在不同的環境下表現出的視覺和心理效應往往會有很大差異,同樣的黃色既可以在某個環境中表現出熱情奔放的一面也可以在另一種環境中表現出陰險狡詐的一面。

綠色由于自身很難與其他顏色搭配,所以是網頁設計中比較少用的顏色,在以綠色為主的優秀網頁設計中大多會有橙色的參與。

橙色是朝陽的顏色也是柑橘的顏色,橙色象征著快樂、溫馨、時尚和動感。橙色有紅色熱情奔放的特點,但又不像紅色那么鮮艷和奪目;橙色有黃色敏快和爽朗的一面但又不像黃色那么容易產生平庸的感覺,大面積使用橙色的網頁,可以讓人感覺到撲面而來的溫暖與活力。另一方面,網頁設計師們越來越喜歡在白色、綠色、藍色、灰色、黑色的網頁中使用小巧而醒目的橙色元素,比如,橙色的小箭頭、小按鈕等元素,這種設計可以非常有效的吸引瀏覽者的注意力。

紫色與紅色藍色在色調上有著近似的關系,與黃色、綠色、橙色等可以形成鮮明的對比,深紫色適于表現幽雅、神秘、憂郁等主題,淺紫色則適于表現浪漫溫馨等主題。

(三)確定網站的主題色

  一個網站不可能單一的運用一種顏色,讓人感覺單調,乏味;但是也不可能將所有的顏色都運用到網站中,讓人感覺輕浮,花俏。一個網站必須有一種或兩種主題色,不至于讓客戶迷失方向,也不到于單調,乏味。所以確定網站的主題色也是設計者必須考慮的問題之一。

  一個頁面盡量不要超過4種色彩,用太多的色彩讓人沒有方向,沒有側重。當主題色確定好以后,考慮其它配色時,一定要考慮其它配色與主題色的關系,要體現什么樣的效果。另外哪種因素占主要地位,是明度,純度還是色相。

(四)色彩的搭配

  在學習了解了色彩的一些基本概念及色彩的一些搭配問題,具體運用到網頁中,各要素的色彩又是如何搭配的呢?

1、網頁標題

  網頁標題是網站的指航標,瀏覽者要在網頁間跳轉,要了解網站的結構,網站的內容,都必須通過導航或者頁面中的一些小標題。所以我們可以使用稍微具有跳躍性的色彩,吸引瀏覽者的視線,讓他們感覺網站清晰、明了,層次分明。想往哪里走都不會迷失方向。

2、網頁鏈接

  一個網站是由許多頁面組成的,實現網頁間相互跳轉的就是網頁的鏈接,所以文字與圖片的鏈接是網站中不可缺少的一部分。這里特別指出文字的鏈接,因為鏈接區別于文字,所以鏈接的顏色不能跟文字的顏色一樣。大多數瀏覽者不會花太多的時間用在尋找網站的鏈接上。設置了獨特的鏈接顏色,讓人感覺他的獨特性,自然而然好奇心必然趨使他移動鼠標,點擊鼠標。

3、網頁文字

  多數網站都會運用背景顏色,這就要求設計者考慮到背景顏色的用色,以及前景文字的搭配等問題。一般的網站側重的是文字,所以背景可以選擇純度或者明度較低的色彩,文字用較為突出的亮色。讓人一目了然。

4、網頁標志

  網頁標志是宣傳網站最重要的部分之一,所以這兩個部分一定要在頁面上突迎而出。怎樣做到這一點呢?我們將LOGO和BANNER做的鮮亮一些,也就是色彩方面跟網頁的主題色分離開來。有時候為了更突出,也可以使用與主題色相反的顏色。

5、網頁的留白

中國的書法講究留白,好的留白的運用可以帶給瀏覽者對畫面的聯想,更為重要的一點就是,在網站使用中瀏覽者通常會劃動鼠標來快速瀏覽頁面,如果沒有留白,瀏覽者很可能會誤點鏈接,給瀏覽帶來不便。

  為了能讓自己的網頁設計得更靚麗、更舒適,為了增強你的頁面的可閱讀性,必須合理,恰當地運用與搭配頁面各要素間的色彩!

綜上所述,我們了解到網站的界面不單單是美工設計那么簡單,它包括了心理學,生理學,平面構成,色彩構成等多方向的知識,只有了解并可以很好的運用這些知識,我們設計出的網站才能更好的為受眾服務。


新聞分類 News Nav
聯系我們 Contact Us

全國統一服務熱線

0634-6111386

我們的郵箱

[email protected]

在線客服

萊蕪軟件開發|萊蕪網站建設|萊蕪網絡公司|萊蕪微信開發|萊蕪思科電子商務有限公司
0
巴塞罗那vs维戈塞尔塔比分预测 中福在线投注卡是什么 2019今晚六开彩直开奖结果 江苏11选5走势图技巧 乐彩3d论坛 新时时彩群 快速时时网址 辽宁35选7今日开奖 新时时彩全部玩法 广西11选5走势 七位数历史中奖号码 时时彩购彩app下载 山东11选5开奖公告