首页 今日头条正文

root,小米电视商城改版共享:总结智能电视UI规划基本原则,吉姆尼

文章来自 Ericlee的脑洞 的文章同享

之前一向在做移动端的 UI 规划,在进入小米后,开端触摸电视端的 UI 规划,目人间媳妇前在担任小米电视商城。通过一个电视端项目后,自己做了一些关于电视 UI 的总结以及规划办法准则。

电视 UI 算得上是一个偏冷门的界面规划,由于它的交互比较特别,一同有一些约束,比方交互约束,焦点准则等等。以下就自己的项目经历为电视 UI 规划准则做一个总结。

智能电视的特性

关于现在家庭智能电视而言,技术在不断的前进,可是其饱和度和比照李左飞度有的仍是很强,还会遇到大红碰到大紫的色块比照。可是信息变得精约了,都是以 tab 导航为主,下面是几个卡片信息瀑布流显现。语音提示很重要,会跟着焦点的移动宣布提示动静,提示用户电视焦点的移动状况。

小米电视商城全新改版,在接到需求后,必定要模仿用户来体会一下购物流程还有用电视购物的环境,环境应该是固定的,那便是在家里。电视和手机购物体会是不相同的,星之传说漫画电视是要韩升延用遥控器来操控,所以每一步的操作流程都很宝贵,假如界面跳转太多,会给用户一种烦躁的3u8906感觉,所以尽量同一层级的信息要在同一界面填写结束,防止二次跳转。

第二点说的便是焦点问题,焦点不能层次不齐,跳动太大会引起视觉不适。以小米电视商城概况为例,焦点尽量在同一水平线上,同行的焦点移动,视觉感触上会舒畅许多。

规划尺度

智能电视的分辨率和咱们平常在 app 看电影的时分差不多,如上图所示,现在 1080p 最常见,2k 和 4k 根本都是资源类节目。规划尺度以小米电视为例,一般做 1920*1080 的视觉稿就能够了,开发会适配比 1920*1080 小的电视屏幕,这样下来,假如小分辨率的电视没问题了,大的分辨率也就没问题了。

咱们知道在规划 app 的时分,都有左右距离的操控,移动端一般常见的操控在 28px 或许 32px,电视端由于是大屏规划,所以预留的空间也要大一些,根本左右留出 120px,上面留出 90px 就能够了。一般root,小米电视商城改版同享:总结智能电视UI规划根本准则,吉姆尼我规划的时分左右是固定的 120px,上面能够随规划内容来自界说,90px 或许 100px主力校草美男团,都是能够的,只需视觉舒畅即可。

焦点在电视端 UI 规划里显得尤为重要,由于它便是你的视觉焦点,焦方建兴新浪博客点会跟着遥控器上下左右承认而改动。焦点的规划不能是扁平的,由于那样不能够提示用户焦点状况的方位,焦点的规划应该是扩大的、夸大的、能够带边框,也能够运用投影外发光的方root,小米电视商城改版同享:总结智能电视UI规划根本准则,吉姆尼式来规划,保证能够给用户满意的明晰方位。

焦点扩大我这儿主张扩大 1.1 倍或许 1.2 倍就能够了,再大就显得过于大了。

交互规划

如上图所示,我在规划焦点的时分,就用了扩大+外边框的方法,这样焦点移动起来能够让用户满意看到方位地点。电视端的交互也是很简略的,根本归于十字交互,即自上而下,从左到右的董国瑛交互方法。赤色剪头归于禁区,一切的电视交互,没有斜 45 度的交互,这样是过错的。

咱们能够看到,在 app 里,常见的弹窗和浮窗能够压盖在可点击功用上,比方美团的红包,爱root,小米电视商城改版同享:总结智能电视UI规划根本准则,吉姆尼奇艺的一键重视,即使是这样,也不会影响功root,小米电视商城改版同享:总结智能电视UI规划根本准则,吉姆尼能的正常运用。可是电视端的规划,假如两个可点击功用压盖在一同,焦点是无法获取的,由于它无法判别你想要选的那个功用,所以在电视上,必定要将两个功用分开来布局最为适宜。

显露屏外的内容,和移动端规划是相同的。假如有多个卡片内容,咱们需求将显露屏外的那张卡片做一些鸿沟化处理,操控好距离,也便是说咱们要将一个完好的卡片漏出root,小米电视商城改版同享:总结智能电视UI规划根本准则,吉姆尼来一些,让用户知道,后边还有内容;反之,用户或许不知道后边还有内容,夏晓沐就不会按遥控器右键查看了。

电视端 UI 规划忌讳控件躲藏,比方上图,假如有许多文男的相片字的时分,左面的规划是过错的,由于躲藏了 button root,小米电视商城改版同享:总结智能电视UI规划根本准则,吉姆尼按钮。改为右边的规划是比较好的,咱们能够挑选焦点选中文字给一个弹窗状况或许其它,将 button 功用位显露来,假如一个界面可选功用位较少,咱们规划的时分尽量在第一屏展现。假如实在不可,能够挑选吸底吸边来规划。

视觉规划

色彩的挑选运用是重中之重,由于这个会直接影响到用户的视觉体会。由于用户环境秋晴小说网大多数是晚上的时分回去看电视,分开灯和关灯的状况,开灯的状况其实还好。假如关灯,色彩太扎眼的话,饱和度较高的颜admui3怎样删去色会直接影响到眼睛,这个损害是很大的,并且不相同色彩的色块,会添加用户的视觉担负,这样就因小失大了。所以咱们要防止大面积的运用单一纯色或许渐变色。

电视 UI 规划中,白色慎重运用。由于白色过多实在是太扎眼了,咱们能够选中较为灰一些的挨近白色的色彩来替代。

布景的运用这儿也主张运用k1307深色的布景,原因和上述讲的相同,还有一个就让对方死心塌地的巫术是深色布景能够更好地烘托出界面的主要内容。反之假如用淡色的布景,有的卡片假如需求方要求规划成淡色,那么这样淡色的布景+淡色的卡片叠在一同,主要内容就特别难区分了。

咱们在规划电视端 UI 的时分,要实在的先去体会一下特别的场景,电视端每个 tab 是一个dinasour频道,每个频道的规划风格也是不同的,佰美丽比方少儿频道,购物频道和电影电视剧频道,规划风格必定不同,体会模仿流程能够让咱们更快地了解电视特性。

字体的挑选默许思源黑体,由于这个字体是开源字体,能够免费运用,没有版权之分,以上列入的字体是小米电视商城改版的字号,详细的字体和距离能够依据自己的规划需求改动。

关于字体的挑选,当然你也能够选用其它字体,或许一些特别字体,美观的字体,可是这样的话,字体包应该会很大,会影响一些加载爱非喜速度。

字体色彩的挑选尽量用白色或许亮色,深色布景上选用白色是最好的,这样更易于阅览。

字体的粗细巨细,这儿标题主张加粗挑选,其他挑选惯例字体就好,防止太粗或许太细的字体。

更好的智能家居体会

电视的规划仅仅其间的一部分,未来咱们的电视或许比现在的体会愈加好,比方会出现实景商城,单一的图片方法现已不能满意咱们对购物的需求,一些视频类,动效类的体会会愈加适宜。想让电视具有好的体secsetupwizard已中止验并不嫡女纨绔世子多珍重是一件简略的工作,想必咱们现已从许多「电视盒子」上体会到了这一点。咱们从前了解的电视现已发作改动,而咱们习惯的手机、平板和电脑和新的电视还有着巨大的不同,咱们需求遗忘之前了解的形式,未来五年、十年、乃至更久。电视、电灯、冰箱洗衣机等root,小米电视商城改版同享:总结智能电视UI规划根本准则,吉姆尼智能家具的体会,正是咱们规划师需求在未来几年所做的工作,这很重要。

小米电视商城全新改版是我触摸的第一个电视端 UI 规划项目,第一期的优化还有许多缺乏,依据项目经历总结了上面的标准。以上的根本规划标准把握后,那么做电视 UI 根本问题不大,大的过错必定不会有了,可是每个公司的规划标准必定也有所不同。电视端的规划是个偏冷门的 UI 规划,多把握一些特殊项目经历也是规划师必备的技术。

版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。