嗨， 今天咱们来随便聊聊网站设计的事儿，不是啥专业教程，就是瞎说反正我知道多少就写多少，不对的地方大家别打我啊。现在网上东西太多了大家打开一个网站，要是页面挤得跟菜市场似的， 对，就这个意思。 估计马上就关掉了对吧？suo以啊， 网站设计要想好kan，就得学会用“留白”和“简约动化”，这两个词听着挺高级，其实说白了就是让页面别那么乱，动起来也别太吓人。
啥是留白啊？是不是就是多放点白色？
我跟你说 一开始我也以为留白就是页面背景用白色，ran后空一块地方啥也不放，后来才知道我想多了。留白不一定是白色， 也不一定是空的地方，它是指页面里各个元素之间的空隙，比如文字和文字之间、图片和图片之间、按钮和边框之间这些地方，留白就是让它们之间有点距离，别挤在一起。就像你写字，要是字和字挨得太近，根本kan不清，对吧？网页也是一样，东西堆一堆，用户dou不知道点哪里眼睛doukan花了肯定就不想kan了。suo以说留白真的hen重要，真的，特bie重要，我再说一遍，留白hen重要。
我们都... 那留白有啥用呢？其实用处大了去了。先说说 留白Neng让页面kan起来geng舒服，用户不会觉得压抑，就像你住的房子，要是家具堆得满满的，连下脚的地方dou没有，你住着Neng舒服吗？网页也是一样的道理，留白多一点，用户浏览的时候眼睛不累，心里也不烦，可Neng就多待一会儿。接下来 留白还Neng突出重点，你想让用户先kan到啥，就把那个东西周围多留点白，其他东西dou离远点，这样用户一眼就Nengkan到重点，不会迷路。
比如说你想让用户点那个“购买”按钮， 你就把按钮周围空出来别放其他乱七八糟的东西，用户一kan就知道要点这里。再说说 留白还Neng让页面显得高级，你kan那些大公司的网站，比如苹果啥的，页面dou特bie干净，空的地方多，kan起来就hen有档次不像那种小网站，啥dou往页面上堆，low爆了，行吧...。
留白咋用才不显得空呢？
可Neng有同学会问了留白这么多，会不会让页面kan起来空空的，啥也没有啊？这你就不懂了吧，留白不是空，是“呼吸感”，就像人一样，不Neng光长肉，得有骨头有空隙才行。用留白的时候， 你得先想清楚你的页面有啥内容，哪些是重要的，哪些是次要的，ran后给重要的内容多留点白，次要的内容就少留点，甚至不放。比如说你的网站是卖衣服的，那你肯定想让用户先kan到衣服图片，对吧，不忍直视。？
拜托大家... 那你就把图片周围多留点白，别放广告啊促销啊啥的，就只放图片，这样用户就Neng专心kan衣服了。ran后文字说明啥的，就可yi放在图片下面离图片远一点，别挤在一起。还有啊， 留白也不是越多越好，太多了用户会觉得你啥也没有，不知道你这网站是干嘛的，suo以得恰到好处，这个度就得你自己慢慢试了反正我试了好多次才找到点感觉。
简约动化又是啥？动起来就麻烦？
何必呢？ 说完留白，再来说说“简约动化”。动化就是动画， 就是页面上那些会动的东西，比如按钮hover的时候变色啊，图片轮播啊，菜单滑出来啊啥的。但现在hen多网站动化Zuo得太过了 一打开页面各种动画乱飞，闪得人眼晕，还有那种自动播放的音乐，烦死了对吧？suo以啊，动化一定要“简约”，别太多，也别太花哨，不然用户会直接关掉你的网站。简约动化就是用Zui简单的动效， 达到Zui好的效果，让用户觉得“哦，这个动化还挺有意思的”，而不是“这啥玩意儿啊，闪死我了”。
那简约动化有啥好处呢？先说说 它Neng引导用户的注意力，比如你想让用户往下kan，你可yi在页面底部加个箭头，让它轻轻动一下用户就知道这里还有东西，可yi点下去。huo者你想让用户注意到某个按钮， 你可yi在鼠标放上去的时候，让按钮稍微放大一点，huo者变个颜色，用户就知道这个按钮可yi点。接下来 简约动化Neng增加页面的趣味性，要是页面啥也不动，就跟死了一样，用户待着也没意思，适当的动化Neng让页面活起来让用户觉得你这个网站挺用心的，我悟了。。
你我共勉。 再说说 简约动化还Neng提升用户体验，比如用户点击一个按钮，动一下表示“我收到了你的指令”，用户就会觉得这个网站hen好用，hen responsive，对吧？就像你按电梯按钮， 按钮亮了你就知道电梯来了网站也是一样的道理，动化就是告诉用户“我知道你点了我正在处理”。
简约动化咋Zuo才不low呢？
Zuo简约动化的时候，你得记住一个原则：“少即是多”。意思就是动效越少越好，越简单越好。比如说你想Zuo一个图片轮播， 别搞那种花里胡哨的切换效果，就用Zui简单的淡入淡出，huo者左右滑动，用户一kan就懂，不会觉得麻烦。还有按钮的hover效果，别搞成那种旋转跳跃闭眼睛的，就稍微变个颜色，huo者放大一点点，就hen好了。 造起来。 还有啊， 动化的速度一定要慢，太快了用户会反应不过来太慢了用户会觉得卡，suo以速度要适中，大概0.3秒到0.5秒之间，这样用户kan着舒服。对了 动化不Neng自动播放太多，特bie是那种全屏的动效，用户一打开页面就各种动，会吓一跳，Zui好让用户自己触发，比如鼠标放上去再动，这样用户就有控制感，不会觉得烦。
留白和简约动化咋配合用呢？
留白和简约动化不是孤立的，得配合着用，才Neng达到Zui好的效果。比如说你在一个留白hen多的页面上， 加一个简约的动效，用户就会注意到这个动效，主要原因是周围空荡荡的，动效就hen突出。反过来 如guo你的页面东西hen多，留白hen少，那你Zui好就别加动化了不然用户会kan得眼花缭乱，不知道该kan哪里。还有啊， 动化的方向也要和留白的方向配合，比如你的页面是垂直布局的，留白主要在上下那你就可yi加一些上下滑动的动效，这样kan起来就hen协调。如guo你的页面是水平布局的，留白主要在左右，那你就可yi加一些左右滑动的动效，这样就不会显得突兀，就这样吧...。
比如说苹果官网，大家应该doukan过吧？他们家网站留白特bie多， 东西特bie少，ran后动化也hen简约，比如图片hover的时候会稍微放大一点，huo者切换产品的时候会有个淡入淡出的效果，kan起来特bie舒服，hen有高级感。还有无印良品的官网，几乎没啥动化，就是静静的，留白也hen多，整个网站kan起来特bie素雅，让人觉得hen安心。suo以说啊，留白和简约动化配合好了网站设计就Neng上一个档次用户也会geng喜欢你的网站。
举几个例子吧，kankan别人咋Zuo的
例子1：苹果官网
苹果官网真的是留白和简约动化的典范了。他们家首页从来不会堆一堆东西，就放一两款产品，周围全是留白，kan着特bie干净。ran后当你把鼠标放到产品图片上的时候， 图片会稍微放大一点，还有个阴影效果，让你觉得这个产品好像就在你面前一样，hen想摸一摸。切换产品的时候，也不会那种闪来闪去的，就是慢慢的淡入淡出，用户体验特bie好。suo以说苹果官网为啥那么多人喜欢，就是主要原因是他们把留白和简约动化用到了极致，真的值得我们好好学习，小丑竟是我自己。。
例子2：无印良品官网
无印良品官网又是另一种风格， 他们家几乎没有动化，整个网站就是安静素雅的。留白也hen多，图片和文字之间离得远远的，kan着特bie舒服。他们家的设计理念就是“无印”， 就是没有多余的东西，suo以网站也特bie简单，没有花哨的动效，没有复杂的布局， 物超所值。 就是Zui基本的产品展示，dan是就是这种简单，才显得特bie高级。suo以说啊， 不是suo有网站dou需要动化，如guo你的产品本身就hen简洁，那网站也可yiZuo得hen简单，留白多一点，动化少一点，反而geng有味道。
例子3：豆瓣
豆瓣虽然是个UGC平台， 内容特bie多，dan是他们的网站设计还是挺简约的，留白用得也不错。比如豆瓣的读书页面每本书的信息之间dou留了足够的空隙，不会挤在一起，用户kan起来hen轻松。还有豆瓣的电影页面海报和简介之间也有留白，不会让人觉得乱。动化方面 豆瓣也不多，就是一些基本的hover效果，比如鼠标放到书名上会变色，huo者评分会高亮，这些动化douhen简单，dan是hen实用，不会打扰用户。suo以说豆瓣的设计虽然不是那种极简的，dan是留白和简约动化还是用得挺不错的，用户体验也hen好。
我自己Zuo网站的时候踩过哪些坑？
我刚开始学Zuo网站的时候， 根本不知道啥是留白，啥是简约动化，就是觉得页面越热闹越好，suo以啥dou往页面上堆，图片、文字、按钮、广告，Neng放的全放上，后来啊页面挤得跟春运火车站似的，用户一打开就关掉了。后来我才知道我错了留白真的hen重要，不是空，是呼吸感。ran后我开始学留白， 一开始又留得太多了页面空得跟荒地一样，用户dou不知道我这网站是干嘛的， 我不敢苟同... 又改了好几次才找到点感觉。动化方面也是 一开始我Zuo动化Zuo得太过了啥dou动，按钮动、图片动、文字动，用户kan得眼花缭乱，后来我才明白，动化要简约，别太多，别太花哨，不然用户会烦。suo以说啊，Zuo网站设计真的得慢慢学，多kankan别人的好设计，多试试，才Neng找到适合自己的风格。
一下吧， 反正就是多留白，少动化
记住... 说了这么多，其实就是一句话：网站设计要想好kan，就得多留白，少动化，动化要简约。留白Neng让页面kan起来舒服，突出重点，显得高级；简约动化Neng引导用户，增加趣味性，提升体验。这两个东西配合好了网站设计就Neng上一个档次。当然了也不是suo有网站dou得这样，得kan你的产品是什么用户是谁，具体情况具体分析。反正我说的这些也不一定全对，大家就随便kankan，有啥不对的地方欢迎指正，我也在学习嘛。再说说祝大家douNengZuo出好kan的网站，加油！
哦对了 我上次吃了个苹果，特bie甜，苹果官网也挺好kan的，对，就是那个卖手机的，他们家网站留白用得特bie好，动化也简约，建议大家去kankan。还有无印良品，那个也挺好的，安静素雅，适合喜欢简单风格的人。网站设计这事儿，慢慢来别着急，多试试，总NengZuo好的。好了不说了我要去吃饭了拜拜！
留白真的hen重要，真的，我再说一遍，留白hen重要。简约动化也hen重要，别Zuo太花哨的。苹果官网，无印良品，豆瓣，这些dou是好例子，大家可yi去参考一下。Zuo网站的时候，别把页面堆得太满，留点空，让用户呼吸一下。动化也别太多，简单点，让用户觉得舒服。反正就是这些，我也不知道我说清楚了没有，反正我知道多少就写多少了。就这样吧，拜拜，精神内耗。！
