V2EX wsWmsw 的所有回复第 1 页 / 共 4 页

苹果算是设计精良的，举个例子：

https://i.imgur.com/9aEcp32.gif

上面苹果的 iPhone 广告栏有 3 个触发点，背景、“进一步了解”链接、“购买”链接，多数人可能会、也是错误的实现方法是：

```html
<a style="background: url(iphone.jpg)" href="/1">
<a href="/1">进一步了解</a>
<a href="/2">购买</a>
</a>
```

这样实现的结果是不符合 W3C 规范，因为可聚焦元素不允许嵌套：

https://i.imgur.com/3nq3q4I.png

苹果用了特殊的方法实现，同时满足了用户、营销和规范要求，大致下面这样：

```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 加上点击事件实现链接跳转。

https://i.imgur.com/j36jpRb.gif

我在小米首页点击，除了导航栏几个链接，别的差不多都是 div ，无法被聚焦。

241 天前

回复了 pureGirl 创建的主题 Web Dev 什么样的网站算设计精良的

淘宝设计很多问题，举个例子：

https://i.imgur.com/v1X5F7F.gif

上面的图片是淘宝首页的工具栏，我的鼠标点击后，如果元素周围出现方框，代表元素能被聚焦，可以看作按钮或链接，但实际上第二个“消息”元素无法触发方框，而这个元素点击后和其它工具栏里的元素作用一样，跳转到新页面。

可以看出来，单这个工具栏的实现就比较混乱，在用户场景的问题是，用户用键盘 Tab 会从第一个工具 Tab 到第三个工具。

还有个问题国内很常见，淘宝首页无限滚动，永远看不到网站的脚步信息栏，参考 dribbble ，dribbble 会在滚动加载第三次展示“load more”按钮，让用户手动决定是否继续加载。

https://i.imgur.com/tgPpNfi.gif

https://i.imgur.com/IQfACol.gif

247 天前

回复了 gaomengyu42 创建的主题职场话题为什么现在很多人对前端很悲观？

@Track13 你导航的时候用命令行敲呀

247 天前

回复了 gaomengyu42 创建的主题职场话题为什么现在很多人对前端很悲观？

@julyclyde 前端是个大范围，你 IDE 编码的界面是前端，你操作系统窗口是前端，你用的 Figma 用到前端计算几何，你命令行报错的红线是前端，安卓、iOS 应用是前端，你能看到的不都是前端吗？怎么就和 3D 、音视频没关系了？

253 天前

回复了 wsWmsw 创建的主题分享创造 1k 预算，如何推广我的 React 导航栏组件库

我之前有工具类项目做推广，是通过给其他项目做 pr ，其他项目会在文档里提到我，是有效果的。但是这个导航栏库想找到能提 pr 的开源项目很难，一般需要官网、展示类型的网站，非常少。

277 天前

回复了 lguoachn 创建的主题酷工作 [北京/上海/深圳] Meshy 招全职后端 / 前端不加班不打卡

单休 or 单双休 or 双休？