首页 新闻 论坛 群组 Blog 文档 下载 读书 Tag 网摘 搜索 .NET Java 游戏 视频 人才 外包 数据库 第二书店 程序员

zdg/ 


共52个网摘 [ 1  2 ]  下一页  |  访问zdg的个人空间

表单元素:40个CSS/JS风格和功能技术处理

zdg收录,使用标签:CSS, WebDesign,时间:2008-8-20 13:35:01 | 相关网摘我也收藏

下面是最常用的40个CSS/JS风格和功能技术处理表单元素,真是收集的很全。


浅析facebook的信息架构

zdg收录,使用标签:facebook, WebDesign,时间:2008-7-25 11:33:39 | 相关网摘我也收藏

好的信息架构设计,可以清楚的表现产品定位,可以清楚的阐述内容层次和关系,可以在使用中保持流畅,并能够让用户迅速的熟悉。

所谓“清楚的表现产品定位”:用户一看网站的信息架构,就知道这个网站是干什么的,我是否应该留在这里,我在这里能干什么应该怎么开始去用。
所谓 “清楚的阐述内容层次和关系”:用户一看网站的信息架构,就清楚知道页面上有多少内容,内容和内容之间的关系是什么,什么类型的内容在什么位置。
所谓“可以在使用中保持流畅”:让用户在使用的过程中感觉不到“跳转”和“障碍”,感觉自己在一个平和世界里畅游,非常流畅,不跳动、不卡机。
所谓“能够让用户迅速的熟悉”:用户看到你的第一个界面时,也许需要找一下他需要的内容在那里,也许会觉得这个网站陌生、有距离。但当他很自然的看到第二个、第三个界面后,应该感觉“这个网站很熟悉”,需要任何内容时都不用去“找”,很自然的就能知道什么类型的内容在什么位置。


网站的视觉路径和版式设计

zdg收录,使用标签:WebDesign,时间:2008-4-14 0:00:23 | 相关网摘我也收藏

cooper谈到用户的视觉路径一般是:从上到下,从左到右。

网站中方块
因为人们从接触信息以来,信息的呈现就是以方块式存在:报纸、书,单个字成点,一行字成线,一段字成面,而这个面当然是以方形呈现的效率最高。网站的视觉设计大部分其实都是在拼方块。
1 方块感越强越能给用户方向感。
2 方块越少越好。
3 尽量用留白做视觉区分。

对齐和间距
视觉设计最简单,也是最容易忽略的就是对齐。检查的方法就是查看每个方块中的边线,方块与方块之间的边线,尤其是纵向维度。
间距的一般规律:字距小于行距,行距小于段距,段距小于块距。

主次关系
怎么对用户引导的关键就在于怎么处理主次关系。说白了就是对比,从视觉的角度上看:形状的大小,颜色,摆放的位置都会影响信息的重要与否。
从大的区块来看,不要平均分割页面,三栏的设计应该让其中一栏明显短一些。
从局部来看,也要把握信息呈现的节奏,比如yahoo中间新闻栏的设计,大图带大标题是第一要点,小图带字是第二要点,纯文本第三,节奏感、主次关系非常强。


段正淳的css笔记(6)-浅谈css框架开发

zdg收录,使用标签:CSS, Framework, WebDesign, Taobao,时间:2008-2-17 19:35:43 | 相关网摘我也收藏

个人总结了在开发css框架中的一点经验


(译)开发人员经常犯的8个设计错误

zdg收录,使用标签:UE, WebDesign,时间:2008-2-6 2:10:54 | 相关网摘我也收藏

设计师在抱怨开发人员不尊重Web标准,后台开发人员在抱怨为什么不可以增加一个空格。PM在抱怨为什么项目总是因为那些看似简单的问题而延期……如何才能提高后台开发人员与设计师以及前端开发工程师的合作效率?相信很多网站或软件开发公司都越到类似的问题。

从UED的角度而言,我们的天职是追求用户体验。我们应该尽力坚持自己应该坚持的东西。白鸦曾经说过,用户体验不只是UED的事情,而是整个开发团队乃至整个公司需要参与的事情。

我们不能只是抱怨,我们去理解开发人员。同样,我们做出努力,让开发人员去理解我们。

一个优秀的网站是优秀的设计和优秀的代码的结合,你经常发现设计师不得不去理解代码,而开发人员尝试自己去设计。 开发人员花费大学生涯和与其他开发人员一起学习,我可以肯定的说程序员并不是设计师。谢天谢地,我们以前可以评判代码是否重用或者符合正确的OO方法论,但却无法评判美学。 但现在,一个开发人员最值钱的资产就是他对设计的敏锐的理解。


25 Code Snippets for Web Designers (Part2)

zdg收录,使用标签:WebDesign, CSS,时间:2007-11-22 12:52:23 | 相关网摘我也收藏

Part 2 of our code snippets series takes a look at more handy pieces of html, ajax and css that you can incorporate into your web designs.


25 Code Snippets for Web Designers (Part1)

zdg收录,使用标签:WebDesign, CSS,时间:2007-11-22 12:51:17 | 相关网摘我也收藏

There are loads of handy scripts, bits of html and widgets that you can incorporate into your websites and blogs - here we bring together 25 of the most helpfull in the first part of this series …


CSS Sprites

zdg收录,使用标签:CSS, WebDesign, Performance, YUI,时间:2007-10-9 18:43:11 | 相关网摘我也收藏

我们知道,自CSS革命以降,HTML倾向于语义化,在一般情况下不再在标记里写装饰性的内容而是把呈现的任务交给了CSS。GUI是缤纷多彩的,少不了各种漂亮的图来装点。新时代的生产方式是,在HTML布满各种各样的钩子(hook),然后交由CSS来处理。在需要用到图片的时候,现阶段是通过CSS属性background-image组合background-repeat, background-position等来实现(题外话:为何我提现阶段,因为未来浏览器若支持content则又新增另外的实现方法)。我们的主角是,你一定猜到了,就是background-position。通过调整background-position的数值,背景图片就能以不同的面貌出现在你眼前。其实图片整体面貌没有变,由于图片位置的改变,你看到只该看到的而已。就好比手表上的日期,你今天看到是21,明天看到是22,是因为它的position往上跳了一格。所以你也大概了解到,CSS Sprites一般只能使用到固定大小的盒子(box)里,这样才能够遮挡住不应该看到的部分。


网页设计必备资源

zdg收录,使用标签:WebDesign,时间:2007-9-29 11:20:11 | 相关网摘我也收藏

有了这 77 个工具,还怕什么?


科学与艺术兼顾的有效网页视觉设计

zdg收录,使用标签:UE, WebDesign,时间:2007-9-23 21:24:33 | 相关网摘我也收藏

来自澳洲Hiser Group的网页视觉设计元素归纳图示,他把网页中可能涉及的视觉设计分成了屏幕布局,图形用户界面和品牌形象三个模块。但是根据考虑角度的不同,我个人觉得应该稍微调整一下,可以把网页视觉设计简单分为两个类型:基于科学考虑的功能性图形设计和基于视觉艺术考虑的视觉冲击设计。


给网站开发和设计者的10点建议

zdg收录,使用标签:Javascript, WebDesign,时间:2007-9-16 22:27:06 | 相关网摘我也收藏

在办公室里,我们常常会问:“还记得没有Firebug时怎么过么?”它确实改变了我的生活。其主要好处如下:

* 检阅DOM
点击“Inspect”,然后鼠标放到页面元件上,就能看到此元件的HTML和CSS代码。
* 显示样式继承的实时CSS编辑
简直就是钱啊——这大大节省了布局设计的时间。例如,在Firebug里可以选择一个DIV标记,点击margin属性后手工调整,上下键为加减1个像素,上下翻页键为加减10个像素。(htmlor注:任何数值属性都可以这样调整) 还可以在当前样式添加新属性。效果满意之后,再把修改的CSS代码贴到实际文件中去。
* 详尽的Javascript调试
这里的JS控制台比Firefox自带的稍好。它更详尽,是默认控制台不错的替代品。
* 查看页面加载的所有文件及总字节数
对于优化站点加载时间来说,这很关键。你可以测试单个文件会加载多久,图片,JS文件,AJAX调用等。在“Net”部分的最后一行,可以看到页面加载文件的总字节数。


良好位置感的设计

zdg收录,使用标签:WebDesign,时间:2007-8-7 18:23:12 | 相关网摘我也收藏

网站就像是一个信息群岛,岛屿和岛屿间是相连的,差别在于你是用独木桥还是高速公路,桥边(路边)是美女的诱惑还是指示牌。良好位置感的设计,主要解决三个问题:我从哪里来(为什么我在这里)?我在哪里(这里是哪里)?我将去哪里(下一步怎么走)?就像是一个迷宫,你所处位置正面有三条路,背面有三条路,你可能一下子就迷失了,忘了从哪条路来,也不知道下一步该走哪条路。


优秀设计所绽放的魅力(这样的flickr)

zdg收录,使用标签:UE, WebDesign,时间:2007-8-7 18:19:41 | 相关网摘我也收藏

我是Flickr的死忠fans,虽然我很久之前就开始在blog里不遗余力的介绍flickr,可以,一说到优秀的设计,我还是想把那些话再一次的搬出来讲给大家听,因为,flickr真的很棒!


互联网的使用习惯新浪说了算吗?

zdg收录,使用标签:WebDesign,时间:2007-4-18 16:42:12 | 相关网摘我也收藏

互联网的使用习惯,是否由新浪说了算,这是一个伪命题。在内容型网站,可能确实存在首页不得不仿照门户的做法“要尽量少的交互,放尽量精华的内容”,但对于功能型网站,安排恰当的路径/入口,考虑到新/老、看/说写类型用户的不同感受即可。


优秀的CSS设计的判断标准

zdg收录,使用标签:WebDesign, CSS,时间:2007-3-1 13:59:58 | 相关网摘我也收藏

优秀的CSS设计,我的判断标准(按照实现的步骤):
摒弃table布局,采用完全的CSS布局。table标签仅用在容纳表格型数据的场合,而不用于页面布局的目的。
全部或者几乎全部取消使用带有表现含义的标签和属性,将这些工作全部交给CSS来完成。
尽量实现CSS代码的重用,尽量多利用CSS的继承和层叠,而不是到处定义新的CSS类。
页面中的标签都是带有结构含义的,尽量少因为布局的目的引入额外的div标签。
页面中的结构与表现完全分离,结构位于html文件中,表现位于css文件中。
尽量使用通用的CSS语法,少用特定于某种浏览器的CSS语法,必需要用的这类语法隔离在单独的css文件中,以便日后浏览器升级后删除。


Smallest effective difference

zdg收录,使用标签:WebDesign,时间:2007-2-21 14:34:13 | 相关网摘我也收藏

抱歉还没有找到合适的词来翻译这三个单词的组合。它出自Edward Tufte,意思是:Make all visual distinctions as subtle as possible, but still clear and effective,翻译过来就是说,让元素视觉差别尽可能细微,但依然保证清晰和效率。


每周一站:软件下载网站的设计(softpedia.com)

zdg收录,使用标签:WebDesign,时间:2006-11-22 3:21:19 | 相关网摘我也收藏

总结一下,为什么网站的界面设计可以带来信赖感了?大致的优点在于:

1) 大分辨率,布局简单,使用1024分辨率查看时,铺满整个浏览器。大规模的感觉。(国内使用的多还在700,770,778之类的宽度) 而只有两列,重点版面突出。
2) 疏松排列,巧妙留白,成就了流畅的视觉体验。跟那些恨不得把所有特点都摆出来挤在一起的小家子作风相反,这种宽松大度,显得气宇不凡~
3) 背景色轻盈,避免强烈的对比。这么做的优点优雅的突出文字部分。干净而精致,一向都是很高的境界~
4) 使用漂亮的视觉元素进行分区,让页面整体结构清晰,减少浏览负荷。
5) 少使用动态视觉元素


web产品设计随笔

zdg收录,使用标签:WebDesign,时间:2006-11-20 17:43:58 | 相关网摘我也收藏

我认为成功的产品设计很关键的一点是你要给你的网站你的服务一些特别的东西,能抓住用户的东西,可能是一种颜色一种布局,也可能是一句话,或者是制定一种规则。让用户在使用上和在情感上都产生某种习惯和依赖感,让他们在使用你产品解决问题的同时,也是在享受一种LifeStyle,那么我认为就算是成功的产品设计。


小论中英文网站的设计差异

zdg收录,使用标签:WebDesign,时间:2006-10-29 23:29:16 | 相关网摘我也收藏

好了,我们回过头来总结一下:
1、中文的行间距太小;
2、中文缺乏一种起伏的节奏;
3、中文的自动回行有重大缺陷。
结论:中文一不小心就变成铁板一块。

如何解决这个问题,设计师有的是办法,我就不一一赘述了,我这里想说的是:中文和英文由于语言属性根本上的差异,因此完全照搬英文站的设计是一种愚蠢的、教条的思路,尤其当这种设计方案需要用同一种计算机语言(XHTML+CSS)来实现的时候,细节的修改就显得更加重要。建议还是多参考亚洲同行的作品,前两年韩国和日本网站模板盛行,有它的道理,至少我很少看到他们用纯黑色——嗯,就说到这儿,不多不少刚刚好,完美!


当前的网站设计风格

zdg收录,使用标签:WebDesign,时间:2006-10-29 18:25:21 | 相关网摘我也收藏

它总结了一些当前网站设计风格的发展趋势。但是我得先提一句,它说的都是西方网站,未必适合我们中国网站的情况和中国网民的审美观。如果能给你一点点参考和借鉴的价值,就足够了。


大师之路 Unify tutorial

zdg收录,使用标签:WebDesign,时间:2006-10-10 17:52:49 | 相关网摘我也收藏

最为庞大和详细的网络中文Photoshop教程,独有的章节顺序安排,适合于初学者的教学思路。


13.5万页面的网络点击调查与网页点击热区

zdg收录,使用标签:SEO, WebDesign,时间:2006-8-1 0:03:56 | 相关网摘我也收藏

对于网页视觉可见区域的点击,最频繁被点击的区域呈一个"F"型,事实上表明,屏幕左上方的狭小区域,真正成为网页的黄金三角.


10个设计最经典的web2.0网站

zdg收录,使用标签:WebDesign,时间:2006-7-12 2:14:48 | 相关网摘我也收藏

做好一个网站,不仅要在服务及功能上胜人一筹,而且网站的整体设计也是一个不可获缺的重要因素,一个设计漂亮的站点通常能在第一时间吸引人的眼球,用户回访机率也就更大。因为我本人对设计这一块也很感兴趣,所以经常在浏览一些网站的时候,非常在意它们的设计效果,下面这十个web2.0网站的设计堪称经典,值得我们去学习。


大型社区设计:提高用户体验的10个细节

zdg收录,使用标签:WebDesign, 社区,时间:2006-6-5 0:33:42 | 相关网摘我也收藏

最近在开发社区程序,收集和自己想了一些能提高用户体验的社区设计理念,拿出来和大家讨论讨论.


Blog设计的7个趋势

zdg收录,使用标签:WebDesign, blog,时间:2006-5-11 19:17:37 | 相关网摘我也收藏

cre8d design blog里有一篇关于Blog Design Trends的文章,例举了目前Blog设计方面的7个趋势。这些趋势已经在很多的国外Blog中被广泛应用。


可用性的维度:定义会话,推动进程

zdg收录,使用标签:WebDesign, UE,时间:2006-5-3 23:31:55 | 相关网摘我也收藏

最初,用全部以E开头的单词只是个文字游戏,而我也一直在寻找可以让“可用性”的维度易于记忆的方法,所以5个E就诞生了。我决定用:* 有效的(Effective)* 高效的(Efficient)* 吸引力(Engaging)* 错误宽容度(Error Tolerant)* 易学习的(Easy to Learn)


亚马逊网站导航栏的变迁史

zdg收录,使用标签:amazon, WebDesign,时间:2006-4-23 0:22:47 | 相关网摘我也收藏

可以说是亚马逊网站普及了 Tab 式导航。这么多年来,他们一直在探索着一种用户界面,可以使他们越来越多的产品清晰的呈现在用户眼前。我们现在回头去看看亚马逊网站顶部导航的历史变迁也是一件非常有趣的事情。


网站制作流程及界面交互设计研究探讨

zdg收录,使用标签:WebDesign,时间:2006-4-1 22:22:25 | 相关网摘我也收藏

很多朋友希望,我能把我做网站的一些流程及经验跟大家分享一下,最近刚好做一次内部培训,所以稍微整理了一下,这些只是针对网页初学者,具有一定平面设计水平的人,对HTML不是很了解,他们可能只是想做一个个人主页而已,所以整体还是趋向于传统的表格布局,这里有很多都是一些我个人刚开学时自己摸索的经验,所以可能不是很专业,但是绝对是比较容易入门的,我一直有这种思想,你只有塌进来了,你才可能往更高的地方爬,我想当初如果没有这段的学习,现在我也不会明白什么W3C,什么CSS,什么ASP,什么XML,一切都是有一个起点,希望能对大家有点小帮助。整体的PPT比较大,没有放这,我把主要内容用文字大致整理了一份,如果需要PPT,可以跟我联系。有不合理的地方,希望大家能指出,可以共同探讨一下。


w3c技术架构介绍

zdg收录,使用标签:WebDesign,时间:2006-3-6 22:34:51 | 相关网摘我也收藏

W3C技术架构图描绘了一个两层的模型:万维网体系结构(被标注为“One Web”)建立在互联网(Interner)体系结构之上。图中丰富的Web层显示了W3C关心的领域和发展的技术。



共52个网摘 [ 1  2 ]  下一页

zdg/相关标签



网站简介广告服务网站地图帮助联系方式诚聘英才English 问题报告
北京创新乐知广告有限公司 版权所有 京 ICP 证 070598 号
Copyright © 2000-2008, CSDN.NET, All Rights Reserved