• 良好用户体验的动效设计六准则

    成功的动效设计应具备6条特征:响应式的,关联性的,自然的,有目的的,快速的,以及清晰的。功能动画是一种很微妙的动画,它有一个明确的,合乎逻辑的目的。它减少了认知负荷,避免变化的盲目性,并在空间关系中建立了更好的响应。更重要的一点,动画将用户界面与现实生活联系起来。运动可以通过合并和分离、改变形状和大小,使物体的表面充满活力。你可以运用功能动画来使用户在导航性的上下文间平滑地过渡,解释屏幕上元素布局的变化,以及加强元素的层次结构。成功的动效设计具备以下6条特征。1. 响应式的视觉反馈在UI设计中非常重要。它之所以有效是因为它迎合了用户对确认的自然渴望。在现实生活中,按钮、控件,以及对象对我们的交互产生响应,这就是人们希望事物达到的效果。图片来源:聪明的设计用户界面应该快速地响应用户的输入,精确到用户触发的地方,以及显示新界面和创建它们的元素或操作之间的关联。让用户感觉点击这款app真是棒极了,就像知道即将发生什么。对象对用户的意图作出适当的响应。图片来源:Material Design2. 关联性的将新创建的界面与创建它们的元素或操作关联起来。关联背后的逻辑是帮助用户理解视图布局中刚刚发生的更改,以及引发更改的原因。以下你会看到两个菜单变化的例子。在第一个例子中,菜单从距离触摸点很远的地方出现,打断了它与触摸点之间的联系。不正确示范。图片来源:Material Design在第二个例子中,菜单从触摸点出现。这将元素与触摸点联系起来。正确示范。图片来源:Material Design另外一个例子是操作按钮在一定条件下功能发生改变。“播放”和“暂停”按钮可能是最常见的可切换按钮的例子。将播放按钮转换为暂停按钮意味着两个操作是有关联的,点击一个按钮可以使另一个按钮可见。你应该用动画让状态之间的转化看起来是平滑的,而不是间断的。平滑过渡到播放控件既可以告知用户按钮的功能,同时又为交互增加了惊喜。图片来源:Material Design3. 自然的避免出乎意料的转变。每一个运动都应该是现实世界的力所驱动的。在现实世界中,物体加速或减速受到重力和表面摩擦力的影响。类似地,在友好的用户界面设计中,启动和停止都不会立刻发生。以下你会看到一个很好的例子,用户从列表中选择一项放大它的详情视图。在变化过程中,小卡片在扩展成一张大卡片时,小卡片往其目的方向移动。正确示范。在屏幕上向上移动的元素也应该通过向上运动来表现加速的过程。图片来源:Material Design4. 有目的的在正确的时间将注意力集中到正确的点上。运动,其本质上,在用户界面中具有最高的优先级,无论是文本段落还是静态图像都没有办法与其比拟。一个好的动画可以帮助引导用户进入交互的下一步。用户不能第一时间真正预测到将要发生的交互,但是适当的动画能够引导用户,使用户对内容的改变不会感到突兀。Mac OS在最小化窗口时使用功能动画。这个动画将第一个状态与第二个状态连接起来。Mac OS最小化窗口动画另一个很好的例子是父-子窗口转换,用户在列表项或卡元素中选择一个项目,然后放大到它的详细视图。这种交互为用户保留了上下文。父-子窗口转换动画。图片来源:Material Design5. 快速的当元素在位置或状态之间移动时,移动速度应该足够快,以免用户等待。但也不能太快,要让用户理解转换。动画不能太慢,因为这会产生不必要的延迟。不正确示范。图片来源:Material Design摇晃和减缓元素的运动会延长时间。不正确示范。图片来源:Material Design快速的完成动画使用户不必要长时间地等待动画结束。正确示范。图片来源:Material Design保持动画简短,因为用户将经常看到它们。保持动画持续时间在300毫秒以下。正确示范。图片来源:Material Design6. 清晰的动画一次性不要太多,因为当多个元素向不同的方向或交叉路径移动时,用户会感到困惑。不正确示范。图片来源:Material Design动画应该清晰、简洁和连贯。记住,对动画而言,少即是多。所以,我们应该只关注动画对用户的实际帮助。正确示范。图片来源:Material Design总结最重要的是,动画不是随机的。每一个操作背后都有目的。运动引导并专注于最重要的东西,这样你才不会迷失。无论你的app是有趣的,严肃的还是直白的,运用动画可以帮助你为用户提供一种清晰、快速和有用户粘性的体验。人性化设计。关注每一个细节是你成功使人机交互易于使用的关键。谢谢!翻译:谢尔鱼原文地址:http://babich.biz/functional-animation-in-ux-design-what-makes-a-good-transition/

    浏览:113 发布于:2017.11.10
  • UI入行“前规则”

    很多想入行UI设计行业的人需要了解的很多,其中有太多的问题,其实跟职业技能没大关系,重要且容易被忽略。所以特此开贴,普及一下就业的概念。    开贴一个月时间,给我留言的人,超过200人,首先非常感谢大家的关注,但是也发现了很多问题。因为加我的大多数是新人,所以主要问题都集中在行业以外,今天特意写一篇行业概念普及的文章,以供大家参考。     UI有很多问题,都跟本身的专业技能无关: 我遇到很多人提问都是:我要转行或者我要入行,首先该学什么? 我能给出的建议就是,先把那些知识都放一放,你首先应该了解这个行业。 我说个简单点的方法: 你可以去百度各种排行榜:设计网站,手持app,应用,游戏。你首先应该去了解这个行业里哪些产品是主流。你也可以去搜索QQ群以及论坛,进去跟别人沟通,了解一下工作类型和内容,待遇等等问题。 哪怕你的了解范畴再偏激,再稚嫩,起码你有了一个大致的印象,那么你就有了一个参考方向,也知道自己该往哪个方向去学习了。起码你会判断一下,自己是否对这些东西感兴趣。对吧? 你知道了产品,也就能查到这些产品都是什么企业开发的,去了解他们在行业中的地位,公司所在地理位置甚至待遇条件等等信息。因为就业是双方的选择,你不能因为你是新人,就谁给钱就跟谁走。因为每一个从业者都需要职业规划。稍后我们会详细聊一下什么是职业规划。 我甚至见过,职业技能还不错,但是对行业完全不了解的从业者。这类从业新人,还真不是少数。每一个人的提问,都表现出了对工作上的不满,领导的愤慨,客户的无理取闹等等信息。其实如果入行之前就能有个大概的了解,那么就不会有这么大的心理落差了。 所以我很强调兴趣,如果你对这些产品有兴趣,甚至是它的使用者,那么在接到工作的时候,你可以瞬间找到很多同类设计,大大提高你的工作效率,和收集资料的时间。 我认为第一重要的职业素养就是:自我进修的能力。 很多人的学习都是在工作中完成的,这是一种方法,但是这种方式效率不高。 设计分为两种:有限设计和无限设计 我们现实生活中的设计,必须都是有限设计,资金,市场定位,技术实现能力,硬件限制,时间,成本,人力,团队,等等,有非常多的限制,无法让设计达到自由。在这么多限制的情况下,工作就需要无比重视效率和可实现性。同时你学习的范畴也被限制了。 有没有那种,既不用为了赚钱糊口,又可以自由发挥的设计呢?有,就是业余时间。在个人的业余时间里,哪怕你每天只有半小时,这段时间没有任何限制,你可以自由创作。可以去适应各种不同风格,可以不用考虑他人意见,技术实现等等一些问题,去从事一个纯设计的自由时间。是最有效率的进步时间。它有两个作用:第一可以拓宽你的设计经验,第二不用多久你就会发现,它跟你的工作开始慢慢重叠,你的效率会越来越高。 经验其实就来自于你做过多少类型的设计,你完成设计的数量,这个事情的关键是在于你可以每天都有放空去尝试的习惯,而不是累死累活玩命的工作。这是完全不同的进修方式。 很多人不具备自我进修的能力,并不是因为不想,而是不知道怎么去自我进修,缺乏方向。因为今天的论题太大了,所以放一放,我们有机会再来聊自修问题。 勤奋不是没日没夜,蜡炬成灰泪始干,那种燃烧生命式的工作态度。 相反的,一个从业者,完成工作大概消耗掉4成个人精力体力就可以了。为什么这么说? 如果你从事一个工作两年还不能得心应手,觉得困难重重,一直无法放松。那么我能给你的建议,就是,你要不要考虑换一个工作?可能这份工作不太适合你。 敬业精神,不是玩命消耗体能,而是尽量提高工作效率,你只有有了更多的可以自由支配的时间,你进步的效率才会更快,敬业精神,是把自由时间用在提高个人能力上。能力的提高,才是效率提高的根本,而不是工作时间的长短。 有些人会反驳我说,不是我效率不够高,UI只是项目一部分,很多修改工作,以及加班时间,都是项目组和公司规章制度,流程造成的。那我只能说:你的先了解行业和企业,去选择一个适合自己的发挥和发展的环境。越是不规范的企业,效率越低,这是不争的事实。 有太多新人,不重视这个事情了。之前有说过,设计人员会做也需要会说,这里就不重复了。 说点新的,一个人能完成的工作很有限,一般从业2年,就会有机会带新人。向上的理解能力,平等的沟通能力,向下的沟通能力,都会需要。 向上的理解能力:不仅仅是听取,更重要的是需要实例,去不停的比对你与客户以及领导之间的词汇差异。同样一个词汇,每个人心里的度都不同。所以不能只靠语言沟通。 平等的沟通能力:与同级的人沟通,其实是最常有的,且目的最贴近工作的沟通模式。 向下的沟通能力:对待下级,你不仅仅需要交代清晰,在很多时候都需要鼓励,与明确标准。赏罚分明,才能提高全员效率。 沟通无论是学习还是工作,都是一个非常重要的能力。而且立场需要明确。 能够严格区分工作需求和个人需求是一个先决条件。请把那些大数据,用户体验,市场定位等大词汇放一放,如果你的工作不能首先满足你周围的几个人?你也满足不了那些大词汇。客观实际一点,去效率性的解决问题,因为UI只是项目很小一部分,你以UI来左右项目成败的可能性不高。还有很多机会可以修正。不要浪费时间在个人取舍上。 一个设计者的价值在哪里?从业多久?跟过多少项目?进过什么类型企业?职业技能多好?对行业多了解?个人思考模式成熟? 一个从业者必须要有个人的职业规划!这是对自己,对企业负责的一个职业态度。 我听过太多人抱怨工作不满意,策划上的不满意,程序技术的能力欠缺,老板的中二病等等。这些不满其实都来自于你对行业不了解。 首先你的知道企业类型,上市公司,研发公司,创业公司,外包公司。 你也的明白产品是怎么盈利的,你都不知道钱是怎么赚到你手里的,你凭什么可以做准确的职业规划?知道自己的发展空间以及有目的的提高自己的能力和待遇? 所以作为一个设计师,要了解行业企业,项目盈利方式,才能更有目的的参与相应的项目,积攒有效商业产品项目经验。 这个时候体现出了,沟通能力的优势了,沟通不仅仅在工作学习中有效,在就业人脉上的信息,是你晋升以及后路的一个保障。 这个时代,不再吃大锅饭,没有人一辈子就从事一种职业,特别是UI,当你对这个行业越来越了解,人脉积攒越来越广,能力与资源积攒越来越多。你到了一定年龄就一定会考虑,是不是要创业,独立,去做更多的事情。 而不是把一个职位,一口饭,当做理想。——————————————————————————————————————————————— 以上的都是给入行新人看的,都是概念,不是具体做法,因为交代太详细,会导致大家都按照一个逻辑去组织和完善。我特别鼓励新人多尝试,多犯错,这是成长的必经阶段,没人不走弯路,没人不浪费时间,这是客观事实。所以在心态上,也别想找什么捷径,你的环境条件越优越,你个人就越弱。这是一个冷暖自知的问题了。——————————————————————————————————————————————— 回答一下,完全无基础的新人提问:究竟应该是自学还是应该参加培训?首先我是做UI培训的,所以我的角度,实在是无法去评价职业培训机构的优劣。所以请不要在问我哪个培训机构好不好这种问题了。我能告诉你的事实就是,无论从哪里毕业,你都是行业新人,你的职业道路才刚刚开始。自学和培训其实各有优缺点:我们这一代人,其实都是自学的,因为没有那个环境,我从业的时候,国内别说培训机构了,连书籍和资料都没有,所以我走的路就是,我是一个画画的,去敲每一家公司的大门,问问,有没有需要绘画的工作,在工作当中摸爬滚打,一路折腾到现在。回想起来还有点小自豪。但是现在这个时代不一样了,因为中国行业发展近20年,市场需求与研发标准越来越规范,靠硬头皮去顶开职业大门这种事情,已经不太靠谱了。而且公司也不愿意花费人力去培养新人,新人带起来以后,就跳槽了。得不偿失。所以很多小企业是没有实习制度的,大型企业实习也不是对所有人都开放的。自学,现在网上资料多,项目参考也多,其实自学并不困难。但这也仅仅限制于最最底层的绘制而言。有了绘制能力,然后去找个工作,在工作中学习进步,也算是一条出路。但是工作这个事情是双向选择,不仅仅是企业需要人才,个人对企业的需求也很重要。找工作的基本原则:1学习环境(如果公司里有大神或者项目很牛叉,有机会在他人指导下工作,进步是很快的)2工作环境(UI的价值也在于你参与了什么项目,你是否喜欢这个项目,以及工作条件,人员环境,等等都适合,你才能心无牵挂的安心提高)3待遇(客观自我评价,你在什么阶段,就应该拿多少回报)自学确实是一个廉价的方法,但是自学的接触范围太狭窄,时间花费也是巨大的。参加培训机构:培训的优点有几个,第一学习环境,比起一个人在家,和一堆同学一起学习,这个氛围是自学无法获得的。有比较,有交流,有互相的督促,学习效率和兴趣都会高很多,毕竟一个人太寂寞,容易憋出病,呵呵。第二接触范围:UI的绘制能力是最最基础的职业需求,相对来说,设计能力,和设计表达能力,口语能力,硬件制约,项目流程等等,这些东西都不是自学能够接触的。第三工作机会:大多数培训机构都与商业公司保持良好的合作关系,人员输出相对便捷。第四可能没有人注意到:一般两年以后,你的同学校友,其实都在各个公司工作了,你的行业信息也会比较真实可靠。市面上培训太多了,说点大家应该注意和需要调整心态的问题吧。教师:说实话,没有几个大型公司高管会去当老师带新人的,有能力的当然去做项目了,第一大家不用期待你的老师有多牛叉,因为对于一个初学者来说,教师的能力只要足够教育新人就够了。一个培训机构好不好,还真不在于教师,而在于教学体系。就业:很多包就业的培训机构,其实这是一个伪命题,学员足够好,不用包就业,只要公布就业率就行了。速成:这是绝对反客观事实的宣传手段,如果速成那么容易,就不会有那么多岗位缺口了高新:确实现在UI行业有些人已经拿到月薪2w甚至超越很多概念设计师薪酬了,但是请注意,没有任何一个刚毕业或者就业新人,有这个机会,能力和薪酬是成正比的。绝难一步登天。所以总结下来:其实你培训和自学两者可能都需要,有一个学习环境,有老师带领,但依然需要你自己刻苦钻研职业技能。没有人生来就不走弯路,既然决定要走,就用跑的,才能加速前进。————————————————————————————————————————————————正常来讲新人的路:第一个要克服的其实是绘制障碍:这包括软件的应用,各种风格和效果的实现。没有人在有绘制障碍的时候可以高效的完成设计工作。第二是应该对行业足够熟悉:不仅仅是市场,项目,也包括企业信息。甚至是国内设计名人。对于团队合作,流程和规范都应该有一定的认识和理解。第三需要积攒个人独立设计:随着从业时间越久,因为个人喜好,情绪,逻辑等沉淀,你会越来越具有个人风格,这是个人品牌的积累。也是从服务别人,到别人需求你的一个转变过程。作者:铁木士 

    浏览:177 发布于:2017.11.10
  • UI需要什么样的美术能力(二)应用篇

    UI到底需要什么样的美术能力?上一次只聊了绘画的原理与概念,这次浅谈一下绘画原理的应用。上一讲以后很多人给我留言,有各种问法:1不会画画影响大么?2做ui一定要会画画么?3会画画就UI做的好么?等等的问题吧总结下来,我觉得有必要讲一下,绘画理论在设计中的实际用途。这样才方便大家判断,绘画在设计中占的比重:其实吧,绘画没在UI设计中占多大比重,这个就像麻雀虽小五脏俱全一样,占的比重小,但是挺重要,少了就是残疾,多了,也不可能因为你一个器官过大,就对你身体有绝对的好处。相反可能影响你的健康。凡事都有度嘛。除了网店那种商品展示之类的,UI里的基本没有什么是直接使用照片的,都需要重新设计和绘制。那么我们怎么才能以最少的视觉元素,让用户快速识别信息内容呢?这是一只鸟,显而易见,它身上什么才是主要信息?嘴?眼睛?翅膀?我画什么才能让人知道它是一只鸟呢?其实都不用,剪影是最低的信息辨识方式。你会发现大量的UI原件,信息内容都是剪影转化而来的,根据不同风格,剪影外轮廓也会有不同的变形。风格不在今天讨论内容里,所以先忽略变形这个问题。我们今天只聊最基础的绘画原理。这玩意,基本上就难以辨认了吧?不是所有的物品剪影就能区分的,还是需要细节的。其实这是个钱包。。。。。那么是什么让我们确认了这是个钱包么?我先来假定一个命题,我们今天来制作一个钱包的icon。通过完成过程来熟悉绘画知识的,应用和理解。我首先翻转了这个钱包,理由嘛:一般来讲,不是特殊需求,一个物品的方向都是右侧为主!为什么呢?因为一般光源方向都是左侧打出的。这其实不光是人的视觉习惯,也是因为市场上的通用设计,导致了这个经验式的设计习惯。这不是一个一定要遵守的规则,仅仅是常规参考而已。的根据实际情况来判断物品方向和光源问题。我们今天只单独做一个icon,所以没有整体UI设计的影响,不会考虑太多其他因素。我们来看下四个草稿:一:只有外轮廓,无法判定是什么二:有了一个扣具的轮廓,依然无法准确判断三:扣具上有了扣子,这回容易判断一点了四:多了缝线的细节所以信息简化这个事情,是有极限的。你能用最少的视觉内容,让用户分辨出信息,这是一个很理想的状态。但是仅仅是识别,还不能满足UI的需求。比如做成这种草图,能认出来,多数情况下是不能直接使用的。那么我们现在就来复杂化这个钱包,第一个需要建立的就是结构:我们生活在三维空间里,所以所有的物品都应该有厚度H(三维世界无非是多了一个z轴方向的纵深),哪怕是一张纸。一个面片,哪怕只有一像素的高光,和阴影,也能直接从空间中脱颖而出。这是一个概念,并不是一个必须要遵守的规则。特别是在UI设计里,很多风格比如扁平化,等等,都是可以忽略厚度,纯拼颜色和构图的。但是为了方便大家理解绘画逻辑。所以我们今天的样例,是有空间和结构概念的。ABCD:分辨增加了不同方向的厚度。首先不会选择B,B增加的厚度部分,是没有机会展示钱包内部的,直接封死了增加细节的范围。其他三个都ok,都可以继续延续设计细节。我选择了C,别问我为什么,个人喜好而已,因为这个命题没有其他icon与UI界面的透视方向等参考,所以,选择随意。一般来说整体UI的光源,透视方向应该统一。除非特殊需求和目的,或者资源限制。我们首先在结构上增加这个钱包的“牛皮”厚度得到一个这样的结果。但是。。。。。。如果任何物体都有厚度,那么它最少有两个部分,就是受光部分,和阴影部分。所以我也要为钱包的边框,调整受光和背光,以增加它的视觉厚度。这个时候,问题就出现了。按照正常的光源方向,我应该在最上面的边上看到高光。理论让应该是这种打光方式。但是我没有选,我选择了打中光,因为按照正常的左上方式打光,钱包的边线会不清晰。因为icon很多都很小,所以光源越复杂,有时候就越难辨析。我这里是主观的选择了打光方式。以避免放大缩小带来的麻烦(icon制作一定要考虑尺寸大小,视觉可辨析度的问题)这是样例,所以也就不会深究了。我们逐步的增加了这个钱包面片的厚度。1,纯面片,一般适合扁平化与无透视的设计。2,有一定厚度,但是没有形状复杂变形,这种结构多数都是为了打光考虑的,毕竟纯面片是没有打光机会的。3,在稍微写实一点的设计里,钱包的厚度,不会是纯平面,是弧面的。所以我们现在来增加它的弧面厚度。弧面周围都是阴影部分,高光都集中在最高处。所以选好范围直接内阴影就行了。给了两个高光,因为一个是弧面是钱包正面的高光,一个弧面是钱包侧面的高光,当你理解了钱包的形状。你就很容易确定阴影与高光位置。那么你就更容易体现结构。我们现在来加入牛皮扣:首先这个绝对不ok,扁平化的牛皮扣可以这么做,但是有透视的不行。因为牛皮扣是附着在钱包上的,它必须遵守钱包的结构,才能包裹住钱包。同样面片向上移动就有了厚度,复制缩小,就留出了牛皮扣的边框。当你理解了空间,结构,光原理,其实你就很容易的利用一个最初的形状去做加减法,大大增加了绘制效率。牛皮扣,也不可能是完全平面,所以我们给出了弧面的高光和阴影。一个圆形,复制,移动,等于扣子。我们下面来为钱包增加细节,既然是钱包,那总应该有点钱吧?我们做了两个面片,一个硬币,但是看起来总有点问题,问题在哪呢?层级!用阴影遮挡住钱币以后,钱币才看起来像是放在钱包里。UI中有很多层级问题,都是通过阴影遮挡达到的。先后级问题,需要透视,光,结构,等原理一起解决。请注意第一个钱币的阴影,与第二个修正之后的阴影,第二个更尊重钱包本身的结构,也就看起来更舒服。所以结构影响光,阴影,阴影也必须跟结构的透视关系是一致的。我随便在网上找一个牛皮材质,覆盖在钱包之上,因为明暗关系都已经做完了,所以看起来直接就变成牛皮钱包了。我只要更改材质的颜色,就可以更改钱包的颜色。那么下一步就是手绘修正了,把材质的范围,收到牛皮部分,调整高光大小增加细节。差距大么?恩,貌似很大,因为这是一个网上的效果图。感谢作者,省了我很多时间。总结一下:这一讲,从剪影,到面片,到空间结构。我们在按照结构原理,光原理,透视原理,不停的复杂化一个物品。我的目的不是要讲,怎么画一个东西好看,我的目的是希望大家能够通过这些简单原理,去分析你要做的东西,无论做加法还是减法,都需要尊重这些原理。UI不是一个绘画工作,了解绘画原理是为了,拆解我们的工作过程,合理化,规划设计流程。其实UI里很少涉及到你需要大量手绘的部分。都是基本形状的应用。所以,绘画原理也可以浅尝即止。不需要每个UI都拥有原画师级别的绘画能力。作者:铁木士

    浏览:134 发布于:2017.11.10
  • UI需要什么样的美术能力?(一)

    UI确实需要一定的手绘能力,但是跟画画是有很大不同的。很多人都私聊问我:学UI需不需要手绘能力。或者学UI需要什么绘画基础。 所以今天集体回答一下。我们先来看一下跟绘画有关系的行业:漫画:主要的不是绘画能力,更重分镜头,叙事能力,脚本编写能力,很多画的不好,但是依然存活很多年的漫画还真就不少,甚至可以证明,绘画能力的底线可以很低。游戏原画:虽然工作内容是在画画,但是游戏世界观多数都是架空世界观,历史以及文明的视觉搭建。所以对历史符号,架空世界观,产品类型,研发流程实现等行业知识更重要。影视:跟游戏差不多,但是你设计出来的东西的能实现。场景,道具,服装,你的对施工,材料,拍摄效果,后期等相关知识得有足够了解。简单说了,几个行业,我想说的是,那些看起来都是画画的工作,其实绘画只是表达手段。是最最基础的一个职业技能。但是并不是主要的职业需求。UI也一样,绘制能力是表达手段,基础需求,只是工作里的一小部分。在所有这些跟绘画有关系的行业里,绘画是为行业目的服务的,所以,所需要的美术基础也绝不相同。所以千万不要把跟绘画有关的行业一概而论,理解为艺术行业。跟绘画有关的行业多数都是商业行为,商业行为下,艺术这个词就褒贬不一了。在聊美术需求以前,我们先来聊一个跟绘画有密切关系的东西:素描多数想要学习绘画的人貌似第一个能了解到的绘画方式就是素描。。。。。。具象化超写实素描:像照相机一样的去画画,比照相机更主观,大量细节往往令人印象深刻。表现性素描:你大致分清楚绘画内容,但是表现素描里多参杂更多情感宣泄。抽象素描:你基本已经很难分清楚绘画内容了,抽象素描更倾向于情绪表达。其他很多素描形式就不一一列举了。我们做ui需要这种绘画能力么?肯定不是!我们回头来看一下,为什么会有素描这种绘画形式?你能找到的所有的历史名画,都有一个共同的特性:就是都有颜色。例如这张《奥菲利亚》在普通人的印象里,画家都是很牛逼的无敌存在,画一张这样的画,你别管他花多久,都是一次搞定!其实不是的!不是所有人,都直接有能力在大脑中完成创作,直接绘画的。任何你看到的一张完整作品背后,都有可能有十几张,几十张,上百张的小稿。素描是一种最节省资源的研习方式:因为你可以排除掉颜色的干扰,甚至排除掉,构图,等一系列的多余因素,去有目的的研习作品元素。比如纯结构:比如纯材质:比如人物景物记录:素描的存在,其实是绘画的一个过程。因为你可以不用张张精品的去绘制完成。只需要明确你的目的,去快速熟悉,比对,选择。聊到这里,主要目的是确立一个观念:作为UI设计人员,请把绘画能力当做一种辅助研习的手段,不要以其他行业绘画标准,去要求自己学习绘画,那会本末倒置,浪费大量的时间和精力。也确实没啥必要性。除非你打算转行,或者个人兴趣使然。回到正式话题:UI需要哪些绘画基础知识?结构:物体占据空间的方式。一般设计行业的素描都是结构素描。结构的重要性不言而喻。为什么素描要从几何图形画起?原因就是够简单。当你去处理一个复杂图形的时候,把它拆解成简单的几何图形最容易理解,和控制。我们是在二维世界里,去表现三维世界的空间,所以理解了结构,就能理解很多其他东西。比如光原理:光是一个永远的存在,影响光的因素,其实就是结构,其次是材质对光的反射比例。肯定也需要学习和了解透视原理因为今天这部分不是讲解美术基础,所以只能做简单介绍常规透视:基础透视原理平行透视:其实是平面设计行业用的最多的透视方式,不用考虑灭点形变之类的因素。视觉透视:人的视觉是有生理误差了,所以感官上来讲,很多透视都做了相应的修改,以适应人眼的观看方式。变形透视:特殊目的下,会使用变形透视,比如,你的手机其实并不是水平于你的眼睛的。很多时候都会有倾斜。ui设计的时候,根据目的也会做相应的调整。色彩原理:色彩是一个可以单独拿出来说事的知识:色彩是视觉引导,情绪引导,观感控制的一个重要手段。很多人都觉得色彩是很难掌握的一个能力,其实也不用太担心,因为有大量的现成的色彩构成,与色表等可以参考。在不能主观去使用的时候,至少学会收集色表,和根据需求使用它们。构图:因为无论是绘画还是做ui,我们看到的内容都是有边界的既然有边界,就要安排主要内容的位置。对于影视产品来说,就是镜头感。对于UI来说,就是观看舒适度,和操作舒适度。所以如果一个ui有绘画能力,有几个好处。第一:就是你可以短时间,高效率的方式,快速尝试设计和比对。大大提高工作效率第二:就是你绘画越熟练,你真的时工作效率越高。因为你对透视,结构,光原理,光色,的熟练,可以让你快速拆解你眼睛所见的一切事物,然后去根据需求改变和重新组合它们。第三:很多时候手绘是一种不可替代的存在。我重新审视一下绘画知识和UI的关系:结构:没有任何东西是没有厚度的,哪怕是扁平化设计,很多也都有厚度透视:结构的变形一定会在透视的框架下!光原理:能够理解结构,就能够自由控制光源。构图:其实是UI工作使用最频繁的原理,布局永远是整体控制的关键。色彩原理:无处不在,无法忽略。无论你做任何绘画练习,请一定要明确你绘画的目的。画画这个事情其实就是一个量的积累,哪怕你没有因为绘画而提高设计能力,但是长期保持绘画习惯,绝对大大提高你的设计效率是真的。其实就国内各行各业来看,其实没有哪个职位是工作内容范定的特别精准的。特别是一些小公司。除了UI本职工作以外,动画,特效,场景元件,角色切片,也都有可能遇到。手绘能力可以让UI职位锦上添花,拥有更强的适应力,更高的工作效率。也有更多横向扩展职业能力的机会。所以推荐多少都应该具备一些手绘能力。以及相关的绘画知识。---------------------------------------------------------------------------------------------------------------------------------------------------最后我想说的就是,以绘画的方法去 【理解】 视觉上的世界是一个很好的方式,也可以去尝试绘画,但是请明确你做这个事情的目的。不要为了画画而画画。---------------------------------------------------------------------------------------------------------------------------------------------------我其实更注重意识和态度问题,因为从业太久了,只有刚入行的时候才特别关心,基础,标准,等一些常规问题,工作越久,越对职业素养,设计理念,处事方针等这种思维逻辑上的东西无比重视。这也导致了我写的文章,比较重观念。作者:铁木士

    浏览:140 发布于:2017.11.10
  • UI图标:教你绘制一枚幻彩绚丽的时钟!

    编者按:今天这个教程很适合学习临摹,作者@DearSalt 教同学同学们分解图标,观察组成部分以及分层制作,专业范儿十足,绝对是新手快速上道的最贴身教程 >>>这几天突然对UI很感兴趣,于是就做了这个小时钟,整体效果很绚丽,图层样式中的参数我已经给出,仅供大家参考,邵飞老师说得对“多试参数,没有人可以一步到位,多花时间去调试不同的参数,可以帮助提高设计经验,细节靠折腾,而不是靠大量效果”我现在就是这样做的,虽然有时候会花很多时间,但真的是会积累经验的,期待大家的作品!一、首先我们来分解这个图标,观察其各个组成部分,然后我们分层制作。二、接下来我们先制作“时钟底座”。这个图层看起来很复杂,实际上整个效果只用了一个图层便能搞定,以下截图的参数仅供参考,因为你新建圆的大小将会影响这些参数数值,具体大家自行测试吧,新建画布,拖入背景素材,使用椭圆工具建立一个椭圆,双击此图层为其添加图层样式。三、时钟底座的效果大家已经看到了吧,下面我们来制作表盘底座。它同样也是一个图层完成的,新建图层,在画布上建立一个小一点的正圆形并将此层放在时钟底座图层的上方,双击添加图层样式。四、表盘的制作。这一步像表盘上的数字、时针、分针、秒针这些制作起来都很容易,时针分针的颜色数值为#724042,图层模式为叠加,秒针的颜色数值为#f62020,特别注意的是这三个针的阴影方向,光源在左上角在这里我只贴出金属帽的图层样式,以供大家参考五、最后我们来制作高光,整个高光图层是由两部分组成。最终效果:

    浏览:73 发布于:2017.11.09
  • 用户最讨厌的3种界面交互设计

    以下内容由Mockplus团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具。注意:本文中提到的设计方法在不同设计场景带来的效果是不一样的,并不能说是好的或不好的。 这意味着,如果你正确执行,它们都具有很大的潜力。1. 弹窗也许你有过这种经历。你打开一个新的网页,阅读里面的内容,当你看到一半的时候,突然间弹出一个巨大的覆盖区,要求你填写个人电子邮件地址。在大多数情况下,你的即时反应将是关闭覆盖层,或者关闭整个页面。这么多网站使用这种设计的原因是很明显的。然而,这种设计对用户产生了巨大的负面影响——它要求用户停止做他们正在做的事情(对他们来说是重要的),并将注意力集中在完全与自己本意无关的活动上(对你来说是重要的)。最好是在请求任何东西之前允许用户先完成当前的活动(例如阅读内容或了解自己想要的东西)。给他们一个机会来决定他们是否想自己做某事而不是强迫他们去做。2. 无限滚动页面无限滚动这种设计方法,允许用户浏览大量的内容,在页面上看不到底线。当你向下滚动时,这种设计可以保持刷新页面。虽然听起来很不错,但该设计方式并不是一个适合所有网站或应用程序的万能解决方案。该设计的主要缺点基本上也是其主要优点 – 它在视觉上没有底线。当用户访问页面中的某一处时,他们无法先将其位置加入书签,然后过段时间再回到标记处。如果他们离开网页,他们将失去所有的已有进程,必须再次向下滚动才能回到同一个地方。这种方式无法确定用户原来的滚动位置,不仅会让用户感到烦扰或困惑,而且还会损害整体用户体验。在2012年,Etsy花了很多时间来实现一个无限的滚动界面,他发现滚动出的新界面并没有像分页一样表现出色。尽管购买用户数量大致相同,但用户的参与度却下降了(人们使用搜索的热度下降)。正如Dmitry Fadeyev指出:“人们想要回到搜索结果列表去查看他们刚刚看到的东西,把这些搜索出的列表和他们在其他地方发现的东西进行比较。”无限滚动不仅打破了这种对比, 它还使用户很难上下移动列表, 尤其是当你在另一刻返回页面时,你会发现页面又回到了顶部, 被迫你再次向下滚动列表, 等待加载的结果。在这种情况下,无限滚动界面实际上比分页的要慢。在将无限滚动加入设计之前,设计师应该权衡无限滚动的优缺点。选择取决于设计的场景以及内容的传递方式。 总的来说,无限滚动对于Twitter / Instagram这样的用户来说是非常有用的,用户在不用寻找任何东西的情况下就会不断获取流动的数据流。3. 推送通知你有没有注意到你每天从各种应用程序收到的通知和警告信息的数量? 这其中有多少通知是你真正关心的?每天,用户都被毫无用处的通知狂轰滥炸,这会让用户从日常活动中分散精力,简直让人太烦了。令人厌烦的推送通知是人们卸载手机应用程序的首要原因(根据调查数据,占有71%)。当用户开始使用你的应用程序时,如果你的推送通知给用户带来有效价值,他们是不介意的,这意味着推送有时是有用的,并且非常有趣。令人受激励、感到愉悦的个性化内容是推送有用通知的一个重要组成部分。推送通知是一种特权,因为用户对你信任,才允许你直接向其发送消息。但你不得滥用该权限。设计对用户有用的、相关的、及时的通知是非常重要的。推送通知可以成为企业与用户直接沟通的强大工具,并在适当的时间和地点传递正确的信息,以促进用户参与。原文地址:uxplanet译文地址:Mockplus作者:Nick Babich译者:jongde

    浏览:60 发布于:2017.11.09
  • 阿里巴巴内部资料 | 交互设计全档案

    引言一直以来,交互设计师都是一个受到广泛质疑的岗位,很多人不了解交互设计师的价值,更直接的说,我们大多数的交互设计师没有表现出足够的、令人信服的专业度。大约五年前选择了这个职业,一路走来,质疑过、探讨过,也争辩过。和很多交互设计师一样,我也有过盲目自信和茫然失措,历经时间的鞭挞后,渐渐的我对这份工作、这个专业,有了一些个人的感悟……从我的理解来看,100分的顶尖交互设计师们通常天赋异禀、特立独行。但75分的合格交互设计师们却有迹可循,完全可以看作是流水线生产的标准件,今天,我和大家聊的就是这些75分交互设计师的专业度体现。·交互设计师的基本素质首先,谈谈我个人对交互设计师基本素质的看法。从我个人的理解来看,可以简单归纳为九字诀:“听、看、想、说、磨、做、验、写、讲”。1)听:做一个交互设计师,最重要的一点就是要懂得倾听(这里蕴藏了一个隐晦的性格属性:谦虚!)。通常情况下,我们不是用户,所以很难100%代表用户,更左右不了老板,所以我们首先要有听的本事,把来自用户的、老板的、PD的、视觉的、前端的、开发的、测试的、市场的、业界的等各方面的声音都听过来,听进去。2)看:99%的情况下,交互不是一蹴而就的创造工作,它是站在前人肩膀上不断迭代更新的行为过程。我这里指的“看”是要求设计师能博览、能泛猎,看到好的,见过差的,什么都略懂,交互才能变得很美……3)想:交互是思考的输出产物和表现形式。当设计师将之前听到的和看到的内容在头脑中加以整理、分析,经过发散的创造性碰撞和严谨的逻辑论证后,逐渐得到了相对靠谱的交互产物。这个思索分析的过程贯穿于交互设计工作流程的每个环节。4)说:一个能说会道的人不一定是一个优秀的交互设计师,但一个优秀的交互设计师必然是一个善于准确表达自己想法和观点的人。在这一点上,我坚持交互是一门分享的学科,需要的是开放的性格和良好的沟通技巧。5)磨:耐心、技巧、热情的综合表现。在一个项目的进程中,不可避免的会面临很多的挑战,优秀的交互设计师善于发挥“磨”的精神,他们怀揣对交互专业的无比热情,以无所不用其极的技巧,耐心的缠死一个又一个质疑方,最终让大家认同并帮助推动设计的实现。通常来说,一个优秀的交互设计师会是一个优秀的Idea推销员。6)做:交互设计师专业度的核心表现。俗语说得好,是骡子是马,牵出来遛遛。对于交互设计师来说,之前的环节做得再好、再完美,也只是停留在设计师自己的脑子里,游荡于听众们的耳膜间。如果理论落实不到实际,那所有的想法都只是空中楼阁,你之前所有的努力都只是在佐证你的空泛和不切实际。所以我们不仅要能“做”,更要“做”得漂亮,“做”得完美!我一直都是这样认为:“做”决定了一个交互设计师是不是靠谱,决定了一个交互设计师的高度,是一个交互设计师最根本的专业素质。7)验:用户体验设计,最终是要落实到用户的身上的。客观中立的验证、分析、评估能力是一个优秀交互设计师的重要素质。无论个人还是团队,设计的成果都需要通过精准的测试才能算得上合乎标准,此时,一颗平常心和一双敏锐的眼睛是设计师最需要的。8)写:分析、归纳和总结能力的综合表现。一个项目,无论成功还是失败,总是有很多地方值得设计师本人或后来人借鉴。交互设计之路不是一座苛求零失误的独木桥,但绝对是一条要求零“重复”失误的单行线。评价一个设计师的专业度,很重要的一环就是看他能不能多犯前人从来没有犯过的错误,并能有效总结给后来人。于是,他就成了大家,路就这样被趟了出来……9)讲:演讲能力。这里所指的是在项目后期进行的交流分享。一个专业的交互设计师会站在宏观的高度上,以平和的心态同他人沟通,验证自己先前设计的合理性、全面性和科学性,更好的提高自己的专业能力,为今后的交互设计做好准备。·交互专业度的具象化表现刚才讲了很多,但总体来说还是偏理论,还是让人摸不着头脑,虚幻的概念最大的优势在于它的颠簸不破和四平八稳,谁也揪不住它的小辫子。但这不是我的风格,更不是我写这篇文章的初衷,我希望的是抛砖引玉,给大家带来一些真正意义上能直接使用的东西。所以,接下来,我们来些“干货”,玩点简单粗暴的…… 根据阿里巴巴目前的产品开发流程,交互设计是大环节中的一个小点,抛开杂乱的干扰信息,单纯考量交互设计师在过程中的参与度,我们就能得到一个理想化的交互设计行为流:流程没什么好讲的,更没什么好争辩的,无非也就是增加一个、减少一个、偷换概念、细分归纳之类的忽悠。我这里想和大家分享的是流程中每个环节的专业输出物,我有一个激进的想法:如果某人能精准的完成某些公认的标准化输出物,那他99%可以被称为是一个“专业”的75分交互设计师了,剩下的1%,也许是拼RP……这里,我先简单交代一下即将涉及到的流程节点、对应输出物的图形色块的代表含义。1)流程环节说明:2)流程环节各输出物说明(如图1.5):在我看来,一个专业的交互设计师,在一个理想化产品设计的过程中,有一些是属于必须的输出物,有一些属于最好有(推荐)的输出物,还有一些属于可有可无的输出物。同时,根据项目的实际情况和参与角色的分工情况,存在一些交互设计师可能需要负责的输出物,具体细节我将在下面逐一介绍。1)需求获取阶段: 此阶段通常来说会由PD等外部资源发起,输出物主要是FRD文档和时间计划文档,用以描述问题、提出初步目标,假想可能的解决方案、预估资源并梳理时间计划等。当然,对于从UED内部发起的项目,这两部分的输出也可以由交互设计师完成,属于可能责任输出物;2)需求分析阶段: 历史数据的关注和分析阶段,基于项目本身,要针对竞争对手、行业现状等做详尽的收集和分析,其中的关键考核点是要做必要的头脑风暴,获取发散而全面的信息集合。在此阶段,竞争分析报告和头脑风暴输出物是交互设计师专业度的重要表现。3)用户访谈阶段:对于一些条件允许的项目,我们建议能在项目初期寻求一些用户的信息,定义一些用户的属性,这些对于之后的交互设计都会是坚实的基础。一个高专业度的交互设计师甚至会主动介入访谈问卷的设定工作,客观的参与调研报告输出的全过程。4)需求修正阶段: 专业的交互设计师通常不甘于沦为一个纯粹的资源,抗拒被动的接受命令。我们之前经历的需求分析和用户访谈都是为掌控主动权而做的准备。如今,我们有理有据,应该主动出击,和需求方讨论研究需求的合理性、可行性,明确最终的修正目标,并对达成目标所涉及的重点突破点有理性的分析判断,筛选出各设计点的优先级。5)设计草稿阶段项目目标和设计方向确定下来后,我们将进入核心的设计环节。作为交互设计师的“杀手锏”,交互流程和线框草图当然一个都不能少,但此时我更想强调一项辅助性质的调研分析工作。从交互的角度来看,在大流程大框架敲定的情况下,交互设计师通常会投入更多的精力在一些核心的设计点,也就是我们在需求修正阶段确认的设计重点。此时,专业的设计师绝对不会拍脑袋设计,更不会想当然出方案,而是会针对这些核心点做业界调研和分析,为自己即将进行的设计寻求一个足够宽广厚实的肩膀。6)设计细化阶段第一阶段的设计工作将在此阶段性输出。我们回顾一下,截止此时的设计产物有:用户调研报告、FRD确认文档、交互流程、线框草图、核心设计调研分析、核心设计详细说明、交互流程整体说明等。基本上,一个交互设计师的专业度,已经可以根据此时的输出物数量、质量看出个大概齐了。7)专家评审阶段一个专业的交互设计师,要谦虚。此刻,我们进入小范围专家评审的阶段了,三个臭皮匠还顶一个诸葛亮呢,更何况是参与评审的专家呢。此时设计师的专业度就体现在“听”、“说”和“想”这三诀上,耐心的做好评审记录,有理有据的同专家们进行专业沟通,并确认最终的结论和方向。8)设计优化阶段经历了专家团的考验,又该抖擞精神重新上路了,没什么好说的,把过程做好了,你的专业度也就到位了。设计优化阶段的投入度和产出将直接影响到后续Demo及测试的效果,和最终设计也息息相关,各位交互设计师们,千万别打瞌睡了!9)仿真Demo开发阶段终于到了仿真Demo的模型化阶段啦,这时尽管并没有直接的交互输出物,但还是需要交互设计师用百分百的挑刺精神,协助视觉和前端精准的达成我们之前的设计,严格保证最佳的输出效果。10)测试验证阶段仿真Demo出来之后,将进入最后的测试验证阶段,根据项目的实际情况,可能是QA测试,也可能是用户测试,总之,这个环节能帮助设计师最后把关设计的合理性,专业如你,一定要亲自跟进测试并给出最终的评估报告,哪些点是前期没有考虑周全的?那些点是成功的?哪些点是必须立即改进的?哪些点能以后再说?哪些……11)完成设计阶段最后的设计阶段,根据之前的测试验证评估报告,交互设计师要对所有之前的输出做一次严格的检查和修正,完成最后的输出。12)开发上线阶段盯紧视觉设计师和前端工程师吧,最关键的时候终于到了,经历了那么多纷繁复杂的环节,我们等的就是上线的这一瞬间。当然,千万别忘了后续的跟踪和分析,这能为你的专业度加分不少哦!·总结和展望综上所述,我们已经整理出来了体现交互设计师专业度的过程输出物了,总结一下:以75分交互设计师的标准来看,我们的专业度能通过以下的关键输出物衡量:FRD目标确认文档、竞争分析报告、头脑风暴产出物、项目初期用户调研报告、核心设计点调研及分析报告、专家评审报告和评估报告、原型测试报告、交互流程图及详细说明文档、页面线框图、核心设计点说明文档和最后的跟踪分析报告。基本上,所有的输出物都是反复易稿的结果,都是细碎过程的迭代输出,都饱含了设计师辛勤的工作投入。所有有梦想的交互设计师们,请正确的审视这些输出物,珍惜自己的付出,它们不光是单板的形式教条,它们更是证明自己专业度最有利的武器!被很多同学都质疑过:那么多的输出物,平时做需求怎么可能全部做出来?每当此时,我的回答都是一样的:“是的,找借口总是很容易的。大家的确都很忙碌,按季度来说,基本上每个人都会经手大大小小几十个需求,但我们真的忙碌到输出一个高质量设计的精力都没有了吗?还是我们打心里就本着做交互、混日子的想法呢?”不是不能,是不愿!那才是交互设计这个职业最可悲之处……作者:刘丽娟Liz本文转载自阿里UED团队。

    浏览:62 发布于:2017.11.09
  • 人机交互设计 (UX) 的三个半原则!

    一些设计的基本原则往往是通用的、甚至可以说放之四海皆准的,例如优先级、一致性、界面的隐喻等等,好的设计都需要考虑到这些问题,甚至再更广的范围内也同样适用,而不仅仅是交互设计范畴。一个设计师&产品经理应该在决策时下意识的、本能的考虑这些原则。就像以前很多零售业者能够一抓准,你要一斤糖,他抓起来就是一斤,不多不少,靠的就是不断的练习+思考,最后将其变成了自己的本能。越是通用的标准,往往也就离细节越远,需要结合界面的具体部分(信息架构、导航、交互、语词、视觉等)和产品的具体领域(例如音乐播放器、阅读软件等)来看。往往说起来总比做起来容易,是不是纸上谈兵,就要在设计中具体去把握了。这里抛砖引玉的列出让我印象最深刻的3个半原则:1. 优先级苹果的设计为什么让我们觉得精彩?为什么我们父母级的用户都能够很快入手?我曾经观察我的父母试用iPad,他们能够很快开始尝试操作,而不像面对很多其他的数码产品时那样无从入手。其中的一个重要原因是苹果在处理设计的优先级方面非常成功。当我在看iPhone非常细节的设计时,常常非常佩服他们的设计师&PM能够如此有魄力的砍掉功能和界面元素,从而让重点的变的更重点,让需要突出的变的更突出。一个基本的假设:如同经济学里资源的稀缺性假设一样,用户的认知资源和系统的界面资源都是稀缺的。当你把所有重要的东西都摆上桌面,就没有重要的东西了。用户的认知空间和认知能力有限,当他们面前有1条路可以选择时,事情会变的很简单,但是当他们面临3条路时,往往会踌躇不前。尽管我们难以量化的说用户有多少精力在这种抉择中损耗掉了,但这种损失是显而易见的。看看Android原生系统的设计,用户想要运行一个应用时,有几条路?设计中对优先级的把握就是要让我们能够将真正重要的功能/内容/元素放到突出的位置,以最多的界面资源去展示它们,而将次要的部分,弱化、隐藏起来,再次的部分,则索性砍掉。具体来说:a. 用户优先级把握核心用户,为产品自己真正的用户群做设计,不要天真的认为你的设计可以满足所有用户。b. 功能优先级把握核心需求,亮点功能往往两三个就足够多了。功能航母往往容易沉没(看看为何现代战争中巨型战列舰都逐渐被淘汰了),Nokia VS Apple也是这样。有一次Tina(创新工场的COO)的一句话很受教,她说她以前在(微软或IBM)做Marketing时,给客户讲产品,往往一次只讲三个Feature,即使这个产品或版本有再多的亮点。设计或者开发产品时我们总是想尽可能的将好东西放进去,但是打动客户/用户的点却往往只在三个之内。c. 内容/信息优先级将内容分成不同的层次,核心内容需要明显的突出出来。报纸上的标题、摘要、征文等层次清晰、泾渭分明也是这个原因。d. 交互优先级主要的交互路径需要让用户以最小的精神代价就能走的通,尽量减少这条路上的分支。为此,一些时候不得不将一些次要的交互路径更含蓄的隐藏起来。最常用的可能是“高级设置”这样的形式。e. 视觉优先级视觉更需要层次,重点的视觉元素需要让用户一眼扫过去就能看到,而次要的信息则要拉开距离,通过留白、颜色对比等等手段。一个例子是做PPT,当我们看到好的PPT时,总发现里面有大量的空间、有灰色的文字,这样将重点突出出来,而很多人在做PPT时则会直接COPY大段文字,直接用粗体、黑色,满屏幕只见到黑色的一片。和优先级这个原则互通的概念还有简化(简化的目的实际上就是突出重点)、减法原则等等。2 一致性一致性可以让界面更容易被预知,可以降低用户的学习成本等等。一致性几乎是设计中最普遍的一条原则,也是缺乏设计经验的团队最容易犯的错误。做可用性评估时,几乎每次都能找出一堆的不一致问题。通常需要注意一致性的地方包括:a. 交互逻辑的一致性完成同样功能,交互逻辑是不是一样的,流程是不是相似的,背后就好像有一样的数学模型似的。b. 元素的一致性同样的交互逻辑,使用的控件等是否是一致的,例如这里用按钮来执行动作,在那边变成了图标,另一个地方又是链接。c. 语词的一致性界面上使用的语言,在描述同一个事物时是否是一致的。d. 信息架构的一致性信息的组织层次方面是否是一致的,导航是否是一致的,等等。d. 视觉的一致性界面的图标、颜色、区域的分隔、指向等方面是否是一致的。通常一致性还有另一个问题,就是在什么时候做出权衡取舍。有时强制的一致性会引发其他问题,例如用户在执行某些任务时效率会降低,会导致界面的复杂度增加等等。这是我们不得不做出权衡,决定是保持一致性,还是采用一个异常的但又合理的设计。以前碰到的例子是,需要说服做开发和测试的同事们在某些特殊的地方牺牲一致性来得到更好的设计。他们会很在意一致性,这几乎是设计师最容易推动的原则。3. 感觉可用性工程的教科书里,往往会有“主观满意度”的内容(实际上这也是ISO9241的内容之一),但是却也往往语焉不详,因为主观的问题往往难以通过工程/经验的方法来解决。但是我们还是可以找出几个明显的能够在设计中考虑到的点,来照顾用户的感觉。例如以下几点:a. 快的感觉天下武功,无间不摧,唯快不破。IBM做测试的同事会拿秒表(当然他们似乎还有更好的工具)来掐时间测试Performance,如果某个版本的Case有Performance的明显下降,会是个大事故。我们通常还可以在设计上有很多处理来产生快的感觉,例如先让界面显示出结果,同时后台再去做操作(例如存储等耗时间的操作),避免用户的等待(当然最痛苦的是被工程师告知界面上的显示效率就已经低到需要用户等待了)。曾经看过一个研究,在进度条的显示上,越来越快的进度条最能够让用户感觉到快,而不是那些完全真实反应内部进度的进度条(真实的情况可能是越来越慢)。b. 安全的感觉用户敢在看起来很“山寨”的界面上输入自己的密码么?用户需要经常自己保存么?Google的Gmail是个好例子,而MS Windows的升级后自动重启是个坏例子,某一次我同时遇到了它们:Windows XP打完某些补丁后,会要求重新启动系统,这时你可以选择立刻重启,或者点击一个按钮,等待若干时间后再提醒,如果什么都不做,它会在一小短时间内自动重启。当我正在工作时,显然不愿意立刻重启系统,于是我选择了稍后提醒,然后又工作了很久,在Gmail里写了一封邮件。这时刚好有人来找我讨论问题,等回到电脑前后,发现它自动重启了….. @!#!#!$,没有保存的工作都丢失了。但是好在Gmail会自动保存我已经写过的邮件内容,让人稍稍安心。知乎的文本编辑框也是一个好例子。c. 其他感觉例如界面语言是否让用户感觉到尊重等等。一个小例子,新浪微博的客户端里,用户发完微博后,有时因为系统的原因(发送按钮监听到了两次事件,或者别的什么原因),微博内容可能会在用户不知情的情况下“试图”重复发送,这时会弹出一个提示框,告诉用户说“不要太贪心哦….balbalba” 用户多委屈…3.5 临界点临界点就是压倒大象的最后一根稻草。是什么让用户决定注册产品开始使用的?往往就是多动那么一下手指、多学习思考一小下,用户就从门口溜走了。临界点往往是多种因素综合的作用,和用户的主观心理(感觉)和客观因素(绩效)等有关系,姑且作为半个原则来看。常常惊讶于一些产品(特别是移动产品)能够在用户看到的第一个界面,放一个大大的登陆或者注册框在上面,任何好东西都没给用户看到,就让用户先来注册。以前在一个设计中,给一个公司的同事讲过一个故事:如果有一天你在街上找人问路,那人说“给我5毛我才能告诉你”,尽管你不情愿但还是给了他5毛,他拿了钱告诉你说“经过查询我发现自己不知道”。在实际的设计中,用户付出的并不仅仅是金钱的费用,他们的精力通常是成本,这时用户就会去盘算到底值不值得来进行下一步的操作。听曾在Google工作的同事讲过这样一个例子:Google的右边栏广告以前点击率总是上不去,后来做了一个改动,这些广告点击率立刻上升了很多。这个改动就是:让这些广告的区域离搜索结果区域的距离更近一点……Kik这个产品的成功,和他们不动声色的利用用户通讯录来帮用户快速匹配好友有很大的关系。姑且无论这样做是否合乎道德和法律,他们的确帮助用户跨越了临界点。试想如果它需要让用户一个个自己通过昵称、帐号来添加好友,还能有今天的成果么?一个注册的流程、一个对话框、一次点击… 这些小地方就很有可能会是用户的临界点,设计的价值往往也就在这些地方,小改动往往会有大变化。通常我们要特别注意优先级高的任务/界面里,是否会存在临界点的问题。如果优先级最高的任务里,用户难以跨越我们的门槛,就很难保证产品的成功。这是一个细腻的工作,有时作为设计师&产品经理,你可能不得不为了一个小细节和开发团队讨论/争取很久,因为别人会觉得这个细节不值得投入工作量,但你知道这可能会决定能否帮助用户跨越他们的临界点。如果你认为值得就坚持吧。作者: 马力转自:http://www.zhihu.com/question/19557472/answer/12241609

    浏览:61 发布于:2017.11.09
  • 交互设计:如何设计更好用更舒适的触控手势?

    引言:我们生活在一个人机互动频繁,由设备驱动的世界中。随着触摸屏逐渐成为移动设备的标配,多点触控手势的广泛应用,让我们与手机、平板电脑甚至是笔记本电脑之间建立起了一种更宽广的联系方式。我们通过模拟真实世界的手势与屏幕上的各种元素进行互动,使许多曾经不曾想或者不敢想的人机交互方式变成了现实,同时手势操作的应用降低了人与物理设备之间的沟通的门槛。图0. 婴儿几乎无困难的通过屏幕玩游戏我家那位小P孩,不到2岁就已经能够很自然轻松解锁ipad、翻页找到他喜欢玩的熊猫餐厅,接着熟练地在各种食材选折他喜欢的,制作一份美味的虚拟美食;而我们也乐于买各种大屏手机和平板电脑送给我们的长辈。移动设备及手势交互方式给我们带来革命性体验和便捷,移动的触控时代早已到来,您是否也与时俱进了呢?值得我们每一位设计师反思。一、什么是触控手势触控手势是自然用户界面(NUI)的一种表现形式。自然用户界面(Naturaluserinterface,NUI)是指一类无形的用户界面。NUI则只需要人们以最自然的交流方式(如语言和文字)与机器互动。直观的说,使用NUI的设备不需要键盘或鼠标。特别是触控技术将使人机交互变得更加自然直观,更为人性化。您的手机、平板电脑还有笔记本拥有识别多点触控输入的功能来帮助你实现对其广泛的运用。这种输入方式帮助我们实现与屏幕内容的交互,而模仿真实中的操作手势可以降低我们对操作屏幕对象的认知障碍。在PC时代,我们需要他人或者一个说明教程去教会我们怎么使用鼠标,移动屏幕的光标,而这些在现实世界里几乎找不到可相映射的东西,然后学习怎么双击打开一个文件,按住一个文件不放,把它拖动到文件夹里面。触控手势带来的是自然用户界面,支持触控的移动设备能够自然直观的被所有年龄层,不同技能水平的人所使用。使用Multi-Touch多点触控式接口技术,取代目前所使用的键盘(按键)、鼠标,将进一步体现出人性化操控接口的未来趋势。图1.电容式触摸屏结构原理图试想一下在那些老套的用户界面里,需要你把鼠标悬停或者邮件点击目标上才能获得更多详细的信息,而这些在手机设备上将不再起作用。如何摆脱这种惯用的设计呢?答案就是,创建移动先行体验。二、触控手势的的使用情景(移动的情景)移动情景指的是用户使用时的环境和状态——也就是任何可以影响用户与设备进行交互的内容。由于这些情境持续而快速地变化,对移动设备而言就显得尤为重要。我们要考虑用户分心、多任务、手势操作、低电量条件和糟糕的连接条件等复杂环境下的通用设计。图2.移动中的互动语境(出处:NadavSavio|GiantAntDesign)各种移动环境下会影响到用户使用触屏设备完成任务的效率和准确度的因素有:– 移动情景下,注意力容易被分散(如交谈,观察周围环境等)– 移动情景下,操作手机的时间碎片化(各种事情打断)– 移动情景下,任务容易被中断(意外情况影响)– 移动情景下,肢体可能被其他物体被占用(如遛狗、拎包等)– 移动情景下,噪音分散注意力(车水马龙、人声鼎沸的路边)三、触控手势的基本操作图3.钢铁侠系列电影中的全息触控交互所谓自然手势就是在真实物理世界中存在或演绎而来的手势。例如上下滑动滚动列表,滑动以平移等。这类手势是自然的,不需要或很少需要用户去学习的。– 长按以查看更多操作(现在有了3DTouch,同长按操作相比,最大区分是需要是有一定的按压力度)– 点击执行主操作– 滑动以平移– 轻扫以选定,并进行命令操作– 收缩和拉伸以缩放– 转动以旋转– 边缘轻扫以使用系统命令四、好用的手势是怎样的?首先我们来看看多点触控的优缺点。那么什么是好用的手势呢?好用的手势一来简单,二来支持单手操作,它们该如由Tweetie创始人LorenBrichter所开发并获得专利的“下拉刷新”一样受欢迎。或者像iBook的翻页动作一样自然简单。以下是好用的手势该有的一些特征:–简单易用。不仅动作简单,还要能在拥挤的交通工具上单手操作–容易记忆。其一手势要好记,其二要让人愿意记住–符合认知习惯。也就是说,该手势一方面要遵循人的自然习惯和意识,另一方面要契合手势即将产生的操作–实用。手势要让用户感到舒服,少有用户愿意点两次才看到想看的东西,让会让他们感到麻烦–愉悦的体验。Winkler认为好的手势会有神奇的感觉。UX总是个未知数,而且难于言传。但这恰是我们认识、享受科技的一种表现–及时反馈。反馈就是说用户知道当前正在进行的操作。用户进行完手势操作后有明确的状态信息告知五、手势设计应用过程中需要注意的点:(手势设计准则)符合认知习惯在非概念性项目中使用基础手势(组合)之外的“创新”手势,未建立统一规范的情况下,使用混乱会导致用户困惑,学习成本稿,增加记忆负担,难以引导用户培养使用习惯,技术上的限制可能会使“创新”变成不便。最终使用者是人,手势操作是基于人的行为来定义的。手势操作是人们现实世界行为的映射,因此,手势设计要符合大多数人的认知习惯,减少用户的认知成本。比如有方向性的手势操作,要尽量符合拇指的活动方向,且要与认知相一致。图4.iBooks的翻页体验与翻实体书记忆力限制因为这些手势操作不能明白的显示在界面上,没有代表动作的可视元素,需要用户记住哪种手势对应的是哪些操作,一些不常用的手势操作往往很难发现。如果手势直观常用自然没问题,而如果没有“自然”的手势去代表一个动作,用户就会感到困惑,于是便需要记忆,就像在使用命令行界面时要记住那些命令一样。一个App中手势数量需保持在5个数量以下,多依赖与界面的引导和暗示,让此类用户根据情境记忆这些手势,从而增加手势的易记忆性。如果用户对其缺乏认知,这些手势操作就不易被发现,也便不会为人所用,甚至造成操作障碍。(坏的例子,找不到导航栏)图5.MozillaFirefox4版本右划呼出Tab不同应用场景采用不同的手势设计人们会在千奇百怪的环境中使用我们的产品,我们的产品在和周围环境争夺用户的注意力,凭借一个3.5~5寸的屏幕与车水马龙、人声鼎沸的大千世界作斗争,因此在实际的手势设计中还需考虑该应用的使用场景。效率型和实用型应用,这类应用一般使用场景是在行进间,考虑手机一般随着用户的行进而摇晃,操作效率以及误操作等因素,一遍采用单手操作手机的手势交互。游戏等屏幕沉浸型应用,一般为休闲且稳定的操作环境,可以适当的设置一些复杂手势配合游戏中的高级操作功能,增加游戏的操作乐趣。图6.Clear的手势操作令人印象深刻适度的应用手势2014年火得不能再火,一旦开始玩根本停不下来的《Flappybird》。游戏以简单但有效的方式使用了基本的手势。点击或不点击是唯一的操作手势。玩家可以很快地知道应该使用什么手势以及怎么利用手势去进行游戏。图7.FlappyBird游戏,玩家只需要用一根手指来操控提供即时反馈在用户触摸屏幕的时候,立即提供视觉提示,可提高用户的信心。交互操作涉及到的元素可表现为改变颜色、改变大小或发生移动/震动。图8.3Dtouch的震动反馈使操作可逆触控互动操作应该是可逆的。提供视觉反馈来表明当用户抬起手指时会发生什么,同时允许用户反悔,取消操作。这将使你的应用能够安全地使用触控操作进行浏览。图9.Wechat取消发送语音不要让你的手势触发区域远离拇指热区(拇指法则)JashClark在《触动人心-设计优秀的iPhone应用》一书中提到,拇指的活动范围对操作手机的效率以及正确度都有一定的影响。虽然拇指能够划到整个屏幕,但拇指在所及范围和灵活性上是有限的,只有三分之一的屏幕是真正容易触及的——也就是拇指正对的区域。为了获得舒适的人机体验,应将主要点击目标放置在方便拇指点击的热区内。图10.LukeWroblewski在《移动为先》(MobileFirst)保持手势的全局性不要让用户在你的应用中适应了你创造的手势后,却又在你的应用中碰壁。如果用户已经习惯你的手势,觉得你的手势达到了方便快捷的目的,并耗费学习成本掌握并适应了你的手势,那么便意味着你成功了一半。尽量用简单的手势完成常用功能,需要复杂手势操作完成的功能,要有一个方便且更容易发现的方式相配合。尽量使用统一的手势,减少不同手势的切换频率。图11.全局手势在iOS原生应用中的使用场景写在最后好用的触控手势是人与设备、应用之间交流的方式。当初创造多点触控技术的人,难能可贵的是细心洞察到了人们细腻的本真行为特征,转而用触屏这一行为自然的映射了出来。来源:腾讯CDC 作者:evanchen

    浏览:67 发布于:2017.11.09
  • 如何从设计模式中学习交互设计?

    今天黑哥跟小伙伴们分享一些设计模式,在交互设计学习过程中,这些设计模式对我的学习帮助还是挺大的,它有助于对产品结构的理解,比较成熟成熟的框架通常使用了多种设计准备这期内容的时候,突然想到李开复老师的这句话,“方向比能力更重要”,觉着学习的思考和方法真的是太重要了,要想明白你的优势及在哪方面有着突出的能力,然后朝着这个方向不断努力,就一定能够成功。凡事,捷径可走,但是在学习的前期,如果想要快速的成长,就必须多实践,比如下面的一些设计模式,当你在看、在思考的时候,就可以把他们全部画出,以便加深理解。模式,而且是可以复用的,让你的项目进程大大缩短,提高效率。如果你熟悉这些设计模式,毫无疑问,你将迅速掌握产品框架的结构,学习设计模式,无疑是给了你剖析产品结构和思路的一把利器。Web Design:首页设计搜索设计模式图片展示页面设计消息页面设计数据分析页面设计模态视图设计模式关于页面设计设置页面设计APP Design导航模式主要导航模式和次要导航模式。表单登陆表单、注册表单、核对表单、计算表单、搜索表单、多步骤表单、长表单。表格和列表只显示最重要的信息。搜索、分类和过滤让这些功能易于使用图表借鉴基本图表的经典设计理念。视觉吸引吸引用户并促使其发现产品功能。反馈与功能可见性向用户提供适当、清晰且及时的反馈其他APP设计模式当你的设计没有头绪的时候,看看这些,可能会给你一些灵感~

    浏览:56 发布于:2017.11.09
< 1 2 3 4 ... 90 >

19

February

success
学设计来火星,开启你的时代 立即体验