界面布局 I 如何选择UI 界面布局样式?

广州/UI设计师/5年前/2189浏览
界面布局 I 如何选择UI 界面布局样式?

不同样式的界面布局,给用户带来的感受也是一样的,也会直接影响到产品的美观度。

前言


前面我们已经完成了UI设计的核心是‘美学’,UI设计师应该如何提升审美能力。本篇将接着讲“如何选择合适的UI界面布局样式?”。不同样式的布局,给用户带来的感受也是一样的,也会直接影响到产品的美观度。不同的产品都会有不同的属性,我们需要感觉产品的不同的属性,采用不同的布局样式,使产品在激烈的竞争中脱颖而出。

界面布局样式是什么?

界面布局样式是指用于区分信息内容,层次的版式设计的具体方式。布局对界面设计来说十分重要,更能突出产品的调性,也是奠定后面开展页面设计的基础。今天我们可以了解有哪些不同的布局样式,不同布局样式对界面设计的影响,以及我们该如何选择布局样式来使界面设计看起来更加有范,更有自己的视觉特征点在里面。

目前运动端主要布局样式有哪些?

移动端不同于PC端,最大的区别是屏幕尺寸的限制,相同的内容显示效率要低很多。作为UI设计师需要根据产品的调性,信息内容优先级,选择合适的布局样式,进行合理布局,提升信息的传递效率。我们可以了解目前主流一些布局样式,并将这些样式好好运用到界面设计中去。接下来我们一起看下。

列表式布局

这类最简单,也是最经典的分类界面设计,这种布局能让用户清晰明了知道页面内容,通常用于并列元素的展示。
特征
  • 纵向长度没有限制,上下滑动可查看无限内容;

  • 视线从上到下,浏览体验快捷;

  • 内容层级展示清晰明了。


宫格式布局

宫格式布局也算是移动APP上最常见的布局方式,被广泛应用于各平台系统的中心页面,或作为一系列工具入口的聚合。

特征
  • 能清晰展示各入口,方便快速查找。
  • 扩展性好,便于组合不同的信息类型

卡片布局

通常使用于适合以图片为主单一内容浏览型的展示。
特征
  • 每个卡片信息承载量大,转化率高;
  • 每张卡片的操作互相独立,互不干扰。
  • 卡片以一个浓缩的形式提供了快速并且相关的信息。所有的卡片特点就是交互性。

瀑布流布局

适用于实时内容频繁更新的情况、内容较多的情况。
特征
  • 瀑布流图片展现具有吸引力;
  • 瀑布流里的加载模式能获得更多的内容,容易沉浸其中;
  • 瀑布流错落有致的设计巧妙利用视觉层级,同时视线任意流动缓解视觉疲劳。

抽屉式布局

主要适合主内容较多,不希望菜单栏占据固定位置消耗空间,在交互体验上更为自然,通常从左右两侧导出。

轮播式布局

重点展示一个对象,内容较小,可通过左右滑动展示更多内容。
特征
  • 单页面内容整体性强,聚焦度高
  • 各页面内容结构相似,容易忽略后面的内容

多面板布局

通常运用同时展示较多分类与内容。
特征
  • 对分类有整体性的了解,减少界面跳转层级;
  • 分类位置固定一目了然。

图表式布局
图表式布局也是最近最为流行的一种布局方式,能通过图表的方式直接呈现信息
 特征:
  • 直观、整体性较强
  • 展示的内容有限

结语
全文向大家介绍移动端8种种布局思路,当然其实不止这8种,但是其他布局相对来说会运用少一些,这些布局我们可以加以学习利用,可以运用在实际设计中去,当然运用的时候,一定要清晰知道自己产品的主旨目标,用户群体,合理运用布局,做出精准的界面设计!
下一篇将向大家介绍UI界面排版设计。



12
Report
|
44
Share
相关推荐
评论
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
You may like
相关收藏夹
规范
规范
规范
规范
作品收藏夹
ui界面
ui界面
ui界面
ui界面
作品收藏夹
学习
学习
学习
学习
作品收藏夹
ui
ui
ui
ui
作品收藏夹
交互设计啊
交互设计啊
交互设计啊
交互设计啊
作品收藏夹
大家都在看
Log in