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

news2024/9/19 10:44:15

很多刚入行的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.coloradmin.cn/o/1911991.html

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

相关文章

idea集成本地tomcat

由于网课老师使用的是eclipse,但是……本人用的是idea,所以不得不去找教程。 解决方案1: https://blog.csdn.net/weixin_54048131/article/details/131359793 这个地方,路径一定要到这个tomcat 否则不识别: 这里的JRE也要配置一下 新问题&…

Debezium报错处理系列之第114篇:No TableMapEventData has been found for table id:256.

Debezium报错处理系列之第114篇:Caused by: com.github.shyiko.mysql.binlog.event.deserialization.MissingTableMapEventException: No TableMapEventData has been found for table id:256. Usually that means that you have started reading binary log within the logic…

Qt开发 | Qt绘图技术 | 常见图像绘制 | Qt移动鼠标绘制任意形状 | Qt绘制带三角形箭头的窗口

文章目录 一、基本绘图技术介绍二、常见的18种图形、路径、文字、图片绘制三、Qt移动鼠标绘制任意形状四、Qt绘制带三角形箭头的窗口 一、基本绘图技术介绍 Qt提供了绘图技术,程序员可以在界面上拖动鼠标,或者在代码里指定参数进行绘图。 Qt绘图技术介绍…

tableau饼图与环形图绘制 - 5

饼图与环形图绘制 1. 饼图绘制1.1 饼图绘制1.2 显示标签1.3 显示合计百分比1.4 设置百分比格式1.5 添加说明1.6 图像导出 2. 环形图绘制2.1 选择标记为饼图2.1 饼图绘制2.2 双饼图绘制2.3 设置大饼图大小2.4 设置双轴2.5 设置小饼图属性 1. 饼图绘制 酒店价格等级饼图 1.1 饼…

初识数组(二)

目录 1. 二维数组的初始化 1) 不完全初始化 2) 完全初始化 3) 按照行初始化 4) 初始化时省略行,但是不能省略列 2.二维数组的使用 1) 二维数组的下标 2)二维数组的输入和输出 3. 二维数…

Python实现吃豆人游戏详解(内附完整代码)

一、吃豆人游戏背景 吃豆人是一款由Namco公司在1980年推出的经典街机游戏。游戏的主角是一个黄色的小圆点,它必须在迷宫中吃掉所有的点数,同时避免被四处游荡的幽灵捉到。如果玩家能够吃掉所有的点数,并且成功避开幽灵,就可以进入…

小试牛刀--对称矩阵压缩存储

学习贺利坚老师对称矩阵压缩存储 数据结构实践——压缩存储的对称矩阵的运算_计算压缩存储对称矩阵 a 与向量 b 的乘积-CSDN博客 本人解析博客 矩阵存储和特殊矩阵的压缩存储_n阶对称矩阵压缩-CSDN博客 版本更新日志 V1.0: 对老师代码进行模仿 , 我进行名字优化, 思路代码注释 …

VMware Workstation 和 Fusion 现对个人用户宣布免费使用

这周笔记本坏了,重装了系统,部分软件也得重装,其中就有 VMware Workstation, 当我还在上网苦苦找破解包时(个人学习使用),发现现在居然免费了…… 原来 VMware 换了新东家,简单回顾下…

DMA方式的知识点笔记

苏泽 “弃工从研”的路上很孤独,于是我记下了些许笔记相伴,希望能够帮助到大家 目录 1. DMA基本概念 2. DMA传送过程 易错点 DMA控制器操作流程 3. DMA传送方式 这是单总线的结果 (CPU说了算 所以不会产生于CPU的冲突) 这…

谷歌摸鱼神器来了:推出AI会议替身,一键总结提问发言_会议预约 ai对话

饱受会议折磨的打工人,终于可以解放了! 就在刚刚举办的Google Cloud Next’23大会上,谷歌宣布了一系列科技新进展,最瞩目的要属其中的“开会AI替身”了。 只需要一句“帮我参加”,AI就能替你开会,并在合适…

SCI二区TOP|蜘蛛黄蜂优化算法(SWO)原理及实现【免费获取Matlab代码】

目录 1.背景2.算法原理2.1算法思想2.2算法过程 3.结果展示4.参考文献5.代码获取 1.背景 2023年,M Abdel-Basset受到蜘蛛黄蜂优化社会行为启发,提出了蜘蛛黄蜂优化算法(Spider Wasp Optimizer, SWO)。 2.算法原理 2.1算法思想 S…

python04——类(基础new)

类其实也是一种封装的思想,类就是把变量、方法等封装在一起,然后可以通过不同的实例化对其进行调用操作。 1.类的定义 class 类名: 变量a def __init__ (self,参数2,参数2...):初始化函数!!&…

【LeetCode】生命游戏

目录 一、题目二、解法完整代码 一、题目 根据 百度百科 , 生命游戏 ,简称为 生命 ,是英国数学家约翰何顿康威在 1970 年发明的细胞自动机。 给定一个包含 m n 个格子的面板,每一个格子都可以看成是一个细胞。每个细胞都具有一…

Qt 音频编程实战项目

一Qt 音频基础知识 QT multimediaQMediaPlayer 类:媒体播放器,主要用于播放歌曲、网络收音 机等功能。QMediaPlaylist 类:专用于播放媒体内容的列表。 二 音频项目实战程序 //版本5.12.8 .proQT core gui QT multimedia greate…

C++入门基础(2)

目录 一、引用: 1、定义: 2、特性: 3、引用的使用: 4、const引用:控制权限 const引用定义: const引用可以接收3种对象: 1、正常对象: 2、临时对象: 3、const对象: 总结&…

Sorted Set 类型命令(命令语法、操作演示、命令返回值、时间复杂度、注意事项)

Sorted Set 类型 文章目录 Sorted Set 类型zadd 命令zrange 命令zcard 命令zcount 命令zrevrange 命令zrangebyscore 命令zpopmax 命令bzpopmax 命令zpopmin 命令bzpopmin 命令zrank 命令zscore 命令zrem 命令zremrangebyrank 命令zremrangebyscore 命令zincrby 命令zinterstor…

vue子组件调用父组件方法

父组件 页面<popoverss ref"pop" :goodspop"goodspop"></popoverss>子组件components: {"popoverss": () > import(../comm/popover.vue)},方法goodspop(e){console.log(e"----")return 9999;},子组件 方法props:[go…

【转载】目标检测mAP的含义

转载自三叔家的猫 https://blog.csdn.net/qq_39056987 https://blog.csdn.net/qq_39056987/article/details/104348493 <div id"content_views" class"markdown_views prism-atom-one-light"><svg xmlns"http://www.w3.org/2000/svg" s…

不用服务器 | 我搭建了一个属于自己的GPT聊天应用!!!

原文地址&#xff1a;aiutools.fun/archives/5118 平台限制部分内容未显示&#xff0c;详情请访问原文。 展示 不废话&#xff0c;直接上干货&#xff01; 我这里搭建的Lobe Chat 支持 聊天TTS & STT 语音会话文生图各种优秀的插件 下面搭建好的样子 前期准备 需要…

(2)滑动窗口算法练习:无重复字符的最长子串

无重复字符的最长子串 题目链接&#xff1a;3. 无重复字符的最长子串 - 力扣&#xff08;LeetCode&#xff09; 给定一个字符串 s &#xff0c;请你找出其中不含有重复字符的最长子串的长度。 输入: s "abcabcbb" 输出: 3 解释: 因为无重复字符的最长子串是"a…