在手机上阅读大量的拷贝文章和长篇论文的用户体验是否让你阅读困难？我非常能理解您的处境，因此，直奔主题，我们在一个地方编辑了最基本的移动手机阅读体验的新规范，只要收藏这篇文章，每次你开始设计一个新的app或者网页的时候，可以拿出它来读一读并参考使用，来！一起看看有哪些新规范可以帮助初入茅庐的新手制作一流的用户体验设计。规则1：端与端之间的研究即使你为一个特定的
......
365
0
0
2022-12-11
据静电说：在Figma中有很多功能，不少同学用了好久都还不知道，但是这些功能又是我们必须要用到的，否则在做设计的时候可能会产生障碍哦~一起来看看吧！001.使用缩放工具Scale来缩放内容不会吧！如果你还不知道要用缩放工具来缩放内容，那如果用直接拖拉外框的方式会造成内容变形，特别是文本等等的折行。如果你需要等比例缩放，那么使用缩放工具Scale来缩放就是更好
......
1360
0
0
2022-12-11
按钮可能是现代图形用户界面中最常见的功能元素。尽管它很受欢迎并且很简单，但这个 UI 对象可能很难设计。本文将为大家介绍 4 种不同类型按钮的美学以及使用它们的上下文。请注意，我们将仅讨论规范类型的按钮（也称为简单按钮），不会涵盖切换按钮或单选按钮。实心按钮实心按钮是具有实心填充的按钮。大多数时候，设计师使用对比色，这样实心按钮自然会吸引很多注意力。它使此按
......
483
0
0
2022-12-11
通知是许多产品不可或缺的一部分。我们今天设计的几乎所有产品都需要一些系统来与我们的用户共享更新。本文将讨论五种类型的 UI 通知，以及何时以及如何使用它们的基本规则。什么是通知？通知是我们希望与用户共享的任何系统更新。通知提供有关某些事件的相关且及时的信息。通知可能因以下情况而异：重要程度。通知范围从用户必须查看的重要更新到用户可能容易忽略的低优先级更新。渠
......
442
0
0
2022-12-11
据静电说：这是一篇Mary Moore的文章，为我们分析了2023年的UI设计趋势。很多新鲜的事物逐渐进入我们的视野，设计师要多去接触新鲜事物和概念，会让自己的设计更顺畅。我们已经使用移动应用程序很长时间了。1997 年，诺基亚创建了 Snake 游戏的内置版本，被认为是第一个移动应用程序。今天，每当我们订票、订餐、打车、看视频和许多其他事情时，我们都会使用
......
402
0
0
2022-12-11
说明因为我的底子特别的差(大佬勿喷)，今天想让文字在图片上方显示，并且给图片模糊，结果当图片模糊之后也就是实现毛玻璃效果后，发现图片上的文字也模糊掉了，这个问题当然可以用伪元素的方式解决，但是由于某些原因，这里不能使用伪元素。然后我找到了 filter（滤镜)属性，他主要是运用在图片上，以实现一些特效。然后用滤镜属性进行模糊后，发现他的效果是下图这样的：此时
......
422
0
0
2022-12-03
利用空间转换属性使用立体呈现技巧实现3D导航效果标签整理依据由外到内，由大到小的原则：首先观察整体是一个导航，有三个导航按钮，所以需要3个 li标签。然后考虑单个按钮里面有俩个面为前面和上面，所以此时需要俩个子元素。因为俩个元素的功能是导航按钮，都是超链接，所以需要俩个 a标签在一个 li标签内。最后得出整体需要的标签html部分 <div cl
......
422
0
0
2022-12-02
前端开发中经常用到的就是元素居中，有时候不同的元素居中方式不同就忘记了，明明已经设置了居中，但却没有效果，搞得人很懵逼，还得去搜索一下，所以今天总结了一下，方便以后查用。水平居中水平居中算是前端工程师的基本功了，它实现的是让元素在水平方向居中显示。行内元素首先看它的父元素是不是块级元素，如果是，则直接给父元素设置 text-align: center; 。&
......
389
0
0
2022-12-02
使用transform属性可以实现元素的位移、旋转、缩放等效果改变盒子在平面内的形态2D转换注意：在使用转换前，都需要给元素添加一个过渡效果：transition: all 0.5s;位移使用 translate实现元素的位移。语法：transform: translate(100px, 50px);
或：transform: translate(100%
......
347
0
0
2022-12-02
使用transform属性实现元素在空间内的位移、旋转、缩放等效果。空间转换也叫3D转换，是从坐标轴角度定义的，x y z三条坐标轴构成了一个立体空间，z轴位置与是想方向相同。空间位移使用translate实现元素空间位移效果。语法：transform: translate3d(x,y,z);
单个方向控制：transform:translateX(值)；
......
384
0
0
2022-12-02
基本上每一个网站都有logo，可能是文字形式的也可能是图片形式，而一个logo是企业形象或者产品形象的符号化体现，一个好看的有特色的logo更是能大大提高网站的吸引力。今天说的就是针对网站logo通过css制作一个扫光特效美化。这个方法主要针对博客类网站或者直接后台可以添加自定义css特效的网站，当然如果你稍懂一点前端技术的话也可以添加到自己的任意网站上。在
......
438
0
0
2022-12-02
场景： 让盒子四个角变得圆润，增加页面细节，提升用户体验。属性名： border-radius常见取值： 数字+px、百分比写法：border-radius:50px;
或
border-radius:10%;
原理：赋值规则： 从左上角开始赋值，然后顺时针赋值，没有赋值的看对角！边框圆角的场景应用画一个正圆：盒子必须是正方形设置边框圆角为盒子宽高的一
......
336
0
0
2022-12-02
1.直接设置父元素的高度优点： 简单粗暴、方便。缺点： 有些布局中不能固定父元素高度。如：新闻列表、京东推荐模块等。2.额外标签法操作：在父元素内容的最后添加一个块级元素给添加的块级元素设置clear：both缺点： 会在页面中添加额外的标签，会让页面的HTML结构变得复杂。3.单伪元素清除法操作： 用伪元素替代了额外标签。基本写法：.father::aft
......
328
0
0
2022-12-02
静态定位：静态定位是默认值，就是之前认识的标准流。 代码：postion:static 静态定位不能通过方向偏移值来改变。相对定位：自恋型定位，相对于自己之前的位置进行移动。 代码：postion:relative需要配合访问属性来移动相对于自己原来的位置进行移动在页面中占位置→没有脱标应用场景 ：配合绝对定位组cp（子绝父相），用于小范围的移动。绝对定位：
......
362
0
0
2022-12-02
权重比较1、对于相同的选择器（比如同样都是类选择器），其样式表排序：行级样式 > 内嵌样式表 > 外部样式表（就近原则） 2、对于相同类型的样式表（比如同样都是内部样式表），其选择器排序：ID选择器 > 类选择器 > 标签选择器 3、外部样式表的ID选择器 > 内嵌样式表的标签选择器计算权重计算权重然后依据各选择器的权重进行比较
......
317
0
0
2022-12-02