设计规范详解 (二）！！！

admin

现实生活中的物体不可完全重叠，当光打过来时，每个物体都会产生阴影。这是我们理解物体的层叠关系的重要依据。依据现实中的这一行为，我们把阴影规范挪到屏幕世界中，使得用户更容易理解我们的系统。阴影规范提供给了我们另一个表达元素区别的维度，不同的阴影清楚地传达了不同的交互状态。某一对象在屏幕中的高度视觉表现为其阴影，阴影越大，高度越高。但是生活中真实的阴影错综复杂，我们不可能也没必要完全复刻，我们只需要能够表达出元素层级即可。与按钮相同，我们将阴影分为三个等级，分别为，S、M、L。

S：突出组件悬停效果，表示可供性。对于这个数据概览卡片来说，鼠标移入移出时阴影的显示与隐藏提供了一个交互可能性，表明它是可以点击交互的。

M：给下拉列表，气泡提示等使用的阴影。因为这些元素是与由底层元素展开而来的，但又不属于底层元素，所以将中等层级的阴影给了这些元素。

L：模态组件阴影。例如弹窗。当弹窗出现时，弹窗位于绝对的最顶层，所以阴影最大。

圆角是用一段与图形两边相切的圆弧替换原来的直角，圆角的大小用圆弧的半径R表示。在界面中运用圆角主要有以下两个好处：

• 亲和感。我们倾向于“避免尖锐的边缘，因为在自然界中它们可能会构成威胁”。运用圆角矩形能给我们带来亲和感，圆角越大，亲和感越高。

• 辨识度。相对于没有圆角，人可以更快的辨识圆角矩形。

  
  

对于组件库来说，我们可以把组件比喻为积木，而布局则是把积木搭建为各种不同成品的图纸。

6.1 盒子模型
6.1.1 设计师为什么需要了解盒子模型

在介绍布局之前，先介绍一下盒子模型。虽然盒子模型是前端开发中的一个概念，但是了解一些前端知识对我们设计的落地以及与前端的沟通上大有裨益。我们可以带着盒子模型的思维去做设计，这样开发人员拿到设计稿后，更容易了解我们的布局逻辑，降低沟通成本，提高落地率。

6.1.2 盒子模型是什么

盒子（box）模型是开发中经常用到的CSS模型，我们日常所见到的界面都是由一个一个的盒子拼接而成的。打开安卓手机的开发者选项中的显示布局边界，便可以看到手机上的各个盒子的排列；在电脑浏览器打开检查视图，也可以看到每个元素对应的盒子。我们可以理解为开发同事都是先画一个一个的盒子，然后在盒子里填充，也与我们提供的矩形切图相对应。并且盒子间存在嵌套情况，几个小盒子可以作为一个大盒子的内容。

以我们的生活来举例的话，例如我们去买月饼，大盒子里装了四个小盒子，每个小盒子里是一个月饼。

6.1.3 设计师如何利用盒子模型

了解了盒子模型后，我们在设计时，该如何利用呢？

做设计时，对任何元素都尽量用一个矩形给他封装，这样子前端在定位元素和确定间距时可完美实现设计稿的内容。

而前段时间figma更新的auto layout 功能与盒子模型基本完美对应。我们在设计时可以使用这个让开发更容易get我们的设计稿，减少沟通时间。

以标签页为例，我们设计时，不只是画个横线与文字就行了，这样开发无法理解到设计稿，后面还会继续找我们询问触控热区。

6.2 导航

导航将网站的信息架构分组归类展示给用户，方便用户到达想去的界面。

6.2.1 顶部导航

• 优点:

  符合人眼浏览网页的视觉动线，给用户提供更沉浸式的浏览体验。

• 缺点:

  扩展性差:由于顶部空间有限，无法承载太多的菜单项，另外由于水平菜单的特性决定了无法承载太多的层级，当扩展至三个或四个层级时，顶部导航的易用性极差。

  通用性较差:同样受空间的限制，菜单项字数被严格限制。

  
  

适用产品：

整体结构无论是广度还是深度均较简单且之后不会扩展很多功能的产品。

6.2.2 侧边导航

• 优点:

  扩展性好:侧边导航是以树形控件的方式来表示的，相对于顶部导航，无论是数量和层级，扩展性均较好。

  方便寻找:由于纵向浏览无需把每个单个菜单完整浏览，相对水平菜单，定位更快。

• 缺点:

  沉浸感低:由于用户在浏览内容的过程中，不可避免会被左侧常驻的导航栏打断视线流,阅读沉浸感较低。

• 适用产品：

  目前结构不是非常复杂但之后会迭代增加很多功能的产品。

  
  

6.2.3 混合导航

• 优点:

  扩展性好:由于增加了-个顶部的一级菜单，扩展性是三者中最好的。

• 缺点:

  交互路径长:除了和侧边导航-样存在沉浸感低的问题，由于每个菜单项都需要点击顶部和侧边两次,操作效率低。

  占用空间大:在B端产品中，界面空间寸土寸金，混合导航常驻的两个导航占用了较多的空间。

• 适用产品：

  目前结构已经非常复杂的庞大产品。

  
  

6.3 栅格
6.3.1 栅格介绍

6.3.1.1 来源

栅格系统原本来源于平面设计，早在20世纪初，德国、荷兰、瑞士等国的平面设计师们发现通过维持视觉秩序,从而使版面能更加清晰有效地传递信息，二战后这种理念在瑞士得到了良好的发展。有兴趣的小伙伴可以去看下由瑞士设计师大师Josef Miller—Brockmann (约瑟夫.米勒-布罗克曼)所著的《平面设计中的网格系统》一书。

6.3.1.2 优势

• 高效：将布局标准化，可减少设计决策的时间，让设计师专注于内容.上的设计呈现。

• 响应式布局:由于web端尺寸多样，使用栅格系统可以做到自适应布局(在面对多个分辨率的系统时，无需设计多套方案，仅需设计一套来适配即可)

• 美观:提高内容的规律性，让设计更有秩序和节奏感，赋予界面数学逻辑美感，提高用户的阅读和浏览效率,为用户提供更好的体验。

• 协作:由于栅格系统的可复用性，多个设计师合作时，可以共用-套栅格系统，提升整体布局的统-性。 同时也避免了设计与开发的反复确认的情况，使得部门内部与部门间沟通更顺畅。

  
  

6.3.3 组成与原理

栅格系统包括页边距，列和水槽。

页边距:指内容区与页面的边距。

列和槽:列是承载内容的容器，水槽是两个列(即内容)之间的间距。在前端视角中列宽是根据百分比而不是固定值定义的。通常说的栅格数就指的列数。水槽越宽，页面留白越多，呼吸感越强。

自适应原理:在网页应用的设计中较为常见的一种响应方式，当屏幕宽度改变时，页边距和水槽宽不变，列宽自适应。

计算公式:以24栅格(即有24列)为例，页面自适应部分总宽度: 24*列宽 +23*水槽宽+2*页边距。

6.4 间距

在设计间距系统中，我们一般会基于8点网格系统和亲密性原理规定几个典型值。例如4,8,(12,)16,24,32……。遇到间距时在这些值中选取合适的即可。另外一般我们会使得大模块的纵向间距与栅格系统中的水槽大小相同。

Z炒米粉