我們都有這樣的經驗──
走入一家餐廳,肌腸轆轆,口水已經滿到牙齦邊,點餐喔!快點!菜來囉!好香啊!
一大盤又一大盤的大熱炒、大鍋湯,吃得好過癮、好過癮,嗚呼,太爽了。
不過,吃完後,實在飽到不行,看看剛剛點的這些菜,這才發現,這些菜還真鹹真酸啊,害我現在好想喝一口水,將水勉強的灌進已經滿到食道的食物,這時候頭昏眼花,真的好想發脾氣,心裡暗罵:「以後不來這家吃了!好鹹!」有些餐廳雖然好吃,但口味很重。第一口你會覺得有如天上美味,吃到快飽時卻很想吐。有趣的是,餐廳有百百種,但這種「不耐吃」的餐廳,是我們大家都不喜歡的。
儘管,每次走進去,吃的第一口,依然是這麼像天上的美味,但是,我們清醒的時候對它不會有太好的話語。這是極有趣的人性,對「Fad」幾乎不理性的不喜愛,我們大家顯然都很不喜歡那種「曇花一現」的感覺,儘管那盆「曇花」曾經讓我們感動到流下眼淚。
「Fad」就是美國人口中的曇花一現。所謂Fad就是所謂的一窩蜂的爆紅商品,可以說是一時興沖沖想買下或吃下來的東西,但由於它「不耐看」、「不耐吃」,很快就膩了,那種膩的感覺成反作用,反而讓人討厭,長期過後,留下後世的笑柄。這星期看到一位美國行銷部落客寫的最新文章,這篇文章是在批評「布希鞋」(Crocs,之前我也寫過一篇關於布希鞋的文章),有趣的是,它還畫出一張圖,畫出歷史上幾個曾經一熱後來消失無蹤的「Fad」。最近在台灣也看到一張很類似的圖,畫的也是在這邊曾經造成「Fad」排隊排到外面去然後一晃眼又掉落到平地的釣鐘燒或蛋塔等等──
大家對這些Fad已經不是回味無窮,而是回頭思考,甚至「檢討」──為何一個商品會淪為「Fad」?會只有這麼可惡的一場曇花一現?
這篇文章就在問,「為何Crocs會走上現在這條絕路?」首先我並不知道Crocs已經如這位作者說的這麼慘,它的股價目前呈微回復的局面,店鋪也好像開得好好的,但這是表象?這位作者舉出幾個數字,我們來聽聽他怎麼說──
首先作者說,一個很紅的品牌,命運只有兩種,一種就是「Fad」,這個字在英文就如同「one hit wonder」那樣,讓人覺得有點崇拜但充滿了投機、不實際的感覺。另一種叫做「Iconic」,就是經典、長期的巨人。大家都覺得「Fad」是糟的,而我們做一個產品,就希望能做到「Iconic」的水準,這樣才是真正的英雄、真正的成就!然後,這篇文章很有趣,就在教我們,一個產品如何才能讓人久久回味,而不只是一時暴力塞給你一定要買的討厭Fad?它開頭就說,嗯,有時候,「成功就是你的最糟的敵人」(Success is sometimes your own worst enemy),一個品牌要怎麼避免走向Fad的可憐之路,完全取決於公司的策略。他開始細數Crocs當年爆紅的過程,他們使用加拿大實驗出來的一種特殊材質,做成水上活動用的休閒涼鞋,到了2005年,Crocs年營收達到1億美元,其中淨利是1700萬美元;到了2006年的年營收更是高達3.5億美元,淨利為6400萬美元,利潤空間還比前年更大,就在這一年,Crocs正式IPO上美國股市,成為鞋業史上規模最大的一次股票上市,Crocs也充份運用這筆資金來繼續建廠、購併其他廠商……。到了2007年,Crocs更創下8.5億美元營收,利潤空間已經接近20%,非常驚人!
不過,好景不常,到了2008年(去年)Crocs的營收不幸的開始下跌,微滑到了7.2億美元,但損益沒搞好立刻慘賠了1.9億美元之多,公司立刻砍掉了2000名員工,股價也暴跌76%,據這篇報導說,到了今天,Crocs還沒甩掉嚴重的財務赤字與庫存問題。所以雖然看起來這一季的股價已較上季好很多但它已經不再是一年前那間風風光光的Crocs公司了。當然,在2008年那個氣氛,Crocs也說應該是「大環境的經濟影響」,消費者不花錢買Crocs鞋,但這作者完全的懷疑這樣的說法。他直接指出,Crocs所沒有做的五件事情,讓它走向Fad的慘烈命運:
第一、不要滿足需求:大部份的公司見到爆紅了,第一件事就是趕快擴大生產線、趕快來滿足這些需求。作者說,最不應該做的就是「過度製造」,雖然所有需求可以因此而被滿足,但當市場上充滿了你的商品,當初的「訴求」有可能受到一些無法預期的變化,首先有一些人可能在並不是很想買的情況下被逼著要買一雙,再者可能發現太多的狀況。所以你看有些餐館很厲害,明明這麼好吃的東西,它就給你一小盤,不要讓你吃太飽,大概也是同樣的意思。或許一個商品在熱紅的時候不應該「追加」,而是保持著原本的計畫,別為了搶一時的短期熱潮而壞了長程計畫。
第二、不應該加入其他的產品:Crocs的「原味」版爆紅之後,它也立刻加入很多其他的產品,有的可能根本長得完全不像原本的Crocs,而且Crocs開始走「外表路線」,原本Crocs就只是穿得舒服而已,這讓它產生了品牌的錯覺。後來Crocs甚至還買下專做體育穿著的公司,然後也開始製造Crocs的衣服!這位作者事後諸葛的說:「並不令人驚訝,這些(和原味Crocs鞋無關的新產品)後來都沒有起飛。」這些沒起飛的產品反而壞了Crocs原本深植人心的「就是又醜又舒服」的品牌形象,讓Crocs慢慢變成只是眾多品牌中的其中一個。
第三、不要讓這個商品四處都買得到:一開始Crocs只在一些特殊的商店才買得到,後來甚至自己開店。但到最後你在任何的大賣場都可以看到Crocs的蹤影。這樣很快的就將大賣場的胃口養壞,他們一開始還以能夠拿到Crocs陳列很高興,都為Crocs製作特別專櫃、給優惠的上架費,後來這些大賣場慢慢麻痺,將Crocs視為只是眾多鞋品牌中的其中一種。作者說,像Crocs這麼特別的品牌,應該和少數的賣場談特別獨家販售的deal才對。
第四、不應該忽略「核心客群」:原本的Crocs是給運動人士、醫生護士、小朋友穿的,但後來它不再專注在這個最核心的客群,想要變成一個「大家都愛」的鞋子,這就讓這些核心客群失去了穿Crocs的動機,當初買Crocs也養成了穿Crocs的習慣,認為它就代表了自己的(運動)特色,但現在穿Crocs已經沒有這個感覺,當初好不容易製造的忠誠度也因此消失了。這位作者表示,一個產品不要只是Fad而讓人回味無窮的關鍵,就是它擁有一批莫名其妙死忠的客戶,這一群客戶會決定了它是否能長長久久。
第五、不應該快速全球發展:作者說,Crocs兩年前股票上市後,立刻花錢在中國大陸與墨西哥建廠,然後在荷蘭與日本都蓋了新倉庫,快速的擴展全球,但這樣的速度實在太快了,讓它失去了本土美國這邊的專注力。這位作者最後的結論是,Crocs有很棒的品牌、很棒的名字、很棒的點子,但最後唯一缺的是小心的行銷策略,讓它終究就只是一盆「曇花」,一個令人遺憾的「Fad」。他一再強調,一個品牌如果只是「一眼瞬間」,轉頭就不見,賺了大筆鈔票,卻得不到世人的永遠愛戴與景仰與回味。他意思是說,「FAD is BAD」,一時的熱潮是糟糕的、是失敗的、是沒有弄好的……。
但是,是這樣嗎?
在網路上,我們看到的Fad,更是多得如天上的蝗蟲。許多網站,曾經是我們口中天天在講的,它的創業家也天天都出現在報上或演講的場合裡,可惜,不過一年兩年,就被追過、或就被捨棄。大家就會根據「FAD is BAD」的人性,去對這樣的歷史做了定論,我認為,這樣是不對的。
不對的原因,就只有一點:你永遠不知道,什麼才會走進歷史。
最近在看蔣勳寫的梵谷畫作的書,他提到曾經有一位一百多歲的老太太,成為世界上唯一曾經看過梵谷的「活著的人」,而她對梵谷的印象竟是:「他就是一個瘋子而已!我實在搞不懂為何世人這麼喜歡他?」這位老太太肯定不會叫每個人都是瘋子,大部份的正常人、甚至讓老太太愛戴不已的人,現在在哪裡?和梵谷的地位又如何比?
我們可以說,FAD只是我們現在這一群人,對我們有的記憶,來發表的一個「歷史定位」的言論。這一群人口中的Icon,其實是無法傳遞到下一代的。譬如我媽媽常常提到她小時候多麼喜歡真平四郎,但我完全無法體會;以後我告訴我的小朋友,當年爸爸多麼喜歡看聖鬥士星矢、七龍珠,那時候的比現在的什麼119特警隊還要棒到幾百倍……他無法體會這樣的感受。換句話說,FAD is BAD,只會存在我們這一代,而ICON is GOOD,亦只會存在我們這一代,隨著我們一個一個進棺材,不進棺材的也開始患失憶症或口齒不清以後(然後還是得進棺材),最後,都會一起被埋入土裡。
注意,這和財務無關。FAD是臭名,但是卻是賺錢的;一間公司一直不斷的做FAD,是有前途的,只要它認清自己是Fad的事實。但現在講的是「歷史地位」的問題,我們懷疑,Fad的做法,真的如作者所意示的自殺了自己的地位嗎?讓大家留一個好笑的感覺嗎?顯然不是。反而,你如果拚命的把FAD弄更熱,不斷的擺出就是要做Fads的姿態,說不定以現在成本低速度快的環境可以做出好幾個梵谷級的作品。如果不把自己拉到最極限,要怎麼知道極限在哪裡?
如果不讓自己拚命成為Fad,怎麼知道這個Fad是否還能再進一步留傳千世?
如果這樣講,剛剛這位作者很熱心的理出了「五個避免成為Fad的方法」,反而都可以再「反一下」然後拿來使用!譬如──
應該快點滿足需求,應該加入其他的產品,才知道還有沒有其他更厲害的變種!
應該讓這個商品四處都買得到,應該快點發展核心族群外的其他族群,甚至應該快速的在全球擴展,才能夠快速的測試這個商品是否真有全球人人認為的「永恆價值」!
網路更是如此,還在繼續的前進中。如果現在就停了,就害怕自己變成下一個Fad,那太可惜了。我們要的是賺快錢,然後歷史的地位,至於現在活著的這60億人是怎麼看的?去他(們)的!或許到最後,正是這一群擁於追求爆紅、跌倒、又站起來爆紅、再跌倒、再爆紅的這一群網路世代,大家一起進入梵谷級的永恆。
文章來自MR6
文章提供BAYSTARS DESIGN網頁設計公司
2009年11月5日 星期四
2009年11月4日 星期三
行動召喚按鈕:實例與最佳實踐
英文原文Call to Action Buttons: Examples and Best Practices
版權所有,轉載請註明出處,多謝!
--------------------------------------------------------------------------------
行動召喚在網頁設計中——尤其是在用戶體驗方面——是一個描述在網頁中用於誘導用戶行為的元素的術語。在網站界面中,最流行的行動召喚的表現是出現在點擊表單按鈕、完成一個行動(比如”Buy this now!”)或使用附加信息帶到一個頁面(比如”Learn more …”)等請求用戶來採取行動的地方。
我們如何創建有效的行動召喚按鈕來吸引用戶的注意並引誘他們點擊?我們將在本文中通過分享一些有效的設計技術和查看一些實例來嘗試回答這個問題。
有效的行動召喚按鈕的最佳實踐
設計行動召喚按鈕到網站界面需要一些遠見和計劃;它必須是你的原型和信息結構流程的一部分以使他們能夠正常工作。在本節中,我們將討論行動召喚按鈕的設計技術。
用大小吸引用戶注意
在網頁中,一個元素相對於其周圍元素的大小表明其重要性:元素越大,它就越重要。判斷網站的某種行為有多麼至關重要,行動召喚按鈕的型號也應相應的調整。
行動召喚按鈕與周邊元素
Lifetree Creative展示大小的主意以表明他們的行動召喚按鈕的重要性。將按鈕的大小與公司的logo對比。為了吸引用戶的注意,這個行動召喚按鈕在寬度方面比logo大了大約20%。儘管logo在頁面中放的比較高,你的眼睛還是被吸引到了行動召喚按鈕,因為它相對於周邊元素比較大。
行動召喚按鈕與不太重要的行動召喚的大小
一個網頁可能有多個行動召喚。為了區分一個行動召喚與其它行動的相關重要性,你可以改變他們的大小。這裡在paramore|redd網站有一個使用這個理念的實例,那個頁面的讓用戶註冊以獲取郵件通知的行動召喚按鈕明顯的比繼續閱讀性東召喚按鈕大一些,表明在該網頁中,與繼續閱讀日誌相比他們更希望你採取訂閱
使用突出的位置吸引用戶注意
頁面中的行動召喚按鈕的位置是吸引訪問者的注意的關鍵。放置在突出的位置,比如頁面的章節的頭部可以帶來較高的頁面轉換因為用戶將很可能注意到行動召喚按鈕並採取行動。
放置在明顯的區域、
將一個行動召喚按鈕放置在一個明顯的區域是一個讓它在頁面佈局中突出的一個方法。你可以在dailymile看到這個概念,行動召喚按鈕看起來在一個比其它元素比如圖形條高的層面上(在頂部)。
放到頁面的頭部
為了闡述這個概念,看一下位於Your Web Job頁面最右上角的”Post a Job!”行動召喚按鈕。通過將行動召喚按鈕放到一個非常醒目的區域,這樣好像用戶會注意到它或者稍後記住它,在他們看過網站的內容之後。比如一個職位發布者想要在他們發布職位之前瀏覽一下網站,”Post a Job!”按鈕將隨時為他們準備好,無論哪個頁面引導他們跳轉,他們會更可能記得他們可以很容易的執行這個行動的地方,因為它的位置足夠顯眼。
放在佈局的中間
將一個行動召喚按鈕定位到頁面佈局的中間——而不是兩側(或明顯比較小或者不重要)的位置——可以是一個很有效的吸引註意和誘導一個行動的方法。在例子PicsEngine中,儘管這個行動召喚按鈕沒有使用與其背景色和頁面中周邊元素高對比的色彩,它依然能夠因為其居中的位置而很容易引起注意。
使用空白來從其他頁面元素中區分行動召喚按鈕
行動召喚按鈕周圍的空白(或者無效空間)的使用是一個讓它在有很多元素的區域中突出的很有效的方法。
用於區分行動召喚按鈕的空白
IconDock展示如何有效的利用空白。即便使用一個很小而且簡單設計的行動召喚按鈕,它依然很突出,因為在它和鄰近元素之間的空間。
改變空白的數量以表明邏輯關係
行動召喚按鈕與其周邊的元素之間的空白越多,他們的聯繫越少。因此,如果你有其它元素能夠有助於說服用戶採取行動,減少那些元素之間的空白和間隔。
例如,Donor Tools在他們的”Sign Up”行動召喚按鈕上面有些文字,它們告訴用戶註冊的好處。在它的右邊是一個瀏覽器截圖只是用於美化的,而且對激勵用戶點擊”Sign Up”行動召喚按鈕不是必須的。通過減少文字和行動召喚按鈕之間的空白,你將這兩個元素可視的組織到了一起。瀏覽器截圖和一個圖片保證用戶的實現不會從行動召喚按鈕上面轉移走。
使用高對比度的顏色
決定在行動召喚按鈕上使用哪個顏色很重要。在你的行動召喚按鈕上使用一個相對於周邊元素和背景色對比度高的色彩,因為這是讓用戶注意到你的行動召喚按鈕的關鍵。
與周邊元素形成對比的顏色
Notepod例證在一個行動召喚按鈕和它周邊元素的色彩反差是如何能夠有效的吸引用戶的注意的。周圍元素都是黑色的,而這個行動召喚按鈕卻是淺藍色。
背景/前景色彩反差
Valley Creek Church設置它的淺黃色”Learn More”召喚按鈕到一個灰度圖片上面。就算使用一個簡單的行動召喚按鈕設計在一個複雜元素的上面(此處是一個圖片),它依然因為色彩選擇而醒目。
提供次要的替代行動
一個頁面可以有多個行動召喚按鈕。有時候有必要提供一個次要行動以便於說服用戶稍後訪問你希望的主要的行動召喚。比如,在用戶註冊一些網絡服務之前,一些用戶需要了解更多的信息才去執行註冊的行為;次要行為可以請求他們體驗一次產品之旅或者訪問展示產品的更多信息的頁面。
在主要行動旁邊顯示次要行動
OfficeVP顯示兩個挨著的行動召喚按鈕——居中並放在頁面頭部。通過區分顏色,用戶可以看到他們有兩條不同的路:他們可以直接註冊(主要行動),或者如果他們在註冊前希望了解更多,他們可以選擇第二個行為,體驗一下先。
Transmissions 也展示了在期望的重要行動旁邊放一個次要行動按鈕的概念。這樣的話,主要行動就是讓用戶購買該應用。如果他們想在購買前試用一下,那麼第二期望的行動就是先下載該應用。注意主要行動通過做的比次要行動按鈕更醒目來被標識出來,相對於背景色比次要行動按鈕有更鮮明的對比色。這樣,你就很有效的從左到右移動目光。 。
另外,注意兩個行動召喚按鈕之間相對於該區域其它元素的縮少的空白的使用,有效的將按鈕組織到了一起。
在主要行動召喚按鈕下面顯示次要行動按鈕
另外,你可能想將次要按鈕放到主要行動下面。如果你需要更好的區分你的行動召喚按鈕的話,這可能就是有必要的了。Virb 展示了這個方案,”Join Now”行動召喚按鈕被放在次要行動“體驗產品之旅”的上面。注意,次要行動按鈕因為它的默認狀態被用比較弱的色彩遠遠的從主要行動隔開了。
傳遞一種緊迫感
通過使用大膽的、肯定的和命令的詞語表達這個行動可以改變用戶的看法,用這種方法說服他們不應再等待才去採取行動,以及等待可能會造成某些懲罰或者錯失良機。
tap tap tap通過給一個行動召喚按鈕添加緊迫性來證明了這個主意。 ”Buy Now”行動召喚按鈕上面有“價格信息(Intro price)”的文字,巧妙的暗示用戶行動拖延越久,將來在這個介紹的價格過期的時候可能要支付的更多的風險就越高。
通常,創造緊迫感可以有效的暗示用戶去採取行動。使用單詞比如”now”、”immediately”和”right now”可以傳遞這種緊迫感。看一看Organizing for America (BarackObama.com)呼籲網站訪問者”DONATE NOW”的例子。如果只是簡單的說”Donate”,緊迫感就會消失,用戶也可能會更少的去採取行動。
告訴用戶採取行動是很容易的
通常,用戶遲疑採取行動是源於考慮一個姓對可能會比較困難、昂貴或者費時。通過照顧這些擔心,你的行動召喚按鈕能帶來更多的轉換(點擊)。
你如,在Basecamp上,行動召喚按鈕明確顯示用戶註冊將會花費的時間以及註冊是不花錢的(free)。這種做法消除了用戶將要在線採取行動是的兩個主要顧慮:費用(這也會要求他們採取格外的操作比如拿出他們的信用卡)和時間限制。
在Tea Round App的例子中,他們告訴用戶註冊他們的郵件服務將不會受到垃圾郵件,這是無論何時將你的Email提供給第三方服務時擔心的一個事情。
告訴用戶期待什麼
大部分網站用戶猶豫於相信在網頁上呈現的表面價值。根據經驗,他們的信任已經被燒光了——聲稱免費服務的鏈接,卻不得不輸入他們的信用卡號碼才能得到他們想要的服務。為了增加點擊轉換率和重建信任,預期用戶的懷疑並告訴他們通過採取你為他們準備的行動將會得到什麼。當設計一個行動召喚按鈕,考慮到用戶可能會有的所有潛在的問題,然後確定你可以及時的回答他們。
Mozilla Firefox 告訴用戶通過點擊他們的行動召喚按鈕的詳細的預期。這個行動召喚按鈕告訴你你將會得到Firefox 3.5,它是免費的,以及(對那些更多的特性)它的確切的版本是3.5.3 forWindows 操作系統,語言是English,然後你可以預期一個7.7MB 的下載。
Onehub預料到用戶是否(在採取行動上)需要先支付或者他們是否能夠用一下產品作一下測試的問題,告訴用戶如果他們採取註冊的行為,他們將獲得30天的免費試用。
行動召喚按鈕設計展示
現在我們已經講了一些設計行動召喚按鈕的最佳實踐,讓我們看一些網頁上的行動召喚按鈕的典型實現。我們將配合這些設計和上面的技術和最佳實踐,並瀏覽他們如何幫助實現這些良好的設計。
Campaign Monitor
這套行動召喚按鈕顯示兩個潛在的用戶行為:”Try it for free”和”View features”。對於已經了解Campaign Monitor和想要現在嘗試的用戶來說,他們可以執行首要期望的行動,而其它的想要在作出時間承諾之前瀏覽一下可以選擇查看該網絡應用的更多特性的次要行動。
Fileshare HQ
這個行動召喚按鈕告訴用戶預期的事情(”開始在片刻間分享文件(start sharing files in minutes)”).
Livestream.com
這組行動召喚按鈕使用垂直排列分組以表示展示給用戶的這些行動的期待的重要性順序。主要期望的行動是獲取一次評估,接著是了解服務的詳情,最後是對比不同方案之間的差別。
Traffik CMS
這個行動召喚按鈕被放在一個非常醒目的位置,在頁面的最頂部,並用型號和色彩從周邊相關元素中高亮了出來。
Hambo Design
這個行動召喚按鈕告訴用戶預期的事情:通過獲得報價,沒有附加的東西。它預料到了”如果我要花費時間進行這個流程的話一份報價將花費我多少?”的問題。 (該網站已經被改版——譯者,神飛。)
The Resumator
你可以在這個行動召喚按鈕上看到很多最佳實踐。首先,它使用了空白、大小和顏色來清晰的將自己和頁面其它元素區分開來。然後,為了創造邏輯的分組以說服用戶採取行動,它在按鈕上面的推薦文字上使用較少的空白,然後將次要行動”Take a tour first”放到它的下面。
本文譯自Smashing Magazine,轉載請註明出處,多謝。
Wufoo
Wufoo提供了兩個行動,用戶可以看到一個水平排列的樣式,主要期待行動是左邊的那個。這些按鈕很大而且很難錯過,儘管看網站的全局設計的時候它們並不是很顯眼。
Mobile Web Design
這個行動召喚按鈕被放在一個醒目的位置;它有較大的型號和一個獨特的顏色——尊重了周邊的元素。為了“Purchas the book”上提供附加的上下文,這個行動召喚按鈕下面防止了一些文字註釋的價格和可用的格式(傳統圖書或者PDF)。
NCover
這些行動召喚按鈕很整齊。主要行動在藍色的次要行動的上面。用戶被吸引到這個按鈕是因為大小,而且對次要期望行動使用藍色調可以減弱它對相對於主要期望的行動。注意空白的使用以創建三個相關元素的邏輯分組有助於實現銷售:文字告訴用戶Ncover是乾什麼的,註冊行動召喚按鈕,以及體驗行動召喚按鈕。相比之下,注意此組和右邊的元素之間的空白變化。
Xero
本組行動召喚按鈕展示聽過一個次要行動的用法。在主要期待行動的右邊,有一個文字鏈接請求用戶“了解更多(find out more)”,對於不想立馬註冊的用戶來說,這個設計增加了用戶會在註冊之前“了解更多”的可能性。
Tao Effect – Espionage
這是一組行動召喚按鈕,為用戶提供三個選擇:Download、Buy Now或者Upgrade。這樣的話,主要期待行動就是下載這個應用,緊跟著兩個同樣的行動“Buy Now”和“upgrade”。區別是在行動召喚按鈕上使用不同哦你高的顏色,主要行動比兩個次要行動的顏色更醒目。
The Invoice Machine
這裡你可以看到兩個使用藍色邊框高亮的行動召喚按鈕,因為它們使用了同樣的風格,我們可以假定它們有相同的重要性。或許該公司確定用戶在看到他們提供的東西之前不太可能選擇註冊的行為,也或者他們確信產品之旅將更有效的幫他們將訪問者轉換為會員。
Ekklesia 360
這套行動召喚按鈕展示使用圖標來指示向前的感覺(用指向右邊的箭頭表示)。他們使用了一個相對於黑藍色背景的高對比的色彩以使行動召喚按鈕從頁面設計中突出出來。
Checkout
通過使用一個相對於全局設計的非常突出的顏色到他們的行動召喚按鈕,儘管在它上面的圖片明顯比按鈕的型號還要大,它依然能夠吸引用戶的注意。
spinen
使用直接而清晰的語言告訴用戶當他們採取行動後預期的事情:這樣的話,點擊這個行動召喚按鈕將讓他們找到產品的更多信息。
Codebase
這個行動召喚按鈕告訴用戶,通過執行這個行動他們能得到什麼:免費15天的試用。它通過使用高對比色彩、在左邊的一個圖標以及大量的空白來吸引用戶的注意。
GoodBarry
在這個行動召喚按鈕中,你可以看到空白、型號以及聰明的色彩選擇是如何有效的讓一個行動召喚按鈕變得非常醒目。強調這個行動是免費的”FREE”能夠暗示用戶他們的預期。
Wake Interactive
這裡,這個行動召喚按鈕相對於其周邊元素的色彩令它突出出來,儘管它的周圍的空白比較小。
OH! Media
這個行動召喚按鈕真的從頁面中脫穎而出了——因為它的位置、周圍的空白以及——最重要的——顏色的選擇。看一下這個頁面,目光被直接吸引到這個行動召喚按鈕上了。
Pixelcrayons
看看空白能夠如何很棒的提升行動召喚按鈕吸引註意的效果。
Ballpark
這個行動召喚按鈕的型號有效的吸引了用戶的注意。它的清晰而直接的語言明確地告訴用戶執行行動之後的預期結果。
One Theme Per Month
這個行動召喚按鈕組將主要希望行動放到替代行動的中間。通過為主要期望行動添加一個非常醒目的顏色,以及一個較大的空間,它試圖將它的重要性放到次要行動的上面。
Scrapblog
你可以看到使用相對於周邊元素的鮮明的色彩、足夠的空間、以及型號的一些用戶注意的效果。簡單的語言傳遞一種很容易的感覺,生存你可以通過點擊立馬“開始(start)”。
13 Creative
這個行動召喚按鈕顯示如何通過使用一個非傳統的設計,你依然可以在周圍元素比較大的情況下吸引用戶的注意。
Kalculator
這個行動召喚按鈕明確的高速用戶:通過點擊這個行動召喚按鈕,他們可以只付$3.99。使用單詞”only”提示這是個相當不錯的交易,這顯然有利於銷售。
Web Design Beach
下面是一組使用兩種不同顏色的行動召喚按鈕。更醒目的那個,”get a quote”暗示它就是主要期待行動。
The Highland Fling
該行動召喚按鈕設法通過大量的空白、顯眼的位置和使用一個圖標以使自己顯眼以吸引註意力。通過使用單詞”now”,它傳遞了一種緊迫感和立馬行動的需求。
Commercial IQ
這個行動召喚按鈕的型號和項目位置吸引了用戶的注意。放大鏡圖標給行動添加了語境。添加“Free for search”文字消除了用戶關於行動的費用的顧慮。
dashboard
這裡,你可以看到使用高對比色彩的以使行動召喚按鈕脫穎而出的做法,儘管是在明顯較大的頁面元素中間。
行動召喚按鈕的附加資源
如果你想了解更多的關於行動召喚按鈕的信息,這裡是一些其它網站上的相關資源和文章:
如何在Photoshop中製作一個光滑而簡潔的按鈕
這個教程是在Six Revision,由我(Jacob Gube)編寫,將一步步向你展示如何製作大號的和能引起注意的行動召喚按鈕。
網頁設計中的靈感按鈕
如果你需要一些優秀按鈕設計的靈感,看一下這個Pattern Tap的收集吧。
有效的行動召喚按鈕的10種技術
Paul Boag討論一些關於製作良好的行動召喚按鈕的技術
良好的行動召喚按鈕
UX Booth關於“好的行動召喚按鈕的組成”方面有一篇好文章
Firefox展示一個強大的行動召喚按鈕是如何提升入口頁面的性能的
閱讀一下一個好的行動召喚按鈕如何提高轉換。你將發現一個Firefox、Opera和IE使用的行動召喚按鈕之間的對比。
網站設計趨勢:行動召喚按鈕(中文翻譯)
Lee Munroe將一系列的行動召喚按鈕放到一起,並附加了一個在當前設計趨勢方面的討論。
文章提供baystars design網頁設計公司
版權所有,轉載請註明出處,多謝!
--------------------------------------------------------------------------------
行動召喚在網頁設計中——尤其是在用戶體驗方面——是一個描述在網頁中用於誘導用戶行為的元素的術語。在網站界面中,最流行的行動召喚的表現是出現在點擊表單按鈕、完成一個行動(比如”Buy this now!”)或使用附加信息帶到一個頁面(比如”Learn more …”)等請求用戶來採取行動的地方。
我們如何創建有效的行動召喚按鈕來吸引用戶的注意並引誘他們點擊?我們將在本文中通過分享一些有效的設計技術和查看一些實例來嘗試回答這個問題。
有效的行動召喚按鈕的最佳實踐
設計行動召喚按鈕到網站界面需要一些遠見和計劃;它必須是你的原型和信息結構流程的一部分以使他們能夠正常工作。在本節中,我們將討論行動召喚按鈕的設計技術。
用大小吸引用戶注意
在網頁中,一個元素相對於其周圍元素的大小表明其重要性:元素越大,它就越重要。判斷網站的某種行為有多麼至關重要,行動召喚按鈕的型號也應相應的調整。
行動召喚按鈕與周邊元素
Lifetree Creative展示大小的主意以表明他們的行動召喚按鈕的重要性。將按鈕的大小與公司的logo對比。為了吸引用戶的注意,這個行動召喚按鈕在寬度方面比logo大了大約20%。儘管logo在頁面中放的比較高,你的眼睛還是被吸引到了行動召喚按鈕,因為它相對於周邊元素比較大。
行動召喚按鈕與不太重要的行動召喚的大小
一個網頁可能有多個行動召喚。為了區分一個行動召喚與其它行動的相關重要性,你可以改變他們的大小。這裡在paramore|redd網站有一個使用這個理念的實例,那個頁面的讓用戶註冊以獲取郵件通知的行動召喚按鈕明顯的比繼續閱讀性東召喚按鈕大一些,表明在該網頁中,與繼續閱讀日誌相比他們更希望你採取訂閱
使用突出的位置吸引用戶注意
頁面中的行動召喚按鈕的位置是吸引訪問者的注意的關鍵。放置在突出的位置,比如頁面的章節的頭部可以帶來較高的頁面轉換因為用戶將很可能注意到行動召喚按鈕並採取行動。
放置在明顯的區域、
將一個行動召喚按鈕放置在一個明顯的區域是一個讓它在頁面佈局中突出的一個方法。你可以在dailymile看到這個概念,行動召喚按鈕看起來在一個比其它元素比如圖形條高的層面上(在頂部)。
放到頁面的頭部
為了闡述這個概念,看一下位於Your Web Job頁面最右上角的”Post a Job!”行動召喚按鈕。通過將行動召喚按鈕放到一個非常醒目的區域,這樣好像用戶會注意到它或者稍後記住它,在他們看過網站的內容之後。比如一個職位發布者想要在他們發布職位之前瀏覽一下網站,”Post a Job!”按鈕將隨時為他們準備好,無論哪個頁面引導他們跳轉,他們會更可能記得他們可以很容易的執行這個行動的地方,因為它的位置足夠顯眼。
放在佈局的中間
將一個行動召喚按鈕定位到頁面佈局的中間——而不是兩側(或明顯比較小或者不重要)的位置——可以是一個很有效的吸引註意和誘導一個行動的方法。在例子PicsEngine中,儘管這個行動召喚按鈕沒有使用與其背景色和頁面中周邊元素高對比的色彩,它依然能夠因為其居中的位置而很容易引起注意。
使用空白來從其他頁面元素中區分行動召喚按鈕
行動召喚按鈕周圍的空白(或者無效空間)的使用是一個讓它在有很多元素的區域中突出的很有效的方法。
用於區分行動召喚按鈕的空白
IconDock展示如何有效的利用空白。即便使用一個很小而且簡單設計的行動召喚按鈕,它依然很突出,因為在它和鄰近元素之間的空間。
改變空白的數量以表明邏輯關係
行動召喚按鈕與其周邊的元素之間的空白越多,他們的聯繫越少。因此,如果你有其它元素能夠有助於說服用戶採取行動,減少那些元素之間的空白和間隔。
例如,Donor Tools在他們的”Sign Up”行動召喚按鈕上面有些文字,它們告訴用戶註冊的好處。在它的右邊是一個瀏覽器截圖只是用於美化的,而且對激勵用戶點擊”Sign Up”行動召喚按鈕不是必須的。通過減少文字和行動召喚按鈕之間的空白,你將這兩個元素可視的組織到了一起。瀏覽器截圖和一個圖片保證用戶的實現不會從行動召喚按鈕上面轉移走。
使用高對比度的顏色
決定在行動召喚按鈕上使用哪個顏色很重要。在你的行動召喚按鈕上使用一個相對於周邊元素和背景色對比度高的色彩,因為這是讓用戶注意到你的行動召喚按鈕的關鍵。
與周邊元素形成對比的顏色
Notepod例證在一個行動召喚按鈕和它周邊元素的色彩反差是如何能夠有效的吸引用戶的注意的。周圍元素都是黑色的,而這個行動召喚按鈕卻是淺藍色。
背景/前景色彩反差
Valley Creek Church設置它的淺黃色”Learn More”召喚按鈕到一個灰度圖片上面。就算使用一個簡單的行動召喚按鈕設計在一個複雜元素的上面(此處是一個圖片),它依然因為色彩選擇而醒目。
提供次要的替代行動
一個頁面可以有多個行動召喚按鈕。有時候有必要提供一個次要行動以便於說服用戶稍後訪問你希望的主要的行動召喚。比如,在用戶註冊一些網絡服務之前,一些用戶需要了解更多的信息才去執行註冊的行為;次要行為可以請求他們體驗一次產品之旅或者訪問展示產品的更多信息的頁面。
在主要行動旁邊顯示次要行動
OfficeVP顯示兩個挨著的行動召喚按鈕——居中並放在頁面頭部。通過區分顏色,用戶可以看到他們有兩條不同的路:他們可以直接註冊(主要行動),或者如果他們在註冊前希望了解更多,他們可以選擇第二個行為,體驗一下先。
Transmissions 也展示了在期望的重要行動旁邊放一個次要行動按鈕的概念。這樣的話,主要行動就是讓用戶購買該應用。如果他們想在購買前試用一下,那麼第二期望的行動就是先下載該應用。注意主要行動通過做的比次要行動按鈕更醒目來被標識出來,相對於背景色比次要行動按鈕有更鮮明的對比色。這樣,你就很有效的從左到右移動目光。 。
另外,注意兩個行動召喚按鈕之間相對於該區域其它元素的縮少的空白的使用,有效的將按鈕組織到了一起。
在主要行動召喚按鈕下面顯示次要行動按鈕
另外,你可能想將次要按鈕放到主要行動下面。如果你需要更好的區分你的行動召喚按鈕的話,這可能就是有必要的了。Virb 展示了這個方案,”Join Now”行動召喚按鈕被放在次要行動“體驗產品之旅”的上面。注意,次要行動按鈕因為它的默認狀態被用比較弱的色彩遠遠的從主要行動隔開了。
傳遞一種緊迫感
通過使用大膽的、肯定的和命令的詞語表達這個行動可以改變用戶的看法,用這種方法說服他們不應再等待才去採取行動,以及等待可能會造成某些懲罰或者錯失良機。
tap tap tap通過給一個行動召喚按鈕添加緊迫性來證明了這個主意。 ”Buy Now”行動召喚按鈕上面有“價格信息(Intro price)”的文字,巧妙的暗示用戶行動拖延越久,將來在這個介紹的價格過期的時候可能要支付的更多的風險就越高。
通常,創造緊迫感可以有效的暗示用戶去採取行動。使用單詞比如”now”、”immediately”和”right now”可以傳遞這種緊迫感。看一看Organizing for America (BarackObama.com)呼籲網站訪問者”DONATE NOW”的例子。如果只是簡單的說”Donate”,緊迫感就會消失,用戶也可能會更少的去採取行動。
告訴用戶採取行動是很容易的
通常,用戶遲疑採取行動是源於考慮一個姓對可能會比較困難、昂貴或者費時。通過照顧這些擔心,你的行動召喚按鈕能帶來更多的轉換(點擊)。
你如,在Basecamp上,行動召喚按鈕明確顯示用戶註冊將會花費的時間以及註冊是不花錢的(free)。這種做法消除了用戶將要在線採取行動是的兩個主要顧慮:費用(這也會要求他們採取格外的操作比如拿出他們的信用卡)和時間限制。
在Tea Round App的例子中,他們告訴用戶註冊他們的郵件服務將不會受到垃圾郵件,這是無論何時將你的Email提供給第三方服務時擔心的一個事情。
告訴用戶期待什麼
大部分網站用戶猶豫於相信在網頁上呈現的表面價值。根據經驗,他們的信任已經被燒光了——聲稱免費服務的鏈接,卻不得不輸入他們的信用卡號碼才能得到他們想要的服務。為了增加點擊轉換率和重建信任,預期用戶的懷疑並告訴他們通過採取你為他們準備的行動將會得到什麼。當設計一個行動召喚按鈕,考慮到用戶可能會有的所有潛在的問題,然後確定你可以及時的回答他們。
Mozilla Firefox 告訴用戶通過點擊他們的行動召喚按鈕的詳細的預期。這個行動召喚按鈕告訴你你將會得到Firefox 3.5,它是免費的,以及(對那些更多的特性)它的確切的版本是3.5.3 forWindows 操作系統,語言是English,然後你可以預期一個7.7MB 的下載。
Onehub預料到用戶是否(在採取行動上)需要先支付或者他們是否能夠用一下產品作一下測試的問題,告訴用戶如果他們採取註冊的行為,他們將獲得30天的免費試用。
行動召喚按鈕設計展示
現在我們已經講了一些設計行動召喚按鈕的最佳實踐,讓我們看一些網頁上的行動召喚按鈕的典型實現。我們將配合這些設計和上面的技術和最佳實踐,並瀏覽他們如何幫助實現這些良好的設計。
Campaign Monitor
這套行動召喚按鈕顯示兩個潛在的用戶行為:”Try it for free”和”View features”。對於已經了解Campaign Monitor和想要現在嘗試的用戶來說,他們可以執行首要期望的行動,而其它的想要在作出時間承諾之前瀏覽一下可以選擇查看該網絡應用的更多特性的次要行動。
Fileshare HQ
這個行動召喚按鈕告訴用戶預期的事情(”開始在片刻間分享文件(start sharing files in minutes)”).
Livestream.com
這組行動召喚按鈕使用垂直排列分組以表示展示給用戶的這些行動的期待的重要性順序。主要期望的行動是獲取一次評估,接著是了解服務的詳情,最後是對比不同方案之間的差別。
Traffik CMS
這個行動召喚按鈕被放在一個非常醒目的位置,在頁面的最頂部,並用型號和色彩從周邊相關元素中高亮了出來。
Hambo Design
這個行動召喚按鈕告訴用戶預期的事情:通過獲得報價,沒有附加的東西。它預料到了”如果我要花費時間進行這個流程的話一份報價將花費我多少?”的問題。 (該網站已經被改版——譯者,神飛。)
The Resumator
你可以在這個行動召喚按鈕上看到很多最佳實踐。首先,它使用了空白、大小和顏色來清晰的將自己和頁面其它元素區分開來。然後,為了創造邏輯的分組以說服用戶採取行動,它在按鈕上面的推薦文字上使用較少的空白,然後將次要行動”Take a tour first”放到它的下面。
本文譯自Smashing Magazine,轉載請註明出處,多謝。
Wufoo
Wufoo提供了兩個行動,用戶可以看到一個水平排列的樣式,主要期待行動是左邊的那個。這些按鈕很大而且很難錯過,儘管看網站的全局設計的時候它們並不是很顯眼。
Mobile Web Design
這個行動召喚按鈕被放在一個醒目的位置;它有較大的型號和一個獨特的顏色——尊重了周邊的元素。為了“Purchas the book”上提供附加的上下文,這個行動召喚按鈕下面防止了一些文字註釋的價格和可用的格式(傳統圖書或者PDF)。
NCover
這些行動召喚按鈕很整齊。主要行動在藍色的次要行動的上面。用戶被吸引到這個按鈕是因為大小,而且對次要期望行動使用藍色調可以減弱它對相對於主要期望的行動。注意空白的使用以創建三個相關元素的邏輯分組有助於實現銷售:文字告訴用戶Ncover是乾什麼的,註冊行動召喚按鈕,以及體驗行動召喚按鈕。相比之下,注意此組和右邊的元素之間的空白變化。
Xero
本組行動召喚按鈕展示聽過一個次要行動的用法。在主要期待行動的右邊,有一個文字鏈接請求用戶“了解更多(find out more)”,對於不想立馬註冊的用戶來說,這個設計增加了用戶會在註冊之前“了解更多”的可能性。
Tao Effect – Espionage
這是一組行動召喚按鈕,為用戶提供三個選擇:Download、Buy Now或者Upgrade。這樣的話,主要期待行動就是下載這個應用,緊跟著兩個同樣的行動“Buy Now”和“upgrade”。區別是在行動召喚按鈕上使用不同哦你高的顏色,主要行動比兩個次要行動的顏色更醒目。
The Invoice Machine
這裡你可以看到兩個使用藍色邊框高亮的行動召喚按鈕,因為它們使用了同樣的風格,我們可以假定它們有相同的重要性。或許該公司確定用戶在看到他們提供的東西之前不太可能選擇註冊的行為,也或者他們確信產品之旅將更有效的幫他們將訪問者轉換為會員。
Ekklesia 360
這套行動召喚按鈕展示使用圖標來指示向前的感覺(用指向右邊的箭頭表示)。他們使用了一個相對於黑藍色背景的高對比的色彩以使行動召喚按鈕從頁面設計中突出出來。
Checkout
通過使用一個相對於全局設計的非常突出的顏色到他們的行動召喚按鈕,儘管在它上面的圖片明顯比按鈕的型號還要大,它依然能夠吸引用戶的注意。
spinen
使用直接而清晰的語言告訴用戶當他們採取行動後預期的事情:這樣的話,點擊這個行動召喚按鈕將讓他們找到產品的更多信息。
Codebase
這個行動召喚按鈕告訴用戶,通過執行這個行動他們能得到什麼:免費15天的試用。它通過使用高對比色彩、在左邊的一個圖標以及大量的空白來吸引用戶的注意。
GoodBarry
在這個行動召喚按鈕中,你可以看到空白、型號以及聰明的色彩選擇是如何有效的讓一個行動召喚按鈕變得非常醒目。強調這個行動是免費的”FREE”能夠暗示用戶他們的預期。
Wake Interactive
這裡,這個行動召喚按鈕相對於其周邊元素的色彩令它突出出來,儘管它的周圍的空白比較小。
OH! Media
這個行動召喚按鈕真的從頁面中脫穎而出了——因為它的位置、周圍的空白以及——最重要的——顏色的選擇。看一下這個頁面,目光被直接吸引到這個行動召喚按鈕上了。
Pixelcrayons
看看空白能夠如何很棒的提升行動召喚按鈕吸引註意的效果。
Ballpark
這個行動召喚按鈕的型號有效的吸引了用戶的注意。它的清晰而直接的語言明確地告訴用戶執行行動之後的預期結果。
One Theme Per Month
這個行動召喚按鈕組將主要希望行動放到替代行動的中間。通過為主要期望行動添加一個非常醒目的顏色,以及一個較大的空間,它試圖將它的重要性放到次要行動的上面。
Scrapblog
你可以看到使用相對於周邊元素的鮮明的色彩、足夠的空間、以及型號的一些用戶注意的效果。簡單的語言傳遞一種很容易的感覺,生存你可以通過點擊立馬“開始(start)”。
13 Creative
這個行動召喚按鈕顯示如何通過使用一個非傳統的設計,你依然可以在周圍元素比較大的情況下吸引用戶的注意。
Kalculator
這個行動召喚按鈕明確的高速用戶:通過點擊這個行動召喚按鈕,他們可以只付$3.99。使用單詞”only”提示這是個相當不錯的交易,這顯然有利於銷售。
Web Design Beach
下面是一組使用兩種不同顏色的行動召喚按鈕。更醒目的那個,”get a quote”暗示它就是主要期待行動。
The Highland Fling
該行動召喚按鈕設法通過大量的空白、顯眼的位置和使用一個圖標以使自己顯眼以吸引註意力。通過使用單詞”now”,它傳遞了一種緊迫感和立馬行動的需求。
Commercial IQ
這個行動召喚按鈕的型號和項目位置吸引了用戶的注意。放大鏡圖標給行動添加了語境。添加“Free for search”文字消除了用戶關於行動的費用的顧慮。
dashboard
這裡,你可以看到使用高對比色彩的以使行動召喚按鈕脫穎而出的做法,儘管是在明顯較大的頁面元素中間。
行動召喚按鈕的附加資源
如果你想了解更多的關於行動召喚按鈕的信息,這裡是一些其它網站上的相關資源和文章:
如何在Photoshop中製作一個光滑而簡潔的按鈕
這個教程是在Six Revision,由我(Jacob Gube)編寫,將一步步向你展示如何製作大號的和能引起注意的行動召喚按鈕。
網頁設計中的靈感按鈕
如果你需要一些優秀按鈕設計的靈感,看一下這個Pattern Tap的收集吧。
有效的行動召喚按鈕的10種技術
Paul Boag討論一些關於製作良好的行動召喚按鈕的技術
良好的行動召喚按鈕
UX Booth關於“好的行動召喚按鈕的組成”方面有一篇好文章
Firefox展示一個強大的行動召喚按鈕是如何提升入口頁面的性能的
閱讀一下一個好的行動召喚按鈕如何提高轉換。你將發現一個Firefox、Opera和IE使用的行動召喚按鈕之間的對比。
網站設計趨勢:行動召喚按鈕(中文翻譯)
Lee Munroe將一系列的行動召喚按鈕放到一起,並附加了一個在當前設計趨勢方面的討論。
文章提供baystars design網頁設計公司
2009年11月3日 星期二
Firefox Bug: inline/inline-block的間隙
首先要說明的是,這個標題有點標題黨的意思,這個bug也存在於IE8下,在IE6和IE7下正常。之前寫過兩篇關於IE bug的文章,這里特意用了Firefox bug作為標題,是為了給自己找點心里安慰,省得總是埋怨IE :)。
關於inline-block,這個bug是“痛在遠方”同學碰到的,確實很詭異啊,貌似對標準支持越好的瀏覽器才會有這個問題。
如下圖:
關於inline-block,這個bug是“痛在遠方”同學碰到的,確實很詭異啊,貌似對標準支持越好的瀏覽器才會有這個問題。
如下圖:
2009年11月2日 星期一
1像素的dotted/dashed邊框
最近的一個頁面中碰到的,本來想用border來模擬設計圖的虛線效果,但是很明顯border效果不如設計圖來的好看。順便研究了下dashed和dotted的區別。
首先,從字面上來理解,dashed和dotted都是指“虛線”,他們的不同在於:
dashed:來自dash(破折號),由dash組成的虛線
dotted:來自dot (點),由dot組成的虛線,也稱點線
Bug1:在IE6下,1px寬的dotted表現的和dashed一樣。當寬度大於1px時,表現正常。
Bug2:在IE7下,當4條邊的寬度是1px和其它任意數值共存時,1px的dotted表現的和dashed一樣。 4條邊的寬度全為1px,或者為其它不是1px的不同值時不會出現這個bug。
Bug3:另外,IE6下,1px的dotted或者1px的dashed邊框,在拖動頁面時,有時候邊框會連成實線,有時候會出現缺口。
要解決這些bug,直接就不用dotted而直接用dashed;用圖片代替;用額外標籤和代碼來解決。
鑑於只有在邊框寬度為1px時才會出現這些bug,可以設置外包圍標籤的邊框寬度為2px,通過增加一個內標籤,設置其為1px的內容背景色邊框,再通過設置margin-top/right/ bottom/left: -1px;來蓋掉外包圍標籤的1px邊框,從視覺上實現正常效果。很囉嗦,很討厭,很無奈。
.b6 {
border: 2px dotted #000;
padding-top: 0;
}
.b6 .inner {
border: 1px solid #9c9c9c;
width: 100%;
height: 100%;
margin: -1px;
position: relative;
z-index: 100;
}
文章提供baystars design網頁設計公司
首先,從字面上來理解,dashed和dotted都是指“虛線”,他們的不同在於:
dashed:來自dash(破折號),由dash組成的虛線
dotted:來自dot (點),由dot組成的虛線,也稱點線
Bug1:在IE6下,1px寬的dotted表現的和dashed一樣。當寬度大於1px時,表現正常。
Bug2:在IE7下,當4條邊的寬度是1px和其它任意數值共存時,1px的dotted表現的和dashed一樣。 4條邊的寬度全為1px,或者為其它不是1px的不同值時不會出現這個bug。
Bug3:另外,IE6下,1px的dotted或者1px的dashed邊框,在拖動頁面時,有時候邊框會連成實線,有時候會出現缺口。
要解決這些bug,直接就不用dotted而直接用dashed;用圖片代替;用額外標籤和代碼來解決。
鑑於只有在邊框寬度為1px時才會出現這些bug,可以設置外包圍標籤的邊框寬度為2px,通過增加一個內標籤,設置其為1px的內容背景色邊框,再通過設置margin-top/right/ bottom/left: -1px;來蓋掉外包圍標籤的1px邊框,從視覺上實現正常效果。很囉嗦,很討厭,很無奈。
.b6 {
border: 2px dotted #000;
padding-top: 0;
}
.b6 .inner {
border: 1px solid #9c9c9c;
width: 100%;
height: 100%;
margin: -1px;
position: relative;
z-index: 100;
}
文章提供baystars design網頁設計公司
2009年11月1日 星期日
Facebook教我們的4種還可以出去做的社群網站
巴菲特的想法總是:「大家冷酷的時候,你要瘋狂」。所以,我在這邊再寫一篇關於社群網站的機會。以前我們隨便就可以想出一大堆可做的社群網站,直到當今Facebook「一統天下」,萬眾俯身,萬歲臉書,只有瘋子才會再說我們還可以來開任何一個社群網站,試圖在Facebook之外的地方集結一堆新的人?
不過,在我們玩著Facebook的同時,也慢慢察覺到,還是有一些社群網站是可以做的。這都要謝謝Facebook告訴我們,它,不是萬能的!
這兩周收集了「四個方向」,拿出來給各位參考一下,還有哪些社群網站可以做,而且最近真的給人做出來了──
Facebook教我們第1種還可以做的獨立社群網站就是「藝人Fans社群」,目前Facebook所有粉絲專頁中,排行老大的是已故天王巨星麥可傑克森的粉絲專頁,它也是史上第一個打破1000萬粉絲數的粉絲專頁。大部份的人對「一千萬」這個數字會很敏感,因為在全球向來只要破千萬的就是一個正式可以賣掉且很了不起的社群網站。注意,全Facebook的小遊戲前十名也都是個個在1000萬以上的活躍用戶,但不同的是,小遊戲的用戶是被Facebook的API給掐住脖子,不可以走掉,但「粉絲專頁」卻沒有被Facebook那些東西給掐住。我們甚至可以來問一個問題:如果大家對麥可傑克森這麼喜愛、而且這麼希望再繼續成為他永遠的粉絲,而他又不存在的情況下,這些粉絲在Facebook上面可以幹什麼?答案是:可以幹的事,肯定不多!事實上,擁有1000萬名粉絲的實力,已經也可以不必仰賴Facebook了。它早就可以出來自己開一個自家的社群網站。
於是,果然,最近又開了一個麥可傑克森的社群,不能說是社群網站,但是想辦法再集結麥可社群的力量,要收集「1000萬顆小點點」,用這些小點點來畫出一張麥可的臉,你可以從這個Flash的介面Zoom In,看看你所貢獻的這個「點」是在Michael臉上的哪一塊地方。另外,可能是受到啟發,已故功夫巨星李小龍的女兒李香凝(Shannon Lee),在網路上也動作頻頻,她目前是李小龍公司的CEO,最近宣布「BruceLee.com」重整,在上面除了積極的再整理與授權李小龍相關的周邊無形資產與商品之外,也記得要再將李小龍的粉絲都找回來,在上面形成一個社群。請注意,這樣的已故巨星的社群肯定會比仍在世的明星還要龐大;在老大已經不在世上的情況下,線上只會傳得更火熱!(因為也只有線上可以去)。
接下來,Facebook教我們第2種還可以做的獨立社群網站就是「專業社群」--這種專業最好是某一個職業,大家認同的。不同於剛剛第一種是由Facebook告訴我們什麼已經在Facebook上面集結得很成功,第二種則是因為Facebook使用過後讓我們發現什麼集結得「很不成功」,比方說,你在Facebook上面收集一群很愛吃Pizza的人,這點Facebook很是拿手,「Pizza」粉絲專頁已經有四、五百萬人在上面,而且還好幾個,簡直瘋了。但大家認同自己的地方不應該只限於這些有趣的生活興趣,也包括自己的職業、專長……這部份在Facebook上面的表現,目前稍嫌弱一點,我將它視為機會,也會在Facebook創造這樣的社群,但是,如果有人跑到外面去自開新的「專業社群」,並不令人感到訝異──
其中,最近一篇報導指出,有一群人即將成立一個「專給科學家」的社群網站。這個網站還沒有開,所以沒有連結可看,不過它已經得到了1220萬美元(台幣5億元)的資金,也間接證明這是一個被看好的點子。它是一個從幾間大學的學者之間發起的計畫,打算建構一個史上最大的「科學家社群」。你說為什麼要做這個?因為這些科學家,在Facebook上面並不見得想承認他們是這麼狂熱的科學家,而且也不想隨時丟出這麼艱深的字眼或沒人看得懂的想法把他們在Facebook上面的朋友嚇跑,重要的是在Facebook實在沒有科學的「FU」,問題是現在許多有趣的科學研究,大家也發現,都是好幾間大學、好幾個團隊的學者「共同發現」的,所以他們想搞一個社群,讓大家「隨時隨地」可以合作開發某一科學領域,創造跨國、跨校、跨實驗室的合作。
然後,Facebook還教我們第3種還可以做的獨立社群網站是「購物社群」,這也是從Facebook所歸納出來的商機,社群小遊戲已經賺翻了,農場剛開放買東西第一天就賺了不知多少錢,Zynga靠賣虛寶輕鬆達成1億美元營收還不必像線上遊戲投資這麼多即時的主機與頻寬成本,而且Facebook早就推出「禮物店」,最近連已經落後的Friendster也剛剛推出自己的禮物店,那大家就「延伸去想」,如果買的不是虛擬寶物,而是讓朋友之間互相通風報信買一些「真正的物品」呢?不過,只要還在Facebook站內,那頂多可以叫做「社群購物」,想要再野心更大一點成為一個可以獨立成一片天的「購物社群」,那還得動點腦筋──
看,Facebook曾提出Beacon,在站外的四十幾個社群網站置放貼紙測量誰到哪裡逛街看哪個商品並同步發佈在朋友的首頁,後來因不敵隱私權爭議而收手,但大家持續看好這一塊,而且還知道Facebook已經「不敢做」這一塊。於是十月中大家在討論,有一個網站叫「Plurchase.com」開站,雖沒表明要做這個,但也差不多了。它是架在其他的購物網站之上,叫大家在這些購物網站購物時,順便讓朋友知道。有趣的是它的「技術面」,Plurchase強調的是不必下載什麼外掛或甚至桌面軟體,你只要到他們的網站Plurchase.com,透過他們提供的連結點進Amazon、Zappos這類的「線上百貨公司」,他們的網站會形同「代理伺服機」,你做的每一個動作都經過Plurchase,讓你看起來好像還是在逛那些百貨公司,其實你一舉一動都讓Plurchase知道。你說,Why你要這樣做?簡單!這樣一來,你可以找你的朋友一起來購物,同時間兩個人聊聊「這件衣服你覺得怎樣?」「穿在我身上還要搭什麼才好看?」很有一群女生出去逛五分埔吱吱喳喳的那種趣味。注意,這一段在某方面來難其實已經超過Facebook Beacon當年想做的,Facebook不敢做,但這明明就有機會,於是成了另一種可做的獨立社群網站。
Facebook教我們第4種還可以做的獨立社群網站是「找人社群」。Facebook在找人的方面很強,可以為一個企業或個人帶來不一樣的使用者,不過,也是因為這個原因,我們愈來愈知道「找人」其實是有商機的,如果就專門設計一個更好玩的網站來找人呢?最近一周我開始在各場合提到「Twitter」,甚至提到Twitter雖然在台灣像當初Facebook一樣死沉沉的看起來像個不搭的外國產品,但它也有可能因為某一個未來的「開心農場」就變得像臉書一樣在三個月內在台灣這邊集結500萬用戶,不過,Twitter的周邊小遊戲本來就是智慧型的(要靠想像的),有可能是「找人」的小遊戲起來;儘管起來的可能性比Facebook小很多,但不能將這可能性完全摒除在外──
有趣的是,最近傳出有一間新獨立小遊戲剛剛準備開站,叫「Snoget」,它號稱是「下一代的社群小遊戲」,Snoget其實是觀察到,儘管許多Facebook小遊戲好玩的地方都是和目前的朋友互動,但有些Facebook小遊戲鼓勵網友多多去交新朋友的,也真的創造出另外一片天,它利用這點,自己開創獨立網站,希望跳出Facebook打出一片天,它想辦法讓你覺得「找人」是一件很好玩的事,整個遊戲設計的就是圍繞在讓你要找到「和你興趣相同」的人,也讓你從中得到樂趣(真的能這樣得到樂趣嗎?),然後這個遊戲當然就可以賣很貴的廣告給廣告主,這份縱跨全球的「興趣名單」也會是世上最貴的寶藏之一,此遊戲目前正在封測中,未來幾周,可能開始在北美推出。
以上就是目前還可以做的四種獨立社群網站,全都是從Facebook「學來的」,對於還想走一段冒險路的創業家,可以考慮一下下。這也讓我們發現,繼續在Facebook上打滾肯定是好事,每滾一天,我們對人與人之間的關係更瞭解,網路也終於打破5%,可探索那還有95%的令人流口水的新機會。
文章來自mr6
文章提供Baystars Design網頁設計公司
不過,在我們玩著Facebook的同時,也慢慢察覺到,還是有一些社群網站是可以做的。這都要謝謝Facebook告訴我們,它,不是萬能的!
這兩周收集了「四個方向」,拿出來給各位參考一下,還有哪些社群網站可以做,而且最近真的給人做出來了──
Facebook教我們第1種還可以做的獨立社群網站就是「藝人Fans社群」,目前Facebook所有粉絲專頁中,排行老大的是已故天王巨星麥可傑克森的粉絲專頁,它也是史上第一個打破1000萬粉絲數的粉絲專頁。大部份的人對「一千萬」這個數字會很敏感,因為在全球向來只要破千萬的就是一個正式可以賣掉且很了不起的社群網站。注意,全Facebook的小遊戲前十名也都是個個在1000萬以上的活躍用戶,但不同的是,小遊戲的用戶是被Facebook的API給掐住脖子,不可以走掉,但「粉絲專頁」卻沒有被Facebook那些東西給掐住。我們甚至可以來問一個問題:如果大家對麥可傑克森這麼喜愛、而且這麼希望再繼續成為他永遠的粉絲,而他又不存在的情況下,這些粉絲在Facebook上面可以幹什麼?答案是:可以幹的事,肯定不多!事實上,擁有1000萬名粉絲的實力,已經也可以不必仰賴Facebook了。它早就可以出來自己開一個自家的社群網站。
於是,果然,最近又開了一個麥可傑克森的社群,不能說是社群網站,但是想辦法再集結麥可社群的力量,要收集「1000萬顆小點點」,用這些小點點來畫出一張麥可的臉,你可以從這個Flash的介面Zoom In,看看你所貢獻的這個「點」是在Michael臉上的哪一塊地方。另外,可能是受到啟發,已故功夫巨星李小龍的女兒李香凝(Shannon Lee),在網路上也動作頻頻,她目前是李小龍公司的CEO,最近宣布「BruceLee.com」重整,在上面除了積極的再整理與授權李小龍相關的周邊無形資產與商品之外,也記得要再將李小龍的粉絲都找回來,在上面形成一個社群。請注意,這樣的已故巨星的社群肯定會比仍在世的明星還要龐大;在老大已經不在世上的情況下,線上只會傳得更火熱!(因為也只有線上可以去)。
接下來,Facebook教我們第2種還可以做的獨立社群網站就是「專業社群」--這種專業最好是某一個職業,大家認同的。不同於剛剛第一種是由Facebook告訴我們什麼已經在Facebook上面集結得很成功,第二種則是因為Facebook使用過後讓我們發現什麼集結得「很不成功」,比方說,你在Facebook上面收集一群很愛吃Pizza的人,這點Facebook很是拿手,「Pizza」粉絲專頁已經有四、五百萬人在上面,而且還好幾個,簡直瘋了。但大家認同自己的地方不應該只限於這些有趣的生活興趣,也包括自己的職業、專長……這部份在Facebook上面的表現,目前稍嫌弱一點,我將它視為機會,也會在Facebook創造這樣的社群,但是,如果有人跑到外面去自開新的「專業社群」,並不令人感到訝異──
其中,最近一篇報導指出,有一群人即將成立一個「專給科學家」的社群網站。這個網站還沒有開,所以沒有連結可看,不過它已經得到了1220萬美元(台幣5億元)的資金,也間接證明這是一個被看好的點子。它是一個從幾間大學的學者之間發起的計畫,打算建構一個史上最大的「科學家社群」。你說為什麼要做這個?因為這些科學家,在Facebook上面並不見得想承認他們是這麼狂熱的科學家,而且也不想隨時丟出這麼艱深的字眼或沒人看得懂的想法把他們在Facebook上面的朋友嚇跑,重要的是在Facebook實在沒有科學的「FU」,問題是現在許多有趣的科學研究,大家也發現,都是好幾間大學、好幾個團隊的學者「共同發現」的,所以他們想搞一個社群,讓大家「隨時隨地」可以合作開發某一科學領域,創造跨國、跨校、跨實驗室的合作。
然後,Facebook還教我們第3種還可以做的獨立社群網站是「購物社群」,這也是從Facebook所歸納出來的商機,社群小遊戲已經賺翻了,農場剛開放買東西第一天就賺了不知多少錢,Zynga靠賣虛寶輕鬆達成1億美元營收還不必像線上遊戲投資這麼多即時的主機與頻寬成本,而且Facebook早就推出「禮物店」,最近連已經落後的Friendster也剛剛推出自己的禮物店,那大家就「延伸去想」,如果買的不是虛擬寶物,而是讓朋友之間互相通風報信買一些「真正的物品」呢?不過,只要還在Facebook站內,那頂多可以叫做「社群購物」,想要再野心更大一點成為一個可以獨立成一片天的「購物社群」,那還得動點腦筋──
看,Facebook曾提出Beacon,在站外的四十幾個社群網站置放貼紙測量誰到哪裡逛街看哪個商品並同步發佈在朋友的首頁,後來因不敵隱私權爭議而收手,但大家持續看好這一塊,而且還知道Facebook已經「不敢做」這一塊。於是十月中大家在討論,有一個網站叫「Plurchase.com」開站,雖沒表明要做這個,但也差不多了。它是架在其他的購物網站之上,叫大家在這些購物網站購物時,順便讓朋友知道。有趣的是它的「技術面」,Plurchase強調的是不必下載什麼外掛或甚至桌面軟體,你只要到他們的網站Plurchase.com,透過他們提供的連結點進Amazon、Zappos這類的「線上百貨公司」,他們的網站會形同「代理伺服機」,你做的每一個動作都經過Plurchase,讓你看起來好像還是在逛那些百貨公司,其實你一舉一動都讓Plurchase知道。你說,Why你要這樣做?簡單!這樣一來,你可以找你的朋友一起來購物,同時間兩個人聊聊「這件衣服你覺得怎樣?」「穿在我身上還要搭什麼才好看?」很有一群女生出去逛五分埔吱吱喳喳的那種趣味。注意,這一段在某方面來難其實已經超過Facebook Beacon當年想做的,Facebook不敢做,但這明明就有機會,於是成了另一種可做的獨立社群網站。
Facebook教我們第4種還可以做的獨立社群網站是「找人社群」。Facebook在找人的方面很強,可以為一個企業或個人帶來不一樣的使用者,不過,也是因為這個原因,我們愈來愈知道「找人」其實是有商機的,如果就專門設計一個更好玩的網站來找人呢?最近一周我開始在各場合提到「Twitter」,甚至提到Twitter雖然在台灣像當初Facebook一樣死沉沉的看起來像個不搭的外國產品,但它也有可能因為某一個未來的「開心農場」就變得像臉書一樣在三個月內在台灣這邊集結500萬用戶,不過,Twitter的周邊小遊戲本來就是智慧型的(要靠想像的),有可能是「找人」的小遊戲起來;儘管起來的可能性比Facebook小很多,但不能將這可能性完全摒除在外──
有趣的是,最近傳出有一間新獨立小遊戲剛剛準備開站,叫「Snoget」,它號稱是「下一代的社群小遊戲」,Snoget其實是觀察到,儘管許多Facebook小遊戲好玩的地方都是和目前的朋友互動,但有些Facebook小遊戲鼓勵網友多多去交新朋友的,也真的創造出另外一片天,它利用這點,自己開創獨立網站,希望跳出Facebook打出一片天,它想辦法讓你覺得「找人」是一件很好玩的事,整個遊戲設計的就是圍繞在讓你要找到「和你興趣相同」的人,也讓你從中得到樂趣(真的能這樣得到樂趣嗎?),然後這個遊戲當然就可以賣很貴的廣告給廣告主,這份縱跨全球的「興趣名單」也會是世上最貴的寶藏之一,此遊戲目前正在封測中,未來幾周,可能開始在北美推出。
以上就是目前還可以做的四種獨立社群網站,全都是從Facebook「學來的」,對於還想走一段冒險路的創業家,可以考慮一下下。這也讓我們發現,繼續在Facebook上打滾肯定是好事,每滾一天,我們對人與人之間的關係更瞭解,網路也終於打破5%,可探索那還有95%的令人流口水的新機會。
文章來自mr6
文章提供Baystars Design網頁設計公司
SpacedEd.com推出「間隔教學法」,超簡單的線上教學新創意
這星期,美國的哈佛大學有一個很有趣的消息傳出,其實已經默默一陣子。這是一個叫「SpacedEd.com」的網站,中文就翻成「間隔教學」吧。所謂「Spaced Ed」就是,他們在思考,為何教育有時候好像不是這麼有效果?原來,「考試」可能是罪魁禍首。為什麼呢?同學們為了考試才努力念書,但也為了考試他們念書的模式變成「為了考試而念」,於是有些同學都是在考前一分鐘才念,這種叫做「大吸大吐」(binge and purge)的念書法,一天前一口氣「吸」一大堆知識,隔天考試期間又一口氣全部「吐」出來,科學家說不是很有效的。所以這幾年來,有幾位跨領域的哈佛的教授結合起來一起開發了一套「間隔教學」系統。
有趣的是,這套「間隔教學」系統,依然有「考試」的成份在裡面!
你說,這種「間隔教育」是否又只是一個稍微有點不同的方法?有趣的就在這點,因為「間隔教育」其實指出了一個非常驚人的簡單分解法──
它基本上就將一堆知識,「拆卸」成好多好多的小塊,每一小塊就視為一單位,然後,這些「單位」丟給學生的方式,是採用心理與教育學家之前已經做過科學實驗證明是很有用的「間隔教育法」。
這是什麼方法呢?一共有兩種--
第一種就叫做「間隔效應」(The Spacing Effect):當你將這份知識重覆的去學習、去吸收,隔一段時間就回來溫習,可以強化它在你腦裡所待的時間之外,還加強了它在腦裡的重要性。以後你想到什麼相關的,這些知識會馬上跳出來,非常棒。
第二種則叫做「考試效應」(The Testing Effect),如果將一些知識改以「考試」的方式提給讀者,這樣的話吸收的效果會大大的改善。也就是說,這種考試並不是最後來個期中考或期末考,而是隨時隨地都在考。這本課本已經不教死知識,而是不斷的在出題目在考你!考了你,你當然不一定答得出來,沒關係,後面的解答會告訴你答案,然後還會告訴你更多的知識……。
結合以上兩種方法,他們開發出「間隔教學」法--目前,他們一堂課大約是兩個月,被拆卸成20~40個「大問題」,如果你答錯,它大約會在一周後再次回來再教你一次。如果你答對,那三星期後它還會再回來考你一次,如果還是答對了,那麼這個問題永遠都不會出現。整套「間隔教學」就是不斷的重覆這些問題,直到所有的問題都被答對兩次以上為止。聽起來……是不是一個很簡單的教學法呢!
他們先把這系統用在醫學院同學身上,結果幾年下來,發現使用這系統念書的,他們的心中的知識竟然提升了高達50%!意思是說你現在原本心中只記得大學四年、研所兩年的某些知識,現在可以多了50%這麼多。這些知識拿到外面去用,都會是很好用的東西,至少,當初投資這麼多年也不致於浪費了。更有趣的是,在知識提升的同時,同學們還發現這招竟然非常的「有趣」,所以「間隔教育」不只提升了學習成果,還提升了學習熱忱。其他成功案例還包括對攝護腺癌的篩檢師的教育訓練,結果發現,用了「間隔教育」來訓練他們,後來他們上崗位,篩檢的錯誤率竟然成功的降了26%。目前在SpacedEd上面共有十幾個課程,大部份依然是醫學的課,但有一堂「音樂課」,那位吉他老師在每一個問題是用影片的方式,他在裡面彈奏吉他考學生。
這套知識是由一位Kerfoot教授所教的,他其實不是第一次參與線上教學的開法,他之前就做過線上教學,對四間醫學院的學生做過,沒想到效果奇差(就和許多線上教學一樣),他發現,這些知識,同學們覺得學得很辛苦(在線上有時就是沒感覺),然後又留不住在大腦裡。有趣的是,這位教授竟然沒有對線上學習感到失望、走人、回到傳統,他竟然打算好好的改造線上教學;學理出身的他非常注重科學研究,其實科學家早就已經幫我們做好這些實驗,找到類似這個「間隔效應」和「考試效應」的好方法,現在他只要想辦法將這兩個好方法放到線上教學裡,讓他們盡量的配合發揮,果然!初試啼聲,就創下了50%提升的佳績!
怎麼賺錢?目前的模式是,哈佛已經將這「間隔教育」的專利與knowhow都獨家授權給了一間叫「SpacedEd」的新創網路公司,這間公司的背景不明,但想必是有點關係的。然後,SpacedEd打算學App Store那樣的抽成模式,找來老師們開發這些課程,最後這些老師可以自己保留60~80%的營收!
如果這樣下去,我想許多傳統的老師都會過來!
看了這網站,我覺得非常讚。許多線上學習,不免都是「花拳繡腿」,不是說業者不認真,而是大家認真的地方都在我們自己主觀認定的什麼樣的線上教學才是好,所以大部份的都是在做「擬真」的動作,就是怎麼讓老師看起來很真實、甚至可以和學生互動、和其他同學互動等等,但這一派的做法一開始就為線上教學的層次給拉低了,再怎麼真實,最後還是不必真正的教室還真實,所以線上教學永遠得收取比實體還低的學費,希望以重覆販售來創造驚人的規模業績,但往往第一戰都打不敗實體的教室。於是,線上教學再挖的,就是跳下去,在每一個課程上面想辦法再微調,試圖從某一個族群或某一堂課程打出名氣,再慢慢擴大,但這件事本身又將規模縮小,沒有第一個成功,也不可能到第二個。
再者,線上的教學雖然很棒,但平台或工具商最缺的還是「內容」,內容必須由老師來提供,但老師們對於線上教學的興趣並非每位都如此熱中。這時候,SpacedEd提供了一個截然不同的方向──
SpacedEd是將一個極新穎的教學法,直接透過線上去實現(事實上也比較容易透過線上實現,實體的教室是做不到那兩招的),它賣的不是課程,而是教學技術,而這教學技術並不是線上技術(對老師的誘惑力低,許多老師自己根本不用電腦),而是一套特別的學習法。這個概念讓SpacedEd一開始就有機會讓大家「立刻聽懂他與眾不同之處」,且,老師們也比較想來試試看,不是找到更多學生,而是提升更高的學習效率(不是講講而已,是真的提升)。像現在SpacedEd證明了它可提升50%學習效率後,現在下一步,他已經在SpacedEd上面「廣招課程」,每一個課程都可以透過他們的設計,設計成「間隔教育」,這個網站可以提供非常非常「廣」的課程,且任何一個課程都會可以套上他獨有的學習方法,讓大家都很想看看,用在日文、法語、德文課會怎樣?用在金融課程又會怎樣?用在電腦學習呢?
創業家還可以想出怎樣的「新教學技術」,可能只是一位心理學家的研究報告,就有機會做成一整套線上學習系統。說不定有機會突破線上學習目前的瓶頸,之前大家所看好的那些熱情,全部都會投注在你一間公司身上!
文章來自mr6
文章提供baystars design網頁設計公司
有趣的是,這套「間隔教學」系統,依然有「考試」的成份在裡面!
你說,這種「間隔教育」是否又只是一個稍微有點不同的方法?有趣的就在這點,因為「間隔教育」其實指出了一個非常驚人的簡單分解法──
它基本上就將一堆知識,「拆卸」成好多好多的小塊,每一小塊就視為一單位,然後,這些「單位」丟給學生的方式,是採用心理與教育學家之前已經做過科學實驗證明是很有用的「間隔教育法」。
這是什麼方法呢?一共有兩種--
第一種就叫做「間隔效應」(The Spacing Effect):當你將這份知識重覆的去學習、去吸收,隔一段時間就回來溫習,可以強化它在你腦裡所待的時間之外,還加強了它在腦裡的重要性。以後你想到什麼相關的,這些知識會馬上跳出來,非常棒。
第二種則叫做「考試效應」(The Testing Effect),如果將一些知識改以「考試」的方式提給讀者,這樣的話吸收的效果會大大的改善。也就是說,這種考試並不是最後來個期中考或期末考,而是隨時隨地都在考。這本課本已經不教死知識,而是不斷的在出題目在考你!考了你,你當然不一定答得出來,沒關係,後面的解答會告訴你答案,然後還會告訴你更多的知識……。
結合以上兩種方法,他們開發出「間隔教學」法--目前,他們一堂課大約是兩個月,被拆卸成20~40個「大問題」,如果你答錯,它大約會在一周後再次回來再教你一次。如果你答對,那三星期後它還會再回來考你一次,如果還是答對了,那麼這個問題永遠都不會出現。整套「間隔教學」就是不斷的重覆這些問題,直到所有的問題都被答對兩次以上為止。聽起來……是不是一個很簡單的教學法呢!
他們先把這系統用在醫學院同學身上,結果幾年下來,發現使用這系統念書的,他們的心中的知識竟然提升了高達50%!意思是說你現在原本心中只記得大學四年、研所兩年的某些知識,現在可以多了50%這麼多。這些知識拿到外面去用,都會是很好用的東西,至少,當初投資這麼多年也不致於浪費了。更有趣的是,在知識提升的同時,同學們還發現這招竟然非常的「有趣」,所以「間隔教育」不只提升了學習成果,還提升了學習熱忱。其他成功案例還包括對攝護腺癌的篩檢師的教育訓練,結果發現,用了「間隔教育」來訓練他們,後來他們上崗位,篩檢的錯誤率竟然成功的降了26%。目前在SpacedEd上面共有十幾個課程,大部份依然是醫學的課,但有一堂「音樂課」,那位吉他老師在每一個問題是用影片的方式,他在裡面彈奏吉他考學生。
這套知識是由一位Kerfoot教授所教的,他其實不是第一次參與線上教學的開法,他之前就做過線上教學,對四間醫學院的學生做過,沒想到效果奇差(就和許多線上教學一樣),他發現,這些知識,同學們覺得學得很辛苦(在線上有時就是沒感覺),然後又留不住在大腦裡。有趣的是,這位教授竟然沒有對線上學習感到失望、走人、回到傳統,他竟然打算好好的改造線上教學;學理出身的他非常注重科學研究,其實科學家早就已經幫我們做好這些實驗,找到類似這個「間隔效應」和「考試效應」的好方法,現在他只要想辦法將這兩個好方法放到線上教學裡,讓他們盡量的配合發揮,果然!初試啼聲,就創下了50%提升的佳績!
怎麼賺錢?目前的模式是,哈佛已經將這「間隔教育」的專利與knowhow都獨家授權給了一間叫「SpacedEd」的新創網路公司,這間公司的背景不明,但想必是有點關係的。然後,SpacedEd打算學App Store那樣的抽成模式,找來老師們開發這些課程,最後這些老師可以自己保留60~80%的營收!
如果這樣下去,我想許多傳統的老師都會過來!
看了這網站,我覺得非常讚。許多線上學習,不免都是「花拳繡腿」,不是說業者不認真,而是大家認真的地方都在我們自己主觀認定的什麼樣的線上教學才是好,所以大部份的都是在做「擬真」的動作,就是怎麼讓老師看起來很真實、甚至可以和學生互動、和其他同學互動等等,但這一派的做法一開始就為線上教學的層次給拉低了,再怎麼真實,最後還是不必真正的教室還真實,所以線上教學永遠得收取比實體還低的學費,希望以重覆販售來創造驚人的規模業績,但往往第一戰都打不敗實體的教室。於是,線上教學再挖的,就是跳下去,在每一個課程上面想辦法再微調,試圖從某一個族群或某一堂課程打出名氣,再慢慢擴大,但這件事本身又將規模縮小,沒有第一個成功,也不可能到第二個。
再者,線上的教學雖然很棒,但平台或工具商最缺的還是「內容」,內容必須由老師來提供,但老師們對於線上教學的興趣並非每位都如此熱中。這時候,SpacedEd提供了一個截然不同的方向──
SpacedEd是將一個極新穎的教學法,直接透過線上去實現(事實上也比較容易透過線上實現,實體的教室是做不到那兩招的),它賣的不是課程,而是教學技術,而這教學技術並不是線上技術(對老師的誘惑力低,許多老師自己根本不用電腦),而是一套特別的學習法。這個概念讓SpacedEd一開始就有機會讓大家「立刻聽懂他與眾不同之處」,且,老師們也比較想來試試看,不是找到更多學生,而是提升更高的學習效率(不是講講而已,是真的提升)。像現在SpacedEd證明了它可提升50%學習效率後,現在下一步,他已經在SpacedEd上面「廣招課程」,每一個課程都可以透過他們的設計,設計成「間隔教育」,這個網站可以提供非常非常「廣」的課程,且任何一個課程都會可以套上他獨有的學習方法,讓大家都很想看看,用在日文、法語、德文課會怎樣?用在金融課程又會怎樣?用在電腦學習呢?
創業家還可以想出怎樣的「新教學技術」,可能只是一位心理學家的研究報告,就有機會做成一整套線上學習系統。說不定有機會突破線上學習目前的瓶頸,之前大家所看好的那些熱情,全部都會投注在你一間公司身上!
文章來自mr6
文章提供baystars design網頁設計公司
Facebook金流付款系統混仗打,其實有一批比農場更適合創業家做的「人付人商機」?
最近Facebook忽然傳出在右欄一直提醒要建議你加入一位已過世朋友,非常恐怖。之前Facebook曾經呼嚨過科技部落格TechCrunch說他們加了一個「傳真功能」,還真的騙到了……從很多地方可看到這間網路公司真和一般大公司不太一樣,它不斷發掘著人類從來沒發掘過的社群死角,而它操作的方式又彷彿很有人情味,有時又頗我行我素、不管顧客;雖然它已經這麼的大,卻又這麼……小的可愛。
這是Facebook好玩的地方,可想像,Facebook內部人員一邊做,也一邊在和自己的朋友測試著這些新功能。最近「社群金流」已經湧起,一大堆點子被提出來了,但,我們別忘記剛剛這件事情。
嗯,別忘記,Facebook的最大特色。
金流,讓大家都瘋狂了。這個月先後在台灣(先別談爭議)先是遊戲橘子推出GASH金流,提供點數卡儲值到開心農場花費;智冠也推出「MyCard」版,號稱是第一個做到可「線上付費」,可透過行動電話、市話進行帳單小額付款,或WebATM、信用卡等方式付款,甚至,支付寶要跨海過來了,PayPal即將於近期開始支援台幣,而全球的PayPal也將在下周在舊金山的年會正式宣布PayPal的API正式啟動,但為,以上這些金流,或許還不是網路創業家最有興趣的,因為Facebook本身,也要做金流平台。關於「Facebook Credits」的新聞大家已經知道,而這次,大家已經感受到Facebook的慎重,早在半年前就挑選了六間廠商一起測試,然後周邊的商品也一點一點的推出,先在它的「禮物店」(Gift Shop)加強,已經透過和Lala.com的合作,讓美國網友可以購買高達800萬首的音樂,還有Causes讓你可以認捐善款然後送虛擬禮物給朋友。不過,Facebook的三億會員,全都是正在進行中的活躍使用者,它不只是史上最大的會員網站,可能是史上最大的非政府會員系統!若將Facebook視為一個國家,這個叫「Facebook Credits」的傢伙就是它的貨幣,將會變成年輕人主要軟體服務、小遊戲付費工具。這,是大家所看到的「Facebook金流」的主要意義──Facebook「人多」,利用方便金流作微型付款,隨便10%付費加起來就能賺一大把錢。
不過,我認為,「人多」的商機,若一般創業家拚命想這塊,太可惜--「人多」的商機,應該要交給開心農場的下一代,那一群最強的工程師,他們會努力的去開發下一代更好玩的小遊戲;這些小遊戲會用各種方法讓你想辦法去買他們的虛擬寶物、服務。注意,這個錢,是付給農場,農場再給你東西。
但,如果一般的小型網路創業家,也想要做這種商機、那麼立刻就面臨了極嚴峻的挑戰:第一、資金比較少,因為投資Facebook小遊戲尚不盛行,因為目前數倍退場案例並不多,大多廠商是自己組隊自己賺翻了,空有一個點子是無路可走的。第二、團隊不易組成,若我是技術人員我寧可自己開發自己的,除非你很有錢或你是遊戲橘子。第三、競爭異常激烈,現在所有軟體商、平台商、電子商務、網站、線上遊戲……通通都來開發Facebook小遊戲,連一般網站都覺得和這些大廠「打不過」了,更何況是小小的創業家!
那,創業家有什麼機會?
應該改為這樣問:Facebook開始提供方便的金流,假設每個網友到了2010年平均每位都有1000個credits(一點等於0.1美元)儲存,我們要怎麼賺到他們的錢?
答案是:記得,Facebook是「朋友連朋友」的平台!
有一個小創業家可做的機會,就在「人付人」。若我們不能做一座樂園來讓它們呼朋引伴過來來「付錢給樂園」,那,我們若在這些朋友之間,幫他們「付錢給朋友」?這種事,不必開樂園的資本家,說不定街頭巷尾的三姑六婆就可以做;以前三姑六婆做免費的,現在有了Facebook點數,這,變成了一個像黴菌伸入每個朋友生活的新商機!
如果你有創意,說不定可以用很小的一個小程式,就讓人開始付錢給朋友!創業家也可以從中抽成!
有趣的是,「人付人」的商機我們不必想太多,以下三點,是已經經過很多網站試過卻沒有成功的,現在Facebook的環境已然不同,或許,新一代創業家有機會試試看──
一、「朋友互相給小錢」的商機終於有機會實現:一路下來,許多創業點子曾建立在「朋友互相給錢」的夢想下,包括PayPal最初期的夢想,只要你有一個email住址,我就可以付你錢。這次Facebook Credits也不斷宣傳一個重要案例,朋友給錢給他的朋友,獎勵他在Facebook塗鴉牆的發言「寫得很好」。天啊,有的人可能會對這種點子捏把冷汗,這玩意已經喊很久,試過好多站,從來沒有實現過,但由此也可見Facebook的野心。你說,為何一個朋友有機會給你錢?其實,「朋友互相給錢」的機會還不少,大到我們一起團購(我指的是比較不正式的朋友間的小團購),或小到「我欠你一杯啤酒」這類。這些點子,以前都做不起來,不過,以後若有一大堆這種三姑六婆的介紹,一大堆朋友開始付錢給你,這會好像每個人都有一張「信用卡」,你沒有,付帳的時候拿不出來,別人會說你是不是住在荒山野地,還是說你信用有問題辦不出來──大家都會有、大家都會用,它也重新的再改變熟人與熟人之間的金錢習慣。
二、「微型小費」終於有機會實現:Web 2.0時代,真正創造出好多好多的瘋狂的重度分享網友的,其實就是「留言」或「推文數」或「星星數」,這些都是免費的東西,一開始你一定是隨便寫寫,寫到有一則留言,會悄然心喜;有三則留言,開始沉迷……然後就一直分享下去了。但這個「獎品」只限於某些人,現在,多了一個更多人喜歡的獎品:「$$$」(錢)。之前Web 2.0許多點子也都是讓網友付「小費」給其他網友,試圖建立一個讓網友發揮的平台,集結了夠有趣的內容,吸引其他網友加入,無論是自己想拿錢,或是想藉給別人錢來交朋友,總之,都是一點點錢而已,對於寫作者、創意者、公益慈善者……在網路上可以很快感受到網友的另一種的「溫暖」,也促使這類的分享者更多,甚至有人開始以這樣的小費系統維持生計!
三、真正的「C2C」終於有機會再次出現:這是eBay的最初點子,做一個完完全全的讓一般人來賣東西的大平台,但做到現在,你是一般人也難賣,大多是很正經八百的賣家在上面了,所謂的C2C,只是「小B」到「C」,但現在C2C可能可以回來,就靠一些很有創意的小遊戲。這一點,順便帶起曾經在海內外都很受注意的「交換網站」,純粹的交換顯然並不合一般人的需求,如果是幾乎到超便宜的交換,譬如有人開一間「10元平台」,在上面就是可以將你身邊不要的東西,一律以十元「售出」,無論是舊書還是舊杯子或舊沙發都是,這樣其實是在「轉讓舊物」,其實讓物主也可以得到一些回饋,換起來更過癮,買起來也可能真的買到什麼好東西。
不過,昨天與記者朋友提到,Web 1.0的技術本位,可能再次回籠。我的意思是,Web 2.0時代,大家不必懂技術,只要有創意,寫作的就開部落格、錄影片的放到YouTube、有消息的就貼文、有意見的就四處留言……但,現在的平台相當繁多,競爭更激烈,用技術使用各種API來運用會是其中最容易之道。後來回家想了想,這句話講得不太對,因為這些平台大量出來,厲害的可以搭著這些不一樣的來搭配,甚至,抓對哪一個平台,搭著它「趁勢起飛」,至少,這些平台也會推出一些免費的工具要和這些創業家一起成長,再加上Facebook金流,大家都可以賺到錢。
百花齊放的另一面,就是「戰國時代」,這麼多平台、這麼多金流機制……這麼多趨勢、這麼多未來,唯一知道的方式,還是「自己品嘗」。創業家近一年的沉潛也休息夠了,金流即將開打,可確定的是,這絕不是一個坐壁上觀的時代!
文章來自mr6
文章提供Baystars Design網頁設計公司
這是Facebook好玩的地方,可想像,Facebook內部人員一邊做,也一邊在和自己的朋友測試著這些新功能。最近「社群金流」已經湧起,一大堆點子被提出來了,但,我們別忘記剛剛這件事情。
嗯,別忘記,Facebook的最大特色。
金流,讓大家都瘋狂了。這個月先後在台灣(先別談爭議)先是遊戲橘子推出GASH金流,提供點數卡儲值到開心農場花費;智冠也推出「MyCard」版,號稱是第一個做到可「線上付費」,可透過行動電話、市話進行帳單小額付款,或WebATM、信用卡等方式付款,甚至,支付寶要跨海過來了,PayPal即將於近期開始支援台幣,而全球的PayPal也將在下周在舊金山的年會正式宣布PayPal的API正式啟動,但為,以上這些金流,或許還不是網路創業家最有興趣的,因為Facebook本身,也要做金流平台。關於「Facebook Credits」的新聞大家已經知道,而這次,大家已經感受到Facebook的慎重,早在半年前就挑選了六間廠商一起測試,然後周邊的商品也一點一點的推出,先在它的「禮物店」(Gift Shop)加強,已經透過和Lala.com的合作,讓美國網友可以購買高達800萬首的音樂,還有Causes讓你可以認捐善款然後送虛擬禮物給朋友。不過,Facebook的三億會員,全都是正在進行中的活躍使用者,它不只是史上最大的會員網站,可能是史上最大的非政府會員系統!若將Facebook視為一個國家,這個叫「Facebook Credits」的傢伙就是它的貨幣,將會變成年輕人主要軟體服務、小遊戲付費工具。這,是大家所看到的「Facebook金流」的主要意義──Facebook「人多」,利用方便金流作微型付款,隨便10%付費加起來就能賺一大把錢。
不過,我認為,「人多」的商機,若一般創業家拚命想這塊,太可惜--「人多」的商機,應該要交給開心農場的下一代,那一群最強的工程師,他們會努力的去開發下一代更好玩的小遊戲;這些小遊戲會用各種方法讓你想辦法去買他們的虛擬寶物、服務。注意,這個錢,是付給農場,農場再給你東西。
但,如果一般的小型網路創業家,也想要做這種商機、那麼立刻就面臨了極嚴峻的挑戰:第一、資金比較少,因為投資Facebook小遊戲尚不盛行,因為目前數倍退場案例並不多,大多廠商是自己組隊自己賺翻了,空有一個點子是無路可走的。第二、團隊不易組成,若我是技術人員我寧可自己開發自己的,除非你很有錢或你是遊戲橘子。第三、競爭異常激烈,現在所有軟體商、平台商、電子商務、網站、線上遊戲……通通都來開發Facebook小遊戲,連一般網站都覺得和這些大廠「打不過」了,更何況是小小的創業家!
那,創業家有什麼機會?
應該改為這樣問:Facebook開始提供方便的金流,假設每個網友到了2010年平均每位都有1000個credits(一點等於0.1美元)儲存,我們要怎麼賺到他們的錢?
答案是:記得,Facebook是「朋友連朋友」的平台!
有一個小創業家可做的機會,就在「人付人」。若我們不能做一座樂園來讓它們呼朋引伴過來來「付錢給樂園」,那,我們若在這些朋友之間,幫他們「付錢給朋友」?這種事,不必開樂園的資本家,說不定街頭巷尾的三姑六婆就可以做;以前三姑六婆做免費的,現在有了Facebook點數,這,變成了一個像黴菌伸入每個朋友生活的新商機!
如果你有創意,說不定可以用很小的一個小程式,就讓人開始付錢給朋友!創業家也可以從中抽成!
有趣的是,「人付人」的商機我們不必想太多,以下三點,是已經經過很多網站試過卻沒有成功的,現在Facebook的環境已然不同,或許,新一代創業家有機會試試看──
一、「朋友互相給小錢」的商機終於有機會實現:一路下來,許多創業點子曾建立在「朋友互相給錢」的夢想下,包括PayPal最初期的夢想,只要你有一個email住址,我就可以付你錢。這次Facebook Credits也不斷宣傳一個重要案例,朋友給錢給他的朋友,獎勵他在Facebook塗鴉牆的發言「寫得很好」。天啊,有的人可能會對這種點子捏把冷汗,這玩意已經喊很久,試過好多站,從來沒有實現過,但由此也可見Facebook的野心。你說,為何一個朋友有機會給你錢?其實,「朋友互相給錢」的機會還不少,大到我們一起團購(我指的是比較不正式的朋友間的小團購),或小到「我欠你一杯啤酒」這類。這些點子,以前都做不起來,不過,以後若有一大堆這種三姑六婆的介紹,一大堆朋友開始付錢給你,這會好像每個人都有一張「信用卡」,你沒有,付帳的時候拿不出來,別人會說你是不是住在荒山野地,還是說你信用有問題辦不出來──大家都會有、大家都會用,它也重新的再改變熟人與熟人之間的金錢習慣。
二、「微型小費」終於有機會實現:Web 2.0時代,真正創造出好多好多的瘋狂的重度分享網友的,其實就是「留言」或「推文數」或「星星數」,這些都是免費的東西,一開始你一定是隨便寫寫,寫到有一則留言,會悄然心喜;有三則留言,開始沉迷……然後就一直分享下去了。但這個「獎品」只限於某些人,現在,多了一個更多人喜歡的獎品:「$$$」(錢)。之前Web 2.0許多點子也都是讓網友付「小費」給其他網友,試圖建立一個讓網友發揮的平台,集結了夠有趣的內容,吸引其他網友加入,無論是自己想拿錢,或是想藉給別人錢來交朋友,總之,都是一點點錢而已,對於寫作者、創意者、公益慈善者……在網路上可以很快感受到網友的另一種的「溫暖」,也促使這類的分享者更多,甚至有人開始以這樣的小費系統維持生計!
三、真正的「C2C」終於有機會再次出現:這是eBay的最初點子,做一個完完全全的讓一般人來賣東西的大平台,但做到現在,你是一般人也難賣,大多是很正經八百的賣家在上面了,所謂的C2C,只是「小B」到「C」,但現在C2C可能可以回來,就靠一些很有創意的小遊戲。這一點,順便帶起曾經在海內外都很受注意的「交換網站」,純粹的交換顯然並不合一般人的需求,如果是幾乎到超便宜的交換,譬如有人開一間「10元平台」,在上面就是可以將你身邊不要的東西,一律以十元「售出」,無論是舊書還是舊杯子或舊沙發都是,這樣其實是在「轉讓舊物」,其實讓物主也可以得到一些回饋,換起來更過癮,買起來也可能真的買到什麼好東西。
不過,昨天與記者朋友提到,Web 1.0的技術本位,可能再次回籠。我的意思是,Web 2.0時代,大家不必懂技術,只要有創意,寫作的就開部落格、錄影片的放到YouTube、有消息的就貼文、有意見的就四處留言……但,現在的平台相當繁多,競爭更激烈,用技術使用各種API來運用會是其中最容易之道。後來回家想了想,這句話講得不太對,因為這些平台大量出來,厲害的可以搭著這些不一樣的來搭配,甚至,抓對哪一個平台,搭著它「趁勢起飛」,至少,這些平台也會推出一些免費的工具要和這些創業家一起成長,再加上Facebook金流,大家都可以賺到錢。
百花齊放的另一面,就是「戰國時代」,這麼多平台、這麼多金流機制……這麼多趨勢、這麼多未來,唯一知道的方式,還是「自己品嘗」。創業家近一年的沉潛也休息夠了,金流即將開打,可確定的是,這絕不是一個坐壁上觀的時代!
文章來自mr6
文章提供Baystars Design網頁設計公司
訂閱:
文章 (Atom)

