Archive for the ‘web’ Category

译文|成功的用户界面的八个特性

在yeeyan上翻译的第一篇文章，反响还不错…哈哈 继续努力 一周争取翻译一篇

原文是著名的blog：usabilitypost 原文地址点这里

译言上的地址这里

we need share and feed our mind!O(∩_∩)O

正文：

当你构建你的用户界面和网站的时候，有各种各样的关于界面设计方法和模式的信息你可以使用， 对常见问题的解决方案和一般可用性的建议。下列专家给出的准则可能会引导你创造一个良好的用户界面， 但是究竟什么才是一个良好的界面？ 一个有价值的用户界面应该具有那些特性？

以下八个特性是我认为一个良好的用户界面所必须的：

  1. 清楚
  2. 简明
  3. 熟悉
  4. 易响应
  5. 一致
  6. 吸引力
  7. 高效
  8. 宽容

让我们仔细看看每一个特性：

1. Clear清楚的

清晰度是用户界面设计最重要的元素。事实上，用户界面设计的所有目的是为了使人们能够与您的系统通过沟通和功能来进行交互。 如果人们不知道你的应用程序怎样工作或在你的网站上应该去哪里，他们会困惑和沮丧。


这是什么呢？鼠标移到WordPress的按钮时工具提示会弹出解释其职能。

2. Concise 简明

清晰的用户界面是很好的，但是，您应该谨慎，不要陷入过度明晰。定义和解释很容易被添加，但是你这样做的同时也增大了规模。您的界面规模增加。添加过多的解释，您的用户将不得不花费过多的时间去读它们。

不仅要保持清晰，而且还保持简洁。当你能用一句话解释一项功能的时候就不要用三句话。当你可以用一个单词标记一个项，就不要用两个。 保持简洁可以节省你的用户的宝贵的时间。 同时保持清晰和简明并不容易，需要足够的时间和努力来实现，但其回报是值得的。


在 OS X 的音量控制中使用两个小图标以显示的音量从低到高。

3. Familiar熟悉

许多设计师努力使自己的界面，直观。 但到底直观的真正意思是什么？直观也就是就是说可以自然地，本能地理解和领会。但是你怎么能做到直观一些？你可通过是它变的熟悉来实现。

熟悉就是， 跟你以前遇到过的东西相似。当你熟悉的东西，你就知道怎样它怎么做-你知道会发生什么事情。 弄清你的用户熟悉的并把它们融合到你的用户界面中。


GoPlan的标签页式界面。 标签很熟悉 ， 因为他们模仿文件夹上的标签。 你清楚知道点击标签您将浏览该节和其他地方的标签将继续存在为了进一步导航。

4. Responsive易响应

易响应意味着两件事。 首先，易响应意味着快速。 如果没有软件在后台，界面应该响应很快。等待加载和缓慢的界面是令人沮丧。 看起来加载的很快， 反正就是界面快速载入（即使内容尚未赶上）改善了用户体验。

易响应也意味着界面提供某种形式的反馈。界面应该反馈给用户，告知他们现在怎么了。 你成功地按下那个按钮吗？你将如何知道？按钮应显示一个被按了的状态反馈， 或许可以把按钮上的文字改成“正在加载… ”并且禁用按钮。 是软件挂了还是内容载入中？用转动的轮子或显示进度栏的方式来保持用户在进程中。


Gmail会显示一个进度栏当您第一次进入您的收件箱。 而不是逐步载入网页时，一旦一切准备就绪整个页面即时显示。

5. Consistent一致

之前我谈过关于上下文的重要性 ，以及它应如何指导你的设计决定。我认为，适应任何给定的上下文是很聪明，但是，一个界面仍然应保持一定程度的一致性。

一致的界面，使用户能够开发惯用模式-他们会了解不同的按钮，标签，图示和其他界面元素的外观，并识别他们。认识到在不同的情况他们所做的事情不同。他们也将了解特定的东西如何工作，能够从过去的经验中更快的总结知道如何操作新功能。


在Microsoft Office的用户界面是一致的是有原因的。

6. Attractive吸引力

这可能有一点争议，但我相信一个良好的界面应该有吸引力。 吸引力在某种意义上，是与界面交互变得是愉快。是的，你可以让你的用户界面简单，易于使用，有效率和易反应，它将尽其出色-但如果你可以做额外的一步，使之有吸引力的。那样用户体验会真正令人满意。当你的软件使用起来是令人愉快的，你的客户或工作人员将不仅是简单地使用它-他们会期待着使用它。

当然有许多不同类型的软件和网站，所有的创作针对的不同的市场和用户。什么样看来’好’对任何一个特定的观众都会有所不同。 这就是说，你应该为了你的用户来包装你的界面的的外观和风格。 此外，美感设计应适度使用，并且是为了加强功能。美化界面不同于加载时使用多余的眼睛糖果。


谷歌是众所周知的极简洁的界面 ， 他们关注功能重于形式，但他们显然的花费时间美化了 Chrome用户界面元素 ， 如按钮和图标 ， 使它们看起来正好体现了微妙的梯度和像素超薄突出。

7. Efficient高效率

用户界面像是车辆，带你去你要到的地方。这些地方是软件应用程序或网站的不同的功能。 一个良好的界面可让您在执行这些功能更快。 现在， ‘有效’听起来像一个相当模糊的属性-如果你把所有其他的事情在这个清单上，当然界面到头来还是需要高效？ 差不多，但不完全。

你真正需要做的是使界面能高效的找出用户努力想要实现的，然后让他们可以有条不紊的做到。 您必须确定您的应用程序应该如何工作’ -什么功能它需要有，什么样的目标是你努力努力争取实现？ 实现一个界面，可以让人们轻松地完成他们想要做的，而不只是简单的实现对各个功能的访问。


苹果公司已经确认了人们在其iPhone上想要对照片做三个关键的事情，并在照片控制中提供按钮来分别完成他们。

8. Forgiving宽容

没有人是完美的，当使用你的软件或网站必定有人会犯错误。 如何处理这些错误将成为你的软件的质量一个重要指标。不要惩罚用户-建立一个宽容的界面，纠正问题。

一个宽容的界面可以使你的用户远离代价高昂的错误。例如，如果有人删除了重要的信息，他们可以轻松地重新检索或撤消这一行动？ 当有人浏览到损坏或不存在的网页，他们会看到什么？他们会迎接一个加密的错误提示还是得到了一些有用的替代目的地？


错误的删除了电子邮件？Gmail可让您迅速取消上一次的操作。

To conclude…结束…

实现这些特性实际上可能同实现另外一些特性产生冲突。 例如，试图使一个界面清晰，您可能会增加太多的描述和解释，即最终使整个界面变得大而笨重。 缩减容量，努力使事情简洁可能产生相反的效果，使东西模糊不清。 实现一个完美的平衡需要的技能和时间，解决方案根据不同的案例也并不一样。

n220

CSS| css sprites

如之前所学， css sprites可以减少http的请求次数。 今天遇到以下两种情况利用sprites解决

1. 在form里面的 input type = image 的时候的 sprites（referentce 1.http://blog.josh420.com/archives/2008/07/using-sprite-images-with-input-typeimage-for-hover-effect.aspx）

把<input type = image>的语句放入一个 div中 如下

<div id="submitButton">
  <input type="image" src="xxx.png"  />
</div>

css 如下
#submitButton {
  cursor:pointer;       /* Give it the hand cursor, like a link */
  height:40px;          /* Image has a height of 80px, only show the first half */
  overflow:hidden;      /* Hide the overflow */
  width:200px;          /* Width of the image */
}
#submitButton:hover input {
  margin-top:-40px;
/* Negative height of half the sprite, to push the image up */
}


2. 在图片链接做hover的效果

<a href='#' class="Button"></a>

css如下
a.wantButton{
    display:block;
    cursor:pointer;
    width:203px;
    height:52px;
    overflow:hidden;
    background:url(XXX.png)；
}

a.wantButton:hover {
    background-position:-204px 0;
}
n249

水|生活

1. 有件事 我一直没说 不代表我不介意   我不想盲目的猜测 我祈祷你还是那个单纯的人

2. 学习习惯平淡

3. 学习分辨真假

4.学习面对不喜欢的人

n180

css|概要与标准简介

CSS 指层叠样式表 (Cascading Style Sheets)， 实现了内容与表现分， 极大的提高了实现效率， 并支持多层重叠。 重叠的优先级（由高到低）是 内联样式（在 HTML 元素内部），内部样式表（位于 <head> 标签内部），外部样式表， 浏览器缺省设置。

Index 索引

索引是更好的帮助我们或者他人来了解网站 还有你css的内容。 基本格式如下

Index of css

Index of css

Anchors 锚点

锚点就像css种的书签， 因为css种没有锚点系统。 所以我们可以用下面的方式来定义锚点

anchors definition

anchors definition

Classitis 重定义

重定义用于从新定义某个class里面的元素的style

classitis

classitis

Naming Convention 命名规则

尽量给出准确清晰的名字， 避免混淆， 为了更好的理解 css的内容。

命名规则

命名规则

Shorthand 速写

尽量保持代码简洁短小

保持简洁短小

保持简洁短小

Sprites

把所有的背景图（不同的action时候的变化， 比如hover）放在一个图片中，在点击的时候只是位置的变化， 这样就可以减少对http的请求次数。

sprites , apple menu

sprites , apple menu

Specificity 明确性

specificity

specificity


Resets 重置
全局属性重置确保一个网站在所有浏览器中显示几乎一样。在每一个案例中，不同的浏览器给所有网站使用它们自己的默认样式设置集，这将使我们的网站在不同的浏览器中显示不一样。全局属性重置将改正这种情况并让你从绝对一致的基础开始建立网站。 总是要重置某些分类。无论你是使用 Eric Meyer Reset、YUI Reset

或者你自己编写的重置代码，只要使用就对了。

它能很简单的移除所有元素的填充（padding）和边距（margin）：

  1. html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,
  2. pre, form, fieldset, table, th, td { margin: 0; padding: 0; }
resets

resets

Hacks

浏览器兼容性而引发的。。为了保证不同的浏览器看起来是差不多 我们或许会用的css hacks

hacks

hacks

Validation 验证

The W3C Validator has been a very popular online tool that validates CSS.

Css 属性的书写顺序

为了快速的找到我们需要的熟悉， 如果有一个很好的属性排序，就可以很快速的找到。

之前看到有人写按字母排序， lifesinger 在他的blog里面也提过这个问题。 这个并没有一个固定的标准 不同的人 有不同的书写习惯。lifesinger给出了他的分类方式， 个人觉得还是很容易理解跟记住的 先记下来 试试看。

  1. 影响文档流的属性（比如：display, position, float, clear, visibility, table-layout等）
  2. 自身盒模型的属性（比如：width, height, margin, padding, border等）
  3. 排版相关属性（比如：font, line-height, text-align, text-indent, vertical-align等等）
  4. 装饰性属性（比如：color, background, opacity, cursor等）
  5. 生成内容的属性（比如：content, list-style, quotes等）

——————————

学习完毕 继续代码

reference：

1. http://www.dezinerfolio.com/2009/02/20/css-standards-best-practices

2. http://lifesinger.org/blog/?p=1360

n262

水|生日快乐 妈咪

农历2月十九  我家妈妈大寿

生日快乐  爱你哟

想家

315过个高质量的生日吧

——————————–

最近犯病 不知道是太过高兴还是太过悲伤

怎样都好  好好的享受啦 好的不好的 喜欢的不喜欢的 简单纯粹的生活

n381

web developer| IE 不认识

还依然是兼容的老问题， 有一个message的div 应该出现在 top的位置  用了 position: fix， 但是在ie下面 似乎它又不认识 问谷歌 果然建议搜索里面出现的 就是 ie position fixed

顺便学习下position

static : 静态（默认），无特殊定位。

relative : 相对，对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置

absolute : 绝对，将对象从文档流中拖出，通过width、height、left，right，top，bottom等属性与margin、padding、border进行绝对定位，绝对定位的元素可以有边界，但这些边界不压缩。而其层叠通过z-index属性定义。

fixed : 悬浮，使元素固定在屏幕的某个位置，其包含块是可视区域本身，因此它不随滚动条的滚动而滚动。（IE5.5+不支持此属性。） （该死的IE ！ 我忍不住再骂一次）

inherit : 这个值从其上级元素继承得到。

————————————————–

问题有了 IE 不认识怎么办.
————————————————–

经过排查是因为float的原因。改了float以后一切ok 就当学习下 position吧。。 其实不能怪IE 是我自己写的错 sorry了 IE


n223

Web Developer| image format

拿到了设计公司的原稿图片， 现在要来转换成我需要的东西。 忽然想起要考虑下什么格式会好一些， 要考虑加载速度跟显示资料。 图片格式的东西都忘的光光了， 来学一下

Learning notes：

当我们创建图片文件的时候， 有很多格式的选择。 但是当我们来做页面的时候， 这个选择就变得非常的简单。因为只有三种格式可选。GIF， JPEG， PNG

  • （1987）The Graphics Interchange Format, or GIF, is perhaps the most common image format on the Web.
  1. color palette (色板)： 这是gif最大的限制。 GIFS 是 8bits， 也就是说最多是2^8 =256 种颜色。 因为这样的限制 GIF 比较适合画线或者大块颜色 。
  2. Compression and Opimization(压缩跟优化)：GIF用的是无损压缩。
  3. Animation， interlacing and transparency（动画，隔行扫描，透明）： 这个是gif三个最大的优点， 动画： 可以吧一系列不同的图片存在同一个文件里面， 然后连续播放 就变成了动画。 隔行扫描： 允许扫描线不按照顺序存储， 允许浏览器显示图片可以按章扫描进度来显示。透明： 这样便于设计人员更方便的融合页面内容， 特别是不规则的图像， 放在一个有颜色的背景下。 如果原图的背景是透明的，一切就easy了。
  • In the early 1990s, the Joint Photographic Experts Group published a new graphics standard, which was named after
    the group: JPEG.
  1. color palette (色板)： 24bits， 2^24-> 16.7百万种 对比gif， jpge不会有很突兀的边界， 但是在很少颜色或者大块同色的图片中， jpeg会比gif大。
  2. Opimazation（优化）： JPEG是有损压缩， 所以如果图片变下 相应的图片的质量也会降低。
  • Portable Network Graphics, or PNG, is a file forma developed in response to the Unisys GIF patent battle.
  1. Feature： png的诞生就是为了取代gif （gif的版权问题）， png 跟jpeg一样是 24bits的， 但是他支持transparency 透明and interlacing 隔行扫描。 无损压缩。png没有直接的支持动画， 但是有一些扩展的格式是可以做到的。 fireworks的默认格式就是png
  2. Browser support（浏览器支持）： IE 到了 version3才支持 png， 一直到ie7才支持 transparency。。 （真是不解啊， 为什么浏览器没有一个行业规定呢， 浏览器兼容对于我这样的菜鸟真太痛苦了）

学习结束

n373

google friend connect on wordpress

setupnewsite

  • Setup a new site

sitename1

  • Upload files - canvas.html and rpc_relay.html to the root directory of your blog

1.download the canvas.html and rpc_relay.html from google

download

  • Get the code for the “Members Gadget”

html

  • Go into WordPress Admin -> Appearance -> Widgets
  • Create a Text Widget, give it a title, and insert the HTML code into the the Widget.

wp-widgets

That’s all..

demo

n469

blog 搬家到 wordpress

之前博客太多。。搬家起来也比较麻烦 把主要的两个blog搬过来了

single1985.blogcn.com 第一个blog从2004/10/26开始（大二） 乱七八糟记录生活琐事 情感 到2006年来uk以后难忍奇慢速度 换到danyi0426.spaces.live.com 不是微软的fan 这个真的很不好用 又因为一些乱七八糟的理由 这一年来 没怎么好好写过 blogcn的只能好友可见了 msn想起了才去丢点字

恩废话说完 开始说怎么搬家吧 先问了谷哥

  • MSN

msnspace的倒好弄 搜到一篇文章 http://b2.broom9.com/?page_id=519 国内的牛人清华毕业的weiwei 学了三周的python 就随便写了这个非常有用的小东西Live space mover

具体的操作他的页面上有讲。讲讲我遇到的问题。 他的默认日期是 yyyy/mm/dd, or mm/dd/yyyy. 但是我从space都会来的数据 是 Apirl 26 10:10pm 这样的格式 ， weiwei也给出了python时间参数设置的链接页面 。

  • %B Locale’s full month name.
  • %d Day of the month as a decimal number [01,31].
  • %I Hour (12-hour clock) as a decimal number [01,12].
  • %M Minute as a decimal number [00,59].
  • %p Locale’s equivalent of either AM or PM.

我的格式就转换成”%B %d %I:%M %p ” 然后就等着吧。。我一共100多篇的blog 连post加comments 几分钟就都好了， 然后就是把这个XML导入wordpress里面直接导了。 恩从我的格式可以看出一个问题。。。他读出来的时候没有读到年 所以我默认的年份都变成了1900。。。 我瞬间就穿越了 然后手动改了 xml里面的年份 还好没有几年 用replace就好 不算十分麻烦 很满意的是 post跟comments。。一起 nice

  • blogcn

blogcn自己没有搬家功能，谷哥没给很多的建议， blogbus的搬家工具是最多人提到的。 但是我当时过于心急 再次证明心急吃不了热豆腐 . 直接输了地址就开始等。。不过也发现一个漏洞 他没有任何的验证功能 我的blogcn是只对好友可见的 但是用blogcn搬家我只要输入地址就可以把我所有的blog都弄下来 也就是说 如果我想看谁的blog但是却被限制了权限 这个就是一个很好的偷窥方法。。但是blogbus只帮我搬了54篇就不搬了。。我心想是不是太重他不愿意搬了 后来仔细一看 隐藏的blog必须先更改设置 。 但是blogcn竟然有没有一个按钮是全选。。然后我就手动的改了400多篇中的300多片成对所有人可见 再用blogbus 还是不行 看来他是有了记忆功能。。。发了邮件给客服至今没有回应， 作罢。

然后又继续搜。maikr博客伴侣 （需要注册账户）但是怎么都不能注册 官方网站也打不开。 后来又试了几个都不大好使。 最后在快绝望的时候找到了 51搬家到wordpress。 想想同理 blogcn应该也行， 就试了blog_backup 果然 还不错 但是前提就是 blocgcn里面所有的文章都要设置成对所有人可见。这样 blog_backup才能找到。恩 然后导出 得到一个RSS 2.0 UTF 8.0编码的 xml。 别急 这个xml还不能直接导入， 要手动做些更改， 去掉 “&nbsp; ” “<![CDATA[” “ ]]>”。 全部替换掉。 然后导入RSS（没事导入wp， msn那个使用导入wp做的）。在归档页面的时候 有的post读了一半 后面就没了 整个页面也乱掉了。。然后又需要手动去改 发现是图片的问题， 最初修改把图片链接都删除 好哦来发现只要点入edit模式以后从html tab转到visual 然后update 就ok了。。。这个没有comments。。
搬家完毕。。看了很多以前写的东西 哈哈 只能说是非常的幼齿。。。享受强大的wordpress吧

—————————————————————————-

刚帮然然搬了她的blog到wordpress。 新浪的， 很简单 也说下步骤吧(网易阿，blogcn， 新浪， 搜狐 ， Qzone，和讯， bokee 都可以用同样的方法）

1. blogbus的搬家 http://banjia.blogbus.com/ 生成你的xml文档 blog comment一下全部都齐了

2.  这个地方《如何从blogbus到wordpress》下一个叫做 blogbus.php的文件， 然后上传到服务器的 wp-admin下面的 import.. 登录你的site  admin 就可以看到一个blogbus,  然后上传你从blogbus生成的xml文件。。搬家成功咯
搬家是越来越容易的事情。。带着你的过去迎接你的未来。 向前 并不要忘记过去！

n298

小单的青春异次元

恩 正式对外开放。。。

之前的blog都不会更新了。。全部搬家到这里来了

wordpress 很好很强大

－－－－庆生的分割线－－－－－－－－－－－－－－－－

正月十五 元宵节 奶奶生日 生日快乐 寿比南山 福如东海

又没能回家的一个春节 年算过完了 希望家人都健健康康 平平安安
从new year一直想要写点什么  春节都快过完 还没写出来

又漂泊一年 感触很多 新年很多寄望
慢慢写 慢慢实现

水完睡觉

小单

安

n375
Return top