Human Interface Guidelines —— 概览

自上次参加完回音分享会后,我下定决心要洗心革面乖乖打基础,于是开启了这个part,争取两个月不间断更新,写完Material Design与iOS中的组件(顺便学学英语),以便今后在使用的时候完全不虚

今天本来惯例打开Material Design,结果发现网站改版了上不去了???那我就乖乖开始翻译iOS的组件好了...

iOS设计主题

作为一名app设计师,您有机会呈现出一款非凡的产品,并将其推向App Store推荐的顶端。为此,您需要满足对质量和功能的高度期望。

三大主题将iOS与其他平台区分开来:

·清晰Clarity:在整个系统中,每个尺寸的文字都清晰可辨,图标清晰易懂,装饰细腻恰当,并且强化了功能促进设计的观点。负空间,颜色,字体,图形和界面元素巧妙地突出重要内容并传达交互性。

·遵从Deference:流畅的运动和清晰美观的界面有助于人们理解并与内容互动,而不会与内容竞争。内容通常填满整个屏幕,而半透明和模糊往往暗示更多。最小化边框,渐变和阴影的使用可保持界面轻盈透气,同时确保内容至关重要。

·深度Depth:清晰的视觉层次和逼真的动作传达了层次结构,传递活力,促进理解。触摸和可发现行提高了喜悦度,并且在不丢失上下文的情况下访问功能和附加内容。在您在内容中导航时,转场提供深度感。


设计原则

为了最大限度地提高影响力和覆盖面,请在构思您的app特点时牢记以下原则。

美学完整性(Aesthetic Integrity)

美学完整性代表了app的外观和行为与其功能的整合程度。 例如,帮助人们执行严肃任务的app可以通过使用细微,不显眼的图形,标准控件和可预测的行为来让他们保持专注。 另一方面,身临其境的app(例如游戏)可以提供令人着迷的外观,由此让人感到有趣和兴奋,同时鼓励用户探索。

一致性(Consistency)

拥有一致性的app通过使用系统提供的界面元素,众所周知的图标,标准文本样式和统一的术语来实现熟悉的标准和范例。 该app以人们期望的方式将特点和行为合并。

直接操作(Direct Manipulation)

直接操作屏幕上的内容能够吸引用户并促进对内容的理解。 用户在旋转设备或使用手势来影响屏幕内容时会体验到直接操作。 通过直接操作,他们可以看到行动的直接可见的结果。

反馈(Feedback)

反馈确认行动并显示结果以向人们持续告知。 内置的iOS的app为每个用户操作提供可感知的反馈。 点击时,互动的元素会短暂的突出显示,进度indicators可以传达长操作步骤的位置,而动画和声音有助于明确操作结果。

隐喻(Metaphors)

当app的虚拟对象和动作是对熟悉体验的隐喻时,人们可以更快地学习——无论是植根于真实还是数字世界。 隐喻在iOS中运行良好,因为人们与屏幕进行物理交互。 他们移动视图以浏览下面的内容。 他们拖动和滑动内容。 他们切换开关,移动滑块,并滚动选择器的值。 他们甚至可以翻阅书籍和杂志。

用户控制(User Control)

在整个iOS中,人们(而不是app)在掌控大局。 app可以建议采取一系列行动或警告危险后果,但app不能直接进行决策。 最好的app在让用户做决定和直接避免不期望的结果之间找到了正确的平衡。 app通过保持交互元素的熟悉性和可预测性,确定破坏性行为、使在进行中的取消操作变得容易,来让用户感觉自己在掌控大局。


界面基本要素

大多数iOS的app都是使用UIKit中的组件构建的,该组件是定义常用界面元素的编程框架。该框架可让app在整个系统中实现一致的外观,同时提供高水平的自定义。 UIKit元素非常灵活和熟悉。它们具有适应性,使您能够设计出一款在iOS设备上看起来很棒的app,并且在系统引入外观变化时自动更新。 UIKit提供的界面元素分为三大类:

Bars:告诉用户他们在app中的位置,提供导航,并可能包含按钮或其他元素来启动行动和交流信息。

Views:包含用户在app中看到的主要内容,如文本,图形,动画和交互元素。Views可以有滚动,插入,删除和排列等行为。

Controls:启动行动并传达信息。按钮,开关,文本字段和progress indicators是控件的示例。

除了定义iOS界面之外,UIKit还定义了app可以采用的功能。例如,通过此框架,您的app可以响应触摸屏上的手势,还能启用绘图,辅助功能和打印等功能。

iOS也与其他编程框架和技术紧密集成,例如Apple Pay,HealthKit和ResearchKit,使您能够设计功能强大的app。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏腾讯大讲堂的专栏

面向设计的半封装web组件开发

作者:张鑫旭,资深钓鱼爱好者,然后平时喜欢研究与学习前端技术。 前言 本文内容可谓是对大脑认知的一场洗礼。我们平常提到组件,就会想到重用,各个项目都能使用。而...

28910
来自专栏腾讯大讲堂的专栏

如何快速提升设计感

导语 | 好的设计原则是能被所有人掌握并运用的。本文列出了一些目前应用广泛又比较基础的设计实战窍门,掌握它们之后或许你能让你的设计朋友刮目相看呢! 如果你不相...

3766
来自专栏司想君

2017年前端开发手册一-2016前端技术回顾

2017年前端开发手册公布了,从今天开始陆续为大家送上翻译文章。每日一篇,今天是第一篇,是作者对2016年前端圈的一次技术回顾。 PS:附上一首目前金曲榜第...

3415
来自专栏程序员互动联盟

【web开发】HTML5(目前)无法帮你实现的五件事

人都专注于HTML5能够实现什么(或者是如何将各种方法连接起来,实现一个更加优雅的解决方案)。而现在,也不少人想将目光投向那些HTML5无法实现的事情。MSDN...

3735
来自专栏极客编程

VueJS && ReactJS 如何?听听别人怎么说

使用所有新的库和框架,很难跟上所有这些库和框架,也就是说,这就需要您决定哪些是值得花时间的。

1795
来自专栏无原型不设计

iOS界面设计,12个优秀案例激发你的灵感

总所周知,iOS和Android是当今两大移动平台,前者采用Human Interface Design,后者采用Material Design。作为设计师,尤...

3147
来自专栏Fundebug

ReactJS vs Angular 5 vs Vue.js - 哪个框架更好?

译者按: 在全球大范围看,React和Angular依然遥遥领先,Vue.js这位后起之秀还需努力做到全球化!

2016
来自专栏SAP最佳业务实践

SAP S/4HANA最佳业务实践:Order-to-Cash订单到收款-2客户360度视图

Details of the Object Page Customer -360°View客户360度视图 –Header 概览 –Contacts 合同 –S...

29611
来自专栏腾讯社交用户体验设计

你还在用轮播图吗

2093
来自专栏知晓程序

可怕!你的黑历史「老照片」,这款小程序都翻出来了 | 亲儿子 #14

不仅明星们会有许多「想重金删除的」老照片。即便是普通人,突然翻出几年前的旧照,有时也恨不得马上都删掉吧。

1192

扫码关注云+社区

领取腾讯云代金券