網(wǎng)站設(shè)計(jì)中要注意的細(xì)節(jié)

網(wǎng)站設(shè)計(jì)中要注意的細(xì)節(jié)，對(duì)于一個(gè)網(wǎng)站來(lái)說(shuō)，最重要的自然是用戶體驗(yàn)。從我看來(lái)，用戶體驗(yàn)其實(shí)就是一對(duì)細(xì)節(jié)的集合。只有我們這些細(xì)節(jié)強(qiáng)迫癥患者，才格外追求這個(gè)。以下是網(wǎng)站設(shè)計(jì)中要注意的細(xì)節(jié)的具體介紹。

所謂用戶體驗(yàn)：一句話就是——讓用戶用著舒服

如果讓我想“讓用戶用著舒服”的第一點(diǎn)，就是“讓用戶感覺(jué)著舒服”。可是這一點(diǎn)就是常常被忽視的細(xì)節(jié)。下面我列舉出一些讓用戶用著舒服的要素。很多是自己在開發(fā)中感受到的，可能并不完整。

UI設(shè)計(jì)維持同一風(fēng)格。

具體來(lái)說(shuō)就是，網(wǎng)站的界面元素在整個(gè)網(wǎng)站中具有一致性。比如說(shuō)“按鈕”，這個(gè)非常重要的界面元素。登錄界面的“登錄”“注冊(cè)”，發(fā)帖界面的“回帖”“發(fā)布”，還有“確認(rèn)訂單”。可以看出它們是具有相似的功能的——submit。那么它們?cè)谕庥^上就要保持一致。

UI一致可以讓用戶憑著自己的直覺(jué)找到所需的功能，減少用戶的網(wǎng)站使用學(xué)習(xí)成本。

功能收放有度。

我的意思是指在網(wǎng)站首頁(yè)和網(wǎng)站的其他位置中，功能按鈕的折疊和展示情況。有些不常用的按鈕一般不需要展示，而是折疊到某個(gè)菜單中。而將常用的功能直接設(shè)為鏈接或按鈕。這點(diǎn)在制作導(dǎo)航條的時(shí)候特別重要(因?yàn)閷?dǎo)航條會(huì)出現(xiàn)在每一個(gè)頁(yè)面上)。這個(gè)不僅與網(wǎng)頁(yè)編程，而且與網(wǎng)頁(yè)內(nèi)容設(shè)計(jì)關(guān)系也很大。比如導(dǎo)航欄一般推薦放置3~4個(gè)一級(jí)導(dǎo)航，如果你有十多個(gè)分類，建議再分到幾個(gè)更大的分類里。導(dǎo)航欄排十多個(gè)鏈接并不是很好看的。

不要讓同一元素多次出現(xiàn)在頁(yè)面上，尤其是這一元素很顯眼的時(shí)候。比如某網(wǎng)站有很多欄目，首頁(yè)是這些欄目?jī)?nèi)容的推薦，網(wǎng)頁(yè)上充斥著大量的“查看更多>>”按鈕，(每個(gè)欄目都有一個(gè)，邊上有個(gè)排行榜又來(lái)一個(gè)。一個(gè)網(wǎng)頁(yè)上十二三個(gè)大按鈕還都長(zhǎng)得一樣，看多了就感覺(jué)惡心了。)而且按鈕元素還非常大。給人感覺(jué)特別不好。

網(wǎng)站要簡(jiǎn)潔，把你復(fù)雜的功能隱藏起來(lái)，等用戶需要的時(shí)候再出來(lái)。而不是平鋪在頁(yè)面上，不管用不用都在那。這才是設(shè)計(jì)。

確定頁(yè)面層疊順序。

如果你的網(wǎng)頁(yè)需要多個(gè)層，上面的層有可能會(huì)覆蓋到下面，這時(shí)候要特別小心設(shè)置z-index值。不要造成遮擋的問(wèn)題。比如我就見過(guò)某網(wǎng)站彈出對(duì)話框，一層透明圖片層把按鈕蓋住了，于是完全無(wú)法操作對(duì)話框按鈕。好吧，這是比較大的bug，還有一些小細(xì)節(jié)，比如某最近改版了的彈幕視頻網(wǎng)站，它的“返回頂部”按鈕蓋在了評(píng)論區(qū)域迷你播放器的上面。于是視頻部分被遮擋。果殼以前也出現(xiàn)過(guò)類似問(wèn)題。當(dāng)編輯器過(guò)長(zhǎng)的時(shí)候，比如我這樣的一篇長(zhǎng)回答。編輯器的頂部工具欄會(huì)被固定在頁(yè)面頂部。這是個(gè)非常好的照顧用戶的設(shè)計(jì)。然而果殼當(dāng)時(shí)出了個(gè)bug，他們忘記了上面的導(dǎo)航欄，于是編輯器工具欄蓋在了導(dǎo)航欄的上面。

精心布置廣告位和推薦位。

網(wǎng)站的用戶總是不喜歡廣告的，但是畢竟廣告是網(wǎng)站的收入主要來(lái)源。現(xiàn)在網(wǎng)頁(yè)廣告屏蔽軟件也比較多，如果廣告太難看/影響操作，就難逃被用戶屏蔽了。廣告位/推薦位放置最重要的是顯眼。比顯眼更重要的是不能影響用戶的使用。沒(méi)有人喜歡右下角彈出廣告。

廣告最好占據(jù)頁(yè)面的一個(gè)固定的位置，不要放在浮動(dòng)層，千萬(wàn)不要彈窗。廣告顯示的時(shí)候不要影響用戶的操作，比如以前的網(wǎng)易、騰訊(網(wǎng)易騰訊這么大，我就黑一黑吧，不說(shuō)某網(wǎng)站了)廣告，會(huì)把整個(gè)網(wǎng)頁(yè)的header部分向下壓，而且有個(gè)動(dòng)畫。更郁悶的是，動(dòng)畫是在載入后才播放的。于是就會(huì)出現(xiàn)——我正要點(diǎn)擊某個(gè)鏈接，廣告出來(lái)了，廣告的位置占據(jù)了我原來(lái)鼠標(biāo)的位置，我點(diǎn)到廣告了。這種廣告會(huì)遭致用戶反感，不是大網(wǎng)站或流氓網(wǎng)站千萬(wàn)不要這么干，會(huì)把自己搞死的。

      注：尊重原創(chuàng)文章,轉(zhuǎn)載請(qǐng)注明出處和鏈接 http://www.dedgn.cn/news-id-56308.html 違者必究！部分文章來(lái)源于網(wǎng)絡(luò)由培訓(xùn)無(wú)憂網(wǎng)編輯部人員整理發(fā)布,內(nèi)容真實(shí)性請(qǐng)自行核實(shí)或聯(lián)系我們，了解更多相關(guān)資訊請(qǐng)關(guān)注網(wǎng)頁(yè)制作頻道查看更多，了解相關(guān)專業(yè)課程信息您可在線咨詢也可免費(fèi)申請(qǐng)?jiān)囌n。關(guān)注官方微信了解更多：150 3333 6050