AJA creative

溫暖人心的介面設計



設計始於生活的體驗與觀察,許多設計的靈感都來自於我們所熟悉的事物。木頭的質感在視覺上給人一種溫馨、溫暖、自然、純樸的感覺,無論在東方或是西方,都很喜歡使用木材來蓋房子、做家具。

介面設計也不例外,應用程式為了能夠讓使用者對某些功能或視覺產生直接的聯想,並在介面上採用了類似的元素。最近看到一些應用程式,也採用了木頭的材質表現。其中最經典的,應該是 Apple 的 iBooks 了。

書本放在書架上,應該是再自然也不過了,看是簡單的設計,但 iBooks 在木質的表現上的確很不簡單。無論是書架的光影表現,還是木頭紋路的貼圖,加上流暢的過場動畫,讓人不自主的想從書架上拿一本書、打開、再關上。

另一個在 iPad 上看到使用木頭質感的軟體是 Early Edition。它是一個 RSS Reader,讓使用者以類似看報紙的方式來輕鬆閱讀訂閱的新聞。一杯咖啡、一份報紙,放在一個木質的桌上,給人一種輕鬆悠閒的感覺,充分表達初該軟體設計的初衷。

除了閱讀相關的軟體之外,遊戲軟體也可以跟木頭產生聯想,例如這個很受 iPad 使用者歡迎的 Labyrinth 2 HD,不但在視覺上呈現出優雅的木質,在動作過程中也可以聽到彈珠撞擊木頭的聲音,上下左右搖晃時也會根據重力感應器調整陰影變化,真的把「擬真」這件事發揮的淋漓盡致。

在介面設計上使用木質的設計要注意幾件事:

顏色如果要表現出木頭質感,就不宜使用太深的顏色,以襯托出木紋的變化。當然也要根據您設計的軟體介面整體的顏色分佈予以搭配。

紋路
要在軟體介面上表現出木頭的自然紋路是一大挑戰,主要是要避免使用大面積的圖檔,以提高軟體的效能。使用小圖來拼接要注意拼接之後的紋路是否自然,如果貼的太規律,就會讓人一眼識破。比較窄的空間可使用直線條的紋路拼接,大面積的面板可使用曲線的木紋來拼接。拼接的方式可使用連續拼接、鏡射拼接等。

立體表現
通常要表現木質,也應該會對應到某些實體例如書架、書桌等,既然是實景,所以在立體感的表現就很重要,像是搭配的場景內容,以及光影的變化等。

就拿 Hami Book 來說,我想它應該也希望營造一個書架的感覺,但是您有這種感覺嗎?無論在顏色、紋路、立體表現上似乎都仍有很大的進步空間。當然可能因為是 HTML UI,所以沒法像一般的應用程式自由設計,但至少在美感上是可以加強的。

0 意見: