对于许多公司和品牌而言，使用带有含义的动物logo，能非常准确的传递品牌信息！比如说豹子的敏捷，狮子的勇猛，长颈鹿的优雅，独角兽的神秘等等！这种品牌意识在其徽标中使用动物象征来策划。根据所选动物的类型，品牌是强大，快速，奢华，关怀，神秘和许多其他情感。
在我们设计UI有所疑惑时，可以参照以下标准做法。
这些做法并非一成不变—我只是列举出这些方法，相信它们可以对你的日常UI设计工作有所帮助。
我们需要记住一点，设计其实就是跳出框框思考，这意味着，有些时候我们要打破陈规。所以，对我的建议也不要全盘接受。
图中的像素值是密度像素值的三四倍
密度像素是屏幕上每一英寸所包含的像素个数，简称PPI（Pixels Per Inch）。dp（density-independent pixel）是密度独立像素，也写作dip（也有device-independent pixel之说，设备独立像素）。
设计界面时，建议大家基于设备的密度像素，而不是像素。这样可以保证我们设计出的图标素材比例适当，适应不同尺寸的设备。
举个例子，假如我们以密度独立像素dp为单位，设计了一个 200 x 50的按键，那么这个按键在160ppi的屏幕上的尺寸是200 x 50像素，在320ppi的屏幕上的尺寸则为400 x 100像素，即原尺寸的两倍。
因为有些屏幕的单位英寸的像素数量要比其他屏幕多，即ppi分辨率大，为了保证设计的图标在不同分辨率的屏幕上都一样大，设计师通常只是设计一个尺寸，导出2x、3x、4x的尺寸。
iPhone XS Max的屏幕尺寸是414 x 896。但这里的单位并不是像素，而是点的个数。论像素，则是1242 x 2688 px。知道了这些，给iPhone XS Max做设计时，我会以414 x 896个点为尺寸做设计，而后导出3x的图标素材。
为什么UI设计的间距都是8的倍数而不是5的倍数呢？这里有一个简单的解释—如果一个设备是1.5x的分辨率，我们就没法导出一个奇数。
另外，现代主流的屏幕尺寸都是以8为单位，以8的倍数做设计可以很好地适应这些屏幕。
以8的倍数设计可以保证设计的一致性。基于这种惯例，大家在进行设计工作时不用再猜测间距的数值，每个图标都可以完美地与其他图标对齐。
有关这个话题的更全面探讨，请参考Bryn Jackson的文章《八像素网格设计》。
我们在设计的过程中应该时常将自己抽离出来，审视界面中这些作为元素“容器”的线和框是否让界面显得过于杂乱，是否应该予以保留。通常这些用以区隔界面内容的线和框可以被边界留白代替。
我们设计的大部分元素都存在于线框里，简单清除掉这些“容器”可以让界面看起来不那么拥挤—给元素更多呼吸的空间。
善用对比度不仅仅是为了让用户的注意力集中于重要的信息，更是为了使产品更容易访问/使用。
设计产品就好比建设像图书馆、学校一类的公共场所，它的适用对象需要涵盖每一个人，包括失明、色盲和视障用户。
Web内容无障碍指南（WCAG）要求文本或文本图像的对比度至少为4.5：1。
为了保证设计达到该标准，我们可以下载Stark这款插件来检查设计是否是无障碍的。
为什么有些图标元素会被公认为标准？原因有多种。
假如你把一个按钮设计成圆形，那么当我们需要一个（字数较多的）“Start Free Trial”按钮时，它就会不必要地占用界面中竖直方向上的空间。
另外，用户期待的是与其他产品相似的体验。如果你设计的网站、APP或软件与用户的既有习惯相悖，那么这样的体验是不直观的，用户很可能会因此受挫。
故而，在我们发挥创造力的时候，最好以现有的设计规范为基准和前提。不要重新设计轮子。
每一种颜色都有自己的视觉重量，我们可以通过借助颜色的视觉重量来建立内容的视觉层次，用颜色的深浅来呈现内容的重要性的层级。
善用颜色视觉重量的秘诀是，一个更为重要的元素，应该有更重的视觉颜色，以便用户快速浏览网页，区分重要和不重要的信息。
大字号、粗体的信息会首先被用户注意到，而后他们会关注其下的辅助性信息。
通常，设计界面会控制使用的字体数目，两种不同的字体就应足够—这不是说你不能使用更多字体，只是你需要充分的理由。通常来讲，仅用两种字体会更好。
设计界面时要善用字体家族。
使用字体家族意味着我们可以使用同一字体的不同变体。字体家族的存在就是为了字体的不同变体可以更和谐地被放在一起，让设计在保持多变性的同时兼顾一致性。
选择字体时，尽量选择那些有多种重量（如标准、适中、粗体、特粗）和样式的（如长体、宽体、斜体）的字体家族（译者注：作者此处所述选字体经验的适用对象主要为英文字体。）。这样既会给设计留出可探索的空间，也不会增加额外的字体种类。
让用户去认知产品是产品设计中所推崇的，因为，我们为什么要让用户在使用的过程中去思考呢？
结账页面、电子邮箱、搜索历史、返回按钮等都是很好的建立了用户认知的例子。
在好的设计中，结账页面是不需要让用户记住他们所要购买的物品的。用户应该可以清楚地从界面中确认他要购买的物品，而非通过回忆来想起。
在Gmail邮箱中，我瞟一眼就可以知道哪些是已读邮件，哪些是未读邮件，这个过程不需要过脑子。同理，我登录到自己的亚马逊账户后，可以迅速地从上次购物时中断的地方继续开始购物—因为它显示了我最近浏览过的物品。
设计时，应让元素、功能、选项明显可见，最小化用户的记忆负荷。用户无需自己在操作的步骤中记住信息。系统的操作说明应该在需要时很容易看到或查到。
—Nielson Norman Group（尼尔森诺曼集团，人机交互和用户体验咨询公司，唐·诺曼是创始人之一）
作为用户，速度和效率是最重要的。用户使用一个应用程序，是为了解决某个特定的问题。
我要速度。
— Ricky Bobby（电影《塔拉迪加之夜：瑞奇鲍比的民谣》主角、赛车手）
如果将一张支票通过手机存入银行账户这个体验是非常让人享受的，那固然很好，但作为设计师，千万不要让你的创造力阻碍用户实现他们的目标。
关于动画和微交互的一条经验就是，如果某个体验只是无谓地增加了时间，那么这不是在改善用户体验。
如果加入的动画带有目的性，则可以改善用户体验；但是如果增加的只是不必要的分散注意力的元素或用户操作，那么用户体验不会变得更好。
Dribble上有很多着陆页的设计—当用户向下滚动鼠标时，动画随之展开。通常，这些设计展现出过火的动画效果，每个元素都在淡入淡出，动来动去，而几乎不关注体验本身。当太多事情同时在界面上发生时，用户很难知道到底哪些信息是应该关注的，这等同于浪费用户宝贵的时间。
这位Dribble用户，非常抱歉把你揪了出来:/
无数研究表明，界面中动画的最佳时间在200到500毫秒之间，这个数字是由大脑的特征决定的。任何短于100毫秒的动画都是一晃而过，人眼根本无法识别；而超过一秒的动画会带给人无聊和延迟的感觉。
—《UX微动画设计指南》
所以，如果你要在界面中使用动画，那么给它一个明确的目的，并且不要让用户等待超过500毫秒。在2019年的今天，惹恼你的用户只需要1毫秒。
每次我们想要增加额外的信息到界面中时，例如按钮、文字、照片、动画、插图等等，它们就会跟相关的信息进行竞争。如果一页上有太多东西，那么某些元素的重要程度就会被削减。
谷歌搜索首页就是典范。这个设计将全部的注意力放在了搜索这个主要功能上，没有把用户淹没在不必要的信息海洋里。
对不起了雅虎，在这必须把你当做不好的案例展示
最后，分享给大家一句我最爱的设计箴言：
臻于完美之时，不是加无可加，而是减无可减。
文章来源：UXRen
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
在大数据时代，数字化转型已经成为行业迫切的需求。2016-2018年金融、医疗、政府、安全等行业在大数据方向上的投入持续增加，大数据可视化的需求呈现爆发式增长，相关产品也纷纷推出：阿里 DataV 的「双十一的天猫可视化大屏」、360的数博会企业安全大屏、帆软的 BI系统。面对井喷式的市场需求和部门业务在 To G、To B 的拓展需求，需要快速储备大数据可视化的能力，作为一个 To C 的设计团队面临的挑战和责任都是巨大的。（编者注：由于本文动图太大，将近100M，为了不影响移动端读者的阅读体验，本文图片都是静态截图，动图文章链接戳：https://docs.qq.com/doc）
在过去一年中，潘洛斯（Penrose）团队参与了「灵鲲」态势感知系统、「麒麟」系统、「鹰眼」反电话诈骗系统等14个大数据可视化产品的设计。随着产品不断的探索和迭代，积累了一些行之有效的大数据可视化设计的心得和方法。基于「灵鲲」这个案例，分享一下我们在大数据可视化方向的设计和思考，希望能够给对大数据可视化感兴趣的同学提供一些思路。
「灵鲲」是 MIG 安全云部门与潘洛斯（Penrose）团队合作的，基于潘洛斯大数据可视化引擎衍生出的一款金融风险监控可视化产品。应北京与深圳金融办的需求，搭建灵鲲金融风险态势感知系统，实现事中风险控制，减少网络欺诈损失。
着手设计之前，我们需要了解：大数据市场规模和各行业投入有多大， 政企客户的大数据可视化产品的痛点是什么？对比深耕多年的竞品，我们设计的突破口在哪？——挖掘我们的机遇和发力点。
数据显示，2017年中国大数据产业规模为4700亿元。随着一系列政策的出台，大数据国家战略正在加速落地，大数据行业将持续增长，预计2018年中国大数据产业规模将达到6200亿元，增幅达32%。需求层面，预计2020年大数据应用市场需求中，仅政府需求就占比35%，另外包括医疗、交通、金融等多个行业在大数据和信息化建设投入也将持续增加。
除了旺盛的需求以外，我们还注意到很多政企内部数据基础很好，以宜昌为例，宜昌智慧办汇集了来自32个部门、60个系统的大量详尽的实施城市数据。与这些政企单位合作，易形成行业灯塔，便于规模复制。另外，针对大数据可视化，目前政企已不满足于「面子工程」，更多的希望大数据可视化与 AI 结合，呈现更复杂多样的数据，以辅助决策。
基于以上的市场潜在规模的考察和典型客户研究，在进行「灵鲲」产品能力规划时，我们主要考虑以下三类使用场景： 政府机构决策、展会展台及参观视察。
在金融局等相关政府机构的日常工作中，决策层和相关工作人员会基于实时金融平台数据，针对日常事务或紧急事件进行决策管理，监控大厅也就应运而生。基于这种工作方式，我们可以发现潘洛斯的产品特性非常契合监控大厅的使用场景。在监控大厅中，用户是通过两种不同的信息界面进行工作的，分别是综合数据可视化大屏（总屏）以及工作人员独立使用的电脑屏幕（分屏）。其中，在总屏上，呈现的内容通常是一些对于决策者来说至关重要的信息：正在发生的事件的状态和可能趋势（发生了什么）、值得注意的风险（需要团队做什么）以及风险的处理进度（团队做的怎么样）；而在分屏上，主要为工作人员提供数据分析及风险事件处理功能，帮助团队对事件迅速作出响应，协作。
不同于工作场景，灵鲲产品在展会中展台的主要受众是参会人士，除了一般民众外，更有价值的观众主要来自于媒体和潜在客户等。所以在这个场景中展示的内容与实际工作中的数据可视化内容有一定的区别，更多的是对产品能力的展示、产品的宣传以及社会价值的呈现。如何直观的呈现产品的能力，并使观众快速获得有价值的信息并留下深刻印象非常重要。这也决定了在这个场景中，用户不仅包括观众，也包括演讲者。我们需要考虑如何通过控制端让讲演者而流畅的完成产品介绍。
在金融局等政府机构，经常会有上级领导视察参观的接待活动。这些来访的贵宾往往希望了解关于机构更全面和具体的信息，包括但不限于工作流程、工作成绩等，所以我们认为这个场景综合了以上两种场景的主要特点。这里的用户包括来访人员，演示人员以及工作人员，展示的内容也往往不局限于金融风险大数据的可视化，还会包括工作方式和流程本身。
通过对阿里 DataV，AntV、360、帆软的大数据可视化产品的体验，我们从产品呈现、产品体验、产品技术、部署方式和商业模式几个维度的横向对比。阿里的技术对可视化效果的局限性很大，优点是产品实现模板化、系统实时可交互，用户可以快速搭建自己的可视化产品；360产品可视化呈现3D化，数据呈现效果和数据感知度较2D更优，但是系统非实时可交互，而且搭建周期长，成本较高；帆软的可视化是传统报表型，可视化效果呈现缺乏竞争力。
经过对比，我们不难发现3D化数据呈现能力和数据感知度是最高的。但是局限于目前的技术，项目成本高、研发周期长、难以满足业务的发展速度。
基于市场需求和竞品分析，我们从以下三个方面分别分析了产品的机会和突破点：
基于对灵鲲态势感知系统的使用场景、用户需求以及机会点的考虑，我们规划了未来产品的整体架构，包括大屏端、云端、客户管理端、小屏端以及虚屏端。大屏端基于本地端引擎进行大数据可视化呈现。客户管理端包括报表和配置管理等工具，帮助用户进行分析数据和策略管理。小屏端主要考虑操作控制和移动办公等移动使用场景，提供大屏控制、移动审批、监管、公众号等功能。以上三个端由云端拉取和更新数据。虚屏则提供差异化的大数据可视化体验，如增强现实等新奇有趣的玩法。由于大屏端在我们的规划里是态势感知系统的核心，且落地到合作方的模块，以下分享的内容将主要围绕大屏的内容设计展开，未来如果产品规划中的其他模块陆续上线，我们再做分享。
本地端引擎
早期我们设计的「麒麟」系统、「鹰眼」反电话诈骗系统在对外在大屏上展示主要是通过 web 端的方式去实现，虽然适配性尚可，但很多设计效果无法完全还原。我们也尝试性用 webGL 和 three.js 的方式把设计效果再做进一步提升，但迫于研发周期和实际性能的压力，最后也只能作罢。中期我们尝试使用3D工具输出视频的方式做过一些过渡，输出效果是没有问题，但如果在展会上遇到媒体采访，事情就会变得异常尴尬。媒体会询问展示内容的真实性，数据的实效性，甚至采访的时候需要停留在某一个画面，我方参会人员配合起来非常麻烦。后来我们也研究过竞品使用的工具，例如 Ventuz，工具最终输出的效果是不错，但是界面、操作极其复杂，相关教程和素材在网络上极少，授权费用也相当昂贵。最终经过我们内部商讨和研究，也请教了一些 IEG 专家的意见，决定使用游戏引擎作为本地端的显示引擎。
Unity 和 Unreal 我们也纠结过许久，甚至 Unity 上我们也出过可交互的 Demo，但最终选择了 Unreal 的原因主要有以下几个点：
色彩基调
为了打造灵鲲产品的可视化，在竞品中脱颖而出，我们从产品功能、用户、愿景三个维度发散，提炼出设计指南的关键词：智能、直观、未来，塑造独特的大数据可视化风格体系。
灵鲲金融态势感知系统内容架构分为数据维度和场景维度，数据是核心，场景是大数据呈现的承载体；场景使用具有金属质感的深青灰，符合理性的、冷静的、智能化产品的个性；数据色彩使用透明、发光、具有未来感的高亮色，和场景形成强对比，使数据更为突显、更具吸引力；为了强化客户对于风险的感知，通过颜色区分数据的风险等级，更直观的传达数据的含义。如：高风险的使用红色，红色让人联想到危险、警报。
呈现方式
在现有的产品和传统认知中，大数据产品内容是各种样式的图形和图表，主要以平面为主。我们从游戏、科幻电影中收集了一轮大数据可视化内容相关的案例，从视觉维度上看，主要有这几个特点：一、具有很强的空间感，支持多种数据同屏呈现，可交叉分析对比，承载性强；二、高精度的模型和材质，丰富的粒子、动效，更加贴近现实的光影呈现；三、互动性强，可交互，实时演算。
从大数据可视化的内容维度上看，梳理的3D架构，主要包括：数据维度>基础建设>交通运输>行政分区>自然条件。
数据维度层是最核心的部分，位于场景上方最突出的位置，能够更清晰的展示风险数据的分布、量级；行政区域和交通层是城市场景最基础的数据维度，方便用户进行区域的数据对比和分析；基础建设层包括城市的建筑、标志性建筑、照明、桥梁、等，还原城市独特风貌；通过突出城市的标志性建筑，强化城市、区域的识别性，辅助数据传达；自然条件层包括地形、河流、植被、展示真实的环境特征，用户更有代入感。
△ 北京场景
△ 鸟瞰视角、漫游视角自由切换，满足全局、街道、建筑的不同颗粒度的数据呈现，方便用户进行纵向的数据对比。
△ 场景整体风格图
数据表现
灵鲲的3D数据样式有柱状图和散点图。如何把司空见惯的数据样式，设计出产品的个性，是我们重点要解决的问题。为了体现大数据的力量感，使用科幻电影中的聚合能量、发光的能量石作为柱状图的主图形；同时把数据采集、融合、分析的过程具象为动态粒子网络，作为辅助图形。数据图形和结构中都融合了品牌 DNA 的三角图形，数据样式更具有品牌的个性。
△ 柱状图
△ 散点图
预见未来的功能创新
时间线：3D的维度基础上，我们增加了时间的维度，通过拖动时间线查看不同时间点的数据的变化趋势，由此对未来数据进行预测。为了强化用户对于时间感知，设计了白天和晚上两种风格，白天和夜晚随着时间变化而变化。
天气系统：天气是未来数据分析极其重要的一个因子，它会直接影响交通（例如人流、物流、航空）、医疗(例如疾病传播、医院就诊）等领域。所以我们设计了通用的天气系统组件，呈现实时天气情况，以辅助用户进行数据分析。
控制端：符合大屏使用场景和用户操作习惯，同时小屏控制端支持更复杂更精准的操作。
组件库搭建
为了提升产品搭建的效率，降低了研发周期和成本，产品功能模块实现了组件化，分为3D场景组件、3D数据组件、2D数据组件。任何一位设计师都可以根据产品需求，搭配组件模块，快速搭建大数据可视化产品。
数据内容的包装
通过该产品，一方面能够辅助金融局等政府机构领导把控整体金融平台风险、辅助做出平台整改指导决策意见，展示金融工作成绩；另一方面体现出腾讯大数据能力和公司的社会责任；最后，通过从更长远的眼光去包装产品，打造智慧监管标杆产品，从而推动与政府客户更深入广泛的合作。具体内容通过以下两条线进行组织：
横线：各个监管维度
灵鲲金融风险态势感知系统专注于呈现金融风险数据的呈现，主要分为公司层面和用户层面，综合体现潜在的风险趋势和实际影响的范围。除了灵鲲用于监管金融数据，整个监管平台还负责展示包括政治、生态、电信、消费在内的多个监管维度，这些维度与金融监管维度为同一个内容层级。我们考虑到腾讯的大数据能力可以帮助更多城市综合管理者了解整个网络社会的全局性风险，所以每个维度都是智慧监管必不可少的一部分，并且每个维度之间的横向交叉对比能够使智慧监管平台发挥出更大的社会价值。
纵线：监管颗粒度
灵鲲系统中观众可以从全局数据一直下钻到个体数据，实现不同颗粒度的监管目的。
具体来讲，全国的安全风险最终是以加权平均后的指数形式体现出来；再到具体的省份和城市，内容细化到具体风险事件的发生情况，如电信安全监管维度，呈现电信诈骗使用的伪基站的位置，以及发送诈骗短信的数量等；最后细化到城市中的机构和建筑，呈现具体机构的运行情况和具体高风险企业所在建筑进行实时监控。
https://v.qq.com/x/page/d0742kep4k1.html
潘洛斯团队是基于 DNA 设计中心下的大数据可视化团队，成员来自于 MIG 安全和医疗部门，早期专注于 To C 端的产品设计，过去一年里随着公司战略的变化和部门业务方向的变化，我们逐渐开始把产品设计的重心和思考放在了 To B、To G 领域，不断做着尝试和探索。以前做 To C 的时候我们关注的更多是 DAU、转化率、日活、满意度这些和产品体验相关联的指标，满足绝大多数互联网用户的诉求是我们首要去解决的问题。现在做 To B、To G 领域的设计，我们更多思考的是如何包装我们现有的业务能力，能够通过更加简单、直接、有效的方式触达给我们的客户，让他们更容易理解像腾讯这样拥有海量数据和算法能力的互联网公司如何帮助他们进一步提升他们的业务效率和产出，给这个社会创造更多的价值，这也是腾讯多年来想要承担的社会责任之一。
文章来源：优设
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
2018年如自己所愿，终于有机会可以尝试下数据大屏的可视化设计，但是想象总归是美好的，新手上岗第一次总是那么不太如意，陌生而又熟悉着。在做过几次尝试后，自己又私下里翻阅了一些关于数据大屏方面的设计文章，好的设计图片。有很多不足，也有很多刚开始做的时候没有注意到的点，这次整理作品，也顺便把大概的设计流程整理了一下。给自己的一个复盘总结，也是一次设计分享。
文章来源：UI中国
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
刚入行的新手设计师容易出现一个问题，接到需求就开始设计，最后出现的界面和原型几乎一模一样，唯一的区别就是上了色，加了图片和图标，最后提交审核时老板反馈，“这个界面看上去太“平”了，你在这里加个背景色吧；这个图标太小，你再放大一点；这个位置你在加点装饰……”。
这主要原因还是界面没层次导致的，虽然老板对设计不太清楚，但是关于业务逻辑我们的设计稿是否表达清楚，重点是否突出这个他最清楚了。
那么如何才能提高界面层次呢？我们可以从两个方面入手，在设计前我们需要考虑突出内容层次的方法；在设计中需要考虑突出视觉层次的方法。
目录
一、突出内容层次的方法
将相关联的元素进行组合
确认内容优先级，将优先级高的放在前面
确认重要内容，将其差异化设计
二、提高视觉层次的方法
利用线、面、留白将模块进行分割
利用大小、投影、背景图突出视觉层次
利用颜色对比提高视觉感受
利用文字对比提高界面的可阅读性
一、突出内容层次的方法
当一个界面信息量比较大时，层次感好的界面用户进来能快速的获得想要的信息，同时最终达到产品的目的。而层次感差的界面用户看半天也不知道要做什么，看一会也就走了。因此良好的视觉层级是界面成功的关键。在设计前我们需要将相关联的元素进行组合；确认内容优先级，将优先级高的放在前面；确认重要内容，并将其差异化设计。
1.将相关联的元素进行组合
在设计前，产品原型图已经将我们的元素进行了分类组合，但是他们更多的是考虑逻辑、功能上的层次，而如何有一个清晰的内容层次呢？设计师可以利用《格式塔心理学》中的接近性原则将相关联的元素组合在一起，不相关的拉开距离，同时形成一定的规律和节奏，这样会让用户阅读起来更轻松。
需要注意的是，界面中的间距需要满足一定的规律和节奏，比如模块之间的间距大于标题到内容的间距；在内容中不相关联的内容间距大于相关联的间距，如下图所示。
天猫个人主页的个人信息区排在最前面就是遵循了用户的浏览习惯；其次是我的订单和物流信息排在了第二的位置这是用户想看到的内容；最后是我的福利排在了第三位这是产品想给用户看的内容。
京东金融的我的页面用户的资产信息排在最前面，他首先是遵循了用户的浏览习惯，同时也是用户想要看到的内容，其次是功能入口区排在了第二的位置这是产品想给用户看的内容，最后是福利大礼包排在第三位这也是产品想个用户看的内容。
2.确认内容优先级，将优先级高的放在前面
将相关联的信息整理之后就需要确认模块的优先级了，由于用户的浏览顺序是自上而下的，因此我们需要将优先级高的模块放到前面。
那么优先级如何判断呢？大家可以从三个方面去考虑，第一是遵循用户的浏览习惯；第二是用户想看的内容；第三是产品想要用户看的内容，如下图所示。
天猫个人主页的个人信息区排在最前面就是遵循了用户的浏览习惯；其次是我的订单和物流信息排在了第二的位置这是用户想看到的内容；最后是我的福利排在了第三位这是产品想给用户看的内容。
京东金融的我的页面用户的资产信息排在最前面，他首先是遵循了用户的浏览习惯，同时也是用户想要看到的内容，其次是功能入口区排在了第二的位置这是产品想给用户看的内容，最后是福利大礼包排在第三位这也是产品想个用户看的内容。
3.确认重要内容，将其差异化设计
在设计时我们需要知道，优先级高的模块不一定重要程度就高，因此我们还需要确认模块的重要层级，同时利用背景、布局等方式进行差异化设计，用起用户注意，如下图所示。
网易严选中的新人专享礼和品牌制造商直供就采用了差异化设计，职工类模块采用的是普通的宫格式布局，新人专享礼采用添加背景的方式，加深了模块的纵深感，对比其他模块更加突出。
大麦网中的特色模块和其他模块也采用了差异化设计，特色模块采用拼图的方式设计，其他模块采用列表的方式进行设计，用户进入页面首先就能够看到这个模块，提高用户接受信息的效率。
土豆视频个人主页的列表部分也采用了差异化设计，消息提醒、我的收藏、观看记录、我的缓存这四个用户常用的功能采用宫格式布局，其他不常用的我的会员、客户与反馈、设置采用列表式结构，这样也能够提高用户操作速度。
二、提高视觉层次的方法
当然内容层级确定了显然不够，我们还需要考虑突出界面的视觉层次，这样用户才能够清晰舒适的浏览我们的界面。那么提高视觉层次的方法有哪些呢？在设计中，我们可以利用线、面、留白将模块进行分割；利用大小、投影、背景图等突出视觉层次；利用颜色对比提高视觉感受；利用文字对比提高界面的可阅读性。
1.利用线、面、留白将模块进行分割
大家记得在设计前我们已经对界面中相关联的元素进行了组合，组合之后就可以利用线、面、留白的方式，将不相关联的元素进行分割，提高界面的视觉层次，从而提高用户的浏览和操作效率。
线分割：是最为基础的分割方式，其优势是占用空间小、分割感弱，多用于列表、Feed流中。需要注意的是，分割线颜色设置需要非常浅，避免模块之间强烈的分割感，比如橘子娱乐的列表就是采用若隐若现的线，让列表中的内容更规整。
面分割：也可叫背景栏分割，其优势是占用空间小、可操作性高，同时能够更好的区分不同模块之间的关系，多用于模块和模块之间的分割，比如转转个人主页的模块采用面分割浏览性更强。
留白分割：是iOS11发布之后兴起的以留白或间距的方式进行分割，其优势是无强烈的分割感，界面清爽，多用于比较有规律或以大图为主的模块之间的分割，比如转转主页下方的卖二手还钱、买实惠好货等，其内容部分都较为规则，采用该方式较为合适。
2.利用投影、大小、背景图突出视觉层次
为了突出界面的视觉层次，我们还可以通过投影、大小、布局等增加界面的对比，从而突出重要信息。
投影：是界面对比较常用的一种方式，其优势是提升界面的空间感，改变视觉次序，通过投影大小的变化还可营造不同的空间关系，多用于卡片风格的设计中，比如Keep均是采用卡片风格的设计，添加投影后让界面视觉层次更突出了。
大小：是大众最为熟知的对比方式，其优势是通过大小对比能够很快的拉开视觉层次，同时能够很好的引导用户浏览路径，比如ofo黄色的大按钮远远都能看见，该页面就一个目的扫码用车。
背景图：往往不如投影和大小常用，但是它的使用可以将模块从其他样式中年凸现出来，多用于banner、推荐等重要模块中，比如美图秀秀的推荐模块，该模块可以说是美图的核心模块。
3.利用颜色对比提高视觉感受
颜色是最容易感知到的对比方式，通过颜色我们可以明确哪些是重要信息，在使用中我们可以通过色相、明暗、饱和度上进行对比，其多用在按钮、重要信息、导航、背景板中。
自如首页上的租房、服务、旅行采用对比色进行强调对比，进入页面用户就能够清楚这三块是是界面的核心功能，同时引导用户关注右侧的具体服务信息。
淘票票首页中的按钮、引导提示、标签栏选中均用了红色进行强调对比，很容易引起用户的注意，让用户看一眼就知道如何操作。
招商银行首页中的话题PK采用对比色进行强调对比，很容易引起用户操作的兴趣。
4.利用文字对比提高界面的可阅读性
文字的层次感往往和字体大小和明暗有关，其中字体大小是提高文字信息层级的重要手段，在文字排版中如果文字之间的层次不清晰，那么一定是大小的对比不够，在UI中字体大小对比往往在4-8px较为适合，如下图所示。
当字体大小对比适合之后就需要通过通过字体的明暗突出主要信息，弱化次要信息，从而提高界面的可阅读性，如下图所示。
在UI设计中我们往往都设定了字体规范，这样不仅能够达到设计统一，同时也有很好的对比性，常用字号为40, 36, 32,28,24, 22(px)，比如优酷的星球页面，通过字体大小，颜色深浅的对比，让用户首先看到重要信息，弱化次要信息。
三、总结
在界面设计中为了降低用户的理解成本，突出重点内容，让用户使用起来舒适，就需要有个清晰的内容层次和视觉层次。
在设计前我们需要考虑将相关联的元素进行组合；确认内容优先级，将优先级高的放在前面；确认重要内容，将其差异化设计。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
在本文的第二部分当中，我们来了解一些作为设计师需要掌握的VR基础概念及相关设计工具。我们不会探索的过于深入，面向设计师的职能点到为止即可。
新的空间维度与沉浸式体验所带来的冲击是前所未有的。要在三维世界当中打造令人舒适的互动体验，你需要了解一些此前可能并未接触过的设计与技术原则。我们的Cardboard团队将一系列概念知识打包到了Cardboard Design Lab这款app(Android)当中，你可以配合Cardboard沉浸到VR世界当中进行学习。
此外还要记得观看Alex在2015年I/O大会上做的详细演示(Youtube)。下面我们就来从这些学习资源当中汇总出一些知识要点。
如果你只有精力去记住两条原则：
保持帧数稳定
保持头部追踪
人们在沉浸于虚拟世界当中的时候，会本能的对外界事件产生反应。作为设计师，要考虑到环境因素的影响。
生理舒适度。眩晕症的问题是我们必须面对的。特别是在角色加、减速的时候要特别留意。尽可能保持地平线的稳定，以避免晕船症状的出现。
环境舒适度。人们在一些特定的虚拟环境当中同样会体验到与现实相对应的不适，譬如高空与恐高症，狭小的空间引发的幽闭恐怖症，空旷空间所造成的广场恐惧症等等。要注意虚拟对象的尺寸比例及互动关系。在现实中，如果有人向你抛来一个物体，你会本能的抓取、躲闪或是保护自己。合理利用现实当中人与环境的互动规律，不要反其道而行之。
围绕用户的感官能力设计引导元素。想想游戏设计师们通常是怎样指引玩家探索环境的：
通过声音帮助玩家辨别方位
通过光亮为玩家指明方向
避免让用户感到疲劳。听上去是再显然不过的道理，但这确实是VR设计新手最容易犯的错误之一。我们在科幻电影中看过太多炫酷的人机互动方式，但你要知道其中大多数都有悖于最基本的人机工学原理；例如“少数派报告”当中那样的手势操作放到现实当中会很快让人产生疲劳与不适。
我制作了一张简单的示意图，用来描述头部在X与Y轴上运动的舒适区域。绿色代表最佳，黄色代表可以接受，红色意味着不适。网络上可以找到的一些用研报告将有助于你进一步了解这方面的话题，例如来自LeapMotion的VR Best Practices Guidelines(PDF格式，4.7M)，此外我们还将在本文结束时提供更多的资源供参考。
不当的设计有可能给人们造成严重的生理不适。听说过“短信脖”没？在一篇发布于Neuro and Spine Surgery的研究报告(PDF格式，314KB)当中，我们可以了解到人们使用手机时不同的持机姿态对于颈部所产生的压强变化。从自然平视状态一直到低头浏览，颈部承受的压强提升了440%，肌肉和韧带会变得酸痛疲劳，神经趋于紧张，脊椎骨所承受的压力也在增强。这些不当的使用方式甚至可能给身体带来长期的健康问题，例如永久性神经损伤等等。
简而言之，这个特定的研究报告至少能告诉我们要尽可能避免长时间的低头交互行为。
三维空间为我们提供了六种运动方式，包括在X、Y、Z三个轴线上进行的旋转与移动。
基于手机的头戴式VR设备，例如Cardboard或Gear VR等等，可以通过内置的陀螺仪对三个轴线上的旋转行为进行追踪(3DOF)。
HTC Hive与Oculus Rift这类高端VR设备所拥有的传感器还可以对发生在三个轴线上的位移进行追踪(+X、-X、+Y、-Y、+Z、-Z)，从而实现六自由度(6DOF)。
由一个或多个传感器所组成的红外追踪系统使6DOF成为可能。Oculus的追踪传感器位于固定摄像头上，而Vive则将其放置在了HMD(头戴式显示器)当中。
Oculus与Vive的灯塔位置追踪模式对比
具体的输入设备取决于你所采用的系统平台。Google Cardboard本身只有一个按钮，相应的交互模式仅包含简单的“看”和点击。HTC Vive需要两个6DOF控制器，而Oculus则搭配了Xbox One手柄，不过最终也会进化为双6DOF控制器“Oculus Touch”。这些输入设备都能为用户带来更高级的沉浸化交互体验。
Xbox One手柄
Oculus Touch
其他输入模式还包括手势追踪等等。其中最著名的当属Leap Motion，你甚至可以将其搭载在HMD上配合使用。
搭载在DK2上的Leap Motion
日新月异的科技进步在不断推进着这类设备的发展，不过目前来说，手势追踪技术还很不成熟，双手与手指的细微动作带来的潜在问题太多，使其难以成为VR的主要输入设备。
游戏手柄虽然早已被人们所熟悉，但在VR领域中却难以带给我们高质体验，因为操作方式的局限会使VR创造出来的高自由度受到破坏，特别是在FPS(第一人称射击)游戏当中，通过手柄控制前进后退和左右平移的动作时通常会给玩家带来极度不适。
而另一方面，HTC Vive的6DOF控制器体验起来确实非常棒，特别是在Tilt Brush这类app当中。我还没有试过Oculus Touch，不过到目前为止看到过的演示都很棒，譬如这段Oculus Toybox demo(Youtube)。
VR的交互设计模式显然取决于你所选定的系统平台及相应的输入设备类型。作为设计师，要尽可能去熟悉各类设备，并对它们的优势及功能限制有所了解。
这显然是个很大的话题，需要更多的专业文章甚至相关书籍才能详尽描述。我们在本文中仅对业界最主流的一些工具进行简要的介绍。
无论在什么时代都始终不离我们左右的老伙伴，方便快捷，无需花费时间精力聚焦于任何技法，在初期探索时尤为适用，能帮你迅速呈现想法，快速迭代，而且成本低廉。要知道，在VR领域，将设计流程推进到中、高保真阶段所需花费的成本相比于2D界面设计来说要更加高昂。
仍然每天都会用到，因为好用。在进入实际的VR原型阶段之前，Sketch是很完美的探索工具，在导出和插件方面也能帮你极大的提升工作效率。
我并不觉得C4D和Maya是竞争对手的关系，两个工具都很棒，各有所长。如果你没有3D方面的经验，学习曲线可能会有些陡峭。在我看来，C4D的界面、参数设定和构建方式更合理，能帮我做更多的快速迭代，所以很喜欢用。MoGraph模块不错，同时还有很多好用的插件供选择。C4D的社区很活跃，你可以找到不少高质量的学习资源。
Maya的优势和不足都很明显。一方面，它能满足3D艺术家的所有设计需求，太多游戏和电影都经由Maya设计制作，其强大而易用的功能可以应对繁重的工作负荷，渲染、建模、动画等等无所不通，同时还拥有很高的定制化能力，堪称业界典范。多数工作室需要根据自身的特定需求来组装定制化工具集，而Maya正是有能力将所有组件整合为一体的最佳平台。
但另一方面，要掌握如此强大且多样化的工具，你势必要投入大量的时间和精力，包括几周时间的摸索，几个月的学习以及日复一日年复一年的练习与实践。
一应俱全的原型工具，你可以一边在VR中预览着原型一边在Unity当中进行调整。Unity本身是个强大的游戏引擎，社区成熟，store中的资源也很丰富(具体售价由资源作者制定)，包括简单的3D模型、完整的项目、音频、分析工具、着色工具、脚本、材质纹理等等供你选择。
Unity提供的文档和学习平台相当不错，教程质量很高，覆盖面也很广。
在Unity3D中进行开发需要用到C#或JavaScript，微软的Visual Studio套装当中自带Unity工具，但不包含可视化编辑器，你需要到资源库中自行寻找。
Unity支持所有的主流HMD，具备优秀的跨平台能力，内容可以被部署到各类系统，包括：Windows PC、OS X、Linux、Web Player、WebGL、VR(包括Hololens)、SteamOS、iOS、Android、Windows Phone 8、Tizen、Android TV和Samsung SMART TV，以及Xbox One/360、PS4、Playstation Vita和Wii U等等。
Unity支持所有的主流3D格式，在2D游戏开发方面也很擅长。自带的3D编辑器不算给力，但人们已经开发了很多优秀的插件来弥补这一点。Unity需要授权许可，但你可以在一定的功能范围内使用免费的个人版本。不妨去官网了解详情，毕竟是当今最主流的游戏引擎，市场占有率达到了47%。
作为Unity3D的直接竞争对手，Unreal同样提供了完备的文档及教学视频。由于进入市场的时间相比于Unity稍晚，所以Unreal的store规模还相对较小。
Unreal的巨大优势在于图形表现力，无论是地形、粒子、后期处理效果还是光影等等都领先于对手。
Unreal 4使用C++，同时搭配可视化脚本编辑器Blueprint。
我个人没怎么使用过Unreal，难以进行更详细的介绍。在跨平台方面，Unreal相对较弱，目前支持Windows PC、OS X、iOS、Android、VR、Linux、SteamOS、HTML5、Xbox One和PS4。
VR还相当年轻。作为先行者，我们需要去学习和探索的东西太多太多，这也正是我为此而兴奋并最终加入VR团队的原因。摆在我们面前的有挑战，更有机遇，我们理应尽最大的努力到这个新世界当中进行探索，去学习、理解、创造、迭代，如此反复的长久保持下去。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
每一个选项都是一个tab ，tab 的形式千千万，但今天只讲这种选中后下面带横线的。（我们给这个横线起个名字叫做小短线吧，下文都这么叫了哈！）
今天的大纲如下：
人机交互系统输出信息是有益的或者让人分心的，要有一条明确的分界线。
Business Insider旗下研究机构BI Intelligence最近做出评估预测，到2020年全球范围内销售的9200万辆汽车将使用与互联网连接的硬件设备。想象一下数以千万计的车辆应用系统每时每刻都在进行数据输入输出，将带来怎样的用户交互体验。共享数据的辅助下，行车安全性可以得到大幅度提升，提前的线路规划策略也能够降低燃油消耗量。系统是如何判断哪些数据对驾驶者或者车载系统本身有所帮助，那些相关性不大的数据是否会让行车驾驶更复杂、更麻烦、更危险?
汽车HMI设计，目的在于增强用户的驾驶乐趣或驾驶过程中的操作体验 ，但车用HMI更注重安全性，也需要开源发展生态。
人机交互（Human–Machine Interaction，简称HMI），是一门研究系统与用户之间的交互关系的学问。系统可以是各种各样的机器，也可以是计算机化的系统和软件。所以应用于汽车的HMI可以实现人与车之间的对话功能。车主可通过该系统，轻松把握车辆状态信息、定速巡航设置、蓝牙免提设置、空调及音响的设置。
最近在做产品的会员中心改版设计，有一些关于会员体系相关设计的思考及分析，纪录并分享一下。
大多数产品在满足用户的基础需求上，会推出付费会员功能，以满足用户更高需求的同时，达到商业层面的收支平衡。那么，会员中心应该怎么做，才能让用户感受到自己花的钱很值呢？
分享一个经典案例：《腾讯ISUX丨通过优化，我们将QQ会员付费用户数提高了5倍！》
设计前，先明确会员中心的设计目的是什么？
1. 会员尊享感（让用户感知到付费值得，花了钱就是爷，满足一部分用户的虚荣心）
2. 功能特权对比（通过特权的对比，让用户选择更高的等级会员）
3. 突显核心特权功能（突出核心功能，抓住用户诉求点，提升用户购买决策）
蓝蓝设计的小编 http://www.lanlanwork.com