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

Tags:, ,


Leave a Reply

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *