界面设计中的卡片式是什么?

随着手机APP的快速发展,越来越多的风格开始应用在设计中,卡片式就是其中的一种,这种风格能够让界面排版更简洁,看起来更舒服,下面以设计为实例来介绍下卡片式风格。

卡片式风格

  • 01

    要想设计卡片式风格的话,我们需要将背景和卡片的颜色进行区分,选择“矩形”创建同等大小的背景,一般颜色为#f9f9f9.

  • 02

    卡片式风格也是有导航栏和状态栏的,找个预设的格式来复制粘贴就行了。

  • 03

    接着开始绘制卡片,选择“矩形”工具栏绘制卡片,一排的数量根据个人的想法来设计。

  • 04

    一般来说我们的卡片都是白色的,点选矩形,在右侧“填充”中更改颜色。

  • 05

    做卡片式的设计需要让形状看起来更立体点,我们需要添加1px的描边效果。

  • 06

    最重要的是投影效果,添加投影效果之后能让卡片看起来更立体,点击“阴影”进行调整。

  • 07

    卡片式设计的重点就是凸出图片的效果,我们可以置入两张图片来查看下效果,如下图,在界面中,如果设计文字的话,就是辅助作用,重点是凸出图片内容。

  • 08

    如下图我们可以看到,如果有卡片式来排版的话,整个界面看起来就会干净很多,但是如果图片质量不好的话,不建议使用这种风格。

  • 09

    当然设计的时候需要灵活变通,如下图,如果页面只想摆放一张图片的话,就需要对卡片的大小进行调整,这就看设计师对格局的把控了,反正一定要选好素材图。

(0)

相关推荐

  • 界面设计中的那些版式-图版篇

    小编话:界面美不美,除了构图之外,另一个重要手段的就是如何处理留白,也可以理解成版率.留白就是为了凸显层次.突出内容.当然除了留白还有什么方法让界面高大上和达到一定的视觉效果呢?让我们跟着作者@王铎( ...

  • 如何在界面设计中使用留白

    留白是一个活跃的元素,而不是被动的背景.它是界面设计中最宝贵的资源,页面上的留白,虽然经常被忽视,但它跟UI元素所占用的空间一样重要. 01 .认识留白 在介绍如何使用留白提升用户体验之前,我们需要先 ...

  • 黄金兴趣点在界面设计中的运用(中)

    上一篇文章我们讲了黄金分割线,黄金风格线是蛮神奇的东西,是大自然的一种现象.我们不知道是为什么,只知道它非常漂亮. 但是黄金风格线还不止这么多的表现形式.它还有一种更复杂的表现形式叫黄金螺旋线.而从黄 ...

  • 在移动界面设计中应用费茨法则

    在人机交互理论中,费茨法则是非常基本的准则.无论是桌面界面设计还是笔记本的界面设计,都要遵循这一定则,对于日益复杂的移动设备来说,这一法则是否依然适用?我们一起来探索一下. 首先,来了解一下什么是费茨 ...

  • 黄金分割在界面设计中的运用(上)

    黄金分割大家应该早就有所耳闻,作为一名UI设计师,可能一直感觉它离我们很遥远.那么怎么能利用黄金分割线更加完美的构图呢?今天分享的文章就是关于黄金分割线的实际运用,我们来看看作者有哪些要分享给我们的吧 ...

  • UX设计中的功能性动效

    图片来源:ZURB UNIVERSITY 功能性的动效是指一种微妙且具有清晰合理目的的动画效果.它能减少认知负荷,防止对(界面)变化的忽视.还能帮助用户在界面的空间关系之中建立惯性回忆.更重要的是,动 ...

  • 【译】UI设计中使用插图的十大理由

    在过去的几年里,UI插图一直是最流行,最持久的设计趋势之一.一起来讨论下在网站和移动UI设计中运用插图的原因. 插画是什么? 基本上,插图是对特定概念.文字或过程的视觉解释,旨在支持.澄清甚至扩展人们 ...

  • 2014移动界面设计风向(你不知道的秘密)

    刚看到这篇文章的时候小编顿时怒火中烧--这不是抄袭女神@elya妞,的<2014让人印象深刻的7种Mobile UI设计语言>吗?!仔细看完之后,发现作者不光分析了视觉方面,更综合了产品交 ...

  • 超密集的界面设计技巧(设计经验谈)

    常常在我们的设计中会出现内容实在多到难以消化的情况,为了填满这些东西不得不挡掉自己一个个好的创意.有什么好的办法可以做到设计和内容的平衡的呢?今天这篇文章或许能给你一些灵感吧. 1 尽量使用单列而不是 ...