移动设计师指南——跨平台转移设计

如果您是设计专业的学生或初级设计师,并且您即将深入研究您的第一个移动项目,那么这里有一些指导,说明在为这两个平台调整移动设计时要记住什么。

想一想 2009 年你的第一部智能手机上的应用程序。拟物图标、渐变按钮和背景纹理?还记得 Android 手机上的深色背景和充满活力的字体吗?

我相信你能分辨出 2009 年和 2022年移动应用程序设计之间的区别。但你真的能指出今天 iOS 和 Android UI 设计之间的巨大差异吗?尽管如今的移动界面清晰且用户友好,但扁平化的设计方法使所有移动平台样式看起来都非常相似。

多平台移动设计的总体目标是实现品牌一致性并与特定平台的约定保持一致。但是,真正确保跨平台版本、制造商、屏幕尺寸和密度的样式和布局一致性的唯一方法是使用自定义 UI 组件。在进行定制时,您总是冒着创建用户感觉不“在家”的风险。

因此,这里对平台进行了简要比较,这将帮助您决定使用标准组件设计还是自定义组件设计。

风格哲学

Google Material Design 更偏向于可定制和流畅的界面,而 iOS 一直更偏向于清晰直观的界面。在他们的核心理念中,你可以很容易地找到他们特定风格特征的基础。

屏幕深度

使用应用程序时,深度感至关重要。用户需要关注对完成任务很重要的屏幕元素,例如按钮、输入字段和导航栏。

材料设计为 UI 层使用不同的阴影样式。阴影值取决于标记特定 UI 元素重要性的 Z 轴。iOS 设计使用渐变、背景模糊和半透明颜色叠加来实现相同的层次结构。

颜色

材料设计调色板更接近 CMYK 模型而不是 RGB。它包括各种较深或较浅的基本颜色。基本颜色主要用于 UI 重音,例如操作、项目标题、图标等。相同颜色的阴影用于标签栏、抽屉和其他导航元素。

相反,iOS 的调色板简单而充满活力。常见的 UI 元素,如列表项、条形、背景等,大多以灰色、黑色或白色的阴影呈现,而鲜艳的颜色则用于图标、按钮、链接和其他强调色。

排版

iOS 和 Android 的排版层次结构有所不同。显示和正文字体大小的巨大对比使内容在两个平台上都显得更加生动和有趣。在典型的 Android 屏幕上,对比度是通过使用更大的尺寸和更薄的字体来实现的。在 iOS 11 中,通过带有大而加粗的标题和小标题的权重层次结构,对比度更加明显。

重要的是要记住,在 Material Design 中,标题和文本在屏幕上大多是左对齐的,尤其是在导航元素方面。在为 iOS 设计时,您应该保持操作按钮和较小的标题居中,而标题、副标题和正文可以左对齐。

图标样式

Material 设计鼓励使用扁平图标,而 iOS 设计更喜欢细的 1px 或 2px 线条图标。这是一个很小但很重要的样式细节,在为另一个移动平台调整应用程序时应该考虑。如果您的应用具有特定的图标样式,则您不一定要遵循此规则。看看 iOS 11 中的新锁屏,他们似乎正在摆脱只使用轮廓图标的方式。

边框

一个简单的单像素笔划重音在高分辨率 Android 设备上可能看起来很棒,但不要忘记 Android 设计应该在大多数屏幕密度下都有效。在这些情况下,开发人员必须重新考虑设计元素并考虑应用程序代码中的不同情况。

品牌推广

品牌颜色及其色调的使用在 Material design 中更为占主导地位,而 iOS 指南建议使用更微妙的品牌方法。在 iOS 中,它应该只在 UI 元素中可见,例如图标、显示图形、按钮或链接。

应用程序图标

新的 Android 应用程序图标是自适应的,这意味着它们旨在适应不同设备的不同蒙版形状(圆形、圆角矩形……)。iOS 应用程序图标仍仅限于圆角矩形。

动画和过渡

UI 动画应该只在与用户行为相关时使用,并且它们应该让人感觉不显眼。

Material 动画风格是纸张分层哲学的产物,运动风格包含大量的涟漪效果和戏剧性的形状扩展,而 iOS 动画则更加微妙和自然。

导航

清晰自然的导航保证了健康的信息架构。除了风格差异之外,了解导航系统的基本特征也很重要。

抽屉

Material Design 提供了很多隐藏内容的组件,让用户更容易找到最相关的功能。例如,如果您有很多内容,您可以随时使用抽屉。在抽屉外面展示关键功能,把不那么重要的东西放在抽屉里。

有许多使用抽屉的 iOS 应用程序。然而,iOS 抽屉没有原生组件或设计指南,因为推荐的导航解决方案是原生标签栏。

标签栏

在 Android 应用中,主屏幕的底部导航栏仅在顶级导航中可见,因此不要从导航根目录走得太深。

iOS 设计理念始终把内容放在首位,很少隐藏任何东西。原生标签栏使用户能够在主要内容之间轻松切换,并鼓励用户探索应用程序。标签栏始终存在,并且很容易在导航的更高和更深级别之间切换。

返回键

Android 应用程序同时具有向上按钮(集成在应用程序中)和后退按钮(本机组件)。向上按钮可让您备份导航根目录。后退按钮通常会将您带回与向上按钮相同的屏幕,除非您之前已从一个应用程序切换到另一个应用程序。在这种情况下,后退按钮将带您返回上一个应用程序。

在 iOS 应用程序中,即使您可以在选项卡栏中的选项卡之间切换,导航较低级别的每个屏幕都应该有一个返回按钮,因为这是您可以向上导航根的唯一明显方式。

返回观点列表
本文标签:

相关专题

  • 品牌官网设计
    品牌官网设计

    杭州派迪科技为高端客户提供品牌官网咨询策划,品牌官网设计,品牌官网建设开发服务,以国际化视野和标准为基础,为各行业领军品牌提供高端企业网站定制、策划、设计、互动与制作

    查看详情
  • 大策略营销门户网站
    大策略营销门户网站

    杭州派迪科技有自己的营销型网站CMS系统,适合白帽SEO网站。特别对大策略的营销型门户网站制作有一定的经验,曾经为上海天擎外贸行业网站、浙江兆龙营销型门户、先临三维门户营销网站提供全程的技术支持及SEO优化指导

    查看详情
  • 集团/上市公司网站
    集团/上市公司网站

    杭州派迪科技为杭州本地集团公司提供网页设计、制作、开发服务,为集团公司网站建设提供了响应式、营销型、品牌型、门户型网站建设需求,欢迎广大集团公司客户咨询

    查看详情
  • 外贸网站建设
    外贸网站建设

    杭州派迪科技为高端客户提供外贸网站咨询策划,外贸官网设计,外贸官网建设开发服务,以谷歌搜索引起算法为基础,为各行业外贸公司提供高端企业外贸网站定制、策划、设计、互动与制作

    查看详情
  • 企业网站建设
    企业网站建设

    高端专业、令人印象深刻的用户界面、易于访问——企业网站必须反映一切,因为派迪科技在这里提供帮助,凭借精湛的技术、丰富的经验、与客户的持续沟通以及对每一个细节的关注,我们确保在快速的周期时间内提供优质的服务。

    查看详情
  • 半定制网站
    半定制网站

    杭州派迪科技模板网站建设专题_各行业方案专题栏目提供各行业产品适合的网站建设方案,帮助企业了解派迪科技建站效果等信息,您可以通过本站了解各行业网站建设方案,如需要获取本行业定制网站建设方案,可以联系在线客服或拨打电话咨询

    查看详情

体验从沟通开始,让我们聆听您的需求!

开始您的数字化品牌体验! 15158117070 期待您的来电!

[ 网站建设×品牌官网设计×大策略营销门户×微信小程序开发×微信公众号开发]

派迪业务总监微信号

派迪业务总监微信号

了解最新项目报价

派迪产品经理微信号

派迪产品经理微信号

免费获取项目策划

我们正使用 cookies 来改善您的访问体验

派迪科技非常重视您的个人隐私,当您访问我们的网站www.hzpady.com时,请同意使用所有cookies 。

如果您想详细了解我们如何使用cookies请访问我们的 《隐私政策》

Cookie 偏好

如果您想详细了解我们如何使用cookie请访问我们的 《隐私政策》

管理cookie偏好

基本 cookies

始终允许

这些 cookies 是网站运行所必需的,不能在我们的系统中关闭。它们通常仅针对您所做的相当于服务请求的操作而设置,例如设置您的隐私首选项、登录或填写表格。您可以将浏览器设置为阻止或提醒您有关这些 cookies 的信息,但网站的某些部分将无法运行。这些 cookies 不存储任何个人身份信息。

性能 cookies

始终允许
这些 cookies 使我们能够计算访问量和流量来源,以便我们可以衡量和改进我们网站的性能。它们帮助我们了解哪些页面受欢迎和不受欢迎,并了解访问者如何在网站上移动。这些 cookies 收集的所有信息都是汇总的,而且是匿名的。如果您不允许这些 cookies,我们将不知道您何时访问了我们的网站,也无法监控其性能。

功能性 cookies

这些 cookies 收集信息用于分析和个性化您的定向广告体验。您可以使用此拨动开关来行使选择不获取个人信息的权利。如果您选择关闭,我们将无法向您提供个性化广告,也不会将您的个人信息交给任何第三方。

定位 Cookies

这些 cookies 可能由我们的广告合作伙伴通过我们的网站设置。这些公司可能会使用它们来建立您的兴趣档案,并在其他网站上向您展示相关广告。它们不直接存储个人信息,而是基于唯一标识您的浏览器和互联网设备。如果您不允许使用这些 cookie,您将体验到较少针对性的广告。

我们正使用 cookies 来改善您的访问体验

派迪科技非常重视您的个人隐私,当您访问我们的网站www.hzpady.com时,请同意使用所有cookies 。

如果您想详细了解我们如何使用cookies请访问我们的 《隐私政策》