行業動态

現代智能手機和(hé / huò)平闆電腦的(de)使用率日益普及, 桌面版網站浏覽的(de)關注度正處于(yú)下降趨勢, 但由于(yú)B2C領域的(de)發展, 桌面版網站在(zài)今後的(de)時(shí)間裏也(yě)将成爲(wéi / wèi)網絡發展的(de)重要(yào / yāo)戰略方向。在(zài)許多電影的(de)官方網站上(shàng), 由于(yú)B2C商業化模式的(de)激勵, 電影官方網站的(de)設計在(zài)内容呈現、浏覽互通的(de)方式上(shàng)下足了(le／liǎo)功夫, 促使網站設計師制作出(chū)了(le／liǎo)許多設計優秀且讓人(rén)爲(wéi / wèi)之(zhī)驚豔的(de)網頁UI設計, 起到(dào)了(le／liǎo)有效的(de)營銷推廣作用, 正是(shì)如此, 我們可以(yǐ)從電影網站的(de)設計中看出(chū)些許未來(lái)網頁UI設計的(de)風向标。

視頻運用與無縫畫面跳轉。

在(zài) 《侏羅紀世界》 和(hé / huò) 《王牌特工》 的(de)網站初始背景中, 設計者分别運用電影内片段和(hé / huò)場景景深變換, 使用戶在(zài)登入網站時(shí)能很快地(dì / de)融入到(dào)電影主題中, 這(zhè)種新穎的(de)設計方式已得到(dào)多數設計師的(de)青睐。随着Flash應用的(de)衰退, 大(dà)多數PC網站普遍不(bù)加入動态變化, 而(ér)在(zài)UI中加入視頻的(de)網站卻逐漸增多。在(zài)HTML中插入視頻, 需要(yào / yāo)插入“video”标簽, 此标簽于(yú)HTML5 中供給使用, HTML5 對多媒體網站支撐主要(yào / yāo)通過包含元素項來(lái)兌現, 主要(yào / yāo)包括Video、Canvas、Audio等元素。其中, Canvas元素擁有十分重要(yào / yāo)的(de)效用, 它好似一(yī / yì ／yí)張畫闆, 通過該元素自帶的(de)API聯合Java Script代碼, 可以(yǐ)在(zài)這(zhè)個(gè)畫闆上(shàng)繪制各種圖案圖像以(yǐ)及動畫; 而(ér)“Video”和(hé / huò)“Audio”作爲(wéi / wèi)視頻、音頻特征标記, 使視頻、音頻從此不(bù)必綁定在(zài)Object或Embed标記中, 既提高了(le／liǎo)網頁應用的(de)安全性和(hé / huò)穩定性, 也(yě)在(zài)一(yī / yì ／yí)定程度上(shàng)提高了(le／liǎo)用戶體驗, 随着近些年主流浏覽器支持HT⁃ML5, 使得利用視頻的(de)環境更加容易。

Web網站和(hé / huò)APP程序在(zài)頁面跳轉上(shàng)是(shì)否有接縫這(zhè)點上(shàng)略有不(bù)同, 随着Flash的(de)沒落, HTML的(de)網站成爲(wéi / wèi)主流, 頁面跳轉使用頁面刷新, 變得乏味陳舊。然而(ér), 通過Pjax讓web網頁實現了(le／liǎo)像APP那樣的(de)無縫跳轉, 如同插入JQuery一(yī / yì ／yí)樣, PC版網站也(yě)可以(yǐ)做到(dào)頁面間的(de)無縫畫面跳轉。Pjax的(de)使用, 大(dà)大(dà)提升了(le／liǎo)用戶體驗, 是(shì)很多主流網站, 如facebook等都支持的(de)一(yī / yì ／yí)種浏覽方式。在(zài)電影《饑餓遊戲》 (The Hunger Games) 的(de)官網上(shàng), 點擊左側欄鏈接時(shí), 頁面不(bù)做跳轉, 而(ér)隻是(shì)站内頁面刷新, 這(zhè)樣的(de)用戶體驗比起整個(gè)頁面刷新來(lái)說(shuō), 視覺好上(shàng)很多, 也(yě)給用戶一(yī / yì ／yí)種未來(lái)科技的(de)代入感。Pjax維護了(le／liǎo)web原本的(de)構造, 在(zài)頁面跳轉時(shí)便替換了(le／liǎo)原定的(de)代碼, 讓頁面保持整潔, 有利于(yú)SEO (搜索引擎優化) , Pjax成功取代了(le／liǎo)Flash和(hé / huò)曾經的(de)Ajax。

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

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

作爲(wéi / wèi)大(dà)型化、低密度、長頁面這(zhè)三大(dà)項要(yào / yāo)素的(de)合适布局, 趨勢爲(wéi / wèi)一(yī / yì ／yí)欄布局。一(yī / yì ／yí)欄布局對于(yú)使用者, 不(bù)會再有不(bù)需要(yào / yāo)的(de)雜項入眼, 使重要(yào / yāo)的(de)内容彙集在(zài)一(yī / yì ／yí)起, 頁面上(shàng)的(de)文字更容易被閱讀, 圖片被展示得更大(dà)。在(zài)今年日本熱門電影《百元之(zhī)戀》的(de)網頁上(shàng), 就(jiù)采用了(le／liǎo)典型的(de)一(yī / yì ／yí)欄設計, 在(zài)banner部分貼出(chū)大(dà)幅的(de)電影海報, 信息欄則簡要(yào / yāo)地(dì / de)展示電影近期動态和(hé / huò)文字新聞, 去掉了(le／liǎo)側邊欄導航條, 讓網頁的(de)層級得到(dào)降低, 減少了(le／liǎo)選項菜單, 隻留下banner下方的(de)選項欄。

關于(yú)扁平化設計, i Phone發布ios7以(yǐ)來(lái)就(jiù)在(zài)設計界刮起了(le／liǎo)追崇之(zhī)風。扁平化設計是(shì)不(bù)使用任何額外效果的(de)設計, 去掉3D化效果, 無多重陰影、斜角、立體浮雕等創建出(chū)的(de)凸起或凹陷的(de)效果。扁平化網頁元素并不(bù)是(shì)拒絕一(yī / yì ／yí)切修飾效果。首先, 扁平化元素關注顔色, 通常使用色彩明亮鮮豔的(de)色彩。與此同時(shí), 扁平化也(yě)注重文字, 很多扁平化處理隻會涵蓋很少的(de)文字, 爲(wéi / wèi)了(le／liǎo)達到(dào)讓用戶易辨識的(de)使用感受, 設計中需要(yào / yāo)注意每一(yī / yì ／yí)處文字的(de)長度和(hé / huò)字體的(de)應用。

SVG的(de)使用和(hé / huò)液态布局

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