前言

我们知在道软件使用过程中，高并发、高可用、数据稳定性和数据安全性等能力保证了软件的可靠运行，这些由后端开发的同学来提供保障，而对于前端开发的同学而言，软件的页面呈现、交互体验和性能的优化这些能力也保障了软件产品的推广和更好的用户粘性。

                                              @写给大家看的设计书

设计原则

基本有四大设计原则，分别为亲密性(Proximity)、对齐(Alignment)、重复(Repetition)、对比(Contrast), 在实际使用中这四个原则通常是相互关联的，设计web 页面的时候通常需要考虑运用这四个原则。

作用原则彼此相关的的项或元素应该靠近、归组在一块，形成视觉单元，提供清晰的信息结构。

想象场景 一个文本页面中单词、短语和图片四处分布，角落的位置也布满各种文字信息，好像每一处空间都得到的有效利用，没有任何留白。结果是过于发散的信息用户难于发现它们的联系。

使用目的 为了实现信息的组织关联，只需简单地将相关元素分在一组建立更近的亲密性，就能实现有条理和有组织的布局结构。

如何实现 分析页面的结构，眼睛扫描统计页面上第一眼可以区别的元素块，看看哪些孤立的元素可以归组建立更亲密的联系。

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

想象场景 军训或者阅兵的时候我们看到的是整整齐齐、行列震撼的景象，这样整齐的场景会让人感到舒适，而蜂拥而至、杂乱无章的人群则让人感到不安。 web 页面也是如此，对齐让人有阅读信息的基线，给人舒适感。

使用目的 使页面统一而且有条理。其效果类似于把房间里杂乱的衣物整理整齐放进衣柜里，简而言之，就像把同类物品放置在盒子里，对齐放置。

如何实现 要特别注意元素放在那里。应当总能在页面上找出与之对齐的元素，尽管这两个对象的物理位置可能有点有点远。

作用原则设计中视觉要素在整个作品中重复出现，可重复的内容包括颜色、形状、材质、空间关系、线宽、字体、大小、图片等等，目的是加强条理性和提统一性。

想象场景 一个墙壁上使用不同大小、形状的瓷砖进行装修，这种情况下不仅消耗更多的时间在拼凑大小不一的的瓷砖、而且浪费大量的人力，如果从规格统一的瓷砖进行装修，从速度、效率、美观上就都有优越的性价比了。

使用目的 重复的目的就是统一，并增强视觉效果。不用低估页面视觉效果的威力，如果作品看起来很有趣，它往往也更容易阅读。

如何实现 重复可以认为是保持一致性，需要把现有的一致性更向前推进一步，但也要避免太多的重复一个元素，例如全部元素的重复，全部字体大小的重复，重复重要程度一样的信息，其他的需要结合对比。

作用原则对比的思想是避免页面上的元素太过于相似。有个定律是，如果元素(字体、颜色、大小、线宽、空间大小等)不相同，那就干脆让它们截然不同。对比的作用是区别关注的，使得重要的信息能够一眼就被注意到。

想象场景 一个演出，如果主角和配角的出场效果和服装都是一样的是不是就体现不出主角的魅力了，甚至观众都知道谁主谁次。 web页面中亦是如此，重要的信息需要对比呈现，体现出主次关系，用户一眼看出最重要的信息。

使用目的 对比有两个目的，一是、增强页面的效果，二是有利于信息的组织。

如何实现 可以通过字体选择、线宽、原色、现状、大小、空间等来增加对比，要点是对比要强烈。

对比体现信息的不同关系

设计的时候遵循这四个原则，不要畏畏缩缩，不用担心页面中有留白，不用担心设计的内容是不对称的，不用担心把单词设置的过大或者过小，只要合理。

学习参考优雅的设计产品，潜移默化的灌输思想，提高视觉敏感度。