Posts Tagged ‘web design’

歡迎來到每週一次的「品味」專欄，在這裡，我分享我所看到的種種美好。

近 5 年來，Single-Page Websites 漸漸開始流行起來。這種設計的好處是瀏覽方式單純而直覺，使用者只需用滑鼠不斷向下捲動，就可以從頭到尾欣賞完整個網站的內容，不需要楞在首頁茫茫然，面對一堆點擊不知該從哪裡開始。

也由於是捲動的情境，很多設計師開始加入了有趣的創意，無論是動畫、場景變換、翻頁等效果，都讓一頁式網站的瀏覽體驗變得更加豐富，讓人一玩再玩，愛不釋手。

今天為大家帶來幾個我覺得非常棒的一頁設計，希望能夠給你帶來些啟發。

設計師 Chris Connolly 個人網站

chrisconnolly.com 是設計師 Chris Connolly 的個人網站，他用很簡單的幾個段落傳達了他的性格 — 一張低頭微笑的個人照片代表著沉穩的個性，也傳達了樂在欣賞物品 (作品) 的態度。一張由布魯克林望向曼哈頓橋的照片代表了他居住的 Dumbo 區，也是紐約新一代創作者最喜歡的區域。接著他把作品攤開來展示，再用選擇底片的畫面來表達對工作品質的追求，最後放上一張拉花拿鐵的照片，並且註明偶爾也喜歡喝波爾本威士忌來露出輕鬆的一面。所有的內容加上乾淨清爽的單頁式網站，就完成了他的自我介紹。

到此為止，有工作找他的人可以 Email，只是欣賞的人可以在社群媒體上追蹤，一切毫不囉嗦一氣完成，讓人非常欣賞。

電影 Viagem Autonómica 網站

aviagemautonomica.com 是一家位於 Azores (亞速爾群島) 的獨立製片公司所拍攝的 Viagem Autonómica 電影的宣傳網站，一樣採用場景的切換，帶領使用者一步步進入電影的情結。雖然我看不懂葡語，但這個網站還是讓我體驗到了該部電影的主要精神，再加上預告片，讓人會想跟著主角，一起經歷他的 Azores 探索之旅。

設計師 Ian James Cox 個人網站

www.ianjamescox.com 用起來好像在搭雲霄飛車，除了驚奇單頁式網站能夠做到這種程度，當然也對 Ian 的製作能力留下了深刻的印象，你們一定要去體驗一下。

英國節約用水宣導網站

everylastdrop.co.uk 把單頁式網站的動畫效果做到了極致，是寓教於樂的最完美示範。希望政府相關單位能夠看看人家的用心，別再盲目的把所有政令宣導都拿去拍街舞 + Rap 了！

以上就是今天分享的好東西，希望你們喜歡。

___

一天中的美好風景，我都分享在 Instagram，歡迎收看

(Inspired by WDL)

即將突破 5 億會員大關的 Facebook，需要多少設計人員呢？答案是只要 35 人。今天在前雅虎 (Yahoo) 首席設計師路克‧瓦波斯基 (Luke Wroblewski) 的個人網誌上，看到這篇非常有內容的文章。照慣例，我鼓勵大家直接連過去閱讀，下面是我的重點整理。

設計團隊組成

這篇文章提供的第一個重要資訊，是 Facebook 的 35 人設計團隊的分工：

• 15 個產品設計人員 (product designers)
• 10 個介面設計人員 (UI designers)
• 5 個使用者研究員 (user researchers)
• 4 個傳播設計人員 (communication designers)
• 1 個內容策略師 (content strategist)

所謂的 4 個傳播設計人員，基本上是從事行銷相關的活動。如果不考慮的話，真正和產品相關的人員是 30 個。更重要的是，設計和研究的比例是 5:1。也就是說，Facebook 投注了近 17% 的設計資源在了解使用者的需求上面。這往往是一般創業團隊所缺乏的，大家的通病常常是太專注於產品，卻忘了時時刻刻去向使用者取得回饋。

每個人都是工程師

Facebook 要求產品團隊上的每個人都要有技術能力 (這點其實是從 Google 那邊學來的)，如果你看他們網站上的職缺資料，會發現對設計人員的技術要求，甚至比對藝術能力還嚴格。這是很合理的，當你的網站本身互動性很高的時候，從Photoshop 裡面真的很難感覺出最後的使用經驗。所以如果設計人員能夠做出一個活的樣板，那對於縮短產品週期，提升成功率，有莫大的幫助。

別再用騙人的打樣

設計人員常常使用的打樣 (mockup)，往往和最後的產品有許多差距。原因是沒有真實的內容 (他們往往都用很漂亮的照片，和一堆 “Lorem Ipsum”)，也沒有正確的上下文。所以要讓設計更貼近現實，請使用網站上真正的內容。

為多數設計

很多使用者都會跟你要求新功能，但你要確定這是大多數人都會喜歡的。有時候是透過調查 (survey)，有時候是功能上線後，仔細觀察數據，例如：Facebook 有一陣子放上了寄群組信的功能，發現大家開始濫用，於是又把它拿掉。

專注於你的目標

要用網站的動線，去引導使用者達成你的目標，例如：對新的 FB 會員來說，和其他人連結是最重要的目標，所以網站的設計就必須要專注於這個方向。

了解你的數據

Facebook 的最主要目標是成長，所以設定一個成長團隊來把網站最佳化，以取得更多會員，例如：在“取消會員”頁面上放上朋友的照片，結果一年減少了一百萬個使用者離開。

但了解數據不代表一切按照數據決策，例如：內部實驗證實 FB 下方的應用程式列，如果加重一點視覺效果，可以提升 5 倍的點擊率，但是由於和整體設計不符，最後並沒有採用。

大動作才能有大突破

小功能只能幫助你優化 (optimize) 網站，如果你要改變整個產業的平衡，你就需要一些大動作，Facebook 短短幾年的歷史上，就出現了動態消息 (News Feed)、聯外通 (FB Connect)、專頁 (FB Pages) 和社群插件 (Social Plugins) 等改變了整個網路產業的大功能。

文章裡面有句話說得很好，最大的風險就是不冒任何風險，因為你的產品會在原地打轉。新功能不被接納，頂多就是撤掉。每個新功能都要使用 A/B 測試，來決定是否有效。

不要愛上你的作品

軟體是不斷在進步的，總有一天你的作品會被移除，因此，就像人生一樣，重點是過程，不是結果。如果你的設計在一段時間內為使用者帶來許多價值，就是非常值得驕傲的一件事情了。

以上，就是你可以從 Facebook 設計團隊學來的產品哲學，希望對你正在進行的網站有幫助。加油！