首页

漫谈UI设计中的图标设计

资深UI设计者

在UI设计中,图标的使用可以说是占了大壁江山,相信大家都知道图标的重要性,一个优秀的图标比语言更吸引眼球更可视化,甚至跨越了语言的障碍,传递信息也非常的高效。

关于 UI 中的投影,我从原理给你讲起

资深UI设计者

在如今的界面设计中,投影使用的范围和频次越来越高。无论线上项目或是追波上飞机稿,都可以看见各种各样的投影样式。

UI场景中的极光风设计趋势

资深UI设计者

作为设计师都会时刻关注设计趋势,以 UI 设计来说每年都会出现很多相关的趋势总结,基本是结合预测和实际相结合的。趋势可以让我们把控设计的方向,带给用户更好的感官体验。

AIGC在UI设计中的探索

资深UI设计者

看完这篇文章,你将学到:AI绘画如何在工作中运用的方法,在流程中设计师该注意什么,设计案例以及学习思路。

【万字干货】B端进阶|表格数据过滤分析

前端达人

一、为什么需要数据过滤
在B端(Business to Business,即企业对企业)应用中,表格数据过滤功能是一项非常重要的功能。它能够帮助企业用户更方便地管理和查询表格数据,提高工作效率和数据准确性。因此一个体验感良好的数据筛选功能有助于用户的任务处理效率。帮助系统更加友好、易用,从而增加用户的满意度和使用频率。
在确定过滤类型之前,首先,需要确定哪些字段需要进行筛选。这需要根据业务需求和用户习惯来确定。例如,在销售系统中,可能需要对产品名称、销售日期、销售数量等字段进行过滤;在人力资源系统中,可能需要对员工姓名、部门、职位等字段进行过滤。
 
二、数据过滤的类型
根据确定的过滤条件,需要设计合适的过滤方式。常见的过滤方式包括:1)搜索;2)页签导航;3)条件筛选。不同类型的过滤方式对应不同的用户目标及数据特点
【万字干货】B端进阶|表格数据过滤分析
 
 
 
三、搜索
搜索是一种通过输入关键词或短语在大量数据中寻找相关信息的过程。在互联网时代,搜索已成为获取信息的主要途径之一。通过搜索引擎,用户可以快速地找到自己需要的内容。
3.1 搜索类型
3.1.1 单条件模糊搜索
介绍:用户在搜索框中输入一个关键词,然后搜索引擎返回与该关键词相关的结果。
【万字干货】B端进阶|表格数据过滤分析
 
 
 
  •  
    优点
    :简单易用,用户只需要输入一个关键词即可快速找到相关信息;
  •  
    缺点
    :搜索方式可能不够精确,因为用户可能没有提供足够的上下文信息,导致搜索引擎返回的结果与用户的期望不符
 
3.1.2 多条件模糊搜索
介绍:指用户在搜索框中输入或选择多个关键词,然后搜索引擎返回与这些关键词都相关的结果。可选择是后台配置查询条件还是用户配置。
【万字干货】B端进阶|表格数据过滤分析
 
 
 
  •  
    优点
    :更加精确,因为用户提供了更多的上下文信息,可以帮助搜索引擎更好地理解用户的意图;
  •  
    缺点
    :需要用户输入更多的关键词,增加了用户的输入成本。
 
3.1.3 搜索条件切换
介绍:指用户在搜索框中输入一个关键词后,可以手动切换到另一个关键词进行搜索。
【万字干货】B端进阶|表格数据过滤分析
 
 
 
  •  
    优点
    :灵活性和自由度更高,用户可以根据自己的需要随时切换关键词进行搜索;
  •  
    缺点
    :需要用户手动操作,增加了用户的操作成本。
 
3.2 触发方式
3.2.1 实时触发
介绍:实时触发是指当用户在搜索框中输入关键字时,搜索功能会立即进行匹配并返回相关结果。这种触发方式可以为用户提供实时的搜索体验,方便用户快速找到所需信息。通常需要后端服务器的支持。
【万字干货】B端进阶|表格数据过滤分析
 
 
 
  •  
    优点
    :当用户在搜索框中输入文字时,搜索功能会立即提供搜索结果。这种方式可以提供快速反馈,让用户更快地找到所需信息。此外,实时触发搜索还可以帮助用户逐步缩小搜索范围,提高搜索效率。
  •  
    缺点
    :可能会对服务器造成较大的负担,因为每次用户输入都会触发一次搜索请求。其次,实时触发搜索可能会干扰用户的输入过程,因为用户需要不断地观察搜索结果并根据结果进行调整。
 
3.2.2 手动触发
介绍:指用户需要手动触发搜索功能,通常是通过点击搜索按钮或按下回车键来执行搜索操作。这种触发方式可以避免用户在输入过程中频繁触发搜索,提高用户体验
【万字干货】B端进阶|表格数据过滤分析
 
 
 
  •  
    优点
    :用户需要点击一个搜索按钮或使用特定的快捷键才能触发搜索功能。这种方式可以减少对服务器的负担,并且不会干扰用户的输入过程。
  •  
    缺点
    :可能会让用户感到不便,因为他们需要手动触发搜索功能。此外,如果用户忘记触发搜索功能,他们可能会浪费时间在输入过程中。
 
3.3 理解用户的搜索意图
提高用户的搜索效率和满意度。通过提供相关的关键词建议和展示之前的搜索历史,搜索引擎可以帮助用户更快地找到所需信息,并减少用户的搜索时间和成本。此外,这些功能还可以增加用户的忠诚度和满意度,因为它们能够提供更加个性化和智能化的搜索体验。
3.3.1 关键字联想
介绍:用户在输入一个关键词时,搜索引擎能够自动推荐与该关键词相关的其他关键词,以帮助用户更快地找到所需信息。
【万字干货】B端进阶|表格数据过滤分析
 
 
 
3.3.2 搜索历史
介绍:记录了用户之前搜索过的关键词和搜索结果,以便用户在以后的搜索中更快地找到之前查找过的信息。
【万字干货】B端进阶|表格数据过滤分析
 
 
 
四、导航
使用场景:标签切换一般用于和时间、状态的流转有关,且没有交集的数据内容;主要样式有基础、卡片、胶囊等。
 
4.1 页签导航(tabs)
通过点击不同的标签页来切换不同页面或视图的功能。在许多应用程序中,页签导航可以帮助用户快速地找到自己需要的功能或页面。例如,在浏览器中,页签导航可以帮助用户同时打开多个网页,并在不同的标签页之间进行切换。
【万字干货】B端进阶|表格数据过滤分析
 
 
 
优点:
  •  
    直观易用:页签导航简单明了,用户可以快速理解并使用
  •  
    节省空间:页签导航可以在有限的屏幕空间内展示多个页面或部分内容,提高了页面的利用率。
便于浏览:用户可以通过页签快速切换到不同的页面或内容,提高了浏览效率。
 
缺点:
  •  
    导航深度限制:页签导航通常只适用于一级或两级导航,对于多级导航可能会显得过于复杂。
  •  
    内容展示限制:由于页签的空间有限,可能无法展示所有需要的内容,需要用户点击后才能查看全部内容。
 
4.2 卡片导航
【万字干货】B端进阶|表格数据过滤分析
 
 
 
优点:
  •  
    内容丰富:卡片导航可以展示更多的内容和信息,用户可以通过卡片了解更多详情
  •  
    直观性强:卡片导航以视觉化的方式展示内容,更加直观和易于理解
  •  
    交互性强:用户可以通过滑动或点击卡片进行操作,增强了交互性和体验感
缺点:
  •  
    占用空间大:卡片导航需要占用更多的屏幕空间,可能会影响页面的整体布局和美观度;
  •  
    操作复杂度较高:对于一些用户来说,卡片导航的操作可能会比较复杂,需要一定的学习成本
 
五、条件筛选
筛选是一种对搜索结果进行过滤和排序的过程,以便用户能够更快地找到自己需要的信息。筛选可以根据不同的标准进行,例如相关性、时间、重要性等。在许多应用程序中,筛选功能可以帮助用户缩小搜索范围,提高搜索效率。
5.1 页面布局
5.1.1 上下布局
特点:筛选条件和表格数据分别位于页面上方和下方,用户可以逐行查看数据,同时看到筛选条件。
使用建议:适用于筛选条件较少,且数据量较大的情况。用户可以快速浏览数据,同时方便对筛选条件进行修改。
【万字干货】B端进阶|表格数据过滤分析
 
 
 
5.1.2 左右布局
特点:筛选条件和表格数据分别位于页面左侧和右侧,用户可以同时看到筛选条件和数据。
使用建议:适用于筛选条件较多,且数据量较小的情况。用户可以在筛选条件和数据之间进行快速切换,提高操作效率。
【万字干货】B端进阶|表格数据过滤分析
 
 
 
5.1.3 浮层(弹窗/抽屉)
特点:仅展示筛选图标按钮,以浮层形式呈现。可以在当前页面的上方或侧边以浮动的形式展示,不会占用太多页面空间。
使用建议:当页面的空间利用率要求比较高,非高频操作场景时可使用浮层的模式,节省页面空间。
【万字干货】B端进阶|表格数据过滤分析
 
 
5.2 筛选类型
B端表格的筛选类型主要有平铺式、收折式和下拉式三种:
5.2.1 平铺式
介绍:平铺式是将所有筛选项罗列出来平铺在页面上,可以兼容多种数据格式,如数字、文本、标签、枚举值、布尔值等,包含但不限于日期选择期、标签切换、单选框、复选框等多种控件。
【万字干货】B端进阶|表格数据过滤分析
 
 
 
优点
  •  
    直观明了:平铺式筛选将所有选项平铺展示,方便用户快速找到所需选项;
  •  
    易于操作:平铺式筛选通常采用简单的点击或拖拽操作,方便用户进行筛选。
缺点
  •  
    占用空间较大:平铺式筛选需要展示所有选项,因此可能会占用较多的页面空间;
不适合大量选项:如果选项数量过多,平铺式筛选可能会显得拥挤,影响用户体验。
使用建议
  •  
    适用于选项数量适中的情况:平铺式筛选适合选项数量适中,且用户需要直观看到所有选项的情况;
  •  
    可以结合其他筛选方式:如果选项数量过多,可以考虑结合其他筛选方式,如收折式筛选或表单式筛选。
 
5.2.2 收折式
介绍:收折式筛选通常以收折的状态展示筛选条件,只有在用户触发搜索后才会完全展开。一般筛选条件少于6个,可以通过1行或者2行展示筛选项的结果。
【万字干货】B端进阶|表格数据过滤分析
 
 
 
优点
  •  
    节省空间:收折式筛选可以将不常用的选项折叠起来,节省页面空间;
  •  
    易于查找:收折式筛选通常会提供搜索或筛选条件,方便用户快速找到所需选项。
缺点
  •  
    操作相对复杂:收折式筛选需要用户展开或折叠选项,操作相对复杂一些;
  •  
    不适合所有场景:如果用户需要直观看到所有选项,或者需要快速筛选大量选项,收折式筛选可能不太适合。
使用建议
  •  
    适用于选项数量较多的情况:收折式筛选适合选项数量较多,且用户需要节省页面空间的情况;
  •  
    可以结合其他筛选方式:如果用户需要直观看到所有选项,或者需要快速筛选大量选项,可以考虑结合其他筛选方式,如平铺式筛选或表单式筛选。
 
5.2.3 表单式
介绍:表单式是在系统中页面中的筛选区设置下拉筛选条件,用户通过下拉选择筛选条件中的值对数据进行筛选操作。当然筛选区中可能除了下拉选择之外还有输入筛选,下拉筛选和数据筛选共同组成筛选区。
【万字干货】B端进阶|表格数据过滤分析
 
 
 
优点
  •  
    直观明了:表格形式的筛选方式可以让用户直观地看到各个字段和对应的数据,方便用户进行对比和筛选;
  •  
    操作简单:用户可以通过简单的点击、输入等方式进行筛选,操作简便,提高了筛选效率;
  •  
    灵活性高:表格形式的筛选方式可以支持多种筛选条件和筛选方式,用户可以根据自己的需求进行筛选,灵活性较高。
缺点
  •  
    界面拥挤:如果表格中的字段较多,会导致界面拥挤,影响用户的使用体验;
  •  
    数据量大时筛选性能不佳:对于大量数据,表格形式的筛选方式可能需要较长时间才能得出结果,影响筛选效率;
  •  
    不易展示复杂数据关系:表格形式的筛选方式更适合展示简单的数据关系,对于复杂的数据关系可能难以直观地展示。
使用建议
  •  
    根据实际需求选择筛选方式:在选择筛选方式时,需要根据实际需求和数据量的大小来选择适合的筛选方式。对于简单的筛选需求,可以使用表格形式的筛选方式;对于复杂的筛选需求,可能需要考虑使用其他筛选方式,如条件语句等;
  •  
    优化表格布局:为了提高用户的使用体验,可以对表格的布局进行优化,如对字段进行排序、隐藏不必要的字段等;
  •  
    限制筛选条件数量:为了提高筛选效率,可以限制用户可以设置的筛选条件数量,避免过多的筛选条件导致筛选性能下降。
 
5.2.4 浮层弹出式
介绍:页面中仅展示筛选按钮,点击后以气泡或抽屉的方式去承载筛选内容。
【万字干货】B端进阶|表格数据过滤分析
 
 
【万字干货】B端进阶|表格数据过滤分析
 
 
 
优点
  •  
    用户友好:浮层式的筛选条件提供了一种直观的方式来展示筛选选项,用户可以轻松地查看和选择,无需在页面之间切换或变动页面布局;
  •  
    节省空间:通过将筛选条件放在浮层中,主页面可以保持简洁,不受到过多的干扰元素影响,同时也可以避免筛选条件过多导致的页面拥挤;
  •  
    灵活性高:浮层式的筛选条件可以方便地调整和修改,以适应不同的筛选需求和业务变化。
缺点
  •  
    可能会引起混淆:如果用户不熟悉这种交互方式,可能会对浮层式筛选条件感到困惑,需要额外的引导和说明;
  •  
    可能会影响用户体验:浮层式的筛选条件需要用户手动关闭或选择选项,如果操作不够便捷或流畅,可能会影响用户体验;
  •  
    可能会影响页面性能:如果筛选条件过多或数据量较大,浮层式的筛选条件可能会导致页面加载速度变慢,影响用户体验。
使用建议
  •  
    提供清晰的引导:在应用中使用浮层式的筛选条件时,需要提供清晰的引导和说明,帮助用户更好地理解和使用;
  •  
    优化关闭和选择操作:为了提高用户体验,需要优化筛选条件的关闭和选择操作,使其更加便捷和流畅;
  •  
    考虑数据量和性能:在应用中使用浮层式的筛选条件时,需要考虑数据量和页面性能等因素,采取相应的优化措施。
 
5.2.5 表头筛选
介绍:位于表格表头区域,每一列表头可做单列筛选,也可多列同时筛选。
【万字干货】B端进阶|表格数据过滤分析
 
 
 
优点
  •  
    直观明了:表头筛选将筛选条件直接展示在表格的表头位置,方便用户直观看到所有可用的筛选条件;
  •  
    提高效率:表头筛选可以减少用户的操作步骤和时间成本,提高筛选效率。
缺点
  •  
    适用范围有限:表头筛选通常适用于简单的单字段筛选或单列筛选,对于多字段或多列的复杂筛选需求可能不太适用;
  •  
    可能影响表格美观度:在表格中添加多个表头可能会影响表格的美观度,需要权衡设计和用户体验之间的平衡。
使用建议
  •  
    适用于简单筛选需求的情况:表头筛选适合简单的单字段或单列的筛选需求,如根据姓名、性别等进行筛选;
  •  
    可以结合其他筛选方式:如果用户需要复杂的筛选需求,可以考虑结合其他筛选方式,如平铺式、收折式或表单式等。
 
5.2.6 已选条件
介绍:将已经录入的条件展示在查询条件的下方,可快速删除
【万字干货】B端进阶|表格数据过滤分析
 
 
 
优点
  •  
    用户体验:显示已选条件可以帮助用户更好地理解筛选结果,提高用户体验。用户可以直观地看到哪些条件已被选中,从而更好地理解数据的筛选结果;
  •  
    可视化效果:在筛选区显示已选条件,可以增强表格的可读性和可视化效果。筛选条件的显示可以提供一种直观的方式,帮助用户更好地理解数据和筛选结果;
  •  
    筛选灵活性:如果筛选区显示已选条件,用户可以根据需要轻松地修改或删除已选条件,提高筛选的灵活性;
  •  
    筛选逻辑清晰度:通过显示已选条件,用户可以更好地理解筛选的逻辑。这有助于用户更好地理解数据之间的关系和关联,提高数据分析的准确性;
  •  
    筛选操作效率:对于大量数据的筛选,显示已选条件可以帮助用户更快地定位和调整筛选条件,提高筛选操作效率。
 
六、优化过滤性能
表格过滤是用户在处理大量数据时常用的功能之一。如果过滤性能不佳,用户需要等待很长时间才能看到结果,这将严重影响用户体验。优化表格过滤性能可以减少用户等待时间,提高用户体验。
6.1 索引优化
通过创建索引来提高查询过滤的效率。通过创建模版的方式更快地定位到特定的数据行,通过创建合适的索引,可以显著减少查询过滤所需的时间,提高查询性能。
6.1.1 查询条件模版
将常用的查询方案保存为模版,通过快速切换模版的方式批量替换查询条件,达到快速查询的效果,方便用户快速筛选出所需的数据。
【万字干货】B端进阶|表格数据过滤分析
 
 
 
6.1.1 查询值模版
将常用的查询方案连同值一起设置为模版,在下次切换查询方案时,自动根据预置的值进行自动查询,查询结果保存至浏览器,方便下次调用。
【万字干货】B端进阶|表格数据过滤分析
 
 
6.2 缓存机制
介绍:(浏览器前端)将已经过滤过的数据缓存起来,避免重复查询。
 
6.3 分页加载
介绍:采用分页加载的方式,减少一次性加载的数据量,提高加载速度。
【万字干货】B端进阶|表格数据过滤分析
 
 
 
七、总结
【万字干货】B端进阶|表格数据过滤分析
 
 
在本文中,我们探讨了B端表格数据过滤功能的类型和实现。通过了解用户需求和使用场景,我们提出了表格数据过滤方案。以上方案需要结合实际场景合理配置和选择。同时,我们还介绍了表格数据过滤的实际案例,以及一些性能优化技巧。通过实际应用案例的展示,证明了以上方案的有效性和实用性。
在未来的工作中,我们可以进一步探索表格数据过滤功能的扩展和优化。例如,可以增加对异步数据的支持,提高表格数据的实时性;还可以引入机器学习算法,实现智能过滤和推荐功能。此外,我们还可以考虑与其他系统的集成和交互,以实现更广泛的应用。
总之,B端表格数据过滤功能是提高数据处理效率和准确性的重要工具。通过不断优化和完善该功能,我们可以更好地满足用户需求,提升用户体验,为B端业务的发展提供有力支持。
 


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

解锁HMI设计规范

前端达人

1. 前言
车载HMI设计近年来成为一个热门领域。许多朋友对HMI设计感兴趣,却苦于不知如何入手,不了解HMI设计的基本原则和规范。有人误以为HMI设计仅是设计类似iPad的界面,认为可以直接应用移动端或Web端的规范,这是不正确的。HMI设计拥有其独特的设计规范。本文旨在介绍HMI端的设计系统和原则。当然,这些规范主要用于参考,特殊情况下可以适当打破这些规则。
 
2. HMI设计原则
2.1. 交互原则
在当前的驾驶环境中,自动驾驶尚不能完全取代人工驾驶,驾驶者在行车过程中仍需保持对路况的高度注意,因此确保驾驶安全是设计的首要前提。本文将主要介绍视觉部分的设计考量,关于车载交互的详细讨论将在后续文章中更新。
解锁HMI设计规范
 
 
 
2.2. 视觉原则
在以驾驶安全为前提的设计中,需要确保内容的易读性,目标的易用性,以及界面元素的一致性,从而满足用户在全场景下的体验需求。
解锁HMI设计规范
 
 
 
3. HMI设计系统
3.1. 为什么要搭建设计系统
一致性
:设计系统提供了一套统一的视觉和功能组件,确保不同的产品、页面和功能在视觉表现和用户体验上具有高度一致性。这不仅减少了用户的学习成本,也加强了品牌的整体形象和专业性。
提高效率
:设计系统中的可重用组件和明确的设计指南可以大大减少设计和开发的工作量。设计师和开发者可以快速采用预定义的元素来构建新功能或改进现有功能,无需从零开始。这有助于缩短项目时间线,实现产品的快速迭代。
易于维护
:当所有设计元素和代码都遵循一个统一的系统时,维护和更新变得更加简单和高效。例如,如果需要更新品牌颜色或修改按钮样式,只需在设计系统中进行更改,相关变更即可自动应用到所有使用这些元素的地方。
提高跨团队协作
:设计系统作为一个共享的资源库,可以帮助不同的团队成员(如设计师、开发者、产品经理等)更好地协同工作。一个拥有详细文档和标准的系统确保每个团队成员都能理解和正确使用组件,减少沟通成本和误解。
适应性和可扩展性
:良好的设计系统具备高度的适应性和可扩展性,能够随着公司和产品的发展而成长。随着新需求的出现,设计系统可以持续更新和扩展,新的设计元素和组件可以被添加进来,而不会破坏现有的系统结构。
提升用户体验
:统一和标准化的用户界面组件不仅可以加速开发流程,还可以直接提升最终用户的体验。一致的界面和预测性的交互可以帮助用户更快地适应软件,提高用户满意度。
3.2. 原子设计
谈到设计系统,我们不得不提原子设计。原子设计是由Brad Frost于2013年提出的一种设计系统方法论,它将界面设计分解为更小的组件,目的是提高工作效率和保持设计一致性。原子设计包括五个层次:原子、分子、组织、模板和页面。
解锁HMI设计规范
 
 
 
原子
:设计中最小的可复用单元,包括颜色、字体、图标等基础元素。
解锁HMI设计规范
 
 
 
分子
:由原子组合形成的更复杂元素,例如按钮、输入框等具有特定功能的组件。
解锁HMI设计规范
 
 
 
组织
:由分子和原子构成的模块,承载更复杂的功能和信息结构。
解锁HMI设计规范
 
 
 
模板
:将原子和分子组合成的布局框架,定义页面结构和内容区域的排版。
解锁HMI设计规范
 
 
 
页面
:结合模板和具体内容,形成最终的界面设计。
解锁HMI设计规范
 
 
 
接下来步入正题,本文将详细讲述HMI的视觉样式指南,内容包括颜色、布局、排版和图标。
解锁HMI设计规范
 
 
 
4. 颜色
4.1. 颜色对比度
由于驾驶环境复杂多变,如地下车库、隧道、阴雨天、阳光刺眼的晴天、白天及夜晚,设计时需考虑不同光照条件下的可读性。文本与背景色的对比度应满足特定标准,建议对比度大于7:1,至少应为4.5:1。这些数字区间的依据是什么呢?参考WCAG(网络内容无障碍指南),这些标准旨在为视障人士提供更好的体验,同时也便于普通人使用。汽车作为面向大众的产品,应考虑视障用户的需求。在不佳的使用场景下(如强烈阳光或昏暗环境中),我们也可能经历暂时性的视觉障碍,难以清晰感知内容。
根据WCAG,对比度应符合AA级与AAA级的标准。AA级要求小文本与背景的对比度至少为4.5:1,大文本与背景的对比度至少为3:1。AAA级则要求小文本与背景的对比度至少为7:1,大文本与背景的对比度至少为4.5:1。
解锁HMI设计规范
 
 
 
根据WCAG,小文本指的是字号在19px以下的粗体文本,或者字号在24px以下的常规体文本。大文本则是指字号至少为19px且为粗体的文本,或者字号为24px以上的常规体文本。在HMI设计中,最小文本字号定为20px,字重为常规。因此,文本与背景的对比度不应低于4.5:1。同时,对比度也不宜过高,因为过高的对比度可能导致阅读疲劳,降低阅读效率。在深色背景下,文本与图形的对比度建议不要超过18:1。您可以通过以下链接访问一个网站,以计算文本与背景的对比度:https://www.siegemedia.com/contrast-ratio#%23272e3b-on-%231868de
解锁HMI设计规范
 
 
 
4.2. 颜色分类
HMI设计主流趋势是采用深色背景,这在夜间或光线较暗的环境中可以减少屏幕亮度对视野的冲击,并有效减少阳光及其他光源的反射。在深色背景上,鲜艳的色彩(如红色、蓝色等)更加突出,便于驾驶员快速识别重要信息。在使用深色背景时,应避免大面积使用纯白色,以免过度吸引用户注意力。
然而,随着屏幕硬件技术的进步,越来越多的车机系统开始采用浅色背景。这样做不仅能在保持高对比度的同时有效控制反射和眩光,还确保了浅色背景在各种光线条件下的良好可读性。由于手机和平板设备普遍采用浅色背景,用户已习惯此类界面,这一习惯也推动了车机页面设计向浅色背景的转变。
解锁HMI设计规范
 
 
 
在界面设计中,中性色主要用于文字、背景、边框和分割线,通过中性色的明度差异来营造空间的纵深感。在视觉感知中,明度较高的颜色在Z轴上的位置看起来更高,这有助于区分不同层次。在深色背景下,应通过调整白色的透明度而非使用灰色来进行对比和层次区分。功能色代表特定的信息状态,需符合用户对色彩的基本认知,例如:成功用绿色表示、失败用红色表示、提醒用黄色表示、链接用蓝色表示。同时,还需要设定合理的对比度和饱和度,以确保在驾驶环境下能有效识别这些颜色。
解锁HMI设计规范
 
 
 
车机配色应避免大量使用鲜艳的色彩,以免过度吸引用户的注意力。根据Munsell Color原理,颜色的饱和度和明度两个数值越大,颜色越鲜艳。在车机配色中,我们需要遵循以下两个规则:
1.越接近右上角的颜色越鲜艳,应避免使用这类颜色;
2.选色时应关注饱和度和明度,这两个数值之和应尽量小于180(S饱和度 + B明度 ≤ 180)。同时,品牌色的合理应用能有效传达品牌调性,但不建议大量使用红色系作为品牌的功能色。
 
4.3. 大厂颜色规范
解锁HMI设计规范
 
 
解锁HMI设计规范
 
 
 
5. 布局
5.1. 屏幕种类与屏幕分辨率
车机的屏幕尺寸与分辨率种类繁多,且车机涵盖多种屏幕类型,如仪表屏、中控屏、副驾娱乐屏、后排娱乐屏等。接下来介绍几款热门车型的屏幕参数。
小米SU7
仪表屏:7.1英寸
中控屏:16.1英寸、3072x1920
解锁HMI设计规范
 
 
 
特斯拉 Model Y
中控屏:15英寸、1920x1080
解锁HMI设计规范
 
 
 
问界M7
仪表屏:10.25英寸、1920x720
中控屏:15.6英寸、1920x1080
解锁HMI设计规范
 
 
 
蔚来ES6
仪表屏:10.2英寸、1920x532
中控屏:12.8英寸、1728x1888
解锁HMI设计规范
 
 
 
小鹏G9
仪表屏:10.25英寸、1920x720
中控屏:14.96英寸、2400x1200
副驾娱乐屏:14.96英寸、2400x1200
解锁HMI设计规范
 
 
 
理想L7
仪表屏:4.82英寸、800x166
中控屏:15.7英寸、2880x1620
副驾娱乐屏:15.7英寸、2880x1620
解锁HMI设计规范
 
 
 
通过对主要汽车厂商车型的屏幕分辨率进行收集与分析,发现当前市面上主流的屏幕分辨率比例主要为16:9和8:3,这两种比例合计覆盖了72.39%的车型。因此,建议将这两种比例作为屏幕适配的基准。
解锁HMI设计规范
 
 
 
5.2. 栅格系统
布局区域大于或等于1600dp时,建议使用12栅格系统。布局区域在720dp到1600dp之间时,建议使用8栅格。而当布局区域小于720dp时,则建议使用4栅格。
解锁HMI设计规范
 
 
 
5.3. 间距规范
间距可以赋予页面信息更有节奏的感觉,从而提升内容的可读性和阅读效率。通过采用不同的间距,可以有效区分页面的组织和内容。
在设计师层面:制定间距规范可以有效减少决策和思考的时间,提高工作效率。
在开发层面:开发者不一定能够准确辨识1dp的差异,但能够明显区分出8dp的差距。基础间距以8dp及其倍数为增量(例如8dp、16dp、24dp、32dp、48dp等),这样开发者无需每次都精确测量,同时也能减少误差,提高设计稿的还原度。
在用户层面:具有一致节奏和韵律的页面更加美观。依据亲密性原则合理调整间距,可以使用户更加轻松地感知和区分信息,从而提升用户体验。
 
谷歌Android Auto的布局间距采用8dp作为主要增量,而一些较小的组件则采用4dp作为增量。间距规范共设定了九种数值,分别为P0至P8。
解锁HMI设计规范
 
 
 
小tips:为了更好地对齐并留出足够的间距,较小的组件可以使用4dp和12dp的间距,但需谨慎使用。对于信息较少的页面(如缺省页、登录页等),使用96dp的间距可能无法很好地满足留白需求,此时可以考虑使用120dp、160dp或200dp等其他间距数值。细心的朋友可能会注意到,在以8dp为基准单位定义间距时,40dp和56dp这两个数值并未包括在内,尽管它们都是8的倍数。例如,16dp是8dp的2倍,间距变化较为明显。然而,将56dp与64dp进行比较时,64dp仅比56dp大1.4倍,两者间的差异相对较小。设计师在定义间距规范时需要遵循倍数规则,同时也应考虑页面的美观和用户体验,避免过于呆板地遵守规则。
定义间距没有绝对的标准,主要取决于最小单位,如4dp、5dp、6dp、8dp等,具体选择哪个取决于产品的定位和内容的形式。重要的是,所有间距需要基于最小单位并以倍数的形式规律排列,以保证元素间有良好的节奏感。
 
6. 排版
文字是界面设计中非常重要的信息元素,其字体选择、字阶、字重、颜色及行高都是影响视觉可读性和阅读效率的关键因素。对于字体的选择,建议在中文排版中使用思源黑体,而英文则使用Roboto。在中英文混排的情况下,应统一使用系统中文字体;在纯英文排版时,则统一使用系统的英文专用字体。
6.1. 字阶
字阶在界面设计中用于区分内容的主次关系,合理的字阶应用决定了内容的节奏和秩序。为了构建稳定且具有良好可读性的字阶设计,根据IDX & 同济(2020)百度Apollo中控视觉基础研究项目、谷歌Android Auto和华为车机UI设计规范的研究成果,我们可以发现字号通常以4的倍数递增,且最小字号不应小于20(标签类辅助文案应谨慎使用),正文字号最小为24。文本的主副层级应通过4至8的字号差距来区分。对于需要用户阅读和处理的重要信息,每个段落的文字数量不应超过20字,以确保用户可以在2秒内阅读完毕(700字/1分钟)
解锁HMI设计规范
 
 
解锁HMI设计规范
 
 
 
6.2. 字重
对于需要用户关注的文本信息,可以通过调整字重来突出内容。建议使用Regular或Medium字重,这样的字重使文本看起来更清晰和舒适。相比之下,更粗的字体不易辨认,可能会影响阅读速度,导致驾驶员分心,同时也可能引起视觉疲劳。
解锁HMI设计规范
 
 
 
6.3. 行高
行高是指上边框、下边框加上字号高度的总和,可以想象成一个包裹在字体外面的透明盒子。行高主要针对多行文本;对于单行文本,使用默认的Auto行高即可。在设计页面时,由于文字会有不同的字号构成,便于阅读的考虑通常会设定适当的行高。不同的行高对文字的易读性影响较大。
文本的行高一般设置为字号的120%-150%,然而由于字阶规范中包含多个字号,不易确定具体每个字号应使用120%还是150%的行高。行高的具体比例与字号密切相关:字号越小,建议的行高比例越大;反之,字号越大,折行的概率通常越小。
根据Ant Design的经验,行高可以设置为字号加8。虽然这种动态变化的字号与固定加8的方法看起来可能显得死板,实际上它非常有效。例如,20px的字号加8等于28px行高,这是字号的1.4倍;56px字号加8则为64px行高,约是字号的1.14倍,符合‘字号越小,行高越大’的原则。这样的规范使得设计师和开发者可以更方便地调整行高。
解锁HMI设计规范
 
 
6.4. 字色
为保证普通文本在黑白背景下的清晰可读,根据WCAG的AA级与AAA级标准,文本与背景的对比度应设定在4.5:1至7:1之间。
在深色背景上,建议通过调整纯白色文本的透明度来创建一致且强烈的视觉层次结构,而不是使用纯灰色。根据IDX & 同济 (2020) 百度Apollo中控视觉基础研究项目、谷歌Android Auto和华为车机UI设计规范,建议设置一级文本的透明度为100%-90%,二级文本的透明度为70%-60%,三级文本的透明度为40%-30%。
 

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

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

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



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

设计师必备思维模型

前端达人

设计师应该具备的思维模型
数据思维
设计思维
用户思维
产品思维
如何提升思维
设计师在职业发展中应具备多种思维模型,包括数据思维、设计思维、用户思维,商业思维和产品思维。这些思维模型有助于提升设计师的专业能力和解决复杂问题的能力。
设计师必备思维模型
 
 
 
数据思维:在当前竞争激烈的市场环境下,数据思维对于设计师尤为重要。它可以帮助设计师在众多同行中脱颖而出。数据思维不仅是为了获取数据,更重要的是利用数据来验证商业价值,指导设计策略,从而赋能商业价值。
 
设计思维:设计思维模型对于设计师至关重要,它包括了解基础设计规范、常用设计原则、设计的实用性以及对落地负责的态度。设计思维还包括对主流设计趋势和手法的把握。
 
用户思维:用户思维要求设计师从用户的环境和场景出发,进行深入的用户洞察。用户洞察可以通过三部曲来进行:理解用户需求、分析用户行为、预测用户趋势。
 
商业思维:商业思维模型对设计师而言同样不可或缺。它要求设计师不仅熟知商业基础知识,还要掌握常用的商业策略与原则。设计师需深入理解商业目标的实用性,并对商业成果的落地负责。
 
产品思维:产品思维涉及到对商业设计的理解,包括如何做出符合市场需求的商业设计。设计师需要了解什么是好的商业设计,并掌握商业设计的步骤。
 
设计师需要掌握的思维模型-数据思维
为了提升数据思维能力,设计师可以采用推理设计模型和溯因模型(5W模型)。这些模型有助于提高设计思维的缜密度和深度。
 
北极星指标是公司在当前阶段最重要的唯一指标,它有助于公司聚焦于最重要的问题,提升团队凝聚力,并鼓励实验文化。北极星指标的设定需要考虑公司的长期价值和不同发展阶段的重点。
设计师必备思维模型
 
 
设计师常用的数据指标模型包括HEART指标、GSM指标、海盗指标(AARRR模型)和NPS指标。这些指标模型有各自的优缺点,但北极星指标因其重要性而被特别推荐。设计师在实际工作中,可以将北极星指标根据不同场景进行分解,以设定具体工作目标。
 
数据分析方法多样,包括使用第三方工具、数据埋点、问卷调研、内部行为分析工具和百度指数等。数据埋点需要明确要追踪的事件,并与数据分析师或前端工程师合作。问卷调研可以帮助收集用户的详细信息,而百度指数可以提供竞品的用户画像。
产品设计驱动的增长可以通过四步闭环方法实现:确定指标、提出假设、进行分解和实验。这有助于设计师系统地优化产品,实现数据的持续提升。
设计师必备思维模型
 
 
通过上述方法,设计师可以更好地理解用户、市场和业务,从而提升设计质量,实现个人和产品的共同成长。
 
提高设计思维的缜密度和深度,设计师可以采用推理设计模型和溯因模型(5W模型)。
推理设计模型:
- 目的:推理设计模型的核心是满足人的需求,通过推理过程产生多种解决方案。
- 组成部分:
- 形态:产品的基本外观或互联网产品的品牌调性。
- 属性:决定产品形态的特定属性或种类。
- 功能:产品表达的目的与用途,受人的意向、喜好、目标等因素影响。
- 需求:产品满足的用户需求。
- 价值:产品创造的价值。
- 联系:产品使用受特定环境影响,属性客观而功能主观,需求和价值基于功能满足。
- 注意点:设计需要直觉和创造力,同时考虑设计场景。
设计师必备思维模型
 
 
溯因模型(5W模型):
- 定义:溯因推理是一种根据现象特征推测其原因的信息加工方式。
- 例子:通过连续提问“为什么”来找到问题的根本原因,如丰田汽车公司的5WHY法。
- 作用:从结果出发,通过层层提问找到并解决根本问题。
设计师必备思维模型
 
 
 
设计师需要掌握的思维模型-设计思维
 
设计领域中,经验丰富的设计师会逐渐意识到,优秀的设计既需要艺术的直觉和创造性,也需要科学的严谨和系统性。这种理念可以被重新表述为:
 
随着设计实践的深入,设计师们会发现,设计工作不仅仅依赖于创意和审美(即“艺术”的一面),同样需要依赖于理性的分析和科学的方法(即“科学”的一面)。艺术性让设计作品具有吸引力和表现力,而科学性则确保设计解决方案的实用性、逻辑性和可行性。设计师在追求视觉美感的同时,也必须关注设计如何满足用户需求和商业目标,实现三者之间的和谐平衡。
 
因此,设计师不仅要专注于设计的艺术性,即那些涉及创意、美学和情感表达的方面,同样要关注设计的科学性,这包括采用系统化的问题解决方法、基于用户研究和数据分析的决策过程,以及对设计在整个产品开发和市场策略中角色的深入理解。简而言之,设计师的工作是将艺术的灵感与科学的分析相结合,创造出既美观又实用的设计作品。
 
设计思维,作为设计师专业成长的基石,融合了审美、创造力、用户需求理解、设计实现以及对新趋势的敏锐洞察。这一思维模式不仅要求设计师掌握基础的设计技能,更要求他们具备全局性的视野和解决问题的能力。
一、理解设计规范是设计思维的首要任务。设计师需要深入了解不同平台的设计规范和原则,如苹果的界面设计准则、谷歌的Material Design理念等。这些规范为设计师提供了清晰的设计方向,确保设计作品的一致性和专业性。通过遵循这些规范,设计师能够减少设计中的不确定性和误解,提高设计的效率和质量。
设计师必备思维模型
 
 
二、应用设计原则是设计思维的关键环节。设计原则如格式塔原理等,为设计师提供了有效的视觉排版方法。设计师需要运用这些原则,通过合理的布局、色彩搭配和字体选择,使设计作品更加美观、易读和易于理解。同时,设计师还需要关注设计的实用性和用户体验,确保设计作品能够满足用户的需求和期望。
设计师必备思维模型
 
 
三、重视实用性是设计思维的核心要求。设计不应仅仅追求美观,更应服务于用户的实际需求。设计师需要深入了解用户的需求和痛点,通过设计来解决他们的问题。例如,设计师可以通过优化操作流程、提高界面交互的便捷性等方式,提升用户的使用体验。实用性是设计作品能否得到用户认可的关键,因此设计师需要时刻关注用户的需求反馈,不断优化设计作品。
设计师必备思维模型
 
 
四,对设计落地负责是设计思维的重要体现。设计师不仅要关注设计的创意和美感,更要关注设计从概念到实现的全过程。设计师需要与开发团队紧密合作,确保设计的可行性和可实现性。同时,设计师还需要关注设计的细节和规范,确保设计作品在实际应用中能够达到预期的效果。这种对设计落地的责任感有助于提升设计师的综合素质和团队协作能力。
设计师必备思维模型
 
 
五,把握设计趋势是设计思维的重要组成部分。随着科技的进步和审美观念的变化,设计手法和风格也在不断演变。设计师需要时刻关注新的设计趋势和风格,如手绘风格、分形艺术、柔光风格和纹理风格等。将这些新元素融入设计中,可以使作品更具时代感和创新性。同时,设计师还需要保持对新技术的敏感度和探索精神,不断尝试新的设计方法和工具,提升设计的效率和品质。
设计师必备思维模型
 
 
六、认识设计的全局性是设计思维的升华。设计不仅仅是界面或外观的呈现,更是产品体验的一部分。设计师需要理解产品设计背后的整体逻辑,包括框架层、结构层、战略层等。通过深入理解产品的整体架构和用户需求,设计师可以创造出更符合产品战略的设计作品,提升产品的整体竞争力。同时,设计师还需要关注行业动态和市场变化,了解行业趋势和用户需求的变化趋势,为未来的设计创新提供有力支持。
设计师必备思维模型
 
 
设计师需要掌握的思维模型-用户思维
用户思维是设计师在设计过程中必须具备的一种核心思维模式,它要求设计师从用户的角度出发,深入理解和满足用户的需求。用户思维不仅是一种理念,更是一种实践方法,它涉及到对用户环境的深入洞察、对用户行为的细致观察、以及对用户心理的同理心理解。
 
用户环境的理解是用户思维的起点。设计师的工作环境往往与用户实际使用环境存在差异,这种差异可能体现在设备的多样性、操作系统的不同、屏幕尺寸和分辨率的差异,以及用户所处的物理环境(如室内、室外、网络条件等)。设计师需要超越自己的工作环境,真正站在用户的立场上,考虑他们在使用产品时可能遇到的各种情况。
 
换位思考是用户思维的重要实践方式。设计师需要将自己置于用户的情境中,用普通用户的视角去审视产品,理解用户的情绪和需求。这种换位思考的能力可以通过多种方式培养,如使用用户使用的设备、参与用户的日常活动、倾听用户的声音等。
设计师必备思维模型
 
 
场景思维是用户思维的另一个关键组成部分。设计师
需要理解用户在不同场景下的行为和心理状态,如购买行为中的“认知、搜索、判断、下单、查看”等环节。通过深入分析用户在各个环节的需求和问题,设计师可以找到设计撬动点,优化用户体验。
 
时间维度的考虑也是场景思维中的重要方面。设计师需要关注用户在完成任务的整个过程中的行为变化,从用户接触产品的第一时间开始,一直到用户完成目标后的反馈和分享。这种全程的视角有助于设计师发现并解决用户在整个使用过程中可能遇到的问题。
设计师必备思维模型
 
 
在实际操作中,设计师可以通过以下方式提升用户思维:
 
1. 使用不同设备:设计师应同时使用苹果和安卓设备,体验不同系统的设计差异,发现设计中的问题。
2. 深入用户场景:通过实地调研、用户访谈等方式,深入了解用户在实际使用中的行为和需求。
3. 倾听用户声音:定期收集和分析用户的反馈,理解用户的真实想法和需求。
4. 全程跟踪用户行为:从用户接触产品的第一时间起,全程跟踪和分析用户的行为路径,发现设计中的断点和痛点。
设计师必备思维模型
 
 
用户思维是设计师在设计过程中必须具备的一种核心思维模式,它要求设计师从用户的角度出发,深入理解和满足用户的需求。用户思维不仅是一种理念,更是一种实践方法,它涉及到对用户环境的深入洞察、对用户行为的细致观察、以及对用户心理的同理心理解。
 
用户环境的理解是用户思维的起点。设计师的工作环境往往与用户实际使用环境存在差异,这种差异可能体现在设备的多样性、操作系统的不同、屏幕尺寸和分辨率的差异,以及用户所处的物理环境(如室内、室外、网络条件等)。设计师需要超越自己的工作环境,真正站在用户的立场上,考虑他们在使用产品时可能遇到的各种情况。
 
换位思考是用户思维的重要实践方式。设计师需要将自己置于用户的情境中,用普通用户的视角去审视产品,理解用户情绪和需求。例如,支付宝提倡管理层倾听用户声音,以真正解决用户问题。
 
场景思维是用户思维的另一个关键组成部分。设计师需理解用户从哪里来,要到哪里去,关注用户在每个环节的体验。场景思维带有时间维度,包括用户在购买前、购买中和购买后的行为和心理变化。
 
设计师必备思维模型
 
 
设计师需要掌握的思维模型-商业思维
商业思维是设计师在互联网公司工作时必须具备的另一种核心思维模式。设计师不仅是艺术家,更是商业目标的实现者。商业思维要求设计师在设计产品时,不仅要考虑用户需求,还要考虑如何通过设计实现商业价值的增长。
 
好的商业设计通常具备以下特点:
 
1. 获得设计大奖:如无印良品海报、德国红点设计大奖、Apple Watch等。
2. 符合好的设计原则:遵循Dieter Rams的“好设计的10个原则”。
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开发



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

雾里看花?这些是你能用上的产品思维

前端达人

你也许会困惑,明明绞尽脑汁想出方案但为什么总是不被认可,为什么每当自己来讲述设计方案时总是无从谈起。在走出新手村之后,你是否也会思考,这一切背后是否有什么规律可循。今天咱们略微换一个视角,盘一盘这背后的细节。
——
 
我们作为设计师这个角色,对于设计思维并不陌生。而在实际的工作中只根据设计者常有的思维显然是不太够的,将视角聚焦在更上游,你是否在心里追问为什么会有这个需求呢?为什么要做这一改动呢?
雾里看花?这些是你能用上的产品思维
 
 
在实际的工作场景中,设计思维和产品是为是相辅相成的。多方位的思考可以更好的理解需求把控设计方向,帮助你更好的发挥自己的作用,设计出更符合用户需求和商业目标的优秀产品。
雾里看花?这些是你能用上的产品思维
 
 
1.1 产品思维是什么
产品的目的是为用户解决问题满足用户的需求。而产品经理需要权衡用户场景和业务三者,发现问题分析问题解决问题,从而实现产品不断的迭代和优化。产品思维则是解决问题的思维方式。这里我根据之前的工作经验,我挑关键来总结了一下。
 
用户导向
理解产品的核心用户群体,这其中包含了解他们的需求偏好和行为习惯。为用户提供好用方便的功能,提升用户的产品满意度。
数据驱动
利用产品数据分析方法和工具,分析用户的实际实用情况,从中找到产品优化的机会点,迭代产品方案。
市场分析
了解产品处在的市场竞争环境和行业发展趋势,通过竞品的特点和优势从而发现产品的差异化和创新点,获得更好的市场竞争力。
用户增长
面对存量市场,掌握用户的增长的方法策略,通过产品设计和优化实现用户和业务的增长。
产品策略
 
了解产品策略的定制和执行过程,包括但不限于产品定位,目标设置,功能规划。制定产品的发展策略,对东产品的发展和优化。
 
产品思维并不是照本宣科的工具,而是解决问题的切入点。不同的产品经理对产品思维也有着不同的理解。如今高度竞争的环境下,只有为用户创造独特的价值才能在市场中脱颖而出。这也变相的提高了设计师的要求,能否快速准确的把握需求方向产出有效的设计方案显得尤为重要。
 
1.2 产品思维可以帮助设计师做什么
更全面的思考问题
很多时候受限于视角,设计师往往会执着于界面的视觉表现。耗费更多的精力试图吸引更多的用户注意力。而掌握一定的产品思维可以帮助设计师在设计环节更好的思考和参与。设计出更符合用户和业务预期的界面,发现用户真实的痛点从而有针对性的优化设计方案。
举个例子:设计师通过对复杂流程的简化,视觉降噪等方案,聚焦核心功能,改善用户的交互体验和视觉感受。
优化产品设计
通过对数据的研究,深入分析用户行为和市场环境,发现产品的改进方向。通过数据分析和竞品分析等手段,发现用户需求与市场趋势,为产品的功能设计和界面优化提供有力的支持。
举个例子:设计师根据用户反馈的结果调整页面的布局,优化产品的交互设计,提高产品的易用性和吸引力。
提升团队协作效率
具备产品思维,可以让设计师和产品经理无阻力沟通,通过与团队的有效沟通和协作,共同推动产品的开发和优化,提升团队的协作效率和产品的质量,达到事半功倍的效果。
举个例子:和产品共同研讨产品需求文档,和开发团队讨论实现方案。确保项目的快速推进。
提升职业竞争力
 
具备产品思维的设计师在职场更具有竞争力,可以在不同的工作场景中承担更多的责任和挑战,为团队带来更大的价值。拥有较好的产品思维可以帮助设计师保持对行业趋势和技术发展的敏感性,在职场竞争中也更具优势。
 
雾里看花?这些是你能用上的产品思维
 
 
现在让我们立即切换到工作视角,怎样在原有的工作流程中应用好产品思维尤为关键。我们作为设计者,了解产品思维是为了更好的发散思考和推敲设计方案。授人以鱼不如授人以渔,面对不同领域不同项目的纷繁需求,不妨多问几个问题,在不断的提问中找到答案。
2.1 明确设计目标
设计师需要明确项目背景推导出正确的设计目标。这要求设计师时刻需要将项目的目标和成果放在首位,之后的设计决策和行动都需要和这些目标保持一致。另外注重跨团队协作,合理分类时间和设计资源,将会让你更加游刃有余。切忌钻牛角尖的闭门造车,务必确保项目按时交付。
 
自问自答:
 
  •  
    项目组都有谁,自己负责的哪些板块,我的目的是什么?
  •  
    项目进展到了哪里,什么时候需要交付,什么时候需要上线?
  •  
    设计方案确定提交后怎样快速和开发团队对接实现落地,期间是否有什么问题?
 
2.2用户研究
设计师进行用户研究是为了更好的了解用户的需求和行为,确保产品能够满足用户的真实需求。用户研究的方式很多,设计师可以根据团队需要和项目时间排期进行合理的安排。
 
成功的用户研究可以帮助设计师验证设计假设的有效性,降低产品的开发风险,减少不必要的时间和成本损耗。
雾里看花?这些是你能用上的产品思维
 
 
自问自答:
 
  •  
    你的用户是谁,使用场景是什么,需要为他们解决什么问题?
  •  
    你的用户是如何使用这些功能的,这期间是否还有优化的空间?
 
2.3 竞品分析
竞品分析是一种通过研究和对比竞争对手的产品和服务细节,从中发现优势和劣势,进而指导自身产品设计和优化的方法。对于设计师来说,可以帮助我们更快的了解市场和行业的整体情况,为产品的设计提供给更多的参考依据,另一方面可以快速发现自身产品的问题 找到优化的方向。
 
需要注意的是,竞品分析需要带着目的进行,切勿走马观花泛泛而谈。
自问自答
 
  •  
    竞品分析的主题是什么,目标是解决当下的什么问题?
  •  
    你的竞品是谁,他是怎么做的,反馈怎样?
  •  
    我们可以借鉴什么,改善什么?
 
2.4埋点与数据回收
虽然设计师并不会直接参与埋点的设计,但为了更好的捕捉用户的行为数据,在设计中可以根据情况和优先级将埋点纳入设计考虑。
 
设计师和数据分析的沟通可以避免后期添加埋点时,出现和设计的不匹配的尴尬状况。数据是验证设计合理性的重要指标,很多时候设计师需要一个具体的成果反馈来复盘和指导之后的设计工作,多多留意最终呈现页面效果和用户反馈,并不是完成上线就可以将这些抛掷脑后了。
雾里看花?这些是你能用上的产品思维
 
 
终极问题:
 
  •  
    如何证明这是个改版方案是合理的
 
雾里看花?这些是你能用上的产品思维
 
 
3.1设计师的痛点
在实际的工作中,往往会由于不同的产品特点和团队的配置,设计师不得不身兼多职面对更为复杂的情况。在开发流程中设计师始终处在“夹缝之中”的位置,而站在公司的视角设计师这一环节既不能直接产生收益也不能为整体降低成本。在进入职业生涯不久我开始思考为什么设计师处在这样一个被动的处境呢,跑遍了前端后端数据和产品小组,“厚着脸皮”旁听了各种冗杂的会议,以及多少次和前辈的交流中,我才慢慢发现了背后的“难言之隐”
 
  •  
    依赖需求方案
设计师通常是根据产品需求方案确定以后再参与工作的,设计师的工作很大程度上取决于产品需求的制定,因此单从设计视角来看有一定的滞后性。设计师接到产品需求后没有办法理解背后需要解决的核心问题,也很少思考和判断需求的合理性,很容易和产品的最初想法产生偏差。
  •  
    反馈的延迟
设计师的工作成果也需要后期数据回收和复盘,而在实际的工作中,往往是一个需求结束后就需要急匆匆的应对下一个需求。如果不去留意,很多时候作为设计师并不清楚最终交给开发的设计稿到底取得了什么样的数据表现,到底哪一个方案才能更好的实现目标。这也使得设计师很难进行经验总结。
  •  
    有限的时间和资源成本
当前市场竞争相对激烈,各方产品都需要在有限的时间中尽可能的抢占市场,而设计师需要在较短的时间中给出合理的设计方案,同时和产品以及开发团队不断进行细节的调整,这也使得设计师面对的压力和挑战更大。
 
 
较低的话语权、只多不少的需求使得本就焦虑内卷的设计师处境更加雪上加霜。但是反过来想想,既然改变不了外在的环境,是否有办法可以让设计师们由内而外的主动争取些什么呢,我能想到的答案既是化被动为主动,尽可能的参与项目的推进,同时和上下游保持沟通,从而提升设计师在团队中的存在感和参与感。而产品思维,是一块刚刚好的垫脚石。
 
2.2产品思维的训练
讲到如何提升产品思维,我总会想起一位前辈曾经说过一切技巧惟手熟尔。你也许会说每天都在一成不变的做着公司的内容实在提不起兴趣,不过没有关系。产品思维的提升并不需要过多一板一眼的训练。就像你走入繁华地段的商场,明明入驻着大差不差的品牌为什么客流量却有着明显的不同?是清晰明了的导视路牌?是更为合理的动线规划?是明亮舒适的灯光统一的装置风格?用户体验是多元的,因此很多时候善于发现身边各种各样的体验细节,便可以拥有较好的产品感知。关于具体的方法,我有两个方向可供大家参考。
 
  •  
    保持好奇心
打开手机想想看哪些应用是高频使用的,同样的音乐类应用你更习惯用哪个呢,在联想一下身边的朋友同事在听音乐这件事情上更喜欢哪个应用呢。横向对比一下便可发现,虽然是同类型的产品但在体验细节上其实有很多门道可以考究。或者你是否留意过最新出现的产品和刚刚更新的功能?为什么要有这样那样的改版?用户的反馈是怎样的?
刨根问底多问一步为什么,而不是将自己禁锢在工作范围中的一亩三分地,在不经意之间,其实你已经迈出了第一步。
  •  
    知识整理与沉淀
如果你还有多余一些的精力,不妨进行更深入的学习。不过好消息是,你想要学习的很多技术都可以在网络上轻松找到。定期翻看设计平台分享,相关短视频频道,公众号文章,可以让你探索更深入更广阔的知识。不过先别急着开始,走马观花的阅读往往并不会留下什么印记,试着整理这些碎片知识并总结收获和心得。不要急于阅读量收藏量而是争取收获更多自己的理解才尤为关键。
 
PS:关于这部分我之后也会有更多内容的分享,多多关注喽,谢谢各位啦。
 
3.3 啰啰嗦嗦写在最后
在工作的第二年,我开始感到枯燥和厌烦。很多次面对频繁紧急加塞的产品需求和一头雾水的业务指标,我时常情绪激动的和当时的组长抱怨吐苦水,但由于人员紧张,并没有什么实质的改变。后来的一段日子我试着躲避,觉得做好分内的任务就得了,每天出几版方案到时候由着他们定夺吧。就这样又过了一段时间,从前得枯燥和厌烦变本加厉,而我好像游离在各个环节之中,渐渐我的状态变得很差,每天的工作毫无成就感可言,我开始认真的思考,究竟为什么会这样。
事情的转机出现在不久之后组里来了新的伙伴,一方面分担了很多任务压力,另一方面由于是刚刚毕业的职场新人,很多工作细节都需要帮他快速上手。也在这期间我发现了自己的浮躁和心急,我试着系统的总结过往的经验和思考,在这个过程中我开始和产品以及前端的伙伴更多的交流和请教。在找不到思路的时候试着切换到其他视角看待问题,去刨根问底无数个为什么,竟发现不知不觉中一切似乎都往积极的方向改变了。
或许我的想法与你也会有所偏颇,不过没有关系,每当观点不一致的时候也意味着我又发现了一个新的视角。不同的链接使得我们不断的发现和探索,正如那句话说没有人是一座孤岛。
在这里我非常期待与更多的优秀前辈交流,也很十分荣幸为后辈提供一些思路和帮助。
 
 


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

优秀的UI/UX设计师需要具备哪些技能?

资深UI设计者

设计既是一门学问,也是一门艺术。若想在设计这条道路上越走越远,自然不能把自己定位为“画图的”和“搞艺术的”。需要不断总结设计经验,知晓市场需求与用户心理,保持学习和进步,锻炼自己的设计思维,方能成才。另外,对我来讲,最大的技能就是从失败中学习,从失败中成长!

日历

链接

个人资料

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

存档