同瀏覽器對網頁默認的組件解析樣式不一致，而且不夠美觀，網頁樣式開發需要大量時間，今天介紹一款優雅的 CSS 框架。

關于 Pico.css

Pico.css 是一個簡單輕量化的 CSS UI 框架，最大的特點是樣式都基于 HMTL 原始的標簽名和內置的屬性，少用甚至是不用 class 來定義樣式，寫出來的代碼語義清晰，可維護性強，能夠幫助開發者構建自己的 UI 系統，也可以直接用于快速的小型項目中。

截止發文日期，Pico.css 在 Github 上已經有高達 3898 個 Star。

Pico.css 框架的特點

• 去 class 以及原生語義化的代碼。Pico.css 盡可能使用原生的 HTML 元素的標簽名稱來定義樣式，整個框架使用的 class 名稱不到10個
• 純 CSS 實現。所有組件都由一個 10KB（壓縮后）的 CSS 文件實現，無包管理，沒有依賴和外部文件，甚至連 javascript 代碼都沒有
• 響應式布局。內置響應式的柵格系統，在 PC / 手機 / 平板等不同屏幕大小的設備上排版美觀一致
• 支持深色主題。附帶兩個漂亮的顏色主題，根據用戶喜好一鍵啟用

開發上手

引入 Pico.css 最簡單直接的方式就是下載后直接引入一個樣式文件：

當然也可以通過 npm 安裝：

然后就可以編寫 html 代碼了。

HTML 原生語義化的編程

想要做一個輸入框和提交表單，往往需要這樣的代碼：

而使用 Pico.css，只需要：

Pico.css 內置了很多基礎的組件，包括常用表單控件、表格、彈窗、導航菜單、卡片等，代碼非常簡潔，比如實現一個美觀的進度條，只需要這點代碼：

使用深色主題

Pico.css 內置了淺色和深色兩套主題，使用方法非常簡單，給父級元素添加屬性data-theme。

官網還有很多代碼例子，比如編寫一個美觀大氣的登錄界面，html 代碼十分簡潔，仿佛回到了剛剛開始學習 html 語法的時代。

通過 CSS 文件的源碼，可以看到樣式的選擇器大多通過 HTML 元素標簽名、內置的屬性以及自定義屬性來命中，這樣就規避了常規的只使用 class 來區分的“命名地獄”，是一種非常好的網頁編程思路。

面向對純粹 HTML 有極致追求的開發者，Pico.css 還提供了 classless 版本，這個版本將一個 class 都沒有，完全使用元素標簽名和屬性編寫網頁。

使用 Pico.css 的原因

在項目中使用 Pico.css 源自于一次快速的營銷頁需求，需要做簡單的幾個帶有輸入交互的頁面，使用 bootstrap 這樣龐大的框架顯然有點笨重了，如果使用當前流行的能夠按需引入的 Vue UI 組件庫，又免不了要用 Vue.js 來工程化。只是做幾個簡單的頁面，沒有必要用中大型項目的標配，考慮到目前市面上大多數 UI 框架都過度封裝，堆疊了很多包含各種語義的 class 名，不僅會讓頁面加載變慢，而且會導致更長的樣式計算時間，最終還是找到了適合這樣場景的 Pico.css。

css 樣式的寫法很自由，目前前端開發存在一個趨勢，為了做精美的界面，需要花費大量的時間來寫樣式，為了樣式可以復用，絞盡腦汁給 class 起名字，甚至網上還有各種 class 命名規范，這可能導致了大量的樣式被覆蓋，很多時候 class 屬性的名稱，甚至比樣式的代碼還要多，極難維護。

Pico.css 的出現給這樣的開發現狀提供了一種新思路，不僅可以直接用在實際項目中，也能夠作為構建自己的 UI 庫的基礎樣式。

免費開源說明

Pico.css 是一個免費開源的項目，源碼基于 MIT 開源協議托管在 Github 上，任何個人和公司都可以免費下載使用。

關注我，持續分享高質量的免費開源、免費商用的資源。

↓↓點擊查看本次分享的網址。

Pico.css - 簡單優雅的純 CSS 開源 UI 框架，用原始的 HTML 元素標簽來做界面｜那些免費的磚

動端的UI設計有其獨有的一套設計規則和約束。新技術的不斷加入促進了移動平臺的快速增長，而移動端的UI設計也和傳統的平面海報/網頁設計不太一樣。那么，要成為一個合格的移動端UI設計師需要掌握什么樣的技能，經歷怎樣的涅磐才行呢？

Part 1 挑戰和制約

每個媒體都有它的局限所在。即使是在移動端這個充滿機會、自由和創意的平臺上也有著許多亟待解決的問題，和無法回避的局限性。

碎片化的移動端

時至今日，市面上流通的智能機已經多不勝數了，不同的智能終端不僅僅尺寸不盡相同，而且因為分辨率的差異使得屏幕的像素密度也有很大差異，往細了考慮，這些終端的輸入機制、屏幕比例、屏幕方向都會影響到移動端的UI設計。

移動端的網頁設計可以借助響應式設計保證不同屏幕下的瀏覽體驗，相比之下移動端的APP設計則相對缺少流動性。所以，作為移動端的UI設計師，還是需要考慮屏幕差異造成的布局設計的不同以及用戶體驗上的變化。

分裂的操作系統平臺

目前主流的三大移動端操作系統是iOS，Android 和 Windows Phone（市場份額較小，在國內基本被邊緣化了），每個操作系統都有它們自己的一套設計規范，交互方式，程序接口，而隨著操作系統的版本更新，這些東西也都有著各自的變化。其中最典型的就是Android操作系統的版本分裂，分裂所造成的程序兼容問題至今都尚未彌合，這其中涉及到了操作系統版本的差異，以及廠商定制化之后造成的千奇百怪的兼容性問題（Android開發者已經無數次哭暈在廁所）。iOS也隨著6.0到7.0的大版本升級，經歷了一個較長的過度時期，至今兩個大版本之間在設計風格和兼容性上的問題還影響著開發者。Windows Phone 從7到8的升級有多蛋疼我就不在此贅述了，那不堪回首的過去和微軟高管被口水淹沒的場景我真的不想回憶。

即使是三大平臺在各自平臺內交互設計有著較高的統一，系統版本分裂、操作系統差異以及廠商定制化所造成的影響是不容開發者和設計師忽視的。

性能

設計和構建一個APP的方式會直接影響到它的性能。換句話說，手機里安裝的程序如果設計的好可以你的手機可以待機一天半，而如果其中有一個程序設計的有問題，會讓你需要出門多帶一個移動電源了。一些不必要的轉場動畫可能會讓你的CPU為之進行密集地運算，一段存在問題的JS代碼可能讓你的瀏覽器耗費多于平常數倍的電量。也許今年剛剛上的Galaxy S5能夠流暢運行某個應用，但是2年前的Galaxy Nexus可能會打開應用的時候立馬卡出翔。總的來說，設計和開發，都會影響到APP的性能，甚至左右手機的續航（部分國產手機用戶同開發者一起哭暈在廁所）。

開發與成本控制

有很多應用在構思之初非常酷炫新穎，但是這并不意味著它可以輕松實現。應用的設計和開發的方式會直接決定它能否在Deadline來臨之前實現。如果我們無法認清一個應用的開發成本，那么開發者所承擔的負擔會成倍增加，也為應用的后續發展埋下了禍根。

Part 2 拋棄思維定勢

當我們剛剛開始學習設計和開發的時候，，這個數字時代才剛剛開始，我們對于新興事物的認知尚且稚嫩。學校教育和實際設計開發上的“時代差異”，讓很多設計師對數字化的互聯網的認知稍顯“靜態”，甚至形成某種思維定制，對于移動互聯網也知之甚少。在這個信息爆炸的時代，激烈的競爭催化下的移動互聯網正在以一種恐怖的速度演化、推進，這使得設計師們需要緊跟發展的步伐，隨時更新升級自己對于互聯網的認知。

移動端并非畫布

移動端設計和平面設計有著巨大的差異，它不再是一張平面的畫布。我懷疑PS和AI并不足以幫助設計師完成從平面向移動互聯網的轉變，盡管PS和AI已經幫助設計師們在過去的20年里完成了無數壯舉。目前，我們依然需要借助它們來繪制更多不同屏幕尺寸下的UI和圖標，但是我們需要借助更多的其他軟件來展現移動端不一樣的一面，比如用AE來繪制動效。

從構思屏幕布局到考慮界面轉換

的確，當涉及移動端UI設計的時候，單單考慮屏幕布局是遠遠不夠的。像Facebook Paper，雅虎天氣，Weather Channl這樣的優質移動APP就像我們證明了界面間的轉場動畫到底能讓一個UI界面產生怎樣的張力。而剛剛推出的Android L所用的Material Design則更是在看似普通的靜態界面之后，隱藏了一系列讓你欲罷不能的過度效果。

界面轉換之間的動效，在過去只為博得一笑，今天卻正在走向主流，成為移動端的用戶體驗的核心。它正在成為交互和界面的重要元素，賦予界面以韻律和生命力。動效不僅呈現運動的過程，還能表現出空間、層次，變化，在基礎的界面結構上為用戶帶來截然不同的體驗。

將你的“設計師做派”扔到一邊

你并不需要將界面做獨特或者原創，尤其是當你是為了獨特而重新設計所有的界面，然后讓整個產品為獨特而擔上風險。很多時候，堅持使用原生UI元素和模式是讓應用能按時出貨的重要保證。比起強行推動獨特原創的設計，很多時候更合適的做法是打造簡單高效的交互界面，創造真正的品牌價值。

真實的APP不比設計師的概念設計差

很多設計師喜歡上Behance和Dribbble這樣的網站上去找靈感，雖然其中有很動優質的設計作品，但如果你并非一個經驗豐富的移動UI設計師的話，可能會被這些作品誤導。其中很多設計都僅僅只是從未實現過的高保真Demo，當你正打算設計一個界面的時候，其中某些設計可能會影響你的思路。所以，不妨從那些已經上線的成功APP中汲取營養吧。你會從中汲取到豐富的營養，看到蓬勃發展的設計趨勢，這些經過市場和用戶驗證的案例會讓你明白什么值得學習的設計。

Part 3 學習新技能

了解平臺

正如同web設計師需要了解HTML/CSS一樣，作為移動端UI設計師的你應該了解移動端APP的架構。首先移動端開發的語言和網頁設計就不太一樣，各個不同平臺有著各自的編程語言和接口，界面的構成也無法使用CSS和標簽來實現。

你需要深入閱讀官方的開發文檔，明白APP的構成，編譯方式，發布方式，了解設計的規則。這些東西不僅關系到你的應用開發好壞，還會影響系統的穩定性，電池續航長短等多種因素。作為移動端UI設計師，你單了解設計是不夠的。當然，從長遠來看，這對于你的職業生涯也很有好處。

了解移動端的技術構成

光了解平臺的基本特征是不夠的。接下來你需要了解它相關的技術構成：位置服務（wifi，GPS等），藍牙（低功耗藍牙技術），信號，前后攝像頭，麥克風，陀螺儀，位置傳感器，加速度傳感器，指紋掃描儀（iPhone 5s），眼動追蹤技術，語音識別，人臉識別，等等等等。每一個新技術的背后以為著應用程序更多的可能性，交互設計、使用體驗，甚至商業模式。

發掘本地UI組件的開發潛質

每個移動操作系統中中總有著大量的本地UI組件，他們有著極大的自由度，方便你進行定制。你需求確切地知道他們的特征（尺寸，大小，功用），你可以為與你合作的開發者節省大量的工作時間。

了解移動端的工作流程

安裝SDK并運行，了解移動開發框架，比如TubyMotion、Xamarin、Titanium。熟悉集成開發環境，因為這其中包含了移動開發所需的方方面面。

了解移動端的界面模式

三大移動平臺之間，有著相似之處，但是在深入探究他們的交互設計，會發現它們在理念上的巨大差異。作為一個設計師，你需要明白這些差異所在，以及它們是如何體現在實際案例中的。

不要只著眼于單一平臺，三大平臺都需要深入體驗，每天至少都要把玩一下，并且最少要持續半年。在這個過程中，體會差異，并且將你覺得重要的、有代表性的、值得保存記錄的界面截圖留存。作為單一平臺的狂熱粉絲，你是做不好移動端UI設計師的。

記錄并解釋你的UI設計

考慮到屏幕截圖并不足以表現UI全部的特性，你需要學會記錄界面不同的狀態、轉變過程、轉場動畫等信息，并且學會記錄界面對于不同狀況的反饋。

在設計階段踐行精益UX設計

一個現代的設計師應該是具備戰略眼光的設計師。你的目標不能局限于悶頭制作漂亮的界面，你應該讓你的設計與團隊合作結合到一起，切合項目需求。洞悉用戶深層次的需求，并且能快速地隨之反饋到設計上。將設計作品保存下來并附上詳細的說明，確保所有的設計都與核心理念保持一致，與用戶需要保持一致。

在開發階段采用敏捷UX設計

你不能只將高保真的模型交給開發者就了事，因為在開發過程中會不斷提出新的需求。總會有之前考慮不周全的情況，需要在開發階段進行補充完善，設計師需要隨之進行快速響應。所以，在這個階段，設計師真的需要坐在開發者旁邊應付突發情況。確保開發者在碰到新的需求的時候，不用他們自己來補充UX的細節，或者再來找設計師。

Part 4 關于移動端網頁設計的小技巧

響應式設計

在移動端，響應式設計并非是放之四海皆準的解決方案。有時候它非常適用，但是有的時候并非如此。你有責任考量什么時候采用專門的解決方案，什么時候需要做響應式設計。

謹慎使用CSS和JS

的確，CSS動畫，漸變，陰影都非常贊，也非常容易實現。視差網頁看起來也很酷，很多設計師都對此感興趣。但是這些元素都非常消耗資源，對移動端的瀏覽器會產生很大的負荷，進而影響電池續航。適度控制CSS特效和JS動效都是很有必要的。即便低性能手機上瀏覽器可以良好地支持CSS3選擇器，但是性能的瓶頸會讓整體體驗非常差。

使用合適的工具做合適的事情

這并不是是一個非常確切的清單，但是你能從中發現很多不錯的工具幫你完成不同的工作。其中有一部分是免費的，有一部分是Mac平臺的。

Part 5 所有的這些都已經過時了？

這么說，對，但也不對。目前移動端開發發展非常迅猛，設計趨勢不斷轉變，智能家電，物聯網時代也即將來臨，相應的傳感器技術和移動應用也會帶來更多的挑戰。作為一個移動端UI設計師，我們要學習的東西太多了，相應的，機會也迎面走來。