網(wǎng)頁(yè)UI與用戶體驗(yàn)設(shè)計(jì)要素:感官體驗(yàn)

1 評(píng)論 13260 瀏覽 65 收藏 27 分鐘

關(guān)于網(wǎng)頁(yè)UI與用戶體驗(yàn)設(shè)計(jì)中的感官體驗(yàn),一起來(lái)了解一下。

感官體驗(yàn):是指產(chǎn)品呈現(xiàn)給用戶視覺和聽覺的體驗(yàn)。感官體驗(yàn)最重要的是帶給用戶舒適感,以促使用戶繼續(xù)瀏覽頁(yè)面。

影響感官體驗(yàn)要素:設(shè)計(jì)風(fēng)格、logo設(shè)計(jì)、頁(yè)面瀏覽速度、合理布局頁(yè)面、頁(yè)面色彩搭配、動(dòng)畫效果、頁(yè)面導(dǎo)航、正確的頁(yè)面尺寸、圖片展覽、選擇合適的圖標(biāo)、廣告位和背景音樂等元素。

一、設(shè)計(jì)風(fēng)格

一個(gè)人擁有自己獨(dú)特的風(fēng)格、是一般人所沒有的,就會(huì)讓人注意到那個(gè)人的特別,若那個(gè)人的風(fēng)格是正面的,就會(huì)引起別人的羨慕與注意,或是贊賞。就如同一個(gè)網(wǎng)站,擁有別的網(wǎng)站所沒有的風(fēng)格,就會(huì)讓瀏覽者愿意多停留些時(shí)間,細(xì)細(xì)品嘗該站的內(nèi)容,甚至?xí)玫蕉嗳藢?duì)的鼓勵(lì)與注目。

網(wǎng)站的設(shè)計(jì)風(fēng)格必須要符合目標(biāo)客戶的審美習(xí)慣,并有一定的引導(dǎo)性。設(shè)計(jì)師需要注意的是,在對(duì)網(wǎng)站進(jìn)行設(shè)計(jì)之前,必須明確該網(wǎng)站所針對(duì)的目標(biāo)客戶群體,并針對(duì)目標(biāo)客戶群體的審美喜好進(jìn)行分析,從而確定網(wǎng)站的總體設(shè)計(jì)風(fēng)格。

網(wǎng)站常見設(shè)計(jì)風(fēng)格

1)超清晰

在該設(shè)計(jì)公司的網(wǎng)站頁(yè)面設(shè)計(jì)中運(yùn)用了超清晰的設(shè)計(jì)風(fēng),頁(yè)面中運(yùn)用通欄的宣傳圖像來(lái)分割頁(yè)面中不同部分的內(nèi)容,再加上有條理跳躍亮黃色點(diǎn)綴,使得頁(yè)面內(nèi)容表現(xiàn)得非常清晰、整齊。頁(yè)面中清晰的視覺指引和整齊有序的外觀都能夠給人良好的用戶體驗(yàn)。

在該產(chǎn)品介紹的專題頁(yè)面設(shè)計(jì)中拋棄了以往的傳統(tǒng)表現(xiàn)風(fēng)格,而是運(yùn)用了超清晰的設(shè)計(jì)風(fēng)格。使用不同色系不同明度的藍(lán)色調(diào)將整個(gè)頁(yè)面劃分為多個(gè)不同的內(nèi)容區(qū)域,在每部分的內(nèi)容區(qū)域中,又綜合運(yùn)用運(yùn)用圖文結(jié)合和色彩對(duì)比的手法,使得頁(yè)面結(jié)構(gòu)層次非常清晰。

2)極簡(jiǎn)

該網(wǎng)站頁(yè)面運(yùn)用了極簡(jiǎn)的設(shè)計(jì)風(fēng)格,不僅設(shè)計(jì)簡(jiǎn)潔,并且通過文字的排版方式以及局部背景圖像的運(yùn)用,體現(xiàn)出現(xiàn)代傳統(tǒng)文化特色,非常直觀、大方。

極簡(jiǎn)設(shè)計(jì)在移動(dòng)端頁(yè)面設(shè)計(jì)中非常常見,并且能夠給人很好的視覺效果。在該移動(dòng)端家具產(chǎn)品頁(yè)面中,僅僅使用簡(jiǎn)潔的家具產(chǎn)品圖與文字介紹相結(jié)合,通過背景顏色的烘托而沒有使用其他任何裝飾性元素,給人一種精致、典雅的感受,并且能有效突出產(chǎn)品的表現(xiàn)。

3)照片

在該科技類品牌網(wǎng)站頁(yè)面中使用滿屏的大幅度產(chǎn)品照片作為頁(yè)面的整體背景,科技感撲面而來(lái),在頁(yè)面局部排列少量的簡(jiǎn)潔菜單文字,使背景圖像完全占據(jù)主導(dǎo)地位,網(wǎng)站信息被最小化了但同時(shí)制作精美。

在該時(shí)尚運(yùn)動(dòng)服飾介紹頁(yè)面中同樣使用了產(chǎn)品照片作為滿屏背景,使瀏覽著仿佛身臨其境。需要注意的是,因?yàn)轫?yè)面中又較多的介紹內(nèi)容,為了使信息內(nèi)容清晰易讀,背景的風(fēng)景照片使用了左屏的部分,從而不影響頁(yè)面內(nèi)容的表現(xiàn)。

使用照片設(shè)計(jì)風(fēng)格時(shí),還有一個(gè)重要事項(xiàng)需要注意,如果背景圖片很復(fù)雜,那么前景就需要設(shè)計(jì)得樸素一些,這樣是為了避免頁(yè)面過于凌亂,當(dāng)然這樣也能夠更好地使頁(yè)面信息凸顯出來(lái)。

4)插畫

該少女服飾品牌頁(yè)面運(yùn)用了插畫的設(shè)計(jì)風(fēng)格,將時(shí)尚的少女人物與卡通手繪插畫結(jié)合,人物與插畫背景設(shè)計(jì)渾然天成,且運(yùn)用恰到好處。

該網(wǎng)頁(yè)設(shè)計(jì)也運(yùn)用了插畫設(shè)計(jì)風(fēng)格,將產(chǎn)品圖片巧妙地融入到插畫當(dāng)中,不但體現(xiàn)出年輕和可愛,并且每個(gè)頁(yè)面中安排的文字內(nèi)容較少,使瀏覽者仿佛在一起看一幅幅連環(huán)畫,能給瀏覽者留下深刻而美好的印象。

5)三維

該游戲界面采用了典型的三維設(shè)計(jì)風(fēng)格,在我們心目中,人物肯定是要占據(jù)空間的,因此網(wǎng)頁(yè)的背景就自然而然地被拉遠(yuǎn)了。在該頁(yè)面中同時(shí)采用s型的美感構(gòu)成,內(nèi)容與背景形成空間對(duì)比,給人一種很強(qiáng)的視覺沖擊力。

該頁(yè)面設(shè)計(jì),通過與頁(yè)面背景顏色相對(duì)比的色塊來(lái)突出重點(diǎn)信息和圖片,在頁(yè)面中為多個(gè)重要的元素都運(yùn)用了強(qiáng)烈的陰影效果,頁(yè)面中的大字號(hào)主題文字、色塊以及圖片,有效地表現(xiàn)出頁(yè)面的空間感,仿佛內(nèi)容躍然于背景之上。

6)以字體為主

在該頁(yè)面設(shè)計(jì)中以字體作為主要的設(shè)計(jì)元素,通過隨性的手寫字體加上巧妙的布局,使頁(yè)面給人一種隨意而個(gè)性十足的感覺。

該頁(yè)面的設(shè)計(jì)風(fēng)格也可以稱為插畫風(fēng)格,通過插畫來(lái)體現(xiàn)字體設(shè)計(jì),內(nèi)容形式很具創(chuàng)意感,給人一種情感化的傳達(dá),大膽創(chuàng)新,個(gè)性鮮明的感覺。

7)純色

該網(wǎng)頁(yè)的整體設(shè)計(jì)采用的就是純色風(fēng)格,運(yùn)用色塊對(duì)頁(yè)面進(jìn)行傾斜風(fēng)割,不但清晰地劃分了頁(yè)面中不同的內(nèi)容,而且能夠產(chǎn)生對(duì)比的效果,這種設(shè)計(jì)使網(wǎng)站看上去更加明快、整潔。

該網(wǎng)頁(yè)設(shè)計(jì)同樣采用了純色的設(shè)計(jì)風(fēng)格,運(yùn)用鮮艷的純色劃分頁(yè)面中不同功能和內(nèi)容的區(qū)域,使得頁(yè)面內(nèi)容的劃分非常清晰。

*使用純色風(fēng)格設(shè)計(jì)的網(wǎng)頁(yè)實(shí)現(xiàn)起來(lái)比較容易,并且使用這種設(shè)計(jì)風(fēng)格的網(wǎng)站加載速度也會(huì)比較快,這種風(fēng)格非常適合電子商務(wù)類的綜合網(wǎng)站以及移動(dòng)端的網(wǎng)站使用。

8)扁平化

該網(wǎng)頁(yè)采用了典型的扁平化設(shè)計(jì)風(fēng)格,頁(yè)面中各部分內(nèi)容都采用了大面積的純色塊進(jìn)行分割,使得頁(yè)面中各部分內(nèi)容的劃分非常清晰、直觀,沒有過多的修飾,表現(xiàn)內(nèi)容的方式更加直接。

受到移動(dòng)設(shè)備屏幕尺寸和操作方式的限制,移動(dòng)端的頁(yè)面需要給瀏覽者提供更加直觀的信息和便捷的操作,所以在移動(dòng)端的頁(yè)面設(shè)計(jì)中扁平化的設(shè)計(jì)風(fēng)格非常普遍。

*網(wǎng)站頁(yè)面設(shè)計(jì)風(fēng)格可以又很多,無(wú)論用戶采用何種風(fēng)格進(jìn)行設(shè)計(jì),都要于網(wǎng)站本身內(nèi)容相符,這樣才能將想要傳達(dá)的內(nèi)容快速傳達(dá)給瀏覽者。否則一味地追求花哨的頁(yè)面效果,將使網(wǎng)站本身的核心內(nèi)容被忽略掉。

設(shè)計(jì)風(fēng)格在設(shè)計(jì)領(lǐng)域中變得越來(lái)越重要。設(shè)計(jì)風(fēng)格通常不會(huì)有特定的相關(guān)元素,卻又因?yàn)樗鼈儾煌耐庥^而為人所認(rèn)識(shí)。以上這些都是設(shè)計(jì)方法中的總體理論。舉一個(gè)例子,極簡(jiǎn)主義設(shè)計(jì)風(fēng)格可以禪釋特定設(shè)計(jì)是如何影響設(shè)計(jì)師的作品的,該風(fēng)格定下了網(wǎng)站外觀和氣質(zhì)的基調(diào),但不會(huì)強(qiáng)制指定特定的圖像。而其他的風(fēng)格,如照片風(fēng)格、三維風(fēng)格、扁平化風(fēng)格等就更為具體化,會(huì)有一些明顯的模式以及明顯的外觀形式。確定網(wǎng)站的設(shè)計(jì)風(fēng)格不是一件隨心所欲的事情,網(wǎng)站所表現(xiàn)出來(lái)的風(fēng)格是很重要的,設(shè)計(jì)師應(yīng)該認(rèn)真考量,從而使網(wǎng)站風(fēng)格起到展示網(wǎng)站品牌和傳達(dá)網(wǎng)站信息的作用。

二、尺寸

網(wǎng)頁(yè)設(shè)計(jì)的難點(diǎn)在于每個(gè)瀏覽者的使用環(huán)境不盡相同,網(wǎng)頁(yè)存在太多的變數(shù),一般的設(shè)計(jì)并不能勝任,因此,能否有效地處理這種情況,直接影響到該頁(yè)面的用戶體驗(yàn)。

對(duì)網(wǎng)頁(yè)尺寸產(chǎn)生重要影響的因素主要有3個(gè),分別是:操作系統(tǒng)、瀏覽器和系統(tǒng)分辨率。

關(guān)于尺寸對(duì)網(wǎng)頁(yè)感官的用戶體驗(yàn),經(jīng)通過以下兩個(gè)方面分別進(jìn)行講解。

  1. 影響網(wǎng)頁(yè)尺寸的主要因素
  2. 安全的網(wǎng)頁(yè)寬度與首屏高度

影響網(wǎng)頁(yè)尺寸的主要因素

1)操作系統(tǒng)

在操作系統(tǒng)的底部都會(huì)顯示系統(tǒng)任務(wù)欄,該部分會(huì)占據(jù)一定的屏幕空間,windows xp系統(tǒng)中默認(rèn)的任務(wù)欄高度為30px,windows7、windows8與windows10操作系統(tǒng)中默認(rèn)的任務(wù)欄高度均為40px。

2)瀏覽器

不同的瀏覽者可能會(huì)使用不同的瀏覽器,在瀏覽器窗口中默認(rèn)都會(huì)顯示狀態(tài)欄、菜單欄和滾動(dòng)條,這些都會(huì)占據(jù)網(wǎng)頁(yè)在瀏覽窗口中的顯示區(qū)域,這些因素也是設(shè)計(jì)師在設(shè)計(jì)網(wǎng)頁(yè)前需要考慮的。主流瀏覽器的界面參數(shù)如下-所示。

主流瀏覽器的界面參數(shù)

3)系統(tǒng)分辨率

不同的顯示器有著不同的分辨率設(shè)置,這就導(dǎo)致在瀏覽網(wǎng)頁(yè)時(shí)不同系統(tǒng)分辨率中的可視面積是不同的。根據(jù)調(diào)查機(jī)構(gòu)對(duì)30萬(wàn)以上的客戶端進(jìn)行測(cè)試,得到如下的測(cè)試數(shù)據(jù)。

通過以上的系統(tǒng)分辨率調(diào)查數(shù)據(jù)結(jié)果可以得出適合大多數(shù)用戶進(jìn)行瀏覽的安全分辨率為1336*768,可以建議大分辨率為1280*800。

安全大網(wǎng)頁(yè)寬度與首屏高度

根據(jù)以上對(duì)操作系統(tǒng)、瀏覽器和系統(tǒng)分辨率的分析,可以得出設(shè)計(jì)網(wǎng)頁(yè)的安全寬度為1002px,可建議的較大寬度為1258px。

在windows xp常見分辨率1024*768下,去除系統(tǒng)任務(wù)欄、瀏覽器窗口的菜單欄和狀態(tài)欄后得到的網(wǎng)頁(yè)首屏可視高度平均值為584px。

在windows7常見分辨率1440*900下,去除系統(tǒng)任務(wù)欄、瀏覽器窗口的菜單欄何狀態(tài)欄后得到的網(wǎng)頁(yè)首屏可視高度平均值為716px。

三、關(guān)于LOGO

作為具有傳媒特性的網(wǎng)站logo,為了在最有效的空間內(nèi)實(shí)現(xiàn)所有的視覺識(shí)別功能,一般是通過特定圖案及特定文字的組合,達(dá)到對(duì)被標(biāo)識(shí)體的出示、說明、溝通和交流,從而激發(fā)瀏覽者的興趣,達(dá)到增強(qiáng)美譽(yù)、記憶等目的。

常見logo表現(xiàn)形式

網(wǎng)站logo形式一般可以分為特定圖案、特定文字和合成字體。

1)特定圖案

兩個(gè)網(wǎng)站logo的設(shè)計(jì)均使用了特定行業(yè)的圖案。通過使用具有行業(yè)代表性的圖像作為logo圖形的設(shè)計(jì),使用戶看到就知道該網(wǎng)站與什么行業(yè)有關(guān),搭配簡(jiǎn)潔的文字,表現(xiàn)效果一目了然。

2)特定文字

上面兩個(gè)logo均使用了對(duì)特定文字進(jìn)行藝術(shù)處理的方式來(lái)表現(xiàn)logo。使用文字來(lái)表現(xiàn)logo是一種做直觀的表現(xiàn)方式,通過對(duì)主體文字或字母進(jìn)行變形處理,使其具有很強(qiáng)的藝術(shù)表現(xiàn)效果。

所以特定文字一般作為特定圖案補(bǔ)充,選擇的字體應(yīng)與整體風(fēng)格一致,應(yīng)該盡可能做全新的區(qū)別性創(chuàng)作。完整的logo設(shè)計(jì),一般都應(yīng)考慮至少又中英及單獨(dú)的圖案、中文、英文的組合形式。

這兩個(gè)網(wǎng)站logo的表現(xiàn)效果更加豐富,將logo文字進(jìn)行藝術(shù)化的變形處理并且與具有代表性的logo圖形相結(jié)合,使得logo的整體表現(xiàn)效果更加直觀與具有藝術(shù)感,能夠給人留下深刻的印象。

3)合成文字

將文字進(jìn)行變形處理與圖形相結(jié)合表現(xiàn)出意象的效果,同時(shí)具有文字的可識(shí)別性也兼具圖形的表現(xiàn)力,非常適合表現(xiàn)logo,能夠高人留下深刻的印象。

*網(wǎng)站logo是網(wǎng)站特色與內(nèi)涵的集中體現(xiàn),它用于傳遞網(wǎng)站的定位和經(jīng)營(yíng)理念,同時(shí)便于人們識(shí)別。在網(wǎng)頁(yè)中應(yīng)用logo是需要注意確保logo的保護(hù)空間,確保品牌的清晰展示,但頁(yè)不能過多地占據(jù)網(wǎng)頁(yè)空間。

設(shè)計(jì)網(wǎng)站logo的一般流程

第一步:明確需求-我們的網(wǎng)站需要一個(gè)什么樣的logo?

在開始設(shè)計(jì)logo前,要對(duì)該網(wǎng)站的相關(guān)資料進(jìn)行充分了解。如網(wǎng)站的性質(zhì)、網(wǎng)站的叢屬行業(yè)、網(wǎng)站的針對(duì)用戶、網(wǎng)站的競(jìng)爭(zhēng)對(duì)手等。還要與網(wǎng)站ui設(shè)計(jì)人員溝通,保證與網(wǎng)站整體設(shè)計(jì)風(fēng)格保持一致。例如,我們需啊喲設(shè)計(jì)的是一家互聯(lián)網(wǎng)的網(wǎng)站logo,作為一個(gè)互聯(lián)網(wǎng)公司,我們一定要緊跟互聯(lián)網(wǎng)潮流,同時(shí)希望能夠給用戶一種親切的感覺,并且要一眼能被人記住。經(jīng)過詳細(xì)調(diào)研后,可以初步定義logo的表現(xiàn)形式、表現(xiàn)風(fēng)格等。

第二步:思維導(dǎo)讀

使用鉛筆在白紙上繪制logo的思維導(dǎo)圖。思維導(dǎo)圖可以很好地幫助我們發(fā)散思維。除了使用紙、筆外,也可以使用一些專業(yè)的思維導(dǎo)圖軟件。

用戶可以從一個(gè)關(guān)鍵詞開始,逐步構(gòu)建整個(gè)思維導(dǎo)圖。不要局限自己的思維,盡量發(fā)散,以獲的更多的可能性。

通過思維導(dǎo)圖,可以獲得幾個(gè)重要的關(guān)鍵詞。利用這些關(guān)鍵詞尋找設(shè)計(jì)靈感,把想法圖形化。接下來(lái)就開始繪制logo的草圖。

第三步:繪制草圖

我們不可能憑空去想象所有的東西,特別是當(dāng)我們的思維被局限在某一點(diǎn)時(shí),

可以在一些專業(yè)的設(shè)計(jì)網(wǎng)站中找到很多優(yōu)秀的logo設(shè)計(jì)??磮D借鑒并不代表“抄襲”,在設(shè)計(jì)的時(shí)候不要去抵觸各種優(yōu)秀的作品,重要的是從中獲得靈感和啟發(fā),而不是一味的生搬硬套。

第四步:在軟件中精細(xì)繪制logo圖形

第五步:設(shè)計(jì)logo文字,來(lái)個(gè)完美組合

*現(xiàn)代人對(duì)簡(jiǎn)潔、明快、流暢、瞬間印象的訴求使得logo的設(shè)計(jì)越來(lái)越追求一種獨(dú)特的、高度的洗練。一些已在用戶群中產(chǎn)生了一定印象的公司為了強(qiáng)化受眾的區(qū)別性記憶及持續(xù)的品牌忠誠(chéng)度,通過設(shè)計(jì)更獨(dú)特、更易理解的圖案來(lái)強(qiáng)化對(duì)既有理念的認(rèn)同。

四、網(wǎng)站打開速度

許多研究表明,用戶最滿意的網(wǎng)頁(yè)打開時(shí)間是在2秒以下。用戶能夠忍受的最長(zhǎng)等待時(shí)間的中位數(shù)在6至8秒之間。也就是說,8秒是一個(gè)臨界值,如果網(wǎng)站打開的速度在8秒以上,那么大部份瀏覽者最終都會(huì)離去。

提高網(wǎng)站頁(yè)面打開速度,改善用戶體驗(yàn)

1)優(yōu)化圖片

圖片是網(wǎng)頁(yè)中最基本的元素之一,圖文結(jié)合能夠簡(jiǎn)明扼要地闡述主題,提高用戶閱讀興趣。對(duì)于圖片的處理及優(yōu)化,可以將圖片進(jìn)行自定義大小,能夠有效幫助減少頁(yè)面大小,設(shè)置圖片的質(zhì)量,適當(dāng)控制其容量大小,提高網(wǎng)頁(yè)圖片的加載速度。

2)選擇合適的圖片格式

正確的圖片格式可以讓圖片容量縮小數(shù)倍,如果保存為最佳格式,可以節(jié)省大量帶寬,減少處理時(shí)間,大大加快頁(yè)面加載速度。JPG格式常用于照片或真彩圖片,GIF格式用于平面色彩的圖片,一般用于按鈕或logo圖片,PNG格式和GIF非常相似,不過就是多支持一些色彩。

3)圖片寬度和高度設(shè)置問題

4)合并優(yōu)化

5)延遲顯示可見區(qū)域外的內(nèi)容

6)精簡(jiǎn)代碼

7)延遲加載和執(zhí)行非必要腳本

8)減少網(wǎng)頁(yè)的響應(yīng)次數(shù)

五、合理布局

網(wǎng)頁(yè)布局最重要的基礎(chǔ)原則是重點(diǎn)突出、主次分明、圖文并茂。網(wǎng)頁(yè)的布局必須與企業(yè)的營(yíng)銷目標(biāo)相結(jié)合,將目標(biāo)客戶最感興趣的,最具有銷售力的信息放置在最重要的位置。

關(guān)于網(wǎng)站頁(yè)面合理布局的用戶體驗(yàn):

  1. 符合用戶的瀏覽習(xí)慣
  2. 網(wǎng)頁(yè)布局的操作流程
  3. 常見的網(wǎng)頁(yè)布局形式
  4. 網(wǎng)頁(yè)布局的原則

常見的網(wǎng)頁(yè)布局形式

一欄式布局

兩欄式布局??1)左窄右寬2)左寬右窄

3)左右均等

三欄式布局

網(wǎng)頁(yè)布局的原則:協(xié)調(diào)、一致、流動(dòng)、均衡、強(qiáng)調(diào)等,

另外,在進(jìn)行網(wǎng)頁(yè)布局設(shè)計(jì)時(shí),需要考慮導(dǎo)網(wǎng)站頁(yè)面的醒目性、創(chuàng)造性、造型性、可讀性和明快性等因素。

六、色彩

色彩常識(shí)

  1. 色相
  2. 明度
  3. 純度

網(wǎng)頁(yè)等基本配色方法

單色

類似色

補(bǔ)色

鄰近補(bǔ)色

無(wú)彩色

*在網(wǎng)頁(yè)進(jìn)行配色時(shí),使用的顏色最好不要超過4種,使用過多的顏色會(huì)造成頁(yè)面繁雜,讓人覺得沒有側(cè)重點(diǎn)。一個(gè)網(wǎng)頁(yè)必須確定一種或兩種主題色,在對(duì)其他輔助色彩進(jìn)行選擇時(shí),需要考慮其他配色與主題色的關(guān)系,這樣才能使網(wǎng)頁(yè)的色彩搭配更加和諧、美觀。

七、動(dòng)畫

網(wǎng)頁(yè)動(dòng)畫的應(yīng)用類型

  1. 頁(yè)面加載動(dòng)畫
  2. 元素交互動(dòng)畫
  3. 故事型頁(yè)面動(dòng)畫
  4. 裝飾性動(dòng)畫
  5. 廣告動(dòng)畫

網(wǎng)頁(yè)動(dòng)畫的用戶體驗(yàn)原則

  1. 打開速度快,運(yùn)動(dòng)流暢
  2. 動(dòng)畫節(jié)奏適中
  3. 從頁(yè)面中的細(xì)節(jié)元素著手
  4. 不能干擾主畫面內(nèi)容

八、導(dǎo)航

導(dǎo)航在網(wǎng)頁(yè)中的布局形式

  1. 布局在網(wǎng)頁(yè)頂部
  2. 布局在網(wǎng)頁(yè)底部
  3. 布局在網(wǎng)頁(yè)左側(cè)
  4. 布局在網(wǎng)頁(yè)右側(cè)
  5. 布局在網(wǎng)頁(yè)中心
  6. 響應(yīng)式導(dǎo)航

九、圖片展示

圖片展示形式

  1. 傳統(tǒng)的矩陣展示
  2. 大小不一的矩陣展示
  3. 瀑布流展示
  4. 下一張圖片預(yù)覽

圖片展示技巧

  1. 圖片與頁(yè)面整體協(xié)調(diào)
  2. 使用高質(zhì)量的清晰圖片
  3. 圖片與網(wǎng)站內(nèi)容的關(guān)聯(lián)性
  4. 大圖很受歡迎
  5. 攥取注意力

十、圖標(biāo)

圖標(biāo)的設(shè)計(jì)原則

  1. 易識(shí)別
  2. 風(fēng)格統(tǒng)一
  3. 與網(wǎng)頁(yè)協(xié)調(diào)
  4. 富有創(chuàng)意

十一、廣告位

網(wǎng)站常見廣告形式

  1. 文字廣告
  2. Banner廣告
  3. 對(duì)聯(lián)式浮動(dòng)廣告
  4. 網(wǎng)頁(yè)漂浮廣告
  5. 彈出廣告

十二、聲音與視頻

與傳統(tǒng)媒體不同,網(wǎng)頁(yè)界面中除了文字和圖像以外,還包含動(dòng)畫、聲音和視頻等新興多媒體元素,更有由代碼語(yǔ)言編程實(shí)現(xiàn)等各種交互式效果,這極大地增加了網(wǎng)頁(yè)界面的生動(dòng)性和復(fù)雜性。

在網(wǎng)站頁(yè)面中合理地應(yīng)用與網(wǎng)站主題風(fēng)格相統(tǒng)一的聲音或視頻元素,可以極大地豐富網(wǎng)站頁(yè)面的視聽效果,但還是要為用戶提供控制聲音或視頻的開關(guān),將選擇權(quán)交給用戶,避免對(duì)用戶造成困擾。

 

本文由 @乘良-Leon 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來(lái)自PEXELS,基于CC0協(xié)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒評(píng)論,等你發(fā)揮!