FOR MORE INTERNATIONAL DESIGN IDEAS AND EDGE - CUTTING VISIONS
PLEASE CONTACT ME WITH

Mi TV, with an annual sales of more than one million sets, has upgraded for a big version 2.0 one year ago. This is why I have joined MI. This revision involves the product change on three directions, i.e. information structure, interaction method and visual brand positioning. In fact, there was a content display bottleneck in 1.0 product, which cannot adapt to intelligent development in future.

Special brand design can be expressed by “Ambilight”. On the top right corner, a light band is designed based on aurora effect, which can not only make the overall picture more textured, but also make the dark background become breathable and flexible. When it is slowly fluctuated, the space advantage of large screen will be highlighted. At the same time, the fluctuation attribution was used to literal title as well. All these designs are made to better reflect the characteristic of entertainment media product.

小米电视2.0的大型版本升级。这次改版涉及到信息架构,交互方式,视觉品牌定位三个大方向的产品变更。1.0在产品上存在着内容展示的瓶颈,不能够适应今后的智能化发展方向。对于整体的视觉风格分为版式,形态和样式这三大块。图片版式以拼图墙(PatchWall)为基础进行变化。形态为面化中性图标,因为电视一般观看距离是3米之外,面化图标更容易识别。电视也是一个以家庭为单位的硬件产品,所以设计方面应该是中性为佳。样式扁平化为基础,利用大幅度阴影和高斯模糊的方式分开焦点与背景之间的前后关系,与手机不同的是电视交互重点在于当前焦点的样式一定要明显,这样用户就不会失焦。

品牌特殊性设计可以用“流光溢彩”来形容。页面右上角创作了一个以极光效果为基础的光带设计,这样设计的好处可以让整体画面显得更加有质感,同时也可以让暗色的背景变的透气灵动。当它在缓缓的波动时,大屏幕的空间感优势就突出来了。同时波动属性使用到了文字标题之上,这些设计都是为了更好的表现娱乐媒体产品的特性。

Ambilight · MITV2.0 Redesign

To determine the interaction process is a more clear understanding of future product development.

In initial stage, analysis on competing products in the whole TV market should be made by focusing on its information structure and interaction, and the general conclusion can be basically concluded through a two dimensional quadrant. Display method of content is shown on the left of x-axis in the quadrant, which is in favor of artificial editor. Moreover, algorithm is recommended on the right end according to the operation habit of users, which is much more intelligent and personalized.

While y-axis shows the module attribute issues in the page. The upper part focuses on detailed film, television and content, while the lower part emphasizes on the entrance of category and application. Therefore, to find the right position from this quadrant by combining with future development of company is the foundation to determine the overall interaction model.

确定交互的过程是对产品今后发展路线的一个更加清晰的认识。初期是对整体的电视市场内部的竞品进行分析。针对竞品的信息架构和交互进行分析,总体结论基本可以通过一个二维的象限来概括。象限的x轴左边是内容的展示方式,偏向于人为的编辑推荐,右端时通过用户的操作习惯进行算法推荐,更加智能化个性化。y轴是页面当中的模块属性问题。上面是偏重于具体的影视和内容,下面是偏向于分类和应用的入口。结合公司今后的发展方向在这个象限中找到正确的位置是确定交互整体模型的基础。

The approval of main business characteristics, advantages and future development of company by analysis will directly affect the interaction design scheme. For instance, as a comprehensive company, Apple Inc. has important layout in the platform and content, so the home page is nearly divided into two parts equally, the upper part is content while the lower part is app store platform. They hope more applications can be used by users on TV. Google is a technical company, and the content on its website is mainly recommended to users by capture and algorithm, so there is no clear classification on the content, which is displayed through personalized recommendation and search.

At the same time, they pay more attention to develop application platform. In fact, domestic companies focus on content, 80% of content was edited, so the display of content is prominent in interaction. Users’ consumption of content brings profit to the company, but the application development of platform is not very mature. In this case, the interaction is naturally established on the basis of title and information.

The quantity of entrance and content displayed in home page can be qualified through analysis and comparison of interaction structure in home page, in order to show more information. A senior interaction model can help user to learn and improve the efficiency to acquire information with its simple operation and plain structure.

For example, the navigation in home page of Apple Inc. is able to switch the corresponding content, which is also the entrance to enter into such category. Metaphor of such entrance is established on application on the bottom with same visual form. Users can not only check new content rapidly, but also click and enter into a detailed category to find more content.

通过分析证明公司的主要业务特点,优势和今后的发展方向直接影响到交互的设计方案。比如苹果公司是一个比较全面和综合的公司,在平台和内容上面都有很重要的布局,所以首页几乎平分两块区域,上面是内容,下面是appstore平台,他希望更多的应用在电视上可以被用户所使用。Google是一个技术类型的公司,他的内容是抓取和通过算法推荐给用户的,所以内容上没有很明确的分类,几乎都是通过个性化推荐和搜索呈现出来,也很注重发展应用平台。国内公司重视内容,内容80%是编辑整理过的,交互更加突出内容的展示。用户对于内容的消费给公司带来利润,而平台类的应用发展不是很成熟。在这样的情况下,交互自然是基于内容的标题化和信息化来创建的。

通过分析和对比首页交互结构,量化了首页所展示的入口数量,内容展示数量,达到展示更多信息的能力。一个高级的交互模型是可以让操作简单,结构易懂,利于用户学习并且提高获取信息的效率。比如苹果首页的导航可以切换对应的精品内容的同时也是进入这个类别的入口,这种入口的隐喻建立在下面的同样视觉形态的应用之上。用户可以快速查看新的内容,也可以点击进入在一个具体分类中找到更多内容。

Review and discuss the interaction scheme from interaction method, efficiency and difficulty will help you to rationally find the proper scheme for product from comparison process.

Different from the business development of Apple TV, MITV2.0 interaction pays more attention to the consumption of content, so the interaction method of film and television content recommendation in the home page was changed to upper navigation, which can check unlimited content through up and down key similar to the structure of web page.

通过交互方式,效率,使用难易程度这三个方面对交互方案稿件进行评审讨论,这样会很理性在对比的过程中找到适合产品的交互方案。

MITV2.0的交互和苹果TV在业务上房展方向是不同,更加注重内容的消费,所以在首页重心在与影视和电视的内容推荐,交互方式改为了上导航,和网页的结构类似,通过上下键的操作就可以查看无限的内容。

Latterly, some users reflected that it was very tired to browse content with same format, so we designed the PatchWall, which spliced the first row at random by taking two posters and two rows as basic unit. In that case, different format is existed every two columns, which not only resolve the problem of repeated format, but also help to recommend important films and televisions. Furthermore, different type of content such as television, film, game, application and theme are distinguished by dimensional scale.

Television is operated by remote control, but the efficiency is very different because of variable interaction. For example, the television efficiency of Apple is higher than others, and the row of icons under the first row of recommended content in the first screen is not only the entrance, but navigation. The type of recommended content and latest content can be controlled by switching, and the corresponding module classification can be entered by directly clicking. For another example, Apple, Amazon and Google put modules with same attribution in a horizontal area, but the domestic factories always mix them together, because it may occur a lot of learning cost during usage.

Television user behavior can be divided into three parts: First, relaxed and casual browse without intentionality; Second, search single product with high intentionality; Third, find the content they are interested in according to classification. Thus, a comprehensive solution should be planned based on overall information structure design to satisfy these requirements and scenes.

For the first type, the latest and hottest content can be rapidly checked by single waterfall browsing method, the waterfall flow is generally 20 screens, which can detect the content you are interest in through different latitude.

While for users who have clear content to be found, voice search can help to finish such operation with lower cost. At the same time, it is possible to communicate with machine by stimulating the communication forms of human.

The last one is to integrate and classify the content according to the content type module in home page and theme of single screen, so users can customize the content displayed in waterfall. Moreover, content that users are interested in can be intelligently recommended after long-term recording and clicking by learning users. In the later period, different type of content can be recommended according to voice recognition. After all, television is an electronic apparatus for group consumption, it is likely that each

family member has different requirement to the content of television.

Television is operated by cross sequential focusing cursor, and the interactive area should be parallel and vertical. Metaphor for content in second screen must be made in the first screen, in order to avoid the risk for user not to find the content without up and down key. What’s more, the uniform format of button or entrance on visual design is able to teach users to find clickable entrance for a long time.

Because it is very expensive to search by keyboard on television, there is a great significance to search by voice. Thus, voice part should be made to understand the semantics and context of words said by users at ordinary times, distinguish the information to be searched, and then represent it to users via search. For example, switch to kids mode after identifying the voice of kid and shield some violent and pornographic content for him.

Intelligent family design is conveniently to interact with other products by using television as the screen, so as to meet the current status of running product that users are checking. Screen is very likely to be an important media for human to get information and take action in future. As the biggest screen, television is necessary to represent intelligent hardware information to people.

在后期还有遇到了用户一直翻阅同样版式的内容会感觉到疲惫,我们设计了拼图墙(PatchWall)的形式,以6个海报2行为基础单位,对第一行进行随机拼合,这样就可以做到每两列之间都有不同的版式存在,不但解决了版式过于重复而且也方便对重要影片的推荐。然后在通过尺寸比例来区分电视剧,电影,游戏,应用,专题不同类型的内容。

电视都是通过遥控器操作的,但效率却因不同的交互而大不相同。比如苹果的电视效率要比其他的厂商都高一些,在首屏中第一排推荐内容的下面一排图标既是入口也是导航。可以通过切换来控制上面推荐内容的类型和最新的内容,也可以直接点击进入对应的模块分类。再比如Apple,Amazon,Google都会把同样属性的模块放在一个横向区域,而国内几个厂商往往和内容混在一起,这样在使用起来会有很多学习成本。

电视用户行为分为三大块,一是没有目的性的轻松随意翻阅,二是目的性很高的搜索单品,三是在这两者之间按照分类找自己感兴趣的内容。在整体的信息构架设计上要规划出全面的解决方案来满足这些使用需求和场景。
第一种通过单瀑布型浏览方式用户可以快速的看到最新最热的内容,瀑布流一般在20屏左右,可以通过各种纬度探测到你感兴趣的内容。对于有明确内容查找类的用户需求语音搜索可以成本更低的完成这一操作。同时也可以模拟人类的沟通交流方式与机器进行对话。

最后一种是通过首页的内容类型模块和单屏幕的专题模块来对内容进行整合分类,用户可以自行定义瀑布流显示的内容,通过长期记录和学习用户的点击为用户智能推荐感兴趣的内容。后期可以通过语音识别为不同人推荐不同类型的内容,因为毕竟电视是一个群体消费的电子设备,很可能家里每个成员对电视内容有不同的需求。

电视操作是十字循序聚焦光标的方式,可交互的区域最好是正平竖直的。在一屏一定要做好二屏内容延续的隐喻,这样可以避免用户不做上下键探索而找不到内容的风险。按钮或者入口在视觉设计上的统一样式也可以长时间教育用户可以发现可点击的入口。因为在电视上用键盘搜索成本非常大所以语音搜索在电视上有着重大意义,语音部分要做到可以理解用户平时说话的语义和语境,分清其中需要查找的信息,通过搜索呈现给用户。比如识别出儿童的声音可以自动切换到儿童模式,为他屏蔽掉一些暴力,色情的内容。

智能家庭的设计可以很方便的用电视作为屏幕同其他产品互相联动,满足用户查看正在运行产品的当前状态。屏幕在将来很有可能是人类获取信息与采取行为的重要媒介,而电视作为最大的屏幕,呈现给人们智能化硬件的信息是必要做的一件事。