Archive

Posts Tagged ‘UI’

企业级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 5th, 2009

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

今天彬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

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

  随着技术的进步,网站和网络应用正在变得更具互动性,我们有更多增强用户体验的方法和技巧。下面列出的这些网站能够帮你处理界面设计、用户体验(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应用 ,

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 ,

天极产品设计流程

April 22nd, 2009

写这个的目地,主要是系统理下目前产品设计的流程,提醒自己尽量去避免一些常见的问题,也能让大家系统的了解天极网的产品设计流程。当然,不保证任何产品都能套用这套方式,主要还是跟据自己工作性质来定。也许这段文字会比较枯燥,希望阅读下去能给大家带来一些启发。

如果当中有问题及更好的方法,请邮件(peter.xiao999#gmail.com )或加我MSN(pitiaoxiao#hotmail.com)联系.

先从沟项目人员说起吧,项目需要沟通的部门基本是:需求部门(比如:产品经理,某频道负责人或主编) 、销售部、程序部。涉及到我这边主要有:UI(界面设计) 、UE(交互及用户体验) 、 UID(制作) 、SEO(搜索引擎优化)。

大多数产品都是由需求部门提出,当项目完成审批流程后,就会交由产品负责人直接和我们(目前天极网UE还处于起步阶段,我主要扮演UI及兼任UE的职责)进行沟通,进行可行性评估,经过N次讨论后确定结构、风格、功能、并确定开发周期及最终的上线时间。

每个产品主要经过以下几个阶段

  1. 可行性评估
  2. 产品原型
  3. 产品界面设计
  4. 规范整理、功能实现
  5. 产品上线
  6. 分析报告、优化方案

针对每个环节细化,我将拿出近期的 ChinaByte产品库 项目来做进一步说明 ,相关地址:http://www.webdoc.com.cn/demo/p/

一 可行性评估

主要执行人员:UI、UE、需求部门、程序部
需沟通人员:销售部

当产品经理确定基本的思路后,会先会跟我们沟通,并说明这个产品的思路、受众及一些自己的想法.接着会拿来一个结构图来和我们探讨实现方面的可行 性。我们也会准备相关资料与其进行沟通,主要会从数据报告、功能性及可行性三方面下手,在探讨的同时会指出功能或结构上的一些问题,并提出改善方案,这步 一定得仔细,UI、UE深入探讨并尽可能考虑到每个实现的细节,待框架打好后,出好的产品很容易.但如果在可行性评估上出现隐患,余下的其它工作也将会遇 到诸多问题。

我们主要从以下三方面进行评估:

  1. 数据报告
    通过99Click、Netratings、Counter三套系统来进行数据收集,并在分析报告中指出相应的问题。
  2. 功能性
    站在用户角度上,对方案的结构及功能性进行评估,提出并解决操作上的问题。
  3. 可行性
    每个产品初期都是感性的,但在不能保证每个功能都能按原有思路进行实现,具体还需要和相关技术     人员进行探讨、碰撞后形成最终的产品思路。

由于各人思考问题的角度不同, 这个环节常遇到大家意见不统一情况,在我接触的项目中,很多产品经理都会将个人喜好溶入到产品设计思路中,如"颜色用红吧,这样显得比较跳跃","按钮上 加下样式,太不吸引人…",跟据自己的经验判断,如果认为不可取,会尽最大能力去说服对方,当然前提是把自己的位置摆正,站在中立的角度上去审视产品。

顺便谈谈沟通,相信大家经常会遇到和产品经理矜持不下的情况,这时用理论及实际案例去说服对方基本是无效的。建议可以采用一对一的方式单独沟通,遇 到问题先记下来,放到会后进行单独讨论,人都是要面子的嘛。只要让对方意识到你是在帮他改善问题后,接下来的沟通就会比较轻松。在之前在做 Yesky产品库 时自己也经遇到这类问题。总之,说服的方式有很多种.无论是威逼还是利诱,前提一定是我的这种方式是可行的,实用的。

二 产品原型

主要执行人员:UI、UE、需求部门
需沟通人员:程序部、销售部

在产品原型方面,主要指的是黑白稿或线稿,除了颜色基本采用黑白的形式,最终出的产品原型将会和实际产品没区别。这个环节会拟定出产品页面的宽度,广告的形式,导航基本样式,各内容的区域的表现形式等…

当经过可行性评估阶段后,产品经理的思路和自己也基本达成共识,接下来将进行原型设计,我将主要分为三个步骤来实现:

1)  纸稿

一般情况下结构图都是采用word文档描绘,我选择笔和纸的方式,主要还是比较方便、易修改,有任何突发的思路只需要擦一下,就可以直接在已有的基础上进行调整,由于之前的讨论没有实物参照,在这个环节你一定会发现更多有趣的问题。

2) 线稿、黑白稿   

当纸稿确定后,则由UI或UE使用做绘图工具来描绘黑白稿(我主要使用Photoshop来进行这个步骤,跟据个人习惯不同,大家的方式也有所区 别,比如淘宝UED Team及Baidu UE更多的则采用线稿的形式)。也许是做UI的原因,我习惯还是采用黑白稿,方便界面设计,在结构上也会精确到像素,比如:导航高度40px.头条采用 20px黑体,图片规格:104×85px,页面的各区域的留白为5px…等等,只有这样才会发现更多细节上的问题,当然到界面设计的同时你也会尝到更多 的甜头。

3) 原型

完成以上的二个步骤后,产品的基本功能,结构,规范都已经大致成型.这时你可以叫上程序部、销售部及需求部门产品经理,在白板上对着黑白稿做最终的讨论。经过二次、三次调整,最终定下完整的产品原型。

另外,值得提的一点是,在产品原型未确定前,千万别急着去做界面设计,因为之前的讨论主要会通过白板、Word或纸稿。在原型未确定前,有很多潜在 的问题表现不是很直白,比如:”窄了、窄了,完了,新闻列表只能放八个字”、”广告放不下了”、”数据提不出来,目前没这个接口…”。如果提前进入界面设 计的环节,一但有问题,就意味着重新又需要找产品经理、技术部、销售进行再次沟通,这个步骤是很烦琐的,也会让人很郁闷的。

三 产品界面设计

主要执行人员:UI、UE、需求部门
需沟通人员:UID、SEO

目前产品的雏形已基至的本成型,虽然还没华丽的外衣,但凹凸有至身型已隐约可见。下一步将进入界面设计阶段.设计师们也将再次体会到黑白稿给他带来的各种便利.

1) UI
我的习惯是,主要针对首页进行风格设计,并出3-4套界面,最终挑选出2套左右提交给需求部门,同时也会指出自己最满意一套,和需求部门进行二,三次碰撞后,最终拿出定稿。


点击放大

更多请访问:http://www.webdoc.com.cn/demo/p/

2) UE
UE则开始针对原型进行操作上的优化调整,召集用户并组织头脑风暴,收集到相关意见后,由UE整理出交互及用户体验方面改善意见,并反馈给UI及需求部门。比如:”这个文字需要加下划线”、”按钮上不要加样式,反而没有点击的欲望了…”。

3) UID
UID即开始着手准备制作方面相关文档.并提出实现方面的意见.等待效果图最终确定后,则开始相关代码的编制(CSS+DIV、AJAX、Java)。

4) SEO
SEO则根据原型提出搜索引擎优化的意见,为制作阶段代码优化做准备.

这个阶段一定要保证与需求部门沟通到位,当产品界面最终定稿后,建议再组织一次讨论,这次用户面对着是实实在在的产品,所感受会和之前有所不同.对产品效果上来说,这次的讨论也会有不少收获。

四 界面设计规范及功能实现

主要执行人员:UI、UE、程序、SEO
需沟通人员:UE、销售

1) 设计规范
考虑到在动态实现方面,光凭效果图很难直接的给予表现,这时需要配合使用说明文档及设计规范规范来做辅助。比如按钮及文字链在触发前后的样式,文字间距…。如下图:

2) 代码及程序开发
由UID进行页面的代码开发(CSS+DIV),并需严格参考SEO理出的相关规范,针对一些AJAX的动态效果还需要程序部人员协助完成,当静态HTML完成后即由技术人员进行程序嵌套,并实现预期的功能。
这个阶段由UI、UE全程跟踪,保证HTML和设计稿最大限度相似前提下,对已实现的功能进行测试,并出交互设计改善文档,提交给技术人员。

五 产品上线

主要执行人员:需求部门
需沟通人员:UI、UE、程序、销售

这个阶段主要是内容的添加,主要由相关频道编辑完成,对于软性广告位这块还需要和销售进行协调。完成内容添加后,由需求部门、UI、UE进行核查,在保证和内容、功能完整后,进行整体上线。

六 分析报告及优化方案

主要执行人员:UE
需沟通人员:UE、UID、程序、需求部门、 销售

产品上线后,由UE进行数据及意见的收集,在二周后出相关改善文档,协调各部门进行优化的工作。

在产品设计中我基本上都是采用这套流程,也希望和大家同共探讨。
这篇文章没啥外链,还是来点吧,推荐看下 白鸦的Blog

admin UI&UE, 产品项目流程和规范 , ,

March 17th, 2009

颜超敏原创,转载请注明作者和出处。)

一个电子商务网站,购物车是几乎必备的设计,购物车作为衔接商品和结帐流程的中间桥梁,其重要性不言而喻。
要设计一个优秀的购物车页面,首先要做的就是——参考优秀站点的设计。

卓越网的设计

今天找的例子是卓越网的购物车业务。

我挑选了一个我心仪的商品,然后点击 “购买”。

1、优惠推荐页面

卓越并没有让客户立刻进入一般的购物车页面,而是进入“关联优惠商品推荐页面”,左侧是优惠商品,右侧才是一个
缩小版的购物车,对于这个设计,我认为卓越的设计者应该是觉得既然客户将这个商品加入了购物车,当然对这个商品
比较熟悉了,所以也不必立刻进入购物车页面,但是却又希望客户购买更多的东西,所以增加了推荐页,但是推荐
又不能随便来,要把握客户的心理——只有购买这个商品才有的优惠啊!这是一种贪便宜的心态,往往就会继续选购。

2、点击修改购物车进入购物车页面

由于我刚才加入了一个商品到购物车里面,所以进入后当然就是显示该商品了。而且按照常规也都提供了加入收藏夹、
删除、清空购物车、结帐等按钮,并不算特别。但有一点是其它站点没有做的设计,就是当你将购物车(包括收藏夹)
的所有商品全部删除时,一般的站点也就只是显示:您的购物车为空,请你继续购物之类的提示,但是卓越做多了一步:
将一些常见的商品目录也罗列出来,让客户方便选购。目的就是尽量不要让客户到了这一步中止了操作,只要肯继续浏览
商品,就有继续购物的希望,不要轻易放过。

总结和改进

其实卓越网还有很多推荐,但是其它的业务了,从添加商品后的一系列的设计,总结来说就是:

要持续的将最合适的商品推荐给客户!

除了卓越网的这些推荐方式,我觉得我们在购物车页面的设计可以继续改进一下,购物车页面有三种状态:
1、有商品、有收藏;2、无商品、有收藏;3、无商品、无收藏。
那么针对这三种情况,我们分别推荐些什么商品给客户呢?按照什么作为参照物进行推荐呢?
1、当有商品时,按照商品进行推荐,可以推荐关联的商品,如搭配、Also Buy(羊群效应)等;
2、当只有收藏时,按照收藏来推荐;
3、当无商品、无收藏时,按照浏览历史来推荐;
4、连浏览历史都无,按缺省的产品目录来推荐。

admin UI&UE , , ,

Axure RP Pro 网站策划功能六合一

February 26th, 2009

Axure RP Pro 是一套集成六大功能于一身的网站策划软件,这六大功能分别是:

  • 网站架构图(Site Structure)
  • 示意图 (Wireframe)
  • 流程图 (Flowchart)
  • 交互设计 (Interaction Design)
  • 原型设计 (HTML Prototype)
  • 规格文件 (Specification)

Axure RP Pro 软件的每一个功能都是专为网站策划人员而设计的,藉由这些功能,您可以更快速、更容易且更有效率的完成设计工作。

Axure RP特色-Design更容易

一. 网站架构(Site Structure)

Axure RP软件可以快速绘制树状的网站架构图,而且可以让架构图中的每一个页面节点,直接连结到对应网页。

二. 线框图(Wireframe)

Axure RP wireframeAxure RP提供与Windows软件相同的拖放操作环境,您可以快速绘制线框图,就像操作PowerPoint或Visio一样简单。

内建介面物件(Widget)

Axure RP内建了许多会经常使用到的widget物件,例如:按钮(Button)、图片(Image)、文字面板(Text Panel)、单选按钮(Radio Button)、复选框(Checkbox)、下拉式选单(Droplist)。甚至您可以藉由Dynamic Panel的功能,来设计动态介面,例如:下拉式选单、页签,甚至是更进阶的AJAX或RIA的功能。

三. 流程图 (Flowchart)

Axure RP Flow chart
Axure RP Flow Diagram快速建立流程图就像建立wireframe一样容易,Flow Widget中有设计流程图时会经常用到的形状,您可以轻松在流程之间加入连接线并设定连接的格式。

Axure RP特色-Experience更交互

四. 模拟交互设计(Interaction)

大多数的widget可以对一个或多个事件产生动作,包括 OnClick、OnMouseOver和OnMouseLeave诸如此类。

更拟真的交互设计-仿真数据库程序及AJAX效果

Dynamic Panel Widget可以帮助我们规划与设计丰富的动态介面,Dynamic Panel 包含一个或多个状态(state),而每个状态都可以包含一个widget集合,当这些交互效果结合起来时可支持Click、MouseEnter、 MouseOut,以及显示、隐藏Dynamic Panel目前的状态,这让我们的Prototype具有使用动态介面元素的能力,例如:下拉式选单(drop down menu)或页签(tab)等类似AJAX或Rich Internet Application的功能。

五. 自动输出网站原型 (HTML Prototype)

Axure RP PrototypeAxure RP可以将您设计的wireframe,输出成符合Internet Explorer或Firefox等不同浏览器的HTML prototype。

也就是说,您不需要安装Axure RP或任何其它软件,就可直接将产生的Prototype档案email给客户,或是发布到网页服务器让客户或使用者检视和操作,Prototype包括 Sitemap、Page Notes、Annotations和功能性的交互效果,是一个能有效测试所提议的功能和清楚沟通设计的工具。

Axure RP特色-Present更方便

六. 自动输出Word格式规格文件(Functional Specification)

Axure RP SpecAxure RP可以输出Microsoft Word的格式的文件,不只容易阅读,更可以展现规格文件的专业,能有效的记录、沟通和取得设计的最后确认。

规格文件包含了目录、网页清单、网页和附有批注的Master、撷取的画面、Annotation、Interaction和Widget特定的信息,以及结尾文件(例如:附录),规格的内容与格式也可以依据不同的阅读物件来变更。


除了上述六大功能之外,Axure RP提供了许多内建的网站UI组件(Widget),批注功能,共享版型功能,方便网站策划的维护及设计,更能提高网站策划的效率。

 

整页注解/局部注解

Axure RP提供单一wireframe page的注解功能,也提供针对wireframe中的每个widget的注解功能。

Masters共用模板功能

在设计Wireframe时,如果能善用Masters共用模板功能,您可以节省下不少重复修改的时间,Master可以是经常被使用到的widget集合,例如:页首、页尾、或是一个登入的画面。

Master当作范本(Template)

Masters可设定放置在Wireframe的背景中,这样就可以将Master锁定在Wireframe的背景,也就是Master的Wireframe被定义的那个位置,这个功能对定义经常使用的模板或Wireframe的版面配置很有帮助。

admin UI&UE, 产品项目流程和规范 , ,

Web设计中9个常见的可用性错误

February 24th, 2009

简介

现在,比较牛的设计师和开发者都认识到了可用性在他们工作中的重要性。可用性好的网站会极大提高用户体验,并且好的用户体验会让用户更加快乐。用聪明的设计决策取悦并满足您的访客,而不是阻挠和激怒他们。下面是9个网站经常面临的可用性问题 ,以及对于这些问题的推荐解决方案。

 

By Dmitry Fadeyev

现在,比较牛的设计师和开发者都认识到了可用性在他们工作中的重要性。可用性好的网站会极大地提高用户体验,并且好的用户体验会让用户更加快乐。用聪明的设计决策取悦并满足您的访客,而不是阻挠和激怒他们。下面是9个网站经常面临的可用性问题 ,以及对于这些问题的推荐解决方案。 您可能还对下面的文章感兴趣:

1. 太小的链接点击区域

设置超文本链接的目的是被点击,确保它们很容易点击才有意义。下面的示例中的链接实在是太小了;点击它们的难度太高。 这些是 评论中的链接,Hacker News 是一个社会新闻的网站。 (点击区域用红色突出显示) :

HackerNews link click areas

下面例子中包含相同的界面元素,链接的评论,但是这个例子中有一个很大的可点击区域:

NewsPond link click areas

Newspondcomments link.

为什么我们需要一个更大的点击区域? 很简单。 因为我们移动鼠标并不是很准确。 一个大号的点击区域使鼠标光标悬停在链接上更容易。如何能有一个大号的点击区域呢?我们可以使整个链接更大,或者使用CSS “padding”属性增加链接周围的空间。 代码如下:

<a href=“http://www.examplesite.com”style=“padding: 5px;”>Example Site<a>

为了使例子简单点,这个CSS样式直接写在代码里了,但在现实生活中您可能是在您的CSS文件中添加一个样式,给这个链接一个class或者是一个id,然后指向它。

在37signals上,你可以阅读到更多关于填充链接以更适用于鼠标点击的文章,的文章棉衣链接的目标 。文章认为,填充为用户提供了 “舒适的感觉。真的非常容易点击链接。感觉链接就像是在配合你工作不是和你对着干你。 ”

2. 错误使用的分页

分页指把内容分为几页。如果需要显示一个很长的内容列表,这是网站上常用的方式;例如,商店中的产品或是相册中的照片。因为这种目的使用分页是有意义的,因为太多的项目显示在一个页面上将会使网页下载和处理速度变慢

FeedMyApp pagination

FeedMyApp以正确的方式使用分页:把其海量的应用服务列表以合适的量显示。

但是现在还有人用另一种方式在Web上使用分页。 .内容网页上,比如博客的一篇文章,有时也会分成若干页。 为什么这样做? 有什么好处么?不太可能是文章实在太长了,因此需要分页; 在大多数情况下, 这样做是用来提高页面浏览量的 。因为很多博客和杂志通过广告获得收入,获得更多的页面浏览量(即单独网页的加载数量)来提高他们的浏览统计数据,使他们能够在每个广告上获利更多。

Wired article paginated

Wired 上的文章《Google的Logo》 分为8页,非常难以阅读。

虽然这可能看起来像是一种简单的方法,让您可以从广告中挤压出更多的钱,但它也带来了两个主要的问题。

首先,这样做真的,真的非常讨厌。 阅读一篇文章不得不加载好几页一点也不好玩。 您给您的访客设置了一个完全没有必要的障碍

第二个原因是SEO(搜索引擎优化) 。 搜索引擎使用您网页上的内容理解它是关于什么的,然后相应地进行索引。 如果内容分成若干页,内容就被稀释了,每个页面更难理解并且其中和主题相关的关键字也更少了 。 这可能会对文章在搜索引擎中的排名产生不利影响。

3. 重复的网页标题

每个网页上的标题都是非常重要的。网页标题就是HTML代码<head>区段中我们写在<title>标记里面文本。 有时,人们在编写他们网站模板时设定一个通用名称——例如其网站的名字——然后在整个网站反复使用相同的名称。 这样做是错误的,因为为每个页面设置单独的标题有几个关键的好处。

第一个好处是,一个好的标题能向您的访客传达很多信息,解释这个页面的内容是什么。人们可以迅速知道他们是否在正确的地方。请记住,标题不仅仅显示在浏览器窗口顶部,它也显示在搜索引擎结果页上 。 当人们在Google的时候看到一个搜索结果列表,他们会去阅读那些网页标题来了解每个网页的内容。仅仅因为这个,你也应该花一些时间来优化你的网页标题。

第二个好处是SEO。 搜索引擎需要不同的信息来为一次特定的查询排序搜索结果。 网页标题是重要的信息之一,它们用来衡量您的网页与一个特定的搜索关键字的相关程度。 这并不意味着你应该在标题里添加许多关键字——这与第一个好处相矛盾——但你应确保每个标题简明扼要地介绍了网页的内容,其中包括几个你觉得人们会用来搜索这篇文章的关键字。 下面是一个好网页标题的例子。这是一个Smashing Magazine网页标题在Safari中浏览的样子:

Smashing Magazine page title

例子里,我们可以看到文章标题,类别和文章的网站名称。 把网站名称放在最后,更强调的是网页本身的内容 ,而不是网站的品牌。 下面是标记中HTML代码的样子:

<title>Vintage and Blues WordPress Themes | Freebies | Smashing Magazine</title>

Google搜索结果中这个页面的样子:

Smashing Magazine SERP

4. 内容难以扫描

为了确保您的网站易用性,您不仅需要有一个好的设计,你还需要良好的Copy(文案)。 Copy(文案)是一个术语,用来描述网站上所有的文本内容。 是的,好的设计能引导您的访客浏览您的网站,将其注意力集中在重要的事情上,帮助他们理解信息块,但访客仍然需要阅读文字来处理信息。这意味着Copy是你整体网站设计中的一个重要组成部分

在你能写出一份好的文案之前,你需要了解人们实际上如何浏览你的网站。不要以为你的访客会从头到尾阅读所有的文字。 那样当然很好,但是不幸的是,根本事实不是这样滴。 人们被Web上的信息狂轰乱炸,而且我们中的大部分人在尽力去消化那些信息。这就导致非常疯狂的浏览行为:我们从一块内容跳跃到另一块,从一个网站网站跳到下一个。人们往往不能从头到尾阅读一个网站;他们从最先吸引他们注意力的那一块内容开始,然后移动到下一个捕获他们兴趣的地方。 这个模式看起来有点像这样:

Basecamp

The Basecamp 的到达页面。

红圈表示访客目光聚焦的区域,数字表示他们看那些元素的顺序。用户的视线在页面上的兴趣点之间跳跃,想要充分利用这种混乱的浏览模式,你需要用一种特定的方法组织你的文案。下面是几个重点:

  • 设置几个“关注点”(Points of focus)。这些部分吸引访客的注意力,你可以用粗体,高对比度的颜色和较大的字体来实现这个目的。你也可以使用图片,例如图标,把图标放在文字旁边,给这区域带来更多的视觉吸引力。
  • 每个“关注点”应该伴随一个描述性的标题。在进一步阅读文案之前,访客可以了解到一点内容概要。不要做“标题党”,标题应该简单明了。人们希望迅速获得信息,藏着掖着只会惹恼他们。
  • 任何文字都应该简短并容易消化。只提供要点,把其余的都删去。在大多数情况下,文案撰写者想补充说明观点的文字只是增加了网站的负载。人们将只阅读小块小块的文字,并且忽视大段的文章。把你的文案删减到不能再减的地步吧。

 OpenOffice page

“为什么你应该使用的 OpenOffice;;; ”网页肯定可以改进。除了顶部的大横幅之外没有设置明确“关注点”;并且,文案聚在一起成了一个大疙瘩,阅读起来相当困难。

Things features

Things 软件的功能页,每个功能都是一小段文字,包含一个自己的图标和标题。这使得这个列表非常容易被扫描。为了使文案给人印象更深,列出实际的好处,而不是功能的名字。

5.没有办法取得联系

如果你想建立一个成功的社区,用户参与是非常重要的,并且如果你想建立一个成功的网站或是社会网络软件,社区是非常重要的。此外,如果你想拥有忠实的用户,用户参与同样很重要。迅速回答用户提出的疑问,修复他们遇到的问题并不仅仅意味着你有很好的客户服务——这意味这你在乎他们,并且你的用户和访客会很欣赏这一点。

但是很多网站依旧没有给访客一个方便渠道和公司取得联系。一些网站甚至没有Email地址或是联系方式。

CocaCola contact page

当你点击可口可乐Coca-Cola网站上的“联系我们”链接。显示出来的页面,没有电子邮件,没有电话号码。大部分的链接指向“常见问题”;反馈表需要您的地址和年龄,还有500个字符的限制;“提交一个想法”的表单有两页那么长,还包含一大堆条款。看来可口可乐真的不想你与他们联系。

当然,把你的Email地址放到网站上可能会吸引大量的垃圾邮件,这里有几个解决办法。

Enkoder 是我最喜欢的把Email放到Web上的解决方案。Enkoder是一个软件,有两个版本,一个是基于Mac平台的,一个是免费的网络应用。它可以加密你提交的任何Email地址,生成一串乱七八糟的JavaScript代码,你可以把它放在你的页面上。当网页加载这段代码的时候,你的电子邮件地址就会奇迹般地出现,还是一个可点击的链接。抓取EMail地址的爬虫机器人不能读取你的地址,起码计划是这样的。

你还可以用“联系表单”(contact forms)来避免在网页上显示你的EMail的问题,但是你仍旧会收到一些垃圾邮件,除非你使用一个有效的Captchas,或是其他垃圾邮件保护机制。请记住,像Captchas这样的东西是用户交互的障碍,并且可能会降低用户体验。

论坛救援。在线论坛是一个很好的沟通渠道,是一个不错的和用户联系替代方案。一个公开的论坛比一个简单的“联系表单”或Email更好,因为你的用户在论坛上可以相互帮助。即使你不亲自回应用户,其他的用户可能帮助那个人,解决他的问题。

GetSatisfaction 是一个Web应用程序,它就像一个论坛,用户可以在板块里张贴自己的问题和反馈,用户或是团队成员都可以回复。用户可以添加评论阐述自己的问题。无论你选择GetSatisfaction的托管解决方案或是运行你自己的留言板,这样双向的沟通渠道是一个与用户保持联系的优秀方法。

GetSatisfaction Apple

The GetSatisfaction forum for Apple.

6. 没有办法搜索

大部分人到达一个页面会立即开始寻找搜索框。也许他们知道自己在寻找什么,并且不想花时间学习这个网站的导航结构。Jakob Nielsen 管这些人叫“搜索优势用户”。

我们的可用性研究显示,超过一半的用户是“搜索优势”的,大约五分之一的用户是“链接优势”的,其余则呈现出混合行为。“搜索优势”用户通常进入一个网站时直奔搜索按钮,他们对在网站上逛逛没有兴趣;他们是“任务中心”的,而且想要尽可能快地找到明确的信息。 Jakob Nielsen

无论您运营的是在线商店还是Blog,你都需要搜索框。人们会来寻找一个特定的产品,或是一篇他们记得的文章,他们想要用一个快速搜索找到它。好消息是,如果你还没有在你的网站上设置搜索,这件事其实很简单。

你不必自己写一个搜索功能,Google和Yahoo这些搜索引擎已经索引了你网站的大部分页面(如果不是全部的话),因此,所有你需要做的就是选择一个,然后把搜索框嵌入到你的网站里。

<form action="http://www.google.com/search" method="get">
<fieldset>
<input type="hidden" name="sitesearch" value="smashingmagazine.com" />
<input type="text" name="q" size="31" maxlength="255" value="" />
<input type="submit" value="Google Search" />
</fieldset>
</form>

下面是Yahoo的:

<form action="http://search.yahoo.com/search" method="get">
<fieldset>
<input type="hidden" name="vs" value="smashingmagazine.com" />
<input type="text" name="p" />
<input type="submit" value="Yahoo Search" />
</fieldset>
</form>

为了让它运转起来,你需要做的只是把“hidden”字段的值改成你网站的域名。这将把Google或是Yahoo的搜索查询范围限制在你的网站内部。你可能还想要修改下提交按钮上的文字,说些你想说的……

7. 太多的功能需要注册

你的网站可能有些内容或者功能要求访客注册才能使用。这很好,但是小心有多少内容被藏在了注册流程后面。深度交互的Web应用,例如EMail,文档编辑和项目管理,其100%的功能都只有注册用户才能使用。其他网站,例如社会化新闻网站,不要这么做。我可以浏览DiggReddit上所有的故事而不用登录;用户没必要显示出自己的身份才能享受这些功能

当你实现一个登录限制的时候,小心不要把那些不需要用户身份认证的功能也锁起来。一些Blog需要人们注册之后才能发布评论。当然这将大大减少垃圾邮件,但也同时大大减低了评论数。

你在网站上设置的限制会影响用户的参与行为,消除那些限制,比如注册什么的,几乎肯定会增加用户的参与程度。事实上,一旦用户开始使用你的网站,他们将更可能注册账号,因为他们其实已经参与进来了

 

GetSatisfaction login

The GetSatisfaction;;; 的交互界面允许你填入你关于一家公司或是一个产品的评论,然后点击“发布”按钮。之后你看到的却不是你发布的评论信息,而是一个“登录或是注册”的提示。这很扯,用户可能已经被打击到了……

Pixlr

Pixlr是一个在线图片编辑应用,这是Pixlr的到达页面,上面有一个链接名为“Jump in n’ get Started!”,点击后会打开应用。没有试用,没有注册;你现在就可以开始试用这个应用了。

Posterous

Posterous,一个博客托管网络,使用甚至不要求注册。只是发送一封包含你的文章的Email,你的Blog就创建好了。

8. 老的永久链接指向“不存在”

永久链接(Permalink)指一个链接固定指向一个页面,不会被改变;例如,指向一篇博客文章的链接,就像你现在正在读的。问题出现了,当网站转移到另外一个域,或者结构重组了。那些指向现有页面的老永久链接可能就断掉了,除非你做了点什么。有种东西叫做301重定向。 301重定向是存在你服务其上的几个指令,它可以把访客重定向到恰当的页面素以,如果谁用老链接访问你的网站,他们将不会看到一个404错误页:301重定向会把他们转向正确的地方,只要你设置正确。数字“301”制定重定向的类型:permanent。

Frye Wiles 404 page

Frye / Wiles 404 error.

有各种不同的办法做301重定向。他们是如何实现部分取决于你使用的Web服务器。这里介绍一下301重定向的基本操作,基于目前最流行的Web服务器,Apache。

下面的代码应该在一个名为“.htaccess”的文件里,这个文件应该在你网站的根目录下。是的,文件以一个英文逗号开始。这意味这是一个系统文件,标准文件浏览器会默认隐藏这种文件。因此,如果你不能用你的文件浏览器或者FTP客户端看到它,去把你的“Display invisble files”选项勾选上。用你的编辑器创建或者(如果文件已经在那里了)编辑这个文件。每当访客到达你的网站上,这个文件中的重定向规则将会被应用。

下面是些简单的301重定向代码:

RewriteEngine on
Redirect 301 /oldpage.html /newpage.html

这些代码相当简单明了。如果谁想试着进入 “yoursite.com/oldpage.html,” ,他们会立刻被重定向到“yoursite.com/newpage.html.” 。顶部的“RewriteEngine on”是设置mod_rewrite引擎为开启状态(默认是关闭的)。这就是处理重定向的引擎。

9. 老长老长的注册表单

注册表单是一砣障碍物。因为填写表单很费劲,并且很无聊。人们不得不投入时间和精力去注册,之后还得投入更多的时间和精力去记住他们的用户名和密码!

我们可以降低这种阻碍,通过尽可能缩短注册表单。考虑到所有情况,注册系统的目的仅仅是能够识别每一个用户,所以,伟义的要求就是一个独特的标识(如用户名或是Email地址),还有一个密码。如果你不需要更多信息,就不要问了。让表单尽可能短。

ReadOz signup form

ReadOz的注册表单可长了。仔细研究下,我们发现,一半以上的字段都是可选的。如果这些是可选的,也就是并不真正需要的。这种形式可能会让用户看一眼就跑了。只显示那些人们注册时必需填写的,其余的可以以后再说。

Tumbler Signup

Tumblr(已经被墙了)有一个最短的注册表单。只有三块,电子邮件,密码,你新Blog的地址。

Basecamp signup

Basecamp 的注册页用了一个聪明的伎俩。页面上除了去首页的链接没有其他任何网页导航。这样可以使用户集中在注册过程中,不会受到任何干扰离开页面。

少过脑子

可用性就是使工具更加容易使用。少让用户过脑子,少让用户受挫折。一个网站应该完成所有的工作,呈现给访客的只是那些他们寻找的东西。可用性还包括人们使用你的网站时的体验,因此,关注细节,在实现页面的呈现和感觉的时候。

好的,如果你有些对这篇文章的想法,或是遇到了任何其他的可用性问题,写在下面的回复部分告诉我吧~

关于作者

Dmitry Fadeyev 是 Usability Post blog的创始人, 您可以在那里阅读他关于好设计和可用性的想法。 在Twitter上Follow Dmitry: @usabilitypost.

关于译者

iamsure 是一个搞产品设计的人, 他的Blog是iamsure,他有时候在上边写点有的没的。 同样,也在Twitter上Follow iamsure: @iamsure

(al)

admin UI&UE ,

老奸巨猾的阿里巴巴产品列表翻页设计

February 16th, 2009

最近受某500强企业委托,诊断分析了几种不同类型网站的搜索引擎优化SEO情况,并提出我们的改进建议,其中包括部分B2B网站。谈及B2B,自然包括阿里巴巴在内。在分析阿里巴巴网站结构的时候,查看了它的列表翻页设计,再对比中国制造网和慧聪网,感叹阿里巴巴实在是老奸巨猾、精明势利,相比之下,madeinchina比较忠厚老实,慧聪网则有点自作聪明,什么原因,看一看他们的列表翻页设计:

阿里巴巴列表翻页设计:

点评:最大的优势是无论翻到哪一页,始终显示第一页的链接,雷打不动,因为这是付费最多的客户页面……至于排名靠后的,虽然SEO的角度认为显示多几条更有意思,但阿里认为一口气显示太多后面的链接不利于靠前面的列表点击率,所以当前页面以后的只能显示几条。至于人们常见的“最后一页”,对不起,排在最后一页谁还理你呀,根本不给机会。

再来看看别的网站:

中国制造网made-in-china(MIC)产品列表翻页设计:

点评:感觉没有重点,这还其次,主要是相比阿里巴巴,MIC的每个页面都例行公事地将“最后一页”呈现出来,无论是链接关系还是曝光度均与第一页平起平坐,这种年深日久的网站、按时间顺序排列的列表,最后一页是什么概念?通常是2000年的信息了,感觉作为研究资料还不错,作为商业资料那叫过时。所以,中国制造网按部就班地呈现第一页和最后一页,那是没有运营导向的做法。顺便,说起made-in-china.com,上次一个美国客户跟我说:美国那些人不知道阿里巴巴,但made-in-china就知道,嘿嘿。

慧聪网产品列表翻页设计:

点评:说慧聪自作聪明是有道理的,因为它不仅吝惜在一个页面展示更多的列表链接(有且只有5个),而且直接把第一页链接的展示忽略了,却把重心移到让用户自己填写页面号码,其实,当用户不知道要找的内容在哪个列表的情况下,是“盲”的,所以,填写这个动作,从用户体验的角度要一个无妨,但位置不要拔太高,真正要拔高的,是将浩浩荡荡的列表链接展示出来,并且始终突出第一页链接。

……

接手这个调研项目的时候,看阿里首页是某个面孔,项目快做完了再去看,倒,首页改版了,这不增加偶们工作量吗?不过,阿里总算把上次那个让人找不北的首页改版了(还恋恋不舍地给了一个查看旧首页的链接),也是好事。

admin UI&UE ,