标签归档：设计

Web Design Trends For 2009(下)

发表于 2009年01月23日 由 sprite

Let’s first take a closer look at some of the trends we identified, discovered and observed over the last months. In this overview, you’ll find a review of each trend and more beautiful examples that can inspire you in your … 继续阅读 →

发表在 交互设计 | 标签为 | 留下评论

25 Beautifully Dark Websites – Part II

发表于 2009年01月21日 由 sprite

 Infinite Imagination

发表在 交互设计 | 标签为 | 留下评论

25 Beautifully Dark Website Designs

发表于 2009年01月21日 由 sprite

A few weeks ago I published a gallery of Beautifully Colorful Websites that drew a lot of interest from designers. I thought it would be appropriate to follow that up with a collection of great designs that feature dark colors. As always, … 继续阅读 →

发表在 交互设计 | 标签为 | 留下评论

10大实用web应用界面技术

发表于 2009年01月19日 由 sprite

当今越来越多的应用程序迁移到web平台上。由于没有平台的限制和安装的要求，SAAS的模式看起来非常有吸引力。Web应用程序的界面设计，其核心就是网页设计，但它的重点主要是在功能方面。要超越桌面应用程序， Web应用程序必须提供简单、直观和即时响应的用户界面，让他们的用户花更少的精力和时间去完成事情。 以前，我们并没有注意到web应用程序这个方式，但是现在是时候仔细看看一些实用的技术和设计解决方案，让Web应用更友好更漂亮。本文主要介绍的是在现代Web应用程序中，我们对设计模式以及有效设计解决方案进行大量研究并得到结果的第一部分，您可以在下面找到10个收集到的实用界面设计技术以及在许多成功Web应用程序中得出的最佳做法。

发表在 交互设计 | 标签为 | 留下评论

Web Design Trends For 2009(上)

发表于 2009年01月19日 由 sprite

We Web designers are a fickle lot. We love to experiment with things. We love to observe how people interact with our work. And we love to try out unusual design approaches that might possibly go mainstream and become a … 继续阅读 →

发表在 交互设计 | 标签为 | 留下评论

个人从事设计行业40句观感

发表于 2008年04月10日 由 sprite

做一个总结，把自己这些年的从业经历和观感罗列一下，某些话可能触及到个人神经，但它们没有恶意。 设计师喜欢把世界想象得很美好，社会很和谐，但是这些都只是愿望，真实情况是，设计师在个人成长和职业发展中总会遇到很多客观问题，而面对问题的时候，个人的IQ和EQ就变得很重要。 和大家共享交流一些我的看法，有助于以更平和的心态继续提高自己。 关于公司： 1. 好的公司只有那几个，剩下的大多数都是不怎么样的，但好在有一些不错的人让你支持下去；   2. 在中国当今社会中，你能够从公司的设计团队中找到真正的朋友；   3. 公司的性质取决于客户的性质，客户的性质取决于市场的需求，因此设计师必须先了解市场的需求；   4. 公司中别有用心的人很多，当有人质疑你能力的时候，你也应该有能力让他闭嘴；   5. 千里马不应该待在骡子群当中，选择最适合施展你能力的平台，而不是薪水最高的那个；   6. 千万不要相信猎头会给你介绍最好的工作，好和不好只有自己试过才知道；   7. 在别人的公司做出业绩，在自己的领域做出成就；   8. 公司里面有“人手”，“人才”，“人精”，“人渣”，站哪个队你可以自己选，只要能承担后果就行；   9. 优秀领导关注发展和利润，合格领导关注业绩和制度，无知领导关注马屁和权利，酌情处理；   10. 你的设计很棒，对于公司看来就是个美工，但是公司会虚伪的称呼你为“设计师”，“工程师”，“艺术家”。我们的期望是这个情况正在改变中，但是没有看到改变的成果。 关于个人： 1. 你是设计师，不是战斗机，需要亲和力；   2. 先立才能后破，在说别人的作品和观点不好的时候，先反省自己，多想一步；   … 继续阅读 →

发表在 杂七杂八 | 标签为 , , | 一条评论

网站有效设计的10个原则

发表于 2008年02月4日 由 sprite

　　决定一个网站成败命运的，不是视觉设计，而是设计的可用性和有效性。访问网页的用户们握着鼠标，决定一切，“以用户为中心”已然是成功网站的标准设计方向。总之，用户不用的功能，就不该存在。 我们并不打算重复探讨操作细节（比如：“搜索工具栏”应当怎么放置），相反，我们的目光将集中在网站有效设计的核心原则、启发式方法和入门上。这些如果能够使用得当，可以催产出更丰富的设计作品，且使呈现的信息更容易被获取。

发表在 交互设计 | 标签为 , | 留下评论

web2.0中流行的设计元素:颜色

发表于 2008年01月25日 由 sprite

颜色的变化跟人类的智慧一样,是无穷的,每个阶段都会有流行的色彩,有属于一个时代的颜色!WEB2.0是一个概念,它宣扬,定位了一些东西,以用户为中心,群体智慧,分享等等,等等.同时顺应这些需求,一些顶尖的设计师和开发者赋予并领导了一些色彩流行趋势.我凭感觉做了部分归纳和收集,心理没大有底,把能想到的列出来希望跟大家一起探讨>>再做补充吧! ★淡淡的浅色系及延伸应用 此类颜色似乎最早被应用在一些文档处理软件比如word,和操作系统里(比如MacOSX)用于分类归档,标记,或者突出显示使用.此类颜色给人的感觉很环保,不伤眼睛,而且对比度恰到好处,既可以有效区分,又不会显的太过突兀. google,Yahoo更为成熟的运用了这些颜色.MSN在新版网站中也设置了Simple White主题选择,并且新的LIVE系列产品更是对那种淡淡的兰色与1PX线条情有独忠~另外一些新兴的WEB-base办公软件也大量选用了此类颜色!事实证明,这些颜色的运用取得了大部分用户的认可并领导了趋势! 例子：GMail,yahoo360,live.com,start.com,netvibes,rember the milk ★柔软舒适的过度色 此类颜色不知道跟WEB标准的流行有没有关,包括一些优秀的CSS陈列馆网站,还有著名的simplebit的设计作品,都大量运用了这种柔软的过度色,包括blog的一些优秀THEME 也会经常看到.这让人想到苹果水晶效果的转变,从最新的TIGER系统中我们可以发现,苹果在逐渐弱化那种清澈通明的水晶和金属拉丝效果,而向更直观硬朗的过度色做转变!说白了就是越来越simple而不是玩那么多花样.

发表在 交互设计 | 标签为 , , | 留下评论

世界顶尖设计网站(转载)

发表于 2008年01月3日 由 sprite

网站设计近年百花齐放，入门网站Design Portal也特别多，以下介绍一些有名的。 http://www.k10k.net/ kaliber1000，是最有名的portal，其号称”设计师的午餐盒”，是很多人每天必去的地方。目前该网站正在重整，但其享负盛名，不能不介绍。 http://www.linkdup.com/ Linkdup至今已出至第34期，每期会介绍十多个网站。其评选严谨，能入榜的比属上品。 http://www.8minus8.com/ 版面简洁，网站收藏量不算多。 http://www.experimental.ro/front/index.php 设计出色，新闻也很update。 http://www.australianinfront.com.au/ 一个极具影响力的澳洲网站，宗旨是发扬本地创作的精神。 http://www.shadowness.com/ 一个带有photoshop/3D Max/Flash等教程的入门网站。 http://www.designiskinky.net/ 以报道各知名网页的最新动态为主。知名度很高。 http://www.pixelsurgeon.com/ pixelsurgeon除了有新闻外，也有设计师的采访，甚至有电影/书籍/漫画/音乐等的review。他们有几位华人设计师。我旧的头像里的中文字就是出自pixelsurgeon。 http://www.halfproject.com/ 100%菲律宾制造是他们的口号。这个网站的制作出奇的好，非常有特色。而内容方面也比同类网站充实。 http://www.kiiroi.nu/ kiiroi是早期成名的，尽来较为沉寂。 http://www.surfstation.lu/ 也是早期成名的。splash page随机的载上一些名设计师给他们做的封面。 http://www.shift.jp.org/ shift杂志的全球影响力决不亚于其他网站。它除了经常更新的splash shockwave page，其他设计实在不敢恭维。但它拥有庞大的database，收录了无数东瀛及世界各地的出色设计。而他们出道甚早，可以说是design portal的开山鼻祖。 http://www.ultrashock.com/ 主办人为美国的Patrick Miko和比利时的Peter(www.nrg.be)。这个网站主力提供Flash的资讯/高级教程和高级源文件。讨论区是你见过最酷的vbb，里面的版主都是成名人物。而整个网站从设计者到会员大多是顶尖高手(除了我)，所以水准极高。boos在那里混了很久，得益良多。 http://www.deformat.de/ 来自德国，连结了大小设计网站无数。deformat最大的优点是将各类型分门别类，介绍的很详细。 http://www.pixellamer.com/ 内容包括业界新闻，墙纸，连结等。值得一看。 http://www.infourm.com/ inforum于数月前问世，规模较少但水准极高。inforum由forum制作，而fourm的成员包括: … 继续阅读 →

发表在 交互设计 | 标签为 , | 3 条评论

网页制作参考：网页设计制作规范

发表于 2007年10月29日 由 sprite

//总论 本规范既是一个开发规范，也是一个脚本语言参考，本规范并不是一个一成不变的必须严格遵守的条文，特殊情况下要灵活运用，做一定的变通。但是，请大家千万不要随意更改规范。如果有任何问题，请及时与我联系，我会及时更改本规范的相关代码样例和文档。 /基 本 要 求 1. 在网站根目录中开设images common temp 三个子目录，根据需要再开设media 子目录，images目录中放不同栏目的页面都要用到的公共图片，例如公司的标志、banner 条、菜单、按钮等等；common 子目录中放css、js,、php、include 等公共文件；temp 子目录放客户提供的各种文字图片等等原始资料；media 子目录中放flash, avi, quick time 等多媒体文件 。 2. 在根目录中原则上应该按照首页的栏目结构，给每一个栏目开设一个目录，根据需要在每一个栏目的目录中开设一个images 和media 的子目录用以放置此栏目专有的图片和多媒体文件，如果这个栏目的内容特别多，又分出很多下级栏目，可以相应的再开设其他目录。 3. temp 目录中的文件往往会比较多，建议以时间为名称开设目录，将客户陆续提供的资料归类整理。 4. 除非有特殊情况，目录、文件的名称全部用小写英文字母、数字、下划线的组合，其中不得包含汉字、空格和特殊字符；目录的命名请尽量以英文为指导，不到万不得已不要以拼音作为目录名称，经验证明，用拼音命名的目录往往连一个月后的自己都看不懂， /脚 本 编 写 我们应该有一个脚本整体风格一致的概念，意思是一个月后和一个月前的你写的脚本风格保持一致，以及同一个工作组中不同的开发人员编写的脚本风格保持一致，因为我们不可能永远孤立的开发，你随时都有可能和三个月前的自己合作（你的客户要求改版），也经常要和工作室中不同的同事共同开发一个项目，还有可能被要求修改已经离职人员开发的脚本，当然你自己也有可能会扔下一个项目给后来的同事。 1. Html 文件的通用模板： <title> 文档标题 </title> 其他meta 标 记 样式表定义 客户端Javascript 函数定义及初始化操作 … … 补充： 为了保证网站能够与下一代的web 语言xml 标准兼容，所有的HTML 标签的属性都要用单引号或者双引号括起，即我们应该写 <a href=”url”> 而不 是 <a href=url>. 2. 允许全文检索的页面，为了使Internet 上的搜索引擎能够有效检索，在频道的首页的html的<head></head>之间应该加入Keywords 和Description 元标记，例如 ： ; 3. CSS 文件的格式样例代码 ： 这里尤其要注意的是a:link a:visited a:hover a:actived 的排列顺序一定要严格照上面的样例代码，否则或多或少会出问题。另外我们规定重定义的最先，伪类其次，自定义最后，便于自己和他人阅读！ 为了保证不同浏览器上字号保持一致，字号建议用点数pt和像素px来定义，pt一般使用中文宋体的9pt和11pt，px一般使用中文宋体12px 和14.7px 这是经过优化的字号，黑体字或者宋体字加粗时，一般选用11pt和14.7px 的字号比较合适。 在写 <table> 互相嵌套时，严格按照的规范，对于单独的一个<table>来说，<table><tr>对齐，<td> 缩进两个半角空格，<td> 中如果还有嵌套的表格，<table>也缩进两个半角空格，如果<td>中没有任何嵌套的表格，</td> 结束标记应该与 <td> 处于同一行，不要换行， 如我们注意在源代码中不应有这样的代码： <td><img src="”../images/sample.gif”"> </td> 而应该是这样的： <td><img src="”../images/sample.gif”"></td> 这是因为浏览器认为换行相当于一个半角空格，以上不规范的写法相当于无意中增加一个半角空格，如果确实有必要增加一个半角空格，也应该这样写： <td><img src="”../images/sample.gif”"> </td> 属于同一个级别 的 <table> 一定是左首对齐的，另外不允许没有任何内容的空的单元格存在，高度大于等于12px 的单元格应该 在 <td> 和 </td> 之间写一 个   如果高度小于12px, 则应该 在 <td> 和 </td> 之间插入一个1*1 大小的透明的gif 图片，这是因为某些浏览器认为空单元格非法而不会予以解释。如果代码顺序较乱，在DW3中可以通过command->apply souce formatting进行重新整理！ 5. Width 和height 的写法也有统一的规范，一般情况下只有一列的表格，width 写在<table> 的标签内，只有一行的表格，height 写在 <table> 的标签内，多行多列的表格，width 和height 写在第一行或者第一列的 <td> 标签内。总之遵循一条原则：不出现多于一个的控制同一个单元格大小的height 和width, 保证任何一个width 和height 都是有效的，也就是你改动代码中任何一个width 和height 的数值，都应该在浏览器中看到变化。做到这一条不容易，需要较长时间的练习和思考。 /一 般 原 则 … 继续阅读 →

发表在 Web标准 | 标签为 , , | 留下评论