今晚個人簡介的新頁面正式上線了。

關於當先生

原先個人簡介也是採用Blog的架構,發表了一篇個人簡介的文章,做了一個簡單的連結。

[全文:]

朋友建議我既然要重新包裝,應該注意到每一個細節,包含個人簡介頁面。原本我想直接用about.me所提供的個人資訊頁面功能,但在跟幾位朋友討論後,大家都認為應該將調性調整與Blog,還有產品頁面一致。

所以也是採視差滾動(Parallax scrolling)的方式,製作了這個新的個人資訊頁面。個人資訊頁面的後半段,使用英文的原因是之前在Flickr上(早期Flickr在國內還不流行)常收到國外網友詢問我攝影方面的問題,因此後來就將一些簡單的資訊英文化,放在Flickr上作為跟國外網友介紹的基本資料。

產品的整體性包裝,到這邊算是告一個段落了,接下來就是回頭處理App上架的問題了。

P.S.我收到了網友詢問背景大圖有幾張的問題,目前總共設定了101張,由於是採用隨機顯示的方式,因此想看完101張,可能要點好幾次才有辦法。另外圖片最佳的顯示,應該是1920×1280,螢幕解析度小於這個尺寸的,應該都無法看到完整的構圖;螢幕解析度大於這個尺寸的,圖像會放大。另外背景圖片除了縮小到寬度為1920的像數之外,存成Jpeg檔時選擇60%的壓縮,這是為了提高頁面載入的速度,所以圖片的畫質較差是難以避免的。

下面縮圖就是目前背景使用的100張圖片(有一張沒放進去)。

Blog使用的背景大圖

最佳的解析度是用1920的寬度來閱讀,可以看到較完整的構圖。

新版首頁大圖(螢幕解析度 1920×1247)

新版首頁大圖(螢幕解析度 1920×1247)

若是採用24吋的螢幕,解低度有到2560的寬度,畫面會依寬度來放大。此時顯示出來的圖片,仍然會因為對位關係,無法表現出原本構圖。

新版首頁大圖(螢幕解析度 2560×1247)

新版首頁大圖(螢幕解析度 2560×1247)

至於關於當先生的頁面也是採一樣的方式處理,在平板上無法觀看到滾動視差效果,實際上它是由三張圖片串起來的。

關於當先生之一(螢幕解析度 2560×1247)

關於當先生之二(螢幕解析度 2560×1247)

關於當先生之三(螢幕解析度 2560×1247)

延伸閱讀:
60多個超炫的視差滾動效果網站設計欣賞(上)

60多個超炫的視差滾動效果網站設計欣賞(下)





2013-04-19  -  duncan Email  -  2797  -  影像日記 - 讀者回應

回應管理, Pingbacks:

這篇文章還沒有 回應管理/Pingbacks ...

讀者回應:


你的Email位址將不會顯示在這個站點.

您的URL將被顯示.

允許的XHTML標記: <p, ul, ol, li, dl, dt, dd, address, blockquote, ins, del, span, bdo, br, em, strong, dfn, code, samp, kdb, var, cite, abbr, acronym, q, sub, sup, tt, i, b, big, small>
Enter this code:
authimage

(換行會被轉換為 <br /> 標記)
(將你的姓名及Email及網址記在Cookie中)
(讓使用者可以直接寫訊息給你(不會顯示你的Email).)

上一篇文章: Blog改裝新登場下一篇文章: 久違的edia cafe與偽單身假日生活