PinDesign #78 如何在产品中体系化思考卡片设计

本文是 PinDesign 会员计划第 78 期周刊的节选内容,如果大家对文章内容感兴趣请加入会员计划获取本文全部内容。

这段时间 App Store 很火,作为一个卖各种 apps 的 app 被大家所津津乐道也算是少有的一个现象了。iOS 11 中的 App Store 除了内容结构上的变化,大家讨论得最多的就是它的新版设计。在新版的设计中大量引入了卡片设计的元素,给用户带来了更清晰、轻松的感受。

PinDesign #78 如何在产品中体系化思考卡片设计_第1张图片
appstore.jpg

至此,无论是 iOS 还是 Android ,卡片式的设计形式已经成为了主流趋势。无论你的产品是服务于什么类型的业务,卡片已经成为一种非常重要的信息载体(形式),它将作为信息的入口频繁的出现在各类产品中。

换个角度来说,卡片计已经不再是某一个操作系统的特色或是某一类业务专属的设计形式,它将会像 web 基础元素一样被组件化,被设计师频繁使用。

既然卡片目前(或即将)被大量的使用在产品设计中,我们就需要重新思考、定义它在我们这个设计体系中的抽离和可拓展性。所以本期我们正好接着新版 App Store 的这个话题来和大家聊聊卡片设计的思路。

本期主题:如何在产品中体系化思考卡片设计

回到 iOS 和 Android,既然它们如今都已经将卡片作为设计中的一个重要元素,更多的只是在交互行为和视觉表现上存在差异性,那么我们就有必要摈弃端的概念,更多的从产品角度去重新思考它的设计。

在此之前我们先回顾一下在 PinDesign 周刊早期提及的一个概念「跨多终端的设计统一」。作为一款服务于多平台的产品来说,我们所提供的内容(资讯、商品...)以及相应的流程在不同端是应该一致的。只是为了更贴近终端系统用户的使用习惯,我们需要在风格和交互特性上与平台保持一致。

PinDesign #78 如何在产品中体系化思考卡片设计_第2张图片
princple.jpg

大体思路如上图所示,对于一个卡片我们在设计的初期先对 content(内容)进行设计,它将作为底料展示在不同的平台中。然后我们再根据平台的风格(圆角、投影、字体、字号...)进行视觉样式的封装,最后在为其添加上不同的交互特性来适应不用终端用户的使用习惯。

依据以上这个思路,我们首先可以确保信息层面的一致性,给卡片的体系化设计一个基础。接下来我们需要思考的是如果想要一个卡片设计具备良好的适应性和可拓展性,我们需要解决哪些问题?

在我看来,有三个问题是我们需要在实际操作中思考并解决的:

  1. 如何更好的支持不同设备上的展示体验;
  2. 如何支持不同平台的视觉风格和操作习惯;
  3. 如何具备更好的业务拓展性。

接下来我们将围绕这三个问题聊一聊体系化思考卡片设计的一些思路和方法。本文为 PinDesign 会员计划的付费内容。加入 PinDesign 会员,获取本期主题「如何在产品中体系化思考卡片设计」全部内容及前两期周刊的赠送。

PinDesign #78 如何在产品中体系化思考卡片设计_第3张图片
code.jpg

或点击下方链接获取优惠券:
https://h5.youzan.com/v2/showcase/promocode/fetch?alias=15rtlm2ak

近期更新主题:

  1. #77 为什么设计师需要多写作?

  2. 从 Things 3 来聊聊如何将设计理念融入到产品设计中

  3. 有了 AI,设计师的工作不是被替代,而是发生改变

  4. 为何 Emoji 能给产品设计带来如此大的数据增长

  5. 除了专业技能,设计师还应该具备哪些能力

点击查看 PinDesign 会员计划:
https://wap.youzan.com/v2/showcase/goods?alias=fujcrfun

你可能感兴趣的