 |
wsWmswV2EX 第 481673 号会员，加入于 2020-04-04 22:49:40 +08:00今日活跃度排名 14732 |
| 1k 预算，如何推广我的 React 导航栏组件库 分享创造 • wsWmsw • 49 天前 • 最后回复来自 wsWmsw | 1 |
| hanav 助你开发动画流畅、高可访问、键盘可控的导航栏
1 分享创造 • wsWmsw • 113 天前
|
| macOS 自定义鼠标指针颜色 分享发现 • wsWmsw • 117 天前 |
| 一款 React 导航栏菜单组件，支持⌨️全键盘和♿️屏幕阅读器访问，具有流畅的动画 分享创造 • wsWmsw • 253 天前 |
| 工作里提取开源了一个 React 导航栏组件，再写个有点气质的主页搭配宣传 分享创造 • wsWmsw • 91 天前 • 最后回复来自 wsWmsw | 3 |
| 这两个 IM 工具在日本打开的速度分别是几秒，有日本的 V 友用电脑帮忙测下嘛～ 日本 • wsWmsw • 334 天前 |
| 兼容宽屏的移动端页面适配方法 前端开发 • wsWmsw • 359 天前 |
| 聚焦术！浏览器的焦点管理 JS 库
2 分享创造 • wsWmsw • 2023-06-30 12:01:56 PM
|
| cmd-shift-4-opt-space 不带阴影窗口截屏 macOS • wsWmsw • 2023-02-18 18:31:33 PM • 最后回复来自 wsWmsw | 9 |
| 有使用 postcss-px-to-viewport 做移动端适配，但是希望限制最大宽度的朋友吗，可以试试我新写的 postcss 插件 分享创造 • wsWmsw • 2023-02-15 16:50:28 PM |
wsWmsw 最近回复了
1 天前 回复了 islaohu 创建的主题 › 酷工作 › [深圳] 前端开发工程师（AI Agent 方向） |
加班作息和双休情况怎样的？
13 天前 回复了 feeloong 创建的主题 › 职场话题 › 失业 3 个月， Offer 二选一 |
不固定，我记得秋冬是 9 点，下班看进度，正常都不会有排期紧到加班的情况，之前我的上级的确明确不提倡加班，比较佛系。我加班纯属是指导同事改 bug==但是部门不同，好像后来我们上级也换了，不知道现在加班情况了
13 天前 回复了 feeloong 创建的主题 › 职场话题 › 失业 3 个月， Offer 二选一 |
旺旺以前我在的部门不提倡加班，加班要申请，而且有最长加班时间限制
21 天前 回复了 wweerrgtc 创建的主题 › 分享发现 › 发现一个摸鱼好去处, 情感话题比较多 |
28 天前 回复了 xiyuesaves 创建的主题 › 分享创造 › 上班闲的没事摸鱼做了个三面翻广告牌的翻页效果 |
竖线问题不大，真的广告牌也漏缝==
36 天前 回复了 pureGirl 创建的主题 › Web Dev › 什么样的网站算设计精良的 |
@shui14 Headless UI 确实推了一把，他们都把 a11y 做亮点宣传的，质量都很高。
37 天前 回复了 pureGirl 创建的主题 › Web Dev › 什么样的网站算设计精良的 |
@wsWmsw 苹果别的细节还很多，有个场景非常普遍，苹果所有的视频或动图，一定都有暂停按钮。
38 天前 回复了 pureGirl 创建的主题 › Web Dev › 什么样的网站算设计精良的 |
苹果算是设计精良的，举个例子：
上面苹果的 iPhone 广告栏有 3 个触发点，背景、“进一步了解”链接、“购买”链接，多数人可能会、也是错误的实现方法是：
```html
<a style="background: url(iphone.jpg)" href="/1">
<a href="/1">进一步了解</a>
<a href="/2">购买</a>
</a>
```
这样实现的结果是不符合 W3C 规范，因为可聚焦元素不允许嵌套：
苹果用了特殊的方法实现，同时满足了用户、营销和规范要求，大致下面这样：
```html
<div style="background: url(iphone.jpg);">
<a href="/1" style="position: absolute; width: 100%; height: 100%;"></a>
<div>
<a href="/1">进一步了解</a>
<a href="/2">购买</a>
</div>
</div>
```
上面的实现，没有嵌套链接，但是有同样的效果。从工程师的角度，这个设计够精良。
苹果首页还有个特点，点击区域几乎占满了屏幕，用户随便点点都能跳转到新页面。小米也继承了这个说不上好坏的设计，但是苹果的可点击区域不是 button 就是 a 标签，用户能预判接下来是按钮操作还是跳转新页面，小米的页面一律 div 加上点击事件实现链接跳转。
我在小米首页点击，除了导航栏几个链接，别的差不多都是 div ，无法被聚焦。
上面苹果的 iPhone 广告栏有 3 个触发点，背景、“进一步了解”链接、“购买”链接，多数人可能会、也是错误的实现方法是：
```html
<a style="background: url(iphone.jpg)" href="/1">
<a href="/1">进一步了解</a>
<a href="/2">购买</a>
</a>
```
这样实现的结果是不符合 W3C 规范，因为可聚焦元素不允许嵌套：
苹果用了特殊的方法实现，同时满足了用户、营销和规范要求，大致下面这样：
```html
<div style="background: url(iphone.jpg);">
<a href="/1" style="position: absolute; width: 100%; height: 100%;"></a>
<div>
<a href="/1">进一步了解</a>
<a href="/2">购买</a>
</div>
</div>
```
上面的实现，没有嵌套链接，但是有同样的效果。从工程师的角度，这个设计够精良。
苹果首页还有个特点，点击区域几乎占满了屏幕，用户随便点点都能跳转到新页面。小米也继承了这个说不上好坏的设计，但是苹果的可点击区域不是 button 就是 a 标签，用户能预判接下来是按钮操作还是跳转新页面，小米的页面一律 div 加上点击事件实现链接跳转。
我在小米首页点击，除了导航栏几个链接，别的差不多都是 div ，无法被聚焦。
38 天前 回复了 pureGirl 创建的主题 › Web Dev › 什么样的网站算设计精良的 |
淘宝设计很多问题，举个例子：
上面的图片是淘宝首页的工具栏，我的鼠标点击后，如果元素周围出现方框，代表元素能被聚焦，可以看作按钮或链接，但实际上第二个“消息”元素无法触发方框，而这个元素点击后和其它工具栏里的元素作用一样，跳转到新页面。
可以看出来，单这个工具栏的实现就比较混乱，在用户场景的问题是，用户用键盘 Tab 会从第一个工具 Tab 到第三个工具。
还有个问题国内很常见，淘宝首页无限滚动，永远看不到网站的脚步信息栏，参考 dribbble ，dribbble 会在滚动加载第三次展示“load more”按钮，让用户手动决定是否继续加载。
上面的图片是淘宝首页的工具栏，我的鼠标点击后，如果元素周围出现方框，代表元素能被聚焦，可以看作按钮或链接，但实际上第二个“消息”元素无法触发方框，而这个元素点击后和其它工具栏里的元素作用一样，跳转到新页面。
可以看出来，单这个工具栏的实现就比较混乱，在用户场景的问题是，用户用键盘 Tab 会从第一个工具 Tab 到第三个工具。
还有个问题国内很常见，淘宝首页无限滚动，永远看不到网站的脚步信息栏，参考 dribbble ，dribbble 会在滚动加载第三次展示“load more”按钮，让用户手动决定是否继续加载。
43 天前 回复了 gaomengyu42 创建的主题 › 职场话题 › 为什么现在很多人对前端很悲观？ |
@Track13 你导航的时候用命令行敲呀
Select Language