苹果(Apple Inc.)是一家伟大的公司，他们的产品不仅技术领先，设计水平也是一流的。作为设计师，多看看苹果的设计，往往能学到不少东西。这次，秒秒学(www.miaomiaoxue.com)小编要向大家Get的，就是前几日WWDC(苹果全球开发者大会，英文全称是“Worldwide Developers Conference”)苹果新品发布会上曝光的iOS11系统。虽然还没正式推出，但iOS11卡片式设计风格也足够引人注目了。看看下面一些截图：
苹果的这一新系统的发布，可能也将带动卡片设计风格的重新流行。秒秒学(www.miaomiaoxue.com)小编就趁这个机会，跟大家重温下卡片式风格的几个设计小技巧。无论是网页设计还是APP界面设计，我们都可以用得上。
1、从黑白色的轮廓开始设计
听起来很容易是吗?从黑色和白色的线框开始设计。考虑清楚每个版块要承担的作用，要表达的内容，做成卡片后，哪个部分将被点击或者可以点击……确保卡片能被有效的识别和使用。
设计的时候把每个卡片想象成扑克牌，调整牌与牌之间的间距，安置好牌上的图像、文字等元素，这样每个卡片都自成一派，但又能看出来是一个整体——这样形成一个直观明显的框架规划。
接下来就要思考用户如何使用卡片。用户点击哪里可以引发行动?点击模式和产生的结果是否清晰?怎样返回或下一步?……这些操作的提示是否足够明确，要如同原先网页上“点击这里”的红色按钮一样明显，用户一看就知道如何操作。
2、巧妙使用空白空间，保持较宽的间距
卡片式设计最大的挑战是如何让布局紧凑但又不显得杂乱。留出一定的空白空间(留白)是个很好的办法，留出更多的呼吸空间，使整个界面看起来更宽敞，阅读体验也会更好。
这个空白间距如何把控呢?一般来讲，你可以将平日里排列图片的间距X 2，额外的空间可帮助设计师更有条理地组织内容。
卡片使设计能够很好的适应各种尺寸，不仅能适合手机的小屏幕，也能适合平板或台式机的大屏幕。
3、添加自然色和阴影
下一步就得考虑颜色和阴影了。卡片的阴影和样式尽量模仿真实，想象一个真实的卡片看上去是什么样的，放在屏幕上和握着它看起来应该是差不多的。
1)光线应该在背面和底部投下阴影。
2)正常时候光线从上面来，设计最暗的部分应该在底部。
3)将卡片与用户的接触点(比如“点此购买”等号召行动的语句处)设置为焦点，并且要容易互动。
4)一张卡片对应一条信息。
4、字体尽量简单
说到排版，简单的无衬线字体是用得最多的。字体选择避免过细过长。大多数卡片最好准备两种字体选择(最好是同一个系列，如粗黑体和黑体)，一种作为正文字体，另一种给标题或者引导语使用。
为了便于阅读，可以使用大量的对比。比如字体之间的对比，背景之间的对比，每张卡片文本元素的对比。
5、不要用过多的UI元素
这里再强调一下：一张卡片对应一个行动。这就意味着不需要使用到那么多的UI设计元素，比如说按钮。甚至有时候在卡片式设计中，根本不需要用到按钮。
但是如果你考虑到用户可能需要一个视觉上的提示，那么一个按钮足够了——尽量设计得简单一点。
卡片式设计，不仅能够完美契合不同设备尺寸，对用户来讲也是非常友好。不管这次苹果的iOS11会不会让卡片设计再火一把，大家都可以根据设计情况来使用。
对设计感兴趣的童鞋可以关注“秒秒学”公众号，每日有最新最有趣最实用的设计资讯哦，也可以直接到秒秒学官网进行软件学习(各类型软件都有)和进阶。
标签： 秒秒学客户端