专栏名称: 学ui网
欢迎关注学UI网,国内棒棒哒新手学习UI的教程平台!www.xueui.cn。无数新人在这里学习最终找到UI设计工作。
目录
相关文章推荐
51好读  ›  专栏  ›  学ui网

如何选择界面布局样式?

学ui网  · 公众号  ·  · 2018-11-11 20:59

正文

请到「今天看啥」查看全文




信息区分—信息类型

示例如下,分别是天猫,严选,微信读书的个人中心截图。



这三个「个人中心」的设计,都利用卡片设计,对不同类型的信息进行了区分和归整。


天猫: 第一张卡片式用户个人信息,以及用户自己收藏的内容和足迹数据;第二张卡片都是订单数据;第三张卡片是运营卡片,用于专门的大型活动的内容展示;


考拉: 第一张卡片是用户个人信息,以及用户自己收藏的内容和足迹数据;第二张卡片都是订单数据;第三张卡片是用户相关的其他信息;第四张卡片是卡拉提供的服务。


微信读书: 第一张卡片是用户个人信息;第二张卡片是用户账户的基本数据;第三张卡片是用户自己生成的相关内容;



信息区分—时间

示例如下,分别是 APP Store,微信公众号,微博的截图。



这三个设计,都把复杂的内容信息,用卡片设计的形式,按照时间维度进行了整理和排序。



操作性和趣味性

示例如下,分别是支付宝,ZUO,探探的截图。



卡片是一种模拟物理世界的设计形式,拥有可操作隐喻,可以被覆盖、堆叠、移动、划去。


支付宝卡包: 模仿物理世界真实的银行卡设计,利用用户已有的银行卡查看习惯,让用户快速理解和查看已绑定的银行卡


ZUO: 「ZUO」是一款小众的,有趣新鲜创意的内容分享产品。主打追寻更美好的可能,产品设计别具特色。左滑卡片可以切换内容的设计,让产品体验更加灵动有趣。


探探: 一款陌生人社交软件,广告主打:左滑不喜欢,右滑喜欢的体验,凸显自己在同类型软件中的体验差异化,用户的感受更加新鲜有趣。



卡片设计的反例







请到「今天看啥」查看全文