下载文档原格式
在线学习好工作/ APP界面框架设计中常用的10大模式详解随着移动互联网的发展，移动app已经成为了每个互联网公司的标配了，那作为产品经理，我们如何设计出更加符合用户体验的app产品呢？今天和大家分享的就是10中最常见的app界面光甲设计模式，一起来看看吧。
1.标签导航标签导航是十大界面框架设计里最常用的界面框架设计，也是被业界之内公认的一种普遍使用的页面框架设计。
那么这种页面框架设计在作业方面对一个用户来说也是最常见的一种页面框架设计，比如说微博、微信、手机百度、支付宝、淘宝，这些我们所谓的超级APP都是运用的标签导航，无一例外。
从这个角度也可以看出来，优秀的产品用标签导航这种页面框架设计是非常普及的。
标签导航位于页面底部，标签的分类最好可以控制在5个之内。
优点1）标签导航能够让用户清楚当前所在的入口位置。
比如对于微信来说，无论用户在“发现”还是“对话框”里面，用户都能通过底部的高亮区域来划分当前所处的这个产品结构的区域。
无论是当前位置的判断，还是要找这个入口，都比较方便，比如对于微信来说，很容易都过标签导航找到“朋友圈”。
2）轻松在各入口间频繁跳转且不会迷失方向。
比如对于微信来说，微信团队不仅希望我们拿微信来聊天，还希望我们拿微信来逛朋友圈、购物、支付、滴滴打车等等，那么如果能够让用户在不同的入口间实现频繁的跳转，那这时用标签导航是最合适不过的。
3）直接展现最重要入口的内容信息。
这有两层意思，第一层就是它能展示出来最重要的入口，比如拿微信来说有那么多的重要入口，显然“微信对话框”最重要，那么他们默认的把微信对话框作为主入口。
同样微博最重要的是首页，所以默认把微博首页作为最主要的入口。
其次，入口不仅可以展示，入口里面的信息也可以展示。
缺点：功能入口过多时，该模式显得笨重不实用。
怎么理解“功能模块过多”，比如说现在标签导航，一般情况下功能入口控制在5个以内，我们也会遇到6个的情况，但那种产品一般来说比较复杂，最少会是3个，最多5到6个。
uni-app开发注意事项及常⽤样式官⽅推荐：v-if写在<template/>标签中，v-for写在<block/>标签中它们仅仅是⼀个包装元素，不会在页⾯中做任何渲染，只接受控制属性阻⽌冒泡事件：.stop例如：@tap.stopthis.$options.methods.test();在onload⽅法中添加uni.getCurrentSubNVue().addEventListener("show", function() {console.log("subNVue⼦窗体已显⽰！")});uni.getCurrentSubNVue().addEventListener("hide", function() {console.log("subNVue⼦窗体已隐藏！")});⾸先，引⼊⼦组件⽂件，然后⽤ref给⼦组件⼀个id标识，然后通过this.$refs.mainindex.childMethod();调⽤⼦组件⽅法1、只有text标签可以设置字体⼤⼩，字体颜⾊2、布局不能使⽤百分⽐3、只能使⽤class选择器4、border不⽀持简写5、background不⽀持简写6、.nvue 页⾯的布局排列⽅向默认为竖排（column），如需改变布局⽅向，可以在 manifest.json -> app-plus -> nvue -> flex-direction 节点下修改，仅在 uni-app 模式下⽣效。
7、nvue的uni-app编译模式下，App.vue 中的样式，会编译到每个 nvue⽂件display: flex; //将对象作为弹性伸缩盒显⽰display: inline-flex; //将对象作为内联块级弹性伸缩盒显⽰⽗元素默认根据⼦元素宽⾼⾃适应//主轴⽅向flex-direction: row; //项⽬排列⽅向为⽔平⽅向，从左端开始flex-direction: column; //主轴为垂直⽅向，起点在右端//如何换⾏flex-wrap: nowrap; //项⽬不换⾏排列flex-wrap: wrap; //换⾏排列，第⼀⾏在上⽅flex-wrap: reverse; //换⾏排列，第⼀⾏在下⽅//主轴对齐⽅式justify-content: flex-start //左对齐justify-content: flex-end //右对齐justify-content: center //居中justify-content: space-between //两端对齐，项⽬之间间隔相等justify-content: space-around //每个项⽬两侧间隔相等//项⽬在交叉轴上对齐⽅式align-items: center; //垂直居中align-items: flex-start; //交叉轴起点对齐align-items: flex-end; //交叉轴终点对齐//多跟轴线的对齐⽅式align-content: center; //垂直居中align-content: flex-start; //交叉轴起点对齐align-content: flex-end; //交叉轴终点对齐position:sticky //粘性定位(基于⽤户的滚动位置来定位，使⽤时需指定特定阈值，如top:0) position:static //默认定位(没有定位)position:fixed //固定定位(固定在窗⼝位置，窗⼝滚动也不会移动)position:relative top:10px //相对定位(相对其正常位置定位)position:absolute //绝对定位(相对于最近的已定位⽗元素，如果没有已定位⽗元素，则相对于<html>) //https:///liangdecha/p/9566407.html:nth-child()选择器，选择器选区⽗元素的第N个⼦元素，与类型⽆关:nth-child(odd)奇数:nth-child(even)偶数//https:///zh-CN/docs/Web/CSS/::before::before创建⼀个伪元素，其将成为匹配选中的元素的第⼀个⼦元素border-radius:30upx; //圆⾓半径text-indent:20px //⾸⾏缩进letter-spacing:1px //字间距vertical-align: middle; //图⽚垂直居中z-index //重叠元素的堆叠顺序transform: rotate(45deg); //旋转元素45度(菱形)//https:///skura23/p/6505352.html:active，元素被点击时变⾊，但颜⾊在点击后消失:focus，元素被点击后变⾊，且颜⾊在点击后不消失//https:///zh-CN/docs/Web/CSS/linear-gradientbackground: linear-gradient(#74AADA, #94db98); //渐变⾊End！。
移动应用开发技术中常用的界面元素和属性详解移动应用开发技术正在迅速发展，成为了我们日常生活的一部分。
而一个出色的移动应用程序离不开良好的用户界面设计。
在移动应用开发中，界面元素和属性扮演着至关重要的角色。
本文将详细介绍一些常用的界面元素和属性，帮助读者更好地理解和应用于实际开发中。
一、按钮（Button）按钮是移动应用中最常见的界面元素之一。
它可以用于触发某个操作或切换视图。
按钮一般具有点击效果，用户点击按钮后，应用程序会响应相应的功能。
在移动应用开发中，按钮的属性包括文字内容、颜色、大小、位置等。
开发者可以根据自己的需求来设置按钮的属性，从而实现不同的交互效果。
二、文本框（TextField）文本框用于接收用户的输入。
在移动应用中，文本框通常用于用户注册、登录、搜索等场景。
文本框的属性包括字体、字号、颜色、边框样式等。
通过设置文本框的属性，可以使其与应用的整体风格保持一致，并提供良好的用户体验。
三、列表视图（ListView）列表视图是一种展示多个项目的集合容器。
在移动应用中，列表视图常用于展示用户的信息、新闻列表等。
列表视图的属性包括行高、背景颜色、分割线样式等。
通过设置列表视图的属性，可以使其满足应用的样式要求，同时提供流畅的滑动体验。
四、图片视图（ImageView）图片视图用于展示图片内容。
在移动应用中，图片视图广泛应用于展示产品、用户头像等场景。
图片视图的属性包括图片资源、尺寸、缩放模式等。
通过设置图片视图的属性，可以使图片在应用中展示得更加美观、合适，并提升用户体验。
五、滑动视图（ScrollView）滑动视图是一种可以容纳更多内容而不受限制的视图容器。
在移动应用中，滑动视图常用于展示较长的文字内容、图片列表等。
滑动视图的属性包括滚动方向、滚动条样式、边缘反弹效果等。
通过设置滑动视图的属性，可以使应用在展示大量内容时更加易用和直观。
六、标签栏（TabBar）标签栏用于切换不同的视图或功能模块。
不可错过的⼿机APP常见8种界⾯导航样式前⾔：相信每⼀个移动开发⼯程师都会遇到，当⼀个项⽬开发启动时，需要考虑搭建怎么的框架。
⼀个好的框架，也会决定着⼀个APP的前途与命运。
框架的风格，现在常见的有⼋种：标签导航、舵式导航、抽屉导航、宫格导航、组合导航、列表导航、tab导航、轮播导航。
最近在⽹上收集到⼀些资料，正好和⼤家分享⼀下，感谢原作者的贡献。
当我们确定了移动APP的设计需求和APP产品设计流程之后，开始着⼿设计APP界⾯UI或是APP原型图啦。
这个时候我们都要⾯临的第⼀个问题就是如何将信息以最优的⽅式组合起来？也许我们对⽐和了解了其他⼀些常⽤的APP导航设计模式。
⽽且良好的APP导航设计模式决策对整个app的核⼼体验起到关键作⽤。
有⼀些优秀的app基于这些模式做了⼀些创新的优化⽅案，本⽂总结了⽬前通⽤且流⾏的模式，并讨论了这些模式适⽤的场景，希望帮助交互设计师更快的作出较合理的信息组织决策。
先来看看8种移动APP导航设计模式对⽐图吧！8种移动导航第⼀种：app标签导航标签导航位于页⾯底部，通常包含5个标签是⽐较合适的数量。
这种导航是⾮常常见的，如果你的应⽤需要⽤户频繁的在不同分页切换，可以采⽤这种导航。
它的缺点是会占⽤⼀定⾼度的空间。
如微信最新版的APP界⾯设计图。
app标签导航app标签导航第⼆种：APP舵式导航⽬前流⾏⼀种标签导航的变体，个⼈把它称为“舵式导航”，因为它的样式很像轮船上⽤来指挥的船舵，两侧是其他操作按钮。
当页⾯有处于同⼀层级的⼏⼤部分内容，同时⼜需要⼀个⾮常重要且频繁操作的⼊⼝，就可以采⽤这种APP导航模式。
如下图葡萄社APP。
app舵式导航app舵式导航第三种：APP抽屉式导航模式抽屉导航是讲菜单隐藏在当前页⾯后，点击⼊⼝即可像拉抽屉⼀样拉出菜单，这种导航的优点是节省页⾯展⽰空间，让⽤户将更多的注意⼒聚焦到当前页⾯。
⽐较适合于不那么需要频繁切换内容的应⽤，例如对设置、关于等内容的隐藏。
ub-f: 定义不同的box-flex属性值, 类别使用数字编号，定义不同的元素空间大小分配比例
ub-f1: 定义box-flex:1
ub-f2: 定义box-flex:2
ub-f[1-4]和ub搭配着使用
um-vp: UI Mobile ViewPort
bc-bg: body content background 基础body背景颜色uba: 定义边框
umh: UI min height ui标签最小高度, 例如umh5
c-gra: 背景底色类别, c-{色彩}[类别] ,例如c-blu, c-blu1 b-bla: border 颜色类别边框色类别
c-wh: 背景底色类别: c-{色彩}[类别],这里wh表示white us: 阴影类别: us [类别]和us-i [类别]
uc-a: ui 圆角类别
ubb: 边框类别:ub{类型}[类别]
ub: box 弹性盒子, 和ub-f[1-4]搭配使用
t-bla: t表示text, 文字色类别:t-{色彩}[类别]
ub-ac: box align center, box 居中对齐
lis: listview 空白，最小高度
ut-s: 文字缩略类别
ulev-1: 字体大小
tx-r: text-align right
res: 资源类别:res{类别} 例如res8, 但是不知道它引用自哪个文件
ub-img: box 图片资源
uh ui head 头部样式
uf ui footer 脚部样式块级元素，100%宽度
大小位置形状控制
圆角类别: uc-{类型}[类型] [类别]
uc-tl, uc-tr, uc-bl, uc-br , uc-t, uc-b, uc-r , uc-l, uc-a, uc-n, uc-tl1,
uc-tr1, uc-bl1, uc-br1, uc-t1, uc-b1, uc-r1, uc-l1, uc-a1, uc-a2, uc-a3
阴影类别: us [类别]和us-i [类别]
us,us1,us-i
比例类别:ulev[类别](由于元素的控制主要通过em来进行相对控制，ulev可以对默认比率进行放大缩小)
ulev2,ulev1,ulev0,ulev-1,ulev-2
浮动类别: ufl和ufr
限宽类别: ulim
单行类别: uinl
边距类别: uinn[类别]
uinn,uinn1,uinn2,uinn3,uinn4
最小高宽类别: um{w或h}[类别]
umh1,umh2,umh3,umh4,umh5,umh6,umw1,umw2,umw3
文字对齐类别:tx-{类型}
tx-l,tx-r,tx-c
文字缩略类别:ut-s
边框类别:ub{类型}[类别]
ubt,ubb,ubr,ubl,uba,uba1,uba2
隐藏类别:uhide
间隔类别:umar-{类型}
umar-b
色彩控制
UI2.0框架对元素的色彩划分为边框色、文字色、背景底色和背景遮盖层背景遮盖类别: c-m{类别}
c-m1,c-m2,c-m3,c-m4,c-m5,c-m6,c-m7
背景底色类别: c-{色彩}[类别]
c-blu,c-blu1, c-blu2, c-blu3, c-blu4,c-wh, c-bla,c-gra,c-gra1,c-gra2,c-gre,c-red,c-yel 文字色类别:t-{色彩}[类别]
t-bla,t-wh,t-gra,t-blu
边框色类别:b-{色彩}[类别]
b-bla,b-wh,b-gra,b-gra1,b-blu
资源控制
UI2.0框架一些常用图片资源进行了定义。
例如搜索图标等。
资源类别:res{类别}
res1,res2,res3,res4,res5,res6,res7,res8,res9,res10。
