在Intechnique机构，我们一直都在研究并应用最好的用户体验原则。今年早些时候，我成为了世界上第9个获得尼尔森诺曼集团(Nielsen Norman Group)颁发的UX硕士学位的人。...如果你的网站层次结构超过3-4级，是时候考虑重新设计了。 30. 考虑使用粘性菜单导航(跟随浏览器滚动的导航)，特别是在较长的网页中或需要快速访问时。 31....使用面包屑导航，让用户知道他们在网站上所处的位置。 35. 移动端导航设计：显示最常用的选项，并将其他选项隐藏在汉堡包菜单下。 36....桌面端的汉堡菜单使用场景较少，因为它并不是非常引人注目，用户也不熟悉，增加了交互成本，减少了信息的呈现。 37. 对于手机的辅助导航，可以使用分类登录页面、子菜单或页面内菜单。 38....网站上的链接必须突出——使用蓝色文本或下划线来表示超链接。 49. 链接应该看起来就是链接的样子。 50. 链接文本应该表明链接的指向，而不是让用户通过点击一个链接来找出它的指向。
有时候需要反复调试HTML里的代码才能实现。 矛盾的汉堡包菜单:汉堡包菜单最近几年很流行。它解决了在小屏幕里显示更多内容的问题，但是也有弊端。...当链接太小不好点击，或者用户想要把某个图片看得更清楚时，这个设置会阻止他们缩放页面。 # 媒体查询 媒体查询（media queries）允许某些样式只在页面满足特定条件时才生效。...同时当用户默认字号改变的时候，em 还能相应地缩放，因此它更适合当断点。 在媒体查询里更适合用 em，em 是基于浏览器默认字号的（通常是 16px）。...使用 display: none 隐藏不重要的内容，比如导航菜单和页脚。还可以将整体的字体颜色设置成黑色，去掉文字后面的背景图片和背景色。...https://codepen.io/cellinlab/pen/LYeJOrM # 使用 srcset 提供对应的图片 媒体查询能够解决用 CSS 加载图片的问题，但是 HTML 里的 标签怎么办呢
对设计师和开发人员来说这个主题可能不太有趣，毕竟它看起来只是繁琐，一点都不华丽。但我觉得重申这个主题十分重要，UWP诞生的目的就是为了打造能在各种设备上运行的通用应用，伸缩性对UWP至关重要。...3.1 使用NavigationView更新导航菜单 以前很多教程都专门讲解了怎么制作汉堡包菜单，现在UWP终于提供了默认方案。...NavigationView是Fall Creators Update提供的新导航菜单，它应用了FDS最常用的两个特效：Acrylic和Reveal，可以折叠及最小化，使用简单： <NavigationView...RootFrame" Navigated="RootFrame_Navigated"> 3.2 将内容扩展到标题栏 在程序启动或每次更改主题颜色时调用...SetupTitlebar()这个函数，注意要根据当前主题颜色改变TitleBar上按钮的颜色（因为官方文档上没有，所以很多人会忘了处理按钮的颜色）： private static void SetupTitlebar
美味的 CSS 动画汉堡，要不要尝尝？ 大家好，我是鱼皮，今天教大家做汉堡包。...为了让网页更生动，当点击汉堡包菜单图标时，可以给它添加一个小动画。这不，有个国外的大神，专门开发了一个汉堡包菜单 CSS 动画库，库的名称就叫 Hamburgers！...进入 Hamburgers 库的官网，可以看到各式各样美味的 CSS 动画汉堡。点击菜单图标，即可查看效果，比如点击 Arrow 菜单图标，三条线会自然变化为箭头图标。...比如我需要一个点击后折叠的汉堡菜单，对应的类名是 hamburger--collapse，则代码如下： <button class="hamburger hamburger--collapse" type...--- 最后，看下这个库的浏览器兼容性，由于它使用了 CSS3 3D transforms，因此支持除 IE9 和 Opera Mini 外的所有主流浏览器。
在本教程中，重点将放在 SVG 的过滤器上 —— 但不只是将它们应用于 SVG 图像，我将向你展示如何将它们应用于任何常规页面的内容上。...如果你此刻在浏览器中查看页面，将看到一个带有一些文本的图像。当前标题仍然是没有样式的，接下来为它设置样式并应用 SVG 过滤器。...加入 headline 把 line-height 设置为零，因为稍后标题将被加上动画效果，所以控制页面上的缩放很重要。它设定了 padding 值，使其周围能够有适量的空间，颜色也会改变。...尝试改变波纹的频率和振幅。...，因为它前面还有一个复选框和汉堡包样式的图标。
、iphone x等大屏的手机全糊了，当时我就懵逼了，我说怎么会呢，后面一看，果然如此啊，看了下代码，原来是用的图片，我说为什么不用svg呢？？...然后同事说一个一个的图标好麻烦，我说可以用svg sprite啊，～～＞﹏＜，这个时候轮到同事一脸懵逼了……，所以想着可能是不是同样还有很多同学也不知道 SVG symbols呢，那么这就给大家分享一下...里的坐标，还有颜色的改变，我们可以直接在svg内的 path上写行内式 fill="#06c"、style="fill:#06c";都是可以的，在维护上，是不是比图片更加方便呢？？？ ...，因为小图的id不会随便改动; 方便改变图片颜色，通过设置fill:颜色值，随意改变小图颜色; IE9以上支持。...，需要再次修改csss样式，或每次都要打开PS删除某图标再导出; 无法修改小图颜色，要UI设计师调整后替换，过程漫长效率低; 在移动端的大屏手机图标会模糊，影响体验。
分享了自己的经历，也是想告诉大家，不管我们过去什么样，从事过什么工作，只要你现在想去改变点什么，你就去做，只要自己够努力，有刻苦钻研的精神，迟早一天也会发光发亮，谁说文科生不能写代码呢？...哈哈，说这么多让大家见笑了，接下来，我讲讲怎么写博客吧。...插入文字在图形上直接双击就可以了，也可以去拖拽，或者点击插入菜单，文字可以调整字体大小，颜色 线条可以点击插入菜单，也可以直接从图形上拖出来，调整粗细，样式，颜色...功能跟processon基本一致，操作也十分类似，比如画图形 插入文字，改变字体大小，颜色，样式 插入线条，改变线条粗线，颜色，样式等 Google Drawings 与...直接在图形或线条上双击即可，支持修改字体大小等也不在话下，而且支持插入各种特殊字符，只要word能做的，它都能做 画线方面，可以画折线，贝塞尔曲线，可以改变线条粗细，样式，颜色 保存文件除了支持
【缺点】 (1) 生成的menu需要自己复制粘贴，很麻烦。 (2) 每次都要手动设置路径和包名，很麻烦。 (3) 生成的点击事件需要自己去导包，很麻烦。...SVG2VectorDrawable 使用 ---- 2.Android Holo Colors Generator 通过自定义Holo主题颜色生成对应的【Drawable】和【布局文件】，点击导航栏的蓝色的...各种右键，各种菜单栏都找了，找不到使用方式，找了半天最后在导航栏有个蓝色的H符号，太坑了，官方也没有讲解怎么使用。 ?...(默认的是Meta + I ,windows上没有这个快捷键，我就改成了Alt + I, 点击菜单栏File -> Settinigs -> Keymap -> 搜索Translate - > 右键 add...的困扰： 1.ButterKnife这个第三方库每次更新之后，绑定view的注解都会改变，从bind,到inject，再到bindview， 搞得很多人都不敢升级，一旦升级，就会有巨量的代码需要手动修改
背景 这是本教程第1部分的延续。在本部分中，我们将介绍文本工具，对齐以及在Sketch中使用导入的矢量图形。 文字和对齐方式 好吧，让我们打开插入菜单并写一些文字！ ? 添加文字 我写了“香蕉”。...我在The Noun Project下载了Will Deskins设计的可爱猴子图标。点击这里直接下载SVG。（记得根据名词项目的指导方针在你的项目中给予肯定！）...下载并解压缩SVG文件后，将其直接拖到Sketch画板中。 ? 将SVG拖动到画板 选中图标后，让我们在屏幕左侧的“图层”菜单中进行一些调查。...显示所有图层 由于我在本教程中对艺术家给予了赞誉，因此我通过点击删除来删除嵌入的文本图层。当您使用他人的作品时，请确保在下载时始终给予奖励或付费。 ? 打开图层 现在是时候做一些侦探工作了。...将颜色更改为黄色 你在这里做的是用“顶部矩形”样式更改形状，这会影响项目中的两个矩形。你猜怎么着？您也可以使用文本样式执行此操作。 ? 创建文本样式 选择一条黑色文本行并创建一个新的文本样式。
正因为有了清楚的定位和方向，才会有了更加清晰的边界。或许你很疑惑，他是怎么支持多种语言的又做到轻量级的？那我们不得不来看一下它的多进程架构。...修改我们的 package.json 如下，因为当前我希望插件加载的时候就已经订阅了按钮的点击事件，所以这里我们可以把 activationEvents 改成 *，这样的话我们的插件在一开始就可以激活并注册事件了...那我们现在就来分析一下我们上面做的事情。首先，我们修改了 package.json 里的配置，增加了一个 menus ，这个 menus 是什么呢？答案是菜单。...菜单项定义包含选择时应调用的命令以及该项应显示的条件（when），所以你也可以给这个菜单项显示加个显示的逻辑，比如我们规定在打开 javascript 文件时才显示这个按钮： { "contributes...如果你好奇还有哪些菜单，我这里简单整理「翻译」了一下官网的内容（仅常见菜单非全部）： 配置菜单项的名称 菜单位置 commandPalette 全局命令面板 explorer/context 资源管理器上下文菜单
微调文本，颜色和数值 选择一个彩色形状并打开颜色菜单，按住 shift 键并上下移动方向键。您可以看到颜色“一点点的变化”。如果您使用鼠标滚轮，也可以更改颜色的色调。...如果在缩放时按住 alt，这也会改变不透明度。您还可以微调任何其他字段，例如行高。 提示：在排版和行高上使用 4 或 8pt 的幅度来设置你的字体比例！...而且您的组件名称又好又短。 在我的示例中，我为移动设备创建了一个页面，为通用创建了一个页面（我可以为每个断点设置一个，或者为 web 和应用程序、android 或 iOS 设置一个库，你懂的）。...你现在可以将它粘贴到你的 Figma 文件中，它仍然是一个可扩展和可编辑的SVG，它的所有图层都包含在内。 试试阿里巴巴图标库中的复制SVG功能，那个更方便。...011.快速选择所需图层 有时候图层太多，你会无法找到所需的图层，这个时候只要在这个图层或者组的位置点击右键选择“Select Layer”，就可以快速找到你想要的图层了。
---- 首先，去哪找合适的矢量图： 阿里巴巴UX矢量库 传送门 找到你需要的图标，并下载svg 在android中打开vector assert 点击Local SVG 选择路径，并命名...嗯，到了这一步，我们已经可以自由的使用矢量图标了呢， 那怎么改变图标颜色呢？...(ColorStateList.valueOf(Color.RED));//设置状态性的，比如点击一个颜色，未点击一个颜色 DrawableCompat.setTint(a,Color.RED); /...---- 总结一下，这个矢量图的缺点吧： 1.麻烦， 需要下载->vector asset转换->用在非imageview中还要再写一个xml包裹起来才可用 2.不能随心所欲的在xml布局中任意切换图标颜色...后面要介绍的 iconfont 它的原理是，把你想要的矢量图标打包成一个ttf，在android中应用这个ttf,就可以随心所欲了，怎么个随心所欲？
有人会问了，网上也有很多博客在讲Android Studio的插件总结，为什么你还要弄一篇博客呢？...【缺点】 (1) 生成的menu需要自己复制粘贴，很麻烦。(2) 每次都要手动设置路径和包名，很麻烦。(3) 生成的点击事件需要自己去导包，很麻烦。...SVG2VectorDrawable 使用 2.Android Holo Colors Generator 通过自定义Holo主题颜色生成对应的【Drawable】和【布局文件】，点击导航栏的蓝色的 H...各种右键，各种菜单栏都找了，找不到使用方式，找了半天最后在导航栏有个蓝色的H符号，太坑了，官方也没有讲解怎么使用。 ?...(默认的是Meta + I ,windows上没有这个快捷键，我就改成了Alt + I, 点击菜单栏File -> Settinigs -> Keymap -> 搜索Translate - > 右键 add
但是有时候我们希望，在我们输入完所有东西，光标离开才更新视图。...像下面所示，刚刚我们从.stop时候知道子元素会冒泡到父元素导致触发父元素的点击事件，当我们加了这个.self以后，我们点击button不会触发父元素的点击事件shout，只有当点击到父元素的时候（蓝色背景...鼠标按钮修饰符 刚刚我们讲到这个click事件，我们一般是会用左键触发，有时候我们需要更改右键菜单啥的，就需要用到右键点击或者中间键点击，这个时候就要用到鼠标按钮修饰符 .left 左键点击 .right...右键点击 .middle 中键点击 ok 键值修饰符 其实这个也算是事件修饰符的一种，因为它都是用来修饰键盘事件的。...比如onkeyup，onkeydown啊 .keyCode 如果不用keyCode修饰符，那我们每次按下键盘都会触发shout，当我们想指定按下某一个键才触发这个shout的时候，这个修饰符就有用了，具体键码查看键码对应表
预习开始： 我遇到的第一个难题就是：菜单栏的菜单Start的子菜单DrawLine下还有子菜单DrawLineA,DrawLineB,DrawLineC，如何通过代码来实现。...接着我发现DrawLine菜单下应该是三个单选按钮，而不是像我的上图那样，于是我遇到了第二个难题，怎么设置复选框和单选按钮组，并且每次只允许选择一个按钮呢？单选按钮又如何添加监听事件呢？...预习的第七部分是如何在点击Circle、Matrix、Line、Eraser(才发现我上面写的是eraser，首字母忘记大写了)这些工具栏按钮后，出现相应的画图功能？ 预习的第七个知识点是在教材上。...看下画椭圆、画矩阵、画直线和橡皮擦的效果： ? ? 预习的第八部分是如何添加颜色选择器来改变画笔的颜色？...代码会在期末结束的时候更新在该博客和GitHub上
我们立即开始着手设计，讨论了所有的细节动画后（试着画出来并且配以音效），我便开始进行游戏开发。 如何玩: 来回弹跳的球是可以改变颜色的。...你必须随时观察球当前的颜色，并且在球和柱子相接触的一瞬间，确保两者的颜色是一样的。点击柱子可以改变它的颜色，单击变红，双击变黄，三击则变为紫色。...https://ihatetomatoes.net/get-greensock-101/ 背景动画 几乎所有你能在背景上看到的东西都是用SVG制作的。...一旦你开始使用了弹性盒子，你就再也离不开它。下面我们看下我的的主菜单界面和游戏界面吧。 ?...如果我们将界面缩小到原始尺寸的一半的时候，我们需要让它的容器放大到原来的两倍大小，这样容器便可以充满整个屏幕。
该UI设计中，将各个项目以卡片的方式堆叠排列在屏幕上，当点击了其中的某个项目的时候，该项目图片会全屏放大，向下滚动鼠标可以看到该项目的介绍信息。...该项目管理界面还提供了一个全屏的导航菜单，用户可以通过右上角的汉堡包图标来触发全屏菜单。 ?...），而它的伪元素.cd-title::before被设置为300%，实际是等于视口的高度。...它的::before伪元素是一个空白占位，它等于屏幕视口的宽度和高度，它的作用是让项目图片开始时可以全屏显示，而不是被content-wrapper的内容覆盖。...当用户点击了.cd-nav-trigger按钮之后，所有的项目被移动到屏幕的下方，这时全屏导航菜单被显示出来。
main.js 最基本的结构就是这样的 那么现在就要创建路由组件,到时候才可以让路径和路由对应起来 我在scr下的components文件夹下创建两个文件 我写了两个,一个主页(...Home)页面的一个关于(About)页面的 那设置好这些该怎么使用呢?...因为浏览器不知道我们什么时候使用哪个路由.所以我们还需要使用不同的标签,使我们的URL能发生改变 router-link用于显示标签和内容 router-view决定渲染时的位置,用于占位 App.vue...时,会使用到该类 但是通常不会修改类的属性,会直接使用默认的router-link-active即可 它的需求可能是这种: 点击了哪个按钮,就给哪个按钮变个颜色 现在给这个类添加样式:...id,那么应该怎么实现这种动态路由呢?
x等大屏的手机全糊了，当时我就懵逼了，我说怎么会呢，后面一看，果然如此啊，看了下代码，原来是用的图片，我说为什么不用svg呢？？...然后同事说一个一个的图标好麻烦，我说可以用svg sprite啊，～～＞﹏＜，这个时候轮到同事一脸懵逼了……，所以想着可能是不是同样还有很多同学也不知道SVG symbols呢，那么这就给大家分享一下：...当后来有一天，我发现了它svg,当然仅仅svg就拿出来吹水，肯定是会被人喷的一脸口水的，SVG symbols/**SVG symbols**/SVG symbols **重要的事说三遍不过份吧**，这项技术基于两个元素的使用...，还有颜色的改变，我们可以直接在svg内的 path上写行内式 fill="#06c"、style="fill:#06c";都是可以的，在维护上，是不是比图片更加方便呢？？？ ...），随着科技的发展，IE9以上大多数人还是能接受啦，特别是手机端的用户，再也不用担心测试MM来找你，图标不清晰的问题了啦，是不是很开心，有没有～～ 以上就是今天的分享，写了蛮久，最近才在开始尝试写博客
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
