移动UI设计须知：“小设计”

　　在 宽容的电脑网页内设计比在移动 设施有限的空间中设计要容易的多，曾经宽敞的空间助长了那些散漫的排版和大 规模的负空间设计  。而在宽度惟独320-480像素的手机屏幕里，两栏的排版设计都变得十分冒险  。

　　然而在手机网页设计中，最难的 部分不是分几栏这个问题，也不是采纳响应式的框架设计，更不是学习媒体 查问和倒退回旧式的阅读器，最大的 挑战是设计师需要决定应该保留和删除哪些内容  。

移动UI的设计 教训

　　将网站进行改版使之 可以适应移动 设施有许多 模式  。最 容易也是最常用的 步骤是：什么也别改  。 后果便是：文字很小，读起来不容易；导航很难点击；比邮票 还小的图片也会 损失原有的视觉冲击力  。这样的消费者体验 实在糟透了，然而从网站 占有者的角度来看，这样的改版不需要付出任何辛苦  。

　　另外一种 步骤是设计出包括网站主要内容的手机版本  。我们想固然地认为内容治理系统会装备两套内容，事实一般并非如此，采纳这种 模式会使网站成为手机 设施容量 制约的 就义品，特殊当更小的屏幕只能 包容更少的内容时更是如此  。

　　人们不在移动 设施上 拜访网站，(可能)是由于他们不需要那么多信息，更可能的缘由是他们想要更 便捷些  。然而网站治理者需要另外一种 便捷，不需要同时 治理两套内容  。假如存在两套内容，就会添加产生内容不 统一的风险，于此同时，为手机阅读者和非手机阅读者同时服务会产生的加倍的工作量  。

　　那些情愿将精力只投入在一套内容中的设计师清楚实现这一 指标的机会就在这小小的(手机)画布中  。

“小设计”不是新出现的事物

　　紧凑地思量并不 象征着思维 因此局限  。在 其余媒介上的设计已经向人们 充足 展示了如何在受 制约的状况下将内容进行制造性地提炼  。

名片

　　名片需要 实现两项明确的 性能：

1. 给他人留下印象，
2. 用一种便携的 步骤向他人提供 联络 模式  。

　　名片上没有空间进行商品宣传或者列举出全部产品  。最终，富有制造力的名片设计师用一种 随便的 模式思量这个问题“名片到底是什么？”

广告牌

　　尺寸并不是唯一的问题  。手机 UI 设计师想要解决 留神力集中的问题，就如同广告牌设计师 奋力抓住移动中的人们的 留神力一样  。司机将他们大 部分的 留神力都集中在驾驶上， 因此广告牌必须在很远 地 间隔就给人们留下印象  。公路广告的设计空间已经宽容众多了，然而 依旧需要在极短的 工夫内传递信息  。一个 顺利的广告创意 可以讲一个 完全的故事，与视觉信息 相辅相成  。

RSS订阅

　　精简的信息 转达并不局限于视觉媒介  。 容易而便携，真正 容易的设计去除了任何 毋庸要的宽度、高度、字体、 色彩以及阅读器兼容性的要求  。订阅内容没有任 何对于何时、何地以及如何 威力被 使用的设定， 因此它 可以通过设计的迭代来满足从手机网站到 App Store 的 利用等任何状况下的 使用需要  。

　　名片、广告牌、代码以及新闻订阅有一个一起的 主旨——简化并不只仅 象征着(内容的)删减和(体积的)缩短，它代表着 专一！

浓缩 构造

　　 专一于网站的开发上并不是件容易的 事件， 专一会 消费众多精力，需要不停 奉献，这两者都会引发出人的制造力， 即便一时无人观赏  。第一种 模式是使网站 构造扁平化  。

　　上图所示便是一个典型的站点地图  。站点地图中出现出不同页面中间的 彼此关系，这些关系 可以通过方块中间的连线表明  。站点地图既不准确(导航栏同意消费者在不同页面间实现跳转)，也没有什么 本质性的协助(链接并不是内容)  。

　　设计师仅依据传统的站点地图来决定需要合并和删减什么内容是十分需要技巧的  。维恩图恰好 可以在这方面派上用场  。

　　上面的例子就通过重叠的椭圆 展示了不同内容间的关系  。“案例”(Case studies) 可以 形容清楚产品和客服如何使顾客从中受益  。 因此，“案例”的圆圈 遮蔽了“产品”(Products)和“服务”(Services)两 方面的内容  。顾客可能会订购的产品(重叠的 部分 示意)，“ 联络我们”(Contact)页面和 其余内容不关联，它是独立的内容  。

　　六个椭圆不代表站点惟独六个页面，确切地说，它代表站点有六类信息或者 性能  。一家公司可能生产众多商品，然而每一种商品都应该有名称， 注明，图片以及购买设置  。同样地，每一个案例都是独特的故事，然而都应该采纳 雷同的问题/解决 方案 格局  。

　　为了消费者 可以 专一于站点，我们需要将重叠的 部分最小化  。

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

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

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

　　这种 步骤只不过 指导方针，不是规定，在 使用的过程中会依据网站的不同而有所 变迁  。主页依旧会和 其余内容有重叠的 部分，由于主页上 一般包括整个网站的内 容衔接  。在上述内容中， 固然下订单被合并到商品页面中，然而我们却设计出了一个新的“付款”页面  。 专一不是削减页面的数量，而是使整个过程变得更加流畅  。

使用折叠

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

　　 固然这种布局 模式在宽屏台式机或者笔记本上 可以行得通，但假如 利用在智能机上就会有问题(如下图)  。

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

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

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

　　当我们放弃了最开始 设计的页面概念， 而后依据内容再一次组织页面，就会有出其不意地 动机  。

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

再一次思量导航条设计

　　手机使得设计师对传统元素进行了彻底地革新，不只仅是再一次组织  。除了进行更好地革新，他们也提出 疑难“我们为何需要革新？”

　　消费者 可以通过链接列表对网站内容有 大体了解，然而列表过于 漫长成为设计师只能 应答的问题，如今这种趋向变得日益显而易见  。导航条已经 过期了，页面和面 板的 模式正在 风行  。越来越多的响应式网站将导航条移动到 径自的页面或者采纳下拉列表的 模式  。依照 特例，轻击包括三个水平条的图标就会显示出可点击的链接列 表或者站点架构  。

　　如上图所示，5家网站都采纳了三个横条☰ 示意的导航图标，导航图标☰有时有解释，有时没有  。轻击图标，导航就会出现在页面上  。这种 模式 动机不错，由于消费者 可以决定何时显示或 潜藏链接  。

　　奇怪地是，星巴克的图标还包括一个悬停状态，但 兴许并不奇怪  。移动设计 象征着为更多 利用场合进行信息设计，而不只仅是台式机阅读器之外 支撑移动 设施  。

消减内容

　　消减多余的信息 不管对手机网站还是台式机网站，都同样主要  。但进行信息的删减并不是那么容易的 事件  。由于通常状况下事物的进展过程都是从无到有  。

1. 方案：要明确 指标、受众、责任、如何度量 顺利等等  。
2. 设计： 缔造图形，撰写素材、 构建原型等等  。
3. 构建：HTML, CSS, jQuery, Dojo, PHP, .NET, CMS,(在这里你 可以插入最喜爱的同时最令你 腻烦的缩写词)
4. 测试：在不同的阅读器中，在实际 使用的过程中
5. 配置：上传至服务器， 提议采取这种顺序  。

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

1. 方案
2. 设计
3. 复查：为了 强固删减的 成就，我们需要不停向自己 发问“我们还能再做些什么？”
4. 构建
5. 测试
6. 编辑： 细心 审查网站的每个 部分，假如去掉某个 部分，网站还能 畸形运行吗？
7. 再次测试：棒极了，你去掉好几个 部分，然而有没有做的太过头了？
8. 配置

　　这不是为了删减而删减也不是为了 部分消费者 使用容易而让网站变得低能  。这是在进行信息设计，为的是 可以让这些信息在消费者 期冀之外的更多场合 施展效用  。

• 协助消费者做出 理智的 取舍：例如，一段 形容性文字并不总是能服务于 题目  。 题目 本身就应该包括协助消费者决定应该点击什么的正确的 要害字  。缩略图应该在 展示整幅图像的同时 维持 本身的可 鉴别性  。
• 练习再一次设定：当你在 缔造或者编辑页面、帖子、图片或者别的媒体时，想想他们在不同的 使用环境时会出现出什么 样子  。就像在不同的阅读器中进行测试一样，同样的设计在不同的环境中会有什么 反响？在手机阅读器中还能 畸形工作吗？在台式机阅读器中呢？在邮件中呢？ 可以 被大声诵读吗？ 可以被粘贴到word文档中，被打印和传真吗？不要藐视那些看似 荒谬的 使用 情景，他们都是出众的尝试，不久之前网页 根本没 步骤出现在手机 上  。你的网站 将来会出现在什么地方？
• 删掉主页：不要 担心，之后还 可以把主页放回来的  。没什么比去掉设定的简介 可以协助你更好滴发现网站的优先级  。哪个页面 可以最好地出现网站的 主旨？假如它们之中有一个页面 可以 接替主页的作用，那么你 可以想想这个页面到底能为网站做什么  。
• 在每个页面，每篇文章，内容的每个 部分都 反复这个 试验：假如你删掉了它，什么 可以 代替它？假如 答复是“无可取代”，那么它便是必须的  。假如主页消逝了，“主要业务”的页面依旧 可以 畸形工作，那么你需要对页面再设计，直到它变得至关主要，或者 索性删掉它  。

　　言而总之， 定然要 简洁 简要  。在如今这些现代媒体中，空间和 留神力都太珍贵了，我们必须 充足利用  。