2018 年值得關注的 Web 設計趨勢

網(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” ,動畫就會開始:

?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子式曲,更是在濱河造成了極大的恐慌义矛,老刑警劉巖发笔,帶你破解...
    沈念sama閱讀 222,464評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異凉翻,居然都是意外死亡了讨,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,033評論 3 399
  • 文/潘曉璐 我一進店門噪矛,熙熙樓的掌柜王于貴愁眉苦臉地迎上來量蕊,“玉大人,你說我怎么就攤上這事艇挨〔信冢” “怎么了?”我有些...
    開封第一講書人閱讀 169,078評論 0 362
  • 文/不壞的土叔 我叫張陵缩滨,是天一觀的道長势就。 經(jīng)常有香客問我,道長脉漏,這世上最難降的妖魔是什么苞冯? 我笑而不...
    開封第一講書人閱讀 59,979評論 1 299
  • 正文 為了忘掉前任,我火速辦了婚禮侧巨,結(jié)果婚禮上舅锄,老公的妹妹穿的比我還像新娘。我一直安慰自己司忱,他們只是感情好皇忿,可當我...
    茶點故事閱讀 69,001評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著坦仍,像睡著了一般鳍烁。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上繁扎,一...
    開封第一講書人閱讀 52,584評論 1 312
  • 那天幔荒,我揣著相機與錄音,去河邊找鬼梳玫。 笑死爹梁,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的提澎。 我是一名探鬼主播卫键,決...
    沈念sama閱讀 41,085評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼虱朵!你這毒婦竟也來了莉炉?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,023評論 0 277
  • 序言:老撾萬榮一對情侶失蹤碴犬,失蹤者是張志新(化名)和其女友劉穎絮宁,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體服协,經(jīng)...
    沈念sama閱讀 46,555評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡绍昂,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,626評論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了偿荷。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片窘游。...
    茶點故事閱讀 40,769評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖跳纳,靈堂內(nèi)的尸體忽然破棺而出忍饰,到底是詐尸還是另有隱情,我是刑警寧澤寺庄,帶...
    沈念sama閱讀 36,439評論 5 351
  • 正文 年R本政府宣布艾蓝,位于F島的核電站,受9級特大地震影響斗塘,放射性物質(zhì)發(fā)生泄漏赢织。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,115評論 3 335
  • 文/蒙蒙 一馍盟、第九天 我趴在偏房一處隱蔽的房頂上張望于置。 院中可真熱鬧,春花似錦贞岭、人聲如沸八毯。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,601評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽宪彩。三九已至,卻和暖如春讲婚,著一層夾襖步出監(jiān)牢的瞬間尿孔,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,702評論 1 274
  • 我被黑心中介騙來泰國打工筹麸, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留活合,地道東北人。 一個月前我還...
    沈念sama閱讀 49,191評論 3 378
  • 正文 我出身青樓物赶,卻偏偏與公主長得像白指,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子酵紫,可洞房花燭夜當晚...
    茶點故事閱讀 45,781評論 2 361

推薦閱讀更多精彩內(nèi)容