首页

用案例和方法,带你剖析「情感化设计」

seo达人



最近在产品体验中,发现了不少有意思的情感化设计案例,有些让人眼前一亮,有些很好的满足了用户情感需求,所以今天就汇总一下分享给大家。
文章主要内容包括:
1、如何理解情感化设计
2、结合案例分析情感化设计
3、3个情感化设计方向
              

一、情感化设计

什么是产品的“情感化设计”呢?先说2个小故事。
           
故事1
我儿子今年5岁了,周末带他去游乐园,他拿着我的手机看导航。突然说了一句“你的导航真厉害啊,还显示天气呢~”。这些成年人眼中习以为常的内容,却成了孩子惊喜的认知。
            
故事2
某天傍晚,南京地区的微信朋友圈忽然掀起了夕阳美景“摄影大赛”,成为了迅速传播的话题,大家都在晒照片,惊叹转瞬即逝的美景。这里面可能有很多因素,诸如参与感、分享的欲望、跟风等,但是美景才是打动用户的真正原因。
图片
通过这2个小故事,我们可以总结下情感化设计的要点:
  • 对不同用户,情感化设计的感知是有所差异的,需要设计师拥有不同的价值视角,甚至是对一切事物抱有好奇感的童心。
  • 情感化设计需要带给用户美好的感受,也是符合大多数人共同的认知体验。无论是会心一笑,还是形成深刻记忆,都必须能够激发出用户情感。
  • 情感化设计一般只能引起用户短暂的情感变化,当用户形成了认知之后,可能就失去了最初的魅力。

 

二、情感化设计案例分析

诺曼的《情感化设计》指出,人的3个认知层次:“本能层、行为层、反思层“,构成了用户认知事物的过程,每个层次都会产生不同的用户情感。
图片
             
01/本能层
视觉信息激发情感
所谓“爱美之心,人皆有之”,人们对美好事物的追求是一种本能反应。因此可以利用色彩、质感、图形建立场景氛围,激发用户情感。
                           
1、品质感渲染氛围
最近支付宝818理财节界面设计,利用金色很好的营造了节日氛围。而品质感极强的金色卡片,增强了用户的获得感,更好的激励用户参与活动。
图片
                      
2、真实场景再现
在虚拟的互联网中,建立符合真实生活场景的认知体系,是体验设计的一个重要方向。
在正常比例下,高德地图采用蓝色表示水域,例如河流、湖泊等。当地图比例放大到一定程度时,水域会有水纹波动的效果。通过场景仿真再现,带给用户“近大远小”的真实体验。
图片
               
3、关怀体验
相比界面设计传递出的偏主观的感性理解,文字可以带给用户直接而明确的情感体验。
                           
1)语言文字中的情感表达
用户在被邀请加入微信群时,下方信息会提示群中有哪些好友,从而帮助用户做出入群判断。另外提示信息还告知入群后可能产生信息干扰,在一味强调利益点,引导用户行为的商业化设计中,这样的提醒给了用户更多的人文关怀。
图片
                 
因偶感风寒,朋友下单买了感冒灵颗粒,美团外卖小哥在送药时,说了一句“早日康复”,让她对美团的服务惊叹不已,甚至有一丝感动。虽然不确定这是不是美团的标准化服务流程,却提升了她对美团服务体验的满意度。
图片
                         
2)安全感彰显用户关怀
iOS多任务管理页中,支付宝、银行等金融类应用会增加遮罩效果,保护用户隐私,通过差异化的展现形式,增强了用户的信任感。
而用户在支付宝“付款/收钱“界面截屏时,系统会主动给出安全提示,让用户感受到来自支付宝的关怀。
图片
                                     
3)满足用户的内心渴望
粉丝数是公众号运营的重要指标,特别是新的玩家,涨粉的渴望是不言而喻的。
前几天,我突然发现公众号粉丝从1.0K变成了1.1K。当时内心一阵狂喜,立即查看了具体粉丝数,结果并没有超过1.1K。原来粉丝数的显示规则是四舍五入,也就是说当粉丝超过了1050后,都会显示为1.1K。
这比我们常见的1.0K+的形式,数据上做了适当的夸大,但是并会对用户判断产生大的偏差,反而满足了用户的虚荣心。即使看到具体数据时,内心会有小失落,但也不会造成用户反感。
图片
当然本能层的情感设计,通常只能带来的用户情绪上的微小变化,或者短暂的刺激,无法强烈的改变用户对产品的认知,或者触发更多的用户行为。
                     
02/行为层
行为过程强化情感
用户的参与可以带来更强的的情感反馈和认知,并且更容易形成持久的用户记忆,甚至会培养新的用户行为习惯,从而增强产品粘性。
                          
1、动效设计融入情感表达
TIM 聊天列表页面,用户可以拖拽消息数量角标,快速消除未读提示,同时带有灰飞烟灭的动效。
相比较常见的点击消除,或者向左滑动后标记已读,这种交互方式既提高了用户操作效率,又增加了消除提示的畅快感,仿佛帮助用户甩掉了各种烦恼和压力。
图片
                      
即刻APP在用户头像中增加了拖拽反弹动效,除了视觉上爱心碰撞带来的爽感,过程中还增加了震动效果,传递给用户力度回馈。碰撞之后顶部出现的嘴角上扬的笑容,又带给用户无尽的想象空间。
图片
                                
2、创新玩法赋予产品情感体验
最近微信推出的“拍一拍”功能,创造了新的用户沟通方式和使用场景,简单的玩法激活了用户猎奇心理和表达欲望。所以功能刚上线时,借助社交关系迅速传播,并衍生出了各种趣味玩法。
传统广告主要是通过视频播放吸引用户点击,用户更多的是被动接受。而微信朋友圈广告则是播放广告片段,激起用户的好奇心,并结合手势玩法提升了趣味性,吸引用户主动参与其中,从而形成更强的用户认知和记忆。
图片
                                 
03/反思层
价值影响情感认知
前几天很多朋友发现蚂蚁庄园养的小鸡不见了,只留下了一封鸡毛信。
图片
当用户都在猜测支付宝是不是要出现新玩法的时候,支付宝公众号给出了答案。

“我鸡呢???我一把屎一把尿的把它养大,怎么就剩根鸡毛了?” 
“嘿嘿,上支付宝搜「找小鸡」,你就知道了。” 
“都是同事你装鸡毛啊!直接说。”  
“三年来有4.5亿网友在蚂蚁庄园捐出240亿颗“爱心蛋”,90%以上的公益项目都与孩子相关,小鸡去看看这些孩子们。” 
“中午回来吃饭吗?“ 
“12点前就都回来了,能赶上吃饭。” 
“行叭,我刚给它换的衣服,别玩脏了。”、
                                    ——来自支付宝公众号

 

支付宝的创新玩法,引发了用户的猜想,增强了活动的话题性,精彩的文案对白,既宣传了支付宝的公益行为,又收获了用户对品牌认知 。

 

三、情感化设计的方法

情感化设计在用户体验圈早已不再是新鲜话题了,但是如何做出符合用户情感需求的设计呢?我觉得可以从3个方面入手。

 

1、天时——关键时刻激励
抓住用户关键的时间节点,通过设计手法增强用户的情感效应。例如微信设定了生日、春节等关键词触发飘落动效,让苍白的文字信息更加富有场景化情感;
根据用户生命周期,电商平台会推出相应的礼包,促进用户转化的同时,让用户产生被关注的情感体验。
图片

 

2、地利——用户场景引导
根据用户行为流程,在关键的行为节点中增加情感化设计。
花小猪在成功约车后,满屏飘落的花瓣动效,烘托了场景气氛,有利于缓解用户等待焦虑。
特殊天气状况下,高德地图会显示天气情况,为用户出行提供参考。
图片

 

3、人和——挖掘用户内心诉求
利用用户自身的情感诉求,满足用户内心的渴望。
拼多多“多多梦工厂”游戏中,用户在加油之后,快递车会有明显的加速效果,很好的满足了用户急切收到商品的情感诉求,也更好的激励了用户持续加油。
图片

 

写在最后

情感化设计更多的是带给用户瞬间感动,很难形成长期的用户激励。因此情感化设计主要目的是通过情感累加,提升产品品牌形象。
不过情感化设计在落地时,会面临一些困难。
  • 一方面互联网已经发展了这么多年,大家对一些小的趣味细节,很容易视而不见,或者只能会产生一点点情感波动就结束了。
  • 另一方面商业化的设计,更加注重投入产出比和眼前收益,当情感化设计无法确定可以带来直接的经济效益时,很容易被pass掉或者无限延期。
所以设计师也需要不断的去总结和反思,如何坚守心中的那点儿设计情怀~
今天先说到这儿吧,下期再见~
                   
原文地址:子牧UXD(公众号)
作者:子牧先生
 转载请注明:学UI网》用案例和方法,带你剖析「情感化设计」

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

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


文章来源:站酷   作者:陈皮Celia 

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

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

干货|如何通过设计传递「信任感」?

seo达人



众所周知,一个可以让用户充分信任的产品,才能可能与用户建立起良好的关系,在用户信息获取、产品目标实现上成为可能。对金融类、社交类产品而言,安全可信的需求更是用户最核心的诉求。

 

信任感维度梳理

客观技术 + 主观体验

信任感包括两个维度:客观信任感和主观信任感。

客观信任感通常体现在技术层面,依赖于交互设备和网络环境等;

主观信任感则体现在交互体验层面,通过交互流程和视觉效果对用户进行引导。

 

1 、客观|技术系统

通过技术安全和策略,传递给用户稳定的产品功能和策略,主要体现在以下两点:

图片

(1)稳定性

  • 不易出系统问题和 bug
  • 在各种应用设备上可以保证顺利切换
  • 在各种应用环境中可以保证流畅使用

 

(2)安全性

  • 身份验证
  • 隐私保护
  • 账户、密码安全
  • 功能使用过程安全
  • 其他

 

2、主观|交互体验

通过产品的设计和交互流程,传达给用户可靠的产品感受和体验,主要体现在以下四点:

图片

(1)可掌控

  • 给用户更多的操控权限:饿了么的推荐卡片设计,右上角的“…”,点击后会显示“不喜欢”,以此让用户感觉自己有更多的选择和操控权。

图片

 

  • 任务定制化,匹配用户能力:大众点评对于不同等级的用户安排的赚取积分的任务也不同,给初级用户降低难度,好上手;给中、高级用户提升挑战,有效促活。

图片

 

(2)可理解

  • 给用户尽可能提供全面、完整的信息:链家 App 在看房的时候,不仅有 VR 全景功能,还增加了“设计效果”方案。当用户点开“设计效果”后会看到分屏对比的效果,给用户对于房子空间的全面体验。

图片

 

  • 信息条理清晰,有章可循:支付宝相互宝的 “大病医疗” 需要阅读的信息很多,产品设计了目录作为引导,并将重要信息采用不同的背景颜色标记出来。

图片

 

(3)可依赖

  • 帮助用户轻松完成任务:产品了解用户的操作行为,缩短用户路径,例如京东等 App 在收货地址的填写时可以粘贴整段文字(地址,收件人,电话),然后“智能识别”到对应的文字选项中,优化了用户填写资料的体验,让用户完成任务毫不费力。

图片

 

  • 给出有利于用户决策的提示:下雨天美团外卖针对用户所在区域,提前推送天气变化,提醒用户提前下单。

图片

 

  • 给出的信息详实,以用户利益为出发点:使用支付宝理财在买基金时,产品会评估基金的风险和用户的承受能力是否匹配,并给予相应的提示。

图片

 

(4)可挽回

  • 非正常信息、错误内容及时同步:高德打车企业版如果发现用户的行程订单金额与预估金额差距较大时,会给用户发短信提示,并给出客服和投诉渠道,尤其是对于对线路不熟的用户。

图片

 

  • 从根源防止用户出错:天猫购买产品添加购物车时,没有货的标签会变成禁用状态,避免用户下单。

图片

技术安全是可信性的保障,但并不是有了技术安全就足够了,还需要通过交互层面引导和优化使用户产生对产品的信任感。

 

原文链接:长弓小子(公众号)

作者:元尧

转载请注明:学UI网》干货|如何通过设计传递「信任感」?

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

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


文章来源:站酷   作者:陈皮Celia 

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

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


UI动效设计之设计原则

seo达人



小编:动效已经成为UI行业里流行的趋势了,特别是游戏APP、短视频分享和直播类的APP或多或少都会有动效这样的元素。本文将来分享一些作者过往在动效设计过程中的基础知识沉淀,主要集中于探讨动效设计原则和运用的内容。

 

前言

前人已经总结了让动画生动的技巧,早在1981年由两位迪士尼动画师所撰写的《The illusion of life:Disney Animation》一书就提到了动画的12项基本法则,该法则也是受用至今。法则虽是针对传统动画而制定,但对于我们日常需求中所接触的动效/动画需求也同样受用。

 

目录

 

这次分享分为三个内容,第一个是介绍一下动画设计的“十二大原则”是什么?;第二部分是结合几个案例说明如何将这些原则运用到具体的项目中去的。最后就是动效设计流程的一个总结。

 

【1】动画设计技巧

如上图;动画的十二大原则又可以拆分为两类,动画设计技巧和动画表现技巧。

第一部分设计技巧是增添动画细节的方法,可以用这些原则让动画更有细节更生动。

第二部分表现技巧是提升整个动画在画面中全局表现力的,这个主要是多用在动画里。

在产品动效设计中还是常用到设计技巧,所以这次着重分享设计技巧这一部分。

 

 01 挤压和拉伸

【挤压和拉伸】是动效设计中最常用到的设计技巧。使用挤压和拉伸来强调物体的质感、重量、速度。我们可以根据物体的质感去决定挤压伸展的具体幅度。可以很好的表达出不同物体的不同质感。这里需要注意的是,物体挤压拉伸的面积尽可能保持视觉统一。以免动画前后造成不协调。

 

02 预期动作

【预期动作】可让用户感知到该物体即将发生运动,以及具体运动的方式和方向。让用户对动画效果有一个提前的预判不会太突兀。也可以根据预期动作去引导用户的视线。比如起跳时双腿先要弯曲,踢球向前射门时腿要向后摆动。所以在动效设计中我们运用好预期动作会让用户做好心理准备,让这个动画更加真实。

 

03 跟随与重叠动作

【跟随与重叠动作】这个技巧也是表达运动速度和物体质感的重要技巧之一。

跟随简单说举个例子就是挥棒球棒,棒球棒是手带动棒球棒转动,当手停止发力时,棒球棒不会立刻停止,会随着发力的方向摆动减幅,直到完全停止。摆动的幅度和持续时间会根据不同的力量及速度进行相应的调整。

重叠动作就是想象棒球棒如果是橡胶材质的,那么挥舞棒球的时候就会有一定程度的弯曲,所以速度越快,材质越软,弯曲程度也会越大。

 

04 缓动速度曲线

【缓动速度曲线】动效设计中最离不开的参数。不同的速度曲线也会给人不一样的感受,运动曲线较陡会感觉元素的质量更重冲击感更强,比如适用于我们竞争向的场景中。反之较平缓的曲线元素运动则较为轻盈。更适用于我们关系向的场景。

 

05 控制时间偏差

【控制时间偏差】运动物体的主要运动和附属运动不会同时发生,用时间偏差,会让动画更加真实自然。也可避免动效过程出现空档期,或者一次性出现过多的元素,增加认知负荷。信息离场时则需要快速高效,不需要人为的制造信息偏差。

 

06 弧形运动轨迹

【弧形运动轨迹】当自然运动的物体运动时都会受到引力的影响,简单解释就是速度越快弧线越平滑,移动距离越远。速度越慢弧线越弯曲,移动距离也越近。

 

【2】结合案例应用

下面就举几个案例,这些原则在具体工作中的应用。

 

01福袋:短触区引导动画 

 

这个是直播间福袋倒计时五秒开奖时播放的动画,目标是为了告诉用户福袋即将开奖,同时在这五秒内拉升福袋的价值感,提高福袋的参与率。

 

确定好动效的目标后,就要围绕这个目标对动画进行拆解。

  • 【第一步】是预备动作,在进行主要的动画之前需要有一个较强的视觉引导,让用户提前注意到福袋接下来会会有动作发生,这里采用的方式是抖动。
  • 【第二步】是体现价值感,这里采用的是金色粒子加发光的效果。
  • 【第三步】倒计时结束福袋准备离场。

 

动画步骤拆解完后就分析每一步动画需要用到的动画原则。比如第一步的抖动引起用户注意的同时下一步就需要喷出粒子,所以在抖动的这一步就要增加一个预期动作。在这里设计了两个预期动作:一个是粒子向右上角喷出,所以预期动作设计成向左下角提前移动收起,同时给下一步的粒子动画留出足够的空间出现。第二个是收紧口袋,为下一步的打开做准备。

然后福袋的绳子也会跟着福袋运动,这里用到了“跟随与重叠动作”“附属运动”,因为绳子材质比较软,所以抖动频率和幅度设计的时候都会相应的增加一些。

第二步动画当福袋打开时有一个“挤压和拉伸”的效果,一个是为了表现福袋的材质,再一个是为了体现福袋突然打开的速度感。

最后一步就是喷完粒子后的消失动画,这里加了一个位置移动的‘预期动作。然后在配合速率较快的缓动曲线最后完成  消失。

可以看一下运用动画原则之前和之后的对比,这个没有用动画原则的案例会有明显的顿挫感,整体动画不够自然,就会显得动画呆呆的。嗯。那这个用了动画原则之后整体动画会显得比较流畅,中间也没有空档期。这里说一下,基本上每个动画都会用到前面说的时间偏差控制来调整节奏,所以就没有在案例里单独列出来。

 

02. 盲盒:盲盒游戏引导入口动画

 

先拆解动画,再分析需要运用到的动画原则。这里主要说下不同点,第二步中用到了“弧形运动”的原则。‘盲盒喷出的彩带和星星会有‘不同的’速度,速度快的元素运动的路径会比速度慢的更平滑一些。

 

03. 拼图:拼图游戏引导入口动画

 

由于拼图本身造型比较单一,材质也相对偏硬。所以不好在拼图本身上去做动画。然后这里处理的方式是利用光感带出一个缩放的效果来进行视觉上的引导。这里同样控制了时间的偏差。先通过光感带动拼图礼物放大提供一个拍下去的预期动作。然后拍下去的同时扫光到边缘处立刻释放粒子,达到视觉上的同步。

 

04. 段位勋章 降段动画

 

这个案例是段位勋章的降段动画,前几个例子中动画的元素材质都偏软。所以这个案例主要是想对比一下材质比较硬的表现样式。

 

最后就简单总结一下动效设计的方法。一共拆解为四步,首先确定好需求方的目标和预期。然后再进行具体的脚本步骤的拆分,然后再聚焦到每一步需要用的的动画原则。最后再开始动效设计。设计前对需求进行充分的思考,让动效在助理业务发展的同时也能够做到有理有据。

 

原文地址:站酷 

作者:HEBBEN轩 

 

转载请注明:学UI网》UI动效设计之设计原则

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

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


文章来源:站酷   作者:陈皮Celia 

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

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


明星百科LOFT创新设计

seo达人



在日常产品设计中要考虑产品体验、丰富内容形式,用户的互动性,打造互动空间,增强用户粘度和特色内容建设同时通过设计创新为产品带来更多的收益空间。

前言

《明星百科》是百度百科的重点垂类,用户的浏览量一直很高,也受到众多粉丝用户的关注。随着5G时代的到来,竞品富媒体形态的发展,使产品体验突显单一,不能满足用户多元化的消费需求。为提升产品体验、丰富内容形式,增加与用户的互动性,产品层决定升级明星垂类定位,从 UGC 维护内容升级为“粉丝共建的明星百科”,打造粉丝用户与明星的互动空间,增强用户粘度和特色内容建设,提升内容富媒体化的转变,同时通过设计创新为产品带来更多的收益空间。

 

/// 从“产品目标”中拓展设计思路

与产品侧进行项目沟通,了解产品目标是激励粉丝用户贡献内容,在百科词条形成“明星安利”特色版块,丰富百科内容维度的同时提升与竞品的差异化。我们分析产品目标,逐步确定设计目标和方向:

图片

 

/// 提取设计关键词

围绕设计方向进行创新思考,从产品“体验、内容、互动”三个维度确定设计核心“沉浸、专属、有趣”,为用户群打造专属的互动空间,增加用户黏度的同时促进内容转化。

图片

/// 制定设计策略

考虑产品和粉丝用户诉求,重构框架、界面、内容展现等层面,增加明星效应,带动粉丝用户消费,提升差异化体验。

图片

/// 打造复式结构,提供专属空间

百度百科以权威、丰富的知识内容,满足用户浏览和编辑分享,但从内容承载到用户日益多元化的消费趋势,原有基础框架已不能很好支撑产品发展和提升竞争力。对标竞品,挖掘粉丝用户的消费诉求,我们以创新的复式结构扩展信息层,在不影响词条信息浏览的前提下,为多元化的信息内容提供展现空间。

图片

/// 增加差异化感知,满足情感诉求

图片

为强化loft层在首屏的展现,增加差异化和氛围感,两个信息层在首屏的展现比重设计为8:2,提升loft层浏览空间和操作引导。

 

/// 复式结构浏览交互方式

图片

 

/// 针对粉丝用户核心诉求,打造互动空间

 

图片
了解粉丝用户消费特点和诉求, 通过展现多元化富媒体内容,增加专属感和互动氛围,提升用户黏度;
图片
针对多元化内容形式的展现,设计和规范内容模版,规范单图、多图或横、竖版视频等内容状态;
图片

/// 增加专属感和互动氛围

促进用户情感化消费,设计话题、发布、评论、点赞等功能模块,调动用户参与和内容建设,促进站内导流;
图片

 

 

/// 搭建发布能力,实现内容共建

搭建发布能力是实现内容共建的重要环节:搭建发布流程,满足用户上传图片、短视频等需求,及时分享明星动态、资讯或最新作品,实现“粉丝共建”的目标;
图片
在发布功能为用户提供添加内容标签,表达态度和观点,增加专属氛围;发布的内容可与相关词条进行关联,增加内容互联和导流;功能体验简洁、易用,实现内容生产和共建的体验闭环。
图片

 

/// 规范设计模版 形成体验的一致化

在确立明星百科loft设计形态后,为保持在其他垂类建设中设计与体验的一致化,对loft层的内容模块和控件进行设计梳理规范,提升模版的通用和复用性,并针对不同方向垂类的特色内容,扩展模版,不断满足产品和用户的消费诉求。
图片
设计制定单图、多图,横、竖版视频模块的排版组合规则,交互规则,细化功能控件;针对垂类特色(如人物类/商业类),设计扩展模版形式;并在垂类产品建设,节约设计成本,实现快速搭建。
图片

 

/// 复式结构为多元化体验带来更多可能

明星百科LOFT的创新设计,通过对产品目标的分析和设计目标的逐步确定,从设计视角进行探索和创新推动,不仅突破产品固有框架,满足产品与用户的诉求,提升产品差异化体验,还在垂类产品横向建设中打开了无限可能,实现设计赋能。
图片

 

原文地址:百度MEUX(公众号)
作者:爱分享的
转载请注明:学UI网》明星百科LOFT创新设计

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

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


文章来源:站酷   作者:陈皮Celia 

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

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

做好大平台忽略的细节,这购物网站连获三大设计奖

seo达人


不知道大家有没有听过 Aesop(伊索)这个澳洲护肤品牌子?以天然有机植物草本为卖点,大部分产品在小几百到大几百之间。产品的网站上线后连获三奖,网站做得好,我觉得是定位清晰,想清楚产品的战略层和范围层定位定位,并运用到结构层、框架层、表现层。下面我们从各个层面分析一下网站的有哪些可以学习借鉴的地方。

图片

Aesop 的天猫国际店截图

 

他们本来是特别注重线下体验店的,除了装潢考究之外,里面的护肤顾问也都是经过专门培训的。

这样一家原本挺传统的中高端护肤品牌,与知名设计公司 Work&Co 合作推出了自己的购物网站。

图片

这个网站确实做得很有特色,而且把护肤购物的体验细节打磨到位,做到了大型网购平台做不到的事情。

上线后连获三个奖,我们来看看有什么可以学习借鉴的地方。

图片

 

信息架构

由于 Aesop 注重商品在精不在多,所以网站在导航里就直接将商品目录列出了,当然还是根据用途和肤质进行了分类。

图片

这种商品名称列表的展示方式,还真不是什么电商都适用的。

但是 Aesop 的商品不多而且包装设计非常统一几乎没什么可预览的,而老顾客大多更需要快速补货或者找到新品,所以就不需要像普通电商那样一层一层地靠预览图寻找。

以及购物车的设计也非常简洁,没有图片只有文字,而且换成深色的背景以提醒用户注意。

图片

 

内容策略

护肤品这类产品非常特殊,不像服装或者日用品那样看着不错就买了,而是需要向用户提供很多辅助信息才能促使其下单。

一般在门店里,顾问都会询问顾客的肤质和需求,向他们推荐合适的商品,并介绍其功效、用法、成分等信息,并打开让顾客闻一闻、试一试。

图片

网上购物时,虽然闻一闻和试一试提供不了,但其它的部分还是要想办法提供。

Aesop 的官网的商品详情页里,第一屏图片旁边会提供的基本信息包括:标题+功效说明+适合肤质+皮肤触感+主要成分+容量+价格。

第二屏会提供一张使用商品的视频或者图片,并提供更多信息:用法+用量+材质+气味。

第三屏会告诉用户,做一套完整的护肤流程是怎样的,以及还可以购买哪些配套的商品。

图片

另外,回头客会收到基于购买记录的个性推荐,内容也会根据季节和地域气候量身定制。

图片

 

视觉语言

Aesop 的产品包装非常简洁,深棕色的瓶子上,贴着米黄色的包装纸,上面印着深灰色的字,除了一些矩形框之外,几乎毫无装饰。

图片

线下门店的也是在结构上规整干练,但因为多用木质材料,所以没有工业风格那种冷冰冰的感觉。

图片

Aesop 的网站设计使用了与包装纸类似的色调,把白底换成米黄色,上面无论是线条还是文字,都是统一的深灰色。

而且整个网站在布局上运用了很多大方框和抽拉效果,与线下门店的设计风格像呼应。

图片

对于商品展示的风格,设计团队也是给出了一套与网站设计匹配的范例,Aesop 未来如果要增加新品,也可以在此基础上进行拓展延伸。

图片

另外,配套的活动页也设计也挺有特色的。

图片

 

思考总结

虽然国内购物都是平台的天下,但是很多大品牌还是没有放弃做自己的网站。

Aesop 这个网站,不论是在视觉风格、内容策略还是信息架构上,都是为这个品牌量身定制的,在细致程度上有统一模板的电商平台难以企及的地方。

我想未来哪怕平台再强再大,小而美的电商如果能够把细分领域的体验做到极致,还是有自己的生存空间的。

 

原文地址:体验进阶(公众号)

作者:设计师ZoeYZ

转载请注明:学UI网》做好大平台忽略的细节,这购物网站连获三大设计奖

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

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


文章来源:站酷   作者:陈皮Celia 

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

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


UI设计细节连载系列① | 让设计细节更高级的12个实用小技巧

seo达人



大家好,我是彩云。在做UI界面设计时,有时候看着设计出来的界面总觉得不大好,但又不知道问题出在哪,这里其实考验的就是设计观察力。资深设计师之所以强,往往就是强在对设计细节的把握能力,他们总能找到你所看不到的细节问题。大的问题往往一眼就能看出来,但设计品质高低往往就藏在这些设计细节中。观察力的提升也是来自于平时项目中的经验积累,为此,彩云围绕设计细节计划出一个系列文章,今天这篇文章是第一期,感兴趣的同学保持关注,后续会有更多设计细节干货文章连载更新,保证看完就能用到自己的工作中。

 

图片

当你在设计一个高效、美观的UI界面时,有时只需要一些小的调整,就能快速提高设计的品质。有时候仅仅是简单的调整就能设计出让客户、用户和你自己真正满意的界面。

在这篇文章中,我整理了一些小的设计技巧,来帮助你快速改进自己的设计,提高用户体验。

 

1.适当使用文本装饰元素

图片

有些人会拿极简设计出来说事,认为不应该加多余的文字干扰 ,界面上的内容都应该遵循有意义这个原则,这没有问题。但有时候增加文本的目的只是简单的为了“装饰”,这样是可以的。我们不希望所有的设计都变得平平无奇。

纯粹出于装饰原因而加入一些比较特别的元素也完全没问题,它可以不遵循可访问性标准,比如颜色对比度特别浅,看不清都没关系。只要这些元素不影响用户体验就可以。

 

2.UI界面中的不同元素要有区分度

图片

按钮、通知(文字链接)是用户界面中两个独立又重要的元素。如果可以的话,一定要确保用户在浏览你的网站或应用时能够快速且轻松地将它们区分开来。

按钮,在大多数情况下都是最重要的,所以在界面中一定要确保是最突出,并且很容易区分其他元素(例如:文本链接)。

 

3.使用更自然的投影

图片

设计过程中我们通常都会用到投影。投影的恰当使用,可以有效提高视觉品质。在设计界面时,避免使用比较重的投影,降低不透明度,让界面看着更加自然。

 

4.使用让视觉更加清晰的字体

图片

在设计中,字体适当都使用大写也是很不错的。它可以帮助你在设计中实现元素之间的多样性和对比度,提高视觉的整体效果。但要确保选择是合适的字体,行高和字重粗细,确保给用户呈现的内容清晰度。

 

5.面包屑导航设计要便于用户理解

图片

导航的设计无处不在,通常会应用在内容比较多的网站上,但有时很难理解它所表达的意思。如果将字体颜色和粗细稍微调整下, 就可以让用户快速确定自己所在站点中的位置,以及他们可能需要去的其他地方。

例如:如果他们通过搜索跳转到某个站点的某个位置,这就特别有用。像上图中的设计一样,始终让导航链接中的最后一项让它在视觉上与其他有明显区别,这样用户更加容易理解。

 

6.少用过高饱和度的颜色

图片

高饱和度的颜色(明亮的蓝色、红色、绿色等)在网站上是挺有视觉冲击力,并能吸引用户的注意的。但是如果过度使用它们可能会让用户的眼睛感到疲劳,尤其是结合文本内容一起使用的时候。

尽量少地使用高饱和的颜色,你可以尝试把饱和度降低,增加颜色中的灰度来使颜色变淡,这样不仅能避免用户视觉疲劳,还能更加突出重点内容,让用户阅读起来更加方便且不被视觉干扰。

 

7.使用用户熟悉便于识别的图标

图片

在设计中使用图标时,最好使用用户熟悉并便于识别的图标,让用户能快速理解使用它能做什么。使用不能传达正确含义的图标,只会变成视觉噪音,引起用户混淆,成为用户的认知障碍。

 

8.使用亲密性原则来表达元素之间的关系

图片

版式设计四大基本原则:对比,重复,对齐,亲密性,其中亲密性原则是把画面中相关元素进行分类,建立某种视觉上的关联,实现页面整体结构清晰度,加快用户在浏览网站或应用时的认知。

 

9. 使用4pt基线网格+8pt网格来做字体排版

图片

进行文字排版时,将 4pt 基础网格 与 8pt 网格 一起使用可以为设计带来更加和谐的垂直节奏。

你只需要使用 4 的倍数(16、20、24、28 等)的行高值将字体与 4 的基线网格对齐。为什么是 4? 好吧,就我个人而言,我发现在处理某些文本大小时,过去以 8 的倍数进行缩放并不是那么通用。

 

10. 减少标题的行高

图片

冗长的正文需要足够的行高来增加可读性,而标题通常要短得多,所以你可以稍微减少间距。

标题的推荐行高通常是文本大小的1 – 1.3倍,标题文字越大,需要的行高就越少。

 

11. 使用色轮上的邻近色不容易出错

图片

邻近色,是最和谐的配色方案之一,当你在挑选颜色遇到困难时,它能给你很大的帮助。

一组由“主”、“次”、“再次”组成的邻近色可以帮你快速构建一个简单的、不会出错的配色方案。

 

12. 在设计中最大化信噪比

图片

设计中的清晰度和可用性可以通过“最大化信号”和“最小化噪音”来实现,这反过来又产生了高信噪比。

你可以通过确保相关信息(信号)有效地呈现,而不相关的信息(噪声)被完全减少或删除来实现这一点。剪掉绒毛。使事情更加清晰,删减无关信息,强化重要信息,提高信噪比达到提高界面设计品质的目的。

 

彩云注:由于篇幅有限,今天是设计细节系列文章的第一期,下一篇会继续更新更多设计细节,感兴趣的同学保持关注,保证看完就能用到自己的工作中。如觉得有学到,一定要给彩云点个赞,我会更有动力,哈哈~

 

本文翻译已获得作者的正式授权(授权截图如下)

图片

 

原文地址:mediue

作者:Marc Andrew

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

译者:彩云Sky

转载请注明:学UI网》UI设计细节连载系列① | 让设计细节更高级的12个实用小技巧

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

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


文章来源:站酷   作者:陈皮Celia 

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

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

出色的图标是如何一步步设计出来的?来学学这些实操方法!

seo达人



图标是设计中不可或缺的一部分,是引导各种操作的视觉提示,可以赋予产品独特的身份。文章通过设计实操来帮助大家发现图标设计的更多可能性。

 

01 谷歌Material Design原则

使用简单的几何形状和大胆的颜色

图片

扁平化的设计趋势启发了Material Design,它也是基于基本的扁平形状,仔细选择最能代表图标所描绘的元素的形状。

 

用细微的阴影增加深度

图片

阴影是为设计赋予深度感的好方法,可以展示光线投射到物体上的效果。另外需要注意的是,模拟的自然光通常来自左上角。

 

使用颜色替换阴影

图片

▲ 每种颜色通过多种色调的变化来模拟视觉深度。在上一版的Gmail图标中,可以看到M的形状使用了不同深浅的红色,而信封下面使用了多种灰色阴影。

 

02 分步进行图标设计实操

了解了基本原则,接下来就到了实操环节,通过下面这些图标的实操演示一步步掌握这种简洁易用的设计风格。

 

闪电图标

图片

▲ 通过在两个形状的相交处创建阴影,实现顶层形状悬浮的效果;使用三种黄色阴影–顶层较浅、底层较深和最深的阴影。

 

聊天图标

图片

▲ 复制顶层聊天气泡,并将副本向右下移动来作为颜色最深的阴影。

 

标记图标

图片

▲ 复制图标,并删除右上角多余的点;复制左侧形状,并移动到右侧形状的顶部;两个形状相交以创建阴影效果。

 

旗帜图标

图片

▲ 将图形导角,提取标志底部的锚点绘制两条相交的线来创建折叠效果。

 

心形图标

图片

▲ 复制心形图标,隔离形状的左半部分;从右上角向下画一条对角线;将生成的形状与心形重叠,然后向右移动以减去阴影形状。

 

山峰图标

图片

▲ 创建两个不同大小的三角形;将较小的图形向右移动,并将得到的重叠部分作为阴影形状;最亮的颜色保持在左侧;最后运用圆角来调整图形。

 

人物图标

图片

▲ 选择并复制左侧人物形状的下半部分;将副本与右边的形状对齐;择三个重叠的形状,使用路径查找器做出阴影形状。

 

浮动图标

图片

▲ 把下方的形状向上移动至中点;复制上面的菱形,并将副本向下移动10-20像素;选择下面的两个形状,使用路径查找器保留阴影形状。

 

信封图标

图片

▲ 使用“直接选择工具(A)”,选择信封形状的第二高的点;使用“钢笔工具”在线段右侧添加一个点;抬起上面的两个点并向左右移动(如图所示),将负空间看着像抽出来的信纸效果。

 

蛋糕图标

图片

▲ 隔离蛋糕底部的形状并复制;缩小宽度并向内移动;将生成的形状移动到原始图标的顶部,并延伸较高的点以与上方的形状重叠。

 

03 最后:尝试改变图标的感觉

跟着过程一步步来设计,你也能做出效果很棒的图标。最后帮大家整理了图标实操详细GIF教程,关注公众号,后台回复: 实操 即可获取!

 

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

作者:Clippp

转载请注明:学UI网》出色的图标是如何一步步设计出来的?来学学这些实操方法!

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

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


文章来源:站酷   作者:陈皮Celia 

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

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


干货|移动端·表单设计有方法!

seo达人



不论是 toB 还是 toC 的移动端设计中,都会遇到一些表单填写和上传证件信息的情况。面对移动端要手动填写的表单,用户通常期待有高效的解决办法可以立即完成填写任务。本文为你总结出了几种移动端表单设计的实用原则,可以有效解决表单不够友好、用户填写错误、费时费力的问题,希望对你有帮助。

 

一. 信息内容层级化——信息分层次、分步骤、分页面呈现

1 . 表单结构分层

从表单结构层面来看,内容过长的表单,信息可以分步骤、分页面处理。

使用条件

  • 表单内容过长,用户填写有压力
  • 操作步骤较多,需要给用户明确的步骤提示
  • 中途需要多次跳转,接入第三方服务的表单

 

案例分析

做企业认证时,由于需要填写的项目较多,步骤繁杂,因此很多产品会采用分步骤的形式,提示用户当前进度。

图片

 

2 . 页面内容分层

每个页面的信息内容呈现,有层级,有重点

使用条件

  • 表单填写内容较多
  • 页面内文字内容较多
  • 产品对于用户填写的内容有倾向(如对平台来说更有意义、更希望用户填写的信息)

 

案例分析

大众点评在设置用户信息时,虽然要填写的内容都是“设置”,但是重点需要设置的信息使用了链接颜色处理,做了强调。

图片

 

二. 减少用户输入——用其他方式代替用户手动输入

1 . 以选择代替输入

如果用户可以做选项时,就不要使用输入,可以充分利用移动设备的性能,比如 GPRS 定位、通讯录等,合理调用第三方或系统信息。

使用条件

  • 填写的内容边界较为模糊,词语不确定性较高
  • 选项数量控制在 3-5 个之间
  • 可以调用第三方或系统信息

 

案例分析  

  • 案例一:知乎 App 博主认证 和 爱康国宾 App 个人信息都使用了部分选项替代填写:

图片

 

  • 案例二:淘宝 App 可以调动系统定位,并提供几个最有可能的选项,让用户选择最佳定位。

图片

 

2 . 提供默认选项,替用户做选择

选取最大概率事件作为默认选项,减少用户的手动调整

使用条件

  • 系统能够确定出符合用户的较大概率选项
  • 选项数量控制在 3-5 个之间

 

案例分析  

蚂蚁链实人认证在上传证件时会根据用户所在国家和地区,帮助用户默认选择概率最大的选项,不需要用户自己操作。

图片

 

三. 定义键盘类型

根据调用内容调动不同的键盘类型

根据表单输入内容的不同,调用出系统不同的键盘类型。

使用条件

  • 填写的内容有明确的输入语言要求

 

案例分析  

航旅纵横在航班查询的时候,由于航班号都是大写字母和数字的组合,所以键盘会默认调用出只有数字和字母的输入法,同时默认开启大写形式。蚂蚁链实人认证在用户手动填写身份证时也同理。

图片

 

四. 避免重要信息被遮挡

重要的信息要始终可以被看到

需要避免输入项被键盘遮挡,也要避免将重要的输入提示作为占位符,不要在用户填写时被输入的内容遮挡。

使用条件

  • 表单的填写位置刚好会被弹出的键盘挡住
  • 输入提示很重要,需要用户在输入时随时注意
  • 输入提示很长,用户短时间内记不住

 

案例分析  

大众点评在写评论时,一些可以激励用户写点评的提示性文字,会在用户输入时始终存在。

图片

 

五. 实时校验

重要的信息要始终可以被看到

当输入需要被判断和检验的信息时,系统最好可以针对信息做实时校验,避免用户一直到最后提交表单时才发现填写问题。

使用条件

  • 输入的信息需要判断,并会影响最终的表单填写通过率
  • 输入内容的质量需要用户知晓,如密码的强度

 

案例分析  

证件号码输入错误时会给予相应的提示。

图片

 

原文链接:长弓小子(公众号)

作者:元尧

 转载请注明:学UI网》干货|移动端·表单设计有方法!

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

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


文章来源:站酷   作者:陈皮Celia 

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

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


酷家乐B端线上增值营销类视觉原则

seo达人


酷家乐的产品性质决定了其增值付费类活动的目标用户从根本上说是真正意义上的b端用户,这类用户群体的审美喜好一直以来很难与视觉流行的趋势和酷家乐品牌调性找到平衡点,这类视觉产出已经遇到瓶颈;而此类运营动作越来越多,并且作为公司营收的重要组成部分,在视觉侧形成正确的指导方向具有非常重要的意义。

 

背景与目标:

背景

  • B端增值付费类用户群体具有特殊性
  • 低成本的线上运营活动推广逐渐增多
  • 在线增长是公司营收的重要部分,尚未形成视觉侧的品牌形象

目标

  • 符合用户层且体现时下趋势的视觉形象
  • 品牌刻板印象扭转
  • 具有贯穿各类运营活动的可识别特性,形成视觉指导

 

调研阶段:

用户画像

图片

过半购买角色具备设计属性,对审美也有一定的要求,所以推广视觉表现可以也需要具备一定的设计感

图片

购买角色年龄分布较广,岗位属性分布也比较平均,因此推广视觉表现需要兼顾各年龄层,具有通用适配性

 

视觉现状

图片

设计过于“用力”,为了在营销活动中体现酷家乐科技属性,与D端视觉产生差异,一味采用深色/蓝色,硬朗机械感;营销氛围叠加后画面过饱和,难以与传统电商拉开层次。

 

流行趋势

图片

 

关键词提取:

图片

根据用户画像,结合流行趋势与酷家乐品牌调性,我们得出了视觉关键词,我们将它概括为“轻炫彩”。

 

情绪板:

图片

 

实战案例:

图片

图片

升级后的虚拟奖品全部采用3D设计,强化奖品的真实存在感,更容易吸引用户注意;同时应用“轻炫彩”的设计原则,能够普适于大部分增值营销类活动页面/海报中。

输出的系列图标可以在不同场景下复用,提升了长期的设计效率。

 

原文链接:酷家乐用户体验设计(公众号)

作者:柚子、阿九

团队:柚子、阿九、九州、白夜

转载请注明:学UI网》酷家乐B端线上增值营销类视觉原则

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

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


文章来源:站酷   作者:陈皮Celia 

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

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


为什么以前的同学和你的差距越来越大

seo达人


之前刷到一条非常励志的新闻:一个高中寝室的三个闺蜜都考出了七百多分的好成绩,在为她们感到骄傲的同时,我也陷入了反思。这也许就是所谓的圈子,身边的人都很优秀的时候,你自然不会太差。

 也让我想起了之前一个伙伴通过努力进了字节跳动实习,带动了整个寝室的都努力起来了。大家依然希望向优秀的人学习,以此作为自己的目标。一起读书的时候大家都在一条起跑线,可是随着时间的推移,你们之间的差距开始明显。如果你跑在前面自然是好事,就怕落后的是自己。

 不进则退,工作多年之后反思自己,这些年是进步了还是原地踏步。如果想要缩短与他人的差距,或者拉开自己未来的优势,在职场五年内需要重点对待。

图片

 

五年内你要做好这十件事:

一、确定职场路径

二、强化设计基础

三、打造精专技能

四、勤于作品输出

五、培养总结能力

六、加强提案能力

七、叠加行业背书

八、推开学历门槛

九、融入优质圈子

十、积累职场口碑

 

一  确定职场路径 

行业里面流传着一句话:“三年入行,五年精专”,职场五年对于设计师来说至关重要。想要在这个阶段时间内把一个方向做精,需要早一点确定职场路径,杂而不精很难迈上更高的台阶。

图片

 我们可以丰富我们的专业技能,但是要明确一点,这些多维度的技能都是为了辅助主方向的深入突破。专业化的职场路径上比较忌讳举棋不定,这样就会造成能力平庸,没有自己的差异化竞争力。

 也有初入职场的同学无法判断哪一个路径适合自己,就会需要时间来验证,这种情况下可以找个有经验的前辈为你分析各路径的天花板在哪里。尽量缩短这个试错的时间,毕竟五年也是一晃而过的。

图片

 大家进行自我评估,看看你的职场路径是否清晰,及时稳固方向。

 

二  强化设计基础 

大家不要一味的追求表面的高度,而忽略基础知识的巩固,这也是为什么大部分科班出身的设计师上手能力都会更好一些。不要局限于当前工作输出的能力范围,要加强更多关联方向的基础理论知识和经验技巧。

图片

 一些基础的美术知识、版式技巧、色彩理论、手绘基础、造型透视等都要利用空余时间学习,有些内容短时间可能感受不出作用,但是在未来也许就是你设计瓶颈的突破剂。

图片

 给自己制定一些阅读计划和学习计划,强化设计基础,只有地基越牢固,职场大楼才能建得越高。

 

三  打造精专技能 

虽然我们都在说技多不压身,但是这个作为满足普通的工作需求没问题,想要有自身的差异需要打造精专技能。我们缺少的永远不是普工,而是高技能人才,要在一个垂直方向有自己的“拿手好戏”。

想要在一个阶段时间内快速突破,就需要缩短我们的技能范围,重点强化一个方向。最快的方法就是通过输出倒逼输入,在一个精专的方向里面坚持日常输出,不断的进行复盘总结。对关联的知识进行查漏补缺,对偏弱的技能反复磨练。

图片

 在设计职场中我们虽然讲究“T”型发展,但是主干上的精专才是支撑技能高楼的关键。

 

四  勤于作品输出 

 技术能力的养成离不开点点滴滴的磨练,而对于设计师来说,证明自己能力最有效的方法就是作品。光说不练假把式,道理说得头头是道,作品做得一塌糊涂,肯定是得不到行业认可的。

 专业能力的增长都是需要自我驱动的,不要仅局限于工作环境中的积累,日常的学习沉淀、作品输出、复盘总结等也是至关重要。要勤于作品输出,反复设计才能找出更多问题,进而不断解决问题,获得经验和技巧。

图片

 对于 UI设计师来说,当具备软件基础和设计基础之后,刚开始可以每天练习 1-2 个界面(具备交互关联的组合界面)。只要坚持下去,在视觉层面不难攻破。然后再逐步练习成套作品的输出,锻炼自己对于全案设计的把控,加强独立完成项目的能力。后期也要培养写作性质的作品输出,加强设计总结能力和方法论的输出能力,让作品输出的形式不局限于视觉层面。

图片

 

五  培养总结能力 

设计师的总结能力在初入职场的时候并不能被大家所重视,这个时候执行层面的能力比较重要,这是保障你完成基本需求的关键。随着项目经验的丰富和执行能力的成熟,我们会要求完成难度系数更高的项目,会去对设计经验进行总结和研究设计方法论。

对优秀设计经验和设计技巧的总结,可以让我们掌握设计的轨迹,沉淀于自己的项目中。对于 UI 设计师来说,培养总结能力要从产品体验日记开始,训练我们的观察和记录能力,也是养成习惯的关键。记录过程中的文案描述,从最开始的口语化逐步培养行业术语的运用;从流水账式的记录逐步学会精简,言简意赅的说清楚所见所感。

图片

 总结能力的提升可以从教程式文章开始,把自己擅长的某个设计经验梳理出来,这也是查漏补缺的过程。逐步过渡到对行业趋势的总结、设计技巧的总结、项目经验的总结、职场经验的总结等。刚开始不要写太宽泛的总结,以一个单一的点开始总结,以点带面的总结出这类需求设计的方法和技巧,形成可供他人学习的方法论。

 

六  加强提案能力 

能够做出好的设计,也要具备好的提案能力,设计需要被赋予诠释才能打动人心。我们不能只是画好图就丢给需求方,这样他们会使用自我主观意识去判断,无法真正意义上了解你的设计想法。

提案能力对于设计师来说至关重要,分为设计思路整理、提案文档制作、演讲能力、临场控制能力、答疑解惑能力等。在项目中能有机会进行提案千万不要推辞,这是锻炼自己的机会。有些设计师由于性格内向会让同事代劳,这其实是在白白浪费机会,跳出舒适区才能更快的成长。

图片

 在职场中除了争取机会进行项目提案以外,也可以多参与一些分享来提升这方面的能力,刻意培养自己。

 

七  叠加行业背书 

其实很多初入职场的设计师容易忽略行业背书这个概念,觉得只要有份轻松的工作就好,最好钱多活少离家近。工作几年后才恍然大悟,发现行业背书的重要性。

行业背书就相当于推动求职的“催化剂”,可以让我们获得更好的机会。组成我们行业背书的因素很多:好的学历背景、大公司的工作经验、知名项目的参与经验、设计大赛的获奖作品、专业设计平台的推荐设计师、行业内的影响力等等。还有很多都可以叠加为我们的行业背书,我们要不断去叠加,增加我们求职简历的“含金量”。

图片

 

八  推开学历门槛 

对于设计师来说学历是敲门砖的作用,特别是一些大厂的招聘需求,会对学历有一个门槛限制。不过在日常工作中,你会发现学历并不是绝对的能力体现,专业能力的强弱与学历的高低并没有太大的关系。如果学习能力比较强的,大学基础知识学得比较好的,在职场中的适应能力也许会更好。

图片

 虽然专业能力是我们的首要条件,但是我们也不能被学历限制,现在提升学历的方法很多,宜早不宜晚。要早点做好时间规划,把这个问题解决掉,后期才能把精力重点放在专业的精进上面。

 

九  融入优质圈子 

在一个行业工作时间久了,就会认识更多的同行设计师,久而久之就形成了自己的人脉和圈子。在后期圈子也会决定着自己的未来,比如想要去大的公司,要是有认识的朋友内推一下,效率就会比普通的投递方式要快很多。在一个优质的圈子里面,大家都是优秀的设计师,自然会被带动着互相进步。

图片

 在自己的第一个职场五年内,要不断的积累属于自己的人脉和融入优质的圈子,认识更多有能力的设计师。从优秀的人那里可以获取更多优质的动态,建立一个印象之后,以后遇到问题也可以请教他人,获得解决思路和方向。

图片

 通过一些设计公众号的关注、设计平台的交流、线下分享会的接触、进阶特训的学习渠道、社群的加入等可以接触一些设计圈子,筛选自己觉得优质的融入。有时候也要在圈子内解答别人问题和分享自己的经验,以此来加深大家对你的印象,以后遇到问题抛出来的时候才会有更多人愿意交流,互相帮助!

 

十  积累职场口碑 

随着我们工作年限的增加和工作单位的转换,我们会接触很多不同职业的同事,而我们在这些同事眼中的印象决定了未来的资源转换程度。如果大家对你没有印象或者印象不好,遇到设计需求或者机遇,估计也不会想到你,我们在职场中的口碑就显得格外重要。

我们在职场中都会被标签化,大家都会在脑海中对你形成标签记忆。比如你是靠谱还是不靠谱、专业还是不专业、好相处还是高傲难相处等等,和你接触的人对你的标签设定越好,以后无论是面对机遇,还是你有求于人的时候,都会因为这个好的印象而愿意帮助你。反之,可能会遗忘你,注定只是别人职场中的一个“过客”。

图片

 在职场中要注重职场礼仪,这个和你的专业能力同样重要。不同的环境要学会约束自己的行为,而职场是一个带着约束性的场景,你的态度也是别人对你的态度,都是互相作用的。

 

总结 

 三年入行,五年精转。对于设计师来说,第一个职场五年至关重要,不仅需要将专业能力提升到高级/资深的阶段,职场经验和人脉的积累也决定了第一个职场五年的变化。是原地踏步还是极速前进,都在五年之后开始发力。

五年的积累可以让我们具备专业层面的独当一面,也能让我们具备放手一搏的经验和资源,想要突破瓶颈期就要打好基础,这样才能走得更高,看得更远。

希望这些个人的职场反思可以带给大家抛砖引玉的思考,对于刚入行的设计新人有一个计划的指导;对于在职的设计师有一些调整方向的参考。

备注:本文配图来源于 Unsplash

 

原文地址:黑马家族(公众号)

作者:黑马青年

转载请注明:学UI网》为什么以前的同学和你的差距越来越大

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

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


文章来源:站酷   作者:陈皮Celia 

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

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



日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档