2013年3月18日 星期一

簡單的Dropbox

今天的筆記是要寫一個我常用的雲端服務 Dropbox
這家公司目前的估值是 40 億美元
而這一家公司也才在2007年創辦而已
而創辦人 Drew Houston 現在也才 30 歲
究竟是什麼原因可以讓這家公司發展得如此快速?



這家公司目前在做的雲端服務其實市場競爭超級激烈的
我想應該不用我特別說明也知道
剛申請 Dropbox 只有 2GB 免費空間
競爭者 Box 有 5GB 免費空間
蘋果的 iCould 有 2GB 免費空間
谷歌的 GoogleDriver 有 5GB 免費空間
微軟的 SkyDrive 有 7GB 免費空間 (剛開放時還一個人免費25GB)
最大的 MEGA 則有 50GB (不過並沒有桌機的應用程式, 只能由網路上傳)
還有堆積如山的小雲端公司,但我就不一一提了

在這麼多巨獸的圍剿下
究竟為什麼講到雲端服務,最具代表性的公司還是 Dropbox?

原因其實要從更早的時間點開始
而且要從 WebMail 開始
最早的 WebMail 是 Hotmail
是在 1995 年由兩個前蘋果工程師 Sabeer 與 Jack 所開發出來的
當時的網際網路才剛興起,瀏覽器才剛開始普及
所以兩位工程師第一個想到的就是可以透過 Web 來遠端管理資料庫
後來進而發展成我們所熟悉的 Email
幾經波折後最後被 Microsoft 所收購
而成為眾所皆知的 Hotmail
(詳細全文請至 Mr.Jamie 瀏覽)
聽到這有沒有感覺很熟悉?

有注意到上面的重點嗎?
"透過 Web 來遠端管理資料庫"
原來早在將近20年前就已經有雲端的概念了

並且在他的 Y Combinator 申請書有提到:
Dropbox 整合你和你的團隊的電腦中的檔案。它比上傳或 email 好,因為它是自動的、與 Windows 整合、並且配合你原本工作的方式。它同時有一個網路介面,而且檔案會自動備份至 Amazon S3(按:亞馬遜的伺服器系統)。Dropbox 有點像結合 subversion、trac 與 rsync (按:一些檔案管理的功能)的最好的元素但對一般人或團隊「just work」。駭客能夠取得這些小眾工具,但一般人不行。

並且在他的申請書裡其他部分也有提及
線上其實已經有不少的解決方案
但是一直沒有出現一個真的簡單又性感的服務出現
而時至今日,縱使競爭者變多
人們最想要的仍然是一個簡單的服務

而 Dropbox 就是雲端服務最簡單的先驅
他讓使用者在使用他們的服務時
就像在操作原本Windows的介面一樣
不僅外觀樣式,甚至操作的方式幾乎都沒有改變
這不就是最好的使用者經驗嗎?

讓一個從來沒有用過雲端服務的人
可以在一接觸的瞬間就馬上上手
而這種操作方式也讓後來跟進的巨獸們一一仿效

所以我想真正一個成功的企業就是這樣
執著的把一件"簡單"的事做到最好
讓每個使用的人都能瞬間上手使用
把學習的成本降到最低
那我想這項服務重要的成功要素就具備其中一項了

最好的例子就是他剛收購的公司Mailbox
這個 app 距離正式發布也才三周左右的公司
火速的被 Dropbox 以一億美金的價格給收購了
而這家公司所做的 app 也同樣的是在 mail 上面做了些許的創新
但卻讓使用的方式煥然一新,更貼近人們的需求
讓使用者在操作時能用更直覺與更簡易的方式將 mail 變成 to-do list

當我看到這篇報導時,真心覺得 Dropbox 很像買了另一個不同領域的自己
一間同樣訴求著「便捷人們的生活」的公司
(而且同樣都沒什麼美感的公司)

可能因為我這個人比較懶散,不喜歡麻煩的東西
所以會特別喜歡 Dropbox 與 Square 這一類的服務
但我想大部分的人應該也是平常太過忙碌
所以才會讓這些簡單又好用的服務迅速滲透至世界上每一個角落吧

- SC








2013年3月17日 星期日

CSS 規格與繼承


下面就是我的第二篇重點摘論:第三章 規格與繼承
============================================================
規格權重: ( 權重如果相同, 就要看優先順序, 越後面宣告的越大, 引用外部樣式表的將視為最早的宣告, 內部樣式 > 外部樣式 )

1. 被繼承的組件 規格= "無"(最小)
    *{ } 全域選取項 規格=0,0,0,0

2. 組件{ } 規格=0,0,0,1
    "+" , "空格" , ">"         規格=0,0,0,2

3. "[ ]", "."           規格=0,0,1,0
    "~=" 規格=0,0,1,"0 < ? < 1"
    組件.類別{ } 規格=0,0,1,1
    組件 組件.類別{ } 規格=0,0,1,2
    組件.類別 組件.類別{ } 規格=0,0,2,2

4. #id{ } 規格=0,1,0,0
   組件#id{ } 規格=0,1,0,1
   組件#id *[ ] 規格=0,1,1,1

5. 內崁樣式最大 規格=1,0,0,0
   〈h1 style="color:Blue;"〉

6. "權重最高者" Max
    組件{color:Red !important;}
    h1 style="color:Blue !important;"
    (必須要寫在規則宣告的結尾(color:Red !important;), 並在 ";" 前面)

權重比重:
           1. 使用者的重大宣告 !important
           2. 設計者的重大宣告 !important
           3. 設計者的正常宣告
           4. 使用者的正常宣告
           5. 使用者代理程式的宣告
           6. 瀏覽器的預設樣式  

============================================================

繼承:
1. 繼承的規格為 "無" , 只要有其他組件有宣告(含全域選取項) 皆會被覆蓋過去

2. 這種特性只會向後代傳播, 先代並不會有任何影響
   (下面的範例會連被包覆在裡面的 〈em〉 都會繼承 〈h1〉 的特性, 顏色將改為 "Gray")

h1{ color:Gray;}
      h1 id="page-title"Meerkat emCentral/em/h1

        只有一種情況會向上傳播, 就是 "body" 會傳導給根組件 html

3. 下面幾種特性都不會繼承:
1. margin 邊界
2. padding 邊距
3. backgroud 背景
4. border 邊框

============================================================

繼承之順序 " LVHA " :

1. 網頁黃金順序盡量要依此原則: link -> visited -> hover -> active
 
       (因為四個權重都一樣, 最晚出現的權重一定越大
        所以如果順序為 active -> link -> visited -> hover 
        active, hover 樣式就會失效, 因為每一個鏈結只屬於 "已瀏覽" 或 "未瀏覽")
           
        如果想要已鏈結不受影響, 其他皆為正常: link -> hover -> visited -> active

2. 網頁一但開過一次, 以後就一定會是 visited 的樣式, 所以有時候設定了 :link 但沒反應, 就是因為不小心先前已經開過一次的

3.
        :link
        :visited
        :link:hover
        :visited:hover
        :active
        :visited:active

- SC

2013年3月14日 星期四

設計大師 Philippe Starck

今天的筆記是一位我很喜歡的設計大師 Philippe Starck
他是一個橫跨建築、傢具設計、生活用品、交通產品設計和室內設計...等的設計天才
先看一下這位被稱為"設計鬼才"的天才設計師吧



我想可能有些人對他很陌生
所以我先介紹一個跟亞洲比較有關的作品為開場吧

很多人可能不知道他,但總應該都知道大S吧
既然知道了大S就一定知道他的富二代老公 汪小菲
他老公在內地創建了一個號稱全內地最高級的會所 "蘭會所"
全部的蘭會所就都是由史塔克所操刀設計的
但他不僅僅設設計建築物而已,所有裡面的擺設、傢具、燈飾也全都是他的設計
基本上走進去就像走進他的展示間一樣











而這位設計大師還有一個極為著名的作品,但大多數人都不太知道
那就是賈柏斯最後一項藝術品,也是留給自己與家人的最後一項禮物 - 私人遊艇"Venus"









很可惜的是賈伯斯並沒有看到"Venus"完工就去世了
光是看到這就知道,要能讓 Steve Jobs 這位完美主義者能認同
那這位設計師一定是設計界最頂尖的人才,就跟蘋果首席設計師 Jonathan Ive 一樣

但今天的主角並不是 Ive ,所以我就不多談他了
先來講講這位設計天才吧
這位設計天才擅長透過不同的方式,對外展現自己的作品,並且更懂得經營個人形象,將他的幽默與創意表露無遺
所以這也讓他的設計變得很多元化很全方位,讓他成為一個極有魅力的人

也相對的因為有了眾人的矚目,讓他變得極有自信,甚至有點自大,像他曾說過「創意其實是一種病。你是沒辦法選擇創意的,是創意在選擇你,就很像浮士德,等於把靈魂交給了魔鬼,將再也不會擁有屬於自己的生命」
「我對於設計與建築向來都沒有興趣。一直到現在,我還是不知道我為何要做這一行」
「可能因為設計這件事對我來說不一直都不難,所以我從事這一行好像也有點理所當然,既然簡單,為什麼不做呢?」

說實話,當一個學設計的聽到這樣的話一定恨得牙癢癢,但我也相信他會說出這樣的話也是因為他對設計深具信心,對設計了解的相當透徹才有這種自信說出這樣的話

但其實我們並不能以偏概全,看完上面的話不能斷章取義就說他自戀又自大,其實在受訪時他有提到「我是一個工作非常勤奮的人,我的意志力很堅定,從不輕言放棄」
我對於設計出來的物件其實興趣不大,我真正喜歡的是設計的過程。我對於我們的故事非常有熱忱,所以我熱愛這工作。」

其實 Jonathan Ive 也曾說過相似的話我們不真正談設計,我們談的是想法和產品的創作過程他甚至進一步解釋,開發設計任何事物都是極具挑戰性的,目標是解決複雜問題時,盡力將簡約(simplicity)帶入未知答案之中。
Ive 甚至常會強調這個名詞的特殊意義,「簡約並不代表完全不雜亂,這代表的是產品功能和定位,不雜亂只能說是乾淨,簡約則是要完全融入到產品的生產過程,是所有的根基」。

我覺得從這裡可以看出,他們真正熱愛的是設計的過程,也因為他們的用心與專注,所以他們才可以創造無與倫比的產品

其實說到這我覺得就跟上一次我寫的筆記"專注"是一樣的
當如果一個人能專注的不斷鑽研一項東西,那他必然會成為這領域的佼佼者,創業家不也應該要這樣嗎?

筆記寫得有點太多了,再來就多看一些他的著名設計品吧!








\



















真是抱歉,因為我是個"椅子控",所以大部分都是椅子的照片
其餘建築或室內設計的我就留在下一篇分享吧

本文部分內容取材自-

- SC





2013年3月13日 星期三

Pinterest 瀑布流, 究竟是不是好的設計?

剛好昨天在跟朋友介紹一個好用的網路服務-Justaple
結果其中一位看到他們使用瀑布流的瀏覽方式馬上就說他很不喜歡瀑布流的介面與瀏覽方式
雖然只是他無心插柳的一句話,但卻讓我突然開始思考一件事:縱使一件事物做的很棒,但總是不能滿足全部的人
我想這簡單的道理應該也不用我特別說明大家也能體會吧!



在開始筆記之前我先稍微描述一下什麼是瀑布流
這是一種將很多份的內容轉化為個別獨立的區塊
在滑鼠滾輪向下滾動時,jQuery 套件便會不斷的加載
讓新的內容產生出來並附加在網頁的最底端

為什麼這一兩年很紅呢?
主要是因為有一個很成功的社群網站 Pinterest
就是以這種瀏覽方式為主

而這種特別的互動方式可以讓使用者在瀏覽內容時,不必再像以往一樣一直不斷的在網頁上點擊下一頁,可以讓使用者瀏覽起來更為輕鬆

那這樣有什麼不好呢?
為什麼總是會有人不喜歡這種瀏覽方式呢?

這要先從我先前所看過的一篇文章說起
我記得我以前曾經看過一篇關於瀑布流的短文
(時間久遠,我真的找不到那篇文章)
其實瀑布流這種格局並不是 Pinterest 最早開始使用的
早在他開始使用這套件前幾年就已經有了
可是為什麼隔了一陣子以後這才開始紅
(網路上 90% 的文章都說 Pinterest 是始祖,其是那是錯誤的!)

而且當一火紅後馬上就有一堆類 Pinterest 網站如雨後春筍般的出現
但才過沒一年,當時大部份的類 Pinterest 網站,卻又突然都不見蹤影了
究竟是為什麼?我終於到現在才了解原因!

我個人覺得內容是最重要的因素
因為其實這種瀏覽方式是非常適合圖像的
所以像 Pinterest 是以圖像內容為主,文字為輔
基本上在瀏覽的時候重點都是在看"圖"
所以當使用者在看圖的時候可以很輕鬆的瀏覽全部的照片,再選擇他真的有興趣的照片點擊看大圖
所以網頁上滿滿都是使用者有興趣的照片時,那這種方式就會大為加分,因為可以一直不斷的往下流覽下去,而不用一直換頁
就像在用iPad看網頁或文章時,總是習慣用手指在螢幕上下撥動來瀏覽內容。你有辦法想像如果不能用滑動瀏覽,而只能一直不斷的點擊屏幕換面的樣子嗎?那種情況也太不人性化了吧!

如果當你只需要一直往下滾動就會一直不斷有您有興趣的內容出現,那這樣有多麼方便?相對的停留在這網頁的時間也一定會更長

但情況改變了!
當變成文章的時候就會變成這樣



請問這個時候是標題是重點還是圖片是重點?
就像在看新聞的時候,大部分是對標題有興趣才會繼續往下看吧!
而現在大部分網路上的文章,常出現一種情況
那就是文章最上面的大圖跟文章內容沒有太大關係
那這個時候你會選擇看圖後再決定要看哪個文章嗎?
大部分的人應該都會選擇看標題吧
可是就像上面的截圖一樣
當你的標題變得很小,使用者瀏覽起來就會變得很痛苦,尤其他螢幕很大的時候(我的螢幕是24吋,所以一次會看到14個區塊出現)所以此時看標題就會變成一件很累又很吃力的事
尤其當每一個區塊又很小的時候,標題往往會被切成兩到三行
眼球的動線就會如下



我想光是用看的就會知道會對眼睛帶來多少負擔了
因為標題字體原本就很小,再用這種瀏覽方式真的會很痛苦
也難怪為什麼會突然有很多類 Pinterest 網站消失了

再來縱使是 Pinterest 




也會發現眼睛的動線一直不穩定
看不久到還好,可是時間一長,停留個半個多小時都維持在這種狀態下的話,我想任誰都會累吧?

但 Pinterest 會這樣做必定是有它的原因
我想最主要是不希望把使用者的照片,每一張都截掉上面一塊或下面一塊
畢竟這樣做也很難原汁原味的呈現每張圖最原始的感覺
甚至有可能被截完後都不知道原始的圖是長什麼樣子
可以的話想像一下
如果布萊德彼特被截掉鼻子以上的部分後,還有人會想點那張照片嗎?

我會想到這些也是因為最近美國 ebay 的改版



他這一次的改版動作非常大,跟以往截然不同
而他使用的新介面就是"瀑布流"

而為什麼他會選擇這種方式呢?
就像我上面提到的
這種瀏覽方式非常適合圖像
我們在買商品的時候絕大部分都是因為商品的外觀吧!
用這種瀏覽方式可以迅速的讓使用者不斷的尋找他想要找的商品
想想國內的 Y拍、露天、對岸的淘寶...哪一個不是首頁都放滿商品圖






所以當我再去觀察僅存的類 Pinterest 網站時也發現
目前做的還不錯的果然也都是拍賣網站,並且幾乎都以女性產品為主

比方說 蘑菇街哇喔 都是同樣乾淨整潔的介面




所以,我想瀑布流到底是不是好的設計
這應該是不會有正確答案的吧?
而是只有適不適合的結果罷了

- SC