从 PC 到移动的设计差异

标签: pc 移动 设计 | 发表时间:2013-06-19 05:32 | 作者:企业App研究
分享到:
出处:http://tech2ipo.com/feed


随着移动互联网时代的到来,移动端的产品越来越受到重视。在规划产品时,往往会把 PC 端和移动端的产品放在同等重要的地位进行思考。响应式设计在近一段时间显得火热异常,也说明了大家越来越重视用户在各个设备终端层面的体验。然而,设备的多样性、产品形态的多样性都给了设计师更多的发挥空间,同时也给设计师带来了更大地挑战。PC、PAD、Phone 甚至 TV 及 WAP、Client 的组合形成了多样的产品,这些产品在设计之间有何不同,如何规划不同平台上产品的功能、设计时有哪些差异都是非常值得探讨的话题。


图为 LinkedIn 的 Web、iPhone 和 iPad 版

一、如何来规划不同产品上的功能

在 PC 端有超大的屏幕,有鼠标和键盘灵活的交互形式,其功能往往比较复杂,用户能通过鼠标指点的形式快速地完成各种任务。然而在 PAD 与手机端,屏幕能呈现的信息有限,交互形式也是精度相对较差的手势形式,所有的这些都决定了在移动端的功能应该做减法。

对于新产品来说,移动优先或者是移动同等重要的产品规划方式是及其重要的,独立思考在移动端能呈现的功能和内容,让设计师更清晰地看到产品的核心功能、内容,有利于设计师把握产品的方向。甚至可以考虑将移动端优先于 PC 端,PC 的功能在移动的功能基础上去架构,它也不会脱离产品的核心价值。

PC 固有的特点在进行复杂功能操作时会更有优势。那是不是复杂功能就直接转移到 PC 上,而在手机上只展现简单功能呢?我觉得未必,要看产品的目标用户和产品特点,有些产品用户只更倾向于移动端使用,甚至还有些使用本产品的用户都没有 PC。因此,在考虑用户特性的基础上,优先规划移动端的产品信息架构。如果有些功能觉得转移到 PC 上衡量过没有问题,那我觉得可以进行转移,在移动端突出最核心的功能给用户,并保持界面简洁。

对于老产品,像淘宝网这样的产品,其 PC 端本身及其复杂。那在产品设计时,更多地思考在移动端用户的使用情景和核心功能,先去满足最核心的功能,满足有手机特色和移动情景的功能。

二、设计上的差异在哪儿

当前的设计手法在各个平台、各种形态上都有融合的趋势,在 Web 端的设计也越来越客户端化,许多 Web App 都让人很难判断到底是 HTML5 做的还是 Native 的。因此,在设计手法上的差异会越来越小。

然而,基于 PC、PAD、Phone 的设备特性有较大的差异,PC 的指点操作与 PAD、Phone 的触摸操作有很大的不同,触摸优先的设计原则对移动端的设计有较大的帮助。其次,用户的设备的性能和网络特征千差万别,在设计时需要去思考各自用户使用的环境。再次,多设备用户,在使用产品时,如何进行设备间的切换,如何衔接不同设备的操作而不被丢弃都是设计师需要考虑的问题。

对于 WAP 与 Native 的设计,主要关注浏览器的支持特性及 Native 上能发挥的手机、各类传感器的特性,这需要设计师拓宽思路去思考,好的设计能极大地提升体验。

三、设计上的策略有哪些

从 PC 端到移动端的 Web 设计时,响应式设计是提得最多的方法。且在许多公司都有很多实践。在淘宝,梓佑之前也一直在推动响应式的设计,在一淘网、淘宝搜索等许多产品上都有实践,总得来说对用户体验起到了积极的作用。然而我们看到的响应式做得好的网站往往是结构相对简单的博客类、新闻类网站,这些页面结构简单,响应规则容易定制,前端实现也不复杂。而对于复杂的网页的响应式设计,则都会遇到不少挑战,淘宝资深设计师,乐乘,在做玩客项目时,总结了一套设计方案,值得参考。但是总的来说,复杂页面是不是要使用响应式还值得探讨。

对于 PC 与移动客户端 (App) 的设计有何差异?成功移动客户端产品往往是基于用户任务与使用情景进行设计,发挥了手机的特性,使原本 PC 的功能得到更好地弥补与提升。如大众点评中的 LBS 使用户能快速地发现附近的店铺;微博能快速地上传即时拍摄的照片,能随时随地的查询等。

那 WAP 与客户端的上有什么侧重呢?从使用情景上来讲,这两者是一致的。主要的侧重有两点,其一是两者的流量原来往往不一致,根据流量来源来区分用户的特征,基于用户特征的不同来使两者在产品上的不同。其二是 WAP 上一些限制和优势,WAP 上有许多功能还无法实现,另外 WAP 有快速迭代的优势,也可以进行一些项目的试错等。当然,当前 WAP 与客户端也在融合,这也是一个方向,随着 HTML5 等技术的成熟,两者的融合是迟早的事情。

最后,移动互联网的时代已经来临,移动用户的体量也会越来越超越 PC,在进行产品设计时,思考移动平台是必然的,如何能进行更好地全平台设计,还有待业内人士更多地探讨。记得几年前,我非常信奉移动端的产品应该是 PC 的补充,现在看来完全不靠谱。像微信这样的产品,PC 端的设计纯粹是移动端的补充,更多产品则根本没有 PC 端的产品。因此,如何能进行全平台的设计,也需要根据各自的产品特征、用户特征、情景特征来决定,最大地发挥产品的核心价值给目标用户,这就成功了!

作者: 傅小贞,资深交互设计师,企业 App 研究特约撰稿人。工程心理学硕士,从业10年 。曾先后任职于中国移动研究院,UT-Starcom 等知名企业,担任淘宝无线设计团队负责人 2 年有余。对移动互联网的设计有着丰富的经验和独到的见解。

本文由微信公众账号“ 企业App研究”推荐。

编辑: 逍遥小妖



相关 [pc 移动 设计] 推荐:

从 PC 到移动的设计差异

- - TECH2IPO创见
随着移动互联网时代的到来,移动端的产品越来越受到重视. 在规划产品时,往往会把 PC 端和移动端的产品放在同等重要的地位进行思考. 响应式设计在近一段时间显得火热异常,也说明了大家越来越重视用户在各个设备终端层面的体验. 然而,设备的多样性、产品形态的多样性都给了设计师更多的发挥空间,同时也给设计师带来了更大地挑战.

PC 端和移动端产品设计的最大不同是什么?

- - 商业不靠谱
Evernote印象笔记CEO谈PC 端和移动端的产品设计的最大不同,非常有道理,推荐阅读. (Evernote 创立于 2007 年、位于硅谷的全球最大云笔记公司,旗下各项应用的用户总数已突破 1 亿,并融资 2.5 亿美元. 问:移动互联网的蓬勃发展,给你和公司带来的挑战和机遇是什么. Phil Libin:我认为,PC 端和移动端的产品设计有非常大的不同.

PC、iOS、Android通用的交互设计

- - 互联网的那点事
本文作者 @一大坨黄 供职 @微博UDC设计中心. 近年来,在技术方式,网页自适应的兴起、微软Win8系统的发布,都在试图解决一个问题:让同一产品能在平板、PC等多平台下同时使用. 由此可见,替换掉冗余的多版本开发模式,发展通用性,是未来产品发展的一种趋势. 因此,设计师也要在不同的平台规范和习惯中寻找共同点.

IBM PC诞生三十周年,设计师认为PC时代行将结束

- han - Solidot
三十年前的今天,IBM推出了第一台运行微软MS-DOS系统的IBM PC;三十年后,微软和IBM对于PC未来的看法相距甚远. IBM CTO、第一台IBM PC的工程师Mark Dean认为,个人电脑正走在真空管,打字机,唱片,CRT和白炽灯泡走过的相同道路上. IBM在2005年将个人电脑部门出售给了联想公司.

苹果超过惠普成全球第一大移动PC商

- Nanqi - cnBeta.COM
DisplaySearch最近发布《季度移动PC出货和预期报告》显示,苹果2011年二季度出货1350万台移动PC,超过惠普居第一. 报告显示,苹果移动PC出货中80%是iPad,它达到了1070万台,同比增长107%. 苹果总的移动PC出货(笔记本和平板PC)比惠普多390万台,惠普为970万台.

移动免费视频电话应用Tango登陆PC

- Yi - 36氪
移动视频电话应用Tango今天正式发布了Windows PC版(支持XP、Vista和Windows 7),Mac版则会在今年晚些时候发布. 一年前Tango刚发布了iOS和Android版. Tango PC版很容易使用,无需登录或密码,只需输入电话号码和邮箱地址即可开始. 对于已有用户,其PC应用会自动弹出Tango先前在手机上建立的地址簿.

经济学人:移动电子产品正超越PC

- kong - cnBeta.COM
10月8日出版的英国《经济学人》杂志特刊发表封面文章称,移动电子产品正在超越传统的PC,并将对整个社会产生深远的影响.

不管移动端还是PC 网页都将超越App

- - 派代网 - 资讯
      据国外媒体报道,风投公司Andreessen Horowitz的联合创始人马克·安德森(Marc Andreessen)表示,他依然看好桌面端的发展前景.       打个比方,如果我们这代人从小就生活在只有平板电脑和智能手机的世界里. 突然有一天,有人开始使用一种有着27英寸显示屏的笔记本电脑.

PC远程调试移动设备 - Barret Lee

- - 博客园_首页
我们在移动端进行前端开发时,会遇到一个让人头痛但不得不面对的问题——调试. 在 PC 机器上,我们有功能强大的 Chrome DevTools、Firebug,即便是老版本的 IE ,我们也可以安装微软提供的插件,对网页样式和请求信息轻松进行调试. 但在手机、平板上,很多人就无招可施了,一个劲的 alert 查看调试信息.

PC、iOS、Android等多平台通用性交互设计思考

- - 微博UDC
作为一名普通用户,吐个槽先~. 虽然不是5岁的美国小萝莉,不过我还是受够了各种操作平台的分类,以及浏览一个网站或者使用一款产品要学多个版本的行为. 各种PC版、iPhone版、iPad版(所谓的HD)、Android版… 我想说,版你妹呀…. 针对多平台这一问题,很多网站的解决方法,是为不同的设备提供不同的网页,比如专门提供一个Mobile版本,或者iPhone 、iPad版本.