zoukankan      html  css  js  c++  java
  • 淘宝设计师分享的他们的工作流程

    解释一下就是:

    第一步,视觉设计阶段,设计师按宽度750px(iPhone 6)做设计稿,除图片外所有设计元素用矢量路径来做。设计定稿后在750px的设计稿上做标注,输出标注图。同时等比放大1.5倍生成宽度1125px的设计稿,在1125px的稿子里切图。

    第二步,输出两个交付物给开发工程师:一个是程序用到的@3x切图资源,另一个是宽度750px的设计标注图。

    第三步,开发工程师拿到750px标注图和@3x切图资源,完成iPhone 6(375pt)的界面开发。此阶段不能用固定宽度的方式开发界面,得用自动布局(auto layout),方便后续适配到其它尺寸。

    第四步,适配调试阶段,基于iPhone 6的界面效果,分别向上向下调试iPhone 6 plus(414pt)和iPhone 5S及以下(320pt)的界面效果。由此完成大中小三屏适配。

    注意第三步,就要使用我们以上介绍的网易跟淘宝的适配方法了。假如公司设计稿不是基于750的怎么办,其实很简单,按上图做一些相应替换即可,但是流程和方法还是一样的。解释一下为什么要在@3x的图里切,这是因为现在市面上也有不少像魅蓝note这种超高清屏幕,devicePixelRatio已经达到3了,这个切图保证在所有设备都清晰显示。

  • 相关阅读:
    html基础知识点
    uni-app之tabBar的自己配置
    uni-app之导航配置pages.json
    js获取链接?后边的参数名称或者值
    验证码输入自动聚焦下一个input或者删除自动聚焦上一个input
    VUE中/deep/深度作用域
    vue环境下新建项目
    vue中展示数据
    VUE环境项目搭建以及简单的运行例子
    ios设置音乐audio自动播放
  • 原文地址:https://www.cnblogs.com/feixiablog/p/9133678.html
Copyright © 2011-2022 走看看