How we do it ?

如何精心雕琢數位體驗中的每個細節，呈現溫潤優雅的視覺感受，呼應精品航空的高端定位？

Image by rawpixel from Unsplash

在構築星宇的數位品牌識別的過程中，最大的挑戰莫過於跨越各個不同平台的數位接觸點，打造一致的體驗感受與視覺氛圍。特別是在有多個設計與開發團隊並行的情況下，跨團隊的同步協作尤其不易。此外，星宇作為一個全新的航空品牌，在這個過程中也在逐步的發展品牌自身獨特的服務與價值供給，如何同步的去呼應這些發展、適時及時的調整設計的手法也是另一大挑戰。

在設計過程中，我們一直在思考跟揣摩當顧客進到網站時，要帶給他們什麼樣的感受。我們希望營造一種引頸期盼的期待感，去呼應對星宇即將啟航的期待，以及搭乘星宇、踏上旅程去探索的冀望；我們也希望營造精品氛圍，讓顧客能品味星宇的獨特質感，想像星宇的每架飛機在浩瀚天際中翱翔時都像是一道璀璨的星光，帶你我徜徉在天地之間，感受天空與大地的壯闊。從這些想像中，我們淬煉出星宇獨有的特質，並運用在色彩、字型、影像、圖標、輔助圖形等元素，打造出獨一無二的數位識別系統。

Texture Boutique Imagination

Color

色彩靈感

星宇航空的品牌色源自於原始大地的色彩，以土、木元素為基調，懷抱對自然無限的崇敬。因此在數位色彩規劃上，擷取了高空俯視的大地、夕陽沒入海平線的瞬間，象牙、鵝黃、卡其、駝色、赤鐵、橄欖綠、磚紅等低彩度的大地色系不過度鮮豔明亮，看上去能感受到溫潤沉穩的舒心色彩。

01

Brand Color Palette

Naval

Brown

Cream

Accent
Blue

Complementary Color Palette

How We Create UI Color System?

兼顧跨平台、裝置的介面用色邏輯

因應網站與 APP 在功能、資訊架構以及被乘載的媒介本身特點的不同，我們思考數位識別系統中的介面色彩系統時，必須深入考慮這些不同的特性，才能創造跨越平台的最佳色彩定義，制定統一的規範。

UI Components Example -

Naval#202A36

Naval Variant#3E454B

Desktop and Mobile -

Primary Naval

在將品牌色盤運用到介面色彩系統的過程中，由於介面設計上有強化呈現資訊所需的對比度的需要，同步也兼顧星宇品牌的精品優雅氛圍的考量下，我們在品牌色盤中新增了「靜邃黑」的顏色作為主色，於功能面與感受面創造出新的用色層次 -
．功能面：主色用來分割資訊區塊，製造資訊層級並強化資訊的易讀性。
．感受面：主色作為頁面上存在感最強的顏色，會賦予頁面品牌調性。

UI Components Example -

Brown#96664A

Brown Variant#804827

Desktop and Mobile -

Secondary Brown

次色需與主色在對比度和色相上能相互對應，因此我們選用大地色調的「赤鐵棕」作為重要功能的引導色，並針對不同類型的引導，做高彩度與漸層的兩種衍生。在介面上用於引導使用者兩種主要的使用行為有：
・資訊閱讀與理解
・功能與流程操作
因此在定義上多用於可操作的元件，以及資訊區塊的標題。

UI Components Example -

Blue#1E4568

Blue Gradient#2C4C68
#061D30

Desktop and Mobile -

Accent Blue

我們在介面中特別加入了強調色，用於提示資訊和操作區塊的狀態改變，如游標懸浮、選取等狀態，目的在於協助使用者在操作介面時能更加專注，即時留意操作所產生的反饋。強調色經常與泛用於操作元件的次色並存，也因這樣的特性，選用「星空藍」能兼具兩種顏色並存時的對比度，並呼應星宇航空的星際意象。

Typography

02

文字在資訊版面上是視覺的重要元素之一，因此在介面設計中，我們針對歐文語系多下了一些巧思，選用了襯線體與非襯線體兩種字型做搭配。Rufina 相較於古典人文字體，粗細的高度差異化更顯現代感；而大量的段落文字則選用富有現代摩登感的 Montserrat，期待用戶在瀏覽體驗上能感受星宇航空的優雅品牌氛圍。另外，因應跨平台的各種尺寸，為了維持資訊的易讀性，定義出適應各瀏覽情境的細節規範。

Rufina

Aa

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890

Montserrat

Aa

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890

Noto Sans

星宇

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890

Title

Enjoy the comfort of every single journey.

Lead

Every trip is unique, non-duplicable, cherished, and worthy of remembrance. STARLUX cares for and values your needs on every trip.

Number

09 : 50 TWD 18,500

Paragraph

Full-flat business class seats on our narrow-body aircraft allow passengers to enjoy the most comfortable flight experience. A lighter back shell with a metallic finish encloses a darker toned seat creating an intimate personal space for Business Class passengers. The black on black textures provide visual depth and rich tactility with highly contrasting golden embroidered details and anodized metal applications. Use of both geometric and organic patterns creates a dynamic contrast within the seat and cabin.

Button