聊到香港設計，當聊完靳埭強大家也基本能猜到接下來會聊誰，自然就是香港第三代設計師的代表人物陳幼堅，他的成就跟靳埭強可謂旗鼓相當，所以繼靳埭強被封香港設計教父后，他也被封為香港設計教主，按文無第一的原則，也無謂去為他們成就分一個高低，就好比香港歌壇的譚詠麟張國榮，你喜歡誰都是對的。

陳幼堅在國際上的名聲是超越了諸多香港著名設計師的，他職業生涯當中獲得了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歲。按時間推算，當時正值披頭士風靡全港的時候，我們看回當時的男明星也普遍如此，比如粵語歌之父許冠杰先生。

在做包豪斯式的現代主義及美國式的國際主義風格設計的過程中，靳叔曾經把美國波普大師安迪?沃霍爾的波普藝術融入水墨畫中，呈現機械型、幾何型效果。獲得了啟發，靳叔開始思考“為什么是自己追他人的潮流，不是自己開創潮流？”于是開始把中國傳統文化的精髓，融入西方現代設計的理念。傳統書法的筆觸被他大膽地融入設計，荷花、水墨、漢字這些極具中國文化意味的元素開始出現在他作品中?！敖巷L格”的設計水墨開始自成一派。

這個時候離開恒美的靳叔也開始正式自立門戶，當時處于80年代初，他與同學張樹新及幾位舊同事合伙創業,成立新思域設計制作,這就是他現在公司“靳與劉”的前身。靳與劉當中的劉是指合伙人劉小康，同樣是香港著名設計大師，代表作就是屈臣氏的包裝設計。跟很多大師的情況雷同，經典的作品總是從獨立經營公司后開始產生，而第一個讓靳叔聲名大噪的就是中國銀行的標志。

1980年，靳埭強被中銀集團總行委以設計標志，靳叔當時向中銀集團總行香港分行的主管索要五位數報酬，他們覺得是天價，因為內地工人一個月工資才36 元。國內設計師設計一個標志才幾十元。

受到古錢幣的啟發，靳叔以中國古錢幣為基本形態，中間方孔，上下加垂直線，成為“中”字形狀，又暗合天圓地方的意象。“想前人未想，做前人未做”、靳叔說，“如何讓一張白紙變得好看？最重要是嘗試、運用想象力讓它獨特，有趣味。”上世紀80 年代中期，中國銀行開始在內地公開使用這個標志。而靳叔憑此獲得CA 獎( 美國傳達藝術獎)，名噪一時，這個時候的靳叔剛好40不惑。

靳叔在香港做設計的歲月里，服務了大量知名的企業，可以跟這些知名品牌共同成長，相互成就對方，其實關于這塊讓設計師很感觸，就是為何要視每一個項目都是自己的孩子般愛惜，因為當設計師服務了這些企業就等于做了一項投資，如果你用足了心思讓設計趨于完美，為客戶充分考慮并全力以赴時，當這些品牌獲得了發展，設計師也是受益者之一，比方靳叔服務榮華月餅時，榮華也并非一個大牌餅家，又比方力銳的歐陽黎明在2002年服務騰訊時，也并不知道它日后會成為龐然大物，同樣的例子非常多，當這些品牌壯大時，提供設計服務的企業也會收到福蔭，成為設計企業一筆有形的財產及品牌背書。

靳叔前后服務過的知名品牌包括：太太口服液、榮華餅家、櫻雪沐浴露、嘉頓、麒麟啤酒、周生生珠寶等等。

隨著香港回歸，靳叔的靳與劉設計咨詢公司也參與服務諸多內地項目，其中著名的有重慶市政府項目，就是重慶城市標志的設計。這個項目非常值得談一談，因為靳叔曾經說過：這是記憶力最困難的設計工作。

這個標志誕生的過程是“痛苦”的，“因為重慶的文化積淀非常深厚，任何一個具象的東西，如朝天門、解放碑、大禮堂等，都很難代表重慶。難就難在要得到當地市民的普遍認可?！睘榱顺浞至私膺@座城市，靳叔從五所大學找來設計專業學生座談，了解重慶文化，收集大量資料。經過無數次修改，最終定稿的城標圖案是兩個人形的“慶”字。“慶”字的形象如手舞足蹈的人，喻意重慶人樂觀向上的性格，也有“巴”文化“寬厚樂天”的意蘊；兩個“慶”字疊加，又有“重”的意義，也體現了重慶作為超大城市接納眾多外來人口，兼容并蓄的特點。

而這個項目靳叔的設計費高達7位數，雖然設計費用不菲，但是靳叔說這是一個虧本的項目，因為整個項目歷經了兩年的時長才完成。由此我們再次要強調，一個標志的誕生并非單純繪制一個圖形那么的簡單，大型項目中，設計工作的復雜程度可以非常高，同時也強調，不要認為設計的價格很低廉，盡管是7位數都仍然虧本了。

其實回顧起來，靳叔十年裁縫的工作背景對他的設計態度影響也很大，這種感受出自他本人：因為做衣服需要耐心，一針一線，跟設計很像，而且當時的衣服都是定制為主，你肥一些或者瘦一些都決定了衣服的差異，這點跟設計工作就更加像了。每一個項目來之前我們都不知道客戶是誰，要求我們做什么，但是做出來的東西都是圍繞適合他本人的需求去走的。

靳叔50多年的設計歷程，兼顧了設計師與藝術家雙重身份，并且到了后期將諸多精力放在了國畫的研究上，已經是名副其實的畫家，也圓了一直以來的夢想，在此期間獲獎無數，個人榮譽加上靳與劉公司獲得的獎項的高達500多項，成為香港當之無愧的設計教父，其中值得一提的有以下這些：

洛杉磯世界藝術比賽金獎

亞洲廣告獎之最佳企業形象設計

波蘭第一屆國際電腦藝術雙年展冠軍

另外，在香港地區，靳叔更是以設計師身份獲得以下榮譽：

1979，首位獲選為香港十大杰出青年的設計師
1984，唯一獲頒贈市政局設計大獎的設計師
1991，獲香港藝術家年獎之設計師年獎
1992，被選為90年代風云男士之一

1999，獲香港特區頒予銅紫荊星章勛銜
2001，獲香港特區頒予銀紫荊星章勛銜。

羅列完這些榮譽顯然不可能，靳叔跟諸多大師一樣，年長后將一部分精力放在扶持后輩的成長上，比方香港第四代設計師的代表人物李永銓就是師從靳叔，本來這期內容是計劃一起聊聊這位“品牌醫生”的，但礙于篇幅只能暫擱，靳叔也出版了諸多著作，比方平面設計實踐》、《商業設計藝術》、《海報設計》、《廣告設計》、《日本設計師對談錄》、我在前年也曾購買他的新書《設計心法100+1》，獲益良多。

靳叔的故事還有很多，比方受李嘉誠邀約出任汕頭大學長江藝術與設計學院院長，比方在1999年為熱愛設計的年輕人創立了"靳埭強設計獎"，又比方跟美國著名設計大師保羅蘭德（就是那個收喬布斯10萬美元標志設計費，要求只出一個方案并且不修改的平面設計師大師）、跟日本平面設計之父龜倉雄策（關于他的故事可以詳見上一期《日本的設計水平為什么高》）交往的故事等。

這些足以聊三集，但今天我們先聊到這里，有機會時候我們再來展開，并且提供更多靳叔的設計作品進行賞析。

最后補充一點靳叔的思想，其實靳叔在不同的場合跟著作當作都談過不少他的創作理念，我在相對充分的了解后，針對泛數碼設計的時代，覺得特別值得在這里跟大家分享的是：我們要做到“意在筆先”，就是創作前先要在我們的腦里產生好的創意，然后再借助電腦等工具將創意完全表現出來。對于現在許多做設計的年青人來說，離開了電腦就做不出東西，其實是很不健康的現象，真正好的作品飽含設計師的全部激情，這些僅靠電腦是遠遠不夠的?！耙庠诠P先”是中國傳統使用工具的觀念，無論用什么工具，筆或者電腦，或者將來有什么新的工具，做創作時，意在先，這是永恒的概念。

轉自：站酷-設計史太濃

本文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顏色則有略微變化?？傮w來說，黑暗模式下比亮色模式下的圖標顏色更“亮”。是不是這里比較拗口？也就是下圖中，右側比左側的圖標，亮度提升啦！

支付界面中的圖標，處理方式同上邊一樣，右圖比左圖的圖標亮度要高一些。但是下圖中綠色的大色塊，顏色卻一致。

而文章背景顏色，亮色模式為#FEFFFF，黑暗模式為#232323，可見也不是完全的純白和純黑色。另外，想在黑暗模式上貼各種表情的作者可要注意了，你的GIF表情可能會變成上圖那樣？ 就像在黑色背景下開了個白色天窗！一大波白色不透明GIF圖即將失效！

朋友圈界面的背景色和點睛色均發生了變化，在黑暗模式下，發廣告還是美麗的照片，用戶的關注程度都會提升，當然，不好看的圖片，也會把缺點放更大。所以讓你的照片更吸引人吧。

聊天頁面中相應的Tint色也有變化。另外，請注意，背景色依然不是純白色和純黑色。而微信的設計師傾向于使用#FEFFFF而不是#FFFFFF，雖然這倆顏色相差幾乎為零，肉眼不可分辨。是不是這位設計師有某種潔癖？或者是純粹弄錯了？

關于聊天時使用的透明動圖，其實仔細看還是有不少毛邊的，之前我們也做過相關的分析文章。因為這種情況單純使用256色的GIF效果已經非常差了。具體實現方式可以看另一篇文章：不要大白邊！聊聊GIF動畫毛邊的處理方法（評論發送）。以免出現像下面的情況：

彈層顏色在兩種模式下顏色沒有發生變化，搜索框顏色在針對黑暗模式設計時，可以考慮在白色基礎上進行透明度處理。

· 一般情況下Tint顏色，在黑暗模式要比淺色模式要亮，請注意，不管是圖標還是點睛的顏色。

· 蘋果的設計指南中建議背景色為純黑色，但是真正實踐過程中，沒必要完全遵循，可以用一定灰度的顏色替代。

· 使用具有透明度的圖標和文字，在亮色模式轉黑暗模式的時候會更加輕松

· 不管你使用怎樣的顏色，請確保黑暗模式下的設計元素具有足夠的可讀性，同時兼顧美觀。

· 黑暗模式下的層級設計與亮色模式不同，陰影在黑暗模式下沒有太多作用。

· 當發布一個大版本的APP更新時，可以進行分渠道投放，讓一部分先用上新版本，并測試其反饋結果，進而再進行全渠道的投放，可以最大限度降低被用戶吐槽的風險。

轉自：站酷-靜design