恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
iOS交互设计规范指南
0.0°
2017-09-03 原创文章 规范/资料 举报 26649 92 193 0












一、APP图标

图标是用户看到您的APP第一件事。它会出现在主屏幕上,App Store商店中, spotlight搜索和设置里。

Image titleiPhone不再支持@1x,所以你不必生成它。APP图标现在只需要使用:@2x、@3x。有3种类型:应用程序图标,Spotlight搜索和设置。而iPad使用:@1x、@2x。

Image title二、色彩

iOS的使用鲜艳的色彩衬托出按键。这些颜色倾向于在白色或黑色背景很好地工作。请记住,配色应该简洁为主,这样感知力更强。粗略地说,只有10-20%的部分设计时应该有颜色,不然太抢眼,容易忽视主要内容。Image title


iOS的经常使用的中性色彩作为背景和菜单区域。在白色背景,使用黑色文字,使文本能够舒适的阅读。用淡蓝色按钮中让操作功能脱颖而出。Image title

三、按钮和字体大小

一般的规范是按钮用44pt、小文字用12pt、正文文本用17pt和标题用20pt+。

Image title

四、间距和对齐方式

一般的规范最低要求8pt空白或边距。这将有足够留白空间,使得布局更容易扫描和文本更具可读性。而且在此基础上,UI元素应对齐,文本应该有相同的基线位置。

Image title

五、状态栏和导航栏

状态栏

用户依赖于状态栏的重要信息,如信号,时间和电池。文本和图标可以是白色或黑色,但背景可以被设计成任何颜色,并与导航栏合并。

Image title

导航栏

导航栏是用于屏幕的快速信息。左边部分可用于配置文件,菜单按钮,而右边的部分是一般用于动作按钮,如添加,编辑,完成。请注意,如果您使用这些系统图标,您不需要为它们单独设计。

Image title

就像状态栏一样,背景可以被定制为任何颜色,通常有一个微妙的模糊,以确保文本始终是可读的。当状态栏出现时,两个背景都被合并。


六、搜索栏和工具栏

当你有很多的内容,使用搜索是明智的选择。

Image title

工具栏

当你需要更多的空间来放置你的动作按钮和屏幕状态,你会需要使用工具栏。

Image title


七、底部标签栏

标签栏是多屏之间的主导航条。如果你有几个栏目,避免汉堡包菜单。通常是可见的菜单会增加使用,因为显眼就会赢得使用。此外,建议在你的图标旁边添加文字,因为大多数人不会立即识别符号,特别是当他们不知道。

Image title


八、表格界面

表格界面,用于列出内容的一种很常见的用户界面。大多数应用程序使用表格界面的形式,这是因为它在有限的高度中,展现最多的内容。

Image title

你可以使用一些预设样式。Image title


九、提示

提示对话框是用于输送关键信息和提示快速操作。提示应保持最少文字,退出一定是明显。

Image title

Activity对话框允许您使用iOS的功能,如Airdrop、收藏夹、书签和应用程序邮件、 Facebook,Twitter分享内容(文本、图片、链接)但不能自定义外观和选项。

Image title

如果提供的信息并不短,你可以设计一个界面,通常是一个滑动,淡出,翻转或动画显示。它应该像提示框,必须容易取消,并保持尽可能短。

Image title


十、分段控制

Image title


十一、iOS图标

这些都是iOS原生图标。因为它们常用,所以用户会立即识别出它们的要表达意思。如果把它们用作其他可能会混淆你的用户,所以不要乱用喔。

Image title


当您设计图标时,使用众所周知的符号是非常 当您设计图标时,使用众所周知的符号是非常重要的,不然用户是无法第一时间识别图标要表达的意思。因此,我强烈建议在图片的旁边添加文字。











更新:2017-09-03

收藏

92人已收藏

宋昌昌

脱离了业务需求进行的产品设计都是耍流氓!

  • 28

    作品

  • 53

    粉丝

  • 8

    关注

  • 如何让你的产品原型更具有说服力(下)
  • 如何让你的产品原型更具有说服力(上)
  • 关于B端和C端产品设计时的异同性总结
  • 如何进行需求分析?

    猜你喜欢

      2017-09-03 原创文章 规范/资料 举报 26649 92 193 0

      iOS交互设计规范指南

      0.0°

      你确定要举报 iOS交互设计规范指南

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2017年09月03日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      193
      92
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录