DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 關於網頁技巧 >> 設計理論:網頁輸入框的大小
設計理論:網頁輸入框的大小
編輯:關於網頁技巧     

網頁制作poluoluo文章簡介:開始的時候我寫了個標題:輸入框的高度,再一想單講輸入框的高度實際上是沒法限定的,輸入框的高度取決於需要輸入的文本的多少、輸入框的寬度這2個因素。

     開始的時候我寫了個標題:輸入框的高度,再一想單講輸入框的高度實際上是沒法限定的,輸入框的高度取決於需要輸入的文本的多少、輸入框的寬度這2個因素。
      我簡單的把輸入框歸為以下幾類:搜索、表單、地址欄、狀態欄類;微博、IM工具聊天輸入域、短評輸入域、自我介紹;博客文章編輯、大段文字輸入。

      對於第一類這樣的輸入框似乎是沒有什麼規則可依的,google.com、g.cn、baidu.com等等這些搜索引擎的輸入框貌似都是隨性而為的?
      好事的對比了一下:google最多允許輸入2048個字符而百度最多只能輸入100個字符,這也導致了google的輸入框要明顯比較百度寬許多;g.cn的輸入框高度現在已經調整到和百度一致了而google.com還是系統默認的25px。
      我的猜想是這樣的:g.cn的調整在於在同等px下漢字要比英文略高一點,因而google.com采用了系統默認的25px高度,而g.cn後來意識到 這個問題調整到了跟百度一樣的28px?但是就搜索引擎而言,關鍵詞一般都不會太長為什麼google.com的限度是2048個字符呢?木有想明白
      對於第三類大段文本的輸入框實際上也沒有什麼可說的,簡單說就是刨去必要的功能按鍵之後其他的區域都是為輸入服務的,如果文本長度再大的話就采用下拉條的方式。這個新紙模型大概是來源於我們的紙質筆記本了。真正的用戶體驗往往就在這一象素上!

      想說一說第二類短文本的輸入框現象。
      微博類產品中twitter的輸入框是長而矮的而國內的類twitter產品是相對較寬較高的。這還是符合我之前的猜測,英文與漢字的區別。
      關於輸入文字超出限制的處理上:twitter采用的是“報警”式,顯示目前可輸入字符數目為“-XX”,(很BT的測試了一下,這個XX應該是可以無限大的,只是在超出10W字符之後,我的浏覽器卡死…..)但是你仍舊可以繼續輸入;國內的Ucenter采用的是“限制”式,當字符達到上限後不允許再輸入任何字符。
      個人覺得Twitter、meme等這樣的報警式做法相對ucenter而言欠妥,當超過字數限制的時候應該果斷的限制用戶繼續輸入。相對而言Plurk采用的是改進式的“報警”,plurk會把多出來的字符標紅,並提示你需要刪除多少個。
      在這所有的微博類產品中,plurk的輸入框我覺得是給我體驗最好的。初始輸入框是系統默認的34px,隨著輸入文本的增多輸入框的高度隨之提高,當文本繼續增加到達限定的100px後出現下拉條。
      後來MSN很聰明的選定了這個微博產品進行山寨,不過很可惜的是沒有山寨到其精神,MSN聚酷的輸入框高度是固定死的,隨著內容的增加框內的文本根本無法再閱讀。

 

      在IM方面,QQ采用的是類twitter的模式而Gtalk采用的是類plurk的模式,不過經過測試發現,當輸入的文本到達Gtalk允許的最高限度後,不會出現下拉條,這點上蠻意外的。
     
      總結:
      輸入框的高度應該由系統規定用戶可輸入的文本來確定,不可能一個只允許輸入150個字的論壇介紹搞一個高的出奇的輸入框吧。
      對於有字數限制的輸入框,當用戶輸入的字數達到上限時應該強制不允許用戶繼續再輸入或者警示出超過的字符內容並告知刪除。

在英文界面和中文界面上,由於字體構造的差異會導致UI設計的差異。而這差異往往就在一個象素之間,但是真正的用戶體驗往往就在這一象素上!

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved