美文网首页
iOS 10 人机交互指南_第五章 Graphics

iOS 10 人机交互指南_第五章 Graphics

作者: 乔阳 | 来源:发表于2017-02-02 18:12 被阅读44次

    1. App icon

    App icon是你给用户的第一印象,苹果官方的解释如下:Every app needs a beautiful and memorable icon that attracts attention in the App Store and stands out on the Home screen. Your icon is the first opportunity to communicate, at a glance, your app’s purpose. It also appears throughout the system, such as in Settings and search results.

    App icon的设计准则:

    简洁(提炼App中最核心的价值,用简单、独特的方式展示在App icon中);

    主题鲜明,符合隐喻;

    icon背景不能是半透明的;

    克制使用文字;

    不要使用照片、截图或界面元素等过于复杂、在icon上看不清的设计元素;

    在不同背景壁纸环境下测试你的icon设计;

    圆角矩形;

    各种icon的尺寸:https://developer.apple.com/ios/human-interface-guidelines/graphics/app-icon/

    不同尺寸的使用场景:App store,home screen, Spotlight, Setting;

    2. Custom icon

    custom icon, 线框构造

    Simple, recognizable, 透明、抗锯齿、无阴影。线框的宽度是1pt,不要和系统内置icon太像,consistent, 不要使用文字,不要使用mac硬件形象,提供选中和非选中两种版本,提供无法显示icon时的替换文字。

    各种尺寸:https://developer.apple.com/ios/human-interface-guidelines/graphics/custom-icons/

    3. 图像尺寸和分辨率

    苹果有1x, 2x, 3x 三种标准,iphone 6s plus和iphone 6 plus是3x的,其他都是2x。

    4. Launch Screen

    每一个App都必须有Launch Screen. LS的目的是让用户觉得你的App可以迅速响应并可以立即投入使用。使用Xcode中的Storyboard模块管理LS。

    不要使用文字,和App首屏的切换要自然,不要打广告。

    5. System icon,

    iOS 10提供了一些系统内置icon,可以用在自己的App里(people' re familiar to people.)

    使用icon时,提供替代文字,这些文字虽然不可见,但是可以被voiceover读到,对视障人士有帮助。

    有三种:Navigation Bar and Toolbar icons, Tab Bar Icons, Quick Action Icons。具体都有哪些icon详情请见:https://developer.apple.com/ios/human-interface-guidelines/graphics/system-icons/

    相关文章

      网友评论

          本文标题:iOS 10 人机交互指南_第五章 Graphics

          本文链接:https://www.haomeiwen.com/subject/hlqkittx.html