• UI需要什么样的美术能力?(一)

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

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

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

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

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

    浏览:10 发布于: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团队。

    浏览:17 发布于: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

    浏览:19 发布于: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

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

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

    浏览:17 发布于:2017.11.09
  • 层级对UI设计结果的影响

    任何设计都应该有它存在的理由。很多同学在设计练习的时候都无法确定设计命题,信息层级划分,操作的层级划分,甚至觉得命题练习很迷茫。所以今天我就带领大家一起分析一个实际已经上市的产品的UI样例。帮助大家分析UI信息中的必然因素。                                                    我今天查看天气的时候打开了一款天气app      很多人应该对这款app都很熟悉,我们首先可以看到,这款软件是可以横竖屏自动适应的。从构图比例来说,这款软件是以竖屏作为主要显示模式的。在竖屏的情况下,观看效果最佳。                                               我们先不谈层级问题,我们先来浏览一下完整的信息。                                         下拉信息框以后,这里出现了一个商用ui不应该犯的错误。      当信息全部下拉到底的时候,信息上边缘有一排未显示完全的文字,漏边了。这个琐碎的文字边角,破坏了整体的UI视觉完整性。      其实这个缺陷是可以避免的,只需要在程序上调整一下文字距离    (这种ui中的错误,其实不算多,但是也不算少)      因为这个软件,在横竖屏上都需要自适应尺寸,所以取的是一个平均距离,理论上,ui人员在检查UI的时候,是可以让程序人间进行修正的。      横屏的下拉信息也是不完整的。这种问题跟上面一样,都是可以通过程序坐标修改间距的。      那么这个问题严不严重呢?其实这就很主观了。因为可以拖拉的面板,除了最上和最下位置,它其实还有很多手动的中间位置,不可能保证所有信息的视觉完整性。是可以通过程序调整,让信息看起来更完整,但是这所花费的时间,精力,成本,和所获得的用户体验之间的性价比,那只有研发人员才能去权衡了。                                                                  下面我们来看一下操作栏。       最上面的按钮是添加城市,这个按钮几乎没有多少可操作性,除了第一次打开软件设置它以外,可能出差旅游,会点按几次。      有些软件的这个位置,属于频繁操作位置,但是在这里不是,因为当你单手持握手持设备的时候,这个位置其实并不好点按。      天气按钮:打开软件的时候是默认开启的。一般用户在看完天气以后,点按其他信息之后,很少会再点回天气了。所以这也属于一个很低操作的按钮。      时景:这个东西,其实存在感可有可无。                                                               关键的地方来了:指数按钮      指数按钮其实是一个跟天气密切相关的信息,为什么被放在第四位?      还被放在了可有可无的时景下面?      原因很简单:最易操作位置!      为什么这个位置最易操作?当你单手持握设备的时候,不是在你手旁边的按钮最容易按到,而是稍微远一点,的更容易操作,第一是因为视觉上看的清楚,第二是因为人的手指,伸展,比回拉更容易。                                                                                 地图按钮: 地图:天气的具体位置,也是非常频繁操作的按钮,但是相比较来说,地图点按几率,可能没有指标那么高。      下面三个按钮:      一个是用户登陆      一个是软件推荐      一个是设置      这三个都属于低操作需求的按钮,甚至都很少有人去碰它,几个月点一两次都正常,一年不点也正常。      但是他们为什么不排列在其他按钮的下面,而放到底下?      不仅仅是因为视觉区分的原因。      左侧触摸栏,最容易触摸的位置,其实最容易误操作,如果一个ui设计的太方便点按,一样也会给用户带来麻烦。所以最容易误操作的区域,能空则空。                                               所以我们来看一下操作难易度,与信息层级的对比      所以,当你去分析一个产品的时候,要多想一下,为什么,为什么它们在那里,而不再其他的位置上?                                                              我们再回过头来看一下横屏。。。      信息栏,因为自适应横竖屏幕,但是它的宽度依然保持不变,横屏的时候会发现,几乎等于浪费了一半的可视范围。那么我们能不能考虑把所有天气信息都放出来呢?不能!有几个原因:1太多信息一眼看上去你是无法一次性快速分辨的。2下拉的竖向浏览信息,其实效率很高。尽可能简化用户信息读取量才能尽可能的让信息交流效率更高。3从成本上考虑。比起分别制作不同显示方向上适应修改,这个成本多数情况下不值得。我们来看一下,在UI设计里,有哪些目的:1信息传达的效率2信息的传达顺序3操作的效率4视觉上的美观      信息的传达效率和传达顺序,不分先后,因为项目需求不同,这两者根据需求是可以互换的,但是前提是只有一个为主。      操作效率比美观更重要。      所以这里牺牲最大的就是视觉上好不好看这一点了。其实市面上是很难找到几个视觉上巨丑无比的UI范本的。因为UI本身并不复杂,所以哪怕是为各种目的做了牺牲和割舍,也依然有很多可调整空间。      去了解市场上的应用软件,游戏,网站,区分内容和信息,区分功能区域,然后去思考他们的设计目的,原始初衷,是很好的设计练习。做这种练习,记得一定要写个人笔记,因为工作以后,你会发现,你的工作与这些问题几乎相同。      在你还没有特别个性的设计之前,积攒市场上的产品熟悉度,也是学习的一个方法。甚至可以叫做职业素养。

    浏览:24 发布于:2017.11.09
  • 那些关于想要进入UI行业的新人提问——不吐不快

    每天要被这些提问虐上一百遍啊一百遍……拿出来跟大家分享,希望可以对想要从事UI的新人一些帮助。       做培训有些年头了,很多无奈的问题,几乎每天都被问及。整理一些给新人参考一下吧。        三百六十行,行行出状元,你会发现哪个行业里都有混的风生水起的,也有混的惨不忍睹的。关键不在于行业而在于人。如果你向一个培训机构提问,问他将教的东西是不是有前景,这不是主动找忽悠的节奏么?        所以首先你得有兴趣,有兴趣,你就可以坚持更久,坚持的更久就更有希望能做出成绩。毕竟我们是从事工作,而不是玩艺术,归根到底没那么困难实现。        UI行业从有人机互交需求开始就存在了,但是也确实是从08年苹果手机发售以后才开始盛行的。客观来说,这个行业发展时间还比较短,可发展空间还比较大。        择业是个很私有的问题,作为老师,我没有权利去帮你决定,只有你在确定要做一件事以后,我才能通过我的经验,来帮助你提高你的能力;在你没有自制力的情况下,监督你完成应有的课业;在你失去信心的时候鼓励你坚持下去。        这个是我听过最多的提问,首先我得说,这个问题我真心回答不了,我又不是你本人,我无法对你做出任何主观评价。        新人一般都会说:老师我会xx软件,有点手绘基础等等。其实这跟适合不适合从事UI行业没啥关系。        当然有一定的基础确实是优势,其次大多数人都对UI行业,以及其他跟绘画有关系的行业误解太多了,基本都以为跟绘画有关系的行业工作就是去绘画,制图。而实际上任何行业的设计师,无论服装,漫画,影视,游戏,动画,网站,应用,app,建筑,工造等等跟绘画有关系的设计师,制图能力是最基础的能力需求。        以UI为例,设计从来都是有限制的:                硬件限制:为手机,平板,电脑,电视,不同尺寸严重影响着UI的设计结果;                操作限制:可触摸操作,实体按键操作,光标操作,手势操作等等都对UI产生着不同的影响。        用户体验,产品设计目的,信息引导,视觉引导等等跟绘画没啥关系的行业知识才是关键,而你需要大量的时间去了解行业。        所以你适合不适合这个行业我不知道,我只能给你一个建议:花点时间自己去求证你适不适合这个行业。        提出这类问题的潜在原因是缺乏自信,缺乏面对失败的勇气。我觉得,在年轻最输得起的时候去尝试,是最有性价比的选择。如果一个事情你想的足够清楚,你就不需要别人的鼓励来确立信心。        无论你是在校学习还是参与职业培训,你毕业以后都是新人,你的职业生涯才刚刚开始。        我能理解同学花钱来培训的目的,是希望获得从业能力、赚钱养活自己,同时还能从事自己感兴趣的工作。但是,请不要把自己的价值圈定在一个工资待遇范畴里。我这里可以简单给你一些新人就业的原则:        首要的是学习环境:无论你到哪里去工作,是否有学习机会?比如大公司,商业流程严谨,研发程序规范,在职业生涯里至少要见识一下吧?创业团队里,设计权限最高,涉及的工作范畴最广,至少一辈子的玩一次吧?这种经验是学校无法给你的。外包团队?压力巨大,但是接触项目类型众多,特别适合有自信想锻炼一下的同学,你离开外包公司以后会觉得其他企业工作都挺轻松的。        其次是工作环境:周围的人关系处的好不好?工作环境舒适与否?业余时间多不多?加班给不给钱?从事的项目是否有钱途?强调环境是因为,一个设计师真正的进步有两种:一种就是参与成功项目的数量,另外一种就是利用业余时间做无限设计练习,这两种都必不可少(有时间我们来聊一聊有限设计和无限设计)。        最后才是待遇:做好你自己的事情,所劳即所得。这个基本不需要解释。        所以请客观面对你所处的阶段,也客观去面对你赚到手里的钱。一分钱就是一分责任。能力越大责任越大嘛,当然获得也越丰厚。        这个问题出现频率也非常高!一般这么问是因为在你自己看来哪里都有问题,但是你问的方法错了。        问题越精准,你获得的答案就越精准。        当你问出一个模糊问题:哪里有问题的时候,老师第一反应是从基础检索。指出你的基础问题之后话题就基本结束了。这对你来说并没有多少帮助,因为从老师授课来说,没有比基础更重要的问题,这些问题必然会强调又强调,所以上述这类交流极其没有性价比。        那么应该怎么做呢?首先你在做设计之前,一定要写你的设计目的。有了你的目的参考,老师就很容易明白你的思维逻辑,那样除了基础问题以外,还可以讨论很多的设计方式、讨论如何通过基础来辅助你的设计表达,这样你能获得的东西就很多。        所以提问一定要够精准和清晰,不能问太主观化的问题:比如什么UI最好看啊?这个icon漂亮吗?等等。审美是很主观的问题,青菜萝卜各有所爱。这种讨论,一般都没有结果。        总结说来,提问请一定经过思考。        这个可能是在我这边独有的问题了。        职业技能不是工作的全部。你会发现企业招聘里,都注明了善于沟通,理解能力强等等条件。        为什么有这些需求?因为一个人能力可以不足,但只要可以通过沟通解决问题,那么这个人就很容易融合在团队里,且快速适应和提高。        沟通能力,并不简单是说话,它应该包括:        向上的理解能力:在学习中,你是否能够理解教学内容,就是向上的理解能力。有些时候教学是强制性的要求,因为工作里也是一样的。很多时候你的主观喜好,需要为项目目的而牺牲;        平等的交流能力:一般设计练习都需要命题,没有命题的设计制作的再好,不在控制范围内,都无效。所以建议你在学习中寻找一个学习伙伴。命题不要一个人完成,太主观,只有在平等的交流条件下,你才会知道你的取舍倾向。比起想到更多的好想法,能放弃一个想法更难;        向下的表达能力:设计行业里,会做,你也得会说,要知道,你是一个设计人员,你为之服务的人多数都不是设计人员。怎么去跟外行沟通,是一个非常需要耐心和技巧的事情。你觉得你学明白了,但是在我看来“学会”的标准是,你可以让一个没有接受同类训练的人也能明白,那么我才承认你学会了。这中间需要你的表达方法、耐心、还有你的鼓励。你以后从业必然会到达一个需要带新人的阶段,这是一种无法替代的学习体验。事实证明,向下的表达能力,可以让新人在企业环境中,快速升值,也更受企业的欢迎。        没有速成,这不科学。没有那种你知道了马上就升级的诀窍,所有能力都是靠时间磨到你身上的。        勤奋是唯一途径,即使你参加了培训或者在公司就业,你也依然需要自修,前辈和老师能够交给你的是行业经验和知识,但是你需要更清楚自己的喜好和倾向。你所学是为表达你的个性世界而服务的。拥有大量的绘画技巧,行业知识以后,却没有自己想要独立设计的产品,这不得不说是学霸的悲哀。        确实有很多人都是奔着设计师这个职业光环进入行业的。但是事实上,这个光环并没有那么耀眼。        如果你是一个行业新人:        你参与的项目已经上市,风格已经确立,那么你需要能够快速适应已有风格;        你参与的项目还没有上市,那它至少有一个假想敌(参考对象)。        所以你的首要能力,就是风格适应能力,这是基础,这个行业里谁没“微创新”过呢?        很多工作量根本不是一个人可以完成的,所以你一定需要团队合作。那么如何把控质量,如何统筹人力,资源和时间,是无法回避的问题。只有你在行业里摸爬滚打的时间让你足够了解行业、市场、技术的需求,你才能真正的获得设计权限,完成印有个人标签的独立设计。        在这之前,你需要的只有不断的学习与坚持。-铁木士-

    浏览:18 发布于:2017.11.09
  • N Style图标制作教程

    第一次出UI教程,把之前参加过比赛的几套风格各异的主题图标拿制作过程出来讲解一下,图标的绘制方法有很多种,主要看你适合哪种,用得方便不,注意技巧跟细节!一、卡通风格 —— LYNN Rabbit (联系人图标)link:http://www.zcool.com.cn/work/ZMjIzODg0MA==.htmlStep01:点击 — 【文件】— 【新建】(快捷键Ctrl+N)新建一个新的图像,命名好并把宽度设置为800px,高度为600px,分辨率为72dpi,然后点击确定,记得顺手保存(快捷键Ctrl+S),以免做一半PS崩溃或者其他原因被关闭了那就悲催了~Step02:先填充背景,色值为#282828(PS:这步主要是为了方便图标观看,背景色值不定,看着舒服,不影响图标外观即可);然后选择【椭圆工具】(快捷键U,可按Shift+U切换),在画布点击【创建椭圆】弹出层,设置宽度为172px,高度为170px,并勾选【从中心】,然后点击确定;Step03:选中椭圆图层,命名为yuan,右键选择【混合选项】,选择【渐变叠加】,线性渐变,色值从上到下为 #feb5d0 — #ff7fae,角度为90°;再选择【椭圆工具】创建宽度跟高度都为172px的圆,填充颜色为#c74a78;命名为yuan_di,对齐于yuan图层并放在其下面;Step04:复制yuan图层(快捷键Ctrl+J)命名为yuan_ban,选择右键清除图层样式,填充颜色为#FFFFFF;不透明度改为30%;选择【椭圆选框工具】(快捷键M,可按Shift+M切换),按住Shift键,画一个正圆选区(大小自己把握),可对齐图层,然后点击【图层】窗口的【添加图层蒙版】;再复制yuan图层命名为yuan_bian01,选择右键清除图层样式,填充颜色改为# ffadcb;按住Ctrl键点击图层载入选区,按方向键向上和向左移动一像素,再反向选区(快捷键Shift+Ctrl+I),再点击【图层】窗口的【添加图层蒙版】;同理复制yuan图层命名为yuan_bian02,填充颜色为#fff2f7,载入选区向下移动两像素,反向选区后添加图层蒙版;Step05:复制yuan图层命名为nei_yuan,点击【编辑】—【自由变换路径】(快捷键Ctrl+T),缩小80%(记得点击【保持长宽比】),右键清除图层样式,选择【混合选项】设置:【描边】:大小3px,内部,颜色# d85082,【内阴影】:颜色# c33c6d,不透明度70%,角度120°,距离5,阻塞2,大小8,【渐变叠加】:线性渐变,色值从上到下为 # feb8d2 — # ff80af,角度为90°;Step06:复制nei_yuan图层命名为nei_yuan_ban,清除图层样式,自由变换路径缩小94%(记得点击【保持长宽比】),颜色# FFFFFF,不透明度改为10%;再载入yuan_ban的蒙版选区,点击【图层】窗口的【添加图层蒙版】;再复制nei_yuan图层命名为nei_yuan_bian,清除图层样式,填充颜色改为# ffb9d3;载入选区向上移动两像素,反向选区,再点击【图层】窗口的【添加图层蒙版】,再把nei_yuan_bian图层向下移动一像素;再复制nei_yuan图层命名为nei_yuan2,清除图层样式,自由变换路径缩小90%(记得点击【保持长宽比】),颜色# FFFFFF,不透明度改为5%;Step07:绘制LYNN Rabbit头部部分,用【椭圆工具】创建一个椭圆,设置图层混合选项,再绘制耳朵部分,注意描边细节跟阴影,脸部一一拆分,大多数用是用钢笔工具、椭圆工具、图层蒙版、设置图层混合选项等完成,在这就不一一详细说明,最后加上耳朵阴影和高光,拉个椭圆白色透明渐变,设置不透明度为50%,完成图标的绘制。END:Duang~ 完成图标后加个华丽丽的背景,再用同样的方法就绘制出一套主题图标啦~二、微扁平化 —— FLEXAGON (短信图标)link:http://www.zcool.com.cn/work/ZMjg5MzQ1Ng==.htmlStep01:选择【圆角矩形工具】(快捷键U,可按Shift+U切换),在画布点击【创建圆角矩形】弹出层,设置宽度为120px,高度为120px,半径20px,并勾选【从中心】,然后点击确定;Step02:把圆角矩形图层命名为di,然后右键选择【混合选项】,设置:【描边】:大小1px,内部,渐变90°,# 157acf — #78bbff,【渐变叠加】:线性渐变,色值从上到下为 # 1479cf — # 3a9bff,角度为90°;Step03:选择【椭圆工具】,按住Shift键,画一个正圆,填充颜色为# 9eceff,图层命名为message,再选【钢笔工具】(快捷键P,可按Shift+P切换),在选项栏里【路径操作】选择【合并形状】,并选中路径,画一个三角形;右键选择【混合选项】,设置:【投影】:颜色#789bc0;角度120°,距离1px,扩展0,大小1px;复制图层message命名为message_ceng,填充颜色为# 4da2f9,载入图层选区向上移动三像素,反向选区,再点击【图层】窗口的【添加图层蒙版】;再复制图层message命名为message_bian,填充颜色为# c7e3ff,载入图层选区向上移动一像素,反向选区,再点击【图层】窗口的【添加图层蒙版】;Step04:载入message图层选区,填充颜色#134573,取消选区(快捷键Ctrl+D),点击【滤镜】 — 【模糊】 — 【动感模糊】和【高斯模糊】,【动感模糊】:角度90°,距离7;【高斯模糊】:半径3;把图层不透明度设置为50%,并把图层向下移动五像素;Step05:绘制短信图标上笑脸部分,选择【椭圆工具】,按住Shift键,画一个正圆,填充颜色为# 0675d5,大小适中即可,并复制图层(快捷键Ctrl+J或者选择【移动工具】Ctrl+V,按住Alt键拖动),再选择【文字工具】(快捷键T,可按Shift+T切换),输入字符“)”,文字颜色为# 0675d5,大小适中,这里的文字大小为30px,组合成为一个笑脸字符:) 完成图标的绘制。END:继续duang~ duang~ duang~,一套华丽丽的微扁平化的主题图标就这样出炉啦~

    浏览:17 发布于:2017.11.09
< 1 2 3 4 ... 88 >

18

November

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