android接口类命名规范_超全面的UI基础设计规范来啦,还不收藏 ~

39032e5865dbb6dd18e602f42f99d214.png

 写在前面的话  

很多刚入行的UI设计师开始接触移动端UI设计的时候,对于基础的界面尺寸规范可能会有一定的模糊认知,导致做出来的界面往往会感觉不是那么和谐,却也不知道怎么去完善和改进。

对于大多数的刚入行者来说,如果不是有天赋的那种设计师,了解常用的一些尺寸规范和方法,才能更好的形成自己的专业概念。

 1、设计软件  

sketch

9140db2b381950b0ffe9eefc14e7c387.png

作为现在做UI的主流软件,sketch不仅操作便利、易于上手,软件本身也非常轻便,对于电脑的型号也没有很大的要求,当然,只要是苹果电脑即可。除此之外,sketch自身所含括的UI组件和iOS的系统设计资源也是非常加分的附加值。

推荐两个网站:https://oursketch.com/ —无论是学习Sketch,还是搜插件、找素材,都是一个宝库。

另外一个网站是https://xclient.info/ —下载各种Mac系统的软件网站平台。

photoshop

3c1589cfc700ccd6c353672d186f2d24.png

无所不能的ps,不管是Mac还是Windows,没有平台的限制,能实现的效果多样化。弊端在于,软件体型太大,在做UI设计的时候对尺寸标准的判定不是很友好。好在,现在网上关于ps的插件资源已经很丰富,不管是切图还是标准,都有对应都插件,用起来也还是很方便的。

综合考虑,有条件的话做UI我还是比较推荐用Mac平台。

 2、移动端系统的相关概念  

手机分辨率:

每个手机屏幕不一样对应像素大小也不一样。其实所有的画面都是由一个个的小点组成的,这一个个的小点就称之为像素。一块方形的屏幕横向有多少个点,竖向有多少个点,相乘之后的数值就是这块屏幕的像素(数码相机的像素也是这么乘积出来的)。

屏幕尺寸:

为了方便表示屏幕的大小,通常用横向像素×竖向像素的方式来表示,例如电脑屏幕中很常见的1024×768像素,以及手机屏幕中很常见的240×320像素。

而所谓的4:3、16:9、16:10、21:9这些比值其实就是 分辨率中横向像素与竖向像素的比值 。

4:3是我们最初所用的分辨率尺寸比,以前的电脑屏幕几乎都是4:3;随后宽屏显示器出现,16:10开始流行,比较常见的分辨率有1280×800像素。

比如手机对角线的物理尺寸,单位是英寸,iPhone SE(4英寸)、iPhone 6s/7/8(4.7英寸)、iPhone 6s/7/8 Plus(5.5英寸)、iPhone X(5.8英寸)。

 3、界面设计基础规范——iOS  

屏幕设计尺寸

苹果手机采用的是Retina视网膜屏幕,其中iPhone 6s/7/8 Plus和iPhone X采用的是3倍率的分辨率,其他都是采用的2倍率的分辨率,无论是栏高度还是应用图标,设计师提供给开发人员的切片大小,前者始终是后者的1.5倍,并分别以@3x和@2x在文件名结尾命名,程序再根据不同分辨率自动加载@3x或者@2x的切片。

dae4fe940e459d8813464a441d62bf82.png在开始图稿的时候以什么样的尺寸来建立画布呢?状态栏、导航栏、标签栏、工具栏等,它们的高度又分别是多少呢?别着急,我用一张图来说明:1ef1945c11d418628166413bfd25e44c.png966745da25c5be574b3af9cf84328c8b.png7298025964823678443fdb1eabe3fcc9.png

通过上面的图片应该可以大致了解苹果手机的各个型号的尺寸,在用sketch的时候,推荐使用375 * 667的尺寸;导出切图的时候加后缀@2x和@3x,即是原始尺寸的2倍和3倍图。

在用photoshop的时候,画布就建成750 * 1334尺寸的。导出切图的时候加后缀@2x和@3x,和sketch不一样的是,导出的是原始尺寸和3倍尺寸图。

字体使用规范导航文字          34-38px标题文字          28-34px正文文字          26-30px辅助文字          20-24pxTab bar文字     20px当然,这个不是硬性的使用规定,要根据产品属性酌情设定,另外需要注意的一点是所有的字号设置都必须为偶数,上下级内容字号极差关系为2-4号。关于字体:在iOS 9推出之前设计师普遍采用华文黑体、思源、冬青等字体进行设计,iOS 9推出了苹果自己的字体——苹方!自此之后苹方字体被广泛应用于移动端设计中。

关于字体颜色和是否加粗:字体的颜色设置我们一般很少用纯黑色,一般用深灰色和浅灰色、细体和粗体(注意要用字体本身的字重,不能用PS的加粗功能)来区分重要信息和次要信息,进行信息层级的划分。

c5eaf71cffeb9ab9143c287a34e39619.png22f9ce11c58522d8d6e9b61ae52b7267.pngAPP应用图标尺寸

APP应用图标,建议使用1024*1024尺寸去做,逐级缩小去应用到各种场景中。SKetch已经提供了IOS和Android系统的APP尺寸图标模板,直接使用就可以了。

0cbe881f6c127001d3596f829808b406.png切图规范

当界面设计定稿之后,设计师需要对图标进行切片提供给开发工程师,通常我们只需要对icon进行切图即可,文字、线条和一些标准的几何形状是不需要切图的,例如搜索框只需要在标注中描述它的尺寸、圆角大小、背景色值、不透明度即可,开发工程师可以用代码实现这种效果。

在这里安利一个网站:蓝湖https://lanhuapp.com 它是一款产品文档和设计图的共享平台,帮助互联网团队更好地管理文档和设计图。

可以在线展示Axure,自动生成设计图标注,与团队共享设计图,展示页面之间的跳转关系。可以直接在官网下载插件安装即可使用,方便设计师和开发人员、产品经理之间的有效沟通。

f9e1bbc109d4753d3fabb2c286243031.pngdfa65e21158d1096a2ab4a126cac5c86.png切图输出规范

苹果官方提供的能准确点击的最小点击区域:88 * 88,单位px。小于这个范围也可以点击,但是点击不灵敏,体验较差。对于比这个范围小的可点击按钮,周围需要用透明区域填充后再输出切图。

646d1c8c5386607876b79467471df0c8.png

非功能性切图,比如列表图标、说明图标等,按统一规格的最小尺寸切。这些无实际功能的图标,按照统一规格的尺寸来切,而且最好保证尺寸为偶数。

6ff4673df979184ba90e0862ef350310.png

按钮输出的时候要注意的是不同状态下的情况要分开说明。

b0af5db75f74821fca4031e963247ae6.png切图命名规范

设计师切图是直接给开发人员使用的,所以要按照一定的格式命名能减轻沟通成本,命名方式尽量清晰;

推荐采用:种类_位置_功能_状态,示例说明:btn_homepage_seach_normal@2x.png,这样可以一目了然,这是位于首页,处于正常状态的搜索按钮2倍切图。不要使用中文、特殊字符,请使用英文、下划线、数字对切图命名,数字不要打头。

 4、界面设计基础规范——Android系统  

屏幕设计尺寸

如果想一稿适配ios,那就新建720×1280  分辨率72,像素/英寸。如果单独设计安卓MD新规范的,那就新建1080×1920  分辨率72,像素/英寸。

正因为Android手机分辨率多样,为了保证同一设计在不同屏幕密度的手机上显示效果一致,Android系统使用了下面两个单位:

dp:android开发单位,相当于比例换算单位。使用该单位,可以保证控件在不同密度的屏幕上按照比例解析显示成相同视觉效果;

sp:android开发文字单位,和dp类似,也是为了保证文字在不同密度的屏幕上显示相同的效果。

当屏幕密度为MDPI(160DPI)时,1dp=1px

当屏幕密度为MDPI(160DPI)时,1sp=1px

aaa355aa142498a3bf3ff710ccdbdba6.png

建立图稿常见一般常用做法:

直接把ios的设计稿照搬过来,只不过状态栏,导航栏,标签栏按照安卓的来。

720 x 1280 设计稿尺寸,按照传统老办法做的话,状态栏高度:48 px,导航栏高度:96 px,标签栏高度:96 px

最新规范MD的做法:

8dp原则   栅格系统的最小单位是8dp,一切距离、尺寸都应该是8dp的整数倍。

如果按照最新的Material Design规范设计的话,可以按照下面官方的规范。

字体使用规范

中文字体:思源黑体Source Han Sans / Noto(是一个字体,叫法不同而已)

英文字体:Roboto

注意:安卓的字号单位是SP

720×1280常见的字体大小:

24px、26px、28px、30px、32px、34px,36px等等。记住是偶数的,最小字号20px。

02d7f60eb62f3ea82318b9ad01ae79e5.png8aab0f0676fbf99fd3a1caeafcf252c9.png8aab0f0676fbf99fd3a1caeafcf252c9.png5cc3714b1b52c7305bfdefbe82cfa8b5.png

界面里的小图标常见的尺寸:24px、32px,48px等,记住4的倍数比较好。

注意图标的尺寸要统一尺寸,以眼睛观察为主调整尺寸看上去一样。方形的比圆形的看着要大,需要调整下。

推荐两个在线图标网站:1.http://www.iconfont.cn/

阿里图标库  2.https://www.materialpalette.com/icons  

f686af78f65c4376250f0b213dd622ad.png设计标注、切图:

标注的时候,如果是720×1280尺寸设计的,就选对应的xhdpi,如果是1080×1920尺寸设计的,就选对应的xxhdpi。

切图推荐使用用Cutterman,选中下面所示,根据需要选择不同分辨率的导出。输出支持Android平台的各种分辨率大小图片,比如XXHPDI,XHDPI,HDPI啊之类的,通通自动化输出,为你节省出更多的时间。

2be178c62f094d5fbef40632ae51ddcd.png

至于切图命名可以参考上面iOS系统的规范。

 5.总结  

很多时候UI的工作输出后是开发工程师提供参考,因此最好和和开发工程师进行沟通,了解他们的工作方式,标注完成之后宣讲你的注意事项,以更快捷高效的完成工作,并且最大限度的完成视觉高的还原。希望我们不仅仅只是一名作图的设计,还是一名懂得交互和产品的好设计,多积累多看好的设计,才能更大程度提高自身的设计功底。//术心//是一个专业做设计分享的公号,每天晚上10:00-10:30,给各位分享设计经验、解决设计问题、了解设计资讯、分享设计教程,为你捋直设计之路————推荐阅读下面是一些精选的内容,大家可以好好看看,有移动端界面设计尺寸规范,还有大厂一线设计师的设计经验分享,还有一线运营人员分享的5个月30万粉丝的公众号运营经验,你想要的都在这里,快来看喽!!!9fc10411c53fb85d913234462172804f.pngaf1a9089ef16b580312eca0050ed30f5.png2353e4d625ff283dd4c23340e3269d24.pngb7b1df981aa223826dd9b2eb254447c4.png5566ccabcf93bca6dad442bba9b3aaea.pnge3f9faba1271e339ec9a5a848469cb25.png微信订阅号“术心”订阅号成立三年有余,在这三年时间中,承蒙十万余名粉丝的厚爱,让我有动力坚持每天分享设计干货,相信未来我们会越来越好,我们的群体会越来越壮大,去帮助更多的设计师朋友,加油!94377d059a9ebc216c2cc4a311851829.gif你点的每一次「在看」,//就是对我最大的支持//eed4420daa903c36d219845664dca2a1.gif

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

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

相关文章

mysql按升序创建索引_MySQL 降序索引

MySQL 降序索引简介:在本教程中,您将了解MySQL降序索引以及如何利用它来提高查询性能。MySQL降序索引简介降序索引是以降序存储键值的索引。在MySQL 8.0之前,您可以DESC在索引定义中指定。但是,MySQL忽略了它。与此同时&#xff0…

python开源项目新手_10大Python开源项目推荐(Github平均star2135)

翻译 | suisui出品 | AI科技大本营(公众号ID:rgznai100)继续假日充电系列~本文是 Mybridge 挑选的 10 个 Python 开源项目,Github 平均star 2135,希望你能够喜欢~~▌Rank 1:Requests-HTML v0.9(7385 stars on Github,来…

layer中嵌套的页面如何操作父页面_vue中8种组件通信方式,值得收藏

有不少网友提出组件之间通信方式还有很多, 这篇文章便是专门总结组件之间通信的vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢? 首先我们需要知道在vue中组件之间存在什么样的关系, 才更容易…

镜头视场角计算工具_再谈远心镜头的设计及其独特的性能

1.远心镜头的设计与对比镜头可以分为非远心和远心;远心镜头也可以分为物方远心、像方远心和双远心。相关概念的简单说明:孔径光阑在物空间的像称为入射光瞳。同样,孔径光阑被其后面的光学零件成在像空间的像,称为出射光瞳。入射光…

收到一个机器人txt微盘_经阁-第一章 吞了个机器人-爱阅小说网

第一章 吞了个机器人莫金无奈的感叹着自己的命运,八岁之前他乞讨为生,之后遇到好心人收养,没想到五年后他又要开始无父无母的生活了。只是这下他身后还有个拖油瓶的妹妹。义父、义母穷苦了一辈子,临了也没给莫金留下丁点儿值钱的东…

高斯核函数python代码_单类SVM:SVDD

话接上文(SVM的简单推导),这篇文章我们来看单类SVM:SVDD。可能大家会觉得很奇怪,我们为什么需要单分类呢?有篇博客举了一个很有意思的例子。花果山上的老猴子,一生阅猴无数,但是从来没有见过其它的物种。有…

collector list 多个分组_【S01E07】groupby方法、GroupBy对象、groupby方法的分组键

Hadley Wickham(许多热门R语言包的作者)创造了一个用于表示分组运算的术语"split-apply-combine"(拆分-应用-合并),这个词很好的描述了整个过程。分组运算的第一个阶段,pandas对象(无…

清理垃圾代码bat_来买个小内存u盘么咯?盘内带电脑垃圾清理.bat那种丨heibai.org...

在某宝个别店铺购买了小内存u盘到货后插入电脑,发现自带了一个名为电脑垃圾清理的小程序。对就是这货怀揣着这家店真好,还带了垃圾清理软件的想法,我试着运行了软件.但是好像没有卵用.正好小表弟好像对这个比较了解,我去问问他咋回…

射灯安装方法图解_家居射灯怎么选?第三代宜美SMD射灯给你正解

前段时间,刚把自己的房子完成硬装,在灯具选择的过程中,家人的意见就不太统一。其父母觉得选灯只要够亮就行,而媳妇觉得选灯选贵的才行。到底谁的选灯方法好呢?其实家人们的建议并不是完全不对,灯够亮只是其…

c标签判断true false jsp_北京尚学堂卓越班252天[第042天]——Jsp

1. JSP的核心运行原理1) 客户端浏览器发送请求到服务器,访问a.jsp文件。http://localhost:8989/应用名/a.jsp2) 服务器端接收到请求后所做的处理a) 创建request和response两个对象b) 根据请求中的应用名找到该应用下面的web.xml文件,发现该应用的配置文件…

js aes加密_某高考咨询网js逆向分析笔记

一、某高考资讯网逆向分析某网站的js加密分析,安全签名signsafe HmacSHA1 AES一年前分析过网站数据还没有加密,最近需要获取新的数据发现原先的爬虫失效,请求和响应都经过加密。于是重新分析,记录下分析思路以及分析过程中遇到的…

python语言发明者 google_看看9种编程语言的发明者是怎么说的

从Node.js到C,看他们的发明者是如何评价他们的语言的未来。Ryan Dahl:Node.js问:它的主要优势是什么?Dahl:Node与其他的语言有一点明显的区别,就是处理I/O。所以它永远不允许用户锁上程序。它要求用户不断的…

opencv 的norm_22、OpenCV用卷积Filter2D进行滤波器

迄今为止,看到的函数中,卷积的操作发生在OpenCV函数的内部。理论上,图像卷积就是将内核与图像覆盖区域对应位置相乘之后求和。从调用函数上来看,它需要一个数组参数来描述内核。在实践层面,有一个重要的微妙因素会对结…

初学python有几个阶段_零基础如何系统的学习Python 从7个阶段入手

目前信息化产业发展势头很好,互联网就成为了很多普通人想要涉及的行业,因为相比于传统行业,互联网行业涨薪幅度大,机会也多,所以就会大批的人想要转行来学习Python开发。Python语言的应用Python是它们的主流语言&#…

glide加载gif图不显示动画_用Python绘制会动的柱形竞赛图

我们经常看到的Bar Chart Race(柱形竞赛图),可以看到数据的呈现非常的直观。今天就一起来学习下如何生成和上面一样的柱形竞赛图。1、导入Python库2、加载数据集这里使用的是城市人口数据集,加载我们想要的数据:其中&a…

python做后端开发的优点_【后端开发】python语言的特点是什么

python语言的特点是什么?python语言的特点简单Python是一门简单而文字简约的语言。阅读好的Python程序感觉就像阅读英语,尽管是非常严格的英语。Python的这种伪代码特性是其最大强项之一,它可让你专注于解决问题的办法而不是语言本身。容易学…

rust队友开挂_腐蚀RUST开挂玩家识别方法 如何识别玩家开挂

远程查挂是最无奈的选择,也是最后的办法,遇到一些会隐藏的你也查不到。附体附体附体!!这是唯一的方法!!附体是最好的选择,当然gm必须有丰富的游戏经验,800小时以下的玩家不适合做gm(除非有老师傅带)。下面说说如何对付只开透视的老…

不冲突的端口范围_网络中IP地址发生冲突故障怎么办

——————欢迎新老朋友们加入微信群,方便技术讨论,信息互通,行业交流:智能弱电行业专家群;智能弱电行业技术群;智能弱电行业信息群;申请加入请加小编微信:15537112161———————有朋友提…

项目结构_组织结构对项目影响系列课程---项目式组织结构

在前面的几篇文章中我们分别介绍了,系统型(简单型),职能型,弱矩阵,平衡矩阵,强矩阵结构的优点和缺点及它们带给项目的影响。今天我们介绍项目式组织结构的优点和缺点及其可能产生的影响。从结构…

第三范式的作用_钟启泉:教学范式的转型,让一线教师面临三大挑战 | 头条

培育“核心素养”的方法论——能动学习真实性的学习境脉所谓“能动学习”是“基于学习者的主体性参与与学习者之间能动的交互作用的学习而产生的”。它不是单纯记忆知识的学习,而是指学习者能够活跃地应对种种课题,并富有实感支撑的学习。基于“核心素养…