【摘抄】iOS 10人机界面设计指南

原文: 中文版来了!UI设计师必读的IOS 10人机界面设计指南 (一)


1.1 设计原则(Design Principles)

三大设计原则


拓展设计原则

1.2 iOS 10 新特征

widget——略

Messages——新增图、文、视频、贴纸、可交互内容

Siri——声音执行操作

通知栏——可拓展详情图

1.3 UIKit

栏——提供导航,有时包含按钮

视图——提供信息,如文本、图形、动画、可交互元素;允许滚动、插入、删除、排列等行为。

控件——触发功能和传递信息,如按钮、开关、输入框、进度指示器。


2. 交互(Interaction)

2.1 3D 触摸(3D Touch)

3D 触摸操作定义

2.2 辅助功能(Accessibility)

关爱失明及视损用户——VoiceOver描述屏幕标签、口述影像

关爱失聪及重听用户——隐藏式字母

偏好设置——使用了UIKits的应用自动调整为偏好设置

2.3 音频(Audio)略

2.4 身份验证(Authentication)

尽可能地延后登陆——允许先浏览、探索

解释身份认证的优势以及如何注册

展示适合的键盘来减少数据输入

2.5 数据输入(Data Entry)提高信息输入效率

展示选项——选择器替代输入栏

自动获取系统信息——联系人、日历、tel

提供可靠的默认值——缩短做决定的时间

输入后立即检查输入值——及时改正,确保填满

逻辑排列选择值——加快浏览及选择速度

输入栏用占位符描述

2.6 反馈(Feedback)

悄悄加入状态信息——不干扰主要内容,但随时一瞥就能看到

避免不必要的警告——用户会习惯忽略

2.7 文件处理(File Handling)

自动保存文件——不要让用户主动即时保存

支持云储存——如icloud;单机时代已经过去

设计直观高效的文件浏览界面——高度图像化,提供添加新文件的按钮,减少手势加快导航速度

可预览文件——Quick Look 功能让用户查看Keynote、PDF文档、图片等

适当与其它应用共享文件

2.8 初启动体验(First Launch Experience)

提供启动页——让用户感觉响应速度很快,尽量与首屏相似

选择合适的方向——与应用相符

快速使用——少点教学;至少要可跳过

主动考虑用户可能会需要的帮助

避免一开始就让用户设置信息——默认值、自动获取、提示稍后修改

避免展示应用内的接受许可协议和免责声明

应用重启时恢复之前的状态

2.9 手势(Gestures)

点击(Tap):激活一个控件或者选择一个对象。

拖曳(Drag):移动一个元素。

滑动(Flick):快速滚动或是平移

横扫(Swipe):单指以返回上一页,呼出分屏视图控制器(split view controller)中的隐藏视图,滑出列表行中的删除按钮,或在轻压中呼出操作列表。在iPad中四指操作用来在应用间切换。

双击(Double tap):放大并居中内容或图片,或者缩小已放大过的。

捏合(Pinch):向外张开时放大,向内捏合时缩小。

长按(Touch and hold):在可编辑或者可选文本中操作,显示放大视图用以光标定位。在某些与集合视图类似的视图中操作,进入对象可编辑的状态。

摇晃(Shake):撤销或重做

注意:①在所有应用内尽量保持一致;②基于界面的导航及操作补充提供快捷手势,但不要取代原有的;③适当使用多指手势加强体验。

2.10 加载(Loading)

明确加载的状态——符合风格的活动旋转器(activity spinner)+进度

通过教育或娱乐用户来填充加载的时间——游戏、视频、趣味图

尽快显示内容——先加载先显示,未加载完的用占位符,加载完去掉占位符

2.11 模态(Modality)

模态视图样式

特性:模态视图突出焦点,用户必须采取操作才能推出模态化体验

应用:操作列表、警告框、活动视图

注意:①必须时才使用;②提供明显且可靠的退出方式;③保持模态任务简单、简短并且高度集中,除非完成任务否则不要使用标有“完成”的按钮;④使用标题或在其他视图部分添加描述说明任务;⑤不要让模态视图盖在在浮出层上;⑥保持相符的视觉风格;⑦为展示模态视图选择一个合适的过渡方式,加强用户对当前内容转变的认知:(默认)垂直地从屏幕底部向上滑出,然后在被关闭时下滑,原先的视图便重新滑回来。应用内部使用统一的模态过渡方式。

2.12 导航(Navigation)

设计目标:能够支持应用结构和目,让人觉得自然和熟悉,并且不应该主导界面或者抢走内容的风头。

导航分类:

分层导航

操作逻辑:每屏一选,原路返回

应用案例:原生应用设置(Settings),邮件(Mail)

扁平导航

操作逻辑:不同内容类别间切换

应用案例:原生应用音乐(Music),App Store

内容/体验驱动式导航

操作逻辑:在内容中自由地转换,或是内容定义导航

应用案例:游戏、阅读以及其它沉浸式应用

注意:①总是提供清晰的路径;②频繁查看某屏的内容,考虑采用操作列表、警告框、浮出层或是模态视图展示;③合理组织信息架构,最少点击/横扫/跳转;④用导航栏内的标题栏说明当前的层级位置;⑤使用标签栏(Tabs)来展示内容或功能相似的类别;⑥使用页面控件展示多页面的同类型内容。

2.13 请求许可(Requesting Permission)

用户必须对应用予以授权,应用才能获取用户的个人信息(当前位置、日历、联系人信息、提醒事项以及照片)

请求只在用户真的在使用某些需要个人数据的功能时才出现

当需求不明显时向用户解释为什么你的应用需要这些信息

2.14 设置(Settings)

避免、延迟、减少用户决定设置或布局选项,本身设计的好

主屏放关键、常用的选项,次屏放偶尔才更改的选项

把不经常更改的配置选项放到系统设置里,常改的放应用内

适当时提供去设置的快捷路径

2.15 用辞(Terminology)

使用简单易懂的语言,避免深奥技术词汇

保持文本的清晰和简介

避免用“我、我的、我们、我们的”

谨慎使用幽默

提供精确的日期(识别时区)

给按钮或其他可交互元素标记操作动词,如发送、添加、连接

2.16 撤销和重做(Undo and Redo)

摇晃——触发时出现提示框,询问操作或取消

简明扼要地描述将要被撤销或是重做的操作,如“撤销命名”

节制地使用撤销和重做按钮——必要时使用系统提供的标准按钮,并放在符合预期的位置,如导航栏


3. 特性(Features)

3.1 多任务处理(Multitasking)

iOS设备——多任务处理界面四指手势

iPad——Slide Over、分屏视图(Split View)、画中画(Picture in Picture)模式下同时使用两个app

注意:①处理好多任务时的资源占用、屏幕空间、声冲突音等问题;②随时保存,随时恢复;③确保界面能够与双倍高度的状态栏(double-high status bar)共处(比如进行中的通话、录音和共享功能会在屏幕顶部展示额外的一个状态栏);④节制地使用通知,让用户通过返回你  的app来查看任务的完成情况。

3.2 通知(Notification)

通知表现类型

(更正!!!!锁屏通知是右滑打开!左滑选择查看或关闭!!!!)

用户首次使用App要选择是否接收通知

提供有用的通知——句子完整,标点合适;避免引导用户从通知打开App完成某些任务,用户容易忘记这件事情

不要同件事发好几条通知

不要包含你的app名字和图标,系统会自动地在每条通知的顶部显示这些信息

角标用来补充说明通知,不能表示重要的信息;可被关闭;实时更新;将角标上的数字清零意味着同时在消息中心移除所有相关的通知栏

考虑提供一个通知详情试图,允许用户在不离开当前环境的情况下去执行快速的操作(如在新消息通知上直接回复信息);应该包含有用、易识别的信息,还能在显示时动态更新(如拼车app就能够在该视图展示一个地图,并标出正在朝着你的位置行驶的汽车位置)

3.4 快速查看(Quick Look)

让用户能够预览Keynote,、Numbers、Pages、PDF文档、图片以及其它类型的文件(即使你的应用并不支持这些文件格式)

注意:预览视图要留出导航栏;在iPad或没导航栏的App内,在一个全屏的有导航栏的模态视图中打开预览视图——提供退出Quicklook/分享/标记的按钮或工具栏

4. 视觉设计(Visual Design)

4.1 动画(Animation)

优势——表达状态、提供反馈、加强直接操纵感、视觉化呈现用户的操作结果

慎用动画和特效——进行用户测试

自定义动画应和系统动画相符

保证真实性、可信性,符合物理定律

4.2 品牌化(Branding)

巧妙融入品牌元素——通过优雅别致的文字、颜色、图片、背景营造辨识度(低侵入性),不干扰任务进行和信息传递

内容比品牌化更重要——不要为了一个无意义的logo浪费内容位置

4.3 颜色(Color)

iOS 10配色参考

优势——暗示可交互性、增加活力、提供视觉的连续性(参考苹果的配色吧)

注意:①在App内使用互补配色;②统一用一种关键色来暗示交互;③使用与Logo相符的配色,传达品牌;④考虑半透明对颜色的影响;⑤在多种光线下测试配色方案,以求最好的视觉体验;⑥关爱色盲用户:红绿、灰、蓝橘,加上形状区分;⑦注意文化差异;⑧保证足够的对比度:7:1最佳,至少4.5:1。

4.4 布局(Layout)

自适应——不同iOS设备、横竖屏、iPad多任务操作/分屏模式,自动改变形状大小

环境变化时保持当前内容的焦点不变

app内保持整体一致的视觉外观——相似功能的元素应该看起来相似

利用视觉权重和平衡来表示重要性——大的更重要、易点击;首要对象放屏幕上半部分、偏左

对齐——方便浏览,帮助聚焦;缩进+对齐表明内容间关系

可交互元素够大——点击区域不小于44pt×44pt

4.5 字体(Typography)

iOS——San Francisco、SF UI Text(19p以下文本)、SF UI Display(20p及以上文本)

iOS内置文本样式
大号(默认)字符样式




最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,457评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,837评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,696评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,183评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,057评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,105评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,520评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,211评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,482评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,574评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,353评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,213评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,576评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,897评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,174评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,489评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,683评论 2 335

推荐阅读更多精彩内容