iOS 设计向导阅读笔记

https://developer.apple.com/ios/human-interface-guidelines/

Colors

system’s color scheme 参考(适配light/dark)

Launch Screen

设计指南

• 尽量与你的 App 首屏一致(切换到首屏内容时过渡自然)
• 避免使用文字
• 避免突出重要信息
• 请不要用来广告

Device	Portrait size(px)	Landscape size(px)
iPhone 6s Plus, iPhone 6 Plus	1080×1920	1920×1080
iPhone 6s, iPhone 6	750×1334	1334×750
iPhone SE	640×1136	1136×640
12.9-inch iPad Pro	2048×2732	2732×2048
9.7-inch iPad Pro, iPad Air 2, iPad mini 4, iPad mini 2	1536×2048	2048×1536

---

由于 Launch Screen 的尺寸不规律, 每个尺寸可能会独立设计, 所以最简单的工作流还是结合 sketch 的 artboard 来快速导出生成 LaunchImage.launchimage, 附脚本参考:

#!/usr/bin/env bash

# $1 = './scripts/LaunchImage.sketch'
# $2 = './ios/Xss/Images.xcassets/LaunchImage.launchimage'

if [ -z $1 ]; then
    echo "Usage: sh $0 [source.sketch] [dist_path]"
    exit 1
fi

base=`dirname "$0"`

mkdir -p $2
mkdir -p /usr/local/share/sketchtool/
cp -rf $base\/resources.bundle /usr/local/share/sketchtool/
cp -f $base\/sketchtool /usr/local/bin/

sketchtool export artboards $1 --output=$2 --formats=png
cp -f $base\/Contents.LaunchImage.json $2\/Contents.json

App Icon

设计指南

• 简约化
• 突出焦点
• 可辨认
• 保持背景简单, 不要透明度
• 非必要时不要用文字
• 不要包含图片 / 截图 / 界面元素
• 不要使用 apple 的产品图片
• 不要在 App 中过度使用 icon
• 确保 icon 在不同背景下显示正常
• icon 应该是正方形的, 不要添加圆角 系统会添加蒙版来实现圆角
• 不要在icon上自行添加遮罩和边线 系统会自动添加 1px 描边以适配浅色背景

这里有个绝大的误区! icon 是正方形的无透明通道的 png 文件, 不带圆角!!
实测真机上这样效果最好

Device	Portrait size(px)
iPhone 6s Plus, iPhone 6 Plus	180×180
iPhone 6s, iPhone 6, iPhone SE	120×120
iPad Pro	167×167
iPad, iPad mini	152×152

此外, 上架 app store 时需一个尺寸为 1024×1024 尺寸的 icon.

---

总结下来:

iOS 的 icons 文件处理, 如果要上架 App store, 基于 1024px 的尺寸绘制, 否则基于 180px 尺寸绘制, 最终用 sip 转成其他尺寸, 不要圆角! 不要透明! 不要描边!

附处理 icons 的脚本:

#!/bin/sh

# $1 = './scripts/AppIcon.png'
# $2 = './ios/Xss/Images.xcassets/AppIcon.appiconset'

DIR=$(dirname $0)

if [ -z $1 ]; then
    echo "Usage: sh $0 [source_image] [dist_path]"
    exit 1
fi

mkdir -p $2

for size in 29 40 50 58 72 76 80 87 100 120 144 152 167 180
do
    sips -Z $size $1 --out $2\/$size\x$size\.png
done

cp -f $DIR/Contents.json $2

Contents.json (包含了 iPad 尺寸)

{
  "images" : [
    {
      "size" : "29x29",
      "idiom" : "iphone",
      "filename" : "58x58.png",
      "scale" : "2x"
    },
    {
      "size" : "29x29",
      "idiom" : "iphone",
      "filename" : "87x87.png",
      "scale" : "3x"
    },
    {
      "size" : "40x40",
      "idiom" : "iphone",
      "filename" : "80x80.png",
      "scale" : "2x"
    },
    {
      "size" : "40x40",
      "idiom" : "iphone",
      "filename" : "120x120.png",
      "scale" : "3x"
    },
    {
      "size" : "60x60",
      "idiom" : "iphone",
      "filename" : "120x120.png",
      "scale" : "2x"
    },
    {
      "size" : "60x60",
      "idiom" : "iphone",
      "filename" : "180x180.png",
      "scale" : "3x"
    },
    {
      "size" : "29x29",
      "idiom" : "ipad",
      "filename" : "29x29.png",
      "scale" : "1x"
    },
    {
      "size" : "29x29",
      "idiom" : "ipad",
      "filename" : "58x58.png",
      "scale" : "2x"
    },
    {
      "size" : "40x40",
      "idiom" : "ipad",
      "filename" : "40x40.png",
      "scale" : "1x"
    },
    {
      "size" : "40x40",
      "idiom" : "ipad",
      "filename" : "80x80.png",
      "scale" : "2x"
    },
    {
      "size" : "50x50",
      "idiom" : "ipad",
      "filename" : "50x50.png",
      "scale" : "1x"
    },
    {
      "size" : "50x50",
      "idiom" : "ipad",
      "filename" : "100x100.png",
      "scale" : "2x"
    },
    {
      "size" : "72x72",
      "idiom" : "ipad",
      "filename" : "72x72.png",
      "scale" : "1x"
    },
    {
      "size" : "72x72",
      "idiom" : "ipad",
      "filename" : "144x144.png",
      "scale" : "2x"
    },
    {
      "size" : "76x76",
      "idiom" : "ipad",
      "filename" : "76x76.png",
      "scale" : "1x"
    },
    {
      "size" : "76x76",
      "idiom" : "ipad",
      "filename" : "152x152.png",
      "scale" : "2x"
    },
    {
      "size" : "83.5x83.5",
      "idiom" : "ipad",
      "filename" : "167x167.png",
      "scale" : "2x"
    }
  ],
  "info" : {
    "version" : 1,
    "author" : "xcode"
  }
}

Apple Tips

• Apple recommends don’t use a screen with status bar. However that is not critical restriction.
• Up to 30 seconds of video showing app usage
• Focus on 2-3 of the best features
• Demonstrate UI, functionality or features
• It should mostly be captured footage
• Content must be rated 4+ (appropriate for all audience)
• Stick to straightforward transitions, nothing too fancy
• Localisation not required (or supported)
• Voiceover is allowed, try to make it not sound like an advert
• Identify all in-app purchases (e.g. «Requires in-app purchase» subtitle)
• Don’t use live action footage
• Don’t use logos or copyrighted material
• Don’t include any time based sales or special offers
• Maximum file size 500 MB (Max length 30 seconds. Min length 15 seconds)

The issue contains iOS Human Interface Guidelines notes, shell scripts, and an asset Contents.json example, but names no repository file, test, or entry point. First locate where project documentation is stored and confirm whether these notes are still relevant; done means adding the approved content in the repository's documentation format.