`
suqing
  • 浏览: 182593 次
  • 性别: Icon_minigender_2
  • 来自: 杭州
社区版块
存档分类
最新评论

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像素(高分辨率)

 

 

 

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

所有图标:

 

 

 

 

 

 

 

 

 

 

  • 大小: 75.5 KB
  • 大小: 52.9 KB
  • 大小: 17.7 KB
  • 大小: 10.8 KB
  • 大小: 30.4 KB
  • 大小: 29.9 KB
  • 大小: 32.7 KB
  • 大小: 39.7 KB
  • 大小: 9.1 KB
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics