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

翻译:镇雷

原文:https://developer.apple.com/design/tips

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>

时间: 2024-08-24 16:30:21

「简要翻译」Apple :UI Design Dos and Don'ts的相关文章

「最简单」的 Core Data 上手指南

本文讲的是「最简单」的 Core Data 上手指南, 原文地址:The Easiest Core Data 原文作者:Alberto De Bortoli 译文出自:掘金翻译计划 译者:Zheaoli 校对者:Kulbear, cbangchen 在过去的几个月里,我花费了大量的时间在研究 Core Data 之上,我得去处理一个使用了很多陈旧的代码,糟糕的 Core Data 以及违反了多线程安全的项目.讲真,Core Data 学习起来非常的困难,在学习 Core Data 的时候,你肯定

[译] 通知是一种「暗模式」吗?

本文讲的是[译] 通知是一种「暗模式」吗?, 原文地址:Are Notifications A Dark Pattern? 原文作者:Designlab 译文出自:掘金翻译计划 本文永久链接:github.com/xitu/gold-m- 译者:Changkun Ou 校对者:lsvih, Yuuoniy 文字 & 插图: Andrew Wilshere 你有没有做过这种噩梦:在梦中你被通知标记的小红点给淹没了? 我就做过一次,它让我想到:通知究竟是什么?他们只是一种暗模式(dark patte

聊聊OS X自带经典字体「俪宋」的设计历史

  现在字体设计在电脑上就可以轻松完成,但在第一台Mac刚发售时,中文字体设计很不容易,各方面的限制特别多,不过知名字体设计师柯炽坚仅靠自己一人就做出了「俪宋」体,后来这也成了苹果电脑自带的中文字体之一.这一过程中发生了很多有趣有料的故事,一起来看看. △ 以向量描绘,俪宋的「一」 俪宋始于 1989 年,是世界最早的 PostScript 中文向量字体之一.现在 Mac 中的「俪宋 Pro」, 以及华康的俪宋家族,都基于 1989 年的初代俪宋[A].对今天的编辑来说,俪宋只是一种内文细明体罢

在开发移动应用时你应该考虑的 「Empty State」

本文讲的是在开发移动应用时你应该考虑的 「Empty State」, 普通应用在安装后的前三天会失去 77% 的日活跃用户.更为严重的是:三十天内,大约 80% 的日活跃用户会流失. 这些低留存率是因为应用做的很烂么?并不总是这个原因. 用户试用了很多应用并且在最初的几天决定要删掉哪些.应用成功的关键是在关键时期吸引住用户. 你的任务是确保用户停留足够长的时间并有很多交互操作来享受应用. 但在这些好情况发生之前他们应该享受第一次使用. 通常我们设计一个很受欢迎的界面,布局里的每个元素看上去都安排

向产品宣战——开发者眼中的Android UI Design

向产品宣战--开发者眼中的Android UI Design 准备了半个月,思考产品设计.交互设计,见证了公司的产品.UE和开发的撕逼,将自己的思考.感悟,整理成下文,谨代表广大程序猿,向设计狮.产品X开战.希望广大程序猿能够坚持贯彻Google的Material Design,切实认真负责的执行Android的设计思想,将MD设计带到产品中去,不做中国特色的App,将Android的开发风气带到正轨,树立正确的开发观.设计观. 希望广大程序猿朋友在博客后面留言.签名,规范Android设计.树

编写「可读」代码的实践

编写可读的代码,对于以代码谋生的程序员而言,是一件极为重要的事.从某种角度来说,代码最重要的功能是能够被阅读,其次才是能够被正确执行.一段无法正确执行的代码,也许会使项目延期几天,但它造成的危害只是暂时和轻微的,毕竟这种代码无法通过测试并影响最终的产品:但是,一段能够正确执行,但缺乏条理.难以阅读的代码,它造成的危害却是深远和广泛的:这种代码会提高产品后续迭代和维护的成本,影响产品的稳定,破坏团队的团结(雾),除非我们花费数倍于编写这段代码的时间和精力,来消除它对项目造成的负面影响. 在最近的工

PS轻易制作有趣的「小模型」照片

  你们有没有看过一些照片是真实场景,但出来的效果是像小模型似的呢?以往制作这些相片需要使用「移轴镜」来拍摄,而Photoshop CS6已经内建了「移轴镜」的效果滤镜,让你能轻易制作小模型相片!看看怎样在5分钟内把广角照片变成小模型吧! (步骤一) 选择合适的照片 小模型一般是从俯视角度来观看的,因此我们拍摄时也要依照这个角度来取景,也要留意相片中应包含一堆小小的「主角」,用来假装是「小模型」.这次我们便找来了这幅简单的足球场照片来做示范. (步骤二) 打开照片,然后于"滤镜">

Python的数据序列化「Json & Pickle」

在介绍Python的数据序列化模块「Json & Pickle」之前,我们先来看看为什么需要数据序列化,什么是数据序列化. 为什么需要数据序列化,我认为有如下两种原因: 一个原因是将对象(一切皆对象)的状态保持在存储媒介(硬盘.网盘......)中,以便可以在以后重新创建精确的副本,相当于镜像的概念,比如我们平时利用VMware虚拟机中的挂起功能,这个挂起功能就是利用数据的序列化,把虚拟机当前的状态序列化保存在本地磁盘的文件中,然后恢复的时候只需反序列化,把状态恢复即可. 另一个原因是通过值将对

如何用 Sketch 打造「前端框架」

本文讲的是如何用 Sketch 打造「前端框架」, 前端框架 需要考虑的事项: 当我们与一大群设计师同时推进同一个项目的时候,要做到协调一致非常困难.而在面对有审美要求.对指定行为和互动有明确要求的系统性项目时尤为如此. 我们可用于建立界面的标准化的手段之一就是定义一份风格指南(纯视觉角度),这样可以帮助整个设计团队避免在未来可能出现的改动带来的不必要的工作时间,提高工作效率.让我们可以把精力更好的集中在组件的行为和应用中的交互上. 一份优秀的风格指南需要被团队全员采用,比如开发者.产品负责人.