首页

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开发

B端组件设计如何支撑产品体验

ui设计分享达人

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

智能座舱HMI主交互策略(一):主交互框架

ui设计分享达人

从互联网体验设计师转行到新能源做用户体验产品经理已经一年多的时间,期间主导了一套完整的智能座舱HMI设计体系搭建,同时负责座舱内软件产品的用户体验把控及主交互、车控两个模块的产品定义。

如何用服务思维做体验升级?

ui设计分享达人

从私募服务旅程着手,讲述如何用服务思维去重构金融品类服务动线,从全链路角度梳理服务容器的价值表达,提升服务效率,让用户感知到服务,推动设计落地实现。

B端进阶|表格数据过滤分析

ui设计分享达人

在B端(Business to Business,即企业对企业)应用中,表格数据过滤功能是一项非常重要的功能。它能够帮助企业用户更方便地管理和查询表格数据,提高工作效率和数据准确性。因此一个体验感良好的数据筛选功能有助于用户的任务处理效率。帮助系统更加友好、易用,从而增加用户的满意度和使用频率。
在确定过滤类型之前,首先,需要确定哪些字段需要进行筛选。这需要根据业务需求和用户习惯来确定。例如,在销售系统中,可能需要对产品名称、销售日期、销售数量等字段进行过滤;在人力资源系统中,可能需要对员工姓名、部门、职位等字段进行过滤。

B端设计—常见问题&解决方式

ui设计分享达人

一、UI设计师在B端产品界面设计时,可能会遇到的问题。
1.1复杂的数据可视化需求
B端应用往往涉及复杂数据,设计师需要创造清晰且有效的方式来显示这些信息。
对于B端产品设计中复杂的数据可视化需求,一个详细的解决方案需要从不同层面进行考虑和实施:
理解用户需求:
首先,进行深入的用户研究以理解不同用户的数据需求。这可能包括用户访谈、观察和问卷调查,以收集关于他们如何理解和使用数据的信息。
选择合适的图表类型:
根据数据类型和用户需求选择最合适的图表类型。例如,时间序列数据适合折线图,而比较数据则可能更适合条形图或饼图。同时,对于更复杂的数据关系,可能需要使用散点图、热图或树状图。
简化设计:
避免过度装饰的图表。使用清晰的轴标签、标题和图例,确保用户能够轻松读懂图表。选择合适的颜色方案来增强可读性,同时避免使用令人分心或误解的颜色组合。
增加交互性:
交互式元素可以大大增强数据可视化的效果。例如,当用户将鼠标悬停在图表的某个部分时,可以显示详细的数据点信息。此外,可以允许用户通过筛选、排序或拖动来自定义视图。
提供上下文和引导:
确保每个图表都有足够的上下文信息,比如引导性文本或简短的分析,帮助用户理解数据背后的故事。这不仅包括图表本身的解释,还包括如何使用图表进行有效决策的指导。
优化性能:
对于处理大量数据的可视化,确保性能优化是至关重要的。这可能涉及后端数据处理优化、前端渲染优化以及合理的数据加载策略。
用户测试和反馈:
设计完成后,进行用户测试以收集反馈。观察用户如何与数据可视化交互,并根据他们的反馈进行调整。这是一个持续的过程,旨在不断提高可视化工具的有效性和用户满意度。
B端设计—常见问题&解决方式
 
 
可以找到大量的参考选择适用自己产品风格的可视化,之后进行修改。
1.2深层级的功能集成
与C端产品相比,B端产品可能有更深层次和复杂的功能,难以设计简洁直观的用户界面。
对于UI设计师在进行B端产品界面设计时遇到的“深层级的功能集成”问题,一个详细的解决方案需要包括以下几个关键策略:
模块化设计:
通过将复杂功能分解为独立、可重用的模块,可以简化界面并提高可维护性。每个模块应专注于单一功能或任务,从而使整体系统更加清晰易懂。
清晰的信息架构:
建立一个逻辑清晰的信息架构是至关重要的。这包括创建一个分层的菜单结构,将相关功能组织在一起,并通过适当的命名来指导用户。
分层的导航系统:
为不同层级的功能提供清晰的导航路径。这可能包括主导航菜单、次级导航以及面包屑导航等,帮助用户理解他们在应用中的位置以及如何访问特定的功能。
搜索功能:
随着功能数量的增加,提供一个强大的搜索工具变得尤为重要。这可以帮助用户快速找到他们需要的特定功能或信息。
自定义和个性化设置:
允许用户根据自己的工作流程和偏好来自定义界面。这包括选择要显示的模块、调整布局以及设置快捷方式等。
交互式教程和帮助文档:
为新用户提供交互式教程,帮助他们快速了解如何使用应用。同时,提供详细的帮助文档和FAQ,以便用户可以自助解决问题。
用户测试和反馈:
持续进行用户测试和收集反馈,了解哪些功能集成方式有效,哪些需要改进。根据用户的反馈不断调整和优化界面设计。 通过实施这些策略,UI设计师可以有效解决深层级功能集成的问题,创造出既强大又易于使用的B端产品界面。
B端设计—常见问题&解决方式
 
 
1.3用户习惯差异
B端用户可能来自不同行业,具有不同的操作习惯和偏好,满足所有用户的需求挑战较大。
针对B端产品界面设计中的“用户习惯差异”问题,一个详细的解决方案应包括以下几个步骤:
深入用户研究:
通过访谈、问卷调查、用户观察和分析用户数据来理解不同用户群体的习惯和需求。这些研究帮助揭示不同行业、角色和经验水平的用户如何与产品互动。
多样化的设计解决方案:
根据研究结果,设计可以适应不同用户需求的界面。这可能涉及提供多种布局、导航样式和交互方式供用户选择。
个性化和定制功能:
允许用户根据个人偏好调整界面,包括主题、布局、快捷方式和默认设置等。
清晰的指导和帮助:
为了帮助用户理解如何使用产品,提供详细的帮助文档、FAQ和交互式教程。
持续的反馈循环:
设立机制收集用户反馈,定期进行用户测试,并根据反馈迭代优化产品。
通过这些策略,UI设计师可以更好地应对用户习惯的差异,创造出既满足用户需求又易于使用的B端产品界面。
1.4访问权限管理
需要设计复杂的权限设置界面,确保不同级别的用户只能访问特定信息。
针对B端产品界面设计中的“访问权限管理”问题,一个详细的解决方案应该包括以下几个关键策略:
深入理解不同角色的需求:
与产品的各种用户群体(如管理者、普通用户、审计员等)进行交流,了解他们对权限管理的需求和期望。
设计灵活的权限框架:
创建一个可以灵活适应不同用户和角色需求的权限系统。这包括定义不同级别的权限,如查看、编辑、管理等,并允许细粒度的控制。
直观的权限配置界面:
为管理员设计一个清晰、直观的界面,让他们可以轻松分配和调整权限。提供明确的指示和反馈,确保管理员理解每种权限的含义。
透明的用户权限指引:
向用户清晰显示他们的权限等级和可以访问的内容。当用户尝试进行超出权限的操作时,提供友好的错误消息和指引。
权限变更的审计和记录:
记录所有权限的更改历史,以便于追踪和审计。这对于保障系统安全和满足合规要求非常关键。
持续的测试和反馈:
定期进行权限系统的用户测试,收集反馈并根据反馈调整和优化设计。
通过实施这些策略,可以构建一个既强大又易于管理的访问权限系统,从而提升B端产品的安全性、灵活性和用户满意度。
1.5多设备兼容
必须确保界面在各种设备和屏幕尺寸上均表现良好,
尤其是需要在宽为1440px和1920px下有效运行。
针对B端产品界面设计中的“多设备兼容性”问题,一个详细的解决方案涉及多个层面。
首先,采用响应式设计原则
,确保界面元素和布局能够根据不同的屏幕尺寸和分辨率自动调整。
其次,对于关键功能,进行彻底的跨平台测试,包括不同操作系统、浏览器和设备类型,确保功能的一致性和稳定性。
另外,考虑到触控和非触控设备的交互差异
,设计时应确保按钮和其他控件大小适中,易于操作。
通过这些综合策略,可以有效解决多设备兼容性问题,提升用户的整体体验。
1.6专业术语和内容
针对B端产品界面设计中的“专业术语和内容”问题,一个详细的解决方案包括深入行业研究,确保使用对目标用户群来说准确、相关的术语。
与此同时,与行业专家合作,以验证内容的准确性和适用性,确保信息传达清晰无误。
设计时,考虑到不同用户的知识背景,提供容易理解的解释或工具提示,对复杂术语进行简化。此外,创建全面的帮助文档和在线教育资源,帮助用户深入理解专业内容。
定期更新内容,确保与行业发展保持同步,同时收集用户反馈,不断优化和调整术语和内容的使用。通过这些方法,UI设计师可以在确保专业准确性的同时,提升用户的理解和操作效率
1.7交互复杂性
了解用户:
深入理解B端用户的工作流程和任务需求。B端用户往往更关注效率和功能,因此设计师需要明确用户的专业性和任务目标。
简化流程:
尽管B端应用可能功能复杂,但设计师应努力简化用户流程。这包括创建直观的导航系统,减少不必要的步骤,以及提供清晰的指引。
模块化设计:
将复杂功能拆分成独立的模块或组件。每个模块专注于一个具体任务或功能,用户可以根据需要组合使用它们。
定制化和个性化:
允许用户根据自己的需求和偏好定制界面和功能。例如,提供可定制的仪表板,让用户可以选择对他们最重要的信息和工具。
清晰的视觉层级:
通过颜色、大小和布局等视觉元素创建清晰的层级,帮助用户理解信息的重要性和操作的先后顺序。
 
二、不同的B端产品所面对的问题也不一样
不同B端产品可能面临的问题包括用户角色多样化、数据密集、严格的安全要求、高度定制的工作流程和快速变化的行业规范。在B端产品设计中,UI设计师可能面临的问题和注意事项举例:
ERP系统:
可能出现的问题包括复杂的数据集成和大量的用户角色。设计时应注重清晰的数据可视化和灵活的权限设置。
医疗保健平台:
面临严格的合规和隐私要求。设计应确保数据安全性,同时提供易于理解的导航和专业术语解释。
金融管理软件:
需要处理复杂的交易和报告。应关注于精确的数据展示和高效的任务流程设计。
CRM系统:
需管理大量客户数据和销售流程,可能面临数据整合和用户个性化需求的问题。设计时应侧重于清晰的数据组织和自定义视图。
供应链管理软件:
可能面临复杂的物流数据和多级用户访问问题。解决方案包括强大的数据过滤功能和灵活的权限设置。
项目管理工具:
需处理不同项目和任务的组织,可能面临用户协作和进度追踪的挑战。设计应侧重于简化的任务管理界面和实时更新功能。
财务报告系统:
可能遇到的问题包括复杂的财务数据展示和各种报告格式的需求。设计时应注重灵活的报告工具和定制的数据仪表板。
教育管理平台:
面临多样化的用户群体和教育内容的问题。设计应提供清晰的课程导航和易于访问的教学资源。
工业监控系统:
可能面临实时数据流和高级监控功能的需求。设计时应重视数据实时更新和高效的警报系统。


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

蓝蓝设计(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设计的道路上不断探索,不断追问,以不断演进的方式引领用户进入更加智能、便捷的数字化未来。

日历

链接

个人资料

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

存档