搜索框|改版复盘:智能终端电视系统( 二 )


搜索框|改版复盘:智能终端电视系统
文章插图
该种投影适用于各类item。视觉上还能保持色调一致的简洁性。
4. 渐变设计中都会在局部蒙版方案中加入渐变色;具体表现在图象或者视频上叠加文字和按钮的情况,文字直接放在图片上,当背景色和字色过于接近时,会影响文字的读取阅读。
为了解决这个问题,通常的解决办法是在图片和文字中间叠加一个中间层(蒙层),这样一来,即便背景色和字色过于接近,由于中间层的存在,也不会影响文字阅读。
中间层(即 常说的图片蒙层)的形式大概可分为“全蒙层”和“局部蒙层”两种:由于全覆盖的蒙层对内容品质的影响很大,所以我们采用局部蒙层的设计方案。
搜索框|改版复盘:智能终端电视系统
文章插图
为了让渐变色平滑融入图像,就需要改变渐变的曲率:把过渡的中间色,从50%位置移动到30%的位置(需要增加一个过渡节点,节点越多越好)。
5. 圆角我们将界面中原有的方形item增加了圆角概念,让人视觉感受上更加友好、亲切。并且圆角具有更强的内指向性,可以更好地衬托出item内的装扮内容;而且在圆角的衬托下,更加清楚分辨item的边界,使装扮的呈现更加清晰。
对于圆角的取值上也作了足够的思考,item内需承载的其他内容信息众多,圆角太大会影响边角信息的呈现,所以我们在圆角选取上,采用《大屏互动GuideLine》设计规范中定义的8px的栅格系统,意思是“以8px为单位,来规范元素的尺寸与间距”。在极端情况下使用6px圆角。
并且我们把圆角的理念,延展到标签的统一设计中,并且对于长短不一的item信息重新归类,清晰分成4个尺寸样式,把控视觉上的统一。
6. 色板在浅色界面中,我们通常用只用一个白色背景结合分割线就可以搞定所有界面的板块层级,因为在浅色模式下有投影可以借助,然而暗黑模式中投影将不足以起到如此功效,我们需要通过颜色来区分层级关系,增加通用原则颜色部分:中性色颜色梯度。
搜索框|改版复盘:智能终端电视系统
文章插图
五、优化交互设计,提高用户操作效率和体验1. 导航目前市面上最为常见的按照信息权重布局的导航可分为:横向式、纵向式、纵横式。由于这部分我们不展开说,所以直接在下图图整理了每种布局的特征、优劣势和应用场景。
根据大量的案例分析和眼动测试,结合自身场景选择便于日后的拓展的横向导航,从稳定的方面来说,横向导航的变化不会因为产品的变化而发生很大的变化。
这是站在一个外观和交互共同的层面去看,导航的大小一定要足够,而且其位置一定要是用户认为足够清晰的,确保在视觉反馈的的层面对于用户来说是友好的。
其次就是所有的可交互区域需要有积极的响应,与内容区要有对比,可以将其称为界面的热情度,这也是一个优秀界面的自我修养。
关于导航排序法则很简单:“高频次高优展示,低频次降低权重甚至隐藏”。
而关于使用频次的高低甄别一般我们可以通过用户调研和数据埋点的两种常用方式来进行,这里并不展开讲。
2. 内容区运营的内容也变得多了,原来的仅仅横向界面展示无法承载当前的内容运营,经过多次的讨论和调研,最终是我们采用了十字交叉的设计。
搜索框|改版复盘:智能终端电视系统
文章插图
内部根据不同的功能模块我们定义了三种交互形式:拼贴式设计+书架式设计+列表式设计,减少花里胡哨的控件使用,降低控件使用成本

推荐阅读