REALTEK 样机（KTD2851A 平台配 43680 安卓 TV）

UI 交互+视觉分析

技术研究所 | UI 设计

目 录

一、 UI 风格..............................................................................................................................................1

（一） 色彩........................................................................................................................................1

（二） 图形........................................................................................................................................2

（三） 字体........................................................................................................................................4

（四） 动效........................................................................................................................................4

二、 界面布局架构 ..................................................................................................................................6

（一） 垂直分列布局.......................................................................................................................6

（二） 网格滑动布局.......................................................................................................................7

（三） 分列+网格平铺....................................................................................................................8

（四） 右侧弹窗布局.....................................................................................................................10

三、 优缺点评估.....................................................................................................................................11

（一） 优点......................................................................................................................................12

（二） 不足......................................................................................................................................12

四、 总结.................................................................................................................................................13

1

一、UI 风格

该型样机搭载的是 Android11 系统，系统 UI 肯定是不能更改的，经研究该

样机只在独立出来的MENU菜单和MMP以及Live TV三个版块进行了UI设计。

整体 UI 风格采用纯蓝灰色调，但和系统原 UI 配色有所差异。

（简约型 UI 风格）

（一）色彩

整体的操作界面风格为简洁的纯蓝灰色调；字体颜色为接近白色的亮灰色；

聚焦为灰色焦点加白字，子菜单的激活状态没有颜色上的深浅变化。

总体而言菜单的色彩运用上简洁普通，是属于常见的 UI 类型，没有个性和

亮点。

2

（纯蓝灰色调）

（二）图形

icon 图标的设计感觉不是很统一，在菜单项中的图标为扁平的亮灰色图标，

但是在 MMP 中的图标又是半立体的蓝色渐变图标，风格上没有形成统一。

3

（单色扁平化图标）

（彩色渐变图标）

4

（三）字体

所有操作界面统一使用的是一种类似于黑体的字体，在字体大小上满足最佳

观影距离（3~ 3.5m）所承受的最小值 24px，加上字体本身笔画线条粗细较均

匀，

保证了远距离观看的识别度；字体在不同层级中只表现为大小和颜色深浅的区

别，并未进行加粗处理，这样的设计规范使得全套 UI 更统一协调。

（四）动效

好的动效可以让操作过程变得有趣味性，同时也一些操作流程的状态更加直

观的展现给用户。而在 PHILIPS 的 UI 设计中并没有使用大量的动效设计，其动

效主要运用在界面跳转时全屏状态下“等待”过程中的旋转动效，以及“正在连

接”时三点上跳摆动的提示动画，而菜单弹出和焦点移动的动画也主要使用平移

弹出和简单的平移等动画，这或许也是为了切合整体简灰大气的风格而作出的取

舍，而简单平移的动效使得操作时的流程感更加简洁明了，商务适应性更好。

但从另一个角度来讲，合理的动效并不会对整体的一个简约、商务风格造成

破坏，反而会给操作体验带来更多的活力。而 PHILIPS 在动效运用量极少的同时，

所采用的也是比较常规的动态表现形式，从全屏的独立动效到操作流程中的菜单

项聚焦滑动，以及界面间的跳转，都是最为常见的动态形式，例如菜单项的焦点

滑动，除了焦点框本身的平移滑动外不伴随其他的效果，例如选项的字体放大之

类的效果，操作下来的感受就是简单直接，感官上略显平淡。

5

（界面跳转时的等待动效——旋转）

（正在连接动效——三点上下摆动）

6

二、界面布局架构

PHILIPS 的 UI 界面布局主要有垂直分列、网格滑动、分列+网格平铺、右侧

弹窗等布局形式，根据对应的内容需要采用合适的布局形式，保证了整体设计统

一性的同时也把内容更好的呈现给用户，例如在设置界面中采用分列布局的形

式，而在媒体库则是采用分列加网格平铺的形式，视觉上就是把设置中的最右边

一列的效果说明转化为网格平铺的形式，最终都能给用户呈现最好的操作思路。

（一）垂直分列布局

在设置界面中，界面布局主要采用的是垂直分列的布局，从左往右层级依次

递减，而且这是在同一个大背景上完成的，背景色上并没有作层级划分，只是通

过竖线将各层级内容板块化分割。

这类型的设计操作思路清晰可见，列表式排列可以容纳更多的内容，使得每

一个一级菜单下包含的内容都可实时在二级菜单中呈现，同时在最右边栏通过图

文形式清楚展示了对应设置的直接效果，所见即所得，给予了用户最直观的感受，

提高了操作效率。

7

（设置菜单中的垂直分列式布局）

（二）网格滑动布局

在观影界面，导航栏是从底部弹出的网格排列形式，可水平、垂直方向滑动

操作，资源在呈现效果上都以大于一行/列的形式出现，以让用户知道在当前内

容外仍有内容可寻。

在操作形式上，PHILIPS 在观影界面下部的资源库中采用固定聚焦的方式，

即焦点永远停留在左上角的位置，只是资源内容整体滑动，聚焦到所选择的资源

时，图标外观表现出放大，并增加了白色底，字体颜色由黑色变白色。这样的固

定聚焦方式在网格类布局的情形下个人觉得并不是最好的聚焦选择，因为在网格

排列中，用户的视线会有意无意的延伸到整个资源库，而不会只停留在焦点中，

而当用户看上了焦点外的某一个资源时，客户还需要进行 1~3 个步骤的操作，

以把相应的资源滑动到焦点框内，所见不能及时所得，这降低了操作时效性。针

对 PHILIPS 这类型的布局，在垂直方向上确实只能固定聚焦，但在水平方向上个

人觉得采用滑动焦点的方式应该会带来更好的操作体验。

8

（影片资源库网格布局）

（观影界面下端的资源导航栏布局）

（三）分列+网格平铺

在媒体库中的 UI 布局方式是左侧竖栏分列加右侧网格平铺的布局形式，这

9

样的布局优势是可以容纳更多的菜单项/根目录，二打开对应的选项是都能在右

侧的网格布局中实时呈现相应的资源状态，操作结果清晰可见。

（媒体库中的 UI 分列布局）

（媒体库中的分列+网格平铺布局）

10

（四）右侧弹窗布局

（右侧滑出菜单栏）

在菜单栏的设计上，PHILIPS 采用了侧面滑出的弹窗布局形式，滑出的菜单

栏整体大小在全屏占比中近似黄金比例，菜单项采取纵列图标加文字的设计，在

特殊界面中弹窗的最右侧还有一条较为深色的竖列，内容为上一级菜单名称，这

样设计能直观的向用户传达当前菜单的父级信息，也便于返回上级的操作。

11

（观影设置中弹出菜单栏）

PHILIPS 所采用的右侧菜单栏设计，在一定程度上更能提升用户的操作舒适

度，除少数左撇子外大多数人的操作习惯都是右手拿遥控器，这样相对于电视屏

幕来说右侧显示的内容在操作感知上和用户的贴合度更高，显而易见，右手控制

右边的东西更符合人们的习惯，这种布局优势应该在 UI 设计中得到充分的运用。

三、优缺点评估

搭载在安卓系统上的 UI 终究会受到风格统一性的限制，毕竟原系统的 UI

是简洁的灰白风格的，这也是考虑到面向市场的通用性，因而这些模块类的 UI

设计就不能太绚丽以保证协调性，这样看来该样机的设计风格至少是没错的，但

配色只是 UI 视觉层面的部分内容，在特定的配色下我们依然可以从布局、交互、

动效等方面入手去精雕产品的调性，而经过研究试用 REALTEK 样机也存在些优

缺点。

12

（一）优点

1．在 MMP 中，打开文件夹进入任何层级的子目录后，当连按两次“上键”

焦点会回到根目录（即盘符），这样的交互设定可以省去大量的退回步骤，是值

得学习的一种高效的交互思路，同样可用于其他多层级的系统菜单，目前所知我

们公司的产品还没有类似的交互设定。

2．在视觉体验上，以深灰色调搭配绚丽的彩色风格，展现出一种深沉的高

级感，中性色调的适应性也更广，在黑、深灰、浅灰、白这几种颜色的运用中协

调合理，使得整体界面简洁清晰，层级关系得到很好体现；在主体灰色调的大前

提下在一些特殊的界面融入了绚丽通透的彩色渐变背景，缓和了长时间处在深沉

界面下的压抑感，同时偏绿色的大背景也能起到护眼的作用。不过这只是从用户

的视觉感受层面来说这样的设计算是一种优点，但是不同的色彩交错使用将会使

整体的协调统一性面临挑战。

（二）不足

1．菜单选项确认后不能自动返回，需要按返回键，徒增交互步骤。

2．在 MMP 中播放具体文件时按左右键是切换文件，而结束放映是按返回

键，但是想要退回到根目录却是按左键，按返回键是退出多媒体中心，这样的交

互设计用着不顺手，用户无法在结束放映后直接按原按键退回，交互逻辑和行为

惯性上都不友好。

3．在性能体验上，Live TV 切换频道的反应时间太长，多次试验基本都在 4

秒才换台成功。

13

四、总结

UI 界面是机器与用户沟通的最直接表现形式，是用户对产品选择的第一印

象，在当下的市场大环境下，各类品牌之间系统及功能基本大同小异，可挖掘的

功能差异性已经越来越小，在绝对的新技术新功能出现之前交互和 UI 设计是表

现产品个性和提升产品使用体验的最直接途径，是打造产品竞争优势的第一选

择。而好的 UI 设计能使产品在市场中脱颖而出，能让用户在短短的几分钟内经

过初步实操体验就能作出购买决定的，一定是界面美观、操作简洁、符合人体习

惯的产品。

界面的布局设计应该要起到引导用户完成特定需要的效果，在 PHILIPS 样机

上也做到了这一点，通过竖版分列式布局使用户能实时看到当下操作的结果示

例，从而引导用户根据需要作出下一步操作，提升操作时效性和舒适感。同时合

理的动效加入才能使产品拥有生命力，让产品不只是冰冷的机器，PHILIPS 的设

计中如果能加入合适的动效设计相信能使操作体验更进一步，我认为合适的人机

互动在任何的交互+UI 风格设计中都能适用。

经过对 PHILIPS 样机的接触分析，也暴露出 UI 设计中容易出现的一些问题，

例如 icon 图标的质量粗糙，都会瞬间让人感觉到廉价感的气息。这些问题也将

是指导自己未来设计工作的宝贵经验，从细节上一步步做得比对手更好，终将形

成自己的产品优势。

UI 设计工作指导文档

文档版本 V1.0 (2022-04-19) 版权所有 © 技术研究所-软件室

技术研究所-软件室

UI 设计工作指导文档

文档版本 1 .0

发布日期 2022-04-19

UI 设计工作指导文档

文档版本 V1.0 (2022-04-19) 版权所有 © 技术研究所-软件室

拟 制：

会 签：

审 核：

主 管：

批 准：

日 期：

UI 设计工作指导文档

文档版本 V1.0 (2022-04-19) 版权所有 © 技术研究所-软件室

1 编写目的

本文档描述了 UI 设计的工作指导以及经验分享。

2 适用范围

可作为日常工作指导或者 UI 设计岗位新入职人员的学习材料。

3 适用场景

• 产品开发文档存档

• 产品 UI 设计参考

4 其他说明

5 版本和更改记录

修订日期 版本 作者 修订说明

2022-04-19 V1.0 黄向聪 第一版，创建

UI 设计工作指导文档

文档版本 V1.0 (2022-04-19) 版权所有 © 技术研究所-软件室

目 录

1. 岗位职责概述..........................................................................................................................................................1

2. UI 设计工作指导.....................................................................................................................................................1

2.1. UI 设计工作流程.......................................................................... 1

2.2. 电视、显示器、WEB 平台 UI 需求现状说明.................................................... 2

2.2.1. 电视................................................................................................................................................................... 2

2.2.2. 显示器............................................................................................................................................................... 2

2.2.3. WEB 平台开发 ................................................................................................................................................... 2

2.3. 客户品牌开机 LOGO 设计指导 ............................................................... 2

2.3.1. 客户提供现成图片或 LOGO 图标（矢量或高清位图）................................................................................ 2

2.3.2. 有需求但客户无法提供可用的资料 ............................................................................................................... 2

3. 经验总结 .................................................................................................................................................................3

3.1. 电视 UI 设计经验 ......................................................................... 3

3.2. 显示器 UI 设计经验 ....................................................................... 3

3.3. 软件开机 LOGO 设计经验 ................................................................... 3

UI 设计工作指导文档

文档版本 V1.0 (2022-04-19) 版权所有 © 技术研究所-软件室 1

1.岗位职责概述

当下全球的电视产业在功能性上基本大同小异，从市场第一消费者的角度来看一款视觉美观交互好用

的 UI 更容易形成购买欲的倾斜。UI 设计岗位正是立足于公司的海内外战略布局，为实现公司产品的市场优

势而落地开发需求，从交互+视觉层面入手塑造自己产品的竞争力，从而赢得市场优势。具体的岗位职责概

括为：

1. 着眼于公司整体的产品结构，结合各类产品的市场表现力，提出合理的 UI 规划策略并落地；

2. 满足各类项目的 UI 设计需求，为开发端提供 UI 素材输出；

3. 满足公司内部各类 WEB 端系统平台开发的 UI 设计需求；

4. 满足具体订单的软件开机 LOGO 需求。

2.UI 设计工作指导

2.1. UI 设计工作流程

上述流程基本适用于大部分 UI 开发项目的 UI 设计，落实到具体项目时请根据实际需要执行。

项

目

立

项

，

需

求

输

入

需

求

分

析

，

内

容

梳

理

交

互

逻

辑

框

架

搭

建

（

原

型

）

组

织

项

目

相

关

人

员

评

审

定

案

基

于

交

互

逻

辑

设

计UI

效

果

（

代

表

性

页

面

）

执

行UI

全

案

设

计

素

材

上

传

蓝

湖

（

可

在

上

一

步

实

时

进

行

）

跟

进

开

发

流

程

，

保

证

呈

现

最

优

效

果

初

版

软

件

的

试

用

和

优

化

软

件

迭

代

的UI

维

护

UI 设计工作指导文档

文档版本 V1.0 (2022-04-19) 版权所有 © 技术研究所-软件室 2

2.2. 电视、显示器、WEB 平台 UI 需求现状说明

2.2.1. 电视

电视产品项目目前主要有 Linux 和 Android 两种软件状态是有 UI 设计需求的。

一、Linux 项目，其 UI 为整套全新开发，UI 设计的主动性较强，具体到各个功能版块的 UI 设计根据现

实需求都可进行设计，前期在做的项目主要有 MLR5.1、MLR5.3 项目，所有项目的 UI 设计均已完成，后续

跟进需求维护和执行新项目即可。

二、Android 项目，其 UI 一般在系统层面不能进行改动，只在特殊界面或者应用开发中有 UI 设计需求。

（一）系统 UI 层面，前期做的主要是开机向导的遥控器配对提示界面，需要进行动效设计，全部已经完成，

后续跟进新需求即可。（二）应用开发层面，前期进行了 Android 3.0 版本的 Help 应用开发，主要是结合系

统的功能进行各个功能版块的使用说明，即电子说明书。第一阶段的 UI 设计已经完成，后续根据需要可能

会进行适用于其他语言的开发（如波斯语等从右往左的语言，切换语言后系统 UI 的布局改变，而 Help 应用

中的配图不能直接通过镜像实现，因此需要更改配图）。

2.2.2. 显示器

显示器业务是公司正在大力发展的方向，UI 需求将逐步提升。目前，常规显示器暂时没有 UI 设计需求，

前期在做的主要有电竞显示器开发，UI 设计已经完成，项目处在后端开发阶段，后续需跟进试用和评估定

案。

2.2.3. WEB 平台开发

公司内部系统进行开发会产生 UI 设计需求，前期进行过“软件发布系统”和“DMS 数据管理系统”的

开发，项目均已结束。目前没有其他平台的设计需求，后续根据实际需要进行协助即可。

2.3. 客户品牌开机 LOGO 设计指导

2.3.1. 客户提供现成图片或 LOGO 图标（矢量或高清位图）

产生需求后，如果客户有提供高清的开机 LOGO 图片时，可直接更改图片的参数以符合具体机型的显示

要求即可；如提供了高清的位图 LOGO 或者矢量 LOGO 时，需要自己设计成标准的开机 LOGO，商标的大小

可自行设计，颜色和背景可咨询业务确认需要（常规的为黑色背景白色 LOGO 或白背景黑色 LOGO），设计

完成后发业务进行确认。

2.3.2. 有需求但客户无法提供可用的资料

产生需求后，如果客户提供的图片清晰度不够，客户也无法再次提供高清的图片或者 LOGO 时，可咨询

UI 设计工作指导文档

文档版本 V1.0 (2022-04-19) 版权所有 © 技术研究所-软件室 3

平面设计、说明书设计的同事是否有前期存档的该客户资料可用（也可在 3.3 存档系统中直接搜索相关的

品牌，路径：\\\\10.16.3.3\\技术图纸），一般来说做过的品牌都会有存档的资料，可以找到可用的矢量 LOGO

文件，拿到矢量的 LOGO 后可自行设计开机 LOGO，设计完成需发业务进行确认。

3.经验总结

3.1. 电视 UI 设计经验

1. 电视的屏幕显示效果没有电脑细致，在 UI 设计中内容的线条不宜过细，最好大于 1 像素（完全垂

直或者水平的线条可用 1 像素，弧形和斜线最好不用），使用一个像素时上机显示将出现锯齿虚化状，无法

满足显示质量，但在小尺寸的细节处可使用 1 像素。

2. 素材切图时图形元素四周需预留每边≥1 个像素的空隙（大尺寸图形最好大于 4 个像素），这样导

出的素材四周才会羽化均匀，不会出现硬切边。

3. 在 Linux 项目中，UI 动效设计需要导出为 WEBP 格式，而透明背景的 WEBP 动效文件在浏览器上播

放会出现大量不规则的白边。解决办法是给动效添加虚拟的背景再导出，背景规格：不透明度为 1%的纯色

并添加蒙版，蒙版可羽化 1 像素，蒙版不透明度设为 25%（此参数经反复试验确定，不可过低或过高）。

4. 在 Linux 项目中，UI 动效设计需要注意帧率的设定，欧美国家和地区的动画常规使用的帧率都达

到 30 帧每秒，国内一般为 25 帧每秒，帧率不对将会影响动画效果甚至出现问题。

5. 目前电视屏幕的色域没有电脑中的广，因此做渐变时实际上机都会出现阶梯状的渐变效果，这是

无可避免的，设计时应该慎用渐变，实在需要使用时需要控制其显示质量。

3.2. 显示器 UI 设计经验

1. 显示器多为单片机，UI 设计会有很大限制，OSD 窗口可做透明，但是 OSD 内部的具体内容不支持

做透明效果，同时图形不支持做渐变，因此在 UI 设计中内容元素需要做成不透明的纯色，且图标应设计简

约，太复杂的细节难于实现。

2. UI 设计前应充分和开发端沟通开发的实现方法，在保证能实现的前提下进行设计。以前期设计的

长虹电竞显示器为例，开发端绘制图标是需要在 12*18 的像素倍数这样一个矩形内进行，因此素材的切图

应按照这一比例进行设置，这样才能保证开发绘制出来的图标最大还原设计图效果，否则图标将会变形。

3.3. 软件开机 LOGO 设计经验

1. 图像的 dpi 应设置为 72 或者 96，这是目前屏幕显示的常规 dpi,参数高于这一数值会出现开机 LOGO

无法显示的情况。

UI 设计工作指导文档

文档版本 V1.0 (2022-04-19) 版权所有 © 技术研究所-软件室 4

2. 当客户提供完整的开机 LOGO 图片时，需要查看个参数的正确性，基本上客户提供的图片参数都是

不满足要求的，需要调整各参数值；另外需要注意图片的四周边缘是否存在细微的白边，需要对图片边缘

进行处理，不可出现白边或者虚化的情况，保险些的做法即是选择四周一定的区域后再次填充成背景色。

3. 当客户只提供 LOGO 图标，需要自己制作开机 LOGO 图片时，如果客户没有特殊的 LOGO 尺寸要求，

LOGO 尺寸在屏中的横向占比可设置为为三分之一多一点，这样的比例基本可以通过客户的确认，也是较为

舒适的比例，当然最重要的还是要结合 LOGO 本身的形态进行设定，具体问题具体分析，保证最佳的视觉效

果即可。

4. 做设计应该考究视觉美学，不可一味地遵从电脑参数。有些 LOGO 的形态并不是均匀对称的，此时

当设定为居中到画布中心时，呈现的视觉效果可能并不居中，这时候需要人为的调整位置，以达到视觉上

的居中（受众群体只感受到视觉上的对齐或者居中，根本不会在乎你的参数）。这种设计思维同样适用于其

他的视觉设计。