【前端设计】前端设计原则，布局规范_前端如何做详细设计

内容总结于 elementUI,iview，bootStrap中文网，互联网

前端设计原则

一致性 Consistency

 

与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；

在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。

反馈 Feedback

 

控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；

页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。

效率 Efficiency

 

简化流程：设计简洁直观的操作流程；

清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；

帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。

可控 Controllability

 

用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；

结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。

 

设计原则

以下是对基本设计原则的概述，每一个优秀的设计中都应用了这些设计原则，它们相互关联，只应用某一个原则的情况很少。（出自《写给大家看的设计书》）

对比（Contrast） #

对比的基本思想是，要避免页面上的元素太过相似。如果元素（字体、颜色、大小、线宽、形状、空间等）不相同，那就干脆让它们截然不同。要让页面引人注意，对比通常是最重要的一个因素，正是它能使读者首先看这个页面。

重复（Repetition） #

让设计中的视觉要素在整个作品中重复出现。可以重复颜色、形状、材质、空间关系、线宽、字体、大小和图片，等等。这样一来，既能增加条理性，还可以加强统一性。

对齐（Alignment） #

任何东西都不能在页面上随意安放。每个元素都应当与页面上的另一个元素有某种视觉联系。这样能建立一种清晰、精巧而且清爽的外观。

亲密性（Proximity） #

彼此相关的项应当靠近，归组在一起。如果多个项相互之间存在很近的亲密性，它们就会成为一个视觉单元，而不是多个孤立的元素。这有助于组织信息，减少混乱，为读者提供清晰的结构。

导航设计原则

导航可以解决用户在访问页面时：在哪里，去哪里，怎样去的问题。一般导航会有「侧栏导航」和「顶部导航」2 种类型。

 

选择合适的导航

 

选择合适的导航可以让用户在产品的使用过程中非常流畅，相反若是不合适就会引起用户操作不适（方向不明确），以下是「侧栏导航」和 「顶部导航」的区别。

 

侧栏导航

可将导航栏固定在左侧，提高导航可见性，方便页面之间切换；顶部可放置常用工具，如搜索条、帮助按钮、通知按钮等。适用于中后台的管理型、工具型网站。

一级类目

一级类目

适用于结构简单的网站：只有一级页面时，不需要使用面包屑。

二级类目

二级类目

侧栏中最多可显示两级导航；当使用二级导航时，我们建议搭配使用面包屑，方便用户定位自己的位置和快速返回。

 

三级类目

三级类目

适用于较复杂的工具型后台，左侧栏为一级导航，中间栏可显示其对应的二级导航，也可放置其他的工具型选项。

顶部导航

 

顺应了从上至下的正常浏览顺序，方便浏览信息；顶部宽度限制了导航的数量和文本长度。

 

 

适用于导航较少，页面篇幅较长的网站。

Container 布局容器

用于布局的容器组件，方便快速搭建页面的基本结构：

外层容器

顶栏容器。

侧边栏容器。

主要区域容器。

底栏容器。

常见页面布局

布局和导航是产品的骨架，是页面的重要构成模式之一，是作为后续展开页面设计的基础，可以为产品奠定交互和视觉风格。

几种布局的概念

1、静态布局（Static Layout）

 

即传统Web设计，对于PC设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分；

意思就是不管浏览器尺寸具体是多少，网页布局就按照当时写代码的布局来布置；

对于移动设备，单独设计一个布局，使用不同的域名如wap.或m.。

 

2、弹性布局

 

弹性布局是CSS3引入的强大的布局方式，用来替代以前Web开发人员使用的一些复杂而易错hacks方法（如使用float进行类似流式布局）。

其中flex-flow是flex-direction和flex-wrap属性的简写方式，语法如下：

flex-flow: <flex-direction> || <flex-wrap>

flex-direction: row（初始值） | row-reverse | column | column-reverse

flex-wrap: nowrap（初始值） | wrap | wrap-reverse

flex-direction定义了弹性项目在弹性容器中的放置方向，默认是row，即行内方向（一般而言是由左往右，但注意这个和书写模式有关）。

flex-wrap定义是否需要拆行以使得弹性项目能被容器包含。*-reverse代表相反的方向。

两者结合起来即flex-flow属性就确定了弹性容器在main axis和cross axis两个方向上的显示方式，下面的例子很直观的说明了各个属性值的区别：

3、自适应布局（Adaptive Layout）

 

自适应布局（Adaptive）的特点是分别为不同的屏幕分辨率定义布局。布局切换时页面元素发生改变，但在每个布局中，页面元素不随窗口大小的调整发生变化。

你可以把自适应布局看作是静态布局的一个系列。

就是说你看到的页面，里面元素的位置会变化而大小不会变化；

4、流式布局（Liquid Layout）

 

流式布局（Liquid）的特点（也叫”Fluid”) 是页面元素的宽度按照屏幕进行适配调整，主要的问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示

。

你看到的页面，元素的大小会变化而位置不会变化——这就导致如果屏幕太大或者太小都会导致元素无法正常显示。

5、响应式布局（Responsive Layout）

参考栅格系统

分别为不同的屏幕分辨率定义布局，同时，在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。

可以把响应式布局看作是流式布局和自适应布局设计理念的融合。

每个屏幕分辨率下面会有一个布局样式，同时位置会变而且大小也会变。

 

在线可视化布局系统

http://www.bootcss.com/p/layoutit/#