移动端字体的设计准则
好的字体是隐形的，不过更准确来说，应该是好的字体让阅读
行为毫不费力。下面是分享的移动端字体的设计准则，欢迎大家参考!
当视线掠过一行文字时，它是跳跃前进的，我们称之为扫视。
你读的不是字母，甚至不是词语，而是文字某部分的影像，大脑会补上它预期的内容。如果超出大脑预料，它会促使眼睛回去核实假设十分正确。通过在字里行间创造平顺的视觉流动，好的字体极度减轻了眼睛的负担。
对任何字体工作者而言，在移动设备上要面临与生俱来的挑战：空间有限，环境光通常比较微弱。不过将已经用于web端的技巧稍加调整，我们就可以提升移动设备的易读性。
1. 留足空间
与普遍观点恰好相反，字体并非屏幕上弯弯曲曲的线条排列;
它主要在于周围和相互间的空间。
字母本身对字体 * ，与构成它的空间相比，要小得多。
要理解这一点，了解字体从何而来很有帮助：字母o(还有b、c、p等等)中间的圆孔被称作“凹槽”。在最原始的印刷机上，铅字由
金属雕刻而成，这些凹槽雕刻成型、排列在盘中的金属活字。第一个字体设计师所处理的模具，实际上并不能用于印刷。字母本身对字体* ，与构成它的空间相比，要小得多。
谈到层次时，我们通常指的是h1到p，有时候还会到h6。但另外还有一种层次在影响着行或段落的视觉流，这是特殊的层次：字母间距小于字间距，字间距小于行间距，以此类推。
要在移动端创造最佳易读性，尤其要注意这些特殊层次，这些格式塔式的词语、行、段落的文字组合，在自然光环境下同样至关重要。
2. 行宽
行宽是一行文字的长度。或者确切的说，是一行文字的理想长度，因为很难让每一行都精确吻合。
众所周知，舒适阅读的理想行宽是65个字符左右。行宽产生的物理长度，取决于字体的设计、字间距(见下文)和你使用的具体文字。本文开篇的65个字符(译者注：此处请参见英文原文)，用PT Serif 字体是26.875em宽，用Open Sans是28.4375em宽，用Ubuntu字体是27.3125em宽。如果再加入斜体、大小写和一大堆其他字体细节，还会有更大的差异。
在桌面端浏览器中，65个字符很难触及边缘，但在移动设备上，65个字符(如果至少大到看得清)会超出浏览器的边界。所以，在移动设备上，你必须得缩减行宽。
移动端并没有普遍认可的行宽标准。不过传统上，报纸或杂志上每一个窄列都会趋向于39个字符。鉴于这个理想行宽已经经历了数个世纪的考验，它在移动端字体上也运转良好。
3. 宽松行距、紧凑行距
行距是行之间的空间，行距太紧凑，会让视线难以从行尾扫视到下一行首。行距太宽松，字间距会开始形成队列，产生了我们通常意义上的河流，阻断了行的视觉流。
从左至右：理想行距、太紧凑、太宽松。
行距的标准通常是1.4em，但以我的经验，这对于屏幕来说太紧凑了：在屏幕上表现良好的字体都有一个关键特征——大的凹槽，大凹槽需要更大一些的行距来保持空间层次。
反过来，更短的行宽需要更小的行距。所以你可能需要将桌面端的行距设得宽松点，同时记得将移动端的设置得紧凑些。
4. 找到最佳状态
所有字体至少都有一种最佳状态，在屏幕上展现最佳的尺寸，还有在浏览器中最能保持字形的抗锯齿选项。
最佳状态下，多数笔画通常都能排列在像素网格中——像素字体，如果你还记得的话，那些字体仅仅在字号调整到最佳状态下才有效。
将字体设为最佳状态能形成更强烈的对比。为移动端设计时，对比尤其重要，因为户外的强光可能分散注意。
你会发现，微调行距会使每行脱离完美像素匹配。我觉得，在移动设备屏幕上，对比的重要性胜过行距。所以如果你不得不在行距上妥协，来保持每行契合像素网格，那就这么做吧。
通常设计师通过基线网格来排列文字。但在移动设备上，我们需要使用x高度来代替(x高度顾名思义，就是小写字母x的高度)。
从易读性研究中，我们知道大脑识别的是文字顶部，而不是底部。所以要成就更加平顺的视觉流，我们要确保字符顶部最契合像素网格。
5. 不要忽视起伏边
起伏边是一段文字的边缘。你读的多数内容是居左对齐的(至少对于拉丁语系而言)，导致右边沿参差不齐。
当视线从行尾跳至下一行首时，大脑最好要能判断出下一次跳
跃的角度和距离。把每次跳跃都想象成跑过跳板，如果间距保持一致，就会快很多。因此，文字左侧边缘应该是平的，每行从同一个地方开始(对于从右至左的语言，恰好相反)。
因此你绝不应该将两三行以上的文字居中对齐。
通常文字会设置成两端对齐，这意味着每行文字所占空间相等，所以两侧都不会有起伏边。我怀疑两端对齐的流行和响应式设计有关，它教设计师们以块状形态思考。两端对齐的文字产生的留白不统一。最糟的情况会导致一行中只有几个字，相当不协调。更窄的行宽会加重两端对齐的问题，所以两端对齐的文字在移动端是难以阅读的。
从左至右：左对齐、居中对其、两端对齐。
如果整洁真的非常重要，那么使用连字符号来让起伏边更平滑，绝不能在移动端使用两端对齐。
文字右侧是起伏边在移动端还有一项额外好处：人们通常在易
分心的场合阅读文字，读者视线频繁地从文字上移开——查看站名，或是接电话。起伏边创造了一个随机形状，让右撇子的视线可以通过重读最少的文字，回到刚才的位置。
6. 减少反差
增强文字与背景对比的同时，我们也要减少不同层次文字间的反差。
在移动端，实际可见的文字更少，所以反差被放大了。
其原因是我们的大脑基于环境来判断重要性。在桌面端，标题可能是正文字号的两倍甚至三倍，因为屏幕上有更多文字，所以这是有效的。在移动端，实际可见的文字更少，所以反差被放大了。
多数设计师使用斐波那契数列式的字号组合。在移动端，应该缩小比率来减少字号间的反差。比如，如果你使用黄金比例1.618与字号相乘。在移动端，应该用更小的比例1.382来替代。
桌面端屏幕比移动端容许更夸张的字号缩放。
7. 按比例调整字间距
为移动端调整字号时，我们要意识到字间距发生了必要的变化。 (先说一句，不应该调整固有字距。固有字距是两个字母相互组合时的距离，使它们的间距与其他字母间距在视觉上统一。创作字体时，就纳入了固有字距的考量，这个过程可能要花上数月。如果你选用了一款专业的字体，它的固有字距就是合适的，如果你觉得不对，请换一个字体。)
字间距并不是固有字距。字间距是字体中应用在所有字符上的间距。通常你也不应该调整字间距。
大字号是个例外，拿标题和小号文字(比如脚注)举例。大号文字需要减少字间距，小号文字需要增加字间距。前者是考虑到分组，
后者则是为了增强对比。如果你在调整标题，或是用了通常字间距紧密的艺术字体，缩小时可能就需要把字间距放开一点。
总结
字体是一门工艺，设计师终其一生都在精心打磨。的确如此，因为每个文字、每种字体和每项技术都带来了新的挑战。没有一成不变的普适规律。
假如你追求易读性，要牢记三条原则：行内的视觉流要平顺，空间层级要清晰，要有足够的对比。这尤其适用于移动端页面。
没有不可撼动的规则，全凭你双眼决断。不过本文的指南可以作为理想的出发点，让你在移动设备上优美地排列文字。
内容仅供参考
·279 ·美学技术 网购平台宝贝详情页设计探究 邹 朋 （建斌中等职业技术学校，广东…中山 528400） 摘 要：自从淘宝推出淘宝商城以来，对其的支持力度也 越来越大，现在在淘宝上搜索任何商品排在前面的几个位置 都是给商城预留的。这是因为淘宝从一家商城店赚的钱要远 远多于普通淘宝店赚的钱，这也就造成了淘宝商城的运营成 本要比普通淘宝店要高一些，但就它所拥有的资源来说还是 非常值得的。 关键词：网购； 宝贝详情页 0 前言近年来，我国女性的消费能力越来越强，女性消费群体成为经济发展的重要推动力。而对于淘宝网女装而言，女性用户的消费特点与消费能力则体现得更为明显。人靠衣裳马靠鞍。店家开店，除去店铺首页，商家对淘宝平台的宝贝详情页的重视程度一直居高不下，淘宝网店的宝贝标题设置也是至关重要的，买家在逛淘宝的时候是有目的性的，大部分买家都会根据自己的喜好在淘宝搜索里进行搜索。［1］可见，优质、简洁明了的宝贝详情介绍是将到店浏览的访客转化为消费者的利器。1 宝贝详情页设计宝贝详情页是提高转化率的入口，激发顾客的消费欲望，树立顾客对店铺的信任感，打消顾客的消费疑虑，促使顾客下单。虽然优化宝贝详情有提升转化率的作用，但起决定作用的还是产品本身。设计要与宝贝主图、宝贝标题相契合，宝贝详情页必须真实地介绍宝贝的属性，设计宝贝详情页之前要进行充分的市场调查和同行业调查，规避同款。淘宝指数可以清楚地查到消费者的一切喜好以及消费能力、地域等数据，学会利用这些数据对优化详情页很有帮助，另外生E 经等付费软件也具有分析功能。同时要做好消费者调查，分析消费者人群、分析消费者的消费能力及消费的喜好，以及顾客购买所在意的问题等。2 买家对图片的诉求线上购物有方便快捷等优点，而它也有一个致命的弱点，就是消费者看不到实物，所以，在网上购物时消费者依然心存疑惑。为了解决这一问题，卖家要尽可能全方位地描述宝贝，使宝贝详情页的信息更全面。［2］照片也从模特图到实物图再到细节图，为的就是能给消费者一个全方位了解宝贝的方式。以女装为例，宝贝详情页中出现了多种形式的图片来描述服饰，如模特图、产品图（平铺图）、细节图等，当然也少不了相关的文字介绍。卖家努力通过这些图片将商品真实、清晰、生动地展现在消费者眼前。3 细节最受买家关注从调研数据得知，线上购物的消费者最需要的是服装的细节图，因为细节图可以帮助他们全方位了解服装。在淘宝网购买女装时，消费者最需要的是服装的细节图，因为细节图可以帮助消费者全方位地了解服饰。细节图涉及一件服装的方方面面，如服饰的特色，服饰的面料、走线，服饰的扣子、拉链、口袋、腰带，服饰的内部、里衬等。调研数据显示，有近九成的消费者希望通过袭击图来了解具体的服饰。4 产品图、服饰的尺寸图产品图是一件服饰最基本的展示，使买家对宝贝有一个大致的了解，也是买家比较关心的图片之一。［3］经过调研发现，消费者对尺寸图的要求颇高，很多造成退换货的原因，就是因为卖家在描述尺寸的时候没有具体仔细地表述。买家在购物时经常遇到尺寸方面的问题，从而造成了困扰。模特图可以多角度拍摄，亦可以在不同场景下拍摄。模特图十分灵活多样，所以能够更加形象、生动地展示服饰。除此之外，在设计的过程中还可以更好地诠释服饰的穿着场景，可以更好地展示服饰的色彩、与其他服装的搭配等。5 详情页产生有效地行为40.5%的买家希望统一宝贝详情页的大小和数量，38.1%的买家希望提供宝贝搭配信息。同时，由于买家经常在1～4M 网络环境下逛淘宝，所以会出现这种情况：卖家的宝贝详情页图片过大、像素过大或是页面介绍较长的，当页面图片无法即时显示时，42.9%的买家会选择“浏览其他网页，等加载完了再看”，还有21.2%的买家选择“关闭这个宝贝，换其他宝贝查看”。其次，根据访谈和眼动轨迹，获得用户打开detail 之后的典型轨迹：用户首先关注商品的主要信息，如大图和价格等，觉得有兴趣再进一步了解，进而关注商品的详细介绍、图片等，等决定这件商品是否购买了，再到店铺内挑选其他宝贝。再次，在600万的卖家中，现有24.1%的店铺在宝贝详情上还没有形成统一的格式。有规范无模板：12.8%的卖家店内各类型宝贝详情的格式基本统一，但是没有专门制作模板；21.9%的卖家全店宝贝详情的格式基本统一，但是没有专门的制作模板。有模板：16.2%的店内有不同类型的宝贝，分别有固定规范的详情模板；24.4%全店有固定规范的详情模板。图片空间中的流量来源：80%来自淘宝内部，占比4%，移动端占比16%。这同时也意味着移动端的优化需求将越来越多。宝贝详情模板的总体建议：促销信息：有促销活动时，和当前宝贝有关的店铺、单品促销信息1～2条，图片内容不宜过大。尺寸信息：尺寸特殊、断码的宝贝可以考虑将尺寸放在细节之前；尺寸标准的宝贝可以放在细节之后。（如图１）图1很多人会认为女性购物时往往较为冲动，但笔者发现女性用户在淘宝网购买女装时有着自己的考量点。对一段时间内在淘宝网购买过女装的女性用户进行了调查，通过反馈明确了解到女性用户在购买女装过程中影响他们购物的因素，让女装卖家更好地了解消费者想要看到的宝贝详情页的内容，能更好地提升店铺的销量。6 结语每个卖家朋友都在通过宝贝详情页进行着相关的推荐，其实这样的目的是为消费者提供更多的选择，卖家希望通过这样的推荐来帮助店铺实现热销宝贝或提高整体销量。数据显示，用户对不同类型关联营销的需求是不同的，相关推荐可以考虑以下几个维度：搭配服饰推荐、搭配减价套餐推荐、店铺热卖商品推荐、相似款式推荐。消费者最希望看到的是搭配服饰推荐，其次是搭配减价套餐推荐。值得注意的是，相关推荐与卖家店铺的实际情况紧密结合，不同的目标需要不同内容作为支持。卖家可根据店铺实际情况、相关推荐的目的等优化关联营销的内容，使店铺的整体销量有所提升。参考文献：［1］…李杰.购物网页界面的设计分析与研究［D］.曲阜师范大学，2015：223-224.［2］…沈雷，刘菲.浅析基于格式塔心理学的服装网站页面布局［J］.南京艺术学院学报，2014，05（2）：156-157.［3］…姚洁.品牌服装购物网站页面设计的风格研究［D］.武汉纺织大学，2014：145-146. 网络出版时间：2017-07-06 14:20:25 网络出版地址：https://www.doczj.com/doc/bd14771525.html,/kcms/detail/33.1166.TN.20170706.1420.076.html
移动端H5页面设计实战 目录 为什么要设计H5页面............................................................. 错误！未定义书签。赛程魔方3D旋转界面设计 ...................................................... 错误！未定义书签。双屏互动游戏设计................................................................... 错误！未定义书签。资讯与游戏的结合设计............................................................ 错误！未定义书签。刮刮乐在移动端互动游戏中的微创新 ........................................ 错误！未定义书签。互动调查小游戏的设计创新 ..................................................... 错误！未定义书签。设计小贴士 ............................................................................ 错误！未定义书签。
为什么要设计H5页面 移动设备的普及给媒体和娱乐带来了一场革命。根据中国互联网信息中心（CNNIC）2014年7月的报告显示，中国网民中，手机使用率达83.4%，已经超过传统PC整体80.9％的使用率。其中，手机网络新闻的使用率为74.2%，仅次于即时通信和搜索，远超其他手机网络应用。在资讯移动化的趋势下，观察近期各大门户在重大事件报道中的表现，会发现移动优先、产品社会化、交互趣味化是三个重要的趋势。其中，基于HTML5技术的移动Web页面（以下简称H5页面），较完美地融合了上述三种属性，成为当下最受关注的内容报道形态，也引爆了社交平台上的大规模分享行为。 就像CD取代磁带成为一种更高效的音乐播放方式一样，数字文件也将取代CD，依此类推，智能手机也将会替代PC的一部分重要功能。尽管仍有争议，但不可否认的是，移动互联网时代已经到来，随着用户从PC向移动端的迁移，从大屏到小屏，从鼠标键盘到多点触控，移动端逐渐成为媒体报道的前沿阵地。 一提起移动端，大家首先想到的就是手机上安装的移动应用，比如微信、腾讯新闻客户端、QQ浏览器等。我们称这些应用为原生应用（Native App），因为它们是需要安装在用户设备上的软件，它们的代码和界面都是针对所运行的平台开发和设计的。这些原生应用能够最大程度地发挥用户设备的性能，例如使用存储空间实现离线阅读，利用图形加速实现界面动效，以及利用摄像头来上传图片，等等。但跟Web专题相比，移动应用的开发周期长，开发者需要将产品提交到应用商店供用户下载使用。以苹果的iOS应用开发为例，开发者在应用商店要发布应用，需要通过约耗时8天的人工审核。因此，把PC端的Web专题做成一个个移动应用是不现实的。 除了原生应用之外，在移动端还有一种产品形态——移动Web页面。它源自于移动互联网诞生初期的WAP页面，有着和PC网页同样的优点：开发周期短、发布和更新方便。此外，用户只需要借助手机浏览器或者内嵌手机浏览器的应用就可以访问，比原生应用要方便得多。但在2014年前，因用户渠道和设备性能的原因，移动Web页面的形态通常都非常简单，也很少有用户互动。2014年，HTML5技术的普及、智能手机的更新换代和新闻客户端、微信等渠道用户的增长彻底改变了这一点。 在移动端，要在网页上实现交互和动效需要借助HTML5技术（例如CSS3媒体查询、CSS3动画、Canvas等）。现在的手机浏览器大都支持HTML5的核心技术，例如对触摸事件和手势的响应、播放声音和视频、渲染CSS变换，以及获取设备的加速度传感器数据等。这些技术衍生了诸如互动小游戏、交互型动画页面、可视化新闻等，为市场营销、媒体报道等提供了大量不同形式的载体，同时为产品策划与视觉设计带来了更多的想象空间。
移动界面设计——移动设备的特点 对于设计而言，“适合”才是最好的。所以，当在考虑产品的设计和开发时需要明白，在此之前需要做到了解用户，才是产品在后期进行分析用户的痛点，功能的确定延展以及视觉设计风格确定的根本。那么，就产品而言，需要确定的是用户本身的生活以及工作习惯，包括痛点和需求以及当前用户人群的特点，并且还需要确定当前用户在使用这款产品的时候所处的环境差异，在什么环境中使用这款产品的几率较多? 这也是设计师在设计产品之前需要考虑的问题，例如是室内环境占主导还是室外环境占主导?网络运行环境是稳定的 Wifi 环境，还是户外，公共场合居使用流量的情况居多，一般在这种情况当中，通常用户在使用产品时的网络环境是不够稳定的，所以这就会影响的产品应该是以图片文字推送为主，还是以视频为主。 甚至用户在进行信息输入时是保持传统的文字输入为主，还是需要加入语音输入来减小用户对于产品的操作成本，产品背景色是深色还是浅色为主，是否需要调取极速模式来应对一些特殊的网络环境等等。的产品都会被这些因素所影响，所以当设计和规划一款产品之前，需要考虑的方面是很多的，包括用户，也包括使用环境方面。那么其中一个重要的因素，就是的产品所存在的终端以及硬件。 图 1-24 手势操作 对于产品而言，它所存在的终端不同，用户在操作产品时的交互方式也会有很大的区别，对于移动互联这个时代来说，人们使用的终端更多是以智能手机为主来进行使用，当用户在进行人机交互时，其实更多是通过手指和屏幕的操作来进行的。其中，手势操作是最为常见的，也是最普遍的。(如图 1-24) 那么，随着智能手机为第三方应用(Application)提供的功能接口越来越丰富，传统的交互方式也在发生着不断的变化和更新。除了传统的手指点击之外，现有的交互方式中也加
移动互联网页面设计存有的问题 近几年移动互联网也开始如雨后春笋般迅速成长，是继互联网之后又 一新力军，这个新力军本身是互联网的延续。移动互联网的快速发展，也使对移动互联网页面设计的要求越来越高，本文主要主要探讨移动 互联网的特点、页面设计中存有的问题及页面设计原则。 一、移动互联网网页设计特点 移动互联网载体是手机，从界面角度来看，桌面网页设计的分辨率大 都是1024以上，而手机的分辨率因型号不同各异，一般只有320，最 多也就是800的分辨率，从物理角度来看，这基本上是移动互联网页 的最高值。要在充足小的屏幕里让你看到想要的东西，是一件非常难 的事。基于这个出发点，绝大多数移动互联网网页设计的比较简单和 实用。移动互联网比起传统的网页具备较强的实时性。我们能够第一 时间把身边发生的事情通过手机发布到互联网上，在此基础上推动了 诸如手机人人网、手机微博等社区化移动互联网站的加速发展。 二、移动互联网网页设计中现存问题 1.移动互联网网页分辨率难以衡量当前市场是的手机型号各式各样， 屏幕种类令郎满目，规格不等，分辨率从320—800像素都有，这些因 素给移动互联网网页设计带来不同水准的难度，设计师很难针对一种 或几种手机型号实行设计，只能通过对主流手机实行界面设计，这种 设计完全依赖于UC浏览器来自动转换分辨率的设计导致了网页文字错位，页面杂乱，严重降低了用户满意度。 2.网页设计缺乏规划性因为当前移动互联网页面设计受到移动终端的 条件限制，设计师设计出的页面往往过于简单，甚至出现文字堆积的 状态，整个页面毫无设计感。于此同时，因为移动互联网处于刚起步 阶段，很多设计师还不够成熟，设计出的页面缺乏色彩规划，要么颜 色过于单调，要么花里胡哨。移动互联网站同时也有电脑桌面网站，
2014年移动端界面设计分析 移动互联网时代的悄然袭来改变着我们的生活方式，因此有大批设计力量涌入了移动端的设计领域中，这也说明了大家越来越重视用户在各个设备终端层面的体验。在规划产品时，往往会把PC端和移动端的产品放在同等重要的地位进行思考。然而，设备的多样性和产品形态的多样性为设计师们带来的既是更多的发挥空间，也同样是更大的挑战。这些产品在设计之间有何不同？如何规划不同平台上产品的功能？设计时有哪些差异？2014移动端的界面设计是非常值得探讨的话题。 1.唯一主色调 2014年，追求极简设计风格，主色调可能只是选定一种色彩，然后调整透明度或者饱和度，(说得通俗些就是将色彩变淡或则加深)，从而产生新的色彩，这样能够很好的表达界面层次、重要信息，并且展现良好的视觉效果。这样的页面看起来色彩统一，有层次感。当前上线的一些移动应用都采用极少的色彩，甚至放弃所有的颜色。仅仅用一个主色调就能展现良好的视觉效果。 2.多彩色风格设计 Metro引领的多彩色风格是与唯一主色调形成对照关系的设计风格，多彩撞色更多的表现于多种纯色块的使用，就是很简单的纯颜色，只需要注意多彩配色的方式，就能得到很好的视觉效果。多彩色拼接的设计风格，一屏式的页面排版布局，总体来说是时尚大气简洁的设计。“多彩撞色”的概念，在2014年手机端仍会继续发展。
3.信息框架扁平化 在设计的表现形式上我们追求界面扁平，注重通过弱化视觉效果来强化应用的功能。在移动设备上，过多的层级会使用户失去耐心而放弃对产品的使用。而且移动端上页面小，没太多地方摆多层的tabs导航或者面包屑导航，就只剩下左上角的一个“返回”按钮作为导航了，可以一次接一次的深入，但跳转了三、四次后，再看左上角的“返回”按钮，你已经很难判断出将会返回到哪里了。应该从信息架构角度，再进一步的去应用扁平化的设计理念，信息框架扁平化的目的是减少信息层级，追求信息到达用户的最短距离，从根本上解决上述问题。扁平化思想是一种让设计者在界面设计过程中减少信息层级的思想。 4.动态数据可视化 数据可视化设计是将枯燥繁琐的列表和文字转换为直观的饼图、扇形图、折线型、柱状图等丰富直观的设计元素，提高用户体验。而且现今数据可视化不只是静态展现数据，用户希望通过互动及时获取数据流，若以动态效果来呈现，能多维度呈现给用户实时信息，同时能与用户形成互动，提高数据表现的趣味性。动态数据可视化将更加强调数据转译实时更新的图形，以及动态的图形化表达。
html5页面设计 北京千锋互联科技有限公司是中国最早从事移动互联网研发和培训的机构之一,千锋集团旗下现有千锋教育、移动产业、项目研发、创业孵化业务，是国内最大的移动互联网人才培训和人才提供商。公司总部位于北京，目前已在深圳、上海、郑州、广州、大连、武汉、成都、西安成立了分公司。 千锋集团旗下的千锋教育一直秉承“用良心做教育，做真实的自己”的理念，是中国移动互联网研发培训领导品牌，全力打造移动互联网高端研发人才服务平台。千锋教育每年培训和输送近万名移动互联网研发人员，是唯一真正获得企业一致好评的移动互联网培训机构，从千锋走出的学员在业界得到了广泛认可。2014年，千锋教育集团成为教育部教育管理信息中心“移动互联网应用开发指定实训基地”。截止目前，千锋教育已与500多家高等院校建立深度合作关系，并携手教育部教育管理信息中心举办《高等院校骨干教师iOS/Android暑期培训班》，千锋讲师团队技术水平得到业界一致认可，好评如潮。千锋教育组织的技术研讨会名企云集，是千锋和企业之间紧密合作的桥梁。千锋讲师发布的免费培训视频、学习资料、源码下载等浏览量近千万，每年约有数百万研发人才从中获益。 一、千锋教育八大优势 1、中国移动互联网研发培训领导品牌，专注iOS、Android 、HTML5、UI等技术研发培训，坚持“用 良心做教育，做真实自己”的理念； 2、业内唯一一家敢推出“两周免费试听，不满意不缴费”的政策，让学员更真实的了解千锋、了解自 己是否适合做开发； 3、零学费入学，工作后分期还款，业内学员毕业薪水最高，培训就业协议明确写出薪水保障，平均薪 水专科5000、本科6000、硕士7000； 4、权威资深师资阵容，业内最具责任心、最懂教学、拥有最强技术、有大型项目经验实战派讲师授课， 由业内知名专家及企业技术骨干组成； 5、自主研发QFTS 教学保障系统，拥有自主知识产权的开发培训课程体系，讲练学相结合，课程内 容紧贴当前前沿实用技术和企业实际需求； 6、企业级项目实战训练，从千锋科技及合作企业项目中研发出几十个企业级教学项目，让学员参与真 实的企业级项目研发，最后让学员能够独立设计开发自己的上线项目； 7、最严格、最科学、最负责的教学就业管理制度，班主任、职业规划师全程跟班，把握每个学员的学 习状态，并有专业的职业素养课和就业指导课，保证教学及就业质量； 8、免费加入千锋开发者联盟，为会员提供免费技术支持及终身就业服务，免费参加千锋举办的各类技
移动界面设计——移动设备APP的特点 以智能手机为例，通常在使用智能手机的时候是以竖屏并且更多是以单手进行操作。那么对于的智能手机屏幕来说的话，通常会以屏幕上半部分为眼部热区，下半部分为手部操作热区这两个区域来进行区分。所以，会通常把展示类型的信息，例如 banner 图，logo 等视觉元素放在上半部分的眼部热区进行展示，对于一些重要的操作和点击按钮会放在手机的中下部分，方便用户的手指点击。 例如在有些 APP 当中，已经开始逐步将返回到上一级的“返回键“以及部分重要操作放在屏幕下方来进行展示。(如图 1-31 a 所示)以及也会经常发现手机移动产品的登录页面其输入框和按钮也会放置在屏幕中线以下来进行展示。(如图 1-31 b 所示) 图 1-31 a 返回键及重要操作图 1-31 b 登录页面 另外还有一些特点总结如下: a)操作界面精致、界面操作性高,所以这也就需要设计师能够在手机屏幕大小，信息合理完整的传递和用户阅读，界面视觉效果的美观留白以及功能区域划分之间寻求平衡。 b)记忆负担尽量减少、尊重用户操作习惯,在使用移动端设备进行操作的时候，要求在使用产品的时候尽量减少用户的操作时间成本。以及增加产品的易学习型，并且能够尊重用户所形成的操作习惯，能够保证快速，智能，高效的完成用户需求。
c)设计风格和版本的一致性,在设计应用视觉效果的时候，不同的应用以及不同的系统要区别使用的视觉元素的风格，不要混合使用。 同时也要注意版本更新过程当中视觉风格的延续以及重要功能操作图标要保持其一致性，保留产品核心功能以及遵循用户之前的操作习惯，所以当产品界面的视觉设计接近尾声时，通常要根据产品的视觉来总结“产品视觉规范性说明文档“来保证产品视觉风格的一致性。 手机应用通常以页面刷新的方式为主，由于屏幕较小，所以对于手机应用的信息展示来说，通常都要以新的页面展示为主。那么列表页跳转到详情页就是一个很典型的例子。 例如，社交平台中从好友列表进入到好友详情页面的时候，由于手机屏幕较小以及竖屏使用的情况，这两个功能页面通常会分别在两张页面进行展示，如果这两层信息放在一个屏幕中显示又势必会遮盖当前页面住更多的有效信息，所以把这种方式称为“页面刷新“或者”页面跳转“。(如图 1-32) 图 1-32 页面刷新/页面跳转 页面跳转过于频繁的话，会无形中增加产品的点击深度，耗费用户更多的时间成本。所以面对这样的情况，IOS 系统当中结合苹果手机的屏幕特性加入了 3D touch 这样交互方式，来减少页面跳转。其目的也是为了寻求在页面刷新，信息展示和传递以及提升界面操作效率之间寻求平衡。属于是一种全新的人机交互方式。
中北大学软件学院 人机交互论文 专业软件工程 课程名称人机交互 学号 姓名
移动界面之手机短信界面设计近年来，随着计算机网络与移动通信借助层出不穷的新技术得到了迅猛发展。互联网与移动通信更是作为迈向信息社会的两个重要标志，它们分别满足人们对信息资源的丰富性以及信息获取方式的灵活性与移动性的需求。随着互联网的应用已渗透到商务、购物、娱乐以及信息获取等日常生活、工作的各个领域，人们已经习惯于移动通讯方式，手机的出现更为人们的日常生活带来了极大的便利。 根据移动界面原则，本文介绍了手机短信界面的设计原则、过程以及可用性评估： 一、手机交互界面设计原则 手机用户界面设计的一个中心问题就是让手机用户界面达 到便于用户使用。 手机提供新功能、个性化服务的同时也增加了交互界面的复杂性，因此，手机视觉界面设计应遵循易识别、易理解、降低用户认知负担的设计原则。操作流程应简单、方便、高效。操作方式应符合人的心理和生理习惯。但是手机交互界面的设计也不能纯粹追求易用和高效率，同时要体现出情感化和人性化；其次，要注意细节的设计，让用户在细节之中体会到新功能、新技术的趣味性。在设计优秀的交互产品中发现，易用、高效与人性化、趣味性并不矛盾，比如， iPhone、iPod、android的交互界面设计，不仅高效易用，且操作的同时颇具趣味性。
手机是一种移动设备，交互界面的设计要考虑到手机的两大特征：移动性和便携性。由于手机大小的局限性，必须考虑到用户使用手机时空间的限制，不能在同一界面呆的时间太久，所以界面要体现简洁、易理解、使用户一目了然、提高操作效率的设计原则。对于用户常用的几个操作界面，要尽量简化，使用户操作更加方便快捷。总之，手机交换界面的设计要遵循易用性、易理解性、高效、人性化、情感化的设计原则。 二、移动界面开发工具 1、手机采用J2ME架构。Java ME 以往称作J2ME（Java Platform，Micro Edition），是为机顶盒、移动电话和PDA之类嵌入式消费电子设备提供的Java语言平台，包括虚拟机和一系列标准化的Java API。J2ME 在设计其规格的时候，遵循着「对于各种不同的装置而造出一个单一的开发系统是没有意义的事」这个基本原则。于是 JAVA ME 先将所有的嵌入式装置大体上区分为两种 :一种是运算功能有限、电力供应也有限的嵌入式装置；另外一种则是运算能力相对较佳、并且在电力供应上相对比较充足的嵌入式装置。手机采用的是第一种装置。 2、手机操作系统采用嵌入式linux开发手机联盟（OHA）开发的Android平台。Android是一种以Linux为基础的开放源代码操作系统，主要使用于便携设备。 三、手机短信界面设计
淘宝电商美工设计必修课 关于详情页优化那些不得不说的细节！ 写在前面 不管在什么电商购物网站网站，详情页的设计在整个设计环节中都是至关重要的一项，因为详情页在购买环节中能起到一定的转化、促进交易作用，所以一款符合产品定位且视觉效果很好的详情页是很多电商商家所渴求的。 很多电商设计新手学员们，把基本的设计技能掌握了，开始尝试做详情页作品，但制作过程中却走进了许多误区，导致作品不尽如人意。该怎么解决呢？详情页设计应该注意什么呢？从哪里思考开始入手呢？.....今天小迅姐姐就请科迅设计专业老师为大家讲讲详情页设计需要注意的细节！
详情页设计中常见的误区具体有以下两点： 误区一：用PC的设计思维做详情页设计，这种现象是极其常见的，意思是只兼顾PC端，而忽略手机端，要知道现在电商流量95%来自于移动端，PC端设计思维在电商详情页制作中是不通用的！ 误区二：只追求效果而忽略了最基础的信息传达，详情页目的在于向用户诠释产品的特性、亮点、功能，是向用户传达要表达的产品信息，使得用户能够充分了解产品特征、优点、亮点，从而促进买成交易，而不是一味的只追求视觉效果而忽略信息传递！ 在详情页设计中，很多设计手法、形式是实用且有效的，总结常用的设计形式也有助于提升工作效率，提供设计思路，那么常用设计形式可以简单分为以下几种：
形式一：采用竖屏的设计思维，分屏制作，更利于信息传递以及视觉效果的体现，这也是做电商详情页最常用的形式之一，这样做的目的更多的兼顾移动端，以移动端为主，提升视觉流畅度以及信息传达率，比如：
传统的电商详情页设计是基于PC的，无法兼顾手机端，从视觉流畅度和信息传达方面都有很大的缺陷，而采用分屏制作的形式就能很好的兼顾手机端，大大提升视觉流畅度和用户捕捉信息的速度！ 形式二：善用图标元素，当画面出现数字时可以做特殊处理或者放大，因为大字号和数字能起到很好的装饰性且也能起到突出的作用，增加画面的设计感，比如：
设计移动端报表， 你不得不知道的五个原则 随着移动互联的飞速发展，手机成为人们工作、生活中必不可少的工具，移动端报表被越来越多的企业所重视。数字化转型过程中，企业总少不了对移动端报表的需求。 数钥分析云，除了支持PC端、大屏，也支持移动端查看，可以快速集成到企业微信、钉钉、致远M3中，让用户随时随地查看报表，实时掌握企业数据，辅助企业经营。 我们在搭建或规划移动端报表时，常常会遇到一些问题： ?手机屏幕小，如何呈现核心业务指标？ ?布局固化，想要更多的布局交互模式… ?视觉效果不好，追求“高颜值”移动报表… ?指标太粗，看不出问题出在哪… ?指标太细，又看不到整体情况… 其实，我们仔细看这些问题，无非就是两点： 1、美观的需求：充分结合移动端的特点和产品优势，进行合理布局，凸显关键指标信息，合理美化，提高报表的美观度； 2、业务的需求：除了精美的外表外，更重要的是把控业务需求，在有限的屏幕范围内，呈现核心指标，指标粗细结合，全面展现业务状态。 所以，在做移动端报表时，我们要综合移动端特点、业务诉求和分析云产品优势，做出一张符合需求的移动端报表。
设计移动端报表原则： 1、基本元素，简单明了 移动端报表，主要以图表呈现，图形在信息的传递上具有更好的呈现效果。所以，合理使用图表，达到信息传递的效果。分析云移动端支持表格、柱状图、折线图、饼图、仪表盘…等各种图形，能够满足用户分析需求。 2核心数据，一目了然 1、移动端报表，最核心的元素置顶呈现，可以采用指标呈现，数字的表达更加醒目、简洁，且占用空间少，是最直接展示方式。
2、可以通过设置前景色、背景色的变化实现预警，让异常指标展现更加一目了然。 3、尽量在一屏内展现完整数据，减少滚屏的出现，如果表格较大，展示的数据较多，分析云也支持锁定前N列功能或横屏查看，保障用户清晰的看到数据内容。 3、布局清晰，条理性强 与PC端报表不同，移动端报表的呈现形式主要是竖排展现。想要更多的布局交互模式，那就少不了分析云的分段器。 分析云的分段器，可以帮助用户快速实现视图的切换，满足沉浸式阅读需求，大大方便了用户的应用。
移动界面设计分析 随着信息化的来临，产品自身的信息化属性也越来越健全，根据人们日常的需要，设计师们在产品的设计方面需要考虑到人机的交互。科技的日益进步促成了计算机的发展，可以遥控停车的全自动汽车、可以远程控制开关的家用电器等，这些电子产品的快速发展是大家有目共睹的。手机作为日常生活中最常见的个人电子产品的终端，集娱乐、资讯、生活于一体，其终端性质决定了手机在人机交互界面上更加功能集成化、人性化、趣味化等。随着电子科技技术的飞速发展，手机的功能也得到了迅速拓展，通讯功能不再是其唯一的重要功能，随着信息技术与网络技术的融合，手机的交互方式发生了很大的变化，其交互界面也更加多样化。针对移动应用的界面设计也已成为人机交互技术的一个重要研究领域。移动界面指的是通过手机平板等移动终端设备呈现的用户能够体验到的图形形态，主要表现为移动应用平台。而由于移动设备的便携性，置不固定性和计算能力的有限性，以及无线网络的低带宽，高延迟等诸多的限制，使得移动界面设计又存在着自己的特点。 首先，先谈谈移动界面存在的许多限制和特点吧。 1．资源相对匮乏 由于受到成本，能耗以及移动性的要求，移动设备往往计算能力比较差存储容量较小，显示屏幕小，分辨率低。例如，一般网站的默认分辨率可达1024*768，而手机的显示分辨率也不过320*240因此，手机只有通过设计专门的浏览器才能直接访问一般的网站。其次，移动界面比桌面系统的用户界面更加简单。桌面系统用户界面采用的一般是并行展示各种选择可以在一个大小可调的屏幕中同时显示出来，而在移动界面中，用户需要逐屏逐页寻找合适的选择，当选择过多，就会给用户带来不便，从而引发用户不满意。因此，移动界面设计的难题就是如何在有限的资源条件下有效地为用户提供信息服务，提供的选择必须根据重要性排列。 2．移动设备的种类繁多 由于移动设备的种类极其繁多，软硬件平台规范各不相同，互相之间的兼容性不是太好，其计算能力、储存能力以及声音效果等也千差万别，使得在开发移动应用时很多情况下需要专门针对某一
让人印象深刻的7种移动端UI设计风格 如果你是一个APP狂热分子，你会花大量的时间在各种APP的尝鲜中，你会明显感受到一些APP在采用着某种风格鲜明的设计语言，来标榜自己的独特之处，行成自己的设计风格，甚至引领设计风向。去年我们关注到随着Metro设计风格的影响和iOS7的发布，APP明显都开始尝试扁平化的设计语言了，除此之外，还有哪些显性化的设计语言崭露头角呢？在这篇文章里，我想分享一些日益显性的设计语言，让人一眼就记住它的风格，有一些已经随着优秀设计师的摸索，融入到国内移动产品设计里了，而有一些，确实是刚刚在萌芽阶段，需要更进一步的摸索和尝试。 一、唯一主色调|Simple color schemes 为什么我们要定义一个界面多种颜色？仅仅用一个主色调，是不是就能够很好的表达界面层次、重要信息，并且能展现良好的视觉效果？事实上也正是如此，随着iOS7的发布，我们看到越来越多唯一主色调风格的设计，会采用简单的色阶，配套灰阶来展现信息层次，但是绝不采用更多的颜色。
卡塔尔航空公司 卡塔尔公司航空就是这样的设计案例，整个界面采用粉色的主色调，从标题栏到标签页，从操作按钮到提示信息，除了黑白灰之外，全部采用粉色设计，这种简介的的配色风格，反倒起到了很好的信息传达效果，也具有良好的视觉表现力，设计师在内容排版上的技巧实在是加分。 Readability采用红色主色调设计，连提示信息背景色、线性按钮和图标都采用红色主色调，界面和LOGO也完全是一个色系的。而Vivino采用蓝色主色调设计，信息用深蓝、浅蓝加以区隔。Eidetic采用橙色主色调设计，其中的关键操作按钮甚至整个用橙色提亮，信息图标也用深橙色、浅橙色来表达程度。 可以说唯一主色调设计手法，是真的做到了移动端APP的最小化（Minimal）设计，减少冗余信息的干扰，使用户专注于主要信息的获取。
商品详情页中的图片展示是用户进入该页面后的第一个视觉点，有设计师可能会因此认为这张图片
IKEA的细节展示在点击后才会体现，不让“说来就来”的图片打扰用户的浏览体验。 满足用户的比价心理 “价比三家”是网络购物群体的消费习惯，因此，商品详情页的设计中也应该融入并满足用户选价的心理状态。在消费心理学中会提到，顾客买东西大多基于个人感受，可能并不是真正价格上的便宜，而是商家能让顾客觉得便宜。 折扣或是优惠额度的显示能让消费者心理产生微妙变化，正如当当网的做法，让原价和折后价产生对比，再直接表明折扣，这种重复表达能加深用户对优惠的力度的感受。 增加分享按钮
社交媒体的力量在如今的营销中绝对不容小觑，所以分享按钮就变得必不可少。在大多数电子商务网站中我们可以看到： 分享按钮被设置在展示图片或文字的下方，主要分享当前页面的商品。但其实，真正用于营销推广的分享并不应该仅限于商品本身。
比如成功购买的记录，又或是买家和卖家之间的有趣互动评价，这些都可以成为分享的内容，这也许比商品本身更有吸引力。 Call To Action Call To Action可以解释为用户行为召唤，也就是我们常说的用户引导。Call To Action一般从色彩和文案两个角度着手，而色彩是最直观的表现形式。用区别于页面大环境的色彩来强调突出，在吸引用户视线的同时让他们更乐于点击。 价格、标签，以及“加入购物袋”按钮都使用了鲜亮的玫红色；“购物袋”相较于“购物车”也更加生活化。 评价意见是必需板块 对网络缺乏信任感是大多数用户存在的问题，而他人的评价和建议能对当时的购买行为产生很大的影响。因此，顾客评论在电子商务中不是可选项，而是必选项。
移动应用的界面设计画布尺寸设计多大（特别是Android）、图标和字体大小怎么定、需要设计多套设计稿么、如何切图以配合开发的实现？ 本篇将结合iOS和android官方的设计规范、搜集的资料以及工作中的摸索，来分享移动应用界面设计中的尺寸规范等问题，希望能给移动端的新手设计师些许指引。若有不当之处，欢迎斧正。 一、android篇 1、android分辨率 屏幕尺寸 指实际的物理尺寸，为屏幕对角线的测量。 为了简单起见，Android把实际屏幕尺寸分为四个广义的大小：小，正常，大，特大。 像素（PX） 代表屏幕上一个物理的像素点代表屏幕上一个物理的像素点。 屏幕密度 为解决Android设备碎片化，引入一个概念DP，也就是密度。指在一定尺寸的物理屏幕上显示像素的数量，通常指分辨率。为了简单起见，Android把屏幕密度分为了四个广义的大小：低（120dpi）、中（160dpi）、高（240dpi）和超高（320dpi）像素= DP * （DPI / 160 ) 例如，在一个240dpi的屏幕里，1DP等于1.5PX。 于设计来说，选取一个合适的尺寸作为正常大小和中等屏幕密度（尺寸的选取依据打算适配的硬件，建议参考现主流硬件分辨率），然后向下和向上做小、大、特大和低、高、超高的尺寸与密度。 典型的设计尺寸 ? 320dp：一个普通的手机屏幕（240X320，320×480，480X800） ? 480dp：一个中间平板电脑像（480×800） ? 600dp：7寸平板电脑（600×1024） ? 720dp：10寸平板电脑（720×1280，800×1280） Android SDK模拟机的尺寸 屏幕大小低密度（120）ldpx 中等密度（160）mdpi 高密度（240）hdpi 超高密度（320） xhdpi 小屏 幕 QVGA（240×320）480×640 普通屏幕WQVGA400（240X400） WQVGA432（240×432） HVGA（320×480） WVGA800（480×800） WVGA854（480×854）600×1024 640×960 大屏幕WVGA800 *（480X800） WVGA854 *（480X854） WVGA800 *（480×800）WVGA854 *（480×854）600×1024 超大屏幕1024×600 1024×768 1280×768WXGA （1280×800） 1536×1152 1920×1152 1920×1200 2048×1536 2560×1600 注意，ppi、dpi 是密度单位，不是度量单位： * ppi (pixels per inch)：图像分辨率（在图像中，每英寸所包含的像素数目）* dpi (dots per inch)：打印分辨率（每英寸所能打印的点数，即打印精度）
关于移动App界面设计的研究 近几年，App的数量也是突飞猛进，在如此大数量的市场中，应该如何脱颖而出呢？本文将针对这一问题在App的界面设计中寻找解决方案。并总结出App 界面设计的过程中需要遵循的要点以及原则，给予App界面设计更多的可能。 标签：互联网；App；界面设计 App指的是Application的缩写，其发源于iphone智能的使用，现在多指移动设备中的第三方应用程序。目前，国内的App开发的市场需求与发展前景呈一片繁荣景象。但是也存在着很多问题，具体有以下几个方面。 一、App开发中存在的问题 （一）产品同质化 国内手机App制作行业同质化现象非常普遍，这是令App用户和开发商比较介怀的事。一款App的制作如果没有独特的创意，只是为了随波逐流，为了利益。自然得不到用户的认可。 （二）制作公司参差不齐 目前，国内的App开发公司数量非常庞大，市场竞争激烈。这是因为很多人把手机App制作作为一项投资少，利益大的事业。就算没有充足的资金和技术人员也要来分一杯羹。这导致App开发公司质量参差不齐，要知道一个完整的App项目开发从用户研究、UI设计、交互设计、系统功能开发、测试到最终上线，是一个复杂的过程，但是很多公司根本没有UI设计、用户研究或者测试等环节，而是直接套用同一套程序，拉低了整体的质量。 （三）App内容圈子细分 App领域的马太效应以及激烈的生存环境，都会导致未来App产品创业向更加细分和垂直化方向发展。这也意味着，App若想生存下来，必须不停地寻求功能、体验、模式方面的微创新，并且垂直领域的用户需求也将会被挖掘的越来越深，也会在垂直方向上进一步细化。 在如此复杂多变的市场环境中，想要脱颖而出，就必须拥有自己的特色。这时视觉的作用便显现出来。 二、针对App界面设计的具体意见 （一）界面设计流程
【总结】移动应用界面设计的尺寸设置及规范 时间2014-05-04 15:15:07 青溪·札记 原文appdesign-sizesetting/ 主题用户界面设计移动应用 刚接触移动应用的界面设计，最先跳入脑海的疑问是：画布尺寸设计多大（特别是Android）、图标和字体大小怎么定、需要设计多套设计稿么、如何切图以配合开发的实现？ 本篇将结合iOS和android官方的设计规范、搜集的资料以及工作中的摸索，来分享移动应用界面设计中的尺寸规范等问题，希望能给移动端的新手设计师些许指引。若有不当之处，欢迎斧正。 一、android篇 1、android分辨率 Android的多分辨率，一向是设计师和开发者非常头疼的事儿。尽管如此，对于多分辨造成的复杂问题，也是大家要优先解决的。Android支持多种不同的dpi 模式：ldpi 、mdpi 、hdpi 、xhdpi 、xxhdpi 、xxxhdpi 注意，ppi、dpi 是密度单位，不是度量单位： * ppi (pixels per inch)：图像分辨率（在图像中，每英寸所包含的像素数目） * dpi (dots per inch)：打印分辨率（每英寸所能打印的点数，即打印精度） dpi主要应用于输出，重点是打印设备上；ppi对于设计师应该比较熟悉，photoshop画布的分辨率常设置为72像素/英寸，这个单位其实就是ppi 。尽管概念不同，但是对于移动设备的显示屏，可以看作ppi=dpi 。 ppi的运算方式是：PPI = √（长度像素数2 + 宽度像素数2） / 屏幕对角线英寸数。即：长、宽各自平方之和的开方，再除以屏幕对角线的英寸数。 以iphone5为例，其ppi=√（1136px2 + 640px2）/4 in=326ppi（视网膜Retina屏） 对于android手机，一个不确切的分法是，720 x 1280 的手机很可能接近 320 dpi （xhdpi模式），480 x 800 的手机很可能接近 240 dpi （hdpi模式），而320 x 480 的手机则很接近 160 dpi（mdpi模式）。
通俗易懂！移动端尺寸科普指南 对于移动端页面和APP设计而言，很多同学会在根本的尺寸问题上纠结许久。今天火星时代就与你分享一篇关于移动端尺寸的全面科普指南，希望能够对大家有所帮助。鉴于内容比较基础，本文主要针对初学者。 现象 首先说现象，大家都知道移动端设备屏幕尺寸非常多，碎片化严重。尤其是Android，你会听到很多种分辨率：480×800，480×854，540×960，720×1280，1080×1920，而且还有传说中的2K屏。近年来iPhone的碎片化也加剧了：640×960，640×1136，750×1334，1242×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上就会小到根