移动UI设计须知.docVIP

今天创优翼的小编带给您的是移动UI设计须知在相对更小的空间里实现同样的功能，做到这一点并不容易。自从互联网发明以来，屏幕的尺寸一直稳步增长，网页设计师已经学会如何充分利用屏幕空间。现在的网格系统大概有960像素宽，在竖直方向允许无限延伸。在人们开始使用手机之前，空间一直都是一件廉价的商品。 在宽大的电脑网页内设计比在移动设备有限的空间中设计要容易的多，曾经宽敞的空间助长了那些散漫的排版和大范围的负空间设计。而在宽度只有320-480像素的手机屏幕里，两栏的排版设计都变得非常冒险。 但是在手机网页设计中，最难的部分不是分几栏这个问题，也不是采用响应式的框架设计，更不是学习媒体查询和倒退回旧式的浏览器，最大的挑战是设计师需要决定应该保留和删除哪些内容。 移动UI的设计经验 将网站进行改版使之能够适应移动设备有许多方式。最简单也是最常用的方法是：什么也别改。结果就是：文字很小，读起来不方便；导航很难点击；比邮票还小的图片也会丧失原有的视觉冲击力。这样的用户体验真实糟透了，但是从网站拥有者的角度来看，这样的改版不需要付出任何辛苦。 另外一种方法是设计出包含网站主要内容的手机版本。我们想当然地认为内容管理系统会配备两套内容，事实往往并非如此，采用这种方式会使网站成为手机设备容量限制的牺牲品，特别当更小的屏幕只能容纳更少的内容时更是如此。 人们不在移动设备上访问网站，（可能）是因为他们不需要那么多信息，更可能的原因是他们想要更便利些。然而网站管理者需要另外一种便利，不需要同时管理两套内容。如果存在两套内容，就会增加产生内容不一致的风险，于此同时，为手机浏览者和非手机浏览者同时服务会产生的加倍的工作量。 那些愿意将精力只投入在一套内容中的设计师明白实现这一目标的机会就在这小小的（手机）画布中。 “小设计”不是新出现的事物 紧凑地思考并不意味着思维因此局限。在其他媒介上的设计已经向人们充分展示了如何在受限制的情况下将内容进行创造性地提炼。 名片 名片需要完成两项明确的功能： 给他人留下印象， 用一种便携的方法向他人提供联系方式。 名片上没有空间进行商品宣传或者列举出所有产品。最后，富有创造力的名片设计师用一种随意的方式思考这个问题“名片到底是什么？” 广告牌 尺寸并不是唯一的问题。手机 UI 设计师想要解决注意力集中的问题，就如同广告牌设计师努力抓住移动中的人们的注意力一样。司机将他们大部分的注意力都集中在驾驶上，因此广告牌必须在很远地距离就给人们留下印象。公路广告的设计空间已经宽容很多了，但是仍然需要在极短的时间内传递信息。一个成功的广告创意能够讲一个完整的故事，与视觉信息相辅相成。 RSS订阅 精简的信息传达并不局限于视觉媒介。简单而便携，真正简单的设计去除了任何不必要的宽度、高度、字体、颜色以及浏览器兼容性的要求。订阅内容没有任何关于何时、何地以及如何才能被使用的设定，因此它可以通过设计的迭代来满足从手机网站到 App Store 的应用等任何情况下的使用需求。 名片、广告牌、代码以及新闻订阅有一个共同的宗旨——简化并不仅仅意味着（内容的）删减和（体积的）缩小，它代表着专注！ 浓缩结构 专注于网站的开发上并不是件容易的事情，专注会耗费很多精力，需要不断奉献，这两者都会激发出人的创造力，即使一时无人欣赏。第一种方式是使网站结构扁平化。 上图所示就是一个典型的站点地图。站点地图中呈现出不同页面之间的相互关系，这些关系可以通过方块之间的连线表明。站点地图既不精确（导航栏允许用户在不同页面间实现跳转），也没有什么实质性的帮助（链接并不是内容）。 设计师仅根据传统的站点地图来决定需要合并和删减什么内容是十分需要技巧的。维恩图恰好可以在这方面派上用场。 上面的例子就通过重叠的椭圆展示了不同内容间的关系。“案例”（Case studies）可以描述清楚产品和客服如何使顾客从中受益。因此，“案例”的圆圈覆盖了“产品”(Products)和“服务”(Services)两方面的内容。顾客可能会订购的产品（重叠的部分表示），“联系我们”(Contact)页面和其他内容不关联，它是独立的内容。 六个椭圆不代表站点只有六个页面，确切地说，它代表站点有六类信息或者功能。一家公司可能生产很多商品，但是每一种商品都应该有名称，说明，图片以及购买设置。同样地，每一个案例都是独特的故事，但是都应该采用相同的问题/解决方案格式。 为了用户能够专注于站点，我们需要将重叠的部分最小化。 ? 上述方案需要将每个案例和与之相关的商品或客服进行整合。如果一个案例介绍的内容超过一个，那么就应该链接到下一个内容，不要再重复。主页或商品概述可能列举每一件商品。不要再用一个独立的购物车页面重复列举那些内容，每一件商品旁边都应该设置一个“立即购买”按钮，在新的付款页面完成整个购买流程。 维恩图