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

現(xiàn)代智能手機和平板電腦的使用率日益普及, 桌面版網站瀏覽的關注度正處于下降趨勢, 但由于B2C領域的發(fā)展, 桌面版網站在今后的時間里也將成為網絡發(fā)展的重要戰(zhàn)略方向。在許多電影的官方網站上, 由于B2C商業(yè)化模式的激勵, 電影官方網站的設計在內容呈現(xiàn)、瀏覽互通的方式上下足了功夫, 促使網站設計師制作出了許多設計優(yōu)秀且讓人為之驚艷的網頁UI設計, 起到了有效的營銷推廣作用, 正是如此, 我們可以從電影網站的設計中看出些許未來網頁UI設計的風向標。
視頻運用與無縫畫面跳轉。
在 《侏羅紀世界》 和 《王牌特工》 的網站初始背景中, 設計者分別運用電影內片段和場景景深變換, 使用戶在登入網站時能很快地融入到電影主題中, 這種新穎的設計方式已得到多數(shù)設計師的青睞。隨著Flash應用的衰退, 大多數(shù)PC網站普遍不加入動態(tài)變化, 而在UI中加入視頻的網站卻逐漸增多。在HTML中插入視頻, 需要插入“video”標簽, 此標簽于HTML5 中供給使用, HTML5 對多媒體網站支撐主要通過包含元素項來兌現(xiàn), 主要包括Video、Canvas、Audio等元素。其中, Canvas元素擁有十分重要的效用, 它好似一張畫板, 通過該元素自帶的API聯(lián)合Java Script代碼, 可以在這個畫板上繪制各種圖案圖像以及動畫; 而“Video”和“Audio”作為視頻、音頻特征標記, 使視頻、音頻從此不必綁定在Object或Embed標記中, 既提高了網頁應用的安全性和穩(wěn)定性, 也在一定程度上提高了用戶體驗, 隨著近些年主流瀏覽器支持HT?ML5, 使得利用視頻的環(huán)境更加容易。
Web網站和APP程序在頁面跳轉上是否有接縫這點上略有不同, 隨著Flash的沒落, HTML的網站成為主流, 頁面跳轉使用頁面刷新, 變得乏味陳舊。然而, 通過Pjax讓web網頁實現(xiàn)了像APP那樣的無縫跳轉, 如同插入JQuery一樣, PC版網站也可以做到頁面間的無縫畫面跳轉。Pjax的使用, 大大提升了用戶體驗, 是很多主流網站, 如facebook等都支持的一種瀏覽方式。在電影《饑餓游戲》 (The Hunger Games) 的官網上, 點擊左側欄鏈接時, 頁面不做跳轉, 而只是站內頁面刷新, 這樣的用戶體驗比起整個頁面刷新來說, 視覺好上很多, 也給用戶一種未來科技的代入感。Pjax維護了web原本的構造, 在頁面跳轉時便替換了原定的代碼, 讓頁面保持整潔, 有利于SEO (搜索引擎優(yōu)化) , Pjax成功取代了Flash和曾經的Ajax。
大型化、低密度、長頁面及扁平化表現(xiàn)
PC網頁常常在有限的空間內加入大量單一button元素的設計, 但如今的潮流趨勢將UI部件推向了大型化 (Big UI) 、低密度 (Low Density) 和長頁面 (Long Page) , 加之Microsoft推出的Window10 和Apple的ios9 中倡導的扁平化設計, 扁平化設計已經在現(xiàn)行的APP UI中逐漸普及?！顿_紀世界》的網頁上, 我們看到設計師很明顯地將上述元素運用到位, 右側欄的button大型化, 模仿window8 和window10 中的“開始”界面欄。點擊網頁下方六邊形的button可以推出長頁面, 增加了用戶互動元素, 整體網頁布局采用低密度形式, 從使用者角度更容易瀏覽、理解, 減少了網頁內容的指向性錯誤, 也讓網頁可以更好地利用觸摸屏幕進行瀏覽, 使部分移動設備得以全方位體驗網頁。這些年來, 許多新型筆記本電腦上安裝了觸屏, 而觸摸屏的使用出自手指點擊, 時常不能進行精準操作, 因此用戶界面增大, 元素和button之間要留出充分的空間, 頁面中表現(xiàn)元素變得清晰, 方便頁面滾動瀏覽。
作為大型化、低密度、長頁面這三大項要素的合適布局, 趨勢為一欄布局。一欄布局對于使用者, 不會再有不需要的雜項入眼, 使重要的內容匯集在一起, 頁面上的文字更容易被閱讀, 圖片被展示得更大。在今年日本熱門電影《百元之戀》的網頁上, 就采用了典型的一欄設計, 在banner部分貼出大幅的電影海報, 信息欄則簡要地展示電影近期動態(tài)和文字新聞, 去掉了側邊欄導航條, 讓網頁的層級得到降低, 減少了選項菜單, 只留下banner下方的選項欄。
關于扁平化設計, i Phone發(fā)布ios7以來就在設計界刮起了追崇之風。扁平化設計是不使用任何額外效果的設計, 去掉3D化效果, 無多重陰影、斜角、立體浮雕等創(chuàng)建出的凸起或凹陷的效果。扁平化網頁元素并不是拒絕一切修飾效果。首先, 扁平化元素關注顏色, 通常使用色彩明亮鮮艷的色彩。與此同時, 扁平化也注重文字, 很多扁平化處理只會涵蓋很少的文字, 為了達到讓用戶易辨識的使用感受, 設計中需要注意每一處文字的長度和字體的應用。
SVG的使用和液態(tài)布局
SVG (可縮放矢量圖形) 格式可以算上目前最為熱捧的圖像文件格式, 與其他格式相比, SVG不會像JPEG、GIF和PNG依存于尺寸和分辨率, 無論環(huán)境變化, 無論擴大減小, 都能夠正常輸出顯示。圖片尺寸格式相對更小, 技術上可以制作成動畫, 設計出高分辨率的Web圖形網頁, 圖片格式適合在移動端和多種設備下閱覽。當今設備的多樣化, 畫面的分辨率出現(xiàn)了徹底的改變。以前, 寬度符合960px~980px就可以解決問題, 如今對于分辨率多用化, 最符合頁面寬度的布局當屬液態(tài)布局。設計元素和圖片不是用像素來定義, 而是使用百分比, 就好比將液體倒入容器中, 當容器的形態(tài)發(fā)生變化時, 液態(tài)的形態(tài)也將跟著發(fā)生相應的改變, 因此無論什么分辨率的網頁, 都能夠被布局成擁有一定平衡感的頁面, 這樣也解決了適應小型或大型屏幕設備時的缺點了。《模仿游戲》 的圖片瀏覽頁面就很好地做到了兩者結合, 看似排列不同的矩形SVG圖片方陣, 通過跟隨瀏覽器大小的變更, 排列從全屏時的四行排列, 縮小瀏覽器視窗后變?yōu)閮尚信帕? 這樣也無需左右調節(jié)滑動條進行瀏覽, 而電影劇照的圖片清晰度也未發(fā)生改變, 仍然保持著很好的用戶體驗。

文章名稱：行業(yè)動態(tài)從電影網站設計淺析網頁UI設計趨勢
當前地址：http://www.bm7419.com/news23/149873.html

網站建設、網絡推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網站制作，網絡營銷seo公司；服務項目有網站設計等

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)