Break Point。

个人笔记 / Human Interface Guideline

---

*这只是个人笔记,留档备自己索引/回看。会有很多省略的部分。

--

Human Interface Guidelines


iOS design theme

  • clarity清晰:层级清晰内容清晰主次分明

  • deference遵从:符合用户期望、突出内容

  • depth深度:交互反映层级

Clarity. Throughout the system, text is legible at every size, icons are precise and lucid, adornments are subtle and appropriate, and a sharpened focus on functionality motivates the design. Negative space, color, fonts, graphics, and interface elements subtly highlight important content and convey interactivity.

Deference. Fluid motion and a crisp, beautiful interface help people understand and interact with content while never competing with it. Content typically fills the entire screen, while translucency and blurring often hint at more. Minimal use of bezels, gradients, and drop shadows keep the interface light and airy, while ensuring that content is paramount.

Depth. Distinct visual layers and realistic motion convey hierarchy, impart vitality, and facilitate understanding. Touch and discoverability heighten delight and enable access to functionality and additional content without losing context. Transitions provide a sense of depth as you navigate through content.


design principles

aesthetic integrity 完整性(?) 即界面风格应与功能一致

Aesthetic integrity represents how well an app’s appearance and behavior integrate with its function.


consistency 一致性direct manipulation 直接操作

Through direct manipulation, they can see the immediate, visible results of their actions. 直接的、视觉上的操作效果


feedback 反馈

The built-in iOS apps provide perceptible feedback in response to every user action. 原生iOS应用在每次操作都有反馈


metaphors 隐喻(与现实关联)

Metaphors work well in iOS because people physically interact with the screen. 让用户进行物理上的交互,eg纸张可翻页,等。


app architecture

Accessibility 为视觉/听力等障碍进行细微调整

iOS offers extensive accessibility features for users with vision loss, hearing loss, and other disabilities.

Use sufficient color contrast ratios. Insufficient contrast in your app makes content hard to read for everyone. Icons and text might blend with the background, for example. 颜色对比度,不低于4.5:1

Strive for a minimum contrast ratio of 4.5:1, although 7:1 is preferred because it meets more stringent accessibility standards.


Loading 加载:至少放一个会动的标识;最好加上体现进度的(进度条);让内容越快出来越好。or在加载区间内放置娱乐元素(egDL里的答题)

Show the screen immediately, and use placeholder text, graphics, or animations to identify where content isn't available yet. 

Replace these placeholder elements as the content loads. 使用占位符


Modality 模态:当前进程时隔绝其它内容。可以通过退出或完成当前进程来退出modal。尽量少用,且使用的进程步骤短、容易集中。

4种view style:Full Screen\Page Sheet\Form Sheet\Current Context(只在其母组件所占位置出现,同时隔断其它内容)


Navigation 导航:分三类,Hierarchical navigation层级导航/Flat navigation平级导航/Content-Driven or Experience-Driven navigation;

使用手势来进行导航操作;使用标准的导航组件:层级导航使用导航栏navigation bar,平级导航使用Tab bar,多个类似页面使用page control

People tend to be unaware of an app’s navigation until it doesn’t meet their expectations.  人们不会注意到导航除非导航不符合他们的期待

People should always know where they are in your app and how to get to their next destination.  人们应该时刻知道自己在“哪”


Onboarding 启动页:最好提供一个启动页,然后快速被占位符替代。若应用为横屏的,则启动页也横屏(与之匹配)(?与launch screen有什么区别?)

Design a launch experience that’s fast, fun, and educational.Avoid showing in-app licensing agreements and disclaimers. Let the App Store display agreements and disclaimers before your app is downloaded. 让授权条款包含在app store内(安装时即提供)而不是在应用中询问


Requesting Permission 同上,请求使用设备功能,读取内容等


Settings 设置:

When you design your app to function the way most people expect, you decrease the need for settings. 如果使用app功能等路径与人们的习惯相同,使用setting的需求就不太大。


user interaction

system capabilities


UI elements

分为 bars/views/controls三类

status bar

By default, the background of the status bar is transparent, allowing content beneath to show through. 状态栏是透明的,会显示出底下的内容


visual design

Layout considerations(布局考虑):令视觉元素占满屏幕角落;需要支持iPad

Changing focus when the environment changes can be disorienting and frustrating, and can make people feel like they’ve lost control of the app. 在内容变换时不要变化界面焦点。

In general, elements with similar functions should look similar.整体外观一致性

In general, place principal items in the upper half of the screen and—in a left-to-right reading context—near the left side of the screen.把显眼的元素放在上半屏幕;下半屏幕和靠左的部分放阅读性文字。(从易点击性考虑)

Apply readability margins when displaying text on larger devices. 这里的readability margin是一些内置方式?

Try to maintain a minimum tappable area of 44pt x 44pt for all controls.老生常谈的最小点击区域

People expect most apps to respond appropriately when they choose a different text size in Settings.支持字号切换

Even if you expect most people to use your app on iPhone, interface elements should remain visible and functional on iPad.需要支持iPad


animation动效规范:审慎(judiciously)、遵守物理原则(realism and credibility)、可选(optional)

iOS uses motion effects, such as a parallax effect, to create the perception of depth on the Home screen and in other areas. 似乎motion effects是也是内置方式?类似于视差效果。


color:做光线测试、考虑色盲以及对比度检验。


icons and images:使用8pt栅格;plus和X的设备均为@3x,其它为@2x。使用text labels可替换(考虑disability);icon尺寸在24pt左右变动。

In general, use de-interlaced PNG files for bitmap/raster artwork. (并且最好用8位的) Use JPEG for photos.Use PDF for glyphs and other flat, vector artwork that requires high-resolution scaling.(用pdf???)Alternative text labels aren’t visible onscreen, but they let VoiceOver audibly describe what's onscreen, making navigation easier for people with visual impairments.


Launch Screen:与首页接近;避免包含文字;


Extensions

自定义键盘、文件检索、app icon长按选项、短信发送、编辑照片、分享或其它操作、Widget


评论
热度(2)
©断点延线 | Powered by LOFTER