MAC UI Project

mac 系統介面分析報告mac GUI design

蘇昱安 Ean ,Su互動多媒體•樹德科技大學視覺傳達設計系

目錄 前言! 2

硬體(傳統)介面! 3

蘋果LOGO經典背光! 3

硬體連接擴充埠! 3

Multi-Touch 多點觸控軌跡板! 4

延伸發展,滑鼠板!?! 4

吸入式光碟機! 5

烤光碟機!!SO CUTE!! 5

GUI圖形使用者介面! 6

Finder 桌布! 6

選單列! 7

Dock! 8

視窗介面! 9

側邊欄! 9

這不是...！每天都看得到的...! 10

簡易陽春視窗! 10

預覽模式! 11

Cover Flow 模式! 11

空白鍵無敵! 12

視窗模式! 13

一個螢幕四個大! 14

前言

mac系統至今,還屬於少數人使用的系統,原因無非就是較不支援其他

軟體運作 ,但A P P L E (蘋果電腦 )還是有屬於它的成功之道 ,不管是 i

mac、mac book、i pod...,到近年來熱門的i phone、i touch,吸引人之處就

是系統如此貼近人性,不管從外觀視覺到實用的系統界面,從裡到外,層

層把關,處處巧思,都是從生活中發想的idea,這也是如此吸引我的地方,

也令許多設計者或音樂家對蘋果電腦唯一忠誠,所以此次介面分析報

告,我選擇mac系統界面作為題材,以下所有內容皆是個人原創撰寫。

跟我進入極簡設計的純粹吧!!!!!

硬體(傳統)介面

蘋果LOGO經典背光

這是蘋果聰明的廣告,例如：你正在星巴客享受悠閒時光,用著mac book,周遭

的眼光絕對會被LOGO的光芒所吸引,如此簡單的設計,卻是市場上獨樹一格的。

蘋果外殻logo

硬體連接擴充埠

將所有連接埠歸於同一方向,出發點是想讓許多連接線好整理,避免四個方

向都有線路的阻饒,讓使用者更能利用寬敞的空間,使用滑鼠時也不會到處碰壁難

以前進,這樣的設計依舊歸於生活,考慮了大部份的人都是右撇子,完全取決於人

性。

連接埠

Multi-Touch

多點觸控軌跡板

多點觸控軌跡版&i touch

此介面設計應能堪稱“經典“,其實原本的mac book滑鼠觸控版就擁有兩指觸

控,直到2008推出i phone、i touch、mac book,大量使用此技術漸漸取代鍵盤、按

鍵..等,這跳脫了以往的互動方式,往後的發展可能電腦螢幕也直接由手指操控,現

今許多手機也採用此技術發展出類似i phone螢幕觸控界面,這絕對會是往後的設

計潮流。

此設計擁有了基本、直接的操作邏輯,簡單並取代了許多不必要的指令。

延伸發展,滑鼠板!?

其實不難想像,現在的傳統滑鼠即將接受時代改朝換代而替換,慢慢的就像

上述的實際案例一樣變成螢幕觸控的普及,或者保守點,不久後說不定會出現滑鼠

板的設計,也許就是一塊放大版的多點觸控板取代滑鼠,用最直接的手當作滑鼠來

操控電腦裡的一切!

4

吸入式光碟機

這也算是蘋果的特色之一,吸入式光碟機,就像在餵電腦吃土司一樣,放

在嘴巴自然就吸進去了,這樣的設計有點像是擬人化,對於我們來說則是更為

貼近,做起來也輕鬆許多,不必等光碟機把舌頭吐出來才放進去,比較起來就較

不人性,多此一舉。

烤光碟機!!SO CUTE!

這是一個燒錄城市的icon設計,雖然不是mac開發出來

的官方軟體,但此設計真是深得人心,一看便知,且與生活

經驗大有關係,不僅會心一笑,並且建立出某種的互動語

言。

截至目前為止都僅是硬體介面的介紹,但我們已經可以從中了解,貼近生活經

驗或者邏輯化、更直接的互動方式多麼重要,現今的設計潮流已經不完全是以視

覺為主的傳統觀念,更要有人性化的互動,讓機器、程式、系統與人建構出的數位

語言。

5

GUI圖形使用者介面

接下來進入系統部份,圖型使用者介面,我們就從電腦最一開始說起吧!

沒錯!這就是蘋果電腦的開機畫面,同樣的理念 “簡單“去蕪存菁的主軸,省略

了一般使用者看不懂不必要的程式碼,並且搭配經典的開機音效,連電影“瓦力“裡

未來的機器人也使用此設定當開機聲。

Finder 桌布

桌面的預設值只有硬碟icon,其餘的連回收桶都沒有,為何!?這樣不是很不方便嗎!?

有趣的就在以下的內容;一樣的以使用者為主,點擊的圖示會以色彩來作辨識,提示

使用者選取的物件為何？並且快速找到位置!

6

選單列

APPLE Logo,起點

start from here!

蘋果的選單列在畫面的頂端,與其它作業系統不同,

但一樣有企業LOGO當作起點,就像是人的大腦,管

理工作、睡覺、設定...等。

電池狀態圖示

顯示方式分為三種,圖像、時間、百分比,但都以圖像為主,文字為輔,減少不必要

的空間。

放大鏡搜尋圖示

此圖像設計也是沿用至今,放大鏡

就代表搜查、搜尋,就算常識不知道,

你也看過名偵探柯南吧!?放大鏡也已

成為世界共通語言,沒有人特別教導,

但我們都知道,為甚麼!?因為它來自生

活!

此功能我非常喜歡,非常簡易的就

能在桌面找到我要的檔案,或者應用程

式、網頁、甚至是單字的搜尋都有辦

法,就是這麼簡單的動作,點擊圖示-key

in關鍵字-結果全盤列出!!!! 爽快!

7

Dock

Dock 使我通體順暢阿!!

why!?因為他使我方便找到常用的軟體,並且可以馬上點擊執行,當然不只如此,它

還能隱藏,把我的桌面變得一乾二淨,使用起來簡直就是零負擔,不誇張阿!!

此設計的確偉大!他就像桌子的抽屜一樣,藏再桌面底下,把常用的東西放在抽屜,

不用的時候當然不用一直開著,如此一來就與桌面融為一體,是否很像我們的生活

經驗？這樣的設計大大提升工作效率,並且運用“隱喻“的設計手法,促使了使用者

的易使性,無須特別學習,因為與真實世界經驗息息相關。

找尋中會放大,使用中有亮點!

為了使我們輕易找到想要的程式,icon則會變大來提示使用者,不僅如此還要辨識

哪些程式是正在使用中的,icon下方也有一個小亮點代表使用中,這樣就能看到哪

些程式還未關閉佔著記憶體的運作。

資源回收桶,在這裡!

在預設得桌布上找不到的資源回收桶原來也

在這!屌吧？沒想到回收桶也能放抽屜,回收桶

的設計也使用了生活經驗移植到電腦,不僅如

此,想要把外接硬碟、裝置...退出時,也是一樣

簡單的動作,丟到回收桶便會出現退出圖示,將

此概念又多發揮了一次,簡單也具一致性!

8

視窗介面

視窗的使用率

之高,所以視窗的介面設計非常具有關鍵性,先以整體的視覺設計來分析,一樣具有

蘋果堅持的極簡風格,視覺清楚明瞭,分隔很清晰不多做顏色的變換,接下來我們就

來一一檢視它的功能吧!

側邊欄

側邊欄的功能非常有用,他是書的目錄,所以不能複雜,簡單易懂,並能馬上知道自

己要去哪？在哪？也因為mac系統不多做磁碟的分割,因此少了很多累贅的目錄,

以便搜尋;項目裡很貼心的幫你分出近期的搜尋動作,以利於提高效率。

路徑欄

路徑欄更是運用了“麵包屑提示“,可以明確知道檔案從哪來、在哪,並且可以沿路

的走回家!

9

視窗介面

這不是...！每天都看得到的...

非常似曾相識吧？它就是你每天在路上

都看的到的“紅綠燈“,紅燈停,綠燈行!全世

界都知道,因此這樣的配色最為恰當,無用

任何思考便清楚,紅色就是關閉,綠色當然

就是放更大囉!

簡易陽春

視窗

陽春視窗其

實就是更簡

單,少了側邊

欄,要找的東

西更明確,資

料夾的呈現

更為突出。

10

預覽模式

左：列表模式,右：直欄模式

資料庫不同用法的關鍵

除了一般圖像模式以外,還有列表模式、直欄模式,用法各有不同,列表模式較利於

找資料,而直欄模式則像是樹枝圖,視覺來看比較複雜,但其實用意在於方便整理資

料,較能清楚位置先後順序。

Cover Flow 模式

此模式也是蘋果的一大創舉,此模式用於瀏覽照片、音樂專輯、任何圖檔,一目瞭

然,效率加倍,視覺效果更是搶眼,以黑色為底更是凸顯照片的好背景,前後順序都

可預先預覽,操作只需滑鼠滾輪轉動,就可連序看100多張照片,比相簿還好用阿!!!

11

空白鍵無敵

在mac的世界,“空白鍵“簡直是平民變英雄,化腐朽為神奇阿!此預覽方式堪稱絕頂,

無論是照片、psd、ai、音樂還有電影也能用空白鍵預覽!!這個在看任何資料都異

常方便,無須多花時間測試檔案,就是這麼為我們著想阿!

標簽功能

沒錯,當我們設計者找了很

多資料或者拍了很多照片,

要分類出哪些是可使用的

時候 ,標簽就派上用場,跟

日常生活一樣,像是書籤、

便條紙,方便實在,而且更

貼心的是,還可以把同標簽

顏色的自動分類。

12

視窗模式

當視窗百花爭艷時...

總會有這個時候,到最後又

要關了一堆視窗才能找到

自己要的,但是mac也想到

了,首先視窗也分前後,mac

為了凸顯空間感,在每個視

窗都添增了陰影,好像一個

3D空間一樣,重點還不是如

此,因為問題還沒解決,於是

出現了以下的模式!

這時候就攤牌吧!

很簡單吧!那麼多東西疊在一起,當然就是攤開來看,而且此功能還會幫你把視窗

排的好好的,不不不!這樣好像還不夠....

13

一個螢幕四個大

SPACE 模式

就算不夠用,mac再把螢幕變四個,其實呢它還可以設定6、8個螢幕,還可以設定每

個螢幕專門用來執行哪個程式,GOD!就這麼簡單,這些創意都只是正常的邏輯,實

現之後就是那麼實用,無須非常華麗的視覺效果,但卻更貼近人心,時時刻刻都在提

升效率,但又是很直覺的操控。

有鍵盤熱鍵不夠看還要螢幕熱點!

此功能還可設定螢幕熱點,例如：移到左下角就攤牌,左上角視窗全閃開,這就是互

動介面設計的極致阿!!!

14