這幾天開發的web app使用了jquery mobile，jquery mobile自帶的樣式比較適合做企業應用，

但是要是移動互聯網應用的話，就顯得通用一些，沒有更鮮明的互聯網元素。

現在扁平化設計炒的很熱，FB等外國公司、蘋果應用圖標，都是很好很成功的例子。

互聯網中使用的設計，大致分為擬物化和扁平化。層級明確、元素簡單、顏色豐富、精簡文字是Flat UI的設計原則。

擬物化設計模仿顏色、紋理、形狀甚至實際生活中特定的實際形狀，因此能對不喜歡新技術和更喜歡仿現實環境的人非常有幫助。

然而，對視障用戶能有多少用戶呢？堅持這種設計方法對他們會有價值嗎？好吧，和擬物化設計相對應的，扁平化設計，

有很多優勢可以幫助到這些特殊需求。因為扁平化設計使用基本的形狀，比如，正規/不正規的多邊形，它們更容易識別。

在上圖中，左邊的，扁平化設計展示了方形/矩形元素和高對比色的按鈕。

而右側的擬物化計算器，使用了低對比色和大量的立體和陰影元素。

扁平化和擬物化的兩個計算器對比展示了兩種技術之間的不同。

扁平化設計給予按鈕本身較小的重要性同時增強了內容(本例中的數字和數學符號)。

另一方面，擬物化設計通過給予按鈕更大的重要性而使得它們很突出，而內容卻因為低對比度而不太醒目了。

上面的例子展示了扁平化設計如何提升和給予內容更大的重要性，從而能證明對視障用戶是有幫助的。

Flat UI是一款扁平風格 UI 工具包，而且是開源免費的，非常精美。基于?Twitter Bootstrap?實現。這套界面工具包含許多基本的和復雜的 UI?部件，例如按鈕，輸入框，組合按鈕，復選框，單選按鈕，標簽，菜單，進度條和滑塊，導航元素等等。

圖示如下：

基于Flat UI，有一套適合Jquery mobile的css使用該有多好啊？！真的有。

jquery-mobile-flat-ui-theme就是基于Flat ui的一個開源主題，基于MIT License。

此扁平化的主題自適應各個移動終端，非常不錯的移動主題。

要求：至少?jQuery Mobile version 1.3.0

下載后，替換jquery mobile自帶的css即可。本身帶了a b c ?d ?e ?f 6個主題樣式。

使用：

是不是和Flat ui很接近啊？我比較喜歡主題F。是不是很清新？讓我想起了我的初戀.....哈哈

大家也可以根據自己項目的特點進行修改主題。

總結

以上是生活随笔為你收集整理的wxpython 按钮 扁平化_jquery mobile扁平化设计样式--Jquery mobile Flat UI介绍的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。