我要投稿
当前位置:首页 > 经验分享 > UI应遵循的三大网站设计原则
UI应遵循的三大网站设计原则
2018-7-13 17:53:00   作者:糖糖吃鱼   人气:0次  评论(0)
所属标签: 学习经验 

  最近几年,针对多设备进行设计已成为Web设计领域最令人兴奋的开发工作。以前主要关注网站是否可以在两个不同浏览器上运行正常,现在则转移到它是否可以在具有完全不同特性的多种设备上正常运行,这些设备具有不同的屏幕尺寸、不同的性能、不同的使用环境及不同的界面。
  
  虽然响应式设计和针对设备定制网站可以帮助我们制作出针对不同体验的设计,但仍有很多时候我们必须做出统一的决策。这时,"平均律"的概念或许有些帮助。
  

学习经验

  该概念在ui设计中的应用一个简单的过程:为了针对一系列不同设备设计出好的体验,我们必须允许某些界面出现偶尔的不完美。我们必须做出小小的妥协,以保证我们的设计可以很好地适应其他的环境。
  
  触摸优先设计
  
  具有"平均律"特性的网站已经将触摸式界面应有到了最近的桌面网站设计中。
  
  在占用面积上,手指要大于鼠标指针,所以手指需要更大的触控区域。为了确保可用性,交互元素需要更大。当交互元素的面积增大后,其他元素也需要相应的增大以保持平衡。这就需要通过margin和padding两个属性来设定。
  
  新版Gmail设计有大量的空白区域,对按钮设定了额外的Padding。虽然它只是针对桌面的设计,但也可以很好地兼容触摸设备。
  
  iPad在触摸界面和不同大小桌面屏幕之间搭建了桥梁。而iPad的流行加速了触摸屏在桌面界面设计中的影响。如果你观察一些刚经过重新设计的著名产品,如Gmail,Twitter,你就会发现Web设计已有明显的不同。他们看上去更"丰满"。有更多的空白区域,按钮有更多的Padding,上面的元素整体看来增大了不少。当然,其他的因素也在发挥作用,比如桌面屏幕尺寸的稳定增长。
  
  当为鼠标提供了"过多"的空间,而对于手指来说,空间刚刚好时,我们的设计就算完成了。我们允许与某体验的标准有稍稍的偏差,以获得对所有可能体验的更好支持。
  
  有一点值得提出,对触摸友好的UI对于使用桌面鼠标的用户来说,更易用。容易触摸操控的按钮,更容易被点击。
  
  微软Metro风格的设计受到了触摸优先思想的影响
  
  响应式设计,达到统一设计的目的
  
  虽然关于响应式设计的很多讨论都是关于响应式设计技术的,但响应能力本身并不是最终目标。它是达到目的的一种手段。设计具有响应能力,是为了达到其他的一些目的。可能为了支持不同的内容,服务于低宽带中传输的图片,在更小的屏幕中更好地展示布局。也可能为了在大范围不同的设备上提供统一的体验。
  
  
  移动优先设计
  
  之前的案例主要针对图片设计,但"平均律"的概念应该应用于产品设计、用户体验、信息架构中——几乎设计的其他任何领域。让我们看看产品设计及移动优先的设计思想。
  
  从移动设备角度出发开始设计过程,构建可以满足移动环境中各种限制的产品,你需要专注于产品的最重要元素上。


  "当团队进行移动优先设计时,最终是要打造一种体验,该体验主要专注于用户希望完成的最主要任务,没有任何的绕弯子与界面碎片。这对于用户体验和商务都是有利的。"

下面列出了几个注意事项
  
  响应式地思考
  

  即便你并不正在实现一个完全响应式设计,简单地用响应式的方式去思考将会对实现可用的、统一的设计大有帮助。
  
  触摸优先式思考
  
  针对手指点触设计的按钮,同样可以用鼠标来点击。但针对鼠标设计的按钮,用手指触控时就会显得太小了。触控优先式设计,可以确保你的网站和应用很好的迁移到其他环境中。
  
  统一式思考
  
  正如"早测试,经常测试"一样。在设计过程中,应该尽早并经常思考你的设计如何成功运行在不同的设备之上。
  
  移动优先式思考
  
  移动优先设计,可以让你专注于那些关乎你成功的事情上。保持对最重要特性的关注,在不同设备上实现统一的体验就变得更加容易了。
  
  小心
  
  交互行为不会在各种界面中得到统一支持。通过鼠标来完成的功能在触摸设备上可能会有问题。通过触摸来完成的操作可能用鼠标就无法执行。但这并不意味者我们不能使用它们,只是我们应该清楚它们的使用限制。
  
  希望用户可以在不同的设备上使用我们的网站