有了会员网站,人们希望看到满足自己需求的内容。根据用户之前的选择,Netflix拥有优越的预测算法,可以提供他们最有可能观看的电影和节目。像Medium这样的网站会向人们展示他们登录时可能喜欢的文章,这些文章都是基于他们以前读过的和喜欢的内容。
但个性化可能会走得太远。广告网络算法已经变得如此先进,他们有时甚至可以预测人们可能对购买感兴趣的产品,即使他们没有在网上搜索或以其他方式提到它。这种程度的预测有时会让人觉得自己被监视了。出于这个原因,UI设计者谨慎使用个性化是明智的。
网站最佳实践:个性化改善用户体验
Netflix使用个性化来建议人们可能想要观看的内容。
个性化是一种常见的网站设计标准
Medium根据用户以前的阅读习惯和订阅的出版物中的新内容,在每个用户的主屏幕上个性化显示他们可能喜欢阅读的文章。
网格
网格一直以来都是用户界面设计的一部分,从上世纪90年代末基于表格的布局开始(尽管在那之前很久它们就被用于书籍和报纸等印刷布局)。当CSS因创建布局而流行时,开发了更优雅的网格系统,最早的著名例子是960.gs网格。
网格为设计提供了视觉平衡和秩序,这使得人们更容易消费内容。同时,网格可以为web布局提供很大的灵活性。大多数网格系统使用12或16根立柱,立柱之间有排水沟。一些使用基于网格的布局的网站使网格成为设计的一个显著特征。相比之下,其他的则更加微妙,网格只有在仔细检查后才会变得明显(有时只有当实际网格覆盖在设计上时)。
除了基于柱的布局网格之外,基线网格在web设计中通常用于以逻辑方式水平分隔元素。例如,在检查正文和标题行之间的间距时,这一点在排版中最为明显。基线水平网格间距与网页设计中使用的垂直网格间距密切相关。
Web布局最佳实践:网格为信息添加顺序
基于网格的网页设计以一种平衡和有组织的方式呈现内容。
网格的使用是一个基本的网站布局
在网格设计中使用不同大小的内容可以在保持内容有序的同时增加视觉兴趣。
杂志式网页布局
新闻和期刊行业在很大程度上影响了网络上杂志风格的布局。在早期,它们大多出现在新闻网站和网络杂志上。随着时间的推移,他们在其他行业的人气也在增长,现在他们出现在不同类型的网站上,包括电子商务网站和博客。
杂志风格的版面包括一篇特色文章(或者有时是旋转木马或类似格式的多篇特色文章),以及主页上的第二和第三篇文章。他们也倾向于有多个内容栏,有时分为几个部分。这些网页布局适用于有大量内容的网站,特别是那些每天添加新鲜内容的网站。
杂志式网页布局
杂志式的版面非常适合展示大量定期更新的内容。
杂志式网页设计与布局
不同的图像形状使这本杂志风格的布局独特而难忘。
单页布局
单页布局将站点的所有主要内容放在一个网页上。导航是通过滚动来完成的,通常带有跳转到特定区域的快捷方式,有时还带有视差滚动效果。有时,他们可能会将次要页面用于条款和条件、隐私策略或其他不属于主要内容的信息,但这不应阻止将布局视为单个页面。
对于内容稀疏的网站,单页网站布局是一个很好的解决方案。它们也是叙事内容的完美选择,比如交互式儿童读物。
单页网页布局框架
单页布局适用于叙述性内容,导航提示(“向下滚动”和箭头)的使用使设计更加用户友好。
单页网页设计与布局
单页布局是理想的叙事,如儿童故事。
F-和Z-模式
F-和Z-模式是指一个人的眼睛如何在页面上移动,人们如何浏览内容。F-pattern在页面顶部有突出的内容,其他内容沿着页面左侧在其下方对齐(大致呈“F”形)。Z模式在顶部有突出的内容,在更下方有其他有价值的内容。眼睛从页面的右上角到左下角呈对角线绘制(大致呈“Z”形)。
旋转木马
内容转盘通常出现在网站的标题或英雄部分。它们通常包含图像和文本,尽管有些可能只包含其中一个。它们用于在一个网站的一个部分中显示多个内容块,而空间有限。
旋转木马的一些用途非常好。博客或新闻网站上的特色内容非常适合旋转木马。产品、促销和销售也通常出现在电子商务网站的旋转木马中。虽然旋转木马通常出现在网页顶部附近,但它们也可以在子部分中用于突出显示相关内容。它们是主页内容和特定类别内容或产品的单独页面的流行选择。
旋转木马是一种基本的网站布局格式
旋转木马允许在同一区域中显示多个重要内容。
网页设计和布局:特色内容的旋转木马
旋转木马非常适合在电子商务网站上展示特色产品。
永恒的Web布局最佳实践
永恒的用户界面设计是适应性强,用户友好。它适用于各种用例,今天看起来和10年前一样好(再过10年也会一样好),只需稍加修改。遵循网页布局的最佳实践,同时结合永恒的用户界面设计元素,将产生一个网站,不看或感觉在短时间内过时。它允许用户界面设计师创造数字体验,取悦用户,实现品牌目标。
总监微信
复制成功
业务咨询 何先生
业务咨询 何先生
搜索感兴趣的内容