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