技術(shù)文：為原生表單控件穿上美麗外衣

Fufu ：在互聯(lián)網(wǎng)成熟的今天，大家對(duì)網(wǎng)站的要求不僅僅在功能實(shí)現(xiàn)上，也開(kāi)始注重視覺(jué)設(shè)計(jì)，多終端用戶(hù)體驗(yàn)等等。表單控件是web頁(yè)面上重要的組成元素，具有非常高的功能性。交互設(shè)計(jì)師為它設(shè)計(jì)更加方便的操作方式，視覺(jué)設(shè)計(jì)師也會(huì)絞盡腦汁設(shè)計(jì)出更加奪人眼球的視覺(jué)展現(xiàn)。可是由于表單控件自身的局限性，不能很好地自定義外表，所以就誕生了一系列的由聰明的前端同學(xué)模擬出來(lái)的以假亂真的表單控件。

推薦閱讀：
《告別平庸！新穎的表單設(shè)計(jì)賞析》
《學(xué)習(xí)制作404錯(cuò)誤頁(yè)面的15個(gè)優(yōu)秀案例》
《關(guān)于快速填表！給你5大要素》

讓我們從一個(gè)真實(shí)的“栗子”開(kāi)始。

視覺(jué)設(shè)計(jì)師提供了一張?jiān)O(shè)計(jì)稿：

作為前端同學(xué)，我在收到稿子的一瞬間，其實(shí)內(nèi)心各種想法交織:

這樣設(shè)計(jì)很好看，只是需要模擬控件，看樣子還要切圖，下拉效果也是要模擬的，最重要的是要考慮兼容性，此外做完還要留下詳細(xì)文檔解釋用來(lái)與團(tuán)隊(duì)溝通。

這樣的模擬需要在兼顧實(shí)現(xiàn)設(shè)計(jì)的同時(shí)，還要保證網(wǎng)站的性能和可用性。這時(shí)我不禁開(kāi)始懷念那些看起來(lái)平凡卻非常實(shí)用的原生表單控件。如果用他們幾乎可以解決以上所有問(wèn)題。

一、說(shuō)服設(shè)計(jì)師用原生控件，原生控件好處一籮筐

我們從美觀(guān)性、易用性、可用性、愉快感、忠誠(chéng)度等幾個(gè)維度對(duì)一個(gè)web產(chǎn)品評(píng)價(jià)，美觀(guān)是其中的一環(huán)， 但是更好的功能實(shí)現(xiàn)、更高的效率會(huì)比華而不實(shí)的設(shè)計(jì)更加有利于產(chǎn)生愉悅的用戶(hù)體驗(yàn)。

1.1 ?節(jié)省團(tuán)隊(duì)溝通成本
原生控件自身屬性豐富，比如單選、復(fù)選框的不可選狀態(tài)，輸入框的不可輸入狀態(tài)等，可以直接開(kāi)發(fā)使用，而不用像模擬控件，需要用樣式模擬，增加工作量的同時(shí)增加各個(gè)環(huán)節(jié)的溝通成本。

1.2 ?兼容性
使用原生控件在各個(gè)瀏覽器都有非常高的兼容性，同時(shí)表單控件會(huì)根據(jù)各個(gè)瀏覽器的默認(rèn)設(shè)置顯示相應(yīng)的視覺(jué)風(fēng)格，也會(huì)根據(jù)在實(shí)際的不同狀態(tài)做默認(rèn)的相應(yīng)變化。這樣有效避免了模擬控件中包括對(duì)位置、狀態(tài)等等判斷和控制。

1.3 ?可用性
關(guān)愛(ài)有障礙的人士是我們的社會(huì)責(zé)任，作為前端開(kāi)發(fā)者，我們也致力于為有障礙的人士提供更好的上網(wǎng)體驗(yàn)。原生控件的特性更好地支持鍵盤(pán)操作，tab切換，快捷鍵等功能，這樣有助于視覺(jué)障礙用戶(hù)使用讀屏軟件等等輔助工具對(duì)網(wǎng)頁(yè)訪(fǎng)問(wèn)。

1.4 ?體驗(yàn)一致性
此外，跨平臺(tái)開(kāi)發(fā)比如在日趨火熱的移動(dòng)端開(kāi)發(fā)，原生控件可以調(diào)用瀏覽器調(diào)用手機(jī)的控件，保證了跨平臺(tái)的體驗(yàn)一致性；同時(shí)可以適應(yīng)響應(yīng)式設(shè)計(jì)，兼容多種終端設(shè)備。

1.5 ?美觀(guān)性
還在擔(dān)心沒(méi)辦法自定義原生表單控件的外觀(guān)嗎？Webkit給我們提供了這種可能，它允許重新定義控件的外觀(guān)，讓它們跟設(shè)計(jì)稿一樣美麗。下面的例子告訴你。

二、原生控件也可以很美麗，原生控件變裝實(shí)例

使用原生控使用原來(lái)的html表單控件結(jié)構(gòu)，通過(guò)css對(duì)控件自定義，改變其外形。下面從幾個(gè)實(shí)例中，我們一起關(guān)注下那些可以自定義的相關(guān)屬性，探尋未來(lái)可以自定義的種種可能。

例1：下拉菜單

這里我們可以通過(guò)通用的css定義方法，定義下拉框的寬度、高度、邊框、背景，還可以自定義下拉按鈕的圖片。這里為了方便處理，采用base64的圖片。

Tip：下拉菜單的樣式暫時(shí)只支持定義字體的大小。

例2：?jiǎn)芜x框

單選框也可以被改變包括寬度、高度、背景圖片等屬性。這里為了節(jié)約流量，把幾種狀態(tài)的圖片合并為雪碧圖。從圖中效果來(lái)看，依靠單選框本身固有屬性很方便實(shí)現(xiàn)選中和未選中時(shí)不可點(diǎn)的狀態(tài)，并且不用擔(dān)心兼容性問(wèn)題。

例3：復(fù)選框

復(fù)選框和單選框非常相似，我們可以通過(guò)定義寬度、高度、背景圖片等屬性，得到我們想要的效果。同樣的也可以用自己自身屬性實(shí)現(xiàn)可點(diǎn)擊、不可點(diǎn)擊、選中和未選中狀態(tài)的設(shè)置。

例子4. 其實(shí)，還可以做得更加好看些
以上的幾個(gè)例子是在原生控件基礎(chǔ)上做小的視覺(jué)改動(dòng)，其實(shí)，我們可以做得更漂亮一些。下圖設(shè)計(jì)是一組第一眼看起來(lái)跟單選框沒(méi)關(guān)系的控件，透過(guò)現(xiàn)象看本質(zhì)，同一時(shí)間只能選擇其中一個(gè)空間，這就一個(gè)單選框控件的設(shè)計(jì)。所以我們以單選框?yàn)榛A(chǔ)，改變他們的展現(xiàn)就做成了下面樣子。

這一組已經(jīng)用在我們項(xiàng)目中， 是不是看起來(lái)非常特別。 未來(lái)有更多的不拘泥默認(rèn)樣式的表單設(shè)計(jì)我們也可以試試看。

三、某個(gè)時(shí)候美麗的外衣還是“國(guó)王的新衣”

非常遺憾，由于非webkit內(nèi)核瀏覽器不支持這種自定義的操作，一部分用戶(hù)包括國(guó)內(nèi)瀏覽器大戶(hù)ie版本比較低的用戶(hù)還是不能體驗(yàn)到這種美觀(guān)的控件。實(shí)用和美觀(guān)的平衡對(duì)于產(chǎn)品來(lái)說(shuō)固然都非常重要的，有時(shí)候舍棄一些視覺(jué)效果多一些實(shí)用性可能換來(lái)的是更好評(píng)的體驗(yàn)， 而且隨著技術(shù)的發(fā)展，自定義越來(lái)越靈活，瀏覽器對(duì)其的支持也越來(lái)越好，從這個(gè)角度來(lái)看，或許未來(lái)我們可以更多使用一些原生表單控件。

原文地址：isux.tencent
作者：Fufu
 
================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是一個(gè)分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線(xiàn)端設(shè)計(jì)以及PS教程的干貨網(wǎng)站。
【特色推薦】
PS禮儀手冊(cè)：網(wǎng)頁(yè)設(shè)計(jì)師必須修煉的內(nèi)功技法，更是不可或缺的WEB設(shè)計(jì)指南http://hao.uisdc.com/ps/。
設(shè)計(jì)微博：擁有粉絲量58萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) 微信號(hào)：【youshege】?jī)?yōu)設(shè)哥的全拼
您也可以通過(guò)掃描下方二維碼快速添加：