资讯频道 → 移动开发
阅读更多

0顶
0踩

移动开发

转载新闻 跨平台移动应用的延续性

2015-03-18 16:37 by 副主编 mengyidan1988 评论(0) 有3702人浏览
android ios 移动开发
设计一款适配多平台的移动应用极具挑战。怎么知道何时采用系统原生控件、自定义，或是混合使用？在iOS和Android版StumbleUpon的改版中，用户体验团队采取了混合的方式，调整了原生的设计模式，创造独特、简洁的界面。最终打造了更快捷、更直观的体验，促进了用户的参与。
每个产品的设计流程都该如此，一切源于共鸣。
理解用户
要理解用户所想所做，什么能刺激他们，痛点在哪里，你得从他们的角度考虑。这使你与用户的渴望和需求协调一致，运用你所了解的，来充实每一项设计决策。向真实用户学习有助于磨练直觉，激发共鸣。

对于每个新功能，我们都从收集灵感开始，然后画出各处关键交互，直到方向正确。我们不仅依靠内在本能和设计知识：还通过用户调研和当前数据来丰富并修正我们的决策。

这个app体系重在无穷无尽的娱乐信息。于是我们不断自我挑战，寻找一种能让我们突显于众多竞品的设计方式。StumbleUpon的妙处在于，它揭示了互联网最棒的一面，给用户带来高质量内容，他们甚至都不知道这就是自己要找的。我们试图运用设计来诠释这种意外的发现。

向真实用户学习有助于磨练直觉，激发共鸣。
定下设计目标
在iOS和Android的改版中，我们给自己定下几个目标：
  • 建立跨平台的统一性
  • 满足当前的用户群
  • 提升整体体验，保持用户活跃

2014年，我们进行改版设计的过程中，Google提出了material design风格。我们设计新版iOS StumbleUpon时，仔细研究了material，考虑了一些能在两个平台通用的方式。设计Android版时，我们也吸收了material的美学与交互，打造更加优雅精良的体验。



我们在多个界面中整合了Google的卡片式设计，同时也保持了许多iOS的原生图标和界面样式。我们决定在两个app中使用相似的图标设计，但是根据各自的平台调整了风格。在iOS上坚持使用轮廓式、中空的图标，在Android上给图标加粗。

当我们开始改版Android版时，我们进行了一次视觉评审，详细列举了手机和平板的体验，用以理解大方向。全局纵览一套生态系统，有助于找出有待提升的部分，突出了平台间的差异，让我们专注于设计。



然后，我们开始将UI模式标准化，来配合Google的material标准。App局部已经向material标准看齐了，其他还需要调整。我们还发现几个案例，证明动效可以展现细节交互和过渡效果。



关注这些问题，使我们提升了StumbleUpon的核心体验。我们迎合material界面元素，丢弃了拟物的装饰。更粗的字体和全屏图片，帮助我们丰富了环境信息和数据，提升了Stumbling的预览体验。引入悬浮按钮，突出了从前易忽略的关键操作项。在整个app中融入悬浮卡片，不仅简化了界面，也为Android用户创造了熟悉的环境。



除了在iOS和Android上都使用了卡片风格，我们还通过相同的配色、品牌元素和Stumbling核心功能创造一致性。在整个设计过程中，从静态图片到交互原型，再到最终成品，我们都牢记界面元素之间的相互作用、位置和过渡效果。

在app的特有风格和两大平台的核心规范中寻求平衡，使app的视觉与功能结构更加协调。同时接受material和Apple的设计规范，让我们打造了有亲和力的体验，实用、愉悦、有意义。

两者的改版都暗藏着风险。一方面，只用平台特有的控件，可以创造出顺畅的体验。但过于依赖一个平台的设计规范——比如用iOS标准来设计Android平板app——就使其他平台上的体验产生割裂感。我们最不希望的事情，就是在界面上创作过头，疏远了现有用户，让app既难学又难用。运用设计思维来规避这些潜在问题，对我们的设计流程至关重要。



StumbleUpon用户体验团队成员：Asher Blumberg, Amy Luo, Michael Spiegel, Jennifer Fleming 和 Matthew Spangenberg

乐于持续优化创意，能使优秀的产品走向伟大。

验证我们的设计哲学
在StumbleUpon，我们有灵活的工作流程——通过快速迭代的设计与原型来验证我们的方案。对不同方案进行A/B测试，看哪个效果最佳。所以我们会持续优化设计，即使在第一版完成之后。

我们不仅制作可点击的效果图，也为它们增添动画效果，来展示界面之间的过渡，为交互增加节奏和动感。通过视觉化展现这些自定义过渡效果，我们从开发人员那边得到了重要反馈，因为有些动画的实现太耗时，会拖慢我们为期2周的设计冲刺。

尽早从工程师、设计同僚、产品经理和利益相关者那里得到反馈，有助于建立和提升创意的水准，推动产品前进。乐于持续优化创意，能使优秀的产品走向伟大。
原文链接：http://blog.invisionapp.com/designing-mobile-apps-for-cross-platform-continuity/
  • 大小: 284.2 KB
  • 大小: 187.7 KB
  • 大小: 100.2 KB
  • 大小: 127.4 KB
  • 大小: 137.7 KB
0
顶
0
踩
评论 共 0 条 请登录后发表评论

发表评论

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

相关推荐

  • php算跨平台吗,5个开发人员不应该错过的最好跨平台PHP编辑器

    在这篇文章中，我们将讨论有关PHP编辑器并分享5个最好的跨平台的PHP编辑器。NetBeans was principally written for Java, but later code can be written in PHP, HTML5, C++, and many more. The pac...

  • 移动端跨平台技术之下的变与不变

    关注「前端向后」微信公众号，你将收获一系列「用心原创」的高质量技术文章，主题包括但不限于前端、Node.js以及服务端技术一.跨平台，是想跨哪些平台？目前来看，移动端跨平台需求主要集中在...

  • 移动端跨平台开发Flutter 与 React Native对比

    移动端跨平台开发Flutter 与 React Native 深入对比分析 2019年6月21日20:41:35 发表评论 154 views移动端跨平台在经历数年沉浮之后，如今还能在舞台聚光灯下雀跃的， 也只剩下 React Native 和 Flutter 了，作为...

  • 跨平台Qt应用 成就诺基亚下一个辉煌

    上文提到过诺基亚这次给大家带来的Qt主要是提供跨平台开发，开发出来的软件应用可以运行在诺基亚现有的Symbian S60,S40，正在开发中的Symbian 3,4，Meego和Meamo中，还可以应用在现有竞争对手的MAC OS, Android 中...

  • Cocos2d-html5强大的跨平台性

    2014年，移动互联网的车轮已驶入了第五个年头，这五年，人们不断对移动互联网中可行的运营模式、行业生产、生活方式，以及盈利模式进行着颠覆。 而作为移动互联网产业链中最“吸金”的一环，移动游戏的地位无疑占据...

  • 移动医疗是什么 移动医疗应用实例

    移动医疗（mHealth），就是通过使用移动通信技术——例如PDA、移动电话和卫星通信来提供医疗服务和信息，移动医疗为医疗卫生服务提供了一种有效方法，其核心目标是提高服务效率、减少医疗差错、控制医疗成本和改善...

  • Compose也能跨平台？Compose Multiplatform是啥？KMM又是什么？

    现在的跨平台框架真是跟打了鸡血似的，跟生产队的驴一样玩命的更新啊，一会儿功夫就遍地开花，开发者尤其是Androiders们还能学得过来吗？

  • 漫谈跨平台应用的统一与差异化设计

    最近在多个平台上试用了一些Apps，从华丽的 Mac 到质朴... 1、多终端统一性，从视觉说起 对于多终端的产品而言，好的UI设计，不仅要给与用户最基本的视觉舒适感，更应让界面在不同的平台，承担品牌形象识别的作用。 ...

  • 移动信息化不能延续PC时代的痛

    当下，随着移动时代的到来，手机功能逐步完善，各个行业针对这一现象纷纷制定了相应的营销计划，于是霎时间兴起了一股网上订票/网上订饭/网上预约的热潮。 而对于IT行业，成为企业信息化最火的代名词莫过于移动办公...

  • dotnet Multi-platform App UI 多平台应用 UI 框架简介

    现在可以使用 .NET 构建一切应用。富有生产力的 .NET 是当前数百万的开发者选择这个平台的理由。在 .NET 5 微软统一了整个 ...当咱在考虑如何在 .NET 上构建一个跨平台应用的时候，需要关注的设备和系统包括 Window...

  • 跨平台与云端创新，为企业和开发者开辟更广阔的未来

    面对云计算、大数据、社交和移动计算，企业需要更主动地加速自身业务模式的转变，而开发者和开发团队将在这一转变过程中发挥至关重要的作用——开发团队的创新能力，决定了企业未来的竞争力；开发团队的交付能力，...

  • 2011年移动应用经济5大演化趋势

    移动应用经济已经成为一个非常成熟的领域，为了能够在移动应用市场占有一席之地，业内人士可谓费劲了脑汁。虽然移动应用领域已经不再像过去两年那样疯狂，但它仍在快速的演化。下面我们一起就2011年移动应用...

  • MES让移动应用开发如网页制作一样简单

    只须三天，即可开发出专业的移动应用系统！ 快速开发三步曲：1安装客户端、2编写服务端标签(类似于html)、3启动服务器 手机、平板电脑、PC三者之间的差异已越渐模糊，传统PC领域的软件应用已迫不急待的需要向手机...

  • GPS引IT巨头跨平台火拼 诺基亚微软等天价涉足

    GPS引发IT巨头跨平台火拼　诺基亚、微软、谷歌均“天价”涉足“卫星定位”,国内GPS厂家仍沉迷于“开车找路”　●诺基亚、微软、谷歌均以“天价”涉足“卫星定位”领域　●国内GPS厂家仍沉迷于“开车找路”，专家建言...

  • 2011年第一季度移动应用开发者报告

    概述 2011年1月10至12日，Appcelerator和IDC针对移动操作系统及功能的优先开发顺序，2011年移动应用开发计划的看法，对 Appcelerator Titanium平台的2,235个开发者进行调查。调查揭示了平板市场的新入围者是

  • 三维实景建模技术在智慧交通领域的新发展与深入应用

    三维实景建模技术脱胎于智慧城市安防建设中的常见应用场景。在视频监控方面，随着智能前端视频监控设备的不断发展，安防能力在星光级CMOS感光技术、超高清技术、枪球联动高低点联动、AI人工智能人脸识别车辆识别技术...

  • 低代码开发专题月 |YonBuilder移动低代码开发，帮助企业快速开发移动应用

    企业均有以较低的成本获得较大效益的需求，采用APICloud跨平台移动开发技术由于提高了开发速度，基于模块的开发增加了代码复用性，从而降低了开发成本。 05 信息部门融入的需求 越来越多的企业有专门的信息部门，...

  • 【9493】基于springboot+vue的美食信息推荐系统的设计与实现.zip

    技术选型 【后端】：Java 【框架】：springboot 【前端】：vue 【JDK版本】：JDK1.8 【服务器】：tomcat7+ 【数据库】：mysql 5.7+ 项目包含前后台完整源码。 项目都经过严格调试，确保可以运行！ 具体项目介绍可查看博主文章或私聊获取 助力学习实践，提升编程技能，快来获取这份宝贵的资源吧！ 在当今快速发展的信息技术领域，技术选型是决定一个项目成功与否的重要因素之一。基于以下的技术栈，我们为您带来了一份完善且经过实践验证的项目资源，让您在学习和提升编程技能的道路上事半功倍。以下是该项目的技术选型和其组件的详细介绍。 在后端技术方面，我们选择了Java作为编程语言。Java以其稳健性、跨平台性和丰富的库支持，在企业级应用中处于领导地位。项目采用了流行的Spring Boot框架，这个框架以简化Java企业级开发而闻名。Spring Boot提供了简洁的配置方式、内置的嵌入式服务器支持以及强大的生态系统，使开发者能够更高效地构建和部署应用。 前端技术方面，我们使用了Vue.js，这是一个用于构建用户界面的渐进式JavaScript框架。Vue以其易上手、灵活和性能出色而受到开发者的青睐，它的组件化开发思想也有助于提高代码的复用性和可维护性。 项目的编译和运行环境选择了JDK 1.8。尽管Java已经推出了更新的版本，但JDK 1.8依旧是一种成熟且稳定的选择，广泛应用于各类项目中，确保了兼容性和稳定性。 在服务器方面，本项目部署在Tomcat 7+之上。Tomcat是Apache软件基金会下的一个开源Servlet容器，也是应用最为广泛的Java Web服务器之一。其稳定性和可靠的性能表现为Java Web应用提供了坚实的支持。 数据库方面，我们采用了MySQL 5.7+。MySQL是一种高效、可靠且使用广泛的关系型数据库管理系统，5.7版本在性能和功能上都有显著的提升。 值得一提的是，该项目包含了前后台的完整源码，并经过严格调试，确保可以顺利运行。通过项目的学习和实践，您将能更好地掌握从后端到前端的完整开发流程，提升自己的编程技能。欢迎参考博主的详细文章或私信获取更多信息，利用这一宝贵资源来推进您的技术成长之路！

  • (源码)基于Spring、Struts和Hibernate的OA系统.zip

    # 基于Spring、Struts和Hibernate的OA系统 ## 项目简介 本项目是一个基于Spring、Struts和Hibernate框架的办公自动化（OA）系统。该系统主要用于企业内部的日常办公管理，包括用户登录、组织管理、权限管理等功能。系统前端使用现成的模板和JavaScript、jQuery技术，后端通过Struts、Hibernate和Spring框架实现业务逻辑和数据持久化。 ## 项目的主要特性和功能 ### 登录模块 防止多设备登录系统能够检测到同一账号在不同设备上的登录情况，并在检测到异地登录时通知用户并强制下线。 WebSocket支持使用WebSocket技术实现实时通知功能。 ### 组织管理模块 部门管理支持部门的增删改查操作，包括查看部门信息、职位信息和员工数量。 用户管理支持用户的增删改查操作，包括指定用户所在部门、职位和角色。 角色管理支持角色的增删改查操作，包括查看角色权限和修改角色权限。

  • 基于MySQL、express框架、Vue3的光谷智慧交通系统源码+数据库+文档说明（高分项目）

    基于MySQL、express框架、Vue3的光谷智慧交通系统源码+数据库+文档说明（高分项目），该项目是个人毕设项目，答辩评审分达到98分，代码都经过调试测试，确保可以运行！欢迎下载使用，可用于小白学习、进阶。该资源主要针对计算机、通信、人工智能、自动化等相关专业的学生、老师或从业者下载使用，亦可作为期末课程设计、课程大作业、毕业设计等。项目整体具有较高的学习借鉴价值！基础能力强的可以在此基础上修改调整，以实现不同的功能。 基于MySQL、express框架、Vue3的光谷智慧交通系统源码+数据库+文档说明（高分项目）基于MySQL、express框架、Vue3的光谷智慧交通系统源码+数据库+文档说明（高分项目）基于MySQL、express框架、Vue3的光谷智慧交通系统源码+数据库+文档说明（高分项目）基于MySQL、express框架、Vue3的光谷智慧交通系统源码+数据库+文档说明（高分项目）基于MySQL、express框架、Vue3的光谷智慧交通系统源码+数据库+文档说明（高分项目）基于MySQL、express框架、Vue3的光谷智慧交通系统源码+数据库+文档说明（高

Global site tag (gtag.js) - Google Analytics