17 读书笔记 4 –《触类旁通:多终端时代的触屏界面设计》

《触类旁通:多终端时代的触屏界面设计》

爱豆翻译的书。Just buy it.

之前有写过《触动人心 – 设计优秀的 iPhone 应用》的读书笔记,两本书同一作者:Josh clark 。如果说上一本是带领大家敲开移动设计的大门,那么这一本书则是极尽全力完善门后的世界。爱豆形容「这是一部总结过往、立足当前、面向未来的设计指导书。」

我们毫不怀疑今后生活会被各种显示屏幕占据(在能够取代的媒介出现之前),现在差不多已经是这样的情况了。除了每日紧盯的手机之外,我们在快递柜前取快递时、餐饮店点餐时、自动贩卖机等等,现在已然成为各个触屏屏幕的主场。Josh clark 又一次在书中带领大家,了解如何面向手机、平板手机、平板电脑及混合型设备等主流触屏平台进行交互设计。

我最喜欢的地方,莫过于通过大量研究而得出的各种结论:
  • 对手机来说,75% 的触屏交互行为是由拇指驱动的;
  • 对平板手机来说,60% 的时间里,用户通过拇指进行触屏操作;
  • 对于平板电脑,坐着使用达 88%(坐着使用手机只占 19%),屏幕竖横比约为 60% 和 40% ;
  • 混合型设备,人们其实很容易接受在混合型设备上进行触屏操作的交互方式。
这些结论决定了在触屏的界面设计。
  • 无论何种规格的触屏设备,都要优先考虑拇指热区最小、操作局限性最高的持机方式;
  • 单手持机操作状态,平板手机上的拇指热区面积比普通手机上的小;
  • 无论屏幕大小,拇指都是触屏操作最主要的驱动力(重点);
  • 尽可能将高频功能元素集中放置在拇指热区中;手会遮挡内容;
  • 内容在上,控件在下;为操作系统让路,为浏览器让路;
  • 在 iPhone 中,将 App 的导航或是主要控件放置在屏幕底部;
  • 在 Android 设备上,将 App 的导航或是主要控件放置在屏幕上方;
  • 对于网页或 Web App,将导航的控件固定放置在页面内容区域的下方,而非界面底部或顶部;
  • 平板手机上,仍需要将导航及高频功能空间放置在屏幕底部;悬浮按钮也是很实用的设计模式;
  • 避免手指跨屏操作;不要随着屏幕的增大而放大手势操作的触发区域(手势应该围绕手指进行设计,而不是围绕屏幕);
  • 聚焦于拇指热区的重叠区域:左右两侧。其中,又可以将最主要的功能优先布局在屏幕左侧的共有热区中;
  • 即时呈现;
  • 在列表视图中提供常用功能;
  • 精简表单(电商网站中 21% 的弃单是由于用户感到表单太过冗长);
  • 尝试运用合适的手势操作;

虽然有经典的设计原则,但是在实际应用中,设计原则的执行方式并非一成不变。

「以用户的名义打造产品,以产品的名义进行设计」。

发表评论

电子邮件地址不会被公开。 必填项已用*标注