想要开始设计，我们应该对 Android 手表体验有个整体的认识，并且知道应用怎样融入才能改善这种体验。 一种新形式的设备应该对应一种全新的 UI 模式。...•情境信息流中的首张卡片会显示在屏幕底部。不同的表盘设计决定该卡片的露出程度。 •表盘设计：用户可以选择不同的表盘设计以便在主屏幕显示不同的背景。表盘一般用来展示时间以及容纳情境信息流卡片。...便捷选择 (Making it fast) 关于二维选择卡，有一些使用原则需要注意： •尽可能减少卡片的数量 •会频繁使用到的卡片应该在最上层 •卡片的内容和样式都应该尽量简单 •优先考虑方便用户快捷操作...如何退出 当用户做出选择后，应用应该自动退出二维选择卡界面。用户也可以向下滑动第一张卡片来退出，或者从左向右横滑处每个层级最左侧的卡片来退出。...好好考虑一下如何有创造性地融合这些数据。不要仅仅在时间显示的基础上，简单地罗列其他数据。而要思考如何通过时间维度来表达这些数据。
本文就基于宽高一致的多个卡片，在不同屏幕大小下，每行卡片数量可能有调整，考量如何实现等间隙的布局。 点我预览 ?...都为 20px ，并不能保证每行最后一个卡片之后的间距是20px 关于如何定这个 margin的值，需要通过一个规则来计算，这个后文再说明 设置同等间距，常用的还有 flex布局中的 justify-content...还是把目光投向margin值的设定规则吧 在设计一个页面布局时，至少已经确定了XX页面大小的情况下，容器宽度应该设置为多少（比如为1200px），每行放n个项目，项目的宽高是多少 有了这些指标（也必须有这些指标...有了某种特定情况下的布局规则之后，接下来还要考虑不同屏幕大小的情况下，怎么调整这个margin值 这个需要结合媒体查询来设定，同时相应的计算规则也可以通过scss来处理 第一种情况是每行3个，n只可能为整数...为了保证各种请下间距都相等，我个人就不推荐这么干了 ? ? 通过上述的规则计算，我们可以得出每行项目数量递增时的容器宽度临界值。把这些临界值放在媒体查询里面配置，即可方便地实现这种布局的自适应。
于是乎，我也照猫画虎，设计了DW的晴天图标，并且用XD设计出了第一种卡片样式（现DW的medium卡片样式）。...注: DouWeather的设计也参考了google adsense(MD2)，mew等网站的设计风格。 将medium类样式的卡片缩短，便衍生出了一个正方形的small样式小组件。...在写天气卡片前，我只使用过一次Web Components，那是在原神玩家信息查询中，当时是因为有很多重复的要素（角色信息），所以想尝试用这个新鲜玩意封装一下。...并且在开发时图标仅设计了3个，需要顾及开发后期如何便捷地对图标增删改，尽量降低图标检索和主体代码间的耦合度。...theme="dark"] { // 暗黑模式样式 } 然鹅…翻车了，样式并不会生效，翻遍了MDN后，我找到了这个选择器:host()（面向MDN编程），所以正确的写法应该是这样（所以有哪个翻过
在使用MUI开发APP的过程中，功能的融合和美观的布局，往往能使得项目得以顺利进展。不错的设计肯定离不开MUI的各个控件。...对于每个控件的熟悉，并且能个灵活的运用，使得多个控件能够自由组合，和谐的互相锲合，常常可以使得写出一个页面有事半功倍的效果。 在本文中，我将介绍如何使用MUI现成样式做一个卡片视图。...在同一个CardView中的所有卡片大致主题样式应该相似，卡片内容上的布局也应该保持统一性。这两点也是约定熟成的一项要求。 ? 什么是Cardview?...完善的卡片 我们再多做几个卡片，一个CardView就做好了。最后的效果图如下： ? 最终效果 在写页面时，熟练的自由组合各个控件，不用自己写样式，也能写出一个很好看、可以直接使用的页面。...当然，对于一些细节上的修改，可以打开mui的css文件进行样式修改。
响应式设计1.1 屏幕适配// 获取屏幕宽度this.screenWidth = px2vp(AppStorage.Get('windowWidth') || 720)// 根据屏幕宽度决定每行显示的卡片数量...'22%' : '45%')案例中通过检测屏幕宽度实现响应式布局：当屏幕宽度大于600像素时，每行显示4个卡片，宽度为22%当屏幕宽度小于等于600像素时，每行显示2个卡片，宽度为45%这种响应式设计使应用能够在不同尺寸的设备上提供良好的用户体验...这种设计允许用户快速切换不同时间维度的数据视图。3....总结本文详细介绍了HarmonyOS仪表盘应用的进阶开发技巧，包括：响应式设计：通过屏幕适配和弹性布局实现多设备适配数据展示与交互：实现数据卡片渲染和图表区域的交互功能事件处理机制：通过点击事件和手势交互增强用户体验性能优化技巧...：使用懒加载和状态管理优化提高应用性能数据流管理：实现单向数据流和响应式数据绑定最佳实践：采用组件化开发和样式与逻辑分离的开发模式通过这些技巧，开发者可以构建出高性能、易维护且用户体验良好的HarmonyOS
与此同时，将订单卡片中各个子内容封装为控件，以便于卡片视图内部对各个子组件来对订单视图进行组合，来支持多种样式的订单卡片。...在这种设计的方案中，后续订单卡片新增或修改某些状态的 UI，只需要变更卡片样式即可达到 app 内所有订单页面生效。...客户端的列表模块代码历史较长，从产品经理、设计师到开发，经手人都比较多，难以保证新的设计可以覆盖到所有的使用场景 订单列表模块，从设计上已经拆分为正向订单和逆向订单（维权、退款订单）两个类别，对于新的组件...2.2 卡片设计 由于旧订单卡片不同订单展示样式一致，所以在平时开发迭代时，考虑到成本，对于订单卡片的样式一般不进行变动。...总结 对于订单模块这种业务逻辑比较复杂的模块，我们可以将整个页面拆分成不同的组件，对于不同类型的执行逻辑尽量收缩到一个较小的影响范围，以便于变更扩展时影响范围可控。
要不要用卡片式？ 在 UI 设计中，卡片正逐渐成为一种主要的 UI 设计样式，它们可以应付多种情况，而且给用户提供了一种能够呈现有效内容的便捷方式。...Instagram 使用了一种完全扁平化的设计风格，尽管从结构的观点上看，用户的每一条推送都能被视为是一张卡片，instagram 的设计很值得你去花时间揣摩，它是如何遵循 iOS 视觉规范的。...Android 的警告框使用的按钮样式，就是我们先前提到过的扁平按钮，你可以在 MD 说明文档中找到它们应有的尺寸。动作按钮位于卡片的右半部分。实际上，所谓的按钮其实就是一个文本。...这里有一些你可以用来开始你的设计的资源，我为你挑选出了一些最好的： 设计规范 如果你想要知道更多，我在文章中讲到的很多东西在平台设计规范中都有提到。...icon 设计本身就是一件有分量的工作，如果你不想让 icon 设计占用你太多的工作时间，我推荐你使用这些我在 icon8 上看见的不错的 icon。
如果相应页面上可能会有隐私信息，那么开发者可以使用预先定义好的自定义图片，替换微信自动生成的截屏，再分享出去。 ? 开发者应该使用什么样的图片呢？...妈妈再也不用担心我忘记密码了。 ? 知晓程序（微信号 zxcx0101）亲自测试，发现不到十分钟，小程序开发者就可以完成指纹对接。...现在，小程序客服消息支持收发小程序卡片了。小程序客服和用户，都可以相互发送小程序卡片，以便用户获得更好的服务。...可读取系统字体大小 针对一些老年人及视觉障碍人士，小程序的这个新特性会非常有用。 现在，只要在系统设置中设置了字体放大功能，小程序就可以根据系统设置，调整界面样式，使得样式更大、更加易读。...有兴趣的朋友，可以关注「知晓程序」微信公众号，回复「我要用工具」，获取 Beta 测试版的「微信 Web 开发者工具」下载地址。 不管怎么说，小程序的这些新能力，确实会解决不少实际问题。
尽管万事开头难，我们还是需要通过许多设计类的书籍和文章来学习如何配色、排版、布局等。...设计不是简单可以用颜色，形状和文字表示的，应该是一个「言之有物」的过程，即每当我们改变字号、添加阴影或改变颜色时，一定要有必须这样做的理由。...因此，我们得到了这个公式： 较暗的颜色值=饱和度增加，亮度减少 更亮的颜色值=饱和度减少，亮度增加 每当我想知道我的设计应该使用什么样的正确颜色时，这个公式帮助了我。...当你意识到你已经制作了 5 种卡片界面，10 个按钮，5 种标题样式等等。 在开始为特定内容创建界面之前，请试着查看之前创建的设计，您可能看到可以回收利用的样式模板。...我们可以使用「Aa的兴趣打卡11Day」的样式，并将其替换为「Aa 的潜水日记」的内容，而不是重新「发明轮子」并为「Aa 的潜水日记」创建另一张界面卡片。
按需差距 我真正喜欢 CSS 网格的地方是 grid-gap 仅在需要时才应用，考虑以下模型。 我有一个有两张卡片的部分。 在移动设备上，我希望间距低于第一个，而在桌面上，间距将在它们之间。...卡片组件 哦，如果我想详细了解卡片组件间距，我可能会写一本书。 我将突出显示一个通用模式，看看应该如何应用间距。 （对不起，如果你饿了） 你能想到这张卡的间距会在哪里使用吗？ 见下图。...我在检查 Facebook 的新设计 CSS 时，首先注意到了这一点。 我们将内联样式div设置为width ：16px， 它的唯一目的是在左边缘和包装器之间添加一个空间。...我们是否应该根据父级的显示类型（Flex、Grid）来设置它们的样式 让我们一一解决上述问题。 调整间隔组件 可以创建一个接受不同变化和设置的元素。...如果设计需要改变怎么办？ 那么，在这种情况下，样式应该改变。 见下文，你看到哪里的灵活性了吗？
每一个精心设计的仓库、每一次代码的提交，都在无声地诉说着开发者的故事与追求。而 GitHub 主页，作为这张舞台的幕布，其重要性不言而喻。...最近看到那些设计精美、内容丰富的个人主页时，心中总会涌起一股不甘与向往。于是，我暗下决心，要给自己的 GitHub 主页来一次全面改造。...这里面介绍了可以通过 Markdown 语法在个人主页上添加内容。 当然，熟悉 Markdown 的朋友也知道，.md 文件还是可以利用 HTML 语法标签进行更丰富的自定义样式。...对于 标题，加粗，链接 等基础样式不做过多介绍，简单的 Markdown 语法就可以实现，我们重点讲一下统计卡片的展示。...其中 username 是自己的 GitHub 用户名，theme 设置主题，column 设置每行显示几个奖牌，-1 代表不限制，margin-w 设置每个奖牌间隔的像素，更多属性可以参阅文末文档。
（在这个例子中，就是这张卡片看起来如何）转移到标记中的类名上，而不是在我们的CSS中添加新的类名。...这些样式只决定了卡片容器的外观。...此外，由于我们使用的是 SCSS，因此我们可以在标记名上使用更多字数，因为无论如何，它们都会编译成更小的值。 这个特定卡片中的内容包括一张图片和一个块状引文，使用 flexbox 水平排列。...（flex）工具中使用CSS自定义属性，以便从我们的设计系统中提供一些常见的默认值。...我假设这实际上是一个链接，在这种情况下，我们可以在全局样式中为链接应用 .cool-text-interactive 样式，这样我们就可以直接使用不带类的 。
现在，让我们看一个简单的示例。 ? 这个设计有一个 section title，在它的左边有一个小圆圈。当我们将鼠标悬停在section title上时，圆圈会变大。...项目/博客组 在我的网站上，有一个部分需要列出了所有的项目名称。 我想为每个项目添加一个缩略图，但这对我来说并不是最重要的事情。 对我来说，更重要的是链接本身。...包裹的阴影 过去，我曾经创建过一个在边缘倾斜的阴影。 它有一点微妙的效果。 你猜怎么了！ 可以使用伪元素来实现它们。 ? 创建元素 使用以下常规样式创建了一个div元素。...因为在使用:after时，可能需要我们向其他嵌套元素添加z-index，以便伪元素不会与它们重叠。 我们举一个真实的例子。 这是一张由缩略图和标题组成的简单卡片。...基于文件扩展名的链接样式 例如，如果有一个包含PDF文件的链接，则可以添加PDF图标，以使其对用户更清晰。
我们在打开APP或者网站的时候，经常可以看到这样的效果，在内容加载完成之前，会有一个骨架动画的出现，这种加载方式比传统的进度条方式要友好的多，但是很多朋友都不知道这种效果是如何做出来的，下面我们一步步的来看看吧...此外，它没有响应，如果我们决定调整一些内容卡的样式，我们将不得不复制骨架图像的更改，以便它们再次匹配。 一个更好的解决方案是只用CSS创建整个东西。没有额外的请求，最小的开销，甚至没有任何额外的标记。...我们可以用下面的方式来构建它，使以后更改设计变得更容易。 通过CSS绘制骨架 首先，我们需要绘制构成卡片骨架的基本形状。我们可以通过 background-image 属性添加不同的渐变来实现这一点。...默认情况下，线性渐变从上到下运行，有不同的颜色停止过渡。如果我们只定义一个颜色停止，并使其余颜色保持透明，我们可以绘制形状。 请记住，在这块，多个背景图像堆叠在一起，因此顺序非常重要。...另外，我们还可以使用一些变量(比如头像大小、卡片填充)来定义实际卡片的样式，并始终使其与骨架版本保持同步。添加一个媒体查询来调整不同断点的骨架部分现在也非常简单: ?
导语 在今天的技术博客中，我想向大家介绍一个温馨舒适菜单网站的设计。这个网站不仅具有吸引人的外观，而且提供了良好的用户体验。让我们一起深入了解这个温馨舒适的菜单网站是如何设计的。...例如，body 元素的背景颜色被设置为淡粉色，以营造出温暖和舒适的感觉。其他的样式规则包括对标题、菜单卡片以及链接按钮的样式设置。 菜单卡片 这个网站的主要特点是其菜单卡片的设计。...每个菜单卡片都有一个图片、标题、描述和一个“Learn More”链接按钮。让我们来看一下一个菜单卡片的 HTML 结构和 CSS 样式。...CSS 样式规则... */ 菜单卡片使用一个带有特定样式的 元素来包裹内容。...通过设置宽度、背景颜色、边框半径、阴影效果和动画过渡等样式规则，每个菜单卡片都具有独特的外观和交互效果。 响应式设计 最后，让我们来讨论一下这个网站的响应式设计。
设计复合组件 设计复合组件 前言 你问我为什么写博客? 因为阿拉斯加爱写bugger！！！ 微信公众号：爱写bugger的阿拉斯加 如有问题或建议，请往公众号，我们一起交流如何写bugger !...书接上文——react 基础之组件篇二——Style in React 本节精彩继续，阿拉斯加继续装逼如何优雅的写bugger！！！ 1. 复合组件要怎么设计？...卡片 分析 首先这个卡片可以分成三部分： 第一部分有背景色的内容分 第二部分是下面的描述部分 第三部分最大的盒子 直接在 style 里面先定义好类名与样式，组件上写好对应的样式名className 即可...提醒： 设计组件时，一般都按照把控大局，再设计好每个小组件的规律。...下节内容：「react 基础之组件篇三」 将讲解 设计复合组件。 原代码我都已经上传到 github了，有兴趣的可以去了解一下。
与其他开发人员不同的是，前端开发都是在端上游走舞者，直接与用户交流沟通，这就需要前端开发具有更敏锐的交互体验思考，或者能更精准地理解设计师们意图，将最佳的用户体验带给用户。...优质的交互体验对于用户来说学习成本应该是极低的，都是非常自然的操作，却可以让用户感到畅快愉悦，甚至惊喜。...发生样式变化的有 3 个地方： 卡片位置，使用 transform: translateY 控制纵向位置 遮罩透明度，随着卡片上滑，背景遮罩由透明变为半透明 卡片的阴影，注意仔细观察，随着卡片的上滑，为了凸显出弹层是悬浮在底层的视觉效果...在监听 pandown panup 时，根据手指移动的差值控制卡片位置、背景遮罩透明度、卡片阴影的样式。...为了让这个弹层增添一些活力，我在这个操作中让卡片微微膨胀，增添亲和力，仿佛用户想滑动它，但是它又存在着一股粘滞力无法大距离的移动，甚至满足了用户心中的小小控制欲。
新卡片图支持边框的调整，如下可以调整为圆角矩形。除了圆角矩形，还内置了自定义样式，但也仅局限于简单线条的变化。...如果你有更个性化的需求，其实边框可以是这样子： 甚至这个样子： 在6月份之前，实现以上卡片图边框需要采取叠图的方式，也就是说，在基础卡片图下方叠加一个图片。...而现在，新卡片图可以直接填充背景图像。 所以，我们只需要寻找中空的，满足展示需求的图片，添加为背景即可实现异形边框。这里推荐SVG格式的图片，因为SVG是矢量图形，放大缩小不影响画质。...简单的造型推荐在我建的这个SVG图标库查找《复制粘贴就可以使用的Power BI图标素材查询系统2.0》,比方查找一个心形图案，复制代码到空白的SVG文件，注意删除前缀，然后应用到卡片图背景图像即可。...如果是复杂造型，可以找一些插画库，这里推荐openclipart.org，插画的选择同样是需要中空（以便给数据留下空间），下图中间都留下了足够的空白。
（3）自适应栅格方案 自适应栅格方案，就是有一套计算公式，可以套用给页面宽度和页面布局三个影响因子，通过固定其中两项因子的值，计算出第三项因子的值，来实现页面布局的效果。...（2）自适应内边距方案 通过固定卡片边距和卡片宽度的尺寸来计算出页面边距，该方案的优点是，卡片展示内容整体居中，卡片宽度也不会有变化，卡片内部可以严格还原设计稿；但缺点是，卡片内容在大屏内会显得太小，但是在小屏上会显得很大...（3）自适应边距方案 通过固定页面边距和卡片宽度的尺寸来计算出卡片边距，该方案的优点是，页面左右两侧不会有太大的空白区域，卡片宽度也不会有变化，卡片内部可以严格还原设计稿；但缺点是卡片边距会动态调整，这种场景中卡片直接的距离往往比较大...三、自适应栅格方案 - 栅格组件实现 我们根据自适应栅格方案实现了自适应栅格组件，三种自适应栅格方案可以使用同一个组件来实现，我们首先看看栅格组件如何进行使用。...在基于vue的管理后台项目上，我们有两种实现方式来解决CSS样式的父子传值。 通过 父子组件props 来传值 通过 CSS变量来传值 考虑到CSS变量实现方式更加轻量而且兼容性符合我们项目要求。
它与 Bootstrap 有什么区别？如何在 HTML 页面中使用？学院君将在这篇教程中给大家简单介绍下。...二、与 Bootstrap 有什么区别 正如上面所说的，Bootstrap 开箱提供了丰富的布局、组件和样式库，你可以不做任何调整直接拿来使用，这在构建一些内部项目或者验证原型的时候非常方便，但是如果需要定制自定义的样式风格...、需要有定制样式风格的项目，你不需要去加载和覆盖框架内置的样式属性，就可以轻松设计定制出自己独特风格的样式代码。...： 基于 Bootstrap 渲染卡片组件 可以看到，我们不用做任何样式设计和编码就可以基于 Bootstrap 内置的卡片组件相关 class 渲染出一个漂亮的卡片组件来。...类名属性对比 另外，你还可以对比两种 CSS 框架渲染卡片组件的 class 类名，Bootstrap 的一个 class 包含了多个样式属性设置（负责多个职能）： 而 Tailwind 的一个 class
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
