界面 卡片 功能 肩负着 2022 年理想汽车 L 系旗舰使命的 L9 已经交付半年有余。23 年，理想也迎来 L 系 7/8/9 车型全面开花的局面，以五屏多维交互为卖点和噱头的新一代智能座舱系统也正在经历着市场和用户的验证。理想的车机一直就带有着易用/美观/流畅的标签，从 ONE 上面的仪表/中控/副驾三联屏+空调控制屏，到 L9 上的中控/副驾双联屏+后排娱乐屏，车机的信息结构和界面布局都发生了极大变化，随之带来的是交互操作和视觉感官上也有了新的体验。这种新，是延续了理想 ONE 的易用性？还是随着屏幕增大带来了一定的设计困扰？让我们来跟你细细聊一聊。更多HMI设计干货：入门必看！8000字完整梳理车载HMI设计的前世今生近期因为工作调度，有时间去对车载 HMI 历史进行研究。阅读文章 > 首先抛出我们的观点，理想 L9 的座舱车机体验在 2022 年发布的车型里，无论是信息罗列交互逻辑还是视觉 UI 动画效果以及流畅度，依然是处于第一梯队。但由于屏幕的可视面积增大，信息和功能如何在这块大屏幕中更高效率的呈现和使用，有一定的提升空间，UI 的精致和美观度，也还可以再精细化的打磨。在理想 L 系的车机系统里，我们使用频率最高的应该是主界面的卡片，导航及音乐，还有空调系统的控制。在主界面上，我认为现有的 L 型功能分布是合理的，但在 UI 的视觉呈现上，稍微显得有一些复杂，或许设计师的初衷是让这部分的功能分区更明显，按钮的可点击感和视觉指引更突出，但我觉得还可以做一些层级的简化和归类，减少模块之间因为分区的间距带来的割裂感。因此在全局的操作框架上，在保留现有的功能分区和操作逻辑的前提下，我重新做了视觉层级的梳理和归类，让功能区的 UI 视觉尽可能的简洁，同时保证原有的视觉指向清晰。这里我是这么设计的，首先弱化视觉上的区块感；用图标高亮来显示当前状态；收窄左侧面栏宽度，提升右侧内容区显示面积。除了导航/音乐/摄像头之外，还可以扩展一个常用功能至左侧菜单。这里留了一个可以讨论的地方，那就是下面三个全局入口保持固定不变外，上面的一级入口是否可以让用户自定义？这样的话可以把一些用户自己常用的功能提到这个入口来，相当于新增了一个应用快捷方式入口。底部的操作栏，我把功能分区用间距和竖线来区隔，减少底部信息由于“模块化”带来的割裂感，同时新增一个秘密模式入口，驾驶模式切换在方向盘屏幕操作的便利性比在这里要便捷很多，因此从这里拿掉了。这就是关于常驻操作区域我的优化方案，是不是“看起来”干净整齐多啦？接下来我们聊聊右侧的卡片。记得在春节期间 @贺磊 提到过：“ 导航不需要霸屏，可以留一个区域显示音乐，并且下半部分显示歌词，副驾也可以跟着哼几句，导航+HUD 也可以兼顾开车不走错，如果卡片可以自定义拖拉宽度就更妙了。 ”作为每天显示频率最高的主界面，我也确实觉得目前卡片的信息利用率太低了。走访了几位车友，大家的一致感受有几个点：天气界面可以不需要那么大，有一个区域显示当前时间和天气状况就可以了；车辆的状态和行驶信息默认在第二屏，即便是拖动到第一屏来展示后，由于尺寸的原因要么看不了EID界面要么音乐控制和天气卡片就会被挤到第二屏去，操作和显示都不太方便。于是我重构了右侧的卡片栅格，在现有的卡片尺寸基础上拓展出一个 mini 卡片，在有限的空间内效率更高的展示更多用户想要的内容。这里的 mini 卡片，也可以有更多的想象空间。行驶里程 / 小计里程统计 / 胎压 / 水温 / 海拔高度 / 当前车内温度，其实都可以在这个小空间内轮播展示。毕竟中控屏幕就那么一块，在 13 寸的屏幕上如何合理的寸土寸金利用好，我相信理想的设计师们也在考虑。除了 mini 卡片，首页还可以设置导航或者 EID 界面变成大卡片模式，这样在不需要进入导航或 EID 界面，就能在首页进行一些基础的功能操作，实现真正的 0 层级交互。好了，如上就是我优化后的主页界面。当然如果不需要大的导航界面，也可以切换回现有的展示方式，不冲突。全局对比看下来，我个人觉得界面里模块之间的间距变少了，信息整合度更高了。这个优化在浅色界面可能更容易出效果，可我只有深色界面 JPG，所以就先这样吧。before除了主界面之外，现在的 L 系车主在全屏幕使用导航的时候不知道有没有这样的一个痛点。想看当前播放的音乐，或者车辆里程行驶信息，或者 EID 界面的时候，都需要从当前导航界面跳转出去，在另一个界面完成信息的获取和操作。那有没有可能有一个小比例的副窗口，多任务处理信息呢？用过折叠屏手机和 Pad 的同学都知道，分屏功能很实用，在一部分的横屏车机上也有这样的交互功能，我也给咱们 L 车主做了一个，一起来看看。我来做一下设计说明哈。当进入全屏应用后，点击右下角的“分屏”按钮，即可进入分屏模式。默认可能是音乐或者 EID 界面，拖动可以进行左右界面顺序的切换（按照咱们 8155 的算力，如果能进行双卡片的任意拖动和尺寸自定义就更牛了）。副窗口可以显示音乐/EID/车辆信息等等，由于尺寸与主界面卡片一致，因此信息可以完全复用，不会增加研发和 UI 成本；右滑或者左滑卡片，就将副窗口划出界面就可以返回到全屏模式，这个交互操作跟 iPad 和折叠屏手机可以定义成一模一样，减少用户的学习成本。以上，即是我对现有车机界面自己理解后做出的一些小小优化，仅作为我自己的解题思路，也算抛转引玉，希望车机越来越顺手，越来越好用。当然，这份方案里也还有很多交互和视觉层面的细节还没有考虑周全，也希望和大家一起切磋讨论。2023 年，关于车机我还有更多可以聊，一起期待一下吧！本篇来源：优设网原文地址：https://www.uisdc.com/lixiang-hmi-design
原型 屏幕 界面 如今 App 和网页可交互原型的制作方法和设计流程早已普及，但 HMI 可交互原型制作方法和设计流程还处在探索阶段，比起只需考虑屏幕内交互的 App 和网页，HMI 还要考虑屏幕在汽车内的位置。这次带来一篇相关译文，文章的作者 Casper Kessels（德国 Snapp 汽车软件公司设计总监），使用 VR 来探索 HMI 可交互原型的设计制作。本文译自：https://www.theturnsignalblog.com/blog/behind-touch-concept原文作者：Casper Kessels（德国 Snapp 汽车软件公司设计总监）往期HMI干货：HMI的点击区域应该多大？总监上路帮你实测！设计师都知道根据《苹果 iPhone 人机界面设计指南》，手机 UI 的最小点击区域是 44px。阅读文章 > 在过去的几周里，我设计了一个新的概念原型，用于测试在汽车中触摸屏的交互。在这篇文章中，我想聊聊我遵循的设计流程和迭代过程。一、行动和目标下图是我遵循的简略设计流程。现在汽车 HMI 界面复杂的主要原因之一是功能太多。所以在开始时，我退一步评估了人们在汽车中真正需求是什么，并以此为基础进行了设计。我首先列出了一辆典型汽车的所有功能，并研究了这些功能实现的潜在目标。例如，提高风扇速度的潜在目标是更快地降温。最终得出一个包含 20 个目标的列表，我将其作为设计界面的基础。但在将这些目标转化为具体界面的过程中，我很难走出第一步。在大多数项目都存在一些限制，如屏幕大小、图像性能、时间、预算等。如果没有这些限制你可以自由地做出完美的设计，可有限制就很难起步了。最困难的问题是没有真实屏幕硬件。为根本没造出来的汽车屏幕设计界面是很困难的。所以我希望至少有一个真实屏幕硬件让我能做实验。我画了不同的屏幕布局，但仅凭一张糟糕的草图很难判断出哪个设计方向更好。所以我更进一步打算在 VR 中探索。我的草图二、在 VR 中探索屏幕布局我很想在真车或模拟器上测试屏幕布局，但新冠病毒危机让这变得相当困难。我不得已退而求其次用 VR。我没有 VR 眼镜，但感谢谷歌 Cardboard，我可以用手机加纸壳当 VR 眼镜。我们的目标是探索屏幕布局可能性的大致概念原型，而不是创造一个精确的内部布局模型。我不想花几个小时搭建精确模型。谷歌 Cardboard（译者配图）首先，我找到一个包含内饰的免费汽车 3D 模型。我把 3D 模型拆开，创建了三种不同的屏幕布局方案，用于后续探索。车内屏幕示例在 Unity 中，我导入谷歌 Cardboard SDK，并修改了默认场景。我又导入汽车模型并下载了一个免费的道路素材。我的 Unity 屏幕不到一个小时，我就配置好了一切，开始在 VR 中探索场景。Unity 中 三种屏幕布局之一这三种不同的屏幕布局是根据目前汽车公司的发展方向而选择的。我发现把屏幕放在司机的视线附近最不会让人分心。因此，小屏幕横放是最佳选择。三种屏幕布局三、草图和线框图在确定了屏幕大小的方向后，我将目标转化为界面就没那么困难了。我很早就明白必须对功能进行分组才能开展设计。我按多媒体、环境控制和导航功能进行分组。另一个核心理念是，我希望用户尽可能少点击来实现他们的目标。我基于可调整大小的窗口做了一些简单的布局。我的想法是，在一个平面上呈现所有东西会尽可能简单，并能最大限度地减少点击次数。我画的窗口布局的简略线框图然后，我为每个功能分组设计草图和线框图。同时对屏幕布局做一些小的调整。四、快速原型想要找到像调节音量一样直接控制的交互方式是很难的。我在之前探索汽车手势交互的概念原型的基础上提出了一个新想法。为了更具体地了解它的工作原理，我使用 Axure 制作了一个非常简单的可交互原型。点击并按住屏幕边缘会显示一个覆盖层。通过滚动到喜欢的位置并释放，选项就会被选中。我认为这个方案有潜力，所以我把它整合到概念原型的第一个版本中。五、第一次迭代第一个概念原型很简单。它在屏幕底部有一个菜单栏，上面有导航、媒体、环境控制和摄像头功能。导航总是覆盖屏幕的左半部分，其他功能总是覆盖屏幕的右半部分。每个菜单项都可以进入全屏模式。我还做了一点简单的视觉设计，使原型变得栩栩如生。我在 Figma 中设计了所有界面，并使用 After Effects 创建了两个手势交互的动画。一个用来控制音量，一个用来调整温度。反馈我联系了有汽车设计经验的设计师，寻求他们对这个概念原型的反馈。从他们的反馈中，我们可以清楚地看到有三点要改进。使用可调整大小的窗口非常受限。如果使用多层级界面而不是窗口，那么界面就有更多的自由和空间。第二点是这个概念原型系统功能过于宽泛。相反，当你开车时，你只需要导航和多媒体功能。这些功能应该是基本功能，其余都是额外功能。在这个概念原型中，所有功能都同等重要。最后一个建议是，这个概念原型相当保守。这是为现在市场上的汽车设计的。而在汽车行业，由于开发周期较长，设计师需要提前设计 3-4 年之后的汽车。所以我不应该害怕创造新的概念原型，应该同时使用不同的屏幕，并着眼于 3-4 年后的用户体验。六、第二次迭代我把上一个原型中反馈的问题在这次迭代中改进了，并更多关注导航和多媒体功能。我还想看看是否可以围绕菜单栏进行设计，创造更自然的交互。所以我尝试将菜单栏转换为一个 3D 多层界面，每一层都对应一个驾驶模式。第二个原型使用分层系统而不是菜单栏最高一层是”通勤模式“，展示多媒体、环境控制和导航功能。其次是“导航模式”，以导航为中心。最后，还有一个“专注模式”，界面菜单占用空间最小。每个模式都对应一个类似的仪表盘界面。用户可以通过方向盘上的按钮或与中央屏幕交互来循环切换这些模式。我遇到的问题是没有控制环境的地方了。我想了一个办法，把控制器分开，放在不同的屏幕上。这样中央屏幕界面更加简单，有助于整个系统的可用性。反馈我已经注意到，在设计这个概念原型时，我引入了许多不必要的复杂性。其他设计师和我交谈也得出了同样的结论。使用层和驾驶模式相结合的想法很有趣，但太复杂了。理想的解决方案是将第一个概念原型和第二个概念原型结合一下。另一个观点说，这些多层级界面看起来相当混乱。所以在最后的概念原型中，我需要找到一种视觉风格，最大限度地减少混乱，使它看起来更简洁。七、最终版本在最终版本中，我删除了在不同驾驶模式中切换的交互。我想保持专注模式的理念。因此，我没有使用 3D 多层界面在驾驶模式中循环切换，而是将两个主要控件放在屏幕的角落，让用户决定他想要显示什么。最后，我在 VR 中测试了这个概念原型，看看控制的可达性如何。我曾担心多媒体按钮会被放置得离司机太远而不舒服。在用谷歌 Cardboard 在 VR 中观察后，我注意到情况并非如此。然而，我使用的车辆 3D 模型的车内空间不大。在大型 SUV 中，这仍然是一个问题。所以这将是下一个版本概念原型需要改进的地方。我还为准备了一个更沉着的视觉设计风格，这有助于减少界面层级的混乱样式。最终的概念原型其结果就是我在上一篇文章中提到的概念原型。像本文提到的这种的项目没有终点，我将继续改进和迭代。我已经收到很多读者的评论和反馈，这将有助于改善概念原型！因此，如果你有任何意见，我会很乐意接受！本篇来源：优设网原文地址：https://www.uisdc.com/hmi-prototype-design-process
界面 产品 几何图形 Dribbble 平台对于互联网 UI 界面设计有着举足轻重的定位，对 Dribbble 设计的研究会让我们看清设计的方向。为了保证这篇文章的质量，Dribbble 年度的每个作品都超过 550 赞。在此原则下挑选了 828 件作品，作品总的大小为 2.2G。总结从挑选出的 828 件作品中，排名前十的作品中 9 件为 B 端设计，另一件作品也是 B 端产品 C 端化的产物。其中：B 端界面设计占比 476/828，57.4%；C 端界面设计占比 180/828，21.7%；视频动效作品占比 223/828，26.9%；明眼人都能看出其中的比重关系，B 端设计再次大火，为什么是再次？因为 B 端设计之前火过，只不过没有赶上一个好的时代，在 C 端设计风光的十年里而忽略了其存在。随着 C 端市场饱和与数字化的浪潮下，实体经济、ToB、ToG 的产业再次迎来了它的曙光。视频动效的作品占比也已超过 C 端界面设计，相信今年视频动效作品占比还会再次提升。Dribbble 年度最佳作品Dribbble 年度最佳作品来自大家最熟悉的 UI8 团队中的 Tran Mau Tri Tam ✪，作者来自越南西贡，最佳作品截止目前355K浏览量，2933个赞。为什么看似平平无奇的作品却能获得 Dribbble 年度最佳作品呢？既不是 C 端也不是纯 B 端的作品，更像一个网页与平面的结合体。如果去掉搜索图标、分类图标和按钮，你可以理解它就是一个平面作品，一个字体加几何形体构建的作品，为了丰富画面的层次，让画面更加的活泼采用了多彩加几何色块，让标题阅读有停顿感和呼吸感。faster 底部的横线让它从标题文字中脱颖而出，这种使用线条突出重要信息的设计也是今年Dribbble 设计流行趋势之一。MetroUI 是 Windows8 的界面设计语言，在 2010 年至 2013 年间曾经风靡一时，那也是移动互联网的发展元年，现在国家推行实体经济、数字化带动 To B、To G 的发展元年，通过几何色块（MetroUI）实现 B 端产品与 C 端设计风格的传承与衔接，你会发现历史总是惊人的相似。最后背景结合今年最流行的微软风，毛玻璃的多彩高斯模糊渐变风，年度作品当之无愧。最后来看下按钮的设计，正常的按钮要么文字加色块，要么左图标加右文字，它设计成左文本加右图标，更加注重信息的可读性和易读性，也体现 B 端设计重功能和交互体验，视觉点到为止的设计理念。下面我们来欣赏年度最佳作品里面的流行趋势吧。1. 易读性（停顿感）字体三原则：可读性、易识性、易读性。当你同时读一篇文言文和一篇设计文章，肯定设计文章的内容可读性更好。易识性是用在字体设计上，不能过于浮夸的改变字体骨架、形体而不易识别。易读性和每个位设计师都息息相关，因为我们都需要编排文本。当我们小时候写作文时，不会写的文字可以用拼音代替。这时候读者读到拼音时会有停顿感，更加适合用户阅读。通过给用户制作停顿感来增加用户的易读性。可以在相关联文本后面添加图片、表情、图标来更好的理解文本内容，丰富文本内涵。比如情侣间表达爱意时会输入文本，“我爱你”、“我 Love 你”、“我 ai 你”、“我❤️你”，哪个更加会有情感共鸣呢？不言而喻，相信你心中已经有答案了。2. 曲线在标题文字上添加曲线来突出重要文案是 2021 Dribbble 最流行的趋势之一，第一个设计目的就是突显文字，其次就是想表现铅笔真实书写的感觉。之前很多带有签名的设计中，签字的文本都是手写体的感觉，手写体对比电脑的机械字体会带有一种人文气息，也会让两者之间产生一种对比、矛盾。除了突显文本外，曲线还有视觉引导的作用。通过视觉引导让用户按照设计师编排的顺序进行浏览界面。当然还有比这更科学的工具就是眼动仪测试，通过真实用户眼睛浏览界面显示对应的热点图。3. 多彩高斯渐变风多彩高斯渐变风是从色彩的角度来传达和丰富画面的，多彩高斯渐变风其实是从制造矛盾到平衡矛盾的过程，多彩渐变多为冷暖对比来制造画面的冲突，需要控制冷暖画面的大小来实现平衡。主流的还是以暖色突显为主。多彩渐变主要起到活跃气氛、吸引目光、平衡画面的作用。多彩高斯渐变还可以结合轻拟物、几何图形、三维等新的组合方式去创新，给用户呈现一种更加新颖的视觉表现形式。最后我们还是要回归到内容上，为了更好的传达信息需要去设计与内容相匹配的视觉风格。B 端界面设计1. 侧边栏 SidebarB 端设计的火爆带动了 B 端相关模块设计，更多的人也愿意尝试 B 端相关模块设计，侧边栏作为产品架构中重要的导航系统，好的侧边栏设计能为用户带来更好的效率。主流侧边栏都做了展开、收起、拖拽等交互效果，也是受限于 PC 屏幕为展示更多数据而腾空间。侧边栏主要承担的功能有导航、分类、自定义筛选、共享、新增等。Dribbble 的 B 端产品设计已经不再是假大空概念设计，而是一套实用美观可落地的设计。2. 仪表盘设计仪表盘设计是一个很好的隐喻，想象一下开摩托车或汽车主驾驶前面的屏幕，汽车仪表有燃油表、车速表、里程表、水温表、转速表、故障指示灯等。B 端类产品后台界面的仪表盘设计也需要展示一些重要的数据和各种状态，大体分为侧标栏、导航栏、待办任务、个人信息、报表数据、消息中心、快捷入口等。当然最重要的就是报表数据，团队收益、任务进度、转化比例、新增、存量、团队工作时长等都是老板或领导关心的内容。每个公司业务不同、每个人员权限不同，自定义的仪表盘也各有差异。重要的是突显数据和业务状态，需要分层级系统性去思考和设计。3. 流程设计复杂的事情简单化，简单的事情标准化，标准的事情流程化，流程的事情自动化。流程设计是每一个企业核心功能和业务，可自定义的管理流程系统搭建也是 B 端产品设计的难点，需要对业务高度抽象，让每一个业务人员可自定义的流程才是好的流程设计。4. B 端 C 化B 端 C 化是 B 端产品设计的视觉表现力慢慢往 C 端产品设计的视觉靠齐，国内 B 端产品界面设计视觉水平还有很大的提高空间。除了视觉上的提升外，由于业务的发展，B 端产品也开始移动化、智能化，国内主流还是通过小程序、H5 来现实 B 端产品 C 端化。B端产品C端化是自嗨？对不起我想得太简单了！经常在网上看到「B 端产品 C 端化」的讨论。阅读文章 > 5. 轻代码化轻代码化是一种低代码赋能无代码的方式，弥补无代码拓展性差、覆盖场景少的问题。在保有无代码灵活、易用、快捷的同时，又能覆盖低代码使用场景。简单理解就是无需代码开发即可如搭积木般快速、灵活地创造属于你的个性化管理系统，轻松实现多元业务场景的数字化管理。轻代码化将功能进行打包，升级成全局可以用的配置，技术人员配置好后，业务人员在应用编辑时直接选择使用模版，绑定对应的变量即可使用。界面设计技巧1. 人文气息为什么人加色块的组合方式能流行起来？还是 B 端行业流行带动的。B 端讲的更多的是企业对企业。企业对企业除了讲行业解决方案外，还需要传达公司的价值观、使命、愿景。人加色块的组合方式非常适合体现公司的企业文化。对于一家全球化的公司不同肤色的人物组合在一起，这种人文气息和价值观已经就不言而喻了。当然企业也需要进行营销，抓人眼球。几千年来的遗传证明了，人的大脑对食物、性、动的东西、人脸和眼睛、危险的动物很敏感。人加色块的组合方式也具有抓人眼球营销的功能。真可谓一举两得。这种风格更适合大公司，国内的一些手机厂商 OPPO、VIVO 等也会通过手机+背景+人物来体现科技与人文的结合，而对于中小型公司产品差异化和行业解决方案展现应该还是重中之重。2. 毛玻璃效果毛玻璃效果加大了模糊程度，透明效果更加扁平，很好的顺应当下 UI 扁平化的设计趋势。苹果 Mac OS Big Sur 系统的图标、界面中运用了大量毛玻璃和半透明元素，界面更扁平。至于 C4D 三维彩色玻璃的视频教程可以在 B 站搜索“透光艺术-C4D 创建彩色玻璃的 4 个技法”，完全能满足 UI 设计师。当然还有一个好消息就是 Mac 用户可以享有 OC 一年免费的使用权，具体安装购买方法上某宝就可以轻松搞定，真香。实战案例！「毛玻璃拟态」图标的临摹思路与原创技巧这篇文章主要分享怎么做一套毛玻璃拟态图标，以及在这基础上如何发散创意。阅读文章 > 3. 轻拟物轻拟物这几年一直流行，在 UI 设计中趋于稳定的位置。从写实到扁平再到轻拟物，其实是设计师们一路不断探索的结果。本质就是光影对形体产生的视觉感受。在色彩中对高光、亮面、明暗交界线、暗面、反光（环境光）五个部分的处理。写实三维的图标等设计更适用于简洁的画面中，扁平等设计更适用于复杂一点的界面中，比如 B 端产品界面中的功能图标。轻拟物可使用的范围更广，效果更佳。Sketch、Figma 软件对于渐变、高光、投影、高斯模糊处理已经非常简单且出彩。大厂都在用的轻拟物设计风格，本文教你四步完成！上期我们聊到了最近比较流行的轻拟物风格，科普了基础概念，如果你还没读过，可以前往阅读：[link https://www.uisdc.com/light-imitation-style]本期展开轻拟物的具体技法讲解和演示。阅读文章 > 4. 简洁设计简洁设计遵从了密斯·凡德罗的“少即是多”的设计原则，在 B 端产品界面中更加需要简洁设计，我们最熟悉的 Sketch 软件界面已经是相当的简洁了。回到现实当需求功能不断增加，产品界面的编排如何取舍，如何保证界面的简洁是设计师需要深度思考的问题？如何与上级沟通？该功能是否可做可不做？是否需要埋点用数据说话？如果只是一味竞品有我们就需要有，功能不断累加只会让界面越来越重。5. 几何图形几何图形和几何插画有异曲同工之妙，几何图形多为产品界面和宣传内容的抽象，产品界面的几何图形多为占位符形式，加上色彩和几何色块让其成为一个整体。B 端产品视觉设计 C 端化的进程中，几何图形、几何色彩不失为最好的突破口，相信今年Dribbble B 端产品的视觉设计一定会更上一个台阶。几何图形另一个场景化的地方就是品牌，作为一名 UI 设计师一定会经历从图标到几何图形到品牌设计的过程，品牌设计的技巧基本还是以几何图形为主，至于品牌的内涵需要更深层次的解读。掌握主流品牌设计的技巧对产品定位、品牌宣传打下扎实的基础。6. 暗黑设计暗黑模式的设计是解决在微弱环境下内容也可以有更高的可读性。随着用户夜晚及深夜使用电子设备时长增大，如何在夜晚这个特定场景下使用更加舒适。合理使用暗黑模式可以减轻眼睛疲劳，提高在夜间使用的可读性。在设计暗黑主题时，不能为了突显视觉上的逼格，而去使用高饱和度鲜艳的色彩来突显界面的品质感。而应该把舒适度、可读性作为设计的衡量指标。Material Design 给出了暗黑主题的设计准则，即正文和背景之间的对比度应至少为 15.8:1。按照此标准设计，可读性都还不错。这里介绍一个插件“Stark”（Figma、Sketch、XD、Chrome 插件）用来测试界面的对比度。顶级大厂如何做好暗黑模式设计？来看 Ant Design 的规范文档近年来暗黑模式的设计趋势开始一点点明显，Ant Design 在这次 4.0 的升级中也对这类暗黑场景化的设计开始进行初步的探索，接下来就让我们一起来看下 Ant Design 这一针对企业级的设计体系是如何设计暗黑模式的。阅读文章 > 7. 模块化（组件化）为什么叫模块化，而不叫组件化，组件化更多的利用原子系统从原子、分子、组织、模版、页面来快速的搭建界面，但在 B 端产品设计中基础组件和业务组件的搭建是以提高工作效率为前提，是否有从 0 到 1 搭建 B 端产品组件的经历是设计师一生中最宝贵的经验之一，它能提高设计师的系统化思维、逻辑思维和抽象思维能力。产品模块化设计就是将产品分成几个部分，也就是几个模块，每一部分都是具有独立功能，具有一致的连接接口和一致的输入、输出接口的单元，相同种类的模块在产品族中可以重用和互换，相关模块的排列组合就可以形成最终的产品。通过模块的组合配置，就可以创建不同需求的产品，满足客户的定制需求 。为什么我强烈建议你学会使用模块化设计？风筝KK：模块化设计是将设计分解成小的模块，然后独立设计它，最后再将它们组合成更大的系统，就像小朋友玩的积木一样，由一些简单的零件组成小的模块，然后再组合成各种模型样式。阅读文章 > 8. 插画插画作为设计的一大品类，不同的插画师都有自己擅长的风格，本质是都有自己的个性，但是在产品设计中更多是需要共情、共性来讲故事，表达产品理念和价值观。这就需要插画师去尝试并探寻出适合互联网产品设计类的插画风格。设计的本质是旧元素的重新组合，插画不会过时，而是需要结合当下和产品找到最匹配的设计风格。9. 几何插画几何插画算是插画简化的一种表现形式，人和物的形态不再写实，而是抽象成几何图形拼凑的感觉，同时保留人物形态的神韵。加上几何色块与人物交互形态的表现，传达出简洁、科技的现代感。难点还是在人物形态的表现上，平时多练习练习速写还是很有必要的。10. 线面插画线面插画最近一两年非常流行，准确的说是非常适合。首先线面插画主要是由线条和块面组合而成，用块面表现人物形态时某些结构会表现不出来，这时候用线条简单勾勒后，结构就会清晰明了。其次当线面插画运用在界面上时，可以打破界面纯文字或组件化的机械和沉闷感。线面插画的风格提升画面热闹感的同时，还能保持界面的干净整洁。动效1. 微交互界面微交互动效会让用户的体验更加精致到位。想要打造优秀的产品设计，微交互和动效设计是绕不开的，UI 界面设计通过微交互反馈告知用户当前正在发生的事情，所处的状态。细微的动效更能调动用户情绪，取悦用户。C 端产品微交互和动效已经很成熟了，一部分功劳来自 iOS 系统原生自带的效果。B 端产品的微交互和动效更多还是在学习海外产品，还需要给前端工程师灌输微交互和动效的设计价值，共同打造产品体验细节。想做好微交互设计？我总结了这 8 种常见类型！大家好，我是 Clippp，今天为大家分享的是「微交互设计」。阅读文章 > 2. Mg 动画Mg 动画需要很好的节奏感、韵律，每一个场景动画都需要其中的元素进行连接变化，让转场动画更加自然，MG 人物动画通过点线面的动效变化让画面更加有趣、自然，通过粒子效果让特定场景无限循环会让人更加印象深刻。三维1. 三维图标MacOS Big Sur 系统图标的更新带动了三维图标的流行，三维图标的应该场景还是需要有较大留白空间的界面，因为三维图标太小后就看不到更多细节。三维图标感觉又回到了拟物化和扁平化哪个更好的问题上？设计师应该保持开放多元的视角。设计本身也在不断的演化融合，存在即合理。合适最重要，它们都会有适合自己的场景和设计价值。如何从零开始完成一套3Ｄ图标设计？来看大厂的实战案例！背景QQ 游戏中心经过设计改版之后，我们重新设定了整体的世界观——多彩的游戏宇宙。阅读文章 > 2. 轻三维为什么轻三维在界面设计中占有一席之位？一个是设计师不断追求差异化的产物。另一个是更好的表现内容，并与用户产生共鸣。轻三维的基础模型都是来自手机界面中的各种元素，比如组件、开关、按钮、占位符、图表、几何图形、图标、进度条等，这些都是用户日常使用系统软件常见的元素，通过简单的几何形体建模—打灯光—加材质—渲染—PS调色。难度系数不大但效果很出彩。第一个出彩点是模型带有厚度的倒角，结合灯光渲染的光泽是二维软件不能比拟的。第二个出彩点就是材质自由添加，特别是当下流行的毛玻璃效果，玻璃材质渲染效果更佳。第三个出彩点就是可以加局部灯光，局部的渐变色或环境光更加出彩。「新拟物化」过时了！此刻你最应该拥抱的是「玻璃拟物化」！还记得今年年初大家追捧的 新拟物化（Neumorphism）风格嘛？阅读文章 > 3. P4D（PS+C4D）P4D 是 PS 加 C4D 的设计表现技法，也是视觉设计的最后一个环节，通过 PS 对 C4D 的渲染图片进行调色，利用 PS 的调色技巧可以很好的解决 C4D 打灯光的瑕疵，还可以利用 PS 强大的合成功能，将渲染图片与图片素材进行合成，来表现画面的视觉度，当然三维软件比较难实现的水、粒子、烟花等效果，也可以通过 PS 的后期合成来实现，这也是 P4D 的强大之处。4. 卡通 IP卡通 IP 设计最近三四年技术的迭代已经慢慢的走上成熟，卡通 IP 也从传统的纯 PS 手绘技法，转到 C4D 建模—角色绑定—MD衣服制作—OC渲染—PS（静态）/AE（动态）调色。卡通 IP 火的本质更适合做营销，相比于品牌或 Slogan，卡通 IP 具有亲和力和画面感。随着各种手办行业大热，受互联网大厂影响下，卡通 IP 已经是互联网 B 轮以上公司的标配了。如果团队中没有这样能力的人，也可以通过绘制好二维，一套三维可以选择外包完成。对于 UI 设计师来说学习是有成本的，暂时并不是必备技能，如果喜欢完全可以学习，从设计差异化的角度来看三维视觉确实有一定的竞争力。盲盒和NFT背后，是属于设计师的掘金热潮前段时间冰墩墩的爆火，让本就火热的潮玩手办市场，再次成为瞩目焦点。阅读文章 > 5. 三维动画C4D 三维场景动画通过构建实物和场景模拟生活中的现实场景，会让用户体验真实感，三维软件制作动效的最大优势是通过动力学和表达式来模拟真实感，未来在 AR/VR 领域会有更好的发展。相对于界面动效学习成本难度也相对较大。在三维动画中 C4D 软件对于域、动力学还是有一定的优势。总结上一次写 Dribbble 流行趋势还是两年前了，通过两年的沉淀对趋势流行有了更深的认知。十年的互联网行业风风火火，随着最近的互联网裁员潮大家也慢慢的进入到反思层，客观的看待和理解这个真实的世界，曾经的流行趋势也需要慢慢的沉淀下来。存在即合理，趋势流行稍纵即逝，注定是不长久的，只有大浪淘沙历史遗留下来的风格才能更长久。但我们也不能不去关注，因为哪有什么所谓的创新，只不过是旧元素的重新组合，并符合当下这个时代人的审美需求。香奈儿的“时尚易逝，风格永存”大概就是这个意思吧。6000 多字的设计流行趋势，希望能帮助设计师度过互联网裁员的寒春。最后希望以后每年坚持输出设计流行趋势。为设计行业奉献微薄之力。国外专业机构出品！2022年你需要抓住的 8 个UI/UX设计趋势Hi，我是彩云。阅读文章 > 欢迎关注作者的微信公众号：「水手哥学设计」本篇来源：优设网原文地址：https://www.uisdc.com/dribble-design-trend
界面 需求 原型 之前接到一个需求，在客户跟进系统中，销售根据客户手机号码生成的串码，复制到企业微信添加好友后，可以将 useID 自动关联绑定客户编号。有位设计师直接就对着原型把界面做了出来。对于做好这个界面，他也非常努力，比如让元素更好看，信息排列更整齐。我遇到过几位设计师都是这么做需求，但是最终出来的界面不尽人意。因为他们把目光都聚焦在局部，缺乏对整体的思考。今天用这个界面来说一下思路吧。这张是产品的原型，为了体现真实情况，文档说明基本是原话（已对信息进行脱敏）。原型的意思是在客户的主页点击「生成串码」就会来到这个页面，默认将客户的置顶手机号码显示在第一位，复制这个号码生成的串码，去企业微信添加好友就会自动关联绑定。就像以前要分享淘宝的商品给微信用户时，需要点击分享，将出现的那串文字复制到微信发给朋友一样。利用路径拆分原则，分析这个用户在当前页面要通过什么方式才能达到目的，可以分为以下两种情况：复制置顶号码即可满足需求；需要将其它号码生成串码才能满足需求。通过这张图，结合原型，我们可以发现这两点：1、这个页面的目的非常明确，是复制串码；2、置顶号码默认生成串码，其它号码需要点击生成才会有串码，因此重新获取这个按钮，在两种号码卡片上出现的节点不一样。理清思路之后再来看原型，会发现原型的低保真图与说明是两种意思，也就是低保真图没有体现应有的状态和正确的意思。如果拿着这张低保真图直接对着做，将「重新获取」作为页面的主按钮样式，这个界面的可用性就很低了，用户会认为点击「重新获取」是对应所有的号码。根据正确的思路，做界面之前我们应该做一张低保真设计稿。下图是对于原型进行优化后的低保真设计稿。我们还可以用墨刀制作一个小型 demo，找相关用户或同事进行测试。这样做可以提前验证界面是否达到用户的预期。小型 demo 如果验证不成功，用户依然有困惑，可以继续调整，直至验证成功后，才进行界面高保真设计。这个概念也叫 MVP，即最小可行性方案设计。方法有很多，简单的纸面原型、线框图都可以实现，视情况使用。通过验证后做出来的界面，返工率会更低，因此不要忽视这一步。接下来才是找参考界面，不用局限在相同类型的界面中，可以泛浏览界面，从中找到灵感。（所以平时收集界面很重要）成图如下经过这个事例，我们可以大致描绘归纳出步骤：识别需求-重塑需求-梳理流程-设计界面1. 识别需求识别需求不是读原型说明文字，而是要基于了解用户和产品的前提下：在什么场景，用户需要通过什么方式，解决什么问题。不然原型文字就只是文字规则，没有发挥最大作用。其次，需求是否合理，是否能真正解决用户问题。2. 重塑需求理解产品的意思后，利用路径拆分原则进行需求的重塑，了解用户通过什么方式到达目的地。需求拆分方法的原则可以看乔梁的《持续交付 2.0》，其中 INVEST 原则、需求拆分的五大技法能够帮助我们设计时以产品角度进行思考。3. 梳理流程梳理流程，查缺补漏后，进行界面的低保真设计。在这过程中用到 INVEST 原则中的 Testable（即可验证原则），不断验证直至成功再进行界面设计，可以让我们的返工率降低。4. 设计界面经过前面一系列的思考和验证，再去进行界面设计的时候，我们才是带着正确的任务：哪个才是当前的任务重点、什么元素应该强调或弱化、在设计规范的范围内怎么让界面更舒适好用…等。总结这个思路框架可以帮助我们快速而准确地完成界面设计，特别在小型需求上。别小看小的需求，每个界面都有其任务，可以推动流程的完成。面对大型的需求时，则需要拆分得更细致，用更全面的方法去做。老板说界面不好用怎么改？从这5个方面入手！有次接到个需求：“我们系统不太好用，视觉升级的时候也麻烦帮着改改。阅读文章 > 欢迎关注作者微信公众号：「牙线y2x」本篇来源：优设网原文地址：https://www.uisdc.com/interface-design
游戏 设计师 界面 在设计类的相关行业中，游戏 UI 设计算是一个比较热门且备受年轻人喜爱的设计行业。想成为一名优秀游戏 UI 设计师，除了要具备熟练的软件操作能力和优秀的绘画能力之外，创意表达能力也非常重要，这是核心竞争力，创意表达能力越强，就能在专业领域走得越远。当然从入门到精通一切都得一步步来，需要项目的经验累积和时间沉淀。对初级游戏 UI 设计师来说，能按照定好的 UI 风格组拼出新的功能界面，是最基本也是最紧要的一项能力。所以设计师要多了解熟悉不同的游戏 UI 设计风格，并掌握对应的设计规律和技巧，这样也是为自主设计游戏 UI 界面打基础，是进阶高级游戏 UI 设计师的必经之路。要达到以上要求，需要设计师积累大量的游戏界面设计参考素材。那么如何快速准确的找到这样的设计参考资源呢？所谓有需求就会有供应，为了解决这个游戏 UI 设计师的共同难题 ，来自英国的 UI 设计师 Edd Coates 创建了一个能快速有效的搜集游戏界面设计参考资料，且免费开放使用的灵感网站——GAME UI database。GAME UI databas 主页GAME UI databas——游戏UI设计灵感网站和其他许多游戏 UI 设计师一样，Edd Coates 一直想有一种更快、更有效的方式来搜索游戏 UI 设计所需的参考资料。于是在 2020 年疫情期间，他创建了 GAME UI database，来帮助自己和同行业设计师更高效地工作。网站创建后受到广泛地支持和好评，被 Insomniac Games、Arkane Studios、Double Fine 等多家游戏开发公司引做专业参考工具，并于 2021 年 8 月在 Pocket Gamer 移动游戏大奖中获得了“BEST TOOLS PROVIDER”奖。这些都很好的证明了 GAME UI databas 功能的实用与强大。资源丰富，类型全面GAME UI databas 站内一共包含 920 款精品游戏，各类游戏界面参考共计 38000 多张，且参考图片都非常高清。在里面你可以找到游戏界面设计的所需各类资料:主界面和 HUD、地图页、引导教程页、物品及解锁页等等，可选的游戏平台包括电脑、手机/平板和掌机。这样丰富的资源量和专业的功能分类是其他一般的设计网站所不能比拟的。GAME UI databas 对站内参考资源按功能进行了细致的分类知名优质的电子游戏界面设计参考在站内都有，如艾尔登法环、动物之森、最终幻想、巫师、饥荒、上古卷轴、最后生还者、无主之地、蝙蝠侠：阿克哈姆、愤怒的小鸟、光之子、吃豆人等。在页面顶部的搜索框中输入游戏名称，进入对应的游戏项目页面就能看到相关的界面截图。近期大热的「艾尔登法环」的游戏界面也已被收录精准的按需搜索除了按游戏名称和功能对网站内的资源进行搜索，GAME UI databas 还提供了细致的分类索引，帮助设计者精准找到所需的类型。无论是按游戏类型、按主题、按界面风格，还是按材质、按视角、按元素，都可以直接点击对应标签实现快速筛选。站内还设有按关键词搜索，所有包含该词语的的页面都会被呈现。拓展运用虽然 GAME UI databas 主要针对的是游戏界面设计领域，但是一款优质的游戏在多个方面都是有设计借鉴意义的，很多游戏的 logo 设计、字体特效、美术风格、配色等同样出彩，对相关行业的设计师来说也是一项不错的灵感来源。多样的字体设计及字效这种可爱的游戏界面对喜欢扁平插画的小伙伴也是不错的参考总结如果是在花瓣、Pinterest 上搜索游戏 UI 设计参考资料，得出的结果往往零散且并不精确；设计师自己去下载游戏进行研究又过于耗时耗力。相比之下，资源丰富、类型全面，可快速进行精准搜索的 GAME UI databas 就好用很多，这种游戏 UI 设计领域的垂直搜索平台无疑是提升设计师工作效率的神器。附上官网地址，有需要的小伙伴赶快收藏吧~「GAME UI databas 官方网站」 https://www.gameuidatabase.com/index.php了解更多游戏 UI 设计资源：比花瓣还专业！200多款顶级游戏的UI和交互设计都在这里！很多时候，做设计需要找参考。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/game-ui-database
飞翔的企鹅
在路上
张大湿
表哥
落霞与孤鹜
