WWDC2016 cover

WWDC 16 – 設計人應該知道的幾件事

Apple 在年中舉行的 WWDC (世界開發者大會),除了將未來一年軟體更新的做重點介紹外,還有一整週的論壇及 workshop。而每一場論壇的結束後,都會上傳到 Apple 的官方網站上供大家觀看。

我們從今年度(2016)的設計類論壇中挑選幾項有趣的主題,整理後以圖文的方式分享給大家。如果你正有開發的項目,準備進軍全球,這些重點可對產品的設計與推廣上有所價值;而一般的開發者、使用者經驗分析師、介面設計師們,也能在論壇的重點中得到更多的知識。

在 Apple 的產線開放各自 App Store 平台後,設計師對介面的優化,已不單只有智慧型手機這樣的裝置,而開發者可以一展想法的地方也就更多。我們從中整理出值得關注的幾項重點:

Designing for tvOS

圖文的辨識度

開發 Apple TV 時,我們要考慮 “觀看者與螢幕間的距離"。

手機與使用者之間的距離可藉由移動手臂來調整,但電視是透過一定距離來接收資訊與操作的;且觀者未必只有一人。這樣的使用情境,是考量電視裝置介面設計的基礎課題。因此,設計的美學上,我們可不能認為字體縮小越美、筆畫越細越為雅緻等,文字上需以中級的尺寸及 regular 粗細度作為字體規範的基礎。另外,"可視度" 與 “大尺寸圖" 亦是 TV 開發上的重點項目。

TV01

▲ 因為觀看距離的關係,在開發 TV 的應用程式時,字體的可讀性是設計該平臺 App 的基礎。官方建議以 Regular 的字體粗細作為傳達、閱讀的標準。

 

平台應用的可能性

第四代的 Apple TV 有著一項別於傳統電視操作的方式,就是新設計的遙控器。它結合了 滑動觸控、按壓點選及收音麥克風,創造出新的應用、使用方式及體驗。在論壇中,講者就選出目前平台上幾項特別的使用方式,供開發者想像可能的 App  設計方式。

螢幕快照 2016-06-28 下午5.53.54

▲ 論壇中示範的其中一項 TV App,開發者藉遙控器特性轉化為橫向操作的搖桿,讓使用者進行遊戲更為熟悉、便利。

螢幕快照 2016-06-28 下午5.52.17

(點擊可放大) 其他別具啟發性的 TV 應用。左邊的 REUTERS TV 搭配使用者的時間,將新聞重點精選成不同長度;右邊的健身應用可分段進行健身訓練,符合傳統電視教學型態的使用經驗。

 

Designing Great Apple Watch Experiences

因為螢幕小,更要說重點

別於 TV 的中距離操作情況,Watch 更貼近使用者,而且它在手腕上震動反饋與聲音提醒是短暫且直接的。相對於其他產品,Watch 的顯示螢幕小,每次傳達資訊的時間,被限制在抬起到放下手腕的那剎那。因此,如何優化從 iPhone 上的複雜資訊傳遞到手上的過程就是:去繁就簡 – 以上是 Watch 顯示資訊的要點。

apple watch_compare

(點擊可放大) 以資訊型的 App (登機)通知為例,登機資訊往往會伴隨許多次要資訊,選出重要的資訊作為該呈現的通知方式,能夠協助使用者快速找到資訊重點。 右邊為資訊優化的設計結果,重要的航班資訊得以一目瞭然。

apple watch slide

▲ (點擊可放大) 超出螢幕畫面的天氣 App,,雖然可以使用 digital crown(錶冠)進行閱讀,但相對起左右滑動的方式,在顯示資訊上更為快速。

簡單清晰的 icon 傳達

因為 Watch 的錶面功能(Complication)掌管的資訊類別眾多,可能有天氣、行事曆、運動的記錄…等。在新的版本的 Watch OS 中,使用 icon 來進行資訊的分類也是其特色之一,因為這些資訊對於 watch 的傳達而言,是抬手倏忽之間的,這些 icon 設計是不宜複雜的。

apple watch icon

 這次 Watch OS 改版的重點,將錶面的資訊功能搭配清楚簡潔的icon, 並定義不同資訊的使用原則。

 

Typography and Fonts

SF Mono 字體的發布

在前年 iOS 8 登場時,發佈的 SF (San Francisco)字型,每年都會有新的家族成員誕生(例如去年隨 watch 一同而來的 Compact 版本,就是更為簡潔化,適合小螢幕、小字呈現,同時又能清楚看出拼字的字型);今年則與主要視覺相互呼應的 SF Mono,這是一套適合程式編寫人員的字體。

font compare

 在字體與排印學的論壇中,發表了編寫程式用的字體。本次 WWDC 視覺圖案也是透過這套字體所組成的。

font

 SF MONO 的特色。字體間的間距都維持一定,在編寫密密麻麻的程式時能更清晰呈現。

 

TV 上的 Small Cap 應用

字體本來就是為了精確傳達閱讀舒適的功能性而存在,而部分的文書規則會在這份視覺閱讀之上,舉例  TV OS 所現的大寫字,在不失整個閱讀的順暢,就需要使用 Small Cap 來解決這樣的問題。

small Cap onTV

Small Cap

 在英語系國家,電視、電影使用大寫字體呈現文字段落中的層級是一種編排習慣。但大寫字體在一行文字中,是顯得過於突兀且難以排版。 Small Cap 的字型主要是解決這樣的字體編排問題。

Inclusive App Design

字型與編排設計

面對產品要推廣至不同國家時,若我們只從自身文化中所熟悉的事物下手,有可能無法符合該目標對象的需求。

以歐美常用的拉丁文字及其他國家橫向書寫的文字來看,我們就可能遇上超過頂線與底線而產生的編排問題,這些超過頂線或底線的字,是仰賴著這些特徵來被識別的,為了編排而強行去除特徵,則會無法被識別。而保留下來,則需要重新考量文章行距間的問題。

Sentence

▲ 幾個橫向書寫的文字。以拉丁字體的字構規範來看,這些超出頂端或底線的文字,需要另外去考量排版,若為了搭配整體而去掉這些特色會讓文字難以被判別及閱讀。

layout

 (點擊可放大) 以文中的泰文為例,若同英文的排版方式,則可能遇到文字相互重疊的情況。因此,視使用情況做行距調整是作為在地化的推廣要注意的部分。

文化導致的用色差異

文化間的差異,顏色也是其中要注意的。

紅色在中國可能很能代表喜氣,但在歐洲卻代表著紅色代表著革命,進而聯想到衝突及暴力。除了 App 本身的設計外,文化性的用色也常被考量在推廣上,例如:農曆年期間 Apple 會推廣的活動容易以紅色調為主題,而這些廣告的露出也大部分只針對大中華地區的使用者。

culture color 不同的文化對色彩的解讀不同。有的地方認為浪漫、吉祥的顏色,在不同地域會是帶有負面的含義。

stock

▲ 華人文化喜歡紅色也展現在股市。美國的股市上漲以綠色為識別色,但中國與台灣相同,上漲的顏色為紅色。

因為生理狀況不同而考量的用色情況

除了文化之外,對於色盲的使用者我們也是需要去考量的。

就以 apple watch 設計規範上,很廣泛的運用不同的色彩來做功能的區分,運動計量的分類色環就是明顯的例子,但色盲的使用者看到的情況可能會有所不同。考量到這些情況,對生理狀況不同的使用者也能區分傳達而來的信息,才得以感受到好的使用體驗。

color blend

 色盲的使用者眼中看到的顏色與我們的不同。此圖模擬4種顏色,若在紅綠色盲者的眼中,僅能區別出藍色的差異性。

watch color

 透過色彩作為辨別的 Apple Watch 介面,在設計時也考量到色盲使用者的情況,讓他們還是能夠區分其計量間的不同。 

 

後記

文章中整理出來的只是設計論壇中的其中一部分,如果想多方了解的開發者們,不妨也去觀看其他領域的論壇。而文中沒有特別提到的部分 如:設計論壇中的 Iterative UI Design(迭代的 UI 設計)以及 以程式開發介紹為主的 Waht’s New in Acessibility(新的輔助功能)都是能增進設計非常好的課程內容。

整個 WWDC 的內容都是非常好的學習資源,無論你是否為開發者的一員,這些都能夠增加你對使用者介面的進一步認知。上述的課程都可以透過 Safari 瀏覽器或從 App Store 下載專屬 app 來進行觀看:

本篇圖片資源出處為

  • Designing Great Apple Watch Experiences – Presentation Slides
  • Designing for tvOS – Presentation Slides
  • Inclusive App Design – Presentation Slides
  • Typography and Fonts – Presentation Slides

本文章所屬設計大舌頭與作者所有,未經授權,不得轉載!如需轉載,煩請通知

如果你也喜歡我們的文章,請 Follow 我們的 Facebook 專頁,每天都會分享許多精選文章!

分享此文: