详细解析网页无边框按钮的优劣点

zhangjinglwt

zhangjinglwt

2016-02-16 23:38

今天天气好晴朗处处好风光,好天气好开始,图老师又来和大家分享啦。下面给大家推荐详细解析网页无边框按钮的优劣点,希望大家看完后也有个好心情,快快行动吧!

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

详细解析网页无边框按钮的优劣点,PS教程,图老师教程网

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

详细解析网页无边框按钮的优劣点,PS教程,图老师教程网

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

详细解析网页无边框按钮的优劣点,PS教程,图老师教程网

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

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

详细解析网页无边框按钮的优劣点,PS教程,图老师教程网

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/pmsj/)

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

详细解析网页无边框按钮的优劣点,PS教程,图老师教程网

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

详细解析网页无边框按钮的优劣点,PS教程,图老师教程网

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

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

(下图为示意图)

详细解析网页无边框按钮的优劣点,PS教程,图老师教程网

去掉多余细节得到的好处

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

详细解析网页无边框按钮的优劣点,PS教程,图老师教程网

有得必有失

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/pmsj/)

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

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

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

详细解析网页无边框按钮的优劣点,PS教程,图老师教程网

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

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

展开更多 50%)
分享

猜你喜欢

详细解析网页无边框按钮的优劣点

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
详细解析网页无边框按钮的优劣点

轻松弹出无边框网页的Javscrpt代码

设计创意
轻松弹出无边框网页的Javscrpt代码

什么是极简主义 如何打造极简风格家居

家居设计 装修设计
什么是极简主义 如何打造极简风格家居

无边框窗口代码详解

Java JAVA基础
无边框窗口代码详解

解析网页设计中的按钮设计

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
解析网页设计中的按钮设计

2017榻榻米书房设计装修效果图 榻榻米书房设计图片

榻榻米 书房 装修设计 书房设计 平面设计
2017榻榻米书房设计装修效果图 榻榻米书房设计图片

操作VB中的无边框窗体

编程语言 网络编程
操作VB中的无边框窗体

详细解析网页传体技巧解析

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
详细解析网页传体技巧解析

2017春夏女装风衣外套流行趋势

服装设计 平面设计 设计 服装搭配
2017春夏女装风衣外套流行趋势

合理的利用对齐来提升网页的设计感

合理的利用对齐来提升网页的设计感

详细解析如何设计时尚有效的网页

详细解析如何设计时尚有效的网页
下拉加载更多内容 ↓