您被要求为一个移动应用程序设计个人资料界面。它需要包括个人头像、名字、职位和地点。您开启 Sketch 或其他设计软件,不管您选择什么设计工具设计界面,您最终都可能得到一些资料占位符。也许您会使用简短的虚拟假名代替真实的多用户信息。您为占位符名称输入什么信息似乎并不重要,它不是最终的结果而是一个变数。您开始使用的文字会潜移默化地影响您的布局和风格。它可能会限制您允许自己考虑的选项的范围,或者更严重的是,超出您之前设置的实际限制。

  您可能会想到几个明显的解决方案: 使用一个长占位符名称; 在设计中使用真实资料。虽然这是一个良好的开端,但有必要更深入地探讨这些实践性改进如何既能优化您的设计方案,又能帮您产出可用性更好的产品。
 

 
  不仅仅是设置长的名字资料占位符
 
  这不仅仅是长的名字,地址、新闻、照片等其他信息也要如此处理。当我们围绕有限的资料进行设计时,将单行资料的最大值渗透到我们的设计中。无法处理长串文字是元件在接触真实资料时最基本也是最常见的失败方式。
 
  长度只是实际文字和资料对不完善设计造成压力的方式之一。您也可能会遇到意想不到的换行符,甚至是太短的文字。请注意下面这些我们在处理简单界面资料信息时容易出错的组分。
 

 
  账户个人头像
 
  不要期望多用户会提供一个画质优良的个人头像图片,并配有和界面背景色(如白色)不同的背景颜色。很多多用户可能对上传头像图片根本不感兴趣。有些多用户可能会试图把他们太宽的公司标识挤进那个小正方形或圆形头像区域。您不能解释所有可能的资料,但是如果在 WordPress 网站设计过程的尽早考虑这些不太理想的情景,那么您的输出的稿件将具有更大的可用性。
 

 
  视频或图片的缩图
 
  并不是所有的缩图都符合您所期望的长宽比。有些可能包含与周围页面意外冲突的文字或影像。我所见过的一个常见问题是一个设计精美的主页,其顶部显著地显示了公司标识,然后视频的预设海报影像也包括公司标识,由于和展示缩图比例不同所以看起来很难看。
 

 
  列表标签数量的显著变化
 
  注意包含列表标签的界面,在这些列表中标签的数量可能会发生显著变化。设想一个布局,其中每个界面包含一组标记。一组中可能有三个标签,而另一组可能有 25 个。当一个特定的标签在长度上与其他单元格相差很大时,表格资料在美观和可读性方面也会受到影响。
 

 
  预设元素的空间
 
  当您为您的网站导航建立了一个漂亮的布局,从您的手机到您的 27 寸 iMac 漂亮地显示了不同效果。然后您发现它需要新增一个支持选单项,但没有空间! 我经常从布局两个列表开始制作一个界面。第一个包含访问者需要完成的目标,第二种是需要在屏幕上显示的元素。确保包括从主要内容到广告的所有元素,以及页尾中的隐私链接。特别容易发现一个网站的设计没有考虑到它所包含的广告位置。
 

 
  灵活的设计可以使设计更加亲切
 
  我们不能把大量的时间花在所有能想到的边缘案例上。我们应该更加关注我们所建立的界面、我们使用的工具以及我们所设计的资料的作用。有必要将注意力和测试集中在您的站点最常用的访问方式上。一个界面不可能总是在每个不同尺寸的屏幕中完美展示。不要被限制条件完全控制,灵活的设计可以使设计更加亲切。那些有视力障碍的人可能会使用定制的最小字型大小浏览网页。其他一些浏览器可能会在缩放级别上浏览,从而触发适用于移动装置的响应式布局,甚至在大型桌面浏览器上也会如此。