UI 每日研究

一個蒐集、賞析美好酷炫 ui 元素的研究室

[uidailystudy]

[展示] 你是屬於哪種自拍風格？兼具數據意義與藝術美感的 selfiexploratory

* 截圖

* 「哪個網站(出處)」的「哪一個部分」引起你的興趣

由 Lev Manovich (美國加州大學聖地牙哥分校視覺藝術教授)、Moritz Stefaner 以及一小群分析者與學者所建立的 Selfiexploratory (a part of Selfiecity)。

* 喜歡的理由

從沒有想過自拍照的呈現，可以兼具數據解析意義與藝術美感，真是讓筆者大開眼界。在技術方面，見面使用了 D3.js ，並且事先透過程式自動於相片中擷取各種特徵：如情緒、臉的傾斜角度、眼睛有無張開等等 ... 好棒啊！

相關資訊

selfies：自拍照，尤其指在一個手臂長度內以手機拍下的肖像照。

selfiecity：一個調查自拍照風格的網站組織 (圖像來自巴西、紐約、柏林、莫斯科以及曼谷)

Lev Manovich (列夫·曼諾維奇)是美國加州大學聖地牙哥分校視覺藝術教授。他教授新媒體藝術與理論，同時是一系列新媒體的重要書籍的作者。他最著名的作品是《新媒體的語言》（The Language of New Media, 2002），廣泛地被評論與翻譯成各國語言，其中包括義大利文、韓文、波蘭文、西班牙文與中文

[uidailystudy]

[網站] NPR: National Public Radio 的「改版」

* 截圖

* 「哪個網站(出處)」的「哪一個部分」引起你的興趣

NPR: National Public Radio 的「改版」

* 喜歡的理由

不若傳統新聞類型的網站，驚人的文字量、字級小而密集，廣告參差夾雜。 NPR 的改版讓人感到耳目一新， menu 是 responsive，下拉選單大而清楚，頁面大致都擁有更多留白，增加了更多的可讀性 ... 筆者覺得 NPR 的改版真是太棒了。

不要說筆者壞心，不妨自行比較看看：

BBC

The New York Times

The Times

相關資訊

NPR - 全國公共廣播電台，是一家獲公眾贊助及部分政府資助、但獨立運作的非商業性美國媒體，成立於1970年2月24日，開播於1971年4月。節目以新聞、綜述、採訪為主，也有一些音樂、脫口秀等文化、娛樂節目。聽眾數目據估計約有兩千萬人。(維基百科)

*

對了，為什麼國外的新聞媒體網站可以與時俱進，做的這麼好，台灣卻不行！？

[uidailystudy]

[網站] 日本的「郵政博物館」網站

* 截圖

* 「哪個網站(出處)」的「哪一個部分」引起你的興趣

日本的「郵政博物館」網站

* 喜歡的理由

整體的視覺效果很傑出，保有日式東洋的情調，但 UI 骨幹卻有新時代的思維 (比如 Big footer、 Flat navigation ... )

儘管筆者人在台灣，連線的速度卻是飛快 ... 網站本身該不會都是靜態網頁吧 @_@a

[uidailystudy]

[資源] slideshowify.js - 讓靜態圖片有影片效果 (Ken Burns Effect)

* 截圖

* 「哪個網站(出處)」的「哪一個部分」引起你的興趣

subchild 的 jquery.slideshowify.js (DEMO)

* 喜歡的理由

這個 jQeury 套件能夠添加 Ken Burns Effect 到 slideshow 裡。(Ken Burns Effect 是一種將靜止圖片平移和放大，讓人感覺像是影片的效果)

使用方式

使用預設值的話：

$("img").slideshowify();

[uidailystudy]

[網站] feedthebot 與使用者的互動方式 (SEO 工具)

* 截圖

* 「哪個網站(出處)」的「哪一個部分」引起你的興趣

feedthebot 與使用者的互動方式，相當可愛

* 喜歡的理由

使用者輸入網址後，等待分析結果的畫面很有趣。除此之外， 分析結果的條列方式、說明方式，以及首頁的 guidelines 排版都簡潔實用。

feedthebot 在同類型工具中獨樹一幟。原因是，相較於其他偏重於圖表、偏重於長期追蹤的 SEO 工具， feedthebot 聚焦於網站的現狀、提供修訂建議，並給予充分的解釋，含字量非常的多 ... 極為有趣呢 ~

相關資源

WooRank (SEO 工具)

MajesticSEO (SEO 工具)

"10 SEO Analysis Tools You Should Be Using"

[uidailystudy]

[網站] 音樂網站 - Solayo 的整體 UI

* 截圖

* 「哪個網站(出處)」的「哪一個部分」引起你的興趣

音樂網站 - Solayo 的整體 UI

* 喜歡的理由

beta 版的 Solayo 雖無驚天動地的功能，只專注在「搜尋」、「播放」、以及「收藏」這幾件事情上。不過若僅以 UI 的體驗來說，它們扁平且簡約留白的介面讓網站看起來易用、吻合潮流，令人不心煩意亂，以至於操作上獲得了良好的使用體驗。

三欄式的版型很明顯地切出各單元的腳色為何，左邊為 menu，中間是歌曲清單，右側則為撥放器。

目前影音來源有 Youtube、SoundCloud、Dailymotion。網站本身是 responsive design。

附帶一提

進到撥放介面時，左下角有個 「Tour」 (新手教學)，真是個貼心的設計 :)

[uidailystudy]

[資源] WOW.js - 讓圖片增添華麗的進場！

* 截圖

* 「哪個網站(出處)」的「哪一個部分」引起你的興趣

matthieua 所開發的 WOW.js

* 喜歡的理由

當使用者在瀏覽網頁往下捲動的過程中，圖片們能夠有華麗的登場方式，的確讓人耳目一新！

此一套件有應用在何處？

官方網頁提供了三個場所

Streamline Icons (強烈推薦一看)

Nasty Icons

Fliplingo

[uidailystudy]

卡提諾論壇的圖片lightbox

* 截圖

* 「哪個網站(出處)」的「哪一個部分」引起你的興趣

卡提諾論壇 點了圖片後，所跳出的lightbox

* 喜歡的理由

點了圖片跳出lightbox並不是多稀有的呈現方式，但卡提諾論壇還加上了用滑鼠滾動就可以放大縮小圖片，也很貼心的加上了看原尺寸的按鈕。另外lightbox也不是死死的被置中在畫面正中央，是可以拖拉的，自由度頗高，讓我感到驚奇連連:D

[uidailystudy]

全家 FamilyMart 的海綿寶寶 FUN 文具 6 款

* 截圖

* 「哪個網站(出處)」的「哪一個部分」引起你的興趣

全家 FamilyMart 的特別活動，宣傳海綿寶寶的 FUN 文具 6 款。

* 喜歡的理由

網頁的正上方，墜落下來 (還會彈跳) 的海綿寶寶文具很逗趣。(傳統上會以 Flash 製作，但此次是 javascript)

除此之外，slider 部份有額外的造型，在控制方式多了特效 (如下)，也使筆者得到新鮮的感受，並拉大了自己原本對於 slider 的想像呢，十分感謝 :)

[uidailystudy]

上引水產的官方網站

* 截圖

* 「哪個網站(出處)」的「哪一個部分」引起你的興趣

上引水產的官方網站，整體的視覺風格與引導方式。

* 喜歡的理由

儘管筆者想專注在 UI 上的挖掘，但是看到非常精美的設計還是會非常動心。比如下面的這種圖片，都要比常見的平面雜誌扉頁還美了。

倒不一定需要特別的框架或工具輔助，以(圖片)設計為直球一決勝負，用心地將具有價值的內容傳達出去，說不定有時也會結結實實的擊中某些人的心呢。

[uidailystudy]

Niconico 裡 tag 的陳列方式

* 截圖

* 「哪個網站(出處)」的「哪一個部分」引起你的興趣

知名日本影音網站 Niconico 裡 tag 的陳列方式

* 喜歡的理由

除了顯示出各個 tag 的熱門程度外，還在這麼小的空間內用圖示表示出「最近竄起」或「站外」(當 mouse over 時) 等資訊，細節處仍很用心呢。

雖然最近開始有大圖、大文字與寬裕的版型等趨勢，但像這類密集而經過挑選的 tag，或許還是有固定的使用群眾，並且從瀏覽 tag 中獲得許多樂趣也不一定呢。Just take it as a reference :)

[uidailystudy]

摩登波麗的商品瀏覽方式

* 截圖

* 「哪個網站(出處)」的「哪一個部分」引起你的興趣

摩登波麗的商品瀏覽方式

* 喜歡的理由

映入眼簾的簡約留白令人感到難得的清新與大方，在台灣很難見到這樣「有呼吸感」的瀏覽場域。

保留少量的產品分類，搭配專業以及多幅的商業攝影(大圖)讓人可以很清楚地看見商品本身的魅力。嗯 ... 相信不論是誰來到此，都會對摩登波麗留下深刻的印象吧！

[uidailystudy]

流量持續攀高的 TrendHunter 與其多變版型

* 截圖

* 「哪個網站(出處)」的「哪一個部分」引起你的興趣

TrendHunter 的首頁 slider 以及版型

相關資源

Cycle2

流量持續攀高

* 喜歡的理由

整體的版型相當的「大器」(套句公司裡企劃常講的話 :Q)，能夠清楚地看見美圖，也能透過文字知道圖片所欲傳達的意思。

Slider 上 Today/Week/Month 的 filter 也顯示其用心。

還提供了使用者，切換四種不同縮放尺度的版型(右上方)，wow ~ just brilliant！

[uidailystudy]

東立台北國際 2014 動漫節的奔跑小人

* 截圖

* 「哪個網站(出處)」的「哪一個部分」引起你的興趣

東立台北國際 2014 動漫節的「奔跑小人」

無意間發現的資源

motyar 的 firefly (奔跑小人便是利用它)

dynamicdrive.com 的 DD Icon Menu

* 喜歡的理由

儘管是再平常不過的動漫節宣傳，但卻因為搭上了進擊巨人的風潮，並且很逗趣地放上了許多飛奔的小人，頁面變得很活潑有趣呢 :D

[uidailystudy]

文章字數倒數器

* 截圖

* 「哪個網站(出處)」的「哪一個部分」引起你的興趣

英國前端工程師Ben frain的個人網站。右上角的字數倒數器以及上一篇下篇文章的btn。

* 喜歡的理由

這名前端工程師寫了許多技術相關的文章，當你在讀的時候右上角的字數倒數器就像是在鼓勵你一樣，跟你說：只剩多少字囉！你就看完了！這讓我覺得相當的有趣。

另外文章兩側的pre與next按鈕，點了之後並不是馬上讓你導到上/下一篇文章，而是會先跑出該篇文章的篇名，如果你有興趣的話點了才會跳轉，或，不喜歡的話，只要在轉動頁面這跑出來的按鈕就會自己縮回去了。一般比較常見這樣的按鈕，都是按了才會知道下一篇是什麼，或是mouse on的時候會淡淡的浮現上/下一篇是什麼。

這讓我想到了：“只要夠清楚，其實使用者不介意多點一下” ;)

[uidailystudy]

誠品生活松菸店

* 截圖

* 「哪個網站(出處)」的「哪一個部分」引起你的興趣

誠品生活松菸店的場地租借頁面，multiple parallax 與巨大 footer。

* 喜歡的理由

整體畫面很有質感，有模糊效果的 parallax，當滑鼠經過圖片時會聚焦並改變視角; 巨大的 footer 不用時收納起來，當展開時便有導航/品牌介紹的功能，實用哪。

[uidailystudy]

Medium 的 page transition 風格

* 截圖

* 「哪個網站(出處)」的「哪一個部分」引起你的興趣

Medium 的 page transition 風格

相關資訊

Medium，一個在過去幾個月備受歡迎的部落格平台，是由 Twitter 的共同創辦人 Evan Williams 和 Biz Stone 於 2012 年 8 月時共同創立。

雖然有人將它定位為 Twitter 與 Blogger 之間的「中量級」寫作平台，有些人似乎也能從中找到有趣的圖文，不過 UPSTART 商業雜誌的 Alex Dalenberg 倒是困惑地表示：「不知道這個平台到底可以提供什麼。」

codrops 上的仿作 DEMO

* 喜歡的理由

獨樹一格，運用在活動宣傳等企劃頁應該很有意思 ( ͡° ͜ʖ ͡°)。不過呢，為什麼沒有辦法回去上一頁啊 (只能前進，不能回顧讓筆者有點焦慮 @@")

相關閱讀

「讓文字發光，第三代部落格平台——Medium」 (inside)

「改寫部落格定義，Medium 美到令人一讀上癮」 (inside)

「讓部落格回歸本質——Medium 誕生記（上）」 (inside)

「讓部落格回歸本質——Medium 誕生記（下）」 (inside)