英文原文：Web Design Trends To Watch Out For In 2018

原文地址：https://usersnap.com/blog/web-design-trends-2018/

參與翻譯 : Tocy, 涼涼_, 邊城, soaring, rever4433

譯文地址：https://www.oschina.net/translate/web-design-trends-2018

網頁設計在過去幾個月已經發生了很大變化，我們迫不及待地想知道 2018 年會是什麼樣。2017 年是關於極簡主義的一年，2018 年將給設計界帶來更醒目的字型、鮮豔的色彩、使用者互動的新的可能性。設計會比以往任何時候都更試圖吸引我們的注意力，讓我們在網站瀏覽的同時保持專注和投入。

審視下我們自身，看看什麼在變化！

這裡為你介紹 2018 年六個熱門網頁設計趨勢

1.粗體字

粗體字的流行即將來臨。大寫字母的標題四周有很多空白，這會帶給我們強烈的視覺衝擊。對於那些掌握字型解剖學技巧的人來說，2018 將是他們大展身手的一年。到了 2018 年底，我們都將知道什麼是字型的ascender、ear 和 loop。(譯者注：這幾個名詞是字型解剖學術語，在此不做翻譯。推薦一篇相關文章：https://en.fontke.com/article/2690)

粗體字不僅僅是美學上的考量。粗體字還對閱讀速度、閱讀理解程度和使用者感知有很大的影響。

Google/IBM 進行的一項研究表明，有襯線字型 Georgia 的閱讀速度比黑體快 7.9%。

即使有些研究表明人們如何使用襯線字型來更好地理解文字，但是事實恰好相反。使用像 Helvetica 這樣的無襯線字型的測試人員在閱讀速度和閱讀理解上的獲得的評分更高。

粗體字會有產生奇妙的效果。粗體字很容易閱讀和理解。我們很高興可以在 2018 年看到更多的粗體字設計。

2. 鮮豔的顏色又回來了！

曾經到處都是柔和的色彩，然而兩年後，鮮豔的顏色又殺回來了。不再是柔和的配色方案，新的一年將充滿了高對比度和鮮明的個性。

色彩對情緒的影響一直是個廣泛研究的課題。顏色對我們的大腦、知覺和行為有著重要的影響。根據 Kissmetrics 的調查，92% 的客戶表示視覺表達是最具影響力的購買決策因素。

顏色會影響我們的感受，明亮、生動的顏色會讓人感到清醒、興奮，充滿活力。

Smashing 雜誌聲稱顏色在影響應用程式的各個方面中排名第二（第一是功能）。

像氣味一樣，顏色也是一個非常強大的因素，因為它直接影響我們的感受。

當我們離開一個網站的時候，可能會忘掉它的內容，但我們會記住它讓我們產生的感覺。

鮮豔的顏色能激發人們的活力，讓我們保持活躍，並激發我們的購買力。它們積極，引人注目，始終吸引著我們的注意力。

一些設計機構已經在一段時間內使用了鮮豔的顏色（你好，黃色！），但在 2018 年，不管是小公司還是大企業，都會迎頭趕上。

3. 掌握移動設計

隨著移動流量每天都在增加，響應式網站在過去幾年中已經成為必備。到 2018 年，是時候真正掌握移動設計了。問題不再是：我們的網站是否適用於手機？而是：我們的內容如何最好地展現在移動裝置上？

80％ 的網際網路使用者擁有智慧手機，並經常使用。事實上，根據 TechCrunch 的調查資料表明，在移動裝置上花費的平均時間正在穩步增長，並且每天超過 5 個小時。

掌握移動設計並理解如何在較小的裝置上最好地展示內容將是 2018 年的關鍵挑戰。

移動設計的一些關鍵挑戰是：

• 您不希望你的螢幕顯得雜亂無章

• 您不希望使用者在其移動裝置和桌面版上找到相同的內容

• 您想保持一個類似的功能和導航的內容

• 您可能需要展示廣告，這對移動裝置來說是一個挑戰

• 您想讓你的桌面網站與移動設計觸發相同的情緒和品牌效應

使用者必須喜愛你的移動設計體驗否則他們會流失。谷歌最近的一項研究表明，使用者用自己的智慧手機做一些研究基本上沒有太多的問題。一些關於牙刷，水瓶或鹽的研究（是的，鹽！）

谷歌的研究顯示，在過去兩年中，移動搜尋“best”這個詞的搜尋量已經超過了 80％ 以上。

實現移動優先順序的一個關鍵要素是您的內容必須易於用一隻手進行導航。想想你如何使用你的智慧手機。您可以在公交車或地鐵站閱讀文章，也可以通過超市走道發簡訊，在途中見到朋友的時候，您可能正在尋找“2017年最好的紅酒”。有可能你只用一隻手做這些事情。

谷歌稱這些情況為“micro-moments”，在時間短暫的情況下，人們正在轉向在智慧手機上以獲取、瞭解、執行和購買。

據 Steven Hoober 介紹，智慧手機使用率的 49％ 是單手執行的，而不是兩手一握。在手機上，49％ 的時間我們單手持有並瀏覽網站。

這意味著導航必須適應拇指才能觸及螢幕的每個部分或大致部分。

4. 微互動將更加巧妙

“沒有什麼大作” - Victor Papanek 2017 年，我們開始看到微互動，將來肯定會看到更多。微互動允許使用者以小手勢與軟體或應用程式進行互動。

在他的“微互動”一書中，Dan Saffer 是這麼描述微互動的：

“微互動可以為整個應用程式或裝置提供支援，或者（更常見地）在更大的產品中或其內部存在。他們是可以變得沉悶和被遺忘的，或愉快和吸引人的小時刻。每當你改變設定、同步你的資料或裝置、設定鬧鐘、選擇密碼、開啟裝置、登入、設定狀態訊息，或偏愛/喜歡的東西，你正在從事微互動。

雖然 Saffer 用非常函式式的術語描述了微互動，但他們變得更加巧妙和更有趣。

例如，在 iMessage 中，你可以對發給你的任何文字進行“like”、“haha”，“！”或“？”互動。

Facebook Messenger 允許你增加拇指大小，具體取決於按“like”（贊）按鈕的時間長短。

微互動的例子是無止境的，但為什麼公司使用它們呢？

微互動非常容易上癮，並且很有趣。他們補充道 - 使用者體驗設計師和作家 Nick Babich 稱之為“人性化”，使任務更加有趣和富有吸引人。微互動鼓勵使用者與軟體互動，並有一些樂趣！

Tocy翻譯於 2周前0人頂

頂 翻譯得不錯哦！

其它翻譯版本(1)

5. Visual storytelling（視覺化敘事）:視訊將變得更加重要

敘事將越來越個人化，並且視訊在這方面起著至關重要的作用。

原因如下：

• 根據 Eyeview 統計，在登入頁中包含視訊可以將轉化率提高80％

• 如果你的電子郵件主題行中包含“視訊”一詞，根據 Syndacast 統計，你的郵件被開啟的概率將上漲19％。

• 根據 Wistia 的說法，平均而言，人們在有視訊的網頁上花費的時間比沒有的多了2.6倍。

視訊是視覺化敘事的主體，吸引使用者進入場景、故事和情感。它引人注目，吸引人的注意，並保持我們的專注和參與。

6. SVG

簡單來說，在 2018 年，SVG 有上升趨勢，而且它的使用率可能會增加。隨著動畫越來越受歡迎以及 SVG 能夠轉換圖形和網站的能力，SVG 在過去的幾個月裡已經穩定地流行起來。 已有 4.9％ 的網站使用SVG，包括 WhatsApp、GitHub、Espn、Dropbox 和紐約時報等熱門網站。 你可以在 w3techs.com 上的此圖中看出：最近幾個月中 SVG 有顯著增長。

動態 SVG 的常見用例是導航選單和網站標題。SVG 意味著在保持實用的同時增強介面。導航條或文字是 SVG 的用例。

下面是我最喜歡的示例之一：如果你點選 Sean McCaffery 的 Codepen 網站上的 “Hover” ，動畫就會開始：

推薦閱讀

點選 “閱讀原文” 看看本號其他精彩內容