色彩對比分析演算法

色彩對比

在開發網站經驗中,我們有時候希望能讓使用者能夠擁有更多的控制權,如讓使用者自行修改網站的背景顏色或字體顏色,若您遇到的使用者是熟悉網站顏色搭配的則通常不會有太大的問題,但當你遇到不太會配色的使用者時,配出來的字體顏色與背景顏色太接近,造成網站的可讀性降低,不只流失了拜訪者,也讓你的網站整體美感變得不好。

若你的會員有上千個,我們總不可能逐個頁面去檢查配色吧? 這個時候就需要一個”色彩對比分析演算法” 來解決這個問題。

對顏色熟悉的朋友都知道在RGB顏色模式中, R代表RED, G代表GREEN, B代表BLUE,若以rgb(x,y,z) 作為顏色產生的含數來看,x,y,z 的值必須介於0-255之間。紅色代表rgb(255,0,0), 綠色代表(0,255,0),…以此類推。

假設使用者輸入了兩種顏色,你想要知道這兩個顏色的配色是否恰當,根據W3C的建議,我們可以使用以下演算法

我們主要透過兩個指標來判斷,分別是:亮度差異色彩差異

W3C 所建議的亮度差異應大於 125, 而色彩差異則應大於 500(也有人建議400)。若兩色比對的結果小於這些指標則表示不符合。

色彩亮度公式
色彩亮度係以下列公式計算所得:
((紅色值 X 299) + (綠色值 X 587) + (藍色值 X 114)) / 1000
背景色亮度與前景色亮度的差異應大於 125.
註: 這個演算法係由轉換 RGB 值為 YIQ 值的公式中所取得. 這個亮度值得出了色彩的知覺亮度.

色彩差異公式
色彩差異係以下列公式計算所得:
((紅色值 1, 紅色值 2) 的最大值 - (紅色值 1, 紅色值 2) 的最小值 ) + ((綠色值 1, 綠色值 2) 的最大值 - (綠色值 1, 綠色值 2) 的最小值 ) + ((藍色值 1, 藍色值 2) 的最大值 - (藍色值 1, 藍色值 2) 的最小值 )
背景色與前景色的色彩差異應大於 500.

 

參考資料:

1. 親和資訊解決方案 http://ais.z6i.org/web/resources/contrast_analyser/

何時該用「A/B 測試 」(A/B Test) 或 「可用性測試」(Usability Test)?

這幾天在Facebook看到朋友分享了一張圖片,
覺得對網站管理應該滿有幫助的,
於是花了一些時間去研究這兩種Test的使用時機.
這張圖是長這個樣子的 (圖片取自: https://www.facebook.com/UXLabsIndia)

AB Test And usability
AB Testing 與 Usability Testing 的使用時機

 

HOW MANY

當你想知道一件事情的效率有多高, 有多好, 或者比較兩個活動所帶來的效益時, 我們會用A/B Testing來做測試,在Google上搜尋, 可以找到Google Adsense對於 A/B Testing的定義如下:

A/B 測試是指測試兩種 (或多種) 不同情況的成效:情況 A 或情況 B。要找出哪一種 AdSense 廣告設計可為您帶來最多收益,A/B 測試就是您的最佳選擇。舉例來說,您可以測試「戶外」色調和「海濱」色調,看看哪一種成效比較好,或是拿 728×90 超級橫幅廣告與小型 468×60 橫幅廣告做比較。

那麼 A/B 測試要如何進行呢?有兩個重點:

-兩種情況之間只能有一個相異的部分
-這兩種情況必須同時執行

當我們對自己的網站做一些行銷活動的時候,如:發送電子報,會想知道這些活動所帶來的效益。試想狀況如下:我在電子報中放了三個不同的按鈕(每個按鈕都是不同的活動圖片),透過統計這些按鈕被點擊的次數來了解客戶的喜好,這種時候就適合使用A/B測試。

WHY

那甚麼時候我們會用到”可用性測試” Usability Test呢? 當你的問題是屬於”為甚麼”的時候。如:為甚麼使用者不是用我的應用程式?為甚麼使用者不進行註冊來留言?等等諸如此類的問題,可用性測試就能夠為您的問題提供一些答案。

根據維基百科的,可用性測試的定義如下:

可用性測試(Usability testing),是一項通過用戶的使用來評估產品的技術,由於它反應了用戶的真實使用經驗,所以可以視為一種不可或缺的可用性檢驗過程。也就是說,可用性測試是指讓用戶使用產品(服務)的設計原型或者成品,通過觀察,記錄和分析用戶的行為和感受,以改善產品(服務)可用性的一系列方法。它適用於產品(服務)前期設計開發,中期改進和後期維護完善的各個階段,是用戶中心設計的思想的重要體現。
可用性測試是可用性評估方法中最為常用的一種,作為人機互動研究的一個重要領域,已經被廣泛研究。

簡單來說,其實我們常把Google Analytics的Tracking Code安裝到網站中,透過GA後台就可以看到很多使用者的使用數據(亦包含了使用者網站流程),幹這些事其實目的就是為了做可用性測試,看看你的網站到訪者到底有多「黏」你的網站。黏度越高表示你提供的內容對使用者來說是有價值的。跳出率(Bounce Rate)越高代表了你的網站雖然吸引人點了進來, 但很快就跳出去了(表示內容不符合期望)。透過不斷的分析與調整,我們可以從數字看出一些端倪,了解使用者離開或停留或使用的原因,以提高網站的「易用性」與「轉換率」。

在GOOGLE找到了一篇關於設計簡單快速的可用性測試供大家參考:http://uedc.163.com/4151.html

想要免費且快速製作App? 現在透過Miiroad就可以快速擁有專屬於自己個人,企業或團體的行動App

當各大智慧型手機大廠正在爭奪市占率的同時,
內容提供者也一直在思考到底應該投資於Android還是iOS,
亦有些企業選擇同時開發兩種平台, 但開發手機App其實需要投入不少的資源.
為了讓不擅程式開發的內容提供者能夠快速的擁有自己的App,
Miiroad提供了一個免費且方便的平台, 讓內容提供者迅速跨入Social-Local-Mobile (社群-位置服務-行動)的領域.

Miiroad提供了幾種模板讓使用者選擇: 商店, 活動, 診所, 甚至目前最流行的婚禮APP也能夠在Miiroad上找到.

婚禮APP
使用Miiroad的服務可以讓您的婚禮更添創意

 

目前為市場推廣期,招募結婚新人大放送,開放給50對新人,
可以免費幫新人做一支專屬於的婚禮app,(價值3999元)做為宣傳用,
這支app有報名喜宴的功能和分享婚紗照及塗鴉牆等等功能,
當然您也會免費擁有這支app,還可以獲得統一超商200圓禮卷,
如果您有意願,請林小姐 iris聯絡: 02-8219-2977

http://www.wretch.cc/blog/miiroad
http://www.wretch.cc/blog/miiroad/21703320
http://www.miiroad.com/wedding-app.php

婚禮APP是現在越來越流行的結婚夯物
從之前流行的流行電子婚帖
到雙方的成長MV.感恩MV……等
現在有結合新人的感人成長故事.新人的美美婚紗照.電子婚帖….等
更可以讓新人的親友團們直接透過手機平板直接留言變成小型親友論壇
也可以讓親友直接在APP裡上傳親友們在結訂婚當天所拍的照片
讓新人可以輕輕鬆鬆收集屬於自己那天的幸福
迷路的[享幸福APP] 更提供報名功能
讓新人可以直接利用手機及平板來統計欲要參加結訂婚的親友數量或是特殊飲食狀況

設定CentOS的時區(timezone)

/usr/share/zoneinfo
透過上述指令可以看出此主機的時區資訊

更換時區的方式:

# 不正確的時間
$ date
Wed Oct 1 07:43:58 CDT 2008
#
# 解決方式
#
$ sudo rm /etc/localtime
$ sudo ln -s /usr/share/zoneinfo/Asia/Taipei /etc/localtime
#
# 變正常了
#
$ date
Wed Oct 1 12:42:33 GMT 2008

#不要忘記重啟其他的服務
# service mysqld restart
# service httpd restart

牛頓工作室增加了小小外掛

雖然這件事情我已經重複做在很多的專案上, 但卻一直沒有套用到自己的部落格中. 今天趁一時興起來更新一下功能, 順便討上Facebook的留言版功能, 以解決我的部落格每次都被一堆垃圾留言轟炸的問題, 這樣以後就可以讓真心想留言,想發問的人留下文字了.

更新項目:
– FB按讚的按鈕 (如果你喜歡我的文章就按個贊吧)
– FB留言板功能

SYMBOLIC LINK (ln -s) 筆記

SYMBOLIC LINK (ln -s) 筆記
在Linux有時候因為硬碟在某個磁區被塞滿了,我們需要把網站移到不同的磁碟區。
這個時候又不想改變其他的設定就可以用Symbolic link來達成。
比如說我要把 /var/www/html 對應到 /home/web/xxx.com/html
方法如下:

Step 1:
先把網站複製一份到制定的地方
cd /home/web/xxx.com
cp -fR /var/www/html /home/web/xxx.com/
他就會把整個html資料夾複製到 /home/web/xxx.com去
使得所有網站的資料都複製一份到指定的路徑

Step 2:
移除原本的路徑
rm -fR /var/www/html

Step 3:
增加Symbolic link
ln -s /home/web/xxx.com/html /var/www/html

Step 4:
修改檔案的擁有者與群組,
這裡以web為主要user
這裡以apache為群組名稱
xxx.com 是整個
chown -R web xxx.com
chgrp -R apache xxx.com

Step 5:  (重要)
這個時候Apache無法讀到web的資料內容,
我們還有一個重要的步驟要完成。
就是把web的權限設定成755
chmod 755 /home/web

 

AKU JIMAT iphone apps

牛頓工作室除了接案, 介紹一些新技術之外, 我最近還找到了它的另一個新的定位,
就是觀察台灣與東南亞資訊產業的一些動態, 以及有趣的事情, 來分享給對這些課題有興趣的人.

就以最近返鄉過年的觀察來看, 資訊產業在馬來西亞的發展也不容小覷,
就連政治人物也觀察到APP的市場, 以最近在FB竄紅的iphone APP – AKU JIMAT就是一個鮮明的例子.
AKU JIMAT 是馬來文”我節省”的意思. 這個APP的遊戲玩法很簡單, 就是讓你不斷的存錢,
存夠錢了就可以去商店買東西, 買足了12樣奢侈品之後完成了遊戲(看你能在幾歲之前買齊12 樣奢侈品),
而在存錢的過程中若碰到炸彈就會增加歲數, 當遇炸彈數達99時表示你的年齡已經可以退休了(即GAME OVER的意思).

乍看之下是很無聊的遊戲, 但若你了解馬來西亞的政治動態就會知道其中的奧妙.
此APP旨在諷刺某政治人物曾經在公開的場合中透露自己的鑽石戒指是靠從小存款, 累積財富而來的.
所以遊戲的目的就是要提倡節約的美德, 因為每個人如果勤勞存款, 說不定也會像此政治人物一樣, 能夠買的起價值不菲的鑽石戒指.  雖然不清楚此APP的製作人為何, 但可以很明顯的看出在大馬是有人願意投資資訊產業於政治目的的(就像台灣的總統候選人蔡英文的助選團也有為其設計APP一樣)

這對大馬的資訊產業人士來說, 其實是有正面的影響力的.

以下是遊戲的畫面:


遊戲主選單


遊戲畫面


存夠錢, 可以購買奢侈品

瀏覽器市占率

[DESKTOP]從趨勢來看可以看出CHROME已經快要突破FIREFOX的底線了, 而IE也已經從從前的9x%掉到52%, 將來勢必會成為三國鼎立的時代.

[MOBILE] 在行動裝置的瀏覽器部分就完全看不到IE的影子了, SAFARI佔了一半以上,
相信主要的貢獻都是來自ipod, iphone, ipad的族群.
而另一個 不能忽視的是Opera Mini, 佔了22%, 相信是來自Android的平台居多,
而Android Browser (原生的Android) 瀏覽器佔了 16%, 位居第三.

以上數據來自http://marketshare.hitslink.com/browser-market-share.aspx?qprid=0&qpcustomd=1
相信調查族群主要為美國的行動裝置與DESKTOP使用者

再來分析擁有10萬會員的抽獎王平台, 我們的主要使用者都是來自台灣, 所以相當具有參考價值:

從2011年1月至2012年1月的用戶瀏覽器統計. Firefox是落於Chrome之後, 而IE還是居首.

 

 

 

荷豐溫泉館食記

從馬來西亞來臺灣那麼多年,雖然去了不少次北投泡溫泉,但其實都是泡大眾澡堂,還沒有去過氣氛比較好的溫泉館。問了台灣的朋友後,向我推薦這家-荷豐溫泉館。

從新店搭捷運直達捷運北投站,到了捷運北投站之後,發現有不少溫泉館都有提供接駁車服務,真是服務周到呢。過了一陣子,荷豐溫泉館的專車也到了,兜了幾個轉彎,很快的抵達溫泉館門口了。

clip_image002

從門口來看,就可以深深感受到店家的用心,結合中式及日式-窗戶的花邊是中式的,用了大量的木片雕塑亦表現出日式的風格。我常常在想,台灣在光復前被日本殖民了近五十年,一定深受日式文化影響不少,像這樣的建築物就剛好表現出台灣中日融合的特色。

在餐廳內,就可以感受到比較強烈的中國風,「荷豐」這個名字的特色直接反應餐桌上-餐巾都折成荷花的樣式,讓我們開動前都不太捨得把他弄壞。廚房旁擺了一個中式的屏風,餐廳內也放了不少的中式擺設品,令人印象最深刻應該是門口那柱白色大象牙吧。

在菜色方面,荷豐溫泉館主打的就是中國菜了,我們看了菜單後決定點四道菜:螺肉海鮮鍋,黃金南瓜,宮保高麗菜以及川式麻辣鍋。

clip_image004

螺肉海鮮鍋

螺肉海鮮鍋是我朋友強力推薦的本店必點菜餚之一。果然,喝了第一口湯之後才知道他沒有在唬爛我。除了彈性十足的螺肉外,裡面還有我愛吃的金針菇,豆腐等,湯頭十分入味。

clip_image006

黃金南瓜

黃金南瓜,服務生推薦說本菜選用了上等的日本南瓜,纖維極細緻。吃下去的口感真的有別於我以前吃的南瓜。重點是南瓜上面還有不會死咸又鮮的鹹蛋,超適合送飯入口。

clip_image008

宮保高麗菜

以往我們吃的高麗菜不外乎都是隨便炒一炒,或是當便當裡面的配菜,又或是滷味老闆問你要不要加高麗菜的高麗菜。還沒聽過宮保料理的高麗菜呢!所以就點來試試看,吃了之後才發現這樣的料理方式有別於一般,直接讓高麗菜升等「雞丁」的地位了。(宮保雞丁)

clip_image010

川式麻辣雞

最後一道川式麻辣雞是讓我回想起來都會流口水的菜餚。單單看照片就可以感覺出它富有彈性的雞皮,川式的麻辣不會太辣,跟雞肉的味道搭配很恰到好處。可以媲美我們南洋風味的「咖哩雞肉」。

這次前來泡溫泉卻意外吃到了那麼好吃的晚餐,讓人印象深刻。我想若有朋友從國外來台灣遊玩泡溫泉,我也會推薦他們來這邊用泡溫泉並享受如此美味的晚餐的。