UI设计入门到精通:规范整理与应用技巧

很多刚入行的UI设计师在遇到一些不熟悉的词时会充满问号,往往会纠结用什么尺寸最合适。设计师在设计UI的时候不一定要严格遵守设计规范,但是要了解规范,整合,灵活处理。为了解决新手的“十万个为什么”,本文将带你了解UI设计规范。

1、移动UI设计的基本知识

移动UI设计是手持设备的图形用户界面设计。狭义上是手机和PPC,广义上可以推广到手机、移动电视、车载系统、手持游戏机、MP4。所有手持移动设备的界面UI设计,如GPS。众所周知,移动设备的屏幕尺寸非常大,碎片化严重。屏幕尺寸、分辨率和像素密度有什么关系?

屏幕尺寸(主屏幕):手机尺寸代表手机屏幕的对角线长度。英寸和厘米的转换公式为1英寸。(inch)=2.54厘米(cm),例如,苹果13标准版本是6.1英寸,也可理解为13.15厘米×6.42厘米。实际上,屏幕尺寸与设计关系不大,主要用于计算屏幕密度。

分辨率:指手机屏幕上的像素点数,例如750×1334屏幕由750行和1334列的像素组成。每一点发出不同颜色的光线,构成我们看到的画面。由于Android的分辨率跨度很大,因此Android将各种设备的像素密度划分为几个范围,为不同范围的设备定义不同的倍率,以确保显示效果相似。

像素密度(PPI):每英寸屏幕拥有的像素数与之前手机屏幕的大小相同,也是对角线的长度,即在一个对角线长度为1英寸的正方形中拥有的像素数。简单理解就是屏幕密度越大,画面越逼真细腻

每英寸点数(DPI):它是一个测量空间点密度的单位,最初用于印刷技术,表示每英寸可以印刷的墨滴数量。较小的DPI会产生不清晰的图片。

综上所述,屏幕的清晰度实际上是由分辨率和尺寸决定的,用PPI指数来衡量屏幕的清晰度更准确。每次设计的时候计算尺寸都会很麻烦,所以我们只需要简单的理解上面的概念。接下来,我们以常见的iOS和安卓为例,谈谈UI设计尺寸规格。

2、UI设计规范Android

2.1 基本单位

DP:以160DPI屏幕为基准,Android开发专用单位称为双图。1DP=1PX(计算公式:DP x DPI / 160 = PX)。

SP:特殊字体单位Android。160 如果标有DPI屏幕,则1SP=1PX(计算公式:SP x DPI/160=PX)

2.2 单位和度量

2.3 图片缩放

2.4 字体

中文字体:思源黑体Source Han Sans / Noto(同一字体,名称不同);

英文字体:Roboto;

字体粗细:Noto CJK 有和 Roboto 匹配的 7 种字体粗细(Thin、Light、DemiLight、Regular、Medium、Bold和 Black),使用与英文相同的字体粗细设置;

字体大小:从标题开始(Title)到说明文字(Caption)样式、字体大小都与相应的英文样式相比。 1px。对大于标题的样式,则使用与英文相同的字体大小;

3、UI设计规范iOS

iPhoneOS是苹果为其移动设备开发的移动操作系统,支持包括iPhone在内的设备iPad、iPod 下面我们来看看iOS的UI设计规范。

3.1 尺寸

iOS 设备的屏幕尺寸多种多样,人们可以纵向或横向使用。iPhone X和iPad 在边缘到边缘的设备中,如Pro,显示屏具有与设备整体尺寸紧密匹配的圆角。其它设备(例如iPhone SE和iPad Air)有矩形显示屏。

3.2 布局

自动布局是用来构建自适应界面的开发工具。通过使用即时设计的自动布局,您可以定义控制应用程序中内容的规则(称为约束)。例如,您可以限制按钮,使其始终处于中间水平,并将其放置在图像下方的八个点,而无需管理屏幕的大小。

3.3 字体

IOS9:中文字体为冬青黑体,英文字体为Helveticaa Neue

IOS10、IOS11:中文字体为苹方(Ping Fang SC Light),San是英文字体 Francisco

从iOS 从14开始,系统以可变字体格式提供San Francisco和New York字体。这种格式将不同的字体风格组合到一个文件中,并支持在风格之间插值以创建中间风格。因为 SF Pro 和 NY 它是兼容的,所以你可以通过多种方式将排版对比度和多样性融合到一起。iOS 在接口中,同时保持相同的外观和感觉。举例来说,使用这两种字体可以帮助你创建更强的视觉层次结构,或者突出显示内容中的语义差异。

大小规范:

标题:导航栏: 32-36PX;

标题文字: 30-32px;

内容区文字:24-28px;

辅助文本: 20-24px;

动态文本大小:动态类型为读者选择自己喜欢的文本大小提供了额外的灵活性。以下是每种不同动态文本大小的文本风格的粗细、大小和行距值。

即时设计 - 可实时协作的专业 UI 设计工具

随着移动端操作系统的不断升级和更新,设计标准也在不断变化。设计师需要实时了解,以避免设计前期的一些不必要的错误,这将大大提高我们的工作效率。看完上面的分享,如果你有自己的想法和想法,不妨打开即时设计工作台,尝试设计一个符合标准的UI设计。如果您想了解更多关于设计标准的信息,请访问即时设计的设计技巧和案例教程进行交流和学习。

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

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

相关文章

无法连接Linux远程服务器的Mysql,解决办法

问题描述 如果是关闭虚拟机之后,二次打开无法连接Mysql,则可尝试一下方法进行解决 解决方法 关闭虚拟机的防火墙 1:查看防火墙状态 systemctl status firewalld 一下显示说明防火墙是启动的状态 2:关闭防火墙 systemctl st…

Python大数据分析——决策树和随机森林

Python大数据分析——决策树和随机森林 决策树决策树节点字段的选择信息熵条件熵信息增益信息增益率 基尼指数条件基尼指数基尼指数增益 决策树函数 随机森林函数 决策树 图中的决策树呈现自顶向下的生长过程,深色的椭圆表示树的根节点;浅色的椭圆表示树…

招投标信息采集系统:让您的企业始终站在行业前沿

一、为何招投标信息如此关键? 在经济全球化的大背景下,招投标活动日益频繁,成为企业获取项目、拓展市场的主流方式之一。招投标信息采集,作为企业战略决策的前置环节,其重要性不言而喻。它不仅关乎企业能否第一时间发…

探索 Qt 的 `QSqlDatabase`:数据库访问的桥梁

😎 作者介绍:欢迎来到我的主页👈,我是程序员行者孙,一个热爱分享技术的制能工人。计算机本硕,人工制能研究生。公众号:AI Sun(领取大厂面经等资料),欢迎加我的…

C++|异常

目录 一、异常概念 二、异常使用 2.1异常的抛出与捕获 2.2异常的重新抛出 2.3异常安全注意事项 2.4异常规范 三、自定义异常体系 四、C标准库的异常体系 五、异常的优缺点 对于传统的错误处理机制,例如c语言常用的: 1.assert,捕获到…

【环境准备】 Vue环境搭建

文章目录 前言vue-cli 安装创建项目3.0、以下3.0 、以上 前言 书接上回《NodeJs(压缩包版本)安装与配置》,安装完了NodeJs,接下来就要配置vue的环境了。 vue-cli 安装 安装vue-cli输入如下命令 #(安装的是最新版) npm install …

windows的远程桌面连接docker

1. Docker容器中运行远程桌面服务 (RDP):您的Docker容器需要安装和运行远程桌面服务。通常,远程桌面服务在Windows操作系统上可用。如果您使用的是Linux容器,则需要安装一个支持RDP协议的桌面环境和RDP服务器。 2. 开放RDP端口:通…

比赛获奖的武林秘籍:05 电子计算机类比赛国奖队伍技术如何分工和学习内容

比赛获奖的武林秘籍:05 电子计算机类比赛国奖队伍技术如何分工和学习内容 摘要 本文主要介绍了在电子计算机类比赛中技术层面上的团队分工和需要学习的内容,分为了嵌入式硬件、嵌入式软件、视觉图像处理、机械、上位机软件开发和数据分析等六个方向&am…

Mybatis Plus 3.X版本的insert填充自增id的IdType.ID_WORKER策略源码分析

总结/朱季谦 某天同事突然问我,你知道Mybatis Plus的insert方法,插入数据后自增id是如何自增的吗? 我愣了一下,脑海里只想到,当在POJO类的id设置一个自增策略后,例如TableId(value "id",type …

展开说说:Android服务之实现AIDL跨应用通信

前面几篇总结了Service的使用和源码执行流程,这里再简单分析一下如果需要Service跨进程通信该怎样做。AIDL(Android Interface Definition Language)Android接口定义语言,用于实现 Android 两个进程之间进行进程间通信&#xff08…

计算机网络之WPAN 和 WLAN

上一篇文章内容:无线局域网 1.WPAN(无线个人区域网) WPAN 是以个人为中心来使用的无线个人区域网,它实际上就是一个低功率、小范围、低速率和低价格的电缆替代技术。 (1) 蓝牙系统(Bluetooth) &#…

新闻资讯整合平台:一站式满足企业信息需求

摘要: 面对信息爆炸的时代,企业如何在海量数据中快速获取有价值资讯,成为提升竞争力的关键。本文将探讨如何通过一站式新闻资讯整合平台,实现企业信息需求的全面满足,提升决策效率,同时介绍实用工具推荐&a…

开源数据科学平台Anaconda简介

开源数据科学平台Anaconda简介 零、时光宝盒 最近,某金融行业女性选择以跳楼的形式结束自己的生命,这件不幸的事情成了热门话题,各种猜测的都有,有些人评论的话真的很过分。我想起前段时间看到的,有个女学生跳江&#…

ISO/OSI七层模型

ISO:国际标准化/ OSI:开放系统互联 七层协议必背图 1.注意事项: 1.上三层是为用户服务的,下四层负责实际数据传输。 2.下四层的传输单位: 传输层; 数据段(报文) 网络层: 数据包(报…

git撤销/返回到某次提交(idea工具 + gitbush)

不多说废话,直接展示使用。 方法一:使用idea工具进行返回 准备某次过度提交 使用idea打开git log 找到要回去的版本 点击右键选到reset 模式选hard,强制回滚 这个时候本地代码已经回归你指定的版本了。 这个时候再进行强制推送&#xff0c…

读书笔记-Java并发编程的艺术-第4章(Java并发编程基础)-第3节(线程间通信)

文章目录 4.3 线程间通信4.3.1 volatile和synchronized 关键字4.3.2 等待/通知机制4.3.3 等待/通知的经典范式4.3.4 管道输入 / 输出流4.3.5 Thread.join()的使用4.3.6 ThreadLocal的使用 4.3 线程间通信 线程开始运行,拥有自己的栈空间,就如同一个脚本…

APP项目测试 之 APP性能测试

性能指标描述:一定是某种时间内某种条件执行某种操作,性能指标如何? 性能测试可以考虑和稳定性结合,monkey测试时使用性能监控工具监控性能数据。 例如: 2小时内持续刷新操作,性能如何? 持续运行8小时,性能如何? 常见…

【MySQL】详解

SQL语句的分类: 1.DDL(Data Definition Languages)语句: 数据定义语言 ,这些语句定义了不同的数据段,数据库,表,列,索引等数据库对象的定义。常用的语句关键字主要包括…

随笔(一)

1.即时通信软件原理(发展) 即时通信软件实现原理_即时通讯原理-CSDN博客 笔记: 2.泛洪算法: 算法介绍 | 泛洪算法(Flood fill Algorithm)-CSDN博客 漫水填充算法实现最常见有四邻域像素填充法&#xf…

Studio One直播声音怎么调 Studio One直播没有声音输出怎么办 studio one如何设置声音变好听

Studio One做为新生代音乐工作站,凭借更低的价格和完备的功能,获得了音乐人和直播行业工作者的青睐,尤其是对硬件声卡的适配支持更好,特别适合用来配合线上教学和电商带货。 一、Studio One直播声音怎么调 在Studio One进行直播时…