2008/01/27

什麼是交互設計(Interaction Design)?

文章整理節錄自:http://www.chouyu.com.cn/?p=64

之所以會出現“交互設計”這個詞,很大程度上是alan cooper想區別以往的界面視覺效果設計。簡單不準確的概況一下這個概念:交互設計=界面設計+行爲設計

什麼是網頁上的行爲?
看到一個鏈接->左鍵點了一下->打開一個新頁面。

當然行爲也有更複雜的:
填寫、提交一份注冊資料;
刪除部落格中的垃圾回應;
打開一個影片,調整音量,全螢幕觀看…

關于這些行爲,我們可以分爲三個步驟,並對每個步驟提出相應的準則:

第一步,操作前--操作可識別,結果可預知。
是說按鈕應該象按鈕,鏈接應該象鏈接。《麥當勞兩則》中的第一則提到了“鏈接應該看上去象鏈接”。第二則提到了操作應該給用戶明確的提示。操作可識別是爲了保證用戶觸發操作的有可能性。如果看不出那是個連結,恐怕就沒人去點了。
“結果可預知”是說,未進行一個操作之前,應該讓用戶大致能猜測到操作後會是什麽樣的結果。或者說,操作的設計應該和用戶的期望相同。那些只寫成“返回”“上一步”“下一步”的鏈接,如果可能,最好還是寫清楚些爲好。比如寫成:“下一步 進入購物車”、“返回首頁”…還有些時候,讓結果變的不可預知是因爲觀念上的問題。


第二步,操作時--操作有回饋。
進行了一個操作後,需要頁面上有反應。例如"按鈕"也算的上是一種回饋,點擊一個按鈕時,按鈕會動一下,告知使用者:“您點了一下。”
當然這個回饋還不足夠,還需要執行這個按鈕應該有的功能。


第三步,操作後--操作可撤銷。
執行一個操作後,應當允許撤銷,允許用戶反悔。操作執行前的提示、二次確認並不能完全解決問題。


>>延伸閱讀:
什麼是交互設計?
為什麼要進行交互設計?

不可全文轉貼、可部份引用,請以本文網址連結方式註明出處。

2008/01/15

網路使用者習慣分析與網站設計建議

天氣好冷,MiyaC在看網路上寫哪裡賣的湯圓好吃時,無意間看到這篇文章的標題很吸引我,就點進去看... [論文翻譯]-網上使用者行為分析

結論大致如下:
會瀏覽很多種類(屬性型態)網站的人,相對的也會瀏覽同一個種類很多的網站,看的同一個網站的頁面數量會比較多,每個網頁停留的時間比較短(瀏覽網頁的速度比較快?)。
很愛用搜尋引擎的人,則不會去逛很多種類的網站,即使在同一種類下,也不會太逛很多網站,同樣的,在同一個網站下,也不會逛很多的頁面。

例如
第一種是:
MiyaC常會去看購物、流行、美妝保養、健康、網頁設計、電腦、攝影、流行音樂...等好多類型的網站,然後會瀏覽很多很多個網頁設計相關網站,大部分的網頁瀏覽速度很快,不喜歡看一個網站沒什麼在維護更新。

第二種是:
MiyaC喜歡使用搜尋引擎,找什麼都用google、yahoo、wiki,看完想要找的資訊後,八成就會離開那個網站,比較不會想把那個網站大幅瀏覽。

翻譯的文章中提到一段話,讓MiyaC也感到很有趣的:

多網站都希望能夠在許多知名搜尋引擎下把自己排得很前面,希望能藉此衝高流量,但是大部分從搜尋引擎來的人,卻不會去花時間逛網站的其他頁面,因此高排名是否能給網站一些助益,似乎還有可以商榷的地方

最近半年來,不論是電視、網路廣告,狂打關鍵字廣告的實在看到有點煩,好像不打關鍵字廣告都不行一樣。

沒錯,中小型公司的網站(網頁)適合使用關鍵字行銷,讓自己在最短的時間作最有經濟效益的曝光,同時提昇品牌形象知名度。
但是對於大型公司網站而言,使用者搜尋到某個產品頁面,看完搜尋的資料後,如何在被搜尋到的頁面,增加其他有可能會吸引使用者進一步瀏覽本網站其他資訊,這是更重要的事情。

目前其實也不難看到很多大型網站有這樣的設計,例如Yahoo!奇摩的新聞,一些購物網站的便宜一起加購買,或是各大論壇旁邊有個欄位顯示最被關注的文章、推薦文章等等的;今年改版網站的版面設計上,勢必是要多增加這種功能欄位,如同在超市、便利商店的結帳櫃台旁,永遠會擺放著一些想要引起消費者順便一起買的商品。

如何不突兀的提供其他選擇產品(文章)又吸引使用者,MiyaC想這是最困難的地方。


不可全文轉貼、可部份引用、須註明本文網址與作者,請以連結方式註明出處。

2008/01/07

英文字型下載網站推薦:showfont.net


http://www.showfont.net/ 是一個免費的英文字型下載網站,根據字型名稱的字母分類,可以在網站上看到字型的預覽圖片,喜歡再下載。

不可全文轉貼、可部份引用、須註明本文網址與作者,請以連結方式註明出處。

2008/01/06

推薦:ConeceptArt --蒐集手繪感歐美風的網站

推薦一個蒐集許多好站的酷站:ConeceptArt


給MiyaC的感覺很歐美、很漫畫,有點點血腥恐怖的感覺...不知道啦!自己這麼覺得而已...

不可全文轉貼、可部份引用、須註明本文網址與作者,請以連結方式註明出處。

2008/01/03

以CSS為設計基礎的2007年最佳網站 Best of CSS Design 2007

以CSS為設計基礎的2007年最佳網站 ,MiyaC比較喜歡2006年的風格



Capture the Valley


Beautifully designed single page site.

screenshot

Squawk Design


Impressive design by a graphic arts student, Dominik Lenk.

screenshot

Holiday To Go


Love the red color applied on the tinted background.

screenshot

Team Green


The torn paper and grunge effects are nicely put together. If you like my previous artistic design collection, you will like this site.

screenshot

Radiant Plumbing


How can a plumbing website be so artistic (check out the header artwork)? If the contrast on the text area is higher, it would be a perfect design.

screenshot

Alex Buga


Love the semi-transparent effects applied on the wood texture.

screenshot

Burnett Dairy


Very cooperative, yet friendly.

screenshot

Variable


Another artsy site.

screenshot

Pixelmator


A Mac application site with nice icons and layout structure.

screenshot

Jon Tan


Good use of web typography and grid layout.

screenshot

Scrapblog


A beautiful web-app frontpage.

screenshot

Marius Roosendaal


Single page portfolio site of Marius Roosendaal. Don’t forget to check out both "Day" and "Night" theme.

screenshot

Trale


I particularly like the details spent on the typography of Trale.

screenshot

Sarah Hyland


Very well-done on the header design.

screenshot

Eye Candy


Mmm yummy… both the design and chocolate bars. Another good design site powered by WordPress.

screenshot

RealaSponse


Nice 2-column homepage.

screenshot

Flame Digital


Very unique layout structure and nice background images throughout the site.

screenshot

Tickerville


I like the design a lot, but I’m not sure if this design/style work for a financial related site.

screenshot

Webstock


New Zealand’s web conference website.

screenshot

Cabedge


Simple, clean, and comfortable layout.

screenshot

I Love Typography


A blog by John dedicated to typography.

screenshot

Shylands


Simple, large bold font, great color contrast…

screenshot

Superawesome


Very unique illustration style and color theme.

screenshot

Happy Cog


A classic beautiful site.

screenshot

Free People


One of my favorite ecommerce sites. The amount of details spent on this site is incredible.

screenshot

Wish Tree


The wish/tag cloud in the background is simply creative!

screenshot

Biola Undergrad


Another artsy design.

screenshot

Viget Labs


Nice use of Javascript and CSS (I mean the scrolling effects).

screenshot

Svenigson


Very clean and boxy layout.

screenshot

Stuff and Nonsense


Site of Andy Clarke.

screenshot

J R Velasco


Designed by Miguel Ripoll (one of my favorite designers). He has great sense of web typography. The layout looks very chaotic, yet the content is organized.

screenshot

Explore Cascadia


One word, beautiful.

screenshot

Yellow Stone Park


A very nice design within the box.

screenshot

Elliot Jay Stocks


A design blog by Elliot Jay Stocks. He is a very talented designer with great personality (based on my personal conversations with him).

screenshot

Freelance Switch


Good design and great content (freelance related).

screenshot

Knoxville


Retro style in collage form.

screenshot

Electric Pulp


I’m loving the watercolor effects.

screenshot

Vivabit


I’m not a big fan of liquid design, but this is a good one.

screenshot

Surfgarden


Nice and clean 2-column blog design.

screenshot

Tanya Merone


Another great example of single-page site.

screenshot

Matt Brett


A nice design blog by Matt Brett, he is a designer gamer.

screenshot

Larissa Meek


A beautiful blog design by Larissa Meek, formerly a model, now she is an art director at AgencyNet.

screenshot

Noodle Box


Nice use of color contrast.

screenshot

Kineda


A blog by Terry and Tami Ng (celebrity and entertainment news).

screenshot

Pod3.tv


Another nice design blog.

screenshot

Kev Adamson


Another sketchy design.

screenshot

Eleven3


Another retro/collage approach.

screenshot

Turbo Milk


Nice icon.

screenshot

Veerle’s Blog


Another classic beautiful blog.

screenshot

31three


Blog and design portfolio of Jesse Bennett-Chamberlain.

screenshot