《触类旁通》笔记
实体化界面
人们怎样使用手机
- 单手持机操作：49%
- 一只手持机，另一只手的拇指或食指进行操作：36%
- 双手同时持机操作：15%
- 人们会根据情境的不同而频繁切换持机方式，以寻求最为便捷的操作姿态
- 很多人通过非惯用手操作手机，而惯用手则忙于其他事务
- 对手机来说，75% 的触屏交互行为是由拇指驱动的
手机的拇指热区
- 拇指无须费力便可轻松触及的区域只占屏幕总面积的三分之一左右，大致位于屏幕下方与拇指相对的那一侧
- 轻松触及并不完全等同于精准操作，在拇指的舒适地带中，只有一个独立的扇形区域真正便于精准触控
- 较为理想的解决方案方案是将重要的功能元素集中放置在屏幕底部中央附近的区域
人们怎样使用平板手机（大屏幕手机）
- 将近 70% 的操作时间里会同时使用两只手，其中一手持机、另一只手指操作的方式最为普遍，约占 35%
- 在 60% 的时间里，用户会通过拇指进行触屏操作，无论持机方式是单手还是双手——真正占据交互主导地位的依然是拇指
平板手机的拇指热区
平板手机用户会更加频繁地通过双手拇指同时进行操作 => 拇指热区也会相应地氛围两部分，分别位于屏幕下方的左右两侧，其中还会产生交集 => 屏幕上方的广阔区域在正常情况下难以触及
无论对任何规格的触屏设备，都要优先考虑拇指热区最小、操作局限性最高的
同是单手持机操作状态，平板手机上的拇指热区面积比普通手机小
平板手机：屏幕更大，变数更多
- 站立使用时：两只手同时拿住机身左右边缘靠上的位置 + 将平板电脑拿到距离眼睛较近的位置
- 坐着使用时（88%）：用一只手拿住平板电脑侧边靠下的位置将其撑在桌上，同时用另一只手进行操作
- 坐卧在沙发上时：将平板电脑立在自己身上+ 眼睛距离屏幕较远
- 竖屏和横屏的使用比例约为 60% 和 40%
平板电脑的拇指热区
- 双手持机时：拇指会比较自然地停靠在中间靠上的区域；操作屏幕顶部及底部中央的区域要困难很多，尤其是底部
- 要尽可能将高频功能元素集中放置在拇指的控制范围内，从而避免人们频繁移动手臂
混合型设备：带有键盘的触屏
- 使用触屏的时间比例达到了 77%，远超键盘和鼠标（虽然鼠标指针可见性强、操作更精准，但使用触屏的感觉更加直接，与界面直接的距离似乎更近）
- 人们对能够实际触摸到的能让容易产生更高的价值认同
- 混合型设备上的触屏并不能彻底取代键鼠，它更像是某种辅助增强模式
- 人们多数时候会让双臂停靠在键盘两侧，从而使双手可以很自然地在屏幕两侧靠下的区域操作触屏
混合型设备的拇指热区
- 使用双手拇指操作时，热区位于底部两侧
- 使用食指操作时，热区位于屏幕中间靠上
- 在经过一段时间的使用之后，哪些食指用户会自然而然地将双手停靠在屏幕两侧，从而转化为拇指用户
无论屏幕大小，拇指都是触屏操作最主要的驱动力
触屏设备界面布局设计
拇指原则
- 尽可能将高频功能元素集中放置在拇指热区中
- 将一些相对敏感的交互元素，例如可能会对数据内容产生变更的功能空间，放置在热区以外，通过不便来换取安全
手会遮挡内容
- 必须考虑内容可见性与手指位置之间的关系
内容在上，控件在下
手指会时常进入屏幕区域，极易遮挡内容
多数初评审的键盘会将被点击的按键放大并显示在手指上方区域，帮助人们快速确认
手机的界面布局
- 导航及主要空能控件大都位于屏幕底部，以便拇指更加舒适、便捷地进行操作；内容区域移至触摸点上方尽可能避开了手指的遮挡（ios 典型）
- 将“编辑”按钮放置在界面右上方的位置——编辑功能会对数据产生影响——防御性策略
- 好的设计方案需要面向高频次的主要任务进行优化，使其更加高效、便捷
为操作系统让路
- Android 中，系统导航栏位于屏幕底部，如果盲目遵守“内容在上，控件在下”的原则，会使 App 内的控件与系统导航栏堆叠
- Android 设计规范明确要求，对于小屏设备，要将 App 内的导航和功能控件放置在顶部区域——操作栏（Action Bar）设计模式
为浏览器让路
- 浏览器自身的界面布局：顶部有一些控件，底部有一些控件，这些控件当中的一部分会随着页面的滚动反复消失又出现
- 不要将网页或 Web App 的导航控件固定在界面底部，也不要将导航固定在页面顶部
- 对于移动版本的网页，尽可能直接进入主题，并尝试将导航控件防止在页面下方的区域
平板手机的界面布局
- 在平板手机上，仍然需要将导航及高频功能控件放置在屏幕底部
- 悬浮按钮也是很实用的设计模式
- 可以尝试将控件放置在顶部，但使其能够响应某种作用于屏幕下方的辅助交互形式
- 对于移动版本的网页，仍然建议使用锚点链接导航模式
- 避免手指跨屏操作
- 不要随着屏幕的增大而放大手势操作的触发区域
平板电脑的界面布局
- 屏幕顶部左右两侧区域适合放置高频交互元素
- 对用来浏览或变更内容的空间而言，要尽可能将其放置在屏幕下方或侧边，而不是顶部
混合型设备的界面布局
- 尽可能将高频交互元素或者严重依赖手势操作的功能放置在屏幕底部特别是左右两个边角的区域
- 浏览器根本不知道用户正在使用的是平板电脑、混合型设备还是传统笔记本电脑
靠不住的屏幕
- 靠屏幕尺寸无法准确判断输入方式
- 假设所有设备都有触屏
同时面向触屏和鼠标进行设计
聚焦于拇指热区的重叠区域：左右两侧
减少点击次数——屏幕越大，操作的费力度越高
不要依赖鼠标悬停
- 目前，多数触屏浏览器采用量不是的方法来处理 mouseover 时间和 CSS 中的 :hover 状态：第一次点击触发“悬停”效果，第二次点击触发特定的功能
宁大勿小——宽度为 7 毫米或 1/4 英寸的交互对象可以用之间比较轻松地点击（7 毫米是确保交互对象能够被精准操作的最小宽度）
元素距离拇指热区越远，尺寸就应该越大
在实践中，交互对象的最小尺寸至少应该达到 44 x 30 或 30 x 44 像素
高效的触屏界面
即时呈现
- 在正确的时间提供有用的即时信息
在列表视图中提供常用功能
- 完成任务的过程涉及的界面数量越少，效率就越高
- 能够直接在索引界面快速执行那些只需一次点击的常规任务，在浏览列表的过程中完成操作，一气呵成，不必每次都切换到详情视图
在列表视图中提供适量的概要信息
- 最重要的一部分信息呈现在列表中，用户无需反复进出详情界面
- 体现了“渐进呈现”的设计思路——以牺牲信息密度来换取易读性
优质点击与劣质点击
- 优质点击：能够传递恰当的信息或有效地触发任务并完成
- 正确判断哪些是适量的信息
控制内容的高度
- 画布外布局：默认状态下将额外的内容移出屏幕可视区域，直到用户发起请求再予以展示，如
- 从顶部或侧面滑入屏幕的导航菜单
- 包含额外导航或功能选项的侧边栏
- 因为内容过多而被分割成多个部分的长表单
- 何时使用轮播
- 适于承载自身具有一定逻辑顺序的数据内容
- 适用于无目的地浏览同一类型的多个内容条目
- 轮播的作用更像是为人们提供一种在内容中悠闲漫步的功能，而非提升界面使用效率的设计模式
- 精简表单
- 合并字段——用户不是在和数据库打交道，应该站在用户的角度将界面打造得更加便于认知和理解
- 只索取绝对必要的信息
- 尝试自问自答
真的需要键盘吗？
- 尝试为文本字段增加快捷选项作为辅助输入方式（i.e. 通过点击完成，通过历史、地址位置等作为候选建议）
- 提供自动填充
- 从其他 app 获取数据
选择正确的键盘类型
对于网页，要留意文本框 <input> 标签的 type 属性，从而为不同类型的字段调用恰当的键盘
手势 VS 确认对话框
特定方向和距离的滑动手势非常适用于解锁、接听电话、删除、关机等任务。这样的手势具有足够高的阻尼，可以有效拦截误操作，同时阻尼又不会搞到难以进行以至严重中断任务流程的程度。
手势
基础手势
- 点击
- 滑动
- 长按
- 长按拖动
- 双指捏合与扩张
- 双击
按钮
- 在诸如平板电脑这样的大屏设备上，粗放型的手势操作相比精雕细琢的交互元素来说更有利于提升界面的易用性
- 开关和按钮一类的控件更适合于用户无法和目标对象直接互动的情况