2009年8月31日 星期一

Photoshop的圖片縮放技巧







因為看見網友寫的FW(Fireworks )的縮放技巧,考慮到大家肯定用PS的情況多些,所以寫了一個PS版本的縮放圖片技巧。




01、首先打開PS CS3 擴展版本.其他的版本也可以,不過推薦PS CS3.後面我會說下CS3的好處。操作是:圖像-圖像大小




02、彈出的圖像對話框中,會出現"重定圖像像素"的下拉列表,打開他,可以看見很多東東,這些就是圖片放大是補充像素,或者圖片縮小去掉像素的算法。以前的PS版本中這裡看起來非常難懂,現在每種方法後面都有了中文註解他的用途,這就是CS3的好處。分別舉例來分析下這幾種縮放圖片的算法




03、卡通圖片可以使用臨近的算法縱橫增值法是PS預設的算法,可是它是一種中等質量高壓縮的算法,不推薦使用。最普遍時候的算法就是環迴增值法,它適合與豐富漸變色等各種複雜顏色的圖片。它還有2個更棒的兄弟是環迴增值法-較平滑適合放大圖片、環迴增值法-較銳利適合縮小圖片,一般都愛使用這種格式,銳化度得到一定提高,且圖片壓縮比小,質量高。


文章來自WOWBOX
文章提供BAYSTARS DESIGN網頁設計公司




50款優秀的免費相冊(圖片畫廊)程式收集

譯自:http://net.tutsplus.com原文:50款優秀的免費相冊(圖片畫廊)程序收集
這裡收集了50個非常棒的免費相冊(圖片畫廊)程序,你可以用來直接搭建自己的網絡相冊。這些相冊基於PHP、jQuery、MooTools、Flash以及Ruby on Rails,也有純CSS。

1. Gallery 2
Gallery 2 可能擁有最大的社區,它是網上使用最多的相冊程序之一。
2. Zenphoto
Zenphoto 自我定位為“最簡單、最有用的相冊程序”。基於PHP.
3. Minishowcase
Minishowcase 是一個簡單的小巧的php/javascript 相冊。
4. TripTracker
TripTracker 是一個小的JavaScript相冊,擁有圖片瀏覽和幻燈播放功能。
5. Dynamic Drive CSS Image Gallery
脫離JavaScript, Dynamic Drive CSS相冊完全使用CSS實現。
6. Ajax Photo Gallery
一款免費的基於Ajax的相冊,可以通過一個XML文件展示來自於Picasa的圖片。
7. SimpleViewer
一款免費的基於flash的相冊,同時提供一個可選的高級版本,提供更多可選及個性化功能。
8. Jalbum
Jalbum是一個混合的在線/離線軟件,可用來下載到你的電腦上,並上傳照片到你的位於jalbum.net的相冊空間。
9. Coppermine
類似Gallery 2,Coppermine 是另一款”古老的” PHP 圖片相冊,已經存在很多年了。
10. Plogger
Plogger 是一款PHP 相冊程序,它有一些有用的功能,比如,內置的Ajax圖片編輯,Zip打包上傳圖片,以及允許創建你自己的模板的能力。
11. CSS Play
一個圓滑的多頁相冊,完全由CSS創建。
12. Polaroid Gallery
Polariod Gallery 是一款有趣的Flash程序,可以將你的照片(從XML 文件或Flickr RSS feed) 整理成“寶麗來”。
13. dfGallery
dfGallery 是一款漂亮的免費flash相冊,有可定制模板和一個管理後台部分,基於PHP框架CodeIgniter.
14. (E)2 Photo Gallery
一個使用MooTools創建的優秀的JavaScript相冊。
15. AutoViewer
AutoViewer 將圖片整理到一個Flash相冊中。
16. Smooth Gallery
用MooTools創建的一個小巧的相冊。
17. Satellite
一個相冊程序,允許用戶從他們的Flickr帳號創建可定制的相冊。
18. Hoverbox
Hoverbox 是一個簡單的,輕量級的純CSS相冊。
19. Flash Gallery
就像它的名字表示的那樣,Flash Gallery 是一個簡單的基於XML 和Flash 的相冊,而且比較容易定制。
20. HighSlide JS
HighSlide 允許你使用一些簡單的JS效果很方便的縮放圖片。
21. Pixelpost
Pixelpost在相冊程序上是一個轉折,它可以算是一款很不錯的圖片博客,開源、快速、多語言支持。
22. Script and Style Auto-Generated Photo Gallery
一款漂亮的程序,將一個圖片目錄創建為一個相冊。用PHP 和JavaScript創建。
23. Postcard Viewer
一個Flash程序,獲取圖片,將他們放進明信片中,並重新組合如一個相冊。
24. Andrew Berg’s Flash Photo Browser
一個簡單的Flash動畫圖片瀏覽腳本。簡單但很好玩。
25. Flickr Photo Album for Wordpress
一個wordpress插件,調用Flickr圖片冊和wordpress裡的相冊。
26. Galleria
Galleria 是一個基於jQuery的輕量級相冊。
27. Lightview
一個用來搭建簡單圖片和多媒體畫廊的簡潔的、輕量的方案。
28. Fancy Zoom
Fancy Zoom 是一個JS腳本,允許不用重新加載圖片就能縮放圖片。很酷的效果,有些像LightBox和ThickBox。
29. Imagevue
一個很棒的Flash相冊,提供圖片相冊、幻燈展示和一個後台管理界面。
30. jpGalScroll Photo Gallery
一個使用jQuery創建的簡單的相冊,提供滾動和分頁功能。
31. nextgen gallery
nextgen gallery 是一個強大的wordpress圖片相冊插件,基於jQuery創建,很好很強大,是最著名的wordpress相冊插件之一。
32. Singapore
被稱為“最簡單的大型相冊”,Singapore 是一個輕量、功能強大的相冊。由PHP創建。
33. jQuery Cycle
一個jQuery 插件,讓你可以使用多種不同的效果來循環展示(相冊中的)照片。
34. Imagin
一個flash 圖片相冊,能將照片組織到相冊和子相冊。
35. Phormer
PHP相冊程序,不需要MySQL數據庫,三分鐘安裝。
36. Gullery
Gullery 是一個用Ruby on Rails創建的簡單的相冊。非常適合個人作品集或小型畫廊。
37. 如果使用CakePHP和Flickr創建一個相冊
一個很有意思的教程,講述如果使用PHP框架CakePHP和Flickr創建一個基於網站的相冊。
38. filebrowser
一個小型的PHP 應用,允許你縮略圖片以用於網站上。Lussumo開發。
39. FAlbum
一個基於Wordpress的相冊程序,可以顯示Flickr上的照片和照片集。
40. Slimbox 2
一個小巧的、兼容標準、完全可定制的LightBox照片查看程序,基於jQuery創建。
41. Animated JavaScript Slideshow
一個幻燈相冊腳本,基於JavaScript創建,不大於5kb。
42. iPhotoToGallery
一個iPhoto 插件,可以讓發佈照片到Gallery2變得非常容易。
43. FrogJS Gallery
一個簡單的、不太顯眼的相冊程序,基於LightBox創建,但是通過不同的方式展示照片。
44. 用MooTools創建一個非常棒的相冊
Jared Rhizor在Nettuts發佈的有一個很棒的關於如果使用MooTools創建一個簡單的相冊的教程。
45. Django-based photo gallery tutorial
簡單的介紹如果使用Python框架Django創建一個相冊的教程。
46. Zen Gallery
優美的Flash相冊腳本和工具,可以用來將圖片放到你的網站上去。
47. folderblog
一個免費的,輕量級的PHP程序,在相冊中顯示一個文件夾中的圖片
48. Duh Gallery
另一個簡單的Wordpress 相冊插件。
49. Original Photo Gallery
一組提供客戶端腳本的程序,用來按比例縮放圖片,並將圖片發佈到相冊表單。
50. 使用Flash8搭建動態相冊
指導中級Flash用戶創建一個動態相冊,通過XML加載。


文章來自WOWBOX
文章提供BAYSTARS DESIGN網頁設計公司

25個漂亮而有創意的圖片網站設計

原文:25漂亮而有創意的圖片網站設計譯自:pelfusion
不知道你是否訪問過一些圖片/相冊網站?不知道它們是否令你印象深刻?我們之前曾收集過很多灰常出色的免費相冊程序,他們都可以用來創建一些很酷的網絡相冊。而本文要展示的是一批更加出色的圖片網站,他們都很漂亮,很有創意,相信每個人看完之後,都能感受到很大的視覺衝擊——它們真的太酷了!
1. CirilJazbec
2. Anders Bergh
3. David Lindsey Wade
4. Lee Twondrow
5. Moofe
6. Saso Kos
7. Gabriel Vinci
8. Emmanuel Rouzic
9. Cake Factory
10. Filippa Smedhagen Sund
11. Simon Rasmussen
12. Uli Heckmann
13. Let’s Take Pictures
14. Ego Foto
15. Safandula
16. Brook Pifer
17. Shu Akashi
18. Karin Partin
19. Alessio Pizzicannella
20. Amy Danka
21. Andreescu Gaivoronski
22. Albrecht Gerlach
23. Capsule Creative
24. Sonja Mueller
25. Frieke

文章來自WOWBOX
文章提供BAYSTARS DESIGN網頁設計公司

2009年8月30日 星期日

征服高級CSS選擇器

原文:征服高級CSS選擇器譯自:Taming Advanced CSS SelectorsCSS是對網頁設計師可用的最強大的工具之一。使用它我們可以在幾分鐘內改變一個網站的界面,而不用改變頁面的標籤。但是儘管事實上,我們每個人也都意識到了它是有用的,CSS 選擇器遠未發揮它們的潛力,有的時候我們還趨向於使用過多的和無用的class、id、div、span等把我們的HTML搞的很凌亂。避免讓這些「瘟疫」在你的標籤中傳播並保持其簡潔和語義化的最佳方式,就是使用更複雜的CSS選擇器,它們可以定位於指定的元素而不用使用額外的class或id,而且通過這種方式也可以讓我們的代碼和樣式更加靈活。CSS的優先級在深入研究高級CSS選擇器領域之前,理解CSS優先級是如何工作的是很重要的,這樣我們就知道如何適當的使用我們的選擇器並避免浪費大量的時間來調試一些只要我們注意到優先級的話就很容易被搞定的問題。當我們寫CSS的時候我們必須注意有些選擇器在級聯(cascade)上會高於其它選擇器,我們寫在最後面的選擇器將不一定會覆蓋前面我們寫在同一個元素的樣式。那麼你如何計算指定選擇器的優先級?如果你考慮到將優先級表示為用逗號隔開的四個數字就會相當簡單,比如:1, 1, 1, 1 或0, 2, 0, 11.第一個數字(a)通常就是0,除非在標籤上使用style屬性;2.第二個數字(b)是該選擇器上的id的數量的總和;3.第三個數字(c)是用在該選擇器上的其它屬性選擇器和偽類的總和。這裡包括class (.example) 和屬性選擇器(比如 li[id=red]);4.第四個數字(d)計算元素(就像table、p、div等等)和偽元素(就像:first-line等);5.通用選擇器(*)是0優先級;6.如果兩個選擇器有同樣的優先級,在樣式表中後面的那個起作用。讓我們看幾個例子,這樣或許比較容易理解些:


程序代碼
‧#sidebar h2 — 0, 1, 0, 1‧h2.title — 0, 0, 1, 1‧h2 + p — 0, 0, 0, 2‧#sidebar p:first-line — 0, 1, 0, 2在下面的例子中,第一個將會起作用,因為它比第二個優先級高:


程序代碼
‧#sidebar p#first { color: red; } — 0, 2, 0, 1‧#sidebar p:first-line { color: blue; } — 0, 1, 0, 2至少基本理解優先級是如何工作的是很重要的,但是一些工具比如Firebug,在我們審查指定元素的時候,按照選擇器的優先級列出所有的css選擇器對讓我們知道在指定元素上哪個選擇器是有效的是很有用的。讓你非常容易的看到那個選擇器作用於一個元素上了。有用的文章:‧CSS Specificity: Things You Should Know[url=http://meyerweb.com/eric/css/link-specificity.html]‧Link Specificity¯MeyerWeb[url=http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html]‧CSS: Specificity Wars[url=http://www.w3.org/TR/CSS2/cascade.html]‧Assigning property values, Cascading, and Inheritance—W3C1. 屬性選擇器屬性選擇器(Attribute selector)讓你可以基於屬性來定位一個元素。你可以只指定該元素的某個屬性,這樣所有使用該屬性——而不管它的值——的這個元素都將被定位,也可以更加明確並定位在這些屬性上使用特定值的元素 —— 這就是屬性選擇器展示它們的威力的地方。有6個不同類型的屬性選擇器:‧[att=value]該屬性有指定的確切的值。‧[att~=value]該屬性的值必須是一系列用空格隔開的多個值,(比如,class=」title featured home」),而且這些值中的一個必須是指定的值」value」。‧[att=value]屬性的值就是「value」或者以「value」開始並立即跟上一個「-」字符,也就是「value-」。(比如lang=」zh-cn」)‧[att^=value]該屬性的值以指定值開始。‧[att$=value]該屬性的值包含指定的值(而無論其位置)。‧[att*=value]該屬性的值以指定的值結束比如,如果你想要改變你的博客上的日誌部分元素的背景顏色,你可以使用一個指定每一個class屬性值以「post-」開始的div的屬性選擇器:


程序代碼
div[class="post"] { background-color: #333; }該語句將匹配所有class屬性包含」post」並帶」-」字符的div元素。屬性選擇器的另一個很有用的用處是定位不同類型的input元素。比如,如果你想讓你的文本輸入框使用一個特定的寬度,你可以使用下面的屬性選擇器:


程序代碼
input[type="text"] { width: 200px; }這將匹配所有type屬性值等於「text」的input元素。現在我們可能像為網站上不同的文件類型的鏈接添加不同的圖標,這樣你的網站的訪客就會知道他們將獲得一個圖片、或者PDF文件、或者是一個word文檔等。這就可以使用屬性選擇器來實現:


程序代碼
a[href*=".jpg"] { background: url(jpeg.gif) no-repeat left 50%; padding: 2px 0 2px 20px; }a[href*=".pdf"] { background: url(pdf.gif) no-repeat left 50%; padding: 2px 0 2px 20px; }a[href*=".doc"] { background: url(word.gif) no-repeat left 50%; padding: 2px 0 2px 20px; }在此例中,我們使用了一個定位所有的鏈接(a)的href屬性分別以.jpg,.pdf或.doc結束(*)的屬性選擇器。詳細可查看前端觀察之前的一篇文章《使用CSS選擇器創建個性化鏈接樣式》瀏覽器支持除了Internet Explorer 6,所有的主流瀏覽器都支持屬性選擇器。這意味著,如果你在你的網站上使用了屬性選擇器,你應該確保IE6用戶將仍能獲得一個可用的網站。比如我們的第三個例子,為鏈接添加圖標可以給你的網站帶來另一個級別的可用性,但是如果這些鏈接不顯示任何圖標,該網站仍然還是可用的。2. 子選擇器子選擇器用符號「>」表示。它允許你定位某個元素的第一級子元素。比如,如果你想匹配所有的作為你的網站側欄的div的子元素的h2元素,而不是可能是在div元素內的所有h2元素,也不是div的孫元素(或者更低級別的),你就可以使用下面的選擇器:


程序代碼
div#sidebar > h2 { font-size: 20px; }你當然也可以同時使用子元素和後代元素。比如,如果你想定位只有在body元素的子級div元素內的blockquote元素(比如你想匹配主要的div內的blockquotes,而不是其它部分的:


程序代碼
body > div > div blockquote { margin-left: 30px; }瀏覽器支持和屬性選擇器一樣,子選擇器不被IE6支持。如果你通過這種方式要實現的效果和網站的可用性或總體設計息息相關,你可以考慮使用一個class,或者使用只針對IE6的樣式,但是這將有悖使用子選擇器的目的。3. 兄弟組合有兩類兄弟組合:臨近兄弟組合和普通兄弟組合臨近兄弟組合該選擇器使用加號「+」來鏈接前後兩個選擇器。選擇器中的元素有同一個父親,而且第二個必須緊緊的跟著第一個。臨近兄弟組合可以灰常有用,比如,在處理文字的時候。比如我們想對段落後面的h2標題添加一個頂間距「margin-top」(當然或許你無需為h1標籤後面的h2添加,或者它可能是頁面的第一個元素):

程序代碼
p + h2 { margin-top: 10px; }你甚至可以更加具體,你想定位某個特定的div後面的h2:

程序代碼
div.post p + h2 { margin-top: 10px; }或者你可以搞得更加複雜:頁面的第一個段落的第一行字母顯示為小寫字母。


程序代碼
.post h1 + p:first-line { font-variant: small-caps; }因為可能大部分日誌/文章的第一個段落都會緊緊的在H1標籤的後面。你可以在你的選擇器中借助於h1標籤。普通兄弟組合普通兄弟組合和臨近兄弟組合的工作原理很像,不同的是第二個選擇其無需緊緊跟隨第一個。如果你需要定位所有的某個特定的div裡面並且跟在h1標籤後面的p標籤的話(你可能想要這些p標籤比擬的日誌的標題前面的文字大些),你就可以使用這個選擇器:


程序代碼
.post h1 ~ p { font-size: 13px; }註:這兩個選擇器太像了,所有不是很好理解,可以試一試下面的這個例子:CSS:


程序代碼
p + h2{color:red; } p ~ h2{font-weight:700; }HTML:
程序代碼

咳咳,內容。

標題1

標題2

看看第二個h2的顏色就可以理解了吧?臨近兄弟組合只能匹配第一個選擇器後面的第一個兄弟選擇其,普通兄弟組合則能匹配所有。註:該部分英文原文沒有,是神飛翻譯時自己添加。瀏覽器支持Internet Explorer 6依然不能理解兄弟選擇器,但是,另一種情況,如果你的用戶中只有一小部分是IE6用戶,而且網站的結構不會被破壞或者受到嚴重影響,這是實現很多很酷的效果而無需在你的HTML代碼中添加無用的class或id。4. 偽類動態偽類之所以被稱為動態偽類是因為它們並不存在於HTML中——而是只有當用戶和網站交互的時候才會呈現。有兩類動態偽類:鏈接 和用戶行為。鏈接就是:link 和:visited,而用戶行為包括:hover、:active 和:focus。在本文中提到的css選擇器中,這幾個應該是最常用到的。:link偽類用於鏈接尚未被用戶訪問的時候,而:visited 偽類用於用戶訪問過的鏈接,也就是說它們是相反的。:hover偽類用於用戶移動他們的鼠標在元素上,而尚未觸發或點擊它的時候。:active偽類應用於用戶點擊元素的情況。最後,:focus偽類用於元素成為焦點的時候——最常用於表單元素。你可以在你的樣式表中使用多種用戶行為動態偽類,這樣你就可以,比如,根據用戶的鼠標只是滑過或懸停的時候,為一個輸入框定義不同的背景色:


程序代碼
input:focus { background: #D2D2D2; border: 1px solid #5E5E5E; }input:focus:hover { background: #C7C7C7; }瀏覽器兼容性動態偽類被所有的現代瀏覽器支持,甚至IE6,但是請注意,對於IE系列瀏覽器來說,IE6只允許:hover 偽類應用於鏈接元素(a標籤)而且只有IE8接受:active狀態。:first-child:first-child偽類允許你定位某個元素第一個子元素。比如,如果你想給你的無須列表的第一個li添加一個margin-top,你就可以這樣寫:


程序代碼
ul > li:first-child { margin-top: 10px; }讓我們來看一看另一個例子:比如你想讓你的博客的側欄的H2標籤都有個頂部邊距,以將標題和它們前面的內容區分開來,但是第一個h2不需要,你就可以使用下面的代碼:

程序代碼
#sidebar > h2 { margin-top: 10px; }#sidebar > h2:first-child { margin-top: 0; }瀏覽器兼容性IE6 不支持 :first-child 偽類。根據偽類應用到的設計的不同,它或許不會成為關注的主要問題。比如,如果你使用:first-child 選擇器來移除標題或段落上的頭部或底部的間距,你的佈局在IE6中不會壞掉,它只會看起來有些不同。但是如果你使用:first-child選擇器從一個,比如浮動元素,移除左邊距或右邊距,將會讓你的設計亂掉。語言偽類語言偽類:lang(),允許你匹配一個基於它的語言的元素。你如,你想讓你的網站的某個特定的鏈接根據頁面的語言有不同的背景顏色:


程序代碼
:lang(en) > a#flag { background-image: url(english.gif); }:lang(fr) > a#flag { background-image: url(french.gif); }這個選擇器將會匹配相關的鏈接——如果頁面的語言等於「en」或「fr」,或者以「en」或「fr」開頭並在後面帶個連字符「-」的話。瀏覽器兼容性不幸的是,只有IE瀏覽器中只有IE8支持該選擇器,其它的主要瀏覽器都支持該偽類選擇器。5. CSS 3 偽類:target當你使用錨點(片段標識符 fragment identifier)的時候,比如,http://www.smashingmagazine.com/2009/08/02/bauhaus-ninety-years-of-inspiration/#comments,這「#comments」就是一個片段標識符,你就可以使用:target偽類來控制目標的樣式。舉個例子,比如你有一個很長的使用了很多文字和h2標題的頁面,然後在頁面的頭部有一個對這些標題的索引。如果在點擊索引內的某個鏈接時,相應的標題以某種方式高亮,然後滾動到相應的位置,對讀者就會很有用。很簡單。

程序代碼
h2:target { background: #F2EBD6; }瀏覽器兼容性這一次,IE瀏覽器完全不支持:target偽類,另一個小問題就是Opera 在使用「前進」和後退按鈕時不支持該選擇器。但是其它的各個主流瀏覽器都支持該選擇器。UI元素狀態偽類有些HTML元素有enable 或disabled 狀態(比如,文本輸入框)和 checked 或unchecked 狀態(單選按鈕和復選框)。這些狀態就可以使用:enabled、:disabled 或:checked 偽類來分別定位。那麼你就會想,如果任意一個禁用的(disabled)文本框應該使用淺灰色的背景和虛線邊框:


程序代碼
input:disabled { border:1px dotted #999; background:#F2F2F2; }你也可能會想讓所有選中的復選框有個左邊距(這樣就可以在眾多的復選框中很容易認出來):


程序代碼
input[type=」checkbox」]:checked { margin-left: 15px; }瀏覽器兼容性所有的主流瀏覽器,除了我們常常不報希望的IE系列瀏覽器,都支持UI元素狀態偽類。如果你考慮只是添加附加級別的細節和增強網站的可用性,這個仍然是可以採用的。6. CSS 3 結構偽類:nth-child:nth-child()偽類允許你定位某個父級元素的一個或多個特定的子元素.你可以通過定義它的值為一個整數來定位某個單個子元素:


程序代碼
ul li:nth-child(3) { color: red; }這將會讓ul元素的第三個li元素的文字變成紅色。注意如果在ul裡面有個其它類型的元素(不是li),它也會算作其子元素。你可以使用表達式來定位子元素。比如,下面的表達式將從第四個開始匹配每第三個元素。


程序代碼
ul li:nth-child(3n+4) { color: yellow; }在上面的這個例子中,第一個黃色的li元素將會是第四個。如果也想從第一個開始匹配,你可以使用一個簡單的表達式:


程序代碼
ul li:nth-child(3n) { color: yellow; }這樣的話,第一個黃色的li元素將會是第三個子元素,然後是它後面的每隔第三個。現在想像一下如果你只想匹配列表中的前四個子元素:


程序代碼
ul li:nth-child(-n+4) { color: green; }:nth-child的值同樣也可以被定義為「even」 或「odd」,和「2n」 (第偶數個) 或「2n+1」 (第奇數個)的效果是一樣的。:nth-last-child:nth-last-child偽類基本上和:nth-child偽類的作用相同,但是它從最後一個元素開始算。使用上面的一個例子來看看:


程序代碼
ul li:nth-child(-n+4) { color: green; }不是匹配最前面的四個li元素,該選擇器匹配最後面的四個元素。你同樣可以使用「even」 或「odd」只,同樣與nth-child不同的是,這是從最後面的元素開始算的:


程序代碼
ul li:nth-last-child(odd) { color: grey; }:nth-of-type:nth-of-type偽類和:nth-child也很像,不同的是它只計算選擇器中指定的那個元素。這對定位元素中包含大量不同的元素的情況會很有用。比如,我們想控制一個文本塊中的每隔一個段落,但是我們又想要無視其它元素比如圖片和引用塊:


程序代碼
p:nth-of-type(even) { color: blue; }你也可以使用一些值,就像在:nth-child中使用的一樣。:nth-last-of-type你能猜到它吧?!:nth-last-of-type 偽類可以像前面提到的:nth-last-child一樣使用,但是這次,它將之匹配你在選擇器中指定的元素類型:


程序代碼
ul li:nth-last-of-type(-n+4) { color: green; }我們可以更加的聰明一些,在一個大的塊級選擇器中結合多種這樣的偽類。比如我們想讓文章中的所有的圖片左浮動,除了第一個和最後一個(我們可以假設他們是滿寬的,無須浮動):


程序代碼
.post img:nth-of-type(n+2):nth-last-of-type(n+2) { float: left; }所以在這個選擇器的第一部分,我們從第二個圖片開始定位每一個圖片。在第二部分中,我們定位所有的圖片,除了最後一個。因為這兩個選擇器並非互斥的,我們可以同時使用它們,這樣就可以一下子排除第一個和最後一個元素!:last-child:last-child偽類的作用類似於:first-child 偽類,但是會定位父級元素的最後一個子元素。讓我們假設你不想讓你的日誌的div的最後一個段落也有一個底部邊距:


程序代碼
.post > p:last-child { margin-bottom: 0; }該選擇器將定位class為」post」的元素的最後一個直接子級段落。:first-of-type 和:last-of-type:first-of-type 偽類用於定位一個父級元素下的第一個同類子元素。比如,你可以定位某個特定的div的第一個子級段落(p),並讓其第一行字母大寫:

程序代碼
.post > p:first-of-type:first-line { font-variant: small-caps; }在這個選擇器中,你可以確定你是在只定位class為」post」的元素的直接子級p元素,而且還是匹配第一個子級p元素。:last-of-type偽類與此類似,只是匹配最後一個子元素。nly-child nly-child偽類表示一個元素是它的父級元素的唯一一個子元素。比如說,你有一些盒子(「news」),裡面有一些文字段落,當你有多於一個段落的時候,你想讓文字比只有一個段落的時候小一些:


程序代碼
div.news > p { font-size: 1.2em; }div.news > p:only-child { font-size: 1.5em; }第一個選擇器中,我們定義」news」div的所有子級p元素的字體大小。在第二個中,我們覆蓋之前的字體大小,如果該p元素是「news」 div的唯一子元素的時候,它的字體大小會比較大一些。nly-of-type nly-of-type偽類表示一個元素是它的父級元素的唯一一個相同類型的子元素。這有用什麼用?假設你有一些日誌,每一篇都有個class為」post」的div,他們中的一些有多於一張圖片,但是有些可能就只有一張圖片。你想讓後者中的圖片水平居中,而在其它的有多於一張圖片的日誌中,就將它左浮動。這個需求用這個選擇器就很容易實現:


程序代碼
.post > img { float: left; }.post > img:only-of-type { float: none; margin: auto; }:empty:empty偽類表示一個元素裡面沒有任何內容。這個選擇器可以用很多種用途。比如,你在你的「sidebar」中有若干個盒子,但是不想讓空盒子顯示出來:


程序代碼
#sidebar .box:empty { display: none; }注意,就算」box」div裡面只有一個空格,它也不會被css當作空標籤的,這樣就不能匹配該選擇器了。瀏覽器支持Internet Explorer (直到8.0版本)都不支持結構偽類。Firefox、Safari 和Opera 在其最新版本的瀏覽器中指出這些選擇器。這意味著,使用這些選擇器對網站的可用性和可訪問性是很有用的,或者如果網站的用戶中的大部分是使用IE而且你不想在某些細節上無視他們,最好還是保持使用通用的class和簡單的選擇器來迎合這些選擇器。否則你會被搞瘋的!7. 否定選擇器否定選擇器:not(),可以讓你定位不匹配該選擇器的元素比如,如果你需要定義表單元素中的input元素,但是又不想包括submit類型的input的時候會灰常有用——你想它們有不同的樣式,以看起來像按鈕:


程序代碼
input:not([type="submit"]) { width: 200px; padding: 3px; border: 1px solid #000000; }另一個例子,你想你的日誌的div中的所有段落(p)有比較大的字體,除了表示時間和日期的段落:

程序代碼
.post p:not(.date) { font-size: 13px; }你可以想像這個選擇器能帶給你的潛力了吧,你能夠從你的CSS文件中剝離(剔除)的無用的大量選擇器也被它廣泛支持嗎?瀏覽器支持Internet Explorer在這裡常常是讓我們感到掃興的東西:一點都不支持,甚至在IE8中。這大概意味著這些選擇器將仍不得不等到一些開發者開始不再顧慮將它添加到他們的樣式表中才會普及。8. 偽元素偽元素允許你操作HTML中不是真實存在的元素,比如一個文本塊的第一行或者第一個字母。偽元素在CSS 2.1中就已經存在,但是CSS 3說明書表示他們應該使用雙冒號「::」,以與偽類區分開來。在CSS 2.1中,他們也是使用單個冒號「:」的。瀏覽器會將能夠接受兩種格式,除非這些偽元素只存在於CSS3中。::first-line::first-line偽元素將匹配block、inline-block、table-caption、table-cell等等級別元素的第一行這對在你的文字塊上添加一些微妙的排版細節相當有用,比如,將一片文章的第一行文字改成小寫字母:

程序代碼
h1 + p::first-line { font-variant: small-caps; }如果你專心的閱讀了我們前面的內容,你將會瞭解到上面的語法意味著,緊緊的跟在H1標籤之後(+)的段落會將其第一行文字顯示為小寫字母。你也可以針對相關的div的第一行,而不用針對實際的段落標籤(p):


程序代碼
div.post p::first-line { font-variant: small-caps; }或者更進一步,定位某個特低的div的第一個段落的第一行:
程序代碼
div.post > p:first-child::first-line { font-variant: small-caps; }這裡,「>」符號表示你指定的是post div的直接子級元素,這樣如果段落被包括在第二級div中,它就不會匹配這個選擇器。::first-letter::first-letter偽元素將會匹配一個文本塊的第一個字母,除非在同一行裡面包含一些其它元素,比如圖片。和::first-line偽類一樣,::first-letter通常用於給文本元素添加排版細節,比如下沉字母或首字母。這裡是如何使用::first-letter偽元素創建首字下沉的例子:


程序代碼
p { font-size: 12px; }p::first-letter { font-size: 24px; float: left; }注

意如果你在某些元素中同時使用::first-line 和::first-letter ,::first-letter 屬性將覆蓋從::first-line中繼承下來的某些屬性。如果你不知道W3C規則的話,這個元素有時會產生意想不到的結果:它事實上是使用最長的規則的選擇器!所以如果你計劃使用它的話最好仔細的閱讀一下 (其它選擇器也一樣)。::before 和 ::after::before和::after 偽元素用於在一個元素的前面或後面插入內容,純CSS方法。這些元素將繼承它們將附加的元素的大部分屬性。假設你想在你的頁面中的圖標的描述前面添加文字「Graphic number x:」。你將無需寫文字「Graphic


程序代碼
number」,或者自己手動添加數字:.post { counter-reset: image; }p.description::before { content: "Figure number " counter(image) ": "; counter-increment: image; }


那麼這會產生什麼?首先,我們告訴HTML來創建「image」計數器。比如我們可以添加該屬性到頁面的body。同樣我們也可以給該計數器起任何一個名字,只要你想,只要我們常常使用同樣的名字引用它:自己試試吧!那麼我們想在class為」description」的每一個段落之前添加這一塊內容: 「Figure number 」 — 注意只有我們在引號裡面寫的內容才會被創建到頁面中,所以我們也要添加一個空格!然後,我們就有了counter(image):這將用到我們之前在.post選擇器中定義的屬性。它默認會從數字1開始。下一個屬性在那裡表示計數器知道對於每一個p.description,它需要將image計數器增加1 (counter-increment: image)。它並不像看起來的那麼複雜,而且還會灰常的有用。::before和::after偽元素常常只使用content屬性,來添加一些短語或排版元素,但是這裡我們展示了我們如果以一種更加強大的結合counter-reset和counter-increment屬性的方式來使用它們。有趣的是: ::first-line 和::first-letter 偽元素可以匹配使用::before偽元素生成的內容,如果存在的話。瀏覽器支持如果使用單個冒號的話(比如, :first-letter, 而不是::first-letter),這些偽元素被IE8支持(但是不被IE7或6支持)。但是左右其他的主流瀏覽器都支持這些選擇器。結語乏味的講述終於結束了,現在該你來領悟本文的要義並自己嘗試了: 開始通過創建實驗性的頁面並測試所有的這些選擇器,在有疑問的時候返回這裡並確保總是遵循W3C的規則,但是請不要只是坐在那裡想這些選擇器尚未被完全支持你就無視它們。如果你敢於冒險,或者你不害怕放棄之前的遍地無用和非語義化的class和id,為什麼不嘗試一兩個這些強大的CSS選擇器到你的下一個項目中呢?我們保證你不會回頭的!

參考‧CSS 2 Selectors — W3C‧CSS 3 Selectors Level 3 — W3C‧Comparison of layout engines (Cascading Style Sheets) — Wikipedia‧Generated content, automatic numbering, and lists — W3C擴展資源‧Keeping Your Elements』 Kids in Line with Offspring — A List Apart‧Selectutorial – CSS selectors‧A Look at Some of the New Selectors Introduced in CSS3‧CSS 2.1 selectors, Part 1 and Part 2‧CSS 3 selectors explained‧CSS selectors and pseudo selectors browser compatibility‧10 Useful CSS Properties Not Supported By Internet Explorer‧Styling a Poem with Advanced CSS Selectors關於作者Inayaili de Leon 是一個葡萄牙網頁設計師。她對網頁設計和前端編碼有特別的愛好,而且喜歡漂亮和間接的網站。她居住在倫敦。你可以在Web Designer Notebook看到她的更多文章並follow her on Twitter。


文章來自WOWBOX
文章提供BAYSTARS DESIGN網頁設計公司

國外50多個使用發光效果的網站設計精選

在網站設計中使用發光效果是當下的一個流行趨勢,它常常可以為一個網站帶來一些有趣和漂亮的界面,想要添加一些炫光效果的設計師可以使用Photoshop製作非常有趣的發光效果。儘管之前我們有展示過一些使用發光效果的網站,今天我們將展示更多的此類網站設計,從這些網站中你將會看到不同的實現方式和不同類型的效果。

Design Slurp
Staak
Beautiful 2.0
Levon.co.za
Songkick
Ulrich Egouy
Fred Maya
Pixelpanzer
Rareview
Strutta
Yomenz
Foehn
Iluminasom
AeroFX
Camp Creative Group
Icebrrg
Aurelien Reaut
365 Days of Astronomy
Pixelight Creative
Cosmive
Oakes Design
FMCommunication
Vogue
Drew Wilson
Ciplex
You and I Graphics
Sebcreation
Designed by Dave
James B
OKB
Stuart Anderson
Sugarrhyme
Mozami
Studio 7 Designs
UbicWay
Dreamwire
GCN
Dale Anthony
Elite by Design
45 royale
Sony CES 2009
Enso CMS
CultureShock
Newism
Timmy K
Marcos Xotoko
chopchop
LogoFury
Vodaco Agency
Designphunk
SoSoJuicy
Tim Adler
3AKIS

文章來自WOWBOX
文章提供BAYSTARS DESIGN網頁設計公司

日期垂直排列的兩種技巧

LearningjQuery.com 博客帖子列表的左邊有一個很酷的日期,如圖: 從圖中我們看到,「2009」垂直排列在右側。用Firebug查看元素,文本「2009」出現在html結構之中,本文介紹實現這種效果的兩種方法。一、利用Sprite技術來實現其實現過程已有Chris Coyier 在《Date Display Technique with Sprites》一文中作了詳細介紹,這裡把其實現過程作一個簡單的描述。很顯然,我們不希望每一個日期用一張單獨的圖片,因此,將其整合到一張圖片之上,安排年、月、日在圖片的不同區域,如圖:1、Html頁面中html結構如下:
程序代碼
.postdate容器包含三個區域,分別對應年月日,這樣很好的保證了語義上的完整性。在類似wordpress這樣的CMS系統中,其後端代碼是這樣的:
程序代碼
2、Csscss是sprite真正發揮作用的地方,利用html中的定義的class屬性,讓對應的圖片得以顯示。首先,讓class屬性為.postdate的容器相對定位,這樣包含其中的三個區域就會絕對定位,並使用同一張背景圖片。設置各自的寬度和高度,並將文字移出以顯示背景圖片。然後,定義每個月(12)、每天(31)、每年(按10年計)具體的背景位置,以顯示與其相對應的圖片。
程序代碼
.postdate { position: relative; width: 50px; height: 50px; float: left; } .month, .day, .year { position: absolute; text-indent: -1000em; background-image: url(/wp-content/themes/ljq/images/dates.png); background-repeat: no-repeat; } .month { top: 2px; left: 0; width: 32px; height: 24px;} .day { top: 25px; left: 0; width: 32px; height: 25px;} .year { bottom: 0; right: 0; width: 17px; height: 48px;} .m-01 { background-position: 0 4px;} .m-02 { background-position: 0 -28px;} .m-03 { background-position: 0 -57px;} ... more like this ... .d-01 { background-position: -50px 0;} .d-02 { background-position: -50px -31px;} .d-03 { background-position: -50px -62px;} ... more like this ... .y-2006 { background-position: -150px 0;} .y-2007 { background-position: -150px -50px;} .y-2008 { background-position: -150px -100px;} ... more like this ... 二、利用Text Rotation來實現Jonathan Snook 在他的文章《Text Rotation with CSS》中提到用Text Rotation來實現這種效果。這裡對其作簡要的描述。如今,很多主流的瀏覽器如Webkit和Firefox(從3.5開始)都支持旋轉HTML元素。那麼要使其垂直排列,就可以利用該屬性。但須為每種瀏覽器加上前綴。
程序代碼
-webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); 對於IE瀏覽器,可以使用一個稱之為BasicImage 的濾鏡來達到目的,該濾鏡能夠旋轉任何具有layout屬性的元素。但字體較之於使用圖片來說,並不顯得平滑。
程序代碼
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
該濾鏡可以接受四個屬性值0、1、2、3,其對應旋轉的角度分別為0、90、180、270。儘管它還具有mirroring、masking、greyscale 等屬性,但在此對我毫無意義。在Jonathan Snook的這篇文章的留言中,Ashish 提到在IE中使用css的一個屬性writing-mode:tb-rl可以得到同樣的效果,本人做過測試,的確可以使文本垂直排列。但與旋轉文本略有不同,主要體現在文字起始的方向上。另外,本人在IEtest中測試IE8,使用BasicImage好像不能生效。查查示例三、總結對比兩種方法。很明顯,第一種方法無論是瀏覽器支持上還是視覺效果的美觀上都強於第二種,唯一感到不足的是css代碼較長。第二種方法雖不甚完美,但其實現過程並不複雜,不需要任何圖片,但作為一種開拓思路的嘗試也未嘗不可。

文章來自wowbox
文章提供Baystars Design網頁設計公司

自適應CSS佈局—流動佈局新時代

流動網頁設計有很多好處,但也只有在正確使用的時候。合適的技巧會使頁面在大屏幕、小屏幕抑、PDA小屏幕上都能得到良好的呈現。但是,糟糕的代碼結構,對於流動佈局來說將是災難性的。因此,我們需要針對大多數流動設計的缺點尋求可行的解決方案。如果你作為設計師通過額外的付出創造了一個功能性流動佈局,為什麼不更進一步使其兼容所有分辨率,而不是局限於大多數屏幕。你可以使用一些技巧創造一種意想不到的適應性佈局,這種佈局在不斷改變屏幕分辨率情況下會保持功能上的完整性。在這篇文章,我們將討論創造100%功能自適應css佈局的行之有效的方法,並提供其他教程和實踐的詳細清單:你也參考以前的文章:
固定&流動&彈性佈局:哪一個適合你? 這篇文章討論每一種佈局類型的優點和缺點。其中的任何一個可以用來創造一個成功的網站佈局,只要保持其可用性就行;
靈活佈局:未來的挑戰 討論靈活佈局在未來的挑戰;
屏幕分辨率和更好的用戶體驗 介紹屏幕分辨率的問題,然後普通用戶的個人腳本。一、使用網格的流動佈局我們大多數人都聽說過設計固定寬度網頁的 960網格系統 ,使用960網格系統使得固定寬度的設計比流動佈局更可取。但是,有一種方法可以創建一個基於網格的彈性佈局。從技術上講,彈性佈局的代碼結構不同於流動佈局,但它為用戶提供的幾乎是相同的效果。什麼是流動佈局?流動網格是通過智能的使用div、百分比和簡單的數學計算來創建的。這種理念來自於Ethan Marcotte ,他認識到「em」比字體大小進步。我們在這重溫這個基本概念,但要對該方法有一個全面而詳細的瞭解,請參閱「流動網格」,這是一篇全面的關於建立基於網格的彈性佈局的教程。其理念是使用相對尺寸、結合百分比和em,用簡單的分割以找到相對應的像素寬度,而這些寬度是在固定寬度設計中使用的。優點:
這種方法使你擁有一個網格佈局,這看起來可能僅固定一次寬度;
用戶可以使用預設的字體大小查看這個佈局,並且保持其比例大小;
佈局樣式跨瀏覽器兼容;
一旦理解之後,流動設計中的大多數問題將容易修復。 如何讓創建一個流動佈局?創建流動佈局的第一步是創建一個首選的固定寬度的模擬,這樣一來,設計師能看到其比例,然後使用神聖的比例、平衡和合適的間距技巧。從上述簡單的佈局中,我們可以看到如何在css中規劃代碼。960px是我們的固定寬度,對於任何小於該尺寸的分辨率屏幕,我們將迫使水平滾動條出現。所有內容在一個880px的wrapper裡,在左右兩側有40 px的margin,元素間有20px的間距。在我們思考其可用性之前,一切安好。這種類型的佈局可能適合很多用戶,但未必適合每一個人。因此,我們將其轉換成流動佈局,如果欲使這一佈局在任何分辨率下保持其比例,我們必須將960px的寬度改為100%,然後計算出與880px、640px、200px等值的百分比。這需要一些理性思考,在我們模擬的固定寬度設計中,在960px的設計中,整個wrapper是880px,如果需要與其等價的百分比,我們所要做的是相除。800pixels / 960pixels = 0.91667採用十進制,將其轉換成百分比,得到的是91.6667%。因為當前瀏覽器處理百分比的差異,它不會很明智的將所有小數位數應用到佈局之中,瀏覽器要麼向上取,要麼向下捨。因此,我們需要一個整數,既然它更接近於92%,我們就向上取,稍後因為額外間隙的存在,我們需要向下捨,這很容易做到。

程序代碼
#wrapper { width: 92%; }對於content和sidebar區域,我們如法炮製,但需保持正確的比例。因為這個區域在880px的wrapper內,我們需要找到相對於這個區域的百分比。640 pixels ÷ 880 pixels = 0.727272 › 73%220 pixels ÷ 880 pixels = 0.25 › 25%

程序代碼
width: 73%; } #sidebar { width: 25% ; }我們將實際內容區域的寬度降至72%,這樣我們的佈局就不會破壞。因為它位於導航欄的旁邊,我們不希望它太寬。在處理流動設計的比例時,這是一個非常簡單的概念,也是更有效的處理方式。借助於這樣的技巧,設計者沒有理由說不能保持其比例,美觀的佈局被破壞。關於margin設計者可以用不同的方法處理margin,一種方法是計算margin的百分比(此例中為200px/880px);另外一種是設置固定的margin,在我們的例子中,硬性大小為20px。兩種方法各有優劣,margin使用百分比,設計師承擔者在大分辨率屏幕下margin太大的風險但能保持完好的比例。用固定的margin在比例的保持上有輕微的缺陷,但是,無論屏幕分辨率為多大,margin將維持不變。二、自適應內容該流動設計另外一個常見問題是:儘管它們適應很多分辨率的屏幕,但如果分辨率太小(如手機或PDA)或超大,看上去就有點滑稽了。在分辨率為240的PDA屏幕上一個三欄佈局看起來非常混亂。為了解決這個問題,我們可以使用一項技巧使內容自適應特定範圍的分辨率屏幕。幸運的是,我們可以利用上面的技術來保持我們的比例,然後增加該項技術以得到更好的可用性。自適應內容流動佈局大多數流動佈局在分辨率為800×600的屏幕中看起來很大很寬--高達1280px。但是,我們可以稍稍突破一下,針對800px-1024px、1024px-1280px、1280px以上的屏幕定制略微不同的佈局。同樣,也可為640px-800px、320px-640px、240px-320px、240px以下的屏幕自定義調整。The Man in Blue曾使用過這樣的技巧。上面的例子有兩個單獨的樣式:一個針對分辨率超過800px的屏幕;一個針對分辨率小於800px的屏幕。這種技巧用不同風格的佈局取更好的適應不同分辨率的屏幕。Marc Van Den Dobblesteen』s layout example, Switchy McLayout 用這些樣式提供了一個完美的例子。優點設計者可以更精確的看到,在不同分辨率屏幕下,其設計是什麼樣子; 無論是在什麼平台上查看,其更好的遵守了間距和平衡的設計原則; 完美的處理了最小和最大分辨率。創建自適應內容流動佈局創建這種類型的佈局,我們要做兩件事:為每一範圍分辨率的屏幕設立單獨的樣式;第二是確定用戶屏幕的分辨率。對此,Kevin Hale 在文章 Dynamic Resolution-Dependent Layout Technique 中作過詳細的介紹。第一步是創建一系列可替代的佈局文件。例如,一個稱之為narrow.css,其針對小分辨率的屏幕。另一個可稱之為normal.css,適應於傳統的分辨率屏幕,第三可稱之為wide.css,將處理較大分辨率的屏幕。我們可以使用js根據預設的樣式表作簡單的改動,Dynamic Resolution Dependent Layouts 在演示頁中使用js解釋了如何使用它,於其它類型佈局一樣,所有樣式和js文件都放在頭部。

程序代碼
注意到所有三個鏈接樣式單的title屬性:「narrow」、「default」、「wide」,在js源文件中查看DynamicLayout() 函數。可以看到,我們會很容易的根據每個title屬性來調用相應的樣式,以及如何改變相應的寬度。

程序代碼
function dynamicLayout(){ var browserWidth = getBrowserWidth(); // Narrow CSS rules if (browserWidth <>= 640) && (browserWidth <= 960)){ changeLayout("default"); } // Wide CSS rules if (browserWidth > 960){ changeLayout("wide"); }}這種技術很容易實現,能夠與其它技術一起創建更多的可用性佈局。仔細查看js,可以看到更多細節。相似的技術對於類似的技術,可以參閱 Brand Spanking New 的 Dynamic layouts with adaptive columns,他使用了大致相同的代碼,但略微不同,幸好有更多的選擇和腳本實例得到同樣的自適應內容。要下載此版本自適應內容的腳本,請到 Dynamic layouts with adaptive columns。這種概念並不難,關於此技術每個開發者都有自己的腳本,Clagnut.com博客的回帖中有更多關於自適應內容的佈局和腳本--Variable fixed width layout,在其回帖中甚至有一種技巧無需任何腳本--CSS Drop Column Layout。三、 流動佈局中的圖像在流動佈局中開發者最關心的是處理圖像和內容,它們需要一定的寬度。大多數情況下,我們希望我們的圖像盡可能的大,至少在太小時應防止任何令人尷尬的空白,在固定寬度的佈局中,可手動調整,客服這些問題很容易。但是,在流動佈局中,圖像區域的寬度是不斷變化的,這些問題就在此出現了。自動雜誌版面設計這個解決方案需要一些聰明的數學知識和PHP,在Harvey Kane 的 Automatic Magazine Layout 文章中有全面的解釋(包括數學)和可下載的源代碼。標題由圖像在雜誌中如何呈現來決定:有條理且總是完美對齊。當然,一本雜誌版面的設計師都必須經過一定的過程來實現這種效果,包括調整和手動放置。對我們來說,這一技巧可以實現我們的效果,下面是腳本實現這一效果的第一個例子。正如你所看到的那樣,非常漂亮。但是,如何使用流動佈局使其更具可用性?Harvey Kane 給了我們必須使用的腳本。

程序代碼
# include the class filerequire_once('magazinelayout.class.php');# Define the width for the output area (pixels)$width = 600;# Define padding around each image; this *must* be included#in your style sheet (pixels)$padding = 3;# Define your template for outputting images# (Don't forget to escape the &)$template = '';# create a new instance of the class$mag = new magazinelayout($width,$padding,$template);# Add the images in any order$mag->addImage( 'landscape1.jpg' );$mag->addImage( 'portrait1.jpg' );$mag->addImage( 'landscape2.jpg' );# display the outputecho $mag->getHtml();我們可以事先定義我們所希望的圖像雜誌的寬度。因此,如果我們找到瀏覽器的寬度,我們就可以決定我們佈局圖像的寬度,這很容易。因為我們已經學會了第二種技巧:自適應內容的流動佈局。在他的腳本中,Kevin Hale使用了一個稱之為getBrowserWidth() 的方法,你可以在他的文章中更深入的瞭解該方法的代碼。如果我們用這種方法取代瀏覽器的寬度值,然後用這個值去尋找我們內容區域的像素寬度(不論圖像放在那個區域)。比方說,我們希望將圖像放到70%的內容區域中,利用簡單的數學知識,我們只需要找到瀏覽器寬度值的70%就行。

程序代碼
Pixel width = 內容區域百分比 x  瀏覽器寬度 $width = 0.70 x getBrowserWidth();這是很基本的數學知識,是流動佈局中處理圖像最基本的方法,調整PHP腳本自動尋找圖像的像素值。這樣,在一個流動佈局中,你就能很好的處理圖像或其餘已經設置寬度的內容。四、jQuery圬工不去考慮不斷改變屏幕分辨率時css中的存在的許多問題。倒有一個共同的問題是許多設計師更可能面臨的--多重內容盒子。當有許多浮動元素時,一些尷尬的空白會出現在高度變換的區域之間,下面是這方面的一個例子:如果我們打算在一個固定寬度的佈局中使用多個div,固定很容易:只需調整所有div在合適的位置就行,在流動設計中用這種方式處理多個divs似乎不可能。佈局的每一次調整,在新的點上將出現不同數量的空白。在較小分辨率下查看相同的佈局,佈局變成了兩欄。但是,在這種情況下,我們得了不同的空白。任何設計師覺得這是一個尷尬的問題。通常情況下,因為沒有可行方案解決此問題,這種佈局被強行設置成固定寬度。幸運的是,這個問題不是不可能解決,而是相當容易--源於 David DeSandro's jQuery Plugin: jQuery Masonry 提供的方法。jQuery圬工是什麼? jQuery圬工是一個非常容易使用的插件,用David DeSandro 自己的話說:「將jQuery看作css浮動的對立面,浮動元素的排列是先橫向後縱向,圬工排列是先縱向後橫向,其結果是在高度變換元素的垂直方向上沒有間隙,就像是一座石頭強。」如何使用jQuery masonry在上面的例子中,所有盒子被放置在 ID為「item」的段落之中,「item」設置了30%的寬度,並向左浮動,所有這些放置在寬度為90%的# wrapper中,一旦段落的寬度達到#wrapper的寬度,無論是否有空白留下,它將新起一行。下載 jQuery Masonry 插件,並對#wrapper應用masonry()方法,就很容易修復它。$('#wrapper').masonry();下面兩張圖片顯示了該插件的力量。第一個是在大分辨率屏幕上的佈局情況,第二個是同樣的佈局,在小分辨率屏幕中查看,它折疊成了兩欄。該插件的一個bug和一個修復方法使用該插件,如果用戶縮放瀏覽器,你會注意到div層保持在原來的位置,但是刷新後,它有完好。但用戶不知道需要書信去修復該問題。因此,按下面的方法改變html代碼將很容易的修復該問題。

程序代碼
現在,用戶每次改變瀏覽器的大小,瀏覽器會自動刷新並重載整個腳本。五、jQuery & CSS 智能欄上面的修復方法解決了高度變換的div的問題。但對於想使用相等高度的佈局來說,這未必是一個好的辦法,Soh Tanaka 在他的 SohTanaka.com 網站上提供了一個jQuery腳本和一個智能的css使流動佈局的欄能很漂亮的折疊和擴展,查看演示頁Smart Columns w/ CSS & jQueryjQuery & css智能欄是什麼?智能欄是一個腳本,為了得到更好的視覺效果,它改變divs的寬度,並決定在瀏覽器當前頁面尺寸下會呈現多少欄?對於用戶調整瀏覽器也很完美,而不是進入網頁時僅僅照顧瀏覽器的尺寸。腳本去掉每欄多餘的空白--這可能是有瀏覽器的不同寬度導致的,然後用jQuery使欄均勻分佈。如何使用智能欄在Soh Tanakas博客的 Smart Columns w/ CSS & jQuery回帖中含有所有代碼,它可以用列表設置,每個li作一個塊。

程序代碼
  • Block 1
  • Block 2
  • Block 3
然後將css和jQuery代碼插入到頁面之中,這樣智能欄就能實現。自定義代碼很簡單,只需簡單的在css中編輯width、height、margin即可。六、文本縮放另外一個流動佈局關注的常見問題是:文本要麼伸展要麼擠壓以致失去了可讀性。下面的這張圖片表明了這個問題,無論是在大屏幕還是在小屏幕上都是一樣,在小屏幕上似乎問題更大--文本間隙太大,上面這些情況都令用戶沮喪。有一個辦法可以解決這個問題-- min-width和max-width,但有兩個問題:不是所有的瀏覽器都支持min-width和max-width; 佈局中只是部分借助於固定寬度,我們再一次全面失去了靈活性。 幸運的是,James在Tinned Fruit 上創建了一個腳本,對此沒人提出異議。什麼是文本縮放?用他的話說:「文本縮放」就是可以針對用戶屏幕的寬度自動調整文本的javascript,屏幕寬一點,字體就大一點。同樣,屏幕小一點,字體就小一些。除了這個基本功能外,設計者可以設置字體最小最大值,這樣用戶就不會看到任何古怪的文字。要看實際效果,可以到他的Text Zooming page. 頁。正如你所看到的那樣,腳本很好的退化,在較大分辨率屏幕上大文本容易閱讀,就像在小屏幕上小文本易於閱讀一樣。更重要的是,標題和導航並不改變大小,所以元素可以決定那個元素應當使用文本縮放。上面是頁面最大化顯示較大文本的比例上面是相同的頁面,只是將寬度減小到700px,字體大小隨瀏覽器改變如何實現文本縮放文本縮放是一個可以包含在網頁外部的基本的javascript,下載js文件,並進一步閱讀說明,將其放到演示頁的頭部:Text Zooming。在下面的外部的script文件中,插入代碼和修改它很容易。

程序代碼

結論所有這些技巧可以實現融到一個設計之中去創造一個非常友好的流動佈局。流動網格智能運用可創建一個自適應佈局,其比例忠實於三等分法、平和和其它設計原則;自適應技術通過個性化定義處理分辨率大小的異常。因此,設計師一定要為用戶提供完美的外觀,第三個技巧能很好的保證圖像和其它設定寬度的內容區域在屏幕上不會太大。我們希望,先進的流動佈局將是版面設計中的一個新時代,隨著各種寬度屏幕的出現這些技術獲得重視只是一個時間問題。更多資源Fluid Grids Switchy McLayout: An Adaptive Layout Technique Dynamic Resolution Dependent LayoutsAutomatic Magazine LayoutIn Search of the Holy Grail Variable Fixed-Width Layout CSS Drop-Column Layout 作者:Kayla Knigh原文地址:Adaptive CSS-Layouts: New Era In Fluid Layouts?譯文地址:http://www.denisdeng.com/文章所涉及的圖片均來自http://www.smashingmagazine.com/

文章來自blueidea
文章提供Baystars Design網頁設計公司

CSS :focus 偽類

定義:focus 偽類在元素獲得焦點時向元素添加特殊的樣式。註釋:IE 瀏覽器不支持此屬性。說明這個偽類應用於有焦點的元素。例如 HTML 中一個有文本輸入焦點的輸入框,其中出現了文本輸入光標;也就是說,在用戶開始鍵入時,文本會輸入到這個輸入框。其他元素(如超鏈接)也可以有焦點,不過 CSS 沒有定義哪些元素可以有焦點。例子

程序代碼
a:link {color: #FF0000} /* 未訪問的鏈接 */a:focus {color: #00FF00} /* 獲得焦點的鏈接 */註釋:偽類的名稱對大小寫不敏感。註釋:偽類可與 CSS 類配合使用:

程序代碼
a.red:visited {color: #FF0000}CSS Syntax
如果上面這個例子中的鏈接已被訪問過,那麼它會顯示為紅色。TIY 實例超鏈接::focus 的使用 本例演示如何使用 :focus 偽類(無法在 IE 中工作)。

文章來自wowbox
文章提供baystars design網頁設計公司

EverNote靠2%會員養出3000萬年營收,堅持「免費網站就是最佳行銷策略」

Facebook目前在台灣的總會員數今早查看為1,973,920人,也就是說,這周隨時都會破200萬會員大關,讓Facebook正式往台灣龍頭網站再邁進一步。雖然成長已經趨緩(上周「只」成長15.75 %),但這數字也驚人的高達27萬人,而且至今這周的增速依然是排行世界第一!
Facebook有在賺錢嗎?它號稱的年營收5億美元夠每日支出還平攤累計虧損嗎?我們不用為它擔心,因為現在已經有太多人天天在使用它,它已經成為很多人每天的「習慣」。


「習慣」,是網站收錢的大關鍵之一,但我們講獲利講久了,很多關於「習慣」的最重要的事情竟渾然不覺的忘掉了!昨天《紐約時報》提到另一個開了一年半的網站,首次透露這個小網站的賺錢狀況,其中一些做法,令人感覺到如一桶冷水澆下,清醒了一大半──
這個網站叫「EverNote」,它是一個讓你「隨手記」的網站,這類網站當初一大堆跑出來,而EverNote和許多站一樣上網開始,你可以看到哪個好網站,隨手記幾筆可抓到EverNote的主機裡,慢慢的、慢慢的,EverNote做到連從手機拍照也可以直接上傳,後來連手機拍照照到「名片」它也可以辨識其中字元……這家公司顯然做得很專注,一個一個功能慢慢做,最後集了所有功能、無論何時何地都有機會使用EverNote,企圖要完完全全的取代你手邊的小紙條、便利貼!EverNote對《紐約時報》透露,開站一年半,目前已有140萬名會員,平均一天增加4500會員,但這數字只能算「ok」而已。

不過,有趣的不是EverNote的「流量」,而是他們的「收入」──
據說,EverNote在上一個月(七月),從客戶賺來的錢就高達7萬9千美元(台幣250萬元),以這個月來看,從客戶直接收到的年營收至少就有3000萬台幣左右,這還不包括EverNote自己收的廣告錢。這筆收入,讓這間公司雖然目前完全沒有名氣,但和其他同流量會員水準相比,EverNote真的還算活得「好好的」!


為何它可以賺到這些錢?EverNote採用「Freemium」收費模式,免費加入會員,讓你隨便用,但,一碰到有些特別的premium服務,一個月必須付5美元的費用(台幣160元),一年要付45美元。這樣算下來,EverNote的付費會員大約在1.6萬人之譜,只佔了他們總會員數的2%不到。
你說,這就是標準的Freemium,有何了不起?不,這次,EverNote的創業家接下來還透露了更有趣的數字:Evernote發現,他們的免費客戶有近75%在頭四個月之內就會待不住走掉了,待了四個月以上的只有少數人,他們計算,大約50萬名使用者(雖然這數字若作加減法有點搭不上),重要的是,這50萬名「倖存」的「舊會員」願意轉而付費的成長速度,竟然高過於EverNote「新會員」的成長速度。
什麼意思?


他們發現,在頭一個月,只有0.5%的會員願意轉換成付費會員,但,當一位使用者玩了一年後,他變成有高達4%的機會轉換成付費會員。EverNote的創辦人說,他們看線圖,發現這個比率隨著時間愈長還會再提高,畢竟他們只開一年半,不知道接下來會發生什麼事,但他們預估,假以時日,如果舊會員繼續待著,他們終於打開錢包轉為付費會員的機率應該可望達到22%左右,這五年的光景,好好的款待他們,愈來愈多舊會員會加入!這點很有道理,使用者使用EverNote愈久,就會愈仰賴EverNote;使用EverNote愈多,會員所剩的容量亦愈小,愈需要轉換成付費會員。倘若從目前Active User的平均營收貢獻來看,一月前加入的使用者今天平均只貢獻了3 cents,一年前加入的使用者平均每人卻貢獻高達35 cents,而成本也會隨著服務者愈多而降低,EverNote服務一個月前加入的使用者平均變動成本為每月50 cents,服務一年前加入的使用者平均變動成本卻只剩9 cents。EverNote表示,如果這樣算下去,這個網站到了2011年的一月就可以損平!創業家說,從這個角度來看,他們可以不必再擴展主機、不必再大舉吸引新使用者,只要繼續「擁有這群『舊客戶』」,繼續服務他們,有任何一人懈怠了就立刻打電話給他們鼓勵、催促,總有一天……可以賺到錢!


這位創業家之前曾成功的賣過另外兩家公司,他對於他自己在做什麼顯然非常清楚,他說了一句話:「我們的產品,就是了我們的行銷!」(our product is our marketing)。這麼直接了當的講出來,就如同Chris Anderson這次在《Free》一書說「免費就是最好的定價策略」是同樣的大膽。這位EverNote創業家的意思是,他先免費推出它的產品EverNote,用這個免費的產品「當廣告」,得到的那些浩浩蕩蕩140萬名會員是「假」的,真正的客戶是那些用了四個月以上還繼續用的1萬6千名核心使用者。這個免費的產品,一開始只像是一個「廣告」,等到四個月以後,這個產品才變成真正的產品,服務那1萬6千名使用者!


「產品就是行銷」,EverNote的策略,也完全反映在它的「付費切分」上面。看,EverNote如何設計Premium(付費)和Free(免費)的「切分」呢?依這一頁的比較表,EverNote付費會員主要是付「空間」,免費版本只給40 MB空間,大約可塞2萬則文字記錄、400則手機上傳照片、270則網路影片、40則錄音檔還有11張超大張相片。付費之後,則可享有500 MB的空間,可塞25萬則文字記錄、5000則手機上傳照片、3300則網路影片、450則錄音檔、以及150張超大張相片。你說,這些數字花花亂,我看起來都一樣!但這就是EverNote設計的巧妙處,他們故意設了「好多關卡」,有的使用者可能用EverNote來當便利貼,一天放100張,一個月不到就不夠了;若有的是習慣照手機然後上傳,一天照20張,一個月不到就不夠了;或許你喜歡把自己相機上傳,那只要上個10張就到「頂」了──當你真的碰到「頂」的時候,你就會「非買不可」!


除了空間以外,EverNote還在各處設下一大堆「非數字關卡」,譬如,付費版做檔案同步僅限於比較簡單的PDF檔、照片檔等等,若要和其他人分享你的筆記對方永遠只能看不能幫忙編輯、而且若要搜尋PDF檔案也不行,當你使用EverNote時有太多廣告跳出來也不要怪他們……。以上這些,若有任何一項你「想要」?那麼,只要一個月5元交出來給EverNote,EverNote就會讓你更好!


EverNote給網站創業家或網路經營者一些信心!一般來說,如果我們網站只有5萬會員,我們滿腦子想的都是:「如何增加到50萬?」EverNote則說,不應該這樣想!他們已經證實,如果你的網站想賺錢,那麼,應該更加強服務的並不是「新人」,而是「舊人」啊!只要把握,原先那5萬名會員之中的那常常回來的5000人,好好的把握住他們,以後他們一年隨便付個5000台幣(一個月不到500元),這,就是2500萬台幣的年營收了!
5000人就足夠創造2500萬台幣年營收,這一點,讓創業家很心動了。


後記:EverNote另一點厲害之處在於,它在適當的時機點,透露了他們一些關鍵數字,這數字剛好「證實了理論」並甚至更深刻的闡述了理論。現在EverNote剛好搭著Chris Anderson的《免費》一書出來,這個網站自然而然帶著這些「刻意透露的數字」在《紐約時報》版面上成功「搶灘」,以後大家提到《Free》,就一定會提到EverNote, EverNote有機會和當年的Flickr一樣,搭著這些演講、新聞一波一波的傳出去,這一招似乎也隱隱的呼應了他們的「產品就是他們的行銷」策略。各位如果手上有網站,若有什麼數字可以透露,證實了什麼理論,也請email給我,我很願意在文章、專欄、推薦序之中隨手一提,也請您說明一下這些數字證明了什麼理論,有機會會幫您拉抬一下,感謝。


文章來自mr6
文章提供BAYSTARS DESIGN網頁設計公司

2009年8月27日 星期四

交互設計模式——分頁


模式庫
在模式庫裡,我將列出所有電子商務網站需要的模式.以下將羅列出經典常用的模式案例,我也試圖讓這些模式看起來更有趣味性與實用性。(Yahoo模式庫也有對Pattern的一種定義。)
模式歸屬類別
為了方便調用和維護模式庫中的各種模式,首先將模式庫中的模式分成三大類:用戶需求,應用需求,語境下的設計.在用戶需求類別中,有一種類型叫基本交互。這裡我將從這個緯度把基本交互中所涉及的模式一一羅列講解。
Pagination(分頁,標記頁數)問題摘要
使用者需要查看資料的一個子集,卻發現所有資料是顯示在一頁的,這時候查看變得非常不容易。
實例

何時使用
當一個螢幕不能承載更多的資料時。
感興趣的項目通常可以在前幾頁找到。
需要深入探索資料項目,而非考慮內容顯示在一個滾動區域。 解決辦法
綜述:打破完整資料,分成更小的專案,順序顯示這些資料和單獨序列頁。提供分頁控制一頁一頁地流覽。提供連結讓使用者流覽網頁的前一頁和後一頁的這種行動。此外,提供連結到最開始和結束的資料組(第一個和最後一個)。如果資料集是可預知數量,就顯示一個連結的最後一頁。如果資料集是不可預知數量或顯示有可能是不同規模的(例如,來自於搜尋引擎的結果資料),請不用擔心要顯示連結到的最後一頁。
項目分頁
拆分項目列表成為一個序列的網頁。
提供可訪問前一頁和下一頁網頁資訊的連結。
提供可跳轉到流覽第一頁和最後一個頁面的連結。
提供使用者正在流覽的什麼類型的物件資訊。

提供使用者正在流覽一套物體的有關資訊.使用形式:”[$ObjectName]s [DisplayedItemRange] of [TotalItems]“
本環節的順序如下:第一頁,上一頁,下一頁,最後。
使用的圖形箭頭,以增加連結的目標大小。
顯示翻頁在不可用情況的管理顯示狀態。
搜索分頁
使資訊轉化為按相關性分類排序的一系列網頁。
提供分頁控制來提供訪問分頁內容。
分頁控制
顯示導航控制項作為一行連結。
本環節的順序如下: ‘前一頁’ ,網頁連結, ‘後一頁’。
在標籤’前一頁’後,顯示左箭頭。
在標籤’下一頁’前,顯示右箭頭。
使用可用滑鼠點擊的箭頭。
網頁連結應設置包含最多10個網頁連結。如果有少頁的結果存在,只顯示網頁上提供的網頁連結。
當網頁在1-6頁中時,該網頁連結應始終從’1 ‘開始。
當在6 頁(7頁以後)的任意網頁上,該網頁連結起始應在當前頁面減去5 。例如,當第7頁,第一頁將是2 ( 7-5= 2 )和最後一頁將11 (仍顯示10頁)。

第一頁的結果不會有顯示 ‘上一頁’的標籤或箭頭。
結果的最後一頁不會顯示’下一頁’的標籤或箭頭。
當前網頁的頁碼連結不顯示超連結。
最後在分頁控制區上方加個結果頁的標籤。
基本原理
項目分頁
顯示箭頭圖形有助於區分連結,並提供更大的點擊目標。
與搜索分頁不同,在任何時候,分頁控制項都是可見的(即使禁用),當出現無法控制分頁時,這可以防止用戶分心。
搜索分頁
顯示箭頭圖形有助於區分聯繫,並提供更大的點擊目標。
結合上下文背景,增加不可控狀態顯示箭頭價值不大原因有:

(1)這些顯示箭頭,經常顯示可打開折疊層。

(2)當第一頁的結果已組合成絕大多數的綜合流覽量。展示不可用“前一頁”控制翻頁,這些是沒有什麼附加價值的。
雖然“第一頁”連結很有價值,但也要與呈現在隨機訪問的連結功能競爭。
“最後”連結是沒有什麼價值的,因為結果是按相關性排序的,這也是問題,因為結果總數(因此,最後的結果)可能不知道。 同類模式圖片展示

原文:http://alite.aliued.cn/archives/750
文章提供BAYSTARS DESIGN網頁設計公司

矽谷創業家用「結婚」來募資創業,談婚禮支出收入的潛機會

矽谷人喜愛的婚宴場所史丹佛教堂,天然的採光、百年建築,合唱歌聲從三層樓高的舞台流洩而下有如天籟之音。一對網路創業家,即將在明天(8月29日)在史丹佛大教堂結婚,特別的是,這一對新人竟然搞了一個「史上第一個創業家專用的請帖」!

各位知道,美國的請帖都會附上所謂的「禮物清單」(wedding registry),這些都是新人的新居即將需要的家具用品,請求賓客「贊助」。譬如鍋啊碗啊瓢啊盆啊,烤箱、洗衣機、乾衣機、烤麵包機、花瓶……等等。新人到店面那邊看過,決定哪個型號、哪個樣式,再寫出這個「禮品清單」給賓客「認購」。歐美人顯然不像華人這麼有智慧,我們都是包紅包,你可以自由決定要怎麼使用這筆錢,是吧?但,歐美的新人就沒這麼幸運了,他們常有一種感慨:我們最需要的不是這些鍋碗瓢盆,這些東西我們自己都有了,不必換新的。我們現在最需要的是──
是……。
錢!
對啊。新人剛結婚,當然需要錢!
需要錢做什麼?不是裝點家裡,而是拿來「衝事業」啊!尤其是這兩個網路創業家,剛好正準備要開一家公司叫「Aboomba」。他們很希望大家幫他們買的是「電腦」,而不是那些銀叉子銀湯匙,但天下沒有這樣的「購物清單」,於是,他們自己做了一個──前所未有的購物清單!這個清單號稱是「全球第一個創業家的購物清單」(start-up wedding resgistry)。這個清單中包括:認購一個工程師一日薪水要273.97美元(好貴!果然是美國),認購一位律師的顧問時間一小時要385美元(有這麼貴嗎?),還包括將目前公司裡的「急救箱」換成真正的醫療保險需要134美元,還有到East Palo Alto的IKEA買家具需花200美元,以及正版「暈倒」來讓比爾蓋茲更有錢一套要95.64美元、Office需要205.17美元,還有房租費、電費、水費…通通列出來,還包括一些矽谷創業家特有的支出,譬如認購和一個創投的午餐費要291美元,和知名創投Tim Draper則是「時價」,幽默一下。

至於這些東西要「去哪買」?這對新人在影片裡也說得很清楚:「他們已經設了PayPal帳號。」就是說,請大家直接付現金給他們就好了,讓他們自己運用這筆現金啦!這,等於變相在「籌資」,利用人生大事這麼一個「難得的機會」在「籌資」啦!厲害吧?平常的長輩,可能要發瘋了,這是哪門子的購物清單,這種直接「拿錢」的方式,照這對情侶在影片中的講法,還真的是無聊當有趣、擺爛當幽默,很不禮貌哩!還好,這對新人的長輩朋友們,許多剛好是矽谷的老創業家、律師、會計師、教授……他們看慣了創業家,知道創業家需要什麼,也知道這對新人現在正在創業最需要的不是金叉銀叉而是「這些」。

有趣的是,這種作法,竟然沒有人試過?這對新人巧妙的將「創業計畫書」包裝一下,在這張「計畫書」中,他們甚至不必寫什麼這個事業要做多偉大的事,他們只要列出一堆東西,大家就「必須」付錢。他們擺明,反正大家就是要給我這個紅包了,那我就趁這個機會向大家募款創業!

想到,婚禮是人生大事,單單「婚禮」這個產業就不知養活多少廠商,如果長輩們知道新人真有心要創業,大概也會支持他們,這筆錢就不要給廠商賺,給新人吧!問題是:雖然華人已經採用「紅包制」,但一般的新人還是必須花很多很多錢,在訂場地、買囍餅、印喜帖,新人都不見得願意做這些,有沒有其他替代的巧妙方式來讓長輩覺得ok,促使更多現金放到新人口袋裡?這會是一個大機會,讓新人可以「利用」這個習俗,得到自己新生活最重要的「第一桶金」。
這筆支出將非常非常的龐大。你說,什麼現代人不結婚了然後就不玩這個產業?那是騙我們的,讓我們這些新進創業家不敢貿然進來,讓其他那些業績滑落的生意人乖乖接受這事實然後不思改進而倒店大吉。其實,每年還是有很多很多人在結婚,很多人結婚的預算是非常非常高的。最重要的是,親友們也都可以花出一筆很高很高的單價來「祝福」這場婚禮的!一桌2萬,開50桌就要100萬,這100萬為何不能拿來當作創業資金,反而要用親友的祝福來支付?

現在的趨勢,是「年輕人自有自己的想法」,於是許多商家祭出「更kuso更酷的婚禮」來應對。但他們不知道是,大部份年輕人在底層更實在的需求,尤其在這個全球經濟成長停緩的時刻,應該是「利用婚禮」。哪個創業家可讓新人可將心中「利用婚禮」的願望來「正當化」?讓所有的人都沾沾喜氣、皆大歡喜?
謝謝矽谷創業家的指教。這一塊,好像是喜洋洋的紅色市場中的超大藍天!

文章來自mr6
文章提供BAYSTARS DESIGN網頁設計公司

2009年8月26日 星期三

MID ,小筆電,智慧型手機(四)平板電腦捲土重來

多元化的行動終端,將不會再有能爆大量的情況。


◎情況不一樣了
筆者猜想,這篇文章可能在發布後沒多久,謠傳多時蘋果公司的平板電腦大概就推出了。由於目前沒人知道這部謠傳中的平板電腦到底是什麼樣子(或者知道也不能說),甚至懷疑根本沒這回事,因此這篇文章將避免去談個別廠商的產品策略,以免憑空猜測。


平板電腦是公認已經被判了死刑的。筆者曾經在2003年11月30日寫下「平板電腦何以失敗」一文,在當時的時空環境下,認為會需要帶著電腦到處跑的人只有商務人士,一般人都是用桌上型電腦。而商務人士因為需要行動辦公,所以不可以沒有鍵盤。

當時強調可以手寫輸入的平板電腦,其手寫輸入功能顯然是針對一般大眾設計。然而,最終考慮購買平板電腦的卻是嫌棄手寫輸入的商務人士,在價格與筆記型電腦相當的情況下,商務人士很自然的優先選擇購買普通筆記型電腦。平板電腦在這種情況下是不可能賣得好的。
然而,時空背景在發生變化。如果我們現在還問:是誰會帶著筆記型電腦到處跑?我相信答案是模糊的,或者說,「商務人士」這個答案顯然不會是必然的唯一的答案。經過了五六年的發展,筆記型電腦已經成為很多普羅大眾的第一台電腦,而小筆電則成為第二台電腦。
筆者已經看過太多次,假日時在星巴克咖啡館裡頭看見年輕人桌上擺了一台小筆電,就著一杯咖啡在上網或者看影片。小筆電是一個憑空被挖掘出來的使用者族群,它的存在只證明了行動裝置即將朝向多元與分眾的市場發展。當我們在談平板電腦時,要注意,情況不一樣了。


◎行動裝置走向小量而多元化
行動裝置的多元性與分眾性不會憑空發生。他導因於幾個條件:1)成本與價格的降低,或者說性能價格比的提高。例如小筆電很便宜,但拿來看電影卻依然流暢,拿來上網也很夠用。同樣的價格在五年前是做不出一台這樣的電腦的,而現在可以。


2)由應用帶動,找到了新的使用族群。例如,小筆電最大的應用訴求是上網,而3G無線環境的成熟是推動這件事情的一大助力。由應用的帶動而產生出對於新終端的需求,將是一個值得注意的趨勢。這件事情以前是困難的,因為無法以夠低的成本做到,而現在是可能的。
就好像筆者在本系列前幾篇文章提到的MID 一樣,其實把MID 做成無線的視頻多媒體終端是非常合適的,不要老把它當成電腦看。如果持續的將MID 當成電腦,始終想把他在智慧型手機與小筆電的縫隙裡找定位,高不成低不就,那就是鑽進死胡同裡去了。

在此認知下,若要讓螢幕比MID 更大的平板電腦來承載某種應用,謠傳中蘋果公司平板電腦想搭載電子書,真是個好主意。網上大量討論認為平板電腦沒有鍵盤會影響使用,現在,看書需要什麼鍵盤?只需要上一頁下一頁。當然價格會是個關鍵,它不能賣得比小筆電貴。
這種走特殊化應用道路的行動終端能賣多少台?既然是應用驅動,就意味著每種終端的銷量是有限的。電腦製造商老想著批量銷售的好光景,還沒法適應多元化的行動終端,每個類別都只能賣出相對的小量。現在大家對小筆電的銷量感到失望,其實是之前的預期太高了。
多元化的行動終端,將不會再有能爆大量的情況。

◎小筆電可成電子書閱讀器

雖然蘋果公司的平板電腦還不知道是不是會搭上電子書的應用,但實際上這幾個月電子書的市場已經是非常火爆了。有了Amazon的Kindle 經驗(算是成功傳統>的出版商,大型的連鎖書店,甚至連電信業者都摩拳擦掌躍躍欲試,這幾個月來新聞不斷。
電子書一般而言需要消費者購買電子閱讀器。而在購買的時候通常會有幾個心理障礙:1)這麼貴,可以買台小筆電,或者買上一箱書了。 2)買了以後沒有多少書可以看,而除了看書又不能拿來幹嘛,實用性很有問題。3)習慣,老覺得要觸摸到紙張才有實際的感覺。
以上除了第三點是幾乎無解,以及電子書內容確實急需擴充之外,另外兩個問題是有解的。那兩點無非是指出,消費者想要有一台功能「不只是拿來看書」的機器。做法之一,是把現在的電子書價格再降,降到消費者認為「這個價格的機器做不了其他事情也很正常」。
另一個方法是,賣一台小筆電(或者平板電腦)給消費者,告訴他這是台全功能的電腦,但經過特殊的軟硬體與線上商店整合,拿來購買與閱讀電子書特別合適。小筆電(或者平板電腦)的價格是消費者能接受的,而電子書則成了增強附加價值的部分。
其實,平板電腦並不見得是最佳的電子書閱讀裝置,如果要承接上述觀點,擁有鍵盤還是很重要的。如果能有一種小筆電,打開後整台可以旋轉九十度(就像打開一本書一樣)來閱讀電子書,相信會比較接近目前的閱讀習慣,以及兼具小筆電的全功能。

(文:黃紹麟)
文章提供BAYSTARS DESIGN網頁設計公司

培根領帶,網路家的浪漫計略


網路上賣什麼都有機會,但是,如果叫你賣「培根」(bacon)呢?就是那種,明明大多是肥肉卻已被煎烤得硬硬的香噴噴的美國人最愛吃的肉品,網路上開個「培根.com」會有人買嗎?這麼多超商都在賣各式各樣的培根冷凍食品或即買可食的培根菜了,網路賣應該沒機會吧。
那麼,賣領帶呢?我們在機場看到「Tie Rack」這家店,裡面都是領帶;不然到台北的夜市也有攤位,裡面都是領帶。在網路上賣領帶,已經有Ties.com、Wildties.com、Neckties.com等網站,什麼領帶都有賣。現在要開一間領帶店,實在很難成氣候。

不過,周末一則新聞提到,創業家竟推出一個專賣「培根 + 領帶」的網站。這網站叫「BaconTies.com」。它賣的不是可以吃的培根,也不是一般的領帶──
它賣的是,上面印著培根的領帶!一條要19.95美元,大約700元台幣左右,這條領帶其實也沒暗藏什麼玄機,大約就這樣而已,號稱:「會讓你的朋友對著它猛流口水」、「這是美國最流行的『食物穿著』(food-ware)」!


這個網站並不新潮。我在高中時代就買過上面印著烤肉串燒的領帶,但這條「培根領帶」顯然又沒這麼粗糙,幾位創業家的來頭可不小,他們幾位原本就是專門領帶花樣的圖畫設計師,只是以前都搞「OEM」,幫剛剛提過的這些專賣領帶的網站如Ties.com、Wildties.com等設計了各式各樣的領帶,直到現在才出來創業。

創業初期,他們幾個人聚在一起,拚命想了好多好多種領帶設計,最後考量到色澤、話題性,大膽的選做這個「培根」主題。並且透過管道找到最高等級的布料(什麼microfibre的微織品),還配合那布料的紋路,調整花樣,讓它和「培根」的造型可以完全的配合。你買下來以後遠看,看不出來上面都是培根,只會覺得這條領帶散發出一種特殊色彩的光亮?近看,也不一定看出來是培根,只覺得這領帶的花紋真是獨特!等到對方認出裡面的培根,已經不自主會心一笑,化解商場上弩弓處處的緊張氣氛。

這就有意思了。你幾乎可以想像,這一群創業家如果出去找錢,他們是找不到資金的。
如果你是一個領帶設計高手,出來單飛,做一家領帶公司,你會怎麼做?你很有可能利用你的人脈,進口了最棒的絲料。然後,參考目前最紅的幾種領帶的顏色,推出很類似的,然後價格還比人家便宜。你會強調你擁有最棒的領帶,你會強調這是一個新的男性的西服品牌,它的目標是成為下一個Hugo Boss,還是下一個Armani。
無論你怎麼做,絕對不會把畢生的心血和畢生的功夫,投注在一條如「培根領帶」這麼大膽的產品上面!


這就有趣。為何這幾位擁有資深領帶設計經驗的創意家們,竟然選擇了將自己的第一個創業作品,貿然的印上「培根」?
創業家呵!
一生的一次機會,尤其在公司做久了,更知道這是一生的機會。或許他們已經在這行業夠深耕,對他們來說賺小錢已經不是首要事項,所以他們要玩就來「玩大的」。他們將這樣一生一次機會,貿然的印上「培根」!


然後,創業家會說,這條培根領帶,可是有「計略」的──
看!創業家說,當我們的「培根領帶」紅了,第一個發生的事,就是這個帶點紅又帶點鮮橘、彷彿會發亮的顏色,將會成為類似Tiffany的淺藍、Purdie’s的鮮紫、可口可樂的鮮紅……這樣的「地位」!接下來,這個「培根」主題,也會延燒到其他的裝飾品。一開始大家只能接受培根領帶,等到大家都認識了培根領帶以後,所有加上培根和招牌鮮橘色的產品,包包、T恤、帽子、內褲……都會跟著來,功名利祿也跟著來了!
聽起來還算有道理?但這樣的「道理」,碰到真正的生意人,卻只有被打槍的份。生意人會問:「就別說培根了,你有見過,其他貼食品而成功的知名服裝品牌嗎?」
「你的培根點子,有做過市調嗎?」


生意人就算自己心裡面對這條「培根領帶」頗為心動,仍然會問這句話。因為生意人的訓練,讓他們並不是想做自己想要的東西,他想做的是「大家」想要的東西。創業家的所有計略,應該是集中在確定大家會想用這個東西。問題是,你要怎麼知道大家想不想要?
大家在第一天就想要的產品,為何會輪到創業家來做?


我認為,要打長久的「創業戰」,創業家們需要的是「另一種計略」。這種計略叫做「浪漫」。
浪漫,可能是一個前所未見的新品牌的開端!一個完全沒有經過SWOT分析、Focus Group還是市調的,它就是一個驚世駭俗的創意,「培根 + 領帶」,然後用盡了一輩子的功力,包括最好的材料、最好的設計、最好的紋路…灌注在這條領帶上面。儘管最後大家看到的是一個莫名其妙的「培根領帶」,但從零到這一步,沒有人可以做得到;大部份的人,只停留在「開會」階段,講話講一講,口水流一流,就「回到正軌」。太清醒的創業家,太多計略的創業家,第一個失去的反而是創業家最強的計略,那個叫「浪漫」的計略。

很多人腦袋都很棒,也都可以在人生舞台上扮演很好的角色,但他們沒辦法出來創業;他們缺的不是能力,而是這種浪漫。反之,創業家帶著創業計畫書,大家聽不懂,聽了老半天都聽不懂。這時候,創業家堅持的不是自己的計畫,而是堅持著自己的浪漫;浪漫的範圍很大、肚量很大,它會在同樣的浪漫原則下,不斷做一些調整、不斷的調整。最後,不見得是它去找到市場,常常發生的是,市場被它所「收服」!


浪漫不能吃,但浪漫不能不在。看看自己的行囊中有什麼?看看自己的團隊中有什麼?「浪漫」,就是這條創業路上必須永遠堅持的終極計略。

文章來自mr6
文章提供BAYSTARS DESIGN網頁設計公司

2009年8月25日 星期二

安排時間的藝術:塊狀時間表(Blocked Timetable)

首先,我談到美國知名網路科技人Paul Graham前陣子讓很多人很喜歡的一篇文章:「Maker’s Schedule, Manager’s Schedule」。矽谷的創意能量近半年有消沉的趨勢,這段期間亦出現了大量的「心得文章」,研究一間創意公司要怎麼管理創意、統御創意?


其中一篇我很喜歡的,是由知名網路科技人葛拉漢(Paul Graham)所寫的分析。他在講,一間公司之所以沒辦法統御創意、管理創意,其最重要的原因是在於──「開會時間」不對!
此文章一出,許多創意工作者立即表示認同,它簡直…講出了許多創意工作者的心聲!
葛拉漢表示,倘若我們將一支創意團隊拆成「創作者」(也就是工程師、設計師…等)與「管理者」(包括總經理、總監、產品經理…等),葛拉漢表示,「創作者的時間表」(maker’s schedule)與「管理者的時間表」( manager’s schedule)簡直是「天差地遠」,一定要小心處理--「管理者的時間表」就像傳統的記事本的設計,它以「一小時」為基本刻度單位,這些總經理、副總經理、產品經理,每小時都有不同的會要開、有不同的人要見,葛拉漢說,這是一個很適合「下命令」的時間表,可以隨時安排、隨時下指令,將時間拆開再重組回來。


不過,「創作者的時間表」就不同了,尤其是對於創意工作者來說。葛拉漢認為,創作者的時間表,每一個「格」至少需要半天這麼長,因為,每一個創意工作者的腦子都不是隨時在等候(standby)的狀態,不像管理者,只要知道下一場要去哪裡活動就可以了。
葛拉漢說,一個管理者要讓他旗下的創作者生氣、發瘋、錯亂、抱怨其實「很簡單」,只要管理者想辦法用它的「時間表」來命令創作者,叫他們開會、叫他們做東做西,創作者一天的時間被切成幾段,一天就完蛋了。雖然還剩下幾段破碎的時間,但它們是組不出什麼好成品的!
(中間一段400字省略)
管理真的很有趣,如何讓一群搞創意的人,集中火力變成更大的創意?

這件事,本身顯然亦是一種藝術。這篇文章我自己也很喜歡,因為自己任主管時候,很自然就會以「管理者的時間表」來管理,容易影響到做事的人。但也我覺得,「時間表」這件事情,不只在管理或創意上面很重要,它對於「創業家」而言,或許還要更重要一點!以前有寫過一篇文章「黃金時間表」,今年我則開始力推另一個新概念,上周接受《中時電子報》專訪亦提到了這一個概念,我將它叫做「塊狀時間表」(Blocked Timetable):新時代來了,介紹一個新觀念:「塊狀時間表」(blocked timetable)。我們太需要「塊狀時間表」,因為我們的生活已經被侵蝕得不成模樣!


這期的《紐約時報》披露了美國一個新現象,他們說,全美國網路流量在全天的第一次暴衝(spike)已提前到每天早晨七點鐘,奇怪的是,這時間並沒人上班?報導說,顯然,大家開始一天的方式就是打電腦上網。接著,從電信業者傳來的資料也顯示早晨七點到十點之間的簡訊量,自去年到今天狂增了50%之多,這時間應該也不是談公事,而是平常一些私人之間的簡訊。
他們說,這是「早晨的淪陷」。現在的美國家庭已經不坐在一起吃早餐了,家庭成員的一天就從早上六點開始,爸爸先上Twitter看看,兩個兒子則先看看手機有沒有簡訊,再看看他們的Facebook。兒子和老爸都這樣了,那媽媽乾脆也上網寫部落格,不煮早餐了。值得注意的是,他們一家人依然很早起,甚至比以前都還要早起。不過,這麼早起已經不是為了與家人相處,而是早點起來上網完成所有該完成的事:回覆同學的留言、完成昨晚未玩完的小遊戲、或是上傳昨晚家庭派對的照片……


一家四人的一天,就從四台電腦前開始!
我們才發現,現代人最大的困難,是時間被網路給打得支離破碎,零散不堪。我們已經無法悍衛自己原本24小時計畫的「時間界」(time boundary)──我們一邊上課一邊上網,一邊開會一邊上網,一邊等公車一邊上網,甚至連一邊吃早餐也一邊上網……。


不知不覺中,我們將人生最重要的幾樣事情,包括健康、親情、愛情……全都丟到旁邊的籃子,這籃子沒有排時間,等到有空閒時間才拿出來用。而我們每當有空閒,第一件事是看看自己「需不需要上網」?若可再等一等,我們才會將這段時間拿來和家人好好吃一頓早餐。健康、親情、愛情……它們明明是最重要的,卻是配合的其他的時間一起,有空位才會塞進去!
對一個創業者來說,我們追求的是成功,但但我們追求的成功應是所謂「均衡的成功」。我們可以發現,在網路世代,最會利用時間的人,會懂得將時間切成「塊狀」(blocks)──
所謂「塊狀」,就是有意識的告訴自己,7點整應該吃早餐、7點半應該慢跑,8點才能上網…。整天的進行,無論是大小事,都化身成一段又一段「塊狀時間」,嵌在自己的時間表裡。
「塊狀」,是在悍衛人生的前後次序,保證我們可以將每一天過得很均衡,不會被網路、被創業、被雜事給打擾。以我的例子來說,我現在就算再忙,依然會固定在早上慢跑,且陪家人吃晚餐。一周就算做不到每一天,至少也要有兩、三天做到。這些「時間塊」,我可是要記到筆記本裡,就有如重要的約會一樣!


(之後1200字省略)我在這篇文章也提到,創業家希望「求快」,愈快成功愈好,但世事難料,或許我們真的能在一年內成功,但也或許,我們要拖個五年才會成功!這五年期間,如果我們不注意養生,不注意家人與朋友,那「蠟燭」很快就會燒光光了,我們絕對撐不到五年!萬一要十年才能成功,那就算我們已經有了運氣、有了資金、有了一切一切的成功要素,最後我們卻患了什麼癌症,或者家人都已經不知道跑到裡去了,那有什麼用呢?


創業家是一場長期的戰鬥,我們若領悟到這點,做法會比較不一樣。「塊狀時間表」有如堅固的鋼筋,它可以撐起我們人生時光的框架,讓我們在裡面可以好好的發揮,讓我們不致於因為過於投入而無法「觀前顧後」。我們保持每天的運動、注意每天的營養、灌溉每天的親情友情。這時候若創業尚未成功,需要其他地方的收入,亦能以「塊狀」方式,好像中小學生的課表,半天一塊,和理念相同的伙伴與老闆一起工作,領薪水。


這邊也埋了一個伏筆。我認為,接下來,大家會不講「全職」(full-time),不講「兼職」(part-time),只有「塊狀職」(blocked-time)。我極相信,這會是現代「個人主義」和「外包主義」兩者黃金交叉時,最有可能發生的未來工作型態,也是充滿創業家個性的菁英族群們,最合適的工作形態。


文章來自mr6
文章提供Baystars Design網頁設計公司

在3C商店借用攝影機拍攝上傳的黑人小男孩大爆紅!


這星期傳出一則有趣的爆紅新聞,有一個還在放暑假的13歲黑人小男孩,在開學前給了自己一個大禮物。是的,他拍出了一則爆紅的YouTube影片。已受邀準備上美國各大電視節目!

先來看看這則影片:
奇怪,影片看起來…畫質很好?
而且,旁邊好像有不少人充當「臨時演員」的觀眾(只是他們表情怪怪的)?
原來,這位小男孩,是使用商店裡的攝像頭自己偷偷拍的!這間商店正是在位於紐約市的Apple蘋果商店,後面那些人,都是真正圍觀的觀眾。當小男孩在唱的時候,旁邊人其實只聽到歌曲在播放,小男孩只是對嘴而已。小男孩偷錄了幾次,慢慢摸出「訣竅」,他會選一個平常的下午過去,人比較不會這麼多,佔用一台電腦以後,調整攝影機就開始錄了。他另外再開了一個視窗,播放著YouTube的另一首歌曲,小男孩「對嘴」唱,iMovie同步錄下高畫質影片,拍完後,就直接使用那邊的網路上傳。


這片子最好看的地方,其實是──
不只是看小男孩充滿天賦的動感,片中小男孩「偷拍」的「賊模樣」也很有趣!他會看著螢幕上的他自己(所以眼睛沒有對攝影機),然後,再偷瞄旁邊的人,左邊、右邊,才開始拍攝。這些動作大家都很熟悉,因為大家都也曾經玩過店裡的camera,我們可以說,小男孩如果少了這些動作就不會這麼有趣了。


更有趣的是,旁邊的人走過去,看著這個小男孩。你會看到,有的人微笑,有的人的表情則充滿困惑,有的人拉著同伴看看那是什麼,有的人則看看其他觀眾有沒有什麼反應。而小男孩一開始調整後,接下來他繼續唱得渾然忘我,背景的人,以及人世間看到一個黑人小男孩對著攝影機怪怪跳舞唱歌的各種面貌,就成為這部影片最好的佈景!目前這位小男孩已經錄了好多片子了(他的暑假大概都在那家蘋果商店度過)。其中,最多人看的影片是「bom bom pow」,上線一個月,共有27萬人看,天啊,在這部片裡他還戴上了一副奇怪的眼鏡,可能要仿歌手吧。更厲害的是一周前才上的「I gotta feeling part 2」,才一星期就有19萬次觀賞!小男孩在這星期一已經開始上電視了。他先上了「Good Morning America」節目,然後接下來,他會上「Ellen」、「歐普拉」。不過這些玩意對小男孩來說都沒什麼了不起,他目前還在紐約哈林區念八年級,他現在最興奮的竟然是,九月九日就要開學了,他可以去秀給他的老師看:「老師,我在YouTube紅了!」


這和之前寫的「YouTube上最知名的台灣小孩」很像,不過,也有傳出「陰謀論」,如果看小男孩的背景,雖然他是哈林區出生、父親正在作牢,母親則是失業,不過他的年長的哥哥(已經28歲)倒是有在演藝圈嘎過幾個角色。所以也有人說,這是蘋果的技倆,只是所謂的「游擊式廣告」(guerrilla ad campaign、在NET-MBA課中亦有舉例)。但,蘋果已經否認了。現在小男還已經接到MySpace的廣告合約,而他也已經宣布,要在紐約市的另一個地方,當場錄一段影片給大家看!


這則影片給了我們幾個想法:一、隨機攝影機是機會:我在《搶先佈局十年後》曾預測四處都有監測器、四處亦都有螢幕,現在書寫了兩年,這些攝影機至少多了一倍,我逛夜市,連夜市都有這樣的地方可以試自己的影片。這些影片都是最佳的素材,反正擺著也是擺著、錄著也在錄著,若我們去向這些廠商要來這些影片,定期將這些影片公佈出去,或許都可以做成一個有趣的網站。二、「音樂 + 素景」似乎是爆紅公式:音樂真的是很神奇的東西,目前我們看爆紅的「素人影片」,只要是超過一分鐘的,幾乎都是和一首音樂有關連。而音樂經過嚴密製作,只要是正式出來賣的,應該是沒有不好聽的,只看要搭配哪一個情境而已。所以小小攝影家可以選一首歌,搭配自己錄的一段影片,上傳到YouTube,這種「音樂 + 素景」似乎是一個爆紅的基本原料。
三、小朋友的「無綑綁」:之前幫《N世代》一書寫序,亦提到到現在小朋友都是個個「英雄出少年」,好像大人們就只能「唉聲嘆氣」,然後強迫自己,跑去玩玩看那些小朋友愛玩的東西,然後,更證實了自己已老!
我認為,令人擔心的不是年輕一代「Netizen」的掘起,而是老人失去信心,而造成的「無作為」!


畢竟,二十幾歲的年輕人,想的事情、做的方法,怎麼可能拿來帶領一個三十幾歲、四十幾歲、五十幾歲的人的產業?當我們失去信心,我們就會「盲從」,這時候,我們一窩蜂跑去做小朋友的事,等很久很久以後,我們回首看,我們會發現,這段時間,網路界沒有什麼「進展」!
我不看好小朋友們有一天會比現在的我們還厲害。你看看這位紐約哈林小男孩的創意,重點是,小朋友雖然不可能比大人還厲害,但他們可以和大人一樣厲害,然後又少了一點「捆綁」,所以他們就可以「玩」出一些東西來了!

因此,與其去盲著學著哇塞PTT的世界是怎樣?我覺得對大人來說,真正的商機在我們學到那種「沒有綑綁」的玩法,那種幽默,那種不怕死,那種自然的氣息……。我還不知道那是什麼感覺,但我會試著體會,然後有信心的用自己的經驗,去融合出下一個真正突破的驚爆點。


文章來自mr6
文章提供Baystars Design網頁設計公司

Augmented Reality讓偶像跳出來和素人合唱再「投稿」,又一個網路創意商業化公式?

上次提到「擴張實境」(Augmented Reality)開始被大廠運用在網路行銷站點上,當你到寶鹼旗下的Always廣告網站,列印一個符號,置於你的電腦攝影機前,網站就會跳出一隻軟綿綿的小白兔,栩栩如生的和螢幕中的你「打招呼」。我們驚呼,「擴張實境」這種玩意或許做不出很有用的功能性產品,但拿來「做廣告」還不錯!
這次,又再出一個更猛的!

周末美國傳出幾則文章,提到擴張實境技術即將被用在美國19歲少年歌星Sean Kingston下個月發行的新專輯《Tomorrow》。這個新專輯將附上一個特別的符號,看到特別的符號就知道又可以玩Augmented Reality了,只要你家有攝影機,上到他們的網站,網站就會開始播放歌曲的MV,當你拿著那個符號對準攝影機,猜猜看,悠揚的音樂聲中,誰會跑出來?
沒錯。不是一隻小兔子,而是那位歌手Sean Kingston!

是Sean的「cute版」,這個小小的Sean叫「lil Sean」。據說那個影片會是原本的MV繼續走,但是「沒有主唱」,主唱就是那個「lil Sean」,隨著你手上拿的記號,在你的電腦螢幕裡四處動,據說3D的效果會相當讚!

更猛的還不只這樣──記得開喇叭,還要記得插麥克風,因為你還可以順便錄「影」、錄「音」,將你的身影、你的聲音(也就是有你和旁邊的「lil Sean」),整則影片貼到Facebook、MySpace…!也可以貼到他們的官方網站「SeanKingston.com」,官網會舉辦比賽,讓其他的Fans投票誰唱得最棒。

酷吧?聽周杰倫的歌曲這麼久,還沒有和他一起唱過歌哩!聽蔡依林的歌這麼久,還沒看到她和我一起坐在同一個包廂唱歌喔!

粉絲錄了自己一段,和歌星的「對唱影片」,這種混合式的客製化影片,最早期已經有「ElfYourself」驚人爆紅故事在先。據報導,唱片公司的行銷總監希望這樣使用擴張實境,可以在青少年之間,達到「一對一行銷」的效果,也就是一位少年錄了一段影片,他會想找來他的哥哥姐姐或他的鄰居、同學來看一看。這片充滿未來感的CD已經很受囑目,它還會附贈一副3D眼鏡,以及其他3D的海報、以及網站上面還會有3D的圖案。

這個案例教了我們什麼事?
沿續之前討論。當網路都無法賺錢時,網路創業家繼續不斷冒出的「創意」,有誰可以買單?在哪裡會有價值?上次看到Always小白兔,我們的答案是「廣告主」。現在,除了廣告主,還有另一個可能──
偶像市場。

偶像實在太迷人,但偶像「只有一位」,讓他(她、它、牠)本人辦演唱會、簽唱會,一登台就可以收很多門票;讓他們出唱片,可以吸引很多人買來聽;讓他們主持節目,很多人會來看。但粉絲不滿足、粉絲永遠不滿足啊!他們永遠在追求那個偶像的更多「代替品」,但,現在一個偶像可以幹的事、可以做的「周邊商品」,可以想的都已經想得差不多了。除了請她們開演唱會、賣CD、拍偶像劇、主持節目……之外,還有沒有什麼方法?

這就是網路上場時候了。尤其是「直接賣給粉絲」的其他偶像周邊商品、其他的創意,網路可以做得到。我認為偶像商品的網路化,可以再多利用各式各樣沒有辦法商業化的網路新技術、網站新創意。看看這位「Sean Kingston」,跳出來的動畫人物並不是Sean本人,但在他的MV裡,你又可以和Sean一起唱一首歌,上傳給其他社群網站,幫這個Sean更紅。還有哪些其他網路的技術、創意,可以和「偶像」作個搭配?

這是一個不錯的創業機會。做出來以後,去和大偶像的經紀公司提案。
另外,我還直接想到的就是,已經有很多個網站都在做「線上KTV」的,能不能夠更炫一步,將真人給帶進來?或許全面做很辛苦,但如果針對某一位準備出片的藝人推出這種特別的KTV影片,可能是一個不錯的辦法。

文章來自mr6
文章提供BAYSTARS DESIGN網頁設計公司

2009年8月20日 星期四

DeadSwap(死亡交換),斷線也可以使用的地下社群遊戲


看到這一篇文章介紹了一個很有趣的新「社群網站」。不,它雖然有一個網站,就在「DeadSwap.net」,但這個網站啥都沒有,只是幾頁靜態頁面的解釋DeadSwap到底是什麼東西。它……到底是什麼東西?


它是一個……「不必網路」的社群遊戲。


什麼不必網路?就是說,假如今天地球被外星人攻擊,假如今天發生第三次世界大戰,所有網路都斷掉了、所有的電腦都無法上網了,那麼,這個DeadSwap依然可以繼續的擴大、擴大、擴大,最後擴大到每一個人的電腦裡!


怎麼做的?


答案已經呼之欲出。我想創辦人的靈感一定是來自電腦病毒,有什麼電腦病毒是不必網路,可以傳到對方的電腦的?現今最「方便」的辦法之一就是透過大姆哥隨身碟(USB Drive)。


整個DeadSwap,不是一個網站,而是一個「隨身碟」--



你拿到這個隨身碟,就可以安裝他們的軟體,這個軟體是一個獨立的SMS gateway,透過這個軟體(或許得搭配必要的硬體),你的電腦可以和另一台電腦直接聯絡,不需要透過互聯網的機制。你可以透過這個軟體來和另一台電腦分享檔案。目前,這個網站透露的並不多,除了分享檔案,它似乎還有一個互相傳遞的機制,可以看得出還有哪些其他的電腦也在這個「私人網路」中,不過,每一台電腦都是匿蹤的(anonymous)。


至於,現在這支USB Drive在何處?沒人知道。他們要守密,所以沒人會知道!大概正在美國某處,一個傳一個默默的傳著。目前每個人只能從他們的網站下載一些資料,譬如DeadSwap手冊、等等。


你說,有誰這麼無聊,搞這個「DeadSwap」?據文章說,這個DeadSwap是由一個叫「Telekommunisten」的組織所推出的。他們希望表達他們支持「P2P」的網路模式。大家知道,P2P一度被認為是比現在的互聯網還要更使用者導向、平民導向,包括P2P的音樂分享機制,但是,也因為P2P不易受商業「管束」,所以幾年前一些P2P音樂網站皆被干預並強迫關站、關主機。現在這個DeadSwap的組織是抱著想推動P2P的心態在發明這個新東西的,不過,介紹DeadSwap的這篇文章最後有諷刺了它一下,因為他們到Google上面一搜尋,發現創辦人Dimitri Kleiner在Flickr和Facebook上面不斷的推銷它的DeadSwap,在網路上四處傳播「有誰想要創立一個自己的DeadSwap啊?」作者說,看來,DeadSwap本身依然需要網路、網站來推銷啊!


仔細想想,DeadSwap顯然只是一場噱頭。它儘管有它的意義,但這種「不上網的網站」,如果你將某個點對點軟體燒在10片CD裡散發出去也是有點類似的意思,在「技術概念」上並沒有什麼了不起。但,了不起的,是它的「行銷概念」──


人性就是,愈神秘的東西,愈多人想知道;愈跟你說這是「秘密」,你會更想要說出去!


這個秘密的組織,透過幾個掌在少數人的USB Drive來傳遞,當你收到這一支「神聖的棒子」的時候,你會覺得自己真的有一個任務,好像傳聖火一樣,可不能讓它斷掉!


這個名字還故意取作「死亡交換」,聽起來很恐怖,是為了提高這個機制、這個遊戲、這個怪東西的神秘感,讓它聽起來更像某個秘密組織的地下運作。我們知道中國人喜歡僵屍,美國人最喜歡吸血鬼和「秘密組織」,這類的小說一定大賣。現在每個人都可以透過DeadSwap,參與一個沒有網路也可玩的社群網站,感受一下當秘密組織的樂趣。而DeadSwap據說也將自己設計成一個有點好玩的「小遊戲」,據文章是說,裡面的人有三種角色,一種是「兔子」,一種是「Sleeper」,一種是「Agent」,雖然不知道它會怎麼玩法,但聽起來就覺得蠻刺激的。


那,創業家可從中學到什麼?


看,我家裡擺了好幾支廠商送的「隨身碟」。這種隨身碟,插上去就會播放廠商影片或文件,裡面可以再存一些東西。如果這些隨身碟可以設計成一個像「DeadSwap」這樣的小遊戲,讓人希望就像DeadSwap這樣,不要透過網路,而透過朋友交給朋友一支隨身碟、一片神秘CD,這樣一個傳一個,「偷偷的」傳出去呢?


創業家可以想一想。如果你有一百萬可以投資在行銷預算上,說不定這種「用不到網路」的行銷手法,就是……全世界上最棒的網路行銷手法!



文書來自mr6

文章提供Basytars Design網頁設計公司

PolyVore和DailyBooth兩樣情,貢獻照片已過時,貢獻「照片集」卻悄悄火


最近矽谷在講兩個網站,兩個都是Web 2.0型的「貢獻照片」,但兩者呈現完全不同的成績。


第一個網站其實很受囑目,它叫作「DailyBooth」。不同於其他的相簿網站,這個DailyBooth的點子很簡單,它把自己搞得像「Twitter」微網誌一模一樣,只是把140字換成一張照片,譬如這個會員的頁面,可看到她現在有11個跟隨者,最近拍了八張照片,照片下面也有一小段文字說明一下。


這個點子聽起來還不錯,是吧?但真正的梗在,根據這篇TechCrunch文章,這個DailyBooth網站的成績已經極度驚人!TechCrunch從創業家那邊要來一張流量圖表,顯示從今年一月開站起,到三月就已經從零達到160萬名月不重覆拜訪人次,到了六月更達到240萬人,到了七月則是320萬人,整個網站呈現往天空直衝!這個數字非常驚人,一度讓我們以為這個網站真的是非常值得觀察一下,也引發矽谷好幾篇文章的討論。報導說,微網誌主要是上班族、OL在玩的,但DailyBooth主要則是青少年、青少女在玩的。


不過,我基於好奇,自己再查證了一下其他的流量表,卻看到完全相反的景況──


這個DailyBooth的流量爆衝,似乎並沒有顯示在其他公開的流量器上面?請看──

Quantcast說是大約一個月UV是9000人,天啊,才9000人?Alexa的圖表是緩緩往上趨勢,它說美國佔一半(所以依Quantcast的數字乘以二也大不到哪裡去),而Google Trends也顯示從三~七月呈現「平」的狀態,令人對這位創業家給TechCrunch的流量報表起了懷疑。


或許DailyBooth真的很厲害,但讓我們先放下這一塊,來看看另一個同樣是「叫使用者提供自己照片」的新創網站。


這個照片網站叫做「Polyvore」,這個網站上周才成功募得了560萬美元(台幣1.6億)的創投資金,因為點子還蠻像紐約人愛看的,所以進了主流媒體的報導。Polyvore做的是「使用者自製的流行衣服」(User Generated Fashion)。這個網站就真的「貨真價實」了,因為根據Quantcast的資料,Polyvore真的就是一個月350萬全球不重覆使用人口、美國部份也有一個月160萬使用人口!如果你用Google Trends比較一下Polyvore和剛剛那個被質疑的DailyBooth,你會發現Polyvore才是真正的「爆衝」,它沒有在七個月內紅,但是從2007年七月左右開始,至今兩年來,它的流量一直是往上竄,從來沒有下滑過。竄到現在,已經是DailyBooth的八倍多,也間接證實DailyBooth的「400萬不重覆人口」的數字應該是有問題的。


那我們來看看,為什麼Polyvore可以這麼高流量?


為何這麼高流量,卻直到現在才引人注意?


美國網路界的問題,就是在於他們總是很喜歡這種Twitter這類微網誌主題,但Polyvore同樣是做照片分享,它卻不是微網誌主題,而是一般重度網路人「看不懂」的模式──Polyvore提供的是,讓使用者自己搭配「衣服」。當然,這個點子本身也已經證明「不容易」,譬如之前一度也看到台灣這邊好幾個團隊在做類似的點子、使用者配衣服的網站,這個Polyvore同樣是用炫麗的技術,讓你把幾件衣服拖曳在一起,給其他人看看。為何,它會成功?


我看了一下這些年輕人所自創的衣服,我發現,Polyvore其實已經不是在貢獻配衣、貢獻「照片」。我發現,在Polyvore裡面所有的「作品」,都是一框的「照片集」(Picture SET)!


Set?什麼意思?


就像這張、這張、這張,這種東西叫做「照片集」。你可以看到,裡面不只有一張照片,而是照片層層疊疊,構成一個情境,成了一張更大張的「照片集」。為了畫製這個照片集,你可以從它所提供的照片中去選擇,然後兜在一個畫板上,但,你接下來也可以上傳自己畫好的背景,將這個框框弄得更豐富。最後加加總總所呈現出來的,是一個情境。裡面的就像一本小學生的「剪貼簿」,那雙鞋或許是位在角落,那件衣服是放在中間偏旁邊,它們都不是主角,主角是整個「情境」。而讀者呢,除了看到你這張全部混在一起的「照片集」,還可以看到到底你這個照片集是由哪幾件衣服、哪雙鞋子、哪條項鍊……兜在一起的。當然,Polyvore也不忘隨時將這些東西連到像Gap.com、Zappos這些線上商店,讓讀者可以購買!所有設計這些美美照片集的網友們,都成了真正的品牌化妝師、真正的銷售大軍!這種「照片集」,整個呈現出一個感覺、一種設計。Polyvore也定期舉行設計比賽,讓大家比一比哪一個情境的設計最棒?


Polyvore的成功,讓我們看到一件事:分享照片已經太多網站在做,創業家已經切不進去。但圖像實在太令人喜歡,所以「照片集」依然有機會。我們來看看,還有沒有其他的點子,是可以讓使用者自行去貢獻「照片集」的?讓他們除了上傳自己的照片、使用網站裡本來就有的照片,還可以塗上自己的東西,最後變成一面花花綠綠的牆,這是每個人的「作品」?


甚至將這個機制,來做群眾一起來的數位出版(電子書)、數位印刷(名片)甚至網路的版型?網站技術已經可以做到這點,網路上也有人覺得自己很有設計感,是躍躍欲試的。如果「照片真的能勝千言萬語」,那,Polyvore的成就,讓人看到「照片集」的概念下,還隱藏著好幾個可以爆紅的網站!


文書來自mr6


文章提供Basytars Design網頁設計公司

2009年8月19日 星期三

Mahalo發起賺錢大軍幫它開「資料網頁」,頭一個月就有5位網友賺到5萬台幣


這周美國網路界默默流傳一個關於知名但不怎成功的網站「Mahalo」的消息。七月份,Mahalo開了好多張支票送出去,一共付出了2萬元M幣(1元M幣是1元美金,因此這形同2萬美元)。其中有四~五位「頁主」(等一下再解釋是何意思),七月份的所得超過1500元M幣(台幣5萬元),如這位、這位、這位網友。


天啊,這是做什麼事,這麼好賺?
先來談談Mahalo這間特別的公司,它的創辦人Jason Calacanis是知名網路人,他籌組這間公司很是容易,但一開始想做的「人肉搜尋」沒有成功相,但它也馬上嶄露了他的彈性,不斷嘗試新的做法。他推出「Guide」的導遊制,學空手道推出了黑帶幾級、X帶幾級的制度,也將重心漸轉「How to」的教學「頁面」。


什麼叫「頁面」?舉個例子,就像這一個叫做「Twitter」的頁面,裡面寫滿了關於Twitter的事,這種頁面,說白一點就是專門吸引搜尋引擎找過來的網站,針對每一個話題、每一個關鍵字、每一個特殊的單字,都設一個頁面,網友在搜尋時就容易搜到然後走進來。Mahalo主攻的一直都是「How To」教學頁面,可能因為他們認,但網路上在做這種頁面的也很多,有的手法接近網路蟑螂,除非Mahalo變成神聖的《維基百科》,不然敵不過云云眾生。可能是這樣,Mahalo一直都不怎麼成功,有些網友甚至說很少在搜尋結果欄位看到Mahalo的作品。


終於,三個月前,Jason為他的公司Mahalo做了大改站,還將它叫做「Mahalo 2.0」。這個Mahalo 2.0做的事就是,採用他們最紅的「頁面」,由使用者去認領、維護,而使用者可以從中,得到50%的Google AdSense廣告收入!


而這個系統,也才剛從六月開設而已,七月等於是他們的第一個完整的月份--而七月份,就已經有網友卻已經賺到這樣的程度,這個改站,也造成了整個Mahalo 網站,上個月的流量攀升!而,據報導點名的這五位網友,也真的「很好賺」,他們每周平均只花20~25小時的時間,一次管理300~800個「網頁」,這些網頁都是只需要花15分鐘做好,放在那邊就好,幾乎不必再去管理。這五位網友顯然都是在下班之後的時間做一點、做一點,每天上網三小時,就賺到這麼多了。Jason說,這個根本就不是一個全職工作,甚至不是一個兼職工作!若你要專心幹的話,只要連續花25小時(大約三天的全職時間)你就可以製造100頁面!


更厲害的是Mahalo想出這個辦法,直接了當,要求大家一起幫它攻佔Google搜尋版面!這個做法實在有點太「白」了,很直接、很有賺頭、很有道理,難怪報導說,Jason真是將網路應用和「資本主義」合在一起。

而且,為了讓大眾都來輕鬆建構頁面,Mahalo這次的改站,也特地將「門檻」又降低了很多。原本他們使用MediaWiki請那些工讀生、導覽員來幫他們建頁面,後來,乾脆整個打掉重做,現在這些「頁主」據說可以先從搜尋一個字的結果頁開始,不必從白紙開始打造頁面,「頁主」只要重新調整這個結果,再加上幾段自己的文字,天啊,一個很會吃搜尋結果的頁面就焉然完成了!Mahalo還會告訴你,現在最熱門的搜尋關鍵字是什麼?想做賺這些字的錢嗎?趕快來「佔地為王」為這些字開一個頁面吧!


這模式沒說的是,它等於是鼓勵這些頁主,自己去推廣自己的頁面,Mahalo也給出了「貼布」,可以貼在自己網頁,每一張貼布一有被按到也可以分享利潤!而且,Mahalo讓這些人賺到錢,這些人本身也會「黏」Mahalo粘得更緊,自成一個封閉的社群,這又是另一個賺錢的機會了。新的Mahalo 2.0分為「Mahalo Answers」和「Mahalo Tasks」,後者就和Amazon的Mechanical Turk類似,前者就和Yahoo! Answers類似,不同的是,它們兩個依然是為了「建頁面」而來的,每一個M幣就是一美元,一次可買10、25、50元。你賺了M幣,可以再將它花在裡面,甚至可以再透過「Mahalo Tasks」再「發包」這些製作頁面的事給其他網友。這個Mahalo若再繼續做下去,可望幾乎成一個「資訊市集」了。

創業家可以參考Mahalo,尤其在台灣這個地方,Yahoo!奇摩的知識家是這麼的紅,因此Mahalo這種「付費知識家」可不可以做呢?大家可以參考一下。
另外我覺得有趣的是,Mahalo的做法教了我們一件事:我們知道,如果我們要號召網路人大家一起做事,最吸引人的就是「固定報償」,做什麼事就得到多少錢。人的需求不同,總會有一個價錢,剛好有需要的人會去拿的,如果來的人不夠好,再調整這個薪水。但,這方法對網站業者非常的高風險,網站本不易賺錢,萬一不小心付太多,那就慘了;付太少,則也會像Mahalo已前的模式,他們以前採「導覽」(Guide)模式,每小時十美元,很難算,這個「時間槓桿」也拉不大,不可能預付聘用太多個導覽員去做事。

而,我們看看Mahalo 2.0現在的「拆帳」做法,這也需要是大公司才可以,不然我怎麼相信你?還好Jason是一個名人,他說的話某程度上有公信力,因此大家願意和他拆拆看,當然,還有一個成功關鍵在於Mahalo原先就有固定的AdSense廣告收入了,或許有些頁面本身就有流量,但對公司來說,一開始將這些廣告收入「腰斬」,分一半給伙伴,就多了好多幫手!這些「頁主」一開始就嘗到了賺錢的滋味,賺不多沒關係,至少他們不是從「零」開始,他們一周就願意花二十小時幫你建造更多的頁面了。接下來,Mahalo再運用媒體,創造了這個「大家都在賺錢」的話題,大家開始談這個話題,開始考慮加入Mahalo 2.0為自己的收入來源,雪球才會滾動起來。尤其是一些高手也會想,我平常就在自己開網頁了,為何要用Mahalo?但現在,Mahalo慷慨的「拆一半」,這些高手就會想,如果我自己單槍匹馬四處開頁面,好辛苦,不如利用Mahalo這個已成的平台,好好的經營!

看了Mahalo的案例,熱血又出來了。網友的力量大,大家都想賺錢,誰能站出來,「幫大家賺錢」?這樣幫大家賺錢的網站,很難不成功的。還有什麼點子?創業家可以好好的想一想!

文章來自mr6
文章提供BAYSTARS DESIGN網頁設計公司

2009年8月18日 星期二

維基百科與惠普實驗室都在做的新事:「海納百川、嚴格整合」

這兩周看到兩篇報導,可以沿伸到同一個趨勢、同一件事情。
第一篇是英國衛報文章提到維基百科目前面臨一個轉型危機--維基百科已經不再是共製的奇蹟。它說,維基百科自2001年1月創立開始花了五年的時間達到100萬則文章(這已經很驚人因為大英百科百年來也只有4萬則文章),但之後只多花了一年又五個月就多了100萬則文章。2004~2007年可以說是維基百科的超級成長期,在那段時間維基百科的重度使用者也從幾千人爆漲到30萬人。但,這篇是說,維基百科的官方統計資料顯示,首先,第三個100萬文章花了幾乎兩年才完成,以日來看,2007年的維基百科每天有2200則新文章加入,現在已經幾乎被腰斬50%,每日只剩下1300則加入。重度分享者從自前兩年只成長了61%,比以往成長都還慢。

看了以上數字,會覺得這篇文章太「杞人憂天」了,畢竟世上的百科資料也是有限啊,該找的都找進來了當然就沒有新資料了。但文章又引用極被敬重的矽谷史丹佛旁邊的PARC實驗室的科學家研究。這份研究可是將維基百科的所有資料下載、用60台電腦來分析裡面的內容,結果發現維基百科的「管理」和之前有了極大的改變,維基百科是可以修改的,每次修改後會有人看看是否ok,若不ok那你的修改就會被「Revert」回去。這次PARC發現這個「Revert」率有了重大的變化,現在有些維基百科的重度編輯,他們的修改被「Revert」的機率只有低到1%。但,有些輕度的編輯(每個月只改2~9次),他們比較少在維基百科改東西,他們被「Revert」的機率竟然從2004年的5%,一路攀升到2008年的15%。而那些超輕度編輯,他們被「Revert」的機率現在更是高達25%。

他們將這個現象歸於人性的排擠效應,舊的人會守住,避免新的人過來;常認識的人會互相綁住,不讓那些不熟的人進來。從小學教室就是這樣,到了維基百科還是這樣,這是「人性」。這篇文章舉了實際案例表示,維基百科現在已經變成一小群編輯所掌控的地方。而另一個原因是,維基百科長久以來一直有兩派,一派是「精簡派」(deletionists),認為維基百科應該被修整到最精實就夠了,另一派是「海納百川派」(inclusionists),認為維基百科應該像海綿一樣繼續吸收各方精華。結果現在顯然是「精簡派」大獲全勝,維基百科依這樣的速度即將失去了Web 2.0大家共同智慧的精華。

但真的是「失去」了什麼?
還是……. 我們「得到」了什麼?維基百科這樣走,我們是可以預見的,但世界就是這樣,充滿了摸不到的角落,才讓每一個人所努力做的創意有發揮的空間,不然,什麼都靠眾人共製,個人就沒有發揮的空間了。

如果說到的是「競爭」,那維基百科示範了一招最厲害的手法,它收集了很多很多的精華,最後愈編愈好;這一小群的編輯雖然可能都是「精簡派」,但最後是「海納百川」的結果。它告訴我們一個成功的維基百科,是「海納百川之後的嚴格整合」。

無獨有偶,這個周末,《紐約時報》也出了一篇觀點在美國網路界整個傳開,它也是在講「海納百川之後的嚴格整合」。這篇文章喊出一個簡單的呼籲:「企業的研發部門不應再採閉門造車,應將主力放在整合!」這篇文章指出,像惠普的實驗室換了一個頭目後,現在推出了一些整合動作,惠普指出他們在八個領域需要學術資源,向各大學徵求,若通過者就給他們學術預算補助,每年的預算給一個實驗室都是大約在一年7.5萬美元(250萬台幣)左右,今年才剛剛將這筆錢分別發給46間大學的61個專案,除了美國外,還有11個其他的國家的大學也拿到了這筆錢。這61個專案中有31個還繼續得到第二年的支援,可見惠普這個研究計畫真的是長期的。IBM之前也都是這樣。

美國很多大企業都養有「實驗室」,包括IBM、奇異、惠普、AT&T…,這些實驗室以往都是「閉門造車」,規模之大,已經不只是「室」,可能是整個地方造鎮,裡面擺的不是工廠與工人,而是大批大批的掛著「Ph.D」的科學家、學者,規模可媲美國家級的單位。蓋這種大型實驗室來發展新創產品在三十年來一直都是這些高獲利的上市科技大廠的「秘密武器」,這文章引用了MIT史隆商學院的研究指出,閉門造車的實驗室能成功的關鍵原因是,從前的資訊流通的成本高,大家只能在國際會議有效率的交換意見,就連同一座實驗室的研究員也只能在吃飯的時候在餐廳一邊看窗外陽光草皮鳥叫聲,一邊交換一下意見,所以將一群金頭腦關在一起,加總的智慧是任何一個地方(甚至在學校)都不及的。

但網路改變了一切。「網路」上面的智慧加總,可能又是一間實驗室的好幾百倍!MIT學者表示,現在還關起門來做R&D已經不是最有經濟效應的方法了,他們說,現在應該走的是一個「聯合研究」(federated)的路線,而企業的研究部門,不必自己創造,而是當一個「統合者」、「整合者」的角色,整合公司內外的智慧!

兩篇文章,都是和「海納百川之後的嚴格整合」有關的,這和我的想法吻合。我認為,現在最強的能力可說是「整合」而不是「自行開發」。這件事從創作、管理……一路到寫程式,都是這樣。外面可以找到免費的軟體,善用他們,「拼湊」成更有價值的東西。你要有能力來作「整合」,當然在沒有侵權的情況下作整合,用網路這台龐大的支援部隊,輕易超過一些傳統者。
你說,這是創造的墳墓?我說,人本來就是如此。我們以為自己的創造是前所未有,其實是從0歲到30歲所看到聽到聞到摸到想到的潛移默化出來的結果。我們每個創意者,哪怕是詩人、作詞家、作曲家,都在我們周遭吸收來的幾百樣素材中做成一個組合。現在我們將這個組合更檯面化,也更有「意識」的去做這個組合,去研究要怎麼將這個組合做得更好。

有人說,我很擅長「整合」;經過多年寫作,我愛上了「整合」的感覺。我喜歡在平時搜尋靈感,尋找好的拼圖,依我想要的模樣,拼出更美的圖樣。如果說2008年和1998年不同處是「資訊爆炸」,多了幾億筆資訊在那邊泊泊冒出來,那麼「整合」就是未來的黃金所在。
上周五提到電子書平台愈來愈成熟,因此徵求對未來寫作有興趣的志工,召募網路素人加入一支「未來文字團隊」。有興趣者請與我報名contact.mr6@gmail.com,我們將一起研究「整合」資訊的新手法、新技巧、新市場、新模式。我們將會是那個獲利的人,而我們一起則又將寫下以前人從來沒有寫過的新頁。

文章來自mr6
文章提供BAYSTARS DESIGN網頁設計公司

Street Swag從遊民需求找一個關鍵產品,暗示公益到商業的路線的好走路線?


看到這則新聞,你會自問,住在不同的國家是否人的命運也會不同呢?在澳洲,竟然連「遊民」都有「床」可以睡!


這篇文章是在講一位慈善的年輕女發明家叫Jean Madden,她原先是一位高中老師,只是看到遊民每天睡在外面,最可憐的不是沒有牆壁,而是他們的皮膚,每一晚直接觸碰到冷硬的水泥地,研究顯示這樣長期下來對脊椎不好,對遊民的心理創傷也大,加上每次寒流一來,有多少的遊民就因為睡在外面而昏死過去。因此女發明家直接設計了一種特別的睡袋,據說是參考以前西部牛仔放在馬背上的坐睡兩用袋,此睡袋下面和彈簧床一樣有彈性、軟軟的很舒服,上面又可以當棉被蓋起來。她將她稱為「Street Swag」,每張床的「售價」是60美元。


女老師從2005年開始這個點子,進行了四年,顯然已經非常成功,四年來已經給出了1萬1千張床,在歐洲的慈善大獎也得到最佳人氣獎!從一個產品,變成一個組織;再從一個組織,現在已經有自己的募款部門。到了現在,它仍正在募資中,希望透過籌資招來製造更多的「Street Swag」床。他們說,1萬張床的成績根本沒什麼,因為政府數字顯示還有10萬個遊民需要幫助,而她們的估計是總數可能多達60萬個遊民。政府做的一些收容中心根本不夠空間,據說,有一處收容中心每周必須將70組遊民阻擋在外、讓他們住在街頭,還有太多太多可憐的遊民還需要幫助!

有趣的來了──
最近,這間組織(或說應該是「公司」),再次推出了另一個新產品叫「移動床舖」(The Walkabout Beds)!其實,「移動床舖」只是原本「Swag」的更舒適版本,床墊更厚、可以和其他的連在一起;不過,這個產品顯然和原先的遊民,無論他們怎麼說,會令人覺得並沒有太直接的關係。這個商品已經從一個援助遊民的床墊,變成一個可以拿來在野外露營的器具。每一個也真的更貴,要價175美元一張床。而,Street Swag為了這個「新產品」,又開了一間新公司叫「Walkabout Beds Ltd.」!


這件事讓我很有感覺。你說,照剛剛那些數據來看,發Street Swag都來不及了?種種跡象顯示,顯然這間Street Swag公司已經超過了一般慈善公益的點子,它已經成功擊中一個需求,創造一間企業,這企業應該是社會企業,但是是一間很完整、很有生產力,而且有機會是一間非常商業的企業。它推出了第一個「商品」,紅了,現在推出第二樣商品,要幫助更多的人。當然,若平常人也喜歡這樣的特別睡袋,也可以自己花錢購買,所得的利益應該也會捐給公益機構。

從這邊我得到一些靈感,創意家想設計新型商品,通常都是絞盡腦汁、瞪大眼睛,四處找找我們生活裡哪裡還有「不方便」的地方。五年前,我剛回台北,碰到下雨天,每次開汽車門都淋一身濕。我就真的很認真的想過要設計一把傘可以放在駕駛座的車頂上,每次打開車門,傘自動打開,不會每次下雨都是司機淋得最慘。但,就算做了這麼一個東西出來,不一定被人接受;畢竟大家這麼多年來也已經習慣了現在的生活了。


Steeet Swag教我們,有一些人,的確過得比我們一般人還要糟很多,他們的糟是「全方面」的,包括食物吃得比我們還糟、鞋子穿的比我們還糟、洗澡的地方也比我們還糟……我們如果能在他們全方面的「糟」的其中,用某個巧思,解決「其中一個糟」,好像對著一大群小鳥射擊,怎麼射都會中,也有機會透過這個產品讓一些人好過一些!此外,全球也有龐大的善款與政府資金,等著挹注給你這種商品,這不叫創業,應該算是「發明」,這種發明不同一般,它是可以馬上看到一些成效的。得到成效、也幫助了很多人、讓自己很好過以後,也有機會可以商業化?
有趣的是,當你是幫忙這些「可憐的人」,你的「供應鏈」也會出現之前意想不到的驚喜。這一批「Street Swag」的製造,其實還是委托澳洲的一間監所來做的。監所希望能訓練囚犯一些職能技術,但他們通常是織小朋友的鞋子、簡便的衣服,皆非商業產品。這次請囚友來製造「床」這種比較大型的產品,給的對象又是成人的遊民,而且許多囚犯自己曾有露宿街頭的經驗,織作這樣的產品讓他們很有感受,感覺上的確更為合適。監所的囚友一口氣就製造了300張「Street Swag」。織完後,囚友們也可以拿到紡織品的三級證照,以後出獄可以使用。
嫌自己每天源源不絕的創意太多?不要對水泥硬牆戳洞,應該對一張紙牆,怎麼戳都是洞;想破頭想不出還有什麼點子、什麼需求?來看看可憐人,你會發現需求是「遍地皆是」,俯拾即得,可以輕鬆發揮創意選一個最能達成的商品,你就是下一間Street Swag公司。


文章來自mr6
文章提供BAYSTARS DESIGN網頁設計公司

2009年8月17日 星期一

Pinboard重開Web 2.0書籤網站,發明了「漸進式收費模式」


大約一個月多前,TechCrunch寫過一個網站叫「Pinboard」。這個網站的特色是完全沒有任何華麗的圖畫,只是一張白白的頁面,用的是最基本的字型、顏色,醜得很驚人,這是網站嗎?高中生做的網站都比這個好吧?幾乎只比當初那個日裔美國人做10小時後爆紅的「Twitterank」一樣的陽春。但……這個普通得如白開水的網站竟然被TechCrunch大聲讚揚,因為──
它做的事情,和曾經名噪一時的線上書籤網站「Delicious」幾乎一模一樣,連它的logo也是一小小塊的放在角落。Delicious那是一個2005年時代很知名的Web 2.0型的網站,後來被Yahoo!以大約2000萬美元收構,大家當時說「太少」,但Yahoo!買下後並未將之發揚光大,最後創辦人憤而離開Yahoo!轉至Google,而原本的Delicious,竟然就放在那邊發爛、生蟲,後來還出現了資料庫當機問題。


或許有些人真覺得Delicious不好玩了,但有些人卻很懷念它!TechCrunch說,這懷念代表很實際的需求的,因為他們到現在還是很需要「線上書籤」。當他們看到網路上某份資料,有時候在家裡看,有時候在手機上面看,有時候在公司電腦看,想要收藏起來,怎麼辦?這時候,最方便也最可以隨時離開的方法就是「書籤網站」,透過一個我的最愛連結啟動Pinboard,這個網址就被輸進去了,回到家裡再來觀賞。注意的是,繼Delicious之後竟然再也沒有創業家做出這麼簡單的書籤網站了,大家默默懷念了一年之後,Pinboard終於出現了,他們很歡迎Pinboard再次回來幫Delicious「重操舊業」。
重點來了,當部落客讚揚的Pinboard時,它還在封閉測試。而這個星期,Pinboard終於開站了!
開站的時候,大家嚇一大跳!
為何嚇一跳?


因為它奇特的付費模式--根據CNET這篇報導,Pinboard竟然斗膽一開站就、要、付、費!今早你進去看,每個會員規定要付5.08美元,大約是160元台幣。不想付的人,就別進來。不過,這筆費用倒也沒有使用期限,付了錢就可以進來變會員,一次性的,以後都不必付了。
那麼為什麼這個會員費長相如此奇特,5.08美元?原來,它的會員費竟然是隨著會員數而「不斷成長」。每增加一名會員,就會變貴0.1分錢,CNET那篇報導昨天推出時寫的是5.03美元,現在已經變成5.08美元,意思是說從昨晚到今天不到一天的時間多了大約50名會員。此網站沒有試用版,必須要你付錢才能用,不過若不喜歡此服務,可在三天內申請,要求全額退費。


這種收費模式,是來自於此創業家自己的想法。有些人創業,真的只想做自己有興趣使用的工具,它是做給自己用的,除了自己用以外,如果可以順便賺錢何樂而不為?不過,事情往往不是這麼單純,這就好像自己喜歡吃泰國菜而開了一間泰國餐廳,每天固定有兩、三桌客人前來品嘗,自己賺夠了錢,也頗為快樂;但通常無論是網站還是泰國餐廳都鮮少有這樣的一個平衡點,通常若你的菜燒得不夠可口,就不可能有固定兩桌人天天來吃;但若有固定兩桌,就表示你做的菜還不錯,中午時段或碰到爸爸節就會踴進很多很多人,你又要傷腦筋去加桌子、搞裝潢……最後,這個當初「想吃泰國菜」的初衷變成一個重擔、難以收拾的大生意,做的事情也不是當初自己所專長的。


這位創業家是波蘭出生,現在仍住在東歐的羅馬尼亞,他顯然並不想成為什麼成功的網路創業家,而這個Pinboard網站顯然只是這位工程師的「小專案」,他平時很忙,忙到都已經可以接到twitter的獨立顧問工程師這樣的大案子,因此這個Pinboard網站在他眼中甚至不到「副業」的水準,但,他顯然也覺得自己需要一個書籤網站、而有些其他人也需要這樣的網站,所以就寫了Pinboard網站來交朋友;既然是交朋友,那麼人不必多;每多一個人對他來說就是必須支付更大的頻寬成本,所以,乾脆每個人愈收愈貴吧!他透露,其實Delicious的創辦人Joshua Schachter正是他的好友,是Joshua建議他採用這個「愈來愈貴」的做法的,既然前輩都這樣講,這位創業家就更放心的祭出這個史無前例的收費法!想一想,由「訓練使用者」的角度來看,這種付費模式也頗有道理,因為愈晚來的人,就表示愈不可能是原本就會用書籤網站的人,因此,網站需要更多的錢來綁住他們,強迫他們看在已經付了錢的份上習慣這個網站。


當然,此模式更抓住了人心的另一點,就是「趁便宜的時候快點買」。明天就會變更貴,後天會變更貴,雖然不是這麼想買,但一想到以後會變貴,就多了一個買下來的理由了!不過,若Pinboard想走這一招,我發現它的價格設計一人只漲0.1美元可說是「漲得不夠快」,大家雖然會趁便宜的時候搶著買,但也要讓大家都感受到「好多人會買」才行,一開始就要給消費者這種感覺,如果我昨晚看到CNET寫每人5.03元,但今早看到每人已經變成20美元,那麼我或許真的會考慮趕快先買一個下來,以後再偷偷轉賣給別人都會划算。但今早我看到「嗯,也不過漲到5.08元」,我就不會想買了。不過,對於其他網路創業家來說,這種「愈來愈貴」的模式倒很有可玩之機。尤其你要一般人掏錢「買會員」很難,但,如果是「投資」呢?現在先買,過了一年後這個會員費說不定已經是比現在還貴兩倍的價錢了,消費者會想,說不定可以賣出去?
網路創業家已有很長一陣子都在想著「Freemium」的收費方案,也就是使用者進來,喜歡使用,再付錢;付不付錢沒關係,網站努力的鼓勵你就算沒付錢也要帶更多朋友加入一起玩才有趣。現在網路創業家又多了一個付費模式可以參考,「漸進式會員費」或許可以和某些網站搭配,有機會成為意料之外的金母雞。


文章來自mr6
文章提供BAYSTARS DESIGN網頁設計公司

「制服專案」:同一件衣服365種穿法活動,談控制下的創意


上周看到一篇文章,美國報社裡有人發起一個「制服專案」,就是一整個星期都穿……同一件衣服!同一件衣服很簡單,難是難在他們規定,雖然是穿同一件衣服,但是周一到周五必須要發明出五種完全不一樣的穿法,這活動吸引了20個女性工作人員參與,大家興致沖沖。
而這間報社同事突然發起這個「制服專案」,靈感原來是來自四個月一位網路人所提出的新活動,這名女士名叫Sheena Matheiken,她自行發起了一個「制服專案」(The Uniform Project),網站就在這裡,她每天穿同一件衣服,連續穿365天,希望這樣穿可以吸引大家注意,讓大家都進來看看,在請這些人捐錢給印度那邊一個「Akanksha 基金會」,讓更多遠在印度的貧窮學童可以得到教育。而這位印度女士亦是有備而來,請了她的服裝設計師朋友為她設計一件簡型黑色的衣服,一次做五件一模一樣的(所以每天可以更換),然後每天再想辦法在這件黑色的服裝上面去作更改、作調整、作添飾。


這件黑色的服裝也真神奇,看--她在8月3日加了一頂小紅帽,脖上纏了一條絲巾,走嫵媚風情;到了 8月4日風格丕變,她在這件黑衣外面套了一件花衫,加上毛襪和運動鞋,整個人休閒到不行,屬可愛風;到了8月5日,她的黑衣變成了外套,內裡穿綠色的短袖衣,頭頂也是綠色葉子作成的花冠,裙子則變成藍色,整個感覺極度清新。就這樣短短三天,從嫵媚、休閒、到清新,這位女士肯定很「過癮」!

不過,這個制服專案應該不是真的天天拍攝,這個專案從拍攝與打扮來看似乎較像是給流行界看的,料想這些照片說不定是一周只拍一次、一次拍七組;還甚至是一個月只拍一次,一次拍31組?反正這位女士的朋友是服裝造型師,什麼東西都變得出來!可惜的是,網路上大家喜歡看「素人」,這樣的拍攝作品,太有距離感,這位女士應該也沒有真的將這些衣服「穿到街上去」,網站上並未提供她穿著那件黑色衣服、在街上與人互動的照片。此外這些服飾雖然搭得很神奇,有的也太不切實際了,不然,她或許還可以順便在網路上義賣衣服!這部份或許可給一些賣衣服的網路創業家靈感,網拍商可以來搞一個「制服專案」,專門發明一些手飾、吊環來搭配「制服」,或是介紹某一件神奇服裝,可以一衣多穿,找一位女士連穿365天製造噱頭;我老婆買下一件東西的關鍵都在它可以「一包多用」,翻過來又是另一個包;這樣來看,這位印度女士的這件黑衣服可以穿365種,買這種衣服真是太划算了。


那些試著學那位印度女士的美國記者,就沒有像這位印度女士這麼厲害了。她們20人只學了5天,就大呼受不了。她們的感想是:穿一樣的衣服真是一件很耗耐心的事。頭一兩天,她們還會很新奇的試試,彼此拍拍相片,但是到了第三天有些人已經熱情不起來了。到了第四天,大家都不是很想再穿了!到了第五天,這20人大多數都說,以後再也不要穿這件衣服!可見,這些人離開住宿學校太久,甚至從來沒有穿制服的習慣,要她們天天都穿同一件衣服,真是折磨!不過,這種「制服專案」卻也提醒了我們「制服」的有趣之處。它多少讓人想起關於「制服」的共同回憶--


亞洲學生許多都曾經穿過制服,制服代表著馴服、訓練,也代表一個團隊的榮譽感。人性很奇怪,表面上來看,大家都不喜歡制服,甚至有人發起很激烈的「反制服」的活動。不過,制服有的另一個感覺是:「控制下的創意」。


當人們被逼著得穿制服,反而更想也更需要與眾不同,所以會想出各式各樣的辦法。譬如,在書包上面加一顆星星、將書包的背帶縮短、或是戴一個特別大的手錶……由於大家都穿著制服,因此這時候可能只需要一個小小的創意,就可以瞬間變得非常的與眾不同。而且這些創意法是他們在其他的時候從來都沒有想過的,為了搭配這套被強迫穿的制服而被強迫去想出來的新創意!那些記者就表示,這次「制服專案」唯一讓她們覺得有趣的,就是讓她們試了一些她們一輩子沒試過的創意方法,也讓她們拿出一些被自己遺忘的壓箱寶,有的已經放了15年再拿出來穿的。以這個狀況來看,控制下的創意,其「有趣度」不但不會少於「沒有控制的創意」,甚至還要更有趣一點!


更有趣的是,學生們自以為的「創意」,到最後一眼望過去,這麼多學生穿著同樣的制服,每個學生的外表依然是差不多的。外面的人是不會看到學生的創意,但學生卻覺得自己的創意非常有意思?


網路上愈來愈強調,每個使用者都能完全的客製化、完全的不同,等到這套工具好不容易做出來了,才發現使用者根本就懶惰到連一點點的客製化都不想做!有時候讓大家都得「穿制服」,再要求大家用有限的空間中作「控制下的創意」,最後在其他閱覽者的眼中又形同是一個整合過的大作品,這個大概念或許可用在媒體網站或手作購物網站或社群網站上面,或許,都可以摸到另一個從沒摸過的趣味。


文章來自mr6
文章提供BAYSTARS DESIGN網頁設計公司

2009年8月16日 星期日

MID ,小筆電,智慧型手機(四)平板電腦捲土重來

多元化的行動終端,將不會再有能爆大量的情況。
◎情況不一樣了
筆者猜想,這篇文章可能在發布後沒多久,謠傳多時蘋果公司的平板電腦大概就推出了。由於目前沒人知道這部謠傳中的平板電腦到底是什麼樣子(或者知道也不能說),甚至懷疑根本沒這回事,因此這篇文章將避免去談個別廠商的產品策略,以免憑空猜測。
平板電腦是公認已經被判了死刑的。筆者曾經在2003年11月30日寫下「平板電腦何以失敗」一文,在當時的時空環境下,認為會需要帶著電腦到處跑的人只有商務人士,一般人都是用桌上型電腦。而商務人士因為需要行動辦公,所以不可以沒有鍵盤。
當時強調可以手寫輸入的平板電腦,其手寫輸入功能顯然是針對一般大眾設計。然而,最終考慮購買平板電腦的卻是嫌棄手寫輸入的商務人士,在價格與筆記型電腦相當的情況下,商務人士很自然的優先選擇購買普通筆記型電腦。平板電腦在這種情況下是不可能賣得好的。
然而,時空背景在發生變化。如果我們現在還問:是誰會帶著筆記型電腦到處跑?我相信答案是模糊的,或者說,「商務人士」這個答案顯然不會是必然的唯一的答案。經過了五六年的發展,筆記型電腦已經成為很多普羅大眾的第一台電腦,而小筆電則成為第二台電腦。
筆者已經看過太多次,假日時在星巴克咖啡館裡頭看見年輕人桌上擺了一台小筆電,就著一杯咖啡在上網或者看影片。小筆電是一個憑空被挖掘出來的使用者族群,它的存在只證明了行動裝置即將朝向多元與分眾的市場發展。當我們在談平板電腦時,要注意,情況不一樣了。
◎行動裝置走向小量而多元化
行動裝置的多元性與分眾性不會憑空發生。他導因於幾個條件:1)成本與價格的降低,或者說性能價格比的提高。例如小筆電很便宜,但拿來看電影卻依然流暢,拿來上網也很夠用。同樣的價格在五年前是做不出一台這樣的電腦的,而現在可以。
2)由應用帶動,找到了新的使用族群。例如,小筆電最大的應用訴求是上網,而3G無線環境的成熟是推動這件事情的一大助力。由應用的帶動而產生出對於新終端的需求,將是一個值得注意的趨勢。這件事情以前是困難的,因為無法以夠低的成本做到,而現在是可能的。
就好像筆者在本系列前幾篇文章提到的MID 一樣,其實把MID 做成無線的視頻多媒體終端是非常合適的,不要老把它當成電腦看。如果持續的將MID 當成電腦,始終想把他在智慧型手機與小筆電的縫隙裡找定位,高不成低不就,那就是鑽進死胡同裡去了。
在此認知下,若要讓螢幕比MID 更大的平板電腦來承載某種應用,謠傳中蘋果公司平板電腦想搭載電子書,真是個好主意。網上大量討論認為平板電腦沒有鍵盤會影響使用,現在,看書需要什麼鍵盤?只需要上一頁下一頁。當然價格會是個關鍵,它不能賣得比小筆電貴。
這種走特殊化應用道路的行動終端能賣多少台?既然是應用驅動,就意味著每種終端的銷量是有限的。電腦製造商老想著批量銷售的好光景,還沒法適應多元化的行動終端,每個類別都只能賣出相對的小量。現在大家對小筆電的銷量感到失望,其實是之前的預期太高了。
多元化的行動終端,將不會再有能爆大量的情況。
◎小筆電可成電子書閱讀器
雖然蘋果公司的平板電腦還不知道是不是會搭上電子書的應用,但實際上這幾個月電子書的市場已經是非常火爆了。有了Amazon的Kindle 經驗(算是成功?),傳統的出版商,大型的連鎖書店,甚至連電信業者都摩拳擦掌躍躍欲試,這幾個月來新聞不斷。
電子書一般而言需要消費者購買電子閱讀器。而在購買的時候通常會有幾個心理障礙:1)這麼貴,可以買台小筆電,或者買上一箱書了。 2)買了以後沒有多少書可以看,而除了看書又不能拿來幹嘛,實用性很有問題。3)習慣,老覺得要觸摸到紙張才有實際的感覺。
以上除了第三點是幾乎無解,以及電子書內容確實急需擴充之外,另外兩個問題是有解的。那兩點無非是指出,消費者想要有一台功能「不只是拿來看書」的機器。做法之一,是把現在的電子書價格再降,降到消費者認為「這個價格的機器做不了其他事情也很正常」。
另一個方法是,賣一台小筆電(或者平板電腦)給消費者,告訴他這是台全功能的電腦,但經過特殊的軟硬體與線上商店整合,拿來購買與閱讀電子書特別合適。小筆電(或者平板電腦)的價格是消費者能接受的,而電子書則成了增強附加價值的部分。
其實,平板電腦並不見得是最佳的電子書閱讀裝置,如果要承接上述觀點,擁有鍵盤還是很重要的。如果能有一種小筆電,打開後整台可以旋轉九十度(就像打開一本書一樣)來閱讀電子書,相信會比較接近目前的閱讀習慣,以及兼具小筆電的全功能。
(文:黃紹麟)
文章提供BAYSTARS DESIGN網頁設計公司

電子書「文字創業家」,徵求1000人以上發行量的電子報作免費供稿嘗試

我相信電子書。
電子書的時代來臨,我相信電子書會是下一個網路,而且網路已經幫電子書試了各式各樣的獲利模式達兩年,現在看我們怎麼把這個東西換成電子書的獲利。
電子書獲利一般就覺得是量大,但那個時代已經過去了。這個星期Sony Reader平台雖然才剛剛宣布降價,從11.99美元降到9.99美元,和Amazon Kindle同樣價錢,但,兩個電子書平台依然有一些書「就敢賣貴」。譬如這個CNET專欄作家在那邊唉唉叫,他喜歡的一本小說的電子版本竟然敢賣到14.01美元,只比實際的書本還便宜1.56美元(實體書本15.57美元)。這位專欄作家非常不爽,他說,這本電子書還故意算到「0.01」美元,好像很精密計算似的,其實是在「死要錢」!但我不認為如此。

我認為,電子書的時代,有機會就像網站一樣,每一本電子書都有截然不同的「獲利模式」。我指的並不是像《窮爸富爸》除了一本書還賣紙板遊戲或DVD,而是單單一本書,為了要看裡面的內容,會要求讀者直接作各種不同的付款模式,以在電子書平台上取得這些內容,進而與它互動。若以網站來比喻電子書,那那些賣9.99的電子書,甚至免費給出去的電子書,就像免費的網站;而那些賣到14.01美元的電子書,就好像那些一進去就要你付錢的交友網站。而有些電子書或許會開始「書中付款」(in-book payment),看第n章可能需要付費之類的。如果我們用做網站的思維來看電子書的內容的創作,有可能抓到接下來的十年一個隱藏趨勢!

甚至我認為,這將會是一個讓作家「暢賺」的時代!不過有點不同的是,這時代暢賺的是要有點商業頭腦的作家。從前老一輩都說,作家不能賺錢。現在時代或許變了。如果電子書有如網站,那麼電子書的作家就有如網站創業家,下一位馬克小子說不定就是某位「懂得設計獲利模式」的電子書暢銷作者?

是台灣的網站景況,觸發我的靈感--看,目前網路上的網站「沒錢賺」,但網路上的文章卻是「有價」的。這很弔詭,不是嗎?這都要謝謝搜尋引擎,它實在太可貴了,「文字」是唯一穿透它的利器;謝謝網路,它實在太普及了,「文字」就是最廣泛的傳送工具;也要謝謝各網站,各式各樣的網站都有,「文字」就是可以放在所有網站上面的內容物。網路的文章,是現今網路上少數「有市場」的物品,你可能蓋一個網站吸引了10萬人來,沒人要在你家下廣告;但你只要是一個流量只有十分之一的部落格,可以拿得到「贊助稿件」;當然這種贊助稿件實在非常微薄,且不持久,又不會跟著名氣變貴,競爭激烈,不適合一個人長久的經營,但,它讓我們知道市場對文字是存在著;即便這些文章的價值不在是那些純粹文字,而是寫作那些文字的部落客的形象、長相、品牌、粉絲指使力……,但不打緊,只要最後那個價值的主要物品依然是「文字」(或圖、或圖文…一樣意思),這,就有得玩了!

這篇文章的第一件事,想問問大家,有誰想來試試作「文字創業家」的?
Sweet100舉辦一陣子,到了周三來到高潮,要謝謝接手舉辦的Cross Web的Gary與David、JoAnn,以及熱情支持的資策會,以及所有的志工。我也發現另一個有趣的現象──創業家裡,或許有些是動畫設計師,有些是行銷高手,有些是寫程式寫半輩子的,但……沒有人是「寫作」的。Sweet100人才濟濟,但要找到寫作型的志工,並不容易找到;即使有稿費仍不易找到。如果寫作的人不多,以寫作維生的人不多,那我在想,當電子書開始欣欣向榮的時候,這些「創業家」在哪裡?

這篇文章的第一個目的,是要找尋這些「文字創業家」。這不是經營部落格,而是單純寫作,有誰有興趣單純寫作的?用寫作來賺錢的?

告訴我。我們一起練習。我想試著藉此小文,慢慢組成一支「未來文字」團隊,籌備未來的電子書市場,尤其是海外市場。這是需要兩年的深耕,因此若你現在還有全職工作,不要緊,這樣更好,我們今天開始磨練、討論,兩年後,我們不會「缺席」。有興趣者請寫信至:contact.mr6@gmail.com

為何想做這件事?
自顏面神經失調後,我在生活上做了一個很大的調整。為了修養,我提高了寫作量,讓寫作的時間變得更固定,每天早上寫部落格文章外,還會挪出時間寫一兩篇特別文章。因為這個原因,我突然多出空間可接更多的專欄、書序,甚至還有幾天出門去跑一跑馬路,享受台北市清晨還沒開始被污染的清風滋味。因為寫特別文,我從一個常欠稿的傢伙,變成非常敬業的文字工作者;固定的作息,文章反而源源不絕。曾聽過寫作的顛峰大約在25~35歲以間,在這一塊,我覺得我還在成長、還沒有到達巔峰,我還想再往上走,因此,我希望現在接的專欄量,還可以再更大一點、再更大一點。不過請別寫信給我邀稿,因為我有一個點子……這就是我今天想講的第二件事──
目前,全台灣有一個很需要文章的「通路」,那,就是各行各業的所有的「電子報」。不見得是商業電子報,商業電子報是拿那個名單來發送一些廣告eDM;亦不是自創的像南方電子報那樣的刊物。真正有趣的是,有些非商業的「電子報」,主要目的只是「聯絡會員」,讓會員保持活絡、充滿朝氣。之前有一些電子報來邀稿,我皆請他們直接拿我的文章過去貼。
現在,我有時間了。我有時間做一個嘗試--
我想問:您有電子報嗎?

或,自己公司有在定期發送會員通訊email給會員?而您認識該通訊的聯絡窗口?
如果有,我可以送給你一些「稿子」。這些文字,是我寫的,或我和團隊寫的。這些文字和Mr.6部落格的有所區隔,絕對不曾發表過的,可以免費的送給你;它不是廣告文,不是要賣你東西,它是正正經經的、絕對讓讀者收穫良多的文章。它會是比網路趨勢還要更「軟」的題材,是讀者較能接受的題目。

請來信告訴我您的電子報名稱、發行量、連絡人姓名等等,最簡單的方式,就是請花五分鐘填寫以下這張「電子報表單」。

OK,在這篇文章的尾聲,我們再複習一次:
如果你真的想寫文章,請寫信給我:contact.mr6@gmail.com,告訴我你想寫文章。
如果你有電子報,或想通報電子報,請立刻填寫以下表格。三周之後,我可能可以開始免費供應稿子給你,讓你的電子報內容源源不絕(當然是要經過篩選過,我不可能每個都寄,原則上是愈大愈好,但也先搶先中)。

文章來自mr6
文章提供BAYSTARS DESIGN網頁設計公司

2009年8月12日 星期三

Robo.to讓你輕鬆錄3秒鐘「微影片」,告訴大家你正在做什麼

昨天RRW介紹一個很小的網站。這個網站叫「Robo.to」。這是什麼網站呢?它一進去,申請了會員,就讓你直接對著該網站錄一小段影片(必須動用你筆記本電腦上方的那個攝像機頭),這一小段影片就可以直接「送」到Facebook、Twitter、Flicker……等上面,也可以做成一個小小的貼布,貼在自己的部落格裡!

你說,這聽起來並不是很新的點子。這點子之前我也聽創業家提過、有興趣去做,後來有些甚至可以從手機直接拍攝照片或影片直接上傳的都有了。這個「Robo.to」有何特別?
特別的是,它打的是「Status Update」這塊市場。

所謂「Status Update」,就是告訴大家你正在做什麼,可說微網誌也是一部份。「Robo.to」將你的每一則小影片,下面都可以放一段話,於是,這則小小的影片,就變成了一則「告訴大家你正在做什麼」的影片。

奇特的是,這影片只能錄「3秒鐘」。
1、2、3……就沒了。
氣!
但,也很好玩!
我在今天早上6:41試用,錄了一小段--就在這邊。下面寫著「早上6:41,我的家,一隻怪手」。就是一則看起來還蠻OK的「報告」,告訴大家我現在的狀況,我的網址也真的很簡單,已經比一些短址製造工具製造的網址還要短:「http://robo.to/mr65210」。其他部落客試用的如這位「Molzy」,以及「OliviaHayes」,還有RRW那篇文章的寫作者「JolieODell」,呵,剛好都是女生耶。

「Robo.to」真的不笨,它現在做這一塊,剛好切中了2009年的這個月最新確認的趨勢──
這星期,巨無霸社群網站Facebook剛以5000萬美元(台幣16億)買下了之前在矽谷還頗受看好的FriendFeed,後者已證明它在目前還無法像Twitter這麼猛,而一直很希望自己變成Twitter的Facebook團隊就先將它囊購進來作個暖身動作。而Facebook接下來也推出「Facebook Lite」,簡直就是衝著Twitter而來。美國網站的這些大動作都是在說明一件事:他們已經發現了另一個「網路大麻」。

網路大麻,就是可能讓1000萬人類上癮的「新習慣」。比較之下,Twitter這種微網誌,是比Facebook還要更重的「大麻」。現在很多人一定要上Facebook,因為要看看朋友做了什麼事、和你留了什麼言。但這要看你交了多少位朋友、這些朋友是否重度使用Facebook,若剛好你朋友沒有很愛「寫」,很愛上傳照片,又連開心農場、Restaurant City都不玩……那,Facebook就變成一個比較大的Linkedin、不好玩了!人們也不想每天上去看了!但,「微網誌」不同了,每天上去「只看、不說話」都很精彩,開始「說話」的也會說上癮。2009年8月這個時候要做網站,這波潮流正在流向的方向就是這個「Status Update」。

「Robo.to」怎麼攻這塊誘人的「網路大麻」?它和之前類似想做影片網誌的失敗者不同,「Robo.to」知道,影片這個東西蠻奇怪的,影片這玩意的確是百分之百的比文字都還要好玩,但是它的「供賞比」(Sharing-to-Watching Ratio,SWR)肯定要低。也就是說,大家都很愛看影片,但要你真的自己也來拍一段上傳,除非是碰到非常特殊的場合,才有動力去做這件事。以前的失敗者也證明了,就算你把這個工具弄到他的手機裡,他也不會想拍的!

所以,「Robo.to」實行一個「三不政策」:第一,它顯然不重視「行動拍攝」,你只要用你家電腦上面的WebCam就夠了。然後第二,它顯然很不重視「片長」,長度就規定3秒鐘不到,什麼都沒辦法錄。接著第三,它也不重視「表達」,因為它連聲音都沒有,所以你想用這個影片說一句話、發一句怪聲都不行。換句話說,這個Robo.to真的有點像是廣告Banner,只是在那邊「動一動」而已!「Robo.to」把自己弄得超簡單,它只讓你錄一則「3秒鐘」的影片,那麼這個「Status Update」就很足夠、很精彩了。就算在上班,你可能也可以偷開Webcam,照一張你午餐的照片,讓你的笑容靠在午餐旁邊,笑一個,五秒鐘,再寫一句話形容你的心情。

這個網站做的對之處,真的就在於「簡單」。簡單到錄一下,寫一下,就完成了。它很會利用現在已經有的巨人,真的就站在巨人的肩膀上。它是一個極度精實的網站。你一進去就會發現它「毫無廢話」,刻意的將它的螢幕變小、流程變得簡單,讓它未來可輕鬆進入行動通訊市場,也讓現代這些無法接受新網站的人可以很快的就學會怎麼用並喜歡使用它。若Robo.to繼續撐下去,它有機會帶起一個「3秒鐘影片」風潮!

這個潮流,背後隱藏著兩個字:「習慣」。人類已有的習慣,已經有P&G、菲利浦這些廠商在攻市場,創業家只能「創造新習慣」。這習慣會很容易創造,當你寫了一兩則微網文做「Status Update」,當你在MSN上面努力寫一個「Status Update」然後很多人和你打招呼,你會開始養成習慣。沒動力的,看到自己之前寫過的、改過的這些Status,也會再興起「再作一則」的衝動。李白的第一首詩是最難寫的,寫了第一首、再寫第二首,寫到第50首,寫詩已經成為一種「習慣」。現在「Robo.to」想學之前那些成功的習慣,再讓人們利用現在幾乎人人都有的筆記本電腦的攝像機頭,來做「Status Upate」!

如果,真的可以讓人們養成「隨時報告」的習慣,這相關的還有什麼習慣可養成?
從前其他人覺得140字實在「短得不可思議」,覺得3秒鐘的影片「短得不可思議」,下一個你能想到的「短的不可思議」的東西是什麼?說不定你就發明了一個你下半生每天必做的習慣。

文章來自mr6
文章提供BAYSTARS DESIGN網頁設計公司