无边框按钮的优劣点详解

   导览列对于多数手机 APP 而言是个很重要的元素,它不但可以让使用者明确的了解目前所开启的功能名称,在许多时候还是放置导航与重点功能的一个区域。


  在以往,当导航列上出现可以点击的按钮时,设计师在视觉表现上都力求让用户知道是个按钮,直至 iOS7 的去材质化设计理念,将这些地方的按钮的形态去掉、仅剩下符号与文字告知用户该「按钮」的功能。


  传统上,大多数的按钮外观都被设计成拥有具体的形状范围,除了可以有效的提示使用者这是个「可以被点击」的按钮组件之外,还可以有效的让用户知道这个按钮的「作用范围」在哪里,以防误触到相邻的按钮。这点这在许多地方相当有用,尤其是按钮相当多的屏幕小键盘或计算器,就需要让用户知道按键的实际感应范围在哪里。


  桌面系统与触控系统大不同

  其实在导览列上去除每个按钮实体的形状并不少见,像是计算机系统中也是有许多组件的长相也不诺我们认知中的按钮,比如说系统列,其实就是一串按钮的集合体。


  计算机系统的主要操作方式是透过鼠标光标,当按钮拥有实体范围时,它可以帮助用户确认按钮的大小及位置,使鼠标光标准确地移动至按钮上方点击,而遇到像导览列或是工具栏的地方,因为导览列本身已经有实体范围了,并且也可以利用 hover 特效,帮助用户进一步确认光标与按钮之间的关系。


  而手机的触控屏幕则不需要(也无法)执行这么精确的操作,使用者只需要知道大概按压哪个位置可以达到需要的功能即可。一般使用手指头或触控笔时在触控屏幕上执行操作时,实际上使用者觉得自己的点击范围约略就是自己指尖的大小,有时还会因为自己的手指头而挡住一部分的屏幕范围。


  而事实上我们在屏幕上所看到的按钮造型,它的任务只是提示用户「这是一个按钮」的用途而已,实际上 按钮感应区往往大于其所长相的样子,甚至有可能是被动态调整的。

  应该已经很多人已经知道 iOS 的键盘具有所谓动态变更感应区的专利设计,系统会根据你所输入的文字来调整按钮的感应区域。比如说,当你输入「worl」这个字符串时、在接下来键盘上面的「d」的感应区域就会比「s」和「f」 还要来得大,这是因为有「world」这个单字,而没有「worls」或「worlf」这两个字。

  (下图为示意图)


  去掉多余细节得到的好处

  iOS7 的无边框式的导览列,将原本的按钮形式转换成单纯文本的设计,并且仅利用色彩来区别按钮与标题栏文字,虽然可能在某些文字较长的时候出现空间不够的问题,但整体而言整体画面变得更为简洁了。并且因为移除了实体按钮的样式,在视觉感受上可以点击的范围也变大了(虽然实际感应范围并没有改变)。


  有得必有失

  然而,舍弃了 拟物化设计可节省学习成本 的好处后,iOS7 在很多地方的设计其实很容易让人不知所措。例如刚升上 iOS7 的使用者都会感到困扰的解锁画面。在 iOS6 中的设计为具有明显箭头外观的滑动推杆,相当容易上手。而快速启动相机的图示也具有立体化的横杆,暗示了真实世界的使用习惯:在产品设计中,许多需要让使用者抓取的部件都会做出凹凸造型以利使用。

  而 iOS7的接口则常常被认为过度简化的设计,许多部分不仅拿去了控制上的视觉暗示,用户也必须先尝试与学习,才能够了解画面上提供了哪些功能、以及该如何操作这个功能。

  如果你今天是一个全新的 iOS 使用者,对于 iOS7 右下角的相机图示,你首先会先尝试去点击它还是滑动它呢?


  我们在检视了 iOS7 中的许多细节后,发现了其实 iOS7 已经预设了使用者都已经习惯了触控式界面的使用,甚至是习惯了 iOS 操作的使用者,才能够更快速的上手这个崭新设计的操作系统。

  去材质、去立体化装饰的设计,能为接口在视觉上开创更多可能性、也似乎更适应了触摸屏的特性,然而过度简化的设计也会导致了学习成本提高、难以上手等问题。因此,接口设计师必须把握两者之间的优缺点而适度的调整设计,才能够在好用、更易上手之间取得平衡。

时间: 2024-09-13 01:37:13

无边框按钮的优劣点详解的相关文章

java无锁hashmap原理与实现详解_java

java多线程环境中应用HashMap,主要有以下几种选择:使用线程安全的java.util.Hashtable作为替代​使用java.util.Collections.synchronizedMap方法,将已有的HashMap对象包装为线程安全的.使用java.util.concurrent.ConcurrentHashMap类作为替代,它具有非常好的性能.而以上几种方法在实现的具体细节上,都或多或少地用到了互斥锁.互斥锁会造成线程阻塞,降低运行效率,并有可能产生死锁.优先级翻转等一系列问题.

Jquery Easyui分割按钮组件SplitButton使用详解(17)_jquery

SpliButton组件依赖于Menu(菜单)组件和 LinkButton(按钮)组件 加载方式 Class加载 <a href="javascript:void(0)" id="edit" class="easyui-splitbutton" data-options="menu:'#box',iconCls:'icon-edit'">编辑</a> <div id="box"

【转】XP/2000无法使用“缩略图查看”、右键无“设置桌面背景”选项问题详解

许多朋友在XP或2000系统下查看图片时,经常碰到以下几个问题:      1. 当我查看文件夹里面的图片,以缩略图方式查看时,却发现系统不能显示图片内容了,只是出来一个简单的图片图标(就和我们以图标或平铺显示的效果一样),这时你是否会感很不方便呢?      2.用系统自带的"Windows图片和传真查看器"打开图片时,却出现了无法加载"C:\WINDOWS\sytem32\shimgvw.dll"的错误提示.      3.在XP中,许多朋友看到自己硬盘中储存的

Bootstrap按钮组件详解_javascript技巧

按钮组和下拉菜单组件一样,需要依赖于button.js插件才能正常运作. 结构方面:使用一个类名为btn-group的容器,把多个按钮放在这个容器中. 按钮组也是一个独立的组件,所以可以找到相应的源码文件: Less:buttons.less Sass:_buttons.scss Css:Bootstrap.css 3131行~3291行 <div class="btn-group"> <button type="button" class=&qu

谈谈jQuery Ajax用法详解_jquery

定义和用法 ajax() 方法通过 HTTP 请求加载远程数据. 该方法是 jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax() 返回其创建的 XMLHttpRequest 对象.大多数情况下你无需直接操作该函数,除非你需要操作不常用的选项,以获得更多的灵活性. 最简单的情况下,$.ajax() 可以不带任何参数直接使用. 注意:所有的选项都可以通过 $.ajaxSetup() 函数来全局设置. jQuery Ajax在web应用开发中很常用

Ajax基础详解教程(二)_AJAX相关

在上篇文章给大家介绍了Ajax基础详解教程(一),讲到Ajax中open方法的第三个参数异步和同步的问题,今天呢,就来继续往下唠,先接着上回的代码 var oBtn = document.getElementById('btn'); oBtn.onclick = function(){ var xhr = null; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else{ xhr = new ActiveXObject('Mic

详解jQuery向动态生成的内容添加事件响应jQuery live()方法_jquery

jQuery live()方法是给所有匹配的元素附加一个事件处理函数,即使这个元素是以后通过append,prepend,after等事件生成后的内容也依然有效. 这个方法可以看做是 .bind() 方法的一个变体.使用 .bind() 时,选择器匹配的元素会附加一个事件处理函数,而以后再添加的元素则不会有.为此需要再使用一次 .bind() 才行.比如说: <body> <div class="clickme">Click here</div> &

Ajax详解及其案例分析_AJAX相关

1 获得Ajax对象 1.1 问题 如何获得XmlHttpRequest对象. 1.2 方案 区分浏览器,使用不同的获取方式. 1.3 步骤 步骤一: 新建ajax01.html页面 新建一个Web工程,在WebRoot下新建ajax01.html页面.在<script>标记内编写JavaScript代码实现获取Ajax对象. <script type="text/javascript"> /*获取Ajax对象*/ function getXhr(){ var

Activity配置、启动和关闭activity实例详解_Android

大家先看下效果图: Android为我们提供了四种应组件,分别为Activity.Service.Broadcast receivers和Content providers,这些组建也就是我们开发一个Android应用程序的基石.系统可以通过不同组建提供的切入点进入到开发的应用程序中.对用户来说不是所有的组建都是实际的切入点,但是他们之间都是相互依赖的,它们每一个作为存在的实体,扮演着特定的角色,作为独一无二的基石帮助开发者定义Android应用的行为.下面我将整理自己的Activity学习点滴