建站常識
細節(jié)設計之美:擴大可操作區(qū)域
2009-08-01 22:32:00
從 Google 的一個細節(jié)說起:
整個虛線框都是“Next”的可點擊區(qū)域??此撇唤浺?,卻直接提升了細節(jié)的可用性。其它頁碼也巧妙地和上面的字母 o 一起組成可點擊區(qū)域。與百度和 Bing 的翻頁相比,Google 優(yōu)勝。
再來看 Twitter 的注冊頁面:
很大很舒服。到了這個頁面,瞎逛都會忍不住去填寫填寫。提示文字也恰到好處,能提供幫助,不惱人。
我喜歡 Google. 來看下 Google Docs 中的顏色選擇:
和其它富文本編輯器相比,Google 的顏色小框框大了不少。對比 FCKEditor 的:
再來看一個看起來很美的設計,TinyMCE 的顏色選擇:
注意 A 旁邊的下拉小箭頭:只有點擊到小箭頭時,才能打開顏色選取框。點擊在 A 上時,是取當前色進行設置。這是跟微軟學的:
從功能上講,微軟的處理方式很強大。作為客戶端軟件的 Office, 按鈕相對較大,重復使用同一顏色的頻率也較高,這樣設計無可厚非。但作為 Web 上的富文本編輯器,個人覺得沒必要如此設計。這會讓小箭頭的可操作區(qū)域很少,影響可用性。
再提一個按鈕過小的極品例子,YUI 的編輯器:
用鼠標改變字體大小,必須點擊到上下箭頭上,這讓我這個“高級用戶”都很難操作成功。曾經將 YUI 的編輯器應用在淘寶上,結果這個細節(jié),讓用戶非常惱火。最后修改成下拉框才好些。
再說說翻頁。記得 Twitter 之前就一個大大的“More”按鈕(文案可能有出入,之前沒截圖,遺憾),非常好用。現(xiàn)在則干脆采用了自動加載,當用戶的滾動條拉到一定程度時,自動加載下一頁的內容。
在 Firefox 下,對于自動翻頁,有一個非常好用的擴展:AutoPager. 自從裝上它,我很少很少需要去點擊翻頁了。(懶人創(chuàng)造世界哪,最喜歡這種讓人變懶的小工具)
剛又瞎逛了一圈,再給幾個例子:
上圖是新版 Yahoo 首頁的注冊鏈接。注意“New here?”, 閑著也是閑著,不如放進鏈接里,擴大可點擊區(qū)域。
上圖是最近剛上線測試的“我的淘寶”。注意“已買到的寶貝”左邊的小箭頭,可點擊區(qū)域很小。個人覺得這些收縮小按鈕,都屬于看起來很美但實際上基本無用的雞肋設計。
最后,很想和各位朋友討論一個問題:
Twitter 的自動加載,F(xiàn)irefox 自動加載下一頁的 AutoPager 擴展,這種交互方式,究竟好不好?適用于哪些場景?
比如淘寶的搜索結果頁面,如果采用自動加載,會帶來哪些弊端?
對于 Twitter 的自動加載,我有一個想法是,保留“More”按鈕,同時在用戶滾動滾動條時,預加載下一頁的內容,但僅當用戶點擊“More”時,才將加載好的下一頁內容顯示出來。
應用在淘寶上的話,也可以讓搜索結果頁僅保留一個“下一頁”按鈕。當用戶滾動時,預加載內容;當用戶點擊“下一頁”時,則立刻展現(xiàn)。這樣,可以做到動態(tài)更新廣告,能減少用戶等待頁面加載的時間,同時能盡可能的避免無謂的加載。
不知道大家怎么看?說說你的想法,歡迎討論。
原文:http://lifesinger.org/blog/2009/07/minor-beauty/
近期更新
- [2023-06-25 23:22:29] 優(yōu)秀網站設計的五大特點
- [2023-04-27 14:05:55] Html 5 響應式網站設計制作
- [2023-04-10 11:07:30] 網站建設制作流程知多少
- [2022-10-14 10:11:30] 做網站設計應該更看重框架搭建還是視覺觀感?
- [2022-08-09 15:57:48] 以“產品”思維搭建網站!
- [2022-08-08 09:12:57] 一家公司的網站應該有哪些板塊內容?
- [2022-08-05 09:28:06] 企業(yè)網站建設為什么要設置新聞板塊?
- [2022-07-04 15:58:06] 網站首頁設計的好看,這個網站就成功了一大半!
- [2022-05-20 09:34:19] 網站后臺管理系統(tǒng)是什么?有什么作用?
- [2022-05-17 11:29:32] 作為消費者,應該如何選擇一家水平高的網站建設公司
- [2022-05-17 11:27:01] 高端網站定制與模板化網站應該怎么選擇?
- [2022-04-22 16:00:41] 現(xiàn)在高端的網站設計都有哪些新的趨勢?
延伸閱讀
- [2009-06-23 17:56:00] 電子商務搜索引擎的細節(jié)設計
- [2010-06-17 08:14:00] 設計上的小細節(jié)