课程咨询: 400-996-5531 / 投诉建议: 400-111-8989
认识达内从这里开始
认真做教育 专心促就业
二。在以功能为主页面中的卡片式布局-潍坊达内负责整理
Q1:卡片的特点是什么
1.独立性
2.同类性
Q1:页面整体是否要采用卡片式的风格？
A1:个人暂且认为是否采用卡片式并没有太大的却别，也希望能抛砖引玉。
下图是天猫个人中心页面，左图旧版采用了卡片式设计，而新版采用了大标题+分隔线的风格。从两者的效果对比来看，卡片式让模块更独立清晰，整体也比较有统一感。而大标题风格则是让用户快速聚焦到自己想要的看的模块。
Q2:页面中非通栏卡片与其他UI方式的混搭
A2:混搭时，非通栏卡片有着极强的独立性，从好的一面看，可以突出某个模块；从不好的一面看，用的不当会使得页面不够统一。
如下图左为盒马生鲜的个人中心页，采用了非通栏卡片和通栏卡片混搭的形式，虽然突出了个人信息，但是视觉上不够统一。个人尝试如下图右，均调整为非通栏卡片，并不会对个人信息有太多的弱化，反而让界面整体更加统一。
当然，如果模块类型完全不同，也不用强行统一为卡片式，例如大众点评的个人中心页，底下的列表功能并不适合转化为卡片形式。
2.若页面整体采用分隔线/空白/分隔条的风格来区分模块，那么可以将装饰性强的卡片作为辅助插入其中
如下图为马蜂窝的页面，可见主要的模块采用的是大标题+空白来分隔，而“推荐景点”（图中的金鸡湖卡片）和“玩乐热销榜”采用了卡片的形式。在架构层上，很明显的表现出了从属关系，但在表现层上，又适当的突出了营销内容。
以上就是潍坊达内给大家做的内容详解，更多关于UI的学习，请继续关注潍坊达内
Q1:卡片的特点是什么
1.独立性
2.同类性
Q1:页面整体是否要采用卡片式的风格？
A1:个人暂且认为是否采用卡片式并没有太大的却别，也希望能抛砖引玉。
下图是天猫个人中心页面，左图旧版采用了卡片式设计，而新版采用了大标题+分隔线的风格。从两者的效果对比来看，卡片式让模块更独立清晰，整体也比较有统一感。而大标题风格则是让用户快速聚焦到自己想要的看的模块。
Q2:页面中非通栏卡片与其他UI方式的混搭
A2:混搭时，非通栏卡片有着极强的独立性，从好的一面看，可以突出某个模块；从不好的一面看，用的不当会使得页面不够统一。
例如下图。图1为原设计，纯采用非通栏卡片，而另两张只有签到采用了非通栏卡片。可以看到，图1在视觉上，三个模块整体统一，而图2图3的三个模块割裂成了两部分，视线会更多地被签到模块吸引，而减少对下方模块的关注。
如下图左为盒马生鲜的个人中心页，采用了非通栏卡片和通栏卡片混搭的形式，虽然突出了个人信息，但是视觉上不够统一。个人尝试如下图右，均调整为非通栏卡片，并不会对个人信息有太多的弱化，反而让界面整体更加统一。
当然，如果模块类型完全不同，也不用强行统一为卡片式，例如大众点评的个人中心页，底下的列表功能并不适合转化为卡片形式。
2.若页面整体采用分隔线/空白/分隔条的风格来区分模块，那么可以将装饰性强的卡片作为辅助插入其中
如下图为马蜂窝的页面，可见主要的模块采用的是大标题+空白来分隔，而“推荐景点”（图中的金鸡湖卡片）和“玩乐热销榜”采用了卡片的形式。在架构层上，很明显的表现出了从属关系，但在表现层上，又适当的突出了营销内容。
以上就是潍坊达内给大家做的内容详解，更多关于UI的学习，请继续关注潍坊达内
< 上一篇：什么时候选择卡片式布局设计（2）
下一篇：UI设计界面设计的准则（1） >
2025-02-07
免费试听课程
- 全部课程
- IT课程
- 设计课程
- 运营课程
4578
最新开班时间
- 北京
- 上海
- 广州
- 深圳
- 南京
- 成都
- 武汉
- 西安
- 青岛
- 天津
- 杭州
- 重庆
- 哈尔滨
- 济南
- 沈阳
- 合肥
- 郑州
- 长春
- 苏州
- 长沙
- 昆明
- 太原
- 无锡
- 石家庄
- 南宁
- 佛山
- 珠海
- 宁波
- 保定
- 呼和浩特
- 洛阳
- 烟台
- 运城
- 潍坊
- 开课名称
- 开班时间
- 抢座
- 咨询
- 开课名称
- 开班时间
- 抢座
- 咨询
-
- Java全链路开发
- 5月29日
- 火热抢座中
- 立即咨询
- 云计算全栈开发
- 5月29日
- 火热抢座中
- 立即咨询
-
- 网络安全工程师
- 5月29日
- 火热抢座中
- 立即咨询
- 人工智能工程师
- 5月29日
- 火热抢座中
- 立即咨询
-
- 数据分析与商业智能
- 5月29日
- 火热抢座中
- 立即咨询
- C++物联网工程师
- 5月29日
- 火热抢座中
- 立即咨询
-
- Web全栈开发
- 5月29日
- 火热抢座中
- 立即咨询
- 软件测试工程师
- 5月29日
- 火热抢座中
- 立即咨询
-
- AI大模型全栈工程师
- 5月29日
- 火热抢座中
- 立即咨询
- 鸿蒙原生应用开发
- 5月29日
- 火热抢座中
- 立即咨询
-
- 智能职场办公
- 5月29日
- 火热抢座中
- 立即咨询
- VFX商业视效设计
- 5月29日
- 火热抢座中
- 立即咨询
-
- AGI商业设计变现
- 5月29日
- 火热抢座中
- 立即咨询
- UID全链路设计
- 5月29日
- 火热抢座中
- 立即咨询
-
- 新媒体电商运营
- 5月29日
- 火热抢座中
- 立即咨询
-
- Java全链路开发
- 5月29日
- 火热抢座中
- 立即咨询
- 云计算全栈开发
- 5月29日
- 火热抢座中
- 立即咨询
-
- 网络安全工程师
- 5月29日
- 火热抢座中
- 立即咨询
- C++物联网工程师
- 5月29日
- 火热抢座中
- 立即咨询
-
- Web全栈开发
- 5月29日
- 火热抢座中
- 立即咨询
- 软件测试工程师
- 5月29日
- 火热抢座中
- 立即咨询
-
- AI大模型全栈工程师
- 5月29日
- 火热抢座中
- 立即咨询
- 鸿蒙原生应用开发
- 5月29日
- 火热抢座中
- 立即咨询
-
- 智能职场办公
- 5月29日
- 火热抢座中
- 立即咨询
- VFX商业视效设计
- 5月29日
- 火热抢座中
- 立即咨询
-
- AGI商业设计变现
- 5月29日
- 火热抢座中
- 立即咨询
- UID全链路设计
- 5月29日
- 火热抢座中
- 立即咨询
-
- 新媒体电商运营
- 5月29日
- 火热抢座中
- 立即咨询
-
- 云计算全栈开发
- 5月29日
- 火热抢座中
- 立即咨询
- 网络安全工程师
- 5月29日
- 火热抢座中
- 立即咨询
-
- C++物联网工程师
- 5月29日
- 火热抢座中
- 立即咨询
- Web全栈开发
- 5月29日
- 火热抢座中
- 立即咨询
-
- 软件测试工程师
- 5月29日
- 火热抢座中
- 立即咨询
- AI大模型全栈工程师
- 5月29日
- 火热抢座中
- 立即咨询
-
- 鸿蒙原生应用开发
- 5月29日
- 火热抢座中
- 立即咨询
- 智能职场办公
- 5月29日
- 火热抢座中
- 立即咨询
-
- VFX商业视效设计
- 5月29日
- 火热抢座中
- 立即咨询
- AGI商业设计变现
- 5月29日
- 火热抢座中
- 立即咨询
-
- UID全链路设计
- 5月29日
- 火热抢座中
- 立即咨询
- 新媒体电商运营
- 5月29日
- 火热抢座中
- 立即咨询
-
- Java全链路开发
- 5月29日
- 火热抢座中
- 立即咨询
- 网络安全工程师
- 5月29日
- 火热抢座中
- 立即咨询
-
- 数据分析与商业智能
- 5月29日
- 火热抢座中
- 立即咨询
- C++物联网工程师
- 5月29日
- 火热抢座中
- 立即咨询
-
- Web全栈开发
- 5月29日
- 火热抢座中
- 立即咨询
- 软件测试工程师
- 5月29日
- 火热抢座中
- 立即咨询
-
- AI大模型全栈工程师
- 5月29日
- 火热抢座中
- 立即咨询
- 鸿蒙原生应用开发
- 5月29日
- 火热抢座中
- 立即咨询
-
- 智能职场办公
- 5月29日
- 火热抢座中
- 立即咨询
- VFX商业视效设计
- 5月29日
- 火热抢座中
- 立即咨询
-
- AGI商业设计变现
- 5月29日
- 火热抢座中
- 立即咨询
- UID全链路设计
- 5月29日
- 火热抢座中
- 立即咨询
-
- 新媒体电商运营
- 5月29日
- 火热抢座中
- 立即咨询
-
- 云计算全栈开发
- 5月29日
- 火热抢座中
- 立即咨询
- 网络安全工程师
- 5月29日
- 火热抢座中
- 立即咨询
-
- C++物联网工程师
- 5月29日
- 火热抢座中
- 立即咨询
- Web全栈开发
- 5月29日
- 火热抢座中
- 立即咨询
-
- 软件测试工程师
- 5月29日
- 火热抢座中
- 立即咨询
- AI大模型全栈工程师
- 5月29日
- 火热抢座中
- 立即咨询
-
- 鸿蒙原生应用开发
- 5月29日
- 火热抢座中
- 立即咨询
- 智能职场办公
- 5月29日
- 火热抢座中
- 立即咨询
-
- VFX商业视效设计
- 5月29日
- 火热抢座中
- 立即咨询
- AGI商业设计变现
- 5月29日
- 火热抢座中
- 立即咨询
-
- UID全链路设计
- 5月29日
- 火热抢座中
- 立即咨询
- 新媒体电商运营
- 5月29日
- 火热抢座中
- 立即咨询
预约申请试听课
400-111-8989
lihm@tedu.cn
