Posts Tagged ‘web design’

品味:讓人愛不釋手的「單頁式」網站

March 22nd, 2013

Ian James Cox

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

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

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

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

設計師 Chris Connolly 個人網站

Chris Connolly

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

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

電影 Viagem Autonómica 網站

Viagem Autonómica

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

設計師 Ian James Cox 個人網站

Ian James Cox

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

英國節約用水宣導網站

Every Last Drop

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

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

___

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

(Inspired by WDL)

Facebook 的設計哲學 ─ 35 人團隊如何滿足 5 億會員

May 25th, 2010

即將突破 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 設計團隊學來的產品哲學,希望對你正在進行的網站有幫助。加油!

©2020 MR JAMIE.
網站由 Allen Hsu 設計 | Logo 動畫由 Wen Chen 完成