首页 > 建站资源 > 网站运营 > APP界面设计:30分钟掌握这8种页面布局 UI设计必学

APP界面设计:30分钟掌握这8种页面布局 UI设计必学

时间:2016-08-22    作者:Mr笨   来源:简书网

学习UI设计的时候,经常要接触到页面的布局,布局的方式会直接影响一个APP的视觉效果,好的布局方式,往往能带来舒服的视觉效果,更能得到用户的接受与好评。然而万变不离其宗,移动端页面常用的布局,不外乎以下8种。

1.列表式布局

简书·列表式布局

特点:内容从上向下排列,导航之间的跳转要回到初始点

优点:1.层次展示清晰明了

        2.视线流从上到下,浏览体验快捷

        3.可展示内容较长的菜单或拥有次级文字内容的标题

缺点:1.导航之间的跳转要回到初始点,灵活性不高

        2.同级内容过多时,用户浏览容易产生视觉疲劳

        3.只能通过排列顺序、颜色来区分各入口重要程度

简书的很多地方都运用了列表式布局,这种布局方法能够让用户清晰明了地知道页面的内容,简介又大方。

2.陈列馆式布局

支付宝·陈列馆式布局

特点:布局比较灵活,即可以平均分布这些网格,也可以根据内容的重要性做不规则分布

优点:1.同样的高度下可放置更多的菜单,流动性强

        2.直观展现各项内容,方便用户浏览经常更新的内容

缺点:1.不适合展示顶层入口框架

        2.界面内容过多时显得杂乱,让用户眼花缭乱

支付宝的界面相信大家都很熟悉,它的首页就使用了陈列馆式布局,它能直观得展现各项内容,而且首页的内容都是用户经常游览的,不过由于界面过多,视觉体验效果就稍微逊色了一点。

3.九宫格布局

简书·九宫格布局

特点:相比陈列馆式,九宫格布局比较稳定为一行三列式

优点:清晰展现各入口,方便用户快速查询

缺点:1.菜单之间的跳转要回到初始点

        2.容易形成更深的路径,不能显示太多入口次级内容

很多软件都喜欢运用九宫格布局,简书的专题管理员这里也使用了这种布局,井然有序且间隔合理,视觉效果挺舒服的。

相关推荐
如何打造一款用户喜爱的移动App应用?
遵循用户需求的设计:最美APP的9条闪光定律
试析社交APP设计思路:如何赢得市场和用户
从电商网站应用设计中学到的九个成功秘诀
4个因素设计出一款令用户上瘾的App
极简主义:移动应用设计之七剑下天山
今日最佳设计:人像即按钮 社交应用新趋势
App开发人自白:做APP是一场赌局你要会押注
如何给Android产品设计一款合适的图标?
Web APP与原生APP有哪些交互设计区别?
一个老外产品经理如何看中国APP的
APP开发:短时间内外行人如何成为APP大神
App开发冷思考:初创App从零用户到冷启动
一次回归初心的探索!豆瓣App分析体验报告
这是个看脸的世界 即便你是APP也是如此
以微信网易为例:新闻型产品列表设计分析
干货:设计APP产品不得不知的4个心理学原理
百度官方出品!2015-2016交互体验趋势
APICloud:一站式实现快速APP开发、管理、测试的平台
APP产品设计:让用户看见 才是王道!
页面策划:空白页面应该如何设计?
nice 启示录: 看移动 App 的产品设计和运营策略
好的移动应用设计,就该这样
想要App做得美,这些UI/UX设计趋势你要知道啊
前网易PM总监:移动APP登录、注册等设计经验
设计一款APP产品需要考虑哪些因素?
从产品经理的角度算 做一个 APP 需要多少钱
微信老外产品经理的《中国移动应用设计趋势》
从交互设计角度 聊聊Web网站和移动App六大差异
iOS app制作教程:iPhone App制作不求人
APP开发教程:浅谈APP登录的逻辑设计
谷歌也中枪!APP如何用正确姿势获取用户权限?
为什么国外的App 乃至互联网产品通常都很简陋?
不断换脸的豆瓣 App,在这一版回到了原点
极简设计:移动端设计新趋势化繁为简
22个UI UX细节很棒的APP界面设计 UI设计必备

精彩推荐

热门教程