移动网页设计相关原则

3顶
1踩

2012-07-05 17:45 by 副主编 MnouW 评论(0) 有10342人浏览

web 移动设计 UI

如何开始移动设计

对于我们中很多人来说，移动端设计是一个崭新的机会。但是，如果你过去是桌面端的网页设计师，如何将经验转换到移动网页端呢？当然，已有的一些工具，经验，技能仍然适用，只需开始思考下如何在手机上进行组织和布局。

组织架构

当你开始组织移动端界面的内容和操作时，一些可靠的信息架构准则：比如，清晰的标签（labeling），平衡的宽度和深度，妥当合理的心智模型，这些仍旧十分重要。但是，组织移动端网页设计体验你需要考虑以下因素：

配合使用方式：人们如何适用移动设备，为什么这样用？
强调内容超过导航
保持清晰和专注
配合移动设备适用方式

我们很容易理解移动设备上独特的限制和性能。简单来说，桌面网页同样有很多独特的限制。所以直接将桌面产品移植到手机端并无意义。而是要考虑移动端独有的特性，并且满足到用户需求。

通过研究一些专业分析的共通点，我们会得到一些启发。面对通常人们是如何使用他们的移动设备的，为什么？这个问题时，Josh Clark在他的《触动人心》（注：《触动人心－设计优秀的iphone应用》一书中讲到过三个关键用户行为：

“我有个微任务要做”；
“我想看看附近的情况”；
“我有些无聊”。

这正好与google的调研不谋而合，他将移动用户细分为三种行为群体：当前是急迫的，反复的，或者无聊的。

不管如何描述，移动端的使用方式通常包括以下交互情形：

查找/发现（急需信息，基于地点位置）：我现在需要得到答案——多数是告诉我在哪里。
探索/娱乐（无聊，基于地点位置）：我现在想消磨时间，来点娱乐打发无聊。
签到检查（check－in）/状态（重复/微任务处理）：一些重要的事需要不断改变或更新，我想留在上面。
编辑/创建（紧急调整，微任务处理）：我需要马上做完一些事，不能等。

以上因素决定人们为何掏出手机，所以这些行为决定了手机体验应该如何被构造和组织来满足人们的需求。

例如：照片分享Flickr的移动网页体验就有四个主要操作。你通讯录里好友的最新活动和最新上传让人们不断想检查是否有好友的照片更新；提供当日附近人们上传的一些有趣的内容和照片，为想浏览优质照片的人们打发无聊时间的方式。

配合移动环境使用环境自然也需要适应你网站真实世界的需要。因为移动体验可能被用在任何地点场景，你需要考虑如何让人们无论在哪里都觉得好用。

这就意味着需要考虑用户真正需要你网站组织提供的真实用例（use cases）。通过了解用户会掏出手机的动机，结合自身app提供的功能，尽量减少用户在移动端的操作路径。

内容优于导航

一条常规理论，在移动端内容优先于导航。无论人们是否经常查看更新信息，诸如：股票，新闻或是比分；他们查看当地新闻或是通过搜索查找文章或是使用聊天工具，他们都想快速响应需求而不是看到你的网站架构脉络。

太多的移动网页体验（像是之前的Flickr ）开始时的对话都是一大堆的导航列表，而不是内容信息。移动端用户时间很宝贵，下载也需要流量的金钱消耗，所以让他们马上获得想要的信息才是关键。

Youtube ESPN的移动网页就是这样做的。先是一个简单的抬头告诉你身处哪里，将导航选项降级为一个单独的按钮。其余的位置放置可随时查看的最新信息（ESPN）和最热的供消遣的视频。

ESPN Youtube移动网页体验将重点放在内容信息上，而不是导航上。

定位和探索

但是，请稍等一下，如果内容总是优于导航。我如何才能在移动网页端找到我的路径？难道我们不需要一种导航或路径去发现哪里可以进入？

当然需要了，但是允许人们探索和定位相关的内容并不意味着罗列一堆影响内容浏览的导航条。

例如，旧版的facebook里将我经常浏览的相关信息放在顶部和中间的重要位置，但是由于顶部导航占据三行的空间，每页我一屏只能看到一条动态。

之后，facebook调整了移动网页体验，重新设计了导航，减少了导航项的数量。如果你不去管头条新闻和新闻摘要，他们将导航数量减半（从10减少到5）。It’s a good start.

关于导航菜单，youtube提供了一个全屏的快捷入口。这种方式的缺点：一是你需要主动寻找；二是你不得不打断当前任务，跳转到一个单独的页面；三是你要知道网格图标的意思是“导航菜单”。

ESPN移动网页设计聪明很多。他也在顶部有一个“菜单”按钮，点击后直接在下方直接展示多层级的导航列表。这种方式让你思考下一步去哪里时，可以停留在当前页面，不需要离开去加载一个新的页面。

不容忽视的是人们在使用手机时，容易的单手操作会让他们舒服很多。对于单手来说，屏幕底部操作也就显得容易些。

当人们拨弄到屏幕底部，想选择或决定去哪里的时候，很多移动网页没有给与你机会。

youtube设计在每页的底部缺少导航引导，当你划拨到底部就没地方可去了。

底部菜单对引导用户深入访问更有意义，但不好直接复制一个其他地方也有的菜单按钮。可以将顶部的菜单按钮从底部展开（放在内容信息之后）。Bagcheck移动网页端就是这么干的：

关于返回键

许多iphone的原生应用在导航上都有个永久的返回按钮。由于苹果的移动设备没有硬件上的返回按键，所以很多app都在顶部标题栏设置了返回按钮。

不过在移动互联网的体验上，没必要处处都设置返回按钮。因为很多设备上，诸如，andoid、黑莓、windows phone7都有硬件上的返回物理按键。

即便是苹果iphone上的浏览器，底部的工具栏上包含一个永久的返回按钮。

iphone浏览器底部工具栏包含一个返回按钮。某网页左上角的返回实属多余。

在移动网页体验上添加一个返回按钮容易引起混淆。人们在使用网页时候会问：“这两个返回按键的作用是一样的吗？”。因此在移动网页设计时，不应该在有限的空间内占据一个多余的“返回”按钮。

总之，当你打算组织移动网页体验时，考虑哪些用户行为符合移动生活的需要。

移动用例（usecase）。像是寻找、探索/游戏，签到/查看状态，编辑/创建，思考这些行为，然后调整网站移动端使用时候的架构。
首先关注内容，其次才是导航。人们更关心信息和他们想快速处理的任务。
相关的的导航出现在合适的位置，会让人们沉浸，或是访问度更深。
减少关键任务的选择。导航需要清晰并且关注在人们真正需要的事情上，多考虑人们在紧急状态和非理想状态下尽快提供帮助。
考虑人们在休闲时候使用手机，并且请考虑横屏设计，让人们更加欣赏你简单的设计。

查看图片附件

来自: 雅秋@UCD交互设计

分享到：

3
顶

1
踩

评论共 0 条请登录后发表评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

网络信息时代高校移动网页的设计原则.pdf

移动网页设计9大原则——第1部分

本文作者为来自 Mainstreethost 的站内营销专家 Kim Speier，主要介绍移动网页设计的九个原则，每个原则都配有生动的实例。文章系国内 ITOM 管理平台 OneAPM 编译呈现，以下为正文的第一部分。

移动网页设计9大原则——第2部分

本文作者为来自 Mainstreethost 的站内营销专家 Kim Speier，主要介绍移动网页设计的九个原则，每个原则都配有生动的实例。文章系国内 ITOM 管理平台 OneAPM 编译呈现，点此查看文章的第一部分，以下为第二部分，...

google移动网页设计原则

基于移动设备的网络教学系统设计与实现.docx

4.1.1系统设计原则 24 4.1.2系统设计目标 25 4.2服务端设计 26 4.2.1服务端系统设计 26 4.2.2J2EE 框架结构 28 4.3客户端设计 29 4.3.1客户端设计架构 29 4.3.2客户端设计注意事项 31 4.3.3通信接口设计 31 4.4用户...

手机客户端交互设计原则及信息展现方式

首先，老祖宗BenShneiderman的交互设计8项黄金法则我们要铭记于心，因为这些法则也是适用于移动互联网的基本法则——其次，针对手机上的交互设计原则，还有以下需要补充的一些点——而对于手机上的信息展示方式

点石成金－访客至上的网页设计秘笈(中文高清版)

指导原则第1章别让我思考 Krug可用性第一定律第2章我们实际上是如何使用Web的扫描，满意即可，勉强应付第3章广告牌设计101法则为扫描设计，不为阅读设计第4章动物、植物、无机物为什么用户喜欢无须...

移动手机网页设计原则之网页中的基础元素

有许多人都认为手机网页设计与电脑网页设计有很大不同，其实不是，手机网页除了小且可以触摸外，很多设计原则与电脑网页设计是共通的。这里有 5 个基本的元素，希望对设计师有所帮助。 1. 有意义的导航在移动设备...

《程序员》 -- 移动设计八原则

Ben Shneiderman 提出的交互设计“黄金八法”和Nielsen 的“启发式评估10条原则”为交互设计的评估提供了标准，所有这些理论和原则在移动应用的设计上依然是通用的。但移动应用有其特殊性，在设备和情景上都与普通的...

网页设计Dreamweaver【1】

1.在网页中不能添加的元素是（） A.文字、图像 B.表格、动画 C.声音视频 D.纸张等实物 2.下面不属于“页面属性”中可以设置的内容（） A.外观 B.链接 C.跟踪图像 D.首选参数 3.下列（）方法无法添加网页标题 A....

golang设计模式——设计原则

七大设计原则：单一职责原则、开闭原则、依赖倒置原则、接口隔离原则、迪米特原则、里氏替换原则、合成复用原则

移动设计八原则

软件设计原则与模式

Java软件设计原则与模式

Web网页设计规范详细介绍

对于一些中规中矩的网站，或者说一般创意型的网站，栅格化设计还是非常推荐的，尤其是一些规模大周期长，后期需要不断迭代的项目，栅格化设计让网页呈现出专业可信赖感，并有助于后期的维护。“Main”是网站的主要...

微服务设计原则

微服务设计原则并没有严格的规范，本文结合自身后台开发经验，从高可用、高性能、易维护和低风险（安全）角度出发，尝试总结业界常见微服务接口设计原则，帮助大家设计出优秀的微服务。 2.高可用 2.1 降级兜底大...

西门子S7-200PLC与MCGS触摸屏联动控制步进伺服电机的技术解析及应用实例

内容概要：本文详细介绍了利用西门子S7-200PLC与昆仑通泰MCGS触摸屏联合控制步进伺服电机的方法和技术要点。首先阐述了硬件接线的具体方式，包括PLC输出接口与伺服驱动器之间的正确连接以及必要的安全措施如急停开关的接入。接着深入探讨了PLC程序的核心代码片段，涵盖原点回归、手动正转触发、绝对位置计算等功能模块，并解释了关键指令如PLS的作用及其使用注意事项。此外，针对触摸屏的关键配置进行了说明，涉及数值输入框、指示灯、多状态按钮等组件的设置，强调了绝对定位逻辑的实现。文中还分享了一些常见的调试问题及解决方案，例如伺服电机抖动、数据刷新延迟等问题的处理办法。最后提到该方案已在实际生产环境中成功应用并表现出良好的性能指标。适合人群：从事自动化控制领域的工程师和技术人员，特别是那些希望深入了解PLC与触摸屏协同工作的专业人士。使用场景及目标：适用于需要高精度定位控制的小型自动化生产线或机械设备中，旨在帮助用户掌握如何构建稳定可靠的步进伺服控制系统，提高工作效率的同时降低成本。其他说明：作者凭借丰富的实践经验提供了许多宝贵的建议和技巧，对于初学者而言是非常有价值的参考资料。

光储并网直流微电网Simulink仿真模型：MPPT与混合储能系统的优化设计

内容概要：本文详细介绍了光储并网直流微电网的Simulink仿真模型构建，涵盖多个关键技术点。首先讨论了光伏系统的最大功率点跟踪（MPPT）算法，特别是扰动观察法的具体实现及其优缺点。接着探讨了由蓄电池和超级电容组成的混合储能系统，强调了它们各自的特点以及如何通过控制算法进行有效的功率分配。此外，还讲解了二阶低通滤波法的应用，用于提高电能质量和优化不同频率范围内的功率管理。最后，文章深入解析了逆变器的双闭环控制系统，包括电压环和电流环的设计，以确保逆变器输出与大电网的良好匹配。适合人群：从事新能源系统设计、电力电子技术研究的专业人士，尤其是对Simulink仿真工具有所了解的研发人员。使用场景及目标：适用于希望深入了解光储并网直流微电网内部机制和技术细节的研究者和工程师。主要目标是帮助读者掌握如何利用Simulink工具箱搭建完整的光储并网直流微电网仿真平台，从而为实际工程应用提供理论支持和技术指导。其他说明：文中提供了大量具体的Matlab/Simulink代码片段，便于读者理解和实践。同时，作者分享了许多宝贵的实战经验和调试技巧，有助于解决实际建模过程中可能遇到的问题。

西门子1200 PLC轴运动控制程序模板：多轴伺服、电缸控制及PLC通信实战应用

内容概要：本文详细介绍了一套成熟的西门子1200 PLC轴运动控制程序模板，涵盖多轴伺服控制、电缸控制、PLC通信、气缸报警、电路图、威纶通触摸屏程序和IO表等方面的内容。该模板已在多个项目中成功应用，特别是在海康威视的路由器外壳装配机项目中表现优异。文中不仅提供了具体的代码示例，还分享了许多实战经验和技巧，如轴控制块的参数设置、PUT/GET通讯的心跳检测、气缸报警的互锁逻辑、电路图中的电源保护措施等。适合人群：从事工业自动化领域的工程师和技术人员，尤其是那些需要进行PLC编程和轴运动控制的从业者。使用场景及目标：①快速掌握西门子1200 PLC轴运动控制的编程方法；②提高PLC程序的稳定性和可靠性；③优化设备性能，确保高效生产和故障预防。其他说明：该模板不仅适用于新项目的开发，也可以作为现有系统的改进参考。通过学习和应用这些技术和经验，可以显著提升工作效率和产品质量。

智能驾驶领域基于神经网络的驾驶员风格自适应ACC系统安全距离模型研究

内容概要：本文探讨了基于神经网络训练的不同驾驶员风格自适应ACC（自适应巡航控制）系统，尤其是其安全距离模型的研究。传统ACC系统采用固定的参数设置，难以适应不同驾驶员的驾驶习惯。文中介绍了通过神经网络训练，使ACC系统能够学习并适应不同驾驶员的驾驶风格，从而动态调整安全距离的方法。具体实现了基于LSTM和物理模型融合的混合式神经网络结构，以及定制化的损失函数，确保系统在不同驾驶风格下的安全性和舒适度。实验结果显示，该系统能够在不同驾驶风格间灵活切换，提升应对复杂路况的能力。适合人群：对智能驾驶技术和机器学习感兴趣的科研人员、工程师和技术爱好者。使用场景及目标：适用于智能汽车的研发和改进，旨在提高ACC系统的智能化水平，使其更加符合不同驾驶员的习惯，提升驾驶体验和安全性。其他说明：文章还讨论了模型的实际应用挑战，如不同地区的驾驶文化差异，并提出了相应的解决方案。

计算机三级网络机试考试试题及答案(下).pdf

3顶1踩