<dl id="x7vml"></dl>

    <dl id="x7vml"><menu id="x7vml"></menu></dl>
    <div id="x7vml"><tr id="x7vml"><mark id="x7vml"></mark></tr></div>
            <sup id="x7vml"><ins id="x7vml"></ins></sup>

              <dl id="x7vml"></dl>

              成都网?#23616;?#20316;
              当前位置: 首页 >新闻资讯 > 网站建设 > 移动端设计:图文布局和按钮解析
              2018-09-10 17:12:45

              移动端设计:图文布局和按钮解析

              给大家解析一些UI设计过程中的视觉布局方法,只有合适的布局没有对错的布局。 

                 图文布局   


              用户所关注的内容以及不同的业务诉求决定信息的优先级排布,所以没有通用的布局,只有适合的布局。 

              1. 上图下文 



              上图下文更强调了?#35745;?#30340;重要性,以“见”这个属性为优先,上图下文需要注意的是?#35745;?#39640;度过高会严重影响版面效率,而一个具有商业化目的的产品对首页的版面效率异常看中,同样对?#35745;?#30340;质量要求也甚高。通常这样的feed流布局更抓人眼球。 



              如果确实需要以大图+文的上下方式来布局,尽?#31354;业?#29256;面的平衡点,考虑?#35745;?#19982;文字之间想要给用户传达的关系和优先级?#35745;?#30340;使用尽量使用?#24179;?#27604;例做展示,例如:4:3,2:1,16: 9 等。



              宫格排列式的上图下文能够极大的提升版面效率,一般更多用于电商平台,在首页将某个模块的优质商?#26041;?#34892;透出,提高转化和流量。缺点是缺乏信息完整度,在布局时需要考虑更多因设备、极限值带来的不同状况的考虑。

              可以看出:严选将金额跟在标题后面,而非固定位置,这样做的好处是将标题和金额关联度更高,形成一致性。缺点是布局上显得层次不齐影响阅读效率。通常这样的排版会根据业务需要,来选择展示一行或多行文字极限,但由于版面效率它不得不只给了两行的极限高度。


              2. 左图右文 



              左图右文形式的排版应该也算是用的非常多了,其实大家会经常把它和左文右边图进行对比,但无论是左图还是右图,在这样的布局中我们首先就要做好图和文的占比。显示在外面的?#35745;?#36890;常是选取了详情中的?#35745;?#26469;进行展示,否则就浪费了比较多的人力资源去重新配图了得不偿失。同样和?#35745;?#25645;配的信息字段此时就显得极为重要。

              菜鸟裹裹其?#21040;?#26631;题的优先级又提升到了和?#35745;?#19968;样的层次,?#35745;?#26412;身给人的视觉冲击会更强所以即便?#35745;?#25918;在标题下面,也不会弱。 



              方形缩略图是最常用的形式,不至于太窄也不至于太宽,对于?#20063;?#20449;息的布局也显得更游刃有余。横形的?#35745;?#20250;让?#20063;?#30340;文字显示空间压缩的厉害,通常在视频缩略图会用到,但?#35745;?#23545;整个页面的氛围感会更好。

              竖形的?#35745;?#35753;?#20063;?#20449;息有更多的发挥空间,同时版面的留白也更大,但是如果?#20063;?#20449;息过少,则会让页面有些单调和不完整。

              左文右图就不再赘述,现在大多数左文右图在咨询和旅游产?#20998;?#20351;用的更多,因为用户在浏览这样的列表信息时?#35745;?#26080;法在第一眼被识别出具体内容,而对于这样的产品来说无疑是低效的。

              当然很多时候,没有那么多时间去验证如此设计对于用户来说是否真的能提高浏览效率,提升了多少满意度。我们可以简单的理解,如果说的是一件事,那么文字比?#35745;?#26356;重要。如果说的是一样物品、人,那么左边放图更合适,体会一下。 
              返回 BACK
              服务项目
              网站建设
              互联网开发
              微应用(微信)
              微信小程序
              APP定制开发
              400电话
              主机租用
              域名注册
              联系我们

              地址:成都市府青?#33539;?#27573; • 首汇观筑1栋28楼

              邮箱:[email protected]

              热线:18980803640 / 18190984800

              座机:028-61382296

              微信公众号 二维码
              重庆时时彩五星基本图

              <dl id="x7vml"></dl>

                <dl id="x7vml"><menu id="x7vml"></menu></dl>
                <div id="x7vml"><tr id="x7vml"><mark id="x7vml"></mark></tr></div>
                        <sup id="x7vml"><ins id="x7vml"></ins></sup>

                          <dl id="x7vml"></dl>

                          <dl id="x7vml"></dl>

                            <dl id="x7vml"><menu id="x7vml"></menu></dl>
                            <div id="x7vml"><tr id="x7vml"><mark id="x7vml"></mark></tr></div>
                                    <sup id="x7vml"><ins id="x7vml"></ins></sup>

                                      <dl id="x7vml"></dl>