應(yīng)該從你的網(wǎng)站設(shè)計(jì)計(jì)劃中剔除的八個(gè)UI元素

你的網(wǎng)頁設(shè)計(jì)是否開始看起來顯得有些陳舊？一些舊的或是過時(shí)的用戶界面元素可能會使得網(wǎng)站的整體感覺比實(shí)際經(jīng)歷了更長時(shí)間的歲月“磨煉”。

今天，我們來看看你應(yīng)該從你的網(wǎng)站設(shè)計(jì)計(jì)劃中剔除的八個(gè)UI元素。但這并不是我們今天唯一要談的，每個(gè)“不要”后面我們都會跟上一個(gè)建議，來使你的網(wǎng)站更現(xiàn)代化。我們會盡快找到最新的設(shè)計(jì)！

1.“扁平”按鈕

一般來說，平面設(shè)計(jì)的最大問題之一是一切都過于扁平化了。對于一些用戶來說，這使得元素難以區(qū)分，并使交互變得困難。非純粹的“扁平化”和“扁平化 2.0”成為解決這個(gè)問題的一個(gè)解決方案，來幫助用戶更好地發(fā)現(xiàn)和與UI元素交互。

嘗試這樣做：添加一些動(dòng)畫或懸停效果，給平面樣式的按鈕增加更多的重點(diǎn)。如果你喜歡扁平的外觀，請考慮一個(gè)費(fèi)純粹的扁平化設(shè)計(jì)方案作為替代或超大的按鈕，以便用戶能夠輕易的找到并與之交互。

2.文字轉(zhuǎn)盤

旋轉(zhuǎn)或者是滑塊很容易成為設(shè)計(jì)師之間辯論的主題。它們是否可用，而且是否可以工作良好，往往很大程度上依賴于內(nèi)容。

顯示長串信息的文本旋轉(zhuǎn)樣式或滑塊并不是很實(shí)用，因?yàn)檫@些選項(xiàng)都不鼓勵(lì)用戶點(diǎn)擊。

嘗試這樣做：如果要顯示多個(gè)項(xiàng)目，請使用此技術(shù)作為少量視覺效果的顯示，但不要將其用作行動(dòng)方式，也不要將其用于按照順序讀取的文本塊 。將動(dòng)作元素放在屏幕上的其他位置，直接且易于理解的動(dòng)作。

3.內(nèi)容的鏈接

在網(wǎng)站設(shè)計(jì)中通過一步步的點(diǎn)擊以查看更多信息是過去式了。用戶更希望能夠一目了然地查看信息，而不用逐級繁瑣的點(diǎn)開各個(gè)頁面。

如果說你可以以不用導(dǎo)致用戶離開初始位置的方式就可以更好的顯示信息，那么你應(yīng)該就這樣做。

嘗試這樣做：popover在其App的網(wǎng)頁設(shè)計(jì)中，其展示特定信息的位置與一個(gè)小UI元素相互關(guān)聯(lián)。當(dāng)用戶激活動(dòng)作時(shí)，它可以以通知的樣式元素出現(xiàn)（然后消失）。而且Popovers有一個(gè)獨(dú)具一格的特色功能，它提供無導(dǎo)航瀏覽功能。

4.基于Flash的任何東西

Flash我們只談一件事：如果你仍然在網(wǎng)站上使用它，請停止繼續(xù)這么做。

嘗試這樣做：HTML5不再是什么新的技術(shù)，因?yàn)槟壳八呀?jīng)足夠普及了，并且它也能夠提供音頻格式，視頻和其他多媒體所需的所有功能（此外，它可以在所有設(shè)備上使用）。

5.長陰影圖標(biāo)

在網(wǎng)頁設(shè)計(jì)的所有流行趨勢中，這是相當(dāng)短暫的。雖然你仍然可以在一些網(wǎng)站中找到一些拖著長長陰影的圖標(biāo)或按鈕，但風(fēng)格其實(shí)已經(jīng)有過時(shí)的感覺了。

嘗試這樣做：嘗試使用平面樣式創(chuàng)建一個(gè)按鈕，并提供一些陰影或紋理。這些微妙的效果使得相互作用的元素跟容易關(guān)聯(lián)和表達(dá)，同時(shí)保持簡單的美學(xué)，不要影響其他視覺效果。

6.大型菜單

雖然大型菜單可以幫助用戶瀏覽具有大量內(nèi)容的網(wǎng)站，但它們在較小的設(shè)備上不實(shí)用。這些超大菜單的問題是，通常有這么多的內(nèi)容，用戶不知道下一步該做什么，這可能就會導(dǎo)致用戶放棄繼續(xù)瀏覽網(wǎng)站。

另一個(gè)問題是，許多設(shè)計(jì)旨在在懸停時(shí)打開，然后掩蓋大部分屏幕。這可能會導(dǎo)致用戶混亂，并進(jìn)一步分散用戶。

嘗試這樣做：使用強(qiáng)大的，直接表現(xiàn)在頁面上的鏈接按鈕來引導(dǎo)用戶瀏覽相關(guān)的內(nèi)容。讓用戶輕松查找和查看設(shè)計(jì)中的圖案，從一個(gè)元素或一個(gè)內(nèi)容到下一個(gè)元素或內(nèi)容。

如果你覺得必須要使用導(dǎo)航功能的話，請考慮全屏滑出菜單，這種菜單可以被有意點(diǎn)擊展開，并且可以輕松隱藏。

7.太多的社交媒體圖標(biāo)

在這一點(diǎn)上，用戶知道如何在社交媒體上分享內(nèi)容——即使整個(gè)頁面上沒有幾十個(gè)圖標(biāo)。所有這些圖標(biāo)可能會分散你的網(wǎng)頁設(shè)計(jì)中的內(nèi)容。

更糟糕的是，具有各種不同渠道的各種顏色和形狀的社交媒體圖標(biāo)對你的設(shè)計(jì)來說過于具有視覺上的壓倒性，這些圖標(biāo)正在扼殺你的設(shè)計(jì)。

嘗試這么做：添加自定義社交媒體共享按鈕到你的頁眉或頁腳，并保持他們的內(nèi)容。以微妙的方式進(jìn)行設(shè)計(jì)，這樣不會將用戶從設(shè)計(jì)和訪問網(wǎng)站的實(shí)際原因中分散出去。

或者做得更大膽一點(diǎn)，考慮把它們?nèi)砍废聛?。分析一下，?shí)際上有多少人會使用分享按鈕呢？

8.“偽”動(dòng)效

設(shè)計(jì)是應(yīng)該吸取用戶，但是如果因?yàn)樵S多可笑的動(dòng)作，我覺得不應(yīng)該。

嘗試這樣做：有目的的設(shè)計(jì)元素。給用戶一個(gè)可以專注于設(shè)計(jì)本身的干凈的界面。每個(gè)屏幕應(yīng)該包括不超過一個(gè)可操作的項(xiàng)目（除社交媒體共享選項(xiàng)之外）。說清楚用戶應(yīng)該做什么，并設(shè)計(jì)一個(gè)可以幫助他們完成這個(gè)目標(biāo)的元素。

卡片式元素是一個(gè)很好的選擇。因?yàn)樗葮?biāo)準(zhǔn)按鈕大，所以它們提供了大量可點(diǎn)擊的空間和信息。這樣可以方便用戶查找并點(diǎn)擊相應(yīng)的操作。

總結(jié)

你是否在你的網(wǎng)站設(shè)計(jì)中使用了這些錯(cuò)誤的UI？通過簡單的修復(fù)可以幫助你更新你的設(shè)計(jì)，同時(shí)使其更易于使用。