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

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

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

1. 說服設(shè)計師用原生控件，原生控件好處一籮筐

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

1.1 節(jié)省團(tuán)隊溝通成本

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

1.2 兼容性

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

1.3可用性

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

1.4體驗(yàn)一致性

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

1.5美觀性

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

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

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

例1：下拉菜單

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

Tip:下拉菜單的樣式暫時只支持定義字體的大小。

例2：單選框

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

例3：復(fù)選框

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

例子4. 其實(shí)，還可以做得更加好看些

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

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

3. 某個時候美麗的外衣還是“國王的新衣”

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

原文來自： 騰訊ISUX