移动UI设计须知

上述方案需要将每个案例和与之相关的商品或客服进行整合。如果一个案例介绍的内容超过一个，那么就应该链接到下一个内容，不要再重复。主页或商品概述可能列举每一件商品。不要再用一个独立的购物车页面重复列举那些内容，每一件商品旁边都应该设置一个“立即购买”按钮，在新的付款页面完成整个购买流程。

维恩图适用于任何类型的网站。

找到博客的帖子必须要进行两个页面的操作吗？上面的例子介绍了如何通过一个有设置的页面完成之前两个页面才能做到的工作。

这种方法只是指导方针，不是规定，在使用的过程中会根据网站的不同而有所变化。主页依然会和其他内容有重叠的部分，因为主页上常常包含整个网站的内容连接。在上述内容中，虽然下订单被合并到商品页面中，但是我们却设计出了一个新的“付款”页面。专注不是减少页面的数量，而是使整个过程变得更加流畅。

使用折叠

将内容进行合并，这是以更加复杂的设计为代价解决了导航栏的问题。幸运地是，相同的概念——统一信息的类型——能使单个页面和整个网站都从中受益。下图展示了典型的新闻类页面。

虽然这种布局方式在宽屏台式机或者笔记本电脑上能够行得通，但如果应用在智能机上就会有问题（如下图）。

借用报纸行业的一句谚语： “折痕”是读者最先看到的地方。但是折叠与其说是分界线倒不如说是新内容的开始。在使用触屏设备的时候，人们本能地知道通过手指轻轻滑动屏幕就可以滚动页面。那意味着设计师可以最大限度地发挥折叠的优势。

首先，我们一起来回顾一下使用维恩图的宗旨，将相关类型的信息进行整合。

过度使用的导航链接(通常是最先着手修改的地方)以及跳转到其他文章的广告要么被合并要么被移除。元数据出现在导航周围的空白区域。广告、目录、站点名称以及导航是否出现在屏幕顶端反映了设计师心中的优先级顺序。

当我们抛弃了最开始设想的页面概念，然后根据内容重新组织页面，就会有出人意料地效果。

上文中，新的页面元素经过重新组织后展现在一个垂直面上。概念上说，智能机的浏览器变成一扇窗，用户需要将每一块内容填充进去。不是屏幕变小了，而是与平时相比，用户每次可以看到的内容变少了。

重新思考导航条设计

手机使得设计师对传统元素进行了彻底地改造，不仅仅是重新组织。除了进行更好地改造，他们也提出疑问“我们为什么需要改造？”

用户可以通过链接列表对网站内容有大致了解，但是列表过于冗长成为设计师不得不应对的问题，如今这种趋势变得日益明显。导航条已经过时了，页面和面板的形式正在流行。越来越多的响应式网站将导航条移动到单独的页面或者采用下拉列表的形式。按照惯例，轻击包含三个水平条的图标就会显示出可点击的链接列表或者站点架构。

如上图所示，5家网站都采用了三个横条☰表示的导航图标，导航图标☰有时有解释，有时没有。轻击图标，导航就会浮现在页面上。这种方式效果不错，因为用户可以决定何时显示或隐藏链接。

奇怪地是，星巴克的图标还包含一个悬停状态，但也许并不奇怪。移动设计意味着为更多应用场合进行信息设计，而不仅仅是台式机浏览器之外支持移动设备。

消减内容

消减多余的信息不论对手机网站还是台式机网站，都同样重要。但进行信息的删减并不是那么容易的事情。因为通常情况下事物的发展过程都是从无到有。

1. 计划：要明确目标、受众、责任、如何度量成功等等。
2. 设计：创建图形，撰写素材、建立原型等等。
3. 构建：HTML, CSS, jQuery, Dojo, PHP, .NET, CMS,（在这里你可以插入最喜欢的同时最令你厌烦的缩写词）
4. 测试：在不同的浏览器中，在实际使用的过程中
5. 配置：上传至服务器，建议采取这种顺序。

这是违反用户直觉的行为，但是为了用户在使用的过程中可以更加专注，设计师就必须从开始设计的时候就进行删减。

1. 计划
2. 设计
3. 复查：为了巩固删减的成果，我们需要不断向自己发问“我们还能再做些什么？”
4. 构建
5. 测试
6. 编辑：仔细检查网站的每个部分，如果去掉某个部分，网站还能正常运行吗？
7. 再次测试：棒极了，你去掉好几个部分，但是有没有做的太过头了？
8. 配置

这不是为了删减而删减也不是为了部分用户使用方便而让网站变得低能。这是在进行信息设计，为的是能够让这些信息在用户期望之外的更多场合发挥效用。

• 帮助用户做出明智的选择：例如，一段描述性文字并不总是能服务于标题。标题本身就应该包含帮助用户决定应该点击什么的正确的关键字。缩略图应该在展示整幅图像的同时保持自身的可识别性。
• 练习重新设定：当你在创建或者编辑页面、帖子、图片或者别的媒体时，想想他们在不同的使用环境时会呈现出什么样子。就像在不同的浏览器中进行测试一样，同样的设计在不同的环境中会有什么反应？在手机浏览器中还能正常工作吗？在台式机浏览器中呢？在邮件中呢？能够被大声诵读吗？能够被粘贴到word文档中，被打印和传真吗？不要轻视那些看似荒谬的使用情形，他们都是出色的尝试，不久之前网页根本没办法出现在手机上。你的网站将来会出现在什么地方？
• 删掉主页：不要担心，之后还可以把主页放回来的。没什么比去掉设定的简介能够帮助你更好滴发现网站的优先级。哪个页面能够最好地呈现网站的宗旨？如果它们之中有一个页面能够代替主页的作用，那么你可以想想这个页面到底能为网站做什么。
• 在每个页面，每篇文章，内容的每个部分都重复这个实验：如果你删掉了它，什么能够替代它？如果回答是“无可取代”，那么它就是必须的。如果主页消失了，“主要业务”的页面依然能够正常工作，那么你需要对页面再设计，直到它变得至关重要，或者干脆删掉它。

总而言之，一定要简明扼要。在如今这些现代媒体中，空间和注意力都太宝贵了，我们必须充分利用。