摘要: The Best Place for Error Messages on Forms https://uxmovement.com/forms/the-best-place-for-error-messages-on-forms/ Top of Form Validation Vs. Inline 阅读全文
posted @ 2021-10-08 01:05 泉油 阅读(36) 评论(0) 推荐(0) 编辑
摘要: BEST PRACTICES FOR FORM DESIGN https://static.lukew.com/webforms_lukew.pdf Top Aligned Labels 定案: 有限的宽度 Input 数量不多 需要更多的高度空间 从上到下的扫描,非常顺 Label 空间较多,合适 阅读全文
posted @ 2021-10-08 01:04 泉油 阅读(33) 评论(0) 推荐(0) 编辑
摘要: Applying white space in UI design https://uxdesign.cc/whitespace-in-ui-design-44e332c8e4a Follow the Law of Proximity 相关元素应该间隔更近。相反,不相关的元素应该间隔得更远 相同“类 阅读全文
posted @ 2021-10-08 01:03 泉油 阅读(40) 评论(0) 推荐(0) 编辑
摘要: Checkboxes,Switch,Toggle Tokens https://uxmovement.com/forms/10-usability-mistakes-most-designers-make-on-checkboxes/ https://uxmovement.com/buttons/w 阅读全文
posted @ 2021-10-08 01:00 泉油 阅读(145) 评论(0) 推荐(0) 编辑
摘要: Designing Efficient Web Forms: On Structure, Inputs, Labels And Actions SETTING DEFAULT VALUES https://www.smashingmagazine.com/2017/06/designing-effi 阅读全文
posted @ 2021-10-08 00:58 泉油 阅读(25) 评论(0) 推荐(0) 编辑
摘要: Design Better Forms https://medium.com/nextux/design-better-forms-96fadca0f49c 一列 input: Forms should be one column 多列干扰用户的垂直动量 Z 或 N 字形扫描影响用户体验 Top a 阅读全文
posted @ 2021-10-08 00:57 泉油 阅读(32) 评论(0) 推荐(0) 编辑
摘要: Optimal Size and Spacing for Mobile Buttons https://uxmovement.com/mobile/optimal-size-and-spacing-for-mobile-buttons/ Button Size Standard 小过 42 或者 大 阅读全文
posted @ 2021-10-08 00:56 泉油 阅读(28) 评论(0) 推荐(0) 编辑
摘要: 1. Multi-step forms out-perform single-step forms https://www.ventureharbour.com/form-design-best-practices/ 多个步骤的表单胜过单个表单 3. Use conditional logic to 阅读全文
posted @ 2021-10-08 00:55 泉油 阅读(22) 评论(0) 推荐(0) 编辑
摘要: Principles of spacing in UI Design (Part 2) https://medium.com/dwarves-design/the-principle-of-spacing-part-2-e3cf31b909fa Vertical spacing Spacing wi 阅读全文
posted @ 2021-10-08 00:53 泉油 阅读(32) 评论(0) 推荐(0) 编辑
摘要: 复杂的表单:Form Design for Complex Applications https://medium.com/nextux/form-design-for-complex-applications-d8a1d025eba6 Modal 低复杂和少 input Focus 看到的,被遮罩 阅读全文
posted @ 2021-10-08 00:46 泉油 阅读(106) 评论(0) 推荐(0) 编辑
摘要: 有些时候我们要图片, iframe 配合容器比例,比如容器 4:3, 图片是 16:10, 而我们需要图片 object-fit: cover css 要实现这样的容器比例,之前都是用 hack 的方式 容器通过 padding-botom 给一个比例,同时给 relative。 图片就定位于容器。 阅读全文
posted @ 2021-09-26 16:26 泉油 阅读(119) 评论(0) 推荐(0) 编辑
摘要: 基础概念:把 CSS 换成 JS @keyframes openAnimation { 0% { transform: scale(0); } 100% { transform: scale(1); } } 换成 const openAnimation = [ { transform: 'scale 阅读全文
posted @ 2021-09-23 13:37 泉油 阅读(42) 评论(0) 推荐(0) 编辑
摘要: 天啊~ 又是 Safari,这功能是限制用户选择的日期 Link https://stackoverflow.com/questions/35682138/html5-date-picker-doesnt-show-on-safari https://caniuse.com/input-dateti 阅读全文
posted @ 2021-09-23 13:11 泉油 阅读(345) 评论(0) 推荐(0) 编辑
摘要: 我一开始也是认为要把 sticky 放在 thead or tr, 但是大家说不能这样。具体原因,我也不知道…… 总之先 follow 吧 Link https://css-tricks.com/position-sticky-and-table-headers/ https://bugs.chro 阅读全文
posted @ 2021-09-23 13:06 泉油 阅读(175) 评论(0) 推荐(0) 编辑
摘要: 追踪网页 trigger 是通过 ID or Class, Tag Manager 给出 3 个基本设置 虽然匹配到多个 element, 但只触发一次 匹配到多个 element, 每个 element 触发一次 动态更新 element 后,触发一次 高级设置 最少内容展现百分比 element 阅读全文
posted @ 2021-09-23 12:52 泉油 阅读(39) 评论(0) 推荐(0) 编辑
摘要: append() appendChild() const child = document.createElement('p');parent.append(child); ok ok parent.append('Appending Text'); ok fail console.log(pare 阅读全文
posted @ 2021-09-23 12:27 泉油 阅读(181) 评论(0) 推荐(0) 编辑
摘要: 什么是 ICB ? Media query 依赖是 ICB 的高度。 media query 不会因为 URL bar 隐藏起来后,就依赖 largest possible viewport @media screen and (max-height:617px) { body{ backgroun 阅读全文
posted @ 2021-09-21 13:54 泉油 阅读(51) 评论(0) 推荐(0) 编辑
摘要: 在过渡中,都是 ease-in, cubic-bezier,我们只要声明时间,比如 10秒,那么最终每一个帧都会看到动画。 那么如果要 10 秒中的第 0%, 50%, 100% 呢?意思是我们只看到开始,中间,结束的 3 个画面。 这功能看起来不错,能自己做一个 gif animation: dr 阅读全文
posted @ 2021-09-12 12:03 泉油 阅读(135) 评论(0) 推荐(0) 编辑
摘要: 一般的 mix 写法 transition: 3000ms opacity, 5000ms max-height; 分开的写法 transition-duration: 3000ms, 5000ms; transition-property: opacity, max-height; 使用 mix 阅读全文
posted @ 2021-09-12 11:30 泉油 阅读(144) 评论(0) 推荐(0) 编辑
摘要: 猜猜看最终看到那个颜色? :root { background-color:blue; } html{ background-color:red; } 答案是 :root :root 和 html 都是 HTML element,记得 :root 比 html 大。 伪类选择器比一般选择器来的大,比 阅读全文
posted @ 2021-09-10 01:20 泉油 阅读(144) 评论(0) 推荐(0) 编辑
摘要: spec 是这么解释的 如果根元素上的值是“visible”,则用户代理(游览器)必须将第一个这样的子元素的 “overflow” 属性应用到视口。 场景 当 body style height 50%; overflow:scroll, 是无效的 游览器会把 overflow 搬去 viewpor 阅读全文
posted @ 2021-09-05 20:02 泉油 阅读(30) 评论(0) 推荐(0) 编辑
摘要: HTML, body 没有高度,body 依赖 内容来撑自己的高,而 HTML 也是依赖 body 撑自己的高。 这不符合我们看到的,所以市场开始出现 html, body { height: 100%; } 可是 body 的内容是会超过 100% 的,那么比较合适的是做成 min-height 阅读全文
posted @ 2021-09-02 12:39 泉油 阅读(40) 评论(0) 推荐(0) 编辑
摘要: 从 2011 safari ios 6 开始出现这问题 比如当某个内容使用了 100vh, 在 URL bar 出现和隐藏时,高度会不一样 vh 行为开始改版 到了 2016 年,chrome mobile 56 开始固定了,不在依赖 URL bar 这里有 3 个概念 vh (viewport h 阅读全文
posted @ 2021-09-02 12:24 泉油 阅读(80) 评论(0) 推荐(0) 编辑
摘要: 第一个疑问,为什么不用 plugin? 首先我需要在手机 scroll down(touch move up) 时,address 会自动收起。而市场的 carousel plugin 都是固定的高度,没办法够我用 scroll-snap-type 看上去能解决我的需求 看这个例子,它只需要判断要停 阅读全文
posted @ 2021-08-28 15:56 泉油 阅读(406) 评论(0) 推荐(0) 编辑
摘要: 如果需要调用 scrollbar 来改变布局,基本需要了解以下调用 scrollbar 是谁负责,答案是 window Window.scrollY || Window.pageYOffset window scroll 了多少 2 decimal point alias for the pageY 阅读全文
posted @ 2021-08-28 14:59 泉油 阅读(39) 评论(0) 推荐(0) 编辑
摘要: 如果没办法指定一个国家的语言,那么就指定语言。 Resource https://www.seozac.com/en-seo/hreflang-tag/ https://developers.google.com/search/docs/advanced/crawling/localized-ver 阅读全文
posted @ 2021-08-28 14:39 泉油 阅读(81) 评论(0) 推荐(0) 编辑
摘要: 如果不要兼容旧的游览器,那么就按照 best practice 去做 <link rel="icon" href="/favicon.ico" sizes="any"><!-- 32×32 --> <link rel="icon" href="/icon.svg" type="image/svg+x 阅读全文
posted @ 2021-08-28 14:24 泉油 阅读(385) 评论(0) 推荐(0) 编辑
摘要: 官网的内容不好理解,我大概整理了一遍 my_namespace (类型) Music Video Article Book Profile Website (默认) URL https://ogp.me/ns/music# https://ogp.me/ns/video# https://ogp.m 阅读全文
posted @ 2021-08-27 22:50 泉油 阅读(189) 评论(0) 推荐(0) 编辑
摘要: schema.org 这是 Google, Yahoo, Bing 一起搞出来的规范,主要是统一网页内容标签,让网站站长可以只开发一套内容标签,就能符合所有游览器 JSON-LD 和这东西雷同的有 RDFa. Microdata, 而 Google 推荐 JSON-LD 以上 3 个表达,底层是 s 阅读全文
posted @ 2021-08-27 22:20 泉油 阅读(132) 评论(0) 推荐(0) 编辑
摘要: 要兼容 IE 就需要这段代码, Content 是说当下要用那个游览器的功能,一下是设置内容 "IE=edge""IE=11""IE=EmulateIE11""IE=10""IE=EmulateIE10""IE=9""IE=EmulateIE9"IE=8""IE=EmulateIE8""IE=7"" 阅读全文
posted @ 2021-08-27 21:42 泉油 阅读(72) 评论(0) 推荐(0) 编辑
摘要: <link rel="shortlink" type="text/html" href="http://flic.kr/p/6XuLyD"> shortlink 的链接网页是给有局限环境下使用,比如只能通过声音或打印。 阅读全文
posted @ 2021-08-27 21:34 泉油 阅读(310) 评论(0) 推荐(0) 编辑
摘要: HTML 2 1995 HTML 3 1997 HTML 4 1997 HTML 5 2014 XHTML 1.0 2000 XHTML 1.1 2001 XHTML 2.0 2009 XHTML5.1 在 HTML5 草案中与 HTML5 一起定义 我们可以理解 XHTML 就是 HTML 4 之 阅读全文
posted @ 2021-08-27 21:26 泉油 阅读(74) 评论(0) 推荐(0) 编辑
摘要: 当打开游览器 ctrl + P 和用 puppeteer generate PDF 时,需要知道有个固定的 HTML 结构 HeaderTemplate BodyTemplate FooterTemplate 当使用 1rem 时,HeaderTemplate & FooterTemplate 都依 阅读全文
posted @ 2021-07-12 13:37 泉油 阅读(234) 评论(0) 推荐(0) 编辑
摘要: 减少 CSS 中的动画效果,是不是很简单理解? 这是 media query 的一种,是判断用户的游览器有被设置才会有效果,所有游览器都支持(除了 IE) 是 Media Queries Level 5,Editor's Draft(但是所有游览器都支持咯) @media (prefers-redu 阅读全文
posted @ 2021-04-24 11:45 泉油 阅读(266) 评论(0) 推荐(0) 编辑
摘要: 场景是当用户在 control panel 输入的内容出现开引号(")同时我们拿这个内容去放在 html element attribute 上这时会自动被 encode 掉,接着我们需要通过 JS 和 CSS 去选和指定的 element 通常遇上特别的符号需要添加斜杠(/)CSS 添加斜杠可以成 阅读全文
posted @ 2021-04-21 09:17 泉油 阅读(82) 评论(0) 推荐(0) 编辑
摘要: 目前都是在用 scss,可是都已经到了 style component 的阶段了,而我还没有进步。原因是我一直都要用 angular,而他也在用 scss,相信日后会往这里走。 SCSS 之后是 CSS module,CSS module 之后是 style component而我先学基础,日后在去 阅读全文
posted @ 2021-03-16 12:35 泉油 阅读(51) 评论(0) 推荐(0) 编辑
摘要: 新用户在填写表格时, 需要看 label, 而 stacked 是最合适的, 因为可以看到 label 和 input 在一起, 读起来就顺. 相反的, 经常使用同个表格的用户, 对表格布局非常熟悉, 他们会避开看 label, 只看 input 那么 side by side 就对用户来说比较顺. 阅读全文
posted @ 2021-02-20 21:06 泉油 阅读(104) 评论(0) 推荐(0) 编辑
摘要: 阅读全文
posted @ 2021-02-18 22:30 泉油 阅读(69) 评论(0) 推荐(0) 编辑
摘要: table 由于留白很多, 可以善用空间, 扣分的地方是重复显示 UOMHeader cell 显示 UOM, 处理 currency 不用(ads 是这样的) Excel 用户可能会需要自己算 formula, 所以 number 不能是 string例子: 10 cm Form 需要在 inpu 阅读全文
posted @ 2021-02-05 17:22 泉油 阅读(59) 评论(0) 推荐(0) 编辑
摘要: dialog animation 会 scale(0.7) => scale(0.1), keepBigger 组件会拿到的 size 是 scale(0.7) 因为通过 getBoundingClientRect 去拿, 好处是精准, 坏处是拿到 scale 当下的状况 为了拿到对的 size, 阅读全文
posted @ 2021-02-04 12:46 泉油 阅读(52) 评论(0) 推荐(0) 编辑
Web Design Johor Bahru Malaysia - Stooges