2017年這3個(gè)設(shè)計(jì)趨勢(shì),請(qǐng)務(wù)必要警惕

本文是源自 Medium 上的一篇爆款設(shè)計(jì)文章(獲得了 12.6K 的贊),UI/UX 設(shè)計(jì)師 – Eleana Gkogka 在文章中,分享了 3 個(gè)值得我們警惕的設(shè)計(jì)趨勢(shì),并給出了具體的解決方式。同時(shí),她也告誡我們,不要以犧牲用戶(hù)體驗(yàn)為代價(jià)來(lái)追逐設(shè)計(jì)趨勢(shì)。來(lái) Enjoy 吧!
我們不能通過(guò)一本書(shū)的封面來(lái)評(píng)價(jià)其內(nèi)容的好壞,但可以通過(guò)一個(gè)網(wǎng)站的設(shè)計(jì)來(lái)判斷其水準(zhǔn)。人們常常習(xí)慣在了解產(chǎn)品與網(wǎng)站的功能和實(shí)用性之前,基于它們的外觀進(jìn)行評(píng)估與判斷。雖然,緊跟設(shè)計(jì)趨勢(shì)對(duì)于保持產(chǎn)品的新鮮度與吸引力是十分必要的。但是,設(shè)計(jì)趨勢(shì)真是“靈丹妙藥”?
作為設(shè)計(jì)師,緊隨設(shè)計(jì)趨勢(shì)的確是我們工作的關(guān)鍵部分,但我們不應(yīng)該盲目的使用它們。并非每一種設(shè)計(jì)趨勢(shì)都是通用、有益或是合適的。即使再好的設(shè)計(jì)趨勢(shì),用錯(cuò)了地兒也會(huì)有損用戶(hù)體驗(yàn)。這就是為什么我們需要篩選它們,謹(jǐn)慎的使用它們,并在需要的時(shí)候進(jìn)行及時(shí)的調(diào)整。
讓我們來(lái)看看 2017 年 3 個(gè)需要警醒的設(shè)計(jì)趨勢(shì),以及如何更明智的使用它們。
明亮的色彩
眾所周知,顏色可以傳達(dá)情感,也可以在品牌和 UI 設(shè)計(jì)中策略性的使用。相比暗色或中性色而言,亮色系更容易吸引注意力,并讓我們產(chǎn)生更積極的情緒。明亮、跳躍的顏色總是彰顯著有趣、大膽與精力充沛,而柔和的顏色則令人放松,情緒也能更為舒緩。
2017 年是令人興奮的一年,初創(chuàng)企業(yè)與新產(chǎn)品如雨后春筍般的涌現(xiàn),都在爭(zhēng)奪自己的市場(chǎng)地位。色彩是獲取人們的注意力,并產(chǎn)生聯(lián)系的最佳方式,這就是為什么明亮的色彩越來(lái)越受歡迎。但物極必反,錯(cuò)誤的使用只會(huì)有損用戶(hù)的體驗(yàn)。
警惕
- 大面積明亮的色彩頁(yè)面,或是眾多相鄰的明亮顏色會(huì)使我們的眼睛“流血”。這不僅僅是字面的意思,它們確實(shí)會(huì)傷害用戶(hù)的眼睛。當(dāng)用戶(hù)感到雙眼酸澀疲勞時(shí),他們就會(huì)情不自禁的緊閉雙目或者轉(zhuǎn)移視線,然而我們又害怕用戶(hù)會(huì)就此流失,于是就會(huì)優(yōu)先使用閃爍的顏色。
- 那些靠近或是在文字周邊的亮色,都會(huì)讓用戶(hù)的閱讀變得很不愉快,甚至出現(xiàn)無(wú)法閱讀的狀況,因?yàn)榱辽珪?huì)反射更多光線。這就好像人們?cè)陂喿x時(shí),臉卻被強(qiáng)光手電照著一樣。即使人們?cè)O(shè)法閱讀,但帶給他們的體驗(yàn)也是非常糟糕的,而相應(yīng)的內(nèi)容也自然不會(huì)被用戶(hù)所重視。
嘗試這樣做:
- 利用較大面積的暗色或中性色來(lái)平衡亮色;
- 在細(xì)節(jié)上使用亮色,用來(lái)吸引并引導(dǎo)用戶(hù);
- 在大型的印刷品上使用亮色,作為裝飾元素;
- 用于強(qiáng)調(diào)內(nèi)容或互動(dòng)的時(shí)候,使用亮色。
不要這樣做:
- 避免大面積使用亮色或?qū)⑵渥鳛橹饕尘吧?/li>
- 避免在同一個(gè)頁(yè)面或相鄰之間使用過(guò)多亮色;
- 不要在主文本之后或附近使用亮色;
- 不要在帶有含義的小區(qū)域中使用亮色,例如小圖標(biāo)和導(dǎo)航。
實(shí)驗(yàn)性布局
在爭(zhēng)奪用戶(hù)眼球的角逐中,設(shè)計(jì)師拒絕平庸,打破和諧,并使用獨(dú)特、不平衡和非主流的作品將以“亂”為美的設(shè)計(jì)理念帶回到設(shè)計(jì)圈。而這種實(shí)驗(yàn)性布局在 2017 年變得更為流行。
誠(chéng)然,這種趨勢(shì)是頑皮且有趣的,也不失為一種很好的方法,幫助藝術(shù)或時(shí)尚設(shè)計(jì)從整潔的布局中脫穎而出,而實(shí)驗(yàn)性的布局方式也不在意布局是否協(xié)調(diào)。在照片、字體排版和界面上通常都不會(huì)對(duì)齊排列,各個(gè)元素也具有不同的填充方式,甚至相互疊加。
警惕
- 我們的日常生活已經(jīng)夠混亂了。當(dāng)我們?cè)诰W(wǎng)上查找信息的時(shí)候,還需要更多的干擾嗎?不平衡的布局方式,可以很容易地干擾用戶(hù)發(fā)現(xiàn)、瀏覽網(wǎng)站信息,從而壓倒性的改變用戶(hù)的瀏覽體驗(yàn)。當(dāng)我們的目標(biāo)是讓用戶(hù)能夠從內(nèi)容繁重的頁(yè)面中獲取信息時(shí),布局結(jié)構(gòu)就顯得尤為重要了。
- 在引導(dǎo)用戶(hù)瀏覽內(nèi)容的過(guò)程中,視覺(jué)層次也至關(guān)重要。在實(shí)驗(yàn)性布局中,元素通常彼此浮動(dòng),或是以隨機(jī)、非層次的方式來(lái)劃分內(nèi)容。而其他元素可能在頁(yè)面較不明顯的區(qū)域中重疊或最終出現(xiàn),從而使用戶(hù)難以閱讀、分組和處理信息。
嘗試這樣做:
- 當(dāng)不以獲取信息為主要目的的時(shí)候,可以使用實(shí)驗(yàn)性布局方式;
- 在整齊布局與對(duì)齊的模塊間,使用不平衡的布局方式增添俏皮感;
- 保持分組元素的相對(duì)集中,并在不同的內(nèi)容塊之間進(jìn)行明確的分隔;
- 當(dāng)元素間有良好的對(duì)比度和足夠大的排版空間時(shí),再使用重疊元素。
不要這樣做:
- 不要在內(nèi)容飽滿(mǎn)的頁(yè)面中使用實(shí)驗(yàn)性布局;
- 當(dāng)用戶(hù)瀏覽內(nèi)容的時(shí)間有限,請(qǐng)勿使用不平衡的布局方式;
- 不要將元素隨意地?cái)[放在頁(yè)面上,請(qǐng)務(wù)必設(shè)置一些基本的對(duì)齊方式;
- 不要盲目地重疊元素,請(qǐng)考慮元素之間的對(duì)比和其相關(guān)意義。
小細(xì)節(jié)
極簡(jiǎn)主義已經(jīng)盛行了很久,未來(lái)依舊如此。然而,我們目前正朝著更注重細(xì)節(jié)的布局方式轉(zhuǎn)變。這種轉(zhuǎn)變的主要原因是 – 極簡(jiǎn)設(shè)計(jì)沒(méi)有辦法提供更多的細(xì)節(jié),用以區(qū)分更為復(fù)雜與細(xì)致的元素。
從次要的導(dǎo)航點(diǎn)到不起任何作用的浮動(dòng)元素,這些細(xì)節(jié)可以引導(dǎo)用戶(hù)的雙眼。飛行的裝飾圖標(biāo)、下劃線、幾何圖形和碎片元素越來(lái)越受歡迎,因?yàn)樗鼈兛梢詾槿魏卧O(shè)計(jì)增添有趣的注釋。它們可以扮演平衡器、分隔符或指向內(nèi)容的指針等角色。
警惕
- 一些細(xì)節(jié)對(duì)于吸引和取悅用戶(hù)是十分管用的,但它們可能在不經(jīng)意間與實(shí)際的導(dǎo)航、內(nèi)容產(chǎn)生競(jìng)爭(zhēng)關(guān)系。同時(shí),太多的細(xì)節(jié)可能會(huì)徹底使層級(jí)結(jié)構(gòu)變得混亂,而不是幫助用戶(hù)瀏覽內(nèi)容。 所以,不為服務(wù)目標(biāo)的細(xì)節(jié)都是多余的。
- 還有一些細(xì)節(jié)通常會(huì)作為裝飾元素,出現(xiàn)在圖像或字體排版的邊緣,有時(shí)候會(huì)與它們疊加,有時(shí)則跟隨滾動(dòng)條或鼠標(biāo)的光標(biāo)進(jìn)行移動(dòng)。雖然,它們?nèi)菀孜覀兊淖⒁猓?,我們需要留意這個(gè)功能,并將其合理的放置,從而避免影響內(nèi)容的可讀性。
嘗試這樣做:
- 使用一些用于明確內(nèi)容的細(xì)節(jié),確保其可讀性不受影響;
- 使用一些引導(dǎo)或剝離用戶(hù)注意力到主要內(nèi)容的細(xì)節(jié);
- 用簡(jiǎn)潔的布局來(lái)平衡細(xì)節(jié);
- 嘗試在細(xì)節(jié)中添加與上下文相關(guān)的信息,使其與內(nèi)容相關(guān)。
不要這樣做:
- 不要在內(nèi)容繁瑣的頁(yè)面中使用細(xì)節(jié);
- 避免沒(méi)有目的性,或不能幫你傳達(dá)故事信息的細(xì)節(jié);
- 嘗試將無(wú)功能的細(xì)節(jié)從主用戶(hù)導(dǎo)航中區(qū)分出來(lái);
- 把小細(xì)節(jié)作為你設(shè)計(jì)的加分項(xiàng),而不是主要組成部分。
一些值得提及的設(shè)計(jì)趨勢(shì)
小字體排版
小字號(hào)字體排版看上去會(huì)更加的優(yōu)雅。它為其他元素預(yù)留了足夠的空間,便于用戶(hù)視線的移動(dòng)。同時(shí),使用較小的字體會(huì)有充足的留白,便于你創(chuàng)作出更有趣的對(duì)比效果。
另一方面,小字體排版可能會(huì)讓用戶(hù)迷失在大段文字中,或者可能會(huì)妨礙內(nèi)容的可讀性。所以,請(qǐng)?jiān)诙绦〉亩温渲性偈褂眯∽煮w排版。另外,避免使用小于 13pt 的字體進(jìn)行排版。
實(shí)驗(yàn)性導(dǎo)航
隨著更多設(shè)計(jì)師的嘗試與創(chuàng)新,實(shí)驗(yàn)性導(dǎo)航模式也越發(fā)的流行了。不同的導(dǎo)航樣式可以使小型、內(nèi)容較少的網(wǎng)站變得更為有趣,同時(shí)它們可以幫助用戶(hù)以特定的方式進(jìn)行導(dǎo)航。
另外,如果實(shí)驗(yàn)性導(dǎo)航模式足夠直觀,就可以與用戶(hù)進(jìn)行愉快、有效的互動(dòng)。但值得我們注意的是,這種模式并不適合所有的設(shè)計(jì)或是受眾。所以,測(cè)試其可用性就變得至關(guān)重要了。
動(dòng)畫(huà)
動(dòng)畫(huà)為 UI 設(shè)計(jì)帶來(lái)了無(wú)限的可能。它們帶來(lái)了豐富的創(chuàng)意變換,并能增強(qiáng)用戶(hù)的體驗(yàn)。動(dòng)畫(huà)可以在任何設(shè)計(jì)中添加一個(gè)額外的層級(jí),用于引導(dǎo)用戶(hù)關(guān)注到正確的位置。同時(shí),動(dòng)畫(huà)豐富了極簡(jiǎn)布局,并增強(qiáng)了故事性以及用戶(hù)交互。
然而,過(guò)度使用動(dòng)畫(huà)會(huì)增加網(wǎng)站的負(fù)載,延長(zhǎng)的加載時(shí)間無(wú)疑考驗(yàn)著用戶(hù)的耐心。那些不必要的動(dòng)畫(huà)也會(huì)混淆、擾亂或誤導(dǎo)著用戶(hù),所以請(qǐng)明智的使用它們。
總結(jié)
在網(wǎng)站與產(chǎn)品設(shè)計(jì)的浪潮中,設(shè)計(jì)人員嘗試通過(guò)遵循設(shè)計(jì)趨勢(shì)來(lái)保持設(shè)計(jì)的新鮮度和相關(guān)性。但趨勢(shì)也是需要警惕的,它們并非“靈丹妙藥”。我們需要依據(jù)內(nèi)容、受眾與目標(biāo)謹(jǐn)慎的使用它們,才是重中之重。
最后,也是最重要的一點(diǎn),請(qǐng)不要因?yàn)榭雌饋?lái)不錯(cuò),而犧牲用戶(hù)的體驗(yàn)!
感謝你的閱讀。若你有所收獲,歡迎點(diǎn)贊與分享。
注:本文版權(quán)歸原作者所有,僅用于學(xué)習(xí)與交流
原文地址:Dangerous Design trends 2017
原文作者:Eleana Gkogka
譯者:IT程序獅,微信公眾號(hào)【IT程序獅】
本文由 @IT程序獅 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來(lái)自Pixabay,基于CC0協(xié)議
- 目前還沒(méi)評(píng)論,等你發(fā)揮!