UI设计规范整理一iOS字体和切图及规范

UI设计规范一iOS字体和切图及规范

说明:

1.对象为程序员等开发人员。

2.方法有千种,仅供参考。

3.文档的本质是备份与查看,对外方便协作与对内提升效率。

4.文档不是万能的,如果文档查看对象看不懂,就没任何意义。我喜欢当面沟通,因为能避免大部分文档的局限性

规范

一.字体

我个人设计时按照iOS设计尺寸 iPhone6(750px*1334px)来进行页面的设计。在iOS开发中iPhone4、5、6、7是共用一套字体规范。在设计中按iPhone6设计版尺寸(750px*1334px)中适合的字体大小来定义。(开发过程中具体的问题需再具体分析)

在iOS中默认字体分为三类:

第一类:STHeiti-Light.ttc和STHeiti-Medium.ttc代表的是中文字体,常用的方正黑体简体(不能商用)和微软雅黑(不能商用),也可以是冬青黑体简体(暂不详版权)和思源雅黑(免费)。

第二类:_H_Helvetica.ttc和_H_HelveticaNeue.ttc代表的是英文以及数字字体,常用的字体Helvetica

第三类:LockClock.ttf代表的是锁屏时间字体

中文字体:Mac下黑体、微软雅黑、华文黑体、方正黑体简体、思源雅黑、冬青黑体简体等(,看个人习惯,具体设计需求也可以是不常见字体)

英文字体:HelveticaNeue , Arial Bold(Regular)(具体设计需求也可以是不常见字体),在选用不常见字体要在后面切图中:相关的字体要有图片形式导出.png图片,以及如有需要要有文字的字体包,当然还有使用版权的许可。

 

二.切图说明

1.文件

文件包命名规则是:项目名字+切图+作者名字+日期

例如:蚂蚁金服基金3.5.8.5版本迭代-H5页面设计_切图_李笑_20170321

文件包压缩一直采用.zip格式

文件包要包括:image,效果图+标注图,切图简单说明(word等文件)。

说明:效果图必须是要有的,对于标注图可以根据技术需求,沟通必不可少

打开如下图:


提供给程序开发的文档打开
2.切图注意事项

在image中切图文件和切图命名中:

···不要出现大写,

···不要有中文、特殊符号以及空格,

···字母必须是小写字母,

···同类切图大小一致(后续文章单独整理切图方法和常见问题)

 

3.切图命名规范

···iOS切图文件要有二倍像素适配(750px*1334px)iphone6,iphone7和三倍像素适配(1242px*2208px)iphone6 plus,iphone7 plus。需要在名字后面分别加 @2x 和 @3x。具体命名方法是:

模块_类别_功能_状态_@2x/@3x.png   (状态会有:点击状态,点击压下状态,禁用状态,选中状态等)

如:me_bg_nologin@3x.png和me_bg_nologin @2x.png


样式说明

 

4.切图命名常用词

例(个人整理部分)

 

5.Splash切图(单位px)

···iphone4:640X960

···iphone5:640X1136

···iphone6/7:750X1334

···iphone6/7:1242X2208

 

6.Icon切图(桌面图标)

数据来源:apple SDK官网

数据来源apple SDK官网

iPhone图标尺寸及整理如下:


iPhone图标尺寸

iPhone图标设计中具体尺寸的弧度半径

备注:在提案设计一般可以采用 512px*512px,来检测效果,单位是px

 

 

转载于:https://www.cnblogs.com/yujidewu/p/7803675.html

paddlehub无法安装,安装报错【Bug完美解决】 paddlehub无法安装,安装报错【Bug完美解决】 我们正在进行一个基于Python的项目开发,该项目需要集成PaddleHub,以利用其丰富的深度学习模型和工具。PaddleHub提供了一种简便的方式来使用预训练模型,以加速开发过程并提高模型效果。 现在paddlehub安装出现问题了,本文彻底解决paddlehub无法安装的问题。 阅读详情

相关推荐

别再只看图了!代谢组学OPLS-DA分析,R2Y和Q2Y到底怎么看才不踩坑?

本文深入解析代谢组学OPLS-DA分析中的关键指标R2Y和Q2Y,揭示如何避免过拟合陷阱。通过详细解读模型解释能力(R2Y)和预测能力(Q2Y),结合置换检验方法,提供完整的模型评估流程与实战建议,帮助研究者获得可靠的分析结果。

weixin_42638178的博客 186

iOS&Android 移动设计字体规范整理大全

对于一位移动APP设计师来说,字体的把控非常重要。特别是app设计。因为不同的字体在不同的移动终端显示出来的效果真是百花齐放。终极没达到我们设计图的效果。 所以,ios和android都有各自的设计规范。也是告诉各位一定APP设计和开发人员可以遵循这些规范来设计开发,尽量达到最佳显示效果。 25学堂今天来跟大家回顾和整理iOS&Android 移动设计字体规范。 其他详细的尺寸规范大...

weixin_30511107的博客 648

Matt Pocock Skills — AI 编码代理技能包介绍与使用指南

《Matt Pocock Skills:AI编码代理技能包指南》 摘要: Matt Pocock Skills是一套开源AI编码代理技能包,旨在解决AI辅助开发中的四大痛点:需求理解偏差、token浪费、代码质量差和架构腐化。该技能包包含多种实用工具:/grill-with-docs用于需求对齐,/tdd实现测试驱动开发,/diagnose提供规范化调试流程,/triage管理issue生命周期。核心思想包括:通过拷问式对齐确保需求理解一致,建立共享领域语言提高沟通效率,快速反馈闭环加速开发,以及持续架构维

qq_45859163的博客 2206

UI设计师必备|Android设计尺寸规范

1、字体使用规范 中文字体:思源黑体Source Han Sans / Noto(是一个字体,叫法不同而已) 英文字体:Roboto 注意:安卓的字号单位是SP 720×1280常见的字体大小: 24px、26px、28px、30px、32px、34px,36px等等。记住是偶数的,最小字号20px。 2、图标 icons 图标用途 mdpi (160dpi) hdpi (240dpi) xhdpi (32.

awayaya1的博客 6099

用Java和MQTT搞定大疆无人机自动巡检:一个真实机场项目的踩坑与优化记录

本文详细介绍了如何利用Java和MQTT协议实现大疆无人机在机场自动巡检系统的开发与优化。通过实战案例分享系统架构设计、通信协议选型、断线重连机制及数据通道优化等关键环节,帮助开发者解决GPS信号漂移、MQTT消息风暴等典型问题,提升系统性能和可靠性。

weixin_30275415的博客 490

Understand-Anything:AI驱动的代码知识图谱,实现项目全局洞察与高效导航

在软件开发中,理解复杂代码库的结构和依赖关系是提升开发效率的关键。传统代码阅读方式往往陷入局部视角,难以快速把握系统全貌。知识图谱技术通过将代码实体(如文件、类、函数)及其关系(调用、继承、依赖)可视化,为代码理解提供了全局视角。这项技术的核心价值在于将静态代码转化为动态、可交互的认知地图,极大降低了系统学习与维护成本。在实际工程中,它广泛应用于新成员快速入职、遗留系统梳理、架构影响分析等场景。本文介绍的Understand-Anything工具,正是基于这一理念,通过多智能体分析管道,自动构建代码的结构图

weixin_42615290的博客 877

App界面设计规范-字体规范

通过对不同类型的app进行总结,总结出app的字体规范。   一、字体选择 1.IOS:苹果ios 9系统开始,系统最新的默认中文字体是:苹方。英文字体是: San Francisco 2.Android:英文字体:Roboto,中文字体:Noto   二、案例分析 1.以今日头条界面为例,导航主标题字号为40px,正文标题为36px,辅助性说明文字为24px,小字(视频长短...

weixin_33872566的博客 6141

linux系统宝塔服务器temp文件夹里总是被上传病毒php脚本

服务器时不时的会发送短信说你服务器有病毒,找到了这个tmp文件,删除了之后又有了。确实是有很多人就这么无聊,每天都攻击你的服务器。找了很久的原因,网上也提供了一大堆方法,但都是很简陋的答案,具体怎么操作并没有说。没办法只能自己去排查这个问题。从两个角度来考虑,第一是服务器系统问题,比如宝塔的漏洞。但一时半会看不出问题来。只能去排查自己的项目代码。最后了解到代码确实是存在漏洞的。但代码中也确实了很多的校验,为什么会存在漏洞了?这就不得不从上传的过程开始说起。

guiplan 1488

打造精致UI界面:字体设计的妙招

字体设计是UI设计的关键模块之一。字体设计是否有效可能直接实现或破坏整个UI界面。那么,界面设计的字体设计有哪些规范呢?如何设计细节字体?本文将解释字体设计规范的可读性、可读性和可用性,并介绍UI界面中的字体设计技巧。

2301_79599164的博客 1546

基于Simulink的双PMSM差速驱动转矩同步控制建模示例

本文详细介绍了基于Simulink的双永磁同步电机(PMSM)差速驱动转矩同步控制建模方法。针对AGV/叉车等双电机独立驱动系统的转矩不同步问题,提出主从式+交叉耦合控制策略,在Simulink中实现直线行驶、90°转弯和单轮打滑恢复三种工况的仿真验证。通过动力学建模、参数差异设置、同步误差定义及控制律设计,最终实现同步误差<3%、转弯半径跟踪误差<5%、打滑后100ms内恢复的性能指标。文章特别强调了实际工程中的参数标定、通信同步和故障处理要点,并提供了完整的Simulink建模步骤和工具箱使

xiaoheshang_123的博客 195

面向 OData V4 的 Fiori elements 为何强制使用 draft、它到底是什么、以及是否能关闭

本文深入解析了SAP Fiori elements中draft handling的核心机制与必要性。关键点包括:1)draft机制通过中间版本实现复杂编辑的安全恢复与并发控制;2)Fiori elements for OData V4强制要求draft-enabled服务支持事务编辑;3)非draft服务仅适用于只读场景;4)替代方案需承担完全自定义开发的成本。文章基于SAP官方文档,系统阐述了draft在事务型应用中的基础性作用,为架构决策提供了明确指导。

2007 年 ~ 2025 年,深耕 SAP 技术 18 年 259

iPhone、iPad等iOS系统界面设计字体规范

做移动UI设计的朋友们肯定都知道,移动客户端的界面上做效果的时候提前找所用的字体,特别注意在windows下设计的字体和实际UI界面上显示的效果很大的差别。 博主谈到设计师可以提前和开发沟通好,就是告诉开发字体和字间距之类的需要自定义,请程序提前做好“准备”(一般字体和字的效果程序都是可以提前封装后,整个项目都可以导出自定义),如果提前沟通,这样会提高开发和设计的UI界面的效率。确实是这样啊

布丁黑板报 1万+

33、AI赋能5G/6G通信:LDPC码解码与强化学习技术解析

本文探讨了基于AI和强化学习的LDPC码技术在5G/6G通信中的应用。包括LAMS解码器、神经MS解码器、盲识别方法、统一极性-LDPC解码器、NNMS和SNNMS解码器、N-2D-NMS解码器、神经分层MS解码器、MAB-NS方案以及强化学习与MCTS结合的技术。这些技术在提升解码性能、降低计算复杂度和增强系统适应性方面表现出色,为未来通信系统的发展提供了强有力的支持。

lambda的博客 231

UI : 2022年iOS/Android UI设计规范(1)

1.设计稿与切片稿 a.尺寸 设计稿:iPhone6 750*1334 【2倍】 切图稿:iPhone6 2208*1242【3倍】 Android 1920*1080 设计稿选择750*1334 px的原因: IOS:向上和向下适配的时候界面调整的幅度最小,最方便适配 Android:设计时只需做最小的设计调整,提升设计效率 b.切图 IOS切图——3份: .........

Siimple的博客 6万+

SIMATIC S7-1200, S7-1500 PID 控制[手册]

SIMATIC S7-1200, S7-1500 PID 控制[手册]

SAP B1中文培訓教材_SDK

公司内部培训资料,对开发工具 ,DIAPI, UIAPI,Add-ON有详细解说

ios设计规范_设计干货!iOS与Android UI设计规范整理

工作中大部分UI设计师都是按照IOS的标准来进行产品的UI设计,Android的相关规范很多设计师并不清楚,今天就给大家分享一篇IOS和Android设计规范的文章,希望对大家有帮助哦!内容实用,建议大家可以收藏,以后工作中一定用的到的。一 为什么需要设计规1.解决多人协作时,同一控件尺寸及使用混乱问题 ,保证设计的一致性。2.与开发沟通协作,共同制定细则,提升链路间工作效率。3...

weixin_39629188的博客 1640

Data-Structures-and-Algorithm-Analysis-in-Java.pdf

作者: Weiss, Mark A. 出版社: Addison Wesley Data Structures and Algorithm Analysis in Java is an “advanced algorithms” book that fits between traditional CS2 and Algorithms Analysis courses. In the old ACM Curriculum Guidelines, this course was known as CS7. This text is for readers who want to learn good programming and algorithm analysis skills simultaneously so that they can develop such programs with the maximum amo...

ios设计规范_ui设计规范大全:ui的界面设计规范

ui设计规范大全:ui的界面设计规范你了解吗?很多新人在开始做移动端UI设计的时候,往往对界面的一些尺寸规范不是十分清楚,很多时候都是凭借自己的感觉和经验去绘制界面,心里并没有一个清晰的概念,导致做出来的页面总是不那么尽如人意。下面这篇ui设计规范大全:ui的界面设计规范值得你看看。本文整理汇总了2020年最新的界面设计(iOS系统)中常用的一些UI尺寸规范大全以及ui设计语言和原则,如控件间距、...

weixin_39955423的博客 1862

C# WinForm 基于DirectShow.dll编写的程序,可边预览边保存视频,音频和图片

基于微软的DirectShow.dll的二次开发1.自动识别连接的摄像头跟麦克风且可以对其进行选择(默认选中第一个)2.可录制wmv和avi两种格式的视频并且都带有音频,avi可以录制的分辨率和帧数进行选择,wmv默认进行了淸晰度优化如不喜欢可去除代码中有相关提示3.可在预览点开之后进行拍照,也可边录制视频边拍照4.添加了视频和音频的压缩功能(酌情使用)这次二次开发发现C#对DirectShow的相关信息太少,这次做完也不敢藏私共享出来,还望大家指正

ios设计尺寸规范_干货!iOS 与Android 设计规范整理

工作中大部分设计师都是按照IOS的标准来进行产品的UI设计,Android的相关规范很多设计师并不清楚,今天就给大家分享一篇IOS和Android设计规范的文章,希望对大家有帮助哦!文章较长,建议大家收藏,以后工作中一定用的到的。一.为什么需要设计规范1.解决多人协作时,同一控件尺寸及使用混乱问题 ,保证设计的一致性。2.与开发沟通协作,共同制定细则,提升链路间工作效率。3.保持产品的特...

weixin_39866857的博客 3283

微信小程序UI设计规范及文档模版

UI设计者整理一下,为方便UI设计师和交互设计师进行设计,微信提供一套可供Web设计和小程序使用的基础控件库;同时提供方便我们的移动端安卓和iOS开发者调用的资源。还没有UI设计基础的同学,可以暂时不用学习此规范,等学完UI设计基本规范后再学习小程序的设计规范。 基础样式库预览地址:https://weui.io 下面附:规范文档PSD和sketch源文件下载。 小程序...

HIES 2万+

ui设计移动端字体适配_超全面的移动端UI 设计规范整理汇总

很多新人在开始做移动端UI设计的时候,往往对界面的一些尺寸规范不是十分清楚,很多时候都是凭借自己的感觉和经验去绘制界面,心里并没有一个清晰的概念,导致做出来的页面总是不那么尽如人意。本文整理汇总了一些界面设计(iOS系统)中常用的一些尺寸规范和方法,如控件间距、适配、标注、切图等,设计师在设计时并不一定要严格遵守,但对这些规范应有所了解,并融会贯通。目录界面设计尺寸及栏高度边距和间距内容布局界面图...

weixin_39726044的博客 1086

APP设计:(一)app界面常用设计规范

app设计是一个看似简单其实复杂的事情,每一个部件的设计都有一定的规范和设计思路可寻。 app设计,也就是我们常说的手机应用程序的界面设计。 如今手机已成为我们生活工作密不可分的一个工具,各行业各类型的app层出不穷。 经过几年的发展逐渐成熟,也逐渐形成一些普适的设计规范,包括布局、各部件尺寸、字体运用等等。虽然说设计要创新,不能一成不变,但考虑到用户的使用习惯,提高用户体验感,在一些趋于统...

ww0908的博客 5万+

android移动端设计规范,干货|超全面的移动端UI 设计规范整理汇总(下)

原标题:干货|超全面的移动端UI 设计规范整理汇总(下)来源:优秀网页设计六、APP版式设计规范版式设计又叫做版面编辑,即在有限的版面空间里,将版面的构成要素如文字、图片、控件等根据特定的内容进行组合排列。一个优秀的排版要考虑到用户的阅读习惯和设计美感,在 UI设计中版面设计的原则有哪些呢?1. 对齐对齐是贯穿版式设计的最基础,最重要的原则之一,它能建立起一种整齐划一的外观,带给用户有序一致的浏览...

weixin_39792519的博客 3701

IOS、Android设计规范/商用字体总结——UI设计入门,你想要的都在这!

        初入UI 的小朋友们都会很懵设计规范,加上前段时间微软雅黑字体“出事了”!这些其实并不影响一个UI设计师的能力提升,但规范、字体确实UI设计师的工作基础。博主从业以来收集了很多资料,今天准备整理出来,新手可鉴。 (摘自sumaart及知乎,已在每章段标注作者,摘抄于此仅为分享及自己备份,如介意请联系作者删除) 关于设计规范 一、像素密度         像素密度,即每英寸屏...

Shyla_Dong的博客 2754

苹果页面设计规范吐血整理

苹果567(775乘1334px) 主流设计尺寸 一般设计以这个为标准 如果要转为三倍图 乘以1.5等比例缩放形成自适应 1.界面设计包括布局层,图文排版层,图标层。 2. iPhone界面布局讲究8px原则。所有间距和标准尺寸都是应该是8px的倍数。如iPhone678的状态栏40px,导航栏88px,标签栏98px。除此以外,其他规范导航栏下导航高度80px,列表卡片高度88px,按钮高度...

qq_47168970的博客 5226

android 平面图app_安卓app设计规范整理和Android APP设计篇

随着安卓智能手机不停的更新换代。安卓手机系统越来越完美,屏幕尺寸也越来越大啦!比如最近小米的miui 6的发布和魅族手机系统的更新等等。以小米MIUI6的安卓手机来说,MIUI6进行了全新设计,坚持“内容才是本质”的设计哲学,重新提炼内容,简化图标设计。所以,我们在进行安卓APP设计时,需要好好调整之前的设计规范和设计细节。根据目前流行的安卓手机的系统体验来完成我们的安卓APP设计规范。应该说这是...

weixin_39847556的博客 1010

安卓APP设计规范(一)

华为荣耀6屏幕尺寸和分辨率: 5英寸 1920×1080像素华为p6屏幕尺寸和分辨率: 4.7英寸 1280×720像素华为p7屏幕尺寸和分辨率: 5英寸 1920×1080像素在目前我们的安卓APP设计项目当中,我们并不会去为每一种分辨率去设计一套UI界面。这是一种追求完美和理想的状态。小公司肯定是耗不起这样的。所以,这个时候我们需要学会变通。为了适应多分辨率,

2401_84545497的博客 1147

ios底部栏设计规范_【设计规范】IOS平台设计规范

今天正式进入到UI知识体系的第二个系列:设计规范。了解各大平台的设计规范是每个UI设计师必经的过程。不管是刚入行的设计师,还是入行2、3年的设计师,如果说这些基本的知识都不清楚的话,就会显得自己不够专业。今天说所要讲的是IOS平台的设计规范,那么它的规范到底有哪些呢?一、为什么要了解设计规范?有人说,我们是设计师啊,遵从那么多设计规范,不是限制我们的设计么?UI设计不是艺术设计,我们需要基于设备和...

weixin_33321522的博客 360
上一篇: Mac下使用抓包工具--Charles进行抓包
dgzr3370
博客等级 码龄12年 3粉丝 0原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值