本文是源自 Medium 上的一篇爆款設(shè)計文章（獲得了 12.6K 的贊），UI/UX 設(shè)計師 – Eleana Gkogka 在文章中，分享了 3 個值得我們警惕的設(shè)計趨勢，并給出了具體的解決方式。同時，她也告誡我們，不要以犧牲用戶體驗為代價來追逐設(shè)計趨勢。來 Enjoy 吧！

我們不能通過一本書的封面來評價其內(nèi)容的好壞，但可以通過一個網(wǎng)站的設(shè)計來判斷其水準(zhǔn)。人們常常習(xí)慣在了解產(chǎn)品與網(wǎng)站的功能和實用性之前，基于它們的外觀進(jìn)行評估與判斷。雖然，緊跟設(shè)計趨勢對于保持產(chǎn)品的新鮮度與吸引力是十分必要的。但是，設(shè)計趨勢真是“靈丹妙藥”？

作為設(shè)計師，緊隨設(shè)計趨勢的確是我們工作的關(guān)鍵部分，但我們不應(yīng)該盲目的使用它們。并非每一種設(shè)計趨勢都是通用、有益或是合適的。即使再好的設(shè)計趨勢，用錯了地兒也會有損用戶體驗。這就是為什么我們需要篩選它們，謹(jǐn)慎的使用它們，并在需要的時候進(jìn)行及時的調(diào)整。

讓我們來看看 2017 年 3 個需要警醒的設(shè)計趨勢，以及如何更明智的使用它們。

明亮的色彩

眾所周知，顏色可以傳達(dá)情感，也可以在品牌和 UI 設(shè)計中策略性的使用。相比暗色或中性色而言，亮色系更容易吸引注意力，并讓我們產(chǎn)生更積極的情緒。明亮、跳躍的顏色總是彰顯著有趣、大膽與精力充沛，而柔和的顏色則令人放松，情緒也能更為舒緩。

2017 年是令人興奮的一年，初創(chuàng)企業(yè)與新產(chǎn)品如雨后春筍般的涌現(xiàn)，都在爭奪自己的市場地位。色彩是獲取人們的注意力，并產(chǎn)生聯(lián)系的最佳方式，這就是為什么明亮的色彩越來越受歡迎。但物極必反，錯誤的使用只會有損用戶的體驗。

警惕

1. 大面積明亮的色彩頁面，或是眾多相鄰的明亮顏色會使我們的眼睛“流血”。這不僅僅是字面的意思，它們確實會傷害用戶的眼睛。當(dāng)用戶感到雙眼酸澀疲勞時，他們就會情不自禁的緊閉雙目或者轉(zhuǎn)移視線，然而我們又害怕用戶會就此流失，于是就會優(yōu)先使用閃爍的顏色。
2. 那些靠近或是在文字周邊的亮色，都會讓用戶的閱讀變得很不愉快，甚至出現(xiàn)無法閱讀的狀況，因為亮色會反射更多光線。這就好像人們在閱讀時，臉卻被強(qiáng)光手電照著一樣。即使人們設(shè)法閱讀，但帶給他們的體驗也是非常糟糕的，而相應(yīng)的內(nèi)容也自然不會被用戶所重視。

嘗試這樣做：

• 利用較大面積的暗色或中性色來平衡亮色；
• 在細(xì)節(jié)上使用亮色，用來吸引并引導(dǎo)用戶；
• 在大型的印刷品上使用亮色，作為裝飾元素；
• 用于強(qiáng)調(diào)內(nèi)容或互動的時候，使用亮色。

不要這樣做：

• 避免大面積使用亮色或?qū)⑵渥鳛橹饕尘吧?/li>
• 避免在同一個頁面或相鄰之間使用過多亮色；
• 不要在主文本之后或附近使用亮色；
• 不要在帶有含義的小區(qū)域中使用亮色，例如小圖標(biāo)和導(dǎo)航。

實驗性布局

在爭奪用戶眼球的角逐中，設(shè)計師拒絕平庸，打破和諧，并使用獨特、不平衡和非主流的作品將以“亂”為美的設(shè)計理念帶回到設(shè)計圈。而這種實驗性布局在 2017 年變得更為流行。

誠然，這種趨勢是頑皮且有趣的，也不失為一種很好的方法，幫助藝術(shù)或時尚設(shè)計從整潔的布局中脫穎而出，而實驗性的布局方式也不在意布局是否協(xié)調(diào)。在照片、字體排版和界面上通常都不會對齊排列，各個元素也具有不同的填充方式，甚至相互疊加。

警惕

1. 我們的日常生活已經(jīng)夠混亂了。當(dāng)我們在網(wǎng)上查找信息的時候，還需要更多的干擾嗎？不平衡的布局方式，可以很容易地干擾用戶發(fā)現(xiàn)、瀏覽網(wǎng)站信息，從而壓倒性的改變用戶的瀏覽體驗。當(dāng)我們的目標(biāo)是讓用戶能夠從內(nèi)容繁重的頁面中獲取信息時，布局結(jié)構(gòu)就顯得尤為重要了。
2. 在引導(dǎo)用戶瀏覽內(nèi)容的過程中，視覺層次也至關(guān)重要。在實驗性布局中，元素通常彼此浮動，或是以隨機(jī)、非層次的方式來劃分內(nèi)容。而其他元素可能在頁面較不明顯的區(qū)域中重疊或最終出現(xiàn)，從而使用戶難以閱讀、分組和處理信息。

嘗試這樣做：

1. 當(dāng)不以獲取信息為主要目的的時候，可以使用實驗性布局方式；
2. 在整齊布局與對齊的模塊間，使用不平衡的布局方式增添俏皮感；
3. 保持分組元素的相對集中，并在不同的內(nèi)容塊之間進(jìn)行明確的分隔；
4. 當(dāng)元素間有良好的對比度和足夠大的排版空間時，再使用重疊元素。

不要這樣做：

• 不要在內(nèi)容飽滿的頁面中使用實驗性布局；
• 當(dāng)用戶瀏覽內(nèi)容的時間有限，請勿使用不平衡的布局方式；
• 不要將元素隨意地擺放在頁面上，請務(wù)必設(shè)置一些基本的對齊方式；
• 不要盲目地重疊元素，請考慮元素之間的對比和其相關(guān)意義。

小細(xì)節(jié)

極簡主義已經(jīng)盛行了很久，未來依舊如此。然而，我們目前正朝著更注重細(xì)節(jié)的布局方式轉(zhuǎn)變。這種轉(zhuǎn)變的主要原因是 – 極簡設(shè)計沒有辦法提供更多的細(xì)節(jié)，用以區(qū)分更為復(fù)雜與細(xì)致的元素。

從次要的導(dǎo)航點到不起任何作用的浮動元素，這些細(xì)節(jié)可以引導(dǎo)用戶的雙眼。飛行的裝飾圖標(biāo)、下劃線、幾何圖形和碎片元素越來越受歡迎，因為它們可以為任何設(shè)計增添有趣的注釋。它們可以扮演平衡器、分隔符或指向內(nèi)容的指針等角色。

警惕

1. 一些細(xì)節(jié)對于吸引和取悅用戶是十分管用的，但它們可能在不經(jīng)意間與實際的導(dǎo)航、內(nèi)容產(chǎn)生競爭關(guān)系。同時，太多的細(xì)節(jié)可能會徹底使層級結(jié)構(gòu)變得混亂，而不是幫助用戶瀏覽內(nèi)容。 所以，不為服務(wù)目標(biāo)的細(xì)節(jié)都是多余的。
2. 還有一些細(xì)節(jié)通常會作為裝飾元素，出現(xiàn)在圖像或字體排版的邊緣，有時候會與它們疊加，有時則跟隨滾動條或鼠標(biāo)的光標(biāo)進(jìn)行移動。雖然，它們?nèi)菀孜覀兊淖⒁?，但是，我們需要留意這個功能，并將其合理的放置，從而避免影響內(nèi)容的可讀性。

嘗試這樣做：

• 使用一些用于明確內(nèi)容的細(xì)節(jié)，確保其可讀性不受影響；
• 使用一些引導(dǎo)或剝離用戶注意力到主要內(nèi)容的細(xì)節(jié)；
• 用簡潔的布局來平衡細(xì)節(jié)；
• 嘗試在細(xì)節(jié)中添加與上下文相關(guān)的信息，使其與內(nèi)容相關(guān)。

不要這樣做：

• 不要在內(nèi)容繁瑣的頁面中使用細(xì)節(jié)；
• 避免沒有目的性，或不能幫你傳達(dá)故事信息的細(xì)節(jié)；
• 嘗試將無功能的細(xì)節(jié)從主用戶導(dǎo)航中區(qū)分出來；
• 把小細(xì)節(jié)作為你設(shè)計的加分項，而不是主要組成部分。

一些值得提及的設(shè)計趨勢

小字體排版

小字號字體排版看上去會更加的優(yōu)雅。它為其他元素預(yù)留了足夠的空間，便于用戶視線的移動。同時，使用較小的字體會有充足的留白，便于你創(chuàng)作出更有趣的對比效果。

另一方面，小字體排版可能會讓用戶迷失在大段文字中，或者可能會妨礙內(nèi)容的可讀性。所以，請在短小的段落中再使用小字體排版。另外，避免使用小于 13pt 的字體進(jìn)行排版。

實驗性導(dǎo)航

隨著更多設(shè)計師的嘗試與創(chuàng)新，實驗性導(dǎo)航模式也越發(fā)的流行了。不同的導(dǎo)航樣式可以使小型、內(nèi)容較少的網(wǎng)站變得更為有趣，同時它們可以幫助用戶以特定的方式進(jìn)行導(dǎo)航。

另外，如果實驗性導(dǎo)航模式足夠直觀，就可以與用戶進(jìn)行愉快、有效的互動。但值得我們注意的是，這種模式并不適合所有的設(shè)計或是受眾。所以，測試其可用性就變得至關(guān)重要了。

動畫

動畫為 UI 設(shè)計帶來了無限的可能。它們帶來了豐富的創(chuàng)意變換，并能增強(qiáng)用戶的體驗。動畫可以在任何設(shè)計中添加一個額外的層級，用于引導(dǎo)用戶關(guān)注到正確的位置。同時，動畫豐富了極簡布局，并增強(qiáng)了故事性以及用戶交互。

然而，過度使用動畫會增加網(wǎng)站的負(fù)載，延長的加載時間無疑考驗著用戶的耐心。那些不必要的動畫也會混淆、擾亂或誤導(dǎo)著用戶，所以請明智的使用它們。

總結(jié)

在網(wǎng)站與產(chǎn)品設(shè)計的浪潮中，設(shè)計人員嘗試通過遵循設(shè)計趨勢來保持設(shè)計的新鮮度和相關(guān)性。但趨勢也是需要警惕的，它們并非“靈丹妙藥”。我們需要依據(jù)內(nèi)容、受眾與目標(biāo)謹(jǐn)慎的使用它們，才是重中之重。

最后，也是最重要的一點，請不要因為看起來不錯，而犧牲用戶的體驗！

感謝你的閱讀。若你有所收獲，歡迎點贊與分享。

注：本文版權(quán)歸原作者所有，僅用于學(xué)習(xí)與交流

原文地址：Dangerous Design trends 2017

原文作者：Eleana Gkogka

譯者：IT程序獅，微信公眾號【IT程序獅】

本文由 @IT程序獅 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自Pixabay，基于CC0協(xié)議