恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
视觉走查——颜色配置
0.0°
2019-05-21 原创文章 经验/观点 举报 2581 10 12 0

平时在PS/sketch上设计页面时觉得色彩明亮艳丽,但是导出或上传至标志平台时画面变得灰暗,这是软件颜色配置的影响。


视觉走查是设计师在页面被开发出来时进行细节检查与汇总,针对没有还原设计稿一致的页面的细节反馈回工程师,并不断循环这一步过程直到问题被修复,从而确保被开发出来的页面与最初的设计稿一致。


工程师与设计师在面对不同的两个颜色时,工程师看的是两个颜色的数据,设计师看的是两个颜色视觉感官的不同,因为PS与sketch软件上不同的颜色配置会出现同色值却不同的视觉感官,因此处理好PS/sketch、iphone实时预览插件、标注平台3者颜色配置,是设计协助开发的细节之一。



场景一:

我们平常在使用“蓝湖”或“pxcook”进行页面标注时,平台与软件默认无色彩管理,因此识别的色值与PS颜色配置“不做色彩管理”、sketch里的色彩描述“RGB-sRGB IEC61966-2.1”是一致的。

Image title


场景二
平常在手机预览一些优秀的文章与作品时,会对优秀的页面进行采集,但iPhone截屏图片色彩格式却是Display P3,等到PS/sketch打开iphone截屏图片时出现“嵌入的配置文件不匹配”,丢弃不匹配的配置文件之后画面显得灰暗。

Image title

Image title

手机视图(左)PS视图(右)



这是因为iOS系统下截屏得到的图片,其色彩配置文件是Display P3,与PS/sketch里的sRGB不同,因此丢弃不匹配的配置文件之后画面显得灰暗。


与是使用了PS进行了以下5种方案测试,sketch同理


方案一 (×)

PS:编辑——颜色设置——RGB-sRGB IEC61966-2.1环境下打开图片


Image title


当颜色设置里的工作工具RGB设置为“显示器RGB-sRGB IEC61966-2.1”时,色彩管理方案RGB会自动“关”闭,这个时候,电脑屏幕上PS显示颜色与iphone实时预览颜色一致。但此时PS打开iphone截屏图片会出现“嵌入的配置文件不匹配”,丢弃不匹配的配置文件之后画面显得灰暗。


Image title

PS视图(左)手机视图(中)PS打开截屏图(右)




方案二 (×)

PS:编辑——颜色设置Adobe RGB(1998)并“保留嵌入的配置文件”环境下打开图片

Image title


当颜色设置里的工作工具RGB设置为“Adobe RGB(1998)”,色彩管理方案RGB旋转“保留嵌入的配置文件”,PS打开iphone系统下截屏的图片不再会出现弹窗,截屏图片在PS上显示颜色正常,但iphone实时预览变得灰暗。


Image title

PS视图(左)手机视图(中)PS打开截屏图(右)




方案三(×)

PS:编辑——颜色设置Adobe RGB(1998)环境下打开图片,再调回颜色设置RGB-sRGB IEC61966-2.1环境下处理图片


图片正常被打开,iphone实时预览显示正常,但由于新建画布颜色设置与截屏图片颜色设置不同,因此将截屏图层复制至新建画布或者进行色彩提取时会被自动转化成“显示器RGB-sRGB IEC61966-2.1”下的颜色设置,色值虽然一样,但是画面明显灰暗。


Image title

保留色彩配置(左)不做色彩管理(右)


Image title

不同颜色配置下的同色值颜色




方案四(×)

编辑——颜色设置Adobe RGB(1998)环境下打开图片,再调回颜色设置RGB-sRGB IEC61966-2.1环境里在截屏文件下处理图片

图片正常被打开,iphone实时预览显示正常,在截屏文件上进行设计,可正常吸取颜色。
上传至“蓝湖”或“pxcook”进行页面标注,平台标注会自动丢弃不匹配的颜色配置文件,转化成“显示器RGB-sRGB IEC61966-2.1”下的颜色设置,标注平台上的页面数值显示灰暗。


Image title

PS视图(左)手机视图(中)标注平台视图(右)


Image title


方案五(√)
编辑——颜色设置Adobe RGB(1998)环境下打开图片,再调回颜色设置RGB-sRGB IEC61966-2.1,使用电脑截屏对手机截屏文件进行截屏,粘贴至不做色彩管理的新建画布,色值虽然进行了改变,但经过电脑截屏的页面色彩与手机截屏色彩一致,可正常吸取颜色。上传至“蓝湖”或“pxcook”进行页面标注,标注平台上的色彩数值与页面效果一致。


Image title

PS视图(左)标注平台视图(右)



Image title



补充

由于sketch处理方式同理,于是不一一截图解释。


sketch色彩设置修改路径如下:

sketch——偏好设置——sRGB IEC61966-2.1
文件——修改颜色描述文件——sRGB IEC61966-2.1


tip:sketch可以执行操作“查找/替换颜色”对所有同数值颜色进行处理。









原文链接:https://mp.weixin.qq.com/s/uvSDSdL7L1KqQZOJwB4jDA

更新:2019-05-21

收藏

10人已收藏

Howieart

追波:https://dribbble.com/Howieair

  • 16

    作品

  • 559

    粉丝

  • 43

    关注

  • 2019作品集
  • 实名认证的6种方式
  • 项目小结-dribbble 01
  • 发现好设计│产品体验总结(一)
相关标签
经验uips

    猜你喜欢

      2019-05-21 原创文章 经验/观点 举报 2581 10 12 0

      视觉走查——颜色配置

      0.0°

      你确定要举报视觉走查——颜色配置

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2019年04月24日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      12
      10
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录