如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

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/

蘋果人機交互規范：

https://developer.apple.com/design/human-interface-guidelines/

iOS設計資源下載：

https://developer.apple.com/design/resources/

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

目錄：

• 警告框與操作表
• 標簽欄與操作欄
• Tabs與分段控件
• Toast與Snackbar

一、警告框與操作表

1. 定義

警告框：是一種操作上的確認，只有當用戶點擊按鈕后才算真的完成，才可以有其他操作，主要作用是警告或提示用戶的。

警告框由三部分組成：標題、正文、按鈕。有些簡單的警告或提示只有正文和按鈕即可。

操作表/ActionSheet：操作表通常會從屏幕底部邊緣向上滑出一個面板，可提供2個以上的選擇。呈現給用戶的是簡單、清晰、無須解釋的一組操作，沒有正文的描述內容（大部分）。另外重要的功能操作也會用紅色文字展示。

2. 如何選用？

文字內容的重要性

文字內容的重要性：選擇警示框和操作表時，要考慮的是兩個彈窗文字內容對于用戶的重要程度，如果內容極為重要則選用警示框，如果文字內容不重要甚至不需要描述文字我們就應該選擇操作表。

案例：如下圖，淘寶登錄密碼錯誤時，由于警示框更重要的是文字內容的體現，幫助用戶找到問題所在，所以選用警示框。再看 QQ郵箱的垃圾箱中點擊全部清空時，由于信息本身就在垃圾箱內，不需要對用戶過多的文字提示，用戶直接操作即可，所以最后選用操作表。

用戶操作流暢性

用戶操作流暢性：當我們需要讓用戶停止操作并必須點擊當前界面的按鈕時，要選擇警示框，警示框對用戶操作上的流暢性有著很嚴重的影響。如果不需要太過強硬，我們就選用只需在屏幕中任意位置點擊就會消失的操作表。

數量

數量：這是最容易區分使用的方面，當彈窗中的按鈕數量超過2個時我們一定選用操作表，因為警示框的按鈕數量不可以超過兩個。如果數量一樣，可以根據上面兩點擇優使用。

案例：如下圖，我們在得到App 中點擊開通「推送通知」時，因為操作按鈕只有一個，所以選擇警示框。而點開微博中的更多按鈕，用的則是操作表，因為操作按鈕有三個。

二、標簽欄與工具欄

1. 定義

標簽欄：標簽欄位于屏幕底部，它是懸浮在當前頁面之上的，并且會一直存在，只有當用戶點擊跳轉到二級菜單后才會消失。用戶可以在不同的子任務、視圖和模式中進行切換，并且切換按鈕間都屬于不同的內容。

當用戶選中某個標簽時，該標簽呈現適當的高亮狀態。數量也有限制，不能超過5個，如果存在5個以上的標簽可以將最后的標簽設計成「更多」標簽。

工具欄：工具欄同樣位于屏幕底部，懸浮在當前頁面之上的，并且當用戶不需要使用的時候，可以隱藏它。例如向上滑動界面時，工具欄會自動隱藏。工具欄的內容主要是對當前頁面的相關操作按鈕。

2. 如何選用？

切換狀態

切換狀態：當我們需要同級別界面切換時，應該選擇標簽欄，同時標簽欄的切換通常為一級導航，工具欄的功能僅針對當前界面內容的相關操作。

案例：如下圖，微信讀書底部欄中是關于同級別的視圖切換，所以選擇標簽欄，同時標簽欄也常用于產品的一級導航。而 Safari瀏覽器底部的內容是針對當前界面的操作功能，所以使用了工具欄。

位置狀態

位置狀態：當底部導航始終在界面最上方時，上下滑動都不會消失，則選擇標簽欄；如果底部導航上滑隨之消失則選擇工具欄（說明：也有少數的工具欄是怎么滑動都不會消失的）。

案例：如下圖，我們來看看百度的 App，當我向上滑動界面時，底部導航的位置是不會消失的，所以使用了標簽欄。再看 Safari瀏覽器，因為上滑時底部欄會被隱藏，所以選用了工具欄。

選中狀態

選中狀態：當用戶選中底部某一項時，如果需要高亮顯示且顯示的內容是不同子任務的視圖，則使用標簽欄；而當選擇后，出現操作表等與當前界面相關的操作時，應該選擇工具欄。

案例：如下圖，我們還是來看百度App，當我點擊底部的選項時，切換的同時，當前選中的「好看視頻」需要變成選中的樣式，來告知用戶當前選中的是那個界面，所以使用了標簽欄。再看 Safari瀏覽器，點擊底部按鈕后出現操作表且當前選中的按鈕也不會變高亮，因為不會在當前切換界面，所以選擇了工具欄。

三、Tabs與分段控件/Segment Control

1. 定義

Tabs：Tabs 來自 MD規范，早在 Android 2.0時代，官方的通訊錄App 就使用頂部 Tab導航，可以滑動切換不同視圖。Tabs 里 Tab 呈現的內容可以有很大的差別，而且數量沒有限制，Tabs 不能作為表單的單選組件。

分段控件：iOS 原生控件之一，每個分段作用是互斥的，在分段控件里，所有的分段選項框在長度上要保持一致，同 iOS規范中對于分段控件的分段選項不得超過5個，每個分段選項可以是純文字或者圖片。

2. 如何運用？

來源不同

來源不同：分段控件來自 iOS規范，而 Tabs 來源于 MD規范。

案例：如圖我們來看 iPhone 的日歷界面點擊收件箱，因為是 iOS系統配置的應用，所以界面中切換樣式用的是分段控件，而反觀安卓系統則用的是 Tabs切換。

內容不同

內容不同：分段控件主要起到分割和篩選同類數據，而 Tabs 則沒有這樣的限制，Tabs 里的每一項所呈現的內容可以有很大的差別。另外分段控件更多的是以單選功能出現在表單的使用中，而 Tab 則不能作為表單的單選組件。

案例：如下圖鯊魚記賬中的圖表頁，支持、收入為整個界面展示項目，為了讓用戶查看起來更加方便，把數據分割為周、月、年的不同的數據展示，因為是同類數據切換，所以選擇了分段控件。反觀36氪首頁的 Tabs欄，由于每個內容的差別都很大，所以使用了 Tab欄展示。

操作方式不同

操作方式不同：分段控件需要點擊操作，而 Tabs 除了點擊外還可以通過左右滑動切換不同視圖。

案例：如下圖，網易錢包App 界面中的切換控件，因為在表單中且是極為近似的數據圖，不易讓用戶側滑屏幕切換，需要讓用戶更精準的點擊選擇。所以使用了智能點擊的分段控件，而優酷視頻的切換頁變化都比較明顯，很容易區分，所以選擇了可以側滑屏幕切換的 Tabs。

數量

數量：分段控件數量不能超過5個，而 Tabs 沒有數量限制。

案例：如下圖網易云音樂中的消息界面，界面中因為分類的數量未超過五個（不是所有未超過5個的就要用分段控件，同時也要根據以上說的其他三種情況判斷，這里只針對數量闡述而已），所以可以使用分段控件，而網易云音樂視頻界面中因為分類數量過多且內容上有區別所以選擇了 Tabs。

四、Toast與Snackbar

1. 定義

Toast：Toast 通常出現在頂部和中部，浮于頁面上方，無法對其操作，出現一段時間后便會消失，并且在此期間不影響其他正常操作。

Snackbar：Snackbar 出自于安卓系統，是安卓系統的特色彈窗之一。它是由一段信息和一個按鈕組成，他們會在超時或者用戶在屏幕其他地方觸碰后自動消失。Snackbar 可以在屏幕上滑動關閉。Snackbar 不會妨礙用戶對產品的其他操作。

2. 如何選用？

操作不同

操作不同：Toast 彈窗沒有任何操作鍵，而 Snackbar 是有操作鍵的。

案例：如圖馬蜂窩App 中給作者的文章點贊功能只需要告知用戶，點贊已成功即可，不需要其他操作，所以選用 Toast彈窗。而攜程中當進入酒店界面時，除了告知用戶下面還有更多信息外，還想引導用戶直接查看，所以選用了帶操作功能的 Snackbar。

退出狀態不同

退出狀態不同：Toast彈窗完全是通過超時后自動消失，不存在任何操作，而 Snackbar 可以超時消失也可以用戶主動上滑關閉。

案例：如下圖豆瓣App 廣播界面中，當我點擊換一批后，換好的內容會自動刷新到最前面，所以用戶不需要任何操作就可以看到內容，就可以選用無操作必須等待超時后才會消失的 Toast彈窗。

而攜程App 中的酒店界面，因為更多精彩的內容在下面，并沒有展示出來，為了不讓用戶在滑動瀏覽時造成視覺障礙。所以選擇了 Snackbar，除了超時后自動關閉外，也可以通過滑動界面讓彈窗主動關閉。

組成元素不同

組成元素不同：Toast彈窗主要是由文字和背景組成，也可以額外附加圖標。而 Snackbar 除文字、背景，圖標外還有操作鍵組成。

案例：如下圖得到App 中只需要提示用即可，所以選用 Toast，組成元素選用背景+文字+圖標，而小紅書App 需要加入操作鍵，所以選擇了 Snackbar。

總結

通過上面的分析，大家是不是對這八個組件有了更深的理解呢？

每個組件都有不可替代的作用，如果大家還有哪些不清楚的組件對比可以在文章下留言，之后我會選擇一些整理出來再次和大家分享，感謝大家的耐心閱讀。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

當我們看到一件設計作品的時候，映入眼簾的先是配色，然后才是其他的內容，配色的好壞，直接決定了我們對這個作品的第一印象。

當然，選中一個合適的配色絕不是一個偶然的事兒，這其實是一項系統的工作，只有知己知彼，把色彩研究透了，才能運用的得心應手。

以下幾個方面也許就是經常困擾你的點：

• 想要表達的設計思想不知道怎么去選取合適的色彩；
• 缺少對色彩全面的認識；
• 對配色沒有一個系統的搭配方法；
• 不懂得如何提高對色彩的敏感度。

接下來，我會分幾個部分，來聊一聊色彩及配色。

一、認識色彩

1. 色彩理論

開始理解色彩，必然要提到色彩三要素，色相、純度、明度，這是最基本的概念，我就簡單的以三張圖概括下：

色相：指的就是紅色、綠色這些色調的稱呼。

純度：指色彩的鮮明程度。

明度：指色彩的明亮程度。

而色相又大體上可以分為冷色系和暖色系。

二、色彩印象

在進行配色實踐之前，關于色彩本身的理解十分重要，在理解色彩獨特的性質之后，才能進一步學習更有效的配色設計技巧。

點綴我們生活的各種色彩，都具有影響人類心理、情緒、感覺的力量，下面展開介紹一些代表性的色彩印象。

1. 紅色

紅色既有積極的一面，也有消極的一面，在考慮如何用其他顏色去搭配紅色之前，先想想想要紅色在整個作品中表現什么？

屬于紅色的關鍵詞有：熱情、興奮、能量、愛、華麗的、輝煌的、生命力、主動性、活力、激情、辛辣的、炙熱的；憤怒、危險、攻擊性的、暴力性的、嫉妒、壓力、壓迫感、刺激的等等。

如果想要表現紅色積極性的一面，最好使用泛黃的大紅色或者明度較高的粉紅色系的顏色。泛黃的紅色比100%紅色更能夠表達溫暖的感覺，而在粉紅色系中，泛黃的暖粉紅色比泛紫的冷粉紅色更能傳達出積極的印象。

相反，如果想要表現紅色消極性的一面，使用泛紫的紅色比較好。紅色和紫紅色中間的色系給人冷淡、不自然的感覺。這些色彩的明度越低，越給人不自然的和消極的形象。

下面舉幾個紅色配色的案例。

上面這幅作品，設計師想要傳達出「危險」「壓迫感」的情感信息，塑造一個難民的形象，整個配色以紅黑搭配，更顯深沉。

紅色也有著「華麗感」和「刺激感」，大面積的紅色做為底色，凸顯出畫面中的人物形象，很好的詮釋優雅和成熟。

2. 橙色

每種顏色都會有某種情感偏向，而橙色的情感是非常曖昧的，這種曖昧感使得它比紅色更加溫和，比黃色更加老練，即它有一種中性的魅力。

屬于橙色的關鍵詞有：活躍、溫暖的、喜悅、開朗的、朝氣蓬勃的、明快的、躍動的、親近的、豐收、健康的、輕快的、明朗的、樸素的、安心的、溫和的；任性的、歇斯底里的、嘈雜的、廉價的等等。

同屬于橙色系的色彩，實際上給人的印象是完全不同的。鮮明的橙色富于年輕感，而偏褐色的橙色更具有復古感。

下面舉幾個橙色配色的案例。

以大面積的橙色做為底色，搭配高飽和度的黃色，這些色彩的「溫度」都很高，很好的表現出了橙色「朝氣蓬勃」的感覺。

將橙色的明度適當降低，搭配上「厚重」的紅褐色，很好的展現除了橙色鮮明的個性。

飽和度高的色彩難免會表現出「廉價」的氣息，畫面中的橙色、黃色、藍色、紫色，飽和度都偏高，很好的展現了作品的「銷售屬性」。

3. 黃色

誰都無法否定黃色帶來的溫暖，因為它就是太陽發出的光，黃色就是光，它也被稱為「光之色彩」。而作為光的顏色，黃色可以作為挽救黯淡色調的救世主，賦予畫面更多活力。

屬于黃色的關鍵詞有：明亮的、集中精神的、健康的、幽默的、希望、開放感、未來、寬厚的、輕快的、幸福、純潔、明快、知識、權威、非正式的、可愛的、繁華的；幼稚、不成熟、警戒等等。

泛橙色的黃色比原色黃更能營造柔和溫暖的氛圍，這種平和積極的印象更能表現親切多情的感覺。

泛綠的黃色偏冷，給人感覺冷漠。在原黃中加入白色和黑色的話，黃色本身的明亮的光感和暖意就會消失，變成偏冷的色彩。

下面舉幾個黃色配色的案例。

黃色的最「暖」的顏色，它很好的體現了色彩的「輕快感」，采用黃色為主色調，使得整個畫面都「明亮起來」了。

這是一個以黃色為主，黑色為點睛色的配色，使用黃色超強的表現力，和黑色這種冷色搭配表現出「強烈刺激」的對比。

黃色同時也是小朋友最喜愛的顏色之一，高明度的配色，整體呈現出「可愛」和「童稚」的感覺。

4. 綠色

綠色作為大自然的主旋律，能帶給人安寧舒適、生機勃勃的感覺。同時，綠色也是一種存在感極強的顏色，雖然是最為普遍的存在，但也是很難和其他的顏色搭配。

屬于綠色的關鍵詞有：自然、和諧、平衡、健康的、和平、治療、新鮮、安逸、安心、安定、和煦的、誠實的、樸素的、放松的、年輕的、平等、公平、安全；不成熟、帶有鄉土氣息的等等。

自然界的綠色是多種多樣的，雖然看上去都是綠色，卻可以有青蔥的嫩綠，松針的草綠，清亮深邃的青綠色，落葉的橄欖綠等。這些顏色各有各的感覺。

下面舉幾個綠色配色的案例。

綠色是最「自然」的顏色，會讓人不禁想起田園和植物，綠色和藍色的搭配，沒有強烈的對比感，倒顯得畫面更加「樸素」。

綠色搭配黑白灰，毫無異議的顯得干凈利落，上圖中的綠色作為點睛色，平衡了黑白的單調，而這里的白色和綠色都趨向于輕薄，因此需要用深黑，以加強色彩的力量感。

綠色與偏暖的黃色搭配時，重要的是要強調兩者之中的一個，在上圖中的主色為綠色，點睛色為黃色，突出強調作品中的畫面感。綠色的飽和度較低，與部分黃色相得益彰地變為了背景，輔助突出了點睛色。

5. 藍色

在很多最愛顏色的民意調查中，藍色都是最受大家喜歡的顏色。藍色的原始記憶來自天空的廣闊和大海的深邃。它有涼爽、神秘和寂靜的感覺，同時又能塑造出特別的親和力。

屬于藍色的關鍵詞有：穩重、鎮靜、冷靜、爽快、清爽、清涼感、信賴感、沉著、知識性、清潔的、成功的、男性的、理性、誠實；憂郁、孤獨、荒涼、悲傷的、保守的、消極的等等。

如果要強調藍色的積極印象，越貼近綠色的藍色越好。但是，即便純度較低，明度高的藍色也能表現出明朗和積極的氛圍。

下面舉幾個藍色配色的案例。

提起夏天，我猜你想到的肯定是藍天、大海，明度稍高的天藍色，搭配深藍色，充分體現了夏天的「爽快」與「清涼感」。

同時，藍色也是極具商務個性的顏色，很多企業都選擇藍色做為品牌色，它也代表著「信賴感」和「成功」。

「藍色是憂郁的」，靜謐的夜晚，帶來「孤獨」與「荒涼」。

6. 紫色

在商業設計中，紫色被認為是一種優雅高檔的色彩，常用于表現商品的奢華和高貴，同時也是很多藝術家喜愛的顏色。

屬于紫色的關鍵詞有：高貴、典雅、高尚、優美、風度、尊嚴、干練、神秘、秘密、心性、性感的、豪華的、華麗的、改觀的；不安的、悲傷、孤獨、嫉妒、自負、不健康、病弱等等。

紫色帶有暗色的特質，所以明度稍微低一點就容易給人以沉悶的感覺。因此，紫色在與其他色彩配色時，盡量選擇明度較高的紫色。

下面舉幾個紫色配色的案例。

紫色是「神秘」的，紫色本身是「冷暗」的顏色，所以與純度高的色彩配色會強化紫色的冷暗感。

要用紫色來表現優雅、高貴等積極印象時，要特別注意純度的把握。這種情況下，低純度的暗紫色比高純度的亮紫色更能傳達積極的印象。

紫色靠近藍色，所以紫色也有帶有「孤獨」和「悲傷」的調性，藍紫色系的紫色更容易傳達消極的感覺。

7. 白色

提起白色首先想到的純潔，給人干凈的感覺，它不會有強烈的個性，但是白色是永遠的流行色。

屬于白色的關鍵詞有：清潔、純凈、清澈、正義、善良、和平、凈化、誠實、勝利、真實、簡約；空虛、變幻無常的、孤獨、失敗、離別、死亡、寒冷。

無印良品的產品一直注重「純樸」、「簡潔」、「環?！?、以人為本等理念，在包裝與產品設計上皆無品牌標注，但是卻讓人牢牢的記住了它。

大面積的白色顯得「空虛」，加上藍色的點綴，畫面更顯得「孤獨」和「寒冷」，將白色的負面情緒表現的更淋漓盡致。

8. 黑色

當所有的光線都被吸收了，感覺就是黑色， 是一種具有多種不同文化意義的顏色，和白色一樣也是永不過時的顏色。

屬于黑色的關鍵詞有：嚴肅、厚重、威嚴、神秘、高級感、充實、富裕、正式的、時髦的、硬的、重的；收縮、黑暗的、陰郁、邪惡、黑夜、恐怖、壓抑、絕望、死亡、自卑、不安。

在畫面中以黑灰色為底色，加上磨砂質感，突出了自行車的「高級感」。

黑色的背景加上壓暗的人物形象，一種「力量感」油然而生，人物的形象也是凸顯了整體畫面的氛圍。

總結

顏色無所謂美丑，我們對于顏色的判斷完全是一種主觀的經驗，這個作品配色的好壞，并不是取決于這個顏色的好不好看，而是這個顏色適合不適合這個作品要傳達的意境。

我們必須摒棄舊有的對顏色的判斷，排除自身受到的社會文化的觀念影響，從一個全新的眼光來研究色彩。只有在充分了解每一種顏色的色彩印象，才能消除你對配色的迷惑與不安。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

本文教你用仿型和破型的思路，掌握各種插畫風格。

不管是 UI設計中還是營銷活動中，插畫都有很高的出場率，原因并不復雜：插畫比起圖片可控性更強，更容易發揮創意，營造氛圍，傳遞信息。從內容到技術細節，插畫都在某種程度上超過現成的圖片。

作為視覺設計師，我們也常常會接到各種各樣的需求，針對不同的項目和產品繪制插畫，往往項目時間緊張但又需要在插畫展示上有差異性。

但看著網上風格各異的插圖，往往想學習卻又無從下手，該怎么辦？

下面我將從仿型和破型兩個角度來闡述，如何快速掌握風格各異的插畫。

△ dribbble上形式各異的插畫 圖片來源：dribbble

一、仿型

仿型，可說是一個模仿、練習的過程。選擇喜歡的插畫作為學習對象，拆解畫面構成元素，總結代表性特征，了解其思考方式，是一種理解原作者繪畫思路和想法的過程。

我們從形式上來說可以將一張插畫拆解為5個構成元素：構圖、造型、素描關系、配色和肌理。

1. 構圖

構圖是一張插畫的骨架，各個元素按照設計的位置、大小排列在畫面中，就能形成一張畫最基礎的模樣。概括來說，最基本的構圖有如下這么幾種：

環型

環形構圖是非常常見的一種形式感很強的構圖，往往畫幅中心存在一個視覺焦點，圍繞視覺焦點發散/聚攏元素。

對稱

對稱構圖的畫面中存在一個軸線，畫面元素圍繞軸線兩邊對稱。這種對稱既可以是追求強形式感的絕對對稱，也可以是形成一種視覺平衡的動態對稱。

平鋪

平鋪構圖的畫面往往不存在一個明確的視覺中心，所有的元素均勻的充滿著畫面，強調整體的統一性。

S型

S型構圖是非常常見的一種構圖方式，形式靈活多變，相信很多接受過素描靜物訓練的同學一定對此不陌生。S型構圖重點不在于元素的布局是「S」或是「Z」，而是利用錯位布局，營造空間，增強畫面的節奏感。往往 S型構圖有著明顯的層次關系，元素在空間上可以分為前、中、后景。

2. 造型

同樣的元素，在不同的設計師手上畫出的感覺一定是不同的，一個插畫師最明顯的風格特征也往往體現在造型的獨特性上。造型的類別是無法枚舉的，寫實或抽象、松弛或硬朗、精細或概括……對造型感的提升需要我們多看優秀的作品輔以大量的練習。

△ 風格迥異的人物造型 圖片來源：dribbble

3. 素描關系

素描關系這個詞想必大家不陌生，嚴格來說它也是造型的要素之一，單獨提出來是方便大家更好的理解。素描關系由高光、灰部、明暗交界線、暗部、反光、投影組成。一個元素加哪幾種素描關系，怎么加，加在哪，什么肌理，都能左右一張插畫的視覺風格。一般來說，對素描關系處理的越多，畫面會有更多的細節，更趨近于寫實。

△ 對同一元素素描關系的增減

4. 配色

人類的視覺感知系統，對于顏色是第一位的，其次是形狀。插圖的顏色往往能決定觀者的第一印象。對于配色，我們需要注意兩點：

顏色的配比

決定畫面整體色調的顏色，一般占畫面60%以上，余下有30%的輔助色，10%的點綴色。這并不意味著畫面中只能出現三個顏色，但是三個緯度的顏色需要盡量在色相上保持接近。

顏色的對比

一張插畫中，一定蘊含著色彩的對比。

我們知道顏色三要素是：色相、明度、純度。相應的對比也分為色相的對比，明度的對比，純度的對比，當然更多時候是混用的。對比的作用有很多，較強的對比可以使得你的畫面更富層次感和視覺沖擊力，較弱的對比則營造一種柔和自然的感受。

△ 不同類型色彩對比營造的畫面 插圖來源：dribbble

5. 肌理

肌理本是指物體表面的組織紋理結構，即各種縱橫交錯、高低不平、粗糙平滑的紋理變化，是表達人對設計物表面紋理特征的感受，是一種三維的概念。在這里，肌理所指的含義與質感相近，是一種二維概念。我們可以通過刻意制造的筆觸感、噪點、紋理等，使得畫面蘊含豐富的細節，更加耐看。

△ 對同一元素的不同肌理表現

二、破型

破型，就是在充分理解學習對象構成的基礎上，結合自己的風格痕跡和需要表現的內容，形成新的插畫畫面。

好的插畫是形式與內容的完美結合，優秀的表現形式是為了傳遞信息，你應該明確插畫需要傳遞何種信息，并且讓所有的元素為之服務。

缺少內容創作的插畫學習會失去內涵乃至成為抄襲，這是我們一定要避免的。如何更好的結合內容呢？

1. 理解各個元素的視覺表意

環形構圖更聚焦，對稱構圖更具形式感；曲線的運用會讓畫面更柔和，貼近自然，直線與幾何則更具現代感和科技感。先要理解各個元素所隱含的視覺語言，再通過你想傳達的內容去挑選合適的呈現方式。

2. 構建一個故事

想象一個故事，誰（who），在哪（where），什么時間（when），做什么事（what），怎樣在做（how）？

比如說，如果是想畫關于工作的故事，是誰在工作（加班狗），在哪（工位），什么時間（深夜），做什么事（加班），怎樣在做（幾個人討論需求）。

然后我們再問自己一個問題：這個故事要傳達什么情緒（有趣、溫馨…）。

不斷思考這樣的問題，完成從故事到畫面的轉變，畫面里物境-情境-意境的搭建。

3. 視覺轉譯

故事是文字，我們需要將文字視覺轉譯為圖形。

讓我們接著上面繼續想：怎樣造型的加班狗是有趣的，什么表情是溫馨的？加班的桌上應該有什么？怎樣的色彩和素描關系可以表現深夜，又體現出溫馨？ 等等。

答案也許會一點點浮現：深夜這個詞從顏色的緯度，應該是冷色調的；從素描關系的緯度，應該是具有較深的投影，較強的高光，乃至是一個背光。

一點點的細化你的故事，將每一個詞轉化為可見的圖形和顏色，并且快速的反饋到你的草圖中去。當然，這個過程對于每個人來說都會得到不同的結果，自信一點，這才是你創作中最與眾不同的部分。

采用這樣的思路，我們可以快速的創作不同風格的插畫：

△ 左側為作者練習 右側為學習對象

三、幾個建議

1. 關上電腦

在自主創作的階段中，我們一定會遇到想法不夠，不知該如何進行下去的時候，此時應該避免回過頭去看學習的對象，這樣會讓自己的創作變的局限，從而越來越像原作。

2. 足夠細致的草稿

很多人對待草稿是不夠用心的，粗糙的草圖意味著你并沒有真正做好獨立創作的準備。請盡量保證從投影的造型到人物臉部的配色，每一個元素的細節都能在草稿畫完之后心中有數，這樣才能使你避免你對著 AI/PS中的半成品不知所措。

△ 作者平日的草稿

3. 向經典學習

dribbble 上固然能提供許多新鮮的想法和創意，但是不妨去了解一下新藝術運動的插圖，席勒的速寫，達達主義和立體主義的海報等等，你會發現藝術史上如此多大師和流派，都是取之不盡用之不竭的靈感源泉。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

01-

肖形圖形-構成規律：A組成B

肖形圖形就是以單一元素或多個元素的外形共同變化來進行一個新形象的創造并使兩者之間的含義得以連接。如果兩個物體同時改變了原先的形態，并在這兩種形態間產生了一種全新且嚴謹的契合關系，一個新形象也就誕生了。

還記得08年奧運期間的各地景觀嗎？你去看城市市民廣場的花壇，從南到北，無不例外，用鮮花組成一個大大的奧運五環的圖形，要不然就是京的印章標志，或者就是北京歡迎你的字樣。印象最深刻的就是開幕式用擊缶來形成倒計時的數字。

肖形圖形概念是運用十分廣泛的一種創意概念，它好理解，上手快。但不能理解成一個簡單的重復羅列的過程，哪些圖形可以結合構成新的意向？怎么組合更加有趣？怎么控制好元素之間的疏密關系？

當我們面對兩個形態上看似沒有什么關聯的物件時，不妨先從點、線、面、空間這些角度來解析一下，或是再換個角度看，每個物件都可分解成基本的方形、圓形和三角形，這些隱秘的關系都為它們的解析重組提供了可塑的條件。

點的創意表現

在圖形中，任何一個單獨而細小的形象都可以稱為點。點是以視覺中面積大小的感受來確定的，所以點的形狀并不一定是圓，也可以是其他的幾何形體，點是相對于線和面而存在的視覺元素。在設計中，點的排列的形狀、方向、大小、位置、聚焦、發散，能夠給人帶來不同的心理感受和視覺沖擊。點的構成可分為密集和分散兩種不同的視覺類型。

線的創意表現

線是創意圖形的基本要素之一，線可以串聯各種視覺要素，可以分割畫面和圖像文字，可以使畫面充滿動感，也可以在上穩定畫面。線與線之間的排列可以使畫面具有節奏感，線的放射、粗細、漸變排列可以體現三維空間的感覺。

線的編排構成分為有節奏、有情感、有空間關系等的線。每條線都有自己獨特的情感存在，將不同的線有節奏地編排在板式中就能形成各種不同的效果。作品通過線的空間處理，利用獨特的視覺效果，能表現強烈的整體感和形式感。

面的創意表現

圖形設計中的面由于輪廓的作用，使形態從周圍空間中突顯出來，從而比點、線的視覺沖擊力更大。在進行面的創意表現時，要考慮形狀與面積的對比、間隔與面積的對比、面積與面積的對比等因素。面是視覺元素創意的基礎，可以運用不同的方式來表現。

02-

同構圖形-構成規律：A+B組合

同構圖形更注重于體現視覺意義上的藝術性和完整性，通過變形、錯位、結合等種種手段來制造出虛擬的物象。同構可以理解為是一種形態上的置換行為，即是將組成某物件的其中一部分特定元素與另一種本不屬于其自身卻具備形態上相似之處的元素進行巧妙替換，相互借用，同生共榮，形成新的異象，產生出新的寓意和獨特的視覺趣味。

同構圖形在設計運用中最為廣泛的一種圖形概念，但在運用時我們必須注意做到自然巧妙而不生硬。如果總是一味的將一堆相關元素胡亂堆砌在畫面中，這樣的畫面，細看之下實在是索然無味啊。

(一半寫實一半創意)

一個完整的元素一分為二，一半保持元素原來的固有形態讓用戶保持認知，另一半就可以進行創意設計。案例一中是用直白的文案直接進入主體，使用手寫字體切近用戶的同時也彰寫了格調；案例二中為了體現科技感，運用了電路板進行內部重新構造，增加科技感的同時也不失可愛。

(圖形加文字)

圖形加文字，通過提取文案，在圖形設計中保留主要的重點文案，很明確的傳達品牌的內涵，文字在圖形中也盡量按照圖形的走勢進行排列。案例中的文案都傳達了一種積極向上永不服輸的態度，運動員們也為了勝利而拼搏，體現的耐克的品牌文化。

(雙重曝光)

雙重曝光從嚴格意義上講不屬于同構圖形的一種，但是它也是同構兩張圖片兩兩相合成形成的一種特有的風格，由于這種風格也算大熱的風格。我們在制作雙重曝光的時候盡可能的保證人物形態的完整性，如上圖的案例中雙重曝光的畫面很清晰，主次也很分明，很好的保留了人物的五官的完整性。

(APP節日閃屏)

(點)

(線)

(面)

(創意)

(插畫)

作為UI或者產品設計師，我們在設計界面中會很少運用肖形圖形和同構圖形進行區創意。但是在APP閃屏頁中，我們就可以很好的運用的肖形圖形和同構圖形。可以很好的與品牌LOGO圖形相結合，更好的為品牌宣傳去服務。在這方面做的最好的當屬QQ音樂這款產品，它很好的利用品牌圖形與點、線、面、插畫相結合進行創意，很好的體現了節日的主題和氛圍。

總結-

肖形圖形和同構圖形在設計中運用廣泛，通過圖形創意練習可以增加我們創意思維，也可以鍛煉設計總的主次層級、疏密遠近的關系。相對復雜的視覺圖形元素能處理得當，相信在界面排版中也能很好的分析出層級和層次之間的關系。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

      之前說過我要出一個吉祥物制作的教程，但是其實這種教程很多，上百度隨便搜一個就能知道個大概。現在是教程泛濫的時代，今天看一篇明天看一篇，發現很多換湯不換藥，有種不看可惜看了又很雞肋的感覺。所以我在想我要怎么出這篇教程才會讓大家有所收獲。

        設計的進階道路，大概分為借鑒，實操，駕馭，引領。從借鑒到引領這個過程學習、思考、總結是貫穿的，多實踐，多總結才能飛速進步，不然有可能你干了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界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

表單設計可以說是設計界一個老生常談的話題，針對它的重要性自不必多言。本文結合自身經驗和所看所學所得總結，希望能幫助到大家。

從「因子（構成要件）」的角度，將表單逐一拆分，從而能夠全面的看待。

如下，大卸八塊，一一道來：

• 結構
• 標簽
• 輸入字段
• 占位符
• 幫助
• 操作
• 驗證
• 反饋

一、結構 Structure

字段的順序、節奏、外觀和組織。

1. 只問所需

必要而不是全部，簡化表單，或許是優化表單的最大建議。簡化的辦法之一就是追溯每個字段為什么需要，是否是當前最相關的信息，如果它是可選的，最好不要顯示。

2. 有理排序

先問什么，再問什么，前后字段根據相關性循循漸進。

3. 從易到難

從用戶相對無抵觸的信息開始逐漸到隱私的信息，而不是一開始就讓用戶萌生退意。

4. 組織相關

在繁多字段的情況下，將相關字段按照順序進行分類組合，并通過增加一些額外的空間或者主標題將它們分成語義組，增加了頁面呼吸和節奏感，從而幫助用戶更加輕松完成表單。

5. 單列呈現

單列，只需眼睛沿著自然的方向從上至下，便于用戶理解操作。多列，眼睛需要按照「之」形進行瀏覽，從而增加瀏覽和理解認知的時間。

當然單列呈現還是多列，并非絕對，需根據頁面空間，表單內容及性質共同決定。

6. 提高對比度

提高顏色的對比度，你的用戶群體可不是高清屏，飛行員。

二、標簽 label

標簽告訴用戶需要輸入什么。

1. 名詞標簽

名詞具有很好的描述性且簡潔明了。常用的字段可以使用大家熟悉的圖標代替文本。

2. 標簽位置

左對齊、右對齊、頂部對齊、內聯標簽、圖標標簽和浮動標簽。

多數情況下，謹慎使用內聯標簽，在用戶輸入后，內聯標簽會消失，用戶無法判斷輸入的內容是否符合，當然在用戶熟悉且簡單的字段下可采用（例如登錄中只有賬號和密碼）。針對以上問題，你可以采用內聯浮動標簽解決內聯標簽在輸入后標簽消失的弊端。

三、輸入字段 Input

承載用戶輸入的區域。

1. 自動對焦（PC端）

進行表單頁面，自動對焦第一個輸入字段可以引導用戶開始進行輸入。

2. 提供默認值

可根據已知信息，幫助用戶預判內容。例如可以通過 IP 檢測出用戶的地理位置。

3. 保存輸入的數據

記住用戶已經填寫的內容，以防萬一（例如頁面刷新），從而避免用戶需要再次輸入而放棄。

4. 字段約束

為有要求的字段設置限制。例如，最大字符數，電話中數字、字母符號等要求，從而有效的避免臟數據。

5. 格式化（掩碼）輸入

提供輸入格式，幫助用戶理解所填內容且減少錯誤發生。常用于手機號碼、日期、銀行卡和郵編等。

6. 匹配鍵盤（移動端）

提供合適的鍵盤，幫助用戶快速完成。

7. 區分可填

如上所述，盡量避免可填字段。如果不可避免，應該做明確區分。根據經驗，可填和必填的數量少的做標記說明。

常規做法：必填，使用「*」星號符；可填，使用「（選填）」。

四、占位符 Placeholder

標簽的額外描述，幫助用戶了解可輸入的數據類型和格式提示。

1. 顏色區分

它是內容提示，而不是內容。

2. 不是所有輸入框都需要占位符

占位符是對輸入內容有特殊要求的提示或提醒，也可理解為對標簽的補充，并不是所有的輸入框都需要占位符。

3. 輸入后消失

不要在鼠標鍵入后消失，而是在輸入內容后消失，這樣可以在用戶還未輸入的時候，依然幫助到用戶。

如果提示特別復雜或者重要，請使用幫助，它會一直顯示在那里。

五、幫助提示 Tips

說明要求，解釋原因，甚至幫助回憶。

1. 三種方式

常駐、按需提供、偶爾需要。

2. 給予解釋

當前需要用戶填寫相對隱私的信息時，請給予解釋這么做的原因及目的。

六、操作 Submit

對當前用戶輸入數據的提交等動作。

1. 區分主次

主操作，是我們期望用戶的使用途徑，應該在視覺上與次操作做出明顯的區分，以突顯號召用戶點擊。

2. 合理放置

合理放置操作的位置，可根據表單的排列方式合理擺放，避免居中。例如表單采用的是頂部對齊，你可以將操作與輸入字段左對齊，這樣用戶在完成輸入的時候，輕松地看到操作按鈕。

3. 準確命名

清晰可預測。應該準確地描述用戶點擊按鈕后會發生什么。

4. 行動號召

按鈕應始終帶有強烈的動詞，鼓勵用戶行動。

為了給用戶提供足夠的上下文，在按鈕上使用「動詞」 +「名詞」格式，除了保存，關閉，取消或確定等常用操作。

5. 禁用操作

在未完成必填字段，禁用操作按鈕，通過直觀的視覺上告訴用戶是否完成了要求，并在恰當的時刻（表單填寫完成，按鈕被激活）將用戶的視線吸引到按鈕上。

七、驗證 Required

對用戶輸入數據的驗證反饋。

1. 前端驗證和后端驗證

前端驗證不需要服務器上傳驗證的數據，就可以判斷，例如手機格式等；但是要記住在用戶輸入后才進行驗證，為空不驗證；

后端驗證，例如手機注冊輸入效驗碼，通過后才注冊成功，需要通過服務器判斷，才知道用戶輸入的是否正確。

2. 錯在哪里，顯示在哪里

就近原則，方便用戶發現并修改操作。

3. 結合顏色、圖標和文字

我們不僅僅需要視覺上的區別（請考慮色盲用戶），還需要文字說明并告知原因和解決辦法，而不是簡單的「輸入錯誤」。

4. 請勿清除

錯誤的字段，請勿在鍵入后直接清除，請給用戶在此基礎上修改的機會，記住用戶才是決定者。

八、反饋 Feedback

對用戶行為的反饋，告知當前狀態。

1. 操作前：光標狀態

鼠標在屏幕上的映射，我們稱之為光標（指針），它會隨著操作對象及系統狀態而呈現出不同形狀，讓用戶對操作的行為及結果有預先的心理感知。

2. 操作中：操作反饋

如 default，disabled，hover，fouce，pressed，active，error，success 等。例如輸入框的懸停和鍵入的視覺反饋，從而幫助用戶聚焦。

3. 操作后：按鈕加載

呈現按鈕的加載過程，而不是禁止不動，用戶會以為系統沒有執行操作，從而進行多次點擊，呈現加載并禁止用戶的后續點擊操作。

總結

以上便是對表單設計的一些總結，更多的是提供一種分析問題的框架，從結構化的思維分析設計問題，從而能夠全面的認識一個事物并進行了解掌握，愿對你有所幫助。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。