[靈感] Apple style 風格網站設計

我自己的PC已經被我弄得像一台偽Mac,原因無他,實在是太喜歡Mac的設計風格。賈老除了是個了不起的企業經營者,同時他的設計品味也是為大家所崇拜的一點。打從Mac OSX以來,一直到iPod、iPhone誕生,以及新的Mac book問世,Apple 的工業設計、UI、乃至網站設計,無不令人讚嘆!

Apple 的官方網站改版之後,延續Leopard的設計質感,清楚、簡單、而且易用,網站基調是白色的,用灰色來旁襯,放上許多鮮艷、醒目、有趣的產品圖片,凸顯產品價值,更讓整個網站看起來像時尚伸展台,而一部部Mac、iPod、iPhone,則化身成為標緻的模特兒!

Apple-02

清楚、流暢的 Layout 規劃,購物單元逛起來一點壓力也沒有,反而更想一探每個產品的究竟!

Apple-03

Apple-04

Apple-05

Apple-06

大量使用java script,以及搭配QT內嵌影片播放,增添瀏覽網站時的趣味。我也相當喜歡看他們的教學影片,很清楚、簡單,影片的畫質也是沒話說!

Apple 的設計風格如此強眼,無怪乎第3方軟體製造商的網站風格,也多延續這個方向!除了讓使用者一目了然網站是提供服務給 Mac 的軟體商之外,儼然也形成一種網站識別的印象:代表著 Apple 的高品質、簡潔以及高易用性!

以下列出幾個收集來的 Apple 風格的網站,大多是軟體服務商的網站,很酷喔!也許可以幫助激發些什麼靈感,或想法。

1. Panic Coda、Panic CandyBar

Panic-01

Panic-02

相當知名的軟體,網站也是非常有名,在許多 java script 資源網站中,都會拿這2個網站來當範例!使用許多有趣的語法,讓瀏覽網站充滿意思!

2. RapidWeaver

RapidWeaver-01

RapidWeaver-02

令人印象深刻的配色,上方的漸層真的很美!影片播放的時候,也能與背景有所呼應,很棒的設計。

3. Icon Designer

Icon-Designer-01

Icon-Designer-02

提供許多 icon 設計服務,都很精緻有質感!黑色的網站基調與作品相互輝映!

4. MacRabbit CSSEdit

MacRabbit---CSSEdit-01

MacRabbit---CSSEdit-02

CSS編輯軟體,網站很簡單,有大大、醒目的軟體 icon,簡單明瞭!

5. 280 Slides

280-01

280-02

很酷的線上幻燈片編輯服務!看到Mac風格介面,讓人忍不住玩了起來。製作好的投影片還能存成PDF檔下載喔!

6. Versions

Versions

連結軟體的icon意象發想,綠草地讓人印象深刻!

6. Tao Effect

Tao-Effect

能夠將檔案、資料夾、信件加密的軟體。網站形象區結合導覽影片,兼具創意與實用性。黑色與亮綠色的配色,實在讓人著迷!國內使用黑色背景的網站似乎很少,在國外真的超多的。

7. Jumsoft

Jumsoft-02

簡單帶點可愛的網站風格,讓這幾個使用於工作上的軟體看起來格外親切、易用!沒有太多複雜設計的網站,似乎也宣告他們的軟體一樣可以輕鬆上手。

8. Checkout

Checkout-01

Checkout-02

幾乎跟Apple官網一模一樣的設計與layout,讓他的銷售點系統看起來格外可靠、安全!每個功能搭配精緻的情境圖示,像看圖說故事般的讓使用者馬上就能清楚這就是他所需要的產品!

9. Things

Things-01

Mac上的 toDo list 軟體。網站淡藍色的配色讓人感到放鬆,簡單的動線規劃,從下載、購買,到觀看導覽影片一氣呵成。一樣利用醒目的軟體icon來識別,加深印象!

10. AppleStyle

AppleStyle

最後,來看看台灣的吧!這應該算是一個中文介面的Apple商品購物平台吧!介面直接承襲OS Leopard風格,連背景也是 Leopard default 的紫色宇宙。閱讀時會有4個欄位的版型,讓文字過於狹窄,不是很容易閱讀。不過商品的種類倒是挺多的。

Apple 的東西除了外表華麗之外,事實上都兼具有實用性!總是站在使用者角度出發的UI設計,輕巧的機身外殼,親切的操控,化繁為簡,而設計不就是如此嗎!

Read More...

使用Fireworks CS4製作標準html+CSS文件

英文版 CS4 已經上市,中文版也將於12月登台,Fireworks 大進化的功能之一,就是能將設計稿直接匯出,變成使用 div+CSS 架構的標準 html 文件檔案!你的設計稿可以是 psd,也可以是 png,Fireworks CS4 將完整開啟這些檔案並轉換,即使是使用 Photoshop 製作的設計稿!


那麼,實際上該如何設計一份 Fireworks 讀的懂,然後完全按照設計者的想法匯出成為一個 html 文件呢?以下我就自己實際製作的心得整理幾個方向給大家參考。

CSS_test

開始設計

先在腦子裡規劃好網站的基本版型,例如:一般會有放識別 logo 的top 或是 header,側邊欄位的 sidebar,放置主要內容的 content,還有最後版權宣告、聯絡資訊的 footer。然後在 Fireworks 裡面開啟一個圖層資料夾,取名為「div元素」,將上述各區塊,按照版型排列,使用「矩形工具」繪製於版面上。並將每個繪製出來的區塊元素打上名字,請務必以英文命名,因為這些名字在匯出成 html 之後,會成為元素的 id,而這些矩形區塊則是支撐整個網站架構的 div 配置!

設計

在「div元素」資料夾之上,新增所需的圖層資料夾,將你的創意與設計繪製在這些圖層上。當然,已經繪製好的「div元素」也可以改變形狀,除了方正矩形之外,你也能改成具有4邊圓角的矩形,只要在之後使用「分割工具」切圖注意幾個要點即可。這部份待後文介紹。

當需要放置「表單」元素的時候,例如:會員登入欄位、核取方塊等,必須打開「視窗」>「通用元件庫」,找到「HTML」分類,開啟後拖拉使用裡面的元件來製作。Fireworks 將自動識別這類元件,匯出成為具有<form>標籤的表單元素。

另外,html裡面標題元素:<h1>~<h6>等,也能使用「通用元件庫」裡的「標題1」~「標題6」來對應。需要針對上述元件設定詳細屬性,則開啟「視窗」>「元件屬性」來設定。字型、字級、顏色、行高,將會轉成CSS樣式。

分割切圖

這個部份必須注意幾點。首先,我們不需要整個網站切滿分割區域才能匯出,只需要針對元素、屬性製作分割區域即可。例如:要變成背景「圖片」的部份,只需要切一塊小方塊,在「分割屬性」的部份選擇「背景影像」,設定是某重複,或是沿著 x 軸 repeat,這樣 Fireworks 自動會將 CSS 的 background 屬性指向這張小圖片。

另外,文字的部份,除非是具有特殊字型與效果的字體,可以圖片形式匯出之外,其餘會以「電腦字」型態出現的文字,都不需要「分割」!在Fireworks 設定的字體屬性將會自動轉成 CSS。

在「設計」部份,如有使用元件庫製作「表單元件」,也不需要作分割。如上所述,Fireworks 將自動判定,匯出成為具有 form 標籤的表單。

如果需要製作自動依照內文延伸的圓角區塊,切圖的時候必須將區塊分為「上」、「中」、「下」3個部份,並且將「中」區塊的圖片設定為「背景影像」。例如:一個 id 為 sidebar 的圓角矩形,上方左右2個圓角為一張圖片,下方左右則為另一張圖片,中間則另外輸出成背景影像,一個具有圓角的div 區塊就完成了!

匯出

文件完成之後,選擇「檔案」>「匯出」,類型選擇「CSS 和影像(.htm)」,也可以指定圖片存放的資料夾,然後按下「儲存」,一個具有標準html 與 CSS 的網頁就完成了!

附上 Adobe 官方教學影片,可以更加清楚整個過程唷!


Read More...

Adobe CS4 台北發表會與試用心得

CS4 11月7日,Adobe 在台大醫院國際會議廳舉辦了 CS4 中文版的上市發表會。很早就報名的我一直相當期待這天的到來,很想看看 CS4 的介面與功能改進,因為光從 Adobe 官網看來的介紹就已經夠讓我熱血沸騰了!

會場還有發送限量的 Adobe CS4 T-shirt,可憐的阿鳥太晚到沒拿到。T-shirt 是黑色的,上面有金色的 Adobe logo 與產品 icon,還蠻酷的,至少穿起來不會太宅XD。人潮還不少,現場還有贊助商的攤位,Apple、HP、nVidia、Canon之類的,小小的場地有熱鬧到。可惜當天我忘記帶DC去拍照,沒辦法紀錄現場的盛況!

發表會請到3位大師:Tim ColeKarl SoulePaul Burnett,分別就「平面」、「影音」、「網路」三大領域展示產品功能。內容都相當精彩,誠意十足,大師也都很幽默風趣,現場笑聲不斷。

幸運的,因為工作的關係,在發表會之前其實我就已經提早拿到了 CS4 DesignPremium 中文試用版,綜合發表會上的資訊以及我的試用心得,我就稍微整理幾個產品的新功能吧!

CS CreativeSuite

這次針對3大領域提供4種版本,MasterCollectionProductionPremiumDesignPremiumWebPremium。系統需求大大提高,2GB記憶體之外,螢幕解析度也建議以1280x900以上為最佳解析度,傳統1024x768使用的話會有選單折行,導致工作區變小的狀況。另外,顯示卡要求也相當高級,由於這次 Adobe 導入 OpenGL 使用介面、GPU加速功能,太過老舊的顯示卡完全無法發揮 CS4 的功力。以我家的電腦來說,1.7G雙核 + 2G DDR2 + Geforce8500GT,跑Photoshop、Flash 很多地方都還會鈍鈍的!之前跑 CS3 很順的電腦可能都要再去升級一下了!除非已經使用工作站等級顯示卡的電腦,就可以不用擔心啦!

這次系列產品的介面也做了很大的改變,不再包覆著作業系統的框架,而是使用全新的外框架,將選單整合到最上方,面板的浮動與工作區域的調整更加有彈性!你也可以自訂工作區域,快速切換!從 Photoshop 到 Fireworks 等產品介面完全統一,不會再有不同。CS3 沒做到這點,我覺得很可惜!

另外,每個產品都能透過「共享螢幕」功能,同時最多讓4個人線上共同編輯、討論一份文件!實際使用過,效能與速度都非常不錯!還能進行文字討論與筆記分享,對於線上會議、遠距工作很有幫助!

PS Photoshop CS4

PS01
  1. 可直接將3D物件匯入,並直接使用2D圖層影像的編輯功能,而不需另開3D面板。 你可以用筆刷工具在你的3D物件上面塗塗改改,透過圖層「混色模式」看起來更逼真!另外新增3D工具,讓你可以旋轉物件角度,以檢視物件各部份細節。 PS02
  2. 使用 OpenGL 技術,新增旋轉畫布、流暢放大縮小功能。就像手繪的時候,會習慣轉圖紙一樣,現在影像的畫布可以流暢的旋轉到任何角度,以便繪畫。 
  3. 整合式影像調整面板,智慧型編輯影像而不失真。例如,使用加亮工具,以前會過於慘白,必須再修正,現在將不會遺失色彩、色調等細節。另外你還能快速指定哪些圖層套用這個變化,而不需製作遮罩。
  4. 新增「內容感知縮放」。從前縮放圖片,圖片中的物件也將喪失原有的比例,現在透過這個強大的功能,Photoshop 聰明的調整影像物件,讓縮放後的影像仍能維持原有的最佳比例、位置!
    PS03
  5. 可開啟影片檔案,利用 Photoshop 的筆刷、圖層直接編輯影格。例如,你可以使用「修補工具」將影片上的雜物消除,然後存成 PSD ,再到 Premium 匯出成任何格式的影片檔案!

Ai Illustrator CS4

Ai01
  1. 可建立最多100個工作區。現在只要一個檔案,就能儲存DM、海報等不同尺寸的內容,而且你還能隨時更改、新增這些工作區!
  2. 漸層工具大躍進!可以說是這次 Illustrator 最大的改變,漸層工具將在物件上面增加「調整桿」!這表示你將可以任意調整漸層位置、大小、旋轉,更可以調整「透明度」!不用再像從前使用遮罩,步驟繁雜的才能製出透明效果。
    Ai02
  3. 新增物件「外觀」面板。可以在上面修改顏色、筆劃,或是增加效果濾鏡!僅次於漸層工具,我相當喜歡這個改變,對於物件的掌控大大提昇!
  4. 新增「點滴筆刷」工具。可以直接使用筆刷製作向量「形狀」,而不只是「線條」了!在已經存在的物件上面繪製,將會自動變更樣式,以符合原物件!還能使用「橡皮擦」工具清除向量路徑。製作向量物件更加簡單!

ID InDesign CS4

ID01
  1. 即時檢視錯誤,並在面板中直接找到位置,並做調整。  ID02
  2. 快速匯出成 SWF 檔案。只要按下「另存新檔」,調整設定,就能生成網頁動畫檔,並且自動具有翻頁動畫效果!讓你的專案在網站上也能像平面出版一樣出色! 
  3. 自訂連結面板。這裡你可以檢視文件所有的圖片、文字資源,按一下連結還能馬上跳至物件所在 Page,進行編輯、調整、置換等動作!
  4. 設定條件文字。對文字、段落設定屬性,之後就可以透過控制屬性來調整文字段落的顯示或不顯示。有點像是「標籤」功能,例如:如果我要把含有「英文」這樣標籤屬性的段落隱藏,我只要到屬性面板,將「英文」旁邊的眼睛圖示按掉,則擁有此標籤的文字將會被隱藏,而其他文字段落將會自動排版、定位。
  5. 交互參照。有點像是網頁的錨點功能,針對文字>文字或段落,製作指向性的連結。即使因為編修,頁碼有所改變,路徑也會自動修正,而不會讓指向錯誤!
  6. 跨媒體應用更加完整。InDesign 可以說是 Adobe 整合平面、網路2大產業的最佳應用示範!幾乎所有 Adobe 的產品都能與 InDesign 連結,包含 Dreamweaver、Phtoshop、illustrator等,在 Photoshop 上所作的特效能完全呈現在 InDesign 上。你可以讓 InDesign 與 Dreamweaver 使用同一個資料庫與架構,甚至排版也能互通。

DW Dreamweaver CS4

DW01
  1. 新增「即時檢視」模式,等於是內涵標準瀏覽器規則,你可以直接在 Dreamweaver 瀏覽網頁,表單、選單、連結,甚至連 java script 功能都能觸發,不用在瀏覽器與 Dreamweaver 來回切換了!而且還能檢視 java script 語法的變化,停在事件階段,以利檢修語法!
  2. DW03「關聯檔案」我覺得真是超級好用!以往開啟網頁檔案,Dreamweaver 並不會讀入所連結的 CSS 與 java 等相關檔案,是的!現在可以了!在同一個檔案標籤底下,將會同時顯示這份 html 所讀入的外部檔案,你不用再為了尋找 CSS 檔案而苦惱,你可以快速找到並編輯他!
  3. 「程式碼導覽器」有點類似FireFox 的外掛 FireBug,將滑鼠游標點一下網頁元素,按下「程式碼導覽器」icon,就會列出 CSS 樣式,從父元素到子元素詳列,還能馬上連到 CSS 檔案中修改、編輯!真的是超好用的啦!
    DW02
  4. 與 PSD 整合。當插入 PSD 檔案的時候,會直接跳出影像轉存視窗,而不用再開啟 Photoshop!另外,當 PSD 透過 Photoshop 而有所更動的時候,Dreamweaver 也會利用圖示通知你,你只要點一下圖示就會自動更新,不需要另外在做匯出的動作!

FW FireWorks CS4

FW01
  1. Adobe AIR 製作。可以直接在 FireWorks 製作滑鼠行為,匯出打包成 AIR 執行程式,或是轉存 html、swf檔等。
  2. 匯出PDF。將你的所有頁面(Page)建立連結,轉存成 PDF 之後,也將保有這些頁面關聯,以利與客戶溝通、提案!
  3. 製作標準 html 與 CSS 語法的網頁。是的!這真是太傑克了!在 FireWorks 將版面設計好,竟然可以直接匯出,變成一份擁有完整 div 架構的網頁檔,連 CSS 都幫你寫好了!也就是說當你完成頁面的設計,同時你的網站也搞定了!OMG!可以把 CSS 的書籍丟掉了!實際製作一遍,效果真的很不錯,即使不能有太複雜的架構(例如:絕對定位),但是對於網站版型、定位,與網站製作時程,已經提供很好的解決方案!
    FW02
  4. 提供更加豐富的樣式面板,分門別類,讓你輕鬆套用樣式!你也可以將自訂的樣式加入面板,以利其他檔案使用! FW03
  5. 新增路徑面板,讓你快速選取向量點,以及編輯節點的屬性!例如一個擁有複雜向量的物件,當你要選取左半部的節點時,以往只能一顆一顆慢慢點,現在只要按下面板中「選取左側點」,他就會以物件為中心往左半部選取節點!
     
  6. 顯著的效能提昇。CS3 版之前,常常工作一段時間之後,FireWorks 總會出現遲鈍、緩慢的現象,而且非常嚴重,必需要充新開啟以釋放記憶體才會改善。現在 CS4 能明顯感受到這部份問題的解決!
  7. 能忠實呈現 Photoshop 與 illustrator 所製作的檔案原型,並保有編輯空間!例如:一份含有切圖屬性的 PSD,在 FireWorks 開啟,不論是效果、文字、切圖區塊都能完整呈現,你可以將他匯出成 html+CSS 文件。

FL Flash CS4

FL01
  1. 物件導向動畫概念!捨棄從前複雜的「關鍵影格」,動畫改以物件為導向,簡單而快速製作移動、漸變、旋轉等動畫,也能輕鬆針對動畫範圍做大小縮放、移動。拿掉了關鍵影格,時間軸更簡單明瞭。這也意味著,過去利用關鍵影格製作的動畫,在 CS4 底下將失去編輯空間,變成逐格動畫!
  2. 全新的 3D 變形工具,讓物件不只是左右選轉,而能有 z 軸的空間變化!當然,這也很簡單的能應用在動畫製作上!
  3. 劃時代「骨骼」工具登場!替物件綁上一節一節的骨骼,他就可以像手一樣隨著骨骼移動、旋轉。例如:你想製作一個3節機械手臂,只要在物件上加上骨骼,然後拖曳物件,就能輕鬆利用物理運算製作出逼真的擺動動作!酷翻了!
    FL02
  4. 想要製作滿天星斗,隨機閃亮的動畫嗎?除了利用 Script,以往動畫製作相當繁雜,並需層層設定。現在只要使用「噴灑」工具,將動畫物件隨機繪製在場景中,一個閃亮的滿天星斗就完成了!不過實際製作的時候,不是很瞭解參數的使用,總是做不出隨機的效果Orz
  5. FL03新的移動編輯器。包含水平移動、垂直移動、縮放大小、旋轉、套用濾境等,都能使用此編輯器透過數值詳細設定!不過我覺得需要時間去熟悉,畢竟一堆數值與曲線,看起來並不是很親切。
  6. 常常看到別人的動畫很酷很炫嗎?或是對自己的動畫超滿意,想要對其他人分享?現在 Flash 可以將物件動畫打包到面板中,下次要使用的時候,只要按一下「套用」,就能將動畫完整複製到新的物件上!也能發佈到網路上供人下載。老實說,這真的很棒!預設的動畫效果就已經有很多很棒的範例可以使用,真的是連小還都可以做 Flash 動畫啦!

其他還有 Premium、After Effect 等產品應用,也都很酷!因為本身沒研究,電腦也跑不動,所以這邊沒有心得。

雖說是上市發表會,不過真正鋪貨讓消費者購買,則是要等到12月份了。我覺得這次改版相當令人驚豔!看得出來 Adobe 的野心,一直致力於跨媒體整合,以及提供設計人員與程式人員更好的溝通媒介,尤其是 InDesign 的發展,傳統出版也能延伸到網頁這塊,而且是透過資源共享的方式,將內容橫跨媒介傳播,提供大家一個很棒的體驗!

話說活動最後還有大抽獎,Wacom 繪圖版、Canon事務機、iPod nano、小折、CS4正版中文軟體,超多大獎,看的我都流口水了!結果一樣也沒沾上邊,嘔死我啦!

Read More...

台灣之美 - 清境農場2天1夜行

趁著國慶3天連假,帶著 Mika 到南投清境農場散散心。9月份一連3個颱風,讓南投受創嚴重,很多路段坍塌,知名景點「廬山」也發生令人驚愕的土石流事件。7月多就開始計畫,並且訂好民宿房間的我真是忐忑不安啊!一直很擔心清境也會遭受風災,即使到了出發前一星期都還有颱風警報發佈。不過,最後還是很開心可以順利成行!

早上6點半,我們在台北車站搭乘「清境專車」出發前往南投清境。單人來回票價1500,而且直達清境,我覺得還挺划算的。如果不介意長途坐車,而且位子較窄小的話,可以參考看看!中間會停留2次,讓大家下車走走,休息一下。

香格里拉-空中花園

車程約5小時,山上天氣很好,我們在「國民賓館」下車,步行10分鐘就到了「香格里拉-空中花園」。這是我們這次住宿的地方。那邊民宿的外觀都走西式歐風的感覺,很舒服,即使不出門賴在民宿房間裡面,都是一種享受!

房間內部

我們訂了最便宜的房間,一個晚上也要2800,清境的民宿價格普遍較高。房間很小,四面都是木頭,而且充滿了香茅味道。不過2個人住其實大小剛剛好,只是香茅讓我很難受。

民宿一樓

民宿老闆很親切,一樓的陳設相當用心!到處都是小熊布偶、精緻的裝飾品之類,營造很悠閒而高雅的氣氛!老闆說綿羊秀的格蘭先生並沒有回澳洲,當天還是有表演,而且就在1小時之後,要我們快些準備一起出發。通常「國民賓館」附近會有專車開到「青青草原」,不過不知道為什麼那天並沒有。民宿老闆開車載我們到「青青草原」,綿羊秀已經快開始了,買了門票就直奔表演場地。

輕輕草原棉楊秀表演台

綿羊餵食

那天看秀的人不算多,長椅都還有空位,不過太陽超大的!萬里晴空無雲,陽光直射,都快要被烤焦。這是我第一次看綿羊秀,真是蠻有趣的,格蘭先生很幽默、熱情,雖然一些中文因為口音聽不太懂,不過大致都還能抓到笑點!

附近有飼料販賣機,可以買食物餵羊,拔草給他吃還不吃哩!飼料一打開,所有的羊都會跑過來盯著你,好像要把柵欄衝破似的,真的挺嚇人的。不過,事實上他們很笨,如果左邊被嚇到,就往右邊跑,要是停下來,看到地上有草就吃,沒什麼腦筋!所以別怕,餵羊也是很好玩的!只是手記得洗乾淨啊!

超皮的小孩

現場唯一不覺得熱的,大概就只有上面這位皮小孩了。到處爬上爬下,把長椅當衝浪板滑來滑去,真是相當耐操!

清境農場吃的地方蠻多的,只是距離都頗遠。晚上我們選擇了在民宿提供的自助吧裡用餐,主食種類還算多,牛、豬、雞、魚排都有,自助吧的菜色也不錯!也供甜點以及湯品,飲料也是無限供應。

去骨牛小排

我點了「去骨牛小排」。說實話,真的相當好吃!肉質軟嫩,醬汁、肉汁真的在嘴裡化開的感覺很棒!讓我印象深刻!

民宿周圍

第2天行程就比較鬆,用完民宿提供的早餐之後,我們就到處晃晃、拍拍照。附近有一個「統一風車廣場」,裡面有7-11、星巴克這些統一集團旗下的商店。也有一些手工香皂、精油、綿羊油保養品販售。可以來這裡買一些東西回家,綿羊油護手乳我覺得還不賴!香味很自然,也不會很油膩。

清境遠眺

之後搭乘1點左右的專車回台北,結束在清境的旅遊。其實,清境不是個好玩的地方,卻是個適合放鬆心情、遠離塵囂的世外桃源!拜天氣所賜,高山美景一覽無遺、美不勝收!真的很棒!

有別於阿里山的高聳、神秘感,清境農場感覺比較清新、可愛,真的很適合大家來走走、散散心,看看可愛、笨笨的綿羊,都是很棒的體驗唷!







Read More...