• 内页banner
  • ui1
  • 内页3
技术专栏您当前所在位置: 首页 > 技术专栏

浅谈长图版式布局中的几种常用方法

更新时间:2017-06-13 09:57:57点击次数:132次字号:T|T

长UI设计在屏幕阅读时代应用得非常广泛,除了最直接想到的网站和APP页面,还有个人作品集的长图包装、长条海报、电商的产品详情页、做博做信的长图广告等等。所以不只是界面UI设计培训师需要了解长图设计的构图方法,作为普通UI设计者,我们同样可以了解些长图长页面的UI设计技巧

为了能够让阅读者保持兴趣不停读下去,停留更长的时间,我们的UI设计不仅要好看而且还要提供一定的视觉引导,让内容从头到尾的体验都是一致的。为了达成这个目标,我们需要有针对性地进行设计。

UI设计培训学校

希望这篇文章能够带结你一些帮助。那么下面我们一起来了解一下,关于长图长页面设计的几种较为常用的简单设计方法。

利用重复的元素进行布局

重复是为了让视觉形成统,提醒用户或阅读者依然是停留在同个内容Z中,重复可以是重复字体,颜色,大小,空间,形式,框架等,它并非是严格复制同样的元素,而是按照定的规律,在页面中产生连续的变化。也就是说在利用重复元素的时候,应该在规律中有变化,在变化中有规律。

UI设计培训学校

UI设计培训学校

际了点出来的重复外,其实也不难发现各种重复的方法不是独立存在的,常常是各种方法掺杂着应用。当然,重复的方法也远远不止是列举的几种。

利用F型排版进行空间布局

F型布局是种十分传统但叉非常科学的UI设计版式布局方式,它是基于大量的跟动追踪实验后总结出来的种经典布局方式。符合大部分人的浏览习惯。我们看一个页面,通常情况下是先看左上角(例如logo、导航、标翘等),然后优先从左往右看水平方向的内容,再着从上往下浏览整个页面,由此便形成一个F状的视觉路径。

UI设计培训学校

从F形布局及眼动追踪实验我们可以得出以下几点启发:

1.最重要的信息(例如logo、企业名称、标题、导航等)尽量放在顶部(甚至精确到左上角),尽量不要放在右边。

2.右边通常可以放一些比较次要的东西,例如意见反馈、咨询、广告、推荐等。

3.设计的时候左边信息要更下功夫,这是注意力比较集中的地方,右边通常会以留白处理。

4.多文字多内容的版面(例如新闻、社区、活动介绍页等)可以优先考虑F型布局。

UI设计培训学校