HMI设计中的质感和细节
文章字数1300字，建议阅读时间15min
随着c端行业越来越卷，越来越多的小伙伴选择加入HMI设计的赛道，我就是其中一员。但开始做HMI视觉设计你会发现跟手机端的设计有很大不同。
受屏幕尺寸和不同机型适配的限制，手机端的图标设计没有那么多细节刻画，布局造型也比较单一。但车载屏幕就很少受这两个因素的影响，首先车载的大屏幕可以承载更多的设计细节，并且每辆车都使用自己专有的屏幕尺寸不需要与其他车型适配，这就给设计师提供了更自由的设计发挥空间，但同时也带来了更多的挑战。
我把我这一年来转型HMI设计的学习过程分享给想转行或者刚刚转型的HMI视觉同学，希望对你有所帮助。
好的质感和细节的塑造不仅能提升设计的品质感，还能与竞品在设计上产生差异化，赋能产品，带你升职加薪，走向人生巅峰！👀
当你提交你的设计方案后，是不是经常收到这样的反馈：
于是你开始了一遍又一遍的修改，但始终get不到领导或者客户的点。毫无疑问，拥有好的质感和细节的图标或界面更加的耐看，经得起推敲。
那大家所说的质感和细节到底是指什么呢？解决这个问题我们可以先去找那些有质感细节的作品，然后再寻找它们之间的规律和共同点。
可能有的小伙伴会反（tai）驳（gang）了：现在都是扁平化时代了，做质感什么的太土了。
我们来对比下面两张图，大家觉得哪个设计比较好一些。
可以看出来右面的质感明显要比左边的强，看看起来却是左边的比较“土”，所以设计的好坏与是否有质感没有直接关系，与设计手法有关。没有最好的技法，只有最适合的技法。
为了文章的易读性，将这篇文章分为三部分。
细节篇
我们所谓的细节，其实本质上就是输入我们人眼的视觉信息量，那么信息量最丰富的视觉元素莫过于真实的物体了。扁平化的设计风格到今天已经流行了十几年了，大家对于纯扁平的设计渐渐的有了审美疲劳（当然，厉害的设计师也是能用扁平的手法做出新颖的设计来）。因此最近几年开始流行了微质感和毛玻璃的设计风格，既融合了扁平图形的精炼，又融入了真实物体的质感。
1.有光源，模拟真实物体
光很重要！光很重要！光很重要！重要的事情说三边。我们所看到的一切物体都是由光照亮的，光源的强弱，方向，颜色决定了我们对这个物体的感知。有光才有体积，才有空间。
2.营造空间感
空间感同样会提供给我们视觉信息量，不仅能让画面透气，还能进一步激发我们的想象空间，联想到真实的物理环境。
3.画面清晰度
大家可能会对这个问题不屑一顾，画面清晰不清晰跟设计关系有这么大吗。首先，同一个设计输出不同清晰度的图片可能会直接进影响你的过稿率。其次，画面中如果使用低质量的图片，就算过稿了，在后面开发上线的的时候也会出问题。
4.图形耐看
即使是纯扁平的单色图标也可以体现出细节。圆角，描边粗细，负空间等都是影响细节的因素。
质感篇
严格来说，质感其实是一个伪命题，它取决于我们观察事物的尺度。比如我们观察同一片草原，表现远处的草地质感我们可能用短线去描绘，而在中景的可能要更长一点的线段表现，而近处特写的草要表现出质感就要绘制出它的外轮廓和它的肌理了。
质感的三要素
古典主义色调变化的美学核心：变化丰富，层次分明——细而不腻。质感的塑造讲求一个度，太多了，就会过犹不及…
我们在塑造一个图标的质感之前首先要明确一个目标，它得是美的，就是要好看，不然再强的质感只是画蛇添足。
1.轮廓
不同形状的轮廓是可以产生不同的视觉感受的，封闭的直边给人硬朗的感觉，圆滑的曲线则给人柔软的感觉，如果是若隐若现的虚边或者是破碎的线则会更加柔软。画过素描的同学应该深有感触，在表现金属和衬布的时候轮廓就起到了很重要的作用。
2.颜色
颜色的深浅也会影响我们对于物体质感的感受，较深的物体会给人较硬的感觉，而颜色较浅的物体则会给人轻飘飘且柔软的感觉。这种感受也是来自于我们在日常生活观察中总结的经验。皮革多为深色有高光反射，帆布多为浅色且漫反射。
3.肌理
肌理可以理解为物体表面的纹理构造，相同颜色和外轮廓的物体表面在拥有不同纹理或不同颗粒度的时候也会体现出不同的质感。
实操篇
鲁迅曾经说过，不以实践为目的的理论都是耍流氓。下面我们就来实操一下！
需求：这是一个越野主题的HMI界面，需要做一套dock栏图标
分析需求：越野主题应该是给人以偏硬朗的感觉。
落实设计：图标
第一步——图形：直边，尽量少用圆角和弧线。
第二步——颜色：可以使用渐变模拟金属质感。
第三步——细节塑造：加一些折面突出立体感的同时也能加强一下硬朗的感觉。地面加一些反光营造空间感。
完成。
本次的分享就到这里了，觉得有帮助的小伙伴请点个赞再走呗😚
参考资料：
《反传统素描教程》
《画家之眼》
