1. 首页 >
  2. 资讯公告 >
  3. 北京UI设计培训_移动端布局形式及使用场景

北京UI设计培训_移动端布局形式及使用场景

 May 31, 2019 11:40:00 AM  330人 来源: 火星人

移动端相比PC端,物理尺寸小了很多,布局与PC端也是相差甚远。所以尽量不要把做网页的习惯到移动端界面的设计中。作为用户体验设计师需要对信息进行优先级划分,并且合理布局,提升信息的传递效率。每一种布局形式都有他的意义所在,下面来谈谈手机界面设计中常用到的一些页面布局。

标签式布局
标签式布局也叫网格式布局,一般承载较为重要的功能,由于标签式的设计较有仪式感,所以视觉上层级很好,一般用于展示较多的快捷重要入口,且各模块相对独立。一行标签一屏横排不可超过5个,超过5个需要左右滑动显示。标签式布局的优点是各入口展示清晰,方便快速查找。缺点是扩展性较差,标题不易过长。并且非重要层级的功能,或者不可点击的纯介绍类元素,不适用于标签式设计。每一个标签都可以看做为界面布局中的一个点,过多的标签也会让页面过于琐碎,并且图标占据标签式布局的大部分空间,因此图标要设计的较为精致,同类型同层级标签要保持风格以及细节上的统一。

列表式布局

列表式布局是移动端应用小屏幕的限制下最常见的版式形式。尤其适用于文字较长的信息组合,列表式的布局优点是信息展示较为直观,节省页面空间,浏览效果高,字段长度不受限制可以错行显示。缺点是单一的类表页容易视觉疲劳,需要穿插其他版式形式让画面有些变化,并且不适用于信息层级过多并且字段内容不确定的情况,这种情况仅仅通过分割线或者间距的区分容易让用户出现视觉误差,每一个列表可以看做为界面布局中的一条线。

卡片式布局

某种程度上来说,卡片式设计是在栅格的基础上更进一步,将整个页面的内容切割为N多个区域,不仅能给人很好的视觉一致性,而且更容易设计上的迭代。卡片式设计的另一个典型好处是可以将不同大小、不同媒介形式的内容单元以统一的方式进行混合呈现。最常用的就是图文混排,即要做到视觉上尽量一致,有要平衡文字和图片的强弱,这是卡片设计经常有奇效。当一个页面内信息板块过多,或者一个信息组合中信息层级过多通过列表式设计容易使用户出现视觉误差时,卡片式的设计就再合适不过了。卡片式设计的缺点是对页面空间的消耗非常大,需要上下左右各有间距,就会导致一屏呈现的信息量很小。所以当用户的浏览是需要大范围扫视、接收大量相关性的信息然后再过滤筛选时,或者信息组合较为简单,层级较少,强行使用卡片式设计会让用户的使用效率降低,带来不必要的麻烦、

瀑布流布局

当一个页面内卡片的大小不一致,产生错落的视觉效果就是瀑布流。瀑布流设计适用于图片/视频等“浏览型”内容,当用户仅仅通过图片就可以获取到自己想获取的信息时,那么瀑布流合适不过了。移动端的瀑布流一般是两列信息并行,可以极大的节省交互效率,并且可以用来制造“丰富/华丽/眼花缭乱”的体验,适用于电商或者小视频类应用。瀑布流布局的缺点是过于依赖图片质量,如果图片质量较低,整体的产品格调也会被图片所影响。并且瀑布流布局不适用于文字内容为主的产品,也不适用于产品调性较为稳重的产品。

多面板布局

多面板的布局更常见于PAD终端,但移动端也会用到。多面板很像竖屏排列的Tab,可以展示更多的信息量,操作效率较高,适合分类和内容都比较多的情形,多用于分类页面或者品牌筛选页面。优点是减少了页面之间的跳转,并且分类较为明确直观。它的不足是同意界面信息量过多,较为拥挤,并且分类很多时,左侧滑动区域过窄,且不利于单手操作。

手风琴布局
手风琴布局常见于两级结构的内容。用户点击分类可展示开显示二级内容,在不用的时候,内容隐藏的。因此它可承载比较多的信息,同时保持界面简洁。手风琴可以减少界面跳转,与树形结构相比,手风琴减少点击次数,提高操作效率。手风琴在浏览上很常见,很多浏览的导航、历史、下载管理等页面均采用了手风琴的设计。手风琴布局的缺点是同时打开多个手风琴菜单,分类标题不易寻找,且容易将页面布局打乱。


关键词:北京UI设计培训,UI移动端界面设计,UI界面设计