- 控件
- 文本框
- 警告框&操作列表(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像素(高分辨率)
--------------
所有图标:
相关推荐
中文版iPhone HIG_iPhone人机界面导引(交互设计指南)
已解锁-中文版iPhone+HIG_iPhone人机界面导引 交互设计指南
苹果的ios人机界面指南(2012-12-17版),英文
You’ll understand why Apple have made the decisions they’ve made with the new iOS 7 interface and new HIG guidelines, and from that insight you’ll be able to vision and create your own apps, on ...
【关注微信公众号:refs-cn,可免费下载】 Refs.cn 原型设计元件库, 基于 Apple iOS/macOS Human Interface Guidelines 创建,适用于 iPhone、iPad 和 macOS 桌面应用的原型设计。
iphone人机界面导引(交互设计指南)中英文结合,本文档更新并添加了多线程和iAd部分,声音设置和自定义图标部分也有更新。
HIG是Autodesk的统一设计系统,因此我们可以更快地构建更好的产品。 入门 向您的应用添加组件: yarn add @ hig / button 导入并渲染组件: import Button from '@hig/button' ; function MyComponent ( ) { ...
You’ll understand why Apple have made the decisions they’ve made with the new iOS 7 interface and new HIG guidelines, and from that insight you’ll be able to vision and create your own apps, on ...
Apple官方的用户界面guideline(mobile HIG)
译者按:此文是苹果在 2010.11.15 合并 iPad HIG 和 iPhone HIG 后的得来的。我用了大概两周的时间将其翻译出来,算是帮助中国的交互设计师和开发者了解苹果设计规范的小礼物。
iOSAPP体验设计不像互联网的体验设计那样,有一堆的方法论和可以“借鉴”的案例。目前除了苹果的和前Palm的外,没有找到更好的设计哲学和方法论。事实上,即便认真地研读了HIG和ZenofPalm,甚至是OolonColluphid的...
描述在基本OS桌面上创建完美一致的体验介绍这些准则适用于为基本OS的应用程序工作的界面设计师,图形美工和软件开发人员。 它们不仅定义了特定的设计元素和原则,而且还有助于灌输一种哲学,使您能够决定何时适当...
iOS基础知识,通过HIG了解组件,屏幕切换 第二周 通过自动布局进行基本的UI合成,了解滚动视图 第三周 TableView,CollectionView,数据传输方法 第四周 Cocoapods和网络+肥皂窗帘补充研讨会 第五周 联合设计研讨会 ...
You’ll learn Object-Oriented Programming (OOP) and be introduced to User Interface (UI) design following Apple’s Human Interface Guidelines (HIG) using storyboards and the Model-View-Controller ...
You’ll learn Object-Oriented Programming (OOP) and be introduced to User Interface (UI) design following Apple’s Human Interface Guidelines (HIG) using storyboards and the Model-View-Controller ...
IOS人机交互中文版 此文是苹果在 2010.11.15 合并 iPad HIG 和 iPhone HIG 后的得来的
其他人使用它来构思想法或创建与 iOS 原生元素协调工作的自定义界面元素。 无论您使用什么,我们都希望您喜欢它。 在开始之前,您需要熟悉一些 Apple 在汇总的支持文档(需要登录)。 像 iOS HIG、UI 过渡指南和 UI...
其他人使用它来构思想法或创建与 iOS 原生元素协调工作的自定义界面元素。 无论您使用什么,我们都希望您喜欢它。 在开始之前,您需要熟悉一些 Apple 在汇总的支持文档(需要登录)。 像 iOS HIG、UI 过渡指南和 UI...
研讨会与作业停车处作业内容提交读我1周iOS基础知识,通过HIG了解组件,屏幕切换 :check_mark: 2周通过自动布局进行基本的UI合成,了解滚动视图3周TableView,CollectionView,数据传输方法4个星期Cocoapods和网络+...
仔细比较两套HIG的“设计原则”部分,发现完全是截然不同的两种风格。iOS HIG走的是更专业型的路线,描述严谨且有不少的专业词汇(比如Metaphors、Consistency之类的)。而Android则显得亲民许多,不仅描述方式简要...