MUKI space* » 網站設計 http://blog.mukispace.com 網站教學 // 電影評論 // 單眼樂摸 // 心情日誌 Fri, 03 Feb 2012 14:04:27 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 分享 | 43點設計網站時應避免的錯誤 http://blog.mukispace.com/43-web-design-mistakes-you-should-avoid/ http://blog.mukispace.com/43-web-design-mistakes-you-should-avoid/#comments Fri, 21 Nov 2008 10:35:40 +0000 muki http://blog.mukispace.com/?p=629 久違的翻譯文又來了:P

這次是翻譯DailyBlogTips這個網站的文章。

此篇剛好也是他的熱門文章，我覺得寫的也不錯，所以這邊跟大家分享^^

原文出處：

@43 Web Design Mistakes You Should Avoid / dailyblogtips

1.你必須要讓讀者在第一時間瞭解你的blog在幹麻：在Internet裡頭，要吸引別人注意力是個重要的課題，如果讀者沒辦法在第一時間知道你的部落格主題，他可能就會按上一頁離開了。所以你的blog要讓讀者願意花時間閱讀、拜訪，另外讀取速度也不能太慢。

繼續閱讀 »

]]> 久違的翻譯文又來了:P
這次是翻譯DailyBlogTips這個網站的文章。
此篇剛好也是他的熱門文章，我覺得寫的也不錯，所以這邊跟大家分享^^

原文出處：
@43 Web Design Mistakes You Should Avoid / dailyblogtips

1.你必須要讓讀者在第一時間瞭解你的blog在幹麻：在Internet裡頭，要吸引別人注意力是個重要的課題，如果讀者沒辦法在第一時間知道你的部落格主題，他可能就會按上一頁離開了。所以你的blog要讓讀者願意花時間閱讀、拜訪，另外讀取速度也不能太慢。

2.讓文章容易閱讀：請注意這是網路上的blog，他不是市面上的書籍，所以忘了那些冗長的文字段落吧。讀者可能是邊工作邊看你的blog(也可能在做其他的事情)，所以讀者希望可以快速的掃過你的文章內容。所以一篇文章要有好的標題、次標題、項目清單...等可以讓讀者容易看到他想要的文章

3.不要用一些不容易閱讀的花俏字型：你的blog是否會因為使用某些字型，而讓網誌看起來有複雜絢麗的效果???但是換個角度想，他們容易閱讀嗎?如果你blog的重點是希望傳達某些訊息給讀者，並且讓讀者閱讀你的文章，就必須讓介面看起來舒服易閱讀。

4.不要使用過小的迷你字體：這個前提之下，是你真的希望你的blog讓讀者看起來容易閱讀。我的火狐瀏覽器是有讓文字放大的效果沒錯，但如果我真的使用了這個功能，那你的blog可能也是我最後一次的拜訪。

5.不要設定開新視窗：用這個簡單的邏輯思考: 如果我所有的外部連結都用開新視窗的方式，那讀者就不會離開我的網站了，這個觀念是錯的!!!請讓讀者自己控制他是否要開新視窗。這也是所有瀏覽器都會設置「上一頁」按鈕的原因。不用擔心你會將讀者送到其他網站，如果他喜歡你的網站，他就有回來的一天。

6.不要改變讀者視窗的大小：讀者可能已經替瀏覽器設定好大小了，如果你改變了大小，他的習慣可能會被你弄的一團糟，也會失去他對你的信賴。

7.除非需要且必要，否則不要強制讀者註冊：單純的去思考，當我們在瀏覽網站找資訊的時候，是否也不希望被強制註冊會員並且填寫任何資料呢(除非註冊有好康的東西)

8.請勿未經過他人同意發送訂閱給他：讀者註冊你的網站之後，不要自動發送訂閱給他。沒有經過同意就隨便發送，不是交朋友的好辦法。

9.Flash不要使用過度：flash會增加你網路的載入時間，也會干擾其他讀者。如果你blog的靜態頁面沒辦法表現出網誌的特點，這才是使用它的最好時機。

10.不要自動播放音樂：早期的網路年代，網站製作者都希望將音樂融入自己的網頁，但結果如何？他們失敗了。別放音樂，請終止他!

11.如果你必須要放影音，請預設關閉，讓讀者選擇要不要播放：有的時候可能有必要狀況，你要放這些東西，例如你的一段演講or導覽，這些是ok的。不過請加上play的按鈕，讓使用者自行點選。

12.不要因為部落格掛件而干擾你的主頁面：首先，網路上的部落格元件會讓這個網站看起來非常的不專業，如果你要放的是統計資料或是一些得獎的元件，請放在「關於我們」這個分頁

13.不要用個只有「enter」的首頁，直接進入你真正的網站：讀者總是希望可以花最短、最少的時間進入你真正的首頁。

14.確定blog有包含聯絡我的細節：沒有什麼比少了聯絡我還糟糕的事情了，不只對讀者不好，對你自己也不好，你可能會少了很多讀者的回饋

15.確定你的網站能使用「上一頁」按鈕：這是個非常基本的功能，不要因為任何原因導致他不能使用，當然，你開新視窗就不能使用它，另外舉個例子，有的javascript也會擋住這功能

16.不要使用閃爍的文字：除非你的讀者來自1996年，就這樣

17.避免複雜的網址結構：一個簡單，以關鍵字為基礎的網址不僅可以幫你做好SEO，以及pagerank，他也提供讀者還未看你文章時可參考的依據

18.使用css取代html的table語法：以前大家習慣用table作頁面的規劃，現在的趨勢則是改css，沒有任何的理由可以反對這點。css除了可以更快讀取，也可以做出更多的特色。

19.確定讀者可以搜尋到你整個網站(blog)：為什麼搜尋引擎改變了網路生態?這邊有個理由(你也可以猜猜看)，因為他讓網路上的使用者可以更快找到文章。不要小看了搜尋。

20.避免使用下拉式選單：所有的導覽選單，都應該以直線條呈現給使用者觀看。使用下拉式選單可能會讓讀者疑惑，或者還要花一點時間尋找這些隱藏的資訊。

21.選單儘量使用文字：用文字不僅快速也不會失效，舉例來說，有的使用者使用圖片如果連結失效就....

22.如果你有連接PDF檔案，請顯示他們：以往的PDF連結，讀者點下去之後會凍結你的瀏覽器(?)，同時Acrobat Reader 會顯示是否打開來歷不明的檔案?對讀者來說很煩，所以要妥善的指向PDF連結，讓讀者方便掌握。

23.不要讓讀者干擾了你製作網站的版本：避免讓使用者給你不必要的困擾。連接速度如何？我要選擇56k還是128k的讀者為主？用flash還是html呈現？別逗了，只要給我內容!!!!!

24.不要把廣告跟你的文章內容參雜在一起：短期內這種混合式的廣告(例如.google adsense)可能會增加你的收益，但長期來看，可能會失去許多讀者。讀者被干擾一次，就有一個讀者跟你說掰掰

25.使用簡單的導覽結構：有時候少就是多。這個規則也適用在人們的選擇。確定你的blog有簡單明瞭的導覽列

26.避免「向內發展」：在讀者還沒看到想要的東西時，不要強迫他看其他文章，只要你提供的文章是獨一無二的，他就會繼續看下去。

27.不要使用FrongPage：這是一個非常基礎的html編輯器，使用FrontPage雖然可以讓編輯變的很簡單，但是輸出的程式碼非常糟糕，在不同的瀏覽器觀看都會發現bug

28.確定你的blog兼容於每種瀏覽器：不是每種瀏覽器都長的一樣，他們所解析出來的css也不盡相同。不論你喜不喜歡，最多人使用的瀏覽器你一定要兼容，否則你會長期失去這些讀者

29.確定包含錨文本連結：儘量不要在連結的地方寫「連結這裡」，這非常的沒效率。確保你的連結也包含了確定的文字(錨文本)，讓讀者很清楚的知道他會連到哪。同時這對你的SEO也有幫助

30.不要把連結藏起來：當你有了29點的錨文本連結後，使用者可以知道他要連的地方，同時有的使用者也會看他瀏覽器的狀態列，以得知將要連向的網址為何。如果你把它隱藏起來，可能會讓讀者不信任你。

31.讓讀者可以清楚看到連結：讀者必須要的辨識哪些是連結，哪些不是。確保你的連結跟普通的文字顏色不同，如果可以的話也多使用底線標記

32.不要對文字作底線及顏色的標記：不要對文字作底線，也不要使用顏色。因為這樣可能會讓讀者判斷錯誤，誤以為是連結。

33.已經拜訪過的連結設定其他顏色：這點非常的重要。這個設定可以幫助讀者知道，哪些網站他已經拜訪過。

34.不要使用動畫圖檔：除非你的廣告有動畫圖檔，否則請避免使用，動畫圖會讓網站變的不專業，而且會讓讀者從文章轉移焦點。

35.在圖片的設置多使用alt以及title的屬性：同樣是對SEO有幫助，可以讓你的圖片容易被搜尋

36.不要用刺眼的顏色搭配：如果讀者看完你的網站連續10分鍾感到頭痛，你可能要考慮重新配色。可以對目標設計一個調色板(例如傳遞一個情緒，讓使用者專注在文章..等)

37.不要用跳出視窗：這邊是指任何會跳出視窗的東西。即使是讀者要求的，也是一個壞主意

38.避免java script的連結：請遠離這些java script，因為它可能會對讀者造成不良影響。

39.在blog的頁尾放上網站的訊息：如果讀者在你的blog找不到一些特別的資訊，他們通常會看頁尾。所以頁尾的部份至少要包括一個連結到首頁，最好再加上「聯絡我們」

40.避免過長的頁面：如果讀者總是要用滑鼠滾輪觀看你的文章，他可能會快速掃瞄而非仔細閱讀，儘量把你的網站頁面縮短一些，重點是導覽結構的完整性

41.不要出現水平捲軸：垂直的捲軸可以被容忍，但是相同的容忍度卻不適用於水平捲軸。現在最多人使用的解析度是1024*768，確保你的網站在這個大小裡頭。

42.不要有拼字和文法的錯誤：這不是網站設計的問題，但是他卻是影響你網站質量的重要因素之一。確認你在送出文章的時候沒有這些問題。
(muki註：對國人而言，就是不要有錯字以及注音文)

43.如果你有使用圖片驗證機制，請確保這張圖片可以讓讀者很清楚的閱讀：有一些部落格會使用圖片驗證來阻擋垃圾留言。這邊只有一個小問題，就是留言的人可能需要叫所有兄弟姐妹一起來解密你這張圖片。

-

終於...翻譯完了(汗
有幾篇我是用自己的話下去撰寫，因為有的我大概瞭解作者的意思。
另外，作者也有幾點理論我不能苟同啦...

像是第五點：不要開新視窗。
我個人的習慣都會確保連到其他網站都使用開新視窗。
因為我覺得這是對連結網站的一個尊重:)

他提出的這43點大家可以參考就好，你無法做到的就不要硬逼著自己去改變。
但是最重要的「不要自動播放音樂」，大家真的都要做到啊
我覺得國人最不好的習慣就是這點。真的吵死了><.......

還有國人的部落格有的也很花俏，看得受不了，側邊欄長的跟什麼一樣，通常都是華而不實的資訊。
(咦，好像在說我自己 :P )

總之好的閱讀環境需要大家一起養成
從今天起加油吧!!!!!


]]> http://blog.mukispace.com/43-web-design-mistakes-you-should-avoid/feed/ 11 2008年十大重新設計的熱門網站(譯) 3/4 http://blog.mukispace.com/2008%e5%b9%b4%e5%8d%81%e5%a4%a7%e9%87%8d%e6%96%b0%e8%a8%ad%e8%a8%88%e7%9a%84%e7%86%b1%e9%96%80%e7%b6%b2%e7%ab%99%e8%ad%af-34/ http://blog.mukispace.com/2008%e5%b9%b4%e5%8d%81%e5%a4%a7%e9%87%8d%e6%96%b0%e8%a8%ad%e8%a8%88%e7%9a%84%e7%86%b1%e9%96%80%e7%b6%b2%e7%ab%99%e8%ad%af-34/#comments Thu, 25 Sep 2008 02:51:54 +0000 muki http://blog.mukispace.com/?p=351 7.MobileMe(之前的 .Mac)

在六月初MobileMe有一篇公告，隨後在發佈在七月中旬。Mac開始取代一些少量的網路應用更新程式。最大的改變就是他們的郵件服務加入了線上月曆，檔案以及聯絡管理等都會直接存取到一個單一的介面。

但是，儘管新介面非常的漂亮，在剛推出的前兩個月，他的核心功能服務還是有一些嚴重的問題，比如像某些使用者無法使用web mail的服務

繼續閱讀 »

]]> 7.MobileMe(之前的 .Mac)

MobileMe的web mail的介面非常現代化。.Mac平台也被取代，可以同步你多樣的服務(前提是這個系統必須運作)


在六月初MobileMe有一篇公告，隨後在發佈在七月中旬。Mac開始取代一些少量的網路應用更新程式。最大的改變就是他們的郵件服務加入了線上月曆，檔案以及聯絡管理等都會直接存取到一個單一的介面。
但是，儘管新介面非常的漂亮，在剛推出的前兩個月，他的核心功能服務還是有一些嚴重的問題，比如像某些使用者無法使用web mail的服務

8.LinkedIn

LinkedIn他的重新改版並不算是最顯眼的一個，但是他在服務性的存取方面卻做的不錯


Linkedin在2月重新改版後，又測試註冊系統長達兩個月之久，主要的目的是為了讓開發團隊可以整合系統的設計，而該網站在左半部的工具欄以及分頁，還有他的空間配置，倒是有些像還未改版前的Facebook。

9.Delicious

Delicious的改版很明顯的和之前不同，很多的東西都有角化，而且標籤的管理很明顯的改良許多。


Yahoo的Delicious在7月底推出的新的面貌，使用者已經在2007年底開始作beta測試(可以看這裡)，最大的改變不只是很難記得的de.licio.us網站名稱的改變，還有讓整個網站看起來更加的適應以及可延展性。網站對於他的搜尋引擎也做了很大的翻修，讓我們可以更容易的翻出以前的文章、標籤還有使用者。

10.Last.fm

Last.fm的新面貌讓你開始獲取更多音樂家的建議，而不需要同步和共享當前的音樂庫。


音樂社交網站Last.fm在七月中旬有一個全面性的大改版新的改版不再用使用者的音樂庫還有評分作為網站的分析，而是用歌手、樂團的名字作基礎，上下排序。不過就像MobileMe一樣，他的新服務也碰到一些安全性的失誤

【未完待續...】

延伸閱讀
‧2008年十大重新設計的熱門網站(譯) 1/4
‧2008年十大重新設計的熱門網站(譯) 2/4

,
]]> http://blog.mukispace.com/2008%e5%b9%b4%e5%8d%81%e5%a4%a7%e9%87%8d%e6%96%b0%e8%a8%ad%e8%a8%88%e7%9a%84%e7%86%b1%e9%96%80%e7%b6%b2%e7%ab%99%e8%ad%af-34/feed/ 0 2008年十大重新設計的熱門網站(譯) 2/4 http://blog.mukispace.com/2008%e5%b9%b4%e5%8d%81%e5%a4%a7%e9%87%8d%e6%96%b0%e8%a8%ad%e8%a8%88%e7%9a%84%e7%86%b1%e9%96%80%e7%b6%b2%e7%ab%99%e8%ad%af-24/ http://blog.mukispace.com/2008%e5%b9%b4%e5%8d%81%e5%a4%a7%e9%87%8d%e6%96%b0%e8%a8%ad%e8%a8%88%e7%9a%84%e7%86%b1%e9%96%80%e7%b6%b2%e7%ab%99%e8%ad%af-24/#comments Mon, 22 Sep 2008 15:04:15 +0000 muki http://blog.mukispace.com/?p=331 4.Yahoo.com

其他網站都推出改版了，唯讀yahoo這個顯眼的新版，目前還未正式的推出。這個網路巨頭將允許使用者自定義欄位以及內容，就像yahoo目前推出的「My yahoo service」這個服務(外觀也將進行調整)。而唯一最大的不同點，就是這個自定義欄位可以聯繫整個網絡，並且不斷的更新新聞、照片等內容。

這個新版的截圖會在禮拜三公佈在yahoo.com，而yahoo也開始請特定的使用者來測試這個新版的運作情況，尋找新版的bug，也會在未來幾個月慢慢作修正。

繼續閱讀 »

]]> 4.Yahoo.com

新的yhoo將幾個雜亂的區塊給刪除了，而且在我的yahoo這個服務中，包含了yahoo widget的元件內容


其他網站都推出改版了，唯讀yahoo這個顯眼的新版，目前還未正式的推出。這個網路巨頭將允許使用者自定義欄位以及內容，就像yahoo目前推出的「My yahoo service」這個服務(外觀也將進行調整)。而唯一最大的不同點，就是這個自定義欄位可以聯繫整個網絡，並且不斷的更新新聞、照片等內容。
這個新版的截圖會在禮拜三公佈在yahoo.com，而yahoo也開始請特定的使用者來測試這個新版的運作情況，尋找新版的bug，也會在未來幾個月慢慢作修正。

5.MySpace

My Space的新版比舊版在視覺上來說清爽許多，並且開始把焦點放在會員發表的內容


Myspace在六月中旬重新改版，這次的焦點著重在服務的功能以及會員發表的內容上，不同以往存在的sea of links(不清楚這個怎麼翻譯orz)情形。
更重要的是，改版後增加了一些功能，像是對於搜尋的增強，移除了在個人編輯器裡頭需要的高難度驗證碼，還有大幅提升媒體撥放的品質。

6.Digg / Digg mobile

Digg.com以及Digg mobile這次的改版，將介面重新調整，但是仍然保持了他主要的核心設計


Digg在今年最大的改變，包含了一個最被推薦的搜尋引擎，他完全重新定製了digg的工具，針對使用者的搜尋有的新的解讀。一方面他可以讓你想在digg搜尋有興趣的文章時，更有效的搜尋到。但另一方面，他們也犧牲了標籤雲(可以簡單的將相同性質的文章聚集在一起)的顯示手法。
同樣的，Digg mobile也重新改版了，之前該網站只支援iPhones，但是現在使用者可以使用任何種類的手機，針對文章進行觀看以及投票的動作。

【未完待續...】

延伸閱讀
‧2008年十大重新設計的熱門網站(譯) 1/4
‧2008年十大重新設計的熱門網站(譯) 3/4

,
]]> http://blog.mukispace.com/2008%e5%b9%b4%e5%8d%81%e5%a4%a7%e9%87%8d%e6%96%b0%e8%a8%ad%e8%a8%88%e7%9a%84%e7%86%b1%e9%96%80%e7%b6%b2%e7%ab%99%e8%ad%af-24/feed/ 2 2008年十大重新設計的熱門網站(譯) 1/4 http://blog.mukispace.com/2008%e5%b9%b4%e5%8d%81%e5%a4%a7%e9%87%8d%e6%96%b0%e8%a8%ad%e8%a8%88%e7%9a%84%e7%86%b1%e9%96%80%e7%b6%b2%e7%ab%99%e8%ad%af-14/ http://blog.mukispace.com/2008%e5%b9%b4%e5%8d%81%e5%a4%a7%e9%87%8d%e6%96%b0%e8%a8%ad%e8%a8%88%e7%9a%84%e7%86%b1%e9%96%80%e7%b6%b2%e7%ab%99%e8%ad%af-14/#comments Sun, 21 Sep 2008 03:32:19 +0000 muki http://blog.mukispace.com/?p=325 看到CNET的webware寫到的這篇文章：10 hot Web redesigns of 2008

所以就來深讀一下，順便讓自己瞭解現在web的趨勢，剛好這學期有兩門課都跟網絡息息相關:)

如果有翻譯不好的地方，也麻煩大家一起提出來喔!!

繼續閱讀 »

]]> 看到CNET的webware寫到的這篇文章：10 hot Web redesigns of 2008
所以就來深讀一下，順便讓自己瞭解現在web的趨勢，剛好這學期有兩門課都跟網絡息息相關:)
如果有翻譯不好的地方，也麻煩大家一起提出來喔!!

就像我們在去年所寫的文章，也許現在這個時間將2008年重新設計的網站歸類，就時間點來說是太早了一些。但是在星期四提到的twitter重新改版以及Friendfeed改版，我想這是一個不錯的機會來回顧哪些網站在2008年重新改版，或者是有修正哪些問題。

我選擇了十個我比較喜歡的網站，這個排列的順序沒什麼規則。
然後每個網站的圖片底下，我會寫幾段文字表示我對此網站的滿意，以及需要修改的地方。

1.Twitter

twitter的新介面沒有跟舊的差很多，除了少許的地方有使用圓角，還有右邊的部分多少使用分頁的形式。


Twitter的重新改版有兩個重點式的修正：一個是介面單一化，另外一個是大幅減少網站所需要的資源。舉例來說，現在當使用者從四面八方丟了不同的函式進來，twitter不會將整張網頁重新整理。表示可以讓使用者感受到更快的體驗速度，以及更少的資源佔用。
但是事實上，重新改版之後更有趣的地方是我們不會去注意到的。右半部這塊像分頁形式的介面，當我們點選任何一個選單的時候，視覺看起來就像是一個整體的場景，也許這可以說是twitter真正的新東西吧。也是讓使用者離不開這個服務的設計基石。

2.Facebook

Facebook的新畫面，看起來像是將選單融入使用者的閒談區。更重要的是它讓Facebook變得簡單的融入其中，也增加的文章的內容。


Facebook是今年在介面上有最大改變的網站之一，就像twitter一樣，Facebook也使用了分頁，並將分頁放在中間的區塊。有點像是windows的「開始」按鈕，什麼功能都有。他的改版也包含了整個視覺的寬度增加，讓使用者不用再一直用滑鼠滾輪往上拉、往下拉，就一個畫面定住，幾乎可以看所有的東西。
想瞭解更多，可以看看這篇文章

3.FriendFeed

FriendFeed的改版就是將導覽列全部放到左邊，而且不再有不正當的主題


FriendFeed最大的改變再於將原本放在上面的導覽列移到左邊，而且允許呈現更寬更大的圖文展示。更重要的是，他的特點就是讓網頁看起來不會那麼的擠，就像Twitter一樣。改版之後，比較有趣的一個點是FreindFeed的開發團隊，可以讓使用者發表非純文字的網址，最晚一個月之內就會將新的FriendFeed推出來給大家觀看。

【未完待續...】

延伸閱讀
‧2008年十大重新設計的熱門網站(譯) 1/4
‧2008年十大重新設計的熱門網站(譯) 3/4

,
]]> http://blog.mukispace.com/2008%e5%b9%b4%e5%8d%81%e5%a4%a7%e9%87%8d%e6%96%b0%e8%a8%ad%e8%a8%88%e7%9a%84%e7%86%b1%e9%96%80%e7%b6%b2%e7%ab%99%e8%ad%af-14/feed/ 0