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

常见导航样式:

  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访问控…

小程序产品的特点

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

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

题目 假设某个表有一个联合索引(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 …

网站设计规范

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

产品设计七大定律

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

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

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

内容型的产品该怎么做?

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

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

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

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

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

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

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

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

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

h5页面生成图片分享到微信js_html2canvas 动态生成微信分享海报的优质js库

如何把网页上的内容用javascript来实现截图&#xff1f;今天分享的html2canvas就可以。介绍在微信项目中经常会遇到动态生成海报的需求&#xff0c;Web前端合成图片往往会使用canvas。canvas虽然强大&#xff0c;但用来合成海报非常繁琐&#xff0c;一不小心就几百行代码了。而…

expires为session_面试必问:session,cookie和token的区别

点击上方蓝字关注我们 !session&#xff0c;cookie和token究竟是什么简述cookie&#xff0c;session&#xff0c;token作为面试必问题&#xff0c;很多同学能答个大概&#xff0c;但是又迷糊不清&#xff0c;希望本篇文章对大家有所帮助http是一个无状态协议什么是无状态呢&…

测试用例设计方法 - 场景分析法

现在的软件几乎都是用事件触发来控制流程的。象GUI软件、游戏等。事件触发时的情景并形成了场景&#xff0c;而同一事件不同的触发顺序和处理结果就形成了事件流。这种在软件设计方面的思想可以引入到软件测试中&#xff0c;可以生动地 描绘出事件触发时的情景&#xff0c;有利…

Lucene第一讲——概述与入门

一、概述 1.什么是Lucene? Lucene是apache下的一个开源的全文检索引擎工具包。 它为软件开发人员提供一个简单易用的工具包&#xff08;类库&#xff09;&#xff0c;以方便的在目标系统中实现全文检索的功能。 2.能干什么&#xff1f; 主要运用&#xff1a;全文检索 3.全文检…

(一)svn介绍

项目管理中的版本控制问题 通常软件开发由多人协作开发,如果对代码文件、文档等没有进行版本控制&#xff0c;将会出现很多问题&#xff1a; 备份多个版本&#xff0c;占用磁盘空间大解决代码冲突困难容易引发BUG难于恢复至以前正确版本无法进行权限控制项目版本发布困难什么是…

训练不出结果_训练赛惨败SKT?FPX直播透露拿冠军原因!Karsa再谈离开RNG?

都说人逢喜事精神爽&#xff0c;小凤凰拿了世界冠军当然更爽。一回国就开启了快乐直播&#xff0c;人均阴阳怪气&#xff0c;信息量巨大&#xff0c;让我们一起来康康吧&#xff01;“刘青松赢了装自己很淡定&#xff0c;其实耳机里叫得最大声。”“把林炜翔冠军奖牌给大家抽了…

linux ns级定时器_预热 | 万众期待的单片机、Linux二合一的STM32MP157开发板亮相

STM32mp157 GUI操作体验视频GUI架构简介支持多种应用场景的HMI2.0应用&#xff0c;根据应用的类型将整个UI分为五个大类&#xff1a;多媒体&#xff0c;智能家电&#xff0c;卫生医疗&#xff0c;公共服务&#xff0c;系统。均支持于100ask_stm32mp157_pro硬件开发平台&#x…