payday loans

不同操作系统的图标历史演变记录

在网上发现了一个好的资源站点,其中感兴趣的一个是各种操作系统的图标历史演变过程。在此特意将网页做成图片,上传上来。

[译文]网页设计95%是”印刷术”

原文地址: http://informationarchitects.jp/the-web-is-all-about-typography-period/

网上95%的内容都是书面语言. 从逻辑上讲, 一个网页设计师在组织书面材料方面, 也就是”印刷术”方面, 应当进行一些严格且良好的训练.

信息设计是印刷术

早在1969年, 著名的瑞士排版家Emil Ruder写下了一些在那个时代很具有代表性的话, 这些话我们也能同样用于现代的网站:

今天我们被洪水一样多的印刷品所淹没, 而且这些东西的价值在不断的贬值, 我们也不能获取所有的内容. 而排版家的任务就是将这些大量的信息进行区分, 组织和说明, 以此来使读者能有机会获取他们所感兴趣的内容.

想想看, 这些描述多么像一个信息设计师. 信息设计师的任务就是”将这些大量的信息进行区分, 组织和说明, 以此来使读者能有机会获取他们所感兴趣的内容.”

相比之下, 宏观上的排版(整体结构)比微观上的排版(字体和空白的设计)包含更多现在的”信息设计”的方面. 可以这么说, 现在的信息设计师做的工作就是30年前排版师做的工作.

印刷术的一个最直接的目的就是把信息写出来, 这时印刷术最原始的任务, 如果一个印出来的东西不能被阅读, 这个印刷的目的就没有达到.

优化印刷术就是优化可读性, 可获取性, 可用性和整体的平衡. 组织文本块, 并把他们和图片结合起来, 这些难道不是图片设计师, 可用性专家和信息架构师做的事情么? 那么, 为什么这些被忽视了呢?

字体太少? 分辨率太低?

最主要的反对在线出版的理由就是可用的字体太少了. 第二个理由就是分辨率太低, 以至于很难看清像素的和抗锯齿的文字.

没有足够做字体的理由是站不住脚的, 在意大利文艺复兴时期, 排版家只有一个字体, 但在那期间, 诞生了最漂亮的印刷作品.

排版家不用太关心字体. 字体不是他首要考虑的问题, 他应该考虑的是什么时候使用他是最好的.

选择字体而不叫做印刷术

第二个理由也不是太站得住脚. 刚开始的印刷品质量是不如我们今天在画面上所看到的. 而且重要的是, 如果处理的专业一些, 屏幕上的字体也是可以变的很具有可读性的.

信息设计不是关于如何使用好的字体的, 而是如何利用好的印刷术的. 这差别很大. 任何人都可以使用不同的字体, 有些人可以选择不错的字体, 但只有极少数的才能掌握印刷术.

把文本当作用户界面

如何在不同的浏览器和平台上使用字体是很麻烦的事情, 分辨率的问题也很讨厌. 但要注意, 这只是一个网页设计师的一部分工作, 网页设计师的主要工作是在主流浏览器和平台上让文本易读且美观. 正确的引导, 字间距和留白可以有助于可读性, 但是, 这并不大. 一个伟大的网页设计者知道如何去处理文字而不是内容, 他”把文本当作用户界面“. 看看Khoi Vinh的网站, 您可能就明白了:

渐渐的, 越来越多的朴素的网站都把文本当作用户界面, 他们有: google, ebay, craigslist, youtube, flickr, Digg, reddit, delicious. 做一个结论, 把文本当作用户界面是成功的唯一途经. 成功的网站要努力做到同时具有简单的界面和很强的辨识度. 但这是另外的话题了.

[译文]Brandstreaming是什么?谁在使用它?

如果有一个新潮且人气高的social media趋势出现,那么可以打赌一定有公司在努力寻找使用它的途径。这些已然发生在了博客、Twitter上,现在正发生在像FriendFeed这样的Lifestreaming应用上。

RSS应用商Pheedo公司给这些创造了一个干净漂亮的词:brandstreaming。Pheedo对brandstreaming的定义为:“由一个公司创造的协调统一的内容流”。

为了支持公司使用lifestreaming工具的例子,Pheedo公司引用一份最近的报告所指出,网站之外的内容消耗量在过去的9个月中增长了153%。总体来看,53%的网络用户是通过使用Widgets、RSS阅读器、社会网络或移动终端来获取网站信息,而不是通过网站。

正像我们的Alex Iskold上周写到的,公司应该不只局限于仅仅使用API,而应该更多的使用现有的主流Web平台。

公司可以真正的使用上Lifestreaming么

Alex在他的文章里并没有提到FriendFeed,也许是因为FriendFeed及类似的Lifestreaming应用在互联网中还算是较新的应用。但是Forrester公司的分析师Jeremiah Owyang,已经观察了很久公司使用Social Media的情况,并也调查了公司是如何使用FriendFeed的。他讨论到”Social Media Press Release” (SMPR)这个概念不只是公司的公告,它也是“向Social Media提供博客、照片、视频、标签等等”。他引用了福特汽车公司的一个“数字摘录”作为例证。

但是让我们退后一步,从用户的角度来看看brandstreaming。很显然,公司是想将他们的品牌带入像Flickr, Facebook, Twitter之类的Social Media网站,并绑定成Feed。这使其超越了网站的形式,刺激用户并怂恿用户讨论他们的产品。但是用什么来刺激用户订阅他们的‘brandstreaming’呢?

现实的,brandstreaming可能更容易成为品牌崇拜者的一种生活方式吸引力。福特公司当属于此类,虽然它还不能像Apple或者Sony。今晚我在FriendFeed上做了一个搜索,看是否能找到像Apple、Sony或者可口可乐这样一些知名品牌的出现。但是发现这些消费品牌都没有做什么brandstreaming。

Pandora的尝试

早先的一个使用者是在线音乐提供商Pandora。Lucia Willow,Pandora的社区经理,她已经在诸多时髦Social Media站点展现Pandora。她在Jeremiah Owyang的文章留言中列出了以下列表:

http://friendfeed.com/pandoraradio

http://twitter.com/pandora_radio (Lucia称这已经成为了”一个*天堂般*的资源”)

http://www.facebook.com/pages/Pandora/5919726343

http://getsatisfaction.com/pandora

http://flickr.com/photos/pandora_radio/

http://www.myspace.com/pandoraradio

Pandora的FriendFeed有70多人订阅。Lucia承认Pandora还是在尝试测试它,最近的情况起来与Pandora在Twitter上的应用非常相同——与用户之间的交流并刺激他们使用Pandora。

Cisco’s 的BrandStream广告

另一个brandstreaming的例子是Cisco。向上面所说的,Pheedo称BrandStreaming除了可以让公司将品牌带到消费者面前之外,它也是一种广告工具。

Pheedo为Cisco提供了一个广告活动,他们的话语是:“设计了一个完整的Social Media广告网络,1) 网络流量,2) 邮件订阅,3)RSS订阅”。Cisco的brandstream包括视频、期刊、消费者故事和产品更新。

结尾

显然,这还是brandstreaming的早期。人们是否愿意在像FriendFeed的lifestreaming应用中订阅这些品牌还是个问题。我可以看到对像Apple这样有着众多追随者消费品牌,确实有着显著的吸引力。而另外一个品牌,诸如福特和Cisco,在FriendFeed这样的高社会化应用中仍需更多的努力。

欢迎在留言中讨论关于公司的’BrandStreaming’。你是否认为它适用于大多数公司?还是你建议公司最好远离这些?

原文:http://www.readwriteweb.com/archives/brandstreaming.php

网站设计中的一致性

最近在设计和开发空游网(http://kongyoo.com)的过程中, 遇到了不少关于设计一致性的地方和问题, 而且通过浏览一些日常的网站, 也越来越感觉到一致性在网站设计中的重要性. 所以在此想简单聊聊网站设计中关于一致性的问题.

为了让大家先对一致性有个基本的概念, 先举一个和网站设计无关的一致性例子. 那就是我们常见的KFC和麦当劳快餐店. 这两个快餐品牌是应用一致性的典范. 全世界各地的KFC和麦当劳的店面从LOGO到店面装潢, 从工作服到口号无不透露出一致性. 这样带来的好处也显而易见, 你只要见到这样的快餐店就知道到了KFC或是麦当劳. 我们的网站设计也要达到这样的目标!

为了让大家有更直观的印象, 我们再举几个反面的例子, 这些就是和网站设计有关的了.

1. 淘宝-我的淘宝

界面风格不一致

2. 飞信官方网站

左右的文字对齐方式不一致

文字和图片的对齐方式不一致

3. 豆瓣

ajax功能的按钮和普通的链接样式一样. 上面的”回应”按钮点击后其实是在下方出现一个输入框, 而不知道功能的用户从样式上看会认为这就是一个普通的链接, 点击后页面会进入到另一个页面或者其他会引起页面刷新的功能.

4. yahoo财经

同一级别下的页面导航样式不同. 从子条那里看到这个例子, 我又去看了一圈, 看来还是有问题啊.

大家有了直观的印象以后, 就可以来点儿理论性的东西了:) 因为本人不是理论大师, 所以下面的理论就是总结自大家的成果了.

什么是一致性? 对于外观(布局)和功能的一致规范, 目的是让产品易学易用.

用户在使用任何东西的时候, 都会有思维的惯性, 如果他们的一个动作没有得到预期的结果, 那么他就会有相当的挫折感. 所以一致性也是非常影响用户体验的.

上面几个违反一致性的例子只涵盖了一致性的很小一部分, 一致性还包括很多其他的点. 但总结起来, 大概有以下几点:

  • UI的一致性
    也就是外观, 布局, 颜色搭配的一致, 这些是用户接触一个东西的第一感觉. 这第一感觉的一致会给用户带来很强的品牌辨识度. KFC和麦当劳在这点上功课做的很足!
    比如网站整体的配色, 字体的使用, 控件的样式.
  • 功能的一致性
    什么样的东西有什么样的功能. 功能要尽量达到用户的预期, 减少用户的挫折感, 易学易用.
    比如蓝色带有下划线的文字可以点击.
  • 内部一致性
    产品要给人一种整体的感觉, 内部的不同模块的类似功能从UI和功能上都要尽量一致.
    比如网站各个版块的”更多”链接点击后都是进入到能看到这个版块的更多内容的页面, 而且这个链接一般都在版块的右上角或右下角.
  • 外部一致性
    同类产品的类似功能从UI和功能上都要尽量一致. 这样用户可以利用自己类似产品的使用经验.
    比如大多数网站的LOGO都在页面左上角, 搜索框大多在页面右上角.

既然有这些理论和例子指导, 那为什么还是有那么多不一致的情况出现呢?

我们简单的了解了一下, 主要有一下几个原因

  • 版本升级不完整.
  • 不同模块负责人不同, 没有统一的规范
  • 执行不足

要避免这些原因, 我们首先要在事前对产品进行规划的时候就引入一致性的概念和设计规范, 然后实施过程中严格按照规范来进行并同时按照规范进行检验. 对于没有条件制订规范的情况下, 我们也可以引用一些业界通用的规范来规范自己的产品.

下面是我们总结出来的一些一致性的具体体现, 虽然算不上一个严格完整的规范, 但如果能在网站设计开发过程中注意到这些地方, 相信也能获益不少.

  • 语言
    • 专有名词要统一, 所有地方只使用一种
      • 手机/手提电话. 有的东西有多种名词, 只能使用一种, 避免混淆.
      • 男女/帅哥美女. 资料设置和展示的时候常会出现这种情况, 要尽量避免.
      • 你/您的问题. 统一一个口径吧.
    • 语气要一致
      • 活泼的口吻/严肃的口吻. 整个网站如果没有特殊需求, 提示语言尽量使用相同的口吻, 避免突兀.
      • 人称一致
        • 你的地址/我的空间. 不要混杂使用第二人称和第一人称
  • UI元素
    • Option buttons(radio buttons)和Checkbox不要用混了
    • 圆的是Option, 方的是Checkbox, 不要用错
    • 可编辑的Textbox是白色背景, 不可编辑的是灰色背景
    • Flash/Silverlight中的控件也要和HTML中保持一致
    • 带有下划线的文字是可以点击的; 一段文字中一点不同颜色的文字也可能可以点击
  • 布局
    • LOGO都在左上方,点击后返回首页
    • 导航条都在上方或左方(或都有)
    • 路径导航(面包屑breadcrumbs)都在主导航下方
    • 内容都在页面中间
    • 相关内容和广告都在右侧
    • 搜索框在右上方
    • 注册/登录/个人资料在右上方
  • 功能
    • 什么样的网站就应该有什么样的功能. 比如一个订机票的网站一定要有航班查询的功能; 一个电影院网站一般都要有电影的上映日期表.

总体来说, 一致性带给我们的好处可以总结为

  • 功能使用更简单
  • 平滑的用户体验
  • 构造品牌辨识度

其实针对一致性还有一个很重要的话题, 那就是”一致性 vs. 创新”. 如何在一致性和创新之间把握一个平衡, 怎么既能不落俗套又能让用户接受, 这可真是个艺术了:) 这个话题我们就留待以后再讲.

顺便说一下, 其实我们历史上就有一位一致性大师……他就是……统一了货币和度量衡的秦始皇! 众口难调, 一致性当然需要很强的执行力!

附: 参考文章及链接, 并感谢

  • http://www.sitepoint.com/article/why-consistency-is-critical
  • http://www.buildwebsite4u.com/building/web-design.shtml
  • http://www.dibbern.com/build-a-website/web-definition-conventions.htm
  • 人機介面的設計原則 - 一致性(链接丢失)
  • http://hi.baidu.com/ui88/blog/item/15776466fcc0eb25aa184c06.html

什么是FriendFeed?

FriendFeed

2006年下半年的时候,某天灵感降临,想起自己用着若干Web2.0网站( flickr, wordpress, last.fm, twitter, delicious  …),虽然都提供了RSS服务,但个人使用上面临着两个问题:

  1. 如果想展示所有这些给别人看,需要给朋友们一堆RSS或网站Link

    给,这是我的照片: http://flickr.com/photos/zhengle,给,这是我的twitter: http://twitter.com/zhengle, 给,这是我的博客: http://zhengbw.com ……

  2. 如果我想查看朋友们的诸多网络动态,也需要订阅他们每人一堆的RSS

    订,这是他的照片: http://flickr.com/photos/nickcheng/ 订!这是他的twitter: http://twitter.com/nickcheng,订!这是他的博客: http://nickcheng.com ……

这会是个非常繁复的过程。复杂的操作和多个信息源必定会造成不好的用户体验和信息丢失。

那么,是不是可以做一个基于Web2.0的网站,将所有的Web2.0网站信息通过RSS来整合到一起呢?这样的话,

  1. 我可以把想给朋友们看到的信息通过多个RSS聚合到单一的一个RSS上

    给,这是我的所有了! http://friendfeed.com/bowen

  2. 我也可以通过朋友们的这个单一的RSS来了解他们每天的网络动态

    订!这是他所有的东西了! http://friendfeed.com/nickcheng

在我准备动手做这样一个网站的期间,先是遇到了soup.io网站(访问需翻墙),试用之下感觉和我想做的基本趋同… 之后不久,又看到了一见倾心的FriendFeed.com,从界面风格到用户交互,都颇大气简介又不失细节。后来得知FriendFeed的骨干都是从google里(Gmail,Google Maps)跳槽出来的,果不其然呀。

如果你以前没接触过FriendFeed,也许通过上面的阐述和例子,现在已经对friendfeed是什么有了一个大概的了解。来看看wiki上对FriendFeed的解释吧,猛击这里 http://en.wikipedia.org/wiki/Friendfeed

在我看来,friendfeed最主要的功能有三

  1. 聚合自己散落在各个网站中的RSS,将各方信息汇总到一处。汇聚后的信息可以形成统一的RSS及展示界面,这样可以方便的给朋友或者做一个widget放在自己网站上或者哪里。
  2. 通过一个RSS/页面,看到朋友的所有网络动态。这一点需要基于你的朋友已经完成了上面的第一点,即他/她在FriendFeed聚合了自己的一些RSS。如果你关注的朋友没有使用FriendFeed呢?别担心,friendfeed还特别提供了imaginary功能,使用这个功能,你可以虚拟建立任何一个人的若干RSS聚合。
  3. 信息的交流。当很多人的RSS都聚集到了FriendFeed上时,那么就形成了一个信息交流汇总的平台。这是水到渠成形成的平台。

FriendFeed能聚合什么样的服务呢?看看这张图

可以看的出来,FriendFeed提供的多是现在很流行的Web 2.0的Service。不过绝大多数都是国外的,如果你想找一个国内类似FriendFeed的网站,可以来猛击这里 http://planbus.com/ ,这是两个加拿大的华人做的类FriendFeed网站,针对的多是国内的网站服务商,比如QQ空间、豆瓣、饭否、又拍等等,很符合国情 :)

在FriendFeed中,有很多漂亮的功能,譬如:

  • imaginary — 类似虚拟朋友一个功能,自定义建立一个好友并设置相应多个Service的RSS
    imaginary friend
  • rooms — 有特定人群/有特定话题的“包间”
    create room
  • share something — 不拘于来自RSS的内容,可以将看到的任何网页或内容直接Share到自己的Feed中
    share something

不过这里想说的一个平时不被注意到,却非常有用的功能:Search

为了更明白的说明Search的彪悍与人性,描了张图
search

FriendFeed的搜索可以划分为三个主题,

  • 搜什么(What)?
    也就是搜索的关键词了
  • 在哪里搜(Where)?
    是指在FriendFeed可以绑定的哪个Service中来搜索,比如可以指定在Flickr内容中或者Twitter内容中搜索。
    这样可以有效的圈定搜索范围,比如想搜图片的时候,那就圈定Flickr或者是Picasa等等。
  • 搜谁的(Who)?
    指这个内容是由谁产生的。比如你关心某人在所有网站中提到的有关键词的内容,那就可以使用指定人的搜索。

当这三大元素交叉使用的时候,搜索的强大就体现出来了!您可以搜索:

  • 任何人在任何网站上的关键词条目;
  • 任何人在特定网站上的关键词条目;
  • 特定人在任何网站上的关键词条目;
  • 特定人在特定网站上的关键词条目;

比如,搜索朋友 nickcheng 在 Flickr 网站内所有有关 FriendFeed 关键字的内容:
search

FriendFeed的内容来绝大部分来自于Web2.0的网站,用户产生的内容的有效性要高于一般性质的网站,在这个信息平台上进行搜索,如果你灵活运用,相信会有意想不到的收获 ;)