正文

ui设计卡片风格（ui设计卡片风格有哪些）

发布时间：2023-04-28 01:29:11 稿源：创意岭阅读： 1278

大家好！今天让创意岭的小编来大家介绍下关于ui设计卡片风格的问题，以下是小编对此问题的归纳整理，让我们一起来看看吧。

创意岭作为行业内优秀企业，服务客户遍布全国，设计相关业务请拨打175-8598-2043，或微信：1454722008

本文目录:

1、UI设计－卡片流、图片流、Feed流拆解
2、产品UI设计摘要
3、UI设计中的新拟物风格是怎样的？
4、UI设计有什么风格?

ui设计卡片风格（ui设计卡片风格有哪些）

一、UI设计－卡片流、图片流、Feed流拆解

卡片作为信息的承载体，在界面设计应用得非常广泛。弄清不同卡片的设计细节点，能让我们做设计化繁为简，设得心应手。在设计的过程中，我们要有拆分思维，将复杂的模块、组件，拆分为细小的基础元素，逐一攻破。

图片流、卡片流、feed流，“流”是按照某种时间线，去呈现我们的内容。

花瓣、Pinterest的首页展现方式就是用的卡片流去承载图片、用户头像、用户名等信息的。

1.图片流功能作用

a.帮助用户快速浏览图片与筛选图片

b.使用户减少干扰，沉浸式阅读

2.图片流细节构成

从纵深角度，把图片流拆分为背景层、内容层、控件层。

我们最需要关注的是内容层的设计。内容层又拆分为：图片内容区域、信息内容区域这两部分。

3.内容层设计注意点

a、图片卡片设计要点

1.图片区域高度不固定。

2.信息区域主要样式高度固定。这里在设计时需要重点规定上下间距。（字数不一样多，会导致信息区域高度不一样，但是从样式上来讲，是固定的，因为这一部分是可复用的）

b、用户头像

1.用户头像设计应注意左右平衡。保持头像高度与左边文案高度一致，可以保证左右平衡。

2.头像素材要选取背景简单、统一的视觉中心、统一的明暗度的图片，而且选取的图片一定要符合我们产品的气质。我们在做设计稿的时候，一定要选取统一的图片，比如图片的视角、明暗度等。这样才能保证我们页面的统一性，确保设计稿的效果。千万不要觉得线上环境头像很乱、图片很丑为由，就不去选取一些优质的图片，从而降低我们的专业度。

c、图片流板块设计要点

1.保持对应要素间距统一。这样也利于开发。（数值根据自己产品规范去定义，只要保持相同要素间距统一就行）

2.注意信息层级划分。利用字体颜色、大小、字重去区分。在这里需要我们去考虑哪些是用户关注的信息。

3.注意圆角大小。圆角设置一般在6-10px 为宜。

4.图片流要点总结

卡片流样式在支付宝、美团app中是很常见的。卡片流的组成部分有点像图片流的内容区域板块。卡片流的设计样式是比较固定的。

1.卡片流作用

a.卡片流是让用户了解更多信息的入口

b.卡片流的信息呈现能让用户快速抓取重要信息，节省用户时间

2.卡片流拆分

将卡片流按照“UI星辰大海”拆解为以下几部分，分别从每一部分去突破。

2.卡片流设计要点

a.基础布局。基础布局也就是简单的背景色、分割线，就不多讲解了。注意背景色不要太脏、太暗就行。

b.文字

文字设计时，也需根据自己产品设计规范去灵活应用，从字颜色、大小、字重上去区分文字层级。主副文案大小差别至少4像素。

c.内容层级－卡片组件

卡片流设计主要发力设计的区域为卡片组件。卡片组件拆分为表头、表内容、表尾三部分。表内容部分可以有不同的内容呈现形式。

表头部分

▲图标高于文字高度。间距符合二分原则（左边距是右边距的两倍）。

▲表头部分的图标一定要简洁、具有呼吸感。内图标与圆底比例接近1:2。

表内容部分

▲根据产品的卡片作用，去对此部分内容进行设计。一定要控制好间距，保持此部分的呼吸感。

表尾部分

▲表尾部分一般会放置文字按钮、或简单的按钮。对于文字按钮需根据重要程度从自重、颜色、大小上去突出。对于简单的按钮上下边距与左右边距需符合二分原则（接近二分原则，没有那么死板）

feed流是投喂用户想要的内容。常用在很多资讯app中,如今日头条、酷安等app。

1.feed流作用

a.帮助用户持续地获取最新的订阅内容

b. 使用户减少干扰，沉浸式阅读。

2.feed流细节拆分

a.配图

▲配图的选取应遵循背景感觉、烘托主题、色彩关联这三个原则。从美团外卖、饿了么这些产品可知，首页选取的图片一定是严格把控的，符合产品的气质、而且有想买的欲望。

▲图片尺寸

不同的产品、不同场景出现的图片比例是不一致的。在feed流中长出现的图片比例为3:2 （这里只简单的给出数值、后续会详细讲解图片尺寸）

c、列表流

对于列表流，最重要的是把控间距。建议建立最基本的间距，比如为8px，然后根据亲密性来依次增加偶数像素，来拉开层级关系。

d、分段控件

设计时，选中文案比未选中文案一般大2px；颜色一般选取品牌色。小横条通常设计为3px（1x下）

e、辅助按钮

▲注意左右平衡。设计时图标与文案一样高。

卡片流、图片流、feed流在界面设计中用的越来越广泛。掌握好其中的设计要点、会对我们的设计效率、设计效果有很大的帮助。以上内容，只是自己平时学习的总结与积累，希望对你有所帮助，但是切记死板套用哦～

二、产品UI设计摘要

http://www.sj33.cn/digital/wyll/201611/46667.html

沉浸感，说的是一种让你犹如身临其境的模拟真实的效果。就像最初的美术来自于对现实的模拟一样，这种拟真的设计，至今仍然受用。

因而我们能看到像这样的网页设计，它以全屏式的大幅图像和视频为主，以一种简单却有效的方式，迅速把你带入它所设定的情境之中。

同样的，在APP设计中也有类似的UI设计风格，大视野背景图：

用通栏的图片作为背景，或者是作为整个APP的背景，或者是作为内容区块的背景，既提升了视觉表现力度，又丰富了APP情感化元素。一些信息或操作，浮动在图片上。这种设计方法，对字体和排版设计要求更高，难度也更多，但极容易渲染出氛围。

大视野背景图风格也分为两种，一种是内容区块中采用大视野背景图，好处是可以利用图片做区块分割，难度是图片拼接后的效果不一定好看，所以可能还需要配合描边、留白等设计手段优化拼接。

另外一种就是全屏背景图甚至打通状态栏，前景做内容排版、导航、操作。好处是设计非常具有生命了，所以有朋友把这种风格也叫有计划设计，说的就是回归大自然的设计手法。

但风险也是很明显的，就是前景的信息排布设计其实是有很大挑战的，必经花花绿绿的背景太过于干扰注意力，导致前景的文字内容可读性会变弱。所以需要把重要操作用明确的按钮区隔出来，阅读型文字跟背景图要用明显的反色，还是不行的话就把文字浮在半透明蒙层上，解决可读性问题。

“滚动”，并不算是一个新的设计趋势。

在过去的几年内，滚动式的阅读体验在小屏幕设备上的发展尤为突出。想想你手机上的 app，一定有很多采取的是这种滚动式设计。

正如你所看到的这个国家地理的官方网站一样，这种滚动设计的好处非常直白：它提供给用户一个更为流畅的浏览体验，以一个线性的方式，引导用户在短时间内不受打扰地阅读到更多的内容。

仅用一个主色调，是不是就能够很好的表达界面层次、重要信息，并且能展现良好的视觉效果？事实上也正是如此，随着iOS7的发布，我们看到越来越多唯一主色调风格的设计，会采用简单的色阶，配套灰阶来展现信息层次，但是绝不采用更多的颜色。

整个界面采用粉色的主色调，从标题栏到标签页，从操作按钮到提示信息，除了黑白灰之外，全部采用粉色设计，这种简介的的配色风格，反倒起到了很好的信息传达效果，也具有良好的视觉表现力，设计师在内容排版上的技巧实在是加分。

可以说唯一主色调设计手法，是真的做到了移动端APP的最小化（Minimal）设计，减少冗余信息的干扰，使用户专注于主要信息的获取。

而与唯一主色调形成对照关系的，就是Metro引领的多彩色风格，为什么我一定要给我自己的产品定义一种主色调，多彩色就不能是主色调吗？于是出现了不同页面、不同信息组块采用撞色多彩色的方式来设计的风格，甚至同一个界面的局部都可以采用多彩撞色，也产生了不少优秀的设计。

列表多彩色的设计案例，这种列表多彩色，用鲜亮的多彩色来区分信息，确实能起到突出的效果，视觉上极其醒目。

可是对于一些内容型的APP，也许并不适用，比如GoogleKeep的多彩卡片，确实是在内容阅读上会起到反效果。百度云记事本第一版设计也是多彩色的，但是后来考虑到文字记事比较多，为提供良好的文字阅读体验，还是把多彩色改成灰白色微质感的设计。

2013 年开始盛行的扁平化设计中，强调简洁的功能界面区分，抛弃多余的元素。至今，这种设计风格依然有着借鉴的价值。

不过，随着扁平化的流行，它的弊端也开始显现出来：一时之间几乎是所有的平面设计都在强调扁平化，这使得它们趋于雷同，看上去毫无个性。

想要在扁平化设计中，加点不一样的元素让它更为生动，渐变色不失为一个好的选择。

渐变色能让设计看起来更活泼有趣。

插画可以让设计具有“性格”，比起传统的摄影，它是一种直观的与用户进行情感交流的视觉语言。

对于品牌来说，没有什么能比用插画来塑造品牌形象、传递品牌性格还要简单有效的方式了。作为一种有趣的情感表达，插画可以是量身定制的，因而它能帮助获得用户的信任，让人感觉更为亲切。

首页以简笔画的形式很直观地表达了产品的几大功能，能够帮助用户快速理解。

此外，插画的实现途径并不唯一。它提供多种创意方向的选择，不同的插画也可以传递不同的情绪。比如简笔风的手绘看上去单纯可爱，精细繁复的笔触可以产生一种“高级”质感，当插画与摄影结合，则给人一种虚实难辨的奇幻感。

概括说来，视差指的是页面的背景，以一个比前景慢的速度移动，从而产生一种视觉上的纵深感。

视差可以结合图片、文本，以一个不太严格的页面布局，带来一种流畅直观的浏览体验。视差效果的好处显而易见，它提供了一个充满活力的界面，并且让用户印象深刻。

一直以来，这种卡片式设计都在移动用户界面设计中占有重要的位置。

卡片式设计是一个通用的用户界面模式，小到移动端的信息浏览，大到重要的会议演讲。它最大的好处大概就是，能在同一个时间内，尽可能地、分门别类地展示大量的信息。它能够让用户进行更为快速的浏览并做出选择。

以卡片为单位，可以形成一套完整的解决方案，处理文本、图像、视频之间的关系。此外，卡片本身也拥有很强的灵活性。想要给这些普通的卡片设计多点花样的话，设计师还可以通过翻转、旋转、叠加和过滤等方式，来让它们发生变化。

用大图和标题文字吸引用户，强化了无尽浏览的体验，吸引用户一直滚动下去。

微交互，指的是小屏幕上的动画形式。

从用户体验的角度来看，这种微交互通过屏幕上的动画转化，以一种更为明确的视觉反馈，告诉他们，让他们知道他们的点击行为引起了什么，以及下一步会发生什么。

一个最简单的例子是很多网站或者 App 在打开栏目时会应用的设计。

聪明的设计师能够把微交互设计的娱乐性放大，让用户获得更多的乐趣。从好玩的加载动画，到流畅的图标转换，一个好的微交互设计，可以同时担负娱乐和通知这两种功能。

http://www.sj33.cn/digital/wyll/201611/46667.html

三、UI设计中的新拟物风格是怎样的？

新拟物风格是否适合所有类型的APP场景还有待探讨，或许在一些工具类的APP可以考虑进行尝试，例如：音乐播放器、计算器、签到类、操作工具类APP，在UI设计上可以考虑在部分按钮、卡片式设计、表单类的内容上进行尝试。

1. 基本原理

最基础的新拟物化效果分别有「凸起效果」和「凹陷效果」，两者差异化在于对光影的处理方式不同。凸起效果使用外投影来实现，叠加层级依次为：基层-亮投影-暗投影;凹陷效果效果使用内投影来实现，叠加层级依次为：亮投影-暗投影-基层。亮、暗投影的数值建议偏移值形成正负并保持一致，透明度依据实际情况进行调整。

2. 结合颜色

以深色、单色、渐变三组颜色进行了尝试，整体上来的处理方式都是以基层的颜色为基础对HSB进行调整，深色与单色的处理方式较为一致，渐变色的投影或阴影则需要根据不同的颜色进行调整，来达到合适的效果。我们可以通过HSB的颜色模式来进行微调，达到明暗投影的效果

3. 设计方式拓展

常态的表现往往并不难满足我们所有的设计，因此我们可以基于常态的设计样式再结合其他的设计方式，让整体的感受更加丰富。

4. 小结

新拟物化的设计虽然新颖，但是否适合所有的设计?这个是值得思考的问题。面对一个新的趋势，建议可以多去研究和了解这方面更深层的内容，这样在实际应用才能更加得心应手。

以上就是关于UI设计中的新拟物风格的相关分享，希望对大家有所帮助，想要了解更多内容，欢迎及时关注本平台!

四、UI设计有什么风格?

UI设计风有：

1、三维呈现。和之前UI或运营设计中常见的都是二维的处理手法不同，使内容更加有纵深感从而也提升了设计的趣味性，尤其是运用在运营设计上会让画面显得更加丰富。

2、渐变色。渐变不再是像拟物化时代为了还原物体本身的空间所做的处理，而是为了营造氛围和产品气质使用。设计师能把不同的设计语言灵活的去运用，而不仅限于某个系统平台。

3、半扁平化设计。半扁平化设计是结合了material design和flat design两种风格的处理手法，使简洁的设计上多一些空间感，让系统的不同层面的元素都是有原则、可预测的，不让用户感到无所适从。

以上就是关于ui设计卡片风格相关问题的回答。希望能帮到你，如有更多相关问题，您也可以联系我们的客服进行咨询，客服也会为您讲解更多精彩的知识和内容。

猜你喜欢

ui设计包括（ui设计包括什么）

ui设计包括那三个部分（ui设计包括那三个部分构成）

ui设计包括网页设计吗（ui设计包括网页设计吗为什么）

ui设计包括哪几部分工作（ui设计包括哪几部分工作）

ui设计包括哪些（ui设计包括哪些方面）_1

UI设计包括哪些（ui设计包括哪些方面）

ui设计包括哪些设计（ui设计包括哪些设计软件）

ui设计包括哪些内容（什么是ui设计-包括哪些方面）

ui设计包括哪三个部分（ui设计包括哪三个部分构成）

ui设计包括什么内容（ui设计包括什么内容）

问大家

UI行业适合男生吗？

IT行业UI设计师就业前景如何？

一个UI设计师，什么样的作品集内容会赢得bss以及hr的青睐？

岁开始学UI设计，还有出路吗？

平面设计师怎么快速进入互联网公司做ui设计？

UI设计新手入门，有哪些推荐的书籍或者教程吗？

抖音怎么在马来西亚直播？抖音马来西亚直播权限开通？

怎样才算一名优秀的UI设计师？

让品牌有温度、有情感
专注品牌策划15年

ui设计卡片风格（ui设计卡片风格有哪些）

猜你喜欢

问大家

推荐专题

相关主题

创意岭品牌策划

提交需求1对1免费咨询

让品牌有温度、有情感 专注品牌策划15年

ui设计卡片风格（ui设计卡片风格有哪些）

猜你喜欢

问大家

推荐专题

相关主题

创意岭品牌策划

提交需求1对1免费咨询

让品牌有温度、有情感
专注品牌策划15年