首页

设计原则:希克定律

博博

它是怎么产生的?
希克定律是基于心理学和人类认知过程的研究而产生的。威廉·希克和他的同事在1930年代进行了一系列的实验,旨在了解人们在不同选择数量下做出决策的反应时间。
实验中,被试者面对不同数量的选择,例如按钮或选项,然后被要求尽快做出选择。实验结果显示,随着选项数量的增加,被试者做出选择所需的时间也相应增加。这一观察成为希克定律的基础。
希克定律的本质是认知心理学的一部分,它涉及到人类对信息的处理方式。当人们面对多个选项时,他们需要对每个选项进行评估和决策,这会增加认知负荷。结果是,随着选项数量的增加,处理和选择所需的时间也相应增加。
这个定律提出了一种对设计界面和交互方式有深远影响的见解:简化界面,减少选择数量,可以帮助用户更快速、更轻松地做出决策。这种认知负荷的理论成果对于优化用户体验和提高界面效率有着重要的指导作用。
超长干货!UI设计师必须要懂的4个设计心理学
思考下希克定律UI作用?
希克定律在UI设计中具有重要作用,它强调了简化选择以提高用户体验的重要性。以下是希克定律在UI设计中的一些具体作用和应用:
简化菜单和导航
 减少导航菜单中的选项数量,将类似功能的项目归类或合并,可以减轻用户的选择负担,帮助他们更快速地找到所需信息。
优化工作流程
 在应用程序或网站设计中,简化工作流程和操作步骤可以减少用户需要做出的决策,提高用户完成任务的效率。
默认设置和建议
 使用默认设置或提供建议可以减少用户必须做出的选择。通过合理设置默认选项,可以简化用户体验,让用户更快地进入应用或网站并开始使用。
信息层级结构
 设计清晰的信息架构和层级结构有助于将内容组织得更有条理,使用户能够更容易地定位所需信息,避免过多的选择。
上下文反馈和指导
 提供清晰的上下文反馈和指导,帮助用户更快速地了解当前操作的影响,减少不必要的犹豫和选择焦虑。
用户个性化和智能推荐
 利用个性化推荐或智能算法,根据用户的历史偏好为其提供定制化的选择,减少不必要的选择。
在UI设计中,理解希克定律可以引导设计师创造出更简洁、更直观、更易用的界面,从而提高用户满意度和效率。通过减少选择数量和简化操作,设计可以更好地配合人类认知特性,使用户在界面上的交互变得更加流畅和自然。
超长干货!UI设计师必须要懂的4个设计心理学
需要我们记住什么?
在UI设计中,了解和应用希克定律有助于创造更优秀的用户体验。以下是需要记住的一些关键点:
选择数量与决策时间成正比:
用户需要花费更多时间来做出决策,当他们面对更多选择时。减少选择数量可以提高用户的决策效率。
简化界面以降低认知负荷:
 设计简洁、清晰的界面可以减少用户的认知负荷,帮助他们更轻松地使用应用或网站。
层级结构和组织:
 通过良好的信息层级结构和内容组织,可以使用户更快速地找到所需信息,减少选择过程。
默认设置的重要性:
合理设置默认选项可以简化用户体验,降低他们需要做出的选择,从而更快地开始使用应用或网站。
上下文反馈和引导
提供清晰的上下文反馈和指导,帮助用户更快速地了解其操作的影响,减少选择焦虑。
用户个性化和智能推荐
利用用户个性化数据和智能算法,为用户提供定制化的选择,降低不必要的选择过程。
记住这些关键点能够帮助设计师更好地优化界面,提供更出色的用户体验,减少用户做出选择所需的时间,从而增强产品或应用的吸引力和实用性。
 
在app产品中,我们应该怎么应用希克定律
在移动应用程序(App)设计中,应用希克定律可以通过以下方式提高用户体验:
简化导航和菜单
 减少主导航菜单中的选项数量,将类似的功能合并或分类,以简化用户的选择过程。使用清晰的图标和标签帮助用户更快速地理解选项。
优化注册和登录流程
在注册和登录过程中尽可能减少必填项,使用社交媒体登录或单一注册选项简化流程,降低用户的选择负担。
默认设置和个性化推荐: 利用用户的偏好和历史数据,为用户提供个性化的推荐或默认设置,减少用户需要做出的选择,并快速展示最相关的内容或功能。
简化表单和输入
最小化表单字段,根据上下文预填充表单内容或使用智能输入建议,以降低用户输入的认知负担。
上下文引导和反馈
在用户进行关键操作时提供清晰的引导和反馈,让用户了解他们的操作将会带来的结果,减少不必要的犹豫和选择焦虑。
智能搜索和过滤功能
提供强大的搜索和过滤功能,帮助用户快速找到所需内容,减少在大量选项中的选择时间。
简化购买流程
 在电商应用中,优化购买流程,减少购物车和结账过程中的步骤和选择,提供清晰的购买路径。
通过以上方式,设计师可以在App中运用希克定律,帮助用户更轻松、更高效地使用应用,提高用户满意度并增强应用的吸引力。这些方法都围绕着减少选择数量、简化操作和提供个性化的体验,以减少用户的认知负荷,提高用户的决策效率。
 
希克定律总结
希克定律在移动应用设计中的应用关键在于简化选择、优化流程以提升用户体验。通过减少主导航选项、优化注册与登录流程、提供个性化推荐、简化表单输入、提供清晰反馈和引导、强化搜索功能以及简化购买流程,设计师可以降低用户的选择焦虑和认知负荷,使用户更轻松、更高效地使用应用,提升用户满意度。这些策略围绕着简化操作、减少选项数量和提供个性化体验,有助于提高用户的决策效率,增强应用的吸引力与可用性。


作者:A大林子
来源:站酷

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

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

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

软件qt开发软件wpf开发软件vue开发

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

博博

作为一名合格的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开发

 

设计灵感来源于“善于发现”

博博

一、表情化反馈设计
 
通过用户反馈可以让产品的服务和体验做得更好,因此获取反馈的设计变得至关重要。
 
在饿了么 App 点餐,完成订单配送之后,会以弹窗的形式采集用户反馈。通过表情化的设计让用户完成选项,情感化的表达可以提高用户的参与度,进而达到获取反馈意见的目的。
设计灵感来源于“善于发现”
 
 
二、灵动可爱的动效表达
 
动效的表达相较于静态而言更有吸引力,可以让画面更有视觉张力。
 
饿了么在 0 元夺宝活动设计中,以 3D 动效的形式展示灵动可爱的小鱼吐泡泡的画面,瞬间让场景变得更有趣味性。吸引用户关注度的同时,也让活动氛围感十足。
设计灵感来源于“善于发现”
 
三、突出品牌主题的轮播设计
 
轮播图的设计样式丰富多样,设计师都在不断探索更新颖的表现形式和互动玩法。
 
最近在体验芒果TV 时,在好物栏目中的轮播图布局设计中,结合了品牌主题进行轮播切换。不仅强化了品牌主题,新颖的样式表达也使得栏目更有设计感。
设计灵感来源于“善于发现”
 
四、收缩式导航栏设计
 
通过交互形式可以让静态布局有更多灵活性,方便用户在不同操作场景中享受更好的体验。
 
作业帮 App 首页默认状态突出搜索功能,当用户滑动浏览内容时,顶部导航栏和搜索功能会收缩展示。简化部分功能和适配导航栏布局,提高当前界面的利用率,带给用户更好的浏览体验。
设计灵感来源于“善于发现”
 
五、通过动效强化按钮关注度
 
微动效越来越普及,不仅可以让产品变得更有趣味性,也能通过动静对比突出功能关注度。
 
进入作业帮 App 个人中心时,会员开通按钮会通过一圈光效动效进行强化,吸引用户关注到开通按钮。左上角的每日签到图标也会以 3D 动效的形式循环播放,以此吸引用户进行签到操作。通过动效强化功能的吸引力,提高用户的操作概率。
设计灵感来源于“善于发现”
 
六、可视化设计强化任务流程
 
生硬的文字表达无法打动用户的参与度,图形化、趣味性的可视化表达更能打动用户。
 
One More App 通过对选项内容进行图形化表达,让用户更直观地判断,可视化的设计也让任务流程的选择变得更轻松。不仅让选项内容更直观,也能提高用户的参与度,达到采集数据的目的。
设计灵感来源于“善于发现”
 
七、动态封面更吸引人
 
封面设计是吸引用户点击栏目的关键,通过丰富多样的设计表达逐步拉开差异,而动态封面变得尤为重视。
 
天天跳绳 App 首页中,趣运动栏目的活动主题封面进行了动静结合。相较于静态封面而言,动态封面不仅更吸引人,也显得很有趣味性。
设计灵感来源于“善于发现”
 
八、赋予功能营销属性
 
挖掘营销点是提高产品变现力的关键,如何在用户体验和营销曝光度中做平衡,需要我们不断思考和探索。
 
微博 App 内的营销布局点很多,在发现栏目中进行下拉刷新时,有时也会结合活动或者品牌广告。在不改变功能属性的基础上,融入营销属性,是一个不错的尝试。
设计灵感来源于“善于发现”
 
九、趣味性的设置按钮
 
通过设置按钮/开关等进行选项或者功能切换,一枚小小的按钮也可以进行更好的设计发挥,往往细微之处才能体现出产品的体验。
 
进入腾讯动漫 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开发

探索web端和移动端的差异和解决方案

博博

市面上主流的界面设计主要包括移动端、web端、桌面端、硬件、插件等,app和网站设计是大部分设计师最常见的设计需求,这两个也是最核心的设计端平台,所以明白web端和移动端设计的相似和差异并且知道如何应对是至关重要的。
整体来说,移动端的设计是更可控的,web端的设计难度实际更高,上限也更高。但是想要做好web端的设计并不难,只要明白web端设计时需要考虑的因素和解决办法,那么所有问题自然迎刃而解。
 
一、文本
 
1. 大小
总体上,移动端和web端的字体规范是一致的,同一套字体大小都可以在双端有好的识别和视觉效果。唯一细微的区别是浏览器支持的最小字体大小是12,所以在web端要摒弃12以下的字号。实际上这并不会增加你的web端设计难度,因为web端的设计空间是足够的。
 
2.长度
设计中往往需要考虑文案长度的问题,移动端受到屏幕空间的限制往往更容易遇到问题,你需要考虑当前文本段是否能在你所预留的空间放得下,对此可以参考以下几种解决办法:
  • 高度自适应:也就是换行显示,大部分的文本段不可能无限换行,也应该有字数限制,所以选择这一个解决办法,正常也需要设定一个高度极限值。
  • 超出省略:当文本段的完整性不是那么重要,且需要漏出,那么这是一个不错的方法
  • 字号自适应缩小:这正常用在金融类产品的数字显示中,比如余额等,当小数点过多或者金额过大导致的数字文本端过长时,数字是无法换行或省略的,所以你可以选择字号自适应缩小。
二、屏幕大小
移动端和web端最直观的差异就是屏幕大小的差异,移动端小,且各设备的差异化细微,web端的空间大,且不同设备的屏幕差异大,所以就有了几点主要差异:
 
1. 布局
移动端整体上是自上而下的设计布局,宽度受限比较严重,所以除了一些左滑手势带来的横向空间拓展,布局的变化上不大。
web端因为空间大,所以就有了更多的布局可能性,例如左右布局,居中布局,左中右布局,或是全屏自适应布局。这些布局方式也各有各的优缺点。
所以设计一个网站时,往往需要多个布局配合使用,能让你的网站视觉感受更舒适,利用率上更合理。切忌为了美观或者方便等原因死磕一个布局方式。当然,居中布局是最万能的一个布局,如果你暂时没办法掌控多个布局,那么居中布局是你最佳的选择。
 
2. 适配
前文说了,因为web端的设备差异大,所以你需要在设计时考虑小屏笔记本和大屏显示器的适配问题,甚至是用户手动拉动浏览器宽度时所得到的适配反馈也需要考虑其中。
适配不是必须的,因为适配的成本较高,复杂的页面往往需要设计出多个断点页面去让开发根据页面宽度重新适配内容。所以大部分的居中布局的网站,是不做适配的,因为你只需要控制你的内容宽度能在13寸笔记本完整展示,其他的就是极小部分用户的需求了。
web端到移动端的适配往往需要重构,也就是把当前网站的内容,重新在手机宽度下做设计,结合上文文本部分的内容,请不要想当然的把字号缩小。只需要考虑排版和功能是否需要删减的问题。 
 
3. 弹窗
移动端受到屏幕限制,弹窗的更多是banner的弹出,提示的作用,或者是个别简单筛选操作,在移动端很难在弹窗上放置很多的输入等复杂操作
在web端的设计中,一定要巧用弹窗,简单的编辑或着创建等操作都可以用弹窗代替,不仅可以使操作更聚焦,也可以减少页面跳转来缩短路径。
 
三、交互手势
由于操作媒介的不同,导致移动端和web的操作手势有很大的区别,移动端是用手指操作,web端是鼠标操作,手指操作决定了手势的多样性,鼠标的操作决定了点击的精确,并且由于鼠标的操作反馈是分阶段的,需要在每个阶段都给予用户相应的反馈来打造更好的用户体验。
 
1. 状态
移动端中对于操作的反馈主要聚焦于手指点击后的反馈,悬停态往往被长按代替。而web端鼠标操作存在三个状态,一个是正常状态,一个是悬停状态,一个是按下状态,这三个状态需要在设计师考虑并设计来向开发说明。web端中不同元素的常见状态(主要为悬停态)区分方式需要明白:
  • button:用颜色区分,常见的方式是改变颜色的明度,悬停增加明度,按下降低明度
  • icon:icon的状态区分更多是在悬停状态上,常见方式有:改变颜色;改变icon形态(如线性变面性);为icon添加背景色块(如圆形灰色背景)。
  • 文字:文字的状态区分除了颜色之外,可以利用文字自带的属性,如字重,字体大小,甚至可以在个别海外产品中看到通过改变字间距来表示悬停状态。
  • 卡片:卡片的悬停设计更加的多样,如改变填充色;改变描边颜色;增加投影,比较有趣的有改变卡片大小;轻微改变卡片透视;改变卡片的位置,如悬停时卡片向上轻微移动。
 
由于web端独有的悬停手势,你可以在悬停这个手势大作文章,如果你了解linear风格的话,或者经常浏览国外产品的话,许多网站会在鼠标悬停卡片时产生动效,动效不限于卡片元素(插画、图标、可视化表格等)的动画;光影描边的循环。悬停按钮时,箭头的位置变动,或者其他动画效果。更酷炫的还有鼠标与卡片透视的交互,甚至与鼠标与全局页面的交互,如水波纹等。
 
2. 操作按钮
整体来说,web端基于屏幕大小的优势和状态的多样,在操作按钮漏出数量和方式上会更加的多样。
移动端独有的是长按手势和左滑右滑手势,所以移动端会把一些操作放到左滑手势中,最常见的如消息列表的置顶、删除等。长按手势更多的是弹出更多操作,或是产生可拖动效果。
web端拿列表举例,基于屏幕的大小的优势,可以将更多操作直接在列表右侧直接漏出,用户的操作路径更短,触达率自然就更高。拿卡片举例,button的存在有的时候会影响到卡片的大小和美观,所以有些操作往往可以藏到悬停状态里,悬停操作不需要学习,所以用户不会为此感到疑惑,也可以保证功能的完整性。
 
四、设计思路
关于各个模块如何设计并不在这里展开,我想表达是在设计稿设计时的一些操作思路,或者说是组件的搭建思路。
 
1. 盒子思维
如果你对前端开发有一定的了解,那么你一定懂得盒子套盒子。设计也是如此,需要给你的每个设计模块建议一块独有的盒子。这是区别于间距或分割线的区分模块的思路的。
举个例子,你有图片,主标题,副标题三个元素形成一个小模块,那么你在确定好排版之后,你需要一个盒子将他们装起来,那么这个模块必须有它自己的宽度,高度。换个角度理解也就是它需要有一定的上下左右间距,在figma中,这个盒子就是你的frame,高级一点就是你的自动布局。这个盒子的大小就决定了这个模块的操作热区,这也方便你在设计做出你的悬停效果。
这个设计思维适用于web端和移动端,且十分重要,所以尽量避免在设计图出现各个元素分别散落的情况,这不仅不利于你的设计稿管理,也不利于开发的查看。
 
2. 新手如何参考
在进行web端设计时,如果你对web端设计一无所知,也无需惊慌。你可以找到合适的参考网站,并且分析它每个模块的高度,间距等,去模仿他,并且从中得出规律。
拿web端的导航栏举例,假设你纠结于web端的导航栏高度设置多少,你可以找到参考的网站,使用检查功能(F12)去查看高度,或粗暴的截图查看高度即可。当然,在此之前,你需要确定这个模块的高度是不会随屏幕大小改变而改变的。
 
3. 自适应布局
无论是web端设计还是移动端设计,当你在设计模块或搭建组件时,善用自动布局,这不仅有利于你设计图高效率修改,也能应对你的web端可能出现的适配情况。这需要考验你的figma能力,如果大家有兴趣,后续我可以出一些figma基础、组件、自动布局等相关教程同大家探讨。

作者:PONEPENG
来源:站酷

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

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

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

软件qt开发软件wpf开发软件vue开发

logo设计全流程及案例分析

博博

作者:阳阳设计师
来源:知乎

一、前期调研

作为设计团队,我们知道一个品牌的诞生与发展,每个公司都投入了巨大的资源和心血。logo设计就像父母给孩子起名,被企业寄予了太多的期待与美好的祝愿,它不仅仅是一个图形一串文字,更代表了企业的形象和深厚的文化。因此我们在提供设计方案时,也同样肩负着品牌价值和品牌责任传输的职责,在接到设计任务之后,并不会漫无目的的就开始投入到logo设计之中。而是要对服务的公司进行充分系统的调研。

研有助于我们对企业的文化、核心、价值观、产品等方面进行全面的了解。根据企业客户的消费行为、喜好,竞争品牌进行分析总结,有针对性的制定创意和设计方案,避免与其他品牌“撞脸”。

给大家介绍几个我经常会遇到的研究方法:

1. 用户采访

通过对客户的了解,团队预先准备一些问题,把那些重要的信息进行记录汇总,这样可以得到第一手的客户需求。客户是很愿意跟设计师进行品牌分享的,但是聊天式的采访往往达不到设计预期,因此我们一定要引导客户进行阐述,一点点把品牌最重要的信息和关键词梳理出来,这个过程对把握设计概念十分重要。

客户案例

2. 领域调研

很多客户表示不了解,为啥设计师可以设计各个行业的logo,甚至很多客户只找做过他们这个行业设计的设计师,其实大可不必这样,因为一个成熟的设计团队,做设计前都会对这个企业进行系统的领域研究,况且任何一个团队也不可能做过所有行业的设计。所以我们常常通过调研系统的了解企业及其上下游的品牌特征,并对此进行拓展梳理,而设计语言与方法是相通的,越成熟的设计师越能进行精准的设计。

(如该领域的视觉偏好是什么,对企业环境及产品进行实地考察,其他竞品的品牌符号有什么共性和区别,企业符号可以从哪些视觉方面进行表达等等)

3. 关键词头脑风暴

以最近给客户做的一个项目“食品加工器械”的logo设计为例,针对这个关键词我们可以想到什么?“机械、科技、食品、高端”等等,根据这些词汇,我们再次联想,拓展出二级、三级的词语,最终找出整个思维导图中最具创新性并符合客户定位的关键词。

客户案例

4. 其他方式

其实可用的方法还有很多,如:实地调研法、抽样调研法、统计调查法、文献调研法等,在这里就不一一列举了。

俗话说:“知己知彼,百战不殆”,我们在了解客户的基本诉求,深度挖掘企业核心价值与内涵之后,才能对企业进行明确的定位。基于此,产出最能代表企业的超级符号。

5. 案例分享

民宿品牌爱彼迎在升级品牌形象时便做了大量的设计调研,为了更好的理解与传达爱彼迎的经营理念,设计工作室Design Studio横跨4个大洲,往返13个城市,试住了18间房子,并与不同国家的爱彼迎员工进行交流。甚至深入爱彼迎公司内部,与工程师、设计师一同工作,共同交流,只为呈现出更完美的爱彼迎品牌视觉。通过长达数月的工作,最终完成了这一设计。

进行了大量调研,我们才有足够的话语权进行创作。我们根据调研的结果,找出最能体现品牌价值的创新点,再开始进入设计过程。

二、绘制草图

调研完成后,为得到最适合的设计方案,我们常常会使用头脑风暴的方式获得设计初稿。在一个集中时间段内,将之前的提取的关键词进行草图创意绘制,使用图形打散、重组的手法,将抽象思维用图形语言表达出来。要求既符合品牌行业属性,又具有创新突破的元素。

草图绘制完成之后,我们会对草图进行筛选,过滤掉实施性弱、美观性差、不够深刻的创意点。挑选出最适合客户需求的方案进行深入。大量的创意会在这一阶段经历打破与重塑,推倒与重来,优中选优,只为呈现最好的方案。

挑选最优方案后,我们才开始进行Logo的下一个阶段——成稿制图,而且会推进几个可行性较高的方案,这样在提案时,方便客户进行选择。

三、成稿制图

成稿制图通常被甲方理解为logo设计的主要部分,因此会觉得设计只是做图,却忽略了设计师在前期投入的大量时间和深度思考,还容易给人产生Logo设计十分简单的错觉。我们也经常遇到这样的客户“logo不就是做个图么,怎么这么贵?”这个时候,一定要跟客户进行沟通,让他们了解到logo设计的全过程是什么,为什么需要花费大量时间,如果客户知道你为此付出了这么多的经历,就会得到他们的理解。

实际制图只是将我们头脑中的想法表现出来,因此这一步骤仅占设计过程的十分之一。

四、细节优化与调整

经过之前的努力,到这时,基本设计方案已经完成。这一阶段主要针对Logo的细节、外形、颜色等方面进行调整。力求设计感、艺术感、实用性相统一。

案例分析

我们来看看苹果公司是如何做的:苹果公司在Logo设计时,将图形定义为一个苹果。但当Logo制作出来以后,图形的辨识度并不高。为了增强图形的识别性,避免让消费者误认为是“樱桃”,设计师决定在Logo图形上增加更多的趣味性,于是“被咬了一口的苹果”应运而生,可见细节修改至关重要。

另外,在基本方案完成的基础上,设计师会制定Logo使用规范,确保Logo在延展应用过程中能够保持高度的品牌辨识度。

以麦当劳为例,在品牌升级前,麦当劳长久以来并没有制定一个严格统一使用规范,不同国家地区的麦当劳Logo也并不相同,这对于麦当劳塑造品牌形象是非常不利的。

因此,麦当劳制定了一系列的标志应用规范,此后视觉上,统一规范的麦当劳变得更加具有辨识度。

为使Logo更具形式美,我们会对logo进行视觉优化。例如黄金分割比例是我们在这一阶段比较常用的手法。

为使Logo设计更理性、科学、美观,我们常常通过黄金分割比例来构建Logo。当事物之间各部分的比例呈现1:0.618的比例时,最能引起视觉上的美感,这一比例充满了理性与感性的统一。良好的比例关系在复制和传播的过程中更加方便快捷,也使后期的加工制造过程更加精准。

以上是我对logo设计流程的介绍,而这些其实也只是logo设计过程中的比较重要的步骤,一些具体的设计细节会根据每个不同的方案也会不同和更加深入,这样大家就明白了,为啥logo设计这么贵了吧,可不是单单一个图例制作那么简单

接下来再给大家分享一些经典的Logo设计案例,一起更加深入的理解那些著名的Logo设计背后的故事,一定对你有所启发~

五、Logo案例分享

1. 百事可乐logo

2006年,百事可乐花费100万美元升级了logo。当品牌视觉手册发布之后,甚至有网友调侃“看完百事的logo设计,终于明白logo的设计费为什么这么贵了。”

新的logo图形不再对称,字体也去掉边角变得纤细。与之前相比,现在的Logo更加扁平,便于记忆。

两条曲线,似是流动的液体,也像是微笑着的人。可别小看这简单的两条曲线,弧度细微的变化都会产生不同的效果。百事可乐还加入了几何角度的思考,通过几何学解释了Logo的原理。

在logo比例关系的处理上,也融入了对哲学问题的思考,从古代阴阳五行说到黄金分割比例,最后到地球能量磁场,小小的Logo蕴含了太多。

但是,Logo还存在一些不足之处,如:单色应用时缺乏辨识度、需要增加边框线使用等问题,导致Logo在具体使用时,会有一定的局限性。


2. 苹果logo

初代的苹果logo描绘了“坐在树下看书的牛顿”这样一副图案。相比于追求简约、便于记忆的Logo,这个图案无疑太过复杂,在传播上也有很大的劣势。可能是意识到了这一点,新logo进行了突破性的改变。

除了图形上创新之外,颜色上也采用了丰富的彩虹色。它标志着第一台支持彩色电脑的诞生。整个Logo营造出了温暖、积极的氛围,为企业注入了旺盛的生命力。

作为一个科技公司的logo,极具科技感的蓝色与边角处高光、阴影等细节为Logo营造出了立体感。

在追求极致简约的时代,纯黑的logo更便于识别记忆。

取代经典纯黑logo的,是具有光泽感的苹果Logo。与之前相比,Logo图形更为流畅、水润。在保持识别性的基础上,整体造型与材质也更加饱满。

随着iphone的推出,高光版本Logo被镀铬效果所取代。

简约、易记的logo图形,也向我们展示了近年标志发展简约化的设计趋势。时至今日,苹果仍延续这一Logo。

去年,苹果公司更是把Logo玩出了花样,动态的、静态的、丰富的材质,让苹果logo“多到用不完”。

因此一个好的logo设计是一定要给logo预留足够多的延展空间的


3. 腾讯logo

在成立20周年之际,腾讯更新了logo。仔细观察字体的笔画,我们会发现,Logo整体倾斜了。7度太小、9度太大,倾斜8度的腾讯字体自带科技感与运动感。

与logo一同发布的,还有一套定制品牌字体“腾讯字库”,这套字体包含了中英日文拉丁文多种类别,通过统一的字体,更好的传达了腾讯的企业个性,强化了企业形象的塑造。

由于汉字都是方正的,因此,在汉字的世界中,斜体汉字的概念闻所未闻。由于斜体的汉字很难依靠传统的字体结构。在文字的正负形、笔画、空间美感方面,设计师需要把握平衡与速度之间微妙的制衡。

在字体的笔画末端进行切角处理。使文字更具力量感与速度感。“腾讯”两字也做出了细微的调整,从笔画、间隔到转角弧度都发生了变化。

腾讯旗下产品众多,但风格形式都各不相同。“腾讯字库”有助于这些项目在视觉形象上的统一。

Logo整体颜色也变成了高明度的蓝色,这个颜色是与色彩机构潘通合作,定制了品牌标准色。蓝色取自海洋与天空,蕴含着极致的理性,体现了对技术精益求精的追求。

来自彩通的国际色彩大师Leatrice Eiseman,也是腾讯蓝的开发者之一介绍道:“它可以非常好的体现出腾讯的原则和哲学,也就是技术方面的精益求精对技术的追求,以及会不断地去追求新的创新。”

由此,还进行了一系列应用部分的延展。


4. 小米logo

小米斥资200万邀请日本设计大师原研哉操刀设计新logo。小米logo刚一发布,便引起了热烈的讨论,只不过是由方变圆,凭什么值200万?

 

我们知道,品牌Logo的升级换代,往往要考虑辨识度对品牌的影响。一旦失去了辨识度,相当于抛弃了原有几十年积累的品牌资产,相当于重新认识品牌。因此,近年来的品牌重塑,都是在保留了原版Logo的识别性的基础上,融入了更具价值的品牌理念。

作为设计行业的领军人物。原研哉致力于在设计中融入东方美学的概念,将复杂的事务化繁为简。深度理解小米“以科技创造美好生活为使命”的品牌理念后,原研哉提出“探索科技与生命的关系”融入“ALIVE”的概念,即接近生命的形态。

Logo中融入最具中国特点的“人情味”,整个logo历时三年,让小米的Logo具有了烟火气息,这也符合小米致力于发展一种高品质、常态化生活的品牌调性。

不仅如此,这个外形还运用到一个数学公式:|x|^n+|y|^n=1,通过“n”的变化来推算Logo进行由方至圆的演变,经过多种对比,最终选择了当n=3时,形成集美感与寓意于一身的Logo图形,也是最具“ALIVE”内涵的代表图形。

小米logo的英文字体也变得更加灵活圆润,而“ALIVE”的理念也贯穿了整个视觉系统,不论是产品展示还是品牌宣传,新Logo都变得更加灵活生动。(视频)

在沿用橙色作为品牌标准色的基础上,融入了具有科技感的黑色与银色作为辅助色,保持识别性的同时也注入了新的活力。

 

5. 麦当劳logo

看到这张图片,第一时间便能联想到麦当劳,在消费者心中,亮丽的金拱门早就形成了视觉符号。作为一个餐饮品牌,麦当劳的视觉设计也不甘示弱。由于疫情,为鼓励公众用餐卫生,麦当劳将自己的logo一分为二拆分成了两个分开的门。

 

通过分解Logo的“M”,在品牌延展上,同样也和其他品牌区分开来,将logo极致符号化。

明亮积极的“M”提高了麦当劳的品牌辨识度,红黄配色与字母“M”深入人心,哪怕只是局部,也能被一眼认出。这得益于麦当劳对于自身品牌的坚持塑造,通过不断的品牌价值输出,来影响消费者的心理。

时至今日,麦当劳形成了强大的品牌识别符号。简约的“m”更具记忆点。

 

蓝蓝设计(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设计师在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开发

 

AIGC产品的设计原则

博博

一、AI产品形态介绍

不同的产品所具备的AI能力以及用户的使用方式都是截然不同的。从产品功能的角度,产品大致可以分为三类:辅助驾驶型、内容生产型、自主决策型。

辅助驾驶型

Copilot 辅助驾驶型如其名,更强调AI的辅助性。AI会针对某个模块辅助用户做出决策,或者基于用户的操作而操作,从而帮助用户实现自己灵感的落地,类似在成熟软件中的插件功能。微软的Microsoft 365 Copilot 结合在已有的Word、Excel工具当中,用户仍然可以自己书写文章或表格,但也能随时唤起AI工具进行编辑,对于已有的文件进行汇总、扩写等编辑操作。

内容生产型

内容生产型是需要调用LLM的API来实现某一具体内容的功能性产品。用户需要针对具体场景下达相对详细、明确的指令后,AI会生成内容结果的反馈。比如大家熟悉的midjourney,用户下达具体的内容场景描述,midhourney会返回图片生成的结果。

自主决策型

AI Agent可以进行自主决策和执行任务,它可以通过独立思考和调用工具逐步完成给定的目标,无需人类去指定每一步的操作。比如,告诉 AI Agent 帮忙下单一份外卖,它就可以直接调用 APP 选择外卖,再调用支付程序下单支付,无需用户去指定每一步的操作。

二、AIGC产品设计原则

在AI产品的设计过程当中,针对不同的产品形态、用户场景、用户心智需要明确其设计原则。当前用户对于AI工具的预期是:高性能、快速、高效和可靠。从用户体验上来说,用户与AI产品的交互方式、对于AI产品的信任程度都有别于其他软件。我们需要在各个环节上,制定好AI产品的能力范畴,管理好用户对产品的预期,为AI产品提供一个友好、可拓展的交互架构。

原则1:让用户明确知道产品的能力范围

在产品推出之前,清晰地定义产品的能力和限制。不要过度夸大产品的功能或过度承诺,而是诚实地描述产品的真实能力。给予用户在使用产品前充足的心理预期,用户可以清晰的了解产品的能力范围。更好地管控用户心理预期的同时,也可以向用户传递产品的能力点。
 
如小库科技详细描述了产品可以应用的功能场景,用户对于场景化的词语可以有更好的关联联想,对于产品的能力也有更好的边界认知。
 
科大讯飞也通过具体的场景化进行产品功能的传递
 
在Liblib的模型广场中,会将用户生产的结果、模型以社区成果的形式进行展示,用户可以查看详细的生成参数进行尝试,对于新手用户也可以起到很好的内容引导。

原则2:让用户可预期结果

人工智能决策的透明度对用户至关重要,使用可视化工具、交互或解释性语言让用户能够理解AI是如何做出决策。如小库AI,在“描述词”的提示文案中告知用户输入词的限定以及预期的生成结果,并可以通过词库告知用户可以输入哪些类型的词。
 
如酷家乐AI,用户在首次使用AI工具,没有灵感或想法的时候,引导并提示用户可上传的素材类型,让用户可以有更好的目标预期。

原则3:建立与用户共建产品的机制

积极邀请用户参与产品的设计和改进过程,通过用户调研、用户测试和用户反馈机制,了解用户的期望和需求,并将其纳入到产品的迭代和改进中。如在Discord社区当中,用户可以在官网的反馈入口找到期望反馈的内容板块,可以进行问题帖子的反馈,所有的用户群体可以对帖子的内容进行投票支持和评论。也就是相当于以社区共建的形式,让所有的用户都可以对产品进行共建维护。如果是产品功能本身的问题,开发人员可以及时响应;如果是用户自身对产品的认知问题,社区的小伙伴也可以进行很好的解答。

原则4:减轻用户对数据隐私安全的顾虑

在AI盛行的当下,数据隐私安全可以说是非常敏感的话题了,AI泄漏数据隐私的事件也在不断曝光。妙鸭相机的爆红事件给我们的警示是在产品设计的过程中,除了思考如何利用新技术产出新的创意,对用户数据隐私安全的保护同样重要,它是产品获得用户信任,得以被持续使用的原因之一。
数据隐私安全涵盖的范围是非常广泛的。从产品设计的角度来看对于数据隐私安全的保护可以从以下几点考虑:

1、政策和规范的跟进和了解

遵守数据隐私和安全相关的法律法规和标准对于产品和应用是最基础的。在国内,7月网信办等7部委联合公布了《生成式人工智能服务管理暂行办法》,生成式人工智能服务管理办法的正式落地为我国AI发展打下了基础。

2、积极告知,将决策权还给用户

积极告知用户产品如何保护数据隐私安全也是规避风险的一种方法。比如用户协议中对于用户隐私的处理,比起直接提供给用户大段的文案让他们去逐字查看,在操作流程中说明产品对于用户隐私的使用,并让用户进行手动确认会明显提高用户对于产品的信任程度。苹果在数据隐私安全方面始终站在了用户这一边,无论是安装应用时询问权限还是每次出现的“是否允许粘贴”,其对于隐私保护的方法与措施都值得我们学习。

3、本地存储也是一种选择

Rewind工具可以自动存储用户在自己电脑和手机上看到的所有内容,通过引入“私人助理”的角色,方便用户基于AI进行内容的搜索和浏览整合。工具对于用户隐私的处理也非常值得参考,其主要通过本地存储、内容随时可删除等方法,让隐私优先的原则贯穿在产品的定位和功能设计之中,也是这款工具能够获得好评的原因之一。

三、结语

总的来说,AI技术的推广目前仍面临相当大的挑战,对于大众而言也有一定的使用门槛。作为设计师,比起强调产品能力的升级,我们更应该注重对用户的关怀,一款好的AI产品必定是智能化且人性化的。AI技术下的人机交互应用已经成为UX设计的趋势,我们需要注意平衡技术和用户体验之间的关系,以确保我们的设计在满足用户需求的基础之上,能够助力产品在商业市场上的成功。

 

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

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

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

自然语言界面:开启人机交互的全新篇章

博博

作者:山中

人机交互界面经过几十年的发展,人与机器间的交互变得越来越容易,随着ChatGPT等大语言模型的出现,一种我们既熟悉又陌生的交互方式再次进入大众视野,它就是自然语言界面(NLI)。

那么什么是自然语言界面,它又会为人机交互带来哪些新的变化,它会成为下一代主流的用户界面吗?本文将从计算机UI的发展简史出发,对比自然语言界面与传统图形界面的差异,带你了解自然语言界面的应用场景和发展方向。

一、计算机UI发展简史

首先让我们回顾一下过去几十年计算机UI的发展阶段。

1、穿孔纸带(Punched tape)

1940-1960年代,早期的计算机通过穿孔纸向计算机输入指令,带孔为1,无孔为0,经过光电输入机将数据输入计算机。由于需要输入二进制的机器语言,计算机在这个阶段只被少数专家应用于专业领域。

 

2、命令行界面(CLI)

20世纪60年代中期,命令行界面( CLI )作为穿孔纸带的友好替代方案出现在计算机上。命令行界面是一种通过输入被称为命令行的文本行与计算机程序交互的方法,虽然它与人类语言有较大差异,但还是大幅降低了计算机的使用门槛,个人计算机(PC)随之出现。

 

3、图形用户界面(GUI)

命令行界面通常需要用户记忆操作的命令,这对于普通用户仍然是很困难的。GUI的出现正是为了解决这个问题:既然人类很难记住各种命令,那就让机器提供可能的选项,人类只需要通过图形元素进行选择。最早的图像界面出现在1970年代,随后苹果和微软让GUI普及,短短二三十年,使用GUI交互的计算机和各类消费电子产品已经成为我们工作生活中不可缺少的一部分。

 

 

二、自然语言界面(NLI)的爆发

什么是自然语言界面?

W3C是这样定义的:自然语言界面是用户与系统通过自然语言进行通信的用户界面。用户通过语音或某种其他方法提供输入,并且系统以通过语音、文本或某种其他方法传递的话语的形式生成响应。

自然语言界面是什么时候出现的?

最早的自然语言界面可以追溯到 20 世纪 60 年代。ELIZA是一个早期的自然语言处理计算机程序,由麻省理工学院的Joseph Weizenbaum教授于1964 年至 1967 年开发,旨在探索人类和机器之间的沟通方法。ELIZA 通过模式匹配和替换来模拟对话,也就是说它通过检测用户输入的内容中是否包含某些关键词来做出响应,虽然它能做出的反应有限,更不能真正理解人类的语言,但这是人类第一次尝试通过自然语言进行人机交互,也是后续自然语言处理(NLP)技术研究的一个里程碑

 

语音用户界面(VUI)

自然语言处理(NLP)技术经过几十年的发展,终于在2010年代迎来第一波应用爆发。2011年 Siri 作为 iOS 功能由 Apple 发布,随后各家手机语音助手、智能音箱等VUI产品纷纷出现。但随之出现了一个新的网络名词-“人工智障”。虽然 Siri 相比 ELIZA 能做的事情更多了,但它们在体验上仍没有本质区别,Siri等产品依然需要用户遵循特定的表述方式才能做出正确响应,可能换一个表述方式它们就听不懂了,所以这个阶段的自然语言界面更多是作为一种辅助交互方式

 

大语言模型(LLM)

ChatGPT 于2022年底开放测试,不到一年时间大语言模型(LLM)与AIGC应用已经遍地开花。大语言模型实现了NLP技术的阶段性跨越,AI对自然语言的理解能力大幅提升,不仅能模仿人类对话,还具备文案写作和问题分析等能力,并且这些能力还在飞速进步中,相信自然语言界面即将迎来第二次应用爆发。

 

三、自然语言界面的优势

那么,自然语言界面相比传统图形界面又有什么优势呢?

1、低门槛

刻在我们DNA里的交互方式

语言是我们与他人交互的主要“界面”,智人的言语出现于 50,000 至 200 万年前,所以说这是刻在我们DNA里的交互方式。我们从小就学习阅读、写作和说话,因此通过自然语言界面与计算机交互几乎不需要学习

 

2、高效率

GUI的思路是机器提供可能的选项,让人类进行选择。但复杂产品可能有几百上千个选项,即便设计师努力按照最合理的逻辑整理、收纳这些选项,用户仍需要花大量时间精力寻找、理解、记忆这些选项。

酷家乐用户问题

酷家乐用户联系客服的问题中较多是工具使用问题:怎么添加门把手、怎么把门翻转、怎么显示柜体尺寸。在几十上百个功能中找到那一个功能都如此困难,对于需要用到多个“选项”组合操作才能实现的效果,那确实难以要求普通用户做到。

 

但如果酷家乐支持自然语言交互,我只需要告诉它我们的诉求:“添加门把手”、“把门翻转”、”显示柜体尺寸“,软件便会直接实现这些的效果。

通过自然语言输入,用户便可以忘记各家软件各种复杂的交互逻辑,设计师也无需煞费苦心设计复杂的用户引导和帮助系统,随之客服人力成本也将大幅降低。

Tome

目前已经有一些产品在这么做了,Tome是一款制作提案PPT的产品,它可以通过自然语言输入实现大部分操作,并且支持AI直接生成内容。

 

3、不设限

早期计算机的输入输出完全靠机器语言,门槛很高。后来,普通用户借助图形界面和开发好的程序,也能轻松使用计算机,但同时我们也被其限制了。

美间站点

以”美间“为例,美间站点有大量的海报模板,可以按用途、风格维度进行筛选,但用户也只能按这两个维度筛选。如果我想找出10月份用户点击最高的10个节气海报模板,那对不起,办不到,不是因为我们没有这个数据,而是我们没有提供个“选项”,通过SQL或者其他语言查询数据库就可以获取到。

 

但如果美间的数据库接入了大语言模型,那么直接问它,就能得到任何数据库能提供的内容,因为现在LLM已经会自己写代码做数据分析工作了。通过自然语言界面,我们可以最大程度发挥计算机和数据库的价值。

 

四、自然语言会不会取代图形界面?

自然语言界面这么强大,那它会不会取代图形界面呢?答案是不会,受限于AI能力发展现状和自然语言自身的局限性,自然语言界面有其适用范围

1、AI能力仍有限

理想情况是AI能完全理解我们的诉求、且能力能够覆盖,但现在还做不到。用户随便输入一个需求,产品很可能做不到,这就需要我们通过GUI进行提示和引导。

 

2、额外的处理时间

相比通过GUI直接对程序发出指令,用户输入自然语言LLM普遍需要几秒钟的处理时间,带来更高的试错成本,某些场景下我们使用GUI操作更加快捷。

 

3、自然语言表达不够精准

人与人的交流也常常存在歧义,更别说跟机器交流了,所以自然语言界面不适合做非常精细的操作。 

美间提案PPT

以美间提案PPT为例,如果我通过自然语言输入:“把标题改成红色”,那AI可能会反问:”哪个标题?哪种红色?“。试想一下,如果要通过自然语言描述这些信息,是不是还不如通过鼠标选择来的简单。

 

4、自然语言输入也存在成本

自然语言输入,用户需要把需求组织成语言,然后打字或讲出。也就是说用户需要动脑子,这显然与我们追求的”Dot let me think“原则相违背

美间海报

以美间海报场景为例,美间支持”AI生成“和”模板再创作“两种海报创作方式。这两种方式分别有各自的使用场景。如果用户需要一张元旦祝福海报,对于目标明确的用户,他可以通过详细描述画面需求,生成个性化的海报方案。例如:”生成一张元旦节日海报,主题为:群核科技祝您元旦快乐,画面要喜庆,插画风格,包含烟花、灯笼、热闹的人群等元素“

 

但对于更多用户来说,描述一个海报画面是困难的,大部分用户只需要一个通用的模板改改字就足够了,这样不但更轻松,而且得到的海报质量也更高。

 

五、NLI与GUI融合互补

所以,自然语言界面不会取代图形界面,它们更多会融合互补,在各自的擅长领域发光发热。

 

未来常见的用户工作流将会是:NLI发散-GUI收敛,先使用NLI得到一个大概结果,再通过GUI完成确认或调整。

美间AI海报

美间AI海报就是这样的设计思路:基于自然语言输入生成若干结果,选择一个满意的方案再二次编辑。

 

六、NLI还有哪些应用场景?

自然语言界面还有哪些应用场景?微软表示:万物皆可“Copilot”

Copilot是微软发布的依托于大语音模型的AI助手(AI Agent)。11月15日的微软Ignite大会上,CEO纳德拉向我们展示了Copilot最新的形态:一个入口连接无限可能

Copilot可以连接各种应用和数据源,用户只需要把需求告诉Copilot,Copilot就能自动完成全部应用和数据操作,甚至是跨应用和跨数据源的。

Copilot Studio

Copilot Studio是微软面向B端用户推出的AI助手,支持用户自定义专属的Copilot,以满足行业、部门、角色等内外部场景的定制化需求。让Copilot链接企业财务系统,你可以随时问它各类财务预算的开支和剩余情况;Copilot还能双向打通CRM、ERP等SAAS产品,自动化执行复杂的业务流程,比如办理新员工入职、费用报销等。

 

数据分析

Excel拥有强大的数据分析能力,但我们大部分人只用过Excel来制作表格,因为高阶的函数、宏等功能对于普通用户来说学习成本太高。现在,Copilot与Excel结合,便可以实现通过自然语言写代码执行复杂的数据分析工作。

 

AIGC

AIGC是当前最热门的AI应用领域之一,除了常见的文案生成、图片生成,传统的内容创作软件结合AIGC能力也可以发挥出巨大的潜力。Copilot加持下的PPT,只需一句话,Copilot将自动帮你完成PPT的文案、配图、排版等工作。

 

七、展望

未来自然语言界面将重塑现有产品的交互方式, 但自然语言也只是一种交互方式,未来随着AI能力和硬件技术的发展,人类与机器间的交互成本还将进一步降低。

微软在Ignite大会上演示了未来 AI+MR 设备的应用场景,借助MR设备AI可以看到、听到、解释、理解我们的意图和我们周围的世界,我们只需要极少的输入就能得到需要的结果。以现在AI技术的发展速度,相信这些看似科幻电影中的场景用不了多久便会成为现实。

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

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

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

 

小小的细节大大的体验

博博

小小的细节大大的体验

高端网站设计公司蓝蓝设计:关注并改善残疾人用户体验

博博

在医疗行业中,残疾人用户面临着许多挑战,例如身体不便、视觉障碍、听力障碍等等。为了让他们能够更加方便地使用医疗服务,UI设计师需要考虑到各种不同的因素,并采取相应的措施来提高用户体验。

日历

链接

个人资料

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

存档