「简要翻译」Apple :UI Design Dos and Don'ts

简介:

翻译:镇雷

原文:developer.apple.com/des


iOS 7 开始,越来越多拥有优秀用户界面的产品出现,开发者们更有机会创造出那些具备一流且独一无二用户体验的产品。在开始编码前,思考一些通用的设计理念能够提升产品的吸引力和易用性。更多更棒的设计内容可以阅读: iOS Human Interface Guidelines.

互动性(Interactivity)

内容规范化(Formatting Content)

iOS 界面中,用户应当不需要通过滑动或缩放,就能直接看到所有的主要内容。

Learn more>


6fec0ffa69b9f0ea9c1078c59af6033722f9ef8e


触摸控制(Touch Controls)

通过使用那些可触摸操控的组件,能够令你的 app 使用起来更加简单和自然。

Learn more>56b85b5866ca7f77635a662e82fdbf5323eba7c0

目标热区(Hit Targets)

所创建的可点击组件至少要有 44pt * 44pt 的尺寸,这样才能保证它们易于点击。

Learn more>987e3a3b6c934a8ec3083446eee0491179f08e04

易读性(Readability)

文字尺寸(Text Size)

文字至少需要 11pt,才能保证在它们在常规阅读距离下(不缩放),看起来清晰。

Learn more>50ac8e80d576e1f76bef39db1694f2dcbf7d9c88

差异(Contrast)

确保背景和字体颜色之间有足够的差异,文字才能清晰显示。

Learn more>7b22d09e4d61f945d8800ff69905e41adf6918c5

间距(Spacing)

不要让文字太过靠近(甚至重叠),通过增加行高和字间距来提升易读性。

Learn more>8136b837709c6c8070ba24ad659bff2550c72959


Graphics(图形信息)

高分辨率(High Resolution)

提供所有图片的高分辨率版本(@2x),否则它们在视网膜屏幕下会变得模糊。

Learn more>95702435a9cdb54c532ce2f3762d5d0dbeb7a5ba

变形(Distortion)

保持图片的比例,避免显示时变形失真。

Learn more>f1cdcb62d1909f1f977306673e0241fe37a1d7e7

明确性(Clarity)

组织性(Organization)

布局时,将组件靠近它们所修饰的内容,可以提高易读性。

Learn more>e18cf8554d400d13566d569f38c1f31f6cb31299

布局(Alignment)

通过对文字、图片和按钮的排布来告诉用户信息之间的关系。

Learn more>f8267bc0762c4c6f7550a7f4f77482a4176a0893

更多设计资源

查看视频演示和指导来设计超赞的产品。

Learn more>

目录
相关文章
|
26天前
|
C# 开发者 Windows
基于Material Design风格开源、易用、强大的WPF UI控件库
基于Material Design风格开源、易用、强大的WPF UI控件库
|
6月前
|
JavaScript 前端开发 开发工具
基于 Vue3.0 和 Ant Design Vue ,高颜值管理后台UI框架vue-vben-admin运行
基于 Vue3.0 和 Ant Design Vue ,高颜值管理后台UI框架vue-vben-admin运行
170 1
|
10月前
|
JavaScript 前端开发 数据处理
【React/Vue2】 使用Element UI 高度封装Select 下拉框创建条目(Ant Design更为简单)
【React/Vue2】 使用Element UI 高度封装Select 下拉框创建条目(Ant Design更为简单)
【React/Vue2】 使用Element UI 高度封装Select 下拉框创建条目(Ant Design更为简单)
|
JavaScript
【Vue 开发实战】生态篇 # 23:组件库对比:Element UI、Ant Design Vue、iView
【Vue 开发实战】生态篇 # 23:组件库对比:Element UI、Ant Design Vue、iView
218 0
【Vue 开发实战】生态篇 # 23:组件库对比:Element UI、Ant Design Vue、iView
|
Web App开发 存储 前端开发
SAP UI的加载动画效果和幽灵设计(Ghost Design)
这是Jerry 2021年的第 14 篇文章,也是汪子熙公众号总共第 285 篇原创文章。 在本篇文章之前,Jerry 印象最深的幽灵,应该要算《星际争霸I》里人族能够隐形的空中单位 Wraith( 幽灵战机 ),以及能施放核弹的 Ghost( 幽灵特工).
114 0
SAP UI的加载动画效果和幽灵设计(Ghost Design)
|
Go PHP
如何在SAP Business by design的UI上扩展新的按钮
如何在SAP Business by design的UI上扩展新的按钮
114 0
如何在SAP Business by design的UI上扩展新的按钮
【直播回顾及资料下载】Fusion Design - 企业级UI解决方案揭秘
专家:钱陈(潕量)Fusion 是一套企业级UI的解决方案。解决传统项目流程中设计和前端之间工作协同、体验一致性等方面的问题。Fusion 从大量的中后台场景中沉淀出通用的基础组件,再对基础组件进一步提取、拆解需要变更的部件,打造出一套可以定制的设计系统。
6679 0
|
前端开发
【前端直播预告】Fusion Design - 企业级UI解决方案揭秘
专家:钱陈(潕量)Fusion 是一套企业级UI的解决方案。解决传统项目流程中设计和前端之间工作协同、体验一致性等方面的问题。Fusion 从大量的中后台场景中沉淀出通用的基础组件,再对基础组件进一步提取、拆解需要变更的部件,打造出一套可以定制的设计系统。
6635 0