一、Weinre 說明
Weinre的本意是Web Inspector Remote，它是一種遠(yuǎn)程調(diào)試工具。功能與Firebug、Webkit inspector類似，可以幫助我們即時(shí)更改頁(yè)面元素、樣式，調(diào)試JS等。
使用Weinre工具，Weinre的本意是Web Inspector Remote，它是一種遠(yuǎn)程調(diào)試工具:
1.它可以將遠(yuǎn)程的頁(yè)面經(jīng)過代理在PC上調(diào)試頁(yè)面元素、樣式，JS。
2.可以監(jiān)聽頁(yè)面內(nèi)部的Ajax請(qǐng)求等。
3.可以監(jiān)聽頁(yè)面加載成功時(shí)候的Console控制臺(tái)輸出
官網(wǎng)首頁(yè)：http://people.apache.org/~pmuellr/weinre/docs/latest/
Weinre的原理
三個(gè)端的含義：客戶端(client)：本地的WebInspector，遠(yuǎn)程調(diào)試客戶端。服務(wù)端(agent)：本地的HTTPServer，為目標(biāo)頁(yè)面與客戶端建立通信。目標(biāo)頁(yè)面(target)：被調(diào)試的頁(yè)面，頁(yè)面已嵌入weinre的遠(yuǎn)程js。
調(diào)試過程：
客戶端將指令(請(qǐng)求DOM、執(zhí)行js)post到代理服務(wù)端，目標(biāo)頁(yè)面定時(shí)(大概5s)從服務(wù)端get指令，然后將結(jié)果post回服務(wù)端，最終客戶端定時(shí)從服務(wù)端get結(jié)果。
PS：由于Weinre的客戶端是基于Web Inspector開發(fā)，而Web Inspector只兼容WebKit核心的瀏覽器，所以只能在Chrome/Safari瀏覽器打開Weinre客戶端進(jìn)行調(diào)試。
二、Weinre安裝和使用
1.weinre是基于NodeJs，因此首先要安裝NodeJs，然后使用npm命令安裝weinre
npm -g install weinre
2.運(yùn)行，啟動(dòng)weinre服務(wù)器，默認(rèn)端口8080
node.exe node_modules\weinre\weinre --boundHost -all-
node.exe node_modules\weinre\weinre --boundHost 192.168.1.125
在windows下，系統(tǒng)防火墻可能會(huì)彈出是否允許其訪問網(wǎng)絡(luò)的提示，點(diǎn)擊充許即可。
3.從瀏覽器訪問,http://localhost:8080,或者，http://192.168.1.125:8080，顯示如下表示啟動(dòng)服務(wù)器監(jiān)視成功
三、Weinre需要監(jiān)聽調(diào)試的Web頁(yè)面配置處理
1.在所有頁(yè)面引入js文件
2.特別說明，當(dāng)前js文件的域名需要指定為本機(jī)的IP地址，因?yàn)樵谑謾C(jī)模擬器中無法訪問電腦‘localhost’
更多：
cordova-plugin-whitelist 協(xié)議白名單配置整理
VS Code插件安裝位置
Visual Studio Code插件之Atom One Dark Syntax Theme
相關(guān)參考文章：
http://blog.csdn.net/freshlover/article/details/42640253
http://www.cnblogs.com/diva/p/3995674.html
藍(lán)藍(lán)設(shè)計(jì)( m.teruid.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
這是一個(gè) app從獲取獲取數(shù)據(jù) 用于顯示的經(jīng)典實(shí)踐項(xiàng)目，數(shù)據(jù)來源于 豆瓣官方公開的api接口：https://developers.douban.com/wiki/?title=movie_v2
先上圖：
項(xiàng)目使用了如下第三方library：
下拉刷新：Android-PullToRefresh
網(wǎng)絡(luò)數(shù)據(jù)加載：android-async-http
圖片加載：universal-image-loader
后面的博客，會(huì)把項(xiàng)目的制作流程發(fā)出來
豆瓣API實(shí)踐項(xiàng)目-前言-0（可下載源碼）: http://blog.csdn.net/mario_faker/article/details/79618210
豆瓣API實(shí)踐項(xiàng)目-數(shù)據(jù)api接口-1：http://blog.csdn.net/mario_faker/article/details/79618235
豆瓣API實(shí)踐項(xiàng)目-搭建項(xiàng)目基本框架-2：http://blog.csdn.net/mario_faker/article/details/79618245
豆瓣API實(shí)踐項(xiàng)目-導(dǎo)入第三方library-3：http://blog.csdn.net/mario_faker/article/details/79618261
豆瓣API實(shí)踐項(xiàng)目-單頁(yè)細(xì)講4: http://blog.csdn.net/mario_faker/article/details/79618272
豆瓣API實(shí)踐項(xiàng)目-apk打包:http://blog.csdn.net/mario_faker/article/details/79618291
項(xiàng)目源代碼下載地址：
http://download.csdn.net/download/mario_faker/10253201
或github：https://github.com/MarioFaker/DBMovie
藍(lán)藍(lán)設(shè)計(jì)( m.teruid.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
作者：魯米
做人就象是一家客棧
每個(gè)早晨，都是一位新來的客人
喜悅、沮喪、卑鄙
一瞬的覺悟來臨
就像一個(gè)意外的訪客
歡迎和招待每一位客人！
即使他們是一群悲傷之徒
來掃蕩你的客房
將家具一掃而光
但你要款待每一位賓客
他或許會(huì)為你打掃
并帶來新的喜悅
如果是陰暗的思想、 羞恥和怨恨
你也要在門口笑臉相迎
邀請(qǐng)他們進(jìn)來
無論誰(shuí)來，都要感激
因?yàn)槊恳晃欢际?/span>
由世外派來
指引你的向?qū)?/span>
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
5.0以后，materialDesign風(fēng)格，出現(xiàn)了立體這種概念，高光，陰影，也就是Z軸，凸顯層次；同時(shí)，裁剪view也變得方便簡(jiǎn)單了很多。
1，先說說陰影的實(shí)現(xiàn)。
方案1：在xml中設(shè)置
xml中設(shè)置有兩個(gè)方式，android:elevation="2dp"
android:translationZ="2dp"這兩句代碼是可以同時(shí)并存的，而且是疊加的效果；當(dāng)然只使用其中一個(gè)屬性進(jìn)行z軸的陰影設(shè)置也是OK的。
方案2：在代碼中設(shè)置
（下面說這個(gè)實(shí)現(xiàn)方式，其實(shí)就是輪廓的實(shí)現(xiàn)）
設(shè)置陰影，有一個(gè)需要注意的地方：
①：view的大小要比它的父布局小，才會(huì)有陰影效果，如果相同大小，是看不到陰影效果的；
②：給圖片設(shè)置陰影的時(shí)候，如果這種圖片的background屬性是shape，那直接通過xml設(shè)置陰影是OK的，但是，如果是一張png或者其他格式的圖片，直接通過xml設(shè)置android:elevation="2dp"
android:translationZ="2dp"陰影是看不到效果的，得通過其他代碼設(shè)置才行。。。**
2，view的輪廓，輪廓其實(shí)也是陰影
默認(rèn)情況下，所有的view都是矩形的，雖然可以給view設(shè)置背景圓形的圖片，即可以在界面顯示出圓形的內(nèi)容，但是view的大小實(shí)際上依然是矩形，并且設(shè)置的圖片實(shí)際上也是矩形的，只是圓形以外的區(qū)域是透明色。
如果根據(jù)view大小來生成對(duì)應(yīng)的陰影，就會(huì)出現(xiàn)很奇怪的效果，（一個(gè)看起來圓形的view展示出的確實(shí)一個(gè)矩形的陰影）我了解決這個(gè)問題，view增加了一個(gè)新的描述來指明內(nèi)容顯示的形狀，這就是 輪廓
輪廓的實(shí)現(xiàn)
①通過shape設(shè)置的背景，view會(huì)自動(dòng)根據(jù)shape的形狀進(jìn)行輪廓判定，
②通過color設(shè)置的背景，view默認(rèn)其輪廓和view的大小一樣。
③但是通過圖片進(jìn)行背景設(shè)置，view則無法獲知輪廓的形狀，這個(gè)時(shí)候就需要手動(dòng)進(jìn)行指定了。
1
2
3
一：在xml中可以通過android：outlineProvider來指定輪廓的判定方式：
1，none即使設(shè)置了Z屬性，也不會(huì)顯示陰影
2，background會(huì)按照背景來設(shè)置陰影形狀
3，bounds會(huì)按照view的大小來描繪陰影
**對(duì)于①和②這種情況，也是可以通過設(shè)置`android：outlineProvider`
來改變陰影的形狀以及輪廓外觀的。**
對(duì)于③這種背景是一張png或者其他格式的圖片的情況，
`android：outlineProvider=“background”`
是沒有效果的，屬性設(shè)置成`android：outlineProvider=bounds`
雖然也是有效果的，但是陰影輪廓是一個(gè)方形的輪廓，
并不是我們想要的效果了。
不設(shè)置`android：outlineProvider`屬性就更沒有效果了。
1
2
3
4
5
6
7
8
9
10
對(duì)于這種使用了png圖片作為背景的view加陰影輪廓的時(shí)候情況解決辦法也非常簡(jiǎn)單，解決辦法就是：
就通過Java代碼設(shè)置，也就是說，一個(gè)圓形的png圖（我們知道，看起來是圓形的，
但是它其實(shí)還是方形的圖片，只是圓形之外的區(qū)域是透明不可見的），
通過Java代碼設(shè)置輪廓，就會(huì)顯示出圓形的陰影輪廓了。
1
2
3
具體實(shí)現(xiàn)，繼續(xù)看：
二：在代碼中，課通過setOutlineProvider來指定一個(gè)view的輪廓。
對(duì)于③這種情況在代碼中設(shè)置輪廓才會(huì)有效果。
TextView textView= findViewById(R.id.tv);
ViewOutlineProvider viewOutlineProvider=new ViewOutlineProvider() {
@Override
public void getOutline(View view, Outline outline) {
//x，y軸表示位置，后兩個(gè)參數(shù)表示長(zhǎng)，寬
outline.setOval(0,0,textView.getWidth(),textView.getHeight());
}
};
textView.setOutlineProvider(viewOutlineProvider);
1
2
3
4
5
6
7
8
9
強(qiáng)調(diào)：
如果采用圓形圖片作為背景，即使在xml布局中指定android：outlineProvider=“background”，也不會(huì)顯示陰影，設(shè)置為android：outlineProvider=bounds，雖然也有效果，但是效果很差，所以一般都是通過代碼來指定輪廓顯示。
1，一個(gè)shape圓形作為背景，設(shè)置陰影，設(shè)置android：outlineProvider的4種屬性的效果：
2，一個(gè)圓形png作為背景，設(shè)置陰影，設(shè)置android：outlineProvider的4種屬性的效果：
3，一個(gè)png作為背景，設(shè)置陰影，通過代碼設(shè)置的效果：
3，view的裁剪
裁剪，默認(rèn)的ImageView是矩形的，很多時(shí)候，需要的是圓角的ImageView或者圓形的ImageView，這就需要裁剪view了。
實(shí)現(xiàn)，裁剪圓形：
final TextView textView= findViewById(R.id.tv);
ViewOutlineProvider viewOutlineProvider=new ViewOutlineProvider() {
@Override
public void getOutline(View view, Outline outline) {
//設(shè)置圓形oval
outline.setOval(0,0,textView.getWidth(),textView.getHeight());
}
};
//設(shè)置裁剪
textView.setClipToOutline(true);
1
2
3
4
5
6
7
8
9
10
11
實(shí)現(xiàn)，裁剪圓角矩形：
final TextView textView= findViewById(R.id.tv);
ViewOutlineProvider viewOutlineProvider=new ViewOutlineProvider() {
@Override
public void getOutline(View view, Outline outline) {
//設(shè)置圓角矩形
outline.setRoundRect(0,0,view.getWidth(),view.getHeight(),25);
}
};
textView.setOutlineProvider(viewOutlineProvider);
//設(shè)置裁剪
藍(lán)藍(lán)設(shè)計(jì)( m.teruid.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
一、簡(jiǎn)介
TabLayout提供了一個(gè)水平布局用于展示tabs，繼承自HorizontalScrollView。一般與Viewpager結(jié)合使用實(shí)現(xiàn)頁(yè)面和標(biāo)簽聯(lián)動(dòng)的效果，是時(shí)下APP中非常常用的一個(gè)控件
二、基本用法
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
如果您不熟悉iPhone設(shè)計(jì)規(guī)范，請(qǐng)一口吃下本篇文章。伴隨筆記吃下效果更佳：）
iPhone的歷史
每次蘋果發(fā)布會(huì)UI設(shè)計(jì)師可能是最睡不著覺的人啦。每次發(fā)布會(huì)蘋果推出全新iPhone時(shí)，我們?cè)趇Phone平臺(tái)上的APP應(yīng)用程序必須跟隨iPhone的尺寸、規(guī)范等特性調(diào)整設(shè)計(jì)稿。也就是說，幾乎每次蘋果發(fā)布會(huì)都是UI設(shè)計(jì)師加班的通知書！這不，2018年9月13日凌晨，蘋果在Apple Park總部里的喬布斯劇院舉行了2018蘋果秋季新品發(fā)布會(huì)。這次蘋果發(fā)布了全新的iPhone Xs、iPhone Xs Max，iPhone Xr三款手機(jī)。噢，不要忘記我們也不能怠慢還在服役的iPhone X、iPhone Plus、iPhone6/7/8、iPhone SE等蘋果手機(jī)。作為一個(gè)移動(dòng)端UI設(shè)計(jì)師，您必須對(duì)蘋果所有生產(chǎn)過和現(xiàn)役的iPhone有所了解。
起源
談到iPhone我們必須談?wù)勈返俜颉滩妓梗⊿teve Jobs）。盡管喬布斯去世多年，但是他的理念仍然是現(xiàn)代智能手機(jī)設(shè)計(jì)的原則。喬布斯不僅重新定義了智能手機(jī)，也定義了移動(dòng)端應(yīng)用程序。這位被領(lǐng)養(yǎng)的猶太男孩在很早就對(duì)個(gè)人電腦產(chǎn)生了興趣。在游歷了印度和日本之后，他進(jìn)入了大學(xué)校園。在校園里除了無線電和嬉皮士文化，他認(rèn)為大學(xué)課程多半是無聊的。但他曾跑去特意選修了一門課程：字體設(shè)計(jì)。他所在大學(xué)的字體設(shè)計(jì)課是全美最著名的，在那個(gè)課堂上喬布斯學(xué)習(xí)到了網(wǎng)格設(shè)計(jì)、襯線體與無襯線體、字體的氣質(zhì)等設(shè)計(jì)知識(shí)。當(dāng)然在前面講過的具有搖滾精神的字體Helvetica也深深吸引了喬布斯。后來喬布斯選擇大學(xué)肄業(yè)并在自家車庫(kù)創(chuàng)立了蘋果公司，自此“車庫(kù)”也成了創(chuàng)業(yè)者最喜愛的地標(biāo)。蘋果公司的第一代個(gè)人電腦內(nèi)置了非常出色的用戶圖形界面系統(tǒng)（即GUI），并且內(nèi)置了Helvetica等漂亮的字體。但是這并不是喬布斯事業(yè)的終點(diǎn)，在經(jīng)歷了蘋果公司的權(quán)利斗爭(zhēng)后，成熟的喬布斯再次登上發(fā)布會(huì)的舞臺(tái)，推出了真正能改變世界的產(chǎn)品 - iPhone。一般產(chǎn)品名都會(huì)用名字加上產(chǎn)品的類型命名，比如百事可樂、英雄鋼筆等。而iPhone似乎本身就是一個(gè)類別。在那次發(fā)布會(huì)上，喬布斯指責(zé)當(dāng)時(shí)的功能手機(jī)太“愚蠢”：當(dāng)時(shí)的功能手機(jī)性能很差，并且屏幕很小，實(shí)體鍵盤占用了很大的空間。之后，他拿出了一部像外星科技的產(chǎn)品：iPhone。自此，蘋果重新發(fā)明了手機(jī)。喬布斯如此強(qiáng)調(diào)用戶界面和交互設(shè)計(jì)的重要性，這種理念改變了當(dāng)時(shí)和現(xiàn)在的設(shè)計(jì)思維。喬布斯身后，移動(dòng)端的格局在改變，接任喬布斯指揮棒的蒂姆·庫(kù)克和首席設(shè)計(jì)官喬納森·伊夫（Sir Jonathan Paul Ive）也陸續(xù)更新著蘋果手機(jī)的產(chǎn)品線，延續(xù)著這些偉大的產(chǎn)品。
年輕的喬布斯
初代iPhone
相關(guān)產(chǎn)品：iPhone（一代）、iPhone3G（二代）、iPhone3GS（三代）。
iPhone初代產(chǎn)品在2007年1月9日由史蒂夫·喬布斯在蘋果發(fā)布會(huì)上正式發(fā)布。初代的iPhone產(chǎn)品的共同特點(diǎn)是：玻璃屏、屏幕清晰度普通、3.5英寸屏（注意：我們所說的手機(jī)尺寸都是測(cè)量屏幕的對(duì)角線得出的）。iPhone沒有實(shí)體鍵而整體是屏幕的設(shè)計(jì)，在當(dāng)時(shí)仿佛是外星科技降臨一般令人驚艷。為了讓大眾習(xí)慣直接在手機(jī)上點(diǎn)圖標(biāo)（在此之前人機(jī)互動(dòng)都是間接輸入的：比如實(shí)體鍵盤、鼠標(biāo)、觸控筆等），喬布斯發(fā)布了革命性的操作系統(tǒng)iOS，手機(jī)的所有圖標(biāo)都是圓角：這樣可以避免用戶認(rèn)為會(huì)刺到手指。所有圖標(biāo)和界面全部是擬物設(shè)計(jì)，這樣可以更好地讓用戶理解哪些是可以點(diǎn)擊操作的。按鈕在手機(jī)上呈現(xiàn)的大小都是7mm左右，這是因?yàn)槿祟愂种更c(diǎn)擊區(qū)域大概是7mm - 9mm。系統(tǒng)充分地應(yīng)用了多點(diǎn)觸控的功能，你不僅僅可以點(diǎn)手機(jī)里的按鈕，還可以進(jìn)行長(zhǎng)按、滑動(dòng)、捏等手勢(shì)操作。這些用戶體驗(yàn)和人性化的設(shè)計(jì)在當(dāng)時(shí)具有劃時(shí)代的意義。隨后，第二代產(chǎn)品iPhone 3G、第三代產(chǎn)品iPhone3GS先后由喬布斯發(fā)布。這種能聽歌、能打電話、能上網(wǎng)的手機(jī)真是太炸了！而且你可以在應(yīng)用商店Appstore中下載第三方的應(yīng)用程序，海量的第三方程序可謂是大千世界了。這塊3.5英寸屏的手機(jī)截圖出來后的實(shí)際分辨率是480x320px，所以如果你在當(dāng)時(shí)做UI設(shè)計(jì)的話，那么做APP界面建圖的尺寸就應(yīng)該是480x320px。
蘋果初代產(chǎn)品 (2007)
iPhone 4
相關(guān)產(chǎn)品：iPhone 4（四代）、iPhone 4s（五代）。
iPhone 4于2010年6月8日發(fā)布。iPhone 4延續(xù)了iPhone一代的多點(diǎn)觸摸（Multi-touch）屏界面，并首次加入視網(wǎng)膜屏幕、前置攝像頭、陀螺儀、后置閃光燈，相機(jī)像素提高至500萬(wàn)。對(duì)我們?cè)O(shè)計(jì)師最重要的就是加上了視網(wǎng)膜屏Retina。Retina是蘋果提出的標(biāo)準(zhǔn)，它的含義就是在應(yīng)用場(chǎng)景的視距內(nèi)讓人無法看清單個(gè)像素。我們都知道如果你貼的夠近，一般的屏幕上都會(huì)出現(xiàn)一格一格的像素矩陣。屏幕是由這些矩陣組成的。這種屏幕的問題就是稍微近一些我們就能看到那些網(wǎng)格和矩陣。如果我們希望用戶得到最好的體驗(yàn)，自然是讓用戶看不到格子，那怎么辦？答案就是：加大屏幕的密度。如果屏幕的密度到達(dá)一個(gè)指定的水平（當(dāng)然也要取決于用戶的視距，即用戶與屏幕通常離多遠(yuǎn)），那么用戶的眼睛就無法分辨出細(xì)小的像素顆粒了。這種屏幕就被稱為Retina屏，也叫視網(wǎng)膜屏。這是用戶體驗(yàn)的巨大進(jìn)步，但是也是UI設(shè)計(jì)師的噩夢(mèng)。原先的設(shè)計(jì)稿統(tǒng)統(tǒng)需要放大才可以在iPhone4里顯示得完美：比如原來我們一個(gè)界面的尺寸是480x320px，現(xiàn)在因?yàn)槠聊幻芏仍黾恿艘槐叮覀兙托枰O(shè)計(jì)640x960px才夠用。在電腦上看這個(gè)尺寸要比手機(jī)大兩倍?。ó?dāng)然啦，那時(shí)的電腦屏幕通常不是Retina屏）。而且3GS并沒有完全被淘汰，那么如何讓一個(gè)APP適配兩個(gè)不同尺寸的手機(jī)呢？于是每個(gè)APP內(nèi)預(yù)裝了兩套切圖，一套480x320px尺寸，也就是一倍圖（@1x）；一套960x640px尺寸，也就是二倍圖（@2x）。這兩套圖像資源的命名完全一樣，只是二倍圖結(jié)尾需要加上@2x標(biāo)記它是高清尺寸，比如home_icon@2x.png。
iPhone 4代產(chǎn)品 （2010）
邏輯像素和物理像素
邏輯像素（logic point）：邏輯像素的單位是PT，它是按照內(nèi)容的尺寸計(jì)算的單位。比如iPhone 4的邏輯像素是480x320pt。但是由于每個(gè)邏輯的點(diǎn)因?yàn)橐暰W(wǎng)膜屏密度增加了一倍，即1pt=2px，那么其實(shí)iPhone 4的物理像素是960x640px。iOS開發(fā)工程師和使用Sketch和AdobeXD軟件設(shè)計(jì)界面的設(shè)計(jì)師使用的單位都是PT。
物理像素的單位就是我們常說的pixel，簡(jiǎn)寫成PX。它是我們?cè)赑hotoshop和切圖中使用的單位，屏幕設(shè)計(jì)中最小的單位就是1px不可再分割。使用Photoshop設(shè)計(jì)移動(dòng)端界面和網(wǎng)站的設(shè)計(jì)師使用的單位是PX。在以下的文章中，如果您使用Photoshop設(shè)計(jì)界面，那么只需要記住所有px單位的數(shù)值和支持Photoshop的工具，如果使用Sketch或Adobe XD設(shè)計(jì)界面，那么只需要記住所有pt單位的數(shù)值和對(duì)應(yīng)的工具即可。
邏輯像素和實(shí)際像素計(jì)算方式不同
PPI
PPI(pixels per inch)指的是屏幕分辨率的單位，表示的是每英寸顯示的像素密度。屏幕的PPI值越高，那么這個(gè)屏幕每英寸能容納的像素顆粒也就越多，那這個(gè)產(chǎn)品的畫面的細(xì)節(jié)度也就越豐富。PPI值大于300一般我們就無法用肉眼察覺出屏幕上的“馬賽克”格子了。但是如果屏幕很大，那么需要呈現(xiàn)視網(wǎng)膜屏的PPI值也需要更大，所以iPhone Plus系列的PPI值比iPhone6/7/8要大。PPI在我們?cè)O(shè)計(jì)的工作中其實(shí)關(guān)系不大，但理解它對(duì)于幫助我們理解為什么iPhone4比iPhone3GS實(shí)際像素大一倍有幫助。
PPI的計(jì)算公式
iPhone 5
相關(guān)產(chǎn)品：iPhone 5（六代）、iPhone 5s和iPhone 5c（七代）
iPhone 5于2012年9月13日正式發(fā)布。iPhone5在設(shè)計(jì)上帶來了很多爭(zhēng)議，因?yàn)閕Phone5沒有采用喬布斯認(rèn)為人類最合適的手機(jī)尺寸3.5英寸屏，而是用了4英寸的屏幕。寬度沒變而高度加長(zhǎng)了。這樣做的原因是市場(chǎng)上越大的手機(jī)越受歡迎。當(dāng)時(shí)設(shè)計(jì)師也幾近崩潰，因?yàn)橛忠氵m配了。原來960x640px的尺寸變?yōu)榱?136x640px，但是這個(gè)變化其實(shí)不大，就是高了點(diǎn)兒。于是@2x高清圖的設(shè)計(jì)稿就變成了640x1136px。因?yàn)閕Phone4的手機(jī)看著也就是長(zhǎng)了點(diǎn)兒，滑動(dòng)不就完了嘛。除了閃屏這樣的界面需要單獨(dú)做iPhone4、iPhone5、3GS尺寸之外，其他界面仍然維持兩套設(shè)計(jì)稿即可。
iPhone 5 （2012）
iPhone 6/7/8 和iPhone Plus
相關(guān)產(chǎn)品：iPhone6和iPhone6 Plus（八代）、iPhone 6s和iPhone 6s Plus（九代）、iPhone7和iPhone7 Plus（十代）、iPhone8和iPhone8 Plus（十一代）。
這個(gè)產(chǎn)品迭代周期值得大家留意，從iPhone6到iPhone8這段時(shí)間蘋果新手機(jī)的物理像素都是750x1334px。而所有Plus手機(jī)的物理像素都是1242x2208px。如果按照邏輯像素來計(jì)算，那么iPhone6/7/8的邏輯像素就是375 x 667 pt（就是750x1334除以2）；而iPhone Plus的邏輯像素就是414 x 736 pt（就是1242x2208除以3，因?yàn)檫@個(gè)屏幕太大了視距不同所以屏幕密度更高）。歷史到這個(gè)時(shí)候，原來的手機(jī)全部被淘汰了。也就是說iPhone6/7/8成為了我們的設(shè)計(jì)標(biāo)準(zhǔn)，它的切圖就是@2x，iPhone Plus（1242x2208）使用@3x。從此沒有@1x倍圖了，只存在一個(gè)假想的概念。
iPhone 6/7/8 (自2014)
iPhone Plus (自2014)
iPhone X
相關(guān)產(chǎn)品：iPhone X（十一代）。
這四款手機(jī)全部是蘋果的全面屏手機(jī)。全面屏并不是新概念了，因?yàn)閺膇Phone初代產(chǎn)品開始，手機(jī)業(yè)內(nèi)就在構(gòu)思如何把手機(jī)做成全部都是屏幕區(qū)域的技術(shù)了。但是這個(gè)技術(shù)有很多難題，比如前置攝像頭和聽筒怎么處理。那么蘋果采用的方案是“齊劉海”，把四周處理成圓角的方式。IPhone X和后續(xù)三款全面屏我們?cè)O(shè)計(jì)師需要注意的就是齊劉海。因?yàn)樾枰?guī)避攝像頭和麥克風(fēng)聽筒，所以導(dǎo)航欄比其他iPhone系列產(chǎn)品要高；而底部Tab欄因?yàn)樽钕路接袌A角同樣比其他iPhone系列要高。而且這兩個(gè)邊界是不應(yīng)該放置任何操作功能的。也就是說只有看的份兒。
iPhone X的物理像素是1125 x 2436 px，而邏輯像素是375 x 812 pt。也就是說如果你使用Sketch或者Adobe XD等工具設(shè)計(jì)界面的話，iPhone X的寬度和iPhone 6/7/8是相同的；只是高了一些。那么如果需要出一套iPhone X效果圖只需要把頭和尾巴替換成新版即可。而如果你用Photoshop設(shè)計(jì)界面的話，寬度變化還是比較大的。需要做放大處理然后單獨(dú)調(diào)整那些亂了的尺寸。
iPhone X(2017)
iPhone XS Max
相關(guān)產(chǎn)品：iPhone XS、iPhone XS Max、iPhone XR（十二代）。
這三款產(chǎn)品的像素分辨率聽上去會(huì)比較眼暈：
iPhone XS Max：1242 x 2688 px
iPhone XS：1125 x 2436 px
iPhone XR：828 x 1792 px
但是如果我們用點(diǎn)的單位看就會(huì)得到：
iPhone XS Max：414 x 896 pt （iPhone Plus分辨率寬度）
iPhone XS：375x812 pt （iPhone 6/7/8分辨率寬度）
iPhone XR：414 x 896 pt （iPhone Plus分辨率寬度）
所以其實(shí)今年發(fā)布的iPhone都是比較友好的，如果使用矢量界面工具那么只需要調(diào)整設(shè)計(jì)稿頭和尾巴即可，如果使用Photoshop的設(shè)計(jì)師需要放大縮小設(shè)計(jì)稿然后調(diào)整頭和尾巴可以得到新版設(shè)計(jì)稿。而切圖其實(shí)和之前沒有變化，不管用什么工具設(shè)計(jì)還是得出兩套切圖：@2x（750x1334px）、@3x（1242x2208px）即可。
iPhone XS Max (2018)
以iPhone6/7/8為基準(zhǔn)設(shè)計(jì)
在開始比賽之前，由于iPhone 6、iPhone 6S、iPhone7、iPhone7S、iPhone8屏幕和分辨率都是一致的750X1334px，所以我們可以稱它們?yōu)閕Phone6/7/8。而iPhone 6 Plus、iPhone7 Plus、iPhone8 Plus、屏幕和分辨率都是一致的1242x2208，所以我們可以稱它們?yōu)閕Phone Plus。而iPhone XS、iPhone X屏幕和分辨率都是一致的1125x2436，所以我們可以稱它們?yōu)閕PhoneX。那這場(chǎng)比賽的贏家毫無疑問是價(jià)格美麗的iPhone6/7/8獲勝啦。那么我們做界面設(shè)計(jì)時(shí)需要按照iPhone6/7/8為基準(zhǔn)設(shè)計(jì)。如果使用Photoshop就建750x1334px尺寸的畫布，如果是使用Sketch或Adobe XD等工具就建立375x667pt。當(dāng)然如果要設(shè)計(jì)首頁(yè)之類的界面，它的界面很長(zhǎng)你可以設(shè)計(jì)一個(gè)長(zhǎng)的設(shè)計(jì)稿，比如750x8000px。
手機(jī)型號(hào)與像素對(duì)應(yīng)圖
HIG設(shè)計(jì)指南
上文說我們建立界面可以根據(jù)750x1334px或375x667pt來建立畫布，但是具體狀態(tài)欄的高度、導(dǎo)航欄的高度、tab欄的高度是多少？那些UIKit組件里的東西去哪里找呢？蘋果已經(jīng)為我們準(zhǔn)備好了多個(gè)格式的規(guī)范了：
資源下載地址：https://developer.apple.com/design/resources/
設(shè)計(jì)方式
在iPhone6/7/8存量仍然很大的情況下，我們做設(shè)計(jì)稿仍然需要以iPhone6/7/8為尺寸來建圖。從蘋果官網(wǎng)下載好UIKit，上面有我們需要的一切元素。這些元素有PSD、Sketch以及XD版本，不管用什么設(shè)計(jì)軟件均可找到對(duì)應(yīng)版本。打開之后你會(huì)發(fā)現(xiàn)蘋果已經(jīng)將我們所需要的規(guī)范元素準(zhǔn)備好了。如果你需要一些彈窗或者控件，那么就在UI Elements里找。如果需要界面的尺寸模板，就在Design Templates找。所有文件都有兩份，結(jié)尾帶有-iPhoneX的是為iPhone X系列設(shè)計(jì)的模板。沒有標(biāo)識(shí)的是為iPhone6/7/8設(shè)計(jì)的模板。
UI Elements 文件夾中的源文件
Design Templates中的源文件
狀態(tài)欄和導(dǎo)航欄
狀態(tài)欄（Status Bars）就是iPhone最上方用來顯示時(shí)間、運(yùn)營(yíng)商信息、電池電量的那個(gè)很窄的區(qū)域。導(dǎo)航欄（Navigation Bars）就是狀態(tài)欄之下的區(qū)域，一般來說導(dǎo)航欄中間是頁(yè)面標(biāo)題，左右是放置功能圖標(biāo)的區(qū)域。
在iPhone6/7/8設(shè)計(jì)中，狀態(tài)欄的高度為20pt（40px）。導(dǎo)航欄的高度是44pt（88px）。這兩個(gè)區(qū)域在iOS7代之后就進(jìn)行了一體化設(shè)計(jì)。所以它們加起來的高度是64pt（128px）。
在iPhoneX設(shè)計(jì)中，狀態(tài)欄的高度為40pt（132px）。導(dǎo)航欄的高度也是44pt（132px）。這兩個(gè)區(qū)域同樣要進(jìn)行一體化設(shè)計(jì)。所以它們加起來的高度是84pt（264px）。這里注意一下，因?yàn)閕Phone X的PPI值為458，所以并不是如iPhone6/7/8一樣1pt=2px換算。
iPhone6/7/8和iPhone X導(dǎo)航區(qū)域的差別
部分優(yōu)秀APP的導(dǎo)航區(qū)域設(shè)計(jì)
大標(biāo)題導(dǎo)航欄
在的蘋果設(shè)計(jì)中導(dǎo)航出現(xiàn)了一種新形式：大標(biāo)題。出現(xiàn)這種形式就是為了減少視覺噪音，讓內(nèi)容更加突出。很明顯大標(biāo)題的設(shè)計(jì)很像報(bào)紙的版式設(shè)計(jì)，在第一眼我們就會(huì)明白頁(yè)面的主題。大標(biāo)題導(dǎo)航欄的高度一般為116pt（232px）：這包括了20pt（40px）狀態(tài)欄的高度，同時(shí)也能放得下34pt（68px）的大標(biāo)題和輔助信息（如返回等圖標(biāo)）。但是注意一下，大標(biāo)題并不應(yīng)該像傳統(tǒng)導(dǎo)航一樣常駐在頁(yè)面之上，因?yàn)樗伎臻g了。所以在滑動(dòng)頁(yè)面時(shí)大標(biāo)題會(huì)變成正常導(dǎo)航欄的64pt（128px）的高度。當(dāng)然如果設(shè)計(jì)稿為iPhone X那么數(shù)值需要另外換算。
大標(biāo)題的尺寸
導(dǎo)航欄圖標(biāo)
圖標(biāo)作為文字的補(bǔ)充，在移動(dòng)端中應(yīng)用非常廣泛。在導(dǎo)航欄區(qū)域上的功能諸如搜索、添加、更多、返回等均需要用圖標(biāo)來表達(dá)。說明：@2x和@3x在邏輯像素單位是一樣的，如果您使用如Sketch、Adobe XD等矢量工具設(shè)計(jì)，可以參照邏輯像素?cái)?shù)值設(shè)計(jì)即可。但是如果您用Photoshop工具以iPhone6/7/8尺寸進(jìn)行設(shè)計(jì)，就需按照@2x下的px單位數(shù)值設(shè)計(jì)。
導(dǎo)航欄圖標(biāo)尺寸規(guī)范
標(biāo)簽欄 （Tab Bars）
Tab就是點(diǎn)擊的意思，Tab欄（也叫標(biāo)簽欄）指的是APP底部的區(qū)域，如微信底部常駐有聊天、通訊錄、發(fā)現(xiàn)、我的四個(gè)圖標(biāo)。iOS規(guī)范中Tab欄一般有五個(gè)、四個(gè)、三個(gè)圖標(biāo)的形式。也就是把寬度平分為五、四、三份。iPhone6/7/8設(shè)計(jì)中，標(biāo)簽欄的高度為49pt（98px）。Tab欄的操作是最常用的，因?yàn)槭种缸罘奖泓c(diǎn)擊而且這個(gè)欄是常駐在頁(yè)面之上的。所以Tab欄的圖標(biāo)至關(guān)重要，因?yàn)楹芏嘤脩艨赡芤驗(yàn)榭床欢畧D標(biāo)而找不到重要功能的入口，通常我們會(huì)在Tab欄圖標(biāo)之下加上11pt（22px）的注釋文字，這個(gè)注釋文字一般來說都是非常淺的淺灰色。
標(biāo)簽欄的尺寸
標(biāo)簽欄圖標(biāo)
我們?cè)跇?biāo)簽欄上的圖標(biāo)一般來說30pt（60px）大小左右，蘋果給出了四種不同形狀標(biāo)簽欄圖標(biāo)的尺寸參考供大家設(shè)計(jì)時(shí)考慮。其意義是讓不同外形的圖標(biāo)看上去是差不多大的，保證圖標(biāo)的平衡。標(biāo)簽欄圖標(biāo)的選中態(tài)應(yīng)該是一個(gè)彩色，來區(qū)別于非選中狀態(tài)。
真實(shí)設(shè)計(jì)中的標(biāo)簽欄
標(biāo)簽欄圖標(biāo)設(shè)計(jì)規(guī)范
標(biāo)簽欄圖標(biāo)應(yīng)該盡量使用清晰地填充風(fēng)格
工具欄 （ToolBars）
我們?cè)谔O果自帶瀏覽器底部就能看到工具欄。工具欄提供了和當(dāng)前任務(wù)相關(guān)的操作和按鈕，在滑動(dòng)時(shí)可以收起。工具欄同Tab欄一樣都是位于底部，但是高度略窄，它的高度是44pt（88px）。
閃屏資源
由于閃屏是一張完整的靜態(tài)滿屏圖片，而不是諸如其他頁(yè)面一樣是由切圖和文本拼成的，所以閃屏的適配更簡(jiǎn)單粗暴：我們需要提供不同尺寸的閃屏效果。閃屏資源就是滿尺寸的一張png，上端不需要狀態(tài)欄里的信息，程序會(huì)在開發(fā)完畢時(shí)自動(dòng)在閃屏中補(bǔ)上狀態(tài)欄里的信息。我們需要提供的閃屏尺寸有：
我們需要提供的閃屏尺寸 一共6張
安全距離
作為iPhone全面屏系列手機(jī)，齊劉海無疑是一個(gè)特征。但是全面屏給我們帶來了使用上的問題：上下左右是圓角、頂部齊劉海使屏幕凹下一塊。所以在帶有圓角和齊劉海的紅色標(biāo)注區(qū)域不應(yīng)該放置任何功能，僅可在上端放置狀態(tài)欄，底部圓角區(qū)域留白。我們界面豎屏使用時(shí)左右臨近手機(jī)邊緣的區(qū)域不建議放任何操作，應(yīng)留出一定的邊距（Margin）。這個(gè)邊距是多少呢？沒有明確嚴(yán)格的規(guī)定，但是一般的APP會(huì)留出16pt-24pt不等的邊距防止用戶在屏幕邊緣不好點(diǎn)擊。不過內(nèi)容展現(xiàn)卻可以呈現(xiàn)在邊距里。如果我們橫屏使用手機(jī)時(shí)，左右同樣不好點(diǎn)對(duì)吧？橫屏同時(shí)還有令人鬧心的“齊劉海”，所以同樣左右需留出一定的邊距來。所以我們就得到一個(gè)安全距離的矩形，內(nèi)容可以完整地呈現(xiàn)在這個(gè)安全距離內(nèi)。
iPhone X系列由于全面屏上下出現(xiàn)不可操作區(qū)域
色彩
其實(shí)在iPhone上顯示的色域要比我們作圖時(shí)的RGB色域要廣。所以在iPhone上設(shè)計(jì)怎樣的顏色都可以。只要符合產(chǎn)品氣質(zhì)并且在色彩心理學(xué)理論上思考，用什么顏色是設(shè)計(jì)師的自由。官方建議的系統(tǒng)色彩如下：
iPhone的系統(tǒng)色
字體
iOS中英文使用的是San Francisco (SF)字體。（下載地址：https://developer.apple.com/fonts
），中文使用的是蘋方黑體。安裝好以后你會(huì)發(fā)現(xiàn)中文蘋方的字族有不少可供選擇的粗細(xì)，那么我們?cè)O(shè)計(jì)界面時(shí)需要根據(jù)信息的邏輯權(quán)重分配粗細(xì)：標(biāo)題應(yīng)該較粗，而說明字體應(yīng)該較細(xì)并且可以設(shè)計(jì)成灰色。其實(shí)字體的設(shè)計(jì)最重要的考量就是信息層級(jí)。蘋果認(rèn)為APP的字體信息層級(jí)有：大標(biāo)題（Large Title）、標(biāo)題一（Title 1）、標(biāo)題二（Title 2）、標(biāo)題三（Title 3）、頭條（Headline）、正文（Body）、標(biāo)注（Callout）、副標(biāo)題（Subhead）、注解（Footnote）、注釋一（Caption 1）、注釋二（Caption 2）這幾種。
HIG對(duì)APP的字體建議（基于@2x）
注意一下，以上HIG的建議全部是針對(duì)英文SF字體而言的，中文字體需要我們靈活運(yùn)用，以最終呈現(xiàn)效果為基準(zhǔn)調(diào)整。在設(shè)計(jì)具體界面時(shí)我們一定要以用戶的使用情景來考慮，把設(shè)計(jì)稿導(dǎo)入手機(jī)去思考行高與字體大小是否是可讀的。10pt（20px）是手機(jī)上顯示的最小字體，最大的應(yīng)該是目前的大標(biāo)題字體了，達(dá)到了34pt（68px）。
啟動(dòng)圖標(biāo)
在設(shè)計(jì)模板還沒有如今這么發(fā)達(dá)時(shí)，設(shè)計(jì)師需要設(shè)計(jì)啟動(dòng)圖標(biāo)（1024x1024px）之后按照程序員的要求切出幾十個(gè)不同尺寸的圖標(biāo)。比如，在手機(jī)中@3x情況下桌面圖標(biāo)尺寸為180x180px，在@2x情況下為120x120px；在應(yīng)用商店圖標(biāo)需要使用的尺寸是1024x1024px；這個(gè)工作太煩人了，好在現(xiàn)在我們只需要專注在啟動(dòng)圖標(biāo)設(shè)計(jì)本身上了。在蘋果給我們的這套資源中，有Template-AppIcons-iOS這個(gè)文件。打開這個(gè)文件，用我們自己設(shè)計(jì)的啟動(dòng)圖標(biāo)替換掉智能對(duì)象里的內(nèi)容，你會(huì)發(fā)現(xiàn)所有尺寸的圖標(biāo)都變成了我們的圖標(biāo)。然后我們把背景隱藏，切出這些圖標(biāo)即可。圖標(biāo)設(shè)計(jì)建議使用AI等矢量軟件，然后使用規(guī)范切出圖像資源。
Template-AppIcons-iOS
控件
控件包括：輸入框、按鈕、滑桿、頁(yè)卡、開關(guān)等，在設(shè)計(jì)模板中已經(jīng)全部列出。這里格外說明一下，為了讓設(shè)計(jì)更符合整體產(chǎn)品品牌調(diào)性，這些控件都可以做成自定義的設(shè)計(jì)樣式。但是會(huì)增加工作量和切圖資源，所以一般我們?cè)谥T如設(shè)置界面這些無需太體現(xiàn)設(shè)計(jì)感的頁(yè)面中都使用系統(tǒng)默認(rèn)控件，而在一些品牌感需要強(qiáng)調(diào)的頁(yè)面或產(chǎn)品（諸如白噪音產(chǎn)品、游戲等）則會(huì)使用自定義的樣式。如果我們想自己設(shè)計(jì)控件，那么注意兩件事：第一，點(diǎn)擊區(qū)域基本符合44pt（88px）原則，也就是在手機(jī)上大小大概是7mm-9mm，適合手指點(diǎn)擊。第二，要設(shè)計(jì)操作的不同狀態(tài)，不要只設(shè)計(jì)一種狀態(tài)。
默認(rèn)控件
自定控件和默認(rèn)控件
控件中無處不在的44pt（88px）
之前我們介紹過，人手指點(diǎn)擊區(qū)域?yàn)?mm - 9mm，在@2x中就是44pt（88px）。蘋果的導(dǎo)航條、列表、工具欄都充滿了44pt（88px）這個(gè)神秘?cái)?shù)字。我們?cè)谠O(shè)計(jì)時(shí)一定也要考慮到手指的點(diǎn)擊區(qū)域。
無處不見的44pt（88px）
鍵盤
在設(shè)計(jì)模板中您也可以找到鍵盤的設(shè)計(jì)。這里需要提醒的是，很多朋友做界面設(shè)計(jì)時(shí)不考慮輸入時(shí)鍵盤會(huì)遮擋到的空間，如果考慮到鍵盤彈起遮擋住的內(nèi)容，那么我們的一些界面中的輸入框和信息可能都需要上移了。當(dāng)然也不是說可能被鍵盤遮擋的地方不可以防止任何內(nèi)容，也有一種方式就是當(dāng)輸入一個(gè)表單時(shí)，頁(yè)面會(huì)垂直定位到當(dāng)前輸入的位置。
鍵盤高度
iTunes 上傳截圖
在程序上傳APPSTORE時(shí)我們需要提供多張APP截圖，供用戶了解APP的功能。很多設(shè)計(jì)師朋友不太清楚這個(gè)尺寸，這里我們需要提供1242 x 2688px和1125 x 2436px兩套截圖。有時(shí)我們也會(huì)在這個(gè)尺寸上做一些設(shè)計(jì)，讓用戶在APPSTORE打開APP介紹時(shí)獲得最好的體驗(yàn)。
ITunes上傳用截圖
工作流程
前期調(diào)研階段
在我們?cè)O(shè)計(jì)界面之前，我們必須做用戶研究來了解產(chǎn)品的調(diào)性，比如用戶研究手段中的用戶畫像、用戶調(diào)研、用戶使用場(chǎng)景分析、設(shè)計(jì)競(jìng)品分析等方法。不管工作再忙也建議大家做這些工作，他們對(duì)我們深入了解產(chǎn)品大有裨益。
原型圖階段
APP產(chǎn)品設(shè)計(jì)首先需要構(gòu)建出原型圖，之后再開始視覺設(shè)計(jì)。這個(gè)工作有些公司是由產(chǎn)品經(jīng)理負(fù)責(zé)的，也有交互設(shè)計(jì)師負(fù)責(zé)的，還有的公司因?yàn)槿耸州^少，也會(huì)出現(xiàn)由UI設(shè)計(jì)師來負(fù)責(zé)的情況。就算有產(chǎn)品經(jīng)理或其他職能人員來完成原型圖，那設(shè)計(jì)師也需要和產(chǎn)品經(jīng)理等人員溝通需求和探討原型圖，并不是產(chǎn)品經(jīng)理向設(shè)計(jì)師下發(fā)需求。設(shè)計(jì)師要站在視覺和交互的角度提出自己建設(shè)性的意見，而不是簡(jiǎn)單等原型圖完成后照著上色而已。關(guān)于原型圖的工具，我們不僅僅可以用Axure RP設(shè)計(jì)原型圖，也可以使用像墨刀、Adobe XD等新工具來完成原型圖。
構(gòu)建APP原型圖（工具：Adobe XD ）
視覺稿階段
視覺稿階段要根據(jù)原型圖確定的內(nèi)容和大體版式完成APP的界面設(shè)計(jì)。但是這里請(qǐng)大家注意一下：目前業(yè)界主要是以Sketch、Adobe XD、Photoshop這三個(gè)軟件來完成APP的界面設(shè)計(jì)的。Sketch和Adobe XD都是以邏輯像素的單位（PT）來設(shè)計(jì)，然后導(dǎo)出圖像的時(shí)候再進(jìn)行放大兩倍三倍來切圖。這樣做的好處是不用在設(shè)計(jì)的時(shí)候小心翼翼地使用偶數(shù)了。而Photoshop由于主要是處理圖像而非矢量圖形的軟件，所以在設(shè)計(jì)移動(dòng)端界面時(shí)如果做成一倍的話切圖會(huì)變得很虛，所以要基于2倍圖來進(jìn)行界面設(shè)計(jì)。比如如果我們以iPhone6/7/8的界面來進(jìn)行設(shè)計(jì)，那么在Sketch和Adobe XD中我們建立的畫布就是375x667pt在Photoshop中則是750x1334px。
視覺稿設(shè)計(jì)階段（工具：Adobe XD）
視覺稿設(shè)計(jì)階段（工具：Adobe Photoshop）
iPhone6/7/8尺寸
在iPhone6/7/8尺寸下，狀態(tài)欄高度20pt(40px)、導(dǎo)航欄44pt(88px)、Tab欄49pt(98px)、導(dǎo)航標(biāo)題字號(hào)建議17pt(34px)、導(dǎo)航欄圖標(biāo)建議22pt(44px)、Tab欄圖標(biāo)建議30pt(60px)、Tab欄圖標(biāo)注釋文字11pt(22px)、左右安全距離建議12pt(24px)。字號(hào)從10pt（20px）到34pt（68px）均可，要視具體情況決定。
在iPhone6/7/8尺寸下的設(shè)計(jì)尺寸
實(shí)時(shí)預(yù)覽你的設(shè)計(jì)稿
我們?cè)赟ketch、Adobe XD、Photoshop等軟件中設(shè)計(jì)界面時(shí)有一個(gè)問題：電腦上的效果總和手機(jī)上呈現(xiàn)的效果不同。這是由于尺寸和觀察方式?jīng)Q定的，所以最好的方式是我們實(shí)時(shí)地查看設(shè)計(jì)稿在手機(jī)上的呈現(xiàn)效果。以下APP通過數(shù)據(jù)線或wifi鏈接電腦后，即可及時(shí)在手機(jī)中看到還沒有保存的設(shè)計(jì)稿呈現(xiàn)在手機(jī)中的樣子。
Design Mirror：可實(shí)時(shí)預(yù)覽Photoshop、XD等設(shè)計(jì)稿
Adobe XD：可實(shí)時(shí)預(yù)覽你的XD畫板
Sketch Mirror：可實(shí)時(shí)預(yù)覽你的Sketch畫板
iPhoneX設(shè)計(jì)效果圖
雖然程序員對(duì)于iPhoneX等全面屏手機(jī)的適配只需要設(shè)計(jì)師提供切圖即可，但很多設(shè)計(jì)師比較青睞iPhone X和XR和XSM等的設(shè)計(jì)效果，也比較愿意把設(shè)計(jì)稿改成iPhoneX的設(shè)計(jì)圖放到作品集或者在匯報(bào)時(shí)展示。那么我們應(yīng)該怎么做呢？如果設(shè)計(jì)稿需要調(diào)整為iPhone X的顯示效果，可以下載iOS 12設(shè)計(jì)源文件，把界面頭和尾替換成iPhoneX專用頭尾——專用頭尾在劉海和圓角處做了留白。Sketch和XD都是用一倍圖設(shè)計(jì)所以不涉及修改尺寸，改頭尾即可。而PS比較復(fù)雜一點(diǎn)：需要先等比例變大整個(gè)設(shè)計(jì)稿，再把寬度改為1125寬度自適應(yīng)即可。PS變大會(huì)虛還得一個(gè)一個(gè)調(diào)一下，然后再改頭尾。
替換導(dǎo)航區(qū)域和Tab欄區(qū)域，即可得到iPhoneX設(shè)計(jì)效果
視覺規(guī)范
如果我們?cè)O(shè)計(jì)完了五六個(gè)主要界面，那么現(xiàn)在做什么呢？APP設(shè)計(jì)一套視覺規(guī)范是非常有必要的，有了視覺規(guī)范我們就可以把控整體的設(shè)計(jì)和語(yǔ)言。一般來說，一套APP應(yīng)該有3-5種主題色和輔助色；5-10種不同變化的字體樣式。這些如果沒有落實(shí)到一套規(guī)范中，那么很容易跑偏。一套移動(dòng)端應(yīng)用的視覺規(guī)范應(yīng)該包括:
主色/輔色/色彩規(guī)范: 規(guī)定APP所能使用的色彩種類；
文字顏色/大小規(guī)范: 規(guī)定APP主要使用文字的大小、顏色、應(yīng)用場(chǎng)景等；
ICON規(guī)范: 規(guī)定APP的icon設(shè)計(jì)規(guī)范;
應(yīng)用圖標(biāo)規(guī)范: 規(guī)定APP的應(yīng)用圖標(biāo)使用規(guī)范；
按鈕和交互態(tài)規(guī)范: 規(guī)定APP內(nèi)所有按鈕和交互態(tài)的樣式；
間距規(guī)范: 規(guī)定APP內(nèi)所有間距的尺寸。
設(shè)計(jì)規(guī)范的重要性
設(shè)計(jì)規(guī)范中的色彩規(guī)范
設(shè)計(jì)規(guī)范的類型可以是png或者多個(gè)頁(yè)面組成的pdf文件。其他設(shè)計(jì)師打開我們制定的設(shè)計(jì)規(guī)范，可以清晰地找到當(dāng)前項(xiàng)目適合使用的元素和字體大小、間距等。這樣盡管是多人協(xié)同工作也可以保證項(xiàng)目設(shè)計(jì)風(fēng)格的一致性。
切圖
有了大小各異的iPhone尺寸，如果程序只有一套切圖，那么一定會(huì)造成有的手機(jī)顯示很差。所以我們要在程序里放置多套切圖，然后讓程序判斷“主人”的手機(jī)是什么型號(hào)，顯示不同的切圖。這樣才能夠完美地呈現(xiàn)給用戶最好的體驗(yàn)。切圖的方法有很多種。Sketch和Adobe XD可以直接導(dǎo)出。Phtoshop不具備這個(gè)功能，但是我們可以使用cutterman、藍(lán)湖等插件導(dǎo)出切圖。不管是自帶功能還是插件，導(dǎo)出切圖都可以導(dǎo)出@2x和@3x圖，而設(shè)計(jì)稿只需要iPhone6/7/8一套即可。
某項(xiàng)目中的切圖文件
Adobe XD切圖功能
在Adobe XD中將需要切出的元素在圖層面板（Ctrl + Y）點(diǎn)擊添加批量導(dǎo)出標(biāo)記記錄；然后點(diǎn)擊 菜單 > 導(dǎo)出 > 所選畫板 > 用于iOS > 導(dǎo)出所有畫板 即可。
Adobe XD自帶切圖功能
使用Cutterman協(xié)助Photoshop切圖
在Cutterman官網(wǎng)下載PS插件后，點(diǎn)擊窗口 > 擴(kuò)展功能 > Cutterman 調(diào)出面板；然后選擇iOS 并高亮選中@3X和@2X；在圖層面板里選中需要切圖的元素，點(diǎn)擊“導(dǎo)出選中圖層”即可。
Photoshop中的Cutterman 插件
使用藍(lán)湖切圖
在藍(lán)湖平臺(tái)可以下載Sketch、Adobe XD或Photoshop對(duì)應(yīng)的插件。然后在不同設(shè)計(jì)軟件插件中將設(shè)計(jì)稿上傳到藍(lán)湖（PS需要用插件標(biāo)記需要切出的元素），然后在藍(lán)湖網(wǎng)頁(yè)版點(diǎn)擊切圖按鈕，選擇視網(wǎng)膜@2x和高清視網(wǎng)膜@3x，再點(diǎn)擊“下載該頁(yè)全部切圖”即可。
在藍(lán)湖平臺(tái)導(dǎo)出切圖
切圖命名規(guī)范
切圖最后需要命名成規(guī)范的格式，這樣方便程序員查找。切圖命名的格式建議全英文，如果大家英文不好需要想辦法提升一點(diǎn)簡(jiǎn)單的詞匯量。借由上述工具切圖后，需要整理切圖命名，或在切圖之前對(duì)圖層命名亦可。以下是切圖元素的中英文對(duì)照：
切圖命名對(duì)照表
然后我們要按照 功能_類型_名稱_狀態(tài)@倍數(shù) 來命名每個(gè)切圖，比如我們導(dǎo)航條上有一個(gè)搜索圖標(biāo)，那么它的名稱就是：
navi_icon_search_default@2x.png
(導(dǎo)航_圖標(biāo)_搜索_正常@2x.png)
iOS開發(fā)語(yǔ)言
作為iOS開發(fā)工程師，最重要的三個(gè)工具是：Obiective-C、Swift、UIKit框架。Obiective-C是目前最有效率的語(yǔ)言；而Swift開發(fā)非常。一般iOS工程師會(huì)在這兩個(gè)語(yǔ)言中選擇一種作為開發(fā)工具。UIKit是蘋果系統(tǒng)自帶的一套框架，這個(gè)框架里有設(shè)置按鈕、滑竿、狀態(tài)欄、電池電量、鍵盤等接口可供調(diào)用。所以我們看到很多第三方APP的界面中，有許多控件和蘋果自帶程序是一致的，這就是UIKit的功勞。
開發(fā)視角 By @alvaroreyes
了解開發(fā)工程師的語(yǔ)言和工具對(duì)我們做設(shè)計(jì)也格外有幫助，我們會(huì)知道哪些效果能做，哪些效果不能做，哪些效果能做不好做等等。我找了大家關(guān)注的九個(gè)問題請(qǐng)教了iOS資深開發(fā)工程師程威：
和iOS工程師溝通
溝通完是不是學(xué)到了不少？我們明白了iOS工程師工作的機(jī)制后再設(shè)計(jì)界面時(shí)就可以做到心中有數(shù)了。在平時(shí)工作中我們也應(yīng)該多和開發(fā)小哥哥聊聊，學(xué)習(xí)一下他們實(shí)現(xiàn)的方式，以便我們的設(shè)計(jì)能夠更好地落地。
標(biāo)注
切圖后程序員得到了什么？一大堆碎片。把這些碎片重新用OC或者Swift構(gòu)建回我們?cè)O(shè)計(jì)的界面并沒有想的那么簡(jiǎn)單。所以開發(fā)工程師可能會(huì)總是在思考構(gòu)架層面的問題，而忽視了視覺還原。并且由于iOS的開發(fā)人員不會(huì)使用設(shè)計(jì)軟件，所以很容易出現(xiàn)比如14pt或者28px的文字，實(shí)現(xiàn)后是16pt或者32px。那就亂了套了不是，那怎么辦呢？我們可以通過一些標(biāo)注軟件把圖標(biāo)之間的位置、字體的高度、字體的大小和色彩進(jìn)行標(biāo)注，讓程序員輕松省力地還原我們的設(shè)計(jì)稿。
藍(lán)湖平臺(tái)自動(dòng)標(biāo)注功能
將Sketch和Adobe XD、Photoshop的設(shè)計(jì)稿上傳至藍(lán)湖后，在藍(lán)湖平臺(tái)每個(gè)頁(yè)面左側(cè)有一個(gè)類似分享的圖標(biāo)，點(diǎn)擊會(huì)獲取一個(gè)網(wǎng)址，這個(gè)網(wǎng)址就是系統(tǒng)生成的自動(dòng)標(biāo)注。它會(huì)自動(dòng)識(shí)別設(shè)計(jì)稿中字體大小和間距等，甚至有代碼參考。
藍(lán)湖自動(dòng)標(biāo)注工具
使用Px像素大廚標(biāo)注
像素大廚同樣提供了自動(dòng)標(biāo)注、手動(dòng)標(biāo)注兩種標(biāo)注方法。自動(dòng)標(biāo)注需要上傳設(shè)計(jì)稿，手動(dòng)標(biāo)注需要設(shè)計(jì)師使用“尺子”來測(cè)量距離、“吸管”來吸取色號(hào)。在界面上部有單位選擇，如果我們給iOS開發(fā)做標(biāo)注，那么單位最好選擇PT，與開發(fā)環(huán)境一致。
像素大廚標(biāo)注工具
“標(biāo)你妹啊”進(jìn)行自動(dòng)標(biāo)注
國(guó)產(chǎn)標(biāo)注在線神器。只需要登錄網(wǎng)站后，上傳設(shè)計(jì)稿可直接生成標(biāo)注網(wǎng)址，發(fā)給程序員就可以啦。同樣提供代碼參考和自動(dòng)標(biāo)注間距尺寸等功能。
在線標(biāo)注工具 - 標(biāo)你妹啊
Markman 手動(dòng)標(biāo)注
Markman同樣是國(guó)產(chǎn)標(biāo)注神器。而且是我使用的第一個(gè)標(biāo)注工具，選用底部工具可以進(jìn)行手動(dòng)標(biāo)注，標(biāo)注后導(dǎo)出png標(biāo)注圖即可。
Markman標(biāo)注工具
動(dòng)效
據(jù)資深iOS開發(fā)程威介紹，目前的iOS主流的動(dòng)效實(shí)現(xiàn)方式有以下四種：第一種，設(shè)計(jì)師給到開發(fā)動(dòng)效視頻或gif，開發(fā)人員照著效果編寫代碼調(diào)用靜態(tài)切圖重新做一遍，這樣的還原度可能會(huì)有問題，需要開發(fā)和設(shè)計(jì)師多溝通。第二種，可以使用序列幀的方式實(shí)現(xiàn)動(dòng)畫，原理是給到開發(fā)按順序命名的png，比如1.png、2.png等，然后用代碼將它們快速替換實(shí)現(xiàn)動(dòng)畫。第三種，我們也可以給到程序員avi等視頻文件直接插入視頻。第四種，使用Airbnb開源的Lottie（https://airbnb.design/lottie/）。具體來說是通過after effects來完成動(dòng)效，然后通過BodyMovin插件導(dǎo)出json文件，里面記錄的就是動(dòng)畫的細(xì)節(jié)，然后在安卓，iOS，React Native上都有一套對(duì)應(yīng)的SDK，來解析這個(gè)json文件來還原成動(dòng)畫。這個(gè)方式的還原度很高，除了部分AE不支持外堪稱完美。其實(shí)還有QuartzCode、CoreAnimator等工具，有興趣的大家可以去嘗試一下。但我認(rèn)為不管使用什么方式，最優(yōu)秀的動(dòng)效還是要靠設(shè)計(jì)師和開發(fā)人員“真誠(chéng)地交流”。
項(xiàng)目走查
當(dāng)我們最終完成了界面設(shè)計(jì)，需要和我們的設(shè)計(jì)稿進(jìn)行對(duì)照還原。除了用肉眼辨別之外，我們也可以把還原后的程序截圖下來放到PS中對(duì)照，尋找問題。那么我們給程序員的反饋就是一個(gè)有截圖對(duì)照和標(biāo)注的文檔，這個(gè)文檔可以成為Buglist。
截圖后可在軟件中對(duì)比尋找問題
項(xiàng)目走查除了判斷視覺還原程度，也要兼顧動(dòng)效、點(diǎn)擊狀態(tài)等動(dòng)態(tài)效果是否符合設(shè)計(jì)預(yù)期。如果有問題需要及時(shí)和技術(shù)反饋，反饋的方式建議是文檔類型，保證有據(jù)可查。
總結(jié)
我們一起來小結(jié)一下：當(dāng)我們?cè)O(shè)計(jì)iOS平臺(tái)的APP時(shí)，我們可以選擇使用Sketch、Adobe XD、Photoshop等工具。為了切圖和適配方便，設(shè)計(jì)時(shí)我們以iPhone6/7/8尺寸（750x1334px或375x667pt）為基準(zhǔn)設(shè)計(jì)。設(shè)計(jì)過程中我們需要通過諸如Adobe XD或Mirror等工具隨時(shí)在手機(jī)上預(yù)覽設(shè)計(jì)效果。之后我們需要把圖像資源輸出成@2x視網(wǎng)膜屏幕和@3x高清視網(wǎng)膜屏幕兩套圖像資源，這時(shí)可以使用Cutterman或Sketch和XD自帶的切圖功能切圖。為了保證開發(fā)工程師能夠完美地還原我們的設(shè)計(jì)稿，我們需要提供標(biāo)注。通過藍(lán)湖或像素大廚、Markman、標(biāo)你妹啊等工具我們可以把設(shè)計(jì)稿完美標(biāo)注給到程序員，這時(shí)程序員就清晰地明白每個(gè)元素的大小和間距了。最后，我們要對(duì)完成的程序進(jìn)行驗(yàn)收。本篇文章寫于二零一八年，按照慣例，每年蘋果都會(huì)舉辦兩場(chǎng)發(fā)布會(huì)發(fā)布新產(chǎn)品。如果后面發(fā)布了新的手機(jī)，也希望大家能夠理清脈絡(luò)，透過現(xiàn)象看到本質(zhì)，找出合適的設(shè)計(jì)適配方法。
參考資料
蘋果開發(fā)者中心網(wǎng)址：
蘋果人機(jī)交互規(guī)范：
https://developer.apple.com/design/human-interface-guidelines/
iOS設(shè)計(jì)資源下載：
https://developer.apple.com/design/resources/
藍(lán)藍(lán)設(shè)計(jì)( m.teruid.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
jQuery對(duì)Ajax操作進(jìn)行了封裝，常用的方法包括 $.get(),$.post(),$.ajax()。
分別對(duì)其進(jìn)行介紹
$.get()
$.get()方法使用GET方式來進(jìn)行異步請(qǐng)求。
$.get()結(jié)構(gòu)
$.get(url,[. data][. callback][. type])
1
$.get()方法參數(shù)解釋
參數(shù)名稱 類型 說明
url String 請(qǐng)求的HTML頁(yè)的url地址
data(可選) Object 發(fā)送至服務(wù)器的key/value數(shù)據(jù)會(huì)作為QueryString附加到請(qǐng)求的url中
callback(可選) Function 載入成功時(shí)回調(diào)函數(shù)（只有當(dāng)Response的返回狀態(tài)是success才調(diào)用該方法）自動(dòng)將請(qǐng)求結(jié)果和狀態(tài)傳遞給該方法
type(可選) String 服務(wù)器端返回內(nèi)容的格式，包括xml、html、script、json、text和_default
示例
json數(shù)據(jù)：data.json(后面的$.post()和$.ajax()方法都用這個(gè)數(shù)據(jù))
{
"name":"龍貓",
"hobby":"睡覺",
"friend":"加菲貓"
}
jq_get.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="button" value="$.get方法" id="jQget">
<div id="content"></div>
</body>
</html>
<!-- 導(dǎo)入jquery.js文件 -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#jQget').on('click',function(){
/*
參數(shù)1:url
參數(shù)2:發(fā)送的數(shù)據(jù) 支持 直接寫js對(duì)象的方式
參數(shù)3:回調(diào)函數(shù)
參數(shù)4:從服務(wù)端獲取的 數(shù)據(jù)類型 可以不寫
注意
如果type 為json
并且服務(wù)端返回的就是 json格式字符串
jq內(nèi)部 會(huì)幫助我們自動(dòng)轉(zhuǎn)化
在回調(diào)函數(shù)中 獲取的 實(shí)參 就是轉(zhuǎn)化完成的 js對(duì)象 直接使用即可
參數(shù)的 順序 是更換的
但是 如果 把data 放到后面 會(huì)出現(xiàn) 無法傳遞數(shù)據(jù)的問題,
所以 不要擅自更換 嚴(yán)格按照 jq文檔中的 順序 進(jìn)行使用
*/
$.get('jq_get.php',{name:"jack",age:18},function(data){
console.log(data);
$('#content').html('name:'+data.name+'<br>'+'hobby:'+data.hobby+'<br>'+'friend:'+data.friend);
},'json');
});
});
</script>
jq_get.php (后面的$.post()和$.ajax()方法都用這個(gè)頁(yè)面的內(nèi)容，只是在html請(qǐng)求時(shí)分別對(duì)應(yīng)的php頁(yè)面)
<?php
header('content-type:text/html;charset=utf-8');
echo file_get_contents('datas/data.json');
?>
結(jié)果展示：
$.post()方法
它與$.get()方法的結(jié)構(gòu)和使用方式都相同，不過它們之間仍然有以下區(qū)別：
GET請(qǐng)求會(huì)將參數(shù)跟在URL后進(jìn)行傳遞，而POST請(qǐng)求則是作為HTTP消息的實(shí)體內(nèi)容發(fā)送個(gè)Web服務(wù)器，當(dāng)然，在Ajax中，這種區(qū)別對(duì)用戶是不可見的。
GET方式對(duì)傳輸?shù)臄?shù)據(jù)有大小限制（通常不能大于2KB），而使用POST方式傳遞的數(shù)據(jù)量要比GET方式大得多（理論上不受限制，但是可以在服務(wù)端進(jìn)行限制）。
GET方式請(qǐng)求的數(shù)據(jù)會(huì)被瀏覽器緩存起來，因此其他人就可以從瀏覽器的歷史記錄中讀取這些數(shù)據(jù)，例如賬號(hào)和密碼等。在某種情況下，GET方式會(huì)帶來嚴(yán)重的安全性問題，而POST方式相對(duì)來說就可以避免這些問題。（但是也是不安全的，所以密碼之類的還是要加密的）
GET方式和POST方式傳遞的數(shù)據(jù)在服務(wù)器的獲取方式也不相同。在PHP中，GET方式數(shù)據(jù)可以用$_GET[]獲取，而POST可以用$_POST[]獲取、兩種方式都可以用$_REQUEST[]來獲取。
其實(shí)這完全是對(duì)這篇文章中post()和get()方法不同的總結(jié)?。?點(diǎn)擊查看)
$.post()演示
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#jQpost').on('click',function(){
// 跟$.get用法及其類似
/*
參數(shù)1:url
參數(shù)2:發(fā)送的數(shù)據(jù) 支持 直接寫js對(duì)象的方式
參數(shù)3:回調(diào)函數(shù)
參數(shù)4:從服務(wù)端獲取的 數(shù)據(jù)類型 可以不寫,如果寫為json jq內(nèi)部 會(huì)幫我們進(jìn)行一個(gè) JSON.parse()的轉(zhuǎn)化
*/
$.post('jq_post.php',{name:"kong",age:18},function(data){
console.log(data);
},'json');
});
});
</script>
$.ajax()
$.ajax()方法是jQuery最底層的Ajax實(shí)現(xiàn)
其結(jié)構(gòu)為
$.ajax(options)
1
該方法只有1個(gè)參數(shù)，但在這個(gè)對(duì)象里包含了$.ajax()方法所需要的請(qǐng)求設(shè)置以及回調(diào)函數(shù)等信息，參數(shù)以key/value的形式存在，所有參數(shù)都是可選的，只寫幾個(gè)常用的參數(shù)，如下：
參數(shù)名稱 類型 說明
url String 請(qǐng)求的HTML頁(yè)的url地址
type String 請(qǐng)求方式，默認(rèn)GET。注意其他的HTTP請(qǐng)求方法，例如PUT和DELETE也可以使用，但僅部分瀏覽器支持
data Object或String 發(fā)送到服務(wù)器的數(shù)據(jù)，如果已經(jīng)不是字符串，將自動(dòng)轉(zhuǎn)換為字符串格式。
dataType String 服務(wù)器端返回內(nèi)容的格式，包括xml、html、script、json、jsonp 、jQuery
beforeSend Function 發(fā)送請(qǐng)求前可以修改XMLHttpRequest對(duì)象的函數(shù)，例如添加自定義HTTP頭。在beforeSend中如果返回false可以取消本次Ajax請(qǐng)求。XMLHttpRequest對(duì)象的唯一參數(shù)。
success Function 請(qǐng)求成功后嗲用的回調(diào)函數(shù)，有兩個(gè)參數(shù)。
(1)由服務(wù)器返回，并根據(jù)dataType參數(shù)進(jìn)行處理后的數(shù)據(jù)。
(2)描述狀態(tài)的字符串。
function(data,textStatus){
//data可能是xmlDoc、jsonObj、html、text等等。
this//調(diào)用本次Ajax請(qǐng)求時(shí)傳遞的options參數(shù)
}
error Function 請(qǐng)求失敗時(shí)被調(diào)用的函數(shù)，該函數(shù)有3個(gè)參數(shù)，即
XMLHttpRequest對(duì)象、錯(cuò)誤信息、捕獲的錯(cuò)誤對(duì)象(可選)。
Ajax事件函數(shù)如下。
function(XMLHttpRequest,textStatus,errorThrown){//通常情況下textStatus和errorThown只有其中一個(gè)包含信息
this;//調(diào)用本次Ajax請(qǐng)求時(shí)傳遞的options參數(shù)
}
示例
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#jqAjax').on('click',function(){
/*
常見參數(shù):
url:請(qǐng)求的地址
success:請(qǐng)求成功的回調(diào)函數(shù)
type:不寫是get 可以指定 get,post
dataType:數(shù)據(jù)的類型
data:發(fā)數(shù)據(jù) 可以寫js對(duì)象
beforeSend:發(fā)送之前調(diào)用的匿名函數(shù)
可以return false 阻止該次請(qǐng)求
驗(yàn)證用戶的數(shù)據(jù) 是否填了
error:請(qǐng)求失敗以后 會(huì)調(diào)用
*/
$.ajax({
url:'jq_ajax.php',
success:function(data){
console.log(data);
$('#box').append(data.name+'<br>'+data.hobby);
},
type:'post',
dataType:'json',
data:{"name":"張信哲","skill":"情歌王子"},
beforeSend:function(){
console.log('發(fā)送之前調(diào)用');
},
error:function(){
console.log('請(qǐng)求失敗了');
}
});
});
});
</script>
---------------------
作者：diligentkong
來源：CSDN
原文：https://blog.csdn.net/diligentkong/article/details/72851443
版權(quán)聲明：本文為博主原創(chuàng)文章，轉(zhuǎn)載請(qǐng)附上博文鏈接！
藍(lán)藍(lán)設(shè)計(jì)( m.teruid.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
我們?cè)诳?App 時(shí)，有沒有思考過這樣的問題，同樣都是提示彈窗為什么出現(xiàn)那么多不同的樣式，亦或者同樣都是讓界面進(jìn)行切換的導(dǎo)航為什么有的可以通過側(cè)滑切換，有的卻只能點(diǎn)擊切換呢？最近在玩 App 時(shí)發(fā)現(xiàn)了幾組這樣的控件，下面就來和大家分享下我對(duì)他們的理解和選用。目錄：
警告框：是一種操作上的確認(rèn)，只有當(dāng)用戶點(diǎn)擊按鈕后才算真的完成，才可以有其他操作，主要作用是警告或提示用戶的。
警告框由三部分組成：標(biāo)題、正文、按鈕。有些簡(jiǎn)單的警告或提示只有正文和按鈕即可。
操作表/ActionSheet：操作表通常會(huì)從屏幕底部邊緣向上滑出一個(gè)面板，可提供2個(gè)以上的選擇。呈現(xiàn)給用戶的是簡(jiǎn)單、清晰、無須解釋的一組操作，沒有正文的描述內(nèi)容（大部分）。另外重要的功能操作也會(huì)用紅色文字展示。
文字內(nèi)容的重要性
文字內(nèi)容的重要性：選擇警示框和操作表時(shí)，要考慮的是兩個(gè)彈窗文字內(nèi)容對(duì)于用戶的重要程度，如果內(nèi)容極為重要?jiǎng)t選用警示框，如果文字內(nèi)容不重要甚至不需要描述文字我們就應(yīng)該選擇操作表。
案例：如下圖，淘寶登錄密碼錯(cuò)誤時(shí)，由于警示框更重要的是文字內(nèi)容的體現(xiàn)，幫助用戶找到問題所在，所以選用警示框。再看 QQ郵箱的垃圾箱中點(diǎn)擊全部清空時(shí)，由于信息本身就在垃圾箱內(nèi)，不需要對(duì)用戶過多的文字提示，用戶直接操作即可，所以最后選用操作表。
用戶操作流暢性
用戶操作流暢性：當(dāng)我們需要讓用戶停止操作并必須點(diǎn)擊當(dāng)前界面的按鈕時(shí)，要選擇警示框，警示框?qū)τ脩舨僮魃系牧鲿承杂兄車?yán)重的影響。如果不需要太過強(qiáng)硬，我們就選用只需在屏幕中任意位置點(diǎn)擊就會(huì)消失的操作表。
數(shù)量
數(shù)量：這是最容易區(qū)分使用的方面，當(dāng)彈窗中的按鈕數(shù)量超過2個(gè)時(shí)我們一定選用操作表，因?yàn)榫究虻陌粹o數(shù)量不可以超過兩個(gè)。如果數(shù)量一樣，可以根據(jù)上面兩點(diǎn)擇優(yōu)使用。
案例：如下圖，我們?cè)诘玫紸pp 中點(diǎn)擊開通「推送通知」時(shí)，因?yàn)椴僮靼粹o只有一個(gè)，所以選擇警示框。而點(diǎn)開微博中的更多按鈕，用的則是操作表，因?yàn)椴僮靼粹o有三個(gè)。
標(biāo)簽欄：標(biāo)簽欄位于屏幕底部，它是懸浮在當(dāng)前頁(yè)面之上的，并且會(huì)一直存在，只有當(dāng)用戶點(diǎn)擊跳轉(zhuǎn)到二級(jí)菜單后才會(huì)消失。用戶可以在不同的子任務(wù)、視圖和模式中進(jìn)行切換，并且切換按鈕間都屬于不同的內(nèi)容。
當(dāng)用戶選中某個(gè)標(biāo)簽時(shí)，該標(biāo)簽呈現(xiàn)適當(dāng)?shù)母吡翣顟B(tài)。數(shù)量也有限制，不能超過5個(gè)，如果存在5個(gè)以上的標(biāo)簽可以將最后的標(biāo)簽設(shè)計(jì)成「更多」標(biāo)簽。
工具欄：工具欄同樣位于屏幕底部，懸浮在當(dāng)前頁(yè)面之上的，并且當(dāng)用戶不需要使用的時(shí)候，可以隱藏它。例如向上滑動(dòng)界面時(shí)，工具欄會(huì)自動(dòng)隱藏。工具欄的內(nèi)容主要是對(duì)當(dāng)前頁(yè)面的相關(guān)操作按鈕。
切換狀態(tài)
切換狀態(tài)：當(dāng)我們需要同級(jí)別界面切換時(shí)，應(yīng)該選擇標(biāo)簽欄，同時(shí)標(biāo)簽欄的切換通常為一級(jí)導(dǎo)航，工具欄的功能僅針對(duì)當(dāng)前界面內(nèi)容的相關(guān)操作。
案例：如下圖，微信讀書底部欄中是關(guān)于同級(jí)別的視圖切換，所以選擇標(biāo)簽欄，同時(shí)標(biāo)簽欄也常用于產(chǎn)品的一級(jí)導(dǎo)航。而 Safari瀏覽器底部的內(nèi)容是針對(duì)當(dāng)前界面的操作功能，所以使用了工具欄。
位置狀態(tài)
位置狀態(tài)：當(dāng)?shù)撞繉?dǎo)航始終在界面最上方時(shí)，上下滑動(dòng)都不會(huì)消失，則選擇標(biāo)簽欄；如果底部導(dǎo)航上滑隨之消失則選擇工具欄（說明：也有少數(shù)的工具欄是怎么滑動(dòng)都不會(huì)消失的）。
案例：如下圖，我們來看看百度的 App，當(dāng)我向上滑動(dòng)界面時(shí)，底部導(dǎo)航的位置是不會(huì)消失的，所以使用了標(biāo)簽欄。再看 Safari瀏覽器，因?yàn)樯匣瑫r(shí)底部欄會(huì)被隱藏，所以選用了工具欄。
選中狀態(tài)
選中狀態(tài)：當(dāng)用戶選中底部某一項(xiàng)時(shí)，如果需要高亮顯示且顯示的內(nèi)容是不同子任務(wù)的視圖，則使用標(biāo)簽欄；而當(dāng)選擇后，出現(xiàn)操作表等與當(dāng)前界面相關(guān)的操作時(shí)，應(yīng)該選擇工具欄。
案例：如下圖，我們還是來看百度App，當(dāng)我點(diǎn)擊底部的選項(xiàng)時(shí)，切換的同時(shí)，當(dāng)前選中的「好看視頻」需要變成選中的樣式，來告知用戶當(dāng)前選中的是那個(gè)界面，所以使用了標(biāo)簽欄。再看 Safari瀏覽器，點(diǎn)擊底部按鈕后出現(xiàn)操作表且當(dāng)前選中的按鈕也不會(huì)變高亮，因?yàn)椴粫?huì)在當(dāng)前切換界面，所以選擇了工具欄。
Tabs：Tabs 來自 MD規(guī)范，早在 Android 2.0時(shí)代，官方的通訊錄App 就使用頂部 Tab導(dǎo)航，可以滑動(dòng)切換不同視圖。Tabs 里 Tab 呈現(xiàn)的內(nèi)容可以有很大的差別，而且數(shù)量沒有限制，Tabs 不能作為表單的單選組件。
分段控件：iOS 原生控件之一，每個(gè)分段作用是互斥的，在分段控件里，所有的分段選項(xiàng)框在長(zhǎng)度上要保持一致，同 iOS規(guī)范中對(duì)于分段控件的分段選項(xiàng)不得超過5個(gè)，每個(gè)分段選項(xiàng)可以是純文字或者圖片。
來源不同
來源不同：分段控件來自 iOS規(guī)范，而 Tabs 來源于 MD規(guī)范。
案例：如圖我們來看 iPhone 的日歷界面點(diǎn)擊收件箱，因?yàn)槭?iOS系統(tǒng)配置的應(yīng)用，所以界面中切換樣式用的是分段控件，而反觀安卓系統(tǒng)則用的是 Tabs切換。
內(nèi)容不同
內(nèi)容不同：分段控件主要起到分割和篩選同類數(shù)據(jù)，而 Tabs 則沒有這樣的限制，Tabs 里的每一項(xiàng)所呈現(xiàn)的內(nèi)容可以有很大的差別。另外分段控件更多的是以單選功能出現(xiàn)在表單的使用中，而 Tab 則不能作為表單的單選組件。
案例：如下圖鯊魚記賬中的圖表頁(yè)，支持、收入為整個(gè)界面展示項(xiàng)目，為了讓用戶查看起來更加方便，把數(shù)據(jù)分割為周、月、年的不同的數(shù)據(jù)展示，因?yàn)槭峭悢?shù)據(jù)切換，所以選擇了分段控件。反觀36氪首頁(yè)的 Tabs欄，由于每個(gè)內(nèi)容的差別都很大，所以使用了 Tab欄展示。
操作方式不同
操作方式不同：分段控件需要點(diǎn)擊操作，而 Tabs 除了點(diǎn)擊外還可以通過左右滑動(dòng)切換不同視圖。
案例：如下圖，網(wǎng)易錢包App 界面中的切換控件，因?yàn)樵诒韱沃星沂菢O為近似的數(shù)據(jù)圖，不易讓用戶側(cè)滑屏幕切換，需要讓用戶更精準(zhǔn)的點(diǎn)擊選擇。所以使用了智能點(diǎn)擊的分段控件，而優(yōu)酷視頻的切換頁(yè)變化都比較明顯，很容易區(qū)分，所以選擇了可以側(cè)滑屏幕切換的 Tabs。
數(shù)量
數(shù)量：分段控件數(shù)量不能超過5個(gè)，而 Tabs 沒有數(shù)量限制。
案例：如下圖網(wǎng)易云音樂中的消息界面，界面中因?yàn)榉诸惖臄?shù)量未超過五個(gè)（不是所有未超過5個(gè)的就要用分段控件，同時(shí)也要根據(jù)以上說的其他三種情況判斷，這里只針對(duì)數(shù)量闡述而已），所以可以使用分段控件，而網(wǎng)易云音樂視頻界面中因?yàn)榉诸悢?shù)量過多且內(nèi)容上有區(qū)別所以選擇了 Tabs。
Toast：Toast 通常出現(xiàn)在頂部和中部，浮于頁(yè)面上方，無法對(duì)其操作，出現(xiàn)一段時(shí)間后便會(huì)消失，并且在此期間不影響其他正常操作。
Snackbar：Snackbar 出自于安卓系統(tǒng)，是安卓系統(tǒng)的特色彈窗之一。它是由一段信息和一個(gè)按鈕組成，他們會(huì)在超時(shí)或者用戶在屏幕其他地方觸碰后自動(dòng)消失。Snackbar 可以在屏幕上滑動(dòng)關(guān)閉。Snackbar 不會(huì)妨礙用戶對(duì)產(chǎn)品的其他操作。
操作不同
操作不同：Toast 彈窗沒有任何操作鍵，而 Snackbar 是有操作鍵的。
案例：如圖馬蜂窩App 中給作者的文章點(diǎn)贊功能只需要告知用戶，點(diǎn)贊已成功即可，不需要其他操作，所以選用 Toast彈窗。而攜程中當(dāng)進(jìn)入酒店界面時(shí)，除了告知用戶下面還有更多信息外，還想引導(dǎo)用戶直接查看，所以選用了帶操作功能的 Snackbar。
退出狀態(tài)不同
退出狀態(tài)不同：Toast彈窗完全是通過超時(shí)后自動(dòng)消失，不存在任何操作，而 Snackbar 可以超時(shí)消失也可以用戶主動(dòng)上滑關(guān)閉。
案例：如下圖豆瓣App 廣播界面中，當(dāng)我點(diǎn)擊換一批后，換好的內(nèi)容會(huì)自動(dòng)刷新到最前面，所以用戶不需要任何操作就可以看到內(nèi)容，就可以選用無操作必須等待超時(shí)后才會(huì)消失的 Toast彈窗。
而攜程App 中的酒店界面，因?yàn)楦嗑实膬?nèi)容在下面，并沒有展示出來，為了不讓用戶在滑動(dòng)瀏覽時(shí)造成視覺障礙。所以選擇了 Snackbar，除了超時(shí)后自動(dòng)關(guān)閉外，也可以通過滑動(dòng)界面讓彈窗主動(dòng)關(guān)閉。
組成元素不同
組成元素不同：Toast彈窗主要是由文字和背景組成，也可以額外附加圖標(biāo)。而 Snackbar 除文字、背景，圖標(biāo)外還有操作鍵組成。
案例：如下圖得到App 中只需要提示用即可，所以選用 Toast，組成元素選用背景+文字+圖標(biāo)，而小紅書App 需要加入操作鍵，所以選擇了 Snackbar。
通過上面的分析，大家是不是對(duì)這八個(gè)組件有了更深的理解呢？
每個(gè)組件都有不可替代的作用，如果大家還有哪些不清楚的組件對(duì)比可以在文章下留言，之后我會(huì)選擇一些整理出來再次和大家分享，感謝大家的耐心閱讀。
藍(lán)藍(lán)設(shè)計(jì)( m.teruid.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
這篇文章滲透進(jìn)頁(yè)面中的每一個(gè) Kit控件，深入的分析每一個(gè)控件所能帶給用戶的視覺以及心理感受。
藍(lán)藍(lán)設(shè)計(jì)( m.teruid.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.teruid.com
