【译】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可以参考这里)

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

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

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

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

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

【译】UI设计基础(UI Design Basics)--为iOS设计(Design for iOS)(二)的更多相关文章
- 【译】UI设计基础(UI Design Basics)--导航(Navigation)(六)
[译]UI设计基础(UI Design Basics)--导航(Navigation)(六)
- 【译】UI设计基础(UI Design Basics)--iOS应用解析(iOS App Anatomy)(三)
2.1 iOS应用解析(iOS App Anatomy) 几乎所有的iOS应用都会用到UIKit框架中的组件.了解这些基础组件的名称,角色,功能可以帮你在应用界面设计时做出更好的决策. UIKit提 ...
- 【译】UI设计基础(UI Design Basics)--自动适配与布局(Adaptivity and Layout)(四)
2.3 自动适配与布局(Adaptivity and Layout) 2.3.1 开发成自动适配(Build In Adaptivity) 用户通常希望在自己的所有设备,各种场景中使用他们喜欢的a ...
- 【译】UI设计基础(UI Design Basics)--启动与停止(Starting and Stopping)(五)
2.4 启动与停止(Starting and Stopping) 2.4.1 立即启动(Start Instantly) 通常来讲,用户不会花超过两分钟的时候去评价一个新的应用.在这段有限的时间里 ...
- iOS10 UI设计基础教程
iOS10 UI设计基础教程 介绍:本教程针对iOS初级开发人员,基于iOS 10系统,使用Swift 3.0语言讲解如何进行UI设计.本教程内容涵盖UI基础构成.UI元素.自动布局.自适应UI.UI ...
- iPhone/iPad/Android UI尺寸规范 UI尺寸规范,UI图标尺寸,UI界面尺寸,iPhone6尺寸,iPhone6 Plus尺寸,安卓尺寸,iOS尺寸
iPhone/iPad/Android UI尺寸规范 UI尺寸规范,UI图标尺寸,UI界面尺寸,iPhone6尺寸,iPhone6 Plus尺寸,安卓尺寸,iOS尺寸 iPhone界面尺寸 设备 分辨 ...
- 【译】iOS人性化界面指南(iOS Human Interface Guidelines)(一)
1. 引言1.1 译者自述 我是一个表达能力一般的开发员,不管是书面表达,还是语言表达.在很早以前其实就有通过写博客锻炼这方面能力的想法,但水平有限实在没有什么拿得出手的东西分享.自2015年7月以来 ...
- The iOS Design Cheat Sheet 界面设计速参
http://ivomynttinen.com/blog/the-ios-7-design-cheat-sheet/ With the release of iOS 7, app designers ...
- 小波说雨燕 第三季 构建 swift UI 之 UI组件集-视图集(六)Picker View视图 学习笔记
想对PickerView进行操作,只能在代码中操作. 下面 ,再添加三个label组件,然后将所有组件配置到代码中(看代码),然后要实现对PickerView的操作,就要实现它的DataSource协 ...
随机推荐
- 关于session的实现:cookie与url重写
本文讨论的语境是java EE servlet. 我们都知道session的实现主要两种方式:cookie与url重写,而cookie是首选(默认)的方式,因为各种现代浏览器都默认开通cookie功能 ...
- android-----JNI学习 helloworld
(1)新建android工程 (2)添加NDK路径 (3)添加本地支持 给本地库起名 此时工程目录下会自动生成jni文件夹 此时Makefile也自动生成 LOCAL_PATH := $(call m ...
- Qt绘图之QGraphicsScene QGraphicsView QGraphicsItem详解
Graphics View提供了一个界面,它既可以管理大数量的定制2D graphical items,又可与它们交互,有一个view widget可以把这些项绘制出来,并支持旋转与缩放.这个柜架也包 ...
- JSBridge(Android和IOS平台)的设计和实现
前言 对于商务类的app,随着app注册使用人数递增,app的运营者们就会逐渐考虑在应用中开展一些推广活动.大多数活动具备时效性强.运营时间短的特征,一般产品们和运营者们都是通过wap页面快速投放到产 ...
- C# WinForm获取程序所在路径方法
多个获取WinForm程序所在文件夹路径的方法,收藏备忘. 1)获取当前进程的完整路径,包含文件名(进程名). 代码:string str =this.GetType().Assembly.Locat ...
- iOS Multiview Applications
@import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css); @import url(/ ...
- NUll在oracle与sqlserver中使用相同与区别
最近在使用Oracle进行开发,遇到很多与以前使用sqlserver的不同语法.今天遇到null在两种数据库上面操作上的差别,在此记录两种数据库上的差异. null 与字符串相加 1.在oracle中 ...
- rabbitMQ实战(一)---------使用pika库实现hello world
rabbitMQ实战(一)---------使用pika库实现hello world 2016-05-18 23:29 本站整理 浏览(267) pika是RabbitMQ团队编写的官方Pyt ...
- 10.23 noip模拟试题
尼玛蛋pdf好难粘 直接写了 T1 /*开始写wa了 我真弱2333 关于p的排序规则不只是差值 为了字典序最小 还要拍别的*/ #include<cstdio> #include< ...
- 9.20 noip模拟试题
Problem 1 双色球(ball.cpp/c/pas) [题目描述] 机房来了新一届的学弟学妹,邪恶的chenzeyu97发现一位学弟与他同名,于是他当起了善良的学长233 “来来来,学弟,我 ...