03 2012 档案

[转]设计师也需要了解的一些前端知识
摘要：国画中有句话，“画虎先画骨”。对应到网页上，视觉效果只是一张皮，前端代码是支撑这张皮的骨，了解骨架是怎么长的，有助于设计出更合理高效的页面。一、常见视觉效果是如何实现的关于文字效果文字自身属性相关的效果css中都是有相对应的样式的，如字号、行高、加粗、倾斜、下划线等，但是一些特殊的效果，主要表现为ps中图层样式中的效果，css是无能为力的。但是css也在不断发展，在css3中已经新增了文字阴影的效果，可惜IE6、7、8均不支持。所以，一些比较特殊的文字效果，依然只能通过图片来实现。说说文字间距在css中其实是可以控制文字间距的，但是现实中很少会使用，一方面是很多设计师不知道css中有相应的属性 阅读全文
posted @ 2012-03-31 17:59 还是天天如此 阅读(197) 评论(0) 推荐(0)
[转]让所有IE支持HTML5的解决方案
摘要：自从HTML5能为我们的新网页带来更高效洁净的代码而得到更多的关注，然而唯一能让IE识别那些新元素(如<article>)的途径是使用HTML5 shiv,感谢remy sharp为我们提供了这个迷你脚本来解决IE支持HTML5的问题。您还可以参考以下HTML5相关教程及资源:《HTML5 Drag&Drop 拖拽、FileReader实例教程》《HTML5 WebSockets 基础使用教程》《HTML5和CSS3工具资源汇总》《关于HTML 5 canvas 的基础教程》《一起感受HTML5和CSS3的能量》使用和下载 html5.js必须在页面head元素内调用(因为 阅读全文
posted @ 2012-03-27 16:59 还是天天如此 阅读(189) 评论(0) 推荐(0)
[转]“无中生有”—手机端高效的文本输入框设计评论[29]
摘要：手机端的文本输入受到使用环境、网络状况及设备本身条件的制约，使其用户体验的改良成为一个老生常谈的话题。如：一直在改进的输入法，新输入方式的探索（语音输入），甚至想尽种种办法去避免输入……文本输入本身是一个从无到有的过程，是让用户将空白的输入框填满的过程，本文避谈一些尚未经过易用性测试验证的创新设计，从本人的日常积累和实际经验出发，以文本输入框作为设计对象，从帮助用户认知及简化用户操作这两个维度来探究这些看似简单空白的小条能否生长出大智慧。无中生有之“引导词”——帮助用户认知手机端的界面空间可谓寸土寸金，很少有空白的区域。而用户在面对界面中一片空白的区域时往往会产生紧迫感甚至有些不知所措。如果在 阅读全文
posted @ 2012-03-20 14:41 还是天天如此 阅读(239) 评论(0) 推荐(0)
[转]爱上HTML5
摘要：几乎每天我们都能发现新的关于传授和推广HTML5的资源和文章,我们也在HTML5 boilerplate和HTML5 Reset(尽管他们已经超出了HTML5的范畴)给出了HTML5的模板。我们也有无数可以去选择的涵盖HTML5及相关技术的书籍。我们有书架、画廊和分析师去帮助我们处理HTML5的弊端。但是主要的不要忘记官方的文档。从我的自己的观点出发（剔出那些关于HTML5能做和不能做的争论）网页设计和开发者社区对新技术和语义化是持乐观态度的。虽然在理论上HTML5拥有能够改善网页的潜质，事实上这么多重要的改变是很难去理解和把握的。对我个人而言我一直去慢慢的体会HTML5的各种新特性的，因此我 阅读全文
posted @ 2012-03-16 16:24 还是天天如此 阅读(222) 评论(0) 推荐(0)
[转]CSS Selector的优先级
摘要：上周五下班前我们敬爱的三三大人又在组里讨论了关于“11个class与一个id”谁的优先级高的问题～_～！猜一下01 <!DOCTYPE HTML>02 <html>03 <head>04 <meta charset="utf-8">05 <style type="text/css">06 body{font-family: "Microsoft YaHei";}07 .a1 .a2 .a3 .a4 .a5 .a6 .a7 .a8 .a9 .a10 .a11{color:red 阅读全文
posted @ 2012-03-16 16:12 还是天天如此 阅读(341) 评论(0) 推荐(0)
[转] 广告认知流程之2——有意注意
摘要：先来回顾一下广告的认知心理流程：广告心理包含以下流程：无意注意→有意注意→增强说服效果（记忆与再现、意象与联想）→情感与决策。在上一篇文章中讲到：设计推广banner时，如何在认知流程的第一阶段——无意注意令信息hold住用户眼球。接下来，进入认知流程第二阶段——有意注意：当人们对推广banner产生需求，有进一步了解的渴望，就会主动关注信息并进行进一步加工。本文通过对有意注意理论分析，使推广banner不仅能吸引用户，还能令其在加工信息时更流畅与舒适，增强用户体验与读下去的信心与愉悦感。有意注意是指，有预定目标，必要时还需要一定意志努力的注意；在心理学中有时有意注意也称为积极注意或意志注意， 阅读全文
posted @ 2012-03-16 14:06 还是天天如此 阅读(211) 评论(0) 推荐(0)
[转]详细解说：简单CSS3实现炫酷读者墙
摘要：如题，给大家介绍和讲解几个常用的CSS3属性，并用到实处。先看Demo（请使用Chrome或者Firefox浏览，IE的靠边）：此Demo地址为：演示，携程UED读者墙觉得爽的可以继续阅读下面的知识点，感觉不爽的可绕行。使用基础的Html和CSS写出雏形需要一提的是头像（img）的排版。给外面a标签padding-left:;，img自身float:left;margin-left:;，这种写法避免了不少因浮动产生的问题，且代码简明，推荐适当的使用此方法。下面是Demo代码：<ul class="readers-list"> <li><a ta 阅读全文
posted @ 2012-03-15 16:57 还是天天如此 阅读(177) 评论(0) 推荐(0)
[转]如何写一份交互说明文档
摘要：转载请注明来处，关注我，请点击：http://weibo.com/heidixie离开交互圈已经有段时间了。但由于博客还在，还是能够偶尔收到一些邮件，上周有位同学问我：我在求职，我看到很多招聘说明上需要交互设计师编写界面交互设计文档，请问界面交互设计文档是什么文档？怎么编写呢这让我想起来2009年自己在项目里也大力推行过交互说明文档（在下文中，简称为DRD），格式倒没什么限制，交互设计师自己写到界面上也行，单独文档成文也行，总之就是让交互设计师能够将界面承载不了的信息通过文档沉淀下来，降低项目里的沟通成本和风险。今天整理电脑，翻出以前的PPT，分享之。这将涉及到几个问题：一. 什么是交互说明文 阅读全文
posted @ 2012-03-14 10:27 还是天天如此 阅读(177) 评论(0) 推荐(0)
[转]text-indent小总结
摘要：最近在看文本相关的属性，觉得text-indent挺有意思的，就小小的总结了一下（这里不讨论用text-indent来隐藏文字）。我将会从下面几个方面来进行说明：1.text-indent应用于块级元素2.text-indent应用于行内元素3.text-indent应用于替换元素4.text-indent应用于inline-block元素5.继承6.总结一、text-indent应用于块级元素text-indent常用于段落首行2字符的缩进。我们先来看一下demo1（所有demo文章最后会提供下载地址）。各浏览器都可以正常的显示。如图：我们也可以通过负的text-indent来制作一些效果， 阅读全文
posted @ 2012-03-13 16:15 还是天天如此 阅读(520) 评论(0) 推荐(0)
[转]select的最佳预设（reset）
摘要：我们知道select标签在各个浏览器中的属性和各浏览器的支持各有些不同，从而造成select选择框在各浏览器的显示有不同，下面我们通过对主要 外形CSS属性的支持，打造全兼容select。 我对select的height、padding、line-height分别利用控制变量的方法写了个DEMO在各浏览器上测试三种情况：height.100.padding.0、height.no.padding.100、no.height.no.padding，结果如 链接图片各浏览器DEMO外观我们可以得出以下研究属性。ie6ie7ie8ie9ffchsfop默认高度22px22px19px20px19.. 阅读全文
posted @ 2012-03-13 11:47 还是天天如此 阅读(497) 评论(0) 推荐(0)
[转]HTML5标签使用的常见误区
摘要：最近组内进行HTML5标签的学习,方法呢就是大家每人挑选几个标签,自己先去学习,然后给大家作讲解.这个过程大家还是挺有收获的.但是现在HTML5还处在草案阶段,有些新的标签元素的解释也是经常有变化,甚至标签加入移出也很频繁(比如 hgroup),同时现有的大的门户网站在使用HTML5方面也没有很好的范例可以参考,让大家的学习过程更摸索.下面是我在 html5doctor 上面看到的一篇文章,在目前大家懵懂的阶段，可能看看大师的讲解会更容易理解。由于才疏学浅,很多不明白的地方可能只是做了字面上的翻译，不对的地方还请大家多多指教。下面附上原文地址：Avoiding common HTML5 mis 阅读全文
posted @ 2012-03-12 19:03 还是天天如此 阅读(202) 评论(0) 推荐(0)
[转]拥抱HTML5，《HTML5设计原理》读后随记
摘要：前言：HTML5和CSS3的时代到来了，新版2011版淘宝网首页已全部使用HTML5，拥抱变化才是王道。为之漫笔翻译的很好，看了一遍后，感觉理解了很多，强烈推荐其他做开发的童鞋尤其前端也来看看。不仅让我摸清了html4，xhtml1.0, xhtml2.0, html5之间的关系，也理解了为什么会出现HTML5，同时，加紧推进在项目中应用HTML5。著名的阿西莫夫机器人三大法则：机器人不得伤害人类，或袖手旁观人类受伤害。机器人必须服从人类命令，除非命令违反第一法则。机器人必须自卫，只要不违背第一和第二法则。xhtml1.0与html4.0相同点：两个规范的内容是一样的;词汇表是一样的;所有的元 阅读全文
posted @ 2012-03-12 16:57 还是天天如此 阅读(296) 评论(0) 推荐(0)
[转]浅谈Web标准、可用性、可访问性
摘要：前言：大家不难发现，只要是招聘UED相关的岗位，如前端开发工程师、交互设计师、用户研究员甚至视觉设计师，一般都对web标准、可用性和可访问性的理解有要求。那么到底什么是web标准、可用性、可访问性呢？一、web标准简单的说，就是HTML、CSS、JavaScript这三者分离。WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如 W3C DOM）、ECMAScript等。 阅读全文
posted @ 2012-03-12 16:39 还是天天如此 阅读(205) 评论(0) 推荐(0)
[转]善待PSD — 好设计师，从细节做起
摘要：配图：近日帮朋友设计的瀑布流 taobao站美丽格子^__^。作为设计师，应该将设计稿的最完美一面表现给其他人看。就像jobs 说的一样，好设计师，不会使用烂木头作为衣柜的背板。虽然你最终的设计稿很完美，但是你的psd让人觉得很糟糕，同样会让之后的切图仔觉得你不是个优秀的设计师，对不起死去的jobs哇～ XD在企鹅村玩代码玩了半年多，玩起psd来都有点生疏了。最近对设计MM 给的psd文件产生了点暧昧。有感悟抒发一下。看看是不是都有一样的困惑和同样的问题。如果切图仔死了，死因很可能是一份可怕的psd1. psd 文件尺寸 竟然有71M，(也许看着觉得还好，但是一开ps 就杯具了，内存不够 = 阅读全文
posted @ 2012-03-12 10:21 还是天天如此 阅读(168) 评论(0) 推荐(0)
[转]产品中图形语言规范化的意义与过程
摘要：现在随着互联网企业的发展与业务的拓展，随着时间的推移，一个公司的产品可能将越来越丰富多样，同样每一个产品随不断的功能完善和扩展，随着一个产品的“长大”产品内所需要用到的图标也必然会越来越多，这时候众多产品形象的呈现、产品内图标等视觉原素的表现，如何能与整个产品或公司的战略计划相适应，这时候在图形语言的视觉呈现，语义表达、识别性等层面就需要作一个全面细致的考虑了。我们来看几个典型的例子，回顾一下 Adobe 产品系列的成长过程， 从2005年 Adobe 收购了原最大的竞争对手Macromedia公司后，它的产品线得到了极大丰富， 而后在2002年Adobe确立了Creative Suite概念 阅读全文
posted @ 2012-03-08 10:55 还是天天如此 阅读(185) 评论(0) 推荐(0)
[转] “有点儿意思”的导航设计
摘要：导航是网页设计中不可缺少的部分，它是网站访问者获取所需内容的快速通道和途径。导航让网站的层次结构以一种有条理的方式清晰展示，并引导用户毫不费力地找到并管理信息，达到有效传递。同时，导航一般位于网页的中上部分，也是视觉中心的区域内。在保持其合理的功能作用的同时，一个好的导航设计，往往能够成为整个网页设计的点睛之笔！一个设计师在布局和整体规划网页设计时，导航总是一个重要的元素。我们会思考，导航以什么形式呈现？是否能够最大程度地发挥其梳理网站结构、有效传递信息的功能？是否能够烘托和配合整个页面的设计风格？是否能够别出心裁润色和体现该网站的特点又不影响其功能性？是否能够精益求精成为整个网页设计至关重要 阅读全文
posted @ 2012-03-02 17:17 还是天天如此 阅读(171) 评论(0) 推荐(0)
[转](安卓—点九)转载百度MUX
摘要： 阅读全文
posted @ 2012-03-01 15:53 还是天天如此 阅读(133) 评论(0) 推荐(0)