• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 从零开始设计一款APP之Android设计规范篇

从零开始设计一款APP之Android设计规范篇

作者: 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含App设计,经验分享,设计规范等相关知识,希望在学习及工作中可以帮助到您

《从零开始设计一款App》系列文章共6部分,之前已经讲了前5个部分,今天把设计规范部分也给大家科普下,赶紧来学习。

U妹列了一个小小的目录:

  • 基础概念
  • Android界面设计规范
  • Android切图标注
  • 安卓开发单位换算
  • 总结

一. 基础概念

1. 什么是DPI?

DPI(Dots Per Inch):每英寸点数,表示指屏幕密度。是测量空间点密度的单位,最初应用于打印技术中,它表示每英寸能打印上的墨滴数量。较小的DPI会产生不清晰的图片。

后来DPI的概念也被应用到了计算机屏幕上,计算机屏幕一般采用PPI(Pixels Per Inch)来表示一英寸屏幕上显示的像素点的数量,现在DPI也被引入。

安装Windows操作系统的电脑屏幕PPI的初始值是96,Mac的初始值是72,虽然这个值从80年代起就不是很准确了。 一般来说,非retina桌面(包括Mac)的PPI的取值区间在72-120之间,因为这个取值区间能够确保你的作品在任何地方都能保持大致相同的比例。

这里有一个应用实例: 27寸Mac影院显示屏的PPI是109,这表示在每英寸的屏幕上显示了109个像素点。斜角长是25.7英寸(65cm),实际屏幕的宽度大概是23.5英寸,23.5109约等于2560,因此原始屏幕分辨率就是2560x1440px。

  • 屏幕密度计算公式:

  • 1080x1920px屏幕密度:

2. 什么是PPI?

PPI(Pixels Per Inch):图像分辨率;是每英寸图像内有多少个像素点,分辨率的单位为ppi,通常叫做像素每英寸。图像分辨率一般被用于ps中,用来改变图像的清晰度。

二.?Android界面设计规范

1. Android各设备屏幕密度

安卓尺寸众多,按每个屏幕去适配肯定是不现实的。

所以为了解决这个问题,安卓手机屏幕有自己初始的固定密度,安卓会根据这些屏幕不同的密度自己进行适配。这一点内容掌握到能满足自己设计工作需要就可以了……

以下是Android的密度划分以及代表的分辨率,这里你可以发现已经和设计稿尺寸和切图输出开始挂钩了。

  • 安卓各屏幕密度

U妹来带大家了解一下iPhone各设备的手机屏幕密度:

iphone 4/4S/5/5S/SE/6/7≈320DPI

2. Android开发单位DP和SP

DP:安卓专用长度单位。以160 DPI屏幕为标注,则1DP=1PX

计算公式:dp x dpi/160=px

例:以720x1280px (320dpi)为例计算 1dp x 320 dpi/=2px

SP:安卓专用字体单位。以160 DPI屏幕为标注,则1SP=1PX

计算公式:sp x dpi/160=px

例:以720x1280px (320dpi)为例计算 1sp x 320 dpi/=2px

3. 设计稿尺寸

从目前市场主流设备尺寸来看,我们要用1080 x 1920 PX 来做安卓设计稿尺寸。

以1080x1920px作为设计稿标准尺寸的原由:

① 从中间尺寸向上和向下适配的时候界面调整的幅度最小,最方便适配。

② 大屏幕时代依然以小尺寸作为设计尺寸,会限制设计师的设计视角。

③ 用主流尺寸来做设计稿尺寸,极大的提高了视觉还原和其他机型适配。

所以做安卓设计稿时请以1080x1920px来做设计稿

(sketch用户以540 x 960来做设计稿)

  • 界面设计控件尺寸:

4. 安卓图标尺寸

安卓的图标相对iOS来说较少,我们只需提供以下几个尺寸就可以了,但是需要提高2套,圆角和直角各一套,因为有的地方都会用到。

512x512px、192x192px、144x144px、96x96px、72x72px、48x48px

因为安卓有很多的机型,不同屏幕密度的手机对应的icon大小也是不同的,所以U妹这里没法给你给出相应的icon所被应用的位置。

5. 安卓设计字体

英文字体为 Roboto字体,中文字体为 思源黑体。在Android 5.0之后,使用的是思源黑体,字体文件有2个名称,“source han sans”和“noto sans CJK”。

思源黑体是Adobe和Google领导开发的开源字体,支持繁简日韩,有7种字体粗细。

思源黑体字体下载地址,请戳这里:《免费下载!谷歌携手ADOBE推出超好看的的思源宋体(7种字重)》

6. 常见主流手机尺寸和分辨率

三. Android切图标注

1. 标注设计稿时,使用px还是dp或sp?

答:这个问题需要和安卓工程师沟通,推荐使用dp和sp进行标注(这里指的是在安卓设计稿的前提下)。但目前很多设计师对dp和sp这个单位并不理解,所以有些设计师提供安卓设计稿的时候依旧使用px进行标注,这一点去和你的搭档工程师进行沟通,如果不影响他开发以及他能换算清楚的前提下,你可以考虑使用Px,但是我并不推荐。

这里要记住一点(你只需要记住能帮助你工作就可以):

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

像素字号=屏幕密度/160 * sp字号 可以根据这个去算算设计稿中的像素字号标注为sp是多少,比如xHDPI下,36px的字标注为sp就是18sp,以此类推。

按照不同的屏幕密度换算,也就是下图所示的意思:

2. 你需要提供几套切图资源?

答:理论状态下,如果你想兼顾到目前还存在的各个机型,应该为不同的密度提供不同尺寸大小的切图。

但这无疑提升了巨大的工作量,而且还可能浪费很大的资源空间,实际上,很多机型已经不占有主流市场了,而且很多奇葩的分辨率也没必要去考虑适配,所以,具体输出几套需要看公司的产品需求而定。

通常我是这么干的:

选取最大尺寸提供一套切图资源,交给开发工程师处理,适配到各个屏幕密度。

这里要注意,这个“最大尺寸”,指的并不是目前市面上Android手机出现过的最大尺寸,而是指目前流行的主流机型中的最大尺寸,这样可节省很大的资源空间。关于最大尺寸选取多少,你需要和你们的安卓工程师沟通,每个安卓工程师对这个问题的结论并不同。(我的安卓搭档,让我提供XXHDPI的切图资源就好,我用的切图工具是Cutterman,切图一键搞定)

3. Android的切图资源提供哪个尺寸给开发哥哥?

答:iOS的切图有@2x,@3x之分,那么Android的切图根据dpi的不同,其实和iOS的类似,只不过是按照dpi来进行资源文件夹的命名,如下图:

根据不同的分辨率进行切图归类,但是你看到了,

您可能想查找下面的文章:

  • 手机APP用户界面设计的10点建议
  • 关于音乐播放App(应用软件)的分析与重设计 如何设计出漂亮的音乐播放界面
  • 写给新手的APP结构指南:首页相关(上)
  • 基础科普!重复与突变在产品设计中的应用
  • 超全面的导航设计基础知识总结(一)
  • 写给UI新手的APP结构指南:注册和登录
  • 用户体验是一种过程,而不是结果
  • 超全面的移动端UI 设计规范整理汇总
  • 感觉设计不舒服但又不知道原因?可能是这8个常见的交互细节问题
  • 这个帮你改善睡眠的APP,是这样设计出来的

相关文章

  • 2018-08-23超全面!这可能是你见过最全的弹窗设计解析
  • 2018-08-23“自闭”的你,就别说自己是设计师了
  • 2018-08-23设计师如何推动自己想法?专访百度UI设计师JJ Ying
  • 2017-08-06怎样让一个div高度自适应浏览器高度
  • 2018-08-23当总监说你的作品太肤浅时,该如何改进?
  • 2017-08-06网页设计的平面构成排版能力的介绍
  • 2018-08-23动效在UI设计中有哪三个关键用途
  • 2018-08-23案例超多!3大类APP弹窗提醒方式总结
  • 2017-08-06用frameset实现复杂的页面布局技巧小结
  • 2018-08-23如何用视觉画面调动用户的情感?来看这些方法!

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 产品改版实战经验:设计师如何做改版效果评估?
    • 秋风渐起,大咖们都跟随这些趋势做网页设计
    • 为什么要少用Iframe的几个原因分析
    • 这7种设计误区,会影响网页内容的体验
    • Uber 设计师:新人和大牛的差距到底在哪里?
    • 一秒做出8000张海报设计的「鲁班智能设计平台」是怎么工作的?
    • 用户研究如何入门? 来看爱彼迎用研的回答!
    • Google对话式交互规范指南(六):用户对话中的自然惯例
    • 「这个控件叫什么」系列之虚拟键盘/软键盘/Soft Keyboard
    • 这四个动效小趋势,让你可以把网页设计得更加圆融

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有