移动UI设计须知.docx

今天创优翼的小编带给您的是移动UI设计须知 在相对更小的空间里实现同样的功能，做到这一点并不容易。自 从互联网发明以来，屏幕的尺寸一直稳步增长，网页设计师已经 学会如何充分利用屏幕空间。现在的网格系统大概有960像素 宽，在竖直方向允许无限是都应该采用相同的问题/解决方案格式。
为了用户能够专注于站点，我们需要将重叠的部分最小化。
上述方案需要将每个案例和与之相关的商品或客服进行整合。如 果一个案例介绍的内容超过一个，那么就应该链接到下一个内 容，不要再重复。主页或商品概述可能列举每一件商品。不要再 用一个独立的购物车页面重复列举那些内容，每一件商品旁边都 应该设置一个“立即购买〃按钮，在新的付款页面完成整个购买流 程。
维恩图适用于任何类型的网站。
主页」 最新帖
帖子按分类排序帖子按日期排序
帖子的排序
方式可选
主页」 最新帖
帖子页面
帖子页面
找到博客的帖子必须要进行两个页面的操作吗？上面的例子介 绍了如何通过一个有设置的页面完成之前两个页面才能做到的 工作。
这种方法只是指导方针，不是规定，在使用的过程中会根据网站 的不同而有所变化。主页依然会和其他内容有重叠的部分，因为 主页上常常包含整个网站的内容连接。在上述内容中，虽然下订 单被合并到商品页面中，但是我们却设计出了一个新的“付款〃页 面。专注不是减少页面的数量，而是使整个过程变得更加流畅。
使用折叠
将内容进行合并，这是以更加复杂的设计为代价解决了导航栏的 问题。幸运地是，相同的概念一一统一信息的类型一一能使单个 页面和整个网站都从中受益。下图展示了典型的新闻类页面。
虽然这种布局方式在宽屏台式机或者笔记本电脑上能够行得通， 但如果应用在智能机上就会有问题（如下图）。
借用报纸行业的一句谚语：“折痕〃是读者最先看到的地方。但是 折叠与其说是分界线倒不如说是新内容的开始。在使用触屏设备 的时候，人们本能地知道通过手指轻轻滑动屏幕就可以滚动页 面。那意味着设计师可以最大限度地发挥折叠的优势。
首先，我们一起来回顾一下使用维恩图的宗旨，将相关类型的信 息进行整合。
过度使用的导航链接（通常是最先着手修改的地方）以及跳转到其 他文章的广告要么被合并要么被移除。元数据出现在导航周围的 空白区域。广告、目录、站点名称以及导航是否出现在屏幕顶端 反映了设计师心中的优先级顺序。
当我们抛弃了最开始设想的页面概念，然后根据内容重新组织页 面，就会有出人意料地效果。
折统布局
将内容重新财
猊在一栏之中
能够充分利用
触屏手机可以
纵向滚动的特
配
在一个单独的
HTML文档中
可能包含很名
区块，但是在
手机上浏览的
时候看上去只
有一页*
上文中，新的页面元素经过重新组织后展现在一个垂直面上。概 念上说，智能机的浏览器变成一扇窗，用户需要将每一块内容填 充进去。不是屏幕变小了，而是与平时相比，用户每次可以看到 的内容变少了。
重新思考导航条设计
手机使得设计师对传统元素进行了彻底地改造，不仅仅是重新组 织。除了进行更好地改造，他们也提出疑问“我们为什么需要改 造？ ”
用户可以通过链接列表对网站内容有大致了解，但是列表过于冗 长成为设计师不得不应对的问题，如今这种趋势变得日益明显。
导航条已经过时了，页面和面板的形式正在流行。越来越多的响 应式网站将导航条移动到单独的页面或者采用下拉列表的形式。
按照惯例，轻击包含三个水平条的图标就会显示出可点击的链接 列表或者站点架构。
SPOR13 = ▼ ■ == CATEGORIES ♦
liSPN Webdesigner Depot Microsoft Google Star bucks
如上图所示，5家网站都采用了三个横条表示的导航图标，导 航图标 有时有解释，有时没有。轻击图标，导航就会浮现在页 面上。这种方式效果不错，因为用户可以决定何时显示或隐藏链 接。
奇怪地是，星巴克的图标还包含一个悬停状态，但也许并不奇怪。 移动设计意味着为更多应用场合进行信息设计，而不仅仅是台式 机浏览器之外支持移动设备。
消减内容
消减多余的信息不论对手机网站还是台式机网站，都同样重要。
但进行信息的删减并不是那么容易的事情。因为通常情况下事物 的发展过程都是从无到有。
计划：要明确目标、受众、责任、如何度量成功等等。
设计：创建图形，撰写素材、建立原型等等。
构建：HTML, CSS, jQuery, Dojo, PHP, .NET, CMS,（在这里你可以插入最喜欢的 同时最令你厌烦的缩写词）
测试：在不同的浏览器中，在实际使用的过程中
配置：上传至服务器，建议采取这种顺序。
这