在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 资源管理器上下文菜单
---- 首先,去哪找合适的矢量图: 阿里巴巴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
微调文本,颜色和数值 选择一个彩色形状并打开颜色菜单,按住 shift 键并上下移动方向键。您可以看到颜色“一点点的变化”。如果您使用鼠标滚轮,也可以更改颜色的色调。...如果在缩放时按住 alt,这也会改变不透明度。您还可以微调任何其他字段,例如行高。 提示:在排版和行高上使用 4 或 8pt 的幅度来设置你的字体比例!...而且您的组件名称又好又短。 在我的示例中,我为移动设备创建了一个页面,为通用创建了一个页面(我可以为每个断点设置一个,或者为 web 和应用程序、android 或 iOS 设置一个库,你懂的)。...你现在可以将它粘贴到你的 Figma 文件中,它仍然是一个可扩展和可编辑的SVG,它的所有图层都包含在内。 试试阿里巴巴图标库中的复制SVG功能,那个更方便。...011.快速选择所需图层 有时候图层太多,你会无法找到所需的图层,这个时候只要在这个图层或者组的位置点击右键选择“Select Layer”,就可以快速找到你想要的图层了。
但是有时候我们希望,在我们输入完所有东西,光标离开才更新视图。...像下面所示,刚刚我们从.stop时候知道子元素会冒泡到父元素导致触发父元素的点击事件,当我们加了这个.self以后,我们点击button不会触发父元素的点击事件shout,只有当点击到父元素的时候(蓝色背景...鼠标按钮修饰符 刚刚我们讲到这个click事件,我们一般是会用左键触发,有时候我们需要更改右键菜单啥的,就需要用到右键点击或者中间键点击,这个时候就要用到鼠标按钮修饰符 .left 左键点击 .right...右键点击 .middle 中键点击 ok 键值修饰符 其实这个也算是事件修饰符的一种,因为它都是用来修饰键盘事件的。...比如onkeyup,onkeydown啊 .keyCode 如果不用keyCode修饰符,那我们每次按下键盘都会触发shout,当我们想指定按下某一个键才触发这个shout的时候,这个修饰符就有用了,具体键码查看键码对应表
我们立即开始着手设计,讨论了所有的细节动画后(试着画出来并且配以音效),我便开始进行游戏开发。 如何玩: 来回弹跳的球是可以改变颜色的。...你必须随时观察球当前的颜色,并且在球和柱子相接触的一瞬间,确保两者的颜色是一样的。点击柱子可以改变它的颜色,单击变红,双击变黄,三击则变为紫色。...https://ihatetomatoes.net/get-greensock-101/ 背景动画 几乎所有你能在背景上看到的东西都是用SVG制作的。...一旦你开始使用了弹性盒子,你就再也离不开它。下面我们看下我的的主菜单界面和游戏界面吧。 ?...如果我们将界面缩小到原始尺寸的一半的时候,我们需要让它的容器放大到原来的两倍大小,这样容器便可以充满整个屏幕。
预习开始: 我遇到的第一个难题就是:菜单栏的菜单Start的子菜单DrawLine下还有子菜单DrawLineA,DrawLineB,DrawLineC,如何通过代码来实现。...接着我发现DrawLine菜单下应该是三个单选按钮,而不是像我的上图那样,于是我遇到了第二个难题,怎么设置复选框和单选按钮组,并且每次只允许选择一个按钮呢?单选按钮又如何添加监听事件呢?...预习的第七部分是如何在点击Circle、Matrix、Line、Eraser(才发现我上面写的是eraser,首字母忘记大写了)这些工具栏按钮后,出现相应的画图功能? 预习的第七个知识点是在教材上。...看下画椭圆、画矩阵、画直线和橡皮擦的效果: ? ? 预习的第八部分是如何添加颜色选择器来改变画笔的颜色?...代码会在期末结束的时候更新在该博客和GitHub上
该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,那么应该怎么实现这种动态路由呢?
当代:svg 图标 FontAwesome 虽好,但也不是万能的。它往往不足以融入 UX 的 Design System,而 UX 显然也不愿意削足适履,为了图标而改变自己的整体设计。...不过,这种方式相对于字体图标还有两个缺点: 一是图标的颜色不会自动跟随文字颜色。比如原始元素定义的 rect 是红色的,那么无论你把它混排到什么颜色的文字中,它都是红色的。...那么,要如何用标准的方式来显示这些合字呢?实际上,现代的字体库早就已经支持合字了,只是在现实中用得不多,一般人没怎么注意罢了。不过,在图标领域,它重新找回了用武之地。...我所知道的最早使用合字的图标体系是 Google 的 Material Design,比如用 home就可以显示出一座房子,它是怎么工作的呢?...因此,虽然“合字”本身没有多少新的技术,但是我仍然把它归于“当代”,它值得作为一种趋势受到重视。 图标在开发中的其它方面 在实际的开发工作中,还有一些问题需要考虑。 ?
领取专属 10元无门槛券
手把手带您无忧上云