首页

设计的两面性:理性决策与感性表达

杰睿

引言
设计应该是感性的还是理性的?设计是感性重要还是理性重要?此类问题一经出现便会引起争议无数,每个人对此都有自己的见解与理由,还有些人主张“理性与感性需要平衡”“既要理性也要感性”,此类观点看似正确,却缺乏任何实质性的指导价值。
实际上,很多人都没注意到问题本身存在的多义性。究竟什么是“设计”?有些人认为是设计决策的过程,而有的人则认为是最终产出的设计作品。大多时候,理性和感性两种观点看似针锋相对,实际上是站在设计的不同层面进行讨论。
设计的两面性:理性决策与感性表达
 
 
 
01|设计决策
从设计决策的角度来看,感性设计指的是设计师在设计过程中主要依靠个人情绪或情感进行创作。许多人误认为,只要在设计时能与用户产生共情,理解其情绪波动,并将这些喜怒哀乐、喜好厌恶融入设计作品,就算是感性设计了。然而,共情并不等同于感性。共情是一种能力,理解他人处境与情感,并善于换位思考。而感性则是自己对外界事物产生的直接感受和情绪反应,强调的是个人视角。
在艺术领域,感性占据主导地位,但设计并非艺术。设计的主要目标是解决问题和满足特定需求,而艺术更多地关注自我表达和情绪传递。设计始终受到客户需求、商业目标、市场趋势和技术可行性等一系列的限制与约束。由于这些条件的存在,直觉与天赋这些感性力量只能得到极其有限的发挥。这也是设计与艺术的显著区别。
设计的两面性:理性决策与感性表达
 
 
站在感性“对立面”的理性,将设计视为一项工程或科学,力求流程化和系统化,讲究方法论,注重各方面的调研,一切动作因问题存在而起,以问题解决而终
。甚至在实际场景中持续观察作品表现,以期得出可复用的设计模型或定律,为后人更加高效地解决类似问题提供帮助。
所以,从解决问题的本质属性出发,理性应该才是设计的底色。数据驱动、方法论支撑、可用性测试、竞品分析、用户研究等都属于理性思维的具象化体现。
由于大部分设计师的出身多以艺术打底,所以一旦设计与艺术的界限在心中变得模糊,会习惯性地
将产品看作自己的"作品",而非用户的"解决方案"
。如此一来,当面对来自各个方向的边界与不确定性,本能的反应就不是思考了,而是抵触,尤其是“完美”的方案已在脑中形成,如果突如其来的新要求打乱了这一切,哪怕假以用户之名也要选择怼回去,并不断美化、合理化自己的设计理念。对设计师来说,这是一种自私、不负责任和缺乏职业素养的表现。
设计的两面性:理性决策与感性表达
 
 
接下来,想象一下你的手中有一把枪,准备射击某个目标。你的第一个动作是什么?大概率是瞄准。因为大家都知道,射击前通过瞄准镜或者准星,先对目标位置进行瞄准校正,射击时才能提高命中率,这也正是理性对于设计的重要性所在。
理性在设计中的作用类似于瞄准动作,它帮助我们在设计过程中做出科学的决策,确保设计方案的准确性和可执行性。未经理性思考的设计,就像是不瞄准就立即开枪,其结果往往难以预测。当然也可能会击中目标,这基本上取决于两个因素:
  1.  
    目标远近:
    近处的目标,即使不瞄准,也很容易击中;但对于远处的目标,命中率则必然大幅下降。我们可以把目标远近理解为设计需求的难易程度,对于简单需求,不用过多的理性分析,直接设计也能完成任务,但面对复杂的设计项目,如果不进行充分的理性分析上手就画,大概率就要偏离产品目标了。
  2.  
    个人经验:
    经过反复练习,可以练就不瞄准也能远射的本领,随着经验积累还能不断提升距离值;在经验不足的情况下,还不瞄准,就只能选择一些近距离的射击目标了。设计也是这样,对于某类产品的设计经验较多,不用太多理性的分析决策,也能达成设计目标;缺乏经验时,还凭借直觉草率地进行设计,再简单的项目也可能会搞砸。
设计的两面性:理性决策与感性表达
 
 
所以,没有理性支撑而完全依赖直觉经验的设计,一个致命性的问题就是
不稳定
!日常工作中,设计师的有效输出和稳定输出至关重要。
 
02|设计表达
假设经过瞄准后的射击都能顺利击中目标,那么接下来要关注的是什么呢?子弹的冲击力和杀伤力!这里的子弹就是我们最终输出的设计作品。在这一环节,理性设计指的是方案完全围绕产品功能来呈现,追求效率与极简认知,较少运用装饰性设计元素,即使使用,也大多兼具辅助内容理解的功能性目的。
而感性设计,我并不太愿意使用“感性”这一措辞,正如在上一段中的定义,感性强调的是个人出发的情绪表达。其实,“情感化设计”才更负荷大家口中常说的“感性设计”所想表达的含义,相比“理性”的设计作品,情感化设计更具有“一击必杀”的效果。
在满足基础功能需求的基础之上,通过色彩、排版、图像、动画等元素给予用户充分的情感体验,也可以利用叙事、对话、情景、微交互等策略引发共鸣。丰富多样的情感化设计策略,让用户与产品之间更容易建立情感连接。
设计的两面性:理性决策与感性表达
 
 
在设计决策的阶段,理性确保了我们更高的命中概率,而情感的注入让我们的设计表达具有深入人心的穿透力和影响力。典型设计案例如Apple、Tesla等产品设计无一不是理性决策和感性表达的充分结合。因此,回到开篇提出的问题,设计应该是感性的还是理性的?我的回答是:
作为设计师,要
坚持理性的设计决策
,同时
追求感性的设计表达
设计的两面性:理性决策与感性表达
 
 
 
03|两者关系
很多人认为,不同的设计领域对理性和感性的要求有所不同,在B端产品中,理性占据主导地位,而C端产品更强调感性。从设计最终所呈现的效果来看,这种观点在一定程度上是合理的。B端产品多用于生产场景,追求的是可用性,是克制和效率;C端产品面向普通大众的各种生活场景,因此关注体验的愉悦感受。两者往往在风格调性上差异化很大。
但是,对于设计决策来说,无论C端、B端还是G端,都属于设计项目,都要进行理性的需求分析和策略制定,即使某些产品类型最终选择了偏感性的或情感化的表达手法,也是
基于理性决策后的一种选择
,是实现目标的一种手段。
所以我想说的是,理性和感性两者既不是对立关系,也不是并列关系,而是先后关系或嵌套关系:
理性是设计的基础和第一步,感性则是在理性之上的选择和展开
 
最后的话
作为设计师,对于设计中的理性与感性之问,不应停留在非此即彼或既要也要的简单认知里,任何深入的思考都是有意义的。在这个存在分歧的问题上,希望我的观点可以为你提供一点点启发,也希望各位设计师既能够通过理性的分析制定出有效的设计策略,又能够通过感性的表达手法创造出动人的设计作品,不断提升自身的设计价值,与产品实现共赢


作者:设计来电
链接:https://www.zcool.com.cn/article/ZMTYyNjY2MA==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

动效让这些设计更惊艳

杰睿

微动效在产品设计中的运用已经非常普及了,无论是在图标还是界面场景中,都运用得很普遍。通过动效的辅助不仅可以提升设计情感化,也能解决更为复杂的交互场景,让设计更惊艳。
 
最近在体验一些产品的过程中,黑马哥也发现了几个借助动效表达的设计方案,效果十分的惊艳,分享出来和大家一起学习一下。
动效让这些设计更惊艳
 
 
 
 
目录
一、3D 动效呈现会员等级
二、情感化 IP 提升搜索关注度
三、结合场景的情感化动效
四、3D 空间感的 Banner 设计
五、通过动效引导用户操作
六、微动效引导 VIP 续费
七、动态还原实时天气
八、动态 IP 引导按钮设计
九、微动效赋予品牌活力
 
 
 
一、3D 动效呈现会员等级
会员中心通常会通过 3D 图标来助力会员等级设计,除了静态的表达也会通过动效和新颖的交互形式呈现,以此提高会员中心的视觉表现力。
 
最近在体验腾讯视频 APP 时,会员专区在表现用户会员等级的设计中,没有使用传统的徽章形式,而是以 3D 数字结合动效的形式表达。3D 动效的设计使得会员等级区别于常规形式,更有吸引力。 
动效让这些设计更惊艳
 
 
 
 
二、情感化 IP 提升搜索关注度
IP 形象是成就品牌的关键因素之一,被广泛运用到产品感官体验的设计中,带来的情感化共勉也是显而易见的。
 
在使用悟空浏览器 APP 时,启动产品进入首页后搜索框上方出现悟空的 IP 形象,悟空呈现出左右环顾、上下打量,最后看向搜索框的系列动作等表现。不仅提高了搜索功能的关注度,也使得产品设计更具情感化。
动效让这些设计更惊艳
 
 
 
 
三、结合场景的情感化动效
根据不同的业务场景进行设计表达,可以更好的服务目标用户,而情感化的设计提升,可以拉近产品与用户之间的亲和力。
 
为了降低用户等餐过程中出现的负面情绪,饿了么 APP 下单之后在详情页中根据点餐的不同设计了情感化的动效表达。无论是快餐还是冷饮等,都针对性地设计了微动效的元素,以此来表现当前状态。
动效让这些设计更惊艳
 
 
动效让这些设计更惊艳
 
 
 
 
四、3D 空间感的 Banner 设计
通过突出设计、交互、布局结构等的创意性,可以使得 Banner 具备更强的差异化,以此来突出 Banner 的存在感。
 
腾讯视频 APP 首页的 Banner 布局也会经常呈现出一些很有创意的方案,比如之前体验到一个结合 3D 空间感营造的设计案例,就非常有吸引力。通过动态过度到立体空间,再恢复到默认形式,这个动态的过程演变就能让用户过目不忘。
动效让这些设计更惊艳
 
 
 
 
五、通过动效引导用户操作
针对一些使用频次不高或者过于隐藏的功能,为了提高用户的操作概率,会通过一些特殊的设计表达来提升用户的关注度,引导用户进行相关操作。
 
比如麦当劳 APP 首页中,为了吸引用户下拉进入二层楼,通过动效的形式设计了一个摇摆的铃铛,以此来吸引用户的注意力。用户看到像是随风飘动的铃铛,就会忍不住去拉动,这就达到了引导用户操作的目的,提高了二层楼内容的曝光度。
动效让这些设计更惊艳
 
 
 
 
六、微动效引导 VIP 续费
针对一些无法通过占比面积进行突出的元素,运用微动效的形式设计是常见的设计手法。
 
网易云音乐 APP “我的”板块中,为了突出 VIP 续费按钮,黑胶唱片以动效的形式在按钮中来回滚动,以此强化续费按钮的关注度。
动效让这些设计更惊艳
 
 
 
 
七、动态还原实时天气
天气类产品从简单的静态预告升级为动态实时还原,可以让用户更加直观的判断天气变化,也能提高界面设计的感官体验。
 
比如 iPhone 自带的天气 APP,以动态还原实时天气作为界面背景,不仅便于用户识别天气,也使得产品设计更具情感化体验。
动效让这些设计更惊艳
 
 
 
 
八、动态 IP 引导按钮设计
按钮设计样式可以发挥的空间很大,除了在造型、配色、空间感等方面突出设计以外,也能通过按钮微动效或者动态引导等形式强化。
 
比如智行火车票 APP “抢票”板块中,为了突出“添加抢票”按钮的存在感,以动效 IP 引导进行设计。不仅使得按钮更突出,设计感也显得俏皮可爱,凸显亲和力。
动效让这些设计更惊艳
 
 
 
 
九、微动效赋予品牌活力
立足于品牌做设计是突出产品差异化的关键,这也是产品设计未来的演变趋势之一,如何提高品牌的曝光度和记忆度,成为设计师不断探索的方向。
 
最近在使用夸克 APP 时,微动效赋予品牌 LOGO 的活力感让人印象深刻。在众多特殊节庆等时间段,夸克也会以动效的形式赋予品牌更多变化,不仅使得产品更具年轻化属性,也能更好的传递品牌基因。
动效让这些设计更惊艳
 
 
动效让这些设计更惊艳
 
 
 
 
小结
动效使得产品具备更多的变化,也能辅助解决更多复杂功能的交互场景,探索动效的场景运用可以提升设计灵感,希望本期的分享可以带给大家更多设计灵感。本文描述属于个人体验总结,不足之处我们努力改进。
 
本文由 @黑马青年 原创发布。未经许可,禁止转载。


作者:黑马青年
链接:https://www.zcool.com.cn/article/ZMTYzOTIyOA==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
 

7大色彩技巧让你界面更吸睛

杰睿

色彩在我们日常设计中起着定生死的作用,它是设计的灵魂,舒适的色彩搭配可以让设计师一遍定稿,感觉在自己的设计生涯中,大部分都是在与色彩的博弈中度过的,虽然客户可能不懂色彩原理,可是客户天生都是色彩的感受家,什么样的色彩搭配美,通常他们瞄一眼就会有定论,不用你去辩解太多,不好的搭配,纵使有千万种理由,也说服不了客户,所以好好研究色彩以及每一种色彩传递的情感对我们做好设计至关重要。
 
7大色彩技巧让你界面更吸睛
 
 
 
目录
一、 色彩的定义
二、 色彩的三属性
三、 色彩的三种常见模型
四、 色彩的语意及它的应用
五、 不同场景下的色彩应用
六、 色彩在B端设计中的作用
七、 B端色彩设计使用的原则
 
7大色彩技巧让你界面更吸睛
 
 
 
 
 
一、色彩的定义?
1、物理学角度
色彩是光的属性,当光波通过物体时,物体会吸收某些波长的光,而反射或透射其他波长的光,这些被反射或透射的光波长度决定了我们看到的颜色。
 
2、心理学角度
色彩是人脑对光波长的视觉感知,不同的波长刺激视网膜上不同类型的感光细胞,进而产生不同的色彩感觉。
 
3、 艺术学角度
色彩是艺术创作的重要元素,它不仅关乎视觉感受,还与情感、文化、象征意义相关联。
 
4、 设计学角度
在设计领域,色彩是传达信息、影响情绪和创造美感的关键工具。
 
5、 计算机科学角度
在数字图像处理中,色彩通常通过颜色模型(如RGB、CMYK等)来定义,这些模型通过不同比例的原色或色料混合来表示各种颜色。
 
 
 
二、色彩的三属性
1、色相
色相是指不同颜色之间的差别,即不同颜色的表象和名称,每个颜色都有自己的专属ID,如红、橙、黄、绿、青、蓝、紫等。不同的色别都可用光谱中的波长来表示,人的眼睛可分辨出的色别有180种左右。
7大色彩技巧让你界面更吸睛
 
 
 
2、明度
明度是指色彩的明暗程度。一般在反光率相同的情况下,不同色别的明暗程度不同。如黄色光比红色光更明亮,而红色光则比青色光要明亮。
同时,同一色相在受光强弱或者物体对光的吸收、反射性能不同的情况下,会呈现不同的明暗变化和差异。
7大色彩技巧让你界面更吸睛
 
 
  
 
3、饱和度(纯度)
饱和度(纯度)是指同一色别的纯净度和鲜明度的变化。从色光的角度而言,光的波长单一程度越高,饱和度就会越高;不同色别所达到的饱和度不同,一般情况下,红色的纯度可达到最高,绿色的则相对较低;同一色相深浅不同的颜色有不同的饱和度;黑白色光的渗入会导致饱和度和明度发生变化;通常,照明光线的性质、物体表面结构对光线吸收与反射的性能等因素影响饱和度。
7大色彩技巧让你界面更吸睛
 
 
 
 
 
三、色彩的三种常见模型
1、HSB模型
HSB模型也叫HSV模型,其中H代表色相,即颜色的种类;S代表饱和度,即颜色的纯度;B(V)代表亮度,即颜色的明亮程度。
 
这种色彩模型是我日常在的设计工作中用的最多的一种色彩模型,如果在同色系中如果只想让他们有细微的变化,我通常会通过调节S和B的百分比数值来达到自己想要的目的。
7大色彩技巧让你界面更吸睛
 
 
以上就是我在设计项目中,运用该色彩模型做的一个实战,项目中用到了一个图形,需要用同色系来表达,我保持了H色值的不变,让S值和B值都发生着微妙的不同,于是就产生了四五种同色系的绿色,该色彩模型特别的好使,也鼓励大家多在实战中运用这样的色彩模型,简单实用。
 
H色相:Hue,以角度(0°-360°)表示
S饱和度:Saturation,以百分比值(0%-100%)表示
B/V 亮度:Brightness 或 Value,以百分比值(0%-100%)表示
 
 
 
 
2、RGB模型
RGB是从颜色发光的原理来设计定的,通俗点说它的颜色混合方式就好像有红、绿、蓝三盏灯,当它们的光相互叠合的时候,色彩相混,而亮度却等于三者亮度之总和,越混合亮度越高,即加法混合。
 
红、绿、蓝三个颜色通道每种色各分为256阶亮度,在0时“灯”最弱——是关掉的,而在255时“灯”最亮。当三色灰度数值相同时,产生不同灰度值的灰色调,即三色灰度都为0时,是最暗的黑色调;三色灰度都为255时,是最亮的白色调。
7大色彩技巧让你界面更吸睛
 
 
R红:Red,以数值(0-255)表示
G绿:Green,以数值(0-255)表示
B蓝:Blue,以数值(0-255)表示
7大色彩技巧让你界面更吸睛
 
 
 
 
3、CMYK模型
虽然RGB模型色彩更加的丰富,但是很多颜色不能完全打印出来,于是CMYK模型就成了打印、印刷的不二选择。C是青、M是品红、Y是黄、K是黑,通过颜料反射和吸收光线来显色。
 
记得之前自己从事平面工作的时候,就经常要用到CMYK模式,因为印出来的效果偏差是最小的,是最靠近设计效果图的。
7大色彩技巧让你界面更吸睛
 
 
通过对比,我们发现RGB色彩模型颜色显示上确实更加的绚丽丰富些,而CMYK的色彩模型颜色显示上就黯淡了不少,但是要印刷的话,就必须转化为成CMYK的色彩模式。
 
R青:Cyan,以百分比值(0%-100%)表示
M品红:Magenta,以百分比值(0%-100%)表示
Y黄:Yellow,以百分比值(0%-100%)表示
B黑:Black,以百分比值(0%-100%)表示
 
 
 
 
四、色彩的语意及应用
1、红色的语意及应用
红色代表热情、活力、强烈的情感和爱。它可以象征着激情、勇气和行动力,也常与兴奋、热烈的情绪相关。
著名的快餐品牌肯德基,在自己的网页及店铺装修中都运用了红色,因为红色是所有颜色中最容易引起人们注意的颜色,也是很容易刺激人们食欲和购买的颜色。
7大色彩技巧让你界面更吸睛
 
 
 
 
2、橙色的语意及应用
橙色传达温暖、欢快和积极向上的情感;它常与乐观、友好、创造力联系在一起,给人以活力充沛和充满希望的感觉。
百度网盘的这个登录界面就运用了橙色,给人阳光、向上、热情的感觉,通过色彩的运用一下让界面有了温度。
7大色彩技巧让你界面更吸睛
 
 
 
 
3、黄色的语意及应用
黄色象征快乐、开朗和乐观;它能带来明亮、愉悦的情绪,代表着阳光、温暖和智慧。
叫叫阅读是一款非常著名的儿童阅读软件,整个色调采用的是非常有活力的黄色,这与儿童处于好奇与活力的阶段相符合,这种高亮的黄色,饱和度和明度都非常的高,特别容易抓住儿童的目光,同时它是一种快乐的颜色,也是一种能激发孩子创造力和想象力的颜色,特别符合儿童成长的需求。
7大色彩技巧让你界面更吸睛
 
 
 
 
4、绿色的语意及应用
绿色代表平静、和谐与生机。绿色常与大自然相关,给人带来安宁、放松的感觉,也象征着成长、希望和新生。
青椒云的目标用户是吸引年轻用户和创意工作者,绿色这种富有活力和创意的颜色更容易吸引他们的关注,同时绿色也代表着健康、可持续发展的企业形象。
7大色彩技巧让你界面更吸睛
 
 
 
 
5、青色的语意及应用
青色寓意清新、宁静和沉稳,它给人一种冷静、理智的印象,同时也带有一丝清新的活力。
青色是一种带有蓝色和绿色的颜色,因此青色既有蓝色的专业感、信任感,也有绿色的生机感、希望感。
以下是日本某牙医品牌的官网首页,病人希望在这里带来健康与复苏,也希望获得专业、可靠的治疗,而青色就成了很好传递这种情感的品牌色。 
7大色彩技巧让你界面更吸睛
 
 
 
 
6、蓝色的语意及应用
蓝色代表冷静、忠诚和信任;它常与沉稳、深邃的情感相关,能带来宁静、平和的心境,也象征着智慧和理性。
123云盘使用了蓝色,蓝色符合社会的普遍审美认知,接受度比较高;其次,蓝色给人安全的感觉,也符合云盘的初衷,给用户安全的存储服务。
7大色彩技巧让你界面更吸睛
 
 
 
 
7、紫色的语意及应用
紫色象征神秘、高贵和浪漫;它常给人一种优雅、奢华的感觉,同时也带有神秘莫测的氛围,与梦幻、创造力等情感相关。
美柚的主要用户是女性,紫色在色彩心理学中常被认为具有优雅、神秘、浪漫的特质,这些特质与女性的审美和情感需求相契合,能够吸引女性的关注。
7大色彩技巧让你界面更吸睛
 
 
 
 
8、白色的语意及应用
 
白色代表着纯洁、神圣、信任、安静、朴素和雅致,是一种充满纯洁的颜色,它可以跟任何颜色和谐的共生。
以下是熊掌ID的登录界面,颜色用了大量的白与灰,简洁又不失大气,传递出了一种质朴、雅致的感觉。 
7大色彩技巧让你界面更吸睛
 
 
 
 
 
五、不同场景下的色彩应用
 
1、商场的色彩为什么总是多彩热烈的?
 
❶ 吸引顾客注意力
在众多商业场所中脱颖而出,色彩鲜艳的商场外观和内部装饰更容易在人们的视线中凸显出来,吸引过往行人的目光,激发他们的好奇心和探索欲。
 
确实多彩的颜色更加容易引起我的关注,这不看到商场的美图,都忍不住拍照留念了,成功的吸引了我的目光。
7大色彩技巧让你界面更吸睛
 
 
 
❷ 增强可见性
即使在较远的距离或在繁忙的街道上,多彩热烈的配色也能让商场更容易被发现,提高商场的知名度和曝光度。
多彩的配色,让我远远的就被商场美轮美奂的插画吸引,大大增加了商场的可见性。
7大色彩技巧让你界面更吸睛
 
 
 
营造愉悦氛围
色彩可以激发积极情绪,明亮、鲜艳的色彩往往与快乐、活力和兴奋等积极情绪相关联。当顾客进入一个色彩丰富的商场时,会感受到一种愉悦和轻松的氛围,从而更愿意在商场中停留和购物。
星沙永旺城的美陈设计很好,墙面采用极具诱惑力的颜色与美食,把小小实物十倍放大,增加了视觉看点,让人忍不住过去拍照晒一下,大大增加了愉悦性。
7大色彩技巧让你界面更吸睛
 
 
 
缓解压力
在现代生活中,人们常常面临各种压力。走进一个多彩热烈的商场,可以暂时摆脱日常的烦恼和压力,享受购物的乐趣。
特别可爱夸张的插图设计,引发了丝丝童趣和欢乐,让人短暂忘记压力,远离烦恼。
7大色彩技巧让你界面更吸睛
 
 
 
引导消费行为
商场通常会使用不同的颜色来区分不同的区域,如购物区、餐饮区、娱乐区等。这样可以帮助顾客更快速地找到自己感兴趣的区域,提高购物效率。
突出重点商品,对于一些重点推荐的商品或促销活动,商场可以使用鲜艳的色彩来突出展示,吸引顾客的注意力,引导他们进行购买。
7大色彩技巧让你界面更吸睛
 
 
 
塑造品牌形象
6.1 传达个性和风格
不同的商场可能有不同的品牌定位和目标客户群体。通过选择特定的色彩组合,商场可以传达出自己的个性和风格,吸引与之相符的顾客。
 
6.2 增强品牌记忆度
独特而鲜明的色彩搭配可以让商场在顾客的心中留下深刻的印象,提高品牌的记忆度和辨识度。
 
芙蓉区的龙湖天街主要面向中等收入新兴家庭,是一个区域型的购物中心,集购物、餐饮、休闲、娱乐等多业态于一体,为消费者提供一站式商业综合体,它在餐饮区采用了大量的吃喝玩乐的插画,来引导用户消费。
7大色彩技巧让你界面更吸睛
 
 
 
 
2、为什么蓝色在B端设计中广泛应用?
❶ 视觉特性方面
1.1 稳定性
蓝色给人一种沉稳、可靠的感觉。在B端产品中,用户往往需要处理重要的业务数据和进行复杂的操作,蓝色的稳定性可以让用户感到安心,增强对产品的信任感。
7大色彩技巧让你界面更吸睛
 
 
 
1.2 专业性
蓝色通常与科技、专业领域相关联。B端产品通常面向企业用户,需要传达出专业、高效的形象,蓝色正好符合这一需求。
 
❷ 心理影响方面
2.1 减少焦虑
相比鲜艳、刺激的颜色,蓝色较为柔和,不容易引起用户焦虑和紧张的情绪;在B端使用场景中,用户可能需要长时间使用产品,蓝色的舒缓效果有助于提高用户的使用体验。
 
2.2 提高专注度
蓝色具有一定的沉静作用,能够帮助用户集中注意力,专注于工作任务。对于B端用户来说,高效完成工作是首要目标,蓝色的这一特性有助于提高工作效率。
 
B端产品在心理上追求的是类似如下图的这种宁静式的体验,跟教育有着异曲同工之处,就像这个易贝乐少儿英语一样,用大面积的蓝色,希望孩子在这里能很快的安静下来学习、专注自己的事情。
7大色彩技巧让你界面更吸睛
 
 
 
❸ 行业习惯方面
3.1 科技行业引领
许多知名的科技企业和软件产品在 B 端市场中广泛使用蓝色,逐渐形成了一种行业习惯。其他企业在设计B端产品时,也会倾向于选择蓝色以符合用户的认知和期望。
 
3.2 传统与延续
在过去的设计中,蓝色在 B 端领域的成功应用使得它成为了一种传统选择。设计师们在延续这一传统的同时,也不断优化和创新蓝色的运用方式,使其更符合现代设计趋势和用户需求。
 
嘉为科技是一个有着20多年技术沉淀的科技公司,它的官网和产品风格一直是沿用着科技蓝的风格,应该也是基于传统的沉淀吧。
7大色彩技巧让你界面更吸睛
 
 
 
❹蓝色可以提高产品的复用率
很多用户都能接受蓝色的B端界面,当面对有差不多需求客户时,同一套UI,可以多次复用,可以减少开发成本和设计成本,这也是自己通过长期实战观察发现的。
 
一个UI风格,用在了两个项目中,不同的用户,趋向同样的风格,说明蓝色在大家心目中的接受度是非常的高,用蓝色可以促进设计的多次复用。
7大色彩技巧让你界面更吸睛
 
 
在日常的项目中,我看到的B端UI界面是千篇一律的稳重,不追求过于刺激的颜色搭配,通常都比较的干净简洁,不像商场里面的美陈背景设计,色彩对比非常的强烈,比较的吸引人眼球。
 
有一次我厌烦了常规的稳重风,探索一种大胆的色彩风格时,虽然风格比较新颖,可是发出去客户的接受度不高,觉得太不稳重了,然后重新按照以往习惯进行设计时,就很好,客户一致认同。
 
可见每个领域都有自己的色彩运用习惯,商场需要吸引人眼球、刺激消费,越大胆越好,可是B端设计需要提供一个让人平静去处理工作事项的环境,它需要安静,不需要过于刺激的颜色搭配。
7大色彩技巧让你界面更吸睛
 
 
 
 
 
六、色彩在B端设计中的作用?
1、通过色彩向用户反馈操作结果及当前状况
比方在日常设计当中,红色代表流程失败,绿色代表流程成功,橙色代表信息有告警,蓝色代表着链接,同时不同的按钮颜色也可以很好的区分按钮状态,在反馈结果和状况方面,色彩起着非常重要的作用。
 
下面这个IDC运营的监测平台,它就是通过颜色来区分不同的告警级别的,可见颜色在B端产品中的重要性。(备注:图中数据都不是真实数据,仅做展示)
7大色彩技巧让你界面更吸睛
 
 
 
 
2、可以很好的进行品牌传达
B端设计中大面积使用品牌色,可以强化品牌形象,使用与品牌标志风格相近的色彩,可以帮助用户快速识别和记住品牌,在不同的B端产品界面中使用统一的色彩方案,有助于建立品牌的连贯性和一致性,增强用户对品牌的信任。
 
例如我给湖南高速设计的一套B端界面设计,用户强烈要求改变传统的蓝色风格,要求整套界面设计要用湖南高速品牌色-绿色,说明在追求大流和品牌色之间,客户更加倾向品牌的传达。(备注:图中数据都不是真实数据,仅做展示)
7大色彩技巧让你界面更吸睛
 
 
 
 
3、颜色可以很好的进行信息区分
在B端界面设计中,颜色在帮助信息区分起着非常重要的作用,通常可以通过不同的色彩来区分功能区域,可以让用户更清晰地了解界面的结构和布局,例如,导航栏使用一种特定的颜色,而内容区域则使用另一种颜色。
 
我设计的天翼写作,就是这样的设计思路,导航栏和内容区的颜色完全不一样,这里颜色起到了很好的区分作用。
7大色彩技巧让你界面更吸睛
 
 
 
 
4、舒适的色彩搭配可以提升用户体验
选择合适的色彩对比度可以增强文本的可读性,减少用户的视觉疲劳。例如,黑色文字在白色背景上通常比较容易阅读。
 
选择适当的色彩可以营造出专业、高效、舒适的工作氛围,从而影响用户的情绪和感受,提高用户的使用体验。
 
我参与的这个后台界面,就是通过合理的色彩搭配来引导用户使用的,当用户已经完成的环节都是用绿色表示,没有走完的流程就会是灰色的,寓意指示非常的鲜明,很好的解决了用户不知道清晰进程的卡点,提升了用户体验。
7大色彩技巧让你界面更吸睛
 
 
 
 
5、色彩可以传递性格
人的性格有活泼的、文静的、沉稳的、深邃的,其实色彩也是有性格的,不同的色彩也有不同的性格,当我们对色彩的性格有足够多的了解,在面对不同的客户时,我们对色彩的拿捏以及设计需求的把握时,会更加的游刃有余。
7大色彩技巧让你界面更吸睛
 
 
 
我们平常确实是在做设计,但是我们更多的是在与人打交道,我们更好的聆听,会帮助我们更快的抓取到客户的喜好,快速做出满足客户需求的设计,少受加班之苦。
比方说我之前给云门户设计的一套UI,客户的决策层是男性,且年龄偏大,他们就偏爱深沉的UI风格;而我负责的天翼云电脑专家,客户的决策层是女性,且年龄偏年轻,她每次就喜欢轻盈、明快的UI色调,不同的决策层客户,就会带来不同的设计结果。
 
7大色彩技巧让你界面更吸睛
 
 
 
 
 
七、B端色彩设计使用的原则
1、B端设计中,色彩设计应遵循6:3:1原则
在这个登录页面中,我就是运用的6:3:1原则,60%的主色,30%的次要色,10%的点缀色;使用了大面积的蓝色和蓝灰色,最后使用一点点的橙色,这样的配色会显得高级。
7大色彩技巧让你界面更吸睛
 
 
 
 
2、文字、卡片背景色和边框都使用无彩色
为了保证画面风格的统一、干净整洁,文字颜色、边框颜色、以及边框背景色都需要用到无彩色,通常通过颜色的深浅来区分信息的层级关系。
 
比方说我参与的星辰大模型AI文档生成能力的应用,里面无论文字颜色还是底色都是运用的无彩色,只是通过了色彩深浅变化来做了层级区分,因为无彩色可以起到很好的降噪作用,既传达了信息,又不会显得界面凌乱复杂。
7大色彩技巧让你界面更吸睛
 
 
 
 
3、需要凸显的内容,用明度和纯度比较高的色彩
比方说,日常我们设计的卡片都是用的白色,而底色我们用的是灰色,因为卡片里面的内容都是比较重要的信息,需要用一个亮度比较的高的颜色,让内容往前走,而灰色的背景通常就往后走的感觉,这样能跟卡片形成一个一前一后的对比,更好的帮助内容进行传播。
 
比方说我设计的这个IT运维监控平台的首页,物理主机、网络及安全设备、工单、在途工单这几个指标是非常关键的,所以他们的图片底色用了纯度比较高的有彩色来标识。
 
7大色彩技巧让你界面更吸睛
 
 
 
 
4、设计前一定要有定色调的意识
作为设计师,我们的设计工作其实就是在设计一种感觉,一种情绪,设计前定调的意识真的太重要了,感觉对了,什么都就对了。
 
比方说我前段时间接到了一个B端的大屏可视化需求设计,客户说之前的大屏设计不喜欢,希望重新出一个新的设计,然后公司的需求对接人员在给我下达需求时,真的就只是给我下达了这几个字,让我重新出一个设计试试。
 
以我的职业直觉,感觉这个需求是不够细化的,于是我就多问了几句,我问客户是想要常规的蓝色调的还是别的?果然一问,客户说不希望再用常规的蓝色的,希望新的设计要用他们的品牌色绿色,刚听到这几个字的时候,我以为这次我把握住需求了,在收集参考图的时候,我发现常见的绿色大屏有深色的和浅色的,根据自己以往的作图习惯,我觉得深色会更加的受欢迎一些,我自以为是的朝着深色的方向去出图,出到了一半的时候,我内心有些许的忐忑,我于是找了一深一浅的参考图,让同事跟客户确认一下,客户是想要深色的感觉,还是要浅色的感觉,这次沟通又给了我深深的一击,客户不按常理出牌,说希望按浅色的风格来出图。
 
在出稿之前,通过自己反复的沟通确认,发现设计前的定调意识真的太重要了,要不是有出图前一波三折的反复确认以及需求的细化,就不会有后来的一遍过稿。
7大色彩技巧让你界面更吸睛
 
 
 
5.设计的灰色尽量使用带有色彩偏向的灰
不管我们设计什么色系的界面,都避不开用到灰色,在设计中用跟主视觉相符的灰,会使得界面更加的高级、协调与美观,注意好了这个小细节,会给我们的设计加分不少。
 
下面是我日常体验到的两个界面,上面综合管理平台里面的灰色就没有跟主色调蓝色相呼应,灰色没有向蓝色倾斜,界面看起来就没那么美观;下面通义千问的灰色设计就非常的注重细节,灰色偏紫,整个界面看起来浑然天成,毫无违和,美感、档次瞬间提升好几个等级。
 
一个微小细节的在意,在无形中拉高了设计的高度,十个细节乃至更多细节的在意,就会带来更多意想不到的结果。
 
7大色彩技巧让你界面更吸睛
 
 
 
 
总结:
以上就是我最近对色彩的一些顿悟、感受和学习收获,在不断的复盘总结中,我们总会收获一些新的认知,通过这次色彩的复盘之旅,发现色彩对设计师真的太重要了,希望我的分享对大家有启发,不足之处也欢迎大家留言交流。


作者:姝斐suphie
链接:https://www.zcool.com.cn/article/ZMTYzOTMwMA==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

以用户为中心的交互设计思维

杰睿

 
聊聊关于设计思维的内容,会从产品设计、体验设计、交互设计三个方面入手。
目前是第三篇,关于交互设计思维的内容。到这里设计思维的内容全部结束了。
感谢
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维


作者:DesignLink
链接:https://www.zcool.com.cn/article/ZMTY0OTg1Mg==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
 

设计的意义

蓝蓝设计的小编

保罗·兰德说:“设计是一种行为,是想象力驰骋的过程和产物。”

作为设计师,设计是我们的专业,也是我们用来解决商业问题的工具。

我们过去也许都曾思考过类似设计的价值、意义或是本质之类的问题。思考这类问题在某种意义上或许都是为了当我们遇到困难、冲突、低谷或是不确定性的时候给自己找一些能够坚持下去的理由。

设计师在从业的不同阶段,对设计的理解不同。从追求工具技能到表现力、方法论、风格到影响行业甚至社会审美意识等等。不断的锤炼之后,对设计意义也会有不同理解。

我们奉为的大师,都擅长用自己的知识架构定义对设计的理解。

保罗·兰德就是一位我们公认的设计大师、艺术家。他是当今美国乃至世界上最杰出的图形设计师、思想家及设计教育家之一。他最出名的企业标志设计,包括IBM,UPS,ABC标志以及为史蒂夫·乔布斯设计NeXT.那段经典桥段。

去研究这些前辈们如何看待设计、理解设计以及如何与设计相处一生,是另一种设计哲学的思辨。

保罗·兰德说:

“设计是一种行为,是想象力驰骋的过程和产物。”

设计表现可能看似是简单的组装、排序或是美化的过程,但设计的过程也是赋予信息意义的过程。不断的简化、厘清、修饰甚至可能去说服、去取悦过后,设计就是把散文变成诗歌的过程。

设计师是孤独的,大部分时候他们是一个人在战斗。

设计是个人行为,即便在设计成熟度较高的国家、企业或是大型团队,设计师仍需在一线才能真正掌控在这场战斗中可能遇到的极其细节的变化和给人传达的感受。

设计需要冲突来加深传达的“戏剧性”。但设计过程也面临种种冲突。这是设计的商业价值与艺术价值平衡的过程。正是因为这种关心很难平衡,才会出现雇主与设计师之间的冲突。

企业的目标是达到商业、经济、政治甚至社会性目的。对设计师而言,设计是一种创造和实验行为。通过这种行为来平衡之前的目标。

设计品质最终决定设计师与核心决策者之间的关系。关心越是紧密,设计的产出就越有可能出彩。这其实并不难理解,对设计完成度有高追求的企业,CEO也大多都跟设计团队或是设计咨询公司有较为紧密的往来。就比如苹果的乔布斯与乔纳森是我们都公认的CEO与设计师高紧密度关系的典范。

当今社会,市面上依然存在太多糟糕的设计。

一来,核心的决策者对设计专业的理解度不够。

二来,很多决策依赖于市场调研,既得利益的权重大于长远利益。

再就是我们回避不开的话题,设计师在某种意义上话语权不够。

抉择者很多时候不了解或是存在对某类元素特定的喜好偏见,他们有评价权,但却缺乏对设计专业知识的储备。所以就会普遍出现外行指导内行的情况。过往(现在好一些),他们将设计师看做一套绘图工具,一个合作供应商而不是一个业务团队里重要的组成部门。

体系完整的企业可能会引入市场调研团队,调研团队为营销提供定位信息,设计师来解读和演绎那些信息。如果调研团队能理解设计师的工作过程与其产生共鸣,就有可能促成正确决策甚至产生惊喜的创意作品。

但很多时候,我们听到了太多这样的回复:

 

我喜欢它;

我不喜欢它;

它太简单了;

它太复杂了;

它让我想起某某...

常常一句“我不喜欢”就可以终结任何设计作品。就像当初一位IBM的主管第一次看到这个条纹logo时嘲弄到说“这东西让我想起格鲁吉亚的锁链囚犯”。

每个人所能感知的信息都不尽相同。

有人既看不到logo的意义,也看不到它的功能。也正因为过于用喜好而不是专业去评判,才让糟糕的设计一直留存于我们的世界。而大众对糟糕的设计要比对好设计更加熟悉,于是大家习惯于选择不好的设计,因为和他们朝夕相处。

新事物让人感受到威胁,而旧事物让人安心。

要判断一个设计的内在价值,决定性因素不是使用期,而是它所设定的“品质预期”。这是设计师的价值,也是设计师该练就的“知觉”。

何为知觉?

我们可以把知觉暂定为“瞬间的洞悉”。设计师在做设计决策的时候大部分都是依赖过往的知识储备以及惯性技能。不断的尝试,都是通过瞬间对各方向的可能性判断。

本能、预感、冲动、洞悉之后的综合“洞悉”,这就是知觉。

说到logo,我们常把logo当成品牌价值传递的重要符号。

它是一面旗帜、一个签名、一个路标。大部分时候,雇主期待logo能描述一个行业,但历史上最成功的logo都没能做到。苹果、劳斯莱斯、可口可乐、或是IBM等等...不可否认的是它们都是历史上最成功的logo,但它们却无法做到能传递它们的行业属性。因为logo远不如它所代表的产品重要,它所代表的比它看起来的样子更重要。


因为只有logo与它所属的公司、产品、服务联系起来时,它才具备真正的意义。一流的产品和公司的logo传递出一流的形象。反之一个公司如果是二流的,那么它的logo最终也会被归为二流。

 

 

logo首先要告诉人们“是谁”,而不是“是什么”。这才是它最基础且最重要的功能。它所扮演的角色就是“指示”。“简洁”是达成指示的手段。所以设计过程中的特点、好记以及清楚都是需要设计师在打磨细节前首先要做好的决策。一个复杂、挑剔、模糊的设计潜藏着自我毁灭性的风险。

 

“好的设计带来好的生意”。但不可否认,即使不好的设计,也可能带来好的生意(比如下图)。如果这样,还需要好的设计么?

好的设计可以增添额外的附加价值,很多时候,也许光看着它就能给人们带来快乐。它们更尊重感官,并通过这种友好的感官体验,给企业带来回报。人们更容易记得精美而不是一团糟的形象。它折射出一个考虑周全,目标明确的企业,反映了它的产品或者服务的品质。所以,这个世界需要好的设计,设计师要做的就是用设计向世界传递一些更有价值的观点。这是设计师的工作,也是设计该有的意义。

「大宝推荐阅读书单之《设计的意义》」



作者:大宝频道
链接:https://www.zcool.com.cn/article/ZMTQ3ODQzMg==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

 

优秀的设计就是带给用户惊喜!

蓝蓝设计的小编

优秀的产品设计是能带给用户惊喜的,在不经意间让用户感受到温度,也是提升用户体验的关键。
 
随着行业的进步,产品设计师也在不断优化体验,输出一个一个优秀的解决方案。近期黑马哥也发现了一些比较惊喜的设计,来和大家一起欣赏一下吧!
优秀的设计就是带给用户惊喜!
 
 
 
 
体验目录
一、降落伞带来的营销广告
二、动效反馈商家备餐过程
三、这个广告惊不惊喜意不意外
四、Banner 广告的视觉沉浸感
五、待机状态下的实时动态
六、小图标里的细节反思
七、轮播式的悬浮设计
八、氛围热烈的底部标签栏
九、收缩式交互设计
十、形象化的进度设计
 
 
一、降落伞带来的营销广告
在这个广告满天飞的年代,用户已经逐步开启广告免疫模式,如何提高用户对广告的关注度至关重要。
 
近期在体验饿了么时,等待送餐界面中空降一个降落伞,从左上角飘到右侧悬浮,弹出红包悬浮广告。降落伞飘浮的动态过程吸引了用户的关注度,进而提高了营销广告的点击率,虽然广告大家都比较反感,但是一个伴随着惊喜的广告也会让你放下戒备心理。
优秀的设计就是带给用户惊喜!
 
 
 
 
二、动效反馈商家备餐过程
提升等待过程对于用户体验来说尤为重要,降低用户等待过程中的焦虑感,才能让用户愿意为此停留。
 
通过饿了么点餐之后,商家需要一定的时间完成餐饮的制作,必然需要用户等待一些时间。在这个备餐过程中,当前界面以一个翻炒动效表达,情感化的动效不仅提示用户当前状态,也提升了设计表达的感官体验。
优秀的设计就是带给用户惊喜!
 
 
 
 
三、这个广告惊不惊喜意不意外
意料之外的广告是带给你惊喜还是反感呢?平台为了提高变现能力,各种层出不穷的广告玩法也让你猝不及防。
 
之前在体验腾讯视频 App 时,从闪屏广告过度到 Banner 图的过程中,经历了多个广告新花样。首先从闪屏切换到自动轮播的弹窗模式,再演变到放大版的多个广告切片(占 Banner 位呈现),最后再恢复到 Banner 的正常布局中。这个过程无疑是把广告的存在感拉满了,让你对广告的记忆形成硬性要求。
 
无论这个广告设计方案是否让用户反感,但是这个呈现的互动方式还是比较新颖的,相信广告的点击率必然有所提升。
优秀的设计就是带给用户惊喜!
 
 
 
 
四、Banner 广告的视觉沉浸感
Banner 图在产品中是非常普及的,各类形式的演变也层出不穷,产品设计师都在探索更多可能性。
 
在腾讯视频 App 动漫栏目中,发现一例很有想法的 Banner 表现。Banner 上面新增了一个悬浮的火焰燃烧的动效,提升了整体的氛围感,动效与 Banner 画面完美贴合,视觉沉浸感十足。
优秀的设计就是带给用户惊喜!
 
 
 
 
五、待机状态下的实时动态
随时让用户感受到你的存在,才能让人感到安心,服务过程中状态实时可见至关重要。
 
通过饿了么点餐之后,就算处于待机状态时,只要点亮屏幕即可看到当前出餐状态。可视化的图形结合时间提醒,让状态一目了然,使得点餐到用餐之间的过程更有用户可控性。
优秀的设计就是带给用户惊喜!
 
 
 
 
六、小图标里的细节反思
产品中有很多辅助功能/信息等表达的图标,既要能准确表达主题,也要让用户易于理解。
 
在汽车之家 App 发现了一个值得反思的图标案例,在扫一扫的图标中结合了汽车外形轮廓,不仅不会影响扫描的功能表达,也进一步表达了该功能的差异。和别的产品扫描功能不同,这个是对准汽车进行扫描,体现出了业务的差异化。一枚小小的图标体现出了设计师的能力,用最简单的方式表现自身产品的差异,以此提升用户的操作体验。
优秀的设计就是带给用户惊喜!
 
 
 
 
七、轮播式的悬浮设计
悬浮设计非常普及,因为占比小和滑动页面会隐藏,对用户的干扰比较小。
 
最近在芒果 TV 首页发现了悬浮窗口的轮播式表达,芒果卡和活动中心会自动轮播显示(也能手动切换)。让我们对悬浮窗口的设计又多了一种设计理解,可以呈现更多不同内容的表达,提升了窗口的利用率。
优秀的设计就是带给用户惊喜!
 
 
 
 
八、氛围热烈的底部标签栏
底部标签栏的设计在图标创意层面发挥较多,各类风格的图标让该栏目更加丰富多彩,除此之外也有在背景层渲染氛围的案例。
 
近期恰逢芒果 TV 十周年之际,在底部标签栏背景层也加强了氛围感。丰富多彩的元素和配色,结合主题化的图标设计,使得整体氛围感拉满。
优秀的设计就是带给用户惊喜!
 
 
 
 
九、收缩式交互设计
通过交互方式应对用户操作过程,特别是在滑动界面时,交互方式的优化可以降低干扰,提高当前界面的利用率。
 
在 Blurrr App 创作界面,默认以 3D 动态图标展示“开始创作”按钮,当滑动界面时按钮会收缩展示。通过收缩式的交互设计,让界面可以展示更多内容,也不会影响用户点击按钮进行创作。即通过 3D 动效加强了功能的曝光度,又通过收缩式交互提高了内容的展示空间,可谓是一举多得的设计解决方案。
优秀的设计就是带给用户惊喜!
 
 
 
 
十、形象化的进度设计
进度设计是反馈状态变化的关键,通过可视化的表达让用户一目了然,提高用户对服务过程的把控。
 
当用户通过携程旅行 App 订票后,在行程订单界面可以看到列车行驶状态的进度提示。通过可视化的列车形象的表达了行驶状态,让用户清晰的看到行驶方向和抵达站点示意。不仅信息传递高效,形象的表达也使得感官体验更佳。
优秀的设计就是带给用户惊喜!
 
 
 
 
小结
优秀的产品总能在细微之处带给你惊喜,让你感受到产品服务的情感化和温度。本文观点仅代表个人体会,希望可以和大家一起共勉。
 
作者:黑马青年
本文由 @黑马青年 原创发布。未经许可,禁止转载。


作者:黑马青年
链接:https://www.zcool.com.cn/article/ZMTYxODE4MA==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

精通B端界面设计:揭秘7大弹窗类型及其实战案例分析

蓝蓝设计的小编

 
 
 
面向企业用户、注重效率与管理、解决企业痛点、技术与服务并重、决策过程复杂
B端关注的是如何通过技术手段赋能企业,提升其业务处理能力和管理效能,是企业间或企业内部运作不可或缺的工具和服务。
弹窗-聚焦任务处理与即时提醒的高效交互工具;作为一种常见的交互设计元素,在提升用户体验和效率方面扮演着重要角色。
精通B端界面设计:揭秘7大弹窗类型及其实战案例分析
 
 
精通B端界面设计:揭秘7大弹窗类型及其实战案例分析
 
 
精通B端界面设计:揭秘7大弹窗类型及其实战案例分析
 
 
精通B端界面设计:揭秘7大弹窗类型及其实战案例分析
 
 
精通B端界面设计:揭秘7大弹窗类型及其实战案例分析
 
 
精通B端界面设计:揭秘7大弹窗类型及其实战案例分析
 
 
精通B端界面设计:揭秘7大弹窗类型及其实战案例分析
 
 
精通B端界面设计:揭秘7大弹窗类型及其实战案例分析
 
 
精通B端界面设计:揭秘7大弹窗类型及其实战案例分析
 
 
精通B端界面设计:揭秘7大弹窗类型及其实战案例分析
 
 
精通B端界面设计:揭秘7大弹窗类型及其实战案例分析
 
 
精通B端界面设计:揭秘7大弹窗类型及其实战案例分析
 
 
精通B端界面设计:揭秘7大弹窗类型及其实战案例分析
 
 
精通B端界面设计:揭秘7大弹窗类型及其实战案例分析
 
 
精通B端界面设计:揭秘7大弹窗类型及其实战案例分析
 
 
精通B端界面设计:揭秘7大弹窗类型及其实战案例分析
 
 
精通B端界面设计:揭秘7大弹窗类型及其实战案例分析
 
 
精通B端界面设计:揭秘7大弹窗类型及其实战案例分析
 
 
精通B端界面设计:揭秘7大弹窗类型及其实战案例分析
 
 
精通B端界面设计:揭秘7大弹窗类型及其实战案例分析
 
 
精通B端界面设计:揭秘7大弹窗类型及其实战案例分析
 
 
精通B端界面设计:揭秘7大弹窗类型及其实战案例分析
 
 
精通B端界面设计:揭秘7大弹窗类型及其实战案例分析
 
 
 


作者:Miao_C
链接:https://www.zcool.com.cn/article/ZMTYyNDEwMA==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
 

每个设计都让你感受到个性化

蓝蓝设计的小编

随着同类型产品越来越多,更有体验感和个性化的设计才能打动用户,成为被选择的对象。作为产品设计师我们在不断探索和创新,希望以更好的设计表达来解决业务场景,为提升用户体验而助力。
 
本期以个性化设计为出发点,给大家带来十个不错的设计方案,希望可以带给大家更多设计灵感。
每个设计都让你感受到个性化
 
 
 
 
体验目录
一、让你感受温暖的年度报告
二、趣味性的图标设计
三、通过 AI 重新定义搜索体验
四、动态化功能引导产品升级
五、动态优惠券更有吸引力
六、人性化的温馨提示设计
七、自定义形象的年度报告
八、个性化的主界面设置
九、情感化的表情设置
十、空间感的 Banner 轮播体验
 
 
 
一、让你感受温暖的年度报告
这段时间相信大家经常使用的产品都晒出了年度报告,设计风格与互动形式也层出不穷,哪一个产品的设计风格最打动你呢?
 
在我刷到的年度报告中,携程旅行的年度旅行报告印象最深刻。毛茸茸的设计风格在寒冷的冬季显得格外温暖,图标、字体、背景、按钮等都以此风格进行设计,整体效果非常细腻柔软,你也去体验感受一下吧!
每个设计都让你感受到个性化
 
 
 
 
二、趣味性的图标设计
图标在产品中主要以各种设计风格形成差异,打造出匹配品牌风格的个性设计,除此以外,我们也要多在图形创意表达层面进行探索。
 
最近在使用极兔速递小程序时,除了图标设计的风格独特以外,多个场景的图形创意也很有意思。比如下单寄件、扫码寄件和个人中心的图标等,趣味性的设计表达让人印象深刻,以个性化的图形创意吸引用户的注意力。
每个设计都让你感受到个性化
 
 
 
 
三、通过 AI 重新定义搜索体验
AI 化已经成为众多行业未来需要对接的方向,任何行业都可以通过 AI 进行重新定义,带给用户 AI 化的体验。
 
以前在腾讯视频 App 搜索时都是以关键词为主,现在可以通过 AI 搜与腾讯元宝 AI 助手交流,以对话式的方式找到感兴趣的影片。通过 AI 重新定义了搜索方式,让用户感受到属于 AI 化的体验感。
每个设计都让你感受到个性化
 
 
 
 
四、动态化功能引导产品升级
引导用户升级产品才能带来新的功能和服务升级,如何吸引用户进行升级变得至关重要。
 
高德地图为了引导用户点击升级,以升级后带来的更优功能和服务为吸引点,通过动态轮播的形式表现升级弹窗。动态化的功能引导可以让用户提前了解新版本的信息,提高用户升级的选择性。
每个设计都让你感受到个性化
 
 
 
 
五、动态优惠券更有吸引力
各种优惠券、打折券、新人红包等让用户开始有点麻木,也不一定会领取和使用,如何增加其吸引力就变得越来越重要了。
 
近期高德地图打车栏目的营销活动中,为了展示更多类型的打车券、打车金等,通过动态轮播的方式进行设计表达。相较于静态展示而言,不仅解决了内容展示的数量问题,动态的方式也更有吸引力,增加用户的参与概率。
每个设计都让你感受到个性化
 
 
 
 
六、人性化的温馨提示设计
温馨提示虽然不一定管用,但是依然可以让用户感受到人性化的服务,增加用户对产品的好感度。
 
在比较晚的时间段使用洪恩识字 App 时,会出现温馨提示的弹窗,劝导用户注意休息时间。人性化的设计可以辅助家长管理孩子的使用习惯,提醒注意时间管理和作息规律。
每个设计都让你感受到个性化
 
 
 
 
七、自定义形象的年度报告
年度报告的形式丰富多样,都是以用户个人数据生成,如何才能更加个性化,成为了设计表达的重点。
 
网易云音乐的年度听歌报告可以自定义形象,可以针对身体的上中下三个部分进行定制,以个性化的形象开启专属的听歌报告。整体表达很有设计感,图形、排版与配色都很不错,快去生成属于你的听歌报告吧!
每个设计都让你感受到个性化
 
 
 
 
八、个性化的主界面设置
对于感官体验每个人的喜好各不相同,为了满足各自的选择需求,个性化的设置变得尤为重要。
 
体重小本 App 的主界面,可以通过主题皮肤设置背景、配色等,提供了焕彩粉和清爽蓝的多款选择,用户也可以自定义图片进行设置。通过个性化的设置带给用户更多选择性,满足不同的感官体验需求。
每个设计都让你感受到个性化
 
 
 
 
九、情感化的表情设置
通过表情设计辅助可视化表达,其中表情符号的运用较为常见,丰富多样的表情选择更能满足用户需求。
 
体重小本 App 体重数据展示中,以不同表情来体现体重数据的变化,情感化的表达让变化的呈现更加贴切。产品提供了多款表情供用户选择,用户也可以设置自定义表情,情感化的设置让体验感变得更加丰富。
每个设计都让你感受到个性化
 
 
 
 
十、空间感的 Banner 轮播体验
轮播 Banner 图在设计表达、布局结构、轮播形式等层面都可以进行创意发挥,有特点的形式更能吸引注意力,以此提高 Banner 的点击率。
 
最近在体验芒果 TV 时,发现首页 Banner 的表现形式以分层式表达,轮播过程中更有空间感。将人物与背景进行分层设计,轮播时分前后入场,伴随着缩放等动效表达,营造出更强的空间感。
每个设计都让你感受到个性化
 
 
 
 
小结
设计思维的转变离不开大量优秀案例的辅助,对于产品设计师来说,体验和总结的训练至关重要。希望本期的分享可以带给大家一些启发,观点属于个人见解,不足之处欢迎大家留言补充。
 
本文由 @黑马青年 原创发布。未经许可,禁止转载。
 


作者:黑马青年
链接:https://www.zcool.com.cn/article/ZMTY1MDA0OA==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

B端基础 | 52000余字总结 B 端基础设计知识

杰睿

最近看汪曾祺的《叹息桥》中的一句话,我必须分享给你。缘起我在人群中看见你,缘散我看见你在人群中。是的我想你在人群中看到我。这就是最初我分享这系列设计文章的初衷。
 
慢慢发现其实分享也是一件快乐的事情、而且在分享的过程中我自己也收获了很多。而且对设计的理解也更深了。更快乐的是收获了一群一起同行的小伙伴、这个还挺开心。和他们一起在群里吹水、一起吐槽。一起讨论问题、那真的是快乐无边。哈哈哈
 
上面扯多了。我们开始今天的内容。今天内容分三部分、第一部分内容总结是对我写的这个系列文章每一篇文章内容和核心的小总结。第二部分这个系列的文章页算是告一段落了、下一阶段我会做些什么。第三部分分享一些我写文章的感受、然后煽煽情。
 
1、内容总结
因为在写这个系列的文章时我加入了很多扩展知识。希望告诉你更多。这里我会把主要的这个系列的知识总结一下让你尽量一次看完。
B端基础 | 52000余字总结 B 端基础设计知识
 
 
1.1、登陆页面
 
最近就在做我们系统的登陆页面优化。回头我会写一个项目总结给你们看。这里介绍一下B端登陆页面该怎么去做。其实还挺简单了。因为现在主流的布局就那几个。
B端基础 | 52000余字总结 B 端基础设计知识
 
 
登陆页面:布局分为三种;居左、居右、居中
页面元素:导航、登录框、背景(装饰元素)、互联网信息。
导航高度:68px或48px、文字大小:14(大部分)16(也可以)
登录框大小:大小尺寸不统一、没有固定的尺寸。可以根据自己和领导的喜好决定。对还有要承载的内容多少。
登录方式:扫码、手机号、账号、第三方
标题切换字号:我喜欢用26px(也要其他的16、/18、/20)
输入框高度:48px
按钮文字和高度:16px、和输入框高度一直就行。
背景可以是配的插画(这种最简单)、一般都是科技风
底部要不就是单纯的互联网信息。要不就是快捷入口、联系方式什么。这个就不多说了正常排版就行。
 
1.2、筛选
 
筛选相对是很简单的部分把、因为你直接用规范里的组件。虽然不会很优秀、但是刚重要的是不会出什么错误。主要是就大厂规范能够快速的帮你解决问题。
B端基础 | 52000余字总结 B 端基础设计知识
 
 
筛选的意义:定位数据、缩短查询路径、数据内容分类
 
筛选类型:基础筛选组件(就是我们常见的页面顶部的筛选)、高级筛选(就是那些需要你定义想一想的筛选部分)
 
筛选布局:顶部和左侧
 
筛选样式:平铺;折叠;Tab筛选;单侧选择;表头;综合
 
1.3、栅格
 
这里其实还简单的、首先你要明白栅格在我们的设计里面很重要。你不用当然也可以呀。但是你想要做的更好那就用起来你会有意外的收获。
B端基础 | 52000余字总结 B 端基础设计知识
 
 
怎么用:直接看ant design、TDesign、阿科desing的规范就行、写的很清楚。
 
注意点:不要硬套、我们要根据自己的系统去自己定制。比如我们系统、用的是ant design的框架、但是我们的网格系统是自己定制的。因而我们的边距不是24px、我们是20px
 
1.4、颜色
 
这部分相对来说是我自己的弱项、在写当时的文章的时候也是收获颇多的。明白了大厂规范是怎么确定自己色彩设计规范的。也清楚了自己应该怎么去规定自己的设计规范。
B端基础 | 52000余字总结 B 端基础设计知识
 
 
主色确定:常见的方法、1、用自己品牌logo的颜色;2、用行业色
 
配色确定:我一般是找竞品、或者优秀的配色方案、来确定自己的。多参考大厂的配色方案。虽然不全是好的。但是好的还是站大多数的。
 
大厂色彩:这里我分享了大厂的色彩是怎么去确定的、如何去确定。可以去看看。我在自己的工作中色彩的应用就参考了ant Design的色彩应用方式定制的。
 
1.5、字体
 
字体部分我觉得最有意思是的是分享了、我们宋体、楷体、隶属、甲骨的发展历史和由来。还有就是如何去设计一款自己的字体。还有后台字体规范的制定
B端基础 | 52000余字总结 B 端基础设计知识
 
 
中国文字:这里中国文字的发展历史、所有字体的产生都是有自己发展的历史原因的。很有意思。建议你看看、可以当做你喝酒吹水的谈资。
 
字体规范:我们大部分的字体会采用黑体、可读性强、亲和、现代、清晰。
 
字号:最新的字体12px、正文、14px、通过+2, +4,+8,+12,+16 的步数增长规律
 
行高:通过逻辑得到这样一个公式:「 行高 = 字号 + n 」,8 作为变量正好同时满足与 1.5 倍的「 14px & 16px 」常用字号行高保持一致,总体文字间隙稳定呼吸,行高空间较一致得出计算公式:「line-height = font size+8」
 
字重(就是字粗):建议使用两种常规和加粗(在前端里一般就是400和500)
 
颜色:我是主张带有色彩倾向的颜色应用的。根据字体样式的设计原则,制定了简易好记的透明度数值区间并且将该字色与界面系统的色彩系统结合,文字显示色彩对比满足至少1:4.5( AA级别)。且验证了其中的实用性,共分为亮暗两种模式,4 个色阶。
 
1.6、ICON(图标)
 
你要统一风格成套的去找参考和应用。在我们的系统里我是自己画icon的然后传到阿里巴巴矢量图库让开发直接引用。这个是自己累点、但是可以保障实现效果。
B端基础 | 52000余字总结 B 端基础设计知识
 
 
设计原则:准确、简单、节奏、愉悦。
 
设计实战:采用栅格
我是用的阿里巴巴矢量图库的设计规范、因为我要传到这个平台应用
 
ICON分类:交互性图标、装饰性图标、说明性图标
 
1.7、按钮
 
按钮我觉得这部分是相对简单的、也是要做到风格的统一。直接用大厂组件然后根据自己平台的风格、不如圆角的大小其他的倒是没什么了。
B端基础 | 52000余字总结 B 端基础设计知识
 
 
常规按钮:次要按钮、主要按钮、文字按钮、图标按钮
 
按钮状态:可用、禁用、加载、悬浮
 
尺寸:把按钮分成:迷你、小、中、大,四种尺寸。高度分别为:24px/28px/32px/36px。推荐及默认为尺寸「中」。
 
样式:各个规范对按钮形状的规范基本都一样。提供长方形、正方形、圆角长方形、圆形四种形状。
 
 
布局:这里分享了两个概念、古登堡法则、费茨定律、告诉你我们为什么这么排版。对产品和甲方很有用、哈哈、这是我的秘诀。
 
1.8、弹窗
 
后台弹窗是一个很复杂的内容、但是也是一个相对很好处理的部分。只要你做好规范这部分、简直就是一点开胃小菜。
B端基础 | 52000余字总结 B 端基础设计知识
 
 
弹窗是一个我头痛的问题因为不太好规范。但是我还是把这个弹窗系统、在我们的体系中形成了一个小的规范。感谢领导、感谢前段端的龙哥。
 
我们把前段粗略的分为400px、600、800、1000、最大、广告。业务里我们会采用4、/6、/8、/1、最大、推广和通知我们就统一的尺寸。
 
1.9、表单
 
什么是表单:我理解表单就是系统为和用户进行交互、所要收集用户信息的或获得用户反馈的一种方式的载体。在后台产品中对我们数据做的增、删、改、查、验都可以通过表单完成。
B端基础 | 52000余字总结 B 端基础设计知识
 
 
我们在后台系统中、大部分的场景都会使用上表单。信息采集呀、编辑数据呀等。在表单设计时要遵循的原则、简洁明了、清晰高效、适应业务、即时反馈。
 
表单的构成结构、基本都是由、标签、域、提示、操作按钮这四个部分构成的。
 
表单布局在表单中我们采用多种布局方式。信息分组、内容列表、标签页、分步骤。
 
1.10、表格
 
B端设计中,对数据浏览、操作、过滤、展示是最高效的。这你就不用质疑了。因为结构简单、精准高效、数据形式丰富。
 
B端基础 | 52000余字总结 B 端基础设计知识
 
 
表格是用来收集、整理、组织、分析数据的二维矩阵。它由内、外两部分组成。其中,内部包含表头、表体、底栏等。外部包含标题、筛选区、操作按钮区等。
 
表格的类型:基础表格、树形、子表格、交叉表格、图表表格、卡片表格
 
表格的样式:网格型、水平线型、斑马纹、自由形式
 
进阶的一些知识就是表格数据的优化和表格的交互知识了。想了解去看更详细的我的文章11表格设计和12表格优化项目实战。
 
1.11、大厂规范
 
如果你是一个小厂B端设计师、刚好没有自己平台的设计规范。那就去直接用的场的设计规范。去用没问题的。大厂那么多的牛逼设计给你做好了你不用。都塞到嘴巴上、不吃就不给面了。
B端基础 | 52000余字总结 B 端基础设计知识
 
 
在使用大厂的设计规范时然后慢慢的积累自己平台的设计规范。逐渐的你就会形成一个属于你们自己平台业务的高质量设计规范了。
 
2、计划
 
这个基础系列的文章就这样写结束掉吧、希望可以对你的B端设计有所帮助。之后我会写二个系列的文章、去分享我理解的B端设计。
 
B端基础 | 52000余字总结 B 端基础设计知识
 
 
第一个系列是B端基础设计的加强版、B端高手。B端高手是会写我的实战里是怎么去做的。其实就是我的设计项目复盘。
 
第二个系列就随便的去分享一些设计知识。比如哪些什么什么原理呀、什么什么法则呀、在设计里的应用。而且会提出和讨论一些设计问题。
 
3、写在最后
 
分别是为了更好的相见、我一直希望我的文章可以帮到你。慢慢来路还很长、总是要一步一步的来。很快我们会再次相见。我是KING(国王)
 
B端基础 | 52000余字总结 B 端基础设计知识
 
 
新的开始见.......
 
注解:标题的40000余字也好、50000字也好都是说的我这个系列总计的字数、因为想让你们看到。

作者:彪形大汉pro
链接:https://www.zcool.com.cn/article/ZMTYyMTEyNA==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

日历

链接

个人资料

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

存档