在线咨询
QQ咨询
服务热线

服务热线:020-85201717

服务热线: 020-85201720

业务微信

微信开发

TOP

单页网站设计:10个提示+想法

发布时间:2019-04-25 浏览:

单页网站设计!对于适合单个页面的小规模网站,有一些几乎是神奇的东西。它们可以优雅,易于导航,并在封闭空间中提供最佳用户体验。


虽然有一段时间我们回避单页网站,但用户再次拥抱它们(谢谢,移动!),你也应该这样做。


我们正在研究十个提示,想法,示例和建议,以帮助您为下一个网页设计工作激发灵感。这可能是保持简单的正确时机,并采用单页策略!


1.在“页面”中思考


在设计单一的滚动网站设计时,请考虑“页面”。


每个卷轴应提供一个页面式体验,专注于单个元素。这为网站设计创造了独特的组织和流程感。


Cote通过具有交替的浅色和深色(或完整照片)分色的“页面”来完美地做到这一点。当滚动一位内容结束而下一位内容开始时,用户可视地知道。



2.更长页面的时间线导航


对于单页网站而言,它们并不总是很轻松。一些最好的单页设计是更长滚动,更长格式的网站。


对于这些项目,请考虑时间轴导航,以便用户始终知道他们在内容流中的位置。如果有重新检查的内容,它可以很容易地跟踪您的位置以及如何返回。


UV Hero使用高度可视化的时间线导航功能,可以显示可见光谱中的每种颜色,因为它与设计中的内容相关。最好的部分?您可以单击任何颜色并向右跳到该内容。



3.页面导航


单页网站不需要缺少常见的用户界面元素,例如菜单,尽管很多人都认为。


您仍然可以使用传统外观菜单(它可以帮助用户流动和搜索)。不同之处在于菜单链接会跳转到单页设计的特定部分。对于喜欢以这种方式导航的用户,他们甚至不知道你已经创造了这个漂亮的技巧。


Happy Tools看起来像一个多页面的网站,但它们都包含在一个页面上。菜单工作得非常好,并为用户提供导航选择。



4.使其具有高度互动性


如果您希望用户继续滚动,交互式元素可以成为鼓励该操作的技巧。


从视频到视差效果到动画或游戏化的触摸,交互性可以鼓励更多的移动和现场时间。单页设计尤其如此。


Lobods具有愚蠢的风格,具有充足的互动性。有悬停动画,幻灯片和弹出元素以及滚动文本。它们以一种帮助用户轻松浏览内容的方式汇集在一起。(这种设计的另一个好处是它包含足够的空间,以便更容易看到微妙的动作和交互。)



5.全屏在一个屏幕上


如果您没有很多内容,那么一页式设计就可以在一个屏幕上提供良好的用户体验。


将此网站设计视为具有一些信息的大导航元素,然后是异地或联系链接。它可以很好地用于即将推出的设计或简单的投资组合登陆页面。


Sylvain Theyssens为他们的投资组合设计做到了这一点。(它实际上有两页:一个可爱的“屏幕保护程序风格”动画,通过鼠标移动变成主要设计。)页面简单,信息丰富,令人印象深刻。单屏设计为您提供了所需的一切,无需任何额外的阻碍。



6.即将推出设计


说到即将推出的网站,这是单页设计的完美用途。


在大多数情况下,即将推出的页面内容不多 - 可能只是徽标和介绍或联系信息。在大多数情况下,这可以很好地适用于一个页面,并且在主站点上线之前有效地利用用户时间。


绿色变色龙就是这样做的。one =页面设计特别好,因为很酷的动画和有趣的文本使用。它创造了一种期待感并唤起好奇心 - 这是你即将到来的页面中你希望的东西。



7.有点时髦


如果你想尝试一些有点不同或时髦的东西,单页网站可以是一个很好的游乐场。一个不寻常的显示器适用于较小的设计,因为你不会过度做“技巧”。


Rou Hun Fan使用专业字体和背景网格来突出他的信息,作品集和作品。创意展示和简约风格足以鼓励滚动很短的时间,非常适合投资组合。



8.给用户做点什么


为了保持参与并让用户对设计感兴趣,请在单页网站上给予他们很多帮助。


许多这些设计的一个失败是它们只是长卷信息。用可点击的元素,号召性用语和要做的事情来分解。这些元素不仅可以帮助您确定用户对设计的要求(以及它们是否达到预期目标),还可以帮助他们保持较长时间的互动。


Plethora打破了长卷的滚动,有大量的卡式按钮来预订旅行套餐。这些点击交互中的每一个都用箭头标注,以创建一致的用户体验。



9.保持组织


将所有网站内容放在一个页面上,设计很容易失控。但它也可以为内容创建一个有组织的画布。


当涉及到使用一个页面时,紧密的网格和统一的结构可能是您最好的工具。使用它们可以保持内容的有序组织和分组,方便用户浏览和理解。


Podcasts Repo通过完美的播客网格可以做到这一点。该网站足够灵活,使用此网格和样式可以根据需要增加到尽可能多的内容项,而不会让人不知所措。



10.明智地使用Space


对于较长滚动或单页设计,最重要的设计考虑因素之一是空间的使用。内容需要间隔开,以便明确建立内容更改,识别操作,并且一切都易于阅读。(请记住,过多的滚动可能会引起一定程度的眼睛疲劳。)


Werner的Nomenclature of Colors是一个单页网站,内容很多。该网站实际上是1821年的一本书的复制品。太空使这个设计工作。


具有清晰网格和大量空白区域的类别和子部分增强了可读性和扫描性。这里有很多,但由于整个空间的使用,它感觉非常平易近人。