网页设计 再谈简洁设计
1.设置每页一个目标

简洁设计的开始始于项目的目标和网站每个页面的特定目标。每个页面都应引导用户执行一个操作,不包括导航和页脚。
这可以是点击链接,在表单中输入信息,观看视频或玩游戏。但每个页面都应关注单个用户操作或转换。
太多的事情可能会使用户不堪重负。他们可能会忽略应该完成哪些行动,并可能做出不太理想的选择。规划设计,以便每个页面引导用户实现单一目标。滚动上方和同一页面上滚动下方的每个可操作按钮都应该执行相同的操作。这种一致性有助于用户了解他们在您网站上的原因以及他们应该做的事情; 这些选择的简单性使设计变得简单而有吸引力。
2.坚持两种字体

有很多设计指南为项目推荐三种字体。您可以使用两个强大的类型系列来简化更多功能。
寻找一个包含多个权重的类型系列,在常规和粗体或黑色选项之间有足够的对比度。要想获得更多天赋,请选择包含一些替代字符的显示选项,您可以在超大标题中使用这些字符。
然后,您所要做的就是通过体字和显示字体进行混合和匹配,以获得整个设计的大量字体组合。如果您选择了具有特定用途的更多选项以用于某些权重或样式,请使用两种类型系列。
您会发现这可以帮助您创建易读且易于使用的排版调色板,易于管理且具有视觉一致性。
3.使用一致对齐

左,中,甚至右 - 无论你喜欢哪种对齐方式,都要在整个设计中坚持下去。这包括对齐类似的项目,例如文本框和不相似但在分组中组合在一起的元素。
Adaptable通过主页滑块上的文本做得很好。尽管图像上的文本行数不同,但每个标题都与“号召性用语”按钮对齐。元素之间的间距也是一致的。
更重要的是,这种一致的对齐在卷轴上与其他标题和CTA对一起进行。
对齐匹配滑块的流动,滑块也沿互补方向移动。左侧和中间对齐是文本元素中最常用的选项,因为它们是最易读的。使用较长的文本时,左对齐是首选选项。
4.建立层次结构

用户不应该考虑要查看什么或如何跨设计。即使是最简单的视觉合成也应该具有不同的层次结构。
它始于主导视觉。它可以是图像或视频或文本显示或其他任何可以给人留下第一印象的东西。
然后应该有某种文本告诉用户设计和网站试图沟通的内容。这通常采用简单标题的形式,与主导视觉效果一起使用。
第三个是用户完成的文本或操作的第二位。最终的视觉元素是导航菜单。用户希望找到所有这些元素,并且训练眼睛基本按此顺序移动元素。通过这种方式进行设计,使它们变得容易。
5.赋予元素充足的空间

如果您现在还不知道,请将其提交到记忆中:白色空间是您的朋友。
为设计中的每个元素提供充足的空间。空间将有助于引起对单个元素的注意,占据“空间”,因此您不会想要使画布混乱并帮助创建具有焦点的整体设计。
充分利用空间的诀窍是一致性。设置围绕单个元素或适合文本行的空间量的规则。如果设计最终看起来太贫瘠,你可能需要稍微拉回间距。当您打开设计时,您会知道间距是正确的,然后直接前往您希望用户首先看到的地方。(不确定它们是什么?回到第4期 - 建立层次结构。)
6. Amp Up对比度

高对比度设计元素 - 从颜色选择到元素大小 - 可以为项目提供所需的适当视觉效果,即使在最小的框架中也是如此。
如果想要一个时髦的选择,尝试一个明亮的对比色调,以吸引用户的注意力。大胆的色彩将使简单的设计感觉更加复杂和有趣,黑色和白色选项。为了充分利用对比色,请选择具有相似饱和度的色轮上相对位置的色调。如果您的选择太多,请尝试其他基于色轮的配对。(你甚至可能会发现一个意想不到的新宠,例如上面的紫色和蓝绿色组合。)
7.使用一致的图标和元素

设计的一致性是杀手设计最好(也是最差)的秘密之一。由于设计项目中充斥着多种按钮样式或社交媒体图标,而这些图标与网站的其他图标不匹配,因此这种情况经常被遗忘。
用户界面元素不应该是事后的想法。
创建图标和用户界面元素集以及规则并以相同方式在整个项目中使用它们非常重要。(如果您不想从头开始创建这些,您甚至可以购买或下载图标字体或用户界面元素套件。)
选择元素的颜色,对每个元素使用相同的悬停操作或效果(一个用于可点击的元素,另一个用于非元素的元素)和基于用法的大小元素。(对于更加图形化的元素,同时具有图标大小和超大选项是可以接受的。)
Praticca Vending Machines使用超大图标来提示用户,因为有更多信息。A +位于彩色图标内。除了颜色外,所有三个图标都是相同的。它们在悬停时都做同样的事情,当用户点击时它们都以相同的方式行事。整个站点使用相同的图标来启动新的内容并帮助用户扫描副本。
结论
简单的设计不必完全是最小的或缺乏有趣的元素或用户界面的好东西。简单的设计是一种高度可用且直观的设计,允许用户毫无疑问或复杂的指令进行操作。
虽然有更复杂的网站或用户互动的地方,但大多数网站设计都可以从KISS方法中受益。不要过度思考,用户也不必这样做。
意派Coolsite360交互式线网页编辑系统
“创意不该受技术束缚,交互可以变得简单有趣”
