您的位置:首页> 日志> 视觉设计 正文
DTOP

移动网站设计零距离

红狼哥 | 2014年11月03日 |

>>收藏本文 已有 0条评论

  很久没出来溜达啦,看到同志们之前写的各种WEB调试工具非常高端,都是属于前端类的,今天和大家分享一个设计类的应用工具PS play,PS play UI方面完全借鉴了 Adobe Edge Inspect,当然,这个工具是非常实用的,只要是在同一WIFI网络下,就可以使用了。
  首先,下载工具http://isux.tencent.com/app/psplay,仅需在手机、平板上安装就可以使用了,目前安卓版仅出了公测版,只能添加一个IP,而拥有能召唤神龙的土豪三件套来说就简单啦,可以添加多个IP,使用起来毫无压力。


打开页面就这样的啦

 


点击开始后,是一个这样的提示页,需要手动添加一个远程IP

 


在PS菜单中[编辑>远程连接]下开启连接,仅支持CS5以上版本

 


勾选启用远程连接,并设置一个名称及密码,同时记下当前IP

 


然后在手机中输入IP及密码,点击确定后即可连接成功了

 


好啦,现在可以打开PS的效果图,然后手机或平板就可以直接预览效果了

  那么问题来了,如何设计效果图啦,首先,要知道手机显示分辨率,目前的主流手机分辨率宽度都是360px,要设计出符合要求的效果图,就要设计成2倍大的效果图,这个是非常重要的


手机效果图尺寸

 


平板效果图尺寸

 

当设计成2倍大的效果图,问题又来了,主要是些设计标准的问题,这些问题就容易多啦——所以的元素都做成2倍,这样问题即轻松化解,好吧,直接看DEMO……




在设计图的时候我也同样发现设计2倍大图时的问题,视觉上有些影响,非常好办,在做图的时候,直接把页面缩放到50%,这样就完美啦

写到这里,已经非常熟悉工具的使用啦,利用这个工具,我们可以毫无顾虑、轻松的设计出在移动端非常漂亮的效果图啦,最后,附上工作时的实战图

so nice, so good, so easy!