Smartisan 电视系统


UI 设计







作为智慧屏业务的设计接口人，承担了大量的沟通、协调的工作，有力推动了业务的进展。
——2022 年 9 月绩效评语

……主动在业务过程中不断地提升自己的负责边界，业务方一致推荐作为项目接口人。
——2021 年 9 月绩效评语


工作时间不长，但是成长速度惊人。
——2022 年 3 月绩效评语



会从设计角度反向 push 产品优化需求，而不是直接交付需求。
——2021 年 3 月绩效评语

Smartisan 电视项目是从 Smartisan 手机项目中移植出来的新项目。在项目一开始，大量页面的操作逻辑依然是触摸屏逻辑，并不适用于以遥控器操作为主的大屏设备。系统沿用了 Smartisan 拟物化风格。没有统一的电视端专属的控件库，系统一致性差。从 2021 年年初接手这个项目至今，我在想我能为这个系统做点什么？

我的角色

主动承担搭建 Smartisan 电视设计系统
对接业务设计师和组件研发同学
带领 6 人团队探索 2.0 系统设计风格
设计系统绝大部分功能模块
应用图标绘制
动效设计
插画及规范设计
运营海报及规范设计

目录

设计系统 2.0 升级
1.0 有什么问题
用户画像
客户需求
2.0 设计原则
系统设计指南
系统规范
系统资源
系统控件打通
系统应用及模块️
内容类应用
特色功能

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

.







第一节

设计系统 2.0 升级


带领 6 人团队完成






我们听到了人们对于系统 1.0 风格不满的声音，但在进行 2.0 升级之前，得先搞明白:





1.0 的问题


>>>












在开始 2.0 的设计之前，我们还需要知道：





用户画像


除了男性，女性、银发群体、儿童等也都是电视产品的主要使用者。





唯有追剧与健身不可辜负
我呀，平时就爱跳跳广场舞
光头强！看你往哪跑！






客户需求


TV OS 项目是一个 to b 的项目，我们的系统要安装在客户的机器上。这就要求我们必须考虑不同品质的屏幕、不同性能的芯片等的适配问题。同时，客户还希望能够有更多品牌露出的部分。






我们首先选择了桌面（内容导向）和设置（功能导向）这两个最有代表性的电视核心使用场景，先发散再收敛，经过了多多多多多多多轮的探索和论证后，我们得出了:












简洁的栅格系统
界面应采用简洁、统一、有规律的栅格系统，适当增大间距，做到有序不拥挤
视觉降噪
根据 7±2 法则，降低信息密度，梳理视觉动线
拥抱扁平风格
大到整个页面、小到一个图标，与当今主流的设计风格接轨
简洁的焦点样式
向上位移的焦点不会过多地破坏页面的栅格，比常见的放大样式更能引起用户的注意
简洁的文案
如果没有实际含义，就不用写 “正在加载” 四个字了，一个转动的圆环已经表明了其含义


统一有规律的视觉样式
很难想象下面这些图标都是从同一个系统中找到的。电视亟需一个专属的规范、资源和控件库；不只为了好看，也更好用




清晰的文案
按下「菜单」键，到底需要几种表达方式？




清晰规律的布局及走焦逻辑
考虑遥控器方向键操控的特殊性，设计时应避免奇怪的焦点样式和反直觉的走焦逻辑
 


氛围感
全屏氛围图、全屏视频，体验更沉浸、主题更突出
亲和力
更圆、更浅、更鲜艳、更现代的设计语言，让温馨的家充满活力


避免过多的打扰
小窗弹窗，简单的提示不要打断我的心流；全屏弹窗，复杂的内容让我更专注


 


品牌露出及定制
从品牌色到系统图标、从加载动画到空状态、从导航栏到系统功能，支持根据品牌机型深度定制
高斯模糊适配
模不模糊，不同平台的性能和安卓版本说了算
深浅模式适配
除了自动适应早晚的光线变化，也可根据 LCD、miniLED、激光投影等的屏幕特点灵活调整





 

下一节