面對(duì)紛繁復(fù)雜的網(wǎng)頁(yè)內(nèi)容件豌，用戶通過(guò)查詢關(guān)鍵詞表達(dá)需求，期望在響應(yīng)的查詢結(jié)果中快速獲取準(zhǔn)確的信息和流暢的用戶體驗(yàn)控嗜。用戶與網(wǎng)絡(luò)世界的萬(wàn)千聯(lián)系都是從搜索開始的茧彤。搜索框之于用戶就像是用戶與應(yīng)用或網(wǎng)站之間的對(duì)話窗口。小小的搜索框傳遞著用戶與網(wǎng)站疆栏、應(yīng)用程序曾掂、甚至與整個(gè)世界千絲萬(wàn)縷的聯(lián)系。如網(wǎng)頁(yè)設(shè)計(jì)壁顶、應(yīng)用程序設(shè)計(jì)一樣珠洗，搜索框設(shè)計(jì)同樣是一門值得研究的學(xué)問。
搜索框?qū)τ诰W(wǎng)站或應(yīng)用程序有著非常重要的作用若专。一個(gè)好的搜索框設(shè)計(jì)能夠提高轉(zhuǎn)化率许蓖，提升用戶體驗(yàn)。
那么调衰，從原型設(shè)計(jì)的角度膊爪，如何設(shè)計(jì)一款個(gè)性化的搜索框呢？
1. 確定搜索框樣式
填充色：通常選用與頁(yè)面背景顏色反差較大的顏色作為搜索框的填充色嚎莉，方便用戶查找米酬。
線框：多用于干凈簡(jiǎn)潔的背景頁(yè)面
投影：常用于風(fēng)格簡(jiǎn)潔輕量的風(fēng)格頁(yè)面，同時(shí)搜索功能級(jí)別較高的場(chǎng)景趋箩。
透明度：常用于背景色復(fù)雜的場(chǎng)景赃额，目的是為不破壞背景頁(yè)面的整體效果，在視覺上更和諧叫确。
無(wú)外框：用于風(fēng)格簡(jiǎn)潔的大留白的頁(yè)面跳芳。
2. 是否需要圓角
直角
圓角矩形：通常以4~8px最為常用
膠囊：適用于活潑，年輕启妹，具有親和力的品牌風(fēng)格。
異形
在確定以上兩個(gè)基本的樣式元素后醉旦，可以參考下面的20個(gè)優(yōu)秀的搜索框設(shè)計(jì)在Mockplus中繪制自己的搜索框如下圖所示饶米。
need-to-insert-img
HTML/CSS搜索框設(shè)計(jì)案例（附代碼鏈接）
1. Search Form With Animated Search Button
HTML/CSS代碼地址：https://codepen.io/himalayasingh/pen/dqjLgO
適用于：網(wǎng)頁(yè)/移動(dòng)端搜索
設(shè)計(jì)特色：
動(dòng)態(tài)搜索按鈕
HTML/CSS搜索框設(shè)計(jì)
這是一個(gè)由HTML/CSS創(chuàng)建的搜索表單桨啃。借助于代碼優(yōu)勢(shì)，放大鏡按鈕自帶動(dòng)畫效果檬输，可在懸停時(shí)轉(zhuǎn)換為右箭頭照瘾。為了方便大家學(xué)習(xí)，設(shè)計(jì)師Himalaya Singh將代碼也公布給大家參考丧慈。
2. Animated search bar
HTML/CSS代碼地址:?https://codepen.io/AlbertFeynman/pen/BPvzWZ
適用于：網(wǎng)頁(yè)/移動(dòng)端搜索
設(shè)計(jì)特色：
HTML/CSS設(shè)計(jì)
刪除按鈕
常規(guī)的靜態(tài)的搜索框設(shè)計(jì)很容易給人一種誤區(qū)析命，那就是認(rèn)為搜索功能的設(shè)計(jì)只是搜索框+提示詞+刪除按鈕的設(shè)計(jì)，但其實(shí)看似簡(jiǎn)單的搜索框背后擁有十分復(fù)雜的場(chǎng)景逃默。通過(guò)案例中的HTML/CSS代碼可以很清楚的了解此類設(shè)計(jì)的代碼語(yǔ)言鹃愤。刪除按鈕的作用不僅在于刪除搜索內(nèi)容，同時(shí)也可以快速關(guān)閉搜索框完域。
3. Expandable Search Form with CSS3
HTML/CSS代碼地址:?https://codepen.io/huange/pen/rbqsD
適用于:網(wǎng)頁(yè)/手機(jī)端搜索
設(shè)計(jì)特色：
隨字符擴(kuò)展的搜索框
這個(gè)搜索框的設(shè)計(jì)亮點(diǎn)在于它的自適應(yīng)特點(diǎn)软吐，可以根據(jù)輸入的字符數(shù)擴(kuò)展框體。CSS3的運(yùn)用使其可以在擴(kuò)展后仍舊保持樣式吟税。
4. Simple Search Bar
HTML/CSS代碼地址:?https://codepen.io/huange/pen/rbqsD
適用于：網(wǎng)頁(yè)/移動(dòng)端搜索
設(shè)計(jì)特色：
簡(jiǎn)約搜索設(shè)計(jì)：顏色邊框+默認(rèn)提示+搜索按鈕
看太多花哨的設(shè)計(jì)后凹耙，偶爾看下簡(jiǎn)約的搜索框設(shè)計(jì)反而更覺視覺清新。淡雅的藍(lán)色底色和白色搜索按鈕肠仪，配上恰到好處的默認(rèn)提示文字肖抱，讓用戶簡(jiǎn)單直接的實(shí)現(xiàn)搜索功能。
5. Search button animation
HTML/CSS代碼地址：https://codepen.io/kristyjy/pen/zGOXYb
適用于：網(wǎng)頁(yè)/移動(dòng)端搜索
設(shè)計(jì)特色：
搜索按鈕動(dòng)畫
這個(gè)搜索框設(shè)計(jì)的特色之處在于設(shè)計(jì)師機(jī)智的將放大鏡圖標(biāo)伴隨搜索動(dòng)作拆分為前進(jìn)按鈕异旧。文字提示則以跳動(dòng)的光標(biāo)作為輸入訊號(hào)意述。
6. Search Input With Morphing Effect
HTML/CSS代碼地址：https://codepen.io/MilanMilosev/pen/JdgRpB
適用于：網(wǎng)頁(yè)搜索
設(shè)計(jì)特色：
搜索輸入變形特效
放大鏡的變形拆分組成搜索框的設(shè)計(jì)主要是由HTML/CSS/JS共同完成的。也是一種比較常見的搜索框特效泽艘。
7. CSS Search Field Animation
HTML/CSS代碼地址：https://codepen.io/sebastianpopp/pen/myYmmy
適用于：網(wǎng)頁(yè)/移動(dòng)端搜索
設(shè)計(jì)特色：
懸浮CSS搜索字段動(dòng)畫
鼠標(biāo)懸浮至放大鏡按鈕欲险，自動(dòng)放大搜索框填寫區(qū)域，省去了前期的點(diǎn)擊步驟匹涮。只需一次點(diǎn)擊即可輸入文本天试。
8. Header Search
HTML/CSS代碼地址：https://codepen.io/choogoor/pen/NGJVMb
適用于：網(wǎng)頁(yè)搜索
設(shè)計(jì)特色：
下拉搜索
導(dǎo)航欄過(guò)渡搜索框
這個(gè)案例中展示了兩種在網(wǎng)頁(yè)上常用的頂部搜索框樣式。第一種然低，點(diǎn)擊搜索按鈕彈出下拉搜索框喜每，優(yōu)勢(shì)在于不影響導(dǎo)航欄布局。第二種雳攘，點(diǎn)擊搜索按鈕带兜，導(dǎo)航欄動(dòng)畫漸變?yōu)樗阉骺颍瑢?dǎo)航欄消失吨灭，優(yōu)勢(shì)在于不占用網(wǎng)頁(yè)布局空間刚照。
9. Icon to Search Field Animation CSS
地址：https://codemyui.com/icon-search-field-animation-css/
設(shè)計(jì)特色：
CSS動(dòng)畫
圖標(biāo)按鈕激活搜索
這是一個(gè)通過(guò)CSS設(shè)計(jì)的搜索框。獨(dú)特之處在于需要通過(guò)單擊右上角的搜索圖標(biāo)喧兄，通過(guò)CSS代碼擴(kuò)展為可用于搜索的文本框无畔。完成搜索或再度點(diǎn)擊時(shí)啊楚，搜索框會(huì)自動(dòng)還原為一個(gè)放大鏡的圖標(biāo)按鈕。
Bootstrap搜索框設(shè)計(jì)(附代碼鏈接)
10. Bootstrap Table Search
need-to-insert-img
HTML/CSS地址：https://codepen.io/adobewordpress/pen/gbewLV
其余10個(gè)搜索框案例請(qǐng)閱讀原文https://www.mockplus.cn/blog/post/1176
