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

麥肯錫咨詢公司在調研了橫跨5年時間的200萬份財務數據和10萬多個設計項目和舉措之后，發現以設計為主導的企業收益提升了32%，而股東的總回報率提升了56%。

多年以來，設計領域一直在努力探索和發掘更加有商業價值的實戰案例，而麥肯錫咨詢公司（McKinsey＆Company）的一項開創性的新研究終于開始將設計和業務之間的影響關系給勾勒了出來。

這些總計超過200萬份財務數據和10萬多個設計項目牽涉到了300多家上市公司，他們都試圖讓設計成為商業中最重要的組成部分，麥肯錫發現其中這些對于設計有強烈傾向且擅長將設計原則落實到實踐當中的團隊和企業，在收入上提升了32%，而股東的總回報率提升了56%，而呈現出這一特征的，主要涉及到三個行業：消費品、醫療技術和零售銀行業。

「在過去的5年當中，商業領袖們開始越來越多地呼吁在產品和服務設計領域提升競爭力，」在英國領導產品研發和設計實踐的麥肯錫咨詢公司的合伙人 McKinsey 說道：「在如今的大環境之下，產品和服務越來越難以從激烈的競爭中脫穎而出了?！?

Sheppard 和其他的研究人員使用回歸算法來分析和評估不同的設計行為。在研究過程中，他們會試圖將設計主管置于公司高層管理當中，或者將高管的獎金和可用性數值關聯起來，看看這樣會怎么影響這些企業的財務業績，而這300多家企業基本都是自愿加入并配合機構的研究。當真正面對設計的時候，這些互相處于競爭位置的企業站在了一起，一同學習。研究者發現，即使身在不同的領域當中，但是影響并增加企業總收益的，主要源自于四個方面，并且他們將這四個方面的行為決策最終構成的綜合指標稱為麥肯錫設計指數（MDI），并且使用 MDI 來對這300多個企業進行排名。這4個關鍵領域分別是：

1. 將設計所產生的影響作為衡量標準，就像跟蹤成本和收入一樣嚴格跟蹤。麥肯錫在這個調研中引用了一家游戲公司的案例，他們通過對網站主頁的功能進行小幅度可用性調整，從而將產品銷售額提升25% 。
2. 通過面對面的交談和調研，將用戶反饋和需求放在首位。這有助于團隊在標準的用戶體驗之外進行思考。麥肯錫在報告中援引了一家連鎖酒店的案例，酒店向用戶展示了作為紀念品的橡皮小鴨，上面印有該酒店所在城市的形象，他們鼓勵用戶搜集不同城市的橡皮小鴨。這一設計項目是和用戶溝通之后的產物，根據跟蹤數據，單這一項目就將用戶留存率提升了3%。
3. 將設計師引入跨職能的團隊，并且激勵頂尖的設計人才。麥肯錫在這個環節引用的是 Spotify 的案例，Spotify 營造了一個多元化的企業環境，并且賦予設計師足夠的自主權，創造足夠優質的設計，這和同類的公司截然不同，后者的設計師通常需要花費大量的時間來給營銷團隊制造幻燈片。
4. 鼓勵進行調研、制作早期原型并且迭代。產品或者服務在發布之后并不是徹底結束了。麥肯錫的研究報告中援引了一家游艇公司的產品設計作為案例。這家公司的設計師通過和乘客進行交談了解信息，借助支付數據來評估的活動，利用機器學習算法來分析，來發現游艇布局中低效、體驗較差的部分，并且借助這些信息來不斷的迭代和調整，提升產品和服務。

實際上，能夠持續地在公司中執行這四件事的公司，MDI 得分會最高。MDI 指數最終也確實和公司的盈利和總回報率正相關，最有意思的地方在于，MDI 排名最靠前的25%的公司和后面75%的公司相比，在盈利和回報率上明顯高出更多，而后75%的公司之間的平均回報率增長相互之間就沒有那么明顯的區別。換句話來說，如果想要讓設計真正意義上發揮它點鐵成金的效果，企業必須盡可能多地投入，甚至比麥肯錫所提出的標準還要苛刻，超出要求才行。對于負責調研的 Sheppard 而言，這個結果簡直是個驚喜。根據他們的統計，這些 MDI 指數較高的企業，每投入一美元在設計上，所獲得的收益要遠高于他們的預期，但是，對于那些一開始就真正專精于設計的公司而言，再在MDI 上做提升影響相對就沒有那么明顯了。

「對于大家而言，需要作出合理的決策?！筍heppard 說道：「我們是否要認真對待設計，或者說，在目前這個局面之下，是否要投資？坦率的講，如果想要用好設計，那么需要在設計這件事情上，做得恰到好處才行?！?

在麥肯錫的調研過程中，他們發現許多公司壓根就沒有在這四個領域中認真嘗試過。調研發現，40%的產品在研發過程中，根本不會同用戶進行溝通交流，50%的人根本沒有使用客觀的方法來評判他們設計團隊輸出的產物。只有不到5%的受訪者表示他們的領導能夠讓數據來驅動產品，或者使用客觀的方法來作出設計相關的決策。有超過60%的受訪公司則是在開發后期才使用原型，并且僅供內部使用。值得注意的是，這些問題全部都是自上而下的問題，公司的設計師是沒有辦法自行解決的。正如同報告當中所寫的：

「由于沒有明確的方法將設計和企業盈利聯系到一起。企業的高層領導往往不愿意將稀缺的資源向設計部門傾斜。這個本身是有問題的，我們通過研究發現，強大而一致的設計環境牽涉到公司的許多關鍵驅動因素，而這些都是需要公司高層來決策和投資的。雖然許多設計師敏銳的意識到了涉及 MDI 的四個層面，或者其中的部分因素，但是不論是哪一個方面，都不是企業中的設計師能夠單獨解決的，往往需要領導層的支持才行?！?

那么，一個從來都沒有「以設計為中心的文化」的企業，到底要如何構建起公司的設計文化呢？這份研究報告的作者建議，選擇一個項目作為試點，并且給予團隊承諾以踐行上述的4個方面都能夠在此踐行。由于有不少公司自愿參與到整個調研項目中，所以他們能夠驗證了麥肯錫資訊公司的一些想法。目前他們發現，如果從一個試點開始，而不是試圖在全公司推行以設計為中心的計劃，能夠獲得更好的效果和收益提升。舉個例子，一家醫療設備公司，在設計新的手術設備的時候，通過組建跨職能的設計團隊，在設計過程中創建了110多個原型和概念設計，在2年時間內進行測試和迭代，并且將公司高管的獎金和產品可用性掛鉤，并且在設計過程中不斷地和一線的外科醫生溝通，并獲得反饋。最終，這家公司的產品的可用性得分比競爭對手的產品高出12個百分點，而公司的市場份額更是上升了40%。

Sheppard 希望 MDI 能夠擴展到更多的行業和領域，就目前而言，MDI 可以將設計師造就明白然而管理層依然不太了解的道理，最終反饋到企業收益上，這是必經的過程。「這份報告昭示著新時代的到來，」Sheppard 說道：「設計最終走到了管理層?！?

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

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

通過以目標用戶為核心的3個要素——定方向、找切入點、埋分享因子，來談談創意傳播類的項目該如何入手。希望你讀完本文后能擺脫做創意如同盲人摸象的痛苦。

一、寫在前面

前些日子被《互聯網公司時尚穿搭指南》刷屏，平時辦公室中各路高級冷淡的同事竟也不淡定地紛紛轉發議論起來。

自網易各種視頻類測試類H5 的爆紅到麻痹，以及 GQ各種漫畫類圖文的驚艷到習以為常，鮮有沖出重圍受到廣泛追捧的好項目了。

這次讓其出品方「嚇老濕」贏很大的，自然就是「創意」。在平臺系統化趨勢的時代，常有唱衰創意內容產出的聲音，其不穩定性讓人望而卻步。我們也應該清楚的明白，做創意這件事，做好了一定有能夠超出預期的回報。

本文，我們就通過以目標用戶為核心的3個要素來談談——創意傳播類的項目如何入手。

如果你在互聯網公司，并有著需要嘗試做創意的需求，希望你讀完本文后能擺脫做創意如同盲人摸象的痛苦，追溯根本強于把控。

二、什么是創意傳播類項目

也許主題不限、表達方式不限，但它的需求描述中常常伴有「刷屏」二字。其目標是通過創意內容產出的方式達到「刷屏」傳播的效果，并產生其業務價值。

所以，內容的產生，不僅要能打動人，還要求不能自嗨，要能服務于產品，有商業價值。

譬如之前刷屏的「世界再大大不過一碗番茄炒蛋」的招商銀行短視頻，有創意，打動人了，也有很好的傳播效果了，但與本體「招商銀行」業務本身并無太大的聯系和益處，使之成為經典的無效項目。

一個好的創意，必須要清晰準確的劃定目標受眾圈層，以傳播本體對他們的核心價值為依托去規劃內容。以下我們就詳細說明如何一步一步打好地基：

1. 定方向

定方向就像畫骨。

你需要根據項目的目標，挖掘傳播本體的核心價值，并把它擺在整個項目需要圍繞的主心骨的位置上。骨就是項目核心，它界定了項目的范疇，不能萎縮也不宜過度拉伸。

2. 找切入點

切入點就像建立筋絡。

你需要根據目標受眾的圈層文化，借助一些社會熱點現象，建立與項目方向的契合的切入點。有了切入點，你的項目才有了脈絡，才能有了內容的基石。

3. 埋分享因子

埋分享因子就像賦予血肉。

你需要清醒于自嗨之外，理性預設要靠什么吸引目標受眾，刺激他們分享傳播。血肉之軀最為表層，也最容易產生刺激，有了分享因子，你的項目才能傳播起來。

具體怎么做，一個一個來說。

三、定方向

定方向首先要了解2個概念作為前提：

• 「業務目標」。
• 傳播本體的「核心價值」。

比如為京東雙11做創意傳播，本體已為用戶所熟知，它的項目目標就是宣傳造勢。

雙11作為全民最期待的購物節，該傳播本體的核心價值就是以特色福利和促銷為主的核心利益點。反之為京東旅行這個知名度低的產品做創意傳播，更注重曝光產品品牌，而最大價值在于京東嫡系的背書。

分析了這2個前提，我們就可以開始從不同的維度去找方向。

基于我在京東做的項目，基本可以把方向分為以下5個維度：

1. 圍繞廣義的產品核心競爭力

比如京東一直以來主打的「物流」，淘寶15年主打的「萬能」，就是產品核心競爭力。

2. 基于目標用戶的調性

比如京東從男性化到更重女性化的轉變，比如網易嚴選主要切中的「白領小資」，就是基于目標用戶的調性。

3. 表達主題態度

比如京東這2年屢屢強調的「好物」，天貓17年根據品牌升級所主打的「理想生活」，就是產品區別于其他人的主題態度。

4. 突出項目亮點

比如淘寶新勢力周所突出的「獨立設計師」，網易考拉Julia 所表現的黑五項目中的「KOL支持」，就是可以突出的項目亮點。

5. 針對利益點包裝

比如京東18年618活動中厲害的「平分20億京豆」，天貓雙11曾經的口號「不止5折」，就是項目的利益點。

并不是一個項目都要表達這5個維度，也并不是一個項目只表達其中一個維度。

分析這些維度的目標是要從各個方面去梳理傳播本體的子彈，挖掘到什么是可以并且值得拿出來出擊的武器。

分析這五個維度不能只是設計師的自我YY，更需要與需求方一起做這件事。而后更要做的是與多方一起共同去根據前提，也就是傳播的目標和傳播本體的核心價值去界定項目的方向。

只有在項目之初，與需求方、決策拍板人、項目執行者多方確定并達成共識，才是有效的方向決策。

譬如在17年京東雙十一的項目中，在梳理以上內容之后，我們與需求方達成一致的項目方向是：基于京東雙十一本體的特殊福利優惠亮點去打。

定了這個方向之后，在后續的創作過程中，我們就能以終為始，擁有了對項目產出的預期管理，在模糊的創意沒有誰對誰錯的灰色地帶建立了對錯標準。有了標準才能團隊上下協作齊心共力，不至于混亂。

四、找切入點

如果你的項目在設計階段走心走腎，投放市場用戶卻冷漠相對，很有可能就是你的切入點沒有找好。

切入點是什么？

就是你要通過什么概念去表現既定的方向，要通過什么角度和故事去表達要傳播的重點。

比如 Julia系列的切入點就是入職新人各種被壓榨的靈魂共鳴。比如 GQ深夜酒館的切入點就是城市人群攀比炫富行為的洞察。一個好的切入點，必須要去洞察目標受眾最真實的行為，因為只有真實，才能引發共鳴。那么如何去找這個點呢？

你可以嘗試從以下3個維度去做分析和發散：

1. 目標受眾的圈層人群文化

他們的痛點癢點是什么，他們關注什么，他們的行為模式是什么，他們有哪些經典場景？

比如 GQ 的軟文曾以洞察各種人群切入：略帶直男屬性的大齡男青年、系統外的人、花錢如流水的00后、邊緣青年、北上廣的租房一族、深度快手用戶等等。

通過洞察這些群體的特質，就能讓人們迅速能找到共鳴。

2. 所處社會的熱點和梗

分別包括社會焦點，就是社會廣泛存在的問題；當下熱點，就是一段時間內大家喜聞樂見的話題；時間節點，就是傳播時會發生的社會性大事件。

好的熱點和話題可以借勢，比如國慶的支付寶「中國錦鯉」活動，在「錦鯉」賦能下，讓它更具網紅潛質和傳播性。

3. 前文定出的方向發散

包括基于方向的本身的發散和業務價值的發散：切入點是不能脫離于既定方向而獨立發展的，考慮這個維度能把握切入點的邊界不跑偏。不能表達既定方向的切入點，就是不合適的切入點。

譬如在17年的京東雙11的項目中，我們根據社會人群忙碌常說「改天」聚會；拖延癥癥候人群龐大常拖延「改天」做事；契合到京東雙11各種玩法多樣日期不可「改天」，得到的切入點是「改天就GG，京東不改天」的概念。

同樣，這個概念，也必須與需求方、決策拍板人、項目執行者最終達成共識，一個無法共識的概念，就是孤掌難鳴，無法成為一個好切入點。

有了切入點，我們就有了表達的脈絡，就能為內容的創作定下基調。

切入點所吻合的人群洞察，讓項目避免陷入無法打動用戶的自嗨；所融合的社會熱點，讓項目借勢避免老生常談；所恰合的方向，讓創意擁有主張，而不是空洞的言之無物。

五、埋分享因子

切入點找的好，但是用不好，沒有好的傳播效果，其中一個很重的原因，就是沒有埋入誘使用戶分享的底層刺激。

比如同樣切入：「人生苦短，陪伴父母的時間已經很少」。很多項目做的煽情無比，賺盡眼淚苦大仇深，仿佛把人群的洞察脫光了展現給你看，但是用戶卻在煽情之余感到壓力山大，甚至感到情感綁架而不愿意分享。

而某些花店在設計用戶為母親節父親節為父母買花的這種直白的活動卻悄然在社交中滲透。其中的差別就是人性喜于炫耀，而惡于自苦。前者沒有預設用戶因為什么原因而分享，所以才不得好的效果。

以下這7個促進分享的點幾乎涵蓋了各種不同類型的分享傳播背后所存在的底層邏輯：

• 表達想法：就是你的內容能幫助用戶說出他的想法，讓他覺得「你說的真對，真好」，產生這就是我想表達的內容和態度。比如 PAPI醬對社會現象的各種吐槽。
• 提供誘因：就是讓你的內容能讓用戶在與他生活中的常見場景產生聯系，從而覺得你的點說的很精準。比如互聯網穿搭指南。
• 提供談資：就是你的內容出人意料能讓用戶建立于他人的聊天話題，從而為了社交而分享。比如百雀羚的長圖廣告。
  社會比較：就是你的內容可以給用戶提供攀比和炫耀的原材料，從而刺激用戶做社會比較而分享。比如支付寶的年度賬單。
• 利用情緒：就是你的內容能使用戶達到一種激烈情緒，從而需要釋放，被情緒支配則不需要任何理性地去分享。比如番茄炒蛋。
• 展示形象：就是你的內容可以讓用戶建立或加強他的形象，讓他可以從分享中展示自己的品味和個性。比如各種測試結果頁或者高格調可以獲得自我滿足。
• 實用價值：就是你的內容具備有用的有價值的信息，可以幫到他自己和他的朋友，讓他為了在社交中提供價值而分享。比如實用貼掃盲貼攻略貼等。

總結以上基本可以分為這4個大的方面：展示表達、可以炫耀、情緒出口、實用價值。在項目中通過對這些分享因子是否可用，如何埋入的預設，可以在前期預設項目的效果。

譬如在去年京東雙十一的項目中。為了表達「改天就GG，京東不改天」的概念，我們預設了熟悉的影視劇經典場景，強化了前后反差營造情緒，最后利用經典人物提供了實用的雙11攻略信息，刺激用戶分享。最后的效果也達到了33.13%的UV分享率（市場平均7%）。

分享因子，就是項目的血肉。分享因子就是能幫助你的故事刺激分享底層邏輯。他是用戶去理解概念，進而接收傳播信息的基礎。沒埋分享因子的創意，常常陷入不是內容干，就是廣告硬的桎梏。

六、要點回顧

經過畫骨建筋加血肉，定方向找切入點埋分享因子，有了這3個要素，其實不是做創意傳播類項目的結束，而是開始。

同樣，這個思路不是創意的內容，而是它的地基，地基不穩則建筑不固。它能幫你入手，能幫你把控要點走在正確的道路上，但不能幫你完成內容的產出。

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

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

我們在工作單位上是跟PM（產品經理）、TD（技術開發）等同事對接，可是本質上來說，我們的最終boss是用戶本身。換句話來說，我們在單位工作換取的薪資其實是用戶支付的，是他們覺得我們的產品服務好才付費。

從這個角度出發，設計師的工作就不是PM給了你原型你就依樣畫葫蘆了，因為一部分PM會把重點偏重在商業價值上，交互體驗層面就沒有花更多時間去思考。

那么我們作為用戶與產品之間的橋梁，就該擔當起“工程師”的工作，保證橋梁在用戶使用時不會發生崩塌或者顛簸，也就是崩潰、閃退，甚至回過頭來說這橋真TM丑等問題。

所以設計師在明確和理解好產品功能形態后，以產品思維并站在用戶角度去思考才會設計出更好的視覺效果和功能體驗，設計師自身的價值才能最大的呈現出來，用戶也能投資更多的資源在這款產品身上，公司業績也會蹭蹭上漲，你的身價也隨之提升（嘴里笑嘻嘻）

產品思維是什么？

產品思維是你在工作中至上而下貫徹始終的宗旨。

我們在設計前，首先梳理產品原型文檔里的思路，搞清楚為什么會出現這個需求，這個過程不但能夠讓設計師了解業務發展，也能為設計提供背景參考。

沒有任何設計或者功能是能夠單獨脫離產品本身而存在，譬如不存在想要點外賣卻沒有點外賣的途徑，不存在想要看時間卻沒有可以計算時間的方式。設計與功能都是依附于產品本身，這也是我們為什么得用產品思維去設計的原因，總不能想都不想就拿著淘寶那套UI直接搬過來放在微信上面吧。

為什么需要產品思維？

那么產品思維到底能夠帶給設計師怎樣的提升？答案是，它能夠讓設計師匹配目標用戶，結合場景需要，為他們定制出正確的視覺交互與功能體驗。

可能有些設計師會過于執著于界面好不好看，確實視覺設計可以使產品更加美麗動人，確保其在眾多競品中脫穎而出，可是本質上它不會使產品本身更有價值，譬如為什么現在絕大多數用戶用微信聊天而不用QQ？這是因為微信剛推出時比QQ更加簡單，輕量，符合移動化趨勢，更能針對社交痛點。人們不會因為QQ更好看甚至可以換主題而用QQ取代微信。（QQ：怪我咯？？？）

這就是為什么一個有效針對痛點的產品能夠成功的原因。就算真的有同學朋友說你設計的東西不好看，你也不要沮喪，每個人看問題的角度，深度都不同。外行看設計，才會看好不好看，內行看設計，看視覺體驗舒不舒適，業務功能需求有沒有合理呈現，商業價值有沒有實現。所以當你是以產品思維作為宗旨去設計，那么無論你怎么設計，都不會出現太大的紕漏，因為你已經用正確的方式為目標用戶探索出一條能夠真正解決問題的道路了。

如何培養產品思維？

可以從以下5個方面培養。1. 體驗思維 - 2. 邏輯思維 - 3. 數據思維 - 4. 商業思維 - 5. 結構化思維。下面簡單說明一下，后期有機會再每一點單獨細講。

1.體驗思維

這是身為設計師最基礎的部分，很多設計師拿到需求后就直接找素材上手做，這樣的工作方式是錯誤的。設計師是需要做用研，構建用戶模型，洞悉行為習慣，興趣愛好的。為某個人進行設計，才能針對性地設計出好的方案。就像你給女朋友過生日，你清楚她喜歡的東西才能用最小的成本讓她情緒最大化地釋放，她喜歡蝙蝠俠你卻送了它一個小丑手辦，她能不發脾氣嗎….. 你還想指望她說小丑很帥嗎（兩個都喜歡的當我沒說過...）所以當你了解了目標人群，那么為他定制產品的時候，才會事半功倍。什么？你問我怎么做？方法其實很簡單，三點：a. 用戶畫像 - b. 使用場景 - c. 閉環設計

這里介紹一個”5W2H“法則，來幫助大家快速應到到實際場景里。

a. 用戶畫像

這是有效讓設計師避免自我yy，以客觀的態度代入目標用戶的身份去了解他們人群的特性、喜好、痛點、作息、手機使用情況的方法。建立模型后，才能更有效針性地為他們定制服務，決不能因為我是一個站在潮流尖端的cool designer就把目標用戶都當做是有這方面追求的人是吧（滑稽臉）

這里根據這個法則做出的一張用戶畫像的模型給大家參考一下

b. 使用場景

有兩層意思，第1點：是用戶使用產品時的真實場景，譬如大多數人會習慣夜晚看新聞、貼吧或者資訊類軟件，所以才會有黑暗模式的出現。第2點：同樣是評論，會出現在公共場景和個人場景，那么就必然會有樣式不同的情況。但這些情況都有個共同屬性，就是我在什么樣的場景下去使用產品。設計師如果不能定位這種場景，就很可能被投訴用戶體驗差，用得懵逼自然就會卸載拜拜。

c.閉環設計

用戶在使用產品時，會不會出現斷層的情況，例如我在注冊流程，獲取驗證碼超時了，卻沒有重新獲取的途徑，那么這里的流失率可想而知是多么恐怖。閉環設計就是產品使用過程，或者具體到某一功能上，我都能實現下一步，我無論怎么操作，我都能在主流程上面繼續暢游。

這種體驗思維下的產品，能夠讓用戶更容易理解如何操作，因為多數情況下用戶不會意識到是自己犯錯，都會認為是產品的鍋，所以啊，不換位思考地去做設計，都是耍流氓（那個外星人榨汁機，excuse me？你是希望我通過運動才能換取果汁？？）

2.邏輯思維

這點很好理解，我們設計界面時要做到承上啟下，符合用戶習慣操作，讓用戶在產品中航行時不會觸礁。例子1：放大顯示的交互，返回的時候就縮小回去，而不是變成左右切換；例子2：有一個活動的文案，”免費課10選2，3天后結束”，那么用戶就會疑惑，你是3天后沒有這個活動呢？還是課還可以買，只是不能免費10選2呢？所以自己設計時要每個方面都要去思考，不是PM或者運營給了你文案你就復制粘貼，你作為產品與用戶之間的橋梁，想要傳達的思想，都要按照邏輯有序地清晰地輸出給用戶，這樣才會顯得邏輯清晰，明明白白，整整有序。

3.數據思維

解釋一下，數據是產品上線后，通過對想要看數據的頁面、按鈕、icon等元素預先埋入統計點，觀察它們數字的變化，曲線的走勢，來找問題出現的原因，從而思考迭代的優化方案。常用的頁面訪問率、停留時長，點擊率，購買轉化率，加載時長等，都是作為我們迭代的數據參考，有助于產品和設計研究出更好的解決方案。

雖然數據給我們帶來很多實際依據，但它不是檢驗真理的唯一標準，不要看見數字低就覺得這功能要砍掉、詳情頁要重做，不一定是設計問題導致的啊，也不一定是用戶不需要這個功能啊，具體情況還是得具體分析。就譬如ios淘寶上，你刷寶貝列表，刷到第6、7屏了，你想回到頂部，線上有兩種方案，第一是點擊手機狀態欄的位置，會自動回到第一屏，你點擊右下角的“回頂部”也是回到第一屏，如果你看到右下角的點擊率低下，你會砍掉這個功能嗎？我想不會吧，畢竟不是每個ios用戶都知道狀態欄可以回頂，也不是每個用戶都只劃一兩屏，提供給你的數字不是唯一標準，只是個指數參考，切記不要反過來被數據控制了你。

4.商業思維（運營思維）

增長需求就是一個很好的商業思維例子。我們最終還是要面對用戶，然后讓用戶為我們創造收益，所以可能期間很多產品需求，都是為了增加公司盈利。世間萬物都是一把雙刃劍，有時候為了拉新，為了促銷真的不一定都有良好的體驗，這時候如果不能完美地解決增長的同時又能照顧好舒適體驗，那么我們就得權衡利弊和權重。

可能你會覺得購買頁首屏明明很舒適，可是加了個會員欄，又加了個砍價按鈕，又加了廣告鏈接，變得亂七八糟，一直鉆牛角尖跟PM說你這樣傷害用戶體驗啊，可事實上，你導致了項目延期，功能被其他競品搶先推出，損失的可能就是一個天文數字了。如果你不去了解商業，那又怎么能讓自己的設計創造出商業價值呢？

還有一點可能大家會意想不到，那就是把自己看成一件商品，我這件商品要怎么做才能體現出更高的價值，也就是我值多少錢。實際項目與自己YY的練習不一樣，充滿各種溝通、時間、約束條件等問題。如果我能抓住優先級，把過多的需求拆分好幾期，熟悉同類競品狀況，了解其他產品優勢之處，每一個步驟想得透徹，就算老板來質問，你都能迎刃而解，那么你的專業度就體現出來了，即使可能你內心覺得這并不是你想要的設計，但我相信肯定是當下需求的合適解決方案。

5.結構化思維（項目思維）

結構化思維，是需要一定經驗才能培養出來的，簡單的來說就是要有統籌大局的思維。不是叫你開發，運營，產品，審核，商務都去熟悉，而是說要去了解與配合。

有些設計師覺得，接到需求，按時交付就行了，對于何時上線，開發過程中遇到什么問題，是否需要設計方案得及時作出調整，實際上線后又出現什么問題…如果通通都不去了解，那這樣你就真的僅僅是設計產出的工具而已，因為你沒有擔當起設計師該有的體面與責任。如果你想提高設計在公司中的重要性和話語權，如果你想在老板眼中占有一席之地，那你就要積極推動項目，在別人眼中大發光彩。

另外一點是設計中的技巧，當你遇到一個需求點覺得模棱兩可，比較尷尬的時候，你可以用結構化思維幫助你理清思路，這是我常用的手段，舉一個關于首頁是否加入聽課進度的例子。

答案顯然而見，方法其實很簡單，你把需求點以定論的方式擺在至高點，然后層層遞進地列出用戶會遇到的所有情況，然后在每一種情況下的最后寫出到底該不該實現這個需求。結構出來后，答案也就一目了然（拿去給PM看，嘿嘿估計又得夸我是小能手~）

總結

通篇下來看，如果你還被人說你就是畫個icon而已嘛，那你就把這篇文章丟過去給他看?。ㄞD發就是最好的支持...怪不好意思的嘿嘿）你會發現我們其實通過圖形，色彩，排版來開發我們的思維，不斷實現自我提升來為公司創造更龐大的財富。

我們是設計師不是美工，繼續做著“好看”的設計已經不是當下互聯網時代需要的了，正如著名設計師菲利普·史塔克說過“我們是設計師，不是藝術家”（我也說得出啊…..）

我們利用互聯網為用戶設計產品，本質上就是了解他們的生活、習慣，痛點和人性本身，收好自己的“固執美”并且用著產品思維去設計檢驗，那么最終帶來商業價值的設計才是我們要做的正確設計。

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

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

身為設計師，我們習慣性的埋頭專攻自己的專業，思考著像素級的細節，拿捏著細微的交互體驗，討論著新的動效方式，卻常常忽略著我們所處的大環境，產品所面臨的新困境。

就像，目前流量紅利逐漸消失的互聯網行業，各大產品想要獲取新用戶的成本越來越高，而且很多產品在獲取一二線城市用戶時，遇到了天花板。

然而，對于商業公司來說，如果用戶停止增長，就很容易面臨產品一路下滑的小下坡兒。因此，各大公司也都呈現出焦慮到頭禿的狀態。

這就是為什么今年我們經常會看到跟「用戶增長」相關的一些資訊或分享。同時，「用戶下沉帶來高速增長」這件事兒，也隨著拼多多和趣頭條等產品通過「下沉」嘗到甜頭后，被大家激烈討論。

今天，我也來跟大家分享一下，自己的一些相關思考。

一、什么是用戶下沉？

用戶下沉指的是，企業為了給產品帶來更多的新增用戶、擴大自己的規模，產品功能或者運營方式從滿足一二線城市用戶需求，到拓展或者專注于三四線城市、乃至農村用戶的需求。

用「說人話」的方式解釋就是：從以前的高格調，到慢慢的接地氣兒。

二、為什么需要下沉？

一直以來，互聯網的主流人群都是集中在一線城市，他們最早接觸互聯網，有著互聯網的話語權，他們精致、高知，是主流產品的目標群體，也是大多數互聯網產品的第一波目標用戶。

但不可否認，目前這波用戶的滲透率，到達了天花板。

然而，還有另外一群人往往被互聯網所忽視，他們生活在非一二線城市，受教育程度低，收入低。這個群體，還是一片藍海，有很大的撬動（下沉）空間。

有的同學會好奇，那些非一二線城市的人，生活中需要這些互聯網產品么，下沉后他們會買賬么？

下面我們就從2個維度來分析，現階段「下沉」的可行性：需求、潛力。

1. 需求

從今年年初，宣布 GMV 突破千億的拼多多、到短短18個月內，從0成長為一家估值18億美元的趣頭條，再到注冊用戶7億，悶聲發大財的快手，就可以明顯的反映出，非一二線城市人群，對互聯網產品所呈現出的強烈需求。

難道用戶的需求是隨著這些互聯網產品才開始有的么？

并不是。比如：在沒有拼多多之前，城鎮的人們就有購買低價商品的需求，他們會一般通過集市購買、2元超市等等的渠道。

而在拼多多上，很容易看到3元的抹胸、8塊的加絨打底褲、49元的冬季羽絨服……

可能你會認為，這種價格的我才不會買，質量肯定不好。

但是，我們不得不承認，不同層次的人有不一樣的需求，并不是大家在談論消費升級了，便宜商品就沒人要了。

同時，對他們來說能通過互聯網獲得更多品類的選擇，通過更低價格買到跟之前使用的產品質量基本相同，甚至稍稍優于以前的產品，本來就是一種消費升級。

再比如：沒有糖豆廣場舞APP 以前，大家只能跟著領舞大姐學，現在有了這個 APP，大媽們可以自己在家好好練，不蒸饅頭爭口氣，努力成為廣場上的C位女王，人群中獨領風騷。

年輕時可以學習不好，工作時可以不如別人，成為大媽后在舞場上還不勇得第一，就得好好反思反思了。

總的來說，非一二線城市用戶對互聯網產品有較大的需求量，所謂的「下沉」并不是創造出新的需求形式，而是對既有需求在既有方式上某種程度的替代，或提供更優解決方案。

2. 潛力

除了滿足需求以外，企業還需要關注下沉市場未來的前景如何，潛力怎么樣，這個盤子能不能越做越大。

通過分析發現，目前「下沉用戶」正處在中國整體經濟增長、城市化以及消費升級的大進程中，未來會成為這個國家最為龐大的基石人群，也就是說，現在的「下沉用戶」會成為未來「中堅用戶」。

今天美國的農業人口只占整體人口的2%，日本農業人口也只有9.7%，中國很顯然在短期內還很難達到這樣的水平，但歷史的趨勢和方向不會變化。

因此，可以看出，不管是從需求方面，還是未來的潛力方面，互聯網產品中「用戶下沉」這件事兒上，在現階段都是一個可行的方案。

三、如何下沉？

當我們確定了自己產品有下沉的需求和潛力時，接下來就要開干了。那么「下沉」時哪些事情，需要針對三四五線城市進行差異化處理呢？

我覺得可以分為3個維度：運營層面、產品層面、設計層面。

1. 運營層面

運營的目的，一般是為了給產品拉新和促活。那么想要扎了四五六線城市的父老鄉親們的心，我們的運營活動需要注意：要有利可圖、要通俗易懂。

要有利可圖

下沉用戶有個明顯特征就是時間充足、價格敏感。如果有一些小便宜可以占，哪怕多浪費一些時間，他們還是愿意接受的。因此針對「下沉用戶」的運營活動，要格外放大利益點。

比如：受五六線用戶喜愛的拼多多，打開APP，滿屏的「1元秒殺」，「6.6元秒殺」，「只搶1天」，「新人1元購」……這種緊迫的氛圍，讓人感覺不買就虧了。

映射到線下場景，就是「最后1天大甩賣」的商店，每天都是「最后一天」，一甩就是十年（微笑臉）。

再比如：趣頭條，當你剛打開 APP 時，直接彈出一個紅包（很懂用戶占便宜的小心思）。不像有些產品的活動寫的是「優惠券」或「代金券」，寫多少元這種很人民幣的感覺對他們來說，才是最大的誘惑。

有同學會說，上來就給18塊錢，公司不虧死嘛！所以親愛的朋友們，你們睜大眼睛看一下「18元」右面的小字「最多」，套路深啊。

然后，通過用紅包的方式，吸引用戶提現，但是這個時候會彈出來手機號登錄頁面。（用紅包吊著用戶去登錄。）

對于一二線用戶，或許對這種運營方式比較反感，感覺在耍人，浪費時間，覺得這就是套路我嘛。

但是針對五六線的用戶，他們對互聯網的東西存在距離感，敬畏心，會下意識的認為存在即合理。同時他們很閑，感覺點一點也并沒有什么，而且占了些小便宜。這就是他們跟一二線城市用戶差異的地方。

同時，趣頭條通過邀好友、收徒弟、徒收徒的裂變方式獲得金幣/現金的運營手段，不斷的吸引用戶的好奇心和金錢的誘惑，以及閱讀就能賺錢的賣點，給產品帶來了迅猛的新增。

總的來說，下沉用戶，對有利可圖的運營活動，是愿意花大量的時間成本，從而間接的為產品做貢獻的。

要通俗易懂

不像一二線城市用戶，覺得產品的運營文案寫的高級、有格調、很杜蕾斯、挺網易云音樂的，覺得符合自己獨特的氣質，恨不得立馬翻它的牌子。

三四五六線城市的用戶，受教育程度有限，對一件事情的分析耐心有限，文案上要盡可能通俗易懂、直白，才能使他們短時間get到你的點。

比如：趣頭條，被邀請的朋友看到的頁面。

沒有拐彎抹角的詩和遠方，直接就是「教你輕松賺現金」，而且底下有一排小字「不會的可以來問我，大家一起賺」。

多么直接、易懂、質樸的語言，但這些就夠了，因為只有讓對方明白了這是干嘛的，且有吸引力，參與度（轉化率）才比較高。

再比如，針對下沉城鎮的一些線下刷墻的運營宣傳。

知道用戶關注什么、在意什么，并以合理的表達出來，讓他們看懂才是最重要的，整些虛的都沒用。

以上可以看出，針對非一二線城市用戶的運營，要放大占小便宜的利益點，同時還要更通俗易懂，才能讓用戶更快理解、吸引從而參與。

2. 產品層面

如果把運營活動，理解為塞門縫里的「包小姐」小卡片（運營banner），進行拉新（拉客），那么產品層面就是要看「包小姐本人」的服務了，影響著用戶的體驗，關乎著用戶的留存。

那么，針對三四五六線城市的用戶，產品層面應該做到哪些呢？我覺得最重要的一點就是：簡單易用，避免懵逼。

比如：前段時間在朋友圈刷屏的「她face+」，只有簡單的幾個功能，而且很土嗨，就能在小程序排行榜上名列前茅。

打開應用你只需要做兩個選擇：要么拍照，要么從相冊中選擇照片。

我抱著試一試的心態，去體驗了一波產品，然后我被變成這樣了。

嗯，看到這樣的自己，說實話還是有點小興奮的。然后，我膨脹了，我開始想探索更多可能性了……

這個時候，我只需要點右下角的「我變」，就可以換不同的風格。

可以看出，這款產品戳中用戶痛點的同時，將功能操作做的如此簡單易用，因此，在「下沉市場」中非?；鸨ó斎贿\營做的也不錯）。

再比如：悟空問答，可以稱它為「下沉」版的知乎，這款產品是今日頭條做的針對四五六線用戶的問答社區。

從產品的功能層面來看，針對下沉用戶的「悟空問答」，明顯的更加簡單易操作，沒有像知乎一樣的「想法」，「大學」等功能，上來看到的就是「推薦」的 feed。

同時在產品內容層面，也針對下沉用戶做了跟知乎差異化推薦。

因為針對四五六線用戶，「有用」只是他網絡生活中一部分，更大的部分是「有趣」，也就是「殺時間」的產品。因此，產品推薦的問題大多是「你見過最美的女人是什么樣？」，「如何不被傳銷組織騙？」之類更符合他們認知層面的內容。

不過，知乎目前也從早起努力經營，且引以為傲的精英氛圍，明顯意識到這一策略在用戶增長方面的短板，所以能從近期產品推薦給用戶的更接地氣的內容來看，他們也在做「用戶下沉」的事情。

以上可以看出，針對非一二線用戶產品方面，功能要盡可能的簡單易用，避免懵逼；內容層面，也要更符合下沉用戶的認知，更有趣，幫助他們消磨時間。

3. 設計層面

在這個時候，設計師們會說，難道我們的設計也要做成土嗨+鄉村迪斯科風，來迎合五六線城市用戶的審美嘛？

不可否認，下沉用戶的審美還停留在，「多就是好，顏色豐富就是好」的階段。因此，他們往往會被「拼多多」所代表的那種復雜，信息高度密集的設計風格所吸引。

你可能會說：這不符合設計師們所推崇的「極簡，留白」的高格調設計追求。但是，這正是身為設計師的我們，需要平衡的客觀存在的問題。

比如：下面的案例，就可以看出信息密集，顏色豐富，但是，也可以做出高品質的設計。

再比如：抖音目前已經下沉到農村用戶，但是 UI設計上也不是非要土嗨風，依然不輸給一二線主流產品，然而五六線用戶也沒有因此而無法接受。

所以，我們不能因為個別針對五六線產品的設計做的 LOW，而故意做出葬愛家族般的設計。

我們應該平衡他們審美的同時，兼顧著設計美學，從而肩負著提升國民審美水平的使命。

因為，人人都有享受高品質設計的權利，這需要一代又一代設計師去努力的。這一點，我們需要像日本設計學習。

總結

總的來說，生活在一二線城市、過著快節奏的生活、用著新穎的產品、從事著互聯網的我們，時常覺得自己的感受就能代表所有人，感覺我們都將進入并將長期處于人工智能時代了，怎么還有人不懂互聯網呢。這就如黃崢（拼多多創始人）所說「五環內的人」無法理解「五環外」的世界。

通過最近思考發現，不管從「用戶需求」還是「增長潛力」方面，「用戶下沉」都是互聯網產品可行的事兒，但是，我們需要針對「下沉用戶」在運營、產品、設計層面做差異化處理，使它更容易被非一二線用戶接受并使用。

同時，深處互聯網行業的我們，應該在低頭琢磨小功能的時候，抬頭看一下大環境，多研究下用戶真實處境及場景，避免沉浸在自嗨的方案中。

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

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

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才夠用。在電腦上看這個尺寸要比手機大兩倍?。ó斎焕?，那時的電腦屏幕通常不是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界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。