pbootcms网站模板|日韩1区2区|织梦模板||网站源码|日韩1区2区|jquery建站特效-html5模板网

如何改進工作流讓設計稿支持多個尺寸?

   最新的 Photoshop 是有跟 Sketch 一樣的輸出切圖功能的(Generator),用 2x 的 PSD 輸出 3x 的切圖也可以。而且 Photoshop 配合 Slicy 輸出切圖比 Sketch 3 快捷很多。

  Sketch 相當棒,但目前(v3.1)還是有不少小問題,加上對中文支持不夠好,在界面設計中還不能完全取代 Photoshop。

  關于題目的問題,首先一份設計稿就不能適用于 iOS 各手機屏幕尺寸。以下是 Bjango 把目前各 iOS 手機屏幕還原為 1x 的對比圖,可見在設計稿中四種屏幕尺寸寬高都不一樣,不是簡單地把 iPhone 5 界面縮放一下就變成 iPhone 6 的設計稿了。

如何改進工作流讓設計稿支持多個尺寸? 三聯(lián)

  如何支持多個尺寸屏幕,這個要分情況討論。

  對于常規(guī)界面我們可以偷個懶,只做 iPhone 5 屏幕尺寸的設計稿,請開發(fā)在其它屏幕上自適應,最終檢查實機效果沒問題就行。

  蘋果官網(wǎng)上屏幕對比頁面里用到的都是常規(guī)界面:

iPhone 6來了!如何改進工作流讓設計稿支持多個尺寸?

  對于一些定制的界面我們應該根據(jù)不同屏幕重新適配,比如下面是個簡單的 profile 頁面示例,自動適配到大屏幕的效果挺糟糕的。

iPhone 6來了!如何改進工作流讓設計稿支持多個尺寸?

  此時設計師應該手動為大屏幕重新調整設計,像下圖一樣。

iPhone 6來了!如何改進工作流讓設計稿支持多個尺寸?

  在上圖中可看出 iPhone 6 Plus 界面中部分切圖尺寸比 3x 更大,要單獨切圖,所以不是說簡單地給 iPhone 6 Plus 統(tǒng)一切 3x 圖就 OK 的了。這時矢量切圖在開發(fā)中優(yōu)勢很明顯,只要把大屏幕中切圖的尺寸告訴開發(fā)即可,無需針對非 3x 元素額外輸出切圖。

  * 手機屏幕畢竟還是像素位圖,像細線圖標即使是矢量的在縮放后仍可能會出現(xiàn)虛化模糊的現(xiàn)象(類似 HTML 里的 icon font),理論上并非所有情況都適合用矢量切圖。但是,iPhone 6 Plus 屏幕本身又是 downscale 的,導致原本 pixel perfect 的切圖也會在縮放后發(fā)虛,完全沒有 pixel perfect 而言,究竟是不是 iPhone 6 Plus 屏幕已經(jīng)優(yōu)化的看不出像素點了,要等看到實機才能確定。

  切圖方面用 Sketch 的話可以盡量試試 PDF 矢量切圖(但要在實機上確認效果)。Photoshop 就只能輸出位圖了,上面提到定制界面里的一些切圖得單獨輸出,其他常規(guī)的用 2x 的 PSD 輸出 1-3x 切圖即可。

  另外,AI 不適合做界面設計。勇于嘗試 Sketch 是好的,但若 Sketch 各種毛病忍不了的話建議還是用 Photoshop 好些。

  另外強烈推薦@Akane_Lee 老師一篇iPhone 6 及 Plus制圖建議的好文!

  @Akane_Lee :iPhone 6 和 Plus 新機一發(fā)表,群里就有人跑來哀嚎說老板叫他準備 iPhone6 的適配,可現(xiàn)在什么文檔都沒有完整啊!在很多細節(jié)不明的情況下,我只能建議這種最保險安全的作法:做 @1x,放大給 @2x 和 @3x 用。以下情境預設為做一套 Mockup 要切出各種尺寸的圖。

  做小放大

  之前做 @2x 的時候很多設計師在爭執(zhí)做大縮小、還是做小放大的問題。原本在 @2x 的情況下只要保持數(shù)值都是雙數(shù)就可以了,但現(xiàn)在 @3x 出現(xiàn),要保持所有的數(shù)值都要能是 3 的倍數(shù)…乖乖地做小放大最安全。當然也可以大縮小,但幾乎每一個組件都有4個數(shù)值:X、Y、Width、Height,還有字級。要保證這些數(shù)值都是3的倍數(shù),我真的覺得做 @1x 比較快。

  做小放大好處多喔!

  不用擔心小圖放大細節(jié)會糊掉。

  圖文件尺寸小,效能吃得少,計算機跑得順。

  標示尺寸 1:1 ,方便快速。

  完全不用煩惱數(shù)學問題除不盡算錯怎么辦。

  參考數(shù)據(jù):iPhone 6 Screens Demystified

  翻譯版見微博:http://weibo.com

  標示尺寸

  你知道 RD 刻界面都是用 @1x 的數(shù)值嗎?即使設計師給的標示尺寸是 @2x ,RD 還是得除以 2 才能動工。現(xiàn)在有 @3x 的尺寸。設計師普遍數(shù)學不好,你確定自己做大縮小設計出來所有的切圖和標示尺寸都能被 3 整除嗎?萬一算錯被 RD 退件來回修改的時間是誰要吞下去?

  明知自己算數(shù)學有危險就不要拿自己弱項硬上了吧…

  補充:真的、數(shù)學不好不要硬上…(遮臉)

  向量

  向量的好處就是不管怎么放大縮小都能保持圖檔銳利,真需要像素圖也有智能型對象這樣的功能,做小放大絕對能保持頁面銳利。除非你做圖習慣不好到必需用更破爛的數(shù)學去補救,不然做小放大會遇到的意外遠遠少于做大縮小。

  先求能做到正確無誤,再來考慮創(chuàng)意美觀。

  就像寫考卷一樣,字再怎么漂亮答案填錯還不是 0 分?團隊合作不是寫考卷,自己出包耍笨就算了,設計師背后還有 RD 要接手啊…

  兵來將擋

  某:「中午 RD 過來:iPhone 6 的適配你怎么看?」

  我:「沒問題,大家把官方出的 HIG 研讀下,我們來好好討論?!?/p>

  (關掉還沒放出完整文件的官網(wǎng)網(wǎng)頁,結束這個回合。)

  某:「他剛剛又跑來跟我說審核要兼容 6 的尺寸。」

  我:「說自己對 iOS 8 非常不熟,請他們提供完整 Guideline 避免再被退。然后 每4小時就去戳他一次 請問有Guideline了嗎?我在等著改版耶!」

  (官方文件還在 Updated:2014-09-08 ,發(fā)表會前的事。)

  某:「策劃又過來問了,天真的想用 pad 的尺寸來壓縮直接用到手機…」

  我:「跟他說,如果規(guī)范出來不能這樣搞,時程和人力成本的浪費是你自己要吞下去喔~~~」

  某:「早上老板念叨了一句,6 的適配要考慮說了…」

  某:「老大,你樣機什么時候給我我什么時候弄?!?/p>

  (GOOD JOB!)

  以上是群里對話…愿賈伯斯在天之靈能保佑所有 UI 設計師(還有我的數(shù)學)。

  Photoshop 支持用矢量(而且應該只用矢量)元素設計界面,只是無法輸出矢量資源(可以通過腳本用 AI 輸出 SVG,但相對不那么方便)。

  iPhone 6 剛出,就有精彩好文呦!

【網(wǎng)站聲明】本站除付費源碼經(jīng)過測試外,其他素材未做測試,不保證完整性,網(wǎng)站上部分源碼僅限學習交流,請勿用于商業(yè)用途。如損害你的權益請聯(lián)系客服QQ:2655101040 給予處理,謝謝支持。
主站蜘蛛池模板: 高低温万能试验机-复合材料万能试验机-馥勒仪器 | 营养师网,营养师考试时间,报名入口—网站首页 | 纯水电导率测定仪-万用气体检测仪-低钠测定仪-米沃奇科技(北京)有限公司www.milwaukeeinst.cn 锂辉石检测仪器,水泥成分快速分析仪-湘潭宇科分析仪器有限公司 手术室净化装修-手术室净化工程公司-华锐手术室净化厂家 | 南京技嘉环保科技有限公司-杀菌除臭剂|污水|垃圾|厕所|橡胶厂|化工厂|铸造厂除臭剂 | 济南ISO9000认证咨询代理公司,ISO9001认证,CMA实验室认证,ISO/TS16949认证,服务体系认证,资产管理体系认证,SC食品生产许可证- 济南创远企业管理咨询有限公司 郑州电线电缆厂家-防火|低压|低烟无卤电缆-河南明星电缆 | 贝壳粉涂料-内墙腻子-外墙腻子-山东巨野七彩贝壳漆业中心 | 台湾阳明固态继电器-奥托尼克斯光电传感器-接近开关-温控器-光纤传感器-编码器一级代理商江苏用之宜电气 | 阁楼货架_阁楼平台_仓库仓储设备_重型货架_广州金铁牛货架厂 | 蔬菜清洗机_环速洗菜机_异物去除清洗机_蔬菜清洗机_商用洗菜机 - 环速科技有限公司 | 耐酸碱泵-自吸耐酸碱泵型号「品牌厂家」立式耐酸碱泵价格-昆山国宝过滤机有限公司首页 | 爱德华真空泵油/罗茨泵维修,爱发科-比其尔产品供应东莞/杭州/上海等全国各地 | 京马网,京马建站,网站定制,营销型网站建设,东莞建站,东莞网站建设-首页-京马网 | 全自动在线分板机_铣刀式在线分板机_曲线分板机_PCB分板机-东莞市亿协自动化设备有限公司 | 电渗析,废酸回收,双极膜-山东天维膜技术有限公司 | 电机铸铝配件_汽车压铸铝合金件_发动机压铸件_青岛颖圣赫机械有限公司 | 广东成考网-广东成人高考网 | vr安全体验馆|交通安全|工地安全|禁毒|消防|安全教育体验馆|安全体验教室-贝森德(深圳)科技 | 大倾角皮带机-皮带输送机-螺旋输送机-矿用皮带输送机价格厂家-河南坤威机械 | 黄石妇科医院_黄石东方女子医院_黄石东方妇产医院怎么样 | 牛皮纸|牛卡纸|进口牛皮纸|食品级牛皮纸|牛皮纸厂家-伽立实业 | 南京精锋制刀有限公司-纵剪机刀片_滚剪机刀片_合金刀片厂家 | 外贮压-柜式-悬挂式-七氟丙烷-灭火器-灭火系统-药剂-价格-厂家-IG541-混合气体-贮压-非贮压-超细干粉-自动-灭火装置-气体灭火设备-探火管灭火厂家-东莞汇建消防科技有限公司 | 柴油发电机组_柴油发电机_发电机组价格-江苏凯晨电力设备有限公司 | 山东风淋室_201/304不锈钢风淋室净化设备厂家-盛之源风淋室厂家 翻斗式矿车|固定式矿车|曲轨侧卸式矿车|梭式矿车|矿车配件-山东卓力矿车生产厂家 | 精密模具加工制造 - 富东懿| 辐射色度计-字符亮度测试-反射式膜厚仪-苏州瑞格谱光电科技有限公司 | 涂层测厚仪_光泽度仪_uv能量计_紫外辐照计_太阳膜测试仪_透光率仪-林上科技 | BAUER减速机|ROSSI-MERSEN熔断器-APTECH调压阀-上海爱泽工业设备有限公司 | 电镀电源整流器_高频电解电源_单脉双脉冲电源 - 东阳市旭东电子科技 | 深圳快餐店设计-餐饮设计公司-餐饮空间品牌全案设计-深圳市勤蜂装饰工程 | 东亚液氮罐-液氮生物容器-乐山市东亚机电工贸有限公司 | 长沙一级消防工程公司_智能化弱电_机电安装_亮化工程专业施工承包_湖南公共安全工程有限公司 | 衬塑设备,衬四氟设备,衬氟设备-淄博鲲鹏防腐设备有限公司 | 喷漆房_废气处理设备-湖北天地鑫环保设备有限公司 | 10吨无线拉力计-2吨拉力计价格-上海佳宜电子科技有限公司 | 磁力去毛刺机_去毛刺磁力抛光机_磁力光饰机_磁力滚抛机_精密金属零件去毛刺机厂家-冠古科技 | 医学动画公司-制作3d医学动画视频-医疗医学演示动画制作-医学三维动画制作公司 | 蚂蚁分类信息系统 - PHP同城分类信息系统 - MayiCMS | 硅胶布|电磁炉垫片|特氟龙胶带-江苏浩天复合材料有限公司 | 播音主持培训-中影人教育播音主持学苑「官网」-中国艺考界的贵族学校 | 门禁卡_智能IC卡_滴胶卡制作_硅胶腕带-卡立方rfid定制厂家 |