2016年網頁設計趨勢之高清設計

來源:互聯網
上載者:User

   網頁設計中最熱門的技巧之一,就是高清背景圖,這得益於高清顯示屏的普及。但面對複雜的商標時,就不好處理了。

  本文中,我們來展望一下網頁設計的未來。高清網頁設計是否能主導網路,這已經不是問題了,關鍵是高解析度顯示屏何時能夠普及,這是提升視覺設計的必備條件。

  下面開始,我們將要探索如何運用圖片、視頻、或是動畫來建立高清背景,並且把所有內容有層次地組合。

  圖片

  超大圖、焦點圖、全屏圖。

  以上幾個詞,最適合用來描述現代網頁設計的背景圖片。設計師們對高清設計 不僅停留在思考層面,他們將其發揮到極致,用背景圖佔據了整個畫面。

  Macquarie-park

  這種設計技巧很有效,因為使用者天生就是視覺動物。畢竟我們理解周圍世界時,視覺在主導潛意識。而且,令人愉悅的圖片在一定程度上能創造更好的使用者體驗,因為我們理所當然認為有吸引力的東西更好。這看似極其膚淺,但在設計中,感知就是真相。

  Junctionmoama

  高螢幕解析度創造了絕佳的機遇,讓使用者能看到從前無法察覺的細節。圖片中的小細節——例如Junction Moama所用的Macquarie公園的多色調紋理(上圖的兩種)——提升了介面的精細程度,對至關重要的第一印象大有協助。

  Wearedandy

  使用高清圖片 的5條建議:

  使主畫面成為視覺焦點——雖然圖片是作為背景,不代表它就能佔據舞台中央。優秀的照片能與使用者建立情感串連,學習圖片的精妙之處,看它如何 影響設計的視覺層次 。

  考慮使用多圖——使用我們在 網頁UI模式 中提到的投影片或卡片風格的結構,來應對內容豐富或相片集類型的設計。

  在圖片上添加效果——模糊或色彩疊加,能夠增加或是改變一張圖片的調性(例如全用紅色調會更加積極)。這在高清圖片 上很管用,因為下層的圖片畫質夠高,細節仍清晰可辨。

  考慮圖片在不同螢幕尺寸下的效果——安排各種尺寸下的背景圖,使之能適應任何斷點,不會露出純色塊(那其實是真正的背景)。

  打破局限——照片背景不一定要遵循標準的1:1.5相機比例,也可以使用從各自背景中裁剪出來的圖片。

  背景照片能創造簡單的視覺吸引。選用優秀的照片強化品牌、產品或資訊時,效果最佳。記住,有時會用多張背景照片,要確保這種設計結構和周遭元素能與每張圖搭配良好。

  視頻

  高清視頻背景可能是今年最盛行的技巧之一——尤其是有著瘋狂感的大量快鏡頭動作。從AirBnB這樣的巨人,到幾乎所有類型的小網站,視頻迅速成為了網頁設計中重要的一道風景線。

  Life of pi Movie

  最初一批運用背景視頻的網站,正是電影網站。例如《少年派的奇幻漂流》官網,用了一段電影預告作為背景(而且還是可下載的格式)。

  Rileyscycles

  視頻作為一種設計技巧的出現,與它本身的新奇性毫無關係。在HTML5(還有能播放高清視頻的智能手機)推出以前,許多瀏覽器與網路連接環境根本無法處理全屏視頻背景。

  任何關於高清視頻的討論,都應當圍繞最終成品。無論是像Dunckelfeld’s 這樣的超現實主義黑白手法,還是像AirBnB 這種更加現實的蒙太奇短片,你都需要來回調整它的飽和度和畫面播放速率,讓視頻更吸引人,而不會使人分心。

  光有一段視頻可不夠。所有拍攝優秀電影的技巧——取景、變焦、平移——在網頁視頻中同樣重要,即便是用作背景。

  Brindisatapaskitchens

  Brindisa Tapas Kitchens做得非常棒,它剪輯了大量短片來展現它的食物與環境。視頻從多個角度拍攝,有些片段用了縮時攝影的風格加速,另一些則刻意調慢來營造合適的氛圍。

  同樣,在設計中運用高清視頻也有5條建議:

  注意視頻長度——背景視頻應當在幾秒鐘內呈現一段視覺故事,讓使用者感受到氛圍。最佳迴圈間隔是10到30秒。

  關閉聲音——對於多數使用者而言,聲音仍是一種很極端的自動播放元素。如果想要使用聲音,也要預設設成靜音。

  關注載入時間——雖然高清視頻很有意思,但不能因此拖慢網站載入速度。如果使用者在載入過程中就退出了,視頻再精彩都沒有用。

  考慮備選方案——有些裝置無法渲染高清視頻。在Goolge統計中查看訪客最常用的裝置,根據情況進行設計。通常,你會選取一張靜態圖片作為備選方案。

  堅持高品質的視頻——不論是否自己拍攝,為了清晰出眾的畫質,最好僱人來做這個事情,或者使用著作權視頻。不僅僅因為它要用在高清的環境中,也因為需要相當好的畫質。就像照片一樣,如果超過原片解析度使用,視頻就毀了。

  網頁設計,尤其是使用背景視頻的網頁,都在營造一種電影般的體驗。網站中的高清視頻,創造了一種完整的多媒體體驗,在運動的背景之上層層傳遞資訊。

  動畫

  高清背景動畫存在於固定圖片的設計中,因為這些動畫往往同時包含固定與運動元素。

  它與載入動畫同樣盛行,數十年來設計原則幾乎沒有改變。唯一改變的是高清顯示屏能呈現的畫質水平。

  Made by fieldwork

  成功的高清動畫,關鍵在於時間控制。動畫應當有著流暢無痕的效果。所有的迴圈動畫都要首尾相接。

  Acnplwgl

  《2015與2016的網頁設計趨勢》 中描述過,我們建議牢記以下5條原則:

  堅持簡單的動畫——太複雜的故事與動作可能會加重認知負擔,如果能實現完美的基本動畫,就不要製作複雜的效果。

  使用亮色調來關聯介面——例如,可以從簡單的滑鼠移至上方效果入手,改變連結顏色。考慮選用配色中最亮的顏色作為滑鼠移至上方色,讓人注意到這個動畫效果。懸停時放大文字也是一種視覺線索,能夠起到額外的強調作用。這些簡單的手段有助於突顯特定的使用者操作。

  利用高清螢幕的特性——為了最佳的視覺效果,使用可縮放的圖片格式,例如向量圖。

  用視頻的方法製作動畫——同樣的精妙之處也適用於動畫。應當避免不和諧的運動和物體,例如聲音,那會令使用者感到厭煩。

  為合適的觀眾製作動畫——雖然許多設計師常把動畫和插畫合為一體,但這未必適用於每個網站。

  同樣,要注意細節。根據網站與使用者的不同,動畫可以是卡通式、視頻風格,或者僅僅是插畫環境中的一系列運動感。動畫可以通過使用者操作觸發——點按、滾動或是滑鼠點擊——或者就簡單地自動播放。

  層層構築:融合所有內容

  高清背景只有作為某一層資訊時才有效果。精彩的圖片、視頻或動畫獨木難支——你得考慮它與螢幕上其他內容的關係。

  以下是3個簡單的案例研究,這幾個網站都將它們融合得非常好。

  Adidas設計工作室

  Adidas設計工作室用了各種技巧處理鮮明的大尺寸圖片,號召人們加入。

  全屏背景實際上連結到一段視頻,滾動操作還有視覺差效果,引導使用者瀏覽整個產品線和相關資訊。清晰的圖片搭配同樣清晰的文字。通過一種溫和的方式,用顏色構建了視覺的層次。

  Flipboard

  Flipboard熟練運用固定背景圖的技藝,這高度依賴傳統的攝影藝術。

  高清圖片 包含許多細節,卻不會咄咄逼人。圖片還延伸到了螢幕之外,讓人想象餐桌還會向各個方向延伸,在不同的螢幕解析度下也確實如此。整個色調將這張圖片塑造成背景元素,使注意力保持在其上更明亮的行動號召資訊上。

  5 Eme Gauche

  5 Eme Gauche的特色是具有多層元素的大背景圖,包含底部導航、社交媒體表徵圖,還有螢幕中央的品牌logo和首頁連結。

  每層內容都與背景有互動,並且有所區分,讓你一眼就能看出螢幕上的分層關係。這個網站的內部層級很清晰,因為所有頁面都採用同樣的分層格式和滾動動畫。

  結論

  儘管高清背景近年來正逐漸盛行,但不能僅把它當作一種潮流。它們的產生,是可用性終於跟上科技發展的結果。

  這意味著人們不會有一天厭倦高清設計 ,轉而尋找下一股潮流。作為日漸成長的視覺行業,這種創作技巧絕對值得一學。

相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。