中文版來了!UI設(shè)計師必讀的IOS 10人機(jī)界面設(shè)計指南 (一)

1.1 設(shè)計原則(Design Principles)

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

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

清晰(Clarity):

縱觀整個系統(tǒng)鼠渺,任何尺寸的文字都清晰易讀,圖標(biāo)精確易懂眷细,恰當(dāng)且微妙的修飾拦盹,聚焦于功能,一切設(shè)計由功能而驅(qū)動溪椎。留白普舆、顏色、字體校读、圖形以及其它界面元素能夠巧妙地突出重點內(nèi)容并且表達(dá)可交互性沼侣。

遵從(Deference):

流暢的動效和清爽美觀的界面有助于用戶理解內(nèi)容并與之交互,而不會干擾用戶歉秫。當(dāng)前內(nèi)容占據(jù)整屏?xí)r蛾洛,半透明和模糊處理能夠暗示其它更多的內(nèi)容。減少使用邊框雁芙、漸變和陰影讓界面盡可能地輕量化轧膘,從而突出內(nèi)容。

深度(Depth):

清楚的視覺層和生動的動效表達(dá)了層次結(jié)構(gòu)兔甘,賦予了活力谎碍,并有助于理解。

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

要想擴(kuò)大影響力和涉及范圍熔任,在設(shè)計你的獨(dú)特應(yīng)用時,請熟記以下幾點原則:

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

美學(xué)完整性代表了一款應(yīng)用的視覺表象和交互行為與其功能整合的優(yōu)良程度仙蛉。例如笋敞,一款協(xié)助用戶完成重要任務(wù)的應(yīng)用應(yīng)該使用不易察覺且不引人注目的圖形碱蒙、標(biāo)準(zhǔn)化控件和可預(yù)知的交互行為從而讓用戶保持專注荠瘪。反之而言夯巷,一款沉浸式體驗的應(yīng)用(比如游戲),就需要吸引人的視覺表象哀墓,在鼓勵用戶探索的同時帶來無窮的樂趣和刺激趁餐。

一致性(Consistency)

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

直接操作(Direct Manipulation)

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

反饋(Feedback)

反饋認(rèn)證交互行為候学,呈現(xiàn)結(jié)果,并通知用戶纵散。系統(tǒng)自帶的iOS應(yīng)用對每一個用戶行為都提供了明確的反饋梳码。可交互的元素被點擊時會被臨時高亮伍掀,進(jìn)度指示器(progress indicator)顯示了需要長時間運(yùn)轉(zhuǎn)的操作的進(jìn)度掰茶,動效和聲音加強(qiáng)了對行為結(jié)果的提示。

隱喻(Metaphors)

當(dāng)一個應(yīng)用的虛擬對象和行為與用戶熟悉的體驗相似時——無論這種體驗是來源于現(xiàn)實生活或是數(shù)字世界蜜笤,用戶就能更快速地學(xué)會使這款應(yīng)用濒蒋。隱喻在iOS中能夠起作用是因為用戶與屏幕進(jìn)行物理上的交互。他們通過將視圖移出屏幕來顯示下方的內(nèi)容把兔,他們拖曳(drag)和滑動(swipe)對象啊胶,他們撥動(toggle)開關(guān),移動(move)滑塊垛贤,滾動(scroll)數(shù)值選擇器焰坪,他們甚至通過輕掃(flick)來翻閱書籍和雜志。

用戶控制(User control)

在iOS內(nèi)部聘惦,是用戶——而不是應(yīng)用——在控制某饰。應(yīng)用可以對一系列用戶行為提供建議,或?qū)赡茉斐蓢?yán)重后果的行為發(fā)出警告善绎,但不應(yīng)該替用戶做決定黔漂。好的應(yīng)用會在讓用戶主導(dǎo)和避免不想要的結(jié)果中找到平衡。為了讓用戶感覺到是他們在控制禀酱,應(yīng)用應(yīng)該使用熟悉且可預(yù)知的交互元素炬守,讓用戶二次確定有破壞性的行為,并且讓即使在運(yùn)行中的操作也能夠被輕易取消剂跟。

1.2 iOS 10 新特征介紹

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

nw2016063044

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

Widget 提供即時且有用的信息辽剧,或是應(yīng)用特有的一些無需打開應(yīng)有就能使用的功能。在過去税产,用戶在消息中心添加widgets當(dāng)作快速入口∨陆危現(xiàn)在,用戶在搜索屏幕添加widgets辟拷,用戶可通過在主屏或是鎖屏右滑進(jìn)入搜索屏幕撞羽。你也可以在主屏通過3D Touch觸發(fā)的某個應(yīng)用的快捷操作菜單(quick action list)上方添加widget。Widget的設(shè)計和交互方式也改變了衫冻。請注意更新你現(xiàn)有的設(shè)計放吩。


與Messages的聯(lián)動

應(yīng)用可以通過執(zhí)行一種出現(xiàn)在對話下方的messaging插件讓用戶與朋友分享來自該應(yīng)用的內(nèi)容。應(yīng)用可以通過Message分享文字羽杰,圖片渡紫,視頻,貼紙考赛,甚至可交互的內(nèi)容惕澎,譬如信息內(nèi)的游戲。


與Siri的聯(lián)動

應(yīng)用能夠與Siri聯(lián)動颜骤,從而讓用戶使用聲音來執(zhí)行相應(yīng)的應(yīng)用操作唧喉,譬如打電話、發(fā)短信和開始鍛煉忍抽。

nw2016063041

可拓展的通知欄

你可以通過拓展詳情視圖來強(qiáng)化你的通知欄八孝,用戶可以在未鎖屏狀態(tài)下通過3D Touch功能點擊或是下滑你的通知來打開拓展視圖。使用這種視圖能夠讓用戶快速瀏覽更多信息鸠项,并允許他們在不離開當(dāng)前界面的情況下對該消息進(jìn)行快速操作干跛。

1.3 界面基本元素

大多數(shù)的iOS應(yīng)用使用了來自UIKit的部件,這是一個定義了基本界面元素的編程框架祟绊。這個框架讓各種應(yīng)用在視覺上達(dá)到一致的同時還提供了高度的個性化楼入。UIKit元素是靈活且常見的。它們是可適配的牧抽,讓你能夠設(shè)計一個在任何iOS設(shè)備上都看起來很棒的應(yīng)用嘉熊,而且能夠在系統(tǒng)發(fā)布新版本的時候自動更新。由UIKit提供的界面元素可以分為以下三種:

欄:

告知用戶現(xiàn)在在應(yīng)用的哪里扬舒,提供導(dǎo)航阐肤,而且還可能包含按鈕或者其它用來觸發(fā)功能和交流信息的元素。

視圖:

包含用戶在應(yīng)用內(nèi)最關(guān)注的信息讲坎,例如文本孕惜、圖形愧薛、動畫和交互元素。視圖允例如滾動诊赊、插入、刪除和排列之類的行為府瞄。

控件:

觸發(fā)功能和傳遞信息碧磅。控件包括按鈕遵馆、開關(guān)鲸郊、輸入框和進(jìn)度指示器。

為了進(jìn)一步定義iOS界面货邓,UIKit規(guī)定了你的應(yīng)用能夠采用的功能秆撮。通過這個框架,你的應(yīng)用可以對觸摸屏上的手勢作出應(yīng)答换况,還可以包含一些例如繪畫职辨、輔助和打印的功能。

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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末觉吭,一起剝皮案震驚了整個濱河市腾供,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌鲜滩,老刑警劉巖伴鳖,帶你破解...
    沈念sama閱讀 217,657評論 6 505
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異徙硅,居然都是意外死亡榜聂,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,889評論 3 394
  • 文/潘曉璐 我一進(jìn)店門嗓蘑,熙熙樓的掌柜王于貴愁眉苦臉地迎上來峻汉,“玉大人,你說我怎么就攤上這事脐往⌒莘停” “怎么了?”我有些...
    開封第一講書人閱讀 164,057評論 0 354
  • 文/不壞的土叔 我叫張陵业簿,是天一觀的道長瘤礁。 經(jīng)常有香客問我,道長梅尤,這世上最難降的妖魔是什么柜思? 我笑而不...
    開封第一講書人閱讀 58,509評論 1 293
  • 正文 為了忘掉前任岩调,我火速辦了婚禮,結(jié)果婚禮上赡盘,老公的妹妹穿的比我還像新娘号枕。我一直安慰自己,他們只是感情好陨享,可當(dāng)我...
    茶點故事閱讀 67,562評論 6 392
  • 文/花漫 我一把揭開白布葱淳。 她就那樣靜靜地躺著,像睡著了一般抛姑。 火紅的嫁衣襯著肌膚如雪赞厕。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,443評論 1 302
  • 那天定硝,我揣著相機(jī)與錄音皿桑,去河邊找鬼。 笑死蔬啡,一個胖子當(dāng)著我的面吹牛诲侮,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播箱蟆,決...
    沈念sama閱讀 40,251評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼浆西,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了顽腾?” 一聲冷哼從身側(cè)響起近零,我...
    開封第一講書人閱讀 39,129評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎抄肖,沒想到半個月后久信,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,561評論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡漓摩,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,779評論 3 335
  • 正文 我和宋清朗相戀三年裙士,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片管毙。...
    茶點故事閱讀 39,902評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡腿椎,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出夭咬,到底是詐尸還是另有隱情啃炸,我是刑警寧澤,帶...
    沈念sama閱讀 35,621評論 5 345
  • 正文 年R本政府宣布卓舵,位于F島的核電站南用,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜裹虫,卻給世界環(huán)境...
    茶點故事閱讀 41,220評論 3 328
  • 文/蒙蒙 一肿嘲、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧筑公,春花似錦雳窟、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,838評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至耸采,卻和暖如春兴泥,著一層夾襖步出監(jiān)牢的瞬間工育,已是汗流浹背虾宇。 一陣腳步聲響...
    開封第一講書人閱讀 32,971評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留如绸,地道東北人嘱朽。 一個月前我還...
    沈念sama閱讀 48,025評論 2 370
  • 正文 我出身青樓,卻偏偏與公主長得像怔接,于是被迫代替她去往敵國和親搪泳。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,843評論 2 354

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