UI分析，自然是提取UI上的有用信息理盆。事先聲明我不是美工痘煤，樣式書寫等可能會有不規(guī)范的地方。
首先熏挎，如果你是初學(xué)者速勇，我強力建議你先看完我這篇文章：
【開發(fā)指南】（四）Ionic3快速上手并了解這些
然后坎拐，請在瀏覽器新開一個窗口打開這個網(wǎng)頁，便于觀察參照：
http://www.zcool.com.cn/work/ZMjAyMjk5NDQ=.html
一都伪、確定模版并創(chuàng)建應(yīng)用
首先我們觀察到應(yīng)用的底部是這樣的選項卡：
所以我們在cli命令行創(chuàng)建一個基于選項卡模版的應(yīng)用：
ionic start appetite tabs
等項目創(chuàng)建成功后积担，我們執(zhí)行下面的命令：
cd appetite && ionic serve
便會在瀏覽器看到運行起來的頁面：
注：命令行可以使用
Ctrl+C終止當前命令來執(zhí)行其它操作
二帝璧、項目配置
注：主要修改ID的烁。作為應(yīng)用的唯一識別身份，避免和現(xiàn)有的應(yīng)用ID重復(fù)铃芦，如在ios打包發(fā)布，若發(fā)現(xiàn)有相同ID刃滓，則無法打包成功耸弄。
三、應(yīng)用配置
上圖所示计呈，瀏覽器默認使用android的樣式僚饭，而UI設(shè)計圖采用ios的樣式，所以苇瓣，為了統(tǒng)一也為了方便維護尉间，我們各平臺統(tǒng)一使用ios樣式哲嘲，在app.module.ts 中修改配置為：
IonicModule.forRoot(MyApp, {mode: "ios"})
四媳禁、補全基本頁面
UI設(shè)計圖有4個選項卡（圖方便，我強制認為模版創(chuàng)建的三個頁面就是UI的前3個選項卡的頁面）囱怕，同時最后一個選項卡是關(guān)于個人信息的娃弓，所以我們創(chuàng)建一個叫person的頁面岛宦，頁面最終會生成在src/pages這個目錄下面。為了入手簡單點砾肺，先不使用懶加載，于是使用命令行創(chuàng)建頁面時加上--no-module參數(shù)：
ionic g page person --no-module
頁面生成后在app.module.ts里添加配置：
import { PersonPage } from '../pages/person/person';
@NgModule({
declarations: [
PersonPage
],
entryComponents: [
PersonPage
]
})
接著把新建的person頁面關(guān)聯(lián)到tabs上侠坎，同時把選項卡圖標的文字去掉疫衩，tabs.html文件添加：
<ion-tab [root]="tab4Root" tabIcon="person"></ion-tab>
tabs.ts文件添加
tab4Root = PersonPage;
有人或許會說，ionic3了童芹，都不使用懶加載鲤拿？其實不是不用，只是先不用生音，作為入門，未學(xué)會走路就學(xué)跑缀遍，只會讓自己更混亂。
五台谊、定制應(yīng)用主題樣式
修改
src/theme/variables.scss文件锅铅。
1. 留意到UI上有這樣一段文字：
所以我們在
variables.scss文件添加字體的配置：
$font-family-base: "HelveticaNeue-Light",
"Helvetica Neue Light", "Helvetica Neue",
Helvetica, Arial, "Lucida Grande", sans-serif;
注：font-family用來定義頁面字體盐须，一般定義3-4個漆腌。第一個優(yōu)先級最高。這樣如果訪問你網(wǎng)頁的電腦沒有安裝你定義的第一個字體立帖，它會用第二個晓勇，以此類推。如果都找不到绑咱，就用瀏覽器的默認字體顯示你的網(wǎng)頁
2. 留意到UI上有這樣的顏色說明：
所以我們添加顏色的配置：
//上面4個為UI給定的描融，下面的為觀察后認為需要的
$colors: (
primary: #FC4D6E,
secondary: #FD6F89,
dark: #655A5B,
gray: #B3A3A3,
light-gray: #d9d9d9,
light: #FFFAFA
);
3. 留意到UI上標題欄的顏色為淺白色：
便在文件上添加配置：
$toolbar-ios-background: color($colors, light);
4. 留意到UI上列表分割線為細線條及淡灰色：
添加下面配置：
$hairlines-width: 1px;
$list-border-color: color($colors, light-gray);
六窿克、全局樣式配置
留意到有背景色需求：
在
app.scss文件添加全局樣式：
/*********** 背景色 start **********/
.primary-bg {
background-color: color($colors, primary)!important;
.toolbar {
.toolbar-background {
background-color: color($colors, primary)!important;
}
.toolbar-title{
color: color($colors, light)!important;
}
}
}
/*********** 背景色 end **********/
普通的元素直接修改背景色年叮，而頭部的
ion-navbar其實是toolbar的一種只损，樣式class為toolbar，通過覆寫子元素的樣式來修改背景色叮叹。
最后我們在home.html和about.html的最上面的<ion-header>標簽添加該class爆存，同時加上no-border的指令去掉底下的border線：
<ion-header class="primary-bg" no-border>
再次查看瀏覽器運行界面：
感覺像是一回事了吧终蒂？
為了更接近UI效果圖，我們還需要添加自定義字體圖標，自定義組件等矮锈，篇幅有點長了，我們把內(nèi)容留到了下一章债朵。
