假亂真的表單控制項:美化原生表單控制項

來源:互聯網
上載者:User

文章描述:這樣的類比需要在兼顧實現設計的同時,還要保證網站的效能和可用性。這時我不禁開始懷念那些看起來平凡卻非常實用的原生表單控制項。如果用他們幾乎可以解決以上所有問題。

在互連網成熟的今天,大家對網站的要求不僅僅在功能實現上,也開始注重視覺設計,多終端使用者體驗等等。表單控制項是web頁面上重要的組成元素,具有非常高的功能性。互動設計師為它設計更加方便的操作方式,視覺設計師也會絞盡腦汁設計出更加奪人眼球的視覺展現。可是由於表單控制項自身的局限性,不能很好地自訂外表,所以就誕生了一系列的由聰明的前端同學類比出來的以假亂真的表單控制項。讓我們從一個真實的“栗子”開始。

視覺設計師提供了一張設計稿:

作為前端同學,我在收到稿子的一瞬間,其實內心各種想法交織:

這樣設計很好看,只是需要類比控制項,看樣子還要切圖,下拉效果也是要類比的,最重要的是要考慮相容性,此外做完還要留下詳細文檔解釋用來與團隊溝通。

這樣的類比需要在兼顧實現設計的同時,還要保證網站的效能和可用性。這時我不禁開始懷念那些看起來平凡卻非常實用的原生表單控制項。如果用他們幾乎可以解決以上所有問題。

1. 說服設計師用原生控制項,原生控制項好處一籮筐

我們從美觀性、易用性、可用性、愉快感、忠誠度等幾個維度對一個web產品評價,美觀是其中的一環, 但是更好的功能實現、更高的效率會比華而不實的設計更加有利於產生愉悅的使用者體驗。

1.1 節省團隊溝通成本

原生控制項自身屬性豐富,比如單選、複選框的不可選狀態,輸入框的不可輸入狀態等,可以直接開發使用,而不用像類比控制項,需要用樣式類比,增加工作量的同時增加各個環節的溝通成本。

1.2 相容性

使用原生控制項在各個瀏覽器都有非常高的相容性,同時表單控制項會根據各個瀏覽器的預設設定顯示相應的視覺風格,也會根據在實際的不同狀態做預設的相應變化。這樣有效避免了類比控制項中包括對位置、狀態等等判斷和控制。

1.3可用性

關愛有障礙的人士是我們的社會責任,作為前端開發人員,我們也致力於為有障礙的人士提供更好的上網體驗。原生控制項的特性更好地支援鍵盤操作,tab切換,快速鍵等功能,這樣有助於視覺障礙使用者使用讀屏軟體等等協助工具輔助對網頁訪問。

1.4體驗一致性

此外,跨平台開發比如在日趨火熱的移動端開發,原生控制項可以呼叫瀏覽器調用手機的控制項,保證了跨平台的體驗一致性;同時可以適應響應式設計,相容多種終端裝置。

1.5美觀性

還在擔心沒辦法自訂原生表單控制項的外觀嗎?Webkit給我們提供了這種可能,它允許重新定義控制項的外觀,讓它們跟設計稿一樣美麗。下面的例子告訴你。

2. 原生控制項也可以很美麗,原生控制項變裝執行個體

使用原生控使用原來的html表單控制項結構,通過css對控制項自訂,改變其外形。下面從幾個執行個體中,我們一起關注下那些可以自訂的相關屬性,探尋未來可以自訂的種種可能。

例1:下拉式功能表

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

Tip:下拉式功能表的樣式暫時只支援定義字型的大小。

例2:單選框

單選框也可以被改變包括寬度、高度、背景圖片等屬性。這裡為了節約流量,把幾種狀態的圖片合并為雪碧圖。從圖中效果來看,依靠單選框本身固有屬性很方便實現選中和未選中時不可點的狀態,並且不用擔心相容性問題。

例3:複選框

複選框和單選框非常相似,我們可以通過定義寬度、高度、背景圖片等屬性,得到我們想要的效果。同樣的也可以用自己自身屬性實現可點擊、不可點擊、選中和未選中狀態的設定。

例子4. 其實,還可以做得更加好看些

以上的幾個例子是在原生控制項基礎上做小的視覺改動,其實,我們可以做得更漂亮一些。下圖設計是一組第一眼看起來跟單選框沒關係的控制項,透過現象看本質,同一時間只能選擇其中一個空間,這就一個單選框控制項的設計。所以我們以單選框為基礎,改變他們的展現就做成了下面樣子。

這一組已經用在我們項目中, 是不是看起來非常特別。 未來有更多的不拘泥預設樣式的表單設計我們也可以試試看。

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

非常遺憾,由於非webkit核心瀏覽器不支援這種自訂的操作,一部分使用者包括國內瀏覽器大戶ie版本比較低的使用者還是不能體驗到這種美觀的控制項。實用和美觀的平衡對於產品來說固然都非常重要的,有時候捨棄一些視覺效果多一些實用性可能換來的是更好評的體驗, 而且隨著技術的發展,自訂越來越靈活,瀏覽器對其的支援也越來越好,從這個角度來看,或許未來我們可以更多使用一些原生表單控制項。



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。