如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
Shards 采用了 Bootstrap 4 前端框架制作的，外觀簡(jiǎn)約而時(shí)尚，風(fēng)格與現(xiàn)代流行的扁平化相當(dāng)合襯！此外不僅僅擁有 HTML/CSS/SASS 格式模板，還有 Sketch 設(shè)計(jì)源文件，可見分享者的貼心。
目前從官方介紹來看，UI組件還相當(dāng)齊全，可用它來快速搭建漂亮、時(shí)尚的網(wǎng)頁(yè)和UI設(shè)計(jì)作品，下面一起來看看介紹。
關(guān)于 Shards 這個(gè)主題雖然免費(fèi)，但并不代表它只有「表面」，制作者還為性能性能考慮，壓縮版僅12KB大小，實(shí)在太好了，以這樣的大小，制作出來的網(wǎng)頁(yè)直接能秒開。
它并不是直接使用 Bootstrap 的設(shè)計(jì)樣式，所有的組件都是重新設(shè)計(jì)，以便得到統(tǒng)一的風(fēng)格！
這是非常不錯(cuò)的UI KIT素材 ，它還包含了10個(gè)額外的自定義組件，可以讓使用者快事制作著陸頁(yè)。
演示地址：https://designrevision.com/demo/shards/extra/app-promo.html
演示地址：https://designrevision.com/demo/shards/extra/agency-landing.html
Shards 含有豐富的 UI 組件，網(wǎng)頁(yè)端常用的元素幾乎包含了，大方便用戶自由定制。
顏色：
字體
圖標(biāo)支持900+ Material icons 和 Font awesome 兩大圖標(biāo)庫(kù)！
表單上的細(xì)節(jié)，也不容忽視：
還有日期組件的設(shè)計(jì)：
卡片
按鈕
導(dǎo)航菜單
我想這些漂亮的元素，已經(jīng)足夠你設(shè)計(jì)一般的網(wǎng)頁(yè)，即使不夠，也完全可以自己利用 Sketch 源文件或 HTML 模板再創(chuàng)作。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
看了很多版式技巧仍排不好版？懂得很多套路仍做不好設(shè)計(jì)？其實(shí)也正常，因?yàn)榇蟛糠旨记啥急容^籠統(tǒng)，每個(gè)人用起來的會(huì)有不同的效果，所以蔥爺特地總結(jié)了7個(gè)比較具體的小技巧，算是屬于一學(xué)就會(huì)且很容易出效果的排版小妙招，希望能幫你能解決一些比較具體的問題。
該技巧操作起來很簡(jiǎn)單，就是在標(biāo)題或內(nèi)文下面，增加相關(guān)的英文單詞或阿拉伯?dāng)?shù)字就可以了。不過在處理下面的文字時(shí)要注意：1.顏色要比上面的文字淡，以免影響其識(shí)別性；2.字體要用粗體，且字號(hào)要比上面的文字大；3.要與上面的文字錯(cuò)位排版。之所以這么處理是為了增加版面的層次、對(duì)比、以及元素的豐富性。
這是增強(qiáng)標(biāo)題設(shè)計(jì)感的另一種處理方式，單純的文字標(biāo)題難免顯得單調(diào)，我們可以通過增加輔助元素使它變得更豐富一點(diǎn)，比如在文字的基礎(chǔ)上加小色塊。
色塊的高度最好大于筆畫厚度，小于文字的高度，加上去的方式可以是疊加于文字之上，或是置于文字底部，創(chuàng)造出文字的一部分在色塊內(nèi)一部分在色塊外的對(duì)比效果。還有，色塊的顏色最好來源于版面中的其他元素。
在做設(shè)計(jì)的時(shí)候常常會(huì)遇到這兩情況，一是版面中會(huì)多出一些影響版面平衡的空白，但已經(jīng)沒有合適的內(nèi)容可以填充，如果硬塞一些裝飾文字或者圖案，很可能會(huì)弄巧成拙；二是有的區(qū)域小元素小信息比較多、比較散；怎么辦呢？這兩種情況都可以通過該方法解決。
1.把斜線或點(diǎn)重復(fù)排列成一個(gè)矩形，然后把它填充在空白處就可以平衡版面，且不會(huì)造成突兀的感覺，如下圖案例：
提示：線條不宜太粗，點(diǎn)也不宜太大，而且此方法只適合填補(bǔ)小空白，不適合填補(bǔ)大面積的空白。
2.在比較散的元素下方排一組斜線，可以把各個(gè)分散的元素聯(lián)系起來，使其成為一個(gè)整體，如下圖：
背景能很大程度影響版面的設(shè)計(jì)感，這一點(diǎn)你們應(yīng)該都有體會(huì)，常規(guī)的處理方式是把背景作為一整個(gè)色塊，而如果把背景分割成兩個(gè)幾何色塊時(shí)，設(shè)計(jì)感立馬就會(huì)增加不少。
分割的方式好比用一把刀在背景的黃金分割處，劃一條傾斜的直線貫穿版面，使整個(gè)背景一分為二，而這兩個(gè)色塊的顏色對(duì)比要比較強(qiáng)烈。另外，在橫版中用左右分割、豎版中用上下分割效果會(huì)比較好。
增加對(duì)比關(guān)系是加強(qiáng)設(shè)計(jì)感的最有效技巧，我們也可以用此方式來優(yōu)化圖片，如果版面中的配圖是沒有背景的產(chǎn)品或人物，那么在這些圖片上加一個(gè)圓形的色塊，創(chuàng)造出虛與實(shí)的對(duì)比，通常也能得到不錯(cuò)的效果。
提示：
1.色塊可以置于圖片底部，也可以采用正片疊底壓在圖片上方；
2.圓形色塊的邊長(zhǎng)至少要超出圖片寬或高；
3.圖片與色塊要錯(cuò)位排列。
該手法在畫冊(cè)和海報(bào)設(shè)計(jì)中比較多見，跟直接在一段文字下方加一個(gè)大色塊不同，而是要根據(jù)每行文字不同長(zhǎng)度，單獨(dú)加一個(gè)相應(yīng)長(zhǎng)短的色塊，所以這些文字每一行的長(zhǎng)短最好是不一樣的。
這種處理方式可以使整段文字看起來更整體，增加文字視覺沖擊力，而且還能使文字與背景區(qū)隔開，加強(qiáng)文字的識(shí)別性。
提示：
1.段落文字行數(shù)太多或太少效果都不會(huì)太好，3-10行左右為最佳。
2.各個(gè)小色塊可以相互連起來，也可以相互隔開，以實(shí)際效果為準(zhǔn)。
如果你看過的食品包裝夠多，你應(yīng)該能發(fā)現(xiàn)，很多包裝上的產(chǎn)品名稱、廣告語(yǔ)、或者賣點(diǎn)等信息，都會(huì)擺放在一條飄帶上，這么處理的效果通常不錯(cuò)，因?yàn)轱h帶具有禮品、贈(zèng)送的寓意，用在哪里都不會(huì)太唐突，而且飄帶的形式簡(jiǎn)單、有細(xì)節(jié)、變化豐富，很適合用作裝飾元素。
還有一點(diǎn)也很重要，飄帶的形式一般都是柔軟的曲線，這與版面中其他直線元素可以形成鮮明的對(duì)比，加強(qiáng)版面的靈活性。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
即使現(xiàn)在很多 WordPress 網(wǎng)站模板、H5 在線編輯器等等，但網(wǎng)頁(yè)設(shè)計(jì)需求依然非常多，線上編輯器盡管如何智能，但終究也是「模板式」，想完全符合用戶需求的產(chǎn)品還是靠有經(jīng)驗(yàn)的設(shè)計(jì)師來完成。即使是有經(jīng)驗(yàn)的設(shè)計(jì)師，依然是需要不停的找新的設(shè)計(jì)靈感。
事隔一個(gè)月，@dailywebdesign已更新了30+精品網(wǎng)頁(yè)截圖，小編今天再次為大家整理出來，方便大家欣賞，同時(shí)也推薦大家看上一期的《26張很棒網(wǎng)頁(yè)首屏設(shè)計(jì)作品欣賞》。
PS：這些網(wǎng)頁(yè)設(shè)計(jì)案例均來自 Ins 的用戶，并非 Dribbble 網(wǎng)站，所以沒有對(duì)應(yīng)的作品集頁(yè)面鏈接。
Design by: @vladimirbiondic
Design by: @capouska
Design by: @gtamarashvili
Design by: @abaygulov
Design by: Samuel Scalzo
Design by: @ui_ux_joy
Design by: Rono
Design by @rathniley
Design by: @brkrobert
Design by: @kreativa.studio
Design by: @fireart_studio
Design by: Oliwia Przybyla
Design by: @outcrowdstudio
Design by: @tintinsupp
Design by: @ihrvoje
Design by: Catalin Blanaru
Design by: Craig Gittins
Design by: @dannpetty
Design by: @halolabteam
Design by: Chalar Tintin S
Design by: Samuel Scalzo
Design by: @dogstudio_be
Design by: @divan_raj
Design by: @divan_raj
Design by: @outcrowdstudio
Design by: @jan.teschner
Design by: Abhishek Biswas
Design by: Michael Brewer
Design by: Cosmin Capitanu
Design by: @janravendeklerk
Design by: @arendstom
Design by: @capouska
Design by: M S Brar
Design by: @divan_raj
Design by: @syedraju01724
Design by: Yu Long
Design by: @marcocoppeto
Design by: @bestservedbold
Design by: @akasharun4161
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
Adrian Frutiger 是從過去和未來汲取的靈感而設(shè)計(jì)的 Avenir®（avenir在法語(yǔ)里意為「未來」）。Frutiger 在他的設(shè)計(jì)中加入了一種有機(jī)的人文主義元素，將 Avenir 從早期字體僵硬的幾何風(fēng)格中解放出來。
2004年，F(xiàn)rutiger 與 Linotype公司字體設(shè)計(jì)師小林章先生（Akira Kobayashi）一起復(fù)刻了 Avenir字體家族，解決了其屏幕顯示的問題。它就是 Avenir Next。幾何元素與人文元素的結(jié)合使得 Avenir Next字體的易讀性極高，這使其成為汽車HMI儀表盤和顯示器等快速掃視環(huán)境下最理想的選擇。
Burlingame®字體是一種相對(duì)較新的字體，它設(shè)計(jì)堅(jiān)實(shí)，外形開放、清晰，易讀性非常高。這款字體體現(xiàn)了人文主義及手工質(zhì)感，它是根據(jù) Monotype 委托開展的汽車用戶界面易讀性研究所得到的結(jié)果而進(jìn)行的修改，使 Burlingame 成為任何車輛數(shù)字儀表盤的不二選擇。
Burlingame 字體為了滿足汽車顯示器的需求融合了多種特性：平整的切口，銳利的拐角，超橢圓的（super-elliptical）字碗以及寬松的字間距。其簡(jiǎn)單的形狀和深三角形切口還有助于確保小尺寸字體的清晰度和易讀性，尤其是在低分辨率屏幕上。
AdrianFrutiger 是世界知名的字體設(shè)計(jì)師。他的同名字體設(shè)計(jì)獨(dú)具特色，而且用途廣泛。Frutiger®字體最初用于機(jī)場(chǎng)導(dǎo)視牌，在遠(yuǎn)距離及多種角度下閱讀都非常清晰。作為一種經(jīng)典字體，F(xiàn)rutiger 是人文主義無襯線字體的易讀性與具有優(yōu)美幾何線條的早期無襯線字體（Grotesque Sans）的結(jié)合。
Frutiger 因其現(xiàn)代、溫暖的外觀被許多公司和政府采用。這種字體的開放性使其非常醒目，其獨(dú)特的字形避免了與其他字體相互混淆。
Tipperary?是一種單線的人文主義無襯線體，具有清晰、開放的字形。其簡(jiǎn)潔的字符十分易于閱讀，也非常適合數(shù)字UI 顯示。為了制作這款字體，許多經(jīng)典字體設(shè)計(jì)被重新詮釋、組合。于是就有了一款在現(xiàn)代顯示屏技術(shù)受限的范圍內(nèi)仍然表現(xiàn)出色的字體，保留了原有設(shè)計(jì)的比例和形式，使其成為印刷業(yè)的字體。
Tipperary 字形的拐角近似幾何形狀的方形，是快速掃視環(huán)境下（如汽車儀表，顯示器和界面）的最佳字體之一。
Daytona?是由 Monotype公司的 Jim Wasco 遵循易讀性原則而設(shè)計(jì)的一款字體。其方正堅(jiān)實(shí)的字符特征遵循的是人文主義的形狀和比例。Daytona 的字形偏窄，可以最大限度地利用空間而且還可以提高閱讀舒適性。圓潤(rùn)的拐角、開放的字懷以及簡(jiǎn)單的字符形狀使 Daytona 成為 Monotype字體庫(kù)中最易讀的字體之一。
Daytona 字體幾乎在所有的屏幕環(huán)境（包括汽車用戶界面、數(shù)字儀表盤以及GPS設(shè)備）中都能表現(xiàn)得非常出色。
Akko?及 AkkoRounded 字體通常會(huì)用兩個(gè)不太可能放到一起的詞來描述——「工業(yè)的」和「精致的」，這其實(shí)得益于設(shè)計(jì)師小林章先生（Akira Kobayashi）對(duì)最初嚴(yán)謹(jǐn)?shù)墓I(yè)概念的弱化。Akko 這個(gè)名字來源于著名設(shè)計(jì)者名字和姓氏的前兩個(gè)字母。
Akko 設(shè)計(jì)友好且非?，F(xiàn)代化，清晰易讀而且又非常時(shí)尚。Akko 字形的「裸骨」骨架降低了其他設(shè)計(jì)風(fēng)格中出現(xiàn)的視覺擁擠現(xiàn)象。
Mayberry 最初是為了模仿 Tiresias?字體家族的技術(shù)而設(shè)計(jì)的，以便用于機(jī)頂盒電視設(shè)備和用戶界面。比起Tiresias，Mayberry 在美學(xué)和功能方面都有顯著的改進(jìn)。
Mayberry 包含真正的意大利斜體以及多種字重，可以在低分辨率設(shè)備上提供高質(zhì)量的閱讀和最好的可讀性，同時(shí)它還具有一系列能夠吸引專業(yè)人士的 OpenType 功能。Mayberry 是一款字寬被輕微壓縮了的人文主義無襯線字體，這樣可以在較窄的文本欄顯示更多的可讀文本。開放的字懷與垂直的應(yīng)力都有助于在低分辨率的情況下保持Mayberry設(shè)計(jì)的可讀性。
TradeGothic 字體家族是美國(guó)平面設(shè)計(jì)作品的主打產(chǎn)品，自1948年由 Jackson Burke 發(fā)布以來一直不斷地被使用。這一設(shè)計(jì)在國(guó)際上也很受歡迎，而且曾一度被視為 Helvetica ®家族的競(jìng)爭(zhēng)對(duì)手。
2008年的版本名為 TradeGothic Next，這款字體改進(jìn)并擴(kuò)展經(jīng)典系列，還將它引入到一個(gè)流行的新時(shí)代。這種不和諧卻為 Trade Gothic 設(shè)計(jì)增添了一點(diǎn)質(zhì)樸的自然主義色彩，這也是許多設(shè)計(jì)師回歸的原因之一。
TradeGothic Next 是最清晰的早期無襯線字體類型。該設(shè)計(jì)具有開放的字形及寬松的字間距，讓人感覺容易接近，這些都使其在需要掃視的閱讀環(huán)境下表現(xiàn)良好。
Slate 字體家族將出色的功能及視覺的優(yōu)雅融合成一種卓越的交流工具。很少有字體具有這種設(shè)計(jì)的美感和力量。
Slate 是 RodMcDonald 的作品，Rod McDonald 是一位屢獲殊榮的字體設(shè)計(jì)師和刻字藝術(shù)家。在四十年的職業(yè)生涯中，McDonald 參與了加拿大國(guó)家盲人研究所（CNIB）開展的字體易讀性和可讀性研究項(xiàng)目。在那里，McDonald 了解到哪些設(shè)計(jì)特征更適合最大限度地提高字符易讀性及文本可讀性。
Slate 是一款風(fēng)格化的人文主義字體，提供了一種溫暖的視覺體驗(yàn)。即使在具有挑戰(zhàn)性的技術(shù)環(huán)境中，Slate也能為用戶提供舒適的閱讀環(huán)境。
HendrikWeber 的 Unitext字體設(shè)計(jì)清晰、簡(jiǎn)潔，是一款適應(yīng)性強(qiáng)、識(shí)別效率高的無襯線字體，風(fēng)格介于怪誕與人文主義之間。
Unitext 深入研究了設(shè)計(jì)機(jī)構(gòu)對(duì)于品牌字體的需求，以及設(shè)計(jì)師Hendrik Weber 本人為公司定制字體的經(jīng)驗(yàn)。由于了解用于品牌推廣的無襯線字體的流行度，還有它們的缺點(diǎn)，Weber 開始著手創(chuàng)作一些可以適應(yīng)不同環(huán)境但又不放棄友好性的字體?？勺x性也是一個(gè)重要的考慮因素。
Unitext 是一種新型混合風(fēng)格的字體，它具有現(xiàn)代感及前瞻性的外觀，可讀性高，并且極具未來主義的優(yōu)雅。
完美的易讀性。無與倫比的設(shè)計(jì)。
Monotype 的字體創(chuàng)意總監(jiān) Steve Matteson 將這些字體組織到一起來展示一系列可以輕松閱讀，并可以幫助駕駛員在行駛過程中保持注意力的字體樣本。通過為儀表板或HMI 選擇合適的字體，您將能夠確保您的汽車顯示屏清晰易讀，并且擁有觀眾喜愛的無與倫比的設(shè)計(jì)。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
如果您不熟悉iPhone設(shè)計(jì)規(guī)范，請(qǐng)一口吃下本篇文章。伴隨筆記吃下效果更佳：）
iPhone的歷史
每次蘋果發(fā)布會(huì)UI設(shè)計(jì)師可能是最睡不著覺的人啦。每次發(fā)布會(huì)蘋果推出全新iPhone時(shí)，我們?cè)趇Phone平臺(tái)上的APP應(yīng)用程序必須跟隨iPhone的尺寸、規(guī)范等特性調(diào)整設(shè)計(jì)稿。也就是說，幾乎每次蘋果發(fā)布會(huì)都是UI設(shè)計(jì)師加班的通知書！這不，2018年9月13日凌晨，蘋果在Apple Park總部里的喬布斯劇院舉行了2018蘋果秋季新品發(fā)布會(huì)。這次蘋果發(fā)布了全新的iPhone Xs、iPhone Xs Max，iPhone Xr三款手機(jī)。噢，不要忘記我們也不能怠慢還在服役的iPhone X、iPhone Plus、iPhone6/7/8、iPhone SE等蘋果手機(jī)。作為一個(gè)移動(dòng)端UI設(shè)計(jì)師，您必須對(duì)蘋果所有生產(chǎn)過和現(xiàn)役的iPhone有所了解。
起源
談到iPhone我們必須談?wù)勈返俜颉滩妓梗⊿teve Jobs）。盡管喬布斯去世多年，但是他的理念仍然是現(xiàn)代智能手機(jī)設(shè)計(jì)的原則。喬布斯不僅重新定義了智能手機(jī)，也定義了移動(dòng)端應(yīng)用程序。這位被領(lǐng)養(yǎng)的猶太男孩在很早就對(duì)個(gè)人電腦產(chǎn)生了興趣。在游歷了印度和日本之后，他進(jìn)入了大學(xué)校園。在校園里除了無線電和嬉皮士文化，他認(rèn)為大學(xué)課程多半是無聊的。但他曾跑去特意選修了一門課程：字體設(shè)計(jì)。他所在大學(xué)的字體設(shè)計(jì)課是全美最著名的，在那個(gè)課堂上喬布斯學(xué)習(xí)到了網(wǎng)格設(shè)計(jì)、襯線體與無襯線體、字體的氣質(zhì)等設(shè)計(jì)知識(shí)。當(dāng)然在前面講過的具有搖滾精神的字體Helvetica也深深吸引了喬布斯。后來喬布斯選擇大學(xué)肄業(yè)并在自家車庫(kù)創(chuàng)立了蘋果公司，自此“車庫(kù)”也成了創(chuàng)業(yè)者最喜愛的地標(biāo)。蘋果公司的第一代個(gè)人電腦內(nèi)置了非常出色的用戶圖形界面系統(tǒng)（即GUI），并且內(nèi)置了Helvetica等漂亮的字體。但是這并不是喬布斯事業(yè)的終點(diǎn)，在經(jīng)歷了蘋果公司的權(quán)利斗爭(zhēng)后，成熟的喬布斯再次登上發(fā)布會(huì)的舞臺(tái)，推出了真正能改變世界的產(chǎn)品 - iPhone。一般產(chǎn)品名都會(huì)用名字加上產(chǎn)品的類型命名，比如百事可樂、英雄鋼筆等。而iPhone似乎本身就是一個(gè)類別。在那次發(fā)布會(huì)上，喬布斯指責(zé)當(dāng)時(shí)的功能手機(jī)太“愚蠢”：當(dāng)時(shí)的功能手機(jī)性能很差，并且屏幕很小，實(shí)體鍵盤占用了很大的空間。之后，他拿出了一部像外星科技的產(chǎn)品：iPhone。自此，蘋果重新發(fā)明了手機(jī)。喬布斯如此強(qiáng)調(diào)用戶界面和交互設(shè)計(jì)的重要性，這種理念改變了當(dāng)時(shí)和現(xiàn)在的設(shè)計(jì)思維。喬布斯身后，移動(dòng)端的格局在改變，接任喬布斯指揮棒的蒂姆·庫(kù)克和首席設(shè)計(jì)官喬納森·伊夫（Sir Jonathan Paul Ive）也陸續(xù)更新著蘋果手機(jī)的產(chǎn)品線，延續(xù)著這些偉大的產(chǎn)品。
年輕的喬布斯
初代iPhone
相關(guān)產(chǎn)品：iPhone（一代）、iPhone3G（二代）、iPhone3GS（三代）。
iPhone初代產(chǎn)品在2007年1月9日由史蒂夫·喬布斯在蘋果發(fā)布會(huì)上正式發(fā)布。初代的iPhone產(chǎn)品的共同特點(diǎn)是：玻璃屏、屏幕清晰度普通、3.5英寸屏（注意：我們所說的手機(jī)尺寸都是測(cè)量屏幕的對(duì)角線得出的）。iPhone沒有實(shí)體鍵而整體是屏幕的設(shè)計(jì)，在當(dāng)時(shí)仿佛是外星科技降臨一般令人驚艷。為了讓大眾習(xí)慣直接在手機(jī)上點(diǎn)圖標(biāo)（在此之前人機(jī)互動(dòng)都是間接輸入的：比如實(shí)體鍵盤、鼠標(biāo)、觸控筆等），喬布斯發(fā)布了革命性的操作系統(tǒng)iOS，手機(jī)的所有圖標(biāo)都是圓角：這樣可以避免用戶認(rèn)為會(huì)刺到手指。所有圖標(biāo)和界面全部是擬物設(shè)計(jì)，這樣可以更好地讓用戶理解哪些是可以點(diǎn)擊操作的。按鈕在手機(jī)上呈現(xiàn)的大小都是7mm左右，這是因?yàn)槿祟愂种更c(diǎn)擊區(qū)域大概是7mm - 9mm。系統(tǒng)充分地應(yīng)用了多點(diǎn)觸控的功能，你不僅僅可以點(diǎn)手機(jī)里的按鈕，還可以進(jìn)行長(zhǎng)按、滑動(dòng)、捏等手勢(shì)操作。這些用戶體驗(yàn)和人性化的設(shè)計(jì)在當(dāng)時(shí)具有劃時(shí)代的意義。隨后，第二代產(chǎn)品iPhone 3G、第三代產(chǎn)品iPhone3GS先后由喬布斯發(fā)布。這種能聽歌、能打電話、能上網(wǎng)的手機(jī)真是太炸了！而且你可以在應(yīng)用商店Appstore中下載第三方的應(yīng)用程序，海量的第三方程序可謂是大千世界了。這塊3.5英寸屏的手機(jī)截圖出來后的實(shí)際分辨率是480x320px，所以如果你在當(dāng)時(shí)做UI設(shè)計(jì)的話，那么做APP界面建圖的尺寸就應(yīng)該是480x320px。
蘋果初代產(chǎn)品 (2007)
iPhone 4
相關(guān)產(chǎn)品：iPhone 4（四代）、iPhone 4s（五代）。
iPhone 4于2010年6月8日發(fā)布。iPhone 4延續(xù)了iPhone一代的多點(diǎn)觸摸（Multi-touch）屏界面，并首次加入視網(wǎng)膜屏幕、前置攝像頭、陀螺儀、后置閃光燈，相機(jī)像素提高至500萬(wàn)。對(duì)我們?cè)O(shè)計(jì)師最重要的就是加上了視網(wǎng)膜屏Retina。Retina是蘋果提出的標(biāo)準(zhǔn)，它的含義就是在應(yīng)用場(chǎng)景的視距內(nèi)讓人無法看清單個(gè)像素。我們都知道如果你貼的夠近，一般的屏幕上都會(huì)出現(xiàn)一格一格的像素矩陣。屏幕是由這些矩陣組成的。這種屏幕的問題就是稍微近一些我們就能看到那些網(wǎng)格和矩陣。如果我們希望用戶得到最好的體驗(yàn)，自然是讓用戶看不到格子，那怎么辦？答案就是：加大屏幕的密度。如果屏幕的密度到達(dá)一個(gè)指定的水平（當(dāng)然也要取決于用戶的視距，即用戶與屏幕通常離多遠(yuǎn)），那么用戶的眼睛就無法分辨出細(xì)小的像素顆粒了。這種屏幕就被稱為Retina屏，也叫視網(wǎng)膜屏。這是用戶體驗(yàn)的巨大進(jìn)步，但是也是UI設(shè)計(jì)師的噩夢(mèng)。原先的設(shè)計(jì)稿統(tǒng)統(tǒng)需要放大才可以在iPhone4里顯示得完美：比如原來我們一個(gè)界面的尺寸是480x320px，現(xiàn)在因?yàn)槠聊幻芏仍黾恿艘槐?，我們就需要設(shè)計(jì)640x960px才夠用。在電腦上看這個(gè)尺寸要比手機(jī)大兩倍?。ó?dāng)然啦，那時(shí)的電腦屏幕通常不是Retina屏）。而且3GS并沒有完全被淘汰，那么如何讓一個(gè)APP適配兩個(gè)不同尺寸的手機(jī)呢？于是每個(gè)APP內(nèi)預(yù)裝了兩套切圖，一套480x320px尺寸，也就是一倍圖（@1x）；一套960x640px尺寸，也就是二倍圖（@2x）。這兩套圖像資源的命名完全一樣，只是二倍圖結(jié)尾需要加上@2x標(biāo)記它是高清尺寸，比如home_icon@2x.png。
iPhone 4代產(chǎn)品 （2010）
邏輯像素和物理像素
邏輯像素（logic point）：邏輯像素的單位是PT，它是按照內(nèi)容的尺寸計(jì)算的單位。比如iPhone 4的邏輯像素是480x320pt。但是由于每個(gè)邏輯的點(diǎn)因?yàn)橐暰W(wǎng)膜屏密度增加了一倍，即1pt=2px，那么其實(shí)iPhone 4的物理像素是960x640px。iOS開發(fā)工程師和使用Sketch和AdobeXD軟件設(shè)計(jì)界面的設(shè)計(jì)師使用的單位都是PT。
物理像素的單位就是我們常說的pixel，簡(jiǎn)寫成PX。它是我們?cè)赑hotoshop和切圖中使用的單位，屏幕設(shè)計(jì)中最小的單位就是1px不可再分割。使用Photoshop設(shè)計(jì)移動(dòng)端界面和網(wǎng)站的設(shè)計(jì)師使用的單位是PX。在以下的文章中，如果您使用Photoshop設(shè)計(jì)界面，那么只需要記住所有px單位的數(shù)值和支持Photoshop的工具，如果使用Sketch或Adobe XD設(shè)計(jì)界面，那么只需要記住所有pt單位的數(shù)值和對(duì)應(yīng)的工具即可。
邏輯像素和實(shí)際像素計(jì)算方式不同
PPI
PPI(pixels per inch)指的是屏幕分辨率的單位，表示的是每英寸顯示的像素密度。屏幕的PPI值越高，那么這個(gè)屏幕每英寸能容納的像素顆粒也就越多，那這個(gè)產(chǎn)品的畫面的細(xì)節(jié)度也就越豐富。PPI值大于300一般我們就無法用肉眼察覺出屏幕上的“馬賽克”格子了。但是如果屏幕很大，那么需要呈現(xiàn)視網(wǎng)膜屏的PPI值也需要更大，所以iPhone Plus系列的PPI值比iPhone6/7/8要大。PPI在我們?cè)O(shè)計(jì)的工作中其實(shí)關(guān)系不大，但理解它對(duì)于幫助我們理解為什么iPhone4比iPhone3GS實(shí)際像素大一倍有幫助。
PPI的計(jì)算公式
iPhone 5
相關(guān)產(chǎn)品：iPhone 5（六代）、iPhone 5s和iPhone 5c（七代）
iPhone 5于2012年9月13日正式發(fā)布。iPhone5在設(shè)計(jì)上帶來了很多爭(zhēng)議，因?yàn)閕Phone5沒有采用喬布斯認(rèn)為人類最合適的手機(jī)尺寸3.5英寸屏，而是用了4英寸的屏幕。寬度沒變而高度加長(zhǎng)了。這樣做的原因是市場(chǎng)上越大的手機(jī)越受歡迎。當(dāng)時(shí)設(shè)計(jì)師也幾近崩潰，因?yàn)橛忠氵m配了。原來960x640px的尺寸變?yōu)榱?136x640px，但是這個(gè)變化其實(shí)不大，就是高了點(diǎn)兒。于是@2x高清圖的設(shè)計(jì)稿就變成了640x1136px。因?yàn)閕Phone4的手機(jī)看著也就是長(zhǎng)了點(diǎn)兒，滑動(dòng)不就完了嘛。除了閃屏這樣的界面需要單獨(dú)做iPhone4、iPhone5、3GS尺寸之外，其他界面仍然維持兩套設(shè)計(jì)稿即可。
iPhone 5 （2012）
iPhone 6/7/8 和iPhone Plus
相關(guān)產(chǎn)品：iPhone6和iPhone6 Plus（八代）、iPhone 6s和iPhone 6s Plus（九代）、iPhone7和iPhone7 Plus（十代）、iPhone8和iPhone8 Plus（十一代）。
這個(gè)產(chǎn)品迭代周期值得大家留意，從iPhone6到iPhone8這段時(shí)間蘋果新手機(jī)的物理像素都是750x1334px。而所有Plus手機(jī)的物理像素都是1242x2208px。如果按照邏輯像素來計(jì)算，那么iPhone6/7/8的邏輯像素就是375 x 667 pt（就是750x1334除以2）；而iPhone Plus的邏輯像素就是414 x 736 pt（就是1242x2208除以3，因?yàn)檫@個(gè)屏幕太大了視距不同所以屏幕密度更高）。歷史到這個(gè)時(shí)候，原來的手機(jī)全部被淘汰了。也就是說iPhone6/7/8成為了我們的設(shè)計(jì)標(biāo)準(zhǔn)，它的切圖就是@2x，iPhone Plus（1242x2208）使用@3x。從此沒有@1x倍圖了，只存在一個(gè)假想的概念。
iPhone 6/7/8 (自2014)
iPhone Plus (自2014)
iPhone X
相關(guān)產(chǎn)品：iPhone X（十一代）。
這四款手機(jī)全部是蘋果的全面屏手機(jī)。全面屏并不是新概念了，因?yàn)閺膇Phone初代產(chǎn)品開始，手機(jī)業(yè)內(nèi)就在構(gòu)思如何把手機(jī)做成全部都是屏幕區(qū)域的技術(shù)了。但是這個(gè)技術(shù)有很多難題，比如前置攝像頭和聽筒怎么處理。那么蘋果采用的方案是“齊劉?！?，把四周處理成圓角的方式。IPhone X和后續(xù)三款全面屏我們?cè)O(shè)計(jì)師需要注意的就是齊劉海。因?yàn)樾枰?guī)避攝像頭和麥克風(fēng)聽筒，所以導(dǎo)航欄比其他iPhone系列產(chǎn)品要高；而底部Tab欄因?yàn)樽钕路接袌A角同樣比其他iPhone系列要高。而且這兩個(gè)邊界是不應(yīng)該放置任何操作功能的。也就是說只有看的份兒。
iPhone X的物理像素是1125 x 2436 px，而邏輯像素是375 x 812 pt。也就是說如果你使用Sketch或者Adobe XD等工具設(shè)計(jì)界面的話，iPhone X的寬度和iPhone 6/7/8是相同的；只是高了一些。那么如果需要出一套iPhone X效果圖只需要把頭和尾巴替換成新版即可。而如果你用Photoshop設(shè)計(jì)界面的話，寬度變化還是比較大的。需要做放大處理然后單獨(dú)調(diào)整那些亂了的尺寸。
iPhone X(2017)
iPhone XS Max
相關(guān)產(chǎn)品：iPhone XS、iPhone XS Max、iPhone XR（十二代）。
這三款產(chǎn)品的像素分辨率聽上去會(huì)比較眼暈：
iPhone XS Max：1242 x 2688 px
iPhone XS：1125 x 2436 px
iPhone XR：828 x 1792 px
但是如果我們用點(diǎn)的單位看就會(huì)得到：
iPhone XS Max：414 x 896 pt （iPhone Plus分辨率寬度）
iPhone XS：375x812 pt （iPhone 6/7/8分辨率寬度）
iPhone XR：414 x 896 pt （iPhone Plus分辨率寬度）
所以其實(shí)今年發(fā)布的iPhone都是比較友好的，如果使用矢量界面工具那么只需要調(diào)整設(shè)計(jì)稿頭和尾巴即可，如果使用Photoshop的設(shè)計(jì)師需要放大縮小設(shè)計(jì)稿然后調(diào)整頭和尾巴可以得到新版設(shè)計(jì)稿。而切圖其實(shí)和之前沒有變化，不管用什么工具設(shè)計(jì)還是得出兩套切圖：@2x（750x1334px）、@3x（1242x2208px）即可。
iPhone XS Max (2018)
以iPhone6/7/8為基準(zhǔn)設(shè)計(jì)
在開始比賽之前，由于iPhone 6、iPhone 6S、iPhone7、iPhone7S、iPhone8屏幕和分辨率都是一致的750X1334px，所以我們可以稱它們?yōu)閕Phone6/7/8。而iPhone 6 Plus、iPhone7 Plus、iPhone8 Plus、屏幕和分辨率都是一致的1242x2208，所以我們可以稱它們?yōu)閕Phone Plus。而iPhone XS、iPhone X屏幕和分辨率都是一致的1125x2436，所以我們可以稱它們?yōu)閕PhoneX。那這場(chǎng)比賽的贏家毫無疑問是價(jià)格美麗的iPhone6/7/8獲勝啦。那么我們做界面設(shè)計(jì)時(shí)需要按照iPhone6/7/8為基準(zhǔn)設(shè)計(jì)。如果使用Photoshop就建750x1334px尺寸的畫布，如果是使用Sketch或Adobe XD等工具就建立375x667pt。當(dāng)然如果要設(shè)計(jì)首頁(yè)之類的界面，它的界面很長(zhǎng)你可以設(shè)計(jì)一個(gè)長(zhǎng)的設(shè)計(jì)稿，比如750x8000px。
手機(jī)型號(hào)與像素對(duì)應(yīng)圖
HIG設(shè)計(jì)指南
上文說我們建立界面可以根據(jù)750x1334px或375x667pt來建立畫布，但是具體狀態(tài)欄的高度、導(dǎo)航欄的高度、tab欄的高度是多少？那些UIKit組件里的東西去哪里找呢？蘋果已經(jīng)為我們準(zhǔn)備好了多個(gè)格式的規(guī)范了：
資源下載地址：https://developer.apple.com/design/resources/
設(shè)計(jì)方式
在iPhone6/7/8存量仍然很大的情況下，我們做設(shè)計(jì)稿仍然需要以iPhone6/7/8為尺寸來建圖。從蘋果官網(wǎng)下載好UIKit，上面有我們需要的一切元素。這些元素有PSD、Sketch以及XD版本，不管用什么設(shè)計(jì)軟件均可找到對(duì)應(yīng)版本。打開之后你會(huì)發(fā)現(xiàn)蘋果已經(jīng)將我們所需要的規(guī)范元素準(zhǔn)備好了。如果你需要一些彈窗或者控件，那么就在UI Elements里找。如果需要界面的尺寸模板，就在Design Templates找。所有文件都有兩份，結(jié)尾帶有-iPhoneX的是為iPhone X系列設(shè)計(jì)的模板。沒有標(biāo)識(shí)的是為iPhone6/7/8設(shè)計(jì)的模板。
UI Elements 文件夾中的源文件
Design Templates中的源文件
狀態(tài)欄和導(dǎo)航欄
狀態(tài)欄（Status Bars）就是iPhone最上方用來顯示時(shí)間、運(yùn)營(yíng)商信息、電池電量的那個(gè)很窄的區(qū)域。導(dǎo)航欄（Navigation Bars）就是狀態(tài)欄之下的區(qū)域，一般來說導(dǎo)航欄中間是頁(yè)面標(biāo)題，左右是放置功能圖標(biāo)的區(qū)域。
在iPhone6/7/8設(shè)計(jì)中，狀態(tài)欄的高度為20pt（40px）。導(dǎo)航欄的高度是44pt（88px）。這兩個(gè)區(qū)域在iOS7代之后就進(jìn)行了一體化設(shè)計(jì)。所以它們加起來的高度是64pt（128px）。
在iPhoneX設(shè)計(jì)中，狀態(tài)欄的高度為40pt（132px）。導(dǎo)航欄的高度也是44pt（132px）。這兩個(gè)區(qū)域同樣要進(jìn)行一體化設(shè)計(jì)。所以它們加起來的高度是84pt（264px）。這里注意一下，因?yàn)閕Phone X的PPI值為458，所以并不是如iPhone6/7/8一樣1pt=2px換算。
iPhone6/7/8和iPhone X導(dǎo)航區(qū)域的差別
部分優(yōu)秀APP的導(dǎo)航區(qū)域設(shè)計(jì)
大標(biāo)題導(dǎo)航欄
在的蘋果設(shè)計(jì)中導(dǎo)航出現(xiàn)了一種新形式：大標(biāo)題。出現(xiàn)這種形式就是為了減少視覺噪音，讓內(nèi)容更加突出。很明顯大標(biāo)題的設(shè)計(jì)很像報(bào)紙的版式設(shè)計(jì)，在第一眼我們就會(huì)明白頁(yè)面的主題。大標(biāo)題導(dǎo)航欄的高度一般為116pt（232px）：這包括了20pt（40px）狀態(tài)欄的高度，同時(shí)也能放得下34pt（68px）的大標(biāo)題和輔助信息（如返回等圖標(biāo)）。但是注意一下，大標(biāo)題并不應(yīng)該像傳統(tǒng)導(dǎo)航一樣常駐在頁(yè)面之上，因?yàn)樗伎臻g了。所以在滑動(dòng)頁(yè)面時(shí)大標(biāo)題會(huì)變成正常導(dǎo)航欄的64pt（128px）的高度。當(dāng)然如果設(shè)計(jì)稿為iPhone X那么數(shù)值需要另外換算。
大標(biāo)題的尺寸
導(dǎo)航欄圖標(biāo)
圖標(biāo)作為文字的補(bǔ)充，在移動(dòng)端中應(yīng)用非常廣泛。在導(dǎo)航欄區(qū)域上的功能諸如搜索、添加、更多、返回等均需要用圖標(biāo)來表達(dá)。說明：@2x和@3x在邏輯像素單位是一樣的，如果您使用如Sketch、Adobe XD等矢量工具設(shè)計(jì)，可以參照邏輯像素?cái)?shù)值設(shè)計(jì)即可。但是如果您用Photoshop工具以iPhone6/7/8尺寸進(jìn)行設(shè)計(jì)，就需按照@2x下的px單位數(shù)值設(shè)計(jì)。
導(dǎo)航欄圖標(biāo)尺寸規(guī)范
標(biāo)簽欄 （Tab Bars）
Tab就是點(diǎn)擊的意思，Tab欄（也叫標(biāo)簽欄）指的是APP底部的區(qū)域，如微信底部常駐有聊天、通訊錄、發(fā)現(xiàn)、我的四個(gè)圖標(biāo)。iOS規(guī)范中Tab欄一般有五個(gè)、四個(gè)、三個(gè)圖標(biāo)的形式。也就是把寬度平分為五、四、三份。iPhone6/7/8設(shè)計(jì)中，標(biāo)簽欄的高度為49pt（98px）。Tab欄的操作是最常用的，因?yàn)槭种缸罘奖泓c(diǎn)擊而且這個(gè)欄是常駐在頁(yè)面之上的。所以Tab欄的圖標(biāo)至關(guān)重要，因?yàn)楹芏嘤脩艨赡芤驗(yàn)榭床欢畧D標(biāo)而找不到重要功能的入口，通常我們會(huì)在Tab欄圖標(biāo)之下加上11pt（22px）的注釋文字，這個(gè)注釋文字一般來說都是非常淺的淺灰色。
標(biāo)簽欄的尺寸
標(biāo)簽欄圖標(biāo)
我們?cè)跇?biāo)簽欄上的圖標(biāo)一般來說30pt（60px）大小左右，蘋果給出了四種不同形狀標(biāo)簽欄圖標(biāo)的尺寸參考供大家設(shè)計(jì)時(shí)考慮。其意義是讓不同外形的圖標(biāo)看上去是差不多大的，保證圖標(biāo)的平衡。標(biāo)簽欄圖標(biāo)的選中態(tài)應(yīng)該是一個(gè)彩色，來區(qū)別于非選中狀態(tài)。
真實(shí)設(shè)計(jì)中的標(biāo)簽欄
標(biāo)簽欄圖標(biāo)設(shè)計(jì)規(guī)范
標(biāo)簽欄圖標(biāo)應(yīng)該盡量使用清晰地填充風(fēng)格
工具欄 （ToolBars）
我們?cè)谔O果自帶瀏覽器底部就能看到工具欄。工具欄提供了和當(dāng)前任務(wù)相關(guān)的操作和按鈕，在滑動(dòng)時(shí)可以收起。工具欄同Tab欄一樣都是位于底部，但是高度略窄，它的高度是44pt（88px）。
閃屏資源
由于閃屏是一張完整的靜態(tài)滿屏圖片，而不是諸如其他頁(yè)面一樣是由切圖和文本拼成的，所以閃屏的適配更簡(jiǎn)單粗暴：我們需要提供不同尺寸的閃屏效果。閃屏資源就是滿尺寸的一張png，上端不需要狀態(tài)欄里的信息，程序會(huì)在開發(fā)完畢時(shí)自動(dòng)在閃屏中補(bǔ)上狀態(tài)欄里的信息。我們需要提供的閃屏尺寸有：
我們需要提供的閃屏尺寸 一共6張
安全距離
作為iPhone全面屏系列手機(jī)，齊劉海無疑是一個(gè)特征。但是全面屏給我們帶來了使用上的問題：上下左右是圓角、頂部齊劉海使屏幕凹下一塊。所以在帶有圓角和齊劉海的紅色標(biāo)注區(qū)域不應(yīng)該放置任何功能，僅可在上端放置狀態(tài)欄，底部圓角區(qū)域留白。我們界面豎屏使用時(shí)左右臨近手機(jī)邊緣的區(qū)域不建議放任何操作，應(yīng)留出一定的邊距（Margin）。這個(gè)邊距是多少呢？沒有明確嚴(yán)格的規(guī)定，但是一般的APP會(huì)留出16pt-24pt不等的邊距防止用戶在屏幕邊緣不好點(diǎn)擊。不過內(nèi)容展現(xiàn)卻可以呈現(xiàn)在邊距里。如果我們橫屏使用手機(jī)時(shí)，左右同樣不好點(diǎn)對(duì)吧？橫屏同時(shí)還有令人鬧心的“齊劉?！保酝瑯幼笥倚枇舫鲆欢ǖ倪吘鄟?。所以我們就得到一個(gè)安全距離的矩形，內(nèi)容可以完整地呈現(xiàn)在這個(gè)安全距離內(nèi)。
iPhone X系列由于全面屏上下出現(xiàn)不可操作區(qū)域
色彩
其實(shí)在iPhone上顯示的色域要比我們作圖時(shí)的RGB色域要廣。所以在iPhone上設(shè)計(jì)怎樣的顏色都可以。只要符合產(chǎn)品氣質(zhì)并且在色彩心理學(xué)理論上思考，用什么顏色是設(shè)計(jì)師的自由。官方建議的系統(tǒng)色彩如下：
iPhone的系統(tǒng)色
字體
iOS中英文使用的是San Francisco (SF)字體。（下載地址：https://developer.apple.com/fonts
），中文使用的是蘋方黑體。安裝好以后你會(huì)發(fā)現(xiàn)中文蘋方的字族有不少可供選擇的粗細(xì)，那么我們?cè)O(shè)計(jì)界面時(shí)需要根據(jù)信息的邏輯權(quán)重分配粗細(xì)：標(biāo)題應(yīng)該較粗，而說明字體應(yīng)該較細(xì)并且可以設(shè)計(jì)成灰色。其實(shí)字體的設(shè)計(jì)最重要的考量就是信息層級(jí)。蘋果認(rèn)為APP的字體信息層級(jí)有：大標(biāo)題（Large Title）、標(biāo)題一（Title 1）、標(biāo)題二（Title 2）、標(biāo)題三（Title 3）、頭條（Headline）、正文（Body）、標(biāo)注（Callout）、副標(biāo)題（Subhead）、注解（Footnote）、注釋一（Caption 1）、注釋二（Caption 2）這幾種。
HIG對(duì)APP的字體建議（基于@2x）
注意一下，以上HIG的建議全部是針對(duì)英文SF字體而言的，中文字體需要我們靈活運(yùn)用，以最終呈現(xiàn)效果為基準(zhǔn)調(diào)整。在設(shè)計(jì)具體界面時(shí)我們一定要以用戶的使用情景來考慮，把設(shè)計(jì)稿導(dǎo)入手機(jī)去思考行高與字體大小是否是可讀的。10pt（20px）是手機(jī)上顯示的最小字體，最大的應(yīng)該是目前的大標(biāo)題字體了，達(dá)到了34pt（68px）。
啟動(dòng)圖標(biāo)
在設(shè)計(jì)模板還沒有如今這么發(fā)達(dá)時(shí)，設(shè)計(jì)師需要設(shè)計(jì)啟動(dòng)圖標(biāo)（1024x1024px）之后按照程序員的要求切出幾十個(gè)不同尺寸的圖標(biāo)。比如，在手機(jī)中@3x情況下桌面圖標(biāo)尺寸為180x180px，在@2x情況下為120x120px；在應(yīng)用商店圖標(biāo)需要使用的尺寸是1024x1024px；這個(gè)工作太煩人了，好在現(xiàn)在我們只需要專注在啟動(dòng)圖標(biāo)設(shè)計(jì)本身上了。在蘋果給我們的這套資源中，有Template-AppIcons-iOS這個(gè)文件。打開這個(gè)文件，用我們自己設(shè)計(jì)的啟動(dòng)圖標(biāo)替換掉智能對(duì)象里的內(nèi)容，你會(huì)發(fā)現(xiàn)所有尺寸的圖標(biāo)都變成了我們的圖標(biāo)。然后我們把背景隱藏，切出這些圖標(biāo)即可。圖標(biāo)設(shè)計(jì)建議使用AI等矢量軟件，然后使用規(guī)范切出圖像資源。
Template-AppIcons-iOS
控件
控件包括：輸入框、按鈕、滑桿、頁(yè)卡、開關(guān)等，在設(shè)計(jì)模板中已經(jīng)全部列出。這里格外說明一下，為了讓設(shè)計(jì)更符合整體產(chǎn)品品牌調(diào)性，這些控件都可以做成自定義的設(shè)計(jì)樣式。但是會(huì)增加工作量和切圖資源，所以一般我們?cè)谥T如設(shè)置界面這些無需太體現(xiàn)設(shè)計(jì)感的頁(yè)面中都使用系統(tǒng)默認(rèn)控件，而在一些品牌感需要強(qiáng)調(diào)的頁(yè)面或產(chǎn)品（諸如白噪音產(chǎn)品、游戲等）則會(huì)使用自定義的樣式。如果我們想自己設(shè)計(jì)控件，那么注意兩件事：第一，點(diǎn)擊區(qū)域基本符合44pt（88px）原則，也就是在手機(jī)上大小大概是7mm-9mm，適合手指點(diǎn)擊。第二，要設(shè)計(jì)操作的不同狀態(tài)，不要只設(shè)計(jì)一種狀態(tài)。
默認(rèn)控件
自定控件和默認(rèn)控件
控件中無處不在的44pt（88px）
之前我們介紹過，人手指點(diǎn)擊區(qū)域?yàn)?mm - 9mm，在@2x中就是44pt（88px）。蘋果的導(dǎo)航條、列表、工具欄都充滿了44pt（88px）這個(gè)神秘?cái)?shù)字。我們?cè)谠O(shè)計(jì)時(shí)一定也要考慮到手指的點(diǎn)擊區(qū)域。
無處不見的44pt（88px）
鍵盤
在設(shè)計(jì)模板中您也可以找到鍵盤的設(shè)計(jì)。這里需要提醒的是，很多朋友做界面設(shè)計(jì)時(shí)不考慮輸入時(shí)鍵盤會(huì)遮擋到的空間，如果考慮到鍵盤彈起遮擋住的內(nèi)容，那么我們的一些界面中的輸入框和信息可能都需要上移了。當(dāng)然也不是說可能被鍵盤遮擋的地方不可以防止任何內(nèi)容，也有一種方式就是當(dāng)輸入一個(gè)表單時(shí)，頁(yè)面會(huì)垂直定位到當(dāng)前輸入的位置。
鍵盤高度
iTunes 上傳截圖
在程序上傳APPSTORE時(shí)我們需要提供多張APP截圖，供用戶了解APP的功能。很多設(shè)計(jì)師朋友不太清楚這個(gè)尺寸，這里我們需要提供1242 x 2688px和1125 x 2436px兩套截圖。有時(shí)我們也會(huì)在這個(gè)尺寸上做一些設(shè)計(jì)，讓用戶在APPSTORE打開APP介紹時(shí)獲得最好的體驗(yàn)。
ITunes上傳用截圖
工作流程
前期調(diào)研階段
在我們?cè)O(shè)計(jì)界面之前，我們必須做用戶研究來了解產(chǎn)品的調(diào)性，比如用戶研究手段中的用戶畫像、用戶調(diào)研、用戶使用場(chǎng)景分析、設(shè)計(jì)競(jìng)品分析等方法。不管工作再忙也建議大家做這些工作，他們對(duì)我們深入了解產(chǎn)品大有裨益。
原型圖階段
APP產(chǎn)品設(shè)計(jì)首先需要構(gòu)建出原型圖，之后再開始視覺設(shè)計(jì)。這個(gè)工作有些公司是由產(chǎn)品經(jīng)理負(fù)責(zé)的，也有交互設(shè)計(jì)師負(fù)責(zé)的，還有的公司因?yàn)槿耸州^少，也會(huì)出現(xiàn)由UI設(shè)計(jì)師來負(fù)責(zé)的情況。就算有產(chǎn)品經(jīng)理或其他職能人員來完成原型圖，那設(shè)計(jì)師也需要和產(chǎn)品經(jīng)理等人員溝通需求和探討原型圖，并不是產(chǎn)品經(jīng)理向設(shè)計(jì)師下發(fā)需求。設(shè)計(jì)師要站在視覺和交互的角度提出自己建設(shè)性的意見，而不是簡(jiǎn)單等原型圖完成后照著上色而已。關(guān)于原型圖的工具，我們不僅僅可以用Axure RP設(shè)計(jì)原型圖，也可以使用像墨刀、Adobe XD等新工具來完成原型圖。
構(gòu)建APP原型圖（工具：Adobe XD ）
視覺稿階段
視覺稿階段要根據(jù)原型圖確定的內(nèi)容和大體版式完成APP的界面設(shè)計(jì)。但是這里請(qǐng)大家注意一下：目前業(yè)界主要是以Sketch、Adobe XD、Photoshop這三個(gè)軟件來完成APP的界面設(shè)計(jì)的。Sketch和Adobe XD都是以邏輯像素的單位（PT）來設(shè)計(jì)，然后導(dǎo)出圖像的時(shí)候再進(jìn)行放大兩倍三倍來切圖。這樣做的好處是不用在設(shè)計(jì)的時(shí)候小心翼翼地使用偶數(shù)了。而Photoshop由于主要是處理圖像而非矢量圖形的軟件，所以在設(shè)計(jì)移動(dòng)端界面時(shí)如果做成一倍的話切圖會(huì)變得很虛，所以要基于2倍圖來進(jìn)行界面設(shè)計(jì)。比如如果我們以iPhone6/7/8的界面來進(jìn)行設(shè)計(jì)，那么在Sketch和Adobe XD中我們建立的畫布就是375x667pt在Photoshop中則是750x1334px。
視覺稿設(shè)計(jì)階段（工具：Adobe XD）
視覺稿設(shè)計(jì)階段（工具：Adobe Photoshop）
iPhone6/7/8尺寸
在iPhone6/7/8尺寸下，狀態(tài)欄高度20pt(40px)、導(dǎo)航欄44pt(88px)、Tab欄49pt(98px)、導(dǎo)航標(biāo)題字號(hào)建議17pt(34px)、導(dǎo)航欄圖標(biāo)建議22pt(44px)、Tab欄圖標(biāo)建議30pt(60px)、Tab欄圖標(biāo)注釋文字11pt(22px)、左右安全距離建議12pt(24px)。字號(hào)從10pt（20px）到34pt（68px）均可，要視具體情況決定。
在iPhone6/7/8尺寸下的設(shè)計(jì)尺寸
實(shí)時(shí)預(yù)覽你的設(shè)計(jì)稿
我們?cè)赟ketch、Adobe XD、Photoshop等軟件中設(shè)計(jì)界面時(shí)有一個(gè)問題：電腦上的效果總和手機(jī)上呈現(xiàn)的效果不同。這是由于尺寸和觀察方式?jīng)Q定的，所以最好的方式是我們實(shí)時(shí)地查看設(shè)計(jì)稿在手機(jī)上的呈現(xiàn)效果。以下APP通過數(shù)據(jù)線或wifi鏈接電腦后，即可及時(shí)在手機(jī)中看到還沒有保存的設(shè)計(jì)稿呈現(xiàn)在手機(jī)中的樣子。
Design Mirror：可實(shí)時(shí)預(yù)覽Photoshop、XD等設(shè)計(jì)稿
Adobe XD：可實(shí)時(shí)預(yù)覽你的XD畫板
Sketch Mirror：可實(shí)時(shí)預(yù)覽你的Sketch畫板
iPhoneX設(shè)計(jì)效果圖
雖然程序員對(duì)于iPhoneX等全面屏手機(jī)的適配只需要設(shè)計(jì)師提供切圖即可，但很多設(shè)計(jì)師比較青睞iPhone X和XR和XSM等的設(shè)計(jì)效果，也比較愿意把設(shè)計(jì)稿改成iPhoneX的設(shè)計(jì)圖放到作品集或者在匯報(bào)時(shí)展示。那么我們應(yīng)該怎么做呢？如果設(shè)計(jì)稿需要調(diào)整為iPhone X的顯示效果，可以下載iOS 12設(shè)計(jì)源文件，把界面頭和尾替換成iPhoneX專用頭尾——專用頭尾在劉海和圓角處做了留白。Sketch和XD都是用一倍圖設(shè)計(jì)所以不涉及修改尺寸，改頭尾即可。而PS比較復(fù)雜一點(diǎn)：需要先等比例變大整個(gè)設(shè)計(jì)稿，再把寬度改為1125寬度自適應(yīng)即可。PS變大會(huì)虛還得一個(gè)一個(gè)調(diào)一下，然后再改頭尾。
替換導(dǎo)航區(qū)域和Tab欄區(qū)域，即可得到iPhoneX設(shè)計(jì)效果
視覺規(guī)范
如果我們?cè)O(shè)計(jì)完了五六個(gè)主要界面，那么現(xiàn)在做什么呢？APP設(shè)計(jì)一套視覺規(guī)范是非常有必要的，有了視覺規(guī)范我們就可以把控整體的設(shè)計(jì)和語(yǔ)言。一般來說，一套APP應(yīng)該有3-5種主題色和輔助色；5-10種不同變化的字體樣式。這些如果沒有落實(shí)到一套規(guī)范中，那么很容易跑偏。一套移動(dòng)端應(yīng)用的視覺規(guī)范應(yīng)該包括:
主色/輔色/色彩規(guī)范: 規(guī)定APP所能使用的色彩種類；
文字顏色/大小規(guī)范: 規(guī)定APP主要使用文字的大小、顏色、應(yīng)用場(chǎng)景等；
ICON規(guī)范: 規(guī)定APP的icon設(shè)計(jì)規(guī)范;
應(yīng)用圖標(biāo)規(guī)范: 規(guī)定APP的應(yīng)用圖標(biāo)使用規(guī)范；
按鈕和交互態(tài)規(guī)范: 規(guī)定APP內(nèi)所有按鈕和交互態(tài)的樣式；
間距規(guī)范: 規(guī)定APP內(nèi)所有間距的尺寸。
設(shè)計(jì)規(guī)范的重要性
設(shè)計(jì)規(guī)范中的色彩規(guī)范
設(shè)計(jì)規(guī)范的類型可以是png或者多個(gè)頁(yè)面組成的pdf文件。其他設(shè)計(jì)師打開我們制定的設(shè)計(jì)規(guī)范，可以清晰地找到當(dāng)前項(xiàng)目適合使用的元素和字體大小、間距等。這樣盡管是多人協(xié)同工作也可以保證項(xiàng)目設(shè)計(jì)風(fēng)格的一致性。
切圖
有了大小各異的iPhone尺寸，如果程序只有一套切圖，那么一定會(huì)造成有的手機(jī)顯示很差。所以我們要在程序里放置多套切圖，然后讓程序判斷“主人”的手機(jī)是什么型號(hào)，顯示不同的切圖。這樣才能夠完美地呈現(xiàn)給用戶最好的體驗(yàn)。切圖的方法有很多種。Sketch和Adobe XD可以直接導(dǎo)出。Phtoshop不具備這個(gè)功能，但是我們可以使用cutterman、藍(lán)湖等插件導(dǎo)出切圖。不管是自帶功能還是插件，導(dǎo)出切圖都可以導(dǎo)出@2x和@3x圖，而設(shè)計(jì)稿只需要iPhone6/7/8一套即可。
某項(xiàng)目中的切圖文件
Adobe XD切圖功能
在Adobe XD中將需要切出的元素在圖層面板（Ctrl + Y）點(diǎn)擊添加批量導(dǎo)出標(biāo)記記錄；然后點(diǎn)擊 菜單 > 導(dǎo)出 > 所選畫板 > 用于iOS > 導(dǎo)出所有畫板 即可。
Adobe XD自帶切圖功能
使用Cutterman協(xié)助Photoshop切圖
在Cutterman官網(wǎng)下載PS插件后，點(diǎn)擊窗口 > 擴(kuò)展功能 > Cutterman 調(diào)出面板；然后選擇iOS 并高亮選中@3X和@2X；在圖層面板里選中需要切圖的元素，點(diǎn)擊“導(dǎo)出選中圖層”即可。
Photoshop中的Cutterman 插件
使用藍(lán)湖切圖
在藍(lán)湖平臺(tái)可以下載Sketch、Adobe XD或Photoshop對(duì)應(yīng)的插件。然后在不同設(shè)計(jì)軟件插件中將設(shè)計(jì)稿上傳到藍(lán)湖（PS需要用插件標(biāo)記需要切出的元素），然后在藍(lán)湖網(wǎng)頁(yè)版點(diǎn)擊切圖按鈕，選擇視網(wǎng)膜@2x和高清視網(wǎng)膜@3x，再點(diǎn)擊“下載該頁(yè)全部切圖”即可。
在藍(lán)湖平臺(tái)導(dǎo)出切圖
切圖命名規(guī)范
切圖最后需要命名成規(guī)范的格式，這樣方便程序員查找。切圖命名的格式建議全英文，如果大家英文不好需要想辦法提升一點(diǎn)簡(jiǎn)單的詞匯量。借由上述工具切圖后，需要整理切圖命名，或在切圖之前對(duì)圖層命名亦可。以下是切圖元素的中英文對(duì)照：
切圖命名對(duì)照表
然后我們要按照 功能_類型_名稱_狀態(tài)@倍數(shù) 來命名每個(gè)切圖，比如我們導(dǎo)航條上有一個(gè)搜索圖標(biāo)，那么它的名稱就是：
navi_icon_search_default@2x.png
(導(dǎo)航_圖標(biāo)_搜索_正常@2x.png)
iOS開發(fā)語(yǔ)言
作為iOS開發(fā)工程師，最重要的三個(gè)工具是：Obiective-C、Swift、UIKit框架。Obiective-C是目前最有效率的語(yǔ)言；而Swift開發(fā)非常。一般iOS工程師會(huì)在這兩個(gè)語(yǔ)言中選擇一種作為開發(fā)工具。UIKit是蘋果系統(tǒng)自帶的一套框架，這個(gè)框架里有設(shè)置按鈕、滑竿、狀態(tài)欄、電池電量、鍵盤等接口可供調(diào)用。所以我們看到很多第三方APP的界面中，有許多控件和蘋果自帶程序是一致的，這就是UIKit的功勞。
開發(fā)視角 By @alvaroreyes
了解開發(fā)工程師的語(yǔ)言和工具對(duì)我們做設(shè)計(jì)也格外有幫助，我們會(huì)知道哪些效果能做，哪些效果不能做，哪些效果能做不好做等等。我找了大家關(guān)注的九個(gè)問題請(qǐng)教了iOS資深開發(fā)工程師程威：
和iOS工程師溝通
溝通完是不是學(xué)到了不少？我們明白了iOS工程師工作的機(jī)制后再設(shè)計(jì)界面時(shí)就可以做到心中有數(shù)了。在平時(shí)工作中我們也應(yīng)該多和開發(fā)小哥哥聊聊，學(xué)習(xí)一下他們實(shí)現(xiàn)的方式，以便我們的設(shè)計(jì)能夠更好地落地。
標(biāo)注
切圖后程序員得到了什么？一大堆碎片。把這些碎片重新用OC或者Swift構(gòu)建回我們?cè)O(shè)計(jì)的界面并沒有想的那么簡(jiǎn)單。所以開發(fā)工程師可能會(huì)總是在思考構(gòu)架層面的問題，而忽視了視覺還原。并且由于iOS的開發(fā)人員不會(huì)使用設(shè)計(jì)軟件，所以很容易出現(xiàn)比如14pt或者28px的文字，實(shí)現(xiàn)后是16pt或者32px。那就亂了套了不是，那怎么辦呢？我們可以通過一些標(biāo)注軟件把圖標(biāo)之間的位置、字體的高度、字體的大小和色彩進(jìn)行標(biāo)注，讓程序員輕松省力地還原我們的設(shè)計(jì)稿。
藍(lán)湖平臺(tái)自動(dòng)標(biāo)注功能
將Sketch和Adobe XD、Photoshop的設(shè)計(jì)稿上傳至藍(lán)湖后，在藍(lán)湖平臺(tái)每個(gè)頁(yè)面左側(cè)有一個(gè)類似分享的圖標(biāo)，點(diǎn)擊會(huì)獲取一個(gè)網(wǎng)址，這個(gè)網(wǎng)址就是系統(tǒng)生成的自動(dòng)標(biāo)注。它會(huì)自動(dòng)識(shí)別設(shè)計(jì)稿中字體大小和間距等，甚至有代碼參考。
藍(lán)湖自動(dòng)標(biāo)注工具
使用Px像素大廚標(biāo)注
像素大廚同樣提供了自動(dòng)標(biāo)注、手動(dòng)標(biāo)注兩種標(biāo)注方法。自動(dòng)標(biāo)注需要上傳設(shè)計(jì)稿，手動(dòng)標(biāo)注需要設(shè)計(jì)師使用“尺子”來測(cè)量距離、“吸管”來吸取色號(hào)。在界面上部有單位選擇，如果我們給iOS開發(fā)做標(biāo)注，那么單位最好選擇PT，與開發(fā)環(huán)境一致。
像素大廚標(biāo)注工具
“標(biāo)你妹啊”進(jìn)行自動(dòng)標(biāo)注
國(guó)產(chǎn)標(biāo)注在線神器。只需要登錄網(wǎng)站后，上傳設(shè)計(jì)稿可直接生成標(biāo)注網(wǎng)址，發(fā)給程序員就可以啦。同樣提供代碼參考和自動(dòng)標(biāo)注間距尺寸等功能。
在線標(biāo)注工具 - 標(biāo)你妹啊
Markman 手動(dòng)標(biāo)注
Markman同樣是國(guó)產(chǎn)標(biāo)注神器。而且是我使用的第一個(gè)標(biāo)注工具，選用底部工具可以進(jìn)行手動(dòng)標(biāo)注，標(biāo)注后導(dǎo)出png標(biāo)注圖即可。
Markman標(biāo)注工具
動(dòng)效
據(jù)資深iOS開發(fā)程威介紹，目前的iOS主流的動(dòng)效實(shí)現(xiàn)方式有以下四種：第一種，設(shè)計(jì)師給到開發(fā)動(dòng)效視頻或gif，開發(fā)人員照著效果編寫代碼調(diào)用靜態(tài)切圖重新做一遍，這樣的還原度可能會(huì)有問題，需要開發(fā)和設(shè)計(jì)師多溝通。第二種，可以使用序列幀的方式實(shí)現(xiàn)動(dòng)畫，原理是給到開發(fā)按順序命名的png，比如1.png、2.png等，然后用代碼將它們快速替換實(shí)現(xiàn)動(dòng)畫。第三種，我們也可以給到程序員avi等視頻文件直接插入視頻。第四種，使用Airbnb開源的Lottie（https://airbnb.design/lottie/）。具體來說是通過after effects來完成動(dòng)效，然后通過BodyMovin插件導(dǎo)出json文件，里面記錄的就是動(dòng)畫的細(xì)節(jié)，然后在安卓，iOS，React Native上都有一套對(duì)應(yīng)的SDK，來解析這個(gè)json文件來還原成動(dòng)畫。這個(gè)方式的還原度很高，除了部分AE不支持外堪稱完美。其實(shí)還有QuartzCode、CoreAnimator等工具，有興趣的大家可以去嘗試一下。但我認(rèn)為不管使用什么方式，最優(yōu)秀的動(dòng)效還是要靠設(shè)計(jì)師和開發(fā)人員“真誠(chéng)地交流”。
項(xiàng)目走查
當(dāng)我們最終完成了界面設(shè)計(jì)，需要和我們的設(shè)計(jì)稿進(jìn)行對(duì)照還原。除了用肉眼辨別之外，我們也可以把還原后的程序截圖下來放到PS中對(duì)照，尋找問題。那么我們給程序員的反饋就是一個(gè)有截圖對(duì)照和標(biāo)注的文檔，這個(gè)文檔可以成為Buglist。
截圖后可在軟件中對(duì)比尋找問題
項(xiàng)目走查除了判斷視覺還原程度，也要兼顧動(dòng)效、點(diǎn)擊狀態(tài)等動(dòng)態(tài)效果是否符合設(shè)計(jì)預(yù)期。如果有問題需要及時(shí)和技術(shù)反饋，反饋的方式建議是文檔類型，保證有據(jù)可查。
總結(jié)
我們一起來小結(jié)一下：當(dāng)我們?cè)O(shè)計(jì)iOS平臺(tái)的APP時(shí)，我們可以選擇使用Sketch、Adobe XD、Photoshop等工具。為了切圖和適配方便，設(shè)計(jì)時(shí)我們以iPhone6/7/8尺寸（750x1334px或375x667pt）為基準(zhǔn)設(shè)計(jì)。設(shè)計(jì)過程中我們需要通過諸如Adobe XD或Mirror等工具隨時(shí)在手機(jī)上預(yù)覽設(shè)計(jì)效果。之后我們需要把圖像資源輸出成@2x視網(wǎng)膜屏幕和@3x高清視網(wǎng)膜屏幕兩套圖像資源，這時(shí)可以使用Cutterman或Sketch和XD自帶的切圖功能切圖。為了保證開發(fā)工程師能夠完美地還原我們的設(shè)計(jì)稿，我們需要提供標(biāo)注。通過藍(lán)湖或像素大廚、Markman、標(biāo)你妹啊等工具我們可以把設(shè)計(jì)稿完美標(biāo)注給到程序員，這時(shí)程序員就清晰地明白每個(gè)元素的大小和間距了。最后，我們要對(duì)完成的程序進(jìn)行驗(yàn)收。本篇文章寫于二零一八年，按照慣例，每年蘋果都會(huì)舉辦兩場(chǎng)發(fā)布會(huì)發(fā)布新產(chǎn)品。如果后面發(fā)布了新的手機(jī)，也希望大家能夠理清脈絡(luò)，透過現(xiàn)象看到本質(zhì)，找出合適的設(shè)計(jì)適配方法。
參考資料
蘋果開發(fā)者中心網(wǎng)址：
蘋果人機(jī)交互規(guī)范：
https://developer.apple.com/design/human-interface-guidelines/
iOS設(shè)計(jì)資源下載：
https://developer.apple.com/design/resources/
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
可視化不是單純的數(shù)據(jù)展示，其真正價(jià)值是設(shè)計(jì)出可以被讀者輕松理解的數(shù)據(jù)展示。設(shè)計(jì)過程中的每一個(gè)選擇，最終
都應(yīng)落腳于讀者的體驗(yàn)，而非設(shè)計(jì)者個(gè)人。
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
“解密細(xì)膩制作的關(guān)鍵點(diǎn)。深度剖析了色理知識(shí)”
之前說過我要出一個(gè)吉祥物制作的教程，但是其實(shí)這種教程很多，上百度隨便搜一個(gè)就能知道個(gè)大概?，F(xiàn)在是教程泛濫的時(shí)代，今天看一篇明天看一篇，發(fā)現(xiàn)很多換湯不換藥，有種不看可惜看了又很雞肋的感覺。所以我在想我要怎么出這篇教程才會(huì)讓大家有所收獲。
設(shè)計(jì)的進(jìn)階道路，大概分為借鑒，實(shí)操，駕馭，引領(lǐng)。從借鑒到引領(lǐng)這個(gè)過程學(xué)習(xí)、思考、總結(jié)是貫穿的，多實(shí)踐，多總結(jié)才能飛速進(jìn)步，不然有可能你干了5年的設(shè)計(jì)還不如人家干一年來得出色。我總結(jié)了一些原理性的東西給大家一個(gè)啟發(fā)，做東西掌握實(shí)質(zhì)才能一生二，二生n多，然后你就羽化成“大神”、“大濕”了哈。
關(guān)于吉祥物，詳細(xì)步驟教程大家可以看看其他大神的總結(jié)，不過大概步驟是要知道，用些什么關(guān)鍵性的工具也需要爛熟于心。
一、吉祥物制作過程
1、鋼筆勾輪廓（描邊成線稿）
用鋼筆的形狀工具，勾出輪廓，描邊成線稿。要領(lǐng)是需要每個(gè)部分都要畫全，圖層都分好，詳細(xì)命名。
2、面稿上色（隱藏描邊）
隱藏描邊，形狀上色，即成面稿。各自部分需要單獨(dú)做蒙版，然后整體需要建組加一個(gè)形狀蒙版，便于上色，不超出身體部位。
3、剖析光影（這個(gè)可以找一些實(shí)物，或者大神的吉祥物觀察）
常用圖層樣式：眉毛（斜面浮雕）；眼睛（眼白漸變加內(nèi)陰影，眼眶漸變加羽化）；嘴（加兩個(gè)內(nèi)陰影，一亮一暗，內(nèi)部光影用鋼筆勾，羽化）；身體（漸變，暗部正片疊底一個(gè)內(nèi)陰影強(qiáng)化陰影，再內(nèi)陰影一個(gè)細(xì)的環(huán)境光）；衣服（內(nèi)陰影+漸變，加上明暗交界線和衣服袖口的厚度）。
4、靈活應(yīng)用筆刷，不好畫的圓弧用鋼筆勾然后羽化
吉祥物細(xì)膩制作過程中，剖析光影是很關(guān)鍵的。光影細(xì)膩了才能立體生動(dòng)。
二、光影效果總結(jié)
光有明度、方向、色彩等特征。光的反射形成了物體的形象，光讓我們辨別事物，認(rèn)識(shí)材質(zhì)、尺寸和透視。
1、三大面：黑（背光面）、白（受光面）、灰（側(cè)光面）
2、五大調(diào)子：
（1）高光（最亮部分）
不同材質(zhì)的高光強(qiáng)度也不一樣。同樣強(qiáng)度光線的情況下，越是光滑的物體的高光部分越是強(qiáng)；棉、毛、粗糙物體的表面則會(huì)相對(duì)柔和。
（2）中間調(diào)、亮部（本色部分）
一般是物體本身的顏色。
（3）明暗交界線（是最深的部分，刻畫結(jié)構(gòu)）
它深淺的程度跟光線和物體的材質(zhì)都有關(guān)系。光線越強(qiáng)硬度越高明暗交界線越是明顯。比如光滑的金屬對(duì)比是很強(qiáng)烈的。如果是棉毛制品則相對(duì)柔和。
（4）暗部+反光（暗部本色偏暗，反光受環(huán)境光影響，反光強(qiáng)烈時(shí)暗部和明暗交界線重疊）
反光跟光線強(qiáng)弱和材質(zhì)也有關(guān)系，反光同時(shí)也受環(huán)境色的影響。越是光滑的表面受環(huán)境色影響越是大。
（5）投影
同樣投影跟光線強(qiáng)弱和材質(zhì)也一樣有密切的聯(lián)系?？拷矬w的部分通常最深。透明物體投影相對(duì)也弱。
明暗五調(diào)子在深淺變化上有規(guī)律，以明暗交界線為界，在背光部是逐漸亮起來到反光；在受光部是逐漸亮來到高光（輝點(diǎn)）。這被稱為漸變規(guī)律。
光有一個(gè)灰色的球還是不夠的，我們還要了解色彩的基本知識(shí)。插畫中很多插畫師為了先定好精準(zhǔn)的型和光影效果，一般會(huì)先畫黑白稿然后用混合模式疊加顏色上去。混合模式在圖片合成和濾鏡中也應(yīng)用廣泛。下面是我的一些總結(jié)，有點(diǎn)類似理工科的筆記哈，一張表格弄懂混合模式和色彩模式，大家隨便看看。
三、了解混合模式
知識(shí)體系的連接起來有助于我們理解，沒必要去背，理解一下大概心里有個(gè)底，能鎖定自己要用模式的區(qū)域就行。理論是基礎(chǔ)，一切的產(chǎn)出源于實(shí)踐，所以大家一定要好好去實(shí)踐嘗試一下，各種疊加一下，就能弄懂這些模式，就會(huì)覺得這個(gè)神奇而不神秘了。
四、用HSB模式分析色彩
用HSB是基于人眼的色彩模式，是我們最容易理解的，所以我著重在這塊進(jìn)行分析。色相即色彩，只要不是色盲都能看清楚；明暗也一目了然，素描稿可以理解為只有明暗對(duì)比，色相飽和度為0。 但是飽和度夾雜色彩和明暗的時(shí)候就難以分辨。 畫畫用色上中也會(huì)受到一定的干擾。從小畫畫， 基本功扎實(shí)的小伙伴有時(shí)候憑感覺就可以畫出美麗的色彩， 但是現(xiàn)在很多半路出家的同學(xué)就會(huì)發(fā)現(xiàn)難以入手， 所以搞懂我們吉祥物中色彩飽和度的原理就會(huì)順手很多，就可以比較好的應(yīng)用HSB模式。
我的習(xí)慣是用拾色器的色相版面,橫向從左向右，明度一樣，飽和度變高，縱向從從下往上，飽和度一樣，明度變高，所以右上角的點(diǎn)是明度和飽和度同時(shí)最高的點(diǎn)，所以想要取飽和度高的盡量右，想要亮的盡量往上。
在拾色器中還可以總結(jié)出很多用色技巧，以這個(gè)灰度球?yàn)槔宕笳{(diào)子明暗度分別是：92 60 40 62 43 。疊加高飽和混色后（球1）五大調(diào)子明暗度分別是:100 91 73 95 67。疊加高飽和混色后（球2），五大調(diào)子明暗度分別是:100 82 76 100 67。說明顏色疊加上去，可以改變一些明度值，但是整體趨勢(shì)是一致的。所以在疊加顏色值考慮色相和飽和度即可。
疊加高飽和混色后（球2）五大調(diào)子飽和度為：13 62 76 64 68 可以得出結(jié)論就是光照越強(qiáng)（越趨白）飽和度越低，明暗交接線上飽和值較高。
高光一般都是飽和度的，透明材質(zhì)和反光材質(zhì)，明暗交界線飽和度高，反光強(qiáng)，給人一種通透感。（球3）上我用飽和度模式提高了明暗交界線和反光區(qū)域的飽和度，整個(gè)球看起來通透了很多。所以要增加通透感可以增加明暗交接線的飽和度，提亮高光（明度）。
下面是我給灰度球上色的過程。
說了這么多，感覺是不是跟沒看一樣，有點(diǎn)懵。而且大部分吉祥物上色也是直接上色。我講灰度球上色過程你幫助深度理解光影和色彩，而且球會(huì)畫了，其他也不在話下。那我來總結(jié)一些更實(shí)用的要點(diǎn)。
五、吉祥物細(xì)膩刻畫的要點(diǎn)
1、鮮明的對(duì)比,整體的飽和度高
（1）吉祥物彌漫著色彩絢爛的卡通色彩，所以一般采用飽和度較高的顏色。
（2）配色方案可以用對(duì)比色。需要注意的是，背景明度不能太高，否則反光發(fā)揮不出作用，就像我們高光也不會(huì)用純白的，這樣畫面才有張弛。
以下是我對(duì)自己三張吉祥物海報(bào)的色彩分析（除去吉祥物原本的顏色）：
從色盤構(gòu)成的三角形中看每組配色中都有對(duì)比色。除了對(duì)比色還用到了中差色和相似色。在吉祥物中為了拉開顏色的對(duì)比，一般鄰近色作為一個(gè)物體的過度，不會(huì)作為一個(gè)配色方案?；パa(bǔ)色是對(duì)比最強(qiáng)的色組，放在一起，會(huì)給人強(qiáng)烈的排斥感。若混合在一起，會(huì)調(diào)出渾濁的顏色。但是也不是不能用，可以調(diào)節(jié)明度對(duì)比和飽和度對(duì)比來減弱這種排斥感。
對(duì)比色中還包含了一種冷暖對(duì)比，第三張海報(bào)“藍(lán)黃”搭配就是對(duì)比中的冷暖對(duì)比，黃色在藍(lán)色中使整個(gè)畫面更加活潑。
紅色、橙色、黃色--為暖色，象征著：太陽(yáng)、火焰。
綠色、藍(lán)色、黑色--為冷色，象征著：森林、大海、藍(lán)天。
灰色、紫色、白色--為中間色。
總結(jié)：想要顏色豐富又沒有排斥感，可以用對(duì)比色（包含冷暖對(duì)比），再配合調(diào)節(jié)明度對(duì)比和飽和度對(duì)比。
2、假象光源要定好，再加環(huán)境光
（1 ) 在未加入環(huán)境中，一般假象光是左上和正前光相結(jié)合。整體光源源要一致。（2）為了讓吉祥物更加融入場(chǎng)景，應(yīng)該疊加一些環(huán)境光。
（3）環(huán)境光可以加多個(gè)，一般常用的是兩個(gè)一個(gè)高光一個(gè)反光。
（4）光需要有強(qiáng)度對(duì)比，不要兩個(gè)一樣強(qiáng)弱，沒有主次。
3、細(xì)膩度的體現(xiàn)
4、用不慣筆刷可以用鋼筆+羽化
要做一個(gè)柔和的吉祥物，就像c4d做出來的，用“鋼筆+羽化+圖層樣式+蒙版”就夠用了。
如下圖給水滴加環(huán)境色，我們可以用鋼筆畫出輪廓然后根據(jù)實(shí)際情況調(diào)整羽化程度。
同樣的效果，也可以用內(nèi)陰影做出，還可以多加幾個(gè)光?！颁摴P+羽化”比圖層樣式好用的地方是：受限制少，不依靠物體的輪廓，可以隨機(jī)調(diào)節(jié)區(qū)域。
感覺差不多了，我們下次再見！
有人會(huì)問：好幾點(diǎn)沒看懂？
答：評(píng)論問唄。
有人會(huì)說：看了等于沒看！
答：還是謝謝你看了，寶寶會(huì)繼續(xù)走自己的風(fēng)格。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
先看作者簡(jiǎn)介——
朱云彤，早期在金象網(wǎng)負(fù)責(zé)過整體流量運(yùn)營(yíng)，后在快法務(wù)初創(chuàng)期加入后負(fù)責(zé)整體線上運(yùn)營(yíng)體系從0到1的搭建。目前在百度做運(yùn)營(yíng)。起點(diǎn)學(xué)院導(dǎo)師，人人都是產(chǎn)品經(jīng)理專欄作者。
微信公眾號(hào)：互聯(lián)網(wǎng)運(yùn)營(yíng)手札。會(huì)不定期更新工作思考、讀書筆記、運(yùn)營(yíng)案例分析等。個(gè)人微信號(hào)：zytmvp
/ 01 /
“一篇文章梳理清楚品牌下的邏輯框架”
首先，我們要意識(shí)到品牌建立是系統(tǒng)化分階段的工程，每個(gè)階段的玩法都不一樣。我們需要在發(fā)現(xiàn)、認(rèn)識(shí)、喜歡、記住、忘不了五個(gè)大的階段下審視自己公司都有哪些內(nèi)容在同用戶互動(dòng)。根據(jù)公司實(shí)際情況可以選擇自我打造和借力打造兩種形式。
每次項(xiàng)目不僅要關(guān)注內(nèi)容質(zhì)量，還需要結(jié)合當(dāng)時(shí)的大環(huán)境和所發(fā)布的渠道來評(píng)估對(duì)于品牌的影響。通過定性和定量?jī)煞N形式從戰(zhàn)略、評(píng)估、績(jī)效和資產(chǎn)四個(gè)維度去管理研究，不斷為自己的產(chǎn)品提升溢價(jià)和信用的價(jià)值。
這篇文章給我的收獲是品牌不再是看不到摸不著的東西，變得更具象化。工作中我們可以依照框架去建立自己公司的品牌。
/ 02 /
“人生若只如初見，你是如何發(fā)現(xiàn)一個(gè)新品牌的？”
關(guān)于主要原則之一不要急功近利，我認(rèn)為造成急功近利的原因有兩點(diǎn)，一是老板固有的心態(tài)，有任何想法后都想要馬上看到下面人實(shí)現(xiàn)效果。另一方面則是由于大多數(shù)從業(yè)者拿不出一個(gè)像樣的品牌建設(shè)規(guī)劃，去告訴老板會(huì)需要多長(zhǎng)時(shí)間，多少預(yù)算，預(yù)估效果如何。日常工作中也是拍腦袋做。無法教育好老板的結(jié)果自然是被不斷干預(yù)。
大多數(shù)從業(yè)者都是畢業(yè)后誤打誤撞入行的，之前并沒有過系統(tǒng)的理論培訓(xùn)。參加工作后也都是靠著耳濡目染在緩慢的積累，大多數(shù)人根本沒有意識(shí)去系統(tǒng)學(xué)習(xí)相應(yīng)理論知識(shí)。這也是從業(yè)者普遍水平較低的原因，包括運(yùn)營(yíng)、產(chǎn)品、市場(chǎng)等崗位。
抓住每一個(gè)機(jī)會(huì)的思考這個(gè)建議其實(shí)不單適用于做品牌的同學(xué)。不論是產(chǎn)品還是運(yùn)營(yíng)等任何一個(gè)崗位都需要這種嗅覺。只有平常大量的思考和積累才會(huì)在不經(jīng)意間給工作貢獻(xiàn)一丁點(diǎn)靈感。
/ 03 /
“暗示的力量，專業(yè)的品牌感官體系的重要性”
讓用戶在發(fā)現(xiàn)階段更容易發(fā)現(xiàn)和記住品牌是需要我們圍繞完整的感官體系去打磨品牌的。而感官體系又包含看、聽、聞、觸、味等多種維度?，F(xiàn)實(shí)中存在的一個(gè)很大誤區(qū)就是我們總在視覺感官上不斷追求而忽略其他感官的建設(shè)。
比如QQ咳嗽的聲音，HELLO，酷狗等，精裝書的銅版紙等。很多飯店?duì)I造獨(dú)特的氛圍讓顧客覺得很爽也是來刺激整體感官體系。
日常同朋友聊天也是一樣的邏輯，微信上溝通不如通電話，通電話不如見面聊。雙方所能接受到的信息量是完全不一樣的，總見面聚的朋友自然會(huì)比不怎么見面的朋友要更親密。
看、聽、聞、觸、味就是設(shè)計(jì)感官體系的方法論，我們一直在強(qiáng)調(diào)用心做，要。如何呢？如何用心呢？就可以從這個(gè)5個(gè)維度不斷來打磨了。就像是平常上班總忘拿東西，但是每次出門前默念“錢包手機(jī)鑰匙鏈檢查”下就不會(huì)忘帶東西一樣快速形成一種本能。
作者提到“12小時(shí)失明實(shí)驗(yàn)”可以幫忙我們更快的激發(fā)創(chuàng)意。這個(gè)實(shí)驗(yàn)就是很典型的方法論，可以幫忙團(tuán)隊(duì)成員快速創(chuàng)造好的創(chuàng)意，而不是停留在“好的創(chuàng)意靠天賦”這種層面?？吹竭@里我又發(fā)散的思考了以下東西：我們一直講需要團(tuán)隊(duì)成員去快速加深對(duì)用戶和行業(yè)的理解，但是多停留在“同理心”、“換位思考”這種概念層面上。
其實(shí)每個(gè)團(tuán)隊(duì)真正應(yīng)該做的是不斷打磨工作流程，比如新人入職為期一周的業(yè)務(wù)培訓(xùn)中必須加入電話銷售、客戶拜訪、處理投訴等環(huán)節(jié)。所有成員每個(gè)季度都要再輪崗一遍等。這些流程的擬定其實(shí)很簡(jiǎn)單，更重要的是讓團(tuán)隊(duì)成員有意識(shí)主動(dòng)去做，因?yàn)閳F(tuán)隊(duì)成員沒有這個(gè)意識(shí)，再多流程只會(huì)流于表面。這就又涉及到招對(duì)人的重要性的話題了。
/ 04 /
“取名是一門學(xué)問”
品牌名的重要性不言而喻，在遵循這些基本技巧和忌諱下，應(yīng)該做的就是讓團(tuán)隊(duì)每個(gè)成員想出數(shù)十個(gè)名字，然后找大量的朋友，最好也是目標(biāo)服務(wù)群體去投票。在取名環(huán)節(jié)投入再多精力都不為過。
另外，商標(biāo)、域名、政策因素也是起名時(shí)需要重點(diǎn)考慮的因素。一定要把多個(gè)候選的品牌名綜合商標(biāo)查詢和域名查詢的結(jié)果再做決定。
任何品牌想要做大都必須注冊(cè)商標(biāo)，沒有商標(biāo)注冊(cè)證就開始推廣后期有很大的隱患。后期改名或者買商標(biāo)的費(fèi)用都很貴，IPAD、喬丹、加多寶、非誠(chéng)勿擾的案例都足以說明。
域名也是一樣，京東高價(jià)買JD.COM就是最好的案例。好的域名不僅可以增加用戶直接輸入網(wǎng)址的可能性，節(jié)省大量流量費(fèi)用，也可以借助域名稀缺性的特性為公司增加信任度。
政策原因是考慮可能引起的歧義被迫改名或不必要的麻煩，記得有看到案例說是愛奇藝之前是叫奇藝，因?yàn)橹C音的問題被迫改名，雖不知真假，至少多留意沒有壞處。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.yvirxh.cn
