移动端H5页面的设计稿尺寸大小规范

移动端H5页面的设计稿尺寸大小规范

当我们在做手机端H5网页设计稿时（当然包含微信端的H5网页设计），如果没有做过类似的移动端的设计，UI设计师和前端工程师肯定会纠结的。如果是app设计师，就不会那么纠结啦，开始学习制作H5页面的小伙伴可以参考参考哦！

那么多手机屏幕尺寸，设计稿应该按照哪一个尺寸作为标准尺寸。现在已经有2K分辨

率的手机屏幕了，设计稿是不是也要把宽高跟着最大分辨率来设计。显然不是。

请注意：（以下所有讨论内容和规范均将viewport设定为

content=”width=device-width”的情况下）也就是我们的H5页面前端代码里面必须包

含

content=”initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width” name=”viewport” />

根据目前市场流行的手机移动终端，统计他们的设备独立像素，也只有iPhone6+采用了分辨率降频处理。

具体看下图：

有兴趣的小伙伴可以去尝试不同的尺寸，比如1倍的、2倍的、3倍。最终得出的试验结果是。H5的设计稿一般设计为640x1136px即可。既满足了显示需求，又能降低用户加载图片需要的带宽。

可以用各种分辨率的移动智能手机查看我们设计的H5页面时，当然，也会出现如下的情况，内容显示不全，甚至一些重要内容和按钮都会被遮挡。

第一：背景图片必须采用background-size:cover;来实现。

第二：我们在进行H5页面内容规划布局设计的时候，不能把重要内容放在太偏下的位置或者偏上，否则前端布局时可能出现内容显示不全的情况。

通过对比可得：

除去将浏览器全屏显示的情况，几乎所有情况均会有顶部的状态栏和导航栏。

iPhone的设计标准，状态栏和导航栏的独立像素高度分别为40px和88px。

由于Android系统可以更改状态栏和导航栏的高度，这里可以取默认值为48px和100px（这些尺寸网上均可查）。

那么就会把网页内容往下挤，进入盲区（根据不同的布局方式可能挤出视口，即可视区域之下，）。取这两个系统者的最大值为148（48+100）,如下图5，设计稿要尽量保证单页下面没有重要内容。

图5

那么在所有屏幕大小上把重要内容显示完全，就要注意市面上存在的小尺寸手机屏幕，现在绝大部分智能手机分辨率都在640x960px（iPhone4分辨率）之上，所以只要把重要内容放在上图5中的盲区之上即可。计算后的最安全高度为812（960-148=812）。

在此总结，一般情况下，以现有市场上流行的移动智能手机，单页翻转（非延伸向下的长页面）设计稿尺寸为640×1136，在高度为812处设置一条安全线（参考线），将重要的内容布局在这条安全线之上。

移动端H5页面的设计稿尺寸大小规范内容如下：

1、像素是没有宽高的（不要被Photoshop中的像素格欺骗），它只代表一个采样的色值。

2、任何图片作为数据信息被保存在存储盘中时，只有宽高像素数是有意义的，此时的ppi对于图片来说时没有任何意义，也并不能描述这个图片有多少英寸的宽度或者高度，而只有在被打印出来后才有ppi的意义，被打印出来才可以描述这张图片有多高多宽。

3、平时制作H5页面时设计原型时，产品经理出的原型稿建议屏宽为320px，用这个尺寸一是为了浏览方便（现在很多手机的屏宽达到1440px，用这个尺寸去模拟显然不现实），二是以iPhone5s为标准的手机屏宽较小，进行内容排版布局时屏宽应该向下兼容。

4、制作设计稿时，设计师应该把原型稿上的所有尺寸进行2倍处理。这样设计稿在移动设备上预览便可保证清晰。而前端切片时，按照现在流行的做法，可以直接使用原型稿上的尺寸，也就是设计稿上的1/2。

5、一般情况下，H5页面设计稿做成640x1136px是最为稳妥的尺寸，在812px高度处增加一条安全线，重要内容在此线之上（网上有些文章说安全线是960px处，个人认为不太准确）。既保证了在移动设备上显示清晰，也保证了素材的最小尺寸。

网购平台宝贝详情页设计探究

·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/ea12956316.html,/kcms/detail/33.1166.TN.20170706.1420.076.html

移动端文字与排版设计的六个原则

原因是我们在使用这两种设备时的观看距离不同，桌面端我们的眼睛离屏幕较远，而在移动端则相反，因此我们应该在移动端使用较小的字号反差。

栅格系统 小屏幕上，一些桌面端无关大雅的间距不等问题会变得突出。 Lofter是网易一款精品优雅的App，但其文章正文界面却略有瑕疵： 可以看到段落右侧与卡片的间距明显大于左侧。造成这个问题的原因是设计时对文本框的宽度与文字大小之间在关系考虑不周全，导致文字并不能完美地填充满文本框。

上图为iPhone5中此界面的放大效果并加上了辅助线，仔细观察，去除黄色部分各20px的间距后，文本框宽度是558px，而正文使用的字号是30px，所以行末留下18px的空余空间。如果字号定 为31px，则刚好可以放下18个字后填满558px像素的文本框。 当然31px的字号在实际环境中可能并不是一个最合理的字号设定，因为它并不能被整除使用到@1x 的iOS开发环境。在实际设计中，可以先设定一个栅格系统，以iPhone5为例，定义最小栅格 为8x8px的话，得到如下一个栅格图：

以8为基本单位，把所有字号、文本框宽度设定为8的倍数，这样我们就可以确保汉字始终保持对齐。 对齐 “…所有的元素都是正方體。但是從二十世紀開始使用標點後，到了現代桌上出版時代，許多排版工具軟體都直接套用來自日本的「禁則處理」—即避頭尾點；加上與西方文字混排的狀況越來越多，以至於無法做到縱橫對齊的基礎。但是至少段落的頭尾還是需要對齊。這就是為什麼對齊對電子書與長文章來說十分重要的原因。” ——董福興《簡單做好中文排版》 在英文的段落排版中，通常是左侧对齐，而让右侧自然形成起伏边（rag）。对中文排版与阅读习惯而言则相反，段落的头尾对齐尤其重要。 先来看一个反例：

移动端H5页面设计实战

移动端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变换，以及获取设备的加速度传感器数据等。这些技术衍生了诸如互动小游戏、交互型动画页面、可视化新闻等，为市场营销、媒体报道等提供了大量不同形式的载体，同时为产品策划与视觉设计带来了更多的想象空间。

移动互联网页面设计存在的问题

移动互联网页面设计存有的问题 近几年移动互联网也开始如雨后春笋般迅速成长，是继互联网之后又 一新力军，这个新力军本身是互联网的延续。移动互联网的快速发展，也使对移动互联网页面设计的要求越来越高，本文主要主要探讨移动 互联网的特点、页面设计中存有的问题及页面设计原则。 一、移动互联网网页设计特点 移动互联网载体是手机，从界面角度来看，桌面网页设计的分辨率大 都是1024以上，而手机的分辨率因型号不同各异，一般只有320，最 多也就是800的分辨率，从物理角度来看，这基本上是移动互联网页 的最高值。要在充足小的屏幕里让你看到想要的东西，是一件非常难 的事。基于这个出发点，绝大多数移动互联网网页设计的比较简单和 实用。移动互联网比起传统的网页具备较强的实时性。我们能够第一 时间把身边发生的事情通过手机发布到互联网上，在此基础上推动了 诸如手机人人网、手机微博等社区化移动互联网站的加速发展。 二、移动互联网网页设计中现存问题 1.移动互联网网页分辨率难以衡量当前市场是的手机型号各式各样， 屏幕种类令郎满目，规格不等，分辨率从320—800像素都有，这些因 素给移动互联网网页设计带来不同水准的难度，设计师很难针对一种 或几种手机型号实行设计，只能通过对主流手机实行界面设计，这种 设计完全依赖于UC浏览器来自动转换分辨率的设计导致了网页文字错位，页面杂乱，严重降低了用户满意度。 2.网页设计缺乏规划性因为当前移动互联网页面设计受到移动终端的 条件限制，设计师设计出的页面往往过于简单，甚至出现文字堆积的 状态，整个页面毫无设计感。于此同时，因为移动互联网处于刚起步 阶段，很多设计师还不够成熟，设计出的页面缺乏色彩规划，要么颜 色过于单调，要么花里胡哨。移动互联网站同时也有电脑桌面网站，

设计移动端报表,你不得不知道的五个原则

设计移动端报表， 你不得不知道的五个原则 随着移动互联的飞速发展，手机成为人们工作、生活中必不可少的工具，移动端报表被越来越多的企业所重视。数字化转型过程中，企业总少不了对移动端报表的需求。 数钥分析云，除了支持PC端、大屏，也支持移动端查看，可以快速集成到企业微信、钉钉、致远M3中，让用户随时随地查看报表，实时掌握企业数据，辅助企业经营。 我们在搭建或规划移动端报表时，常常会遇到一些问题： ?手机屏幕小，如何呈现核心业务指标？ ?布局固化，想要更多的布局交互模式… ?视觉效果不好，追求“高颜值”移动报表… ?指标太粗，看不出问题出在哪… ?指标太细，又看不到整体情况… 其实，我们仔细看这些问题，无非就是两点： 1、美观的需求：充分结合移动端的特点和产品优势，进行合理布局，凸显关键指标信息，合理美化，提高报表的美观度； 2、业务的需求：除了精美的外表外，更重要的是把控业务需求，在有限的屏幕范围内，呈现核心指标，指标粗细结合，全面展现业务状态。 所以，在做移动端报表时，我们要综合移动端特点、业务诉求和分析云产品优势，做出一张符合需求的移动端报表。

设计移动端报表原则： 1、基本元素，简单明了 移动端报表，主要以图表呈现，图形在信息的传递上具有更好的呈现效果。所以，合理使用图表，达到信息传递的效果。分析云移动端支持表格、柱状图、折线图、饼图、仪表盘…等各种图形，能够满足用户分析需求。 2核心数据，一目了然 1、移动端报表，最核心的元素置顶呈现，可以采用指标呈现，数字的表达更加醒目、简洁，且占用空间少，是最直接展示方式。

2、可以通过设置前景色、背景色的变化实现预警，让异常指标展现更加一目了然。 3、尽量在一屏内展现完整数据，减少滚屏的出现，如果表格较大，展示的数据较多，分析云也支持锁定前N列功能或横屏查看，保障用户清晰的看到数据内容。 3、布局清晰，条理性强 与PC端报表不同，移动端报表的呈现形式主要是竖排展现。想要更多的布局交互模式，那就少不了分析云的分段器。 分析云的分段器，可以帮助用户快速实现视图的切换，满足沉浸式阅读需求，大大方便了用户的应用。

移动设计八原则

保持用户的劳动付出。 智能有爱：给用户提供让他感到惊喜有趣的、智能高效的、贴心的设计。 一、内容优先 对于手机而言，屏幕空间资源显得非常珍贵。为了提升屏幕空间的利用率，界面布局应以内容为核心，而提供符合用户期望的内容是移动应用获得成功的关键。如何设计和组织内容，使用户能快速理解移动应用所提供的内容，使内容真正有意义，这是非常重要的。 重组内容，使内容符合移动的特征 在PC上的网页内容往往相对复杂，在进行内容移动化时，并不合适把内容直接照搬到手机端。在进行移动应用设计时，应该重组内容，使其符合移动应用的特征。 移动应用的内容应使用用户的语言，以用户熟悉的维度来组织内容，这样更容易查找目标信息，提升内容的利用率；删除无关的多余内容，让内容更简洁清晰，考虑在小屏幕空间可以合理的布局，增加屏幕的利用率；内容要是清晰和具体的，是用户恰好需要的；内容要是有情景特征的，可以在不同的情景下给用户提供不同的情景下的内容。 优先突出用户需要的信息，而简化界面的导航 一个应用提供给用户的信息往往是太多而不是太少，设计师们的关注重点也会转移到如何让用户找到内容，而忽略了能给用户获得价值的是内容，而不是导航。 在移动应用设计时，我们更为关注的是用户需要的内容，其次才是导航。在内容本身复杂而多变的时候，如何让用户能更快速地获取恰当的信息，在移动情景中会显得很重要。 适时提升屏幕空间的利用率 即使用户的视觉注意点集中在内容上，在设计方面也要把屏幕资源更多的给内容而不是导航。只是在恰当的时候，可以让用户呼出导航即可。 二、为触摸而设计 点击操作是PC 时代交互的基础，在触屏设备上基于手指的手势操作已经代替了鼠标的点击操作。手势操作灵活多变、交互自然，但也带来识别性差、操作精度不高等缺点，都需要一些手势设计的基本原则来指导和完善。 以信息架构为基础，建立手势交互规范 在一个移动应用中，手势的统一性非常重要。让用户在应用的任何界面中都知道怎么使用手势，并

南通平面UI设计告诉你电商详情页设计的细节

淘宝电商美工设计必修课 关于详情页优化那些不得不说的细节！ 写在前面 不管在什么电商购物网站网站，详情页的设计在整个设计环节中都是至关重要的一项，因为详情页在购买环节中能起到一定的转化、促进交易作用，所以一款符合产品定位且视觉效果很好的详情页是很多电商商家所渴求的。 很多电商设计新手学员们，把基本的设计技能掌握了，开始尝试做详情页作品，但制作过程中却走进了许多误区，导致作品不尽如人意。该怎么解决呢？详情页设计应该注意什么呢？从哪里思考开始入手呢？.....今天小迅姐姐就请科迅设计专业老师为大家讲讲详情页设计需要注意的细节！

详情页设计中常见的误区具体有以下两点： 误区一：用PC的设计思维做详情页设计，这种现象是极其常见的，意思是只兼顾PC端，而忽略手机端，要知道现在电商流量95%来自于移动端，PC端设计思维在电商详情页制作中是不通用的！ 误区二：只追求效果而忽略了最基础的信息传达，详情页目的在于向用户诠释产品的特性、亮点、功能，是向用户传达要表达的产品信息，使得用户能够充分了解产品特征、优点、亮点，从而促进买成交易，而不是一味的只追求视觉效果而忽略信息传递！ 在详情页设计中，很多设计手法、形式是实用且有效的，总结常用的设计形式也有助于提升工作效率，提供设计思路，那么常用设计形式可以简单分为以下几种：

形式一：采用竖屏的设计思维，分屏制作，更利于信息传递以及视觉效果的体现，这也是做电商详情页最常用的形式之一，这样做的目的更多的兼顾移动端，以移动端为主，提升视觉流畅度以及信息传达率，比如：

传统的电商详情页设计是基于PC的，无法兼顾手机端，从视觉流畅度和信息传达方面都有很大的缺陷，而采用分屏制作的形式就能很好的兼顾手机端，大大提升视觉流畅度和用户捕捉信息的速度！ 形式二：善用图标元素，当画面出现数字时可以做特殊处理或者放大，因为大字号和数字能起到很好的装饰性且也能起到突出的作用，增加画面的设计感，比如：

移动应用界面设计的尺寸设置及规范

【总结】移动应用界面设计的尺寸设置及规范 时间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模式）。

html5页面设计

html5页面设计 北京千锋互联科技有限公司是中国最早从事移动互联网研发和培训的机构之一,千锋集团旗下现有千锋教育、移动产业、项目研发、创业孵化业务，是国内最大的移动互联网人才培训和人才提供商。公司总部位于北京，目前已在深圳、上海、郑州、广州、大连、武汉、成都、西安成立了分公司。 千锋集团旗下的千锋教育一直秉承“用良心做教育，做真实的自己”的理念，是中国移动互联网研发培训领导品牌，全力打造移动互联网高端研发人才服务平台。千锋教育每年培训和输送近万名移动互联网研发人员，是唯一真正获得企业一致好评的移动互联网培训机构，从千锋走出的学员在业界得到了广泛认可。2014年，千锋教育集团成为教育部教育管理信息中心“移动互联网应用开发指定实训基地”。截止目前，千锋教育已与500多家高等院校建立深度合作关系，并携手教育部教育管理信息中心举办《高等院校骨干教师iOS/Android暑期培训班》，千锋讲师团队技术水平得到业界一致认可，好评如潮。千锋教育组织的技术研讨会名企云集，是千锋和企业之间紧密合作的桥梁。千锋讲师发布的免费培训视频、学习资料、源码下载等浏览量近千万，每年约有数百万研发人才从中获益。 一、千锋教育八大优势 1、中国移动互联网研发培训领导品牌，专注iOS、Android 、HTML5、UI等技术研发培训，坚持“用 良心做教育，做真实自己”的理念； 2、业内唯一一家敢推出“两周免费试听，不满意不缴费”的政策，让学员更真实的了解千锋、了解自 己是否适合做开发； 3、零学费入学，工作后分期还款，业内学员毕业薪水最高，培训就业协议明确写出薪水保障，平均薪 水专科5000、本科6000、硕士7000； 4、权威资深师资阵容，业内最具责任心、最懂教学、拥有最强技术、有大型项目经验实战派讲师授课， 由业内知名专家及企业技术骨干组成； 5、自主研发QFTS 教学保障系统，拥有自主知识产权的开发培训课程体系，讲练学相结合，课程内 容紧贴当前前沿实用技术和企业实际需求； 6、企业级项目实战训练，从千锋科技及合作企业项目中研发出几十个企业级教学项目，让学员参与真 实的企业级项目研发，最后让学员能够独立设计开发自己的上线项目； 7、最严格、最科学、最负责的教学就业管理制度，班主任、职业规划师全程跟班，把握每个学员的学 习状态，并有专业的职业素养课和就业指导课，保证教学及就业质量； 8、免费加入千锋开发者联盟，为会员提供免费技术支持及终身就业服务，免费参加千锋举办的各类技

移动端UI设计师必看原则

移动端UI设计师必看原则 由于移动端呈现的固有局限性，因此相比较网页来说，形式和内容较为简洁。设计师们在制定方案的时候，规则也相对简单一些。即便如此，移动端的UI设计中，几大基本原则是设计师们必须遵循的。 第一，确保UI设计界面的清晰性。 UI设计的清晰性原则，主要表现在界面图标的风格统一，内容主题明确，功能指向性强等方面。 这是每一个UI设计师在设计作品时，首要遵循的一大原则。主题不明确、信息概念模糊的界面，既影响用户的使用体验，也会大大降低该界面的使用率。那么，以此界面为主题设计的系列APP或者软件，就毫无使用价值。 第二，保留UI设计界面约定俗成（用户习惯）的功能。 这是指在UI界面的设计过程中，设计师不能一味地求变，求新。有些已经约定俗成的功能，或者用户已经习惯使用的某个功能，是必须保留的。否则，拿到一款手机，里面的应用全部都是新的，都是用户从未体验过的。 且不说应用，就连信息功能的删除键、输入键、增加表情符号的功能都已经更改了。那这款手机，对于用户来说，完全是一个陌生的设备，没有任何亲切感，好感度自然低很多。 第三，确保界面风格的整体一致性。 可以说，手机是一个小型的电脑，正因为其小，用户在体验时，

更能站在高处看到细微之处。如果移动端UI界面的设计风格不统一，比如字体不一致、颜色搭配不一致、结构不一致、布局不一致，用户在使用，很容易出现混乱的感觉。 比如，首页的设计是扁平化的，那么，相应的栏目或者菜单、页面布局等也要开发成扁平化的。 第四，保证UI界面设计的美观度。 这一点，自然不用多说。美是人们热爱一切事物的起源，美的事物，总是能够吸引更多人的关注。移动端的UI界面设计亦如此。一款不论外观还是界面设计都非常精美、精致的手机，显然它的销量不会低；如果用户体验度再高一点的话，那么，这款手机一定赚足了口碑和市场。 第五，充分考虑页面的响应速度。 设计师们可千万不可泛泛地认为，移动端页面的响应速度是开发考虑的事情，跟UI界面设计无关。如果这么想，那就大错特错了。一款手机设计完成后，开发固然重要，可开发也是基于设计师的方案进行的。 因此，设计师们在设计时，要保证UI界面的简洁性，在方案规划时，充分考虑到各个模块的衔接和转化、切换。只有在简洁性的基础上，页面的响应速度才会快。 随着互联网的发展，移动端越来越受到大众的追捧。未来关于移动端UI界面的设计和开发只会更多，希望上述的几点建议能对从事UI设计的朋友们有所帮助。

电子商务网站设计分析(六)|商品详情页设计

商品详情页中的图片展示是用户进入该页面后的第一个视觉点，有设计师可能会因此认为这张图片

IKEA的细节展示在点击后才会体现，不让“说来就来”的图片打扰用户的浏览体验。 满足用户的比价心理 “价比三家”是网络购物群体的消费习惯，因此，商品详情页的设计中也应该融入并满足用户选价的心理状态。在消费心理学中会提到，顾客买东西大多基于个人感受，可能并不是真正价格上的便宜，而是商家能让顾客觉得便宜。 折扣或是优惠额度的显示能让消费者心理产生微妙变化，正如当当网的做法，让原价和折后价产生对比，再直接表明折扣，这种重复表达能加深用户对优惠的力度的感受。 增加分享按钮

社交媒体的力量在如今的营销中绝对不容小觑，所以分享按钮就变得必不可少。在大多数电子商务网站中我们可以看到： 分享按钮被设置在展示图片或文字的下方，主要分享当前页面的商品。但其实，真正用于营销推广的分享并不应该仅限于商品本身。

比如成功购买的记录，又或是买家和卖家之间的有趣互动评价，这些都可以成为分享的内容，这也许比商品本身更有吸引力。 Call To Action Call To Action可以解释为用户行为召唤，也就是我们常说的用户引导。Call To Action一般从色彩和文案两个角度着手，而色彩是最直观的表现形式。用区别于页面大环境的色彩来强调突出，在吸引用户视线的同时让他们更乐于点击。 价格、标签，以及“加入购物袋”按钮都使用了鲜亮的玫红色；“购物袋”相较于“购物车”也更加生活化。 评价意见是必需板块 对网络缺乏信任感是大多数用户存在的问题，而他人的评价和建议能对当时的购买行为产生很大的影响。因此，顾客评论在电子商务中不是可选项，而是必选项。

移动端设计中的8大原则

本文作者向盛华系前小米米聊产品经理，现任职于科大讯飞：

#左边界面#：大众点评新版的价格的搜索就比之前改得更符合用户心里模型；#右边界面#：食神摇摇的摇动手机找餐厅更加符合大众用户的心里，大家应该都有那种中午不知道去哪家餐厅就餐，那么就摇一摇来随机抽出一个附近的餐厅。 原则2：培养用户使用情景的思维方式做设计 要做到这个原则其实是很难的，需要长期的实战经验才能做到这点。 那我们都知道米聊出的比微信早，但后来被微信反超，个人认为不光是QQ帮了微信很大忙，比如用户登录门槛低，用户来源，广告打得响之类的，其实在用户使用情景方面米聊研究的没有微信 透彻。 对于一个社交即时通讯产品，添加好友的功能是好友汇聚的来源，虽然米聊微信都绑定手机通讯录，但话又说回来，用户找手机通讯录联系人语音聊天的还是比较少。添加好友是引导用户去发现 好友，找好友, 碰好友的一扇门。所以对于这么重要的功能放置在应用程序的哪个位置，在产品前期就会让用户明显的去选择用哪个应用，因为聊天工具的前提是要有人和你聊天。再回到现实的界面中来，看看下面的对比：

微信1.0的时候（我这里只截了4.0的图）把添加好友放置主Tab上，方便用户很快的添加好友 米聊2.0时还是把添加好友放置在好友列表的第一排，用户很难发现 原则3：尽量少的让用户输入，输入时尽量多给出参考 移动端的虚拟键盘一直是科技界无法解决的一个难题，虚拟键盘的主要缺点：1.输入定位无法反馈，所以无法形成高效的盲打；2.虚拟键盘的空间限制，手指的点击经常造成误按。光是上面这两点就让虚拟键盘在输入上大打折扣，所以我们在设计应用程序时，只要遇到Input Box的控件时，首先就要想到尽量让用户少输入，或者智能的给出参考。

移动应用界面设计的尺寸规范

移动应用的界面设计画布尺寸设计多大（特别是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） 注意，ppi、dpi 是密度单位，不是度量单位： * ppi (pixels per inch)：图像分辨率（在图像中，每英寸所包含的像素数目） * dpi (dots per inch)：打印分辨率（每英寸所能打印的点数，即打印精度）

通俗易懂!移动端尺寸科普指南

通俗易懂！移动端尺寸科普指南 对于移动端页面和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上就会小到根

移动端产品设计的4点准则

移动平台的设计与传统的网页有许多不同之处，如独特的交互体验、不同光线下的视觉效果以及移动终端的资源有限。这些都考验着开发者的技术。 1. 观察并不准确 用户所见到的总是并不真实的一面。尤其是App的表现力和整体的适应性设计。用户想要快捷高速的App。你可以通过很多方法来实现。 移动设备硬件的快速发展可以帮助你实现快捷这一目标。但是这里有另外的一个问题阻碍，那就是网络问题，硬件设备可以说更新的统一，但是网络并不是。有线和有线、无线和有线、无线和无线，网速差异都很大。你必须要超越这些障碍。即使网络状况不佳，你也要提供用户以响应式、快速的界面。 在这种情况下，你必须要营造这样一种效果，也可以说是一种善意的欺骗，就是用户点击、滑动，尽管实际上还需要一定的读取时间，但是在他们的屏幕上看来，要显示他们所需的任务或目标就迅速完成了。这可以通过背景图手段达成。比如，一封含有很大附件的邮件的发送需要一定时间，但是只要用户单击了发送按钮，邮件App就要显示信息已发送，而实际上含有附件的邮件在后台还在缓慢的上传中，大大减少了用户的等待时间，从而提高满意度。 2.简化安装、无需注册提高使用率 研究表明，智能手机用户每个月大概下载3-4个App。26%仅

仅打开一次，然后就再也不用了。48%的用户打开的次数少于10。因此，任何用户如果对App不是很感冒，那么初次使用后的第3次，或者第4次，就会抛弃这款App了。这里有两种方法解决这个问题。 办法一：让他注册，然后和他的社交网络比如Twitter、Facebook紧密联系。 办法二恰恰相反，保持App尽可能的简洁，安装即用，无需注册。如果对App品质足够有信心，用户也确实喜欢，那么可以要求用户提供更多的个人信息。如果用户喜欢这款App那么用户不介意提供个人信息，并且会向朋友推荐。 3.注意手机屏幕的大小、操作方式、精确度 很多有经验的开发人员具有丰富的开发App的经验，但是仅仅限于桌面环境。他们通常都用PC工作的方法可能并不适用于手机屏幕。不仅是手机的触摸屏略小，而且要考虑一个东西叫做触碰。触碰可不想电脑鼠标点击那样准确，这一点一定要考虑到 4.注重敲击体验 用户在实际操作中，通过点击、滑动来进行输入，已经变成了用户体验的一大块。App中如果点击次数过多，那么会降低用户积极参与度。逻辑上、数据上都有所证明。

经验总结｜一个移动端数据产品的设计思路

经验总结｜一个移动端数据产品的设计思 路 在企业内部或者入驻电商平台的商家、业务方，每天有大量的人在查看大量的指标，用于监控、分析业务的发展。同时，又有着能够随时随地，方便快捷的查看分析数据的诉求。本文想简单介绍下可以随时随地查看数据、分析数据的移动端产品界面的设计思路。 移动端BI产品，需要在有限的空间内把大量的数据、图表组织起来。任何产品设计，其实都离不开产品定位、用户主体是谁、交互设计、开发维护、运营策略几个方面，我们本次主要介绍产品前端设计方法。 设计一个移动端数据产品可从以下思路入手：

一、明确产品定位 本文要说的移动端BI产品，一般有如下几种： 用于数据监控、分析平台型数据产品集中了以上两点以上几类产品在界面展示设计上并无区别，区别在于框架的设计、前后台的配置、运营、与用户群体的不同。 例如平台型数据产品，产品的定位是平台，用户可以在平台上通过配置等方式得到自己想要的数据。同时保证数据的私有性，模式类似于维基与知乎，运营与管理只要确保平台的稳定性与扩展性即可。 二、数据内容 关于数据内容写在前面是因为：数据内容决定了产品如何架构，决定了用户用什么样的思路去使用产品，决定了开发维护，以及运营。但不是本文重点，这里只说几个重点：

时间 时间决定了数据的计算方式，更决定了你要如何设计产品能在不同时间维度中切换，你需要计算到什么时间粒度的数据，以及为什么这么做。 指标以及指标数量 数据产品的核心是指标，指标数量随着公司业务的发展会不断的增加和改变。指标数量影响产品的维护与开发成本。如果所有指标都由你的团队来开发和维护，成本随指标数量成正比。这种情况尤其要着重考虑后台的使用便捷性设计，充分考虑运营团队的运营模式。好处是可控性高，数据质量较容易把控，展示形态会比较丰富。如果是平台式产品，指标的多少对维护的成本影响较小，但需要考虑平台的性能、扩展性、以及数据质量等问题。 计算方式 按计算方式分为实时计算与离线计算。好的数据产品会做到用户无感知计算方式的存在。例如当日时点数据时，使用的是实时计算。当周、月粒度的数据，则使用的是离线计算。在产品生命周期初期，如果中间层不能处理的很好，可以考虑将实时计算与离线计算独立开，让用户感知到，但是在技术条件与产品的演进后，一定要做到用户无感知，不要让用户在这一层面多费脑子。 三、构思产品结构

移动端字体的设计准则

移动端字体的设计准则 好的字体是隐形的，不过更准确来说，应该是好的字体让阅读 行为毫不费力。下面是分享的移动端字体的设计准则，欢迎大家参考! 当视线掠过一行文字时，它是跳跃前进的，我们称之为扫视。 你读的不是字母，甚至不是词语，而是文字某部分的影像，大脑会补上它预期的内容。如果超出大脑预料，它会促使眼睛回去核实假设十分正确。通过在字里行间创造平顺的视觉流动，好的字体极度减轻了眼睛的负担。 对任何字体工作者而言，在移动设备上要面临与生俱来的挑战：空间有限，环境光通常比较微弱。不过将已经用于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. 宽松行距、紧凑行距

移动端设计尺寸规范

从原理开始介绍一下移动端设计尺寸规范 初涉移动端设计和开发的同学们，基本都会在尺寸问题上纠结好一阵子才能摸到头绪。我也花了很长时间才弄明白，感觉有必要写一篇足够通俗易懂的教程来帮助大家。从原理说起，理清关于尺寸的所有细节。由于是写给初学者的，所以不要嫌我啰嗦。 现象 首先说现象，大家都知道移动端设备屏幕尺寸非常多，碎片化严重。尤其是Android，你会听到很多种分辨率：480x800, 480x854, 540x960, 720x1280, 1080x1920，而且还有传说中的2K屏。近年来iPhone的碎片化也加剧了：640x960, 640x1136, 750x1334, 1242x2208。 不要被这些尺寸吓倒。实际上大部分的app和移动端网页，在各种尺寸的屏幕上都能正常显示。说明尺寸的问题一定有解决方法，而且有规律可循。 像素密度 要知道，屏幕是由很多像素点组成的。之前提到那么多种分辨率，都是手机屏幕的实际像素尺寸。比如480x800的屏幕，就是由800行、480列的像素点组成的。每个点发出不同颜色的光，构成我们所看到的画面。而手机屏幕的物理尺寸，和像素尺寸是不成比例的。最典型的例子，iPhone 3gs的屏幕像素是320x480，iPhone 4s的屏幕像素是640x960。刚好两倍，然而两款手机都是3.5英寸的。 所以，我们要引入最重要的一个概念：像素密度，也就是PPI（pixels per inch）。这项指标是连接数字世界与物理世界的桥梁。 Pixels per inch，准确的说是每英寸的长度上排列的像素点数量。1英寸是一个固定长度，等于2.54厘米，大约是食指最末端那根指节的长度。像素密度越高，代表屏幕显示效果越精细。Retina屏比普通屏清晰很多，就是因为它的像素