同浏览器对网页默认的组件解析样式不一致，而且不够美观，网页样式开发需要大量时间，今天介绍一款优雅的 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设计师，我们要学习的东西太多了，相应的，机会也迎面走来。