浅析无边框按钮优劣.pdf

浅析无边框按钮的优劣 导航栏对于大多数手机 A PP 而言是个很重要的元素 ，它 但可以让用户明确的了解目前所开启的功 能名称 ，在许多时候还同时是个放置导航与要功能的一个显示、操作区域。 在以往 ，当导航栏上出现可以点击的按钮时 ，设计师在视觉表现上都力求让用户知道这就是个按钮 ，随着A ndro id4 、 iO S7 的设计去拟物化设计理念 ，将这些地方的按钮的样式去掉、仅剩下符号与 文字告知用户该 「按钮」的功能。 传统上 ，大多数的按钮外观都被设计成拥有具体的形状范围 ，除了可以有效的提示用户这是个 「可 以被点击」的按钮元件之外 ，还可以有效的让用户知道这个按钮的 「作用范围」在哪里 ，以防误触 到相邻的按钮。这点这在许多地方相当有用 ，尤其是按钮相当多的屏幕小键盘或计算机 ，就需要让 用户知道按键的实际感应范围在哪里。 桌面系统与触控系统大 同 其实在导航栏上去除每个按钮实体的形状并 少见 ，像是电脑系统中也是有许多元件的长相也 诺 我们认知中的按钮 ，比如说系统工具栏 ，其实就是一串按钮的集合体。 电脑系统的主要操作方式是透过鼠标光标 ，当按钮拥有实体范围时 ，它可以帮助用户确认按钮的大 小及位置 ，使鼠标光标准确地移动至按钮上方点击 ，而遇到像导航栏或是工具列的地方 ，因为导航 栏本身已经有实体范围了 ，并且也可以利用 hover 特效 ，帮助用户进一步确认光标与按钮之间的 关系。 而手机的触控屏幕则 需要 （也无法 ）执行这么精确的操作 ，用户只需要知道大概按压哪个位置可 以达到需要的功能即可。一般使用手指头或触控笔时在触控屏幕上执行操作时 ，实际上用户觉得自 己的点击范围约略就是自己指尖的大小 ，有时还会因为自己的手指头而挡住一部分的屏幕范围。 而事实上我们在屏幕上所看到的按钮造型 ，它的任务只是提示用户 「这是一个按钮」的用途而已 ， 实际上 按钮感应区往往大于其所长相的样子 ，甚至有可能是被动态调整的。 应该已经很多人已经知道 iO S 的键盘具有所谓动态变更感应区的专利设计 ，系统会根据你所输入的 文字来调整按钮的感应区域。比如说 ，当你输入 「wo rl」这个字串时、在接下来键盘上面的 「d」的 感应区域就会比 「s」和 「f 」 还要来得大 ，这是因为有 「wo rld」这个单字 ，而没有 「wo rls」 或 「wo rlf 」这两个字。 （下图为示意图 ） 去掉多馀细节得到的好处 iO S7 的无边框式的导航栏 ，将原本的按钮形式转换成单纯文字的设计 ，并且仅利用色彩来区别按钮 与标题列文字 ，虽然可能在某些文字较长的时候出现空间 够的问题 ，但整体而言整体画面变得更 为简洁了。并且因为移除了实体按钮的样式 ，在视觉感受上可以点击的范围也变大了 （虽然实际感 应范围并没有改变 ）。 有得必有失 然而 ，舍弃了 拟物化设计可节省学习成本 的好处后 ，iO S7 在很多地方的设计其实很容易让人 知 所措。例如刚升上 iO S7 的用户都会感到困扰的解锁画面。在 iO S6 中的设计为具有明显箭头外观的 滑动推杆 ，相当容易上手。而快速启动相机的图示也具有立体化的横杆 ，暗示了真实世界的使用 习惯 ：在产品设计中 ，许多需要让用户抓取的部件都会做出凹凸造型以利使用。 而 iO S7的接口则常常被认为过度简化的设计 ，许多部分 仅拿去了控制上的视觉暗示 ，用户也必须 先尝试与学习 ，才能够了解画面上提供了哪些功能、以及该如何操作这个功能。 如果你今天是一个全新的 iO S 用户 ，对于 iO S7 右下角的相机图示 ，你首先会先尝试去点击它还是 滑动它呢 ？ 我们在检视了 iO S7 中的许多细节后 ，发现了其实 iO S7 已经默认了用户都已经习惯了触控式接口 的使用 ，甚至是习惯了 iO S 操作的用户 ，才能够更快速的上手这个崭新设计的作业系统。 去材质、去除立体化装饰的设计 ，能为接口的视觉上开创更多可能性、也似乎更适应了触控式屏幕 的特性 ，然而过度简化的设计也会导致了提高了学习成本、难以上手的问题。因此 ，接口设计师必 须把握两者之间的优缺点而适度的调整设计 ，才能够在好用、易上手之间取得平衡。 via ：盒子UI 人人都是产品经理 （woshipm.co m ）中国最大最活跃的产品经理学习、交流、分享平台