原文 Dangerous Design trends 2017 作者 Eleana Gkogka

2017 年危險的設(shè)計(jì)趨勢

三加三的優(yōu)秀設(shè)計(jì)趨勢可能有損用戶體驗(yàn)的設(shè)計(jì)。

15045756140990.jpg

你不可以通過一本書的封面來評價一本書钦扭，但是你肯定可以通過設(shè)計(jì)來評價一個網(wǎng)頁闷串。人們在他們了解到一個產(chǎn)品的特性和用處之前，往往傾向于通過評估其外表來評價一個產(chǎn)品传轰。以下的設(shè)計(jì)趨勢是保持產(chǎn)品新鮮并且有吸引力的必須設(shè)計(jì)趨勢兵怯。但是這些設(shè)計(jì)趨勢真的是萬金油嗎敷存？

我們，作為設(shè)計(jì)師柴我，明白這些設(shè)計(jì)趨勢對我們的工作是至關(guān)重要的部分解寝，但是我們不應(yīng)該盲目地使用它們。并不是所有的設(shè)計(jì)趨勢都是有用艘儒，有幫助或是適合所有的場景聋伦。即便是很好的設(shè)計(jì)趨勢夫偶，也有可能導(dǎo)致不好的用戶體驗(yàn)。這就是為什么我們要明智的使用它們觉增，篩選并調(diào)節(jié)它們以滿足我們的需求兵拢。

讓我們一起來看看 2017 年的危險設(shè)計(jì)以及如何明智地使用它們

鮮亮的顏色

15045765620632.jpg

我們都知道，色彩是用來表達(dá)情緒的途徑逾礁，并且说铃，它們可以戰(zhàn)略性地被用于品牌以及 UI 設(shè)計(jì)。限量的顏色可以吸引我們的注意力嘹履，并且產(chǎn)生比深色或中性色更加積極的情緒腻扇。明亮的，突出的顏色總是會很有趣砾嫉，充滿活力衙解，大膽，與此同時焰枢，淡雅的色調(diào)更使人輕松蚓峦，舒適。

2017 年是一個非常令人興奮的年份济锄，創(chuàng)業(yè)以及新的產(chǎn)品就如同蘑菇一般層出不窮暑椰，全都盡力在市場中保有一席之地。色彩的使用是非常好的方式來吸引人們的注意荐绝，這就是為什么活波的色彩越來越流行一汽。但限量色彩在被大量的使用同時，也很容易對用戶體驗(yàn)造成影響低滩。

雷區(qū)

1. 大量鮮艷顏色的表面或者許多相近的鮮亮顏色召夹，很容易使眼睛感到難受，并不是肯定的恕沫，但是這種方式確實(shí)會是眼睛不舒服监憎。這會導(dǎo)致相當(dāng)數(shù)量的用戶選擇離開，同時你卻想要他們留下來婶溯；同時鲸阔，這也是你一開始使用這種閃瞎人眼睛的設(shè)計(jì)的初衷。
2. 鮮明的顏色迄委，在文本下或者是側(cè)邊的文字會導(dǎo)致閱讀起來的不愉悅褐筛，甚至是無法閱讀。鮮明的顏色會反射更多的光叙身∮嬖看起來就像在別人的面前點(diǎn)燃了一把火炬，當(dāng)他們嘗試在閱讀的時候信轿。及時他們嘗試去閱讀內(nèi)容晃痴，也會導(dǎo)致他們有很差勁的體驗(yàn)残吩，最終導(dǎo)致不喜歡你的設(shè)計(jì)和你所表達(dá)的內(nèi)容。

15045827483368.jpg

Do

• 對鮮明顏色使用顏色較深或者更中性的大色塊進(jìn)行平衡愧旦。
• 在細(xì)節(jié)處使用鮮明顏色世剖，吸引用戶的注意力并指導(dǎo)用戶。
• 在大的版面設(shè)計(jì)中使用鮮亮顏色時笤虫，應(yīng)作為一個裝飾元素旁瘫。
• 使用鮮亮顏色來強(qiáng)調(diào)或者促進(jìn)內(nèi)容以及交互。

Don't

• 避免在大的表面上使用鮮亮顏色或者作為主背景色琼蚯。
• 避免使用太多鮮明的顏色在同一頁中酬凳，或者緊挨著使用。
• 不要在主要文字后或者附近使用鮮亮的顏色遭庶。
• 不要用小的界面上使用鮮亮顏色表達(dá)有意義的事情宁仔，比如小圖標(biāo)以及導(dǎo)航。

創(chuàng)新的布局

15045896162268.jpg

在吸引注意力的競賽中峦睡，設(shè)計(jì)師拒絕限制他們的想象力翎苫，對表達(dá)的和諧持反對意見，通過獨(dú)特的不平衡的榨了，非典型的布局煎谍，給設(shè)計(jì)的風(fēng)格帶來了直接的混亂。創(chuàng)新的布局現(xiàn)在越發(fā)的在 2017 年流行龙屉。

這種風(fēng)格非常有趣呐粘，充滿可玩性。這是一種通過添加幾種有幫助的藝術(shù)或者時尚設(shè)計(jì)使得作品從整潔布局的海洋中脫穎而出的好辦法转捕。創(chuàng)新式布局并不是完美的平衡作岖；圖文排版或者界面通常不是對齊的，元素也有著不同的填充以及經(jīng)常趨于重疊五芝。

雷區(qū)

1. 我們?nèi)粘Ｉ钜呀?jīng)夠混亂了痘儡，當(dāng)我們在網(wǎng)上找信息的時候，是真的需要這些混亂的元素嗎与柑？不平衡的活波的界面設(shè)計(jì)非常輕松的干擾了網(wǎng)頁信息的閱讀以及發(fā)現(xiàn)谤辜，使得瀏覽成為一個難以控制的體驗(yàn)。當(dāng)我們的主要目的是從一個內(nèi)容豐富的網(wǎng)頁上獲取信息价捧，那么它的布局結(jié)構(gòu)就顯得十分必要了。
2. 視覺分級體系在指導(dǎo)用戶閱讀內(nèi)容上也是十分重要的涡戳。在創(chuàng)新式布局中结蟋，元素通常一個個的漂浮開，將內(nèi)容分割的十分奇怪隨機(jī)渔彰，并沒有分級的體系嵌屎。其他的元素可能會遮蓋或者結(jié)束在頁面缺少視覺效果的位置推正，使得閱讀、整理信息的過程變得非常困難宝惰。

15045981149559.jpg

Do

• 當(dāng)閱讀內(nèi)容不是主要目標(biāo)的時候使用創(chuàng)新布局植榕。
• 在良好的結(jié)構(gòu)以及對齊的塊之間使用不平衡的布局作為有趣的細(xì)節(jié)。
• 使有關(guān)聯(lián)的元素能夠相鄰并且與不同的內(nèi)容區(qū)有著明顯的分割尼夺。
• 只有當(dāng)你有這足夠好的對比和足夠大的排版面積時使用遮罩元素尊残。

Don't

• 不要在內(nèi)容很多的頁面里使用創(chuàng)新型布局。
• 不要使用不平衡的布局淤堵，當(dāng)你的用戶只有有限的時間來閱讀內(nèi)容寝衫。
• 不要隨便的將元素灑滿整個頁面，某些基礎(chǔ)的對齊策略還是要使用的拐邪。
• 不要盲目地使用遮罩元素慰毅，考慮到對比和相關(guān)性。

小細(xì)節(jié)

15046025529887.jpg

極簡抽象設(shè)計(jì)已經(jīng)持續(xù)流行了很久扎阶。當(dāng)然汹胃，我們現(xiàn)在也見證了正在遷移向擁有更多細(xì)節(jié)的設(shè)計(jì)。這其中是有許多原因的东臀；極簡設(shè)計(jì)不能提供足夠的能力去突出和區(qū)別設(shè)計(jì)相較于多細(xì)節(jié)和復(fù)雜的構(gòu)成設(shè)計(jì)着饥。關(guān)注小細(xì)節(jié)之處已經(jīng)在最近非常重要。

留白處的小細(xì)節(jié)能夠抓住人的眼球啡邑，比如用于浮動元素的無功能的導(dǎo)航點(diǎn)贱勃。浮動的裝飾性圖標(biāo)，下劃線谤逼，幾何形狀以及隨便變得越來越流行贵扰，同時他們也為許多設(shè)計(jì)添加了有趣之筆。它們可以作為平衡者流部，分割者或者是內(nèi)容的導(dǎo)航戚绕，有點(diǎn)像小小用處的注解。

雷區(qū)

1. 小細(xì)節(jié)在吸引注意力和愉悅用戶上非常有效枝冀，但是也能不經(jīng)意的與內(nèi)容導(dǎo)航之類的發(fā)生競爭舞丛。過多的細(xì)節(jié)即便能幫助用戶導(dǎo)航和閱讀內(nèi)容但卻更會對分級結(jié)構(gòu)造成巨大的混亂和迷惑。這樣的小細(xì)節(jié)就是無意義的數(shù)碼噪音和畸變。
2. 小細(xì)節(jié)通常用于裝飾元素佛猛，在文字或者圖片的旁邊氓癌，有時會在其上作為遮罩。有時會跟隨滾動或者鼠標(biāo)指針吨凑。當(dāng)然，它們緊緊地抓住了我們的注意，有利有弊鸵钝。我們需要明白糙臼，在使用小細(xì)節(jié)是，要注意不能危機(jī)閱讀恩商。

15046037833509.jpg

Do

• 使用小細(xì)節(jié)時要注意到內(nèi)容变逃，確保可讀性不會被影響到怠堪。
• 使用小細(xì)節(jié)作為提示來轉(zhuǎn)移注意里或者分割主要內(nèi)容揽乱。
• 使用極簡清楚地布局來平衡小細(xì)節(jié)。
• 通過對小細(xì)節(jié)增加文本研叫，使他們與正文相關(guān)聯(lián)锤窑。

Don't

• 不要在內(nèi)容很多的頁面上使用小細(xì)節(jié)
• 避免使用隨機(jī)的沒有目的的細(xì)節(jié)，否則并不能幫助你講述你的故事嚷炉。
• 盡力從主要的用戶指引中分離出無用的細(xì)節(jié)渊啰。
• 將小細(xì)節(jié)處理為你設(shè)計(jì)中的小驚喜，而不是設(shè)計(jì)中的主要元素申屹。

提名表揚(yáng)

小型版面設(shè)計(jì)

15046649118609.jpg

小型的版面設(shè)計(jì)感覺起來更加經(jīng)典绘证。這種設(shè)計(jì)給其他元素留下了呼吸的空間，并且允許眼睛在四周觀望哗讥。使用小一些的字體嚷那，給予了不需要通過協(xié)調(diào)空間就能創(chuàng)造出極其有趣的對比的機(jī)會。

反面來看杆煞，小型版面設(shè)計(jì)會在大塊的文字中迷失魏宽，或者會阻礙內(nèi)容的閱讀。使用小型排版一定要小心---僅在短段落中决乎。同時队询，盡量不適用小于 13 pt 的字號。

創(chuàng)新型導(dǎo)航

15046654903201.jpg

創(chuàng)新型導(dǎo)航樣式已經(jīng)變得越來越流行构诚，隨著越來越多的設(shè)計(jì)師想要嘗試革新蚌斩。不同的導(dǎo)航樣式可以讓內(nèi)容較少的網(wǎng)頁變得更加有趣，或者可以幫助用戶通過特殊途徑來導(dǎo)航范嘱。

創(chuàng)新型導(dǎo)航樣式如果足夠簡潔送膳，就能夠變得很愉悅并且很有用，可以促使用戶與其交互丑蛤。我們要意識到叠聋，這并不是適合所有設(shè)計(jì)也并不適合所有用戶，在我們使用前測試其可用性是十分重要的受裹。

動畫

15046669178714.gif

動畫的使用為 UI 設(shè)計(jì)帶來了無限可能晒奕。動畫能夠給予有創(chuàng)造的變換以及增強(qiáng)體驗(yàn)。動畫能夠?yàn)槿魏卧O(shè)計(jì)添加附加的層名斟，在正確的地方吸引注意力脑慧。動畫能夠豐富極簡的排版，增強(qiáng)敘事及用戶吸引能力砰盐。

過多的使用動畫會導(dǎo)致網(wǎng)頁看起來很重并且會增加載入時間闷袒，從而考研用戶的耐心。錯誤和不必要的動畫同時會迷惑岩梳，擾亂甚至誤導(dǎo)用戶囊骤，一定要謹(jǐn)慎使用。

15046681711910.gif

結(jié)論

在數(shù)不盡的網(wǎng)頁和產(chǎn)品中冀值，設(shè)計(jì)者一直想要他們的設(shè)計(jì)能夠緊跟潮流保持新鮮也物。但是趨勢也可能是十分危險并且并不是萬能的。如何明智的根據(jù)內(nèi)容列疗、用戶滑蚯、以及目標(biāo)來決定設(shè)計(jì)方案，這才是我們想要達(dá)到的目的抵栈。

最后也是最重要的告材，我們不能一味追求外觀的好看而犧牲用戶體驗(yàn)。