我們從今年度（2016）的設(shè)計(jì)類論壇中挑選幾項(xiàng)有趣的主題，整理后以圖文的方式分享給大家。
Apple 在年中舉行的 WWDC （世界開(kāi)發(fā)者大會(huì)），除了將未來(lái)一年軟體更新的做重點(diǎn)介紹外，還有一整周的論壇及 workshop。而每一場(chǎng)論壇的結(jié)束后，都會(huì)上傳到 Apple 的官方網(wǎng)站上供大家觀看。
我們從今年度（2016）的設(shè)計(jì)類論壇中挑選幾項(xiàng)有趣的主題，整理后以圖文的方式分享給大家。如果你正有開(kāi)發(fā)的項(xiàng)目，準(zhǔn)備進(jìn)軍全球，這些重點(diǎn)可對(duì)產(chǎn)品的設(shè)計(jì)與推廣上有所價(jià)值；而一般的開(kāi)發(fā)者、使用者經(jīng)驗(yàn)分析師、介面設(shè)計(jì)師們，也能在論壇的重點(diǎn)中得到更多的知識(shí)。
在 Apple 的產(chǎn)線開(kāi)放各自 App Store 平臺(tái)后，設(shè)計(jì)師對(duì)介面的優(yōu)化，已不單只有智慧型手機(jī)這樣的裝置，而開(kāi)發(fā)者可以一展想法的地方也就更多。我們從中整理出值得關(guān)注的幾項(xiàng)重點(diǎn)：
Designing for tvOS
圖文的辨識(shí)度
開(kāi)發(fā) Apple TV 時(shí)，我們要考慮“觀看者與螢?zāi)婚g的距離"。
手機(jī)與使用者之間的距離可藉由移動(dòng)手臂來(lái)調(diào)整，但電視是透過(guò)一定距離來(lái)接收資訊與操作的；且觀者未必只有一人。這樣的使用情境，是考量電視裝置介面設(shè)計(jì)的基礎(chǔ)課題。因此，設(shè)計(jì)的美學(xué)上，我們可不能認(rèn)為字體縮小越美、筆畫越細(xì)越為雅致等，文字上需以中級(jí)的尺寸及 regular 粗細(xì)度作為字體規(guī)范的基礎(chǔ)。另外，"可視度"與“大尺寸圖"亦是 TV 開(kāi)發(fā)上的重點(diǎn)項(xiàng)目。
▲ 因?yàn)橛^看距離的關(guān)系，在開(kāi)發(fā)TV 的應(yīng)用程式時(shí)，字體的可讀性是設(shè)計(jì)該平臺(tái)App 的基礎(chǔ)。官方建議以Regular 的字體粗細(xì)作為傳達(dá)、閱讀的標(biāo)準(zhǔn)。
平臺(tái)應(yīng)用的可能性
第四代的 Apple TV 有著一項(xiàng)別于傳統(tǒng)電視操作的方式，就是新設(shè)計(jì)的遙控器。它結(jié)合了滑動(dòng)觸控、按壓點(diǎn)選及收音麥克風(fēng)，創(chuàng)造出新的應(yīng)用、使用方式及體驗(yàn)。在論壇中，講者就選出目前平臺(tái)上幾項(xiàng)特別的使用方式，供開(kāi)發(fā)者想像可能的 App 設(shè)計(jì)方式。
▲ 論壇中示范的其中一項(xiàng)TV App，開(kāi)發(fā)者借遙控器特性轉(zhuǎn)化為橫向操作的搖桿，讓使用者進(jìn)行游戲更為熟悉、便利。
▲ 其他別具啟發(fā)性的 TV 應(yīng)用。左邊的 REUTERS TV 搭配使用者的時(shí)間，將新聞重點(diǎn)精選成不同長(zhǎng)度；右邊的健身應(yīng)用可分段進(jìn)行健身訓(xùn)練，符合傳統(tǒng)電視教學(xué)型態(tài)的使用經(jīng)驗(yàn)。
Designing Great Apple Watch Experiences
因?yàn)槲災(zāi)恍。f(shuō)重點(diǎn)
別于 TV 的中距離操作情況，Watch 更貼近使用者，而且它在手腕上震動(dòng)反饋與聲音提醒是短暫且直接的。相對(duì)于其他產(chǎn)品，Watch 的顯示螢?zāi)恍?，每次傳達(dá)資訊的時(shí)間，被限制在抬起到放下手腕的那剎那。因此，如何優(yōu)化從 iPhone 上的復(fù)雜資訊傳遞到手上的過(guò)程就是：去繁就簡(jiǎn) – 以上是 Watch 顯示資訊的要點(diǎn)。
▲ 以資訊型的 App （登機(jī)）通知為例，登機(jī)資訊往往會(huì)伴隨許多次要資訊，選出重要的資訊作為該呈現(xiàn)的通知方式，能夠協(xié)助使用者快速找到資訊重點(diǎn)。右邊為資訊優(yōu)化的設(shè)計(jì)結(jié)果，重要的航班資訊得以一目了然。
▲ 超出螢?zāi)划嬅娴奶鞖釧pp,，雖然可以使用digital crown（表冠）進(jìn)行閱讀，但相對(duì)起左右滑動(dòng)的方式，在顯示資訊上更為快速。
簡(jiǎn)單清晰的icon 傳達(dá)
因?yàn)?Watch 的表面功能（Complication）掌管的資訊類別眾多，可能有天氣、行事歷、運(yùn)動(dòng)的記錄…等。在新的版本的Watch OS 中，使用icon 來(lái)進(jìn)行資訊的分類也是其特色之一，因?yàn)檫@些資訊對(duì)于watch 的傳達(dá)而言，是抬手倏忽之間的，這些icon 設(shè)計(jì)是不宜復(fù)雜的。
▲ 這次 Watch OS 改版的重點(diǎn)，將表面的資訊功能搭配清楚簡(jiǎn)潔的 icon,并定義不同資訊的使用原則。
Typography and Fonts
SF Mono 字體的發(fā)布
在前年 iOS 8 登場(chǎng)時(shí)，發(fā)布的 SF （San Francisco）字型，每年都會(huì)有新的家族成員誕生（例如去年隨 watch 一同而來(lái)的 Compact 版本，就是更為簡(jiǎn)潔化，適合小螢?zāi)?、小字呈現(xiàn)，同時(shí)又能清楚看出拼字的字型）；今年則與主要視覺(jué)相互呼應(yīng)的 SF Mono，這是一套適合程式編寫人員的字體。
▲ 在字體與排印學(xué)的論壇中，發(fā)表了編寫程式用的字體。本次 WWDC 視覺(jué)圖案也是透過(guò)這套字體所組成的。
▲ SF MONO 的特色。字體間的間距都維持一定，在編寫密密麻麻的程式時(shí)能更清晰呈現(xiàn)。
TV 上的Small Cap 應(yīng)用
字體本來(lái)就是為了精確傳達(dá)與閱讀舒適的功能性而存在，而部分的文書規(guī)則會(huì)在這份視覺(jué)閱讀之上，舉例 TV OS 所現(xiàn)的大寫字，在不失整個(gè)閱讀的順暢，就需要使用 Small Cap 來(lái)解決這樣的問(wèn)題。
▲ 在英語(yǔ)系國(guó)家，電視、電影使用大寫字體呈現(xiàn)文字段落中的層級(jí)是一種編排習(xí)慣。但大寫字體在一行文字中，是顯得過(guò)于突兀且難以排版。Small Cap 的字型主要是解決這樣的字體編排問(wèn)題。
Inclusive App Design
字型與編排設(shè)計(jì)
面對(duì)產(chǎn)品要推廣至不同國(guó)家時(shí)，若我們只從自身文化中所熟悉的事物下手，有可能無(wú)法符合該目標(biāo)對(duì)象的需求。
以歐美常用的拉丁文字及其他國(guó)家橫向書寫的文字來(lái)看，我們就可能遇上超過(guò)頂線與底線而產(chǎn)生的編排問(wèn)題，這些超過(guò)頂線或底線的字，是仰賴著這些特征來(lái)被識(shí)別的，為了編排而強(qiáng)行去除特征，則會(huì)無(wú)法被識(shí)別。而保留下來(lái)，則需要重新考量文章行距間的問(wèn)題。
▲ 幾個(gè)橫向書寫的文字。以拉丁字體的字構(gòu)規(guī)范來(lái)看，這些超出頂端或底線的文字，需要另外去考量排版，若為了搭配整體而去掉這些特色會(huì)讓文字難以被判別及閱讀。
▲以文中的泰文為例，若同英文的排版方式，則可能遇到文字相互重疊的情況。因此，視使用情況做行距調(diào)整是作為在地化的推廣要注意的部分。
文化導(dǎo)致的用色差異
文化間的差異，顏色也是其中要注意的。
紅色在中國(guó)可能很能代表喜氣，但在歐洲卻代表著紅色代表著革命，進(jìn)而聯(lián)想到?jīng)_突及暴力。除了 App 本身的設(shè)計(jì)外，文化性的用色也常被考量在推廣上，例如：農(nóng)歷年期間 Apple 會(huì)推廣的活動(dòng)容易以紅色調(diào)為主題，而這些廣告的露出也大部分只針對(duì)大中華地區(qū)的使用者。
▲ 不同的文化對(duì)色彩的解讀不同。有的地方認(rèn)為浪漫、吉祥的顏色，在不同地域會(huì)是帶有負(fù)面的含義。
▲ 華人文化喜歡紅色也展現(xiàn)在股市。美國(guó)的股市上漲以綠色為識(shí)別色，但中國(guó)與臺(tái)灣相同，上漲的顏色為紅色。
因?yàn)樯頎顩r不同而考量的用色情況
除了文化之外，對(duì)于色盲的使用者我們也是需要去考量的。
就以 apple watch 設(shè)計(jì)規(guī)范上，很廣泛的運(yùn)用不同的色彩來(lái)做功能的區(qū)分，運(yùn)動(dòng)計(jì)量的分類色環(huán)就是明顯的例子，但色盲的使用者看到的情況可能會(huì)有所不同?？剂康竭@些情況，對(duì)生理狀況不同的使用者也能區(qū)分傳達(dá)而來(lái)的信息，才得以感受到好的使用體驗(yàn)。
▲ 色盲的使用者眼中看到的顏色與我們的不同。此圖模擬 4 種顏色，若在紅綠色盲者的眼中，僅能區(qū)別出藍(lán)色的差異性。
▲ 透過(guò)色彩作為辨別的 Apple Watch 介面，在設(shè)計(jì)時(shí)也考量到色盲使用者的情況，讓他們還是能夠區(qū)分其計(jì)量間的不同。
后記
文章中整理出來(lái)的只是設(shè)計(jì)論壇中的其中一部分，如果想多方了解的開(kāi)發(fā)者們，不妨也去觀看其他領(lǐng)域的論壇。而文中沒(méi)有特別提到的部分如：設(shè)計(jì)論壇中的Iterative UI Design（迭代的UI 設(shè)計(jì)）以及以程式開(kāi)發(fā)介紹為主的 Waht's New in Acessibility（新的輔助功能）都是能增進(jìn)設(shè)計(jì)非常好的課程內(nèi)容。
整個(gè)WWDC 的內(nèi)容都是非常好的學(xué)習(xí)資源，無(wú)論你是否為開(kāi)發(fā)者的一員，這些都能夠增加你對(duì)使用者介面的進(jìn)一步認(rèn)知。上述的課程都可以透過(guò)Safari 瀏覽器或從App Store 下載專屬app 來(lái)進(jìn)行觀看：
本篇圖片資源出處為
【關(guān)于本篇作者】
Vic Li
UI 設(shè)計(jì)師，也是設(shè)計(jì)大舌頭的好友及特約撰寫， 對(duì)于沒(méi)有 dribbble 邀請(qǐng)碼苦惱中。
可從他的 about.me 個(gè)人頁(yè)了解更多。
設(shè)計(jì)大舌頭是一個(gè)長(zhǎng)期關(guān)注用戶體驗(yàn)相關(guān)（UED）議題的共筆平臺(tái)，包含用戶介面（UI）、互動(dòng)設(shè)計(jì)（Interaction Design）、產(chǎn)品設(shè)計(jì)趨勢(shì)、設(shè)計(jì)專利以及服務(wù)設(shè)計(jì)等，試圖讓更多讀者了解設(shè)計(jì)師們的巧思，并推廣 Design Thinking 的思維，歡迎更多人加入這一個(gè)討論園地。
如果你也喜歡我們的文章，歡迎大家到我的 Blog（設(shè)計(jì)大舌頭）瞧瞧：https://designtongue.me/
談?wù)動(dòng)脩趔w驗(yàn)，聊聊使用者介面
9
作品
325
粉絲
21
關(guān)注
分享能獲取更多贊？
密碼登錄
大牛，別默默的看了，快登錄幫我點(diǎn)評(píng)一下吧！:)
登錄 立即注冊(cè)