2013年8月29日

[教學]快速回到頂端(Go Top)按鈕__符合使用者體驗的友善設計


(Pic from: shimivn.blogspot.com)
「回到上方」的按鈕是很常見的網頁設計,且 code 不難寫。那麼特地撰寫本文的目的為何呢?其實主要是拜讀了 +Bin Ye 的「改善 Google Blogger 返回頂部按鈕的使用體驗」覺得很有道理,因此雖然未使用這個按鈕(已經有「置頂導覽列選單」了),不過這個友善的使用者體驗設計,值得把他做出來,讓有需要的站長自取,因為本站的作品基本上也是朝使用者體驗的方向在前進。

2013年8月26日

[教學]讓部落格導覽列選單能浮動置頂

寫完「部落格浮動側邊欄」之後,對於這樣的功能還可以有什麼樣的應用,直覺想到的是水平導覽列選單(也就是 Blogger 的 "網頁" 小工具),認為直接把程式碼拿來套一下應該就能浮動置頂、凍結在網頁的最上方。

2013.12.20 公告:由於本篇程式碼會有些 bug,請直接前往「讓部落格導覽列選單能浮動置頂__更新版」。


試了一下發現小改程式碼即可,於是再加了一點透明的效果,滑鼠經過導覽列時解除透明,就像本站上方這個水平導覽列一般,或是請看下面的示意圖:

2013年8月22日

Opera 15 調校心得__首頁+滾輪換頁(滑鼠手勢)+書籤列+Gmail

在使用 Blogger 之前,一直是 Opera 的愛用者,可惜 Opera 與 Blogger 不太相容,為了網頁的展現效果只能轉投 Chrome 陣營。

不過現在 Opera 改採 Chromium 引擎後,Blogger 網頁得以正常顯示,加上越新版本的 Chrome 越來越常當掉、資源越吃越多,此時 Opera 反而成了可以考慮的選項。

新世代的 Opera 15 多數評價不高,認為只是掛上「Opera」招牌的 Chromium。不過對我這種「XP 再戰十年」的舊配備而言,倒是很高興有這樣的產品現身(精簡版 Chrome + 執行效率 + Opera 的某些友善設計),也認真地考慮如何調整目前 Opera 的操作不便之處。因此這篇算是個人的調校心得,也許不能套用到每個人的使用習慣,不過相信對於 Opera 基本操作的改進還是具有參考價值。

2013年8月20日

可以取代新版 Opera 15 或 Chrome 書籤列的快速書籤選單


(Pic from: iconarchive.com)
新版 Opera 15 摒棄書籤及書籤列,認為用「快速撥號」可以取代,但相信沒幾位使用者能夠同意這件事。其操作不但花時間,「快速撥號」畫面能擺放的網頁 logo 也是有限。

我想到的解決方法為利用滑鼠手勢套件,藉滑鼠按鍵組合來執行 javascript,在畫面中央直接顯現含書籤的快速選單,可以解決沒有書籤列的困境。而且使用起來,比原本書籤列的設計更方便、快速。

因此這個方案,不但 Opera 適用,Chrome 也可以嘗試看看。如果想先測試效果,可以按下面這個按鈕,模擬滑鼠按鍵組合所跳出的快速選單──

2013年8月16日

讓新版 Opera 15 能滾輪換頁+滑鼠手勢加強


(Pic from: stevefullmer.tumblr.com)
Opera 引領先驅的原生滑鼠手勢系統,在新世代的 Opera 15,竟被縮編到剩下五種手勢,這應該是支持者最失望的一部份了。能有一點小安慰的是,Opera 15 可經由安裝套件後,移植 Chrome 的套件在 Opera 上使用。由於 Chrome 的眾多滑鼠手勢套件並非為了 Opera 而設計,那麼在 Opera 環境上能發揮幾成功力,請看以下的測試心得。

2013年8月15日

讓新版 Opera 15 能使用首頁功能+搬移暫存檔(cache)路徑


(Pic from: findicons.com)
新世代的 Opera 換了引擎核心後,最為人詬病的其中一個項目為 "無法設定首頁"。其實沒有首頁功能不是很嚴重,如果能每次開啟瀏覽器,都固定出現快速撥號頁面,也是不影響作業。

偏偏 Opera 15 重啟時,會自動打開上次關閉前的所有頁面,如果有 5 個分頁就會重啟這 5 個分頁,這樣的設計未免太沒彈性了,很難想像這是過去注重使用者體驗的 Opera 所做出來的事,總不能每次都要一個個關閉之前留下的分頁吧?

2013年8月14日

讓側邊欄 Adsense 廣告出現在吸引目光的位置 [加值文章]

上一篇寫了「部落格浮動側邊欄」後,原本的應用是要讓 Google Adsense 廣告能夠在側邊欄浮動、增加讀者的注意力。還好沒釀成大錯,即時發現「Adsense 的官方規定」是不允許這樣做的。

根據閱覽經驗,當讀者觀看部落格的文章時,目光焦點大多集中在本文區塊,這也是當廣告放在本文區塊時,點擊率會遠高於側邊欄廣告的原因。那麼,該怎麼做可以提升側邊欄廣告的點擊率呢?


<< 請注意!本篇文章含會員加值文章內容,需點數兌換 >>
2013年8月5日

[教學]部落格浮動側邊欄(浮動廣告)__改良精簡版

浮動側邊欄是效果很不錯的一個網頁設計,這個浮動區塊不會隨著畫面捲動而消失。站長可將想特別強調的內容、傳達的訊息、甚至是廣告內容放入這個區塊,而達到強力曝光的效果。

一開始敘述的是原理及過程,想直接安裝程式碼請跳「二、準備動作」。

P.S. 為了避免誤會,右邊的浮動廣告圖案是故意使用的錯誤範例,請見「四、錯誤示範及提醒」的解釋。


<< 請注意!本篇文章含會員限定內容 >>