【译】UI设计基础(UI Design Basics)--为iOS设计(Design for iOS)(二)

2.1 为iOS设计(Design for iOS)
  iOS体现以下主题:

  • 遵从:UI帮助用户理解界面内容并与内容交互,但绝不会与内容相互冲突。
  • 清晰:文本在任何尺寸下都是清晰易读,图标精确易懂,装饰微妙恰当,并且更加注重功能驱动设计。
  • 深度:可视的层次与真实的动态效果时刻传递着活力并能够提高用户体验。

  
  无论你是重新设计一款App还是开发一个全新的,考虑以下面的方式完成工作:
  首先,回顾过去app核心功能的UI,并找到(确定)它们之间的联系。
  其次,直接使用iOS的系统主题展示UI设计以及用户体验。谨慎添加细节和装饰,绝不盲目新增。
  最后,确保你的UI设计能够适配不同的设备和模式,这样用户才能够在尽可能多的场景下舒适地使用你的app。
  在这整个过程,时刻准备推翻先例,假设问题,让内容和核心功能驱动第一个设计细节。


2.1.1 以内容为核心(Defer to Content)
  尽管新鲜,漂亮的界面和流畅的动态效果是iOS体验的亮点,但内容始终是iOS的核心。
  下面是一些方法,可以确保你的设计在提升功能的同时以内容为核心。

  • 充分有效利用整个屏幕。天气应用就是一个很好的例子:漂亮的当前天气状况充满整个屏幕直观的显示了大部分的重要信息,同时也留出空间展示每个时段的详细数据。

  

  • 重新考虑物化和视觉特效的使用。边框,渐变,阴影有时候会导致UI上的元素变得更加厚重。这样就会盖过内容,或者与内容发生冲突。应该以内容为核心,让UI成为支撑内容的角色。

  

  • 让半透明的元素提示背后的内容。半透明的元素--例如控制中心--将提供的场景,这样的设计可以让用户看到更多可用的内容,并获得提示。在iOS,一个半透明元素只会使其正下方的内容变得模糊,给人的感觉就像是隔着宣纸,它并不会使屏幕的其他部分模糊。

  


2.1.2 保持清晰(Provide Clarity)
保持清晰是另一种确保你的应用以内容为核心的方法。下面是一些使最重要的内容和功能清晰易懂的方法:

  • 使用大量留白。留白空间使重要的内容和功能更加醒目以及容易理解。同时,留白的空间还能传达类似平静,安宁的感觉,这可以使app看起来更加专注,高效!

  

  • 让颜色使UI简洁明了。一个关键色—比如备忘录中的黄色—高亮重要的状态信息并巧妙指示交互。这同时还赋予app一个统一的视觉主题。内置app通常使用干净的纯色系系统颜色,这样无论背景明暗都会有很好的视觉效果。

  

  • 使用系统字体以确保清晰易读。系统字体通过动态类型(Dynamic Type)自动调节间距和行高,使文本在任何大小下都易读并且好看。需要注意的是无论你使用系统字体还自定义字体,必须确保采用动态类型(Dynamic Type),这样你的app就能够相应用户对不同文本大小的选择。

  

  • 使用没有边框的按钮。默认情况下,所有工具栏上的按钮都按钮都是无边框的。在内容区域,一个无边框的按钮以文本,颜色以及一个指引性的标题(这边指那个电话标识)来指示用户互动。当然,一个内容区域的按钮也可以通过使用较细的边框或者有颜色的背景来显示其不同。

  


2.1.3 用深度来交流(Use Depth to Communicate)
  iOS经常通过明显的层次展示内容来传达等级和位置关系,以便帮助用户更好的理解屏幕上对象之间的关系。

  • 在一个支持3D触控的设备上,通过peek,pop,快速操作让用户预览重要的内容,却不必须真的打开它们。(关于3D-Touch可以参考这里

  

  • 通过一个半透明的背景,以及一个看起来像悬浮在主屏上的文件夹将里面内容与屏幕的其他区域分隔开来。

  

  • 像提醒事项这里,将清单列表显示在不同的层次。当用户进入其中一个清单时,其余的清单一起折叠在屏幕的底部。

  

  • 日历在年,月,日视图切换时,使用增强的转场效果,让用户对它们的等级与层次有一个直观的认识。在这边这个滚动的年视图上,用户可以轻松地找到今天日期,以及进行日历上的其他操作。

  

  • 当用户选择一个月份,年视图缩小取而代之是月视图。今天的日期依然保持高亮,而年份则出现在返回按钮右边。这样用户就能够清楚的知道他们目前在哪个页面,从哪跳转过来的,如何跳转回去。

  

  • 类似的场景出现在用户选择一个日期时的时候:月视图会分割效果,日期所在的星期会被推到屏幕上方,同时出现日期每个时段的详细视图。日历通过每次这样的跳转加强了年,月,日之间的关系。

  

原文地址:https://www.cnblogs.com/lindj0307/p/5008886.html