網(wǎng)頁設計在過去幾個月已經(jīng)發(fā)生了很大變化,我們迫不及待地想知道 2018 年會是什么樣滔悉。2017 年是關于極簡主義的一年型凳,2018 年將給設計界帶來更醒目的字體、鮮艷的色彩流酬、用戶互動的新的可能性币厕。設計會比以往任何時候都更試圖吸引我們的注意力,讓我們在網(wǎng)站瀏覽的同時保持專注和投入芽腾。
審視下我們自身旦装,看看什么在變化!
這里為你介紹 2018 年六個熱門網(wǎng)頁設計趨勢
1.粗體字
粗體字的流行即將來臨摊滔。大寫字母的標題四周有很多空白阴绢,這會帶給我們強烈的視覺沖擊。對于那些掌握字體解剖學技巧的人來說惭载,2018 將是他們大展身手的一年旱函。到了 2018 年底,我們都將知道什么是字體的ascender描滔、ear 和 loop棒妨。(譯者注:這幾個名詞是字體解剖學術語,在此不做翻譯。推薦一篇相關文章:https://en.fontke.com/article/2690)
粗體字不僅僅是美學上的考量券腔。粗體字還對閱讀速度伏穆、閱讀理解程度和用戶感知有很大的影響。
Google/IBM 進行的一項研究表明纷纫,有襯線字體 Georgia 的閱讀速度比黑體快 7.9%枕扫。
即使有些研究表明人們?nèi)绾问褂靡r線字體來更好地理解文字,但是事實恰好相反辱魁。使用像 Helvetica 這樣的無襯線字體的測試人員在閱讀速度和閱讀理解上的獲得的評分更高烟瞧。
粗體字會有產(chǎn)生奇妙的效果。粗體字很容易閱讀和理解染簇。我們很高興可以在 2018 年看到更多的粗體字設計参滴。
2.?鮮艷的顏色又回來了!
曾經(jīng)到處都是柔和的色彩锻弓,然而兩年后砾赔,鮮艷的顏色又殺回來了。不再是柔和的配色方案青灼,新的一年將充滿了高對比度和鮮明的個性暴心。
色彩對情緒的影響一直是個廣泛研究的課題。顏色對我們的大腦杂拨、知覺和行為有著重要的影響专普。根據(jù) Kissmetrics?的調(diào)查,92%?的客戶表示視覺表達是最具影響力的購買決策因素扳躬。
顏色會影響我們的感受脆诉,明亮、生動的顏色會讓人感到清醒贷币、興奮,充滿活力亏狰。
Smashing?雜志聲稱顏色在影響應用程序的各個方面中排名第二(第一是功能)役纹。
像氣味一樣,顏色也是一個非常強大的因素暇唾,因為它直接影響我們的感受促脉。
當我們離開一個網(wǎng)站的時候,可能會忘掉它的內(nèi)容策州,但我們會記住它讓我們產(chǎn)生的感覺瘸味。
鮮艷的顏色能激發(fā)人們的活力,讓我們保持活躍够挂,并激發(fā)我們的購買力旁仿。它們積極,引人注目孽糖,始終吸引著我們的注意力枯冈。
一些設計機構已經(jīng)在一段時間內(nèi)使用了鮮艷的顏色(你好毅贮,黃色!)尘奏,但在 2018?年滩褥,不管是小公司還是大企業(yè),都會迎頭趕上炫加。
3. 掌握移動設計
隨著移動流量每天都在增加瑰煎,響應式網(wǎng)站在過去幾年中已經(jīng)成為必備。到 2018 年俗孝,是時候真正掌握移動設計了酒甸。問題不再是:我們的網(wǎng)站是否適用于手機?而是:我們的內(nèi)容如何最好地展現(xiàn)在移動設備上驹针?
80% 的互聯(lián)網(wǎng)用戶擁有智能手機烘挫,并經(jīng)常使用。事實上柬甥,根據(jù) TechCrunch 的調(diào)查數(shù)據(jù)表明饮六,在移動設備上花費的平均時間正在穩(wěn)步增長,并且每天超過 5 個小時苛蒲。
掌握移動設計并理解如何在較小的設備上最好地展示內(nèi)容將是 2018 年的關鍵挑戰(zhàn)卤橄。
移動設計的一些關鍵挑戰(zhàn)是:
您不希望你的屏幕顯得雜亂無章
您不希望用戶在其移動設備和桌面版上找到相同的內(nèi)容
您想保持一個類似的功能和導航的內(nèi)容
您可能需要展示廣告,這對移動設備來說是一個挑戰(zhàn)
您想讓你的桌面網(wǎng)站與移動設計觸發(fā)相同的情緒和品牌效應
用戶必須喜愛你的移動設計體驗否則他們會流失臂外。谷歌最近的一項研究表明窟扑,用戶用自己的智能手機做一些研究基本上沒有太多的問題。一些關于牙刷漏健,水瓶或鹽的研究(是的嚎货,鹽!)
谷歌的研究顯示蔫浆,在過去兩年中殖属,移動搜索“best”這個詞的搜索量已經(jīng)超過了 80% 以上。
實現(xiàn)移動優(yōu)先級的一個關鍵要素是您的內(nèi)容必須易于用一只手進行導航瓦盛。想想你如何使用你的智能手機洗显。您可以在公交車或地鐵站閱讀文章,也可以通過超市走道發(fā)短信原环,在途中見到朋友的時候挠唆,您可能正在尋找“2017年最好的紅酒”。有可能你只用一只手做這些事情嘱吗。
谷歌稱這些情況為“micro-moments”玄组,在時間短暫的情況下,人們正在轉(zhuǎn)向在智能手機上以獲取、了解巧勤、執(zhí)行和購買嵌灰。
據(jù) Steven Hoober 介紹,智能手機使用率的 49% 是單手執(zhí)行的颅悉,而不是兩手一握沽瞭。在手機上,49% 的時間我們單手持有并瀏覽網(wǎng)站剩瓶。
這意味著導航必須適應拇指才能觸及屏幕的每個部分或大致部分驹溃。
4. 微互動將更加巧妙
“沒有什么大作” - Victor Papanek
2017 年,我們開始看到微互動延曙,將來肯定會看到更多豌鹤。微互動允許用戶以小手勢與軟件或應用程序進行交互。
在他的“微交互”一書中枝缔,Dan Saffer 是這么描述微互動的:
“微互動可以為整個應用程序或設備提供支持布疙,或者(更常見地)在更大的產(chǎn)品中或其內(nèi)部存在。他們是可以變得沉悶和被遺忘的愿卸,或愉快和吸引人的小時刻灵临。每當你改變設置、同步你的數(shù)據(jù)或設備趴荸、設置鬧鐘儒溉、選擇密碼、打開設備发钝、登錄顿涣、設置狀態(tài)消息,或偏愛/喜歡的東西酝豪,你正在從事微互動涛碑。
雖然 Saffer 用非常函數(shù)式的術語描述了微互動,但他們變得更加巧妙和更有趣孵淘。
例如锌唾,在 iMessage 中,你可以對發(fā)給你的任何文本進行“l(fā)ike”夺英、“haha”,“滋捶!”或“痛悯?”互動。
Facebook Messenger 允許你增加拇指大小重窟,具體取決于按“l(fā)ike”(贊)按鈕的時間長短载萌。
微互動的例子是無止境的,但為什么公司使用它們呢?
微互動非常容易上癮扭仁,并且很有趣垮衷。他們補充道 - 用戶體驗設計師和作家 Nick Babich 稱之為“人性化”,使任務更加有趣和富有吸引人乖坠。微互動鼓勵用戶與軟件交互搀突,并有一些樂趣!
5. Visual storytelling(可視化敘事):視頻將變得更加重要
敘事將越來越個人化熊泵,并且視頻在這方面起著至關重要的作用仰迁。
原因如下:
根據(jù) Eyeview 統(tǒng)計,在登錄頁中包含視頻可以將轉(zhuǎn)化率提高80%
如果你的電子郵件主題行中包含“視頻”一詞顽分,根據(jù) Syndacast 統(tǒng)計徐许,你的郵件被打開的概率將上漲19%。
根據(jù)Wistia的說法卒蘸,平均而言雌隅,人們在有視頻的網(wǎng)頁上花費的時間比沒有的多了2.6倍。
視頻是可視化敘事的主體缸沃,吸引用戶進入場景恰起、故事和情感。它引人注目和泌,吸引人的注意村缸,并保持我們的專注和參與。
6. SVG
簡單來說武氓,在 2018 年梯皿,SVG 有上升趨勢,而且它的使用率可能會增加县恕。隨著動畫越來越受歡迎以及 SVG 能夠轉(zhuǎn)換圖形和網(wǎng)站的能力东羹,SVG 在過去的幾個月里已經(jīng)穩(wěn)定地流行起來。
已有 4.9% 的網(wǎng)站使用SVG忠烛,包括 WhatsApp属提、GitHub、Espn美尸、Dropbox 和紐約時報等熱門網(wǎng)站冤议。
你可以在w3techs.com上的此圖中看出:最近幾個月中 SVG 有顯著增長。
動態(tài) SVG 的常見用例是導航菜單和網(wǎng)站標題师坎。SVG 意味著在保持實用的同時增強接口恕酸。導航條或文本是 SVG 的用例。
下面是我最喜歡的示例之一:如果你點擊 Sean McCaffery 的?Codepen?網(wǎng)站上的 “Hover” ,動畫就會開始: