设计规范-导航、弹窗、视图

常见导航样式:

  1. 根据产品的特性,导航可以混合使用,体现形式多样化。

  2. 不能为了追求多样化,滥用导航类型。

扁平式导航:

在一级页面提供导航栏,一般处于顶部/底部,适合频繁切换的模块,方便用户在不同的模块间操作。

例:微信的底部导航栏、小红书的顶部/底部导航栏

在这里插入图片描述

分层式导航:

在每个页面都只做一次选择,直到到达目标页面,要想到达另外的目标页面, 你必须重回之前的步骤或是从头开始重新选择。适合目的性强,但使用频率不高的模块。

例:手机设置、messenger

在这里插入图片描述

舵式导航:

在扁平式导航的基础上增加一个更扁平的入口,是一种标签导航数过多时的拓展方式,一般以+号呈现。

例:闲鱼的发布、百度知道的问答、早期的微博

在这里插入图片描述

抽屉式导航:

一般采用将导航主体隐藏在app侧边的方式,以一个按钮来呼出导航,在使用完成之后再使用相同的按钮隐藏起来。

例:QQ、keep、小红书

在这里插入图片描述

沉浸式导航:

沉浸式导航又叫内容驱动式导航体验驱动式导航,是沉浸式设计的一种表现。在内容中自由地转换,或是内容本身定义导航。

例:阅读类app、游戏类app、视频类app

弹窗:

弹窗分为模态弹窗和非模态弹窗,区别是:

模态弹窗:必须点击弹窗上的按钮或关闭才能回到主任务

非模态弹窗:弹窗不会对主任务有影响,如toast提示

视图:

视图就是APP内信息主要的展现形式

列表视图:

列表视图是用分割线将内容进行区分。利用紧密、对比、重复、对齐”的原则设计每条列表的信息,使信息清晰有力地传达给用户。列表视图分为两种样式: 一种是平铺型,另一种是分组型,如下图所示。

卡片视图:

卡片视图是将同类信息归纳到一一个矩形或者圆角矩形当中,在占用较少屏幕空间的情况下将信息有组织地划分到不同的区域中。卡片可以被堆叠、覆盖、移动,这样极大地扩展了一个内容块的视觉深度和可操作性。卡片在设计形式上还可以增加边缘、阴影,使得卡片具有立体感。

集合视图:

集合视图是将同类信息用平铺的形式展现,一般以图片为主题,文字为辅助信息。集合视图用于管理一系列有序的项,并以一种自定义的布局来呈现它们。例如,系统照片将图片集合在一起,以相同大小的正方形进行展示,用户通过点击图片放大查看。

图文视图:

资讯类使用较多

网络视图:

目前绝大部分的网络视图是指直接在内容区域嵌入HTML5页面,其优点是可以在服务端直接快速发布、更新内容,而不需要在应用平台进行版本更新。

在这里插入图片描述

临时视图:

让用户只有在完成当前的任务或关闭一个信息或页面之后,才能去做其它的事情,降低了交互层级。当屏幕上出现临时视图时,用户必须通过点击按钮或是其它特殊方式才能退出。

模态视图:

模态视图与子页面的主要区别在于:

  1. 子页面是从主任务下分支的另一任务。
  2. 模态视图是浮于主任务之上,暂停了主任务进程,且服务于当前主任务的。

用模态视图有以下几个特点:

  1. 占据父视图的部分区域且有明确的完成/关闭按钮。
  2. 包含完成当前任务所需的文字和控件。
警告视图:

用户在操作APP时,涉及到敏感操作或获取用户的位置、相册、相机等就需要一个视图弹框来确认操作是否继续进行,这时候用到的临时框就是由标题、正文、按钮等组成的警告视图。

  1. 当需求不明显时,向用户解释为什么你的 App 需要这些信息,好像是21年新规定。
  2. 不要随便获取权限,对运行 App 至关重要的信息在 App 一启动时就请求授权,比如网络、位置、麦克风…
操作列表:

比如点击分享按钮后弹出的选项就是操作列表,由于操作项过多以列表形式展示。

吐司提示:

Toast不需要用户操作,一般维持的时间是2秒到3秒后自动消失。时间太短用户没办法感知,时间过长又没有必要。

如:由于移动端的使用场景很复杂,用户执行了某一个操作时,很多时候APP并不能立即反馈给用户操作结果,这个时候弹出一个Toast提示用户已经执行了该操作,会显得很人性化,这就是用户体验。

数据键入:

手动输入信息都是一个乏味的过程。大量的手动键入会导致用户没有耐心放弃产品。

数据键入注意点:

  1. 能选择就不填,降低操作频次与复杂度
  2. 有已知的数据可以分析最好不要用户重新输入
  3. 有默认值可用最好也不要用户重新输入
  4. 要键入一次搞定不要反复操作
  5. —能实时校验时不要等到最后再告诉用户错了

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/572035.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

f3arra1n3.4.1版本_GDB 10.1版本发布了

更多互联网新鲜资讯、工作奇淫技巧关注原创【飞鱼在浪屿】(日更新)GDB的10.1版,即GNU调试器,现已发布。GDB是Ada,C,C ,Fortran,Go,Rust等许多源代码级的调试器。GDB可以定位(调试正在运行的程序…

使用密钥登录CentOS系统(基于密钥的认证)

在Window客户端有多种软件可以登陆ssh,比如putty,xshelll,secureCRT,我就以xshell为例设置使用公钥和私钥验证登陆服务器。 使用Xshell密钥认证机制远程登录Linux 1、使用xshell生成公钥 Key Type 选择RSA (SSH1只支持…

原型的价值与注意事项

原型的价值: 对于产品经理来讲在工作中原型的价值主要体现以下三个部分: 在原型设计阶段花费的时间,可以避免额外的工作,节省总体时间、精力和成本。 原型是展示、讲述、体验之源,常用于做早期评审,以确保…

华为8545m5补全shell_华为hs8145v5 改华为界面和默认超密(一)

重点从电信界面改华为界面要点:修改配置文件必须要有 Root 权限,也就是要能登陆 Telnet 和补全 Shell 。开 Telnet 方法:1.需要有超密,登陆到电信管理页面,打开 Telnet 选项。在后台页面点击“安全”--->“ONT访问控…

08、单链表编程考点

单链表编程考点 1、将单链表的第一个结点放在单链表的最后一个结点的后面 /* 设h是无头结点的单链表,如果线性表h的长度不小于2,则将首元结点删除并插入到表尾 将单链表的第一个结点放在单链表的最后一个结点的后面 */ typedef struct node {elementype …

ios nstimer实现延时_iOS中定时器NSTimer的使用

1、初始化 (NSTimer *)timerWithTimeInterval:(NSTimeInterval)ti target:(id)aTarget selector:(SEL)aSelector userInfo:(id)userInfo repeats:(BOOL)yesOrNo; (NSTimer *)scheduledTimerWithTimeInterval:(NSTimeInterval)ti target:(id)aTarget selector:(SEL)aSelector us…

小程序产品的特点

认识小程序: 小程序:一种不需要下载安装,即可使用的应用。 小程序的特点: 开发成本低。 流畅的使用体验。 庞大的流量池可供使用。 用完即走,不占用手机内存,但是有使用记录供用户可方便的再次找回产品。…

数据库优化 - 多列索引经典题目

题目 假设某个表有一个联合索引(c1,c2,c3,c4)一下——只能使用该联合索引的c1,c2,c3部分 A where c1x and c2x and c4>x and c3x B where c1x and c2x and c4x order by c3 C where c1x and c4 x group by c3,c2 D where c1x and c5x order by c2,c3 …

nemesis什么车_狂野飙车9TrionNemesis介绍 S级车Trion复仇女神属性详解

狂野飙车9S级车Trion Nemesis介绍,狂野飙车9S级车Trion复仇女神属性详解,下面雨落就为大家带来狂野飙车9S级车Trion复仇女神的改装升级所需卡牌已经金币等攻略。【赛车属性】:S级车Trion Nemesis初始油量:4补充时间:15…

网站设计规范

网站不同于移动应用: 屏幕适配(屏幕尺寸、分辨率)。 交互方式不同,鼠标相对手指具备更精准的点击范围,有更多的控件状态。 在设计网站原型时,并没有具体的控件大小和条栏规范,需要注意相关设计…

产品设计七大定律

Alan Cooper(交互设计之父):除非有更好的选择,否则就遵从标准。 许多设计准则都基于人类心理学:人们如何感知、学习、推理、记忆,以及把意图转换为行动。 菲茨定律: 菲茨定律用来预测某点到目…

函数的定义

什么是函数? 先上一个函数格式, def 函数名(参数1,参数2):       #函数的定义函数名:这是一个解决什么问题的函数:param 参数1: 传入一个参数:param 参数2: 传入第二个参数:return: 返回一个列表                #函数…

插入网站连接_带你了解网站设计的五个基本步骤

网站制作设计并不是一件简单的事情,一个好的网站不但里面包含的内容要全面,而且还要能够持续运转,为我们带来流量。下面简单为大家介绍一下网站设计的基本步骤,希望能够帮助大家更好的了解网站建设。网站设计1、站点定位确定网站的…

内容型的产品该怎么做?

内容产品: 什么是内容型产品:以图文、视频/直播、音频等形式提供服务的产品形态。 例:抖音、快手、微博、今日头条、知乎、得到… 内容产品的发展: 内容产品生态: 内容产品用户角色及职责: 内容模型&#x…

ssh免密码登陆(三个节点master slave1 slave2)详细带命令版

准备工作: 首先修改三个节点的名称分别为master slave1 slave2。建议以vim /etc/sysconfig/network的方式修改 修改三个节点的/etc/hosts文件 如下形式: 192.168.43.202 master 192.168.43.253 slave1 192.168.43.113 slave2 前面为各自机器对应的IP 配置…

复杂电路简化经典例题_一天搞定考试系列之电路原理(3)

经过了前两章对阅读理解学习法的实践运用,想必大家知道该怎么做了,至于效果,我不敢保证对每个人都有效,欢迎大家实践后给予反馈,大家一起寻找更好的方法。下面进入第三章,需要说明的是前两章虽然简单但是很…

【前端】Github Pages 与域名关联简明教程

Github Pages 与域名关联简明教程 1. 向你的 Github Pages 仓库添加一个CNAME(一定要*大写*)文件 其中只能包含一个顶级域名,像这样: example.com如果你是用 hexo 框架搭建博客并部署到 Github Pages 上,每次 > hexo g > hexo d 后会把…

登录注册页怎么做

app常见页面: 引导页: 概念:第一次安装App或者更新App后第一次打开App时所展示的可以滑动的页面。 作用:主要是用于展示产品本身的一些核心功能点或者特色。 启动页: 概念:App被用户打开后,在启…

怎么把东西去掉修图_很多人花几千块学习商业修图,其实跟把钱扔了一样。?...

很多人花几千块学习商业修图,其实跟把钱扔了一样。我所说的商业修图是指那些杂志、明星修图,很多人觉得修杂志、明星就是大师,就非常厉害,其实商业修图重要的不是技术,而是资源、圈子;大部分人看作品也不是…

算法入门经典-第七章 例题7-2最大乘积

最大乘积 输入n个元素组成的序列s&#xff0c;你需要找出一个乘积最大的连续子序列。如果这个最大的成绩不是正数&#xff0c;应输入-1&#xff08;表示无解&#xff09;。输入0结束输入。1<n<18,-10<Si<10。 样例输入&#xff1a; 3 2 4 -3 样例输出&#xff1a; …