Archive

Archive for the ‘UI&UE’ Category

企业级Web应用用户界面设计杂谈

July 20th, 2009

第一章:UI浅论

问题:什么是UI,什么又是UI设计师?

在我的职业生涯中,听到的最多的字眼就是“美化一下”。可以说,在2004年以前,是很少有人听过UI这个词的。那么,什么是UI呢?可能会有人说 “User-interface, 用户界面”,哦,原来是界面——画面——用户能看到的东西。确实如此么?不,UI除了用户界面,还有更深层次的含义,那就是“人机接口”,界面是用户和计 算机系统交互的桥梁和纽带,不止我们看到的是界面,鼠标、键盘、Mic、显示器,甚至计算机的Power开关,界面无所不在,没有了界面,你不止是无法去 看,而是无法去用。那么,UI的深层次含义是什么?对,UI的深层次含义就是“交互”,是“使用”,而不是“看”。这个观念很重要,同时也带出了“UI设 计师”这一职位的真正含义:UI设计师绝不是美工(或者说绝不是仅仅做“美化”工作而已),UI设计师是一个技术岗位而非艺术岗位,如果考察一名UI设计 师的能力素质模型,那么他应该同时具备4个维度的能力:

1、沟通和文档撰写能力:如果说UI是人与机器交互的桥梁和纽带,那么UI设计师就是软件设计开发人员和最终用户时间交互的桥梁和纽带,如果UI 设计师不能具备很好的沟通和理解能力,不能撰写出优秀的指导性原则和规范,那么,他将无法体现出自己对于开发人员和客户的双重价值,也无法完成他的本职工 作。

2、过硬的技术能力:你可以不会写Java,但你绝对不可以不清楚Java是什么,他能够实现什么。即使你不能写代码,但你起码要懂得如何去“实 现”。举个例子,你要做一个Grid控件,首先,你应该清楚,到底有哪几种数据格式,以及其存储方式:既可以通过HTML的Mark来获取数据,亦可以通 过JSON对象或Array,又或者是XML甚至于字符串。其次,你要知道在Server端实现和在Client端实现到底哪个更适合当前的环境。这些都 要依靠过硬对技术和丰富的经验,不懂技术的UI设计师,既做不出合理的设计,也不可能和开发人员做到有效的沟通。简言之,UI设计师起码要精通主流的表现 层开发技术(如果是做Web表现层,一般需要精通HTML、CSS、Javascript、XML技术,甚至JSP、Java也要达到工作层),对于市面 主流的设计模式,技术路线以及开源框架都要有足够的了解。可以说,UI设计师在技术素质能力方面,要尽可能的朝着“表现层架构师”的方向去努力。

3、图形设计能力和原型开发:UI设计师一生中从事的最多的工作应该就是图形和原型设计,那么,首先说说什么是原型设计。原型法是迭代式开发中设 计阶段常用的手段,原型设计应该贯穿需求、概要设计和详细设计这三个阶段。开发原型的目的是,把设计转为用户可以看懂的“界面语言”,同时也对开发人员起 到一定的指导作用(甚至可以作为开发的一部分)。用户界面原型更显示的价值体现就是,它可以帮助软件设计人员提早发现设计各个阶段的缺陷,在开发前解决这 些潜在的问题,大幅降低软件开发的风险和成本。这与传统的瀑布式开发有了本质的区别,目前国内大多数公司仍然采用的是瀑布式开发方式,并且将UI设计放在 开发阶段的后期来进行。这不仅使UI设计师无法充分发挥自己所长,只能做做“美化工作”亡羊补牢,更使得开发出的产品往往存在致命的设计缺陷而无法满足客 户需求。所以,各公司中的“美工”是软件开发方法的落后和不完善早就的,而非“美工”或UI设计师这个职业本身。我们再来说一下图形设计能力,其实,UI 设计师只是个泛称,在UI设计行业内部,还大致分为以下几种角色:可用性和交互设计师、视觉企划、用户体验研究人员、图形用户界面设计师等。大家通常理解 的UI设计师,其实是GUI设计师(例如国内的Rokey,他就是一名非常优秀的GUI设计师,目前供职于Microsoft),GUI设计师的主要工作 就是视觉定位以及创作。稍后的章节会详细介绍GUI设计师的职责以及日常工作。如果UI设计师不具备过硬的图形创作能力,那么,他根本无法表达他心目中的 美,也就无从谈起“交流”了。图形设计能力,是每一名UI设计师最初具备的,最基础的能力。也是最能够衡量一名UI设计师能力水平的部分。

4、人因学理论和认知心理学:这个概念虽然有些大,但却是每一名UI设计师在事业稳固后毕生都要努力去探索的领域、可以说,设计的根本就是“人 ”,做人本的界面,自然需要了解人,了解人的行为。例如,你不可能设计这样一个界面,在同一时间同一个界面上的不同位置显示两条重要的提示信息——因为, 人,在同一时间的关注点只能由一个,这是生理决定的,而不是某个人的主观臆断。再举个例子,为什么Windows每次一次版本升级或多或少都会找到以前的 影子,你可能会说,这是Microsoft的设计风格。不,那不是风格,而是一种习惯,以前是Microsoft的习惯,现在,你用了Windows,那 么,你也有了这种习惯。Apple和Microsoft的操作系统孰优孰劣?答案是,随你喜欢。是啊,多么简单的一个道理——喜欢,喜欢是一种习惯,你又 如何能笃定你认为的“正确”的设计恰好是人们所喜欢的呢?这里可以稍带提一下Extjs,Ext的风格,简言之,就是桌面应用的传统交互风格 (WMIP),而Web的风格是什么?如果要我来说,我更倾向于Web是一本翻开的杂志,一片展现设计师才华的热土,为什么这样说呢?因为Web的不确定 和开放性。以我的经验而言,WebUI设计,是所有软件UI设计领域中最困难的,也是限制最多的(往往这些限制还存在不确定性),一名优秀的WebUI设 计师,即使转而做桌面程序UI设计或移动设备界面设计,也是相对比较容易成功的。因此,作为WebUI设计师,排斥桌面UI风格是可以理解的,正是源自于 他的习惯,他的“喜欢”。后面的章节会详细的阐述有关于人因学和人本界面相关的理论,在此就不赘述了。

那么,至此,大家应该大概了解了UI和UI设计师这两个名字的内在含义。关于“美工”的问题,也应该有了自己的结论,我就不再做解释了。再说一个 题外话:UI设计师在我目前供职的公司的职位体系中是比较高的技术职位,相当于高级软件工程师,需要有3年以上行业经验方能胜任;而资深UI设计师是与软 件设计师平级的,他们共同的上层职位是架构师。这跟某些公司所招收的“美工”是有很大区别的。

第二章:UI设计基础——图形设计

1、色彩设计:

美学相关的知识(色彩构成、平面构成等等)我就不再赘述了,相信从事此类行业的人员无人不知无人不晓了。这里简要说说WebApp设计中,色彩以及构图的特别之处吧。

首先是色彩。从事过广告和印刷业设计工作的人员应该都接触过一种东西,那就是标准色板。颜色是什么?你所看到的未必就是真的,反言之,真的你未必 会看得到,呵呵,说的有些抽象了。还是举个实际例子吧,#f0f0f0这个很浅的灰色,目前80%的客户都已经升级到LCD显示器了,而大部分LCD显示 器是无法正确显示这个的,即使显示了,各款显示器也会有很大的差异,为什么会这样?源于LCD的面板类型,LCD面板大概分为以下几种类型:NT、VA、 IPS。VA和IPS面板的显示能力都可与CRT媲美了,虽然价格比较高,但其超大的可视角度(178)和完全的色彩还原,实为设计师们抛弃CRT的一剂 强心剂(当然,大多数专业的图形设计师,这辈子都无法舍弃钻石珑CRT,呵呵,不一样就是不一样)。而NT面板占当前市场的绝大部分,原因就是它响应速度 快,造价低廉。22寸的LCD只卖2000元不到,不用看都知道其采用的一定是造价低廉的NT面板,NT面板由于其固有的技术限制,其显示能力仅仅是 16.2M色(目前的16.7M色NT面板应该是采用震荡模拟的方式实现的),颜色是设计师的命根子,缺颜色,就意味着你苦心打造的设计很可能到了客户那 里完全走了样。我曾见过很多界面,选用的都是这些浅浅的灰色,看起来倒是很淡雅,但是,你真的考虑到了用户实际工作环境么?假如他用的恰好是一款不怎么出 彩的廉价LCD,那你的设计岂不是要让人嗤之以鼻了?综上所述,首先,设计师必须保证自己的设计有很好的易曲性——在各种复杂环境下都要保证“可用”且不 出现严重的视觉干扰。你需要至少在CRT和NT面板的LCD上检查自己设计,看看是否有因为缺色而导致的布局异常和视觉干扰,在这里,我不得不BS一下 Microsoft的live mail,在缺色的NT面板下,完全走了样,既看不出边框,也没有了底色,这绝对是失败的视觉设计,相比之下,Yahoo!mail的设计就要好上百倍了 (包括二者的Portal也同样如此)。

除了使用环境的硬件差异,还有一点就是色彩设置的差异(甚至有时候是显卡太差导致的),那种只支持增强16位色的PCI插口显卡基本已经绝种了, 要知道,那可是奔腾MMX时代的经典之作。目前最底端的显卡,也支持至少24位真彩色了,而支持32位色的显卡更是遍地都是。但是,仍然有人在不知情(“ 不会”使用电脑的软件用户真不占少数)的情况下使用了16位增强色的设置,带来的后果呢,自然是难看的等高线和恶心的色彩搭配。

综上所述,因为WebUI的受众十分广泛且不确定,而由于技术架构的特点,我们不能也不想对最终用户要求什么(如果要求人家装这改那的,还不如做 个Setup来得实际)。因此,充分保证你的设计的易曲性,是每一名WebUI设计师在作视觉设计时首先应该把握好的一个尺度。桌面应用由于其硬件环境的 可控性,是可以超前和华丽的,但是,Web设计,尤其是基于Web的企业级应用的用户界面设计,就必须要让自己随时保持清醒的头脑。看看Javaeye的 界面,它很朴素但很美观,我相信,没有人会对他特别的喜欢或者特别的厌恶,如果搞一个投票,相信80%的人都会表示接受,而另外20%的人应该会表示无所 谓。这就是UI视觉设计中追求的80/20原则,我们不需要特别华丽的外观,只要80%以上的人满意。这里再提一下Ext,扪心自问,有多少人是被他的外 观吸引的呢?外观的喜好会让人产生强烈的先入为主的观念,这也正是为什么大多数应用软件都喜欢在外观上求突破做概念的原因了(好多软件版本升级最大的改进 便是外观)。但是,行业软件绝对不是以外观的华丽来取胜的,或者说,当前国内市场上,行业软件尚未达到那种只能在外观上寻求突破的高度。因此,作为应用软 件领域的UI设计师,你可以去做做概念,吸引一下人们的眼球,来获取一席之地。但行业软件的UI设计师绝对不应该把自己主要的精力放在视觉设计上,这不仅 会让你迷失方向,也会让你们的产品迷失方向。

2、构图和视觉风格设计:

我们只讨论以下三类常见的应用,至于3D界面和虚拟现实暂不讨论了,它们是:Web应用、桌面应用、移动设备。

首先我们来看一下桌面应用,可以这样说,操作系统是桌面用户界面设计的领头军,换言之,UI设计师在进行桌面UI设计时,首先应该考虑的就是操作 系统环境。而往往,某个特定软件环境下的桌面应用,UI也是有诸多限制的,这个限制,就是系统固有的交互风格设定。举例来说,我们经常会在看到某一软件界 面后这样说“哇,还是Mac风格的好看!”“这个是用.Net开发的吧”“Swing做的破东西太难看了,还贼慢”,为什么会出现这样的情况呢?因为,大 多数情况下,我们在某个操作系统环境下进行软件的设计与开发,其组件和控件必然会不可避免的使用操作系统自身提供的UI API,也就是说,无论你做什么样的软件,都需要遵从相关操作系统用户界面的开发规范。Windows有个Offcial Reference,在MSDN上。同样的,Apple,Java乃至Nokia,他们都有相应的长篇累牍的API文档和开发规范。那么,这里又不得不提 到了Ext,Ext的API文档是什么?呵呵,它与以上这些操作系统的GUI规范无异,它的API文档就是它的开发规范。所以,我曾经这样讲“Ext再怎 么折腾,也是Ext”,现在各位应该真正了解我的意思了吧。Ext在我看来,已经不是Web UI了,我更倾向于把它归结为桌面UI的Windows系列内。桌面UI有个最基本的衡量标准WIMP(window、icon、menu、 pointer),很明显的,Ext是桌面UI风格。而它的交互方式和Windows如出一辙,因此,我把它定位为基于浏览器的、Windows风格的桌 面UI库。

总结一下,桌面应用的常见布局,就是:多为框架结构,由Grid、Toolbar、Menu、Form、Icon等控件构成。

再来看一下Web应用,我曾不止一次的提到这样一个观点,那就是,Web是自由且开放的。正因为其开放性,才有了今天的Ext、Ajax以及 Thin Client和Rich Client之争。Web设计到底应该是怎样的?这个没有定论,因为Web是大家的Web,存在即合理。Web设计,最应该考虑的就是“设计的上下文”, 在一个完全开放的平台上进行设计,就如同在一张白纸上作画。最大的限制不是技术,而是设计师本身。只有设计师能够决定自己的设计究竟该如何去做,同样,也 只有他的能力会限制自己的设计。结合上下文关系,如果你开发的是Web mail程序,对于多年使用Outlook已经形成根深蒂固的使用习惯的用户来说,你要如何做这样的界面设计?开发一个全新的无人触及的新奇东东么?不, 那背离了设计的人本本质,所以,满足用户最简单的办法就是,在Web上设计开发一个与Outlook风格和外观类似的应用,让用户完全没有压力,在熟悉地 环境下高效的开展自己的工作。那么,如果你要开发的是一个新闻发布系统,自然就要符合用户对于Web的既定认识和习惯,把应用设计得如同报纸、杂志一般, 并且提供良好的内容分类和搜索,以期让用户很容易的找到自己想要的资源,在最短的时间内获取更多有价值的信息(RSS和Portal都是因此而产生的)。 再比如,你要设计开发的是一款信息管理系统,那么,很可能高效方便的增删改功能和强大的报表、查询系统,才是UI设计首先需要考虑的(桌面风格的UI很适 合做此类应用)。又或者,你要开发一个体现出业务流程性的庞大复杂的行业应用,那么,体现出行业解决方案的高度概念性和软件对于业务流程的规范和指导作 用,这是在设计UI时主要需要考虑的。而所有这些,在Web上统统可以实现,这要归功于Ajax,归功于全世界的开发者和设计师的共同努力。

总结一下,Web界面的常用布局——如果说到传统,那么,自然是平板式的文本流(Web在设计之初就是为了研究人员之间文档的共享和查看)。但 是,Web发展到今天,我真的不知道该如何去总结它的布局风格了。只能说,常见的有:Banner-navi-content布局(多见于网站和多数 Web应用),左右框架式布局(常见于基于内容和数据维护的Web应用)、Portal布局(企业Portal或门户)等等。

最后,说一下移动设备的用户界面。典型的就是手机上的应用软件,颜色和尺寸以及图形处理性能是其最主要的限制。基本上,在各个平台上开发应用程 序,都要遵从平台的开发指南和规范,而风格大致也都是与操作系统本身一致的,再此不作赘述了。其实,之所以单独提一下移动设备,是因为某些行业软件还需要 考虑PDA和手机用户的需要,这也成为我们在设计风格定位和技术选型上的一个制约条件。

3、图标、CSS、结构与表现分离:

图标按其创作风格,大致可分为两种:矢量图标和像素图标。在没有Alpha通道的几年前,图标几乎都是像素风格的,生硬而简洁(例如 windows2000的图标),但是十分耐看。近年来,随着Alpha通道逐渐普及,图标开始变得越来越绚丽(主要归功于Apple),越来越写实,设 计师们为了创造出更加绚丽的图标,逐渐改用矢量设计软件来进行创作。WindowsXP风格的图标就是矢量图标。绘制图标几乎成了所有UI设计师的看家本 事,也是衡量一名UI设计师在GUI设计方面能力水平的标尺。方寸之地方显英雄本色,呵呵。那么,图标除了好看以外,还有别的什么功能么?其实,图标在图 形用户界面的主要作用是辅助识别,每个人在成长过程中,最先认识事物是通过对其轮廓的识别,而不是靠文字。因此,图标多会采用最为简洁的方式表现出事物的 功能和特点:比如,突起的东西表示它应该是可以点击的,小信封表示这是一封邮件,放大镜表示这里是搜索。一直以来,图标都在尽可能的贴近实际,但是,并不 是所有的Web上的事物都可以找到现实中的存在。学习能力是人类与生俱来的一种能力,初遇Web的人类开始不断的学习和了解这个世界,他们知道了什么是鼠 标指针,什么叫光标,什么是链接,什么又是滚动条。正是人类不断的认知,促成了习惯,也就形成了如今的各类用户界面风格。最早的Web是没有图标的,或者 说,在Web上,图标的概念和桌面UI完全不同。WebUI中,图标的作用往往是辅助说明,而非“点击”,这与桌面UI中图标的功能大相径庭。因此,大家 可以仔细看一下,大部分传统的WebUI中,是绝对不会出现可以点击的图标的(论坛的表情符号除外。。)。WebUI更习惯以文本的方式来展示信息,以带 有下划线的文本来表示此处是链接可点击。

综上所述,WebUI中的图标和桌面应用的图标有着固有的本质区别,因此,照搬桌面UI的设计往往会将用户引入错误的习惯当中,使用户想当然的认 为WebUI就应该那样去做,这对Web是不公平的,对WebUI设计更是极大的讽刺。要知道,Toolbar和Menu根本就不是WebUI的必需品 ——包括图标在内。

再来看看CSS,CSS是什么?最早,它是出现在印刷业当中的,后来才被引入Web,用来对文档格式化。提到CSS,就不得不提到结构与表现分 离。说到这个,可能有人就会想到了,网站的裸奔节,呵呵。对于结构与表现到底怎么个分离法,我相信各位都有自己的见解。我对此的理解是,Web不仅仅是 CSS+HTML,还有各种服务器端技术呢。其实,与其让HTML和CSS做到结构与表现分离倒不如让开发人员在编码的时候,做到结构与表现分离。我并不 是结构与表现分离这种思想的坚决拥护者,我会在必要的时候用Table去做布局,即使HTML代码增多了,那又如何,我换来的是良好的兼容性,再也不用特 别去关注各个浏览器在CSS解析和渲染上的微小差异,这么做值得。只要通过某种方式,让开发人员只需要书写简单的Tag就可以开发页面,谁还会去关注 HTML和CSS的结构与表现分离呢?当然,tag的封装不止是这么一个原因而已,稍后的章节我会详细论述。

每一个UI设计师,都是从处理图片开始职业生涯的,慢慢的,他们发现,为什么每一次自己的设计都会让开发人员眉头紧锁说无法实现或十分困难呢?技 术到底是怎样的呢?后来,UI设计师们学会了HTML,哦~ 原来HTML是这样地,他们的设计开始变得更加实际了,他们不仅能够处理和设计图片,同时也能够为开发人员提供必要的HTML支持了。再后来,他们发现, 为什么自己的设计加载速度总是那么的慢,而别人的设计加载起来这么快呢?后来,他们慢慢懂得了切图,懂得了CSS。后来的后来,他们不仅懂得HTML和 CSS,而且还能够考虑到性能和兼容性,并开始注意编码的艺术,知道了什么叫做设计模式,什么叫做抽象和封装。至此,他们才真正的把自己提升到了 WebUI设计师的高度。他们发现自己越来越懒,宁可通过CSS复杂的编码来实现一个特效,也不愿去花时间绘制一个图片(比如阴影)。他们写的代码越来越 少,CSS越来越多,慢慢的,结构与表现分离了,HTML变成了通篇的DIV和UL,CSS文件如天书一般洋洋洒洒数十kb。因此,结构与表现分离是一个 思想上的自然演变过程。我看到今天,有那么多的设计师以此为准则、以此为规范,不禁感慨,WebUI不是那样的,Table无罪。当你因为无法用 DIV+CSS实现某种布局转而引入大量的JS或干脆换个设计的时候,这么做值得么?

总结一下,CSS无疑给了WebUI设计师更大的发展空间,它是WebUI设计师的一把利剑,当然它同样也是一把双刃剑。过份依赖CSS只会让你 的设计越来越简洁、越来越无趣,这就是CSS下的迷失。图片不是罪,如果你不想自己的灵感一点点的枯竭,那么,重新拾起图片吧,你会发现设计原来可以更美 的(参见Vista相关网站,设计可以更美的)。这里再小小的提一下Ext,虽然它自带主题的支持,但是,它真能够做到让设计师随心所欲么?想随心所欲又 要付出多大的代价呢?

本章结论,WebUI的图形设计,其自由度是由交互风格和技术架构双重作用决定的。限制了交互风格和技术架构,就等于限制了图形设计风格,也就相 当于限制了UI设计师的发挥。因此,让UI设计师来选择和决定交互风格和技术架构是UI设计不可或缺的关键一步。只有真正从用户业务的角度出发,合理的定 位交互风格和技术架构,才有可能做出真正符合用户习惯和需求的界面。设计师真正需要驾驭的不是技术而是设计本身。因此,在这里,我想说:永远不要在技术面 前迷失了方向。是设计去选择技术,而不应该让技术来决定设计。

第三章: UI设计基础——可用性和交互设计

Temp:

“您需要什么样的界面?”大多数用户对此的回答几乎都是“大气点儿”、“漂亮点儿”、“用着方便”,这时候你会怎么去做?这是你想要的答案么?这 时候,“美工”往往都会收到这样的任务——做几套效果图给用户选一个,要做的细一点儿,跟最终实现的效果一样。这应该是国内大部分软件公司都会优先采用的 做法,那么,这真的就正确么?答案是否定的。首先,对于某种特定场合的应用来说,并不是只有一套界面最合适,界面这东西,就不存在完美一说,尤其是受众来 自不同年龄层次和社会层次的情况下。而,往往客户方代表只有少数几个人,有决定权的更是仅有一人而已。他的决定,往往只代表他的主观想法,作为UI设计 师,做出多套图形设计效果图让“他”来选择,这本身就是非常不负责任的。我们常戏称自己为搞“大众艺术”的,原因就是,我们的设计要符合大多数人的喜好和 习惯,而不是特定的某个人,来宣扬他的个性。那么,说了这么多,正确的做法应该是什么呢?首先,UI设计师应该运用自己的行业经验,为用户确立一个最保守 的交互风格设计。那么,什么又是交互风格设计呢?简言之,桌面应用和Web应用就是两种交互风格,针对不同用户和不同应用,首先应该为他确定的就是交互风 格,这往往可以通过简单的图形就足以概括。比如,在纸张或白板上描绘一个草图,再创建若干典型用例,图解给用户,看看是否符合用户的业务习惯和使用场景。 这就是“概念设计阶段”,你可以选用的道具有很多:Flash、PPT、白板、纸张、甚至与笔和墨水瓶,充分发挥你的想象力和沟通能力,我们要的就是最终 沟通的结果,只有交互方式确立了,你才可以真正的开始设计(这时候你会发现,那种刚听到需求就开始做效果的做法是多么的冒险)。

//TODO
//帖子应该会很长,暂时我只能想到哪儿说到哪儿了,呵呵,大家不要着急,我会不断补充的。关于原型,一说就止不住了。。。应该把原型设计相关的内容放在后面的章节来详细讲解。

先把目录留下,免得写乱了。。

第一章: UI浅论 —— 主要讲解一下UI这个行业的相关知识。
第二章: UI设计基础 图形设计 —— 这部分主要讲UI设计中图形设计方面相关的内容。
第三章: UI设计基础 可用性和交互设计 —— 这一部分的内容不会写很多,因为实在是涉及面太广了。
第四章: 企业级Web应用用户界面设计与开发简介 —— 着重阐述其与网站等小型应用在设计和开发上的不同之处,及其限制和特点。
第五章: 企业级开发之原型法和封装 —— 讲解原型设计,同时也会讲到封装的方方面面,我看到有人说,大家对Tag很抵触,我希望,您如果恰好从事的是企业级开发,千万不要有这样的想法。
第六章: UI设计方法学之争 —— 在这一章节,我会讲解一下主流的以用户为中心的设计、目标导向的设计等UI设计方法学相关理论,并且提出自己关于现阶段,国内企业级Web应用UI设计方法的定义和理解。
第七章:尾声 —— 我对于未来的一些展望,以及我对已经开始UI设计工作以及想要从事UI设计工作的朋友们的一些建议。

引用
我写这篇文章的动力源自于 大多数人对于UI和UI设计师的错误理解。我从事UI设计已经近6个年头了,大多数人,甚至我的朋友都把我当成美工来看待,对此我是一肚子苦水没处吐阿。 但是我对UI设计的热爱却丝毫未减,一直以来,我都以让用户高效而愉快的工作为目的来做我的设计。因此,也越发努力的去学习和研究UI设计。渐渐的,随着 经验的不断增多,形成了自己的理解和风格。也发现了越来越多的设计师们一直在走错误的道路,甚至迷失。虽然我一己之力十分有限,我的能力水平也还远远不 足,但我还是希望能够把自己的想法说出来,让更多的人了解UI,真正回归到“人本”上来,不再拘泥技术和艺术,把“让用户愉快而高效的工作”作为设计的根 本出发点。

那样,我的努力就没有白费,国内的UI设计行业也会逐渐纳入正轨,UI设计师们才能真正找到属于他们的成就感和幸福感。UI设计需要被了解,被认可,这就是我写这个文章的目的。

写作计划呢,我的想法总是变来变去,UI领域相关知识又是这样的繁杂,只能是尽我所能的把企业级WebUI设计全过程写出来了。至于网站和桌面游戏、产品外包装之类的,实在内容太多了,想想我都觉得怕。只能是以后有精力和时间再写了,呵呵。

admin UI&UE ,

网站设计中的面包屑:实例与最佳实践

May 20th, 2009

[#2: Edit Options>MightyAdsense>Adsense Code]

原文:http://www.qianduan.net/?p=6351
译自:http://www.smashingmagazine.com
版权所有,转载请注明出处,谢谢!

一般的网站会有很多页面,面包屑导航可以大大改善用户寻找他们的路径的方法。就可用性而言,面包屑可以减少一个网站的用户返回上一级页面的操作次数,而且他们可以提高网站部分和页面的可查找性。他们还是在网站层次中指示用户所在位置的有效的视觉助手,这使之成为承接页面上下文信息的很棒的根源。

什么是面包屑?

面包屑(或称为面包屑路径)是一种显示用户在网站或网络应用中的位置的二级导航方案。这个术语来自于神话故事《奇幻森林历险记》,故事的两个小主人公丢下一条面包屑路径,然后顺着这条路径回到了家中。就像这个故事一样,在现实世界的应用程序中,面包屑为用户提供一种追踪返回最初访问页面的方式。

interactive example 1.
Delicious.com网站的面包屑

你通常可以在有大量的按一定等级组织的内容的网站上找到面包屑。你也可以在有多于一个步骤的网络应用上见到它们,这个时候他们的功能类似于进度条。最简化的方式是,面包屑就是水平排列的被大于号” > ” 隔开的文本链接;这个符号指示该页面相对于链接到它的页面的深度(级别)。

在本文中,我们将探索面包屑在网站上的用法,并讨论在你自己的网站中应用面包屑路径的一些最佳实践方法。

什么时候使用面包屑?

面包屑导航用于大型网站和按分级排列页面的网站。一个典型的案例就是电子商务网站,在这类网站中,大量的产品被按照逻辑分类分组。

不必在没有逻辑等级或分组的单级网站上使用面包屑。一个决定是否使用面包屑导航的方法是建立一个网站地图或结构图来描述网站的导航结构,然后分析面包屑是否能提高用户在类别内和类别之间的定位能力。

面包屑导航应该作为扩展的额外的功能,而不能替代有效的主要导航菜单。它是一个方便的功能;一个允许用户定位他们在哪里的二级导航方案;一个定位你的网站的可选择的方法。

面包屑的种类

面包屑主要分为三类

基于位置

基于位置(Location-based)的面包屑向用户显示他们在网站的哪一个级别页面。它们一般典型的用于有多个级别(一般是多于两级)的导航方案。在下面的例子中(来自于SitePoint),每一个页面的文本链接表示它比它右边的文本链接高一级。

Example of location-based breadcrumb.

基于特性

基于特性(Attribute-based)的面包屑路径显示一个特定页面的特性。例如,在Newegg,面包屑路径表示在一个特定页面显示的特性内容。

Example of attribute-based breadcrumbs.

这个页面显示所有拥有由Lian Li制造并有MicroATX微塔式因素的电脑机箱。

基于路径

基于路径(Path-based)的面包屑路径显示用户到达特定页面的操作步骤。基于路径的面包屑是动态的,它们显示用户在到达当前页面之前访问过的页面。

使用面包屑的优势

这里是一些使用面包屑路径的优势。

方便用户
面包屑主要用于为用户提供导航一个网站的次要方法。通过为一个大型多级网站的所有页面提供面包屑路径,用户可以更容易的定位到上一次目录。

减少返回到上一级页面的点击或操作
不用使用浏览器的“返回”按钮或网站的主要导航来返回到上一级页面 ,用户现在可以使用用更少点击数的面包屑来。

不用常常占用屏幕空间
因为它们通常是水平排列以及简单的样式,面包屑路径不会占用页面太多的空间。这样的好处是,从内容过载方面来说,他们几乎没有任何负面影响。

降低跳出率
面包屑路径会是一个诱惑首次访问者在进入一个页面后去浏览这个网站的非常好的方法。比如说,一个用户通过谷歌搜索到一个页面,然后看到一个面包屑路径,这将会诱使用户点击上一级页面去浏览感兴趣的相关主题。这样,从而,可以降低网站的总体跳出率

面包屑路径的错误使用

使用面包屑路径是一件相当简单的事情,而且在决定使用它们之间只需要很少的指导性考虑。让我们看一些可避免的常见错误。

在你不需要的时候使用面包屑
一个常见的使用的错误是在没优势的时候使用面包屑。

Using breadcrumbs when you do not need it.

在上面的例子中,Slicethepie 冒险迫使用户使用太多的导航选择。(1)主导航, (2) 面包屑路径和(3) 次要导航太接近了。这个应用中的面包屑路径不能为用户提供额外的便利,因为下一级页面的次要导航正好在它下面。而且,当点击面包屑的二级链接“Music”时,它将带你到第一个tab“Listen”,这会错误的暗示第一个tab在另外两个tab(“Search”和“Artist hall of fame”)的较高级别。

使用面包屑作为主要导航
就像前面规定的,使用面包屑作为一个可选的辅助导航。

Using breadcrumbs as primary navigation./

在上面的例子中,mefeedia 网站没有提供一个浏览视频的主要导航菜单,尽管在页面底部有文字链接导航,在页面的主体部分没有导航菜单,这使得浏览网站的其它部分就比较困难。

Using breadcrumbs trails as primary navigation - example 2.

如果你直接到达了一个页面——比如说,通过谷歌搜索结果,你可以选择的导航就只有面包屑。或者如果你已经浏览过一个网站页面,然后到达一个没有显示主要导航的页面,你将不得不点击浏览器的“返回”按钮来获取主菜单。

在页面有多级目录的时候使用面包屑
面包屑路径有一个线性结构,因此如果你的页面不能分类到整洁的目录,使用面包屑时间比较困难的事情。决定是否使用面包屑很大程度上取决于你如何设计你的网站分级。当一个低一级的页面在(或能放入到)多于一个上级目录下时,面包屑路径将会是无效、不正确和让用户困惑的。

面包屑导航设计注意事项

当设计一个面包屑导航方案时,记住几件事情。让我们看看在你处理面包屑的时候可能发生的几个问题。

什么时候应该使用分割链接条目?
一般接受和最被认可的分割面包屑路径的超级连接的符号是“大于号”。一般来说,> 符号用于指示级别,就像父目录 > 子目录的格式一样.

Example of greater than symbols separating the text links.

其它常用的符号有指向右边的箭头、右直角引号(») 和反斜线(/).

Example of alternative hierarchy separators.

使用哪种符号取决于网站的审美和使用的面包屑类型。比如,对于基于路径的面包屑,链接不必相互之间有等级关系,那么使用“大于”号可能不能正确的传达它们之间的关系。

它应该多大?
你应该不希望你的面包屑支配页面。一个面包屑仅仅担任对用户的一种辅助(便利)作用。它的大小应该向用户传达这个理念,然后相对于主要导航菜单至少要比较小、或不太突出。

An example of a good-sized breadcrumb trail.

在确定你的面包屑的大小的时候,一个服从的很好的凭感觉的方法是,当访问这个页面的时候,它不应该是页面中最醒目的元素。

面包屑放在哪里?
面包屑通常出现在页面的上半部分,而且在主要导航的下面(如果使用了水平导航布局)。

面包屑展示

现在我们来讨论一下“谁、什么、什么时候、那个地方、为什么和如何”使用面包屑路径,我们可以看一些实例。在下面的内容中,你会发现一些使用面包屑路径的很棒的网站设计。

1. 典型的基于文本的面包屑

TypePad Design Assistant

classic breadcrumb - example 1.

NASA

Classic text-based breadcrumbs

Nestle 使用了一个文字明显比页面其它部分小的面包屑路径,很有效的让它不太显眼。

Nestle example.

Marchand de Trucs

classic breadcrumb - example 2.

Bridge 55

classic breadcrumb - example 3.

Overstock.com 为它的基于特性的面包屑路径使用了标准的“大于”号。为产品特性使用了复选框,这样用户可以通过取消选择它们来过滤它们。

classic breadcrumb - example 4.

2. 用其他符号取代“>”

TechRadar UKBP 使用向右的小三角。

Using other symbols for hierachy separators - example 2.

Replacing the greater than symbol example.

PSDTUTSMartique 使用反斜杠。

Using other symbols for hierachy separators - example 3.

Using other symbols for hierachy separators - example 4.

Mouse to Minx 使用向右的引号来展现页面等级。

Using other symbols for hierachy separators - example 5.

Jakob Nielsen’s Alertbox 使用向右的箭头。

Using other symbols for hierachy separators - example 1.

Target 使用冒号来分割。

semicolon separator example.

3. 超越简单的文字链接

面包屑设计的一个当前的趋势是说,“面包屑不用必须是简单的”。在这些设计中,你将看到与总体设计相融合的样式漂亮的面包屑。

Grooveshark

styled breadcrumbs - example 1.

Yahoo! TV

Beautiful breadcrumb trails.

IDEO

styled breadcrumbs - example 2.

Apple Store

styled breadcrumbs - example 3.

Coolspotters

styled breadcrumbs - example 4.

Devlounge

styled breadcrumbs - example 5.

LottaNZB

Pixelpoodle

Beautifully-styled breadcrumbs - example.

guardian.co.uk

Beautiful navigation - examples.

4. 多步骤处理面包屑

Statement Tracker 使用一个面包屑来指示注册帐号的步骤,就像一个进程指示器一样。

Sequential process example.

Flickr 使用面包屑来指示Flickr之旅中的部分数量。

breadcrumb

5. 有子导航的面包屑

这里有一些面包屑路径的例子,当点击或鼠标经过它们的链接时,打开一个列出附加属性或位置的子导航面板。

MarketWatch 在你鼠标悬停在一个面包屑链接的时候有一个弹出的子导航。

breadcrumb with sub-navigation example.

Profoto 有一个独特的面包屑路径:点击面包屑链接时在它下面打开一个区域,从而为用户提供附加的属性来选择。

Experimental Example 2.

Cranfield University 有一个简单的弹出面包屑,它提供多种功能:为用户指示位置,并作为一种健壮和交互的二级导航。

Flyout Breadcrumbs

Lonely Planet 也有一个弹出面包屑,你可以从中改变特性选择。

flyout menu - example 3.

点击一个面包屑链接带你到相关页面,而点击向下的箭头就会打开而外的选项。

Flyout menu - example 4.

MSDN 有一个当用户用鼠标滑过一个链接时就打开一个可滚动的子导航列表的面包屑路径。

subnavigation example 1.

Wowhead 有一个多级子导航系统。

6. 交互式面包屑

Delicious 让你移除关键词标签的面包屑路线中的条目来帮助你快速寻找书签。

interactive example 1.

7. 实验性示例

Booreiland 使用一种面包屑样式(breadcrumb-style)的导航方案作为它的主要菜单,这样就允许用户快速理解他们当前在浏览的内容。

Experimental example 1.

AEN UI的用户界面设计师Aen Tan 讨论一种被称为 Tabcrumbs的设计模式,一种整合面包屑和tabs的导航方案。

Tabcrumbs example.

admin UI&UE ,

10个非常棒的Ajax及Javascript实例资源网站

May 5th, 2009

[#3: Edit Options>MightyAdsense>Adsense Code]

  今天,暴风彬彬要向大家推荐10个相当棒的Ajax和Javascript国外资源网站或博客,它们提供了相当多的高质量Ajax、Javascript实例及教程,喜欢Ajax和Javascript的朋友绝对不能错过。彬Go曾经还介绍过300多个Javascript导航菜单,有兴趣的话,也可以看一看。

1.Ajax Rain

  AjaxRain有很多完美整合AJAX, CSS, DHTML 或 Javascript的实例,有一些Demo的确值得你去看一看,即使你不是网页设计(开发)师。

 

Ajax/Javascript实例:


2.Ajax Daddy

ajax-javascript-教程

  Ajax Daddy收集了大量漂亮的Web2.0工具,其中一个使用的功能就是,在你把某个Ajax/Javascript实例应用在自己的网站上之前,你可以在它上面先看看效果演示。

Ajax/Javascript实例:


3.Mini Ajax

ajax-javascript-实例

  MiniAJAX 是一个新生的网站,收集了少许 DHTML 和 AJAX 脚本, 它的代码片段风格非常实用。

Ajax/Javascript实例:

4.Ajaxian

ajax-javascript-源码

  一个接近于门户类型的AJAX资源站点,包括Ajax示例收集,博客,论坛和教程等等。

Ajax/Javascript实例:


5.DHTML Goodies

ajax-javascript-教程
  DHTML Goodies是一个收集了大量DHTML、Ajax脚本、Demo和教程的网站。脚本范围涵盖从导航菜单、窗口、日历到图片集合。
Ajax/Javascript实例:


6.Javascript Kit

ajax-javascript-资源

  收集了大量的Javascript教程及脚本资源,当然也有DHTML、CSS和网页设计教程和一个设计师帮助论坛。

Ajax/Javascript实例:


7.Dynamic Drive

ajax-javascript-源码

  一个我常去的 JavaScript和 CSS资源网站,即使你是初学者,也能找到DHTML、Javascript、客户端脚本详细的指导。

Ajax/Javascript实例:


8.DHTML Site

ajax-javascript

  你能从DHTML Site找到大量游泳的AJAX及DHTML脚本及教程,脚本涵盖页面效果、工具技巧、拖拽式日历、窗口特效及图片集效果。

Ajax/Javascript实例:


9.Solutoire

ajax-javascript-资源

  这个网站收集了相当多且很棒的javascript和ajax的实例及教程. 还有很多 jQuery、Scriptaculous、mootools等Javascript框架。

Ajax/Javascript实例:


10.DevSnippets

ajax-javascript-资源
  收集了大量Ajax, javascript和CSS资源,在这里你可以提交自己喜欢的Ajax和Javascript实例,也可以为你喜欢的实例投票。

Ajax/Javascript实例:

阅读英文原文

admin UI&UE ,

网页设计趋势之:”勾引”用户的按钮

May 5th, 2009

今天彬Go将和大家一起讨论网页设计趋势中很重要的环节,那就是”勾引”用户的按钮。所谓”勾引”用户的按钮,其实对于Web设计师来说,就是如何设计出一个能让大多来访的用户都有点击欲望的按钮。通常这些按钮被链接到下载注册购买等功能。

国外设计师 Seth Godin 将按钮比喻成香蕉,而你的用户则会被比喻成可爱的小猴子。我们的目标是能够让小猴子在3秒之内快速找到它们想要的香蕉(也就是在用户放弃并离开你的网站之前)。强迫你自己在设计每个网页的时候都要遵循一个且仅有一个的目标,那就是”香蕉”!让它更大、更醒目、更美观!

网页-按钮-设计

这篇文章将和大家一起讨论如何设计完美”勾引”用户点击的按钮并会为大家展示30个不错的网页按钮设计实例

您还可以参考以下Web设计相关教程:
网页设计新趋势:云隙阳光和光线效果
推荐21套非常棒的网页设计图标素材
2008年国外最漂亮的50个网站欣赏
精选2008年最佳设计素材资源&灵感

如何设计完美”勾引”用户点击的按钮

好的按钮设计一定会是醒目且能”勾引”用户眼球的。以下是好的按钮设计必不可少的5个特征:

1.颜色

颜色一定要能与平静的页面相比更加与众不同,因此它要更亮而且有高对比度的颜色。

网页设计-教程

2.位置

它们应当”座落于”用户期望更容易找到它们的地方。产品旁边、页头、导航的顶部右侧…这些都是醒目且不难找到的地方。

网页按钮-设计

3.文字表达

在按钮上使用什么文字表达给用户是非常重要的。它应当简短并切中要点(不罗嗦),并以动词开始,如:注册、下载、创建、尝试等…

如果想切实的达到”勾引”用户点击的按钮,添加“免费″二字的确可以起到诱惑的效果,当然那要真的是免费,不要误导或欺骗用户。

网页设计-按钮

4.尺寸问题

如果它是你最重要的按钮并且你希望更多的用户点击它,那么让它更醒目些是没有坏处的。把这个按钮设计的比其他按钮更大些并让用户在更多的地方找到并点击它。

按钮设计

5.可”呼吸”的空间

你的按钮不能和网页中的其他元素挤在一起。它需要充足的margin(外边距)才能更加突出,也需要更多的padding(内边距)才能让文字更容易阅读。

按钮设计-教程

30个网页按钮设计实例

1.Things

按钮素材

2.Wordpress e-Commerce

网页设计-按钮-实例

3.Skype

网页设计-按钮-实例

4. PB Wiki

网页设计-按钮-实例

5.Exceptional

网页设计-按钮-实例

6.PicsEngine

网页设计-按钮-实例

7.InCase

网页设计-按钮-实例

8.GoodBarry

网页设计-按钮-实例

9.Plan HQ

网页设计-按钮-实例

10.TypePad

网页设计-按钮-实例

11.Mozilla Firefox

网页设计-按钮-实例

12.37 Signals

网页设计-按钮-实例

13.Hambo Design

网页设计-按钮-实例

14.Cake PHP

网页设计-按钮-实例

15.Traffik

网页设计-按钮-实例

16.Boag World

网页设计-按钮-实例

17.Donor Tools

网页设计-按钮-实例

18.Luke Larsen

网页设计-按钮-实例

19.Square Space

网页设计-按钮-实例

20.Wu Foo

网页设计-按钮-实例

21.Barack Obama

网页设计-按钮-实例

22.Freshbooks

网页设计-按钮-实例

23.Crazy Egg

网页设计-按钮-实例

24.Web Notes

网页设计-按钮-实例

25.Campaign Monitor

网页设计-按钮-实例

26.Light CMS

网页设计-按钮-实例

27.Litmus

网页设计-按钮-实例

28.Stumble Upon

网页设计-按钮-实例

29.Remember The Milk

网页设计-按钮-实例

30.Ekklesia 360

网页设计-按钮-实例

admin UI&UE ,

推荐20个关于网站可用性及界面设计的网站

May 5th, 2009

  随着技术的进步,网站和网络应用正在变得更具互动性,我们有更多增强用户体验的方法和技巧。下面列出的这些网站能够帮你处理界面设计、用户体验(UE)、以用户为中心的设计(UID)、网站可用性以及任何这方面的问题。如今“形式追随功能”的理念正变得更加重要。我们的目标就是更加完善的用户界面。

1.UI-patterns

网页设计

  UI-patterns是一个顶级用户界面库,收集展示了一些改进过的设计模型,比如验证码帐户注册导航标签等。

 

2.Yahoo! Design Pattern Library

网站可用性

  Yahoo开发网络有一个日渐丰富的设计模型库Yahoo! Design Pattern Library。这里展示了用户界面设计方面的通用设计模型。一些广为讨论的模型包括模块标签拖放操作评级评论

3. UI Pattern Factory

用户界面设计

  UI Pattern Factory既是一个UI模型库又是一个UI画廊。它展示和讨论堆叠标签旋转灯笼效果即时点击编辑等UI模型。

4.Welie.com

网页设计

  Welie.com的交互设计模型库提供了各种交互设计的设计模型,包括面包屑导航导航标签评论框等等。

5.Pattern Tap

网页设计

  学习有效用户界面的设计,最好的办法是看看其他设计师是如何做的。你可以从Pattern Tap的设计模型展示中获得灵感。这儿收藏了表单设计登录界面二级导航按钮等资源。

6.Design with Intent

网页设计-教程

  Design with Intent 是 Dan Lockton 的博客,主题是理解和影响用户交互。

7.Usability First

Usability First

  Usability First旨在提供与网站和应用相关的可用性的有价值的资料。Usability first的分类包括网站设计可用性投资回报率网络无障碍设计

8.Usability.gov

网站可用性-研究

  Usability.gov是由美国卫生与公众服务部提供的可用性和用户中心设计的政府资源。您可以在这儿学习可用性基础可用性方法

9.Designing Interfaces

网页设计

  Designing Interfaces是一本在线图书,也就是O’Reilly’s出版的《Designing Interfaces: Patterns for Effective Interaction Design.》的摘要。(豆瓣

10.InfoDesign

网站可用性

  InfoDesign主要讨论信息设计方面的话题。也有一些关于网络无障碍性可用性用户体验方面的文章分类。

11.useit.com

用户体验

  useit.com是可用性专家Jakob Nielsen建立的网站。网站的Alertbox部分是一个讨论当前可用性问题的双周专栏。

12.Functioning Form

表单设计

  Functioning Form是一个交互式设计博客,作者是国际公认的网络专家、作家Luke Wroblewski。你能在Functioning Form上找到诸如《英国航空公司网站表单设计》和《用户注册表单模型》之类的文章。

13.User Interface Engineering

网页设计

User Interface Engineering公司主要进行用户界面工程的研究、培训和咨询,举办用户界面年会。公司网站的文献栏目下有大量用户界面设计方面的文章。这些话题包括web应用设计中的可用性挑战帐户登录页面需要避免的设计失误

14.Usable Web

网站-可用性

  Usable Web收集了用户界面设计方面的话题的链接。虽然网站不再更新一些文章已经过时,但你总能找到超越时间的文章和资源。

15.Usability Counts

网站可用性-研究

  Usability Counts博客的作者是Patrick Neeman 和 Ha Phan,两位都是用户体验方面的顾问。博文中有航空公司网站表单的设计实例,也有关于可用性的深入思考

16.Usability Post

网站可用性-分析

  Usability Post是一个关于可用性设计的博客。博客文章中提到了很多技巧,比如用页面空白改进用户界面用Photoshop颜色配置文件设计web图像等。

17.A List Apart: User Science

网页设计-教程

  A List Apart是最好的基于标准的设计和开发的文章资源,其中的User Science专题涵盖用户界面设计的各个方面。User Science的议题进一步分成三类:网络无障碍信息架构可用性

18.UXmatters

用户体验

  UXmatters是一个非营利性网络杂志。本杂志致力于分享有效用户体验技术,为专业人士提供用户界面(UX)资源。UXmatters杂志的议题包括可用性、以用户为中心的设计、Web 2.0应用等等。有的文章在讨论富网络应用对用户的帮助搜索表单的可用性设计

19.UX Magazine

用户体验

  UX Magazine 主要讨论关于用户体验的话题,诸如层样式设计程序员的设计技巧等。

20.Boxes and Arrows

网页设计

  Boxes and Arrows提供交互设计、可用性设计和信息设计方面的专业信息。有的文章会教你设计具有良好可用性的在心邮件应用,还有利用VISIO展示富网络应用的例子

英文原文:20 Websites to Help You Master User Interface Design
翻译:不是俺

admin UI&UE, Web2.0应用 ,

精选15个国外CSS框架

May 5th, 2009

什么是css框架

实际上还是让我们从框架说起吧。
框架就是一个你可以用于你的网站项目的基本的概念上的结构体。

css框架通常只是一些css文件的集合,这些文件包括基本布局、表单样式、网格或简单结构、以及样式重置。比如:

  • typography.css 基本排版规则
  • grid.css 基于网格的布局
  • layout.css 通常的布局
  • form.css for 表单样式
  • general.css 更多通用规则

您还可以参考以下前端开发/CSS相关资源:

推荐12款可用于前端开发的免费文本编辑器
Web前端开发必备手册下载
推荐20个让你学习并精通CSS的网站
300+Jquery, CSS, MooTools 和 JS的导航菜单资源

下面一起来了解一下各种不同的CSS框架吧:

1.960 Grid System

CSS-框架-960

960网格系统是一个通过提供通常使用的尺寸简化网站开发流程的努力的结果,基于960像素的页面宽度。它有两种类型,12和16列,他们可以独立使用或是协同使用。

 

2.WYMstyle CSS Framework

CSS-框架-WYMstyle

这个项目的目的是提供一组经过良好测试的模块化的CSS文件,能够用于网站的快速设计。WYMstyle是一组CSS文件,你可以很容易的组合这些文件来快速的创建你的网站的布局。通过提供可靠的、经过良好测试的CSS模块,WYMstyle 力求让每个网站防止枯燥的跨浏览器兼容性测试。

3.YAML CSS Framework

CSS-框架-YAML

Dirk Jesse的强大的(X)HTML/CSS框架为许多的简单或更复杂的网站项目提供完整的默认模板包。YAML基于网页标准并支持所有现代浏览器。所有的 Internet Explorer的主要渲染漏洞都被解决。YAML 完全支持从5.x到7.0的所有的IE版本。

4.YUI Grids CSS

CSS-框架-YUI

基本的YUI网格CSS提供4种预设的页宽、6种预设模板和再分为2、3、4卷的区块的功能。 这个4KB的文件可提供超过1000中页面布局组合。

有国外作者曾指出YUI Grids CSS中最值得学习的网格布局CSS写法:

  • 负Margin技术
  • 使用度量单位em
  • 清除布局的浮动

5.Logicss Framework

CSS-框架-logicss

Logic CSS 框架是用来减少开发符合web标准的xHTML布局的时间的一个由CSS文件和PHP程序组成的集合。通常跨浏览器表现行为(不是Meyer的reset文件或是用“*”),排版支持文本字体大小调整(使用EMs) 和垂直居中,符合可定义的灵活的布局网格利用css代码生成工具

6.CleverCSS

国外-CSS-框架

CleverCSS是一个用于css的受Python启发的小型的标记语言,它可用于以整洁的和结构化的方式创建一个样式表。在很多方面它都比CSS2整洁和强大。与CSS最明显的区别是句法:它基于缩进而且不单调。虽然这显然违反了Python的规则,它依然是组织样式的很好的主意。

7.Elements CSS Frameworks

CSS-框架-elements

Elements 是一个实用的CSS框架。它是为了帮助设计师更快更高效的来写CSS而建立。Elements 已经超越了仅仅作为一个框架,它有自己的项目工作流。它拥有你完成项目所需的所有东西,这也让你和你的浏览者感到愉悦。阅读 概述 了解更多。

8.Blueprint CSS

CSS-框架-blueprint

Blueprint 是一个 CSS 框架,它的目的是减少你的css开发时间。它提供一个可靠的css基础去创建你的项目,BP由一个易用的网格、合理的布局和一个打印样式。

9.Schema Web Design Framework

CSS-框架-schema

Schema 是一个为了提供在重复的设计任务中必须的CSS和HTML标签而设计的表现层的网页框架设计。 与为每一个新的网站项目从零开始创建HTMl/CSS不同,Schema提供必要的基础来开始并立马让你的设计跑起来。

10.Emastic CSS Framework

CSS-框架-emastic

Emastic 是一个CSS框架,它有连续的任务:探索陌生的新世界,寻找新生活和新的网站空间,大胆的去CSS框架尚未到达的领域。它是轻量的、在页面宽度上比较人性化,在网格中使用固定和不固定的列宽。 Elastic 用“em”布局。

11.That Standards Guy CSS Framework

CSS-框架

* 只能调用单个样式文件
* 主样式需要取得CSS认证(WCAG 1.0);
* 跨浏览器兼容性—包括Internet Explorer (IE) 5.x for Mac;
* IE Hacks使用独立文件;
* 快速创建模板;
* 少量注释/实例演示,可以节省时间来理解。

12.Content with Style Framework

CSS-框架-content

下一个逻辑步骤就是将这个扩展为CSS框架,允许使用写好并通过测试的组件来快速开发网站。实际上所需的是搞定一套命名习惯和一个灵活的基本模板…

13.Boilerplate CSS Framework

CSS-框架-boilerplate

14.ESWAT Web Project Framework

CSS-框架-eswat

ESWAT正在重新整理。如果你是冲着我的网站框架来的,那么你就可以在这里下载。也许你也想看看我的其他项目gmachina、AppleSeed。

15.Tripoli CSS Framework

CSS-框架-tripoli

Tripoli是一个用于HTML表现的通用css规范。通过重设和重建浏览器标准,Tripoli 为你的网站项目提供了一个标准的、跨浏览器表现的基础。

彬Go会经常更新前端开发/网页设计等相关技术及教程文章,欢迎订阅本博客来及时浏览本博客的最新教程及资源。

英文原文:CSS Frameworks
翻译原文:css框架收集

admin UI&UE

45个新鲜出炉的jQuery插件

May 5th, 2009

之前已经为你介绍了50多个强大的jQuery插件,但是承受着jQuery的流行,越来越多的插件很快的冒出来。本文中为你收集了45个最新的jQuery插件,看看,有哪些是你想要应用到你的网页设计中的?


图象幻灯片展示和画廊插件

1) Galleria -这是一个用jQuery编写的javascript图像画廊插件。之前帕兰已经做过介绍

2j15 45个新鲜出炉的jQuery插件


2) jQuery Multimedia Portfolio -支持多种多媒体格式,包括:图片,视频 (flv), 音频 (mp3), 并且自动侦测每个文件的扩展名再分别调用合适的播放器。2j20 45个新鲜出炉的jQuery插件

 


3) wSlide -通过列表名单切换动画盒式的内容区域。2j25 45个新鲜出炉的jQuery插件

 


标签云

4) Hover Sub Tags- 使用jQuery来缩小标签云所占成的页面,比如你有一个”Ajax”的标签, 你可以在这个标签里面再放入二级标签 jquery, mootools, 等…当鼠标悬浮在一级标签上时,就出现一个动态提示效果的二级标签云。

2j36 45个新鲜出炉的jQuery插件


分页系统

5) Pagination-创建一个分页导航,当你的网页内容比如多的时候,比较适合使用这种分页导航系统,同时也有利于SEO。这个利用jQuery编写的分页导航的特点是,你可以把它与搜索相结合,控制搜索结果的显示文章数。

2j26 45个新鲜出炉的jQuery插件


导航系统

6) Accordion Menu -这是一个手风琴效果的演示, 标题使用 H3 标签, 子菜单使用UL标签来实现伸缩。

2j13 45个新鲜出炉的jQuery插件


7) jQuery Treeview Plugin 2j31 45个新鲜出炉的jQuery插件

 


8 ) Coda-Slider- 一个强大的jQuery滑动门技术,效果平滑,很酷。支持上下页的控制。 t12 45个新鲜出炉的jQuery插件

 


9) Simple Horizontal Accordion 2j32 45个新鲜出炉的jQuery插件

 


表格和网格

10) TableRowCheckboxToggle - 它笼统地加入了切换功能,以任何表行您所指定的基础上的CSS类的名字。它将默认切换任何复选框内的表行。

2j1 45个新鲜出炉的jQuery插件


11) TableEditor - Tableeditor提供了灵活的实时编辑的HTML表格。 2j30 45个新鲜出炉的jQuery插件

 


12) Ingrid - Ingrid是一个个性的jquery插件,可以为你的图表添加很多网格数据行为,包括大小,分页,整理,排柱造型以及更多。 2j34 45个新鲜出炉的jQuery插件

 


表单

13) jQuery Nice Form -创建自定义风格的表单事件。

2j2 45个新鲜出炉的jQuery插件


14) Easy Multi Select Transfer 选项菜单选中后到达另一个选项栏的效果。 2j42 45个新鲜出炉的jQuery插件

 


15) jQuery Form Plugin- 让你轻松自然地升级HTML表单使用Ajax表单和提交的方法,以方便从从表单元素中搜集资料,并决定如何管理提交进程,让你对数据如何提交能有充分的控制权。


滚动和滑动技术

16) jQuery.SerialScroll -此插件可以让你很容易实现任何动画的一系列要素依次滚动。你可以用它作为一节滑块,滚轮文本,幻灯片,新闻股票等。

2j10 45个新鲜出炉的jQuery插件


17) liScroll - LiScroll是一个 jQuery 插件,可以让你转换任何无序列表为一个滚动内容展示。


18) Spinner -可以让你在一个固定区域里无限量的增加内容进行滚动样式的展示。 2j41 45个新鲜出炉的jQuery插件

 


表单事件

19) jWYSIWYG 一个可以内嵌网页的所见即所得的HTML文本编辑插件。

2j5 45个新鲜出炉的jQuery插件


20) Simple chained combobox -很简单的一个jquery选项插件,通过JSON的加工和返回特点,提供连锁反应式的多重选择。 2j14 45个新鲜出炉的jQuery插件

 


21) jQuery checkbox 2j18 45个新鲜出炉的jQuery插件

 


22) jGrow 2j16 45个新鲜出炉的jQuery插件

 


Toggling

23) jTruncate in Action -jtruncate可以自定义截断你网页中的文本实体。

2j7 45个新鲜出炉的jQuery插件


24) toggleElements - toggleElementS是一个展开/隐藏效果的jqurey插件。 2j37 45个新鲜出炉的jQuery插件

 


渐变和阴影

25) Drop Shadows -这个插件可以为你的文本生成一个非常有趣的阴影效果。

2j9 45个新鲜出炉的jQuery插件


26) Gradient jQuery plugin - 实现渐变效果,你可以设定渐变的方向和透明度值。 2j11 45个新鲜出炉的jQuery插件

 


27) Gradient -让你拥有一个动态渐变效果的背景,不需要使用任何图片。 2j29 45个新鲜出炉的jQuery插件

 


Lightbox灯箱效果

28) Facebox 基于jQuery, Facebook风格的lightbox灯箱插件,可以显示图片、DIV层和文章页面等。

2j17 45个新鲜出炉的jQuery插件


29) jQuery Lightbox Plugin- (balupton edition)2j44 45个新鲜出炉的jQuery插件

 


拾色器

30) jQueryColorPicker -一个简单的jquery拾色器插件,可以让用户选择色盘中的颜色来实现背景颜色的切换。

2j19 45个新鲜出炉的jQuery插件


值得试用的一些jQuery插件

31) Animated InnerFade- 完全符合w3c标准的动画幻灯片插件。

2j24 45个新鲜出炉的jQuery插件


32) Easy POP Show 1.0 Release -全屏幕显示的画廊插件。 2j8 45个新鲜出炉的jQuery插件

 


33) jqChart- Ajax的图表插件2j23 45个新鲜出炉的jQuery插件

 


34) UI Datepicker -一个简单的jQuery UI日期拾取器. 2j35 45个新鲜出炉的jQuery插件

 


35) JSmile -一个完全自定义的添加特定表情图标的插件。 2j3 45个新鲜出炉的jQuery插件

 


36) ImgAreaSelect - imgAreaSelect是一个 jQuery插件,可以让你在一张图片中选择一个矩形,并且可以列出坐标值。 2j4 45个新鲜出炉的jQuery插件

 


37) jPrintArea-jPrintArea是一个简单的,用来打印指定的文本内容。查看DEMO演示

 


38) jTabber- 一个Tab选项卡切换技术,不需要重新载入页面2j27 45个新鲜出炉的jQuery插件

 


39) jQuery Calculation Plug-in - 一个计算类插件。可以让你计算一些简单或是复杂的数学公式。 2j6 45个新鲜出炉的jQuery插件

 


40) jquery.biggerlink - 这个jQuery插件可以让你为指定的链接添加成在线代理后的链接地址。 2j40 45个新鲜出炉的jQuery插件

 


41) Humanized Messages- 在你的网页上显示一个半透明的内容信息,但是当用户有任何操作时,它就会慢慢消失。2j33 45个新鲜出炉的jQuery插件

 


42) Ajax Manager 帮助你管理AJAX请求和回应,(比如,放弃请求,锁定请求,排序请求等). 2j12 45个新鲜出炉的jQuery插件

 


43) Background-Position Animation 2j22 45个新鲜出炉的jQuery插件

 


44) Lazyload-Delays loading of images in (long) web pages. Images below the fold (the ones lower than window bottom) are not loaded. When scrolling down they are loaded when needed.Check out their demo page

 


45) jQuery Tag Suggestion- The same tag suggesting as-you-type support that del.icio.us is uses.Check out their demo page

 


2j43 45个新鲜出炉的jQuery插件

 

原文:45+ Fresh Out of the oven jQuery Plugins2412528845-go-to 45个新鲜出炉的jQuery插件
翻译: 帕兰映像

admin UI&UE ,

11种控制内容展示的JavaScript特效和技巧

May 5th, 2009

交付信息结构是一个交互式用户界面所需要完成的首要任务。更直观的布局结构设计,能使用户更好的理解内容。

不管你想要介绍的是什么样的内容,你都可以以更加互动和更加适应的方式去呈现现它。本文里面,我们为你收集整理了11种高超的JavaScipt技术,让你更好的控制内容的显示方式,以便用于下一次的布局设计。

“页面滑动门”, “隐藏的内容”, “图片和内容滑动门”, “动画幻灯片”, “传送带”, “Tab内容选项卡” ,结合各种拖拽、滑动、灯箱等特效,这就是下面将为你呈现的。

1. jQuery pageSlide


jQuery pageSlide 是一个jQuery插件,它可以控制一个隐藏页面的显示和关闭。具体来说,就是当前页占一个完整页面,隐藏页是看不到的,你设置一个控制的地方,点击该控制时触发事件,隐藏的页面就弹出来。再次点击隐藏页面以外的空间,它就又关闭。

这适合在有限的空间里,在主页里放重要内容,而隐藏页放一些并不一定要显示,而是有需要的用户才去展开显示的内容。当然,我是这么简单举个例,你爱怎么用又是另外一回事儿。

要查看DEMO,你可以进入这个插件的主页,点击“Click for a pageSlide demo.”这个链接。


2. Create a simple ul list with a nice slide-out effect for <li> elements


这个教程使用 MooTools slideOut() ,实现一个简单的UL列表,且为每个LI元素添加一个漂亮的点击隐藏特效。

3. Portfolio Layout Idea Using jQuery


非常漂亮的一个特效布局。由 Benjamin Sterling 创建的这个 portfolio layout 使用了jQuery的 easing plugin. 适合那些想用来展示个人作品集的用户。

它在页面两边显示带缩略的作品列表,当你点击每个条目时,会在中间部分以退场然后进场的特效呈现出该作品的全部内容。

查看DEMO


4. Creating a Slick Auto-Playing Featured Content Slider


Niall Doherty的 Coda Slider 为许许多多的设计师带来了灵感. Chris Coyier 创建的这个Slick Auto-Playing Featured Content Slider 使用 Coda Slider插件 ,实现我们常说的”图片焦点特效”。多用于门户站。

查看DEMO


5. Easy Image or Content Slider


这个之前有过介绍,非常平滑,可设置项非常丰富的滑动门特效。详情看这里

6. mooSlide


mooSlide 是一个可以用来取代“lightbox” 模块的特效脚本,它拥有许多有趣的功能选项,比如它可以从上或从下面弹出,它支持载入其它页面的内容等。

查看DEMO


7. jQuery.SerialScroll


jQuery.SerialScroll 可以让任何元素实现漂亮的动画移动效果。它使用 jQuery.ScrollTo 来实现移动特效。具体还是看DEMO吧,我也描述的不是很清楚。

查看DEMO


8. Agile Carousel


Agile Carousel 之前也介绍过。看这里


9. Animated JavaScript Slideshow


这个轻量级的JavaScript动画幻灯片脚本 包含一系列很酷的功能来样式化你的内容: 描述支持,链接支持,没有命名限制,肖像图片支持,缩略图状态等等。

查看DEMO


10. Sexy Lightbox 2


Sexy Lightbox 2是一个精美的Lightbox克隆,不过它更小巧. 支持显示图片和HTML元素,并且完全兼容HTML, 也就是说它可以显示条目,页面,视频和所有其它你想要显示的东西。超大图片还可以自适应浏览器。需要Mootools框架。

查看DEMO


11. UI.Layout


这个布局脚本的灵感来自于 extJS border-layout. 它可以创建任何你想要的UI外观-从简单的标题到侧边栏,到一个应用程序的工具栏,菜单,帮助面板,状态栏,提并表单等等。

英文译文:  10 Smart Javascript Techniques For Manipulating Content /Noupe
中文翻译:  11种控制内容展示的JavaScript特效和技巧/帕兰映像

admin UI&UE ,

成功的用户界面的八个特性

April 23rd, 2009

简介

当你构建你的用户界面和网站的时候,有各种各样的关于界面设计方法和模式的信息你可以使用, 对常见问题的解决方案和一般可用性的建议。下列专家给出的准则可能会引导你创造一个良好的用户界面, 但是究竟什么才是一个良好的界面? 一个有价值的用户界面应该具有那些特性?

 

当你构建你的用户界面和网站的时候,有各种各样的关于界面设计方法和模式的信息你可以使用, 对常见问题的解决方案和一般可用性的建议。下列专家给出的准则可能会引导你创造一个良好的用户界面, 但是究竟什么才是一个良好的界面? 一个有价值的用户界面应该具有那些特性?

 

以下八个特性是我认为一个良好的用户界面所必须的:

  1. 清楚
  2. 简明
  3. 熟悉
  4. 易响应
  5. 一致
  6. 吸引力
  7. 高效
  8. 宽容

让我们仔细看看每一个特性:

1.  Clear清楚的

清晰度是用户界面设计最重要的元素。事实上,用户界面设计的所有目的是为了使人们能够与您的系统通过沟通和功能来进行交互。 如果人们不知道你的应用程序怎样工作或在你的网站上应该去哪里,他们会困惑和沮丧。


这是什么呢?鼠标移到WordPress的按钮时工具提示会弹出解释其职能。

2. Concise 简明

清晰的用户界面是很好的,但是,您应该谨慎,不要陷入过度明晰。定义和解释很容易被添加,但是你这样做的同时也增大了规模。您的界面规模增加。添加过多的解释,您的用户将不得不花费过多的时间去读它们。

不仅要保持清晰,而且还保持简洁。当你能用一句话解释一项功能的时候就不要用三句话。当你可以用一个单词标记一个项,就不要用两个保持简洁可以节省你的用户的宝贵的时间。 同时保持清晰和简明并不容易,需要足够的时间和努力来实现,但其回报是值得的。


在 OS X 的音量控制中使用两个小图标以显示的音量从低到高。

3.  Familiar熟悉

许多设计师努力使自己的界面,直观。 但到底直观的真正意思是什么?直观也就是就是说可以自然地,本能地理解和领会。但是你怎么能做到直观一些?你可通过是它变的熟悉来实现。

熟悉就是, 跟你以前遇到过的东西相似。当你熟悉的东西,你就知道怎样它怎么做-你知道会发生什么事情。 弄清你的用户熟悉的并把它们融合到你的用户界面中。


GoPlan标签页式界面 标签很熟悉因为他们模仿文件夹上的标签 你清楚知道点击标签您将浏览该节和其他地方的标签将继续存在为了进一步导航。

4.  Responsive易响应

易响应意味着两件事。 首先,易响应意味着快速。 如果没有软件在后台,界面应该响应很快。等待加载和缓慢的界面是令人沮丧。 看起来加载的很快, 反正就是界面快速载入(即使内容尚未赶上)改善了用户体验。

易响应也意味着界面提供某种形式的反馈。界面应该反馈给用户,告知他们现在怎么了。 你成功地按下那个按钮吗?你将如何知道?按钮应显示一个被按了的状态反馈, 或许可以把按钮上的文字改成“正在加载… ”并且禁用按钮。 是软件挂了还是内容载入中?用转动的轮子或显示进度栏的方式来保持用户在进程中。


  Gmail会显示一个进度栏当您第一次进入您的收件箱。 而不是逐步载入网页一旦一切准备就绪整个页面即时显示。

5.  Consistent一致

之前我谈过关于上下文的重要性 ,以及它应如何指导你的设计决定。我认为,适应任何给定的上下文是很聪明,但是,一个界面仍然应保持一定程度的一致性。

一致的界面,使用户能够开发惯用模式-他们会了解不同的按钮,标签,图示和其他界面元素的外观,并识别他们。认识到在不同的情况他们所做的事情不同。他们也将了解特定的东西如何工作,能够从过去的经验中更快的总结知道如何操作新功能。


 在Microsoft Office的用户界面是一致的是有原因的。

6.  Attractive吸引力

这可能有一点争议,但我相信一个良好的界面应该有吸引力。 吸引力在某种意义上,是与界面交互变得是愉快。是的,你可以让你的用户界面简单,易于使用,有效率和易反应,它将尽其出色-但如果你可以做额外的一步,使之有吸引力的。那样用户体验会真正令人满意。当你的软件使用起来是令人愉快的,你的客户或工作人员将不仅是简单地使用它-他们会期待着使用它。

当然有许多不同类型的软件和网站,所有的创作针对的不同的市场和用户。什么样看来’好’对任何一个特定的观众都会有所不同。 这就是说,你应该为了你的用户来包装你的界面的的外观和风格。 此外,美感设计应适度使用,并且是为了加强功能。美化界面不同于加载时使用多余的眼睛糖果。


谷歌是众所周知的极简洁的界面他们关注功能重于形式,但他们显然的花费时间美化了 Chrome用户界面元素如按钮和图标使它们看起来正好体现了微妙的梯度和像素超薄突出。

7.  Efficient高效率

用户界面像是车辆,带你去你要到的地方。这些地方是软件应用程序或网站的不同的功能 一个良好的界面可让您在执行这些功能更快。 现在, ‘有效’听起来像一个相当模糊的属性-如果你把所有其他的事情在这个清单上,当然界面到头来还是需要高效? 差不多,但不完全。

你真正需要做的是使界面能高效的找出用户努力想要实现的,然后让他们可以有条不紊的做到。 您必须确定您的应用程序应该如何工作’ -什么功能它需要有,什么样的目标是你努力努力争取实现? 实现一个界面,可以让人们轻松地完成他们想要做的,而不只是简单的实现对各个功能的访问。


  苹果公司已经确认了人们在其iPhone上想要对照片做三个关键的事情,并在照片控制中提供按钮来分别完成他们。

8.  Forgiving宽容

没有人是完美的,当使用你的软件或网站必定有人会犯错误。 如何处理这些错误将成为你的软件的质量一个重要指标。不要惩罚用户-建立一个宽容的界面,纠正问题。

一个宽容的界面可以使你的用户远离代价高昂的错误。例如,如果有人删除了重要的信息,他们可以轻松地重新检索或撤消这一行动? 当有人浏览到损坏或不存在的网页,他们会看到什么?他们会迎接一个加密的错误提示还是得到了一些有用的替代目的地?


 错误的删除了电子邮件?Gmail可让您迅速取消上一次的操作。

To conclude…结束…

实现这些特性实际上可能同实现另外一些特性产生冲突。 例如,试图使一个界面清晰,您可能会增加太多的描述和解释,即最终使整个界面变得大而笨重。 缩减容量,努力使事情简洁可能产生相反的效果,使东西模糊不清。 实现一个完美的平衡需要的技能和时间,解决方案根据不同的案例也并不一样。

admin UI&UE ,

改进电子商务网站易用性的10个方法

April 23rd, 2009
    今天消费者网络购物的支出越来越多,可是太多的网站并没有考虑到他们网站和订购流程的易用性,最终导致用户很快就放弃了他们的订购。 这里有10种可以提高你的电子商务网站易用性的方法,可以帮助你最大可能的提高网站的转化率,将用户的”购物篮里的商品”转换为订单。

    1.  用email来标识用户(登陆名) 

       你曾经在网上购物中,用过多少不同的用户名作为账号? 又用过多少不同的emai作为账号?  我敢打赌, 你不仅不同的Email用的很少 ,而且你会发现Email比用户名,更容易记忆。 大多数情况下,用email标识用户比用户名更好。 因为Email容易记忆,更标准,这意味着你不必担心去记忆哪些乱七八糟的字符。他们永远是独一无二的,永远不会像用户名那样出现重名。

     

    2. 将下订单的过程划分成几个大步骤(让用户一次处理一个任务---海带博客

      订购流程通常非常复杂,比较典型的场景可能包括: 用户输入一个配送地址, 选择配送方式, 选择输入支付方式, 最后确认自己的订单。 试图让用户在一个步骤里做完这些事会有问题, 因为用户要输入太多的信息了!

    将这些步骤分解,让用户每次能处理一个步骤, 确保每个步骤需要思考和输入的信息相对较少。

     举个例子,亚马逊(Amazon.com)将订购流程分解成以下步骤:

    1. Login  登陆
   2. Choose delivery address  选择配送方式
   3. Choose delivery options  选择配送选项
   4. Enter payment details  输入支付信息(如信用卡等)
   5. Review and submit the order  核对并提交订单。

    3.  告诉用户他们在哪儿,将要去那儿?

    (注: 关于网络用户迷失的位置感描述,请参考<Don’t make me think>一书---海带博客

     在你的旅行中, 如果你不知道自己已经走了多远, 或者不知道自己还要走多远, 这难道不是一件糟糕的事情吗? 对用户来说, 当他们试图在线买点什么东西,如果他们不知道最终完成订购还需要多少步骤,他们会倍感挫折。 这就是为什么在订购过程中,告诉用户他在什么位置,而且还需要多少步骤, 是多么重要!

The four steps of the Dixon's ordering process: Delivery, Payment, Submit Order, Confirmation

    举个例子, Dixons14 显示当前预订步骤,下一步要去的步骤。 作为一种选择,你可以只是在预订步骤中简单的设定步骤号码就可以了,比如: 输入配送地址(步骤1).

     

    4.不要让下订单过程不必要的复杂

    令人惊奇的是, 有太多的电子商务网站把他们的订单流程搞的无比复杂,超过他们实际需要的。据个例子, 用户经常被要求按照月份输入他们的信用卡或者借记卡的有效日期(注: 这里意思是必须输入英文的日期,Jan, Feb, March之类的---海带博客),而不是简单的01,02,03等等。 这就强制用户将他们卡片上显示的数字转换成单词,却无法直接输入数字。

    作为产品设计人员,对每个订购步骤都要仔细考虑,以使其更简单。 举个例子,预订过程中,所有的输入框都必须用户输入吗?(注: 如果不是必须的,请尽量简化。---海带博客) 。通过不断简化流线化订单流程,你可以将用户订购过程中的体验问题降低到最少。

     

    5. 解决客人常见问题

      在整个订购流程中,告诉用户通常会遇到的问题和疑问的解决办法是非常重要的。 举个例子,用户通常需要知道他订购的产品多久才能送到,或者当用户需要输入生日的时候,告诉他为什么要收集他的生日信息等等。

    仔细走一遍预订流程并在每个步骤问问你自己: 用户可能会有什么疑问? 在屏幕上给予用户提示,并且提供一个超链接,连接到详细的帮助信息。

Explanation that Marks & Spencers require users' contact numbers because they may need to contact them

    举个例子,Markts& Spencers 向用户解释了他们为什么需要输入联系人电话。

    6. 高亮必填项


    再也没有比填写完一个订单后,却因为没有填写必填项,不得不返回重新填写更令人恼火的事情了。在填写一个订单中, 必须非常清楚标识出哪些项目是必填的,哪些是可选的。 其实很简单,只需要在必填项前加一个“*”。

Use of the * to denote required fields

    dabs.com 这点做的非常好,可以参考。

    7. 让订购流程更加灵活。

    通过让流程更加灵活, 用户不仅会感到更多的可控性, 而且也不太可能遇到关键性的问题。 据个例子, 一些电子商务网站,当用户输入地址的时候,自动帮助用户查找邮编。这对于哪些非正式的或者新的地址可能会有问题, 因为这种情况下不会为用户返回邮编。 这就意味着,用户不可能简单直接输入地址就可下订单(我自己就碰到好几次这种情况了)。

    一个好的例子,CD WOW! 的订购流程就非常灵活, 他们允许用户不用注册直接下订单。这就意味着那些对注册感到不适的用户,仍然可以下订单。

     

    8. 让用户感到安全放心

     很多消费者在线购买东西时,仍然不是100%放心。 他们常常担心提交了信用卡账号,却收不到货。因此努力去缓解用户的担忧,让用户感到放心是非常重要的。仔细考虑用户在订购过程中的每一步可能碰到的疑虑,并对这些疑虑进行说明。

    例如Tesco 在他们的订购流程的支付步骤,向用户解释在Tesco购物是安全的。

     

Tesco's safe shopping guarantee mentions their secure server that encrypts credit card information

    9. 让用户下订单前再次确认

    订购的最后一个步骤通常会让用户确认他们的订单。 用户可以看到订单的清单,包括他们需要支付多少钱,什么时候货送到。他们也可以取消或者提交此订单。最好不要拷贝亚马逊的”Amazon’s “1-click” ordering system“, 因为这样会让用户在没有检查和确认订单细节情况下,直接提交订单。比如配送地址和送货的费用等等。(注:处理配送地址错误的订单,或者因为配送费用导致退货的问题处理,成本非常高。---海带博客)

    在订单提交后,应该显示订单的最终确认信息, 以便让用户知道他的订单是否成功。 订单最终确认信息应该包括:

        * The expected delivery date   期望的送货时间
        * The order number  订单号
        * How to track the order online (if this is possible)  如何在线跟踪订单状态(如果可能)

    10. 订单成功后,发一个确认邮件。

    一旦用户成功提交订单, 需要立刻给用户发送一个确认邮件。 依据Jakob Nielsen’s Alertbox, December 8, 2003, 一个确认邮件应该:

    简明扼要

    告诉用户他们想要的, 比如: 订单号。

    应该象公司客服代表一样。

    记住,在线解决问题比致电客服中心成本低得多。在线提示用户,比如告诉用户他订购的产品多久才能送到等等,将会大幅度减少客户服务的电话数量。 

 

结论:

本文概述了改进电子商务网站的10个方法, 遵循这些原则不仅让你的电子商务网站更加可用,而且最终也更成功。 当然,通过这些原则,你只能走这么远(实践才是检验这里的唯一标准–译者注),这就是为什么进行可用性测试是每个电子商务网站重要部分的原因。 遵循可用性原则并让真实用户进行可用性测试,你会发现你的电子商务网站不仅仅可用,而且更加有效。

admin UI&UE, 电子商务流程和功能设计 ,