首页

探究UI设计中形状的创意与应用

博博

在UI设计中,形状设计是一个至关重要的环节。对其选择和排列会直接影响到界面的美观度和用户的交互体验。接下来将详细探讨UI设计中的形状设计,包括其重要性、基本原则和实际应用。

 

形状可以帮助用户理解和操作界面。一个优秀的形状设计应该具有清晰、简洁和易于理解的特点,我们在平时做设计中,需要将这些原则深入到每一个细节中。

在设计中,形状的识别和理解是至关重要的。一个成功的形状设计应该能够快速地被用户识别并理解。例如,一个常见的形状可以使用不同的颜色和大小来区分主要内容和次要内容,从而引导用户的注意力。

 

1、形状的一致性

在UI设计中,一致性是一个非常重要的原则。一个好的形状设计应该在整个应用程序中保持一致,从而使用户可以轻松地导航和操作。例如,闲鱼APP里的所有的按钮可以使用相同的形状和颜色,以便用户可以轻松地识别并操作。

 

2、形状的个性化与品牌识别

一个独特的形状设计可以帮助品牌在竞争激烈的市场中脱颖而出。一个好的形状设计应该能够体现品牌的个性和价值观,从而增强品牌的识别度。使用独特的图标和标志来传达其品牌形象和价值观。例如:小米的logo、京东狗、淘宝天猫。

 

1、按钮设计

按钮是UI设计中最重要的元素之一。一个好的按钮设计应该具有清晰的形状和易于理解的标签。

按钮形状主要有直角、小圆角、全圆角三种样式。

① 直角按钮具有严谨、力量、高端的特点,适用于大牌美妆、奢侈品类产品;

 

② 小圆角按钮具有稳定、中性的感觉,适用于用户跨度较大的常规类产品中,例如微信、滴滴、抖音等;

 

③ 全圆角按钮更加温和、亲切,适用于电商类和儿童类的产品中。

 

按钮尺寸和比例根据iOS和Android的规范,按钮尺寸至少高于5.5毫米(36 pt),否则用户点击时会较为困难。同时,按钮长度固定,文字长度变化或是按钮长度根据文字长短而变化的设计方式也需要考虑文字距离按钮上下左右边距的比例关系。

总的来说,UI中按钮形状的设计需要结合具体的产品属性和界面风格,以及用户的使用习惯来进行综合考虑。

 

2、图标设计

图标是UI设计中另一种重要的具有高度概括性和视觉传达性的小尺寸图像元素。可以帮助用户快速地识别和理解功能和信息,是靠文案无法实现的。

例如,天气图标通过其形状、色彩和设计元素直观地传达不同的天气状况和气象信息,帮助人们更好地了解天气状况。又如卫生间男女图标的设计让人们易于识别和理解。

 

在UI设计中,图标的圆角度通常是怎么定义的呢?

① 大圆角:应用在以圆润、可爱为主要风格的UI设计中,以营造出更加柔和、亲切的视觉效果。

② 小圆角:小圆角作为一种微妙的细节元素,可以增加图标的层次感和细节。在追求设计质感的界面中,适当添加小圆角可以使图标更加精致和有品质感。

③ 无圆角:应用在科技或现代感的UI设计中,以营造出更加硬朗、冷峻的视觉效果。但使用需要克制,过多的直角可能会让整个界面显得生硬和冷感。

补充一点,我发现一个重要细节,就是很多人在计算内圆角数值时都存在困扰。自工作以来,我注意到这个问题影响了很多人,他们不知道如何正确地计算内圆角的数值。为了解决这个问题,通过以下方式帮助大家更好地掌握计算内圆角数值的方法。

 

3、输入框设计

输入框是用户输入信息的重要区域。在UI设计中,输入框的形状设计可以根据实际需求和设计风格进行变化。以下是一些常见的输入框形状设计:

① 方型输入框:这是最常见的输入框形状,它以方形的形式呈现,可以在其中输入文本或信息。这种设计简单明了,易于使用,适用于大多数场景。

② 圆角矩形输入框:这种输入框在四个角上采用了圆角设计,使得整个输入框看起来更加柔和、友好。这种设计在一些需要强调用户输入的场景下较为常见。

③ 下拉菜单输入框:这种输入框可以让用户从下拉菜单中选择一个选项,而不是直接在文本框中输入。这种设计适用于一些固定选项的场景,可以减少用户的输入操作。

④ 按钮式输入框:这种输入框将输入框和按钮结合在一起,用户可以点击按钮来输入信息。这种设计适用于一些需要强调点击操作的场景,例如站酷的登录。

⑤ 语音识别输入框:这种输入框允许用户通过语音来输入信息,而不是手动输入。这种设计适用于一些需要快速输入或不方便手动输入的场景,例如驾车、写字等。

总的来说,输入框的形状设计应根据实际需求和设计风格来进行选择,同时也要考虑用户的使用习惯和操作体验。

 

4、导航栏设计

导航栏是UI设计中重要的组成部分之一。它帮助用户在不同的页面之间进行切换和导航。在设计导航栏时,应考虑其位置、颜色和形状等因素。以下是一些常见的导航栏形状设计:

① 顶部导航栏:这是最常见的导航模式,位于页面顶部,可以包含网站的名称、主要的导航选项、搜索框等元素。这种设计简单明了,易于使用,适用于大多数场景。

② 侧边导航栏:这种导航模式位于页面左侧,通常用于二级导航或辅助导航。侧边导航栏可以以垂直或水平方向呈现,根据实际需求进行选择。

③ 底部导航栏:这种导航模式位于页面底部,通常用于一级目录的导航。底部导航栏可以包含网站的名称、主要的导航选项、搜索框等元素。这种设计操作方便,用户体验好,适用于大多数场景。

④ 弹出式导航栏:这种导航模式通常用于移动端应用,通过点击或滑动屏幕上的按钮或图标来唤出导航菜单。弹出式导航栏可以以垂直或水平方向呈现,根据实际需求进行选择。

总的来说,导航栏的形状设计应根据实际的导航模式和设计风格来进行选择,同时也要考虑用户的使用习惯和操作体验。好的导航设计应该简单明了、易于使用,能够提供清晰的信息架构和层级关系,帮助用户快速找到所需内容。

 

5、作为底纹设计

将形状用作底纹,可以增加图形的视觉层次感和趣味性。尤其是当使用如圆圈、条纹、曲线等形状时,可以使底纹呈现出动态感和动感。

也可以强调文字或图片中的某些元素,用来引导观者的视线,以创造出视觉焦点。比如,在一个沉闷的黑色背景上使用鲜艳的彩色形状作为底纹,可以将观者的注意力集中在那些形状上。

但是,必须着重强调的是,底纹的使用应当与整体的设计风格和主题相得益彰。若应用不当,可能会对画面的整体美感产生破坏性的影响。因此,在决定是否使用底纹时,必须慎重考虑其与整体设计的和谐度。

 

1、动态形状设计

随着技术的不断发展,动态形状设计已经成为一种趋势。通过使用动画和过渡效果,可以创建更具吸引力和互动性的界面。例如,使用渐变效果来平滑地转换不同的页面或状态。

 

2、3D和立体形状设计

3D和立体形状设计为UI设计师提供了更多的可能性。通过使用阴影、光照和深度效果,可以创建更立体、更有层次感的界面。例如,使用3D旋转效果来突出主要内容或使用阴影效果来增加界面的深度感。

 

3、可定制形状设计

随着用户对个性化需求的不断增加,可定制的形状设计变得越来越重要。用户希望根据自己的喜好和需求来调整界面。例如,允许用户自定义选择自己喜欢的页面主题风格。



作者:散落的那些
来源:站酷

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

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

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

 

B端组件设计如何支撑产品体验,什么样的界面算好用

博博

用户觉得软件不好用通常是由于操作界面不符合常识,交互逻辑出人意料导致的。用什么样的设计来支撑产品体验值得我们深入的思考。

什么样的界面算好用?

用户觉得软件不好用通常是由于操作界面不符合常识,交互逻辑出人意料导致的。

这里我们要引入三个模型的概念:实现模型,心理模型和呈现模型。

 

 

 

设计师要理解业务诉求?

用户是真的想要一匹很快的马吗?或许吧。

 

 

 

 

然后福特就发明了汽车,很好的满足了的客户的需求。

嗯!这个可能是一个很好的满足了这个客户以及一群客户的需求。

这个故事告诉我们,我们需要挖掘客户真正想要的东西,而不是停留在现有客户所说事物的表面,傻傻去找一匹很快的“马”。

接到需求后产品经理一般会在PRD评审时向设计侧讲解需求背景和功能逻辑,在这个阶段我们可以了解到产品经理规划中的用户流程和使用方式。产品原型呈现的只是无数解决方案中的一种,了解了业务诉求再回顾原型方案,经常可以带来全新的视野,并由此推导设计方案。

 

下面我们就看下如何从组件,结构,功能,状态几个层面解决设计问题。

 

一.明确功能用途

1.1 信达雅的文案

文案是界面的重要构成,却是界面设计中最不被重视的一部分。很多软件之所以用起来有一层朦胧的隔阂感,罪魁祸首就是晦涩的文案。简单的纠正文案可能会带来焕然一新的使用感受。

  • 信:语义准确,明确事件的主体客体。
  • 达:避免无效或重复文案,减少被动语态,简洁通顺地进行描述。
  • 雅:优雅且有涵养地与用户沟通。
  • 配图:有些流程或者用词比较特殊,单用语言难以描述,配上图一目了然。

 

 

 

1.2 视觉线索

图形用户界面诞生之初,界面元素对物理世界的模拟是为了便于用户将现实中的常识套用到虚拟界面上:拟物化通过质感暗示用户界面的交互方式;在扁平化时代,提供视觉线索仍然是必要的原则。拿拖拽操作来说,首先可以拖动的组件上要有把手,暗示可以捡起。组件被拿起来时要明显扩大的投影样式描绘高度,并在列表中显示一条瞄准线便于用户精确定位。

 

 

 

再比如卡片式设计,和现实中的卡片相同,它可以明确地划分出功能和信息的关系。要注意的是,视觉分区越多,页面复杂度越高,设计时需要控制平衡。

 

 

 

1.3 熟悉的组件

用户点击下拉选择器的时候,自然会期望在周围弹开一个选项浮层,因为他们用过的所有软件交互都是这样。这个就是习惯用法范式的应用(尽可能套用常规的交互方式让软件的操作容易预测,用户理解成本低)。

 

 

然而在常规组件无法承载实际需求时,有必要跳出惯用范式,通过差异的视觉样式给用户思想准备。例如一些原型图中的选择器使用了下拉的样式,触发的却是选择抽屉或者弹窗。这种意外的发生或多或少会降低用户使用时的信心,因为他们再也不确定点击下拉后会发生什么。通过特殊与常规的区分,其实也维护了惯用范式的一致性。

你一定遇到过这种棘手的原型:页面导航又多又深,林林总总地铺酒在导航区和功能区,信息密度堪比柯林斯英汉辞典。页面导航是界面的基本框架,处理系统的导航方式是页面设计早期就需要完成的工作。

 

二. 几种反例

 

 

 

  • 主导航级数过多:视觉样式复杂,操作时需要频繁卷展。
  • 内容区头部导航堆积:用户先看到的不是内容而是导航,浏览效率较低
  • 横向导航分配不合理:不合理的结构会影响视线扫描和点选,且空间利用率低。以图中的结构为例,一级导航下不一定都会有二级或三级导航,就会导致页面版式差异过大。

 

2.1 控制一级导航深度

一级导航过深时,有必要进行降级。顶栏导航可以向边栏导航转移。边栏导航是一级时,可将最低级的导航放到内容区吸顶;若层级仍然不够用或导航条目较多,可以再增加一个纵向导航。

 

 

 

2.2 平衡内容区导航

吸顶导航会占用内容区的纵向空间,但可以随时跳转。

内容区内的导航性质更类似于筛选,能够随内容滚,不便于随时切换。

页签类型区别大或是需要切换对比时,可以将导航吸顶;页签下内容形式近似或需要更多浏览空间时,可以将导航放在内容区。

 

 

 

2.3 减少空间浪费

很多原型会习惯性地在页面顶部配置一个顶栏。实际上里面的商标,账户信息,设置等功能可以整合到边栏中,这样内容区上方会多一些纵向空间。

 

 

 

三.合理布置功能

3.1分级展示功能

比如一些的图表类页面主要用于浏览而不是编辑,这种情况下将操作隐藏到省略号或者汉堡菜单中,不仅可以减少信息干扰,还能避免误操作。

 

 

高级功能的隐藏很好理解,比如 macOS 的网络配置只显示基础的连接功能,DNS 配置等高级操作被整理到了一个按钮中。你可以想象如果所有的配置项都展示一个页面,对于用户日常联网操作会有多么不友好。

 

 

 

 

 

3.2 拆分功能

除了分级,当页面或区域内的功能过于集中时,可以进行拆分以降低信息压力。

分离检索与查看:列表同时兼具浏览与管理的功能,但在字段众多,空间有限的情况下,可以选择其中有代表性的字段在单元行中显示,便于快速扫描和管理,完整的单元行信息放到下一个层级显示。

 

 

分离表单区块:当表单存在区块表单时,可以只在表单中显示区块的预览,将区块的新增和配置放到抽屉中进行,由此减少功能堆积。

 

 

 

3.3 数据的编辑

涉及数据编辑的页面存在四种设计方式,需要综合考虑表单的数量,用户的操作频次和使用方式来判断采用哪种。

查看模式:带查看模式的页面视觉效果整齐,信息干扰最小,且不会误操作。但需要进入编辑模式修改页面内容。

 

 

直接编辑模式:用户到达页面时,数据就可以被修改生效。常见于设置类页面。该模式使用效率最高。但由于容易误操作且视觉信息冗杂,不太适合大型表单。

 

 

行内编辑模式:页面样式类似查看模式,当鼠标悬停在数据上,界面会提示用户此处可以编辑,用户点击后可以快速针对局部数据做修改。该模式只适用表单项少的情况。

 

 

实时保存:页面长期处于编辑模式,系统会自动保存用户的操作。常见于线上文档工具。该模式误操作风险最高,需要提供版本控制和操作撤回功能。

 

 

 

3.4减轻视觉压力

业务层面上无法避免单页出现大量表单时,可以在视觉上分节。注意!和真正的分步不同,这里的只是从视觉层面对页面信息进行处理,没有流程先后的概念,所以尽可能不要拆分页面。

以下图为例,通过视觉上的划分,即使在同一个页面显示同样数量的表单,版面空间的呼吸给予了用户喘歇的余地。锚点导航是个锦上添花的控件,空间允许时可以加上。

 

 

 

四.补救意外情况

4.1空状态引导

一个列表出现空状态的可能性有:

 

 

 

  • 确实没有条目:如果能添加的话,可以提示用户如何添加。
  • 应用了过多筛选器:提示用户尝试其他筛选方式或重置筛选器。
  • 加载异常:提示用户刷新页面。

虽然后果一样,但问题本质不同,解决方式自然也不同,此时需要分别给出对应的引导。

 

4.2 异常引导

再没有什么比一行“操作失败”的提示更让人绝望,用户不知道哪出了问题,也不清楚如何解决。异常流程时有发生,此时系统的引导会起到至关重要的作用,它能够带用户走回正轨,减少无助感。

 

 

 

4.3 标明功能不可用的原因

该问题的重灾区是工具类软件,用着用着一些功能突然就灰掉了,只能慢慢摸索是哪里的问题。功能之所以不可用肯定有个原因,不论是直接显示还是鼠标悬停时显示,有必要要让用户明白原由或者如何解决,避免把用户困在死胡同。

 

 

 

4.4提供帮助

新手教程特别考验用户的记忆力,尤其是在新接触软件的学习爬坡阶段,而且很难保证在一段时间不用后,用户还能记得如何操作。当系统引入了晦涩概念或复杂交互时,最好在该功能周围提供说明,或悬停时展示 tooltip.使用户无需长期记忆,在用到该功能时又可以快速上手。

 

 

 

结语

图形界面的本质是人与机器交流的语言。与现实生活一样,我们倾向与礼貌体贴的对象沟通。所以下手设计时要尽最大可能从人类的本性出发,才能在业务和产品逻辑的限制下,为用户塑造更具亲和力的界面模型。



作者:逸爵
来源:站酷

 

 

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

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

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

为何一些数字平台轻松吸引用户,让他们难以离开? ——蓝蓝UI设计

前端达人

在当今数字化时代,我们看到一些平台在吸引用户方面取得了巨大的成功。为什么这些平台能够如此轻松地引起用户的关注,并使他们沉浸其中,难以自拔呢?本文将深入分析背后的原因,并探讨数字化平台成功的关键因素。

 

1. 情感连接:

成功的数字平台往往能够建立起深厚的情感连接。它们不仅提供产品或服务,更注重用户体验,通过情感化的设计元素、引人入胜的故事,以及与用户共鸣的内容,创造出一个令人愿意一再回归的环境。

 

2. 个性化体验:

数字平台的成功在于它们能够理解用户的需求,并提供个性化的体验。通过智能算法和用户数据的精准分析,这些平台能够为每个用户量身定制内容,使用户感到被理解和重视。

 

3. 简便易用的设计:

一些成功的数字平台拥有简约、直观的用户界面,使用户能够轻松而愉快地使用。设计的易用性和直观性,使用户能够快速找到所需,降低使用的学习曲线,从而增加用户留存和满意度。

 

4. 持续创新:

成功的数字平台不断进行创新,引入新功能、改进用户界面,以及适应市场变化。这种持续的创新使用户始终感到平台是与时俱进的,保持了新鲜感,激发了用户的兴趣。

 

5. 社交互动:

数字平台成功的另一关键在于其能够建立社交互动。通过社交媒体整合、用户评论、以及互动性强的功能,这些平台创造了一个社群感,让用户不仅仅是使用者,更是参与者和共享者。

 

在总结上述因素时,我们发现数字平台的吸引力不仅仅源于产品或服务本身,更在于构建了一个全方位、贴心的数字生态系统。通过深入理解用户需求、注重情感连接、提供个性化体验、简便易用的设计和持续创新,这些平台成功地营造了一个让用户留连忘返的数字化体验。这引发了我们对数字平台成功背后的奥秘的思考,以及我们在设计和使用数字化产品时可以从中学到的经验。

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

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

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

UI设计究竟是不是用户体验的关键所在呢?蓝蓝UI设计公司

前端达人

在当今数字化时代,用户界面(UI)设计已经成为任何成功数字产品的不可或缺的组成部分。我们使用的应用程序、网站和软件,无不依赖于优秀的UI设计来确保用户体验的顺畅和愉悦。这引发了一个疑问:UI设计究竟是不是用户体验的关键所在呢?

UI设计是否是数字产品成功的决定性因素? ——蓝蓝UI设计公司

前端达人

在当今数字化时代,用户界面设计(UI设计)在数字产品的发展中扮演着至关重要的角色。然而,我们是否可以将其视为数字产品成功的决定性因素呢?这个问题涉及到用户体验、功能性、可用性等多个层面,让我们深入探讨这一问题。

 

首先,UI设计直接影响用户体验,决定了用户与数字产品的互动方式。一个直观、吸引人且易用的界面能够提高用户的满意度,使其更愿意长时间使用产品。然而,成功的数字产品并不仅仅依赖于外观。用户体验包括诸多方面,如页面加载速度、交互流畅性、信息呈现等,这需要综合考虑,而非仅仅停留在UI设计的层面。

 

其次,功能性和可用性同样对数字产品的成功至关重要。一款漂亮的界面如果缺乏实用的功能或者难以使用,用户也难以满意。因此,UI设计需要与产品的功能需求紧密结合,确保用户在界面上能够方便地找到所需的功能,并能够高效地使用。可用性测试和用户反馈是评估这一方面的重要手段。

 

然而,要强调的是,UI设计虽然在数字产品的成功中发挥着至关重要的作用,但并非唯一决定性因素。市场定位、产品定位、营销策略等同样重要。一款有吸引力的UI设计可以吸引用户,但产品的核心价值、解决问题的能力同样至关重要。数字产品需要在市场中找到自己的差异化竞争优势,而UI设计只是其中的一部分。

 

综上所述,UI设计在数字产品成功中的作用不可忽视,它直接影响着用户体验,是数字产品的重要组成部分。然而,要实现真正的成功,还需要考虑多方面的因素,包括功能性、可用性、市场策略等。因此,可以说UI设计是数字产品成功的重要因素之一,但并非唯一决定性因素。在设计过程中,需要全面考虑,确保UI设计与产品的整体战略相一致,以实现更全面的成功。

 

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

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

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

为何有些UI设计界面令人难忘? ——蓝蓝UI设计公司

前端达人

用户界面设计(UI Design)是数字时代中至关重要的一环,直接关系到用户在应用或网站上的体验。为何有些界面能够在用户心中留下深刻印象,而有些则显得平庸乏味?这个问题的答案不仅牵涉到设计师的创造力和技能,更深层次地涉及到对用户心理和行为的理解。

 

1. 直观性与易用性

一个令人难忘的界面首先要具备直观性和易用性。用户打开应用或网站时,最好的用户界面是那些无需解释就能让用户明白如何使用的。直观性意味着用户能够快速理解界面的结构和功能,而易用性则要求用户在操作过程中不受阻碍。通过合理的布局、明确的导航以及一致的设计风格,设计师可以创造出让用户留连忘返的界面。

 

2. 个性化与用户体验

令人难忘的界面通常能够提供个性化的用户体验。这并不意味着要为每个用户都设计独特的界面,而是要考虑到用户的多样性和需求差异。通过智能的用户界面设计,可以根据用户的偏好和历史行为,提供个性化的内容和功能,使用户感到这个界面是专门为他们打造的。个性化的用户体验能够增强用户的参与感和满意度,从而让界面更容易被记住。

 

3. 情感共鸣与品牌一致性

界面设计不仅仅是功能的呈现,更是一种情感的传递。令人难忘的界面往往能够与用户建立情感共鸣,通过色彩、图标、字体等元素传达出与用户情感相契合的信息。同时,保持品牌一致性也是重要的。一个有着一致的品牌形象的界面,能够强化用户对品牌的记忆和认知,使用户更容易记住这个界面。

 

4. 交互设计与动效

动效是现代UI设计中越来越重要的一环,它能够吸引用户的注意力、传递信息,并增强用户的交互体验。通过合理运用动效,设计师可以使界面更加生动有趣,从而留下深刻印象。然而,这并不意味着要过度使用动效,而是要在不影响用户体验的前提下增强界面的表现力。

 

综合考虑上述因素,一个令人难忘的UI设计是综合了直观性、易用性、个性化、情感共鸣、品牌一致性、交互设计和动效等多个方面的成果。设计师需要在深刻理解用户需求和行为的基础上,发挥创造力,打破常规,为用户创造出一种既美观又实用的界面。只有在这样的基础上,才能够设计出那些让用户难以忘怀的界面。

UI设计中圆角与直角该如何使用?

博博

在当今数字化时代,UI设计已成为创造引人入胜的用户体验的关键要素。一个成功的UI设计不仅需要技术知识,还需要对细微之处的深刻理解。本文将探讨两种基础但极为重要的图形元素:圆角和直角。它们如何影响用户的感知和互动,如何在设计中恰到好处地应用它们,以及它们在实际案例中的运用。
一、圆角与直角的特性
在介绍“圆角与直角”前,先给大家分享一个心理效应“bouba/kiki效应。”
这个效应最早由德国心理学家沃尔夫冈·科勒在1929年提出。
“kiki”这个词的尖锐、快速的音调与尖锐的星状图案相呼应
“bouba”这个词的圆润、流畅的声音则与圆润的云状图案相呼应
最早在1929年沃尔夫冈·科勒做了一个实验,该实验展示了两种形式,并询问读者哪种形状被称为“takete”,哪种形状被称为“maluma”。尽管没有明确说明,科勒暗示人们强烈倾向于将锯齿状形状与“takete”配对,将圆形形状与“maluma”配对。
在2001年的另一组实验中拉马钱德兰和 爱德华·哈伯德使用“kiki”和“bouba”这两个词重复了科勒的实验,询问美国大学本科生和印度讲泰米尔语的人,“这些形状中哪个是bouba,哪个是kiki?” 在两组中,95% 到 98% 的人选择弯曲的形状为“bouba”,锯齿状的形状为“kiki”,这表明人类大脑以某种方式一致地将抽象含义附加到形状和声音上。
这个效应主要讲述的是“人脑如何以一致的方式将抽象含义附加到视觉形状和语音上”
那么我们不妨扩展一下,把这这种效应延展到角色上就拿我们最熟悉的“喜羊羊与灰太狼”举例,我们只听名字“羊”和“狼”就可以潜意识的认为“喜羊羊”就相当于“bouba”、“灰太狼”相当于“kiki”,“羊族”一听就是温和的族群,而“狼族”就是较为凶猛的族群。那么我们可以再回顾一下,“可可爱爱的卡通人物”大部分就是以圆形为基础“小黄人、葫芦娃、维尼熊、大头儿子等”,“超级大反派”更多是以“直角”为主“女巫、蛇精、吸血鬼”,这就是“将抽象含义附加到视觉形状和语音上”。
如果听完这些你还是不懂,那么最简单的例子一个堪比吴彦祖的帅哥叫“文轩没有大脑袋”,那当你见到他时一定会去观察这个人到底有没有“大脑袋”
圆角与直角该如何使用?
 
 
那么回归正题,我们将“圆角与直角”代入这种思考方式并将其进行UI思考,就可以大致了解“圆角与直角”大致的特性
圆角
1.定义
  •  
    圆角指的是元素边角被设计为圆滑的形状,而非尖锐的直角。
  •  
    它通常通过设定一个半径来实现,半径越大,角越圆滑。
2.特性
  •  
    视觉友好
    「圆角被认为更温和、更友好,因为它们缺乏尖锐的边缘,给人一种安全和柔和的感觉。」
  •  
    现代感
    「在现代设计中,圆角被广泛使用,它们通常与新颖、时尚的设计理念相关联。」
  •  
    提高注意力聚焦
    「圆角可以引导用户的视线流动,帮助减少视觉干扰,使用户更容易聚焦于界面的关键部分。」
  •  
    适用性
    「在移动应用和网站设计中尤其流行,特别是在按钮、输入框、卡片和其他交互元素中。」
直角
1.定义
  •  
    直角是指元素的边角以90度角的形式呈现。
  •  
    它是最基本的形状之一,在许多传统和经典的设计中常见。
2.特性
  •  
    专业感
    「直角通常给人一种更加正式、专业的印象。」
  •  
    清晰界定
    「直角在视觉上提供了清晰的界定,使元素的边界更加明确,有助于信息的组织和分隔。」
  •  
    传统感「
    在某些情况下,直角与传统、经典的设计风格相联系。」
  •  
    适用性
    「直角在各种应用中都很常见,尤其是在需要传达清晰、直接信息的界面中,如表格、列表和布局结构。」
那么回想一下“bouba/kiki效应”,今后在设计中当我们看到某个产品大量的使用“直角/圆角”我们就可以分辨这个产品的大致风格,同样字体搭配也是相似的效果,通过不同的banner可以大致看出运营活动的大致目的。
圆角与直角该如何使用?
 
 
二、圆角、直角的使用场景
在实际的使用场景中,我们就从最常见的“按钮、卡片”两个场景来举例分析“圆角、直角”的作用。
按钮
我们首先具体聚焦在UI设计中对于“按钮”这一元素的圆角和直角的使用:
圆角按钮
  •  
    用户友好性「圆角按钮通常看起来更加友好和容易接近,它们给用户一种温馔和舒适的感觉,适合于鼓励用户交互的场景。」
  •  
    移动设备适应性「在移动设备上,由于屏幕尺寸较小,圆角按钮更易于触控,尤其是屏幕边缘的按钮。」
  •  
    减少视觉冲击「圆角可以减少视觉上的尖锐感,使界面看起来更加柔和,适合于寻求轻松视觉体验的应用。」
直角按钮
  •  
    专业和正式感「直角按钮给人一种更加正式和专业的感觉,在一些传统的或者保守的设计风格中,直角按钮更为常见,例如一些服装品牌(Yohji Yamamoto、CONFIRMED)、学校(各学校官方网站)等。」
  •  
    内容和功能区分「直角按钮在视觉上更加突出,能够有效地区分不同的功能和内容,尤其是在需要用户做出明确决策的界面上。」
那么这里我们会有一个疑问,那就是“移动设备适应性”,这里我们可能会想到“直角按钮”的面积看起来要比“圆角按钮”的触控面积更大,那为什么“圆角按钮”更易于触控呢?
我们从两个方面来解答
1.触控面积
  •  
    实际上,无论是圆角还是直角,按钮的触控面积通常是由其外接矩形决定的。这意味着,即使按钮的视觉元素有圆角,触控面积实际上仍然包括了这些圆角区域。
  •  
    在实际应用中,操作系统或应用平台通常会为按钮元素提供一个默认的“触控目标大小”,这个大小是为了确保良好的触控体验而设计的,无论按钮的视觉样式如何。
2.视觉感知与触控体验
  •  
    圆角按钮在视觉上看起来更加柔和和亲切,这可能使得用户更倾向于触摸和与之交互。这种心理效应可能会导致用户觉得圆角按钮更“容易”触控,即使实际的触控面积与直角按钮相同。
  •  
    在移动设备上,圆角按钮的另一个优势是它们的形状与设备的圆润边缘相协调,这在视觉上创造了一种和谐感,可能会无形中增加用户的触控舒适度。
圆角与直角该如何使用?
 
 
通过这两方面,我们是不是又能联想到“bouba/kiki效应”,介于“圆角本身的属性”我们会更容易去点击他。
卡片
对于卡片我们还是先对比,在进行详细的分析。
圆角卡片
  •  
    视觉风格「圆角卡片提供了一种柔和、友好的视觉感受。它们的圆润边缘可以减少视觉冲击,创造出更轻松和亲切的外观。」
  •  
    用户体验「圆角的设计通常被认为更加现代和用户友好。它们可以使界面看起来更轻松、更易于接近,这在提高用户的互动意愿方面很有效。」
  •  
    适用场景「圆角卡片通常用于需要提供温馨、轻松体验的应用中,例如社交媒体、娱乐内容展示、个人博客,或者任何强调用户友好和易用性的设计。」
  •  
    功能效果「在功能上,圆角卡片可以帮助区分不同的内容模块,同时保持界面的整体一致性和流畅性。」
直角卡片
  •  
    视觉风格「直角卡片提供了一种清晰、专业的视觉效果。它们的直线和锐角创造了一种结构化和有序的外观。」
  •  
    用户体验「直角设计传达了一种正式和权威的感觉,适合于需要展示专业性和准确性的应用。」
  •  
    适用场景「直角卡片通常用于更正式或专业的环境,如企业网站、在线商务平台、教育平台,或任何需要清晰展示大量信息的界面。」
  •  
    功能效果「直角卡片在功能上有助于清楚地区分和组织内容,特别是在数据密集或信息密集的应用中。」
这里更要值得注意的一点是视觉效果方面的“圆角对于用户的视觉效果要强于直角”,巴罗神经学研究所对角落进行的科学研究发现,“角落的感知显着性随角落的角度呈线性变化。锐角比浅角产生更强的虚幻显着性”,这里角越尖,看起来就越亮。角落越亮,就越难看。
通过上述对比我们可以得到一个结论“圆角比直角更亲和”,那么可以接着推论“圆角卡片更容易使用户接受卡片内信息”这是因为圆角向内指向矩形的中心。这会将焦点放在矩形内的内容上。当两个矩形彼此相邻时,还可以轻松查看哪条边属于哪个矩形。尖角向外,从而减少对矩形内部内容的关注。当两个矩形彼此相邻时,它们还使得很难判断两条边属于哪个矩形。这是因为每个矩形边都是一条直线。圆角矩形的边是独特的,因为线条朝着它所属的矩形弯曲。
圆角与直角该如何使用?
 
 
三、案例分析
那么对于“直角、圆角”的使用我们以“CONFIRMED、汽水音乐”这两个产品来分析看一下这两个产品对于“直角、圆角”的应用。
圆角与直角该如何使用?
 
 
CONFIRMED
CONFIRMED(Adidas旗下网站,这里懂球鞋的朋友我们可以把它理解为Nike的SNKRS)
作为Adidas旗下产品发售平台,CONFIRMED更多的是发售一些潮流类的服饰最近有“Y-3、CLOT、FEAR OF GOD”等一些潮流服饰,这个应用程序旨在为Adidas的高需求和限量产品提供一个更加公平和直接的购买渠道,通常涵盖了品牌与设计师和艺术家的合作款,以及特别版的运动鞋。
那么我们从“产品定位、用户群体、主要功能流程”来分析一下
产品定位
  •  
    独家发售平台「CONFIRMED 专注于提供 Adidas 的独家发售和限量版产品,特别是鞋类和高端服装。它的目标是成为品牌与其最忠实粉丝之间的直接连接点」
  •  
    品牌营销工具「通过这个平台,Adidas 能够加强其品牌形象,特别是在时尚和高端运动装备领域。CONFIRMED 作为一个专门平台,也强化了 Adidas 在潮流和限量产品市场中的地位。」
  •  
    市场分析和消费者洞察「CONFIRMED 还可能被用作市场研究工具,通过分析用户行为和购买模式来更好地理解目标市场。」
用户群体
  •  
    潮流爱好者「对最新潮流和设计保持关注的消费者,他们追求限量版、独家合作系列。」
  •  
    Adidas 忠实粉丝「品牌的忠实支持者,对于品牌的新产品和特别发售保持高度兴趣。」
  •  
    运动鞋收藏家「对于限量版运动鞋有收藏价值的消费者,这些人往往愿意为独特和罕见的设计支付高价。」
主要功能流程
  •  
    产品预览和信息「用户可以在应用程序中浏览即将发售的产品,并获取详细信息,如价格、设计特点、发售日期等。」
  •  
    注册和参与抽签「对于感兴趣的产品,用户需要在特定时间内注册参与抽签。这通常涉及填写个人信息和选择购买尺码等。」
  •  
    抽签结果通知「抽签结束后,用户会收到是否中签的通知。如果中签,用户将有机会购买这些限量产品。」
  •  
    购买和支付「中签用户可以在应用程序内完成购买流程,包括支付和选择配送选项。」
  •  
    社区互动和内容「CONFIRMED 还可能提供与品牌相关的内容,如设计师访谈、品牌故事等,以增强用户参与和品牌忠诚度。」
这里我们先从“CONFIRMED”卡片元素分析(本文只讲述的直角卡片的用途,不过多讲述App功能)
每款产品可以在一个直角卡片中展示,其中包括产品图片、名称和一些基本信息。这里在App的“首页、发售信息、会员权益”这三个模块最为突出,这种布局有助于用户快速浏览和识别不同的产品
圆角与直角该如何使用?
 
 
功能展示
这里“CONFIRMED”不同的卡片可以承载不同的功能,如显示即将发售的产品、已经发售的产品、品牌故事等,帮助用户快速定位他们感兴趣的内容。这里使用通过卡片元素的方式来详细展示产品,会使整个产品的调性保持一致,大卡片的元素传递给观众的浏览体验会更直观的感受产品(这里会发现一个很有趣的细节,貌似好的国外、跨境电商的App都会采用这些大的直角卡片)
接下来我们就讲述关于“CONFIRMED”按钮元素使用的分析:
突出的功能
直角按钮通常用于突出最重要的操作,例如“购买”、“注册抽签”或“查看详情”。这些按钮因其鲜明的边界和直接的设计而容易被用户注意到。
圆角与直角该如何使用?
 
 
风格统一
使用直角按钮可以与应用中其他直角设计元素(如卡片)保持视觉一致性,为用户提供一致且简洁的视觉体验。
视觉引导
这些按钮通常配有“CONFIRMED”的颜色(蓝色),用于引导用户的注意力,帮助他们快速识别应用程序中的不同功能。
这里我们可以看到“直角卡片"“直角按钮”在 CONFIRMED 应用中的应用可能主要体现在其用户界面的设计上,通过清晰、有序的布局和直观的用户交互,提升用户的体验。
汽水音乐
提到“汽水音乐”大家都不陌生,前段是时间各大“rapper、流行歌手”发歌都在汽水,这个App是可以和抖音联动的,所以播放音乐的模式没有采用大家常见的“点歌、切歌”操作,而是换成随机曲子和“抖音”向下滑动切换一样,这样既新颖又能容易使用户养成操作习惯,不至于一下子新的交互方式无法适应。那么我们同样从“产品定位、用户群体、主要功能来分析”
产品定位
  •  
    汽水音乐是一款音乐流媒体应用,旨在与主要竞争对手如腾讯音乐和网易云音乐抗衡。
  •  
    它不仅是一款单纯的音乐播放软件,还与抖音紧密结合,使得用户可以在两个平台之间无缝切换音乐播放列表,显现出对社交媒体和音乐流的综合运用。
用户群体
  •  
    汽水音乐的主要用户群体是中国市场上的年轻用户,尤其是那些已经使用抖音并寻求更丰富音乐体验的用户。
  •  
    考虑到字节跳动在短视频领域的强大影响力,汽水音乐会吸引那些对新兴、流行音乐以及个性化推荐感兴趣的年轻群体。
主要功能流程
  •  
    个性推荐「这里“汽水音乐”通过算法推荐“个性电台”、“歌单推荐”、“3个榜单”」
  •  
    与社交媒体的整合「能够与用户的抖音账号同步,提供跨平台的音乐体验。用户可以在抖音中发现音乐,并在汽水音乐中继续播放,反之亦然。」
  •  
    播放「汽水音乐的播放方式与抖音同步营造区分于其他音乐App不同的交互体验」
那么我们从卡片开始分析,卡片主要应用在“歌曲、专辑”、“播放列表”、“歌单推荐”、“音乐盲盒”
那么他们起到的作用分别是
  •  
    提高用户体验
    「圆角卡片的设计通常比直角设计更柔和、更易于接受。这种设计能够减少视觉疲劳,使应用界面看起来更加友好和现代化。」
  •  
    增强视觉吸引力
    「圆角卡片因其流线型的外观,在视觉上更加吸引用户。这有助于提升用户对应用的整体印象和兴趣。」
  •  
    组织信息
    「圆角卡片可以有效地将信息分组,如将不同的歌曲、专辑、播放列表等内容区分开来,使得用户浏览和选择时更加直观和方便。」
  •  
    提升操作便捷性
    「在触摸屏上,圆角卡片可以提供更好的触摸目标,使得用户在进行选择和导航时更加方便。」
  •  
    增强内容的层次感
    「圆角卡片可以通过阴影、边框或颜色的变化,为界面添加层次感,使得内容更加突出和易于阅读。」
  •  
    提升品牌形象
    「现代的界面设计往往倾向于使用圆角元素,使用这种设计可以使应用看起来更加时尚,从而提升品牌形象。」
圆角卡片在提升用户体验、美化界面、优化信息展示和操作便利性等方面发挥着重要作用。这些设计元素有助于提高应用的整体吸引力和用户的使用满意度。
圆角与直角该如何使用?
 
 
“圆角按钮”对于“汽水音乐”的作用有
  •  
    视觉焦点「圆角按钮可以作为视觉焦点,吸引用户的注意力,特别是对于重要的功能,如播放按钮或搜索按钮。」
  •  
    界面美观性「圆角按钮增加了界面的美观性,与整体设计风格协调一致,提升了应用的整体视觉效果。」
  •  
    一致性和标准化「在应用中使用标准化的圆角按钮可以提高界面的一致性,使用户更容易理解和使用不同的功能。」
其实通过对比,我们会发现“圆角”在社交、音乐等偏娱乐方向采用的更加多,因为这些产品属性需要“产品与用户”、“用户与用户”之间拉近距离,圆角不仅更容易我们的眼睛处理,而且还使信息更容易处理,圆角很有吸引力。那么“直角”就偏向专业领域、正式的场合以及一些小众的产品。

作者:交互设计师张楚
来源:站酷

 

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

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

 

什么是UI设计?

资深UI设计者

    进入设计这个行业也快一年了,这篇文章其实也算是写给自己的一个总结。也望各位大佬,小弟如果有那些地方说不对,多多包涵,轻喷轻喷。废话不多说了进入正题。

 

动效设计师怎么与技术对接?

资深UI设计者

动效设计师怎么与技术对接?

开发和设计师沟通困难,是因为没有通过精准的参数去描述动效。要解决这个问题,我们需要创造一套有效的动效标注系统,这个系统必须做到以下两点:让设计师可以轻松地描述动效,让开发可以准确地还原动效。

这个系统主要分为以下两个方面:

(1)量化动效数据

其实,界面动效背后涉及到的设计参数非常简单,只有三种。无论多复杂的动效也是这三种参数经过组合拼接出来的:

2024年UX和UI设计趋势

ui设计分享达人

2024年,我们一起来看一下这一年可能会发生的设计趋势,给大家准备了国外的一个著名设计师的文章,看看他怎么预测今年的设计趋势的。
译文:
2024年UX和UI设计趋势
 
 
每年我都会梳理一系列新的设计趋势,这些趋势不仅看上去不错,同时也会影响其他的设计师去“偷窃”(学习借鉴)这些设计趋势。无论你觉得这篇文章如何,它都实实在在地激起了智能设计和实用设计的浪潮。这些功能不仅包含了如何在更少的空间里传达更多的信息,同时也给用户带来了更多的愉悦互动体验。
让我们停下脚步一起来看一下这些设计趋势吧,然后你可以去互联网上感受这些趋势的魅力。
这不仅仅是一个儿童午餐盒——Bento Boxes
便当盒是日本简餐和盒饭文化的主要产品,他们因为可以高效地有条理地储存食物和保持食物干净而被大众所熟知。
2024年UX和UI设计趋势
 
 
我们根本不会想到谁想到这一点,然而,便当盒在屏幕上的数字展示效果就像他们装满食物放在袋子里一样的好。
Bento是另一种设计趋势,开始像dribbble和Behance等平台掀起浪潮,吸引了数百万的设计师关注和使用。然而,“模块化”设计的概念始于网站的仪表盘,像Paypal一样的销售和金融平台,像谷歌广告一样的分析平台等等。
还记得Windows phone 和Lumia吗?他们使用的UI界面从本质上说是Bento设计的早期迭代版本,后来,微软同样在Windows8这样的Windows系统桌面实现了这个设计概念。
Windows8开始菜单
Windows8开始菜单
 
虽然整个行业都在使用Bento设计,但是当苹果首次使用Bento网格时,Bento设计彻底爆发了。他们最开始用在了iPhone的登陆页面,但是很快扩展到了Apple的事件活动幻灯片展示。
另一张苹果的海报
另一张苹果的海报
 
苹果以引领大趋势而被众人所熟知,Bento就是众多设计风格中的一个。每一个设计师包括他们的前辈,都会用Bento去做一些展示、网站、产品发布,这样的例子不胜枚举。
旧的类Benno设计和新的设计趋势相比有很大的不同,网格的每一个选区都代表着一个独立的空间,而不是群组的一部分。
与很多其他的UI设计趋势不同的是,Bento实际上正在进化,它不仅仅是一个好看的布局风格,它已经发展到了包括产品演示、融合了其他一些独特的布局、甚至带有新的视觉设计概念。
我们来看一下这张图:
Bento交互在线演示
Bento交互在线演示
 
上面这个案例来自于 diagram.com,它使用了Bento布局,向我们展示了它的工具在交互体验中能够做什么?这使得该工具更具有吸引力,并告诉用户他们应该期待什么。
为了更好地帮助像我们这样的设计师,有一些网站专门从各个网络平台搜集了Bento设计灵感,bentogrids.com就是这样一个网站,收集了有大量的包含UI和图形设计的Bento网格样式,感恩这个网站的创建者。
空间设计趋势与技术飞速发展
当你清晨醒来,拿起手机查看重要的邮件,同时还有一件能够排在第二重要程度的事情,那就是你的整个订阅流都是苹果的New Vision Pro。2023年6月5日早晨,全世界的每一位科技人士和设计爱好者都感受到了。
2024年UX和UI设计趋势
 
 
在接下来的几周里,这是整个科技圈都在讨论的事情,每一个设计师都在学习空间设计技能。除了设计趋势之外,各种各样的AR/VR(增强现实/虚拟现实)初创公司也涌现到了我们的眼前,他们的技术终于被谈论起来了。这个给AR和VR带来了很大的推动作用,这是真正需要的东西。
有了伟大的技术,就会有伟大的设计潜力。从智能手表到可折叠手机,设计师们总是能够站出来去展示他们真正的可适应性,空间设计也没有例外。
对即将发生事情的一瞥
对即将发生事情的一瞥
 
与此同时,一款名称为“Bezi”的设计师流行工具也推出了,它非常接近于类似于Figma和Spline这样的设计工具,但是加入了第三维度。设计师可以开展空间设计,连接上一个运行的AR/VR头戴设备,并创建空间交互体验。
让我们来看看Bezi可以用来做什么:[来自于Bezi.com的演示案例]
 
Current Time 0:00
/
Duration Time 0:15
 
Loaded: 0%
 
Progress: 0.00%
Playback Rate
1.00x
更好的用户体验,助力于打造更好的AR/VR体验,深入地去理解这些漂亮设计背后的技术,用一个真实的VR头戴设备,在空间环境中测试,将会成为工作中的一部分。随着技术的发展,肯定也会有许多新的经验教训和对我们现有UX了解基础上的改变。然而,这就是你此时此刻想要打造的技能之一,没准在未来将会被用到。
除了想象力丰富、财力雄厚的苹果公司以外,还有一些不那么精通技术的公司给眼镜穿戴设备带来了全新的体验。
尽管谷歌的项目“谷歌眼镜”没有实现大规模量产,但是眼镜公司雷朋依靠他们的新产品“Meta Wayfare”已经进入了智能穿戴设备的赛道。
雷朋眼镜图片
雷朋眼镜图片
 
不要被普通的雷朋设计给欺骗了,这个内置相机可以允许你存储视频和拍摄图片,甚至是在社交媒体上直播。这个会给用户体验和客户体验带来一个新的维度,也许是2025年的趋势,谁知道呢!
人人都能做的动画!
当一个新的技能开始被更多人使用的话,那么一个新的趋势基本上就诞生了。
LottieFiles就是这样的一个新的技术,当我以技术传道者的身份加入了这家公司,我就已经对简单的动画可以添加到UI界面中感到敬畏了。考虑到对Lottie动画的需求,他们甚至为Figma推出了一个插件,可以将Figma动画转化为可导出的Lottie JSON 文件格式。
Figma中的LottieFile插件
Figma中的LottieFile插件
 
这在根本上解决了学习如After Effects 或者类似的软件的巨大学习成本,因此,更多的设计师可以很快地做出他们想要的动画了。
现在,你也会开始注意到每家公司登录页上诱人的交互设计,这一些都要归功于日益增长的对网站访问者差异化体验的需求,以及将讲故事作为销售产品/服务的工具的需求。
就拿下面这个登录页的交互行为举例:
Apple Watch 系列9登录页——双击滚动交互
Apple Watch 系列9登录页——双击滚动交互
 
有了滚动动画,浏览者将会全神贯注于你要呈现给他们的内容。像Webflow和Framer这样的无代码工具永远在创新,为设计师们提供无需写长串的代码就可以实现动画的能力。
有人可能认为旅程到此差不多结束了,动画可能已经达到了顶峰,没有什么可以继续期待了。幸运的是,技术人员总是在寻找下一个大事件。此外,由于大量的强大工具的yong'xian,你能想象的一切事情都有可能实现。
还有一个趋势就是动画按钮趋势,一个新的界面样式,它引入了动画技术,让简单的按钮充满生命力。这些改变不仅包括按钮的周围的简单描边动画,也可以是当鼠标移动到按钮上的变化。
2024年UX和UI设计趋势
 
 
这样的趋势通常有着多米诺骨牌效应,首先一个设计师的社交帖子受到欢迎,然后其他的著名的设计师也会追随。
扁平设计的终结者
最近,很多设计师都在讨论设计世界什么时候从扁平设计中切换(就像你在Medium看到的那样)转向虚拟的写实的视觉风格,这些包括3D图形、深度效果、新形态、拟物化等等。
最近, 我们看到很多公司将3D作为核心风格,尽管他们现在不可能立马出现在网页、App设计,但是Logo也随着这一趋势在不断地更新。
罗列了一些好的关于新的3D浪潮的案例
罗列了一些好的关于新的3D浪潮的案例
 
就像其他设计趋势一样,人们实现这些风格样式的一个最重要的原因就是引入了“易于使用”的web的3D工具,例如Spline和Vectary,这使得在Web和App中添加3D资产变得非常容易。他们还用动画将3D资产带入生活,这是我经历过的最短的学习曲线。
  •  
    对我来说非常疯狂的事情是:一个基础的线性渐变和一些阴影,可以给你的设计和资产中增加景深感和一个第三维度。
另一个一直驱动设计和趋势的公司是Airbnb,他们以简单的有效的App设计和交互而众所周知。在2023年,他们宣布了一个应用程序更新,将带来了一些新的重要的功能。
他们到底做了什么?他们结合了超过十几个3D视觉元素,他们的宣传视频里几乎都是关于3D的。
Airbnb的发布视频
Airbnb的发布视频
 
等距视觉效果、3D角色和动画,以及大量的App交互让我不断重复观看,从扁平到3D的转变是缓慢和稳定的,这就是为什么我相信趋势来了并将一直持续下去。
现在,谁开始了这一趋势一直是一个谜题,但是对现实和相关设计的需求,驱动我们为用户创新,也可以说是因为我们自身的创意需要的原因。
人工智能设计工具浪潮——是敌是友?
在过去的十年中,人工智能是科技领域用得最多的也是认知度最高的词语。当一些设计师将人工智能当作未来职业生涯的威胁时,我们中的很多人其实都在用这个技术更快地去创造更好设计作品了。
Firefly 被用来做视频处理
Firefly 被用来做视频处理
 
很多设计工具都在宣传他们“AI能力加持”,他们尝试在各个层面接入Open AI的API接口,也在开发他们自己的AI模型。然而,这些AI功能大多数都是噱头,能够随机地设计出UI界面,整合设计资源,甚至提供基本的解决方案都是问题。对此我提出了一些批评,也得到了很多社区成员的支持。
在这些杂乱的噱头中,有几个有影响的产品正在赶来拯救这个世界。其中一个英雄是 Relume,绝对是粉丝的最爱。这家专注于Webflow的公司,推出了一个叫做
Relume A.I.
的产品,一款强大的线框和站点地图工具。
重新启动人工智能
重新启动人工智能
 
你输入一个提示,也可以是你的项目描述,他会显示出一个完整详细的站点地图和一个线框。这个线框中充满了相关的数据和布局,可以快速复制到Figma和Webflow。
而且,难道只有我认为Chat-GPT正在破坏人类的创造力并让人们产生依赖性吗?
更细心和感同身受的用户体验
2024年UX和UI设计趋势
 
 
关于视觉效果和UI界面设计的内容已经很多了,至少可以这么说,UX已经进化了,可以通过UX研究人员和设计师关注的东西来证明。这意味着要降低设计过程的难度,使设计更具有易用性和包容性。
大量的设计师都在尝试将可用性置于视觉设计之上,这为中心带来了更简单和可行的设计。设计师们坚持做可行的事情,而不是重新发明一个轮子,尽管这个行业在过去几年已经发生了很多的变化。
谷歌2019-2023关于“用户体验可用性”的趋势图表
谷歌2019-2023关于“用户体验可用性”的趋势图表
 
上方的谷歌趋势图表向我们表明设无障碍设计如何成为一个真正的工业级需求。
这些无障碍技术的范围从颜色对比、可读字体、可识别的动作元素,一直到覆盖不同能力的人,将无障碍功能集中到了一起。
为什么需要无障碍设计?
由于现在要为不同年龄段甚至是身体有障碍的人设计,无障碍设计也在努力推进。公司希望从所有不同的人口结构中获利,也在推动各方面的包容性。随着越来越多的人走向数字化,对于设计师来说,关乎无障碍设计几乎是强制性的。
很多课程和训练营从千里之外就嗅出了这种需求,也在准备让学生进入设计领域充分了解无障碍设计。
个性化
区别于一致性,个性化才是真正将用户锁定在应用程序或网站上的原因。你一定在youtube上看过这样的消息。
2024年UX和UI设计趋势
 
 
Youtube评估你喜欢什么样的内容,给你更好的建议。
你有可能还会观察到,很多应用程序在尝试一个新的功能的几天里,然后会因为不好用不喜欢而取消它。这是用户体验设计师在未来的产品和服务中发挥主导作品的直接表现。
2024年UX和UI设计趋势
 
 
 



作者:阿琦Aqi(译)
来源:站酷

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

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

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

日历

链接

个人资料

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

存档