编者按：今天百度的同学来聊聊产品思维，让设计师从产品的角度入手，站在多维度考虑用户的问题、解决方法、产品目标和产品营销等，来看看不一样的思维能碰撞出哪样的火花。

文章略长，不过肯定是考据狂和狂热粉的最爱，你是从哪一代开始追iOS的呢？

2007年1月9日，乔布斯向世界展示了iPhone一代，这是这位已故传奇向这个时代馈赠的最佳礼物，同时也预示着，一场精妙绝伦的大戏正式拉开帷幕，iPhone,iPad以及Touch对”移动设备”进行了重新定义。更华丽，也更具人性化。

世界变幻莫测，那时候的移动操作系统中，iOS只是个”小字辈”，资历尚浅，到了今天呢，多少操作系统黯然消失在我们的视线中，而iOS俨然成为了操作系统江湖的”老字辈”。

老，并不意味着iOS失去创意了，恰恰相反,iOS以崭新的姿态继续前行。随着逐年的增强和提高,iOS已经变成了市场上最具个性、支持最广泛的操作系统。

iOS6，经过数年的磨砺，已经无限接近拟物设计的最顶峰，用隐喻设计引导者用户，操作简单易懂。而且多平台(iPhone、iPad)上的体验相对一致，对于开发者和设计师来说，这都是一个理想的”温床”。

再想一个问题，比较一下iOS1和iOS6，你会发现还是拥有很多共通点的。苹果像是一位颇有耐心的面包师，慢慢的烘焙，花了数年时间，为我们特制了一款色香味俱全的”苹果派”，你想想其他操作系统的做法吧：无限的功能蔓延，蔓延来蔓延去，淘汰了一批，又新来了一批功能。

这是个怪圈，苹果很明智的没有选择这种道路。iOS努力的保持着整体的一致性，与此同时又不放弃前卫创意，难能可贵。

而今年的9月18日，iOS7发布——新的启航。

来看看iOS的历史，看看苹果是怎样一点一滴进行优化、完善的。

从OS X中蔓延出来的IOS

在iPhone早期的声明中，我们会发现会叫做”iPhone OS”。

刚开始的时候，苹果内部争论不休，他们在考虑是否要和Mac OS X一样使用Unix内核，这样做会保持新手机的系统和OS X的一致性。

但是，这毕竟是一个完全不同的新品牌，应该有所区别。因此，采用Unix内核的操作系统被命名为”iPhone OS”，这个名字一直使用了4年。直到2010年六月发行iOS4的时候，出于简化的目的，开始称之为”iOS”

iOS 1: iPhone诞生

虽然现在很难以想象当时的情形，但是当iPhone1公布的时候，如果严格比较功能的话，iPhone落后他的竞争对手一大截，Windows Mobile,Palm OS,Symbian,BlackBerry的操作系统都有一大堆功能，远超iPhone。

编者按：今天这篇译文全程满满当当的都是干货，包含超多的实用经验，比如让元素在各个尺寸中保持边界清晰的技巧，切片的专业方法，命名规则等，绝对值得每个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 是传说中的标注神器，看起来也确实方便快捷，但是当一个页面中，要同时标注间距、大小、颜色和字号时，过多的信息一齐扔给工程师，就会让人有些抓狂。比如这样：