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

简介:

翻译:镇雷

原文:developer.apple.com/des


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

互动性(Interactivity)

内容规范化(Formatting Content)

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

Learn more>



触摸控制(Touch Controls)

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

Learn more>

目标热区(Hit Targets)

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

Learn more>

易读性(Readability)

文字尺寸(Text Size)

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

Learn more>

差异(Contrast)

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

Learn more>

间距(Spacing)

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

Learn more>


Graphics(图形信息)

高分辨率(High Resolution)

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

Learn more>

变形(Distortion)

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

Learn more>

明确性(Clarity)

组织性(Organization)

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

Learn more>

布局(Alignment)

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

Learn more>

更多设计资源

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

Learn more>

目录
相关文章
|
8月前
|
C# 开发者 Windows
基于Material Design风格开源、易用、强大的WPF UI控件库
基于Material Design风格开源、易用、强大的WPF UI控件库
413 0
|
JavaScript 前端开发 开发工具
基于 Vue3.0 和 Ant Design Vue ,高颜值管理后台UI框架vue-vben-admin运行
基于 Vue3.0 和 Ant Design Vue ,高颜值管理后台UI框架vue-vben-admin运行
314 1
|
2月前
|
API C# 开发者
基于Material Design风格开源、免费的WinForms UI控件库
基于Material Design风格开源、免费的WinForms UI控件库!
|
4月前
|
JavaScript
Ant Design Vue UI框架的基础使用,及通用后台管理模板的小demo【简单】
这篇文章介绍了如何使用Ant Design Vue UI框架创建一个简单的后台管理模板,包括创建Vue项目、安装和使用ant-design-vue、以及编写后台管理通用页面的代码和样式。
Ant Design Vue UI框架的基础使用,及通用后台管理模板的小demo【简单】
|
4月前
|
XML Android开发 UED
💥Android UI设计新风尚!掌握Material Design精髓,让你的界面颜值爆表!🎨
随着移动应用市场的蓬勃发展,用户对界面设计的要求日益提高。为此,掌握由Google推出的Material Design设计语言成为提升应用颜值和用户体验的关键。本文将带你深入了解Material Design的核心原则,如真实感、统一性和创新性,并通过丰富的组件库及示例代码,助你轻松打造美观且一致的应用界面。无论是色彩搭配还是动画效果,Material Design都能为你的Android应用增添无限魅力。
94 1
|
5月前
|
前端开发 开发者 开发框架
JSF与Bootstrap,打造梦幻响应式网页!让你的应用跨设备,让用户爱不释手!
【8月更文挑战第31天】在现代Web应用开发中,响应式设计至关重要,以确保不同设备上的良好用户体验。本文探讨了JSF(JavaServer Faces)与Bootstrap框架的结合使用,展示了如何构建响应式网页。JSF是一个基于Java的Web应用框架,提供丰富的UI组件和表单处理功能;而Bootstrap则是一个基于HTML、CSS和JavaScript的前端框架,专注于实现响应式设计。通过结合两者的优势,开发者能够更便捷地创建自适应布局,提升Web应用体验。然而,这种组合也有其局限性,如JSF组件库较小和较高的学习成本等,因此在选择开发框架时需综合考虑具体需求和应用场景。
59 0
|
5月前
|
设计模式 前端开发 开发者
Angular携手Material Design:探索设计模式下的UI组件开发之道——从按钮到对话框的全面实战演示
【8月更文挑战第31天】在现代Web应用开发中,Angular框架结合Material Design设计原则与组件库,显著提升了用户界面的质量与开发效率。本文通过具体代码示例,详细介绍如何在Angular项目中引入并使用Material Design的UI组件,包括按钮、表单和对话框等,帮助开发者快速构建美观且功能强大的应用。通过这种方式,不仅能提高开发效率,还能确保界面设计的一致性和高质量,为用户提供卓越的体验。
37 0
|
6月前
|
XML Android开发 UED
💥Android UI设计新风尚!掌握Material Design精髓,让你的界面颜值爆表!🎨
【7月更文挑战第28天】随着移动应用市场的发展,用户对界面设计的要求不断提高。Material Design是由Google推出的设计语言,强调真实感、统一性和创新性,通过模拟纸张和墨水的物理属性创造沉浸式体验。它注重色彩、排版、图标和布局的一致性,确保跨设备的统一视觉风格。Android Studio提供了丰富的Material Design组件库,如按钮、卡片等,易于使用且美观。
175 1
|
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
285 0
【Vue 开发实战】生态篇 # 23:组件库对比:Element UI、Ant Design Vue、iView