<menuitem id="mh6do"></menuitem>

    
    
    <em id="mh6do"><ol id="mh6do"><mark id="mh6do"></mark></ol></em>
    <ol id="mh6do"></ol>
      <em id="mh6do"><tr id="mh6do"></tr></em>
      <dl id="mh6do"><ins id="mh6do"><thead id="mh6do"></thead></ins></dl>

      <sup id="mh6do"><menu id="mh6do"><small id="mh6do"></small></menu></sup>

      您的意见是我们 UI 中国进步的动力!
      点击立即反馈按钮,发表您的意见!
      立即反馈
      QQ群反馈
      您?#37096;?#20197;加入UI中国官方反馈群进行反馈!
      群号:302892100
      备注:反馈问题后@管理员能让我们及时了解您的意见

      Feed流设计:那些容易被忽略的?#35745;?#36866;配知识

      原创文章 分类: 经验/观点 版权:
      14587 542 251 30
      2019-03-20
      120.3
      首页推荐

      我们每天被淹没在各种Feed流中,感觉它的设计是如此简单,只需设计一个卡片,然后复制?#31243;?#25972;个界面就大功告成了。

      Image title

      我们每天被淹没在各种Feed流中,感觉它的设计是如此简单,只需设计一个卡片,然后复制?#31243;?#25972;个界面就大功告成了。


      但是大家很容易忽略?#35745;?#36866;配的问题,?#28909;?#24494;信朋友圈你无法保证用户发几张?#35745;?#20063;无法预估?#35745;?#30340;比例,那么就需要我们对它设定相应的规则。下面?#26131;?#32467;了最易出现问题的大图布局、宫格布局、拼图布局的?#35745;?#36866;配方式。


      一、大图布局


      大图布局也就是不管用户上传几张?#35745;現eed流中以一张大图进行展现,点击详情或通过滑动才能查看其他?#35745;?#20351;用大图布局的?#35745;?#36866;配方式?#35805;?#26377;两种,一种是展示?#35745;?#27604;例固定;另一种是随?#35745;?#32780;变化。


      1、展示?#35745;?#23610;寸固定


      不管用户上传的是横图还是竖图,其展示?#35745;?#30340;比例都固定。采用该适配方式?#35745;?#21344;用?#21344;?#23567;,可提高用户的阅读效率,因此当你的产品目的想要提高用户的阅读效?#36866;?#21487;以使用,?#28909;?#23383;里行间。

      Image title



      2、随?#35745;?#32780;变化


      当用户上传不同比例的?#35745;?#26102;,?#35745;?#23637;示宽度为屏幕宽度,而?#35745;?#30340;展示高度根据?#33539;?#30340;宽度等比例缩放。采用该适配方式能将?#35745;?#20449;息表达完善,?#35745;?#21344;用?#21344;?#22823;,适合?#35745;?#36136;量高,用户以?#35745;?#27983;览为主的产品。

      Image title



      需要注意的是,采用该方式需要设置阈值,当?#35745;?#30340;高度超过一定数值,高度就不在增加以阈值为准,当?#35745;?#30340;高度小于一定数值,高度不在减小,以阈值为准。


      二、宫格布局


      宫格式布局也就是用户上传的?#35745;?#20250;适配到一个个的方块中,宫格布局的形式多种多样可以是九宫格、五宫格、三宫格,下面以较为复杂的九宫格的适配为例。


      九宫格的适配未对屏幕进行区分,但对只上传一张?#35745;?#36827;行了特殊的处理,二张或二张以上直接以最小边为方块的宽,然后等比例缩放,?#35745;?#30340;具体适配方案如下:

      Image title



      1)当?#35745;?#20026;三张时,3、5位置对调,排成一行:1、2、3。

      2)当?#35745;?#20026;两张时,直接将?#35745;?#36866;配到1、2格子。

      3)当?#35745;?#20026;1张时,如果0.5 < = 宽 / 高 <= 2 时,被限定在1 - 4格子的范围大小(包括间距),也就是凡是宽高比在这个范围时,最长的那边暂两个格子加间距。

      Image title



      4)当?#35745;?#20026;1张时,宽 / 高 > 2的?#35745;?#22914;全景图),最多占三栏,高最多占一栏(包括间距大小)

      Image title



      5)单张?#35745;?#23485; / 高 < 0.5(如微博长图),高最多占二栏,宽度最小占二栏1/3(包括间距)

      Image title



      三、拼图布局


      这种布局方式是将几个?#35745;?#25340;成一个矩形,样式新颖类似杂志的排版,因此?#27493;?#26434;志式布局,不过因为其对?#35745;?#30340;要求较高,因此多应用在?#35745;?#31038;交中,如in。

      Image title



      下面?#26131;?#32467;了宫格布局的规则,在设计时你可以不用把每?#26234;?#20917;都设计完,只要把不同?#35745;?#36866;配的方案发给开发即可,他们会选用相应的规则。

      Image title



      四、总结


      今天主要和大家分享了Feed流中容易被大家忽略的?#35745;?#24067;局样式。


      1、大图布局?#21644;计?#36866;配主要有两种方案,其中随?#35745;?#32780;变化?#37027;?#20917;需要注意设置阈值,防止用户上传超长图影响界面样式。

      2、宫格布局:重点需要注意1张图的适配情况。

      3、拼图布局:拼图布?#31181;?#35201;需要给开发说明采用什么拼图规则。



      参?#23478;?#25991;

      社交应用动态九宫格?#35745;?#30340;规则http://t.cn/RVagHD0

      仿Nice 首页?#35745;?#21015;表 9 图样式 (iOS) http://t.cn/EMHgp3O

      那些谋杀你时间的Feed流http://t.cn/RNSvWi3

      微信公众号:海盐社

      风筝KK

      微信公众号:海盐社

      2679粉丝/48关注

      人气明星?#19979;?#35782;途首页达人砖家收藏家lv.1
      界面没层次,到底哪里出了问题?费茨定律如何指导界面设计?

      扫描二维码
      去?#21482;?#31471;查看海报

      风筝KK

      TA已经获得10枚勋章啦

      • 成就勋章

        • 特别勋章

        • 身份勋章

      • 已拥有

      • 作品

        创造者才是真正的享受者。

      • 经验

        经验是一所好学校,可它的学生却经常旷课。

      • 活跃

        大神都是从围观群众开始的

      • 拓展

        作品、经验、活跃还不能满足你?

      京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2019 UI.CN

      印度快乐8开奖号码
        <menuitem id="mh6do"></menuitem>

        
        
        <em id="mh6do"><ol id="mh6do"><mark id="mh6do"></mark></ol></em>
        <ol id="mh6do"></ol>
          <em id="mh6do"><tr id="mh6do"></tr></em>
          <dl id="mh6do"><ins id="mh6do"><thead id="mh6do"></thead></ins></dl>

          <sup id="mh6do"><menu id="mh6do"><small id="mh6do"></small></menu></sup>
            <menuitem id="mh6do"></menuitem>

            
            
            <em id="mh6do"><ol id="mh6do"><mark id="mh6do"></mark></ol></em>
            <ol id="mh6do"></ol>
              <em id="mh6do"><tr id="mh6do"></tr></em>
              <dl id="mh6do"><ins id="mh6do"><thead id="mh6do"></thead></ins></dl>

              <sup id="mh6do"><menu id="mh6do"><small id="mh6do"></small></menu></sup>