如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

文章来源：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界面设计来说要更加高昂。

Sketch

仍然每天都会用到，因为好用。在进入实际的VR原型阶段之前，Sketch是很完美的探索工具，在导出和插件方面也能帮你极大的提升工作效率。

Cinema 4D

我并不觉得C4D和Maya是竞争对手的关系，两个工具都很棒，各有所长。如果你没有3D方面的经验，学习曲线可能会有些陡峭。在我看来，C4D的界面、参数设定和构建方式更合理，能帮我做更多的快速迭代，所以很喜欢用。MoGraph模块不错，同时还有很多好用的插件供选择。C4D的社区很活跃，你可以找到不少高质量的学习资源。

Maya

Maya的优势和不足都很明显。一方面，它能满足3D艺术家的所有设计需求，太多游戏和电影都经由Maya设计制作，其强大而易用的功能可以应对繁重的工作负荷，渲染、建模、动画等等无所不通，同时还拥有很高的定制化能力，堪称业界典范。多数工作室需要根据自身的特定需求来组装定制化工具集，而Maya正是有能力将所有组件整合为一体的最佳平台。

但另一方面，要掌握如此强大且多样化的工具，你势必要投入大量的时间和精力，包括几周时间的摸索，几个月的学习以及日复一日年复一年的练习与实践。

Unity

一应俱全的原型工具，你可以一边在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%。

Unreal(虚幻)引擎

作为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 的形式千千万，但今天只讲这种选中后下面带横线的。（我们给这个横线起个名字叫做小短线吧，下文都这么叫了哈！）

今天的大纲如下：

• tab是用来干嘛的
• tab 的分类
• 几种常见的小短线
• 小短线的注意事项一
• 小短线的注意事项二

人机交互系统输出信息是有益的或者让人分心的，要有一条明确的分界线。

　　Business Insider旗下研究机构BI Intelligence最近做出评估预测，到2020年全球范围内销售的9200万辆汽车将使用与互联网连接的硬件设备。想象一下数以千万计的车辆应用系统每时每刻都在进行数据输入输出，将带来怎样的用户交互体验。共享数据的辅助下，行车安全性可以得到大幅度提升，提前的线路规划策略也能够降低燃油消耗量。系统是如何判断哪些数据对驾驶者或者车载系统本身有所帮助，那些相关性不大的数据是否会让行车驾驶更复杂、更麻烦、更危险?

最近在做产品的会员中心改版设计，有一些关于会员体系相关设计的思考及分析，纪录并分享一下。

大多数产品在满足用户的基础需求上，会推出付费会员功能，以满足用户更高需求的同时，达到商业层面的收支平衡。那么，会员中心应该怎么做，才能让用户感受到自己花的钱很值呢？

分享一个经典案例：《腾讯ISUX丨通过优化，我们将QQ会员付费用户数提高了5倍！》

设计前，先明确会员中心的设计目的是什么？

1. 会员尊享感（让用户感知到付费值得，花了钱就是爷，满足一部分用户的虚荣心）

2. 功能特权对比（通过特权的对比，让用户选择更高的等级会员）

3. 突显核心特权功能（突出核心功能，抓住用户诉求点，提升用户购买决策）

以前有很长一段时间，我一直搞不明白到底什么是栅格，听过很多解释之后还是云里雾里的，后来发现有很多小伙伴也都有这样的疑问，所以决定分享一下自己对栅格系统的理解。

首先我们必须要对栅格系统有一个基本的认知，我将这四个字拆分开成“栅格”和“系统”两个词来分别解释。

关于栅格

栅格是由网格演变而来的另一种说法，都是一个意思——格子，所以不要觉得栅格有多高深复杂，如果把他描述成格子，你还觉得它有多难理解吗？

其实我们都是栅格专家，因为在我们几岁的时候，就已经接触了很多栅格，比如方格本：

@喪心病狂十六夜貓 ：在过去的几年中我们时常会听见别人说“极简风格（英: Minimalism）”这个词，但这究竟是什么，我们又该怎么使用呢？这一次，就让我们一起来看看极简风格具体的使用方法与参考案例吧。

极简风格，就是将设计省略到最小限度，只留下真正引人注意的内容，这样一种表现风格。通过极简风格，可以将设计的意图与目的更准确的传达出来。

极简风格看起来很简单，但完成作品也是需要大量的练习和长时间的制作的。

现如今的设计师大都是多面手，虽然各有擅长，但是通常会涉足不同的设计领域。网页设计师偶尔也会设计几个宣传用的折页，UI设计师偶尔做几张海报。

虽然绝大多数的设计项目都遵循着相同的设计理论，并且都要做的足够好看，但是不同的设计产品的成败，决定性的因素并不相同。广告设计就是如此。通常广告位所预留的空间就不大，容错率并不高，而借助这小小的一块地方，你只有一次机会去打动你的目标用户。那么你要如何地设计出有用的广告呢？今天的文章，为你分享5个可供你参考的思路。

设计重要，但是出发点和想法更重要，有的时候，好的思路是成功的一半。