iOS11与iOS10界面全面对比, 你更喜欢哪一款?
稿源：黑科技的诞生
iOS11（左）与iOS10（右）界面对比，哪款更是你的菜？PS：你得先有一个iPhone手机才行！
有好的文章希望站长之家帮助分享推广，猛戳这里
本网页浏览已超过3分钟，点击关闭或灰色背景，即可回到网页iOS10人机界面指南：UI-控件（一）2收藏分享举报文章被以下专栏收录推荐阅读{&debug&:false,&apiRoot&:&&,&paySDK&:&https:\u002F\\u002Fapi\u002Fjs&,&wechatConfigAPI&:&\u002Fapi\u002Fwechat\u002Fjssdkconfig&,&name&:&production&,&instance&:&column&,&tokens&:{&X-XSRF-TOKEN&:null,&X-UDID&:null,&Authorization&:&oauth c3cef7c66aa9e6a1e3160e20&}}{&database&:{&Post&:{&&:{&isPending&:false,&contributes&:[{&sourceColumn&:{&lastUpdated&:,&description&:&&,&permission&:&COLUMN_PUBLIC&,&memberId&:465391,&contributePermission&:&COLUMN_PUBLIC&,&translatedCommentPermission&:&all&,&canManage&:true,&intro&:&&,&urlToken&:&c_&,&id&:20217,&imagePath&:&4b70deef7&,&slug&:&c_&,&applyReason&:&0&,&name&:&一个寂寞的汽车交互设计师在此发出呼告&,&title&:&一个寂寞的汽车交互设计师在此发出呼告&,&url&:&https:\u002F\\u002Fc_&,&commentPermission&:&COLUMN_ALL_CAN_COMMENT&,&canPost&:true,&created&:,&state&:&COLUMN_NORMAL&,&followers&:123,&avatar&:{&id&:&4b70deef7&,&template&:&https:\u002F\\u002F{id}_{size}.jpg&},&activateAuthorRequested&:false,&following&:false,&imageUrl&:&https:\u002F\\u002F4b70deef7_l.jpg&,&articlesCount&:20},&state&:&accepted&,&targetPost&:{&titleImage&:&&,&lastUpdated&:,&imagePath&:&&,&permission&:&ARTICLE_PUBLIC&,&topics&:[7440],&summary&:&\u003Cb\u003EButtons按钮\u003C\u002Fb\u003EButtons initiate app-specific actions,\nhave customizable backgrounds, and can include a title or an icon. The system\nprovides a number of predefined button styles for most use cases. You can also\ndesign fully custom buttons.For…&,&copyPermission&:&ARTICLE_COPYABLE&,&translatedCommentPermission&:&all&,&likes&:0,&origAuthorId&:0,&publishedTime&:&T13:07:05+08:00&,&sourceUrl&:&&,&urlToken&:,&id&:1490549,&withContent&:false,&slug&:,&bigTitleImage&:false,&title&:&iOS10人机界面指南：UI-控件（一）&,&url&:&\u002Fp\u002F&,&commentPermission&:&ARTICLE_ALL_CAN_COMMENT&,&snapshotUrl&:&&,&created&:,&comments&:0,&columnId&:20217,&content&:&&,&parentId&:0,&state&:&ARTICLE_PUBLISHED&,&imageUrl&:&&,&author&:{&bio&:&专栏：一个寂寞的汽车交互设计师在此发出呼告&,&isFollowing&:false,&hash&:&55ad36e0c5bc228f82bb1c0030fc3dfd&,&uid&:64,&isOrg&:false,&slug&:&wu-rui-89&,&isFollowed&:false,&description&:&&,&name&:&伍睿&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Fwu-rui-89&,&avatar&:{&id&:&958fb5ac4&,&template&:&https:\u002F\\u002F50\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},&memberId&:465391,&excerptTitle&:&&,&voteType&:&ARTICLE_VOTE_CLEAR&},&id&:459542}],&title&:&iOS10人机界面指南：UI-控件（一）&,&author&:&wu-rui-89&,&content&:&\u003Ch2\u003E\u003Cb\u003EButtons按钮\u003C\u002Fb\u003E\u003C\u002Fh2\u003E\u003Cp\u003EButtons initiate app-specific actions,\nhave customizable backgrounds, and can include a title or an icon. The system\nprovides a number of predefined button styles for most use cases. You can also\ndesign fully custom buttons.\u003C\u002Fp\u003E\u003Cp\u003EFor implementation details, see \u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\\u002Freference\u002Fuikit\u002Fuibutton\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EUIButton\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E.\u003C\u002Fp\u003E\u003Cp\u003E按钮启动app特定的动作，有自定义背景，并且能包含一个标题或者一个图标。系统为大多数使用场景提供一系列预定制的按钮风格。您也可以设计全部自定义的按钮。\u003C\u002Fp\u003E\u003Cp\u003E详情查看【\u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\\u002Freference\u002Fuikit\u002Fuibutton\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EUIButton\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E】\u003C\u002Fp\u003E\u003Ch3\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-fdab87e65c6_b.png\& data-rawwidth=\&312\& data-rawheight=\&278\& class=\&content_image\& width=\&312\&\u003ESystem\nButtons系统按钮\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='312'%20height='278'&&\u002Fsvg&\& data-rawwidth=\&312\& data-rawheight=\&278\& class=\&content_image lazy\& width=\&312\& data-actualsrc=\&https:\u002F\\u002Fv2-fdab87e65c6_b.png\&\u003ESystem\nButtons系统按钮\u003C\u002Fh3\u003E\u003Cp\u003ESystem buttons often\nappear in navigation bars and toolbars, but may be used anywhere.\u003C\u002Fp\u003E\u003Cp\u003E系统按钮经常出现在导航条和工具条上，但是可能被用在任何地方。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003EUse verbs in titles.\u003C\u002Fstrong\u003E An action-specific title shows that a button is interactive and\nsays what happens when you tap it.\u003C\u002Fp\u003E\u003Cp\u003E标题要使用动词。一个特定动作标题说明按钮是可交互的并且说明了当您点击它时会发生什么。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003EUse title-case for\ntitles.\u003C\u002Fstrong\u003E Capitalize\nevery word except articles, coordinating conjunctions, and prepositions of four\nor fewer letters.\u003C\u002Fp\u003E\u003Cp\u003E标题要首字母大写。除了冠词、并列连词以及四个或以下字母的介词之外的每个词都要大写首字母，\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003EKeep titles short.\u003C\u002Fstrong\u003E Overly long text can crowd your interface and may get truncated\non smaller screens.\u003C\u002Fp\u003E\u003Cp\u003E标题要短。过长的文本会让界面看起来很挤，并且在小屏幕上可能被截短。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003EConsider adding a border or a\nbackground only when necessary.\u003C\u002Fstrong\u003E By default, a system button has no border or background. In some\ncontent areas, however, a border or background is necessary to denote\ninteractivity. In the Phone app, bordered number keys reinforce the traditional\nmodel of making a call, and the background of the Call button provides an\neye-catching target that’s easy to hit.\u003C\u002Fp\u003E\u003Cp\u003EFor implementation details, see the \u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\\u002Freference\u002Fuikit\u002Fuibuttontype\u002Fuibuttontypesystem\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EUIButtonTypeSystem\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E button type of \u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\\u002Freference\u002Fuikit\u002Fuibutton\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EUIButton\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E.\u003C\u002Fp\u003E\u003Cp\u003E只在必要时考虑添加描边或者背景。默认情况下，系统按钮是没有描边或者背景的。然而，在某些内容区域，为了描述交互性，描边或者背景是必要的。在Phone电话 app中，描边的数字键加强了传统的打电话形式，Call呼叫按钮的背景提供了吸引眼球的目标，很容易点击。\u003C\u002Fp\u003E\u003Ch3\u003EDetail\nDisclosure Buttons详情按钮\u003C\u002Fh3\u003E\u003Cp\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-ee2498e0fae7bafd8d9e74ec782ff89f_b.png\& data-rawwidth=\&312\& data-rawheight=\&277\& class=\&content_image\& width=\&312\&\u003EA Detail Disclosure\nbutton opens a view—typically, a modal view—containing additional information\nor functionality related to a specific item onscreen. Although you can use them\nin any type of view, Detail Disclosure buttons are commonly used in tables to\naccess information about specific rows.\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='312'%20height='277'&&\u002Fsvg&\& data-rawwidth=\&312\& data-rawheight=\&277\& class=\&content_image lazy\& width=\&312\& data-actualsrc=\&https:\u002F\\u002Fv2-ee2498e0fae7bafd8d9e74ec782ff89f_b.png\&\u003EA Detail Disclosure\nbutton opens a view—typically, a modal view—containing additional information\nor functionality related to a specific item onscreen. Although you can use them\nin any type of view, Detail Disclosure buttons are commonly used in tables to\naccess information about specific rows.\u003C\u002Fp\u003E\u003Cp\u003E详情按钮会打开一个视图——通常是模态视图——包含附加信息或者屏幕上特定项目的相关功能。尽管您可以在任何一种视图里使用它们，详情按钮通常用在表格中，来获取关于某特定行的信息。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003EUse Detail Disclosure\nbuttons appropriately in tables.\u003C\u002Fstrong\u003EWhen a Detail\nDisclosure button is present in a table row, tapping the button shows\nadditional information. Tapping elsewhere selects the row or results in\napp-defined behavior. If you want people to tap the entire row to see\nadditional detail, don’t use a Detail Disclosure button. Instead, use a detail\ndisclosure accessory control, which appears as a chevron. See\u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\\u002Freference\u002Fuikit\u002Fuitableviewcellaccessorytype\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EUITableViewCellAccessoryType\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E in \u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\\u002Freference\u002Fuikit\u002Fuitableviewcell\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EUITableViewCell\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E.\u003C\u002Fp\u003E\u003Cp\u003EFor implementation details, see the \u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\\u002Freference\u002Fuikit\u002Fuibuttontype\u002Fuibuttontypedetaildisclosure\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EUIButtonTypeDetailDisclosure\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E button type of \u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\\u002Freference\u002Fuikit\u002Fuibutton\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EUIButton\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E.\u003C\u002Fp\u003E\u003Cp\u003E在表格中恰当使用详情按钮。当详情按钮显示在表格行中，点击按钮来显示附加信息。点击其他地方选择该行或者导致app定义的行为。如果您想让人们点击整行来看到附加详情，不要使用详情按钮。用看上去像箭头的详情披露附件来代替。\u003C\u002Fp\u003E\u003Cp\u003E详情查看【\u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\\u002Freference\u002Fuikit\u002Fuibuttontype\u002Fuibuttontypedetaildisclosure\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EUIButtonTypeDetailDisclosure\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E button type of \u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\\u002Freference\u002Fuikit\u002Fuibutton\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EUIButton\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E.】\u003C\u002Fp\u003E\u003Ch3\u003EInfo Buttons信息按钮\u003C\u002Fh3\u003E\u003Cp\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-649a547f8fb179c36b1c_b.png\& data-rawwidth=\&312\& data-rawheight=\&278\& class=\&content_image\& width=\&312\&\u003EAn Info button reveals configuration details about an app,\nsometimes on the back of the current view, after flipping the view around. Info\nbuttons come in two styles—light and dark. Pick the style that best coordinates\nwith your app’s design and doesn’t get lost onscreen.\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='312'%20height='278'&&\u002Fsvg&\& data-rawwidth=\&312\& data-rawheight=\&278\& class=\&content_image lazy\& width=\&312\& data-actualsrc=\&https:\u002F\\u002Fv2-649a547f8fb179c36b1c_b.png\&\u003EAn Info button reveals configuration details about an app,\nsometimes on the back of the current view, after flipping the view around. Info\nbuttons come in two styles—light and dark. Pick the style that best coordinates\nwith your app’s design and doesn’t get lost onscreen.\u003C\u002Fp\u003E\u003Cp\u003EFor implementation\ndetails, see the\u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\\u002Freference\u002Fuikit\u002Fuibuttontype\u002Fuibuttontypeinfolight\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EUIButtonTypeInfoLight\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E and \u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\\u002Freference\u002Fuikit\u002Fuibuttontype\u002Fuibuttontypeinfodark\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EUIButtonTypeInfoDark\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003Ebutton\ntypes of \u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\\u002Freference\u002Fuikit\u002Fuibutton\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EUIButton\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E.\u003C\u002Fp\u003E\u003Cp\u003E一个信息按钮揭开app的配置细节，有时候在当前视图的背面，在翻转视图之后。信息按钮有两种风格，浅色的和深色的。挑选与您app设计最相配的那种，并且不要在屏幕上迷失？？？？\u003C\u002Fp\u003E\u003Cp\u003E详情查看【\u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\\u002Freference\u002Fuikit\u002Fuibuttontype\u002Fuibuttontypeinfolight\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EUIButtonTypeInfoLight\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E and \u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\\u002Freference\u002Fuikit\u002Fuibuttontype\u002Fuibuttontypeinfodark\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EUIButtonTypeInfoDark\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003Ebutton\ntypes of \u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\\u002Freference\u002Fuikit\u002Fuibutton\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EUIButton\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E.】\u003C\u002Fp\u003E\u003Ch3\u003EAdd\nContact Buttons添加联系人按钮\u003C\u002Fh3\u003E\u003Cp\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-ef8e0f25c0b01b6dfd23_b.png\& data-rawwidth=\&312\& data-rawheight=\&277\& class=\&content_image\& width=\&312\&\u003EUsers can tap an Add\nContact button to browse a list of existing contacts and to select one for\ninsertion into a text field or other view. In Mail, for example, you can tap\nthe Add Contact button in the To field of a message to select a recipient from\nyour list of contacts.\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='312'%20height='277'&&\u002Fsvg&\& data-rawwidth=\&312\& data-rawheight=\&277\& class=\&content_image lazy\& width=\&312\& data-actualsrc=\&https:\u002F\\u002Fv2-ef8e0f25c0b01b6dfd23_b.png\&\u003EUsers can tap an Add\nContact button to browse a list of existing contacts and to select one for\ninsertion into a text field or other view. In Mail, for example, you can tap\nthe Add Contact button in the To field of a message to select a recipient from\nyour list of contacts.\u003C\u002Fp\u003E\u003Cp\u003E用户可以点击添加联系人按钮来浏览一系列已经保存的联系人并且选一个来插入文本域或者其他视图。例如，在Mail邮件中，您可以在一条信息的To区域点击添加联系人按钮来从一列联系人中选择收件人。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003EAllow keyboard entry in\naddition to the Add Contact button.\u003C\u002Fstrong\u003E The Add Contact button provides an alternative, not a\nreplacement, to typing contact information. It’s fine to provide it as a\nshortcut for adding existing contacts, but let people enter contact information\nwith the keyboard too.\u003C\u002Fp\u003E\u003Cp\u003EFor implementation\ndetails, see the\u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\\u002Freference\u002Fuikit\u002Fuibuttontype\u002Fuibuttontypecontactadd\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EUIButtonTypeContactAdd\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E button type of \u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\\u002Freference\u002Fuikit\u002Fuibutton\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EUIButton\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E.\u003C\u002Fp\u003E\u003Cp\u003E除了添加联系人按钮之外，允许键盘输入。添加联系人按钮提供一个选择，而不是代替打字输入联系人信息。为添加已存的联系人提供捷径是好的，但也要让人能用键盘输入联系人信息。\u003C\u002Fp\u003E\u003Cp\u003E详情查看【\u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\\u002Freference\u002Fuikit\u002Fuibuttontype\u002Fuibuttontypecontactadd\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EUIButtonTypeContactAdd\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E button type of \u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\\u002Freference\u002Fuikit\u002Fuibutton\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EUIButton\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E.】\u003C\u002Fp\u003E\u003Ch2\u003E\u003Cb\u003EEdit Menus编辑菜单\u003C\u002Fb\u003E\u003C\u002Fh2\u003E\u003Cp\u003EPeople can touch and\nhold or double-tap an element in a text field, a text view, a web view, or an\nimage view to select content and reveal edit options, such as Copy and Paste.\u003C\u002Fp\u003E\u003Cp\u003E人们可以在文本域、文本视图、网页视图或者图像视图里长按或者双击元素来选择内容并且揭开编辑选项，比如复制和粘贴。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003EShow appropriate\ncommands for the current context.\u003C\u002Fstrong\u003EBy default, the\noptions include Cut, Copy, Paste, Select, Select All, and Delete commands, any\nof which can optionally be disabled. If nothing is selected, the menu shouldn’t\nshow options that require a selection, such as Copy or Cut. Similarly, the menu\nshouldn’t have a Select option if something is already selected.\u003C\u002Fp\u003E\u003Cp\u003E为当前情景显示适当的命令。默认情况下，选项包括剪切，复制，粘贴，选择，选择所有以及删除命令，这些都可以关掉。如果什么都没选，菜单就不会显示需要选择的选项，比如复制和剪切。同样，如果已经选中了什么，菜单就不应该有选择这个选项。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003ELet people use the standard\ngestures to access edit options.\u003C\u002Fstrong\u003E People expect to reveal the menu by touching and holding or\ndouble-tapping content, such as text or a photo. Your app should respond to\nboth gestures. You can define what becomes selected when someone double-taps.\nIn a text view, selection by word should be the default.\u003C\u002Fp\u003E\u003Cp\u003E让人们使用标准手势来获取编辑选项。人们期待通过长按或者双击内容来揭开菜单，比如文本或者照片。App应该对两种手势都作出回应。您可以定义当某人双击时什么被选中。在文本视图中，选区应该默认以词为单位。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-90efe8ae149ea06dab961a_b.png\& data-rawwidth=\&312\& data-rawheight=\&277\& class=\&content_image\& width=\&312\&\u003EAdjust\nplacement of edit options, if necessary.\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='312'%20height='277'&&\u002Fsvg&\& data-rawwidth=\&312\& data-rawheight=\&277\& class=\&content_image lazy\& width=\&312\& data-actualsrc=\&https:\u002F\\u002Fv2-90efe8ae149ea06dab961a_b.png\&\u003EAdjust\nplacement of edit options, if necessary.\u003C\u002Fstrong\u003E By default, the menu is positioned above or below the insertion\npoint or selection, depending on available space, and includes a pointer to the\nrelated content. Although you can’t change the shape of the menu, its position\nis configurable—you can prevent it from covering important content or parts of\nyour interface.\u003C\u002Fp\u003E\u003Cp\u003E必要时，调整编辑选项的位置。默认情况下，菜单被放在插入点或者选区的上面或下面，取决于可用空间，并且包含一个指向相关内容的箭头。尽管您不能改变菜单的形状，它的位置是可调整的——您可以让它表面覆盖界面的重要内容或重要部分。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003EDon’t implement other controls\nwith the same functionality as the edit menu.\u003C\u002Fstrong\u003E Providing multiple ways to initiate an operation results in an\ninconsistent user experience and leads to confusion. If your app lets people\nuse the menu to copy content, for example, don’t implement a copy button too.\u003C\u002Fp\u003E\u003Cp\u003E不要用其他相同功能的控件作为编辑菜单。为启动一个动作提供多种方式会导致不一致的用户体验并且导致困惑。例如，如果app能让人们用菜单拷贝内容，那就不要使用拷贝按钮。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003EAllow potentially useful\nnoneditable text to be selected and copied.\u003C\u002Fstrong\u003E People often want to add static content, such as an image label\nor social media status, to an email, a note, or a web search.\u003C\u002Fp\u003E\u003Cp\u003E允许可能有用的不可编辑的文本被选择和拷贝。人们经常想给邮件、笔记或者网页搜索添加静态内容，比如一个图像标签或者社交媒体状态\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003EDon’t add edit options to a\nbutton.\u003C\u002Fstrong\u003E If you do\nthis, people attempting to reveal the options will end up activating the button\ninstead.\u003C\u002Fp\u003E\u003Cp\u003E不要为按钮添加编辑选项。如果您这样做，人们会试图用激活按钮替代揭开选项。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003EMake edit operations undoable.\u003C\u002Fstrong\u003E The menu doesn’t require confirmation before its actions are\nperformed. Because someone could change their mind after performing an\noperation, always implement undo and redo support.\u003C\u002Fp\u003E\u003Cp\u003E让编辑操作可以撤销。在动作执行前，菜单不会请求确认。因为有的人会在执行操作之后改变主意，请一直支持撤销和重做功能。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003EExpand edit options with useful\ncustom commands.\u003C\u002Fstrong\u003E You can\nadd value by providing additional app-specific commands. Like the standard\ncommands, any custom commands should operate on selected text or objects.\u003C\u002Fp\u003E\u003Cp\u003E用有用的自定义命令扩展编辑选项。您可以通过提供附加的app特有命令增添价值。就像标准命令那样，任何自定义命令应该在选中的文本或物体上操作。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003EShow custom commands after the\nsystem-provided ones.\u003C\u002Fstrong\u003E Don’t\nintersperse custom commands with the system-provided ones, which are well known\nand frequently used.\u003C\u002Fp\u003E\u003Cp\u003E在系统提供的命令之后显示自定义命令。不要让系统提供的命令成为自定义命令的点缀，系统命令为人所熟知并且经常使用。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003EMinimize the number of custom\ncommands.\u003C\u002Fstrong\u003E Don’t\noverwhelm people with too many choices.\u003C\u002Fp\u003E\u003Cp\u003E最小化自定义命令的数量。不要让人们被太多选择压倒。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003EKeep custom command names short.\u003C\u002Fstrong\u003E Command names should be verbs or short verb phrases that\nsuccinctly describe the action to be performed. Use title-style\ncapitalization—capitalize every word except articles, coordinating conjunctions,\nand prepositions of four or fewer letters.\u003C\u002Fp\u003E\u003Cp\u003EFor implementation details, see \u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\\u002Flibrary\u002Fcontent\u002Fdocumentation\u002FStringsTextFonts\u002FConceptual\u002FTextAndWebiPhoneOS\u002FUsingCopy%2CCut%2CandPasteOperations\u002FUsingCopy%2CCut%2CandPasteOperations.html%23\u002F\u002Fapple_ref\u002Fdoc\u002Fuid\u002FTP-CH11-SW1\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003ECopy, Cut, and Paste\nOperations\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E in \u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\\u002Flibrary\u002Fcontent\u002Fdocumentation\u002FStringsTextFonts\u002FConceptual\u002FTextAndWebiPhoneOS\u002FIntroduction\u002FIntroduction.html\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EText Programming\nGuide for iOS\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E and\u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\\u002Freference\u002Fuikit\u002Fuimenucontroller\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EUIMenuController\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E.\u003C\u002Fp\u003E\u003Cp\u003E自定义命令的名字要短。命令名应该是动词或者简洁描述即将执行动作的动词短语。除了冠词、并列连词、以及四个字母以下的介词外，都要首字母大写。\u003C\u002Fp\u003E\u003Cp\u003E详情查看【\u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\\u002Flibrary\u002Fcontent\u002Fdocumentation\u002FStringsTextFonts\u002FConceptual\u002FTextAndWebiPhoneOS\u002FUsingCopy%2CCut%2CandPasteOperations\u002FUsingCopy%2CCut%2CandPasteOperations.html%23\u002F\u002Fapple_ref\u002Fdoc\u002Fuid\u002FTP-CH11-SW1\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003ECopy, Cut, and Paste\nOperations\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E in \u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\\u002Flibrary\u002Fcontent\u002Fdocumentation\u002FStringsTextFonts\u002FConceptual\u002FTextAndWebiPhoneOS\u002FIntroduction\u002FIntroduction.html\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EText Programming\nGuide for iOS\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E and\u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\\u002Freference\u002Fuikit\u002Fuimenucontroller\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EUIMenuController\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E.】\u003C\u002Fp\u003E\u003Ch2\u003E\u003Cb\u003ELabels标签\u003C\u002Fb\u003E\u003C\u002Fh2\u003E\u003Cp\u003EA label describes an\nonscreen interface element or provides a short message. Although people can’t\nedit labels, they can sometimes copy the content of labels. Labels can display\nany amount of static text, but are best kept short.\u003C\u002Fp\u003E\u003Cp\u003E标签描述了屏幕上的交互元素或者提供短信息。尽管人们不能编辑标签，他们有时能拷贝标签的内容。标签能显示任意数量的静态文本，但是最好还是短一点。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-fae6a42c08c96ba1cf8c8d79e1a0c9b9_b.png\& data-rawwidth=\&312\& data-rawheight=\&277\& class=\&content_image\& width=\&312\&\u003EKeep labels legible.\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='312'%20height='277'&&\u002Fsvg&\& data-rawwidth=\&312\& data-rawheight=\&277\& class=\&content_image lazy\& width=\&312\& data-actualsrc=\&https:\u002F\\u002Fv2-fae6a42c08c96ba1cf8c8d79e1a0c9b9_b.png\&\u003EKeep labels legible.\u003C\u002Fstrong\u003E Labels can include plain or styled text. If you adjust the style\nof a label or use custom fonts, be sure to not sacrifice legibility. It’s best\nto adopt Dynamic Type so your labels still look good when a user changes text\nsize on their device. See \u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\\u002Fios\u002Fhuman-interface-guidelines\u002Fvisual-design\u002Ftypography\u002F%23dynamic-type-sizes\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EDynamic Type\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E. You\nshould also test your labels with accessibility options enabled, such as bold\ntext. See \u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\\u002Fios\u002Fhuman-interface-guidelines\u002Finteraction\u002Faccessibility\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EAccessibility\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E.\u003C\u002Fp\u003E\u003Cp\u003ETo learn about text, see \u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\\u002Flibrary\u002Fcontent\u002Fdocumentation\u002FCocoa\u002FConceptual\u002FStrings\u002FintroStrings.html\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EString Programming\nGuide\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E. To learn about creating styling text, see \u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\\u002Flibrary\u002Fcontent\u002Fdocumentation\u002FCocoa\u002FConceptual\u002FAttributedStrings\u002FAttributedStrings.html\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EAttributed String\nProgramming Guide\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E. For label implementation details, see \u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\\u002Freference\u002Fuikit\u002Fuilabel\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EUILabel\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E.\u003C\u002Fp\u003E\u003Cp\u003E标签保持可读。标签可以包含朴素或者风格化的文本。如果您调整标签的样式或者使用自定义字体，确认不要牺牲可读性。最好采用动态文本，这样当用户在设备上改变文本大小时，您的标签还能看上去不错。详见【\u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\\u002Fios\u002Fhuman-interface-guidelines\u002Fvisual-design\u002Ftypography\u002F%23dynamic-type-sizes\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EDynamic Type\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E】\u003C\u002Fp\u003E\u003Cp\u003E您也应该在无障碍选项打开时测试标签，比如粗体文本。详见【\u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\\u002Fios\u002Fhuman-interface-guidelines\u002Finteraction\u002Faccessibility\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EAccessibility\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E】\u003C\u002Fp\u003E\u003Cp\u003E了解文本，详见【 \u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\\u002Flibrary\u002Fcontent\u002Fdocumentation\u002FCocoa\u002FConceptual\u002FStrings\u002FintroStrings.html\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EString Programming\nGuide\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E】；了解创建样式文本，详见【\u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\\u002Flibrary\u002Fcontent\u002Fdocumentation\u002FCocoa\u002FConceptual\u002FAttributedStrings\u002FAttributedStrings.html\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EAttributed String\nProgramming Guide\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E】，关于标签使用，详见【\u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\\u002Freference\u002Fuikit\u002Fuilabel\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EUILabel\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E.】\u003C\u002Fp\u003E\u003Ch2\u003E\u003Cb\u003EPage Controls页面控件\u003C\u002Fb\u003E\u003C\u002Fh2\u003E\u003Cp\u003EA page control shows\nthe position of the current page in a flat list of pages. It appears as a\nseries of small indicator dots, representing the available pages in the order\nthey were opened. A solid dot denotes the current page. Visually, these dots\nare always equidistant, and are clipped if too many appear onscreen. Users can\ntap the leading or trailing edge of a page control to visit the next or\nprevious page, but they can't tap a specific dot to go to a specific\npage. Navigation always occurs sequentially, usually by swiping the page\nto one side.\u003C\u002Fp\u003E\u003Cp\u003E页面控件用简单的页面列表，显示当前页面的位置。它显示为一系列小的指示点，代表以打开顺序排列的可用页面。实心点代表当前页面。视觉上，这些点总是等距离的，并且如果屏幕上出现太多的话就会被剪切掉。用户可以点击页面控件的首端或者尾端来访问下一页或前一页，但是他们不能点到特定的点上去到特定的页面。导航总是按顺序出现，通常通过从一侧扫页面。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003EDon’t use a page\ncontrol with hierarchical pages.\u003C\u002Fstrong\u003E A page control doesn’t show how pages are related or indicate\nwhich page corresponds to each dot. This type of control is designed for pages\nthat are peers to one another.\u003C\u002Fp\u003E\u003Cp\u003E不要在层级页面之间使用页面控制。页面控制不显示页面之间的联系或者说明每个点对应哪个页面。这种控件是为了平级页面设计的。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-be3fbf1019a5fcf352b64_b.png\& data-rawwidth=\&312\& data-rawheight=\&278\& class=\&content_image\& width=\&312\&\u003EDon’t display too many pages.\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='312'%20height='278'&&\u002Fsvg&\& data-rawwidth=\&312\& data-rawheight=\&278\& class=\&content_image lazy\& width=\&312\& data-actualsrc=\&https:\u002F\\u002Fv2-be3fbf1019a5fcf352b64_b.png\&\u003EDon’t display too many pages.\u003C\u002Fstrong\u003E More than about 10 dots are hard to count at a glance, and more\nthan about 20 open pages are time-consuming to visit in sequence. If your app\nneeds to display more than 20 pages as peers, consider using a different\narrangement—such as a grid—that enables nonsequential navigation.\u003C\u002Fp\u003E\u003Cp\u003E不要显示太多页面。超过十个点就很难在一瞥之间数清，按顺序浏览超过20个点就很耗时间。如果您的app需要显示超过20个评级页面，考虑使用一种不同的安排——比如表格——能实现非顺序的导航。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003ECenter page controls at the bottom\nof the screen.\u003C\u002Fstrong\u003E A page\ncontrol should always be centered and positioned between the bottom of the\ncontent and the bottom of the screen. This keeps it visible, without blocking\ncontent.\u003C\u002Fp\u003E\u003Cp\u003EFor implementation details, see \u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\\u002Freference\u002Fuikit\u002Fuipagecontrol\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EUIPageControl\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E.\u003C\u002Fp\u003E\u003Cp\u003E在页面底部居中放置页面控件。一个页面控件应该总是居中而且在内容末端和屏幕底部之间。这使得它可见，不会遮挡内容。\u003C\u002Fp\u003E\u003Cp\u003E详情查看【 \u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\\u002Freference\u002Fuikit\u002Fuipagecontrol\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EUIPageControl\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E】\u003C\u002Fp\u003E\u003Ch2\u003E\u003Cb\u003EPickers选择器\u003C\u002Fb\u003E\u003C\u002Fh2\u003E\u003Cp\u003EA picker includes\none or more scrollable lists of distinct values, each of which has a single\nselected value—appearing in darker text in the center of the view. A picker is\noften displayed at the bottom of the screen or in a popover when the user is\nediting a field or tapping a menu. Pickers can also appear inline, such as\nwhile editing a date in a Calendar event. The height of a picker is roughly the\nheight of five rows of list values. The width of a picker is either the width\nof the screen or its enclosing view, depending on the device and context.\u003C\u002Fp\u003E\u003Cp\u003E选择器包含一个或以上不同值的滚动列表，每个有一个单独的选中的值——外观是视图中央的黑色文本。选择器通常显示在屏幕底端，或者当用户编辑一个域或点击菜单时在一个弹出框里。选择器也可以内联显示，比如在Calendar日历事件中编辑日期时。选择器的高度大概是五行列表值的高度。选择器的宽度可以与屏幕同宽或者与它的封闭视图等宽，取决于设备和情境\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003EUse predictable and\nlogically ordered values.\u003C\u002Fstrong\u003E Many\nvalues in a picker may be hidden when the scrollable lists are stationary. It's\nbest when people can predict what these values are, such as with a list of\nalphabetized countries, so they can move through the lists quickly.\u003C\u002Fp\u003E\u003Cp\u003E使用可预见的、按逻辑排列的值。当滚动列表静止时，选择器中的很多值可能被隐藏。最好人们能预见这些值是什么，比如一列按字母顺序排列的国家，这样他们能快速浏览列表。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003EAvoid switching screens\nto show a picker.\u003C\u002Fstrong\u003E A picker\nworks well when displayed in context, below or in close proximity to the field\nbeing edited.\u003C\u002Fp\u003E\u003Cp\u003E避免切换屏幕来显示选择器。当被显示在情境中，选择器会发挥作用，低于或者接近正在编辑的字段。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003EUse a table instead of\na picker for large value lists.\u003C\u002Fstrong\u003ELong lists can be\ntedious to navigate in a picker. A table has adjustable height and can include\nan index, making scrolling much faster.\u003C\u002Fp\u003E\u003Cp\u003EFor implementation\ndetails, see \u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\\u002Freference\u002Fuikit\u002Fuipickerview\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EUIPickerView\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E.\u003C\u002Fp\u003E\u003Cp\u003E对于大值列表，请使用表格替代选择器。通过选择器导航一个长长的列表可能会很乏味。表格可以调整高度，而且能包含索引，让滚动更快速。\u003C\u002Fp\u003E\u003Cp\u003E详情查看【\u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\\u002Freference\u002Fuikit\u002Fuipickerview\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EUIPickerView\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E】\u003C\u002Fp\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-c411fdd7b780fe8d5f7c7d23ba9485e7_b.png\& data-rawwidth=\&272\& data-rawheight=\&482\& class=\&content_image\& width=\&272\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='272'%20height='482'&&\u002Fsvg&\& data-rawwidth=\&272\& data-rawheight=\&482\& class=\&content_image lazy\& width=\&272\& data-actualsrc=\&https:\u002F\\u002Fv2-c411fdd7b780fe8d5f7c7d23ba9485e7_b.png\&\u003E\u003Ch3\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-2fd52a958e29577cab9b_b.png\& data-rawwidth=\&270\& data-rawheight=\&481\& class=\&content_image\& width=\&270\&\u003EDate Pickers日期选择器\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='270'%20height='481'&&\u002Fsvg&\& data-rawwidth=\&270\& data-rawheight=\&481\& class=\&content_image lazy\& width=\&270\& data-actualsrc=\&https:\u002F\\u002Fv2-2fd52a958e29577cab9b_b.png\&\u003EDate Pickers日期选择器\u003C\u002Fh3\u003E\u003Cp\u003EA date picker is an\nefficient interface for selecting a specific date, time, or both. It also\nprovides an interface for displaying a countdown timer.\u003C\u002Fp\u003E\u003Cp\u003EA date picker has\nfour modes, each of which presents a different set of selectable values.\u003C\u002Fp\u003E\u003Cp\u003E日期选择器是一个高效的界面，用于选择特定的日期，时间或者两者。它也提供显示倒数计时器的界面。\u003C\u002Fp\u003E\u003Cp\u003E日期选择器有四个模式，每个代表不同的可选择值。\u003C\u002Fp\u003E\u003Cp\u003E·
\n\u003Cstrong\u003EDate.\u003C\u002Fstrong\u003E Displays months, days of the month, and years.\u003C\u002Fp\u003E\u003Cp\u003E·
\n\u003Cstrong\u003E日期。\u003C\u002Fstrong\u003E 显示月份，天数，以及年。\u003C\u002Fp\u003E\u003Cp\u003E·
\n\u003Cstrong\u003ETime.\u003C\u002Fstrong\u003E Displays hours, minutes, and (optionally) an AM\u002FPM designation.\u003C\u002Fp\u003E\u003Cp\u003E·
\n\u003Cstrong\u003E时间。\u003C\u002Fstrong\u003E显示小时，分钟，上午下午（可选）\u003C\u002Fp\u003E\u003Cp\u003E·
\n\u003Cstrong\u003EDate and time.\u003C\u002Fstrong\u003E Displays dates, hours, minutes, and (optionally) an AM\u002FPM\ndesignation.\u003C\u002Fp\u003E\u003Cp\u003E·
\n\u003Cstrong\u003E日期和时间。\u003C\u002Fstrong\u003E显示日期，小时，分钟，上午下午(可选)\u003C\u002Fp\u003E\u003Cp\u003E·
\n\u003Cstrong\u003ECountdown timer.\u003C\u002Fstrong\u003E Displays hours and minutes, up to a maximum of 23 hours and 59\nminutes.\u003C\u002Fp\u003E\u003Cp\u003E·
\n\u003Cstrong\u003E倒数计时器。\u003C\u002Fstrong\u003E显示小时和分钟，最大显示23小时59分钟。\u003C\u002Fp\u003E\u003Cp\u003EThe exact values\nshown in a date picker and their order depend upon the user’s locale.\u003C\u002Fp\u003E\u003Cp\u003E确切的值显示在日期选择器中，并且他们的顺序取决于用户位置。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003EConsider providing less\ngranularity when specifying minutes.\u003C\u002Fstrong\u003E By default, a minute list includes 60 values (0 to 59). You can\noptionally increase the minute interval as long as it divides evenly into 60.\nFor example, you might want quarter-hour intervals (0, 15, 30, and 45).\u003C\u002Fp\u003E\u003Cp\u003EFor implementation\ndetails, see \u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\\u002Freference\u002Fuikit\u002Fuidatepicker\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EUIDatePicker\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E.\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cp\u003E当特定分钟时，考虑提供更少的间隔。默认情况下，一分钟包含60个值（0-59）。您可以选择增加分钟间隔只要他平均分为六十份。例如，您可能想要刻钟的间隔。\u003C\u002Fp\u003E&,&updated&:new Date(&T05:07:05.000Z&),&canComment&:false,&commentPermission&:&anyone&,&commentCount&:0,&collapsedCount&:0,&likeCount&:2,&state&:&published&,&isLiked&:false,&slug&:&&,&isTitleImageFullScreen&:false,&rating&:&none&,&titleImage&:&&,&links&:{&comments&:&\u002Fapi\u002Fposts\u002F2Fcomments&},&reviewers&:[],&topics&:[{&url&:&https:\u002F\\u002Ftopic\u002F&,&id&:&&,&name&:&iOS 开发&},{&url&:&https:\u002F\\u002Ftopic\u002F&,&id&:&&,&name&:&交互设计&},{&url&:&https:\u002F\\u002Ftopic\u002F&,&id&:&&,&name&:&app制作开发&}],&adminClosedComment&:false,&titleImageSize&:{&width&:0,&height&:0},&href&:&\u002Fapi\u002Fposts\u002F&,&excerptTitle&:&&,&column&:{&slug&:&c_&,&name&:&一个寂寞的汽车交互设计师在此发出呼告&},&tipjarState&:&inactivated&,&annotationAction&:[],&sourceUrl&:&&,&pageCommentsCount&:0,&hasPublishingDraft&:false,&snapshotUrl&:&&,&publishedTime&:&T13:07:05+08:00&,&url&:&\u002Fp\u002F&,&lastestLikers&:[{&bio&:&UI设计师&,&isFollowing&:false,&hash&:&f4a2f891b0675bed9d858a4ab1d6512f&,&uid&:104500,&isOrg&:false,&slug&:&xiao-dou-jiang-67&,&isFollowed&:false,&description&:&&,&name&:&小豆浆&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Fxiao-dou-jiang-67&,&avatar&:{&id&:&da8e974dc&,&template&:&https:\u002F\\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:&ux designer &,&isFollowing&:false,&hash&:&74e52afd5e030ca037a1d&,&uid&:28,&isOrg&:false,&slug&:&chun-juan-71&,&isFollowed&:false,&description&:&&,&name&:&春卷&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Fchun-juan-71&,&avatar&:{&id&:&aa5d23cfac7ac3db427d758f69201d2d&,&template&:&https:\u002F\\u002F50\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false}],&summary&:&\u003Cimg src=\&http:\u002F\\u002Fv2-c411fdd7b780fe8d5f7c7d23bax112.png\& data-rawwidth=\&272\& data-rawheight=\&482\& class=\&origin_image inline-img zh-lightbox-thumb\& data-original=\&http:\u002F\\u002Fv2-c411fdd7b780fe8d5f7c7d23ba9485e7_r.png\&\u003E\u003Cb\u003EButtons按钮\u003C\u002Fb\u003EButtons initiate app-specific actions,\nhave customizable backgrounds, and can include a title or an icon. The system\nprovides a number of predefined button styles for most use cases. You can also\ndesign fully custom buttons.For…&,&reviewingCommentsCount&:0,&meta&:{&previous&:{&isTitleImageFullScreen&:false,&rating&:&none&,&titleImage&:&&,&links&:{&comments&:&\u002Fapi\u002Fposts\u002F2Fcomments&},&topics&:[{&url&:&https:\u002F\\u002Ftopic\u002F&,&id&:&&,&name&:&iOS 开发&},{&url&:&https:\u002F\\u002Ftopic\u002F&,&id&:&&,&name&:&交互设计&},{&url&:&https:\u002F\\u002Ftopic\u002F&,&id&:&&,&name&:&app制作开发&}],&adminClosedComment&:false,&href&:&\u002Fapi\u002Fposts\u002F&,&excerptTitle&:&&,&author&:{&bio&:&专栏：一个寂寞的汽车交互设计师在此发出呼告&,&isFollowing&:false,&hash&:&55ad36e0c5bc228f82bb1c0030fc3dfd&,&uid&:64,&isOrg&:false,&slug&:&wu-rui-89&,&isFollowed&:false,&description&:&&,&name&:&伍睿&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Fwu-rui-89&,&avatar&:{&id&:&958fb5ac4&,&template&:&https:\u002F\\u002F50\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},&column&:{&slug&:&c_&,&name&:&一个寂寞的汽车交互设计师在此发出呼告&},&content&:&\u003Ch2\u003E\u003Cb\u003EPopovers弹出框\u003C\u002Fb\u003E\u003C\u002Fh2\u003E\u003Cp\u003E\u003Cimg src=\&http:\u002F\\u002Fv2-15b18aa1ff32dabf943e355_b.png\& data-rawwidth=\&421\& data-rawheight=\&316\& class=\&origin_image zh-lightbox-thumb\& width=\&421\& data-original=\&http:\u002F\\u002Fv2-15b18aa1ff32dabf943e355_r.png\&\u003EA popover is a transient view that\nappears above other content onscreen when you tap a control or in an area.\nTypically, a popover includes an arrow pointing to the location from which it\nemerged. Popovers are most appropriate on larger screens and can contain any\nvariety of elements, including navigation bars, toolbars, tab bars, tables,\ncollections, images, maps, and custom views. When a popover is visible,\ninteractions with other views are normally disabled until the popover is\ndismissed. Use a popover to show options or information related to the content\nonscreen. Many iPad apps, for example, show a popover of sharing options when\nyou tap the Share button.\u003C\u002Fp\u003E\u003Cp\u003E一个弹出框是一种短暂的视图。当您点击一个控件或者某区域时，弹出框在屏幕上的其他内容之上出现。一般来说，弹出框包括一个指向出现位置的箭头。弹出框在大屏幕上最为合适，并且能包含各种元素，包括导航条，工具条，标签来，列表，集合，图像，地图以及自定义视图。当弹出框可见时，与其他视图的交互通常就不可用了，直到弹出框被关掉。使用弹出框显示与屏幕内容相关的选项和信息。例如，很多iPad app会在您点击分享按钮时显示一个关于分享选项的弹出框。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003EUse a Close button for\nconfirmation and guidance only.\u003C\u002Fstrong\u003E A Close button, such as Cancel or Done, is worth including if it\nprovides clarity, such as exiting with or without saving changes. In general, a\npopover should close automatically when its presence is no longer necessary. In\nmost cases, a popover should close when someone taps outside of its bounds or\nselects an item in the popover. If multiple selections can be made, the popover\nshould remain open until someone explicitly dismisses it or taps outside of its\nbounds.\u003C\u002Fp\u003E\u003Cp\u003E只在确认和指南类内容使用关闭按钮。一个关闭按钮，例如取消或完成，只有在提供清晰的语义时才可以使用，比如保存修改退出或者不保存修改退出。总的来说，弹出框应该在不再需要时自动关闭。在大多数情况下，弹出框应该在某人点击到界外或者在弹出框里选一个选项之后关闭。如果可以做多种选择，弹出框应该保持开放，直到某人特地关掉它或者点击界外。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003EAlways save work when\nautomatically closing a popover.\u003C\u002Fstrong\u003E It’s easy to dismiss a popover unintentionally by tapping\nanother part of the screen. Discard work only when someone taps an explicit\nCancel button.\u003C\u002Fp\u003E\u003Cp\u003E当自动关闭弹出框时，总是存储工作。通过点击屏幕的其他部分很容易无意识地关掉一个弹出框。只有在某人点击一个明显的取消按钮时才放弃工作。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003EPosition popovers appropriately\nonscreen.\u003C\u002Fstrong\u003E A\npopover’s arrow should point as directly as possible to the element that\nrevealed it. Because popovers can’t be dragged around the screen, a popover\nshouldn’t cover essential content people may need to see while using the\npopover. A popover also shouldn’t cover the element that was tapped to show the\npopover.\u003C\u002Fp\u003E\u003Cp\u003E在屏幕上恰当安排弹出框的位置。弹出框的箭头应该尽可能直接指向弹出的元素。因为弹出框不能在屏幕上拖拽，弹出框不应该覆盖人们使用它期间可能需要看的内容。弹出框也不应该覆盖弹出它的元素。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003EShow one popover at a time.\u003C\u002Fstrong\u003E Displaying multiple popovers clutters the interface and causes\nconfusion. Never show a cascade or hierarchy of popovers, in which one emerges\nfrom another. If you need to show a new popover, close the open one first.\u003C\u002Fp\u003E\u003Cp\u003E一次只显示一个弹出框。显示多个弹出框会让界面杂乱，引起困惑。永远不要显示一堆弹出框或者好几层弹出框，就是那种一个从另一个中出现的。如果您需要显示一个新的弹出框，先把已经打开的关掉。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003EDon’t show another view over a\npopover.\u003C\u002Fstrong\u003E Except\nfor an alert, nothing should be displayed on top of a popover.\u003C\u002Fp\u003E\u003Cp\u003E不要在弹出框上再显示一个视图。除非是警报，否则任何东西都不能显示在一个弹出框之上。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003EWhen possible, let users close one\npopover and open another with a single tap.\u003C\u002Fstrong\u003E Avoiding extra taps is especially desirable when several\ndifferent bar buttons each open a popover.\u003C\u002Fp\u003E\u003Cp\u003E可能的话，让用户可以用一个简单的点击来关掉一个弹出框再打开另一个。当好几个不同的条状按钮每个都能打开一个弹出框时，避免多余点击就尤为重要了。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003EAvoid making a popover too big.\u003C\u002Fstrong\u003E A popover shouldn’t take over the entire screen. Make it only\nbig enough to display its contents and point to the place it came from. Be\naware that the system might adjust the size of a popover to ensure it fits well\nonscreen.\u003C\u002Fp\u003E\u003Cp\u003E避免弄出太大的弹出框。弹出框不应该接管整个屏。让它有足够大的地方显示内容并且指向来处就可以了。注意，系统可能调整弹出框的尺寸以确保它适应屏幕。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003EMake sure custom popovers look\nlike popovers.\u003C\u002Fstrong\u003E Although\nyou can customize many of the visual aspects of a popover, avoid creating a\ndesign people might not recognize as a popover. Popovers tend to work best when\nthey contain standard controls and views.\u003C\u002Fp\u003E\u003Cp\u003E确定自定义的弹出框看起来像弹出框。尽管您可以自定义弹出框的许多视觉元素。避免创造一个人们可能不认为是弹出框的设计。当弹出框包含标准控件和视图时可能运行最好。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003EProvide a smooth transition when\nchanging the size of a popover.\u003C\u002Fstrong\u003E Some popovers provide both condensed and expanded views of the\nsame information. If you adjust the size of a popover, animate the change to\navoid giving the impression that a new popover replaced the old one.\u003C\u002Fp\u003E\u003Cp\u003EFor implementation details, see \u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\\u002Freference\u002Fuikit\u002Fuipopoverpresentationcontroller\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EUIPopoverPresentationController\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E.\u003C\u002Fp\u003E\u003Cp\u003E变更弹出框的尺寸时，提供一个顺滑的过渡。有些弹出框同时为同一信息提供缩略图和扩展视图。如果您要调整弹出框的尺寸，请给这个改变加上动画，以免给人留下这种印象——新的弹出框取代了旧的。\u003C\u002Fp\u003E\u003Cp\u003E详情查看【 \u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\\u002Freference\u002Fuikit\u002Fuipopoverpresentationcontroller\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EUIPopoverPresentationController\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E.】\u003C\u002Fp\u003E\u003Ch2\u003E\u003Cb\u003EScroll Views滚动视图\u003C\u002Fb\u003E\u003C\u002Fh2\u003E\u003Cp\u003EA scroll view allows\nusers to browse content, such as text in a document or a collection of images,\nthat’s larger than the visible area. As people swipe, flick, drag, tap, and\npinch, a scroll view follows the gesture, revealing or zooming content in a way\nthat feels natural. A scroll view itself has no appearance, but does display\ntransient scrolling indicators as people interact with it. A scroll view can also\nbe configured to operate in paging mode, where scrolling reveals an entirely\nnew page of content rather than moving around the current page.\u003C\u002Fp\u003E\u003Cp\u003E滚动视图让用户能浏览比可视区域大的内容，比如文档中的文本或者图片集合。当人们横扫，滑动，拖拽，点击，捏合，滚动视图会随着手势用自然地感觉揭开或者缩放内容。滚动视图本身没有外观，但是在人们与之交互时会显示临时的滚动条。滚动视图也可以设置为在页面模式操作。页面模式中，滚动可以揭开一整页新内容，而不是在当前页面中到处晃。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003ESupport zoom behavior\nappropriately.\u003C\u002Fstrong\u003E If it\nmakes sense in your app, let people pinch or double-tap to zoom in and out.\nWhen you enable zoom, set maximum and minimum scale values that make sense. For\nexample, zooming in on text until a single character fills the screen probably\ndoesn’t make sense in most apps.\u003C\u002Fp\u003E\u003Cp\u003E适时支持缩放行为。如果在app中有意义，请让人们可以捏合或者双击来缩放。当您开启缩放功能，请设置有意义的最大或者最小缩放范围。例如，在大多数app里，将文本放大至单个字母占满屏幕没什么意义。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003EConsider showing a page\ncontrol element when a scroll view is in paging mode.\u003C\u002Fstrong\u003E A page control shows how many pages, screens, or other chunks of\ncontent are available and indicates which one is currently visible. If you show\na page control with a scroll view, disable the scrolling indicator on the same\naxis to avoid confusion. For additional guidance, see \u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\\u002Fios\u002Fhuman-interface-guidelines\u002Fui-controls\u002Fpage-controls\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EPage Controls\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E.\u003C\u002Fp\u003E\u003Cp\u003E考虑当滚动视图在页面模式时显示一个页面控制元素。页面控制显示内容有多少页，多少屏，或者其他的计量单位，并且显示哪一个是当前可见的。如果您在滚动视图里显示一个页面控件，请将同轴的滚动条关掉以免困惑。详情查看【\u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\\u002Fios\u002Fhuman-interface-guidelines\u002Fui-controls\u002Fpage-controls\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EPage Controls\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E.】\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003EDon’t place a scroll\nview inside of another scroll view.\u003C\u002Fstrong\u003EDoing so creates an\nunpredictable interface that’s difficult to control.\u003C\u002Fp\u003E\u003Cp\u003E不要在滚动视图内再放一个滚动视图。这么做会创建一个难以控制的不可预料的界面\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003EIn general, display one scroll\nview at a time.\u003C\u002Fstrong\u003E People\noften make large swipe gestures when scrolling, and it can be hard to avoid\ninteracting with a neighboring scroll view on the same screen. If you need to\nput two scroll views on one screen, consider allowing them to scroll in\ndifferent directions so one gesture is less likely to affect both views. For\nexample, when an iPhone is in portrait orientation, the Stocks app shows stock\nquotes that scroll vertically above company-specific information that scrolls\nhorizontally.\u003C\u002Fp\u003E\u003Cp\u003EFor implementation details, see \u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\\u002Freference\u002Fuikit\u002Fuiscrollview\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EUIScrollView\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E.\u003C\u002Fp\u003E\u003Cp\u003E总的来说，同一时间只显示一个滚动视图。人们经常在滚动时做大幅度的横扫动作，并且在同一屏幕上很难避免与相邻的滚动视图交互。如果您需要将两个滚动视图放在同一屏上，考虑让他们在不同方向上滚动，这样一个手势就可能不太会影响到两个视图。比如，当一个iPhone在纵向模式时，股票app显示横向滚动的企业信息，在它上面显示纵向滚动的股票报价。\u003C\u002Fp\u003E\u003Cp\u003E详情查看【\u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\\u002Freference\u002Fuikit\u002Fuiscrollview\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EUIScrollView\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E.】\u003C\u002Fp\u003E\u003Ch2\u003E\u003Cb\u003ESplit Views拆分视图\u003C\u002Fb\u003E\u003C\u002Fh2\u003E\u003Cp\u003E\u003Cimg src=\&http:\u002F\\u002Fv2-5fab7e9e547d3ac329cc2d26eee2b57f_b.png\& data-rawwidth=\&509\& data-rawheight=\&382\& class=\&origin_image zh-lightbox-thumb\& width=\&509\& data-original=\&http:\u002F\\u002Fv2-5fab7e9e547d3ac329cc2d26eee2b57f_r.png\&\u003EA split view manages the presentation\nof two side-by-side panes of content, with persistent content in the primary\npane and related information in the secondary pane. Each pane can contain any\nvariety of elements, including navigation bars, toolbars, tab bars, tables,\ncollections, images, maps, and custom views. Split views are often used with\ a list of filter categories appears in the primary pane,\nand the filtered results for the selected category are shown in the secondary\npane. If your app requires it, the primary pane can overlay the secondary pane\nand can be hidden offscreen when not in use. This is particularly useful when\nthe device is in portrait orientation, as it allows more room for viewing\ncontent in the secondary pane.\u003C\u002Fp\u003E\u003Cp\u003E拆分视图管理两个并排的内容窗口，基本窗口显示持续的内容，第二窗口显示相关信息。每个窗口包含任何种类的元素，包括导航条，工具条，标签栏，表格，集合，图像，地图，以及自定义视图。拆分视图通常用于可过滤的内容：一列可过滤的分类出现在基础窗口，挑选种类的过滤结果显示在第二窗口。如果您的app需要它。基础窗口可以叠在第二窗口上，不用的时候还可以藏在屏幕之外。当设备处于纵向模式时尤其有用，因为它能给在第二窗口查看内容更多空间。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003EChoose a split-view layout that\nworks well with your content.\u003C\u002Fstrong\u003E By\ndefault, a split view devotes a third of the screen to the primary pane and\ntwo-thirds to the secondary pane. The screen can also be split into halves.\nChoose an appropriate split based on your content, and make sure the panes\ndon’t look unbalanced. Avoid creating a secondary pane that’s narrower than the\nprimary pane.\u003C\u002Fp\u003E\u003Cp\u003E选择一个与内容相适配的拆分视图布局。默认情况下，拆分视图中，三分之一留给基础窗口，三分之二留给第二窗口。也可以把屏幕分成一半一半。根据内容选择合适的拆分，并且确认这些窗口不会看起来失衡。避免创建比基础窗口还窄的第二窗口。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003EPersistently highlight\nthe active selection in the primary pane.\u003C\u002Fstrong\u003E Although\nthe secondary pane’s content can change, it should always correspond to a clearly\nidentifiable selection in the primary pane. This helps people\nunderstand the relationship between the panes.\u003C\u002Fp\u003E\u003Cp\u003E一直突出基础窗口里的活动选择。尽管第二窗口的内容可以改变，它应该一直回应基础窗口中清晰可辨的选择。这能帮助人们理解窗口之间的关系。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003EIn general, restrict navigation to\none side of a split view.\u003C\u002Fstrong\u003E Placing\nnavigation in both panes of a split view makes it hard for people to stay\noriented and discern the relationship between the two panes.\u003C\u002Fp\u003E\u003Cp\u003E总的来说，只在拆分视图的一侧使用导航。将导航放在拆分视图的两边会让人们难以找到方向，并且难以辨别两个窗口的关系。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003EProvide multiple ways to access a\nhidden primary pane.\u003C\u002Fstrong\u003E On\nlayouts where the primary pane may be offscreen, be sure to provide a\nbutton—typically in a navigation bar—to reveal the pane. Unless your app uses\nthe swipe gesture to perform other functions, let people swipe from the side of\nthe screen to access the primary pane too.\u003C\u002Fp\u003E\u003Cp\u003EFor implementation details, see \u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\\u002Freference\u002Fuikit\u002Fuisplitviewcontroller\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EUISplitViewController\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E.\u003C\u002Fp\u003E\u003Cp\u003E提供多种到达隐藏的基础窗口的方式。在基础窗口可能在屏幕之外的布局中，确认提供一个按钮——通常在导航条里——用来揭开窗口。除非您的app使用横扫手势来实行其他功能，让人们从屏幕一端横扫也能获取基础窗口。\u003C\u002Fp\u003E\u003Ch2\u003E\u003Cb\u003ETables表格\u003C\u002Fb\u003E\u003C\u002Fh2\u003E\u003Cp\u003EA table presents data as a scrolling,\nsingle-column list of rows that can be divided into sections or groups. Use a\ntable to display large or small amounts of information cleanly and efficiently\nin the form of a list. Generally speaking, tables are ideal for text-based\ncontent, and often appear as a means of navigation on one side of a split view,\nwith related content shown on the opposite side. See \u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\\u002Fios\u002Fhuman-interface-guidelines\u002Fui-views\u002Fsplit-views\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003ESplit Views\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E.\u003C\u002Fp\u003E\u003Cp\u003E表格将数据呈现为一个滚动的单栏多列列表，行可以被分成多个区域或组合。用表格来简洁高效地通过列表方式显示大量或少量信息。总的来说，表格对于文本内容很理想，而且经常作为导航方式出现在拆分视图的一侧，另一边显示相关内容。详情查看【\u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\\u002Fios\u002Fhuman-interface-guidelines\u002Fui-views\u002Fsplit-views\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003ESplit Views\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E.】\u003C\u002Fp\u003E\u003Cp\u003EiOS implements two styles of table,\nplain and grouped.\u003C\u002Fp\u003E\u003Cp\u003EiOS用两种风格的表格，纯表格和分组表格。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E\u003Cimg src=\&http:\u002F\\u002Fv2-8bce4aafb0aaa_b.png\& data-rawwidth=\&259\& data-rawheight=\&461\& class=\&content_image\& width=\&259\&\u003EPlain.\u003C\u002Fstrong\u003E Rows can be separated into labeled sections, and an optional\nindex can appear vertically along the right edge of the table. A header can\nappear before the first item in a section, and a footer can appear after the\nlast item.\u003C\u002Fp\u003E\u003Cp\u003E纯表格。行可以被分为多个标签区域，并且一个可选索引可能垂直出现在表格右边缘。一个区域的第一个项目之前可能出现页眉，最后一个项目之后可能出现一个页脚。\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cp\u003E\u003Cstrong\u003E\u003Cimg src=\&http:\u002F\\u002Fv2-f0fb3bcf6e4_b.png\& data-rawwidth=\&257\& data-rawheight=\&228\& class=\&content_image\& width=\&257\&\u003E\u003Cimg src=\&http:\u002F\\u002Fv2-f0baf9ca2a5ba3af4c48_b.png\& data-rawwidth=\&312\& data-rawheight=\&277\& class=\&content_image\& width=\&312\&\u003EGrouped.\u003C\u002Fstrong\u003E Rows are displayed in groups, which can be preceded by a header\nand followed by a footer. This style of table always contains at least one\ngroup and each group always contains at least one row. A grouped table doesn’t\ninclude an index.\u003C\u002Fp\u003E\u003Cp\u003E分组表格。行被成组显示，可能前面有页眉，后面有页脚。这种表格总是包含至少一个分组并且每个分组一直包含至少一行。分组表格不包括索引。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003EThink about table width.\u003C\u002Fstrong\u003E Thin tables can cause truncation and wrapping, making them hard\nto read and scan quickly at a distance. Wide tables can also be difficult to\nread and scan, and can take away space from content.\u003C\u002Fp\u003E\u003Cp\u003E考虑表格宽度。太窄的表格可能会引起内容被砍掉或者被压缩，让他们难以阅读，有点距离时难以快速扫视。宽表格也可能难读难扫，并且可能占据内容空间。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003EBegin showing table content\nquickly.\u003C\u002Fstrong\u003E Don’t\nwait for extensive table content to load before showing something. Fill\nonscreen rows with textual data immediately and show more complex data—such as\nimages—as it becomes available. This technique gives people useful information\nright away and increases the perceived responsiveness of your app. In some\ncases, showing stale, older data may make sense until fresh, new data arrives.\u003C\u002Fp\u003E\u003Cp