iOS11人機交互指南(五)- 視覺設(shè)計(Visual Design)- 下

四层玲、顏色(Color)

顏色是增加活力塘淑、提供視覺的連續(xù)性萝招、傳達狀態(tài)信息、反饋用戶的行為并幫助用戶將數(shù)據(jù)可視化的好方式存捺。在挑選應(yīng)用色調(diào)的顏色時槐沼,請參考系統(tǒng)的色彩方案,以保證這些顏色無論是單獨還是組合捌治、在淺色背景還是深色背景上都看起來很棒岗钩。

明智地使用顏色進行溝通。 謹(jǐn)慎少量使用顏色以喚起對重要信息的注意力肖油。 例如凹嘲,當(dāng)出于非關(guān)鍵原因在應(yīng)用程序中的其他地方使用紅色時,警告人們出現(xiàn)嚴(yán)重問題的紅色三角形會變得不那么有效构韵。

在應(yīng)用內(nèi)使用互補的顏色周蹭。你的應(yīng)用內(nèi)的顏色應(yīng)該和諧共處,不會互相沖突和干擾疲恢。如果你的應(yīng)用風(fēng)格的基礎(chǔ)色調(diào)是柔和的凶朗,那么使用一系列與之協(xié)調(diào)的柔和色調(diào)。

一般來說显拳,選擇與你的應(yīng)用logo相符的顏色數(shù)量有限的色板棚愤。巧妙地使用顏色是一個傳達品牌的好辦法。

考慮在應(yīng)用中統(tǒng)一使用一種關(guān)鍵色來暗示交互性杂数。在Note中宛畦,可交互的元素是黃色的。在Calendar中揍移,可交互的元素是紅色的次和。如果你定義了一種關(guān)鍵色用于傳遞可交互性,那么你要保證其它顏色不會與之沖突那伐。

避免給可交互和不可交互的元素使用相同的顏色踏施。如果可交互和不可交互的元素是同一種顏色,用戶就很難知道到底哪里是可點擊的罕邀。

可交互和不可交互元素

考慮插圖和半透明對顏色的影響畅形。變換插圖有時也要變換附近的顏色,以保持視覺的連續(xù)性诉探,并防止界面元素變得過于強大或平庸日熬。例如,地圖在使用地圖模式時顯示亮色肾胯,但當(dāng)啟用衛(wèi)星模式時會切換到暗色調(diào)模式竖席。顏色在半透明元素之下和之上(比如工具欄)都會看起來很不一樣。

?左:光線較亮阳液;右:光線較暗

在多種光線條件下測試你的應(yīng)用顏色方案怕敬。光線會在室內(nèi)和室外、房間氛圍帘皿、不同的時間东跪、氣候等條件下明顯地變化。你的應(yīng)用在現(xiàn)實世界中使用時看到的顏色不會一直和你在電腦上看到的顏色相同鹰溜。你應(yīng)該在不同的光線條件下預(yù)覽你的應(yīng)用來觀察顏色的真實表現(xiàn)虽填,比如在晴朗的戶外。必要時曹动,應(yīng)當(dāng)調(diào)整顏色以求在大多數(shù)的使用場景下提供最好的視覺體驗斋日。

考慮True Tone顯示屏對顏色的影響。True Tone顯示屏利用了環(huán)境光傳感器來自動調(diào)整顯示屏的白點墓陈,以適應(yīng)當(dāng)前環(huán)境下的光線情況恶守。專注于閱讀第献、照片、視頻和游戲的應(yīng)用可以通過確定一種白點糾正模式來強化或弱化True Tone 的效果兔港。開發(fā)指導(dǎo)請查閱?Information Property List Key Reference庸毫。

注意色盲。例如衫樊,很多色盲用戶很難分辨紅色和綠色(以及任何顏色和灰色)飒赃,或是藍(lán)色和橘色。避免把這些顏色組合作為區(qū)分兩種狀態(tài)或值的唯一方式科侈。例如载佳,用紅色方塊和綠色圓形來表示下線和上線狀態(tài),而不是用紅色圓形和綠色圓形臀栈。有些圖形編輯軟件含有能夠幫助你證明你是否是色盲的工具蔫慧。

左: 非色盲所見 ;右: 紅綠色盲所見

考慮你在其他國家和文化中如何使用顏色挂脑。例如藕漱,在某些文化里,紅色用來表示危險崭闲;但在另一些文化里肋联,紅色又有著積極的含義。請確保在你的應(yīng)用中的顏色傳達了恰當(dāng)?shù)挠嵪ⅰ?/p>

使用足夠的顏色對比度刁俭。在應(yīng)用中橄仍,過低的對比度會讓內(nèi)容難以閱讀。比如牍戚,圖標(biāo)和文本可能會和背景相融合侮繁。在線的顏色對比度計算器能夠幫助你精確的分析應(yīng)用中的顏色對比度,以確保它符合最佳標(biāo)準(zhǔn)如孝。請確保你的應(yīng)用對比度至少達到4.5:1,但是7:1更好宪哩,因為它符合更加嚴(yán)格的輔助功能標(biāo)準(zhǔn)。

色彩管理

將顏色配置應(yīng)用到你的圖像中第晰。iOS默認(rèn)顏色空間為標(biāo)準(zhǔn)RGB(sRGB)锁孟。為了確保應(yīng)用的顏色與此顏色空間匹配正確,請確保圖像包含嵌入的顏色配置文件茁瘦。

使用 P3 色彩空間增強廣色域屏幕體驗品抽。iOS 設(shè)備的廣色域屏幕支持 P3 色彩空間,顏色比 sRGB 更豐富甜熔,更飽滿圆恤。因此使用 P3 色彩空間的照片和視頻更加逼真,視覺數(shù)據(jù)和狀態(tài)指示更具沖擊力腔稀。適當(dāng)時盆昙,使用 P3 顏色配置文件(每通道16位)羽历,并以 .png 格式導(dǎo)出圖像。請注意淡喜,需要支持 P3 顏色配置文件的顯示器才能設(shè)計相匹配的顏色窄陡。

當(dāng)體驗需要時提供顏色空間特定的圖像和顏色變化。一般來說拆火,P3 顏色空間和圖片傾向于在 sRGB 設(shè)備中使用。然而涂圆,有時很難區(qū)分sRGB 設(shè)備中兩個非常相似顏色的差異们镜, P3 顏色的漸變效果也有時會在 sRGB 上會出現(xiàn)色帶。為了避免這些問題润歉,可以在 Xcode 的資源目錄中提供不同色彩標(biāo)準(zhǔn)的圖像模狭,確保 sRGB 和 P3 屏幕上色彩還原度。

在 sRGB 和 P3 屏幕上都預(yù)覽顏色踩衩。根據(jù)需要進行調(diào)整嚼鹉,以確保在兩種類型的屏幕上有同樣很好的視覺效果。

提示:在P3屏幕的Mac上驱富,您可以使用系統(tǒng)顏色選擇器來選擇和預(yù)覽P3顏色锚赤,并將其與sRGB顏色進行比較。

五褐鸥、術(shù)語(Terminology)

應(yīng)用中的每個用詞都是與用戶進行交流的一部分线脚,讓用戶在使用應(yīng)用中感到舒適。

用詞應(yīng)熟悉且好理解叫榕。專業(yè)技術(shù)術(shù)語可能會嚇到用戶浑侥。要避免使用用戶可能不了解的技術(shù)術(shù)語和相關(guān)縮寫。如果了解受眾晰绎,可以衡量某些詞語或是否得當(dāng)寓落。一般來說,受人喜愛的應(yīng)用會避開高度技術(shù)性用語荞下,它們只適用于先進或技術(shù)人群伶选。

確保界面文字清晰簡潔。用戶能快速锄弱、輕松地理解簡短文本考蕾,而且不喜歡被迫閱讀長段落來完成任務(wù)。簡明扼要地表達最重要的信息会宪,并突出顯現(xiàn)肖卧,以便用戶不必閱讀太多,就能找到他們需要的內(nèi)容掸鹅,或弄清楚下一步該怎樣做塞帐。

恰當(dāng)確定交互元素拦赠。用戶應(yīng)能一目了然地了解某個元素的作用,必要時應(yīng)配上說明文字葵姥,建議使用動詞荷鼠,如連接、發(fā)送榔幸、添加允乐。

避免歧義。避免使用我們削咆、我們的牍疏、我、我的(例如“我們的教程”和“我的鍛煉”)拨齐。用戶有時會理解為一種侮辱或高人一等的態(tài)度鳞陨。

善用友好語調(diào)。使用一種非正式且平易近人的語調(diào)瞻惋,類似于在午餐時與他人交談的方式厦滤。可以適時用謙卑的語調(diào)歼狼,如使用 “您” 作為尊稱掏导。

謹(jǐn)慎幽默。請記住蹂匹,用戶很可能會在界面中閱讀文本內(nèi)容碘菜,使用幽默的句式最初看起來可能很討喜,但隨著時間的推移用戶會對這種這法變得惱怒限寞。還要記住忍啸,一種文化中的幽默不一定在其他文化中被理解。

使用與設(shè)備一致的描述履植。始終確保內(nèi)容能夠指導(dǎo)用戶计雌。例如,當(dāng)用戶使用 iPad 時玫霎,不會顯示 iPhone 的圖像凿滤。用詞也要和平臺一致,點擊庶近、清掃翁脆、滑動、擠壓和拖放觸摸屏內(nèi)容鼻种,按住 Home 鍵反番,使用 3D Touch ,旋轉(zhuǎn)并搖動設(shè)備。

準(zhǔn)確的參考日期罢缸。使用“今天”和“明天”這種友好的描述是合適的篙贸,但要是不考慮語境,這些術(shù)語可能會令用戶困惑甚至誤解枫疆。假設(shè)一個在午夜之前開始的事件爵川,在一個時區(qū)可能從今天開始,在另一個時區(qū)可能在昨天就已開始息楔。一般來說寝贡,日期是以用戶所在時區(qū)確定的。但用戶所在時區(qū)也會變化值依,例如在航班類應(yīng)用中兔甘,明確顯示飛行起始日期和時區(qū)會更為明確。

六鳞滨、字體排印(Typography)

舊金山(SF)是iOS中的系統(tǒng)字體蟆淀。這個字體類型已優(yōu)化來使不匹配文本易讀拯啦、清晰和一致。從?here下載舊金山字體系列熔任。

強調(diào)重要信息褒链。通過利用字體的粗細(xì)、大小和顏色來突出你應(yīng)用程序中最重要的信息疑苔。

盡可能使用單一字體甫匹。混合幾種不同的字體可能使你的應(yīng)用程序顯得支離破碎和草率〉敕眩考慮使用單一字體兵迅,并使用此字體的一些變體和大小。

盡可能使用內(nèi)置的文本樣式薪贫。內(nèi)置的文本樣式讓您以直觀的方式表達內(nèi)容恍箭,同時保持最佳的可讀性。這些樣式基于系統(tǒng)字體瞧省,并允許您利用關(guān)鍵的排版特性扯夭,例如動態(tài)類型,它會自動調(diào)整跟蹤并引導(dǎo)每個字體大小鞍匾。iOS包括以下文字類型:.

開發(fā)指導(dǎo)請參閱?UIFontTextStyle交洗。

確保自定義字體是易讀的。iOS支持自定義字體橡淑,但通常很難閱讀构拳。除非你的應(yīng)用程序?qū)ψ远x字體有強烈的需求概疆,比如為了品牌目的,或者為了創(chuàng)建一個沉浸式的游戲體驗冰啃,否則最好還是堅持使用系統(tǒng)字體绩脆。如果您使用自定義字體,請確保它易于閱讀(即使是小尺寸)暇藏。

實現(xiàn)自定義字體的可訪問特性蜜笤。系統(tǒng)字體會自動對可訪問性特性做出反應(yīng),比如粗體文本和較大樣式盐碱。使用自定義字體的應(yīng)用程序應(yīng)該通過檢查是否啟用了可訪問性特性并在更改時注冊通知來實現(xiàn)相同的行為把兔。請參閱 Accessibility

動態(tài)類型大小

舊金山字體設(shè)計得在大字體和小字體上都易讀瓮顽。動態(tài)類型讓讀者選擇他們喜歡的文本大小县好,這樣提供了更多的靈活性∨欤可以在?Resources 中下載動態(tài)類型大小表缕贡。

在響應(yīng)文本大小的變化時優(yōu)先考慮內(nèi)容。并非所有內(nèi)容都同樣重要拣播。當(dāng)有人選擇更大的尺寸時晾咪,他們想要使他們關(guān)心的內(nèi)容更容易閱讀;他們并不總是希望屏幕上的每一個字都更大贮配。

更大的可訪問性類型

除了標(biāo)準(zhǔn)的動態(tài)類型大小之外谍倦,該系統(tǒng)還為具有可訪問性需求的用戶提供了一些更大的字體類型。

字體的使用和跟蹤

在接口模型中使用正確的字體變體泪勒。當(dāng)你在標(biāo)準(zhǔn)控件(如按鈕和標(biāo)簽)中使用舊金山的文本時昼蛀,iOS會根據(jù)點大小和用戶的可訪問性設(shè)置自動應(yīng)用最適當(dāng)?shù)淖凅w。在接口模型中圆存,使用SF Pro Text則文本大小為19點或更小叼旋,使用SF Pro Display則文本大小為20點或更大,并適當(dāng)調(diào)整字母間距沦辙。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末送淆,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子怕轿,更是在濱河造成了極大的恐慌偷崩,老刑警劉巖,帶你破解...
    沈念sama閱讀 219,270評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件撞羽,死亡現(xiàn)場離奇詭異阐斜,居然都是意外死亡,警方通過查閱死者的電腦和手機诀紊,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,489評論 3 395
  • 文/潘曉璐 我一進店門谒出,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事笤喳∥樱” “怎么了?”我有些...
    開封第一講書人閱讀 165,630評論 0 356
  • 文/不壞的土叔 我叫張陵杀狡,是天一觀的道長蒙畴。 經(jīng)常有香客問我,道長呜象,這世上最難降的妖魔是什么膳凝? 我笑而不...
    開封第一講書人閱讀 58,906評論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮恭陡,結(jié)果婚禮上蹬音,老公的妹妹穿的比我還像新娘。我一直安慰自己休玩,他們只是感情好著淆,可當(dāng)我...
    茶點故事閱讀 67,928評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著拴疤,像睡著了一般牧抽。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上遥赚,一...
    開封第一講書人閱讀 51,718評論 1 305
  • 那天,我揣著相機與錄音阐肤,去河邊找鬼凫佛。 笑死,一個胖子當(dāng)著我的面吹牛孕惜,可吹牛的內(nèi)容都是我干的愧薛。 我是一名探鬼主播,決...
    沈念sama閱讀 40,442評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼衫画,長吁一口氣:“原來是場噩夢啊……” “哼毫炉!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起削罩,我...
    開封第一講書人閱讀 39,345評論 0 276
  • 序言:老撾萬榮一對情侶失蹤瞄勾,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后弥激,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體进陡,經(jīng)...
    沈念sama閱讀 45,802評論 1 317
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,984評論 3 337
  • 正文 我和宋清朗相戀三年微服,在試婚紗的時候發(fā)現(xiàn)自己被綠了趾疚。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,117評論 1 351
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖糙麦,靈堂內(nèi)的尸體忽然破棺而出辛孵,到底是詐尸還是另有隱情,我是刑警寧澤赡磅,帶...
    沈念sama閱讀 35,810評論 5 346
  • 正文 年R本政府宣布魄缚,位于F島的核電站,受9級特大地震影響仆邓,放射性物質(zhì)發(fā)生泄漏鲜滩。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,462評論 3 331
  • 文/蒙蒙 一节值、第九天 我趴在偏房一處隱蔽的房頂上張望徙硅。 院中可真熱鬧,春花似錦搞疗、人聲如沸嗓蘑。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,011評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽桩皿。三九已至,卻和暖如春幢炸,著一層夾襖步出監(jiān)牢的瞬間泄隔,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,139評論 1 272
  • 我被黑心中介騙來泰國打工宛徊, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留佛嬉,地道東北人。 一個月前我還...
    沈念sama閱讀 48,377評論 3 373
  • 正文 我出身青樓闸天,卻偏偏與公主長得像暖呕,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子苞氮,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,060評論 2 355

推薦閱讀更多精彩內(nèi)容