此外，我们之前的又是为了触屏移动设备而设计一文也可以在触控体验设计方面为巨匠带来一些参考。

　　响应式设计方案

　　市道上有良多关于这个话题的谈判，不外它们年夜多是环绕着各类相关的开起身术来进行的。其实，“响应化”自己不是目的，我们真正需要的是一种机制，它能够辅佐网站按照分歧的设备平台对内容、媒体文件和结构结构进行响应的调整与优化，年夜而使网站在各类情形下都能为用户供给一种最优且相对统一的体验模式。

　　响应式方案离不开全局化的用户体验设计。正像我们在前文傍边提到的，这类方案当然可以在必然水平上辅佐我们面向分歧的情形调整设计方案，但不是所有的UI元素或模块都可以被赋予弹性，我们仍然需要在良多处所经由过程“好脾性”的设计思绪权衡出一种最优的全局化解决之道。在这方面，波士顿举世报(Boston Globe’s)的网站就是一个不错的例子。

　　列位可以试着使用分歧类型的设备来访谒这个站点，或是直接在桌面设备中不竭调整浏览器窗口的尺寸，以不雅察看页面的响应化调整轨则。

　　响应式策略可以使统一套设计方案顺应于各类类型的显示设备，用户甚至可以经由过程老旧的苹不美观Newton掌上电脑来浏览波士顿举世报的页面。不外，这不只是前端开发方面的成就，现实上，这种策略所浮现出的具有高度顺应性的设计思绪步崆最主要的。

　　我想，如不美观我们只需要面向桌面设备进行设计，那么最终的方案应该是加倍纯粹的，搜罗视觉效不美观及交互体验等方面。事实?下场，在这种情形下，我们拥有足够的时刻和资原本使一种设计方案尽量趋于完美。一旦要考虑到分歧类型的设备情形，我们就必需做出某种水平的权衡，以便“弹奏出全数调式”。

　　有乐趣的同窗不妨参考我们之前的相关文章，对响应式Web设计的概念及实践体例进行深切体味：

　　什么是响应式Web设计?若何进行?

　　经由过程CSS3 Media Query实现响应式Web设计

　　走出移动互联网的迷宫 - 网站移动化的体例策略

　　案例进修 - 响应式网站的产物需乞降设计流程详解

　　移动优先的设计

　　之前的话题首要倾向于页面的视觉设计。其实，“好脾性”的设计思绪同样可以表此刻产物设计、用户体验、信息架构等诸多方面。接下来让我们来看看产物设计傍边的移动优先策略。

　　在这个概念里，我们会年夜移动的角度入手起头产物设计工作，并始终环绕着移动平台的软硬件特征来打造最合适移动设备上下文情形的产物根基功能。正如Luke Wroblewski在《移动优先》一书中所说：

　　如不美观一个团队以移动优先为策略原则开展设计工作，其产物最终所带来的体验将是具有高度的使命驱动性的。用户可以将注重力聚焦在需要完成的关头使命傍边，而不会被传统气概的桌面版本网站产物傍边过多的无关身分所干扰。这对于产物的用户体验及营业成长都是有益处的。

　　对这种设计策略进行扩展，使其超越移动体验典型畴，并上升到整个产物的层面，我们就可以在它身上发现很较着的“好脾性”特征。Twitter比来的一次改版傍边就很好的浮现出了这方面的概念。

　　Twitter这轮改版的一个首要目的就是在分歧类型的设备傍边实现具有一致性的体验模式。连结界面外不美观的统一只是其中的一个方面，更主要的是能否在整个产物体验的层面上实现这一方针。移动优先的设计策略可以保证相关的工作能够朝着正确的标的目的前进。

　　我们可以在Twitter的此次改版傍边很较着的感应感染到移动化的体验模式对于整个产物设计方案的影响浸染。例如其客户端底部的“Home”、“Connect”、“Discover”、“Me”这四个导航标签，年夜数目上来嗣魅正罕梢拿于移动设备的小尺寸屏幕规格，这正浮现出了产物的信息架构针对移动情形所进行的优化调整。而同样的导航结构也呈此刻了Twitter桌面版的网站傍边。我们可以在膳缦沔的截图傍边看到，虽然桌面情形相对于移动设备来说拥有更年夜的界面显示空间，但这些导航元素的尺寸及外不美观效不美观却几乎与客户端傍边的完全一致，只是在整体结构方面进行了调整。可以说，整个桌面版的设计方案在某种水平上就是为了能够连结与移动版本的体验一致性而称心受限的。

　　留心狼

　　在巴赫平均律之前的自然律系统中，那些不在当前调式傍边的音符被弹奏出来的时辰，凡是会发生一种很是难听的效不美观。那时的音乐家们喜欢将这种情形例如成狼叫。

　　借鉴这个凶残的概念，我们可以将用户界面傍边那些在某些平台傍边合用，但在其他情形中就会破损产物体验的视觉或交互元素称之为“狼”。当你使用手机浏览Web页面的时辰，那些本是为了鼠标指针而设计的难以经由过程手指切确触摸到的链接，那些细小到几乎无法辨识外形的文字，那些依靠鼠标悬停而触发显示的UI元素...这些都是移动设备上下文情形傍边的Web界面之狼。

　　纽约时报的单篇文章页面中，正文右侧凡是是一组分享链接，其中每个链接单元的高度是12像素。当我们在iPhone中浏览这个页面的时辰，会发现这样的尺寸确实很轻易造成误操作，你几乎难以切确地触摸到正确的方针对象。对于这些功能性质的链接单元，最好可以按照苹不美观在iOS人机界面设计规范傍边所要求的那样，在宽度和高度上都至少给到44像素。

　　对于下图所示的导航结构，移动设备用户普遍暗示压力很年夜。这种下拉菜单形式的UI组件在传统设备傍边长短经常见的，可是因为它需要经由过程鼠标悬停的体例来触发弹出，所以在触屏移动设备傍边，这种形式凡是无法正常的工作。

　　推荐阅读

　　<b>效仿者蜂拥而至 解读Birchbox网站模式的独特魅力</b>

纽约有一个神奇的网站，它名叫Birchbox。2010年秋天成立的它，在这一年半来急剧扩张：拥有10多万会员;与130多个品牌成立合作关系;融资额达到1190万美元;员工年夜最初的3名增添到现在的50人，公司地址搬迁了四次;其怪>>>详细阅读

本文标题：<b>网站设计心理学与音乐研究：设计好脾气的Web页面</b>

地址：http://www.lgo100.com/a/22/20120314/40360.html

 1/2    1  2 下一页