iOS8 Human Interface Guidelines 精選閱讀(中英對照)

0 評論 8159 瀏覽 111 收藏 50 分鐘

用了兩個星期時間斷斷續續讀完iOS的guidelines英文原版,原文是寫得有點啰嗦,所以精選了以下覺得比較重要的點,并加以自己的解釋;當然如果你有時間,還是推薦閱讀英文原文。首先是因為翻譯的版本基本是不全的、舊的,就像ISUX的翻譯的對比原文就會發現中間省略了好多。本文的作用并不像多數的翻譯那樣,讓你粗略地了解里面的內容,而是精選出一些點使你體會到蘋果的設計思想。 我讀guidelines的目的不僅僅是要看他們是怎樣規定的,而是要看他們為什么這樣規定,在了解了制定規則背后的原因之后不僅便于記憶規則本身,還能了解蘋果的設計思路,當吸收了設計思路之后,就不再是墨守成規,而是更自信和靈活地運用規則,甚至創造屬于自己的規則。就像tweetie發明下拉刷新手勢之后蘋果反而把這種手勢加進了自己的guidelines。 讀英文原版還有一個顯然易見的好處就是熟悉專業英語表達,guildlines的措辭顯得優美而精確,值得去讀讀。

完整讀完后,覺得蘋果的設計思路是很嚴謹的User-Centered。經常會出現的一個詞是gratuitous (adj. 無理由的),告誡要避免無理由的設計。解釋一項規定時,常常告訴讀者如果你不這樣做用戶會覺得怎么樣,然后產生什么行為,最終導致什么不好的結果;相反按照規則則用戶感覺良好,最終導向好的結果。邏輯鏈條是:設計決定–用戶感受–用戶行為–設計效果。這可以說是交互設計的基本思考方式,充分分析人機之間的相互作用。我發現很多的設計初學者(包括我自己)經常會范一個錯誤,就是機械的運用各種設計原則和盲目崇拜大公司的設計,只要自己的設計能在某書的設計原則里找到或者與某知名的產品里一樣,那就覺得是OK的。有這想法就是因為還沒有了解別人為什么這樣定原則的,或為什么這樣設計的。這種做法在Guidelines里面的詞句形容就是slavish copy。不止是設計,對待任何事情都不應該“認死理”或“跟大流”,因為這是一種思維上的懶惰,或是盲目的理論自信。不經過思考的理論用來裝裝逼還是可以的,真正要做設計時這種死理論會害死一個產品。真正的科學家是謙遜的,因為他們坦然接受未知,隨時準備著推翻自己之前建立的理論,而不是死死抱住自己的理論盲目自信。

以下開始游覽iOS8 Guidelines

Translucent elements—such as Control Center—provide context, help users see that more content is available, and cansignal transience.

233492-db806cb1b946cd98
iOS7之后蘋果大量運用了半透明效果,相比于Win7的Aero效果,iOS的半透明模糊度更高,透明度更小。國內媒體把這種效果與Win7的Aero都稱為毛玻璃,其實并不符合設計者的原意。蘋果把這種效果比作rice paper(米紙),的確它的透明度和厚度更像紙,而Aero是有一條亮邊的,更像是玻璃邊緣的反光,如下圖。

233492-6c5a732000608485

Windows 7 Aero

iOS運用半透明效果的理由是表明本窗口是“暫時 transience”的,所以你可以看見幾乎所有浮層都是半透明的,所以設計時應該避免一個需要用戶長時間停留的窗口使用半透明。另外Guidelines里沒提到的作用是增加空間感,表明了本窗口是疊加在其他窗口是上的。扁平化的設計下視覺上不能再采用大面積的陰影表明空間縱深感,所以使用半透明的手法來代替。相比之下,WP傾向于完全摒棄縱深感,而Android Material Design則保留了陰影,這比iOS的半透明手法看起來更重一些,但優點是顯示更清晰。iOS的米紙效果個人覺得更女性化而Android顯得陽剛氣一點,這也符合硬件的氣質。界面之所以要顯示縱深感,是要告訴用戶界面的主次層級關系,浮沉是次要而暫時的,浮沉之后才是承載主要任務的界面。但Win7的Aero效果的縱深感卻不是出于這一目的,而是用于區分窗口和表示當前正在使用的窗口。

Use plenty of negative space.Negative space makes important content and functionality more noticeable and easier to understand. Negative space can also impart a sense of calm and tranquility, and it can make an app look more focused and efficient.

使用留白(negative space)使內容和功能更加容易被發現和容易理解。還可以給人以寧靜、高效和專注的感覺。

When users select a month, the year view zooms in and reveals the month view.Today’s date remains highlighted and the year appears in the back button,so users know exactly where they are, where they came from, and how to get back.

233492-e13aed8068efaa5d

A similar transition happens when users select a day: The month view appears to split apart, pushing the current week to the top of the screen and revealing the hourly view of the selected day. With each transition,Calendar reinforces the hierarchicalrelationship between years, months, and days.

233492-da6651e9e4c44f23

以上兩點說的是動畫的導航作用,以Calendar為例,年視圖點擊后放大變為月視圖,點擊月視圖分裂為周視圖。每一個動畫都表明年月周視圖之間的關系,使用戶知道怎樣切換到他們想要的視圖。

Make it easy to focus on the main task by elevating important content or functionality.Some good ways to do this are to place principal items in the upper half of the screen and—in left-to-right cultures—near the left side of the screen:

233492-2968c85054967d45

Use alignment to ease scanning and communicate groupings or hierarchy.Alignment tends to make an app look neat and organized and it gives users places to focus while they scroll through screenfuls of information. Indentation and alignment of different information groups indicate how the groups are related and make it easier for users to find specific items.

用對齊來為內容分組和重要性排序,為用戶提供眼睛的注意點,便于閱讀和尋找。

As much as possible, avoid inconsistent appearances in your UI.In general, elements that have similar functions should also look similar.People often assume that there must be a reason for the inconsistencies they notice, and they’re apt to spend time trying to figure it out.

說明一致性的重要性,如果兩個東西功能相似但外觀不同,用戶會疑惑為什么這樣設計。所以Form要follow function。

As much as possible, avoid displaying a splash screen or other startup experience.It’s best when users can begin using your app immediately.

Recommended

233492-d187441b806e7d68

Not Recommended

233492-a1aa7f8cd608f81f

盡量避免splash screen(歡迎頁),建議使用Launch Image來代替,意思是制造一張與首界面相似的靜態圖片。當用戶開啟app時先顯示這張圖,等系統準備就緒后切換到首屏。給用戶應用啟動很迅速的假象。國內就算是知名的企業也很多違反這原則。

Avoid asking people to supply setup information.Instead:

Focus on the needs of 80 percent of your users.When you do this, most people won’t have to supply any settings, because the app is already set up to behave the way they expect. If there is functionality that only a few users might want—or that most users might want only once—leave it out.

Get as much information as possible from other sources.If you can use any of the information people supply in built-in app or device settings, query the system for these values; don’t ask people to enter them again.

If you must ask for setup information, prompt people to enter it within your app.Then, store this information as soon as possible (potentially, in your app’s settings). This way, people aren’t forced to switch to Settings before they get the chance to enjoy your app. If people need to make changes to this information later, they can go to the app’s settings at any time.

避免在一開始就要用戶設置,應用應該在不設置的前提下也能讓80%用戶順利使用。盡量從系統獲取數據而不是要用戶重復填寫。如果真的要設置,也不要跑到系統的setting里,而是在本應用里設置。

Delay a login requirement for as long as possible.It’s best when users can navigate through much of your app and use some of its functionality without logging in. For example, App Store doesn’t ask users to log in until they decide to buy something. Users often abandon apps that force them to log in before they can do anything useful.

If users must log in, display in the login view a brief, friendly explanation that describes the reasons for the requirement and how it benefits users.

避免一開始就要登錄,否則用戶可能沒登錄就把你的app刪了;等用戶探索到某些不得不登錄的地方才讓用戶登錄;如果不能避免一開始就登錄,要給出理由,說明登錄的好處。

Think carefully before providing an onboarding experience

Give users only the information they need to get started.A good onboarding experience shows users what to do first or briefly demonstrates a few of the features that most users are interested in. If you give too much information to users before they have a chance to explore your app, you make users responsible for remembering details they don’t need right away and you may send the message that your app is hard to use.If additional help is needed for specific tasks, provide that help only when the user is performing those tasks.

認真考慮要不要使用Onboarding(首次使用教程),教程應該僅提供剛開始使用需要的信息,提供太多信息會讓用戶覺得這應用很難用,而且達不到記憶的效果。最好當用戶操作到需要教程的地方才出現該部分的教程。

Never quit an iOS app programmatically.People tend to interpret this as a crash. If something prevents your app from functioning as intended, you need to tell users about the situation and explain what they can do about it. Here are two good ways to do this:

If all app features are unavailable, display a screen that describes the situation and suggests a correction.The information gives feedback to users and reassures them that there’s nothing wrong with your app. It also puts users in control, letting them decide whether they want to take corrective action and continue using your app or switch to another app.

233492-852ec2288c8b93bf

If only some app features are unavailable, display either a screen or an alert when people try to use the feature.Otherwise, people should be able to use the rest of the app. If you decide to use an alert, be sure to display itonlywhen people try to access the feature that isn’t functioning.

233492-9ced08d45f2ca939
當某些功能無法使用時,不能使應用自動退出。因為這會使用戶覺得是系統崩潰了。應該在頁面處或彈框說明原因。

Broadly speaking, there are three main styles of navigation, each of which is well suited to a specific app structure:

Hierarchical

Flat

Content- or experience-driven

三種信息架構:層級,扁平和內容導向。 內容導向指書頁,游戲關卡之間的導航

In general, it’s best to give users one path to each screen.If there’s one screen that users need to see in more than one context, consider using a temporary view,such as a modal view, action sheet, or alert.

一般來說,通往一個頁面只有一條路徑,如果某頁面需要用戶在不用的情境下出現,那可以考慮用模態的方式顯示。

Modality—that is, a mode in which something exists or is experienced—has advantages and disadvantages. It can give users a way to complete a task or get information without distractions, but it does so by temporarily preventing them from interacting with the rest of the app.

模態Modality,如彈框Alert、氣泡popover、浮層表單sheet等相對獨立的界面形式,用于顯示較為復雜的次要流程任務,好處是暫時讓用戶專注于次要任務,從而更好地完成主要任務。

Always provide an obvious and safe way to exit a modal task.People should always be able to predict the fate of their work when they dismiss a modal view.

要使用戶安全地離開模態任務。使用戶能預測離開模態后會產生什么后果。

In a content area, add a button border or background only if necessary.Buttons in bars, action sheets, and alerts don’t need borders because users know that most of the items in these areas are interactive. In a content area, on the other hand, a button might need a border or a background to distinguish it from the rest of the content.

僅僅在有需要的時候才為按鈕加邊框或色塊,有需要的時候指需要把按鈕從背景內容中區分的時候。

ShakeTo initiate an undo or redo action.

Touch and holdIn editable or selectable text, to display a magnified view for cursor positioning.

Double tapTo zoom in and center a block of content or an image.

To zoom out (if already zoomed in).

Shake在短信app里面能用,長按手勢其實并非Android特有,只是在iOS中使用范圍較窄,僅在文字操作范圍,而android則用長按代替了桌面系統的右鍵,調出contextual的選項。而雙擊也僅僅是pinch手勢的單手操作代替品而已。

Feedbackhelps users know what an app is doing, discover what they can do next, and understand the results of their actions. UIKit controls and views provide many kinds of feedback.

反饋幫助用戶知道應用正在做什么?做的結果是什么?(成功還是失?。┙又梢宰鍪裁矗?這是看過對反饋最清晰的定義。

Avoid unnecessary alerts.An alert is a powerful feedback mechanism, but it should be used only to deliver important—and ideally actionable—information. If users see too many alerts that don’t contain essential information, they quickly learn to ignore all alerts. To learn more about using an alert.

設計時要考慮用戶的反應和可能引起的行為。就像這里以彈框為例子,如果應用不加思考地頻繁向用戶彈框顯示無關緊要的信息,彈框本來的警告作用就會消失,因為用戶已經認為彈框是可以忽略的,所以當你再用彈框顯示重要警告時,用戶很可能直接忽略了。

Make it easy for users to make choices. For example,you can use a picker or a table view instead of a text field, because most people find it easier to select an item from a list than to type words.

能用picker(選擇滾輪)就不用text field(文字輸入框)

Balance a request for input by giving users something useful in return.A sense of give and take helps people feel they’re making progress as they move through your app.

要想用戶輸入一些信息,必須提供相應的回報。

Don’t take space away from the content people care about. For example, displaying a second, persistent bar at the top of the screen that does nothing but display brand assets means that there’s less room for content. Instead, defer to the user’s content and consider less intrusive ways to display pervasive branding, such asusing a custom tint or font, or subtly customizing the background of a screen.

不要占用用戶的最需要的內容的空間來做放logo??梢杂妙伾⒆煮w或背景來展示品牌獨特性。

Resist the temptation to display your logo throughout the app.Mobile device screens are relatively small, and every occurrence of a logo takes space away from the content that users want to see. What’s more, displaying a logo in an app doesn’t serve the same purpose as displaying it in a webpage: It’s common for users to arrive on a webpage without knowing its owner, but it’s much less likely that users will open an iOS app without seeing its app icon.

不要沿用網站的設計經驗,在應用的每一頁放Logo。因為網站是要讓從非主頁進入的用戶知道這是什么網站,但應用不存在這一問題,所以不需要這樣設計。(Android M的應用鏈接功能可能會改變這一規則,因為現在一個鏈接也可以鏈到一個應用里了)

Luminous Ratio

To get this ratio, use an online contrast ratio calculator or you can perform the calculation yourself using the formula established in the WCAG 2.0 standard.Ideally the color contrast ratio in your app is 4.5:1 or higher.

一個界面的亮度值對比要高于4.5:1

Consider choosing a key color to indicate interactivity and state.Key colors in the built-in apps include yellow in Notes and red in Calendar. If you define a key color to indicate interactivity and state, make sure that the other colors in your app don’t compete with it.

Interactivity可交互性(在About Face里面稱為Pliancy受范性)指一個平面的元素是否可交互的。iOS8、Android L和WP里面都各有一套自己的顯示可交互性的方法,這很有趣。iOS6以前蘋果用突起的物理隱喻顯示按鈕的可交互性;iOS7以后改為使用顏色,上文就是說應用需要有一個主色調來顯示可交互性,如果按鈕實在在背景底下不突出才考慮加邊框或者加背景色;Android Kitkat之前是用色塊和輕微的陰影做按鈕的,Android L很大膽地采用字體來顯示按鈕可交互性,只要采用全大寫的中線體,就算不加顏色也可以是按鈕,當然也有有底色色塊的按鈕;WP則使用直角方形的邊框顯示按鈕。

233492-de54b9cf832c562f

iOS7之后

233492-4fced4b73c942cec

Android L

233492-7393e1d2c2ca2ef3

WP

Text should never be smaller than 11 points, even when the user chooses the extra-small text size. For comparison, the body style uses a font size of 17 points at the large size, which is the default text-size setting.

最小的字體不能小于11pt,17pt是標準字體。

To help you decide whether to use text or icons in the navigation bar or toolbar in your app, consider how many icons are visible onscreen at one time.Too many icons on a screen can make an app seem difficult to decode.

Navigation Bar(導航欄)與Toolbar(工具欄)上放太多圖標會讓人覺得很難解釋圖標的意思。

Remember that users are likely to read the text in your UI many times, andwhat might seem clever at first can become irritating when repeated.

UI上的文字用戶會看很多次,所以一些自作聰明的文字表達初次看起來有趣,但多次重復看就會覺得很煩。

If necessary, help users go directly to your app’s settings in Settings.In particular, if you display a message that describes where to find your settings, such as “Go to Settings > MyApp > Privacy > Location Services,” replace the description with a button that opens that location in Settings.

不要用文字方式教用戶去哪里設置,而是直接跳轉

Aesthetic Integrity

Aesthetic integrity doesn’t measure the beauty of an app’s artwork or characterize its style; rather, it represents how well an app’s appearance and behavior integrates with its function to send a coherent message.

Aesthetic Integrity美學一致性,指app的外觀與行為要與功能一致。

Consistency

Consistency lets people transfer their knowledge and skills from one part of an app’s UI to another and from one app to another app.

Consistency一致性指用戶能把在一個地方學到的經驗運用到另一個地方,一致性能減少用戶的學習負擔。

Feedback

Feedback acknowledges people’s actions, shows them the results, and updates them on the progress of their task.

反饋的作用:確認用戶的行為、顯示過程、顯示結果、顯示還能做什么

Sound can also give people useful feedback, but it shouldn’t be the only feedback mechanismbecause people can’t always hear their devices.

聲音可以作為反饋,但不能作為唯一的反饋,因為有可能聽不到。

Metaphors

When virtual objects and actions in an app are metaphors for familiar experiences—whether these experiences arerooted in the real world or the digital world—users quickly grasp how to use the app.

隱喻讓用戶想起之前的經驗,這種經驗無論是從物理世界得來的,還是虛擬世界得來的,都能幫助用戶快速理解現有的這個物件是怎么使用的。 所以隱喻并不是只是指物理的隱喻。例如保存按鈕的圖標用軟盤的形狀,最初是物理隱喻,但并現在軟盤已經消失了,但人們還是知道軟盤代表保存,因為來自虛擬世界的其他軟件都是用這種圖標。同樣iOS6之前很多操作都使用物理世界隱喻,但到了iOS7之后就算不再使用物理隱喻,用戶還是知道怎樣操作,因為已經在iOS6這個虛擬世界中獲得了類似的經驗。

User Control

People—not apps—should initiate and control actions. An app can suggest a course of action or warn about dangerous consequences, but it’s usually a mistake for the app to take decision-making away from the user. The best apps find the correct balance between giving people the capabilities they need while helping them avoid unwanted outcomes.

People expect to have ample opportunity to cancel an operation before it begins, and they expect to get a chance to confirm their intention to perform a potentially destructive action. Finally, people expect to be able to gracefully stop an operation that’s underway.

User Control用戶控制感,app的行為應該受用戶支配,而不是讓app自己來決定。如果app嘗試代替用戶做決定,就很可能犯錯。app應該提醒用戶危險的行為和后果的同時又給用戶充分的控制權。例如用戶希望能在開始之前停止某個行為,在危險行為前能有確認,在任何時候都能終止一個進程。

Define Your App

Now you can craft your app definition statement, concretely summarizingwhat the app does and for whom.A good app definition statement for this grocery-shopping app might be:

“A shopping list creation tool for thrifty people who love to cook.“

你的app應該有一個清晰的定義,簡單的說就是“為誰做什么?”,例如一個買日用品的app定義可能是“為精打細算有喜歡烹飪的人提供一個購物清單工具”

Customization

The best iOS apps balance UI customization with clarity of purpose and ease of use.

UI的特色一定要和易用與目的清晰平衡

Be internally consistent.The more custom your UI is, the more important it is for the appearance and behavior of your custom elements to be consistent within your app. If users take the time to learn how to use the unfamiliar controls you create, they expect to be able to rely on that knowledge throughout your app.

你的UI越是有特色,你就越要使其在內部具有一致性,因為用戶在你這里學會了一個特色的操作,他們會希望能把這個經驗盡可能多地在你的app里用到,不然就白學了,而且會覺得app難用。

Navigation Bar

If titling a navigation bar seems redundant, you can leave the title empty. For example, Notes doesn’t title the current note because the first line of content supplies all the context users need.

導航欄的標題是可以不顯示的,例如note就沒有標題,因為第一行的內容已經顯示用戶所需的信息。

Consider putting a segmented control in a navigation bar at the top level of an app.This is especially useful if doing so helps to flatten your information hierarchy, making it easier for people to find what they’re looking for. If you use a segmented control in a navigation bar, be sure to choose accurate back-button titles.

在首次導航使用Segmented Control(標簽選擇)可以使信息導航更加扁平。

Use a navigation bar to enable navigation among different views and—if appropriate—to provide a control that manages the items in a view.If you need to provide a larger set of controls and you don’t need to enable navigation, consider using a toolbar instead

Toolbar(工具欄)同樣可以用于導航,當頁面需要復雜的導航,Navigation Bar(導航欄)就顯得容量不夠,這時需要用Toolbar作為導航。

Toolbar

Consider using a segmented control to provide access to different perspectives or modes in the current context. It’s not a good idea to use a segmented control in a toolbar to show app-level tasks or modes, becausea toolbar is specific to the current screen or view. If you need to give people access to primary tasks, views, or modes in your app, use a tab bar instead.

segmented control不能放在toolbar里,因為會與tab bar混淆。tab bar用于整個app的首級導航,而segment control更多是當前頁面、任務、視圖的導航,多為二級導航。

Use icons if you need to put more than three items in a toolbar.Because text-titled buttons typically use more space than icons, it can be difficult to keep the titles from running together.

toolbar最多放3個文字按鈕,多于3個請使用圖標代替。文字按鈕太密會彼此分不清。

3 Kinds of Popover

1.Provides options that affect the main view, but doesn’t implement an inspector

Close the popover as soon as people make a choice or when they tap anywhere outside its bounds, including the control that reveals the popover.

2. Implements an inspector

Close the popover when people tap anywhere outside its bounds, including the control that reveals the popover.

In this scenario, don’t close the popover as soon as people make a choice, because they might want to make an additional choice or change the attributes of the current choice.

3. Enables a task

Close the popover when people complete or cancel the task by tapping a button in the popover, such as Done or Cancel.

In this scenario, you may not want to close the popover when people tap outside its borders, because it might be important that people finish—or explicitly abandon—the task. Otherwise, save people’s input when they tap outside a popover’s borders, just as you would if they tapped Done.

In general, save users’ work when they tap outside a popover’s borders. Not every popover requires an explicit dismissal, so people might dismiss them mistakenly.Discard the work people do in a popover only if they tap a Cancel button.

Popover(氣泡彈窗)的三種情況

  1. 當彈窗的操作結果在彈窗以顯示,彈窗里做出選擇后立即關閉彈窗
  2. 當彈窗的操作結果在彈窗以顯示,彈窗里做出選擇后立即關閉彈窗,供用戶再次選擇。
  3. 當彈窗是在完成獨立的任務,只有當完成任務才關閉彈窗

點擊彈窗以外的地方等同于關閉彈窗,但如果彈窗是完成獨立任務,點擊彈窗以外地方可以不關閉彈窗或者關閉但保存用戶數據,因為用戶有可能是意外點擊。

Be cautious if you change a popover’s size while it remains visible. You might want to change a popover’s size if you use it to display both a minimal and an expanded view of the same information. When you adjust the size of a visible popover,it’s usually a good idea to animate the change because it avoids giving the impression that a new popover has replaced the old one.

當彈窗的大小要改變時,最好使用動畫,否則用戶可能會以為出現了一個新的彈窗。

Scoll View

In general, display only one scroll view at a time.People often make large swipe gestures when they scroll, so it can be difficult for them to avoid interacting with a neighboring scroll view on the same screen.If you decide to put two scroll views on one screen, consider allowing them to scroll in different directions so that one gesture is less likely to scroll both views.For example, Stocks in portrait orientation on iPhone displays stock quotes in a vertically scrolling view above company-specific information, which is in a horizontally scrolling view.

最好只顯示一個滾動視圖,因為用戶操作滾動視圖使動作一般較大,很容易兩個視圖都一帶操作。如果一定要顯示兩個滾動視圖,就使用不同的滾動方向。

Split View

Avoid displaying a navigation bar in both panes at the same time.Doing this would make it very difficult for users to discern the relationship between the two panes.

在SplitView時避免兩個視圖都出現navigation bar,則會使兩個視圖的關系變得不明顯。

Give people alternative ways to access the primary pane, if appropriate.By default, only the secondary pane is displayed in a horizontally compact environment and you provide users with a button (typically located in a navigation bar) to reveal and hide the primary pane. The split view controller also supports the swipe gesture to perform the reveal/hide action. Unless your app uses the swipe gesture to perform other functions, you should let people swipe to access the primary pane.

Horizontally compact environment(狹小橫屏)時,主窗格是隱藏的??捎米笊辖堑陌粹o或是滑動手勢調出。

In both styles, a table row becomes highlighted briefly when a user taps a selectable item. If a row selection results in navigation to a new screen, the selected row becomes highlighted briefly as the new screen slides into place.When the user navigates back to the previous screen, the originally selected row again becomes highlighted briefly to remind the user of the earlier selection(it doesn’t remain highlighted).

點擊列表的一項時,該項被點亮,直至新的一屏出現;但用戶退回到以前那屏列表時,原來選擇的那一項同樣要點亮一次(暫時點亮),告訴用戶他進來時的路徑。

If table content is extensive or complex, avoid waiting until all the data is available before displaying anything. Instead,fill the onscreen rows with textual data immediately and display more complex data—such as images—as they become available.This technique gives users useful information right away and increases the perceived responsiveness of your app.

如果列表視圖包含很多圖片或復雜的內容,在用戶剛進入時,可以只顯示文字,稍后再顯示其他內容,讓用戶能最快地得到想要的信息。

Consider displaying “stale” data while waiting for new data to arrive.Although this technique isn’t recommended for apps that handle frequently changing data, it can help more static apps give users something useful right away. Before you decide to do this, gauge how often the data changes and how much users depend on seeing fresh data quickly.

如果你的列表內容的新鮮程度對用戶不是很重要,可以在用戶剛進入時先顯示老內容,稍后再更新。

Date Picker

As much as possible, display a date picker inline with the content.It’s best when users can avoid navigating to a different view to use a date picker. In a horizontally regular environment, a date picker can appear within a popover or inline with content.

Date Picker日期選擇器最好是inline(與其他內容并列)的,不用再模態顯示。

Page Control

Use a page control when it’s more important to show users how many views are open than it is to help them choose a specific view.

Page Control(頁面指示器)的作用是指示有多少項目可以顯示,但項目數目比快速選擇某一項更重要時,就用Page Control;反之用列表。

Picker

In general, use a picker when users are familiar with the entire set of values. Because many of the values are hidden when the wheel is stationary,it’s best when users can predict what the values are. If you need to provide a large set of choices that aren’t well known to your users, a picker might not be the appropriate control.

Consider using a table view, instead of a picker,if you need to display a very large number of values. This is because the greater height of a table view makes scrolling faster.

與Page Control相似,Picker(選擇器)不能顯示全部的選項,所以只有當用戶很清楚全部選項是什么或者只有很少的選項時,才用Picker。否則用列表。

Steper

Use a stepper when users might need to make small adjustments to a value.

用戶需要對某一項作細微調整時,用Stepper。

Button

Use a verb or verb phrase to describe the action the button performs.An action-specific title shows users that the button is interactive and tells them what will happen when they tap it.

按鈕的文字應使用動詞,表明可交互性。

Alert

Asks for confirmation of user-initiated tasks, do not use Alert, use Action Sheet instead.

需要用戶確認時,不要使用Alert(警告),而應使用Action Sheet(選項表單)。

Title-style capitalizationmeans that every word is capitalized, except articles, coordinating conjunctions, and prepositions of four or fewer letters when they aren’t the first word.

Sentence-style capitalizationmeans that the first word is capitalized, and the rest of the words are lowercase unless they are proper nouns or proper adjectives.

Alert的Title要使用Title-style capitalization,即把每個單詞首字母大寫,除了四個字母以下的介詞以外。

Avoid sounding accusatory or judgmental when you need to deliver negative news. People understand that many alerts tell them about problems or warn them about dangerous situations.As long as you use a friendly tone, it’s better to be negative and direct than it is to be positive but oblique.

警告中的措辭避免帶有指責和挑剔的意思。用戶明白警告是表達負面意思的,所以警告時明確的負面意思比不清不楚的正面信息要好。

As much as possible, avoid “you,” “your,” “me,” and “my.”Sometimes, text that identifies people directly can be ambiguous and can even be interpreted as insulting or patronizing.

避免使用“你”“我”這樣的指向性詞語,這使人覺得帶有諷刺性和自以為是。

Place buttons appropriately. Ideally, the button that’s most natural to tap should meet two criteria:It should perform the action that users are most likely to want and it should be the least likely to cause problems if a user taps it inadvertently.Specifically:

When the most likely button performs a nondestructive action, it should be on the right in a two-button alert. The button that cancels this action should be on the left.

When the most likely button performs a destructive action, it should be on the left in a two-button alert. The button that cancels this action should be on the right.

警告中的按鈕排布應該使用戶既能順手地點擊最可能點的按鈕,也能避免錯誤點擊。例如如果警告里的操作是不具有破環性的,則應該放在右手邊方便點擊;但如果具有破環性,則放在左手邊防止誤操作。

Pressing the Home button while an alert is visible should quit the app, as expected.Doing so should also be identical to tapping the Cancel button—that is, the alert is dismissed and the action isn’t performed.

在警告狀態下按home鍵應該等同于取消警告。

Action Sheet

Use an action sheet to:

Provide alternative ways to complete a task. An action sheet lets you to provide a range of choices that make sense in the context of the current task, without giving these choices a permanent place in the UI.

Get confirmation before completing a potentially dangerous task. An action sheet prompts users to think about the potentially dangerous effects of the step they’re about to take and gives them some alternatives.

Action Sheet(選項表單)用于展示當前任務下的其他選擇,只有執行一項任務時才出現,不用占據屏幕空間;另外,還用于破環性任務之前的確認。

Model View

Use a modal view when you need to offer the ability to accomplish a self-contained task related to your app’s primary function. A modal view is especially appropriate fora multistep subtask that requires UI elements that don’t belong in the main app UI all the time.

模態的作用是完成一個相對完整的次級任務,尤其適合于一些不宜長期占據屏幕的次級任務。

Transition Style of Model View

Vertical. In the vertical style, the modal view slides up from the bottom edge of the screen and slides back down when dismissed (this is the default transition style).

Flip. In the flip style, the current view flips horizontally from right to left to reveal the modal view. Visually, the modal view looks as if it is the back of the current view. When the modal view is dismissed, it flips horizontally from left to right, revealing the previous view.

模態的出現方式: 1.由下至上出現,由上至下消失;2. 翻轉背后出現

App Icon

Create an abstract interpretation of your app’s main idea.It rarely works well to use a photo or screenshot in an app icon because photographic details can be very hard to see at small sizes. Typically, it’s better to interpret reality in an artistic way, because doing so lets you emphasize the aspects of the subject that you want users to notice.

Icon不宜食用具象的圖像,因為縮小時具象的圖就會變得模糊。抽象的圖像能保證清晰度,而且可以強調你想表達的方面的信息。

If the background of your icon is white, don’t add a gray overlay in an effort to increase its visibility in Settings. iOS adds a 1-pixel border stroke so that all icons look good on the white background of Settings.

白色底的icon系統會自動添加灰色邊。

Bar Button Icon

To ensure that all icons have a consistent perceived size, you may have to create some icons at different actual sizes.For example, the set of system provided icons shown here all have the same perceived size, even though the Favorites and Voicemail icons are actually a bit larger than the other three icons.

任務欄icon有時需要使用不同的實際大小使它們看起來是一樣大的。

Reference:

iOS Human Interface Guidelines

https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/

 

原文鏈接:http://www.jianshu.com/p/2c8f3162aedf

作者:Alan的UX筆記

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!