本站小編為你精心準(zhǔn)備了電影網(wǎng)站設(shè)計(jì)對(duì)網(wǎng)頁(yè)UI設(shè)計(jì)的影響參考范文，愿這些范文能點(diǎn)燃您思維的火花，激發(fā)您的寫(xiě)作靈感。歡迎深入閱讀并收藏。

【摘要】

現(xiàn)代智能手機(jī)和平板電腦的使用率日益普及，桌面版網(wǎng)站瀏覽的關(guān)注度正處于下降趨勢(shì)，但由于B2C領(lǐng)域的發(fā)展，桌面版網(wǎng)站在今后的時(shí)間里也將成為網(wǎng)絡(luò)發(fā)展的重要戰(zhàn)略方向。在許多電影的官方網(wǎng)站上，由于B2C商業(yè)化模式的激勵(lì)，電影官方網(wǎng)站的設(shè)計(jì)在內(nèi)容呈現(xiàn)、瀏覽互通的方式上下足了功夫，促使網(wǎng)站設(shè)計(jì)師制作出了許多設(shè)計(jì)優(yōu)秀且讓人為之驚艷的網(wǎng)頁(yè)ui設(shè)計(jì)，起到了有效的營(yíng)銷(xiāo)推廣作用，正是如此，我們可以從電影網(wǎng)站的設(shè)計(jì)中看出些許未來(lái)網(wǎng)頁(yè)UI設(shè)計(jì)的風(fēng)向標(biāo)。本文將從電影網(wǎng)站的設(shè)計(jì)中淺析未來(lái)網(wǎng)頁(yè)UI設(shè)計(jì)的部分趨勢(shì)及改變。

【關(guān)鍵詞】

網(wǎng)頁(yè)UI；設(shè)計(jì)趨勢(shì)；電影網(wǎng)站

一、視頻運(yùn)用與無(wú)縫畫(huà)面跳轉(zhuǎn)

在《侏羅紀(jì)世界》和《王牌特工》的網(wǎng)站初始背景中，設(shè)計(jì)者分別運(yùn)用電影內(nèi)片段和場(chǎng)景景深變換，使用戶(hù)在登入網(wǎng)站時(shí)能很快地融入到電影主題中，這種新穎的設(shè)計(jì)方式已得到多數(shù)設(shè)計(jì)師的青睞。隨著Flash應(yīng)用的衰退，大多數(shù)PC網(wǎng)站普遍不加入動(dòng)態(tài)變化，而在UI中加入視頻的網(wǎng)站卻逐漸增多。在HTML中插入視頻，需要插入“video”標(biāo)簽，此標(biāo)簽于HTML5中供給使用，HTML5對(duì)多媒體網(wǎng)站支撐主要通過(guò)包含元素項(xiàng)來(lái)兌現(xiàn)，主要包括Video、Canvas、Audio等元素。其中，Canvas元素?fù)碛惺种匾男в茫盟埔粡埉?huà)板，通過(guò)該元素自帶的API聯(lián)合JavaScript代碼，可以在這個(gè)畫(huà)板上繪制各種圖案圖像以及動(dòng)畫(huà)；而“Video”和“Audio”作為視頻、音頻特征標(biāo)記，使視頻、音頻從此不必綁定在Object或Embed標(biāo)記中,既提高了網(wǎng)頁(yè)應(yīng)用的安全性和穩(wěn)定性，也在一定程度上提高了用戶(hù)體驗(yàn)，隨著近些年主流瀏覽器支持HTML5，使得利用視頻的環(huán)境更加容易。Web網(wǎng)站和APP程序在頁(yè)面跳轉(zhuǎn)上是否有接縫這點(diǎn)上略有不同，隨著Flash的沒(méi)落，HTML的網(wǎng)站成為主流，頁(yè)面跳轉(zhuǎn)使用頁(yè)面刷新，變得乏味陳舊。然而，通過(guò)Pjax讓web網(wǎng)頁(yè)實(shí)現(xiàn)了像APP那樣的無(wú)縫跳轉(zhuǎn)，如同插入JQuery一樣，PC版網(wǎng)站也可以做到頁(yè)面間的無(wú)縫畫(huà)面跳轉(zhuǎn)。Pjax的使用，大大提升了用戶(hù)體驗(yàn)，是很多主流網(wǎng)站，如facebook等都支持的一種瀏覽方式。在電影《饑餓游戲》（TheHungerGames）的官網(wǎng)上，點(diǎn)擊左側(cè)欄鏈接時(shí)，頁(yè)面不做跳轉(zhuǎn)，而只是站內(nèi)頁(yè)面刷新，這樣的用戶(hù)體驗(yàn)比起整個(gè)頁(yè)面刷新來(lái)說(shuō)，視覺(jué)好上很多，也給用戶(hù)一種未來(lái)科技的代入感。Pjax維護(hù)了web原本的構(gòu)造，在頁(yè)面跳轉(zhuǎn)時(shí)便替換了原定的代碼，讓頁(yè)面保持整潔，有利于SEO（搜索引擎優(yōu)化），Pjax成功取代了Flash和曾經(jīng)的Ajax。

二、大型化、低密度、長(zhǎng)頁(yè)面及扁平化表現(xiàn)

PC網(wǎng)頁(yè)常常在有限的空間內(nèi)加入大量單一button元素的設(shè)計(jì)，但如今的潮流趨勢(shì)將UI部件推向了大型化（BigUI）、低密度（LowDensity）和長(zhǎng)頁(yè)面（LongPage），加之Microsoft推出的Window10和Apple的ios9中倡導(dǎo)的扁平化設(shè)計(jì)，扁平化設(shè)計(jì)已經(jīng)在現(xiàn)行的APPUI中逐漸普及?！顿_紀(jì)世界》的網(wǎng)頁(yè)上，我們看到設(shè)計(jì)師很明顯地將上述元素運(yùn)用到位，右側(cè)欄的button大型化，模仿window8和window10中的“開(kāi)始”界面欄。點(diǎn)擊網(wǎng)頁(yè)下方六邊形的button可以推出長(zhǎng)頁(yè)面，增加了用戶(hù)互動(dòng)元素，整體網(wǎng)頁(yè)布局采用低密度形式，從使用者角度更容易瀏覽、理解，減少了網(wǎng)頁(yè)內(nèi)容的指向性錯(cuò)誤，也讓網(wǎng)頁(yè)可以更好地利用觸摸屏幕進(jìn)行瀏覽，使部分移動(dòng)設(shè)備得以全方位體驗(yàn)網(wǎng)頁(yè)。這些年來(lái)，許多新型筆記本電腦上安裝了觸屏,而觸摸屏的使用出自手指點(diǎn)擊，時(shí)常不能進(jìn)行精準(zhǔn)操作，因此用戶(hù)界面增大，元素和button之間要留出充分的空間，頁(yè)面中表現(xiàn)元素變得清晰，方便頁(yè)面滾動(dòng)瀏覽。作為大型化、低密度、長(zhǎng)頁(yè)面這三大項(xiàng)要素的合適布局，趨勢(shì)為一欄布局。一欄布局對(duì)于使用者，不會(huì)再有不需要的雜項(xiàng)入眼，使重要的內(nèi)容匯集在一起，頁(yè)面上的文字更容易被閱讀，圖片被展示得更大。在今年日本熱門(mén)電影《百元之戀》的網(wǎng)頁(yè)上，就采用了典型的一欄設(shè)計(jì)，在banner部分貼出大幅的電影海報(bào)，信息欄則簡(jiǎn)要地展示電影近期動(dòng)態(tài)和文字新聞，去掉了側(cè)邊欄導(dǎo)航條，讓網(wǎng)頁(yè)的層級(jí)得到降低，減少了選項(xiàng)菜單，只留下banner下方的選項(xiàng)欄。關(guān)于扁平化設(shè)計(jì)，iPhoneios7以來(lái)就在設(shè)計(jì)界刮起了追崇之風(fēng)。扁平化設(shè)計(jì)是不使用任何額外效果的設(shè)計(jì)，去掉3D化效果，無(wú)多重陰影、斜角、立體浮雕等創(chuàng)建出的凸起或凹陷的效果。扁平化網(wǎng)頁(yè)元素并不是拒絕一切修飾效果。首先，扁平化元素關(guān)注顏色，通常使用色彩明亮鮮艷的色彩。與此同時(shí)，扁平化也注重文字，很多扁平化處理只會(huì)涵蓋很少的文字，為了達(dá)到讓用戶(hù)易辨識(shí)的使用感受，設(shè)計(jì)中需要注意每一處文字的長(zhǎng)度和字體的應(yīng)用。

三、SVG的使用和液態(tài)布局

SVG(可縮放矢量圖形)格式可以算上目前最為熱捧的圖像文件格式，與其他格式相比，SVG不會(huì)像JPEG、GIF和PNG依存于尺寸和分辨率，無(wú)論環(huán)境變化，無(wú)論擴(kuò)大減小，都能夠正常輸出顯示。圖片尺寸格式相對(duì)更小，技術(shù)上可以制作成動(dòng)畫(huà)，設(shè)計(jì)出高分辨率的Web圖形網(wǎng)頁(yè)，圖片格式適合在移動(dòng)端和多種設(shè)備下閱覽。當(dāng)今設(shè)備的多樣化，畫(huà)面的分辨率出現(xiàn)了徹底的改變。以前，寬度符合960px~980px就可以解決問(wèn)題，如今對(duì)于分辨率多用化，最符合頁(yè)面寬度的布局當(dāng)屬液態(tài)布局。設(shè)計(jì)元素和圖片不是用像素來(lái)定義，而是使用百分比，就好比將液體倒入容器中，當(dāng)容器的形態(tài)發(fā)生變化時(shí)，液態(tài)的形態(tài)也將跟著發(fā)生相應(yīng)的改變，因此無(wú)論什么分辨率的網(wǎng)頁(yè)，都能夠被布局成擁有一定平衡感的頁(yè)面，這樣也解決了適應(yīng)小型或大型屏幕設(shè)備時(shí)的缺點(diǎn)了?！赌７掠螒颉返膱D片瀏覽頁(yè)面就很好地做到了兩者結(jié)合，看似排列不同的矩形SVG圖片方陣，通過(guò)跟隨瀏覽器大小的變更，排列從全屏?xí)r的四行排列，縮小瀏覽器視窗后變?yōu)閮尚信帕校@樣也無(wú)需左右調(diào)節(jié)滑動(dòng)條進(jìn)行瀏覽，而電影劇照的圖片清晰度也未發(fā)生改變，仍然保持著很好的用戶(hù)體驗(yàn)。

四、結(jié)語(yǔ)

綜上所述，本文通過(guò)國(guó)外電影網(wǎng)站洞悉了一些網(wǎng)頁(yè)UI設(shè)計(jì)趨勢(shì)。值得一提的是，趨勢(shì)這樣簡(jiǎn)單的概括難以在設(shè)計(jì)領(lǐng)域長(zhǎng)青，前端設(shè)計(jì)往往要做的就是打破設(shè)計(jì)的框架，讓使用者眼前一亮卻恰到好處。了解趨勢(shì)是重要的，把握這個(gè)背景的網(wǎng)頁(yè)用戶(hù)的動(dòng)向也不容忽視，在沒(méi)有了解用戶(hù)需求本質(zhì)的情況下，如果只是為了追求網(wǎng)站的設(shè)計(jì)，效果未必能夠達(dá)到預(yù)期。優(yōu)秀的電影網(wǎng)站設(shè)計(jì)，在大商業(yè)環(huán)境下不斷涌現(xiàn)，跟隨這樣的設(shè)計(jì)趨勢(shì)，不是普通網(wǎng)頁(yè)UI設(shè)計(jì)師的必選項(xiàng)，但可以說(shuō)是一個(gè)非常不錯(cuò)的選擇。

參考文獻(xiàn)：

[1]徐鎮(zhèn)輝.基于HTML5的視頻網(wǎng)站設(shè)計(jì)與Web前端EPG系統(tǒng)實(shí)現(xiàn)[J].漳州職業(yè)技術(shù)學(xué)院學(xué)報(bào),2013（2）.

[2]Sogilogwebsite.“PCサイトのUIデザインにおける12のトレンド”[EB/OL].[2015-02-17]baigie.me/sogitani/2015/02/pc-site-trend-2015/

[3]趙大羽.品味移動(dòng)設(shè)計(jì)：iOS、Android、WindowsPhone用戶(hù)體驗(yàn)設(shè)計(jì)最佳實(shí)踐[J].中國(guó)科技信息，2014（1）：195-196.[

作者：李智 單位：上海理工大學(xué)公共實(shí)驗(yàn)中心