超越按钮,拥抱触摸界面

简介: 苹果iPhone手机的发布,可以说带来了一个全新的“触摸”时代。现如今,就连小孩子都能够非常自然的使用一些触摸设备,手机、iPad等等。父母们一定很惊奇孩子们能够如此快的学会这些设备的使用方式,从这一点来看触屏设备的界面和交互设计中隐藏着很多种可以让使用体验更加简单和有趣的要点。

苹果iPhone手机的发布,可以说带来了一个全新的“触摸”时代。现如今,就连小孩子都能够非常自然的使用一些触摸设备,手机、iPad等等。父母们一定很惊奇孩子们能够如此快的学会这些设备的使用方式,从这一点来看触屏设备的界面和交互设计中隐藏着很多种可以让使用体验更加简单和有趣的要点。
 
菜单栏和按钮的挑战
 
苹果发布的“ Human Interface Guidelines”以及苹果应用审核委员会,对数以万计的应用产生了重要的影响。它帮助众多的设计师和程序员理解了移动界面设计中的核心UI。例如苹果一直推荐的  UITabBar 和  UINavigationBar。然而实际上我们设计或制作的第一个应用可能并没有包含顶部或底部导航,手机屏幕的尺寸是如此珍贵,如果设计了顶部和底部导航,则会占据屏幕20%的内容。我们需要记住的一条原则是: 用尽可能多的空间展示内容
 
在这个充满创新的行业中,设计师需要时间去创造出更有创意、也更加原本的用户界面。也许正是苹果应用审核委员会的拒绝评语“ think out of the box”,才能激发出象  Clear 和  Rise 这样的应用,让我们看到触屏界面设计的一些希望。
 
 
手势驱动界面的威力
 
在两年以前,我在探索手势如何才能为移动应用用户界面带来价值时总结了一条规律,“ 手势的使用必须自然而然”。这也就是为什么 Loren Brichter的“ 向下拖动刷新”几乎成为了行业的一个标准。
 
清除UI障碍
 
开始设计一个更加手势驱动的界面,你面临的最大问题就是“ 不要总是觉得应该把一些导航元素弄成可见的”。相反,我们可以想象一个2-D或者3-D的屏幕空间,可以考虑将导航放在上、下、左、右任何一个位置,设计一个轻轻拖动或者扫过的手势,导航出现。以Facebook和Gmail的iOS版来说,我觉得最重要的一个特性就是“side-swing”菜单。这个UI概念非常易于使用。这样做的好处一方面在于能够让App的显示更加注重内容,另一方面也使得触发另外一个界面只需要一步或者两步操作就可以实现。
 
 
除了界面的导航,App中的内容有时也需要与用户进行互动。在所有内容下放摆放三个按钮,一定会将界面弄的混乱。这时才是使用手势的最佳时机。考虑一下双击屏幕或者长按屏幕。Instagram中,双击屏幕可以对一个内容进行Like或者Unlike。所以别再犹豫了,尽量的使用手势而不是传统的导航控件吧。
 
具有适应性的界面
 
对于一个创新的App来说,预测用户的行为通常是非常困难的。作者在做Belgium's Public Radio的时候,一直困惑于应该为用户提供什么样的界面,最终,决定提供三种不同的界面布局形式,而布局的调整可以通过拖动图标来实现。
 
 
仔细考虑时间、空间和动画
 
用户轻拍一个项目时会触发什么动作?如何对这个动作实现可视化?进入视窗的速度是多少?应该自动消失吗?
 
触摸设备的出现极大的改变了我们设计交互的方式,与传统的思考屏幕和页面的角度不同,我们需要更多的考虑时间、空间和动画这三者的结合。那么你一定会发现,设计并向同事展示这些交互概念,还采用传统的静态页面的方式已经远远不行了。一些原型工具,例如  Pop 和  Invision ,能够创作具有动态效果的原型。这样就非常容易来测试程序的流程,并且来 检验用户会卡在什么地方。这样做充满了实验主义和创新精神,在向客户进行展示时,不再使用传统的静态页面和简单导航,而是将客户邀请进来参与整个交互过程。这样做会增加预算、延长工期,但是如果客户允许你这么做,那一切都不是问题了。
 
 
学习曲线
 
在设计手势驱动的用户界面时,移走传统的导航元素,用户的学习曲线就会对应上升。如果没有适当的用户引导,很可能用户会茫然不知所措。一点小小的探索没有关系,但是必须让用户清楚从哪里开始。很多应用在第一次运行时都有一个介绍,我觉得开场的介绍应该只介绍哪些最重要的交互方式,不要所有的东西都进行解释,那多数用户都会跳过这个步骤。也可以采用另外一种方式进行引导,再用户第一次要用到某个特性的时候进行介绍,Youtube的应用中就有这样的例子。
 
 
Stop Talking,Start Making
 
参考资料:
 
相关文章
|
4天前
|
人工智能 JavaScript Linux
【Claude Code 全攻略】终端AI编程助手从入门到进阶(2026最新版)
Claude Code是Anthropic推出的终端原生AI编程助手,支持40+语言、200k超长上下文,无需切换IDE即可实现代码生成、调试、项目导航与自动化任务。本文详解其安装配置、四大核心功能及进阶技巧,助你全面提升开发效率,搭配GitHub Copilot使用更佳。
|
6天前
|
存储 人工智能 自然语言处理
OpenSpec技术规范+实例应用
OpenSpec 是面向 AI 智能体的轻量级规范驱动开发框架,通过“提案-审查-实施-归档”工作流,解决 AI 编程中的需求偏移与不可预测性问题。它以机器可读的规范为“单一真相源”,将模糊提示转化为可落地的工程实践,助力开发者高效构建稳定、可审计的生产级系统,实现从“凭感觉聊天”到“按规范开发”的跃迁。
828 12
|
2天前
|
云安全 安全
免费+限量+领云小宝周边!「阿里云2026云上安全健康体检」火热进行中!
诚邀您进行年度自检,发现潜在风险,守护云上业务连续稳健运行
1163 1
|
4天前
|
人工智能 JavaScript 前端开发
【2026最新最全】一篇文章带你学会Cursor编程工具
本文介绍了Cursor的下载安装、账号注册、汉化设置、核心模式(Agent、Plan、Debug、Ask)及高阶功能,如@引用、@Doc文档库、@Browser自动化和Rules规则配置,助力开发者高效使用AI编程工具。
665 4
|
5天前
|
消息中间件 人工智能 Kubernetes
阿里云云原生应用平台岗位急招,加入我们,打造 AI 最强基础设施
云原生应用平台作为中国最大云计算公司的基石,现全面转向 AI,打造 AI 时代最强基础设施。寻找热爱技术、具备工程极致追求的架构师、极客与算法专家,共同重构计算、定义未来。杭州、北京、深圳、上海热招中,让我们一起在云端,重构 AI 的未来。
|
8天前
|
IDE 开发工具 C语言
【2026最新】VS2026下载安装使用保姆级教程(附安装包+图文步骤)
Visual Studio 2026是微软推出的最新Windows专属IDE,启动更快、内存占用更低,支持C++、Python等开发。推荐免费的Community版,安装简便,适合初学者与个人开发者使用。
937 11
|
5天前
|
存储 人工智能 测试技术
【Claude Skills】从原理到实战的完全指南
Claude Skills通过模块化设计,将AI变为领域专家,实现工作流标准化。它支持指令封装、自动触发与脚本集成,提升复用性与协作效率,适用于个人提效与团队协同,是AI定制化的新范式。
|
10天前
|
存储 JavaScript 前端开发
JavaScript基础
本节讲解JavaScript基础核心知识:涵盖值类型与引用类型区别、typeof检测类型及局限性、===与==差异及应用场景、内置函数与对象、原型链五规则、属性查找机制、instanceof原理,以及this指向和箭头函数中this的绑定时机。重点突出类型判断、原型继承与this机制,助力深入理解JS面向对象机制。(238字)
|
8天前
|
人工智能 Shell 开发工具
Claude Code 2.1.2超详细更新说明,小白也能10分钟上手
Claude Code 2.1.x重磅更新:Shift+Enter换行、Esc+Esc撤销、Ctrl+B后台运行,Skills技能系统全面升级,支持多语言、通配符权限与动态MCP检测,性能提升50%,迭代速度惊人,开发者效率暴涨!
Claude Code 2.1.2超详细更新说明,小白也能10分钟上手

热门文章

最新文章