可乐狼-设计|前端 http://www.kelelang.com 爱喝可乐 所以为狼 Thu, 09 Feb 2012 02:10:59 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 分享我工作中常用到CSS兼容解决方案 http://www.kelelang.com/archives/98 http://www.kelelang.com/archives/98#comments Thu, 09 Feb 2012 02:10:59 +0000 可乐狼 http://www.kelelang.com/?p=98 垂直/水平居中几种方法

1. 设定宽度和高度，父层为 position:relative; CSS写法:

position:absolute;left:50%;top:50%;
margin-left:-元素自身宽度的一半;
margin-top:-元素自身高度的一半;

2.table, 用起来就更简单了, 只要添加:
text-algin:center;
vertical-align:middle;

3.提供模板化的CSS class方法, 规则如下:
<div style="width:500px"> <!-- 记得加宽度, 不要写行内样式, 这里只是一个提示 -->
     <div>
             <div>
                   <!-- your code -->
             </div>
     </div>
</div>
.sl-hvalign{
	display:table;
	overflow:hidden;
	margin:0 auto;
	height: 100%;
	*position:relative;
}

.sl-hvalign-cnt{
	display:table-cell;
	vertical-align: middle;
	*position:absolute;
	top:50%;
}

.sl-hvalign-cnt-inner{
	*position:relative;
	*top:-50%;
}

去除虚线框

一般情况下，链接的 outline 可以不去除。如果 outline 形状极丑陋的情况下，视觉效果很差，则使用些方法：

1.IE 添加 HTML 属性 hidefocus=”true”

2.Firefox按钮

/* for Firefox */
input[type=submit]::-moz-focus-inner,input[type=button]::-moz-focus-inner{
  border : 0px;
}
/* for IE8 */
input[type=submit]:focus, input[type=button]:focus{
    outline : none;
}

IE z-index bug

解决方法：

两个元素的平等级别祖先元素z-index高的，显示于上面。俗称：后台硬占据最高点。

祖先元素必须是同一级别的，比如比较两个 span 谁盖在上面，应该比较的不是 p 和 li 的 z-index，而应该是 li 与 li 这两个平行级别的元素：

<

pre>
<ul>
<li>
<p>
<span> 第一个元素 </span>
</p>
</li>
<li>
<span> 第一个元素 </span>
</li>

 

]]> http://www.kelelang.com/archives/98/feed 0 米库英文站设计 http://www.kelelang.com/archives/88 http://www.kelelang.com/archives/88#comments Tue, 31 Jan 2012 02:07:10 +0000 可乐狼 http://www.kelelang.com/?p=88 这是第一次做英文站，所以前期做了很多稿，也学到了很多英文站的设计规范。

米库二级页面

购物车

 

]]> http://www.kelelang.com/archives/88/feed 0 一些网站交互的手绘稿 http://www.kelelang.com/archives/80 http://www.kelelang.com/archives/80#comments Tue, 31 Jan 2012 01:55:39 +0000 可乐狼 http://www.kelelang.com/?p=80 越来越多的设计师开始使用Axure设计Web交互类站点，Axure在某些地方有着天然的优势，但我还是推荐手绘稿来进行前期设计，也就是纸原型。理由很简单，速度快、效率高、容易改。

无意在Flickr上发现的一些手绘稿的照片，很有感觉，发上来看看。

web交互手稿

web交互手稿

web交互手稿

web交互手稿

]]> http://www.kelelang.com/archives/80/feed 0 如何让PNG格式的透明图片在IE6下正常显示 http://www.kelelang.com/archives/74 http://www.kelelang.com/archives/74#comments Wed, 18 Jan 2012 02:42:38 +0000 可乐狼 http://www.kelelang.com/?p=74 初学网页设计的朋友可能都会碰到这样的问题，需要在网页插入一透明图片。如果使用Gif格式的透明图片，可能像素低，显示不够清晰。如果用PNG格式透明图片，在IE6下将达不到透明效果，而是灰色的背景。这会让你的网页看上去非常丑陋，任何一个网页设计师都不想出现这样的问题，下面是一个小小的教程，教你如何让PNG格式的透明图片在IE6下同样能够正常显示。

我们先来看看在透明PNG图片在Mozilla firefox和Internet Explorer 6中的显示差异:

Mozilla Firefox

PNG透明图片在Mozilla Firefox下显示良好。

Internet Explorer 6

在IE6中这张PNG图片的背景却是一片灰白,真的很难看，除非你的网页背景色就是一片灰白:)

解决方法

首先，为你的图片外套一个DIV层，像这样:

<body> <div class=”flower”></div> </body>

然后，在CSS文件里面写入:

body {background-color:#000}

div.flower {background:url(flower-transparent.png) no-repeat; height:100px; width:100px}

这是指Mozilla Firefox,要让其在IE6下面正常显示，你应该在<head>和</head>之间写入:

<!–[if gte IE 5]>

<style type=”text/css”>

div.flower {

background:none;

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’flower.png’ ,sizingMethod=’crop’);

}

</style>

<![endif]–>

这样，就OK了,下面是加了上面代码后的IE显示图:

 

 

]]> http://www.kelelang.com/archives/74/feed 0 详解CSS网页布局中默认字体样式 http://www.kelelang.com/archives/70 http://www.kelelang.com/archives/70#comments Wed, 18 Jan 2012 01:14:42 +0000 可乐狼 http://www.kelelang.com/?p=70     　浏览器默认的样式往往在不同的浏览器、不同的语言版本甚至不同的系统版本都有不同的设置，这就导致如 果直接利用默认样式的页面在各个浏览器下显示非常不一致，于是就有了类似YUI的reset之类用来尽量重写浏览器的默认设置保证各个浏览器样式一致性的做法。

　　拿字体来说，各个浏览器默认的字体种类、字体大小和字体行高都不一样，比如IE8的中文版在Windows XP下显示网页时默认字体是宋体，而英文版肯定不会如此。所以我们需要统一设置默认的字体样式，以便实现一致的显示效果来保证设计的一致性和提高开发效率。

 

样式优先级
　　通常用户看到的页面的样式会受到三层控制:
　　第一层是浏览器的默认样式 
　　第二层是网页定义样式 
　　第三层是用户自定义样式
　　和CSS一样，后面的优先级 高于前面的，也就是说网页定义样式可以覆盖浏览器的默认样式，而用户自定义样式优先级最高。不过，当有 !important 时，网页样式可以覆盖用户自定义样式。用户!important > 网页!important > 用户 > 网页 > 浏览器默认。

 

字体：arial
　　我们页面的绝大部分内容字符都是中文，毫无疑问目前为止在网页上最常用也是最通用的显示中文的字体是宋体，但是宋体在显示英文、数字和英文符号时过于糟糕，比如©字符，所以我们一般期望通过CSS来实现用更好的字体样式来显示它们，然后用宋体来显示中文和中文符号。之所以选择arial是因为：
　　Windows和Mac都预装了这款字体，应该是使用最广泛的网页字体了。它的潜在对手tahoma和helvetica就没有这么幸运了。
　　视觉设计的专业人士可能会认为在Windows中使用tahoma、在Mac中使用helvetica更好，比如淘宝的默认字体样式是font: 12px/1 Tahoma, Helvetica, Arial, “\5b8b\4f53″, sans-serif;
　　这是一个很不错的选择，但是你也会发现Google、YAHOO、Youtube、Bing甚至MSN的新版都使用arial作为第一默认字体。所以从美观和可读性上来讲arial应该是完全可以接受的。
　　一般情况下设置font-family都会在最后设置通用字体族以保证其安全性，比如Google的设置为font-family:arial,sans-serif;，但是至少在非中文版的Win7下当编码是GBK时，IE8会因sans-serif来渲染宋体，导致字体出现变形，这就是为什么淘宝需要在sans-serif前加上宋体而Google无需这样做的原因。
　　因为中文字体的选择非常有限，所以目前所有的主流浏览器都设置使用宋体来显示中文。Baidu的首页和搜索结果页使用font-family:arial;可以从侧面说明这样做的安全性。可能有人注意到Firefox中国版默认显示的中文字体是微软雅黑，这是因为谋智网络擅自修改了用户自定义样式，不允许网页的样式覆盖浏览器设置的样式。也是由于类似的情况，我们要弹性设计网页非常重要。
　　使用英文字体作为第一默认字体会导致的问题之一就是中英文以及符号混排时的对齐问题、通过设置行高和hasLayout能解决绝大部分情况，但是都不会很完美，如果把字体改成“宋体”能彻底的解决问题。很明显，这个问题只出现在IE上。所以，如果你的网站很少使用英文、数字和英文符号，那么直接设置{font-family:\5b8b\4f53;}也是很合理的选择。

 

大小：12px
　　12px是宋体能显示的极限，虽然微软雅黑能显示更小的字体，但目前的应用环境尚未成熟。由于宋体基本上是目前显示中文唯一的通用Web字体，所以12px成为最常用的字体大小。我们当然可以依据产品的需要来修改这个默认值。
　　不用考虑基于字体大小（em）的设计。
　　在Chrome3.0之后的中文版中，字体大小最小值是12px，比如你设置最小字体为10px，最后也变成12px。针对这个情况可以在css文件加上句html{-webkit-text-size-adjust:none;}就可以解决这个问题。

 

行高：1.5倍
　　这是一个经验值，不同的产品对这个值要求可能不同，但我们一般会设置最常用的为默认值。比如YUI的font中是font:13px/1.231 arial,helvetica,clean,sans-serif;即字体大小默认值是13px，行高是13*1.231=16.003px，默认的行高是默认字体的1.231倍。对于中文来说，常用的字体大小12px、14px、16px、18px等偶数大小，在IE6和IE7设置其行高也为偶数能解决一些特殊情况下的字体对其问题。
在IE6和IE7中，行高值必须大于字体的2px才能保证字体的完整显示或当其作为链接时能有效显示下划线。
设置line-height时，注意不要使用单位（包括%在内），因为子节点会继承经过运算后的line-height值，所以当使用单位后浏览器会把line-height计算成第一次定义的绝对值，而不会随着字体大小的变化而变化，而无单位的数值表示是所在容器的font-size的倍数，所以设置为无单位的数值是最佳选择。
　　深入CSS 行高非常有利于理解line-height，值得一读。

 

性能和效率
　　大部分平台都有arial，减少浏览器的查找时间。
　　代码最少，书写方便。arial基本上是名字最短的字体了，可以节约CSS的大小。 
　　所有的字母都小写，目前Google就是这样做的，好处是既可以编写更快也能提升Gzip压缩的效率。 
　　中文最好用unicode表示，比如使用宋体是{font-family:\5b8b\4f53;}，使用微软雅黑是{font-family:\5fae\8f6f\96c5\9ed1;}，这样的好处是避免编码问题，同时能得到所有的主流浏览器的支持。 
使用正确的字体种类写法，避免使用引号，这样可以缩小CSS的大小。中文字体可以按上一条方式来编写。
未来
　　通过对中英文及符号混排的测试， 我发现微软雅黑其实表现相当不错，包括英文数字和英文字符以及在IE6和IE7的显示效果上，但唯一的遗憾是在XP下如果安装了微软雅黑字体的用户没有打 开“使用屏幕字体的边缘平滑”选项的话，在firefox、Safari和Opera、特别是IE6下会非常模糊难以辨认。针对这个问题目前并没有很好的 解决方案，所以只有等到IE6使用比率非常小的时候才可能正式的使用它。
　  虽然很早就有了@font-face，但是浏览器的支持、网速和商业问题，导致它很少被应用。

]]> http://www.kelelang.com/archives/70/feed 0 简单方便的CSS盒子多个边框 http://www.kelelang.com/archives/64 http://www.kelelang.com/archives/64#comments Tue, 17 Jan 2012 13:10:56 +0000 可乐狼 http://www.kelelang.com/?p=64 主流浏览器都支持，前和后的伪元素（所有主要浏览器），我们可以利用这种效应优势。当然，也有替代品，包括使用盒子阴影，以及增加额外的标记页面，然而这是最干净的解决方案。（经测试在我的傲游3的IE模式下没效果）

  1. <!DOCTYPE html>
  3. <html lang=”en“> 
  4. <head> 
  5.     <meta charset=”utf-8“>
  6.     <title>Multi-Borders</title>
  7.     <style> 
  8.         body { background: #d2d1d0; }
  10.         #box {
  11.             background: #f4f4f4;
  12.             border: 1px solid #bbbbbb;
  13.             width: 200px;
  14.             height: 200px;
  15.             margin: 60px auto;
  16.             position: relative;
  17.         }
  19.         #box:before {
  20.             border: 1px solid white;
  21.             content: ”;
  22.             width: 198px;
  23.             height: 198px;
  24.             position: absolute;
  25.         }
  27.         #box:after {
  28.             content: ”;
  29.             position: absolute;
  30.             width: 196px;
  31.             height: 196px;
  32.             border: 1px solid #bbbbbb;
  33.             left: 1px; top: 1px;
  34.         }
  35.     </style> 
  37. </head> 
  38. <body> 
  39.     <div id=”box“></div>  
  40. </body>
  41. </html> 
]]> http://www.kelelang.com/archives/64/feed 0 听 MUSIC http://www.kelelang.com/archives/60 http://www.kelelang.com/archives/60#comments Tue, 17 Jan 2012 01:54:52 +0000 可乐狼 http://www.kelelang.com/?p=60 插画小人

以前的无聊寂寞的时候画的，现在看看也是种对过去的回忆。

]]> http://www.kelelang.com/archives/60/feed 0 熟悉一些常用的CSS选择器 http://www.kelelang.com/archives/54 http://www.kelelang.com/archives/54#comments Mon, 16 Jan 2012 14:06:42 +0000 可乐狼 http://www.kelelang.com/?p=54 有的你已经熟知，有的你第一次知晓，熟记这些个CSS选择器，会让你事半功倍。可能有些是html5和css3才会用到的。

1. *

* {
  1.  margin: 0;
  2.  padding: 0;
  3. }

星号表示目标单一页面上的每个元素。许多人都会使用这一招，零边距和填充。虽然这是最方便快捷的，但还是建议你永远不要在代码中使用。它会对浏览器产生太多查询数据，是不必要的。

兼容浏览器

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

2. #X

  1. #container {
  2.    width: 960px;
  3.    margin: auto;
  4. }

ID选择符是唯一的，不允许重复使用。如果可能的话，请首先尝试使用一个标记名称，新的HTML5元素之一，或者是伪类。

兼容浏览器

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

3. .X

  1. .error {
  2. color: red;
  3. }

这是一个类选择。 ID和类之间的区别是，后者，你可以针对多个元素。使用类，适用于一组元素。

兼容浏览器

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

4. XY

  1. li a {
  2. text-decoration: none;
  3. }

选择当前选择器的下一个，当你需要更具体的选择器，可以使用这些。例如，如果你不是针对所有的锚标记，你只需要针对一个无序列表内的锚？这是特别适合你的选择。

兼容浏览器

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

5. X

  1. a {color: red;}
  2. ul {margin-left: 0;}

如果你想要得到网页上的所有元素，根据其类型，而不是一个ID或类名，怎么办？很简单，使用类型选择。如果您需要所有无序列表的目标，使用UL{}。

兼容浏览器

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

6. X:visited and X:link

  1. a {a:link: red;}
  2. ul {a:visted: blue;}

我们使用伪类链接的目标尚未被点击的时候的效果。
另外，点击的其他效果，使我们能够适用于特定的造型上被点击，或访问的页面时候的效果。

兼容浏览器

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

7. X+Y

  1. ul + p {
  2. color: red;}

这被称为相邻选择。它只选择当前元素之前的元素。在这种情况下，只有每个UL后的第一段有红色文字。

兼容浏览器

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

8. X>Y

  1. div#container > ul {
  2. border: 1px solid black;}

选择器XY，X> Y之间的区别是，后者只是当前的第一个选择器有效果。看了下面这个例子你就会很明白了。

  1. <div id=”container“>
  2.    <ul>
  3.       <li> List Item
  4.         <ul>
  5.            <li> Child </li>
  6.         </ul>
  7.       </li>
  8.       <li> List Item </li>
  9.       <li> List Item </li>
  10.       <li> List Item </li>
  11.    </ul>
  12. </div>

选择器#container的ul边框只在第一个ul中实现，li中包含的ul就不会有border边框效果。
所以这个效果在工作使用的还是很多的，特别是当前工作和JavaScript的CSS选择器引擎结合。

兼容浏览器

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

9. X ~ Y

  1. ul ~ p {
  2. color: red;}

这种组合类似X + Y，但它不是那么严格。虽然相邻的选择（UL+ P）只能选择之前后面选择的第一个元素，这个会是更广义点。它会选择上面例子中的所有p元素，只要遵循UL。

兼容浏览器

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

10. X[title]

  1. a[title] {
  2. color: red;}

简称为属性选择，在我们上面的例子，这只会选择A标记中title属性。A标签不会有这个效果。

兼容浏览器

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

11. X[href="foo"]

  1. a[href="http://www.kelelang.com"] {
  2. color: red;}

上面的代码片段是样式链接到http://www.kelelang.com所有A标记，会看到链接色是红色。所有其他的A标签将不受影响。

兼容浏览器

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

12. X[href*="nettuts"]

  1. a[href*="tuts"] {
  2. color: red;}

这正是我们需要的。指定链接地址初始属性值。这样一来，这会包括net.kelelang.com，mail.kelelang.com，甚至是kelelang.com。

兼容浏览器

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

13. X[href^="http"]

  1. X[href^="http"] {
  2. background: url(path/to/external/icon.png) no-repeat;}
  3. padding-left: 10px;}

有没有想过一些网站是如何能够显示一个小图标，这是外部链接吗？。
这是最常用的正则表达式中指定字符串的开始。如果我们想要的目标有以http开头的HREF所有a标记，我们可以使用类似上面显示的片段的选择。

兼容浏览器

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

14. X[href$=".jpg"]

  1. a[href$=".jpg"] {
  2. color: red;}

同样，我们使用一个正则表达式符号$是指字符串的结尾。在这种情况下，我们要搜索所有链接到图像的a – 或者是一个URL的JPG图形。

兼容浏览器

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

15. X[data-*="foo"]

  1. a[data-filetype="image"] {
  2. color: red;}

我们如何弥补所有的各种形象类型：PNG，JPEG，JPG，GIF？那么，我们可以创建多个选择，如：

  1. a[href$=".jpg"],
  2. a[href$=".jpeg"],
  3. [href$=".png"],
  4. a[href$=".gif"] {
  5. color: red;}
  6. }

data-filetype示例
Image Link

兼容浏览器

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

16. X:first-child

  1. ul li:first-child {
  2. border-top: none;}

这种结构性伪类允许我们的目标只有元素ul的第一li。你会经常使用这个删除的第一个和最后一个列表项的边界。
例如，假设你有一个行的列表，每一个有边框的顶部和边境底部。那么这个安排将在设置的第一个和最后一个项目看起来有点古怪。
适合去掉第一个和最后一个的边距。

兼容浏览器

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

17. X:last-child

  1. ul li:last-child {
  2. border-top: green;}

示例：

  1. <ul> 
  2.    <li> List Item </li>
  3.    <li> List Item </li>
  4.    <li> List Item </li>
  5. </ul>

这里没有什么特别的，只是一个简单的的列表。

CSS

  1. ul {
  2.  width: 200px;
  3.  background: #292929;
  4.  color: white;
  5.  list-style: none;
  6.  padding-left: 0;
  7. }
  9. li {
  10.  padding: 10px;
  11.  border-bottom: 1px solid black;
  12.  border-top: 1px solid #3c3c3c;
  13. }

这个css会删除浏览器的默认UL，并应用每个li的位置和边框。

Styled List

要添加到您列出的深度，适用于每个li是一个阴影或两个以上里的背景颜色暗边框底部。接下来，边框顶部是较轻的色调。

唯一的问题，在上面的图片所示，是一个边界将被应用到顶部和底部的无序的列表 - 这看起来很奇怪。让我们用：:first-child 和:last-child 来解决这个。

  1. li:first-child {
  2.     border-top: none;
  3. }
  5. li:last-child {
  6.    border-bottom: none;
  7. }
Fixed

兼容浏览器

  • IE9+
  • Firefox
  • Chrome
  • Safari
  • Opera
]]> http://www.kelelang.com/archives/54/feed 1 交互设计师到底是需要做什么？ http://www.kelelang.com/archives/37 http://www.kelelang.com/archives/37#comments Mon, 16 Jan 2012 07:21:43 +0000 可乐狼 http://www.kelelang.com/?p=37

本篇文章转载自网易UED团队

交互设计师到底是需要做什么？


尽管很多谈及交互的书上都已经回答过了：

  • 发现用户需要，建立明确需求
  • 提出设计方案
  • 制作设计原型
  • 用户测试和评估

还是有很多对交互设计有兴趣的朋友会问我这个问题，并希望我能回答得详细，具体到我工作中的每个细节。

其实交互设计需要做什么，会随每个交互设计师的工作内容差异而不同，具体到每个项目也会有区别。

下面分享下我是怎样做交互，方式不一定是最合适，希望大家多指点，共同学习进步。

发现用户需要的方式有很多种，我们可以在用户反馈里收集到许多用户提出的想法，他们希望我们能提供帮助解决问题的产品；我们也可以主动去观察一些生活中的信息，为灵感的迸发做储备。

比如说日程管理项目，有不少用户跟我们的邮箱反应说，他们忙碌的时候会忘记一些重要的事情，比如一些会议或者约会，所以希望网易邮箱能提供一个专业的日程管理功能，能够帮助他们有效的管理和安排每天的日程。

确认了用户的这一需要，我们的产品同事就会组织立项，把用研和设计组的同事呼唤过来一起进行调研，确定我们的目标用户。

用研组会通过问卷调查等方式尽可能多的去收集信息，交互设计师也会参与分析调研，组织会议帮助用研组完善信息，我们会采取一些有趣的方式，比如一堆人在一起头脑风暴，大家回忆各种相关的生活场景，然后把一些关键词记录下来。

这一步我们的目的是要知道：用户想要什么？

通过这些步骤我们提炼出一些最重要的功能需求，接着产品组会整理出需求文档，设计师就位。

通过调研，我们得到了大量数据信息，并建立了明确的需求，下一步就是开始提设计方案。

这个阶段我会做一些概念设计，类似于做实物产品时设计一个水杯，我会描述它说：我要设计一个旅行用的水杯，它能叠成一个小圆盘，喝水的时候只需要把小圆盘的圆心部分往下按，就能变成一个杯子。

互联网产品也是这样，需要赋予它一个概念，例如日程管理：这是一个专业的日程管理功能，通过使用它，我们可以有效的管理自己每天的日程和时间，以提高工作效率，并且不会再错过每个重要的约会！

这些文字并不一定非是交互设计师所总结，但是交互设计师必须要做到对产品心里有数，明确我们要做什么。

同时需要进行的还有初稿设计，在这里我所谓的初稿，并不一定是严格要求中的交互原型，可以是用Axure把主要的页面流程做出来，也可以手绘草图，只要能清晰表达设计构思的，什么样的方式都可以。

制作设计原型，也就是常说的交互稿，区别于做设计方案时的初稿，这份交互稿我会尽可能细致的把流程和具体操作形式表达出来。

考虑到做交互是一个迭代过程，我会在设计稿的首页为设计的产品做一份交互更新日志，记录下交互更新时间、版本名称、更新类型、更新内容、参考需求文档与交互负责人。

这份更新日志的意义在于：

  • 更新时间-便于全程跟踪记录项目，掌握每个时间点
  • 版本名称-便于项目参与人员查找上一版本的交互稿
  • 更新类型-了解每次更新需求的性质
  • 更新内容-清晰呈现每一次更新的内容，并提供一个直接去到更新页面的链接，这样在进行迭代时我们的伙伴不用一页页去寻找更新点
  • 参考需求文档-便于项目参与人员查找对应的需求文档
  • 交互负责人-记录每次迭代的交互负责人，并能方便工作交接

交互稿的制作过程，一般是用Axure做原型，像邮箱这样视觉比较成熟且相对稳定的产品，我会偏向做高保真模型，我们会整理一个控件库，这样能提高制作效率；做一个全新项目时，黑白稿线稿都是可用的方式，如果交互设计师能对大概的视觉效果有把握，也能做得精致些。这些我想大家都很了解，所以不多说了。

之所以把这部分内容提出来单独写一段，是因为之前和很多做交互的朋友讨论过该怎样做好交互说明，大家各有看法，很难找到这部分工作的衡量标准。

交互说明书在整个设计过程中，也许只会占用小部分工作量，但是作用不小，它能帮助我们减少沟通成本，辅助交互稿描述设计理念，表达交互流程，更细致的展现我们的设计。

与做设计稿不同，个人认为，交互说明这部分工作，需要我们更多了解它作说明的对象，即产品经理、视觉设计师、开发人员的需求，从而达到真正的“辅助”效果，而不是盲目凭自己主观去长篇大论，否则我们要为此花费时间，而且这部分工作只能沉积为一堆我们自己欣赏毫无意义的文字。

为此我曾与合作过的各组同事进行沟通，提炼出一些他们对交互说明的需求，不求全面，但求能说明一些问题。

1.交互说明最好是图文并茂（all）
便于阅读和理解。

2.页面跳转的说明（产品&程序）
页面跳转是涉及多个页面关系的操作，产品人员在看交互稿时，会更多去关注多个目的性的任务操作流程，而对页面跳转的记忆是有限的，所以需要页面跳转说明。

3.交互说明能否考虑与产品需求文档结合（产品）
开发文档会涉及产品概念、技术方案、业务执行角色等内容，和交互设计稿有着紧密关联，所以交互说明书与开发文档是可以相互做补充，整理成一份文档，这样也能避免工作内容重复。

4.对交互稿中不明显的交互动作或隐藏的设置项作说明（产品&视觉&页面构架）
细节和动作需要描述清楚，比如说鼠标focus、click的动作，或click后是loading还是跳转，这些平时都是开会上讨论，但是参与项目的人员不一定都能记住，所以会需要在交互说明书里做说明，并需要考虑到页面构架组需要预留适应变化的结构。

5.产品风格定位（视觉）
商务风？休闲风？视觉需要一个准确的产品风格定位。这部分工作不一定是由交互人员来确定，但在产品孕育阶段中，设计稿讨论以及不定时更新的数据调查，会使得产品风格定位渐渐明确，视觉的同事更多是参与设计阶段的工作，这就需要交互人员将这些信息在交互说明中记录下来，以辅助视觉完成。

6.极限状态（前端）
比如一个列表最长和最短显示。

7.异常/出错情况说明（程序）
这一点在交互稿制作和与产品沟通过程中容易被忽略。

有的设计师会疑惑：为什么我做的设计说明书会没人看？我写的很详细了，但是他们还是会问我一堆设计的问题！甚至，问我为什么要做这个文档？

在这些情况面前，设计师应该做些思考，我们所制作的这份说明是否真正解决问题了呢？

一些基本的逻辑判断和文字内容，产品人员已在需求文档中列出且在交互稿中已清晰呈现，例如原型中完整呈现的设置内容，或一个单选复选关系，这些内容我们再花时间去大篇描述，并无太大意义。

所以我的理解是，交互说明并不一定是一份文本，它不该是设计师的舞文弄墨，更不该流于形式做交互设计原型的复制品。

我们可以在交互原型上注释，在图上写说明，或者是在和项目组发邮件时写为邮件内容，当然也可以是word文档，PPT….

总之，我们要做到的是真正解决问题，让交互说明书成为帮助项目中各组成员之间进行有效沟通、辅助理解设计内容从而达到提高项目效率的工具，并在需要的时候被制作。

产品基本功能实现后，我们会做用户测试，设计是很主观的，并且会受各种因素影响，所以我们的产品难免会存在一些意料之外的问题，通过招募用户来使用我们的产品，我们能收集到一些使用场景中发现问题的反馈，并把这些整理成优化点，完善我们的产品。

同时交互设计师也要多用自己的产品，保证上线内容与设计保持一致。

这就是我对自己交互工作的一个相对完整的描述，交互设计师这个头衔我领了不到一年，但是这一年学到了很多。我的感觉是，这是一份不难的工作，因为我自己也是一个用户，我会在使用产品的过程中发现这样那样的问题，所以我也自然而然的想去解决这些问题，并在寻求方法中得到一定的积累；然而，这确实是一份很需要花心思的工作，设计方式自由，但是设计内容需严谨，疏忽了一个问题，就有可能为产品带来极大的负面影响，甚至失去用户的青睐。

要让我们的产品保持良性发展，就要求设计师们不断探索优秀的设计方法。

最后，也希望大家能多分享各自的设计经验，相互学习，让我们的产品体验越来越好！

]]> http://www.kelelang.com/archives/37/feed 0 我的小别墅 http://www.kelelang.com/archives/32 http://www.kelelang.com/archives/32#comments Mon, 16 Jan 2012 07:03:43 +0000 可乐狼 http://www.kelelang.com/?p=32 我的小别墅

最近又重新学习下了3DMAX软件，把以前的丢掉的重新复习了下，这个模型用了简单的几个步骤，灯光打的还是不够好。不用3DMAX，我都快忘光了。

]]> http://www.kelelang.com/archives/32/feed 0