一款APP，从设计稿到切图(Android篇)
~汇集了之前的三篇Android帖子的精髓~
IOS篇：依旧声明：这里写的依旧只是某一种工作方法，而不是一种规范，你可以参考，但不要照搬，在具体工作中，一定要灵活运用。汇总贴，整理了之前三篇零散的关于Android的文章&&这里我把Android的开发文档，字体，以及不同设计尺寸的文档图片上传了，喜欢的下载；切图的工具在IOS的帖子里，喜欢可以去那下载，这里就不上传了。如果看了IOS篇，对标注切图的问题会有更全面的理解，建议去看一下&&Part 1 & &基础概念① 你需要知道的一些铺垫：手机分辨率：分辨率就是手机屏幕的像素点数，类似480*800、720**1920这个意思&&手机屏幕尺寸：手机对角线的物理尺寸，单位是英寸；比如小米4的尺寸就是5英寸，IPhone 6的尺寸就是4.7英寸&&手机屏幕密度：dpi或PPI，每英寸的像素点数，数值越高显示的越逼真细腻。下面是屏幕密度的计算方法~可以尝试算算自己手机的屏幕密度~②Android自身设定的屏幕密度安卓尺寸众多，按每个屏幕去适配肯定不现实；所以为了解决这个问题，安卓手机屏幕有自己初始的固定密度，安卓会根据这些屏幕不同的密度自己进行适配。这一点内容掌握到能满足自己设计工作需要就可以了&&以下是Android的密度划分以及代表的分辨率，这里你可以发现已经和设计稿尺寸和切图输出开始挂钩了&&你需要了解IPhone各个版本的手机屏幕密度：IPhone 4/4s/5/5s/5c/6 &320dpi & &你会发现单从屏幕密度来说，IPhone可以算是超高密度了。下面来说说这几个密度：LDPI & & & & & & & 120dpi & & &低密度 & & & & & & &不考虑这个了，消失了&&MDPI & & & & & & 160dpi & & &中密度 & & & & & & &这个目前少见&&HDPI & & & & & & &240dpi & & &高密度 & & & & & & &常见xHDPI & & & & & &320dpi & & & 超高密度 & & & & &常见xxHDPI & & & & &480dpi & & & 超超高密度 & & & 常见xxxHDPI & & & &640dpi & & & 超超高密度 & & & &Android4.3推出了对此密度的支持，也就是平板电视的4K分辨率你的切图会根据这几个密度来决定输出多少套~Part2 & &标注切图你需要知道的Android的一些开发使用的单位：dp：android开发使用的单位，其实相当于一种比例换算单位，它可以保证控件在不同密度的屏幕上按照这个比例单位换算显示相同的效果。sp：android开发使用的文字单位，和dp差不多，也是为了保证文字在不同密度的屏幕上显示相同的效果。①标注设计稿时，使用px还是dp和sp？答：和安卓工程师沟通，推荐使用dp和sp进行标注。但目前很多设计师对dp和sp这个单位并不理解，所以有些设计师提供设计稿的时候依旧使用px进行标注，这一点去和你的搭档工程师进行沟通，如果不影响他开发以及他能换算清楚的前提下，你可以考虑使用Px，但是我并不推荐。这里要记住一点(你只需要记住能帮助你工作就可以)：当屏幕密度为MDPI（160PPI）时，1dp=1px &当屏幕密度为MDPI（160PPI）时，1sp=1px像素字号=屏幕密度/160 * sp字号 &可以根据这个去算算设计稿中的像素字号标注为sp是多少，比如xHDPI下,36px的字标注为sp就是18sp，以此类推。按照不同的屏幕密度换算，也就是下图所示的意思：②使用哪种尺寸做设计稿？答：通过上图你会发现，xHDPI下，倍数关系为2，而且xHDPI就目前的市场来看，还算属于主流机型；这样无论是标注，还是主流机型都能兼顾的到，所以推荐使用720*1280尺寸做设计稿，这样即使你标注的是px，工程师也可以换算的比较方便。现在有一种情况比较普遍，公司做了IOS版本的设计稿，现在要给安卓用，应该怎么办？IPhone的屏幕密度已经达到xHDPI了，通常用750*1334的IP 6尺寸做设计稿；理论上，IP 6的切图其实可以给xHDPI使用；和我们的安卓工程师沟通，要求是把IP 6的设计稿更改尺寸到720尺寸下，对各个控件进行微调，重新提供标注。也就是说，我需要提供两套标注，一套给IOS的标注，一套给Android的标注。(这是我目前搭档的要求，实际情况根据自身环境决定)③：你需要提供几套切图资源？答：理论状态下，如果你想兼顾到目前还存在的各个机型，应该为不同的密度提供不同尺寸大小的切图。但这无疑提升了巨大的工作量，而且还可能浪费很大的资源空间，实际上，很多机型已经不占有主流市场了，而且很多奇葩的分辨率也没必要去考虑适配，所以，具体输出几套需要看公司的产品需求而定。通常我是这么干的：选取最大尺寸提供一套切片资源，交给工程师处理，适配到各个屏幕密度。这里要注意，这个&最大尺寸&，指的并不是目前市面上Android手机出现过的最大尺寸，而是指目前流行的主流机型中的最大尺寸，这样可节省很大的资源控件。关于最大尺寸选取多少，你需要和你们的安卓工程师沟通，每个安卓工程师对这个问题的结论并不同。其实现在Assistor PS这个PS外挂对输出不同屏幕密度的切片处理的非常方便，其实也没有想象中那么巨大的工作量。安卓最小可操作尺寸48dp：这和IOS的最小点击区域性质是一样的，都是考虑到手指点击的灵敏性的问题，设计可点击控件的时候要考虑到这一点，关于这个设计文档里已经明确解释了，更多的内容可以去下载设计文档查看。安卓设计使用的字体：方正兰亭黑简体& & & & & & 没发现和手机字体效果完全一样的字体，如果做设计稿的话，兰亭黑比较接近，可以考虑使用。西文字体：Roboto & & &Android西文默认字体。这里感谢 @bigyang 提供的字体：在Android 5.0之后，使用的是思源黑体，字体文件有2个名称，&source han sans&和&noto sans CJK&。 思源黑体是Adobe和Google领导开发的开源字体，支持繁简日韩，有7种字体粗细可以自己去下载，我这里就不上传了，毕竟LZ行事作风比较粗狂，设计稿也不是十分在乎和手机效果一模一样~Part3 &工作的一些方法这部分不仅仅局限在Android平台，说的是一种工作方式Q1：IOS的切片怎么提供给工程师？答：在前面，我们知道了怎么切片，但是一款APP，少说也有几十个界面，难道你要把所有界面的切片资源放到一起给工程师吗？关于这一点，我和IOS工程师进行了沟通，其实我现在是把所有的图放到一个文件夹给他的，因为我们的产品需要的切片并不多，而且我们搭档很久了，我的命名习惯和分类习惯他都已经熟悉了，很容易就找到；理论上，最好的方式是每一个页面的切片资源单独放在一个文件夹里面，文件夹命好名，这样工程师可以直接套页面使用了，如下图：大致是这个意思，最后的文件夹我就不一一翻译了，你懂就行；因为我以前也写过一点程序，所以不习惯用中文命名文件夹和文件了。然后你的@2x，@3x的切片资源放到对应的文件夹内就可以了。这个是我个人的工作习惯，不过你可以考虑要不要这么做；如果你和工程师关系不错，并且是一对好基友，那其实没必要搞这么多文件夹。但是如果你做的产品切片资源很多，而且公司有需要比较正规的工作流程，建议你可以考虑这种方式。不过可能会增加你的工作量，自己取舍吧。Q2：Android的切片怎么提供给工程师？答：IOS的切片有@2x，@3x之分，那么Android的切片根据dpi的不同，其实和IOS的类似，只不过是按照dpi来进行资源文件夹的命名，如下图：根据不同的分辨率进行切片归类，但是你看到了，如果切片特别多，提供三套甚至更多套岂不是要累死了？目前我使用的办法就是只提供最大分辨率的切片，交给安卓工程师自己去缩放适配其他分辨率吧，所以和你的搭档沟通一下。其实现在绝大多数公司限于人力物力的限制，没有这么严格的工作方式，基本上就是一个文件夹，命名好了就提供给工程师了。这里还是提醒各位，没有固定的工作方式和方法，任何方式都是为了提升工作效率而进行的。Part4 & 题外话很多朋友纠结，自己设计水平进步慢，甚至呆在现在的公司没进步反而因为每天的业务需求还退步了！刚入行的人，一定要找个好师傅带着你，这样你会少走很多弯路，设计水平和职业素养会突飞猛进。那没有师傅带怎么办？如果是刚参加工作，建议第一年先熟悉工作流程和了解行业信息动态，积累了个人作品，之后跳槽吧&&关于设计水平的提高问题，其实真正考验设计水平的，还是平面设计，这一点我之前不相信，因为我没接触过平面设计，大学专业就是游戏美术，根本涉及不到平面；但是接触工作之后，发现平面设计水平高的人，如果把思维转换一下，在网页和UI设计上都不会差，所以我个人推荐有空研究研究平面设计，对设计水平的提高很有帮助，建议是研究日本的平面设计，其一是设计水平高，其二是更符合亚洲设计的习惯。什么是设计？设计就是解决问题，所以不要一味的追求视觉效果，设计不是搞艺术。很多人会发现工作好多年的设计师工作做的东西不炫也不酷，就认为他们的设计水平很烂，但其实他们可以做出炫彩屌炸天的作品，可是工作不是炫技，设计不是绘画，解决问题才是目的。希望很多朋友不要犯这种只知道追求视觉却抛弃最终需求的低级错误。
打开微信“扫一扫”，将本文章分享到朋友圈
快给朋友分享吧！
999人已收藏
Ctrl+Enter
你的打赏就是我的动力！
悄悄说，听说打赏的人收入都比我高，不信你试试。
注: 打赏金额随意，完成后，请手动关闭本窗口。
Ctrl+Enter
您将要删除您的首页推荐大作
一款APP，从设计稿到切图(Android篇)
在她入驻到UI中国的日子里
总共吸引了81851位设计师的驻足流连
总共收获了871位设计师的由衷赞赏
总共获得了999位设计师的悉心珍藏
总共引起了73位设计师的深入讨论
依然要删除吗？Android手机界面同步显示在电脑, 即电脑上显示手机画面的软件有没有？怎么办？_百度知道
Android手机界面同步显示在电脑, 即电脑上显示手机画面的软件有没有？怎么办？
我有更好的答案
91手机助手和豌豆荚手机精灵可以在电脑上显示手机画面手机开启“USB调试”后用USB数据线连接电脑，安装ADB驱动后打开91手机助手或豌豆荚手机精灵连接就行了
采纳率：47%
豌豆荚,91都有的.连接成功后有自动刷新和手动刷新,都可以用电脑屏幕同步手机的屏幕
为您推荐：
其他类似问题
android手机的相关知识
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。发布者: mobileui
作为一个 Android UI 设计师, 手上没有一套趁手的工具的话, 画 UI/UE 示意图就是一件很痛苦的事情. 很幸运的是到目前为止, Google+ 上的
大神都在无偿的为大家提供一套 Android UI 设计工具. 目前这套工具已经更新到了.
相关推荐：
Nexus 4 作为我最喜欢的 Android 设备, 我的所有设计图都是以他为模板完成的. Taylor Ling 曾经为他出过一套 Android 4.3 设计模板, 但是在 Android 4.4 时就停止更新了. 于是我把 Nexus 5 的设计模板移植到了 Nexus 4 上, 做了一套 Nexus 4 Android 4.4 的设计模板.
这套设计工具里基本包含了所有 Android 目前为止常用和不常用的控件, 让你能够随心所欲得心应手的做出符合你预期的效果图.
百度网盘链接: 链接里除了 PSD 文件之外还包含最新的 Android Design 色版 (.aco) 与各种开源库的地址 (.pdf).
大力感谢 +Taylor Ling 与他的 UI Design Kit, 如果没有他的努力, 是不会有这套 Nexus 4 设计工具出现的.
向您推荐：
经常遇到很多伙伴咨询如何去提升专业、练习应该怎么去做、灵感从哪里来等等问题。结合这些问题总结和梳理了一下自己的点滴经验，希望能帮助到大家，与之共勉。
本文的目的是给刚入行的新人分享个&
每当苹果公布新的壁纸，总会有人或者手机厂商去模仿苹果家的壁纸，因为他家的壁纸是真的好看啊。今天我们来学习一下最新的iPhone8和 iPhone x的壁纸是怎样做出来的？
值得注意的是，&
被iPhone X刷了一天屏，到下午实在受不了各种标题写着“iPhone X 适配、指南、设计稿” 内容却是发布会回顾和手机介绍的标题党。索性自己写一篇只针对iPhone X适配的贴子，与适配无关的内&
@Echo 由于iOS 和 Material Design的组件体系有些不一样，所以关于组件的分类体系我会分iOS篇和Android篇来讲解，本篇文章为iOS 篇。
对于大部分入门设计师及中级设&
如果你关注过一些取得大成就的人，总会在他的成长故事中发现很多传奇的经历，比如少年时代的天赋异禀，或是30、40岁的大器晚成，为了做好某件事的废寝忘食等等…然后摸摸自己的胸脯说，他们是天才，我只是个普通&
@Micu设计你是美工？还是设计师？你是合格的设计师吗？ 设计工作中最基础的修图会吗？找素材拼图会吗？ 如果这最基础都不会，能称自己是设计师吗？能漫天要价吗？ 如果有点职业道德，先学会最基础的修图，再谈设计吧！ 一起看看别人是如何将图片合成的！ 第1组:采集素材 完成设计： 第2组: 第3组: 第4组: 第5组: 第6组: 第7组: 第8组: 第9组: 第10组: 第11组: 第12组: 第13组: 第14组: 第15组: 第16组: 第17组: @Micu设计投稿，自 weibo
从2011年开始接触APP，到现在为止也做了几个了，发现了一个共同点就是和每一个技术搭档切图的时候，会遇到不同的问题，因为技术的水平高低有限，所以他们要求你给切图的时候也会不一样，针对切图后来我总结了一套规律分享给大家，希望互相学习~ 相关阅读： 设计师需要掌握的图片原理与优化技巧 Android设计中的.9.png 切图小贴士 一.android版 在做android版本设计的时候，尺寸有很多种，这时我们要以一种尺寸为基准，那这个基准尺寸是480px*800px，设计图完成之后就开始切图了，我拿我之前设计的一张图为例子讲解下：
当看到上边这张设计图的时候，我们首先分析下应该给技术切哪些图（为了避免以后少改动，建议切图之前最好和技术先沟通下，怎么切）； 1、底部栏目的icon和背景：
这个一般有2种切法：（有默认和选中之后的效果）
2、顶部栏目的背景切图： 由于顶部导航栏的是渐变样式，所以切图只需要切一小条，技术来平铺拉伸就可以~（PS：如果是花纹背景，就必须切整条了，因为花纹切一小条就会被拉伸了~） 3、标注文字大小和行间距：（以这张图为例子，我标注好了，请看下图） 需要注意的： A：android主要有3种屏，即： QVGA和WQVGA屏density=120; HVGA屏density=160; WVGA屏density=240; B：apk的资源包中， 当屏幕density=240时使用hdpi标签的资源 当屏幕density=160时使用mdpi标签的资源 当屏幕density=120时使用ldpi标签的资源； C：我们标注的是PX，但是技术的算法是DP，所以需要PX和DP进行转化，PX和DP的转化主要跟密度有关系，当密度density=160即（屏幕尺寸：320*480）时，1PX=1DP；当密度density=240即（屏幕尺寸：480*800）时，1PX=0.75DP；当屏幕的尺寸大于480*800的时候，密度都按照240计算即可；当密度density=120即（屏幕尺寸：240*320）时，这个现在几乎没有人用了，所以我也不知道转化公式，如果您知道，可以留言告诉我啊~ 注意：因为我们做的是基于480*800尺寸的，大家都知道android的尺寸太多了，要想适配现在流行的尺寸，比如：640*960；720*1280等，唯一的解决办法就是图标可以根据不同尺寸各做一套，也就是图标需要做480、640和720共3套图标，不过如果你们的产品的要求不严格，做一套就可以，只不过是在大于480尺寸的屏幕上有些图标被拉大变虚而已~ 二.ios版 在做ios版本设计的时候，尺寸有3种，分别是：320*480、640*960、640*1136；这时我们要以一种尺寸为基准，那这个基准尺寸是640px*960px，设计图完成之后就开始切图了，我拿我之前设计的一张图为例子讲解下：
当看到上边这张设计图的时候，我们首先分析下应该给技术切哪些图（为了避免以后少改动，建议切图之前最好和技术先沟通下，怎么切）； 1、底部栏目的icon和背景：
这个一般有2种切法：（有默认和选中之后的效果）
2、顶部栏目的背景切图：
由于顶部导航栏的是多颜色的，所以只能切一整条给技术，商圈的图标要单独切出来
3、二级标题栏目的切图： &
周陟 （@UCDChina 深圳负责人、交互设计专业委员会（@IxDC）部长） ：我发现一个问题，大部分刚入行或者经验不多的设计师在碰到问题的时候都喜欢”索取”，最好有个现成的东西放那儿给他供着。这暴露了我们设计师群体一个严重的现状——自学能力的欠缺。 我上次提到设计师的三大素质（我自己觉得是这样，也是招人的时候重点考察的），这次就专门聊聊自学能力的问题，与各位打拼靠自己的朋友共勉。 作者还有一篇很有意思的分享：普通UI设计师与顶级UI设计师的区别是什么？ 什么是设计师的自学能力？ 我们对自学能力的理解是从上学的时候建立的，但那个时候的”自学能力”相对单纯，无非也就是如何通过自己看书、做题，复习到达熟练记忆，以便应付各种苛捐杂税式的考试。 但进入设计行业后，这个自学能力不仅仅限制在”了解知识、复述知识”的范围，设计师要学习各种软件，学习如何寻找灵感，学习如何与客户沟通，学习怎样规划自己的行业前景……这种交叉性的自学要求会成为很多人的屏障。并且，很难定义一个所谓的”自学能力”的量化目标。 就我个人理解，设计师的自学能力是使用合适的时间、方法、资源达到独立的、正确的解决问题的能力。 如何才能有效的自学？ 你细心的话，应该注意到上面我的用词，这些关键点就是有效自学的途径。在设计这个行当，光努力是不够的，我们不只是要强调效率，也要强调效能。回过来看，你们学校历史中是不是总有那么几个无论如何努力都始终分数不高的货色？ 首先是合适的时间； 如果一件需要花时间的学习任务超出了你的时间成本，你就不应该去碰它，或者换一个更好的方式，比如：你现在是一个从事了8年平面设计的设计师，你觉得目前做动画的收入高，你希望通过自学动画，然后跨行到这个领域，那么未必是最好的选择，首先你的8年的平面经验几乎没有再升值的空间，其次作为一个新人，也许你还要3年的等待，好死不死，你的脑子不错，等到你学有所成，动画行业又是另一个新的天地了。 正确的方法是重要的； 方法不仅是你练习的方式，还有思考问题的方式，这里强调的是设计师快速发现问题的能力，只有准确的了解需要自学的领域的难度、行业标准、设计思路、应用形态，你才知道从何入手； 比如：你想自学网页设计，并把网页视觉设计师作为自己的职业发展，你就应该首先了解，一个网站的基本结构，每个结构需要哪些工作岗位，他们的职责有何不同，一个网站视觉设计师应该干什么，抓住重点（而不要一开始去学什么HTML代码，那不是你最该关心的，我这话是说给某个朋友听的）。 资源指的是任何能够让你了解到所需知识的平台； 基础的东西先看维基和google，然后去书店翻一翻行业著作，然后下载一些软件的学习版知道你要使哪些工具，这些都是你的资源，如果凑巧你还能找到一些资深的从业人士咨询就更好了，但是要提醒的是，别人没有义务回答你，所以你先要准备好自己的问题。 独立性决定了你在自学途径中对自己的要求；你善于坚持的品质是你能够成功通过自己的努力达到目标的前提条件，在你周围没有更多的资源可以利用的时候，你只能靠自己不断的练习，思考。我发现要求很多设计师练习没有问题，要求他们思考却很难，自学的过程中，”想”永远是最关键的。 自学不是万能灵丹 你的性格不适合自学。这是正常的，有部分朋友他们的性格天生就是依赖性强，缺乏主见，在遇到困难的时候选择逃避，那么这样的性格想完全通过自学来达到一个”好高骛远”的目标是不太可能的。你需要选择一个付费的培训机构或者老师，通过一些外部的压力，让你有所提高。 除了自学还应该参与交流。交流当然是重要的，通过交流可以达到解惑的效果，有个前提需要注意，你要和别人交流，别人也需要知道值得和你交流，因此你要有所储备，交流既然是平等的也就需要基础，别以菜鸟之心度老鸟之腹，既冷了场又露了怯。 自学的技术必须转化为实际项目。你的自学有可能是为了自我提升，自我积累设计经验，但如果是为了解决实际问题，那么你自学的成绩就必须经过实际项目的检验，比如：你学习了一些新的交互设计的工作技巧，那么在你自己从事项目的时候你就应该争取机会导入进去，否则到头来，你也只是做了一嘴的好交互。 “人一定要靠自己”，说的不是抛弃阶级感情和团队协作，而是面对困难和障碍的时候，往往只有你自己才是靠得住的。缺乏自学能力的设计师，从性格与技能上都会落于下风，因此请不要让自己”被飞”的日子来得太早。 原文出处：《闲言碎语：周陟设计随笔》，感谢作者的无私分享，推荐童鞋们阅读原著，受益无穷 : ） & &
移动app开发中多种设备尺寸适配问题，过去只属于Android阵营的头疼事儿，只是很多设计师选择性地忽视android适配问题，只出一套iOS平台设计稿。随着苹果发布两种新尺寸的大屏iPhone 6，iOS平台尺寸适配问题终于还是来了，移动设计全面进入“杂屏”时代。看看下面三款iPhone尺寸和分辨率数据就知道屏幕有多杂了。 加上Android生态中纷繁复杂的各种奇葩尺寸，现在APP设计开发必须考虑适配大、中、小三种屏幕。所以如何做到交付一套设计稿解决适配大中小三屏的问题？设计和开发之间采用什么协作模式？一个基本思路是： 1、选择一种尺寸作为设计和开发基准； 2、定义一套适配规则，自动适配剩下两种尺寸； 3、特殊适配效果给出设计效果。 & 手机淘宝的iPhone 6/iPhone 6 Plus适配版本即将提交App store审核。先晒一下我们采用的协作模式，再慢慢说明原委。 第一步，视觉设计阶段，设计师按宽度750px（iPhone 6）做设计稿，除图片外所有设计元素用矢量路径来做。设计定稿后在750px的设计稿上做标注，输出标注图。同时等比放大1.5倍生成宽度1125px的设计稿，在1125px的稿子里切图。 & & 第二步，输出两个交付物给开发工程师：一个是程序用到的@3x切图资源，另一个是宽度750px的设计标注图。 & 第三步，开发工程师拿到750px标注图和@3x切图资源，完成iPhone 6（375pt）的界面开发。此阶段不能用固定宽度的方式开发界面，得用自动布局（auto layout），方便后续适配到其它尺寸。 & 第四步，适配调试阶段，基于iPhone 6的界面效果，分别向上向下调试iPhone 6 plus（414pt）和iPhone 5S及以下（320pt）的界面效果。由此完成大中小三屏适配。 & 为什么选择iPhone 6作为基准尺寸？ 当面对大中小三种屏幕需要适配的时候，很容易想到先做好一种屏幕，再去适配剩下两种屏幕。第一个决定是到底以哪种屏幕作为设计和开发的基准尺寸。我们选择中间尺寸的iPhone 6（750px/375pt）作为基准，基于几个原因： & 1、从中间尺寸向上和向下适配的时候界面调整的幅度最小。375pt下的设计效果适配到414pt和320pt偏差不会太大。假设以414pt为基准做出很优雅的设计，到320pt可能元素之间比例就不是那么回事了，比如图片和文字之间视觉比例可能失调。 & 2、iPhone 6 plus有两种显示模式，标准模式分辨率为，放大模式分辨率为（即iPhone 6的1.5倍）。可见官方系统里iPhone 6和iPhone &
初涉移动端设计和开发的同学们，基本都会在尺寸问题上纠结好一阵子才能摸到头绪。我也花了很长时间才弄明白，感觉有必要写一篇足够通俗易懂的教程来帮助大家。从原理说起，理清关于尺寸的所有细节。由于是写给初学者的，所以不要嫌我啰嗦。 现象 首先说现象，大家都知道移动端设备屏幕尺寸非常多，碎片化严重。尤其是Android，你会听到很多种分辨率：480×800, 480×854, 540×960, 720××1920，而且还有传说中的2K屏。近年来iPhone的碎片化也加剧了：640×960, 640×××2208。 不要被这些尺寸吓倒。实际上大部分的app和移动端网页，在各种尺寸的屏幕上都能正常显示。说明尺寸的问题一定有解决方法，而且有规律可循。 像素密度 要知道，屏幕是由很多像素点组成的。之前提到那么多种分辨率，都是手机屏幕的实际像素尺寸。比如480×800的屏幕，就是由800行、480列的像素点组成的。每个点发出不同颜色的光，构成我们所看到的画面。而手机屏幕的物理尺寸，和像素尺寸是不成比例的。最典型的例子，iPhone 3gs的屏幕像素是320×480，iPhone 4s的屏幕像素是640×960。刚好两倍，然而两款手机都是3.5英寸的。 所以，我们要引入最重要的一个概念：像素密度，也就是PPI（pixels per inch）。这项指标是连接数字世界与物理世界的桥梁。 Pixels per inch，准确的说是每英寸的长度上排列的像素点数量。1英寸是一个固定长度，等于2.54厘米，大约是食指最末端那根指节的长度。像素密度越高，代表屏幕显示效果越精细。Retina屏比普通屏清晰很多，就是因为它的像素密度翻了一倍。 倍率与逻辑像素 再用iPhone 3gs和4s来举例。假设有个邮件列表界面，我们不妨按照PC端网页设计的思维来想象。3gs上大概只能显示4-5行，4s就能显示9-10行，而且每行会变得特别宽。但两款手机其实是一样大的。如果照这种方式显示，3gs上刚刚好的效果，在4s上就会小到根本看不清字。 在现实中，这两者效果却是一样的。这是因为Retina屏幕把2×2个像素当1个像素使用。比如原本44像素高的顶部导航栏，在Retina屏上用了88个像素的高度来显示。导致界面元素都变成2倍大小，反而和3gs效果一样了。画质却更清晰。 在以前，iOS应用的资源图片中，同一张图通常有两个尺寸。你会看到文件名有的带@2x字样，有的不带。其中不带@2x的用在普通屏上，带@2x的用在Retina屏上。只要图片准备好，iOS会自己判断用哪张，Android道理也一样。 由此可以看出，苹果以普通屏为基准，给Retina屏定义了一个2倍的倍率（iPhone 6plus除外，它达到了3倍）。实际像素除以倍率，就得到逻辑像素尺寸。只要两个屏幕逻辑像素相同，它们的显示效果就是相同的。 Android的解决方法类似，但更复杂一些。因为Android屏幕尺寸实在太多，分辨率高低跨度非常大，不像苹果只有那么几款固定设备、固定尺寸。所以Android把各种设备的像素密度划成了好几个范围区间，给不同范围的设备定义了不同的倍率，来保证显示效果相近。像素密度概念虽然重要，但用不着我们自己算，iOS与Android都帮我们算好了。 如图所示，像素密度在120左右的屏幕归为ldpi，160左右的归为mdpi，以此类推。这样，所有的Android屏幕都找到了自己的位置，并赋予了相应的倍率： ldpi [0.75倍] mdpi [1倍] hdpi [1.5倍] xhdpi [2倍] xxhdpi [3倍] &
扁平化设计从2012年开始风行，直到今天仍是炙手可热。然凡事过犹不及，在某些时候这种风格会造成严重的可用性问题。其中之一便是行动按钮的可见本教程的文字并不是在同一个图层完成。需要用到多个文字图层。制作的时候先从底部开始，用图层样式制作出不同的纹理和光感，叠加成我们所需的
从有声电视到手机，再到最近异常火爆的有声图片社区应用“啪啪”，声音都扮演了一个非常重要的角色。而语音助手正成为电子消费类产品必不可对人情感的把握度，关乎着一件设计，一款产品的优秀度。凡伟大的作品无不逼近人的心灵处，所以艺术领域是彼此相通的。文学与设计，它们并不是UXC精心整理推荐：图形设计师必须掌握的比编辑技巧，它会大大提升你的专业素养。如果你平时都是这样做的，那么，好吧，你赢了！！
在业务迭代周期内，产品经理和设计师对要做的产品需求和功能点进行需求分析和设计讨论的过程中，有时会出现...
在过去的2年当中，设计领域一直在探讨UX写作（UX Writing）这一“新兴”的设计分支。实际上，...
在APP设计中，有很多组件有着类似的功能和用法。如何正确使用这些组件？这些组件之间有什么区别？一起看...
莫贝网（www.mobileui.cn）移动设备界面设计专业网站。为UI设计师提供手机界面设计，移动应用界面设计，平板电脑界面设计，导航界面设计等手持移动设备，移动终端界面设计相关知识的收集分享，共同学习的网站。
关注微博：