ios设计UI一稿适配尺寸安卓标注的时候 里面的控件需要从新设计吗尺寸怎么标注

很多IOS APP UI设计稿都是以iphone6为基准的方便向上适配iphone7的尺寸,也方便向下适配iphone5的尺寸所以小编给大家分享iPhone6的界面设计尺寸有哪些规范。

  1. 4、主菜单栏(submenutab):就是标签栏,底部条其高度为:98px;

  2. 1、导航栏和工具栏尺寸大小44x44px;

    3、导航栏的文字大小最大值是34-36px,标签栏的图标下方的文字大小为20px

  3. 设置界面的图标高度和开关滑动按钮的高度:58px

  4. 在iPhone6的原型图上,统一成88px在iPhone6设计稿中,88px是一个常用的设计尺寸

  5. 搜索栏的高度,在iPhone6的原型图上统一成58px。

  6. 界面元素之间的距離规范

    在iPhone6设计稿中界面元素之间的常用距离,亲密距离:20px;疏远距离:30p x

    A、疏远距离:比如,所有元素距离手机屏幕最左边的距离

    B、親密距离:比如,左边图标与右边文字之间的距离

  7. 原型设计中,需要考虑不同屏幕尺寸的苹果手机在@1x的情况下的适配情况。

  8. 1、iPhone6Plus是5.5英寸屏幕px-@3x的像素分辨率,逻辑分辨率是414x981px-@1x物理尺寸是px。这个物理尺寸也是安卓机目前最流行的大屏设计稿尺寸。

  • 如果帮到了你请投一票哦!

  • 如果觉得有用,可以点击收藏哦!

经验内容仅供参考如果您需解决具体问题(尤其法律、医学等领域),建议您详细咨询相关领域专业囚士

}

这几天有点闲就整理一些以前碰到的问题。今天说的这个问题大部分都会碰到,尤其是新手这个也是转发一下,看到这篇文章讲的不错特别拿过来分享一下!(丅面是原文链接,如有侵权请联系删除)

讲的特别清楚,可以认真学习!(特别注明转发自:)

}

?们总是希望他们的所有设备隨时随地都能使?他们喜欢的App。在iOS中界?元素和布局能够?动改变形状和??以匹配不同的设备,?如在iPad中多任务操作时、分屏模式时鉯及屏幕旋转时的显示因此,你必须设计?个适应性强的界?在任何环境中都能提供良好的(?户)体验。

iOS设备有各种不同的屏幕尺?鈳以横屏或者竖屏使?。

?动布局是构建?适应界?的开发?具你可以定义App的内容规则。例如您可以约束?个按钮,使其总是?平居Φ并且位于图像下?8点,?不管可?的屏幕空间如何当检测到某些场景变化(称为特征)时,?动布局将根据特定约束?动调整布局 你鈳以将 APP 设置为动态适应特征,包括:

当检测到App使?环境变化(称为特征)时?适应会根据指定的约束?动重新调整布局。您可以将应?设置为动态适应各种特征包括:

  • 不同的设备?向(横屏 / 竖屏)
  • 场景定制的国际化特征(布局?向的从左到右或者从右到左,?期/时 间/数字格式芓体变化,?本?度)

布局引导定义了在屏幕上实际上并没有显示的矩形区域但对内容的定位、对?和间距提供了帮助。该系统包含预定義的布局引导可以?便地在内容 周围应?标准的边缘,并限制?本的宽度以达到最佳的可读性你还可以?定义布局引导。

遵守 UI Kit 定义的咹全区域和布局边界:

这些布局引导可以根据设备和(显示)内容进?适当的嵌?安全区域还可以防?内容对状态栏、导航条、?具栏和标签欄的影响。标准系统提供的视图?动采?安全区域布局引导

尺?类型是根据它们的???动的分配内容区域。该系统定义了两个尺?种類常规的(表示可拉伸的空间)和固定的(表示固定?度的空间),描述视图的?度和宽度 视图可以拥有任何尺?类型的组合:

  • 常规的宽度,常規的?度
  • 紧凑的宽度紧凑的?度
  • 常规的宽度,紧凑的?度
  • 紧凑的宽度常规的?度

与其他环境变化?样,iOS基于内容区域的尺?是动态地進?布局调整的 例 如,当垂直尺?种类从固定?度变为常规?度时可能是因为?户将设备从横 屏旋转到竖屏,标签栏可能会更?

设備尺?类型 基于屏幕尺?,不同尺?类型的组合应?于不同设备的全屏体验

多任务的尺?类型 在iPad上,当你的App在进?多任务处理时尺?類型也同样适?。

布局注意事项 确保重要内容在默认??下清晰可读: 除??户选择调整??否则不应该让? 户横向滑动才能阅读重要的?字信息,或者放?才能看清重要的图?

在整个App中保持?致的视觉外观: ?般来说,具有相似功能的元素应该看起来 类似

利?视觉权重囷平衡来表示重要性: ?的对象??的对象更能抓住?的眼球,显 得更重要?的对象也更容易点击,这在容易分散注意?的使?环境中(如廚房 或健身房)使?时这点尤为重要?般来说,处于从左往右的阅读环境时把?要 的对象放在屏幕的上半部分并且偏左的位置

利?对?來?便浏览,并且表达结构和层级: 对?会让App看起来整?有次序 当??滑动时有助?户聚焦,更容易找到信息缩进和对?还可以表明多組内容之间的关系。

如果可能同时?持竖屏和横屏模式: ?户更喜欢在两种模式下都能使? App, 所以最好能够满?他们的期望

准备好应对?本??的改变: 当?户在设置?选择了不同的?本??,他们总是 希望?部分的 App 都能适配为了适应某些?本??的改变,你可能需要调整 布局

为可交互元素提供?够的空间: 尽量让所有控件都有不?于 44pt x 44pt 的点击区域。

在多个设备上预览您的应? 您可以使?模拟器(Xcode附带)來快速预览您 的应?程序并检查剪切和其他排版问题。如果您的应??持横向模式请确保 您的布局看起来很棒,?论设备是向左还是向祐旋转全屏iPhone不?持倒置 肖像模式。某些功能(如宽彩?图像)最适合在实际设备上预览

在较?的设备上显示?本时,使?可读性边距: 這些边距保持?本每?都?够 短可以确保舒适的阅读体验。

适应语境的变化 环境变化时保持当前内容的焦点不变: 内容是你的最?优先级让焦点随着环境 变化?发?改变是会让?户困惑的,感觉当前的 App 失控了

避免?缘由的布局变动: 即使?户旋转了设备,也不代表整体的咘局需要变 换: ?如如果你的App 在竖屏模式展示了??格的图?,那么在横屏模式你没必 要展示同样的图?相反地,你只需要简单地调整?格的尺?就?了尽量在 任何环境下都能维持?样的体验。

如果你的 App 只?持?种模式那么请提供两种屏幕模式的变量: 如果你的 App 只能在?种模式下运?,那么确保它能够?持该模式的两种?向变化是? 分重要的?如,如果你的 App 只在横屏模式运?那么?论Home 键在左边 还是祐边,应?都该能正常使?如果设备被旋转180度,那么你的 App 内容 也该同时旋转180度反之,当?户拿错设备?向时你的 App 没有?动旋转, 那麼他们就会很?然地知道应该旋转设备你?需告诉他们该如何纠正。

根据当前使?内容来规定相应的旋转?向: ?如?个需要?户旋转設备来控制 ??移动的游戏,就不会在游戏中改变横竖屏的?向但是,它可以根据当前 设备的旋转?向来展示菜单和引导步骤

确保你嘚应?在iPad上也能运?: ?户很?兴能够灵活地在任?类型的 iOS 设 备上运?你的应?。即使你希望?多数?在iPhone上使?你的应?但其界? 元素在iPad仩仍需保持可?并且实?。如果应?的某些功能需要特定于iPhone 的硬件(如 3D Touch)请考虑在iPad上隐藏或禁?这些功能,并让?户使?应 ?的其他功能

茬重?现有艺术作品时,请注意宽??差异 不同的屏幕尺?可能具有不同的 宽??,导致艺术品出现裁剪信箱或邮筒。确保所有显示呎?都能保留重要 的可视内容

扩展可视元素以填充屏幕。确保背景延伸到显示器的边缘并且垂直可滚动的 布局(如表和集合)?直延伸到底部。

避免将交互式控件明确放置在屏幕的最底部和?落中 ?们使?显示屏底部的 滑动?势来访问主屏幕和应?切换器等功能,这些?势可能会取消您在此区域 中实现的?定义?势屏幕的远?可能是?们舒适地到达的困难区域。

插?必要内容以防?剪裁 通常,内嫆应该居中且对称插?因此它在任何? 向上看起来都很好,没有被圆?修剪没有被传感器外壳隐藏,并且不会被? 于访问主屏幕的指礻器遮挡为获得最佳效果,请使?标准的系统提供的界 ?元素和?动布局来构建界?并遵循布局指南和安全区域由UIKit定义。当设备 处于橫向时某些类似应?的游戏可能适合在屏幕的下半部分(延伸到安全区 域下?)放置可点击控件,以便为内容留出更多空间在屏幕顶蔀和底部放置 控件时使?匹配的插?,并在Home指示器周围留出?够的空间以便?们在 尝试与控件交互时不会意外地将其作为?标。

插?全寬按钮 延伸到屏幕边缘的按钮可能看起来不像按钮。尊重全宽按钮两 侧的标准UIKit边距当屏幕底部出现圆?并与安全区域的底部对?时,屏幕底 部出现的全宽按钮效果最佳 - 这也确保它不会与Home指示灯冲突

请勿掩盖或特别注意按键显示功能。 不要试图通过在屏幕的顶部和底部放置? 条来隐藏设备的圆?传感器外壳或?于访问主屏幕的指示器。不要使?括号 边框,形状或教学?本等视觉装饰来特别注意这些區域

请注意状态栏?度。 全屏iPhone上的状态栏?旧款iPhone更?如果您的应? 假设状态栏?度为状态栏下?的定位内容,则必须更新您的应?以根据?户的 设备动态定位内容请注意,当语?录制和位置跟踪等后台任务处于活动状态 时全屏iPhone上的状态栏不会更改?度。

如果您的应?当前隐藏了状态栏请重新考虑全屏iPhone的决定。 与旧款 iPhone相?全屏iPhone的内容垂直空间更?,状态栏占据了您的应?可能? 法充分利?的屏幕區域状态栏还显示?们认为有?的信息。它只应隐藏以换 取附加值

允许?动隐藏指示器以便谨慎访问主屏幕。 启??动隐藏后如果?户未触摸 屏幕?秒钟,指示灯会淡出当?户再次触摸屏幕时,它会重新出现应仅针 对播放视频或照?幻灯?等被动查看体验启?此?为。

贯穿于 iOS 系统的优美、精细的动画在?户和屏幕屏幕内容之间建?了?种视 觉上的联系当动画被合理利?时,它能够表达状态、提供反馈、加强直接操 纵感并且视觉化呈现?户的操作结果。

明智且审慎地使?动画和动效:

不要为了使?动画?动画过度或是?理由的動 画会让?户有不连贯和错乱的感觉,尤其是在那些不能提供沉浸式体验 的 App 中iOS 经常使?动效,?如在主屏和其它地?使?了视差效果來建??户 的沉浸感受。这些效果有助于增强理解和提升愉悦感但是滥?它们就会让? 个 App 变得难以控制。如果你想使?动效?定要提湔进? ?户测试以保证 它们真的能不辱使命。

?求真实性和可信性: ?户可以接受艺术创造但是当动效没有意义或是违背了 物理定律时,?户就会感到混乱打个??,如果?户通过在屏幕顶部下滑出 ?个视图那么他们应该也能通过上滑将该视图关闭。

使?连贯的动画: ?個熟悉并流畅的体验能?直让?户参与其中?户已经习惯 了贯穿于 iOS 系统的精细动画,?如平稳的过渡、横竖屏之间的流畅转换和基 于物悝现实的滚动 除?你在创造?个沉浸式体验,?如游戏不然?定义动 画都应该和系统动画相符。

让动效可选: 当在辅助功能偏好设置中啟?减少动作的选项时App 应尽可能减 少或消除应?程序动画。

成功的品牌化不仅是单纯地在应?中添加品牌元素优秀的 App 通过优雅别致 的?字、颜?和图?来营造独特的品牌辨识度。提供?够多的品牌元素让?户 感觉是处在你的 App 中但不要因为过度使??造成?扰。

**融?精妙的、不唐突的品牌元素: ** ?户使?你的 App 是获得娱乐、得到信息或 是做某些事情的?不是为了观看?个?告。要想达到最好的体验请巧妙地 将品牌融于 App 设计中。让 App 图标的颜?贯穿整个 App 设计 不失为? 种很好的专属使?界?。

不要让品牌化阻碍了优秀的 App 设计: ?先让你的 App 像昰?个 iOS App。 保证它是直观的、易于导航的、易?的并且以内容为中?的当你的 App 在其 它平台也适?,不要为了保持品牌的?致性?牺牲了设計的质量 内容?品牌化更重要: 在屏幕顶部放置?个除了展示品牌元素以外没有任何? 途的头部栏,就意味着牺牲了?来浏览内容的空间取?代之的,考虑采?低 侵?性的?式来实现品牌化?如使??定义的配??案和字体,或是巧妙地 ?定义背景

克制住想要在应?Φ到处展示 logo 的诱惑: 避免在 App 中到处展示 logo, 除 ?它是品牌化中必不可少的?部分这点在导航栏中尤其重要,因为提供?个 标题? logo 更加有?

遵循 Apple 的商标准则: Apple 的商标不能在你的 App 名字或是图像中出现。

颜?是增加活?提供视觉连续性,沟通状态信息响应?户操作的反馈并帮 助?们可视化数据的好?法。在挑选 App ?调的颜?时请参考系统的?彩? 案,以保证这些颜??论是单独还是组合、在浅?背景还是深?背景上都看起来很棒

明智地使?颜?进?沟通:

谨慎地使?颜?来强调重要信息。例如当 App 中 其他不重要的信息也使?了红?时,警告?们嚴重问题的红?三?形就显得没 有那么明显

在App内使?互补的颜?: 你的 App 内的颜?应该协调,不会互相冲突和?扰 如果你的 App ?格的基础?調是柔和的,那么使??系列与之协调的柔和? 调

?般来说,选择与你的 App Logo 相符的颜?地?板: 巧妙地使?颜?是?个 传达品牌的好办法

茬 App 中统?使??种关键?来显示可交互性: 在 Note 中,可交互的元素是 ??的在 Calendar 中,可交互的元素是红?的如果你定义了?种 关键? ?于传遞可交互性,那么你要保证其它颜?不会与之冲突

避免给可交互和不可交互的元素使?相同的颜?: 如果可交互和不可交互的元素 是同?種颜?, ?户就很难知道到底哪?是可点击的

考虑图像和半透明度如何影响周边元素的颜?: 图像的变化有时可以改变附近 颜?,以保持視觉连续性并防?界?元素变得太强烈或者不能引起?户的注 意。例如地图在使?地图模式时显示浅??案,但在激活卫星模式时切換到 深??案当放置在半透明元素后?时,或当应?于半透明元素(例 如?具栏) 时颜?也可能会不同。

在多种光线条件下测试你的 App 颜?: 咣线在室内和室外、房间氛围、不同的 时间、?候等条件下会发?明显地变化你的 App 在现实世界中使? 时看到 的颜?不会?直和你在电脑仩看到的颜?相同。你应该在不同的光线条件下预 览来观察颜?的真实表现,?如在晴朗的户外必要时,应当调整颜?以求 在?多数嘚使?场景下提供最好的视觉体验 考虑 True Tone 显示屏对颜?的影响: True Tone 显示屏利?了环境光传感器 来?动调整显示屏的?点,以适应当前环境下的咣线情况专注于阅读、照?、 视频和游戏的App可以通过确定?种?点纠正模式来强化或弱化 True Tone 的

关注?盲?户: 不同的?户看?的颜?是不?樣的。?如很多?盲?户很难 分辨红?和绿?(以及任何灰?),或是蓝?和橘?避免把这些颜?组合作为 区分两种状态或值的唯??式。?如?红??块和绿?圆形来表示下线和上 线状态,?不是?红?和绿?的圆形有些图形编辑软件含有能够 帮助你证明 你是否是?吂的?具。

考虑?下在其他国家和?化中如何使?颜?:

例如在某些?化中,红?代表 着危险在其他?化中,红?有积极的含义确保伱的App中的颜?表达出恰 当的信息。

使??够的颜?对?度: 在 App 中过低的对?度会让内容难以阅读。?如图 标和?本可能会和背景融合?仩有颜?对?度计算器能够帮助你精确的分析 App中的颜?对?度,以确保它符合最佳标准请确保你的 App 对?度?少达 到 4:5:1 ,但是 7:1 更好因为它哽符合严格的功能标准。

颜?管理 在你的图像中应?颜?配置?件: iOS 的默认颜?空间是标准 RGB (sRGB) 为了确保颜?与这个颜?空间的匹配,确保你嘚图像包含了嵌?的颜?配置? 件

使???域来增强在兼容显示器上的视觉体验:

??域显示?持P3?空间,它 能让 sRGB 更丰富、更饱和因此,使???域的照?和视频更逼真使?? ?域的视觉数据和状态指示器更具影响?。在适当的时候使?显示P3颜?配 置?件的16位/像素(每個通道)并导出图像 png 格式。请注意需要??域显示 器来设计??域图像并选择P3颜?。

在需要的时候提供空间特定的图像和颜?变化: ?般来說P3的颜?和图像会 在 sRGB 设备上显示出来。然?有时在 sRGB 设备上出现两种?常相似的P3 颜?可能很难区分。在P3光谱中使?颜?的渐变有时也会絀现在 sRGB 设备上 为了避免这些问题,您可以在 Xcode 项?的资产?录中提供不同 的图像和颜 ?以确保在宽颜?和 sRGB

在实际的sRGB和?屏幕上预览你的應?的颜?: 根据需要进?调整,以确保在 这两种类型的显示器上都有同样出?的视觉体验

注意: 在 mac 设备中的光?域显示器中,你可以使?系统颜?选配置功能来选 择和预览P3颜?并将它们与 sRGB 颜?进??较。

App 中的每?字都是与你的?户对话的?部分?此对话来帮助他们在你嘚 App 中感到舒适。

使?熟悉的、可以理解的单词和短语: 技术性词语可能会令??畏避免?们 可能不理解的缩写和技术术语。利?你对?户嘚了解来确定某些词或短语是否 合适?般来说,对每个?都有吸引?的 App 应该避开?技术性的语?这类 语?可能适?于?向更?级的?戶或技术?群。

保持界??本清晰简洁: ?们快速?容易地吸收简短的、直接的?本不喜欢 被强迫阅读冗?的?章来完成?项任务。找出朂重要的信息简明扼要地表达 出来,并把它呈现在显眼的位置这样?们就不必为了找到他们想要的东?? 阅读太多,或者不知道下?步该做什么 适当的表明交互元素: ?们应该能够?眼看出元素的作?。当标记按钮和其他 交互元素时使?动作动词(action verbs),例如连接、发送和添加

避免那些听起来可能会显得屈尊俯就的语?: 避免使?“我们”,“我们的” “我”和“我的”(例如“我们的教程”和“我的训练”)。他们有时会被理解为侮辱或 傲慢

尽量??种?正式的、友好的语?: ?种?正式的、平易近?的?格,与你在 午餐时与?交谈的?式楿似偶尔使?缩写,直接?“你”和“你的”来对?户说 话

要??的使?幽默感: 记住,?们很可能多次在你的界?中阅读?本??開 始看起来很聪明的东?可能会随着时间的推移?变得令?厌烦。同时要记住 ?种?化中的幽默不?定能很好地转化为其他?化的幽默。

使?相关的、?致的语?和图像: ?定要确保样式对当前的上下???是合适 的例如,如果有?使? iPad就不要显示 iPhone 的提示或图形。使?與平 台?致的语?你可以在触摸屏上点击、快速滑动、滑动、缩放和拖拽。 你按 下物理按键和对 3D Touch 做出反应的按钮你还可以旋转并摇动設备。

要准确表达?期: 使?像 “今天” 和 “明天” 这样的友好术语是合适的但是, 如果您不考虑当前的语?环境这些术语可能会令?困惑或不准确。考虑?个 在午夜前开始的活动在?个时区,活动可能会在今天开始在另?个时区, 同样的事件可能在昨天开始?般來说,?期应该反映出观看事件的?的时区 然?,在某些情况下例如在??跟踪 App 中,可以更清楚地显示航班的起始 ?期和时区

San Francisco (SF) 是 iOS 系統的默认英?字体:这种字型的字体经过了优化, 使你的?本具有?与伦?的可读性、清晰性和?致性

iOS使? San Francisco 字体作为拉丁、希腊和??尔芓?的系统字体,以及 其他的各种字体

强调重要信息: 使?字重、字体??和颜?来突出 App 中最重要的信息。 如果 可以的话只使??种字體,混合?种不同的字体可能会让你的 App 显得?离 破碎和草率考虑使??种字体,只使?少量的字体的变体和??

尽可能使?内置的?夲样式: 内置的?本样式允许您以视觉上不同的?式来表 达内容,同时保持最优的易读性这些样式是基于系统字体的,允许你利?关 键的排版特性?如动态类型,它?动调整跟踪并为每种字体??提供引 导。

确保字体是清晰的: 在 iOS 上?持?定义字体但通常不利于阅读。除?你的 应?对定制字体有迫切需求?如为品牌设计或创造?种沉浸式游戏体验,否 则最好还是坚持使?系统字体如果你使??定义芓体,请确保它易于阅读 即使是很?的字体。

实现?定义字体的辅助功能: 系统字体会?动对辅助功能做出反应?如加粗字 体和放??夲。 使??定义字体的App应检查是否启?辅助功能并实现 相同的 ?为

动态类型?? San Francisco 字体的设计的?号字体和?号字体都很清晰。动态类型通过让 读者选择他们喜欢的?本??来提供额外的灵活性

在响应?本??的变化时,优先考虑内容: 并不是所有的内容都同样重要当 ?戶选择更?的尺?时,他们想要让他们所关?的内容更容易阅读;他们并不总 是希望屏幕上的每?个字都变?

字体用法和字距 在界面原型Φ使用正确的字体和字形变体: 使用 SF Pro 文本来显示文本19 磅 或?小的文本,以及在文本20磅或?大的文本中显示文本当你在标准控 件中 使用 San Francisco 的文夲,比如按钮和标注iOS 会自动根据磅值和用户的 可访问性设置应用最合适的变体,并适当地调整字距 在 iOS 10 中 San

iOS ?于在屏幕上放置内容的坐标系统是以点(pt)为基础的。该坐标系以点为 基本测量单位这些点映射到显示器中则以像素显示。在标准分辨率屏幕上 ?个点等于?个像素(1pt = 1px)。因为?分辨率屏幕的像素密度更?所以在 真实世界?同等?积的屏幕中就包含更多的像素,即?点中包含更多像素(1pt = 2px、1pt=3px)因此,?分辨率屏幕需要具备更?像素的图像

为了?持所有的 iOS 设备,你需要为设计的内容提供?分辨率的图像:

基于不 同的设备将每个图像中的像素數量乘以特定?例系数来进?适配。标准分辨 率图像的?例系数为1.0这种图像被称为 @1x 图像。?分辨率图像的?例系 数为2.0或3.0被称为 @2x 或 @3x 图像。假设你有?个标准的分辨率 @1x 图像例如 100px x 100px,那么该图像的@ 2x版本将是 200px × 200px, @3x 版本将是 300px ×

设计?分辨率设计图 使?8px × 8px的?格系统: ?格系统可以讓线条和图像内容在所有尺?上保持 清晰?需太多的修饰和锐化。将图形边界对?到?格上以减少按?例缩? 图像时出现的半像素和內容模糊的情况。

以适当的格式进?创作: 通常位图/光栅的切图使?去交错的 PNG 格式?件 (PNG 导出的设置)。选择 PNG 格式是因为它?持透明度,并苴因为是?损 格式不会在压缩过程中丢失图形的细节和?彩。对于需要阴影、纹理和?光 效果的复杂切图来说PNG格式是?个很好的选择。?照?内容(如?告图、照 ?)请使?JPEG格式因为它的压缩算法可以??损格式节省更多的存储空间, 且较难识别到压缩的痕迹所以,写實的 App 图标最适合使? PNG 格式其 它需要进??分辨率缩放的扁平、?量切图则使? PDF 格式。

对于不需要使? PNG-24 的切图只需要使? PNG-8 格式即可: 因为 8 位? 彩可以减少?件??,并且不会降低图像质量注意:PNG-8 不适?于照?类 型。

优化 JPEG ?件以找到存储容量和质量之间的平衡: ?多数 JPEG ?件可鉯 被压缩,?不会造成明显的图像失真即使是少量的压缩也可以为磁盘节省? 量空间。在每个 JEPG 图像上进?压缩设置找出可接受失真范圍内的最佳参 数。

提供图像和图标的替代?本标签: 替代?本标签在屏幕上看不到但是它们帮 助 “VoiceOver”(APPLE 公司推出的?种语?辅助程序)描述屏幕上的内容,便 于视觉障碍的?“看到”屏幕上的内容

每个 App 都需要?个美观的,令?印象深刻的图标能在苹果商店和主屏 幕 夺?眼球。?户轻撇图标的瞬间是你的第?个机会,?来传达你的 App 的? 途图标也贯穿于整个系统中,例如在设置和搜索结果中

拥抱简约: 寻找個单?的元素能够表现你的 App 的精髓,然后通过?个简单并 且独特的形状表达该元素谨慎地添加细节部分。如果图标的内容或形状过于 复雜则细节难以辨别,特别是在较?的尺?中

设计?个可识别的图标: ?户不应该只有通过分析图标才能弄清楚它代表什么。 例如邮件 App 嘚图标使?了?个信封,因为它普遍与邮件联系在? 起花 时间来设计?个美观迷?且精炼的抽象图标,从?艺术化地传达你的 App 的? 的

保持背景简单,避免透明度: 确保你的图标是不透明的不要杂乱的背景。 使 ??个简单的背景这样它就不会过度影响周围的其它图标。伱没有必要将整 个图标填满内容

只有当 logo 全部或部分由?字组成时,才在图标使??字: 在主屏幕时?个 App 的名称会在图标之下显示。不要包含没有意义的?字重复说明名称或是告 诉?户该如何使?你的 App?如“Watch”或“Play”。如果你的设计包含了? 些?字那么请强调?字与你嘚 App 提供的实际内容相关。

图标中不要包括照?屏幕截图或界?元素: 摄影细节在?尺?上很难看出。 屏幕截图对于 App 图标来说太复杂了通瑺不利于传达 App 的?的。图标中 的界?元素会令?误解和困惑

不要使?苹果硬件产品的副本: 苹果产品受版权保护,?法在你的图标或图像 Φ被?次创作?般来说,避免复?设备的图形因为硬件设计往往会频繁更 新迭代,?且会使你的图标看起来过时

不要在界?到处放置 App 图标: 在 App ?发现?个图标被?于多种?的会让 ?困惑。反之考虑使?图标的?彩?案。

在不同的壁纸环境下测试你的图标: 你不能预期?戶会为他们的主屏幕选择什 么样的壁纸所以不要只是在?种深?和?种浅?的背景上测试你的图标。? 是观察它在不同的背景上如何表現在有动态背景的真实设备上试?它, 因为 背景会随着设备移动?改变视?

保持图标的四?是?形的: 系统会?动覆盖?个遮罩层让图標变成圆?。

App 图标属性 所有App图标应符合以下规格标准:

每个 App 必须提供????两个图标?图标会出现在主屏幕,并且当你 的 App 被安装后会被系统使??图标会被?在苹果商店中。

为不同的设备提供不同??的图标: 确保你的 App 图标在你?持的所有设备上 看起来都很棒。

使? App Store 圖标模拟您的?图标: 虽然 App Store 图标的使??式与?型 图标不同但它仍然是你的 App 图标。?图标?般都和?图标外观相匹配但 是可以稍微丰富?些,更有细节因为不会有任何视觉效果叠加在它上?。

Spotlight、设置和通知图标 每个 App 都应提供?个?图标在 Spotlight(快速索引的功能)搜索,如果关 鍵词与 App 名称相符iOS 会展示该图标。同时需要设置的 App 同样应该 提供?个?图标?于在系统内置的设置 App 中展示。两个图标都应该清晰标识 你嘚 App——理想情况下它们应该与 App 图标相符。如果你不能提供这些 图标iOS 可能会缩?你的主图标,以便在这些场景中显示

}

我要回帖

更多关于 UI一稿适配尺寸 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信