提升網(wǎng)站平板體驗的6個技巧
本設(shè)計中，大字體和大點(diǎn)擊目標(biāo)的體驗很好，即使在平板電腦上縮小后，體驗依然不錯。
而在另一些設(shè)計中，文字太小無法閱讀，鏈接太接近容易誤操作，無形中增加了操作時間、復(fù)雜度以及體驗上的挫敗感。糟糕的體驗下，用戶將快速流失。
本設(shè)計中的小字體和小觸摸目標(biāo)被證明在平板電腦上難以閱讀和使用。
一種理想選擇可能是：重新設(shè)計你的網(wǎng)站，讓它能針對各種不同設(shè)備進(jìn)行自適應(yīng)布局，但時間和成本可能會使你無法完成這樣的全面翻新。然而你還有其他選擇。本文給出一些技巧和方法，能快速幫助你提升網(wǎng)站的平板用戶體驗，只需幾個簡單的變化，你今天就可以做到!
提升網(wǎng)站點(diǎn)擊愉悅感的6個簡易技巧
只需一些細(xì)微的CSS調(diào)整即可大大提升平板電腦的可讀性和導(dǎo)航精準(zhǔn)度。
1、增加普通按鈕和立即行動按鈕(calls-to-action)的大小和外邊距(margin)。大多數(shù)人的手指點(diǎn)擊區(qū)域約為45-57像素，千萬不要讓用戶費(fèi)勁地尋找和點(diǎn)擊“購買”按鈕。
2、鏈接和立即行動按鈕應(yīng)應(yīng)顯示為可點(diǎn)擊態(tài)，而不是hover態(tài)。在平板電腦上，hover態(tài)是不存在的。文本鏈接應(yīng)當(dāng)用清晰、對比強(qiáng)烈的顏色。不要害怕使用下劃線來表示默認(rèn)鏈接狀態(tài)。
3、增加字體大小來提升可讀性。在原有字體上，增加一些字體像素值(px值)或是提升字體顯示百分比(em值)都會好很多。正所謂事半功倍。
4、增大導(dǎo)航菜單項的內(nèi)邊距(padding)。可以試著先增加5-10個像素，如果設(shè)計允許的話，也可增加更多內(nèi)邊距。
5、增大頁面和內(nèi)容塊的外邊距(margin)。這一改進(jìn)可以提升整體易讀性，降低視覺復(fù)雜度。相比擁擠的網(wǎng)站來說，增加留白能營造更加易用的印象。
6、增加表單輸入框的大小和間距。這樣用戶將更容易點(diǎn)擊并輸入信息。改進(jìn)表單樣式，可以極大提升網(wǎng)站的轉(zhuǎn)化率。
另外，這些簡單的CSS變化很可能也將利于你的桌面用戶。當(dāng)然，按照慣例，正式上線前，要確保在所有平臺和瀏覽器上測試改動過的內(nèi)容。
具有點(diǎn)擊愉悅感的網(wǎng)站案例
下面幾個網(wǎng)站很好地體現(xiàn)了點(diǎn)擊愉悅感。你可以在平板電腦和桌面上都體驗下這些網(wǎng)站。請注意，這些網(wǎng)站并未針對平板電腦使用不同的布局或版本。然而，同一網(wǎng)站在兩個平臺上看起來都不錯，而且操作也都很方便。
Fitbit 采用了合理的`留白空間，外加大號字體和大尺寸觸摸目標(biāo)。
Comcast 的網(wǎng)站提供了大號字體和間距。你還可以注意到清晰標(biāo)識的鏈接、分布合理的導(dǎo)航和輔助導(dǎo)航，以及大且易用的表單輸入框。
雖然 Skillshare 網(wǎng)站的主體文字略小，但它確實(shí)提供了點(diǎn)擊區(qū)域大且易用的導(dǎo)航按鈕和立即行動按鈕，此外，內(nèi)容區(qū)域周圍也留有了足夠空間。
Apple 官網(wǎng)有點(diǎn)擊愉悅感并不奇怪。畢竟，他們是手持式觸摸屏設(shè)計的先鋒。
【提升網(wǎng)站平板體驗的6個技巧】相關(guān)文章：
平板電腦的挑選技巧02-07
平板電腦選購的技巧分享07-24
平板電腦屏幕的使用技巧07-25
蘋果平板電腦的使用技巧02-06
平板電腦常見故障與平板電腦操作技巧大全07-26
蘋果平板電腦使用技巧簡介02-06
蘋果iPad平板電腦的使用技巧01-26
新手平板杠鈴臥推技巧05-15