您当前位置:图趣网(Tuquu) >> 网页设计教程 >> 设计理论 >> 浏览设计教程

如何创建一个悦目且简约的网页

   网页设计并不只是设计漂亮、体验良好就够了,想要用户难以忘却,你还要进行更加深入的思考,更加走心的设计。

  设计保持简约,傻瓜式操作,这个概念可以追溯到1960年美国海军实施KISS原则,该原则认为,假如大多数体系是简单而不是复杂的,则最好运行。在网站建设工作中,几乎任何设计项目也是如此。

  大多数平面设计师在职业生涯早期就了解KISS。那么你该怎么做呢?创建一个简单的设计可能比你想象的有点复杂。这里有七个规则或允许以给你带来一些设计上面的灵感,帮助你梳理清所有的紊乱,创建一个悦目且简约的网页设计。

  1.每页仅设置一个目标

如何创建一个悦目且简约的网页 三联

  简约设计的开始从项目的团体目标和网站的每个页面的详细目标开始。每个页面应该指导用户到一个可实行的操作,并排除导航和页脚的干扰。

  体例可以是通过点击链接、在表单中输入信息、观看视频或玩游戏中的任何内容。但每个页面都应该关注单个用户的操作和转换。

  我们如今在页面上设置的大多元素很容易给用户造成欣赏压力。这使得用户可能忽视应该完成什么动作,并可能做出不那么理想的选择。规划设计,使每个页面都指导用户达到一个目标。每个可操作的按钮应该保持它们在页面上充足夺目,并且在其他页面上也应保持同样的位置和作用。这种同等性可以帮助用户了解他们为什么在您的网站上,以及他们应该做什么;这些简单的设计是的用户更容易参与到设计中,并与之互动。

  2.坚持仅使用两种字系列

  有许多的设计指引保举在一个项目中可以使用三种不同的字体。对于这个建议,我觉得你完全可以简化它们,试试更多的只使用两个关联性强的字体家族。

  试试找一个权重比较高的字体家族,确保能够在常规和粗体以及黑色选项之间存在比较多的对比度。为了保证在少用字体的情况下仍能使页面上的字体转变多样一些,在选择的时候要尽量考虑那些在统一系列下有较多分支的字体。

  确定所用字体以后,接下来你必要做的是对整站的主字体和表现字体进行混合搭配,以获得整个设计的大量字体组合。使用两个类型系列,就像您为特定权重或样式选择了具有特定用途的更多选项一样。

  你会发现,这可以帮助你创建一个高度可读性和易于使用的排版,它易于管理并且能够保持视觉同等性。

  3.在排版对齐上保持同等

  左对齐,居中对齐,甚至是右对齐,无论你喜好什么类型的对齐样式,你要做的就是在整个的设计中坚持它的同等性。这包括对齐类似的项目,例如文本框和不相似但在分组中适配在一路的元素。

  Adaptable在主页滑块上的笔墨上做了大量的工作。尽管图片上的笔墨行数不同,但每个题目都与号召性用语按钮对齐。元素之间的间距也是同等的。

  更紧张的是,这种同等的对齐在页面上与其他题目和CTA对进行。

  对准匹配滑块的流动,其也沿互补方向移动。对于文本元素,左对齐和中间对齐是最常见的选项,由于它们是最可读的。 使用较长的文本时,左对齐是首选选项。

  4.建立条理

  在欣赏一个网页设计的时候,对于上面的元素或者说信息,用户不应该考虑要首先查看什么内容或如何在设计中遴选信息。即使是最简单的视觉组合也应该有不同的条理结构来指导用户分开主次。

  用户的视觉或者细致力应该从一个主导的视觉开始。它可以是图像或视频或文本表现或任何其他将产生第一印象的元素。

  然后应该有一些文本作为辅助,告诉用户设计和网站正在尝试与他们沟通。这通常是通过一个简单的主导视觉题目来实现的。

  最后一步是次要文本或动作的设计,这保证了用户能流畅的完成一系列的指导动作。最后的视觉元素是导航菜单。用户期望能找到所有这些元素,通过日常的欣赏举动,他们的眼睛已经基本上风俗以这个顺序移动来审查各个元素。通过以这种体例设计,使他们容易找到他们想要的内容。

  5.给元素充足的空间

  假如你如今不知道,赶快记住这一条:空白的空间对设计师下世是至关紧张的。

  通过给予设计中的每一个元素充足的空间,将有助于引起用户对单个元素的细致,并帮助创建一个具有焦点的团体设计。

  使用空间的窍门是保持同等性。设置围绕单个元素或适合文本行之间的空间大小的规则。假如最终的设计看起来总是有那么一路不近合理的地方,你可能必要做的就只是增长一点间距而已。你会知道什么样的间距是合理的,当你想象你作为用户进来页面的第一眼是什么的时候。(照旧不知道精确的间距是什么?试试回到第4点 - 建立条理看看。)

  6.放大对比度

  高对比度的设计元素——从颜色选择到元素的尺寸,即使在最小的框架中,也可以为项目提供所需的视觉结果。

  对于一个已成趋势的流行选择来说,尝试一个通亮的对比色调来捉住用户的细致力。勇敢的颜色将使一个简单的设计感觉更有深度和风趣。为了充分行使对比色,选择在色轮上相对位置的色调具有类似饱和度的颜色。假如对你偏爱的颜色来说这个选项太多了,尝试其他色轮。(你可能会发现一个意想不到的新收货,例如上面的紫色和蓝绿色组合。)

  7.使用同等的图标和元素

  设计的同等性是所谓的“秒杀”设计最好的(大概也是最坏的)隐秘武器之一。这是在做网站设计时最经常被忘记的“杀手锏”之一,由于多数的网页设计项目总是在各个位置散落着很多不是很匹配网页设计其他部分的按钮样式,或这社交媒体的图标。

  有一点必要我们在设计之初就应该考虑好的:用户界面元素不应该是事后考虑。

  所以,对于创建一个图标和用户界面元素集和规则,并以雷同的体例在整个项目中使用它们就显得很紧张了。(假如你不想从头开始创建这些元素,你甚至可以购买或下载图标字体或用户界面元素的工具包。)

  在网站制作的时候,为元素选择颜色的环节,你要使每个元素所使用的悬停操作或结果都保持同等(一个用于可单击的元素,另一个用于不可用的元素)和基于同一用法的尺寸元素。(对于更多图形的元素,可以同时拥有图标大小和过大的选项)。

  Praticca主动售货机使用超大的图标来提醒用户这里还有有更多的信息。A+位于彩色图标内。除了颜色,所有三个图标是雷同的。当用户点击时,他们都做同样的事情,即悬停和所有的举动都保持雷同的体例。 在整个网站中使用雷同的图标以启动新位内容,并帮助用户扫描副本。

  总结

  在网站制作的过程中,一个简单的设计不必仅限于最小或缺乏风趣元素或用户界面的东西。简单的设计是高度可用以及直观的,不许可用户在欣赏过程中对页面上的设计存在太多不需要的疑问或复杂的指令。

[教程作者:佚名]
免责声明:本站文章系图趣网整理发布,如需转载,请注明出处,素材资料仅供个人学习与参考,请勿用于商业用途!
本文地址:http://www.tuquu.com/tutorial/di21.html
怎么留白才能合理解析简约设计风格
简约设计风格解析
图趣网微信
建议反馈
×