2014年的網頁設計領域有什麼新的發展呢?是延續經典還是推陳出新?通過大師的預測,我們發現了一些蛛絲馬跡,那麼今天我們就來給大家分享一下這些寶貴的信息!如果你有什麼想法記得在下方的評論里告訴我們呦~
1. 大背景圖片
大背景圖片(Large hero areas),是從印刷設計中借來的專業術語,指包含少量文字內容、位於網站頂部的圖片。在很多網站上,你可以發現現 在 web 設計師們放棄曾經喜歡滑塊輪播設計風格,轉向了大背景圖片設計風格,以大標題為中心,並配以簡單模糊的圖片為背景,有的則是精心設計的插圖,可以前往 Lateral inc 和 Focus Lab 查看漂亮的典型示例。
從滑塊輪播到大背景圖片的轉換最大的原因就是大背景圖片更能抓住用戶的注意力,吸引他們繼續探索網站的其他頁面。這個趨勢越來越流行,並且沒有絲毫停頓的節奏,這必將是 2014 年 web 設計的潮流與大趨勢!
2. 更多視頻內容
越來越多的網頁使用視頻替代文字去詮釋新技術新概念,隨著 YouTube 和 Kickstarter 越來越流行,網際網路用戶也更傾向於觀看視頻而不是閱覽文字。有更好的方式為什麼不去使用?視頻提供獨特的文字和圖片組合,能在短時間內更好的傳達新的想 法。很重要的一點,視頻也能幫助提升在搜尋引擎的排名,例如 Google。
有人會說,視頻會消耗很多內存空間和流量,但是當今科技發展迅速,帶寬限制在不斷提高,允許快速的下載和提供大量的流量。所以就目前而言,視頻絕對是 2014 年持續增長的趨勢。同時,另外一個有趣的地方是,很多網站已經趨向於自己保管,管理和控制視頻,而不再是依賴於 youtube 上面的視頻了。
3. 扁平化 UI 設計
她的大名就是搖晃,這麼說當然有充分的理由。扁平化 UI 設計拿到了 skeuomorphic design 的寶座,這是一個新數字世界的入門指引。現在我們理解了龐大的網際網路世界是怎麼工作的,我們就需要拋開廢棄的東西——現在是時候拋開一切外物來單純的討論根源了。
扁平化 UI 也許是跳過 skeuomorphic 時期的開發者第一次接觸的 web 設計風格。大多數是通過 iPad 或者是電子閱讀器來接觸扁平化 UI 設計的,也可能是當他們拿到他們的第一部智慧型手機的時候,就如同 UX 和 UI 設計者知道也確信新用戶可以在應用商店接觸到扁平化的設計。
2014年,曾預測Apple將會動搖其擬真設計(Skeuomorphism)。iOS7的發布帶來了所謂的「扁平化設計」,該設計丟棄了陰影及漸變效果,使 某些元素獲得了視覺上的升級。 長期以來,Apple一直引領著設計的時代潮流,它所做的任何事情,都會引來世界的追隨。iOS7發布不久,每天都會有很多具有「扁平化設計」風格的網站 上線。早期的扁平化 UI 設計開始時有很多創新的空間,所以在 2014 年,我們預測 web 設計風格將會更直觀,簡單,界面平面化!
4. 更簡單的導航和空白使用
扁平化 UI 設計的引入給網站創建了空白的區域,沒錯,就是空白。空白空間提供了清晰簡潔的風格,使網頁更容易保留,而且提高可讀性。這裡是一些很受歡迎的空白使用示例: Exposure, Hello Monday 和 FoundryCo.
創建這些空白空間的時候,我們也注意到了頁面導航和側邊欄。頁面導航會變得更簡單,側邊欄可能會在某些時候被放棄。設想一下:你正在閱讀一篇整齊、悅目, 沒有任何其他干擾信息的文章。設計師通過去除那些分散用戶注意力及擴展性的內容,努力打造更愉悅的閱讀體驗。這種是一種極受歡迎的改變,一種用戶期望繼續 保持的趨勢。在 2014 年,我們預測更多的網頁將會變得更簡潔並且會更好的使用空白區域。
5. 樸素的視差效果
web 視差效果設計創建了一種 3D 的錯覺,比如使用不同的速度或者布局的移動等等,這些通常是用戶滾動網頁內容觸發的。視差效果如果使用的好,那麼會讓人印象深刻,吸引用戶的注意力。這引發了一大群的跟隨者,大家可以看看這些視差效果的忠實跟隨者:Discover Shadow, Zensorium Tinke 和 Lost World’s Fairs。
視差效果,令人印象深刻,又很有趣,也可能會造成煩躁和引起噴射性的嘔吐... ... 在 2014 年,我們預測視差效果將會被更多的使用,並且會變得比較簡單樸素,得到更好的控制,我們現在就可以拋開嘔吐的袋子啦!
6. 響應式設計會成為工業標準
即使現在這已經成為 web 設計的主流,響應式網頁設計對未來的網頁發展起著非常重要的作用。有很多的響應式框架提供給設計者和開發者,幫助他們實現這個過渡。
在 2014 年,不斷增長的用戶會使用不同的智能設備來瀏覽 web 頁面,比如智能手錶,眼鏡,電視機,甚至是冰箱 !響應式 web 設計可以在這些設備中應用,包括以後的各種各樣的設備,讓我們拭目以待吧!
移動端和觸摸頁面第二次大改革即將到來啦,在 2014 年,我們預測響應式設計將會成為工業化標準,而且我們會提供兩個對大家很有幫助的表格來開啟響應式網頁設計的旅程:
What widths should I design for?
What screen densities should I design for?
7. 智能轉換
即使一些網頁已經實現了智能轉換,我們也確實可以看到設計者開始使用更多的動畫調整轉換來加強用戶的方向和提供網頁的體驗。以往很少有動畫效果能在桌面環 境和移動端轉換,並且有一致的體驗,現在越來越多的硬體已經支持在移動端顯示瀏覽器的動畫效果了,這也就免除了對智能轉換的擔心。
當然,不可否認這會造成這種類型的設計過度的使用,每個人都蒙頭跳進了這個潮流,導致網際網路用戶對某些網頁的體驗比較混亂和迷茫。但是,我們也看到這種趨勢的積極影響,只要堅定正確的方向,這是個很好的設計趨勢。希望不好的會慢慢被遺忘,好的繼續發揚光大。
你可以在 Smashing Magazine 中找到一篇很好的講解智能轉換過渡的文章。
8. 探索非矩形形狀的探索
2014 年,使用與眾不同的形狀來顯示內容越來越受到 web 開發者的追捧,這是廣大開發者用來區別自己與他人設計風格的一種方式。大多數的網頁現在已經摒棄了矩形形狀,改用特別的非矩形形狀風格,從這裡可以知道 web 設計又開啟了另一種開發方向。
通過形狀,我們所指的不是矩形形狀,目前已經是大多數網頁框架設計的主流。我們希望在 2014 年能看到更多的網頁設計使用三角形,六邊形和非平行的角度來劃分頁面的布局,創造新維度的潮流。有很大的可能性,這些設計將會成為 2014 設計的主流。
9. 各種各樣的字體類型
自從Google 網頁字體全面啟動,我們就看到更多多樣性的字體在網頁中使用。在新的一年這種趨勢越來越受歡迎,很多 web 開發者開始不斷嘗試各種各樣的字體。
這將啟發更有趣的和更有影響力的設計思想,隨著越來越多的網頁設計師開始實驗與排版和像圖像一樣使用文本去吸引網際網路用戶和取得他們的關注。特別的一點是,我們認為手寫和平面設計字體將在 2014 年成為 web 開發者的共識。
10. 圖標和自定義藝術插圖
藝術插畫已經以很多種形式存在於 web ,圖標,SVG,動畫和火爆的大背景區域中,我們希望在很少的帶寬限制中看到更多這種類型的設計。
藝術插畫已經充分證明了他的古怪,漂亮,迷人或者是豐富的教育意義,我們希望在 2014 年這種自定義插畫能越來越多,而那些不適合的庫存照片越來越少。
想知道怎麼讓你的插畫得到更多用戶的響應?在設計響應式網頁和高視覺要求設備時,你也許會喜歡閱讀這篇文章: what image sizes/resolutions you will need to consider。