B端界面设计文章及欣赏

从用户体验到细节之美:移动端弹窗设计

博博 B端界面设计文章及欣赏

在当今的移动应用设计中,弹窗作为一种重要的交互元素,对于提升用户体验和增强应用的可用性具有举足轻重的作用。然而,弹窗设计并非简单的堆砌信息,它需要考虑到用户的使用习惯、心理预期以及操作流程等多个方面。因此,如何设计出优秀的移动端弹窗,成为了一个值得探讨的话题。
本文旨在为设计师们提供一份全面的移动端弹窗设计指南。我们将从弹窗的定义与重要性、类型与使用场景、设计原则以及不同场景下的弹窗设计等方面进行深入探讨。希望通过本文的分享,能够帮助设计师们更好地掌握移动端弹窗设计的技巧,提升应用的用户体验。
从用户体验到细节之美:移动端弹窗设计
 
 
从用户体验到细节之美:移动端弹窗设计
 
 
弹窗是用户界面中的一种重要元素,它是一种临时性的、可交互的窗口,用于向用户展示信息、提示、警告或提供额外的功能。在移动应用中,弹窗通常用于在用户执行某些操作或触发某些事件时提供反馈或额外的信息。
弹窗设计的好坏直接影响到用户体验和应用的易用性。一个好的弹窗设计能够提供清晰、简洁、易于理解的信息,同时不会干扰用户的操作流程。而一个不好的弹窗设计可能会让用户感到困惑或不便,甚至可能导致误操作。
从用户体验到细节之美:移动端弹窗设计
 
 
从用户体验到细节之美:移动端弹窗设计
 
 
1、阻断式弹窗
模态弹窗是一种需要用户进行响应的弹窗。它通常会覆盖整个屏幕,并阻止用户进行其他操作,直到用户对弹窗做出响应。打断用户当前的操作流程,属于强势的干扰行为,通常用于需要用户确认或选择的操作,例如删除数据、确认操作等。
从用户体验到细节之美:移动端弹窗设计
 
 
2、非阻断式弹窗
非模态弹窗是一种不会覆盖整个屏幕的弹窗。它通常会以小窗口的形式出现在屏幕的一角或下方,用于提供一些简短的信息提示或警告。是一种轻量级的反馈,不会对用户流程产生干扰,同时又给了用户反馈和信息。并且有时间限制,在一定时间里自动消失。不需要用户进行点击操作,只需要让用户看到即可,常见的非模态弹窗包括Toast提示框、Snackbar提示对话框等。
从用户体验到细节之美:移动端弹窗设计
 
 
从用户体验到细节之美:移动端弹窗设计
 
 
1、弹窗设计尺寸定义
移动UI弹窗的设计尺寸通常取决于多个因素,通常需要考虑设备的屏幕尺寸和分辨率。以下是一些常见的移动端弹窗设计尺寸定义规范:
① 弹窗宽度
在移动设备上,弹窗的宽度通常会与设备屏幕宽度相适应。因此,弹窗的宽度可以设置为设备屏幕宽度的80%至90%,这样可以确保弹窗在不同屏幕尺寸上都能良好地展示。
从用户体验到细节之美:移动端弹窗设计
 
 
② 弹窗高度
移动端弹窗的高度应该根据内容的多少进行自适应,但要避免过高导致用户需要滚动查看。通常建议弹窗的最大高度不超过设备屏幕高度的80%。
从用户体验到细节之美:移动端弹窗设计
 
 
③ 按钮大小
在移动端弹窗中,按钮的大小应该足够大,以便用户能够轻松点击。按钮的大小一般建议在44px至56px之间,同时保持足够的间距,避免误触。
从用户体验到细节之美:移动端弹窗设计
 
 
④ 字体大小
移动端弹窗中的字体大小应该适中,既要保证内容的可读性,又要避免过大或过小导致视觉上的不适。通常建议标题字体大小在16px至20px之间,正文字体大小在14px至16px之间。
从用户体验到细节之美:移动端弹窗设计
 
 
这些尺寸定义规范可以帮助我们在移动设备上创建具有良好用户体验的弹窗。然而,需要注意的是,这些规范并非绝对,在实际设计中还需要根据具体需求和场景进行调整。同时,考虑到不同设备和操作系统的差异,还需要进行充分的测试和调整,以确保弹窗在各种情况下都能提供最佳的用户体验。
 
2、弹窗设计版式
弹窗的版式设计可以根据需求进行多种多样的变化,但一般来说,以下几种版式设计是比较常见的:
① 文字列表框
在页面底部出现,以简洁的功能描述性文字展示功能按钮,敏感的功能操作一般颜色字体标出。
从用户体验到细节之美:移动端弹窗设计
 
 
在进行此类弹窗设计时,有几个关键要点需要特别关注:
首先,文案必须简洁明了,直接传达核心信息。避免使用冗长或复杂的措辞,以免用户产生困惑。
从用户体验到细节之美:移动端弹窗设计
 
 
其次,为了突出核心内容,可以采用一些视觉上的设计技巧,如加粗、变色或增大字体大小。这样有助于迅速吸引用户的注意力。
从用户体验到细节之美:移动端弹窗设计
 
 
在颜色、字体和布局方面,保持一致性至关重要。这样可以增强应用的品牌识别度,并为用户提供更加统一和连贯的体验。
从用户体验到细节之美:移动端弹窗设计
 
 
再次,对于包含大量文字信息的弹窗,可读性是关键。合理使用标题、段落和列表来组织内容,避免布局过于拥挤或空白过多。这样可以提高信息的可读性和易理解性。
从用户体验到细节之美:移动端弹窗设计
 
 
最后,考虑弹窗在不同尺寸屏幕上的适应性是必要的。通过合理的设计布局和响应式设计,确保弹窗在实际使用中的显示效果和用户体验不受屏幕尺寸的影响。
从用户体验到细节之美:移动端弹窗设计
 
 
② 图文排列
当功能按钮数量很多的时候,将文字和图片按照一定的排列方式组合在一起,以吸引用户的注意力并传达信息。这种样式下需要注意弹窗内各功能按钮的UI设计和排列布局。
以下是一些常见的图文排列类型的弹窗设计方式:
2.1 文字居中,图片居侧
这种方式将文字居中显示,而图片则位于文字的一侧。这种设计方式常用于一些需要强调文字信息的弹窗,例如确认框或者提示框。
从用户体验到细节之美:移动端弹窗设计
 
 
2.2 图片居中,文字居侧
这种方式将图片居中显示,而文字则位于图片的一侧。这种设计方式常用于一些需要展示图片的弹窗,例如相册或者图片查看器。
从用户体验到细节之美:移动端弹窗设计
 
 
2.3 文字在下方,图片在上方
这种方式将文字放置在图片的下方,以增强文字与图片的联系。这种设计方式常用于一些需要展示产品或者文章的弹窗,例如产品详情页或者新闻摘要。
从用户体验到细节之美:移动端弹窗设计
 
 
2.4 文字和图片交错排列
这种方式将文字和图片交错排列在一起,以增强信息的层次感和视觉冲击力。这种设计方式常用于一些需要展示多个信息的弹窗,例如表单或者调查问卷。
从用户体验到细节之美:移动端弹窗设计
 
 
无论采用哪种图文排列类型的弹窗设计方式,都需要注重文字和图片的协调性和统一感,以保证弹窗的整体美观度和易用性。同时,还需要根据具体的弹窗类型和目的来选择合适的设计方式,以便更好地传递信息并吸引用户的注意力。
 
③ 选择列表框
用选项代替了功能按钮,这种设计方式的好处是减少了功能流程中的页面跳转,但如果选项很多而且描述文字较多的时候,还是设计成选项详情页更好些。
以下是一些常见的选择列表框的类型:
3.1 单选列表框
这种方式只允许用户选择一个选项,常用于一些需要用户做出唯一选择的场景,例如性别选择、国家选择等。
从用户体验到细节之美:移动端弹窗设计
 
 
3.2 多选列表框
这种方式允许用户选择多个选项,常用于一些需要用户做出多个选择的场景,例如定制化需求、标签选择等。
从用户体验到细节之美:移动端弹窗设计
 
 
3.3 下拉列表框
这种方式将所有选项折叠在一个下拉列表中,用户可以通过滑动或者点击来查看并选择选项。这种设计方式常用于一些需要节省空间或者隐藏复杂选项的场景。
从用户体验到细节之美:移动端弹窗设计
 
 
3.4 弹出式列表框
这种方式将选项以弹出式的方式展示在弹窗中,用户可以通过点击来查看并选择选项。这种设计方式常用于一些需要快速选择的场景,例如快捷菜单、操作菜单等。
从用户体验到细节之美:移动端弹窗设计


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

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

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

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

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

博博 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设计

前端达人 B端界面设计文章及欣赏

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

 

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设计中圆角与直角该如何使用?

博博 B端界面设计文章及欣赏

在当今数字化时代,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开发

 

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

雪涛 B端界面设计文章及欣赏

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

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

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

(1)量化动效数据

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

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

分享达人 B端界面设计文章及欣赏

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

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

分享达人 B端界面设计文章及欣赏

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

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

分享达人 B端界面设计文章及欣赏

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

 

如何提高设计还原质量和验收效率?

博博 B端界面设计文章及欣赏

最近我们做了一次全新改版的项目。作为此次项目的设计师,从项目的前期分析、设计、交付开发、验收上线,整个流程,在项目走查验收阶段我们设计师投入了30人/天!占了设计师整体投入的50%!在我们觉得应该设计投入最少的阶段,却占了我们大量的工作 且最后还原度也远不达预期。
在这个项目中我遇到了哪些问题:
通用组件更改困难
验收过程反复、低效
技术设计没有达成共识,技术对交互体验层面和视觉层面的问题敏感度很低
还原问题反馈不及时,有些问题项目后期验收的时候才暴露
前期对还原度工作评估不准确,导致后期发现问题 来不及修改
还原问题不单单是设计师把设计稿做的多精准,标注的多仔细,这么简单就能解决的。是设计和开发,团队之间的合作共识问题。我把整个和开发对接工作分为前中后三个阶段,在这里从头来梳理一下,聊一聊设计师和开发如何高效对接,也是对自己的一次复盘总结。
如何提高设计还原质量和验收效率?
一、评审/排期
1.1、设计师对还原的要求宣讲
在评审环节,设计师本人一定要将自己的设计稿进行宣讲、帮助开发理解。注意给技术讲述一些适配要求、设计规范、交互状态及动效等,同时解答技术同学的一些疑问,这样就能将一些可预见的问题解决掉,解决后期的沟通成本。
有一些地方有多种实现方式,如果前期没有跟开发沟通清楚,就会导致最终实现的效果存在误差,比如:下方这个tab项,单给一张图,开发根本不知道设计师想要的实现方式是什么,固定间距还是固定菜单宽度,还是每项平分宽度,最后很大可能就会按照自己的理解去做了,导致出现重复返工的现象
如何提高设计还原质量和验收效率?
再比如一些点击热区,如果不手动标明,有可能就做的很小
下图是我们手动标注的热区
如何提高设计还原质量和验收效率?
1.2、实际开发者要参与评审
每个开发负责的具体页面模块不一样,别人对具体了解程度也不会不一致,所以在评审会议上,一定要具体开发者在场,如果对应开发没有发表意见,设计师可询问,确保他已经理解需求。
1.3、开发充分评估还原工作问题
设计师在讲解自己的要求后,开发也要及时反馈是否有还原困难,如:是否有技术限制?是否有组件改动困难(牵一发而动全身)?实现成本过高(投入产出的性价比不够)?等意见和原因,设计师也可抛出之前是否遇到过类似的阻碍,帮助开发去了解。
1.4、认真记会议纪要
评审过程的问题和重要讲解点,一定要记录下来,会议中开发提出的一些问题及解决方案、或者没有达成共识的地方,记录下来等领导决策,在会议结束后以邮件形式、或wiki文档发送前端们,抄送产品,确保会议内容的传达到位。后面也好跟踪。
还有一点就是,我们之前遇到的情况,在宣讲会上 讲解的一些要求,开发在做的时候可能就忘记了,让开发改他认为设计没有明确要求、会有点难推动,就会搞得双方都有抱怨。有会议记录也可避免此类情况发生
二、开发阶段
2.1、还原有问题及时反馈
在前面我们做了详尽的沟通和评审,但有时也避免不了在开发过程有些问题才发现暴露。这个就需要开发同学能重视还原问题,积极沟通反馈,和设计确认商议 是否有其它可替代方案,切勿自己发挥,等到后期验收的时候才说出问题可能会影响进度。
​2.2、开发完成后对齐设计稿自查
开发者在完成自己负责的模块界面时,可自己对齐设计稿自查一遍,参考【3.1验收标准】的表格,可帮助判断问题,在此阶段也可发给设计者确认效果。
三、验收阶段
如何提高设计还原质量和验收效率?
3.1、测试同学确保交互和视觉还原度至少在70%左右
这里可以提前在项目排期阶段,设计师将所需的验收工时同步给技术和测试,将验收时间考虑进去
为什么要求测试同学保证还原度至少在70%呢?
因为如果不要求测试走查还原度,设计验收的时候就会有大量的问题,最后变成设计在测试界面而不是验收。设计师不像测试对整个流程的测试配置那么熟悉方便,反复验收需要测试和设计不断配合,双方的工作量都会加大。
理想的状态应该是测试整个流程走通,视觉和交互还原问题也要着重测试,设计和产品在测试没什么大问题后再进行验收。
参考【验收标准】的表格,可帮助判断还原问题
如何提高设计还原质量和验收效率?
3.2、明确知道模块的开发者
最好是提前知道模块的开发者,这样验收的时候一对一进行模块的打版验收效率更高
3.3、设计走查问题标注优先级
技术对功能上的BUG,可以自己很好的判断哪些是严重的紧急的,但对于视觉和交互层面的感知就比较低。在提问题单的时候,我们可以帮他标注出优先级,告知开发哪些是比较严重的需要优先修改的,不然 开发自己很难判断,可能就会挑一些比较好改的先改了,重要的问题反而被搁置了。尤其在项目时间比较紧张的时候,有优先级标注 开发能够看出哪些是可以为项目进度做出妥协的,哪些是必须要修改的。
如何提高设计还原质量和验收效率?
3.4、BUG单
设计提BUG单的不能简单的说这里出错了,请参考设计标注重新调整。要直接给出正确的尺寸、增多少、减多少、这样可帮助技术提高更高效率,也能避免开发自己去看又出现误差、又要返工修改。
如何提高设计还原质量和验收效率?
3.5、遗留问题有记录
如何提高设计还原质量和验收效率?
四、结语
设计师在验收过程中容易遇到的一个比较头疼的问题就是,技术和产品小伙伴可能因为项目上线时间紧,觉得视觉还原和页面交互体验上的问题不重要不给予修改,优先保障功能上线。
除了这些原因,设计侧也在检讨总结,自己有哪些做的不足的地方,所以 以上文档也是对接下来工作的优化方案。设计还原度也是日常考核之一,需要大家重视,好的产品要严格把控精心打磨,希望这次的总结、相关流程和经验,在接下来工作中能够提升设计验收效率和还原度。

作者:考思考
来源:站酷

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

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

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

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

博博 B端界面设计文章及欣赏

一、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
来源:站酷

 

 

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

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

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

 

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档