智能化的生活中随处可见卡片式的设计,UI卡片式设计可以很好的解决内容与内容之间的区块分隔,它们是独立的单元,可以移动、随机播放和混合不同的内容类型,也可以在不同的屏幕尺寸上轻松响应,从移动设备上的单列到大型设备上的多列,让用户在长屏滑动中依旧可以很好的明确每一块的内容。

相比往日传统单调的页面设计,UI卡片式设计可以给用户提供更多的个性化体验,使界面极具美感与精致,Pixso协同设计工具的资源社区内有着非常精美的卡片设计模板,可以直接一键复用,也可以作为设计的参考素材,卡片设计是UI设计师发挥创意的画板,同时也是非常容易踩雷的元素。下面,Pixso将用资源社区的100张卡片设计模板来举例说明设计师在使用基于卡片的 UI 时需要注意的事项:

100张卡片设计模板&UI套件

100张卡片设计模板&UI套件

1. 明确UI卡片设计定义

卡片是一个UI组件,包含了界面的内容以及操作,卡片中可以内置各种元素,将昂长的内容分解成容易让用户理解的小板块,视觉层次更清晰,且有利于响应式设计,适应不同屏幕的水平,可以使用户在所有设备上都方便浏览产品页面,便于用户与产品交互。

2. 限制UI卡片内容

在卡片式设计中,我们需要做到界面整洁美观,一张卡片便是一个信息模板,避免过多层级以及卡片尺寸不一,不同内容长度造成的巨大视觉差距,杂乱的界面布局参差不齐会导致用户使用产品时造成视觉紧张感。但设计时内容、标题长短和描述各不相同,并不能做到页面布局的完全统一,当卡片以较大的屏幕尺寸放置在网格中时,可以看到中断流动的大间隙,虽说适当留白带来好效应,但不一致的空白会限制密度,用户也难以从卡片中提取重要信息。

出现这个问题时,不用着急,设计师可以从三个方面改善。

  • 查看截断后当数据被限制在特定字符数时,标题或描述精简是否会使用户丢失重要信息。

  • 查看卡片在砖石布局中是否有意义,当用户可以仔细阅读内容,不需要繁琐地扫描内容时,这种方法就可以工作。

  • 查看是否可以移动卡片内的内容,使其在所有设备尺寸的一列上工作。

限制UI卡片内容

3. 避免UI卡片内容堆叠

在设计时,设计师总想将内容都放至一页展示在用户面前,尤其是在构建诸如仪表板或 Web 应用程序之类的东西时。卡片设计的一个非常重要的特征就是它们的信息非常简洁,增加用户的易读性,我们需要考虑用户的使用场景可以合理地接收多少内容,以及用户的眼睛在失去位置之前可以在屏幕上水平扫描多远。Pixso建议在你的卡片容器上设置一个最大宽度以限制这种内容过载。

避免UI卡片内容堆叠

4. 对UI卡片进行管理

卡片最有价值的事情就是通过模块显示产品内容,让用户可以一眼关注到自己所感兴趣的内容,这些内容块是用户可以采取的额外信息或操作的门户,有时在卡片的每个区域都包含大量动作会提高卡片的趣味性,但是将卡片的各个方面都变成链接可能会令用户困惑,而不是对用户有帮助。这种链接过载通常是在客户或项目所有者的要求下,有时只是添加动作,有时需要添加链接,设计师应该思考用户使用产品场景中哪些操作是必要的,并可能按重要性或类型对这些操作进行分组,这使我们能够将几个关键动作统一到每张卡片底部容易找到的位置。

对UI卡片进行管理

5. 总结

卡片式设计需要保持一致的设计理念,但设计一个产品到落地需要通过几个岗位的协调配合来完成,有时候难免产生分歧出现返工现象,使用Pixso协同设计软件,可以让设计不再是设计师或者设计团队的工作,而使整个团队都能参与进来,助你打造灵活高效的设计团队。如果你想直接复用优质的卡片模板,即可进入Pixso资源社区,搜索卡片,直接复用高颜值卡片模板,实现创意快人一步!

搜索卡片

UI卡片式设计之所以流行,是因为它能给用户提供更便利的浏览产品的方式,设计出用户喜欢并留存的产品是每个UI设计师的最终追求,而通过最初定义和观察卡片,我们可以更好地了解目前的设计模式,卡片设计也不是万能的,UI设计师应该在正确的场景里合理的运用卡片式设计。