壹钱包目前的很多功能都是先在移动端实现,再上PC的版本,在平移移动端功能到PC上时,由于PC的页面比较大,并且有hover等移动端没有的交互方式,所以会有一些与移动端不同的处理方式。

先来看看移动端和PC端的区别

你有没有在移动端看到过下拉选框,有没有在PC端看到过滑动解锁,相同的功能在不同的设备上有其自己的展现形式,下面我们罗列一二,简单说明一下。

1. 移动端选择器平移至PC端的处理方式

在移动端,考虑到手指操作的便捷性,选择器一般采用列表方式。

PC端的选择器一般使用下拉菜单或者是选择按钮形式

2. 移动端双行列表平移至PC端的处理方式

如选择服务类型的页面,移动端页面是如下这样,选择服务类型的条目采用双行列表。

但是这个功能到PC端就不能直接照搬移动端的双行列表,PC的空间比较大,这种情况可以采用区块的方式,如下图:

壹钱包的安全中心首页也是采用这种处理方式,移动端的安全中心页面:

PC的安全中心:

 

3. 移动端查看图片功能平移至PC页面的处理方式

移动端页面的售后详情页可以查看商品图片,点击缩略图后,新起一个放大图片的页面:

      

PC上有hover的效果,所以这个功能平移到PC上,可以采用hover预览的方式,如下图:

 

4. 移动端多个条目平移至PC页面的处理

壹钱包的自助解冻功能有一种解冻方式需要上传7种以上的影印件,H5的做法是采用列表形式,分开展示,点击某个影印件的条目就跳转到相应的上传页,如下图:

       

这个功能在PC上就没有必要分各个条目了,可以直接铺开来展示,如下图:

 

5. 移动端页面特殊交互方式平移到PC页面的处理方式

有一些交互操作是移动端上特有的,比方说左滑调出“删除”功能,在PC的页面上是不好实现的

这个功能在PC页面的处理方式通常是直接将“删除”按钮放出来,如下图:

在实际的工作中,还会遇到各种平移移动端功能到PC的其他情况,需要注意以下几个问题:

1. 随着技术的进步,移动端的设备屏幕也越来越大,但是移动端屏幕再大也是大不过PC电脑屏幕的。PC端屏幕大,所以他的视觉范围更广,可设计的地方更多,设计性更强。移动端设备相对来说屏幕较小,操作局限性大,在设计上可用空间显得尤为珍贵,在小小的屏幕上使用粗大的手指操作也需要在设计中避免原件太小及太近。

2.因为PC端设备的使用场景多为在家或者学校公司等一些固定的场景,所以其使用时间偏向于持续化,在一个特定的时间段内持续使用,而移动端设备不受局限,可以吃饭用、坐车用、如厕时用、无聊打发时间用……随时随地想用就用,所以他的使用时间更加灵活,时间更加碎片化,所以在操作上更偏向于短时间内可完成的。

3. PC端的操作方式与移动端有明显的区别,PC使用鼠标操作,滑动、左击、右击、双击,操作相对来说单一,交互效果相对较少,移动端用手指操作点击、滑动、双击、双指放大、双指缩小、五指收缩还有3Dtouch按压力度等,除了手指操作外还可以配合传感器完成摇一摇、陀悬仪感应灯操作方式,操作方式更加的丰富,通过这些丰富的操作可设计不同新颖吸引人的互动设计。