西安天琥电脑培训学校
招生热线:400-656-3385

学校地址:西安市雁塔区长安中路38号小寨领秀城8楼

西安交互设计培训教程

  西安交互设计培训教程,超大触摸屏中的人机交互要素与设计注意事项!触摸屏作为一种新的电脑输入设备,它是目前简单、方便、自然的一种人机交互方式。它赋予了多媒体以崭新的面貌,是极富吸引力的全新多媒体交互设备。主要应用于公共信息的查询、领导办公、工业控制、军事指挥、电子游戏、点歌点菜、多媒体教学、房地产预售等。当交互设计师在为超大触摸屏产品界面做交互设计时,要考虑的要素和设计技巧就不能像移动手机那样的尺寸,要考虑和注意的事项就特别多。

  随着科技的发展,触摸屏设计的应用无处不在,它们不仅仅使用于手机和平板,也在台式电脑上使用。由于台式电脑的规模和尺寸更大,此类触摸屏的设计可能会给设计师带来一些独特的挑战。

  当你习惯了用拇指大小的区域来做屏幕设计时,你如何去设计超大触摸屏?这里笔者整理了一个关于超大触摸屏的设计指南,为设计师们设计用户交互提供灵感。

  01使用自然的手势交互

  为什么“左右滑动”在所有触屏操作中都深受欢迎,因为这是用户自然的手部动作和手势。

  在设计超大触摸屏时,设计师不仅要考虑用户手指的动作,还要考虑到整只手的操作。西安交互设计培训教程?大多数用户不得不接触到更大的触摸屏,因为相较于手持设备,它们可能会被贴在墙上或放置在桌子上。

  如果你希望用户能够轻松触摸屏幕,那么动作的触发就应该像在移动设备上一样自然,所以多琢磨琢磨触发动作。与小屏幕相比,大屏幕的滑动触发可能需要更夸张一些,因此点击可能会需要更大的手指压力。

  在超大屏幕的设备中,过多的滑动设计对用户来说似乎不大友好,因为反复上的下滑动操作可能会导致手臂疲劳。思考一下如何设计能让用户在浏览内容时不需要大量的滑动操作。

  另一种自然的“手势”交互是视线扫描。由于一些设备的屏幕尺寸太大,用户的眼睛无法同时抓住所有内容。西安交互设计培训教程?设计师应该针对眼睛从上到下,从左到右的运动特点进行设计。要确保用户看到重要的信息,并了解用户如何才能与设计进行交互。

  02增大文本和图形的显示比例

  增大文本和图形这种情况在设计中通常不会出现,因为设计师必须大幅放大视觉元素才足以在超大屏幕上显示。然而,更大的屏幕并不意味着可以展示更多的东西(反之亦然),不如试着把它看作是一种特殊的用户体验。触摸屏中的所有内容,包括文字和图形,必须为了适应超大屏幕设计的尺寸而进行放大。这样做原因是:

  - 用户倾向于从更远的距离进行交互,且仍需要查看和区分元素。

  - 用户需要被具体可见的元素吸引到屏幕上。

  - 用户需要看到可视化的提示,帮助他们识别出用于公共场合的屏幕。

  - 在没有指令的情况下,屏幕元素必须具有可导航和清晰的显示功能。

  - 触摸目标需要易于查看,并创建明显的交互效果。

  03确保导航始终可用

  大多数用户使用超大触摸屏的心态,与第一次访问网站类似,导航显得尤为重要。西安交互设计培训教程?模仿这种场景进行设计,很容易就能吸引用户进入你的设计并与之交互。需要注意的是,设计师要确保用户在访问不同的内容时,导航始终可用。

  为你的产品设计一个导航模式时,好采用一般网站普遍使用的导航模式,如将导航栏设置在屏幕上方或侧边栏中。

  当用户访问不同的内容或页面时,也要确保导航不会消失。虽然主屏幕的设计可能只包含了几个较大的导航按钮,但其他的屏幕好使用传统的导航格式,以便用户使用。

  另外,在这些屏幕上尽量减少基于键盘的输入。在较大的屏幕上,键盘可能会变得笨拙和缓慢,需要消耗用户额外的体力。但是,如果你确实有基于键盘的输入,请在导航中设置一个键盘切换命令,这样用户就可以在需要的时候轻松地显示和隐藏键盘。

  04不要创建太多的选项

  屏幕越大,用户选择的余地就越大,需要耗费的时间就越多。不如将按钮和交互看作是如何让用户做决定的游戏。西安交互设计培训教程?设计的诀窍在于让他们在两个元素之间进行选择,而不是提供太多的选项。

  这样设计的好处就是它可以简化你的设计。每个屏幕只提供两个选择,减少设计元素和视觉混乱,创造了一个更实用的界面。

  在设计选项时,要确保操作是同样清晰可见的。用户如何选择这些选项?按钮必须是显而易见的,以便用户轻松触摸。使用一个小动画来将用户的注意力吸引到到交互元素上,或者是更受欢迎的用户选项上。

  由于屏幕大小的原因,简化选项也非常重要。请记住,整个屏幕可能并不总是在用户的视野中,这在一定程度上限制了选项本身。如果你提前简化选项,则不必担心环境会影响用户的选项了。

  05考虑用户隐私

  当涉及到触摸屏访问敏感信息或数据时,用户的隐私是一个值得考虑的问题。西安交互设计培训教程?用户在公共场所中使用大屏设备,并不意味着他们希望其他人知道自己在做什么,特别是在输入一些重要信息时。而屏幕越大,其他人就越有可能看到用户输入的内容。

  为了解决这个问题,设计师通常会使用一个较小的弹窗用于表单或数据输入,这样即使从远处也看不到用户输入的内容了。

  06网络连接问题

  当涉及到超大触摸屏设计时,需要考虑的问题是产品的网络环境。如何才能使产品在有无网络的情况下都能正常工作?

  思考一下:在公共场所,许多超大屏或者小屏设备(如可移动的信息亭或大型平板电脑)都是便携式的。这会涉及到设备对互联网的访问,以及网络连接是否能正常工作。即使没有连接网络,这些触屏设备也需要保持正常工作。

  提示:请确保所有运行设计的工具相关数据(从javascript到字体库到数据收集)都存储在本地。

  07设置明显的交互按钮

  此类设计需要向用户展示如何与屏幕交互,并不是每个用户都能马上理解如何在屏幕上进行操作。西安交互设计培训教程?建议使用诸如动画和按钮之类的视觉提示来帮助引导用户完成整个过程。

  大多数的超大触屏提供用户的是一次性交互或触发点,且每个界面都有所不同。这种提示设置地越明显,用户就越容易理解操作,从而就越有可能与你的产品进行交互。

  除此之外,许多触摸屏上涉及和开始的屏幕区域也需要设置交互按钮。例如在一个开始屏幕中,设计师就会使用一个按钮来提示交互。这样设置既不会脱离设计,还能告诉用户如何对设备进行操作。

  使用描述性的小提示,如“触摸这里开始”,来引导用户完成整个过程。虽然这样思维元素可能看起来过于明显,但是如何使用界面并不是用户应该深入研究的问题,不如让它变得容易点。

  小结

  马云的无人餐馆超大触摸屏点餐系统、学校里的挂式超大屏液晶屏教学课程、新闻天气播报主持人用的大屏幕电脑、火车票自主订票取票机器、商场中安置的自助订优惠券机器等等。西安交互设计培训教程?你是否有过对超大触摸屏设计的经验?这种触摸屏的设计已经成为一种流行的趋势。就算目前你还没有做过此类的设计,相信不久你也会接触到。

  虽然大多数设计原则和其他基于界面的设计是一样的,但是超大触摸屏的尺寸以及尺寸的调整会让很多设计师无所适从。所以,当你在公共场合看到超大触摸屏时,不如停下来在界面上操作一下,感受一下它的交互设计。看看哪些设计元素和交互对你有吸引力,以便在日后的超大触摸屏设计中进行参考。

文中图片素材来源网络,如有侵权请联系删除
申请试听
为您选课

  

  西安UI培训

按钮是UI设计中一个很常见的元素,尽管很简单,但是这里面却有着很大的学问。在这篇文章中,我将和大家一起来探讨按钮设计中一些原则。

1 让你的按钮长得像按钮按钮的作用就是供用户点击,按钮和其他元素所不同的地方也在于它们能够被点击。所以用户能否意识到你设计的这个“东西”是按钮,就在于其本身的可点击性(clickability)。形状目前app和网页中按钮主要的形状是矩形和圆角矩形。其中矩形式按钮很早就应用了,用户对此已经习以为常了。

当然我们也可以尝试使用其他的形状。比如,圆形,三角形,甚至其他自定义形状。我们要把握设计的度,有的时候过于追求设计感,为了创新而创新,做的按钮用户都认不出来,这就有点本末倒置了。

无论我们最终选用哪种形状做按钮,我们首要考虑的是要保持整体设计风格的一致性(consistency)。其实用户远比我们想象中要细心得多,他们会注意到页面中的一些小细节。当他们发现这个页面中的按钮采用一种特定的设计风格时,那么其他地方带有相同风格的元素用户就会理所应当的认为也是按钮。比如,你在这里按钮样式采用的是圆角矩形。那么在其他页面也应该是圆角矩形,不能这里是圆形,那里是矩形。同一款产品存在不同的设计风格会极大的影响用户体验,用户会对你的专业性产生质疑。

阴影与高光随着扁平化设计的兴起,人们觉得按钮很好设计,只需要一个矩形/圆角矩形上面写几个文字就行了。按钮没有必要做的太过于写实,阴影与高光也没有使用的必要了。然而事实并非如此,阴影与高光依然有着极大的作用。我们通过阴影与高光的搭配使用可以使按钮从页面整体背景中凸显出来,帮助用户更加容易的找到按钮。当然也可以使用阴影增加按钮的可操作性,也就是让按钮看起来更容易点击。

标签按钮上我们应该通过添加标签来告诉用户这个按钮的具体用途,标签可以是文字也可以是图标。比如下方的亚马逊账号注册页面,底部的按钮上写着“创建新账号”。用户就会知道填写了以上的基本信息后,点击这个按钮就是创建了一个新的亚马逊账号了。用户只有了解了点击这个按钮是干什么的,他们才会安心的点下去。标签上文字尽量使用动词和名词。

西安UI培训

2 提升按钮的用户体验按钮的尺寸和视觉反馈是提升用户体验的重要因素。按钮大小与间距在设计中我们应该确定按钮的大小,按钮过小用户不容易完成精准点击,按钮过大也会影响页面中其他的内容的排布。无论是app还是网页,点击都是主要的一个交互事件。根据麻省理工学院的一项研究表明,人类手指指垫的平均尺寸是10-14mm,而指尖的平均尺寸是8-10mm。所以当用户要完成点击操作时,小的尺寸应该为10mm*10mm。

当然,网页中按钮用户是采用鼠标完成点击操作的,所需尺寸应该适当的缩小点。除了按钮的自身的尺寸大小,我们也要注意按钮之间的间距。间距过小会发生误操作,从审美角度上来说也会使页面感觉很拥挤。

提供视觉反馈按钮不会总是保持不变只处于一种状态的,一般来说,按钮会有四种状态:Normal(正常),Focused(选中),Pressed(按下)和Disabled(不可用)。给用户提供相应的视觉反馈来告诉他们按钮当前处于的状态是很重要的。比如我们通过网银转账,如果“确认转账”按钮没有Pressed的这个状态,在转账结果返回之前用户就不会知道自己刚才的操作有没有成功。甚至还会发生重复转账的现象,给用户带来极大的损失。

3 突出重点页面中不同元素的重要性是不同的,有的元素你希望用户一眼就可以看到,有的元素在页面中却是鸡肋,可有可无。我们在进行设计过程中要分配好用户注意力。行为召唤按钮行为召唤按钮是我们期望用户可以很快很容易就可以发现的按钮。一个行为召唤按钮是否成功就在于其能否吸引用户的注意力,并且诱导用户完成点击操作。比如底下这个Gmail的UI设计就很好的体现了这一特点。当用户完成邮件内容编辑,然后他们就会想到要将这份邮件发送出去。这时候用户需要一眼就能找到“发送”按钮在哪里。整个页面设计的很简洁,在浅色背景这一前提下,我们给“发送”按钮加一个蓝色的配色,让用户很容易的找到。

西安UI培训

主要按钮与次要按钮同一页面的按钮也会根据其重要性不同分为主要按钮和次要按钮。按钮的用途就是供用户点击完成交互,主要按钮存在意义就是让用户更加愿意点击这个按钮。比如当你进入的一个商品详情页面,店家肯定希望用户点击的是“立即购买”或“加入购物车”,而不是“返回”按钮。那么如何诱导用户点击主要按钮呢?我们可以给主要按钮加以更高的视觉权重。下面的这个清倒废纸篓页面中,我们可以看出“安全清倒废纸篓”(secure empty trash)按钮拥有更高的视觉权重。因为它使用了与背景色相差较大的蓝色,这种配色设置使这个按钮更容易就被用户注意到。当然影响按钮视觉权重的因素有很多,除了配色也可以将通过位置和尺寸来实现视觉权重的修改。

西安UI培训

4 总结按钮可以帮助我们创建一个流畅的用户体验。在我们的按钮整个设计过程我们都要问自己以下这些问题:1 用户能意识到你设计的是按钮吗?你有通过尺寸,形状,阴影效果和配色来让你设计的按钮看起来像是一个按钮吗?你保持了当前页面乃至整个系统按钮设计风格的一致性吗?2 你按钮上的标签提供的信息表达清楚了吗?用户知道这个按钮是干什么的吗?用户知道点击后会出现什么吗?3用户可以很容易的发现你的按钮吗?你知道用户习惯的视觉焦点在哪里吗?不要让用户去寻找按钮,而是在用户需要的时候,按钮自然的出现在用户的眼前。你有做到这一点吗?4 如果当前页面里有两个按钮,更重要的那个按钮有着更高的视觉权重吗?你是通过哪些方面来实现不同的视觉权重的呢?

目前发展

  到目前为止,天琥已在全国20个省(市)拥有24所校区,成功打造天琥设计广告公司、云琥在线以及在线页问网三大教育平台。团队集团拥有100多位设计,他们大多来自4A广告公司的设计精英、知名设计总监、艺术院校教授,为天琥的课程研发、教育教学、服务管理等提供了强有力的保护。课程研发天琥设计课程由专门课程研发团队自主研发,课程设计紧跟互联网潮流,将前沿的设计融入课程中,并且每年持续精进课程内容和教学建设。目前天琥已开设多个专业方向课程,包括UI设计、平面设计、网页设计、室内设计等专业。特别值得骄傲,2013年由研发团队研发的《平面设计精英课程》、《网页设计精英课程》、《室内设计精英课程》荣获著作权保护,2015年《电商网页设计精英课程》获得著作权保护。在天琥,我们一直坚持“快学习,乐设计”的课程理念,让有志于学设计的人、快乐、地学习。在快乐中学习设计,在学习中收获快乐!课程理念三维五段教学法——天琥设计独创特色教学,为快乐保驾护航三维:电脑、设计、艺术五段:操作、临摹、分析、改进、创作在学习过程中,学员有章可循,无论学习哪一门设计课程,都可以找到一套切实可行的学习流程和方法。


以上就是UI设计培训课程的全部内容介绍,如需了解更多的UI设计培训班、课程、价格、试听等信息,也可以点击进入 UI设计 相关频道,定制专属课程,开始您的学习之旅。

申请免费试听
全国招生热线