学习使用CSS+Div配合cms系统完美建站

2008/11/07

第二期:两周学习织梦建站完全教程

第一天

  • 织梦产品的介绍
  • 织梦产品的安装
  • config.php详解
  • 织梦目录详解
  • 织梦模板目录详解

第二天

  • 织梦的设计架构
  • 织梦数据库的常用表介绍
  • 新建一个织梦模板
  • 织梦文章调用方法介绍
  • 文章底层模板修改详解
  • 跨频道调用及整站调用文章列表

第三天

  • 织梦图片文章调用方法介绍
  • 图片与文章列表的图文混排
  • 织梦文章时间的多种调用方式

第四天

  • 文章内容页的制作及修改
  • 织梦后台自定义标签的使用及调用方法

第五天

  • 织梦列表页文章的调用
  • 列表页的全站调用及混编调用
  • 列表页的制作及注意事项

第六天

  • 织梦常用标签的使用
  • 常用标签的底层模板修改方法
  • 友情链接、投票等系统的调用

第七天

  • 织梦的自定义宏标记的制作
  • 织梦的自定义宏标记的两种调用方法
  • 织梦的自定义宏标记的使用注意事项

第八天

  • 织梦智能标记的使用
  • 织梦专题及单页面的制作及使用方法
  • 织梦用户登陆框的调用及修改
  • 织梦用户登陆后登陆框的变换
  • 用户后台的修改

第九天

  • 织梦系统与discuz的整合
  • 织梦系统与phpwind的整合
  • 织梦整合API文件详解

第十天~第十四

  • 使用织梦cms系统及div+css制作一个完整的新闻发布站点

第一期:十天学习DIV+CSS制作标准web页面

第一天

  • 什么样的网页可以称为标准的Web页面
  • 使用Web标准开发网页的优势
  • 初识XTHML / DIV / CSS
  • 制作标准Web页面的注意事项

第二天

  • 常用CSS方法的使用详解
  • CSS的写法与格式
  • Class与id
  • CSS对文字、列表、背景、超链接等的操作

第三天

  • CSS开发及调试工具
  • 多浏览器支持(每节课都要提到)
  • CSS对整个页面的控制

第四天

  • margin / padding 的使用
  • float 详解
  • 网页的横向排版和纵向排版

第五天

  • 用CSS+DIv替代表格
  • 只要是Table能完成的CSS+Div一定能完成
  • 使用margin / padding配合网页表格制作

第六天

  • 带领学员使用Web标准制作一个个人网站
  • 整站的规划、目录结构、命名规范
  • SEO初步知识

第七天

  • 完成首页
  • 网页栅格布局
  • 头部尾部、sidebar、main

第八天

  • 完成两个附页面(自我介绍、关于本站)
  • 图文混排
  • 定位与控制

第九天

  • 完成两个附页面(我的照片、下载资源)
  • CSS对图片的控制
  • CSS列表详解

第十天

  • 完成个人网页(全部五个页面)的制作
  • UCD初步介绍
  • 解决学员Email问题及其他遗留问题

Tags:,,,, Posted in Web Development6 条评论

从不言感伤

2008/10/30

1、近半年来,文字越来越少,更没写过关于自己的东西,感觉这个weblog已经变味了,似乎他并不属于我。

2、突然感觉周围一片的混沌,我不知道我在哪,也不知道在做什么,更不知道我要的到底是什么,只有工作。

3、很忙,很累,忙到不知道到底忙了些啥,确实长进了不少,意义呢?

4、离曾经的圈子越来越远、越来越远,无尽的寂寥,喧闹的城市只有我一人。

5、我知道鱼和熊掌不能兼得,一个又一个的围城,一个又一个的 不能兼得。

6、想念好多人……

7、失去越久的人越是浓情,他们往往被那些拥有的人所伤。

8、很多朋友,失恋的、热恋的、入伍的、退伍的、辞职的、下海的、混日子的……虽不曾说,but I want you know that I'm watching you .

9、人总是在挣扎中寻找活下去的理由,而总是有一个看似合理的理由让他苟且。

10、经常听一些听不懂的歌,甚至法语、西班牙语… 就是为了听不懂才听,真的不想在听歌的时候还在思考歌词。

11、总有一个完不成的任务压在身上。

12、标题党、网络流氓、下三滥、傻逼无处不在。

13、人类是最愚蠢的动物,总是自己玩自己。

14、是什么让我说了这么多?

15、从不言感伤,破次例。

16、一切仍将继续

Tags: Posted in Rubber Soul3 条评论

免费的非商业PHP空间

2008/10/19

前几天给DreamHost续了费。

在DreamHost11岁生日的时候,官方出现主页亮出了无限空间的牌子。就在我这次续费之后我发现我的服务器也是无限空间的了(不知是不是仅仅是巧合)。在升级无限空间之前我已经有了700G的文件存储空间,根本就用不了,我的站 ( lidecheng.com ) 做了3年了也只占用了2G多的空间,反正服务器闲着也是闲着,现在分享出来给大家做站吧,不过在之前您必须注意:DreamHost是美国空间,您的域名所在的ip可能会遭到GFW无情的封锁,导致国内用户无法访问您的网站。而且如果您能遵循以下几个条款,您可以联系我。

1、不得上传有版权的文件,如mp3、cd/dvd镜像及所有可能会有版权争议的文件。

2、为了他人的正常使用不得制作涉及黄色内容、反动内容的网站。(维权及个人网站不属于此类)

3、非商业。

4、不欢迎采集站、小偷站等垃圾网站。

5、每人限2域名,不限空间,不限流量。

6、如因故停止使用本人提供的服务器请告知。毕竟dh后台那么多的域名让人看着眼花缭乱的也很烦

7、发现您违反上述条款我将在Email通知您后一周时间删除您的ID,如有异议请绕行。

8、域名对应一个mysql数据库,空间均为无限大小,没有用户面板。

9、无义务帮您解决技术问题,请自行Google it。

10、目前服务器续费到2009年11月2日,目前没有打算放弃dreamhost,如果停止续费会提前通知。

11、由于近期开通人数持续上升,已经占用了本人太多工作和休息时间,即日起,每个开通用户收取手续费10元,并开通无限量mysql数据库。(你和我都不缺这10块钱,目的是为了减少很多鲁莽的行为,比如挂垃圾站,和不停的重复申请等。请各位见谅。2008-12-15,之前申请用户可继续使用。)

12、请确认你有权限更改你的域名的dns。(.ru域名是不可以的)

关于此空间的介绍和支持类型请看这里。条款都是为了大家都能用上服务器及账户的安全着想,没有任何私心,不用您付费,不用您的广告位交换,也不强制您做连接。

联系方式:

Email / Gtalk:i@lidecheng.com

QQ:6030537

MSN:lidecheng@live.com

联系时请务必主动提供您的域名、您的联系方式等尽可能多的信息,方便备案管理。

请尊重他人时间。

Tags: Posted in Rubber Soul12 条评论

css hack 针对不同浏览器的写法

2008/10/13

又是浏览器的兼容问题。

针对不同浏览器对页面的显示方式来写css文件,需要使其对IE6 IE7 FIREFOX都有最佳的显示效果,或要调整css在其中一中浏览器中的显示方式,可以通过下划线(_)、星号(*)来处理:

比如要居中显示,我们都知道css中写法为:

text-align: center;

当然这属性是所有浏览器都解释的,如果只想让ie6有居中的效果而firefox和IE7则不应用居中,可写为

_text-align: center;

如果想让所有IE都解释而在firefox不解释则写为:

*text-align: center;

而ie6与ie7的不同在于ie6解释!important,而ie7会解释!important。

区别不同浏览器的css hack写法为:

区别ie6和ie7:text-align: center; text-align: left!important;
区别firefox和ie6:text-align: center; _text-align: left;
区别firefox和ie7:text-align: center; *text-align: left;
区别firefox、ie6和ie7:text-align: center; *text-align: left; *text-align: right!important;

总结:

IE6能识别*,但不能识别 !important,
IE7能识别*,也能识别!important;
FF不能识别*,但能识别!important;
IE6支持下划线"_",IE7和firefox均不支持下划线"_"。

Tags: Posted in Web Development2 条评论

上海,三个月印象

2008/10/09

7月11日到上海,已经3个月了

1、上海确实是个大城市,比想象中要大,大的多。

2、有的东西贵的吓人,也有的便宜的吓人。

3、上海几乎没有一元纸币……

4、想干点啥都有几十个人排着长队。

5、公交 - 地铁 - 上班的人流……

6、遍地是黄金,但没有我的那一块。

7、上海话比外语还难懂。

8、两门以上语言很重要。

9、赚多少钱都不够花的,总有花出去的理由。

10、没有亲人、没有朋友的城市有你想象不到的孤独。

Tags:, Posted in Rubber Soul3 条评论

One pc , Different versions of IE

2008/09/26

还是那句话,作为一个Web Front-end  Developer最痛苦的莫过于用户桌面上的不同种类(甚至版本)浏览器,大部分时间我们在调试页面使其能在不同浏览器上正常显示。前面我也曾经介绍过一款IE上的调试工具IE WebDeveloper,下面跟随的问题是同样的代码在IE的不同版本上的显示效果仍然有巨大的差异(挨千刀的微软),我们要兼顾到IE6,IE7,甚至IE5.5的用户(基本上使用5.5版本的已经很少了)。这就是下面要解决的问题:如何在一台PC下同时运行不同版本的IE

在网上搜索此问题的朋友还不少,找到的方法也不外乎几种:虚拟机、降级至IE6再使用绿色版IE7,第三方软件等,今天我介绍两种方法来实现一台电脑商运行多个版本的IE。

A:你的电脑正在使用IE7:

Multiple-IE 这个工具会帮到你,通过它可以实现 IE6, IE5.5, IE5, IE4 & IE3和你的IE7同时运行。
mutiple ie thumb
安装Multiple IE:
setup mutiple ie 1
setup mutiple ie 2
官方网址:http://tredosoft.com/Multiple_IE
下载地址:http://tredosoft.com/files/multi-ie/multiple-ie-setup.exe

B:你的电脑正在使用IE6:
如果你的电脑正在使用的IE版本为6,且你只需要测试页面在IE6/7上的显示效果,那么您除了可以选择下载一个绿色版的IE7以外还可以使用standalone。
官方网址:http://tredosoft.com/IE7_standalone
下载地址:http://tredosoft.com/files/IE7s/IE7S-setup.exe

Tags: Posted in Web Development我抢沙发

惠普touchsmart,触动心声

2008/09/24

你的父母,长辈或刚刚接触电脑的人是否抱怨过键盘难以上手?是否感觉到与计算机交互好像不是有那么强的直观性、可操作性?iphone的触摸设计是否让你眼前一亮?是否想过pc上也能使用这种完全触摸式的操作方法?

从触摸屏的推出开始,到iphone的诞生,“手指”取代键盘和鼠标,正在成为手机、电脑等数码产品的一大时尚卖点。只要用手指在屏幕上“指指点点”就可以实现对电脑的操作,这样的场景以前也许只能在科幻电影中出现,而现在成为了现实。

惠普日前推出了首款触摸电脑HP Touchsmart PC。这款电脑最受瞩目的是采用触摸屏幕设计,只要轻轻用手指点击或划过屏幕,用户即可进行浏览照片、播放音乐、观看视频、玩游戏、接入互联网、打开电视、查阅家庭日历安排等活动。

先来看一下今天的主角:

HP Touchsmart PC为热衷简单数码生活的人群不断简化产品,丰富体验,并为他们开辟了一个全新的用户群定义:“乐触族”Life of Touch and Fun!(LOTAF)!

Touchsmart PC看起来就像是一台放大了的iPhone。不仅触摸界面设计与iPhone风格接近,而且从外观和色彩设计上也和iPhone相像。iPhone手机凭借时尚的设计和触摸屏技术而风靡全球,而惠普的触摸电脑能引领潮流成为叫好又叫座的主流产品吗?

乐触族(lotaf)的概念是对传统pc操作模式的一次颠覆,开辟了人机交互的新模式,让操作者更直观更方便的操作自己的pc,而且Touchsmart提供的22吋触摸显示器也完美的诠释了lotaf,TouchSmart 系列家用电脑的触屏技术日臻完美,采用双指滚动技术 (Two-finger scrolling) ,可以双指同时触摸,随意滚动缩放,哪怕仅是手指轻轻扫过超薄触摸屏的动作就可以被识别,使用体验极为顺畅。同时,预装专为触摸应用的惠普TouchSmart 软件套装,使用户能快速进入信息、娱乐和社会网络等功能界面,用户可以不用键盘和鼠标,轻松播放音乐、创建播放列表、缩放照片、快速查看天气预报或看电视,易用性更是前所未有。可触摸的22英寸黑晶宽屏显示器表面极其坚固,无畏摩擦和重压,在BrightView超亮屏技术的支持下,高清娱乐完美呈现,画面表现逼真绚丽,美妙世界,真正“触手可及”。

不单单是lotaf的超前概念,这款Touchsmart在性能上也能满足对pc要求苛刻的你,高达4G的DDR2内存和750G的硬盘空间,NVIDIA® GeForce™ 9300 M-GS HD PCI-Express独立显卡(拥有高达2047M的显存),自配的电视卡,还有刚才提到的22吋超大触摸显示器,能够完全满足您全家的娱乐、办公、影音等等所有你能想得到的功能。而13999元的价格对于上述来说也完全是物超所值的!

Touchsmart一上市就引起了轰动和各方面的好评,都对其给出了比较高的评价,pchome(报道连接)、天极(报道连接)等都做了专门的报道。

未满足不同消费群体的需求,HP还推出了一款不足万元的Touchsmart产品,它同样秉承了Touchsmart的lotaf概念,详情请登陆hp Touchsmart的官方网站查看,内有Touchsmart的详细说明:
http://h20426.www2.hp.com/campaign/personal/cn/zh/touchpc/


Tags: Posted in Hardware3 条评论

最短的色情笑话

2008/09/23

胡小明 14:30:04
我光知道世界最短的一个黄色笑话..

lidecheng 14:30:19
我也知道

lidecheng 14:30:31

胡小明 14:30:32
昆 ..

胡小明 14:30:37
草 !!
lidecheng 14:30:41
。。

同道中人啊……

Tags: Posted in Rubber Soul5 条评论

各门户奥运频道UI分析

2008/09/21

奥运战火刚结束,各门户网站就马上发表自己的战绩,又引起了另一场口水战,至于谁是第一我觉得这个并不重要,重要的是从这次奥运报道中我们是否看清楚了自己的优点和缺点,从而吸收经验为将来做准备。

以下是从载入速度、首屏视觉效果、导航、推荐区、奖牌榜、头图、要闻区、通透性、观看直播体验、直播页等对各门户奥运频道进行对比分析。
载入速度
qq 163 sina sohu olympic channel ui analysis

首先我们来看看各门户奥运频道载入速度分析表。
因为数据来源是一个外国网站,测试标准和国内会有点不同,在国内实际载入速度会更慢。(载入速度和网络状况、电脑配置、页面大小、js代码等有关)这次测试目的是在同一条件下得到各奥运频道的参数做对比,从而发现自己存在的问题。
测试时间其中有2天是星期六日,因为是一般星期六日投放大型广告比较少,这样可以减少对数据准确性的干扰。
大家都知道,一个网站的载入速度的快慢直接会影响到用户的耐性。从上图数据可以看到sina奥运频道和sohu奥运频道平均载入时间较长,163奥运频道排中间 ,QQ奥运频道速度最快。
以1024×768分辨率为准, 163奥运频道、 sina奥运频道、 sohu奥运频道均为16屏左右, QQ奥运频道为13屏左右。所以在相同16屏的情况下, 163奥运频道载入速度比sina和sohu要快,但从载入时间段看, 163奥运频道的载入时间浮动较大从6.45s跳到12.47s 从15.92s跳到7.41s,其他门户载入速度较平稳,这个可能是163需要关注的一个问题。
所以综合起来QQ和163在载入速度上做的较好。
首屏视觉效果

qq 163 sina sohu olympic channel ui analysis
首屏信息的多少是吸引用户继续浏览的一个关键,以1024×768分辨率为准,下图阴影部分为各门户首屏信息的显示范围,QQ奥运频道和 163奥运频道显示区域比较大,其次是sohu和sina。

qq 163 sina sohu olympic channel ui analysis

首屏视觉效果QQ和sina的层次比较分明,可以有效的引导用户去浏览,而且sina把广告放到顶部可以减少广告对信息的影响,这个是一个聪明 的做法。163“导航”和“完全夺金历程”区2块大红色在互相争艳,用户的视觉不知道往那里放,而且“完全夺金历程”区和要闻区的架构不协调,形成Z型。 Sohu一片红,导航、广告、近期赛事都混在一起了严重影响用户浏览,近期赛事完全被弱化了。
总结首屏视觉效果QQ和sina做的较好!

导航

qq 163 sina sohu olympic channel ui analysis
在导航方面QQ分类很清晰,新闻、视频、服务、互动几个大区很明显,而且导航紧凑不松散,比较容易寻找内容。163虽然有分区,但每个区 没有明显标记,赛事项目和导航区分不够明显。Sina的区域感不强而且上下导航视觉效果不是那么舒服。Sohu第一感觉就是乱,而且被一堆广告包围着,严 重的干扰导航,分类不清晰,区域感也不强。

总结导航方面QQ做的较好!

推荐区

qq 163 sina sohu olympic channel ui analysis

163的“完全夺金历程” 策划比较好,设计很精致,信息量大,而且视频直播列表方便用户关注现在直播赛事,大部分用户最关注的是金牌有关的信息,这个推荐位正满足了他们,不足处就 是和导航颜色相似容易视觉混在一起,如果通栏广告也是红色(这个可能性极大),那就会出现一片红的情况,本想突出这个位置反而被弱化了。QQ显示的是中国 金牌数字,但点击后是什么就不清楚,现在精明的用户对这类模糊的链接都会保持谨慎态度,后来修改为鼠标触动出现图片介绍。Sina还是保持一贯新闻为主的 风格,推荐的是一些新闻要点。Sohu这个位置功能很齐全但广告干扰比较大。
总结要闻推荐区163和sohu做的较好!

奖牌榜

qq 163 sina sohu olympic channel ui analysis
奖牌榜sina做的较详细,不足之处就是少了个总数和把名次放到国旗后面不过后来修改为名次排前。QQ没有明显的排名符号,整体感觉还可 以,163整体也比较清晰,用“完全金牌榜”来代替“更多”会让网友更容易读懂。但不足之处是显示国家比较少,和位置放置头屏的右上方和信息内容分开,用 户需要一个跳跃性的浏览,不利于浏览。Sohu和sina有点相似都是可以往上滚动来显示更多国家,但滚动效果比较差,设计粗糙,而且整体显的很拥挤。

总结奖牌榜sina和QQ做的较好!

头图

qq 163 sina sohu olympic channel ui analysis

头图位置,sina使用的是单头图进行切换形式,视频被弱化,除非sina的策略不是以视频为主。QQ和sohu形式比较相似上面是图片切换下面是一个庞大的视频区。这样保证了新闻的及时性又突出了视频。
163的意图是想突出视频,把视频头图放到上面然后隔一段文字链才放图片头图,但从及时性来说这样摆放并不适合,新闻讲究的是速度,要跑在对手前面公布。 大家都知道图片更新速度会比视频更新速度要快,视频需要压缩处理才能放上去,相对比图片要耗时。所以想让用户及时看到最新的信息,图片会比视频更快捷。而 且导航下方已经有一个庞大的”完全夺金历程”提供视频和图集.来满足用户需求。
总结头图QQ和sohu做的较好!

要闻区
qq 163 sina sohu olympic channel ui analysis

要闻区163和sina整体都比较清晰整洁适合阅读,但163顶部红色字体的焦点新闻如果条数过多就会影响到阅读,层次不分明。QQ和sohu顶部焦点新闻区都较清晰整洁和主次分明,但下部分新闻标题使用红色字体而且标题与标题间距很小,这样不利于阅读。
总结要闻区sina和163做的较好!
通透性

qq 163 sina sohu olympic channel ui analysis

在国内的门户网站都习惯了内容多、页面长,什么都往首页堆,感觉内容越多会显的越大气。但用户的耐性是有限的,所以通透性对国内网站很重要,每一屏的架构 变化不宜太多,适当就好。不然用户每浏览到一屏都要重新去解读架构,耐性就会被消耗掉,往下浏览的机会就越少了。如果想用户能多浏览网页内容,网页必须有 较好的通透性。
sina一直保持3栏形式,中间以通栏广告间隔,不足之处就是文字链多图片少。
163也保持3栏形式,但中间个性栏目架构变化比较多。
Sohu从3栏到1栏到2栏再到4栏再到3栏,反而显得繁复。
QQ保持3栏形式,中间用适当的图片通栏间隔,很通透。
总结通透性QQ和sina做的较好!
观看直播体验
有位著名的网站设计师说过,如果大部分网民进入一个网站3次点击就能找到他们需要的内容,那这个网站算是一个比较成功的网站。下面是我想看一场热门直播赛事,在每个门户网站的体验,1、2、3等代表点击数。
163 1、网易首页
2、奥运频道首屏通过很明显的直播表可以浏览正在直播的热门赛事,然后点击想看的直播赛事。
3、安装播放软件马上就可以观看了。
Sina 1、新浪首页
2、奥运频道首屏没有明显的直播表,在导航上点击直播
3、进入一个直播表的页面,看到很多赛事,我点了下我想看的赛事名字……
4、在进入一个那项赛事的详细介绍……..(有点不耐烦了),再点导航的直播,又回到刚才的直播表,我放弃了……..。
QQ 1、QQ首页
2、奥运频道首屏没有明显的直播表,在导航上点比赛直播
3、进入直播大厅,安装播放软件后会自动播放QQ自己录制的访谈节目,然后右边有直播的赛事表 。
4、点击自己想看的赛事就可以观看了
Sohu 1、搜狐首页
2、奥运频道首屏没有明显的直播表,在导航上点击直播
3、去到一个直播表的页面,看到很多赛事。
4、我点了下我想看的赛事名字,进到一个哪项赛事的详细介绍,再点了下右上角的直播中心,又回到刚才的直播表……
5、然后我再仔细观察终于找到赛事直播大厅了(有一种成就感)然后安装播放软件,我呆住了,出现一行字“你需要重启电脑才可以播放”…………
总结 观看直播体验163做的非常人性化!

直播页
qq 163 sina sohu olympic channel ui analysis
163直播页清晰简洁,受干扰比较少,互动性较强可以和其他网友一起讨论赛事,还有实时比分。不足之处是直播赛事区域放到视频框上方,因为当用户马上想转 台的时候,应该把其他赛事信息放到用户最容易看到的地方,一般浏览网页的习惯是从上到下,和从左到右。必然放到上方不是用户第一时间看到的地方。
qq 163 sina sohu olympic channel ui analysis
sina直播页清晰简洁,受干扰最少,正在直播的赛事放到用户比较容易找到的右下方,也可以互动交流但需要安装软件。
qq 163 sina sohu olympic channel ui analysis

sohu直播页,该有的都有了,不过颜色很压抑,设计粗糙。和163、sina相比感觉不是一个档次。qq 163 sina sohu olympic channel ui analysis

QQ直播页,色块太多很凌乱,严重干扰用户观看视频,等于你去看电影旁边在放烟花一样。而且页面过长,下面堆积了很多内容。
总结直播页sina和163做的比较好。

qq 163 sina sohu olympic channel ui analysis

总结

从分析看到,每个门户的奥运频道都有他自己的优点和缺点,不能说哪个门户做的就最好,哪个就最差,不同的战略就需要不同的形式,例如新浪如果他 的战略是新闻为主,那单图片头图形式就非常适合他,可以凝聚视觉,抓住用户。而且每个门户网站的用户群都不一样,适合对方的方式,但不一定适合我们。我们 应该取长补短找到适合自己的模式。
以上是从UI方面进行分析,从不同的角度去看结果都有可能不一样,所以网站的决策者这样做也必定有他们的理由。
----- 分割线 -----
注:本文原为bill同学发布在163 UED Team上,不知为何发布后又被删除,幸好google帮我保存了这篇不错的文章,现在转帖在这里给各位学习UED和设计的同学学习,如有不妥请联系我。谢谢。
f24bb9a7a09ad80e9b819f67f5bd8d39

Tags: Posted in Web Development2 条评论

什么是UE、UI、UCD、UED

2008/09/18

字面释义

UE (User Experience) : 用户体验 link

UI (User Interface) : 用户界面 link

UCD (User-Centered Design) :以用户为中心的设计 link

UED (User-Experience Design) :用户体验设计 link

---------分割线---------

UI(User Interface)即用户界面,也称人机界面。是指用户和某些系统进行交互方法的集合,这些系统不单单指电脑程序,还包括某种特定的机器,设备,复杂的工具等。
软件设计可分为两个部分:编码设计与UI设计。编码设计大家都很熟悉,但是 UI设计还是一个很陌生的词,即使一些专门从事网站与多媒体设计的人也不完全理解UI的意思。UI的本意是用户界面,是英文User和  interface的缩写。从字面上看是用户与界面2个组成部分,但实际上还包括用户与界面之间的交互关系。
界面设计。在漫长的软件发展中,界面设计工作一直没有被重视起来。做界面设计的人也被贬义的称为“美工”。其实软件界面设计就像工业产品中的工业造型设计一样,是产品的重要买点。一个友好美观的界面会给人带来舒适的视觉享受,拉近人与电脑的距离,为商家创造卖点。界面设计不是单纯的美术绘画,他需要定位使用者、使用环境、使用方式并且为最终用户而设计,是纯粹的科学性的艺术设计。检验一个界面的标准即不是某个项目开发组领导的意见也不是项目成员投票的结果,而是最终用户的感受。所以界面设计要和用户研究紧密结合,是一个不断为最终用户设计满意视觉效果的过程。

交互设计(Interaction Design) 作为一门关注交互体验的新学科在二十世纪八十年代产生了,它由IDEO的一位创始人比尔•莫格里奇在1984年一次设计会议上提出,他一开始给它命名为“ 软面(Soft Face)”,由于这个名字容易让人想起和当时流行的玩具“椰菜娃娃(Cabbage Patch doll)”,他后来把它更名为“Interaction Design”――交互设计。

UED是进行产品策划的主力之一,他们用自己的知识、经验、设计能力拿出设计方案。ED不只是互联网专家,还是行业专家。能够用自己的互联网知识来设计出行业专家想实现的操作,而付诸以商业营销。

简单的说,在进行产品设计时从用户的需求和用户的感受出发,围绕用户为中心设计产品,而不是让用户去适应产品,无论产品的使用流程、产品的信息架构、人机交互方式等,都需要考虑用户的使用习惯、预期的交互方式、视觉感受等方面。
衡量一个好的以用户为中心的产品设计,可以有以下几个纬度:产品在特定使用环境下为特定用户用于特定用途时所具有的有效性(effectiveness)、效率(efficiency)和用户主观满意度(satisfaction),延伸开来还包括对特定用户而言,产品的易学程度、对用户的吸引程度、用户在体验产品前后时的整体心理感受等。
UCD是将来公司开展网络服务所必须的,所以UCD职位也将是一种趋势。

用户体验(User Experience,简称UE)是一种纯主观的在用户使用一个产品(服务)的过程中建立起来的心理感受。因为它是纯主观的,就带有一定的不确定因素。个体差异也决定了每个用户的真实体验是无法通过其他途径来完全模拟或再现的。但是对于一个界定明确的用户群体来讲,其用户体验的共性是能够经由良好设计的实验来认识到。
用户体验主要是来自用户和人机界面的交互过程。在早期的软件设计过程中,人机界面被看做仅仅是一层包裹于功能核心之外的“包装”而没有得到足够的重视。其结果就是对人机界面的开发是独立于功能核心的开发,而且往往是在整个开发过程的尾声部分才开始的。这种方式极大地限制了对人机交互的设计,其结果带有很大的风险性。因为在最后阶段再修改功能核心的设计代价巨大,牺牲人机交互界面便是唯一的出路。这种带有猜测性和赌博性的开发几乎是难以获得令人满意的用户体验。至于客户服务,从广义上说也是用户体验的一部分,因为它是同产品自身的设计分不开的。客户服务更多的是对人员素质的要求,而已经难以改变已经完成并投入市场的产品了。但是一个好的设计可以减少用户对客户服务的需要,从而减少公司在客户服务方面的投入,也降低由于客户服务质量引发用户流失的机率。

交互设计是一门特别关注以下内容的学科:
1、定义与产品的行为和使用密切相关的产品形式。
2、预测产品的使用如何影响产品与用户的关系,以及用户对产品的理解。
3、探索产品、人和物质、文化、历史之间的对话。
交互设计从“目标导向”的角度解决产品设计:
1、要形成对人们希望的产品使用方式,以及人们为什么想用那个这种产品等问题的见解。
2、尊重用户及其目标。
3、对于产品特征与使用属性,要有一个完全的形态,而不能太简单。
4、展望未来,要看到产品可能的样子,它们并不必然就像当前这样。

UDC需要学习的课程

  • 人机交互的认知心理学、工程心理学基础
  • 人的因素、人类工效学基础
  • 人机交互的研究方法
  • 用户调查和研究方法
  • 可用性工程与评估方法
  • 软件中的交互设计
  • 软件产品的界面视觉设计原则、标准及经验分析
  • 以用户为中心的界面设计与开发过程
  • 界面设计与评估案例分析
  • 人机交互界面的编程实现
  • 人机工程项目管理
  • 人机交互技术的最新进展

推荐的网站:

Tags: Posted in Web Development我抢沙发