2017 年需要警惕的設計趨勢

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


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

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

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

明亮的色彩

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

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

警惕

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

嘗試這樣做:

  • 利用較大面積的暗色或中性色來平衡亮色;
  • 在細節上使用亮色,用來吸引并引導用戶;
  • 在大型的印刷品上使用亮色,作為裝飾元素;
  • 用于強調內容或互動的時候,使用亮色。

不要這樣做:

  • 避免大面積使用亮色或將其作為主要背景色;
  • 避免在同一個頁面或相鄰之間使用過多亮色;
  • 不要在主文本之后或附近使用亮色;
  • 不要在帶有含義的小區域中使用亮色,例如小圖標和導航。

實驗性布局

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

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

警惕

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

嘗試這樣做:

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

不要這樣做:

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

小細節

極簡主義已經盛行了很久,未來依舊如此。然而,我們目前正朝著更注重細節的布局方式轉變。這種轉變的主要原因是 – 極簡設計沒有辦法提供更多的細節,用以區分更為復雜與細致的元素。

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

警惕

  1. 一些細節對于吸引和取悅用戶是十分管用的,但它們可能在不經意間與實際的導航、內容產生競爭關系。同時,太多的細節可能會徹底使層級結構變得混亂,而不是幫助用戶瀏覽內容。 所以,不為服務目標的細節都是多余的。
  2. 還有一些細節通常會作為裝飾元素,出現在圖像或字體排版的邊緣,有時候會與它們疊加,有時則跟隨滾動條或鼠標的光標進行移動。雖然,它們容易吸引我們的注意,但是,我們需要留意這個功能,并將其合理的放置,從而避免影響內容的可讀性。

嘗試這樣做:

  • 使用一些用于明確內容的細節,確保其可讀性不受影響;
  • 使用一些引導或剝離用戶注意力到主要內容的細節;
  • 用簡潔的布局來平衡細節;
  • 嘗試在細節中添加與上下文相關的信息,使其與內容相關。

不要這樣做:

  • 不要在內容繁瑣的頁面中使用細節;
  • 避免沒有目的性,或不能幫你傳達故事信息的細節;
  • 嘗試將無功能的細節從主用戶導航中區分出來;
  • 把小細節作為你設計的加分項,而不是主要組成部分。

一些值得提及的設計趨勢

小字體排版

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

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

實驗性導航

隨著更多設計師的嘗試與創新,實驗性導航模式也越發的流行了。不同的導航樣式可以使小型、內容較少的網站變得更為有趣,同時它們可以幫助用戶以特定的方式進行導航。

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

動畫

動畫為 UI 設計帶來了無限的可能。它們帶來了豐富的創意變換,并能增強用戶的體驗。動畫可以在任何設計中添加一個額外的層級,用于引導用戶關注到正確的位置。同時,動畫豐富了極簡布局,并增強了故事性以及用戶交互。

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

總結

在網站與產品設計的浪潮中,設計人員嘗試通過遵循設計趨勢來保持設計的新鮮度和相關性。但趨勢也是需要警惕的,它們并非“靈丹妙藥”。我們需要依據內容、受眾與目標謹慎的使用它們,才是重中之重。

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


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

注:

  1. 本文版權歸原作者所有,僅用于學習與交流;
  2. 如需轉載譯文,煩請按下方注明出處信息,謝謝!

英文原文:Dangerous Design trends 2017
作者:Eleana Gkogka
譯者:IT程序獅
譯文地址:http://www.lxweimin.com/p/e6f56895eff6

更多文章:

  1. UX 設計面試常被問到的 7 個問題
  2. UX 設計師能從心理學中“悟”出什么?
  3. 扁平化設計最佳實踐
  4. 2017 年十大網頁設計趨勢
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,431評論 6 544
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,637評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,555評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,900評論 1 318
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,629評論 6 412
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,976評論 1 328
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,976評論 3 448
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 43,139評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,686評論 1 336
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,411評論 3 358
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,641評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,129評論 5 364
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,820評論 3 350
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,233評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,567評論 1 295
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,362評論 3 400
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,604評論 2 380

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,783評論 1 92
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,753評論 25 708
  • 導讀:今天想給大家分享一些書摘。小編看完頗有感觸在一個相當長的時期里,尼采以及他的人生哲學,遭到了一些人的歪曲和誤...
    課后輔導陳老師閱讀 1,684評論 0 5
  • 辮兒媽的第89篇原創文章 曾經看過一個臺灣偶像劇,劇情記得不大清楚了,里面男女主角的孩子小樂,另我印象深刻,他無比...
    辮兒媽閱讀 414評論 0 2
  • 我的工作? 我是一名進修醫師,專門搞中醫方面的刮痧,針灸,以及以后學習的開方。 今天給一位頸椎病的叔叔刮痧,刮了脊...
    大荷08閱讀 299評論 0 0