讓你用個人Gmail也可以擁有免費又專業的自訂網域信箱

前言

大部分網友都擁有Google帳號,也很習慣使用Google提供的相關服務,所以Gamil也用的相當習慣,但如果你擁有一個網站,有自己的網域,信箱還用@gmail.com的話,看起來就非常不專業。那要怎麼做你才可以繼續使用Gmail又可以擁有自訂網域信箱呢?這時你就需要Improvmx所提供的服務了!

Improvmx的信箱別名服務

Improvmx.com 可以讓你設定自動網域信箱並把信轉到你的個人信箱的一個數位服務網站

Improvmx 是一間設定email 別名服務的公司。什麼是別名?所謂的別名是指幫人、事、物取另外一個名字,就像是綽號的概念。而Improvm提供的email別名服務是指,如果你原本有一個nowill@gmail.com的email網址,但你又有一個nowill.tw的網域,那你就可以設定「nowill@nowill.tw」當作是nowill@gmail.com的綽號,所以實際上你使用的是Gmail的服務,但你又同時擁有自訂網域信箱,Improvmx 所提供的email別名服務。

Improvmx的免費服務限制

目前Improvmx的別名服務,提供一個免費自訂網域的額度,在這個網域下你可以擁有5個email別名,也就是可以設定5個自訂網域email在同一個網域下,每天最多可以收到500封email,這對一般小公司來說可以說是非常夠用,而夾帶檔案的大小也是常見的10M容量,所以以夾帶檔案的限制來說不會有任何的問題。目前Improvmx的免費別名服務僅共email使用,但由於你實際上使用的email服務已經有提供smtp收信服務或IMAP/POP收信服務的話,你就可以正常使用Outlook或mail這樣的收發信軟體,不管是電腦、平板或手機都可以正常收發信。

透過Improvmx的服務,你可以在網站上顯示自訂網域的信箱,比起你放Gmail的個人信箱專業許多以外,你在收發信的過程中也可以使用原有的mail收發信機制,不需要額外設定或是重新學習email收發系統的介面,而且你在寄送email時也可以在寄件人填上自訂網域的專業信箱。我自己在其他其他網域上試用了3個月,覺得服務蠻穩定的,如果你是小規模的公司或工作室,你不需要額外付費購買像Google Workplace,也可以使用Google服務,是個減少成本又不失專業度的好選擇喔!

[趨勢]用statcounter來看2014年網頁設計趨勢

在去年2月我寫了“用statcounter來看2013年桌機網頁設計趨勢”與“用statcounter來看2013年手機網頁設計趨勢”兩篇文章,過了一年的時間我們來看看整個網路世界有什麼變化!

綜合評比

首先我們來看看綜合評比的部分,這部分我們會把桌機、平板、手機全部混在一起,來看看整體大環境的情況如何,我們先來看看瀏覽器的占比部分:

第一張圖爲全球前9大常用瀏覽器,第二張爲台灣前九大常用瀏覽器,在這個部分我們可以發現在全球部分IE已經被Chrome狠狠甩在後面,而在2013年九月的時候IE有往上爬的趨勢,這可能是因為去年9月微軟發表Surface 2代的緣故(當然還有其他原因),但仍然逃不過下跌的命運,Firefox倒是表現平穩,並沒有下滑的很誇張,代表Firefox的使用者大部份都是鐵桿粉絲級來著,所以流失比率不高。

再來去年台灣在瀏覽器部分Chrome與IE出現三次次黃金交叉,可以想像得出第一次黃金交叉時網頁設計同行的歡呼聲應該非常的高,雖然在12月有微微被IE超過,但今年初Chrome又再次贏過IE,在此我們只能說Chrome加油啊!趕快把IE狠狠地甩在後面吧!如果你現在正在使用IE瀏覽本部落格,請注意世界趨勢,並且建議您為達最佳畫面瀏覽,建議改用Chrome瀏覽器喔!

看完瀏覽器的品牌之後,我們來看看版本吧!其實主要有問題的版本大部份都在萬惡的IE上,從上面兩張圖我們就可以發現不管是國際上還是台灣,IE最常用的版本還是IE8,想運用更新的技術來製作網站?建議大家偵測到IE8以下版本都多一行“請換一個先進一點的瀏覽器,像是Chrome”吧!協力消滅萬惡不死的IE吧!

接著我們來看解析度,一樣第一張是國際的解析度數據,第二張是台灣的解析度數據,咦?台灣不是就還是1024x768為主嗎?是的沒錯,但是有沒有發現國際數據1366x768已經大老遠就把1024x768拋開了?而1366又是哪裡來的數字? 其實1024x768是以前4:3的螢幕寬度,現在都是寬螢幕踩16:9,所以當高度不變寬度變寬的情況下1024就變成1366了!隨著螢幕汰舊換新,1366x768遲早會取代1024x768的,只是台灣的螢幕汰換速度真的不是普通的慢,國際上1366x768解析度早就已經是主流解析度了,有些網站甚至會準備給1920x1080解析度用的圖檔,如果你的網站打算接上全世界,建議多多參考國外數據喔。

最後我們來看看作業系統部分,從不死的Windows XP 已經變成了不死的Windows 7了,Windows的佔有率還是非常非常的高啊!

在綜合評比部分會發現這些數據其實大部份都還是桌機的數據較多,原因在於桌機的數量還是大於平板或手機,以一個上班族來說,他也許會有一個平板與一隻手機,但家裡的電腦、公司的電腦(也許還有外出用的筆電),這些總和起來一個人就會有很多台電腦,這也是為什麼在綜合評比上,大部份的數據都還是桌機數據較多,既然綜合評比與桌機數據差不多,那接下來我們就來看看平板、手機的部分吧!

平板電腦評比

所先我們一樣先來看看瀏覽器佔有率的部分,在國際部分,很明顯的Safari瀏覽器幾乎占了,Safari是iPad系列的預設瀏覽器,由此可知iPad在平板的市占率比他牌高的嚇人,反觀台灣內部就差不多一半一半,原因應該是iPad價格較高,而部分使用android的平板售價較為便宜的緣故。

解析度不管在國內還是國外,768x1024解析度還是最大宗,雖然目前都以寬螢幕16:9較多,但是因為平板畫面較少,所以如果有要做平板App記得千萬不要忽略768x1024這種3:4的比例。

在作業系統方面,國際上還是iOS一面倒,但是在國內卻出現了黃金交叉,時間點就在今年二月,除了android有價格優勢外,在android系統上,不管是外觀、規格、螢幕大小等等,都有多樣化的選擇,所以在開發平板方面的app時就要考量是否只有擔心iOS規格就好,就目前的數據看來,開發android平板App也是很重要的一件事。

手機評比

在手機瀏覽器部分我們可以很明顯的看出android的數量不管是國內或國外都是大量超過iPhone,所以如果網站完成在上線之前做測試時,千萬不要只測試iPhone而忽略了android系統,即便這代表我們可能要準備很多實體測試機,但如果忽略測試android平台上的瀏覽器,我們就無法確保我們做的網站是否在各式平台上都有舒適或完美的呈現。

在手機解析度上可以看出十分複雜又多種尺寸結果,所以在手機解析度上看得出來還在戰國時代,所以如果想要做出一個符合所有解析的手機網站,難度自然不會低到哪裡去,但是如果仔細觀察會發現這些寬度或高度都是4的倍數,所以如果在手機網站設計時,Grid System設計成4的倍數,基本上要做出符合所有手機解析度的網站也是非常可能的。

在手機系統部分,我們可以看到不管國內或國外android已經超越iOS許多倍了,就是因為android系統的廣泛導致手機上的瀏覽器也是偏向android較多,重這樣的比例看來,不難看出為何Apple在產品策略上想推出畫面較大或價格較低的手機產品。而在國內從去年就可以看出android跟iOS消長上的對稱性,在今年也不例外,只是可以發現iOS的市場佔有率是乎僅剩去年的一年,而這些消失的族群大部份也都投靠至android陣營去了。

總結

在傳統的桌機或平板電腦上,我們已經可以淘汰一些較舊的瀏覽器,也因應XP停止更新之後,由於大量的XP用轉到Windows 7上,所以我們測試系統也要逐漸轉成Windows7的環境,而瀏覽器也開始大量採用Chrome,由於Chrome本身備有更新提醒功能,所以可以減少IE這種個版本bug問題都不同的情況。而解析度部分也開始從1024x768漸漸轉變成1366x768,對於畫面越來越寬的情況下,網站該如何設計以及如何打破過去的設計模式就是非常重要的課題。在平板上,由於iOS占有市場優勢,瀏覽器也是走Safari較多,解析度就會是768x1024,當然橫拿就會等於傳統桌機的1024x768解析度了,這個部分主要原因是為了符合大部分網站是設計給1024x768解析度觀看,讓網站不需做更新也可以在平板上正常瀏覽的緣故。至於手機部分就採用大量的android系統,主要原因是android是開放原始碼,各家手機廠商都可以使用,相較之下Apple的iOS就較為封閉,導致開發速度與創意也較為侷限,但由於市場偏好逐漸改變,喜歡大螢幕與價格低廉的族群越來越大宗,這也迫使Apple必須改變現狀,撤下小螢幕的防線了,但也由於Android系統較為開放,所以在解析度上就百家爭鳴了,不過只要掌握各平台的通則,個製作符合個平台的網站,也就不會是一項不可能的任務了。

[經驗]RWD常見設計模式 - 換個角度看RWD(下)

RWD常建設計模式 from Nowill Chang

本篇接續上篇:[經驗]RWD常見設計模式 - 換個角度看RWD(上)

說了這麼多,我們回到今天我最想講的重點,也就是建模這個動作,在任何網站製作的時候就應該確定這個網站是for什麼人,也就是說目標使用者族群應該早早就確認出來了,所以在這個網站上線後就必須追蹤這個網站的各種資料,然後來做資料分析,以確保你所做出來的網站是正確適合目標使用者族群的,而在網站沒有上線前,一定會遇到的問題就是可以分析的資料太少了,既然分析的資料少,那就必須創造資料,所以可能會找內部同事封測,或是找親朋好友試用,然後再從中收集資料做資料分析,所以說網站資料分析真的非常重要!再來是你在建模的時候就必須清楚瞭解你的目標使用者使用的平台或載具有哪些,這些載具的操作模式又是什麼,而且通常使用者都會開外掛!比方說用筆電的就可能因為觸控板不好用而多出了一隻滑鼠來,又或者是桌機本身就是觸控式螢幕,所以不需要滑鼠,各式各樣的使用者就會開出各式各樣的外掛,但是請注意,這些開外掛的使用者族群數量絕對不會超過一般使用者,除非你的網站是開發給XBOX本身就是用遙感或Kinect體感之類的那當然另當別論,否則一般的桌機使用者就該配備有鍵盤滑鼠、手機跟平板就會是大拇指或食指,因為操作方法不同,當然所需的設計模式或是界面就會跟著不同,而這些設計上最常見的問題處就是有連結或按鈕的地方。

按鈕到底要多大?說到這個問題就不得不提一下人機互動領域第一條定律:費茲定律(fitts’ law),公式呢就是如同投影片所寫的那樣這樣(默),基本概念呢也如同我投影片寫的那樣這樣(默),我相信很多人跟我一樣看到這樣的數學公式就會開始神遊各地了,所以我舉一個簡單的例子,假設你的滑鼠從A點要移動到B的距離如果增加了1000倍,那所需要的時間會是多長?我們可以看到投影片裡我很貼心地幫你算好了,只需要大概10倍的時間,而不是跟距離一樣的1000倍,說了這麼多這到底跟按鈕大小有什麼關係?

讓我用Firefox的上一頁跟下一頁按鈕做範例,各位可以看到我這裡有放使用前與使用後,你會發現使用前是沒有下一頁的,而且當下一頁按鈕出現後,你可以發現上一頁的按鈕很明顯的比較大,為什麼?因為通常你滑鼠的位置都離右邊的捲軸比較近,所以當你發現你到錯地方的時候,你的滑鼠移動到上一頁按鈕的距離是比較遙遠的,所以上一頁的按鈕設計的比較大是為了增加你按這顆按鈕的效率,當效率提升你自然會覺得好用,那為什麼下一頁的按鈕要藏起來?而且還比上一頁小顆?原因很簡單,原因在於當你要按下一頁的動機是來自於你按完上一頁之後,發現自己回錯地方了,所以你就會回到下一頁,而這時的你滑鼠就會是從上一頁的按鈕移到下一頁,所以你會發現距離變短之下,按鈕設計就會相對比較小一點,所以從這邊我們可以獲得一個簡單的結論就是,當距離較遠按鈕就該設計比較大,而距離較近時,按鈕就會設計比較小,如果說到這裡還是覺得很複雜,沒關係!我在提供另外一個思考方法給大家!

另外一個思考就是就是使用率,大家的印象當中按上一頁的次數是不是會比按下一頁的次數多?因為我們常常搜尋以為那是我們要的結果,進去之後又發現不是,所以我們就按了上一頁回到搜尋頁面,這樣的經驗想必大家每天都在發生,所以上一頁的使用率就會高於下一頁,自然上一頁這個按鈕的比重就會比下一頁高,而這樣的思考方法不光是適用於按鈕或連結,也適用於文字或區塊的排版上,更重要的是這樣的規則是桌機、平板、手機都適用的!

最後我們來到今天最後一個議題,也就是國外的一些設計案例上,這邊我開頭有說我不會琢磨太多,只會提一些比較我覺得比較特殊的地方,那如果說對這部分的分析很有興趣的朋友,可以翻閱一下我之前寫的網站設計評論專欄,在開始講之前我還是要大概提一下一個網站基礎上會有哪些東西,首先他會有一個head版頭跟footer版尾,再來會有主選單以及內容,右側的子選單可有可不有,這樣就構成了一個很基礎的網站,幾乎所有的網站都免不了會有這些部分,即便視覺設計上非常新穎,你還可以在一個網站上找到這些區塊,ok!現在對一個網站有基本的認知之後,我就要開始來講解今天我挑的三個案例,這三個案例的排序呢我是從最複雜的排到最簡單的,因為我怕我剛剛中間講太多後面沒時間,所以我案例的順序就做了一些調整,就讓我從最複雜的開始講起。(後記:我真的現場這樣講,這是真的,不是做效果!)

第一個案例,我們來看看RWD可以做多細,有些人在做RWD會有一些迷失,比方說一定都要是對稱的區塊才可以做RWD,而且區塊跟區塊的比例跟間距都要有一定百分比才可以做RWD,真的是這樣嗎?還我有今天一直強調建模、強調操作模式,國外的設計師在做RWD設計時真的有考慮到操作模式的不同嗎?

在投影片第十九張你會看到第一個網站截圖,由左至右分別是桌機、平板、手機,你可以很明顯地看到這個網站完全不是對稱的區塊,他甚至有錯位的排版,而這個網站他是有稍微用CSS做一些3D視覺效果出來的,當然現在這個畫面非常的小,所以讓我放大一下這些比較特別的區塊。

你會發現這三個版本除了3D角度不同以外,logo處的設計,以及選單高低,還有區塊的深度距離都不太一樣,這樣的視角其實是設計師根據載具的不同所想像出來的視角,桌機的螢幕通常會跟眼睛呈現水平距離,平板則會像書一樣,你會從上往下看,手機的部分也是差不多的,只是畫面比較小當然這些3D細節也會跟著比較小,說到這邊你也許會想這個設計師真的有用心在設計每個平台上的畫面,也許真的是如此,但是我們來看看手機版的選單,如果各位真的嘗試要去點選單的連結,你會不會按錯?雖然說設計師已經把間距拉開,但是由於上下兩行的距離很靠近,而我本人大拇指真的很粗,所以我試按過,我要非常小心才不會按錯,所以設計師真的有根據不同的平台上的操作模式做設計嗎?以我個人的實驗結果是沒有的,還記得一開始我有說過做RWD網站很容易掉了一顆螺絲就整組壞光光的事情嗎?以這個網站來說就會覺得頓時間失去了光彩,它就只差這麼一點點就很完美了,不由得替它覺得可惜起來了,再來我們看看另外一個地方,就是這個網站的主視覺。

你會發現三個版本的主視覺,上面的橘色箭頭位置都不一樣,再來黑色標題高度、寬度也都不一樣造成視覺上的不對稱設計,白色區塊在平板上也有網內縮的情況,在這邊有個問題要問大家,你們覺得橘色箭頭為什麼要這樣設計?他這樣設計好按嗎?為什麼他又要這樣擺呢?這裡我就把這個問題留給各位去思考,想一下,為什麼會是這樣!(後記:我是有答案的,只是我希望各位可以提供一些看法,討論交流一下,肯定會蹦出很多很棒的想法。)

再來是案例二,減法設計模式,這種設計排版模式很常在RWD網站看到,就如果我之前說的化繁為簡通常是會比化簡為繁還要簡單多一些,再來是RWD網站只要做三個版本for桌機、平板、手機就好了嗎?

這個案例網站就做了四個版本,一開始的兩個都是給桌機使用的,因為我們現在的桌機螢幕越來越大了,所以光做給1024已經不夠了,所以在這部分光桌機就有兩個版本,再來是平板跟手機的部分,所以一共是四個,然後你會發現這四個版本主要的差別在於選單上的設計不同,從一開始在左邊,後來變到上方,接著icon消失,到手機版一整個就是縮成一條線,為什麼?主選單難道不重要嗎?主選單當然非常重要!但是當你的載具變成手機時,主選單就不見得重要了喔!因為這個網站主要是分享跟食物有關的文章,所以當你用手機上這個網站的時候,其實你的重點就會再看文章上,而不是這個網站的選單上囉!所以這樣的設計有沒有錯?是沒有錯的噢!而且站在這個網站的立場上非常是非常適合的喔!

好啦!說了這麼多,如果你還是不知道要做RWD要從哪邊開始著手,我這邊提供最後一個例子!他真的非常的簡單!我前面有說到我這次的案例是從複雜說到簡單,所以這個案例真的非常簡單!

是的!最後這個案例他只有兩個版本,也就是說他的桌機跟平板共用一個版本,所以桌機跟平板是不是可以共用一個版本?當然可以!右邊我有列出這個網站兩個版本上比較特殊的一個地方,那就是他的選單文字從橫書變成直的,但是各位不要忘記,用手機瀏覽我會用大拇指去按選單,這樣的設計真的好按嗎?這就見仁見智了,更何況這個網站本身就是一個類似profile的東西,所以他從頭到尾只有一頁,這樣的網站在手機上瀏覽就非常的適合,因為它就是一直滑來滑去滑來滑去,所以選單好不好用就會變成一個其次的問題了。

以上就是今天要講的三個案例,再來這一頁是案例的網址,各位可以不用抄,真的不需要抄,因為這份投影片我今天回家就會放在本人的部落格提供各位下載,所以各位只要記住最後一張!請上本人的部落格-草監網路,就可以取得這份投影片資料了!以上就是今天的分享。

(後記:其實當天現場臨時舉出來的例子還蠻多的,所以即使我在腦袋裡沙盤推演無數次還是有很多東西在現場才蹦出來,個人覺得現場演講比較精彩,至少會比在這邊看我寫的一堆字還要好玩一點,當然我知道寫這麼多字有很多人都沒耐心看,所以之後我會再找時間錄一個Youtube版,屆時當然還會在加上一點點新東西進去,畢竟我沒辦法好好記住稿子裡面的內容,所以我想,到時候再錄影應該還是會蹦出一些新例子吧!以上就是本次的演講內容,希望大家會喜歡,以下開放留言發問:p)

需要相關的RWD設計相關服務?請參考此處

[經驗]RWD常見設計模式 - 換個角度看RWD(上)

RWD常建設計模式 from Nowill Chang

何謂RWD? 所謂的RWD就是指Responsive Web Design,中文翻譯大概就是所謂的響應式設計,意思就是網站會隨著載具的不同而產生不同的畫面,而什麼是不同的載具?就是指桌機、平板、手機等等不同的上網平台,也就是說你只需要做一種設計,就可以符合全部不同的載具,聽起來很神奇對吧?但是這是需要一定的經驗與實作練習才可以做到恰到好處的,所以聽起來很簡單,但做起來是需要一定的技術門檻的。本篇的內容主要是針對投影片以及3月31日在高雄軟體園區所做的分享內容為主,所以如果當天沒有到現場,那你也可以透過這篇文章有一個詳細的認知,阿如果當天已經到過現場,請放心,這篇文章不但可以幫你復習,還會多增加一點點新的元素,更重要的是,這篇文章只是3月31日最末場分享,所以大部份的機密還是要到現場才會了解的!因為這本來就是一場50分鐘的分享,所以可想而知,這篇文章會非常非常長,我個人預期會分成兩篇文章來做詳細的描述!開場就到這邊,讓我們進入正題!

今天我要分享的主題是RWD常見設計模式,下面有個藍色的副標提“讓我們換個角度來看RWD”,那為什麼會有這個副標題呢?那就從我本人的經歷開始說起,我本人的經歷其實有點犯規,怎麼說呢?因為你會看到我在投影片裡面寫到了,我的經歷涵蓋“使用者研究員、網路行銷企劃、網頁設計師、PHP程式設計師、社群營運專案經理”等等,所以你會發現我接觸到的網路範圍非常的廣,不管是實作還是跟客戶接洽亦或是網站的營運,最重要的是,我有一項特殊經歷是很多設計師都不曾遇過的,那就是我當過使用者研究員,這對我的影響最大的部分就是,我在做任何的視覺設計或是UI設計上,我的出發點都是從使用者開始,可以看到我服務過的客戶涵蓋了八大領域,範圍非常廣泛,阿說了這麼多,第二張投影片只有一個用意,那就是告訴大家只要遇到黃色的字,就代表那是重點!所以歡迎大家來跟我合作(笑)。

我今天要講的大綱有三個部分,第一個是從大到小還是小到大?第二個是設計模式,各種載具使用行為都不一樣,以及第三個國外案例解析,我今天重點比較會是在設計模式這麼部分,國外的案例會提到幾個我覺得比較特別的,但是不會提到太多(後記:實情是我知道中間我會講很久,所以後面的案例自然就會不多)。

在開始之前,我有一件事要先跟各位說,在投影片第四頁你會看到三本書,分別是由三個知名網站、雜誌或出版社所出版與RWD有關的書籍,各位可以看到這三本書分別是2011年即2012年出版,所以如果你現在才開始研究RWD,那不好意思,你已經落後國外兩年的時間了,麻煩請儘快趕上!如果你對RWD的實作方式不解,也歡迎參考這三本書(後記:如果你有參加3月31日全天的演講,我相信你已經具備RWD相關實作技巧了,所以書籍翻不翻、看不看,個人是覺得不會有太大的差異)。

第一個議題,從大到小還是從小到大?有沒有人看到這個問題覺得好像在問廢話的?來實際說這個議題前,我們先來瞭解一下網頁設計的流程,一般的設計流程是從客戶接觸、需求分析、網站規劃、視覺設計、程式開發到最後測試上線,我在規劃跟設計的地方標上了黃色,主要的原因是這兩個階段是RWD的重要階段,在需求分析之後確定客戶要做RWD,那勢必在企劃過程中就要做好RWD的網站內容規劃,接下來才能設計出符合RWD的網站,才能交由後端做程式上的應用,有了這樣的流程基礎後呢,我們再回來看我們的議題,到底是要從小到大,還是從大到小?

一般來說是取決於網站內容而定,所以沒有一定的規則,但是以通常的情況下來看,先做複雜的版本,在抽掉不需要的部分,這樣的做法應該是比較簡單的,也就是說化繁為簡在制作上是會比較容易,當然在內容的刪減幅度多寡就會影響設計的過程,所以在做RWD的網站時,很容易掉了一顆螺絲就導致整組壞光光,那網站做出來就很無彩了。

再來第二個議題,設計模式-各種載具的使用行為都不一樣,我們先來看看桌機、平板、手機的差異,桌機可能會有滑鼠跟觸控板,平板是觸控板跟電容筆,手機是觸控板跟電容筆,再來是鍵盤的部分,你會發現不同的平台都有鍵盤跟迷你鍵盤這兩種選擇,為什麼我要提這個呢?我先來大概描述一下使用者研究的過程,首先我們會有一個目的,針對這個目的我們會去做市場調查、分析或是需求訪談等等,接下來我們就會做建模這個動作,所謂的建模是指我們會去想像我們的目標使用者是什麼樣子、個性如何、平常會做哪些事情,有點類似角色扮演的感覺,我們會假想目標使用者的一切,這樣的過程會協助我們在研究的過程中有一個目標族群可以沙盤推演,所以這個階段非常的重要,如果你建錯模,也就是說你的目標族群設定錯誤,那你覺得你做完一系列的研究之後,你的結果會是對的嗎?當然就很容易導出錯誤的結果,所以在建模的這個過程非常的重要,你要有正確的使用族群,在針對使用族群去做需求分析,再透過需求去做研究、訪談,最後修正目的的導向或需求的內容之後,在最測試,測試過後結果如果不對,就會回到修正再測試~修正再測試,所以真正的結果可能是修正過許多次後才得到的正確結果,通常這個過程時間長短不一定,有可能幾個禮拜、幾個月,也有可能長到一年。很多網站在設計的過程中並沒有經過這樣的使用者測試,我們很容易陷入一種迷失之中,以為這樣設計就是對的,但是我們忘記了自己就是設計的人,或者我們就是重度的網路使用者,所以我們在學習上本來就會比不是重度使用者的人還要快上許多倍,所以一般我在作使用者研究的過程中是不會找網路相關人員的,當然如果今天不是一個正式的研究,也許你會找公司內部的人或是朋友,並沒有說這樣的測試是不行的,只是這些人的建議參考值可能要打點折扣,絕對不能全盤相信,否則很容易會有錯誤的結果。(後記:這裡我採用建模這個名詞是比較淺顯易懂,應該是只有3D人員比較會用這個詞,在這邊真正的專有名詞叫做Persona,中文翻譯為人物誌

我們看歐美的網站其實好像大部份都是方塊矩形拼一拼湊一湊,有些台灣的網站反而還比較有設計感,但是為什麼台灣的網站就是沒辦法向歐美網站這麼紅或這麼夯,我覺得很大一部分的原因就在於台灣人做網站很少會去做使用者研究,相較歐美比起來,歐美在網站制作過程中其實會比較專注在使用者這一塊上,像是Facebook、Pinterest亦或是Google甚至台灣的雅虎等等都有這方面的專業人士存在,舉個簡單的例子,有些人開Google或Facebook就發現版面變了,可是別人用的卻不是這樣,這是為什麼?這不是你的界面壞掉了,這是Google或Facebook在做所謂的A/B testing,為什麼要做A/B testing?通常我會做A/B testing常見的問題就是在某個議題下,結果有兩個版本,有可能樣本數不夠或是其他的原因導致沒辦法在兩個版本中選出一個版本來,這時最簡單的解決方式就是把這兩個版本釋放出去,透過A/B testing我們會有一些指標性的數據,可以幫助我們選擇一個最正確的版本,讓網友或使用者透過行為來決定到底要用哪個版本,這就是為什麼你有時候會看到不同的界面的原因,而這樣的步驟與行為,我個人認為就是台灣與國外在設計實務上落差最大的部分。

(待續.....下篇)

需要相關的RWD設計相關服務?請參考此處

用statcounter來看2013年手機網頁設計趨勢

Statcounter Global Stats

上一篇我們說到用statcounter來看2013年桌機網頁設計趨勢,這一篇我們一樣用Statcounter Global Stats來看看行動手機網頁設計的趨勢,要看的數據部分與一篇其實差不多,還是瀏覽器、OS、解析度大小等等的相關數據。

手機瀏覽器

我們一樣先來看國際行動手機瀏覽器的分布,你可以發現在這一年內最大的變化,就是Opera失去了手機瀏覽器使用率最高的寶座,現在使用率最高的前三名是Android、iPhone、Opera,Android內建的是手機版Chrome Lite,而iPhone則是手機版的Safari,但是由於各平台有自己的商城可以安裝App,所以上述的瀏覽器不會是必定使用的,像我自己就是拿iPhone但是卻用Chrome上網,畢竟Chrome可以整合桌機跟Google帳號,所以相對來說就會比其他瀏覽器還要有優勢,如果Apple的iCloud可以早幾年出現,也許這樣的情況就會有變化了。

台灣部分,一整個就是被Android、iPhone瓜分掉了百分99%左右(有點誇張不過超過95%一定有),而且Android跟iPhone的分佈一整個就是很微妙,雖然iPhone使用率下降,但是由於iPhone5的緣故,所以現在呈現微微上升、Android微微下降的趨勢,不過我相信隨著Android再出新機(尤其是Google自家出的Nexus,我好想買台Wifi版本可是一直缺貨!),這樣的趨勢會在對調的。

手機作業系統

從國際的手機作業系統走勢圖,你可以看到Nokia的Symbian從繁榮落入一般的快速衰退情況,而iOS似乎沒有想像中的那樣熱門,倒是Android一飛沖天,我想這也許跟Android可以給廠商客制化一些設定的緣故,越多的廠商生產,自然新機發佈的時間就比較頻繁,與iPhone一年發表1~2隻的情況比起來,真的是有落差。

而台灣部分,早就被Android跟iOS攻佔許久,而他們兩個的關係也真的是非常非常的微妙,為什麼趨勢看起來都這麼的對稱呢?

手機螢幕解析度

解析度這個問題一直都是個困擾,相較桌機比起來手機的解析度根本就是亂成一團,先來看看下圖國外的手機螢幕解析度趨勢,你發現從不知道是什麼解析度與320x480解析度呈現黃金交叉,這時候我就真的覺得要感謝一下Apple,很難得有這麼規律的解析度存在,不過iphone5出了之後我就知道以後會更亂了。

而台灣的手機螢幕解析度,除了320x480之外下一位就是800x1125了,這個解析度是Android手機,至於是哪一隻我就不太清楚了,畢竟我到現在還是在用iPhone 4s,而且還是我的第一支智慧型手機呢!而且根據走勢圖,320x480與800x1125的黃金交叉快要出現了,日後解析度將會越來越大已經是擋不住的趨勢了,為了避免每次解析度改變就要改版,建議採用響應式網頁設計(Responsive Web Design)的方式來製作手機版網站,甚至可以運用響應式網頁設計(Responsive Web Design)把桌機與手機整合成一個網站,可以減少網站開發的成本。

結論

因為圖片蠻多的,所以篇幅看起來有點長,在這邊跟上一篇一樣來個簡短的手機網頁設計的趨勢整理:

  1. 手機使用的瀏覽器大部份是手機版Chrome Lite,畢竟Android原廠內建,加上Android的品牌多、市佔率高,自然會佔據大部份的手機瀏覽器市場
  2. 手機作業系統目前已Android為大宗,其次才是iOS
  3. 手機解析度現在還是以320x480為大宗,但是隨著iPhone的高淘汰率,想必很快就會到了800x1125的時代
  4. 面對手機螢幕解析度不斷改變的情況下,建議採用響應式網頁設計(Responsive Web Design)來設計網站

最後有一個小小提醒,手機界面設計不比桌機網站,因為手機操控的方式不是用滑鼠,而是用手指,所以在按鈕上的設計就要比較大顆一點才會比較好按,另外在手機上頁面很長也不會是個太大的問題,因為手指一滑就是幾千里(好啦!有點誇張,但是總比滑鼠快吧!),不過由於手機畫面還是比電腦螢幕小很多,所以建議用淺顯易懂的圖片代替大量的文字會是比較好的做法。

如果你想了解整體的網頁設計趨勢,請記得連同“用statcounter來看2013年桌機網頁設計趨勢”這篇文章一起服用喔!

用statcounter來看2013年桌機網頁設計趨勢

Statcounter Global Stats

Statcounter Global Stats是一個知名、具權威等級特性的統計數據公布網站,所統計出來的數據是非常有參考價值的,而且提供將數據存成JPG或下載CSV,你甚至可以直接將圖表嵌入網站中。我自己偶而會用這個網站來看一些統計數據上的變化,並且做一些國內與國際數據的比較,透過這樣的比較可以瞭解台灣的網路生態跟國際上的落差有多少,也可以透過這樣的數據去製作更符合台灣網路生態的網站,那平常我會看哪些數據呢?

瀏覽器

下圖是最近一年來的國際瀏覽器使用變化圖,你可以看到在去年2012年5月的時候全球使用Chrome的人數已經高過IE,到現在差距也越拉越開了,Firefox的使用者則是有流失的現象產生(我自己也是流失的人群之一)。

相較於國際的瀏覽器使用情況,台灣還是IE使用者較為多數,但是仔細看看下圖你就會發現,Chrome的使用趨勢與IE的使用趨勢呈現非常微妙的上下對稱(笑)。

看完各大瀏覽器分佈情況,當然就要關心一下各版本的瀏覽器目前情況如如何,下圖是國際各版本瀏覽器分布圖,你可以看見Chrome的版本數多得有點嚇人,但是你可以發現你看不到IE6跟IE7的出現了,這代表這兩款討厭的瀏覽器使用人數已經少的不用出現在圖表上了!

對於IE6跟IE7的消失讓我覺得值得慶祝的這件事,在台灣還沒有發生,微妙的點在於IE6跟IE7的走勢居然重疊了!IE8雖然是台灣的大宗,但是卻呈現大幅下降的走勢,Chorme版本混亂與國際間差不了多少,讓我訝異的是這張圖居然沒出現Firefox,稍微推敲一下就會覺得Chrome的版本數太過混亂應該是個大問題,但Chrome對網頁標準一向都比IE表現來的好太多了,所以至少可以不用擔心會像IE6、IE7、IE8、IE9那樣各版本都要Hack一下。

作業系統

看完一些桌機瀏覽器當然也要關心一下現在的作業系統大概情勢是怎樣,畢竟作業系統內建的瀏覽器通常都會佔有一定的使用率,有很多地方的電腦還有規定不能升級,只能一直維持原來的版本,再來是不同的OS內建字型都不同,所以瀏覽網站也會有不同的字型,有些設計師覺得沒差,但是其實還差蠻多的,像我用慣Mac OS之後,現在回去看Windows都會覺得字糊糊的或筆畫不好看,而且通常我如果用Mac展示網站給客戶看,打槍機率也比較低(笑)。

下圖是國際作業系統分佈,你可以看到Windows7整個就是大宗XP使用率下降,這裡比較要注意的是XP內建預設字體是新細明體,而Windows7則是預設微軟正黑體。

至於台灣,在2012年9月Windows7跟XP才產生了黃金交叉,到現在距離還沒有說非常遙遠。

看完瀏覽器跟作業系統,接下來要關心另外一個重要的議題,那就是解析度。

解析度

下圖是國外解析度分布,你可以看到1366x768已經超過1024x768快滿一年了,所以現在國外的網站有越做越寬的趨勢也是理所當然的。

而國內依然還是死守著1024x768不放,不過根據1024x768下降的趨勢來看,在未來一年內就會與1366x768產生黃金交叉,所以如果你想要前衛一點,你可以開始朝更寬的視野發展你的設計。

結論

因為圖片蠻多的,所以篇幅看起來有點長,在這邊簡短的整理幾個桌機網頁設計的趨勢

  1. IE瀏覽器使用在台灣還是大宗,其中以IE8最流行
  2. 次要瀏覽器在台灣是Chrome,按照國際趨勢Chrome之後會是最流行的瀏覽器
  3. 作業系統以Windows佔大多數,目前以Windows7為大宗,其次是XP
  4. Windows XP預設字體為新細名體,Window7預設字體為微軟正黑體,在畫面呈現上會有不同的感覺
  5. 目前台灣的解析度還是以1024x768為大宗,但1366x768在未來一年內就會追上了

[社群]從Facebook看美國大選

雖然還沒開票完畢,但是因為歐巴馬已過270張選票,通過當選門檻,所以恭喜歐巴馬先生有當選了!獲得了“four more Years”的門票!

好啦!這件事跟Facebook有什麼關係呢?當然關係可大了,在美國擁有Facebook帳號的人數已經超過擁有美國護照的人數,可見那數量之多是非常嚇人的,而這麼多人在Facebook上會不會討論美國大選?那肯定是會的!既然會,那我們要怎麼看到這些人在Facebook上到底有多少人討論呢?讓我們來看看下面這張截圖畫面:

有沒有發現這張截圖跟我上一篇“一秒看懂各地Twitter使用率”非常相近?一樣都有地圖,一樣都有圓圈,最重要的是,這些圓圈代表的含義就是“現在正在Facebook上談到美國大選的發言”,所以這一張現在進行式的地圖!當然光是這樣還不夠,Facebook甚至統計了每個小時的投票數量:

透過上面的趨勢圖你可以看見大概差不多中午吃飯後投票的人比較多一點,再來就是下班或外出的時間,依稀可以看出美國人早上似乎比較專注於自己的事情上(比方說睡覺、趕著上班之類的),但是如果光是只有這張趨勢圖,我們還是不知道到底投票的人是誰,所以Facebook當然也做了一下人數統計分析:

根據上圖的統計,你會看到女人似乎比男人還熱衷,不知道這根昨晚蜜雪兒讓歐巴馬落淚的演講是否有很大的關聯性,但是我相信多少會影響到女性選票的!再來百分之六十的選票都是18-35歲的青壯年人口,接下來才是熟男熟女等穩重的人士,可見美國年輕人對選舉還是蠻關心的!

說了這麼多,這些數據到底從哪裡出來的呢?其實就出自於Facebook Storise這個網站,這個網站是Facebook在分析統計網友怎麼使用Facebook去做哪些事的網站,所以像是美國總大選這種高熱門度的事件,就是非常有參考價值,而透過Facebook Storise所公佈的數據,也可以瞭解一些美國人的生活習慣或對事件的熱衷度,有興趣的話可以試著將你想知道事件送到Facebook Storise網站,也許之後就會出現你想知道的故事了!

[社群]一秒看懂各地Twitter使用率

上次聊到Twitter一天會發生的事有哪些,這次我們來聊聊Twitter在各地的使用率吧!

上圖是台灣使用Twitter發tweet的各地分布圖,你可以很清楚的看出大台北、台中彰化、屏東高雄三個地方分別是台灣使用Twitter的1、2、3名,多少可以看出重點發展都市的社群使用頻率,不過由於Twitter在台灣的流行程度並沒有很高,所以只能拿來參考,不能代表實際社群使用程度,雖然有點可惜,但是我覺得還是有不錯的參考價值。

那既然有台灣,有沒有全世界的?當然有囉!

酷吧!是不是讓你一眼就看出全球使用Twitter的分布呢?而且重圓圈大小來看你就可以看出各地的使用率高低,如果你有看到紅色的點,那就代表現在有人在那邊發tweet,什麼?我說現在嗎?是的!請不要懷疑,這張圖是來自one million tweet map這個網站,他是一張即時顯示發tweet的地圖,就跟Google map一樣,你可以拉近、拉遠,想看多細就看多細!當你看到白色圈圈寫個1的時候(如上圖左下角),你就可以嘗試點擊看看該篇tweet的內容,所以這上面的資訊都是貨真價實的喔!而且透過紅點的出現,你會知道哪個國家現在醒著的人比較多,這其實跟日夜時差有關,但是難免還是會看到目前是深夜或清晨的國家有人在發tweet,酷吧!趕快去把玩一下這張有趣的one million tweet map吧!

[社群]你知道在Twitter一天會發生什麼事嗎?

讓我們來看國外的快速圖解讓你在瞬間看懂Twiiter的一天!如果覺得圖片太小,請點擊圖片,即可另開視窗觀看原圖囉!

看不懂嗎?沒關係,我來整理一下,他們分析了750,000個Twitter上的連結,導出了三個結果:

1. 大家都在分享什麼? 
絕大多數是圖片,再來是文章,其次才是影片、產品等等的東西。

2. 我們最常使用的網站是哪些?
最常分享的影片網站是Youtube,最常分享圖片的網站是Twitter,而最常被分享文章的網站,前五名都是新聞類型網站,上榜的大致看來都跟新聞脫不了不關係。

3. 分享時使用的語言? 
當然第一名是英文,再來是日文,其次是西班牙文。

[展示] 讓Adobe來告訴你CSS3跟HTML5有多酷

一直以來都以發展Flash技術聞名的Adobe,自從被Apple重重的一拳打在臉上後也開始認真的發展CSS3與HTML5技術相關軟體與應用,而在今年的八月初,Adobe推出了Beta網站—the expressive web,這個網站是基於HTML5環境,運用CSS3的搭配,製作出一些新穎的網頁效果,換句話說,the expressive web是Adobe為了展示HTML5與CSS3的效果所製作的展示網站,你可以隨著左下方的箭頭一格一格觀看,相信每點一格都會讓你發現一些驚奇。

為什麼這個網站是Beta?原因很簡單,因為並不是所有的瀏覽器都可以看到完整的畫面,而且也不是所有的瀏覽器都可以支援HTML5新增的全部功能(更何況HTML5還沒有正式訂定完成),只能說普遍上都可以運作而已,至於哪些瀏覽器不能支援?想當然爾,如果你的瀏覽器不是最新版本,那支援機率當然就會比較低,而每個展示畫面下方都會列出哪項新功能在哪些瀏覽器有支援,而這些有支援的瀏覽器又佔整體使用者多少百分比,原則上都在40~50%之間,相信有數據的搭配呈現會讓整體更有說服力。

透過the expressive web網站的建立,Adobe展示小組也公佈了本次過程中所學到的經驗,以下將用我個人的理解加上自己的解說將Adobe小組的經驗做一個簡短的呈現:

最後,在the expressive web上也有資源庫頁面,可以讓你查看the expressive web上使用的HTML5與CSS3有哪些之外,也整理了一些HTML5與CSS3的資源網站供大家查看,相信大家看完這個網站,對於HTML5與CSS3會有更明確的視覺感受!