第三方帐号登录

第三方帐号登录

使用邮箱登录

找回密码

全站搜索 传播新资讯,发掘源创意!

专栏《100点创新设计方法》系列 —— 三屏 Three-screen

2020-04-18  9717


格物者专栏 《100点创新设计方法》系列

三屏

Three-screen

怎么做:三屏就是手机屏、电脑屏、电视屏,在生活当中比较重要的三个屏幕,做UI 设计的时候试着在三种屏幕之间转换,感受其中的差异。

为什么这么做:很多软件已经实现了三种屏幕转换,在三种屏幕上都可以应用,而三种屏幕上的展现又非常不同,可以先设计一种,在三种屏幕上展示,感受差异,再去设计。

设计师在做UI 设计的时候,可以用的方式,可以帮助设计师寻找最好的效果。

手机、计算机和电视这三块占据着人们生活的重要屏幕,一直是科技巨头们垂涎已久,妄图一统的战略要地。这个三屏合一,并非整合出一个屏幕来解决所有的生活工作娱乐的需求,而是三块屏幕能够互相配合,在最合适的屏幕上展示最有价值的内容。由于“三屏”分别对应着有线电视网、宽带网和电信网,因此三网融合后,必然带来终端设备的三屏合一。

三屏合一是指充分利用现有的平台和资源,以用户为核心,在三屏之间形成很好的资讯互补和服务统一,从而推动彼此的价值提升。三屏中,电视屏是基础,同时也是电脑屏未来演化方向之一。电视屏可在电脑屏所代表的互联网基础上再加上自身具有的传统视音频内容形成一个可收费的价值体系,为互联网业务和内容提升价值。而手机屏则是电脑屏和电视屏的精华延伸和价值提升手段。现在随着4G网络的全面部署以及流媒体、智能手机终端等相关技术的逐步发展和完善,移动网络的短板已渐渐消失,使得电视、电脑、手机三者之间可以通过发挥各自的优势形成很好的弥合。同时在三屏中由于电视屏幕用户的广泛性以及广电信号质量的优越性,广电的电视屏幕必定在三屏合一的发展中起主导作用。

用户在不远的将来,可以通过一个终端屏幕将电视、电脑和手机的功能融合为一,既可以观看电视节目,也可以登陆互联网,还可以进行可视通话,用户的使用习惯将迫使终端设备商进行新产品的研发。主打三屏合一功能为卖点的产品包括电子书、平板电脑、智能手机等。例如,继苹果宣布推出引领一代潮流的平板电脑iPad、抢占三屏融合先机之后,惠普、微软、诺基亚等都宣布着手研发三屏融合产品,国内厂商联想、万事通等也发布了类似产品。

除了终端设备的功能合一,三屏融合还为内容提供商和平台运营商带来契机。当电视、电脑和手机还只能分别在不同的屏幕上展现时,各种内容间存在着格式的鸿沟,无法实现互通与共享,而当政策推动鸿沟愈合之后,必然要求内容供应商提供可以共通的内容格式。

三屏合一的发展趋势

1、从大的产业环境来看,融合和转型成为当前全球产业界的两大命题。融合已从过去人们关心的技术与网络融合上升到产业间的融合,而转型也将面向包括电信、互联网、广电、工业、农业等更多行业的”大信息产业”,从产业链和价值链的角度讲就是传统信息服务对上下游的产业链进行深度延伸。

2、从国内运营商角度来看,三屏合一是全业务运营商当前关注的重点。通过前期IPTV业务和网络视频业务的发展,运营商已经积累了一定的运营经验和技术解决思路。广电运营商和电信运营商已经在局部开展的尝试,为今后推进内容、网络、服务的深层次合作奠定了基础。

3、从用户角度来看,随着人们生活水平的不断提高以及生活工作节奏的不断加快,用户对业务体验也提出了便捷性、时效性、广泛性、持续性以及一致性等更高的要求。

4、从政策角度来看,随着2008新一轮政治体制改革和相关政策的调整,我国广播电视、电信和互联网等原本不同的网络设施产业正加快从产业分立走向产业融合的步伐,为三屏合一的发展提供了政策基调。

在“三屏融合”的趋势下,虽然未来的彩电业新格局存在一定的不确定性和不可预知性,但从技术层面来说,电视作为最最普及的提供内容消费的一类电子产品,它和网络的无缝连接已经呈现不可阻挡之势。现在的电视已经不再只被用来被动地收看电视节目,而是能进行个性化应用和内容的“定制”。如果说平板电视时代让人们看得更清晰;那么在未来的智能电视时代,人们将体验到全新的、智能化的的“三屏融合”生活:世界杯的比赛在电视上没有看完,走在路上打开手机继续收看,而到了办公室,还能打开电脑继续观看(当然,你不能耽误工作)。

关于屏幕适配 

1、屏幕适配的本质

适配即使布局、布局组件、图片资源、用户界面流程匹配不同的屏幕尺寸。主要让布局、布局组件自适应屏幕尺寸,而根据屏幕的配置来加载相应的UI布局,用户界面流程,这就是屏幕布局的本质。

2、 屏幕适配方案

a布局适配

使得布局自适应屏幕尺寸,解决方案是使用相对布局,禁用绝对布局。第二个就是根据屏幕的配置来加载数组的UI布局,解决方案是使用限定符:包括尺寸限定符、最小宽度限定符、布局别名和屏幕方向限定。

b布局组件适配

本质是使得布局组件自适应屏幕尺寸,解决方法:使用wrap_content、match_parent和weight来控制视图组件的宽度和高度。

适配也是目前来说一些设计师比较头疼的一个问题,有很多小细节需要我们去注意。尺寸的变换一般分为两种:一是等比缩放,这种适合的是图片类;二是高度不变,水平间距缩小,这种适合的是设计组件。

UI适配原则

1、根据公司的战略,选择一个先切入的平台;

2、了解该平台的UI设计规范,可用的UI 控件及交互原则;

3、确定切入的屏幕大小,以此来设计第一个客户端,但是要考虑适配其他屏幕的可能性,是自适应来扩展或者缩小;

4、根据平台及屏幕大小,来选择典型,开始客户端的交互设计;

5、确定客户端的核心目的。如为娱乐为主的,应在设计方式更娱乐性,功能性完成目的为主的,以更易用性为主;

6、根据客户端的功能和内容,来设计客户端的信息架构;

7、根据UCD的原则,来完成客户端的交互原型。

当然进行适配的工作量是非常大,有很多的小细节需要我们去注意,一篇文章的篇幅是肯定讲不完的。我给大家的建议就是:不会做的时候,去看看别人怎么做的。


专栏作家

许方雷

格物者创始人

“格物”精神倡导者,推究事物原理

近年来,探索“创业”与“创意”,文化与商业融合。设计作品多次获得日本、中国大陆及中国台湾等国内外设计奖项。作为中国设计平台联盟发起人之一,致力于推动中国原创设计产业,专注“工业设计”。

《100点创新设计方法》,是格物者通过案例总结和方法归纳,总结出的100个设计小方法,新华出版社出版,是一本方便携带的口袋书,让你在路上,在闲暇时,利用琐碎的时间来品味的方法创意书籍,可以直接应用到你的创意工作中,随意翻开一页,都是一个方法,让你俘获灵感,100点创意妙招,我们送你啦!

ISBN:978-7-5166-1195-1

中国版本图书馆CIP数据核字(2014)第210136号

专栏内容刊发在国家知识产权局主管《创意世界》杂志期刊,未经授权,请勿转载


更多《100点创新设计方法》文章:

1.《100点创新设计方法》系列 —— 释放天性 The release of nature

2.《100点创新设计方法》系列 —— 用更加生动的方法 With a more vivid method

3.《100点创新设计方法》系列 —— 饥饿法 Hunger

4.《100点创新设计方法》系列 —— 参考资料书籍或网络 Referenced books or websites

5.《100点创新设计方法》系列 —— 关键词法 The key words

6.《100点创新设计方法》系列 —— 便签法 Sticky notes

7.《100点创新设计方法》系列 —— 目录法 Directory

8.《100点创新设计方法》系列 —— 剪辑法 Clip

9.100点创新设计方法》系列 —— 记录观察法 Record and observation

10.《100点创新设计方法》系列 —— 照片法Photos

11.《100点创新设计方法》系列 —— 录音法 The recording

12.《100点创新设计方法》系列 —— 音乐法 Music

13.《100点创新设计方法》系列 —— 头脑风暴 Brainstorming

14.《100点创新设计方法》系列 —— 分享 - 格物者设计分享 Share

15.《100点创新设计方法》系列 —— 直觉 Intuition

16.《100点创新设计方法》系列 —— 联想-异形异物 Associating

17.《100点创新设计方法》系列 —— 臆想 Imagine

18.《100点创新设计方法》系列 —— 产品体验 The product experience

19.《100点创新设计方法》系列 —— 偏好 Preferences

20.《100点创新设计方法》系列 —— 公司进化定位 Company’s evolving positing

21.《100点创新设计方法》系列 —— 历史文化典故 History,culture and stories

22.《100点创新设计方法》系列 —— 文化禁区Cultural taboos

23.《100点创新设计方法》系列 —— 情感设计 Affectional design

24.《100点创新设计方法》系列 —— 行为习惯 Behavior and habits

25.《100点创新设计方法》系列 —— 不要无意义的修饰 No meaningless ornament

26.《100点创新设计方法》系列 —— 打破常规 Break the routine

27.《100点创新设计方法》系列 —— 图案纹理 Pattern texture

28.《100点创新设计方法》系列 —— 图形演变 Graphic evolution

29.《100点创新设计方法》系列 —— 自然环境 The natural environment

30.《100点创新设计方法》系列 —— 仿生仿物 Copy the shape of living things

31.《100点创新设计方法》系列 —— 颜色刺激 Color stimulus

32.《100点创新设计方法》系列 —— 功能的加减 Adding or subtracting functions

33.《100点创新设计方法》系列 —— 产品跨界 The transboundary of product

34.《100点创新设计方法》系列 —— 点线 Point and line

35.《100点创新设计方法》系列 —— 黄金分割 Golden section

36.《100点创新设计方法》系列 —— 用视角还原整体 Rebuild the wholeness from one angle

37.《100点创新设计方法》系列 —— 以小见大 A small sign can indicate a great trend

38.《100点创新设计方法》系列 —— 主题 The theme

39.《100点创新设计方法》系列 —— 视觉焦点 Visual focus

40.《100点创新设计方法》系列 —— 标准化 Standardization

41.《100点创新设计方法》系列 —— 辅助图形 Auxiliary graph

42.《100点创新设计方法》系列 —— 供需关系 Relationship between supply and demand

43.《100点创新设计方法》系列 —— 外协厂 Outsourcing factory

44.《100点创新设计方法》系列 —— 安全性 Securit

45.《100点创新设计方法》系列 —— 整体产品线法 The overall product line method

46.《100点创新设计方法》系列 —— 总结案例 Summarize the case

47.《100点创新设计方法》系列 —— 草图 The sketch

48.《100点创新设计方法》系列 —— 虚拟场景(建模) Virtual scene

……

97.《100点创新设计方法》系列 —— 模拟实验 Simulation experiment

98.《100点创新设计方法》系列 —— 发掘你的潜在客户 Explore your potential customers

99.《100点创新设计方法》系列 —— 行动路线 Action route

100.《100点创新设计方法》系列 —— 不良习惯的改正 To correct bad habits


诚邀设计同行分享干货、文章、报告等
投稿请发邮件 leo@gewuer.com
新闻报道及人物专访 13153262
0   8148

文章评论(0)

发 表