首页

交互设计到底是什么?

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

 

当别人问你什么是交互设计时,你又一脸懵逼了。本篇文章就来好好聊聊什么是交互设计


工作了很多年,却依然说不出何为交互设计。一说道理,大家都懂,但是当别人问你什么是交互设计时,你又一脸懵逼了。为什么会这样呢?因为我们没有自己去总结,没有形成自己的知识库。

交互设计,它由IDEO的一位创始人比尔•莫格里奇在1984年一次设计会议上提出,他一开始给它命名为“软面(Soft Face)”,由于这个名字容易让人想起和当时流行的玩具“椰菜娃娃(Cabbage Patch doll)”,他后来把它更名为“Interaction Design”――交互设计。

首先,我们来看看权威方对交互设计的定义:

交互设计协会(The Interaction Design Association (IxDA))解释如下:

交互设计师以创造有用且实用的产品及服务为宗旨。以用户为中心作为设计的基本原理,交互设计的实际操作必须建立在对实际用户的了解之上:包括他们的目标、任务、体验、需求等等。以用户为中心的角度出发,同时努力平衡用户需求、商业发展目标和科技发展水平之间的关系,交互设计师为复杂的设计挑战提供解决方法,同时定义和发展新的交互产品和服务。

 

百度定义如下:

交互设计(英文Interaction Design, 缩写IXD),是定义、设计人造系统的行为的设计领域,它定义了两个或多个互动的个体之间交流的内容和结构,使之互相配合,共同达成某种目的。交互设计努力去创造和建立的是人与产品及服务之间有意义的关系,以“在充满社会复杂性的物质世界中嵌入信息技术”为中心。交互系统设计的目标可以从“可用性”和”用户体验“两个层面上进行分析,关注以人为本的用户需求。

 

唐纳德诺曼给出的定义:

重点关注人与技术的互动。目标是增强人们理解可以做什么,正在发生什么,以及已经发生了什么。交互设计借鉴了心理学、设计、艺术和情感等基本原则来保证用户得到积极的、愉悦的体验。

 

首先要知道什么是交互

交互,及沟通交流,发生互动关系。比如人和人之间的交互就比较好理解,最经典的一幕可以用孙悟空智斗金角大王、银角大王。金角大王说:孙行者,我叫你一声你敢答应吗?然后,金角大王就叫:孙行者。孙悟空回答:爷爷在此。就这样,孙悟空就被收进去了。这就是一个简单的交互。

再比如,我们每天上班,到公司和同事打招呼。你说:“早上好呀”,同事回答“早”。这也是一个常见的交流互动。

 



 

人和人之间的交互比较好理解,那人和机器呢?其实也是非常好理解的。我们都忘不了微信推出的摇一摇功能,打开摇一摇,摇动手机,就会出现“咔咔”的声音,然后加载,搜寻出一个和你同时在摇的人。其实,我们和任何机器之间的发生互动关系,都是属于交互。往更广的意义上说,如果失去了交互,地球将不再运转,将毫无生机。现在,智能时代已经到来,我们除了研究人和人、机器、产品、环境、服务、系统等之间的关系,还要研究机

器和人、机器、产品、环境、服务、系统之间的关系。

 



 

总之,当人(或机器)和事物(无论是人、机器、产品、服务、系统、环境等等)发生双向的信息交流和互动,就是一种交互行为。

 



 

其次,我们来聊聊设计

聊设计之前,我们要先说说艺术,原研哉老师对设计和艺术的描述非常精辟,下面就引用他的话。

 


 

艺术说到底是个人意愿对社会的一种表达,其起源带有非常个人化的性质,所以只有艺术家自己才知道其作品的来源。这种玄虚性使得艺术“很酷”。当然,解读艺术家生成的表达有多种方式。非艺术家通过对艺术的有趣阐释与艺术互动,欣赏之,评论之,在展览中对艺术进行再创作,或把艺术当做一种知识资源使用。

而设计,则基本上不是一种自我表达,它源于社会。设计的实质在于发现一个很多人都遇到的问题,然后试着去解决的过程。由于问题的根源在社会内部,除了能从设计师的视角看问题外,每个人都能理解解决问题的方案和过程。设计就是感染,因为其过程所创造的启发,是基于人类在普遍价值和精神上的共鸣。(来源,原研哉,设计中的设计)

通过上述的描述,我们不难发现,设计主要表现在发现问题–解决问题。而交互设计就是发现和解决人(或机器)和事物(包括人、机器、产品、服务、系统、环境等等)之间的互动关系问题。

所以说,交互设计的范围是非常广的,和各个学科都有涉及,我们可以通过下面的图来看看交互设计和各个领域之间的关系。

 



 

那交互设计主要是做什么工作呢?

作为交互设计师,也应该好好问问自己这个问题。通常,外界的人就认为我们就是画画原型,或者有时候画画UI,而我们通常就是这么做的,所以也不得不让人们这么想。而现在大多数交互设计就是指移动端、网页端的交互设计。

那么交互设计的核心竞争力是什么呢?对于很多公司来说,其实是没有交互设计这个岗位的,交互的工作就由产品经理和UI设计师各自分担了。现在产品经理基本都掌握了原型技能,而且产品经理通常在做需求移交的时候已经把交互表达的很清楚了。而且很多UI设计师能力较强一点的,在做设计的时候都会考虑到交互。如果交互设计师在公司就只做做原型,那么,你就会被取代。

那么交互设计的工作内容到底包含哪些呢?《用户体验要素》这本书很好的说明了这些内容。本书把用户体验要素分五个层级:战略层、范围层、结构层、框架层、表现层。不同层级,表示着你的不同能力,引用一下大众点评高级交互设计经理范怡的一张图,比较形象的描绘了交互设计的能力范畴和价值。

 



 

怎么样,看到这些是不是有一点点觉悟了呢。如果想做好一名交互设计师,就应该扩大自己的能力范围,提升自身价值。怎样做好交互设计呢?如何运用设计原理来做交互设计呢,我们下篇来聊聊唐纳德罗曼老师书里的交互设计6要素:示能、意符、约束、映射、反馈、概念模型。

 

原文地址:站酷
作者:Luyeelin

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

交互设计师自我成长的三个阶段

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

第一段:工具

设计师学习的第一阶段其实都是从工具开始的。这分为两种:
第一种是有形工具,比如PS、AI、Axure之类的软件;
另一种是无形工具,就是设计时用到的思维方式。
1、有形工具
先说第一种有形工具。
很多人在学习UI时很容易陷到工具的学习里去,觉得工具学的越多能力就越强。其实根本不是这么一回事,软件对交互来说是非常基础的一部分。
从UI视觉方面来考虑,PS就足够了,AI都显得略有多余,不需要其他软件。PS其实是一款非常强大的视觉软件,切图也比较方便,BAT等公司也是用的PS。
还有输出交互文档的工具,一种是PPT,一种是Axure,这两款软件就足够覆盖绝大多数交互文档了。当然还有其他软件,如果是快速迭代的原型直接在纸上画也可以。
交互需要快速沟通,你要拿着设计反复和其他人对接。要是搞了个很生僻的软件给别人,结果别人打不开,老板就会骂你。要记住自己是设计的一环,能快速传递自己的设计思路才是最重要的,不要搞一些生僻的软件、格式和字体,这都是门外汉干的事。
像AE、Flash面试时可能会给你加分,因为公司可能有一些高保真的动画展示要做,其实在真实工作中用到的机会非常少。
2、无形工具
第二种是无形的思考工具。设计思维其实最不好培养,说的残酷点,你可能看五年的书都出不来思维,最好能有人指点一下。

第二段:新产品、新思路

前沿的设计意识,是很多设计师容易忽略的。
这个怎么练呢?
每天一定要抽出三十分钟的时间看新产品和新思路,这是今天的互联网设计师必须要干的一件事。很多一线团队每天都会分享各种各样的新闻,百度有自己的分享机制,三星喜欢每个月让设计师找的交互、用研、技术信息,收集起来专门搞一个月报。
设计师有很多渠道可以看前沿信息,比如互联网一些事,爱范,36kr,瘾科技之类的网站。这种前沿意识非常重要,它决定了你能在二流公司还是一流公司,这是排在第二位的。
这个坚持三个月以后,自然而然就会飞跃,不需要怎么特意去学,这可不是培训可以得到的,养成一个好的习惯,每天看半小时其实就是最好的学习。

第三段:人——对人和需求的研究

工具和思维的问题比较好解决,最难解决的问题其实是“人”的问题。可能很多设计师一辈子都解决不了“人”的问题,而它对企业的影响又是最大的,交互设计最重要的就是解决“人”的问题。这一点甚至能决定一款千万级甚至上亿级产品的生死。要知道你的一切设计行为都是为商业负责的,所以前期对交互不甚了解,可以先从PS开始,后期就是“思维”和“人”,这两个东西是比较难的。


看看前辈是怎么说的:

交互设计目前发展得怎样,前景如何?
答:现在我们接触到的交互设计可能只局限在网页或者APP这种,交互设计是个很广泛的概念,前景肯定是有的。互联网是人和服务的对接,很多崭新的设计和商业模式一旦出来,那就是新的商机。

新手自学UI应该从何处入手?
答:视觉基础不好的就学PS去临摹,现在很多开源的信息,比如学UI网。如果临摹到一定程度,可以看一看dribbble,其实视觉非常好解决,思维的提升才困难。

学习交互设计需要掌握什么软件?
答:PPT和axure足够了,这两个东西都不需要学。随便来个人学两三天都能拿着软件画出漂亮的线框图,关键是你的线框图从哪里来、为什么要这么画。

交互设计师需要学习代码吗?
答:交互设计师不需要学代码。知道为什么企业招聘要求你们懂代码吗?因为很多企业希望你做了设计做前端,节省人力成本,正式公司都不会有这个要求。就算你觉得设计师应该学代码,建议你还是先把本行的设计能力学好。当两件事你都要做的时候意味着哪件事你都做不好,这是自我管理的问题。

交互需要手绘功底吗?
答:手绘功底?有或者没有都可以,交互不需要你造型能力多强,你只要能把逻辑关系画出来就行了,不需要搞什么素描阴影。你不是要做画家,朋友们,画家和设计师是有区别的。

内容来源网络,如有侵权请联系,承诺必定删除

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

常见的网页设计、文章设计错误

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里


常见的网页设计、文章设计错误
本文来自阮一峰分享


 1.内容未按逻辑分成块

用户可以根据逻辑块轻易的获取信息。

具体做法为:将padding设置为120px-180px,同时不同的逻辑块使用不同的背景。


2.每个逻辑块的空白大小不一致 

对于每个逻辑块,需要设置同等大小且适宜的空白。否则网页看起来会很混乱,作者不会对每个逻辑块同等对待。



 

3.Padding不能设置过小,否则用户无法将内容分为逻辑块

 为了这点,插入大的空白(至少120px),以使内容按逻辑块分开。





4.背景图片和文字 应该对比鲜明

 


5.在一页中,样式过多

太多不同 的排版和样式将会使得页面不太专业以及难以阅读。

解决的方法是,以字体为例,设置一种字体,字体为正常或粗体(保证在两种不同样式之内)



 

6.背景颜色块过于狭窄




7. 在一个狭窄的列中,放入了过多的文字

这导致用户阅读需跳很多行,整体看起来也不行。推荐的做法为,减少列的数量,精炼文字。



蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

地图设计参考

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

各国的地图设计类参考

 微信图片_20190514110049.jpg微信图片_20190514110140.jpg微信图片_20190514110145.jpg微信图片_20190514110151.jpg微信图片_20190514110203.jpg微信图片_20190514110215.jpg微信图片_20190514110223.jpg微信图片_20190514110234.jpg微信图片_20190514110243.jpg微信图片_20190514110249.jpg微信图片_20190514110255.jpg微信图片_20190514110300.jpg微信图片_20190514110303.jpg微信图片_20190514110306.jpg微信图片_20190514110312.jpg微信图片_20190514110316.jpg微信图片_20190514110321.jpg微信图片_20190514110325.jpg微信图片_20190514110329.jpg

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

怎样回应不好的设计建议?

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

 

一位高管在餐巾纸上画了一个新的主页原型来演示她使用和喜欢的网站。一个开发人员晚上在公司呆到很晚,并添加了一个他认为很酷的新功能。或者产品经理坚持采用与竞争对手相同的设计模式。

如果这些故事听起来很熟悉,那么你并不孤单。大多数设计师都会收到这种“帮助”。

你的第一直觉可能是以平淡无奇的方式回应“不”。但是,一个用户体验建议是否来自一个关键的利益相关者或项目周边的人,应该仔细处理。在您做出反应之前,请考虑以下步骤:

你的第一反应可能是利索地对对方说“不”。但是,无论UX建议是来自关键的利益相关者还是项目的外围人员,都应该仔细地处理它。在你做出回应之前,考虑以下步骤:

一、消除主观意识

第一步是将消除自己的主观意识;你可能拥有丰富的设计经验,但不排除会有更好的想法。不要仅仅因为它是在PowerPoint文件而不是Photoshop原型中呈现,所以不要认为一个想法是坏的。

观点的多样性可以更有效的构思:即使提出建议的人缺乏设计知识,他们可能会有不同的专业知识或经验,并且可能会为您正在尝试解决的问题带来宝贵的不同视角。

你如果像设计的上帝一样扼杀了他人的创造力,最终会导致更糟糕的结果。

二、听他们的想法

不加考虑就无情地否定别人的想法会阻碍人们在未来提出其他(有价值的)想法。即使一个想法对你来说显然是错误的,但请记住,这个人也试图让设计变得更好,尽管他可能对“更好”的含义有不同的看法。通过允许他们:

  • 解释这个想法
  • 解释一下推理
  • 向您展示草图或案列

三、将建议与问题分开

您可能会发现,虽然提出的解决方案并不合适,但需要解决的问题很重要。

问问这个人他的设计理念想要达到什么目标。他在考虑不同的用户群或业务需求吗?继续问“什么?”和“为什么?”(可能以不同的方式),直到你明白他考虑的问题及思考方式是什么。

四、评估潜力

确定建议和问题和好处。即使是一个坏主意也有一些好处。

例如,在大屏幕版本的网站上使用汉堡包菜单不利于用户轻松找到导航。这是不使用它的一个非常重要的原因。然而,桌面上的汉堡也有一个视觉上吸引人、整洁的标题。确认想法的成本和收益,以便更准确地评估权衡,可以通过不同的方法牺牲或实现哪些目标。

考虑举行设计原型会议(一个设计原型会议是短,会议期间,团队成员迅速协作和草图设计,以探索和分享的设计思路广阔的多样性),一起观看用户研究视频,或举办其他类型的用户体验工作坊,以便这个想法的支持者可以继续为这项想法解释。

五、花点时间进行研究和探索

解释一下,现在做一个设计决定意味着跳过构思、研究和用户反馈。在理想的情况下,转向设计思维过程,为所解决的问题找到正确的解决方案。

根据您对目标用户及其任务的了解程度,确定一个想法的优缺点可能需要:

  • 回顾以前的研究,看看这个想法是否已经过测试,结果是什么。
  • 搜索可用性指南和最佳实践,以获得类似想法的案列。
  • 在可用性测试或A / B测试中构建和测试该想法的原型。

论证该想法的成本可能会由于潜在的用户混淆,而导致的用户体验问题,以及诸如可能延迟发布其他更重要功能的开发计划中断等后勤问题。要评估大量想法,请使用对其进行优先级排序。

六、如何说“不”

如果您评估确定不应该实施该想法,您可以以积极的方式拒绝。

承认其贡献

你不必着急全盘否定,但不要愚蠢的全去试一遍。找到您相信的有关他们建议的真实或有效的内容,并将其标注出来。这可能是这样的:

  • “这种设计对于[角色类型]用户可能有意义,因为他们需要[此功能]。”
  • “听起来你想要解决与重要用户任务相关的[特定客户投诉]。”

由于这些短语之后都会出现“but”,因此请确保您在所提出的观点中是真实的。否则,说它们根本不值得。

分享您的评估理由

当人们投入足够的时间来提出建议时,就是帮助他们学习更多关于用户体验的知识,并在整个团队中传播更多用户体验知识的理想时机。利用这些时间,交流你评估的理由,而不是仅仅告诉他们一个“不”。

1. “这种设计对于[persona type]用户可能有意义,因为他们需要[此功能]。但是我们的主要角色可能会有这个问题,因为[原因]。“

2. “听起来你想要解决与重要用户任务相关的[特定客户投诉]。确定信息的优先顺序可能会有所帮助,但要使其更大,颜色不同可能会导致横幅失明。我想在第二天做一些调查,并提出一些替代解决方案的原型。“

考虑提供原型,案列,设计原则,模式或研究发现,以帮助他们理解为什么一个设计可能会导致问题,以及为什么不同的设计会更好地工作。把每一次互动都看作是灌输贡献者设计理念的机会——这是对未来的一种投资。

七、对强权讲真话

当客户或强大的同事发出特定请求(或要求)时,即使您给出了解释,也很难说“不”。但这并不意味着你应该放弃自己的观点并同意有害的建议。相反,与他们讨论如何将想法背后的目标和资源结合在一起,而不必直接实施。

合气道是一种试图和平解决冲突的武术,它依靠转弯和枢轴等动作来融合对立的能量。同样的原则可以应用于处理围绕设计的冲突:与其直接拒绝一个想法,不如同意继续探索这个建议,而不是明确地承诺实现它。

建议召开一次工作会议,在会上你可以提出既能获得同样好处又能避免成本的选择。例如,你可以说:

  • “我明白你想达到的目标。让我把它与一些用户体验研究和模式进行比较,看看我们如何能够在我们的约束条件下提供最好的解决方案来实现你的目标。“
  • “我想看看我们的一些竞争对手是如何做到这一点的,并确保我们做得更好,或者至少做得一样好。”
  • “让我们按照这些思路勾勒出一些东西,以及一些相关的替代方案,并获得一些用户反馈,这样我们就能实现你的目标。”

八、通过寻求早期设计输入来预防这些问题

比优雅地转移坏主意更好的方法是主动引导合作进入更有效的轨道。您可以通过在结构化的、战略性的时间(例如预定的研讨会)寻求输入,最大限度地利用每个人的贡献。这种主动的方法减少了在无法有效评估或合并意外更改请求时感到意外的可能性。

九、结论

每个人都对设计都自己的看法,这使得UX设计师的工作充满挑战。有些人总喜欢在界面中添加一些令人困惑的元素,比如原型、这会影响产品开发进度(可能包含UX迭代),以及那些喜欢设计(甚至认为自己是设计师)但缺乏任何真正的UX设计专业知识的人。

但是,如果您与您的合作者进行深入交流,向他们灌输设计理念并引导他们发挥自己的长处,这种“设计帮助”的多样性将是一种宝贵的资产。

最有成效的用户体验设计师在设计过程中会和许多人合作。他们与各种团队成员和主要利益相关者讨论业务目标,发展机会和约束,优先级,要求和设计理念。这些人来自许多职能团体;具有不同的UX专业知识,想法和思考。

要想成为一名优秀的用户体验设计师并创作出优秀的设计作品,培养必要的沟通技巧来利用这些信息来源和输入是必不可少的。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

这样设计按钮,会提高转化率哦

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

 

是能点还是不能点呢?”这是当用户在面对一些操作按钮时,大脑中所迟疑的问题。

按钮越多,做决定的时间就越长。用户必须仔细看每个按钮,才能确定哪个是他们需要的。对于按钮的任何不确定性,都可能会导致他们不敢操作或误操作。

设计师可以把按钮的优先级设计的更加直观以减少这样的情况发生。当用户注意到哪个按钮与他们的任务目标更契合时,就能帮助他们快速做出决定。这篇文章就是介绍一些这样的设计技巧,通过简单的调整使得按钮变得更加直观有效。

1、根据阅读习惯设计按钮

在App中,一个常见错误就是按钮的排列顺序偏离了用户的阅读习惯。他们将优先级最高的按钮放在最前面,期望用户能首先注意到它。但其实只要按钮足够突出,视觉分量够重,用户就会注意到它,而无视它的排列顺序。

按钮顺序不是为了提供可视性,而是为了要提率。在最前面放高优先级的按钮会导致用户自上而下的阅读习惯被打断,看到按钮后还会继续阅读下面的文字,然后再回过头来找前面的按钮进行操作。

不要让用户返回再次检查按钮,而是让他们以自然的阅读习惯看完所有的内容后,按视觉比重快速进行选择。

通过将优先级高的按钮放在底部,让它处于视觉阻力最小的路径上,这使得这个按钮可以更有效率的被点击。此外,底部位置是手指最容易达到的区域,这进一步提高了效率。

2、区分带形状按钮和纯文字按钮

App上的另一个错误是只使用文字来表示按钮。设计师使用文字按钮来表示优先级较低的操作。但是对于用户来说,这是一个糟糕的选择,因为纯文本没有一个按钮的外观,这可能导致用户会忽略了这些操作。

纯文本按钮会让用户迟疑到底是按钮还是内容,从而造成混淆。这种不确定性可能会导致他们直接跳过这些按钮。

纯文本按钮不仅让人感到疑惑,在操作上也不容易点击。将文本内容放在按钮框中,可以使得按钮更容易被点击和注意到。

与纯文本相比,描边形式的按钮是降低优先级的更好方法。它们使每个选项都易于识别,以便用户能选择他们所期望的目标。

3、为主要按钮加上颜色

高优先级的按钮应该是最容易被识别到的,它是直接指向用户最需要的目标操作。如果不确定优先级,请考虑哪些操作会使得用户朝着目标前进,哪些操作会使得用户回退。

在这个例子中,”付款”具有更高的优先级,因为它顺应着用户的目标流程。但不大清楚”查看购物车”还是”继续购买”的优先级是如何。

“查看购物车”操作让用户查看已经在购物车的商品,然后继续结账。”继续购物”操作将用户带回到远离结账的产品页面。

通过思考这些操作,可以清楚的看到”查看购物车”具有中等优先级,而”继续购物”具有较低的优先级。判断的理由是哪些操作使用户朝着他们的目标前进,哪些操作使他们远离目标。

前进的操作总是会比回退的操作优先级更高,因此,它们应该被设计地有更强的视觉重量和更高的颜色对比度。

颜色是一种增加按钮权重的有效方法,因为它从文本颜色中脱颖而出,吸引了用户的注意力。当按钮的颜色与文本的颜色相同时,提示性就没有那么强了。为优先级更高的按钮使用不同的颜色来辅助用户进行快速决策。

如果对每个不同优先级按钮使用相同的颜色,用户将不知道哪个优先级更高。而使用不同的颜色只会让用户更加困惑,不知道这些颜色到底意味着什么。不仅如此,每个按钮使用不同颜色,还会让视觉权重重新变得一样。

秘诀就在于使用相同的色相颜色,但改变饱和度和亮度就能改变这个按钮的优先级了,使得它比高优先级的按钮更轻。现在按钮的视觉比重有了区分,一下子就变得清晰了很多。

为了增加对比度,可以使用反色。在主按钮的深色背景上使用浅色文本,而在中等优先级按钮上使用浅色文本。这样就使得高优先级的按钮具有最亮的文本和最强的对比度。

4、改变文本的粗细

用之前说的几个方法,已经足以区分优先级,但还可以做的更好。每个按钮设计的越直观,让用户的思考就越少。

在每个按钮文本上使用相同的粗细以表示相同的重量,最好根据优先级不同去强调不同的文本。尝试改变文本的粗细,优先级越高的按钮使用最粗体,而优先级的文本则不加粗,这样,按钮文本也有了不同的优先级,用户在阅读这些文字内容的时候就能感知到。

在这个例子中,我把”付款”这个按钮文字使用了粗体,使它变得更加醒目和明亮。”查看购物车”使用了半粗体,”继续购物”使用了中等。所以,按钮文本此时也有了一定的视觉权重。”查看购物车”中的”3项”没有加粗,因为它是补充信息,不代表具体的操作。

5、给高优先级的按钮增加图标

最后一个技巧是一种更加全面的思考,它将使按钮可供盲人使用。色盲的人是无法通过颜色来区分按钮的视觉重量的,他们还需要清晰的视觉符号。

给高优先级的按钮加上一个图标能够起到强调作用而与其他按钮区分开。当用户浏览时,他们往往更关注视觉元素而不是文本。使用图标按钮的方式能够确保引起用户足够的注意力而快速选择到高优先级的按钮。

如果删除了颜色和外框,用户仍然能够识别付款按钮,图标与文本一样,也能够起到说明的作用。

你的按钮设计的直观吗?

如果用户要花很长时间在操作按钮上,或者按钮的点击率很低,那就可能是按钮设计的不够直观。如果遇到了这样的情况,请尝试使用文中所说的这些技巧来优化操作按钮,或许你将会在前后版本中看到非常大的差异。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

三折页设计欣赏

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

 微信图片_20190424123923.jpg微信图片_20190424124005.jpg微信图片_20190424124008.jpg微信图片_20190424124011.jpg微信图片_20190424124014.jpg微信图片_20190424124017.jpg微信图片_20190424124020.jpg微信图片_20190424124105.jpg微信图片_20190424124058.jpg微信图片_20190424124055.jpg微信图片_20190424124046.jpg微信图片_20190424124043.jpg微信图片_20190424124036.jpg微信图片_20190424124108.jpg微信图片_20190424124119.jpg微信图片_20190424124126.jpg微信图片_20190424124137.jpg微信图片_20190424124159.jpg微信图片_20190424124155.jpg微信图片_20190424124153.jpg

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

设计师的名片就应该这样设计

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

 

名片,是品牌传递的重要工具,但往往被人忽视。虽然纸质的名片几乎已被微信媒介所取代,但是作为设计师更不应该放弃这种貌似不重要的设计。

相反,越简单的设计,更考验设计能力。一张名片,可以看出一个人是否真的懂得设计,因为里面包含太多基本功了。如果连一张简单的名片都做不好,更不要说其他的设计了。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

指尖上的UI设计:移动端UI设计中的手势交互

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

 

通过点击、滑动、滚动和键盘快捷键来交互的日子吗?它们不再是唯一的交互方式,一起来了解一下~


还记得浏览网页时,只能通过点击、滑动、滚动和键盘快捷键来交互的日子吗?而现在,它们不再是唯一的交互方式,当苹果推出第一款iPhone时,多点触控技术成为了主流,用户们了解到,他们不仅可以在界面上指向、轻点还可以捏合、展开和滑动。手势成为新的操作方式。



一、UI中手势的力量

手势非常自然和直观,他们与真实世界反应类似。

对于使用手势,这里有三个主要的理由:


● 干扰少

App内,手势控制使用地越多,在屏幕上出现的按钮就越少,这样可以留出更多空间给更有价值的内容。这使得app以内容为重点,并让用户在没有障碍,或者在分心的情况下也能进行最重要的操作。

● 使用简单

一个手势一旦被用户发现和学习使用就会让用户在体验感到愉悦,而且手势可以减少步骤,来达到提高交互体验的目的。例如,当你需要删除一些项目时,用“一次点击删除一个”的方式的很浪费时间的,但是如果使用“滑动一下,删除一个”的滑动手势,就更简单快速,让用户更加愉悦。

● 无缝交互

虽然按钮看起来对于触发响应更加有用,但手势具有更大的潜力,使内容的交互更加直观。

二、手势的缺点

但同时,手势也存在难规范、易混淆等缺点。


● 增加用户负担

大多数手势学起来或者记起来不自然也不简单。举个例子,在大多数APP,一个手指的手势就对应一件事,用两个手指做一个同样的手势意味着另外一件事,其他对应事件的手势还有很多。

● 缺乏反馈

在大多数情况下,手势不会留下任何路径记录。这意味着,如果做一个手势但没有得到反应或者得到错的反应,这样就只能获得很少的信息或者不能获得有帮助的信息去解释为什么这么做。

● 缺乏一致性

大多数手势在app中还不是标准统一的。他们对于用户不总是显而易见的。甚至一个简单的滑动手势,在众多邮箱app内的邮件项目中也有着不同的工作方式。例如,在Apple Mail 中,删除一个未读项目,你应该向左滑动这个没有打开的邮件,然后界面会出现选项来删除这个项目。在Gmail里,向左滑动可以把邮件标记为未读状态。

三、手势成为移动端UI成功的关键

1.如何选择好的手势

如果你的界面里要使用手势,那你就必须要去了解你所在的市场以及你的目标用户会去使用的app。要尝试在你的app里使用和它们相同类型的手势。这样,你不仅基于你的目标市场的用户的行为优化了你的界面,还让用户从一开始就能舒适的使用你的app。



2.手势教学

虽然每个移动端app都必定会用到手势,但是要让用户很自然的就能知道如何操作(使用什么手势可以干什么)却一个挑战。可触摸的界面提供了很多条件来使用自然的手势,例如轻点、滑动和捏合来完成任务,但是不同于图形界面的操作,手势的交互用户往往是看不到的。

因此,要让用户能发现手势是很重要的。你需要确保你提供了正确的线索----通过视觉引导来帮助用户更容易的发现如何与界面进行交互。



3.如何在情境中教育用户

教程和演示的做法相当流行。在许多app中加入教程意味着要想用户显示一些说明内容来介绍界面。然而,UI教程不是介绍app的核心功能的最优雅的式。

良好执行的UI手势总是可以在易于实现视觉提示和渐进式披露的游戏中找到。这显而易见,最好的游戏可以使人们随着时间的推移来学习到技巧,而不是靠指导他们。例如,PuddingMonster 的游戏机器完全基于手势,但是他们允许用户得到基础的信息,他们不需要做很多的猜测。他们可以展示动画场景,让用户马上知道要做什么。


四、使用动效来传达手势

手势总是与移动app中的动效相关联。动效在维护用户体验中起着非常重要的作用。作为设计师,你可以利用动效来传达出用户可以进行某个操作。当动效与手势一致时,用户就会意识到自己与该物体正在相互作用。

动效在向用户提供视觉反馈上是非常重要的。没有动效,用户就不能获得足够的信息反馈,不能确定他们是不是成功地完成了手势动作。



这里有三种流行的基于动效来帮助用户学习手势。

第一种:动效视觉提示

显示一个在执行某个操作时如何和某一个界面元素进行交互的预览。它的目的是在手势和操作之间建立联系。例如下图中的这个游戏app是完全基于手势操作的,这个app让用户不用去猜测就能知道该如何操作。用动画来传达功能信息能立即让用户清晰的知道该怎么做。


第二种:内容的梳理

内容梳理是通过微妙的视觉线索来暗示用户进行手势操作。例如下图中卡片的展示,它表明这张卡的背后还存在着其他的卡片,这清晰的表明了可以滑动卡片。



第三种:功能可见性

你可以让你界面里的某些元素具有很明显的可供性来让用户知道这个是可以进行某种操作的。例如下图中点击相机icon后锁屏就会从下往上弹起,展示出在下面的相机功能。


五、总结

手势是一种强大的互动模式。移动设备已经从砖块发展到由我们手指驱动的复杂计算器。触摸和手势交互在使移动体验更加简便有趣方面,有很大的潜力。

设计一款移动端的app一定要思考手势设计。手势应该起到协调和节约时间的作用。为了设计一个有意义的手势,你应该规定一个动作以及与其配套的一个手势。提供反馈意见也非常重要,对于可能要进行的行动要有明确提示,并进行手势的引导。



作者:young68
链接:https://www.jianshu.com/p/7132d7e6220f
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

2019草莓音乐节的主视觉设计太赞了!

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

 

2019草莓音乐节的主题是“循环世界Circular World”。

摩登天空联合世界自然基金会(WWF)发起今年的音乐节主题“循环世界”,以环保为核心理念,携手海内外环保机构对草莓音乐节进行多方位环保实践,并聚合知乎、摩拜等多平台力量影响年轻人,让环保成为青年生活方式的一部分。

今年的主视觉海元素是被三个箭头环绕的草莓星球,表达了“循环世界”的主题。风格延续了去年的样式,色彩略有调整,并加入了太空元素。

今年的主视觉当然仍由摩登天空的当家工作室——MVM design label_工作室操刀。

这张是今年的主视觉海报。今年,MVM特地为各城市举办的2019草莓音乐节单独设计了专门的海报,一样的版式,不一样的内容,既统一又包含新意。

2019草莓音乐节武汉站

2019草莓音乐节成都站

2019草莓音乐节西安站

2019草莓音乐节上海站

2019草莓音乐节长沙站

在今年3月30日的“地球一小时”公益活动中,草莓音乐节把自己的参与定义为“草莓星球一小时”。

而武汉OYO酒店与摩登天空联合主办的活动中,一张以“音乐满房”为主题的插画也分外有趣——原来大家为了迎接音乐节,都关上门在房间里引吭高歌呀…

音乐节配套周边产品的销售,推广视觉设计也很有意思。

即使不是音乐迷,设计师对这样的设计也无法抗拒吧!

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

日历

链接

个人资料

蓝蓝 http://www.lanlanwork.com

存档