《
移动web网站的设计师 如何设计移动应用程序》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302344R2013.htm
默认分组的内容图像不应该超过200px（或者是设备屏幕宽度的80%）。
使用动态样式表单设置设备的版式信息，并准确地缓存相干数据。
这样的划分只是一个示例，你完整能够依据本人的须要从新对设备进行划分。例如：iPhone划分为320像素，其余常见的浏览器划分为240像素，旧款设备划分为128像素。终极，详细的划分仍是由设计目的和名目用户决议的。你应当按期拜访DeviceAtlas查看设备布局情形，然后再重新评估你的分组是否公道。
正如文章之条件到的，尽管目前各种移动设备成千盈百，但是要处理这种多样性并没有设想中的可怕。事实上，完全可以将这些设备按照相近的屏幕宽度划分为若干组，大体可以分为五组：
破洛洛文章简介：WebApp最佳实际用户体验篇之如何针对多种屏幕尺寸设计合理的移动应用.
可以适应更高级的设备并逐渐提升设计方案（例如：利用GPS，感应器或是CSS3）
BBC的web网站是一个很好的例子，它论述了如何使用一个简练的框架支持尽可能多的设备，然后再参加款式和编纂策略从而针对不同的设备供给更加合理的用户休会。最终，你的设计、适应方案和编辑取舍将取决于你的估算，用户的预期以及移动网站的功效。说到底，你的设计就是在加载及时、显示精美和满意用户需求中到达一个均衡。
处理多样性
Asus Eee PC 900上网本的辨别率为1024×600像素，像素密度约为133ppi。
‘像素问题’
可以根据设备的限度前提调剂设计计划。
实现了参考设计方案后，你还需要给出这个设计适应其他屏幕尺寸的指南。相似于一个可视化设计文档，这些指南应该能够领导开发团队用编程的方法实现你的设计方案。例如：
在实在设备上检测你的设计，以防某些极真个情况被你疏忽了。
幸运的是，寻求高像素密度的风潮仿佛已经从前了，目前超过200 ppi的设备还并未几见了。这象征着，你并不是真的需要支持上图中列出的所有的像素密度。但是，在设计的时候，你需要记住，不能想当然地以为所有的设备的像素都是相等的。需要做到以下几点：
能够处置各种操作模式的设备（例如：触摸设备），或者
综合运用
屏幕的分辨率确实很主要，但还有一点同样也必需斟酌——屏幕的物理尺寸。
使用绝对单位设计和定义布局元素，好比ems或是百分百。这将提供一个更真实的布局元素尺寸和地位信息。
小： 160， 176
正如前文所述，你的内容和设计的适应性取决于你的项目需要。毕竟应该选用固定的宽度设计还是抉择灵活可变的宽度设计，这个问题始终是web设计职员争辩的焦点。而其中要害的一点就是如何优化文本的显示长度，使得浏览器能够适应全部屏幕的大小，当窗口变大时仍旧能够恰当地显示。
使用CSS背风景以及平铺图像（注：编者译，原文为tiled images）把持布局和内容元素的风格。
确定好你的设备分组（并咨询了相应的开发人员）以后，你接下来要做的就是选定一个参考设备。在你的设计进程中，将使用这个参考设备创作你的参考设计。根据你的商业需求，你可能会选择一个中等屏幕尺寸（240 px）的设备开发你的参考设计版本。这可以简单地适应更小屏幕的设备，也能在更大的设备上留有更多的创作空间。当然，也可以选择多种参考设备，发明多个参考设计版本（通常是根据设备分组情况决定的），这有助于你：
在移动web范畴，这些争论没有那么剧烈。通常单行文本的长度长短常长小的，甚至于没有足够的空间包容多于一个的浏览器翻开窗口。事实上，灵活可变的设计异常合适移动设备，它利用了低带宽设计技术，并充分应用了CSS和XHTML技术优化设计。具体包括：
充足应用块元素，由于它具备很好的可伸缩性。
这些年来，设计师主要是针对大型的桌面设备设计视图。尽管显示器的物理尺寸可能不尽雷同，但屏幕的尺寸基本都为1024×768像素；常见的像素密度为85 ppi（pixels-per-inch）。但是最近，显示的视图开端产生了一些变更：
你可能还会发明开发团队会根据设备的处理能力进行分组。这种分组经常是依照分级轨制辨别的，每个级别会规定一些技术功能（或是制约），知足相应功能的设备将被划分到相应的等级之中。例如，一个‘A等’设备应该能够支持高等的CSS标准，能够处理DOM和JavaScript——而‘C等’的设备可能只能处理简略的XHTML-MP和最基本的CSS。记得定期与开发人员进行交换，确保你的设计分组与技巧人员的分组是吻合的。
中等： 208， 220， 240
当初你可能会问自己“我的设计真的需要满足所有这些不同的屏幕尺寸吗？”，或者是“我是否应该为每种不同的设备专门设计一个版本？”这完全取决于你的项目标贸易请求，有的设计可能只要要满意一种屏幕尺寸——或者说是一种设备就足够了。但假如项目要求你的设计必须支持大多数的主流设备，那么你就必须找到一种处理多种屏幕尺寸的有效方式了。
报头使用了一个平铺和彩色的背景。像Nokia 6680这类旧款的设备不支持渲染平铺背景的功能，但是它能够显示背景的颜色。一些更简单的设备，比如只支持WAP2.0（XHTML-MP）的设备，可能直接忽略样式属性，而是简单地显示一个图标罢了。（还是以BBC为例，它可能导致在白色的背景上显示白色的图标；显示的效果有时会难以识别）。
制定了参考设计和适应规则当前，先容的最后一个策略就是使用XHTML和CSS构建一个通用的尺度视图。实际上，这就是支使用标签和基于HTML（比方，头，段落，列表和分区）的语言定义你的页面结构。最直接的利益就是——所有能够辨认HTML的浏览器都能够显示你的设计内容，并能够浮现出可视化效果（只管只能出现一些根本的后果）。考虑到移动设备的宏大数目，这一好处是不容小视的，它使得你的设计能够被大量的用户访问。通过使用浏览器或是设备的CSS、制图工具以及脚本，你还能在此基本长进一步针对各种不同的设备晋升你的设计方案。
许多Nokia N系列设备的宽度为240像素，高度为320像素。
下面给出了bbc.co.uk的一个示例，它使用了前文介绍的设计和适应策略。首先看看它用到的XHTML部分。
下图显示了在像素密度为72，144和240ppi的设备上，100×100像素的图像的显示效果。跟着图片越来越小，图像的外形和一些细节都有所变形。
当屏幕尺寸小于默认设备时，最好不要显示列表图标，从而为有效内容预留出更多的空间。
Nokia的E60屏幕的分辩率为416×352，而像素密度是240ppi。
渺小： 84， 96， 101， 128， 130， 132
h1 { padding: 3px; background: url(/mobile/images/hp-colours/banner-bak_greenblue.gif); background-repeat: repeat-x; background-color: #00594d; color: white; font-weight: bold,神奇的 CSS 形状; font-size: small; } h2 { color: #027063; font-weight: normal; font-size: medium; padding: 2px; background: url(/mobile/images/newimgs/h2-bak.gif); background-repeat: repeat-x; background-color: #ecedee; border-bottom: 1px solid #c1c0c0; } h2 a:link, h2 a:visited {color: #027063; font-weight: bold; text-decoration: none; } h2 a:hover, h2 a:active { color: #333333; text-decoration: underline,社区运营常见的三大错误; } /* New promos */ #topPromo { background-color: #000000; } #topPromo p { color: white; font-size: small; border-top: 1px solid #757474; padding: 2px; } #topPromo a:link, #topPromo a:visited { color: white; font-size: small; display: block; text-decoration: none; } #topPromo a:hover, #topPromo a:active { color: #8ad3ca; font-size: small; display: block; text-decoration: underline; } .linkList ul { border-bottom: 1px solid #c1c0c0; } .linkList li { padding: 2px; padding-left: 19px; margin: 2px; } .listTxt { background: url(/mobile/images/newimgs/ico_txt_on-fff.gif); background-repeat: no-repeat; background-position: top left; }
你可能已经留神到了，它的布局设计完全是灵活的。在页面中各个部分并没有限定宽度的大小。在下面的例子中可以看到，这样设计的布局存在很好的灵活性，能够适应不同的屏幕宽度。
因为制作商想要提升操作系统的灵活性，因此‘像素问题’将受到越来越多的关注。事实上，Google的Android系统已经实现了一个“>potentially interesting solution”方案来解决像素的问题。Android操作体系采取了一个形象的‘dp’（独破像素密度）单位，它是基于160 ppi屏幕尺寸的。这样一来，设计人员就能使用相对大小定义字体以及其他界面元素了，从而根据设备的真是尺寸自动调节视图了。
并不划定详细的宽度，这样使得设计能够根据屏幕的实际尺寸灵巧调整。
BBC的代码是十分简，它应用了XHTML标志来定义内容的构造。这样确保它的基础内容（包含一些头，body，图像跟一个无序的列表）可能得到最普遍的支撑——无论是在哪种装备或是哪种阅读器上。而后还用到了CSS来设计内容的作风。
策略3：内容和设计制订规矩
使用了背景图片后，网站的题目应能能够100%占满屏幕的宽度。
要想更加深刻地了解如何设计一个巨大的移动应用程序以及如何从用户界面、功能和可用性方面设计你的移动网站，可以参考Mobile App Design： Getting to the Point Part I和Part II
Tag：移动 设计 应用程序 如何 设计师 网站 移动 设计 应用程序 如何 设计师 网站
很多更新款的设备支持宽度和高度倒置的视图。
在意识了屏幕尺寸和像素密度的多样性后，接下来将介绍具体的设计谋略了。
其余的风格和内容则是针对服务器端调整适应各种设备。
还有一点，不到5%的设备宽度大于320个像素。但这一数字可能会在将来有所提升，目前已经可以看到，小屏幕（128，176等）设备正逐步被大屏幕（240+）设备所取代。下面的图表给出了相关的剖析。
本辞意在阐明如何针对丰富的移动设备和屏幕尺寸，合理地设计应用视图。首先提出两个小屏幕设计中的症结问题——屏幕和像素大小的多样性。
使用百分百比定义布局元素的大小，这样它们就能够根据页面的宽度机动地伸缩了。
内容图像应该能够根据屏幕的宽度主动调整大小和布局。
本文编译自byane，原文地址。
例如：
策略1：定义设备分组
在更大一点的设备上，每个列表条目都会配有一个图标。然而当屏幕尺寸较小时，可以将一些风格元素剔除从而使得列表的显示更加合理。
为了支持多种设备，像素密度的不同将带来新的问题；像素的大小也将影响整个设计的效果。
iPhone的高度是480个像素，宽320像素。
身为一个移动web网站的设计师，除非你只是针对某种特定的设备设计，否则你应该会常常遇到这样的问题：如何明白地了解网站运行设备的屏幕尺寸大小？这个问题一直困扰着移动设备上的设计师。
图标根据设备屏幕的宽度调整大小。
Blackberry屏幕的分辨率也是从160×160到324×352各种尺寸都有。
不必张皇，事件不那么恐怖。在设计移动web时，你完全可以假设页面是可以高低转动的——就像桌面浏览器中的运用一样。这样就不用考虑屏幕的高度问题了，你可以将主要的精神集中在处理设备屏幕的宽度上了。荣幸的是，DeviceAtlas Explorer已经提供了大批已有设备的屏幕宽度统计信息了。
根据显示的宽度调整图像的大小
平衡策略
Apple iPhone的分辨率为320×480像素，其中像素密度为160ppi。
--> [
网站建设之]挪动web网站的设计师:如何设计移动利用程序
BBC还可认为特定的设备（或是一组设备）重新编排一些内容。iPhone有无比丰硕的功能，因而iPhone版的BBC还有音乐下载选项，而其他的设备可能只会显示今天最热点的‘BBC消息’。可以根据数据的大小，多媒体的处理才能甚至是屏幕的尺寸决定是否需要针对iPhone提供更加丰盛的内容。以Nokia 6680上的‘特点’显示为例，它大部门的显示内容是让用户滚动屏幕查看今天最热门新闻故事。iPhone上显示了三个新闻故事，而其中只有一篇配有插入。这使得用户无需滚动屏幕就可以大抵懂得全体的征询,社区管理员如何用任务系统聚人气。
断定你需要支持的像素密度的范畴。
正如图表所示，大多数的屏幕宽度重要集中在128，240和176像素这多少种类型中——而残余的集中类型：120，130，160，208和220像素——和最多的三品种型值也相差不大。还有一小局部的屏幕尺寸宽度为96，101,社区游戏功能的设计 情绪，表现，人性，320或是大于320像素。屏幕宽度低于128像素的设备只占了很小的比例，总共有469个设备。
策略2：开发一个默认的参考设计
旧款的Nokia（目前依然比拟风行）设备屏幕的尺寸从176×208到352×416不等。
策略4：挑选web标准和一个灵活的布局方案
台式： 800+
大： 320， 360， 480+
固然以上的几点并非官方的倡议,社会化媒体推广网站 SNS网站分享按钮，但却是是一些通用的策略，可以提升小屏幕的设计。应该根据你的项目目标（以及挑衅）和特定的用户肯定你的设计方案。
网站的图标应该能够根据不同的设备组调整适合的大小：
(责任编辑：网站建设)
移动web网站的设计师 如何设计移动应用程序相关文章