PC与移动设计
随着各大互联网公司都转战移动市场,移动端产品的需求越来越大,设计师在PC与移动设计之间的相互转移也越来越频繁。当前许多产品的规划都是在PC 端和移动端全方位地进行布局,这也进一步要求设计师应该有更高的素养,能在PC与移动端进行一体化的设计思考。
然而,设备、产品形态的多样性虽然给了设计师更多的发挥空间,同时也给他们带来了更大地挑战。PC与移动产品有各自的使用情景,它们的设计有何不同,如何统一思考和规划在不同平台上产品的功能、设计是非常值得探讨的话题。
一、PC与移动设计上的差异性
首先,我们来分析一下PC与移动在设计上的差异点。PC与移动有各自的特点,这些设备特点、系统平台、交互方式、使用情境等的不同,也极大的影响了设计上得差异。
1. PC与移动的使用情境不一致
PC用户的使用情景都是以坐在电脑前为主,用户与所处环境的互动较小,主要依靠用户操作过程中的情境上下文来进行设计。在移动应用的情景则非常复杂,包括情景特征、用户的姿态、网络特征、使用时间等等,这都对设计产生了较大的影响。
移动应用设计中,除了上下文情境外,还需要从用户使用App的物理情境、时间情境及社会情境三个方面来分析,提供更个性化及人性化的服务。
2. PC与移动的物理和交互特征不一致
PC和移动端在物理和交互特性上有很大的不同。PC的显示屏幕也越来越大,可一次呈现足够数量的信息,可以很方便地进行多窗口操作;手机屏幕也变得越来越大,但总得来说展示的信息有限,一屏只能处理一件事情。
在移动端有许多有趣的传感器技术来增强手机的能力,并能成为设计师的利器,而这在PC端还比较少见。
在PC的条件下,用户可以使用键盘舒服的输入信息,用鼠标来精确的指向被操作的对象,鼠标的直接操作配合键盘的快捷方式,已经形成了一个固定的整合交互模式;在移动端是基于手势为基础的设计,手势的输入更自然,但是精度不高,在小屏幕中,通过手势进行编辑等操作存在较大的难度。
另外,手机的电池情况、手机的流量和网络状态至今都还是比较大的限制,而在PC端都不存在相应的问题。
3. PC与移动应用框架设计不同
信息架构是PC与移动端在设计时需要考虑的首要问题,信息架构的深度与广度的权衡,在PC端的思考方式也与手机端并不一致。手机的设计受屏幕大小的限制,在手机上呈现的信息有限,更要以内容为先,导航信息的呈现空间不能过大。而在PC端的设计一般都会将导航结构清晰展示,让用户能快速地了解站点的内容分布,只是把用户关注的内容在屏幕中做突显展示,使用户注意力能更专注于内容。
4. 移动端的适配比PC端要重要得多
在Web设计中,最近这两年才有设计师提出响应式设计的概念来适配多个屏幕的设计,而它的目的是想要通过一套设计来涵盖手机、平板与PC的屏幕,提供一套统一的体验。而这与手机应用的适配还存在着较大的不同,手机应用的适配只是根据手机多样化的屏幕,对手机的屏幕宽度与高度进行满屏适配的方案,适配会对应用中的图片、文字排列、内容数量等进行适配。
5. 移动端运用更多的优雅动效
在几乎每个移动应用上,都能看到动效的身影。动效能引导用户该如何操作,提示内容的逻辑层次关系,让用户能更好地理解应用并能知道它的状态,引诱用户的点击,并能传达品牌特征让用户更好地记住它。而在Web端发展的某个阶段上也有很多动效地使用,只是动效过渡地使用干扰了用户的正常注意,大大降低了网站的可用性,导致现在网站反而很少使用动效。现在随着H5技术的成熟及越来越多浏览器性能的提升,在Web端的动效也会渐渐地流行起来。
许多业务都有PC产品,又做移动产品,但是由于各种原因,PC产品与移动产品的规划并不都是一起开始的,那在这种状况下,当前市面上的都是怎么来进行产品设计的呢?
二、PC产品在先的一体化设计思路
许多主流的业务都是从PC端发展起来的,然后由于智能手机的普及而自然而然地在移动端发力,这些产品的根基在PC侧,然后向移动端迁移。这类业务的特点是在PC端已经发展地很完善,积累了大量的用户,在PC业务相对成熟的情况下再来发展移动端的产品。
现在的普遍做法是把PC的核心功能迁移到移动端,其主要工作是已有功能的移动化设计。由于PC产品已经是一个庞大的体系,要把PC产品都移动化是一个非常艰巨的任务。因此,在移动端开发这类应用往往比较痛苦,PC的成功因素笼罩着整个移动端的发展方向,使移动端的产品也很难达到超期望的目标。
另外,移动业务在快速发展的同时,PC业务并没有闲着,PC的新功能也在持续地迭代。这会造成手机业务会持续地去追PC的新功能,并争取做到两者的同步,许多这类业务的移动业务团队现在就有点陷入到这样的怪圈。
然而PC与移动产品的不同,不只是形式和屏幕大小的不同:用户在移动端的使用习惯,移动端的生态环境,产品使用情境等都很不相同。那这类产品在移动端产品设计时,要遵循一些关键原则为:
- 在产品规划阶段要有独立的、基于移动的视角来架构业务;
- 支持PC的核心业务,但要发挥移动的特色和特点;在移动情境下,发展PC的功能,作为PC的补充及扩展;在移动情境下,发挥移动端便捷、随时随地、多通道感受的特点,发展新功能更新PC已有的功能;
- 不求与PC一样复杂的功能,但要有自己的特色与目标;不盲目的追PC的功能;
- 新功能的设计,争取移动优先的原则,做统一的产品设计;
- 基本架构以Native为主,运营内容以WAP的形式整合,提升灵活性;
- 运营的内容可以各自独立,但是“我的”内容要能同步。PC的内容更追求高质量、多样化的内容来吸引用户,移动的内容要更情境化,基于用户情境提供个性化内容。
三、移动优先的一体化设计思路
当前移动互联网用户已经超过PC,移动端的用户覆盖面更广;用户在移动端的浏览的频次及使用时长的增量都超过了PC,也都促使我们的新业务将更多地从移动优先的角度来思考。
从 PC 端到移动端的整体设计,响应式设计是提得最多的方法,这看起来也是一个很好的解决方案。然而我们看到的响应式做得好的网站往往是结构相对简单的博客类、新闻类网站,这些页面结构简单,响应规则容易定制,前端实现也不复杂。而对于复杂的网页的响应式设计,则都会遇到不少挑战。但是总的来说,由于现在的H5和移动浏览器性能在使用上和原生应用还存在着一定的差异,较难发挥出移动的核心优势,因此,现在纯响应式的设计方案少有在PC和移动一体化项目中实践。
在移动优先的设计原则下,一般都是把PC端的内容作为整个业务的补充,放在次要的地位。
那在设计中该如何来考虑PC与移动的一体化设计呢?
- 所有的功能及需求从移动端出发来设计。把满足用户核心需求的功能的突显出来。
- 尽量做到在手机中能完成所有的任务。让没有PC或者不用PC的用户能满足需求,完成绝大多数任务。
- 在手机与PC之间能快速地切换及衔接任务。当用户在使用手机或者PC时,能快速地切换到另一个设备上,并能无缝衔接为完成的任务。
- 在产品中,PC与手机要发挥各自的特色,便利用户的操作和使用。例如,能让用户在PC上进行集中的编辑操作,而让用户能在移动端基于情境提供个性化的服务。
- PC上的功能要有自己的亮点及便捷性。PC在设计上要有新意,不拖累产品的整体体验,且能说明其功能和作用的必要性,在使用上能便捷,体验简单。
- 手机与PC在品牌识别性上有传承和一致性。两者在品牌上有传承,让用户能感知其一致性。
移动的产品与PC有很大的不同,移动情境的灵活性、移动设备的能力与限制、移动网络及生态、移动的系统及APP形态等等都有自己的特点,从移动的角度来思考产品,才能充分基于情境去发挥移动产品的优势,突破其固有的限制。最后,随着穿戴式设备的普及,一体化设计的思考会越来越多。穿戴传感器来采集数据;移动端移动端的应用作为监控、信息浏览、基本设置等功能性入口;云端存储数据,提供复杂的管理界面。这都需要我们能有更系统化的来设计产品,形成一体化的统一体验。