健力宝
卡片式的布局能够把信息、图像、文本、按钮、链接等一系列数据整合到各种矩形方框中。这些模块可以分层或移动，并都倾向于调整到全屏幕尺寸。如果你把它滑动到手机的一侧，它就会和其它的卡片堆叠在一起。
卡片能够合理利用空间，清爽的列出全部信息。而就像“2015年和2016年手机设计流行趋势”所指出的那样，最好的设计思路其实就是把每个卡片作为一个独立整体来设计。
卡片式设计能够成为流行趋势的一个最重要的原因就是——卡片式设计能够完美利用手机屏幕的空间，不但界面清爽，内容也一目了然。在大多数的交互场景下，卡片式设计与移动应用程序简直是绝配。而矩形的设计也能够完美体现出UI设计的简洁美。
UI设计中怎么样让界面变得更干净？
无论是APP还是网站，干净简洁的设计风格都会被大多数人所接受，而那些看起来复杂、充满大量的信息的APP或者网站却会让用户不由自主的拒绝。因为简洁干净的页面更让人觉得轻松，而且也可以更加突出想要表达的信息。那么在UI设计中怎样让界面变得更简洁干净呢？
5个技巧让界面更加干净
1、减少线条
页面上面线条太多，会让人觉得页面复杂，线条好了，看起来就会清爽干净。
2、合理留白，拉开信息层级
合理的留白可以增加产品的品质，也可以让主题更加突出，有些页面上面有很多元素，看上去非常拥挤，如果适当留白，看上去更加清爽。
3、运用卡片整合信息
卡片式设计将信息、图像归类整合到一个方块里，清晰直观又避免页面因为信息多而散乱。卡片的排列方式是按列或者行的方式进行对齐展示，视线沿着横向或者纵向浏览能快速找到想要的信息，此外，这种固定大小的卡片方块也有利于栅格化排版。
4、加强行间距，+4原则或黄金比例
行间距大家都知道，但是具体如何设计很多人不知道，一般常用规则是+4，比如文字大小是12PX，那么行间距就是16，依次类推文字是14那么行间距就是18。
5、加大字间距：0.1或者0.2勿过大
字间距同样很重要，特别是做英文排版的时候，同样的内容，字间距和行间距不合适，界面看起来就会相差很多，有的看着很舒服，有的看起来说不出来哪里不对。
ui设计学习内容都是什么？
现在的UI设计学习内容大致包含了：手绘、设计类软件、一些前端等等，这是我找的叩丁狼学院全栈UI设计课程体系：
第一阶段：软件基础及平面手绘手绘、PS & AI软件学习、平面设计
第二阶段：电商广告创意设计黄金分割法则、电商广告设计思路、视觉广告创意
第三阶段：网页版式设计与配色技巧WEB网页设计规范、色彩理论与设计心理学、网页用户体验设计
第四阶段：移动端UI界面设计Experience design学习、图标绘制、APP界面设计
第五阶段：Animate交互动画设计Animate软件学习、AN交互动画、UI交互动画设计
第六阶段：网页前端制作HTML基础知识、css网页样式、WEB前端制作
第七阶段：Javascript+jQuery+HTML5+CSS3、Javascript网页特效制作、jQuery网页特效制作、响应式手机制作
什么叫卡片式设计
详细资讯请到大腕互联官网查询.
能同时用于 Android 和 iOS的APP UI设计怎么做
一些建议：
1. 总体的样式
从 iOS7 以后，Apple 就一直在采用扁平化的设计模式，去除了所有不必要的纹理和阴影等效果——和早些年间的版本完全不同。Google 的新 MD 设计规范有了一些更加细节的规定，通过一种叫“纸片”的方法来创造更多的层级关系。
2. 实体按钮
Android 有一个返回按钮，点击它可以返回上一个屏幕。
iPhone 上则没有这样一个按钮，所以需要有一种方式能够让用户回到先前的屏幕。通常的解决方案是在屏幕的左上角放置一个返回键。
3. 通用元素
两种平台之间的确存在着一些通用的元素，比如说状态栏和标题栏，它们会出现在每一屏的顶部。你不应当改变导航栏的高度，如果你想让 App 看起来更加原生的话。所以，我推荐你在设计的第一页就定义好标题栏的样式，然后在其他的屏幕上使用一个占位的方框来替代，这样能省下不少时间，但是你应当向程序员说明标题栏在不同的屏幕上都是一样的样式。
不同平台上的导航栏有一定的差别。在 Android 上文本是左对齐的，然而 iOS 上是居中对齐的。在 iOS 上，很多企业都用它们的 logo 来替换首页标题栏中的文字，但是在 Android 设备上这不是一个好的主意。状态栏(显示你的网络、电量和时间信息)是系统组件，你不需要考虑设计它，只要确保它们不会对他人造成误解就好了。
4. 导航
或许iOS 和 Android 平台之间最大的区别就在于他们的导航样式了。Android 上最主要的导航方式是抽屉菜单，Android 用户们通常在这个菜单内进行跳转。而且在整个 App 中，这种体验是一贯的。Apple 的导航样式更倾向于 tab bar，它位于屏幕的底部，并且以一种很简单的方式实现上部内容的切换。当你设计 App 的结构的时候，你可以为不同的平台设计不同的导航样式。
5. 要不要用卡片式
在 UI 设计中，卡片正逐渐成为一种主要的 UI 设计样式，它们可以应付多种情况，而且给用户提供了一种能够呈现有效内容的便捷方式。视觉上，卡片非常适应于 Android 的 Material Design(它事实上源自于纸张的灵感)。使用阴影和卡片之间的合理间距能够创建一种自然的外观。
在 iOS 上，使用卡片设计需要更加的小心谨慎，尽管一些大型的 App，诸如 Facebook 和 pinterest 的确使用了一种略微偏离 iOS 视觉规范的设计风格。Instagram 使用了一种完全扁平化的设计风格，尽管从结构的观点上看，用户的每一条推送都能被视为是一张卡片，instagram 的设计很值得你去花时间揣摩，它是如何遵循 iOS 视觉规范的。如果你要在 iOS 平台上应用阴影，你最好小心谨慎，尽量使得这些阴影不是那么的明显。
6. 排版
iOS 系统上的默认字体是 Helvetica Neue，在 Android 上则是 Roboto。尽管这两种字体在外观上有显著的差异，但是这两个字体的尺寸却是近乎相同的。如果你想要在设计的时候节省时间，那么用一款字体就可以，但是要和开发人员沟通在不同的平台上使用对应的字体。而在设计重要的布局结构和使用大号字体时，我建议你还是同时用这两种字体测试效果。
如果你想要精益求精，那么你就要对不同平台上的设计规范更加注意。比如如下几条：
Android 的 MD 设计需要用到更多的空格来进行布局
在 MD 中字体大小的变化会更加多样
在 iOS 上，字体没那么多大小差异，但是在字体重量上(Font weight)有更多的变化，同样允许你创建主次结构
两个平台都使用比较细的字体来现实正文内容，然而，在下面的例子中，Android 使用了轻(Lighr)和常规(Regular)字体，而 iOS 使用了粗体(Bold)和常规字体
这是一个非常简单的例子，向你展示了排版方面的一些细微的不同可以导致印象上的巨大差异——你能很快分辨你是在用 Android 手机还是在用 iPhone!
7. 网格和触摸元件
iOS(@1x 下 44px)和 Android(1:1 比率下 48p)都有对可触摸元件的设计规范。MD 规范同样建议对所有元素使用 8dp 网格对齐。
在最近的项目上，我发现遵守 Android 的这些设计规范会更加安全，因为大一些的 48px 的按钮在两个平台上都表现良好，而且 MD 的规范更加全面，还经常更新。不管怎么说，你都应该在设计中使用网格，但是我们发现定义更加明确的 Android 网格会更好用一些。
8. 按钮样式
这里是 MD 下定义的几个按钮类型：
浮动动作按钮(Floating action buttons)：最传统的有边框的按钮，阴影厚重明显，将它们从页面上分离出来。它们仅应当被用于背景，或者谨慎地在卡片上使用，不应当在警告框或者弹出框上使用，因为使用这种按钮，就会创建一层视觉深度。这种按钮的填充颜色一般使用 App 的主色，而下一种按钮，通常使用辅助的颜色。
扁平化按钮(Flat buttons)： 通常文本使用 App 的主色，没有边框，它们通常使用间距和大写字母来强调不同内容之间的分离关系。
和 MD 相比较，iOS App 在外观上是完全扁平化的，没有层级深度和阴影。主要按钮有填充颜色，次级按钮反转颜色，也就是说，有着主色的边框和文字。这种方案有时候会受到一定的限制，特别将它是用于标签栏等元素的时候。要用好这种设计模式，你必须对不同的颜色在你的 App 中分别代表什么有一个清晰的概念。
9. 动作表单
动作表单(Action sheets)允许用户在多项操作中进行选择。比如，当我点击(或者长按)我想要分享、上传、复制或者删除的图片时。
iOS 和 Android 用近乎相同的方式解决这种问题。首先，动作表单都是出现在屏幕的地步，然后在主要内容上罩上一层阴影。然而，它们在创造不同的深度和其他细节方面有着一些不同。
Android 在动作表单上加了一层厚重的阴影，表明它是脱离于原先的内容的。
iOS 的动作表单没有阴影，仅仅是在原先的背景上防止了一个有一定透明度的灰色图案。
下拉按钮
只存在于 Android 上，它允许用户快速选择功能。然而，记住，这并不是 iOS 原生的控件之一。在下面的例子中，用户点击 profile，然后弹出了一个下拉菜单，提供了几个选项。
特殊数据输入
像特定的一些数据的输入，比如日期和时间，Android 现在有了原生的对话框，虽然它们看起来像是警告弹出框，一个例子是日历输入。iOS 使用完全不同的方式解决这个问题，它会在屏幕的底部弹出一个转轮让用户进行选择。在设计这些东西的时候要小心，并且和开发人员做好沟通。
10. 分类控制
分类控制允许用户以一种简单的方式在不同内容之间进行跳转。在不同的平台上，该控件的使用方式是完全相同的，但是在视觉上有着显著差异，因此要注意使用正确的形式。在 iOS 上，分类控制控件的外观很像我们刚才提到的按钮。而在 Android 上，通过间距来展现它们的分离关系，同时用下划线来标明目前所处的位置。
11. 弹出框
正确地处理这一类型的控件十分重要，因为他们也许会涉及到一些很重要的操作，例如注册，确认条款，甚至是确认支付。我们需要让他们看起来是原生的，以便产生一种安全感和信任感。
Android 的警告框使用的按钮样式，就是我们先前提到过的扁平按钮，你可以在 MD 说明文档中找到它们应有的尺寸。动作按钮位于卡片的右半部分。实际上，所谓的按钮其实就是一个文本。它们使用大写字母将它们和其他内容区别开，并且使用 App 的主色。
12. icon
icon 设计是在 UI 设计中的一个比较特殊的领域。不管你是使用免费的 icon，和专门的 icon 设计师合作，还是自己设计 icon，不同的平台上对 icon 都有特别的样式要求。iOS 平台更偏好线形 icon，Android 上的 icon 的描边则更加地粗壮，或者干脆就用填充的 icon。这里是两个平台上的 icon 对比，你也可以点击这里的链接查看 iOS 和 Android 下的 icon 设计规范。
13. 面包菜单、载入图片
不幸的数字 13(注：最后的晚餐的在场人数)。通常来说，警告框和表示载入的图标留给开发者做决定。你或许已经经历过弹出框和警告框的设计和 App 的其他部分样式完全脱节的情况。那是因为通常 iOS 和 Android 平台都有对这些情况的默认的处理方案，但是你也可以利用你的方案进行替代。在这里，让你的设计能被真实还原的最好的方式就是和开发人员多进行沟通。
14. 通用 UI 控制
复选框，单选框和输入框，以及开关都是应该有着原生感觉的控件。像警告框和对话框一样，这些控件保持默认样式的话能够给用户带来熟悉感和信任感。尽可能多地使用原生控件，用户自然知道如何使用他们，并且在涉及到敏感信息和支付事宜的时候能够更信任你的 App。
在同一个设计稿中同时呈现出原生 iOS 和 Android 的感觉也并非一件不可能的任务。尝试在设计之初就注意到这些差别，并且注意对控件的使用，并且在设计过程中和开发人员保持紧密的联系。
阅读下面的东西会对你有帮助：
iOS Human interface guidelines
Android material design guidelines
UI 库
这些 UI 库能够帮助你剩下很多的防治和调整原生控件的时间。你可以从库中抽取出你要的部分并将它们用于你的 iOS 或 Android 设计稿中。
An excellent PSD template for iOS from Teehan + Lax
Android Material Design PSD Template
icon
即使你要自己绘制 icon，或者是请专门的 icon 设计师帮你绘制，你也有可能用到它们(做你的占位符吧!)。icon 设计本身就是一件有分量的工作，如果你不想让 icon 设计占用你太多的工作时间，我推荐你使用这些我在 icon8 上看见的不错的 icon。在 flation.com 上你能找到更多的通用 icon。
Line icons which are great for iOS design
Flat icons that work well with material design
模型
Mockup 在你想别人展示你的设计稿的时候是一项非常好用的工具。这些模型有好几种类别。当你要展示 Android 设计稿的时候，你要小心选择这些模型。我倾向于使用 Nexus，因为它是 Google 自己设计的手机，对于其他的厂商来说没有倾向性。
移动端UI/UX设计有哪些必知的设计要点
1、大胆鲜明的排版
更简单的字体排版在小屏幕上具有更强的易读性，尤其是在光线较暗或者逆光的情况下，这也是推动非衬线字体在移动端上广泛运用的重要原因之一。
几年前，随着设计趋势的大幅转变，设计师们更加倾向于选取笔画更加厚重、风格更加大胆的字体类型。此外，字体的尺寸也很重要。越来越多的移动端首页设计开始借用尺寸超大、极具表现力的字体，营造出前景和背景的明显对比，打造炫目的效果，以便于用户浏览、导航。
这种趋势的优势在于，大家开始更加注重于界面内容的可读性。不过在英文界面中，有一个问题需要注意，就是要尽量克制地使用大写字母。以 The Weather Channel 为例，“SUNNY”这个词只有5个字母也就算了，但是如果去是其他的天气所用字母数量较多，视觉上可能会相当的累赘。在中文的字体设计中也要尽量避免文案过长、过于复杂的问题。
所以，此处应当注意两件事：
排版和内容应当尽量保持简单
背景和文字的对比度应当尽量明显，保持最大可读性
2、图层和深度
Material Design 作为当前最重要的设计趋势而言，已经被反复强调和提及了，这并不是没有道理的。
首先，它是Google 所推出的设计平台，作为一个实力型巨头推出的产品，无疑会吸引大量的相关从业者跟进，并且目前状况就是这样。Material Design 本身的设计理念也相当的直观易懂，不论是用来设计还是对于用户而言，都相当的不错。
Material design 最引人瞩目的地方在于，其中的图层创建对于用户使用和交互设计都有极大的帮助。今天，Material design 风格的界面已经遍地开花，许多iOS平台的应用都开始遵循这一设计规范。
真正让这些图层发挥作用的技巧非常的微妙。图层之间的区分靠的是曾经“被大家所嫌弃”的阴影，它们非常浅但是很自然，同时它们还是视觉和交互的线索。最下面的图层是信息的入口，而顶层的图层则是交互的工具和元素。
看看Uber的设计，地图图层位于整个屏幕的最下层，通过移动底部图层来设定上车位置，顶层的按钮则用来下单，不同的层承担着不同的功用，提供不同的交互方式。
3、单色配色方案
在小屏幕上使用最纯粹的黑白配色是吸引用户注意力的好办法。此外，还可以使用相对少见、大胆的配色，这样也容易脱颖而出。又或者使用添加其他的配色方案让用户选择他们自己喜欢的配色方案。
单色配色方案的好处在于更容易营造一致、统一的视觉体验和感觉。正如同 Streeks 这款应用的设计，用户可以设定目标，然后APP会提醒你完成任务。用户可以基于任务类型来设定色彩，并且推送简单的信息来告知你需要完成的事情。
单色配色、图标和简约的字体在一起形成了令人惊艳的组合，易于阅读也便于交互，这种设计已经足够完备顺滑，吸引用户在待办事项中添加更多的事情来完成。
4、专注于微交互
那些足够优秀的APP当中，通常都会包含着许多顺滑无缝的优秀微交互，来沟通不同的界面、动作和交互。微交互通常会很容易被忽略，但是在许多APP当中，他们会作为必须的过渡、交互引导和效果提示而存在，所以相当的重要。
微交互的存在，主要还是帮助用户完成一些事情。从文本消息通知、消息推送到微博上点赞的提示，近乎无处不在。它们还有一个主要的功能：取悦用户。
微交互的主要功能可以这样总结：
提供信息反馈，比如在Instagram 中点赞之后出现的提示特效
呈现动作，比如点赞之后心形会从透明镂空变为红色
帮助用户操作或者发现某些东西的存在，比如点赞之后，会有推送信息出现在通知栏，或者弹出框直接告知
5、卡片式设计
卡片式设计最早见于Pinterest ，随后在Facebook、SoundCloud等网站上流行开来，成为了真正意义上的主流设计。不过今天的卡片式设计很大程度上受到了Material Design 的影响。
不论是对于设计还是对于开发而言，卡片都是大量内容的可靠载体。每个卡片都可以承载不同的元素，作为不同的模块，实现不同的功能。
所以，你可以让一个卡片播放视频，紧接着的卡片则链接到另外一个应用，而下方的卡片则直接放置了一段长长的文字。卡片式设计在移动端上的另外一个优势就是非常的易用，尤其是在有APP之内。绝大多数的应用会在一个屏幕内承载两个卡片，就像 SoundCloud 这样，又或者一屏就是一个卡片，这样一来，即使用户的手指再粗也不会错过任何内容！
6、简单的导航
隐藏式菜单、弹出式导航和大按钮是不容忽视的设计要点。如今APP首屏使用的菜单数量正在逐步减少，寸土寸金的APP首页上不再放置大量的菜单按钮，随之而来的是隐藏式菜单的流行。
有趣的是，越来越多的用户并没有被隐藏式设计惹恼，他们已经熟知汉堡菜单中隐藏着更多的选项。当然，使用汉堡菜单的技巧在于，其中隐藏的菜单应当是非常实用的功能和选项，而菜单按钮本身也应当显眼而灵敏。
Slack 绝对是导航菜单设计中的典范，它的菜单可以从屏幕的左右两边弹出显示，而主要功能菜单是从右侧弹出的，而特定频道的菜单则是从左侧弹出。
7、用动画来润色
有趣而漂亮的动画，是让你的应用令人感觉非同凡响的另一手段。合理的动画能提高应用的易用性，能让用户更容易注意到重点，甚至能更加直接的给他们带来快乐。
你无法确知用户将在何时何地访问你的应用，更无法确知用户使用的是哪种网络连接，所以使用体积小、轻量级、不依赖于网络的动画是非常有必要的。
Strava 就是这样一个包含了大量有趣的小动画的应用，其中许多有趣的动画小到你可能会一不小心忽略掉。不同界面之间的切换会有有趣的过渡动效，比如上面的挑战页面就是。加载地图的时候会有一个脉冲特效，当你运动的时候，会看到沿着运动路径变幻的小点
结语
当你打算让你的移动端APP不再停留于构思的时候，不妨先看看当前网页和数字设计都有哪些设计趋势，看看它们当中有哪些可以通过调整可以运用到移动端设计上来。许多意想不到的小点子，可能会成就一个非常了不得的设计趋势。
转载请注明出处51数据库 » ui卡片式设计软件 为什么卡片式设计在UI中如此流行
