研究：移动设备设计
如今，随着智能手机上互联网用户的增多，人们常期望移动网站的数量激增。
从那时起至今已有近5年的时间了，智能手机市场也Swift普及，甚至连Microsoft都已与其Windows 7 OS及其合作伙伴一较高下。
当第一部iPhone发行时，风靡科技界。
更好的移动网站设计和流畅的用户体验非常需要新的设计标准和实践 。
我们的网站是为大屏幕设计的，但与之相比，智能手机的屏幕尺寸实在太小，从而导致烦人的可用性问题。
但是，为移动Web设计是与普通Web设计完全不同的操作。
我将为您设计最佳实践和有用的开发人员工具，以设计一个更好的移动网站，因此，让我们在跳转后开始学习吧！
在本指南中，我们将为智能手机的移动浏览器设计一个用户友好的网站。
规划强大的用户体验
用户期望移动网站的行为与桌面环境相似是很常见的，因此，在构建成功的移动网站时， 保持用户友好体验应该是您的主要重点。
建立移动网站时，务必时刻牢记您的用户 ，因为最终会设计和创建供用户欣赏的网站。
除了指南之外，您还需要时刻保持警惕，以获取改善网站的新想法 。
我们已经为您编写了有关移动可用性设计的文章，以帮助您更好地利用自己的网站。
这些注意事项包括屏幕大小 ， 嵌入式图像 ， 超链接 ， 字体大小和页面导航 。
有许多可用性概念供您的用户考虑。
您可能需要以用户可以通过这些物理动作轻松访问站点信息的方式设计站点。
在台式机上，您的网站可以与鼠标和键盘进行交互，但是在智能手机上，用户将在您的网站上点击 ， 轻拂和滑动 。
计划良好的用户体验还意味着您应该考虑用户将如何与您的网站进行交互 。
保持页面简短有趣
您还会发现在几页上运行的新闻文章和博客文章，这可能有助于分解文本，但不建议在移动设备上使用，因为该技术需要更多页面加载，这意味着用户需要更多等待时间 。
您的每个网页都为您的用户保存了大量有用的信息 ，例如文本，照片或视频。
任何网站的内容都是页面内容 。
这也是单列布局完美适合账单的原因。
内容全屏显示自然会引起人们的注意，更不用说优化实际上使扫描页面变得更加简单。
您还应该考虑通过将字体样式设置为更大的尺寸并可能将图像移到一边 来使其看起来更甜美。
除非绝对需要，否则建议您将页面内容简短 。
把重点放在简单而不是美丽上 。
您可以在保留全部内容的同时缩短文章的长度，或者只是删除不必要的图像 。
在大多数情况下，移动浏览器无法像台式机浏览器那样快速加载网页，这可能会使您的读者烦恼，这就是为什么您需要优化内容和网站以实现高速内容加载的原因。
另外，您可以将导航栏设计为类似于真实iPhone应用程序的选项卡栏 ，如上面所示。
解决此问题的一项重要调整是最大化导航链接的字体和空间 ，可能会占用整个块区域。
在移动设备上，屏幕链接本质上会显得小得多，因此点击起来会困难得多。
对于希望在页面之间移动的访问者，您的核心导航是救生器。
构建移动CSS样式
当涉及到移动设备时，您应该注意块的放置方式 。
每个CSS样式表都包含许多选择器，这些选择器的属性与字体，大小，位置和显示设置有关。
既然我们知道如何优化移动网站以获得更好的可读性和可用性，那么谈论CSS样式将是很好的。
将容器div设置为100％宽度将使内容轻松在纵向/横向模式之间填充，而不会在边缘上流动 。
通常使用像素作为位置，行高，字体大小和div宽度的单位，但是在处理移动设备时，您希望页面流畅并在每个设备之间自然转换 。
要开始的一项工作是将网站的包装器宽度重置为percent 。
如果可能，请避免使用表 ，因为这些表往往会导致设备之间出现错误的结果。
重新定位边距和填充以消除布局中的膨胀 。
这样您就能获得线性打印风格的感觉。
此外， 段落，标题和导航链接都应设置为显示：块；
如果您是希望重新构建整个布局的人之一，请确保使用reset重置所有内容 。
当然可以为您的网站创建不同的图像集，并基于浏览器代理以不同的方式呈现它们，但是老实说，这只会增加您的工作量，因此请仅在确实需要时才使用该技术 。
第一种选择是将其宽度设置为100％，以便图像可以自然调整大小 。
您的大多数网站图片将呈现大于480px的像素，您可能不希望它们破坏容器。
大图像也是设备之间的麻烦。
为iPhone设计网站
它们具有相同的默认Web浏览器，Safari和大量其他选项。
iPhone和iPad都是具有内置触摸屏功能的移动互联网就绪设备。
移动市场份额相当大且分散，但苹果的iDevices占有很大份额。
对于旧型号的iPhone ，固定屏幕尺寸设置为320px x 480px， 对于iPhone 4和iPhone 4S ，固定屏幕尺寸设置为640px x 960px 。
对于特定于iPhone的网站，您需要确定屏幕尺寸。
下面的PHP小片段应该可以正常运行：
为此，您可能需要开发另一个模板，并找到一种方法来检查您的访客是否正在使用iPhone。
将元素放在同一列中可以省去您的麻烦，并允许流畅的布局“填充”纵向和横向模式 。
您应该有一个内容块，可以根据需要持续很长时间 。
iPhone屏幕限于空间。
这也可以用来包含iPhone专用的样式表 ，更改页面标题，删除图像或几乎任何动态效果。
如果是，那么我们知道访问者正在使用iPhone，从那里我们可以放置稍微不同HTML甚至是全新的模板布局！
基本上，逻辑为HTTP代理提取我们的全局$_SERVER变量，并检查单词“ iphone ”是否出现在任何地方。
下面是一个小的示例代码：
因此，使用新的CSS3媒体查询，您可以将样式直接添加到站点的主要样式表中，该样式表仅在iPhone上显示。
如前所述，iPhone的最大屏幕尺寸为960px。
当涉及提供新样式时，有一种更简单的方法。
@media screen and (max-device-width: 960px){
/* iPhone css */
}
屏幕最大宽度是也可以检测到的属性之一。
之所以可行，是因为CSS现在可以检测浏览代理及其属性 。
让自己忙于学习 ，不要害怕尝试UI设计中的新技术 。
iPhone设备的全方位移动网站并不是很难设计的，有太多示例可供参考，例如CSS iPhone 。
移动jQuery脚本
不建议直接跳入技术并在各处加载效果到您的网站，但出于测试目的，高级功能可以很好地发挥作用。
它为编码效果，动画，下拉菜单以及许多其他浏览器内功能提供了一些绝妙的速记方式，并且随着jQuery Mobile的发布而变得更加出色。
大多数前端Web开发人员都熟悉jQuery库。
我们可以使用此框架做很多事情，但是由于该框架仍处于beta中 ，因此我们坚持简单的效果。
您仍在用HTML代码编写网页，但是jQuery Mobile团队提供了许多可选的UI设计功能 。
当使用它们的文件时，它们不仅是JavaScript，而且是按钮，链接和过渡效果CSS样式。
jQuery Mobile与常规jQuery有所不同，它为您提供了一个完整的构建环境。
其中包括滑动，弹出，翻转，淡入淡出等。请查看小型DevGrow示例，以了解这些效果。
请注意，我们使用HTML属性data-transition添加具有任何预定义值的动画效果。
官方网站还提供了演示供您试用。
DevGrow博客上的一个小教程提供了一些很棒的示例。
效果和过渡非常简洁，而且您可以严格使用jQuery构建整个移动界面的事实也为该平台迈出了一大步，但是对于仅处于Beta版的平台，我不建议您使用他们的资料库，尤其是在撰写本文时并非所有主流智能手机 （尤其是Windows Phone 7） 都支持该资料库，但是随着时间的推移，它肯定会变得更好。
最终，我建议在任何项目上进行实时部署之前，先熟悉这个新的移动框架。
有用的开发人员工具
Web开发是一项艰巨的任务，需要投入大量精力，但是利用其他工具将使您的工作变得更加轻松。
对软件工具和IDE的需求也很高，更不用说功能强大的移动框架了。
移动开发人员不仅在研究编码和设计资源。
好吧， Opera Mobile Emulator是一款出色的软件，可以测试您的移动网站。
或者，您只是不想每次将更新推送到服务器时都使用智能手机来测试站点。
如果您没有可访问互联网的智能手机，这将是一个巨大的痛苦。
寻找一种方法来检查您的移动网站的呈现方式吗？
最重要的是，您无需执行过多的配置工作，只需单击几下，您就可以开始了。
也可以设置自定义分辨率和像素密度，以进行严格的测试。
该仿真器确实支持大约20种移动配置文件，例如Samsung Galaxy S，HTC Desire，甚至是平板电脑（例如Motorola Xoom）。
如果您正在寻找额外的工具来帮助您，我建议他们使用其他开发工具 。
他们的开发人员正在努力创建适当的Web标准并调整其移动渲染引擎。
下载是完全免费的，该软件可以在Mac OS X和Windows环境中运行。
他们的平台使您可以轻松地将基于HTML5的应用程序构建为6个不同平台上的本机应用程序 。
值得注意的是，移动领域一直缺乏这些类型的网站，这正是PhoneGap如此出色地填补利基市场的原因。
很少有通过HTML5开发的用于构建可靠的移动应用程序的API。
从那里，您的应用程序可以到达移动市场的很大一部分，包括Android，iOS，Windows Phone 7和BlackBerry。
该过程首先压缩您的代码，然后将其通过PhoneGap的应用程序框架传递。
查看其完整的应用程序集合 ，然后您可以按设备将其与屏幕截图进行排序。
已经开发的应用程序已经以漂亮的库样式组合进行了编译。
他们的支持页面整齐地概述了过程并提供了指向有用资源的链接。
如果您有点困惑，请不要担心太多。
他们提供了适用于所有3种主要操作系统（包括Linux）的软件包，这对开发人员而言是极大的便利。
最新的套件版本Aptana 3.0.3具有用于Web开发，CSS样式和HTML标签嵌套的完全集成的IDE，而最好的部分是：Aptana完全免费下载！
Aptana网站是学习其开发工具的首选位置。
它还具有Git集成，内置终端，代码调试器以及其他一些精美功能。
通过Studio Studio，您可以快速开发和测试在Ruby on Rails，PHP，Python或仅HTML / CSS上运行的Web应用程序 ，并且它们的代码突出显示功能最近得到了改进， 包括新HTML5和CSS3标签库 。
Aptana之所以与众不同，是因为您能以多快的速度开发一个小型Web应用程序并测试您的设计。
移动GUI套件和图标
简单的GUI很难获得，只有最具创意的设计师才能提出可行的解决方案。
对于网页设计师而言，用户界面的重要性高于一切。
没有免费赠品四处闲逛的网络将是什么？
这些GUI工具包主要是为Adobe Photoshop或Fireworks设计的，您可以在其中移动元素并将其导出为平面图像文件。
但是，有许多免费而优质的资源可供您的Web设计人员进行测试。
这些设计基于用于移动模板和应用程序设计的单个主题。
这样的网站Glyphish展示了免费和专业图标。
设计师正在创建免费布景，并比以往任何时候都更频繁地在线提供它们。
图标是非常方便的资源。
在拥有强大的图形界面之前，您不应该开始编码，而这些Web工具包将使您从正确的道路入手。
我们收集的移动设备原型模板将在网站和应用程序开发的过程中为您提供极大的帮助。
翻译自: https://www.hongkiat.com/blog/designing-for-mobile-devices/