Recently in 网页设计 Category
自：‘Working through Screens’ - free interaction design ebook by Jacob Burghardt Jacob Burghardt has recently published a free interaction.........
转自：http://ued.taobao.com/blog/2008/12/11/gui_icon2008/2008国际GUI大赛又开赛了，淘宝UED第二次参与此赛事。上一次，我们选择了BLUES LEE,旨在通过创新的题材在表现上有所突破。这一次淘宝UED参赛的主题是：简洁舒适的淘宝生活。我们从11月3号开始着手准备，到12月3号提交作品，中间历时一个月。实际上，对于阿里集团的设计师来讲，能参赛是件比较幸运的事情。原本想组队参数的愿望，终因工作所累，被迫放弃。最后本次参赛的设计主要落到了书安身上。所以书安同学不得废寝忘食，全力以赴。用他自己的话来说，就是准备作品的一个月，都没带未婚媳妇上过街。较之上一届，此次GUI比赛的参赛作品呈现出以下两个变化：一.参赛题材的创意上。ICON已从早期的电脑桌面系统，向人们生活的各个领域深入。ICON成了品质设计的象征，同时也是很多设计师借以表现自己独特视角，独特嗜好的方式：卡通，游戏，女性时尚，北京奥运。初看之下，往往感觉别开生面。不过题材创意类的ICON也有不足，创意图形和表意直接往往因为关系隐晦，不易识别。这会影响到ICON的可用性。二.表现技巧的多样化。较之从早期的千人一面，大家都模仿XP，VISTA相对平面的表现方式到现在的3D技术，油画，各种质感的多样化表现，如果再追溯到施乐发明桌面GUI时代，从平面到立体，从黑白到彩色，从无质感到富质感，也正体现了ICON的发展的趋势特征。无论是设计师还是作为UED团队，参赛只是一次途中考试。成绩也许重要，也许不重要。介绍：本主题采用简洁的制作手法，重点突出图标的可分辨与实用性，图形样式较为常见，设计过程中没有过多的去改变用户原有使用习惯，采用的正面俯视角度，最大面积呈现图标特征，以达到更好的使用体验。 ICON打包下载地址.........
目前市面上主流的网站分析工具大多都是关注于页面之间的跳转，不过也不乏有侧重在单独页面中数据分析的，像CrazyEgg 和 ClickTale。今天去ClickTale网站使用了一下，他的功能跟 CrazyEgg相似，不过在记录鼠标移动方面更加卓越，它不但跟踪点击，记录有效和无效点击，还可以识别鼠标滑动轨迹，以及页面可视范围。对研究单一页面中用户体验帮助很大，可以观察到用户到底看到了什么，用户为什么就去那里了…… ClickTale的主要功能： 1） 想知道用户在你的网页上向下滚动翻看了多少内容么？ ClickTale可以告诉你，他提供了一个非常明了的热力图。在一个很长的页面上，他可以使用不同的温度颜色来表示那部分的内容更受人关注。这对定位网站那部分对访问者最重要大有帮助。 2） 想要看看用户浏览网站时的屏幕场景么？ ClickTale 可以展示给你。每个用户的浏览器会话都被存储在一个Flash影片中（这里有个数量限制）。这听起来好像不太可能，但确实是真的，你甚至可以看到用户的鼠标在移动，然后点了一下~ 你可以根据访问者的信息来选择想要看哪段flash影片，比如选择某个国家或地区的访问者、他们在网站上停留的时间、他们一共在你的网站上浏览了多少页面等等。 3） 研究一下用户是如何使用你网站上的表单的 ClickTale 有五个报表可以让你研究用户在网站上填写表单的情况。比如“Drop Report”可以告诉你在访问者填写哪个表单中的哪一项时放弃了填写，这样你可以修改那个不好的表单设计，降低它赶走用户的数量。 4） .........
转自：http://www.uxhome.com/info/research/2008-07-31/62.html一般来讲，产品（不仅仅是产品，一套服务也是如此）的用户体验包括这么几个部分：架构、导航、交互、呈现。架构是最早一个产品设计就应该考虑的东西，它将是整个体验里面站得最靠底层的东西，用户一般不会直接接触到它。但是它却会最大程度上影响一个产品的体验（统计数字是80%的相关问题会由这个产生）。这个架构不同于软件工程里面的架构，它解决的问题无非包括这么几类：1、西红柿是水果还是蔬菜？ 就是归类的问题。2、西红柿应该放在桌子(desktop)上，还是放在桌子上的篮子里？就是信息的层级深度问题。3、桌子上放几个篮子？信息的广度问题当然具体起来，架构还包括很多其他的东西，但这三个问题解决了，大的方面也就解决了。导航是架构的傀儡，他背后是架构，导航听架构的指使来引导（有可能是误导）用户。用户通过导航来了解系统的架构，建立心理模型。导航解决这么几个问题：1、怎样从上海到杭州？“怎么去的问题”是火车呢，还是汽车呢，还是飞机呢。有明确而熟悉的提示。2、路上到了嘉兴，有没有牌子指示一下呢？“我在哪里的问题”导航是分层级的，有系统级的，有任务级的，但所有的层级无非都是基本解决上面两个主要的问题。交互是指系统和用户的对话，这里面包含的内容就比较多了，可以想象成你和另外一个人对话，谈的话题可能有很多种：1、是打手势，还是抛媚眼？ 最基本的输入和输出方式的问题，比如键盘、触摸屏、把手、屏幕、声音等都是这个层级的选择问题。2、该哭就哭，该笑就笑，千万不要假装。 解决一个affordance的问题，一直比较觉得比较难翻译这个词，今天突然发现，可以用“直观性”来表示。什么意思呢，就是你做一个控件（或者操作的暗示），必须它的行为和模样对应。按钮应该长得像按钮、把手就应该像把手，穿着西装出现在垃圾场，是不是不协调。待续先....昨天碰上开会，没能写完。今天继续完成这四块。交互部分除了1、输入输出方式;2、操作的直观性之外；还有合适控件的选择、帮助信息的呈现方式、错误信息的提示等多个部分，内容包括多个模块，但是如果综合起来分析的话，我们可以把它分成交互流程和每个流程环节的具体实现方式两个部分，这样就比较清晰易懂了。呈现，就是化妆啦。不过这里的化妆不仅仅是为了好看，也就是说不仅仅是目前很多人讲的GUI，化妆还有一个基本的作用，就是让别人认出你的鼻子和眼睛，不要搞混了。产品的呈现方面从大到小包括多个方面，比较高层次就是，眼霜和口红的区分，把口红涂满全脸，用户看到肯定晕菜，但是现在很多网站都是这样，Flash、大图片满天飞。这个层次主要就是决定一个页面的布局层次，这个层次需要从颜色、大小、组块等各个方面一起来支持，不可或缺。布局好了之后，接下来要考虑的就是注意力的分配问题，基本的原则是要记住的：看一个脸首先看的是眼，其次是鼻子，然后是其他....一 个页面也有类似的规律，首先看的是动的、然后是图片、然后是大的文字。大小、红色、动态、新颖等也会在这里面起到不同的作用。当然，还有一个需要非常注意 的是，虽然你可以把内容的主要程度按照这个规律来排列，但是切记现在用户因为广告的负面效应，很多动态的效果虽然会被第一时间注意到，但是会被马上屏蔽为 不重要内容。这些因素之外，还需要考虑的就是文字的字体、大小、可读性等多个比较琐碎的因素。这些工作中有一些是需要交互设计师和GUI一起来完成的，需要有一套规范来指导，不能仅凭主观感受。这四个因素简略讲起来，就是这样，但在实际产品中，可能需要在每个因素下面又分为很多细的东西。最 后，理顺一下这四个方面的关系：架构和交互可以说是一个剧本，一个导演，都是电影里不能直接看不到的，需要琢磨的，但是他们作用极大，可以决定一个电影的 大部分质量；导航和呈现是主角和群众演员，没有导航，电影根本没法演，群众一个两个演的不好，会有问题，但是不会有太大问题，但是如果一群都配合不好，别 人都在哭，他却在笑，也会使得电影变成马戏团。.........
转自：http://blog.sina.com.cn/s/blog_5772b0e7010007xy.html 前一阵子要为技术部的同事们做一个关于UCD、UE的讲座，怎样说能让大家理解和接受？当时可谓绞尽脑汁，我的boss也提了一些意见。讲座的前一天晚上突然想到了这个点子，兴奋得失眠就为了整理这个~ 灵感来在DMMT中提到的“好感储存器”和一些和Persona有关的概念。我游戏神经不咋的，这样打比方可能有不恰当不完整的地方，欢迎大家补充赐教。 首先，我们把用户使用我们的产品的体验过程(暂且局限成'访问我们的网站'吧)想象成玩一个RPG游戏。听到这字眼，也不必想得很复杂，回到n年前最最简单的RPG： 一般屏幕的左上角都有这样的一个人物头像和数值条： 在RPG的游戏里这一条一般都是代表着HP(SP什么的我们暂且不去想)，而在这里，这一条是UEP。 一般情况下，用户刚来访问网站时，UEP是满的。但是可能有很多因素/事件影响UEP，比如在DMMT里见到的这张图： 手机拍的，看个大概。详见DMMT第10章-可用性是基本礼貌 首页上看不到想要的信息，也许UEP就减了10；找东西很费劲，减了20；碰到问题FAQ里也没有答案，又减了30…… 减着减着，UEP也许变成黄色了，不多了，用户已经不高兴了；再减减，红色了，已经明显给用户造成了消极的体验；最后减到了UEP=0，耗尽了用户的耐心，这里生成游戏的失败条件： 当UEP减为零时，用户完全失望，会离开我们的网站。 这里也包含了一个我的观点：UE设计的细节会累积、然后影响用户对于我们的总体感受与评价。 但恐怕游戏的失败条件还不止一个。我们有同行业竞争者，用户可能还在访问他们网站/使用他们的产品，也就有了UEP'、甚至UEP''……用户用脚投票，当他们觉得另一个更有用、更好用，就会离开我们而投奔去我们的竞争者，即使我们的产品也做得还算不错。这就生成另一失败条件： 当UEP'＞UEP一定数值时，用户会离开我们的网站，选择别的产品。 但人是不同的，有些人耐心比较足、有些人天生要求高、有些人用什么东西都会很快上手……就好像在游戏里，不同的玩家有不同的等级、HP最高值、攻击力等 等~UEP初始值为多少、遇到什么样的事情UEP减少多少？为解释这些问题，我们把上面这个超~~简单的RPG再完整一些。.........
转自：http://www.uecn.net/html/shijue/200809/04-578.html BrokerScience Real Estate RSS Icons DrinkRSS Photoshopstar Simple Subscribe Badge (包括PS教程) Design Freak RSS Feed Badge Heart Shape RSS.........
转自:http://www.zvpp.com/viewthread.php?tid=24044在线做自己的个性印章: http://home.kele8.com/smallgame/signetImg/default.aspx 这个不用多说了.进去就会了.能做出你自己的6种字体的个性印章.不用PS那么麻烦 在线做各种字体和办证等: http://www.igogo8.com/ QQ空间彩色日记生成 http://www.qchong.com/color.htm 图片仓库: http://pic.sdodo.com 可以为图片加字,图片裁剪,大头帖,FLASH图片等功能,很方便! 空间或网站统计记数器: http://www.00counter.com/ 先申请会员后,就可以申请你喜欢的记数器了,也可以自己上传自己制作的. 支持大量中文字体签名图标生 http://www.youmade.com/font/ 支持各种类型图片的生成，可以选择设置的条件非常灵活: http://www.abi-station.com/tchinese/ LOGO模板大全(小图标) http://www.88gg.com/0727/00/0727/0/0520/logogif 有的人制作LOGO但不知道去哪弄好看的背景素材...这个网站的素材..估计你看都看不过来..绝对好............
转自：http://hi.baidu.com/totaobao/blog/item/4fd1da1bf343bcd5ac6e75e3.html作者：totaobao一般我们看到的比如新闻列表，为了使文字不回行，控制字数，会通过程序让多余的字符显示省略号，我们只使用CSS可以达到同样的效果，虽然不完美。 li { width:50px; white-space:nowrap; text-overflow:ellipsis; overflow: hidden; } 首先是一个容器，可以是div,li,td等等，先定义宽度，“white-space:nowrap”是强制在一行内显示所有文本，不回行。“text-overflow:ellipsis”就是关键了。 text-overflow是CSS3新增的属性，IE6以上版本支持。它可以带2个参数：clip [不显示省略标记（...），而是简单的裁切]， ellipsis[当对象内文本溢出时显示省略标记（...）]。所以，这个方法是不支持Firefox的。因此，我们还要加上一句overflow: hidden，让多余文字在ff中隐藏。 此方法对我们网站很是管用,由于录入框支持扩展区和基本区双区输入,所以从其他网站复制过来的扩展区文本可以正常现实,但是在长度计算上总是出现问题!用这个方法就可以解决了,但是普及上就... 新的东西固然好，但是兼容上就存在问题了~.........
