想做好车载设计?先掌握这份Carplay设计规范

传统的汽车中控系统,大多是相对固定的硬件组合到一起,共同构成中心的控制台,控制着包括导航、收音机、播放器、空调等在内的各种功能。一直到2000年前后,汽车的中控台都一直以这样相对固定的物理按钮和旋钮来搭建,用户也可以通过官方或者第三方服务,来升级功能,比如将磁带播放器升级为CD播放器乃至于内嵌电视功能等等。

随着移动端技术的发展,iOS和Android等智能软件系统的完善和提升,汽车的中控系统也不再受限于固化的硬件功能。平台化的软件体系让中控系统有了更多的可能性,影音娱乐开始更加丰富,而已然完善的移动端触摸式交互生态,则为汽车中控以屏幕替代物理按钮打下基础,各类原本存在于手机电脑的新型的APP、功能、服务也逐渐出现在汽车中控系统上,而特斯拉更是一步到位,以一块巨大的触摸屏彻底革新了中控的交互体验,OTA升级,有机多样的UI交互,彻底释放开了汽车中控交互体验上的想象力。新的问题出现了,新的方法在迭代,新的趋势也得到了印证。

宝马奔驰保时捷等顶级的汽车厂商大都在中控台的设计上,探索了各自的可能性,国内厂商也毫不示弱,不过其中绝大多数的系统都基于我们熟悉的Android或者是AndroidAuto作为基础来进行定制和优化,而苹果则基于自家iOS生态,在2013年推出了iOSintheCar服务,目前正式名称为Carplay。而目前各大厂商所青睐的AndroidAuto也上在Carplay发布之后所跟进并发布的。

关于Carplay

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

Carplay本身并非完全独立的存在,它本身会和iPhone一起联动,让iPhone成为你的车钥匙和辅助管理系统。

Carplay以苹果自身在移动端交互和用户体验上的深厚积淀,总结和梳理出了一套可供学习和值得参考借鉴的规范。

这些规范对于需要考虑车载使用场景的厂商以及正在布局车载移动端软件或者系统的厂商的设计师而言,都有着相当的参考和学习价值。

Carplay核心原则和功能

Carplay当中会有提供音频内容的APP,诸如Podcasts,网络电台,新闻,音乐,体育节目等等,这些服务和APP将会通过内置的屏幕显示,并且借助最常见的「标签栏+列表」来呈现基本的框架,并且必须包含「播放」界面。尽管这类服务和应用是借由内置的界面框架来呈现,但是依然有值得注意的要点:

↑使用此图标代表明确的、本地的的内容。

↑使用此图标来标识在线的内容,确保用户知道内容来自网络,并且会耗费网络流量。

在进行音频内容播放的时候,Carplay会显示「正在播放」的界面,并且会使用如下界面:

Carplay能够内嵌到不同厂商的车中,自然也可以控制车内的硬件。这一部分的硬件驱动支持通常是由厂商提供,并且借由Carplay内的界面,提供统一的交互体验。

1.3、信息传递和VoIP应用

VoIP也就是基于IP的语音传输功能,而在Carplay中,VoIP应用主要借助Siri服务,并且全由Siri操控,它并不为用户提供直接的交互界面,因此无需专门设计UI界面。

它支持阅读信息和编写/回复消息,不过需要用户授予权限

当你的APP有推送信息未读的时候,通常会在APP的右上角增加一个红色的小红点标识,并且其中会有一个白色数字用来标识未读信息的数量。

对于错误信息,应当妥善处理,并且绝对是要在必要的时候才推送报错信息。

在加载内容的时候,使用黑屏或者静态的界面,可能会让它整体上看起来像是死机了一样,或者可能会导致用户离开。

在Carplay当中,有2种常见的导航模式:

横向导航。通常使用标签栏来进行导航,不同内容横向排布,用户可以快速点击不同标签切换。

分层导航。用户在屏幕上点选不同选项,通往不同的子界面。其中地图应用采用的是这种结构。

音乐类应用可以使用横向导航,也可以使用分层导航,在设计导航的过程中,应当注意:

全面的测试,是确保应用可用性的重要前提。

无论音频是否是你的APP的主要内容呈现形式,你都需要了解用户对于音频有哪些期待,并且尽量去贴合这些需求。

在管理汽车功能的页面当中,厂商提供的功能和数据将会无缝的接入到Carplay当中,比如气候、网络、GPS等等。当数据不可用的时候,尽量提供合理的响应方式。

Carplay是和iPhone连接起来使用的,并且在程序数据上也相互兼容互通,只是Carplay本身提供的是简化之后的UI,并且针对驾驶的场景进行了优化。

支持Carplay的车辆通常会有物理按钮和旋钮,它们可以作为Carplay交互的辅助。当物理按键作为用户的主要交互介质的时候,通常至少会存在一个Siri按钮,导航控件,选择控件,以及后退控件。

下半部分的将会涉及到视觉设计和具体UI控件的设计规范。

3.5、触摸屏交互

用户可以通过内置的触摸屏来与Carplay直接进行交互。高保真屏幕可能会比低保真屏幕,在交互效率上更高,更低延迟,支持更多手势。Carplay的交互基本采用的都是单指交互,具体可以参考下方列表:

在设计交互的时候,尽可能少地使用触摸交互,避免用户在驾驶过程中分心。

3.6、Siri

Siri是Carplay的基本功能,无干扰的语音让用户和程序之间的交互更加自然和安全

即使看不到Carplay的屏幕,依然可以使用方向盘上的语音命令按钮来激活Siri。激活后,Siri会针对语言进行处理和分析,并且转换为可用的指令。

动画可以让屏幕上的元素,拥有一层附加的视觉效果。如果方法得当,动画还能呈现状态,提供反馈,增加用户直接操控时候的感觉,并且告知用户可视化操作的结果。

成功的品牌设计并不只是把LOGO塞到APP当中,出色的APP能够巧妙地使用字体、配色和图像来构建独特的品牌形象。

关于这方面的设计,可以详细参考iOS设计规范中的配色、版式以及图标和图像这三个章节。

在品牌设计上,

Carplay要求设计师:

通常,配色可以提供交互性,提供视觉连贯性,并且对界面赋予生命力。

Carplay支持不同像素密度不同纵横比的显示,但是这也意味着在实际布局设计的时候,要格外小心,尽量让你的设计在不同的屏幕分辨率和长宽比之下,都显得足够正常。

和iOS类似,在Carplay当中,屏幕分辨率也分为1x2x和3x。

每个CarplayAPP都应该有一个显著突出的图标,确保在驾驶的时候可以轻松点击到。

如果你设计的APP当中,需要的图标并不存在于系统图标当中,或者系统图标与你的APP并不匹配,可以自定义图标设计。

系统本身内置了许多小图标,服务于日常各种不同的任务,通常这些小图标会使用在导航栏和标签栏当中,尽可能使用这些内置的图标。

上拉菜单是一种特定的弹出菜单,通常从屏幕底部弹出,并且包含2个以上的选项。不过在Carplay当中应该尽量避免使用上拉菜单,在iPhone上倒是可以使用它,但是不要在Carplay中显示。

在内容加载的过程当中,请勿让屏幕保持静止,或者空白,使用活动指示器确保它看起来没有静止。

警告会用来通知用户一些关键性的信息,警告通常由标题、可选信息以及一个或者多个按钮组成。除此之外,警报的视觉系统是静态的,无法自定义。

警告最小化呈现。由于警告本身会破坏用户体验,所以请在重要的情况下使用警报。

按钮通常可以用来触发一些特定的操作,具有可自定义的背景,并且可以包含标题和图标。和iOS不同,Carplay支持的按钮样式非常有限。

导航一般在屏幕的顶部,通常导航栏右侧会有返回按钮,中央是标题。有时右侧会有其他的可交互的控件。

滚动视图让用户可以浏览到更多的内容,用户可以用滑动或者轻拂来进行浏览信息。

标签栏通常出现在屏幕顶端,并且用户可以借此快速切换。逻辑上标签栏可以包含无限多的Tab,但是可见的标签数量,会根据实际显示尺寸而有所不同。

THE END
1.IOS和Android图标尺寸牛APP说刚开始接触UI的时候,碰到的最多的就是尺寸问题,今天我们就来谈谈IOS和Android 图标设计尺寸吧! 一、IOS篇 1.iOS app图标的圆角半径是多少? (注:现在IOS图标是不需要再画圆角了,直接方形就OK) 比较精确和接近的圆角半径和图标尺寸如下:最右边表示圆角半径 Icon1024.https://www.cnblogs.com/aapps/archive/2004/01/13/6226466.html
2.APP图标设计的尺寸和分辨率/有何标准?在这个手机不离手的时代,APP图标设计无疑成为了每个应用赢得用户首印象的头号战士。作为一名自诩精通互联网技术的文章作者,我自然不能放过为各位揭开APP图标设计中尺寸与分辨率神秘面纱的机会。 首先,标准尺寸是个啥?说白了,就是那些聪明的设计大咖们为了让我们的眼球在看到那些小巧玲珑的APP图标时不至于眼花缭乱而精心...http://www.apppark.cn/t-50962.html
3.app设计尺寸规范有哪些?app设计尺寸规范包括: 1、画布尺寸①IOS系统:画幅720x1280、分辨率72(像素/英寸);②安卓系统:画幅1080x1920、分辨率72(像素/英寸)。 2、单位和度量Units and measurements dpi =屏幕宽度(或高度)像素 / 屏幕宽度(或高度)英寸,dp =(宽度像素 x 160)/ dpi。①xxxhdpi:分辨率2160x3840px,dpi640,像素比4.0,示例...https://zhiq.zhaopin.com/answer/7445546/
1.APP图标尺寸规范一文了解清楚app端logo规范在进行图标设计前,熟知手机 app 图标尺寸规范,能更好地去针对不同平台设计出更极致的图标。当前智能手机系统主要以 iOS 及 Android 为主,APP 图标是产品给用户的第一印象,图标视觉设计的美感与吸引力,与用户是否选择下载这个 APP 应用程序有着直接的联系,一个看起来漂亮、有质感的手机 app 图标,往往更能吸引到用...https://blog.csdn.net/FourxiYuanzi/article/details/130690910
2.ios15图标间距ios图标尺寸设计规范小星星的技术博客APP的名称会显示在主屏幕上的图标下方。不要包含重复的名称,或告诉用户如何使用你的APP的鸡肋文字,例如 “观看”或“播放”。 如果你的设计包含任何文字,请保证它与你的APP提供的实际内容是相关的。 6、不要包含照片,屏幕截图或界面元素 小尺寸的照片很难看到细节。屏幕截图对于APP图标来说过于复杂,通常无法帮助你...https://blog.51cto.com/u_87634/9253365
3.iOSAPP图标icon尺寸规范,收藏篇!功能图标设计规范虽然图标在应用程序APP界面中的占据不大,但对用户体验产生的影响不容小觑。APP图标尺寸设计的效果,通常直接决定着用户的去留问题。APP图标尺寸是用户能直接感知的,优质的iOS APP图标尺寸往往会留住一大批用户。一篇完整且清晰的iOS APP图标尺寸规范,便成为设计师设计优质iOS APP图标的帮手。 http://www.zzfmdn.com/article/1348310
4.app图标设计尺寸规范(ui图标大小规范)知识库主题:app图标设计尺寸规范(ui图标大小规范)图标设计流程 1.定义主题。定义主题是指把要设计的图标所...https://bbs.openke.cn/thread-1333475-1-1.html
5.android手机APP里面的图标设计尺寸是多少?一般来说,安卓手机APP图标的设计尺寸应该在48x48dp、72x72dp或者96x96dp之间。这些尺寸可以保证在不同...https://ask.zol.com.cn/x/22273959.html
6.手机app图标icon设计对于App Store,创建一个1024x1024 像素版本的 watch OS 应用图标。其他特定尺寸自定义应用程序app图标尺寸如下所示,所有大小值都是@2x。 如果你有配套的 iPhone 应用程序,还需要提供以下尺寸的 watch OS 应用程序app图标: 3. app图标icon设计总结 掌握好app图标icon设计有助于我们正确设计图标,并与前端工作人员做...https://pixso.cn/designskills/shoujitubiao/
7.ui设计app图标尺寸规则应用图标在手机屏幕的显示尺寸仅为120*120px,这个尺寸是最重要的设计尺寸。https://www.hxsd.com/wenda/68341/
8.ps制作app图标尺寸,ps制作app图标新闻资讯3. 图标设计:图标是App界面的重要组成部分,可以帮助用户快速识别功能和操作。通过PS的矢量图形和图标制作功能,我们可以设计出独特且易于识别的图标,提高用户的使用效率。 4. 图片处理:合理运用图片可以增强App的吸引力。我们可以使用PS的图片处理功能,例如裁剪、调整亮度和对比度等,来优化图片并提高视觉效果。 https://www.appgongsi.cn/newsinfo.php?id=2124
9.App的页面尺寸及各个icon的尺寸大小陈鹤元工作中,很多产品经理画图都是凭感觉,如果要细问页面里面各个部位的尺寸大小,可能很多人答不上来。 但是画图时如果按照规范去画,页面肯定会更美观、更协调。自然从表现层上来说就会更好一些。 那么试问 你真的都了解app图标尺寸的设计规范吗?作为一名产品经理,要想用axure把页面画的美观点,一些常用的尺寸还是要背下...https://www.shangyexinzhi.com/article/3998219.html
10.百度文心一言app图标全解析:设计之美与功能之韵这种良好的尺寸适应性确保了用户无论在任何设备上使用百度文心一言app,都能获得一致的视觉体验。 五、图标与品牌形象的关联 作为百度旗下的一款人工智能应用,百度文心一言app的图标设计也与百度的品牌形象紧密相连。图标中的“言”字与百度的“搜索”基因相呼应,体现了百度在人工智能领域的持续创新和探索论文ai率怎么...https://www.skycaiji.com/aigc/ai14003.html
11.新手如何设计App的图标Logo?想要设计一款App图标logo,却不知道从何下手,也不清楚尺寸规范。针对新手,如何快速搞定app logo图标设计?借助在线设计LOGO神器,今天和大家分享移动App 的logo图标设计,现学现用容易上手的4个小套路! 1.品牌名称的首字母/汉字 提取品牌的首字母进行设计,是App图标最常用的形式,结合产品类型和业务定位,借助英文字母天生...https://www.uishe.cn/113204.html
12.从零开始设计一款APP之Android设计规范篇优设网② 大屏幕时代依然以小尺寸作为设计尺寸,会限制设计师的设计视角。 ③ 用主流尺寸来做设计稿尺寸,极大的提高了视觉还原和其他机型适配。 所以做安卓设计稿时请以1080x1920px来做设计稿 (sketch用户以540 x 960来做设计稿) 界面设计控件尺寸: 4. 安卓图标尺寸 ...https://www.uisdc.com/android-design-guideline-in-app/
13.最新iOS设计规范八3大图标和图像规范(IconsandImages)请注意,APP图标只能根据用户的请求进行更改,并且系统始终会向用户提供此类更改的确认。 提供所有尺寸并且视觉上一致的备用图标。与主应用程序图标一样,每个备用图标都作为一组大小不同的相关图像提供。当用户选择备用图标时,该图标的相应大小将替换主屏幕、Spotlight和系统等其他位置的图标。 https://wap.peopleapp.com/article/rmh20689155/rmh20689155
14.iOS和安卓手机的APP图标尺寸规范和图标命名规范安卓手机的APP图标尺寸规范跟命名规范如下信息图。 android图标规范信息图包含了安卓程序启动图标、安卓底部菜单图标、安卓弹出对话框顶部图标、安卓长列表内部列表项图标和安卓底部或顶部tab标签图标。非常齐全。 1. 安卓程序启动图标:ldpi (120 dpi) 小屏mdpi (160 dpi) ...https://www.douban.com/note/405510581
15.androidappicon图标大小尺寸Android应用程序图标 (Icon)应当是一个 Alpha 通道透明的32位 PNG 图片。由于安卓设备众多,一个应用程序图标需要设计几种不同大小。 在android程序中,在drawable中设置好图标后,但结果在小米2可没有显示出来,但在我自己的htc中和模拟器中显示正常。后来发现小米的dpi不一样。 https://m.jb51.net/article/84853.htm