@折折熊 的设计博客
用最简单地方式改变世界

安静的龙坞茶园,特别恬静的日系,尤其是日落前

难得在杭州可以看到日本北海道的味道,赶紧抓拍下来

旁边就是茶庄,还有农家菜,我去的阿根茶庄的菜做得蛮好吃的,食材很新鲜,特别喜欢他的炸土豆和醋萝卜

配乐是重新编排过的植村花菜的《厕所女神》,轻吉他和清爽的嗓音太配这个环境了

我蛇精病,我在LOFTER

查看详情

[中文]iOS7人机界面指南-UI基础[转]

上网搜索了很多有关iOS7的设计指南,发现好多牛人已经转译成了中文。对比了一下,觉得@李林 的翻译相对丰满很多,只是分了12个段落,我把他们串一下,已做收藏存档。原文目录如下,有兴趣的同学可以去拜读一下。

(注:这个不是完整的界面指南,而是界面指南中UI基础的部分,所以其他部分的目录我省去了)
  • 为iOS7而设计

iOS7涵盖了以下3个方面的设计主题思想:

  • 依从:UI要帮助用户对内容进行理解和互动,但绝不能与内容产生竞争关系。

  • 清晰:任何字号的文字都要清楚易读,图标要精细且含义明确,装饰性元素要少而精,且使用得当;聚焦于功能性的实现,并以此激发设计的进行。

  • 纵深:视觉外观的层次以及逼真的动画效果可以传达出界面的活力,使界面更容易被理解,并提升用户的愉悦度。

天气应用,左图为iOS7,右图为iOS6。

无论你是在重新设计一款已有应用,还是在创建新产品,请考虑按照苹果官方重新设计内置应用的方式来进行你的工作:

  • 首先,剥离所有的UI元素,使应用的核心功能呈现出来,并重新确认它们的相关性。

  • 然后,使用iOS7的设计主题去重新构建UI与用户体验。

  • 自始至终,要做好挑战传统惯例、质疑各种臆测的准备;将注意力聚焦在内容和功能上,以此来推动每一个设计决策的制定。

依从于内容

虽然明快而漂亮的UI以及流畅的动画效果是iOS7当中的体验亮点,但内容才是其真正的核心。

下面这些方法将确保你的设计能够提升界面的功能性,并使其更好的依从于内容。

充分利用全屏空间

斟酌嵌入式结构及可视化的界面框架的用法,考虑能否将内容直接扩展至屏幕边缘。天气应用就是个很好的例子:通过漂亮的全屏方式呈现当前的天气情况,用户能够立即发现最重要的信息,而且每小时的气象数据也有充分的空间得以展示。

慎用拟物化的视觉元素

浮雕效果、渐变、阴影,这类视觉表现形式有时会使UI元素过于沉重,进而在视觉上喧宾夺主,压倒内容。要聚焦于内容,让UI扮演辅助支援型的角色。

让半透明的视觉元素透露其背后的内容

半透明的视觉形式可以体现出当前操作对象周围的环境背景,使用户知道有更多的内容可用。

提供清晰的视觉效果

提供清晰的视效,这是确保使内容处于核心地位的又一种方式。下面这些方法可以使最重要的内容及功能清晰易读、便于操作。

充分运用留白

留白可以使重要的内容及功能更加突出。同时,留白还可以传达出一种平静和稳定的感觉,使应用看上去更加专注和高效。

通过色彩简化UI

一种关键的颜色——例如备忘录应用中的黄色——可以突出重要信息,并巧妙的暗示出元素的可交互性。同时,它也可以为应用带来具有一致性的视觉主题。

使用系统字体,确保清晰易读

iOS7中的系统字体可以自动调整字间距及行高,使文字内容更加易读,在用户所选择的任何字号下都表现良好。


拥抱无边框的按钮

与以往依靠浮雕效果暗示元素可交互性的方式不同,在iOS7中,我们可以选取含义准确的标题文字,搭配一种关键色或系统色,来表达这是一个可交互的UI元素。新的通讯录应用使用了系统提供的蓝色来告诉用户,屏幕上的多数内容是可以对交互动作做出响应的。

利用纵深进行沟通

iOS7会在不同的层面上显示内容,以体现内容间的层级和位置关系,这有利于用户理解屏幕上各种元素之间的关联。

文件夹在视觉表现形式上采用了半透明背景,并悬浮于主屏幕之上,这能使其中所包含的内容与屏幕上的其他元素得以区分开来。

当用户在使用提醒事项应用中的某个条目时,其余的条目都会排列在界面底部的不同层面上。要查看所有条目,用户需要展开这些层面,如下图所示。

新的日历应用当中使用了增强的动画过渡效果,可以在用户切换年、月、日视图模式时带来到明显的纵深感。在下图所示的年份滚动视图中,用户可以立刻看到今天的日期,并能够执行其他的相关操作。

当用户选择了某个月份后,年份视图会自动放大扩展,而月份视图则会从它的后面呈现出来。

类似的动画效果还会发生在月份与日期的切换当中:月份视图向外扩展,呈现出日期视图

  • iOS应用解析

几乎所有的iOS应用都会用到一些由UIKit框架所定义的UI控件。对这些基本控件的名称、角色和作用加以了解,你将能更好的在打造界面的过程中做出正确合理的设计决策。

UIKit框架提供的UI元素可以分为4大类:
  • 栏(Bars):包含与上下文内容情境相关的信息,告诉用户他们在应用当中所处的位置;同时还包含相关的导航功能,或是可以由用户发起的操作。

  • 内容视图(Content views):包含当前应用所特有的内容,并支持相关的交互行为,例如滚屏、插入、删除、对列表条目进行重新排序,等等。

  • 控制元素(Controls):产生行为或显示信息。

  • 临时视图(Temporary views):临时性的向用户呈现重要信息,或提供额外的功能及选项。

除了定义UI元素以外,UIKit框架还定义了那些可以完成诸如手势识别、绘制、辅助支持、打印支持等功能的对象。

从编程的角度来讲,UI元素可以被看做是不同类型的视图(views),因为它们都继承自UIView类。一个视图知道怎样将它自己输出到屏幕上,知道怎样捕获用户在它的范围内执行的点击行为。

要在应用中管理一组或一系列具有继承关系的视图,你通常需要使用视图控制器(view controller)。视图控制器可以协调不同视图的显示方式,在用户发起行为后执行相应的功能,并且对界面切换时所需的动画过渡效果进行管理。

下图展示了视图和视图控制器是怎样协同工作来呈现iOS应用界面的:

虽然开发者们习惯于从视图和控制器的角度来思考问题,但用户只会将应用看做是由一个个界面所组成的整体。从这个角度讲,每一“屏”都对应着应用中的一个明确的视觉状态或模式。

注意:每个iOS应用都包含一个窗口(window)。与桌面应用中的概念有所不同,iOS中的窗口没有真正的可视部分,而且不能从屏幕上的一个地方移动到另外一个地方。多数iOS应用只有一个窗口;那些支持外接显示设备的应用会有多个窗口。

iOS界面设计规范当中会用到“屏(screen)”这个词,因为它能被多数用户所理解。作为开发者,你可能还会在其他不同的上下文当中读到“屏”的概念,例如被用来指代UIScreen对象(用于访问外界显示设备)

  • 启动与退出

即刻启动

一般情况下,用户可以在一到两分钟内对一款应用做出评估。如果你能利用这段时间迅速地呈现最有用的内容,就能充分激发新用户的兴趣,并且给所有用户带来出众的体验。

重要:绝不要在用户安装好你的应用之后告诉他们需要重启设备。重启需要花费时间,而且会让你的应用看起来非常难用且不可信赖。

如果出于内存使用或其他方面原因,使你的应用确实只有在设备重启之后才能正常工作,那么你需要首先解决这类问题。请参考iOS应用开发指南中的“高效地使用内存”。

尽可能地避免使用无意义的启动画面(欢迎画面)或其他类似的启动体验。最好让用户在启动你的应用之后可以立刻开始使用。

推荐的模式(左图)与不推荐的模式(右图)

应用安装完成后,不要让用户必须进行设置才能使用。取而代之地:

  • 将解决方案聚焦在80%的用户需求上。这样,多数用户不需要进行任何设置就可以开始使用,因为默认参数可以确保应用能够按照这部分用户所期望的那样进行工作。

  • 尽可能地从其他来源获取信息。如果用户在iOS内置应用或系统设置当中输入的信息可以为你所用,那么就尽量向系统查询这些信息,不要再让用户输入一遍了。

  • 如果确实需要用户进行安装设置,尽量让他们在你的应用内部进行输入。然后,尽快储存这些信息(例如在应用的设置项当中)。这样,用户在享受你的应用之前就不需要被迫切换到iOS的设置当中了。如果他们将来需要修改这些信息,可以在任何时候进入应用设置当中进行操作。

尽可能晚些让用户登录。比较理想的状况是,让用户在不登录的情况下也能在应用当中尽量多的浏览内容,并使用部分功能。如果在用户上手你的产品之前就强迫他们登录,则会导致启动流程变得累赘拖沓。

一般来说,要按照默认的屏幕定向方式启动应用。对于iPhone,竖屏是默认的定向方式,而对于iPad来说,设备当前所处的状态就是其默认定向方式。如果你的应用只能在横屏模式下运行,那么要始终以横屏状态启动,让用户在必要的时候自己调转设备的方向。

最好让横屏应用能够同时支持两种模式的横屏,也就是Home按键分别在左侧和右侧的状况。如果设备当前已经处于横屏状态,那么横屏应用就应该按照当前的定向方式加载,除非你有充分的理由不这样做。在其他情况下,可以按照Home按键在右侧的方式加载横屏应用。

可以提供一张与应用首屏看上去几乎一致的启动图片,iOS会在应用被打开的同时即刻展现这张图片,这可以让用户觉得你的应用加载起来非常快,降低对等待时间的感知,使真正的内容有相对充裕的时间可以进行加载。可以参考启动图片了解相关的实现方法。

如果可能,不要让用户在初次加载应用时阅读免责声明或必须对用户协议进行确认。你可以直接在App Store当中展示这些内容,使人们在下载应用之前就能有所了解;不过,虽然这种方式通常能最大限度的减少麻烦的产生,但也不是一直可行的。如果在某些情况下你必须在应用内提供这类内容,那么要确保这些内容与整体UI保持和谐统一,与产品实际的业务功能带来的用户体验达成平衡。

在应用重启后,要恢复到用户退出时的状态,让他们可以中断的地方继续使用。不要让用户必须记住之前是通过怎样的步骤到达退出时的状态的。可以参考状态的维持与重置来了解相关的实现方法。

时刻准备着退出

iOS应用永远不会有用来执行关闭或退出的操作。用户退出一个应用的方式就是切换到另外一个应用、回到系统主界面,或是使设备进入睡眠模式。

当人们从你的应用切换到其他地方,iOS的多任务机制就会将它转至背景当中,并使用其他应用的UI替换掉当前的。为了应对这种情况,你的应用应该具备以下能力:

  • 及时地、尽可能频繁地保存用户数据,因为处于背景状态的应用随时都可能被终结。

  • 退出时,尽可能在细节层面保存当前状态,使用户回到你的应用之后不会失去之前的上下文状态。例如,如果你的应用包含可滚动的数据列表,那么在退出时要保存当前的列表位置。

有些应用即使处于背景状态也需要保持工作,譬如,用户会希望在查看待办事项或玩游戏时让另外一款应用继续播放音乐。可以参考多任务来了解怎样正确而优雅的处理这种情况。

永远不要以程序化的方式自动退出iOS应用,因为用户有可能将这种情况误解为程序崩溃。如果出于某些原因,你的应用无法按照预期正常的工作,你需要告诉用户当前的状态,并让他们了解自己能够做些什么。取决于问题的严重性,你有两种选择:

  • 通过一个能够吸引用户注意力的界面描述当前问题,并提出执行建议。使用这样的界面作为反馈,可以让用户了解到应用本身并没有出现问题。这样还可以将主动权交还给用户,让他们决定执行矫正性的行为并继续使用应用,或是切换到其他应用。

  • 如果只有一部分功能不可用了,那么可以在用户用到这些功能的时候,通过一个单独的界面或是弹出提示(alert)来告诉他们当前的情况。只在用户所访问的功能确实无法工作的时候再使用弹出提示

  • 布局

布局所关乎的远不止“界面元素在屏幕上看上去如何”这么简单。通过布局,你可以让用户知道哪些东西是最重要的,他们有哪些事情可做,内容之间具有怎样的关联。取决于设备类型及横竖屏定向方式,同一款应用的界面布局也可能会有不同的模式。

确保交互元素具有足够大的尺寸,以便用户可以很容易的与内容和功能进行互动。可点击对象的实际点击区域尽量不小于44*44像素。

将重要的内容和功能放在权重更高的位置上,使用户的注意力可以更好的聚焦在主要任务上。通常,将最重要的元素放在前半屏是比较好的做法,另外,对于阅读习惯是从左到右的用户来说,更贴近屏幕左侧的位置也是更容易引起关注的。

利用视觉表现形式的权重和平衡,向用户展示界面元素之间的相对重要程度。尺寸较大的元素拥有更高的权重,相比于尺寸较小的元素来说,更能吸引目光,看上去也更加重要。

通常情况下,要防止UI元素在外观上具有不统一的表现形式。尽可能让具有相似功能的元素同时具有相似的外观。人们一旦留意到不一致的外观表现,就很容易假设这背后是有原因的,并倾向于花费时间去搞清楚这种差异究竟代表什么。

确保界面中的主要内容在默认尺寸下可以被阅读和理解。不要让用户必须横向滚屏才能看到完整的文字内容,或是必须执行放大操作才可以看清楚内容图片

  • 导航

人们在使用应用时,通常不会感知到导航的存在,除非导航带来的体验没有达到他们的预期。而你的工作,就是以符合产品整体架构及目标的方式打造出不会被用户察觉到的导航机制。

总体上讲,导航可以分为三种类型,其中每一类都能很好的适用于一种特定类型的应用:

  • 树形信息结构的应用

  • 扁平化信息结构的应用

  • 由内容或体验所驱动的应用

某些情况下,几种不同风格的导航可以很好的整合在同一款应用当中。例如,扁平化信息结构的应用当中,某个分类里的信息也许可以很好的通过树形结构来呈现出来。

无论采用哪种风格的导航,最重要的是,要确保用户在内容当中的行进路径符合逻辑、可以预知、容易跟随。用户应该始终能够了解自己在应用当中所处的位置,以及怎样行进到下一个目标位置。

通过UIKit框架当中定义的一些标准UI控件,你可以很轻松的创建树形导航或扁平化结构的导航。此外,还有一些控件可以帮你创建以内容为中心的导航模式,例如很多图书风格或媒体浏览方面的应用当中所使用的那样。而那些围绕着体验来打造导航的应用,譬如游戏,通常都会使用订制化的UI元素及交互行为模式。

通过导航栏(navigation bar),为用户提供一种能够轻松的在树形信息结构当中前后行进的导航方式。导航栏的标题通常用来向用户展示当前界面在信息结构当中所处的位置,回退按钮可以帮助用户回到上一级结构。请参考导航栏一节,了解更多详情。

通过标签栏(tab bar)展示整体内容或功能之下的若干个同级分类项。标签栏可以很好的支持扁平化的信息结构,因为无论用户当前处于哪个界面,都可以直接在若干类别当中进行切换。请参考标签栏一节,了解更多详情。

通过分页控件(page control)来暗示多个条目或内容视图的存在。该控件可以有效的向用户展示内容单元的数量,以及当前所见的这一条在队列中的位置。请参考分页控件一节,了解更多详情。

注意:虽然工具栏(toolbar)在外观样式上与导航栏或标签栏很相似,但它不能用来承载导航方面的功能。要通过工具栏为用户提供那些针对当前上下文内容的功能操作。

一般来讲,最好让每个界面都有唯一的入口。如果用户可以在不同的上下文当中访问到同一个界面,那么请考虑使用一种临时化的视图,例如模态视图(modal view)、动作表单(action sheet)或是警告提示(alert)。请参考模态视图动作表单警告提示,了解更多详情

  • 模态情境

模态,一种用来承载特定内容、功能或体验的模式,有其自身的优缺点。它可以帮助用户完成某些任务,或在不受干扰的情况下获取信息,但会暂时性的强迫用户停止与应用其他部分的互动。

理想情况下,用户应该能够通过非线性的方式与iOS应用进行互动,所以最好尽可能的精简应用当中的模态体验。通常,仅在这些情况下考虑创建模态情境:
  • 非常有必要吸引用户的注意力。

  • 必须完成某些任务,或明确的放弃某项操作,否则用户数据将进入不稳定的状态。

保持模态任务的简单、简短、易聚焦。不要将模态视图打造的好像是嵌在应用当中的迷你应用。如果模态视图中的子任务过于复杂,人们很容易忘记进入模态视图之前的主任务是什么。在创建那些包含树形视图结构的模态任务时要特别小心,因为这种形式很容易使人们产生迷失感,忘记回退的步骤。如果你的模态任务当中必须包含那些需要通过不同的视图来呈现的子任务,那么一定要给用户提供单一且清晰的信息结构路径,避免产生循环。请参考模态视图一节,了解更多详情。

始终提供一种明显而安全的退出方式。要确保用户在退出模态视图时,能够对接下来要发生的事情有明确的认知。

如果主任务需要一系列层级化的模态视图,那么要确保用户知道当他们在模态视图中点击“完成”按钮后会发生什么。检查任务流程,以确定次级模态视图当中的“完成”按钮究竟是用来完成一部分任务的,还是用来完成整个模态任务的。鉴于有可能产生的困惑,尽量避免在次级模态视图中使用“完成”按钮。

使用警告框来传递那些必不可少的重要信息,通常还要提供可执行的功能选项。警告框会中断产品的体验流程,用户必须执行一次点击才能将其关闭掉,所以一定要让用户了解到这种干扰的出现是有正当理由的。请参考警告框一节,了解更多详情。

尊重用户对于是否接收通知信息所做的设定。在iOS的“设置”当中,用户会设定希望以怎样的方式接收通知。要确保你的应用能够遵守这些设定,以防用户一怒之下关闭掉所有来自你的应用的通知信息

  • 交互性与反馈

用户习惯于标准手势

人们会使用诸如点击(轻按)、拖拽、开合等手势与iOS设备及应用进行互动。手势能够在人与设备之间建立起更人性化的关联,增强用户对于直接操作(direct manipulation)的感知。通常,人们会希望所有应用当中的手势操作模式都保持一致,例如:

  • 通过点击(tap)来按压或选择一个对象。

  • 通过拖拽(drag)来滚屏或移动对象(将其从界面一边拖向另一边)。

  • 通过滑动(flick)来快速滚屏或移动对象。

  • 使用一个手指进行轻扫(swipe),可以展现更多内容,例如列表视图中的删除按钮、分隔视图(iPad)中的隐藏视图,或是从界面顶端展开通知中心。另外在iPad中,可以通过四指轻扫的手势在不同应用之间进行切换。

  • 通过双击(double tap)将内容或图片放大并置于屏幕中央;如果当前内容已呈放大状态,则将其缩小至默认尺寸。

  • 通过双指张开(pinch open)闭合(pinch close)对内容进行放大或缩小。

  • 通过长按(Touch and hold)在可编辑或可选择的文字上显示放大镜,用来定位光标。

  • 通过摇晃(shake)机身执行撤销或重做的操作。

除了人们熟识的那些标准手势以外,iOS还定义了一些用于在系统全局层面进行操作的手势,例如展开控制中心或通知中心。无论用户当前在使用什么应用,都可以直接通过这些手势进行系统层面的操作。

不要为标准手势赋予不同的行为。除非你的应用是游戏,否则重新定义标准手势的用途会导致用户产生迷惑,降低产品的易用性。

不要重复创建与标准手势具有相同作用的自定义手势。人们都习惯了标准手势的行为,他们不会希望花时间学习新的手势却只能达到同样的效果。

可以将复杂的手势作为完成任务的快捷方式,而不是唯一的方式。尽可能为用户提供简单而明显的方式来完成任务,哪怕需要额外的一两次点击。简单的手势可以让用户将注意力聚焦在内容和体验上,而不是交互过程本身。

不要定义新的手势,除非你的应用是游戏。在游戏或是其他沉浸型应用当中,自定义手势可以成为体验乐趣的一部分。但在那些帮助人们完成重要任务的应用里,最好使用标准手势,这样人们就不需要时刻想着操作方式本身了。

对于iPad应用,要考虑使用多指手势。iPad的大屏幕带来了广阔的空间,可以更好的支持多指手势,也就是同时使用超过一根手指进行的操作。虽然相对复杂的手势操作并不适用于所有的应用,但对于那些人们会花很长时间来使用的,例如游戏或需要创建内容的应用来说,多指手势是可以增强体验的。另外一定要记住,非标准手势的可发现性是较差的,不要让这类手势成为完成任务的唯一方式。

反馈有助于理解

iOS用户习惯于接收各种反馈。这些反馈可以帮他们了解应用当前的状态,发现接下来可以做些什么,或是预计自己的操作会产生怎样的结果。UIKit框架所定义的控件和视图当中包含了很多类型的反馈。

尽可能将状态或其他的相关反馈信息整合到UI当中。例如,邮件应用会在工具栏中显示更新状态,如下图所示。

避免不必要的警告提示。警告是一种强力有效的反馈形式,但它只应用于传达最重要的信息,并提供相关的后续操作选项。如果用户看惯了不包含重要信息的警告框,他们就会学会忽略这些提示了。请参考警告框一节,了解更多详情。信息输入方式要简单易行

无论是点击控件元素还是使用键盘,输入信息都需要耗费用户的时间和注意力。如果你的应用在帮助人们解决问题之前需要让他们进行太多的信息输入,他们就会感到受挫。

使用选择让输入更轻松。例如,你可以在某些地方使用列表视图或选择器(picker)来代替文本输入框,因为对于多数人来说,选择比打字更容易。

在合适的情况下,从iOS获取信息。人们会在设备系统中存储很多信息,不要强迫他们再次输入那些你能够在系统中获取到的信息,例如通讯录或日历信息。

给予用户有价值的反馈,来平衡向他们索取信息的要求。让用户了解付出与回报的关系,可以使他们感受到产品的使用流程正在向前推进。

  • 术语和修辞

应用当中所显示的任何一个词汇都是你与用户之间交流对话的一部分。要将这些对话看做是帮助人们提升舒适感的机会。

确保你所使用的术语能够被用户理解。基于你对用户的了解,评估你希望使用的词汇和短语是否恰当。例如,对于那些相对“简单”的用户,技术术语几乎是没有用处的,但对于专门面向技术型用户所设计的应用来说,这样的词汇又是非常得当的。

使用非正式的、友善的语气,但不要过于随便。希望避免生硬或过于正式是没错的,但也不要表现出过分的善于交际或屈尊俯就。要记得,UI当中的词汇是会被用户在一次次的使用过程中反复看到的,一些初次看去显得很聪明的说法,被反复读过之后很可能会给用户带来不快。

像报纸编辑一样思考,留意那些多余的、非必要的词语。简短而直接的文案可以让用户理解起来更快更容易。识别出最重要的信息,简明的表达出来,并通过显要的视觉形式进行输出,这样人们就不需要从一大堆文案当中寻找他们希望找到的信息了。

在交互控件旁边使用简短的标题或含义明确的图标,使用户能够对这些控件的用途一目了然

在描述日期信息时,一定要做到精确。很多时候,使用“今天”和“明天”这样更友好的词汇来表达日期信息是比较得当的,但如果你没考虑到用户所处的地理位置,那么这样的文案很可能产生迷惑。例如,要考虑到某些事件正好在午夜前。对处于相同时区的用户来说,事件是发生在“今天”的,但对于那些位于早一个时区的用户来讲,事情则发生在“昨天”。

在App Store中撰写优秀的产品描述文案,尽可能创造机会与潜在用户进行沟通。除了准确的描述你的应用,并突出人们可能欣赏的品质之外,还要确保:

  • 更正所有的拼写、语法和标点当中的错误。虽然这类小错误不会讨扰到每个人,但确实会使产品在一部分用户心中留下负面印象。

  • 尽量少使用全部大写字母的词语。某些时候,全部由大写字母组成的单词可以有效的吸引用户的注意力,但当通篇都是这样的单词时,就会变得很难阅读,好像这些文字正在用户眼前叫喊一样。

  • 考虑对特定的bug修正进行描述。如果你的应用在新上线的版本当中包含用户所期待的bug修正,那么在描述当中提到这一点将是个好主意。

  • 动画

漂亮而精致的动画效果遍及iOS各处,它们使应用体验更具动态性,更加吸引人。精细而恰当的动画效果可以:

  • 传达状态。

  • 增强用户对于直接操作(direct manipulation)的感知。

  • 通过视觉化的方式向用户呈现操作结果。

要谨慎的使用动画效果,特别是在非沉浸型应用当中。对于那些聚焦于严肃目标或效率型任务的应用来说,过度的、无意义的动画效果会阻塞任务流程,降低应用性能,分散用户注意力。

尽可能与iOS内置应用的动画模式保持一致。人们习惯于内置应用当中各种精妙的动画效果。实际上,用户往往会将内置应用当中的动效看作一种体验的标准,例如切换视图时的平滑过渡效果,切换横竖屏时的流畅反馈,或是能表现出各种物理效果的滚屏动画等等,这些都逐渐成为了人们预期当中的一部分。只有当你在设计一款沉浸型应用,譬如游戏的时候,才可以重点考虑订制化的动画效果。

在你的应用中保持动画效果的一致性。与其他类型的订制化设计相仿,如果你要在自己的应用中使用自定义动画效果,那么要确保使用方式的一致性,这样,用户才能随着不断使用你的应用而积累认知。

多数情况下,要在你的自定义动画效果中力争实现仿真效果。虽然,人们往往乐于接受表现形式当中破格体现出的艺术性,但当他们体验到不符合物理规律的运动效果时,仍然会感到怪异与迷惑

  • 文字排版与配色

文字必须易读

最首要的是,要确保文字排版的清晰易读。如果用户根本看不清界面当中的文案,那么文字本身再漂亮也没有意义。iOS7当中的动态文字(Dynamic Type)可以实现:

  • 在每种字号下都能自动调整文字的粗细、字间距和行高。

  • 针对在语义上有所区别的文本模块,例如Body、Footnote或Headline1等,可以自动指定不同的文字样式风格。

  • 文字可以根据用户在动态文字及可访问性设置当中指定的字号来自动的调整。

通常,应用全局应该只使用一种字体,包括它的几种不同风格样式。多种字体的混合使用会使你的应用看上去凌乱而草率。使用UIFont中的样式API,根据不同的语义用途,例如正文或标题,来定义不同文本区域的样式。


色彩可以增进沟通

考虑定义一种基本色。iOS7的内置应用有着各自的基本色,例如备忘录中的黄色,用来表达元素的交互性及状态。

色彩是具有沟通能力的,但不总是以你所希望的方式来实现。对于同一种色彩,每个人的感知都是有所区别的,另外在不同的文化当中,颜色被赋予的含义也有所不同。尽量花些时间来研究其他国家和文化群体是怎样理解你所用到的配色的。要尽最大努力确保你应用当中的色彩可以准确的传达信息。

多数情况下,不要让用户因为色彩而分神。除非色彩本身就是你应用的根本价值和目的所在,否则它们只应被用来在细节之中增强交互体验

  • 图标与图形

应用图标

每个应用都需要一个漂亮的图标。很多时候,人们都会根据应用图标来预判一款应用的质量、用途和可信赖性。

当你开始构思应用图标的时候,应该将以下几点牢记在心。另外,当你着手创建图标的时候,可以参考应用图标一节来了解更多的规则和指导。
  • 应用图标是产品品牌的重要组成部分。要将图标的设计看做是向用户讲述产品故事并与他们建立情感关联的重要机遇。

  • 最好的应用图标都是独特、简洁和吸引人的。

  • 应用图标在不同的尺寸规格下都应该表现良好,并且能够适应各种背景。另外需要注意的是,某些在大尺寸图标中可以增强视觉效果的元素,一旦缩小,有可能会使小号图标看上去非常脏乱。

其他图标

iOS提供了很多小图标,用来在标签栏、工具栏和导航栏当中代表那些最常见的任务或内容类型。要尽可能多的使用这些预设图标,因为用户已经很清楚它们的含义了。

当然,你可以在需要表现自定义行为或内容类型的时候使用订制化的图标。这些小巧而具有现代感的图标,在设计方式上与应用图标有很大的区别;可以参考栏按钮图标一节来了解更多。

图形

iOS应用往往包含有丰富的图形元素。无论是显示用户照片还是订制化的插图,以下这些原则都是需要遵守的:

支持Retina屏幕。确保为所有的图形元素提供Retina所需的@2x规格支持。

按照原始的长宽比例显示照片和图形,另外放大比率不要超过100%。你不会希望自己应用当中的图形元素看上去歪扭失真。此外,要让用户可以根据自己的需要对图片进行缩放。

不要在你的设计当中使用那些代表苹果公司产品的图形。这些图形的使用会涉及到版权问题,而且产品设计本身是经常会发生变化的

  • 品牌

品牌,不仅是在应用中呈现品牌的配色或logo这么简单。最理想的情况是,经由创造独特的外观和感觉,为用户带来印象深刻的优质体验,从而打造出你的应用所特有的品牌。

当你需要在应用中明确的向用户展示品牌信息的时候,要记住以下两点:

  • 将品牌元素中的色彩或图形进行必要的精炼,通过一种非侵入式的方式整合到应用当中。人们用你的应用,是为了完成某种任务或得到娱乐消遣,没人希望被迫去看广告。为了不影响整体体验,你需要安静的展示自己产品的品牌识别元素。在iOS7当中,你可以很轻松的定义一种和品牌相关的基本色,来表达元素的交互性和状态。

  • 不要从用户所关注的内容当中挤兑空间来展示品牌信息。例如在导航栏底部增加一个固定的信息条,只用作展示品牌信息,这样就会平白减少内容的显示空间;试着考虑其他非侵入式的方式,例如订制化的背景图片等等。

重要:应用图标是个例外,它应该完全聚焦在品牌识别性上。因为用户会很频繁的看到你的图标,所以要多花些时间在图标的设计上面,增强其对于用户目光的可识别性,这是很重要的

  • 与iOS的系统整合

使用标准UI元素

尽可能使用UIKit框架定义的各种标准UI元素。使用标准UI控件而非自定义元素,你和你的用户都会受益:

  • 如果iOS本身经过重新设计,那么标准的UI元素在系统更新时可以随之自动更新,而自定义的UI元素不会。

  • 人们会立刻了解怎样使用你的应用,因为他们已经习惯于标准的UI元素。

为了充分发挥系统标准UI元素的价值,你必须:

在使用任何一个标准UI元素的时候都要依照设计规范的指导。当一个UI元素无论看上去还是用起来都符合用户的期待时,他们就可以依靠已有的经验来更快更容易的使用你的应用了。你可以在UI元素一章中找到各类UI元素的规范。

通常,不要为标准的交互行为创建自定义UI控件。首先问问自己,为什么要创建一个行为方式与标准UI控件完全相同的自定义控件?如果你只是想要一种订制化的外观,可以考虑通过UIKit框架当中用来订制外观的API来改变标准UI元素的样式,或是改变元素的配色风格。如果你想得到的行为与标准控件的行为有些许区别,那么首先要确认能否通过属性的调整来使标准元素完成同样的目标。如果你需要的是彻头彻尾的订制化交互行为,那么在设计自定义控件的时候,要确保它看上去不会与标准控件相似。

技巧:Interface Builder可以帮你很轻松的创建标准UI元素、使用订制外观的API、设置外观属性、向控件中添加系统预设或自定义图标等等。可以参考Xcode用户指南了解更多详情。

不要为系统预设的按钮和图标赋予其他的含义。iOS提供了很多按钮与图标,你要读懂相关的文档,了解这些按钮与图标在语义上的含义,不要单纯依靠自己对它们外观的理解。如果你发现预设的按钮或图标无法准确的代表你想要表达的功能含义,那么可以自己创建。你可以在栏按钮图标一节当中找到相关规范,帮你更好的设计自定义图标。

如果你的应用可以带来沉浸型的体验,那么打造完全自定义的控件是合理的做法。因为你在创建一种独特的体验环境,对于用户来说,探索与该环境进行互动的方式也是他们所期待的体验之一。

对横竖屏切换的响应

人们通常会希望能够在任何定向方式下使用iOS设备,所以最好让你的应用可以在这些情况下做出恰当的响应。

让用户在横竖屏状态下都能聚焦于最重要的内容。这个目标具有最高优先级。人们需要在应用当中查看他们所关注的内容,并与之交互;如果横竖屏切换会使用户失掉焦点,他们便会感到迷失,并觉得丧失了对应用的控制权。

通常,要让应用能够运行在各种定向模式当中。人们可能会期望在任何定向方式下使用你的应用,能满足他们的期望是最好的。特别是iPad用户,他们会希望你的应用能够运行在他们当前所使用的任何持机方式下。当然,有些应用确实只能运行在竖屏或横屏当中;如果你的应用是这样,那么你应该参考以下几点原则:

  • 应用在启动时只按照默认支持的定向方式进行加载,忽略当前设备的屏幕方向。如果一款游戏或媒体浏览类型的应用只能运行在横屏下,那么就直接以横屏模式启动,即使设备本身是处于竖屏状态的;这种时候人们会明白需要调转屏幕才能正常浏览内容。

  • 避免在界面中通过UI元素提示人们调转设备屏幕。直接按照默认支持的定向方式启动应用,这就已经清楚的告诉用户需要旋转设备了,不需要再增加多余的UI元素进行引导。

  • 同时支持两种子状态。譬如,如果你的应用只能运行在横屏当中,那么无论当前横屏的方式是Home键在左手边还是右手边,人们都可以正常使用;如果人们在使用过程中将设备调转180度,那么应用最好也可以进行响应,自动调转180度。

如果对于你的应用来说,调转屏幕方向是用户输入方式的一部分,那么你可以通过特定的方式进行订制化的处理。例如,在一款游戏当中,人们需要通过旋转屏幕来产生相应的行为,那么游戏本身就不可以再响应横竖屏切换的规则了。这种情况下,你可以允许用户在进入主线流程之前仍然能够切换子状态(Home键在左手边或右手边),而一旦进入主线流程,那么旋转屏幕就只能用来触发游戏当中的特定行为。

在iPhone上,判断用户在调转屏幕方向时的需求所在,并进行响应。人们从竖屏切换到横屏时,通常是因为想要“看到更多”。如果你只是简单的将内容尺寸放大,那么未必能满足用户的期望。试着调整每一行文字显示的字数,如果需要,甚至是重新调整UI布局,使其能够呈现更多的内容。

在iPad上,尽量支持所有的定向方式,满足用户的期望。由于iPad自身屏幕规格较大,所以上一条中提到的“用户旋转屏幕以便看到更多”的需求是相对较弱的。相比于iPhone,人们不太关注于iPad的设备框架限制,以及Home键的位置,所以在很多时候,人们不会将iPad看做一种有默认定向方式的设备。如果可以,尽量让人们在任何持机状态下都能在iPad中与你的应用进行互动。

在为iPad应用设计横竖屏响应规则的时候,遵守以下几点规范:

  • 考虑改变辅助信息或功能的展示方式。虽然你必须确保重要内容始终能够获取用户注意力的焦点,但对于次要信息或功能,可以考虑随着横竖屏切换而改变呈现方式。以iPad内置的邮件应用为例,账户和邮箱列表就属于次要信息(当前选中邮件的详情是主要内容)。在横屏时,次要信息被放置在左侧面板中,而竖屏时,则是呈现在弹出面板里的。对于某些游戏,在横屏状态时的界面边界到了竖屏当中也许需要进行重绘,这就有可能导致边界上下留出额外的空余空间。这种情况下,可以考虑在这些空余空间当中展示一些游戏辅助信息或对象。

  • 避免无意义的布局变化。尽量在所有定向方式下都提供具有一致性的体验。具有相似性的体验可以让用户通过已经掌握的使用模式在横竖屏当中轻松操作。如果你的iPad应用会在横屏时以网格的形式展示图片,那么在竖屏时,就没有必要一定更改为列表形式。

  • 如果可能,在切换横竖屏时尽量避免对信息内容样式的重新定义。尽量保持内容具有相似的格式样式,特别是对于文字内容来说,不要让用户因为切换横竖屏所导致的版式变化而无法找到之前阅读到的地方。如果有些内容样式必须发生变化,那么要通过动画过渡效果来帮助人们更好的跟随这些变化。例如,当横竖屏切换时,内容当中必须增加或减少一行文字,那么可以考虑在增加和减少的过程里使用渐入和淡出的动画效果。为了让自己设计出更好的横竖屏切换方案,可以想象一下,如果你是在现实世界当中与这些内容进行物理性的互动,那么它们有可能表现出怎样的行为规律。

  • 为横竖屏各提供一张单独的启动图片。这样,无论人们在那种持机方式下打开应用,都可以感受到平滑的启动体验。与iPhone当中的系统首屏不同,iPad的系统首屏是支持横竖屏切换的,人们有可能在任何方式下退出前面一个应用,并继续打开你的应用。

弱化文件和文档的处理过程

iOS可以帮助人们创建和管理文件,但这不意味着人们在使用iOS设备时必须思考文件系统方面的问题。

在iOS当中,不存在类似OS X系统中的Finder这样的应用,用户也不应该被要求与文件直接打交道,特别是不该去面对任何会让他们联想到文件源数据或存储位置一类信息的东西,例如:

  • 确认打开或保存文件的对话框。

  • 关于文件访问权限的信息。

尽量让人们在不需要打开桌面端iTunes的情况下管理各种文档。考虑使用iCloud来帮助用户访问他们在不同设备上的内容。要为用户提供更好的iCould体验,可以参考iCould一节。

如果你的应用提供创建及编辑文档的功能,那么可以尝试提供某种“文档选择器”,帮助用户打开已有文档或创建新文档。理想情况下,这样的文档选择器应该:

  • 具有高度的图形化外观。让人们可以轻松的通过图形化的界面外观来识别出他们想要的文档。

  • 让人们使用最少量的手势来完成目标操作。例如,通过封面流或网格的形式组织文档,让用户通过滑动手势进行浏览,并通过点击来打开。

  • 提供新建文档的功能。不要让用户必须到其他地方创建新文档,而是直接在文档选择器当中点击文档图形上的某种默认占位图片来直接创建。

提示:你可以使用Quick Look预览功能让用户在你的应用中对文档进行预览,即使你的应用并不支持这类文档的打开操作。参考Quick Look一节了解更多。

给用户一种安全感,让他们知道自己的工作成果始终会被保存,除非他们主动取消保存或进行删除。如果你的应用提供创建及编辑文档的功能,要确保这些数据无需用户手动执行也可以得到保存。iOS应用应该承担起帮助用户保存输入内容的责任,无论是他们在当前文档仍然处于打开状态的时候去查看另外一个文档还是切换到其他应用。

不过,如果你的应用的主要功能并不是创造内容,但你需要让人们可以在查看信息与编辑信息在两种模式间进行切换,那么在这种情况下你可以提醒用户对信息变更进行保存。通常,可以在查看信息的视图界面中提供“编辑”按钮,当用户点击了这个按钮之后,就会进入编辑状态,同时原来的“编辑”按钮变为“保存”和“取消”这两个按钮。这种变化可以提醒人们,他们现在正处于编辑模式,可能需要执行保存操作,而“取消”按钮则为他们提供了在不保存变更的情况下直接退出编辑模式的出口。

必要的时候提供设置方式

有些应用可能需要向用户提供安装或设置选项,不过多数应用是不需要的,或是可以推迟必须进行设置的环节。成功的应用可以让多数用户立刻上手使用,而且会在UI当中提供一些可以调整体验模式的方法。

尽量避免将用户打发到系统的“设置”当中进行操作。要记得,用户必须首先离开你的应用才能进入系统的设置,你不会希望鼓励用户这样做的。

如果你能按照目标用户群当中大多数用户的期望来设计产品,就可以减少这种设置方面的需求。如果你需要用户的某些信息,可以首先试着从系统当中存储的用户信息当中进行查询,而不是让用户再次进行输入。如果你决定必须在应用中提供设置功能,可以参考iOS应用编程指南当中的“The Settings Bundle”一节了解更多信息。

如果有必要,让用户尽量在你的应用内部进行设置。在应用内提供设置选项,可以让相应的变更可以直接体现出来,让用户即时的看到变更结果,而无需在你的应用与iOS的“设置”之间进行切换。

如果需要,尽量在应用的主界面中提供设置选项。特别是当设置选项对应着应用的主要任务,或是用户可能频繁的变更设置的时候,最好将相关的设置选项直接放置在主界面当中。如果你要提供的设置功能对用户来说只是偶尔才会用到,那么就尽量将它们放在单独的界面当中。

------------------------------------------------------------

最后再次感谢@李林的翻译,能够节省我很大程度的阅读成本。有兴趣的同学也可以关注他的新浪微博,或者他的Be For Web | 为网而生(博客料很多!)


iPhone5s除了吐槽还剩点什么

对于库克掌权的苹果,我实在是不喜欢,完全丧失了我想像中的创造力。但媒体和身边朋友,吐槽已经很多了,我也无力吐槽。冷静下来,毕竟无论如何还是要换iPhone5s(自己的iPhone4已经老弱病残了),好好分析一下iPhone5s到底带来了哪些新机会?

1、从摄像头提起。

我换手机很重要的原因,特别是从iPhone4到5s,但可惜的是像素还是提高到千万级别,当然摄像头还是带来了不少让我喜欢的性能,比如感光元件增大了15%,这个可以让光圈变得f2.2,当然这个水平还不够,对我来讲,光圈越大效果肯定越好。当然苹果的软硬件结合是他的强项,拍照的成像一定提升不少。不过手机屏幕上看到的毕竟有限,每次导入到电脑上,就各种凄惨,噪点多得完全不忍直视,希望这次感光增加之后可以解决这个问题。

当然另外的一个原因是因为索尼QX系列镜头已经推出,完全可以忽略手机本身的摄像头也是可以的。。。

当然,提到摄像头还是不得不提到这次的双闪光灯,我没有实际使用过,但起码闪光灯下的照片之前都是没法看的,这次用色温补偿的方式去提高闪光灯下的成像,我想还是靠谱的。

当然最令我兴奋换iPhone5s的是它高速拍摄和摄像,直接可以剪辑出超炫的慢镜头,对我来讲,绝对是拍摄视频短片的好利器啊!

2、媒体大议的新home键,也就是Touch ID。

自从上次siri被炒得很热然后又被骂得很惨的教训,这次我觉得大家还是趋于冷静地考虑。不过我个人并不认为单纯的指纹识别有什么价值,而更让我兴奋的是,手机元件上又增加了一个和个人信息安全关联的感应元件。如果苹果可以很好地开放这个元件接口,那么比如支付,比如信息安全,比如丢手机,甚至简单地输入密码,都可以变得非常简单自然。我个人觉得这也是第一次苹果如此考虑手机的安全性。

当然如果你看过它结构视频就可以知道,它不仅仅是密码工具,更多是高精度感应和图文绘制的工具(当然前提是苹果愿意开放这样的权限),以后可能除了摄像头以外,有更简单的靠近home键就可以获取信息的方式。

3、M7协处理器。

这个绝对是利器,可以说又一个神器诞生了。它最大的作用是在极低电量的损耗下进行信息的互动,简单来讲就是你把手机放在口袋里,手机就可以知道你的行为,路程记录当然是最基本不在话下的功能,而且会有更多地可能性,比如你到了某个地方时,M7启动精准定位可以知道你到了消费区域,直接push你订阅地信息,是最自然的事情。还有比如你长时间没动,它也可以做一些事,比如你睡觉的时候,它可以自动把电话短信静音,但自动打开闹钟等功能。想象空间更多了。

4、最后来讲讲跑分的处理器A7。

这个我其实没啥兴奋的,当然对于开发来讲,64位性能下,可以做的事就更多了。我觉得这也算是一件好事。相较iPhone4来讲,5s肯定是急速了。。。

5、吐槽一下iOS7。

反正我不喜欢iOS7的中文界面,字体字号处理留白处理都做得很差,扁平化本来可以做得很好,可惜这个版本太塑料太廉价。而且官方app和第三方app的样式差别太大。希望下一版的iOS可以做得更好点。

当然最好劝你买土豪金,因为这样才能显示出你买的是iPhone5s。。。


9月发布会很忙

截止这篇文章时,9月才5天,魅族MX3、三星Galaxy note3、Galaxy 10.1、Gear手表、高通手表、小米手机3、小米电视、索尼z1、QX100、QX10这些产品都开了发布会。这简直是要堵在苹果9月10日的发布会之前“先发制人”一番。

先来说说手机系列,魅族MX3、三星note3、小米手机3、索尼Z1。这几个都疯了似的往5寸以上掌,分辨率也已经亮瞎我的钛合金狗眼,远超过我11寸air的分辨率,基本上都是1080p(魅族还是1800 x 1080p的畸形);ppi已经达到400以上了;CPU从4核变成8核,内存统统2GB,我真的不知道这些硬件参数对我来讲有什么意义,我的感受这些都是比硬件配置,纯讲跑分的屌丝手机。

当然也不是一无是处,魅族MX3的系统定制还是非常不错,特别是它的home触摸和Smart Bar我觉得才是这个手机的亮点。比起三星恶心又敏感的触摸返回键,还有占屏幕的android虚拟home键,要强得多。当然这款手机还有就是天线信号处理,我觉得虽然感受不到,但它的细腻支出还是很不错。

再说索尼Z1,看发布会的说法,我最看好的是它的镜头以及系统深度优化的摄像摄影功能,大光圈,2k以上的像素画质,以及连拍选择,AR虚拟增强等,简直是摄影利器。

当然还有它的防水,我没用过,不知道做得怎么样。不管怎么样,起码不是在跑分跑分跑分!

三星这次note3和Galaxy 10.1,我的感觉是,千万匹草泥马奔腾!除了又变大了,然后就是跑分跑分跑分,它所谓的一些体验优化,简直是细节狂的偏执,一点都不考虑现实用户的感受。而且note3唯一亮点(除了谎称压感其实模拟的笔以外)屏幕大,这次众多发布的产品早就把他干掉了。

最后说说小米3,我不是米粉,但家里也有小米盒子,我对小米3的感觉是,除了跑分,啥也不是。就不知道它的超灵敏屏幕是不是可以用细尖笔写字。。。

除了手机,这次还发布了挑战移动互联网的周边设备,这才是令我兴奋的关键,但也有很多蛋疼的地方。

我最爱的是索尼出的两款镜头,记得若干年前看到过一个概念视频,讲的就是镜头和机身分离的设计,非常惊艳。

http://v.youku.com/v_show/id_XMjYwNzU4ODcy.html

想不到这次索尼真得做出来了。虽然这两个镜头还比较厚重或者成像其实一般,最多就是和卡片机王RX100 ii一样的镜头。但这也不会浇灭我的热情,当然如果可以配合索尼Z1的话,效果会更好。(看评测说,现在z1还没有特别好地支持这两个镜头,特别是拍照键,不过以后应该会修复)这款出货我一定买!

http://v.youku.com/v_show/id_XNjA0Nzc0MjUy.html

好了,来看看令人蛋疼的三星Gear手表,想当年ipod nano6就只是一个播放器,但也让我心动很久,非常期待苹果可以出手表,但谁知道三星领先一步。可惜,这一步是失足的一步。gear完完全全就是个小版的阉割过的手机,不是尼玛装个智能系统就是智能手表了!只能待机一天、充电麻烦、没有手表相关的感应硬件、打电话还要通过手机(尼玛那还需要手表做什么,傻逼的设定)、必须配合三星系列等问题,让我对这款手表彻底失望,还是等苹果来完败三星吧!


相较而言,高通低调的手表发布,比三星好多了,起码待机时间可以提升很多,而且是彩色墨水,在任何环境下都可以看得清楚。当然这款手表也不是很理想。

http://v.youku.com/v_show/id_XNjA1MjEzNzk2.html

最后来讲讲小米电视,看了发布会的同学是不是对这个电视特别爱?我觉得也还不错,可惜尺寸上没有60寸,否则我也会因为价格便宜而入手一台。不过相对小米3来看,小米电视在设计上,包括电视操作体验上的确下了不少功夫,有很多亮点值得学习,但这个节奏难道小米电视要放弃小米盒子了?其实他的所有功能都可以通过小米盒子来实现,除了像我这样装修的屌丝有电视购买需求,其他人是怎么样。电视不会像手机一样,一年换一台,旧的给爸妈用吧。。。

http://v.youku.com/v_show/id_XNjA1MTE2NTQ0.html

吐槽这么多,其实还是期待苹果9月10日的发布会,虽然老乔走了之后,苹果的动作让人吐血,但还是期待它的新品,千万千万不要给我跑分跑分跑分!来点革命性地创意,行不行啊!


[无线手册-4] dp、sp、px傻傻分不清楚[完整]

做移动设计的同学,不管是原生app或者web app,应该对字体字号都是很头痛的问题。根本原因是,我们用唯一分辨率的电脑,设计各个不同尺寸大小分辨率的设备,那简直要疯掉了。

但不要着急,我们先来理解一下一些名词:

我们一般会碰到的度量单位主要有:dpi、ppi、dp、sp、px、pt、in。其中,px应该各位最熟悉的单位,也是我们主要使用的photoshop或者axure等工具用的度量单位,而它在移动端时,的确已经“过时”了。但不要着急把它丢掉,因为它是接下来非常重要的换算单位(所有手机参数还是用px在表达)。

dpi和ppi这两个是密度单位,不是度量单位,而这两个恰恰是我们换算中重要的分母。简单理解一下:

  • ppi (pixels per inch):图像分辨率 (在图像中,每英寸所包含的像素数目)

  • dpi (dots per inch): 打印分辨率 (每英寸所能打印的点数,即打印精度)

dpi主要应用于输出,重点是打印设备上。

我们在移动应用中提到ppi和dpi其实都一样(概念不同,但对设计来讲没有特别需要深入了解),所以我们先忽略掉dpi。而ppi的运算方式是:

PPI = √(长度像素数² + 宽度像素数²) / 屏幕对角线英寸数

举个简单的栗子,iphone5的ppi是多少?ppi=√(1136px² + 640px²)/4 in=326ppi(视网膜Retina屏).这样大家就能够明白ppi和px的关系。

这里还提到in(英寸)这个词,这个非常重要,因为现实中我们经常提到4英寸手机或者5.5英寸大屏手机,而这个尺寸是用户真正感受到的物理大小,所有提到不同尺寸的屏幕不仅仅是分辨率或者像素,而更多的是英寸。

好,现在关键的来了,dp、sp、pt,是我们设计中的关键。

  • dp:Density-independent pixels,以160PPI屏幕为标准,则1dp=1px,dp和px的换算公式 :

    dp*ppi/160 = px。比如1dp x 320ppi/160 = 2px。

  • sp:Scale-independent pixels,它是安卓的字体单位,以160PPI屏幕为标准,当字体大小为 100%时, 1sp=1px。

    sp 与 px 的换算公式:sp*ppi/160 = px

是不是看起来dp和sp一样,在Android设计原则中,有提到这两个单位,他建议文字的尺寸一律用sp单位,非文字的尺寸一律使用dp单位。例如textSize="16sp"、layout_width="60dp"。

为什么要把sp和dp代替px?最简单的原因是他们不会因为ppi的变化而变化,在相同物理尺寸和不同ppi下,他们呈现的高度大小是相同。也就是说更接近物理呈现,而px则不行。

但问题来了,ps或者axure里面没有sp或者dp这个选项啊,怎么办?看到网上有人说用pt去替换px(pt是物理高度,1in=72pt)。补充一下自己推算的pt转换px的公式,不一定对,可以参考:例如9pt,再96dpi下,那么就是9 * 1/72 * 96 =12px。而在72ppi下,9pt=9px。

我再来做个小小的实验:

1、先了解清楚你笔记本的ppi,比如我的macbook air是11.6英寸,1366 x 768分辨率,那么它的ppi就是135ppi。

2、然后新建一个页面,输入的ppi值就是你电脑的ppi值。我们先来看看不同ppi值在电脑上呈现的字体大小是怎么样的:

我用的都是arial 14点(注:专家指正这里不是px而是pt,点)的字体,但在320ppi、160ppi、135ppi(我自己的)以及标准72ppi下的大小,截然不同。

好,我们再来看看,在电脑上直接截图web页之后对比的效果:

你会惊讶的发现,只有72ppi是正常的,其他字体都不对了,因为原本的web设计是不用考虑dp、sp或者ppi的,它是直接px作为物理单位的,而点在72ppi下(1pt x 1/72 x 72dpi=1px)是正常显示的。所以我们以前做web的时候根本不用担心自己的设计在别人电脑上看起来会很大或很小。当然其实像firefox是用96dpi,也就是9pt=12px。

但我再截一下用iphone访问web之后的图:

好吧,这时候,你就发现72ppi是见鬼了,因为这个字体在手机上看到完全地小了,所以做移动设计不要傻乎乎地还用72ppi了,不然你很难判断效果。(当然你也可以借助我之前提到的同屏工具来映像到移动设备上查看效果,但这个其实会很麻烦很麻烦很麻烦...)

但是到底是选160ppi还是135ppi呢?如果选了135ppi那在别人的电脑上会怎么样呢?是不是又要重新调?其实不用,我借用另外一台Retina的macbook pro做了相同的测试,你会发现,其实和屏幕ppi无关,和你在ps里设定的分辨率有关。

[补充,有位专家指出我的不对,就是在点和px上我搞错了,我又尝试了一下,如果是px的话,不同ppi下字体大小是不变的,而点(pt)的话会有变化。

并且如果是用pt来代替px的话,为了整除方便,那么ppi一定要设置成72的倍数,比如144ppi,上图里面160ppi则会除不尽,所以上图其实160ppi的字体还是和截图字体有些许差异。]

然后有专家提出,iOS下是用pt作为字体单位,而Android是以sp作为字体单位,而且web app还是以px作为字体单位。怎么样让设计和输出单位是一致的?我之前给出的解决方案并不十分严谨易懂,所以我重新编辑了一下。

为了求证移动字号的问题,跑了一圈同事,最后只能暂时得出一些“不一定正确”的结论:

1、字号行业标准几乎没有,不像web一样,宋体12px、14px这样很清楚。我唯一找到的只有Android的设计建议:

图中原作者还换算了一下在240ppi下对应的px值。

而我问了一圈同事,基本上现在设定字号都是凭感觉做事的。当然你也可以参考Android这个标准。

2、如何在电脑上快速预览高清内容是否排版合理,我想到最简单的一点就是缩放psd,缩放的比例很关键,要达到物理尺寸,首先你得知道你电脑的分辨率,我的分辨率是135ppi,如果要看分辨率是326的iphone上的效果,就缩小到135/326≈41.4%,你就会发现物理尺寸非常接近。可以看看一些排版上的问题。当然你也可以装一些工具来达到更好的效果。

3、怎么和开发沟通你的字体大小?我也没有特别好的办法,就简单分成3块来说:

  • iOS,你设计的时候字体记得用“点”,然后ps设定分辨率用标准的72ppi即可,因为据同事说,这样下的pt值是准确的,或者说iOS自动会转换这个值。具体也需要大家操作了才知道。而这个分辨率下1pt=1px,我简单换算了一下sp->px->pt的尺寸:

12sp=24.45px=24.45pt;14sp=28.52px=28.52pt;18sp=36.67px=36.67pt;22sp=44.88px=44.88pt;


但这个小数点实在难受,所以四舍五入取整数,并且为了保证可以整除,那么可以是24pt、28pt、36pt、44pt。

  • Android,你就用标准sp就好了,当然其他图片等尺寸你可以用dp来表述。

  • Web app,这个我也找不到答案,因为Web app还会涉及到响应式设计,而且前端会用em去表示字体比例。所以同样,如果你用72ppi分辨率做的话,直接可以把对应的字号告诉开发就好了,当然最好你所用到的字号是倍数关系,最小倍数是0.25,这样用em去做比例的时候会更容易些。比如12px、16px、24px、32px这样。

有关字体字号的研究已经有同事在做,以后有结论了再和大家分享。

[以上都是本人自己瞎弄的,如果正确纯属偶然,所以请那些“傻逼”闭嘴,我欢迎专业上的讨论和交流,但不喜欢人品低下地谩骂。]


装修那点屁事(3)

言归正传,作为一个对产品设计的细节要求十分严谨的我,对于陌生的装修领域也不能姑息半分,所以我就从最开始的挑选装修公司说起。

3、那些坑爹的装修公司

相对买房和买白菜一样快,挑选装修公司,那是需要做好长年抗战的准备。我花了近3个月,对比不下6家公司,高中低都有。

一开始都是盲目的,第一次装修,找装修公司就像找初恋一样懵懂,更别说一只手就可以找到G点,所以你最开始的渠道是道听途说或者是被电话营销(秘笈:装修时要准备好两个手机,在买房装修时用一个,装修完之后换另外一个,因为原来那个号码已经被各种垃圾营销淹没)。

我也是被电话营销,“被”A公司找到了,他们在咖啡馆搞了个现场见面会,什么促销什么免费,一套一套的。想着看看不掉肉的心情到了现场,人还不少。之前做过一些简单的功课,比如上19楼去看看装修板块的评价,这家A公司在杭州也算是装修界里的“大公司”了。

不过我劝你千万不要被现场任何言论冲昏头脑,特别是他们说“今天是优惠最后一天,以后都没有这样的优惠了,你交个定金就好”之类的。我自己是做产品设计的,虽然方法不通,但理念还是类似的,所以三下五除二的功夫,我感觉这家公司在装修细节上基本上是大同小异,和他“大公司”的身份截然不同,而且一开始招待我们的“主任设计师”因为有别墅客人就把我们丢给了一个人,简单交谈后,以我多年面试招人的经验可以得出,这个人顶多是实习生,而且还进这家公司不到3个月的样子。

这里要提一下装修公司里设计师的一个通用原则:

基本上分为设计师、资深设计师、主任设计师、首席设计师、设计总监这么几个等级,那么设计师的设计费是免费的,但他会告诉你这个不好那个不好什么的。一般你会选主任设计师或者首席,当然价位上就不便宜了。你得好好评估一下,不仅仅是设计师的能力(基本上我都是自己设计,所以我不怎么考虑能力),更重要的是责任心和执行力。后面章节会细说这些。

回过来说A公司,这样的见面会多半会给你看他们设计的你小区同户型的平面图,但其实这图没啥技术含量,很多地方也都随意标的,千万不要上当,随便看看就好。于是果断放弃A公司。基本上有几点:

1、大公司价格水份大。羊毛出在羊身上,同等价位,他们的材料就会差一到两个档次,除非你要主动升档次。

2、人员能力参差不齐。刚说的那位实习生就是这回事,而且很多时候都是装修公司给你挑的人,你没法选择,所以一定要好好考察你的设计师,或者你自己就是做设计的,并愿意折腾,像我。最好你可以见到公司老板聊,否则效果肯定不能给你保证。就像如果你要做件事,你要是可以见到马云聊,那这事儿只要他答应就一定能成,但底下的员工就不一定了。

3、所谓大公司很多都是空壳公司。装修装修顾名思义,关键是现场安装修理的人,而大公司很多项目人员都是外包的,只有营销和设计是自己人,顶多加个监理或者项目经理的角色。所以你一定要了解清楚装修施工队和公司的关系。

接触过A公司也等于是破处了,初恋往往并没有那么美好或者时间很短暂。所以你开始成熟了,这个时候你应该不会被电话营销再拉去参加xx见面会什么了。

成熟的我,就开始接触中等级别的公司,特别是一些口碑渠道了解到的。通过一些装修论坛,也大致定位了几家中等规模的公司,其中有2家是同事接触过还不错的,但最后去了解发现,不是工艺差就是回扣高,这样的情况下,我只能再留个心眼。

这个时候,接到一个营销电话,是一家之前做过功课的中型装修公司,态度不错,离家也近,所以就打算去问问看看。所谓的成熟只是自己骗自己的。

这家姑且成为B公司,从规模上看也不算小,这次是直接找了一个主任级设计师交流,三下五除二之后,把自己的需求表达清晰,便等着设计师的方案出来。这里要注意,很多装修公司都是可以在你不付钱的情况下免费帮你设计平面方案,并且给你概算报价,这个时候你可以一分钱都不用付。当然一些大公司就需要你给个定金什么的,一般如果你不满意,这个定金你也没法要回来。所以要留个心眼,任何不被骗的最高宗旨就是不要在第一时间掏钱!

这家B公司看起来各方面都还不错,可是问题来了,前后近半个月,设计方案不是没及时出来就是方案本身漏洞百出,很多本身细节的要求没有改动。看来明显是设计师态度的问题,再加上这样类型的公司接活比较多,肯定会对个案进行疏忽。几次下来,就决定再找一家进行对比。

于是在公司同事的推荐下,找到C,这家应该算是小公司,而且名气什么的都没有,唯一有两个好处,一个是可以直接找老板谈,另一个是老板和公司同事是亲戚,并且现在是在做名气和口碑的时候,所以各方面也不会很差。同样的,找了一个设计师开始出方案了。

这家设计师还挺积极的,每几天就把方案都确定了,概算也大致确定了一下。小公司还有特点就是同等价格下用的材料比较好。B、C两家公司我和老婆反复进行比较:

1、B公司的设计水平的确远胜于C,而且施工队伍的“标准工艺”也貌似很规范。C公司就比较粗糙了。但C公司貌似比B公司负责一些。

2、C公司和B公司在概算报价上没有差距太大,最多1-2万而已。

3、但B公司的材料档次低于C公司的。

正在纠结时,得知买在一幢楼的楼下同事找了B公司另外的一个首席设计进行设计,听说各方面都还不错。(后来发现,B公司的电话营销效果非常好,我们一幢楼就有6、7户他们的客户)于是我们就打算换人。

装修公司安排设计师就像理发店里安排发型师一样,很多时候你没的挑,更多时候不可能你剪了一半的头发再换个人来剪(业绩上很难判断)。但记住,你在没有掏钱前你就是把握主动性。于是我们直接打电话给B公司的业务负责人说,如果不换人,我们就不找他们做了,这个时候,B公司的高层(应该不是老板)给我电话说当然可以换,同时也会严肃处理之前那位设计师的行为。

又一次折腾换了那个首席设计师,杭州人,长得挺秀气。而且沟通过程中终于给我了很多设计建议,之前都是我给这些设计师的。过程聊的很不错,但最后出现了关键性问题就是概算这块,刚刚说过同等价位B公司材料低于C公司。这里要普及一下所谓材料主要是哪些:

1、水管电线,这块是硬装里面最花钱的部分,假货也是在这里比较多。除了牌子有高低以外,更多还有管材的厚度直径等一些参数。比如水管是都是热水管还是冷热水管分离(肯定都是热水管质量更好);比如是6分管还是4分管,简单来讲就是口径更大,厚度更厚;比如电线是几平方的线,所谓平方就是指单位面积下,电线所能承载的功率有多大,当然这个不是越大越好,但如果都是最小那种2.5平方的线,你的大功率就容易跳掉,以后生活会非常不方便。

2、板材,这块不一定每家都做,当然做的话就要了解清楚是什么板材。做衣柜常用的是杉木指接板,环保不刷漆,最好的杭州是叫兔宝宝E0级的,还有其他木工板、九厘板或者三聚氰胺板这些都是包造型用。板材的水分非常大,后面我会讲到我的经历。

3、石膏板、砖和现浇,这块非常有学问,装修势必要动到敲墙砌墙之类的,所以墙的材料就非常多,这块价格也差距很大。一般来看价格上,现浇>砖>石膏板,然后砖还分很多种,轻质砖还是实心砖,轻质砖不是以前看到过的红砖,而是灰灰的很扁的一块正方形,它的特点是隔墙人工很简单,但最大的问题有两个,不能挂东西(因为不受力)而且不隔音。它主要是被用于放置砖太重压塌楼板,但现在很多小区根本不会有这个问题,另外,它的价格远低于实心砖。而实心砖还分砌法,有1/2和1/4,简单来讲就是1/2是平着放也就是我们经常看到的砌法,但厚度会厚而很费砖,用于实墙。1/4是竖着侧面放,会薄一点,差不多是8公分,这个主要是一些砌造型用的。当然这两种砖都很牢固。记住,如果你要在墙上挂东西,而且还要选择石膏板,那么必须在里面垫木板加固,那么这样加起来价格比用实心砖还要贵。而且石膏板的隔音非常差。小提示:如果你临时想把石膏板换成实心砖,最好要给一个月时间干透才能在上面做柜子等木工活,因为实心砖是用水泥,而水泥的水不干透会把你的木材全部泡水发霉。最后讲讲现浇,这个很多是楼板填洞什么的,用钢筋水泥固定的,成本最高,除非安全性需要,否则不推荐用。

4、油漆,这块还算透明,但要充分了解装修公司给你的油漆是什么牌子和哪个型号,因为这个价格差距非常大。

5、人工,这是装修里面的最大头,有时候会占到整个概算的1/3以上。一定要清楚对比,有些地方的人工贵很多,而且还说和材料算在一起什么的,就是让你无法算出人工费。

6、所谓标准工艺的材料费,这个也是我最后没有选B公司的主要原因,如果说前面5点都是正常的,那么第六点就是坑爹的。我刚才也提到过,B公司的工艺标准还不错,比如刷墙漆是刷三遍的,但为了保证刷了三遍,所以他们在墙上先涂一层黄色的底漆,然后再让他们刷,只有刷了三遍才会把这个黄色的盖掉,以表示标准,看起来好像很不错。但最后在概算里面竟然要求客户付钱,而且这一块足足贵出了1万元。一个所谓的标准工艺其实就是一个监管方式,让客户买单太不应该,所以请各位一定要放亮眼睛仔细观察。

回到现实,几经波折之后,终于放弃了B公司,虽然很可惜,但我的判断如下:

1、附加费用过高,虽然设计师费全免,但那些标准工艺和材料实在坑爹。

2、虽然设计师能力和态度都不错,C公司的设计师比较土,但我自己是做设计的,很多想法都来自于我自己,所以我会把握这个环节。(这也是我为什么会这么折腾的主要原因,后面会讲到经历)

3、C公司可以直接和老板沟通,很多事情商量着来。而B公司设计师只能说公司规定之类的话。

正当打算和C公司进一步交流的时候,我的另外两个同事又分别推荐了给自己做过的两家知名度很高的公司,暂且成为D和E,因为心里已经定了C公司,想想可以多了解一些,于是就去问了问,最后发现:

1、D公司要先交钱再设计,纯粹坑爹的先兆,直接pass。而且后面我同事装修的过程非常惨痛,一次是水电管材用了假货,连项目经理都换人了。另一次是泥工半个月没来做,说是脚摔了,但其实是去另外的公司干活。这样的大公司实在吃不消。

2、E公司还不错,但介绍的这位是自己私下接单做,虽然用的还是E公司的资源,但还是让我不怎么放心。

这里还要插播一下,因为我们不了解这些装修公司的猫腻,中间还了解到有个所谓的第三方监理的角色,他可以全程参与到你的装修里,并且对装修的质量进行把关。他还有一些媒体资源,遇到问题可以马上解决。但报价太贵,他是按平方算的,一个平方60-200不等,我想我宁可把这个钱交给装修公司赚,也能做好一点。当然如果你选了一家大公司,我建议要请个监理,因为你要维权会很困难,但如果是一家小公司还比较熟悉的,那么监理的活就你自己多关注一下就好(我也就是这样,学会了很多东西)

找装修公司的事,终于快接近尾声了。还记得我说过,不要急着付钱么?最好是在做概算的时候,可以精确到每个细节。我就是这么做的,大半夜的还在装修公司和老板过方案。但无论我多精明,后来我还是掉进了很多坑里。

下期讲讲另一个大坑《概算、预算和决算》


装修那点屁事(2)

上次讲了选房篇,作为屌丝,不可能全款支付,那么。。。

2、贷款篇

装修和贷款其实没有啥关联,但他们有个剪不断理还乱的关系,就是钱。

先讲讲几个贷款方式的优劣:

1、全商贷。这个利率很高,当然现在各个银行都在降息吸引贷款。一般我们不会选择这个方式,除非你买到了小产权房。(小产权房就是非正常住宅,单个房子三证不齐,所以你只能用商贷来买。而且年限只有40年,电费以工业用电1元一度计算,购买房子千万不要图便宜,这种房子风险还是很大的。市面上所谓的不限购不限贷的都是小产权房。)当然全商贷有个最大的优势就是贷款速度快,如果你买二手房,房东经常会担心到款时间,所以全商贷的时间是最快的。还有就是不同银行的商贷利率其实各不相同,但你在买房的时候,罪恶的房地产商会绑定某些固定银行,让你无法选择,你一定要先做好功课了解哪家银行利率更低,还款更方便,然后提出要求选择。

2、全公积金。首套房首付最低30%,如果你有幸剩下70%正好都可以用公积金贷款那你就赚到了。当然杭州市区是个人50万,夫妻双方80万,杭州余杭区则个人70万。公积金的优势我就不多说了,只要你的公司给你五险一金交齐,基本上这个方式是赚到的。但小道消息,很多地区的公积金库已经亏空,所以我很多同事买房4-5个月了到现在公积金都没有审批下来,而且遥遥无期。所以如果你买的是期房,交房1-2年以后,那么全公积金是最棒的,因为你可能要到1年左右之后才开始还贷,最划算了。

3、组合贷款。最常见的,既然是组合的,那么以上两种的优势劣势都存在。

还有听说,公积金贷款只能贷两次。公积金还款有两种,按月代扣或者定期提取,当然前者更方便更省钱,等于是你存一笔拿一笔。定期提取的唯一原因就是你所买的房子正好不在你所供的公积金地区管辖范围内。

再多说几句,如果你有公积金账户且有存款,不管你是组合贷款或者纯公积金贷款,你每个月可以提取的钱是你贷款的全款,不分商业或者公积金的部分(假设你组合,3500公积金,500商贷,那么你每个月最多可以取4000而不是3500,是不是感觉又可以爱了?)。当然前提是你寸的钱大于等于你贷的款。

上次也说到,如果你买房时地下车位价格还可以,那么请务必放到贷款中去,百利无一害(除非你的房子未来住的人都是屌丝而且越来越少)

最后补充两点:

  • 如果你的父母有公积金,而且存了一辈子,那么只要你买了房,你就可以用血缘关系去提取出来。可以把这个钱用来孝敬父母,或者自己装修。

  • 装修也可以贷款,我看到工行还有年利率3%多的贷款,看起来还是不错,适合装修预算不够的屌丝们。

插播了贷款篇,回到正轨,你现在开始要找装修公司了。下篇《坑爹的装修公司》。。。


装修那点屁事(1)

多年租房偶然屌丝翻身,去年得房一套,于是最近被装修忙乱了头脑,lofter有段时间未动,脑中也旁无它物,故分享一些装修经历,以表诚意。

一、准备选房篇

买房看风水,装修更看风水。可惜,多年屌丝能有房已经不错,户型什么的其实可选余地不多,地段也实属偏远,有幸公司新园区10分钟车程还算欣慰。选房和买菜一样,但也需要做好准备,可以注意以下几点:

1、离你公司能多近就多近。你要考虑近五年的工作动向,起码买了房压力大一下子也不会离职,所以要考虑好尽可能离公司进,就算公司进了深山老林也别想着闹事繁华,因为你人生5/7的日子不是在上班就是去上班的路上,如果你还不近点,那么基本上你的人生就是死在去上班的路上。

2、配套生活周边要丰富。菜市场、医院、超市、餐馆,特别是小区楼下的外卖店要丰富,千万不要被沙县和兰拉包了,一般年轻人现在都懒得做饭,所以外卖丰富是个很重要的事。早饭最好有甘其食这样的包子店,方便又营养,条件允许或者像我这样未来5年准备要孩子,那么最好附近有学校,幼儿园什么的。不要相信未来配套什么的,在中国你极有可能5-8年就会换房,不是主动换就是被动换,所以最好配套是选现成的(备注一点,如果地下固定停车位可以房贷里买,尽量买,10万以内都不算贵,可惜我当时错失良机,后悔不已)。

3、邻居有朋友或同事。所谓远亲不如近邻,邻里关系处理得好,让你的生活能够过得舒适无比。所以最好和你的同事朋友买在一起,这样起码周末还有个伴。

4、选楼层是随机且必然的事。其中有一些学问,比如一楼容易泛潮,而且不防盗;二楼水管最容易堵住且发臭,如果下水管爆掉,二楼最惨;3-9楼是据说是灰尘层,蚊子空气中的会都比较多;八楼在风水学上和4楼、13楼一样都不宜选,因为“七上八下”(额,这也只是传说);顶楼会比底楼要热,但风也会相对较大,而且要注意水压,特别是二次供水的问题(后面会讲到)。是不是这样看起来好像没有一个楼层可以选的?所以说才是随机且必然的,就看你能怎么取舍了。再说说优点,一般一楼会加送花园或者地下室;如果一楼是商品房,二楼极有可能会送你超大露台(大到吓人!);顶楼会送阁楼或顶层花园。

5、小区最好是人车分离,否则将来停车难的时候,你的车被堵着出不去是常事。

6、选户型靠想象。很多人都说这个户型好,那个户型好,其实户型都差不多,特别是你没有很多选择的时候。关键有几点:

  • 南北要通透,有些小户型是只有东南通透,那么你夏天的时候,又不能像小时候开着门通气,所以就只能开空调度日,而且混沌的空气不利健康。

  • 82-89方是主力,但要考虑每个房间的大小,有时候所谓小三房,简直小的真的只能“小三”来住。

  • 不仅仅看得房率,关键要看送的面积。现在开发商比较聪明,知道高层电梯得房率只有80%甚至有些70%多,所以就会加送阳台或者挑高空间什么。真正屌丝要懂得加减乘除,建筑面积 x 得房率 +赠送面积才是你真正的使用面积。

  • 浪费空间越少越好,特别是室内走廊,像从客厅到卧室的走廊,最好越少越好,像我的房子光是走廊就是10个平方(-_-)

  • 东边套最好,边套的好处是采光更好,刚刚说过南北通透,其实更好的是南北通透的边套。当然不要西边套,否则每天下午,你将会在西晒中死死地度过。

  • 还有一些你自己的个人习惯,就因人而异了。

7、还有一些生活禁忌:

  • 马桶不能对着房间门。

  • 主卧厕所能不要就不要,不然以后味道会串到房间里。

  • 楼上有人的话,一定要楼上做好养水,否则楼上泡水楼下大水

  • 不是顶楼不要把多余的卫生间改成其他用途,特别是餐厅。污秽之说。

  • 卧室镜子不要对着床或门,鬼怪禁忌。

  • 门厅要有玄关,尽量不要一览无遗。


好了来说说我的房型,遵循上述经验,我最初的房型留下几个遗憾和优势:

  • 顶楼,送了70多方的阁楼,但没有楼梯,没有开窗,比较闷热,需要后续处理。

  • 我的走廊很长很长很长。。。。

  • 我是南北通透的大套,房间大小适合,但不是边套,所以要加大采光。

  • 户型上,厨房和餐厅离得太远,需要处理。

于是带着遗憾和优势,我开始踏上更大的不归路。过两天更新《贷款篇》


移动app上的动画们

最早使用PC时,看到mac os上的神奇效果进行最小化时,就被深深地震撼了。若干年后,再也没有离开过mac电脑,有很大程度也是因为它有非常流畅的动画过场。

[上图完整动画请到这里看]

现在移动端的动画们更是层出不穷,我在花瓣上关注了北京淘宝的一个同事,她是收集牛人,在她的采集里你可以看到各种各样的动画效果

当然如果你纯粹为了动画而动画,结果一定很糟糕。所以我在这里列举一下动画的四种应用场景:

1、创造空间:

在移动端寸土寸金的屏幕上,超过一屏的内容、次级内容或者导航的呈现就成了最大的问题。创造空间这个动画过场便是最好解决这个问题的手段。最著名的抽屉式大家应该不会陌生。

[上图完整动画请到这里看]

当然除了传统汉堡式抽屉,还有各种各样创造空间的方式。

[上图完整动画请到这里看]

[上图完整动画请到这里看]

[上图完整动画请到这里看]

[上图完整动画请到这里看]

还有创造新空间的同时,更是在创造新内容,比如大名鼎鼎的clear。

[上图完整动画请到这里看]

这些除了创造更多空间以外,更多是让用户能够更加focus当前屏幕下的内容呈现。并且有时候,通过创造空间的方式来安置导航,也等于是创造了动画品牌,让用户对某个app更有操作记忆和印象。

但这样的折叠等动画在技术实现上还是很大成本,特别是实时的那种。而且之前在iOS端和android端同时开发app时,明显android端的动画实现成本更高,不得不去砍掉很多动画效果。

2、过程引导

在移动设计中我们常提到沉浸式体验,也就是让用户可以沉浸到使用过程中而不被打断。传统的设计都是点击切换,这样恰恰是很容易打断用户的。所以包括加载、流程中以及完成等,都是需要非常亲和的动画过场去引导用户。

比如iOS里mail的加载(当然这个是dribble上的大神Max Rudberg略微加工过的):

[上图完整动画请到这里看]

还有翻页等效果动画,这些在过程动画中应该是最常见的,比如flipborad也是这样的翻页操作。这样的过程引导,可以让人不用去思考过程是怎么样,而是非常符合自然环境中的常识。

[上图完整动画请到这里看]

[上图完整动画请到这里看]还有一些,流畅的过程动画,让整个画面都生动起来。

[上图完整动画请到这里看]

[上图完整动画请到这里看]

除了操作的反馈动画,还有一些是加载内容时进行分布式的动态加载,从而使页面看起来非常顺畅,让人的情绪可以更投入进去。

[上图完整动画请到这里看]
3、力反馈

移动操作不像传统操作,有机械硬件的互动,比如键盘、鼠标按键的力反馈,而主要是手指和硬屏幕直接互动,所以一些动画力反馈能够让用户在操作的过程中更具有“手感”。苹果在这方面是最细腻的,不仅仅是登录界面。

[上图完整动画请到这里看]

[上图完整动画请到这里看]

包括最新的iOS7的开关切换,也非常细腻。

[上图完整动画请到这里看]
4、情感表达

还有一种动画的作用就是情感的表达,生硬的界面会让人感觉冷冰冰,没有任何情感和喜爱。所以增加一些动画过程,可以把情感表达得更加充分。

[上图完整动画请到这里看]

甚至现在有些app在介绍功能的时候已经用上一些小动画来提高感受。

[上图完整动画请到这里看]

最让我震撼的还是iOS上passbook里面优惠券删除的动画,兼职逆天的细腻,第一次看还不明白怎么回事,后来就懂了。

[上图完整动画请到这里看]

好了,移动动画基本的就是这几个方面,当然还有更多丰富的值得大家去挖掘。移动应用和pc或者web不一样的地方,动画一定是很重要的一个部分,如果你想要做好一个吸引人的app,动画绝对不可少。(当然能够多了解实现的方案,对动画引擎更深入地理解,就可以更顺利地作出你心中理想的动画效果)


© 独立设计 | Powered by LOFTER