聊到香港设计，当聊完靳埭强大家也基本能猜到接下来会聊谁，自然就是香港第三代设计师的代表人物陈幼坚，他的成就跟靳埭强可谓旗鼓相当，所以继靳埭强被封香港设计教父后，他也被封为香港设计教主，按文无第一的原则，也无谓去为他们成就分一个高低，就好比香港歌坛的谭咏麟张国荣，你喜欢谁都是对的。

陈幼坚在国际上的名声是超越了诸多香港著名设计师的，他职业生涯当中获得了600多个奖项，其中更是以国际奖项为主，包括美国、英国及日本的设计大奖，特别在日本他的名声就跟成龙在演艺圈一样的响当当，也有很多人评价他的作品受日本风格影响很大，后来他自己也回应过非常喜欢日本设计，在1991年及2002年他曾或日本东京邀约，举办了"东方汇合西方"、"东情西韵"个人展览。

跟前面两位大师一样，石汉瑞是“跨文化设计”，靳埭强是“中国传统结合西方现代”，陈幼坚则是“东情西韵”，都离不开东西方文化的碰撞路径，个人认为这是可以给内地设计师一些重大启发的。

相对陈幼坚的名声地位，令人感到非常不解的是原来他并非设计科班出生，也没有严谨的设计专业学习经历。

陈幼坚1950年出生在香港，父亲是一名普通的水果摊主，母亲是澳门人，也是普通家庭主妇，都没有受过高等教育，陈幼坚小时候是一名品学兼优的学生，兴趣也很广泛，中学时候入读了西味浓厚的嘉道理爵士中学，但这时候陈幼坚早恋了，交了女朋友的他有点无心向学，不久就辍学去机构做了十个月的代课教师，然后又无法忍受循规蹈矩的教学工作，幸亏在嘉道理爵士中学培养出不错的英文功底，陈幼坚去了一所外资广告公司做学徒，为了尽快适应工作，期间他参加了一个为期个月的香港大一艺术设计学院夜间设计课程的学习，这也是他人生中唯一受过的设计教育经历。

20岁的陈幼坚从助理学徒开始，在广告界努力奋斗了十年，基本都在外国老板的公司里，这也是后来陈幼坚回忆让他得以从西方角度看东方的重要原因，在1980年时，30岁的陈幼坚比较厌倦广告公司的比稿情况跟复杂人事（当时的香港免费比稿成风，甚至引发了设计师集体抗议的运动），跟妻子一起出来独立创业，成立达尔讯广告公司，6年后更名为“陈幼坚广告设计公司”。

已经有40多载设计经历的陈幼坚代表作数不胜数，这里我们选择一部分来谈谈，比方为娱乐圈大咖们的设计、可口可乐的中文标识设计，罗西尼手表的海报设计，香港城市形象设计。

很多人都不知道，陈幼坚在80年代为众多当红巨星设计过演唱会海报、唱片封面，其中有罗文、林子祥、梅艳芳、张学友、周华健跟张国荣等等，其中张国荣是跟陈幼坚合作最久的，整个八十年代，从初出道到89年告别演唱会《FINAL ENCOUNTER》陈幼坚都担任美术指导，一手包办他的个人大碟。但陈幼坚并没有将这些创作放到公司的案例当中，他认为这件事他的兴趣大于商业，所以很多人都不知道，在张国荣61岁冥寿时，陈幼坚参加一个访谈才相对详细的回顾了他跟哥哥的这段交情。

到了2000年时候，50岁的陈幼坚为罗西尼手表设计的海报，让很多人都印象深刻，也是我对其印象最深刻的设计之一，海报上的刻度不是以往的罗马数字或阿拉伯数字，而是换成了一些不完整的文字，但是时针的走动却能为每一时刻添上一笔，使其拼成一个完整的中文小写数字，简洁明了地体现了表盘的创意，这是中国元素运用在现代设计中的一个体现，这样的设计产品不但美观而且极具趣味性。

其实2000年左右是陈幼坚名声鹊起的关键阶段，除了罗西尼手表海报外，他相继完成了诸多重要项目，比方北京申办奥运的招贴画，在日本举办“东情西韵”个展，还有就是完成了可口可乐的中文标识设计。在我的《商业设计祖师爷—美国设计》里谈过，可口可乐享誉全球的英文标识第一次改造由美国工业设计之父雷蒙罗维完成，而陈幼坚在巨人之后承接中文标识设计的艰巨任务，可想而知需求方对他的专业认可及厚望的寄予，但也没有太多悬念，陈幼坚出色的完成了项目。

这是可口可乐中文标识自1979年进入中国以来首次大的变动。陈幼坚通过对“COCA-COLA”英文标识的仔细研究，发现其中的飘带和衬线笔划弧度的设计可以成为中西方两种字体风格相互映衬的契合点，经过巧妙的构思与反复的修改，为了和英文标识中斯宾塞（Spencerian s cript）衬线字体相互协调，他将之前传统的中文汉字改编设计成了弯曲流畅的“斯宾塞式”中文字体。从形式上看，多层次的飘柔丝带设计，和飘带中的银色边线，使标识更加富有时代感，经过微妙的调整和添加之后，原有的视觉元素被激活起来。从色彩上看，底色色彩为红色，字体色彩为白色银边，高纯度的红色与白色形成鲜明的对比，而银色边线则起到了降低饱和度的作用，再加上富有韵律的银白色飘带设计，使整个标识更加富有动感效果。

经过陈幼坚的创意设计，使可口可乐新的中文标识既有中国特点又兼具国际风范，让人一眼就能认出可口可乐家族的新成员。陈幼坚一直不断地发掘各种独特的创意思维，把已有的设计在自己的思维模式中进行解剖与重构，使作品完全脱离原本的面貌，诞生出新的意义和内涵。

然后是2008年时，已经58岁的陈幼坚为香港政府主笔形象升级项目。

这次形象升级经过了全市调研，包括举行专业民意调查、咨询会、核心小组讨论、工作坊、设立专门网站、比赛等，收集公众的意见和期望”；最后通过公开招标，最终确定陈幼坚的设计。

这个设计改造其实也引起了广泛讨论，有叫好有叫坏，其中内地的欧阳黎明曾经在红动论坛专门写贴来表示失望，并说如果由他来改造一定会更好，该贴引发了比较热烈的讨论，当时我还在读大学，也关注过此事，不管欧阳大师的动机如何，其实这种类型的改造肯定无法一致叫好，总会有持相反意见的群体存在。

这里也刚好可以谈一谈香港设计风格的问题，其实个人认为陈幼坚的这个城市形象改造是很符合香港设计风格里那种内核的，我在做这期内容时，专门去了一趟香港做详细观察，我希望身在当地来感受他们的设计氛围。

我为香港设计风格总结了几个特点：

1、 非常丰富缤纷的色彩计划（这点是给我最直接深刻的印象）。

2、 雅俗共存的设计环境

3、 东西方交融的商业特色风格

所谓为何我说陈幼坚的改造是符合香港设计精神内核，我们尝试将几张图放在一起比对，图片中我们看到香港的街景是全世界所独有的，具备非常突出东西交融的市井风格，一眼就能让人识别到：

你会发觉陈幼坚的这个形象图案是很符合香港设计给人的感觉，色彩丰富缤纷，既国际化又通俗化，有东方元素（龙）又具备西方形式（图形简洁），所以从这个角度刨析，陈幼坚的这个升级设计是很成功的，我们如果单纯从图案的好看与否来分析，未免太过浅薄了。

关于陈幼坚的故事大致聊到这里，他有诸多作品都是非常出色的，比如做了大量极为优秀的茶类商业设计，知道后来干脆自己创了一个品牌“MR CHAN 陈茶馆”，标识就是那个经典的佛手，又例如自己公司的标识四喜娃娃，又比如早期阴阳鱼概念的日本西武百货vi系统，不胜枚举，留待大家去发掘这些资料，自行品鉴。

最后补充一点：

客户跟设计师之间的结合就像婚姻一样，不存在一名设计师是通吃全部客户的，如同你再优秀也会有女生不喜欢你一样，就算大师超级明星都不行，因为每一名设计师在长期设计创作中会形成作品风格与气质，这些是作为匹配客户的主要因素，假设我的企业及产品倾向更加柔美、细腻、、精致的展示风格，那么相对靳埭强及陈幼坚，我可能会首先倾向选择陈幼坚，因为他似乎更加擅长，跟他的气质也更吻合。

这期关于香港设计历史的内容先聊到这里，我们除了讲述香港现代设计的发展起源，还合计介绍了三位大师，分别是石汉瑞、靳埭强及陈幼坚，其实计划聊多一些，但最后发觉最具代表性的还是这三位，聊多不如聊透，虽然最后发觉也许仍没有聊透，但所谓犹抱琵琶半遮面，剩下的一些空间等待大家自行研究其实更好。

下一期我们将继续国家之旅，以时空切换的方式，回到接近两百年前的英国，因为我们将为大家探究现代设计的萌芽之地，聊一聊英国设计。

 转自：站酷-设计史太浓 

提起香港设计师，大部分人首先想到的就是香港设计教父靳埭强先生，他有诸多前无古人的创举，比方首位以设计师身份获选香港十大杰出青年的港人、唯一设计师获颁赠市政局设计大奖、首位华人名列世界平面设计师名人录、并获英国选为二十世纪杰出艺术家及设计师。在全球设计界都是大师级的人物，业内都亲切的称呼他为“靳叔”。

靳叔1942年出生于广州番禺， 15岁才跟随父亲到香港定居，所以并非土生土长的香港人。

靳叔祖父是广州有名的民间工艺师，从事灰塑建筑装饰艺术，还曾做过领班参与广州陈家祠的灰塑修建。同时伯父靳微天及姑母靳思薇早在五六十年代就是香港著名的画家。弟弟靳杰强是物理学博士，但受家庭人员的艺术背景影响，在国画方面也小有成就，跟靳叔一起哥俩多次在香港及美国举办二人联展，非常有意思。

很多人其实都知道靳叔并非学设计或者艺术出身的，而是一名裁缝，而且还是从学徒开始。1957年刚刚到港15岁的靳叔因为不忍心父亲独自一人撑起整个家庭的开支，所以虽然怀着艺术家理想，但必须先帮家里维持生计，所以就出来找了一份裁缝学徒的工作，从搞卫生等粗重杂碎活开始，通过努力的学习很快成为裁缝师傅，每天早出晚归，早上9点到晚上9点，并且一做就做了十年。

这十年之间靳叔内心还没有放弃自己的艺术梦，所以每逢周日有半天假期，就会跟大伯父学习水彩跟素描等基本功。终于，靳叔的人生转机在60年代末出现，这时候的香港刚刚经历“六七暴动”不久，港英政府对华人变得相对友善，实施“积极不干预政策”刺激香港经济，带动轻工业发展，其中就包括了设计业，而此时此刻，来自西方的设计师石汉瑞已经独立创业，经营图语设计公司，事业发展如日中天。

这一年，港中文大学开设了校外进修部的一个设计夜间课程班，授课老师是后来鼎鼎大名的王无邪（香港著名水墨画家及设计师），跟留学德国的钟培正，课程恰好就是教授德国包豪斯设计理论及平面设计。

靳叔被课程吸引了，马上报名。但课程是晚上7 点开课，而他晚上9 点半才能下班，刚好时间重叠，幸运的是靳叔当时的老板非常赏识他，同意他只要完成工作就能提前下班。通过这种方式靳叔白天做裁缝晚上学设计，此时的靳叔25岁。这里我们又推导了一下，靳叔按如此这般的师徒传承关系，属于包豪斯的第四代传人。

靳叔最具代表性的是水墨风格系列作品，但其实靳叔刚刚出道时候，一直做的都是非常包豪斯的设计，1967年，就在靳叔通过夜校学习设计三个月后，经同学介绍就去了玉屋百货做设计员，正式开始第一份设计工作，主要做橱窗设计及促销广告，历时一年。随后去了老师钟培正先生经营的恒美商业设计公司，从设计员开始，两年做到设计指导，4年做到设计总监，基本上恒美大部分成功案例都出自靳叔之手，在恒美靳叔一共呆了8年，这个时候的靳叔已经由懵懂少年成为一个成熟设计师。

而且这个期间的他还是一头长发的男子，但是已经找不到太多年轻时候的图片，长发形象一直伴随他到50岁。按时间推算，当时正值披头士风靡全港的时候，我们看回当时的男明星也普遍如此，比如粤语歌之父许冠杰先生。

在做包豪斯式的现代主义及美国式的国际主义风格设计的过程中，靳叔曾经把美国波普大师安迪•沃霍尔的波普艺术融入水墨画中，呈现机械型、几何型效果。获得了启发，靳叔开始思考“为什么是自己追他人的潮流，不是自己开创潮流？”于是开始把中国传统文化的精髓，融入西方现代设计的理念。传统书法的笔触被他大胆地融入设计，荷花、水墨、汉字这些极具中国文化意味的元素开始出现在他作品中。“靳氏风格”的设计水墨开始自成一派。

这个时候离开恒美的靳叔也开始正式自立门户，当时处于80年代初，他与同学张树新及几位旧同事合伙创业,成立新思域设计制作,这就是他现在公司“靳与刘”的前身。靳与刘当中的刘是指合伙人刘小康，同样是香港著名设计大师，代表作就是屈臣氏的包装设计。跟很多大师的情况雷同，经典的作品总是从独立经营公司后开始产生，而第一个让靳叔声名大噪的就是中国银行的标志。

1980年，靳埭强被中银集团总行委以设计标志，靳叔当时向中银集团总行香港分行的主管索要五位数报酬，他们觉得是天价，因为内地工人一个月工资才36 元。国内设计师设计一个标志才几十元。

受到古钱币的启发，靳叔以中国古钱币为基本形态，中间方孔，上下加垂直线，成为“中”字形状，又暗合天圆地方的意象。“想前人未想，做前人未做”、靳叔说，“如何让一张白纸变得好看？最重要是尝试、运用想象力让它独特，有趣味。”上世纪80 年代中期，中国银行开始在内地公开使用这个标志。而靳叔凭此获得CA 奖( 美国传达艺术奖)，名噪一时，这个时候的靳叔刚好40不惑。

靳叔在香港做设计的岁月里，服务了大量知名的企业，可以跟这些知名品牌共同成长，相互成就对方，其实关于这块让设计师很感触，就是为何要视每一个项目都是自己的孩子般爱惜，因为当设计师服务了这些企业就等于做了一项投资，如果你用足了心思让设计趋于完美，为客户充分考虑并全力以赴时，当这些品牌获得了发展，设计师也是受益者之一，比方靳叔服务荣华月饼时，荣华也并非一个大牌饼家，又比方力锐的欧阳黎明在2002年服务腾讯时，也并不知道它日后会成为庞然大物，同样的例子非常多，当这些品牌壮大时，提供设计服务的企业也会收到福荫，成为设计企业一笔有形的财产及品牌背书。

靳叔前后服务过的知名品牌包括：太太口服液、荣华饼家、樱雪沐浴露、嘉顿、麒麟啤酒、周生生珠宝等等。

随着香港回归，靳叔的靳与刘设计咨询公司也参与服务诸多内地项目，其中著名的有重庆市政府项目，就是重庆城市标志的设计。这个项目非常值得谈一谈，因为靳叔曾经说过：这是记忆力最困难的设计工作。

这个标志诞生的过程是“痛苦”的，“因为重庆的文化积淀非常深厚，任何一个具象的东西，如朝天门、解放碑、大礼堂等，都很难代表重庆。难就难在要得到当地市民的普遍认可。”为了充分了解这座城市，靳叔从五所大学找来设计专业学生座谈，了解重庆文化，收集大量资料。经过无数次修改，最终定稿的城标图案是两个人形的“庆”字。“庆”字的形象如手舞足蹈的人，喻意重庆人乐观向上的性格，也有“巴”文化“宽厚乐天”的意蕴；两个“庆”字叠加，又有“重”的意义，也体现了重庆作为超大城市接纳众多外来人口，兼容并蓄的特点。

而这个项目靳叔的设计费高达7位数，虽然设计费用不菲，但是靳叔说这是一个亏本的项目，因为整个项目历经了两年的时长才完成。由此我们再次要强调，一个标志的诞生并非单纯绘制一个图形那么的简单，大型项目中，设计工作的复杂程度可以非常高，同时也强调，不要认为设计的价格很低廉，尽管是7位数都仍然亏本了。

其实回顾起来，靳叔十年裁缝的工作背景对他的设计态度影响也很大，这种感受出自他本人：因为做衣服需要耐心，一针一线，跟设计很像，而且当时的衣服都是定制为主，你肥一些或者瘦一些都决定了衣服的差异，这点跟设计工作就更加像了。每一个项目来之前我们都不知道客户是谁，要求我们做什么，但是做出来的东西都是围绕适合他本人的需求去走的。

靳叔50多年的设计历程，兼顾了设计师与艺术家双重身份，并且到了后期将诸多精力放在了国画的研究上，已经是名副其实的画家，也圆了一直以来的梦想，在此期间获奖无数，个人荣誉加上靳与刘公司获得的奖项的高达500多项，成为香港当之无愧的设计教父，其中值得一提的有以下这些：

洛杉矶世界艺术比赛金奖

亚洲广告奖之最佳企业形象设计

波兰第一届国际电脑艺术双年展冠军

另外，在香港地区，靳叔更是以设计师身份获得以下荣誉：

1979，首位获选为香港十大杰出青年的设计师
1984，唯一获颁赠市政局设计大奖的设计师
1991，获香港艺术家年奖之设计师年奖
1992，被选为90年代风云男士之一

1999，获香港特区颁予铜紫荆星章勋衔
2001，获香港特区颁予银紫荆星章勋衔。

罗列完这些荣誉显然不可能，靳叔跟诸多大师一样，年长后将一部分精力放在扶持后辈的成长上，比方香港第四代设计师的代表人物李永铨就是师从靳叔，本来这期内容是计划一起聊聊这位“品牌医生”的，但碍于篇幅只能暂搁，靳叔也出版了诸多著作，比方平面设计实践》、《商业设计艺术》、《海报设计》、《广告设计》、《日本设计师对谈录》、我在前年也曾购买他的新书《设计心法100+1》，获益良多。

靳叔的故事还有很多，比方受李嘉诚邀约出任汕头大学长江艺术与设计学院院长，比方在1999年为热爱设计的年轻人创立了"靳埭强设计奖"，又比方跟美国著名设计大师保罗兰德（就是那个收乔布斯10万美元标志设计费，要求只出一个方案并且不修改的平面设计师大师）、跟日本平面设计之父龟仓雄策（关于他的故事可以详见上一期《日本的设计水平为什么高》）交往的故事等。

这些足以聊三集，但今天我们先聊到这里，有机会时候我们再来展开，并且提供更多靳叔的设计作品进行赏析。

最后补充一点靳叔的思想，其实靳叔在不同的场合跟著作当作都谈过不少他的创作理念，我在相对充分的了解后，针对泛数码设计的时代，觉得特别值得在这里跟大家分享的是：我们要做到“意在笔先”，就是创作前先要在我们的脑里产生好的创意，然后再借助电脑等工具将创意完全表现出来。对于现在许多做设计的年青人来说，离开了电脑就做不出东西，其实是很不健康的现象，真正好的作品饱含设计师的全部激情，这些仅靠电脑是远远不够的。“意在笔先”是中国传统使用工具的观念，无论用什么工具，笔或者电脑，或者将来有什么新的工具，做创作时，意在先，这是永恒的概念。

转自：站酷-设计史太浓

本文6000字上下，反复校对6遍以上，初步阅读完大概需要25分钟，若是深入理解并完全吸收则建议“先收藏再反复的品，细细的品”。希望对各位朋友有所帮助，不足之处望校正，祝阅读愉快。

双20年终究还是来了，互联网产品对于这个时代不是什么新鲜事了，互联网人也从未停止对优秀产品的探索和创新。而做为一个设计人的我们，在前行的脚步中也应该温故知新，就让我跟大家一起来对iOS、Android的设计规范、适配问题做一次全面的梳理和复习吧。

iOS设计规范

苹果自07年1月9日正式发布iPhone到目前为止的iPhone11Pro Max，已经历了十三代产品。19年9月11日推出的11、11Pro、11Pro Max并没有新增尺寸，所以对设计师而言也就没有额外新增工作量了，还是按照以前的做法：750*1334px（@2x）或（375*667pt，@1x）做设计稿，再提供@2x、@3x切图。

以下为苹果手机历代产品明细（话说你拥有过那几代产品，欢迎留言交流）

一代：iPhone

二代：iPhone3G

三代：iPhone3GS

四代：iPhone 4

五代：iPhone 4s

六代：iPhone 5

七代：iPhone 5s、iPhone 5c

八代：iPhone6、iPhone6 Plus

九代：iPhone 6s、iPhone 6s Plus

十代：iPhone7、iPhone7 Plus

十一代：iPhone8、iPhone8 Plus、iPhone X

十二代：iPhone XS、iPhone XS Max、iPhone XR

十三代：iPhone11、iPhone11Pro、iPhone11Pro Max

如何有效记住iOS设计规范，这里我总结了一个方法“iOS五点两图记忆法”，也就是五个点+两张图。

1、设计尺寸：375x667pt @1x（750x1334px @2x）为基准设计。

2、设计工具：Sketch、Adobe XD、Photoshop

3、预览效果：Sketch Mirror、Adobe XD或Ps Play

4、切图输出：@2x @3x两套

5、标注工具：蓝湖，摹客

两图psd下载链接：https://pan.baidu.com/s/15g2x0vDd1yZevADuUj1V3g 提取码: i4ai

考考你：

1、iPhone8尺寸的设计稿如何快速变成iPhoneX的设计稿？

2、@2倍图被当作@3倍进行开发，会导致什么样的后果？

3、为什么要用375x667pt @1倍图进行设计？（后文也有详细答案哦）

4、iPhone8显示为34px的文字在iPhone11 pro Max里面是不是也是34px？

这里我们首先重点理解下PX和PT这两个单位， 弄清楚为什么建议使用一倍图进行UI设计，才能在设计中以不变应万变。（说明：该部分内容优化自静电老师的总结。公众号@静Design）

PX大家可能比较熟悉，就是像素，英文pixel的简称。最通俗的理解就是找一个放大镜（不是电脑中的放大镜，是真实的放大镜），然后对准自己面前的显示器或者手机屏幕观看，大部分显示器会在放大镜下出现一个个点。这就是我们平时所说的像素概念。在一台物理分辨率为1080x1920px的显示器中，横向分布1920个点，纵向则有1080个点。这些点通过显示器的光学特性，为我们组成不同的图像。

请注意， 在不同尺寸的显示器上，这些点的单位面积并不是一样的。比如一台22英寸的1080p液晶显示器与一台27英寸的1080p液晶显示器，可以发现这两台显示器的像素分布就是27英寸的显示效果明显逊于22英寸显示器的效果，一个重要的原因就是两台液晶面板中的“像素”颗粒大小不一。

由此可见，像素这个单位是一个相对单位，不能用厘米、毫米等这些绝对度量单位来衡量他的长度或者宽度，因为1像素只代表一个单位的“点”。

另一个重要单位是PT，英文point的简称，这个单位也是iOS开发过程中使用的单位，与px这样的相对单位不同，PT（Point）是一个绝对单位，中文名字是“磅因（或者磅）”（1PT=1/72英寸）。

同样用简单直观的例子来演示，拿两台不同型号的iPhone，比如一台ip11和一台ip11pro Max，打开同样一款应用（如QQ音乐），准备好一把尺子，使用尺子分别测量最上方title“音乐馆”文字尺寸。经测量，可以发现不同型号的“音乐馆”文字的尺寸都一样。也可以请iOS开发人员分别写两个针对不同尺寸机型适配的同一个文件，并在两部手机安装，确保这个文件中的字体使用一个字号（30PT）。在两个手机中运行并用尺子测量，我们发现他们的物理尺寸完全一样。

请大家记住一点，px是相对单位，pt为绝对单位（类似单位为厘米，毫米等等）。在不确定屏幕密度的情况下，px与pt没有任何可比性。

在开发工程师眼中，你如果使用750px的分辨率作图，那么按原大小标注设计稿中的尺寸的话，他们同样在开发环境中是要换算为一倍尺寸的，比如你标注了字号为40px，那么最终开发工程师写在代码里的就是20pt，除以2的关系。但是呢，如果使用一倍基准分辨率作图，那么就不用除以2啦，所有尺寸开发工程师直接拿过去随取随用。

sketch作为一款纯矢量的移动端ui设计软件，不管是设计还是后期与开发工程师的配合，都严格遵从开发原理，这种设计方法可以最大限度保证设计稿的复现，同时也可以减小文件体积和系统资源消耗，不管是从哪个方面看，都是设计师制作ui界面的明智之选。

最后总结一下原因，设计师使用一倍基准尺寸作图，主要是单位转换方便，输出切图方便，理解简单。对于工程师，他们不用再进行复杂的换算，有助于完美复现设计稿。

我们继续熟悉iOS中一些必不可少的页面规范细则。

一、引导页

引导页是一张完整图，不能适配，因此需要单独出设计图，iOS共需提供6套尺寸，当然也支持视频形式。（目前5以下的适配基本淘汰）

二、图标

以1024x1024px尺寸进行图标创作即可。再通过现成尺寸模版资源，一键生成整套尺寸导出即可。（模版链接：https://developer.apple.com/design/resources/Template-AppIcons-iOS）

注意：最终提交给到程序员的切图是直角，非圆角图标。

其他设备图标尺寸

三、状态栏和导航栏（具体尺寸见五点二图）

状态栏：显示时间、运营商信息、电池电量等信息区域。(齐刘海区域)

导航栏：状态栏下面的区域，含页面标题、功能图标等信息区域。

状态栏跟导航栏一般会进行一体化设计。现在流行大标题导航栏设计，也就是加大导航栏的高度，融入页面内容的标题，当内容上滑时，大标题再回归到常规导航高度。（大标题导航栏的高度一般为116pt（232px），这里包括了20pt（40px）状态栏的高度，同时也能放得下34pt（68px）的大标题和辅助信息（如返回等图标）。

导航栏中的元素必须遵守如下几个对齐原则:

1、返回按钮必须在左边对齐。

2、当前界面的标题必须在导航栏正中。（可无）

3、其他控制按钮必须在右边对齐。

四、标签栏（具体尺寸见五点二图）

标签栏：即Tab栏，为底部快速入口，iOS规范中Tab栏一般有五个、四个、三个图标的形式。分为“纯图标标签”和“图标加文字标签”两种形式。

五、iTunes 上传页面

在程序上传App Store时我们需要提供多张App截图，供用户了解APP的功能。这里我们需要提供1242 x 2688px和1125 x 2436px两套截图。也支持视频形式。（微信目前采用的是五张静态页面形式）

微信iTunes上传用截图 

六、 字体

中文字体：PingFang SC，英文字体：SF UI Text 、SF UI Display，其中SF UI Text适用与小于19pt的文字，SF UI Display适用于大于20pt的文字。

链接: https://pan.baidu.com/s/17cKM9co53TEN85gj4vy5dw 提取码: hd35

七、色彩

在iPhone上显示的色域要比我们作图时的RGB色域要广。所以在iPhone上设计怎样的颜色都可以，只要符合产品气质并且在色彩心理学理论范围内。官方建议的系统色彩如下：

iPhone的系统色

八、控件

控件包括：输入框、按钮、滑杆、页卡、开关等，在设计模板中已经全部列出。（下载地址：https://developer.apple.com/design/resources/）为了让设计更符合整体产品品牌调性，这些控件可以做二次设计。

但得注意两件事：第一，点击区域基本符合44pt（88px）原则，也就是在手机上大小大概是7mm-9mm，适合手指点击。第二，要设计操作的不同状态，不要只设计一种状态。

默认控件

控件中无处不在的44pt（88px）

之前我们介绍过，人手指点击区域为7mm - 9mm，在@2x中就是44pt（88px）。苹果的导航条、列表、工具栏都充满了44pt（88px）这个神秘数字。我们在设计时一定也要考虑到手指的点击区域。

 无处不见的44pt（88px）

九、界面设计原则

1.边距和间距（@2x）

在移动端页面的设计中，页面中元素的边距和间距的设计规范是非常重要的，一个页面是否美观、简洁、通透和边距、间距的设计规范紧密相连。

（1）全局边距（iOS13，@2x）

全局边距是指页面内容到屏幕边缘的距离，整个应用的界面都应该以此来进行规范，以达到页面整体视觉效果的统一。在实际应用中应该根据不同的产品气质采用不同的边距，让边距成为界面的一种设计语言，全局边距的设置可以更好的引导用户竖向向下阅读。还有一种是不留边距，通常被应用在卡片式布局中图片通栏显示，这种图片通栏显示的设置方式，更容易让用户将注意力集中到每个图文的内容本身。

微信和支付宝的边距都是32px。（@2x）

（2）卡片间距

在移动端页面设计中卡片式布局是非常常见的布局方式，至于卡片和卡片之间的距离的设置需要根据界面的风格以及卡片承载信息的多少来界定，通常最小不低于16px，过小的间距会造成用户紧张情绪，使用最多的间距是20px、24px、30px、40px，当然间距也不宜过大，过大的间距会使界面变得松散，间距的颜色设置可以与分割线一致，也可以更浅一些。

以iOS（750*1334px）为例，设置页面卡片间距为70px，而通知中心承载了大量的信息，因此采用了较小的16px作为卡片的间距。

总结：卡片间距的设置是灵活多变的，一定要根据产品的气质和实际需求去设置，平时也可以多截图测量一下各类APP的卡片间距都是怎么设置的，看的多了并融会贯通，卡片间距设置自然会更加合理，更加得心应手。

（3）内容间距

一款APP除了各种栏（状态栏、导航栏、标签栏、工具栏）和控件icon，就是内容了，内容的布局形式多种多样，这里不去探讨内容具体应该如何去布局，我们来说一说内容的间距设置问题。

格式塔邻近性原则：

单个元素之间的相对距离会影响我们的感知，互相靠近的元素看起来属于一组，而那些距离较远的则自动划分组外。来看下图，左图中的圆在水平方向比垂直距离近，那么，我们看到了4排圆点，而右图则看成4列。

在UI设计中内容布局时，一定要重视邻近性原则的运用 

2.内容布局

在APP的设计中内容的布局形式多种多样，这里介绍最常用的两种布局形式，列表式布局和卡片式布局。

（1）列表式布局

列表式布局方式非常普遍，随便打开一个APP，基本都存在这种布局方式。特点在于能够在较小的屏幕中显示多条信息，用户通过上下滑动的手势能获得大量的信息反馈。这也是一种非常容易理解的展示形式。

（2）卡片式布局

这种布局形式相对灵活。其特点在于每张卡片的内容和形式相互独立，互不干扰，所以可以在同一个页面中出现不同的卡片承载不同的内容。卡片式布局相对时尚、前卫，很多to C产品经常用到。另外，双栏卡片的布局形式，也常见于以图片信息为主导的App，例如一些商城的商品陈列页面。这种形式能在一屏里显示更多的内容（至少4张），同时，由于分开左右两栏的显示，用户可以更加方便地对比左右两栏卡片的内容。

3.界面图片设计比例

在UI设计中，对于图片的尺寸和比例没有严格的规范，设计师往往凭借经验和感觉设置一个看起来不错的尺寸，但事实上我们是有章可循的。运用科学的手段设置图片的尺寸，可以获得最优的方案，常见的图片尺寸有16:9、4:3、3:2、1:1和1:0.618（黄金比例）等。

4.APP版式设计规范

版式设计又叫做版面编辑，即在有限的版面空间里，将版面的构成要素（文字、图片、控件）根据特定的内容进行组合排列。一个优秀的排版要考虑到用户的阅读习惯和设计美感，在UI设计中版面设计的基础原则有哪些呢？

（1）对齐

对齐是贯穿版式设计最基础，最重要的原则之一，它能建立起一种整齐规矩的外观，带给用户有序一致的浏览体验。

（2）对称

对称是对立统一规律的本质属性，呈现出一种和谐自然的美，在应用界面的设计中，引导页设计、注册登录输入框和按钮等无一不是对称的设计。

（3）分组

物以类聚，人以群分。分组是将同类别的信息组合在一起，直观的呈现在用户面前，这样的设计能够减少用户的认知负担，在移动端界面的设计中最常见的分组方式就是卡片，为用户选择提供专注而又明确的浏览体验。

十、切图命名规范

切图最后需要命名成规范格式，方便程序员查找。切图命名的格式建议全英文，如果大家英文不好需要想办法提升一点简单的词汇量。借由上述工具切图后，需要整理切图命名，或在切图之前对图层命名亦可。以下是切图元素的中英文对照：

切图命名对照表

然后我们要按照”功能_类型_名称_状态@倍数”来命名每个切图，比如我们导航条上有一个搜索图标，那么它的名称就是： 

navi_icon_search_default@2x.png

(导航_图标_搜索_正常@2x.png)

Android设计规范

接下来，再一起来看看Android设计规范，这里只是把安卓规范中一些关键信息做了汇总，更详细的不过多赘述，网上已经有很多大佬产出过此类文章，大家可自行搜索。

一、安卓开发单位是DP、SP

DP：安卓专用长度单位。

以160 DPI屏幕为标注，则1DP=1PX

计算公式：dp x dpi/160=px

例：以720x1280px （320dpi）为例， 1dp x 320 dpi/160=2px

SP：安卓专用字体单位。

以160 DPI屏幕为标注，则1SP=1PX

计算公式：sp x dpi/160=px

例：以720x1280px （320dpi）为例， 1sp x 320 dpi/160=2px

二、安卓设计尺寸：以1080x1920px作为设计稿标准尺寸

1.从中间尺寸向上、下适配，界面调整幅度最小，最方便适配。

2.大屏幕时代依然以小尺寸作为设计尺寸，会限制设计师的设计视角。

3.用主流尺寸来做设计稿尺寸，极大的提高了视觉还原和其他机型适配。

三、安卓图标尺寸

四、安卓字体

中文：思源黑体 / Noto Sans Han

英文：Roboto

大小：主题文字 36-34px    正文 28-26px     提示文字 24-22px

链接: https://pan.baidu.com/s/17cKM9co53TEN85gj4vy5dw 提取码: hd35

五、切图规范

1.切图尺寸必须为双数

2.单像素的图会出现边缘模糊的情况

一般情况下，我们只需要提供3套切图资源就可以满足安卓工程师的适配，分别是HDPI、XHDPI、 XXHDPI 3套切图资源。

如何用iOS的设计稿适配安卓

现在绝大多数公司限于人力物力的限制，不能把iOS和安卓的设计稿全部执行出来，因此就存在一稿两用的情况；设计师以iOS版本的设计稿来适配安卓，下面我们来看一组有趣的数学换算题：

1080/1.5=720，720/1.5=480，1242*2208/1.15=1080*1920，也就是说，1242*2208（iOS@3倍尺寸）与1080*1920（安卓尺寸）是可以等比缩放的，所以，iOS与Android的尺寸是可共用1242*2208px。因此，以iOS设计尺寸进行设计是可以适配Android的。（前提是必须和安卓工程师沟通清楚）

另一种方式，就是把750×1334px等比例调整尺寸到安卓1080×1920px，对各个控件进行微调，重新提供标注（用dp标注）。也就是需要提供两套标注，一套给iOS，一套给Android。

iOS开发语言

作为iOS开发工程师，最重要的三个工具是：Obiective-C、Swift、UIKit框架。Obiective-C是目前最有效率的语言；而Swift开发非常。一般iOS工程师会在这两个语言中选择一种作为开发工具。UIKit是苹果系统自带的一套框架，这个框架里有设置按钮、滑竿、状态栏、电池电量、键盘等接口可供调用。所以我们看到很多第三方APP的界面中，有许多控件和苹果自带程序是一致的，这就是UIKit的功劳。

iOS开发里单位是pt

750×1334尺寸的换算关系 1pt=2px，也就是说程序员拿到我们的px单位的标注稿，自己除以2就是pt了。（这也是为什么建议设计师用@1倍图做设计稿的原因）

转自：站酷-蜗牛和笔

静电说：它来啦！前一段时间传的沸沸扬扬的苹果与微信黑暗模式的纠葛，终于以微信适配iOS端告终。3月22日静电一觉醒来，微信已经正式开启了“暗黑”模式。不过，很多人也许发现不了，因为手机白天还是浅色模式，只有到晚上才会改为黑暗模式。

首先，你必须更新到iOS端的微信7.0.12版本。然后，在白天，只有你手工开启了“设置”>“显示与亮度” 菜单下的深色模式，它才有效果。至于安卓用户，截止3月22日文章发布的时间，官网依然没有更新。安卓的小伙伴就再等等吧。开启后效果如下：

这次的改动可以说是很全面的，几乎所有的界面都进行了调整，包括聊天窗口，朋友圈文章，微信游戏，帮助页面，看一看等等，但是微信小程序则依赖开发者的适配，目前来看，还都是白色的。

不少小伙伴对于黑暗模式的设计还不是特别熟悉，接下来咱们通过微信设计细节的分析，来看看小伙伴们都能从微信的改变上学到什么？

请注意，以上内容为截图取色，可能存在不准的情况。但是可以看到，微信在Tab背景上并不是使用的纯白或者纯黑色。 在Tint颜色上，亮色模式和暗色模式的颜色也不一样，这符合iOS 13 黑暗模式设计的规则定义。一般来说Tint颜色，黑暗模式下更亮一点。（左侧色卡为浅色模式，右侧为深色模式，下同）

另外，以上取色均没有考虑透明度，在实际应用中需要考虑透明度的使用。而对于Tab背景来说，亮色模式和黑暗模式均沿用透明毛玻璃效果。

左侧色卡为浅色模式，右侧为深色模式，均没有考虑透明度影响。

在聊天列表，通讯录列表页面，系统图标在两种模式下的颜色均保持一致，未做改变。

但在发现页面中，列表左侧的icon颜色则有略微变化。总体来说，黑暗模式下比亮色模式下的图标颜色更“亮”。是不是这里比较拗口？也就是下图中，右侧比左侧的图标，亮度提升啦！

支付界面中的图标，处理方式同上边一样，右图比左图的图标亮度要高一些。但是下图中绿色的大色块，颜色却一致。

而文章背景颜色，亮色模式为#FEFFFF，黑暗模式为#232323，可见也不是完全的纯白和纯黑色。另外，想在黑暗模式上贴各种表情的作者可要注意了，你的GIF表情可能会变成上图那样？ 就像在黑色背景下开了个白色天窗！一大波白色不透明GIF图即将失效！

朋友圈界面的背景色和点睛色均发生了变化，在黑暗模式下，发广告还是美丽的照片，用户的关注程度都会提升，当然，不好看的图片，也会把缺点放更大。所以让你的照片更吸引人吧。

聊天页面中相应的Tint色也有变化。另外，请注意，背景色依然不是纯白色和纯黑色。而微信的设计师倾向于使用#FEFFFF而不是#FFFFFF，虽然这俩颜色相差几乎为零，肉眼不可分辨。是不是这位设计师有某种洁癖？或者是纯粹弄错了？

关于聊天时使用的透明动图，其实仔细看还是有不少毛边的，之前我们也做过相关的分析文章。因为这种情况单纯使用256色的GIF效果已经非常差了。具体实现方式可以看另一篇文章：不要大白边！聊聊GIF动画毛边的处理方法（评论发送）。以免出现像下面的情况：

弹层颜色在两种模式下颜色没有发生变化，搜索框颜色在针对黑暗模式设计时，可以考虑在白色基础上进行透明度处理。

· 一般情况下Tint颜色，在黑暗模式要比浅色模式要亮，请注意，不管是图标还是点睛的颜色。

· 苹果的设计指南中建议背景色为纯黑色，但是真正实践过程中，没必要完全遵循，可以用一定灰度的颜色替代。

· 使用具有透明度的图标和文字，在亮色模式转黑暗模式的时候会更加轻松

· 不管你使用怎样的颜色，请确保黑暗模式下的设计元素具有足够的可读性，同时兼顾美观。

· 黑暗模式下的层级设计与亮色模式不同，阴影在黑暗模式下没有太多作用。

· 当发布一个大版本的APP更新时，可以进行分渠道投放，让一部分先用上新版本，并测试其反馈结果，进而再进行全渠道的投放，可以最大限度降低被用户吐槽的风险。

转自：站酷-静design