首页

动效的质感

纯纯

01 动效的质感

动效的质感主要由时间、速率、运动理念、运动方式等来表现。动效设计不仅仅只是动而已,作为设计师需要洞察更多的动效细节。通过对动效细节的把控去营造自然真实的动态体验,并根据产品品牌特性去建立其动效理念。







1.质感表达-速率

速率影响着运动的质感。让我们做一下对比实验,在相同时间以及运动效果下,只改变运动元素的速率曲线并观察它们的变化。两元素为一组,一组速率曲线较陡峭而另一组则偏平缓。通过改变速率曲线,元素在下落运动中所呈现的物体质量也有明显差异。运动曲线较陡峭且速率对比较大则会导致元素的质量更重冲击感更强,反之较平缓的曲线元素运动则较为轻盈。







2.质感表达-时间

时间的变化感知是较为直观的,我们可以通过调节运动时间的长短来表现物体的运动性格。时间越少,运动越快速干脆且可感知的运动细节更少。时间越多,则反之。







3.质感表达-运动理念

不同的运动理念会给物体带来不同的质感表现。举个例子一个活泼有活力的物体在运动的表现上会较为柔软Q弹,就需要通过回弹挤压来体现自身的质感。而运动理念生硬的物体,则相反。运动理念与产品品牌调性有关,根据品牌特性我们可提取一些适合的运动理念或在自然理念中吸取灵感,将其应用在自身的产品上可以更好的体现品牌价值。







4.质感表达-运动方式

运动方式依附于运动理念,是产品运动质感的一种表达方式。例如运动路径是曲线还是直线?空间的景深程度是如何的?可以明确感受到空间感吗?整体方式是基于效率还是表现力?在这一块,也需要设计师根据品牌调性及产品属性去作考虑。








02 质感调节

因为运动曲线的存在,动效才会表现的如此自然。设计师可以通过曲线的方式进行运动速率节奏的编排,从而实现设计师们想表达的动效调性。在影响运动质感表达的部分速率的编排占了比较大的比重,借此机会讲述下运动曲线的基础知识帮助大家更好的理解曲线。


打开AE关键帧控制面板我们可以看到有两种曲线的表达图示;一种为速度曲线图表一种则为数值(属性)曲线图表。







速度曲线

速度曲线记录的是物体运动每一刻的速度变化。我们来分解下它的曲线图表,x、y轴分别表示的是时间与速度。观察下图的曲线则可以得出物体起始速度为0呈静止状态,后续慢慢开始加速并且速度达到顶峰;最后物体运动至终点并停下。整体图表展示较为直观,经过分析我们可以得知整段运动其实就是我们熟知的缓动运动(起点和终点慢,运动过程快)





对于速度曲线的编辑,设计师可以通过曲线手柄来控制运动节点的加速度。让我们双击节点查看关键帧速度图表来分析下速度曲线的基本规律。此时速度图表显示传入速度(incoming Velocity)为0,影响为33%。「传入速度」我们可以理解为运动起点的速度,而「影响」这个数值则可以理解为加速度。传入速度需要百分之多少的加速度即可达到最高速度,数值越大即代表加速的幅度越大曲线呈现的陡峭程度就越陡峭。








技巧贴士


速度编排

当设计师们想针对物体运动速度做一些特殊的编排处理,使用速度曲线会更直观一些。例如:想要模拟小球弹跳过程中的滞空感,我们只需调节小球悬空时的速度大小及加速度即可。想要达到滞空的感觉,那运动中程球体的速度需要大于0让球体持续运动,就能达到我们想要的效果了。






表达式应用

我们经常会在动画内使用弹性表达式,许多设计师也遇到过表达式输入后还是没效果的情况。其实是因为当前关键帧的速度为0而导致的,除表达式所设置的弹性频率、衰减度外;速度也决定着弹性的强度,我们只需根据速度调节自己想要的弹性效果即可。







数值曲线

数值(属性)曲线记录的是元素属性随着时间的变化过程。我们也来分解下它的曲线图表,x、y轴分别表示的是数值(当前运动变化的属性)与时间。而该曲线代表着物体运动速率的分布情况,也就是速度等于=物体运动的距离(数值)/物体运动距离所花的时间(时间)。可能看着公式挺简单的(初中物理)但乍一看图表还是比较抽象,我们可以一步步的将其拆解方便大家理解它的含义。


Step.1

我们先确定元素位移时间以及距离,在不添加任何缓动插值的情况下,赋予他们最基础的线形运动。也就是从0~1秒它的速度是呈匀速的状态。再将整条曲线分解成平均的几个关键时间点,记录元素在不同时间点所在的位置。





Step.2

根据速度公式,我们去测试下速度的变化对曲线的影响是什么?关于速度的计算公式其实我们都知道的,速度等于单位物体的位移距离除于位移所花的时间,也可以理解为图表中的速度就是线段的斜率。





Step.3

接着让我们将其速度提升一倍,从1秒的总时长提到0.5秒的时间。根据图示我们可以观察到当我们将时长加快时,速率线段与我们的x时间轴的角度越来越大。同理我们尝试下将运动属性数值降低一倍,我们可以观察到此时速率线段与我们的x时间轴的角度越来越小。我们通过上述的拆解分析,可以得到一些规律。在数值曲线下,时间以及运动属性数值影响着物体运动速度。根据曲线陡峭程度影响着运动速率快慢的规律,我们可以总结一个观察曲线的技巧。曲线越缓和(贴近时间轴x)速率越慢,曲线越陡峭(贴近数值轴Y)速率则越快。





Step.4

在弄明白了数值曲线的基本规律后,我们将曲线做一些处理让他更贴合于我们的现实自然运动。模拟现实物体运动的状态,物体刚开始慢慢起步再到加速的过程。如下(P1)图所示数值曲线在前半部分速率较慢,到达时间中点后突然增速并到达终点。将曲线作一定的平滑过渡处理就是我们所熟知的缓入(P2)曲线啦。







运动曲线的使用建议

对于不同的运动曲线模式(速度/数值),设计师们需充分了解其曲线模式的含义。我们可以根据设计场景去选择适合的曲线模式,关于场景还有很多,我大概罗列了部分项目接触到的特定场景出来。主要目的是想让大家意识到熟练的掌握两种运动曲线模式的重要性,别将自己的工作方式或习惯限定太死,灵活的变通很重要。



速度曲线:

  1. AE动画中部分无具体数值单位的动画帧,例如(蒙版路径),设计师们只能通过速度曲线进行调节。

  2. 使用弹性表达式需根据速度大小去调节弹性强度。


数值曲线:

  1. 在UI交互动效的设计场景,数值曲线适应于落地开发的贝塞尔曲线插值器。

  2. 数值曲线是C4D动画的默认函数曲线模式,在C4D中无法调节速度曲线。






03 运动的类型

通过上述分析我们对运动曲线模式的了解更进了一步,接下来让我们结合案例探究下不同运动曲线类型的含义以及应用方式。减少大家在动效设计过程中的公式化硬思维,提升自身对于动效的编排能力。







缓入曲线

缓入运动即加速运动,物体运动的时候都需要一个加速过程,并不会马上达到速度的最高峰。观察自然世界,有许多类似的运动案例例如弹弓以及汽车发动等。在交互动效中缓入运动会运用在元素离开页面的情况。



动态感知

这里的离开指的是元素永远离开屏幕并且无法让我们返回的操作例如,弹窗、通知等。元素将会一直加速至消失,且告知用户该元素不会再出现在页面某个角落了。







缓出曲线

缓出运动与缓入运动相反,描述的是元素的减速运动。类似于我们生活中行驶中的汽车减速的案例。我们可以利用缓出运动表示界面外的元素进入屏幕,即元素以高速度进入屏幕慢慢减速至静止的过程。



动态感知

结合自然世界的运动规律来看,把页面进入的元素比作是行驶的汽车,用户当作是正在斑马线上行驶的人,将马路作为页面空间。若汽车采用的是缓入运动(加速)的话,马路上的行人则看到的是一辆不断加速向他行驶过来的车辆。因为担心车辆高速的逼近导致刹车不及时的情况,行人便会本能的作出躲闪的反应。其实页面也是一个道理,进入的元素使用加速运动出现过冲的运动感知会让用户体验时产生不适。







缓动曲线

缓动运动即我们所接触的常规运动类型,在运动开始慢慢加速再到运动结束慢慢减速的过程。该运动符合自然世界大多数物体的运动逻辑,也是页面中经常使用的曲线类型。



动态感知

阅览Material design动效模块中关于缓动曲线的描述,适当的增加曲线的不对称感可以让运动更加真实。我们可以根据页面元素运动逻辑和产品品牌特性来设定缓动曲线。缓动曲线适用于大部分在页面中运动的元素,当元素在页面消失且用户可进行返回等操作时也应使用缓动曲线。






弹性运动

在现实生活中,因为作用力与反作用力的存在。皮球触碰到地面会不断弹起,而用手推船,船就会离开岸边。这就是我们所说的弹性运动。弹性曲线与其它曲线(常规缓动)有些许差异,弹性曲线由两个值影响着它;弹性阻尼以及振动频率。





对比差异

弹性曲线相比常规运动曲线更贴合自然运动现象,在运动的衰减过程更为真实。早在ios7中,苹果就已经大范围使用该类曲线。例如APP收起展开、预览窗口收起等。弹性运动并非需要表现出明显的回弹感,就算运动无明显的回弹感其效果相比常规曲线实现的运动启动速度更快,且会有更长的一段衰减距离。让用户更加集中于物体运动的衰减过程(结尾)而并非加速过程,也使得ios的使用体验更符合自然规律以及交互反馈更为真实流畅。





对接落地

与常规的缓动曲线不同,设计师可在Framer、Protopie、flinto、principle等软件根据自身需求来尝试并输出弹性运动相关数值提供于开发。对于不同(ios/安卓)平台关于弹性数值单位的转化,设计师们可根据MartinRgb的Animator list网站去模拟各端弹性运动的数值来对接开发。

Animator list:http://www.martinrgb.com/Animer_Web/#





动态感知

弹性运动可赋予物体材质,通过弹性运动我们可以表达产品的品牌调性。例如面向低龄人群的产品或是娱乐类型的产品可在产品内大范围的使用弹性运动去传递产品品牌的运动感知。除此之外,弹性也存在不少寓意。对于ios中使用的弹性运动,官方说法是基于用户行为的奖励反馈。如果用户滑动操作UI元素的话,就有回弹,显得用户滑的力度很强,是一种奖励性反馈使得用户的体验过程更为真实自然。弹性也具备提醒的作用,吸引用户对元素的注意力以及提示用户该元素可进行逆操作等。同时切忌在页面中使用过多的弹性运动,设计师们在使用前需要充分的考虑当下页面使用场景、产品品牌调性等因素。






04 理念的形成





动态语言

现在越来越多的公司开始制定自己的设计语言/理念,像Material Design、IBM、IOS等。对于"动效"目前市面上大多数产品有着自己的动效规范,但并没有上升到语言理念的层面。规范并不等同于语言,语言应反应其品牌特性和灵活性。为此最后分享下个人目前对于动效语言的理解,以及关于动效语言制定的技巧经验。





语言的构成

作为互联网设计师的我们都熟知视觉语言的概念,通常我们会根据产品所传递的品牌特质去制定产品的视觉语言。动态语言也是如此,通过提炼产品品牌气质去传递一种感受。我们的动态体验是什么样的感受?是高效简洁的还是活泼具有表现力的?为此我们可以找寻对应的品牌核心理念或是运动现象,组合提炼出符合品牌调性的理念和感受。





提炼感受

动态所传递的感受是感性与理性的结合,在感性层面我们根据产品的品牌形象提炼出相应的情感感知。而在理性层面我们需要分析产品受众用户特征以及产品类型业务属性等,针对其特征进行产品体验感知的传递。根据提炼结果,我们可以得出初步的动态感受。






理念孵化

以提炼的动态感受为出发点,理性的层面给予了我们大致的产品体验感知,为我们的动效理念建成提供了框架。对此我们将继续从感性层面出发,找寻可传递品牌感受的运动现象并加以组合提炼;将运动特征以及动态感受落点于实际的动态理念。这个过程与品牌设计非常相似,动效理念的孵化应充分考虑情感层面品牌感受的传递。而并非只考虑理性层面的感知,忽略其品牌气质的塑造。





语言形成

到这一步,动效语言的雏形已形成。通过感性与理性两个层面去呈现「感受」,明确产品需给予用户什么样的动态感知。后续我们可以结合动态理念去进行动效原则的总结,根据原则去输出后续的动效规范并进行推动落地。





语言的价值

建立动效语言体系,而并非只是建立规范。动效语言的价值除规范统一及体验优化外,更重要的是传递产品品牌调性。以动效为例,用户使用产品所接触的交互动效、视效动效等其表现的动态感知都在潜移默化的影响着产品的使用体验以及品牌形象。在目前大家都在注重设计带来的短期商业价值的环境下,设计师也应重视下产品品牌、体验价值的建设。




作者:Fiasc1         来源:站酷
蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司


医疗应用系统的设计思维

纯纯




目录


一、项目背景

二、项目分析

三、风格探索

四、设计原则

五、深色模式

六、设计规范

七、总结


一、项目背景


这家公司主要致力于研发医疗大数据和人工智能驱动的智慧医疗产品,其产品主要用于疾病的预测、筛查、诊断和治疗的各个环节,主要聚焦于人工智能医学影像领域。


产品定位

1、开发定位:web应用;

2、用户群体:从事医疗行业的医生;

3、功能定位:解决的是医生阅片花费时间过长的问题,能够辅助医生智能诊断的工具型智能应用系统。

二、项目分析


从前面的产品定位,可以得到以下三个关键词:web、医疗、应用,同时根据这三个关键词可以延伸出一些问题,然后开始着手准备前期设计工作。


A、医疗设计注意事项

1、医生的操作交互模式习惯于之前固有的Pacs阅片系统,设计时要尊重现有的交互模式;

2、因为多数影像科的使用环境都比较暗,所以界面整体风格采用深色模式。

3、因为有很多专家都是比较年长的,考虑到这一特点,在制作设计稿时字号不能太小。但是信息内容又多,字号大的话信息很难布局,这是一大问题;

4、和第3点类似,影像应用要求给影像显示区域留有足够的空间以,这就导致其它文字内容的空间又被压缩了,其它文字内容的显示又成了问题;

5、安全性,涉及到很多病患的信息,如何体现安全性很重要;

6、整体风格上趋于保守,因为是为医院设计的,颜色使用上相对来说要克制。

B、web设计注意事项

1、最明显的是用鼠标操作系统,鼠标的交互方式多,有hover、click、滚轮、左右键等等。而鼠标右键一般是浏览器自带的功能,不方便定制。

2、pc端浏览器右上角带有关闭浏览器。同时自带后退、前进、关闭的按钮,有点类似于安卓系统自带返回键。这些功能影响着应用信息保存的交互问题;

3、布局问题,浏览器可自由伸缩,会影响页面的布局;

4、设计时不存在@2x、@3x这些问题,采用@1x设计就可以,可以给设计和开发带来不少便利,有些切图为适配高分辨率的屏幕需要切2倍3倍图;

5、头部浏览器自带菜单栏,会影响纵向空间的布局;

6、什么时候新开标签页和什么时候在当前页面跳转问题。研究显示,国内网页多喜欢新开标签页,国外网页喜欢在当前页面跳转,但是应用类型的网页更多的还是在当前页面跳转;

C、中后台系统应用设计注意事项

1、中后台系统信息繁多,因此系统用起来体验好不好、效率高不高尤为重要,在医疗行业更是如此。如何用设计区分信息的层次,并且在有限的空间展示尽可能多的信息是设计的首要任务,为了展示正确的信息哪怕展示方式不对也比设计的好看而信息展示不全要好。

2、尽可能的优化操作流程,再精美的设计也不如优化一两个流程效率来的快一些;

3、交互点到为止,尽量少用复杂的交互方式,比如拖拽,双击和右键都尽量少用;

4、对颜色和icon的运用要谨慎一些,以免造成多余的认知障碍。由于文字能够传达清晰准确的信息,无疑是更好的设计元素。

5、即时反馈是提高效率的有效手段。

三、风格探索


A、布局

我们采用左右布局的设计方案,将左侧菜单栏固定,右侧工作区域动态适配。菲兹定律表明:越远难点击,越近越容易点击,靠近边缘更容易点击。因此菜单栏在左侧时,当浏览器全屏时,点击左侧的菜单相当于是点击边缘的目标,这种操作路径用户所花的时间是最少的。而当菜单栏在上方时,因为上方有浏览器自带的菜单栏,会影响用户的操作,因此用户点击起来所花的时间更长,也容易操作失误。

B、色彩

医疗产品多采用蓝色作为主色调,蓝色具有安静、信赖、科技的色彩象征,然后绿色是生命、医疗的象征,所以最后选择了一个蓝色偏青的色彩,比较符合现有的产品调性。另外因为影像科工作环境多为暗室,所以界面整体采用深色模式设计,字体颜色的选取注意WCAG规范,文本和背景的对比度至少要有4.5:1。

C、字体

我们最开始设计demo时,常用文字使用的字体大小是12,而医生试用后反馈字体太小。原来有很大一部分医生专家都是比较年长的,12对于他们来说字体小了点,因此我们决定采用14作为主要字号,12作为辅助说明文字。

D、图标和圆角

为了更好的搭配深色模式,我们决定图标采用面性图标(后文会讲解)。图标和按钮的圆角也采用了直角硬边风格代替了常见的有圆角风格。硬朗的图标有一种精确性、科技感,更符合产品调性。


四、设计原则


A、层次清晰

中后台系统有信息繁多,这就需要设计来区分信息的层次,引导用户去关注最重要的东西,“偷偷地”给用户一种高效的体验。这里根据《写给大家看的设计书》当中的四大原则:对比、对齐、亲密性、重复,来区分信息的层次。

①、对比

对比即为设计元素的对比,可以是颜色对比、字体对比、大小对比等等。恰当的对比能让看起来更有层次,能给产品提供一种韵律美。通过对比可以引导用户的视线,减少用户的选择时间,间接的提高了使用效率。

②、对齐

对齐作为设计的最基本原则,是建立秩序的一种最基本手段,合理的利用对齐方式能够有效地提高用户体验。常见的对齐方式有左对齐、居中对齐、右对齐、两边对齐。在中后台系统中常常出现标题长度参差不齐,表单内容长短不一的情况,这种情况不论是左对齐还是右对齐都会出现不整齐的问题。而这时,我们往往要考虑的已经不是美的问题,而是哪种方式更能够提高用户的使用效率。

③、亲密性

亲密性能够让内容凝聚在一起,产生层次而不凌乱。信息的关联性越高,它们之间的距离应该越近,反之就应该越远。在本系统中页面中的纵向间距采用小、中、大三种间距来区分层次,分别是8px、16px、32px,以此来体现页面的组织性。另外,一些特殊情况,比如空间有限,最小间距可以是4px。其它不适应的情况统一采用8的整倍数定义间距。

④、重复

相同的元素在页面间的重复运用,可以有效的降低用户的学习成本。也能够帮助用户识别出这些元素的关联性。重复的元素可以是某个颜色,某种样式,某个布局。这里主要讲重复在不同产品之间的应用,不同产品之间有相同的结构布局、相同的配色能够让用户快速上手我们的产品,同时也是对品牌感的一种强调。例如:由于医生以前习惯于使用医院的pacs系统来阅片,所以在影像显示页面,我们延用之前pacs系统的布局,让医生找到一种熟悉感。

B、即时反馈

人机交互时,系统及时给出反馈非常重要,反馈能够给用户确定性和安全感。如果用户操作了系统,得不到相应的反馈,用户往往觉得系统是不是出错了,就会给用户造成一种负面使用体验。常见的反馈形式有确认反馈、警告反馈、错误反馈、状态反馈。本系统中从患者拍片、系统智能分析、医生审核、保存打印,各个步骤都应该有确认反馈、警告反馈、错误反馈、状态反馈,只是反馈的形式可能是弹窗,可能是颜色的变化,可能是符号的提示等等。这里举例最基本的按钮一定要有normal、hover、click、disable,不然用户不知道自己的操作是否起作用了,给用户造成认知障碍。

C、简单有效

奥卡姆剃刀原理讲究设计时避重趋轻、避繁逐简、以简御繁、避虚就实,因此在设计时,我们会和产品经理商量有些功能是否真的有必要放上去,或者有些信息是不是可以隐藏。例如:搜索栏,按照医生阅片流程来看,医生是很少会使用到搜索功能的,即使用到了,搜索病人ID就足够了,其它项目的搜索完全可以放到高级搜索里。再比如病人列表里,往往会因为列表项太多使整个表格看起来非常臃肿,于是我们筛选出了最重要的7项,其它不是那么重要的,我们就以自由定制化的形式放在右侧,医生可以根据自己的需要进行定制。

五、深色模式


前文提到,根据医疗产品的特性以及用户的使用环境,我们的系统采用深色模式。然而深色模式并不是简单的背景色使用深色那么简单,因为背景变成了深色,相应的字体的颜色、图标的风格、元素的布局等等都会产生微妙的变化,以下列出一些深色模式要注意的一些事项。


A、颜色

1、深色的选取尽量不要直接选用纯灰色,可以往冷色系偏一些;

2、白色背景上不会用纯黑文字,同样的深色背景上不要直接使用白色,否则会产生强烈的刺眼感,但是一些按钮还是要使用白色;

3、字体的中性颜色深浅建议使用白色的透明度变化来制作深浅,原因有两个:一是透明度变化能够让字本身投射出背景色的色调,做到自带色调的效果,能够让页面更自然协调;二是利于设计和开发理解记忆,有一个量度去衡量。虽然通过透明度变化有时会碰到没有背景色的问题,但是这种情况很少,而且也很好解决,增加一个背景就可以了;

B、图标

最开始我们就像以往一样,图标的形式采用线性图标。但是我发现在深色模式下,线性图标变得单薄、空洞。我们分析是因为在白色背景下,线性图标是深色的,深色具有收缩感,让人眼能够关注到“线”和被线包围的“留白”,人眼关注的是整体;而在深色模式下,线是白色的,白色具有扩张感,白色的扩展让人眼的关注点变成了“线”,忽略了“留白”,所以人的观察感觉是缺失的,而且在大面积深色的压迫下,线性图标变得特别单薄。于是我们决定采用面性图标来代替之前的线性图标。

六、设计规范


原子设计理念

原子设计理论由设计师Brad Frost首先提出,我觉得这套理论能够很好的组织构建设计规范,也有利于团队成员理解与协作,于是我把这套理论践行于这套系统中。在原子设计理念中,一切设计都是由最小的原子组成,然后原子可以演变成分子,组织,模板,页面。

1、原子

为UI设计构成的基本元素,文字、颜色、图标、图片、调色板、进度条、分割线、开关、单选框、复选框,也可以为抽象的概念,例如色调等。特点是不可再分割。


2、分子

由原子构成的简单UI组件。按钮、标签、导航、输入框、搜索框等。


3、组织

相对分子而言,较为复杂的构成物,由多个简单的UI组件构成。弹窗、表单、列表、卡片、数据图表等。


4、模板

以页面为基础的架构,将以上元素进行排版。例如消息模块、列表模块、项目模块、表单填写相关模块。



作者:Watt海罗         来源:站酷
蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司








用户体验设计法则应该怎么用?来看看这些应用原理!

seo达人


 

1、菲茨定

图片

选中目标所需时间与移动距离长短和目标面积大小有关。(与距离负相关,与面积正相关)

 

现实中的应

图片

在商场中寻找洗手间取决于标志的大小及步行的距离。为了满足这两个标准,标志设计得更大、更容易接近。

 

设计应用

图片

▲ 左侧页面的CTA按钮很小,没有突出显示,与表单的其他元素基本上没有区分;右侧页面CTA按钮尺寸很大,能让用户清晰识别。

 

2、希克定律

图片

决策所需要花费的时间随着选择的数量和复杂性增加而增加。

 

现实中的应

图片

与餐厅相比,快餐店的菜单选项有限。因此顾客点餐速度更快,门店提供的服务也更快。

 

设计应用

图片

▲ 在Whatsapp上转发消息时,会在“最近聊天”列表上方看到“经常联系”的3个好友。这对用户来说是一种简单的交互,帮助用户节省操作时间。

 

3、共域定律

图片

被一个显而易见的边框包围起来的多个元素,被视为一个群组。(从属于格式塔理论)

 

现实中的应用

图片

在服装店中,衣服按照类型被分到不同的架子上来展示,即使对这家服装店一无所知,顾客也会将一个货架内的商品关联成相似的东西。

 

设计应用

图片

▲ 过滤器被封闭在产品页面之外的单独区域中,因此可以清楚地识别左右两部分的差异。

 

4、雅各布定律

图片

用户将大部分时间花在别人家的网站(产品)上,而不是你的。这意味着他们希望你的网站(产品)跟别人的有相同的使用方式。

 

现实中的应用

图片

假设家中的阳台是一扇推拉门,我们可能希望酒店的阳台门也以同样的方式操作。因此如果酒店有一个滑动门,我们可能会下意识地先去推门。

 

设计应用

图片

▲ 以上是国外知名的电商网站导航栏设计,这几个网站导航栏中显示的信息及其结构都非常相似:左侧是品牌标志,中间为搜索栏,右侧为其他选项(购物车/个人账户)。

 

5、系列位置效应

图片

用户更容易记住系列中出现的第一项(首因效应)和最后一项(近因效应)。

 

现实中的应用

图片

我们通常更容易记住某个电话号码的前4位或后3位,这条法则也是银行卡号被分成4组数字的原因。

 

设计应用

图片

▲ 在亚马逊主页上,网站的第一部分总是显示最重要的内容:导航包含logo、搜索和其他重要功能;轮播图通过图形设计吸引用户的目光,引导新的交易或优惠。

 

6、冯·雷斯托夫效应

图片

又称隔离效应。当存在多个相似物体时,与众不同的物体最容易被记住。

 

现实中的应用

图片

在商场购物时,相较于普通装饰的门店,我们更有可能记住或将注意力转移到具有霓虹灯效果的门店上。

 

设计应用

图片

▲ App上有新消息时,会在图标上用红点显示,这样的提示更清晰和突出,从而吸引用户的注意力,引导用户点击并查看消息。

 

7、审美可用性效应

图片

用户通常认为漂亮的设计更易用。

 

现实中的应用

图片

当参观汽车展厅时,我们通常会对汽车精美的展示感到惊叹,并立即对这个品牌产生积极的印象。

 

设计应用

图片

▲ 在爱彼迎上,我们住在陌生人的房子里,因此建立双方的信任是必要的。当访问像爱彼迎这样干净简洁的网站时,我们会下意识地信任这个产品,也确保了用户对品牌的信任。

 

8、峰终定律

图片

人们评论体验优劣,大多基于峰值和结束时的感受,而不是所有环节的平均值。

 

现实中的应用

图片

在足球比赛中,整场的观看体验将根据比赛结束(谁获胜)和比赛高潮(谁进球最多/比赛中最激动人心的时刻)来判断。

 

设计应用

图片

▲ 在夜晚非常饥饿的时候,我们使用订餐App选择食物时,却被告知付款失败。这时候App界面设计的再好看也无关紧要,订餐失败就是从这次体验中收获的结果。

 


 

原文地址:Clip设计夹(公众号)

作者:Clippp

转载请注明:学UI网》用户体验设计法则应该怎么用?来看看这些应用原理!

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



用设计诠释搜索热点

seo达人



图片

 

设计思考及诠释方法

我们先要去了解用户是如何消费热点内容的,基于用户情景认知链路分析用户在事件消费的链路,可以分为三个重要节点:1.热点环境的感知;2.热点事件的理解;3.事件观点的产生。

图片

结合用户的消费路径,我们将设计逻辑框架拆分为三个层级:

1.氛围背景层:分层呈现热度氛围,辅助用户感知热点环境;

2.信息内容层:精细化拼装管理,帮助用户理解热点事件;

3.功能互动层:轻互动玩法设计,激发用户参与抒发事件观点

图片

 

1. 热点环境感知:分层呈现热度氛围

从氛围表现层面,助力用户更快速的辨别事件的热度及重要程度。设计师结合搜索热点使用场景以及业务时效性配置诉求,归类了两种设计表现层次:1.日常热度氛围  2. 大事件热度氛围

1)第一个层次:日常热度氛围

主要应用于热点新闻场景,时效性要求高,同时事件热度也会在:“发酵爆发消退” 间实时变化,设计根据热度“强弱”程度需求,划分两档视觉展现阶梯,以自动化的方式展现,满足热度的实时变化需求,辅助用户感知当前事件热度。“低热氛围”弱标签设计用以展现上升/今日热点,“高热氛围”色彩背景通顶效果+上榜标签用以展现上榜热点。

如,“马斯克收购推特”,搜索热度持续上升,以第一阶梯-标签方式展示低热氛围;在 “马斯克收购推特” 的事件热度不断增长,成为热榜事件后,以第二阶梯 – 高热氛围自动匹配 ,通过背景及榜单标签的呈现,明确告知用户当前事件的火热程度。 

图片

 

2)第二个层次:大事件热度氛围

主要应用于热点大事件或运营活动场景,个性化展现要求高,同时事件关注度及重要程度也不同,设计根据事件的关注度及重要程度划分为两档阶梯,以人工配置的方式展现,超强的运营氛围,可以让用户充分感知当前事件的重要程度,“A级氛围”头部叠加场景元素设计用以展现大事件,“S级氛围”整页沉浸式视觉设计用以展现重大事件。

如,冬奥会,重大事件,选用第二阶梯 S级氛围,打造超强的运营大事件会场认知。

图片

 

前置突发大事件氛围设计

近几年我们不断的经历各类突发大事件,如:疫情/暴雨/名人逝世等等,每次突然发生的事件都让设计师措手不及,匆忙产出运营氛围设计方案紧急上线,保时效就很难保障质量,因此我们在想能不能总结事件类型提前储备设计,以备不时之需。

不同突发事件会牵动网友不同的情感情绪,比如河南暴雨,我们为受难同胞担心,为救助工作加油,为逝者哀悼;火箭发射成功,我们骄傲喝彩;名人结婚,我们送上温馨的祝福。不同事件带来不同的情感情绪,也要求设计师要用准确的视觉语言表达。

因此我们在前置设计时也充分考虑了事件情感因素,通过对近一年突发大事件的归类梳理,并推导不同细分场景下的用户情绪,通过情绪分类的方式,总结两种视觉设计表达形式:1.实景图合成效果满足严肃/庄重/权威场景情感需求;2.手绘效果满足积极/欢快/庆祝场景的情感需求。结合以上思路我们共储备6大类20个子分类场景的前置氛围+金刚位等运营物料设计,保障突发热点运营设计质效。

图片

图片

截至22年Q1,前置设计已在38个热点场景应用:

图片

 

2. 热点事件理解:内容精细化拼装管理

为满足用户不同事件场景下的信息需求,设计结合百度搜索:主要内容区(主要需求满足)+ 延展内容区(延展需求满足)的综合聚合能力,通过组件分区布局+精细化规则管理,为热点场景内容的高效拼装打好体验基础。

1)主要内容区

主要内容区,能够帮助用户快速了解事件的主题、时间及主要内容,结合热点事件长期的需求沉淀,设计将主要内容区又细分为主题区域及内容区域主题区域可承载拼装事件主题、事件倒计时、会场分发导航等主题类组件;内容区域可承载拼装图文/视频/直播等事件主体内容分发组件。通过不同区域内组件拼装规则的制定,业务可以快速选择所需组件进行页面组织拼装,达成分场景个性化满足用户主需求的目标。

如:元宵晚会,热点主要内容区 以“ 晚会直播时间倒计时+ 各卫视晚会分会场导航+图文内容 ” 组件支撑起重大晚会预热期的事件主需求满足。

图片

因为有设计拼装规则,不同大事件活动,各场景内容可个性化满足需求,交互布局设计上又可兼顾横向一致性。

图片

 

2)延展内容区

延展内容区,能够帮助用户了解事件相关知识信息或提供事件相关服务。业务可根据事件场景需求,选择多个延展内容模板与主要内容区进行拼装,搭建完整页面以呈现不同热点事件内容。

如:俄乌战争-战事场景,脉络卡帮助用户快速了解事件进展 ;冬奥会-赛事场景,数据卡帮助可视化呈现赛事进展;博鳌亚洲论坛-会议场景,百科卡帮助用户科普相关名词知识。

图片

 

3. 事件观点产生-轻互动玩法强化参与感

通过氛围打造和内容组织,已经达成用户需求满足的目标,但到此截止,搜索结果的体验还是理智疏远单向的,搜索场景与用户、用户与用户间也无法产生对当前热点的讨论与态度表达。因此设计师对用户的互动行为认知习惯进行分析,并采取具体的设计策略逐步引导用户参与互动。

图片

 

1)互动唤醒 – 吸引围观增强互动意愿

优化前的热搜结果页,用户的讨论内容都是隐藏在资讯落地页评论区内,需要点击进内容落地页内才能参与“围观”或“讨论”,除互动氛围已脱离当前场景外,也削弱了用户对此事件表态的参与积极性。

通过弹幕滚动+输入框组件组合外显的交互设计方式,将用户讨论外露,不仅丰富热点事件搜索场景的内容维度,同时基于从众心理,进一步刺激用户的参与欲望。弹幕结合事件类型配色来更好贴合热点事件整体环境氛围。

图片

 

2)情绪抒发-轻互动玩法降低互动门槛

而投票表态+弹幕轻互动组合效果设计,能进一步降低用户交互心理门槛,让用户动一动手指就可以参与其中。在表态/投票抒发情感的同时也可以发弹幕聊聊对当前热点事件的看法,使用户互动情绪表达更充分。

图片

 

3)惊喜反馈-强化视效打造记忆点

原有设计风格,无法在去世祭奠、颁发勋章等庄重严肃场景精准的表达视觉情感,无互动反馈状态仅有互动前后状态变化。

结合热点场景积极外放情绪及庄重内敛情绪,视觉主要从形/质两个维度进行优化升级,并增加互动反馈动效,同时运营可结合具体事件主题配置,综合提升互动惊喜效果,打造产品记忆点。

视觉层:通过更立体的形态和更丰富的层次质感,更精准的表达情感

图片

动效反馈层:以主图形+辅助元素,通过符合场景氛围的动态效果设计,更充分的表达情感

[优化输出图像]

[优化输出图像]

运营主题配置:在日常反馈基础上,增加运营主题配置层级,为特定主题场景提供定制反馈效果

源图像

 

写在最后

通过热点环境感知分层呈现、内容组件合理布局拼装满足等设计手段,助力搜索平台以更高效丰富的内容展现形态应对全年3万+热点大事件运营。会场拼装呈现系统的应用场景也在不断扩展,如营销活动、品牌造节等。设计不会止步于此,我们将基于用户需求不断探索深耕,为用户呈现更快速、准确、全面、有温度的搜索热点体验。 

 

原文地址:百度MEUX(公众号)

作者:百度APP用户体验

转载请注明:学UI网》用设计诠释搜索热点

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



做了近百个网页,总结的高质量设计方法

seo达人


图片

图片

 

0设计网页中遇到的问题

面对企业级中后台庞大且复杂的集合,会面临各类问题:

  • 业务多,资源少
本多个需求同时跟进,项目多且杂从而产生超负荷。也不便于更好地理解业务。
  • 人力成本高
设计资源有限,设计完成后需要和不同业务线开发进行多次设计走查,影响设计师提效。
  • 没有品牌性
针对b端产品,多样性设计无法形成品牌特性,传达品牌特色,导致中台业务线繁多但不“精致”
                         
  • 体验差

官网设计中也有很多相似功能,面对繁多需求,设计者快速做出响应会产生重复劳动成本。只能做到满足功能,用户体验并不是很友好。

图片

 

0突破问题

通过总结之前的工作,发现很多设计内容有50%以上的重复率,我们要做的是将这50%重复率形成设计体系化,建立资源整合,搭建规范化官网模块,并把模块设计反推给产品,在提高设计效率的同时也减少产品工作,减少协同成本。

通过“收集需求——整合归纳——定义组件——代码搭建“ 的过程提升设计效率。       

  • 第一步:整合资源,模块的确立

整合各个业务线资源,并根据业务系统进行分类:数据中台,技术中台,业务中台。面对这三大类别,目前官网需求量会达到几十个,而面这些繁多网站需求,首先要做的就是整合分类。

 

通过对对业务线归类,统计出高频15+个组件模块:

Banner、产品优势、产品特色、案例、信息内容、信息流程、合作方、联系我们、关于我们、使用流程、功能介绍、手机\电脑信息展示、合作方、地理地图、其他模块等…

图片

  • 第二步:模块梳理归类

并更具根据模块类别的复用率进行再次梳理,产出设计模版。模版根据设计形式、排版布局等方面进行进一步延展,复用率高的模块对应模板更丰富。

图片

 

0设计语言(理念)的建立与模块产出

  • 设计风格建立

视觉体系上,B端产品不同于C端,设计更多为体验服务,色彩的丰富度相对较弱,单一。要突出b端设计,我们决定从精致性上为切入点,选定“轻拟态”风格,即突出设计的细节性又不会因为过度设计影响内容。并根据业务体系与设计风格,完善设计语言关键词提炼:科技、高效、简约。

 图片         
  • 字体与颜色规范

色彩能够起到视觉语言传达和信息承载作用。企业级产品延用了matrix 的配色体系,以蓝色调为主色,同时模块产出深浅色系,便于多方面选择。

图片图片

  • 设计布局

采用删格系统定义布局,根据首页和内页展示形式进行基础布局

图片         
  • icon再创新

图标也进行三大层级划分,以应用于不同场景:

图片

3D图标

3d质感图标。用于重要层级模块,数量控制4个以内。

图片

图片

玻璃球图标

磨砂玻璃风格已经广泛应用于ui产品中的很多地方,我们在磨砂玻璃基础上,创新新的icon风格“玻璃球”icon,该风格能更换的和轻质感设计融合在一起,用几何元素设计,通过拼接组合和系统icon设计,能够在短时间内快速产出立体icon,适用少于8个类别的模块icon。

图片 图片

图片       

图片

图片

轻拟态线性图标

3d线性图标适用于多场景模块,可大范围出现在页面中。

图片         

三维设计

banner模块分为3d三维风格和二维平面图片,根据不同业务线定义使用规则。如商业,公益相关产品,选定图片作为banner展示更能准确传达信息,而技术类官网用3d效果更能传递科技性。

图片

图片

同时定义多种banner布局:左文右图,文字居中,banner加搜索模块,图片banner等,

可根据需求自由选择。

图片

图片

图片

几何化形的装饰元素

为了体现网页设计的“空间感” 网页设计中加入几何元素穿插,根据业务品牌语言 圆、三角、方定义辅助装饰元素。(圆-业务 ;方-技术 ;三角-数据圆、三角、方定义设计几何元素)

图片

图片

多样性变化 

为官网模块的产出依据业务线,在建立规范化组件的同时也需要考虑设计中的“区别性”业务线-营销产品,更多体现商业性质设计采用暗色系,而技术类官网更多体现科技感,加入3d元素。在同一模块的设计也加入背景白色/暗色和模块的亮色/暗色。

图片

图片

图片

 

0实际应用

目前我们已经产出50+模块,10个+网页模版,通过代码化,建立“云搭”这一网页生成工具,建立中台系统在生成平台,目前已经支持多个业务线。从设计产出模块到开发实现模块代码话再到产品拼接选择,整体过程节约了设计资源,为产品研发提效提供一站式解决方案。

后续我们将发布云搭二期文章,会为大家介绍设计师是如何从产品、交互思维,自主研发“云搭”这款工具的,敬请期待。

图片

图片

原文地址:58UXD(公众号)

作者:环铁艺术家

转载请注明:学UI网》做了近百个网页,总结的高质量设计方法

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



交互设计师专业能力体系

seo达人


一、交互设计师能力模型图

图片

 

二、交互岗专业能力描述

能力模型图中的每个点都可以很详细的写一篇专题文章,本文不做过多展开,只是抛砖引玉:大家说明具体能力维度可提升落地的点有哪些。其中一些能力点我之前的文章中也有提及,以后有机会我会针对其他能力点单独梳理文章。

基础专业能力 

图片

1.对业务与产品的理解

一直在强调交互设计师要尽可能前置到业务中,在设计工作的起始阶段对业务背景、业务目的、现阶段存在的问题、产品规划有一定程度的了解,为后续设计方案提供决策依据。

除了承接上游需求,许多设计师自主驱动的需求都建立在对业务的综合了解基础之上,如果仅是体验设计层面的优化,实践中很难获得上下游同事对其价值的支持和认可,想要落地就更加无从谈起了。

可以从以下几点逐步加强对各业务线、各终端产品的理解:

  • 了解各个业务线或产品的阶段性或长远规划。
  • 多与产品经理、运营等上游同事沟通,深入了解产品发展的历史缘由。
  • 通过用研分析逐步了解不同产品的优势与不足。
2。需求分析与设计规划

需求分析主要是指与产品经理的协作配合,有时候也会直接与运营、销售或者客户对接。交互设计师介入一般有两种方式:

A. 业务方诉求明确,产品需求初稿规划完成,此时交互设计师介入,基于产品需求目的给出体验设计层面的建议。

B. 只明确了要实现的业务目标,产品需求尚未明确,需要交互设计师与产品经理或业务方一起沟通共创,相当于协助产品明确需求的过程。

在这个阶段,交互设计师需要注意以下几点:

  • 了解需求的背景与目的,需求方案的合理性,针对需求不合理之处提出质疑并综合考虑给出建议方案。
  • 需求分析与设计规划时要尽可能平衡业务诉求、用户体验、技术可行性与实现成本等因素。
  • 查看需求文档虽然是基本功,但是对于新人而言这里容易踩的坑比较多。不同产品经理描述风格与方式不同,也难免有一些规则遗漏,所以查看时若存在问题及时与产品经理沟通。
  • 经过需求分析,交互设计师可以推导出整体的设计目标与设计策略。
3.设计规范与组件

设计规范是基于设计语言或设计指南而来的,不同公司产品会有不同的定义。根据业务复杂程度和产品特性,一些公司会梳理自己的设计规范,交互设计师重点关注交互层面的规范,也需要对视觉规范有一定了解。

设计组件是以设计规范为指导原则,为提升产研协作和开发效率而设定的UI组件库。这里需要注意:

  • 设计组件一般分为基础组件和业务组件,基础组件类似Ant Design;业务组件则是依据公司具体产品使用场景决定的,比如电商类应用:产品列表的产品信息、直播模块等频繁被调用的、由多个基础组件组合而成的内容。
  • 由于不同终端交互设置和操作方式存在差异,所以可能会有针对移动端、Pad端、Web端、TV端等多终端设计组件。

大家可以参考iOS人机交互指南与谷歌的MD系统级设计规范;目前市场上有许多开源的设计基础组件,比如Ant design、滴滴、腾讯、京东、有赞、饿了么等。

4.交互文档

设计方案具象化的呈现依靠“规范的交互文档”,输出交互文档注意以下几点:

5.交互基础原则

这部分内容涉及到交互层面的一些“参考规则”,之所以叫参考规则是因为不是必须遵守,可能针对不同业务和产品会做适当补充或删减。比如页面打开方式研究、尼尔森可用性原则等。可以通过阅读一些专业书籍掌握理论知识,然后在实践项目中应用总结。

6.主持各类沟通会与评审会

交互设计师在日常工作流程中,会参与不同类型的会议,比如需求讨论会、需求评审会、设计评审会(交互与视觉内评与外评)、测试用例评审会、开发问题讨论会等。有的会议交互设计师作为参与方,有的作为主导方,因此需要对会议节奏和效率综合把控。

对于新人或初级交互,可以选择性地参加其他交互同事组织的以上相关会议,了解和熟悉如何高效开会达成会议目的。

7.评估设计排期

在日常项目流程中,需求评审过后交互设计排期需要首先给到,下游的视觉设计师、前端研发、甚至包括后端研发、以及测试工程师都需要根据交互文档给出各自更加精确的排期。

因此评估交互排期在项目流转过程中非常重要,如果评估排期少了无法按时交付,可能会造成下游同事时间不够,甚至导致项目延期;如果评估排期多了,对于有上线时间要求的项目,总体时间可能又会不够。

所以交互设计师只要做到根据自己手头时间客观评估即可。这里对于新手或初级交互而言,有两点注意事项:

  • 承接的项目类型由简单到复杂过渡。
  • 交互排期需要包括“需求沟通时间、设计方案输出时间、评审时间、评审后调整时间等”,刚开始排期可以给自己多预留1-2天。

对于一些项目周期紧张或者频繁变更,导致设计输出时间增加的需求属于特殊情况,需要另当别论。

8.明确交互验收内容

关于交互验收的流程和验收的具体内容,我之前有梳理成一篇文章可供参考:如何做好交互验收?

9.软件工具

既需要熟练使用设计相关的软件工具,比如交互常用的Axure、Figma、思维导图工具等;也需要跟上“软件出新的步伐”,比如Figma这种云端多人协作的设计工具诞生之后,过往使用Axure的交互设计师和使用Sketch的视觉设计师,都对它青睐有加。

 

进阶专业能力

图片
1.对用户与使用场景的理解
这块属于用研相关的内容,对于设计师而言一直在强调“平衡商业目标与用户体验”。通过参与或者使用一些定性或定量的用户研究方法,去真正理解产品对应的用户特征、用户想法和用户使用场景。我们可以通过以下方式逐步提升用研能力:
  • 查阅公司内部已沉淀积累的用研资料。
  • 掌握并应用常用的用研方法,如“体验走查、竞品分析、AB测试、可用性测试、问卷调研、用户访谈等”。
这里有两点注意事项:
  • 有些公司可能没有资源推进用户研究,但至少你需要先掌握相关理论知识,学到的有价值的东西在未来总会用到的;
  • 还有一些公司有专门的用研部门,在用研方法和工具使用方面会更加专业,这种情况设计师与用户研究员协作配合会更加高效。
2.数据意识和数据分析能力
许多设计师在项目中估计都在思考一个问题:设计如何赋能业务增长?既然要衡量,那么数据指标就是最客观的依据了,数据虽然不能完整体现设计价值,但至少可以验证部分设计方案的优劣。这里设计师需要注意以下两点:
  • 在日常工作流程中具备数据意识:无论是需求前期的分析阶段,还是设计开始实施之前,亦或是需求上线后的效果复盘,数据都作为有力的客观佐证,为你的设计决策提供依据。
  • 培养数据分析能力:实际项目的数据分析过程可能会非常复杂,涉及到不同类型的数据指标、数据分析方法的应用、数据查看与配置工具、复杂的业务因素等等。需要你对业务和数据都比较了解,是一种综合能力的体现,需要日积月累的打磨。
3.发现问题的主动意识
在工作中无论是同事还是上级领导,都特别喜欢态度与行动积极的人。不要总是等着所谓的上游或者上级安排任务,自驱力要强,随着工作经验的累积,主动的发现问题、寻找解决方案、并推进问题解决。这也是区分不同水平设计师的标准之一。
4.思维方式
从认知心理学的角度分析,做一件事情经过“思想-决策-行为-结果-反馈”的过程,之后便进入了这个过程的一种正向或负向循环,所以思维方式是决定最终结果的本源。
对于产品设计者而言,需要重点打磨这几项思维能力:
  • 逻辑思维:分析和拆解复杂问题的能力。
  • 产品思维:多维度考虑用户需求与业务诉求。
  • 数据思维:掌握数据的收集、分析和应用。
  • 系统思维:逐步学会结构化、体系化地看待问题。
5.视觉审美
目前在大多数公司有明确的交互岗和视觉岗,在工作流程中各有专攻,交互设计师在产研流程中发挥“承上启下”的作用,所以需要了解视觉层面的理论知识,具备初级的视觉输出能力。
一些公司设定了“体验设计岗”,虽然号称是全栈型设计师,但专业能力还是有主辅性:比如主要专业能力偏交互,也具备一定的视觉专业能力。在互联网发展的早期只有视觉岗位,后来诞生了交互岗位,目前所谓的全栈体验设计师也是从最初的一个角色蜕变而来的。
各自分工协作有助于产品迭代的高效性,交互偏向于业务和产品端,注重逻辑梳理和需求分析;视觉重点是表现层、品牌调性和运营活动的形象展现。

 

通用能力

这部分内容我之前特意写过相应的文章,参见:交互设计师该如何提升“软实力”?

 

个人影响力

图片
相信每位产品设计从业者在职业生涯中都处于不断升级打怪的状态,组织内你希望能够持续晋升,组织外可能有人希望通过社交加强专业交流和学习。无论组织内外,建立个人影响力的有效方式大概有以下几点:
  • 设计分享

    不限于具体形式,包括日常项目总结、软件工具使用、设计方法论应用等。对内分享促进部门内学习提升;对外通过输出专业文章等方式分享,沉淀积累的同时,也能帮助有需要的人,顺带还能结交一些靠谱的朋友,不亦乐乎!

  • 设计指导

    当你已经是有几年工作经验的中高阶设计师,带教新人是一种传承责任,我们都是从初出茅庐一步步经历过来的,非常理解眼前这个行业小白有多么渴望在正确的指引下持续努力。多给予别人帮助,毕竟予人玫瑰,手留余香嘛!

  • 设计创新

    许多人一听这两个字就觉得有点可笑,该做的事情还没做好呢就谈创新?其实创新在我理解更多是一种“微创新”,可能会体现在你的每一次需求洞察中、设计方案的细节中,不要小看微创新,点滴积累之后,你会比别人更有想法和竞争力。

 

写在最后:

设计师不能总是输出,更要持续输入才会有源源不断的创造力!想要系统地学习专业知识,性价比最高、成本最低、也最靠谱的方式是系统性地“阅读专业书”。后面我会写一个系列的专栏文章推荐“设计师必读的专业书籍”。

 

原文地址:人人都是产品经理

作者:Viksea

转载请注明:学UI网?交互设计师专业能力体系

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



Behance 首页推荐的作品集为什么这么高级?为你拆解其中7个秘密

seo达人


1、错开对齐

如果你对自己的排版不是太自信,又担心排版太死板,错开展示是一个很容易上手的技巧。只需要把界面稍微错开一下,展示效果就会好很多。下面就是一些Behance大佬用这种手法做的展示效果,可以从背景,作品摆放比例,留白,间距和错开幅度上进行研究学习。

图片

图片

图片

图片

图片

图片

图片

图片

 

2、增加层次感

为了增加展示细节,丰富层次是一个非常好用的展示技巧。如果你的作品界面在视觉上比较寡淡,那么把一些界面元素提取出来,利用投影加多层次感,视觉效果上就可以很快得到提升。这个技巧在执行上也比较简单,关键要注意投影的大小和颜色,千万别做的太重。

图片

图片

图片

图片

 

3、出界设计

有时候,一些界面元素确实视觉效果好的元素太少,比如很多B端表格的界面,用这种方法可以增加画面中的图片率,将本来隐藏在界面外的图片进行出界展示,更多利用图片提升画面的设计感。

图片

图片

图片

图片

图片

甚至可以将banner图中的元素进行出界,增加设计感。

图片

 

4、倾斜设计

倾斜设计,也是一个提升设计感的常用技巧。先在正视角度下摆好,利用技巧1错开一下界面,然后整体旋转一个角度就能很好的提升画面表现力,增加设计感。但要注意用这个方法的时候,要保证界面元素的清晰度,不要出现锯齿。

倾斜后也可以适当增加一些圆点点缀

图片

把一些UI 组件斜角后,结合层次感设计技巧

图片

图片

倾斜设计+出界+底部方块装饰

图片

倾斜设计后,增加一些半透明的装饰层次设计

图片

 

5、3D厚度设计

现在3D设计非常流行,把自己做的界面增加一定的厚度然后结合倾斜设计,也能快速提升界面的设计感。

但因带有倾斜,很容易出现锯齿。我有一个常用的小技巧是做的时候可以把图做大一倍,然后再缩小放到作品集中,就能提升清晰度。例如我要做一份1920×1080的PPT,那么我就会先做一个2x 尺寸,也就是3840×2160然后再缩小,会比你直接做1x尺寸的图要清晰很多。

把界面增加3D厚度后,再稍微加一些比较轻量的3D装饰元素,常用的有小球、方块等3D元素能让画面效果更好。

图片

图片

图片

图片

图片

图片

图片

图片

 

6、增加底图设计

这个技巧要注意让界面与背景图自然融合,关键在于需要找到一张非常好的图片,考验选图的能力,存在一定的风险。如果你对这种包装方式不大放心的话,建议你谨慎使用。

比如这张图,细节点在于界面左边浅色配上底图中左边的白,右边深色界面搭配右边深色的山体颜色,看起来就很和谐。

图片

下面这张图用了一个跟界面中配图同一个调性的图片,为了防止干扰界面,还加了一点高斯模糊,效果也非常不错。

图片

这张图的底图用了一些比较具有设计感的图形,整体比较简洁高级

图片

常用的一些底图元素还有圆形,点等等

图片

图片

图片

图片

用一些插画元素作为底图也是非常不错的

图片

 

7、套用样机来展示

前面提到的很多实用技巧,能看到都是不需要用样机的,我自己更倾向于不用手机模型来展示,即使要用也是比较轻量的那种。有看过不少同学的作品集,其中的样机用的太过了,不知道的还以为你成了卖手机的作品集。这也是我放到最后一条来说的原因,我更推荐你在不使用样机的情况下把自己的作品展示做好。

当然,如果用样机也没什么大问题,原则还是为作品服务的,保证清晰度,不抢作品本身的视觉就OK。用上了样机,它就成了你作品的一部分,要保证样机是最新的,且质量要高。

关于样机的话,彩云之前也帮大家找了一些非常高质量的样机资源,需要的话可以点击下面的文章看看内容,并找到获取方式下载使用。

2021年全网最新品质最好的样机资源被我找到了,免费分享给你!

2021年全网最好的样机资源都在这里,收藏这一篇就够了!

图片

图片

图片

 


 

原文地址:彩云译设计(公众号)

作者:彩云Sky

转载请注明:学UI网》Behance 首页推荐的作品集为什么这么高级?为你拆解其中7个秘密

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



无需手绘的AI矢量扁平几何风基础插画:《鲜果派对》海报

seo达人


image

 

工具

工具:AI(Adobe illustrator)

适合:零基础入门

 

扁平风的基础思维准备:几何形组合造型

几何形一直被视作是抽象造型的基础元素,通过几何形有意识的相互叠加组合,就可以使得这个造型呈现出可识别的对象,比如我们在这个教程里所表现的那样:用几何形画水果。

比起细腻丰富的传统画法,极简的几何平涂造型所创作的水果,看起来有着别样的生动的特质,摆脱了对水果表面质感的依赖,转向对形色的探索,是扁平插画的基础思维。

常用的几何形是:圆、方、三角,在这个教程里,我们就运用矢量软件AI(Adobe illustrator)进行创作,接下就开始来打造我们的《鲜果派对》海报吧。

image

 

用方形塑造苹果基础形

常见苹果的画法可以是圆形起步,也可以是从方形开始。

STEP 01

打开AI,新建一个文档,运用粉色画出一个正方形,这就是苹果的起始形。起始形非常重要,它决定了接下这个苹果的形状走向。

然后,我们把这个正方形改变为梯形,改变的方法有很多种,这里我们利用变形工具,进入【效果>变形>弧形】,在变形工具的面板里,将垂直这个滑块调整为-15%。

image

STEP 02

在选中上一步所变形成为的梯形的基础上,进入到【对象>扩展外观】对它做一次扩展外观。

扩展外观就是让这个形状真正变为矢量梯形的路径,如果没有做这一步,这个形状看似是梯形,其实还是原来正方形的矢量路径。分辨真假梯形也很简单,只要选择这个形状,看到路径的走向仍然是正方形,那就是假性梯形,这就需要为它做一次扩展外观。

image

STEP 03

然后再选中这个梯形的基础上,单击左边的工具栏里的【直接选择工具】,就会看到四个角内分别带有四个很小的圆点(仔细看是一个同心圆),拖动它,你会发现它会控制这个角,将它从锐利的角变为圆弧。

根据圆弧离形状中心的距离多少,弧度也会相应发生变化。

image

好了,苹果的基础形就完成啦~

 

细节的魔力

我们开始为苹果增加叶片,叶片的画法首先也是要从基础几何形开始慢慢演变而成。我们在叶片这个部分提供的基础几何形同样是正方形。

STEP 04

用蓝紫色画出一个正方形,然后再复制一个正方形,将这个复制的正方形旋转45°,变为菱形。再复制第一个正方形。于是我们得到了两个正方形和一个菱形,将它们像下图所示拼起来。

然后再选中这个组合造型,进入到【窗口>路径查找器】,在路径查找器的面板中运用【联集】将它们拼合成一个独立的封闭的路径。

image

STEP 05

然后再利用控制形状角度的小圆点,就像STEP 03那样分别选中下方以及左右两边的圆点,将角转为弧形。一片叶子就这样制作而成。

image

问:感觉似乎这样的方式比较麻烦,为什么不直接用钢笔工具画呢?

这也是我在这一风格的画法中想要重点强调的:尽量避免使用钢笔工具,而用几何形进行转化,是保持扁平风格中几何感和抽象感的诀窍。

因为手动画出的路径毕竟不会特别严谨,这时就难免让扁平风格失去了它本身的风格特点,而这时如果没有较强的结构感,整个画面就会看起来”平淡“甚至”无趣“。

其实叶片的造型也可以探索出其他的几何方式进行组合构造,本文只表现一种方法。其他的方法,可以留给你下去尝试。

STEP 06

这时,把这个叶片的形状的混合模式改为“正片叠底”,利用叠加的视觉效果增加画面的几何感和时尚感,这是在我们过去写过的文章《超级可爱!插画萌新必学的PS极简马克笔简笔画:盆栽篇》以及相关系列文章也都运用过类似的技法。

image

STEP 07

最后,用线条增加最后的细节。这里所用的线条是较细的3px的黑色线条。这里的线条粗细要根据形状本身的尺寸大小比例来确定。总之,对细节的描绘可以克制一些,不要太过复杂。

利用线形的组合以及形状叠加的视觉效果,扁平风的简约苹果元素就画好了。

image

 

准备好元素,完成海报

STEP 08

蓝莓的画法从矩形起步,对矩形的组合以及成形的演变方法,是我们重点要训练的对象。中间的步骤我们已在文章前面详细叙述过了,这里就不再重复。可以继续用这个方法演练下去。

image

STEP 09

画草莓的时候,运用了两个梯形进行组合。利用叶片造型进行叠加,也能增加图形的魅力。

image

STEP 10

我们把其他的水果元素也画好,我这里准备了一些比较可爱的樱桃、西瓜之类,你也可以画点菠萝、芒果之类,注意要把握每一个水果的基础形特点,然后在细节的部分加以强调

image

把每个水果元素放到海报的设计中时,要考虑的还有对水果元素之间的间隙的疏密均匀程度,元素可以较大,有些元素甚至可以渗出到海报之外,这样会让视觉效果更为延伸。

如果经过路边有家鲜果店,挂上这样一张海报,应该效果是不错的吧~ 先自我陶醉一波~

image

最后,献上我的同类作品集小站

当然,如果你想要临摹或者参考更多,可以通过访问下面这个网站,我在这里会放入更多类似的作品,继续保持对这类风格的探索。

image


 

原文地址:飞屋设计

作者:飞屋睿UIdesign

转载请注明:学UI网》无需手绘的AI矢量扁平几何风基础插画:《鲜果派对》海报

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



LOGO 设计技法(第三弹)

seo达人


1. 多层次线条渐变 LOGO(形状分割)

2. 条纹隐形立体 LOGO(封套扭曲)

3. 条纹穿插 LOGO(新建画笔工具)

4. 角度渐变穿插 LOGO(描边角度渐变)

5. 半透明光影 LOGO(混合工具)

6. 时钟大小渐变 LOGO(替换混合轴)

7. 不规则球形 LOGO(3D 贴图)

8. 原研哉的LOGO(混合工具)

 

如果有跟我一样不爱看文字的宝贝,可以划到底部直接去看结尾处的视频版本哦。话不多说,跟着我来细细分解一番。

PS:本文所有案例均来源于网络,只用作分析技法。

图片

图片

首先我们来分析一下这个 LOGO,整体是由一些线条组成。长短不一的线条,通过渐变的明暗处理形成了字母 D 的轮廓。如果是使用常规的方法,一条一条地画完线条,调整长短再组合在一起,那还不得加班到凌晨?学了这个方法让你再也不用加班,来!

图片

首先我们将绘制出 12 根线条,然后给图形填充由黑到白的渐变色。

图片

绘制出两个长方形并左对齐,然后将右边的直角转为大圆角,拉到底的那种。这样就形成了字母 D 的轮廓。接下来就是将两组图形组合到一起了。

图片

为了方便观察,我们将字母 D 的轮廓暂时改为红色。因为渐变色是由上至下的,纵向切割线条不会有明暗方面的变化,我们只需要横向切割,所以将 D 的左侧竖向的线条删除即可。

图片

打开窗口—路径查找器,找到左下角分割的按钮。

图片

全选中左侧的图形,点击切割按钮,就得到了左边的图形。

图片

为了方便观察,我们可以先将左边图形全部改为填色模式,然后将多余的面删除。再调整每组线条的渐变色条,就形成了这种层次关系。

图片

基础层次和效果出来了,接下来还有很重要的一步,需要再调整亿点点细节。现在上去分层太多有些碎了,而且缺少 D 字线左边的竖线,所以可以将一些线条合并,刚好可以形成字母 D 的左边的竖。右边有两根线条过长,所以从间切开增加层次。再调整一下渐变的位置,让整体更协调。

图片

最后,再加上简单的排版就完成啦!

 

 

图片

图片

首先还是分析一下这个 LOGO,是由一些条纹经过错位形成了立体的字母 K,仿佛隐藏在条纹下面。这样的立体效果又该怎么做呢?其实非常简单,来!

图片

首先绘制出由七个长方形组成的条纹,注意条纹的宽度要和间距相等。

图片

接下来就要使用要封套工具了,封套扭曲之前我们先来分析一下需要多少行数和列数。按照节点去划分,最终形成 13 行和 9 列。

图片

打开对象-封套扭曲-用网格建立,填写 13 行 9 列,得到右边的图形。

图片

先打出一个 K 字母作为垫底,根据 K 的结构调整网格。先选中节点向上移动,然后将两侧的节点向中间靠拢,形成突出的效果。

图片

调整中间两条条纹的宽度与字母 K 的中间部分对齐。

图片

左边的是一条垂直的笔画所以只需要全选节点向上移动就可以了,但是右边是两个交叉的笔画,所以处理起来会有点麻烦。同样也是先将笔画中部分的节点选中向上移动(如上图左),然后再根据 K 的结构调整节点的位置。这可是个耐心活儿,需要一个个节点去调整。不过好在节点不多,整得也挺快。

图片

最后,给图形填充色彩加上排版就完成了。

 

 

图片

图片

乍一看,这麻花扭得不错。类似的图形还有咱们中国结,但是中国结是单线形式,绘制相对比较简单。这个是用条纹扭的,看上去更复杂一些。没关系,其实也很简单,来!

图片

首先我们需要新建一个画笔图案,绘制出两组条纹,分别填充红色和蓝色。

图片

打开窗口—画笔面板,将两组条纹分别拖进画笔面板,选择图案画笔,点击确定后,继续确定就完成了新建画笔。

图片

接下来我们把轮廓画出来。先绘制一个正方形,然后将三个直角改成圆角,是的还是拉到底的那种。

图片

将图形整体压扁一点,并将端点继续向外延伸,注意曲线要做到平滑。

图片

选择曲线,点击画笔面板中刚才新建的画笔,瞬间就可以得到右边的图形。

图片

将曲线复制一份,点击另一个新建的画笔。把其中一个镜像翻转后,将两个图形叠压在一起。

图片

接下来做出穿插关系就可以了。我们先来分析应该如何叠压。如上图所指的三个相交处应该把蓝色调整到上面。

图片

最后,再调整下细节,加上排版就完成啦!

 

 

图片

图片

这个 LOGO 的特点在于渐变的类型和扩散的角度是圆形的,AI 里面的渐变却没有这种类型。但是我们仔细观察它是有一个很清晰的切割的边的,这样就可以通过描边渐变的形式去完成了。来!

图片

我们先将图形进行拆解,可以分成三个不完整的圆去组成。那么我们只需要做出其中一个圆形,重复旋转 120 度就可以得到完整的图形了。

图片

我们先来绘制一个圆形,选择描边模式。接着将圆形的描边加粗,加粗至完全覆盖整个圆形的面积(如上图右)。

图片

然后给图形填充渐变色,渐变的模式选择—沿描边应用渐变。

图片

绘制一条直线,旋转 120 度,然后将它与圆形居中对齐。直线作为参考线使用。

图片

使用剪刀工具,将直线与圆形相交的点断开,并删除一部分节点,得到上图中间的图形。然后再将右边的点延伸,就得到了右边的图形。接下来只需要将这个图形进行旋转复制就可以了。

图片

将得到的图形旋转 120 度,并重复复制。注意轴心的位置,在图形的下面并且与图形垂直居中。

图片

最后再加上排版就完成啦!

 

 

图片

图片

光影效果的 LOGO,通常是使用渐变工具来完成。今天我们来使用混合工具尝试一下。来!

图片

首先绘制出 40 的轮廓。先大致画出 4 和 0 的形状,再进行修剪,将 0 的上面和下面的线条断开。4 的每一条线段也需要断开。

图片

复制一份并缩小,放置在右边,将 4 和 0 的距离分开一些。为了方便观察混合后的状态,先把透明度调整至 20%。

图片

将大 40 图形与小 40 图形的每一条对应的线段进行混合。混合步数设置为 500。

图片

接下来,我们再来调整下透明度和细节。为了方便观察,我们先将两个图形分开,先把后面的小 40 的透明度调至 0%,颜色改为白色。色块叠压较重的地方,也需要调整透明度,让整体更通透。也可以将大 40 的线条颜色改为黑白渐变色,这样光影的效果会更强。

图片

最后再将两个图形合并到一起,加上排版就完成了!

 

 

图片

图片

旋转复制的工具,大家应该都会用了,但是像这样的旋转复制的同时,图形的宽度也有规律的跟随着旋转变化,应该又怎样做呢?

图片

首先我们依然是先将图形拆分一下,可以把它看成是由一组等粗的直线旋转环绕加一组像是树叶般有宽度的线条随着旋转而变化的图形组合而成。这里我们给这两个图形起个名字,一个是“直线形”一个是“叶子形”。

图片

我们先将简单的“直线形”图形做出来,先绘制一组横竖交叉线条并建立为参考线,然后沿着参考线绘制一条垂直的直线。

图片

以参考线的中心为轴心,设置旋转角度为 15 度,进行旋转复制。之后重复复制(快捷键 CTRL+D),直至旋转一周。这样就完成了“直线形”图形。

图片

接下来,我们来做“叶子形”图形。先绘制出一大一小两条直线,再将直线从等宽改为有宽度变化的模式。

图片

使用混合工具,将两个线条进行混合,指定步数为 22。取向要选择右边的那个弧形的。这样就得到了 24 个规律变化的叶子状的图形。

图片

一排叶子做出来了,怎样把它们变成环绕形的呢,这就要用到替换混合轴了。首先绘制一个圆形,再把上面切掉一块。

图片

同时选中加圆形和叶子们,打开对象-混合-替换混合轴。就得到了上图右边的图形,已经可以看出“叶子形”的样子了,接下来还需要做一些细节的调整。

图片

先将两图形的轴心与参考线居中对齐。再将叶子图形调整到与直线垂直,只需要调整两端的图形,中间混合的图形会自动跟着变换。

图片

现在“叶子形”已经基本完成了,但是我们发现,使用混合工具后的图形是中心对齐的,而不是底部对齐,所以接下来,我们需要手动将叶子调至底部对齐。

先将图形扩展,然后调每个叶子移动到与线条的底端对齐即可。

图片

最后再加上排版就完啦!

 

 

图片

图片

常规的球形 LOGO,之前的教程已经演示过了。那像这样的不规则的球形 LOGO 又该怎么做呢?来!

图片

首先还是来分析下,这个的构成。上面和下面有两条直线,中间是有很类似 H 字母的形状,后面也是直线。

图片

按照上面分析得到的结果,我们绘制出相应的图形。使用长方形,拼出不规则的图形。最后再将右边的直角改为圆角。

图片

打开窗口-符号。将绘制好的图形,直接拖进符号面板,默认选项直接点确定就可以了。

图片

绘制一个圆形,并删除一半。

图片

选择一半的圆形,选择效果-3D 和材质-3D(经典)-绕转,就可以看到上图的对话框了,默认选项,点击贴图按钮。

图片

打开贴图的对话框,可以看到左上角有一个符号选项,选择刚才新建的符号,勾选右下角三维模型不可见。接下来就调整中间图形的位置,开启预览后可以边调整边看到图形覆盖在球形的变化。调整至合适位置后点击确定就可以了。

图片

将得到的图形进行拆分,解组和释放复合路径后,就可以得到右边的两个图形,接下为他们填充颜色。

图片

正面的图形填充蓝绿渐变色,背面的图形填充较深的蓝色。

图片

最后将两个图形再组合到一起,加上排版就完成啦。

 

 

图片

图片

原研哉为知美术馆设计的 LOGO,由美术馆的外观瓦片提取而来,形成富有变化的水波样。同时,色块规律性的大小变化也组成了字母 Z 的形状。我们来解析一下大师的 LOGO 是怎么做的?来!

图片

首先我们来分析一下方块的变化规律。左边是由上至下逐渐变大,右边是由上至下逐渐变小。中间是从中间向两侧逐渐变小,但是中心不在一条垂直线上。

图片

那第一步画出一大一小两个方块,然后使用混合工具,步数设置为 9。这样我们就得到了由大到小规律变化的一组方块。

图片

那么怎样得到由小到大再到小变化。很简单,将刚才得到的一组方块,镜像复制一份,就可以了。

图片

得到一组图形之后,再将它们向斜上方,连续复制就可以了。注意要将方块错开,行距也要相等。

图片

最后再将多余的方块,删除掉即可。

图片

排版再加上大师的字,瞬间就高级了起来!你学会了吗?

有很多 AI 里面的工具,也许你认识它,它也认识你,但是你不知道它竟然可以干这种大事。来跟我们一起探索巧用 AI 工具做 LOGO 的更多更简单的可能性。

今天的教程就到这里了,下方视频教程更方便哦,任何人看完不跟着做的话我都会伤心的 ooooooooooooooooooK?

 

文末,点击原文地址,可直接观看视频教程 或 文字版本,随你选择;

 

原文地址:胡晓波工作室(公众号)

作者:yoyo

转载请注明:学UI网》LOGO 设计技法(第三弹)

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



关于设计师作品集那些事2-提升篇

seo达人


1.顺叔有话说

各位广大设计师朋友们大家好!送走2021迎来新的一年2022,我们又见面了,好久没写设计干货了,不知大家是否还记得当年那个夏雨荷,啊不对~~是当年的那个顺叔,已经有一些小伙伴留言,私信我催更了。

最近顺叔正好有一些时间,可以去沉下心来写一篇设计干货。我是一个比较佛性的设计师写设计类文章也是同样的佛系,了解我的人都清楚之前的文章一般时隔时间不是那么规律,原因是我希望更好的沉淀和进行总结,才能分享出来更好的内容给大家。也一直在构思、内容、框架,是否能帮助到一些人,在距之前的一篇《关于设计师简历作品集那些事》已有两年之久,感谢平台,收获了很多粉丝以及单篇17万的浏览量,同样在之前的设计文章干货中帮助了很多人,留言咨询我也给予了一些指导,帮助很多人。有一些设计师顺利进入到心仪的公司以及大厂。从自身方面也挺开心和成就感。 在平台下面有很多留言的朋友,其中有设计师朋友ID:木十一小透明说,“本人以为如果有实例就更好了”的留言。这个必须有,那么今天就安排上,走起。

此篇文章受用于正迷茫,懵B,正在准备作品集冲大厂的你,正好它来了!

本篇文章会是上篇文章的进阶提升2.0版本。之后也会陆续有3.0…本篇会从各个方面进行解析,思路流程,框架,以及作品集的规范性,组成部分等方面进行展开说。通过一些例子让你更清楚如何去做自己的作品集。希望这篇文章结合上一篇作品集文章结合看疗效会更加显著。

好了废话不多说了 开整

 

2.作品集的重要性

作品集的作用不少设计师都知道它的重要性,但往往还有不少设计师不知如何进行梳理、排序、排版,放哪些作品。作为一个设计师需要有一个作品集,作品集是对于你能力上、成长、以及经历上的判断,在众多的作品集中 如何能脱颖而出,这个也是需要一些技巧的。希望能通过本次文章能有所收获。

undefined

现在平台各种的作品集,各式各样,结合现在设计流行趋势是没问题的,但有一些“机构”或设计师对于作品集来说还是有一些误解和跟风,甚至同质化严重。我的理解作品集最初是自己的作品集合到一起进行排版做个整合。最终找工作的时候可以给面试官看的,仅此而已。但现在的情况有所不同,有很多已经忽略了作品集当中的作品能力核心质量,而是在最终的作品集的样式表现使劲,导致现在的作品集华而不实,很多设计师把作品集搞的很漂亮,但核心的能力以及作品薄弱了,忽略了作品的本质。作品集的外表样式来说是提升作品的品质感,和提升作品的可看度,是赋予作品灵魂,好的作品集不只是一个包装而已,也是要有好的作品内容相结合才是最终的结果。

对于作品集来说:

2-1从大厂的角度对作品集十大衡量标准

2-1-1对于设计师基础判断

一份作品集是对于设计师从审美、创新、沉淀总结、设计能力,思考,作为基础的判断。

作品集是一个敲门砖的说法,设计师要作出专属个性,艺术范的作品集尤为重要,内容作为核心,包装作为附加。

undefined

2-1-2从作品集看出是否团队中所需要

作品集所呈现的作品,作为专业性的面试官只要一眼扫过就知道它是不是我们团队要找的人,从设计调性,人员的能力模型招聘需求方面,创新,能力都会快速锁定,比如团队中缺少插画的设计角色,当一个作品集中看到求职者插画能力,色彩能力,创意能力很强,那么很容易被锁定。或者团队中,品牌中调性是很年轻,潮,运用的设计技法比较新颖,好玩。那么作品集的作品,以及作品集的包装很符合这个公司调性,那么也很容易被锁定。

契合度完全在一份作品集中初步判断。

undefined

2-1-3通过作品集可以了解设计师的能力如何,哪些比较强项

同样作品集是一个设计师的沉淀,总结,整合。一定是把最好,最优秀的一面展示在作品集中。所以其中的设计作品,也是招聘者判断设计能力的标准。快速判断设计中你的插画能力比较强,还是版式,色彩,交互哪个模块比较有优势。和招聘岗位职责的要求是否符合。

通过作品集就知道专业性的长板和短板。

undefined

2-1-4设计的类别是否完整

现在对于进大厂设计考核的标准简直就像古代选宫女一样,严格,全面,多才多艺,啥都会干。

设计师的评判就是设计要好,有创意,色彩搭配,设计思维,设计流程,项目落地,审美要好,各种软件要会,甚至插画能力,C4D,AE动效,交互能力等等加分项。所以好多设计师都学杂了,没有勇气在学设计!无时不刻的在填充自己的能力。落后很容易被拍在沙滩上,对于招聘方看作品集的完整度就是看你在整个作品集中类别分类都有什么。说白了就是你都会啥绝活。比如IP形象设计,运营设计,视觉设计,品牌设计,插画,还会交互 UI界面设计。这样设计师就比较“吃香”,可以判断你属于综合性设计人才。

undefined

2-1-5设计师的设计精细化

对于设计师的精细化是从设计中看得出,细节上的处理,以及做设计的时候是否有精心化,把设计做到满意及标准化。比如做设计的时候界面字体规范不对,图标的粗细不同,画的插画比较粗糙等等。都是针对于设计师精细化的一种考核。对于精细化能考核看出,设计师是否对于设计的高要求,对于细节把握的程度,对于质的标准。很多刚进入行业的设计师在精细化上的确缺少能力。这也是需要工作多年后逐步的习惯性才会让自己对于作品的细节把握更好,更稳。

精细化也是对于设计师的一个态度问题。毛躁的设计师做的设计就倾向于粗糙,稳一点的设计师对于作品就会照顾得到精细化。在设计走查的过程中知道哪些存在问题,哪些需要更好的迭代和修改,也是考验设计师的自我“修养”

undefined

2-1-6了解设计师的设计方法及思维

在整个作品集中除了作品视觉以外,更多要看的就是设计思维,设计流程和设计推导,这样才能体现出两个维度.

1.你在设计的时候是动脑了

2.这个作品是你做的

往往有一部分设计师做设计觉得最终做出效果图就行了,但往往不是这样的,设计师是需要思维灵活,具有天马行空有一些创意创新思维的。所以做设计师的时候应该有一些推导呈现在作品集中,也是很多公司在看的。不止看视觉还要看设计师是不是有思维的设计师,思维是内核,设计作品的呈现,流程,方法给予的作品意义。

比如做一个IP形象,如何定义,设计策略是什么,设计目标是什么,设计价值是什么,设计流程和设计推导是哪些等等这些就是设计师需要以文字或者图片进行阐述的,所以我们要做一个会思考的设计师。

undefined

2-1-7设计师的总结能力

设计师的总结能力是从设计方法进行总结,另一个就是从自我出发进行总结。往往这个环节是很直接。分析,归纳,沉淀,总结。

总结是对于自己的一个自我判断。具有条理清晰,透彻,具体,深入,明确,逻辑性强一系列特点。很好的总结能力在总结的过程中可以发现问题,解决问题。

undefined

2-1-8是否有落地项目

作品集中的项目是否落地尤其的重要,主要考核你的经验,是否能很快上手做设计工作,所以如果有真实项目是很重要的。其中项目价值,项目完整度,类型,项目中角色,项目中思考,项目中遇到问题如何解决问题,项目中协作,沟通等等。

说白了如果有落地项目来公司就直接上手干活,如果没有落地项目还需要进行前期的培养。时间成本,人员成本也是比较高的。如果有一个落地项目知道其中的过程,甚至参与过其中的环节那么在有新的项目也会得心应手。特别那种在校大学生最好有实习的机会去工作,这样为自己攒一些能力,新手设计师同样能参与到项目中是对自己的一种磨练和提升。

undefined


2-1-9作品集的差异化

作品集的差异化,就是不同,独特性,所以作品集一定要具有一定的自我风格,杜绝模版化,如果一个设计师套用一个模版,那么这个设计师是懒呢?还是设计不行呢?对于你能力产生一种判断,设计的可以作为借鉴,但切勿抄袭。作品集的差异化,有特点,有设计感,有层次,从感官上眼前一亮,才有机会继续往下观看,这个也是技巧。

undefined

2-1-10.作品集的设计表现力

对于作品集来说除了内核的内容作品以外,外包装就是作品集,对于作品集的表现力说白了就是好看且好用。表现力各有所需,每个人定义的风格来说都具有不同,但无论选择什么样式,设计出的一定具有一定的艺术感和设计感,根据现在比较流行的一些技法结合到我们的作品集中,进行表现,比如线性的,透视线,酸性,大字,重复,图章,标签,等等都可以融入到设计的表现力中。

说白了设计的作品集不要老气,要新颖,独特性,艺术感,设计感。流行的趋势,就没毛病。表现力也是通过色彩,图形,字体,插画等进行的版式。具有一定的层次感。如何进行表现力在后面会详细提到,高清大图配文字哦。耐心往下观看!

undefined

 

3.从个人层面的作品集

上面说的也很清楚,其实考核的标准也是设计师需要做到的标准。但从设计师角度来说对应现状考核要求去做自己的作品集是一点问题没有的,对于设计师大致核心的这四点

3-1作品集做好看

3-2作品集要全面完整及精细化

3-3展示自己的设计能力

3-4 设计思维和流程的体现

其实无论是公司角度,还是个人角度核心的目的就是公司想找到合适的人,设计师想找到合适的公司。

通过作品集进行前期的判断,但不少面试官从作品集的“好看”忽略能力上的实用性。导致工作中一步一个坎,设计师的现状觉得漂亮的作品集就能找一个不错的工作,其实这个算是个病态。漂亮的花瓶,不实用也不易用。说白了最终就是作品集好看+设计作品精细化+落地 才是各方所需要输出的最终目的。

也祝找工作的朋友们,幸运!找到心仪的工作。

 

4.作品集的适用范围

undefined

遇到过工作了很多年了,也攒下来了很多作品,但最终做成作品集没有思路进行去梳理,也不知晓有些作品该放还是该pass、梳理如何梳理、排序如何排序、设计如何设计、增加什么内容。

也有遇到过视觉传达专业的学生。干脆不知什么是作品集,自然更不知作品集如何做,也没有什么作品,等等。所以让大家清楚如何做成属于自己的作品集

 

5.设计作品集的八大流程

5-1 作品集框架-框架要好思路清晰

作品集框架好比一个脑图规划,会更直接更清晰可见,可以在Xmiand软件中实现,比如信息的层级,页数,结构,排序,都会有序规划。脉路清晰,结构清晰在后期设计作品集的时候会更加快捷。

比如首页-个人简历-目录-设计作品排序,然后首页放什么内容,目录放什么内容,更好的对作品集层级规划。undefined

5-2 作品集设计作品的分类-类别归档有序查找

如果多年的设计师会有很多的作品,比如banner,UI界面,B端的设计,海报设计,插画 ….很多,这个时候就要有分类,有归类,在挑选作品的时候一定把最好的挑选出来,不好的千万不要放,不要为了量,要质!这个环节我一般会建一些文件夹,分好类,比如banner,海报,字体,项目界面,插画、然后把挑选的类别作品放入到文件夹中,在作品集排版的时候方便查找和使用,至少不乱!

undefined

5-3 作品集的风格定义-风格调性决定气质

风格调性决定气质,就好比一个人的穿着,给人感官是可爱的,还是酷酷的!

作品集同样风格定义决定了气质,比如想要酷酷的感觉,还是可爱风格,还是国潮 …

在设计运用和表现中元素、色彩、板式、字体都会有不同表现

undefined

5-4 作品集色彩的定义-色彩觉得了作品集的风格

色彩的定义和风格定义是具有关联性的,比如想要做一个潮酷的风格那么对应的色彩在运用中一定是黑色,白色,或者灰色为主,搭配一些辅助的蓝,红,黄,等颜色

如果调性上选择可爱风格的,那么选择的主要颜色一定是饱和度偏高一点的红黄蓝绿等颜色、通过对比色、邻近色进行设计,颜色决定了作品集的气质。

undefined

5-4-1 推荐几款不错的配色

undefined

5-4-2 推荐几款不错的渐变色

undefined

5-5 作品集的元素/图形/版式收集

这个环节基本就是为自己增加一些灵感元素,设计本身就不是闭门造车,多看看表现形式,排版,字体的应用,色彩的应用,元素表现等等。把好的元素,设计收集到 灵感库中,最终在设计的时候结合自己的想法进行设计,也就是我们所谓的借鉴。

undefined

5-6 作品集设计

在设计的时候一般情况下我都会使用PS、AI、SK进行设计。

尺寸:1920*1080.16:9. PPI72

颜色模式:RGB

PPI:72PX

举例在AI中我会建立一个1920*8640(可放8个1920*1080)的画板命名为画板1,然后复制出一个画板2,画板3 或者更多,根据自己的版面多少就建立多少画板。

这个时候就可以在空白的画板进行设计。在设计的过程中首先不要考虑太多细节,先给一个定义好的颜色,然后把元素,文字(先不考虑什么字体)先摆上。

然后整体完事在进行细节调整,字体的大小、色彩的对比、元素的摆放位置。

先做加法,后做减法。

首页干净、简约、核心的元素,文字凸显出来即可。

一般设计完通过AI 导出PDF格式

undefined

5-7 作品集导出PDF

设计完毕,需要导出PDF的,切记!!!不要弄PNG/JPG的长图。

怎么导出来PDF就不详细说了,如果PDF都不会还做什么设计师!还做什么作品集!

最后说一个导出小技巧:AI导出PDF的时候在预设选项中选择,“高质量打印”不要问我为什么这样选,信我就对了!

undefined

5-8 PDF进行压缩

正常情况下导出作品集PDF都会很大,一般招聘网站上传限制30MB,如弄了一个500MB的传不上去尴尬不尴尬,如果给面试官或者HR下载龟速很慢也很尴尬,讲话了谁的时间都是宝贵的,下载这作品集就花了五分钟,看你作品集的概率就减小了。很多压缩的平台,自己动动小手找一找!实在找不到问我!!!

undefined

 

6.作品集的六大组成部分

了解作品集组成部分在作品集布局时有效排序并设计,给作品集设计提供了快速有效的设计流程。

6-1首页(封面)

封面是必不可少的,封面主导着整个作品集的规范,调性。同样把图形信息和文字信息汇总在一个版面中,更好更快传达出信息,封面代表的个人展示的作品集的样式,很直接,好看,潮酷或者创意都会具有抓住浏览者或者招聘者的眼球,所以第一封面在设计的过程中一定从色彩,创意,图形,版式吸引才有更多机会和欲望往下观看。

先吸引,后详细查看,一般招聘者或HR在筛选作品集的时候短短几秒,怎么能在短短几秒中脱颖而出继续了解你,封面起到了很大作用。

在封面需要展示的内容:

6-1-1 作品集标题

6-1-2名字/艺名

6-1-3标签

6-1-4年份

6-1-5英文

6-1-6元素

6-1-7图形

例图

下面作品集是我的学生栗子的作品集,过程中由我进行的指导。经学生的同意,拿栗子的

作品集给大家进行讲解。感谢设计师栗子 站酷ID:栗子Ocean

undefined

第一步

首先在做作品集封面的时候把需要展示的文字,图形,颜色先摆放上,然后在进行调整设计。初步的摆放略显粗糙,层级变化不够明显,所以可以通过比较流行的线条,透视线,等作为背景,让背景充实起来。

undefined

第二步

定义风格,上面提及过,风格的定义主导了整个的调性,前期考虑到潮酷,年轻化的设计,没有运用太复杂以及渐变的背景,干净简约,背景主要的功能就是衬托前面图形和文字信息,背景和前面信息具有层次感更突出。这个时候尝试用线条进行信息分割,线分割也要考虑布局这个作品集首页运用的左右布局,左边运用了AI工具栏的样式,右边线分割。具有了一定的设计感把一些文案进行区分文案信息要有文字的主次分明,在封面,作品集三个字是需要明显的明显设计角度出发点是要么大,要么颜色有变化,标题,副标题,以及内容在标准化设计中要有一个定义。

风格定义:潮酷

颜色定义:黑/白/绿

图形元素:黑白插画

装饰元素:几何形

字体:中文,英文

undefined

第三步

文案摆放入到布局的网格中,在字体中要有大小,颜色,粗细,中英文的变化,以及图形结合文字/英文布局,从文字中定义主要信息层级,次要信息层级,以块状有序的进行排版。刚设计的时候不需要考虑颜色,都用一个颜色,或者白灰就行,一旦都摆放完毕,在根据情况给予颜色,比如整个画面有黑,有灰,在来一个绿色,会更让整个画面更加的提气具有变化感英文+图形结合最终放在顶端底部运用,整个界面设计丰富了很多。

undefined

第四步

文字,色彩,版式也差不多了那么还缺少一个图形主角,图形构图,酷酷的雷电,时光机宇航员,以及小怪物,以黑白色调主调。和整体作品集风格契合度加强。视觉点具有一定爆发视觉冲击点。文字信息和图形信息结合传达表现设计意义。

undefined

第五步

最终到这一步基本接近首页设计尾声,进行精细化设计处理,以及设计走查,在做加法同时在做减法,把多余改去掉的去掉,增加的增加,整个过程中还缺少一些辅助图形可以添加运用辅助图形,以及比较酷酷的,复古一点的设计元素,增强设计感和视觉感让画面更饱满。信息层级更清晰

undefined

总结

运用了几个步骤大致讲了一下在作品集封面时候的步骤和思路。设计不可直接复制,但可给予一些灵感。通过这个步骤和思路清晰情况下在进行设计就轻松的多了。设计表现形式不止于此。还有更多表现形式。通过创意发挥出设计的本质。希望通过这个小例子给大家一些方向和灵感思路

6-2.个人介绍  

此页的重要性就不言而喻了,可以说那是相当的重要了 !从作品集了解你的设计能力,那么从个人介绍中了解你的个人信息,教育背景,获奖背景,项目背景,以至于你的联系方式,有很多同学在个人介绍中忘记留联系方式,导致尴尬到面试官联系不到你!个人信息中,有项目一定要把项目写明,并且在项目中担任的角色,做了哪些工作。可以简单描述,但必须要清晰。还有就是在个人介绍中个人照片一定要有艺术感点,别弄一个随便的自拍照放上去,要有点质量,千万别整个西装革履打个领带,那你可能整错了,要做销售那照片没问题。

信息层级:

6-2-1.名字,

6-2-2.教育背景

6-2-3.电话/邮箱/微信

6-2-4 .二维码

6-2-5.个人照片

6-2-6.标签

6-2-7获奖/参赛

6-2-8.项目

undefined

个人信息页从设计表现上延续了首页风格调性。增加信息层级内容,在设计表现中线框浏览器样式,以及英文线重复设计,并在整个设计中增加标签以及透明塑料布作为视觉辅助效果,并在下面破损的纸样式作为设计层级变化。让视觉呼应切变化。增加了更大视觉感。通过复古的一些元素视觉效果顺延。

6-3.个人目录

个人目录要写清楚列表,这样也会更清晰让浏览者和面试官更好的找到要看的内容,引导面试官清晰信息类别层次!比如: 运营设计 品牌设计 项目设计 插画 C4D等。什么样的设计师针对性的进行排序和分类,根据自己情况进行类别分类!

undefined

目录分类条

undefined

6-4.设计作品排序

设计作品的排序其实也是有一些技巧的,要找运营视觉设计师,那么就需要优先放视觉的内容。要找UI设计就优先于项目部分!

运营视觉设计师:比如海报,banner,主KV,插画,H5,IP吉祥物,C4D。

品牌设计师:主KV,包装设计,VI,海报,字体设计,图形设计,IP吉祥物等

UI设计:banner,海报,插画,H5,交互设计,B端,C端。

电商设计师: banner,网页设计,H5,专题页,详情页,插画,C4D

当然了,如果没有定义是什么设计师,还能做视觉还能做品牌,还能做UI部分的工作,那么从作品中挑选出不错的放在作品集中,同样也要考虑到优先排序问题。

6-5.样机展示

样机是什么?在作品集中是为设计提升B格、提升设计感的、作为辅助、提案所应用。

如果没有样机作为设计显得单调,如果有样机是让作品更有品质。但我发现部分设计师为了样机而样机,甚至用的样机不恰当和设计内容完全不匹配,为了好看确没有实际意义。频繁用样机也不好,样机老气也不好。所以样机除了体现设计的品质,合适最重要。我发现作为学生做的样机很喜欢都放在整合一页展示,本身就是提升设计感,放大设计放在一页显得单调,还不如不放。所以作品集一定要单页去排序摆放。会让设计更具有品质感

错误的样机应用排版

undefined

正确的样机应用排版

undefined

6-6.总结

在最后一页的时候最好写一些总结性话术,可以从你的长板,短板进行说,千万不要说客套话,也不要从网络摘抄。要客观的对于自己的评价和总结。让面试官更清晰更快的认识你。

 

7.常见作品集形式

undefined

在这几种形式PDF是最常见的了,而且也是最经济,方便,直接的,但要注意的就是大小上要注意,最好30MB-50MB最佳的。长图来说不太建议,不要问为什么,你懂得!第三方设计平台比如站酷,UI中国,等设计平台。但这个在观看的时候体验感一般!最后一个就是官网,个人官网到不错,但需要设计,程序,域名空间,繁琐了点,在整个形势中,PDF是比较直接的也是大家接受度比较多的。无论什么样的形式,根据自己情况而去决定。但大家都在用也有一定道理。

 

8.作品集的加分项是哪些

undefined

 

8-1.C4D在作品集中的体现绝对的具有一定的加分,无论是运营,品牌还是电商甚至UI都需要有C4D的呈现,品牌中IP吉祥物3D样式,电商中详情页,banner应用3D样式,运营设计中海报,视觉运用C4D,C4D的表现也无处不在。也备受设计师以及现在审美需求所需要。

8-2.插画最为近几年的在设计中表现形式,讲究情感化设计,通过内容进行图形,插画表现,更好的让用户所接受,同样插画在品牌设计,包装,UI,运营备受关注和应用,如果有插画能力那么在作品集设计作品中进行结合具有一定的加分项。

8-3.包装样机,必不可少,也是作品集的加分项,但不要乱用和频用,恰当适合为佳。

8-4.设计的作品越多越好,但一定要好的作品放进作品集,作品集一定是把最好的东西,最能代表设计能力的作品展示出来。不要纠结于放哪几个或者都要放。

8-5.设计一定具有一定的规则,创意。比如banner,为什么要用这样的创意,为什么要用这样的字体,为什么要用这样的颜色,都是有一定的技法和思维推导的,描述清楚。作一个思考的设计,而不是做一个素材的搬运工!

8-6.解决问题是考核设计师解决事情能力,在项目中,甚至在设计中一定会遇到很多问题,比如沟通问题,协作问题,设计问题,在设计中遇到的问题是什么如何解决的。说明也考验了设计师的总结能力,做事态度和做事解决能力!设计师的工作也是为产品,视觉,营销解决交互,体验,视觉的事情。所以如何解决也是看待你在工作中是否能把事情更好解决,也就是我们所谓的沉淀经验。

 

9.作品集的设计表现

undefined

undefined

undefined

 

undefined

篇幅原因就介绍这些吧,还有比如用一些酸性的设计,线性的设计。等等,就不一一举例了大家也可以在设计过程中发现美。如果有什么疑问和不了解的也可以随时问我。以上的干货希望大家慢慢吸收。篇幅有点过长。

 

10.作品集的压缩好物

PDF压缩好物,主要免费,在线的。卡卡就是一顿压!好不好不要问,自己体验才是真舒服了留言说一声!

undefined

 

11.招聘职责参考物

下面 在网络上找了几个互联网公司的招聘信息,为什么要放这个,而且还是已经过去的事,目的是让大家心里有个数,看看现在招聘对于设计师的职责,要求能力都需要会啥,啥行自己对照一下,哪块不行补哪里,而且根据职责要求,工作内容进行作品集的设计以及排序。要有针对性的准备,不能盲目、迷失、要有个方向感!

undefined

 

12.你敢问!我敢答!

下面 在网络上找了几个互联网公司的招聘信息,为什么要放这个,而且还是已经过去的事,目的是让大家心里有个数,看看现在招聘对于设计师的职责,要求能力都需要会啥,啥行自己对照一下,哪块不行补哪里,而且根据职责要求,工作内容进行作品集的设计以及排序。要有针对性的准备,不能盲目、迷失、要有个方向感!

undefined

 

顺叔最后想说

这篇文章准备了很久,文字,以及配图都是很精心的准备,希望能通过我的经验分享大家能受益,这些年一直输出些设计文章,对于每一篇文章我都是很精心的去设计以及写内容。写这篇也是经过了几个凌晨。很用心在写。当有人给我留言,通过文章有一些灵感,找到了不错的工作,帮助到了他,对于我自身来说还是很开心的,具有成就感。赚到的就要给人,学到的就要教人,我虽然比较佛性,文章一年可能就一篇,但每一篇我都认真的对待。上一篇作品集文章达到了17W浏览量很欣慰,这篇是基于上一篇做的提升版,其中有很多技巧个人觉得还是比较有用。给正在迷茫,不知所措准备作品集的你一些灵感和思维,如果觉得不错的话 希望多给顺叔一些支持和点赞也不枉我认真熬夜的去写这篇设计干货!好了话不多说,希望能帮助到你!你的支持是我的动力。不断的有设计作品和设计干货。我们都是在设计路上的陪伴者!!

 

原文链接:zcool

作者:张增顺

转载请注明:学UI网》关于设计师作品集那些事2-提升篇

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档