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