藏在网站设计里的的小原则

昨天我们看过了几个设计精良的手表产品页面,构图都十分用心。  以劳力士网站的头图为例——

左侧内容的排布,正是以右侧的手表表体为依据——

将文字内容这样排布,才能显出图文的关联性,强化页面的整体感。

在做构图的时候,依据页面中的元素进行规划非常重要。

例如上面这页,文字构图的依据是人物视线方向,以及右侧小罗的身影位置。  这些构图规则非常重要(甚至比三分、黄金分割这些常规布局法还要重要),善于发现这些隐藏的构图辅助线,将非常有助于提升页面的美感。

当然,很多页面确实无法找到隐藏的构图辅助线,那么构图反而简单很多,居中排布就可以了——

居中对齐虽然简单,但不应该成为偷懒的理由,我在欧米茄网站首页居然看到了这几页非常不专业的头图——

各种别扭各种看不清字,这绝对是居中对齐的反例,引以为戒吧……

除了这些基本原则,其实还藏着让构图更加和谐的小技巧:将构图的重心适当上移。

对于其他场合的设计,将阅读内容的重心上移,是一种符合观众阅读习惯的做法。还是刚才的几张图片,都非常明显——

文字区距离顶部的距离较小,而且大字号文字在顶部,重心显然偏上。  这几张图片也一样——

所以我们在制作幻灯片的时候,要让观众阅读文字内容之前,下意识的将视线落在页面的中上部,这种做法将提供给观众最佳的阅读感。  以这个页面为例,下边区域留白比较大,但整体并无违和感——

(顺便一提,这个款式我很喜欢)

欧米茄的产品展示页面设计可谓步步惊心,上图中的“显示价格”按钮暗藏心机……  当你倾心某款手表之时,再点开价格就会无比纠结——

点击按钮后的过渡动画虽然看似简单,但效果却非常不错——  由于引入了这个动画效果,使得内容增加之后,重心的位置保持不变,整个页面更加细腻、精致。

其实变体功能应该多多运用在这样的情境之下,而非一味的追求动画炫酷。分批呈现内容,强调前后页面元素关系用变体去实现这样的动画再合适不过

来源: 藏在网站设计里的的小原则

关注微信公众号

上一篇文章
外贸企业如何在谷歌地图上标注公司信息
下一篇文章
超实用的外贸网络营销工具
菜单