首页

最近超火的“彩虹光感”,别告诉我你是最后一个知道的

seo达人


什么是彩虹光感?

图片
彩虹光感也是最近这一年左右在设计圈蔓延,然后至今发现越来越多的设计师喜欢上这样的风格,也许是因为单色渐变或者黑白灰看腻了,从而去选择一些更能在平凡中凸显竞争性彩虹色彩。
图片
彩虹光感的形成,一般由多种色彩叠加混合而出来,通过色彩柔和过度或者扩散开的方式处理形成。这种色彩出来的效果十分惊艳,艺术感十足。
图片
Microsoft Office 365
譬如之前微软一只影片里面,应用到了彩虹色彩搭配思路。在玻璃拟态轻质感的加持下,视觉效果让人眼前一亮。
或许有些设计师觉得彩虹光感,会有些花哨且也不高级。其实在在同质化严重的今天,尝试下新的视觉表现形式,未必是坏事,也许它可以让你的设计脱颖而出。
图片
英国约克郡雕塑公园的旧教堂
艺术家kimsooja 用彩虹色灯光,为教堂带来新的生命力。在这种环境中,似乎让我们感受到了色彩呼吸的声音,放下生活中的杂事,聆听色彩在歌唱,开始静谧冥想。
图片
apple watch
就连苹果的硬件产品设计,也采用了彩虹色彩搭配,这种与众不同的新鲜感,有网友直呼太美了吧。也正是因为彩虹色的活力与年轻化潮流,受到越来越多人的关注。

 

彩虹光感的特点

彩虹光感由自然界中真实存在彩虹演变而来,如今在数字设计中越发广泛的使用。因其特殊的效果,以及迷人般的色彩弥散处理,使得这种色彩虽然混合多种,也不会让人产生厌倦感。
图片
untitled macao
基于目前彩虹色彩应用案例,我们可以分析出这种风格最大特征点有:丰富、多彩、年轻、活力、细腻的质感、充满想象空间以及有一些疯狂特征,似乎有着为年轻一代而出的风格。
图片
图片
其实在早期从20世纪70年代开始,彩虹色彩就受到摇滚乐队的喜爱,以及一些电影霓虹灯效果演变,也有些彩虹色彩踪迹。
图片
摇滚音乐CD封面
直到今天,彩虹色的再次复兴,已经延续到众多领域中,例如装置艺术,艺术展览以及产品包装、音乐节海报等各种领域的渗透,我想我们是时候思考它的价值以及接下来潜力。
图片

图片

untitled macao
图片

 

彩虹光感的应用

如今不论装置艺术,还是数字设计,彩虹色彩搭配都能有眼前一亮感受,这种效果不仅 能打破 枯燥配色,还可以活跃氛围感,特别是一些涂鸦类型艺术装置等、音乐海报、酸性风格和平面设计等大量出现,下面挑选一些优秀领域应用案例和大家分享下。
#1. 平面中的应用
图片
图片
图片

图片

图片

Behance/Canwei Lai 赖灿伟

 

#2. 包装中的应用

图片

图片

图片

 

写在最后

彩虹光感慢慢开始成为流行文化中的一部分,特别是演艺海报与展览装置艺术等都在大量出现。这种色彩搭配的出现,更是一种前所未有的改变与突破,大胆而张扬的精神,极具吸引力。

个人觉得彩虹光感的配色,可以让产品在竞争中脱颖而出,彩虹色更有着年轻活泼的寓意。如今看到一些营销,也在为Z世代年轻人打造产品,将彩虹色应用在产品中也是一种突破窘境的手段。

 

原文地址:功夫UX(公众号)
作者:功夫UX

转载请注明:学UI网》最近超火的“彩虹光感”,别告诉我你是最后一个知道的

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png


文章来源:csdn

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



系统化思维如何辅助设计实现

seo达人



“文中示例相关数据都为模拟数据,而非真正的商业数据,以此声明”

 

先给大家介绍一下酷大师的背景:

1. 酷大师产品定位:面向设计领域的在线建模工具和内容平台。

2. 酷大师当前阶段:0-1搭建并完善用户体验闭环。

3. 酷大师阶段目标:服务用户增长的同时,提高用户留存。(站点留存→引流→工具留存)

在一周一迭代,交付任务紧的敏捷流程中。以下是我们在其中的一些实践:

 

1、以系统化的视角来分析业务

酷大师项目启动至今,已经大致完成了站点从0-1的内容搭建。站点的主要模块包含:首页、模型广场、工作台、帮助中心、活动中心、课程中心。他们相互独立,又相互影响。独立好懂,聪明的亲们通过名字就能猜出各个模块的功能,并且这些功能彼此都不可替代。那么他们是怎么相互影响的呢?这里引出一个词:系统化

请看下图:

图片

同样一个事物,独立的看,和把它放到一个系统中看,我们可能会有不同的理解。同理,当我们把酷大师站点当作一个系统来看时,再结合我们的业务指标,我们可以把这个系统转译成如下模型:

图片

从抽象到具象,我们把整个模型分为三个指标类型:

  • 1、核心指标:整个项目为之负责的目标,是评判所有项目行为的基本准则。
  • 2、策略指标:影响核心指标的所有变量集合,是基于产品策略拆解出来的二级支撑性指标。
  • 3、行为指标:随着策略指标的精细化,产品的策略指标最后都会对应到一个或者多个具体的用户行为指标。

我们可以通过模型找到影响业务核心指标的重点发力板块,也可以通过最底层的行为指标去反推上层的策略指标,进而量化设计价值。到这里,我们也就可以在这个系统中,找到对核心指标影响较大的策略指标,他们分别是:注册UV数、站点引流UV数和客户端引流UV数。这三个策略指标对应的产品板块分别是:游客页、详情页和工作台。他们就是设计接下来需要在酷大师众多产品模块中着重发力的项目。

 

2、以系统化的方式来分析用户

说完了产品目标和拆解,我们来看看用户。市场和用研同学往往可以在项目前期给我们输入很多关于用户的数据,在项目初期,我们可以把这些信息抽象成几个有代表性的关键词。下图是酷大师用户关键词,可以帮助我们定制大的设计思路,不过在一些更细的业务场景中,这些信息并不给到更清晰的设计指导。

图片

所以在此基础上,我们可以把这些信息作为一个一个的内容切片,通过不同的标准来重新组织这些切片,进而得到一个相对系统化的用户信息。

我们换一个维度,再做一次梳理分析:

图片

可以看到,当我们把酷大师用户以不同阶段做划分,从新游客到资深用户,不同阶段的用户对于产品的诉求有着明显差异性。游客和新用户更注重价值和需求的匹配;资深用户更注重实际产品价值的最大化。并且我们对于不同的用户群体,需要对应不同的产品策略,甚至不同的“端”来承接用户需求。到这里,我们已经可以通过以上信息,在产品的不同链路里规划不同的设计策略了。

不过有时候需求对标的用户群体比较聚焦,以上信息还是不够说服我们自己的话,还有最后一个技能,就是找到和需求高度对标的用户(注意,是高度对标),和他们深度交流,为他们做用户画像:

图片

(图中为虚拟数据,仅供参考)

 

PS:这里的用户画像需要根据实际的业务需求来针对性的采集信息,这是一个比较灵活的过程,需要设计师拿捏其中的尺寸。

通过以上三个维度的用户数据,我们就可以根据产品的不同模块,找到对标的用户群体,然后为其做对应的设计策略。

接下来就是第三步:

 

3、以系统化的思维规划设计策略

面向资深用户的设计策略(以客户端改造为例):

通过用户访谈和调研结果看,如果用一句话来描述酷大师客户端的用户特点的话,应该是这样的:

图片

基于用户特点和业务诉求,我们再结合服务模型,我们可以一步步推导出我们的设计策略。

图片

(图中为虚拟数据,仅供参考)

 

当设计策略明确后,结合实际的业务需求,接下来就是有的放矢的设计实施过程。

面向新用户的设计策略(以游客页改版为例):

回想我们的生活,最吸引用户眼球的传播方式是什么?思前想后,我觉得是电视直播,因为通过它,自诩谨慎机智的我买了人生第一箱「生发水」…

  • 1、你是否有脱发的烦恼? → 诉求
  • 2、用了一堆产品,却迟迟没有效果? → 顾虑
  • 3、我们有北美硅谷防脱技术+南亚失传生发秘方! → 优势
  • 4、主持人和甲方撕破脸,工厂紧急调货、买一送五!!! → 驱动

事实证明,「生发水」没有白买,因为后来我发现这和酷大师游客页的业务目标几乎一致:“在没有互动的情况下以很短的时间把用户从游客转变为消费者。”

通过前面的用户分析我们可以知道:对于酷大师的游客用户&新用户而言,他们更多关注于产品价值和自己需求的匹配程度。

那么如何在短时间里向用户传达信息,并促成注册转化呢?

我们从诉求->顾虑->驱动三个维度来去组织我们的优势信息。

因此在面向此类用户时,除了对他们介绍酷大师的共性价值外,需要重点介绍酷大师的差异性价值,以及足够有吸引力的驱动利益点。

如下图:

图片

基于上文分析,我们再基于目前产品可提供的能力范围,结合用户反馈,把信息和用户需求做一一对应,然后再给出设计解法。

设计实现:

正所谓:条条大路通罗马,各个小道奔安康。只要设计策略是正确的,那么具体的设计方案就是合理的,篇幅有限,这里就不做展开。

图片

 

4、以系统化的模型验证设计成果

万物皆可度量,设计并不例外。系统是度量设计成果的最好“尺寸”。

怎么度量?还记得最初的指标模型么?

  • 1、通过技术手段监控用户的行为指标:“按钮点击、停留时长、滑动屏数、返回&跳出率…”
  • 2、通过行为指标反推对策略指标的影响。“按钮点击提高 → 页面引流效果提高。”
  • 3、通过AB测试、上线前后变量监测等其他手段,对比出设计在数据上带来的变化。

通过以上方法,我们可以直观的看到设计在整个项目中的贡献。

那么在酷大师项目中,这个成果是多少呢?请看下图:

图片

ps:图中注册转化和老用户登录转化是以设计为唯一变量带来的数据提高

 

以上就是酷大师从0-1过程中的主要思考点,从前期业务拆解分析、用户调研,到制定设计策略,再到设计实施,最后到成果验证。

图片

到这里,我们也基本回答了最开始的问题:我们如何在业务迭代中抓重点,并有的放矢的“集中精力做大事”。

以这样的思路,我们就能以有限的精力,最大程度保证业务的目标的实现,也能对用户的关键路径做有效的体验提升。

 

写在最后

1):设计师不能盲目跟随需求,更不能对需求一视同仁,什么都想做好的结果就是什么都做不好。我们需要有一个自己判断标准。

2):“系统”是一个标准,也是一个视角。他影响着我们对业务、对需求、对用户以及设计的理解。

3):“系统”本身不重要,用“系统”的思维来看待事物很重要。

4):多个视角看到的东西,一定比单视角看到的更全面。

以上内容,和诸位共勉。

 

原文链接:酷家乐用户体验设计(公众号)

作者:沧耳

转载请注明:学UI网》系统化思维如何辅助设计实现

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png


文章来源:csdn

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



如何设计精美的应用图标?

seo达人


图片

 

1.强调你的品牌

应用程序图标就像公司徽标。在大多数情况下,这是第一次互动,第一印象。解决方案应立即传达你公司的品牌。这样它就会变得更加可信。

图片

 

2.使其与应用程序一致

将图标视为通向你的解决方案。这个外观应该是你的应用程序之旅的开始。融入品牌元素,保持统一性。

图片

 

3.将图标与平台指南对齐

所有应用程序都是平台生态系统的一部分。我们的大脑会很快注意到与环境不匹配的事物,并将它们视为不自然的。与平台指南保持一致可确保用户的眼睛将它们视为移动平台不可或缺的一部分。

图片

 

4.让它独一无二

在图标世界中模仿是失败的快速秘诀。当用户检测到模仿时,它将不再信任解决方案。谨慎地传达你的解决方案的价值,不要只是复制他人的想法。所有令人难忘的符号都是独一无二的。

图片

 

5.让它变得简单

智者说,公司的好标志应该简单到连5岁的孩子都能画出来。环顾四周,大品牌都是这种符号。你的应用程序图标设计应该具有类似的简单性。

图片

 

6.使其易于识别

用户浏览应用程序通常会看到每个应用程序图标一两秒钟。这就是为什么你的产品应该在眨眼间被认可的原因。此外,无论人们在哪里看到符号(网站或博客),他都应该自动将它与你的应用程序连接起来。

图片

 

7.使用矢量图形

使用矢量软件来创建高质量的图标设计是很好的。年复一年,具有更高密度的新设备出现在市场上。你的应用程序设计应准备好以最高质量呈现。你还应该避免在启动器图标中使用照片。

图片

 

8.各种背景下的测试图标

有些图标在深色背景上表现得很好,有些图标在较亮的背景上看起来更好。你的用户使用各种图像和图形作为背景,为此准备你的图形。以正确方式设计的符号将始终看起来合适。

图片

 

9.让它美丽

我们都喜欢美丽的物体。让你的移动产品成为其中之一。你的图标应该像一颗每个人都想吃的小糖果。花时间准备一个可爱的图标。这项投资应该会及时回报。

图片

 

10.总结

记住这个简单的提示可能会显著增加你的应用程序成功的可能性。糟糕的图标设计是移动市场初学者的基本错误之一。

设计你的图标简单且与你的解决方案保持一致。使其独特、可识别并始终符合移动平台指南。在真实环境中测试你的图形设计。使用矢量工具来创建它。最后,你美丽的艺术品将成为标志性的。

 

原文地址:UI范(公众号)

作者:范范之道

转载请注明:学UI网》如何设计精美的应用图标?

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png


文章来源:csdn

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务





通用设计和无障碍设计,谁才是「老大」

ui设计分享达人

什么是通用设计? 


设计产品需要考虑许多不同的因素,包括功能性、可靠性、美观性、安全性等。产品设计的主要目标之一是让具有不同能力的用户能够有效地与产品交互。幸运的是,通用设计是一个框架,它允许产品创建者设计适合所有用户的体验。本文将为大家讲解通用设计概念、其核心原则,以及针对不同受众和设备间的实用设计技巧。


通用设计适用于所有用户

通用设计是一套建议,以确保产品或服务适用于不同身心能力的用户。不同身体感官、心理或智力能力的人可以使用同一种产品,而无需任何额外调整或修改时,设计被认为是「通用的」。


通用设计对用户和企业都有益处,因为更高的用户可访问性和满意度会带来更好的用户留存率。认为体验不错的用户,更有可能向他们的朋友和家人推荐产品,从而扩大用户市场。


关于通用设计的3个常见误解

尽管通用设计听起来很简单,但它却是数字世界中最容易被误解的概念之一。让我们回顾一下关于通用设计的3大误解


通用设计和无障碍设计是一回事

在了解了通用设计的含义后,大家可能会认为它是无障碍设计的同义词。实际上,无障碍设计——指的是允许残障用户正确访问产品或服务的设计,它是通用设计的一个组成部分。


通用设计关注所有人的需求,包括残障用户。换句话说,通用设计旨在让产品、服务和环境更容易为每个人所用。例如,超市中的自动开门器,方便了坐轮椅的人和携带杂货的人。


通用设计只关注功能

为了最大化地提高产品的可访问性、可用性,需要人们投入时间和精力来创建可靠的产品功能,但功能良好的产品还不足以让用户满意。事实上,用户通常偏向具有良好功能性和美观性的产品——而美观性对可用性是有直接影响的。美学可用性效应表明,如果用户拥有良好的视觉外观,他们往往会觉得设计更有用。


通用设计是设计方法的一个很好的补充

这种误解的根源来自于对通用设计含义的不理解。有些设计师认为这是一个「结果」,但实际上它是一个「过程」。通用设计并不是一套用在设计结尾时的指导方针,而是一套从始至终就整合进设计过程内的原则。实践设计协作非常重要,以确保团队中的每个人在创建产品时也共享相同的通用设计理念。


通用设计的核心原则是什么?

通用设计的一个经典例子:帮助轮椅使用者从街道转到人行道的坡道设计。图片来源 Adobe


通用设计的核心原则是由Ronald Mace和北卡罗来纳州立大学的建筑师和产品设计师工作小组于1997年制定的。Mace 创造了「通用设计」这个词,并用它来描述产品和环境的概念。


最初,通用设计主要是为实体产品和环境考虑的,但后来这个概念被应用于数字产品。接下来概述的通用设计原则,目的是帮助当今的数字设计师创造更人性化的产品和环境。


01 公平使用

设计师应致力于为所有用户提供相同的使用方式。如果无法为不同能力的人提供相同的设计方案是,那么产品创造者应该找到合适的相似方案。例如,当你设计一个网站时,需要让所有人都能访问它——包括有视觉障碍和使用屏幕阅读器技术的人。

视障人士在配有辅助技术的计算机上工作。图片来源 Adobe


02 灵活使用

当你的设计投入使用时,它应该足够灵活以适应用户的节奏,以及不同用户间的交互方式。例如,当你创建新设备时,它应针对右手或左手访问进行优化。


03 简单直观地使用

你的设计应该简单、直观,并符合用户的期望——无论用户的知识或以前的经验如何,都应该易于理解。总是试着去消除不必要的复杂性,包括使你的视觉设计尽可能简约,以及在任务完成期间和完成后为用户提供适当的反馈。此外,一定要使用简单易懂的语言与用户交流。


04 可感知的信息

你的设计应持续向用户传达必要的信息。重要的是通过多种方式提供信息,以适应感官能力不同的用户。例如,在设计视频播放器时,建议添加启用字幕的用户界面(UI)元素。字幕可以帮助聋哑用户理解多媒体内容,对非母语人士也很有用。

YouTube的视频字幕。图片来源YouTube


05 容错

你的设计应将出错的风险降至最低。为具有潜在危险的操作添加额外的「保护层」,防止用户犯错,例如不可逆转的文件删除。

Apple macOS 中的对话框,在用户尝试清空废纸篓时变得可见。此对话框通知用户无法撤消此操作。图片来源:Nick Babich


06 最少的体力劳动

你的设计应尽量降低用户使用时所需的体力工作。具有良好的人体工程学设计、最少的重复操作,以及舒适的交互。自动人行道——机场中常见的一种运行机制,帮助身体各异的人快速移动——展示了这一原则的应用。

在机场使用自动人行道的人。图片来源 Adobe


07 接近使用的尺寸和空间

无论人们的体型、姿势或活动能力如何,都应不受影响地使用产品。例如,当我们设计一个新的移动设备时,我们需要确保它适应手和握把尺寸的变化。对于许多项目来说,可以使用UI 套件去制作适合各种情况的UI元素。 


如何将通用设计应用于学习?

正如我们前面提到的,通用设计不是严格的指导原则,而是一种考虑用户不同能力的设计方法。通用设计的目标不是创建一个一刀切的解决方案(很少能找到这样的解决方案),而是探索不同的设计解决方案,并选择更具包容性、可访问性和教育性。由于每个产品都不同,因此实施通用设计方法可能因组织而异。以下是基本上适用于所有项目的一些建议。


01 进行用户研究以了解你的用户

了解你的用户是产品设计最关键的方面——但如果你想实践通用设计,你也应该了解用户的多样性。用户研究在设计过程中起着关键作用,因为它直接影响我们的设计,这也是为什么所有设计过程的第一步都是收集用户需求。旨在了解用户的需求、行为方式以及与产品互动时的想法。


在进行用户研究时,你应该:

-确定你的目标受众;

-找到你目标受众的正确代表。

-采访代表以获得有关用户偏好和行为的宝贵见解。


在这个过程中实现用户多样性非常重要,这意味着你应该采访目标用户群中不同年龄、不同心理和不同身体能力的人。它将帮助你设计和开发可供不同类型用户访问的强大UI。在此阶段结束时,你应该了解用户的性质、目标以及使用你的产品想要完成的任务。


02 创建心智模型

根据你在第一步中收集的用户研究,是时候创建用户心智模型了。这些模型描述了用户对系统的了解(或认为他们了解)什么,这使你可以了解特定人员看待情况的视角。将残疾视为心智模型的一部分也很重要。例如,在为色盲用户调整产品设计时,请确保颜色不是用作交流的唯一方式。


03 用户流分析

用户流分析是最有价值的用户体验 (UX) 设计方法之一。用户流显示了用户如何与产品交互——包括用户为实现目标而经历的步骤,以及在此过程中每一步实际发生的操作或交互。用户流分析使设计人员有机会了解不同交互发生的背景。


在进行用户流分析时,建议设置一个量表,让你能够恰当地评估用户交互:

1级:与产品交互时没有重大问题;

2级:对特定产品功能有困难;

3级:大多数产品功能有困难;

4级:无法使用产品。


在此步骤结束时,你将了解产品的实际复杂级别。这些信息将帮助你在用户有效性、效率和满意度方面优化产品需求。


设计提示:使用同理心图会让你的用户流分析变得更容易。当你站在用户角度,去考虑用户在使用时的所见、所想和所感时,它可以帮助你的团队建立对用户的同理心。


04 应用迭代式原型

原型制作是一个将团队最初概念转化为实际有形的过程,例如在纸上绘制模型(低保真)或创建功能设计模型(高保真)。应用迭代原型对探索和测试非常有用,因为原型可以在产品发布前帮助收集用户丰富的反馈信息。它还允许关键的项目利益人或合作伙伴设想系统的未来样子。


虽然原型制作是通用设计过程里的重要组成部分,但最大限度地减少构建原型的所需时间也同样重要,产品设计师可以依靠UI套件来加快原型制作。


05 进行可用性测试

在这个阶段,确保你的用户不再遇到任何产品问题至关重要——可用性测试是实现这一目标的完美技术。可用性测试使可以帮助你直接观察目标用户与产品的交互。它可以是直接的(适度的可用性测试)或远程的观察。可用性测试允许设计人员从单个功能后退一步,从整体上审视产品、服务或环境。可用性测试的目的是评估你当前的设计,并明确改进的方式。


06 将用户反馈环路整合进设计过程中

通用设计需要用户的积极参与,因为你需要用户的输入让设计运行起来。这意味着你的用户时刻向你共享他们的反馈。通过反馈循环机制(例如共享产品问题、关注点和意见表单),能帮助你设计出更符合用户期望和需求的产品。


设计应吸引所有用户

通用设计期望造福任何人,因为它促进了产品的可访问和可用性。在整个设计过程中考虑所有人的需求和能力,可以创造出真正满足用户需求的产品。

文章来源:站酷   作者:UX词典

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



设计师的年中总结这点事儿

seo达人


01.年中总结到底重不重要?

静下心来仔细想想,年中总结到底重不重要?我觉得对于设计师来说非常重要的!因为通过年中总结可以更好地了解上半年的产出,有什么亮点。技能上是否成长,其中哪些不足,都可以在这个阶段进行复盘。分析遇到的问题,解决问题并总结归纳。
 

 

02.怎么才能使内容更出彩?

我们在总结之前,不要着急上来就写,要先列出一个基本的框架,要进行分析,捋清逻辑。
 
首先要罗列出在这上半年做了多少个项目,想不起来可以翻一翻以前的周报,把项目进行归类,可以分为3类:重点项目、常规项目和其他参与的项目。
 
然后就可以列出一个基本的总结框架,按照这个框架在结合自己的实际情况,就方便多了!下面是我列出的一个基本框架,可以根据自身情况进行删减。
 

图片

·自我介绍

这个在开讲之前都会讲一下,尤其在大厂,向领导们汇报,首先要介绍你是谁,主要负责哪个业务线,主要负责什么内容。但是如果是小公司或者是在组内进行汇报,那这个环节就省去了!因为领导和大家对你是比较熟悉的。
 

·内容引言

可以用几个关键语句来概括一下半年的工作,能给人留下深刻的印象。要以工作的核心价值为主,比如:我把这半年我在业务能力的显著提升总结出3个关键点

1.品质感的提升

2.解决问题能力的提升

3.善于思考

简单明了,定好主题后,下面内容都围绕着主题去说明论证。

图片

·重点内容讲解

很多人有一个误区,觉得总结的内容越多越好,如果缺乏重点,也只会让大家觉得你努力但是却没有成绩的印象。以这个我在年中总结中摘出来的一个红包雨小游戏项目来说:
 
1.首先要向大家介绍一下这个项目的背景,让大家了解这个项目是干什么的,以及玩法是什么。
 

图片

 

2.介绍此次项目中设计的亮点

冲击力、层次丰富、光影质感

PPT上面文字不用太多,提炼出关键点,简单明了,容易被大家阅读,在讲的时候在把细节具体的展开来说,充分的介绍你的设计思路。

 

图片

 

3.完整的界面展示

把项目的设计思路以及亮点介绍完之后,要把项目的所有的页面都展示出来。并在PPT中用数字展现出来,要进行量化。

图片

图片

图片

 

4.遇到问题如何解决的

那这个部分是非常重要的,因为可以展现出你解决问题的能力,设计师不仅仅要把界面做的美观实用,还要在遇到问题是能给出一个解决问题的好方法,这也是设计师必须具备的能力之一。

 当时这个红包雨的因为每一个界面都涉及动效,所以和开发沟通起来很难去描述细节,最后产出的效果不理想的话改也是很麻烦的,所以干脆出一个demo,把想要实现的效果直接展示出来,这样就什么问题都解决了!

 

03.自我反思

这是对自己半年的评价,这部分可以分成自己的优点和缺点两类来说,优点可以说设计满意度,技能是否提高,设计能力是否提高,哪方面有提高;缺点可以说还有哪里不足需要加强。

 

04. 明年规划

经过反思,你会了解到自身的不足,可以根据这些不足制定下半年的计划,在明年的相同地方至少可以不走弯路,快速超车,最终到达目的地。

 

05.结语

都说干得好不如ppt写得好,其实无论是在年中或者年底的大总结还是日常的小总结,要想出彩,必然离不开平时兢兢业业的工作。但只有苦劳是远远不够的,总结也是一种日常积累,我更希望我们每个人做的不仅仅是年中这种大一点的总结,而是每月总结,每周总结,甚至每天总结,曾子之所以有伟大的德行,是归功于他的“吾日三省吾身”。如果能够做到隔段时间就把过往工作做一次梳理,重大项目完结都做一次总结,那总结汇报时必然能交上像样的答卷。
 

 

原文地址:58UXD(公众号)

作者:环铁艺术家

转载请注明:学UI网》设计师的年中总结这点事儿

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png


文章来源:csdn

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


设计沉思录|设计价值难量化?掌握这套方法就够了

seo达人


01.目标导向的来源

目标导向在我们身边随处可见,大到公司建立的使命、愿景、价值观,小到公司的规划的3年、5年的发展战略,再聚焦一点便是每个季度制定的OKR。大大小小的目标形成一条路径,使得公司上下多个人、多个团队共同合作,为实现最终目标而不懈努力。

a

02.目标导向方法帮助设计师解决什么问题

作为设计师,参与的目标链路绝大多数处在偏下游的一环。设计师需要明确自己的价值,并且产出自己的价值。通常我们拿到的目标是比较宏观的,这就需要我们不断拆解为更小的子目标,每层目标便是上层目标的实现路径。
 

图片

目标导向的设计方法能帮助设计师在整个系统中梳理清楚我们要承接的上层目标是什么,也就是设计职能对业务的价值,帮助我们了解工作要求是什么,设计需要达到什么样的标准,向下拆解我们能产出怎样的策略。

a

03.目标导向的设计分析方法

第一步:明确设计目标

1.首先要了解什么是清晰的目标。清晰的目标由2个部分构成,一部分是预期结果,另一部分是现状,其中必然存在一定的落差。那么这个落差便是我们要解决的问题和要完成的任务,所以一个清晰的目标需要包括预期和现状。

图片

2.符合Smart原则:具体的、可衡量的、可实现的、相关的、有截止期限的。

制定的目标不能含糊,能否达成一定是可以被证实的,不能不切实际。除此以外,制定的目标需要和其他的目标有所关联,在准确的截止日期完成。
 

图片

3.明确我们的设计目标需要从项目目标切入,通过不断向上追问,补全业务的背景和目标。同时基于业务目标,拆解出设计目标,并且为设计目标找到可衡量的指标。

图片

第二步:拆解目标的两大步骤

通常人类有两种思考方式:直觉思维和结构思维。直觉思维大多是在极短的时间内大脑做出的判断,想到的方案大概率是不完整的。结构思维是经过系统分析后作出结论,对大的目标拆解成要素,最后形成一个影响目标的结构图。通过补全所有的视角,从中找到最后那几条或者一条关键的解决方案。带入这样的思考方式,我们如何对目标进行拆解呢?
 

1.找拆解维度:

麦肯锡 6W3H方法:

what\where\which\when\why\how\how much\how many

通常解决一个问题,要从提出一个好的提问开始,提的问题就是切入的角度。6W3H中问到最多的是“Why”,往往也是最核心所在。通过不断的提问,打开的视角越广,认知才能越广。 

图片

 

2.系统拆解:

找好拆解维度,怎么判断是不是一个好的拆解呢?可以看它是否符合Mece原则:同一维度,不重不漏。它是麦肯锡的第一个女咨询顾问巴巴拉·明托在《金字塔原理》中提出的一个很重要的原则:各部分之间相互独立 ,所有部分完全穷尽。

图片

常见的拆解模型有以下5种:

A.二分法:把信息拆解成A和非A两个部分。

B.过程法:按照事情发展的时间、流程、程序,对信息进行逐一的拆解。

C.要素法:可以是从上到下,从外到内,从整体到局部进行拆解。

D.公式法:按照固定公式设计的要素去拆解,比如CTR、GMV等计算公式。

E.矩阵法:根据重要紧急程度构建价值矩阵对应四个象限:重要紧急、重要不紧急、不重要但紧急、不重要也不紧急。

图片

同时,在目标拆解中也有一些小技巧:

A.要够多:对一个拆解维度的拆解方式越多,找到关键因素的概率越高;

B.要够细:在逐层拆解的过程中,需要不断检查最细要素是否已无法再进行拆解;

C.要够准:拆解时,要检查是否可以推导出具有指导意义的结论。

第三步:定位重点

定位重点,可以分为2个维度构建价值矩阵:

1.重要程度:看如何构成目标;

2.提升空间:看横向对比,看时间变化。 

图片

第四步:挖掘策略

通常情况下,在前面步骤做到足够充分的时候,对应的解决策略也会相应成型。挖掘解决策略同样也有4大步骤。

1.明确研究内容:依旧采用6W3H的方法,进一步细分明确要研究的内容;

2.选择研究方法:桌面研究、数据分析、用户研究、竞品分析等;

3.提取研究结论:通过以上方法研究得出的结论可能会有相同与不同之处,对最终的信息进行分析及整理,得出最终的研究结论;

4.提炼策略:基于研究结论,提炼出相应的解决策略。

图片

a

结语:

以目标导向的设计方法可以有效地帮助设计师通过对目标的逐层拆解,从宏观看到微观,从模糊到清晰,从方向转变为动作。在此过程中了解设计职能在整个产业链条中起到什么作用,帮助设计师们在可发挥的空间内大展拳脚,实现价值最大化。
 

推荐阅读:

《麦肯锡问题分析与解决技巧》

《麦肯锡教我的思考武器:从逻辑思考到真正解决问题》

《金字塔原理》


文地址: 58UXD(公众号)

作者:环铁艺术家

转载请注明:学UI网》设计沉思录|设计价值难量化?掌握这套方法就够了

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png


文章来源:csdn

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

用户体验设计法则应该怎么用?来看看这些应用原理!

seo达人

 

1、菲茨定

图片

选中目标所需时间与移动距离长短和目标面积大小有关。(与距离负相关,与面积正相关)

 

现实中的应

图片

在商场中寻找洗手间取决于标志的大小及步行的距离。为了满足这两个标准,标志设计得更大、更容易接近。

 

设计应用

图片

▲ 左侧页面的CTA按钮很小,没有突出显示,与表单的其他元素基本上没有区分;右侧页面CTA按钮尺寸很大,能让用户清晰识别。

 

2、希克定律

图片

决策所需要花费的时间随着选择的数量和复杂性增加而增加。

 

现实中的应

图片

与餐厅相比,快餐店的菜单选项有限。因此顾客点餐速度更快,门店提供的服务也更快。

 

设计应用

图片

▲ 在Whatsapp上转发消息时,会在“最近聊天”列表上方看到“经常联系”的3个好友。这对用户来说是一种简单的交互,帮助用户节省操作时间。

 

3、共域定律

图片

被一个显而易见的边框包围起来的多个元素,被视为一个群组。(从属于格式塔理论)

 

现实中的应用

图片

在服装店中,衣服按照类型被分到不同的架子上来展示,即使对这家服装店一无所知,顾客也会将一个货架内的商品关联成相似的东西。

 

设计应用

图片

▲ 过滤器被封闭在产品页面之外的单独区域中,因此可以清楚地识别左右两部分的差异。

 

4、雅各布定律

图片

用户将大部分时间花在别人家的网站(产品)上,而不是你的。这意味着他们希望你的网站(产品)跟别人的有相同的使用方式。

 

现实中的应用

图片

假设家中的阳台是一扇推拉门,我们可能希望酒店的阳台门也以同样的方式操作。因此如果酒店有一个滑动门,我们可能会下意识地先去推门。

 

设计应用

图片

▲ 以上是国外知名的电商网站导航栏设计,这几个网站导航栏中显示的信息及其结构都非常相似:左侧是品牌标志,中间为搜索栏,右侧为其他选项(购物车/个人账户)。

 

5、系列位置效应

图片

用户更容易记住系列中出现的第一项(首因效应)和最后一项(近因效应)。

 

现实中的应用

图片

我们通常更容易记住某个电话号码的前4位或后3位,这条法则也是银行卡号被分成4组数字的原因。

 

设计应用

图片

▲ 在亚马逊主页上,网站的第一部分总是显示最重要的内容:导航包含logo、搜索和其他重要功能;轮播图通过图形设计吸引用户的目光,引导新的交易或优惠。

 

6、冯·雷斯托夫效应

图片

又称隔离效应。当存在多个相似物体时,与众不同的物体最容易被记住。

 

现实中的应用

图片

在商场购物时,相较于普通装饰的门店,我们更有可能记住或将注意力转移到具有霓虹灯效果的门店上。

 

设计应用

图片

▲ App上有新消息时,会在图标上用红点显示,这样的提示更清晰和突出,从而吸引用户的注意力,引导用户点击并查看消息。

 

7、审美可用性效应

图片

用户通常认为漂亮的设计更易用。

 

现实中的应用

图片

当参观汽车展厅时,我们通常会对汽车精美的展示感到惊叹,并立即对这个品牌产生积极的印象。

 

设计应用

图片

▲ 在爱彼迎上,我们住在陌生人的房子里,因此建立双方的信任是必要的。当访问像爱彼迎这样干净简洁的网站时,我们会下意识地信任这个产品,也确保了用户对品牌的信任。

 

8、峰终定律

图片

人们评论体验优劣,大多基于峰值和结束时的感受,而不是所有环节的平均值。

 

现实中的应用

图片

在足球比赛中,整场的观看体验将根据比赛结束(谁获胜)和比赛高潮(谁进球最多/比赛中最激动人心的时刻)来判断。

 

设计应用

图片

▲ 在夜晚非常饥饿的时候,我们使用订餐App选择食物时,却被告知付款失败。这时候App界面设计的再好看也无关紧要,订餐失败就是从这次体验中收获的结果。

 

参考:uxplanet.org/laws-of-ux-outside-the-screens-d44298c85d94

 

原文地址:Clip设计夹(公众号)

作者:Clippp

转载请注明:学UI网》用户体验设计法则应该怎么用?来看看这些应用原理!

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png


文章来源:csdn

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


掌握这几点轻松应对扁平人物插画!

seo达人


图片

01.流畅的线条

第一步肯定离不开线,国内外大神的优秀扁平人物插画可能风格不同,但一定离不开流畅的线条。对于人体和物品的轮廓一定要进行高度概括,最后凝结成流畅简练的线条。当然说起来容易做起来难,对于人物姿态的概括能力还是需要大量的临摹练习和对于钢笔工具的熟练运用!但是当你有意识的注意这方面的练习,提升也就很快了。

图片

图片

图片

图片

图片

图片

图片

q

02.简化的造型

不仅线条简约流畅、造型也要贴近简单的几何图形。这样不仅操作起来快速省时,几何图形也让画面更有张力,更富美感。

图片

图片

图片

图片

图片

图片

1

03.夸张的比例

这类插画中很多大神都会特意去放大或缩小人物身体的某个部分的比例,常见的有身体拉长或放大、头部缩小,这种适当的比例夸张反而使整体更具有个人特色和风格。

图片

图片

图片

图片

图片

3

04.大面积色块

大面积的色块运用可以很快抓住人们的眼球。有了前面说到的几何形态的造型,不管是鲜艳明快的撞色还是统一协调的色彩搭配都可以很好的融合。

图片

图片

图片

图片

图片

 

原文地址:设计师深海(公众号)

作者:设计师深海

 

转载请注明:学UI网 » 掌握这几点轻松应对扁平人物插画!

UI设计细节系列② | 让设计细节更高级的12个实用小技巧

seo达人



在这篇文章中,我整理了一些小的设计技巧,来帮助你快速改进自己的设计。有时只需要一些小的调整,就能快速提高设计的品质。

 

1. 使用全小写英文让画面更有气质

图片

图片上使用较粗的字体或开头大写有时候会显得过于正式。尝试在某些界面上使用小写或者比较细的字体,让画面看起来更加有气质。

 

2.使用粗细、大小和颜色来表达内容主次关系

图片

设计文字内容时,没办法时时告诉用户哪个内容信息是主要的哪个是次要的,但可以通过调整字体粗细、大小、颜色,让我用户一眼就能分辨内容主次关系,避免阅读中出现任何混乱。(彩云注:要对比就要足够强,不要模棱两可。)

 

3.深色背景应加粗文字

图片

在浅色背景使用深色文本时,有时可以选择较轻的字体粗细。但如果在深色背景使用浅色文字时,最好考虑把字体粗细稍微加粗一点,特别是长文本段落内容的,以提高文本的最佳可读性,避免使用户视觉疲劳。

 

4.选择能正确气质的字体

图片

试着为呈现的内容选择合适的字体。用户是精明的,并且对内容气质会有直观感受。所以选择合适的字体很关键,能让用户获得对应气质的阅读体验。(彩云注:上图中的区别在于,左边的字体偏古典,而插画偏现代,所以右边就会更合适一些)

 

5.界面中的字体最好控制在2种以内

图片

对于我来说,设计最好选择一种类型的字体。但如果项目需要,最好控制在两种字体以内,不要太多。对于没有经验设计师来说,页面使用多种字体视觉是很难把控的。所以建议最多使用2种字体类型,然后改变字体的粗细,大小,颜色,这样的设计会看起来更加统一协调。

 

6.字体全大写时,注意拉大字体间距

图片

使用全大写的文字时,只要稍微拉大下字母间的间距,就能使字母间更加容易区分,单词更加容易阅读,提高用户的可阅读性,还能使大写字体视觉上更加美观。

 

7.设计元素风格保持一致性

图片

无论是网站或APP设计都应该保持一致性,这也是设计的最基本的原则。比如布局、图标、颜色和按钮都要始终保持一致,减少用户混淆,提高用户体验。(彩云注:同一个界面中的元素样式应保持一致)

 

8.设计适当增大留白

图片

设计界面适当使用留白不仅让界面看起来更加有空间感,主次分明,还能给人一种明朗、简洁的心理感受。想让设计视觉更加集中,有呼吸感,适当留白则是改进页面视觉最简单的方法之一。

 

9.设计开头段落样式,吸引用户

图片

如果你处理的是长篇内容,比如博客文章,那么将读者吸引到内容中是很重要的。为了达到这个目的,开篇段落的外观和内容本身一样重要。可以简单调整下,如调整字体大小,行高,粗细和颜色,都可以改善第一印象。

 

10.长文本使用短段落设计

图片

在处理长篇内容时,尽量保持段落简短有力,清晰呈现。确保用户在短时间内快速阅读内容信息。(彩云注:人的耐心很有限,尽量把长段落拆分,我自己写公众号文章时也会这样做,我给自己规定一个段落最长不超过5行,并一直执行这个标准。)

 

11.定好主色调,并在设计中保持一致性

图片

怎样让用户界面看起来更专业?那就是从一开始就定义好主色调,并在整个设计中始终保持一致性。如果界面随机使用大量的颜色来设计,视觉效果只会让用户看起来很乱,分不清主次。

 

12.当使用8点网格系统时,图标布局要一致

图片

当使用图标和 8pt 网格系统 时,你会发现大多数构建良好的图标集的图标都位于8的倍数框架内(即 16×16、24×24、32×32 等)。但在设计中我们常常很容易忽略这一原则。若想让你的设计图标在布局中保持一致性,最好确保你设计的任何图标都在8的倍数框内。

 

本文翻译已获得作者的正式授权(授权截图如下)

图片

 

原文地址:medium

作者:Marc Andrew

译文地址:彩云译设计(公众号)

译者:彩云Sky


转载请注明:学UI网》UI设计细节系列② | 让设计细节更高级的12个实用小技巧

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png


文章来源:csdn

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


设计要知道-HMI设计必看!车载中控的前世今生

seo达人


首先先普及下HMI的概念

HMI:- Human Machine Interface : 人机界面,现在多指车载交互系统体验设计。

既然说到人机界面,我们先来设计的载体是如何演变的。

 

一、车载中控仪表盘演变过程

1886 年,由卡尔·本茨发明的第一辆汽车。当时根本就没有所谓的仪表盘概念,所以载体还得从1908年T型车(Ford Model T)说起,到2012年划时代的特斯拉Model S,汽车仪表盘目前经历四代。

 

1、第一代:以按键为主

机械式仪表盘: 第一个时代仪表盘为机械芯仪表,一般包含了车速里程表、转速表、机油压力表、水温表、燃油表、充电表等,之后汽车仪表还需要装稳压器来稳定仪表电源的电压,抑制波动幅度,保证汽车仪表的准确性。初代的汽车仪表盘主要以传统的热式和动磁式,显示的信息极为有限,更多的是车辆物理信息“通信员”的角色。

在机械时期中控台哪有什么屏幕可言,那时候的中控台就是收音机和空调的调节器,而且都是实体按键的,只能满足驾驶的基本需求,没有屏幕,都是照搬飞机中控布局,以实体按键为主,功能简陋单一。堆砌功能按钮仪表,没有交互可言。

 

2、第二代:电气式仪表盘+小中控屏

第二个时代的电气式仪表盘终于诞生,从真空荧光显示屏(VFD),发展到采用液晶显示屏(LED)及小尺寸薄膜晶体管显示器(TFT),显示屏显示的信息越来越清晰、快捷。目前电气式仪表在市场的保有量最大,且一般采用机械仪表结合数字仪表的方式,例如车速、转速信息采用指针,指示灯信息采用LED等点亮,其它信息则采用TFT屏。

虽然相较于第一代机械机芯仪表增加了不少功能,汽车信息反馈也更全面更及时,但是其发展速度却明显与汽车行业不相匹配,对于更深层次的驾驶需求,电气式仪表仍无法满足。

 

3、第三代:全数字化仪表

汽车仪表盘领域在不断追求更新,于是划时代的全数字液晶仪表盘孕育而生,也是就我们常说的虚拟仪表盘。全数字汽车仪表盘使用了一整块液晶屏取代了传统的指针和刻度表,所有信息都通过这块屏幕显示出来。

单从外观上来看就能给人以一种比较高大上的感觉,这类仪表盘上往往没有指针等部件,所有信息都通过屏幕传递出来。功能更强大、信息显示更具逻辑性,驾驶者接受信息更快,提升行车安全。也可以根据个人喜好调整相应参数,比如比亚迪的仪表盘就可以改变背景颜色。在高级点的,像宝马的全数字仪表就可以切换N多种模式。

2007年iPhone问世后,大屏、轻薄机身、高清显示屏、可安装应用等功能引领了整个行业的革命。电动汽车行业飞速发展,智能AI和人际互联等人车交互概念也跟着兴起,对于中控台的需求和功能复杂度也跟着越发精细起来,结果就是屏幕越来越大。

2013年上市的特斯拉Model S,座舱里最惊艳的就是那块17寸的大屏。超高的分辨率和流畅的操作,和漂亮的UI设计,最初让很多美国民众疯狂。就像苹果手机颠覆了传统手机业,特斯拉也颠覆了传统汽车行业。

2014年换代的奔驰S级将两块12.3寸屏幕连在一起,合成了一块23寸大屏,比特斯拉的大屏还多出6英寸。

拜腾M-Byte,48寸巨屏,横向贯穿仪表台,再一次颠覆汽车的内饰设计。

比亚迪系列汽车的旋转大屏,玩出新花样,可以旋转控制,就像手机横屏和竖屏的场景。

纵观下来,其实不难看出,虽然汽车的中控屏幕也是往着越来越大的方向发展,但因为空间以及功能需求的不同,相比起手机来说,中控屏幕的变化更具备多样性。

 

4、第四代:HUD显示屏

从上世纪80年代,抬头显示技术在汽车领域已经开始被使用,直到现在才开始逐渐展露头脚。

HUD抬头显示器(Head Up Display),又叫平视显示系统。它可以把重要的信息,映射在风窗玻璃上的全息半镜上,使驾驶员不必低头,就能看清重要的信息。

战斗机是率先应用HUD抬头显示器的。飞行员在空战中,需要交替观察舱外目标和舱内仪表,易产生瞬间视觉中断,因此会导致反应迟缓、操作失误,并有可能贻误战机,采用HUD抬头显示可克服这一缺点。

第一架使用HUD抬头显示的飞机是美国海军的A-5舰载机。民用航空最早使用HUD抬头显示是法国达索飞机公司的mercure飞机。

在复杂多变的道路上开车,驾驶员双眼离开车辆前方,是个非常危险的事情,尤其是在高速公路上更是明显。于是很多车型,就给车辆配备了一个不需要挪开视线,就能知道车辆基本信息的配置,这就是HUD抬头显示。

HUD作为一款新技术,优势显而易见。当驾驶员需要查看仪表盘或中控台上的信息,视线至少需要转移0.3秒,而HUD投影的信息就在驾驶员平视的正前方,驾驶员可以将更多的注意力放在路面上。将驾驶体验及驾驶员对于路况信息的认知能力进行革新式升级。

 

二、六大车载系统的特点

现在各家系统百家争鸣,各家车载系统设计有哪些不同?

1. 阿里 斑马智行

简介:

1、阿里车载小程序是一种无需下载安装即可使用的“应用”,旨在为用户打造“随时可用”、“用完即走”的使用体验。

2、AliOS作为互联网汽车操作系统,原生地支持阿里小程序,引入阿里生态服务的同时也面向开发者开放,围绕车场景为用户提供从出行到生活的各类智慧服务。

 

特点:

1、设计特点:

独立的大卡片式的内容界面模块方便车主在行车过程中单手操作,其配色鲜艳,风格扁平,符合使用场景和国人的使用习惯。

2、功能特点:自带场景智能感知的基因。

得到车主授权后,车载小程序可以围绕行车场景,实现上车前、行车中、下车后自然串联的智能化场景服务。

用户可以在车上通过触控、语音、手势等多模态交互方式,咨询附近的推荐餐厅,小程序会基于用户的喜好作出推荐,还可以预约排号;到达餐厅附近,系统会自动唤醒小程序,为用户找到停车场;下车后,车载小程序会无缝连接到手机小程序端,用户可以在手机上查看餐厅的预约信息等。

△ 斑马智行2.0系统设计

斑马智行,采用智能手机界面和应用商城下载 APP 的使用方式,实现车载和手机的双重控制。

强大的云端特性在语音识别和线上互联方面提供了良好的使用体验,车主可以连接手机蓝牙后,读取其手机通讯录,实现利用车载系统拨打和接听电话的功能。支持 USB 接口,通过 U 盘实现播放音频、视频文件等。在娱乐生活方面,内置虾米音乐,蜻蜓FM,喜马拉雅等,支持在线搜索,在线播放以及在线广播等服务。

同时,斑马智行依靠阿里强大的技术和资源支持,打通停车场,加油站,高速公路支付等,使用户驾车时产生的费用均能通过支付宝支付。

 

2. 百度 Car Life和Apollo

简介:

1、打造智能车载服务生态,满足用户出行、娱乐、生活等多元化需求,构建人-车-家一体化互联闭环成为时代趋势。

2、智能小程序,是百度提供的一种技术解决方案。开发者基于此开发出来的服务,在各类宿主环境(手机 App、车载系统、IOT 设备等)中,可做到用户无感知安装,即点即用。

 

特点:

1、设计特点

车载端主界面分别采用蓝、绿、红、灰四个色块对应四个功能模块,「发现」集成音乐、娱乐、听书、电台等特色音视频服务,采用红色在界面中最为突出,其设计风格整体扁平,面性 icon 利于识别与点击。

2、功能特点

智能小程序包括“车后服务”、“资讯”、“休闲游戏”、“视频”、“购物”、“亲子”、“旅游”、“工具”等8个类别,一共80多款。车企可以根据车型定位和自身需求自行定义和组合可供使用的车载小程序。

百度的车载小程序大部分场景下还是只能依靠用户用语音唤醒,但在生态的开放性上,百度车载小程序则做得更为彻底,可以在百度App、百度地图、百度贴吧、百度网盘百度系App上运行。

 

3. 腾讯 Ai in Car

简介:

1、“腾讯小场景”是专为出行场景打造的车载轻应用生态,部署在云端,不需要下载,即用即走,并支持语音交互。

2、分为3类,出行服务小型车、生活服务小程序和视听服务小程序。

 

特点:

1、设计特点:

运用的FutureLink3.0系统,FutureLink3.0 基于安卓平台开发,在 12 英寸的中控屏幕上并没有将大量的图标堆砌在首页,反而以地图为背景,将六大功能模块以大板块的形式布局在地图下方,整个界面设计简洁。

2、功能特点:

最大特色:基于位置和场景会被自动唤醒。比如用户经过加油站、停车场、旅游景点的时候,有些购买和支付的服务就会主动弹在车机上,用户再通过语音完成操作。

手机小程序是“人找服务”,那么腾讯车载小程序则进化成“服务找人”。

△ 腾讯在车载场景下的生态布局

Ai in Car,顾名思义,基于 AI 的连接能力和生态,融合腾讯内容生态的优质资源,包括资讯、视频、IP、文学等板块,为车主提供更丰富的内容消费。风行搭载的 FutureLink3.0 车联网系统,就是和腾讯深度合作而诞生的优质案例。

△ FutureLink3.0系统界面

只在设置页中,才会出现二级子菜单列表,而且提供的设置项目也不多,界面层级简单,不累赘,也给司机带来轻松愉悦的操作体验。同时,基于行车安全考虑,在类似天气、股票等查询功能上,比较依赖语音控制。在娱乐生活方面,打通手机和车机账号,用户无需切换账号就可以与车载导航、电台、QQ音乐、微信等功能无缝衔接,支持车主组建聊天组,在行车途中与好友进行实时沟通。

从整体来看 FutureLink3.0 的设计,它更像是一个把需求页面展现在车主面前的「轻应用」,没有传统概念上的主界面、多层交互菜单以及相应的「系统特质」的设计,它更希望把海量资源建立在云端,终端只给车主呈现其所需要的服务即可。

 

4. 谷歌 Android auto

简介:

Android Auto 系统的工作原理是将手机连接到兼容的汽车,让驾驶员可以使用汽车屏幕和语音操作与手机的应用程序进行交互。它提供了一种导航、收听媒体和消息等的简单方法。

 

特点:

1、设计特点:

在 UI 框架设计方面,主屏幕以卡片的形式显示通知、活动、导航和消息,右下角有启动语音命令的麦克风图标和底部的活动栏,这些特性属于全局 UI。在它下方,应用程序内容区域显示应用程序启动器或当前使用的主应用程序的内容。

△ Android auto手持设备与车载设计系统

Android auto 将 Android 平台扩展到汽车上,它有两种使用方法:在手机上或在兼容的车载屏幕上。

它有一个简单的界面,标准化的用户交互模型和强大的声音动作,其目的是帮助司机尽量减少分心。需要注意的是,为汽车设计交互式应用程序与手持式设备的设计有根本上的不同,其应用程序的交互界面应该简化,以确保司机的眼睛和手集中在开车上,减少司机分心。

△ Android auto车载系统UI框架

卡片上提供如消息字符串、图标、图形和操作等内容,会根据用户最近的使用情况和优先级来确定卡片的大小。主屏幕会限制卡片的数量,以保持列表的简短和相关。因此,当新的、更相关的内容出现时,应用程序的通知可能会从屏幕上消失。同时,抽屉式的交互方式,提供了简单的操作和导航。每个抽屉项目必须提供一个单一的触摸目标,避免在抽屉里放长的列表,或者在相同内容的视图之间切换。这里官方给出的最佳 UI 做法是简化内容,关注上下文,显示新鲜的、有用的和大多数不滚动的项目,使用单行,对决策至关重要的较长字符串使用两行。

 

5. 苹果 CarPlay

简介:

CarPlay 车载系统旨在令用户通过汽车制造商之原生车载系统来使用、操控iOS设备并发挥其功能。该产品的首个版本计划于2014年发布,最早出现在一些制造商的汽车展览上。

 

特点:

1、设计特点:

基于手机映射,所以界面除了横向布局外,icon都和手机端统一。以简洁的布局提供有用的、重点突出的信息,便于从驾驶员座椅上进行扫描。不要用不必要的细节和不必要的装饰来弄乱屏幕。

在整个应用程序中保持整体一致的外观。一般来说,具有相似功能的元素应该看起来相似。

 

2、功能特点:

作为车内辅助、操作、娱乐的中心,Carplay 可以直接连接到汽车中控的触摸屏上,提供基于 iOS 的相关的服务和应用。Carplay 的整体设计围绕着车内驾驶这一使用场景,而它的设计原则也围绕着这一场景来规划:

  • 成熟。基于最熟悉的 iOS 应用,来设计界面元素,并提供熟悉、直观的体验。
  • 简短。采用尽可能简短的交互,不过度引人瞩目
  • 相关。屏幕显示信息高度相关,提供尽可能少选项,不需要复杂决策
  • 语音。基于Siri,以语音交互为核心,司机无需视线离开前方,手也不用离开方向盘即可完成交互。

全新的电子车钥匙,加上 Apple CarPlay 车载流畅的使用体验,让 iPhone 能在旅途上发挥更多作用。地图、电话、信息、音乐、日历、一言、一触、一旋随你驾驭。

 

6、华为车机应用

简介:

HMS for Car是华为终端云服务打造的智慧车载云服务解决方案,基于HMS(Huawei Mobile Services),通过AI场景引擎结合华为生态资源,为用户提供精准丰富的出行场景内容和服务,助力汽车从交通工具向具有交互和服务的能力的智能终端进化。

华为快应用是一种基于行业标准开发的新型免安装应用,其标准由主流手机厂商组成的快应用联盟联合制定。开发者开发一次即可将应用分发到所有支持行业标准的手机运行。

HMS Core提供端、云开放能力,帮助开发者实现应用高效开发、快速增长、商业变现,使能开发者创新,为全球用户提供精品内容、服务及体验。

1、全球化分发。已上线超过170+国家和地区。

2、全终端接入。全面支持从小屏幕到大屏幕各种智能终端。

3、全场景支持。快应用直达链接和卡片嵌入全终端场景。

 

特点:

1、设计特点:

在交互界面上,Carplay和Carlife由于使用的投屏方式,主界面依然是一个个的APP图标,需要点击启动进入后才能使用。笔者认为采用这样移动端过于笨重的交互方式并不适用于车载场景;HUAWEI HiCar的设计理念是”安全便捷、自然舒适、智能贴心“, 对车载端的人机交互要素重新布局规划设计,采用桌面卡片的设计方式,以满足复杂驾驶状态下的使用需求。

桌面卡片是应用内容和功能特性的重要载体,用户通过对卡片的快捷操作直达应用的核心功能,提升交互的便捷性。应用可通过接入 HUAWEI HiCar 桌面卡片的方式呈现最核心的功能和服务,并根据自身的需求特性,自行组合卡片元素以满足不同场景下的用户诉求。

  • 背板:背板样式可以为色彩填充或设置背景图。背景色支持黑、白、彩色三套。应用需提供三套背板以适配卡片主题切换。
  • 品宣区:品宣样式为图标+文字,应用可根据在此区域显示品牌图标和名称。
  • 内容区:展示与应用场景相关的信息,其内容可以是图片、文本或图文样式。
  • 操作区:操作区为文字或图片按键,最多 3 个控件或 1 个控件组。

 

2、功能特点:

华为智慧助手,可结合用户使用场景,以卡片形式推送提醒、服务和行程,实现智慧化服务找人。例如,送孩子上学时,车机端华为智慧助手将自动推送”有声续播”卡片,用户点击卡片,即可一键续播孩子在华为手机上没听完的有声儿童内容;用户在开车下班回家路上,进入离家500米范围内时,车机系统可自动启动”回家模式”,提前打开家中的窗帘、空调等设备,方便用户享受惬意生活。

My Car功能面向车企开放华为手机等智能硬件系统级入口能力,能够实现远程控车、查车、汽车服务/告警关键信息等反向推送能力。远程控车功能,可以满足用户高频控车诉求,例如,远程开关空调、寻车、查看门窗状态等。另外,当车辆胎压不足、门窗未关闭时,用户也能通过手机、车机及时收到提醒。

 

三、系统的开源地址

1、阿里Alios开放平台

https://miniapp.alios.cn/index#/document

2、百度车载生态开放平台

https://chelianwang.baidu.com/homepage/openPlateform/design/sec-4-1.html

3、腾讯-车载小场景(私我领取PDF)

4、谷歌驾驶

https://developers.google.com/cars/design/design-foundations

5、苹果apple car play

iOS – CarPlay 车载

6、华为车机三方应用交互设计规范

https://developer.huawei.com/consumer/cn/doc/50902#h2-1587181522014

 

参考来源:

你真的了解车载显示屏吗?一文读懂汽车中控屏幕发展历史

http://www.woshipm.com/ucd/896089.html

https://www.qctt.cn/index/news/show/id/573724

http://mp.ofweek.com/instrument/a045683023236

https://www.zcool.com.cn/article/ZMTI3MzQ1Mg==.html

 

原文地址:站酷

作者:郝小七

转载请注明:学UI网》设计要知道-HMI设计必看!车载中控的前世今生

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png


文章来源:csdn

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


日历

链接

个人资料

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

存档