- 1、本文档共7页,可阅读全部内容。
- 2、有哪些信誉好的足球投注网站(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
UI应遵循的三大网站设计原则
触摸优先设计、响应式设计、移动优先设计是UI设计师设计网站应遵循的三大原则,以使网站最大范围地适应各种设备。外文《 HYPERLINK /2012/01/17/designing-well-tempered-web/ \t _blank Designing The Well-Tempered Web》中详细阐述了这三大原则。CSDN对该文进行了编译,内容如下:
随着技术的进化,Web设计的艺术和技巧也在不断进化。新的技术创造了新的挑战,而新的挑战要求新的解决方案。我们通常工作在未知领域,需要给出全新的解决方案。
考虑到有限的Web设计历史,我们必须超越当前的领域去回答更有挑战性的问题。为此,我们可以通过借鉴其他不相关领域的发展历史,如音乐,从中寻求可以帮助我们解决问题的方案。下面将列举一个18世纪早期关于巴赫的一个小故事。
巴赫和《The Well-Tempered Clavier》
1972年,巴赫完成了一部著作《The Well-Tempered Clavier》(《十二平均律钢琴曲集》),分上下两卷,每卷各有24首前奏曲与赋格曲。现在它已被誉为西方音乐历史中最重要作品之一。
在当时,为12个主要的琴键分别谱曲是完全不可能的。而巴赫却从整体上为全部的12个音作曲。正是他的这套《十二平均律钢琴曲集》,最终向人们证明了十二平均律是可以用来作曲的,而且其效果之美妙,以前的人们从未曾领略过。
在这个过程,所采用的解决方案是重新定义了合调的概念。通过修改一定的间隔,使每个琴键稍稍偏离完美的音调,从而产生一种调音系统,允许人们在所有的琴键上演奏出合调的琴乐。牺牲少量的个体品质以达到更完美的整体效果,被称为平均律。
该案例虽与网站设计不相关,但目的是一样的:使每个琴键都稍有缺陷,以便键盘整体表现完美。
UI设计师需要做什么?
最近几年,针对多设备进行设计已成为Web设计领域最令人兴奋的开发工作。以前主要关注网站是否可以在两个不同浏览器上运行正常,现在则转移到它是否可以在具有完全不同特性的多种设备上正常运行,这些设备具有不同的屏幕尺寸、不同的性能、不同的使用环境及不同的界面。
虽然响应式设计和针对设备定制网站可以帮助我们制作出针对不同体验的设计,但仍有很多时候我们必须做??统一的决策。这时,平均律的概念或许有些帮助。
该概念在UI设计中的应用一个简单的过程:为了针对一系列不同设备设计出好的体验,我们必须允许某些界面出现偶尔的不完美。我们必须做出小小的妥协,以保证我们的设计可以很好地适应其他的环境。
触摸优先设计
具有平均律特性的网站已经将触摸式界面应有到了最近的桌面网站设计中。
在占用面积上,手指要大于鼠标指针,所以手指需要更大的触控区域。为了确保可用性,交互元素需要更大。当交互元素的面积增大后,其他元素也需要相应的增大以保持平衡。这就需要通过margin和padding两个属性来设定。
HYPERLINK /2011/11/gmails-new-look.html \t _blank 新版Gmail设计有大量的空白区域,对按钮设定了额外的Padding。虽然它只是针对桌面的设计,但也可以很好地兼容触摸设备。
iPad在触摸界面和不同大小桌面屏幕之间搭建了桥梁。而iPad的流行加速了触摸屏在桌面界面设计中的影响。如果你观察一些刚经过重新设计的著名 产品,如Gmail,Twitter,你就会发现Web设计已有明显的不同。他们看上去更丰满。有更多的空白区域,按钮有更多的Padding,上面 的元素整体看来增大了不少。当然,其他的因素也在发挥作用,比如桌面屏幕尺寸的稳定增长。
当为鼠标提供了过多的空间,而对于手指来说,空间刚刚好时,我们的设计就算完成了。我们允许与某体验的标准有稍稍的偏差,以获得对所有可能体验的更好支持。
有一点值得提出,对触摸友好的UI对于使用桌面鼠标的用户来说,更易用。容易触摸操控的按钮,更容易被点击。
微软 HYPERLINK /2012/0828/1346137733759.jpg \t _blank Metro风格的设计受到了触摸优先思想的影响
响应式设计,达到统一设计的目的
虽然关于响应式设计的很多讨论都是关于响应式设计技术的,但响应能力本身并不是最终目标。它是达到目的的一种手段。设计具有响应能力,是为了达到其 他的一些目的。可能为了支持不同的内容,服务于低宽带中传输的图片,在更小的屏幕中更好地展示布局。也可能为了在大范围不同的设备上提供统一的体验。
搭载响应式设计的火车,可以到达统一的用户体验设计的目的地。 Boston Globe网站在这方面做得很棒。
HYPERLINK / \t _blank Boston Globe出色地将响应式设计应用到了大型网站中
响应式设计策略可以使一个简单
您可能关注的文档
- 法律视角下的小额贷款公司制度.doc
- 15种紧急状况的医疗急救知识.doc
- 公司2012年度招聘计划书.doc
- 农业发展纲要.doc
- 呈贡设施农业发展规划.doc
- 发展农业特色产业的做法和成效.doc
- 大工11春《国际贸易》在线作业3.doc
- 七年级体育期末试卷.doc
- GPJ96 3-C型 加压过滤机在120万吨重介选煤车间的应用.doc
- 顾之川:中华传统文化.ppt
- 《GB/Z 44363-2024致热性 医疗器械热原试验的原理和方法》.pdf
- GB/T 16716.6-2024包装与环境 第6部分:有机循环.pdf
- 中国国家标准 GB/T 44376.1-2024微细气泡技术 水处理应用 第1 部分:亚甲基蓝脱色法评价臭氧微细气泡水发生系统.pdf
- 《GB/T 44376.1-2024微细气泡技术 水处理应用 第1 部分:亚甲基蓝脱色法评价臭氧微细气泡水发生系统》.pdf
- GB/T 44376.1-2024微细气泡技术 水处理应用 第1 部分:亚甲基蓝脱色法评价臭氧微细气泡水发生系统.pdf
- 中国国家标准 GB/T 44315-2024科技馆展品设计通用要求.pdf
- GB/T 44305.2-2024塑料 增塑聚氯乙烯(PVC-P)模塑和挤塑材料 第2部分:试样制备和性能测定.pdf
- 《GB/T 44315-2024科技馆展品设计通用要求》.pdf
- GB/T 44315-2024科技馆展品设计通用要求.pdf
- GB/T 39560.9-2024电子电气产品中某些物质的测定 第9 部分:气相色谱-质谱法(GC-MS)测定聚合物中的六溴环十二烷.pdf
文档评论(0)