原文地址：站酷
作者：孔雅轩LineVision
转载请注明：学UI网》你的设计有依据吗？详解用户体验设计中的规律与逻辑
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
每个产品都有核心的用户体验，这基本上是它存在的原因。它解决了人们所面临的问题，而且为他们提供有意义的价值。关键内容和功能的组合代表了核心的用户体验。要查找你的产品核心用户体验，就要问自己一个问题：“客户需要完成哪些最常见和最重要的任务？”在你用于产品的每个渠道上支持这些核心任务的本质至关重要。例如，Uber的核心用户体验是任何时间随叫随到。无论屏幕尺寸如何，此功能都能在每个设备上正常工作实现这一目的。
预约出租车是Uber用户最重要的任务。用户可以使用Apple Watch完成此任务。图片来源： Techcrunch
尽管存在大量不同屏幕尺寸的设备，但绝对不能定位各个设备，可以根据用户可能关注的任务定义产品的设备组。最常见的设备组是：
移动手机
平板电脑
台式电脑
智能电视
智能手表
不同的设备组在不同的上下文中提供不同的服务：用户根据他们正在查看的屏幕的类型参与不同的交互模式。例如，手机主要用于微任务，并且具有较短的用户会话。平板电脑主要用于内容消费，目前不被视为大多数人的工作工具。在了解各种设备类型的基本上下文的假设对于构建一个好的用户体验是至关重要。
确定产品的核心用户体验后，选择一组你希望支持的设备组，你需要调整每个组的体验（对于每个上下文的使用）。上下文的设计在不同设备组设计时尤为重要。
第一，并非所有功能都在所有设备上都有意义。你需要确定你的产品在多个设备组中使用的不同场景，并设计适合每个场景的体验。例如，通常移动用户比电脑用户想要的不同于产品。以 Evernote为例，可以在多台设备上使用流行的笔记本产品。其电脑版本针对内容消费进行了优化：
用于电脑版本的Evernote应用程序被优化用于阅读文本和查看媒体。
而移动版本是针对拍摄笔记、照片和捕获音频进行了优化的：
Evernote了解移动环境：它利用设备功能，并提供快速保存想法的方式（添加文本笔记，捕获照片或设置提醒）。
第二，不同的屏幕允许不同的输入法。以触摸输入为例。在设计具有触摸输入（移动手机和智能手机）的设备时，设计师会犯的几个常见错误包括：
小的点击目标。点击目标（如CTA按钮）必须具有足够大的尺寸。通常至少7毫米是足够的，但最好使用10mm触摸目标尺寸。
图片来源：UXMag
将项目过于紧密地放在一起。你应该考虑点击目标的大小以及它们之间的间距，因为间距有助于分离控件，并给你的用户界面提供呼吸的空间。建议的间距至少为23pt以防止输入错误。
按钮之间的间距
使用悬停状态。但在触摸屏上，没有“悬停”。
历史上，设计师一直从事大屏幕到小屏幕的设计工作，这意味着第一个也是主要设计是为了完整的电脑桌面视图（它具有最多的功能）。只有电脑桌面设计完成后才移植到移动设备和其他设备组。但当设计电脑桌面时，我们通常面临“厨房水槽”问题：许多功能被添加到产品中，特别是当涉及多个利益相关者时。这并不奇怪，，当你有很多不动产时，添加功能是比较容易。实践经验清楚地表明，最好使用移动方法进行设计，并通过与用户相关的最小屏幕创建应用程序。
当你首先设计相关屏幕的最小尺寸时，它会强制你决定最重要的。一段时间后，你将采用同样的方法仔细选择产品的其他版本，无论是电脑桌面设备，平板电脑还是电视。
在大多数情况下，手机将是相关屏幕的最小尺寸。如果可穿戴设备对你很重要，那么你将需要考虑具有更小分辨率的微型屏幕。
想想大屏幕以及小屏幕，给大屏幕和小屏幕提供同样的注意力：
不只是缩小设计，使其适合那些大屏幕。充分利用你可以使用的额外空间。
图片来源：Wikipedia
确保图像不会因为屏幕尺寸的放大而失去质量。
左：低质量图像。右：正确的分辨率。
考虑大屏幕细节。每个设备组都有自己的不同。例如，电视屏幕的设计被称为“设计10英尺体验”，因为从沙发的距离来看，与电脑桌面屏幕相比，屏幕上元素的明显尺寸明显更小。
电视的用户界面元素应大于电脑桌面。图片来源：Samsung
一致的体验意味着应用程序及其在所有屏幕尺寸上的体验都是相似的。无论设备如何，一致的用户体验是成功的全通道用户体验的关键组成部分之一：
对未来与产品的交互设定期望，并建立用户信心。
一致的体验使得你的产品在其他设备上与用户的交互更容易。
你可以将它们视为相同体验的方面，而不是将设计定制到越来越多的屏幕和设备中。例如，Google搜索应用在所有设备上提供相同的搜索体验。
当设计和功能一致时，用户可以在他们选择的设备上更快更有效地完成任务。
跨不同设备组创建无缝体验对你的用户非常重要。人们可以自由地在设备之间来回移动，完成任务，或当他们从设备转移到另一设备时，他们期望他们的产品和服务与他们一起转移。这意味着用户不必考虑他们正在使用的设备，环境的变化或上下文的变化，并且可以依赖于设备良好的功能性和独立于设备的易用性。
大多数人如何走过他们的一天，他们访问的主要屏幕。图片来源：Intercom
根据使用情况，你可能希望确保每个设备上的内容消耗量同步。以Apple Music为例：你可以在Mac上设置播放列表，并在iPhone上即时播放，也可以开始听iPhone上的歌曲，当你转到电脑桌面时，你将被拍摄回到你在iPhone上。
Apple Music可以很好地处理多个设备的同步。
在测试环境中有效的并不总是在现实世界中。在实际设备上为实际用户运行可用性测试，你可以在发布之前发现用户体验的问题并解决它。
在设计多个屏幕和设备时，最好的策略是保持最终的用户体验。作为用户体验设计师，你必须评估产品的使用时间，位置和方式，以评估用户的最佳体验。无论你的内容是什么尺寸的屏幕，用户都希望在各种设备之间获得流畅的体验。
原文地址：ADOBE BLOG
译文地址：UI中国
作者：Nick Babich
译者：SKYUI
转载请注明：学UI网》在不同屏幕和设备上创建用户体验设计的8个步骤
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
传统动画注重理论基础以及扎扎实实的基本功，并且是艺术学院必修课，宫崎骏的早期的动画就是传统的手绘动画。每一张都是纯手绘的作品，所以我们看到宫崎骏的动画会有完全不同于纯工业的动画的感觉。
这里我们只针对我们互联网产品设计讲一下交互动效的应用场景，我总结了以下七大应用场景，分别是图标动画、界面交互、插画动效、HUD大屏、汽车系统、项目包装、品牌宣传等等。
优秀的动效可以帮我们解决产品设计中的很多问题，可以从用户体验的五大要素来进行价值的拆解：
战略层本质上来说大部分设计师其实是接触不到的，当然接触不到战略并不能代表我们不需要了解，作为设计师我们必须了解公司对产品的战略定位以及期望，也必须要了解用户的目标和心理预期。战略层是整个产品的核心也是底层，所以单纯来讲，动画在这一层面上可以发挥的余地是是不多的，因为更多的这一层更加关注意识形态的战略思考。
范围层是通过战略思考来思考明确产品的大概功能和内容，有很多产品的功能复杂，交互繁重，内容很多，在这种情况下动效就派上了用场，我们可以尝试通过动效来解决内容过载，优化交互模块，扩展产品内容功能范围。
这一层主要确定产品的功能结构以及层级，主要设计用户如何快速，准确的触达某个界面完成某个任务，要考虑用户体验地图，用户整个的任务路径，简单来说就是用户要做什么事情，如何做，做完之后应该干什么，如果能对动效巧妙的运用，就可以做到引导用户，练习上下流程的作用，降低用户理解成本，提搞产品的操作效率，提高产品的可用性和易用性。
从这一层开始，UI设计师接触的内容逐渐多了起来，大家也会更加熟悉工作的内容以及范围，这一层主要体现在优化页面布局，确定元素摆放位置，涉及到具体的信息、界面、导航设计等等。通过利用格式塔，栅格，设计语言等方法确定产品功能具体页面内容布局，我们可以通过动效来进行辅助设计，例如强化元素的位置、颜色、大小，优化页面的切换、跳转的流畅度以及自然度等等。
表现层具体涉及到视觉、听觉、触觉的体验设计，也是做为视觉设计师、UI设计师发挥最多的一层，在表现层动效的展现形式会多种多样，这里不展开讲解，大家应该都明白。在表现层加入适当的动画能够提升产品趣味性，加强用户与产品的情感链接，增加用户对产品的友好度。
5G时代已经到来，5G的普世将会为科技发展带来更多的可能性，众所周知5G的速度是4G的百倍，那么意味着我们的设计的动画会加载的更快，动画文件的大小限制将会被打破，另外也可以在某些领域的产品内设计更复杂更酷炫的动画。
它是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。该领域的研究包括机器人、语言识别、图像识别、自然语言处理和专家系统等。在我们日常生活中运用的包括不限于人机对弈、模式识别、自动工程、知识工程等等。所以未来在这些领域内，我们能参与到的动画设计必然会更多样，形式也会更丰富，挑战也会更大。可能会不断有新的动画形式以及设计方法被创造出来，让我们拭目以待。
是20世纪发展起来的一项全新的实用技术。虚拟现实技术囊括计算机、电子信息、仿真技术于一体，其基本实现方式是计算机模拟虚拟环境从而给人以环境沉浸感。随着社会生产力和科学技术的不断发展，各行各业对VR技术的需求日益旺盛，VR技术也取得了巨大进步，并逐步成为一个新的科学技术领域。相信在未来的工作中必然会慢慢的接触到VR界面设计以及动画设计，并且我相信未来会逐渐的变成主流。
参考资料
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
俗话说，“有样学样（Monkey see, monkey do）”，包括人类在内的灵长类动物都擅长模仿。这个词表示无意识镜像或模仿我们周边人行为的状态。根据我们在产品方面的经验，我们进行的互动具有亲密性和即时性。
你有没有试过听了朋友说的话之后又说给对方听？这是变色龙效应的完美例子。
指由于之前受某一刺激的影响而使得之后对同一刺激的知觉和加工变得容易的心理现象。我们半夜三更看了电视的恐怖电影之后，跟看喜剧相比，屋子里面听到的任何吱吱声或者噪音更有可能让你毛骨悚然、心惊肉跳。
启动效应会塑造我们对环境的行为和反应，而且往往是有效的捷径，让我们可以迅速做出决定。这也是一种有效的说服工具，已经广泛应用到产业的营销和广告领域。
德国精神病学家和儿科医生海德维希·冯·雷斯托夫（Hedwig von Restorff）在1933年提出的理论。冯·雷斯托夫有一次实验，涉及到让受试者观看一系列相似的物品。结果他发现，如果其中某个很特别的话，那么相比其他物品，受试者就更容易回忆起这件物品。
冯·雷斯托夫效应又叫做隔离效应（isolation effect），或者新奇效应（novelty effect），其预测是当存在多个相似的对象时，跟其他有所不同的那个最有可能被记住。
该理论由赫尔曼·艾宾浩斯（Herman Ebbinghaus，著名的艾宾浩斯遗忘曲线也是他的发现）提出。它描述了序列中项目的位置是如何影响回忆的准确性的。
这种效应是指记忆材料在系列位置中所处的位置对记忆效果发生的影响，包括首因效应和近因效应。系列开头的材料比系列中间的材料记得好叫首因效应或者首位效应；系列末尾的材料比系列中间的材料记得好叫近因效应或新近效应。
用户往往最容易记住系列中的第一项和最后一项。
把最重要的信息放到开始和结尾。把最不重要的信息放在中间，这是吸引用户注意力的高效方法。
在格式塔原理之下，派生出了很多的其他原理。我们会在下面进行简要讨论：
在设计周围留白，从而创造出一块大于其各个部分之和的区域。用最简单的措辞来说，格式塔理论是基于这样一种思想，即人脑会下意识地把各个部分组织成一个系统，从而创造出一个整体而不是一系列的离散元素，通过这样来简化和组织包含有很多元素的复杂图像或者设计。我们的大脑天生就是为了看清结构和模式，从而更好的理解我们生活的环境而构造出来的。
在格式塔里面，相似的元素不管彼此是否靠近也会在视觉上进行分组。分组可以按颜色、形状或大小进行。相似性可用来将可能彼此不相邻的东西联系在一起。
不管实际画出来的线条如何，人眼在观看线条的时候都会按照最平滑的路径想象。当目标是引导访客的眼睛朝特定方向看时，这种连续性会是很有价值的工具。
这条原理反映的是人会把设计或图像缺失的部分自行脑补，创建出一个整体来。或者说得简单点，在Adobe、Sun Microsystem、NBC、USA Network等的logo中就可以看到复杂的形状。
这条原理是指元素之间的距离如何。在UX设计当中，运用相邻性是为了让用户将某些事物组合到一起。通过把它们放在一起，用户就会感觉它们是相关的。
跟闭合原理类似，这条也利用了负空间。我们的大脑会区分出图像前景的对象。设计师如果想要突出某个焦点时，用这条这真的很方便。
这条原理是指，沿同一个方向移动的元素本身会被视为一组。如果我们看到一群鸟朝特定的方向飞行，我们就会把它们组合在一起，并将它们看作是单个刺激物。
指在一个人的工作记忆使用的脑力综合。是指你为了完成任务需要消耗的脑力。
认知负荷是表示处理具体任务时加在学习者认知系统上的负荷的多维结构。
以英国心理学家威廉·埃德蒙·希克（William Edmund Hick）命名，其理论指出当选项增加时，下决定的时间也增加。一个人做出决定所需的时间取决于他或她可以选择的选项数。因此，如果选择的数量增加，则做出决定的时间将对数增加。
决策所需的时间随着选项的数量和复杂性增加而增加。
这条定律规定，任意一点移动到目标中心位置所需时间与该点到目标的距离和大小有关，距离越大时间越长，目标越大时间越短。
获得目标所需的时间取决于到目标的距离以及目标的大小。
可以利用这条定律来影响互动按钮的转化率，尤其是用手指操作的移动设备上的设计，可以把希望互动的按钮设计得更大一点，把不希望用户点击的按钮设计得小一点，更难点中一点。用户任务/注意区域与任务相关的按钮之间的距离应尽可能的短。
这条指的是用户往往会认为有吸引力的产品更实用。大家往往会相信看起来更好的东西用起来也会更好——就算实际上效率和效能并没有提高。
用户往往会把美观的设计看作是更实用的设计。
对视觉设计的积极情绪反应会让他们对可用性方面的小问题更加宽容。
这一理论是由心理学家佩维奥（Paivio）提出来的，他强调在信息的贮存、加工与提取中，语言与非语言的信息加工过程是同样重要的。佩维奥（1986）指出：“人的认知是独特的，它专用于同时对语言与非语言的事物和事件的处理。”利用双重编码系统可以让用户更容易记住我们网站上的重要内容。
我们会根据你对现实世界的体验和感知为脑中想到的文字建立视觉形象。一想到“体育”，我们的大脑就会自动想到球的形象，运动员的形象。通过将文字跟图像配对，可以更容易记住东西。
我们一般不会用价值数千美元的眼动追踪软件或者脑电图来判断设计是不是有效。但是5秒测试是个强大工具，用它就可以确定你的设计是不是一看就明白。
所谓5秒测试，就是让受试者观看网站或应用5秒钟，然后回答有关主题和设计的问题。如果用户的答案或者留下的印象跟你的设想不一样，那就说明设计没有达到原先的目的，需要继续改进。
这条原理来自罗伯特·西奥迪尼（Robert Cialdini）的著名著作《影响力：说服心理学》（Influence: The Psychology of Persuasion），里面列举了类似互惠、一致性、社会认同，权威以及稀缺性等原理。
这些原理往往决定了我们在社会当中的行为方式，我们可以用它们来识别人类行为。
互惠：这条原理是说人都不喜欢亏欠别人。如果别人给了他们什么东西的话，他们应该会觉得有责任给予一定程度的回报。提供免费的电子书，博客文章，播客或其他免费内容，然后换取用户提供的电子邮件地址，这就是现实生活当中互惠的好例子。
权威：权威这条原理说的是我们大多数人都意识到自己没办法在每一件事情上都是专家。我们最好的选择是依靠专家的证词。所以，我们允许专家和任何特定议题的“权威”人士影响我们。大家往往会对高水平的专家和权威人物的话言听计从，因为觉得他们值得信赖。如果跟成功公司能扯上关系的话就会经常被提及，好建立一定程度的尊重和可信性。
一致性：这条原理说的是大家一般都希望自己行为跟自己的决策过程保持一致。西奥迪尼曾经进行过一项研究，他让两组志愿者挨家挨户去询问房主愿不愿意在自家前面的草坪上立一块写着“小心驾驶”的大广告牌。
第一组的做法就是简单粗暴直接上门问。而第二组是先做一个初访，请求房主在他们前面的草坪放一块很小的标志牌，“做一位安全的驾驶员。”
结果第二组的成功率高出450％。这就是（承诺与）一致的一个例子，因为房主会觉得自己有义务在这种情况下保持一致性。
社会认同：大家未必总能知道自己为什么会这么做。大家是不是都在跳舞？如果是的话会有更多的人跟着跳。大家是不是都在看那个视频吗？是的话会更多人会点击它。是不是每个人都在买你的产品吗？是的话，你想拦都拦不住。在电子商务的实践当中，我们使用的网站会社会认同（比方说点评、评论和推荐）来吸引其他用户，并引导他们做出购买决定。亚马逊有“购买这个的客户也购买了那个”的提示，希望强化你跟商品的关联性，让用户认为“如果别人需要它的话，那我也需要它”。
稀缺性：在塑造行为的原理方面，这是我的最爱之一。稀缺性原理是说，如果东西有限的话，大家就会更想得到它。能得到的人越少，吸引的人就越多。
为什么有的商店会推出限量版服装？这就是原因，这样可以吸引更多的顾客。
变化盲视（Change Blindness）：指观察者不能探测物体或情景所发生变化的现象。
记忆未必永远可靠。我们对信息的存储方式会被我们的想法、感知信念以及周围环境所重构。
我们的工作记忆能力大概就只有10到15秒，一次只能记住3到4个东西。
研究表明，大家往往会制造出错误的记忆，要么会记住了没有发生过的事情，要么就是记得的东西跟实际不一样。由于记忆具有提示性和可塑性，所以根据大脑的习惯或心智模式来进行设计就非常重要，因为这样会更容易记住。
尽可能为用户提供帮助和反馈，并提供撤销选项，以减少用户犯错时的沮丧情绪。让体验个性化，好迎合我们用户的喜好。
单纯呈现效应是指图片、符号、数字、声音等外部刺激信息只要经常暴露在人面前，就能增加人们对其喜欢程度的现象。这种社会心理会发生在我们所有人身上，我们在不连续的时间段内见到某人的次数越多，我们觉得这个人讨人喜欢或迷人的可能性就越高。这种效应有时候又被叫做熟悉定律。
了解单纯呈现效应及其机制，会让你在转化率优化的工作中具备重大优势。更多的呈现会带来熟悉感，进而带来舒适感，从而让转化率优化整体上得到显著改进。
色彩也是影响人的选择和行为的主要因素之一。我们经常会发现儿童玩具颜色鲜艳，女孩玩具往往是粉红色的。这方面研究的主要思想是色彩对用户的感知有很大的影响。
所以，作为设计师我们应选择能够传递含义与正确信息的色彩。
红色。跟热情、强烈或攻击性的感觉关联。同时是好和不好的感受，比如爱、自信、热情、愤怒等的象征。
橙色。充满活力的暖色，给人以兴奋的感觉。
黄色。幸福的色彩。象征着阳光、喜悦和温暖。
绿色。大自然的色彩。给人以来平静和新生的感觉。另外，也可能用来表示经验不足。
蓝色。一般用来表示企业形象。往往表现出冷静的感觉，但是作为一种冷色，也跟距离与悲伤有关。
紫色。由于很多国王都穿紫色的衣服，所以长期以来就与皇室和财富联系在一起。紫色也是代表神秘与魔力的颜色。
黑色。这种颜色有很多含义。往往跟悲剧和死亡相关联。可以代表着未解之谜。可以是传统的，也可以是现代的。一切都取决于怎么用，以及跟哪些颜色一起用。
白色。意味着纯洁和纯真，以及完整性和清晰度。
我们一般是从大脑负责本能的部分得到这种反应，本能反应的速度比我们的意识要快得多。本能反应会导致我们用了一下产品后就爱上了它。这些反应植根于我们的DNA之中，所以很容易预测。
作为设计师我们就是要通过设计制造出视觉上极其出色的美感印象。为什么一个东西在用户眼里好看，以及为什么他们是我们的目标受众，他们的需求是什么，这些都不难猜测。
用户体验设计的概念根植于认知和行为心理学，那是人类与机器交互的蓝图。当然，本文仍还没有涵盖到所有的设计心理学原理。但是，作为设计师，我们还需要观察和理解最终用户，并且加深对用户的理解与共鸣。在产品开发过程中，了解用户的互动、行为和情感可以增加更多的价值。
原文地址：追波范儿（公众号）
作者：terechen
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
这是最常被提及的用户体验设计基础，当涉及到产品设计决策时，提醒我们要学会使用同理心，而不是仅凭个人的想法或意见。
真正好的用户体验设计是为用户量身打造的，用户的意见、痛点、愿望、偏好和需求对产品来说至关重要，所以在项目初始阶段需要投入大量的时间和精力去了解用户。
用户体验研究重点是了解用户，为接下来的产品设计做准备。以用户为中心的设计理念是设计师迎合用户的需求，区分了设计任何人都可以使用的产品和为目标用户设计的产品。
一款特定的产品需要面对不同的目标群体，前期研究中需要了解目标人群需要什么并在产品中反映出来，这是针对性很强的设计研究。
可能很多人对信息架构的定义很模糊，这里举个例子来具象说明一下信息架构的含义。
例如在一款产品中，如果把所有内容都堆到一个列表或页面中，可能我们将无法使用这款产品，所以我们看到大多数的App和网站都包含很多的导航和页面结构，按照内容重要程度有序地来组织内容。
信息体系结构的最终目标是帮助用户理解他们在看什么，并帮助他们找到需要寻找的内容。
信息架构在制作线框图或原型之前完成，因为它是产品的基础，有助于设计师考虑什么功能是最重要的，哪些是用户最需要的以及哪些次要内容可以隐藏起来等。
这种结构与产品的导航设计密切相关，有助于将用户引导到正确的位置。导航和信息架构都试图让用户以最少的认知努力来完成操作。
信息架构的设计不当会造成重大故障甚至可能危及整个产品。如果用户在使用产品时找不到任何想要的内容，点击任何元素都没有反应，会给用户带来很糟糕的使用体验。
没有场景，任何设计都很难生效。设计师在项目开始时会投入时间去了解用户面临的问题以及围绕这些问题的背景。
这条原则有助于设计师考虑还有哪些因素会影响用户和产品，很多产品设计会为用户提供一些有助于消除使用摩擦的操作提示。
例如在设计表单时，会尽可能的添加输入提示，最大程度地减少用户出错的机会。
保持一致性是用户体验设计的关键原则。拥有一致设计的产品可以更快地被新用户接受，因为用户不需要再次学习如何操作，他们会回忆起之前的操作习惯并将其作为指导，这也解释了为什么同类型的产品例如电商类App页面设计的很相似。
保持一致意味着在需要时可以重复使用某些UI组件，并在整个产品中保持一致的行为。例如当点击或悬停在按钮上面时，所以按钮的状态应该是一致的。
从逻辑上讲，产品越大，这种一致性会变得越来越有挑战性，这促使许多设计团队创建自己的设计系统。一款产品的学习曲线越长越陡，放弃的用户就会越多，在市场营销中，这通常被称为销售漏斗中的漏洞。
这条原则意味着用户希望能控制产品，无论是完成任务还是定制满足他们需求的内容。
在设计过程中一直试图给用户尽可能多的控制权，例如允许用户撤消操作、更改设置、自定义UI外观、创建快捷方式等。
需要注意的是，当提供太多选项或用户太依赖于自己的选择时，用户可能会不知所措，造成所谓的选择悖论。所以在设计时要了解用户乐于掌控的余地，不能让用户感到使用压力。
在整体上看，建立高标准的可用性是为用户做的最好的事情，有助于检查用户是否能够轻松地完成任务、产品是否正常运行以及是否完成工作。
可用性的重要之处在于要理解可用性的灵活性和重要性。
结合可用性的概念，我们还要进行用户测试，这是设计师对工作进行测试的方式，对新的产品来说至关重要。
当设计思想和理念被转化为有形的原型时，设计师要观察真实的用户是如何与之交互的，可以通过许多不同的方式例如简单的A/B测试到全面的审核测试等来实现。
测试通常分几轮进行，团队在向原型添加更多细节之前验证每个步骤。随着测试结果的出现，设计也随之发生了变化。
如果发生更改，将会进行新一轮的测试，通过这个过程，设计团队可以改进他们的工作，直到达到可用性标准。
在创造力和创造独特事物的渴望中，很多设计师很容易无意中弄乱产品界面甚至产品本身。
功能过多的产品可能会失去焦点并削弱吸引力。具有太多元素的页面会变得充满视觉冲击，但也会给用户带来负面体验，在设计时要学会克制并优先考虑真正关键的部分。
另外手机端的屏幕空间非常小，创建一个有效的布局，想出巧妙的方法来隐藏次要元素并创建一个令人愉悦的界面需要付出很大的努力和创造力。
视觉层次是向用户传达产品中元素重要性的方式。良好的层次结构有助于用户视线在界面上移动，并立即了解最重要的内容以及这些内容与其他部分的关系。
视觉层次结构与布局设计紧密相连，帮助用户消化所接触到的信息。
创建层次结构从概念的草图开始，一直持续到完成设计。例如发送按钮通常会用绿色而是不红色，而次要按钮会显示为灰色或与背景混合，并显示“撤消”或“返回”。
为用户创建心智模型是尝试使用同理心的一种方式，是帮助设计师从用户的角度看待问题的工具。
做到准确就是直观的产品，用户不需要投入精力就可以使用它，而错误的思维模型会导致一些问题，例如界面混乱、高昂的交互成本。
为了匹配用户的心智模型，可以采用多种不同类型的研究方法，常见的方法包括卡片分类、决策树、对用户行为的密切观察，或者使用大量的数据来建立关键用户的心理模型。
讲故事的方式更加直观，利用图像、视频、动画和文本等元素让整个页面与用户对话。用户体验设计中的视觉叙事是为了唤起用户的情感，给用户留下持久的印象。
想出一种可视化的方式来传达复杂的内容具有挑战性，但同时也是有益的，可以更好地接近用户并将其作为提高产品可学习性的方法。
高保真原型是设计项目的最终目标，但是直接使用原型软件不断添加各种页面细节是错误的操作。
避免直接出高保真的主要原因是因为这样做的成本会更高。在没有任何用户研究和测试的情况下，一款产品无论具有多少的细节都有可能面临不符合用户使用的情况。
不仅要检查关键用户是否可以流畅地使用产品，还应该检查其他所有用户例如少数群体等是否都能够正常使用产品。
事实上，残疾人和其他用户一样需要数字产品，但很多产品在设计时并没有考虑到这些群体，但这也提供了一个机会，为所有用户提供一个可以依赖的好产品。
我们知道为用户提供一致的设计有助于克服学习曲线，同时为用户提供熟悉的东西也有助于缩短学习曲线。
例如，大多数用户都会立即识别某些UI组件(汉堡菜单/单选按钮)，这意味着他们会本能地知道这些组件代表什么意思或者如何操作。
使用用户已经熟悉的东西并不一定会让产品的独特性消失，有经验的设计师会利用这种熟悉性来来创造一些独特的设计，同时也是直观的，不需要太多努力就可以使用。
设计一个完全不依赖熟悉度的产品可能是具有风险的行为，因为它很容易让那些不熟悉产品的用户超负荷，形成巨大的学习曲线，增加用户负担。
可交付成果是可以在整个团队中交付的内容，包括用户画像、心智模型、用户旅程以及线框图和原型等，是一种有形和具体的表现。
可交付成果是用户体验设计原则，可以帮助设计团队和其他利益相关者理解和交流概念。
▲ 用户画像可以捕捉理想用户，并提供可以相关联的真实面孔，是一种指导设计的工具。用户旅程图帮助设计师了解用户完成任务需要的具体步骤，有助于确保这些步骤确实可以轻松执行，并且整个过程很流畅。
这些交付成果服务于关键功能，设计师需要在整个项目中都依赖它们，不断转换为用户可以与之交互的真实有形的设计。
用户体验设计的过程不是线性的，而是一个循环。无论创建什么样的产品，都需要专业的原型工具，将基本框架放在一起，然后添加可能需要的所有细节。
从逻辑上讲，设计团队的具体需求会因团队而异，但一些关键功能例如团队协作、需求管理、交互设计和开发移交等，对于大多数团队来说是必要的。
一切都从收集需求开始，然后慢慢创建关键列表。虽然简单地列出一个列表听起来很容易，但随着项目的进展，要保持列表的条理性确实是一个挑战。
除了创建需求和检查需求之外，还有一个问题就是调整需求，需要从设计、技术和业务各个方面来处理各种需求，还要确保这些需求之间没有相互矛盾。
网页端和移动端产品最明显的区别是屏幕尺寸，这意味着所有的视觉层次结构和信息架构都将从Web到App发生变化。
移动端产品会有更多影响设计决策的因素，例如设备的操作系统、使用产品的环境等。了解移动端产品在导航设计、用户流程等关键方面的差异是至关重要的用户体验设计原则。
几乎所有的产品都专注于设计模式，它们可靠、易于查找并通过减少设计时间来为项目增加实用性。
▲ 当用户在谷歌搜索中输入的内容有问题时，谷歌会提供一个相关的搜索提示，辅助用户进行精确地搜索，解决用户使用不同方式在搜索栏中传达他们正在寻找的内容的问题。
拥有单一的内容来源可以为团队带来清晰性和高效性，如果线框和原型分散在多个渠道中，这种内容的集合就会变得很难达成。
通过合适高效的工具能够避免产品在到达终点时遇到各种各样的可用性问题，防止产品细节没有表现出来或者被忽略。
最后
通过这份用户体验设计原则的合集希望能够让你对这个领域有一个大致的了解。
没有人知道用户体验设计在未来会引领我们走向哪里，不过我们可以确定，无论它带给我们什么，肯定都会很有趣。
内容参考：justinmind.com/ux-design/principles
原文地址：Clip设计夹（公众号）
作者：Clippp
转载请注明：学UI网》掌握这20条用户体验设计原则，助力设计成长！
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
在终端APP中，动画非常常见，它可以辅助视觉制造焦点，同时也可以让用户交互更加顺滑，但动画的实现却是设计师和研发群体的一个痛点。如何辅助设计师设计高性能炫酷的动画、如何将设计师设计的动画准确无误的还原到终端APP上是业界不断探索和解决的问题。
图1 传统动画实现流程图
当前最好的动画设计软件是Adobe After Effects（简称AE），从AE动画制作到终端APP呈现，传统的实现方式如图1所示，有三大痛点：实现成本高、沟通成本高和性能难以保证。
近几年，业界诞生了像Lottie、SVGA这样的动画工作流解决方案，虽然在一定程度上提升了生产效率，但存在AE支持能力有限、动画性能难以保证、配套工具支持有限的问题。
PAG（Portable Animated Graphics）是腾讯PCG发布器中台自主研发的一套完整的动画工作流解决方案，助力于将AE动画方便快捷的应用于各平台终端。PAG的流程图如图2所示，设计师在AE上设计出动画后，可以通过导出插件导出pag文件，同时PAG提供了桌面端预览工具，支持实时预览效果，在确认效果后，通过运行配置上线，各平台终端可以通过PAG SDK加载渲染pag动画。
图2 PAG动画工作流流程图
与Lottie、SVGA相比，PAG增加支持了服务端。除此之外，如图3所示，PAG动画方案在导出动画文件大小、AE特性支持和可编辑性方面具有较大的优势。
图3 PAG和Lottie对比图
和Lottie、SVGA实现不同的是，PAG不依赖平台端渲染接口，可以实现各平台的渲染一致性。PAG与Lottie、SVGA的矢量能力支持如附表1《AE特性能力支持》所示。
无论是PAG还是Lottie、SVGA，所支持的AE特性仅仅是AE众多特性中的很少的一部分，这在一定程度上限制了设计师的创造力。针对这个问题，PAG新增了BMP预合成的导出方式，支持导出所有AE特性，适用于不可编辑的场景。其原理如图4所示，在合成的层面将渲染结果截取成图片，然后进行视频编码。
图 4 BMP预合成原理图
针对视频不支持透明通道而动画需要包含透明通道的问题，在编码的层面扩展了透明通道的支持，如图5所示。
图6 PAG矢量和BMP预合成混合导出
针对导出动画和AE设计动画存在偏差的问题，PAG导出插件增加了使用了不支持AE特性提醒功能，如下图7所示。
图7 PAG导出面板
在预览界面，同样有不支持特性的提示，如图8所示。
图8 PAG导出面板预览窗口
在使用AE设计动画的过程中，设计师可以方便快捷的提前查看使用了那些不支持直接导出的AE特性，换种实现方式或者导出成BMP预合成，有效的解决了设计动画和导出动画存在偏差的问题。
在AE动画设计的过程中，PAG导出面板提供了一键设置BMP预合成的方法，如下图9所示。需要提示的是，一旦设置了BMP预合成，该合成中的文本和图片将不能再被用户编辑。
图9 BMP 预合成设置
由于BMP预合成可能会影响到可替换图片的数量，PAG同时会实时更新可替换图片的数量给设计以提示。
在用pag设置的素材中，经常会遇到用户填充的图片与默认占位图尺寸不一致的情况，在导出面板中PAG增加图片填充的四个规则，如图10所示：
图10 可替换图片填充设置
其中：
不缩放：画面不缩放，从左上角位置开始裁剪
黑边：在保持高宽比的情况下缩放到设备的可用屏幕大小，图像不发生变形，如果图片尺寸和填充区域比例不一致，会出现黑边，为默认填充模式
拉伸：不保持宽高比填充，会发生失变形
裁剪：在保持高宽比的情况下缩放到完全填满可用的屏幕大小
具体效果如图11所示。
图11 图片填充效果图
PAGViewer支持桌面端预览PAG文件动画效果，如下图所示。支持查看动画文件中包含有多少个可编辑文本和可编辑图片，且支持设计师本地填充素材，实时预览填充效果，无需等待上线后才能确认真实效果。图片占位图支持填充图片或视频，如果PAG文件内置了音频文件，支持播放音频效果。具体效果如图12所示。
图12 PAG效果预览
在pag动画实际使用的过程中，PAG经常遇到的问题是设计师辛辛苦苦设计的动画在终端上性能表现不佳，需要进行返工优化，同样的问题在使用Lottie方案时候也会存在。
除了效果预览，PAGViewer还增加了性能展示面板，可以很方便的看到pag动画的基本信息，如时长、帧率、尺寸、bmp预合成的数量，图层总数等，还有量化的性能指标，定量的评估pag文件的性能，如图13所示，方便设计师进行针对性的优化，而不需要等到上线前才会暴露性能问题。具体效果如图13所示。
图13 PAG性能展示面板
目前PAG方案已经广泛应用于腾讯公司内外几十款产品中，涵盖了众多的国民级应用。
总结下来，PAG目前主要使用在以下几大场景：
图15 UI动画场景
设计师设计出动画文件后，研发只需要替换预设的文本内容即可，并且文件体积非常小。
图16 贴纸动画场景
图17 照片/视频模板场景
PAG支持将内置的图片作为占位图替换，并保留所有动画效果。因此可以将整个PAG动画设计成一个模板，把预设的占位图替换成用户选取的照片，自动套用效果生成视频。全程可以让设计师自由批量生产模板，无需研发介入。
仍然基于图片替换原理，PAG也支持将占位图替换为视频，实现视频模板功能。
图18 智能剪辑场景
智能剪辑是围绕用户上传的视频内容，生成定制化的模板，模板本身是不固定的，可以从多个PAG文件组合而成，类似活字印刷。设计师可以利用这个特性，构建自己的特效组件库，然后对接AI的识别能力，根据一定规则组合得到无限数量的模板效果，可以做到一键出片。这块目前的典型应用场景是王者荣耀的周战报功能，随机生成游戏高光时刻视频。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
本文从What和How两个部分阐述如何输出清晰有效的设计方案，为大家建立系统的设计思路提供帮助。
很多初入职场的设计师在审美和平面图形基础上都比较扎实，对软件的操作也出神入化，单个方案的界面视觉表现完成度和细致度也没有太大问题。但却往往在实际输出项目方案的时候碰到瓶颈，方案反复地修改还不尽人意，设计能力无法得到质的提升，晋升的脚步也从而停滞。
本文从What/How两个部分循序渐进地阐述如何输出清晰有效的设计方案，希望给大家一些建立系统性设计思路的启发，帮助大家更好地输出设计方案，为决策设计方案提供更有力的参考。
WHAT: 什么是清晰有效的设计方案
首先我们需要对清晰有效有一个整体的认知。所谓清晰，从字面上理解是指看得很清楚、明朗，设计层面来说就是方案能做到方向明确，方案明了。而有效字面上指的是有效果，有效力，从设计层面来说就是输出的方案可以解决存在的问题，能达到设定的目标以及可以切实落地。
清晰和有效的考量维度是不一样的：清晰更多是针对设计这一环节，在于不同方向/方案的差异度和侧重点；而有效则更多需要联合设计上下游（用户/产品/开发）。对于优秀的设计方案来说两者相辅相成，缺一不可。
接下来我们来详细拆解什么是清晰和有效。
1.清晰 - 方向明确，方案明了
——————————
很多设计师对方案输出的数量有个认知误区，认为设计方案越多越好，可以给老板、合作方更多选择，往往不假思索地用大量的时间输出所有可能的方案，并拿出来让别人评审，认为把所有的可能性列出来就不会错，这正是对方案清晰性缺乏认知的表现。
在设计最初期，不要着急动手输出界面，先结合目标（近期目标和远期目标）综合考量，系统性地思考有哪些途径达到目标，确保所有实现手段的方式都有考虑到，并且可以整合途径一致、方向近似的方案。对差异性不大的方案进行合并划归，才能在合理范围内整理出具有不同思考维度与目标侧重的提案方向。前期规划思考的深度决定了方案的广度，只有清晰的思考方案才会创造无限的可能。
用案例来让大家对清晰这个定义有更具象的认知：
相册小程序Logo这个需求的目标是需要突出相册元素，并强化品牌识别度。
这是设计师输出的Logo提案初稿，虽然输出了28个方案之多，但没有设计思路的规划，想到哪就画到哪，很多方案是重复的，还有一些方案在设计初期就应该Pass，设计的整个细致度也不够充分。
于是设计师对设计方向重新进行规划整合，按照输出形式重新规划了分类。
按照分类筛选出四个可以继续优化的方案。并且拿着四个不同方向的方案去汇报。最终确定D方案。
我们重新回顾一下这个需求，28个方案 VS 4个方案，设计师需要的不是尽可能输出多方案的能力，方案越多可能表示你在错误的道路上越走越远，需要的是通过前期系统的思考能一次把方案做对的能力。
2. 有效 - 解决存在的问题、能达到设定的目标、可以落地的方案
——————————
很多设计师拿到产品需求会立即动手，认为满足了产品这个角色提的需求便是好的设计输出，或者把方案出的天花乱坠，当产品或者其他角色提出不同意见就会觉得他们不懂什么是好的设计。这些现象大多是因为设计师在项目前期没有正确思考和评估这个需求本身需要解决什么问题、方案能否达到团队共同设定的目标，以及方案是否能平稳落地这三个维度。
解决存在的问题—从问题出发
我们在实际输出方案的时候，不能从产品经理的需求文档开始，而是要把考量维度更前置，从项目现有的问题出发。这个问题的搜集包括外部用户的反馈，内部团队的声音，但需要注意的是用户的反馈不一定是真正的问题，需要做到筛选和甄别。比如新发布一个版本可能会碰到的一个情况是很多用户打一星反馈说界面太难看太丑，这种属于用户感受，我们可以再深挖一下用户觉得丑的原因，是不是改变了太多用户习惯，但又没有给用户真的带来更好的体验和更多的收益。
能达到设定的目标—从目标启动
问题还需要结合目标一起考虑，解决问题的思路并不完全等同于目标，目标是大家一起制定的未来产品的发展方向。比如我们新发布的版本里面新加了一个Tab改变了用户习惯，大批用户投诉，但如果这个新Tab是符合我们目标的，我们不能为了短期解决用户投诉把这个Tab下掉，应该继续观察用户在这个使用过程中碰到了什么问题，解决实际操作中碰到的问题。
用案例来让大家对问题和目标有更具象的认知：
我们需要优化QQ空间的为空界面，首先我们梳理下现网存在的问题，风格整体比较老旧，很多图形表意不明确，新出模块就会有新风格，所以存在很多不统一的地方，空间整个业务有一百多个为空界面，导致开发也不清楚到底应该怎么用，用什么，所以很长一段时间是处于乱用的状态。
接着我们梳理了这次优化的目标：
1 界面统一，用户能对表意感知明确（解决现网问题）
2 强化QQ的品牌
3 做成基础组件，保证复用性
4 低成本开发
确定了优化目标以后我们没有马上急于尝试风格，而是先遍历了所有为空异常页，整合了所有场景最后梳理出八种情况，这八种情况可以覆盖所有的为空场景，梳理整合场景是目标1、3、4能实现的前提。
然后我们基于这八个场景来输出设计风格，要低成本开发，所以这里没有考虑加动画，用企鹅剪影结合具体的场景来表意，不仅强化了品牌，也能做到表意清晰明确。图形定好以后我们马上也输出了规范，Push给对接的开发同学方便调用。
在输出方案过程中，始终都要紧紧贴合问题和目标，避免无效设计。
能落地的方案—技术可以实现
在输出设计方案的时候，设计师需要考虑到开发成本是什么，需要消耗多少资源去实现这个需求，最低成本达到目标的路径是什么。如果有些方案开发成本很大却收益价值却很小，我们就需要斟酌它是否仍有执行的必要。避免一味的追求设计效果不去对齐成本、人力，最后也只会是设计的自嗨。
用案例来让大家对清晰这个定义有更具象的认知：
产品提了好友生日推送礼物的需求，目标是想用生日这一比较温情的场景去设计专门的祝福页，用来提升写操作和大盘活跃。我们需要设计送给用户的礼物卡片，从实现手段的难易规划了三个方向：
A 手势交互但开发难度大: 3D手势交互动画
B 趣味动图且开发成本适中：局部小动画
C 静态但开发成本低：全静态视觉，复用已有开发流程
最后团队对齐了人力成本，决定采用方案C，把设计精力放在本身卡片的表现上。
HOW: 如何输出清晰有效的设计方案
那如何才能输出清晰有效的设计方案呢？设计方案归根结底是思维方式的具体体现，输出清晰有效的设计方案最核心的点在于体系化的思考方式，我总结了一下几点：
1 拓宽边界
——————————
拓宽边界需要设计师站在更高的视角和有更广的视野，把设计从表现和执行抽离往前后延展，在整个设计过程中往前去挖掘需求和规划产品结构，往后做到把控和沉淀，能站在上下游各维度去Review整个项目，只有站在更全局的视角审视，才能跳出片面设计的维度。
2 转换视角
——————————
从不同的视角看待问题，学会拆解问题和解决问题，从产品/开发不同的角度来全盘看整个产品，分析这个需求的投入产出比是不是足够，是不是能达到目标（包括设计目标和产品目标）。设计、产品、开发从来都不是对立的，都是不同角色为了整个产品发力。
举个例子，产品同学觉得输出的方案不好看，是在用感性表达，我们可以尝试继续拆解不好看背后的原因，比如是不是核心内容不够突出、担心按钮转化率等，一开始就抱着产品不懂设计这种想法是没有办法解决问题的。
还有一个就是用户同理心，很多时候我们不能只站在设计师和产品的角度看待用户反馈的问题，比如新功能内部团队觉得很厉害，但实际门槛太高，用户根本不知道怎么操作，而我们长期体验这个产品反而忽略了产品的易用性。
3 结构思维
——————————
我们在启动项目的时候，不要单点去看要在某个页面要做什么改动，而是从问题入手，和产品同学对齐好目标，结合设计理念，最后找到发力点在哪里，循序渐进，这样很大程度上能避免项目的反复，对设计流程的准确把控也是输出优秀设计方案的基础。
举一个日常生活的例子帮助大家理解，比如我的问题是长得丑，我的目标是要变得更年轻漂亮，我的理念就是改善体型和优化五官，最后找到具体的发力点比如晚上不吃晚饭，去美容院打美容针、学会怎么化妆等。
4 认知创新
——————————
有些新设计师对设计创新的认知还停留在是去做一些创造世界、改变世界的事情，认为创新就是把原项目进行翻天覆地的改变，初入职场会觉得负责的业务和项目都很小，没有什么意思，其实创新的维度有很多，包括设计工作流程的优化、还有从小的问题点着手去深挖和思考，找到合适的解决方案并打磨细节给用户创造惊喜。摆正心态才能做对事做好事。
5 及时复盘
——————————
完成项目以后需要不断的总结方法，遇到的问题，除了技法层面的提升，更重要的还包括思考层面的提升。学会去总结之前踩过的坑，避免重复性的问题，比如你的输出一直存在层级不清晰的问题，那么你需要关注后续输出的界面里大模块之间以及元素之间的层次是否还存在这个问题。可以犯错误，但是尽量避免总是犯同样的错误，这样才能加速成长的脚步。
写在最后
进入互联网公司工作之前，我们对设计的理解更多停留在表现层面，所以对好设计的判断标准更多是好不好看、喜不喜欢。当进入互联网公司后，随着工作经验的积累，我们会发现设计不只是狭义地使用软件绘制图形，背后需要很强的逻辑和系统思考的能力、结构化的思维、沟通能力等，需要我们不断的学习补齐自己的短板，及时转换职场心态。
文章来源：站酷 作者：腾讯ISUX
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
综合监管平台是对自然资源管控的一个OA系统。主要功能是对国土资源相关业务的监测、评估和统计，将各专项规划实现“多规融合”，从而优化城市自然资源配置，做好国土空间规划统筹。
为什么要有设计规范
1、多个设计师同步设计
我们部门有2名UI设计师，所以在我们同时画同一个项目界面时，为了保持整个设计的统一，就需要我们设定设计规范。
2、设计与前端之间的沟通
与设计同理，开发人员参照统一的设计规范写页面，可避免同一系统中出现设计控件混乱的情况，从而提高开发效率、减少沟通成本、减少返工率。
3、在公司内部复用
在公司内部，设计规范可运用在多个项目中，从而减少开发的工作量、提高开发效率。
建立设计规范前的工作
从产品经理手中接到原型图，首先是与产品经理的沟通，包括客户需求、设计风格的确定、页面内容的布局等等，关于设计尺寸，因为我们客户用的是1920*1080分辨率的电脑，所以设计就基于1920*1080尺寸来做；但有时会基于1440*900的尺寸来设计，然后上下适配1920*1080和1366*768。所以设计尺寸要根据具体情况而定。
页面框架
a、主体框架分为四个区域：顶栏、左侧栏、页签、主体内容
b、主体内容上、左边距为10px，默认显示一屏高度，超出的内容加上下滚动条
c、页面中的各个组件根据不同屏幕分辨率采用自适应
如何建立设计规范
1、颜色规范
后台系统主色调大多运用蓝色，这是因为蓝色往往围绕着科技、安全、信任等等，很符合业务场景，比如智慧城市、智慧医疗、智慧交通等。但是蓝色用多了也会让人感觉没有新意、审美疲劳，所以在色调这块，后台系统可以采取皮肤功能的扩展，做两套配色好的皮肤供客户选择，这样避免了因客户的不满而一次次的修改，从而提高工作效率。
2、文字规范
因为我们面向的客户多为政府工作人员，且年纪稍长，所以字号要比平常的网页设计要稍大一些；常用字体，中文：微软雅黑，英文或阿拉伯数字：Arial；行间距=字体+8px。
3、按钮规范
按钮是用户与系统间交互的一个重要触点，用于特定触发事件的发生。按钮类型可分为线性按钮、面型按钮、文字按钮、图标按钮、图标+文字按钮，按钮状态分为常规、悬停、按下、禁用。按钮的宽、高、曲率、文字离边框的间距需要在规范中写明。
4、表单规范
在后台系统中，表单多用于登录注册、搜索框、选择器、信息录入等。表单类型可分为输入框、下拉框、时间选择框、单选框、多选框等等，表单状态分为默认、输入/选中、填写完成/已选择、不可填写/不可选、错误提示。对于必填表单，需在标签前后或输入框后增加“红色*号”。输入框的高度、曲率需要在规范中写明。
5、表格
此图为可进行单选或批量选择、排序、表头分组和带有冻结列的复合型表格：
a、固定列表格：对于屏幕无法展示完全的内容，可以采用冻结重要列的方式，然后横向加滚动条左右滑动
b、可对数据进行排序：升序和降序
c、文字类字数限制：重要字段全部显示，其他文字信息超出宽度以“...”代替，鼠标悬停时显示全部内容
d、对齐方式：文字信息左对齐，因为人的阅读习惯是由左到右、由上到下的，此外在主从型列表中，采用左对齐错开文字，可使用户一目了然，降低视觉噪音；数据信息右对齐，因为数字单位个十百千万...是由右向左，方便比较数据大小
文章来源：站酷 作者：Alice冰冰
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
把相对复杂、抽象的数据通过可视的方式以人们更易理解的形式展示出来的一系列手段叫做数据可视化，数据可视化是为了更形象地表达数据内在的信息和规律，促进数据信息的传播和应用。
在当前新技术支持下，数据可视化除了“可视”，还可有可交流、可互动的特点。数据可视化的本质是数据空间到图形空间的映射，是抽象数据的具象表达。
数据可视化作品《launchit》 作者：Shane Mielke
作者写了本书，地图上显示了世界各地读者的分布情况及对应人数
数据可视化作品《world-drawn-by-travelers》 作者：TripHappy
国家之间相互连通的旅游路线，颜色越相近的国家，表明两国家的人们互动越频繁
大屏数据可视化是以大屏为主要展示载体的数据可视化设计。
“大面积、炫酷动效、丰富色彩”，大屏易在观感上给人留下震撼印象，便于营造某些独特氛围、打造仪式感。电商双11类大屏利用此特点打造了热烈、狂欢的节日氛围，原本看不见的数据可视化后，便能调动人的情绪、引发人的共鸣，传递企业文化和价值。
利用面积大、可展示信息多的特点，通过关键信息大屏共享的方式可方便团队讨论、决策，故大屏也常用来做数据分析监测使用。大屏数据可视化目前主要有信息展示、数据分析及监控预警三大类。
数据分析类 图片来源：必应；图片作者：帆软软件有限公司
大屏设计要避免为了展示而展示，排版布局、图表选用等应服务于业务，所以大屏设计是在充分了解业务需求的基础上进行的。那什么是业务需求呢？业务需求就是要解决的问题或达成的目标。设计师通过设计的手段帮助相关人员达成这个目标，是大屏数据可视化的价值所在。
大屏因为大，承载数据多，为了避免观者迷失，大屏信息呈现要有焦点、有主次。可以通过对比，先把核心数据抛给用户，待用户理解大屏主要内容与展示逻辑后，再逐级浏览二三级内容。部分细节数据可暂时隐藏，用户需要时可通过鼠标点击等交互方式唤起。
规范的流程是好结果的保证。找到一个可参考的流程，然后步步为营，就能避免很多不必要的返工，保证设计质量和项目进度。
1、根据业务场景抽取关键指标
关键指标是一些概括性词语，是对一组或者一系列数据的统称。一般情况下，一个指标在大屏上独占一块区域，所以通过关键指标定义，我们就知道大屏上大概会显示哪些内容以及大屏会被分为几块。以共享单车电子围栏监控系统为例，这里的关键指标有：企业停车时长、企业违停量、热点违停区域、车辆入栏率等。
确定关键指标后，根据业务需求拟定各个指标展示的优先级（主、次、辅）。
2、确立指标分析维度
“横看成岭侧成峰”。同一个指标的数据，从不同维度分析就有不同结果。很多小伙伴做完可视化设计，发现可视化图形并没有准确表达自己的意图，也没能向观者传达出应有的信息，可视化图形让人困惑或看不懂。出现这种情况很大程度就是因为分析的维度没有找准或定义的比较混乱。
上图向大家展示了数据分析常用的4个维度，我们在选定指标后，就需要跟项目组其他小伙伴讨论：我们的各个指标主要想给大家展示什么，更进一步的讲，是我们想通过可视化表达什么样的规律和信息。而上图，可以引导我们从“联系、分布、比较、构成”四个维度更有逻辑的思考这个问题。
3、选定可视化图表类型
当确定好分析维度后，事实上我们所能选用的图表类型也就基本确定了。接下来我们只需要从少数几个图表里筛选出最能体现我们设计意图的那个就好了。
选定图表注意事项：易理解、可实现；
易理解
可视化设计要考虑大屏最终用户，可视化结果应该是一看就懂，不需要思考和过度理解，因而选定图表时要理性，避免为了视觉上的效果而选择一些对用户不太友好的图形。
可实现
4、了解物理大屏，确定设计稿尺寸
多数情况下设计稿分辨率即被投大屏的信号源电脑屏幕的分辨率。有多个信号源时，就会有多个设计稿，此时每个设计稿的尺寸即对应信号源电脑屏幕的分辨率
一般情况下设计稿的分辨率就是电脑的分辨率，当有多个信号源时，有时会通过显卡自定义电脑屏幕分辨率，从而使电脑显示分辨率不等于其物理分辨率，此时，对应设计稿的分辨率也就变成了设置后的分辨率；此外，当被投电脑分辨率长宽比与大屏物理长宽比不一致时（单信号源），也会对被投电脑屏幕分辨率做自定义调整，这种情况设计稿分辨率也会发生变化。所以设计开始前了解物理大屏长宽比很重要。
5、页面布局、划分
尺寸确立后，接下来要对设计稿进行布局和页面的划分。这里的划分，主要根据我们之前定好的业务指标进行，核心业务指标安排在中间位置、占较大面积；其余的指标按优先级依次在核心指标周围展开。一般把有关联的指标让其相邻或靠近，把图表类型相近的指标放一起，这样能减少观者认知上的负担并提高信息传递的效率。
6、定义设计风格
很多小伙伴也许没接触过大屏设计工作，但大多数人都应该有APP或者Web风格定义的经验。我们在定义一款APP或者Web页面设计风格时常用的方法是什么呢？情绪版！
大屏虽酷炫，但实际上也是运行在浏览器里的Web页面，所以大屏设计风格定义方法也同样可以是用情绪版来做，这种方法也是目前比较科学高效的风格定义手段
上图提供了情绪版应用的脑图，具体操作细节不做介绍，不太了解的小伙伴可以自己找找资料哈。情绪版的一套流程下来，我们定义的风格基本是科学准确的，可以指导我们执行设计。如果是给甲方爸爸做大屏，这个流程也可以让我们提出的方案更有说服力
7、可视化设计
根据定义好的设计风格与选定的图表类型进行合理的可视化设计。目前来讲大屏可视化主要有指标类信息点和地理类信息点两大可视化数据。指标类信息点可视化效果相对简单易实现，而地理类信息点一般可视化效果酷炫，但是开发相对困难，需要设计师跟开发多沟通的。地理类信息一般具有很强的空间感、丰富的粒子、流光等动效、高精度的模型和材质以及可交互实时演算等特点，所以对于被投电脑、大屏拼接器等硬件设备的性能会有要求，硬件配置不够的情况下可能出现卡顿甚至崩溃的情况，所以这点也是需要提前沟通评估的。
8、样图沟通确认
这里的沟通分三个层面：设计师对内沟通、设计师对外沟通、设计师与大屏的“沟通”。
样图沟通环节，最初的样图不需要十分精致，我们可以把它理解为一个“低保真”原型，然后通过不断沟通修改，让它逐步完善精致起来，也就是小步快跑，避免那种一下子走到终点，然后又大修大改的情况。
因为我们在前几步已经分别确定了页面布局、图表类型、页面风格特点，所以这一步我们需要用尽可能简单的方法 ，把之前几步的成果在页面上快速体现出来，然后根据样图效果尝试确定五方面内容：
跟大屏“沟通”是比较重要也是个特殊的环节，这也是我觉得大屏设计跟其它设计不一样的地方，大屏有它自己独特的分辨率、屏幕组成、色彩显示以及运行、展示环境，这里的很多问题只有设计稿投到大屏上才能够被发现，所以这一步在样图沟通确认环节非常重要，有时候需要开发出demo，反复测试多次。
9、页面定稿、开发
事实上页面开发阶段并不是到了这一步才进行，这里说的页面开发仅指前端样式的实现，实际上后台数据准备工作在定义好分析指标后就已经开始进行了，而我们当前的工作是把数据接入到前端，然后用设计的样式呈现出来。
切图与标注
由于大屏实际就是一个web页面，所以开发阶段的切图与标注是少不了的。
切图：哪些元素需要切图，怎么切？
一般开发用代码写不出的样式或动效，都需要设计师切图作支持：比如数据容器的边框、小的动效、页面整体大背景、部分图标等。切图按正常网页设计标准切就可以了。
标注
Web页面用什么插件做标注这个大家都很熟悉，我就不多说了。需要注意的是，如果大屏页面需要在不同比例的终端展示，那么此时的标注与开发可以使用rem作为基本单位来实现，这样实现的大屏页面在后期会有更好的扩展性与适应性。
10、整体细节调优与测试
这部分是指页面开发完成后，将真实页面投放到大屏进行的测试与优化。这里主要有两部分工作。
视觉方面的测试（有点像APP的UI走查）：关键视觉元素、字体字号、页面动效、图形图表等是否按预期显示、有无变形、错位等情况。
性能与数据方面的测试：图形图表动画是否流畅、数据加载、刷新有无异常；页面长时间展示是否存在奔溃、卡死等情况；后台控制系统能否正常切换前端页面显示。
1、字体使用
字体优先使用系统默认字体，需要嵌入字体时考虑字体的可识别性、与当前设计风格是否融合、是否可免费商用。
如果页面是云端部署，需要嵌入字体包时，我们可以使用FontCreator这类的软件把那些用不到的字符从字体包中删掉，然后重新打包上传，减小字体包大小，可以优化页面加载体验，避免在替换默认字体的过程中出现页面文字跳动等现象。（一般来讲一套字体文件包含了阿拉伯文、符号、拉丁文、日文、西里尔文、希腊文、拼音、注音符号等多种字符，对于大屏这个明确的场景，我们可以删掉其它使用不到的字符，仅保留中文、拼音和数字）
2、颜色搭配
– 1、设计稿投到大屏上显示效果不佳怎么办？
大屏的分辨率、比例、使用环境、投射方式等均会对设计造成影响。理想情况下，我们应该在设计开始前，就能打开大屏系统做一些简单测试。我们可以从网上收集不同设计师不同风格的大屏设计作品，然后投上去查看实际效果。因为大多数时候大屏都会存在色彩偏差，这时通过测试我们就能发现渐变色、邻近色等不同类型的色彩搭配是否可以在目标大屏上良好呈现，如果不可以，那我们设计进行时就不要使用显示效果不佳的色彩搭配。另一方面，样图沟通环节及时测试也很重要。
– 2、大屏设计定稿后，切图切几倍图？
由于是将我们电脑屏幕投射到了大屏，大屏上的内容是运行在我们电脑浏览器上的页面。所以切图根据我们电脑的分辨率，正常切1倍图就可以
– 3、1920*1080的设计稿，投到9000*4320的屏幕上，文字图片会发虚么？
看情况，视大屏系统硬件规格与观看距离来定。这块有四个概念需要跟大家交流下。
大屏逻辑分辨率（设计稿尺寸）——显卡输出分辨率——视频矩阵切换器（DVI）支持分辨率——大屏实际物理分辨率。
一般后两个是没问题的，大屏跟矩阵切换器是由大屏厂商提供，一般刚好配套大屏。容易问题的是显卡输出分辨率，我们电脑屏幕分辨率并不是最终显卡传递到DVI接口的分辨率，传递到DVI接口的分辨率是电脑显卡所能输出的最大分辨率（部分电脑可设置或自定义输出分辨率）。输出分辨率等于DVI支持分辨率时显示效果最佳。输出分辨率低于DVI支持分辨率，DVI会将信号放大后传递到大屏，放大的过程中就有图像信息丢失，虽然此过程中有各种算法支持去保证图像尽可能清晰，但算法再好，跟真实图形还是有差距的。此外，多信号源投射效果优于单个信号源投射。对于现场直播数据大屏，一般至少有两个信号源，一个投屏，另一个也投屏但是处于备用状态。
离大屏的距离也影响观感，一般离得近，颗粒感明显，距离稍远，会显的较为清晰
– 4、设计稿完成开发后，发现在大屏上页面有被拉伸或者压缩的情况，怎么补救？
一般来讲，开发只需要对设计图做还原即可。但特殊情况下，比如显示器扩展不正确导致页面被拉伸或压缩，这时就需做处理：我们可以先得到被拉伸/压缩的比例，然后对整体视图做压缩/拉伸处理，再由其拉伸/压缩，这样被拉伸/压缩的瑕疵就可以得到一定程度上的矫正。另外，了解被投电脑硬件特点，有的电脑可以通过自定义分辨率解决这部分问题。
– 5、除自行开发可视化大屏外，还可以通过哪些第三方服务来快速实现？
阿里云DataV、腾讯云图、百度Sugar等
– 6、数据可视化的图表样式可以在那些地方找到参考？
图表部分的二个库是我们设计师可以打开浏览产看的，这里面所有的图表样式都是基于代码实现的，可以作为我们设计图表的参考，也可以让开发拿代码去用，或者在这些图表的基础修改
工具类的需要有一定的代码基础，里面同样有丰富的图表，所以跟开发的沟通也很重要，因为他们可能会了解多一些更新的前沿的图表形式是我们设计师不知道的，所以彼此多沟通交流是在太重要了
数据可视化是一门庞大系统的科学，本文所有讨论仅针对大屏数据可视化这一特定领域，管中窥豹，如有遗漏或不足之处欢迎大家讨论交流
原文地址：UX设计诗 （公众号）
作者：UXBoy
转载请注明：学UI网》大屏数据可视化设计指南
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
相信许多同学对与“FUI”并不陌生，可能一提到这个词大家首先想到就是漫威和 DC 科幻电影中主角的操作场景，例如漫威电影中钢铁侠的操作界面：
图片源自 HUDS+GUIS
由于大家长期受到科幻电影影响，一度认为 FUI 即为“科幻界面设计”，这个定义真的是正确的么？大家可以短暂思考一下，带着疑问继续阅读下面对 FUI 的定义，看是否和你想的一样。
为了让大家更好的理解 “FUI” 的定义，我们将 “FUI” 这个词拆开分别进行简单解释。在 FUI 中：
“U”代表用户（User）
“I”代表界面（Interface）
“F”代表虚构的（Fiction）、未来的（Future）、幻想的（Fantasy）。
简单点来讲 FUI 就是：虚构的、未来的、幻想的用户界面。
相信读到这里大家已经对 FUI 有了初步的认识，“科幻界面”只是 FUI 中的分支，并不能完全解释 FUI 。对与“虚构、未来、幻想”三个词我们再做进一步分析解构：
a.虚构的
FUI 的专业术语是“虚构用户界面”，其中包含各种“虚构”的用户界面，即不真实，只是大胆的设想。例如人们大胆的设想宇宙飞船的界面设计，或者可穿戴的智能设备界面。
图片源自 Behance
b.未来的
我们再回忆我们看过的科幻电影，在电影中它通常作为故事的一部分而创建。故事可以在不同的时间段进行设定，例如将来、当前或者过去。所以我们并不将 FUI 限制在“未来”用户界面，它的时间线是相对的。不同时代的人们对于科幻电影的理解不一样，所以大家对于未来的定义也有所不同，例如早年的《星球大战》系列电影和《环太平洋》系列电影都属于科幻电影，但存在的时间线却有所不同，其中的界面设计风格也会因有所不同。
图片源自 HUDS+GUIS
c.幻想的
关于“幻想”的用户界面，人们脑袋可能首先闪过一些夸张虚幻、为人耸听的画面。就像《神奇博士》中的神奇博士进入多玛姆的世界当中一样。
图片源自百度
“幻想”这个词经常被用来描述哪些远离现实的事情，这些事情难以被实现。百度百科中对幻想的解释是“虚而不实的思想；没有道理的想象；无根据的看法或信念；以理想或愿望为依据，对还没有实现的事物有所象。”
关于“幻想”的用户界面也可以包括基于现实和真实技术的用户界面，因为人们在基于现实的基础幻想也属于幻想的范畴之内。例如宝马的概念设计中，我们依然能看到现代的汽车设计的雏形，但也突破了现有的汽车设计状态。
图片源自 HUDS+GUIS
相信到这里大家已经对 FUI 的定义有一个较为清晰的概念，FUI 是虚构的、未来的、幻想的用户界面设计，即进行大胆的假设虚构用户界面，且并不受时间的限制的，远离现实的幻想用户界面。
相对于大众接受度更好的扁平化，数据可视化设计却对 FUI 的设计风格情有独钟，在笔者所接触得到的数据可视化的设计中，无论是实际的工作项目还是一些概念稿的设计都频繁用到 FUI 的设计风格。到底是什么原因让市场对 FUI 接受程度如此之高呢？接下来我们从心理学、视觉、思维以及硬件几个角度作为切入点来进行分析。
罗马人说：“物以希为贵。”因为在平时生活中极为罕见，则显得十分珍贵。例如大家平时的在玩游戏的时候，游戏中“限定”的虚拟商品总是能够比其它虚拟商品更加吸引玩家去购买，因为“限定”预示珍贵、与众不同，即使价格高一点，玩家也能够接受。例如最近王者荣耀中的新年限定皮肤，因为是“限定”，所以总是不断的勾引用户的钱包。
图片源自 王者荣耀
同样 FUI 的设计风格在整个设计行业属于一个小众的形式，我们在日常生活中难以接触到，毕竟我们的日常生活中不可能出现宇宙飞船或者炫酷的机架。面对当今扁平化设计的主流趋势，FUI 的设计风格会让用户耳目一新，接受程度会更高一些。例如在商品的展示中，同样是 New Balance 的鞋子，你那种形式的展示会让顾客更加愿意买单？
相对于当前流行的扁平化设计，FUI 可谓是在 UI 设计中独树一帜，设计风格十分鲜明，极具未来感和科技感。
作为主流趋势的扁平化设计，无论是 Material Design 还是 iOS 都以深入人心，人们对扁平化的设计风格习以为常，已经很难在数据可视化的设计中进行视觉创新，而 FUI 的设计风格可以说是在数据可视化的设计中极具视觉优势。
FUI 区别于我们平时所接触的扁平化的设计，在视觉层面我们主要以色彩和图形两个方面进行分析。
a.背景
在背景的处理上常以深色的背景营造来营造强烈空间感，让用户感觉自己处在一个三维的空间当中，例如下图，我们能够感受到强烈的空间感，数据仪表盘处于一个具有纵深感的三维世界当中，视觉中心的数据显示器与背景形成了鲜明的对比。
图片源自 HUDS+GUIS
b.配色简洁
在颜色的选择上，借鉴了军事设备中的配色准则，在残酷的战争中“快速、准确、直接”是最重要的，所以在军事设备上多以单一的冷色调为主，尽量避免多种色彩的使用，这样对于操作者而言更加简单。所以 FUI 的配色设计大多以冷色调为主，对比色通常作为辅助色用以反馈重要信息，例如在 007系列电影中的界面都是使用对比色反馈重要信息，如下图中的坐标信息都使用了红色作为突出重要信息的设计手段。
图片源自 HUDS+GUIS
当然也有大量使用同类色的情况，例如 Sid Meier 中的飞船状态页面，着重表示当前的飞船的状态，这样在发生异常的状况下可以立马发现。
图片源自 HUDS+GUIS
c.对比强烈
FUI 中的配色对比强烈，首先因为背景多以深色为主，强烈的对比能够有效的拉开页面中的空间感，例如钢铁侠中的史塔克战役中头盔的界面。
图片源自 HUDS+GUIS
其次强烈的对比能够突出核心信息，更好的进行信息反馈。例如下图，强烈的对比能让我们一眼就能看到核心信息，以及当前的状态反馈
图片源自 HUDS+GUIS
FUI 的图形装饰元素可以说是极其丰富，形式感很强。在设计的细节当中使用大量的“异形”的图形元素，并辅以一定的装饰元素。例如下图：
图片来自于 Grey Goo
a.军事风格
FUI 的设计大量借鉴了军事风格，其中也大量借鉴军事操控的平台的界面图形设计，这里借鉴军事风格的原因很简单，因为在众多的科幻、动作的故事题材中都是以军队或者其他超级团队来去对抗恶势力或者外星人入侵者，在界面设计上自然要延续其中军事风格。
图片源自Behance
细节上例如战斗机上的 HUD 瞄准界面中的图形多次被引用到飞船的操作界面上等等。
图片源自 HUDS+GUIS
b.机甲元素的运用
大量异形元素的机架风格源于对机甲设计的灵感，并且在细节上使用大量的装饰元素。
在细节上例如边框和环形图的设计，相对于扁平化的设计，FUI 的设计风格显然更具视觉冲击力。
图片源自 HUDS+GUIS
FUI 是一个非常有趣的 UI 设计领域，是我们在日常现实生活之中无法探索的用户界面设计方式。在我们的日常工作中，通常普通设计师很难有机会为宇宙飞船、时间旅行设备，或者感知型人工智能和外星人使用的用户界面做设计。
图片源自 HUDS+GUIS
FUI 使设计师有机会去突破现有的用户体验和用户界面的限制，探索一个新的领域。通过虚幻界面设计，我们可以大胆的设想以及寻找新的解决方案。例如我们可以大胆的设想 AR 技术的应用，地图可以采用全息投影技术、人与智能硬件的环境交互等等。
虚幻界面设计甚至可以是新的发明，它们可以作为一种概念的验证，它们可以启发我们，提出问题，探索什么可行，什么不可行。正如科幻小说可以激励人们登上月球或建造自动驾驶汽车一样。虚幻用户界面可以激励人们为未来创造技术。
在我们之前提到影视故事中设定的使用场景多为宇宙飞船的指挥舱或者驾驶舱、可穿戴式AR设备等等，但在现实生活现在多以配备“大屏”的指挥厅为主，相对于我们平时使用的移动设备和 PC 台式机，大屏的物理渲染尺寸更大，在比例上的差异也更大。如下图：
由于硬件设施的变更，扁平化的设计无法满足用户的需求，主要原因有：扁平化设计力求干净整洁，而在大屏中物理渲染尺寸的变大会显得画面格外空和呆板；其次是缺乏细节。而 FUI 的设计风格设计细节丰富，恰好可以补充其细节缺失的问题。
数据可视化设计选择 FUI 的设计风格有着必然的原因，首先是 FUI 的设计风格属于一个小众的设计风格，在这个扁平化当道的时代更容易吸引用户的目光，接受程度高；其次是视觉冲击力强，设计细节丰富，军事风格和机甲风格的图形在视觉上更加新颖；再者是“大屏”作为视觉载体，物理渲染尺寸比例的变更使得扁平化设计在大屏上显得画面不饱满，缺乏细节，而 FUI 则恰好能够补充这些空白；最后 FUI 可以帮助我们突破思维限制，寻求更好的解决方案。
借鉴参考：
《FUI-How-to-design-User-Interfaces-for-Film-and-Games》
图片来源：
原文地址：海盐社（公众号）
作者： 姜正
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
蓝蓝设计的小编 http://www.lanlanwork.com