深山老林

日志内容

2007-04-26[原]一行内文本溢出的处理

看到这个标题很容易就会想到截断文字加“...”的做法。哈哈，就是这样。其实写这篇日志也只是把这样方法做个记录，因为好像写了这么多次，还是会不太记得。嘿嘿~~

一般的文字截断(适用于内联与块)：
==============CSS================
.text-overflow{
display:block;/*内联对象需加*/
width:31em;
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
}
=================================

对于表格的话，定义有一点不一样：
==============CSS================
table{
width:30em;
table-layout:fixed;/* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */
}
td{
width:100%;
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
}
=================================

注：这个东东只对单行的文字的效，如果你想把它用在多行上，也只有第一行有作用的。这个写法只有IE会有“...”，其它的浏览器文本超出指定宽度时会隐藏。

风的影子 @ 14:52 | 看个仔细 | 有话要说 4 | 引用 0 | 编辑

2007-04-16[原]交互浅解

TAG：交互设计原创文章分享

“好久没有更新blog了”发现每次一写日志，都少不了这一句。交互设计现在也成了一个热门词，到哪都总能听到交互这交互那的，当然工作上也少不了接触到交互。每每跟臭鱼聊到交互，总会提到“以目标为导向”的交互设计——以用户的目标为设计的主导，任务越少越好。貌似是怎么说的。

有个例子：“比如有一个人想从A地到B地去，古时候是要几个任务要做：

带上枪
拿上足够的钱
租一辆马车

而现在如果也是要从A地到B地去，所要做的任务就不一样了：

不能带枪
拿少量现金
定机票

虽然是完全不同的任务，但目标是一样的：从A地到B地。如果有个人帮你把这些任务提前给你安排了，那会不会更爽呢？当然！交互所要做的就是帮你把这些任务给你安排好，让你更快的到达目地地。”

听起来好像没错，但仔细想想，你会发现任务还是要做，交互所要做的不是帮用户把任务做了，而是让用户更顺利的完成必须要完成的任务。

学交互的同学应该都知道“别让我思考——Krug可用性第一定律”、“……设计者应该尽量做到，当我看一个页面时，它应该是不言而喻，一目了然，自我解释的。我应该能明白它――它是什么意思，怎样用它――而不需要进行额外的思考。……”当然不可能完全做到这种页面，过多的提示只会让用户有被当成“白痴”的感觉。所以整站统一的设计，能让用户更容易形成心理模型，更容易的自我帮助。

“自我解释” 在对于提高页面友好度是很有帮助的，特别是当用户需要完成一些操作的时候，如链接、按钮等操作。一个不知道结果的操作，对于用户来说，都有一定的“恐惧感”，点了之后会出现什么呢？最简单的一个例子，关于链接的：大家都知道链接可以打开新窗口，也可以在当前窗口跳转。当一个链接没有说明是否在新窗口打开时，用户对于要不要点这个链接，总会犹豫，因为不知会不会将当前页面的内容覆盖。观查下身边使用电脑的朋友打开网页的习惯（特别是找资料的时候），你会发现一个很奇怪的现象：有大部分的人会在链接上点右键，然后选“在新窗口打开...”，也有人会按着Ctrl键直接点链接（在新窗口打开链接），为什么呢？因为不用去担心会不会把当前窗口覆盖（-_-||我就喜欢在新窗口打开，不行啊？……）。

OK，其实只是想说明一点：让用户知道自己在哪、将会去到哪。

风的影子 @ 22:57 | 看个仔细 | 有话要说 1 | 引用 0 | 编辑