玉山 － 圖文版Flash

參考了蛙大(Frog)的遊記FrogFree，做了一個Flash Gallery Template，並且把這回爬玉山的照片遊記給放了上去，有興趣的進來看看囉！:p
點此進入：FxJade 3952
相對應的Blog圖文版為：玉山(上)，玉山(下)。

John Maeda and "The Laws of Simplicity"

《簡單的法則》(The Laws of Simplicity)，天下文化出版，強力推薦！作者是John Maeda(前田約翰)，日裔美國人，是知名的圖像設計師、視覺藝術家、MIT Media Lab.的教授(director of the aesthetics+computation group)，更是創造Flash技術的先驅之一，對數位藝術設計有興趣的人一定聽過這號人物。John Maeda專門於藝術與科技的結合，他每件作品都結合美學、創意、生活、技術與人性，令人眼睛一亮、撼動人心。可以到他的作品網頁看看：maedastudio。此外，他出版過多本藝術設計相關的書籍，如Design by Numbers(1999)、Media@Media(2000)、Creative Code: Aesthetics+Computation(2004)。John Maeda在數位藝術的創新發展上頗具貢獻，得過無數大小獎，其中包含美國設計界最高榮譽史密森尼(Smithsonian)機構國家設計獎、日本朝日設計獎，許多作品被現代美術館(MoMA)、舊金山現代美術館等知名美術館收藏。

比較令我感興趣的是他走向藝術領域的歷程。John Maeda畢業於MIT EECS、之後壓抑不住內心的日益膨脹的藝術知覺，將重心轉向藝術領域。向來認為藝術不能當飯吃的他的父親，在這時對他說：「你現在學得夠多了，去做你想做的事吧。」John Maeda前往日本筑波大學藝術與設計學院攻讀設計學位。他首先將自己去電腦化(uncomputerize)，致力傳統的設計手法，後來他的指導教授建議他可以加入一些年輕的元素，於是他的科技專長就此派上用場，藉由電腦開創出屬於它的數位藝術。為了提升自己的管理能力，他在2001年重做學生攻讀MBA，兩年取得學位。

至於為何John Maeda會寫關於Simplicity這本書呢？據說是有一天，他發現simplicity與complexity這兩個字都有"MIT"這三個字母，從此他提倡「簡單」以平衡「複雜」，並成立了MIT SIMPLICITY Consortium，為的是重新定義人與科技的關係，強調簡單並不必然就是廉價或功能少，而是要追求典雅與便利。

看完後，我覺得John Maeda運用許多例子讓人感受到其視覺感知與心理層面的意涵，透過例子為背景，給讀者體會簡單的力量的機會。而簡單與複雜卻只一線之隔，看似簡單的東西，背後蘊含的精神，其實是相當深遠的呢！以下節錄自The Laws of Simplicity一書，幾條令人感到溫暖的設計法則。

1. 減少(REDUCE): 達到簡單的最簡單方法，就是用心割捨。
「捨」得恰如其分，將能「得」到更多。
盡可能減少，隱藏多餘的一切，同時增加價值感。
講究材質、作工，正是簡單哲學。

2. 組織(ORGANIZE): 組織能使複雜的系統顯得比較簡單。
將事物有條有理的呈現，能使「多」顯得「少」。要對付的東西、觀念和功能（及相應的按鈕）若能減少，這種生活將簡單許多。

3. 時間(TIME): 節省時間讓人感到簡單。
一旦被迫等待，生命會顯出不必要的複雜。一個產品（或服務）若能讓人節省時間，一定受歡迎。就算無法縮減時間，也要設法讓消費者減少等待的苦楚。告知使用者一種程序還需要等待多久才完成，是一種「人道措施」。倒數秒數的行人穿越號誌就是一例。

4. 學習(LEARN): 知識使一切變得更簡單。
好的設計必須運用讓人本能上熟悉的感覺，「嘿，我看過這種東西！」好讓人願意嘗試這新的東西。利用相關─轉化─驚喜的技巧，將使用者熟悉的經驗融入產品設計中，讓人自然而然了解產品，甚至產生驚喜的感受。

5. 差異(DIFFERENCES): 簡單和複雜相輔相成。
沒有複雜，簡單就失去價值。如果沒有複雜做對比，我們即使看到簡單的事物，也不能領會它的美妙。最重要的，是掌握「簡單」和「複雜」之間的變化韻律，才能抓住人們的注意力。

6. 背景(CONTEXT): 簡單的周邊事物絕非無關緊要。
我曾經做事非常專注，我的老師尼葛洛龐帝建議我，應該當個照亮一切的燈泡，而不要當雷射光束。太專注會使你只看前面最重要的目標，卻犧牲掉背景的一切。留白也是一種重要的實體。為了增加空白所失去的機會，會因為留下來的東西更受注意而得到補償。

7. 感情(EMOTION): 感情愈多愈好。
在感情重於一切時，不要害怕增加更多裝飾或更多重意義。

8. 信任(TRUST): 我們相信簡單。
大多數人欣然放棄保護一些生活小隱私，以換取更多空閒時間。
但是，為了換取簡單生活，冒險信任機械裝置，是否值得？

9. 失敗(FAILURE): 有些事物不可能簡單。
一個人追求「簡單」的失敗實驗，可能讓另一個人成功創造出美麗的「複雜」。

10. 單一(THE ONE): 簡單是減少明顯的，增加有意義的。
簡單是一種微妙得莫可奈何的特質。

另有三個要點
1.遠離(Away)—只要挪得遠遠的，多就會顯得少。
2.開放(Open)—開放簡化複雜。
3.能源(Power)—少用，會得到更多。

下面這段影片是John Maeda在TED(Technology, Entertainment, Design)的精采演講，看看他如何把生活、設計、思考看得簡單。


書的官網延伸閱讀: http://www.lawsofsimplicity.com/
John Maeda設計的iGoogle: Simplicity is Complex
中文版投影片: 簡單的法則

Logo Design

http://www.logoorange.com/
關於設計，或許這些可以觸發一些靈感

11 trends that will define logo design in 2007

Everyone wants to set the curve when it comes to style. No one wants to design out of a book of trends, but nevertheless, they emerge. Take a peek at the following 11 logo design trends that we think will define the look of 2007.

	1. Talk Boxes This is an outgrowth of last year's trend, even though these boxes have been around a few years now. We don't quite know who's doing the talking, but whoever it is, their bubble is popping up all over. This logo symbolizes communication, whether it be from the company or between its customers. LifeLogger, for instance, uses a speech bubble with a smile in it to illustrate how users can communicate through them to friends. They continue the use of three-dimensional speech bubbles in creating avatars for their users, as illustrated to the right. In this way, the idea of communication represents the person themselves, showing the importance of contact.
	2. Clouds Everyone remembers a time when they laid on their back in the grass, staring at the clouds daydreaming or finding images in their puffs. Clouds are a powerful logo, conjuring imagery of dreams, creativity and playfulness. Sometimes clouds are combined with thought bubbles to invoke feelings of dreaminess. The clouds can be a 3D bubble or take on a flat feeling. Many of these cloud logos represent new ideas, hence the thought bubble. Many "clouds" came from new businesses on the internet, certainly a place for dreamers. Some, also include imagery of the sun, which evokes a feeling of a new dawn.
	3. Reflections Mirror, mirror, on the wall, what's the hottest trend of all? It might just be reflections. With Apple leading the way, looking like all their graphics were set on a shiny table, others are sure to follow. Dubbed by some as ?the new drop shadow,? reflections are taking over, especially on the web. The reflections might be skewed, such as in the logo for blinklist, indicating the location of some light source, invisible to the onlooker, but effective in creating even more of a sense of a whole different world the logo is in.
	4. Rectangle In a graphic world where you can do nearly anything, some companies are keeping it simple with shaded rectangles. Their logo, in a contrasting white, pops out from the background. Shadow boxes have historically been a sign of amateurish design, but this new generation of effective logos has shown that good design will always be in style. With the popularity of rounded corners, these logos stand out with (oh no!) sharp edges and right angles. In some occasions, such as with the blurb logo, the rectangle can represent an image. Blurb used their blue shadow behind their name to symbolize a book, as they are in the book publishing business.
	5. 3d Puffies With these new puffed-up logos, you don't know whether to click on them or bounce on them. Now that the industry has overcome the production issues of gradients, designers seem to prefer air-popped graphics to the flat drawings of yore. Even desktop icons these days seem to have a rounded feel, like you might pop one with one good hard double-click. It's a 2D world out there in Internet land, and these 3D images really make Web pages and logos jump out of the page, to where you feel you could run your hands over the computer screen and feel their bumps and curves.
	6. Hot Dogs These cute little Tic Tacs of color are popping up all over the design world. Like many abstract symbols, the hot dogs can be used to mean many different things. Sometimes they denote movement or sound, such as in the logo for Snap. These lines, reminiscent of those drawn out of shocked cartoon people by children everywhere, can denote an idea, a feeling or a literal meaning. But no matter how they're used in design, they are a powerful symbol of an upbeat emotion.
	7. Transmission Beam With satellite tv and radio and wireless everything all the rage in the new millennium, a transmission beams are a quick way to show that they are on the cutting edge of technology. Many companies who use this logo trend deal in internet information. Part of what many of these companies are doing on the internet is taking user (or customer) information and sharing it with the world. The transmission beam, starting with a single dot (to represent the user), shows their ideas spreading out. It's the perfect symbol for publishing companies or blog sites.
	8. People AOL's little man has some company, with others creating buddies to include in their logos. For companies that bring people together, these genderless little people are shown in pairs or groups. They provide a visual indicator of coming together. Others show just one of these symbols, usually as an avatar for their customer. Anyone looking for other people can be sure they've found them when they see a logo with a buddy.
	9. Transparency Transparency is still hot. Again, many may gasp as the mere though of using a shadow, but this updated version is nothing like the shadow boxes that have plagued generic design. These logos invoke images of blending together. Some, like the two transmission bubbles that seem to be popping out the little people in the BlueDot logo, can symbolize communication, or a sort of overlapping and blending of ideas. Others are a Venn diagram, showing where the company fits, such as Zopa.
	10. Outlines (I think this is another way to add sophistication, 3d effect to a logo) Many are finding that nothing brings a logo to the next level like a professionally done outline. These surrounding lines or shades can simply run around the text or seem to encapsulate it in a bubble, as seen in the gpokr.com logo. These outlines can take text and make it seem as though it's one unit. Nicely done, these effects add sophistication and a third dimension to logos.
	11. Punctuation From smiley faces to complex illustrations, every day punctuation has gained a new life in the tech typing world of the internet. While some used to only be used to denote the f-word, they're now used in the young on-line world on instant messaging, e-mailing and teen-speak in general. Now, these symbols have jumped out of instant messaging and onto billboards as of late, with their meanings left to the imagination of customers.

李家同教授演講

慌忙之中趕出了來到台大的處女作（有哪一次不是趕出來的 XD），重點是有興趣的人撥空來聽聽吧！

主講：李家同教授
題目：How to Write Good Scientific Papers and How to Read Different Journal Papers
日期：2007 年10 月 15 日
時間：14:30 - 15:50
地點：台大資訊系 R103 演講廳

寫給大家的平面設計書

之前在政大書城看到一本關於設計的書「寫給大家的平面設計書」（The Non-Designer's Design Book），看書名就可以知道它是寫給非設計專業的人看的，主要講述一些設計的基本原則，以及如何利用這些原則設計出兼具美感與專業的藝術內容。作者 Robin Williams 透過許多圖例來說明設計概念，將設計由繁化簡，淺顯易懂，很適合像我這種門外漢看。我從網路書店擷取了第一章中，以下幾項最根本的設計原則：

四個基本原則

每一份設計出眾的作品中，都會包含這四大原則，以下我先簡單地介紹說明。雖然我把原則分開來一一介紹，但請記住：每個原則是互相關聯的，單單只應用一個原則的機會並不多。

對比（Contrast）
「對比」的概念是：避免版面上的項目過於相似。如果字體、顏色、大小、線條粗細、形狀、間距等項目完全不同，這個作品看起來就會非常突出。對比常是版面上最重要的視覺特色，可以在第一時間吸引讀者的目光。

重複（Repetition）
在整件作品中，設計重複出現的視覺元素。你可以重複運用顏色、形狀、質感、空間配置、線條粗細、字型、大小、圖像概念等項目。重複有助於架構安排，也能加強一致性。

對齊（Alignment）
版面上的項目不能隨意安排。在同一版面上，每個項目應該與其他項目有某些視覺上的關聯性，這樣一來，整個版面看起來會更整潔、更精緻、更鮮明。

相近（Proximity）
版面上相關聯的項目，要群聚分組。如此一來，這些項目就會成為一個視覺單位，而非數個分散的單元，這有助於歸納資料，減少雜亂，讓讀者清楚了解整個架構。

Color Harmonization

日常生活中，我們對於環境的感知時常是透過顏色來傳達的，雖然顏色可能會因為心境變化、不同文化而給人不同的感覺，但不同顏色彼此交織形成的和諧感通常對人們來說是一致的。所謂的和諧顏色（harmonic colors）指的是，在特定顏色的組合下，使人類視覺感官產生美感上愉悅的狀態。

在 ACM SIGGRAPH 2006 上，有一篇以 computer science 的角度來分析顏色和諧性的論文：Color Harmonization。它將顏色以色環（color wheel）表示，並在 color wheel 上歸納定義了八種類型的和諧（harmonic template），如下圖所示，其中灰色區域即為形成和諧的關連顏色，在和諧顏色彼此間的角度不變下，旋轉色環可得的各種和諧顏色的組合：

同時，作者定義了一個能夠將影像在 HSV color space 上，考慮 hue 維度以及 color histogram 上的距離關係，mapping 至 harmonic templates 的方法，並應用至視覺設計的配色上，可將原本的影像作和諧化處理、指定部分區域和諧化、harmonize by example，像網頁配色、衣服配色、室內設計配色等，都能有不錯的效果。它舉了幾個結果：

看過這篇論文後，我也在網路上搜尋看是不是已經有其他相關的應用，找到了以下幾個根據和諧性來配色的網站：

Adobe Kuler：Adobe 做的，提供各種不同風格的和諧配色，同時提供使用者自行根據不同 harmonic template 來進行配合，並推薦一些受歡迎的搭配。

I Like Your Colors：給定一個網址，它能夠幫你分析該網頁所採用的配色，可以用它來觀察一些配色不錯的網站。

COLOURlovers：挺棒的色彩分享網站，可以看到目前顏色流行的趨勢，大家推薦哪些不錯的配色，有做 ranking，並對不同的組合做有趣的評論。同時提供不同檔案類型的 color palette 下載的服務。

Color Palette Generator：使用者可上傳圖片，它會幫你分析該圖片所採用的配色，很適合用來做以照片為主的網頁配色設計。

Color Schemer：提供一些配色的色表，並有線上色彩選擇的功能，不過跟上面幾個比起來算是比較陽春的。