電影網站設計對網頁UI設計的影響范文

本站小編為你精心準備了電影網站設計對網頁UI設計的影響參考范文，愿這些范文能點燃您思維的火花，激發您的寫作靈感。歡迎深入閱讀并收藏。

【摘要】

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

【關鍵詞】

網頁UI；設計趨勢；電影網站

一、視頻運用與無縫畫面跳轉

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

二、大型化、低密度、長頁面及扁平化表現

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

三、SVG的使用和液態布局

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

四、結語

綜上所述，本文通過國外電影網站洞悉了一些網頁UI設計趨勢。值得一提的是，趨勢這樣簡單的概括難以在設計領域長青，前端設計往往要做的就是打破設計的框架，讓使用者眼前一亮卻恰到好處。了解趨勢是重要的，把握這個背景的網頁用戶的動向也不容忽視，在沒有了解用戶需求本質的情況下，如果只是為了追求網站的設計，效果未必能夠達到預期。優秀的電影網站設計，在大商業環境下不斷涌現，跟隨這樣的設計趨勢，不是普通網頁UI設計師的必選項，但可以說是一個非常不錯的選擇。

參考文獻：

[1]徐鎮輝.基于HTML5的視頻網站設計與Web前端EPG系統實現[J].漳州職業技術學院學報,2013（2）.

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

[3]趙大羽.品味移動設計：iOS、Android、WindowsPhone用戶體驗設計最佳實踐[J].中國科技信息，2014（1）：195-196.[

作者：李智 單位：上海理工大學公共實驗中心