觸屏版
全國服務(wù)熱線:0571-87205688
登錄
注冊(cè)
客戶中心
關(guān)注云客
網(wǎng)頁設(shè)計(jì)在過去幾個(gè)月已經(jīng)發(fā)生了很大變化,我們迫不及待地想知道 2018 年會(huì)是什么樣。2017 年是關(guān)于極簡主義的一年,2018 年將給設(shè)計(jì)界帶來更醒目的字體、鮮艷的色彩、用戶互動(dòng)的新的可能性。設(shè)計(jì)會(huì)比以往任何時(shí)候都更試圖吸引我們的注意力,讓我們?cè)诰W(wǎng)站瀏覽的同時(shí)保持專注和投入。
審視下我們自身,看看什么在變化!
這里為你介紹 2018 年六個(gè)熱門網(wǎng)頁設(shè)計(jì)趨勢
1.粗體字
粗體字的流行即將來臨。大寫字母的標(biāo)題四周有很多空白,這會(huì)帶給我們強(qiáng)烈的視覺沖擊。對(duì)于那些掌握字體解剖學(xué)技巧的人來說,2018 將是他們大展身手的一年。到了 2018 年底,我們都將知道什么是字體的ascender、ear 和 loop。(譯者注:這幾個(gè)名詞是字體解剖學(xué)術(shù)語,在此不做翻譯。推薦一篇相關(guān)文章:https://en.fontke.com/article/2690)
粗體字不僅僅是美學(xué)上的考量。粗體字還對(duì)閱讀速度、閱讀理解程度和用戶感知有很大的影響。
Google/IBM 進(jìn)行的一項(xiàng)研究表明,有襯線字體 Georgia 的閱讀速度比黑體快 7.9%。
即使有些研究表明人們?nèi)绾问褂靡r線字體來更好地理解文字,但是事實(shí)恰好相反。使用像 Helvetica 這樣的無襯線字體的測試人員在閱讀速度和閱讀理解上的獲得的評(píng)分更高。
粗體字會(huì)有產(chǎn)生奇妙的效果。粗體字很容易閱讀和理解。我們很高興可以在 2018 年看到更多的粗體字設(shè)計(jì)。
2. 鮮艷的顏色又回來了!
曾經(jīng)到處都是柔和的色彩,然而兩年后,鮮艷的顏色又殺回來了。不再是柔和的配色方案,新的一年將充滿了高對(duì)比度和鮮明的個(gè)性。
色彩對(duì)情緒的影響一直是個(gè)廣泛研究的課題。顏色對(duì)我們的大腦、知覺和行為有著重要的影響。根據(jù) Kissmetrics 的調(diào)查,92% 的客戶表示視覺表達(dá)是最具影響力的購買決策因素。
顏色會(huì)影響我們的感受,明亮、生動(dòng)的顏色會(huì)讓人感到清醒、興奮,充滿活力。
Smashing 雜志聲稱顏色在影響應(yīng)用程序的各個(gè)方面中排名第二(第一是功能)。
像氣味一樣,顏色也是一個(gè)非常強(qiáng)大的因素,因?yàn)樗苯佑绊懳覀兊母惺堋?/p>
當(dāng)我們離開一個(gè)網(wǎng)站的時(shí)候,可能會(huì)忘掉它的內(nèi)容,但我們會(huì)記住它讓我們產(chǎn)生的感覺。
鮮艷的顏色能激發(fā)人們的活力,讓我們保持活躍,并激發(fā)我們的購買力。它們積極,引人注目,始終吸引著我們的注意力。
一些設(shè)計(jì)機(jī)構(gòu)已經(jīng)在一段時(shí)間內(nèi)使用了鮮艷的顏色(你好,黃色!),但在 2018 年,不管是小公司還是大企業(yè),都會(huì)迎頭趕上。
3. 掌握移動(dòng)設(shè)計(jì)
隨著移動(dòng)流量每天都在增加,響應(yīng)式網(wǎng)站在過去幾年中已經(jīng)成為必備。到 2018 年,是時(shí)候真正掌握移動(dòng)設(shè)計(jì)了。問題不再是:我們的網(wǎng)站是否適用于手機(jī)?而是:我們的內(nèi)容如何最好地展現(xiàn)在移動(dòng)設(shè)備上?
80% 的互聯(lián)網(wǎng)用戶擁有智能手機(jī),并經(jīng)常使用。事實(shí)上,根據(jù) TechCrunch 的調(diào)查數(shù)據(jù)表明,在移動(dòng)設(shè)備上花費(fèi)的平均時(shí)間正在穩(wěn)步增長,并且每天超過 5 個(gè)小時(shí)。
掌握移動(dòng)設(shè)計(jì)并理解如何在較小的設(shè)備上最好地展示內(nèi)容將是 2018 年的關(guān)鍵挑戰(zhàn)。
移動(dòng)設(shè)計(jì)的一些關(guān)鍵挑戰(zhàn)是:
您不希望你的屏幕顯得雜亂無章
您不希望用戶在其移動(dòng)設(shè)備和桌面版上找到相同的內(nèi)容
您想保持一個(gè)類似的功能和導(dǎo)航的內(nèi)容
您可能需要展示廣告,這對(duì)移動(dòng)設(shè)備來說是一個(gè)挑戰(zhàn)
您想讓你的桌面網(wǎng)站與移動(dòng)設(shè)計(jì)觸發(fā)相同的情緒和品牌效應(yīng)
用戶必須喜愛你的移動(dòng)設(shè)計(jì)體驗(yàn)否則他們會(huì)流失。谷歌最近的一項(xiàng)研究表明,用戶用自己的智能手機(jī)做一些研究基本上沒有太多的問題。一些關(guān)于牙刷,水瓶或鹽的研究(是的,鹽!)
谷歌的研究顯示,在過去兩年中,移動(dòng)搜索“best”這個(gè)詞的搜索量已經(jīng)超過了 80% 以上。
實(shí)現(xiàn)移動(dòng)優(yōu)先級(jí)的一個(gè)關(guān)鍵要素是您的內(nèi)容必須易于用一只手進(jìn)行導(dǎo)航。想想你如何使用你的智能手機(jī)。您可以在公交車或地鐵站閱讀文章,也可以通過超市走道發(fā)短信,在途中見到朋友的時(shí)候,您可能正在尋找“2017年最好的紅酒”。有可能你只用一只手做這些事情。
谷歌稱這些情況為“micro-moments”,在時(shí)間短暫的情況下,人們正在轉(zhuǎn)向在智能手機(jī)上以獲取、了解、執(zhí)行和購買。
據(jù) Steven Hoober 介紹,智能手機(jī)使用率的 49% 是單手執(zhí)行的,而不是兩手一握。在手機(jī)上,49% 的時(shí)間我們單手持有并瀏覽網(wǎng)站。
這意味著導(dǎo)航必須適應(yīng)拇指才能觸及屏幕的每個(gè)部分或大致部分。
4. 微互動(dòng)將更加巧妙
“沒有什么大作” - Victor Papanek
2017 年,我們開始看到微互動(dòng),將來肯定會(huì)看到更多。微互動(dòng)允許用戶以小手勢與軟件或應(yīng)用程序進(jìn)行交互。
在他的“微交互”一書中,Dan Saffer 是這么描述微互動(dòng)的:
“微互動(dòng)可以為整個(gè)應(yīng)用程序或設(shè)備提供支持,或者(更常見地)在更大的產(chǎn)品中或其內(nèi)部存在。他們是可以變得沉悶和被遺忘的,或愉快和吸引人的小時(shí)刻。每當(dāng)你改變?cè)O(shè)置、同步你的數(shù)據(jù)或設(shè)備、設(shè)置鬧鐘、選擇密碼、打開設(shè)備、登錄、設(shè)置狀態(tài)消息,或偏愛/喜歡的東西,你正在從事微互動(dòng)。
雖然 Saffer 用非常函數(shù)式的術(shù)語描述了微互動(dòng),但他們變得更加巧妙和更有趣。
例如,在 iMessage 中,你可以對(duì)發(fā)給你的任何文本進(jìn)行“l(fā)ike”、“haha”,“!”或“?”互動(dòng)。
Facebook Messenger 允許你增加拇指大小,具體取決于按“l(fā)ike”(贊)按鈕的時(shí)間長短。
微互動(dòng)的例子是無止境的,但為什么公司使用它們呢?
微互動(dòng)非常容易上癮,并且很有趣。他們補(bǔ)充道 - 用戶體驗(yàn)設(shè)計(jì)師和作家 Nick Babich 稱之為“人性化”,使任務(wù)更加有趣和富有吸引人。微互動(dòng)鼓勵(lì)用戶與軟件交互,并有一些樂趣!
5. Visual storytelling(可視化敘事):視頻將變得更加重要
敘事將越來越個(gè)人化,并且視頻在這方面起著至關(guān)重要的作用。
原因如下:
根據(jù) Eyeview 統(tǒng)計(jì),在登錄頁中包含視頻可以將轉(zhuǎn)化率提高80%
如果你的電子郵件主題行中包含“視頻”一詞,根據(jù) Syndacast 統(tǒng)計(jì),你的郵件被打開的概率將上漲19%。
根據(jù) Wistia 的說法,平均而言,人們?cè)谟幸曨l的網(wǎng)頁上花費(fèi)的時(shí)間比沒有的多了2.6倍。
視頻是可視化敘事的主體,吸引用戶進(jìn)入場景、故事和情感。它引人注目,吸引人的注意,并保持我們的專注和參與。
6. SVG
簡單來說,在 2018 年,SVG 有上升趨勢,而且它的使用率可能會(huì)增加。隨著動(dòng)畫越來越受歡迎以及 SVG 能夠轉(zhuǎn)換圖形和網(wǎng)站的能力,SVG 在過去的幾個(gè)月里已經(jīng)穩(wěn)定地流行起來。
已有 4.9% 的網(wǎng)站使用SVG,包括 WhatsApp、GitHub、Espn、Dropbox 和紐約時(shí)報(bào)等熱門網(wǎng)站。
你可以在 w3techs.com 上的此圖中看出:最近幾個(gè)月中 SVG 有顯著增長。
動(dòng)態(tài) SVG 的常見用例是導(dǎo)航菜單和網(wǎng)站標(biāo)題。SVG 意味著在保持實(shí)用的同時(shí)增強(qiáng)接口。導(dǎo)航條或文本是 SVG 的用例。
評(píng)論(0人參與,0條評(píng)論)
發(fā)布評(píng)論
最新評(píng)論