首页

从一个UI界面设计看体验设计师要具备的基本技能

博博

体验设计的岗位数量逐渐增多,从几个大厂的招聘要求来看,要求也是非常的高,所谓富贵险中求、能力与收入成正比,想要拿到30k以上的薪资,那么你的能力就一定不能太单一,特别是思维层面,一个独立思考完成大型项目的全链路设计师依然是不可多得的人才。
 
这个原型是一次UI测的作业,本身其实没有定任何的背景,让同学们自由发挥,只要能逻辑自洽那么都可以说的过去。好,大家一起来分析一下,这个案例做的怎么样。
 
如果我们给到的原型是这样的,缺失了很多重要的信息,这时候你会如何补全?如果你具备产品思维,那么你可以考虑到很多信息,如果你对这个行业和用户又更深的认识你可以补全更多信息,当然了,还是要尊重原著,既然原型给的是这样的,那么说明这个产品还是比较聚焦业务的或者说处于起步阶段,业务功能并不多,主要围绕着拍照搜题、批改、错题这样的功能来做的。
从一个UI界面设计看体验设计师要具备的基本技能
 
 
从上往下我们依次来分析功能、交互、视觉的合理性。
 
1.导航栏
从一个UI界面设计看体验设计师要具备的基本技能
 
1.用户头像、昵称、学年这些信息对于这个产品的用户来说其实可有可无,除非这里需要用户切换学年,但明显不是个高频的操作,所以放或者不放影响不大。搜索其实不需要做这么明显,因为关于搜题还是拍照更直接,所以搜索可以有但不需要展开。历史记录,这里基本上都是题目搜索,错题本可以直接查找到的,并不需要历史记录,可以弱化或者删除。
关于该功能是否有必要,大家只要思考是否具备业务场景和用户场景即可,具备了场景,再思考是否具备核心价值。
 
2.业务分流入口区
从一个UI界面设计看体验设计师要具备的基本技能
 
这里在原型中其实并没有体现,学员主动加上去,这个在实际工作中不需要UI设计师或者体验设计师这么去做,主要的业务功能还是要交给产品经理去研究,设计师专注体验的优化迭代和功能设计支持工作即可。那么这里我们我们就主要看看这些功能是否合理。
 
作文和计算器可以保留,口算题其实包含在一些小体量的题目类型中,如果有口算,为什么没有选择、填空、解答题呢?所以如果要放题目类型那就要放全,或者给一个题库的入口,而不是只放一个小类目。问卷条烟是临时性需求,不适合常驻。下载要看能下载什么,下载题目其实和收藏、错题本功能就重复了。
 
3.错题本
从一个UI界面设计看体验设计师要具备的基本技能
 
在原型中,错题本几乎只有这三个字有用,所以错题本要提供给用户哪些信息,需要设计师自己思考。在工作中,
产品经理一般是如何对错题本模块进行功能分析的,可以通过用户调研、竞品分析、卡片分类等方法,找到用户对错题板块的功能需求。
 
所以从学员的作业上来看,还是有很多不合理的地方,比如错题本的卡片中的信息,这里的
几个数字以及该卡片呈现出来的示能,其实效用很低。
首先该卡片没有任何可点击进入的入口,数据展示虽然也有一定的示能,但比较弱。所以问题的 本质在于你想让用户干什么,那么你就需要设计 成什么样式,同时要看这个产品的定位,比如针对全年级和学级 还是只针对小学一个学级的,那么设计策略就会不同。
 
所以 要思考关于错题本相关的更多信息,比如:
 
从一个UI界面设计看体验设计师要具备的基本技能
 
1.产品定位与发展时期,在产品初期、中期、后期,版块的设计策略会有很大的不同。
2.错题本应该、需要有什么功能,
比如不同类型题目的分类、收集错题、筛选错题、管理错题等等。
3.如何让用户在错题本功能中更高效的进行交互
,入口示能和意符的表达,点击进入后 的信息布局和交互流转。
4.更多的信息细节:
每一个字段信息的溯源, 比如错题收藏超过99%的用户,这个字段是想 让用户看了之后干什么,有成就感吗?好像说不通 所以如果没有存在的意义、价值和用户动机的话 就去掉。还有掌握度,这个其实没有太大的意义,错题本的初衷就是帮你去改错, 那么这里势必不可能达到100%,因为一直会有错题,所以就没必要加入这个张无毒字段了 页面下半部分中的信息要斟酌,例如重要性和星级、复习次数这些信息的存在意义
 
其实底部的筛选栏和下方的卡片也都是错题本的内容,但这样的筛选和管理效率太低了。从原型中我们可以得出,产品更希望用户之前的社交更多一些,我们暂且不论这类产品做社交的必要读,但是还是要部分尊重原型。所以错题本在首页中不要进行展开和筛选,一个是效率低,二是不符合产品策略。
 
最好的做法就是把错题本作为一个业务入口放到上面,替换口算题等不合适的入口。然后就是错题本到底应该怎么样设置交互和布局才能够高效完成用户任务。
 
从一个UI界面设计看体验设计师要具备的基本技能
 
1.错题分类,这是最关键也是最开始的环节,用户查看错题首先要选择不同科目的题目。
 
2.筛选条件,这里可能会有家长来使用,那么就会需要用到年级/学期的标签,再根据使用场景来分析还需要:掌握程度、录入时间、错题来源、错误原因、自定义标签等等。
 
3.更多场景,除了筛选出错题外,还可以有哪些用户场景呢?例如错题拍照、题目的管理(增删改查)、错题随机重做、错题组卷等等
在课程中有教过大家一个我自创的排除法来研究页面该如何进行划分步骤,其实很简单,就是我们不停的往一个页面塞东西,如果塞不下了就另起一页。
 
从一个UI界面设计看体验设计师要具备的基本技能
 
所以在这里从错题本进入的第一页,根据用户核心使用场景我们要让用户去选择题目的板块,需要填入的就是多个不同的板块,以及题目拍照功能,如果不另起一页那么需要在这个页面中塞入具体的题目、各种筛选标签,那么,在第一页明显是不合理的,所以就要另起一页,进入不同板块题目的合集页,并且在这个页面中我们就可以实现筛选、管理、错题随机重做、组卷等共功能了。


作者:应骏
来源:站酷

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

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

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

 

产品猎人(一)丨带你探索更多体验案例

博博

(1)网易有道-是如果通过轻提示来引导用户勾选服务协议的

服务条款是用户在登录时经常遗忘点击的功能,当用户忘记点击时很多产品都会采用强弹窗的形式来提示用户进行选择,这种强弹窗形式会中断用户的当前行为操作,增加用户心理负担。但我们发现网易有道通过toast轻提示的样式来提示用户勾选,这样不仅可以教育用户如何操作,还不会阻碍用户操作,提升用户的操作信心与体验流畅性。

 (2)小红书-来看小红书如何通过表情来做快捷回复

小红书与好友分享作品后,会在作品下方出现三个快捷回复表情,表情可以通过内容来匹配最为符合的三个表情,这样不仅提高回复率,激励分享者来分享更多的作品,还可以增加用户使用聊天功能,提高IM互动量与产品趣味性。

 

(3)西西语音-用元宇宙玩法来提升语音直播体验

西西交友上线了一个元宇宙直播功能,把语音直播间变为了虚拟世界的形式来展现,提高直播的玩法,用户不仅可以听到主播小姐姐们的美丽嗓音,还可以在虚拟世界中进行换装与打招呼,提升直播间的可玩性与互动性,拉近主播与听众间的距离,从而增加用户停留在直播间的时长。

 (4)boss直聘-薪资体验细节

大多的招聘平台薪资处理方式大多是以“K”或“万”为薪资单位,从用户角度分析“万”是中国的通用单位,对国内用户的理解成本更低,“K”是英文单词前面都有“kilo”的前缀,在国外为数字的通用单位,而且外国是不用“万”来做单位的,通常用“K”来表达薪资10K=1万,随着“K”这个单位逐渐在国内普及,和招聘市场逐渐走向海外,单位也由“万”变成了"K",不过“K”对于很多三线以下城市的人可能不理解什么意思,所以boss直聘为了解决此问题,让用户可以通过设置自定义展示用户需要的数字单位,从而降低用户的理解成本。

(5)贝壳找房-如何通过设计给你安全感

房屋交易平台最重要的就是给用户带来安全与可靠的品牌感,贝壳无疑是房屋交易产品中可靠性最高的产品,这里不仅体现在房屋质量上,在界面UI设计中也充分的体现专业与可靠,如“首页”和“我的”页面都融入了安心承诺,功能整体UI也采用盾牌为主元素给用户带来稳定可靠的感觉。

(6)飞书-IM页的聊天气泡用的还习惯吗?

飞书的聊天气泡与其他聊天平台逻辑有些许差异,大多数IM聊天工具的聊天都为左右结构,左侧为对方的消息,右侧为自己的消息,这样可以很好的进行消息区分。但在体验飞书时都为左侧,这样会使用户的使用成本大大提升。在最新版的飞书设置中增加了选择显示聊天布局的功能,让用户可以自定义的选择回话布局,从而降低用户的使用成本。

(7)斗鱼-新版直播间带来更好的观看体验

斗鱼上线了沉浸式新版直播间,相比旧版界面更干净,布局更合理,把功能集合到顶部/底部操作区,让重要信息更直观的展示。给用户带来沉浸式的直播观感。同时支持上下滑动切换直播间,提高直播间之间的用户流动性。

 (8)通过设计提高banner体验

贝壳app首页滑动界面时banner会进行展开,展示更多相关信息,banner采用固定的视觉样式。这样不仅可以降低banner的制作成本同时还可以规范风格与内容组件化,同时切换banner时增加流畅的动效来提高用户惊喜感。

 

 

(9)高德地图-对路线的体验细节

高德地图在导航路线时会出现一段动画效果,给用户带来很好的视觉体验,动画结束后,会根据路线特点进行提示,分为:阴凉/下坡/夜灯等提示来告知用户路线特点,用户可以根据自身需求进行选择,提升用户体验。

(10)大众点评-来看瀑布流图片预加载的价值

大众点评与快手app产品中瀑布流图片未加载时会根据图片内容展示对于颜色卡片,这种方式会在用户网络缓慢时很好的缓解等待情绪,期待图片内容,同时增加图片出现缓动动画,让颜色卡片与图片进行很好的衔接,相比其他产品的图片直接出现方案,有非常明显的体验提升,同时展现设计细节。

(11)B站-此功能的入口这样展示合理吗?

在体验b站过程中发现在首页左上角有一个自己的头像,在头像的左下角有一个视频图标,一开始我以为是自己的相关视频或者相关视频设置功能,但点击进去是沉浸式视频(类似于抖音),跟入口的信息没有任何关系,那此功能入口为什么要展示自己的头像呢?这样设计真的是合适的吗?不会引发用户反感吗?

(12)全民k歌-终于支持自定义编辑了!

全民k歌编辑录音终于支持自定义功能了,此前使用全民k歌时一直都觉得那些固定的风格太过局限,缺少一些自定义功能,这次新版本的全面k歌终于上线了自定义功能,不过前期可自定义的功能偏少,如可以添加更多可选项,会更加好用。此次自定义功能仅支持VIP可用,我相信会有不少用户会因为此功能而开始VIP吧~

 (13)腾讯视频-屏幕顶部操作区的隐藏与出现交互

当用户滑动屏幕时,「腾讯视频」顶部的操作区会跟随手势进行向上隐藏,这样可以在用户向上滑动浏览信息时给界面带来更多的展示空间。当用户向下滑动一定距离时顶导出现,方便用户对顶导进行相关操作。这里的交互细节很舒适,大家可以多多学习。

 (14)斗鱼-无畏契约「瓦」攻略站来了!

斗鱼作为直播平台,是基于游戏直播与游戏玩家形成的链接,而此次斗鱼对于无畏契约进行了全新的突破,搭建无畏契约攻略站(战术攻略,视频攻略,游戏攻略等),尤其是战术攻略,让用户可以在地图上查看对应的定位攻略,还可以进行收藏、分享等操作。这样不仅可以吸引喜欢无畏契约直播的用户使用,还可以因此吸引一波游戏玩家前来使用攻略站,让更多的人使用斗鱼,分享斗鱼提升分区活跃,喜欢玩“瓦”的用户快来体验吧!

(15)看理想-十分用心的封面设计

经常会浏览一些书籍app或者播客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、形状的一致性

在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、可定制形状设计

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

 

总结

在UI设计中,精美形状设计的关键是深入理解用户需求,注重细节,保持一致性,勇于创新,不断提高技能水平。这样才能创造符合用户口味的界面,提升用户体验。简洁地说,好的形状设计来源于用户需求、细节、一致性、创新和自我提升。

以上总结仅代表个人观点,如有不足欢迎大家补充互相进步。

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

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

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



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

一招教会你页面分割怎么用

前端达人

作为一名合格的UI设计师,用好留白分割、线性分割、卡片分割,你的页面即成功了一半!

留白分割≧线性分割≧卡片分割

 

 

 

 

留白分割定义:指的是只通过增加间距的方式,利用人的视知觉原理(接近法则:人的大脑会倾向于把彼此靠近的元素视为一组),自然的将信息分组。(如上图)

间距留白是区隔单一信息元素的默认选择。(如下图)

 

 

 

 

 

 

使用原则:建议在不影响核心数据指标的前提下,条目之间尽可能采用留白分割,会让界面更清爽,浏览更沉浸。

 

留白分割的分类及适用场景:当条目信息层次较少(≦2)时,留白分割是比较合适的,当信息层次较多(≧3)时,留白分割既会浪费空间,也难以达到一目了然的分割效果。

 

线性分割定义:用线来分隔不同的信息内容。(大部分APP的分割线是1px粗细,黑色,不透明度12%)。

 

使用原则:分割线可以帮助用户理解页面是如何组成的,但过度使用分割线会造成视觉干扰,影响页面信息传达。

Android系统明确规定了分割线的使用原则:
1、微妙的:分割线在布局中应该很容易被注意到,但又不凸显。
2、次要的:只有当留白不能起到分割作用时,才采用分分割线。
3、少用的:谨慎使用分割线,用它来创建分组而不是分割条目。(如下图)

 

 

 


分类及使用场景:
1、通栏分割线:用于分割彼此完全独立的内容。
2、内嵌分割线:用于分割有锚点(头像或图标)的相关内容。
3、中间分割线:用于分割无锚点(头像或图标)的相关内容。

 

 

 

 

如果为了提高屏效,希望在一屏内尽可能多的展示信息,那么同样的信息布局,分割线带来的效果会更清晰(如下图)

 

 

 

 

卡片分割定义:卡片是一个由内容和操作组合而成的独立主题的面性容器①,它可以包含缩略图②、标题③、副标题④、副媒体⑤、文本⑥、问文字按钮⑦和图标按钮⑧,除了卡片容器本身,其他元素都是可选的,所有元素都以易于扫描和操作的形式放置在卡片上。

 

 

 

使用原则:
1、包含的:卡片是一个可识别的,单独的、包含内容的单元。
2、独立的:一张卡片可以独立存在,而不依赖于上下文环境。
3、不可分割的:一张卡片不能与另一张合并,也不能拆分成多张卡片。
分类及适用场景:
卡片根据左右是否有边距,可简单分为通栏卡片和非通栏卡片(如下图)。

 

 

 

从视觉效果上来看,由于圆角的聚焦效应,非通栏卡片对于凸显单个卡片的独立性和内容的效果都更好,画面的分割感会更强。
1、当这个主题内部的内容已经有分割线时,建议采用卡片分割,让主题信息层次更加清晰。
2、当单个主题内部的内容类型较多,上下所占空间较大,建议采用卡片分割,以更好的圈定该主题的内容范围,给用户明确的内容边界感。
3、当需要扩展页面的横向空间时,暗示页面可以横向滑动时,需要采用非通栏卡片,利用横向内容连续性原则,帮助用户建立可以横向滑动的意识。

 

 

 

 

小结:

 

 

 

 

  • 当信息条目复杂度较低时,优先采用留白分割,视觉清爽无干扰。
  • 当信息条目复杂度增加,只利用留白分割效果不明显时,建议引入线性分割,让信息层次更清晰且屏效高。
  • 当信息条目复杂度进一步提升,(比如已经有了线性分割,或者有更多操作),需要进一步强化信息条目本身的边界感,建议引入卡片,以强化条目信息的视觉层次和可操作性。

信息分割本身不是目的,分割方式的选择是为了让版面产生清晰的条理性,用悦目的信息秩序来更好的突出内容,达成最佳的信息传达效果,所以决策时,除了上述细节考虑因素,还要考虑整体版面效果和信息传达效率。

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

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

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



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

浅谈实际应用中图表的选择与思考

博博

图表的作用

痛点:数据无处不在,数据的存在与展示往往是巨量的、凌乱的,同时出现往往会使用户分辨不清产生混乱。

解决办法:为了使这些凌乱的数据更易懂,将其可视化是首要选择。对数据分析结果的可视化呈现不仅可以帮助我们更好地理解数据内容也可以帮助我们挖掘数据所传达的价值。

数据可视化的本质是视觉方向,将分析所得数据与图形相结合,将冰冷的字符转化为带有趣味性的图形,为数据提供了灵活性,从而更高效地传达数据所附带的价值信息。

设计工作中,对于图表的设计并不能将所有精力都投入如何做出“精美、好看”的图表,更要考虑的使用什么类型的图表,图表的什么样的展示形式更有效的,更高效的传达数据给用户。

一般在图表设计前,设计师应优先了解该条数据用途和目的,分析用户需要什么样的使用体验,分析用户的特征、使用场景、以及用户使用这组数据的目的,制定出初步方案,避免因设计选择图表类型而增加数据传达的复杂程度。

图表的类型(仅展示几种常用图表)

1、适用于比较类的图表,此类图表用于显示数据的差异与相似之处,对比数据变化,如:条形图、柱状图、堆积柱状图、堆积条形图、折线图。

类型举例:

条形图/柱状图

条形图是用于比较分析的主力图表,此类图表能够通过将数据图形化,快速传达给人类相应比较信息,通过人在视觉上快速辨别高度或者长度的差异,从而达到传达信息的目的,所以多用于呈现简单有序的数据。

堆积条形图/堆积柱状图

堆积条形图适合对比更复杂的类别和各类别之间的关系和差异,或者是用于同一组数据不同属性数据各自占比。一般同组数据较多时适合使用堆积条形图,同组数据较少时适合使用堆积柱状图。

折线图

折线图多用于连续的数据或者有序数据的变化趋势的展示,适合用于数据在不同时间的变化,更有效直观的展示数据的走向和趋势。折线向下X轴投影面积也可以更直观的展示数据信息。

2、适用于展示数据的分布情况,此类图表用于传达数据的关联性,如:雷达图,散点图,气泡图。

类型举例:

雷达图

雷达图是以从同一点开始的轴上表示的三个或更多个定量变量的二维图表的形式显示多变量数据的图形方法。

 

 

散点图/气泡图

散点图通常用于显示和比较数据,例如科学数据、统计数据和工程数据。当要在不考虑时间的情况下比较大量数据点时,使用散点图。散点图中包含的数据越多,比较的效果就越好。

气泡图与散点图相似,不同之处在于,气泡图允许在图表中额外加入一个表示大小的变量。

3、用于展示一组数据中各个分类数据比例关系,如:饼图、环形图、树状图。

类型举例:

饼图/环形图

当只需要绘制一组数据并展示该组数据中不同分类的数据占比时,饼图或者环形图是一个不错的选择,饼图有效直观的展示该组数据这个特性,环形图则在饼图的基础上可以添加传达该组数据信息。

树状图

树状图,又称树枝图。通过嵌套矩形的方式来展示数据的类别,通过面积大小来展示该组数据中不同分类数据的占比情况。

4、适用于各数据存在相互流转关系,能有清晰有效的反映数据信息的同时还可以展示数据流转的过程,如:桑基图、漏斗图、瀑布图。

类型举例:

桑基图

桑基图可以有效显示数据如何在两个组之间流动,可清晰的展示一组数据中流转到下一级时,数据是如何分布的。同时也可以显示负数,并计算对总数据的影响。

漏斗图

漏斗图十分适用于表示数据在某种条件的过程中的各个阶段,如市场营销或销售过程这种每个阶段都有一个值的数据。

瀑布图

瀑布图适用于流程各个状态的起始值、中间值和最终值。适合用作反映数值的增减,比如市场销售额一年中各月营收、客流量等指标的变化。

案例分析:XX小学数学模拟考试成绩下发,数学老师想要知道每一个同学的成绩变化以及浮动,针对性对不同学生进行教学,应选择什么样的图表更方便的数学老师查看信息呢?

案例如以下数据:

首先分析数据信息,可见3月、6月、9月和12月的成绩和排名都是不同的,根据用户需求分析数据,优化数据排列方式,输出新的数据表单:

如想要得到每个同学的成绩变化与浮动,选用柱状图和折线图较为适合,又考虑学生量较大(变量),在此可选择折线图用于数据分析。

输出新的数据图表:

具体操作演示:



作者:Hapic21
来源:站酷

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

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

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

B端设计:提示图标中蕴藏的奥义

博博

你是否和我一样,曾经有两个图标摆在我面前,我却傻傻分不清楚,随便乱用,他们就是?和 i两个小家伙。

 

 

含义:

在系统页面当中,i 图标通常代表信息(information),而 ? 图标代表帮助(help)。

运用场景:

i 图标(信息):通常用于提示用户可以获取额外信息或详细说明的地方。例如,在表单输入框旁边的i图标可以提示用户悬停或点击以获取有关该字段的更多信息。

?图标(帮助):通常用于提供用户帮助和解答疑问。例如,在应用程序的菜单中,可以使用?图标来提供关于如何使用该功能或应用程序的帮助文档链接。

这些图标的使用可以帮助用户更好地理解和使用应用程序,提供额外的信息和帮助,从而提升用户体验。

 

i 图标和 ?图标的意思确实很相近,但它们在UI设计中有着微妙的区别。下面是它们的区别和如何判断该用哪个的方法:

1. 区别:

- i 图标(信息)通常用于提供有关特定项目或字段的额外信息、解释或提示。它强调的是提供信息。

- ?图标(帮助)则更倾向于提供整体上的帮助和支持,通常用于指示用户可以获取额外的帮助文档、FAQ(常见问题解答)或联系支持团
队。它强调的是提供帮助和解答疑问。

2. 如何判断该用哪个:

- 如果需要提供特定项目或字段的额外信息或解释,可以使用i图标。

- 如果需要提供整体上的帮助和支持,可以使用?图标。

 

 

简单总结一下

i 侧重点是提供信息,详细的说明,重点提示。

? 侧重点是帮助提示,对疑问的解释,如何使用该功能。

以上列举出来的实例在提示图标的应用上不会有太大的分歧,其场景都很明确也容易区分。

但是有一类场景会让人有些摸不着头脑,争议点比较大(如下图)

上图所展示的,对于系统内一些专业名词的解释,该使用哪种符号每个设计师和产品经理处理的方式不一样,甚至会发现同一个系统下出现两种符号同时使用的情况的场景(如:钉钉后台管理页面)

在这些特定的词汇旁边的提示图标,所表达的潜在含义是:这是么?以及对这些字段的拓展解释。

同时我也问了一些大厂的朋友,这种地方是个仁者见仁智者见智的场景,所以此处可以对于图标的运用可以灵活一些。

在实际应用中,可以根据具体情况来判断使用哪个符号。但最重要的是保持一致性和符合用户习惯,确保用户能够直观地理解并使用这些符号。


作者:齐天大硕
来源:站酷

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

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

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

设计师如何用chatGPT更好的工作?

博博

1、写产品文案

当你需要的文案出来后,你可以让它优化。你可以约束字数,提更多具体要求,它都能满足你。

具体的一些提示文案细化以及示例

2、设计产品框架

提供页面框架设计思路,当然你也可以把问题换成你正在做的产品。

3、做竞品分析

针对某一个特定的产品写出分析报告框架。你可以换成其他你感兴趣的产品。

这里需要提醒下,对于一些通用型知识,它可以写的很好,但如果是针对某个特定产品的具体内容,可能偏差会很大。

有了大纲再去找内容可以省事很多,比如

那么可能你也还想进一步问,如何做好竞品分析?因为这个虽然是基础,但如果你不知道背后原理,可以继续追问。

4、学习设计流程

帮助优化设计工作流程,但它所提到的工作流程优化属于比较通用的。

如果你想要问具体的,你得问更具体的问题。

5、学习设计工具

你也可以问它任何你想学的其他工具和知识。

6、找设计资源

可以让它给出资源链接,方便快速查看。如果链接打不开,甚至还能修正。

7、学习更好表达

向团队其他成员解释一些复杂概念

如何给非行业内的用户解释你的产品概念

8、搜索设计趋势

9、帮忙写PPT

当我加上页码后,居然真的会努力写到这个要求的页数,虽然实际上用处不是很大,但这个能力再进化进化,真的很厉害,至少能提供一个通用思路。

10、组织活动流程

如何更好的组织一场设计脑爆会

作者:彩云Sky
来源:站酷

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

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

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

谈谈设计创意获取的思路

博博

一、关于设计趋势
设计创意是符合设计趋势的,我们需要关注设计趋势。
我觉得趋势这个词,书里面有个观点还是可以的:关注长期趋势。
为什么这么说呢,因为趋势不是朝三暮四的,往往会保持很长的时间。所以我们在做设计创意的时候可以适当关注长期趋势。
1.1关注社会趋势的重要性
最直接影响的就是职业生涯的发展。譬如你是一名UI设计师或者即将毕业的学生,在当前的形势下UI设计师已经趋于饱和,你想完成一次职业方向的确定或转变,你会往哪里走?
那么你需要关注设计趋势。
如果你选择的是一个接近饱和的方向,那么你的薪资几年内肯定也得不到提高。有的设计师经常会说我做UI设计5-7年了,但是薪资依然还是1万,我只能说你现在没有什么竞争力。
所以趁着年轻,你可以考虑换一条细分的赛道。
譬如逐渐趋于饱和的车载HMI设计,即将爆发的类似于Vision Pro的增强现实设计。。。
来自于苹果官网
来自于苹果官网
 
1.2如何了解设计趋势
首先,最直观的就是设计大事件。
譬如苹果等著名品牌引导的设计承载方式的变革。从罗永浩推出无限屏概念开始,其实类似的空间设计就已经处于慢热状态。直到苹果正式发布了Vision Pro,这种大事件直接将增强空间设计推向了高潮。
我们可以通过苹果的官方网站,去了解Vision Pro的使用方法,以此来感受Vision pro可以改变什么?文本编辑、影视、阅读以及游戏等等用户体验与手机操作的不同点,从而延伸出未来可以商业化的场景方向,可以做预知性的推断。
有兴趣的设计师还可以通过苹果发布的Vision pro模拟器,来尝试性地输出一些创新的想法和创意,以此来建立自己在增强空间设计上的设计经验和竞争力。
其次,可以通过设计网站、社区和平台。
譬如优设、站酷、人人都是产品经理等一些设计资讯平台。很多设计师会将国外的一些好的设计趋势的文章翻译,我们可以通过这些文章来获取设计趋势。
再者,可以通过行业内的研究报告。
譬如艾瑞咨询发布的《2023年AIGC场景应用展望研究报告》,里面就阐述了下一年甚至是未来AIGC的发展方向。
二、经验积累促进设计创意输出
2.1经验积累到一定程度的好处
一般设计师在自身发展的同时,也都会留意身边设计师发展的如何,嫉妒和对比是很正常的。有的设计师会觉得为什么他年纪不大却能当领导,为什么他的薪资比我多那么多,为什么每次任务下来后他总是做的又快又好。。。
因为这是工作/设计经验给他带来了各种红利。
为什么经验丰富的设计师创意那么多呢?那就是尤尼卡效应(灵感的悄然而至)。有经验的设计师,职业生涯过程中看过无数的案例,想过无数的方案,做过无数的作品。所以,他们可以在看到问题的时候,立马给你输出设计方案。如果你能达到这种地步,你的竞争力也将无可匹敌。
2.2经验积累下的灵感输出
做到两点:【建立方向】和【埋头苦干】
毕业5年内的设计师,可以不用过多的去关注别人与自己的差别,你要做的就是【建立方向】和【埋头苦干】,幸运只光顾有准备的头脑。那些有经验的设计师也都是摸爬滚打一点一滴练出来的。过年的时候跟大学同学吃饭,设计耕耘10余载,他已经是某设计院的总监了。想想与他一起住过的小黑屋,想想我们打地铺黑灯瞎火的做项目,为了钱么?是因为热爱,想做出更好的作品。再看看他一路走来的工作历程,他基本上在一个垂直方向上深耕细作,从场馆的设计方案到制定预算,从项目投标到施工流程,整个一套流程都驾轻就熟了。
2.3不断尝试后的灵感输出
设计师们都知道,灵感不会轻易上门。
创意是被逼出来的!这一点设计师们都很有感触。
这里的经验积累不完全是工作年限的意思,也有深度挖掘之意
尤尼卡效应要求我们,即使在设计工作中没有灵感的时候,继续尝试着梳理思路不断钻研,肯定会有灵感乍现的那一刻。就像书中说的那样:
因为创新是一个渐进的过程,一次加上一点思考,最终会柳暗花明。
MIdjourny输出:设计师绞尽脑汁
MIdjourny输出:设计师绞尽脑汁
 
三、创意汇报
3.1高中低方案战略
要想实现创意被大家更好地接受,通常可以准备三种可能的方案:1.最佳方案2.中间方案3.最差方案。领导的决策,也需要有一定的参考。我们给出的方案,尽量涵盖高中低三种维度,以便进行对比。
3.2选择时机进行推荐
创意方案出来后,你可以安排一次会议/宣讲会,阐述一下自己的设计方案。聪明的做法就是在会议召开之前,先私下把方案简单过一下,以获得一定的支持。
3.3学会倾听
你在汇报项目的过程中,别人会有一些想法和建议,麻烦你认真倾听。不要着急去打断,以免造成厌恶性沟通。
3.4不要放弃
创意被否定很正常。
真正能一次通过的创意实属罕见,就好比不能因为拿不到第一就不上场比赛一样,你也不应该因为创意被否一次就永远自暴自弃。
四、创意输出需要心流状态
心流状态是指自己已经完全沉浸在设计创意中了。
心流状态可以很好地帮助设计师提高工作效率,促进设计创意的输出。
4.1如何获得心流状态
环境很重要。
对于设计师而言,通过调整周围的环境,比如说引进一些比较明亮的色彩、图片、标语等,可以大大激发一个人的学习能力。
开放、整洁、平整的表面有助于整理人的思维,所以一般来说,你的桌子越干净,就越容易提高工作效率,应对工作中的各种挑战。
五、创意伙伴日常沟通
众人拾柴火焰高。
5.1与什么样的人沟通
与相同价值的人沟通。
《探寻第一名》(Looking Out for Number One)一书中,作者罗伯特·林格(Robert Ringer)指出,持久的关系——一方为另一方提供相同的价值,双方的利益交织在一起,让这种关系持续下去——非常有价值。
因此你找的人必定是彼此都珍视的人,可以成为创意伙伴。你可以每个月找创意伙伴聊聊天喝喝茶充充电,获取一些新的想法,让自己的大脑保持常青常新。马云说过,企业在不缺钱的时候融资,而不是缺钱了再去融资。
设计圈有认识的大佬都很重视沟通,会经常跟身边的朋友聊天,其实这很大程度上
可以让一个人拥有多个人的经验和能力。
所以设计师应该尝试着开放一些,而不是闭门造车。
MIdjourny输出:设计师聊天
MIdjourny输出:设计师聊天
 
六、公司层面:讨论/沟通氛围的重要性
公司层面,应该鼓励设计师在会议上多阐述自己的意见。
很多公司是不是有这样一种现象:开会的时候鸦雀无声,只听到汇报的人胆怯地练着演讲稿或者说着自己的方案,让其他人给意见的时候基本无人举手,只能等领导给一些修改意见,
然后这个设计方案就变成了领导认可的设计方案了。
其实这种工作氛围真的非常糟糕,限制了设计师的创意的发挥,同时也让产品成为了一个片面性的产品。
6.1建立讨论沟通氛围的好处
所以团队的讨论氛围一定要建立起来。
书里这样描述:
1.当一个人感觉自己的想法受人欢迎的时候,他会想出更多有创意的点子来解决眼前的问题——有时可能会在会上发表看法,有时则是在私下里提出建议;
2.如果团队的每个成员都感觉更有满足感,他们的参与热情就会高涨。想想看,如果人人都愿意献计献策,事情将会变得多么容易啊!
6.2好好先生对设计创意的阻碍
讨论沟通,也促进了不同声音的展现。团队需要不同的声音,团队需要谦和而坚定的人来告诉我们事情的本来面目,要听到赤裸裸的现实。

作者:阿琦Aqi
来源:站酷

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

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

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

Apple Vision Pro中的设计细节!

博博

1. 沉浸感
将整个设计放在真实的空间中,使得设计更符合自己的体验、更加真实。
需要你拍摄一张真实的空间照片,卧室、街道、户外......
体验Apple Vision Pro后的一点思考
2. 设计
从关键页面开始设计
设计空间界面的第一个原则是熟悉性。
设计空间界面的第一个原则是熟悉性。
在你面前滑动一个180°视野的走马灯界面,但主要焦点始终在最中心的设计上。
在你面前滑动一个180°视野的走马灯界面,但主要焦点始终在最中心的设计上。
从侧面看,它会有点像这样
从侧面看,它会有点像这样
 
3. 中保真设计
体验Apple Vision Pro后的一点思考
 
4. 材质、组件
苹果在这方面有他们自己的建议,并且已经发布了他们的UI工具包。
Vision OS能根据环境光照条件和场景环境实时调整窗口现实效果。
Vision OS能根据环境光照条件和场景环境实时调整窗口现实效果。
 
最重要的一点:在我的实际体验感受中,当物理世界的背景发生变化时(亮度变化),窗口界面的实时效果也会发生相应变化调整,主要是透明度、窗口边缘、光线效果的变化,特别是一些按钮、点击的交互,模拟物理按钮设计的点击效果非常真实,你想象一下卧室墙面的灯光开关面板,早上按下和傍晚按下的光线效果、角度是一样的吗?
全是细节啊!!!
体验Apple Vision Pro后的一点思考
 
针对空间设计方面需要了解的一些知识点:
视觉
用户感知到的深度,可以通过平面的方式进行设计,也可以通过实际在Z轴上的位置来进行设计。平面的方式,提供的是视觉深度,是假三维;牵扯到Z轴的位置,提供的是确实深度,是真三维。
为了更好的进行空间视觉设计,需要首先了解一些人体工学的知识。
(一)人体工学
第一,视觉系统辨别深度的方式。
视觉系统辨别深度的方式依靠2种线索:单眼线索和双眼线索。
顾名思义,单眼线索只需要一只眼睛即可提供给我们视觉系统依据,双眼线索需要依靠两只眼睛才能提供深度依据。
体验Apple Vision Pro后的一点思考
 
第二,人眼的舒适阅读区域和注意力时长。
在头部不主动转动的情况下,正负30度的弧度,以及比视线水平位置稍稍靠下的位置更适合阅读。
超过这个区域,即使用户不转头,也会因为耗费精力而感到不那么舒适。
体验Apple Vision Pro后的一点思考
 
从视觉暂留(残像)和瞬目反射(眨眼睛)的角度来说,我们的眼睛是不能一直工作的,在设计中可以余留出可以让眼睛休息的时间。
视觉的余留有点类似于留白,让眼睛不需要通过这部分视觉去识别出什么。比如两个按钮中间的空隙,两个虚像之间的不重要的辅助内容等等。
 
(二)视觉设计
空间里的视觉设计,除了我们熟知颜色、大小等,还有尺寸、距离等。可以理解为,一类是二维参数,即Sketch等二维设计软件里可以调整的参数,一类是三维参数,即3Dmax等三维设计软件里,多出来的那些可以调整的参数。
无论是二维参数还是三维参数,就可视化来说,都可以针对颜色、模糊、大小、动效、背景、光影、遮挡、密度这八种对象进行定义,这就是官方说明中所提到的:图像线索用法。
 
(三)窗口内的动效
因为大窗口的内容动效可能让用户产生混淆,官方给了8点设计建议。
1. 保证窗口内内容和物理世界保持水平
2. 保证动效扩展中心点的稳定。这里有一个一个概念:扩散焦点,可以理解为动效的感知起点。
3. 扩散焦点永远保持在窗口内
4. 避免单纯无意义的角度移动(因为会让焦点移动)
5. 避免过快的动画
6. 如果动画变化过大,使用渐近渐出过场衔接
7. 前后移动的动效,内容间距放大,物体放小
8. 使用低反光的材质


作者:20th_Century_Boy
来源:站酷

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

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

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

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

 

日历

链接

个人资料

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

存档