阅读更多

3顶
1踩

移动开发

转载新闻 移动网页设计相关原则

2012-07-05 17:45 by 副主编 MnouW 评论(0) 有10269人浏览
如何开始移动设计

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

组织架构

当你开始组织移动端界面的内容和操作时,一些可靠的信息架构准则:比如,清晰的标签(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)。像是寻找、探索/游戏,签到/查看状态,编辑/创建,思考这些行为,然后调整网站移动端使用时候的架构。
  • 首先关注内容,其次才是导航。人们更关心信息和他们想快速处理的任务。
  • 相关的的导航出现在合适的位置,会让人们沉浸,或是访问度更深。
  • 减少关键任务的选择。导航需要清晰并且关注在人们真正需要的事情上,多考虑人们在紧急状态和非理想状态下尽快提供帮助。
  • 考虑人们在休闲时候使用手机,并且请考虑横屏设计,让人们更加欣赏你简单的设计。
  • 大小: 37.1 KB
  • 大小: 53.2 KB
  • 大小: 105.3 KB
  • 大小: 83.6 KB
  • 大小: 65.7 KB
  • 大小: 40 KB
  • 大小: 100.9 KB
  • 大小: 66.2 KB
  • 大小: 45.9 KB
  • 大小: 38.2 KB
  • 大小: 41.1 KB
3
1
评论 共 0 条 请登录后发表评论

发表评论

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

相关推荐

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

    网络信息时代高校移动网页的设计原则.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设计模式——设计原则

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

  • 移动设计八原则

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

  • 软件设计原则与模式

    Java软件设计原则与模式

  • Web网页设计规范详细介绍

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

  • 微服务设计原则

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

  • 海尔智能电视刷机数据 U49A5 机编DH1W80A0305 务必确认机编一致 强制刷机 整机USB升级主程序

    务必确认机身编号与文件名机编一致,如不一致,请勿下载 机身编号一般在机子背面的贴纸上 升级方法: 1、下载数据,压缩包解压,将“Haier638Upgrade.bin”文件拷贝到U盘根目录下(U盘要求使用FAT32格式,建议4G-8G的品牌U盘,刷机成功率会高) 2、电视关机拔下电源,插入U盘,按住机身按键板上的“菜单”键不放,插电开机,直到LED灯开始闪表示升级正在进行,升级成功后机器会自动重起。 3、重启之后,重新交流上电,升级完成。 注意: 1、升级到结束,大约需要8-30分钟,中途绝对不能断电 2、升级重启第一次进入系统,请等完全正常进入开机桌面之后,才能拨下U盘

  • c语言c++项目源代码_c语言对自己电脑系统测试.rar

    **C语言电脑系统测试项目** 本项目是一个基于C语言的实用工具,旨在为您的电脑系统提供全面的性能测试与评估。通过执行一系列精心设计的测试用例,该工具能够评估您的电脑在处理器速度、内存管理、磁盘性能以及网络连接等方面的表现。 项目的核心功能包括: 1. **处理器性能测试**:通过执行复杂的算法和计算任务,评估处理器的运算速度和效率。 2. **内存测试**:检查内存分配、读写速度和稳定性,确保系统的内存管理达到最佳状态。 3. **磁盘性能测试**:评估硬盘或固态硬盘的读写速度、I/O性能和文件系统效率。 4. **网络性能测试**:测量网络连接的速度和稳定性,包括上传和下载速度以及延迟。 此外,该项目还提供了详细的测试报告功能,帮助您全面了解系统的优势和潜在瓶颈。测试结果以直观易懂的图表和数字形式呈现,便于分析和解读。 此项目采用模块化设计,方便您进行二次开发和定制,以满足特定需求。无论是硬件评测爱好者还是系统管理员,都能从该项目中受益良多。

  • pypy3.8-v7.3.6rc3-s390x.tar.bz2

    Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

  • 强化学习的Q-Learn算法ppt资源

    强化学习的主要算法:包括Q-learning、SARSA、DQN、A3C、TRPO、PPO和SAC等。这些算法各有特点,适用于不同的场景和任务。例如,Q-learning和SARSA是基于值函数的强化学习算法,旨在学习最优策略以最大化累积奖励;而DQN则是深度强化学习算法,使用神经网络来估计值函数,并通过反向传播算法更新网络参数。 强化学习在多个领域具有广泛应用。在自动驾驶系统中,强化学习可以帮助车辆感知周围环境并做出决策,实现自主行驶。在医疗领域,强化学习可以用于辅助医生进行病例分析、诊断和治疗方案制定,提高医疗服务的准确性和效率。此外,强化学习还在智能物流和仓储管理、金融投资决策等领域发挥着重要作用。

  • 工作汇报 年终总结28.pptx

    封面 标题:基于物联网的智能家居系统年度总结 报告人信息:[姓名]、[职位/角色]、[所属机构/公司] 日期:[具体日期] 目录 引言 年度工作回顾 系统进展与亮点 技术创新与应用 市场反馈与用户评价 存在问题与挑战 未来展望与计划 结束语与感谢 一、引言 简要介绍智能家居系统的重要性和发展趋势 回顾本年度的工作目标和重点 二、年度工作回顾 系统建设与维护 完成的项目与里程碑 系统稳定性与可靠性提升 团队建设与培训 团队成员构成与职责 培训与技能提升活动 合作伙伴与资源整合 与供应商、合作伙伴的合作情况 资源整合与利用 三、系统进展与亮点 功能扩展与优化 新增功能介绍与效果评估 现有功能的优化与改进 用户体验提升 界面设计与交互优化 用户反馈与改进措施 四、技术创新与应用 物联网技术的应用 传感器与通信技术的升级 大数据分析与应用 智能家居的智能化管理 自动化控制与节能策略 安全防护与预警系统 五、市场反馈与用户评价 市场反馈分析 市场需求与竞争态势 市场占有率与增长趋势 用户评价总结 用户满意度调查结果

Global site tag (gtag.js) - Google Analytics