為原生表單控件穿上美麗外衣

2018-01-17 1477 0
Fufu :在互聯(lián)網(wǎng)成熟的今天,大家對網(wǎng)站的要求不僅僅在功能實(shí)現(xiàn)上,也開始注重視覺設(shè)計(jì),多終端用戶體驗(yàn)等等。表單控件是web頁面上重要的組成元素,具有非常高的功能性。交互設(shè)計(jì)師為它設(shè)計(jì)更加方便的操作方式,視覺設(shè)計(jì)師也會絞盡腦汁設(shè)計(jì)出更加奪人眼球的視覺展現(xiàn)??墒怯捎诒韱慰丶陨淼木窒扌?,不能很好地自定義外表,所以就誕生了一系列的由聰明的前端同學(xué)模擬出來的以假亂真的表單控件。
讓我們從一個(gè)真實(shí)的“栗子”開始。
視覺設(shè)計(jì)師提供了一張?jiān)O(shè)計(jì)稿:
select 作為前端同學(xué),我在收到稿子的一瞬間,其實(shí)內(nèi)心各種想法交織: 222 這樣設(shè)計(jì)很好看,只是需要模擬控件,看樣子還要切圖,下拉效果也是要模擬的,最重要的是要考慮兼容性,此外做完還要留下詳細(xì)文檔解釋用來與團(tuán)隊(duì)溝通。 這樣的模擬需要在兼顧實(shí)現(xiàn)設(shè)計(jì)的同時(shí),還要保證網(wǎng)站的性能和可用性。這時(shí)我不禁開始懷念那些看起來平凡卻非常實(shí)用的原生表單控件。如果用他們幾乎可以解決以上所有問題。 一、說服設(shè)計(jì)師用原生控件,原生控件好處一籮筐 我們從美觀性、易用性、可用性、愉快感、忠誠度等幾個(gè)維度對一個(gè)web產(chǎn)品評價(jià),美觀是其中的一環(huán), 但是更好的功能實(shí)現(xiàn)、更高的效率會比華而不實(shí)的設(shè)計(jì)更加有利于產(chǎn)生愉悅的用戶體驗(yàn)。
1.1  節(jié)省團(tuán)隊(duì)溝通成本
原生控件自身屬性豐富,比如單選、復(fù)選框的不可選狀態(tài),輸入框的不可輸入狀態(tài)等,可以直接開發(fā)使用,而不用像模擬控件,需要用樣式模擬,增加工作量的同時(shí)增加各個(gè)環(huán)節(jié)的溝通成本。
1.2  兼容性
使用原生控件在各個(gè)瀏覽器都有非常高的兼容性,同時(shí)表單控件會根據(jù)各個(gè)瀏覽器的默認(rèn)設(shè)置顯示相應(yīng)的視覺風(fēng)格,也會根據(jù)在實(shí)際的不同狀態(tài)做默認(rèn)的相應(yīng)變化。這樣有效避免了模擬控件中包括對位置、狀態(tài)等等判斷和控制。
未標(biāo)題-11
1.3  可用性
關(guān)愛有障礙的人士是我們的社會責(zé)任,作為前端開發(fā)者,我們也致力于為有障礙的人士提供更好的上網(wǎng)體驗(yàn)。原生控件的特性更好地支持鍵盤操作,tab切換,快捷鍵等功能,這樣有助于視覺障礙用戶使用讀屏軟件等等輔助工具對網(wǎng)頁訪問。
1.4  體驗(yàn)一致性
此外,跨平臺開發(fā)比如在日趨火熱的移動(dòng)端開發(fā),原生控件可以調(diào)用瀏覽器調(diào)用手機(jī)的控件,保證了跨平臺的體驗(yàn)一致性;同時(shí)可以適應(yīng)響應(yīng)式設(shè)計(jì),兼容多種終端設(shè)備。
1.5  美觀性
還在擔(dān)心沒辦法自定義原生表單控件的外觀嗎?Webkit給我們提供了這種可能,它允許重新定義控件的外觀,讓它們跟設(shè)計(jì)稿一樣美麗。下面的例子告訴你。 二、原生控件也可以很美麗,原生控件變裝實(shí)例 使用原生控使用原來的html表單控件結(jié)構(gòu),通過css對控件自定義,改變其外形。下面從幾個(gè)實(shí)例中,我們一起關(guān)注下那些可以自定義的相關(guān)屬性,探尋未來可以自定義的種種可能。 例1:下拉菜單
未標(biāo)題-7 這里我們可以通過通用的css定義方法,定義下拉框的寬度、高度、邊框、背景,還可以自定義下拉按鈕的圖片。這里為了方便處理,采用base64的圖片。 Tip:下拉菜單的樣式暫時(shí)只支持定義字體的大小。
例2:單選框
未標(biāo)題-8 單選框也可以被改變包括寬度、高度、背景圖片等屬性。這里為了節(jié)約流量,把幾種狀態(tài)的圖片合并為雪碧圖。從圖中效果來看,依靠單選框本身固有屬性很方便實(shí)現(xiàn)選中和未選中時(shí)不可點(diǎn)的狀態(tài),并且不用擔(dān)心兼容性問題。
例3:復(fù)選框
未標(biāo)題-9 復(fù)選框和單選框非常相似,我們可以通過定義寬度、高度、背景圖片等屬性,得到我們想要的效果。同樣的也可以用自己自身屬性實(shí)現(xiàn)可點(diǎn)擊、不可點(diǎn)擊、選中和未選中狀態(tài)的設(shè)置。
例子4. 其實(shí),還可以做得更加好看些
以上的幾個(gè)例子是在原生控件基礎(chǔ)上做小的視覺改動(dòng),其實(shí),我們可以做得更漂亮一些。下圖設(shè)計(jì)是一組第一眼看起來跟單選框沒關(guān)系的控件,透過現(xiàn)象看本質(zhì),同一時(shí)間只能選擇其中一個(gè)空間,這就一個(gè)單選框控件的設(shè)計(jì)。所以我們以單選框?yàn)榛A(chǔ),改變他們的展現(xiàn)就做成了下面樣子。
單選框 這一組已經(jīng)用在我們項(xiàng)目中, 是不是看起來非常特別。 未來有更多的不拘泥默認(rèn)樣式的表單設(shè)計(jì)我們也可以試試看。 三、某個(gè)時(shí)候美麗的外衣還是“國王的新衣” 非常遺憾,由于非webkit內(nèi)核瀏覽器不支持這種自定義的操作,一部分用戶包括國內(nèi)瀏覽器大戶ie版本比較低的用戶還是不能體驗(yàn)到這種美觀的控件。實(shí)用和美觀的平衡對于產(chǎn)品來說固然都非常重要的,有時(shí)候舍棄一些視覺效果多一些實(shí)用性可能換來的是更好評的體驗(yàn), 而且隨著技術(shù)的發(fā)展,自定義越來越靈活,瀏覽器對其的支持也越來越好,從這個(gè)角度來看,或許未來我們可以更多使用一些原生表單控件。
未標(biāo)題-10 


14
評論區(qū)(0)
正在加載評論...
相關(guān)推薦