呼应式原型规划中最常犯的7个过错

呼应式规划现已不只是是一个盛行的规划趋势，这是从桌面端阅读转移至移动端阅读的一次巨大改动。为了从职业现状中生计，网页规划师们不得不支持多屏幕多设备，而一个呼应式战略能够处理适配的问题。

为了保证你的呼应式规划师具有前瞻性的，你需求留意防止呈现以下7个最简单犯的原型过错：

01.不针对屏幕而针对设备规划

依据OpenSignal供给的数据，现在商场上有24，093个不同的安卓设备，还没有算上iOS和其它操作系统的设备。

这难以置信的差异使得针对某一机型进行规划是不可能的。一个聪明的处理办法是专心于屏幕的尺度。

不要从可穿戴设备、手机、平板和台式机的角度进行考虑。将你的原型分红：

• 超小屏幕
• 小屏幕
• 中等屏幕
• 大屏
• 超大屏

特定的屏幕尺度将会在断定原型尺度时供给更可靠的规范，由于不同设备间的差异实在太大了。考虑一切不同的屏幕巨细的手机：有的比小平板还大呢。

此外，专心于屏幕尺度还能防止在设置呼应式的临界点时太依靠设备的尺度，这是我下面要描绘的另一个常见过错。（译者注：此处的临界点是指呼应式网页发作布局改动的要害点，如当屏幕宽度小于480px时加载A款式，当宽度在480-600px之间时加载B款式 。我们不可能也没有必要为每个尺度都做规划，需求做的一般是选定几个临界点做规划。）

02.只依靠设备尺度进行临界点设定

新的设备总是会不断推出，即便你能数得出每个可用设备的临界点，你的呼应式网站将在下一个更大设备呈现的时分变得过小。

就像UXPin的《Web UI最佳实践》中解说过的一样，“树立在规划上，而不是设备”：

从移动优先的战略开端：为最小的屏幕创立原型，然后调大比例。顺带一提，iPhone在竖屏下是320像素宽。

如果你的许多用户都具有可穿戴设备，你需求考虑微型的屏幕，用乃至更小的规划。Apple Watch——继Pebble Time之后最小的设备——仅有272像素的宽度。

当你的规划作业开端感受到压力，添加media queries特性来做任一必要的改动，这样你的规划才干看起来舒服并在每一步中体现杰出。

规划一个最大宽度为2000像素的现已能满意今日一切的可用的最大设备了。依据W3Schools最新的阅读器数据统计，99%的拜访者所用的阅读器远远不到2000像素宽。

依据规划的需求引进呼应临界点，以防止在中心尺度的设备中体会欠安。树立一种能“呼应”屏幕尺度的规划方案，是呼应式规划的天分。

03.忽视触屏操控

触屏操控是很多移动设备的巨大优势之一：它们风趣，它们易用，一起它们还帮你节省时间。不要在某些设备上忽略了它们，由于其它设备不能运用。这儿有一些包含触屏操控的主张：

了解每个设备的最佳实践。在小屏设备上，左下角是大拇指最简单触摸的当地，所以将你点击最频繁的按钮放在这儿。但是对平板来说，由于它们被拿的方法不同，顶部的边角是黄金触摸点。

点击方针（如CTA按钮。译者注：CTA即call to action。）有必要有满足的尺度。一个最小44点的点击区域需服从fat-finger-friendly（译者注：即较粗的手指也能点得到）准则。

元素之间的主张距离为至少23pt，避免点错。

为无hover状况适配。你能够替代点击激活功用，或从一开端揭示hover元素的原生状况。

不要重复造轮子。常用的手势比方滑动用于导航和其他功用，由于它们现已被用户熟知。

04.链接到手机上显现作用欠安的内容

你不能规划让拜访者从链接跳转到其他页面或内容，不管是在你的网站或其它当地。呼应式体会的一大问题就是当与你的呼应式网站链接到非呼应式规划的网页。

如果你的呼应式网站链接到外站，你无法对此做些什么，除非考虑用一个可替换的网站。但是，当链接到你能够操控的网站或资源，包含小网站或合作方的网站，你肯定想要保证它们供给了一系列杰出的呼应式体会。

05.对更大的屏幕缺少方案

我主张先为移动端规划，当并不意味着只是规划移动端。即便更小的屏幕可能更受欢迎，42%的流量依然来自桌面端的拜访者。这两种屏幕尺度均需求被考虑到。

这儿有些来自《原型攻略》的关于考虑“更大的视图”的主张：

你需求做的不只是是将小屏幕的规划扩大。运用额外的空间，加一些新的元素，或从头创立视觉层级。

查看图片的质量——它们可能会在大屏幕中变得含糊。

相似地，查看文字长度的可读性。在45至75字符之间是最优的。你能够用Chris Coyer的书签测验你规划的长宽。

不要把字体放得太大。过大的字体会占用有意义的水平空间，这将导致读者怠慢阅读速度或跳过内容。

06.在不同的屏幕巨细运用一样的导航

同一设备顶用共同的导航肯定是件功德。但别太执迷于一种布局并将其反复地在其它设备上实践。这与呼应式规划的实质是相违反的。

（桌面端）

（移动端）

为坚持共同的用户体会，有些共同性是好的。为了树立一个易被认知的界面，并提示用户怎么运用新设备的界面，某些元素应该保留和本来一样。以下元素应该坚持共同：

• 链接或按钮案牍
• 字体
• 色彩处理

当今，不同的屏幕尺度需求不同的导航系统。以下元素在它们习惯不同屏幕尺度的细微差别时，不应该坚持共同：

• 按钮尺度
• 视觉布局
• 导航功用——包含触屏操控

比方，一个桌面端导航能够固定在屏幕的顶部。当你为移动端屏幕重建布局时，你能够使导航继续呈现并缩小尺度来处理（但坚持一个相似的色彩主题、字体和按钮案牍）。

07.躲藏内容

一个常见的过错观念曾经以为移动端用户是匆忙的，并且只想要“整个网站”的缩小版别。比如联络信息和攻略这类内容被优先考虑，其它内容则被躲藏了。

现在我们知道大多数移动端用户一点也不匆忙，有68%的运用场景仍是在家中。大多数用户想要在移动设备上拜访整个网站，他们想要无内容删减但从头排版的版别。

知道某些人偏好的设备，并不等同于知道他们偏好的内容。如果某内容在一台设备上对用户是重要的，那么很可能在另一台不同设备上对用户也是重要的。

此外，你有必要考虑涉及多个设备的使命流。用户经常在一台设备上开端使命，又在另一设备上完结，期间轮换运用这两台设备。依靠设备的约束内容一起约束了用户怎么交互。

依据渐进增强（注：一种网页规划战略，它着重可拜访性、语义化HTML符号、外部款式表和脚本技能），为不同的屏幕尺度呈现不同内容并区别优先级，但绝不要躲藏或约束内容本身。