UI设计师多久能做一张大屏可视化

造型千奇百怪的小屏手机叱咤风云的时代已经一去不复返了。事实上，近几年的行业趋势表明大屏手机，或者说巨屏手机，将会在很长的时间内占据主流。而现在，也是时候总结一下过去几年里，面对大屏手机时，设计师的失职。

如何界定大屏手机？

其实简单称之为大屏也不是特别准确，它的英文名称更为形象：Phone+Tablet=Phablet ，也就是说，它是传统手机和平板的结合体，Phablet。

因

此，这些大屏手机实际上是超过我们手掌习惯的、可掌控的尺寸，但是又没有达到平板的级别。更准确的说，是屏幕尺寸在5~6.9英寸的那些大屏手机。作为参

考，iPhone 4&4S 的屏幕尺寸是3.5英寸，iPhone 5&5S 为4 英寸，iPhone 6

为4.7英寸，iPhone 6P 为 5.5英寸。

所以，仅需要看看屏幕尺寸就可以快速确定手机类型。

尽管Phablet在现在看来早已不是新东西了，但是绝大多数用户都还是从三星的Note系列开始知道它的存在，到现在满大街都是iPhone 6P之后才真正对它上心。最早的Phable可以算在三星的Galaxy Note头上，而这款手机早在2011年就有了。

追根溯源

在

以手机呼叫为主短信沟通为辅的功能机时代，绝大多数用户几乎不会通过手机购买内容，而现在则截然不同，用户在手机上购买数字内容早已不是新鲜事，而且数字

内容的消费会越来越多，这和手机屏幕的增长以及交互方式的改变分不开。根据Statista

的研究分析，从现在开始手机市场会以每年4%的比例增长，而截至2018年，大屏手机的增长率则预计会高达36%，不用多想，我想你能明白这中间有多大的

想象空间。

大屏手机的交互设计

大屏手机自然是大气炫酷，现在每天都有许多用户抛弃之前的小屏智能机加入5英寸大屏机的阵营。但是，他们并不确定更大的屏幕能给他们带来更优秀更舒适的用户体验，毕竟手掌并没有随之增大。因此，用户与大屏机之间的交互方式就需要进行调整了。

手机屏幕的拇指操作热区图你可能接触过，它标识出了人们握持手机，并标识出那些区域拇指易于操作，哪些地方难于触及。

其

实，拇指操作热图最早是由设计师Steven Hoober于2011年的书《Designing Mobile

Interface》中使用，其中的绿色部分被他称为“单手握持时拇指触摸最舒适的区域”。这些区域的测量是通过1333份观测分析总结出来的，这些分析

数据还表明，49%的用户习惯于单手握持手机，用拇指操控屏幕，而用另外一只手做其他的事情。同样是基于当年的这些报告，还获取了以下信息：

36%的用户会双手环抱手机，用其中一只手的拇指操控屏幕

15%的用户会用双手握持手机并用两手的拇指操控屏幕，其中90%的用户操作时习惯屏幕竖着，而10%的用户偏向于横屏操作。

但

是在“3.5英寸最佳”的时代过去之后，大屏手机上的操控又是怎样的状况呢？用户是否需要用力伸展拇指点击屏幕另一边缘的按钮，又或者他们的握持方式有所

改变？Steven

Hoober的最新研究数据表明，“用户单手握持的比例下降，会更多用上另外一只手，并且会频繁地切换双手操作，不论是输入还是握持。”这种状况已经延伸

到不同尺寸的设备上，包括普通的手机、大屏手机以及平板。

看

看单手握持时候用户拇指的操作热区图吧，绿色的是舒适区，橙色的部分是手指用力伸展可触及的区域，红色则是拇指无法触及的区域。很明显，拇指操控区域在这

些大屏手机上并不大，用户也不会因此委屈自己的拇指来完成复杂的任务，“一手承担”全部的操作。所以，这也是为什么用户会调整他们的握持方式，适应新的握

持力度，尽量适应新的操控和交互方式，与大屏手机轻松互动。

这样看来，似乎能让人松一口气，单手考虑到目前大屏手机的尺寸和界面复杂的交互，所以用户在绝大多数的情况下其实依然是用一只手来承担握持的任务（握持方式有所改变）。这样一来，为了同时兼顾握持和交互，在大屏手机上，用户最舒适的操作区域依然很接近之前的拇指舒适区。

可惜的是，实际状况并非如此。

如何为大屏手机设计界面/交互/用户体验

作为大屏手机领域的先驱，三星Galaxy Note系列为市场和用户作出了巨大的贡献，但是涉及界面、交互和用户体验之时，它唯一的贡献可能就是那只手写笔了。另外一个尴尬的现实是，绝大多数的Note用户几乎没用过他们的手写笔。

相

应的，苹果公司看起来在大屏优化上更加上心。iPhone

6P的发布将所有的问题摊了开来，iOS的设计师为此追加了诸多“可达性”设计，比如双击Home键之后，屏幕顶部的内容会向下推至舒适区，方便用户操

作。这里面许多设计都是典型的妥协之后的结果，在设计上有所提升但是不够好。而iPhone之外，还有千奇百怪的Android手机，它们基本上就是八仙

过海各显神通了，UI和交互设计上的品质就更不好说了。

Luke

Wroblewski

还提供了另外一个解决方案：将最重要的交互点移动到屏幕底部，并根据这些按钮/控件/操作区域的重要性，由下往上排布。（国内手机厂商魅族在设计

Flyme的时候推出了Smartbar的解决方案，和这个思路基本一致）对于iOS而言，能沿袭这种方案来进行设计自然是不错的，Android也是如

此，但是苹果和谷歌只能控制系统上的设计，而具体的APP开发者和设计师还需要在这个上面进行更深入的考量。

最后的思考

大

屏手机的普及程度还在快速增长，更大的屏幕和更丰富的数字内容正在重塑我们这个时代，移动端设计正在悄无声息地改变着一切。在大屏手机的UI、交互和用户

体验设计上，我们还需要了解更多的实际情况，搜集更多数据支持，并且在UI/UX的决策上有更多的考量。最近两年所有的手机和手机系统发布会上，每个主讲

人都在强调“我们在大屏机界面优化上有特别的技巧”，但是实际使用的时候，千奇百怪的操作方式依然令人感到不自然。未来，还有很长的路要走，这其中的空

间，还很大。

数据是企业的上帝之眼，数据可视化就发挥了很大的作用。很多从事B端产品设计的小伙伴在日常工作中遇到数据可视化的场景比较多，所以我们整理了一些数据可视化图表资源，帮助你们更快更高效的完成设计。

数据可视化设计素材范例，为UI设计师提供设计思路，增加设计灵感，创作更多大气炫酷的设计方案。

谢谢邀请。UI设计的前景依然看好，但是就目前和将来发展趋势，对UI/UX设计师的要求会越来越高。非设计相关专业、非心理学专业的初级者谨慎入行非设计相关专业、非心理学专业的朋友可以先选择平面设计，电商设计等先入行一线城市的UI/UX设计师待遇基本情况初级 1～2年 8000左右起中级3～5年 12000左右起高级6～9年 18000左右起资深年薪 30万左右并且UI设计师容易往其他岗位转，特别是互联网产品经理。UI设计可以涉足到各个领域，特别是在互联网，科技等领域的发展，在前几年到了一个新的高度。现在对UI设计师的要求：全链路，全能型UI设计师的要求：1. 视觉设计2. 交互设计3. 用户体验4. 产品思维5. 动效设计6. APP UI设计7. 小程序 UI设计8. 网页UI设计9. H5设计10. 智能硬件UI设计11. 数据可视化 （大屏系统设计）12. B端后台UI设计13. 车载hmi设计14. 前端技术实现通识15. 电商设计16. 平面物料设计17. 产品设计（全链路，设计相通性）18. 作品集包19. 潮流技术，VR/AR，人工智能，设计规范（应对面试）20. 项目实训，作品上线（应对面试）21. 插画设计22. C4D设计23. 视频设计现在紧缺的不是普通UI设计师，而是真的UI/UE全链路设计师，全能设计师，这样才有机会，你才能对UI设计工作应付自如。最后看看优秀的UI设计师作品集学员UI设计作品赏析视觉客总监的视频 · 3869 播放

大屏的制作，可以用代码开发或现成的可视化工具来实现。用的比较多的就是JS+Ecahrts，但数据量支撑、后台响应、实时更新、平台运维等应该还要调用更多的技术，这个不是非常懂就不赘述了。另一种是用现成的可视化工具，能相对简单高效的搭建一个数据大屏，比如帆软FineReport，阿里dataV。

大屏硬件：大屏的展示工具几乎都是LED拼接屏，如果是boss办公室这种也有用大屏幕显示器的。用LED拼接屏，UI设计时不用考虑屏幕缝隙影响内容的呈现，内容不会丢失，但有可能影响视觉的表现。设计时需要建立缝隙位置的参考线避，免类重要信息被分割。现在企业常用的有无缝隙、1.7mm缝隙、3.5mm缝隙、三种拼接大屏，缝隙越小越贵。拼接的每块小屏一般是16:9的高清屏，设计尺寸可以把上下高度设定为1080px，长度按照拼接屏的数量比例得出长度的设计尺寸。例如3乘5的一块大屏幕，高度3块屏设为1080，每块高就是360，360除9乘16等640，640就是一块屏幕的长度，640乘5块屏＝3200最后得出设计稿尺寸就是：高1080px乘宽3200px。

接下来就来讲讲制作可视化大屏的重头戏，指标、布局、设计、动效。以FineReport制作大屏为例，这篇文章将教你怎么实现可视化。

指标设计：设计大屏，大家可能会被酷炫的可视化所感动，但一定要谨记，大屏一定是以展示数据为核心，任何炫酷吊炸天的表现都要建立在不影响数据的有效展示上！所以，大屏首要考虑的是放哪些数据，那么多指标应该放那些？一般而言，一个大屏一定会有明确的主题，比如销售数据大屏，集团营业数据大屏。针对这种主题明确的可视化，推荐一个非常好用的套路——多维度拆解北极星指标法。

第一步：确定一个北极星指标。如销售大屏，你的销售总额一定是最重要的吧，这就是主题。第二步：多维度拆解北极星指标，把你的销售额情况分解。

从时间的维度。每个季度每个月的销售额情况是如何，销售额特别高的时间段，原因是什么，做了哪些措施？从地理维度。各大区域销售额情况如何？可以做个排名情况。从计划维度。和年初定的计划相比，差了多少？从占比维度。各个产品占的销售额多少，哪些是带来贡献最多的明星产品。

信息时代，数据是一种可贵的资源，我们可能经常听到的一句话就是：用数据说话。但是，在没有进行系统化整理之前，数据不过只是一串串冰冷的数字，我们很难从大量的数据中获取到有价值的信息。只有通过合适的可视化工具，才能更加直观的感受到数据所带来的变化，为接下来的工作提供支持，这就是可视化大屏（BI）所带来的价值。

可视化大屏是为了在大量核心数据中选择最优展现方式，它可以将业务的关键指标以可视化的方式展示到一块或多块LED大屏上，不仅可以让业务人员快速、直接地从繁杂的业务数据中找到重要数据，还可以对决策人员起到辅助作用。

今天我们以learun商业智能插件来介绍一下可视化大屏的应用及设计规则。

一.何为数据可视化

数据可视化其实就是借助于图形化手段，将数据清晰有效的传达出来。这样一来，既可以让数据的呈现效果更加直观，便于查看，还可以更加快速的挖掘到数据中隐藏的价值，其本质是可视、可交流、可互动。

可视化为什么需要大屏支持呢?因为通过大尺寸屏幕来展示数据，容易给人留下震撼的感觉，具有浓郁的科技感，便于打造某些独特的氛围或者说仪式感。同时利用其面积大、可展示信息多的特点，便于多人同时查看，数据可以以共享的方式展现在观看者面前，便于团队讨论和决策。

二.可视化大屏主要应用场景

随着大数据的发展，可视化大屏在各行业的应用也越来越广泛，变得更加普及化，尤其以政府、商业、金融、制造等行业的业务场景中，大数据的价值体现的淋漓尽致。比如，数据大屏作为一种有效传递信息的手段，正在城市智能运营中心、应急指挥中心、公安监控中心、电力调度中心、金融交易大厅等部门和机构中承担起重要的角色，具备日常监测、分析研判、应急指挥、展示汇报等多种功能，在提高科学管理工作等方面发挥了重要的作用。这里提供一些行业模板，以作参考。

三.可视化大屏设计原则

很多人对可视化大屏的第一印象就是炫酷，但是炫酷为其表，数据传达的清晰有效，才是大屏的重点。

大屏中通常有多种资源类型及数据需要展示出来，但是需要进行页面布局来将主要信息和次要信息展示出来，明确层级关系和流向，使观看者能快速获得信息的同时，也能获得视觉平衡感。

一般情况下，如果企业要开发出一款大屏，需要经历：需求沟通——大屏UI设计——大屏数据开发——大屏前端开发，这一系列步骤流程。总的来说需要遵循以下原则：总览优先，细节辅助。

1.是要服务于业务，让业务指标和数据合理的展现

由于往往展现的是一个企业全局的业务，一般分为主要指标和次要指标两个层次，主要指标反映核心业务，次要指标用于进一步阐述分析，所以在制作时给予不一样的侧重。

2.合理的布局能让业务内容更富有层次，合理的配色能让观看者更舒适

配色的学问主要是背景色，背景色又分为整体背景以及单个元素的背景，无论是哪一个，都遵从两点基本原则：深色调和一致性。深色调是为了避免视觉刺激。

3.在大屏展现上，细节也会极大的影响整体效果

通过适当给元素、标题、数字等添加一些诸如边框、图画等在内的点缀效果，能帮助提升整体美观度。

4.动效的增加能让大屏看上去是活的，增加观感体验

但过分的动效极其容易喧宾夺主，反而丧失了业务展现价值，我们需要把握一个度，既要平衡酷炫效果，又要突出内容。

目前市面上有众多可视化工具，有的为了实现其功能效果而令人感到枯燥乏味，有的为了看上去绚丽多彩而做得极端复杂，企业决策者难以从中理解数据的真正价值。

LeaRun商业智能插件是基于浏览器的、用于配置数据可视化大屏的工具平台。它提供了丰富的可视化设计组件，通过简单的点击、拖拽等操作，即可进行图表布局的调整，只要几分钟就可以配置出一页实用且炫酷的可视化大屏。

专业的数据分析软件旨在帮助企业提供从内外部数据源整合、数据治理到探索式分析，以及最终实现智能化决策的大数据分析能力，助力企业构建数据生态系统，帮助企业降本增收和实现数据资产的变现。

Windy.

UI设计和网页设计的区别：网页设计侧重于网站页面的设计，一般是电商和传统的网站用的比较多，UI设计侧重于图标，app设计，页面设计以及交互，两者有不同的侧重点，但是相对来说ui设计的发展比较大一些。当然平面设计做的很牛的人也是很不错的。

UI设计更多的针对的是小屏用户，即手机、平板电脑等触控方面的设计。所以要求对于交互体验要有较深的了解，能揣摩用户的操作习惯，并根据这些做相相应的界面设计、流程规划等。在UI设计中除了与网页设计中相似的界面设计之外，还有很大一部分工作是对于软件的图形设计，比如说APP的LOGO，界面中的ICON等。对于这方面的设计，除了要有很强的图形创意功底之外，对于细节的把控也是重中之重。因为对于小屏设计来说，可能就是一两个像素点上来求精致，因此UI设计师对于细节的深挖能力很重要。

网页设计更多是针对于大屏用户，在电脑端来浏览网页的。所以网页设计要求要有很好的页面布局能力，也就是说版式编排能力。因为要考虑到网页的浏览规律，所以在网页设计中，对于视觉流程的掌握要求很高。在网页设计中，不存在太多的图形创作，并且整格版式的视觉效果要超过对于细节的刻画。因此相对来说，网页设计在某些方面难度低于UI设计。