iOS8 Human Interface Guidelines 精選閱讀(中英對照)
用了兩個星期時間斷斷續(xù)續(xù)讀完iOS的guidelines英文原版,原文是寫得有點(diǎn)啰嗦,所以精選了以下覺得比較重要的點(diǎn),并加以自己的解釋;當(dāng)然如果你有時間,還是推薦閱讀英文原文。首先是因?yàn)榉g的版本基本是不全的、舊的,就像ISUX的翻譯的對比原文就會發(fā)現(xiàn)中間省略了好多。本文的作用并不像多數(shù)的翻譯那樣,讓你粗略地了解里面的內(nèi)容,而是精選出一些點(diǎn)使你體會到蘋果的設(shè)計思想。 我讀guidelines的目的不僅僅是要看他們是怎樣規(guī)定的,而是要看他們?yōu)槭裁催@樣規(guī)定,在了解了制定規(guī)則背后的原因之后不僅便于記憶規(guī)則本身,還能了解蘋果的設(shè)計思路,當(dāng)吸收了設(shè)計思路之后,就不再是墨守成規(guī),而是更自信和靈活地運(yùn)用規(guī)則,甚至創(chuàng)造屬于自己的規(guī)則。就像tweetie發(fā)明下拉刷新手勢之后蘋果反而把這種手勢加進(jìn)了自己的guidelines。 讀英文原版還有一個顯然易見的好處就是熟悉專業(yè)英語表達(dá),guildlines的措辭顯得優(yōu)美而精確,值得去讀讀。
完整讀完后,覺得蘋果的設(shè)計思路是很嚴(yán)謹(jǐn)?shù)腢ser-Centered。經(jīng)常會出現(xiàn)的一個詞是gratuitous (adj. 無理由的),告誡要避免無理由的設(shè)計。解釋一項規(guī)定時,常常告訴讀者如果你不這樣做用戶會覺得怎么樣,然后產(chǎn)生什么行為,最終導(dǎo)致什么不好的結(jié)果;相反按照規(guī)則則用戶感覺良好,最終導(dǎo)向好的結(jié)果。邏輯鏈條是:設(shè)計決定–用戶感受–用戶行為–設(shè)計效果。這可以說是交互設(shè)計的基本思考方式,充分分析人機(jī)之間的相互作用。我發(fā)現(xiàn)很多的設(shè)計初學(xué)者(包括我自己)經(jīng)常會范一個錯誤,就是機(jī)械的運(yùn)用各種設(shè)計原則和盲目崇拜大公司的設(shè)計,只要自己的設(shè)計能在某書的設(shè)計原則里找到或者與某知名的產(chǎn)品里一樣,那就覺得是OK的。有這想法就是因?yàn)檫€沒有了解別人為什么這樣定原則的,或?yàn)槭裁催@樣設(shè)計的。這種做法在Guidelines里面的詞句形容就是slavish copy。不止是設(shè)計,對待任何事情都不應(yīng)該“認(rèn)死理”或“跟大流”,因?yàn)檫@是一種思維上的懶惰,或是盲目的理論自信。不經(jīng)過思考的理論用來裝裝逼還是可以的,真正要做設(shè)計時這種死理論會害死一個產(chǎn)品。真正的科學(xué)家是謙遜的,因?yàn)樗麄兲谷唤邮芪粗S時準(zhǔn)備著推翻自己之前建立的理論,而不是死死抱住自己的理論盲目自信。
以下開始游覽iOS8 Guidelines
Translucent elements—such as Control Center—provide context, help users see that more content is available, and cansignal transience.
iOS7之后蘋果大量運(yùn)用了半透明效果,相比于Win7的Aero效果,iOS的半透明模糊度更高,透明度更小。國內(nèi)媒體把這種效果與Win7的Aero都稱為毛玻璃,其實(shí)并不符合設(shè)計者的原意。蘋果把這種效果比作rice paper(米紙),的確它的透明度和厚度更像紙,而Aero是有一條亮邊的,更像是玻璃邊緣的反光,如下圖。
Windows 7 Aero
iOS運(yùn)用半透明效果的理由是表明本窗口是“暫時 transience”的,所以你可以看見幾乎所有浮層都是半透明的,所以設(shè)計時應(yīng)該避免一個需要用戶長時間停留的窗口使用半透明。另外Guidelines里沒提到的作用是增加空間感,表明了本窗口是疊加在其他窗口是上的。扁平化的設(shè)計下視覺上不能再采用大面積的陰影表明空間縱深感,所以使用半透明的手法來代替。相比之下,WP傾向于完全摒棄縱深感,而Android Material Design則保留了陰影,這比iOS的半透明手法看起來更重一些,但優(yōu)點(diǎn)是顯示更清晰。iOS的米紙效果個人覺得更女性化而Android顯得陽剛氣一點(diǎn),這也符合硬件的氣質(zhì)。界面之所以要顯示縱深感,是要告訴用戶界面的主次層級關(guān)系,浮沉是次要而暫時的,浮沉之后才是承載主要任務(wù)的界面。但Win7的Aero效果的縱深感卻不是出于這一目的,而是用于區(qū)分窗口和表示當(dāng)前正在使用的窗口。
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)使內(nèi)容和功能更加容易被發(fā)現(xiàn)和容易理解。還可以給人以寧靜、高效和專注的感覺。
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.
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.
以上兩點(diǎn)說的是動畫的導(dǎo)航作用,以Calendar為例,年視圖點(diǎn)擊后放大變?yōu)樵乱晥D,點(diǎn)擊月視圖分裂為周視圖。每一個動畫都表明年月周視圖之間的關(guān)系,使用戶知道怎樣切換到他們想要的視圖。
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:
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.
用對齊來為內(nèi)容分組和重要性排序,為用戶提供眼睛的注意點(diǎn),便于閱讀和尋找。
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.
說明一致性的重要性,如果兩個東西功能相似但外觀不同,用戶會疑惑為什么這樣設(shè)計。所以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
Not Recommended
盡量避免splash screen(歡迎頁),建議使用Launch Image來代替,意思是制造一張與首界面相似的靜態(tài)圖片。當(dāng)用戶開啟app時先顯示這張圖,等系統(tǒng)準(zhǔn)備就緒后切換到首屏。給用戶應(yīng)用啟動很迅速的假象。國內(nèi)就算是知名的企業(yè)也很多違反這原則。
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.
避免在一開始就要用戶設(shè)置,應(yīng)用應(yīng)該在不設(shè)置的前提下也能讓80%用戶順利使用。盡量從系統(tǒng)獲取數(shù)據(jù)而不是要用戶重復(fù)填寫。如果真的要設(shè)置,也不要跑到系統(tǒng)的setting里,而是在本應(yīng)用里設(shè)置。
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.
認(rèn)真考慮要不要使用Onboarding(首次使用教程),教程應(yīng)該僅提供剛開始使用需要的信息,提供太多信息會讓用戶覺得這應(yīng)用很難用,而且達(dá)不到記憶的效果。最好當(dāng)用戶操作到需要教程的地方才出現(xiàn)該部分的教程。
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.
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.
當(dāng)某些功能無法使用時,不能使應(yīng)用自動退出。因?yàn)檫@會使用戶覺得是系統(tǒng)崩潰了。應(yīng)該在頁面處或彈框說明原因。
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
三種信息架構(gòu):層級,扁平和內(nèi)容導(dǎo)向。 內(nèi)容導(dǎo)向指書頁,游戲關(guān)卡之間的導(dǎo)航
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.
一般來說,通往一個頁面只有一條路徑,如果某頁面需要用戶在不用的情境下出現(xiàn),那可以考慮用模態(tài)的方式顯示。
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.
模態(tài)Modality,如彈框Alert、氣泡popover、浮層表單sheet等相對獨(dú)立的界面形式,用于顯示較為復(fù)雜的次要流程任務(wù),好處是暫時讓用戶專注于次要任務(wù),從而更好地完成主要任務(wù)。
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.
要使用戶安全地離開模態(tài)任務(wù)。使用戶能預(yù)測離開模態(tài)后會產(chǎn)生什么后果。
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.
僅僅在有需要的時候才為按鈕加邊框或色塊,有需要的時候指需要把按鈕從背景內(nèi)容中區(qū)分的時候。
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里面能用,長按手勢其實(shí)并非Android特有,只是在iOS中使用范圍較窄,僅在文字操作范圍,而android則用長按代替了桌面系統(tǒng)的右鍵,調(diào)出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.
反饋幫助用戶知道應(yīng)用正在做什么?做的結(jié)果是什么?(成功還是失?。┙又梢宰鍪裁?? 這是看過對反饋?zhàn)钋逦亩x。
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.
設(shè)計時要考慮用戶的反應(yīng)和可能引起的行為。就像這里以彈框?yàn)槔?,如果?yīng)用不加思考地頻繁向用戶彈框顯示無關(guān)緊要的信息,彈框本來的警告作用就會消失,因?yàn)橛脩粢呀?jīng)認(rèn)為彈框是可以忽略的,所以當(dāng)你再用彈框顯示重要警告時,用戶很可能直接忽略了。
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.
要想用戶輸入一些信息,必須提供相應(yīng)的回報。
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.
不要占用用戶的最需要的內(nèi)容的空間來做放logo。可以用顏色、字體或背景來展示品牌獨(dú)特性。
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.
不要沿用網(wǎng)站的設(shè)計經(jīng)驗(yàn),在應(yīng)用的每一頁放Logo。因?yàn)榫W(wǎng)站是要讓從非主頁進(jìn)入的用戶知道這是什么網(wǎng)站,但應(yīng)用不存在這一問題,所以不需要這樣設(shè)計。(Android M的應(yīng)用鏈接功能可能會改變這一規(guī)則,因?yàn)楝F(xiàn)在一個鏈接也可以鏈到一個應(yīng)用里了)
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以后改為使用顏色,上文就是說應(yīng)用需要有一個主色調(diào)來顯示可交互性,如果按鈕實(shí)在在背景底下不突出才考慮加邊框或者加背景色;Android Kitkat之前是用色塊和輕微的陰影做按鈕的,Android L很大膽地采用字體來顯示按鈕可交互性,只要采用全大寫的中線體,就算不加顏色也可以是按鈕,當(dāng)然也有有底色色塊的按鈕;WP則使用直角方形的邊框顯示按鈕。
iOS7之后
Android L
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是標(biāo)準(zhǔn)字體。
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(導(dǎo)航欄)與Toolbar(工具欄)上放太多圖標(biāo)會讓人覺得很難解釋圖標(biāo)的意思。
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上的文字用戶會看很多次,所以一些自作聰明的文字表達(dá)初次看起來有趣,但多次重復(fù)看就會覺得很煩。
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.
不要用文字方式教用戶去哪里設(shè)置,而是直接跳轉(zhuǎn)
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美學(xué)一致性,指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一致性指用戶能把在一個地方學(xué)到的經(jīng)驗(yàn)運(yùn)用到另一個地方,一致性能減少用戶的學(xué)習(xí)負(fù)擔(dān)。
Feedback
Feedback acknowledges people’s actions, shows them the results, and updates them on the progress of their task.
反饋的作用:確認(rèn)用戶的行為、顯示過程、顯示結(jié)果、顯示還能做什么
Sound can also give people useful feedback, but it shouldn’t be the only feedback mechanismbecause people can’t always hear their devices.
聲音可以作為反饋,但不能作為唯一的反饋,因?yàn)橛锌赡苈牪坏健?/p>
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.
隱喻讓用戶想起之前的經(jīng)驗(yàn),這種經(jīng)驗(yàn)無論是從物理世界得來的,還是虛擬世界得來的,都能幫助用戶快速理解現(xiàn)有的這個物件是怎么使用的。 所以隱喻并不是只是指物理的隱喻。例如保存按鈕的圖標(biāo)用軟盤的形狀,最初是物理隱喻,但并現(xiàn)在軟盤已經(jīng)消失了,但人們還是知道軟盤代表保存,因?yàn)閬碜蕴摂M世界的其他軟件都是用這種圖標(biāo)。同樣iOS6之前很多操作都使用物理世界隱喻,但到了iOS7之后就算不再使用物理隱喻,用戶還是知道怎樣操作,因?yàn)橐呀?jīng)在iOS6這個虛擬世界中獲得了類似的經(jīng)驗(yàn)。
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的行為應(yīng)該受用戶支配,而不是讓app自己來決定。如果app嘗試代替用戶做決定,就很可能犯錯。app應(yīng)該提醒用戶危險的行為和后果的同時又給用戶充分的控制權(quán)。例如用戶希望能在開始之前停止某個行為,在危險行為前能有確認(rèn),在任何時候都能終止一個進(jìn)程。
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應(yīng)該有一個清晰的定義,簡單的說就是“為誰做什么?”,例如一個買日用品的app定義可能是“為精打細(xì)算有喜歡烹飪的人提供一個購物清單工具”
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越是有特色,你就越要使其在內(nèi)部具有一致性,因?yàn)橛脩粼谀氵@里學(xué)會了一個特色的操作,他們會希望能把這個經(jīng)驗(yàn)盡可能多地在你的app里用到,不然就白學(xué)了,而且會覺得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.
導(dǎo)航欄的標(biāo)題是可以不顯示的,例如note就沒有標(biāo)題,因?yàn)榈谝恍械膬?nèi)容已經(jīng)顯示用戶所需的信息。
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.
在首次導(dǎo)航使用Segmented Control(標(biāo)簽選擇)可以使信息導(dǎo)航更加扁平。
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(工具欄)同樣可以用于導(dǎo)航,當(dāng)頁面需要復(fù)雜的導(dǎo)航,Navigation Bar(導(dǎo)航欄)就顯得容量不夠,這時需要用Toolbar作為導(dǎo)航。
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里,因?yàn)闀ctab bar混淆。tab bar用于整個app的首級導(dǎo)航,而segment control更多是當(dāng)前頁面、任務(wù)、視圖的導(dǎo)航,多為二級導(dǎo)航。
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個請使用圖標(biāo)代替。文字按鈕太密會彼此分不清。
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(氣泡彈窗)的三種情況
- 當(dāng)彈窗的操作結(jié)果在彈窗以內(nèi)顯示,彈窗里做出選擇后立即關(guān)閉彈窗
- 當(dāng)彈窗的操作結(jié)果在彈窗以外顯示,彈窗里做出選擇后不立即關(guān)閉彈窗,供用戶再次選擇。
- 當(dāng)彈窗是在完成獨(dú)立的任務(wù),只有當(dāng)完成任務(wù)才關(guān)閉彈窗
點(diǎn)擊彈窗以外的地方等同于關(guān)閉彈窗,但如果彈窗是完成獨(dú)立任務(wù),點(diǎn)擊彈窗以外地方可以不關(guān)閉彈窗或者關(guān)閉但保存用戶數(shù)據(jù),因?yàn)橛脩粲锌赡苁且馔恻c(diǎn)擊。
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.
當(dāng)彈窗的大小要改變時,最好使用動畫,否則用戶可能會以為出現(xiàn)了一個新的彈窗。
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.
最好只顯示一個滾動視圖,因?yàn)橛脩舨僮鳚L動視圖使動作一般較大,很容易兩個視圖都一帶操作。如果一定要顯示兩個滾動視圖,就使用不同的滾動方向。
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時避免兩個視圖都出現(xiàn)navigation bar,則會使兩個視圖的關(guān)系變得不明顯。
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或是滑動手勢調(dià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).
點(diǎn)擊列表的一項時,該項被點(diǎn)亮,直至新的一屏出現(xiàn);但用戶退回到以前那屏列表時,原來選擇的那一項同樣要點(diǎn)亮一次(暫時點(diǎn)亮),告訴用戶他進(jìn)來時的路徑。
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.
如果列表視圖包含很多圖片或復(fù)雜的內(nèi)容,在用戶剛進(jìn)入時,可以只顯示文字,稍后再顯示其他內(nèi)容,讓用戶能最快地得到想要的信息。
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.
如果你的列表內(nèi)容的新鮮程度對用戶不是很重要,可以在用戶剛進(jìn)入時先顯示老內(nèi)容,稍后再更新。
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(與其他內(nèi)容并列)的,不用再模態(tài)顯示。
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(頁面指示器)的作用是指示有多少項目可以顯示,但項目數(shù)目比快速選擇某一項更重要時,就用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(選擇器)不能顯示全部的選項,所以只有當(dāng)用戶很清楚全部選項是什么或者只有很少的選項時,才用Picker。否則用列表。
Steper
Use a stepper when users might need to make small adjustments to a value.
用戶需要對某一項作細(xì)微調(diào)整時,用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.
按鈕的文字應(yīng)使用動詞,表明可交互性。
Alert
Asks for confirmation of user-initiated tasks, do not use Alert, use Action Sheet instead.
需要用戶確認(rèn)時,不要使用Alert(警告),而應(yīng)使用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.
警告中的措辭避免帶有指責(zé)和挑剔的意思。用戶明白警告是表達(dá)負(fù)面意思的,所以警告時明確的負(fù)面意思比不清不楚的正面信息要好。
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.
警告中的按鈕排布應(yīng)該使用戶既能順手地點(diǎn)擊最可能點(diǎn)的按鈕,也能避免錯誤點(diǎn)擊。例如如果警告里的操作是不具有破環(huán)性的,則應(yīng)該放在右手邊方便點(diǎn)擊;但如果具有破環(huán)性,則放在左手邊防止誤操作。
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.
在警告狀態(tài)下按home鍵應(yīng)該等同于取消警告。
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(選項表單)用于展示當(dāng)前任務(wù)下的其他選擇,只有執(zhí)行一項任務(wù)時才出現(xiàn),不用占據(jù)屏幕空間;另外,還用于破環(huán)性任務(wù)之前的確認(rèn)。
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.
模態(tài)的作用是完成一個相對完整的次級任務(wù),尤其適合于一些不宜長期占據(jù)屏幕的次級任務(wù)。
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.
模態(tài)的出現(xiàn)方式: 1.由下至上出現(xiàn),由上至下消失;2. 翻轉(zhuǎn)背后出現(xiàn)
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不宜食用具象的圖像,因?yàn)榭s小時具象的圖就會變得模糊。抽象的圖像能保證清晰度,而且可以強(qiáng)調(diào)你想表達(dá)的方面的信息。
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系統(tǒng)會自動添加灰色邊。
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.
任務(wù)欄icon有時需要使用不同的實(shí)際大小使它們看起來是一樣大的。
Reference:
iOS Human Interface Guidelines
https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/
原文鏈接:http://www.jianshu.com/p/2c8f3162aedf
作者:Alan的UX筆記
- 目前還沒評論,等你發(fā)揮!