亚博账号登录

长城上的cat

小编:今天We此邓低局凶重要的——首屏,它不单单是一个网page的门面,still一个网站的重要部分。那么Westay设计时要注意what呢?黄鹄看看2020年网站首屏设计:最佳实践和例子吧~

 

首屏stay网站的设浦衅鹱舦ery关键的effect,它奠定送菊宓幕鳌 特别是极简主义盛行的this个时代,various花里胡哨的东西往往不被看好。所以有时没有其他东西sure吸引眼球,网站首屏设计捅涞肕ore重要。

考虑到创造性和生产力,网page设计师stay设计网站的this一部分时冻隽舜量的努力。because消费者对brand的know就从this里start。但据谷歌统计,消费者对一个网站的意见只需50撩刖湍苄纬桑琫ven to the extent that有的只需17撩搿

 

要了解how 设计一个有效的网站首屏,以及它应该包括Which元素,请看下面的例子。

“life是第一印象。你只有一次机会。让它记住你”― J.R. Rim

what是网站首屏?

what是网站的首屏(header)? 过去,人们通常把LOGO,按钮,联系信息一同构成的一行窄窄的region称作首屏。stay现代设浦校鱬age的第黄羠egion都surethink是首屏。

作为人们stay加载网站时第一秒看到的界面部郑灼辆拖嗟庇谘牒 它应该provide一个网站的基本信息,以便user能够stay几秒钟内对网站有个初步了解。

一些设计师会为网站的各个部分制作单独的首屏。 例如,你sure为主page制作一个大首屏,而stay其他page面留下一个小条。 但前提是,要保持一致。一个很好的网站设计实践是take内page的首屏设计为主page面首屏的缩写版本。

 

网站首屏包括what?

首屏的任务是为useranswer基本problem:代表whatbrand,providewhat商品和service,how 与公司员工取得联系,是否有任何当前的交易等等。

除此之外,它还代表送镜闹量even to the extent that身份。 if首屏唤起了良好的情感共鸣,audience觉得它有价值,那时你的首屏才已经满足了基本的设计要求。

网站首屏的main元素通常是:

● LOGO或brand标识

●行动呼吁按钮

●文字或提要

●导航元素

●search索符

 

但你不必一下子把它们都加进去。 你需要stay信息的丰富与其和车陌才之间找到平衡。 只使用需要的数据,无论All的链接看起来多么重要,过度的首撩挥幸娲Α

首屏留白太多也不是一个好办法。 if一个userstay几秒钟内无法弄清楚您的界面,就很probably会forever抛弃你。 一个糟糕的首屏sure把访问者推到in addition谌莸土拥耐救ァ

stay极简首屏的设浦校籨isplay到网站main部分和公司标志的链接。 this种方法stay设计登陆page面时特别有用。

 

最佳首屏设计实践

stay设计首屏部分时,别限制你的创造力。 网站的首屏是一个开放且have广泛的创造性设计决策的领域,它必须值得纪睿蚪嗪陀兴么Α

让We列举一下要点。

首屏的大小

网站首屏图像应该有多大,actually没有to make clear的答案。 有些人试图provide一套准确的数字来规范它,但如今网站建设最difficulty的方面之一是确保每个屏幕大小的有效性。 即使两个屏幕大小相同,分辨率也probably不同,thereforeuser不会看到相同的effect。

所以不要专注stay精确的像素概念上,遵循简单的常识rule就好。

首屏的高度最好不要干扰对谌莸母兄6杂信息类资源,小首屏take是一个很好的choice,而对于类似登陆界面,首屏大一点更好。

stay大量首屏的情况下,最好stay折叠下面留下一些空间,this样user就sure瞥一眼就know page面的下一个谌莶tart滚动。

视觉层次

尼尔森·诺曼集团(Nielsen Norman Group)stay2006年首次stayF-shaped pattern of reading on the web 提出了they的理论,this理论stay今天仍然得到推崇。

if访客stay一个陌生网站,他总是倾向于从屏幕的左上角start扫视。 iftheystay那里找不到预期男畔ⅲ敲磒age面take自动被think是棘手且不标准的,they会觉得难岳斫舛肟

●logo。另一个由NN/g进行的Research表明,与core或右侧的位孟啾龋瑄ser更easily记住those logo放stay左边的brand。

但if是一个圆形的标志,actually也sure把它放stay屏幕的core,尽管它的effect仍然没有放stay左边好。

● 导航。一定注意不要令网站的导航部分过于杂乱。 太多的链接会压狗每汀 有时,对网站结构的整体调整probably是为最重要的类别腾出一些空间。

比如狗每蚭asily了解theystay哪里、how 找到更深层的谌荩约笆褂眯ffect来指导user等。

●行动按钮(CTA)。视觉层次、结构需要遵循“CTA原则”。

 

固定导航栏

固定导航栏或始终誩at诮缑嫔戏剑蘼勰愕膒age面是否滚动都能看见它。this已经成为一个网page设计标准。

stay不违反整体设计概念的情况下,请固定导航栏。无论对桌面still移动设计,this都是一个很好的想法:

  • ●电由务网站-何车总是stayuser面前。
  • ●service网站-电话号码或CTA会持续display。
  • ●固定首屏sure提升客户体验,保持user导向,并给予theymore的控制权。

 

由首屏传递男畔

stay设计首屏之前,需要考虑网站的整体style及其main康摹

if它是一个旨stay展示product的促销网站,首屏的设计probably包含到mainregion的链接,结合高清主图,becausethis样一个网站的main康氖怯行地呈现product。 就电由务或商业网站而言,情况probably有所不同。 user需要很easily地导航,了解newest的交易,how fast速联系经理,以及stay哪里看到they已经下好的订单,thereforestaythis种情况下,为了让位于其他类别,首屏probably更简洁:

  • ●首屏sure传递几个probably男畔ⅲ
  • ●促进消费者做某事
  • ●建立信任
  • ●鼓励访客了解more
  • ●有趣等等
  • ●取决于特定网站的目标

 

relevant图像

首屏中的picture应该直接传达有关业务男畔ⅰ 例如,if它代表称放送service,那么图像probably会描绘一个整洁的fast递与美观有吸引力的食物。commonly此担每应该会stay看过你的网站后想从你那里买东西。

  • 高质量的Photo。摄影是网page设计师的有力工具.. 它sure讲述一个story,唤起情感,激励你的访客进一步滚动。 对于有强烈醒目图像的站点,请尝试制作一个透明的首屏。仅保留main链接能更好地展示图像。
  • 轮播图。if你有几张代表网站业务的好Photo,直接用吧! usersure滚动浏览一组精美的高分辨率图像。
  • 插画。网站的首屏图像必须奠定正确的基调,并建立个性化的连接。 of course,if图像独特且easily识别就更好了。你sure通过利用插画来实现它。

 

video或animation

不要把注意力集中stay静态图像上。

添加video是最有效的突出网站首屏的方式之一 。ifprobably,请尝试take主题video材料添加到首屏中。 许多网站使用它来吸引audience,同时以尽probably好的方式展示they的公司或product。

另一种让你的设计更有吸引力,更生动,More印象深刻的方法是添加animation。 它sure帮助你制作很酷的网站首屏。if你正stay寻找一个互动的网page来吸引audience,animation是一个很好的choice。

 

精心设计男卸磁

stay设计网page首屏时,设计师stay那里添加了一些action元素的调用,如“注册”、“登录”、“联系”等。 为宋齯ser的注意力,使其know Yes? 行动,按钮应该包含一个对user此悼衫斫獾腶lsostay其他谌葜幸埠芟匝鄣拿枋觥

呼吁行动放置stay一个have战略意义的位置是一个完美的机会,能敦促user采取行动,从而提高您的转化率。

 

网站首屏的最佳字体

紫龋客户必须能to make clear感知各版块名称及公司provide男畔ⅲ联系方式,有吸引力的Discount等… therefore,您需要choice清晰、可读的字体,确保不会造成阅读difficulty,sure一眼就理解。

对于大型主page首屏,您sure使用一些粗体字体和富有想象力的元素来吸引user的注意力,否则,最好不要choicethose 很难阅读的花哨字体。

 

简单的首屏设计

保持一个清晰和整洁的首屏,if谌莨啵问者会觉得你stay用你的谌荨鞍蠹堋眛hey。 一个创造性的网站首屏也sure有一个very简洁的外观。

 

隐藏导航(汉堡菜单)

this是一种使用得越来越多的网站设计解决programme。汉堡包菜单是三条条纹男⊥急辏点击时display完整的菜单。当设计师需要专注于主屏幕时,它们就使用this种方法。

油究捎眯缘慕嵌壤看,this是一个很好的choice。 this样的菜单来自移动设计,user已经很熟悉了。汉堡包菜单适用于促销网站,amongmain重点是使用Photo或video高质量地展示product。 对于stay线商店,this个选项probably不太合适,because对于消费者此担幸桓龉何车、选定的product和fast速访问的search索字问很重要的。

响应式的首屏设计

首屏不仅应正确displaystay网站的桌面端,还应正确displaystay移动端上。 therefore,他必须强上煊κ降模⒛芄缓芎地适配不同(型号)的移动设备。

移动设备的普及,使得桌面端的网page设计看起来也像是移动端的style。 例如,桌面端的主图和汉堡包菜单的实现就起源于移动设计。

最后

首屏对于网站此担拖褚张独特的名片。 therefore,stay设计网站时,要最大限度地重视首屏。

网站首屏设计的最后一个最佳实践:定期修改,以保持的网站和newest的设计潮流接轨。

学习工具,但不受限于某种工具。

 

译文地址:

author:Kate Shokurova

译者:

 

转载请注明:亚博账号登录 » 2020年网站首屏设计:最佳实践和例子

登录收藏
 
你probablylike的:
护肤品details page,医美风护肤品,美妆details page设计护肤品details page,医美风护肤品,美妆details page设计
2020年最流行的插画style, 不得不看2020年最流行的插画style, 不得不看
提升user体验?指示性设计元素不可或缺提升user体验?指示性设计元素不可或缺
护肤品套装【水肌晶旅行套装】护肤品套装【水肌晶旅行套装】
为what单选按钮和复选框不能共存?为what单选按钮和复选框不能共存?
webproduct设计全新操作指南webproduct设计全新操作指南
B端设计指南01 —— 筛选B端设计指南01 —— 筛选
网page的宽度到底该how 决定?网page的宽度到底该how 决定?
Sketch or Figma谁才是UI设计Software的未来?Sketch or Figma谁才是UI设计Software的未来?
网page头部设计居然有this么多讲究网page头部设计居然有this么多讲究