行業(yè)動態(tài)從電影網(wǎng)站設(shè)計(jì)淺析網(wǎng)頁UI設(shè)計(jì)趨勢

發(fā)布：2019-03-12 21:12:53 瀏覽：5778

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

視頻運(yùn)用與無縫畫面跳轉(zhuǎn)。

在《侏羅紀(jì)世界》和《王牌特工》的網(wǎng)站初始背景中,設(shè)計(jì)者分別運(yùn)用電影內(nèi)片段和場景景深變換,使用戶在登入網(wǎng)站時能很快地融入到電影主題中,這種新穎的設(shè)計(jì)方式已得到多數(shù)設(shè)計(jì)師的青睞。隨著Flash應(yīng)用的衰退,大多數(shù)PC網(wǎng)站普遍不加入動態(tài)變化,而在UI中加入視頻的網(wǎng)站卻逐漸增多。在HTML中插入視頻,需要插入“video”標(biāo)簽,此標(biāo)簽于HTML5中供給使用,HTML5對多媒體網(wǎng)站支撐主要通過包含元素項(xiàng)來兌現(xiàn),主要包括Video、Canvas、Audio等元素。其中,Canvas元素?fù)碛惺种匾男в?它好似一張畫板,通過該元素自帶的API聯(lián)合JavaScript代碼,可以在這個畫板上繪制各種圖案圖像以及動畫;而“Video”和“Audio”作為視頻、音頻特征標(biāo)記,使視頻、音頻從此不必綁定在Object或Embed標(biāo)記中,既提高了網(wǎng)頁應(yīng)用的安全性和穩(wěn)定性,也在一定程度上提高了用戶體驗(yàn),隨著近些年主流瀏覽器支持HT?ML5,使得利用視頻的環(huán)境更加容易。

Web網(wǎng)站和APP程序在頁面跳轉(zhuǎn)上是否有接縫這點(diǎn)上略有不同,隨著Flash的沒落,HTML的網(wǎng)站成為主流,頁面跳轉(zhuǎn)使用頁面刷新,變得乏味陳舊。然而,通過Pjax讓web網(wǎng)頁實(shí)現(xiàn)了像APP那樣的無縫跳轉(zhuǎn),如同插入JQuery一樣,PC版網(wǎng)站也可以做到頁面間的無縫畫面跳轉(zhuǎn)。Pjax的使用,大大提升了用戶體驗(yàn),是很多主流網(wǎng)站,如facebook等都支持的一種瀏覽方式。在電影《饑餓游戲》(TheHungerGames)的官網(wǎng)上,點(diǎn)擊左側(cè)欄鏈接時,頁面不做跳轉(zhuǎn),而只是站內(nèi)頁面刷新,這樣的用戶體驗(yàn)比起整個頁面刷新來說,視覺好上很多,也給用戶一種未來科技的代入感。Pjax維護(hù)了web原本的構(gòu)造,在頁面跳轉(zhuǎn)時便替換了原定的代碼,讓頁面保持整潔,有利于SEO(搜索引擎優(yōu)化),Pjax成功取代了Flash和曾經(jīng)的Ajax。

大型化、低密度、長頁面及扁平化表現(xiàn)

PC網(wǎng)頁常常在有限的空間內(nèi)加入大量單一button元素的設(shè)計(jì),但如今的潮流趨勢將UI部件推向了大型化(BigUI)、低密度(LowDensity)和長頁面(LongPage),加之Microsoft推出的Window10和Apple的ios9中倡導(dǎo)的扁平化設(shè)計(jì),扁平化設(shè)計(jì)已經(jīng)在現(xiàn)行的APPUI中逐漸普及。《侏羅紀(jì)世界》的網(wǎng)頁上,我們看到設(shè)計(jì)師很明顯地將上述元素運(yùn)用到位,右側(cè)欄的button大型化,模仿window8和window10中的“開始”界面欄。點(diǎn)擊網(wǎng)頁下方六邊形的button可以推出長頁面,增加了用戶互動元素,整體網(wǎng)頁布局采用低密度形式,從使用者角度更容易瀏覽、理解,減少了網(wǎng)頁內(nèi)容的指向性錯誤,也讓網(wǎng)頁可以更好地利用觸摸屏幕進(jìn)行瀏覽,使部分移動設(shè)備得以全方位體驗(yàn)網(wǎng)頁。這些年來,許多新型筆記本電腦上安裝了觸屏,而觸摸屏的使用出自手指點(diǎn)擊,時常不能進(jìn)行精準(zhǔn)操作,因此用戶界面增大,元素和button之間要留出充分的空間,頁面中表現(xiàn)元素變得清晰,方便頁面滾動瀏覽。

作為大型化、低密度、長頁面這三大項(xiàng)要素的合適布局,趨勢為一欄布局。一欄布局對于使用者,不會再有不需要的雜項(xiàng)入眼,使重要的內(nèi)容匯集在一起,頁面上的文字更容易被閱讀,圖片被展示得更大。在今年日本熱門電影《百元之戀》的網(wǎng)頁上,就采用了典型的一欄設(shè)計(jì),在banner部分貼出大幅的電影海報(bào),信息欄則簡要地展示電影近期動態(tài)和文字新聞,去掉了側(cè)邊欄導(dǎo)航條,讓網(wǎng)頁的層級得到降低,減少了選項(xiàng)菜單,只留下banner下方的選項(xiàng)欄。

關(guān)于扁平化設(shè)計(jì),iPhone發(fā)布ios7以來就在設(shè)計(jì)界刮起了追崇之風(fēng)。扁平化設(shè)計(jì)是不使用任何額外效果的設(shè)計(jì),去掉3D化效果,無多重陰影、斜角、立體浮雕等創(chuàng)建出的凸起或凹陷的效果。扁平化網(wǎng)頁元素并不是拒絕一切修飾效果。首先,扁平化元素關(guān)注顏色,通常使用色彩明亮鮮艷的色彩。與此同時,扁平化也注重文字,很多扁平化處理只會涵蓋很少的文字,為了達(dá)到讓用戶易辨識的使用感受,設(shè)計(jì)中需要注意每一處文字的長度和字體的應(yīng)用。

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

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