商品评论的设计―12月ucdchina书友会讨论网页设计
【简介】感谢网友“柚子”参与投稿，下面是小编帮大家整理的商品评论的设计―12月ucdchina书友会讨论网页设计（共7篇），希望对大家的学习与工作有所帮助。
篇1：商品评论的设计―12月ucdchina书友会讨论网页设计
今天深圳ucdchina书友会的话题讨论—《商品评论的设计》，写了个引导的PPT与大家讨论，主要是关于web中评论体系的设计，收获不少， lytous 、许让、我，还有四位业内的纯爷和四个妞，气氛还是不错的，以下是PPT和一些讨论过程中的关键点。
List:
1. 什么叫商品评论？
2. 评论体系的存在意义
3. 评论体系的现状
4. 都有哪些元素
5. 该如何设计？
6. 评论体系之外
1.什么叫商品评论？
个人认为，商品评论可以简单这么定义：人们对某商品的看法，无论是已购买者，还是非购买者。但如果光讨论商品评论本身貌似意义不大，我把他扩大到了评论体系这个层面。
评论体系，或者说评论系统，简单来说，可以概括为：人+互动内容+平台+终端，也就是商品提供者，购买者 [或者非购买者，可能非购买者没有购买这个商品，但他使用过，在使用体验的心得方面，他同样有发言权] 在通过某个购物平台，使用自己的终端设备进行互动的过程，而这个过程自然会产生一些交流的信息，可能是对商品本身进行评价的，也可能是商家服务或者物流服务等等。
商品评论本身不会与商家信用或者信誉等价，但却是产生后者的主要依据，也就是说，购买者的商品评论最终会成为量化商家信用指数的数据来源。
那现实生活中，有哪些评论体系呢？
1.1 购买商品后或者进行质保后的email邀请评论，其实就是回访，例如lenovo的回访email。
1.2 以淘宝为代表的完成购物后的评论系统，这个是目前能够产生价值较大的评论系统之一。
1.3 以口碑网和大众点评网为代表的面向大众的商品、服务评论系统，这类评论系统，能否找到合适的商业模式是个关键，如何把控评论的质量应该是首要考虑的因素。
1.4 一些B2C站点接收的在线评论，这类大都会被过滤掉一部分。
1.5 传统的电话服务质量回访，杰出代表：114服务和12580，告诉你“市民中心”怎么走之后，甜甜的跟你说：还有什么能帮到您吗？如果没有，请帮忙做一个服务质量回访，如果满意，请按1，不满意请按2，-_-!!。
1.6 再传统不过的，就是食堂或者超市中的“商品建议”反馈本子，火车上的“反馈建议本”，都是类似的，简单，但过于死板。
2. 评论体系的存在意义
评论体系的存在必然有他的意义，分三个人群来讲，一个是Supplier—商家，或者说商品、服务提供商，一个是Purchaser—购买者，还可能是第三方信用机构。
对于Supplier
A.得到用户的反馈，促使产品提供商[ 或者服务提供者 ]对产品[ 或者服务 ]进行update。
B.如果正面的评论不断增加，使得信誉指数攀升，有利于提高其竞争力，能够得到比竞争对手更多的销售机会。当然，也能起到一个淘汰的作用，如果差评多，除非是非法刷信誉或者删差评，否则购买者是很难会去下单的。
对于Purchaser
A.购买此类商品[ 或者服务 ]前的参考，对于大部分普通网民来说，是否购买，就是冲商家是不是皇冠，有几颗钻，因为这个从一定程度上反映了商家的整体服务质量，如果你是网购狂人，是经常泡网的人，你可能知道现在这个不是唯一参考渠道，但，不要忘记还有大部分的初级网购者。
B.开放了一个用户与生产商或者服务提供商进行沟通的渠道。
C.方便上一级部门对商品提供商进行监管，如果你商家服务质量实在太差，购物平台提供者可以根据这些内容进行取证并解决交易纠纷，从一定程度上监督了商家，对购买者是有利的。
对于信用机构
几大网购平台上的无数“摆摊大大”们和网购者在通过支付宝等支付平台积累的无限量交易记录，以及无数的评论产生的信誉信用数据，对于第三方的信用机构来说，我想绝对是个诱惑。
3.评论体系的现状
3.1同一product的提供商可以在多个平台建立不同评论体系，对于某些相同商品或者服务的评论信息不能共享。有啊的方舟计划貌似走的就是这个路线：部署标准产品库，融合每一款商品的规格资料、用户点评、在线选购等模块。
3.2评论流程臃肿，评论渠道单一。想一下这样一个情况：你给老婆买的豹纹短裙开裂了，虽然你可以通过旺旺，或者电话方式要求退换货，但如果还想对这个玩意再进行评论，你能怎么样？登陆淘宝，找到交易记录，这个时候可能已经没有再说话的冲动了，即使还想继续，却发现评论已经关闭，
但，如果手机可以推一下这个条目，你觉得会怎么样？爽！这个改进方式后面会讲到。当然，购物后才能发起评论从一定程度上也是为了防止更多的垃圾评论和无谓的信息。但他的互动性就降低了。
3.3评论真实与否，是否产生了价值，而当金钱可以买来好评。这个问题很严重，在讨论中，大家有着不同意见，部分同学认为：如果商品都一样，服务都一样的情况下，我砸大量的钱去刷好评就相当于是打广告，一个道理，并且这个也是商家实力的体现。这个观点说得过去。但，从人性上讲，却是不道德的，也不利于网购市场的良性发展。
3.4买卖双方的隐私没能保护好。最近出现的买家恶意敲诈商家的事情时有发生，也说明了这里面是漏洞的。特别是在C2C市场上，交易过程中双方都是可以得到一些私人信息的。对于初进入网购市场的卖家，如果信用只有几颗心，又想真正继续做下去，是很在乎这几个差评的，如果买家作恶，敲诈起来，金额不多的情况下，不少卖家会选择花钱买平安。现在市场上甚至有不少“职业差评师”。后面会讲到如果通过其他手段来稍微改进这个交易过程。
4.评论体系都有哪些元素
4.1 Purchaser 购买者
4.2 Supplier 商品或者服务提供商
4.3 Product 商品或服务
4.4.Communication between purchaser & seller 两者间就商品或服务的交流信息
4.5.Market platform.平台
4.6 Terminals of communication 交流终端
后面讨论到的商品评论体系的设计会聚焦在 4.4 和4.5以及4.6上。
5.如何设计
5.1评论系统进行平台上的整合、数据共享。甚至将评论系统剥离独立出来，或者来自社会化分享系统。举个类似应用的雏形：win7的What people are saying about windows 7？
5.2可使用多种终端发生这一行为。目前在web上，发生商品“评论”这个行为的终端绝大部分还是计算机。如果哪天网民们能非常方便的利用手机就某个商家的某个商品进行实时互动，就如围脖、twitter一样。。。。。。
5.3评论可持续化、更社会化、互动性更强。传统购物评论系统是短时间内，付款完事后，你可以即时评论对方，但一旦评完，就会关闭。而如果你购买的商品是付完款后，且在质保期出现质量问题，这时你不但需要退换货，还要发表关于这个商品的质量问题评论内容，系统告诉你，无法再继续评论，冤枉，你当初给的是—好评-_-!。
我们是不是可以这么改，在评论提交时，提供一个可以使用类似围脖、嘀咕或者twitter等应用进行持续关注的选项，后续可以进行利用手机这样的终端进行互动，不单是跟商家，还可以是普通的网民，这些信息都可以在这里出现，使得“评论”本身更真实，互动性更强。
界面是不是可以这样：
讨论过程中，lytous提到一个很好的点：是不是不需要任何商品都提供这样一个选择，如果我买的是很短时效的商品，例如牙膏，你就不需要持续关注他。可以分类对待。
甚至，可以多媒体化、更接近生活：
5.4 保护双方隐私及评论真实性。讨论过程中，大家都对实名制抱不赞同态度。而对评论系统的整合独立成第三方，通过通用API来接入，大伙对这种方式也觉得可操作性不大，起码在目前是这样。
和另一位同学在会后讨论的一个在C2C市场中的购买流程改进方式倒是有可取之处：将买卖双方的电话、住址等敏感信息由平台提供方，例如淘宝进行保密，买方完成购买动作后所提交的物流信息并不会出现在卖家的管理后台，而是由平台提供方，例如淘宝进行物流配送的分配管理，这样，就可以在一定程度上防止双方隐私被过多的暴露，出现类似敲诈的情况。
5.5满意度如何量化？还应该有哪些指标？
目前大部分的评论系统都是上图所示的模式。指标通常有：商品相符程度，卖家服务质量，物流的服务质量。个人认为，起码还是忽略了售后服务的追踪这一块，应该开放可持续化关注、评论的渠道，例如上面所说的“持续关注”等，加入这样的一个指标去完善整个打分系统。
5.6评论内容的信息架构问题
我想大家都有这样的体验：我想看某个关键字的评论内容，例如购买的是手机，想找找有没有关于屏幕问题的评论，却发现只能一页页的去翻，非常浪费时间，还不一定能找到这样的条目。这是目前评论区块的一个通病。
改进方式可以是增加搜索框，或者将评论内容进行分类，这都是行之有效的改进方式，如下图：
6.评论体系之外
“如何在网购市场中培育良好的购物习惯、净化网购市场”—-这是一个从网购市场大环境去考虑的问题，如果商品足够好，质量过硬，商家服务标准化，物流环节更规范，我想这是能够很大程度上减少交易中的纠纷的，而这个时候，或许评论这个东西就不会显得那么重要了，或许可以消失了。。
ppt下载：商品评论的设计 或者 Google Doc浏览
本文来自：www.cnscorpio.cn//12/product-comment-design/
篇2：电子商务网站评论设计探讨网页设计
从CNNIC在的报告中可以看到，超过80%的网民购物之前都要看评论（包括本站、其他站评论），超过80%的网民都比较信任口碑（包括网民、亲朋好友推荐），貌似又满足那个传说中的二八原则，我认为还算靠谱，
也就是说，电子商务网站商品的评论很重要，好设计可以提高用户参与度，好的参与度可以得到更多的优质评价，更多的优质评价可以直接提升产品销售率。因此，我们今天话题也聚焦在“电子商务”领域，因为不同类型产品的商业意图不一样，设计方案也会不同，混为一谈意义不大。
是否需要登录后评论
gouwu.youdao.com/ 有道购物搜索商品评论表单
我更倾向于宁缺毋滥的方案，如有道购物搜索必须登录才能在文本区录入内容，但之前会显示评论表单出来。应该是有使用经验的用户才有“评价”资格，控制质量的门槛还是必须的。
首先是现场提到录入内容，并点击“确定”之后才告诉得登录的情况显然很糟糕，虽然能引导进登录或注册成功，但返回后之前录入的内容已全部清空。这个问题的根源，我认为在于没有明确告知门槛，事发之后又没有完善的解决方案，最简单的办法是直接告诉用户“评论请先登录系统。”曾经见有同行提出，上个解决方案太生硬，因为还是不能直观告诉用户如何参与评论？怎么评论？如果显示评论表单出来，可能会更激发用户的评论欲望，并且说有数据支持。
其次尤其是有金钱交易的电子商务行业，网友更关注注册用户的评价，而参考陌生游客评价的权重低。因为网友有可能会跟踪注册用户去参考他的其它评价，或对此人的评价进行“权威性”评估。典型案例如淘宝，某些很挑剔又人品不好的顾客很容易给卖家差评，
是否需要分项评论
www.360buy.com/ 京东商城商品评论表单
针对提到的京东商城评论典型案例中，把产品评论细化为了“优点、缺点、总结”。我个人认为这样的设计有点一厢情愿，意图是理想的，但用户可不会这么听话。
首先在产品本质角度理解，电子商务网站的根本是卖东西，必然应该优先资源想尽办法引导用户消费，从而势必会与让用户了解客观评价的目标相冲突。客观评价应该由第三方网站去做，这样才显得公正公平。比如网络书店有当当、卓越两大巨头，而写书评大家还是愿意去豆瓣，这两边的氛围完全不一致。总结而言，同样的一个产品，不可能兼具两种目地性和气质。（当当和卓越即使要搞豆瓣模式，也应该另外整个域名，不过显然目前是没法超越了。依托资源做事，有多大好处就有多大坏处，具体请参考公司都是有传统的。）
其次在用户提供内容的动机来看，“有话说”的根本在于“想表达”，而且会相对极端的表达好还是坏，或者“Yes or No”。因为消费者了解必然有限，并且会主观站在自己立场考虑事情，即使资深用户也如此。另外，优点与缺点本身就是总结，最后的“总结”更显得有点多余。也好也坏，有多少好又有多少坏，并且能相对深入点评，那是专业导购网站做评测的路子，比如IT168, PCPOP都是靠这个起家的。
最后在交互角度考虑，拆分后会增加三个Textarea对象的文本区，将大大提升表单长度和视觉上的复杂度。尽管可以提醒用户某些可以不填，某些是选填，但还是会增加用户的认知负担。最俗的解释，表单太复杂，容易让用户望而生畏。
综上所述，我不认为京东评价是个好方案，这里的观点比现场更有条理并充分。正确做法，是让用户尽情表达，通过算法和用户打分来优选有利于商品销售的列表。别忘了电子商务网站的目标是卖东西挣钱，不是靠人气和话语权挣广告费！
本文来自：blog.rexsong.com/?p=8614
篇3：如何吸引用户评论？网页设计
原文：How To Attract Customer Reviews？
作者：Linda-Bustos
译者：耿人杰
译文来自：如何吸引用户评论？
———————————— 全文的分割线 —————————————
我最近和The Etailing Group and Power Reviews的Lauren Freedman举行了一个在线研讨会，该在线研讨会涉及了许多问题，如果你想进一步了解更多的内容，你可以下载该研讨会的PDF。
这个研讨会和白皮书是基于Etailing Group对1200名每年至少在线购物4次和花费在500美元以上的消费者的研究而得出的。
我们都知道用户评论内容有很多优点：建立消费者信心、长尾搜索引擎优势、降低退货率等等。用户评论对社交消费来说也是一个合理的入口，一系列评论就如同一个在线的论坛。但对于大多数在线零售商来说，为他们的网站加入评论内容是一个挑战。大多数用户对于输入信用卡信息已经很烦恼了，那么你又如何能激发他们花时间来贡献商品的评论呢？
要求用户评论
来自Power Reviews的Jay Shaffer提出了一个简单的建议：要求用户评论，但用户可以在下一笔交易中得到a%或￥的优惠。这个问题对于电子商务行业来说比较敏感，并且确实应该避免使用这种方式，因为这可能受到严厉批评或伤害了用户对于产品感知的真实性。请记住，如果你对所有的消费者提供这些鼓励措施，他们可能就不会相信那些和他们拥有同样行为的人了。（从另一方面说，这的确会鼓励良性的重复销售）
一个在研讨会提到的更好的方法是类似Orvis举行的竞赛，以礼物卡奖励。通过发表一个主题为“通过评论Orvis Gear来赢得100美元”的评论，用户被赋予一个机会来赢得奖励，而不是直接根据内容贡献来直接获得回扣。
就个人而言，我仍然认为针对一个未来的订单提供一个折扣是不错的方式，这种方式传达给用户他们所评论的是有商业价值的，这是一个感谢用户的一种方式。许多零售商在购买后的订单确认email里提供折扣信息，我不认为这是一种邪恶的方式。你的看法呢？
激励人们，让他们帮助他人
在研讨会上没有提到，但我认为这是个不错的主意，很多用户可以被善意激发来贡献评论，
参考被链接的文章，1300个接受调查的用户，90%说他们写评论是想帮助其他人做出更好的购买决策，超过70%的人想帮助厂商提高产品质量。良好的沟通，能让来自用户的声音帮助到其他人，这是比折扣和竞赛更有效的激励方式。
我不确定是否需要进一步放一个更直接的输入框在邮件里，但这可能是一个好主意，因为用户不必离开email就能提供一个评论了。
Email回访
时机是email回访的关键。当然你必须回访用户，当产品已经在他们手中并已经有了充分的时间对产品进行使用和评价时。你也不会想等太长的时间。
所以恳求评论就像其他email广告活动一样，要非常仔细地选择一个高效的主题、文档格式和邀请等。你必须监测邮件的打开率和回复率，A/B测试、时间轴、邀请和邮件信息等都可以帮助你优化广告活动。
但如果商品是作为礼品的，则就有些不同了。你正在浪费时间来要求礼物发送人评论商品，这将也扭曲真实的购买率。一个好的方式是在结帐时要求评论并提供一个免费的个人备注或特殊的礼品包装选项。这个方法虽然不能百分百获得评论，但对订单来说它的确是礼物，你也可以将订单从你的email回访活动中去掉。如果可能，将评论的问卷放在产品的包装盒中，这样收件人也可以参与到评论的流程中来。将礼品收件人以礼品的来源地做区分引入到公司中。
我观察过礼品零售商ProFlowers、Red Envelope和1-800-Flowers，它们都没有评论内容，但这也合乎情理。大多数商品将被当作礼物赠送，你又能对一束花说些什么呢？
Delightful Deliveries是一个礼品零售商提供评论的案例，它声称评论可以提高20%的购买率。Delightful Deliveries分别从礼物发送人和收件人获得评论。
我喜欢上面的这个方式是因为它不需要顾客写任何东西，仅仅需要在一个预设的区域做出一个评分，并回答一个是/否的问题，类似“你会将此产品推荐给你的好友吗？”这种方式虽然不会给你提供长尾的SEO效应，但它的确能让用户针对商品轻松地留下评论而不必深思熟虑。但你仍然会发现有顾客愿意写长篇的评论。
开始创新吧
我在昨天的文章中提到的mom-and-pop有机咖啡零售商，你可以从那些并没有购买商品的用户中收集评论。提供样品以获取评价似乎是一个有道德且高效的方式来获得用户忠诚度，不带偏见的内容将帮助你成为一个受顾客欢迎的零售商。请明确的告诉测试者，你不需要那些胡言乱语的评论，只要诚实的评价即可。如果你和评论者有某种私人关系，这会影响他们写些正面的评论，即使他们的体验并不怎样。所以更好的方式是尽可能的选择些陌生人来参与评论。
篇4：03 UCDChina 南京书友会：邮箱与邮件服务交互设计
其他的不讲了，讨论的还是蛮广泛的，我想讲讲邮件协同办公，这个让大家都比较头疼的问题。
要能协同办公的邮箱，除了具备普通邮箱那些一直鼓吹的速度、稳定、安全、容量这些共同特性外，我觉得还应该具备下面一些条件。
1、视觉上的简洁。花里胡哨的视觉效果，哇伊的色彩皮肤，还有不相干的绑定服务（比如××宝箱，××资讯，××天气等等），这些都会让人分神，不管是刻意的还是不经意的，让人不能足够的专心。这些东西对于工作来说，没有任何作用。所以，不要让它们出现在屏幕范围内。我们需要的是一个简洁朴素的视觉，而且不会让人视觉疲劳，能让人清晰快速的辨别清楚邮件的条目、标题以及各个邮箱操作要素。
2、操作上的快捷。这里主要是说新建、发送、删除、归档这些基本操作，操作步骤越少越好。如果能一次操作完成或者配合上快捷键，那就省事多了。邮件少也许看不出什么，如果有上百封，那节省的时间和精力还是可观的。
3、提供合理有效的，能简化工作量的功能。简单的说，就是自动处理邮件的能力。当面对N多来自上级、下级、平级的，甚至还有私人邮件的时候，是不是比较晕，压力自然就来了，烦躁开始滋生。哪些邮件要立即处理，哪些邮件要回复，哪些邮件可以忽略？一封封看？会崩溃的。需要一个自动处理机制，如果邮箱没有提供，那就自己来做。
简单的就是过滤邮件，自动归档。一个收件箱里的邮件，可以自动分成几类，上级的、下级的、平级的、私人的等等。分别处理，私人的，留着下班以后看吧。其他的怎么处理呢？怎么知道邮件里写的是什么内容呢？我觉得这就是目前各类邮箱缺乏的东西。
如果公司内部事先规定一套邮件规则，让后在邮件里建立这套规则，每个人发邮件的时候，按照这种规则去发送，那很多邮件又可以自动处理了。举例：
这样一分，在发邮件的时候，选择对应的选项，收到的邮件自动归档，
对应不同的规则，邮箱就可以自动处理。比如没用的就直接删，紧急的就往上排。这样，打开邮箱的时候，直接处理就好了，原先人脑来判定分类的工作全由邮箱自动完成，省了很多事啊。
再比如常见的上级给下级发送需要已阅回执的邮件，每个下级收到邮件后自动给上级回一封“哦，我看到了”，好烦啊，完全就是垃圾邮件。对应N个人，一个事情要N封邮件才算沟通完毕，多麻烦啊。一个事，集中处理，一封邮件就行了，下级的回执邮件自动在上级的发送邮件里打个标记就行了。
4、格式化的功能。这里是对邮件内容格式化，邮箱提供或自定义一定格式的邮件模本。一个任务，什么事，什么要求，什么时间完成，相关资料链接，以一种清晰的格式表达出来，简洁明了，看的人也容易。不然有时候嗦嗦也说不清，看的人可能还遗漏要点。
5、最后提醒，如果和IM软件关联，请关掉IM，让工作不受打扰，做完一件事查看一次邮箱，挑出一件继续做。
这里没有具体说哪个邮箱，目前看来也只有Gmail是最合适的了。不过上面提到的一些功能可能不是普通邮箱要做的了，可能就是企业邮箱或者办公自动化系统要做的事了。但对于小团队的公司来说，使用免费个人邮箱作为办公邮箱还是很常见的。虽然不能达到上面说的某些功能，但邮箱是死的，人是活的，让邮箱按照人定义的规则去办事，会节省不少精力。
Don“t make me think。好的协同办公的邮箱，就是不要让人烦神，专心处理邮件里说的事吧。
这里有两篇邮箱办公有关的文章，有兴趣的可以看看：
我的GTD式管理Gmail
怎样把Gmail变成商业日志以及更多的小技巧
本文来自：ylbobby.blogspot.com/2009/03/2009-03-ucdchina.html
篇5：改进评论提交表单网页设计
Dmitry这篇设计评论表单很有启发意义，尤其提到关键的评论内容、评论者信息录入顺序问题，好比我们在日常沟通时，对信息的反馈都是第一诉求，写信、写邮件、甚至写文章署名都是这步骤。于是，看完文章我便毫不犹豫的把blog评论改了过来。
但我不认为他文中提到的后两个例子是最好方案，都还有可优化空间。沿视线对齐调整完顺序之后，还处理了padding, font, label, tabindex等遗留问题，最后也最难搞的是兼容性。
任何用户访问post页面如果想发表评论，最先让他说出来。其次才是留下个人信息，同时表单自动记录用户cookie，避免下次重复录入，
先让用户填这、填那有可能让某些用户反感，如果用户先填写了一堆信息之后，再请用户留下联系方式，我认为更顺畅、理所应当。
要降低留言门槛，还可以默认填写上用户名、邮件，支持用户自行修改。但我认为这么改不适合个人博客，就得留点门槛才对。如果进一步支持ctrl+enter提交，可操作性还是相当不错。
有网友提到用户习惯问题，的确中文博客我还没见到这样的评论表单顺序。不过没关系，我这套模板独一无二的设计又不是这一个地方。真正郁闷的是，做完之后跑到Usabilitypost查看原文，结果发现他们的Post your comment设计与我的处理几乎一样。
本文来自：blog.rexsong.com/?p=5505
篇6：网页设计和UI设计共通的12种技巧
在网页设计和UI设计师，虽然基础的东西很重要，你会做网页了也会UI了，但是制作他们的时候有很多小的技巧，如果掌握他们，在制作的时候会更快，当然不知道他们也能做出产品。下面详细讲解一下这12种方法技巧。
1、不给文件起中文名称 大家在制作好了网页后，通常会给网页起一个具有代表性的中文名称，一来能使人一看文件名就能大概了解文件所包含的内容，二来能够方便各个超级链接之间的相互调用。但如果你在Dreamweaver中这样做，就会发现Dreamweaver对中文文件名支持得不是太好，经常会有页面调用不正确的现象发生，所以我们以后在Dreamweaver中保存网页的时候，尽量用英文或者数字作为文件名称，这样就可以避免上面的出错现象。
2、巧妙设置字体分辨率 我们在网页制作或UI制作的时候，经常有这种体会，那就是制作好的网页在本地计算机上浏览时很正常，但在另外一台计算机上浏览时发现原本漂亮的网页变得歪歪扭扭了，这是为什么呢?原来各个计算机的分辨率要使你的主页在不同的分辨率下都能正常显示，在 Dreamweaver中得到了较好的解决。在文档窗口的右下角，Dreamweaver 显示当前文档被设计成的分辨率大小。单击哪个数字，在弹出式菜单中可以为当前的页面指定显示分辨率，通过修改可以使你的主页更具灵活性。使不同分辨率的显示器都能较好地显示。
3、同时链接到两个网页 我们都知道超级链接一次只能连到一个页面。如果我们要想一次在不同的框架页中打开文档，可以使用“Go To URL”JavaScript 行为。打开一个有框架的网页，选择文字或图象，然后从行为面板中选择“Go To URL”。我们会注意到Dreamweaver会在“Go To URL”对话框中显示所有可用的框架。选择其中一个我们想链接的框架并输入相应的URL后再选择另一个框架并输入另一个URL。
4、善用拖放技巧 我们在使用Dreamweaver编辑网页的时候，经常需要插入一些图象什么的，假设要插入的图象很多，按照常规方法来操作就显得非常麻烦。我们可以利用拖放技巧来很好地解决这个问题。首先我们把Dreamweaver的操作窗口变成活动窗口，以腾出空间来显示Explorer窗口，找到要插入的图象文件后，把它们一一用鼠标拖动到网页的适当部位，Dreamweaver将自动把这些图象的url添加到文件的HTML代码中，当然这里要求被拖动的图象文件必须是gif、jpg等web图象格式的文件。对于已经在网页中的图象也是一样，直接拖过来就可以了。但如果被拖动的图象上有超级链接，就不可以再使用拖动技术了，因为那时拖过来的仅仅是超级链接地址。
5、自动设置更新时间 我们知道一个网页要想获得更多的回头率，一个很重要的一条就是要不断更新。但对于我们这些个人网页来说，要天天及时更新恐怕不是很容易的事情。因此，我们希望网页能自动更新，下面笔者就提供一个能自动更新修改时间的源代码，我们只要把这段源代码添加到…＜ /BODY＞之间就能实现更新时间的目的了: ＜ Script Language=”JavaScript“＞ ＜ /script＞;二是用鼠标依次单击Dreamweaver中的Text/Custom Style/Edit/Style Sheet/New/Redefine HTML Tag，并从中选择a，然后在decoration中选中none，最后单击确定就成功了。
6、巧妙复制文字 在几个不同的应用程序中间相互复制文字，是我们在实际工作中可能要常做的事情。但是，如果我们从Dreamweaver中复制编辑区中的文字到另外一个应用程序的时候，HTML代码和文字将一起被复制过去了，那么我们该如何才能只把编辑区中的文字复制下来呢?我们知道，通常复制时都用快捷键 Ctrl - C 来操作，如果我们在复制的时候多按一个C键，那么Dreamweaver将只会复制选中的文字了。
7、善用快捷键 为了提高操作的效率，我们可以在Dreamweaver中使用快捷键，例如使用Ctrl-B或Ctrl-I来为文字应用黑体或斜体格式，也可以使用以下一些键盘快捷键来为选中的文本应用HTML格式:Ctrl-0: 无格式 Ctrl-T: 段落 Ctrl-1: 标题 1 Ctrl-2: 标题 2 Ctrl-3: 标题 3 Ctrl-4: 标题 4 Ctrl-5: 标题 5 Ctrl-6: 标题 6
8、巧妙隐藏标签 如果在网页中插入了不可见的元素时，Dreamweaver会自动在页面上添加一个与之相应的元素标签，以便于我们选择不可见元素。但这并不全是件好事，比如我们在一个有很多层的页面中的第一行便插入一个表格，就会发现由于首行排列了太多的层元素标签而使得表格自动退到了页面的第二行，虽然在浏览时并不影响效果，但这确确实实会阻碍我们的工作。所以当我们觉得某个元素标签碍手碍脚时，就索性将之屏蔽掉。方法是按Ctrl+U打开Preferences面板，在Category中选中Invisibel Elements，在面板的右边将会出现所有的元素标签。只要将不需要的元素标签前的勾去掉，以后它就保证不会再出现了。
9、灵活运用样式 熟悉网页设计的网友就知道，调用Style的方法很多，我们可以单击鼠标右键选择Custon Style来调用Style标准，也可以在状态栏中的元素列表上单击右键来调用Style。虽然不同的方法达到的效果看似一样，但实际上产生的HTML代码则完全不同。比如用Custon Style来调用Style标准，在网页代码中就生成一个〈span〉标签，这样的标签一多就会使文件十分臃肿而且影响浏览器的解析速度，所以我们应尽量使用状态栏中的元素列表来调用Style。
10、活用Format Table命令 在复杂的网页设计中，表格的应用是最多的，因为利用表格可以自由地控制文本和图象在网页上出现的具体位置，从而使整个网页看上去紧凑统一。Dreamweaver在这方面也不甘落后，我们可以使用其中的“Format Table”(格式化表格)命令来快速地对表格应用预先设计好的样式。要使用预先设计好的样式，先将光标置于表格的任意一个单元格内，再选择“Command”→“Format Table”命令， 在随后出现的对话框中，从左边的列表中选择一个设计方案。按“Apply” 键来查看效果，如果不满意的话，还可以重新设置或者修改部分参数的值，如边界粗细，背景颜色等等。
11、巧妙设置对象名称 我们在用Dreamweaver来制作非常复杂的效果时，有可能需要经常重复地使用某一个或者多个对象，例如我们经常需要定位某个特定的表格、图象等，如果我们没有给某一个网页中的多个对象取名的话，那么在重复应用这些对象的时候，可能很麻烦或者容易出错。为了能够方便调用这些对象，我们应该在每创建一个新的对象时，都记得给它取一个有代表性而且比较容易记忆的名称。在给这些对象命名时，我们可以通过对象的“属性”面板来操作就行了。
12、为图象链接增加动态效果 有时我们为了要达到一种逼真的效果，希望鼠标移动到某个链接上时能有动感产生。使用Dreamweaver可以很容易实现这种效果。设计时，我们首先需要准备两幅图象，第一幅是原始图象，第二幅是鼠标移动上去后的图象。接着用鼠标单击第一幅图，在属性面板中的链接栏中填上要链接的文件，然后单击键盘上的F8键，在弹出的Behaviors窗口中单击“+”号，随后选择“swap image”，在接着出现的窗口中选择第二幅图象，最后单击确定就可以了。
[网页设计和UI设计共通的12种技巧]
篇7：最的12条css技巧网页设计
1：Rounded corners without images
效果图——
Rounded corners without images
.rtop, .rbottom{display:block}
.rtop *, .rbottom *{display:block;height:1px;overflow:hidden}
.r1{margin:0 5px}
.r2{margin:0 3px}
.r3{margin:0 2px}
.r4{margin:0 1px;height:2px}
2：Style. your order list
效果图——
Style. your order list
This is line one
Here is line two
And last line
ol{
font:italic 1em Georgia, Times, serif;
color:#999999;
}
ol p{
font:normal .8em Arial, Helvetica, sans-serif;
color:#000000;
}
3：Tableless forms
效果图——
Tableless forms
label,input{
display:block;
width:150px;
float:left;
margin-bottom:10px;
}
label{
text-align:right;
width:75px;
padding-right:20px;
}
br{
clear:left;
}
4：Double blockquote
效果图——
Double blockquote
blockquote:first-letter{
background:url(images/open-quote.gif) no-repeat left top;
padding-left:18px;
font:italic 1.4em Georgia, “Times New Roman”, Times, serif;
}
5：Gradient text effect
效果图——
Double blockquote
CSS Gradient Text
h1{
font:bold 330%/100% “Lucida Grande”;
position:relative;
color:#464646;
}
h1 span{
background:url(gradient.png) repeat-x;
position:absolute;
display:block;
width:100%;
height:31px;
}
6：Vertical centering with line-height
效果图——
Vertical centering with line-height
div{
height:100px;
}
div *{
margin:0;
}
div p{
line-height:100px;
}
Content here
7：Rounded corners with images
效果图——
Rounded corners with images
width=”15″ height=”15″ class=”corner”
style=”display: none” />
CONTENT
width=”15″ height=”15″ class=”corner”
style=”display: none” />
.roundcont{
width:250px;
background-color:#f90;
color:#fff;
}
.roundcont p{
margin:0 10px;
}
.roundtop{
background:url(tr.gif) no-repeat top right;
}
.roundbottom{
background:url(br.gif) no-repeat top right;
}
img.corner{
width:15px;
height:15px;
border:none;
display:block !important;
}
8：Multiple class name
.class1{border:2px solid #666;}
.class2{
padding:2px;
background:#ff0;
}
9：Center horizontally
效果图——
Center horizontally
#container{
margin:0px auto;
}
10：CSS Drop Caps
效果图——
CSS Drop Caps
This paragraph has the class “introduction”. If your browser supports the pseudo-class “first-letter”, the first letter will be a drop-cap.
p.introduction:first-letter{
font-size:300%;
font-weight:bold;
float:left;
width:1em;
}
11：Prevent line breaks in links, oversized content to brake
a{
white-space:nowrap;
}
#main{
overflow:hidden;
}
12：Show firefox scrollbar, remove textarea scrollbar in IE
html{
overflow:-moz-scrollbars-vertical;
}
textarea{
overflow:auto;
}
来自：www.cnblogs.com/JustinYoung/archive/2008/03/28/most-used-css-tricks.html
英文原文：stylizedweb.com/2008/03/12/most-used-css-tricks/
