Path 網頁設計的細節

一直都很喜歡 Path 的設計，也一直在思考我喜歡 Path 的原因是什麼。不是因為濾鏡，也不是因為 App UI 。是設計上的細節，那一種不重視也不會有關係的細節他們做了，而且還做的很好。於是這細節讓整體設計處處都充滿質感與驚喜啊。

看看這個 Path 在網頁上呈現圖片的版面設計。其實很普通，但很有質感啊，你一定不覺得。我一開始也不覺得。直到我有一天自己做了呈現圖片的頁面，但怎麼看都是庸俗啊。所以我就回來看 Path 到底做了什麼事情可以看起來那麼舒服。原來他加的框不是一般的 border 啊。如果是我做的話，我一定直接加：

然後就會變成這樣 ...

一整個就不立體了啊。

但 Path 是這樣做的：

	<div class="photo-container" style="border-radius: 6px›;">
	<img src="https://s3-us-west-1.amazonaws.com/images.path.com/photos2/6d521373-be73-4ff3-8d7e-4912f0749551/2x.jpg" width="400" height="535.625" class="moment-block photo-image">
	<b class="photo-border" style="width: 400px; height: 535.625px;display: none;"></b>
	</div>

view raw gistfile1.phtml hosted with ❤ by GitHub

就只是單純在 img 上面 蓋一層 b 。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