介面設計

網頁設計中的多層視差滾動效果 (Parallax scrolling)


觀察上面的圖片,裡面有三張圖片,分別放置於不同階層,如此可以構成一幅具有簡單景深的畫面。假設我們將三張圖作成由右向左捲動的動畫,但背景圖片動得比較慢,前景圖片動得比較快,我們就可以感受到較符合生活經驗的景深效果。 繼續閱讀

保護性設計(Defensive Design)-亂搞也不出糗的設計品質!

所謂的保護性設計(Defensive Design),指的就是當你所設計的產品因為某些非預期的使用 (如:使用者的誤用、系統或其他外部因素…等) 而造成錯誤時,你的產品也能有效的提供設計回饋,讓內心纖細敏感的使用者不會突然受到太多驚嚇。

莫非定律說:凡事有可能會出事的,它就一定會出事。是的,只要是人為設計的產物,都有出事的機率,有天它心血來潮就會在客戶面前挫屎給你看。所以我想,無論你是設計師(Designer)或是開發者(Developer),應該多少都要把莫非定律放在心中,儘量想著怎麼樣讓你的產品在出事的時候,也能有帥氣的姿態。
繼續閱讀

[CSS] Overflow清除Float效果的妙用

在使用css設計版面時我們常常會遇到的情況之一,就是用來包覆float子區塊的父區塊無法跟隨float子區塊的高度一併延伸:

float的子區塊1
float的子區塊2

而通常我們要解決這種情況,我們會增加一個具有 clear 屬性的元素 (例:具有clear:both設定的div元素) 在float子區塊後面來清除Float效果,讓父區塊可以成功的包覆子區塊: 繼續閱讀

Drupal 7版型開發(theming)與Drupal 6的不同(下)

所有模版的標題都具有前置字與後置字變數

Drupal 7樣版都具備兩個新的標準變數:$title_prefix$title_suffix

這兩個變數內放的是想要被呈現在個別的標題前或後的輸出內容,可作為contextual links之用,像是讓具有某種權限的使用者可以看到一些特別的連結出現在標題上面或下面。

在node.tpl.php內局部的(Granular)展示$content 資訊

現在不需要像使用Drupal 6的$content時,要先做處理才能分隔$content的輸出。在Drupal 7使用 print render($content) 等同於在 Drupal 6的 print $content,不過當您想輸出部份的內容,像是link,在Drupal 7可以用 print render(content['links'])取得。

使用方式可以參考一下 node.tpl.php內的程式碼: 繼續閱讀

鑽石、訂製鑽戒的線上之戰:eBay, 藍色尼羅河(Blue Nile), 九鑽網

eBay鑽戒設計比賽

eBay鑽戒設計比賽

線上拍賣的知名品牌eBay最近舉辦了「打造你的閃亮鑽戒」(Build Your Bling)比賽活動,讓參賽者設計專屬的鑽戒,並藉由這次的活動正式宣告eBay也開始進軍鑽石的線上零售戰場。這次比賽的優勝者將獲得Gemstoneking公司贈送設計者所設計的戒指,預計價格超過25000美金。

參與者二月19號前要完成並送出自己的設計,其他的eBay使用者將進行最佳設計的投票來選出優勝者,二月26日公佈比賽結果。這樣的訊息告訴我們,鑽石的線上銷售又將進入一個全新的世代! 繼續閱讀

如何用電腦看模擬手機上網的網站?


這是今天一位朋友突然問我的一個問題,其實有很多種simulator,但可能要先安裝特定的手機OS模擬器,才能使用它內建的browser吧,因為我的經驗也不是非常多,我只接觸過windows mobile,但一下要搞到wm的模擬器,其實也很麻煩,又非常大。 繼續閱讀

Google Closure工具:Google的javascript工具組


全球數百萬的Google用戶每天都使用Google提供的Gmail, Google Docs及Google Maps等便利的服務,這些服務都大量使用javascript應用,也能由此看出Google對javascript-based apps的重視程度。最近Google更提供了一組開發javascript的工具組,讓全球的開發者能更輕鬆的開發殺手級的javascript apps,這組工具分別是:Closure Compiler, Closure Library及Closure Templates,可視為分別針對javascript程式碼優化、框架、樣版引擎所提出的解決方案。

Closure Compiler 提供三種優化javascript程式碼的方式,分別是Serive UI, API, Application等,而優化的方式可以透過不同的設定來進行,可以幫你把javascript程式排得整整齊齊,也能用很「極端」的方式,幫你把無用的函式或冗詞精簡,建議在寫完javascript code後可以來compie一下。Service UI的形式是我個人覺得最方便的,因為它就是一個網頁的表單,設定一下就會跑出結果。如下圖,左邊是compile前的設定,右邊則是compile後的優化成果),Closure Compiler Service UI的官方教學文請見這裡繼續閱讀

使用javascript (或jQuery)對SEO影響的迷思

[圖片來源:blog.sharkspace.com]

近遇到想做SEO的客戶,因為該客戶現有的網站選單,主要以Flash製作,觀看網站的原始碼就很容易了解spider應該很難分析全站的架構。不過因為該站經營三、四年了,除了要修改選單為適合SEO的方式,我想最好也要保持選單與視覺設計的一致性,除了不要破壞視覺識別,也希望讓操作性的影響降到最低。
繼續閱讀