第8音 Design Everying

第8音 Design Everying

“用户体验”不仅仅是“可用性”

1 14, 2007 作者: xw | 分类: 用户体验&交互设计

在整个网站设计领域里面,今年最火爆的词就是 “用户体验”和”可用性”,但是往往大多人不知道他们的区别,
包括许多设计师在内,理解往往一款产品的”可用性”不好就说这个产品的”用户体验”不好,其实这是不对的.
“用户体验”和”可用性”完全是两个不同的概念.

什么是用户体验?
当指电子商务网站的时候也被称作顾客体验（CUSTOMER EXPERIENCE). 它是指用户访问一个网站或者使用一个产品时的全部体验。他们的印象和感觉，是否成功，是否享受，是否还想再来/使用。他们能够忍受的问题，疑惑和BUG的程度.
用户体验包括四个因素：品牌，功能，可用性和内容.

什么是可用性?
对可用性要素的定义主要分为以下几点: *有效性（effectiveness）*易用性（effciency）*实用性（utility）*安全性（safety）*易学性（learnability）*易记性（memorablity）

从定义上大家就可以看出来,”可用性”仅仅是”用户体验”其中的一个部分而已,一款的用户体验好坏还要受
品牌、功能、内容、等等其他因素的影响。
阅读全文 »

三个月内通过Adsense赚一百万美金

1 14, 2007 作者: xw | 分类: 互联网

2006年3月16号，一位叫markus007的资深会员在站长世界论坛发了一个帖子，题目是：我是怎样在3个月之内赚了一百万。

因为站长世界不允许帖出任何网站的地址，在会员资料当中，markus007也 没有写上自己的网站。所以，虽然这个帖子掀起了很热烈的讨论，很多人却不知道他指的是哪一个网站。通过一些调查，我发现他叫Markus Frind，他的网站是Plenty Of Fish，这是一个提供免费交友服务的网站。现在有上百万个的会员，每天的页面浏览量Pageview是一千四百万到一千五百万。

浏览一下他的网站，你可以发现，网站的设计其实很简单，甚至在很多人眼里可能有些过时。但重要的是，他的网站吸引了大量的访客。而他所提供的服务是完全免费的。网站收入的唯一来源是通过Google Adsense卖广告。

他自己讲，他在最近的3个月里的广告收入达到了一百万美金。换算一下，也就是每天要在一万美金以上。这对一个提供免费服务的网站来说，是相当难得的。

在后续的跟帖当中，他也提到他的网站运行在四架服务器上，只有他一个人管理所有的事项。相比之下，其他和他有差不多数量会员的交友网站没有一个能像他这样低成本运行。那些交友网站大部分都是收费的，没有一个能用少于100架服务器来运行。

在他的帖子里，他给所有Adsense使用者提了几项建议：

1）要分析访客的IP地址。通过访客的IP地址，来分析他来自于哪个国家和地区。因为很多时候，美国的一个访客点击一个广告，可能会给你带来5美金的广告收入。但是其他地方的访客有可能只有2毛钱的收入。

2） 你必须建立一个能吸引回头客的网站。他的建议是：不要幻想能通过搜索引擎优化本身来致富。但是如果你建立的是一个免费的找工作的网站，你却可能一年赚个3 千万。其他像俱乐部会员，免费交友等等，这类网站都有可能赚大钱。寻找一个已成熟的市场，给这个市场提供一个免费的服务，然后卖广告。

3）让你的用户和访客来生成网站内容。比如让他们写一些例如夜总会的，旅馆的或是高尔夫球场的评论。

4）不要进入一个太多人已经在用Adsense的市场。最好是能创造一个你自己的市场。

5）网站必须非常简单，必须速度快。一页最多两个广告，最多一到两张图片。不要让你的访客晕头转向，不知所措。

6）到其他论坛里去转转。如果人们没有在谈论你的目标市场，那么你有很大的机会在这个市场里赚钱。

几天之内，他的这个帖子成了站长世界最热闹的帖子之一，而且上面的建议的确值得深思。

短小精悍的 form代码

1 8, 2007 作者: xw | 分类: Web 标准

国外的一片文章，用css定义form但是里面几乎就是用了最精悍的代码

html

  1. <form>
  2.  
  3.     <label for="name">Name</label>
  4.     <input id="name" name="name"><br>
  5.  
  6.     <label for="address">Address</label>
  7.     <input id="address" name="address"><br>
  8.  
  9.     <label for="city">City</label>
  10.     <input id="city" name="city"><br>
  11. </form>

CSS

  1. label,input {
  2.     display: block;
  3.     width: 150px;
  4.     float: left;
  5.     margin-bottom: 10px;
  6. }
  7.  
  8. label {
  9.     text-align: right;
  10.     width: 75px;
  11.     padding-right: 20px;
  12. }
  13.  
  14. br {
  15.     clear: left;
  16. }

把label,input用float:left定义成一行，然后距离下面10px,lable单独定义边距和文字并复写宽度，最后用br{clear:left}来换行

原文地址：http://www.quirksmode.org/css/forms.html

import css OR link css

1 8, 2007 作者: xw | 分类: Web 标准

css在页面里面一般有三种引入方式
1.在页面里面直接写

  1. <style type="text/css">
  2.       body{
  3.               margin: 0;
  4.                padding: 0;
  5.      }
  6. </style>

2.用link进行引用

  1. <link rel="stylesheet" type="text/css" href="my.css">

3.用import进行引用

  1. <style type="text/css">
  2.     @import url(my.css);
  3.  </style>

第一种是直接在html页面上进行css书写，而第二种和第三种是采用外部引用样式单独提取文件。
问题1.到底link和@import有什么区别？
我们先来看看他们的定义
阅读全文 »

破解UX Magazine的自适应屏幕的三列和两列

1 7, 2007 作者: xw | 分类: Web 标准, 工作

UX Magazine.com是2006年度首届css大赛的冠军网站，呵呵既然是冠军网站肯定有他自己的特点
和得到冠军的法宝，其中一个就是采用了宽平和窄屏的两种不同显示模式，在屏幕>1024的时候采用
三列，当屏幕<1024的时候采用两列，而且设计的巧妙在于如果你不仔细观察根本发现不了它细节
上的变化，可以说利用了巧妙的css技巧让，让宽平和窄屏幕的用户都可以很好的浏览网站内容。

那么下面我们就来分析分析他是怎么做的，先来看看首页的源代码。（非常的整洁和干净）
先看头部找到关键部分：

  1. ............
  2. <link rel="stylesheet" href="http://www.uxmag.com/_css/uxm.base.css" type="text/css" media="screen" />
  3. <link rel="stylesheet" href="http://www.uxmag.com/_css/uxm.1024.css" type="text/css" media="screen" id="wide" title="wide" />
  4. <link rel="alternate stylesheet" href="http://www.uxmag.com/_css/uxm.800.css" type="text/css" media="screen" id="narrow" title="narrow" />
  5. <link rel="stylesheet" href="http://www.uxmag.com/_css/uxm.print.css" type="text/css" media="print" />
  6.  ................
  7.  <!-- h5 & h6 Image Replacement Script  -->
  8. <script src="http://www.uxmag.com/_js/imageReplace.js" type="text/javascript"></script>
  9. <!-- Generic Scripts / Functions -->
  10. <script src="http://www.uxmag.com/_js/jsLib.js" type="text/javascript"></script>
  11.         ......................
  12. <!-- Various functions that initialize the page. -->
  13. <script type="text/javascript">
  14. <!--
  15.    function doOnResize () {
  16. determineStyle();
  17. }
  18.    function doOnLoad () {
  19.      determineStyle();
  20.    if ( getCookie("externalLinks") ) {
  21.        setLinkAttributes( getCookie("externalLinks") );
  22. }
  23. }
  24.             window.onresize = doOnResize;
  25. window.onload = doOnLoad;
  27. //-->
  28. </script>
  29.        .......................

从上面的代码可以看出，整个页面引用了四个主要css：
1.uxm.base.css是整个页面的基础样式;
阅读全文 »

Pages (33): « First ... « 28 29 30 31 32 33 »

订阅

日志(RSS)

分类


归档


标签云


我的豆瓣




我的链接


UEer


W3Cer


UIer


友情链接


其它

最热文章

最新评论

最新发表

Copyright © 2008 - 第8音 Design Everying
Design Everying.