codecamp

Web开发的中可重用策略

在Web开发中,我们经常会开发一些经常使用的功能(如:登录、注册功能),如果在今后有很多地用都用到那个功能,每次都要去再开发一遍的话,这些重复创造、重复开发的工作是极其降低工资效率的。为了降低在这方面耗费的精力(并且给刺激、有趣的创新部分留下更充裕的时候),开发团队需要可重复利用的设计。


重用是如今应该优先考虑的事。可重用直白的说就是可以多次使用先前开发的应用程序中的某些功能、某些规范、某些概念。而在Web开发中的应用可重用策略可以划分为三种资源库:模式、组件及交互设计的框架体系。这些资源库能让开发团队充分利用丰富的成品资源,从而提高工作的速度和效率。


在团队的可重用策略中,模式、组件和交互设计的框架体系三都扮演着不同的角色,但都举足轻重。


(一) 模式:预期行为的锦囊

设计模式是重用拼图中第一块零件。比如,让我们假设一位正在订票的用户需要输入日期。有哪些支持输入日期的设计呢?一个带自动分析功能的文本框?分别表示年、月、日的三个数字下拉列表?可以直接点选日期的弹出式日历针对同一种行为,不同的选择体现出了不同的设计。当开发团队指定一种最生命他们(及其用户)的设计时,就能将其定为一个械。日后,当团队需要响应类似的行为时,就能以相似的方式进行响应,利用之前的工作成果来满足用户已经确实的需要。


(二) 组件:高效利用可重用的代码

除了模式之外,开发者们还需要一种复合的方式来重用具体的代码。我们选定了可用的设计模式以后,就需要考虑具体的实现问题了。要想让弹出式日历能顺利工作,屏幕上必须得显示日期。日历必须得响应鼠标的点击。它的外观还得与其他的界面元素保持一致,这些都是组件大显身手的地方。


组件会从像素级别来详细指定设计响应。它们通常以代码的形式来体现,因此组件实际上也体现了具体的交互行为。它们是具备了诸如字体、颜色和布局等样式元素的功能性设计方案。


开发人员用组件来拼凑出设计的所有细节。组件构完成以后,就变成了随时待命的现在元素,能轻易地嵌入到任何新界面中去。这使得每一个环节的开发速度都得到了提高,从早期的原型阶段到最后的部署阶段莫不如此。简而言之,组件就是将设计模式进行完整代码化、模块化后得到的可执行版本。


(三) 框架体系:最后的拼图定乾坤

交互设计的框架体系是这三位一体中的最新成员。如果说设计模式是某个常见问题的通用解决方案,那么交互设计的框架体系则是一系列设计模式再加上其他元素的信息,用以指导完整的系统或站点上下文的设计。


和人体一样,每一个Web应用都由一系列相互合作的子系统所组成。每一个子系统都包含许多独立的单元,每个单元都具有各自的功能和用途。如果对这些成功的(和不成功的)网站及应用进行详细的解剖和分析,我们不仅能够标识出那些在不同环境下满足用户需求的常用元素,而且能够更加深刻地理解人类行为,从而改善这些标准,同时在不牺牲可用性的前提下将我们的设计提升到新的高度。


框架体系不去为“狭隘的”问题提供“狭隘的”解决方案,它处理的是较为复杂的问题。它从产品的整体背景出发,为设计确定指导方针。框架系统是一种高度的抽象。它不具体的品牌化或视觉设计需需求——那些是组件来完成的事件。相应地,组件又以独立的设计模式 为基础。确切地说,框架体系是某种范围更广的结构化系统,从一开始就能帮助设计师对模式进行选择。


这三者实施成功,可以使团队快速地拼凑起有效的设计雏形,从而达到让设计尽快启航的目的,缩短开发时间,而且可以周全地涵盖一切有利于提升用户体验的细节和精妙之处。


交互设计模式中的六个原理
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }