App原型设计规范

news2024/9/28 13:22:09

cabdff1b168b3265b9c15e62d31603dd.jpeg

一、界面尺寸

1.ios分辨率

22d317a60a1fd31690caa444e9f2c76e.jpeg

2.android界面尺寸

① 安卓分辨率

e01073b2bddb685164a6a5d85c9225b9.jpeg

②常见安卓手机分辨率及尺寸

5bbdd3e51a8124648dc6e83981611014.jpeg

一般情况下大家在设计app端原型的时候,由于现在ios和安卓慢慢在趋向一致,所以基本上都只会设计一套原型,尺寸方面一般都是按照iphone6的750*1344(2倍率)进行设计,原型尺寸=实际分辨率/2,故手机原型的尺寸为375x667。如果要单独设计安卓的话,原型尺寸为360*640

二、其他尺寸及规范

1.其他内容大小规范

4039312dde21389f2f4ab9a51a8779db.jpeg

2.字体大小及样式

①样式

ios:

iOS中文字体:苹方/PingFang SC;

iOS英文字体:San Francisco Pro

安卓:

5.x以上版本:思源黑体/Noto Sans Han

5.0以下版本:Droid Sans Fallback

英文、数字:Roboto

②大小

a.一般都均采用偶数进行设置,字体大小采用4作为梯度

标题:16px;描述:12px

b.详情页,标题与正文间距,一般采用4作为梯度

12px,16px,20px

c.行间距,一般采用1.5一1.6倍

d.导航栏文字大小一般采用16px-20px

3.导航栏

427464d06d6138b752869e4d65603604.jpeg

ff3370a63cc4a31d48bc82c47fe761e3.jpeg

4.标签栏

49265fab665ff6d96f4c5a6510051010.jpeg

45f5b958a140e2fd3592ff4c7e3a0627.jpeg

5.分类入口

d961bec6a8a1c2467cf7a83a279d9e46.jpeg

b1813706243225b4ebd49a373bbab4a9.jpeg

注:

①移动端每行能同时显示的图标数目不超过5个

②图标大小双数

6.板块间距

66f24567d52616baad307af6d31045e0.jpeg

间距大小10-15px,常见为12px

7.搜索框

aede433e95686c4535a8f5957391c323.jpeg

字体大小一般为14px

8.输入框

8c7c109afef7a7ce0810a9ae2d237656.jpeg

输入框大小:20-25px

9.文字颜色(安全色)

765a283508ca1a953aabbccacda0174c.jpeg

975d8519719814af66070386e998183b.jpeg

10.导航栏下的提示栏

①颜色建议要鲜艳

②大小:28px

以上为app端绘制原型时,涉及到的一些规范及尺寸,希望能够帮助到大家,如有任何疑问或者建议,可在评论区交流

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

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

相关文章

Django 数据备份dumpdata 踩的坑

项目背景: 项目使用的是sqlite数据库,要求备份除了网络表之外的所有数据 实施方案: python3 manage.py dumpdata --exclude network.TRoute --indent 2 --format json > aq3.json 方案操作结果是: 查看aq3.json如下&#xff…

一文详解GCC7、CUDA 11.2、CUDNN部署

在部署之前,需要了解下python-tensorflow-cuDNN-CUDA版本对应关系,以便能够完全兼容下文以此版本为例部署gcc-7.3.1gpu driver-460.106.00cuda-11.2cudnn-8.1.1一.gcc部署1.安装[rootgpu ~]# yum -y install centos-release-scl [rootgpu ~]# yum install devtoolse…

《收获,不止Oracle》索引细化

1.索引知识图框 2.索引探秘 2.1 BTREE索引 索引是建在表的具体列上的,其存在的目的是让表的查询变得更快,效率更高。表记录丢失关乎生死,而索引丢失只需重建即可。 索引却是数据库学习中最实用的技术之一。谁能深刻地理解和掌握索引的知识&…

Spring gateway websocket自定义负载均衡

业务需求 公司IM服务主要基于netty实现websocket,为保证在线用户channel通道畅通故一直使用单机运行。现由于公司业务增加需要增加IM集群,由于channel通道不能缓存,故急需一套可以完整兼容之前功能的方案。 技术选型 1、采用spring websocke…

Bonree ONE荣获信通院“2022IT新治理年度明星产品”

今日,由信通院主办的“GOLFIT新治理领导力论坛”正式召开,论坛上公布了2022IT新治理年度评选活动的结果,博睿数据一体化智能可观测平台Bonree ONE凭借卓越的产品力以及优秀的用户体验,从一众产品中脱颖而出,获得“2022…

spring 事务@Transantional 失效及解决方案和总结

1、线程中方法,事务会失效 2、线程中方法,事务会失效。即使在线程方法上增加Transactional注解 3、事务正常回滚,A方法调用B的普通方法 4、事务正常回滚。A方法调用B的private普通方法 6、会抛出NullPointerException异常。 Methods ann…

rock3a: 基于自建数据集+yolov5s模型的rknn模型训练部署全流程

上一篇文章其实已经详述了模型训练到部署的整个流程,但是数据集到模型都是用的官方的coco数据集,这里为了记录开发板的模型训练到部署的整个流程,重新开了一篇文章进行记录。 首先准备数据集和rockchip官方推荐的yolov5源代码 这里需要注意的…

基于Node.js Vue企业产品展示网站

摘 要随着信息技术和网络技术的飞速发展,人类已进入全新信息化时代,传统管理技术已无法高效,便捷地管理信息。为了迎合时代需求,优化管理效率,各种各样的管理系统应运而生,各行各业相继进入信息管理时代&am…

CAN201-Computer Network(2)

文章目录4. Network Layer4.1 Router4.1.1 Input port functions4.1.2 Destination-based forwarding4.1.3 Switching fabrics4.1.4 Input port queueing4.1.5 Output ports4.2 Internet Protocol4.2.1 IP fragmentation, reassembly4.3 IPv4 addressing4.3.1 Subnets4.3.2 Net…

高等数学(第七版)同济大学 习题11-4 个人解答

高等数学(第七版)同济大学 习题11-4 函数作图软件:Mathematica 1.设有一分布着质量的曲面Σ,在点(x,y,z)处它的面密度为μ(x,y,z),用对面积的曲面积分表示这曲面对于x轴的转动惯量.\begin{aligned}&1. \ 设有一分…

IB生物课程介绍与Topic 1: Cell Biology考点分享

准备让孩子就读国际学校或者孩子正在国际学校就读的家长肯定听说过“IB”或者“IB班”,那IB究竟是什么呢?IB与IB课程 IB是International Baccalaureate(国际文凭)的简称,其课程体系国际文凭大学预科课程(In…

Educational Codeforces Round 141 (Rated for Div. 2)A——C

ps:先自我检讨...自从世界杯开始后,就一直摆烂到现在。直到打了今年的第一场cf,看见打的这么菜,真是想remake/。后面我会陆陆续续的补完前段时间没有打的比赛... Dashboard - Educational Codeforces Round 141 (Rated for Div. …

ReentrantLock

目录 ReentrantLock ReentrantLock语法 ReentrantLock可重入 ReentrantLock可打断 ReentrantLock锁超时 ReentrantLock解决哲学家就餐问题 ReentrantLock公平锁 ReentrantLock条件变量 ReentrantLock ReentrantLock 相比于synchronized的特点 : 可中断:比如A线程拥有…

基于移动最小二乘法的曲线曲面拟合论文阅读笔记

基于移动最小二乘法的曲线曲面拟合论文阅读笔记 论文地址:http://www.cnki.com.cn/Article/CJFDTotal-GCTX200401016.htm 一、Problem Statement 传统的曲线(曲面)拟合方法一般使用最小二乘法, 通过使误差的平方和最小, 得到一个线性方程组&#xff0…

通过alist挂在阿里网盘的方法

1、在github官网https://github.com/alist-org/alist/releases/download/v3.8.0/alist-windows-amd64.zip下载alist软件客户端,双击运行,可以看到默认的密码和服务器地址,打开网页http://localhost:5244/manage/accounts,填写密码…

【Linux】Linux工具

文章目录软件包管理器yumVIM编辑器Linux编译器-gcc/g使用gcc如何完成预处理(进行宏替换)编译(生成汇编)汇编(生成机器课识别代码)链接在这里涉及到一个重要的概念: 函数库函数库一般分为静态库和动态库两种gcc选项gcc选项记忆Linux项目自动化构建工具-make/Makefile背景理解实例…

解决vue中报错 Duplicate keys detected:‘1‘. This may cause an update error.

报错截图: 报错原因: 通过上图的报错信息我们不难看出,报错的主要原因出现在 key 值上,报错的意思大概是检测到重复的 key 值,通俗来讲就是你的 key 值不是唯一的。 解决方案: 问题的根源找到了&#xff…

【初阶数据结构】——链表常见面试题剖析

文章目录前言题目1:移除链表元素题目分析思路1:暴力求解思路2:取非val值尾插至新链表思路讲解思考代码实现不带哨兵位带哨兵位题目2:合并两个有序链表题目分析思路讲解代码实现不带哨兵位带哨兵位题目3:反转链表题目分…

用ode45解微分方程遇到的实际问题

最近在用ode45解微分方程数值解,试图复现论文中的图。一般来说说微分方程(组)只要按照响应的条件去撰写好对应的回调函数即可,基本没什么难度,但对于本文遇到的的这个问题,可能还需要一些技巧去实现解法&am…

动态路由和导航守卫

一、动态路由1、什么是动态路由?将URL地址中可变的内容设置成参数,根据不同的参数渲染不同的组件。(组件可以复用)2、动态路由如何进行参数的传递:(1)如何设置URL地址中的参数:’/ur…