Ming Apps

Archive for 六月 2011

Link: http://swiffy.googlelabs.com/

HTML5看來早已非常成熟!

繼之前大家看到的html5 3d drawing, html5毛筆字

這次為大家介紹的是: swf to html5 converter!

只要你有一個獨立的swf file,

將它上載於上面的網頁,

flash/swf 便成了html5!

大家可以即管試試這個convert後的作品:

http://swiffy.googlelabs.com/gallery/example3.html

左手邊的是swf version,

右手邊的正是html5 version!

筆者試完後發現完全沒有相異是處,

實在是太厲害了。

看來Google對html5的發展有相當大的支持呢~

是為了將來的Web apps整合和發展鋪路嗎?

廣告

Link: http://www.3dtin.com/

HTML5的威力可以去到那裏?

以上介紹的網址可以看到html5處理3D Drawing的威力!

大家到這個網址之後,

選擇左手邊的「藍色移動工具」,

隨意移動,

跟著選回第一個「畫筆工具」,

畫上你喜歡的圖案吧!

筆者畫了個Ming字,

隨後點回「藍色移動工具」,

真的係立體!

Download Link: http://moztw.org/

大家可以到上面的網址下載最新的Firefox 5 了!

小注意:

經過一個非正式測試,

看來Firefox5對html5的支援倒退了?

到Apple Mac: http://www.apple.com/hk/mac/的時候,

上面的選擇竟然沒有了,

筆者有些失望。

介面上沒有甚麼改變,

仍是Firefox 4的介面,

沒有大多吸引力。

跟據網頁(http://moztw.org/firefox/releases/)列出的資料,

筆者選了幾個較為重要的Firefox 5更新:

  • CSS animation Support!
  • 改善 canvas、JavaScript、記憶體與網路效能
  • 改善對 HTML5、XHR、MathML、SMIL 與 canvas 標準的支援
  • 改善 Linux 桌面環境整合
  • WebGL 內容將不再能讀取跨網域的材質
  • 背景分頁的 setTimeout 和 setInterval 會減速為 1000 ms 以增進效能。

看得出Firefox 5其實對html5有重大更新,

特別是canvas, css, js速度上有改善,

是與chrome的理念一樣,

追求更快的上網速度嗎?

標籤: ,

當大家到一些討論區等需要申請新用戶的時候,

往往需要你填寫Email電郵地址,

但害怕會收到更多的垃圾郵件?

如果有一個用完即棄的電郵地址,你會試用嗎?

Link: http://10minutemail.com/

只要大家到上面的網頁,

便能夠「享用」你新的Email了!

大家進入這網址便會清楚見到一個電郵地址,

隨時可以Copy and paste到需要填寫Email的地方了!

10 minute mail從名字看來,

只有十分鐘的時間,

不過這網站提借延長時間,

延長後便多了十分鐘的時間接收email了!

如果過了十分鐘後沒有任何動作,

這個電郵便告吹,

你卻一個Junk mail都收不了!

筆者今天神奇地七點便醒來,

一早起來就是學習的好時機~

今天為大家帶來了和User Interface有關的Web design:

Defensive web design, 或稱Contingency Design.

What is Defensive Web design?

意指對錯誤所針著的網頁設計(Design for when things go wrong)。

Why do we need Defensive Web design?

墨菲定律: “If anything can go wrong, it will."

每個人在用你的網頁設計的時候,

便會出現錯誤!

如果能好好處理好這些錯誤,

你便能:

  • 提升易用性(improve usability)
  • 提升轉換率(Improved Conversion Rates)
  • 增加收入(Increased Revenues)
  • 增加品牌忠誠度(Increased Brand Loyalty)

(Reference: http://37signals.com/whitepaper/37s_contingency_wp_feb02.pdf)

Examples

Inline and Contextual Helps

不少的網頁設計都涉及大量文字資訊,

某些設計未必能在同一頁面展示出所有的資訊。

一些網頁會利用tooltips或是文字版FAQ/Keyword Defination,

用以提示用戶某些字眼的意思。

tooltips example

例如新聞網頁除了有新聞的標題外,

可以在滑鼠移到標題上出理相關圖片和一些新聞資料。

tooltips example-37signals.com

又或者針對keywords以tooltips形式列出其意思。

Google的說明中心,

正好就是Contextual Help的好例子:

http://www.google.com/support/

Slow Connections

朋友曾告訴筆者,

香港的寬頻網絡很廣又快,

根本不用理會網頁設計對速度的影響。

筆者卻不這樣認為~

正正因為這麼多人上你的網站,

所以在處理異常大的流量的時候,

網頁設計和流量正息息相關!

有趣的是,

由於智能手機的技術成熟,

更多人利用流動網絡上網,

不少智能手機使用者會取消載入圖片或影片,

這些時候便會對整個個網頁設計有所影響。

CNN.com的網頁在不載入圖片之下,

仍能保持整個網頁的外觀,

很厲害!

On-site Search

如果你的網頁只是寥寥無幾,

搜索功能對網頁應該幫助不大;

但如果你的網頁成千上萬,

Search就是必須的功能!

openrice simple search and advanced search

以openrice為例,

大家都可以看到除了個simple search在頂,

還會另外設計一個advanced search的功能,

讓用戶更能針對自己想吃的,

找到合適的餐廳。

Form Validation And Error Handling

登人或申請新用戶的時候,

最常預料到的問題就是,

輸入錯誤!

yahoo mail error handling

以Yahoo mail為例,

申請為新用戶的時候,

必須填寫的資料可以利用背景顏色和醒目文字提示,

非常清楚列出使用者那些地方需要重新填寫。

Page not found!

404Error,

相信很多人都見過的網頁問題,

有可能是網址錯誤而成!

給大家看看別人如何處理404的設計:

40個404設計:
http://www.smashingmagazine.com/2007/08/17/404-error-pages-reloaded/

60個404設計:
http://www.hongkiat.com/blog/60-really-cool-and-creative-error-404-pages/

Google亦提醒404 handling的時候,

可以提供一些符合瀏覽者預期的網頁連結,

方便使用者繼續在你的網頁瀏覽~

小總結

一些看來很小付出的Defensive Web design,

可以為你的網頁帶來無比效益!

大家應該以一個開放的態度,

不要盲目假設每個使用者都能知道自己「錯在那裏」!

大家亦要留意網頁能否對應每個瀏覽器,

想copy其他網頁資料時不要簡單的Copy and paste,

可能會改變你的網頁設計!

Happy Design!

Stanford University 很早以前就發佈大學課堂的內容。

今次為大家找來一個頗長的lecture,

內容講述世上四十個設計師對將來/現在的電子產品有重要影響。

(lecture by Bill Moggridge for the Stanford University Human Computer Interaction Seminar (CS 547).)

演講者Bill Moggridge為世界上第一個設計手提電腦的人!

Link:

1. http://ui-patterns.com/
2. http://subtlepatterns.com/

筆者最近還在看不同的網頁Patterns Designs,

發現了兩個很有用的網頁,

在些分享給大家~

第一個是UI patterns.com,

這個網頁收藏了近千個patterns,

包括E-commerce layout, Product/pricing page, shopping cart,

實在是一個不能不看的網站!

這網站還包含了投票的功能,

一看便知那一個設計受歡迎了吧~

第二個是subtile patterns,

其實是一個背景圖片收集網,

很多淺色深色的背景圖,

相信大家可以簡單的使用photoshop/paint.net,

便能夠改變顏色,

方便嵌入你的網頁裏吧~


%d 位部落客按了讚: