找回密码
 立即注册

QQ登录

只需一步,快速开始

LukeLiu
超级版主   /  发表于:2019-8-22 11:05  /   查看:4963  /  回复:5
本帖最后由 LukeLiu 于 2019-8-30 09:34 编辑

      在看官方模板的时候被页面中的卡片效果吸引了:
image.png727816467.png

      因为卡片式的设计有如下优点:
  • 卡片将信息以区块的形式组织到一起,用户也喜欢阅读成块的内容,因为它们更为集中更适合阅读:
  • 这种设计让内容不会以长篇大论的形式出现,避免因为内容太长让用户产生畏惧心理,简单明快的内容更容易引起用户兴趣,用户也因此能够选择是否要继续阅读下去。
  • 卡片将内容提取、优化为有意义的区块,而且不同类型、属性的内容可以在卡片上组合称为有机的、连贯的聚合体。


好呗,记录一下自己实现过程:
  • 设置空页面的背景色为浅灰色

改变背景色.gif


  • 选中一块区域,再次设置背景色,用来区别;

选中某一区域.gif


  • 通过空的超链接单元格占位并实现阴影效果:

添加阴影.gif



     对比一下,之前一个项目的页面通过修改为卡片式的设计,美观了许多:
卡片之前.png     卡片之后.png
      
    总结,当我在同一个页面需要区分不同内容的时候,我可以使用卡片的方式分类,一方面简化页面结构,增加页面的组织感,另一方面,上扬页面的颜值



卡片效果.fgcc

86.46 KB, 下载次数: 285

评分

参与人数 2金币 +666 满意度 +5 收起 理由
Simon.hu + 666
WangZhiQing + 5

查看全部评分

6 个回复

倒序浏览
djs521720讲师达人认证 悬赏达人认证 活字格认证
金牌服务用户   /  发表于:2019-8-27 12:36:03
推荐
有种说法叫温故而知新!上论坛都会看这系列的帖子!不错!加油
回复 使用道具 举报
xuanlincom
中级会员   /  发表于:2019-8-22 16:36:34
推荐
喜欢设个设计
回复 使用道具 举报
WangZhiQing
高级会员   /  发表于:2019-8-23 21:45:38
板凳
上面页面分享工程文件?

点评

老铁,更新原帖了,有、添加了工程附件  发表于 2019-8-25 21:19
回复 使用道具 举报
Simon.hu讲师达人认证 悬赏达人认证 活字格认证
超级版主   /  发表于:2019-8-26 19:14:07
地板
谢谢,新同学的学习分享!
回复 使用道具 举报
Simon.hu讲师达人认证 悬赏达人认证 活字格认证
超级版主   /  发表于:2019-8-29 18:46:02
6#
是的,温故知新!
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 立即注册
返回顶部