什么样的网站算设计精良的

[pureGirl]

淘宝这种算吗

[gaobh]

淘宝跟设计精良就不沾边

[mengyaoren]

Apple 官网算吧

[jiuhuicinv]

算

[8355]

一打开卡就算

[wsWmsw]

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



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

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

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

[ns09005264]

twitch.tv

[coolfan]

设计精良的不太容易看出来，设计不精良一眼就能看出来

[huage]

淘宝、京东这种，改版比较快，有问题也是正常的。

[bronyakaka]

能快速解决你的问题就挺好 如果是品牌官网就得包装一下
如果质量过硬，外观再垃圾也不重要

[mytsing520]

我建议先定义一下你认为的设计精良

[pureGirl]

@mytsing520 就是用户体验好的吧

[wsWmsw]

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



上面苹果的 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 ，无法被聚焦。

[luorain]

盲人用盲人阅读器可以和正常人差别不大地能做到他们想要做的事情。

[xavierchow]

> 盲人用盲人阅读器可以和正常人差别不大地能做到他们想要做的事情。

国内 accessibiilty 做的好的就不多，国外的网站涉及到公众服务，金融等行业以及一些大品牌的厂商，做不好 accessibility 是要吃官司的。

[longnight]

淘宝搜索出来的结果列表，各商品随鼠标 hover 浮动放大，那个框甚至不是个 html 链接而是个 Js 点击事件-------这导致用户无法用鼠标中键把链接在后台打开。 （但这事我有点不太确定，似乎后来改了？）

[levelworm]

news.ycombinator.com

类似这种全文本基本上没啥复杂脚本的。或者看看 ffmpeg 作者的网站。

[xuanbg]

看着赏心悦目，用起来丝滑连贯

[byby]

@levelworm 你是不是把淳朴当成了设计精良？

[zdw189803631]

大多都是能用就行，要说精良，那么至少盲人友好吧。

[funiuniua]

ttyu.cn 我这种算吗