手机界面设计中12种常用布局
前言
总结下手机界面改版要考虑的布局，主要的分为以下2大类
主导航
列表式
陈列馆式
九宫馆式
选项卡式
旋转木马
行为扩展式
多面板
图表式
次导航
抽屉式
超级菜单式
弹出式
图片轮盘式
其中，所有的主要导航都可以做为次级导航，但次级导航不太适合用作主要导航 。为什么？因为次导航是隐藏起来，隐而不见、只有触发时才显示。
主导航
1、列表式
特点：
内容从上向下排列，导航之间的跳转要回到初始点，好比一条街上有理发店，饭店，你想从理发店到饭店，得先多理发店出来，才能进入饭店。
优点：
1、层次展示清晰
2、视觉流线从上向下，浏览体验快捷。
3、可展示内容较长的菜单或拥有次级文字内容的标题
不足：
1、导航之间的跳转要回到初始点
2、同级内容过多时，用户浏览容易产生疲劳
3、排版灵活性不是很高
4、只能通过排列顺序、颜色来区分各入口重要程度
场景：
列表菜单适合用来显示平级菜单，且较长或拥有次级文字内容的标题。
2、陈列馆式
特点：
布局比较灵活，设计师可以平均分布这些网络，也可根据内容的重要性不规则分布，相对列表式，其优点在于同样的高度下可放置更多的菜单，更具有流动性，曝布流就属于其中一种。
优点：
1、直观展现各项内容
2、方便浏览经常更新的内容
不足：
1、不适合展现顶层入口框架
2、容易形成界面内容过多，显得杂乱
3、设计效果容易呆板
场景：
适合以图片为主的单一内容浏览型的展示
3、九宫格
特点：
相比陈列馆式，布局比较稳定为一行三列式布局。
优点：
1、清晰展现各入口
2、容易记住各入口位置，方便快速查找
不足：
1、菜单之间的跳转要回到初始点
2、无法向用户介绍大概的功能，只能点击进去才能获知，初始状态不如列表式明朗
3、容易形成更深的路径
4、不能直接展现入口内容
5、不能显示太多入口次级内容
场景：
适合入口比较多的展示，而且导航之间切换不是很频繁的情况，也就是业务之间相对独立，没有太多的瓜葛。
4、选项卡式
特点：
导航一直存在，具有选中态，可快速切换到另一个导航。
优点：
1、减少界面跳转的层级
2、分类位置固定
3、清楚当前所在的入口位置
3、轻松在各入口间频繁跳转且不会迷失方向
4、直接展现最重要入口的内容信息
不足：
功能入口过多时，该模式显得笨重不实用
场景：
大部分放在底部，方便用户操作，切换的时候，选中状态高亮显示，有少数放在顶部。
适合分类少及其内容同时展示，导航菜单项数量为3-5个；各导航菜单项之间内容/功能有显著差异；用户在各个导航选项之间需要非常频繁的切换操作
5、旋转木马
特点：
重点展示一个对象，通过手势滑动按顺序查看更多
优点：
1、单页面内容整体性强，聚焦度高
2、线性的浏览方式有顺畅感、方向感
不足：
1、受屏幕宽度限制，它可显示的数量较少，需要用户进行主动探索
2、由于各页面内容结构相似，容易忽略后面的内容
3、不能跳跃性地查看间隔的页面，只能按顺序查看相邻的页面
场景：
适合数量少，聚焦度高，视觉冲击力强的图片展示
6、行为扩展式
特点：
能在一屏内显示更多的细节，无需页面的跳转
优点：
1、减少界面跳转的层级
2、对分类有整体性的了解
3、清楚当前所在的入口位置
不足：
分类位置不固定，当展开的内容比较多时，跨分类跳转不方便
场景：
适合分类多及其内容同时展示
内容展示的信息多
7、多面板
特点：
能同时呈现比较多的分类及内容。
优点：
1、减少界面跳转的层级
2、对分类有整体性的了解
3、分类位置固定
4、清楚当前所在的入口位置
不足：
2、界面比较拥挤
场景：
适合分类多及其内容同时展示
内容展示的信息不多
8、图表式
特点：
用图表的形式直观的呈现信息
优点：
1、总体性强
2、直观
不足：
1、详情信息显示的有限
场景：
适合总-分结构或表现时间段内的趋势走向的展示
次导航
1、抽屉式
特点：
突出核心功能，隐藏其它功能。
优点：
1、不占用宝贵的屏幕空间，让用户首先能聚焦于内容
2、导航的菜单项目不受数量限制，应用的所有信息组织入口都可以加入到抽屉导航中
3、扩展性强，配置灵活，一些常用的快捷操作功能和低层级界面入口也能直接放置进抽屉导航中
不足：
1、隐藏框架中其他入口、用户需要一定记忆成本
2、对入口交互的功能可见性要求高
3、容易与应用内的其他交互模式冲突，比如侧滑手势操作
场景：
适合功能较多，信息结构较复杂的产品，用户的注意力聚焦在主信息流的浏览上，不用频繁切换“子产品模块”，且扩展性比较好
2、超级菜单式
特点：
默认具有选中态，导航/分类比较多，可快速切换到另一个导航/分类。
优点：
1、层次展示清晰
2、浏览时产生流畅体验
3、可展示内容较长的标题
4、可展示标题的次级内容
不足：
1、菜单之间的跳转要回到初始点
2、同级内容过多时，用户浏览容易产生疲劳
3、排版灵活性不是很高
4、只能通过排列顺序、颜色来区分各入口重要程度
场景：
比较复杂的信息架构，导航分类比较多。
3、弹出式
特点：
没有跳出感，适合内容比较少和简单操作的呈现。
优点：
1、在原有界面上进行操作，不必跳出界面，体验比较连贯
2、在用户需要的时候才显示（重要提示除外），不主动干扰
不足：
1、显示的内容有限
场景：
适合内容较少的显示
4、图片轮盘式
特点：
节省空间，可使用箭头，圆点或显示不全的图片告诉用户还有更多的内容可查看。
优点：
1、查看更多内容不必跳出界面，体验连贯。
2、节省空间。
不足：
横屏宽度有限，更多的内容有数量上限制，如微信只展示5个好友信息。
场景：
适合图片或信息组块更多的展示方式。
小结
以上都是基本布局，在实际的设计中，我们可以像搭积木一样组合起来完成复杂的界面设计，例如手游吧的顶部导航用的是选项卡，下面采用多面板的布局。
另外要考虑到各种布局的优劣，并有最完美的布局，要考虑信息结构、重要层次以及数量上的差异，提供最适合的布局，以增加产品的易用性和交互体验。
https://www.xuanfengge.com/category/h5/h5-h5
1、手机界面设计的技巧——用户界面的态势感知
如果你认为你的界面设计不够强大，为什么不让它更智能呢?这就解释了情景感知的概念:情景感知使应用程序能够识别用户正在使用的情景和状态，并根据这些信息影响用户。上下文感知应用程序可以识别当前的情况，并基于当前的背景信息(如用户的位置、身份、活动和时间)给出合理的反馈。当你在午餐时间打开地图服务时，你不需要搜索。它将为您提供当前位置信息和附近的餐饮服务。随着应用设计和市场需求的发展，态势感知将成为一个持续繁荣的发展方向。
2、手机界面设计的技巧——准物化回归
从微软到苹果，再到谷歌，它们正变得越来越非物质化，而伪物质化设计似乎成了同义词。然而，扁平化2.0开始引入许多伪物化元素，使得这种区别现在不那么明显了。在未来，我们将在更多的地方看到虚拟物化设计。无论是永不过时的复古风格，还是手机app设计中对细节和质感的需求再度兴起，虚拟物化设计确实在适度适时地逐渐回归。
以上便是关于手机界面设计的技巧介绍了，希望它能帮助我们开拓，并确定属于我们自己的设计风格，这一点非常重要。如果您想了解更多关于ui设计的相关设计技巧及素材等可以点击本站的其他文章进行学习。
图片
我们都知道，设计一套完整的APP UI界面其实是比较复杂的，从需求分析到市场定位，从草稿到拟方案，从创意元素的组合到想法沉淀，从设计规范到突破传统，从纸上到电脑上，从个人到团队，或者从团队到个人，从素材收集到素材处理，从0思路到偶然等等，其实设计一个APP会碰到太多太多的问题，
所以要求我们移动APP设计者必须按照下面的三大准则和八项标准来设计。
【手机APPUI界面设计】三大准则：
（1）不乱用颜色。一个页面内不要超过3种颜色
（2）不乱用大图片当背景。你是想让用户看你的背景图片呢，还是看你的内容？
（3）不乱填充内容。页面元素如果太满，给读者压抑感，无所适从。
图片
【手机APPUI界面设计】八项交互标准：
1.色彩舒适度
一个第一眼看上去就杂七杂八色彩，或者完全没有主次之分的简洁，或者看上去就没有视觉舒适度的饱和度或者明暗度不搭调的色彩，我想它已经没法继续长久看下去了。因为人第一眼看到的，就是一个事物的颜色，才是形状。
2.文字的主次
任何设计作品都要传达信息传达思想，如果一套设计中字体乱啪啪，文字大小和文字粗细，间距行距都没有一个“主次逻辑”，我很难挖掘到自己想要的信息，不论设计是酷炫复杂的还是简洁清爽的，光能展现信息时远远不够的，信息文字的每一个细节，都决定了一个设计要传达的思想主次，记住，你是要引导别人去看，而不是别人引导你去设计。这世上没有一个真正定死的文字标准，但是最基本的，至少让别人看清你的文字是写的什么吧，所以，文字之间的不同色彩，也是能让文字主次突出的方面
3.信息可读性
有了文字基础，处理好每个模块的布局，色块，插图，背景等方面，会让你的信息有较强的可读性。别跟着你的爱好走：我喜欢酷炫，我喜欢简洁，我喜欢优雅，我喜欢二货。把设计作品中你最想传达的信息传达出去，就算某些信息被别人忽略了，你依然是成功的。如果用户连看都不想看，连最基本的信息都没法传达，那作品的任何风格，都只是口头吹嘘。你要定好你的目标用户，你想吃遍全中国乃至全世界，全行业？除非，没有除非了。
4.UI识别性
这一点在图标上味道非常浓，不论你这一点在图标上味道非常浓，不论你设计的是扁平化还是拟物化还是梵高风格，不一定要3秒看出图标的意思，也要让人欣赏这个图标美感的同时，大概“心里知道”，这个图标要传达个什么。一个网站banner的设计，一个页面的导航设计，都要考虑到识别性，你想传达这个图像的什么内涵？你这个图形的意图是什么？都是设计者需要考虑的。
图片
5.交互性与易用性
上面的工作都做得差不多了，剩下的就是使用了。不论是手机主题还是网站设计还是APP还是游戏，要让别人快速上手，能玩，能用，甚至用的简单，玩的简单，就算你采用银河系都没有的酷炫交互，或者采用地球上已经濒临灭绝的土逼设计，达到方便使用的优良品质，你的作品再牛逼到没法看，也有牛逼的地方能看。
6.思想，生活的传达
作品是什么样，一般能从另一个层面看出一些设计师对生活对工作对感情的态度和状态，所以别小看一个作品的力量，它可能就是传达你自己真实内心的一个媒介，可能你并未发现，但是旁观者已经发现你了。
所以说，融入生活得设计是比较难的，同时，也是最容易的，你是否把你最粗心最让人厌倦的一面暴露到设计作品中？是否把你最细致入微最耐人寻味的一面传达到用户心里？一张图就可以看出（当然这不代表全部啊，某些设计师的作品看几天你也看不出他是什么人过着什么生活的）
7.微小的细节和微小的创意
别说这个东西就是你创造的，因为上帝比你创造的还早。UI设计中一根线，一像素，色彩饱和度的细微差别，一个小渐变，一个字体的选择，画布的大小，用笔的粗细，这些小细节，虽然不是人人都能说得出，但是能第一眼“看在心里，感觉到骨子里”，所以就算不说，细节也是能让任何人第一时间感觉到的，别忽视每一个小细节，它说不定就是你成功的堡垒，也是一有机会就让你失败的利箭。
细节中，你就能诞生一些微小的创意，小创意创造大创意，没有细节，何谈创意？那就只是纸上谈兵，口说无凭。
8.生活中表现手法的引用
一个简单的视差，一个简单的坠落，一个简单的玻璃破碎，一个简单的树叶飘落，一张纸简单的角度摆设，一盆植物简单的远近拍摄，这些东西，都能创造你无穷的表现手法，当然，这也是比较难的，能将生活融入设计，是需要积攒的，不是一两天能体会到的。
Pixso协同设计无缝衔接以往工作，支持Sketch、XD、SVG等文件导入导出，自由进行Sketch的文件格式转换。并且文件自动保存到云端，一键回溯到任意历史版本，再也不用担心文件丢失。素材库集成众多大厂优秀的设计系统，所有 UI 设计师均可直接拖拽复用，从此省去大量模块化设计环节的重复劳动。团队成员面对一个复杂的设计项目，不再需要等主视觉完成后再进行子页面设计。在该工具中完全可以多人云端协作设计，实时同步字号、边框、颜色等各种细节。并且可以创建一个组件，在任何地方重复使用它，当主组件样式更新，所有组件将自动同步发生改变。
想要了解更多关于手机UI设计的相关信息推荐选择Pixso协同设计。Pixso不仅实现了和 Sketch、Adobe XD的无缝衔接，更基于优秀的组件变体、自动布局、实时协作等特色功能，团队成员面对一个复杂的设计项目，不再需要等主视觉完成后再进行子页面设计，让UI设计师在网页上就可以尽情自由创作。
