摘要：
摘要:当我们进行设计时，将PC上的控件照搬到iPhone上，可能还没有什么特别感受；可当我们发现其他的产品中和PC上的做法很不一样的巧妙设计时，又总是发出惊叹，随后又懊恼自己的保守行为显得多么的不上流。 ... ... ... ...Key：一定要做减法不要担心多点一下让触摸更有快感不要拘泥于PC的控件样式触屏的出现终于让人们可以摆脱输入设备的束缚，能够彻底和虚拟世界“亲密接触”，使得人机交互的方式踏入一种革命式且全民参与的时代。我们跟随着潮流不断将PC上的软件移植到触屏终端，却总是因为惯性思维，而忽略或者不知道如何体现触屏的本质意义，总是不经意的把PC的规矩搬到触屏，然后再看着做出的设计叹息 阅读全文
摘要：
国画中有句话，“画虎先画骨”。对应到网页上，视觉效果只是一张皮，前端代码是支撑这张皮的骨，了解骨架是怎么长的，有助于设计出更合理高效的页面。一、常见视觉效果是如何实现的关于文字效果文字自身属性相关的效果css中都是有相对应的样式的，如字号、行高、加粗、倾斜、下划线等，但是一些特殊的效果，主要表现为ps中图层样式中的效果，css是无能为力的。但是css也在不断发展，在css3中已经新增了文字阴影的效果，可惜IE6、7、8均不支持。所以，一些比较特殊的文字效果，依然只能通过图片来实现。说说文字间距在css中其实是可以控制文字间距的，但是现实中很少会使用，一方面是很多设计师不知道css中有相应的属性 阅读全文
摘要：
自从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元素内调用(因为 阅读全文
摘要：
手机端的文本输入受到使用环境、网络状况及设备本身条件的制约，使其用户体验的改良成为一个老生常谈的话题。如：一直在改进的输入法，新输入方式的探索（语音输入），甚至想尽种种办法去避免输入……文本输入本身是一个从无到有的过程，是让用户将空白的输入框填满的过程，本文避谈一些尚未经过易用性测试验证的创新设计，从本人的日常积累和实际经验出发，以文本输入框作为设计对象，从帮助用户认知及简化用户操作这两个维度来探究这些看似简单空白的小条能否生长出大智慧。无中生有之“引导词”——帮助用户认知手机端的界面空间可谓寸土寸金，很少有空白的区域。而用户在面对界面中一片空白的区域时往往会产生紧迫感甚至有些不知所措。如果在 阅读全文
摘要：
几乎每天我们都能发现新的关于传授和推广HTML5的资源和文章,我们也在HTML5 boilerplate和HTML5 Reset(尽管他们已经超出了HTML5的范畴)给出了HTML5的模板。我们也有无数可以去选择的涵盖HTML5及相关技术的书籍。我们有书架、画廊和分析师去帮助我们处理HTML5的弊端。但是主要的不要忘记官方的文档。从我的自己的观点出发（剔出那些关于HTML5能做和不能做的争论）网页设计和开发者社区对新技术和语义化是持乐观态度的。虽然在理论上HTML5拥有能够改善网页的潜质，事实上这么多重要的改变是很难去理解和把握的。对我个人而言我一直去慢慢的体会HTML5的各种新特性的，因此我 阅读全文
摘要：
上周五下班前我们敬爱的三三大人又在组里讨论了关于“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 阅读全文
摘要：
先来回顾一下广告的认知心理流程：广告心理包含以下流程：无意注意→有意注意→增强说服效果（记忆与再现、意象与联想）→情感与决策。在上一篇文章中讲到：设计推广banner时，如何在认知流程的第一阶段——无意注意令信息hold住用户眼球。接下来，进入认知流程第二阶段——有意注意：当人们对推广banner产生需求，有进一步了解的渴望，就会主动关注信息并进行进一步加工。本文通过对有意注意理论分析，使推广banner不仅能吸引用户，还能令其在加工信息时更流畅与舒适，增强用户体验与读下去的信心与愉悦感。有意注意是指，有预定目标，必要时还需要一定意志努力的注意；在心理学中有时有意注意也称为积极注意或意志注意， 阅读全文
摘要：
如题，给大家介绍和讲解几个常用的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 阅读全文
摘要：
转载请注明来处，关注我，请点击：http://weibo.com/heidixie离开交互圈已经有段时间了。但由于博客还在，还是能够偶尔收到一些邮件，上周有位同学问我：我在求职，我看到很多招聘说明上需要交互设计师编写界面交互设计文档，请问界面交互设计文档是什么文档？怎么编写呢这让我想起来2009年自己在项目里也大力推行过交互说明文档（在下文中，简称为DRD），格式倒没什么限制，交互设计师自己写到界面上也行，单独文档成文也行，总之就是让交互设计师能够将界面承载不了的信息通过文档沉淀下来，降低项目里的沟通成本和风险。今天整理电脑，翻出以前的PPT，分享之。这将涉及到几个问题：一. 什么是交互说明文 阅读全文
摘要：
最近在看文本相关的属性，觉得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来制作一些效果， 阅读全文