随着移动互联网的普及,移动端上网的人数也超过了PC端。产品的设计也越来越倾向于PC端和移动端统筹起来考虑,出现了不少纯移动端的产品。
近年来关于移动端和PC端融合的设计技术和理念也不断的涌现,HTML 5、响应式设计、移动先行的理念等等。一定程度上缓解也解决了移动端和PC端重复开发的问题。但是,因为PC端和移动端在设备形态和使用上的差异,如何根据两者的差异,合理规划产品设计的差异还是有很多值得关注的点。
页面结构的差异
显示屏幕的大小是PC端和移动端最直接的呈现了。
PC端有超大的屏幕,页面结构可以设计得相对比较复杂,而不会影响用户的使用。PC端的产品设计往往关注于单个页面的横向信息量和不同页面层次间的纵向信息量。
首先,PC端在页面横向信息量上比较大。
设计PC端产品页面时,除了考虑本身页面信息,还要考虑很多“其他”的信息。如相关阅读、广告推荐等等。
这是因为人在浏览页面内容的时候,会自动的“过滤”掉不相关的信息。我们可以闭上眼睛想一下我们浏览新闻页面时多少时候能注意到页面边上的小广告。
其次,PC端纵向页面层次信息比较深。
PC端页面比较大,所以设计的时候可以利用面包屑导航、快捷按钮等来保证你在网站浏览时不会迷路。
例如我们在浏览门户网站时,用户从阅读时政新闻一步步被引导到阅读周边新闻是经常的事情,你可以随时在顶部菜单栏回到你关注的时政新闻页面。
第三,PC端可以在新标签打开。
在PC端浏览器上,多页面浏览是一件轻而易举能实现的事情。通过打开多个页面打开能保证用户关闭标签后可以接着浏览从而保证操作的连续性。
移动端在承载丰富内容上面有天然的不足的。所以在移动端设计的时候往往会更简洁。
首先,让页面呈现方式更“简单、明了、直接”。
移动端页面就那么一亩三分地,放了这个放不了那个,这个也是习惯了PC端产品的人设计移动端产品是手足无措的原因。
移动端遵循少即是多原则,剔除不必要的元素,减少非关键信息对用户的干扰。怎么用最简洁的方式把产品想呈现的信息呈现出来是产品设计过程中需要考虑的。
其次,页面层级不要太深。
在移动端,执行多次返回操作回到原点是很烦躁的事情(在PC端也同理,试想一下,你在PC网站上,有没有操作过三四次返回到一个页面?)。
移动端产品设计,应该充分利用导航栏来找到入口。同时要尽量缩短产品单次任务的层级。遇到页面层级较多的任务时(比如下单流程),需要考虑在过程或结束页面增加返回到起点的操作(比如下单过程提示购物车结账,下单完成引导用户继续购物)。
操作方式不同
PC端用的是鼠标和键盘,移动端用的多为手指。
鼠标的移动可以精确到像素级别,手指移动精确度要差得多。如果非要在移动端做精确移动的操作,可以考虑转化成按钮,利用“上、下、左、右、放大、缩小”按钮来进行精确移动操作。
在移动端输入文本绝对是一个噩梦,无论是用粗大的手指在狭小的键盘点击,还是光标的重定位。如何减少用户在使用过程中的输入是需要考虑的。如,输入联想、输入按钮化(将历史输入、热门输入设计成按钮)、辅助输入(比如增加下拉、增加按钮等)。
是否在移动端进行长文本输入的任务也是需要慎重考虑的。
在移动端有着独特的输入方式滑动、多点触控、摇一摇等,善用这些操作方式将会带来极大的便捷。
应用场景不同
应用场景的不同是很多初做产品的人容易忽略的。
PC端的应用场景往往是在固定的场景、相对长的一段时间进行的。如办公室、家里、网吧等等,多数情况下用户使用PC端产品往往有着一段相对长的时间。而移动端不同,移动端应用场景是碎片化的,办公司、家里、车上、厕所都是移动端使用的场景。
如何让产品更轻、更扁平,从而占据用户碎片化片的时间。豆瓣电影移动端弱化了社区功能,突出电影导看和购票,用户直接查看热门电影、查找附近影院、完成购票。马蜂窝则把内容进行了拆分,形成了马蜂窝旅游攻略(内容)、旅游翻译官(工具)等产品。
纵观市面热门PC端和移动端产品,并无通用原则。综合移动端和PC端的差异,根据应用场景和产品策略,关注产品细节才能设计出好的产品。