今天我們的話題是網(wǎng)站建設(shè)時如何設(shè)計搜索框，可能有的小伙伴就會說了：“搜索框？不就是一個長方體輸入框加上搜索按鈕最后放在頁面右上角就可以了嘛！有什么好講的。”當然啦，大多數(shù)網(wǎng)站的搜索框看似就是這樣簡單的模式，但是往往越是簡單的東西越難設(shè)計好，設(shè)計搜索框要考慮到很多方面的因素，并不是套用同一個模板就可以的。

我們先從搜索框的尺寸先說起，雖然看似所有的搜索框都長得大同小異，但是只要仔細觀察就可以發(fā)現(xiàn)不同網(wǎng)站搜索框的尺寸是不同的，有的很長，有的很短。一般來說，搜索框的尺寸要與用戶在這個網(wǎng)站習慣的輸入長度相匹配。

舉個例子，像CNN這種內(nèi)容導(dǎo)向型的新聞資訊網(wǎng)站和淘寶這種電子商務(wù)企業(yè)網(wǎng)站就會選擇比較長的輸入框，位置也會選擇左上角，一方面是因為用戶一般會輸入比較長的搜索內(nèi)容，如果搜索框太短就會看不見前面的輸入部分，另外一方面是因為搜索是這些網(wǎng)站的首要功能，左上角也是視覺注意力的黃金位置。

而像一些對搜索功能不太重視的網(wǎng)站就會選擇短一點輸入框，位置也會轉(zhuǎn)到不那么顯眼的右上角。

如果你是新站長不知道要設(shè)計多長，那么就先做一個可以容納27 個字符的輸入框，后面再慢慢根據(jù)用戶輸入習慣調(diào)整輸入框的尺寸。

接下來談?wù)勊阉骺虻奈恢?，右上角和左上角是最常見也是最符合用戶習慣的兩個位置，放在哪一邊也是有講究的。如果你的網(wǎng)站操作十分依賴搜索功能，那么你最好將你的搜索框的尺寸放大并放在網(wǎng)頁的左上角（或者居中），這樣可以讓用戶一眼就看到。如果搜索功能不是很重要，那么你可以把它放在右上角，這也是符合用戶習慣但相對左上角來說聚焦能力弱一點的位置。

如果技術(shù)上允許，可以給搜索框添加兩個功能。第一個就是讓搜索框能夠跟隨輸入長度變長，這樣可以避免用戶在輸入大量內(nèi)容時看不到前面內(nèi)容的不便，又可以節(jié)省空間，讓頁面布局更加平衡。第二個功能就是讓用戶可以通過回車鍵提交搜索，很多用戶都習慣用回車鍵觸發(fā)搜索，這樣設(shè)計就更加人性化了。

各位正在制作網(wǎng)站的新站長們，在設(shè)計搜索框時不要掉以輕心，任何細節(jié)都有可能毀掉整個網(wǎng)站設(shè)計，一定要不斷實踐、不斷發(fā)現(xiàn)問題并優(yōu)化設(shè)計才能真正做好一個網(wǎng)站！網(wǎng)站搜索框也可以不用自己設(shè)計，那就是直接用凡科建站的網(wǎng)站模板，網(wǎng)站也能快速搭建出來。