编者按：今天这篇译文全程满满当当的都是干货，包含超多的实用经验，比如让元素在各个尺寸中保持边界清晰的技巧，切片的专业方法，命名规则等，绝对值得每个UI设计师收藏起来！

如果你想让你的排版拥有更令人愉悦的阅读体验，其实只需要有针对性地对三个方面进行调整就可以了。这些技巧不仅可以运用于设计领域，哪怕你用在文本文档排版上都能收到奇效！

第一、常见蜘蛛：蜘蛛其实就是搜索引擎用来访问页面的程序，英文叫spider，也称为机器人，英文为bot。有时候查看IIS日志就能看到各种蜘蛛访问网页的情况，对网站的优化起到一定的指导作用。当蜘蛛访问一个网站时，会发出页面访问请求并返回HTTP状态码，然后蜘蛛会把这些状态码存入自己的数据库，为以后的各种计算做铺垫。常见的蜘蛛有百度蜘蛛(Baiduspider)、雅虎蜘蛛(Mozilla)、微软Bing蜘蛛(msnbot)、搜狗蜘蛛(Sogou+web+bot)、Google蜘蛛(Googlebot)等。一般情况下，IIS日志都会有显示，站长们应该多花点时间仔细看下蜘蛛对自己网站的访问情况，然后对自己网站做出调整。

第二、文件存储：文件存储是搜索引擎的一个技术关键所在，同时也是面临的一个挑战。当搜索引擎爬行和抓取完成后，会把这些数据存入原始页面数据库。在这个数据库存放的数据和用户在浏览器中看到的页面是完全一样的。每个URL都会有一个独特的编号。除此之外，还要存储各种计算权重所需要的数据，比如各种链接的关系，PR的迭代计算等。这些数据量是巨大的。很多网站不存在时，我们可以访问搜索引擎的快照页面，这些页面就是存在搜索引擎自己的数据库中，与站长网站本身的数据没有关系，是独立存在的。平时的快照更新、排名波动都和搜索引擎的文件存储有着直接的关系。

编者按：以下内容摘自《美国视觉设计学院之完形设计》，新手可以多看这些法则，并运用到你的设计过程中，防止自己做出甲方式审美的作品。

著名的室内设计大师Charles Eames曾说过，“细节并不只关乎它们本身，它们还构成了设计。”的确，每一个网页都是由无数的细节构成，而其中的内容也是同样由这些细节连接组织到一起。不论是提供信息服务的网站，还是APP的官方宣传页，任何一个优秀的网站都能够经受得起挑剔眼光的洗礼，从图片到布局，从字体到架构。

网页设计的细节至关重要，因为正是它们给用户留下好印象，这些细节支撑起网站的良好体验，提高易用性。正如同Eames所说，它们成就了设计，不注意细节会让设计感流失。

优秀的网站有着不一样的亮点，但一样地专注细节：《这样才过瘾！2014年最佳网站评选结果出炉

接下来，我们一同看看这11款设计惊艳的网站。它们的好设计源于细节，有的界面雅致，有的交互出彩。深入揣摩这些案例，也许你的下一个网页设计作品会非常强大。

THE SPEED OF BASECAMP’S PASSWORD VERIFICATION

Basecamp 是一个基于网页的项目管理工具。正如同它的介绍，速度和效率是至关重要的。

这是网站的验证界面，设计师巧妙的事先隐藏了确认的按钮，只有当你输入了正确的验证码之后，OK按钮才会出现。这种措施不仅提高了网站的性能，还通过让按钮从无到有，将“验证码正确”的概念具现化，触动用户，增加成就感。

COLOPHON PRACTICED BY NEOTERIC DESIGN

在欧洲，在书中使用Colophons（题跋）可以追溯到15世纪的时候（中国就早很多了），不过这个网站是为了将其运用到网站上去。这次，Neoteric Design分享了他们网站的制作笔记——各个部分的功能，从字体软件到编程语言和内容管理系统。如果访客想知道一个网站是如何构建起来的，那么这个带题跋的笔记可以帮助用户方便快捷得了解这个网站的构建过程，满足好奇心。

GW模式。（G=graphic,W=words）即为图案＋文字模式。图案经常为一些可以表示“空白”隐
喻的图案或者是自家应用的吉祥物相关的图案，抑或是可以为跟页面引导相关的图案。文字一般包含：标题，说明。标题通常是解释此处空白的原因，如
“Oops,地理定位被关闭啦，无法使用该功能哦”，“网络出问题啦”等，说明则解释出现此状况的原因和解决办法等。文案的风格经常根据产品的调性去设
计，有些走卖萌路线，有些走高冷路线，有些甚至走狂暴路线等等。鉴于此类型是一种最常见的类型，单纯的包涵文字或单纯包涵图案的设计手法也归纳到GW模式
中。如下图：

Navicon，也就是汉堡图标，已经成为越来越多网页设计导航模块时的首选了。相比于传统的导航栏，隐藏式菜单导航在设计和用户体验上有着它独到的地方。作为一个随着移动端设计发展而崛起的网页设计元素，Navicon并没有减弱它引导用户的功能性，也没有丧失它作为基础网页组件的重要性，还为设计师和开发者提供了更大的创作空间。

如何正确使用Navicon取决于项目的实际状况，相对保守的站点可能不会考虑这个选择，而不少追求时尚简约、多平台体验统一的新兴网站可能会更加青睐Navicon，因为作为导航接口的它小巧而讨喜，轻松配合大图和时尚的网页设计，并且隐藏起复杂的、零碎的导航内容菜单。

Navicon很单调么？并非如此。借助额外的打开过程动效和抓人眼球的细节效果，Navicon拥有非常大的提升空间和设计可能性以及良好的用户体验。更重要的是，它适用于各类导航：不仅可以清楚的传达信息，而且有助于解决响应速度方面的问题，并且能够促进网页在多平台设计上的统一。

如何设计一个靠谱的Navicon：《数据告诉你真相！汉堡图标并非最佳菜单方案》
深入了解不同的导航模式：《交互基础知识科普！带你认识最热门的12种导航模式》

接下来，我们通过一系列的网页设计，来深入了解Navicon和隐藏式菜单导航的魅力。

eWebDesign

大图背景和视差强化了网站视觉，Navicon菜单按钮在右上角，点击打开你会看到一个设计非常细致的导航菜单。

Sampedro

时尚的照片放置与网页的页头，配合着时髦的Slogan吸引着用户全部的吸引力。隐藏的导航栏是个理想的解决方案，它让用户将注意力从复杂的导航转移到内容上。

为什么传统的标注方法让人难受？

没错，Markman 是传说中的标注神器，看起来也确实方便快捷，但是当一个页面中，要同时标注间距、大小、颜色和字号时，过多的信息一齐扔给工程师，就会让人有些抓狂。比如这样：

编者按：今天@十萬個為什麽 同学的译文讨论了当下最热门的11种设计模式，每种模式都有特别深入的讲解以及对应的APP范例，全是多年沉淀下来的通用型设计经验，绝对是百里挑一的干货。

任何移动应用，若没有用户起初和持续不断的输入，就什么也不会发生。因此，移动产品设计师、开发者和产品经理要了解最佳的输入方式，这点至关重要。尽管移动应用——还有使用它们的用户——通常都很独特，但仍有很多通用模式（新旧都有）用来解决这一特殊问题。

移动应用的设计中，最容易被忽视的地方就是空白或者异常情况的设计。从传统PC时代web的异常页面如404，502等页面的设计体验迁移过来，移动应用的空页面，网络故障页面等展示也有相似的设计模式。从以前的纯文本的排版设计，到后来404成为设计师们
展示图形创意的舞台，移动应用的空白情况页面的设计也从纯文本提示到后来精彩纷呈。然而在移动应用的设计中，空白页面的的作用不仅仅在于给用户以温柔或者
精彩的提醒，安抚用户焦急或是疑惑的情绪，更重要的是，空白情况页面可以引导用户去填补“空白”。人都是害怕空虚寂寞冷的，当你面对一个空虚寂寞冷的页面
的时候，善意的指点迷津的一些语言和画面告诉你咱们还是可以有方法来填补你的寂寞空虚冷，这时候，用户的操作行为就会被触发，潜移默化中指引用户完成填补
空白的工作，那么，无论从用户个体的活跃度上还是整体的留存率，活跃度上，你设计的空白页面做到了拉升的作用，对电商产品和社交产品等来说，这些页面可谓
是自己展示产品调性，曝光功能，加深引导的黄金地段。