整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
著Android Q 與 iOS13 先后發(fā)布深色模式，深色氛圍一躍而上成為系統(tǒng)平臺(tái)級(jí)能力，這不禁讓我們重新認(rèn)真思考深色模式對(duì)于文娛類產(chǎn)品有什么樣的價(jià)值與機(jī)會(huì)？
2019 年優(yōu)酷經(jīng)歷了一次體驗(yàn)設(shè)計(jì)升級(jí)，在前期的設(shè)計(jì)探索中，優(yōu)酷設(shè)計(jì)團(tuán)隊(duì)嘗試了各種方向，其中包括全深色的界面。而隨著Android Q 與 iOS13 先后發(fā)布深色模式，之前隨公眾理解的深色氛圍一躍而上成為系統(tǒng)平臺(tái)級(jí)能力，這不禁讓我們重新認(rèn)真思考深色模式對(duì)于文娛類產(chǎn)品有什么樣的價(jià)值與機(jī)會(huì)？
體驗(yàn)設(shè)計(jì)升級(jí)期間嘗試的全深色方案：
深色界面在專注環(huán)境下與內(nèi)容有更高的契合度 ， 更凸顯內(nèi)容、緩解視覺疲勞
深色的背景降低了內(nèi)容周圍元素的存在感，同時(shí)內(nèi)容被凸顯出來，尤其是視頻和圖片會(huì)變的更加清晰，這樣會(huì)讓瀏覽者更加專注于內(nèi)容，這讓深色界面與內(nèi)容平臺(tái)更加契合。
由于深色消除了白光對(duì)人眼的刺激，這樣大大降低了用戶在長(zhǎng)時(shí)間的視頻和圖片消費(fèi)中視覺疲勞。
深色界面更易營造品質(zhì)感與沉浸感
在我們視覺升級(jí)的初期方案探索中，全深色方案是第一時(shí)間吸引到大家的。大家包括非設(shè)計(jì)的同學(xué)能清楚的講出對(duì)深色界面的感受，包括“專業(yè)”“高級(jí)”“沉浸感”“很特別”。大家為什么會(huì)有這樣的感受，我嘗試找到了一些線索，我們對(duì)深色界面的認(rèn)識(shí)來自于專業(yè)軟件、游戲、科幻電影給我們留下的印象。
深色界面更易建立填充感
白色背景的心理認(rèn)知映射至日常生活的白紙和筆，白色在日常認(rèn)知中是代表“空”，所有白色上的細(xì)微色彩變化都被理解為“添加”。而深色本身被理解為一種填充背景色，其認(rèn)知屬性與其他頁面元素跟接近，從而讓頁面的填充感更強(qiáng)，這在一些信息匱乏的頁面會(huì)更明顯。
同時(shí)需要注意的一些點(diǎn)：
（1）文字的信息占比決定了是否將深色界面作為默認(rèn)主題
幾乎所有的圖片編輯和視頻剪輯類以及部分視頻娛樂產(chǎn)品像抖音、Netflix等使用了默認(rèn)的深色界面，但用我們也注意到這些產(chǎn)品的共同點(diǎn)是文字在產(chǎn)品中占極小的比重。原因是光線充足的環(huán)境下，白底黑字提供了最佳的可讀性，而黑底白字不僅降低了可讀性，同時(shí)有研究表明更容易產(chǎn)生視覺疲勞。所以要謹(jǐn)慎考慮文字在產(chǎn)品中所占的比重，來決定是否將深色作為默認(rèn)主題。
（2）用戶和平臺(tái)都需要一個(gè)低成本開關(guān)
一個(gè)有趣的信息是“絕大多數(shù)的娛樂活動(dòng)都發(fā)生在晚上”，優(yōu)酷的數(shù)據(jù)也顯示用戶在夜間的分時(shí)活躍度和使用時(shí)長(zhǎng)高于白天。而深色模式無疑能給用戶帶來更好的夜間使用體驗(yàn)，而文字在優(yōu)酷中占有相當(dāng)一部分比重，所以我們同樣要考慮到白天文字的可讀性。考慮到平臺(tái)的技術(shù)實(shí)現(xiàn)成本和用戶的開啟成本，深色界面需要一個(gè)低成本的開關(guān)。對(duì)于深色模式價(jià)值的判斷，幫助我們?cè)趦?yōu)酷此次深色模式設(shè)計(jì)上獲得更清晰的設(shè)計(jì)策略及方向。
Android Q 與 iOS13 先后發(fā)布深色模式后，我們等來了深色界面的“低成本開關(guān)”，優(yōu)酷也迎來新一輪的設(shè)計(jì)升級(jí)。在著手之前我們首先制定了體驗(yàn)的目標(biāo)和方向，以便在關(guān)鍵點(diǎn)上快速地決策并達(dá)成共識(shí)。
全局印象一致、降低實(shí)現(xiàn)成本、建立靈活可控機(jī)制
全局印象一致：一些體現(xiàn)產(chǎn)品獨(dú)特性的視覺特征值得花費(fèi)精力產(chǎn)出第二份設(shè)計(jì)做適配，讓它們?cè)谏钌Ｊ较乱部瓷先ズ椭C，而有些低優(yōu)先級(jí)的但成本較高的適配可以降級(jí)處理或不做處理。深色模式不需要建立一套新的色彩層級(jí)關(guān)系，而是延續(xù)原有的色彩層級(jí)關(guān)系，只是使用了深色調(diào)的配色。但過程中如果發(fā)現(xiàn)原有的層級(jí)有可優(yōu)化的空間，也不必大動(dòng)干戈，因?yàn)樯钌Ｊ街螅瑢?duì)于色彩的調(diào)整變得更加全局、徹底、簡(jiǎn)單。
原有的深色定制的主題場(chǎng)景保持不變，不受深色模式的影響。例如高清頻道、會(huì)員首頁、導(dǎo)看場(chǎng)景、沉浸播放頁、運(yùn)營場(chǎng)，這些場(chǎng)景使用特殊的主題體現(xiàn)特定的的產(chǎn)品目的和視覺感受，應(yīng)該保持固定心智，不需要有模式的切換。少兒場(chǎng)景可以定制特殊的深色模式，原因是深色會(huì)給兒童帶來負(fù)面的心理影響。
降低實(shí)現(xiàn)成本、建立靈活可控機(jī)制：深色模式涉及的場(chǎng)景與團(tuán)隊(duì)非常多，按照常規(guī)做法會(huì)耗費(fèi)巨大的開發(fā)成本。我們利用視覺產(chǎn)品化能力，將視覺屬性與框架布局分離并與開發(fā)邏輯相互對(duì)應(yīng)，通過SDK 的方式統(tǒng)一管理，一處替換全端生效，遍于未來控制并快速定義產(chǎn)品風(fēng)格。同時(shí)，我們遵循了 iOS HIG 中的語義命令方式，這對(duì)于設(shè)計(jì)師和開發(fā)都非常友好，并且我們與系統(tǒng)的融合度會(huì)更高，避免未來因?yàn)榧嫒菪哉粘傻母鞣N問題。
產(chǎn)品印象：盡量保留產(chǎn)品的核心視覺特征
深色模式的切換就像拉上了家中的窗簾，光線暗下來但不會(huì)改變壁紙和家具的固有色。我們主要對(duì)優(yōu)酷五大欄目頭部氛圍和底欄圖標(biāo)進(jìn)行了深色的第二套設(shè)計(jì)，讓他們?cè)谏钌峡雌饋砗椭C。
主背景色選擇：保證與內(nèi)容的兼容度
色彩框架：包容且一致
我們將現(xiàn)有色彩進(jìn)行歸類，并歸納出每個(gè)類型的用途，從而建立色彩框架。這樣可以幫助我們確保同一用途的色彩包含的深色模式和淺色模式兩個(gè)色彩組合的唯一性，而不是單個(gè)色彩的唯一性。例如：白色會(huì)同時(shí)使用在背景和有些按鈕文字上，我們不能在深色模式中規(guī)定白色變成深色，因?yàn)樵诎粹o上不適用。我們應(yīng)該規(guī)定背景色的淺色模式是白色，深色模式是深色，這樣按鈕文字就不會(huì)受到影響。
值得注意的是要先抓住一般類型，再看特殊個(gè)例。類如：我們將文字、圖標(biāo)歸納為信息層并劃分三個(gè)層級(jí)，而不是歸納為主標(biāo)題、副標(biāo)題、按鈕文字、底欄圖標(biāo)、頂導(dǎo)航圖標(biāo)。
用一般類型歸納色彩的用途可以涵蓋絕大部分的色彩類型，而特殊類型可以用場(chǎng)景、狀態(tài)、組件等維度來劃分，例如：“少兒一級(jí)背景色”、“可以隱藏的分割線”“黑色導(dǎo)航欄”。
色彩框架：
主要類型：
對(duì)比度的階梯：清晰降噪
我們?cè)诒尘暗膶?duì)比度上設(shè)置均勻的階梯變化，這種均勻的變化有利于建立背景層級(jí)的秩序感。值得注意的是與淺色模式不同在深色模式下背景的視覺感受是逐步被抬高的層，海拔越高明度高。
文字的對(duì)比度階梯則不同于背景，在深色和淺色模式下文字的對(duì)比度階梯是趨同的。原因是我們希望主標(biāo)題和副標(biāo)題要有足夠大的反差使主標(biāo)題足夠醒目，而副標(biāo)題與置灰文字的反差則不需要那么大，值得注意的是需要適度提升次要層級(jí)文字的對(duì)比度。
更好的對(duì)比度階梯有利于在復(fù)雜信息密度界面的視覺降噪。
可讀性：跨場(chǎng)景測(cè)試
深色的外觀很可能受到用戶的喜歡，要考慮到用戶在深夜弱光的環(huán)境中使用深色模式的同時(shí)也不能排除白天強(qiáng)光的使用場(chǎng)景，手機(jī)屏幕的自動(dòng)亮度調(diào)節(jié)會(huì)給實(shí)際的比度帶來影響。我們觀察到 iOS 深色模式的設(shè)計(jì)提升了幾乎所有元素的對(duì)比度，這值得我們有所考慮。所以盡可能在這兩種極端環(huán)境中測(cè)試我們的最終設(shè)計(jì)，保證信息的可讀性。
規(guī)范化：建立深色模式色板
基于色彩框架以層級(jí)劃分色彩為主，特殊類型作補(bǔ)充，在對(duì)應(yīng)的淺色模式的層級(jí)下添加深色模式的色彩。
同時(shí)我們需要在產(chǎn)品的真實(shí)場(chǎng)景中反復(fù)的對(duì)比嘗試確保實(shí)際效果是滿足要求的。
另外，一些細(xì)節(jié)上的處理仍然值得我們的關(guān)注：
圖標(biāo)：面型圖標(biāo)在深色下識(shí)別性更優(yōu)
深色模式下線條型的圖標(biāo)有時(shí)會(huì)顯得過于單薄缺少份量感導(dǎo)致關(guān)注度降低，為改善這種情況我們可以替換為塊面型的圖標(biāo)。此外有研究表明多數(shù)情況下塊面型的圖標(biāo)會(huì)比線條型的圖標(biāo)有更好的易用性，他們會(huì)被更快速的識(shí)別。
分割線和陰影：轉(zhuǎn)換為填充色來區(qū)分
深色模式多數(shù)情況下對(duì)于層級(jí)的區(qū)隔來說，使用填充色會(huì)比分割線和陰影更有效。
深色模式不是簡(jiǎn)單的顏色的明暗變化的處理，它是一套全新的設(shè)計(jì)風(fēng)格，涉及的場(chǎng)景與團(tuán)隊(duì)非常多，按照常規(guī)做法會(huì)耗費(fèi)巨大的開發(fā)成本，如何快速實(shí)現(xiàn)優(yōu)酷雙端的深色模式適配是當(dāng)前面臨的主要問題。
優(yōu)酷去年設(shè)計(jì)主導(dǎo)與開發(fā)共同搭建視覺產(chǎn)品化能力，設(shè)計(jì)側(cè)針對(duì)優(yōu)酷業(yè)務(wù)屬性把視覺進(jìn)行不同顆粒度的拆解抽象，把影響視覺風(fēng)格調(diào)性的最基礎(chǔ)屬性（顏色、字號(hào)、間距、圓角、尺寸）進(jìn)行了統(tǒng)一design token命名，設(shè)計(jì)與開發(fā)團(tuán)隊(duì)共同維護(hù)一套可擴(kuò)展的視覺屬性。視覺屬性與框架布局分離并與開發(fā)邏輯相互對(duì)應(yīng)，通過SDK 的方式統(tǒng)一管理，一處替換全端生效，遍于控制并快速定義產(chǎn)品風(fēng)格。
在視覺產(chǎn)品化能力下進(jìn)行深色模式的適配與落地相對(duì)來說比較容易。在兩個(gè)風(fēng)格的轉(zhuǎn)化中主要需要適配：色彩、圖片。
色彩：使用語義命名交付設(shè)計(jì)
整個(gè)優(yōu)酷系統(tǒng)顏色體系分：靜態(tài)色（在淺色模式下與深色模式下不需要變化的）、動(dòng)態(tài)色（在深色模式下需要變化）。
動(dòng)態(tài)色根據(jù)不同的層級(jí)進(jìn)行重新語意化工程命名，底層還是保留靜態(tài)色design token 。整個(gè)顏色會(huì)由一個(gè)sdk 進(jìn)行統(tǒng)一控制，也保證了整體的一致性。
同時(shí)，我們遵循了 iOS HIG 中的語義命令方式，這對(duì)于設(shè)計(jì)師和開發(fā)都非常友好。語義命名實(shí)際上是為深色模式的動(dòng)態(tài)色建立一個(gè)令牌，例如：命名一個(gè)叫“主背景色”的動(dòng)態(tài)色，它實(shí)際包含了深色模式的主背景色和淺色模式的主背景色。設(shè)計(jì)師把“主背景色”標(biāo)注在界面中相應(yīng)的元素上，開發(fā)就可以實(shí)現(xiàn)這個(gè)元素兩種模式的色彩切換，當(dāng)然我們還要為開發(fā)同學(xué)準(zhǔn)備一份動(dòng)態(tài)色的對(duì)照表。
復(fù)用與濾鏡
對(duì)于深色模式的圖片處理，我們給出以下建議：
（1）設(shè)計(jì)側(cè)盡可能一套圖片適配兩個(gè)模式, 例如，使用不透明度設(shè)置這類淡彩色可以同時(shí)適配淺色和深色模式，這是一種取巧的做法。
（2）開發(fā)側(cè)可以選擇代碼濾鏡
（3）對(duì)于一些無法復(fù)用的重要圖片，需根據(jù)深色界面增加一套新的切圖資源
工具化：設(shè)計(jì)的輸出與維系
通常設(shè)計(jì)完成后與開發(fā)之間的協(xié)作是通過sketch Measure直接一鍵導(dǎo)出標(biāo)注即可。
那我們對(duì)基礎(chǔ)屬性進(jìn)行統(tǒng)一design token命名后，后續(xù)的標(biāo)注設(shè)計(jì)要如何標(biāo)注？需要對(duì)照表格手動(dòng)標(biāo)注么？開發(fā)怎么看design token？
蓋亞是優(yōu)酷設(shè)計(jì)主要在用的一個(gè)提效工具，不同于sketch Measure 導(dǎo)出RGB色值，蓋亞導(dǎo)出標(biāo)注會(huì)對(duì)屬性的值進(jìn)行符號(hào)化處理，顯示屬性對(duì)應(yīng)的值的同時(shí)會(huì)顯示對(duì)應(yīng)的design token，從而解決了設(shè)計(jì)輸出與開發(fā)實(shí)現(xiàn)的效率問題。
深色模式在用戶體驗(yàn)中的價(jià)值體現(xiàn)還需要我們進(jìn)一步的觀察和思考，相信實(shí)現(xiàn)這一設(shè)計(jì)僅僅是一個(gè)開端，深色模式怎樣跟文娛產(chǎn)品更緊密的配合，怎樣結(jié)合內(nèi)容和用戶做出更多的洞察與創(chuàng)新是我們接下來的目標(biāo)。
作者：文娛設(shè)計(jì)中心，公眾號(hào)：AlibabaDesign（ID：AlibabaDesign）
來源：https://mp.weixin.qq.com/s/gj98pkA1uO-ckMwWgdkgRw
本文由 @AlibabaDesign 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載
題圖來自Unsplash，基于CC0協(xié)議
次小編整理了2018年的移動(dòng)UI設(shè)計(jì)規(guī)范，包含IOS和Android兩個(gè)系統(tǒng)。
Part 1 設(shè)計(jì)前的準(zhǔn)備工作
①合適的設(shè)計(jì)工具
Sketch
精不精通Sketch，就看插件用的溜不溜，推薦個(gè)網(wǎng)站：Sketch.cm
無論是學(xué)習(xí)Sketch，還是搜插件、找素材，都是Sketch使用者的優(yōu)選項(xiàng)。
Sketch是OS X平臺(tái)獨(dú)占，需要下載Sketch可以到這個(gè)網(wǎng)站去下載。
這里推薦個(gè)Mac平臺(tái)應(yīng)用的下載網(wǎng)站，使用Mac的小伙伴可以去這里下：Xclient
我個(gè)人是很推薦使用Sketch做UI設(shè)計(jì)的，軟件本身已經(jīng)提供了大量的IOS和Android系統(tǒng)設(shè)計(jì)資源，配合各類插件，幾乎無所不能。
Photoshop
相比于Sketch來說，體型胖了點(diǎn)，在UI設(shè)計(jì)上略遜一籌。不過因?yàn)镾ketch是OS X獨(dú)占，所以因?yàn)槠脚_(tái)限制的原因，用PS設(shè)計(jì)也沒有問題。
我很久沒用它做UI設(shè)計(jì)了，也沒啥可推薦的了。
②做好版本管理、文件歸檔的工作
專業(yè)水平不僅體現(xiàn)在設(shè)計(jì)能力之上，優(yōu)秀的管理能力也是重要的職業(yè)素養(yǎng)。
合理規(guī)劃好設(shè)計(jì)版本，進(jìn)行明確的文件歸檔工作，有助于提高設(shè)計(jì)師的工作效率。
這里不贅述了，每個(gè)人有自己的版本管理方式，不過目標(biāo)只有一個(gè)：清晰高效。
Part 2 關(guān)于手機(jī)的基礎(chǔ)概念
這里的概念性內(nèi)容不要強(qiáng)行記憶，理解即可，它是做移動(dòng)UI設(shè)計(jì)的理論常識(shí)。
①基礎(chǔ)常識(shí)：手機(jī)分辨率、屏幕尺寸、屏幕密度
手機(jī)分辨率：
手機(jī)屏幕的像素點(diǎn)數(shù)。比如750*1334、720*1280等等，細(xì)分還有物理分辨率和邏輯分辨率，這里不擴(kuò)展講解了，想了解自行百度吧。
手機(jī)分辨率牽扯到的就是工作時(shí)設(shè)計(jì)稿的尺寸，只要記住設(shè)計(jì)尺寸就可以了。
屏幕尺寸：
手機(jī)對(duì)角線的物理尺寸，單位是英寸。IPhone 6/7/8的尺寸就是4.7英寸……
屏幕尺寸和設(shè)計(jì)其實(shí)關(guān)系不大，主要是用來計(jì)算屏幕密度的。
屏幕密度(DPI或PPI)：
每英寸的像素點(diǎn)數(shù)。簡(jiǎn)單理解就是屏幕密度越大，畫面越逼真細(xì)膩。
下面是屏幕密度的計(jì)算方法，范例是5英寸，分辨率為1920*1080的手機(jī)：
屏幕密度牽扯最多的是安卓系統(tǒng)，安卓手機(jī)屏幕本身的密度種類非常多，這也是導(dǎo)致了安卓系統(tǒng)需要提供多套切圖的原因。(使用SVG格式圖片可以解決多套切圖和適配的問題，這個(gè)我們下面會(huì)提到)
Part 3 基礎(chǔ)設(shè)計(jì)規(guī)范——IOS系統(tǒng)
這是蘋果的開發(fā)者官網(wǎng)：傳送門
這里有持續(xù)更新的最新設(shè)計(jì)規(guī)范和資源模板，雖然是全英文的，但并不影響閱讀。
設(shè)計(jì)師應(yīng)該學(xué)會(huì)從官方獲得設(shè)計(jì)資料，這比其他途徑獲得的資料更加全面和權(quán)威。
下圖是截止到目前，可能還需要支持的機(jī)型和對(duì)應(yīng)的設(shè)計(jì)尺寸：
① 設(shè)計(jì)稿尺寸
只推薦750*1334的尺寸來做設(shè)計(jì)稿，這是向上向下都最容易適配的尺寸，包括用這個(gè)尺寸去適配Android版。
除了IPhone X的比例特殊外，其他的IPhone比例幾乎差不多的，比較容易適配。
使用Sketch設(shè)計(jì)：
使用375 * 667尺寸即可，開發(fā)在Xcode里也是使用這個(gè)尺寸。
導(dǎo)出的@2x圖適配IPhone 5/5S/5C/SE 6/6S/7/7S/8
導(dǎo)出的@3x圖適配Iphone 6/6S/7/7S/8 Plus IPhone X
使用Photoshop設(shè)計(jì)：
畫布就建成750 * 1334尺寸的即可，在這個(gè)前提之下，
導(dǎo)出原尺寸圖片加后綴@2x，適配IPhone 5/5S/5C/SE 6/6S/7/7S/8
導(dǎo)出1.5倍圖片加后綴@3x，適配IPhone 6/6S/7/7S/8 Plus IPhone X
②常用數(shù)據(jù)
下面的內(nèi)容蘋果官方提供的模板文檔其實(shí)都有對(duì)應(yīng)的數(shù)據(jù)，可以去官網(wǎng)下載。
字號(hào)使用建議(這個(gè)不是硬性規(guī)定，根據(jù)視覺效果酌情使用)
導(dǎo)航文字 34-38px
標(biāo)題文字 28-34px
正文文字 26-30px
輔助文字 20-24px
Tab bar文字 20px
圖標(biāo)尺寸建議
APP應(yīng)用圖標(biāo)，建議使用1024*1024尺寸去做，逐級(jí)縮小去應(yīng)用到各種場(chǎng)景中。
SKetch已經(jīng)提供了IOS和Android系統(tǒng)的APP尺寸圖標(biāo)模板，直接使用就可以了。
③ 界面適配
程序內(nèi)部的功能界面：這種界面通過寫成自適應(yīng)的界面可以很好的適配各種機(jī)型；如果有特殊的布局要求，也可以讓開發(fā)根據(jù)特定機(jī)型去調(diào)整，不需要單獨(dú)為各類機(jī)型再做設(shè)計(jì)稿。
覆蓋全屏類的界面：比如閃屏、啟動(dòng)頁、引導(dǎo)界面、插畫頁面等等，這類覆蓋全屏的界面必須要單獨(dú)為IPhone X的比例重新繪制或者調(diào)整設(shè)計(jì)稿。
其他的IPhone機(jī)型，遇到這種界面，整體放大縮小、微調(diào)之后按照各機(jī)型的設(shè)計(jì)尺寸輸出對(duì)應(yīng)的切圖就可以了。
IPhone X的安全區(qū)域：IPhone X的安全區(qū)域就是扣除頂部劉海狀態(tài)欄和底部虛擬home鍵之后，中間的內(nèi)容顯示區(qū)域。如果你不得不使用IPhoneX的尺寸做設(shè)計(jì)稿，請(qǐng)一定設(shè)置好參考線，不要把內(nèi)容做進(jìn)這兩塊區(qū)域內(nèi)部。
④ 界面標(biāo)注切圖
標(biāo)注切圖純粹是重復(fù)性勞動(dòng)，但還要花費(fèi)大量時(shí)間。不過現(xiàn)在配合SKetch插件，基本上實(shí)現(xiàn)了標(biāo)注切圖的自動(dòng)化，所以效率已經(jīng)提升了非常多了。
這里就不用實(shí)例說明了，有需要可以查看之前的文章。
———————— 簡(jiǎn)單理解標(biāo)注切圖的原理 ———————
1. 簡(jiǎn)單理解APP構(gòu)成：
下圖是IOS開發(fā)工具Xcode里的一個(gè)空白頁面，圖片的文字標(biāo)注請(qǐng)仔細(xì)閱讀。
本質(zhì)上，開發(fā)寫APP界面和設(shè)計(jì)做設(shè)計(jì)稿是一樣的，只不過兩者實(shí)現(xiàn)方法不同。
APP的構(gòu)成遠(yuǎn)遠(yuǎn)要比上圖寫的復(fù)雜的多，我們這里使用最簡(jiǎn)單的理解方式。
2. 設(shè)計(jì)稿的標(biāo)注
根據(jù)上圖我們可以理解設(shè)計(jì)稿和程序之間的關(guān)系：
設(shè)計(jì)稿里的按鈕、文字、圖標(biāo)、列表、背景色、線條等等所有的設(shè)計(jì)元素，
在Xcode里都有對(duì)應(yīng)的控件，設(shè)計(jì)元素必須使用對(duì)應(yīng)控件，才能在APP的界面里顯示出來。
設(shè)計(jì)稿的標(biāo)注，實(shí)質(zhì)上是標(biāo)注的各類控件的屬性以及相對(duì)于其他控件的關(guān)系：
設(shè)計(jì)稿中：
程序的對(duì)應(yīng)控件：
實(shí)際上各類控件的屬性也要比這個(gè)復(fù)雜的多，這里是最簡(jiǎn)單理解的舉例說明。
如今使用本地化插件Sketch Measure，幾乎不用手工標(biāo)注，標(biāo)注導(dǎo)出HTML后，扔給開發(fā)，他們想看什么屬性自己點(diǎn)擊查看就是了，所以我們這里了解下標(biāo)注原理就行。
而一些線上工具的插件，比如藍(lán)湖、墨刀、Mockplus等等，功能更加豐富，各位根據(jù)自身情況靈活運(yùn)用吧。
Sketch Measure去Sketch.im下載
3. 設(shè)計(jì)稿的切圖
———————— 切圖輸出套數(shù) ————————
IOS目前常用的還是輸出2套PNG圖片。@2x、@3x的后綴，是為了在Xcode導(dǎo)入圖片資源時(shí)，識(shí)別對(duì)應(yīng)機(jī)型所用的圖片。
Xcode里提供了相應(yīng)的位置，相同命名圖片會(huì)根據(jù)后綴填入到對(duì)應(yīng)的位置。
———————— 切圖輸出格式 ————————
目前Sketch提供了PNG、JPG、TIFF、WebP、PDF、EPS、SVG格式。
但是對(duì)于UI設(shè)計(jì)來說，常用的圖片格式就以下幾種：
想具體了解WebP和SVG，可以查看之前的文章。
———————— 切圖輸出規(guī)范 ————————
前提：同一類型、位置的切圖，請(qǐng)保證切圖尺寸、規(guī)格一致，圖片尺寸為偶數(shù)大小。
1.有操作功能、可點(diǎn)擊的功能性切圖：最小點(diǎn)擊區(qū)域問題
蘋果官方提供的能準(zhǔn)確點(diǎn)擊的最小點(diǎn)擊區(qū)域：88 * 88，單位px。
小于這個(gè)范圍也可以點(diǎn)擊，但是點(diǎn)擊不靈敏，體驗(yàn)較差。
對(duì)于比這個(gè)范圍小的可點(diǎn)擊按鈕，周圍需要用透明區(qū)域填充后再輸出切圖。
解釋下為什么用透明區(qū)域填充來擴(kuò)大點(diǎn)擊區(qū)域范圍：
圖標(biāo)這東西，對(duì)設(shè)計(jì)師來說沒區(qū)別，都是圖片。
但對(duì)開發(fā)來說，可操作和不可操作的圖標(biāo)是兩種類型的控件，圖標(biāo)的樣式不過是傳給該控件的顯示圖片罷了。
可操作的功能圖標(biāo)在Xcode對(duì)應(yīng)控件是UIButton。
對(duì)控件來說，如果不在代碼里明確固定控件的大小、點(diǎn)擊區(qū)域等等各類屬性，設(shè)計(jì)師傳給我多大的圖，這個(gè)控件就會(huì)被這張圖撐到多大。
你給我一張40*40的按鈕切圖，如果開發(fā)什么都不做，那這個(gè)UIButton在手機(jī)界面里就被撐到40*40的大小。
我也可以在Xcode里寫幾行代碼，固定圖片的大小就是40*40，擴(kuò)大UIButton這個(gè)控件的大小變成88*88，這樣這個(gè)控件的點(diǎn)擊區(qū)域也擴(kuò)大了。
但是一張規(guī)范的切圖就能解決的事情，為什么還要在代碼里再手動(dòng)加幾行呢？
一個(gè)可點(diǎn)擊按鈕需要加一行代碼，整個(gè)APP就可能多加上百行上千行的代碼。
規(guī)范的切圖也是可以提升產(chǎn)品開發(fā)效率的。
2.非功能性切圖，比如列表圖標(biāo)、說明圖標(biāo)等，按統(tǒng)一規(guī)格的最小尺寸切。
這么切還可以減少一些程序因圖片資源大小導(dǎo)致的體積大小問題。
這類切圖，對(duì)應(yīng)的是UIImageView控件，就是一張圖片，無操作，只是占位和顯示。
所以你按照相同規(guī)格，最小尺寸切就可以了。
有朋友問：一定要切正方形的嗎？如果圖標(biāo)都是30*20的，那我統(tǒng)一切30*20的行不行
答案是：可以，這個(gè)沒有完全的硬性規(guī)定。雖然我是設(shè)計(jì)師，但也會(huì)去寫一些IOS程序。正方形規(guī)格切圖就是為了方便開發(fā)，當(dāng)然還是推薦你使用正方形規(guī)格來切圖。
但實(shí)際開發(fā)過程中，只要保證同一位置，切圖規(guī)格統(tǒng)一就可以。
切圖輸出狀態(tài)：
同一按鈕、元素的不同狀態(tài)，要明確命名對(duì)應(yīng)狀態(tài)之后，分別輸出對(duì)應(yīng)圖片。
下圖示例按鈕的選中狀態(tài)多出現(xiàn)在游戲APP中，這里僅表示說明。
———————— 切圖的命名規(guī)則 ————————
不要使用中文、特殊字符，請(qǐng)使用英文、下劃線、數(shù)字對(duì)切圖命名，數(shù)字不要打頭。
命名方式盡量清晰，推薦采用：種類_位置_功能_狀態(tài)
示例說明：btn_homepage_seach_normal@2x.png
開發(fā)看到就會(huì)明白：這是位于首頁，處于正常狀態(tài)的搜索按鈕2倍切圖。
Part 4 基礎(chǔ)設(shè)計(jì)規(guī)范——Android系統(tǒng)
這是Android Material Design中文版的地址：傳送門
Android的官方地址資料不容易過去看啊，這里也就不放官網(wǎng)的地址了。
Android這里就不放下載地址了，因?yàn)楣俜降南螺d鏈接可能不是所有人都上的去。
Android不整理各類機(jī)型的尺寸規(guī)范了，數(shù)據(jù)零散，難以整理。所以我們從屏幕密度這里理解設(shè)計(jì)規(guī)范就可以了。
①Android手機(jī)屏幕密度
上文我們提過屏幕密度的計(jì)算方式，安卓手機(jī)因?yàn)楦鞣N屏幕尺寸和分辨率，導(dǎo)致如果單純按照數(shù)值計(jì)算，可能屏幕密度種類會(huì)多到讓設(shè)計(jì)師崩潰。
所以為了解決這個(gè)問題，安卓手機(jī)出廠時(shí)，屏幕有自己初始的固定密度，系統(tǒng)會(huì)根據(jù)這些屏幕密度自行適配，下圖是對(duì)應(yīng)的屏幕密度表：
②Android的開發(fā)單位以及設(shè)計(jì)尺寸
正因?yàn)锳ndroid手機(jī)分辨率多樣，為了保證同一設(shè)計(jì)在不同屏幕密度的手機(jī)上顯示效果一致，Android系統(tǒng)使用了下面兩個(gè)單位：
dp：android開發(fā)單位，相當(dāng)于比例換算單位。使用該單位，可以保證控件在不同密度的屏幕上按照比例解析顯示成相同視覺效果；
sp：android開發(fā)文字單位，和dp類似，也是為了保證文字在不同密度的屏幕上顯示相同的效果。
當(dāng)屏幕密度為MDPI（160DPI）時(shí)，1dp=1px
當(dāng)屏幕密度為MDPI（160DPI）時(shí)，1sp=1px
按照上面兩個(gè)公式的換算，同樣dp大小的圖片在不同屏幕密度的手機(jī)上如下圖所示，
基本可以保證圖片顯示效果在各類手機(jī)上相同。
設(shè)計(jì)稿尺寸：
通過上面的分析，在xHDPI這個(gè)密度等級(jí)下，倍數(shù)關(guān)系為2，推薦使用720*1280尺寸做設(shè)計(jì)稿，換算方便，適配容易。
不過目前的現(xiàn)狀是，如果公司的產(chǎn)品有IOS和Android兩個(gè)版本，基本上設(shè)計(jì)師只會(huì)做IOS的版本，然后套用給Android，這樣做也是可以的。兩者的切圖，在這個(gè)設(shè)計(jì)尺寸之下是可以通用的。
③設(shè)計(jì)稿的標(biāo)注
推薦使用dp和sp進(jìn)行標(biāo)注。但是呢，如果你用720*1280做設(shè)計(jì)，使用像素單位標(biāo)注，現(xiàn)在也不會(huì)影響什么。
因?yàn)榍懊嬉呀?jīng)提到過IOS的標(biāo)注了，這里也就不再贅述了。
④設(shè)計(jì)稿的切圖
理論上，對(duì)于Android系統(tǒng)來說，如果你想完美適配各種機(jī)型，應(yīng)該為不同的屏幕密度提供不同尺寸大小的切圖，而Android的開發(fā)工具也為不同的屏幕密度提供了對(duì)應(yīng)的資源文件夾。
但實(shí)際上，并不需要提供上面密度表那么多套的切圖，程序安裝包的大小基本就是由于圖片占用了太多的位置。
所以需要提供多少套圖片，請(qǐng)和公司的開發(fā)溝通，確定你們的產(chǎn)品實(shí)際支持哪些屏幕密度。
圖片格式：WebP和SVG
我個(gè)人是推薦現(xiàn)在為Android系統(tǒng)使用WebP格式，體積小，顯示效果好；
而SVG這種矢量圖片格式完美解決了Android多套切圖的問題，一套切圖，完美適配各種屏幕密度。
最小可點(diǎn)擊區(qū)域：
48dp：這和IOS的最小點(diǎn)擊區(qū)域性質(zhì)是一樣的，都是考慮到手指點(diǎn)擊的靈敏性的問題，設(shè)計(jì)可點(diǎn)擊控件的時(shí)候要考慮到這一點(diǎn)。
更多的注意事項(xiàng)和IOS切圖是相同的，這里不再贅述了。
Part 5 UI設(shè)計(jì)師的職業(yè)道路
如今的移動(dòng)UI設(shè)計(jì)行業(yè)已經(jīng)很成熟了，針對(duì)移動(dòng)UI設(shè)計(jì)的便捷工具層出不窮；移動(dòng)UI設(shè)計(jì)的理論體系知識(shí)也已經(jīng)漸漸完善。但這些都是外部因素，社會(huì)發(fā)展了，我們跟著一起向前適應(yīng)就好了；
但對(duì)于設(shè)計(jì)師工作能力的提升，還需要有明確的方法體系，更要有清晰的職業(yè)規(guī)劃！
很多設(shè)計(jì)師工作了幾年，卻一直在原地踏步，苦苦掙扎，甚至沒有職業(yè)目標(biāo)。
目前我工作5年，就從我自身的體會(huì)來分享我自己的方式，當(dāng)然精英設(shè)計(jì)怪就別跟我較真了，我代表的是那90%還在向上努力爬的普通設(shè)計(jì)怪~
工作能力，不僅僅指的是自身的專業(yè)技術(shù)水平，還包含了各種綜合性能力，請(qǐng)務(wù)必對(duì)自己有明確的職業(yè)規(guī)劃和能力發(fā)展軌跡。
———————— 工作0~2年 ————————
這個(gè)階段對(duì)于新人來說，是一個(gè)設(shè)計(jì)能力和工作經(jīng)驗(yàn)的快速積累過程，不夸張的說，這兩年內(nèi)的經(jīng)驗(yàn)可以決定你之后的職業(yè)發(fā)展道路是否順利。
此階段目的：提升設(shè)計(jì)專業(yè)能力、完善理論知識(shí)、積累實(shí)際項(xiàng)目經(jīng)驗(yàn)
這個(gè)階段就別想著一專多能了，先把那個(gè)“一專”搞好就可以了，當(dāng)然不是不讓你學(xué)習(xí)別的知識(shí)，而是說重心應(yīng)該發(fā)在提升目前的專業(yè)能力上。
提升設(shè)計(jì)能力：
一方面，通過公司的實(shí)際商業(yè)項(xiàng)目提升能力，這個(gè)沒什么可說的；
另一方面，業(yè)余時(shí)間務(wù)必進(jìn)行大量的作品練習(xí)，無論是臨摹、還是重設(shè)計(jì)都可以，目的就是一個(gè)：量大 從優(yōu)！
臨摹請(qǐng)用高質(zhì)量作品，臨摹一堆垃圾還不如不做，臨摹請(qǐng)務(wù)必做到99%以上的相似度，不然那不叫臨摹，臨摹的過程是考驗(yàn)軟件功力、設(shè)計(jì)技法能否完美復(fù)制的過程。
重設(shè)計(jì)請(qǐng)使用成熟知名產(chǎn)品，不要重設(shè)計(jì)一堆垃圾應(yīng)用，成熟產(chǎn)品每個(gè)界面的布局、樣式、功能、邏輯都是經(jīng)過深思熟慮后呈現(xiàn)給你的。
重設(shè)計(jì)的目的是要體會(huì)產(chǎn)品背后反映的設(shè)計(jì)意圖，不是為了重設(shè)計(jì)而重設(shè)計(jì)。
所以重設(shè)計(jì)之前請(qǐng)自己思考原產(chǎn)品這么做的目的再動(dòng)手。
完善理論知識(shí)：
沒有理論體系方法的支持，在設(shè)計(jì)道路上是走不遠(yuǎn)的。
現(xiàn)在關(guān)于UI設(shè)計(jì)的知識(shí)網(wǎng)站已經(jīng)很多了，當(dāng)然不局限在這類專業(yè)性網(wǎng)站上。
人人都是PM、UI中國、25學(xué)堂等等很多這類網(wǎng)站都是學(xué)習(xí)理論知識(shí)的好地方。
當(dāng)然，你也可以關(guān)注我嘛~（給自己打個(gè)廣告，吼吼~）
———————— 工作2~3年 ————————
3年對(duì)于互聯(lián)網(wǎng)從業(yè)者是一個(gè)坎兒，其實(shí)這是相對(duì)于職業(yè)規(guī)劃來說的。
通過前兩年的積累，對(duì)于UI設(shè)計(jì)本職工作已經(jīng)可以勝任了，接下來的要考慮的是個(gè)人的職業(yè)發(fā)展規(guī)劃了。
此階段目的：拓展技能、明確職業(yè)目標(biāo)、為進(jìn)大廠做準(zhǔn)備
拓展技能：
這個(gè)階段可以考慮“一專多能”的多能了，作為UI設(shè)計(jì)師，可以學(xué)習(xí)的東西實(shí)在太多了，交互、動(dòng)效、產(chǎn)品設(shè)計(jì)、開發(fā)等等。
不要求你達(dá)到那些專業(yè)從業(yè)者的地步，你要學(xué)到專業(yè)程度，還干什么UI設(shè)計(jì)啊。
目的是為了拓展自己的技能樹，為自己提供更多的競(jìng)爭(zhēng)力，這個(gè)習(xí)慣要一直保持伴隨之后的工作……
明確職業(yè)目標(biāo)：
設(shè)計(jì)師最怕的就是迷茫，如果說前兩年因?yàn)閯側(cè)胄校瑢?duì)行業(yè)，對(duì)自身都不完全了解，那情有可原。但工作兩年后，對(duì)自身的情況再不清醒那就說不過去了。
可以從以下方面考慮：
是始終堅(jiān)持在一線崗位的設(shè)計(jì)技術(shù)大牛，還是想做設(shè)計(jì)管理者，亦或者想從UI設(shè)計(jì)師轉(zhuǎn)職成交互設(shè)計(jì)、產(chǎn)品設(shè)計(jì)等等。
工作兩年已經(jīng)對(duì)自身，對(duì)行業(yè)有理解了，自己的能力是否適合設(shè)計(jì)崗位，對(duì)設(shè)計(jì)的熱愛是否能經(jīng)久不變都可以作為參考調(diào)節(jié)了。
為進(jìn)入大廠做準(zhǔn)備：
剛工作，可能限制于能力實(shí)力問題，委身于小公司。
但是！雖然我們身在小公司，但心要在BATJ TMD，
Apple、Google也不是不可以！
Skr！Skr！
這階段可以為大廠準(zhǔn)備一下，當(dāng)然不是讓你工作兩年多就去面試啊，如果你的能力特別突出，就當(dāng)我放屁吧~
意思是，可以以進(jìn)入大廠為目標(biāo)，綜合性的考慮自身的缺陷并盡量彌補(bǔ)。
千萬別以為就在小公司將就著干吧，反正拿的錢也差不多，大公司的滋味你是體會(huì)不到的。
拿同樣的薪水，在小公司和大公司的感受可是完全不同的，小公司對(duì)個(gè)人的眼界、人脈、能力提升的幫助都不可能和大公司相提并論。
———————— 工作3~5年 ————————
對(duì)互聯(lián)網(wǎng)人來說，3年一個(gè)坎，5年一個(gè)坎，都是職業(yè)規(guī)劃的節(jié)點(diǎn)時(shí)間。
3到5年的設(shè)計(jì)師，如果你真的用心工作了，一個(gè)人可以實(shí)實(shí)在在的頂起來一個(gè)項(xiàng)目。
我們上面說，為進(jìn)入大廠做準(zhǔn)備。在這個(gè)階段，可以考慮進(jìn)入一些中大型企業(yè)，提升個(gè)人的綜合能力、拓展人脈。
部分企業(yè)也比較喜歡要這個(gè)階段的設(shè)計(jì)師，有工作能力，職業(yè)道路又剛開始，搞不好可以在公司培養(yǎng)起來。
此階段的目的：提升綜合能力、拓展人脈圈子
這時(shí)的個(gè)人專業(yè)水平其實(shí)已經(jīng)不是問題，繼續(xù)在工作中磨練積累就可以了；
這里需要的是打開個(gè)人在職場(chǎng)上的道路。
說實(shí)話，即使是互聯(lián)網(wǎng)行業(yè)，搞技術(shù)除了要保證自身技術(shù)過硬之外，會(huì)不會(huì)發(fā)展人脈，能不能提升綜合能力才是最后職業(yè)道路能不能走遠(yuǎn)走高的決定因素。
提升綜合能力：
與各部門的溝通能力、對(duì)設(shè)計(jì)資源的協(xié)調(diào)能力、在公司業(yè)務(wù)上的話語能力、對(duì)項(xiàng)目的把控能力等等，都算綜合能力，這是對(duì)內(nèi)部的能力。
不要以為對(duì)設(shè)計(jì)師來說，我悶著頭接需求，做設(shè)計(jì)就可以了。
這樣的設(shè)計(jì)師，也許你可以踏踏實(shí)實(shí)當(dāng)個(gè)接需求的小設(shè)計(jì)，但你永遠(yuǎn)也只是一個(gè)這類的設(shè)計(jì)，對(duì)于有更高更強(qiáng)的職業(yè)追求的人來說，沒有幫助。
所以，張開嘴、邁開腿，一步一步嘗試去推動(dòng)自身進(jìn)步吧，這個(gè)沒什么技術(shù)性方法，必須要自己親自去做。
拓展人脈圈子：
人脈對(duì)個(gè)人職業(yè)道路的幫助，遠(yuǎn)遠(yuǎn)要比專業(yè)能力的幫助要大的多，這是對(duì)外的能力。
設(shè)計(jì)師的圈子，說實(shí)話不算大。搞技術(shù)的，本身就坐辦公室，而做設(shè)計(jì)的人本身性格也有一部分原因，但還是請(qǐng)你努力拓展自己的人脈。
對(duì)于自身的專業(yè)圈子，努力分享自己的設(shè)計(jì)經(jīng)驗(yàn)、工作心得，總結(jié)自己的體會(huì)，發(fā)布到各類設(shè)計(jì)專業(yè)論壇上，積極的幫助別人，這都算一種拓展方式。
時(shí)間久了，就會(huì)結(jié)識(shí)非常多的設(shè)計(jì)界朋友，設(shè)計(jì)大牛也會(huì)逐漸注意到你，這些都是你職業(yè)道路上的寶貴資源。
還可以認(rèn)識(shí)幾個(gè)不錯(cuò)的獵頭朋友，有好的職位，他們都會(huì)優(yōu)先想到你的。
這也是我寫的最后一篇關(guān)于基礎(chǔ)規(guī)范類文章，也算是整理一下工作到現(xiàn)在的基礎(chǔ)常識(shí)類內(nèi)容，以后不再寫這類基礎(chǔ)文章了。
人總要進(jìn)步的，設(shè)計(jì)師還是要靠干貨作品來撐腰的，對(duì)吧。
以后發(fā)的內(nèi)容都是我做過的實(shí)際商業(yè)項(xiàng)目，我會(huì)把設(shè)計(jì)經(jīng)驗(yàn)和工作方法融入到這些作品實(shí)例里來寫，這總比我單純講理論知識(shí)要強(qiáng)。
結(jié)語：今天就講到這里了，希望本文能夠?qū)Υ蠹矣兴鶐椭Ｏ矚g本文的小伙伴們可以關(guān)注一下小編哦~小編接下來會(huì)為大家?guī)砀鼉?yōu)秀的文章。我們不見不散咯！
1.Content Generator
下載地址：https://github.com/timuric/Content-generator-sketch-plugin
——用于生成人名、頭像、郵件、占位文字、地理位置、隨機(jī)數(shù)字等等
2. Subtle Patterns
下載地址：Subtle Patterns Photoshop plugin（是一款收費(fèi)插件）
——用于給圖層添加一些微妙的紋理效果
3.Rename It
下載地址：GitHub - rodi01/RenameIt: Sketch plugin to rename layers like a boss
——用于快速重命名圖層，比如可以使用例如「%n」這樣的語法快速命名一個(gè)連續(xù)列表，也可以自動(dòng)使用圖層尺寸來給圖層命名，可以很方便地使用「ABC Icon 36px * 36px」來導(dǎo)出Asset文件。
4. Sketch Arrange Artboard
下載地址：GitHub - kenmoore/sketch-arrange-artboards: Layout all artboards in a grid with user-specified number of rows
——幫助整理你混亂的Sketch Artboards
5. Sort Me
下載地址：GitHub - romashamin/sort-me-sketch: Sort artboards and layers by name
——根據(jù)圖層/畫布名字排序，配合Rename It使用效果拔群！
6. Icon Fonts
下載地址：GitHub - keremciu/sketch-iconfont: This plugin helps you easily insert and manage icons from icon fonts.
——直接在Sketch里添加FontAwesome的圖標(biāo)
7. Find and Replace
下載地址：GitHub - mscodemonkey/Sketch-Find-And-Replace: Sketch 3 plugin to do a find and replace on text within layers
——對(duì)Typo狂魔設(shè)計(jì)師簡(jiǎn)直是天大福音！媽媽再也不擔(dān)心我在50張Mock里打同一個(gè)錯(cuò)別字了！
8. Sketch Constraints
下載地址：GitHub - bouchenoiremarc/Sketch-Constraints: A plugin that integrates constraints in Sketch to lay out layers.
——通過標(biāo)注父子圖層間的關(guān)系，我們可以讓Sketch設(shè)計(jì)文件也可以Adaptive Layout，快速將同一套設(shè)計(jì)擴(kuò)展到多種尺寸。
9. Material Design Color Palette
下載地址：t32k/material-design-color-palette
——這個(gè)不用解釋啦，在Sketch里快速生成Material Design顏色板的利器
10. Measure
下載地址：GitHub - utom/sketch-measure: A measure tool for measurements & design specs.
——在Zeplin和Marketch等工具出現(xiàn)前的Spec標(biāo)注神器，但即使有了Zeplin和Marketch，我還是會(huì)有時(shí)候用它來手動(dòng)標(biāo)一些自動(dòng)標(biāo)注器說不清楚的Spec。
11. Marketch
下載地址：GitHub - tudou527/marketch: Marketch is a Sketch 3 plug-in for automatically generating html page that can measure and get CSS styles on it.
——Zeplin是一個(gè)神器，但是很多公司（尤其是大公司）出于商業(yè)機(jī)密的考慮不允許設(shè)計(jì)師使用在線的Spec標(biāo)注軟件，Marketch就是一個(gè)幾乎完美的替代品，它是一個(gè)可交互的Spec文檔，選擇某個(gè)元素后，各項(xiàng)尺寸都會(huì)顯示出來，右邊欄甚至還有寫好的CSS Code。自從用了它，和我廠的工程師溝通腰也不疼了、腿也不酸了！
12. Magic Mirror
下載地址：http://magicmirror.design/
——設(shè)計(jì)師有時(shí)候想把Mock放在手機(jī)/Mac設(shè)備上來營造某種效果（逼格），通常的解決辦法是在Sketch里導(dǎo)出設(shè)計(jì)稿然后在Photoshop再處理。而Magic Mirror這款插件幫助你在Sketch里實(shí)現(xiàn)這一效果，再也不用切換到Photoshop來做Dribbble圖啦！
13. InVision Craft
下載地址：Craft by InVision LABS
——這款插件絕不是一個(gè)內(nèi)容生成器那么簡(jiǎn)單。它可以幫助你擺脫「Lorem Ipsum」，使用真實(shí)的產(chǎn)品數(shù)據(jù)進(jìn)行設(shè)計(jì)，這對(duì)設(shè)計(jì)師來說簡(jiǎn)直太重要了！具體的操作辦法可以去他們的官網(wǎng)看視頻教程。
資源鏈接：
https://pan.baidu.com/s/1Jk6geJ2uB1Lj7EQtZS18OA 密碼:gwxo
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
