[TOC]
# 设计原则
## 清晰（Clarity）
* 纵观整个系统，任何尺寸的文字都清晰易读，图标精确易懂，恰当的修饰且不易被察觉，聚焦于功能，一切设计由功能而驱动。
* 留白、颜色、字体、图形以及其它界面元素能够巧妙地突出重点内容并且表达可交互性。
* 网页的一切表现和表述，应该尽可能贴近用户所在的环境（年龄、学历、文化、时代背景），而不要使用第二世界的语言。此外，还应该使用易懂和约定俗成的表达。
## 高效（Efficiency）
* 足不出户：能在这个页面解决的问题，就不要去其它页面解决。
* 简化交互：交互是为提升用户体验，不可以为了酷炫的效果而提升用户操作的复杂度或学习成本。
* 互联网用户浏览网页的动作不是读，不是看，而是扫。易扫，意味着突出重点，弱化和剔除无关信息。
## 一致性(Consistency)
* 一款内部一致的应用能够贯彻相同的标准和规范：使用系统提供的界面元素、风格统一（众所周知）的图标、标准的字体样式和一致的措辞。应用所包含的特征和交互行为是符合用户心理预期的。
## 提示(Hint)
* 通过网页的设计、重组或特别安排，防止用户出错。
* 中级用户的数量远高于初级和高级用户数。为大多数用户设计，不要低估，也不可轻视，保持灵活高效。
* 帮助性提示最好的方式是：1、无需提示；2、一次性提示；3、常驻提示；4；帮助文档。
* 对用户容易产生困惑的敏感信息进行提醒
## 即时反馈(Feedback)
* 反馈认证交互行为，呈现结果，并通知用户。系统自带的iOS应用对每一个用户行为都提供了明确的反馈。可交互的元素被点击时会被临时高亮，进度指示器（progress indicator）显示了需要长时间运转的操作的进度，动效和声音加强了对行为结果的提示。
* 用户在网页上的任何操作，不论是单击、滚动还是按下键盘，页面应即时给出反馈。“即时”是指，页面响应时间小于用户能忍受的等待时间。
# 设计基础
## 字体
* font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
## 排版
* 行高默认为字号的1.5倍
* 对齐方式（两端对齐，冒号对齐，左对齐）
## 色彩
* default #212121
* primary #00bcd4
* success #009688
* info #03a9f4
* warning #ffc107
* danger #e51c23
* pink #e91e63
* purple #673ab7
* indigo #3f51b5
## 常用布局
* zqui-content和zqui-content-padded作为ZQUI整个框架中的外层容器
* zqui-list和zqui-card-list为列表类布局容器
* zqui-row 栅格布局容器
* zqui-grid 宫格布局容器
* zqui-bar 定义工具栏类
## 组件动画
暂无
# 卡片式设计
## 特性
**响应式**
* 在满足各种屏幕尺寸需要之上，卡式设计能非常便捷地帮助用户焦距到特定的内容，也让设计师在设计时合理又简洁地进行内容的布局。
**逻辑有序性**
* 卡式设计能让混乱的不同元素种类的内容在排版上提供一种奇妙的有序性。
**易读性**
* 卡式设计一个非常重要的特性就是它们包含的信息十分简洁，这让它们变得有趣且引人入胜，但这也让网站内容变得比较单一，很快就一览无余。
**平等性**
* 卡式设计还有一个特性就是平等，这里的平等当然不是绝对的，也就是说，卡式设计里每张卡片，它在整个网页中的重要性是差不多相同的。这也就让大家省去了为内容进行等级排序的麻烦。
**通用性**
* 卡式设计几乎可以用于任何行业任何用途，它的创作弹性非常大。在设计风格上可以说没有任何定论，给了设计师非常大的可发挥的创意空间。
## **注意点**
**留白**
* 留白是老话题，但卡式设计会非常容易忽略这个问题，因为你的注意力焦点都在卡片上面，一不小心你就陷入到了一片混乱里。你必须善用留白（或者也叫负空间）。不仅是卡片外的空间，甚至卡片内部，对于产品展示以外的空间也需要谨慎的处理。
**细节**
* 卡式设计带来了简洁，但与此同时也必须强调一点，那就是内容的丰富性。这在一定基础上必须保证页面能提供足够多的页面内容来引导用户，否则用户只会感到茫然。
**模块但不死板**
* 卡式设计有其重复性，但并不意味着它必须得单调沉闷。别怕给你的项目中增加点吸引人的个性化的东西。客户也许不喜欢而否决掉，但它增加了你为创作所付出的一种可能性。炫目的小动画、别具一格的配色风格或者是让人耳目一新的字体，这些都值得去尝试。
**使用网格**
* 这一条其实不用多说，想要让网页看上去更协调，网格可谓功不可没。
## 参考资料
* [什么是卡片设计？](http://www.ui.cn/detail/20944.html)
* [卡片式设计有什么好处？](https://www.zhihu.com/question/21473866)
* [形式与功能：卡片式设计思考](http://www.sj33.cn/digital/wyll/201607/45842.html?1469282898)
* [卡片式设计用户界面](http://www.woshipm.com/pd/446701.html)
* [简约不简单！带你重新审视正在流行的卡片式设计趋势](http://www.uisdc.com/card-based-design-trend#)
* [考点汇集！帮你梳理卡片式UI的设计最佳实践](http://www.uisdc.com/best-practices-for-cards)
* [不是万能！卡片式设计并不能支撑所有的设计需求](http://www.uisdc.com/card-ui-design-doesnt-work)
