IOS 界面设计基本知识（HIG）

• 控件
• 文本框
• 警告框&操作列表（action sheet）
• 定制图标和图片指南

 

控件

直接用IOS提供的控件，不需要自己画样式

 

控件名	图片	说明	交互	样式	使用场景
活动指示器		暗示任务或过程正在进行中	在工具栏或主视图展示； 任务进行中，出现； 任务完成后，消失；	默认白色； 可调整尺寸和颜色	所有加载、任务运行情况
日期和时间拾取器		选取时间，年月日小时分钟； 四种状态。 可改变分钟的步长。	最多展示4个独立的轮子	尺寸与键盘一致	【详情】编辑时间
网络活动指示器		出现在状态栏，暗示网络活动正在进行	有数据传输，出现； 网络活动停止，消失。		所有数据传输。 如果数据传输很快，不展示，因为可能用户还没发现就消失了；时间长的，展示向用户反馈。
页码指示器		显示共有多少页，当前页		点的间距不能压缩，竖屏最多20个点，多余的会被切掉 屏幕底部居中。	【地图】翻页
进度指示器				默认白色	【详情】上传图片
搜索栏				蓝色和黑色	所有搜索
分段控件				高度固定，宽度按比例	【列表】分段控件：切换列表/地图模式
滚动条					暂无
切换器		切换互斥的2种状态			【详情】权限

 

 

另有拾取器

 

 

 

文本框

 

提示图标：输入框左侧的搜索图标、书签图标

提示语：请输入百倍关键字、搜索天猫、搜索用户和标签；如果没有提示，用产品名占位；

清空按钮：输入框右侧的x

键盘：中文、英文、数字、URL快捷键盘

其他输入控件：时间拾取器、列表

 

 

找了一个比较好的文本框交互：

 

默认：搜索图标+提示文字；

第一步：{按下文本框}，出现“取消”按钮，弹出键盘，遮罩；

第二步：{输入关键字}，提示文字消失，框右侧出现清空按钮“x”；{点击“取消”}，到默认状态。

 

 

 

警告框（慎用！）

 

切记限制警告框的数量。

 

样式

界面中央，覆盖在界面之上。

它的出现意味着APP发生了重要的变动。

用户必须关掉警告框才能继续操作。

背景色是系统定义的，无法定制。

 

可以不用警告框的场景

- 突出某些重要信息。【替代方案】调整样式，突出重要信息。

 

- 提示正常进行中程序的进度。【替代方案】考虑使用“进度指示器”或“活动指示器”。

 

 

- 对用户出发的操作讨要“确认”。【替代方案】可以使用action sheet操作列表。

- 不要提示那些用户无能为力的错误。【替代方案】把这些消息嵌入到界面里。例如，与其每次服务中断时都提示用户一下，不如在最后一次连接成功时提醒用户。

 

文案设计

- 警告框信息尽量简洁，出现滚动是非常不好的体验。

- 尽量采用2个按钮。只有1个按钮的警告框不是好警告框，因为这样对用户没有什么意义，不能让用户掌控情景。

- 尽量避免使用“你”，“你的”，“我”，“我的”。用了这些词汇后会变得让人费解，直接定位用户会带来误解，甚至可以被理解为是一种侮辱。

- “触摸”“点击”“选择”都可以用“按”来替代描述选择某个键。

 

 

认真选择警告框上按钮的颜色。

警告框的颜色或深或浅。在有两个按钮的警告框上，左边的按钮总是深色的，右边的总是浅色的。

在包含危险操作的双按钮警告框上，取消应该放在右侧，用浅色按钮表示。

如果双按钮警告框是用于启动某个用户期待的功能，那么取消功能应该放在左侧，用深色按钮表示。

 

 

操作列表 

action sheet 用户展示一组与用户出发的任务相关的选项。

 

 

有潜在危险的按钮要用红色背景。在列表顶端展示一个红色按钮，因为离顶部越近越能吸引注意。

 

避免action sheet过长，出现滚动。

 

 

定制图片和图片指南

 

登录图片

如果你觉得完全依照这些指南做出的登录图片太过朴素，恭喜你，猜对了。记住，登录图片不是为了给用户留下美观的印象，而是为了让用户觉得你的程序启动迅速，使用灵活。

 

程序图标

图标尺寸：57×57 114×114（高分辨率）

 

Web快捷方式图标

为iPhone和iPod touch创建如下尺寸的图标： 57×57像素 114×114像素

OS会给图标自动添加一些视觉效果：

圆角 投影 反射高光。

 

例如，57×57像素的网页图标是这样的：

添加效果后就成了这样

为了确保你的图标与iOS添加的效果相得益彰，你的图标应该做到： 有90度尖角 没有高光效果

 

 

文档图标

 

对于iPhone，创建两种尺寸的文档图标：

22×29像素

44×58像素（高分辨率）

示例图如下：

 

小图标：iOS在spotlight搜索结果和settings里用的是同一个图标。

 

尺寸的图标： 29×29像素 58×58像素（高分辨率）

 

 

 

--------------

所有图标：