有關門戶網站整體設計思路_第1頁
有關門戶網站整體設計思路_第2頁
有關門戶網站整體設計思路_第3頁
有關門戶網站整體設計思路_第4頁
有關門戶網站整體設計思路_第5頁
已閱讀5頁,還剩18頁未讀, 繼續免費閱讀

下載本文檔

版權說明:本文檔由用戶提供并上傳,收益歸屬內容提供方,若內容存在侵權,請進行舉報或認領

文檔簡介

1、門戶網站有專門多種。最為國人熟知的是象新浪搜狐那種信息類門戶。要緊以廣告收入為主?,F在也有博客門戶等。象當當、淘寶那樣的購物平臺,事實上也是一種門戶,只只是陳列的是商品信息,贏利方式是依靠出售商品。不同的門戶,有不同的需求,都應該依照這些需求動身去設計網站,這是眾所周知的,然而它們之間也有共性,那確實是都要求提高掃瞄效率!促使網站達成贏利目標。信息類門戶:1.網頁的體積最小2.分類明確,多方向引導3.信息量最大4.風格一致,易于治理5.以適當的方式提供多種多樣的廣告位6.分欄目設計突出主題風格購物類門戶:1.網頁體積盡量小2.分類明確,多方向引導3.信息依照重要程度疏密有秩4.每一個頁面信息差

2、不多上一種廣告方式5.突出商品本身6.分欄目設計突出主題風格一、網站風格/創意“風格(style)是抽象的。是指站點的整體形象給掃瞄者的綜合感受。整體形象包括站點的版面布局,色彩,字體,掃瞄方式等。如:我們覺得迪斯尼是生動爽朗的而IBM則是專業嚴肅的。每一個網站都會給人們留下的不同感受。那個地點我們需要做到的是依照網站的定位做出網站特有的風格。除此我們還需要在風格同一上需要把握一下,事實上那個風格的統一和傳統的印刷出版物沒什么區不。你網頁上所有的圖像、文字,包括像背景顏色、區分線、字體、標題、注腳什么的,都要統一風格,貫穿全站。如此子用戶看起來舒服、順暢,會對你的網站留下一個“專門專業”的印象

3、,有一個全局感受。創意,所謂創意確實是不拘一格?某些設計師在做創意的時候大費周章,做出來確實不可否認專門有創意、專門不致,但往往關于行業網站的客戶什么緣故不能同意呢?現在不要太責備客戶的不識貨,應該反思,抓住客戶的需求。事實上做行業網站不需要專門多大的創意,也不要白費過多的時刻去追求如何個性、如何好看,我們只需要一點小小的創意貫穿全站,也許會使網站更生動更具有吸引力、更有思想?!辈灰陧擃^用大面積的裝飾圖片來體現整個網站的風格門戶網站構成專門復雜,通常會兼并、嵌套專門多小網站。網站的經營方因此希望讓這些小的網站套用整個門戶的VI。因此,在使用最頻繁的頁頭部分,應該是能夠專門明確的標識網站風格的

4、地點。然而,不要用大副的裝飾圖片來體現,LOGO?LOGO是干什么用的?設計時的動身點是什么?不確實是標識企業突出門戶風格嗎?假如LOGO不能起到如此的作用,那還要它做甚?因此為了掃瞄速度快,最好頁頭只有LOGO、文字導航、簡單色彩裝飾。我建議頁頭最好是能夠寵滿頁面的,沒有寬度限制,如此就能夠適應各種寬度的網頁了。不要制作過多過大的圖片鑲嵌在網頁中,如大片的沒有意義的裝飾圖片,不忘了你是在做一個門戶!有商業目的的門戶!這是在做生意!假如你做生意老總會批給你專門多鈔票去做些對銷售沒有關心的事嗎?也許他會批給你鈔票組織職員去旅游,用于提高士氣,然而他絕對可不能批給你鈔票帶所有職員去冰島,并蓋一個希

5、爾頓飯店!二、網站LOGOLogo顧名思義確實是站點的標志圖案,logo最重要的確實是用圖形化的方式傳遞網站的定位和經營理念、同時便于人們識不。網站logo的設計過程中一般有以下三種思路:1.直接以網站網址作為logo。2.依照網站提供的產品/服務特點展開logo設計。3.以傳遞網站運營商的經營理念為特色。我個人建議門戶網站的LOGO中最好包含:網址(去掉WWW及網址后綴)中文標識輔助圖形標識。輔助圖形標識能夠最好的體現網站風格,變化多樣。網址和中文標識的設置要清晰易用。最好獨立創建一套字體,但最好跟常見字體相差不太大。便于應用在子欄目中。三、視覺流程“人們在閱讀某種信息時,視覺總有一種自然的

6、流淌適應,先看什么,后看什么,再看什么。在心理學的研究表明,一般的掃瞄適應是從上到下、從左到右,在一個平面上,上松下穩而壓抑。同樣,平面的左松右穩。因此平面的視覺阻礙力上方強于下方,左側強于右側。如此平面的上部和中上部被稱為“最佳視域”,也確實是最優選的地點。在網頁設計中一些突出或推舉的信息通常都放在那個位置。左側為常規信息,右側為推舉信息。因此這種視覺流程只是一種感受并非一種固定的公式,只要符合人們的心理順序和邏輯順序,就能夠更為靈活地運用,在網頁設計中,靈活而合理地運用直接阻礙到傳達信息的準確與有效性?!彼?、網頁框架與布局網頁布局大致可分為“國”字型、拐角型、“T”字型、“L”字型、綜合框

7、架型、Flash型、變化型,在那個地點就不做一一論述了。事實上在我們在做設計的時候并沒有過多的去考慮什么形式,比如我們在一張紙看到一個圓形的東西,專門容易能夠聯想到它像太陽,而有些人則聯想到月亮等等這差不多上一種形式比喻,最重要的是抓住客戶的需求,把握網站的定位做處合理的框架布局。1分辨率網頁的整體寬度可分為三種設置形式:百分比、象素、象素+百分比。通常在網站建設中以象素形式最為常用,行業網站也不列外。我們在設計網頁的時候必定會考慮到分辨率的問題,科技進展到現在我們通常用的是1024*768和800*600的分辨率,現在網絡上專門多差不多上用到778個象素的寬度,在800的分辨率下面往往使整個

8、網頁專門壓抑,有種不透氣的感受,事實上那個寬度是指在800*600的分辨率上網頁的最寬寬度,不代表最佳視覺,不妨試試760770的象素,不管在1024依舊800的分辨率下都能夠達到較佳的視覺效果。同時,針對你的目標用戶,你能夠采納不同的分辨率標準,比如購物網站的用戶,通常差不多上比較適應網絡生活,有一定經驗的網民,他們的顯示器通常會比較先進,象目前就能夠采納最低1024*768分辨率。假如你面對的目標用戶,行業不固定,也許有相當一部分都只是間或上網,那么他們專門可能采納的是過時的舊設備。就要考慮用較低分辨率做為制作標準。2合理廣告在目前一些網站的廣告(彈出廣告、浮動廣告、大廣告、banner廣

9、告、通欄廣告等等)讓人覺得專門煩瑣,更本就不情愿來看,有時連你那個網站都不上了,如此一來網站受到了嚴峻的阻礙、廣告也沒達到廣告的目的。這些問題差不多上我們在設計網站之前需要考慮、需要規劃的內容之一。浮動廣告有兩種,第一種是在網頁兩邊空余的地點能夠上下浮動的廣告,第二種是滿屏幕到處隨機移動的廣告。建議能使用第一種的情況下盡量使用第一種,不可幸免第二種情況時盡量在數量上操縱最多一個就好。假如數量過多會直接阻礙到用戶的心理、防挨到用戶掃瞄信息,適得其反。首頁廣告不宜過多適中即可。如在注冊或者某個購買步驟的頁面上最好不要出現過多的其他無關的內容讓用戶分心,幸免客戶流失等。最新新流行的一種廣告是將整個頁

10、面按1024*768或更高的分辨率標準來設計,在超過800*600用戶掃瞄范圍的地點,放置的是常規廣告信息或軟廣告信息,如此一來,設備條件好的用戶就能夠掃瞄將近全屏的頁面內容,而800*600的用戶只能看到廣告部分的一個小邊,然而不阻礙掃瞄要緊信息。3空間的合理利用專門多的網頁都具有一個特點,用一個字來形容,那確實是“塞”,它將各種各樣的信息如文字、圖片、動畫等不加考慮的塞到頁面上,有多少擠多少,不加以規范,導致掃瞄時會遇到專門多的不方便,要緊確實是頁面主次不分,喧賓奪主,要不確實是沒有重點,沒有專門好的歸類,整體就像各大雜燴。讓人難以找到需要的東西。有的則是一片空白失去平衡,也能夠用個“散”

11、字來形容。并非要把整個頁面塞滿了才不覺得空,也并非讓整個頁面空曠才不覺得滿,只要合理的安排、有機的組合,使頁面達到平衡,既使在一邊的部分大面積留空,同樣可不能讓人感到空,相反如此會給人留下寬敞的考慮空間,給人回味又達到了視覺效果。比如重要但形式單一的文字信息,就要在塊于塊之間多點留白。圖片花色凌亂的部分要于其他塊有明顯區分。在首頁上展示子欄分類信息要緊湊,以一大類作為一個整體塊。相同類的信息采納相同的排榜方式。門戶的導航是經常變且類不繁多的,不一定什么時候是單數什么時候是雙數,因此不要用圖片來制作。重要的第一屏包括頁頭的的第一屏,應該集中了用戶最常用的信息,導航,服務鏈接。這一屏的裝飾,應該專

12、門大程度的體現了整個網站的設計風格,同時分為頁頭(分類導航服務導航);登陸區;首推圖片廣告/文字廣告;熱門信息/導航;最新信息推舉;首推專題;4文字編排在網頁設計中,字體的處理與顏色、版式、圖形化等其他設計元素的處理一樣特不關鍵。4.1文字圖形化文字圖形化確實是將文字用圖片的形式來表現,這種形式在頁面的子欄目里面最為常用,因為它具有突出,同時又美化了頁面,使頁面更加人性化加強了視覺效果。是文字無法達到的。關于通用性的網站弊端確實是擴展性不強。4.2強調文字假如將個不文字作為頁面的訴求重點,則能夠通過加粗、加下劃線、加大號字體、加指示性符號、傾斜字體、改變字體顏色等手段有意識地強化文字的視覺效果

13、,使其在頁面整體中顯得出眾而奪目。這些方法實際上差不多上運用了對比的法則。假如在更新頻率低的情況下也能夠使用文字圖形化。五、網站配色1.用一種色彩。那個地點是指先選定一種色彩,然后調整透明度或者飽和度,(講得通俗些確實是將色彩變淡或則加深),產生新的色彩,用于網頁。如此的頁面看起來色彩統一,有層次感。2.用兩種色彩。先選定一種色彩,然后選擇它的對比色(在Photoshop里按ctrl+shift+I)再進行微小的調整。整個頁面色彩豐富但不花稍。3.用一個色系。簡單的講確實是用一個感受的色彩,例如淡藍,淡黃,淡綠;或者土黃,土灰,土藍。也確實是在同一色系里面采納不同的顏色使網頁增加色彩,而又不花

14、,色調統一。這種配色方法在網站設計種最為常用。4.灰色在網頁設計中又稱為“萬能色”,其特點是能夠和任何顏色搭配,在使用時把握量幸免網頁變灰。在網頁配色中,盡量操縱在三種色彩以內,以幸免網頁花、亂、沒有主色的顯現。背景和前文的對比盡量要大,(絕對不要用花紋繁復的圖案作背景),以便突出要緊文字內容、也使用戶在掃瞄信息的時候可不能覺得累。六、常見問題6.1分解大型表格為了加快網頁的掃瞄速度,盡可能幸免用大型表格,因為掃瞄器必須等待整個表格的內容全部到達客戶端,才能顯示那個表格的內容,而文本或圖像則是一邊下載一邊顯示。同時我們制作網頁時要盡量減少表格的深度、表格復雜化,這一點尤為重要可直接阻礙網頁掃瞄

15、速度、又給后面的程序添加帶來了不必要的苦惱。將浮動層等load時刻慢的信息塊(div)放在的最后,能夠盡量少的阻礙用戶掃瞄速度。6.2網站導航要清晰“您所在位置”在大型網站中是不可缺少的一部分,其作用表明您現在所處在的位置,使用戶可不能不知東西南北迷失在網站中。其次還有讀者進入目的頁的點擊次數,不能超過三次。假如三次以上還找不到用戶所要的信息,人家可就沒有耐心陪你玩了!6.3圖片注解在專門多網站上我們都能夠找到一個共同的缺點,當網速慢時有專門圖片都無法顯示,又沒有注解使得用戶反感,如在注冊時的按鈕是圖片做的又沒加圖片注解,而導致連注冊都找不到,假如加了注解這些問題也就不成問題了!6.4系統按鈕

16、在我們做按鈕的時候,要做成“按鈕”的形式(type=button),而不要做成“提交表單”的形式(type=submit),方便以后程序設計。6.5空鏈接、死鏈接在一個優秀、專業的網站上是找不到任何一個空鏈接或死鏈接的情況,假如有這種情況會阻礙到用戶對您網站的評價,因此我們在制作的時候盡量幸免,幸免方法確實是提早做好鏈接,假如尚未完成的頁面則鏈上“建設中”的頁面,加以解釋。6.6導航條在大型的行業網站里面主導航條最好是用文字形式,幸免使用圖片或Flash做導航條、縮小網站擴展性。6.7網站的擴展性關于一個行業網站而言,網站的擴展性是相當重要的,隨時都要考慮到網站需求的變化!七、專題設計實際上,

17、我認為整個網站投入設計力量最多的地點,就應該是專題頁了。因為一個門戶是不應該經常改變結構和風格的。而為了更快速的引導顧客掃瞄,首頁上放的多是文字分類,不應有過多圖片裝飾。而專題頁上,最重要的是營造消費氛圍,刺激顧客的消費欲望,因此,只要是能夠體現商品特性,吸引用戶,即使頁面體積有些大也能夠容忍。在那個地點,有設計人員更多的發揮空間。在專題設計中需要注意的是,標題文字或廣告文字應該突出明顯,一般描述文字與背景色對比清晰。商品圖片突出,整個布局豐富而不凌亂,主次分明。可供用戶操作的空間明顯而突出。七、廣告圖片通常門戶網站的廣告來源專門廣,又的是廣告客戶自己制作的,有的是其他網站制作的,有的是門戶網

18、站自己的廣告部門設計制作的。在設計上專門難治理,只是有一個原則,確實是:顏色鮮艷層次少;主題文字突出;構圖簡單;動畫播放時刻只是長。從網易看大型門戶網站首頁設計思路許多人也許認為大型門戶網站首頁設計思路只是把一些導航、資訊內容和廣告堆積起來擺放得好看就能夠了,盡管那個觀點也并不是完全錯誤的,確實門戶網站首頁是由這三方面內容組織而成,但隨著互聯網的快速進展,用戶對訪問網站的要求也越來越高,在互聯網行業,因為專門多東西是免費和相似的,用戶轉移成本會比較低,在那個網站有的東西去其他網站差不多都能找到,只是輸入個網址就能夠了。網站營運商假如想留住用戶和吸引更多的用戶掃瞄自己的網站,那那個時候確實是需要

19、提高網站的用戶體驗來滿足用戶多方面的需求。因此現在大型門戶網站的設計越來越講究和更為用戶著想,最理想的門戶網站設計流程需要經歷“用戶研究-交互設計-視覺設計-可用性測試”這幾個步驟,事實上有專門多門戶網站設計也會經歷其中一些步驟,只是公司對這方面還沒有一個專門好的認識,沒有一個系統的叫法和詳細的職能分工,往往差不多上一個人身兼多職,大部分差不多上按個人經驗主觀推斷去決定,沒有一些客觀的數據支持。例如經常會有一些網站策劃者講:我也是網站用戶之一,那個功能我沒有使用需求,其他用戶也應該沒有使用需求能夠刪除。假如這時候有一份客觀的使用分析數據就明白用戶到底有沒有那個需求了。盡管我們不可能全部都需要客

20、觀數據去做支持,但起碼能以客觀數據為基礎再延伸到其他設計中。下面我們從幾個方面來分析網易門戶網站的設計思路:一、架構設計網站的首頁是兵家必爭之地,每個頻道負責人都想在顯眼的位置推舉自己的產品或者資訊來增加曝光率,總是希望把所有東西一下子讓用戶看到,但最后我們就發覺你放的東西越多,用戶就全然找不到他想要的東西,快速離開的可能性專門大。在國內的門戶網站都適應了資訊多、頁面長,什么都往首頁堆,感受內容越多會顯的越大氣,但用戶的耐性是有限的,因此網頁的通透性對國內網站專門重要,每一屏的架構變化不宜太多,適當就好,主次內容信息位置保持一致性,不然用戶每掃瞄到下一屏都需要重新去解讀架構,考慮該從那兒開始閱

21、讀,不但用戶的耐性被消耗掉還會增加用戶的掃瞄成本,因此網站首頁的架構必須清晰明了,保持較好的通透性,減少用戶的掃瞄成本。例如網易首頁,采納三欄式結構,左欄為導航推舉區提供網易特色產品入口,中欄為要緊資訊區,提供快速、全面、動態的各類新聞資訊,右欄為特色欄目區如博客、論壇等。各欄的內容屬性清晰,用戶能快速找到他們需要的信息暢順的掃瞄不需要多余的考慮。據研究分析用戶掃瞄網頁的視覺一般是從左到右、從上至下的一個掃瞄適應。網易網站的架構也在往那個方向改進,不斷的提升用戶體驗。網易資訊類頁面大致可分為3類架構,下圖是3類架構的視覺走向圖。網易首頁采納第一種架構,各頻道首頁例如新聞、體育、娛樂等采納第二種

22、架構,新聞最終頁采納第三種架構。如此可使用戶保持統一的視覺走向,不管掃瞄那個頁面用戶都明白他們需要的資訊在那兒,符合用戶掃瞄網頁的適應,減少用戶掃瞄成本。 二、風格設計相信多數人都專門喜愛apple的產品,什么緣故apple的產品那么受大眾歡迎,除了品牌阻礙力外,時尚簡單的外觀設計和界面設計,也是受歡迎的其中緣故之一,在apple的產品設計中讓人感受沒有多余的東西,每一根線存在差不多上有意義的。還有在中國的書畫史上,有專門多藝術境地高遠的作品差不多上少費筆墨卻格外傳神(如鄭燮的竹石、齊翁的墨蝦)。盡管 HYPERLINK / 網站設計不能稱作為一件藝術創作,但用最少的元素設計出最好的作品那個也

23、是網站設計中所追求目標之一。能用一根線表現出效果就沒有必要使用2根線,能用文字表示清晰的就不需要用圖片。頁面設計假如使用過多裝飾元素,會造成頁面龐大下載速度緩慢,不要高估網民的耐性,大部分網民差不多上沒有耐性的。掃瞄大量信息的時候需要一個簡潔無阻礙的界面,過多的色彩和裝飾反而會分散用戶的注意力,阻礙到用戶掃瞄效果和減少對資訊的點擊。網站需要用戶看到的是網站提供的信息內容和服務而不是花俏的裝飾(個性產品網站除外)。這也是網易門戶一直沿用簡潔風格緣故之一。例如新改版的網易新聞,打破了以往條條框框的感受,取消了多余的線框,界面更清晰簡潔,資訊內容更突出。列舉2個簡潔風格做的比較好的外國門戶網站Yah

24、o新聞使用的是立體效果的設計,time是以線條為主的設計,2者給人感受是簡潔清晰沒有多余的東西,既突出了資訊內容又不失美感,如逆云網首頁的設計。 每個門戶網站的面向受眾都不同,也會造成門戶網站的風格定位不一樣,例如面向受眾年齡層比較年輕的門戶網站,在設計風格可能會偏向多色彩多功能,而面向受眾年齡層較大的門戶網站,在設計風格上就會相反。但不管如何樣的設計風格保持清晰方便用戶掃瞄的界面是必要的。設計思路三、信息排布大型門戶網站首頁一般都會承載大量的資訊信息,密密麻麻的信息會讓用戶掃瞄網頁的時候會產生壓迫感,如何能讓用戶順暢的掃瞄成為設計中重要的一環。大伙兒能夠對比下面2張信息排布圖,信息條數差不多上相同的但第一張信息排布圖會讓人感受信息專門清晰。而第2張圖會讓用戶感受到信息排布有壓迫感,可能還沒有開始閱讀就差不多沒有耐性了(忠誠度特不高的用戶例外,但這類用戶怎么講比較少)。因此在信息排布的時候到達一定

溫馨提示

  • 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網頁內容里面會有圖紙預覽,若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間,僅對用戶上傳內容的表現方式做保護處理,對用戶上傳分享的文檔內容本身不做任何修改或編輯,并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容,請與我們聯系,我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論