UI：如何做好优秀的网页设计，新手必须学习的五个要素《硬核详解》

▲ 点击关注“火星在线学校”，关注专业设计学习平台

本期内容：3828字

预计阅读时间：5分23秒

前方高能预警！ ！ ！ （有小姐姐吗？来看看，没有！我想看优秀的网页~）

先来欣赏一波2019年流行的网页设计吧~

【图1】

【图2】

【图3】

【图4】

【图5】

【图6】

如何创建如此漂亮的网页设计？ 这是刚接触网页设计的孩子们最关心的问题，但在此之前，我们首先要说一下孩子们经常犯的设计原理错误！

新手常见的五个误解：

1、布局凭感觉

2. 多种颜色

3.根据自己的喜好搭配图片

4.内容层次规范不明确

5、信息逻辑结构错误

以上是刚刚入门的新手设计师很容易陷入的误区。 孩子们，检查一下你设计的网页是否存在这5大问题？ 针对这5种情况，一个优秀的页面设计应该具备以下5个要素：

1.合理的页面布局

2、和谐的色彩搭配

3.选择合适的图片

4.注重细节

5、信息传达准确

1.合理的页面布局：

这里我们选取网页的各个部分作为例子（举一例即可），因为现在的设计都是以用户为先（毕竟我们是衣食父母），所以我们注重的是用户体验，说明必须考虑到用户的视觉心理感受。 我总结了网页设计和浏览舒适度的六个布局原则。 它们按顺序环环相扣：

【对齐→对比→重复→亲密→平衡→逻辑]，希望大家用设计原理来分析各种作品（学以致用）~

我们来仔细看看“六大排版原则”和“没有原则的网页”在实际应用中的区别：

1.导航比较好坏案例：

【图7】

问题是：没有对齐。

如果你想让图片整齐有序，所有元素都必须对齐。 检查元素的对齐情况是必须养成的好习惯，因为如果你没有下班后检查的习惯，你经常会遇到设计总监对你说：“这个！那里！还有这里，都是1个像素不同！请重新调整并发送给我”，然后一遍又一遍地继续调整N稿。 。

确实不能有哪怕1个像素的偏差。 设计师识别像素偏差的能力来之不易。 如果看久了，就会养成传说中的轮回眼（反复看……）！ 其实只是像素眼而已~

2、文案好坏对比：

【图8】

问题是：没有可比性。

从文案中我们可以发现，不进行比较，就无法清晰区分信息的层次。 如果这是一个商业项目，那么这是一个非常严重的问题，因为这会给用户带来不便。 如果体验不好，他们就会不喜欢甚至抱怨，这会给公司带来负面影响。 作为设计师，我们应该为用户考虑“用户体验”。 最大限度降低学习成本，提供便捷舒适的阅读体验，为公司进步而奋斗！

3.好坏案例对比标题：

【图9】

问题是：不团结。

总体来说，不同的表现形式给人的感觉有很大不同，那就是不协调。 相反，同一形式带来风格的统一，给人一种有序、一致、和谐的感觉，没有任何不一致的感觉。 例如，当用户看到相同的标题时，他们会在潜意识中自动将其识别为一致的信息，但不同的元素需要用户思考差异。 增加学习成本会浪费用户的时间。 现在我们正处在一个信息爆炸的时代，人们最喜欢的就是快速浏览！

4. 好坏案例比较部分：

【图10】

问题是：太近了。

控制内容元素之间的间距也称为“留白艺术”。 通俗地说，就是亲密，就是有关系的亲戚关系更近，无关的亲戚关系更远！

留白的多少决定了画面的感觉。 是否过于拥挤和集中，导致画面其他部分相对空旷？ 还是太松了，让画面看起来太花哨了？ 相关元素的留白量直接决定了画面的层次感。 是否安排有序、主次分明，一目了然。

5. 比较好坏案例的要素：

【图11】

问题是：重心倾斜。

看起来舒服与否，其实会受到人的视觉平衡感的影响。 头重脚轻、左右倾斜，都给人一种非常规的不适感。 用户可能不知道该表达有什么问题卡通人物，但他或她知道它看起来不对就足够了。 设计师需要具备这种微妙的能力“平衡感”网页设计网页设计，才能让画面稳定和谐（通常是通过缩小画面、眯眼、恩恩……精神上上下左右移动，BABA？大招！居中！没问题嗯~画面确实平衡多了）

6.好坏案例的比较顺序：

【图12】

问题是：逻辑错误。

最后，检查是否符合“逻辑”卡通人物，是页面布局合理的关键步骤。 说白了就是“优先”。 正常的信息传递都有一个浏览顺序，作为设计师我们必须期望用户能够得到准确、快速、清晰的信息，同时强调公司需要我们传达的信息内容。

例如，横幅屏幕应允许用户首先看到主标题，然后是副标题，最后是强调“了解更多”的按钮； 目的是让用户快速浏览，最后提示按钮刺激直接点击。 该公司最关心的是点击率。 由此，您拥有的积分越多，您获得的奖励就越多。

2、和谐的色彩搭配：

一个页面是否顺眼，第一眼就受到它的颜色的影响。 如果想要和谐的色彩，满足页面的需要，就需要合理的“配色策略”，页面的配色方法有很多种。 工具有很多，这里给大家介绍一个实用又好用的配色策略：明确目标——确定主色——精简层次——选择丰富的调色板——提升品质感

此方法来自网易UEDC – 分享者@Jady_13

【图13】

正如文章开头说的好：

配色没有所谓的固定公式，生搬硬套配色理论并不能真正解决问题。 本文将带您从配色的策略角度深度剖析配色的正确打开方式，让您从本质上解决不同场景下的配色问题，通过配色提升整体设计品质。