头脑风暴14：GUI界面设计，你都有什么想法

tobot

转一篇我认为讲如何做GUI不错的文章，为了避免审核，我就不提原网址了。

tobot

一、谈「影」先谈「光」
有光才有影。如果理解了光与光对物体的作用，相信就会比较好理解各种阴影的形成了。因此我想先和大家聊聊光~

1. 光的基础逻辑

当光射在一件物体上时，会产生亮面、暗面以及投影。但我们细心观察还可发现物体会受到来自其他物体的反射光。


（光的基础逻辑）

2. 关于光源色、固有色与环境色

光源色是指射在物体上的光的颜色；
固有色指物体本身的颜色（当然我们所看到的所谓「物体颜色」是由它反射的光决定的←好像是初中科学的内容，跪）；
环境色是一个物体受到周围物体反射的颜色影响所引起的物体固有色的变化。
3. 光源的游戏

当我们在做设计、绘画、摄影等等的时候，灵活运用各种光、各种角度，就能营造出完全不同的氛围。好的投影效果，避不开好的打光水平。

我在这随意截取了几个苹果官网的产品展示效果，供大家参考。




4. 物体材质



（随手拍）

物体材质是非常重要的一个属性，不同材质会对光产生不同的反射。

如上图随手拍中，我们能看出鼠标表面是非常光滑的，因为它对光产生了较明显的镜面反射。而纸巾就看不到明显的反射光线，我能推测这个物体表面是比较「粗糙不平」的。而根据物体体积、材料等属性不同，阴影也会产生巨大差别。

在这推荐个手机游戏 Shadowmatic，你能看到非常多的材料在光下的反射效果。当然，游戏画面和可玩性都做得非常出色~


（Shadowmatic 游戏界面）

最后我想说个「禁忌」：不要用纯黑色做物体投影（除非要做特殊的艺术效果）。

二、模拟真实的投影


作者用 3D 软件精彩的表现了各种材质以及色彩效果。金属的光泽、帆布的纹理、羽毛的轻盈以及细腻的光影表现，看着这样的图标就是种享受啊



虽然只是用了纯白的背景，但通过图标下的阴影我们却能轻松想象出这枚图标所在的空间关系，这也是好的投影的作用：描述空间。



这样的效果图最近非常常见，厚重阴影效果，将中间的作品迅速「抬起」，我们甚至可以想象这张图是由摄影师从上往下拍摄的：准备好背景，将光打在偏右上方，将海报垫高，嗯……大概就是这样。

三、抽象的阴影效果


这是个 logo 设计。这个设计风格已经成为了这位设计师的招牌风格。使用轻微变化的色彩拉开层级关系，用形状勾勒阴影而不是普通的软阴影。



这种大角度的阴影也不错呢~夸张但是足够吸引人。



这是我自己随意做的一个脑洞。角色的造型本身就设计得非常卡通，于是在做投影的时候想着干脆用面来表现得了。做完感觉效果还不错，还能突出角色，于是就这么完成了。

四、我的几个 PS 投影技巧，建议视情况合理叠加运用
GC2016072815

（1. 运用好等高线）



（2. 运用固有色）



（3. 多叠几层阴影（因为真实的阴影大多都有许多层））



（4. 运用形状羽化（可灵活再编辑形状））



（5. 模糊效果（记得将图层转为智能对象方便再编辑））


最后因为本人知识有限，无法从 3D 角度深入谈光影及 3D 软件技巧。但希望本文能对想要优化 UI 投影表现的朋友有所帮助。谢谢~

本文转载，仅为个人行为（我觉得写得很好，希望有更多人看到），不妥之处请管理员删除。
本文链接：略，大家自己用搜索引擎去找吧
本文标签: GUI, GUI设计, 投影

zhang7309

图形化界面是发展的方向，更人性化，增加使用体验，有串口屏配合开发软件设计界面，直接串口发送指令就行了，不过成本有点高

andeyqi

做过仪表的demo  用的Embedded Wizard  ,入门上手门槛还可以不算高，UI效果也可以

超級稻草人

学习了。。

day_day

我接触的比较多的是电气设备操作面板的交互、电气屏柜的参数显示。在这些领域，以往用成品的设备诸如威纶通之类的触摸屏比较多。近些年随着设备交互数据量级提升、响应速度、定制化需求提高，HMI应用有上升的趋势。


对于一些简单的、快速启动、快速响应的应用，MCU的GUI框架比较多。以往类似迪文的GUI套件、EMWIN、TOUCHGFX这类付费市场比较宽广，但随着类似LVGL这类MIT的开源框架出来，也开始在部分稳定性要求不高的领域形成优势，带着行业往开源方向奔赴。但LVGL框架消耗资源多始终是痛点，这是许多付费框架仍能横行市场的依仗。


不过HMI领域主流的时钟还是以操作系统为底层GUI应用比较多，底层运行LINUX、安卓，上层运行Qt、WEB等应用。这些应用开发周期短，可定制化强，现成框架成熟、基于MPU的运行平台性能优异，有许许多多优势。劣势可能仅仅是启动速度和一些外设方面定制化能力较弱。如果考虑到成本，像全志V3s、D1s，成本可能比许多性能不如它的MCU更低，而且外围设备简单。

在开发自由度上，成熟的操作系统平台往往更容易设计出精美的界面，而MCU平台上想要达到同样的效果却需要大量贴图，往往各种框架给出的控件样式都是比较匮乏的。

现在主流审美中比较倾向的界面设计风格，一个方向是移动应用、WIN10风格方向强调“简约扁平”

另一个方向是大数据网页应用喜欢的科技蓝

北方.

①你觉得GUI界面应用于那些场景？
通常嵌入式的GUI界面比较丑陋，但是在lvgl和em-win的引入，使得GUI更炫了，这两个都提供了专属的开发界面，傻瓜上手，基本上所有的工业场景人机交互，都可以支持。
应该受性能限制的就是虚拟显示VR和XR增强显示还实现不了，不过，也非常值得期待一下。毕竟更早的工控显示界面还是用128x64点阵画图，没多久就不用了。
②针对GUI你有什么玩法？
最近刚做了一个游戏界面演示，分享了制作的过程，希望能和大家一起分享体会。
https://www.nxpic.org.cn/module/forum/thread-628045-1-1.html

xudongqiang

支持支持！

lalala55

lvgl 开源简单易用

mars5514

做个智能家居交互界面也不错