看創設在衝三小

2014年12月7日星期日

九個當紅大網站最初上線時的模樣　再牛的網站也都曾土炮過

前陣子 Facebook 才歡度了十週年慶（時間過得可真快吶！），萬丈高樓平地起，再怎麼大的網站都有最初的青澀樣貌，九零年代短短的時間內串起了不少現今當紅的網站，讓我們一起坐上時光機一覽當時它們的土包子模樣吧！（UI 可真是慘不忍睹啊，但，誰沒有過去呢！）

Google

1996 年 1 月，身為加州史丹佛大學理學博士生的賴利·佩吉和謝爾蓋·布林在學校開始一項關於搜尋的研究專案。區別於傳統的搜尋靠搜尋字眼在頁面中出現次數來進行結果排序的方法，兩人開發了一個對網站之間的關聯做精確分析的搜尋引擎。這個名為 PageRank 的引擎透過檢查網頁中的反向連結以評估站點的重要性，此引擎的精確度勝於當時的基本搜尋技術。最初，佩吉和布林將這個搜尋引擎命名為『BackRub』，直到後來改為『Google』。這個新名字來源於一個數學大數 googol（數位 1 後有 100 個 0，即自然數 10 的 100 次方）

Youtube

YouTube 是設立在美國的一個影片分享網站，讓使用者上載、觀看及分享影片或短片。公司於 2005年2月15 日註冊，由臺裔美國人陳士駿等人創立，網站的口號為「Broadcast Yourself」（表現你自己），網站的標誌意念來自早期電視顯示器（陰極射線管）。至今YouTube已經成為同類型網站的翹楚，並造就許多網上名人且激發網上創作。

Facebook

Facebook，是一個在線社群網路服務網站，它的名字是口語，於美國時間 2004年2月4日15 時連線，由馬克·祖克柏與他的大學室友們所創立。Facebook 的會員最初只限於哈佛學生，但後來逐漸擴展到其他在波士頓區域的同學也能使用，包括一些長春藤名校與史丹佛大學等。它逐漸增加了對未加入大學的高中學生的支援，並最終開放給任何 13 歲或以上的人使用。現時任何使用者聲明他們自己最少年滿13歲便可成為 FB 的註冊使用者和享用網站內的所有免費功能。根據 Facebook 的統計,截至 2012年9月，網站內已有超過十幾億個活躍使用者，使用者上傳的相片數量超過 2190 餘億張。

Yahoo

雅虎公司（英語：Yahoo! Inc.，NASDAQ：YHOO），是一家美國的跨國網際網路上市公司，是全球網際網路服務公司及全球入口網站巨擘。它提供一系列的網際網路服務，其中包括入口網站、搜尋引擎、Yahoo!奇摩電子信箱、新聞以及登入等。Yahoo! 是由斯坦福大學研究生楊致遠和大衛·費羅於 1994年1月創立並且在 1995年3月2日成立公司，公司的總部設立在加利福尼亞州森尼韋爾市。

Amazon

亞馬遜公司（英語：Amazon.com Inc.，NASDAQ：AMZN）是一家總部位於美國西雅圖的跨國電子商務企業。公司業務起始於線上書店，不久之後商品走向多元化。目前，亞馬遜是全球最大的網際網路線上零售商之一。傑夫·貝佐斯於 1994年7月創建了這家公司，最初他將其命名為「Cadabra」，Amazon.com 這個網站則在 1995 年上線。之後，Cadabra 公司的名稱又被以世界最大的河流之一——亞馬遜河重新命名。

Twitter

Twitter（官方中文譯名推特）是一個社群網路和一個微網誌服務，它可以讓使用者更新不超過 140 個字元的訊息，這些訊息也被稱作「推文（Tweet）」。這個服務是由傑克·多西在 2006年3月創辦並在當年 7 月啟動的。Twitter 在全世界都非常流行，據 Twitter 現任 CEO 迪克·科斯特洛（Dick Costolo）宣布，截至 2012年3月，Twitter 共有 1.4億活躍使用者，這些使用者每天會發表約 3.4 億條推文。

NYTimes

《紐約時報》（英語：The New York Times，縮寫 NYT）是一份在美國紐約出版的日報，在全世界發行，有相當的影響力。它是美國嚴肅報刊的代表，長期以來擁有良好的公信力和權威性。由於風格古典嚴肅，它有時也被戲稱為「灰色女士」（The Gray Lady）。和《華爾街日報》的保守派旗艦報紙地位相對應，《紐約時報》是美國自由派的第一大報，它最初被稱作《紐約每日時報》（The New-York Daily Times），創始人為亨利·J·雷蒙德和喬治·瓊斯。

MySpace

Myspace 是一個社交網路服務網站，提供人際互動、使用者自定的朋友網路、個人檔案頁面、部落格、群組、照片、音樂和視訊影片的分享與存放。Myspace 也提供內部的搜尋引擎和內部的電子郵件系統。該網站的總部位於美國加州的聖塔莫尼卡，其母公司總部則位於紐約市。

Mashable

Mashable 是一個網際網路新聞部落格。由 Pete Cashmore 於 2005 年 7 月創辦。月存取量超過 7 百萬，Alexa 排名 300 多。它是世界上存取量最多的部落格之一。Mashable 撰寫有關 YouTube、Facebook、Google、Twitter、MySpace、蘋果等的新聞，同時他們也報導一些其他社會媒體的訊息。截止 2009 年底，Mashable 已有超過 180 萬的 Twitter follower，超過 9 萬的 Facebook fans，超過 33 萬的 RSS 訂閱數。

Via

藝術背景的女孩學程式 180 天一天做一個網站

國外一位藝術背景的女生 Jennifer Dewalt，對於用科技來創作表達自己想法非常有興趣，特別是網路這部分，因此她決定透過每天做出一個網站來表達對於網路的熱情，但學藝術的他不想要透過去上課或是參加營隊來學習程式，所以他在網路上找到一些教學，並規定自己 180 天每天寫一個網站加上一篇部落格文章記錄（而且所有的程式碼都要公開在 GitHub 上），最後完美地達成目標，多麼驚人的執行力吶！

一開始從前端最簡單的 CSS 和 javascript，很快的也玩了複雜的 CSS animations 以及 HTML5 的 canvas，接著碰了 Rails 和 Backbone.js，也接了一些 API 來做應用，最後還玩了 node.js！在執行的過程中，遇到許多大大小小的挫折，無數個充滿壓力的夜晚瀕臨失敗邊緣，但最後他都一一克服過來了，在經過漫長半年的挑戰後，他決定休息一陣子，並開始投入一輩子的碼農事業，讓我們一起祝福她吧！

詳情可以看他部落格裡的這篇和這篇

可以到他首頁看全部網站！

Via

如何矯正正確姿勢，避免變成彊屍人

CSS發抖+連結特效

CSS發抖
http://www.webhek.com/misc/css-shake

連結特效
http://www.webhek.com/misc-res/link-style/#

漲姿勢！寫給網頁設計師的網頁設計簡史

編者按：互聯網的誕生本就是一個奇蹟，作為其中最重要的載體之一，網頁就是這個大時代最重要的縮影，相關技術、設計伴隨著信息共享催動著整個時代滾滾向前。這是一段簡短的網頁設計發展史，我們可以看到技術、設計與思想的演進，看到無數有識之士改變世界的剪影。本文作者是網站Froont.com的聯合創始人Sandijs Ruluks。

當我發現設計網頁有多投機取巧的方法之時，就逐漸開始對手打網頁代碼失去興趣。的確，許多網頁設計的問題並不止一種解決方案，但是很少有方案能解決所有的瀏覽器兼容性問題。最令我納悶的是，為什麼會有做設計和寫代碼的分工？隨著技術的發展，許多在過去難以解決的問題現在可以輕鬆搞定，但為什麼與此同時一些簡單的事情反而越來越難以實現？這些問題的答案並不是簡單的是與否，對與錯，也許我們需要從網頁設計的整個發展歷程來尋找答案，找到真正彌合設計與代碼之間隔膜的原因所在。

溫故歷史之前，不妨看看2014年最優秀的網頁設計：《愛不釋手！2014年最佳的20個優秀網頁設計》

網頁設計：黎明前的黑暗（1989）

在互聯網真正開始之時，黑色的顯示屏僅能顯示單色的像素。可以說，當互聯網天地初開之時，Web Design 僅僅意味著字符和空格的排列組合。雖然圖形化的界面早在80年代初就有了，但在此時普及率並不高。直到90年代，圖形化界面才真正進入千家萬戶，而那時候，才是屬於互聯網的狂野西部。

表格（table）：網頁的興起（1995）

能夠顯示圖片的瀏覽器的誕生，是促使網頁設計這個行業誕生的重要先決條件。實際上在當時，最接近於信息結構化的概念，是HTML中已有的元素：表格（Table）。所以，David Siegel 在他的網頁設計書《Creating Killer Sites》講述了他設計優秀網站的秘訣：在表格中嵌套表格，將靜態的表格和動態的表格以巧妙的方式結合到一起。儘管表格本身是用來承載數據的，用來承載內容和圖片有點奇怪，但是在那個時代，這種方法依然顯得頗為靠譜，並且大行其道。

網頁設計所面臨的另外一個問題，就是如何保持網頁那脆弱的結構。也正是因為這種需求，切片設計（Slicing Design）逐漸流行了起來。設計師創建出漂亮的網頁佈局，隨後開發者將整個設計稿切片，找出呈現設計的最佳方法。另一方面，表格還有一些炫酷的功能，比如垂直對齊，以像素為單位或者以百分比來控制對齊。在那個時代，表格可是近乎柵格系統一般的靈活的設計神器，也正是因此，那個時代的開發者並不喜歡前端的代碼。（表格嵌套表格有多亂？）

來自JavaScript的救援（1995）

JavaScript的出現補足了尚且原始的HTML。舉個例子，如果你想寫個彈出窗，或者想動態修改某些對象的順序？HTML不行，但是JS可以！不過此時JS的主要問題在於，它處於整個網頁佈局的頂層並且需要單獨加載。很多時候它僅僅被懶惰的開發者用作一個簡單的補丁，但如果使用得當，JS可以非常強大。今天，同樣的功能如果CSS能實現，我們會儘量避免使用JS。不可否認的是，JS本身確實很強大，前端常用的jQuery，後端的Node.js都是不可多得的好東西。

Flash：自由的黃金時代（1996）

作為一門新技術，Flash為網頁開發者/設計師帶來了前所未有的自由，它打破了之前網頁設計所固有的限制。借助Flash，設計師可以隨心所欲地在網頁上展現任何形狀、佈局、動畫和交互，可以使用任何喜歡的字體，他們借助Flash熔於一體。所有的這一切最終會被打包成為一個文件，然後被發送到瀏覽器端顯示出來。這也就意味著，用戶只需要擁有最新的Flash插件和些許等待時間，就可以享有一個魔術般的網頁。這是啟動頁面（splash pages）、介紹動畫以及各種交互特效的黃金時代。不幸的是，這種設計並不開放，也不利於搜索，還需要消耗計算機大量的運算能力。2007年，當蘋果發佈他們的第一台iPhone的時候，就決定徹底放棄Flash，也正是在這個時候，Flash開始走下坡路——至少在網頁設計領域。

CSS的誕生 (1998)

差不多是在Flash崛起的同時，一種更好的網頁結構化設計工具CSS誕生了。CSS的基本概念是將網頁內容的樣式分離出來，所以網頁的外觀和格式等屬性將會在CSS中被定義，但內容依然保留在HTML中。早期版本的CSS並沒有現在那麼靈活，和許多新事物一樣，它最大的障礙在於許多瀏覽器還沒來得及接納這一新技術，對於開發者而言，這是一個頭疼的事情。需要明確說明的是，CSS並非全新的編程語言，它僅僅只是一種聲明性語言。那麼網頁設計師需要學習編程嗎？可能需要。但是網頁設計師需要懂得CSS麼？當然需要。

柵格與框架：移動端的崛起（2007）

此刻，在手機上瀏覽網頁本就是一種全新的挑戰。設計師除了要為不同設備設計不同的佈局，還面臨著內容控制的問題：小屏幕上展示的內容要和桌面端一樣多，還是需要剝離開來？桌面端網頁上閃亮精緻的小廣告要如何在手機上呈現？加載速度也是一個大問題，移動端設備的網絡加載速度不夠快，而且桌面端網頁會消耗大量的流量。網頁設計亟待改進。

第一個重大的改進是柵格系統的出現。經過摸索，960柵格系統最終勝出，經典的12欄柵格被設計師們廣泛的接納，甚至成為許多設計師最常用的設計工具。接下來，各種常見的設計元素諸如表格、導航、按鈕被標準化，打包成為可復用的套件，這基本上就構成了視覺元素庫，其中還納入了常見的代碼。其中最典型的代表就是Bootstrap和Foundation，它們也使得網站和APP之間的界限逐漸模糊。當然，它們也不是沒有缺點，借助這些庫設計出來的網頁往往大同小異，而且網頁設計師要想使用它們還得深入瞭解相關的代碼知識。

響應式網頁設計（2010）

驚才絕豔的設計師Ethan Marcotte決定挑戰傳統的網頁設計，它讓網頁在內容不變的前提下，佈局隨著窗口和屏幕的變化而變化，並且將這種設計命名為響應式網頁設計。網頁設計師依然只需要HTML和CSS就可以實現這種功能，不得不承認這種設計理念非常超前。不過大家對於響應式設計依然有些許誤解。對於設計師而言，響應式設計意味著為設計許多不同的佈局。對於用戶而言，響應式設計就意味著這個網頁可以在手機上完美瀏覽。對於開發者而言，響應式設計意味著如何控制好網站圖片應付移動端和桌面端，在不同情形和語義下，擁有良好的下載速度和呈現效果，等等。簡而言之，就是一個網站能在任何情況下良好展現。至少在這一點上，所有人能達成共識。

扁平化的時代（2010）

設計網頁佈局總會花費大量的時間，好在這個時候我們開始拋棄複雜的光影效果，重新專注於根本的內容呈現。在此之前，網頁設計講求精美的圖片和排版效果，漂亮的插畫與周到的佈局設計，而簡化這些視覺元素之後，就是我們說所的「扁平化設計」。將複雜的效果淡化之後，視覺的扁平化，也促使內容和信息層級的扁平化。充滿光影特效的按鈕被扁平化的圖標所替代，矢量圖形和圖標字體也開始被大範圍使用，網頁字體和版式設計的結合令網頁視覺更加漂亮。有趣的是，這時候的網頁設計開始有返璞歸真的感覺。

光明的未來（2014）

技術的革新已經開始將網頁設計推動到一個全新的境界。在許多設計平台上，設計師只需要在屏幕上移動不同的控件就可以生成整潔可用的代碼出來，並且這些代碼非常靈活，可控度極高！試想一下，開發者無需擔心瀏覽器兼容性，可以專注於更加實際的問題！

新誕生的概念正在推動網頁設計。CSS中新誕生的屬性，諸如vh和vw（viewport height 與 width），就使得網頁元素的位置控制更加靈活自由，一次性解決了設計師糾結多年的頑疾。作為CSS一部分的Flexbox則是另一個新事物，它可以快速創建佈局，輕鬆修改屬性而無需編寫過多代碼。

網頁設計正在飛速發展，未來還會有越來越多的創新，就讓我們拭目以待吧！

2014年12月1日星期一

2014 網頁設計十大趨勢預測

http://www.inside.com.tw/2013/12/31/web-design-trends-2014

一、跳脫平淡的文字編排/字體設計（typography）

未來「有個性的字體」將成為網頁設計的趨勢，所謂有個性的字體是獨樹一格，可以自成一個宇宙。不是電腦中已有的標準化字體。設計師正開始找尋能夠為設計增添一些個性和獨特性的字體。

網頁設計公司 Stuff and Nonsense 的新網站設計是很好的例子。儘管可以使用標準襯線字體（serif）或無襯線字體（sans serif）如 Helvetica，取而代之的是，他們選擇了獨特的襯線字體，來保持專業性但又帶點個性。未來，將拋棄簡單與氾濫使用的字體，在網頁設計中更多地運用有個性的字體。

二、扁平化設計（flat design）

今年蘋果漸漸拋棄擬真化設計，轉向扁平化美學，iOS7 即為最佳代表。儘管在此之前，下降式的陰影（dropping drop shadows）和漸層（gradients）通常是展示產品新外觀的好方式，蘋果還是盡量除去可能的設計元素，將設計提升至另一個層次。隨著 iOS7 的扁平化設計推出一些時日，全球已經一窩蜂跟進。（編按：想更了解什麼是扁平化設計，可以參見 UI 美學趨勢備忘錄─淺析扁平化設計一文。）

三、大面積圖像區塊取代滑動區塊

大面積圖像區塊（Large hero areas）意指網站首頁中，使用用大圖作為主視覺，只有少量的文字，放置在網頁的最頂端。不論背景是一張簡單模糊圖片中間加上一個標題或是有更多延伸說明的 Realtii.com，大面積圖像區塊已經慢慢取代滑動區塊（sliders），掌握人們的視線。

四、著重行動網站呈現

隨著人們強烈仰賴手機，設計師們開始關注網頁在手機上的呈現。未來網頁將會與社群媒體整合，包括：要求使用者 e-mail 訂閱、超長的滾動頁面、快速載入的網站等功能，都會讓行動網站的使用更加友善。

五、影片取代文字

以影片取代文字的基本精神是：如果影片會自動解說資訊，為什麼要費神閱讀？2014 年的趨勢是，你會開始看到網站上都內嵌影片，特別是在前述所說的大面積圖像區塊，例如新興產品 Coin 的網站也採用影片放在它的官網首頁。撇除需要下載更多的數據的缺點外，影片比文字還能更有效地說明資訊含量較高、較複雜的新科技產品，其製作和傳遞分享越來越方便，因此，以影片取代長篇大論的文字介紹不失為一個很實用的點子。

六、長滾動頁面（long scrolling sites）

人們習慣「滾動」來閱讀、搜尋資訊，現在網站使用更多的設計技巧、例如畫面更多的留白、回應式網頁設計（responsive design），使得過去被詬病的長滾動頁面重新流行起來，長滾動頁面設計有助於人們的資訊吸收。Macaw 網站是很好的例子，令人耳目一新的網頁排版讓這種設計不顯無聊，使用者不會意識到實際滾動的距離有多少。（編按：Facebook、Pinterest 也屬於這種設計）

七、配色簡單

簡單的意思是指整個網站只使用一兩種顏色，以 UIKit 為例，只有一個顏色（在設計與藝術領域中，黑與白被視作無色）。這樣簡單的配色似乎是大多是受到受扁平化設計的影響，但也不盡然。

一些時下上線的網站使用很少的色彩，甚至放棄所有的顏色，只用白、黑，兩者之間的顏色都相當流行，再加入一點點的顏色作為小小的點綴，例如加入紅色來吸引目光。所有的顏色使用都必須非常小心，使用正確才能增加影響力和張力。

八、簡化內容

簡化的內容代表著內容意味著短時間跳出的內容，作者把它稱作一種「Twitter 風格」。隨著時代演進，人們的注意廣度（attention spans）變得更短，一段時間內能夠注意到的外在刺激有限，因此設計師利用短時間跳出的簡短內容（而非長篇敘述）來解決這個問題。

九、不用側邊欄 (sidebar)

不用側邊欄，整合所有選單、內容至網頁，只要下拉滾輪即可看見的趨勢正流行。儘管目前部落格、雜誌形式網站比較採用，但許多這類的網站也在實驗這種做法。這也擴張內容的視覺影響力（也利於回應性網頁設計的開發）。想像你在閱讀網頁，旁邊卻有很多廣告閃動、擁擠的資訊出現不斷干擾你的注意力，因此，設計師不用側邊欄，盡可能的將文章放置在網頁主體，排除其他干擾，以便塑造良好的閱讀經驗。