“美”“好”产品的用户体验，始于GUI设计

; @. g# }" ?6 V

2 ~- I: @8 |- V

新数字时代的人机沟通，交互场景都将融入视觉、触觉、手势或声音等多种感官体验，“美”和“好"则是设计和更新产品体验的两大重点。

( O9 ]$ \  d* B7 a4 w

所谓”美“，颜值即正义，图形用户界面要酷炫；所谓”好“，指产品要好用，比如交互界面要流畅，续航时间长等。

- c% O1 Q4 j, G2 l9 n

2 V; P7 D+ a) h$ `; I8 N

万物互联时代，出色的图形化用户界面（GUI）成为市场共识，与智能手机界面相似的 GUI 应用被广泛部署在物联网设备中。智能物联设备的应用场景中，低资源占用和低功耗需求是实现复杂图形用户界面不易跨越的技术难点。

4 ^. M5 r* z# e8 d  s

GUI 技术变革，普惠商业和社会

随着触摸屏和物联网技术的发展，各类电子产品呈现两个趋势：一是各类智能硬件从无屏到有屏，从黑白屏到高清彩屏，带电子屏的产品数量激增；二是人机界面更加酷炫流畅，交互功能趋向智能化。从下图可知，由于图形用户界面（GUI）技术的跨越式升级，快速推进了嵌入式产品的智能化，大幅提升了用户体验，降低了用户使用门槛，普惠更广泛的社会人群。

▲  HMI of Things

在新型的家电产品中，ST的GUI技术让高端产品可以抛开沉重的Linux框架，交互界面依然可以媲美智能手机般的体验。

即使是成本敏感的产品，STM32也能为之带来良好的用户体验。在以电池供电的产品中，STM32可以提供更优的功耗管理；在一个低色深、低分辨率的屏幕上，同样可以创建一个令人兴奋的动画，让性能不受限于硬件。

, Q9 a; w+ I' W# O4 @/ S5 ~7 U

* K, z/ k# ]* [  I1 o1 X

下面我们来看一个胶囊咖啡机器的GUI案例：http://mp.weixin.qq.com/s/QMJj8CLvn52TWrQrfyDFXg
/ r* w% r: c4 k& s4 n7 Q+ n


9 `& W6 r  p. x+ {& v3 w6 [% T

在可穿戴设备中，基于 STM32L4+ 和 TouchGFX 的GUI解决方案，不仅让智能手表的交互界面拥有更多颜色，具备菜单显示、表格显示、滚动翻页特效等动感效果，还大幅降低了功耗和应用负载，从而极大地延长了续航时间。

http://mp.weixin.qq.com/s/QMJj8CLvn52TWrQrfyDFXg
5 d* p" }1 W3 x

智能手表的 GUI 效果
* }/ U% G/ R# ]- N' n$ O/ C

3 g; P# L0 I8 x  C- }4 V

先进的 STM32 图形产品线

STM32的图形产品线非常丰富，拥有190多个型号, 涵盖不同的显示接口和封装。

  ~5 C) P& W, g1 s+ Y# P  @

▲  STM32的图形产品线型号

STM32图形产品线的内核从M0+到M7一应俱全，主频从64Mhz到400Mhz，硬件分含硬件加速器和无硬件加速器的平台，可满足用户从低端到高性能、以及低功耗的不同GUI需求；支持SPI、Intel的8080/6800、TFT和MiPI各类接口，分辨率最大可支持到XGA，即1024*768；产品封装也多样可选。

面向图形应用的STM32产品最多可包含三个图形加速器，内含Chrom-ARTAccelerator™、Chrom-GRC™和硬件JPEG加速器。详情请见上表。

Chrom-ARTAccelerator™可以减轻负载，具有高效2D图像复制、透明度处理和像素格式转换高效字体的管理功能。

http://mp.weixin.qq.com/s/QMJj8CLvn52TWrQrfyDFXg
6 S: T: }1 _1 m6 c" h: O

采用Chrom-ART™后，CPU负载为4%

未采用Chrom-ART™，CPU负载高达84%

Chrom-GRC™可裁剪非正方形显示的图形资源，不需要进行软件修改或特殊管理，从而节省高达20%的RAM。

▲  Chrom-ART™的性能示意

硬件JPEG加速器可快速实现简单的JPEG压缩和解压缩，全面管理JPEG报头，支持MJPEG视频。MJPEG视频加速器不仅可节省CPU资源，还可通过开机时的品牌动画或内置教程视频，增强品牌影响力和用户体验。

领先的图形软件库和工具集

STM32的图形软件有两套方案：针对动画受限、简单GUI设计的STemWin和可实现手机GUI性能的TouchGFX，TouchGFX是已成为STM32软件生态的重要组成部分。两者均可在STM32上免费使用。

STemWin基于Segger公司的emWin GUI库，编程语言为C语言，支持1/8/16和32 bpp，项目初始化时可采用GUI构建器，与STM32 Cube生态系统集成。

TouchGFX是ST力推的GUI应用软件，可实现从简单到可与智能手机媲美的GUI设计，具备针对STM32优化的GUI库，采用C++语言编程，支持1/2/4/16和24 bpp，具有可生成完整代码的GUI构建器。目前，TouchGFX已完全集成在CubeMX中。

! Y& V0 d, [3 R) {: a

▲  TouchGFX 为您带来简约而不简单的GUI开发之旅

TouchGFX 的软件架构和灵活性可轻松创建、实现多种UI设计；非常易于使用，具有所见即所得的设计器，可自动生成代码，并具备C++的语言效率和灵活性。TouchGFX 可快速启动并实现高端GUI所需的一切，助您在STM32上实现与智能手机相媲美的GUI性能。

5 i+ P/ h7 C& K* W

TouchGFX 包括三部分：

• TouchGFX Generator
• TouchGFX Designer
• TouchGFX Engine
  
  

▲  TouchGFX 三大组成部分

▲  TouchGFX Generator 界面

TouchGFX Generator作为CubeMX插件可快速启动GUI项目，帮助您在STM32上自定义硬件并设置和配置项目，为在TouchGFX Designer中开发UI应用程序做好准备。在项目开发过程中，开发者可以在CubeMX中更改项目配置，更改的部分将自动在 TouchGFX Designer 中更新项目中的图形设置。TouchGFX Generator还增加了对CubeIDE的支持，在CubeMX中选择IDE（CubeIDE，IAR或Keil）后，即可为所选的IDE生成TouchGFX项目文件。

2 l% l3 g! H; d$ r- ~7 y

▲  TouchGFX Designer 是GUI设计的灵魂

TouchGFX Designer 是GUI设计开发的核心，为整个GUI开发中提供支持。简单的拖放与即用型高质量样本图形相结合，开发者能够在几分钟内完成从构思到原型，不需要高级设计和编程技能或 TouchGFX 知识；当进入从原型到产品的开发阶段，开发者需要简化创建屏幕和自定义控件的视觉设计和布局，TouchGFX Designer 将起到关键作用。TouchGFX 应用程序代码会随着在Designer中所做的更改而自动更新。

• 结构(Structure)：TouchGFX Designer 实现设计逻辑复杂且内容清晰的多重显示界面易如反掌；
• 控件(Widgets)：丰富的控件选择，比如 Swipe container, 滚动列表等；
• 交互(Interactions)：增加动态交互控制，用于创建友好的用户交互应用；
• 自定义容器(Custom Container)：自定义可复用的UI控制组合；
• 文本处理(Text Handling)：支持多语言文本, 包括拉丁文、西里尔文、阿拉伯文、中文和日文等。
  
  

▲

  TouchGFX Engine 优化图形界面效果

和硬件资源

TouchGFX Engine，专为STM32硬件资源和加速器优化而生，可优化MCU负载和存储、编译与实时分析、并加速STM32硬件的使用，具有先进的渲染算法和高级图形对象功能。         

7 Q, G$ b' J: M8 r' g5 @

全面的参考设计和全球化支持

STM32具有多种显示尺寸和接口的开发套件供选择。

( v) ~" _7 Y5 F8 X8 j5 ~& G

▲  多种参考设计覆盖高中低端及低功耗需求

TouchGFX Designer 中的UI应用程序示例可在STM32上免费使用。

▲

  TouchGFX Designer中有丰富的UI应用程序示例

5 a7 d  e$ q1 S& |/ x* b

高度拓展的图形生态系统

意法半导体与相关第三方积极合作，以拓展STM32 图形产品应用。

▲  STM32图形生态合作伙伴

上图中的服务商可协助开发者在 STM32 微控制器上创建基于 TouchGFX 的UI。凭借创新的方法以及对 TouchGFX 和 STM32 微控制器的深刻理解，他们可成为您的嵌入式GUI产品的理想业务伙伴，帮助您快速、轻松地完成从构思到最终产品交付的整个过程或部分环节，服务形式涵盖产品移植、应用开发、现场支持、技术培训、硬件开发、完整的交钥匙解决方案、用户体验设计、图形界面设计和代工等。
# x4 W2 [* w  Y; K. S2 g) ]0 |
* ?0 b" i* }$ C- `' I( F, C