【Appetite】ionic3实录(二)UI分析及总体配置

UI分析,自然是提取UI上的有用信息。事先声明我不是美工,样式书写等可能会有不规范的地方。

首先,如果你是初学者,我强力建议你先看完我这篇文章: 【开发指南】(四)Ionic3快速上手并了解这些

然后,请在浏览器新开一个窗口打开这个网页,便于观察参照: http://www.zcool.com.cn/work/ZMjAyMjk5NDQ=.html

一、确定模版并创建应用

首先我们观察到应用的底部是这样的选项卡:

UI选项卡

所以我们在cli命令行创建一个基于选项卡模版的应用:

ionic start appetite tabs

等项目创建成功后,我们执行下面的命令:

cd appetite && ionic serve

便会在浏览器看到运行起来的页面:

image.png

注:命令行可以使用Ctrl+C终止当前命令来执行其它操作

二、项目配置

项目配置.png

注:主要修改ID。作为应用的唯一识别身份,避免和现有的应用ID重复,如在ios打包发布,若发现有相同ID,则无法打包成功。

三、应用配置

上图所示,浏览器默认使用android的样式,而UI设计图采用ios的样式,所以,为了统一也为了方便维护,我们各平台统一使用ios样式,在app.module.ts 中修改配置为:

IonicModule.forRoot(MyApp, {mode: "ios"})

四、补全基本页面

UI设计图有4个选项卡(图方便,我强制认为模版创建的三个页面就是UI的前3个选项卡的页面),同时最后一个选项卡是关于个人信息的,所以我们创建一个叫person的页面,页面最终会生成在src/pages这个目录下面。为了入手简单点,先不使用懒加载,于是使用命令行创建页面时加上--no-module参数:

ionic g page person --no-module

页面生成后在app.module.ts里添加配置:

import { PersonPage } from '../pages/person/person';
@NgModule({
  declarations: [
    PersonPage
  ],
  entryComponents: [
    PersonPage
  ]
})

接着把新建的person页面关联到tabs上,同时把选项卡图标的文字去掉,tabs.html文件添加:

<ion-tab [root]="tab4Root" tabIcon="person"></ion-tab>

tabs.ts文件添加

tab4Root = PersonPage;

有人或许会说,ionic3了,都不使用懒加载?其实不是不用,只是先不用,作为入门,未学会走路就学跑,只会让自己更混乱。

五、定制应用主题样式

修改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个。第一个优先级最高。这样如果访问你网页的电脑没有安装你定义的第一个字体,它会用第二个,以此类推。如果都找不到,就用浏览器的默认字体显示你的网页

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);

六、全局样式配置

留意到有背景色需求:

image.png

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.htmlabout.html的最上面的<ion-header>标签添加该class,同时加上no-border的指令去掉底下的border线:

<ion-header class="primary-bg" no-border>

再次查看浏览器运行界面:

修改后的主界面

感觉像是一回事了吧? 为了更接近UI效果图,我们还需要添加自定义字体图标,自定义组件等,篇幅有点长了,我们把内容留到了下一章。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏jiajia_deng

react-router 环境使用锚点的方法

1344
来自专栏向治洪

用xml来编写动画

我们可以使用代码来编写所有的动画功能,这也是最常用的一种做法。不过,过去的补间动画除了使用代码编写之外也是可以使用XML编写的,因此属性动画也提供了这一功能,...

2115
来自专栏前端小叙

推荐两款简单好用的图片放大jquery插件

一、zoomfiy.js 推荐可以从这里下载 使用说明: 使用该jquery 插件 引入该插件的js:zoomfiy.js 或 min 引入该插件的css:zo...

6139
来自专栏BestSDK

Mockplus教程:2钟搞定APP首页原型设计,3000个免费素材库

创建项目 ? 打开Mockplus,点击新建项目,选择“手机”项目类型与合适的页面尺寸,点击“确定”即创建成功,是不是不能更简单!无需任何文件创建操作,无需输入...

3095
来自专栏前端小作坊

浏览器的overflow事件

Webkit和Firefox其实是原生支持探测元素overflow状态改变的事件。参看这个DEMO:

881
来自专栏移动端开发

这个断点可以帮你检查布局约束

前言:     在现在iOS布局中,估计有很多很多开发者会使用到 Masonry 或者用到 SDAutoLayout 或者Storyboard或者还有Xib等等...

2169
来自专栏前端儿

让 select 的 option 标签支持事件监听(如复制操作)

想自定义option的样式,很多人会建议用 <ul> <li> 标签来辅助同步操作与值

9242
来自专栏小俊博客

Windows10中的键盘快捷方式

Windows 徽标键 + Shift + C打开超级按钮菜单Windows 徽标键 + D显示和隐藏桌面Windows 徽标键 + Alt + D显示和隐藏桌...

1382
来自专栏崔庆才的专栏

腾讯云Ubuntu搭建Selenium+PhantomJS环境过程

前言大部分网页可以直接请求爬取,但是如果页面是JS渲染的该怎么办呢?如果我们单纯去分析一个个后台的请求,手动去摸索JS渲染的到的一些结果,那简直没天理了。所以,...

8000
来自专栏前端侠2.0

表格内,设置许多元素的大小时,js的速度慢的办法

思路1:设置td为relative,input为absolute,然后设置input大小为td的大小。

1362

扫码关注云+社区

领取腾讯云代金券