详细解析UI设计中的隐形元素使用技巧

田妹888

田妹888

2016-02-17 00:51

get新技能是需要付出行动的,即使看得再多也还是要动手试一试。今天图老师小编跟大家分享的是详细解析UI设计中的隐形元素使用技巧,一起来学习了解下吧!

一个隐形且流畅提供给访客交互体验的界面,可以更高效的让访客的注意力集中在产品的核心功能上,并且可以引导访客逐步走向产品的最终目标。

很多有经验的设计师都在提倡这样一个设计理念:一个真正设计精良的UI应该让用户察觉不到它的存在。但事实呢?恰恰相反,很多同学设计的UI经常会强迫用户们去注意花哨的界面,而不是你要传达给用户的有效内容。用户登陆某个网页大都有明确的目标,比如说他想买一本新书、想上网学习jQuery技术、想上网去把个妹、追个男神、或者仅仅想和朋友们分享一篇美文等等。

这个时候,用户大不会去花时间观赏你耗尽心思的界面。事实上,用户根本不在乎你的交互界面设计!呃,很早以前,最初的网页设计缺少新鲜的交互技术,所以后来设计者们为了让网页变的更好,经常想加入一些交互:但是,亲爱的同学们,你做个换位思考,或者去观察一下身边的小网龄用户,他们真的在乎这些花哨的东西么?

近几年来,网页设计者们经常花几百个小时去考虑按键的颜色是否好看、是否要加一些阴影使得更加美观、页边距大小是否合适或者是否应用渐变等让UI变的更加漂亮实用等。但是,真正精良的UI设计不应该是好看,而应该是隐形的!

详细解析UI设计中的隐形元素使用技巧,PS教程,图老师教程网

移动终端在人们的生活中日益重要。多点触控移动设备的出现让人们意识到UI是一系列的通过点击和排序来控制的内容,允许更加人性化、更加自然的人机交互。这些自然用户界面(Natural User Interfaces, NUI)更加自然的原因有很多,最重要的是,NUI可以让用户对内容直接操作且它的桌面毫不花俏,用户会发现设备的使用变的超级简单,因为UI几乎不可见了。

但是我们仍然需要对着我们的台式机或者笔记本工作,我们仍然需要浏览网页和使用网页APP,而这些东西很少可以做到像手持移动设备那样应用多点触控及自然用户界面。那么,是否因为这些阻碍我们就要延续老一套的界面组成么?答案是否定的!隐形UI的设计理念,是我们每一个UI设计师或开发者应该想要达到的目标。

是用户界面,而不是障碍

详细解析UI设计中的隐形元素使用技巧,PS教程,图老师教程网

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

用户界面永远不应该成为阻挡用户查看内容或者达成目标的障碍;用户也不该必须跳过UI陷阱或者乱七八糟的导航之后才能到达自己的目标。过去的几年里我们经常使用一些我们认为可以给用户带来便捷的UI,但实际上,这些UI却给用户带来了更大负担,Breadcrumb(用来表明用户所处位置的UI导航)就是个很好的例子。我们可能觉得Breadcrumb是一个非常好的导航方式,但实际上,它仅仅是累赘的UI组件,在设计合理的用户体验中没有存在的必要。

虽然Breadcrumb并不直接带给用户负担,但是她占用了屏幕的空间,而这些空间,原本应该用来显示一些和用户目标相关的内容。我们解决UI的问题经常通过增加新的组件,但是过于冗杂的组件势必造成浏览障碍。那么,怎样才能做到增加了许多UI组件,然而你的UI看上去却像是隐形的呢?

解决问题

详细解析UI设计中的隐形元素使用技巧,PS教程,图老师教程网

建立隐形的UI意味着你要从根本上解决问题,你需要知道到底问题出在什么地方。我们做网站或者APPs也会经常碰到问题,但是我们往往从表面上给出一些解决方案,而并没有从本质上考虑问题的发生。就像我们为了止疼吃布洛芬,但这不能改变疼痛的本质一样。

一般情况下,吃止疼药变成了我们当下的最佳策略,因为我们已经学会了如何与项目经理、网站拥有者、股东等做斗争,而且,也有很多时候可能是因为设计师们时间不够或者仅仅是因为懒惰而不想去做。我们经常会做一些用户体验,然后说:嗯,我知道这里面有些小问题,但是我们让用户看看是否这些问题真的是问题吧。很明显,用上面的态度去做UI是不能做出隐形UI的。做一个完全隐形的UI意味着你必须要解决深层次的设计问题和用户体验,只有这样才能使得UI不会变成对用户的障碍。

宽容的设计

详细解析UI设计中的隐形元素使用技巧,PS教程,图老师教程网

隐形的UI要归功于它设计的非常有包容性,自然用户界面更加开放,而且不易出错,或者在用户出错的时候,能给用户以明确的方向指引。

这几年不是流行一句交互金句么?操作前可预知、操作中有反馈、操作后可撤销!

宽容指的是当用户受困的时候(fall into a trap),设计者给予用户的不是告诉用户出错了。实际上,当用户没有明确的目标时更容易误操作,而此时UI会显示给他们大大的警告和出错提示。而一个隐形的UI设计绝对不会显示上面的东西。良好设计的UI会预先判断用户出错发生率高的地方,并在这些地方提供给用户解决出错的办法或者引导用户让他们避免陷入trap。

宽容还表示网页或者APPs允许用户对它们出错。因为用户出错之后,他们会从自己的错误中学到更多的东西,当然,他们出错的时候,肯定不能给他们一个大大的红色叉号或者繁杂的让人摸不着头脑的文字。(这种压迫感和腥红的色彩他们早在现实中就受够了)

目标第一

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

详细解析UI设计中的隐形元素使用技巧,PS教程,图老师教程网

上图的交互设计(Cooper building block)实际上非常简便,但是似乎这种设计我们平时并不多见,所以我觉得它以目标为导向的设计值得一提。UI设计应该围绕用户的目标,设计者应该挖掘用户的需求,并能通过引导来完成或迎合用户的需求。用户对他们想通过什么方式达到自己的目标很有主见,但是对他们对需要什么却没有任何想法。所以,UI设计师的工作应该是找到用户的需要而不是提供给他们某种方式。

找到目标并且允许用户快速的达成他们的目标将是最好的用户体验,因而你也根本没有必要设计一个非常华丽的界面去吸引用户的眼球。不要用华丽的UI设计作为对目标不够明确的弥补。

真正的一致

详细解析UI设计中的隐形元素使用技巧,PS教程,图老师教程网

在UX的世界中,我们谈论一致性显得理所当然。实际上一致性在UI设计中也非常重要。如果你的UI组件都在同一个地方,具有相同的颜色和功能,那么你的UI设计将会随着时间的推移慢慢的从人们的眼球中消失有点像Marty McFly。但是,仅仅把功能按钮放在每一页的相同的地方或者在整个应用中使用特定的动作来对应相同的东西可能并不能解决连续性的问题。

另外,我们在UX设计经常倾向于应用来源于其它APPs或者网页的那些和我们的设计相通的东西来装扮我们自己的APP。我曾经写过一篇文章来阐释相类似的环境能够让界面显得更加舒适。但是当我们致力于设计一个隐形的UI时,仅仅一致并不足够。我们要的是真正的一致!这就意味着不仅仅是组成、价值、链接以及数据等在APP中的一致,它们应该在上下文内容中也要一致。

例如,你可能注意到很多APP中,登陆按钮一般都会在右上角,因此你会自然而然的认为其他APP的登录按钮应该也会出现在那个位置,这想法没错。但是,这种布局可能在你的APP中不太合适。那么,你就不必要这么做,你要按照自己APP的布局,将组件放在适合于你APP中的地方,并让它们在你的APP中保持高度的一致性。

总结:激发用户

最后,一个真正设计精良的隐形的UI要能够做到激发用户。当UI能够引导用户直接进入他们想要的,用户在使用APP时能将精力集中在他们的目标上面。

界面应该提供数据和内容的无缝交互,这能够激发用户建立与APP更好的关系。用户固然喜欢摆弄一个聪明的UI,但是隐形的UI设计更容易脱颖而出。

展开更多 50%)
分享

猜你喜欢

详细解析UI设计中的隐形元素使用技巧

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
详细解析UI设计中的隐形元素使用技巧

详细解析UI实时动态设计技巧

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
详细解析UI实时动态设计技巧

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

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

详细解析优秀设计作品中隐形的界面

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
详细解析优秀设计作品中隐形的界面

详细解析UI图标设计心得技巧分享

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
详细解析UI图标设计心得技巧分享

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

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

详细解析网页设计中的韵律线条使用技巧

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
详细解析网页设计中的韵律线条使用技巧

详细解析网页设计中绿色调的使用技巧

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
详细解析网页设计中绿色调的使用技巧

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

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

详细解析购物优惠流程设计心得

详细解析购物优惠流程设计心得

不可不知的移动色彩设计新趋势

不可不知的移动色彩设计新趋势
下拉加载更多内容 ↓