2010年網頁設計最新流行趨勢

隨著新的一年已經到來，雖然網 頁設計的新趨勢並不是說從新年的第一天開始算起，但這種趨勢的轉換確實是隨著時間進行着，從充滿期待的年初到歲末總結的年尾。大多數時候這個趨勢 轉變是微妙的。 眼下最熱門的潮流趨勢一是完美，再者便是重新解譯。潮流趨勢幫助我們這些設計師不斷進化。對於我們掌握設計美學來說，我們需不斷地將設計潮流向前推進，並不 斷的探索下一波設計趨勢。 先澄清一個事實，在看完這些設計趨勢後你會明白是什麼意思。雖然這些趨勢與2009年的設計趨勢相比並沒有太急劇的變化，但是這些設計趨勢會逐步蔓延擴 大，發展結果會越來越好。如果你想在你的設計中融入這些新的趨勢，你可以仔細閱讀每個趨勢前面的
核心創意。一起涉足參與這些設計趨勢，你也可以是塑造趨勢的一份子！

1. 超大Logo/頁眉標題（Oversized Logos/ Headers）

還用形象頁已經太過時了。要讓訪問者印象深刻，2010年的趨勢是來個超大 size的logo擺在同樣超大的頁眉標題上。這種超大的頁眉標題會占滿整個網頁， 但有一點需要注意：瀏覽者不用點擊任何地方，光向下拉動頁面就可以。瀏覽者大多都有點選恐懼症（這是以前長期使用不好用的選單導覽造成的），所以超大頁眉 題頭代替了原 來形象頁面的功能，並不用強迫瀏覽者主動去點選任何按鈕。
核心創意：超大的頁眉標題令人過目不忘！

2.速寫/手繪風格的設計（Sketch/ Hand-drawn Design）

速寫手繪風格並不算是新的花樣，但仍在流行著。很多設計師都很羨幕這種風 格，但是卻怕自己親自畫，因為覺得自己“畫不出來”。如果你看看最流行的手繪風格網站（相對於其它類型的流行趨勢，你會發現手繪風格的比較少），你就會知 道大多數像你一樣的設計師都不會自己畫。做這種風格的網站又不是要開個藝術博物館，但大家還是怕露餡，很熱門獨特的網站和個人互動網站並沒有那麼大區別， 互動才是網路世界的最高目標，所以，如果你敢塗鴉，你就能創作一個手繪風格的網站設計。 速寫手繪風，在2010年會變得更基本，不太會是網頁設計的主要焦點。他將會 以新的好玩的方式成為個人網站設計的標準配備。
核心創意：速寫手繪風格正漸漸成為公司設計的一個基本元素！

3.方塊襯線字體（Slab Typefaces）

方塊襯線字體風格相對新一些，雖然它在200年前就用在傳統媒介上了。要達 到不錯的視覺效果你就想想以前的西部電影里邊的《通緝》告示的樣子。方塊襯線字體字母較粗，一般都是大寫字母又粗又有衝擊力。很多設計師以前都不太用方塊 襯線字體，因為logo和頁眉題頭的尺寸都比較小而且比較低調。然而隨着加大的頁眉標題尺寸，方塊襯線字體更能引起人們的注意。
核心創意：用方塊襯線字體大膽地喊出你是誰！

4.字體設計（Typography）

設計字體是最難的設計風格之一，這也是為什麼設計字體仍然會是2010年的潮流趨勢。鑒於可用性的主流要求，網頁設計師 都害怕應用新字體或是不一樣的字體。混搭多種字體字級的想法簡直是完全不可想象。字體意味着放大、扭轉、擠壓用以適合你的設計概念。如果安排合理，一個用 各種設計字體組合起來作為主要設計元素的網站，要比動不動就加載一大堆圖片的網站好玩多了！（iLoovee 說：中文字體的網頁設計首 先要基於電腦系統安裝的基本字體來進行設計，比如：黑體、明體、楷體、隸書、幼圓，但這些字體真的不好看，尤其是小於12px的 時候，基本能看的就剩明體了。並且如果設定中文系統字體，其所附帶的英文部分又超級難看，所以，如果網站有相當內容的英文，倒是可以嘗試變化變化英文部分 的字體來試驗效果。系統字體的改善就拜託微軟了。）
核心創意：字體設計比較新，但是會逐步成為網頁設計的一部分！

5. 一頁搞定（One Page Layouts）

一頁搞定就是要挑戰你把那些沒必要的內容給搞定。在2010年，這種風格會擺脫花俏的選單列而變得更加短小精悍。把它當成名片試試看。這樣的網站對 於瞭解你和你的作品比其它網站更像是一個一站式購物店，而你的BLOG和社交信息則放在別的地方。
核心創意：一頁搞定，更適合個人簡介和少部分商業客戶！

6. 大畫面（Huge Images）

把這個風格和超大logo/頁眉標題進一步比較，大畫面風格呈現的目的是強 烈的視覺衝擊讓人過目不忘。但和上面提到的超大頁眉標題風格不一樣的是巨圖表現的不是網站的品牌。實際上這些巨大的圖片吸引瀏覽者進入你的網站，如果不是 因為內容那就是因為巨大的圖片尺寸。2010年，設計師們會發現他們越來越習慣 於在他們的設計中使用這種大畫面，用來傳達網站的基調。
核心創意：大畫面的作用就是吸引訪問者！

7. 改變透視——實景效果（Change of Perspective）

我們之前討論過，桌面透視已經完了。2010年，我們將會看到非常明顯的改變——透視上更接近實景效果。同時也會朝着斜角度透視效果發展。
核心創意：2010年會出現各種透視的效果！

8. 互動直覺的設計（Interactive/ Intuitive Design）

Flash 已經漸入佳境。有時，你會因為沒能打開一個煩人的Flash界面而不能訪問一個網站。現在Flash 已經變得更簡單、專業。即使一些設計師更喜歡用jQuery來設計表單和彈出頁面，Flash 仍然在設計上擁有一席之地，特別是一些微妙的效果。Flash還是沒有在互動性上名實相符。2010年，網頁設計師會繼續尋找 Flash的替代元素。因為 現在瀏覽者都更精明了，所以設計師就要設計出更加直覺性的網站。
核心創意：互動設計將東山再起！

9. 對話框（Modal Boxes）

對話框Modal boxes風格將在2010年無處不在。對話框Modal boxes就像是老式彈出式對話框的升級版——變得光滑、漂亮、流行。對話框Modal boxes非常簡單而且用起來也很方便，任何關注應用性的設計師都會設計出完美的風格。
核心創意：對話框Modal boxes在2010年的設計中會繼續彈出！

10.極簡主義（Minimalism）

忘了舊式學校的小網站吧。2010年的極簡主義風格的網站設計還會留出很多空白，但是卻轉變成了粗大的字體和驚艷的色彩搭配。不是所有的極簡主義網 站都只喜歡黑白簡約。即使極簡主義風格都很安靜，但是偶爾也會秀出亮麗的顏色。極簡主義並不冷峻，它也可以是溫暖的。
核心創意：極簡主義試探字體風格！

11. 超大頁尾（Oversized Footer）

超大頁尾可能已經到處都是了，但是2010年你會發現這些超大頁尾還在變大。往後的頁尾將不再只是註解那麼簡單，他已經變成設計的有機組成部分。頁 尾上面包含了動態訊息，比如各種社交網站上的最新回饋訊息feed s，daily polls，Flickr feeds。
核心創意：超大頁尾加入了更多個人信息而少了重要信息！

12.復古風（Retro）

復古設計一直都很流行，即使很多設計網站都很讚賞復 古設計，完全使用復古風格而沒有放棄是很難的。這其中的關鍵是——從復古的基調中獲得靈感然後從基本感覺入手。2010年，設計師將嘗試新方法來實現陳釀 葡萄酒藝術一樣的風格，復古設計風格將會進一步擴大。
核心創意：復古再生

13.自我介紹框（Intro Boxes）

“嗨， 我是……” 2010年設計師認識到對瀏覽者做一個自我介紹既簡潔又漂亮，這種趨勢會擴大。如果你掙扎在寫一個“關於我”的頁面，自我介紹框則會是你更好的選擇。這個 小框強迫你濃縮你的自我介紹。2010年，自我介紹框會進一步擴大應用範圍。相對於一個討厭的招呼，設計師會設計出一個可選顯示條pick-up lines來代替。同時代替側邊欄上的介紹塊，2010年，我們會發現很多不尋常的放置方法，搞不好就來放在網站的頁面中間。
核心創意：用新方式打招呼！

14. 雜誌版型風格（Magazine Layouts）

越來越多的人從傳統的印刷紙本轉移到網路線上娛樂，設計師需要解決如何幫助 這部分人更容易地轉換閱讀方式。這個趨勢就是向雜誌一樣排版——這樣的頁面可 以讓內容很好地組織在網站主頁上，並讓訪問者以一種有趣的方式來瀏覽內容。相似的版型會吸引以前習慣看雜誌和報紙的訪問者，甚至更好用——不用翻 頁！2010年，雜誌版型風格會特別流行。
核心創意：雜誌版型風格會被用於訊息娛樂類網站！


About the Author
Jacqueline is an artist and a writer who spends an inordinate amount of time playing Super Nintendo and watching Star Trek.

原文出處 http://webdesignledger.com/tips/web-design-trends-for-2010
本文同步發表於iWare網頁設計公司網站

35 Excellent Poster Design Tutorials with Typography Art

Create a Mac Dock Style Menu with AS3

http://active.tutsplus.com/tutorials/actionscript/create-a-mac-dock-style-menu-with-as3/

Best of the Vector Web

http://vector.tutsplus.com/articles/web-roundups/best-of-the-vector-web-february-2010/

Dream Templates

好用的網頁範本。

選擇 DisplayObject 子類別

使用顯示物件時，您有一些選擇，其中一項重要決定就是：使用哪個物件做何種用途。這裡有一些原則可以幫助您做決定。不
管您是需要類別的實體，或是為您要建立的類別選擇基底類別，這些建議同樣也適用：
• 若不需要做為其它顯示物件之容器的物件 ( 也就是，您只需要做為獨立螢幕元素的物件)，請視其用途，選擇下列DisplayObject 或 InteractiveObject 子類別的其中一個：
• 用來顯示點陣圖影像的 Bitmap。
• 用來加入文字的 TextField。
• 用來顯示視訊的 Video。

Stage
Parent Node
Child1 Node Child2 Node
Capture
Phase
Bubbling
Phase
Target Phase

• 用來在螢幕上繪製內容之「畫布」的 Shape。尤其是，若要在螢幕上建立所繪製形狀的實體，而且它不會做為其它顯示
物件的容器，那麼使用 Shape 而不使用 Sprite 或 MovieClip 將能讓您取得相當大的效能效益。
• 以 Flash 編寫工具建立之項目所需的 MorphShape、StaticText 或 SimpleButton ( 您不能以程式設計方式建立這些類
別的實體，但是可以用這些資料類型建立變數，參考使用 Flash 編寫工具所建立的項目)。
• 若需要變數以參考主要的 Stage，請使用 Stage 類別做為其資料類型。
• 若您需要容器來載入外部 SWF 檔或影像檔，請使用 Loader 實體。已載入的內容將加入顯示清單中，做為 Loader 實體的
子系，其資料類型將視所載入內容的性質而定，如下所示：
• 載入的影像將會是 Bitmap 實體。
• 在 ActionScript 3.0 中撰寫之被載入端 SWF 檔將會是 Sprite 或 MovieClip 實體 ( 或這些類別的子類別實體，由內容
建立者指定)。
• 在 ActionScript 1.0 或 ActionScript 2.0 中撰寫之被載入端 SWF 檔將會是 AVM1Movie 實體。
• 若需要物件做為其它顯示物件的容器 ( 不論您是否也需要使用 ActionScript 繪製到顯示物件上)，請選擇
DisplayObjectContainer 子類別的其中一個：
• 若物件將只使用 ActionScript 建立，或是做為將僅用 ActionScript 建立及操作之自訂顯示物件的基底類別，請選擇
Sprite。
• 若要建立變數以參考用 Flash 編寫工具建立的影片片段元件，請選擇 MovieClip。
• 若要建立將與 Flash 元件庫中的影片片段元件相關聯的類別，請選擇下列其中一個 DisplayObjectContainer 子類別做為
該類別的基底類別：
• 若相關聯的影片片段元件具有一個以上的影格，請選擇 MovieClip
• 若相關聯的影片片段元件只在第一個影格中含有內容，請選擇 Sprite

您必須知道的社會生活中十大著名法則

您必須知道的社會生活中十大著名法則

一、 馬太效應
二、 手錶定理
三、 不值得定律
四、 彼得原理
五、 零和遊戲原理
六、 華盛頓合作規律
七、 酒與污水定律
八、 水桶定律
九、 蘑菇管理
十、 奧卡姆剃刀定律

Hell of Tutorial in Photoshop

http://abduzeedo.com/hell-tutorial-photoshop

Dramatic Text on Fire Effect in Photoshop

http://psd.tutsplus.com/tutorials/text-effects-tutorials/dramatic-text-on-fire-effect-in-photoshop/

3D Text On Fire

http://www.denisdesigns.com/blog/2009/03/3d-text-on-fire/

How to Create a Stunning Fire Effect In Photoshop

http://www.tutorialwiz.com/fire-flower

Create a Stylized First Aid Icon in Illustrator

http://vector.tutsplus.com/tutorials/icon-design/create-a-stylized-first-aid-icon-in-illustrator/

跨瀏覽器 CSS3 代碼生成器

CSS3 Please.com－ 一個網上 跨瀏覽器 CSS3 代碼生成器。以後寫 CSS3，只需修改一處地方，網站自動幫你更新其他瀏覽器的代碼。支持的效果有圓角 border-radius、陰影 box-shadow、漸變、移動 transform等，而且還會最大限度地支援各個瀏覽器：Internet Explorer, Safari, Chrome, Firefox, Opera。

How to use Google Analytics for Tracking in Flash

使用 SWFObject 來做 Flash 的漸進增強

原文連結

最近 Google AJAX Libraries API 加上了好用的 SWFObject 這支 js (詳見這裡)，興 起了我寫個簡易教學的念頭。

SWFObject 是用無侵入的腳本方式(unobtrusive JavaScript)將 Flash Player 安插到原本的 HTML 內容裡面，通常看到相關的文章都是講到 SWFObject 比起直接在 HTML 內安插

view plaincopy to clipboardprint?

1. <div id="flashContent">  
2.   <img src="thanksalot.jpg" alt="Thanks a lot!" />  
3.   <p>Thank you very much!p>  
4. div>  

  
  Thank you very much!

這是一段表示感謝的內容，以標準 HTML 標記呈現，沒有 CSS、沒有 JavaScript，相信任何的訪客都可以正常瀏覽或讀取到，即使是搜尋引擎的機器人也可以精確地收錄網頁內容。

透過 SWFObject 可以進一步地把 id="flashContent" 的內容轉換為 Flash，這就是 Flash 的漸進增強，讓可以執行 JavaScript 並且有安裝 Flash Player 的訪客可以看到更多彩多姿的 Flash 內容。使用方式如下：

view plaincopy to clipboardprint?

1. <div id="flashContent">  
2.   <img src="thanksalot.jpg" alt="Thanks a lot!" />  
3.   <p>Thank you very much!p>  
4. div>  
5. <script type="text/javascript" src="swfobject.js">script>  
6. <script type="text/javascript">  
7. swfobject.embedSWF("http://h.vctu.com/1000000.swf", "flashContent", "300", "200", "7.0.0");  
8. script>  

  
  Thank you very much!

首先在第 5 行的地方引用了 swfobject.js，接著在第 7 行的地方使用 swfobject.embedSWF()，帶入的第 1 個參數是 Flash 檔案的位置，第 2 個參數是要把 Flash 放到哪個 containter 內，接著是寬、高，以及要偵測的 Flash 版本，若 Client 端有這個版本已上的 Flash Player，才會用 Flash 取代原本的 HTML 內容。

試想，若網站的訪客或搜尋引擎的機器人無法執行 JavaScript 或無法瀏覽網站的 Flash 內容，則仍可看到 HTML 內原本預設的內容，這樣的設計是不是比較完善一點呢? 多替那些未知的訪客們著想，他們就會多感謝你一點～～

XML與HTML的差別

●	XML的元素名稱有分大小寫。HTML的標籤不分大小寫。
●	XML的元素永遠都需要起始標籤和結尾標籤。另方面，HTML的元素在某些情況下，可 以不寫結尾標籤。
●	XML空元素需要在右箭號前面加一個斜線(如 )。然而，HTML只用一個單獨的起始標籤即可，沒有終結的斜線。
●	XML元素視空白為內容的一部分，除非特別明講，否則會予以保留。但在HTML中，大 部分的元素都會拋棄多餘的空白，當 瀏覽器在排定內容的格式時，會予以斷行。

Raphaël—JavaScript Library

http://raphaeljs.com/

Flash – AS3載入圖片Sample

stop();
//var url:Array=new Array(”1.jpg”,”2.jpg”,”3.jpg”)
var i:Number =0;
loadmovie();
//————-按钮事件——————–
btn.addEventListener(MouseEvent.CLICK,loadnext);
function loadnext(event:MouseEvent) {
i++;
loadmovie();
}
//—————读取图片—————-
function loadmovie() {
var container:Sprite = new Sprite();//建立容器
addChild(container);//把容器加入舞台
var pictLdr:Loader = new Loader();//建立loader对象
var pictURL:String = url[i];//载入文件名称
var pictURLReq:URLRequest = new URLRequest(pictURL);//建立载入接收对象
pictLdr.load(pictURLReq);//载入
pictLdr.contentLoaderInfo.addEventListener(Event.COMPLETE, imgLoaded);//载入完成后响应
pictLdr.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, imgLoading);
pictLdr.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, imgerror);
function imgLoaded(event:Event):void {
   //loading_txt.visible=false;
   container.addChild(pictLdr.content);//把载入的对象加入容器
   container.x=50;//载入后控制
   container.y=50;
   container.width=200;
   container.height=150;
}
function imgLoading(event:ProgressEvent):void {
   loading_txt.text = “图片已加载”+Math.round ((event.bytesLoaded/event.bytesLoaded)*100)+”%”;
}
function imgerror(event:IOErrorEvent):void {
   trace(”图片不存在”);
}
}


   
     
        pic/001.jpg
        spic/001.jpg
     
  
        pic/002.jpg
        spic/003.jpg
     
   
读取XML的代码:
stop();
var pictotal:Number;
var url:Array=new Array;
var surl:Array=new Array;
var myXML:XML = new XML();
var XML_URL:String = “list.xml”;
var myXMLURL:URLRequest = new URLRequest(XML_URL);
var myLoader:URLLoader = new URLLoader(myXMLURL);
myLoader.addEventListener(Event.COMPLETE, xmlLoaded);
myLoader.addEventListener(ProgressEvent.PROGRESS, xmlLoading);
myLoader.addEventListener(IOErrorEvent.IO_ERROR, xmlError);
function xmlLoaded(event:Event) {
var myXML:XML = XML(myLoader.data);
pictotal=myXML.img.length();
for (i=0; i
   url[i]=myXML.img[i].url;
   surl[i]=myXML.img[i].surl;
}
play();
}
function xmlLoading(event:ProgressEvent) {
loading_txt.text = “XML已加载”+Math.round ((event.bytesLoaded/event.bytesLoaded)*100)+”%”;
}
function xmlError(event:IOErrorEvent) {
trace(”XML加载失败”);
}

成功是種迷思？

成功迷思1：正向思考的力量，能推動你成功？？

這個迷思是說，為了成功，首先要相信自己

一定能成功。只是，當你向成功人士請益時，

你會發現他們在抱持成功信念的同時，

也存在著負面思考。而心中的這股暗流，

會驅使他們展望、留意可能會遇到的問題障礙

幫助他們為各種妨礙前進狀況做好準備！

結果反而促使他們不會撞上太多預料之外的阻礙。

美國萊斯大學（Rice University）企管研究所教授周京（Zing Zhou）

研究發現，職場上的負面態度，很可能是改善和進步的有效催化劑。

她建議，經理人在將負面思考視為務必要剷除的厭惡特質時，宜三思

而後行，因為「對維持現狀、對事情當下情況的不滿足，會促使人們

發展出想法，找到創意的解決之道。」

換言之，負面思考者的表現反而會優於樂觀主義者，因為他們會預期

問題、趨勢、動盪，事先做好計畫以超越這些波動。他們的前進動力

不是自我保證（反覆告訴自己「我做得到、我做得到、我一定能做到」）

而是需要一點自我保險（「我能做到，因為A、B和C狀況不會再妨礙我」）。


成功迷思2：要超越競爭對手，就要給得更多、更好、更先進、更強化？？

這句話的核心概念是，最好的產品一定會贏。不過經驗說的卻是另一

回事：只要符合需要，人們很可能會選擇普通的產品，而非好的那個。

麥當勞賣出全世界最多的漢堡，但他們的漢堡是全世界最棒的嗎？

答案是很普通。不過，麥當勞漢堡銷售第一的地位，數十年來不曾

被動搖。普通漢堡之所以會贏，是因為麥當勞滿足了兩大需求：快速、

食物。麥當勞很方便、熟悉、到處都有，所以打敗更好的漢堡業者，贏得生意。

事實上，第二或第三好的產品成為暢銷第一名的情形還滿常見的，

因為人們多半會選擇讓自己最安心的產品，很少會去尋找或選擇

最好的那一個。同樣的現象也發生在觀念或想法上。最優秀的想法

可能無法成形，因為難以理解，而普通的想法常常會出頭，因為簡單

明瞭，人人都能接受。


成功迷思3：天分是成功的基石嗎？

這個說法隱含的意思是，最聰明的人註定會登峰造極。

然而，聰明並不是成功的同義詞。許多人會很驚訝地發現，

成功最大的決定因素是「清楚度」、而非智力。

人都只會和夠清楚的人打交道，他們會為清楚的想法背書。如果有人能

清楚地溝通，而多數聽眾都能理解，那麼他便能發揮很大的影響力，

即使他所傳達的意見未必最有價值。

觀察成功的領導人會發現，通常他們都不是特別聰明，而他們也都敏銳

地察覺到這一點，所以會用心傾聽，蒐集許多資料，獲得寶貴的資訊。

所以，如果你覺得你的老闆很蠢，請記住，他已經聰明到足以當你的老闆。

重點是：別讓你的聰明阻礙你說出道理。如果沒人聽懂你在說什麼，

那麼你的聰明才智，一點都不重要。如果沒人能領會你足智多謀的點子，

那這點子完全無用。即使你不認為自己聰明，也可以比你那超級聰明的

對手更有影響力。

記住，要盡量使自己的論點更清楚易懂，你可能就比天才更聰明了！

How to Use a Document Class in Flash

 

 How to Use a Document Class in Flash

把UI跟CODE分離，在大多數程式開發者是一件很習慣的事情了，可是對於設計人員而言，就不是那麼容易理解的事情，這篇文章有解釋跟說明如何在外部使用.as檔來控制flash內部的UI。

flash CS3 AS3.0 載入外部SWF檔-控制檔案播放，暫停，停止

a.swf
var loader:Loader = new Loader();
var url:URLRequest = new URLRequest("1.swf");
loader.load(url);
loader.contentLoaderInfo.addEventListener(Event.COMPLETE,init);
function init(e:Event):void{
var tmp:MovieClip=loader.content as MovieClip;
tmp.gotoAndStop(2);
}
this.addChild(loader);
===========================
b.swf => 二格影格
===========================
只要在確定load完成後!! 在a.swf裡 使用 loader.content 去控制b.swf的動作
想像成 load進來後就是一個a.swf裡的一個影片片段來控制就ok了