背景：&br&上过学校和研究生一起上的 HCI 课程（CS 下属）。做的 course project 从交互设计和完成度来说自认是整个课程最好的，且满分。*（因为别的 project 做的实在太水了，就没有真正交互起来，而且很丑……）。但是懒得背一堆东西，于是成功拿 B……&br&&br&平常喜欢看 HCI 的论文，因为看算法的论文看不懂，从来没看完过……&br&看过几遍 iOS 的 HIG；也看过几遍 WP 的 guide line；Google 的没看过。&br&通读过整个 the design of everyday things。学校老师讲的比较堪忧。。&br&&br&正经学过素描几年，然而手绘水准其实很堪忧。&br&&br&做过以下的全部设计：&br&&a href=&///?target=https%3A///TakefiveInteractive/BillBoard& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&TakefiveInteractive/BillBoard · GitHub&i class=&icon-external&&&/i&&/a&&br&&a href=&///?target=https%3A///TakefiveInteractive/WeatherMap& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&TakefiveInteractive/WeatherMap · GitHub&i class=&icon-external&&&/i&&/a&&br&&br&做过模特。&br&高中时候做过一些同人出版物；17岁时候有从头到尾基本独立完成过一次，包括各种出血线，开本设计，等等（比较小众，而且是腐本……&a href=&///?target=https%3A//selfstore.io/products/469& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&汉尼拔的秘密食谱&i class=&icon-external&&&/i&&/a& 看这里） &br&&br&目前的问题：&br&觉得应该学习下字体排印，之后会报 typograph 的 Studio，自己在看各种字体的书；但是感觉并没有什么实际提高。会注意 App 、前端等地方的字体使用和 fallback，字形问题，但是还是感觉 UI 设计师不应该管这个？&br&&br&然后做 动效 是用各种pod包自己搭配的。感觉好看能做到，但是没感觉到有什么「理念」存在。就是靠朴素的审美觉得这个应该这样，更直观，更符合感觉。&br&&br&我在遵守设计规范，和尝试将设计规范应用到实际的时候，（比如 Billboard 里的 sketch 文件，大概从头到尾用了半天完成，把 Google MD 应用到 iOS 上）会感受到「理念」的存在。但是自己做原创，完全没有模仿对象和标准的设计的时候（比如 WeatherMap 当时做的时候……就想要做完全不一样的东西）会把握不住「理念」。简单来说，如果有一个完全崭新的设计需要，能做，但是会没法使得整体很和谐。&br&&br&软件主要用 Sketch 之类的。也会画线框图。&br&&br&另外，要不要多练习手绘？毕竟还有一点点素描的底子在……&br&&br&同时，对于有些问题，过于相信 AB test……比如有些设计上的问题，我觉得直接做灰度测试好了，很多设计师的争论（比如这样层级太多影响用户进行下一步）不如做ab test 之后做数据分析……&br&&br&为什么要学：&br&因为觉得……很想对别人的设计吐槽啊……想吐槽「感觉不对劲」，而且经常能证明自己的观点是值得参考的……&br&&br&对于一些职业的设计师，觉得他们很多地方其实也惨不忍睹……比如排版！想要在各个方面能更全面发展。&br&&br&想做 Independent Developer，觉得设计觉得问题多多；现在的独立开发者又觉得他们很多时候缺少一些「设计功底」；但是自己又不知道这样的功底是什么。&br&&br&但是自己把握不住「整体理念」，不知道怎么达到职业 UI 设计的水平。。
背景：上过学校和研究生一起上的 HCI 课程（CS 下属）。做的 course project 从交互设计和完成度来说自认是整个课程最好的，且满分。*（因为别的 project 做的实在太水了，就没有真正交互起来，而且很丑……）。但是懒得背一堆东西，于是成功拿 B……平常喜欢看 HCI 的论文，因为看算法的论文看不懂，从来没看完过……看过几遍 iOS 的 HIG；也看过几遍 WP 的 guide line；Google 的没看过。通读过整个 the design of everyday things。学校老师讲的比较堪忧。。正经学过素描几年，然而手绘水准其实很堪忧。做过以下的全部设计：做过模特。高中时候做过一些同人出版物；17岁时候有从头到尾基本独立完成过一次，包括各种出血线，开本设计，等等（比较小众，而且是腐本…… 看这里） 目前的问题：觉得应该学习下字体排印，之后会报 typograph 的 Studio，自己在看各种字体的书；但是感觉并没有什么实际提高。会注意 App 、前端等地方的字体使用和 fallback，字形问题，但是还是感觉 UI 设计师不应该管这个？…
学习中，多看少说！
&img src=&/1c62aac8eea77fe0bbe46c04e4ebf487_b.png& data-rawwidth=&880& data-rawheight=&398& class=&origin_image zh-lightbox-thumb& width=&880& data-original=&/1c62aac8eea77fe0bbe46c04e4ebf487_r.png&&&img src=&/7ee36d2cb3a07a3a0490afade28d2932_b.png& data-rawwidth=&1438& data-rawheight=&1182& class=&origin_image zh-lightbox-thumb& width=&1438& data-original=&/7ee36d2cb3a07a3a0490afade28d2932_r.png&&&br&UX不等于原型图，很多人一上来就是画原型图也是醉了，前期的用户调研才是最重要。&br&我之前在国内互联网公司做过产品，后来在英国读HCI专业，下面总结在google找到各种知名公司lead给出的意见，主要分为两点：&u&&b&学习UX + UX设计实践 +建立UX人脉圈&/b&&/u&。 因为国外UX方面的内容比较多 ，部分资源可能需要楼主爬墙。&br&&u&&b&学习UX + UX设计实践 +建立UX人脉圈，&/b&&/u&&u&&b&学习UX + UX设计实践 +建立UX人脉圈，&/b&&/u&&u&&b&学习UX + UX设计实践 +建立UX人脉圈（重要的事情说3遍）&/b&&/u&&br&&br&&b&&u&一、学习UX&/u&&/b&&br&a. 经典书籍推荐：&a href=&///?target=http%3A//jessicaivins.net/ux-resources-for-beginners/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Read my list of UX resources for beginners&i class=&icon-external&&&/i&&/a& （初学者必看的经典书籍，包含视频+书籍），先从看书开始吧。&br&b. 最新书籍推荐：&a href=&///?target=https%3A///great-books-for-designers-to-read-in-2016-d2ebea.u70w825mo& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Great books for designers to read in 2016&i class=&icon-external&&&/i&&/a&&br&c. UX广播： &a href=&///?target=http%3A//jessicaivins.net/5-of-my-favorite-ux-podcasts/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&my blog post about my favorite UX podcasts&i class=&icon-external&&&/i&&/a&&br&d. UX网站：UX网站实在太多了，质量不一，推荐几个干货：&a href=&///?target=https%3A///ux-ui-readings& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&UX — UI Readings&i class=&icon-external&&&/i&&/a&（Medium上UX/UI文章集合），&a href=&///?target=http%3A///& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Dribbble&i class=&icon-external&&&/i&&/a&, &a href=&///?target=http%3A///& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&The Best Designs&i class=&icon-external&&&/i&&/a& and &a href=&///?target=http%3A///& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Awwwards&i class=&icon-external&&&/i&&/a& （可以在上面关注一些大牛，看他们的设计，得到灵感）， &a href=&///?target=http%3A///& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&All You Can Learn&i class=&icon-external&&&/i&&/a&（这个网站集合了世界上最棒的UX专家的资源和文章，还有live seminar）, &a href=&///?target=http%3A///& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Inspiration and helpful links for User Experience Designers&i class=&icon-external&&&/i&&/a&（这个网站集合了所有的UX网站，果然你喜欢收藏各种网站，点这个）。&br&&ul&&li&&b&**不想看英语的可以看：&a href=&///?target=https%3A///foru17/front-end-collect/issues/9& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&国内互联网企业UED博客集合 · Issue #9 · foru17/front-end-collect · GitHub&i class=&icon-external&&&/i&&/a&&/b&&/li&&/ul&&br&e. 工具的学习：Adobe Photoshop & Illustrator 等，在学习阶段，用什么工具都是次要的， 我在英国的UX项目，老师从不care我们用什么工具，只要你能表现出交互过程即可，不过既然想往职业发展，还是掌握基础工具吧。&a href=&///?target=http%3A///& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Design tuts&i class=&icon-external&&&/i&&/a&, &a href=&///?target=http%3A///Photoshop-tutorials/279-0.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Lynda&i class=&icon-external&&&/i&&/a& and &a href=&///?target=http%3A///search%3Fquery%3Duser%2Bexperience%2Bdesign& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Skillshare&i class=&icon-external&&&/i&&/a&.（这3个网站可以教你如何学习工具）&br&&br&&b&学习的时候要做笔记！做笔记！做笔记！重要的事情讲3遍&/b&&br&&br&&br&&b&&u&二、UX设计实践（最重要！）&/u&&/b&&br&&img src=&/3953bcc461aabfd9c17ca90bba39da12_b.png& data-rawwidth=&1024& data-rawheight=&764& class=&origin_image zh-lightbox-thumb& width=&1024& data-original=&/3953bcc461aabfd9c17ca90bba39da12_r.png&&&br&重点还是要实践，光看不动手，那是纸上谈兵，而且很多UX工作招聘是要有作品集的，你不实践，哪来的作品集啊。&br&Q：我不是UX专业的，没有项目可以参与，怎么实践啊？&br&A：很多人一提到UX，就直接认为是画原型图，一上来就画原型图，这样是错误的，UX涉及到太多方面了，要搞清楚UX设计的过程啊，太懒了，贴一些课件吧。&br&&img src=&/c5df8d60fdd_b.png& data-rawwidth=&1700& data-rawheight=&1188& class=&origin_image zh-lightbox-thumb& width=&1700& data-original=&/c5df8d60fdd_r.png&&&img src=&/aed109b9e99b6bb529d4a_b.png& data-rawwidth=&1118& data-rawheight=&1004& class=&origin_image zh-lightbox-thumb& width=&1118& data-original=&/aed109b9e99b6bb529d4a_r.png&&&br&基于前面学习的基础上，你应该已经知道了UX设计的具体流程以及各个流程的要点， 要开始动手啦。实践主要分为几个阶段。&br&&b&&u&1、第一阶段：分析现有热门APP或者WEB&/u&&/b&&br&如果你没有如果的积累，没有体验过很多的APP或者WEB，一上来让你直接UX设计是很难的，所以第一阶段应该是分析现有热门APP或者WEB。&br&热门的产品在UX方面相对有考究，分析产品不要只是分析他们的页面交互方式啊，这样是不够的，一切交互都是要建立在是否方便用户学习、使用，方便解决他们的需求。要&br&&b&1）分析他们的主要目标用户群是哪些？这些用户群有什么样的特点？&/b&&br&&div class=&highlight&&&pre&&code class=&language-text&&比如说美团外卖这个APP， 目标用户群应该是学生蓝领白领等中低收入人群，而不是高端收入人群。 这些中低端收入人群有什么特点呢？这些你可以通过网上查找资料，看产品所有人的说法以及其他人的分析
&/code&&/pre&&/div&&br&&b&2）分析他们的核心功能，功能的优先级。&/b&&b&分析用户的使用场景，一个功能通常对应多个用户场景，这些场景也是要有优先级的。&/b&&br&&br&&b&3）然后分析他们各个场景的交互方式，判断这个功能的布局，交互方式是否能够方便用户快速解决他们的核心需求，交互方式是否满足用户使用场景。&/b&&b&分析不要贪多，认认真真做好一个app的分析就能收益不少，分析要细致。&/b&&br&&div class=&highlight&&&pre&&code class=&language-text&&比如说：如果一个app的核心功能需要用户点击好几次才能用到的话，这样的交互设计是有问题的。功能为用户服务，交互为功能场景服务，交互要将功能更好的呈现给用户。
&/code&&/pre&&/div&&div class=&highlight&&&pre&&code class=&language-text&&比如说输入密码时，就有不同的交互方式：a.已输入的字符用小黑点隐藏，当前输入字符明文显示后隐藏；b. 直接用...形式隐藏密码；c.提供是否显示密码选项给用户。这几种交互方式有什么优缺点？哪个更能满足主要的用户场景呢？
如果银行APP的输入密码的交互，有一种场景，用户在户外输入密码，旁边可能有人，而且银行密码这个要求安全性很高，所以交互方式应该选择b（直接用...形式隐藏密码），有因为在用户输入密码时，旁边可能有人，为了防止他们故意瞄看记住键盘顺序，从而盗取密码，银行APP的输入密码的交互应该还要加上随机键盘按键顺序，每次输入密码，键盘按键顺序应该变更。
&/code&&/pre&&/div&&br&&b&4）分析产品，不要只单单分析它一个，还要分析的它的竞争对手。国内很多APP是互相抄袭的，所以建议不要只分析国内产品，也要分析国外的产品。&/b&&br&&br&&b&5）分析出他们交互的优缺点之后，要想想怎么改进啊，以前面试过一些人，很多人只会吐槽，但是说起如何改进起来就是哑口无言啊。。。如果你是UX设计师，你会采用什么样的交互方式？为什么？你的交互方式满足了用户特征吗？你的交互方式对应哪个用户场景啊？&/b&&br&&br&以上所讲的分析更多是纵向分析，分析要细致，一开始分析的时候的确会有些难。&br&分析还可以横向分析，比如说很多电商app都有支付功能，你可以挑选出几个具有代表性的电商app，然后横向分析他们支付功能的交互。&br&&br&&br&&b&&u&2、第二阶段：模仿临摹&/u&&/b&&br&&b&1）注意：&/b&&br&【临摹】不是【抄袭】，抄袭是不考虑用户使用场景，不管三七二十一，不考虑任何用户因素，直接把结果照抄。&br&【临摹】在的目的在于练习。临摹有几个阶段：&br&&blockquote&&ul&&li&把常用的交互方式的优缺点都复制到你的脑海里，吸收转化成自己的东西。最开始的时候要做到的就是也就是全盘复制，不要去自作聪明做任何改动，可以分析一下GOOGLE和APPLE发布的官方材料。&br&&/li&&li&在完全掌握了目前最优秀的做法后，就可以根据自己的认识和经验对其进行改进，就是突破既有标准。但如果在还没有掌握号基础之前就想突破，很容易就心浮气躁，反倒不好。&br&&/li&&li&最后是创新。这个阶段最难，就是自成一派，变成别人的标杆。&br&&/li&&/ul&&/blockquote&&b&2）临摹资源：&/b&&br&临摹资源有很多，dribbble和behance上面会有很多交互设计时分享他们的整个设计过程，还有可以参考知名院校毕业生的作品集，比如CMU HCID的学生作品集，收获会很多的。同时，还可以看一些设计咨询公司的优秀案例，多个纬度横向、纵向对比分析，然后自己按照优秀的作品集的思路重新做一遍，做完之后，放几天，然后再继续改进。&br&&br&&b&&u&3、第三阶段：自己从头设计一个产品&/u&&/b&&br&这个阶段你就可以挖掘身边的需求啊，自己尝试从头设计一个app， 认认真真把所有的设计流程做一遍，市场调研？（虽然这些在公司里大多是产品经理弄的或者老板直接敲定。）目标用户群？（如何划分目标用户），用户群的特点是什么？（时间有限的话可以看一些权威论文），用户需求（如何用户调研，如何获取他们的需求?），用户使用场景？设计？用户测试？迭代改进？等等一系列的东西。&br&&br&如果你实在不想挖掘需求，可以去app store或者android市场找一些用户量多的或者刚出来很火的app， 看应用市场里app下载页里的app功能描述，然后尝试自己设计这些功能的交互。（感谢评论里的 李走开。）&br&&br&在实践阶段，不过是分析，还是自己设计，都可以把这些东西放在自己的博客或者Behance或者DRIBBBLE上，将来找工作的时候，都可以是自己的作品集。&br&&br&&b&4、第四阶段：尝试找实习或者正式工作&/b&&br&我之前的设计部同事也是半路出家，自学UX设计的，他之前的专业与这个完全没有关系。&br&&br&&br&&b&&u&三、建立UX人脉圈&/u&&/b&&br&&img src=&/a28788bbeb_b.jpg& data-rawwidth=&600& data-rawheight=&338& class=&origin_image zh-lightbox-thumb& width=&600& data-original=&/a28788bbeb_r.jpg&&要往UX方向发展，自然少不了这个行业里的人脉，人脉建立可以有以下几个途径，欢迎补充。&br&1）社交网络：可以在facebook上找一些网页或者组织，当地会有很多UX的人聚会的活动，可以多参与勾搭；twitter上面follow一些人。国内的，在知乎，微博等地方都可以勾搭到相关UX设计的，多给他留言互动， QQ群或者微信群也会有一些线下见面会，多参与。&br&&br&2）关注一些UX大牛的博客、Behance或者DRIBBBLE，多给他留言互动，久而久之内推什么的都不是问题，同时，自己的个人博客也要持续更新啊，这样和别人搭话也能让别人知道你们的热情。&br&&br&3）参与一些UX的论坛会议之类的，这些有一些是要收费的，但是各种大牛哦。&br&&br&&br&啊，写得好累，希望对大家有帮助（收藏数再一次是点赞数的几倍。。。）
UX不等于原型图，很多人一上来就是画原型图也是醉了，前期的用户调研才是最重要。我之前在国内互联网公司做过产品，后来在英国读HCI专业，下面总结在google找到各种知名公司lead给出的意见，主要分为两点：学习UX + UX设计实践 +建立UX人脉圈。 因为国外UX…
谢邀。我觉得UI和交互设计还是有区别的（我自己倾向于把UX看做整体的体验设计，交互和UI都是其中的组件），同时精通不是做不到，只是大部分人都是有侧重的，全能选手还是少数。当然如果你想做两项全能那么我大力支持，只是臣妾我自己也没做到啊TwT&br&&br&&br&（首先 抱歉下面会甩出很多英文单词，我的UX相关学习和经验完全是在英语环境里做的，所以很多概念我不知道怎么用中文表达。有什么没说清楚的可以问我。）&-9/28更新：多谢 &a data-hash=&b88d8a7de69bcd91a75c3& href=&///people/b88d8a7de69bcd91a75c3& class=&member_mention& data-editable=&true& data-title=&@小强& data-tip=&p$b$b88d8a7de69bcd91a75c3&&@小强&/a& 提供中文术语翻译让我看起来不那么装逼&br&&br&我是半工程出身的职业UX/交互设计师（在大部分公司这两个职称是可互换的），但UI能力挺烂的，没有扎实的typography、色彩之类的设计基本功，更加炒鸡不会画画（在我认识的UX designer里，会画画的其实是非常少的一部分）。作为一个交互设计师我的专长在于理解并分析不同用户的背景、需求、和mental model（心智模型），提出能让他们觉得直观、高效又有趣的交互方案，并且通过user validation来验证这些方案。&br&&br&如果你想做一个UX/交互设计师，根据你的背景来看我觉得你足够了解工具和一些基础知识，但现阶段比较依赖自己的直觉和美感。大部分想要自学做UX的人都能通过主动参与各种小型project自然而然地达到这一步。接下来我建议你学习规范的user-centered design process（以用户为中心的设计过程），把foundational research（基础调研）、needs evaluation（需求评估）、ideation（构思）、prototyping (low-fi / high-fi)（低保真/高保真原型制作）、user validation（用户验证）、iteration（迭代）等这些环节都把握了并且多！多！实！践！！时间充足的话读一下Contextual Design: Defining Customer-Centered Systems（一本又老又厚又干的大干货），没什么时间的话读读Lean UX、$1 Prototype之类的。&br&&br&在CMU HCI我获益匪浅的一门课叫User-Centered Research and Evaluation，讲了很多正统规范的设计流程（没记错的话Contextual Design是这门课的教科书）。我当初上这门课的时候觉得好麻烦好麻烦，这么多环节和methods，什么affinity diagram（亲和图）什么workflow model（工作流模型）怎么可能都有用。工作之后才发现学过这些research methodology实在是太好了。上学的时候天真地以为设计师一拍脑袋想出来一个无比美丽的app那就是最浪漫完美的，现在才知道不做面对面的深度qualitative user research（定性研究）的话卵用都没有，你永远不知道用户到底是怎么想怎么用的。我认为谦逊是一个合格的交互设计师最重要的技能，不能默认用户都和你想法一样。&u&&b&一定一定不要为自己的品味和思考模式设计一个应用，因为这样只有你自己会想用它。&/b&&/u&&br&&br&至于AB test，它只能给你数据但无法告诉你为什么。完全依赖AB test的结果就是你可能达到了local maximum，得到了一个你个人臆想出的几个方案中数据看起来最佳的一个，但你不知道为什么它的数据更好，也不知道它是不是仍然有缺陷。做了qualitative research就会发现很可能还有一些根本性的、完全出乎你意料的问题，了解了这些才能达到global maximum。&br&&br&题主说的想做不一样的新东西却把握不住「理念」这个问题，我想你只要去跟真实的用户聊一聊，了解他们的现状和需求，灵感就会自动涌出来了。一个人坐在电脑前面空想着做一些「新颖」的idea，很可能没什么灵感也解决不了任何实际问题，只是把一些形状和颜色放到了不同的地方。&br&&br&我说的这些可能听起来比较学院派。的确有很多优秀的设计师一拍脑袋就能想出来一个天才的app，但我敢保证他们都有过无数次传统且规范的设计流程经验，才能做到今天的水平的。&br&&br&&br&如果题主觉得这些学院派的做法十分枯燥无趣，但仍然很喜欢做UI设计的话，那么或许纯UI或者visual designer的道路更适合你。我个人对打造漂亮精致的eye candy画面兴趣并没有那么高，对我来说解决真实的用户的真实的问题才是最有趣的难题。但如果你对视觉设计更感兴趣的话，那么推荐你打磨传统设计的基本功。这方面我了解不深就不乱指点了。
谢邀。我觉得UI和交互设计还是有区别的（我自己倾向于把UX看做整体的体验设计，交互和UI都是其中的组件），同时精通不是做不到，只是大部分人都是有侧重的，全能选手还是少数。当然如果你想做两项全能那么我大力支持，只是臣妾我自己也没做到啊TwT（首先 抱…
已有帐号？
无法登录？
社交帐号登录北京 4月20日已结束北京-4月27日直播课程 4月14日已结束
阅读（3624）
来人人都是产品经理【起点学院】，BAT实战派产品总监手把手系统带你学产品、学运营。
本文是为“初学者”或者作为从一开始就想要学习更多跨DPI和跨平台设计知识的中级设计师准备的序言读物。 没有复杂的计算和不可分析的图表，只是按照划分直截了当地将内容呈献给读者，便于读者理解以及直接运用到设计过程中，非常实用且专业的知识，记得收藏唷。
什么是DPI、PPI？
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，因此原始屏幕分辨率就是px。
我知道23.5109不是恰好等于2560.实际上是23. 英寸。要是用每厘米的像素点计算，会更加准确，但是这里你知道就行。
在屏幕上设计一个前面我们讨论过的109*109px的蓝色正方形。
这个正方形在1*1英寸的屏幕上有一个初始的物理尺寸，但是如果用户的PPI是72，蓝色正方形就会显得更大。因为PPI是72时，屏幕需要大约1英寸半的尺寸来展示109px的蓝色正方形。模拟效果如下图所示：
附加： 不考虑颜色和分辨率差异，因为每个人看到的设计都是不同的。你应该力求达到平衡，满足大多数的用户的需求就可以了。不要期待用户拥有和你一样好的屏幕。
屏幕分辨率（原始分辨率）
屏幕分辨率对用户如何理解设计有很大的影响。幸运的是，自从LCD显示器代替了CRT，现在的用户更趋向于使用原始分辨率，它保证了好的屏幕尺寸或者说PPI比例。
分辨率定义了屏幕上显示的像素数量（比如：27寸的显示器分辨率是px，2560是宽，1440是高）。在了解了PPI之后，我们就知道它不是一个测量物理大小的单位。你可以有一个屏幕，它能跟墙一般大，也可以跟脑袋一般小。
如今的LCD显示器有分辨率初始值或者原始分辨率来确定屏幕上展示像素点的数量。它和过去的CRT显示器稍有不同，这里就不赘述了。
一个27寸的影院显示屏，原始分辨率为px，PPI为109。如果减小分辨率，元素将会显示得更大，因为有23.5英寸的水平宽度需要数量远远不够的像素点来填满。
如例子所示，屏幕的原始分辨率是px。如果分辨率减小，像素点还是被展示在PPI为109的屏幕上。你的操作系统会自动拉伸所有元素来填补间隙，使得整个屏幕被填满。GPU/CPU会捕获所有像素点并且使用新的比例重新计算他们。
如果想要设置27寸屏幕分辨率为（之前宽的一半，高的一半），GPU会让一个像素点变成原来的2倍大来填充屏幕，那么结果就是会变 得模糊。在分辨率为原来一半的时候，因为有简单分频器的存在可能看着还算可以。但是如果使用原来的1/3或者3/4，最终会以小数点结束，就不能等分一个 像素点了。我们来看下面的例子：
思考后面的例子：在原始分辨率的屏幕上画一条1px的线，然后设置分辨率为50%。为了填满屏幕，CPU需要制造150%的视觉效果，所有像素点都要乘以1.5，1*1.5=1.5，但是因为不能有半个像素点，这就使得填充周围的像素点的颜色只有一部分，便产生了模糊。
这就是为什么当你想要改变一台Retina Macbook Pro的分辨率的时候，系统会展示下面的窗口来让你知道（下面的屏幕截图）这个分辨率会“看着像”px，它采用用户的分辨率经验来表达尺寸比例。
这些描述带有浓重的主观色彩，因为它用像素分辨率作为衡量物理尺寸的单位，虽然不够严谨，但至少他们觉得是对的。
附加：如果你希望你的设计精确到像素，那么最好不要改变原始分辨率。你也许觉得使用小的比例会更舒服，但是当涉及到像素点时，这样会影响精确性。有 些时候，用户会把调整分辨率当作在控制屏幕（特别是桌面）美观程度的方式，这样虽然会让设计看起来不太好，但是可以满足用户对易读性的需求。
你也许听到过很多次4K，它在最近非常流行。在了解它是什么之前，我们需要先弄明白“HD”的含义。
需要事先声明的是，本文是简化版本，所以这里只考虑最常见的分辨率。HD有不同的类别。
它适用于从px或720p开始的720水平的任何分辨率。一些地方也将这个分辨率SD叫做标清。
全高清适用于px的屏幕。大多数的TV以及越来越多的高端手机（Galaxy SIV，HTC one，Sony Xperia Z，Nexus5）都是这个分辨率。
4K始于像素，它也叫做Quad HD，被称为UHD超高清。简而言之，你可以放4个1080p的像素点在4K的屏幕上。
另外一个4K的分辨率是，这个稍微大一点，一般用在投影仪和大画幅相机上。
如果我外接一个4k的显示器到电脑会发生什么呢？
最新的OS不再参照4K的比例，这意味着给Chromebook或者macbook外接一个4K显示器，将会使用最高的DPI。假如这样，200%或者@2x，按照正常比例展示就会看起来很好但是有点小。
假设的例子：如果你外接一个12寸4k屏幕到12寸高清屏幕（2x）的电脑，所有东西都会显得小了两倍。
4k就是四倍全高清。
如果现在的OS掌握了4k但是又不按照比例来，这说明现在还没有特定的4k资源。
如今没有手机或者平板电脑使用4k.
显示器赫兹
稍微从PPI和屏幕分辨率中休息一下，来看个小知识。你可能注意到在屏幕设置中靠近分辨率的地方有显示器的Hz值，它和PPI没什么关系，显示器赫 兹或者刷新频率是显示器每秒展示固定图像或者帧的速度单位，比如一个60 Hz的显示器每秒可以显示60帧，同样，一个120 Hz的显示器每秒可以显示120帧。
在UI环境中，显示器赫兹（Hz）决定了动画的流畅和精细程度，大多数的屏幕都是60Hz。而每秒显示的帧数依赖于设备处理图像的能力，像在Atari 2600使用120Hz屏幕就没有太大的用处。
下面这个例子，可以帮助大家更好地理解。T-rex同时在60Hz和120Hz的屏幕上以完全相等的步伐快速从A点到B点，60fps的屏幕上展示了9帧动画，而在相同时间内120fps的屏幕展示了2倍帧数，并且动画在120Hz屏幕上会显得更加流畅。
附加: 也许有人会说，每秒显示60帧以上人眼是无法识别的，这是错误的。
什么是视网膜显示屏
“Retina（视网膜）显示屏”是Apple公司在发布iPhone 4时引入的。之所以叫做Retina是因为设备的PPI非常高以至于人的视网膜也不能在屏幕上分辨出像素点来。
这个说法在现在的设备的屏幕范围内是正确的，但是随着屏幕越来越好，我们的眼睛也会被训练得足够感知像素点，特别是圆形的UI元素。
从技术的角度来讲，他们做的就是在完全相同的物理大小上展示比原来高和宽多一倍的像素点。
iPhone 3G/S是3.5英寸的斜角，分辨率为480320px，PPI为163。 iPhone 4/S是3.5英寸的斜角，分辨率为960640px，PPI为326。
事实证明正好是两倍的关系，同样的物理大小，屏幕上的元素却有两倍的清晰度，因为他们有两倍的像素点。1个标准的像素＝4个Retina像素，像素的四倍。
思考下面的例子，在复杂设计中如何直接应用：
图注：在第三方设备上很难模拟出来自不同设备的不同图片质量，如上图所示，Retina的音乐播放器虽然与iPhone 4的音乐播放器有相同的物理空间，但图片质量看上去比iPhone 4好了两倍并且更清晰。如果大家想在本地进行验证，我会提供免费的演示事例源码，供大家下载（）。
因为“Retina”显示屏的命名归Apple公司所有，所以其他公司使用“HI-DPI”或者“超大像素sp33d显示器”（我将注册这个）或者其他的来表示。
附加: 使用Apple的产品是熟悉DPI换算，理解分辨率、PPI、物理尺寸比例之间差异的极佳方式，因为你只需要考虑一个像素比。
什么是像素比
当你的设计需要在不同PPI下转换时，像素比就是你的救星。当你知道像素比后，就不需要再考虑设备的详细规格了。
以iPhone 3G和4为例，相同物理大小上iPhone4的像素点是3G两倍，因此像素比就是2，这表示只需要用你的资源乘以2，就可以兼容4G的分辨率了。
让我们先创建一个44*44px的iOS上被推荐的touch按钮（我后面会介绍），定义为典型按钮“Jim”。 为了让Jim在iPhone 4上看起来更好，需要创建一个它两倍大小的版本。下面就是我们做的。
很简单。现在的Jim，一个是标准PPI（iPhone 3）的Jim.png版本，一个是200%PPI（iPhone 4）的Jim@2x.png版本。
现在你也许会问，“等等啊！我很确定还有其他的像素比，不止这两个。”有，这是一个噩梦。好吧，也许不是噩梦，但是我很肯定你宁愿花一天时间熨袜子也不想处理无数的像素比。幸好这也没有你想象的那么严重，我们后面再说。
让我们先说说单位，因为现在比起像素，你更需要单位来规范多DPI设计。这就是DP和PT起作用的地方。
附加: 对于每一个你正在做的设计，像素比都是需要知道的。像素比把屏幕大小和PPI结合起来，让人们更理解它们。
什么是DP、PT、SP
DP或PT是测量单位，你可以用来规范你的各种设备和多DPI的app模型。 DP(Dip)表示独立于设备的像素点，PT表示点。DP用在Android上，PT用在Apple上，但是他们本质上是相同的。
简而言之，它能定义独立于设备的像素比的大小，这会包含在不同角色（如设计师和工程师）之间的讨论规则中。
继续说前面“Jim”按钮的例子。 Jim在标准的非Retina屏幕上宽度为44px，在Retina屏幕上是88px。从技术上给Jim添加20px的padding，在Retina上 padding是40px。但是，当你基于非Retina屏幕设计时计算Retina的像素值并没什么意义。
因此我们需要做的就是以标准的100%非Retina比例作为一切设计的基础。
在这种情况下，Jim的大小就是4444DP（PT），padding为20DP（PT）。你可以在任何PPI上执行你的规范，Jim仍然是4444dp/pt.
Android和iOS会调整自身大小适应屏幕并且使用正确的像素比来进行换算，这就是为什么我发现使用屏幕的原始的PPI设计会更简单。
SP和DP、PT从用途上来讲是不同的，但是工作方式相同。SP表示与比例无关的像素，通常用来定义字体大小，SP受用户Android设备字体设 置的影响。作为一个设计师，为任何事物定义SP就像定义DP，最好基于清晰的1x的比例（以16sp为例，它是非常便于阅读的字体大小）。
附加: 始终使用分辨率或者非比例的值作为规范。屏幕尺寸、分辨率种类越多，它就越重要。
现在，你已经知道PPI、Retina、像素比是什么了，接下来我们要讨论的是 “如果我在设计工具里改变PPI配置，会发生什么呢？”
如果你问自己这个问题，那就表示你对设计软件比较熟悉。
任何非打印的设计使用像素大小不用考虑原始PPI配置。
软件PPI配置是打印的一个传统。如果你只是做web设计，PPI对位图大小没有影响。
这就是我们使用像素比而不直接用PPI值的原因。你的画布和图像总是会被被软件按照对应的像素比换算成像素点。
这里有个例子。你可以在允许配置PPI值的软件（比如Photoshop）里面进行试验。我在Photoshop上画了两个80*80px的正方形和16pt的文本，一个配置的PPI值是72，另一个是144。
如你所见，文本变大了，准确点说是两倍大，然而正方形还保持不变，原因就是Photoshop按照PPI值放大了pt值，结果在PPI值变为两倍的 情况下文本大小增加为原来两倍。而用像素定义的蓝色正方形，保持了原来大小。像素就是一个像素点，不管PPI怎么配置它会一直保持一个像素。造成这个差异 的是用来显示它的屏幕的PPI值。
我们需要记住的是在做数字化设计的时候，PPI只会影响你对设计的感知、你的工作流和以pt为单位的图案例如字体。如果你在工作资源文件里包含了各种PPI配置，程序就会根据接收到的文件的PPI比例在不同的文件里调整转移视觉的大小，这会成为一个需要解决的问题。
那么，解决方案是什么呢？就是坚持使用PPI（对于1x设计，最好控制在72-120之间）。我个人使用72PPI，因为这是Photoshop的默认配置，我的同事也是。
PPI配置对输出到web上的设计毫无影响。
PPI配置只对基于PPI独立计量（比如PT）产生的图案有影响。
像素是任何数字化设计的度量单位
保持像素比以及设计的目标，而不是PPI
在进行数字化设计时使用实际的PPI配置，你会感受到它在目标设备上的样子（以1x的web/桌面设计72-120ppi为例）。
在你的文件中自始至终保持相同的PPI配置
iOS上的PPI处理
是时候钻研下特定平台的设计了。
让我们花点时间看看2014年年初时的iOS设备。 从屏幕大小和DPI的角度来看，iOS有两种类型的手机设备和两种类型的笔记本/台式电脑屏幕。
对于手机，有iPhone和iPad。 在手机分类中，有过去的3GS（iOS6依旧支持）和更高版本，其中只有iPhone 3GS是非Retina。iPhone 5以及后来的都用了和iPhone 4/4s有相同DPI的更好的屏幕。让我们来看看下面的列表：
2014年9月Apple宣布，现在又有2个新类别的iPhone：iPhone 6和iPhone 6 Plus。
iPhone 6比5要大一点（0.7英寸左右），但是PPI相同。iPhone 6 Plus由于它的尺寸，5.5英寸，产生了iOS上新的像素比，@3x。
相较于其他iPhone，iPhone 6 Plus控制展示比较特殊的是：视觉效果降频。
以为iPhone 6设计为例，设计的画布为1334750px，手机上就呈现1334750的物理像素。当为iPhone 6 Plus时，手机的分辨率小于渲染的图像，因此你设计的分辨率为px，展示时降频为px。如下图：
物理分辨率比渲染分辨率小15%，会造成一些细节问题，比如半像素使得精细的地方变模糊。分辨率如此高也是很微妙的，除非你近距离观察。因此，在px的画布上设计，需要注意设计中真正精细的地方，像是分隔符。模拟如下：
感谢的说明，看看他们专门的页面。
在iPod touch分类中，iPod第四代出来的时候使用的是iOS6和非Retina。iPod第五代以及后面的都使用Retina屏幕并且兼容iOS7，它的屏幕大小与iPhone 5相同。
最后说说iPad。除了iPad 第一代，其余的都用的是iOS7，同时只有iPad2和iPad mini是非Retina屏幕。从设计的角度来看，iPad mini只是普通的iPad（一样的PPI屏幕），但是物理体积更小，也就是说它们拥有相同的分辨率，只是大小从9.7英寸减小到了7.9英寸。保持同样 的比例，便会相应地增大像素点的密度，你的虚拟资源就会显得更小了。
至于台式机和笔记本，我们不会全面讨论Apple提供的各种尺寸的屏幕。在今天，Apple提供的几乎都是1x像素比的Retina屏幕 （Macbook，Macbook Air，旧版Macbook Pros，台式机显示器），Retina只应用于13和15寸的Macbook Pro。iPad和iPhone像素比是2x。为台式机设计与手机设计不同的是，你需要以相同方式设计来覆盖这两种不同类别的屏幕。
当只使用一种像素比时，基于iOS和OSX的设计是非常简单的。我建议开始设计时先用基础的PPI（例如，100%/1x）然后增加到2x并在2x 的屏幕上校验你的设计并且生成2x的资源。当你熟悉在1x和2x之间切换设计后，就能够直接在2x上进行设计了，低分辨率时资源更小。如果你正在为 Retina屏幕设计的话（Macbook Pro），这就特别有用。
引入资源，chrome为例
如图所示，每次请求资源需要传送两张图片。非Retina下图片名为name.png，Retina的图片增加到@2x命名为@2x.png，这是iOS开发约定的命名规范。
如果你创建了一个图片只用在iPad上，我们在.@2x后面加上~iPad，这仅仅只是chrome的约定。对需要的资源都这样处理，不要只用一个版本的资源来覆盖所有DPI。
附加, iOS规则集:
@2x的资源必须始终是1x资源的两倍。
Retina资源加上@2x.
始终创建100%和200%比例的图片。
1x和2x的资源始终要保持名字相同。
在100%比例下开始设计，然后做乘法。
传递.png格式的图片。
使用pt创建规范而不是px。
Android上的PPI处理
Android平台的设备种类比iOS多，因为任何OEM都可以生产设备并且几乎没有比例的限制，然后加上自己版本号。结果就是生产出几乎无限制的屏幕大小和DPI种类，电话和平板电脑一样大，或者电话和平板电脑一样小的情况比比皆是。为此，你的设计总是需要做适配。
在这个部分，我们将采用不同于iOS的方法，我们先来讨论下像素比和DPI分类。
Android设备可以分为两类：手机和平板电脑。这两种设备又可以按照不同DPI分为：ldpi、mdpi、 tvdpi、 hdpi、 xhdpi、 xxhdpi和xxxhdpi。
幸好，有些比其他使用得更加频繁，有些甚至已经弃用了。
首先我们要找到等价于iOS上1x的基础单位。在Android上，这个基础单位就是MDPI。
让我们看看下面列表的像素比。
是的，很多，而且还没有完，还有一个落下了。
实际上，目前正在使用的DPI有4个：MDPI, HDPI, XHDPI和XXHDPI。 LDPI是过时的DPI，现在已经不再使用，TVDPI是TV UI的特殊例子，在2012年版的Nexus 7中短暂使用过，在手机和平板电脑的使用中没有考虑的必要。尽管如此，TVDPI的像素比（1.33x）还是被用在一些安卓系统的设备上，像是LG G手表，我们后面来讨论这个。
让我们结合带着各自DPI的Android手机和平板电脑全面客观地看待事物。
也许在现在这个时候有一个设备使用XXXHDPI的实际app资源，但也不是很常见。如果你能用额外时间生产XXXHDPI资源，你的app便不会过时。
引入资源，chrome为例
每次请求资源都需要传递一组4张图片，从MDPI到XXHDPI，无需考虑LDPI。注意，在下面的chrome版本中，TVDPI的输入在这个例子里的5张图片里也很清楚。
和iOS一样，我建议把100%或者1x的像素比作为你设计的基础，这会让设计在适配其他像素比的时候容易一点，特别是在像素比为1.33和1.5的安卓系统上。
看看下面安卓上chrome的返回按钮的例子。
DPI后面跟着的建议名称不是安卓官方指南强制要求的，这是我们为资源取名的方式，因为现在有限的设计工具很难给每个资源定义一个路径。 考虑到一个资源有时有上百个资源文件，站在设计师的角度来说这是使输出过程不那么痛苦以及避免重命名错误的一个途径。资源在资源仓库里面的存储方式是有结 构的，参考后面：
drawable-mdpi/asset.png
drawable-hdpi/asset.png
如你所见，资源被截成了3232dp的正方形，Android像素比也会是小数。当用1.33或者1.5乘以一个数的时候，最后的结果很有可能就是 小数。在这种情况下你需要通过四舍五入来让数字变得有效。在这个例子中，321.33=42.56所以四舍五入之后是43px。
你需要注意以像素为单位的元素，比如笔画。你需要确保你的笔画既不是1px宽也不是2px同时也不像屏幕分辨率部分描述的那样模糊。
附加, Android规则集:
Android有7种不同的DPI，你需要关注其中的4个：mdpi,hdpi,xhdpi,xxhdpi，如果希望你的app面向未来，可以关注XXXHDPI。
MDPI是基础的DPI或者1x像素比
Android使用dp代替pt当作参数规格，但是他们是一样的。
用你最好的判断来处理小数像素比。
传递.png格式图片。
确保检验命名约定，与执行负责人共同完成输出进程。
Mac、Chrome OS上的PPI
Mac（OSX）和Chrome OS在处理PPI方面是十分相似的。 两个OS都支持常规的PPI（100%）和hi-res/retina PPI(200%)。像iPhone和iPad，就只有2x像素比。
即使大多数的用户都使用Mac和Chrome OS，但是也有用户会在低分辨率的设备上使用，我强烈建议将你的app面向未来的高端屏幕。面向未来对于ChromeOS意味着为Web-app或者网站 创建hi-res资源，那绝不是浪费时间。当前有3种笔记本处理PPI，13寸、15寸Macbook pro以及Chromebook Pixel。除此之外，Chromebook Pixel还处理了touch。
引入资源，chrome为例
Chrome的工具栏按钮资源就是相似性最好的例子。我们在两个平台上使用完全相同按钮，即使代码不同，视觉上也是一样的。看下面这个chrome菜单按钮的例子。
Chrome OS和OSX像素比相同，都是2.
Chrome OS高分辨率展示也处理touch。
可拉伸资源
不管你的app是在桌面或者手机上。你通常都会引入可拉伸资源。
可拉伸资源的建立会使代码在没有减少渲染的情况下比实际需要的多。
他们与可重复资源即使有的时候展示结果一样，工作方式也是不同的。
看看下面这个Chrome的例子。iOS上的工具栏在整个屏幕上只用了一个在x轴上平铺的超细资源。
现在这种方式已经过时了，让我们来看看不同平台如何处理可拉伸资源。
iOS上的可拉伸资源
对iOS的设计师来说这个很简单，因为拉伸在代码里面定义比资源片段或者标记方式好。所有需要做的就是提供一个基础图片，如果你自己还没有实现这个，可以将你的资源规范定义为水平或者竖直可扩展，或者两者均可。看看下面这个iOS上Chrome的默认按钮的例子。
Android上的可拉伸资源
Android有和iOS不一样的处理可拉伸资源的方式，它更依赖设计师一点。
在这个平台你将采用九宫格，这些辅助线包括了4条围绕资源本身的线。他们必须被当作资源的一部分来传递片段/图片，用它来准确的呈现视觉规格。
他们定义了两个区域：可拉伸区域和填充区域。一旦定义好，代码就只会拉伸可拉伸区域，并把内容放在你定义的填充区域。
看看下面的例子，就是你前面看到的Chrome默认按钮的Android版本。为了演示，我把他放大了。
如你所见，这个九宫格是一组4条纯白色的bar。他们在任何DPI下都是宽1px，这是代码表示的。可拉伸区域不包括圆角因为圆角不能平铺开（否则 看起来很难看）。在这个例子中，我们给按钮添加了规格允许范围内10dp的padding。.9也需要平铺并且截断部分要100%透明。如果不这样，他就 不能正常工作，需要修改。
使用九宫格要求在名称后面加上.9，和在iOS资源上添加@2x的方式一样。重命名按钮的例子如下：
现在你需要非常注意你的资源大小。如果我在演示中放大了它，你就需要通过减小它的尺寸到一个最小限度来优化资源，如后面所示。保持了圆角的原样，但是将可拉伸和内容区域减小到最小限度。
需要注意的是九宫格的标记不会和设计重叠，并且资源切割是合理的。.9需要尽可能靠近资源并不与之重叠，试着不内置padding。前面的例子因为阴影而内置了padding。
九宫格不会代替你导出每种DPI的资源。它需要在每个资源版本都实行。
最后一点，.9可以有许多可拉伸区域（上面和左边），虽然我没有经常遇到这样的情况，但它也是很值得尝试的。
附加: 总是采取最好的解决方案来实现设计，特别是桌面设计。图片越多，app就会变得越沉重。追踪和更新资源也变得困难。九宫格应该使用在命名有规范、组织结构良好的资源中。
Touch和触摸目标
首先需要知道的是做触屏相关的准备和DPI一点关系也没有。但是当涉及到设计UI或者创建资源，弄清楚触屏和DPI的关系就很重要。
选择触屏或者非触屏很大程度上取决于app的适用范围，它被部署在哪里以及希望得到怎样的用户体验。 我们可以简单地将他们分为：非触屏的桌面应用和手机app。
台式机, 非触屏
直到2005年，触屏才开始出现在计算机技术中。 我们使用鼠标和键盘，它们能够非常准确的操作UI。鼠标光标的精度是1pt，也就是说理论上你可以创建一个能让任何人点击的1*1pt的按钮。
请看下面图解。
这是个Chrome OS光标的20x版本。 红色区域是能在UI上触发一个事件的实际区域，十分准确。 你知道我的标题。什么是不准确的呢？手指。
那么如何为触屏设计呢？最好的办法就是让所有东西变得更大。
这里有交互中最常用到的两根手指（食指和大拇指）的平均大小，这代表了触摸区域和被手指遮挡了的区域。实际的触摸区域（例如，你手指接触屏幕的那部分）当然会小一点并且更准确，除非你把你的手指压在屏幕上。
在设计触屏的时候，放大触摸目标的尺寸比低估更安全。
如何将此应用到我的设计流程
如我们已经看到的，在像素世界英寸或者厘米并不是一个好的计量方法，即使是像素也不是真正好的计量方法。所以你怎么确保你的设计是可被触摸的呢？
我虽然讲了很多理论知识，但是更重要的是自己试着在目标设备/台式机上设计。 但是为了避免浪费更多时间，有一些基础的像素的大小使用起来是比较安全的，并且被推荐使用在每个OS上。
各平台推荐的触屏目标
需要注意的是，这些大小都是为了方便，都不是现实生活中的测量单位，他们依赖于OEM和各厂商遵守这个指南来生产屏幕，使之保持大小、dpi比例一致。
如你看到的，每个OS都有一系列自己的推荐规范，但是都在48pt左右。Windows的规格是包含了padding的，所以我把它加到这里。
尺寸的不同是源于不同的因素。 Apple可以控制它的硬件，因此知道触屏的质量并且能够控制这个确切的比例，它可以触摸更小的目标，另外，本身的物理尺寸也更小。
另一方面，Android和Windows有不同的OEM，都各自生产自己的硬件，有更大的触摸目标会更“安全”。他们的UI更加无规范（特别是Windows），物理尺寸也越来越大了。
Chrome为例
这是在Chrome上的应用，编码使触摸目标呈蓝色。
如你所见，两个平台上工具栏都是被推荐的触摸目标的高度。可视范围在iOS和Android上分别是4444pt和4848pt的正方形，这不仅使得UI在大小方面和其他OS保持一致，而且也能让与用户交互的部分都保持最小的规格。
Windows 8以及Chrome OS
Windows 8和Chrome OS都支持触屏和非触屏的接口。如果你在为Windows 8 设计app，我强烈建议按照它们来做。
Chrome OS准则目前尚未发布，但是Pixel使用问题不大。因为所有Chrome OS的app都是基于web开发，我的建议是按照触屏设计并且遵照来进行开发。
web，混合设备和未来
如果你在为手机设计，触屏是不二选择。如果你在设计桌面应用，参照非触屏。这听起来很简单但是在混合设备兴起的时候很容易被忽略，。
混合设备是一种既支持触屏又支持非触屏的设备。Chromebook Pixel，Surface Pro和Lenovo Yoga就是很好的例子。 在这样的情况下，我们该做什么呢？没有简单的答案，但是我会首先给一个答案，触屏方向，因为那是未来的发展趋势。 如果你为web或者其他相关的设计，首先考虑触屏。
移动和触屏设计几乎是未来发展趋势。
参考每个OS上建议的触摸目标。这能帮助你更好地设计并让你的产品在OS中保持一致。触摸目标有参考价值，但是不代表你需要不折不扣地遵守，同时你也需要根据经验判断。
软件不能制造设计师，但是在完成任务时选择使用正确的软件可以提高效率，更快完成工作。软件“诀窍”不应该是你唯一的技能，但是学习和操作正确的工具可以帮助你产生灵感。
当涉及到在设计界面处理DPI变化，不同的软件采用不同方式。在特定任务中有些软件比其他的更好。下面是最常见的：
界面设计工具之母。也许也是如今使用最广泛的工具。关于它的资源、教程、文章数不胜数，Photoshop几乎几乎贯穿界面设计的每一个阶段。
正如其名，软件最开始的目的并不是界面设计而是图像或者位图处理。随时间推移以及界面设计的产生，设计师们再次使用起来。部分人是因为他们以前就用并且是那时仅有的能够把事情做得足够好的软件。
在今天，Photoshop是主要的位图编辑工具，也是UI设计中使用最广泛的软件。数十年的积累使得它成为学习和使用比较困难的软件。作为软件中的瑞士军刀，你可以用来做任何事，但是并不总是最有效的。
因为最初是基于位图的，所以Photoshop十分依赖DPI，下面描述的是与之相反的Illustrator和Sketch。
Illustrator
Illustrator的矢量是基于同级的。顾名思义，它重点在插画，但是也可以作为界面设计工具。
Illustrator也很适合平面设计，因此它的界面，颜色管理，缩放，标尺和单位首先就吸引你，只需要一些补丁就会更便于使用。和Photoshop一样，他也是一款很强大的工具，同时也需要付出努力去学习。
和Photoshop不同的是，它是独立于DPI的，因为它依赖矢量图。与点阵图或者光栅图相反，图像生成采用矢量图，依靠数学公式计算，以编程方式重新调节大小并且不会损失图片质量。
了解栅格化和矢量化图片的不同是建立可扩展视觉设计和资源的关键。
Sketch 3.0
与Photoshop和Illustrator比起来，Sketch还很年轻。虽然只产生了四年，但它在UI设计行业里面引起了巨大的反响。因为从 一开始，Sketch的目标就是供界面和UX设计师使用，没有Photoshop和Illustrator的历史积累，Sketch把自己定位成针对小众 用户——界面设计师的一款完美的调整工具。
Sketch适合快速设计框架以及复杂的视觉设计。它像Illustrator一样是完全基于矢量的，简单轻量化同时还拥有美观的UI。它结合了铜 版纸使用方便和灵活的资源生成系统，让它成为跨DPI、跨平台设计最快的工具。最近发布的3.0版本也是可以用来替代Photoshop的产品。
但是也有不足的地方，Sketch是小团队开发的，而且出来得比较晚。尽管它的团队能够积极响应需求的变化，但是也没有 Adobe（Photoshop和Illustrator）公司这样的规模。在位图编辑时，Sketch只能满足（设计时）最低的需求，但是 Photoshop的功能就更加全面。同时，因为它的年轻，在源文件、教程和社区方面在数量上也远少于Photoshop，不过，社区用户都很积极上进。
另外私人方面，从8年前我就是是Photoshop的用户，但是最近我把我设计中的最重要部分切换到了Sketch3.0。这不是对质量的判断，Photoshop仍然是一个好软件，只是Sketch3.0更加适合我。
文档和资源
这篇指南只是一个介绍，真正开始做的时候能学到更多。如果你想要了解更多或者获取我们讨论的主题相关的更详细的内容，可以点击下面的链接：
速查表和模板
(requires Apple account)
(A design article gold mine)
原文地址：
译文地址：
我不制造文章，我是互联网的搬运工
人人都是产品经理（）是中国最大、最活跃的以产品经理为核心的学习、交流、分享社群，集媒体、教育、招聘、社群活动为一体，全方位服务产品经理，微信公众号woshipm。成立5年以来举办线上活动500余场，线下活动数百场，覆盖北京、上海、广州、深圳、杭州、成都等10余城市，在互联网业内得到了广泛关注和高度好评。社区目前拥有300万忠实粉丝，其中产品经理占比50万， 中国75%的产品经理都在这里。