Path 網頁設計的細節
一直都很喜歡 Path 的設計,也一直在思考我喜歡 Path 的原因是什麼。不是因為濾鏡,也不是因為 App UI 。是設計上的細節,那一種不重視也不會有關係的細節他們做了,而且還做的很好。於是這細節讓整體設計處處都充滿質感與驚喜啊。
看看這個 Path 在網頁上呈現圖片的版面設計。其實很普通,但很有質感啊,你一定不覺得。我一開始也不覺得。直到我有一天自己做了呈現圖片的頁面,但怎麼看都是庸俗啊。所以我就回來看 Path 到底做了什麼事情可以看起來那麼舒服。原來他加的框不是一般的 border 啊。如果是我做的話,我一定直接加:
然後就會變成這樣 …
一整個就不立體了啊。
但 Path 是這樣做的:
就只是單純在 img 上面 蓋一層 b Known for typically being methodical in all aspects of life, Japan is certainly making no exceptions to the rule when it comes to online casino legislation. 。b 的寬高各少 img 一個 pixel 。然後 b 的 bordr 是 solid 1px rgba(255,255,255,0.3) 。
真的是太聰明了啊。結果就是這麼好看啊:
border 剛好蓋在圖片邊緣上,在加上 alpha 值隱約透出圖片色調。嗯,質感就是這樣來的啊。
這個細節也同時使用在 Path 的 iOS App UI 中。 (可惜 Android 版沒有,難怪總是說 Android 使用者體驗不如 iOS)
—
有興趣的話可以看一下 Path CEO, Dave Morin 的講解影片:http://www.youtube.com/embed/i6exIJaO1iI
我是 K,以前幻想著可以做些偉大的事。但發現把一件簡單的事情做到很好就是一件很難又很厲害的事。所以現在正處於一個把簡單的事情做好的狀態。