结构化消息专为大屏而设计

小编:屏幕越来越大,生活中带来更好的体验,但是做为设计师更要多思考一点。本文即为腾讯带来的分享。简而未减-结构化消息专为大屏而设计!随着大屏幕高清分辨率的普及,我们在打游戏、看电影、浏览美图时,总希望屏幕越大越好,这种视角上广度与深度的享受以及和沉浸式聚焦的体验,是在小屏幕上完全给予不了的。

图中可以看出5.5英寸以上屏幕可以称Phablet,7英寸以上就是Tablet。这次案例以Tablet设备为主,Phablet设备为辅进行体验设计。

在我们的社交平台上,用户消息在多个终端设备传递中,产品功能只是在原有基础上简单粗暴放大而已,那么大屏手机/平板电脑存在的价值化为乌有。

案例分析:这种结构化消息是目前国内主流的一种设计形态。

1.以消息为主的结构化设计:

不论是资讯分享、音乐分享、视频分享不以内容区分而设计,都在一种载体内呈现,这种结构虽普适性强,可以兼容多元化的场景。但因设计形态统一,导致在内容辨识度上也有所下降,内容设计上没有各自特点,用户在浏览过程中容易忽略内容本质。

2.信息内容碎片化:

用户可以获取到更多信息,但因内容平均分布,所以画面不够聚焦。我们可以把这些内容信息看成点的组合,点的基本属性是瞩目性,能形成视觉的中心.当画面中有3个以上的相同大小点时,画面就会显的凌乱。当画面有不同面积的点时,较大点会引起人们的注意 ,依次会较小的点。

3.以标题文字为主进行快速浏览:

在浏览过程中用户通常以抓取关键词为主,快速吸引到下一级信息。而图片在大部分情况下会有被缩小,裁剪,因图片尺寸较小,从图中获取不到更多的信息。
在原图中可以清晰的看到电视剧领衔主演的演员,这也是吸引用户的关键因素之一。但被缩小裁剪后,必须借助文字才能获取到关键信息。

这种以消息为主的结构化设计在iPhone7Plus设备显示,相同信息可显示约4-4.5条左右,有效提升屏幕利用率。但如果直接放大或拉伸到大屏幕中,这种设计体验显的苍白无力,没有充分体现大屏幕沉浸感、聚焦、画面感的优势。

1.以内容为主进行设计:

用户会更加内容本身,不同的内容采用不同图片的尺寸和排版,有利于用户快速区分和记忆。

2.以图片为主进行快速浏览:

首先图片消费已成为阅读消费中的一个大类,比文字而言,图片更直观,更具有视觉冲击力,也更能适应现代社会的快节奏。图片对于文字的诠释作用帮助个人加深文字理解和形象记忆,提高阅读的有效性和趣味性。一张图片胜千言万语,可以有效传达情绪,迅速和用户建立起共鸣。

3.比例结构:

从布局结构上尽量保证原始的摄影图片和视频比例不被过度裁剪。Flickr的一组数据显示,随着iPhone很大程度上替代单反成为主流拍照设备,4:3和16:9的图片数量占比追上了传统摄影的3:2。而16:9更接近美学比例,黄金分割。

4.突显内容,降低信息密度:

使用负空间让重要内容吸引用户的注意力。很多人都说设计师这样会浪费屏幕的空间,但是留白本身就是设计的基本元素之一。这样更专注内容展现,通过放大内容,降低页面信息密度,内容读取更加舒适。

方案场景应用:

用户可以快速辨识出内容类型,画面有了聚焦元素,而不是满屏的文字,界面赋予了感染力和活力。但如果用户快速转发了很多内容时,在兼容小屏设备时,屏幕利用率会有所下降。在iPhone7Plus设备上,同样大小的信息在一屏内展示2-2.5条。用户需要在纵向滑动多次才能抵达下一个信息类别。所以针对提高屏幕利用率上进行了方案2横滑设计。

方案场景应用,引入横滑设计

打破屏幕界限,减少跳转,便于用户获得更多信息,在这个系统的基础之上,构建跨平台和超越设备尺寸的统一体验。

总而言之不去追求那些奇异的事物,而是从人们所“共有的特征”来提取价值,用最自然最合适的方法来重新审视,重新设计。

ISUX

作者:邋遢宝宝

(0)

相关推荐

  • 12306 iOS版客户端今日更新了 专针对大屏优化(附下载地址)

    随着春运火车票预售开启,12036今天更新了iOS版客户端,专门针对iPhone 6、iPhone 6 Plus的大屏进行了优化。 新版本为2.0,采用了全新界面,并优化了购票流程。 产品特色: 1、 ...

  • 大屏数据可视化设计指南

    一.基础概念 1.什么是数据可视化 把相对复杂.抽象的数据通过可视的方式以人们更易理解的形式展示出来的一系列手段叫做数据可视化,数据可视化是为了更形象地表达数据内在的信息和规律,促进数据信息的传播和应 ...

  • 2700元高性价比核显大屏实用电脑配置推荐

    曾经高性价比G620处理器+H61主板成为经典的入门高平台,不过随着G620处理器升级版本G630的出现,目前似乎打破了该局面,G630处理器拥有更出色的性能,并且价格相当,属于加量不加价型产品,因此 ...

  • 2016千元手机排行榜 2016千元智能大屏手机推荐

    目前在国产手机中以华为.小米.魅族以及360为首的线上品牌以及OPPO.vivo线下品牌,勉强再加上乐视这七个品牌占据着大部分市场份额,涵盖中高低端市场,在刚刚过去的2015年,已经倒下了以大可乐以及 ...

  • 10寸以上大屏手机排行 娱乐通话两不误的10寸手机推荐

    日益完善的手机功能正在不断丰富着人们的生活,我们使用手机来玩游戏.看电影.聊天.支付等,手机已经俨然成为人们生活中最重要的助手之一.现在市面上的手机产品数不胜数,其中以大屏幕手机更受欢迎,下面,排行榜 ...

  • 大屏触屏手机十大品牌排行榜

    排行榜123网依托全网大数据,根据品牌评价以及销量评选出了2019年大屏触屏手机十大品牌排行榜,前十名分别是苹果/APPLE.华为/HUAWEI.三星/SAMSUNG.索尼/Sony.诺基亚/NOKI ...

  • 全方位解读特斯拉 Model 3中控大屏UI交互布局

    简述:Model 3 的HMI堪称是对汽车行业的一个颠覆性作品,车内采用了极简的内饰设计基本取消的硬件按钮操作,甚至在所有车上都是标配的汽车仪表都不复存在了. <总结!车载UI与手机UI的设计区 ...

  • 为什么设计师需要理解产品业务?——结构化思维的应用

    小编:是不是经常听到一个声音:要了解产品,了解业务?作为一个设计师,无论是为了和产品们的和谐关系,还是为了摆脱"美工"这个称号,我们都需要知道「结构化思维」.下面跟随@ 周彭 通过 ...

  • 华为P20/Pro智能投屏如何使手机秒变大屏?

    一部HUAWEI P20,一根TYPE-C转接线 在加上家里的电视机,影院就这样打造成了 丰富的安卓系统电影资源 让我们想看什么就看什么 操作方法 01 大屏游戏,超快感体验 游戏越来越青睐手机 你爱 ...