細節規劃之美:擴展可操作區域

從 Google 的一個細節說起：

整個虛線框都是“Next”的可點擊區域?？此撇唤浺?，卻直接提升了細節的可用性。其它頁碼也巧妙地和上面的字母 o 一同組成可點擊區域。與百度和 Bing 的翻頁相比，Google 優勝。

再來看 Twitter 的注冊頁面：

很大很舒服。到了這個頁面，瞎逛都會忍不住去填寫填寫。提示文字也適可而止，能提供協助，不惱人。

我喜愛 Google. 來看下 Google Docs 中的色彩挑選：

和其它富文本編輯器相比，Google 的色彩小框框大了不少。比照 FCKEditor 的：

再來看一個看起來很美的規劃，TinyMCE 的色彩挑選：

留意 A 周圍的下拉小箭頭：只要點擊到小箭頭時，才干翻開色彩選取框。點擊在 A 上時，是取當前色進行設置。這是跟微軟學的：

從功能上講，微軟的處理方式很強壯。作為客戶端軟件的 Office, 按鈕相對較大，重復使用同一色彩的頻率也較高，這樣規劃無可厚非。但作為 Web 上的富文本編輯器，個人覺得沒必要如此規劃。這會讓小箭頭的可操作區域很少，影響可用性。

再提一個按鈕過小的極品比如，YUI 的編輯器：

用鼠標改動字體大小，必須點擊到上下箭頭上，這讓我這個“高檔用戶”都很難操作成功。從前將 YUI 的編輯器應用在淘寶上，成果這個細節，讓用戶十分惱火。最后修改成下拉框才好些。

再說說翻頁。記得 Twitter 之前就一個大大的“More”按鈕（文案可能有出入，之前沒截圖，遺憾），十分好用?，F在則干脆采用了主動加載，當用戶的翻滾條拉到一定程度時，主動加載下一頁的內容。

在 Firefox 下，關于主動翻頁，有一個十分好用的擴展：AutoPager. 自從裝上它，我很少很少需要去點擊翻頁了。（懶人發明世界哪，最喜愛這種讓人變懶的小工具）

剛又瞎逛了一圈，再給幾個比如：

上圖是 Yahoo 首頁的注冊鏈接。留意“New here?”, 閑著也是閑著，不如放進鏈接里，擴展可點擊區域。

上圖是“我的淘寶”。留意“已買到的寶物”左面的小箭頭，可點擊區域很小。個人覺得這些收縮小按鈕，都歸于看起來很美但實際上基本無用的雞肋規劃。

最后，很想和各位朋友評論一個問題：

Twitter 的主動加載，Firefox 主動加載下一頁的 AutoPager 擴展，這種交互方式，究竟好不好？適用于哪些場景？
比如淘寶的查找成果頁面，假如采用主動加載，會帶來哪些壞處？

關于 Twitter 的主動加載，我有一個主意是，保存“More”按鈕，一起在用戶翻滾翻滾條時，預加載下一頁的內容，但僅當用戶點擊“More”時，才將加載好的下一頁內容顯示出來。

應用在淘寶上的話，也能夠讓查找成果頁僅保存一個“下一頁”按鈕。當用戶翻滾時，預加載內容；當用戶點擊“下一頁”時，則立刻展現。這樣，能夠做到動態更新廣告，能減少用戶等待頁面加載的時刻，一起能盡可能的防止無謂的加載。

不知道我們怎么看？說說你的主意，歡迎評論