現(xiàn)代智能手機(jī)和平板電腦的使用率日益普及, 桌面版網(wǎng)站瀏覽的關(guān)注度正處于下降趨勢, 但由于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)頁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í)能很快地融入到電影主題中, 這種新穎的設(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)站支撐主要通過包含元素項(xiàng)來兌現(xiàn), 主要包括Video、Canvas、Audio等元素。其中, Canvas元素?fù)碛惺种匾男в? 它好似一張畫板, 通過該元素自帶的API聯(lián)合Java Script代碼, 可以在這個(gè)畫板上繪制各種圖案圖像以及動(dòng)畫; 而“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等都支持的一種瀏覽方式。在電影《饑餓游戲》 (The Hunger Games) 的官網(wǎng)上, 點(diǎn)擊左側(cè)欄鏈接時(shí), 頁面不做跳轉(zhuǎn), 而只是站內(nèi)頁面刷新, 這樣的用戶體驗(yàn)比起整個(gè)頁面刷新來說, 視覺好上很多, 也給用戶一種未來科技的代入感。Pjax維護(hù)了web原本的構(gòu)造, 在頁面跳轉(zhuǎn)時(shí)便替換了原定的代碼, 讓頁面保持整潔, 有利于SEO (搜索引擎優(yōu)化) , Pjax成功取代了Flash和曾經(jīng)的Ajax。
大型化、低密度、長頁面及扁平化表現(xiàn)
PC網(wǎng)頁常常在有限的空間內(nèi)加入大量單一button元素的設(shè)計(jì), 但如今的潮流趨勢將UI部件推向了大型化 (Big UI) 、低密度 (Low Density) 和長頁面 (Long Page) , 加之Microsoft推出的Window10 和Apple的ios9 中倡導(dǎo)的扁平化設(shè)計(jì), 扁平化設(shè)計(jì)已經(jīng)在現(xiàn)行的APP UI中逐漸普及。《侏羅紀(jì)世界》的網(wǎng)頁上, 我們看到設(shè)計(jì)師很明顯地將上述元素運(yùn)用到位, 右側(cè)欄的button大型化, 模仿window8 和window10 中的“開始”界面欄。點(diǎn)擊網(wǎng)頁下方六邊形的button可以推出長頁面, 增加了用戶互動(dòng)元素, 整體網(wǎng)頁布局采用低密度形式, 從使用者角度更容易瀏覽、理解, 減少了網(wǎng)頁內(nèi)容的指向性錯(cuò)誤, 也讓網(wǎng)頁可以更好地利用觸摸屏幕進(jìn)行瀏覽, 使部分移動(dòng)設(shè)備得以全方位體驗(yàn)網(wǎng)頁。這些年來, 許多新型筆記本電腦上安裝了觸屏, 而觸摸屏的使用出自手指點(diǎn)擊, 時(shí)常不能進(jìn)行精準(zhǔn)操作, 因此用戶界面增大, 元素和button之間要留出充分的空間, 頁面中表現(xiàn)元素變得清晰, 方便頁面滾動(dòng)瀏覽。
作為大型化、低密度、長頁面這三大項(xiàng)要素的合適布局, 趨勢為一欄布局。一欄布局對(duì)于使用者, 不會(huì)再有不需要的雜項(xiàng)入眼, 使重要的內(nèi)容匯集在一起, 頁面上的文字更容易被閱讀, 圖片被展示得更大。在今年日本熱門電影《百元之戀》的網(wǎng)頁上, 就采用了典型的一欄設(shè)計(jì), 在banner部分貼出大幅的電影海報(bào), 信息欄則簡要地展示電影近期動(dòng)態(tài)和文字新聞, 去掉了側(cè)邊欄導(dǎo)航條, 讓網(wǎng)頁的層級(jí)得到降低, 減少了選項(xiàng)菜單, 只留下banner下方的選項(xiàng)欄。
關(guān)于扁平化設(shè)計(jì), i Phone發(fā)布ios7以來就在設(shè)計(jì)界刮起了追崇之風(fēng)。扁平化設(shè)計(jì)是不使用任何額外效果的設(shè)計(jì), 去掉3D化效果, 無多重陰影、斜角、立體浮雕等創(chuàng)建出的凸起或凹陷的效果。扁平化網(wǎng)頁元素并不是拒絕一切修飾效果。首先, 扁平化元素關(guān)注顏色, 通常使用色彩明亮鮮艷的色彩。與此同時(shí), 扁平化也注重文字, 很多扁平化處理只會(huì)涵蓋很少的文字, 為了達(dá)到讓用戶易辨識(shí)的使用感受, 設(shè)計(jì)中需要注意每一處文字的長度和字體的應(yīng)用。
SVG的使用和液態(tài)布局
SVG (可縮放矢量圖形) 格式可以算上目前最為熱捧的圖像文件格式, 與其他格式相比, SVG不會(huì)像JPEG、GIF和PNG依存于尺寸和分辨率, 無論環(huán)境變化, 無論擴(kuò)大減小, 都能夠正常輸出顯示。圖片尺寸格式相對(duì)更小, 技術(shù)上可以制作成動(dòng)畫, 設(shè)計(jì)出高分辨率的Web圖形網(wǎng)頁, 圖片格式適合在移動(dòng)端和多種設(shè)備下閱覽。當(dāng)今設(shè)備的多樣化, 畫面的分辨率出現(xiàn)了徹底的改變。以前, 寬度符合960px~980px就可以解決問題, 如今對(duì)于分辨率多用化, 最符合頁面寬度的布局當(dāng)屬液態(tài)布局。設(shè)計(jì)元素和圖片不是用像素來定義, 而是使用百分比, 就好比將液體倒入容器中, 當(dāng)容器的形態(tài)發(fā)生變化時(shí), 液態(tài)的形態(tài)也將跟著發(fā)生相應(yīng)的改變, 因此無論什么分辨率的網(wǎng)頁, 都能夠被布局成擁有一定平衡感的頁面, 這樣也解決了適應(yīng)小型或大型屏幕設(shè)備時(shí)的缺點(diǎn)了。《模仿游戲》 的圖片瀏覽頁面就很好地做到了兩者結(jié)合, 看似排列不同的矩形SVG圖片方陣, 通過跟隨瀏覽器大小的變更, 排列從全屏?xí)r的四行排列, 縮小瀏覽器視窗后變?yōu)閮尚信帕? 這樣也無需左右調(diào)節(jié)滑動(dòng)條進(jìn)行瀏覽, 而電影劇照的圖片清晰度也未發(fā)生改變, 仍然保持著很好的用戶體驗(yàn)。
本文地址：http://123beaconmarketing.com//article/5872.html
