Zi 字媒體

原文：作者： Loredana Papp-Dinea, Mihai Baldean翻譯者：騰訊視頻Tencent Video Design Team | Ning本文已獲得作者對「騰訊視頻TVDesign」譯文的正式授權每年我們在設計上都會學到新東西，2016年也不例外。我們在去年發布的關於設計趨勢的文章非常成功，所以決定再預測一波2017年的設計趨勢，馬上開始！設計趨勢會受到媒體、技術、時尚的潮流以及可用性的影響。設計趨勢是緩慢、逐漸的滲透到所有設計的分支中的，消失亦然。 一個設計趨勢或潮流的生命周期大多不會超過1-2年。2017年的設計趨勢會繼續16年的材質化（materialized）傾向的同時，增加一些新的改變，這些改變可能已被大家所熟知，甚至在過去幾年你也已經見過。其中影響著趨勢的，最主要還是Google的Material Design和它經歷的一些變化。01. 半扁平的設計在過去幾年，扁平化幾乎統治了網頁設計，但因為Material Design的影響，設計走向更加多維度，往空間上發展。這個轉變從增加輕投影開始，走向「半扁平」的設計。扁平化是因為需要更符合開發技術，減少設計樣式而進化出來的，扁平仍然流行，只是不斷在改進。柔和平滑的漸變投影既為扁平化設計增加了深度和豐富性，又不會破壞扁平設計的感覺。這是扁平趨勢的一個新做法，並且在2017年會繼續進化。案例項目: Resourсe | UI/UX Tool for Web Services作者: Ruslan Latypov; LS Graphics; Anton Mishin; Valery GurkovProject: Listener's PlaylistAuthor: Anzi .02. 動態攝影（Cinemagraphs）動態照片不是指我們在web上常見的gif圖。他是指只有少數元素移動的靜態圖片。這個技術使得一個簡單的圖片更加生動。03. 更多3D效果3D絕對在帶領著潮流，我們很快就會看到它對所有設計領域的影響。隨著VR/AR迅速在整個行業進行的革命，這一領域會發展得像飛鏢那麼快。案例項目: LUV.IT作者: AARON MARTINEZ案例項目: Open Annual Awards作者: TAVO案例項目: Air Max '17作者: Berd -; Lukas Vojir; mark haley; Oliver Harris; Jeff Thomson項目案例: NIKE F.C. | 3D Golden balls in the real world作者: TAVO項目案例: Better You Brand作者: Craig Minchington; Satellite Office; Brand Nu04. 動畫動畫越來越多的運用在web設計上，它可能是gif、svg、WebGL CSS 或視頻格式。動畫絕對是web設計界去年最大的流行趨勢，所以抉擇是否要用動畫的時候不用猶豫。項目案例: Nickelodeon Kids Pick The President作者: JeanPierre Le Roux項目案例: AR Virtual Fitness Coach App | AR 虛擬健身教練作者: 曲 植Daz_Qu---------項目案例: UI Collection in Motion作者: Minh Pham---------項目案例: ZH OURO- Rio 2016作者: Leo Natsume; Guilherme Maron05. 登錄頁面2017年，由於市場營銷和更好的針對目標的遊客用戶，我們會看到更多關於登錄頁面的出色設計。06. 幾何形狀、圖案、線條和圓圈圈這個潮流從2016年開始，絕對會延續到2017年。你可以通過簡單增加一些富現代感的形狀、平面圖形或一個柔和的投影來做好一個網站。項目案例: Pfizer - Active and 50+ for The New York Times作者: justyna stasik; Vladimir Marchukov---------項目案例: DRAP.agency BrandingMireldy Design; Filip Gjurin07. 大膽的色彩使用大膽的顏色來表達自己的觀點。Material design和扁平化設計和大膽的色彩真是超級搭。使用Google提供的色板或自己搭配使用都可以的。---------Project: Edris - Logo Designed by MiLo---------項目案例: Rendered — Responsive Demo Website for AdobeSerge Vasil項目案例: b2mach作者s: Natalia Żerko; Kuba Enzowski; Kommunikat Studio08. 有創意的滾動和視差在任何網頁通過這個視覺創意增加獨特的元素效果都會很棒。無論是多層的視差或是視頻的視差，都有可能。介紹下D.ex Multilayer Parallax這個產品。它是在 Loredana Papp和Mihai Baldean的帶領下由Milothemes公司開發。在Envato Market / codecanyon.net上可以購買到。D.ex Multilayer Parallax是一個Wordpress的插件，你可以使用它創造非常漂亮的多層視差區域。你還可以有創造力的通過任何樣式組合不同的層。我們創建了12個不同的樣例供你參考，玩得開心喲。購買 D.ex Multilayer Parallax for WordPress---------項目案例: F — mdls作者: Adencys09.色彩漸變顏色漸變是當下最流行的趨勢。從2016年開始迅速蔓延，特別是在Instagram決定改變他們原有的logo，改成一個大漸變后。從logo到按鈕到圖像的疊加處理，這個趨勢無所不在。2015-2016年移動端的設備大量增加。當說到瀏覽網頁時，平板和智能手機已經超過電腦、手提電腦成為第一選擇，而且這個趨勢還會繼續。任何沒有把響應式設計做好的網頁，都應該馬上，是馬上升級！---------項目案例: Responsive Website Animation作者: Muharrem Senyil11. 個性化的圖形和插圖圖片庫的圖片依然很流行，但有一個新的趨勢在2016年有明顯的增長，2017年會依然保持的：用自己定製的圖形和插畫。如果你想自己的網站有一個獨特的形象，讓用戶可以記住，聯繫一個數字插畫設計師吧。少點圖庫，更多的原創，獨特的圖像。傳送門: Margarita Mar12. 創造性地使用中立空間和柵格在前幾年，網頁設計很講究列和網格。但在2016年，我們看到相當多轉移到不規則的圖層和更現代的設計。13. 講故事網站現在都通過講故事的方式來說服用戶留在這個頁面。比起平鋪直敘的文字，人們從故事中受到的感染會更多。14. 延遲載入長網頁的的圖片都通過延遲載入的方式來進行，在需要的時候才載入信息。15. 分割的內容在響應式的網頁設計里，分割的內容變得越來越流行，它把屏幕分割成兩部分或者更多的區域。分割的做法能在一個頁面里給用戶傳達幾部分同等重要的信息。這個趨勢在2015年後期開始流行，在2017年將運用到更多的網站上。16. 全屏展示當全屏的內容做好響應式設計后，再也沒有必要為了填一個表格而跳轉頁面，在當前頁面完全可以操作完成並有更好的體驗。17. 視頻無處不在視頻內容在去年有大量的增長，人們需要高清質量的視頻內容來講好一個故事。而網站上的視頻可以是短的、重複播放的，通過展示產品或拍成電影的內容讓用戶對故事保持興趣。項目案例: Hillsong作者: Ruslan Siiz18. SEO搜索引擎優化很重要搜索引擎優化對於網站來說很重要，如果一個很漂亮的網站卻在SEO上沒做好，就很難被用戶搜到。19. 隱藏的導航對於漢堡包菜單按鈕難以被用戶發現這個觀點，有很多贊成和反對的討論。但有一點是肯定的，這個趨勢還是會存在，人們終有一天會習慣它。20. 微小的設計細節對於細節設計的專註真的很重要。例如導航的圓點的設計，角落的logo 設計，都需要專註在細小的細節上，才能把工作做好。項目案例: Barometa - Next-generation Job Platform作者: Netguru Team; Łukasz Pachytel傳送門: Konstantin Zhenchur21. Logo設計趨勢21.1. 極簡主義隨著所有大品牌都走更簡單、極簡的設計，這個趨勢會持續的流行。傳送門: Mingo Ideas Up21.2. 手繪手繪已經流行了好幾年了，它很趕時髦。這種手繪的設計用在咖啡館、理髮館和藝術工藝館很合適。查看這個藝術家的設計: Sam Healy21.3. 負型這是一個很老的趨勢了，但在過去幾年又流行起來，在2017年只會繼續增長，值得繼續留意。21.4. 裁剪這個趨勢就是為了展示logo是怎麼回事。21.5. 幾何化這個趨勢很老派了，但是是永遠經典的做法。21.6. 線條藝術這個趨勢在新的現代的商業運用中很流行。傳送門: Sam Healy; Andrea Schlaffer; Jacek Janiczak21.7. 圖案圖案是一個新的趨勢，通過獨特的重複方式可以使作品很出彩。這種原創的趨勢可以被用到logo的展示里。傳送門: Nick Edlin; Stanislav Aleynikov; Lucas Gil-Turner21.8. 動起來的Logo動效設計在今年真是超流行，我們可以看到它在所有領域設計的應用。傳送門: Javier Miranda Nieto; The Woork Co21.9. 復古風復古仍然很流行。儘管這個趨勢已經流行一段時間了，仍然還有很多可以探索的地方。傳送門: Роман Додонов; Mingo Ideas Up; Will Try Further21.10. 色彩漸變顏色漸變今年真是到處都能看到哇，在logo中也不例外。21.11. Logo中的插畫插畫是賦予logo獨特和富有人情味的方式，今年越發的流行 。傳送門: Bodea Daniel; Jacek Janiczak21.12. Logo里的攝影現在很流行在字體里混合圖像使用。它的效果很好，創造出來的對比也很贊。22. 字體設計趨勢22.1. 又大又粗&漂亮的字體設計字體大概是創造出色設計的最關鍵部分了。今年流行的將是大的粗體的大標題。傳送門： Alexander Laguta傳送門：Quim Marin---------項目案例: Baugasm Series - Pack 4作者: Vasjen Katro22.2. 字體中的色彩漸變色彩漸變絕對還是流行的主要因素，字體設計里也不例外。22.3. 視覺層次字體層次對應所有設計領域來說都非常重要。字體的字型大小大小和粗細可以輕易的暗示出文字的重要程度，當你設計文本的時候一定要記住。還有另一點，通過文字的位置和顏色變化，也可以把文字的視覺層次拉開。超小字體可以通過在顏色或圖像中創造一個對比來讓小文字的閱讀性更好。動效的辦法也能幫助小文字的閱讀。傳送門：Slava Oleinik; Bahaa Samir; Witty Digital---------22.5. 字體的動畫動畫無處不在，連字體也不例外。柔滑的動畫永遠都不會錯。項目案例: Gotham Pro Animated Typeface Free作者s: Yaroslav Kononov; Daria Zalyatskaya; Nastya Sokha; Katerina Pavlenko; Max Kravchenko;Nadezhda Shymchenko; Kate Nizhegorodova22.6. 當字體遇上攝影字體和攝影的組合通常可以達到很好的視覺效果。以下就是一些例子。傳送門：Quim Marin22.7. 幾何形狀與字體幾何形狀也可以與字體結合噠~結果還會很現代。傳送門：Quim Marin傳送門：∆ Studio—JQ ∆22.8. 字體搭配兩種或兩種以上的字體組合使用在今年還很流行。看下以下兩個案例，裡面都是些有趣的搭配。Typography: Google Fonts Combinations - Volume 1Typography: Google Fonts Combinations - Volume 2-------- END --------翻譯者：Ning @騰訊視頻TVD(Tencent Video Design Team) 希望通過翻譯國外設計圈比較優質的內容，讓國內設計小夥伴都能第一時間接觸到全球設計界的一手資訊，一起討論