作者:赢之乐 时间:2020-02-09
您是否想过如何设计网页布局?
设计一个将美学与信息传递相结合的网页,需要艺术与科学的完美融合。
秘诀是在坚持经过验证的结构的同时给自己一些创作自由。
听起来不可能吗?
Don \\ u0027t不必担心,这是构建页面布局的快速指南,该页面布局将提高任何商业网站的转化率。
步骤1:首先考虑用户体验
甚至在开始草绘构思之前,进行研究并考虑首页的结构非常重要。
进行研究时,请确保您专注于潜在客户的期望。
毕竟,要在不了解目标用户的期望的情况下,设计一个能够提供出色用户体验的商业网站几乎是不可能的。
无法提供出色用户的网站体验吸引更多流量的机会要少得多。毕竟,UX用户体验与SEO息息相关。
一些使用不良UX的用户仍然会吸引大量用户,例如58城市。
但是,具有更好的用户体验的公司(例如Didi)拥有重塑行业的更多机会。
研究用户需求和期望的方法有很多,但是用户调查和用户分类可能是最受欢迎的方法。
现在您已深入了解目标受众对页面的期望,就可以开始研究信息体系结构。
Information Architecture IA是将网站上的信息组织到一种清晰,直观和明智的方式。
请考虑一下您自己的Web浏览体验:在规划不当且在几秒钟内没有证明其相关性的网页上登陆会令人沮丧,并且很可能会导致您立即单击关闭或返回按钮。
好的IA会创建一个层次结构,该层次结构强调最重要的元素并保持访客的参与度。
如果没有要构建的坚固框架,您将为失败做好准备。
导航是IA的关键方面之一,您应该尽早考虑。
如果用户可以找到他们的站点,那么站点的华丽程度就没有关系。
良好的导航具有三个主要特征:
# ## simple ## clear
consistency
您的目标应该是通过尽可能少的点击将用户定向到他们正在寻找的信息。
您可以在导航栏中使用清晰,简洁,有用的语言以及整个站点的一致设计来实现这一目标。
添加面包屑等备份功能还可以大大提高网站的可用性,并帮助访问者随时了解他们在网站上的位置。
步骤2:获取直观的层次结构正确地
强大的视觉层次结构使引导用户采取行动的网站布局与看起来不错的网站有所不同。
人类是极为令人难以置信的视觉生物,当涉及到在线消费内容时,我们经常扫描页面以快速判断在潜入之前是否能够找到所需的东西。
As设计人员,您可以确保您看到最重要的信息并吸引用户。
没有清晰的视觉层次结构,页面上的所有内容似乎同样重要,难以忍受。
各种设备
设计原则有助于创建强大的视觉层次结构。
使用网格
网格提供了一种强大的方式来创建页面上不同元素之间的连接并保持您的布局设计井井有条。
网格显示页面上所有元素的交互方式,并确保您使用清晰的结构强调正确的信息。
自然浏览模式设计
# ##人们可以使用两种主要的眼睛扫描模式来快速扫描内容块:
F形图案 ## Z字形 ## #作为设计师,您可以控制用户扫描页面时的外观,因此为用户设置正确的路径至关重要。
我们经常在博客和新闻网站等文本丰富的网站上遇到F模式。
值得注意的是,最新研究表明F形模型实际上很糟糕
如果用户以F模式浏览您的网站,则意味着他们在页面左侧显示强烈的偏好,而在右侧丢失重要内容侧。
为了防止F浏览,您必须将网站上的内容格式化为将内容定向到您认为最重要的信息的方式。
以下是一些将访问者定向到您最重要的内容:
在前两段中包含最重要的信息
使用标题和副标题
大胆的重要单词或短语
直观地将少量相关信息分组
经常使用带项目符号和编号的列表
为您的用户而努力,以最大程度地减少干扰并防止他们使用快捷方式。
阻止F浏览的设计非常适合文本丰富的网站,例如博客和新闻网站。
之字形模式更适合复制量最少的网站,并设计一些关键元素来吸引用户的注意。
着陆页通常使用Z字形模式来引导用户进行转换。
直观地确定关键元素的优先级
使用五个基本设计构建块进行构建直观的视觉层次结构:
1。大小
在任何设计中,将大小与重要性相关联非常重要-最重要的信息应该是页面上最大的信息,并且需要引起最大关注。 ## #2。颜色
请记住,颜色在设计中既可以充当组织工具,又可以充当品牌/个性工具。
3.Layout
良好的格式可以鼓励访问者在整个页面上与内容互动,并更快地找到最重要的信息。
4。间距
空格或负空格是设计人员用来吸引用户注意最重要的UI元素的工具
5.style
选择与您的品牌相匹配并突出显示的样式将帮助您更有效地传达信息。
应用三分法则
此原理要求您将设计分为三部分,三行和三列,以查看线相交的位置并找到设计点。
这是一种有效的技术,可以启动您的网站组成并选择元素的位置和框架。
使用网格是将此技术应用于任何设计的最简单方法。
步骤3:关注号召性用语按钮
没有号召性用语号召性用语,任何网站都不完整。
实际上,营销人员会说这是页面上最重要的元素,所有努力都应集中在吸引人们点击上。
战略性地使用设计良好的CTA可以极大地改善页面流程并指导用户进行转换,因此正确完成此操作至关重要。
按钮,请牢记以下几点。
确保按钮看起来可点击
这听起来似乎很明显,但您会惊讶于网页设计师通常会抛弃清晰性,倾向于创新或一些怪异的新趋势。是的,我是在说你,鬼按钮。
为确保用户理解元素是按钮,请使用标准的视觉提示来帮助他们确定可单击性,例如形状,阴影和高光。
明确标记所有按钮
那里的按钮告诉用户下一步该做什么。
如果副本含糊不清,人们会思考而不是行动。
与用户保持清楚,如果他们单击将会发生什么。
这是Netflix的明智示例。
直观地突出显示最重要的CTA
设计独特的CTA涉及三个重要方面:颜色,对比和位置。
使用粗体颜色和足够的对比度来帮助主按钮突出显示,并将其放置在用户不会错过的醒目位置。
您想了解有关网站布局的更多信息吗?
作为南京网站建设专家,我们渴望对这一重要主题进行更深入的研究,因此请与客户服务部联系,让我们知道您还想学习什么?