嵌入式GUI开发：emWin核心2D绘图与数值显示函数实战解析

1. 嵌入式GUI开发中的图形基石：为什么是emWin？

在嵌入式系统开发这个行当里，给冰冷的芯片和电路板赋予一个“看得见、摸得着”的交互界面，是产品从原型走向成熟的关键一步。这活儿听起来简单，不就是画点线面、显示几个数字吗？但真干起来，你会发现这里头的水深得很。资源受限的MCU、有限的RAM和Flash、对实时性的苛刻要求，还有五花八门的显示屏驱动，每一项都是拦路虎。早年做项目，要么自己从零开始撸一个图形库，费时费力还容易出Bug；要么用一些开源方案，但文档不全、性能不稳，调试起来能让人掉一把头发。

后来接触到SEGGER的emWin，才算是找到了一个相对靠谱的“瑞士军刀”。它不是什么新潮玩意儿，但胜在稳定、高效、功能全面。特别是它的2D绘图和数值显示函数，可以说是构建任何嵌入式GUI界面的砖瓦。很多新手拿到emWin的官方手册，看到那几百页的API列表可能就懵了，感觉无从下手。其实，核心的、高频使用的函数就那么几十个，吃透了它们，你就能解决80%的界面绘制问题。今天，我就结合自己这些年踩过的坑和积累的经验，把emWin里最核心的2D绘图和数值显示函数掰开揉碎了讲清楚，重点不是复读手册，而是告诉你这些函数在实际项目里怎么用、有哪些坑、怎么组合起来效率最高。

2. 数值显示：不仅仅是printf那么简单

在嵌入式界面上显示数据，尤其是动态变化的传感器读数、状态码、参数配置，是最基本的需求。你可能会想，用C标准库的sprintf格式化字符串，再用文本显示函数画出来不就行了？在PC上可以，但在资源紧张的嵌入式环境里，这往往是性能瓶颈和内存碎片的主要来源。emWin提供了一系列专为嵌入式优化的数值显示函数，它们直接操作显示缓冲区，避免了中间字符串的转换和内存分配，效率要高得多。

2.1 浮点数显示的精度与对齐艺术

浮点数显示是嵌入式GUI中最容易出问题的地方之一。emWin提供了几个函数：GUI_DispFloat,GUI_DispFloatFix,GUI_DispSFloatFix,GUI_DispFloatMin,GUI_DispSFloatMin。光看名字就有点晕，其实它们的区别核心在于两点：是否固定总长度和是否强制显示符号。

GUI_DispFloat(float v, char Len)：最基础的显示。它的逻辑是：我给你一个浮点数v和一个最大显示字符数Len（含小数点），我尽量用最紧凑的方式把它显示出来，并且抑制前导零。比如GUI_DispFloat(123.456, 9)，它会显示“123.456”。如果数字是0.00123，它也会聪明地显示“0.00123”而不是“000.00123”。但这里有个大坑：Len参数指定的是最大字符数，不是精确字符数。如果你希望一组数字能右对齐显示在表格里，用这个函数就会参差不齐，因为123.456和-45.67占用的宽度天生不同。

GUI_DispFloatFix(float v, char Len, char Decs)：用于表格对齐的利器。这个函数解决了对齐问题。Len是固定的总字符数（含符号、小数点），Decs是固定的小数位数。例如GUI_DispFloatFix(123.456, 8, 2)会显示“ 123.46”（前面有个空格，总长8字符，四舍五入到两位小数）。如果是负数GUI_DispFloatFix(-123.456, 8, 2)，则显示“-123.46”。注意，它不抑制前导零，所以GUI_DispFloatFix(0.1, 8, 2)会显示“ 000.10”。这保证了同一列数据完全对齐，非常适合显示实时数据表格。我在一个温控器项目里，就用它来显示当前温度、设定温度、输出功率等参数，整整齐齐，视觉效果很专业。

GUI_DispSFloatFix和GUI_DispSFloatMin：始终显示符号位。这两个函数名字里的S代表Signed，即始终显示符号位。对于正数，它也会显示一个“+”号。这在显示变化量（如“+1.5℃”）或者需要明确指示正负的场合非常有用。GUI_DispSFloatFix(123.456, 8, 2)会显示“+123.46”。这在某些工业仪表界面中是强制要求，能避免误读。

GUI_DispFloatMin和GUI_DispSFloatMin：紧凑显示，长度自适应。当你不需要对齐，只希望用最省屏幕空间的方式显示一个浮点数时，用这两个。你只需要指定最小的小数位数Fract。函数会自动计算需要多少字符，并抑制前导零。比如GUI_DispFloatMin(123.456, 2)可能显示“123.456”（因为小数部分超过2位），而GUI_DispFloatMin(123.4, 2)会显示“123.4”。它非常灵活，但同样无法用于需要精确对齐的场景。

实操心得：浮点数显示的性能陷阱虽然这些函数比sprintf高效，但在频繁刷新（比如每秒60帧）时，浮点数运算本身在无FPU的MCU上仍是负担。一个优化技巧是：对于固定小数位数的显示，可以将浮点数放大为整数再处理。例如，要显示温度25.6℃（一位小数），可以在内部用整数256存储和计算，显示时调用GUI_DispDec(256/10)和GUI_DispDec(256%10)来分别显示“25”和“.6”。这能完全避免浮点运算。emWin的数值显示函数本身不负责四舍五入，如果你用GUI_DispFloatFix，它内部会做舍入，但如果你自己做整数转换，就需要自己处理舍入逻辑。

2.2 二进制与十六进制：调试与状态监控的利器

除了浮点数，嵌入式开发中经常需要查看寄存器、原始数据包或状态位，这时二进制和十六进制显示就派上用场了。

GUI_DispBin(U32 v, U8 Len)和GUI_DispBinAt(U32 v, I16P x, I16P y, U8 Len)这两个函数用于显示二进制。Len指定显示的位数，包括前导零。例如，GUI_DispBin(0x0F, 8)会显示“00001111”。这在显示一组开关量输入状态（比如8路DI）时非常直观。我常用GUI_DispBinAt函数，把8路、16路甚至32路IO状态直接以二进制形式固定在屏幕的某个区域，调试时一目了然。注意，它显示的是无符号整数的二进制形式，LSB（最低有效位）在右边。

GUI_DispHex(U32 v, U8 Len)和GUI_DispHexAt(U32 v, I16P x, I16P y, U8 Len)十六进制显示更常见，用于显示地址、数据长度、校验和等。Len指定显示的十六进制数字的个数。例如，GUI_DispHex(0xABCD, 4)显示“ABCD”。这里有个细节：v是U32类型，但实际显示时，如果你指定Len=2，它只会显示低16位的两个十六进制数字。这在显示ADC原始值（比如12位ADC结果0x0FFF）时很方便，你可以用GUI_DispHex(adc_value, 3)来显示“FFF”。

注意事项：数值显示的位置管理GUI_DispXXX系列函数（不带At的）都是在当前文本位置输出。这个位置由GUI_GotoX()、GUI_GotoY()或上一次文本输出函数自动更新。如果你需要在一行内混合显示不同格式的数字和文字，需要小心计算位置，或者直接使用带At后缀的函数（如GUI_DispFloatAt,GUI_DispHexAt）进行绝对定位。混合使用时，一个常见的错误是忘记更新或重置文本位置，导致显示重叠。我的习惯是，对于固定布局的静态文本使用At函数；对于连续输出的动态数据，使用GUI_DispString和GUI_DispFloat等，并利用\n换行或手动GUI_GotoXY来控制。

2.3 版本信息获取：GUI_GetVersionString()

这个函数很简单，返回一个表示emWin版本号的字符串常量，比如“5.32”。在系统启动界面或关于页面显示这个信息，对于后期维护和问题排查非常有用。你可以通过GUI_DispString(GUI_GetVersionString())来显示它。确保你链接的库版本和头文件版本一致，避免因版本差异导致的API不可用问题。

3. 2D图形绘制：从像素到复杂图形

如果说数值显示是GUI的“文字”，那么2D图形就是GUI的“图画”。emWin的2D图形库相当完备，从画一个点、一条线，到填充多边形、绘制圆弧和位图，应有尽有。它的实现针对嵌入式处理器做了大量优化，比如使用 Bresenham 算法画线，避免浮点运算。

3.1 绘图上下文与基础设置

在开始画图之前，必须理解几个核心状态，它们构成了“绘图上下文”：

1. 当前窗口/客户区：所有绘图操作都发生在当前窗口的客户区内。通过GUI_GetClientRect()可以获取当前可绘制的矩形区域，超出部分的绘制会被自动裁剪掉，这是防止画到屏幕外的基础保障。
2. 绘图模式：通过GUI_SetDrawMode()设置。最常用的是GUI_DM_NORMAL（正常覆盖）和GUI_DM_XOR（异或模式）。异或模式在实现“橡皮筋”拖动、高亮选择或光标闪烁时非常有用。比如，用同一条线在同一个位置画两次，第一次出现，第二次就消失，屏幕恢复原样。但手册里明确警告：XOR模式在与非单色、或画笔大小大于1时，可能行为异常。我曾在用粗线条（GUI_SetPenSize(2)）时开启XOR模式，结果线条交叉点出现了奇怪的颜色，排查了很久才发现是这个限制。
3. 画笔大小：GUI_SetPenSize(U8 PenSize)。影响所有矢量绘图函数（线、多边形轮廓、圆弧等）的线条宽度。设置为1就是单像素细线。增大笔刷可以画粗线，但注意，笔刷大小大于1时，不能使用非实线的线型（通过GUI_SetLineStyle()设置）。
4. 裁剪区域：GUI_SetClipRect()。这是一个高级功能，允许你设置一个比窗口更小的矩形区域，所有后续绘图只在这个区域内生效，超出部分不绘制。这在做局部刷新、绘制滚动控件或复杂动画时能极大提升效率。务必记得在裁剪绘制完成后，用GUI_SetClipRect(NULL)恢复为默认裁剪区（即整个窗口），否则后续绘图可能“消失”。

3.2 基本图形绘制：矩形、圆、线与多边形

这是最常用的一组函数，它们的参数命名很直观：(x0, y0)代表矩形左上角或圆心，(x1, y1)代表矩形右下角。

绘制矩形和填充矩形是最基础的操作。这里有个性能上的重要区别：GUI_FillRect()的填充速度远快于用GUI_DrawLine()画四条线。因为填充操作是针对一块连续内存的块操作，而画线是多次像素操作。所以，需要实心矩形时，一定要用GUI_FillRect。

圆角矩形的r参数是圆角半径。这里有个坑：半径不能超过矩形短边的一半。比如一个100x50的矩形，你设置r=30，实际效果可能很奇怪，因为emWin内部会做限制。安全的做法是取min(宽度，高度)/2。

画线函数族：GUI_DrawLine使用绝对坐标，GUI_DrawLineTo从当前画笔位置画到指定点，GUI_DrawLineRel使用相对坐标。配合GUI_MoveTo移动画笔位置，可以高效地绘制连续折线，比如波形图。GUI_DrawPolyLine则是直接给一个点数组来画多段线。

实操心得：图形绘制顺序与重叠处理emWin没有自动的Z-order（深度）管理。后绘制的图形会覆盖在先绘制的图形之上。这要求开发者必须自己规划好绘制顺序。通常的顺序是：背景 -> 静态装饰图形 -> 动态数据图形（如波形、指针） -> 文本和按钮。对于需要透明效果的重叠，就需要用到下一节讲的Alpha混合。

3.3 高级渲染：渐变与Alpha混合

为了让界面更有质感，emWin提供了渐变填充和Alpha混合功能。

渐变填充：GUI_DrawGradientH和GUI_DrawGradientV分别创建水平和垂直的线性渐变。你需要指定矩形区域和两个顶点的颜色。颜色值是GUI_COLOR类型，通常是RGB888格式（如0xFF0000表示红色）。还有圆角矩形的渐变版本GUI_DrawGradientRoundedH/V。渐变计算会消耗一定的CPU资源，在低端MCU上应避免大面积或频繁刷新渐变区域。

Alpha混合：这是实现半透明效果的关键。emWin的Alpha值（0-255）存储在颜色的最高8位（bits 24-31）。0表示完全不透明，255表示完全透明。启用Alpha混合后，绘制任何图形都会根据其颜色中自带的Alpha值（或全局设置的Alpha值）与背景进行混合。

启用Alpha混合有两种方式：

1. 自动Alpha（推荐）：调用GUI_EnableAlpha(1)。之后，你设置的颜色如果包含Alpha分量（如(0x80uL << 24) | GUI_RED），就会自动产生半透明效果。这是最灵活的方式。
2. 全局Alpha（已过时但可用）：调用GUI_SetAlpha(value)。这会为所有后续的绘图操作设置一个统一的透明度，直到你再次更改它。务必在不需要时设回0，否则整个界面都可能变透明。

// 示例：绘制三个半透明叠加的色块 GUI_EnableAlpha(1); // 启用自动Alpha混合 GUI_SetBkColor(GUI_WHITE); GUI_Clear(); // 绘制一个半透明的红色方块 (Alpha = 0x40，约25%不透明) GUI_SetColor((0x40uL << 24) | GUI_RED); GUI_FillRect(0, 0, 49, 49); // 绘制一个更透明的绿色方块 (Alpha = 0x80，约50%不透明) GUI_SetColor((0x80uL << 24) | GUI_GREEN); GUI_FillRect(20, 20, 69, 69); // 绘制一个浅透明的蓝色方块 (Alpha = 0xC0，约75%不透明) GUI_SetColor((0xC0uL << 24) | GUI_BLUE); GUI_FillRect(40, 40, 89, 89);

这段代码会生成三个重叠的色块，重叠部分颜色会混合，产生类似玻璃纸叠加的效果。这在制作阴影、高光、蒙版或者非矩形窗口时非常有用。

注意事项：Alpha混合的性能与内存Alpha混合是像素级的运算，对CPU计算量要求较高。在低性能MCU上大面积使用可能导致帧率下降。此外，有些LCD控制器硬件支持Alpha混合（Overlay），如果emWin配置为使用硬件加速，那么GUI_DrawBitmapHWAlpha这样的函数会直接利用硬件，效率极高。在项目选型时，如果需要丰富的透明效果，务必评估MCU的算力和LCD控制器的功能。

3.4 位图显示：静态资源与动态流

在界面上显示图标、Logo或复杂图片，离不开位图。emWin支持从1位单色到32位带Alpha通道的各种位图格式。

静态位图：最常用的方式是使用SEGGER提供的Bitmap Converter工具，将PNG、BMP等图片转换成C数组，链接到你的工程中。然后用GUI_DrawBitmap(const GUI_BITMAP * pBM, int x, int y)显示。这种方式简单直接，但图片数据会占用大量的Flash空间。对于大图片，需要考虑压缩。

动态流式位图：emWin提供了一系列GUI_DrawStreamedBitmapXXX和GUI_CreateBitmapFromStreamXXX函数。它们允许你从文件系统、网络或任何存储介质中“流式”读取并显示位图，而不需要一次性将整个位图文件加载到RAM。这对于显示存储在外部Flash或SD卡中的大图至关重要。你需要实现一个“流”接口（通常是回调函数），emWin会按需请求位图数据。

位图缩放与镜像：GUI_DrawBitmapEx函数功能强大，它允许你指定一个锚点(xCenter, yCenter)和缩放因子(xMag, yMag)。通过设置缩放因子为负数，可以实现水平或垂直镜像。这在制作对称图形或动画时很有用。

// 示例：水平翻转并放大一个位图 extern const GUI_BITMAP bmArrow; // 在坐标(50,50)处显示位图，以位图中心(16,16)为锚点，水平方向放大2倍并翻转（xMag = -200），垂直方向不变。 GUI_DrawBitmapEx(&bmArrow, 50, 50, 16, 16, -200, 100);

避坑指南：位图转换与颜色深度使用Bitmap Converter时，最重要的选择是颜色深度和格式。对于单色OLED，选择1bpp；对于256色屏幕，选择8bpp（调色板）；对于真彩屏，选择16bpp（RGB565）或24bpp（RGB888）。选择的原则是：在满足视觉效果的前提下，使用最低的颜色深度。RGB565比RGB888节省三分之一的内存和带宽，很多时候肉眼难以区分。另外，如果图片有大片纯色区域，可以考虑启用RLE（游程编码）压缩，能进一步减小体积。但要注意，压缩的位图在绘制时需要CPU解压，会稍微增加绘制时间，这是一种典型的“空间换时间”的权衡。

4. 综合实战：构建一个实时数据仪表盘

理论讲得再多，不如看一个实际例子。假设我们要为一个电机控制器开发一个简单的仪表盘界面，需要显示实时转速（浮点数）、IO状态（二进制）、错误码（十六进制），并绘制一个转速表盘（圆形、指针）和一条实时转速曲线。

4.1 界面布局与初始化

首先，我们规划屏幕布局：顶部显示标题和版本；左侧用大字体显示实时转速；中间绘制一个模拟表盘；右侧以二进制显示8路IO状态；底部显示错误码和绘制转速曲线。

void MainTask(void) { GUI_Init(); // 初始化emWin GUI_SetBkColor(GUI_BLACK); GUI_Clear(); GUI_SetColor(GUI_WHITE); GUI_SetFont(&GUI_Font24B_ASCII); // 1. 显示标题和版本 GUI_DispStringAt("Motor Controller Dashboard", 5, 5); GUI_SetFont(&GUI_Font8x8); GUI_DispStringAt("emWin Ver:", 5, 35); GUI_DispString(GUI_GetVersionString()); // 设置后续绘制使用的字体和颜色 GUI_SetFont(&GUI_Font16_ASCII); GUI_SetColor(GUI_GREEN); }

4.2 实现实时数据刷新

数据刷新不能在MainTask里无限循环，那样会阻塞。通常我们会放在一个定时器中断或者RTOS的任务中。这里假设有一个1ms的定时器，每50ms（20Hz）更新一次数据。

// 假设的全局变量 float g_fSpeed = 0.0; // 转速，单位RPM U16 g_u16IOStatus = 0x00; // IO状态，每bit代表一路 U32 g_u32ErrorCode = 0x0; // 错误码 // 在定时器回调或任务中 void UpdateDisplay(void) { static int s_xPos = 10; // 曲线图X轴起始位置 int yPos; // 2. 刷新实时转速 (固定格式，右对齐) GUI_SetColor(GUI_YELLOW); GUI_SetFont(&GUI_Font32B_ASCII); GUI_DispFloatFix(g_fSpeed, 8, 1); // 总长8字符，1位小数，显示在固定位置 GUI_DispStringAt(" RPM", 180, 60); // 3. 刷新IO状态 (二进制显示，8位) GUI_SetColor(GUI_CYAN); GUI_SetFont(&GUI_Font8x8); GUI_DispStringAt("IO Status:", 250, 100); GUI_DispBinAt(g_u16IOStatus, 260, 120, 8); // 在(260,120)显示8位二进制 // 4. 刷新错误码 (十六进制显示) GUI_SetColor(GUI_RED); GUI_DispStringAt("Error Code: 0x", 250, 150); GUI_DispHexAt(g_u32ErrorCode, 350, 150, 4); // 显示4位十六进制 // 5. 绘制转速曲线 (在底部区域) GUI_SetColor(GUI_GREEN); // 将转速映射到屏幕Y坐标 (假设0-3000 RPM映射到 200-50 像素) yPos = 200 - (int)((g_fSpeed / 3000.0) * 150.0); yPos = (yPos < 50) ? 50 : yPos; // 限制边界 GUI_DrawPoint(s_xPos, yPos); // 画点 // 更新X位置，实现滚动效果 s_xPos++; if(s_xPos > 230) { // 滚动到最右边后，清空左侧区域重新开始 GUI_SetColor(GUI_BLACK); GUI_FillRect(10, 50, 230, 200); GUI_SetColor(GUI_GREEN); s_xPos = 10; } }

4.3 绘制模拟表盘

表盘绘制属于静态或半静态图形，可以在初始化时完成，指针刷新在动态部分。

void DrawSpeedMeter(void) { int centerX = 120, centerY = 150, radius = 80; int i; // 绘制表盘外圈 GUI_SetColor(GUI_LIGHTGRAY); GUI_FillCircle(centerX, centerY, radius); GUI_SetColor(GUI_DARKGRAY); GUI_DrawCircle(centerX, centerY, radius); GUI_DrawCircle(centerX, centerY, radius-5); // 绘制刻度 (从0到3000 RPM，每500一个主刻度) GUI_SetColor(GUI_WHITE); GUI_SetFont(&GUI_Font8x8); for(i=0; i<=3000; i+=500) { float angle = (i / 3000.0) * 300.0 - 150.0; // 将-150度到+150度映射到0-3000 float rad = angle * 3.14159 / 180.0; int x1 = centerX + (int)((radius-10) * cos(rad)); int y1 = centerY + (int)((radius-10) * sin(rad)); int x2 = centerX + (int)(radius * cos(rad)); int y2 = centerY + (int)(radius * sin(rad)); GUI_DrawLine(x1, y1, x2, y2); // 画刻度线 // 刻度值文本 char str[6]; sprintf(str, "%d", i); // 这里简单用sprintf，实际项目可优化 int tx = centerX + (int)((radius-25) * cos(rad)) - 8; int ty = centerY + (int)((radius-25) * sin(rad)) - 4; GUI_DispStringAt(str, tx, ty); } // 绘制初始指针 (后续动态更新) DrawMeterNeedle(centerX, centerY, radius-15, g_fSpeed); } // 绘制指针函数 void DrawMeterNeedle(int cx, int cy, int len, float speed) { static float s_oldSpeed = -1.0; static int s_oldX, s_oldY; // 计算指针角度 (0-3000 RPM 映射到 -150度到+150度) float angle = (speed / 3000.0) * 300.0 - 150.0; float rad = angle * 3.14159 / 180.0; int x2 = cx + (int)(len * cos(rad)); int y2 = cy + (int)(len * sin(rad)); // 用XOR模式擦除旧指针 if(s_oldSpeed >= 0) { GUI_SetDrawMode(GUI_DM_XOR); GUI_SetColor(GUI_WHITE); // XOR模式下，用白色画两次等于擦除 GUI_DrawLine(cx, cy, s_oldX, s_oldY); GUI_SetDrawMode(GUI_DM_NORMAL); } // 绘制新指针 GUI_SetColor(GUI_RED); GUI_SetPenSize(3); // 设置指针粗细 GUI_DrawLine(cx, cy, x2, y2); GUI_SetPenSize(1); // 恢复默认笔刷 // 记录旧指针位置 s_oldSpeed = speed; s_oldX = x2; s_oldY = y2; }

在UpdateDisplay函数中，每次更新转速g_fSpeed后，调用一次DrawMeterNeedle来更新指针。

4.4 性能优化与常见问题排查

1. 局部刷新：上面的仪表盘，每次UpdateDisplay都会重绘整个曲线区域和指针，如果区域很大，会非常慢。优化方法是只刷新变化的部分。对于曲线，可以用GUI_DrawLine连接新旧两个点，并只清除最旧的一个点所在的竖条区域。对于指针，我们使用了XOR模式，这是一种高效的局部更新方式。

2. 闪烁问题：如果直接在主循环中连续调用GUI_Clear()再重绘所有内容，会出现严重闪烁。emWin通常采用双缓冲或局部刷新来解决。确保你的LCD驱动实现了LCD_X_Config中指定的多缓冲机制，或者在GUI任务中合理使用GUI_Exec()来管理刷新。

3. 内存不足：显示大位图或使用大量字体时，容易触发内存不足。症状可能是显示错乱、死机。使用emWin的内存管理函数GUI_ALLOC_Alloc等，并密切关注GUI_GetUsedMem()的返回值。对于流式位图，确保数据流读取函数没有内存泄漏。

4. 数值显示异常：如果浮点数显示为“-1.#J”或“NaN”，说明传入的值超出了float的有效范围或是一个非法值。在调用显示函数前，务必对传感器数据进行有效性检查和限幅。对于GUI_DispBin或GUI_DispHex，如果显示长度Len小于数值实际需要的位数，高位会被截断，这可能不是你想要的效果。

5. 绘制函数不生效：首先检查是否在有效的窗口客户区内绘制；其次检查当前绘图模式是否为GUI_DM_NORMAL；然后检查画笔颜色是否与背景色相同；最后，确认没有设置裁剪区域(GUI_SetClipRect)限制了绘制。调试时，可以尝试先画一个大的、颜色鲜艳的GUI_FillRect，看是否能显示，来逐步缩小问题范围。

通过这样一个完整的仪表盘实例，我们把数值显示、基本图形绘制、位图（如果表盘背景用图片）、Alpha混合（可用于指针阴影）和动态刷新都串联了起来。在实际项目中，你可能还需要结合窗口管理器(WM)来管理不同的界面元素和用户输入，但底层这些2D绘图函数是所有高级控件的基础。掌握它们，你就掌握了用代码在嵌入式屏幕上“作画”的基本功。剩下的，就是发挥你的创意，去构建既高效又美观的人机界面了。