首页

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

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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


B端设计师如何快速了解业务

seo达人


1.查阅报告“知”行业

如果是之前从未接触的新业务,我们可以通过市面上的行业报告,来对其有一个宏观的认知,因为在行业报告中,会提到 SaaS 产品相关行业的发展状态政策导向以及未来的发展趋势。

比如在 艾瑞网的 《2020年中国企业级 SaaS 行业研究报告》 当中,通过报告你能了解到 SaaS 行业究竟是为何进行快速的发展,并且在未来几年的发展趋势,并且通过报告,能够构建起你对整个行业的宏观认知。甚至找到行业当中的头部产品,同时能够对其进行体验。(当然如果没找到,可以使用我们的B端竞品书签~)

图片

行业报告相关网站:

艾瑞:http://report.iresearch.cn/

易观:https://www.analysys.cn/

 

2.通过竞品“学”词汇

专业词汇它是B端设计师的一个门槛,在实际工作沟通当中都需要通过专业词汇来进行准确的描述。比如在CRM产品当中,我们必须要了解:公海池、商机、线索、跟进记录 等一些基本词汇,而词汇的背后往往是一个较为庞大的功能,又或者是产品当中的深层逻辑。

其实这就如同我们学习英语一样,只有先学习“单词” 才会有后面的“短语以及语法”,而行业当中,其实是有类似的“英语词典”来帮助我们进行学习。

还是以CRM为例,行业当中较为头部的竞品为:纷享销客、销售易

通过竞品的官网、产品内部,我们可以寻找到“用户手册、帮助中心”等模块,这里面就会有相应的专业词汇的讲解,我们可以通过 竞品的产品对其用户的解释,也让我们作为用户,对于该模块会有更深的理解。

图片

你可以自己学者找找,找不到我这里也提供了网站链接

纷享销客帮助文档:https://www.fxiaoke.com/ap/datacenter/

销售易帮助文档:https://www.xiaoshouyi.com/service/help

 

3.销售客服“理”流程

业务流程往往是一件复杂的事情,因为不同的产品其流程的侧重点也会不尽相同。但可以利用官网去了解该产品更擅长哪方面的功能模块(在对B端产品的官网设计当中,都会突出强调产品的特点,进而提升转化)。比如在纷享销客与销售易的官网首页当中,产品模块都有着这样的一些不同点:

图片

对于这些不同点,我们可以利用B端产品功能演示的形式,来让经验丰富的销售人员来进行解答。

比如在面对销售易的销售人员时,我们可以问:“我对比过你和纷享销客的产品功能,你们的销售云和纷享销客的销售管理在流程上有什么区别,有哪些特点呢?”

而我们可以通过销售人员的解答,清晰的了解到两者之间的差别,以便于为我们在之后接到类似需求时有所帮助。

当然一定要在销售人员演示结束后说上感谢,因为“利用”别人本身不太好。

 

4.试用产品“看”结构

试用往往是在真实的环境下对该产品进行体验,试用可能是销售人员给到你相应的体验测试账号,也有可能是让你注册一个测试环境。但要记住并不是所有的系统都有试用的功能,有些产品你需要通过“间接”的方式才能体验(间接指的是通过 企业微信、钉钉、飞书 这样的平台注册团队 登录获得产品的体验环境)

我见过很多设计师试用产品就是一味的点点点,像个无头苍蝇。

设计师应该根据上一步销售人员演示的流程进行相应的页面梳理,通过截图将该产品的主流程进行截图。最终将页面流程静态的还原到设计图上,这样做有两点好处:

  • 1.在时候遇到同类型需求时,能够快速了解竞品的功能设计思路
  • 2.帮助我们在产品的后续更新迭代,有了可以参考的版本

 

结语

通过以上四个步骤,基本能够对一个B端新业务有所认知,希望能够对你有所帮助。

 

原文链接:CE青年(公众号)

作者:CE青年

转载请注明:学UI网》B端设计师如何快速了解业务

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

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


文章来源:csdn

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

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




学好这个方法,可以解决80%的Logo设计

seo达人



设计logo你用过最多的手法是哪一种?加法是logo图形设计中最主流的设计方法,即把两个或两个以上的图形元素,结合成一个全新的图形,每个做过logo的设计师应该都用过这个方法。

 

前不久,一个朋友发了他公司新设计的logo给我看,问我怎么样?他的公司叫达志文化,主要经营与教育相关的业务,他发来的Logo长这样:

好不好我就不评价了,我想说的是,logo设计中的加法并不是简单地把几个元素相加就可以了,讲究的地方其实有很多,葱爷分享几点自己的经验。
1

 一、有哪些比较主流的加法?

01.品牌名首字母相加

可以是大写字母相加、也可以是小写字母相加,关键看哪一种形态更容易结合出高质量的图形,结合的方式常用的有:

①叠加,比如L V、圣罗兰的Logo。

 

 

②共用笔画,比如服装品牌UR。

 

以及陈幼坚最近为香港公开大学设计的Logo也是这种做法。

 

 

③融合,比如交通银行的Logo把首字母c做字母b的负形。

 

比如李宁的Logo首用字母L和N融合成一个类似红旗飘扬的图形。

 

④创意组合,比如LG的Logo用L和G组合成一个笑脸。

 

 

大众汽车的Logo用V和W组合成类似三个胜利手势的图形。

 

02.品牌名的简称相加

这种做法适合比较简洁的文字,且通常为两个字相加,加法的组合形式与字母相加差不多,比如北京大学的Logo是用“北大”二字组合而成。

 

我在大学期间为北部湾艺术研究院设计的Logo,则是用“北”字和“艺”字融合而成的。

 

 

03.品牌名首字母加代表行业属性的元素

使用这种做法的品牌非常多,比如抖音的Logo是用小写字母d加音符图形融合而成的。

 

 

饿了么的Logo是用小写字母e加吃豆人的图形融合而成的。

 

 

04.品牌名“首字”或关键字加代表行业属性的元素

比较典型的代表案例是中国银行和工商银行的Logo,分别用“中”字与“工”字加铜钱图形结合而成。

 

 

再比如中国南方电网的logo,是用“电”字结合电线、电线杆而成。

 

 

05.品牌名中提到的元素加代表行业属性的元素

比如西瓜视频的Logo是用西瓜图形结合视频符号设计出来的。

 

 

贝壳找房的Logo是用贝壳图形结合房屋图形得来了的。

 

06.代表行业属性的元素相加

比如网易云音乐的logo是用音符图形加上唱片图形。

 

比如葱爷以前为一个饰品品牌设计的logo,是用四叶草图形与星光图形结合。

 

 

二、用加法设计Logo有哪些讲究?

01.美观

logo设计的最基本条件是要美观,因为这个符号代表了一个企业、一个品牌的形象和精神面貌。另外,这个符号以后还会出现在品牌对内对外的绝大部分物料、媒体上,如果logo不好看,就会影响到所有的其他设计。

 

如何让自己设计的logo图形好看呢?提升自己的审美当然是最重要的,比如每天都要看一些优秀的logo设计作品,还可以多看一些图形、图案作品等等,当然这是一个需要慢慢积累的过程。

而想快速知道自己设计logo好看不好看,你可以把自己的logo与众多优秀的logo放在一起,如果自己的logo明显不“合群”,那多半是你的logo设计不够好看、不够专业,那么你就要继续尝试其他的图形组合方式,或者是优化一些影响图形美观的细节,比如线条、轮廓、配色等。

例如几年前我给一个叫“音眸”的服装品牌设计了一个logo,也是用了加法,我用品牌名相关的两个元素:高音符号和眼睛做结合,刚开始是这么结合的:

 

 

但感觉造型不是很美观,于是我又进行了其他尝试:

 

这种结合方式感觉更好一些,但图形的比例以及线条的细节不到位,所以我又继续做了优化,从而得到了最终的方案:

 02.要具有行业属性

例如文章开头列举的达志文化logo,就只是用字母“D”和“Z”做了简单的相加,这样的图形凭什么说他是达志文化的logo呢?任何一个品牌字母是D和Z开头的品牌都可以这么做。

所以,设计出来的新图形一定要具有该行业的气质和特点,例如李宁旧的Logo是由其品牌首字母L和N组合而成的,且组合出来的图形很有动感、很简洁,这就贴合了运动品牌的属性,而不是直接用两个简单的字母加在一起就完事了。

 

如果logo图形只是用字母或文字简单组合而成,那么这些文字的字体则一定要与该行业的气质相符,比如LV的logo是由品牌首字母的简单相加,并没其他深刻的含义,但由于其使用的罗马体具有优雅、高端、经典等特质,以及图形也还算好看、独特,所以它们的logo总的来说还是符合行业属性的。

 

还有一种处理方式是,除了文字以外可以再融入一个能体现该品牌行业性质的元素,比如LG的logo是用品牌首字母L和G组合成了一个笑脸图案,寓意热情服务、客户至上,这就让这个Logo有了内涵。

 

我设计的北部湾艺术研究院logo图形,刚开始的方案是这样的:

 

虽然也是把“北”字与“艺”字完美的结合起来的,但是该图形在气质上与艺术学院并没什么联系,所以后来我在此基础上加上了传统的回形纹,传统艺术的感觉就加强了。

 

03.可识别

图形中融合的几个主要元素最好能清晰、易识别,而不是只有设计师自己能看出来。有些设计师为了让logo图的寓意尽量丰富,把五六个图形融入其中,结果是别人一个都看不出来,这就很没必要,因为一个图形融合的元素太多很容易做成“四不像”,而且logo设计并不是寓意越多就越好,如果寓意足够准确、可识别性足够高,那么一两个足以,否则就算再多也是徒劳。

比如中国银行的Logo图形,“中”字代表中国,铜钱代表银行,简单易懂、易识别。

 

再比如耐克的logo图形就是一把勾。

 

前段时间长隆要我们帮设计一款“奇妙动物直播间”的logo,我也是使用了加法,创意是用动物掌印结合视频播放符号,刚开始的方案是这样:

 

为了照顾完整的圆形外轮廓,我把整个掌印图形都所在圆内,但这样做就导致了,三角图形没有在圆形的正中央,于是弱化了视频播放符号的识别性,所以后来我把整个掌印图形向右移动冲出了圆圈,这么做不仅加强了识别性,而且使整个图形变得更特别。

 

 

加法可以让logo图形的设计有理可依、有迹可循,可以增加logo设计的合理性,所以很受设计师和客户的青睐,但加法只是手段而不是目的,所以,在使用加法的时候也千万别忘了logo设计的一些原则性问题,比如:美观性、简约性、相关性、原创性等。

 

原文地址:站酷 

作者:葱爷

 转载请注明:学UI网》学好这个方法,可以解决80%的Logo设计

日历

链接

个人资料

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

存档