首页

用设计诠释搜索热点

ui设计分享达人

刷刷手机看看今天又发生了什么热点大事,已经成为现代人茶余饭后消遣时间的主要方式,而搜索热点区别于其他社区类产品,最大的优势是能够把大家关注的事件始末及相关知识服务快速聚合起来,帮助用户更全面的掌握信息。设计师作为连接用户与信息之间的纽带,在项目实践中也进行了系列的设计探索,除助力平台高效聚合呈现信息外,并以更丰富的设计层次诠释热点,帮助用户更便捷的获取所需。

///

设计思考及诠释方法

我们先要去了解用户是如何消费热点内容的,基于用户情景认知链路分析用户在事件消费的链路,可以分为三个重要节点: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

转载请注明:站酷

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

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

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


9个实用小技巧提升你的动效设计功力

纯纯

迪士尼动画的12条原则是设计师必须要掌握的经典指导性原则,是由 Ollie Johnston 和 Frank Thomas 在他们的书《The Illusion of Life》中提出来的观点(译者注:这本书在豆瓣的评分有9.3分,值得一看)。这些原则最初是用来为动画片这种传统的形式设计的,然而,这些原则也同样适用于 UI设计。所以,我想在这里做一个有趣的尝试,看能否将这些动画原则联系起来。


挤压和拉伸


在动画中,挤压和拉伸代表了物体的重力,质量,重量和灵活性。举例来说,当一个弹球在它撞击地面时会发生形态变化,就是挤压和拉伸。


在界面中,挤压和拉伸很容易就联想到按钮。当一个按钮被按下时,就可以理解为受到了挤压,通过控制按钮的挤压和拉伸,我们可以很轻易地做好一个按钮的交互动画。除了按钮之外,这种原则也可以应用于 UI 中的任何交互元素上。


△ 按钮在交互时的挤压和拉伸


△ 挤压和拉伸被应用于侧边栏


预期动作


让观众能预先知道接下来将会发生什么,它是先于下一步会发生的动作。举例来说,迪士尼动画里经常有从高空往下跳跃时会先弯曲膝盖再跳,正在跑步的人要停止跑步前会逐渐变慢步伐等等。


在界面中,悬停状态就是很好的例子。当我们把鼠标悬停在元素上时,元素会提供反馈,表明它是可以点击的,并且在点击时,又会有一些别的反馈。


△ 悬停的交互通常会暗示这个按钮是可以点的


在有水平滚动界面里,通常在交互时会显示下一个元素的部分内容。这其实是一个很好的例子,因为它是在告知用户下一步的一些信息。


时间节奏


在传统动画中,时间会决定关键帧的绘制方式。帧数越多,动画就越流畅,同时也更慢,时间能够给动画赋予情绪和性格。


时间的节奏感是任何动画的基础,速度在元素编排中起着非常重要的作用。速度太慢,用户会不耐烦;速度太快,用户又会错过一些内容。一般来说,大多数 UI动画在200-600ms之间,其中悬停和反馈交互时长大约为300ms,精细的转场动画大约在500ms。也可以去参考谷歌的动画规范(https://material.io/design/motion/speed.html#duration),里面非常详细地解释了每种动画类型的持续时间。


一些设计系统,如 Carbon(https://www.carbondesignsystem.com/guidelines/motion/)、 Lightning(https://www.lightningdesignsystem.com/guidelines/animation/styleguidelines/)都把运动的节奏感视为一个很重要的方面,并为每种类型的过渡都制定了严格的规范。


△ 右边的过渡动画显得太过于漫长,繁琐。


渐快与渐慢


在现实世界中,大多数物体都遵循着缓动运动规律。也就是说,物体的运动并不会瞬间开始或瞬间结束,就像一个物体自由落体,也是一开始很慢后面才会变快。


△ 左侧的卡片是没有缓动的,右侧的是带有缓动的,看起来会自然很多。


给 UI 中的元素加上缓动会让它看起来更加自然,缓动和节奏感都是可以有效的提升动画的品质。


呈现方式


舞台中的表演需要合适的编排才会精彩。也就是说,对象在场景中如何摆放,每个动画又如何出现,关乎演出的质量。通过这种编排,能够将注意力引向最重要的角色。


在界面中,呈现方式能够决定元素的位置,以及在交互时,它应该如何编排才能将用户的注意力引向预期的元素。


比如现在有一个基于兴趣的音乐APP,对这个应用来说,最重要的事就是让动画引导用户选择他们所喜欢的音乐。因此,有必要将类似的操作与其他元素分开编排,有目的的引导用户。


弧形轨迹


一个从高处抛出的小球,运动轨迹会做抛物线轨迹运动,弧线能使物体的运动更加自然。


在界面中,沿着对角线的元素沿着弧线轨迹将会使运动变得更加自然。当需要凸显出元素的运动路径时,多尝试使用弧线轨迹。


△ 通过对比,能够发现右侧的弧线运动轨迹会比左侧的直线运动轨迹显得更加自然。


附属动作


在动画中,次要动作能够起到烘托主要动作,比如动画中的角色在走路时,头部的晃动就是次要动作,却能够让角色行走显得更加自然。


在界面中,次要操作能够起到强化关键动作,当元素需要向用户提供反馈时,这个方法非常管用。所有的微交互都是基于这个附属动作原理。


△ 按钮边上的粒子效果强化了主按钮的点击效果


夸张和吸引力


场景中的重要角色通常会采用一些比较夸张的动作来获得更多的注意力。


在界面中,重要的交互也会通过一些夸张的动画来引起用户的注意。谷歌设计规范中的 FAB按钮就是一个很好的例子,FAB按钮在不动的时候也比较能引起注意,因为它通常会带有比较鲜明的颜色,并且是独立悬浮在界面元素之上的。当它被点击时,FAB的动画被放大,把整个界面都占满,使得它完全占据用户的注意力。


△ FAB夸张的交互形式


△ 对于支付这么重要功能的按钮,通过夸张的动效引起用户的注意


跟随动作和重叠动作


想象一只兔子从高处跳下来,当兔子开始起跳时,它的耳朵动作会与身体动作发生错位。然后当它着陆时,它的身体停下来了,但是耳朵还在动。前者称之为跟随动作,后者被称为重叠动作。其原理说的就是:没有任何一种物体会突然停止,物体的运动是一个部分接着另一个部分的。


在界面中,可以使元素在停止之前超过它们原本的位置,使得元素运动更加自然。(译者注:大白话就是我们常说的回弹效果。)


△ 界面有一定的回弹,会显得更加自然。


△ 当界面滚动时,文字会跟随图片的运动,图片与文字以不同的速度运动会更加自然。(译者注:像是被拖着走的那种感觉)


总结


界面中的每一次交互都必须在适当的场景中精心设计,让整个体验更具沉浸感。在正确的地方使用这些原则能够确保产品中的交互体验更加协调自然。


这些原则正在以不同的形式应用于当今的数字产品中,值得敬畏的是,30年前设计的一套规则到今天仍然适用。

(译者注:这又应了迪特·拉姆斯的设计十诫,好的设计是不会过时的。)

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

魏华的微信.png

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



10个让用户一眼就爱上的设计心理学知识

纯纯

undefined


一个优秀的设计不仅要解决正确的问题,同时也是给用户创造积极的情感。在过去,实体产品可以通过人类的五感来创造情感体验,但对于如今的数字化产品来说,这似乎很难达到,因为只是在屏幕上进行枯燥的交互来获取服务。


所以,数字化产品设计师们需要更深入的理解每种类型的情感,以及创造它们的心理学原则。


根据唐.诺曼(Don Norman)的研究,人们对一个物体产生情感有三个层次:本能、行为和反思。


undefined

  • 本能层: “用户想要的感觉是什么”

  • 行为层: “用户想要做什么”

  • 反思层: “用户想成为什么样的人”


在第一层,用户将通过视觉和与产品的交互设计中产生情绪。因此,这是UI设计师擅长发挥的地方。除了美学和基本的平面设计原则外,下面是我在工作中经常应用到设计中的心理学原则。


格式塔原理


相似律

人类的眼睛倾向于将相似的元素连接成一个组,而大脑会认为这些元素都有相同的目的。 


undefined


因此,在设计具有相同功能和内容的界面元素时,就应该要保持一致性。(彩云注:这也是为什么要保持一致性的理论解释)


应用场景: 导航、控件、卡片、banner、内容、分页


连续律

人眼会将连续的元素视为一组。这一定律与对称性和相似性非常相关,通过在一个序列上设计相似和重复的元素,我们可以将用户的视线引导到我们想要的方向,它能使得阅读信息更加连贯和清晰。

 

undefined


一点点的切割是在暗示用户,这里还有更多的内容等待你去查看。


应用场景: 菜单、列表、排序、轮播、服务进度


封闭律

当看到一幅不完整的图像时,大脑会依赖之前的经验进行填充。 


undefined


这是图形和logo设计中常用的规则,但是在产品设计中,我们也经常把它用在图标和Loading设计中。


应用: 图标、loading、数据可视化


相近律

这是UI设计中的一个基本规则,因为人眼会将任何相邻元素视为一个组。 


undefined


在设计的时候,我非常注重使用间距来将元素组合在一起。我通常使用大空间来分隔大内容组,然后使用小空间来分隔大内容组中的小内容组。


应用场景: 导航、控件、卡片、banner、内容、分页


对称律

我们的大脑喜欢看到对称和平衡的东西。它是所有设计领域中使用最频繁、最安全的法则。它帮助我们创造一种稳定和秩序的感觉。 


undefined


当设计需要简单和谐可视化的产品时,我经常使用对称律。当用户需要关注重要的事情时,它也能让他们感到更舒服。缺点是,如果过度使用,产品会变得乏味和单调。通常,我用标题或CTA按钮来更好地强调和号召行动,打破画面的单调格局。(彩云注:CTA是call to action的缩写,中文通常翻译为行为号召。可以理解为引导用户点击的行为都算是行为号召)


应用场景:控件,banner,强调内容,产品显示,清单,导航。


背景分割

这个定律是关于人眼倾向于注意脱离背景或组合的事物。 


undefined


我使用这个规则引导用户的眼睛看到重要信息。它通常是一个卡片设计与一个轻投影在背景之上的层。此外,构建整体也是应用这一规则的一种方式。


应用场景:卡片、内容、列表、服务、摘要


共同命运法则

在同一方向上移动的元素被认为比固定的元素或在另一个方向上移动的元素更相关。这个规则应用帮助我们建立组和状态之间的关系。 


undefined


在制作动画时,我经常更明确地使用这个规则。然而,我们仍然可以适用于许多不同的因素。


应用场景:导航/下拉菜单,折叠,手风琴,工具提示,产品滑块,视差滚动和指示器。


2. 焦点原则


当我们看东西时,我们的眼睛倾向于首先关注最突出的元素。理解这种行为将帮助我们在设计中创建一个“锚点”,从而推动用户查看我们的场景之后的内容。


undefined

应用场景:内容、落地页、价格、产品页、banner 


3. 雷斯多夫效应


(彩云注:维基百科解释为指个人对学习材料或所见所闻的资讯,容易记住最特殊的部分的现象。例如:有一些参考书将重要的资料,以不同颜色或特殊的字体标示出来,就是利用雷斯多夫效应来加深读者的印象。)


这也被称为隔离效应,它表明人们倾向于注意并记住与其他部分不同的部分。这条规则很容易与焦点定律混淆。不同的是,应用此规则的元素通常是独立的,没有为用户导航更多信息的额外功能。 


undefined

应用场景:定价表、促销banner、不同会员介绍 


4. 本能反应


基于现实世界打造的视觉体验。比如,当我们看一个视频,每个高潮笑话时都有旁白跟着一起笑时,我们会更容易发笑(彩云注:想想《快乐大本营》)。用户会喜欢我们的设计,如果它让他们感觉良好和舒适。


(彩云注:这个理论的意思是说尽可能让用户产生沉浸感,把产品用到真实的环境上,比如大家平时使用的手机样机,把设计的界面放到这些样机中就能够给人直观的感受到应用后的效果,也是这个理论的运用)。 


undefined

应用场景:产品配图、插图、摄影 


5. 色彩心理学


有很多研究表明颜色对我们的潜意识有特别的影响。对颜色的看法也因性别、宗教和文化而异。这张彩色心理学海报就足够了(彩云注:感兴趣的可以自行翻译研究下)。


undefined


此外,我们不要忘记从早期到现在一直在广泛使用的颜色,这些颜色的使用更符合用户习惯:

红色:错误

绿色:成功

蓝色:进行中

黄色:警告


6. 形状心理学


undefined


就像颜色一样,人类的潜意识对不同的形状也有不同的反应。例如:

圆形、椭圆形:传递积极的信息,通常与社区或关系有关。

方形和三角形:带有强烈的信息,通常与力量和稳定联系在一起。

竖线:代表强度、力量或攻击性。

横线:表示平静、相等、安静。


7. 双码理论


这一理论解释了人类需要视觉和语言信息来尽可能快地处理信息。此外,人类是视觉动物,我们的大脑处理图像的速度是处理文本的6万倍。为了最大化设计的有效性,我们不应该去掉解释性的文字。


(彩云注:根据这个理论,在做作品集时,就应该尽可能的多用视觉化语言,文字作为辅助,对于视觉设计师来说,能用图表达的就尽量减少文字的比重。) 


undefined


 一个很明显的例子就是导航栏。大多数新的应用或具有复杂功能的应用都同时设计了图标和文字标签。 


undefined



8. 并行设计


人类的眼睛倾向于看到平行因素比其他因素更相关。我经常使用这一原则对同一屏幕内的两组不同内容进行分类。最容易看到的例子可能是Facebook messenger界面,当帖子并排排列时,消息是平行的。 


undefined


9. 共同区域


这一原则类似于格式塔原则中的相似定律,但它并不是完全相似。共同区域原则是通过我们使用分隔线、形状或颜色的方式创建的。 


undefined


如果一个界面需要用户滚动更多来查看内容,我们应该有一些方法来更清楚地划分它,而不仅仅是使用间距。


应用场景:列表清单、信息流

 

10.扫描图形


根据NNGroup UXPin等组织或团体的各种研究,两种最常用的扫描模式是“F”和“Z”。

  • F的使用最为广泛,尤其是对于内容量大的网站。

  • Z用于不太注重文本的网站,通常强调在最后的号召行动。

一旦我们理解了如何使用这些模式,我们就可以选择布局并有效地安排元素来实现我们的设计目标。 


总结


第一印象是最令人难忘的,积极的体验可以在用户和产品之间创造持久的关系。如果能让用户在一开始就喜欢上我们的设计,就能为我们的产品创造了一个很好的优势。

(彩云注:这些都是非常基础的理论,但基础的厚度才是决定后期发展高度,我现在越来越能体会到这一点了,也希望大家能重视并加强基础的学习。) 



原文:https://blog.prototypr.io/10-psychological-rules-i-used-to-make-users-love-at-first-sight-55c71f99bfa1

作者:Hoang Nguyen

译者:彩云Sky

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

undefined

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

魏华的微信.png

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


设计中的视觉不平衡

纯纯

用户本能地会对不平衡的设计感到厌烦,如何在画面中创造一个有吸引力的平衡?是本篇文章要分享的内容。

undefined

Illustration: Outcrowd


平衡是一个作品中最重要的元素之一。平衡中的对称关系能够创造平衡与和谐,这种平衡状态直观上能够让用户感到舒适。


人体是垂直对称的,我们的视觉接收也与之相对应。我们喜欢物体在垂直轴上保持平衡,直觉上总是倾向于平衡一种力量与另一种力量。


undefinedIllustration: Outcrowd


在设计环境中,平衡是基于元素的视觉重量,而视觉重量是用户对图像的注意力范围。如果画面是平衡的,用户会下意识地感到舒适。画面平衡被认为是其元素在视觉上的比例安排。


如何让一个页面看起来平衡?


1. 对称(静态)平衡

最常见的平衡例子就是使用对称。


在潜意识层面上,对称的视觉能让人愉悦,能让画面看起来和谐有条理。对称的平衡是通过在水平或垂直的中轴两侧均匀放置元素来创造的。也就是说,画面中间假想线的两边实际上是彼此的镜像。有些人认为对称的平衡是无聊和可预测的,但它经受住了时间的考验,到现在仍然是在页面上创造舒适和稳健感觉的最好方法之一。


undefined

Illustration: Outcrowd


2. 不对称(动态)平衡


两侧重量不相同的元素构成具有不对称平衡。


动态平衡通常会比静态平衡更有设计感,让画面不至于呆板。在缺乏平衡的情况下,我们的目光会条件反射性地开始寻找平衡点,这是一个很好的机会,可以将注意力吸引到页面上可能还没被注意到的部分。页面重点就应该放在这里——抓住用户的注意力,就像产品的生命线一样。 


undefined

Landing page — Asian Cuisine


比如一般这样去“配重”的元素会是一个按钮或者标题。


重要信息(或者是行动按钮)就是我们需要去配重的价值元素。


不对称的现象越严重,用户就越想找出其中的原因(检查配重)。人们本能地比平时更仔细地研究这样的画面。然而,这里需要注意分寸,过于古怪的构图并不总是能被很好的感知。



3. 径向平衡


undefined

Illustration: Outcrowd


平衡中的另一种类型,特点是视觉元素从一个共同的中心点放射出来。径向平衡在设计中不常用。它的优点是,注意力很容易找到并保持一个焦点——恰好就在它的中心,这通常是构图中最引人注目的部分。



4. 马赛克平衡


这是一种平衡中的混乱,就像 Jackson Pollock的画作一样。这样的组成没有突出的焦点,所有的元素都有同样的视觉重量。没有层次,乍一看,画面就像视觉噪音,但所有元素又相互匹配,形成一个连贯的整体。


(彩云注:这是一种比较高阶的设计平衡处理手法,用的好可以让画面非常具有设计感,但把握不好的话,就会非常凌乱。所以,我们平时能看到很多大师的作品看似一些简单图形的使用,但就是好看,轮到自己设计的时候就会发现,越简单的设计似乎越难设计好。) 


undefined

Illustration: Outcrowd



视觉平衡的秘密?

当谈到构图中的重量平衡时,他们经常将其与物理世界中的重量进行比较:重力、杠杆、重量和支点。我们的大脑和眼睛感知平衡的方式非常类似于力学定律。我们很容易把一幅画想象成一个在某一点上平衡的平面,就像一个天平。如果我们在图像的边缘添加一个元素,它就会失去平衡,有必要修复它。元素是否是一组色调、颜色还是点并不重要,目标是找到图像的视觉“重心”,即图像的重心。


不幸的是,没有精确的方法来确定一个物体的视觉质量。一般来说,设计师依赖于他们的直觉。不过,下面这些有用的观察可能会有所帮助:

  • 大小

大的物体总是更重

  • 形状

不规则形状比规则形状的元素轻

  • 颜色

暖色比冷色重 


undefined

  • 色调

    深色物体比浅色物体重


  • 图案

    带有图案的元素显得更重


  • 3D

    带有纹理贴图的元素显得更重 

undefined

  • 位置


物体离中心越远,其视觉重量越大 


  • 方向


垂直元素比水平元素更重 


  • 密度


许多小元素可以抵消一个大元素 



  • 内部复杂性

    物体内部越复杂,视觉重量更大

  • 填充空间关系

    正形空间比负形空间更重

  • 对重量的感知

    照片中的哑铃看起来会比一只钢笔更重 



总结

当使用对称时,作品看起来可以更加的专业和有科学性。其中,静态对称的作品显得更加有专业精神和严肃的;而动态对称的设计方法则能吸引用户的兴趣,表达出个性和创造力,能让用户集中注意力。 


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

魏华的微信.png

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


数据可视化设计常出现的错误,你一定要避免!

seo达人

1.三维图形使用不当

虽然三维图形带来的立体感很强,但用在可视化设计中,很容易出现问题。

一方面,三维图形具有X、Y和Z坐标,容易造成图表间的遮挡关系,遮挡会掩盖一部分的数据,让精准比较数据信息变得困难。

另外,透视使对象看起来像是位于三维空间中,但在数据可视化中,它会造成错误的层次结构:前景图形看起来很大,背景图形很小,数据关系被不必要地扭曲。

图片

 

设计要点:

三维图形很有吸引力但可能会遮挡重要的数据信息,并扭曲数据间的比例关系;

如果没有绝对需要尽可能使用二维图形样式。

 

2.数据太多

在设计中,很多人总想在一张图表中尽可能多地展现内容,把各种数据信息聚合在一起。

这样的想法本身没什么错误,但重要的前提是要有清晰的认知,明确知道到底要展示哪些数据。

如果可视化中包含太多数据,信息的展现会变得不堪重负甚至难以理解,这样的话包含的数据再多也没有任何意义。

图片

 

设计要点:

避免数据可视化的信息过载,如果一张图表中包含的信息过多,反而会让用户混乱;

灵活结合多种可视化方式,让数据的展现变得更有效。

 

3.省略基线

一组数据往往各不相同,数据差值的大小也不确定。为了使可视化效果看着更舒服,有的设计师通过改变坐标轴比例来展示数据关系。

最常见的例子就是让Y轴代表的数据不是从0开始,借此夸大数据之间的差异,让数据的变化更加明显。

图片

 

设计要点:

图表的美感再怎么重要,也要服务于精准的数据表现;

避免通过省略基线来故意夸大或缩小数据差异,造成用户误解。 

 

4.选择错误的可视化方法

每个数据可视化方法都有自己的特点。例如饼图适合用来比较一个整体中的不同部分,但不适合用来比较几组不同的数据。

通过饼图的比例划分,虽然可以直观地显示三家企业的收益,但使用条形图会让这三家企业之间的差异更加明显。

如果目的是为了显示一段时间内的收入,那么折线图会是比条形图更好的选择。

图片

 

设计要点:

数据可视化方法并非一刀切;明确可视化传达的变量及最终目的。

 

5.混淆关联

数据可视化更高的价值在于探索和发现不同数据间的相关性,通过比较几组不同的数据关系,找出其中的关联性,从而得到一个更有根据的验证结果。

显示相关性最常用的方法是将几组不同的数据叠加在同一个图表上,但当叠加的数据数量过多时,图表会变得难以识别。

另外一旦强行关联几种相似的数据,有可能造成结果的混乱。一个有意思的例子是冰激凌销量的增加与暴力犯罪的激增有关,因为这两者都是因为气候变化造成的结果。

图片

 

设计要点:

透过数据间的关联性发现事物本质是有意义的,但要考虑数据间的关联是否有依据、是否合理;

数据有相关性并不等于有因果关系。

 

6.放大有利数据

数据的增长或下降和时间是不可分割的。放大时间范围是很多公司经营中投机取巧的方法。

比如只在图表上向用户展示业绩增长的4-6月份(上图),这样看起来公司业绩增长幅度特别大,但如果将X轴的时间缩小到一整年(下图),才会发现公司真实的经营状况,4-6月份的业绩增长仅仅代表了公司业绩持续下跌中的小幅上涨。

图片

 

设计要点:

避免放大的可视化效果与数据整体不一致;

短时间内放大的数据表现可能会让用户对信息的判断产生错误。

 

7.避开常见的视觉联想

视觉元素影响用户的心理,图标、色彩和字体都具有影响观者感知的作用。

下图的可视化描述了美国各个地区宗教信徒占所有居民的百分比,但使用的颜色与地图的设计元素(蓝色的水、绿色的植被和棕色的土地)太过相似。

图片

▲ 分析数据可视化很耗费精力。在看到这样的图表时,我们第一时间联想到的应该是国家的地形情况,可能很难在这个熟悉的认知下去重新理解这个图表代表的其他含义。

 

设计要点:

避免强迫用户重新理解常见的视觉联想,造成对数据的注意力分散。

 

8.过分纠结于数据可视化

数据可视化将难以表现的数字关系赋予了易于理解的形式。最理想的方式是可以通过可视化清晰、简洁地传达数据关系

但是并不是所有的数据都需要使用可视化来表现,有时候一个简单的数据搭配一个流行的颜色就足以说明问题。

图片

 

设计要点:

数据可视化是一种交流工具。像其他所有工具一样,有时它是合适的,有时可能另一种工具更适合。

 

为回馈一直以来关注和支持Clip设计夹的读者,将免费赠送3本《写给UI设计师看的数据可视化设计》书籍给大家,帮助大家更好地学习数据可视化设计。

参与方式:详见原文。

 

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

作者:Clippp

转载请注明:学UYI网》数据可视化设计常出现的错误,你一定要避免!

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

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

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

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

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


2022年,B端设计的趋势有哪些?

seo达人

视觉趋势

1. 3D设计风格

虽然 3D化 的视觉风格早已到来,但是在B端市场上,3D风格在此之前依旧表现的十分克制。

随着 C4D、Blender 这些 3D 建模软件的不断普及,再加上互联网上关于 3D 建模教程的增多,你会发现 3D 风格的视觉表现,是一个 B端视觉设计师 的基本要求。

而3D风格用在B端软件当中,会有两个使用场景:

 

图标

因为在B端产品当中,图标本身就是非常难以去表现,比如“物联网,大数据”。

许多的抽象词汇,很难通过一个具象的事物进行表达,而在企业官网当中,在视觉表现上的要求又十分的高。因此你会发现,在视觉风格上的选择,往往只有 3D 图标 + 插画 这一条路。

图片

并且 3D 图标的使用场景不会太过于局限,也可以用于产品的工作台、运营营销工具箱 等页面,因此 3D 图标的出现,它的应用场景也会相比之前 要更加的广阔。

图片

 

可视化大屏

大屏设计 也在不断的“内卷”,因为传统的 2D 可视化大屏 所搭建出来的大屏已经满足不了企业的野心, 像DataV 腾讯云图 ,大家都在朝着 3D风格 炫酷的方向进行延展,因此也就会导致 3D 的视觉风格需求 激增,而 3D 建模仿佛就是大势所趋。

图片

 

2.新拟态

虽然新拟态是在前两年的产物。这个设计风格背后,遭到了很多设计师的质疑与排挤。

但是随着这个风格的不断成熟,感觉它在B端视觉领域(特指的是 官网 ),是非常受到欢迎的,因为整体的风格,与官网的设计形式趋同。

同时作为B端产品的官网,其实是更需要新拟态这种风格。因为电脑场景下鼠标光标对页面进行 Hover 操作 给出的真实反馈,而使用了新拟态的官网按钮,给你的反馈非常真实。

这里安利一下腾讯云的首页官网,大家就会发现在设计风格上,大量的采取了新拟态元素,并且配合 3D 风格的图标,以及毛玻璃材质的设计,让它的设计瞬间加分不少。

图片

 

3.开源的设计系统

在去年,设计系统迎来了一波发展的高峰期,随着字节、腾讯,三大设计系统(Arco Design、TDesign、Semi Design)的开源,其实是给我们很多B端设计初学者,有了更加完整仔细的B端入门教程。

比如 Arco Design 的组件用法 https://arco.design/docs/spec/link

图片

就清晰的讲清楚了每一个组件的使用方式,以及注意事项,仔细阅读这里面的内容,其实就是B端设计的入门学习。

而未来,国内的环境,开源的系统也会越来越多,大家可以针对这几大类不同的设计系统,进行对比,或许会有一番收获。

 

产品趋势

超级app

这里的 超级app 可能和大家潜意识里的 支付宝、微信 这些软件不太一样。

在B端行业,随着疫情的不断扩散、再加上了两年时间的发展,很多B端产品的功能架构都出现了一个现象,产品的功能开始变得非常拥挤。因为B端软件的核心价值其实就是靠着一个又一个功能去累积,也就意味着随着B端产品的发展,功能模块在不断的累积,导致在设计层面,这样的现象变得更加严峻。

你会发现左侧的导航菜单已经完全没有办法装下这些导航内容,而这一现象也反映在很多产品当中,比如我了解的 飞书管理后台、薪人薪事 等等诸多B端产品,它们在整个导航内容上,已经增加到一级导航 15+  、二级导航 40+ ,这无疑会开始对设计师的能力造成巨大考验。

图片

面对这一情况,许多导航菜单都将会迎来前所未有的挑战,最近也在深入研究导航菜单过多时的解决办法,发现了一些新的 导航菜单 设计方法,有机会咱们重新梳理一下 导航菜单 的内容,将B端设计指南 文章进行更新。

图片

 

低代码定制化

低代码一直是我关注的一个领域,先给不明白低代码的同学简单科普一下。

低代码,一种快速开发应用的软件,将通用、可重复利用的代码形成组件化的模块,通过图形化的界面来拖拽组件并形成应用。低代码能够实现只写少量代码或不写代码,类似用“乐高积木”的方式来开发。

在国外有很多著名的低代码成功案例。Outsystems(国外非常出名的低代码平台)帮助施耐德电气在20个月内推出了60款应用程序,开发过程加速了两倍,仅在第一年就节省了650人天的工作量;在2012年即将推出Model S之际,特斯拉放弃了SAP的ERP产品(可以思考一下为什么),改用低代码开发平台Mendix,用25个人四个月时间自建ERP系统。

去年,低代码平台,也有很多新产品面世,其中就包含:

图片

因此你会发现,其实低代码就是在解决一件事,围绕着某一个业务场景,通过平台的持续完善优化。

让所有的功能都能围绕这个业务展开,其中包括:权限、时间轴、流程、表单、公式等等,能够解决很多特殊的业务场景。

而低代码会涉及到设计思路上的转变,以及低代码编辑器的出现,如何去设计如此复杂的配置流程,如何能够让用户能够快速上手,如果你能够有比较完整的思路,这些都会成为我们设计的新机会。

 

行业细分

随着互联网市场的不断发展,用户会越来越关注产品在自己行业的应用,比如CRM,其实只是一个笼统的称呼,现在CRM市场又会分为 SCRM、运营CRM,等诸多产品。

PaaS类的平台也出现了 负责从虚拟主机和数据库层面入手的 iPaaS 以及 从应用和数据层面入手的 aPaaS。

即使是大家经常使用的 钉钉、企微、飞书,它们也在各自的领域有所擅长。

图片

因为B端产品,在底层逻辑上是不能允许趋同的产品出现,如果你和别人的产品一样,其实是没有办法在目前的市场上立足。

因此你会发现,虽然产品形式都会比较相同,但是B端市场十分广阔,大家都在去寻找自己产品的差异化。

当然市场是瞬息万变的,这里也只是简单聊聊我自己的看法,希望对你有所帮助。最近拖更确实比较厉害,准备之后几天给大家抽些书,可以多留意留意公众号的文章。

 

原文链接:CE青年(公众号)

作者:CE青年

转载请注明:学UI网》2022年,B端设计的趋势有哪些?

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

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

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

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

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


这些设计小妙招,助力B端产品体验提升

seo达人

一、预判设计

在团队活动时,从搭档的一个眼神我们就能预判他接下来的动作,相互的默契配合能让我们顺利地完成任务,在产品设计中的预判设计也可以得到事半功倍的效果。

我们可以从历史记录、效果预知、智能辅助和行为惯性4个方面进行设计,辅助用户决策,提升操作效率。

1.历史记录

a.用户操作行为记录

广告优化师通常会管理几十至上百个账号,需要在多个账号之间频繁切换去盯盘和新建广告,频繁的操作难免会造成信息遗忘和决策卡顿,从而会影响操作效率。在管理后台的设计中可以通过记录用户最近操作行为,恰合时宜地为用户提供帮助。

案例:在新建计划环节,标识出本账号上次的选择记录(最近一次的投放目标),辅助优化师快速做决策。

图片

b.基于操作习惯的系统预测

平台系统可基于个体操作习惯和大数据分析来预测用户需求,提供高概率的操作建议,给予用户贴心指导。

案例:针对广告平台表格信息密集,不易快速获取关键指标的问题,Google提供了用户自定义栏,而Facebook的表格栏会根据用户列操作习惯和自定义栏行为进行大数据分析,预置一些高频意图的组合栏,一键切换即可查看关键指标,操作更便捷。

图片


2.效果预知

a.效果预览

表单页对填写的物料内容进行映射,展示真实效果预览,降低用户心理的不确定性。

案例:在进行广告创意创建的过程中,优化师填写完标题和上传完物料后很难知道广告投放到手机端用户看的真实效果。而所见即所得的可视化编辑方法支持创意样式实时预览,可以辅助优化师更好地进行创意优化。

图片

b.效益预估

针对一些需要效力评估的页面,平台通过预置好的算法对用户内容的表达及时给出估算值,给出建议,从而提高内容填写质量,降低填写的盲目性。

案例:Google广告平台在新建创意环节,对广告素材资源的组合方式和数量进行估算,呈现当前广告与高质量广告设置的差距,辅助用户进行高质量的广告制作。

图片


3.智能辅助

用户在进行输入等操作时可以提供智能辅助,例如表单填写时对需要录入信息的区域提供辅助提示,通过自动补全或联想词来帮助用户快速录入信息,在保持用户的操作自由度的情况下提效。

图片


4.行为惯性

在一些场景里,用户的行为具有很强的关联惯性,例如上班时间进到办公区域打开办公APP首要目的一般是打卡签到。通过梳理主线任务或整理用户体验地图可以挖掘出很多基于行为预判的设计机会点。

案例:预判用户在工作台内截屏后大概率是去反馈遇到的问题,适时将反馈入口透出,可以提高反馈的效率和用户体验。

图片

 

二、表达清晰

现实生活中,在与他人交往时,清晰的表达尤为重要。同样是演讲,有的演讲者“词不达意”没有重点,或者内容晦涩难懂让听众感觉索然无味;而好的演讲者则会用场景化的方式将逻辑复杂的事情讲给听众,让听众有身临其境的画面感。

好的设计也应该是清晰好用的,能让用户沉浸其中轻松高效地完成自己的任务。

如何让用户通俗易懂地了解产品功能,并能快速上手?我们可以从功能易理解、内容强吸引和选择无负担三个方面来降低用户的操作门槛。


1.功能易理解

a.术语转换

将一些晦涩难懂的词汇转化表达方式,转化为更贴近用户视角的文案描述,传递细节感受;

图片

b.信息有效展示

透过需求背后的真实意图分析和高效率的信息展示可以让用户更方便地获取更多信息,提升产品的服务效益。

案例:服务器预警平台从传统的表格形式优化成拓扑图。将所有的云服务器都抽象成一个个矩形,矩形的颜色代表服务器监控指标的状况。当方块颜色显示为黄色,则表示该云服务器内有监控指标出现了异常,这个时候目标用户就需要重点关注。

图片


2.内容强吸引

对于老用户来说,从之前习惯的平台迁移到新的平台一般会有很大的抵触心理。迁移前用户考虑的关键点包括:不迁移是否有影响?新平台有什么优势吗?迁移起来麻烦吗?

以百度营销客户中心迁移引导页方案为例,初期方案首屏只告诉用户平台升级了,但是不能快速了解到升级后的核心优势有哪些,同时迁移按钮设计得很弱,传达的信息是迁移可能会很麻烦,很容易让用户止步于此。

所以在进入迁移导流页面时,首屏首先要讲清楚新版平台的能力和迁移方式。对于当下想迁移的用户,明确迁移方式和入口;对于徘徊不定的用户,告知迁移后的好处并做好最后下线时间的提示。这些信息不仅能够消除用户迁移前关于成本的顾虑,也能吸引用户立即开始迁移行动。

图片


3.选择无负担

B端产品操作链路通常比较长,用户很容易迷失其中。对于逻辑复杂的功能在做页面设计时需要突出主次和流程引导,尽可能提供一个主要触发的主按钮,让客户不用过多思考就知道模块和操作的隶属关系,降低认知的负担。

图片

 

三、操作可控

我们在执行任务时总是希望有过往经验可借鉴,如果事情按照自己的预期发展了会觉得很踏实有可控感。同理,用户在操作一个系统界面时也会有类似的心理变化,对于自己熟悉的功能希望主动权在自己手里,能复用之前的经验无需额外的学习成本;对自己不熟悉的功能希望有及时的引导,能很快地上手并能掌握主动权。

不可控的操作体验会让用户在使用过程中产生很强的挫败感,一旦有了这样的心理感受就很难被扭转。那如何保障体验的基线确保用户正向的感受呢?下面就结合操作一致性和明确指引性两方面进行说明。


1.操作一致性

针对同类型的功能,在交互设计上要尽可能地保持逻辑对齐,保证平台的一致性同时降低用户的学习成本。一致性设计对产研提效也有很大的益处。

案例:下例中的批量操作项的逻辑,都是通过选中复选框之后在模块上方展示批量操作栏且支持一键关闭。这样该平台的用户无论在任何场景下只要注意到复选框就对批量操作功能有了预期,没有额外的学习成本。

图片


2.明确指引性

对于复杂的使⽤流程,最好能够在客户使⽤的过程中建立统一的指引,引导客户⼀步步完成操作,从而提高任务的完成率,促成业务目标达成。

案例:当一个平台需要用户完成的任务繁多且流程性强时,需要把所有的核心任务按照层级进行呈现,并作为一个固定模块展示在醒目位置。这样用户既可全局视角理解业务又能作为功能入口快速触达。

图片

 

写在最后

B端业务中,交互设计的核心在于为特定场景设计择优的行为路径;通过分析用户当前所处的阶段和场景来判断此刻遇到的关键问题。针对不同的问题去选择对应的解决策略,例如对于新手来说降门槛会是首要任务,对于熟手来说操作的效率会显得更为重要。结合预判设计、表达清晰、操作可控三个维度的案例可以让我们在对业务理解有限的情况下,产品设计能有更多思考角度,也能有更明确的设计主张。

 

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

作者:商业用户体验部

转载请注明:学UI网》这些设计小妙招,助力B端产品体验提升

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

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

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

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

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



B端帮助体系二三事

seo达人

前言

业务性强,内容复杂度高是To B产品的典型特征。新用户需要快速认知平台能力并顺利上手,老用户则需感知信息的变化、功能的拓展并迅速响应。体系化的帮助是通过在操作的不同阶段提供差异化的引导及反馈,助力用户在应用中成长。

帮助体系是什么

通过大量的案例积累及系统调研,发现“帮助”并不是单一的某个功能,而是一种体系化的能力,需要通过不同手段来实现。概括来说就是“在产品使用不同阶段为用户提供恰当的提示与指引,通过组件的灵活应用及能力创新,帮助用户降低认知成本,提升操作效率。”

用户对产品的应用周期经历前、中、后三个阶段,每个阶段的设计目标都各不相同:操作前注重提升用户的全局认知,深化理解,助力精准触达;操作中助力提效,让用户知道做什么,怎么做;操作后明确反馈,帮助用户明确结果。

图片

操作前:引导用户深化理解,提升全局认知

用户有新老之分,对系统的熟悉程度及应用诉求不同。因此针对不同用户各阶段的使用诉求进行场景化的拆分,提供差异化帮助。

 

 

帮助用户深入自主的认知平台

我们到陌生的地方会找导视标识或者找人寻求帮助,新用户到平台内也会面临同样的困境,遇到问题无从下手时会寻找含有【帮助】【客服】字样的内容,那么帮助中心、智能助手这类有明显特性的功能则会成为用户遇到问题时的第一选择。通过业务思考及行业调研,以简洁、高效、情感化为目标最大化的发挥其属性优势,让用户在使用过程中更易理解和接受,平稳有效的帮助用户渡过新手期。

1、帮助中心

帮助中心,一个时常被忽略并被严重低估的功能。它是平台全量信息集合地,不仅能帮助用户系统了解平台概况,也能引导用户行为,树立品牌形象。为保证用户高效、便捷的获取帮助信息,在页面表现上需突出内容本身,忌过度装饰。从设计角度来看,一个好的帮助中心应该符合以下条件:框架简洁清晰、信息突出并辅以锚点定位。在框架设计上一般将页面分为导航区、内容展现区两部分,导航与帮助内容对应性强,层级简单,能让用户在短时间内了解平台能力构成;帮助文档内容一般复杂冗长,锚点定位可以充当文章大纲,辅助用户精准定位。

图片

 

2、智能助手

通过内置的帮助和指导性说明来解答用户使用产品过程中遇到的简单、共性问题,降低人工客服响应成本。智能助手包含两部分:入口与悬浮窗口。入口一般悬浮于页面右下角,点击后触发悬浮窗口。

图片

 

市面很多助手能力较单一,仅能机械处理通用问题,无法提供多样化帮助,很容易让人觉得是个没啥用的摆设,对它慢慢失去信任。为重新唤起用户的信任,需要在设计上注入一定的生命力,让用户觉得易接受、有选择、有温度,从而真正用起来。

1)悬浮窗口能力多元化。作为承载智能助手核心能力的悬浮窗口,优化方向有以下三点:首先,智能助手与用户的交流不再局限于单纯的问答,而是根据账户属性向用户提供高频问题集合,并根据用户的回应拓展更多问题,提供多维化的帮助。这个主动性的帮助不仅让用户感受平台的温度,无形中也降低了用户的思考成本,更快的熟悉平台能力。

其次,每个问题旁边都提供“是否有用”的按钮供用户评判。此功能不仅为平台答案提供了优化空间,也强化了用户对平台建设的参与度,让助手与用户共同成长。

最后,对话窗口也可拓展辅助能力,例如常见问题、快讯、快捷入口等,为用户所想的同时也提供更便捷的站内流动通路。

图片

2)入口形象IP化、情感化。除了自身能力外,入口的设计则会提升功能的存在感,从而吸引用户的关注。首先品牌ip形象的植入会让入口更生动,在唤起用户注意的同时强化品牌印象。其次拟人化的主动问候能提升平台的亲切感,拉近与用户的距离。

图片

 

 

助力用户精准触达

新用户对平台相对陌生,恰当的引导能让他们快速关注重点。老用户对平台的定位及能力相对熟悉,目标性更强,但在应用同时也抱有更高期待。因此恰当的引导能帮助他们快速了解平台变化并精准触达。作为产品设计者,也希望对用户行为进行有意识引导,让用户能发现、探索平台新能力,或能够按照我们的希望使用产品。公告弹窗、新手引导、全局提示这三类方法可帮助用户高效获取信息并助力精准触达。

1、公告弹窗

常用于系统升级告知,以模态弹窗表达,让用户聚焦当前内容并支持跳转了解详情。公告样式根据内容细分为三类:版本更新提示、重点升级告知、常规通告,不同类型需根据信息量多寡差异化表达。设计时可辅以插图或其他视觉元素烘托氛围,并在文案上注入情绪化的表达,从而提升用户的关注度。

1)「版本更新提示」承载简单介绍内容,让用户关注且快速获取变更信息。

图片

 

 

2)「重点升级」当有若干重要功能更新或新增时,可用此形式突出重点。

图片

重点内容露出建议2-4组为佳,弹窗宽度可根据内容适配。

图片

 

 

3)「常规通告」常用于文案较多的场景。设计上需要弱化视觉氛围,突出内容本身。

图片

 

 

2、引导类

针对局部功能升级的提示说明,一般与元素绑定关系较强,可让用户直观了解关注点,提升功能触达率。虽然此类引导轻量便捷,容易帮产品提升数据指标,但要注意适度应用。根据功能重要度、操作复杂度将引导总结为分步式、气泡、闪点、操作示意4类。

 

1)「分步式引导」常用于页面多个功能升级的引导组。当页面有多个升级点,直接平铺会让页面臃肿不聚焦。为了让用户高效获取信息,建议一次仅显示一条,通过「下一步」操作,逐步唤出剩余引导。为避免步骤过多导致用户疲劳,建议最多不超过5步。

图片

 

2)「气泡式」相对轻量的引导,有足够的提示性但不影响其他功能操作。

图片

 

3)「闪点提示」微辅助型提示,常与气泡引导配合使用。在需要关注的地方闪烁,点击闪点后唤出关联气泡提示。不对用户造成视觉干扰,又能引起一定的关注。

源图像

 

4)「操作示意」当无法用图文清晰描述操作路径时,以动态形式表达。

图片

 

3、全局提示

重点信息的汇总或提示。此类提示完美融合于页面,醒目且对操作无干扰,用户可根据披露内容判断是否处理。通过警示、徽标的应用向用户传达信息的变化并提供快速触达的能力,无形中提升用户响应效率。

1)「警示」不同颜色的提示条。常作为前置提示存在于页面或模块顶部,为用户顺利操作提供指引性帮助。既不打断用户当前操作,又足够明显,一般需手动关闭或事件结束后自行消失。不同颜色属性不同:一般蓝色代表消息通知、绿色代表成功、橙色代表警示、红色代表错误或异常等情况。另外,也可作为反馈应用在一些需要明确指示的操作后场景,此处暂不展开讨论。

图片

 

2)「徽标」形态各异的小红点。常出现在图标、按钮右上角的红色圆点、数字或文字,简单且醒目。表示内容更新或有待处理的信息,此类提示符合用户心智,无需教育就能向用户精准传达提示意图。

图片

使用时注意无数字与有数字的应用场景。有数字的徽标给用户带来的心理压力会更大,也会更吸引用户注意力,同时需注意数字长度控制。

 

操作中:具体的提示,助力高效填单

存在于操作的具体任务中,通过提示、推荐、预置信息等方式降低用户的认知及操作成本,提升填单效率。

 

 

提示说明

1、文案提示  

平铺在元素附近,对重点或复杂功能提供直观描述或建议。带有引导性的文案处理,会促进用户优化填写方案,输入更合适的内容。应用类型有三:重点提示、辅助说明、占位提示。重点提示与辅助说明使用户无需猜测;占位提示可使用户能够快速明确输入规则。因表达侧重不同,表单设计时三者搭配效果更佳。

图片

 

2、工具提示

此类信息作为文本解释层级较低,无需直接展示。通过悬浮或点击元素触发对应说明,以气泡形式出现。触发式的展现既能避免非必要信息堆叠导致的页面臃肿,又能保证需要的时候有迹可循。

图片

 

 

智能化

当一个系统背后的产品设计者考虑足够全面,能够预判用户的预期,那么它就能主动的给用户提供建议和帮助,甚至帮助用户自动执行一些任务,最大化减轻用户的决策压力。但值得注意的是,“智能化”需要一定的产品能力及丰富的数据作为支撑,设计时需结合实际情况应用。

1、信息预置

系统根据账户属性自动为用户预置内容。如下左图可见,仅需要填写一条内容,其他对用户利益无损的内容可通过预置选项来提升填单效率。

图片

 

2、智能推荐

此类设计的前提是平台有足够的数据积累,通过大数据或业务特色为备选内容打标签建标识。常用的设计方法有两种-为用户提供可视化标签,助力用户快速决策;交互手段简化,由多信息录入变为直接选择,强化推荐内容展示性,从而降低操作中的思考和录入成本。

场景一:「帮助决策」

表单中有大量需要用户录入的字段,在无任何参考的情况下用户用于决策的时间及输入内容的合规性无疑对填单效率造成一定影响。下图可见推荐标签能帮用户提供方向及边界,辅助用户决策,降低思考成本。

图片

 

场景二:「提升填单效率」

以单元创建为例,传统路径如下:新建>填写表单>保存>再次新建>再次填写表单…以此往复。用户每建立一个单元均需要把同类型的内容填写一遍,耗时费力。而智能推荐将常规表单输入变为模版选择,仅需2步就可完成多个内容创建:输入关键词>选择模版。选择和浏览的成本远远低于数据的频繁输入,模版设计则通过简洁的样式及内容层次化的展现提升信息获取效率。通过路径及交互方式的转变,上线后数据反馈操作效率大幅提升。

图片

 

3、预览能力

当操作过程较为复杂或结果难以预测时,可视化的预览可及时展现结果样式,方便用户实时调整,提升操作安全感。

图片

 

操作后:及时有效的反馈

及时响应操作成果,将功能的运行情况、数据的对错反馈给用户,及时有效的帮助修复输入中的问题。常见的反馈有以下四类:toast、表单错误校验、模态弹窗、独占式页面,每种样式因干预强度不同而适用不同的场景。

图片

 

1、Toast:一般3s左右消失,因体积小、展示位置靠上、自动消失等特点时常被用户忽视。常用于操作结果、系统性等等无明确后续指引的反馈,例如“提交成功”、“操作失败”、“服务器无反应”。

图片

 

2、错误校验:当表单出现输入错误时,按照就近原则在错误附近为用户展示明确的提示性消息,纠正和引导用户的输入内容。

图片

 

3、弹窗提示:提示性和阻断性都很强,能够让用户聚焦信息本身。通常提示内容可为用户提供指向性引导,需要强关注。

图片

 

4、独占式反馈:提交后页面切变为独立展示的页面级状态反馈。比弹窗的阻断性更强,信息获取更沉浸。在设计时建议搭配状态插图强化氛围,并提供操作按钮为用户提供通路。

图片

 

 

章尾总结

帮助体系的出发点就是在尽量降低人为干预的基础上,减少用户在不同使用阶段中的刻意思考与寻找,从而提升操作的顺畅性及用户的认可度。综上就是在不同操作阶段可用到的设计方法,尽管有些手段并不起眼,但也正是这些点滴的聚集和系统的应用为用户带来无声的帮助,让B端产品使用体验变得高效且富有温度。

 

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

作者:商业用户体验部

转载请注明:学UI网》B端帮助体系二三事

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

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

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

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

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


聊一聊所谓的B端C化

seo达人

写在前面

最近很流行一个词——B端C化,解释出来就是可以用C端的模式和思维来对B端产品进行设计,讨论者大致分为两种观点:

1.C端产品市场已经趋于饱和,可拓展空间剩余不多了,B端产品市场还是一片蓝海,于是产生了一些C端设计师转型去做B端了,将一些C端的模式和思维带到了B端设计中,导致越来越多的B端逐渐C化;

2.B端产品市场互相竞争,为了在同市场中打出差异化,于是一些B端市场开始招揽C端设计师培养转型,并且尝试融入C端产品的模式和思维在同市场内竞争,是产品设计的“内卷化”现象,导致市面上的C化的B端产品越来越多;

但上述无论哪一种观点,都在阐述一种现象或者趋势:不管是交互还是视觉还是UI,目前部分C端设计师正在往B端设计师转型。这个现象的发生对整个设计行业来说无异于新增了很多新亮点——市场上越来越多的B端交互、数据可视化视觉等需求,进而导致对市场培训行业开始产生B端培训的诉求,同时也破空而出了很多优秀的B端设计师。那么B端C化到底是什么,和传统B端C端有什么区别,有这方面想法诉求的同学怎么去实现转型?

由于我本人之前是做C端UI设计师,到后来转型成为B端交互设计师,而接触的业务恰好涉及B端和C端的联动以及多角色之间的协作,所以这篇文章借助结合我个人的经验和看法,谈一谈自己对B端C化的理解

 

B端C端的区别

在谈B端C化之前,需要先了解B端和C端的区别是什么。B端C端的区别网上有很多文章和概述了,大致归纳下来主要以四个维度去区分:受众主体、上线周期、业务类型和产品侧重点这四个维度,其余的维度也会有区分,但是影响较小,主要还是围绕以上四个维度进行B端和C端区分

 

受众主体

受众主体也就是相对应产品的用户群体。C端的受众主体是大众用户,特征为多样化,用户与用户之间跨度也大,但是场景和路径较为单一的,比如C端产品就以年龄层、城市、性别等来划分用户,每个阶段的用户都有不同的诉求、认知和习惯等等;在做任何决策方面都属于偏感性(Heart)的个人决策(Personal);用户稳定性则比较差,要是对产品不满意,可以立马换另一款产品,转换门槛低,有多个竞争对手产品可供选择;

而B端产品的受众主体则是为组织群体,特征为多场景和多维度,用户群体较为清晰明确,可以按照岗位、角色、权限等划分用户群,但是之间的关系更加复杂,比如设计一个银行内部管理系统,用户群就很明确清晰——银行各级职员角色,根据职级关系设计不同的功能以及权限;在做任何决策方面都属于偏理性(Head)的团队性决策(Team);用户稳定性较强,要是对产品不满意,也只能被迫适应和忍受,转换成本较高,几乎没有其他产品可供选择

 

上线周期

上线周期就是指产品从需求阶段到设计阶段。到开发阶段直至最后产品上线所需要的周期。C端产品上线周期模式有个很明确的特点:快速迭代、敏捷,很多C端产品功能更新迭代的速度很快,上线周期非常短,往往半个月甚至一周就完成开发上线,加上用户群的多样性和跨度大,所以在上线的时候往往会需要AB实验去验证方案可行性;

B端产品上线周期则是和C端一个对立面——长,少则双月/季度多则半年/一年等,因为B端产品流程上都属于重型流程,角色之间关系复杂,交互系统较为繁琐,需求的改动和迭代并没有那么频繁,也不需要像C端产品那样快速上线抢占市场,所以B端上线周期会很慢,也导致在工作强度上相比C端较为轻松一些,但是缺点就是结果没有C端来的那么快和明显

 

业务类型

C端产品的核心竞争力就是产品本身,关键总结就是让用户爽就完事了,所以C端产品的需求类型往往围绕用户群的痛点产生;因为C端用户跨度大,不同的用户群体有不同的痛点,所以导致C端的需求类型不是很明确清晰,需要不断从用户身上去探索挖掘需求,在不断的试错中逐渐得出正确的结论;

B端产品的核心竞争力除了产品本身,还依赖复杂的关系、渠道、技术和资源,你的关系够硬、渠道够广、技术够领先、资源够丰富,哪怕你的产品很一般,一样能领先其他同行业的竞争对手,关键总结下来就是让用户赢就够了;B端产品的需求类型虽然也是围绕着用户群的痛点产生,但需求的目标是更加明确清晰的,加上需求变更的频率、范围往往都有契约/合同所约束,所以相较于C端产品来说,B端产品是需求更加明确且容易达成目标

 

产品侧重点

产品侧重点无异于区分C端和B端最明显的门槛了,C端产品的侧重点主要在于体验,而B端产品的侧重点主要在于效益

前面提到过C端产品核心让用户爽就完事了,加上基于用户更换产品的成本很低:你这款产品我用不爽就换掉了,所以C端产品的侧重点永远以用户体验为主,前面说的需求业务类型也几乎是围绕用户体验产生的;大家对比市场上同类型的C端产品,界面、交互、功能都不会差很多,是因为经过长时间的更新迭代,已经沉淀下来目前最好的用户体验类型了,随着产品量级越大,改变用户体验类型就越谨慎;C端产品就是为了寻找并解决用户痛点、痒点和爽点,加上品牌性、用户隐私等因素考量,产品侧重点聚焦于用户体验

B端产品侧重点则是围绕效益了,因为作为一个团队使用的产品,不管是从易用性、功能性还是安全性,为这个团队解决问题为首要基础,那么使用者的体验、产品的美观度等等相较于优先级就没有那么高了,所以导致了有一段时间大家对B端的理解依旧是老旧、丑、难用的认知上;B端产品就是为了使用产品的团队解决效率、成本、营收的问题,加上产品的稳定性、安全性等因素的考量,产品侧重点自然更聚焦在效益上

什么是B端C化

前面了解了B端和C端产品的区别,接下来聊一聊什么是B端C化;简单来说从字面意思理解就是B端的设计层面逐渐靠近C端,网上也有很多B端可视化、趋势潮流的设计和文章,但是B端C化不仅仅是从视觉设计上的改良,下面我逐渐从大到小聊一下我对B端C化的理解

 

功能架构

在做过很多B端产品之后发现,往往很多产品经理是对整个产品架构、功能形态一切都清晰地了如指掌,但是有时候在搭建产品架构的时候,功能形态单一粗糙,步骤复杂且笨拙;站在业务产品的视角来看,架构逻辑上都是没有问题的,但是站在用户视角来看,整体框架是混乱破碎的,步骤繁琐且复杂,导致用户对产品的认知变差,但是又不得不去用这个产品,只能被迫去学习使用

比如一个产品案例,就是一个产品的底层逻辑是前端输入素材id,后端返还一个素材后就可以使用了,站在产品业务视角来看,这样设计没有什么问题,符合产品的底层逻辑;但是站在用户视角就特别难受了,用户想用一个素材,还要去寻找id然后输入搜索,像C端那样全部铺出来给用户选不好嘛?

 

行为习惯

行为习惯自然是指用户群在该行业下的行为习惯,电商行业、社交行业等等不同行业的习惯、专业术语等都不相同,这个在C端产品中都很能得到体验,比如电商行业的大红大紫,社交行业的左右滑动等等,这类有着很明显的行业属性和大众认知,一样是B端设计中应该注意的点

最经典的案例就是红色绿色的定义区分,在数据产品认知中,绿色代表数据涨了,红色代表数据跌了,比如GMV数据,DAU数据等,红色为重点关注的数据;而在金融行业中,基金股票红色代表涨了,绿色则代表跌了,所以设计的原则一定得是基于不同行业的用户行为习惯

 

信息层级

B端产品的信息量一般是很庞大的,尤其是数据、表单、审批等B端产品,涉及到不同角色不同权限的开放等,所以用户能否能一眼看清关键信息,能否帮助用户快速达成目标,是交互层面针对信息层级的设计处理一个重要的环节

之前很常见B端产品中信息处理的方法就是堆积处理,直接将信息、数据等平铺展示,比如很久之前的某牛商家端后台等老旧系统;现在很多新的B端产品都是以模块化处理方法将信息层级区分,使得模块之间间隔更明显,信息处理的效率更高,宛若C端中的卡片式设计

 

设计语言

设计语言自然是B端设计中标题、字号、颜色等规范标准,早些年把B端产品组件化后且开源的自然是阿里老大哥了,当时最早的AntDesign、以及后来的ElementDesign组件库,到现在都被很多中小企业甚至大厂某些产品一直使用中,但随着B端产品的普及和发展,越来越多的企业开始将自己产品沉淀出完善成套的设计语言,并搭建出自己的组件库投入使用了

 

用户体验

如何去衡量用户体验是否是好的,最客观来讲当然是通过数据去衡量,而数据往往在C端产品中很常见,不管是体验数据还是表现数据,都是C端产品中最为关注的;然而在B端产品中,更多收集的一般都是业务表现数据,几乎没有衡量用户使用平台的相关数据,大多衡量体验的方法都是依靠问卷反馈的形式;但在B端C化的过程中,用户体验的数据也逐渐被加入到B端产品当中来,成为体验标准的考核之一:比如某个任务完成的时长,报错出现的频次、某某工具的使用率等

 

视觉设计

最后就是B端C化表现层的设计,包括目前主流的设计趋势如大数据可视化、3D建模、材质质感、Dark模式等都逐渐融入到B端产品中,使得B端产品不再追求简单的“功能优先”和“能用就行”,而是像C端那样追求更美观的视觉,更极致的体验

 

为什么要B端C化

总结下来“B端C化”就是B端产品无论是从功能架构还是视觉体验,越来越趋于人性考虑设计,越来越关注使用者的感受和反馈,因为说白了不管B端产品代替成本高不高,用户是一群专业人士还是普通职员,使用者归根到底还是“人”在使用产品,那么必然会带来体验相关的问题;所以B端C化会逐渐形成一种趋势,在企业平台资源支持的情况下,会将B端产品的功能放大,追赶市场竞争,逐利行业内卷,在体验和视觉感官上也会更加的人性化,结果自然是产品设计者们更加的卷了(手动狗头)

 

总结

无论是现在的B端C化还是将来其他多元的设计趋势,随着市场的竞争和行业内卷,已经反推着设计师们不单单局限于照顾自己的“三分田地”了,无论是之前视觉设计师开始学习3D建模,还是UI设计师尝试接触代码设计,设计师最大的品质就是应该紧跟时代的趋势变化,及时调整补充自己的能力,提升自我的竞争力,才是在当今环境下立足的根本

 

原文地址:站酷

作者:雨灰

转载请注明:学UI网》聊一聊所谓的B端C化

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

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

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

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

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


交互设计师该如何提升“软实力”?

seo达人

我将交互设计师应该具备的能力总体上划分为“硬实力和软实力”两个大方向:

硬实力是指专业能力,包括交互设计能力、对所负责的业务线与对应产品的理解程度、对产品面向的用户群体与用户使用场景的了解程度、对设计规范与组件的熟练应用、数据分析能力、对设计工具的熟练使用、以及具备一定的视觉审美。

软实力是指通用能力和个人影响力,通用能力主要包括“沟通与表达能力、推动与执行能力、项目管理能力、复盘总结能力”;个人影响力主要包括“分享、指导、创新能力”。

本文将结合我的工作经验,以及不同公司招聘要求中都有的共性点,向大家介绍如何在日常工作中培养和提升自己的软实力。

下图是我简要绘制的“交互设计师能力框架图”:关于硬实力这部分内容,在我之前的文章中已经梳理过一些,感兴趣的可以回头翻看。

 

一、通用能力

1. 沟通与表达

首先你需要分析自己的性格特点,一般外向的人擅长沟通,即便不是外向型,也最好不要是内向不爱说话。只有你发自内心的愿意主动与他人沟通,别人才能感受到你的亲和力

其次不管与怎样性格的人沟通,把握的第一个原则是“就事论事”:没必要为了事情大声争论,甚至上升为人身攻击,我们沟通的初心是为了解决问题,应该尽可能的“求同存异”。

你需要做的是想办法解决影响事情顺利发展的各种障碍,过程中遇到的非主观因素记录下来便于后续总结。

表达是指将思维所得的成果用语言等方式反映出来的一种行为,是向他人正确传达自己的想法。

比如与同事沟通表达自己的观点、公开演讲、获奖感受等,表达的定义里包含一个关键词“思维所得”:这意味着你需要在平时就有一定的思考沉淀,不然你无法做到“准确且清晰”的传递自己的观点

需要把握的第二个原则是“不卑不亢”:既然是一个Team,团队最终目标是一致的,只不过不同成员的岗位角色不同,分工内容不同,没有谁一定要给谁妥协,或者谁一定要强硬到底。按照已经发生的客观事实有理有据的陈述自己的观点即可。

最后需要把握的第三个原则是“换位思考”:用户体验设计领域的设计师经常提到一个词“同理心”。我们需要站在用户角度审视自己设计的产品,我们需要站在不同岗位角色角度理解他人的难处…无论对内还是对外沟通与表达,能做到换位思考的人,必然考虑问题更加周全、更加有深度。

 

2. 推动与执行

执行力是指完成任务目标的操作能力,评判执行力强弱的标准是效率与效果。执行其实是践行的过程,践行的过程中效率可能没那么高、最终的效果可能也没有多满意,但无论如何,做这件事都为你积累了宝贵的“践行经验”,举重若轻的背后一定经历过多次失败与不堪。

执行力是每一位员工都必须具备的基础能力,而推动力则是针对中高阶水平设计师提出的更高要求。

“从单纯的执行任务”升级为“从头到尾推动事情落地”,这是职场打怪升级的必经之路!推动力不再是单一的能力要求,而是“多项能力”的综合体现,推动落地的过程中涉及到沟通表达、组织协调、向上管理、项目管理等能力。

 

3. 项目管理

往小了说是对自己承接任务的管控,范围相对小,包括项目前期涉及到的“与上游业务同事和产品经理梳理需求、提出合理建议、预估排期”;项目推进过程中涉及到的“准时交付产出、问题沟通与解决、风险点预估与分析、及时向上汇报进展、设计验收”;项目后期涉及到的“上线验收、遗留问题记录与跟进”。

以上提到的是设计师在设计层面应该做好的事情。再往大了说,你可能会作为一个分支项目的牵头人,你要管控的不单是项目在设计阶段的开展,还会更多涉及到与上游业务方、产品经理;与下游开发同事、测试同事;与外部合作方的协作等。

随着项目复杂度提升,对负责人项目管理能力要求会越高,因为会涉及到方方面面,可能包括业务对接洽谈、细节协商达成一致、进度把控等。

作为交互设计师,有机会深入参与到项目推进的全流程中,这既是对你专业能力的深化,也进一步加强了你对所负责业务线的理解程度。

如果你遇到这样的机会,请珍惜把握,尤其是首次承担类似职责。谁都是从0到1、从无经验到身经百战走过来的,不要有过多的担心害怕,撸起袖子加油干!当你经历过再回首时,你会感谢当初自己的勇敢与自信。

 

4. 复盘总结

近期面试一些交互设计师,聊到关于项目需求的复盘时,有的应聘者在公司现有机制下没有机会接触到需求上线后的数据表现或者用户反馈;有的应聘者总结分析的不够深入或者视野局限于设计层面的改进。

我之前也在小的创业公司工作过,以上类似现象在许多公司还是比较普遍的。我的看法是:围绕个人能力发展思考并决策。

  • 如果你所在的公司没有建立复盘机制,你也很少能接触到相关数据,一方面你可以尝试着利用上面说的推动能力,试着推动建立这个机制,至少可以先从你所在的小部门开始试行;另一方面如果你是在类似国有企业,反馈信息涉及到保密,这是客观因素与你的努力无关,这时候需要认真考虑换工作的事情了。
  • 另外一种情况是有机会获取相关反馈信息,但有时候承接的业务需求不间断,再加上许多公司的复盘机制算是锦上添花,不是非做不可的,所以针对设计师个人而言,做好这件事更多依靠的是“自驱力”。

复盘总结不单针对工作项目,另外重要的方面是自我反思。从过往的工作经验中思考做的好的地方,不好有待提升的地方,需要补齐的短板是什么,职业生涯下一阶段的规划是什么… 我认为尤其对于交互设计师而言,阶段性的反思总结,有助于更好的认清自己能力优势与劣势,有助于逐步搭建上面提到的自己的能力框架。

 

 

二、个人影响力

1. 分享

分享其实就是将某方面复盘总结的结果拿出来与他人沟通交流,分享形式和分享内容围绕分享目的可以灵活调整。比如我之前的文章《如何做好一场部门内部分享?》中提到过关于分享形式与内容的创新,感兴趣的可以翻看。

当初之所以要做出这个改变,是因为我们认为原有的单个人框定大概分享内容范围进行分享的方式,不能很好的帮助分享人和被分享人提升能力,同时分享内容容易脱离现有业务。当然不同公司分享目的考虑的侧重点不同,所以算是因公司而异吧。

对个人而言,如果你平时针对项目、设计专业、工作流程、存在的问题等有过一定程度的思考,你会积累一些沉淀,无论是优秀的值得借鉴的内容、还是失败的值得引以为戒的内容,都可以与同事或者专业领域的朋友交流讨论。反过来在这个过程中,又会激发你更多的想法,拓展你的眼界与思维。

 

2. 指导

团队内有工作经验或者熟悉工作流程的中高阶设计师,针对初入职场的新人或者刚来公司还处于适应部门环境的有工作经验的职场老人,进行专业层面和工作流程的指导。

许多公司比较注重公司文化对新人的输出,但针对日常工作的指导带教却没有十分明确的规定。

辅导的效果很大程度上取决于指导人,如果某天你有机会带教新人,不要轻视这项工作,首先在心态上能够做到上面提到的换位思考,你自己也是从新人一路走过来的,能够切身感受到新人的诉求。

其次也是对你责任心的侧面考察,在职场有一句话我认为是适用的:你能承担多大的责任,就值得拥有多大的回报。

 

3. 创新力

提到创新许多人觉得有些虚无缥缈,因为现实情况是处理不完的待解决问题,哪还有时间和精力做创新,就算提了创新的点也很难有资源支持。很久一段时间我也是这么想的,后来看到两个观点使我茅塞顿开:

  • 创新不是颠覆,也不一定是惊天动地的大动作,更多的可能是微创新,一个有可行性有突破性的想法。
  • 如果你对所做的事情保持有好奇心或者热情,千万不要被日常的工作消磨掉。好奇心是创新的源动力。

生活中太多的人会告诉你,只能顾好眼前的苟且,没有精力和金钱畅想诗与远方,如果你也这么想并且这么去做,你只会被大众牵着鼻子走。更为可怕的是,慢慢的你丢掉的是那些原本可以让你更为成功的优势点。

 

 

三、总结

以上是我提炼出的我认为一名优秀的交互设计师应该具备的“软实力”, 这部分能力应该是成为高阶设计师的衡量标准之一。无论是职场新人还是老鸟,重视和持续打磨自身的通用能力与个人影响力,才能不断提升自己的不可替代性。

 

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

作者:Viksea

 转载请注明:学UI网》交互设计师该如何提升“软实力”?

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

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

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

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

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



日历

链接

个人资料

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

存档