Omar Xu's profile

CookOS Device Language (IoT@Smart Cooker)

让烹饪更智能  Make Cooking Smarter

这个操作系统帮助人们更好地使用智能厨具。
CookOS 是优特智厨设计团队为优特集团旗下的智能厨具领域搭建的一个设计组件系统。用于帮助团队为智能厨具设备快速地构建高质量的操作屏体验。


This operating system helps people use smart kitchenware better.
CookOS is a design component system built by the Ute Smart Kitchen design team for the smart kitchenware field of Ute Group. Used to help the team quickly build a high-quality operating screen experience for smart kitchen equipment.

多款厨具设备 Variety of kitchen equipment

由B端后厨设备为基础,在未来也向C端家庭场景伸展
统一体验 Unified experience

厨具显示屏作为一个综合控制台,会容纳多样性的功能与体验,特别是在商用后厨的场景中,它会联结多部设备。为了降低用户在不同场景功能下的学习成本,并提升易用性,统一体验是提升平台易用性的关键基础。同时有助于提升各角色间的协作效率。

As a comprehensive console, the kitchen display screen will accommodate diverse functions and experiences, especially in the scene of commercial kitchens, where it will connect multiple devices. In order to reduce the learning cost of users in different scenarios and to improve the ease of use, a unified experience is the key foundation for improving the ease of use of the platform. At the same time, it helps to improve the efficiency of collaboration between roles.


自定义+自适应 Responsive

软件的设计也应与硬件产品特色相呼应,具有可拆卸、可组合、自定义搭配的能力。与此同时,模块化的解决方案也让客户定制设备、和研发新设备的效率极大地提升。大多数的厨具产品功能相对比较接近(任务分发 —— 选择菜谱 —— 控火候 —— 控调料 —— 操作顺序),而显示屏的尺寸、比例往往不尽相同。传统的设计开发方式会造成重复开发、重复造轮子的现象。通过模块化、响应式的解决方案,可以极大地降低冗余的生产成本。

The design of the software should also correspond to the characteristics of the hardware products, with the ability to be detachable, combinable, and custom collocation. At the same time, the modular solution also greatly improves the efficiency of customized equipment and research and development of new equipment. The functions of most kitchenware products are relatively similar (task distribution-recipe selection-heat control-seasoning control-operation sequence), and the size and proportion of the display screen are often different. The traditional design and development methods will cause repeated development and repeated wheel manufacturing. Through modular and responsive solutions, redundant production costs can be greatly reduced.



符合场景 Fit the scene

让设计充分符合厨具在使用过程中的场景与环境,做整个场景+环境下的体验服务。

Let the design fully conform to the scene and environment of the kitchenware in the use process, and do the experience service under the whole scene + environment.
01 —— 全局思维 Global Processing​​​​​​​

将场景看作一个整体,不像在手机上使用App,信息的传递可不仅仅局限于一个小屏幕之中,外部世界中的任何反馈都可以提供信息。
Regarding the scene as a whole, unlike using an App on a mobile phone, the transmission of information is not limited to a small screen. Any feedback from the outside world can provide information.
掌控全局 Take control 

在设计中,尽管设计载体是一个屏幕,事实上,屏幕的显示只是其中的一环而已,需要知道他在整个流程中的地位,这个屏幕是充当什么作用的,用户在使用的过程中,他是否是一个必需品,还是仅仅是辅助作用?这有利于我们对时间与信息的规划,避免局限性。

In the design, although the design carrier is a screen, in fact, the display of the screen is only one part of it. It is necessary to know its position in the whole process and what role this screen serves. During the user's use, he Is it a necessity or just an auxiliary function? This is conducive to our time and information planning, avoiding limitations.




信息传递的媒介 Information transmission medium

尽管人是视觉动物,但是在产品的设计中,除了视觉传达信息之外,也需要考虑听觉或外部世界进行信息传递,不像App,用户可不会从头到尾一直对着屏幕。

Although people are visual animals, in the design of products, in addition to visually conveying information, it is also necessary to consider hearing or the external world for information transmission. Unlike apps, users do not always face the screen from beginning to end.



避免重复的信息 Avoid duplication of information

设备屏幕的作用之一包括展示设备实时的状态,但如果,这些状态可以通过其他媒介传递呢?例如灶是否开启,可为什么要从显示屏上去看呢?瞟一眼灶,听一下声音效率不比看显示屏快?

One of the functions of the device screen includes displaying the real-time status of the device, but what if these statuses can be transmitted through other media? For example, whether the stove is turned on, why should you look at it from the display? Glancing at the stove, listening to the sound is not faster than looking at the display?




02 — 硬件功能模块化  Modularization

硬件自定义模块组合 —— UI界面的模块组合

Hardware custom module combination —— UI interface module combination
03 —— 掌控感  Sense of Control

“所见的是什么,刚刚干了什么,现在在干什么,接下来怎么做,可达成什么目标。”

"What are you seeing, what you have just done, what you are doing now, what to do next, and what goals can be achieved."




合理的、区分明显的结构  Reasonable and distinct structure

考虑不稳定的使用场景,和一人操作多台设备的情况,我们采用卡片、大色块的结构区分,让界面元素之间的区分更明显。

Considering unstable usage scenarios and the situation where one person operates multiple devices, we use the structural distinction of cards and large color blocks to make the distinction between interface elements more obvious.




清晰的导航  Clear navigation

“上一步干了什么?我在哪里这是什么,在干什么?下一步要做什么”

"What did you do in the previous step? Where am I? What is this and what am I doing? What is the next step?"




及时、正确、清晰的反馈机制  Timely, correct and clear feedback mechanism

相比移动端App的设计,我们需要增强界面的反馈机制,例如按钮的弹抖动画、声音、与震动的反馈。针对用户的操作提供可感知的反馈。

Compared with the design of mobile apps, we need to enhance the feedback mechanism of the interface, such as the feedback of button bounce, sound, and vibration. Provide perceivable feedback on user actions.




稳定固化 Stable curing

无论导航的位置、描述、视觉元素,都应在用户心智中稳定固化,容易记忆,凭借记忆可以快速定位

Regardless of the location, description, and visual elements of the navigation, it should be steadily solidified in the user's mind, easy to remember, and fast positioning with memory




扁平化的层级结构  Flat hierarchical structure

尽量减少跳转避免出现多层级,除了操作复杂之外,客户使用时的记忆成本也较高

Minimize jumps and avoid multiple levels. In addition to complicated operations, the memory cost for customers is also high.
Let the operator know where the actual area boundary of the screen is
柔和的色彩  Tender Color Style

我们倾向于采用 HSB 色彩模型进行设计,该模型更便于设计师在调整色彩时对于颜色有明确的心理预期,同时也方便团队间的沟通。

为确保颜色还具备进一步拓展的能力。我们使用了 Ant Design 设计与开发的一套色彩生成工具。该工具经过设计师和程序员的精心调制,结合了色彩自然变化的规律,当有进一步色彩设计需求时,设计者只需按照一定规则定义完毕主色,便可以自动获得一系列完整的衍生色。

为确保内容的舒适性,我们避免使用对比很强的色彩或内容,长时间使用会带来疲劳感。使用深色模式增强对比,可以帮助使用者更关注凸显出来的内容和操作。

We tend to use the HSB color model for design, which is more convenient for designers to have clear psychological expectations for colors when adjusting colors, and it also facilitates communication between teams.
To ensure that the color also has the ability to further expand. We used a set of color generation tools designed and developed by Ant Design. The tool has been carefully modulated by designers and programmers, combined with the law of natural color change. When there is a need for further color design, the designer only needs to define the main color according to certain rules, and then a series of complete derivative colors can be automatically obtained .
To ensure the comfort of the content, we avoid using contrasting colors or content. Long-term use will cause fatigue. Using dark mode to enhance contrast can help users pay more attention to the highlighted content and operations.
动态的字体  Variable Fonts Style

在字体显示方面,必须保证易读性,即在使用场景中,必须做到字体能够清晰可见易读。

In terms of font display, legibility must be ensured, that is, in the use scene, the font must be clearly visible and easy to read.




不同分辨率下的字体字重  Font weight in different resolutions

随着使用场景导致控制屏的尺寸增加,字体大小/字重也需要随着控制屏分辨率的变化而变化。

为保证易读性,在低分辨率屏幕中(通常是厨师专用),烹饪场景对于视觉信息的获取尤为重要,字体大小会相比于其他设备屏幕大一些,提高易读性。同样的在高分辨率屏幕中在保证易读性的同时,会需要考虑到内容区块,相对于其他设备屏幕字体无需那么大。当然也不要忘记考虑具体的使用场景。

As the use scene causes the size of the control screen to increase, the font size/weight also needs to change as the resolution of the control screen changes.

In order to ensure legibility, in low-resolution screens (usually dedicated to chefs), cooking scenes are particularly important for obtaining visual information. The font size will be larger than that of other device screens to improve legibility. Similarly, in high-resolution screens, while ensuring legibility, content blocks need to be taken into consideration, and fonts do not need to be so large compared to other device screens. Of course, don't forget to consider specific usage scenarios.
未来迭代方向 Iteration Directions
CookOS Device Language (IoT@Smart Cooker)
Published:

CookOS Device Language (IoT@Smart Cooker)

Published: