重庆加强网站的体验

1. 基于浏览器和设备性能对平台和设备的深入考量

如果我们目前为止没有做错的话，基础内容和功能在大部分的浏览器里都可以运行良好。如果你要设计- -个网络应用程序，有一点需 要提醒你的是需更准备详细的技术参数(比如地图应用程序需要CSS、JavaScript、 图片和GPS支持能力作为基础)。在这个例子里，线框设计可能不会起作用。从某种程度上而言，这样做实在是太糟糕了，因为我们会把用户关在门外。尝试尽可能多地放入可接受的内容。我们的草图设计会告诉我们这个网站可能会长成能多地放入可接受的内容。我们的草图设计会告诉我们这个网站可能会长成但是现在我们更喜欢进一步设计， 加强在浏览器和平台上的综合体验，可以支持更强大的功能。下面给出一些案例。

• 线性的设计只有一栏内容。为了大尺寸的屏幕，或者是为了方便那些需要在一些设备上任意切换肖像和景观模式的时候，我们可以做一点调整。 如果有更多的空间，布局可以设计成适应多栏的。把元素放在不同的位置也会明显发挥作用，因为用户站在一个更远视点的时候和屏幕的交互方式会显著不同;比如说用户可能还想要扭转或者重新定位一下导航。你可能也会重会重新思考一下哪些内容是重 要的，因为此时不再是像线性设计那样简单新思考一下哪些内容是重 要的，因为此时不再是像线性设计那样简单会重新思考一下哪些内容是重 要的，因为此时不再是像线性设计那样简单地只要将内容由上至下摆开就可以了。
• 还有些设备会有一些我们非常想要去利用的功能，比如相机和GPS功能。大部分人都想只要能够支持JacaScript就可以了（常见的情况是可以支持的，但是又的时候却不这样，特别是对于一些低端设备，而且这样的在周围还不少）。考虑一下如果设备具有加强视觉的功能，比如第三方字体或者CSS渐变？在特定设备中的特定浏览器里, 这种真实环境下进行设计使我们可以测试这些特性是不是起作用(也可以知道是不是好的作用),同时也可以知道这个设计在表现层上的影响力。我们需要去考察，要在那些特定的平台和设备上把某些特定排除在外，又在其他的平台和设备上使用某些特性。
• 基于特定的平台或设备，我们可能甚至想去加、减、移动或是该表一些内容。比如说，在小屏幕设备或者是手机终端上，会希望使用小尺寸图片作为默认的图片，但是在大屏幕设备上，会希望使用更大一点的图片。我们不希望提供一些对于场景没有用处的内容给用户; GPS相关的内容只需吴在支持GPS功能的时候出现，因此我们只会在符合条件的设备上添加这些内容。
• 为了加强结构化内容的体验，我们至少得将我们需要支持的设备列出一张单来，对它们进行分门别类，归纳出几个层级。换句话说，将相似类型的设备合成一种，这样你就可以聚焦在针对这几类设备的设计上，而不是针对每一个不同的个体。我们通常仅仅满足IOS和Android,但是这样太有限了。最后，我们将针对其他不同种类的设备对产品做出调整，使它在任何设备，上运行良好。
• 不要根据设备的物理表象特征来对它们进行分类，比如说:桌面、智能手机、便签等。这种分类和你需要思考的问题关联性不大。相反，应该按照你的APP所需要的特征将设备(甚至是延伸到它们默认的浏览器)拆分成你所需要的类别。任何可能关联到的因素都需要考虑在内，比如它的触控能力、屏幕尺寸、像素密度、地理定位、本地存储、SVG 支持情况等。
• 我们应该关注在设备的特征上，因为当有新的设备出现，这种设备又很难归类到日常消费品和市场类目的时候，我们之前所作的工作还是有效的。
• 市场类目无法让我们知道那些内容是需要了解的（比如说，是否支持SVG，在这个设备的这个浏览器里是否表现良好）。

1. 更进一步：给设备归类

对于网站“三个盒子”，我们就需要关注设备归类。这是一个以教育为目的网站，为了让用户知道代码是怎样发生作用的，需要放上用户自己编写的代码进去。写出来的代码需要展示在浏览器里，运行后的结果需要显示在屏幕的某个位置。
      回归现实：将这些内容从手机屏幕上拉下来简直不可能，通常情况下，下面列出的设备类型是需要我们关注的。      

• 支持HTML：需要基于文本的教程内容（理论和语法）
• 支持Javascript：交互语言编写必须满足的条件。
• 大屏幕:基于文本的教程内容不需要，但是对于编程练习来说很有用。
• 硬件条件上需要有键盘，这样方便代码的录入。
• 浏览器需要支持最新的Flexbox specification (否则，练习所编写的代码也不会运行)o可以满足所有这些要求的设备对于我们的项目而言是非常理想的。

但是我们有一-个严肃的问题。就在我写这篇文章的同时，最新的Flexbox specification 只有Chrome Canary支持，Chrome Canary几乎不会限制我们对网站的多媒体设计。如果这是一个真实的网站，我们将面临一些艰难的选择。假如我们不想用JavaScript编写一个Flexbox布局引擎，那么我们就只能选. 择Chrome Canary作为唯一的浏览器， 因为只有在这里，练习所写的代码，才会运行。
      然而，根据我们的内容清单和设备分类，我们确实可以提供有价值的文本内容(lexbox理论、语法等),接下来只有当实际需要的时候提供一-些其他的交互元素(即当这些所需的特性可以实现时)。
找到做这件事的完美方式是非常复杂的，同时也超出了本章内容的范围，但是想象一下我们使用JavaScript在浏览器中测试是否支持某种Flexbox特性。如果可以支持的话，那么这些交互成分就可以加入到这个网站中来。