首页

解锁UI设计新趋势:打造未来感界面的5大技巧

鹤鹤

引言
  随着科技的迅猛发展,用户界面(UI)设计作为连接用户与数字世界的桥梁,其重要性和影响力日益凸显。一个优秀的UI设计不仅能够提升用户体验,保持用户的持续参与度,还能助力品牌在激烈的市场竞争中脱颖而出。如今,设计师们面临的挑战是如何
捕捉并应用新兴趋势,打造出具有未来感的界面设计,以满足用户对新鲜感和创新体验的渴望
  在未来感的设计中,每一个小小的细节都可能成为引领潮流的风向标。从
视觉元素的创新运用
智能动效与微交互
的精妙结合,再到
材料设计与空间概念
的深度探索,以及
色彩与字体的新潮流
,都是构建引人入胜的用户界面不可或缺的部分。更进一步,随着
增强现实(AR)和虚拟现实(VR)技术
的融入,UI设计的边界被进一步拓展,为用户带来前所未有的沉浸式体验。
  本文将深入探讨打造未来感界面的5大技巧,并通过实际案例的分析,揭示这些技巧如何在实际设计过程中得以应用,并最终形成具有影响力的产品。无论是刚踏入UI设计领域的新手,还是经验丰富的资深设计师,本文都将提供有价值的见解和灵感,帮助大家解锁新趋势,打造具备未来感的用户界面,共同迈向更加美好的数字生活。
(如果文中存在任何不准确或遗漏之处,期待各位专家的指正和建议)
本文目录
本文目录
 
解锁UI设计新趋势:打造未来感界面的5大技巧
 
 
一、新趋势概览
1.当前UI设计的流行趋势
  在数字设计的世界中,UI设计的趋势如同时尚圈的变迁一样迅速。每一个新趋势都在告诉我们,技术正以前所未有的速度影响着我们的日常生活。作为设计师,理解并把握这些趋势不仅意味着能够创造出引人入胜的作品,更代表着能够预见并塑造未来用户与界面交互的方式。
  当前流行的UI设计趋势包括了
极简主义、扁平化、暗色模式、玻璃模糊效果(Glassmorphism)、以及动态的视觉效果
等。这些趋势往往反映了用户对清晰性、可读性、以及视觉舒适度的需求。例如,暗色模式不仅减少了屏幕发出的光线,减轻了用户眼睛的疲劳,同时也赋予了界面一种时尚和专业的气息。(可阅读我之前的文章《「大厂设计师」教你一文读懂暗色模式》,非常详细)
当前流行的UI设计趋势
当前流行的UI设计趋势
 
2.科技发展如何影响UI设计
  同时,随着人工智能和物联网的普及,UI设计也正在变得更加
智能化和互联
。设备间的无缝连接带来了
统一的用户体验
,而人工智能的引入则让界面能够根据用户的行为和习惯提供个性化的反馈和建议,极大地
提升了用户的粘性
小米已经建立起了涉及12大领域、98项细分领域的技术图谱,涵盖了智能手机、智能汽车、机器人、软件和算法、电商、智能制造、金融等各类小米研发和应用的技术
小米已经建立起了涉及12大领域、98项细分领域的技术图谱,涵盖了智能手机、智能汽车、机器人、软件和算法、电商、智能制造、金融等各类小米研发和应用的技术
 
3.优秀案例解读
  为了具体展示这些趋势在实际中的应用,我们不妨来看一看
苹果公司的UI设计
。苹果一直以来都是工业设计的先驱者,它的UI设计同样引领着潮流。在最新的iOS系统中,我们可以看到
玻璃模糊效果被运用到了极致
,它不仅使界面看起来更加现代和清新,也为用户体验增加了层次感和深度。此外,苹果的
Animoji和Memoji功能
将个性化的动态表情带入了消息交流中,这种结合了
个性化和技术趋势
的设计细节,
增强了用户的互动乐趣,并提高了平台的参与度
苹果公司的玻璃模糊效果及emoji应用
苹果公司的玻璃模糊效果及emoji应用
 
  接下来,我们还可以看到
特斯拉
在其车载用户界面中采用了
极简主义
的设计理念。通过简化界面元素,去除多余的装饰,特斯拉成功地提供了一个
既美观又功能性极强
的控制面板,完美地展示了如何
将复杂信息简洁呈现给用户
特斯拉的极简化HMI设计
特斯拉的极简化HMI设计
 
  总之,
了解并应用这些UI设计的新趋势
对于设计师来说是至关重要的。它们不仅能够帮助设计师创作出符合当下审美的作品,更能让他们预见未来,
打造出具有前瞻性和创新精神的用户界面
。在接下来的章节中,我们将深入探讨如何将这些趋势转化为实际的设计技巧,并通过案例分析来揭示这些技巧的应用方法。
解锁UI设计新趋势:打造未来感界面的5大技巧
 
 
二、5大设计技巧及应用
1.创新的视觉元素运用
  在UI设计中,视觉元素的运用是
建立品牌形象和提升用户体验
的关键。近年来,随着技术的不断进步和设计理念的更新迭代,设计师们已经开始尝试更为创新的视觉元素,以打造具有未来感的用户界面。这些创新元素不仅能够
吸引用户的目光
,还能
提供新颖的交互体验
,从而
增强用户的参与度
(1).抽象图形和动态背景
  首先,
抽象图形和动态背景
成为了流行趋势之一。这些元素通常结合了
复杂的几何形状、微妙的色彩渐变以及动态效果
,用以营造出一种科技感或梦幻般的氛围。例如,一个登录页面可能采用动态的背景,其中包含缓慢旋转的三维几何形体,这不仅给用户带来了
视觉上的享受
,也传达了
品牌对未来科技的追求
图源:https://dribbble.com
图源:https://dribbble.com
 
(2).3D元素
  其次,
3D元素的融合
也是创新视觉元素运用的一个方向。随着3D建模技术的发展,将三维元素集成到二维界面中变得越来越流行。这样的设计不仅
增添了界面的深度和立体感
,还为用户
提供了更为丰富的互动方式
。例如,懂车帝使用了
3D产品预览
,让用户能够从不同角度观察车辆,增加了购物的体验感。
懂车帝的3D看车
懂车帝的3D看车
 
(3).优秀案例解读
  接下来,我们将通过一个具体的案例来进一步理解这一技巧的应用。
AirPano Travel Book
是一款旅游类应用,运用了
视差滚动效果
来模拟用户在旅途中的景深变化,当用户在应用中上下滚动时,不同层次的图像将以不同的速度移动,
营造出一种真实的旅行体验
。同时,在UI中加入
定制化的动态抽象图形
,比如根据用户的目的地展示出具有当地特色的图样,这样既美化了界面,也
提供了个性化的信息
视差滚动效果
视差滚动效果
 
定制化抽象图形
定制化抽象图形
 
  此外,为了更好地展示创新视觉元素的运用,设计师可以利用现代设计工具,如
Adobe XD或Sketch
等,这些工具支持导入和创建复杂的矢量图形,并能够模拟各种动态效果。通过在这些工具中进行快速原型设计和迭代,设计师可以方便地测试和调整视觉元素,直到找到最适合用户和品牌的设计解决方案。
  总之,通过引入创新的视觉元素,设计师不仅可以
打破传统的界面设计局限
,还可以
推动用户体验向更加动态和互动的方向发展
。这种设计技巧要求设计师具备前瞻性的洞察力和扎实的设计技能,以便创造出既美观又实用的用户界面。在接下来的章节中,我们将探讨如何将这些创新的视觉元素与智能动效和微交互结合起来,进一步提升UI设计的吸引力。
2.智能动效与微交互
  在当今的UI设计中,智能动效(Smart Animations)和微交互(Microinteractions)已经成为提升用户体验不可或缺的元素。这些细微但至关重要的设计细节,不仅
使界面更加生动活泼,而且有效引导用户行为,增强应用程序的直观性和易用性
(1).智能动效
  智能动效
是指
根据用户的互动而触发的动画效果
,它能够提供视觉反馈,帮助用户理解他们的行为和应用程序的响应。例如,当用户点击一个按钮时,按钮可能会有颜色渐变或者扩大缩小的动画,这种动效
向用户确认了他们的操作已被系统识别和处理
。此外,智能动效也可以用来
引导用户的注意力
,如通过动画展示来突出重要的信息或者引导用户完成特定的任务流程。
blibili的三连动效
blibili的三连动效
 
(2).微交互
 
  微交互
则是一种细节层面的设计,它关注的是
用户在使用产品过程中的微小时刻
,例如TabBar底部导航栏的选中效果、滑动删除应用通知时的"嗖"的一声提示,或是设置定时器时旋转的拨轮声。这些看似不经心的设计实际上极大地
丰富了用户的体验
,让用户在使用过程中的每一个小步骤都
获得满足感和愉悦感
tabbar动效设计,可通过AE制作
tabbar动效设计,可通过AE制作
 
 (3).优秀案例解读
  为了更好地演示智能动效和微交互的实际应用,我们来看一个具体的案例分析。网易云音乐是一款音乐流媒体应用,我们可以在用户播放一首歌曲时加入一个
从封面图片过渡到播放器界面
的流畅动效,这不仅美观现代,还强化了用户的操作反馈。当用户进行歌曲切换时,唱片机上的
唱针通过拿起放下的动效表示切换唱片
,同时伴随着节奏的跳动,增强了听觉与视觉的联动。
网易云音乐的播放歌曲
网易云音乐的播放歌曲
 
  在微交互方面,如果用户将歌曲添加到收藏列表,有许多类似
心跳般的跳动动画
作为反馈,让用户感受到自己的选择得到了
系统的即时回应
,同时这个动效也可以根据用户的个人喜好进行选择,满足了用户的个性化需求。
网易云音乐的个性化收藏
网易云音乐的个性化收藏
 
  为了实现这些智能动效和微交互,设计师们通常需要掌握一定的动画制作技能,并熟悉如
After Effects、Principle
等动画制作工具。通过这些工具,设计师不仅可以创造复杂的动效,还能将这些动效导入到原型设计中,确保它们在实际应用场景中的可行性和效果。
  总结来说,
智能动效和微交互是提升UI设计吸引力的重要技巧
。它们不仅美化了界面,增加了乐趣,更重要的是提升了用户的实际使用体验。在接下来的章节中,我们将探讨如何利用材料设计和空间概念来进一步增强界面的层次感和深度感。
3.材料设计与空间概念
  在UI设计的世界中,材料设计(Material Design)是由
谷歌
推出的一套设计语言,
旨在通过使用阴影、动画和深度效果来模拟真实世界的材料和质感
。这种设计理念不仅使界面看起来更加直观和一致,而且通过引入空间概念,增强了用户的沉浸感和操作直觉性。
(1).材料设计
  首先,
材料设计
的核心在于其能够
创建一个具有层次感的界面
。设计师利用纸张隐喻来构建出一个可以触摸的虚拟世界,在这个世界中,
每一个元素都像是一张放置在桌面上的纸片
。通过使用
阴影和厚度
,这些纸张般的元素之间建立了明显的
层级关系
,让用户能够清晰地感知到哪些是可以互动的按钮或卡片,哪些是背景信息或次要元素。
将手机屏幕看作纸张,而UI设计师就是在二维平面上创造三维画作
将手机屏幕看作纸张,而UI设计师就是在二维平面上创造三维画作
 
(2).空间概念
  其次,
空间概念
在材料设计中同样至关重要。通过对
Z轴
的利用,设计师可以创造出
元素之间的前后关系
,使得一些元素看起来像是浮动在其他元素的上方或下方。例如,弹出菜单或抽屉式导航会出现在主界面之上,而幻灯片则可能在下方滑动进入视野。这样的设计不仅
增添了视觉上的趣味性
,也
使得用户更容易理解多维的导航结构
不同的界面元素对应不同的视觉层级
不同的界面元素对应不同的视觉层级
 
(3).优秀案例解读
  为了更好地演示材料设计和空间概念的应用,让我们来看一个案例。在
Airbnb爱彼迎
的搜索结果页面中,房源都
以卡片形式展现
,并且有
悬浮效果
,用户可以感受到元素之间的堆叠效果。而房东名片以书本形式展示在界面最上层,点击之后给用户带来
拿起展开信息的体验
。此外,房源图片的高质量和大尺寸也使得用户仿佛能触摸到实际空间,增强了
沉浸感
爱彼迎的搜索界面
爱彼迎的搜索界面
 
  实现这些效果,设计师通常需要掌握如
Sketch、Figma、Adobe XD
等现代UI设计工具,这些工具提供了必要的
组件和动效
支持来实现材料设计的规范。此外,它们也支持跨平台协作,确保设计在不同设备和操作系统中保持一致性和功能性。
  总的来说,材料设计和空间概念赋予了UI设计更多的
立体感和现实感
。通过恰当地运用这些技巧,设计师可以创造出既
美观又富有逻辑性
的用户界面,从而提升用户体验和满意度。在接下来的章节中,我们将深入探讨色彩与字体的新潮流以及它们如何影响用户的情感和行为。
3.色彩与字体的新潮流
  UI设计中,色彩和字体是
塑造品牌形象和传递信息
的关键要素。随着设计风格的不断演变,新的色彩配搭和字体设计趋势也在持续涌现,为设计师提供了更多的选择和创意空间。掌握这些新潮流不仅能够
使设计作品更具时代感
,而且可以深刻
影响用户的情感反应和行为模式
(1).色彩趋势
  新兴的
色彩趋势通
常反映在
年度流行的颜色
上,如
Pantone每年发布的年度色
等。这些流行色往往与文化趋势、社会情绪以及科技发展紧密相连。例如,一种温暖而包容的色彩可能反映了人们对和谐社区的向往,而一种鲜亮且活泼的色彩则可能是对日益增长的数字化生活的回应。在UI设计中运用这些流行色,可以
增强产品的时尚感和相关性
Pantone近四年的流行色
Pantone近四年的流行色
 
(2).字体设计
 
字体设计
同样重要,因为不同的
字体风格和排版
可以直接影响
信息的传达效果和用户的阅读体验
。最新的字体趋势可能包括
无衬线字体
的进一步简化、
手写字体
的个性化使用,或者是
动态字体
的出现,后者在不同的屏幕和设备上能够提供最佳可读性。此外,
响应式排版
也越来越受到重视,它允许字体大小和行距随屏幕尺寸的改变而调整,从而优化移动端和桌面端的阅读体验。
近年流行的字体风格和排版
近年流行的字体风格和排版
 
(3).优秀案例解读
  为了具体展示这些趋势的应用,我们来看一个案例。
QQ
是一款国内的主流社交媒体应用,它的消息界面选择了一种
明亮且具有活力的蓝色作为主题色
,这种颜色既能吸引
年轻用户
群体,又能与应用的
清新现代感
相契合。对于
字体
,用户可以
根据自己的喜好选择
一种简洁的无衬线字体来增强消息的清晰度,同时在用户发送的
个性化签名
中用户也可以选择一款有趣的手写风格字体,以
鼓励用户自我表达和个性化分享
QQ中字体、颜色、主题的应用
QQ中字体、颜色、主题的应用
 
  在实现这些设计时,设计师可以利用多种工具和技术,如
CSS变量和HTML5的@font-face
规则,以确保
色彩和字体的准确展现
和良好性能。此外,设计师还应该考虑到
多语言环境下字体的兼容性
,确保所有用户都能获得一致的体验。
  综上所述,色彩和字体在UI设计中的新潮流不仅
反映了文化的变迁和技术的发展
,而且对于提
升用户体验和满足审美需求
起到了关键作用。通过在设计中融入这些新趋势,设计师能够创造出既
富有表现力又易于使用的界面
。在接下来的章节中,我们将深入探讨如何将增强现实(AR)和虚拟现实(VR)技术融入UI设计中,为用户带来前所未有的交互体验。
5.增强现实(AR)与虚拟现实(VR)的融合
  随着技术的不断进步,
增强现实(AR)和虚拟现实(VR)
已经成为UI设计领域的新趋势,它们为用户提供了
沉浸式和互动式的体验
。这些技术
将现实世界和虚拟世界融合在一起
,创造出
全新的用户界面和交互方式
。在这篇文章的最后部分,我们将探讨如何将AR和VR技术融入UI设计中,以提供独特而前沿的用户体验。
AR与VR的区别
AR与VR的区别
 
(1).增强现实(AR)
  增强现实技术允许用户
在现实世界的环境中看到由计算机生成的图像
。在UI设计中,这意味着设计师可以
创建能够与现实世界相互作用的界面元素
。例如,得物利用了AR技术让用户在自己的家中就能试
穿衣服或鞋子
,从而
消除了线上购物与实体店购物之间的界限
。设计师需要确保这些虚拟对象与现实世界的环境相协调,同时提供直观的用户操作指南和提示。
得物的AR试穿功能
得物的AR试穿功能
 
(2).虚拟现实(VR)
  虚拟现实则创造了一个
完全由计算机生成的环境
,用户可以在其中进行沉浸式的体验。在UI设计中,这通常涉及到
创造一个360度的界面
,用户可以在其中环顾四周,并与之互动。例如,
网易瑶台
可以允许用户在家中就能
探索遥远的目的地
,或是通过虚拟现实体验提前
参观即将举办的活动场地
。其业务范围包括
私域元宇宙、数字文旅、营销活动、展览展厅、企业空间
等多种场景。设计师在这个领域面临的挑战是如何在不引起晕动症的前提下,提供流畅而引人入胜的体验。
网易瑶台的VR服务场景
网易瑶台的VR服务场景
 
(3).优秀案例解读
  为了具体展示AR和VR在UI设计中的应用,我们来看一个案例分析。
如视
是国内一家提供
AR/VR看房
技术的服务公司,其合作对象包括自如、贝壳、华住会、万科等。房地产应用的
目标用户是潜在的房屋买家
,加入AR技术来让用户
在自己的手机上查看房屋的内部布局和外观设计
。当用户指向特定的房屋模型时,屏幕上会显示房屋的实际外观,并允许用户通过手机摄像头在现实世界的背景下查看它。此外,用户还可以通过VR技术进行一次
虚拟参观
,就像亲自走在房屋内一样,从每个角度观察房间的布局和设计。
如视的AR看房功能
如视的AR看房功能
 
  实现这样的设计不仅需要对UI设计有深刻的理解,还需要掌握如
Unity3D、Unreal Engine
等高级开发工具,以及对于AR和VR硬件如
Oculus Rift
Microsoft HoloLens
的熟悉。设计师必须考虑到用户的物理运动和视线变化,以确保界面元素在不同的视角和情境下都能正确显示并提供反馈。
  总结来说,将AR和VR技术融入UI设计是一个
充满挑战但同样充满机遇的领域
。它要求设计师不仅要关注传统的设计原则,还要
对新技术有深入的了解和实验精神
。通过结合这些技术,设计师可以创造出前所未有的体验,将用户带入一个全新的互动维度。
写在最后
  在探索未来感UI设计的旅程中,我们共同穿越了五个关键技巧的门槛,它们分别是
创新的视觉元素运用、智能动效与微交互的精妙结合、材料设计与空间概念的深度利用、色彩与字体的新潮流引领,以及对增强现实(AR)与虚拟现实(VR)技术
的前沿融合。通过这些技巧,设计师们能够打造出不仅具有功能性,而且具有强烈吸引力和未来感的用户界面。
  随着技术的不断进步和用户需求的持续演变,UI设计的未来将继续展开新的可能性。设计师们需要
不断地学习、适应并实验最新的设计技巧和技术
,以确保他们的作品不仅与时俱进,更能引领潮流。在此过程中,设计师们将拓宽自己的创意视野,提高解决问题的能力,并最终为用户带来更加丰富、直观且愉悦的体验。
  这篇文章不仅是对现代UI设计技巧的全面概述,也是一个对未来设计趋势的期待和准备。让我们一起携手进入这个充满创造力和无限可能的设计新时代。
 


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

蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan。

WechatIMG27.jpg

关键词:UI咨询UI设计服务公司软件界面设计公司、界面设计公司、UI设计公司UI交互设计公司数据可视化设计公司用户体验公司高端网站设计公司银行金融软件UI界面设计能源及监控软件UI界面设计气象行业UI界面设计轨道交通界面设计地理信息系统GIS UI界面设计航天军工软件UI界面设计医疗行业软件UI界面设计教育行业软件UI界面设计企业信息化UI界面设计、软件qt开发软件wpf开发软件vue开发

 

2024 年 十大UX/UI设计 趋势

鹤鹤

在外网看到的一篇关于2024设计趋势的文章,翻译归纳分享给大家。
一.3D图像
3D插画的优势:
1.开发成本低
2.受设计师的个人风格影响小
3.质感、材质更显风格化抽象化,易吸引用户的注意力
3D插画
3D插画
 
动态3D插画
动态3D插画
 
3D插画在金融类网站的应用
3D插画在金融类网站的应用
 
3D插画在设计师个人网站的应用
3D插画在设计师个人网站的应用
 
3D插画在设计工作室网站的应用
3D插画在设计工作室网站的应用
 
二.复杂渐变
复杂渐变的优势:
体现未来感,与高科技产品建立认知联系
品牌代理机构
品牌代理机构
 
创意机构
创意机构
 
创意工作室
创意工作室
 
三.玻璃态和新晶态
玻璃态和新晶态的优势:
真实感,用户感觉自己在近距离观察物体
 
玻璃形态主义
是指在界面中模仿玻璃的质感
新形态主义
是从从拟物主义衍生而来的一种适应性趋势,适合现代审美。它强调在物体、体积和渐变上进行高质量的阴影渲染
 
2024 年 十大UX/UI设计 趋势
 
 
2024 年 十大UX/UI设计 趋势
 
 
四.低多边形插图
低多边形插图优势
1.简洁明了,有效传达信
2.游戏质感、怀旧感,唤起愉快的回忆和童年的轻松感
2024 年 十大UX/UI设计 趋势
 
 
五.2D插画
2D插图优势:
风格化强烈,更能突出品牌风格。Google、Yandex、Dropbox、Mailchimp 和 Wetransfer都倾向于这种2D风格插画。
2024 年 十大UX/UI设计 趋势
 
 
2024 年 十大UX/UI设计 趋势
 
 
六.极简主义
广泛应用于提供室内设计服务、法律服务和电子商务的项目,人们倾向于不沉迷于明亮的细节,因为用户需要专注于基本要素,而不是被过多的装饰元素分散注意力。
2024 年 十大UX/UI设计 趋势
 
 
2024 年 十大UX/UI设计 趋势
 
 
2024 年 十大UX/UI设计 趋势
 
 
2024 年 十大UX/UI设计 趋势
 
 
2024 年 十大UX/UI设计 趋势
 
 
七.暗黑主义
这样的风格营造出一种特殊的宇宙氛围,增添了一丝奢华感。因此,高级银行产品、信息行业的封闭社区、VIP 服务和商品中经常出现暗黑主题。它有效地强调了高地位和所用技术的进步性。
基于区块链的数字生态系统 Glec 项目
基于区块链的数字生态系统 Glec 项目
 
区块链项目
区块链项目
 
2024 年 十大UX/UI设计 趋势
 
 
八.动效
2024 年 十大UX/UI设计 趋势
 
 
2024 年 十大UX/UI设计 趋势
 
 
动效示例网站链接:
https://youtu.be/suC3o141tB0
 
九.人物
为了进一步吸引用户,可以考虑使用独特的吉祥物角色。它们会在用户使用数字产品时陪伴用户并让他们参与互动。这种方法有助于在竞争对手中脱颖而出,确保沟通的一致性(如果用户在品牌或公司的每个平台上都遇到熟悉的角色,他们会更容易适应)
营销平台
营销平台
 
推广 Web3 项目
推广 Web3 项目
 
界面中的字符有多种用途:
  •  
    角色充当向导,为用户提供帮助、提示和鼓励。它们帮助用户浏览界面并了解产品的功能。
  •  
    角色有助于与观众建立情感联系。它们传达产品的价值,并通过添加个人风格使互动更具吸引力。
  •  
    用户可以通过角色获得奖金、折扣或其他奖励。这与游戏化的大趋势相吻合,用户可以通过完成任务获得成就。
 
十.美好回忆
复古和怀旧设计元素是激发用户怀旧情绪的绝佳触发器。它们让用户与产品进行情感互动,提供身临其境的体验。在潜意识中,它们增强了访客的信任,传达出这样的信息:“我们有着共同的过去,共同的回忆。我们一起长大。”
防晒霜产品网站
防晒霜产品网站
 
Spotify 促销
Spotify 促销
 
帮助音乐家创作歌曲的服务
帮助音乐家创作歌曲的服务
 
开发设计工作室
开发设计工作室
 
十一.大胆的实验设计
饱和的字体、酸性色彩、GIF 动画、滚动文本以及明亮但平面的拼贴画、来自 Mac OS 9、Windows 2000 和 Windows ME 的元素——当您想要创建真正“狂野”且令人难忘的视觉效果时,可以使用所有这些元素。
秘密社团与全球阴谋
秘密社团与全球阴谋
 
兴趣工作室
兴趣工作室
 
设计师个人界面
设计师个人界面
 
乐高的历史
乐高的历史
 
 


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

 

 

2024 年的 UX/UI 设计趋势,关于未来科技体验的可能性

博博

一、从便当盒而来的 Bento UI

便当盒是日本午餐和午餐盒文化的重要组成部分。他们以井然有序的方式储存食物,并保持着食物清洁。

图片来源 — Freepik

从便当盒演变而来的 Bento UI 设计风格,是便当盒在屏幕上的数字化效果,基于卡片的设计或网格布局,其中信息以不同的部分或容器呈现,以提高清晰度和易用性。它慢慢开始在 Dribbble 和 Behance 等平台上掀起波澜,吸引数百万设计师关注。

后续这种“模块化”设计概念开始出现在网站的仪表板,包括 PayPal 的销售和财务仪表板、Google Ads 的分析工具等。Windows Phone 和 Lumia 使用的 UI 本质上是 Bento 设计风格的早期迭代。后来,微软也将这一概念应用到了 Windows 8 的 Windows 桌面开始菜单中。

Windows 8 开始菜单当苹果公司在 iPhone 登陆页面上开始使用 Bento 网格时,Bento 设计被彻底引爆,很快扩展到苹果的发布会演示中。

另一张苹果海报

众所周知,苹果公司总能引领市场设计趋势,而 Bento 设计风格只是其中之一。从那以后,每个设计师都使用 Bento 进行产品设计、产品发布等。

日式便当的设计与 Bento 设计趋势之间的最大区别在于, Bento 网格的每个部分都代表一个独特的空间,而不是一个组的一部分。它现在已经发展到包括产品演示,与其他一些独特的布局混合,甚至采用新的视觉设计概念进行风格化。比如下面这个:

Bento 设计互动现场演示

上面的例子来自 diagram.com,它使用便当网格来展示其工具通过交互式体验可以做什么的现实生活示例,让这个工具更具吸引力,并告诉用户他们应该期待什么。

同时,为了帮助全球设计师开拓思路,出现了一些 Bento 设计灵感的收集网站,如 Bentogrids.com ,其中有大量用于 UI 和图形设计的 Bento 网格。感兴趣的设计师朋友可以前往体验。

Bentogrids官网

Bento UI 设计风格扩展性较强,可以快速的创建响应式动态分布,同时可以轻松地创建明确的视觉层次结构和布局,提高信息可读性和可理解性。这些优势让 Bento UI 在移动设备上的发挥非常出色,但如果是层级结构较为复杂的页面,Bento UI可能并不适合。

二、AR / VR设计与更交互式的空间体验

想象一下,你刚刚醒来,拿起手机查看“重要电子邮件”。画面切换,你带着苹果的 Vision Pro,整个信息流都来源于这里。这是 2023 年 6 月 5 日全世界每一位科技和设计爱好者的早晨。

图片来源 — Apple.com

在接下来的几周里,这是科技界谈论的主要话题,每个设计师都在努力学习空间设计技能。除了设计趋势之外,各种 AR / VR 初创公司也走到了最前沿,他们的技术终于被人们谈论。Vision Pro 真正推动了 AR 和 VR 的发展。

伟大的技术带来巨大的设计潜力。从智能手表到折叠手机,设计师们总是挺身而出,展示他们的适应性。空间设计也不例外。

一睹即将发生的事情

一款名为“Bezi”的流行设计师工具随之推出,它非常接近 Figma 和 Spline 等设计工具,但增加了第三维空间。设计师可以进行空间设计,连接可用的 AR / VR 耳机,并创建交互式空间体验。

更好的 UX 是更好的 AR / VR 体验的一个重要贡献者。深入了解前沿设计背后的技术、使用实际的 VR 耳机、在空间环境中进行测试,这些都是工作的一部分。随着我们的发展,我们目前对用户体验的理解肯定会有很多新的变化。这是需要持续积累并会在将来使用的技能之一。

除了苹果公司丰富的想象力和雄厚的财力之外,还有一些不太懂技术的公司也为佩戴眼镜带来了全新的体验。比如太阳镜公司 RayBan ,已经凭借其新款 Meta Wayfarer 进入了智能可穿戴设备竞赛。它的内置摄像头和智能功能允许用户存储视频/图像并直播到社交媒体,这为用户体验和客户体验带来了新的维度。

图片来源 — RayBan

三、动画与 3D 设计成为新趋势

当更多人掌握一项新技能时,新趋势往往就会诞生。LottieFiles 可以便捷的将 UI 生成简单的动画,他们甚至推出了 Figma 插件,允许用户将 Figma 动画转换为可导出的 Lottie JSON 文件。这解决了 After Effects 和类似软件的漫长学习曲线问题,让更多的设计师可以自己快速制作动画。

同时我们注意到,如今每个公司的登陆页面上都有诱人的互动。这源于网站访问者对差异化体验的需求不断增长,以及在销售产品/服务的过程中讲好故事的更大需求。

以 Apple Watch Series 9 的登陆页面交互为例:

有了滚动动画,访问者就会全神贯注于你要向他们展示的内容。Webflow 和 Framer 等无代码工具不断创新,为设计人员带来此类动画功能,而无需编写长行代码。

人们可能会认为,动画至此已经达到顶峰,没有什么值得期待的了。但幸运的是,科技界的人总是在寻找下一件大事,并且提供无穷无尽的强大工具,让想象的一切都变得可能。其中一种可能性就是新的“动画按钮趋势”。一种新的 UI 风格,引入了动画技术,使简单的按钮变得生动起来。这些变化的范围从按钮周围的简单笔划动画,到鼠标悬停时在按钮内移动的文字星星。

来源于 X的“@learnframer”的 GIF

除了动画的趋势之外,最近,许多设计师都在谈论设计世界如何从扁平化设计转向更伪现实的视觉风格。其中包括 3D 图形、深度效果、拟物化、拟物化等。我们也看到很多公司都将 3D 作为核心风格。尽管它现在可能不会出现在网页和应用程序设计中,但徽标正在随着这一新趋势而更新。

新 3D 浪潮的几个很好的例子(来源于 Chan Karunaratne)

与动画设计趋势非常相似,人们实现这些样式的一个重要原因是出现了易于使用的基于 Web 的 3D 工具,例如 Spline 和 Vectary ,这些工具使得在 Web 和应用程序上包含 3D 资源变得非常容易。他们还使用动画将 3D 资产带入生活,这是很多设计师所经历过的最短的学习曲线。设计师很快就能使用基本的线性渐变和一些阴影为企业的品牌资产添加第三维度。另一家始终推动设计和趋势的公司是 Airbnb。他们因其简单而有效的应用程序设计和交互而广为人知。2023 年,他们宣布了一次应用程序更新,融入了十多个 3D 视觉元素,甚至公告视频几乎都是关于3D的。

Airbnb 发布视频

等距视觉效果、3D 角色和动画以及大量应用程序交互足够吸引眼球,让用户想要重复观看。从平面到动画或 3D 的转变在缓慢而稳定的发生着。这种趋势通常是由多米诺骨牌效应造成的。只要一位设计师的社交帖子受到欢迎,其他著名设计师也会效仿。

四、人工智能对于 UX / UI的影响

1. AI 设计工具是否可以成为设计师的好助手

虽然一些设计师认为 AI 未来会对他们的职业构成威胁,但我们大多数人都在使用这项技术更快地创造出最好的设计。

Adobe Firefly 用于视频处理

不过大多数声称自己为“人工智能驱动”的设计工具,虽然开放了生成式 AI 的 API,也在开发自己的人工智能模型,但大多数 AI 功能都还只是噱头,只能完成随机设计 UI、重组资产等不稳定功能。

但市场上也仍然存在一些设计领域的英雄产品,比如 Relume 。这家专注于 Webflow 的公司推出了名为 Relume AI 的产品,这是一款功能强大的线框和交互工具。在该网站中输入你的网站描述,它会生成完整且详细的交互稿和视觉图,界面的布局和数据完整,可以快速复制到 Figma 和 Webflow。

前段时间我们也分享过 Durable 这个建站产品AI + 建站|Durable,融资 1400 万美金,30秒创建一个网站并成为自己的老板,它提供了创建网站所需要的一打子工具,包括网站构建器、CRM、发票软件、人工智能助手等。用户只需要提供品牌名称、所属行业、开展业务的地点和网站语言,Durable 就会基于用户提供的信息快速创建一个网站首页。

用 Durable 创建网站

2. AI 时代的用户体验设计

在 ChatGPT 还没有风靡的时候,数字产品的用户体验风格普遍为以 GUI (图形用户界面)为主,通过图形、按钮、菜单等标准化元素,使用户可以通过键盘、触摸等方式与终端设备交互。Windows 操作系统、MacOS 、Photoshop等软件都已 GUI 的用户界面为主。

GUI 的界面设计在近 20 多年的发展过程中,由于功能场景的不断增加, GUI 界面需要兼容复杂的、多样化的用户需求。功能强大的同时,设计成本变得很高,用户的学习成本也随之提升。尤其是在 TOB 领域的设计中,功能的庞大让整个页面拥有多重窗口、四五级以上的导航,即使设计师努力提供简单易用的页面,也很难降低用户的学习难度。

随着 GPT4 的推出,CUI (对话式用户界面)的界面体验正在逐渐应用广泛。CUI 采用了更加直观和自然的语言交互的方式,通过自然语言、语音等方式进行对话,可以有上下文记忆和智能化的回应,典型如 Siri 、Amazon Alexa 、 Google Assistant。

CUI 的出现,用自然语言的对话方式,可以让用户更直观的与数字产品进行交互,避免用户记忆繁琐的操作路径,让 AI 为自己找到最快的解决方案。

但是否所有应用都需要用 CUI 重构一遍?我们认为不会,不同的应用特性会导致不同的设计方向,这给了设计师进一步延展的空间。

  • 对于 TOC 的产品:针对用户目的明确、功能较为简单的产品, CUI 会对其的交互体验有着革命性的影响,比如携程、美团这种需求明确的产品,用户的目标是为了找到最合适的商品完成购买,这个过程可以通过 CUI × AIGC 的方式进行进一步重构;但针对用户目的不明确,且产品体验过程较为舒适、不需思考的产品,如抖音、快手,CUI 不一定是最让用户喜爱的交互界面,或许需要探索二者结合的最佳方式
  • 对于 TOB 的产品:用户目的明确,功能多样且复杂,我们认为 GUI 的设计界面很难被摒弃,导航式的地图仍然需要提供给用户完成有目的查找。同时对话式的命令也可以满足用户无目的的询问,或许 CUI 可以基于现有层级分明的界面,进行关键流程的解答和提效。

五、不忘初心,回归用户

用户体验的研究已经不断发展和完善,使设计变得易于理解和包容。相比于视觉设计的精美程度,许多设计师更重视可用性,这带来了更简单且可行的设计风格。尽管过去几年行业发生了变化,该设计原则仍然被践行。

2019 年至 2023 年“用户体验可访问性”的 Google 趋势图

上面的谷歌趋势图显示了无障碍设计渐渐成为了真正的工业需求。可访问性技术的范围从颜色对比、可读字体、可识别的动作元素,一直到追踪不同用户的反馈,应用到产品功能中去。

1. 无障碍设计

由于当前需要为所有年龄段的人甚至身体有障碍的用户进行设计,因此无障碍性也受到了大力推动。公司希望从所有不同的人群中获利,并且也在各个方面推动包容性。随着越来越多的人走向数字化,设计师几乎必须专注于无障碍设计,更多针对无障碍设计的课程和训练营也面向设计师开放。

2. 个性化

除了可访问性之外,个性化才是真正让人们锁定应用程序或网站的原因。或许你以前在 YouTube 上看过这条小信息 :

YouTube 评估你喜欢哪种内容以便提供更好的推荐

即使是一个已发布功能,如果用户反馈不佳,也很容易面临撤回的情况,这直接体现了用户体验设计师在未来产品和服务方面的领先地位。

Perplexity AI CEO Aravind 曾分享过对于用户体验的理解,基本原则是“用户永远不会错”。Perplexity 发现只有极少数人知道将好奇心转化为清晰、准确的问题,从而导致结果不准确,甚至幻觉的出现。(欢迎阅读我们研究 Perplexity 的深度文章:AI+搜索|关于搜索的想象,和目前估值最高的生成式搜索引擎 Perplexity。)

一种解决思路是总结 prompt 的提问方法,让用户能主动学习;另一种解决思路是所以在对话式交互界面上,帮助用户提一个好的问题。Perplexity 选择了第二种,增加了提出问题之后的更多问题衍生。——平台永远要为用户多想一步、多做一步。

Perplexity 界面

总得来说,设计趋势会随着工业化进程的推进,而演进为更前沿的风格,也会有更多工具帮助设计师开放脑洞,快速得到心中所想。但无论社会如何进步,以用户体验为中心的话题永远不会终结。

 

 

 

蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。

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

银行金融软件UI界面设计能源及监控软件UI界面设计气象行业UI界面设计轨道交通界面设计地理信息系统GIS UI界面设计航天军工软件UI界面设计医疗行业软件UI界面设计教育行业软件UI界面设计企业信息化UI界面设计、软件qt开发软件wpf开发软件vue开发

 

超全面的设计底层理论,优秀设计背后离不开这些

鹤鹤

设计趋势年年在变,设计技能也在不断更新,但回到本源,底层的理论知识是不会变的。我自己几乎每年还会翻看一些讲设计基础的书,比如《写给大家看的设计书》之类的,会发现这些原理每次看都会有新的收获。

随着工作年数增加,对底层知识的价值认识也越来越深刻,不知道你会不会有这种感觉?

探索“B+C”,为B端体验加Buff

鹤鹤

在如今用户为王的时代,用户体验成为一种新的品牌竞争力。随着技术进步和体验意识的普及,习惯了C端产品流畅愉悦的体验,用户对B端产品体验的期望也越来越高。

B端C化的概念也由此产生,但B、C端有着本质区别,C端的设计思维无法完全复用到B端,那是否可以基于B端产品特征,融合C端体验设计思维,即“B+C”来帮助提升B端产品体验呢?本文聚焦在探索如何通过“B+C”的设计思维,提升B端产品体验。

一、B、C端产品定义与差异

我们先简单了解下B、C端产品各自的定义。B、C端其实是以使用对象的类型,来代指的产品类型,C指个人消费者 (Customer) ,B指组织 (Business) ,这个组织可以是个人、公司、政府或机构,因此B端模式也是多样的,除了B2B,还有B2C、B2G等。
C端产品帮助个人解决生活场景中的需求痛点,提供人们消费的物质、信息和情感。常见产品类型有工具类、内容类、社交类、游戏类等,如滴滴、知乎、微信、王者荣耀等。
B端产品帮助组织实现其商业目的,提供商业的工具、方法和服务。常见的产品类型有:CRM 客户关系管理、ERP 企业资源计划、OA办公等,如企业微信、金蝶、钉钉等。
下面我将从产品设计的角度,分析B、C端的差异化。

1、设计原则的差异

C端产品主要通过流量转化获得收益,因此人的注意力和使用频率是关键,所以设计原则为“UCD”(User Center Design)以用户为中心的设计。
B端产品主要是为了能高效解决行业业务问题而存在的,所以其设计原则是以效率为中心。

2、功能流程的差异

C端产品主打一个满足用户核心痛点的功能,通过这个核心功能明确产品的特性和定位,附加N个增值功能,提高用户粘性,加之创新和趣味性,保持与竞品之间的差异化。
B端产品功能重全面,为的是能满足组织的各种业务需求,组织的业务逻辑通常就是产品逻辑,功能流程也由业务场景转化而来。

3、交互逻辑的差异

C端产品是单线程操作,完成一项任务后才能进行另一项。碎片化的使用场景和广泛的用户群体,使得C端产品必须信息简洁、容易上手、操作路径短,否则将会导致用户流失影响收益。

B端产品是多线程操作,支持多个任务并行。交互以优化业务流程,提升用户操作效率为主,关注信息架构,清晰的信息架构能帮助用户在呈网状的功能和交织的流程中,定位到自己所在功能页面,找到所需的有效信息。

4、视觉表现的差异

C端产品视觉设计风格多样,如赛博朋克、孟菲斯、3D、酸性设计等,注重情感化表达和氛围的渲染,加上短视频和直播,让用户沉浸其中。
B端产品视觉服务于功能和信息的传递,视觉元素较为简洁,常用色彩对比的形式,建立内容边界和视觉层次。

二、如何用“B+C”思维提升B端产品体验

无论是在设计原则、功能流程、交互和视觉方面,B端产品与C端产品都有比较明显的差异。基于以上差异,结合B端产品特征和C端体验设计思维,我们可以从以下三个方面提升B端体验:

视觉—降低认知负荷

B端产品讲究屏效,看得多通常比看的美重要,信息密度高,则屏效高,却也相应的会增加用户的认知负荷,因此我们需要为用户认知减负。
交互—以用户效率为中心

从用户的行为和感知出发,本着以用户为中心的原则提升操作效率。

情感—关注情绪感受

关注体验过程的“峰”与“终”,提升用户整体的体验感受。
下面我将结合实际工作案例,讲述如何用“B+C”的设计思维,提升B端产品体验。

【案例分享】

Speedshop Omnichannel(下面简称为Omnichannel)是款针对国内及东南亚中小商家,统一管理多渠道商品、订单、交易、会员的ERP系统。
目前共支持Lazada、Shopee、Tokopedia、抖音等7个渠道,最多可管理100个线上店,集订单管理、产品管理、会员管理、聊天、导入导出等功能为一体,服务超40,000商家。

视觉 — 降低认知负荷

对信息的识别和处理是认知负荷的主要来源,在视觉层,我们主要解决的是信息识别带来的负荷,信息识别就是用户看到内容并选择的过程,B端产品有信息量大,选择多的特点,降低认知负荷也将围绕这两点进行。

1、优化信息展示

/ 符合用户诉求

B端产品根据用户规模的大小,可以分为大B (一定规模的中大型企业) 和小B (小微企业、个人创业),两者对信息的关注点和诉求不同。

表格是B端产品最常用的信息展现形式,且能将信息有序、高效、直观的传达给用户,避免信息堆砌带来的认知负荷。

比如同样是订单页,大B用户的订单数据量庞大,且订单通常是自动流转的,无需手工操作,所以针对大B用户,表格信息展示有两个侧重点,一是增加信息密度,二是帮助用户能够快速精准过滤信息。

小B用户的订单数据量相对较小,且以手工处理为主,所以在展示订单时,可以将关键信息整合,通过将信息进行分层、分组的展示形式,降低单页面信息的复杂度,还可以通过各模块之间字体大小、颜色、图标、间距等手段将信息层次区分开。

/ 丰富信息展示维度

还可以通过图形化、可视化和视频的形式,丰富信息的内容维度,化抽象为具象,让信息能更高效的传达。

在Omnichannel中,用户需要完成新手配置后才能使用产品,进入首页看到的是任务型的引导,通过图形辅助任务说明,丰富画面的同时还能增加产品的亲和力。

B端产品由于业务的复杂性和技术的局限性,通常操作没有那么灵活,需要遵守一定的使用规则,传统的做法会通过文字说明的方式传达给用户,面对一长段的规则说明,读几遍还不一定能理解。

比如在导入产品时,规则内容多且逻辑复杂,可以将内容可视化,使其易于传达和理解。

视频比文字的画面感更丰富,传播的内容也更加具体,在帮助中心,图文的基础上增加视频,帮助用户更高效的获取帮助信息。

2、提供个性化配置

B端产品通常包含多种用户角色,每个角色的需求关注点不同,为了满足各角色的需求,单页面信息往往会出现超负荷的情况。
我们可以借鉴C端的个性化,对于非业务性的功能,允许用户根据自己的需求和工作习惯进行自定义。
比如下图,在列表页,我们为用户提供了自定义筛选条件和表格字段的设置。

3、提供有效决策信息

由于业务复杂,保障功能的全面,带来的结果通常是操作和选项较多,如果没有任何指引,B端产品的用户通常无法做出合适的选择。
比如下图的添加商品,根据不同的使用场景,产品为用户提供了三种添加商品的方式:

只有三个选择,看似没有任何操作难度,但用户面对未知功能时,通常会根据自己过往的工作经验,选择熟悉的功能,这样一来,可能会误增了工作量,因此在设计上,要提供辅助介绍说明,帮助用户决策。

我们在此基础上,为第一次使用该功能的用户又做了优化,除了消息提示框,还通过标签强化视觉重点,推荐最适合新用户的选择,添加商品的文案也改的更通俗易懂。

交互 — 以用户效率为中心

1、  提升用户行为效率

无论B端还是C端产品,都有一个共同的体验目标:提升操作效率,高效率意味着用户通过更少的操作,更少的时间完成任务,实现降低成本的目标。在C端产品中,常见的提升效率的方式有:1、根据用户行为的流程分析,推荐相应功能;2、聚合用户行为,缩短操作路径;3、转移用户操作成本,让产品承担更多的用户引导、行为判断和行为记忆,我们可以从以上几点切入优化B端操作效率。

引导用户操作

在C端产品中,经常会有根据用户的操作行为,产品给出相应的推荐操作,如截屏后,在用微信发信息时,系统会提示是否要发送截图,这种在操作过程中增加相关功能的曝光或引导,提高用户操作效率的同时也不影响流程的顺畅进行。
下图是商品管理页,用户首次进入时,可以根据用户触发的操作推荐相关的帮助引导。

手动创建商品时,需要完善很多商品信息,可以为经常出错的内容预设提示,先发的避免用户出现错误。

在收起/展开菜单栏时,提示快捷键功能。

/ 优化任务路径

B端产品中通常会有一个任务关联一些子任务,如果用户在子任务中遇到困难,往往会造成整个任务效率的降低甚至任务中断。

比如在手动创建商品的流程中,需要将商品信息推送到渠道线上店才算创建成功,所以在创建商品前,需要完成渠道线上店的创建。针对这种关键子任务,我们可以尝试并行任务,在选择线上店时,增加创建线上店的入口,将任务连贯起来。还可以通过操作的合并,比如保存和添加同步进行,提升整体的任务效率。

2、弱化低效感知

好的产品体验,不止强调功能,还会在意体验中的感受,设计也可以左右用户感知产品效率的快与慢。

/ 等待时间可感知

用户对等待的耐受度是有限的,等待时间在2s内是相对愉悦的,在时间不可控或时间较长的情况下,我们应尽可能缩短用户的感知时间。

比如在下图中,用户完成新手配置后,产品有个加载的过程,通过加载动画和加载步骤的分解,告知用户系统在运行中,缩短感知时间的同时消除用户的负面情绪。

/ 容错性设计

在产品使用过程中,经常会出现因用户“犯错”而导致的任务中断或失败,这里的“犯错”,通常是因为用户操作偏离产品的使用要求,但这并不是用户的错,人不是精密的仪器,好的体验应该包含这部分“错误”。

比如录入数据时,应给予实时的提醒,让用户可以及时更正,而不是等到提交时才抛出错误提示,还有比如在数字输入框中误输入其他字符时,自动帮用户清除等。

在涉及对用户影响较大、重要且不可挽回的操作时,给出提示。

情感 — 关注情绪感受

在整段体验感受中,情绪最强烈和结束时的感受影响着用户对整个体验好与坏的判断,这个现象就是峰终定律,因此我们可以通过关注这些关键时刻,来确保用户对整段体验是感到愉悦的。


1、减少负峰

消极的情绪,不仅影响用户对产品的体验感受,最终还会落到降低效率上,因此在设计时,我们要考虑减少用户的消极情绪。

/ 提供明确反馈

用户使用产品的过程就像是与产品进行“对话”,良好明确的反馈能帮助用户理解和使用产品,在工作完成时,应告知用户已完成,出错时,告知用户哪个环节错了,如何改进或提供帮助,不要让用户去猜,而是主动为用户提供解决方案,提供确定感。

比如在创建商品的流程中,商品创建完成后要推送到渠道线上店,中间有一段较长时间的等待,在设计时,根据推送中、推送完成、推送失败,分别提供了3种对应场景的提示,让用户知道当前任务进展,以及展示相关对应的操作,即使任务失败,用户也知该如何处理,增加用户的控制感。

/ 任务中断可回溯

在B端产品中,经常会出现决策信息多,处理链路长,需反复多次进入任务流程的情况,当任务被迫中断时,用户情绪会受到影响,且用户对未完成或中断的任务往往比已完成的记忆更深刻,针对这类情况,我们需提供可回溯的设计,帮助用户顺利完成任务。

比如在将商品推送到渠道线上店时,同步过程中,用户可以离开当前页面进行其他操作,系统会将推送结果展示在列表页,用户可以通过列表页,重新推送或者编辑修改后再推送,直至完成任务。

2、结束于正峰

在完成任务后,可以触发氛围动效反馈成就,给用户积极的结尾。

写在最后

以上就是我基于B端产品特征,和C端产品的体验思维,用“B+C”的设计思维尝试探索优化B端产品体验的一些方案尝试。“B+C”的设计思维,其本质是想找到业务与体验的平衡,作为B端设计师,好的用户体验一定是与业务紧密结合的,与业务匹配的体验优化才有其意义和价值。


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

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

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

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

浅析:设计趋势之开源设计

鹤鹤

什么是开源设计(Open Source Design)

在讲开源设计前,我们或许可以先讲讲开源一词是指什么。

开源全称开放源代码,开源软件最大的特点是开放,也就是任何人都可以得到软件的源代码,加以修改学习,甚至重新发放,当然是在版权限制范围之内。虽然开源一词最初是为软件开发而创造的,但现如今开源所涉及的领域也极其广阔,并不只是包括软件领域,如医药领域的药物开发开源、文化领域的书籍到期开源等等所以开源设计已包含了更广泛的含义,它包括了由任何人或者团队自由共享、协作的设计方案、项目、产品。

我们来看几个大型开源的设计了解一下~

开源设计资源举例

Ant Design

阿里的开源系统后台组件库

https://ant.design

ECharts

百度推出的开源图表

https://echarts.apache.org/

Unsplash 

全球知名图片开源平台 

https://unsplash.com

所以我们不难发现开源设计都有以下特点: 

免费(大部分是):开源设计的一个关键要素是它们通常(但不总是!)免费。这是一个重要因素,因为闭源设计通常需要花费不菲的价格或者冒着侵犯版权的风险去使用。 

思想碰撞:更多的设计师或者创意爱好者共同为一个创意提出自己的见解和再设计。


设计开源领域广阔:设计开源领域也几乎涵盖了所有的设计和创意领域如平面设计、三维设计、用户体验设计、环境设计、建筑设计、服装设计、插画、动画设计等等 

但是许多人可能会有一个疑问,开源设计和以往的素材网站或者源文件售卖网站有什么区别呢? 

在我看来,开源网站与传统售卖设计资源的网站最大的区别是开放与共建,以figma的社区为例,作者发布作品后,任何人都可以对其作品进行redesign甚至remix,这极大的提高了设计师的兴趣,每个人都希望自己的作品能被他人看到,也希望自己的创意能与他人的创意进行更好的结合,这是一个多么美好的场景。而传统网站只是冷冰冰的展示文件售卖资源,缺少了设计中的灵魂。 

那说了这么多,开源设计到底有哪些优势呢?

开源设计的优势 

提升设计效率:设计师不应花费时间去解决别人已经解决的问题,比如当我设计一个新项目时,无需从零开始设计系统组件,可以直接使用Ant Design、Ant Mobile Design等现有组件库。


增加学习机会:通过开源社区,设计人员可以从其他人所做的项目中学习,并与专业人员交流经验。 

提高设计质量:设计师自己看本人作品时,往往是身在其中不知如何下手,而将作品发布到更广泛的社区有助于设计师获得有价值的反馈以改进他们的作品。 

提升品牌价值:对设计开源后,公司品牌能在某些领域内获得传播,提升品牌价值。并且在招募人才时也能成为有吸引力的一项条件。 

提升个人价值:一个设计师想要提升个人价值和影响力,可以用开源作品来在行业内获得一定口碑,甚至直接将用户流量转化为订单,或许是更简单且容易的事情。 

从这些优势中不难发现,在开源生态中,我们的作品不再是一座孤岛,通过互联网,我们的作品可以和任何人进行链接并且产生共鸣,提升品牌和个人的价值,所以每个人都值得感受开源的美好。 

但开源的同时不可避免的会带来许多新的问题和挑战,让我们一起来看一下。

开源设计带来了哪些挑战 

知识产权问题:在开源社区中,设计师可能不清楚其创作的知识产权。因此,他们可能会不自知地侵犯其他设计师的知识产权。 

设计门槛问题:设计开源意味着设计师的门槛变低,任何人都可以随意使用开源的设计项目,导致设计师不再愿意花心血创作。 

设计师竞争力下降:开源设计意味着普通的设计内容已不需要单独的设计师来完成,顶尖设计师的机会会更多,而普通设计师的竞争力会明显下降。 

随着这些挑战的来临,如何更好的面对设计领域的开源是值得深思的问题,既要保护设计师的自身利益,也要让设计行业在开放、共享的环境下拥抱变革,所以在未来的道路上,我们每个人都可以尝试用自身的方法去探索未来,让每个人都能成为时代浪潮中的一朵浪花。


作者:芝麻侃设计
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

作者:芝麻侃设计     来源:站酷

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

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

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

2023最新设计趋势预测!酸性设计、NFT持续爆火!

鹤鹤

设计趋势每年都在不断地变化及轮回,多年前的风格技法在结合了当下的设计元素后,又会给我们展现出不同以往的主流时尚。

“趋势不一定每年都会更新,但趋势是我们设计的风向标。”

基于对网络数据的搜集及分析,我们对2023年设计趋势做出了预测。

无论是否顺应趋势,我们都应该了解趋势,拥抱变化,这才是我们设计师的准则。

NO.1 3D立体元素

借助当今的软件和技术,3D创作已经不再被神话,越来越多的设计师开始在自己的作品中运用3D元素。





下图是Droga5为格林威治(Greenwich)创作的一系列视觉设计,这组设计利用3D图形,创造了更醒目的视觉效果,将格林威治宣传为伦敦的新创意社区。



在手机品牌宣传物料中,设计师将3D元素与手机进行了紧密结合,这样的视觉样式在市场中很快便能脱颖而出。



NO.2 酸性设计

提起“酸”,大家下意识会想到酸的味道,而所谓的酸性设计更多表现的是一种设计理念。

酸性设计大多画面元素丰富,各种金属、玻璃、流体渐变、镭射等科技感的元素都会运用其中,这也导致这类作品十分强调艺术的视觉冲击性。



乍一看酸性设计会给人一种混乱失调的感觉,而实际上酸性设计并不止是某一种单一的设计风格,而是一种视觉情绪的表达。当下的暗黑金属风、二次元的可爱风、明显的幻彩渐变风格……往往都含有酸性设计的影子。



NO.3 复古怀旧风

回看设计领域每一年的发展,“复古怀旧”一直是必不可少的关键词。

无论是品牌形象,亦或是包装设计,设计师们频频用现代手法诠释复古之风。



还有传媒集团CNET的品牌重塑,在现代时尚元素的基础上,还融合了复古插画,整体设计从1950-1970年代的美国新闻行业中汲取的灵感。



NO.4 艺术衬线字体

最近,衬线字体在品牌设计中的出镜率极高。

不少网站的设计都是围绕着衬线字体作为构图中唯一或主要的设计元素而存在。





Stradivarius是诞生于1994年的西班牙女装品牌,与ZARA隶属同一公司。

2022年2月初,Stradivarius推出了全新的Logo视觉,衬线字体更容易彰显女性简洁现代的气质外,同时兼具女性力量。



NO.5 NFT艺术

近两年,NFT可以说是对设计、艺术、技术行业产生冲击最大的新事物之一了。



NFT与平面设计联系起来,就是我们所说的数字平面艺术。它的到来对设计师影响有很大变化,横向能力要求有所提高,比如了解虚拟数字化设计,以及对全新审美和新三维技术有更高的要求。

以下这幅《Metafisica》便是非常热门的NFT作品。



NO.6 超萌趣emoji

表情符号在如今是一个超越文本并能得到广泛认知、跨越文化和多领域的视觉语言。



单一的枯燥图标很难满足多元化场景下情感的表达,于是,动态emoji图标来了,它能带来更强的视觉欣赏体验。



NO.7 高饱和度撞色

高饱和度色彩是年轻的色彩,它是先天的乐天派,同时也是情感的直接表达。

可尽管“吸睛”对品牌而言十分重要,但在设计之余要注意色彩平衡,以免混用色彩,很容易引起视觉疲惫。





NO.8 极简化设计

极简主义杜绝一切多余的装饰,形成独特而简单的视觉语言,用最简洁的表现形式勾勒出产品最基本的形态



简洁的图形设计摒弃了多余的图案、文理等装饰样式,为真正重要的信息创造了呼吸的空间。

留白,是最高级的美。



NO.9 氛围手写字体

将富有表现力的手写字体写在设计中,能为作品带来不一样的氛围感。

随手一写,便是一幅“画”!





NO.10 玻璃拟物化

2022年,我们在Dribbble或Behance中会发现很多设计师都开始有意识地采用“玻璃拟物化”美学的设计。相信在2023年,我们会看见更丰富的表达~

毛玻璃效果广泛应用于UI设计之中,在摹客DT中也能快速完成。



使用玻璃拟物化设计的界面,由于毛玻璃的通透性,会呈现出一种虚实结合的美感。



除此以外,我们还可以看到的,这一趋势已经明显转移到了玻璃和水晶质感上,而且以令人难以置信的用立体拟真度将图形设计提升到了一个全新的高度。所以,2023我们也将看到更多与全息和3D趋势相辅相成的透明质感和逼真的玻璃背景等元素的设计。



结语

2023年的设计趋势给我们展示了设计的无尽可能,设计师们可以创作出更多超乎寻常的非凡设计,为用户营造出独树一帜的全新体验。

身为设计师,我们要持续积累优质的设计素材,要知道设计趋势因人而异,我们能做的就是选择合适的风格应用在设计中,才能发挥它不可估量的价值!

作者:摹客设计云

转载请注明:站酷

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


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


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


7个优秀网页设计趋势!

博博

关注趋势本质上就是关注未来可能存在的形态。很多营销需求和优秀设计趋势是相互关联的,两者之间的关联更像是一种动态的同步。

2022设计趋势 优秀网页设计 网页设计 网页设计趋势

很多时候趋势并不一定是全新的东西,它们往往是服务于当下和未来的需求,有很多趋势存在了一些年头,它们在现在发挥着作用,但是在未来可能会发挥更大的效用。所以,当我们在查看这些设计趋势的时候,需要注意,它们必须是服务于用户,服务于品牌和企业。

2022设计趋势 优秀网页设计 网页设计 网页设计趋势

更多设计趋势:


1、新极简主义


的确,极简主义一直在某种程度上流行,但是 2022 年出现的新极简主义的浪潮,比起传统的极简主义设计更加在意用户注意力的吸引。这种新极简主义的设计会采用更加大胆、 生动、明亮的色彩来填补留白,这种设计使得设计保持简约的同时,更加富有调性,在简约的框架下制造一种别样的华丽,营造令人亢奋的氛围。

2022设计趋势 优秀网页设计 网页设计 网页设计趋势

干净清晰、生动的新极简主义风格在品牌推广的过程中也更加受欢迎,大量的留白和跳脱的视觉焦点让整个视觉更加抓人眼球,也使得品牌给人的感知更加新鲜独特。

2022设计趋势 优秀网页设计 网页设计 网页设计趋势

新极简主义风格,对比度在深色主题下得到了进一步的提升。

2022设计趋势 优秀网页设计 网页设计 网页设计趋势

这种设计并不意味着传统的极简主义已经被用户抛弃,很多企业依然会青睐更加传统的单色极简主义设计,不过其中多少会增加一些明亮的色彩作为点缀。

2、新粗野主义


从 1950 年开始,粗野主义就是年轻化、反叛、反主流、标新立异的设计风格。在过去的几十年当中,这种设计风格一直随着时代的发展而自我迭代,新粗野主义更加强调创造力、 大胆前卫的新奇元素,而这也正好符合很多品牌对于新奇性的追求,它可以瞬间抓住用户的注意力。不过,这种风格的使用需要控制好程度,否则很容易失控。

粗野主义经久不衰的秘诀是什么?是未经打磨、粗粝而原始的素材,它让观看者忍不住想要改进它,这种未完成的原始感会在情感上吸引观众,这在营销上是无价的优势。

2022设计趋势 优秀网页设计 网页设计 网页设计趋势

粗野主义在设计上并非看起来那么粗糙,相反它更加需要高度的专业性来控制它粗野的程度。设计师需要敏锐地感知到观看者改进地欲望,让设计粗野而不低级,原始而不拙劣。

2022设计趋势 优秀网页设计 网页设计 网页设计趋势

新粗野主义柔糅合了极简主义和大胆地排版,它依赖看似粗野地视觉冲击:高对比度、粗粝地阴影,撞色、 简约的背景、不对称的布局、 未经修饰的照片,新粗野主义偏好基础款的加粗字体,跟注重可读性而不是舒适所制造的视觉吸引力。

这个网站就是一个典型的例子:

3、强调参与感的交互


这一趋势在绝大多数的趋势排行榜当中,都占据首位。随着技术的进步,用户和数字媒体之间的交互正在增加,引人入胜的交互已经不仅仅停留在响应式设计当中,如今它已经开始关注心理和生理的逻辑,开始全方位地调动视觉、听觉、 嗅觉、触觉、味觉乃至于运动体感。

这种趋势旨在帮助用户体验真实地感觉,在完成交互地基础上,触发用户地情绪反应和生理反应,热气腾腾地馅饼视频让人垂涎,游戏中虚拟地对手让人肾上腺素激增。

交互所制造地参与感,在某种程度上是实际地物理产品地替代物,用户可以从不同角度来缩放查看产品,了解细节,选择尺寸,挑选颜色。

交互过程中,手指和屏幕之间地触摸交互开始变得丰富,开始变得有意味,它成为了用户和虚拟世界之间沟通地桥梁,开始有游戏地乐趣,有更具设计感地交互环节。用户也可以根据自己地喜好,对界面进行更多样的个性化处理。

具有参与感的交互是我们的未来。

4、关注人和叙事


2022 年是疫情开始后的第三年,隔离使得人们对于照片所呈现出的故事和情感,有着更为强烈的情绪反应。在极简主义设计当中,富有表现力的人物照片是最为流行的元素之一,这类照片搭配上简短的文字,简练的口号,一些带有宏大叙事特质的文字引用,时常能够更好地营造出故事感。

2022设计趋势 优秀网页设计 网页设计 网页设计趋势

不用担心主屏页面太长没人看,只要随着用户滚动,故事会随之逐步展开,用户可以在照片、 标题、视频、动画和文本地指引下,看到整个故事有步骤地呈现。

在这当中,富有表现力的人物照片是吸引用户注意力的关键要素。

另外就是页面的 Banner 的部分,强调主题和内容的标题文本,是用户从屏幕上获取的重要信息之一。

如今的用户越来越偏好在详细阅读内容之前,快速浏览一下全局的做法,这也使得 Scrollytelling(滚动叙事:通过滚动触发音频、视频、 动画效果的一种技术)这种渐进式叙事方式,可以像电影一样将故事呈现在用户眼前。

2022设计趋势 优秀网页设计 网页设计 网页设计趋势

Scrollytelling 适合大量的内容呈现,比如对于公司和产品的描述,对于数据呈现或者认知要求较高的内容,它适合学习和记忆性内容的呈现。


5、3D图形的运用


3D 图形设计正在越来越流行,因为它确实是吸引用户注意力的最主要的工具之一。3D 图像无论有多么奇异,它本身都会被认为是有真实感的,明确的体积,精致的建模,所有的一切都令人着迷。很多时候,用户停留在有3D元素的页面上,是为了更细致的欣赏。

3D 图形设计的趋势从来都没有减退,它正在进入更多的领域,甚至进入了品牌推广的领域。3D 动画图标比过去更能吸引用户的注意力。

2022设计趋势 优秀网页设计 网页设计 网页设计趋势


6、抽象插画


我们通常说的抽象插画,指的是带有明确几何特征的插画,它们被广泛地应用于网站和 APP,在社交媒体和包装设计中也越来越多的存在。

2022设计趋势 优秀网页设计 网页设计 网页设计趋势

抽象插画之所以会如此成功,是因为它们大多有着吸引人的生动色彩和良好对比度,视觉上的美感和极简主义的风格特质,它们成为视觉的焦点,为整个设计提升视觉。

抽象插画在品牌营销场景下的应用也很多,它们在这个时候是贴合品牌推广的诉求的:通过色彩和形式来吸引用户来关注品牌的形象和名称。

7、超大文本版式


这种趋势的特别之处是其中的文本字体元素是完全独立的。这些文本不仅仅是用来传递信息的,它们还充当着拉升页面视觉效果的重要作用,它们结合动画和交互,成为页面中醒目的亮点。

超大字体的优点在于,它和很多设计风格是相得益彰的,加粗的大字体在极简主义风格的页面上不会显得突兀,在元素丰富的页面上,同样可以起到优秀的点缀作用。这些文本内容可以和纤细和小尺寸的元素协同,而后者则衬托出它本身的醒目。

超大文本字体的另一个好处是有效地减少网页上的图像的使用,缩短加载时间,提升移动端的可用性。

这种设计元素最重要的,是选择易读且符合品牌调性的字体。


总结


这么多年来,我们看到来这么多的趋势,很多趋势是一以贯之持续出现,有的趋势则如同流星一样一闪而逝。好的趋势不断迭代升级,并且持续存在,但是最重要的,始终是那些选择合理的方案,并且坚持改进设计,让趋势服务于终端的产品和用户的设计师。

让趋势服务于你,不要盲目地追趋势!



作者:陈子木



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系01063334945。 



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



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

2022交互设计趋势观察|PC端 上

鹤鹤

随着移动互联网的发展,原本PC互联网连接商业支付、购买商品、浏览信息流等的能力已经转移到移动端,而PC互联网更加专注于其他领域的优势:

  • 1、更大的屏幕能够包含更多的信息,并获得更深度的沉浸感受,如观影、浏览网页等。
  • 2、通过鼠标、键盘、触控板、手绘板的连接,提供了更多的交互方式,能够执行更加繁杂的工作任务,如表格编辑、程序开发、视频制作、文档书写、图像制图、3D制图等。
  • 3、得益于显卡、CPU、存储、USB插槽、显示器等的扩展性,在大型游戏、大型3D渲染、复杂制图上相较于手机端依然有一定优势。
  • 4、从场景(办公场景、娱乐场景)来看,PC端移动性较差,但同时基于该特点,PC端能够更加专注当前任务。模块化、多人协同、多端协同的发展正不断地提升用户的使用体验。

下面是我观察到的目前比较主流的交互设计点,与大家分享。分别是:

  • 一、无缝体验
  • 二、交互更加高效
  • 三、更加智能化、降低门槛、降低门槛、降低门槛
  • 四、更加模块化
  • 五、更加简洁、甄别关键任务
  • 六、3D动效、大图、带来更深的沉浸感
  • 七、协同合作的兴起

一、无缝体验

典型的案例就是苹果的Mac系统与Ios系统越发趋同,都采用了卡片化、模块化,整个交互规范、视觉感受都一致以达到多端统一。同时信息可以自由流转:比如在同一Apple账号下,Mac与IOS中复制的信息可以进行同步粘贴。备忘录、日历、提醒事项、录音中的信息进行流转,在任何一台Mac上登录Apple账号后都可以进行同步。

在国内,B站的网页端与App端的体验也逐步趋同,框架设计上更加卡片化与扁平化。信息流转上,手机上暂停的视频到网页端继续播放,实现了无缝切换。

淘宝首页:从过去复杂的信息流导航变为现在更加简洁的个性推荐卡片。整体体验与淘宝手机端一致。


 二、交互更加高效

总结:精简无关信息,关注最重要的核心任务,减少用户跳出,沉浸式心流设计。

1、登录方式更加高效

许多网页接入腾讯、阿里的生态,支持扫码关注公众号/手机验证码即可完成注册。省去了用户编辑个人信息、输入邮箱、输入密码等复杂的交互流程。

2、减少页面跳转

心流式体验设计是这几年很热门的词,指的是通过优化用户体验让用户能够沉浸式地高效完成目标任务。这需要做到产品的交互习惯满足用户使用习惯,并且交互流程满足用户预期。过于频繁的弹窗打扰和页面跳转的等待时间都会影响用户进入心流。

比如,例如飞书审批,审批详情不需要跳转,点击卡片即左侧弹出详情页弹窗;让用户可以在同一个页面即可浏览信息,不需要进行跳转到新的页面进行查看,方便用户完成批量的审批任务。

再比如:阿里云,开通服务的时候不需要跳转,而是在侧边弹出订单弹窗,方便用户操作。

3、交互组件的易用性迭代,不再局限于大弹窗

上面说到,频繁的弹窗提醒也会影响用户进入心流,用户在对表单、画布中的内容进行删除的时候,如果使用全屏二次提醒弹窗,会感到创作过程被打断。

钉钉宜搭:卡片画布类产品,删除操作时,不局限于大弹窗,而是用靠近按钮的小弹窗,使鼠标的滑动路径更短,操作更加简便;并且在不过多打扰用户的前提下,完成了目标操作。

三、更加智能化,降低门槛、降低门槛、降低门槛

复杂性守恒定律由Larry Tesler于1986年提出,也称泰斯勒定律。指的是“任何系统都存在其固有的复杂性,且无法被减少,只能设法调整、平衡。我们要考虑的是,怎么样更好地处理它,让用户简单、高效地使用它”。

很多的中后台系统中很多表单会存在大量的配置项,这些配置项是否可以简化,让平台变得更简单智能?大部分时候答案都是否定的,过度追求简化往往容易弄巧成拙。功能逻辑易于解释与理解才是更好的方案,当你试图简化降低复杂度,可能在其他地方埋了雷。

其中一个解决方案是将复杂度转交给系统,苹果公司的黑盒理论与此互通;就是用户不需要了解系统或功能背后的实现逻辑,只需要关注呈现在用户眼前的交互界面即可。如今数据智能化处理正不断发展,我们也看到了智能化在PC端领域的应用。

1、剪映

剪映相比于老牌视频编辑软件更加简单,提供各种在线特效模板,来降低任务复杂度。相比传统的PR、AE软件需要本地存储预设文件,或者手动编辑简单了很多。用户不需要知道背后的实现的技术原理,也不需要掌握过多的特效制作、调色技巧即可完成视频的剪辑、调色工作。

2、钉钉宜搭画布

推荐组件功能:用户在进行流程搭建时,不需要从左侧组件区拖拽组件,而是点击连接线中间来添加组件。如果可以其实还可以更进一步,就是根据后台数据分析创建目标流程需要的组件,向用户主动推荐相关组件,以此来降低用户的创建门槛。

四、更加模块化

随着传统业务向互联网转型越发普遍,线下业务流程转到线上的需求场景越来越多,一个单一的系统不能完全满足所有的业务场景需求,由此需要一个更加灵活模块化的系统来针对不同的应用场景来应用不同的产品架构。而该系统中的功能框架、交互组件又可以重复利用,于是更加灵活、模块化、可自定义配置的系统后台越发受到欢迎。

1、飞书、钉钉易搭

飞书、钉钉易搭内的审批流程、会议系统、工单系统都可以通过模块化的组件进行高效搭建,不需要代码即可像搭积木一样实现用户的自定义需求。

2、天猫优品

阿里的天猫优品电器店线下门店设计平台,整理了线下门店所需的16个模块(前台、小家电中岛、洗衣机、橱窗、空调、吧台等),通过线上三维化场景直接进行可视化设计,所见即所得,并且能够模拟现场灯光效果,根据门店现场规格,直接在三维空间里修改,快速导出效果图;非常高效地完成了其他门店的需求化定制。

五、更加简洁,甄别关键任务,路径缩得更短

1、抖音、快手网页端

抖音网页端的用户体验沿袭了手机App端的风格,用户进入网页的核心目的就是看短视频打发时间,于是进入首页即可看短视频,不需要用户手动选择分类,并且手机端的用户偏好通过用户的账号同步至网页端,有了很顺畅的用户体验。

相比快手网页版,快手延续了常规视频网站的交互方式,将视频内容分为短视频、直播、同城、长视频、小剧场等多个类别,由用户自主去选择观看的内容,内容虽然更加多元,但确实路径过长,不够直接。

2、淘宝、京东首页

再举个例子,新版的淘宝网页端不再像个门户网站导航,而是通过数据分析用户喜好来主动推荐代替用户自己选择。用户来淘宝网页端,其实并不是买东西,大众用户已经习惯了在手机上进行支付,到了网页端反而会不适应。用户来到淘宝网页端的更多目的就是逛,看有没有自己想要的东西,遇到喜欢的,就点进去看了。于是新版淘宝通过个性化推荐把过去复杂的活动运营页板块、特价板块、品类板块替换掉了,让用户在网页端获得更好的“逛街”体验。

而京东,在首页做了复杂的流量分发设计,通过不同的频道、不同的板块将用户引流至相关的专题页面,再进行商品浏览。本质上来说,用户来到淘宝、来到京东的目的都是因为闲,而淘宝的通过数据智能,大数据精准推荐用户喜欢的商品,简化了用户的使用路径,并且使整体页面更加简洁。

六、微动效、大图、3D元素带来更加深的视觉刺激

网页的官网、首页承担着产品介绍、流量分发、增强品牌印象等的职责。我观察到越来越多产品官网都开始采用3D元素、视频背景、大图元素、微动效来让页面呈现更加具有质感和动感。

1、3D元素

它是由Web3D技术的发展而兴起,能够给网页Banner带来更强的视觉吸引力,同时也强化了公司融合了AI技术的品牌印象。如法大大官网、腾讯云、阿里云的首页Banner展示。法大大首页Banner,鼠标滚轮向下滚动3D元素会相应产生变动,文案与元素一静一动,对比明显,也更易于用户注意到文案信息。

2、大图、视频

大疆官网首屏采用了全画幅大图的形式展示热门产品,下方的产品推荐页自动播放宣传视频,提升了页面的视觉冲击力,展示了其科技属性。

七、协同合作兴起

疫情时期,线上办公的需求和频率激增,线上协作兴起,许多办公软件都有了多人场景编辑功能。特别是对于复杂的项目,需要团队成员共同完成,协同合作的功能越来越受欢迎。

比如我们熟悉的figma,逐渐取代了传统UI设计软件ps、sketch等的头部地位,其中的项目协同功能更是广受欢迎。只需要发送项目链接邀请成员即可进行项目协作,还支持多人标注、语音沟通,大大提升了工作效率。

许多办公软件也都上线了类似的功能,比如幕布可以通过设置权限、发送链接或二维码来邀请协作者共同编辑文档,为产品的使用场景提供了更多可能。

总结

曾鸣在《未来商业20讲》里说:“未来的互联网世界的两大趋势是数据智能、网络效应”。 

这在PC端也得到了印证。淘宝网首页、抖音首页、哔哩哔哩网页端将PC端与APP端的数据进行互通,并对用户行为偏好数据进行分析,为用户提供更加精准的信息流的同时,还使得页面的交互更加简单,视觉效果更加简洁,过去依赖用户自主选择进行流量分发的形式将会越来越弱势。

在工具类产品中,利用数据智能化可以将用户操作上的复杂度转移给系统,从而降低用户使用门槛,提升用户体验。与此同时,工具类平台也越发灵活化化,通过模块化设计来自定义搭建不同用户的使用需求的产品,还能节省资源建设成本。

网络效应的部分应用体现在用户在使用工具类产品中,不再是孤单的个体,而是能通过线上协同,让用户与用户之间能够产生共同协作,共同交流,更加方便地完成任务。

作者:为美好而设计

转载请注明:站酷

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


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


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

2022 年 UXUI 设计趋势

鹤鹤

2022 年即将过半,疫情在家的我们重新花一些时间,回顾今年最引为人注目的一些设计趋势,有些已经变成现实,有些可能即将会发生。在过去的这十几年里,全国的互联网和移动互联网行业蓬勃发展,引发了 UX / UI 行业的火爆,无论是在设计技术方面还是在设计实践方面维持着快速发展状态。设计探索受到了前所未有的关注。创新也永不停止,正在向各个方向延伸——有的是昙花一现,有的是重塑想象,有的却循环往复。


下面我们将更详细地向你探讨一些 2022 年的设计趋势。

超级大的字体排版



The Badass Project 捣蛋派计划

过去几年里,大字排版的趋势越来越明显,字体尺寸也在增加!接下来,字体更大且几乎没有图像的时尚 英雄形象 网页设计,将成为主流风格。

(英雄形象在网页设计中是一个特定的网页横幅,通常是一个包含与内容相关的大图像页眉)

设计师和用户都越来越习惯在登陆页面前面和中心位置使用超大文字。无论是怪诞的无衬线字体还是现代奢华的衬线字体——这一趋势就是在于越大越好。通过精心选择的字体,网站可以做出比以往更大胆的宣传,以吸引受众的注意力并有效地信息传达。



这些字体选择通过 引人注目的动画进一步生动起来。设计师正在实现通过鼠标移动或向下滚动页面使排版移动并与用户产生互动的创造性效果。以粗体、动画和交互式排版为核心,许多网站也就不使用任何背景图像,让外观变得干净且精致。



MAFF

所以一定要试试这种趋势:把文本尺寸放大,可以将其放置在一些图像上,制作大尺寸的动态标题,让用户从中获得乐趣。最重要的是,要勇于呈现大胆强烈视觉效果,从而可以立即吸引用户的注意力。

案例:Medium 官网——https://medium.com/


复古风格回归



Shakib - Sneakerbumb

在经历了充满不确定性和阴郁的两年,我们学会了寻找和珍惜任何享受幸福的机会。我们大量独处时光的花在了数字空间上,这一现象也不例外。



La puce à l’oreille

为了回应这一需求,设计师从 80 年代和 90 年代获得了巨大的灵感;将色彩丰富、质感丰富、复古风格的主题与现代气息结合起来,打造真实的外观。鲜艳的色彩搭配柔和蜡笔肌理、古怪的排版、纹理丰富的背景、跨页面网格的布局、非传统的图像和古怪的插图,都可能会在接下来的一年吸引你的注意力。



Kristen Ryan for MakeReign

随着这一切的发生,我们甚至可以说,在过去几年里,每个人都学会了赋予自己一些自由的生活态度。这为我们提供了更多的实验空间,当然也为设计和其他领域带来了让人愉快的成果。这就是说,设计师们觉得有必要从简单和实用的用户体验转向有趣、搞笑甚至愚蠢的交互。出人意料的是,让别人微笑可能会是你的网站或 app 令人印象深刻的一种方式。

新野兽派设计



Blumenkopf

野兽派设计从 1950 年代的野兽派建筑运动中汲取灵感,延用其不修边幅、毛糙粗狂的外观形式,和故意做出的丑陋效果。就像在建筑中一样,野蛮主义在网站中揭露和解构(甚至庆祝)这种媒介的底层结构和重要原则。原始、大胆和反动的本性使野兽派设计一直处于数字空间的边缘,因为原始是互联网的全部。然而,近年来,野兽派一直在缓慢而稳定地复苏,现在被一些人称为新野兽派。



Caroselling


随着互联网上干净、传统的网站越来越多,个人网站变得难以脱颖而出。转向野兽派,提供真诚、原始但独特的视觉体验,可能正是提升你下一个网站的方式。


无网格布局,强烈的调色板,重叠的元素,拥挤和几乎混乱的设计只是你的野兽主义工具包的一部分。将它们与等宽和奇怪大小的排版结合起来,缺乏或极少的导航,这相当于没有额外的“空间”或子页面的“开放式版面”,你会得到一个引人注目的粗野派外观。



Work with us


案例:阿里云设计官网——Alibaba Cloud Design - Not Design Just Future


当然,还有更多,但野兽派网页设计的定义规则是没有规则;它反对既定的规则和惯例。更重要的是,你需要用更强烈的意义价值和意图来将你的野兽派杰作与另一个设计糟糕的网站区分开来。


本机桌面客户端



Messenger


Figma、Todoist、Slack和 Messenger 等网站和移动应用程序都把时间和精力集中在桌面客户端版本。



Todoist


越来越多的应用程序似乎也在效仿,因为研究表明,这样用户会感到 更舒适、更安全。用户希望自己的应用程序远离互联网浏览器,远离所有打开的标签,回到指定的应用程序窗口,让人感觉更宽敞、更专注。在使用这些应用程序时,不需要处理数分散注意力的标签,这无疑是一种进步!此外,将通知直接发送到桌面,我们的通知管理也必然得到改善。



Figma

本地化用户体验



为阿拉伯语国家的谷歌搜索页面布局


用户研究团队利用 人类心理学 领域的洞察,以及 可用性测试,已经能够塑造界面,为用户提供最大的满意度和愉快的体验感受。几十年来,这一直是用户体验设计的核心。

随着技术的快速进步,我们看到数字产品体验的保真度有了空前的提高。这一发展也为不同用户群体之间的细微差异提供了新的理解。年龄、文化、地理位置、日常习惯、社会结构(以及其他因素)的差异可能会导致人们对什么构成令人满意用户体验的期望存在显著的差异。因此,这些体验可能需要类似的设计,但肯定不是相同的设计方法。


随着技术和研究方法的到位,我们开始看到一款产品的多种变体同时推出,以满足不同用户的需求。随着许多大品牌都在努力扩大他们的用户群体,创造本地化的产品体验可能会成为一种大趋势——如果不是标准的话。


荣誉提名:包容性



NhuSW- Everyfit — Fitness for Everyone

包容性不仅是一种趋势,也是一种运作模式;人类生存和共存是一个不可否认的重要方面。在日益全球化的复杂世界中,我们不断意识到自己与其他个人或社群之间的差异。以同理心驾驭这些差异是我们的责任,并努力将所有文化、性别、性别、种族、能力和残疾都有意义地适当地纳入全球社会。



Spotify


随着数字空间引领着世界的全球化,它也毫无疑问地成为我们包容性努力的前沿。人们总是希望品牌和公司采用更具 包容性的叙述 和语言,并向包容性的平台、产品和服务 迈进。他们被鼓励在图像、语言和视觉语言中推动多样化的表现,这样做不仅仅是为了营销收益,而是为了更大的意义和价值。


这些是我们在 2022 年会看到的趋势和现象。记住,它们是为了提醒我们当前的总体设计趋势。可以使用它们来支持和授权您的设计决策,但不要害怕挑战它们,或用它们为人们创造更多积极有效的体验。


原文标题:UI/UX Design Trends of 2022

文章来源:Codeart

原创作者:Taras Bakusevych & Maja Mitrovikj

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

魏华的微信.png

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

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

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

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

日历

链接

个人资料

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

存档