从拟物风格到扁平化,再到如今的多变色彩与微妙质感,设计风格的演变不仅反映了技术的进步,也折射出用户需求的转变。本文结合钉钉近10年的B端设计经验,深入探讨2025年B端设计的三大趋势:多变丰富的色彩、微妙克制的质感以及清晰明了的图形。揭示了如何在满足企业高效、专业需求的同时,为用户带来更具情感价值和科技感的视觉体验。
回溯互联网的发展进程,从桌面端的拨号上网,到5G移动互联网,再至人工智能的助力,科技领域正在经历着翻天覆地的变革。未来的数字世界,在沉浸感、参与度、个性化等维度对体验会提出更进阶的要求;与此同时,B端企业对于高效、简便、用户友好的界面需求与日俱增。在2025年的当下,B端设计师唯有持续学习,适应新技术与新趋势,紧密围绕客户的业务价值展开设计,进一步注重实用性、包容性以及可定制化,方可为企业客户塑造出卓越的产品与服务。
因此,我们结合钉钉近10年的B端产品设计经验,鉴于未来B端设计趋势将展现出多元化、智能化和人性化的特质,从B端产品个性化、风格与质感、界面版式、图标、动态交互等多维度设计展开深度研究,与大家一道探讨B端设计的本质和趋势,期望在真正驾驭B端产品设计的这条道路上,带来些许有益的启迪。
上篇文章我们讲述了B端产品的个性化趋势,如何利用个性化帮助个体提升用户价值,打造个体形象、满足个体情绪以及增强个体自信。
今天,我们要给大家分享的是B端产品风格&质感,为企业塑造品牌形象、为个人用户提供情感价值。
设计作为科技和艺术的结合,UI设计风格的演变不仅与技术的发展密不可分,而且与艺术创作风格的发展有着异曲同工之妙,都经历了抽象—具象—抽象的过程。
20世纪70-80年代是计算机图形界面的萌芽阶段,就像绘画艺术起源之时的那个茹毛饮血的年代,当时的原始人所能利用的工具只有火堆熄灭后留下的木炭,图像呈现的载体也只有山洞内的墙壁和岩石。就像刚刚进入计算机时代的设计师们,不仅缺少专业的绘图软件,而且当时计算机本身的显示能力也尚且不足。这个阶段的UI设计,能够在显示器上清晰地显示并传达明确的含义,比画出风格更加重要。观察当时的操作界面,不难猜测当时的设计师,努力以具象的表现风格来减少人们对计算机界面的陌生感,但由于工具和载体的限制无法完美实现,虽然这种风格无法被称为拟物风格,但为后来真正的拟物风格的出现和发展奠定了基础。
1995年,家用计算机的显示能力迎来了质的飞跃,Windows95发布、对真色彩的支持、PhotoShop5.0的发布……技术进步和专业软件的加持让设计师突破了过去创作工具和呈现载体的限制,就好像在山洞里用木炭绘画的原始人,拥有了画笔、颜料和画布。设计师的创作空间和写实能力得到极大提升。
与此同时,个人计算机和手机开始普及,图形化的操作界面不再是科研人员和专业人士的专属,而是普通人工作学习中的一部分。为了让没有接触过图形化操作界面的用户快速识别图标代表的功能,最好的方式就是在界面中对现实世界中的物体进行还原,这便推动了拟物风格的发展。
拟物风格的设计作品,通过模拟现实物品的造型和质感,通过叠加、高光、纹理、材质、阴影等效果对实物进行再现,让用户以极低的学习成本快速熟悉图形化的操作界面和产品功能,并以符合日常习惯和直觉的方式引导用户进行交互。
例如在ios6中的相机icon,对镜头部分细节刻画非常细致,用户很容易联想到使用真实相机时能够做到的事情,这对用户理解和熟悉某一个产品功能的帮助无疑是巨大的;再比如同样在ios6中的书架icon设计也十分精彩,不仅对真实报刊架的结构和质感极度还原,而且对书架内的杂志也进行了展示,用户甚至能像真的面对一个书架一样看到书架中的内容,小小的icon中信息含量极高。
到2013年左右,智能手机在全球主要国家和地区的普及率大幅提高。根据统计数据,许多发达国家的智能手机普及率超过了50%,发展中国家的智能手机普及率也在快速上升。大部分用户已经对图形化的操作界面非常熟悉,无需那些极致写实的风格也能快速理解图形背后的含义和功能。同时,越来越多的信息和应用涌入智能设备,拟物风格所推崇的肌理、质感、光影……带来精致效果的同时,也让细节变得冗余,如何处理爆炸的信息成为UI设计的首要问题。就像19世纪摄影技术对传统写实绘画艺术的冲击,让艺术家们重新思考绘画艺术的发展方向一样,拟物风格的极致具象化在达到巅峰之时也渐渐到达了转折点。
2013年9月ios7发布,并且首次在UI设计中采用了扁平化的设计风格。这种风格摒弃了拟物设计风格中的写实光影、肌理、冗余的细节、甚至放弃了体积的塑造以及一切可能会对识别产生干扰的元素,只保留对用户最关键的信息,呈现出十分干净整洁的视觉效果。
然而物极必反,扁平化设计的极致简洁,容易让长期使用的用户感到冷淡和无趣,于是新拟物风格应运而生。
新拟物融合了拟物和扁平两种风格的特点,在光影和立体效果方面较为写实,元素通常是凸起或凹陷于界面之上,视觉上错落有致,但是在色彩和造型方面则更偏向于扁平化风格,图形往往经过一定的简化和抽象,并搭配少量简洁的主观颜色。但是新拟物风格过于依赖投影和立体效果对界面元素的区分,很难呈现复杂的信息层级,而且微妙的对比度也不利于无障碍识别,所以这种风格并未真正大面积流行和使用。
2022年,ChatGPT发布,AI在自然语言处理方面达到了前所未有的高度,同年Midjourney和stablediffusion的出圈让每个人看到了AI生图的魅力。不仅各种AI应用和网站如同雨后春笋般出现,而且各行各业的APP都在争前恐后的升级自己的AI能力。这样的时代背景,为UI设计提出了一个新的命题:如何用设计展现应用的AI能力以及企业的智能化心智。
色彩在B端设计风格中占据着至关重要的地位,能够带给用户非常强烈的直观感受,是用户对产品和品牌的第一印象。例如蓝色就是过去对To B或科技产品的色彩印象,诸如英特尔、微软、联想、戴尔、IBM…这些品牌通过蓝色来传达简洁、未来感和高科技等视觉感受。但是这个标准并非是一成不变的,越来越多的B端设计,选择使用丰富的色彩来表达智能化千变万化的特点,科技感的表达不再是千篇一律的冷色,而有了更多的变化。
弥散渐变
弥散渐变是一种借助模糊效果将多种颜色进行混合的特殊渐变形式,多种颜色的混合以及不规律的渐变走势,让弥散渐变具有很强的氛围烘托效果和表现力。晕开的色彩仿佛在一片虚空之中慢慢弥散开来,细腻、柔和又梦幻,很适合用来提升界面的局部氛围。
优秀的场景适用性
在B端设计中,屏效和识别尤为重要,利用图形或插画的形式烘托氛围,往往需要占用更多的空间,并且在网页端的适配过程中,容易产生图文重叠带来的识别的问题。而弥散渐变由于其模糊和明度均匀的特点,可以在为画面贡献丰富度的同时,不产生视觉上的焦点,所以在适配过程中也不会产生图文重叠的问题,具有很普遍的应用场景。
高效的场景拓展
在调整渐变时,通过保留一些相对清晰的轮廓,弥散渐变还能呈现出虚实结合的视觉体验,让画面更具动感和层次变化,就像一面磨砂玻璃后飘浮着一些真实的物体一样,十分具有空间感。虚实的变化让色彩有了具体的造型,可能是一段波浪、一个球体、或是一座山丘……这样的背景配合一些简单的排版,便可以是一张海报、一张banner、一个推送封面……这无疑为高速迭代的B端设计提供了一个高效的解决方案。
动态变化
根据资料显示,手机软件的AI生图时长一般在10秒至120秒之间,AI搜索平均时长大致在2秒到15秒之间,专业的写作AI成文时间大致在3秒到30秒……
AI应用伴随着大量的等待时间。使用动态变化的颜色能够降低用户在等待期间的焦虑感,并且不断变化流动的色彩也能暗示用户,当前仍处在“生成中”的状态下。例如用户在等待钉钉AI助理回答的过程中,聊天气泡会呈现出多彩的流光效果;用户在与AI助理进行语音交互时,整个屏幕边缘会呈现动态的彩色光效,以表示当前的AI激活状态。
除此之外,全屏动态的渐变背景还很适合用在信息不多的功能或应用首页,例如在钉钉的登录页面,屏幕近三分之二的空间中只有简单的文字动画,搭配全氛围的动态渐变背景,不仅清晰地传达品牌的智能化心智,而且为“登录”这一操作增添了满满的仪式感。类似的还有钉钉AI搜索的功能首页,大面积涌动的动态渐变,充分在视觉层面展现了智能化的心智,而且大面积的留白也让钉钉AI企业搜索的功能价值描述显得格外突出。
虽然新拟态风格并未大规模的使用和流行,但其衍生和沉寂的背后反映了设计的本质就是一场功能和审美之间的角逐。B端设计更是如此,用户侧需要美的设计来愉悦工作中的心情,但又不想被花哨的色彩和装饰干扰工作效率,企业侧需要摆脱沉闷古板的刻板印象,但同时也需要呈现专业、科技的高大形象保持可信度。微妙克制的质感表达为这种“平衡”的实现提供了解决思路。
玻璃拟态
玻璃拟态是2020年末开始流行的设计风格,顾名思义就是对玻璃这种材质的一种拟物化设计,玻璃拟态风格相较于新拟物风格最明显的进步在于,它巧妙地利用玻璃这种材质解决了新拟物风格中元素边界不清晰、难以体现复杂层级等问题。其风格特点可以总结为以下特点:
通透:
由于磨砂玻璃的通透性,在界面中存在多个层级时,会呈现出一种虚实结合的美感。并且其透明的属性,能够很好的暗示用户目前所处的位置,利用此特性,不仅能更沉浸的展现用户当前关注的信息,而且“叠加”而非“跳转”的交互逻辑也极大减轻了用户操作时的心理负担。
悬浮:
传统的拟物风格往往会塑造一个地面,再将图标“放置”在上面。而玻璃拟态风格则更像是构建了一个“无重力”的虚拟空间,界面中的元素有明显的悬浮感,显得十分轻盈,同时也非常适用于B端场景下对于科技感的体现。配合投影、虚实对比,用户能够清晰地感受到元素在空间上的高度差异,不仅保障了信息的可读性,而且让可交互元素更具点击感。
微妙:
由于磨砂玻璃的物理特性,页面背景在经过“玻璃层”的模糊处理后会变得十分柔和,类似上文所述的“弥散渐变”,呈现出一种明度均匀,没有视觉焦点的状态,无论是动态还是静态都能很好的保障前景文字、UI控件等元素的可识别性。并且在玻璃拟态风格中,常常使用轻薄微妙的边框来强化物理质感,这种既作为描边,又作为“玻璃”的厚度的处理方式,让卡片能够以一个恰到好处的对比度呈现在界面中。
综上所述,玻璃拟态风格在拟物程度上找到了一个很好的平衡点,既为枯燥的B端设计提供了真实感和趣味性,又保障了复杂信息情况下的识别度。并且由于玻璃光滑、透明等物理特性,也为“科技感”的视觉呈现提供了新的方向。
柔和光影+微质感材质
与C端设计中常用强烈的光影效果吸引用户不同,b端设计相对更加沉稳。对比阿里云、WPS、钉钉、腾讯云的官网首页,都不约而同地使用了非常柔和的环境光,这种光影设计,在保障整体亮度的基础上,不会产生明确的光照方向和阴影效果,并且在材质选择上,也都使用了高光、反光均不明显的漫反射材质或微质感的毛玻璃材质,整体视觉感受十分沉静和整洁。
图形在设计中扮演着两部分角色,一方面图形作为页面的装饰需要保证审美的愉悦性,另一方面图形也作为文字信息的补充,需要传达某些特定的含义。好的图形设计不仅能为整个页面的氛围添光加彩,而且能帮助用户更好的理解文字信息。
规律感的几何图形
在b端场景下,常常需要借助图形表达一些抽象的概念,例如PaaS、服务器、AI、用量、科技、流量……这类含义并不直接对应一个特定的造型,使用有规律的几何图形,似乎是一个不错的选择。这些技术概念的背后来自于二进制中0和1的组合,而将几何元素有机地排列,甚至衍生出不同的形态的过程,不是正如代码的编写吗?
简洁高效的手绘元素
在当下的B端设计领域,越来越重视情感关怀和个人用户的体验。在页面中使用具有手绘感的元素或使用直接使用手绘图案作为配图,不仅能够快速拉近品牌和用户之间的距离,塑造年轻化、有亲和力的品牌形象,也能提升用户在使用产品工作时的愉悦感。这类充满轻松感的图形比起传统的插画或3d建模更加简洁,色彩鲜明,具有很强的表现力,并且设计成本也更低,十分适合作为一些小而美的产品配图。
例如Google推出的Material design的设计语言就大量使用了抽象且配色艳丽的手绘元素作为配图,这类图案更加强调色彩并不过多细化造型,穿插在文字之间,让深色背景的页面一下活跃了起来。与此类似的还有figma的官网,设计师将软件内的部分工具比如线条、线框、锚点、指针等元素抽象出来作为插图,不仅简洁耐看,而且十分具有自身的品牌特色。
除此之外,利用手绘线条来表现hover的交互状态,圈画重要的文字信息,或是进行操作引导,也具有极高的效率。简单的箭头或者波浪线,能够非常直接地将用户的注意力指引到重要信息处,就像学生时期在书本上圈画重点一样,感受上十分自然而亲切。仿佛应用的设计者悄悄在用户耳边说了一句小tips,而不是粗暴地把信息丢到用户眼前。
无论是拟物风格时期的极致写实,还是扁平化风格时期的极简,又或是AI时代的多彩绚丽,设计风格的发展始终围绕着技术发展的主线,其发展的目标,始终围绕着如何让当前时代的用户更好更便捷地享受到技术应用带来的便利。一个好的b端设计风格,不仅能够帮助企业展现品牌心智和技术上的先进性;而且能够让个人用户更高效且愉悦地完成工作任务。在未来的B端产品设计中,我们应该始终坚持形式服务于功能和以人为本的原则,探索更适合业务场景的设计风格,为用户带来更加舒适自然的视觉体验。
以上是本期带来的B端设计趋势之个风格篇。
本文由人人都是产品经理作者【钉钉用户体验】,原创/授权 发布于人人都是产品经理,未经许可,禁止转载。
题图来自Unsplash,基于 CC0 协议。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan
在B端产品设计中,退订是用户对产品不满的直接表现,也是我们优化产品的重要信号。作为UI设计师,如何通过交互设计降低退订率,提升用户留存,是一个值得深入探讨的话题。本文将结合 DeepSeek(深度探索) 的设计理念,从用户心理和交互设计的角度,分享B端产品退订心理学的设计策略与实践。
强调通过深度探索用户行为和心理,找到问题的本质。在退订场景中,用户的行为背后往往隐藏着以下心理动因:
1)设计目标:通过数据分析,找到用户退订的高频节点,优化交互路径。
2)设计策略:
1)设计目标:通过设计手段,让用户直观感受到产品的价值。
2)设计策略:
1)设计目标:降低用户的操作成本,减少因体验不佳导致的退订。
2)设计策略:
1)设计目标:通过设计让用户感受到被重视,增强对产品的情感依赖。
2)设计策略:
以某B端 SaaS 产品为例,通过 DeepSeek+交互设计策略,退订率降低了20%。
具体优化包括:
退订是用户对产品的“最后反馈”,也是我们优化产品的重要机会。通过 DeepSeek+交互设计,我们可以深度探索用户心理,优化交互路径,强化价值感知,简化操作流程,并建立情感连接,从而有效降低退订率。希望本文的设计策略与实践能为B端产品的优化提供启发,让我们的产品更好地服务于用户,提升用户留存与满意度。
本文由 @刘萍 原创发布于人人都是产品经理。未经作者许可,禁止转载
题图来自Unsplash,基于CC0协议
该文观点仅代表作者本人,人人都是产品经理平台仅提供信息存储空间服务
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan
在数字化转型和AI技术的推动下,B端设计正在经历一场深刻的变革。本文从钉钉近10年的B端产品设计经验出发,深入探讨了2025年B端品牌物料系统设计的趋势。
回溯互联网的发展进程,从桌面端的拨号上网,到5G移动互联网,再至人工智能的助力,科技领域正在经历着翻天覆地的变革。未来的数字世界,在沉浸感、参与度、个性化等维度对体验会提出更进阶的要求;与此同时,B端企业对于高效、简便、用户友好的界面需求与日俱增。在2025年的当下,B端设计师唯有持续学习,适应新技术与新趋势,紧密围绕客户的业务价值展开设计,进一步注重实用性、包容性以及可定制化,方可为企业客户塑造出卓越的产品与服务。
因此,我们结合钉钉近10年的B端产品设计经验,鉴于未来B端设计趋势将展现出多元化、智能化和人性化的特质,从B端产品个性化、风格与质感、界面版式、品牌物料、动态、图标等多维度设计展开深度研究,与大家一道探讨B端设计的本质和趋势,期望在真正驾驭B端产品设计的这条道路上,带来些许有益的启迪。
今日,将为大家分享2025 B端品牌物料的设计趋势,深入探讨如何系统的构建和管理品牌物料体系:从精心提炼品牌战略,到积极探索客户触点创新,针对品牌物料的生产、加工和面客宣发等多元场景,聚焦于高效传递品牌一致性、强化专业信赖感、精确传递产品服务及价值,进而吸引目标客户并推动转化。
“当企业采购决策者同时收到5份方案书,你的设计怎样才能率先映入眼帘?”引用Forrester报告可知,76%的B端采购决策会受视觉专业度影响。
B端场景下,由于客户具有一些特殊性:比如决策流程漫长、涉及角色众多等,所需往往不只是产品,还涵盖配套安装、培训、维护等整体解决方案,并且更看重稳定性、信任感与长期合作价值。因而,B端产品在面向客户展示品牌服务与物料时,设计上需从品牌策略、视觉体系、场景应用、体验升级及工具支持等多个维度,传递出专业、高效、创新的形象。
随着数字化转型的影响力与日俱增,综合行业变革、技术发展以及客户需求的动态演变,在实现品牌一致性传达、提升专业信赖感以及达成目标客户转化等方面,B端品牌物料设计历经了从基础功能传达迈向多维度体验升级的不断进化:
在传统印刷时代,为我们所熟知的品牌物料核心载体包括信纸、手册、单页、展板等。
这些物料的设计呈现出高度标准化的特征:严格依照CI手册执行,该手册详尽规定了企业在各类场景下正确运用品牌元素的方式,诸如标志(Logo)、标准字体、色彩系统、宣传语等,以此确保所有对外传播信息均契合企业的形象定位与价值观。然而,这种模式也存在一些弊端,例如改版周期长、难以满足客户的定制化需求。
步入互联网时代,B端面客的品牌物料通常覆盖从线上到线下的多元场景,诸如官网、H5产品价值页、文档介绍、PPT模板、活动沙龙物料等等。不仅如此,线上产品一般还借助大量运营推广、市场传播等形式触达客户或用户。
这种方式具备诸多优势:比如制作周期短,更新迭代快,能够针对客户的不同身份与需求,实现更为定制化、精准化的服务。同时,还可通过复盘数据转化情况,持续优化和调整价值内容的呈现方式。
近年来,技术迭代日新月异,诸如Web3、AR、生成式AI等新兴技术重构了物料形态。与此同时,B端决策者的代际更替显著,越来越多年轻的企业管理者对数字叙事的接受度大幅提升。数据可视化的融入,不仅让内容更具说服力,也契合了B端客户对数据的需求。加之产品竞争同质化现象愈发凸显,当技术参数趋于相同时,视觉体验便成为影响客户选择的关键差异点。
当前,B端品牌物料设计的前沿趋势亮点纷呈:实时数据看板可与客户系统API直接相连、动态信息图表借助AE动画演示技术架构、动态数据资产化表现多样:比如阿里云以流体力学动画演绎云计算资源调度,利用粒子系统可视化AI算法运行路径;再比如AR说明书扫描设备可触发三维拆解动画,全息投影方案沙盘等,这些都为客户带来了从“单向传播”到“交互式对话”的沉浸式体验。
“在B端领域,视觉设计不是美工,而是产品价值的翻译官与商业信任的构筑者。”
我们不难察觉,B端品牌物料设计在视觉叙事逻辑上已然经历了深刻的进化:
过去
产品介绍大多局限于功能说明书层面。基于精准传递技术参数这一核心目的,形成了以“产品图 + 技术指标 + 对比表格”构成的模块化排版定式,同时采用齿轮寓意工业设备、电路板象征智能化等隐喻图形。然而,这种方式弊病明显,同质化现象极为严重,且严重缺失品牌个性。
现在
产品介绍在两方面实现了显著突破。
其一: 在叙事方式上,实现了从“我们有什么”到“你能实现什么”的理念升级;
其二: 在创新策略上,通过插画生动呈现客户现有工作流程的痛点,将枯燥的数据进行戏剧化处理,例如把“节省30%成本”转化为动态损益曲线,直观且富有冲击力。
于B端品牌物料设计的发展进程里,如何在秉持专业性的基础上,传递出饱含情感的温度,已然成为关键所在。
举例而言,当鼠标悬停(hover)在数据图表上,粒子绽放的效果瞬间呈现,为用户带来耳目一新的奇妙体验;借助材质隐喻来传达特定情感,磨砂金属质感犹如无声的语言,诉说着可靠与安心;还有别出心裁的反数字化实践:比如制作触感编码手册,让不同纸张纹理与产品特性一一呼应,磨砂纸寓意安全防护的坚实壁垒,金属箔象征尖端科技的无限探索。
与此同时,可持续物料创新层出不穷,诸多环保实践让人眼前一亮:比如采用大豆油墨印刷,让废弃手册在短短6个月内便可自然降解;电子说明书中巧妙内嵌碳足迹计算器,清晰展示环保贡献数值。像某清洁设备厂商独具匠心,其手册采用种子纸制作,客户将手册种植后,便能收获与企业LOGO形状相关的植物,为环保行动增添一抹别样的诗意。此外,展望未来生态感知期,诸如脑机接口情绪反馈设计等前沿探索,正引领着B端品牌物料设计迈向更多维的天地。
B端品牌物料作为与客户之间的沟通材料,需要兼顾品牌战略穿透力与商业场景适配性,其本质离不开以人为中心的服务和体验,不管是网页还是H5,印刷物还是空间,都大量借助“物理元素”进行可视化呈现,“有形”的体验能够加深客户对服务的记忆,强化客户感知。
接下来,我们从品牌战略层到系统层再到执行层,深入阐述如何更系统地构建B端品牌物料设计。
B端品牌物料系统设计的首要步骤,便是提炼其独特的价值观、差异化竞争优势,以及与客户建立信任的关键标识等要素。这些品牌基因的提取,应重点着眼于行业特性、技术门槛以及品牌服务定位,而非侧重于感性的情感表达。
以钉钉为例,AI时代下,我们的品牌主张聚焦于让组织和个人更敏捷、更有创造力,致力于塑造智能、简约、普惠且开放的企业形象。基于这一品牌战略,我们在设计风格(涵盖色彩、质感、版式以及传播物料等方面)、面客产品介绍,以及文案描述等多个维度,都进行了系统性的焕新升级。
B端品牌物料设计,绝非仅仅着眼于美观,更需具备策略性,以便针对不同客户场景,精准传递相应信息。
在钉钉,我们精心构建了新紫品牌物料库,无论是内部的企服人员、销售、设计师、业务PDSA等,还是外部生态服务商及其他人员,都能开放使用,实现及时共享。
例如,当线下的前线销售团队举办面对面的会销活动或客户沙龙时,为了更直观、规范地展示产品或服务,我们提供一系列契合钉钉调性的基础演示物料,包括PPT、产品介绍文档、手册、企业名片、一&五&十页纸、邀请函以及展厅氛围布置等标准模板。同时,针对各类物料,配备详细的使用说明文档和生产SOP,内容涵盖从文件下载到字体安装,从素材使用到标准输出,再从工艺制作到预算成本等各个环节。即便你是设计小白不懂设计,也能依据自身需求,迅速对接供应商,制作出精美且符合品牌调性的物料。
同时,为扩大新紫品牌物料在前线人员中的知晓度与认知度,提高物料使用频率,并确保物料使用的一致性,我们与前线团队紧密建联,定期开展线上直播培训与答疑活动。通过收集真实客户需求反馈,反哺品牌物料不断完善。
又如,当钉钉员工进行客户共创、拜访时,为保障服务专业度,提升企业品牌形象,我们会准备精美且适宜的伴手礼,并联合市场团队,输出一套完整的钉钉官方品牌介绍、钉钉集团案例介绍等物料供其使用。
值得注意的是,钉钉的生态服务商也是展现钉钉企业服务与形象的关键力量,因此,我们还为其提供统一装修建议,包括门头设计、装修风格、着装要求、解决方案手册等。
再如,在钉钉的线上场景中,钉钉官网、各业务产品H5价值页等都是客户快速了解产品的重要渠道。为提升内部人员协同效率,我们设计开发了钉钉内容运营生产平台——「叮当猫」,其中沉淀并搭建了大量关于钉钉产品功能、价值介绍、企业案例和解决方案等模板,如同精心配置的“预制菜”,使用者可直接便捷取用。
此外,在B端具体业务中,品牌物料需更具灵活性。例如,在钉钉管理套件商业化场景中,针对面客材料繁多、演示组织操作门槛高、及时迭代性差等痛点,我们打造即开即用的产品体验样板间,让客户能够快速、便捷、可视化地体验产品,加速客户决策。
最后,B端场域下,客户除了通过线下一对一或线上触达服务了解产品介绍,各类传播渠道同样是企业品牌与心智塑造的重要阵地。像大型企业发布会、产品公众号、小红书等平台,都是不容忽视的关键场景。在钉钉,我们每年定期举办大型产品升级发布会,并借助各类传播渠道持续宣传推广,不断扩大品牌影响力。
品牌物料管理在B端业务中不仅是设计规范问题,更是品牌资产运营、组织协同效能提升的系统工程。
在品牌物料投放与实际使用过程中,我们时常遭遇一些典型痛点场景,比如某会晤物料使用过期Logo、某线下展会采用过时的色彩规范、某产品价值页与白皮书技术参数不一致等。追根溯源,这些问题的核心成因在于上下游协同与一致性管理的缺失。在几十人的小型企业中,此类情况或许尚不严重,通过简单的相互“问一嘴”,便能较快达成信息对焦。然而,一旦企业规模扩张,人数达到几百、上千甚至过万,品牌物料一致性的协同管理便会变得愈发困难。因此,为更高效地解决信息不对齐、不统一的难题,建立一套标准的品牌物料管理范式用以指导物料设计与使用的准入及准出,就显得尤为必要。
在钉钉,随着智能化的全面升级,为提升品牌物料的美观度与专业度,同时提高物料调用效率、确保使用的一致性,我们与销售团队特别成立专项项目组。在企服前线代表和各业务产品代表的关键支持下,形成了 「生产部」-「加工中心」-「面客部」 的品牌物料生产、加工与调用管理机制。「生产部」的人负责做什么,再到「面客部」的人负责卖什么,而处于中间环节负责加工的人员,则如同桥梁一般,确保上下游信息传递的准确性以及品牌物料管理的一致性。比如:有人负责细化到行业或场景的demo设计,有人核心输出标杆客户案例,还有人负责输出一套完整的企业服务面客规范。做好品牌物料的一致性管理,能够极大的提升B端客户决策效率(降低认知成本),同时强化企业专业可信度。
随着行业变迁、客户需求的不断更迭以及技术的日新月异,B端品牌物料设计已悄然蜕变,从传统认知里单纯的宣传材料,逐步发展成为多维且个性化的服务与体验。当下B端品牌物料的设计趋势,聚焦于高效传递品牌一致性、强化专业信赖感,以及系统性管理好物料的生产、加工和面客宣发。从精心提炼品牌战略,到积极探索客户触点创新,每一个环节都旨在降低客户认知成本,助力企业精准传递产品服务及其价值,从而推动客户转化。
以上就是本期为大家带来的B端设计趋势之品牌物料系统设计的全部内容。后续,我们还将从动效、图标等设计趋势深入研究,期待在深耕B端产品设计的道路上,与各位携手前行,共同进步。
作者:冬然 @
本文由人人都是产品经理作者【钉钉用户体验】,原创/授权 发布于人人都是产品经理,未经许可,禁止转载。
题图来自Unsplash,基于 CC0 协议。
常见的B端卡片组件,应该怎么设计才可以达成更好的传播效果、传递更清晰、更完善的视觉体验?在本篇文章里,作者就结合具体案例,对B端卡片组件设计进行了技巧拆解,一起来看看吧,或许会对你有所启发。
B端设计的过程中,并不是所有元素抄一抄别人的,从组件库里引用下就完事了,而是要经过具体组织并设计。尤其在一些特殊的组件中,是可以去表现设计水平,提升项目整体视觉质量的,而不是让它们看起来非常的枯燥乏味。
这次,我们的改版主要就围绕在B端常见的卡片组件中,通过3个以前提交过的作业,来分享如何设计B端的卡片。
三个改版案例我们都遵循相同的设计方式和顺序:
在该案例中,卡片作为页面的核心对象,视觉重心不够突出,且内容的权重没有得到有效的表现,订单标识只有一个的情况反复强调对识别卡片没有任何帮助,且卡片占比过大,没必要的浪费页面空间。
所以,重构它的结构时,重点突出标题弱化标签,将卡片拆分成标题、信息、操作三个栏,让信息的呈现更简洁直观。
然后再具体优化内容和细节,对重要信息突出,固定的标题字段弱化。
最后,再根据主色的需要填充色彩进去即可。
这个案例也是设计得比较有问题的,但是忽略掉全局组件的粗糙,卡片部分的设计也是很多作品案例中的常见问题,要素过多,没有主次,在列表化的展示中,根本没办法很好的识别相关的内容和关注到有效的信息,会被淹没在繁复的字段内容中。
所以,我们用相同的方法作下区分,将内容分为上中下三个栏。
然后再对字段做权重的划分,虽然字段信息很多,但值得被突出的要素不多,企业名和数据是卡片中最重要的信息,一个用于识别卡片,一个用于查看核心的指标。
最后,再完成样式的补全即可,只在星级和用户职位上增加色彩。
问题和前面还是一样,内容很零碎,所有要素都强调,于是就没有重点。所以,下面对它们进行改版,这次因为数据项不再是重点,卡片的目标不是用来查看数据而是用于检索进入到下级页面的,所以只分了两栏。
然后,再对权重进行强调,查看详情是这里面最重要的元素,图片则没有太大的意义仅仅是点缀所以缩小。
最后,再完成相应色彩的添加和图片的填充,完成最终的视觉效果。
这三个改版都用了很简单的修改方式,通过理解卡片的作用、字段信息,对它进行信息分区,然后填入相关的字段并做出权重划分,最后再用颜色为不同的要素加权。
只要掌握这样的设计思路,做绝大多数卡片都不会有阻力,只会纠结于应该用哪套样式更合适。
因为时间关系只做了很简单的调整,没去做多套大跨度的样式变更,同时套进原图环境没做整体的处理,所以还有很多升级优化的空间,理解这个感觉即可。
作者:酸梅干超人;
本文由 @超人的电话亭 原创发布于人人都是产品经理,未经许可,禁止转载。
题图来自Unsplash ,基于 CC0 协议
该文观点仅代表作者本人,人人都是产品经理平台仅提供信息存储空间服务。
这些是一些创新和不同寻常的B端系统界面设计思路,可以根据具体的业务需求和用户群体的特点进行定制和调整。希望这些思路能够为您带来新的灵感和想法!
在B端产品设计中,中后台UI设计规范的建立对于提升设计效率、保证用户体验一致性以及优化开发流程至关重要。本文从设计规范的意义、原子设计理论、后台设计系统搭建以及Design Token应用实践四个方面,详细总结了B端中后台设计的要点和方法,供大家参考学习。
今天从以下4个方面,结合7年B端设计工作经验,为大家分享原子设计理论和中后台设计系统搭建的应用实践。
分别站在整个产品设计研发流程中各个角色的不同角度,在工作中可能会有以下“抱怨时刻”:
由此,体现出搭建设计规范的作用和意义:
① 产品侧
⼀个产品不同分⽀多个团队完成的时候,可以保证产品团队使⽤同⼀份设计规范快速完成产品原型设计。保证可复⽤模块的交互体验的⼀致性。
② 设计侧
通过设计规范去解决⼤部分需求,极⼤提⾼效率解放双⼿,让设计师能去做⼀些更发挥创意和想象⼒的设计。
③ 开发侧
形成开发资产,可以提升研发效率,降低维护成本。开发⼯程师⽆需再重复开发同⼀个组件,只需要去组件库⾥调⽤即可,配合业务逻辑,⾼效完成界⾯开发,做到开箱即⽤。
④ 测试侧
标准化的设计规范,是测试⼈员最喜欢看到的。例如,设计规范规定弹窗 footer 区按钮组居右,那么测试⼈员只要测到不居右,就可以给产品提优化建议了。
设计规范中具像化的环节是设计组件化,最早可以追溯到⼯业⾰命时期,福特创造的流⽔线⽣产⽅式。福特将汽⻋分解成零部件,再把零部件模块化组装,这⼀创举极⼤的提⾼了⽣产效率。
根据资料显示,T型⻋是世界第⼀款⼤量使⽤通⽤零部件,并进⾏⼤规模流⽔线装配的汽⻋。这种⽅式极⼤地提⾼了T型⻋⽣产效率,降低了⽣产成本。
1914年,福特已经可以做到93分钟⽣产⼀辆汽⻋,⽽同期其他所有汽⻋⼚商的⽣产能⼒总和也不及于此。
到了1920年代,T型⻋的价格甚⾄降到300美元⼀辆(问世之初T型⻋的售价仅需850美元,⽽同期的竞争对⼿则通常为2000-3000美元⼀辆)。
原子设计理论最初来源于化学领域,这一点从名字可以听出来。在化学中,所有的物体都是由原⼦构成,原⼦组合构成分⼦,分⼦组合构成有机物,最终形成了宇宙万物。
2013年前端⼯程师 Brad Forst将此理论运⽤在界⾯设计中,形成⼀套设计系统,包含 5 个层⾯:原⼦、分⼦、组织、模板、⻚⾯。当公司的业务产品逐渐扩⼤时,我们就需要制定⼀套完整的设计系统,提升设计和开发的协作效率,统⼀所有设计师的输出物。
总之,将设计拆分成⼀些基本元素,例如⼀个按钮、⼀个弹窗,再根据业务需求、产品逻辑重新组装,形成最终的产品,这就是原⼦设计理论(组件化设计),区别于整体设计制造的⼀种新的⼯作流程。
原⼦是物质的基础组成部分,是构成设计系统的最基础元素。
在界⾯中以「元素」的形式存在,例如:颜⾊、⽂字、图标、分割线、间距、圆⻆、阴影等。
色彩体系
中后台产品的⾊彩体系主要分为3类:品牌⾊、功能⾊、中性⾊。
B端网站体现理性和效率特性,往往会使中性色占据九成以上,应用在背景、边框、文本和分割线。下图为颜色定义示例(考虑暗色模式)。
文字体系
B端产品的⽂字系统设计⽬标:增强阅读体验、提升信息获取效率,字体是体系化界⾯设计中最基本的构成之⼀。
字体的⼤⼩、字重、⾊彩区分体现界⾯信息的层级关系。
下图为字阶应用规范示意:
阴影、圆角、线条
阴影:在B端界⾯中,有些特殊的元素会使⽤到阴影,从阴影中我们可以看出物体距离平⾯的⾼度,距离平⾯越⾼的物体阴影越⼤;
圆角:从直⻆到圆⻆给⼈带来从严谨冰冷到柔和亲切的⼼理感受,在B端界⾯ 中,常⽤2-8px圆⻆;
线条:分割模块及辅助定位。
在界⾯中,分⼦是按照规律组合起来的元素,如:按钮、搜索框、选择器等。
以按钮为例,⽂字、⾊块、图标和间距这些抽象的原⼦产⽣关联组合成分⼦:图标、⽂字传达含义;颜⾊、圆⻆传递特性;间距、尺⼨定义规范。
分⼦+原⼦组合成更复杂和可拓展的组织(区块组件),如搜索区、卡⽚列表区、表单区、数据统计区等。
由原⼦+分⼦+组织构成的更复杂更具拓展性的模块,构成了典型⻚⾯模板,如列表⻚、详情⻚、异常⻚、Dashboard等。模板在设计系统中承载的作⽤就是保证设计⽅案在原型各阶段的⼀致性,专注⻚⾯底层架构,并⾮具体⻚⾯。
带业务逻辑的场景案例,如标注场景、权限管理、详情设置等,将⻚⾯模板填充真实的⽂字、图⽚后形成⻚⾯,即带交互逻辑的⾼保真原型图,真实内容使设计系统有了“⽣命” 。
虽然通过设计规范可以对产研流程提效,但在开发还原中还是会经常遇到⼀些棘⼿的问题。
开发还原准确度难以保证,走查几轮还有有细节问题没有修复;
领导要求开发暗色模式,或者客户要求换一套主题色,找到替换的工作量巨大;
设计一处变更,涉及多个页面模块,维护工作量大。
为了解决和优化上述的问题,Design Token 应运⽽⽣。它可以解决产品设计和开发过程中的细节、变更和⻛格⼀致性的问题,有效提⾼产研团队设计质量和协作效率。
“Token”原本的意思是“令牌,指令”,与 Design 连在⼀起指“设计变量”。在⼯程逻辑中⽤于⽤户身份与服务器端进⾏验证,⽽在设计体系中,Design Token 则可以简单理解为封装的视觉样式参数。它通过规定样式参数,并通过⼀套符合设计师、⼯程师理解的统⼀的命名规则,为这些样式参数的定义名称。
Design Token优势
设计语义更易理解:帮助设计师和开发建⽴统⼀语⾔,设计⽅案更加⼀致。从下到上的Design Token命名思路。
主题⽪肤⼀键替换:主题⽪肤的替换可以⽤在两个维度,⼀是浅⾊模式和暗⾊模式的替换,⼆是不同品牌⾊之间的替换。我们可以将不同主题的同⼀个场景下的颜⾊使⽤同⼀个 Token 命名,达到⼀键换肤的效果适配不同客户⽅案。
设计变更⾼效维护:替代传统⼯作流⼀键替换效果。例如修改二级文本的颜色,传统工作流需要先修改设计规范,修改设计稿,然后输出给开发,开发逐一更新代码,完成后提交给设计师进行走查验收。而当使用Token之后,只需要更新Token参数,就可以直接导出JSON给开发,一键自动更新。提高效率不止一点点。
设计效果精准还原:代码编辑器⾃动化提示颜⾊选择,如不正确则产⽣报错。
总结一下使用Token开发的优势:
第一步:提炼token元素;
第二步:定义命名规则;
第三步:整理Design Token资产表;
第四步:开发与应用。
接下来具体说说如何为Design Token命名,命名方式目前并没有绝对统一的要求,不过有一定的逻辑规则,可以由设计师找前端开发一起商量出一个都能通俗易懂便于理解的命名规则,
举个例子:
1.Token名称由大到小排序,中间用“-”分隔;
2.Token前缀可自定义添加公司简称,如“–el-xx” 、“–ant-xx”、“–td-xx”。
为了更好的统一规范,应用Token,建议成熟的互联网公司设计团队搭建自己的低代码平台。一键更换主题,尽在指尖。
以上就是从四个方面归纳的B端设计规范定义和总结,希望对你有所帮助!
本文由人人都是产品经理作者【Clippp】,原创/授权 发布于人人都是产品经理,未经许可,禁止转载。
题图来自Unsplash,基于 CC0 协议。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan
在数字化时代,B端产品的用户体验设计正变得愈发重要。动效设计作为提升交互体验和效率的关键手段,正在成为B端设计中不可或缺的一部分。本文将深入探讨2025年B端设计中动效的趋势,从动效的历史演变、物理世界中的灵感汲取,到钉钉设计系统中的实践应用,帮助我们理解动效如何从简单的视觉装饰转变为提升产品效率和用户体验的核心工具。
回溯互联网的发展进程,从桌面端的拨号上网,到5G移动互联网,再至人工智能的助力,科技领域正在经历着翻天覆地的变革。
未来的数字世界,在沉浸感、参与度、个性化等维度对体验会提出更进阶的要求;与此同时,B端企业对于高效、简便、用户友好的界面需求与日俱增。
在2025年的当下,B端设计师唯有持续学习,适应新技术与新趋势,紧密围绕客户的业务价值展开设计,进一步注重实用性、包容性以及可定制化,方可为企业客户塑造出卓越的产品与服务。
因此,我们结合钉钉近10年的B端产品设计经验,鉴于未来B端设计趋势将展现出多元化、智能化和人性化的特质,从B端产品个性化、风格与质感、界面版式、品牌物料、图标、动态交互等多维度设计展开深度研究,与大家一道探讨B端设计的本质和趋势,期望在真正驾驭B端产品设计的这条道路上,带来些许有益的启迪。对交互等多维度设计展开深度研究,与大家一道探讨B端设计的本质和趋势,期望在真正驾驭B端产品设计的这条道路上,带来些许有益的启迪。
今天要和大家聊聊 B 端产品的动效设计趋势。我们将回顾动效的发展轨迹,从历史演变到设计哲学,探索如何从物理世界汲取灵感,并分享钉钉在动效设计中的思考与实践。
动效设计在互联网的发展历程中经历了多次变革。从最初简单的过渡动画,到如今复杂而精细的交互体验,动效的演进不仅是技术发展的产物,也映射了用户体验设计理念的不断深化。
在互联网的早期,受限于带宽和硬件性能,动效的应用较为基础,主要用于加载进度条和页面过渡,核心目的是向用户提供反馈,减少操作过程中的不确定性。典型案例是 Windows 98 时代的加载进度条和网页上的缓冲动画。这些动效虽然简单,却在当时发挥了重要作用——帮助用户理解系统状态,降低等待焦虑。
进入 2000 年代中期,Flash 技术的普及让网页动画迎来了黄金时代。Flash 赋予了设计师更大的自由度,使得网页可以呈现更丰富的动态效果,动效不再局限于状态反馈,而开始深度参与交互体验。这一时期,动效的作用从提示系统状态进化为增强用户沉浸感,例如按钮悬停时的动态反馈,炫酷的页面切换过渡,以及交互式动画(如鼠标跟随效果、小游戏动画等)。
不过,Flash 的动效过度依赖插件,影响性能,并且在移动端难以兼容。2010 年代,随着 HTML5 和 CSS3 的发展,Flash 逐渐被取代,动效设计进入新阶段。
随着移动互联网兴起,尤其是 Material Design,iOS,以及 Fluent Design 等动效规范的推出,动效设计进入了全新的阶段。这个阶段的核心理念是基于物理规律的自然动效,强调动效不仅仅是装饰,而是信息层级传递、引导用户操作的重要工具。
Material Design:强调物理隐喻与流畅性
Fluent Design:深度融合光影与层次感
由此可见,动效不再只是视觉上的炫技,而是成为提升可用性、降低认知负荷的重要工具。合理的动效可以提升用户的操作流畅度,让界面变得更自然、更具生命力。
在自然界里,每一次风吹树叶的摆动、每一滴水滴入湖面的扩散,都遵循着物理规律,展现出流畅且和谐的运动轨迹。这些自然现象不仅带来视觉上的愉悦,也蕴含着深层次的运动逻辑,为数字动效设计提供了源源不断的灵感。动效的流畅性、节奏感、反馈感,本质上都是对物理世界美学的映射。
例如,波纹扩散是我们常见的自然现象。当一颗石子落入湖面,波纹自中心向外扩散,起初迅速,随后逐渐放缓,最终消失。这个过程中的渐进减速特性为数字动效设计提供了极佳的灵感。在数字界面中,我们可以通过缓慢扩散的动画来模拟水面波纹的效果,形成一种温和的反馈感。
再比如,现实世界中的物体在运动时通常会表现出加速与减速的特性。以地球上的自由落体为例,物体从高空下落时,初始速度较慢,但随着重力作用,它不断加速。这种非匀速运动,在动效设计中被转化为缓动曲线(Easing Curves),使得用户在界面交互时感受到更加自然的动态变化。
而弹跳和反弹又是另一个物理世界中常见的运动方式。想象一颗篮球从地面反弹起来,起初速度快,随后逐渐放缓,最终停止。这种逐渐衰减的回弹,正是弹性动效的灵感来源。在界面交互中,弹性动效可以模拟物体的重量和材质,提升操作的真实感。
当牛顿凝视落下的苹果,他发现了万有引力的奥秘;而当钉钉的设计团队观察一张任务卡片的拖拽轨迹时,我们探寻的是数字世界的运动法则。在物理规律与交互逻辑的交汇处,钉钉的动效设计体系逐渐凝练出一套方法论——让每个像素的运动既符合自然规律,又服务于生产效率。
在 B 端产品中,动效远不止是视觉与交互的简单结合,更是提升可用性和降低认知成本的关键手段。它不仅承担着引导用户操作、传递信息层级、降低认知负荷的功能,还通过增强操作确定性,帮助用户更高效地完成任务。换句话说,我们正以理性与直觉,重塑效率美学。
钉钉的设计框架始终围绕视觉感官和用户体验两个核心维度展开,追崇理性与感性的精密协作:
1. 视觉感官:流畅
2. 用户体验:高效
企业级应用中,物体的运动时间需要把控得恰到好处。研究表明,人类对 100ms 以下的变化几乎无感,而超过 1s 的等待则会让用户产生不耐烦的情绪。因此,钉钉的动效体系严格遵循以下节奏,通过顺应人类大脑的认知规律,确保每一次动效都恰到好处,带来舒适的体验:
现实世界中的物体运动受到重力、摩擦力等因素影响,呈现加速与减速的动态变化。钉钉的动效体系也采用缓动曲线(Easing),以模拟真实世界的运动节奏。当数字界面挣脱线性匀速的机械感,便拥有了令人愉悦的「生命感」。
在二维屏幕上构建三维认知,需要更精密的「空间修辞学」。钉钉的动效体系确保每一次位移都符合用户的直觉,并运用空间层次感,让信息更易理解。
1. 同级物体
2. 从属物体
3. 三维空间
在动效设计中,无障碍性不仅关乎技术标准,更关乎用户的体验公平性。一个包容的设计体系,应该让所有用户——无论其身体或认知能力如何——都能平等地理解和使用产品。无障碍动效的核心,在于减少干扰、提供替代方案,并赋予用户选择权,确保每一次交互都是安全、友好的。
避免诱发健康问题:高频闪烁或快速变化的动画可能诱发光敏性癫痫等健康问题。因此,在设计时,我们应避免超过3次/秒的快速闪烁,并尽可能减少过度刺激性的动效
提供替代方案:对于依赖屏幕阅读器的用户,纯视觉动效可能难以感知。我们可以为动效添加文本描述或提供静态替代方案,确保所有用户都能理解动效传达的信息。例如,在钉钉 AI 助理中的加载场景,我们提供「正在为你生成…」的文本标签,方便屏幕阅读器用户理解当前状态
动效设计已成为现代数字产品中不可或缺的组成部分。从简单的过渡动画到如今富有交互感和情感触动的设计,动效已经不再是单纯的视觉装饰,而是推动产品发展、提升用户体验的关键力量。
真正的好动效,是那种用户几乎察觉不到的流畅交互,它能够让信息传递变得高效、让操作更加顺畅,同时也让数字产品展现出温暖的人文气息。动效,作为产品与用户之间的一座桥梁,它不仅是界面的点缀,更是效率与体验的催化剂。
未来,钉钉将继续探索动效设计的创新与实践,通过优化交互体验、提升产品效率,不断赋能用户、创造更美好的数字世界。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan
我们需要了解一下设计模式,例如它是什么、什么时候用、怎么使用,可以让我们在没有参考的情况下,也能设计出合理、好用的界面。
把不同的内容模块,放到一组顺序排列的面板中,这些面板每一个都可以折叠、可以展开,互不干扰。
你需要在页面上显示大量各种各样的内容,可能包括文本、列表、按钮、表单控件等,而你又没法把它们都显示在页面上。
1、用户可能一次只需要查看一个模块的内容。有些模块比别的模块更长或更短,不过它们的宽度一样。
2、这些模块组成了一个工具箱,或者两级菜单,或者包括一些交互式元素的某种结构,这些模块的内容要么彼此相关,要么彼此类似。
3、要注意的是,当一个大模块打开或者打开了很多个模块的时候,模块底部的标签可能会滚动到屏幕或窗口的外面。如果这一点对用户来说有问题,那就要考虑一下其他的解决方案。
竖向排列这些模块,并使用对于用户来说有意义的排列顺序。
例如:QUICK BI 右侧折叠面板,顺序是从大到小,从外到内。
为每个模块选择一个简短而富描述性的标题,并把这个标题放到一个横条上,让用户可以单击它来打开或关闭这个模块。
也可以用一个可以变换方向的三角形图标来提示打开/关闭的操作:关闭的时候向右或向下,打开的时候向上。
一次允许打开多个模块。
人们在这个问题上有一些不同的看法,有的人喜欢一次只能打开一个模块。不过根据经验,特别是在各种应用里,一次允许打开多个模块更合适。这样可以避免一个之前打开的模块突然消失,这样会让用户觉得很粗鲁,也很意外:“喂, 那个菜单哪里去了?之前就在这里的!
当用户在登录状态时,折叠面板应该在多个操作期间,保持它们各自模块的打开和关闭状态,这点很重要。
如果模块内容需要进一步拆分,折叠面板还可以级联使用,不过这样看起来会有点混乱。 因此只用一个一级折叠面板模块更合适,如果有必要可以采用其他结构代替,比如tab页。
把页面上的内容组合到几个不同的区块里,每一个都可以独立打开或关闭。可以随意在界面上放置这些区块,用户还可以移动它们,形成自己定义的布局。
你正在设计一个桌面应用(例如:钉钉、飞书)或者一个网页应用(例如:纷享销客、ONES),应用中会涉及看板、工作台、仪表盘、数据分析等页面,你希望用户对这些页面有一定的控制权。 这些页面应该是应用中的主页面、是用户会经常查看的页面。
在这个页面上,需要显示大量各种各样的内容,可能包括文本、列表、按钮、表单控件、图表等,而你又没法把它们都显示在一个模块上。
1、用户想同时查看好几个模块。
2、不同的模块对每个用户来说,有着不一样的价值。例如,有些人想看到A、B、C这三个模块,而另外一些人可能想看到的是D、E、F。 3、在空间大小方面,各个模块差异可能比较大。例如,用户希望把信息少的模块缩小。
4、模块在界面上的位置对用户来说很重要。例如,重要的内容用户希望放在前面。
5、有时候模块数量比较多,用户不希望全部展示出来。例如:用户汇报工作时不需要这个模块,可以把它先移除,汇报完后,再添加回来。
6、控制这些模块的功能可能是一个工具条,或其他交互式结构的组成部分。
因为不同的用户关注点也不同,他们希望能自己选择想看的内容。 可以把需要的内容放到显眼的位置,把不需要的东西隐藏起来。同时,他们还可以利用“空间记忆”来记住不同的内容在什么位置。
空间记忆:当人们需要使用某个东西时,经常是通过回忆它们的位置来寻找它们,而不是它们的名字。 例如:你因为有事外出,需要同事打开你的电脑帮你发一份文件,通常你也说一句文件好像再桌面的右边,这也是利用了空间记忆帮助快速寻找。很多软件把对话框的按钮(确定、取消)放在右下方,有一部分原因也是考虑到用户的空间记忆依赖性。
总结:使用可移动的面板可以让用户的工作效率更高,工作更舒服。
为每个模块提供名称、标题栏和默认尺寸,并为它们提供合理的默认设置。 让用户按自己的喜好在页面上移动这些模块,如果可能的话,可以提供拖曳功能。
让每个模块可以通过简单的操作进行编辑和隐藏,也可以考虑让用户可以彻底移走这些模块,在标题栏上放一个关闭按钮就可以。
可移动面板要清晰的体现编辑与预览状态,如果用户误操作打乱模块顺序,需要提供一个“恢复默认设置”的按钮。
把次要内容和可选内容放到用户能自己打开、收起的面板里。
你需要在页面上显示大量各种各样的内容,可能包括文本、列表、按钮、表单控件等,而你又没法把它们都显示在页面上。 同时,还可能有一些适用中央舞台模式的内容需要在视觉上优先处理,需要把面板收起。
1、这些模块为界面上的主要内容提供注释、修改、说明或支持。(例如:WPS右边的快捷键、样式、帮助、资源)
2、这些模块可能不是很重要,不需要默认展开。
3、对不同的用户来说,它们的价值并不一样。(例如:图中新手入门指导,老用户可能并不需要)
4、甚至对同一个用户来说,这些模块可能有时候非常有用,换个时间就不一定了。当 它们收起的时候,这些空间最好留给界面上的主要内容。
5、这些模块之间可能彼此没有多大关系。当用到Tab和折叠面板时,这两个模式会把各个模块组合到一起,表示它们之间有一些关联,而可收起面板不会对内容进行分组。
把无关紧要的内容隐藏起来可以让界面变得简洁。
当用户选择隐藏某个模块时,只要简单地收起这个模块就可以了。 它所占用的空间也会还给主要内容。
这也是渐进式展开原则的一个例子—只在用户需要的时候,需要的地方立即显示那些隐藏的内容。
总的来说,想让界面保持整洁,通过对内容进行分组和隐藏是非常有效方式。而可收起面板、Tab、折叠面板、可移动面板,这4种模式正是有效方式的工具。 如何使用
把内容放到一个单独的面板里,让用户可以用一次单击来打开或关闭这些面板。 可以利用引导性的文字来表示这里可以展开(例如:更多),也可以利用三角形的图标来表示这里可以展开。
当用户关闭这个面板时,把它所占用的空间收起来,用来显示主要内容。
也可以在打开和关闭这些面板的时候加上动画效果,这样会让打开和关闭时的过渡更加平滑。
如果有多个模块要用这种方式来隐藏,可以把这些模块放在一起,或者用Tab、折叠面板来组织,还可以把它们分开放在主界面上。
如果发现大部分用户都打开了一个默认为关闭状态的可收起面板,那么应该让它默认打开。
谢谢大家观看!
我与ICON的设计好像有什么不结之缘。早在2017年我就写过一篇如果对抗APP中ICON设计同质话的问题。提出了自己的一些建议。而在之后的工作中也多次改版或设计过成套的APP应用中心的ICON和系统后台ICON库。ICON设计的经验那是不得不丰富的存在。
ICON,中文翻译为图标。是对象的图像表示,指用图形指代某些名词,如:打开、警告、爱、学校、山等。ICON,是上世纪九十年代伴随IT 产业出现的一个技术词汇,原指计算机软件编程中为使人机界面更加易于操作和人性化而设计出的标识特定功能的图形标志。
下面是我总结了这几年设计icon的经验结合大厂的后台规范。给新手设计师的一些建议,都是经验之谈希望能够帮到你。可以让你在设计的这条路上走的越来越轻松。
那位美女设计师:啊!搞什么呀,B端设计师icon还有设计,你傻不傻呀。我给你分享几个现成的icon网站吧下载了就能用。
我:是的我也用现成的icon在很多的需求里。但是我更喜欢自己设计,自己去做。直接用现成的icon不爽吗。嗯当然爽呀。看是你要要知道做的更好的方法和可能性。不要总把自己当美工吧,我们可以是设计师的。
做为什么师我们大概都应该知道icon作为我们界面的重要构成元素,它会在很大程度上影响我们界面的风格。甚至会影响我们品牌的调性。所以一套符合我们设计风格具有我们品牌调性的icon是很有必要的。总之你想明白一个道理,你一整个屋子都装修好了,房间里独独到处都放了几把破椅子。不难受吗。
Ant design设计规范:图标是 UI 设计中必不可少的组成。通常我们理解图标设计的含义,是将某个概念转换成清晰易读的图形,从而降低用户的理解成本,提升界面的美观度。在我们的企业级应用设计范围中,图标在界面设计的诸多元素中往往只占了很小的比重,在调用时也会被缩到比设计稿小很多倍的尺寸,加上在图形素材极度丰富并且便于获取的今天,在产品设计体系中实现一套美观、一致、易用、便于延展的图标体系往往会被不小心忽略掉。Ant Design 相信一整套优质的图标对于设计质量的影响是非常巨大的,这考验着设计师的协作能力,以及对图形塑造的系统性思维,同时也能反映一个团队对于细节的追求。
中后台使用的icon大部分规范平台也好或者一有系统也好他们的设计原则基本是大同小异的。我的建议是如果你要设计一整套的icon图标。在设计之前确定自己icon的设计原则。这个设计原则可以依照自己的界面设计风格或期望的界面设计风格以及行业属性、自己品牌等去制定。
Ant Design 的图标设计原则源自「确定」和「自然」,落实到图标设计领域,一共有四个。准确、简单、节奏、愉悦。
设计造型准确的图标(保持偶数原则,去小数点);选择表意准确的图标,不对用户的认知造成困扰。
在表意清晰准确的基础上,尽量保持图形的简洁,不做多余的修饰。
挖掘构图中的秩序之美。
赋予适度的情感。在部分图标设计中,会适度的注入拟人化的元素,令图标具备生命力。
Icon 作为 UI 构成中重要的元素,它一定程度上影响整体 UI 界面呈现出的风格,TDesign 初期提供一套适用于中后台场景的线性 Icon,以普适、通用的标准进行设计,风格契合默认 TDesign 的风格,线性、圆角。在TDesingv中设计原则为、从简、精确、适度
制作时保证参数的简化,尽量消除小数点以及非整数的角度。处理线条以及轮廓时删除多余的锚点,输出时应避免出现不必要的装饰,保持图标的简洁。
在设计时避免使用那些含义模糊的图形,当同个事物存在多个图形表述时,应选取最为流通的样式,必要时进行针对性的强化。在图标输出时也应遵守命名规范,精确的文字描述便于他人查找。
单个图标作为一个独立的视觉个体,在线条的疏密以及图形的搭配上要呈现适度感。在处理一些必要的高密度图标时也要考虑线条的节奏感,让其舒适不压迫。系列图标要遵守适度原则,将变化控制在一定范围内。
发现没大厂规范为了普世所以他们的图标设计原则定的基本都是一样的。只是换了一个词而已。而且他们的大部分原则和细节都是来自平面设计里的板式设计和标志设计里的形式美法则。
设计一套优秀的图标设计应该简洁明了、直观性强、独特性好、可识别度高、适应性广、细节处理精细、可扩展性强,并且能够根据用户反馈及时改进和优化。如果要具备这些特征,那我们在设计的时候就要遵循一些特定的规范。
icon设计的栅格在大场的设计规范里面分为两种。一种ant design设计规范里面的那种栅格。另一种是TDesign设计规范里面的栅格。我之前在做的时候是直接呀的阿里巴巴示例图库的上传模板里面的栅格进行设计的不过。没有这设计规范里面的栅格好用。
Ant Design 的系统图标都是按照 1024 x 1024 的画板进行制作的。
出血位: 在图标的设计过程中预留出血位的做法,可以预防某些造型的图标在具体应用时出现边缘被切掉的风险;同时在设计过程中,也为设计师把握图标间平衡留下了进退的余地。新版的设计规格在图形的外围预留了 64px 的出血位,多数的图标在设计中我们都不建议超过这个区域。
栅格作为图表绘制的底层结构,是一切属性设计的基础。线条的长短粗细、图标的大小比例等关键因素均在其基础上制定。图标常见尺寸为16*16;20*20;24*24;32*32这四种输出尺寸。这些尺寸均可以清晰的显示在常规的显示器上。TDesign 最终选择以16*16px 的尺寸作为图标绘制的统一栅格尺寸
我记得最早入行的时候画icon就用的这种栅格。但是我不太喜欢,因为在实际的设计之中会出现好多问题。当时的我是无法解决的。
面对各式各样的icon我们在上一步有了栅格,接下来就要处理在栅格里如何让形状不同的icon在视觉上大小是一致的,在视觉上是平衡的。所以转对不同形状的icon在栅格里所占的轮廓规范就产生了。基本这个轮廓都是一样的。因为他是一个很基础的东西。
但其实可能是我技术的问题。在过往的很多次设计中如果你完全按照这个轮廓去执行。做出来的icon你会发现其实在视觉上还是会存在问题的,我都会在做一次优化。不过这很大可能是我技术和设计能力的问题吧。
即使有了规范,栅格轮廓等。但是往往我们在设计制作的时候还是会有很多的细节需要去处理的。这样我们的设计才会更专业。因为我用ant 规范比比较多所以。我们就一起看一下ant的规范里对icon设计细节的一些建议。
在ant的图标设计规范中,对icon图标进行了、形式感、韵律、平衡、辨识这几方面对我们在设计和制作icon可能遇到的问题给了一些建议。
Ant Design图标设计建议详情:https://ant-design.antgroup.com/docs/spec/icon-cn#%E8%BD%AE%E5%BB%93%E7%BA%BF%E4%B8%8E%E6%A8%A1%E7%89%88
以上的内容主要在探讨一类icon图标的设计。那就是中后台的图标设计。但其实icon图标是有很多的分类的。交互性图标、装饰性图标、说明性图标
这类图标主要用于应用程序的界面设计,它们可以向用户传递某种信息,引导用户执行特定操作,同时也允许用户向程序传递控制信息。例如,登陆注册按钮、开关按钮、数量按钮、点赞、转发分享等都属于交互性图标。
这类图标主要用于提高页面设计性,它们可以加深个性化设计风格,提升用户线上体验感,迎合受众群的偏好,提升设计亲和度。例如,符合节日需求的线上活动呼应图标、个性化图标等都属于装饰性图标。
这类图标主要用于阐明信息,它们是区分不同功能或内容的视觉标记,简单地说,就是对功能的解释说明。例如,象形图标、隐喻图标、工具图标和混合图标等。
此外,根据图标的具体功能和用途,还可以将图标分为表意图标(又称解释性图标)和标识性图标。表意图标是通过原本不存在实物的符号表达某些特定的含义或操作行为,这些符号逐渐继承了一些象形符号的特性并不断演化。例如,“箭头”已经从最初的“弓箭”衍生为一种特定的表意符号。而标识性图标主要用于标识品牌、产品或服务,它们通常具有独特的设计风格和视觉效果,以便在市场上脱颖而出。例如,苹果公司的苹果图标就属于标识性图标。
为我以往的设计经验里大部分都是在做B端的设计和交互工作。在我的理解里图标就分两类。1、规规矩矩的ICON。2、花里胡哨的ICON。就这么简单。
再优秀的理论也只能是理论。实践才是检验真理的唯一标准。这不是我说的。这是老马(卡尔·海因里希·马克思)说的。所以就请大家进入我的实践过程吧。
需要还是要从最初开始讲。我负责的SAAS平台要迭代换框架。然后对界面视觉交互、产品功能都迭代一个大的版本。这次设计部分的任务就我来负责。
因为是大的迭代嘛。所以这次icon设计的需求是跟着整个平台一起走的。你要设计新的视觉还用之前的那套老icon显示是不合适的。在者说那套icon的质量也是一个难以想象的存在。是开发直接从网上个个平台找的。所以这次这个平台的视觉迭代就有了搞一套适合我们界面和行业的icon图标。
这是我们SaaS平台的设计价值观
因为是先有了界面,要做一套配合界面的菜单icon图标。我想我们的icon要符合整体页面的风格。不说给界面加分了,也不破坏我辛苦做的界面视觉。
结合我们品牌的logo图标的特点。让我们的icon也拥有独属于他们自己的丝带偶。把公司logo的设计特点加入到我们这次icon的设计原则里。
是的优美,是我们这一套icon的特点。也是从我们logo里提取出来的设计要点。然后把他运用到icon设计里。
规范的知道基本是使用的阿里巴巴矢量图库早期的那个上传图标模板的AI文件。为什么会选择使用这个呢。因为我们SaaS平台的所以icon都是从阿里巴巴矢量图库引用的。我要把我做的icon上传到阿里巴巴矢量图片他们使用,而不是直接切图给他们用。
在这套图标设计的时候,其实并没有完全的按照大厂的设计规范进行。在很多的细节上做了调整。为的是达到更好的效果。当然。也有很多遗憾。在很多的方面并不是很标准。在下次优化设计时,会更好的去执行制定的设计原则和设计规范。
之所以写这部分内容,是因为我觉得在平面设计里标志设计的知识对我们现在图标设计是很有用的。可以是图标设计本身就是适应了显示屏后的标志设计。如果你搞懂了标志设计的系统知识,那图标设计不就是手拿把掐的事了。标志设计就是杀鸡的牛刀。
一般我们说到标识设计可能大概览的就是会认为是品牌形象设计,也就是LOGO设计。是的我大学学的标志设计就是在讲品牌LOGO的设计。但我现在理解的标志设计可能意义更广泛。因为在很多的时候我是把标志设计的知识和原理来应用到其他的设计方面。
标志是品牌形象核心部分(英文俗称为:logo),是表明事物特征的识别符号。它以单纯、显著、易识别的形象、图形或文字符号为直观语言,除表示什么,代替什么之外,还具有表达意义、情感和指令行动等作用。
LOGO、标志、徽标、商标是现代经济的产物,它不同于古代的印记,现代标志承载着企业的无形资产,是企业综合信息传递的媒介。
标志的来历,可以追溯到上古时代的"图腾"。最初人们将图腾刻在居住的洞穴和劳动工具上,后来就作为战争和祭祀的标志,成为族旗、族徽。国家产生以后,又演变成国旗、国徽。
古代人们在生产劳动和社会生活中,为方便联系、标示意义、区别事物的种类特征和归属,不断创造和广泛使用各种类型的标记,如路标、村标、碑碣、印信纹章等。
到本世纪,公共标志、国际化标志开始在世界普及。随着社会经济、政治、科技、文化的飞跃发展,21世纪以来经过精心设计从而具有高度实用性和艺术性的标志,已被广泛应用于社会一切领域,对人类社会性的发展与进步发挥着巨大作用和影响。
随着“读图”时代的到来,标志以简洁、 独特、易识别的图形符号传达着特定的含 义和综合信息,成为人们相互交流和传递 信息、沟通情感、表达愿望的视觉语言。 特别是在注重品牌效能与品质的今天,标 志发挥着重要的作用。 标志最主要的功能是以其简洁、醒目、 美观的图形符号传递信息。
标志能够表述某种组织、某项活动或某 企业品牌的性质、服务和宗旨。标志作为一种视觉识别符号,能有效 区别各种品牌给消费者的印象。也就是说, 它能够表述出个性特点,使其从众多同类 产品的标志中被区别出来。
市场上的商品花色、品种繁多。在商品的海洋里,消费者只能根据不同的 标志区别同类商品的不同品牌和不同生产厂家,并以此进行比较与选择。商业企业在经营商品时,有的 也用自己的标志表示各自的经营特色。标志的这种作用是其取得法律保护的主要依据,在国际贸易中, 这种作用也得到了普遍的认可。
标志是现代经济的产物,它不同于古代的印记。现代标志承载着企业的无形资产,是企业综合信息 传递的媒介。对于企业而言,不仅要表明“我是谁”,还要说明“我怎么样”。标志通过在不同场合、 不同载体的反复出现,使人们在看到标志的同时,就能自然联想到产品
可口可乐欧洲太平洋集团公司前总裁乔戈斯曾经说:“可口可乐成功的原因很简单,许多制造商只 热衷于为消费者提供产品,而大多数消费者则需要产品的牌子。请记住,一听可口可乐不只是饮料,它 还是一个朋友。
如今的社会,享用名牌似乎成为身份的象征、地位的体现和个人魅力的表现,这就使标志有了某种 精神的力量,这种精神力量代表着品牌的价值。
名牌价值是无形资产,无形资产的价值远远高于企业的有形资产价值和年销售额。“可口可乐”“百 事可乐”的品牌价值都达到上百亿美元。标志在各个国家都受到法律的保护,从这个意义上说,名牌标 志是企业的无价之宝,丝毫也不为过。
美国可口可乐公司的一位经理说,即使可口可乐工厂一夜之间被毁坏殆尽,公司也能凭借“可口可乐” 标志的声誉从银行立即贷款重建工厂。可见,对拥有名牌标志的企业来说,标志就是企业发展的一种依 托与保证,是一笔巨大的无形资产。
标志作为企业和产品形象的象征,它用无声的具有美感的图形语言宣传着产品的质量与特色。标志 设计的好坏直接影响企业和产品的信誉度。成功的标志不仅代表了产品本身,也增强了产品的魅力。
著名的香奈儿(CHANEL)的标志以简约明快的图形和相得益彰的字体搭配给人以典雅、高贵之感。 香奈儿于 1913 年由创始人加布里埃·可可·香奈儿(Gabrielle Chanel)在法国巴黎创立,其标志是由两 个背向的“C”重叠而成,图形平衡对称,充满温文尔雅、端庄聪慧之气,
标志的本质是信息传播,这是现代的 标志设计的核心。标志的设计创意应该从 信息入手,从功能需要出发。需要告诉大家的是什么,而不是把形式作 为设计的唯一出发点。
在标志设计中,有的人喜欢造型简单的,这得到了大部分人的认可;而有的人则认为在简单中可适 当复杂,这要取决于实际的用途。不论简单或复杂,需要把握一点:标志需要具备的特质是独特。没有 哪个企业甘愿平凡,大多数企业都在竭尽所能地建立自己独特的企业文化和市场经营特色,所以在设计 标志时必须深思熟虑。
独特性是标志设计的最基本要求。标志的形式法则和特殊性就是具备各自独特的个性,不允许丝毫 的雷同。这就要求标志的设计必须做到独特、别致,追求创造与众不同的视觉感受,给人留下深刻的印象。
醒目的设计是所有标志希望达到的视觉效果。优秀的标志能够吸引人,给人以较强的视觉冲击力。 因为只有引起人的注意,才能使标志所要传达的信息对人产生影响。在标志设计中,注重对比、强调视 觉形象的鲜明与生动,这是产生醒目性的重要形式要素。
标志要易于识别、记忆和传播。这并不是说简单化,而是指以少胜多、立意深刻、形象明显、雅俗共赏。 通俗性强的标志具有公众认同面大、亲切感强等特点。对于商标而言,一个易记的商标形象首先要有一个与众不同的响亮、动听的商标名称,以好的商标名称为基础,综合考虑商标的特点,选择最佳方案, 再进行具体的图形设计。
标志色彩的配置一般有三种基本方法;
-是原色配合
原色的颜色单纯、强烈、鲜艳夺目,艺术效果和传播效果显著。
-是同类色配合
只选择一种颜色,采用依靠色彩明亮度变化的办法,如用桔红、桔黄、中黄、浅黄进行搭配,形成由浅入深的过度色视觉,能表达出动态感。
-是补色配合
这种色彩配置,对比鲜明,图形格外醒目鲜艳,能给人以很强的视觉冲击效果。
标志设计也是艺术设计的一种。所以他也同样适用于我们设计里的形式美法则。用这些法则去设计你的标志或ICON让他们的信息传递更准确。视觉表现更优秀。
形式美法则
标志设计是一种视觉艺术,人们在观看一个标志图形的同时、也是一种审美的过程。在审美过程中,人们把视觉所感受的图形,用社会所公认的相对客观的标准进行评价、分析和比较,引起美感冲动。
任何一个完美的标志图形必须具有统一性,这种统一性越单纯,越有美感。但只有统一而无变化,则不能使人感到有趣味、美感也不能持久,这是因为缺少刺激的缘,变化是刺激的源泉,有唤起兴趣的作用,但变化也要有规律,无规律的变化,然起混乱和繁杂。因此变化必须在统一中产生。
均衡是在不对称中求平稳。均衡可分为调和均衡和对比均衡两大类,调和均衡是指同形等量,即在中轴线两面所配列的图形的形状、大小、分量相等或相同。除图案造型的均衡外,还有量的均衡、色的均衡,在标志图形设计时必须相应考虑,以追求标志视觉张力。
节奏是韵律的条件,韵律是节奏的深化,节奏也就是“律”,这种律不仅表现在音乐上,而且反映在其他方面,当物体失去均衡则会引起运动。此种运动如有规律,则称之为“律”。在标志图形设计中,如果将线的长短、粗细、曲直、方位等进行不同程度的变化和巧妙组合,便会创造出不同感的“律”的形式,归纳起来分为:循环体、反复体及连续体。
在标志设计中,对比与调和应用极广,如在大小、方向、虚实、高低、宽窄、长短、凹凸、曲直、多少、厚薄、动静以及奇数与偶数的对比。对比是标志图形取得视觉特征的途径,调和是标志完整统一的保证。
任何一个完美的图形都必须具备协调的比例尺度。在标志图形中常用的比率有整数比、相加级数比、相差级数比、等比级数比、黄金比等。标志设计的形式美法则,不能孤立和片面地理解,因为一个美图形的设计,往往要综合利用多种法则来表现。这些法则是相互依赖,相互渗透,相互穿插、互相重叠、相互促进的,随着时代的变化,审美标准、设计手法也在不断发展。
近年来,标志设计发展越来越成瘦。总的发展趋势是由复杂到简约、具象到抽象、色彩更多样话、标志的发展是一个设计相互交融、设计风格的多样化过程。设计手段是次要的,目的才是第一位的。更注重的应使其商业性。
以下标志设计趋势内容引用自标志情报局编译的作者为Bill Gardner是logolounge.com的创始人的《2023标志设计趋势报告》。https://www.logonews.cn/logo-design-trends-for-2023.html
我们每年收到的所有标志清晰解读并整理成这份报告并不是一项容易的工作。总共超过30,000个标志,对我和一群杰出的设计师来说,这就像是世界上最大规模的配对游戏。最初,我们归纳出大约60-70个组别,然后将它们进一步划分为具有最大影响力的15个类别。
我只是通过对提交的30,000多个标志进行彻底分析(还有国际上每个重要品牌的更新和重塑)后呈现的报告。因此你要了解的是,就像任何气象学家会告诉你的那样,他们不能保证天气预报的准确性。同样,我们也无法总是预测设计师将向哪个趋势方向发展,这就是这份报告能让我们保持警惕并感到有趣的原因所在
01、Wildflowers(野花);02、Bloblend(流动混合);03、Fades(逐渐模糊);04Foreshort(透视);05、Thrust(推进);06、Spirals(螺旋);07、Sonics(声波);08、WireForms(线框);09、BallCaps(球形顶端);10、NameFills(名字填充图形);11、Stretchers(元素拉伸);12、NeoStencil(喷漆模版艺术);13、HalfAster(半星号);14、Double Os(双圆环);15、Ritz(饼干);
重新读了一遍标志设计的内容。果然受益匪浅的感觉。还是要时常温故而知新的。学习了大厂的ICON设计规则也是很有收获的。
蓝蓝设计的小编 http://www.lanlanwork.com