界面布局之_关于卡片设计的思考

你有没有反问自己是在被趋势牵着鼻子走,还是真正深思熟虑后,选择更符合自己产品定位和内容传达的表现形式?

总的来说,任何表现形式都应该是为了更好的呈现功能及内容,而不是盲目的追随趋势。

自成一派的优秀设计师并不需要受到任何风格的局限,因为他知道风格并无好坏之分,而是探索更适合自己产品的处理方式。

界面布局样式有哪些?

在做界面设计时,我们为了区分信息结构及层次,通常采用以下3种布局样式:卡片式设计、分割线、无框设计

1.卡片式

自从Android4.1上Google Now登台亮相之后,卡片式这种设计思路/风格慢慢就流行了起来,被大家所关注和使用。

Google将它称之为“Inside Out design(由内而外式)”,它的本质是更好的处理信息集合,那么卡片式设计适合运用在什么地方呢?a.增加空间利用率;b.区分不同维度内容;c.提升可操作性

a.增加空间利用率

相比于传统列表式布局,卡片式设计能更好的打破原有的框架。比如,在传统列表下,内容一般为纵向滚动操作,展示的内容有限,而采用卡片式的布局,在纵向的内容流里,还可以很好的增加横向滑动的内容区域,而且看起来很整体。

知乎feed流里增加知乎live的横向滑动内容

b.区分不同维度内容

卡片,其实比较像一个容器,你可以把不同维度的内容放入不同的卡片中,使其在内容区分的同时,还能保持界面的统一性。

比如:淘宝采用卡片处理信息的层级。第一个卡片承载着:个人信息及偏好;第二个卡片:购买操作后的所有关键流程;第三个卡片:一些淘宝内使用率不高的功能聚合;第四个卡片,是对支付宝和理财产品的一种推广;等等... 

淘宝采用卡片处理信息的层级

每个卡片都是不同维度,相对独立的,但通过不同大小的卡片归纳后,比起传统列表项 + 分割线 + 标题的视觉效率要高很多,显得更有有秩序。

再比如:荔枝FM、微信读书,也是采用卡片式设计,来归纳不同维度的信息内容。 


归纳不同维度的信息内容

还有,微信公众号和appstore,同样是采用这种处理方式,把繁杂的信息以时间维度,归纳到不同卡片中。

以时间维度

c.提升可操作性

卡片是一种拟真元素,可以被覆盖、堆叠、移动、划去,这样能更好的拓展内容块的视觉深度和可操作性。

比如:iPhone自带的“提醒事项”APP,就是采用卡片堆叠的方式,用户可按照标题快速查找目标备忘录,同时进行点击操作,打开卡片内容。

卡片堆叠

探探,运用卡片式设计,实现左右滑动代表感不感兴趣的操作,从而增加产品的趣味性。

增加产品的趣味性

但是,卡片也有它的弊端,如果不在何时的场合盲目的使用卡片设计,也会使你的设计变得低效和空间浪费。

举个例子,下面这种效果图,设计师们应该都不陌生,因为在各大设计网站上经常看到的。

卡片的弊端

但是,你认真分析下,好好的一个通讯录,明明只有简单的头像和名字的元素,非要包裹在卡片里,而且卡片与卡片之间还要留出间距。为了视觉效果,空间这么浪费,并且影响效率。

如果按照微信的策略好友可以加到5000,那找个人不得向上滑死么。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,976评论 25 709
  • 卡片式设计的变迁 说到卡片大家都不陌生。日常生活中我们都接触过哪些卡片呢?细细留意实际上我们每天无时无刻不被卡片所...
    角马X阅读 5,865评论 13 24
  • 第八章 爱情,你有没有见过它全部的样子? 最近的橙子小姐和向阳先生就好像泡在了蜂蜜里面,每天脸上都挂着甜死人不...
    南橘爱北枳阅读 3,401评论 0 21
  • 长这么大,从来没在野外露过营,不知道野外露营的乐趣与凶险。 看似野外露营有很大的吸引力,因为那是一片完全未知的天地...
    Kitekiss阅读 1,625评论 0 2
  • 小学生语文预习要求和方法 “凡事预则立,不预则废。”对于语文学习来说,“预习”是非常重要的一个学习习惯,是调动孩子...
    壹陶然阅读 9,300评论 0 2

友情链接更多精彩内容