《智能电视ui设计规范.doc》由会员分享，可在线阅读，更多相关《智能电视ui设计规范.doc（11页珍藏版）》请在金锄头文库上搜索。
1、智能电视ui设计规范篇一：UI设计：TV UI 设计要素UI设计：TV UI 设计要素20XX年08月30日 综合 共 1038字 字号 小中大评论关闭简介：本文大部分文字是从其它网站拿过来的，稍等整理了下收藏，希望做设计时可以可以参考。TV UI 设计要素1、交互尊重十字交叉导航原则、尊重用户习惯 映射式的操控本身会有无法逾越的丌直接性，系统操作效率反应效率是第一位要解决的问题屏幕大，16:9，横向的适于切换，竖向适于浏览 界面布局要有网格观念 从基本单位的定制，到复杂框架的搭建都是基于基本网格单位衍生的 控件一定要标准化，通用化必须有第一时间回到主界面，主界面有非常明确的电视节目入口 逐步
2、迚入Tvos 系统设计时代2、视觉大 亮-焦点明确（静态、劢态） 块状元素表现优异 图标色彩饱和度和亮度要高 冷色调不暖色调的占比控制在7:3左右 在季节性的换肤设计中加入主题元素 场景性的虚拟真实设计优于独立元素的虚拟真实设计3、导航项在基于十字方向键上设计导航时，导航项一般存在三种状态， 即“selected”，“focused”和“selected and focused“。 导航上如果有类别项和动作项那么导航获得焦点时，焦点移动不会切换右边容器中内容。当导航上全部为类别项时，焦点可以和选中态一起移动，右边容器随焦点移动切换内容。总而言之，导航设计原则如下：导航设计的目标，是让用户快速定
3、位，并且能够预测出操作结果。4、焦点控制设计TV控件时针对鼠标hover状态要增加其响应面积，方便用户操作。1. 纯焦点移动路径最好平直且区域对齐，上图所示，如果从A沿绿线移动到B可以较好的被用户感知和理解;如果沿红线移动则不符合用户预期;2. 高焦点移动要避免大范围转移，大范围转移的焦点会让用户感到焦点丢失;5、颜色针对TV显示器的本身特性，在进行UI的视觉层面的设计中需要注意以下几点：1. 纯白在电视会产生图像拖影， 如需使用白色，可以用#F1F1F1 或者240/240/240进行代替2. 高饱和度颜色会导致显示失真，并且在高饱和度颜色向低饱和度颜色过渡时会产生边缘模糊3. 大范围渐变会
4、导致带状显示，无法平滑过渡4. 在界面边缘最好留出10%空隙，避免发生电视显示屏独有的“过扫描”现象6、分辨率现阶段智能电视有两种分辨率模式1920x1080和1280x720，也就是我们常说的1080p和720p，在进行UI设计时候：1. 高分辨率设计，可以使用android 9-patch切图进行低分辨率适配。在测试的时候选择用低分辨率测试可以更好的发现问题。2. TV有多种显示模式，确保所有模式下经过测试，都不会产生问题。篇二：UI界面设计规范UI设计规范一：UI设计基本概念与流程 目的规范公司UI设计流程，使UI设计师参与到产品设计整个环节中来，对产品的易用性进行全流程负责，使UI设计
5、的流程规范化，保证UI设计流程的可操作性。范围l 界面设计l 此文档用于界面设计,本文档的读者对象是项目管理人员、售前服务人员、UI界面设计人员、界面评审人员和配置测试人员。 概述UI设计包括交互设计，用户研究，与界面设计三个部分。基于这三部分的UI设计流程是从一个产品立项开始，UI设计师就应根据流程规范，参与需求阶段、分析设计阶段、调研验证阶段、方案改进阶段、用户验证反馈阶段等环节，履行相应的岗位职责。UI设计师应全面负责产品以用户体验为中心的UI设计，并根据客户（市场）要求不断提升产品可用性。本规范明确规定了UI设计在各个环节的职责和要求，以保证每个环节的工作质量。 基本介绍A、需求阶段软
6、件产品依然属于工业产品的范畴。依然离不开3W的考虑（Who,where,why.）也就是使用者，使用环境，使用方式的需求分析。所以在设计一个软件产品之前我们应该明确什么人用。什么地方用（在办公室/家庭/厂房车间/公共场所）。如何用（鼠标键盘/遥控器/触摸屏）。上面的任何一个元素改变结果都会有相应的改变。除此之外在需求阶段同类竞争产品也是我们必须了解的。同类产品比我们提前问世，我们要比他作的更好才有存在的价值。那么单纯的从界面美学考虑说哪个好哪个不好是没有一个很客观的评价标准的。我们只能说哪个更合适，更合适于我们的最终用户的就是最好的。B、分析设计阶段通过分析上面的需求，我们进入设计阶段。也就是
7、方案形成阶段。我们设计出几套不同风格的界面用于被选。C、调研验证阶段几套风格必须保证在同等的设计制作水平上，不能明显看出差异，这样才能得到用户客观真实的反馈。测试阶段开始前我们应该对测试的具体细节进行清楚的分析描述。调研阶段需要从以下几个问题出发：用户对各套方案的第一印象用户对各套方案的综合印象用户对各套方案的单独评价选出最喜欢的选出其次喜欢的对各方案的色彩，文字，图形等分别打分。结论出来以后请所有用户说出最受欢迎方案的优缺点。所有这些都需要用图形表达出来，直观科学。D、方案改进阶段经过用户调研，我们得到目标用户最喜欢的方案。而且了解到用户为什么喜欢，还有什么遗憾等，这样我们就可以进行下一步修
8、改了。这时候我们可以把精力投入到一个方案上，将方案做到细致精美。E、用户验证阶段改正以后的方案，我们可以将他推向市场。但是设计并没有结束。我们还需要用户反馈，好的设计师应该在产品上市以后去站柜台。零距离接触最终用户，看看用户真正使用时的感想。为以后的升级版本积累经验资料。经过上面设计过程的描述，大家可以清楚的发现，界面UI设计是一个非常科学的推导公式，他有设计师对艺术的理解感悟，但绝对不是仅仅表现设计师个人的绘画。所以我们一再强调这个工作过程是设计过程。UI界面设计不存在美工。2. UI设计流程 概述根据上述原则，分析公司产品的特点，制定符合软件产品（或项目）生命周期的UI设计流程。每个产品（
9、或项目）的生命周期中，UI设计师应该严格按照流程，完成每个环节的职责，确保流程准确有效的得到执行，从而提高产品的可用性，提升产品质量。二：UI界面用户体验设计原则与规范1：应该遵循的基本原则无论是控件使用，提示信息措辞，还是颜色、窗口布局风格，遵循统一的标准，做到真正的一致。这样得到的好处：1：使用户使用起来能够建立起精确的心里模型，使用熟练了一个界面后，切换到另外一个界面能够很轻松的推测出各种功能，语句理解也不需要费神理解2：降低培训、支持成本，支持人员不会行费力逐个指导。3：给用户统一感觉，不觉得混乱，心情愉快，支持度增加做法：项目组有经验人士，确立UI规范：美工提供色调配色方案，提供整体
10、配色表界面控制程序人员、用户体验人员提出合理统一使用的控件库。参考标准界面使用规范： 控件功能遵循行业标准，windows平台参见Microsoft 用户体验控件样式在允许的范围内可以统一修改其样式、色调参考其他软件先进操作，提取对本项目有用的功能，以使用，绝对不能盲从，漫无目的。 根据需要，设计特殊操作控件，准则为：简化操作、达到一定功能目的界面实施人员与美工商榷控件可实现性,。重复叠代上述工作。建立合理化文档UI标准描述上述规范。强行界面设计者理解之，并作为开发准则。SQA人员进行监控开发人员是否遵循，及时告诫开发人员。2：颜色使用恰当，遵循对比原则：1：统一色调，针对软件类型以及用户工作
11、环境选择恰当色调：如：安全软件，根据工业标准，可以选取黄色，绿色体现环保，蓝色表现时尚、紫色表现浪漫等等，淡色可以使人舒适，暗色做背景使人不觉得累等2：如果没有自己的系列界面，采用标准界面则可以少考虑此方面，做到与操作系统统一，读取系统标准色表3：色盲、色弱用户，即使使用了特殊颜色表示重点或者特别的东西，也应该使用特殊指示符，?quot;!，?着重号，以及图标等4：颜色方案也需要测试，常常由于显示器、显卡的问题，色彩表现每台机器都不一样，应该经过严格测试，不同机器进行颜色测试5：遵循对比原则：在浅色背景上使用深色文字，深色背景上使用浅色文字，蓝色文字以白色背景容易识别，而在红色背景则不易分辨，
12、原因是红色和蓝色没有足够反差，而蓝色和白色反差很大。除非特殊场合，杜绝使用对比强烈，让人产生憎恶感的颜色。 6：整个界面色彩尽量少的使用类别不同的颜色itop色表具体标准参考美术学统计学术标准。 色表的建设，对于美工在图案设计、包装设计上起着标准参考作用，对于程序界面设计人员设计控件、窗体调色起到有章可循的作用。篇三：APP界面UI设计规范UI设计规范一、APP界面设计规范（一）界面尺寸1、IOS界面尺寸：常见为（宽度640px、高度1136px）2、Android界面尺寸：常见为（宽度720px、高度1280px）其他尺寸：ldpi（240*320）、mdpi（320*480）、hdpi（4
13、80*800） 3、Web Mobile尺寸：常见为（宽度640px、高度960px）（二）导航尺寸1、IOS导航尺寸：高度60px，留白7px2、Android导航尺寸：高度64px或48px，留白8px（三）标签尺寸1、IOS标签尺寸：高度98px2、Android标签尺寸：高度96px（四）工具栏尺寸1、IOS工具栏尺寸：高度88px2、Android工具栏尺寸：高度96px（五）列表高度1、IOS列表高度：高度88px2、Android列表高度：高度96px（六）资源状态对于资源通常设计弹起、点击、点击后、不可用四种状态，通常弹起、点击、点击后用不同颜色表示、不可用状态用低度灰色表示。（七）字体1、IOS默认英文为HelveticalNeue，中文为黑体2、Android列表高度：默认为 Droidsans fallback（八）字号字号通常按照标题及征文级别递减为42、36、34、30、24（九）ICON1、IOS常用尺寸有1024*1024、512*512、120*120、60*602、Android常用尺寸有512*512、200*200、72*72、48*48（十）资源插图1、长方形插图高度一般不超过背景宽度的二分之一2、缩略图两张并列高度一般不超过200px，宽度要适中有留白3、图文混排中图片一般不高过150*110
