【譯文】iOS 10 人機(jī)界面指南 (一)

1.?概覽(Overview)

1.1設(shè)計(jì)原則(Design?Principles)

作為一名移動(dòng)應(yīng)用設(shè)計(jì)師,意味你有機(jī)會(huì)發(fā)布一款具有殺傷力的產(chǎn)品能夠登上蘋(píng)果商店的榜首满败。為了實(shí)現(xiàn)這個(gè)目標(biāo)樊破,你的產(chǎn)品必須在質(zhì)量和功能上達(dá)到高標(biāo)準(zhǔn)茅信。

以下三大原則讓iOS系統(tǒng)有別于其它平臺(tái):

清晰(Clarity):縱觀(guān)整個(gè)系統(tǒng),任何尺寸的文字都清晰易讀捍靠,圖標(biāo)精確易懂,恰當(dāng)且微妙的修飾森逮,聚焦于功能榨婆,一切設(shè)計(jì)由功能而驅(qū)動(dòng)。留白褒侧、顏色良风、字體、圖形以及其它界面元素能夠巧妙地突出重點(diǎn)內(nèi)容并且表達(dá)可交互性璃搜。

遵從(Deference):流暢的動(dòng)效和清爽美觀(guān)的界面有助于用戶(hù)理解內(nèi)容并與之交互拖吼,而不會(huì)干擾用戶(hù)。當(dāng)前內(nèi)容占據(jù)整屏?xí)r这吻,半透明和模糊處理能夠暗示其它更多的內(nèi)容吊档。減少使用邊框、漸變和陰影讓界面盡可能地輕量化唾糯,從而突出內(nèi)容怠硼。

深度(Depth):清楚的視覺(jué)層和生動(dòng)的動(dòng)效表達(dá)了層次結(jié)構(gòu),賦予了活力移怯,并有助于理解香璃。

易于發(fā)現(xiàn)的且可觸發(fā)的界面元素能提升體驗(yàn)愉悅感,讓用戶(hù)在成功觸發(fā)相應(yīng)功能或者獲得更多內(nèi)容的同時(shí)還能掌控當(dāng)前位置的來(lái)龍去脈舟误。當(dāng)用戶(hù)瀏覽內(nèi)容時(shí)葡秒,流暢的過(guò)渡提供一種縱深感。

要想擴(kuò)大影響力和涉及范圍嵌溢,在設(shè)計(jì)你的獨(dú)特應(yīng)用時(shí)眯牧,請(qǐng)熟記以下幾點(diǎn)原則:

美學(xué)完整性(Aesthetic?Integrity)

美學(xué)完整性代表了一款應(yīng)用的視覺(jué)表象和交互行為與其功能整合的優(yōu)良程度。例如赖草,一款協(xié)助用戶(hù)完成重要任務(wù)的應(yīng)用應(yīng)該使用不易察覺(jué)且不引人注目的圖形学少、標(biāo)準(zhǔn)化控件和可預(yù)知的交互行為從而讓用戶(hù)保持專(zhuān)注。反之而言秧骑,一款沉浸式體驗(yàn)的應(yīng)用(比如游戲)版确,就需要吸引人的視覺(jué)表象,在鼓勵(lì)用戶(hù)探索的同時(shí)帶來(lái)無(wú)窮的樂(lè)趣和刺激乎折。

一致性(Consistency)

一款內(nèi)部一致的應(yīng)用能夠貫徹相同的標(biāo)準(zhǔn)和規(guī)范:使用系統(tǒng)提供的界面元素绒疗、風(fēng)格統(tǒng)一(眾所周知)的圖標(biāo)、標(biāo)準(zhǔn)的字體樣式和一致的措辭骂澄。應(yīng)用所包含的特征和交互行為是符合用戶(hù)心理預(yù)期的忌堂。

直接操作(Direct?Manipulation)

對(duì)屏幕上的對(duì)象直接操作(而不是通過(guò)一堆控件)能夠提升用戶(hù)的參與度并有助于理解。直接操作指包括用戶(hù)旋轉(zhuǎn)設(shè)備或者使用手勢(shì)控制屏幕上的對(duì)象酗洒。通過(guò)直接操作士修,他們的交互行為能夠得到即時(shí)可視的反饋。

反饋(Feedback)

反饋認(rèn)證交互行為樱衷,呈現(xiàn)結(jié)果棋嘲,并通知用戶(hù)。系統(tǒng)自帶的iOS應(yīng)用對(duì)每一個(gè)用戶(hù)行為都提供了明確的反饋矩桂》幸疲可交互的元素被點(diǎn)擊時(shí)會(huì)被臨時(shí)高亮,進(jìn)度指示器(progress?indicator)顯示了需要長(zhǎng)時(shí)間運(yùn)轉(zhuǎn)的操作的進(jìn)度侄榴,動(dòng)效和聲音加強(qiáng)了對(duì)行為結(jié)果的提示雹锣。

隱喻(Metaphors)

當(dāng)一個(gè)應(yīng)用的虛擬對(duì)象和行為與用戶(hù)熟悉的體驗(yàn)相似時(shí)——無(wú)論這種體驗(yàn)是來(lái)源于現(xiàn)實(shí)生活或是數(shù)字世界,用戶(hù)就能更快速地學(xué)會(huì)使這款應(yīng)用癞蚕。隱喻在iOS中能夠起作用是因?yàn)橛脩?hù)與屏幕進(jìn)行物理上的交互蕊爵。他們通過(guò)將視圖移出屏幕來(lái)顯示下方的內(nèi)容,他們拖曳(drag)和滑動(dòng)(swipe)對(duì)象桦山,他們撥動(dòng)(toggle)開(kāi)關(guān)攒射,移動(dòng)(move)滑塊,滾動(dòng)(scroll)數(shù)值選擇器恒水,他們甚至通過(guò)輕掃(flick)來(lái)翻閱書(shū)籍和雜志会放。

用戶(hù)控制(User?control)

在iOS內(nèi)部,是用戶(hù)——而不是應(yīng)用——在控制钉凌。應(yīng)用可以對(duì)一系列用戶(hù)行為提供建議咧最,或?qū)赡茉斐蓢?yán)重后果的行為發(fā)出警告,但不應(yīng)該替用戶(hù)做決定御雕。好的應(yīng)用會(huì)在讓用戶(hù)主導(dǎo)和避免不想要的結(jié)果中找到平衡矢沿。為了讓用戶(hù)感覺(jué)到是他們?cè)诳刂疲瑧?yīng)用應(yīng)該使用熟悉且可預(yù)知的交互元素饮笛,讓用戶(hù)二次確定有破壞性的行為咨察,并且讓即使在運(yùn)行中的操作也能夠被輕易取消。

1.2?Ios?10?新特征介紹

在iOS?10福青,你可以創(chuàng)造前所未有的更強(qiáng)大的應(yīng)用摄狱。當(dāng)你瀏覽這些新改變并在思考他們將如何幫助你的應(yīng)用時(shí),請(qǐng)?zhí)貏e關(guān)注設(shè)計(jì)指南无午。

搜索屏幕和主屏幕的窗口控件(widget)

Widget?提供即時(shí)且有用的信息媒役,或是應(yīng)用特有的一些無(wú)需打開(kāi)應(yīng)有就能使用的功能。在過(guò)去宪迟,用戶(hù)在消息中心添加widgets當(dāng)作快速入口『ㄖ裕現(xiàn)在,用戶(hù)在搜索屏幕添加widgets次泽,用戶(hù)可通過(guò)在主屏或是鎖屏右滑進(jìn)入搜索屏幕穿仪。你也可以在主屏通過(guò)3D?Touch觸發(fā)的某個(gè)應(yīng)用的快捷操作菜單(quick?action?list)上方添加widget席爽。Widget的設(shè)計(jì)和交互方式也改變了。請(qǐng)注意更新你現(xiàn)有的設(shè)計(jì)啊片。

與Messages的聯(lián)動(dòng)

應(yīng)用可以通過(guò)執(zhí)行一種出現(xiàn)在對(duì)話(huà)下方的messaging插件讓用戶(hù)與朋友分享來(lái)自該應(yīng)用的內(nèi)容只锻。應(yīng)用可以通過(guò)Message分享文字,圖片紫谷,視頻齐饮,貼紙,甚至可交互的內(nèi)容笤昨,譬如信息內(nèi)的游戲祖驱。

與Siri的聯(lián)動(dòng)

應(yīng)用能夠與Siri聯(lián)動(dòng),從而讓用戶(hù)使用聲音來(lái)執(zhí)行相應(yīng)的應(yīng)用操作瞒窒,譬如打電話(huà)捺僻、發(fā)短信和開(kāi)始鍛煉。

可拓展的通知欄

你可以通過(guò)拓展詳情視圖來(lái)強(qiáng)化你的通知欄根竿,用戶(hù)可以在未鎖屏狀態(tài)下通過(guò)3D?Touch功能點(diǎn)擊或是下滑你的通知來(lái)打開(kāi)拓展視圖陵像。使用這種視圖能夠讓用戶(hù)快速瀏覽更多信息,并允許他們?cè)诓浑x開(kāi)當(dāng)前界面的情況下對(duì)該消息進(jìn)行快速操作寇壳。

1.3?界面基本元素

大多數(shù)的iOS應(yīng)用使用了來(lái)自UIKit的部件醒颖,這是一個(gè)定義了通用界面元素的編程框架。這個(gè)框架讓各種應(yīng)用在視覺(jué)上達(dá)到一致的同時(shí)還提供了高度的個(gè)性化壳炎。UIKit元素是靈活且常用的泞歉。它們是可適配的,讓你能夠設(shè)計(jì)一個(gè)在任何iOS設(shè)備上都看起來(lái)很棒的應(yīng)用匿辩,而且能夠在系統(tǒng)發(fā)布新版本的時(shí)候自動(dòng)更新腰耙。由UIKit提供的界面元素可以分為以下三種:

欄:告知用戶(hù)現(xiàn)在在應(yīng)用的哪里,提供導(dǎo)航铲球,而且還可能包含按鈕或者其它用來(lái)觸發(fā)功能和交流信息的元素挺庞。

視圖:包含用戶(hù)在應(yīng)用內(nèi)最關(guān)注的信息,例如文本稼病、圖形选侨、動(dòng)畫(huà)和交互元素。視圖允例如滾動(dòng)然走、插入援制、刪除和排列之類(lèi)的行為。

控件:觸發(fā)功能和傳遞信息芍瑞〕柯兀控件包括按鈕、開(kāi)關(guān)、輸入框和進(jìn)度指示器洪己。

為了進(jìn)一步定義iO界面妥凳,UIKit規(guī)定了你的應(yīng)用能夠采用的功能。通過(guò)這個(gè)框架码泛,你的應(yīng)用可以對(duì)觸摸屏上的手勢(shì)作出應(yīng)答猾封,還可以包含一些例如繪畫(huà)、輔助和打印的功能噪珊。

iOS也和其他編程框架和技術(shù)緊密結(jié)合,譬如Apple?Pay,?HealthKit和ResearcKit,?它幫助你設(shè)計(jì)出一個(gè)強(qiáng)大地驚人的應(yīng)用齐莲。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末痢站,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子选酗,更是在濱河造成了極大的恐慌阵难,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,378評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件芒填,死亡現(xiàn)場(chǎng)離奇詭異呜叫,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)殿衰,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,356評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門(mén)朱庆,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人闷祥,你說(shuō)我怎么就攤上這事娱颊。” “怎么了凯砍?”我有些...
    開(kāi)封第一講書(shū)人閱讀 152,702評(píng)論 0 342
  • 文/不壞的土叔 我叫張陵箱硕,是天一觀(guān)的道長(zhǎng)。 經(jīng)常有香客問(wèn)我悟衩,道長(zhǎng)剧罩,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 55,259評(píng)論 1 279
  • 正文 為了忘掉前任座泳,我火速辦了婚禮惠昔,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘钳榨。我一直安慰自己舰罚,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,263評(píng)論 5 371
  • 文/花漫 我一把揭開(kāi)白布薛耻。 她就那樣靜靜地躺著营罢,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上饲漾,一...
    開(kāi)封第一講書(shū)人閱讀 49,036評(píng)論 1 285
  • 那天蝙搔,我揣著相機(jī)與錄音,去河邊找鬼考传。 笑死吃型,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的僚楞。 我是一名探鬼主播勤晚,決...
    沈念sama閱讀 38,349評(píng)論 3 400
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼泉褐!你這毒婦竟也來(lái)了赐写?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 36,979評(píng)論 0 259
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤膜赃,失蹤者是張志新(化名)和其女友劉穎挺邀,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體跳座,經(jīng)...
    沈念sama閱讀 43,469評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡端铛,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,938評(píng)論 2 323
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了疲眷。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片禾蚕。...
    茶點(diǎn)故事閱讀 38,059評(píng)論 1 333
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖咪橙,靈堂內(nèi)的尸體忽然破棺而出夕膀,到底是詐尸還是另有隱情,我是刑警寧澤美侦,帶...
    沈念sama閱讀 33,703評(píng)論 4 323
  • 正文 年R本政府宣布产舞,位于F島的核電站,受9級(jí)特大地震影響菠剩,放射性物質(zhì)發(fā)生泄漏易猫。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,257評(píng)論 3 307
  • 文/蒙蒙 一具壮、第九天 我趴在偏房一處隱蔽的房頂上張望准颓。 院中可真熱鬧,春花似錦棺妓、人聲如沸攘已。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,262評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)样勃。三九已至吠勘,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間峡眶,已是汗流浹背剧防。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 31,485評(píng)論 1 262
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留辫樱,地道東北人峭拘。 一個(gè)月前我還...
    沈念sama閱讀 45,501評(píng)論 2 354
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像狮暑,于是被迫代替她去往敵國(guó)和親鸡挠。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,792評(píng)論 2 345

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