UI設計師必讀的IOS 10人機界面中文版設計指南 (一)

分類欄目:經驗 - 設計教程

發布于 暫無評論

1.1 設計原則(Design Principles)

作為一名移動應用設計師,意味你有機會發布一款具有殺傷力的產品能夠登上蘋果商店的榜首。為了實現這個目標,你的產品必須在質量和功能上達到高標準。

以下三大原則讓IOS系統有別于其它平臺:

清晰(Clarity):

縱觀整個系統,任何尺寸的文字都清晰易讀,圖標精確易懂,恰當且微妙的修飾,聚焦于功能,一切設計由功能而驅動。留白、顏色、字體、圖形以及其它界面元素能夠巧妙地突出重點內容并且表達可交互性。

遵從(Deference):

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

深度(Depth):

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

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

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

美學完整性(Aesthetic Integrity)

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

一致性(Consistency)

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

直接操作(Direct Manipulation)

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

反饋(Feedback)

反饋認證交互行為,呈現結果,并通知用戶。系統自帶的IOS應用對每一個用戶行為都提供了明確的反饋。可交互的元素被點擊時會被臨時高亮,進度指示器(progress indicator)顯示了需要長時間運轉的操作的進度,動效和聲音加強了對行為結果的提示。

隱喻(Metaphors)

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

用戶控制(User control)

IOS內部,是用戶——而不是應用——在控制。應用可以對一系列用戶行為提供建議,或對可能造成嚴重后果的行為發出警告,但不應該替用戶做決定。好的應用會在讓用戶主導和避免不想要的結果中找到平衡。為了讓用戶感覺到是他們在控制,應用應該使用熟悉且可預知的交互元素,讓用戶二次確定有破壞性的行為,并且讓即使在運行中的操作也能夠被輕易取消。

1.2 IOS 10 新特征介紹

IOS 10,你可以創造前所未有的更強大的應用。當你瀏覽這些新改變并在思考他們將如何幫助你的應用時,請特別關注設計指南。

nw2016063044

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

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

nw2016063043

與Messages的聯動

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

nw2016063042

與Siri的聯動

應用能夠與Siri聯動,從而讓用戶使用聲音來執行相應的應用操作,譬如打電話、發短信和開始鍛煉。

nw2016063041

可拓展的通知欄

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

1.3 界面基本元素

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

欄:

告知用戶現在在應用的哪里,提供導航,而且還可能包含按鈕或者其它用來觸發功能和交流信息的元素。

視圖:

包含用戶在應用內最關注的信息,例如文本、圖形、動畫和交互元素。視圖允例如滾動、插入、刪除和排列之類的行為。

控件:

觸發功能和傳遞信息。控件包括按鈕、開關、輸入框和進度指示器。

為了進一步定義IOS界面,UIKit規定了你的應用能夠采用的功能。通過這個框架,你的應用可以對觸摸屏上的手勢作出應答,還可以包含一些例如繪畫、輔助和打印的功能。

IOS也和其他編程框架和技術緊密結合,譬如Apple Pay、HealthKit 和ResearcKit, 它幫助你設計出一個強大地驚人的應用。