协众信息技术APP视觉设计规范

news/2024/4/23 15:22:04/文章来源:https://blog.csdn.net/UIKKA/article/details/130327761

移动端显示有限,尽量突出界面功能网站中的导航可以做成百宝箱,显眼容易找到网站文字可以多些,多元化介绍:移动端少一些,简介明了  
  网站一个页面由很多个版块:移动端需要很多分层才可以表现移动端文字可以左对齐或者居中对齐,不要右对齐  
  APP设计规范  
  小程序与APP区别:导航(图标)有区别  
  设计风格:写实,简约,扁平  
  IOS常用尺寸:750*1334  
  中文:苹方  
  英文:FSB  
  android常用尺寸:720*1280  
  边距和间距  
  在移动端页面的设计中,页面中元素的边距和间距的设计规范是非常重要的,一个页面是否美观、简洁、是否通透和边距间距的设计规范紧密相连,所以说我们有必要对它们进行了解。  
  全局边距  
  全局边距是指页面内容到屏幕边缘的距离,整个应用的界面都应该以此来进行规范,以达到页面整体视觉效果的统1全局边距的设置可以更好的引导用户竖向向下阅读。  
  在实际应用中应该根据不同的产品气质采用不同的边距,让边距成为界面的一种设计语言,常用的全局边距有32px、30px、24px、20px等等,当然除了这些还有更大或者更小的边距,但上面说到的这些是最常用的,而且有一个特点就是数值全是偶数。  
  以iOS原生态页面为例,“设置”页面和“通用”页面都是使用的30px的边距。  
  再以微信和支付宝为例,他们的边距分别是20px和24px。  
  通常左右边距最小为20px,这样的距离可以展示更多的内容,不建议比20还小,否则就会使界面内容过于拥挤,给用户的浏览带来视觉负担。30px是非常舒服的距离,是绝大多数应用的首选边距。  
  还有一种是不留边距,通常被应用在卡片式布局中通栏显示,比如站酷APP(当然站酷APP也进行了改版,首页已经采用了不通栏的卡片式设计)。这种通栏显示的设置方式,更容易让用户将注意力集中到每个图文的内容本身,其视觉流在向下浏览时因为没有留白的引导被直接割裂,造成在上停留更长时间。  
  卡片间距  
  在移动端页面设计中卡片式布局是非常常见的布局方式,至于卡片和卡片之间的距离的设置需要根据界面的风格以及卡片承载信息的多少来界定,通常最小不低于16px,过小的间距会造成用户的紧张情绪,使用最多的间距是20px、24px、30px、40px,当然间距也不宜过大,过大的间距会使界面变得松散,间距的颜色设置可以与分割线一致,也可以更浅一些。  
  以iOS(750*1334px)为例,设置页面不需要承载太多的信息,因此采用了较大的70px作为卡片间距,有利于减轻用户的阅读负担,而通知中心承载了大量的信息,过大的间距会让浏览变得不连贯和界面视觉松散,因此采用了较小的16px作为卡片的间距。

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

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

相关文章

展会邀请 | 虹科诚邀您4月26-28日前来参观成都国际工业博览会

HONGKE NEWS 2023 成都国际工业博览会精准聚焦中国智能制造,将通过展示自动化和工业机器人技术、新一代信息技术、金属加工、节能与工业配套、新材料等全行业最新技术和解决方案,完美呈现智能工业产业链中的创新技术及产品的有效融合。 2023年4月26日-…

高效编程----VSCode+ChatGPT插件

VSCode中使用ChatGPT插件 首先在VSCode中打开扩展面板,搜索ChatGPT,安装蓝色圈出插件,如图所示: 安装完成后,需要重启VSCode 注册账号,如图所示: 然后在ChatGPT对话框中输入信息即可使用&#…

Python 实验四 常用数据结构(1)

1.从键盘输入一个正整数列表,以一1结束,分别计算列表中奇数和偶数的和。 n int(input("请输入一个正整数:")) list [] while n ! -1:list.append(n)n int(input("请输入一个正整数:")) else:print("…

【Linux网络】部署YUM仓库及NFS服务

部署YUM仓库及NSF服务 一、YUM仓库1.1、YUM仓库概述1.2准备安装来源1.3在软件仓库加载非官方RPM包组1.4yum与apt 二、配置yam源与制作索引表2.1配置FTP源2.2配置国内在线yum源2.3在线源与本地源同时使用2.4建立软件包索引关系表的三种方法 三、nfs共享存储服务3.1安装软件&…

Django框架之创建项目、应用并配置数据库

django3.0框架创建项目、应用并配置数据库 创建项目 进入命令行 新建一个全英文的目录 进入目录 输入命令 django-admin startproject project 项目目录层级 查看当前目录层级 tree /f 目录文件说明 创建数据库 做一个学生管理系统做演示,使用navicat创建数据…

ML之DR:sklearn.manifold(流形学习和降维的算法模块)的简介、部分源码解读、案例应用之详细攻略

ML之DR:sklearn.manifold(流形学习和降维的算法模块)的简介、部分源码解读、案例应用之详细攻略 目录 sklearn.manifold的简介 sklearn.manifold(流形学习和降维的算法模块)的概述 外文翻译 sklearn.manifold的部分源码解读 sklearn.manifold的简介 sklearn.ma…

Bugku——应急加固1

来打一下bugku的应急加固靶场,靶场链接:https://ctf.bugku.com/ctfplus/detail/id/2.html 启动环境 1、JS劫持域名 直接访问ip地址,发现是xxx学院二手交易市场,随后被劫持跳转到了一个博客页面。 博客地址就是第一个flag&…

Android音视频开发-OpenGL ES正交投影实现方法

本文实例为大家分享了OpenGL ES正交投影展示的具体代码,供大家参考,具体内容如下 绘制正方形 在最开始绘制的六边形里面好像看起来挺容易的,也没有出现什么问题,接下来不妨忘记前面绘制六边形的代码,让我们按照自己的…

Ubuntu下打开QtCreator,环境变量(PATH、LD_LIBRARY_PATH等)与预期不一致的问题

现象展示 在Ubuntu中,安装好Qt之后,可以在系统桌面的左下角找到启动图标 但是,这种方式启动的QtCreator所读取到的环境变量和我们从命令行读取到的不一致: 可以看到,明显少了这个:/opt/ros/humble/bin 因…

很合适新手入门使用的Python游戏开发包pygame实例教程-02[如何控制飞行]

前面一篇博文,我们让飞机动起来了,但不是那么完美,我们继续来完善我们的游戏代码,本篇博文主要介绍获取按键的方式已经飞行的控制。 文章目录 一、获取按键的三种方式1、通过event.get配合pygame.key枚举2、通过event.get配合ord…

微积分入门

文章目录 前言初期积分微分微积分问题 后期极限 ε \varepsilon ε- δ \delta δ极限勒贝格积分 结语 前言 微积分总共走过了两个时期。首先是牛顿和莱布尼茨利用无穷小量定义微分和积分,并且发现了微分和积分的关系,这是第一个时期,这时的…

设计模式——组件协作模式之模板方法模式

文章目录 前言一、“组件协作” 模式二、模板方法模式1、动机2、源码分析讲解①、结构化软件设计②、面向对象软件设计 三、模板方法模式定义四、结构要点总结 前言 一、“组件协作” 模式 现代软件专业分工之后的第一个结果是 “框架与应用程序的划分”,“组件协作…

Cuckoo Filter

其他判重数据结构 Bloom Filter 无法支持删除和计数的功能,需要更多的存储空间来存储数据 因为在CS中,删除和计数是常见的操作,但是这会对布隆过滤器的存储空间产生影响,同样为了实现这一操作,需要更多的存储空间 数…

ArcGIS Pro导航工具

主要导航工具为浏览工具 、屏幕导航器 、书签 、转到XY工具 。 其它还包括链接视图、地图比例(2D)、场景高度(3D)、暂停并刷新绘制、照相机属性、在3D模式下导航、键盘快捷键等。 1 主要导航工具 地图和场景的默认工具为浏览工具…

C++ “类与对象”

类与对象的概念 类相当于是结构体的声明,是结构体的设计图,而对象是利用设计图的创造的产物. (1).类的大小计算 类的大小计算时与结构体类似,但函数是不计入大小的(函数放在单独的公共空间). 在…

Unity API详解——Object类

Object类是Unity中所有对象的基类,例如GameObject、Component、Material、Shader、Texture、Mesh、Font等都是Object的子类。本博客介绍Object类的一些实例方法和静态方法。 一、Object类实例方法 在Object类中,涉及的实例方法主要有GetInstanceID方法…

8. 优先队列

8. 优先队列 普通的队列是一种先进先出的数据结构,元素在队列尾追加,而从队列头删除。在某些情况下,我们可能需要找出队列中的最大值或者最小值,例如使用一个队列保存计算机的任务,一般情况下计算机的任务都是有优先级…

ROS1学习笔记:常用可视化工具的使用(ubuntu20.04)

参考B站古月居ROS入门21讲:常用可视化工具的实现 基于VMware Ubuntu 20.04 Noetic版本的环境 文章目录 一、日志输出工具:rqt_console二、绘制数据曲线:rqt_plot三、 图像渲染工具:rqt_image_view四、图形界面总接口:r…

kong(4):限流配置

Kong 提供了 Rate Limiting 插件,实现对请求的限流功能,避免过大的请求量过大,将后端服务打挂。 Rate Limiting 支持秒/分/小时/日/月/年多种时间维度的限流,并且可以组合使用。例如说:限制每秒最 多 100 次请求&…

初识Android内存优化

一、简介 Android 内存优化是指优化 Android 应用程序的内存使用,以减少可用内存的消耗,提高应用程序的性能和可靠性。Android 内存优化可以通过减少内存使用量,减少对资源的消耗,以及提高内存利用率来实现。 安卓系统对每个应用…