在宽大的电脑网页内设计比在移动设备有限的空间中设计要容易的多,曾经宽敞的空间助长了那些散漫的排版和大范围的负空间设计。而在宽度只有320-480像素的手机屏幕里,两栏的排版设计都变得非常冒险。
但是在手机网页设计中,最难的部分不是分几栏这个问题,也不是采用响应式的框架设计,更不是学习媒体查询和倒退回旧式的浏览器,最大的挑战是设计师需要决定应该保留和删除哪些内容。
移动UI的设计经验
将网站进行改版使之能够适应移动设备有许多方式。最简单也是最常用的方法是:什么也别改。结果就是:文字很小,读起来不方便;导航很难点击;比邮票 还小的图片也会丧失原有的视觉冲击力。这样的用户体验真实糟透了,但是从网站拥有者的角度来看,这样的改版不需要付出任何辛苦。 另外一种方法是设计出包含网站主要内容的手机版本。我们想当然地认为内容管理系统会配备两套内容,事实往往并非如此,采用这种方式会使网站成为手机设备容量限制的牺牲品,特别当更小的屏幕只能容纳更少的内容时更是如此。 人们不在移动设备上访问网站,(可能)是因为他们不需要那么多信息,更可能的原因是他们想要更便利些。然而网站管理者需要另外一种便利,不需要同时 管理两套内容。如果存在两套内容,就会增加产生内容不一致的风险,于此同时,为手机浏览者和非手机浏览者同时服务会产生的加倍的工作量。 那些愿意将精力只投入在一套内容中的设计师明白实现这一目标的机会就在这小小的(手机)画布中。“小设计”不是新出现的事物
紧凑地思考并不意味着思维因此局限。在其他媒介上的设计已经向人们充分展示了如何在受限制的情况下将内容进行创造性地提炼。名片

- 给他人留下印象,
- 用一种便携的方法向他人提供联系方式。
广告牌

RSS订阅
精简的信息传达并不局限于视觉媒介。简单而便携,真正简单的设计去除了任何不必要的宽度、高度、字体、颜色以及浏览器兼容性的要求。订阅内容没有任 何关于何时、何地以及如何才能被使用的设定,因此它可以通过设计的迭代来满足从手机网站到 App Store 的应用等任何情况下的使用需求。 名片、广告牌、代码以及新闻订阅有一个共同的宗旨——简化并不仅仅意味着(内容的)删减和(体积的)缩小,它代表着专注!浓缩结构
专注于网站的开发上并不是件容易的事情,专注会耗费很多精力,需要不断奉献,这两者都会激发出人的创造力,即使一时无人欣赏。第一种方式是使网站结构扁平化。

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


重新思考导航条设计
手机使得设计师对传统元素进行了彻底地改造,不仅仅是重新组织。除了进行更好地改造,他们也提出疑问“我们为什么需要改造?” 用户可以通过链接列表对网站内容有大致了解,但是列表过于冗长成为设计师不得不应对的问题,如今这种趋势变得日益明显。导航条已经过时了,页面和面 板的形式正在流行。越来越多的响应式网站将导航条移动到单独的页面或者采用下拉列表的形式。按照惯例,轻击包含三个水平条的图标就会显示出可点击的链接列 表或者站点架构。
☰
有时有解释,有时没有。轻击图标,导航就会浮现在页面上。这种方式效果不错,因为用户可以决定何时显示或隐藏链接。
奇怪地是,星巴克的图标还包含一个悬停状态,但也许并不奇怪。移动设计意味着为更多应用场合进行信息设计,而不仅仅是台式机浏览器之外支持移动设备。
消减内容
消减多余的信息不论对手机网站还是台式机网站,都同样重要。但进行信息的删减并不是那么容易的事情。因为通常情况下事物的发展过程都是从无到有。- 计划:要明确目标、受众、责任、如何度量成功等等。
- 设计:创建图形,撰写素材、建立原型等等。
- 构建:HTML, CSS, jQuery, Dojo, PHP, .NET, CMS,(在这里你可以插入最喜欢的同时最令你厌烦的缩写词)
- 测试:在不同的浏览器中,在实际使用的过程中
- 配置:上传至服务器,建议采取这种顺序。
- 计划
- 设计
- 复查:为了巩固删减的成果,我们需要不断向自己发问“我们还能再做些什么?”
- 构建
- 测试
- 编辑:仔细检查网站的每个部分,如果去掉某个部分,网站还能正常运行吗?
- 再次测试:棒极了,你去掉好几个部分,但是有没有做的太过头了?
- 配置
- 帮助用户做出明智的选择:例如,一段描述性文字并不总是能服务于标题。标题本身就应该包含帮助用户决定应该点击什么的正确的关键字。缩略图应该在展示整幅图像的同时保持自身的可识别性。
- 练习重新设定:当你在创建或者编辑页面、帖子、图片或者别的媒体时,想想他们在不同的使用环境时会呈 现出什么 样子。就像在不同的浏览器中进行测试一样,同样的设计在不同的环境中会有什么反应?在手机浏览器中还能正常工作吗?在台式机浏览器中呢?在邮件中呢?能够 被大声诵读吗?能够被粘贴到word文档中,被打印和传真吗?不要轻视那些看似荒谬的使用情形,他们都是出色的尝试,不久之前网页根本没办法出现在手机 上。你的网站将来会出现在什么地方?
- 删掉主页:不要担心,之后还可以把主页放回来的。没什么比去掉设定的简介能够帮助你更好滴发现网站的优先级。哪个页面能够最好地呈现网站的宗旨?如果它们之中有一个页面能够代替主页的作用,那么你可以想想这个页面到底能为网站做什么。
- 在每个页面,每篇文章,内容的每个部分都重复这个实验:如果你删掉了它,什么能够替代它?如果回答是“无可取代”,那么它就是必须的。如果主页消失了,“主要业务”的页面依然能够正常工作,那么你需要对页面再设计,直到它变得至关重要,或者干脆删掉它。
10个必备的移动UI设计资源站
值得庆幸的是,国外已经有很多优秀的移动用户界面资源是可用的,这些先驱的宝贵资源可以大大帮助你的移动设计或开发你的响应式网站。相信今天要隆重推荐的10个网站,无论是在你设计一个新的移动应用程序还是寻找特定的设计解决方案时,他们都会踏踏实实的帮助到你。 1. Konigi 这个网站上展示了许多完美的交互设计和视觉设计案例,网站提供了许多不同的方式来引导你便捷的搜寻感兴趣的项目!一定要利用好标签哟。








