譯文 | iOS 10 人機界面設(shè)計指南 (一)

2 評論 48710 瀏覽 195 收藏 10 分鐘

iOS10發(fā)布了,蘋果遵循了一切從簡但又增加了一些提升用戶體驗的功能,比如向開發(fā)者開放了更多接口,設(shè)計者又如何跟隨iOS的步伐做好產(chǎn)品設(shè)計呢?

1.?概覽(Overview)

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

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

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

清晰(Clarity)

縱觀整個系統(tǒng),任何尺寸的文字都清晰易讀,圖標精確易懂,恰當?shù)男揎椙也灰妆徊煊X,聚焦于功能,一切設(shè)計由功能而驅(qū)動。留白、顏色、字體、圖形以及其它界面元素能夠巧妙地突出重點內(nèi)容并且表達可交互性。

遵從(Deference)

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

深度(Depth)

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

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

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

美學完整性(Aesthetic?Integrity)

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

一致性(Consistency)

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

直接操作(Direct?Manipulation)

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

反饋(Feedback)

反饋認證交互行為,呈現(xiàn)結(jié)果,并通知用戶。系統(tǒng)自帶的iOS應(yīng)用對每一個用戶行為都提供了明確的反饋??山换サ脑乇稽c擊時會被臨時高亮,進度指示器(progress?indicator)顯示了需要長時間運轉(zhuǎn)的操作的進度,動效和聲音加強了對行為結(jié)果的提示。

隱喻(Metaphors)

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

用戶控制(User?control)

在iOS內(nèi)部,是用戶——而不是應(yīng)用——在控制。應(yīng)用可以對一系列用戶行為提供建議,或?qū)赡茉斐蓢乐睾蠊男袨榘l(fā)出警告,但不應(yīng)該替用戶做決定。好的應(yīng)用會在讓用戶主導和避免不想要的結(jié)果中找到平衡。為了讓用戶感覺到是他們在控制,應(yīng)用應(yīng)該使用熟悉且可預(yù)知的交互元素,讓用戶二次確定有破壞性的行為,并且讓即使在運行中的操作也能夠被輕易取消。

1.2?Ios?10?新特征介紹

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

1908491-959d1e3c8a945ab9

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

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

1908491-e6882282c3ce3236

與Messages的聯(lián)動

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

1908491-466a356f20d7c167

與Siri的聯(lián)動

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

1908491-150229b3d5893a91

可拓展的通知欄

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

1.3?界面基本元素

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

  • :告知用戶現(xiàn)在在應(yīng)用的哪里,提供導航,而且還可能包含按鈕或者其它用來觸發(fā)功能和交流信息的元素。
  • 視圖:包含用戶在應(yīng)用內(nèi)最關(guān)注的信息,例如文本、圖形、動畫和交互元素。視圖允例如滾動、插入、刪除和排列之類的行為。
  • 控件:觸發(fā)功能和傳遞信息??丶ò粹o、開關(guān)、輸入框和進度指示器。

為了進一步定義iO界面,UIKit規(guī)定了你的應(yīng)用能夠采用的功能。通過這個框架,你的應(yīng)用可以對觸摸屏上的手勢作出應(yīng)答,還可以包含一些例如繪畫、可訪問性和打印的功能。

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

 

來源:https://developer.apple.com/ios/human-interface-guidelines/

譯者:喵大神經(jīng) ?交互新人

本文由 @喵大神經(jīng) 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 厲害,收藏先~

    來自廣東 回復(fù)