9款好看又实用的手机APP UI模板

款优秀的界面设计，最重要的两点应该是产品本身的UI和用户体验（UX），唯有将二者完美结合才能称作优秀的设计作品。但随着智能手机及各类设计工具的发展，用户对手机界面设计的要求也与日俱增。这也就解释了为什么手机应用市场有很多APP功能差不多，但我们只使用一款就够了，而这一款必定有更优的界面设计及用户体验。

App界面设计出色与否将直接影响App用户的体验。要提高UI设计水平，除了经历一定的实践及积累，还可以动手临摹或欣赏一些手机UI设计作品，提高审美能力、增加设计灵感。今天小编给大家挑选了9款由国内外设计大咖制作的高质量手机APP UI模板，涵盖摄影、新闻、游戏、美食、房地产等板块，附有具体的手机支持版本及下载地址哦。看看有没有你中意的APP模板吧，Enjoy！

（一）Android手机模板

1. 游戏类－Fortin Quiz Pro

推荐：★★★★

这款模板主要由安卓客户端及带有MYSQL服务器的PHP组成，可以帮助你快速搭建起自己的新闻平台。一大亮点功能就是它能根据用户的具体要求来启用、禁用功能。如果你希望找到一款支持多国语言的模板，那么这款模板就会派上用场了。

价格：

软件版本：Android 4.0+

下载地址（https://codecanyon.net/item/android-news-app/10771397）

3. 生活类－City Guide

推荐：★★★★

City Guide是一款提供实时定位及导航的APP模板，有8种不同的配色主题，同时支持动画效果、响应式设计等。它最大的优点在于使用本地的SQL数据库来存储数据，从而最大限度地让我们摆脱对互联网的依赖。

价格：

软件版本：Android 4.0+

下载地址（https://codecanyon.net/item/city-guide-map-app-for-android/12026931）

4. 美食类－Recipes

推荐：★★★★

PhotoGram是一款可高度自定义的摄影模板，提供多种有趣、有用的功能：滤镜，尺寸裁剪，光效调整，文字/视频添加等。照片美化后，可以通过自带的分享按钮，分享给身边的小伙伴，一秒见证黑科技！

价格：

软件版本：iOS 3.1+

下载地址（https://codecanyon.net/item/photogram-image-editor-ios-template-admobiad/7262183）

6. 项目管理类-Task Reminder

推荐：★★★★

如果你也认同只有合理的计划才能高效办事，那么这款模板会是你的菜！这是当下iOS客户端中最流行的项目管理类App之一，可无限制创建任务及提醒清单，友好的开发环境及设计也受众多程序员的青睐。

价格：

软件版本：iOS 7.0+

下载地址（https://codecanyon.net/item/todo-list-and-task-reminder/20239350）

7. 购物类-Store Finder

推荐：★★★★

顾名思义，这是一款能帮助用户获取房地产类资讯的App。可以通过卫星定位及Apple地图，进行实时搜索及导航。同时集成多种通讯方式：电话、短信和电子邮件，一步就到位。

价格：

软件版本：iOS 7.0+

下载地址（https://codecanyon.net/item/realestate-finder-full-ios-application-v15/7956115）

（三）跨平台通用模板

9. ionWordPress

项目介绍

vue3-webchat 基于vue3.x+vuex4+vue-router4+element-plus+v3layer+v3scroll等技术架构的仿微信PC端界面聊天实例。

以上是仿制微信界面聊天效果，同样也支持QQ皮肤。

技术栈

使用技术：vue3.0+vuex4+vue-router4
UI组件库：element-plus（饿了么Vue3 pc端组件库）
弹窗组件：V3Layer（基于Vue3自定义桌面端弹窗）
滚动条组件：V3Scroll（基于Vue3自定义虚拟美化滚动条）
iconfont图标：阿里字体图标库

Vue3.x自定义弹窗组件

大家看到的所有弹窗功能，均是自己开发的vue3.0自定义弹窗V3Layer组件。

前段时间有过一篇详细的分享，这里就不作介绍了。感兴趣的话可以去看看。

vue3.0系列：Vue3自定义PC端弹窗组件V3Layer

Vue3.x自定义美化滚动条组件

为了使得项目效果一致，所有页面的滚动条均是采用vue3.0自定义组件实现。

v3scroll 一款轻量级的pc桌面端模拟滚动条组件。支持是否原生滚动条、自动隐藏、滚动条大小/层叠/颜色等功能。

大家感兴趣的话，可以去看看这篇分享。

Vue3.0系列：vue3定制美化滚动条组件v3scroll

vue.config.js项目配置

/**
 * Vue3.0项目配置
 */

const path=require('path')

module.exports={
    // 基本路径
    // publicPath: '/',

    // 输出文件目录
    // outputDir: 'dist',

    // assetsDir: '',

    // 环境配置
    devServer: {
        // host: 'localhost',
        // port: 8080,
        // 是否开启https
        https: false,
        // 编译完是否打开网页
        open: false,
        
        // 代理配置
        // proxy: {
        //     '^/api': {
        //         target: '<url>',
        //         ws: true,
        //         changeOrigin: true
        //     },
        //     '^/foo': {
        //         target: '<other_url>'
        //     }
        // }
    },

    // webpack配置
    chainWebpack: config=> {
        // 配置路径别名
        config.resolve.alias
            .set('@', path.join(__dirname, 'src'))
            .set('@assets', path.join(__dirname, 'src/assets'))
            .set('@components', path.join(__dirname, 'src/components'))
            .set('@layouts', path.join(__dirname, 'src/layouts'))
            .set('@views', path.join(__dirname, 'src/views'))
    }
}

Vue3引入/注册公共组件

// 引入饿了么ElementPlus组件库
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'

// 引入vue3弹窗组件v3layer
import V3Layer from '../components/v3layer'

// 引入vue3滚动条组件v3scroll
import V3Scroll from '@components/v3scroll'

// 引入公共组件
import WinBar from '../layouts/winbar.vue'
import SideBar from '../layouts/sidebar'
import Middle from '../layouts/middle'

import Utils from './utils'

const Plugins=app=> {
    app.use(ElementPlus)
    app.use(V3Layer)
    app.use(V3Scroll)

    // 注册公共组件
    app.component('WinBar', WinBar)
    app.component('SideBar', SideBar)
    app.component('Middle', Middle)

    app.provide('utils', Utils)
}

export default Plugins

项目中主面板毛玻璃效果(虚化背景)

<!-- //虚化背景（毛玻璃） -->
<div class="vui__bgblur">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" class="blur-svg" viewBox="0 0 1920 875" preserveAspectRatio="none">
    <filter id="blur_mkvvpnf"><feGaussianBlur in="SourceGraphic" stdDeviation="50"></feGaussianBlur></filter>
    <image :xlink:href="store.state.skin" x="0" y="0" width="100%" height="100%" externalResourcesRequired="true" xmlns:xlink="http://www.w3.org/1999/xlink" style="filter:url(#blur_mkvvpnf)" preserveAspectRatio="none"></image>
    </svg>
    <div class="blur-cover"></div>
</div>

Vue3拦截登录状态

vue3.0中使用全局路由钩子拦截登录状态。

router.beforeEach((to, from, next)=> {
    const token=store.state.token

    // 判断当前路由地址是否需要登录权限
    if(to.meta.requireAuth) {
        if(token) {
            next()
        }else {
            // 未登录授权
            V3Layer({
                content: '还未登录授权！', position: 'top', layerStyle: 'background:#fa5151', time: 2,
                onEnd: ()=> {
                    next({ path: '/login' })
                }
            })
        }
    }else {
        next()
    }
})

Vue3.x聊天模块

如上图：聊天编辑框部分支持文字+emoj表情、在光标处插入表情、多行文本内容。

编辑器抽离了一个公共的Editor.vue组件。

<template>
    <div
        ref="editorRef"
        class="editor"
        contentEditable="true"
        v-html="editorText"
        @click="handleClick"
        @input="handleInput"
        @focus="handleFocus"
        @blur="handleBlur"
        style="user-select:text;-webkit-user-select:text;">
    </div>
</template>

另外还支持粘贴截图发送，通过监听paste事件，判断是否是图片类型，从而发送截图。

editorRef.value.addEventListener('paste', function(e) {
    let cbd=e.clipboardData
    let ua=window.navigator.userAgent
    if(!(e.clipboardData && e.clipboardData.items)) return

    if(cbd.items && cbd.items.length===2 && cbd.items[0].kind==="string" && cbd.items[1].kind==="file" &&
        cbd.types && cbd.types.length===2 && cbd.types[0]==="text/plain" && cbd.types[1]==="Files" &&
        ua.match(/Macintosh/i) && Number(ua.match(/Chrome\/(\d{2})/i)[1]) < 49){
        return;
    }
    for(var i=0; i < cbd.items.length; i++) {
        var item=cbd.items[i]
        // console.log(item)
        // console.log(item.kind)
        if(item.kind=='file') {
            var blob=item.getAsFile()
            if(blob.size===0) return
            // 读取图片记录
            var reader=new FileReader()
            reader.readAsDataURL(blob)
            reader.onload=function() {
                var _img=this.result

                // 返回图片给父组件
                emit('pasteFn', _img)
            }
        }
    }
})

还支持拖拽图片至聊天区域进行发送。

<div class="ntMain__cont" @dragenter="handleDragEnter" @dragover="handleDragOver" @drop="handleDrop">
    // ...
</div>

const handleDragEnter=(e)=> {
    e.stopPropagation()
    e.preventDefault()
}
const handleDragOver=(e)=> {
    e.stopPropagation()
    e.preventDefault()
}
const handleDrop=(e)=> {
    e.stopPropagation()
    e.preventDefault()
    // console.log(e.dataTransfer)

    handleFileList(e.dataTransfer)
}
// 获取拖拽文件列表
const handleFileList=(filelist)=> {
    let files=filelist.files
    if(files.length >=2) {
        v3layer.message({icon: 'error', content: '暂时支持拖拽一张图片', shade: true, layerStyle: {background:'#ffefe6',color:'#ff3838'}})
        return false
    }
    for(let i=0; i < files.length; i++) {
        if(files[i].type !='') {
            handleFileAdd(files[i])
        }else {
            v3layer.message({icon: 'error', content: '目前不支持文件夹拖拽功能', shade: true, layerStyle: {background:'#ffefe6',color:'#ff3838'}})
        }
    }
}

大家如果感兴趣可以自己去试试哈。

ok，基于vue3+element-plus开发仿微信/QQ聊天实战项目就分享到这里。

基于vue3.0+vant3移动端聊天实战|vue3聊天模板实例

度

中级

学习时间

一小时

学前准备

有一定编程经验。

开发语言

Typescript

开发环境

Node.js v10.9.0
npm v6.2.0
WebStorm v2018.2.3
Angular CLI v6.1.5

1.内联 (inline) 模板还是模板文件？

接着上一章，我们先来看AppComponent组件类中的内容：

之前说过，@Component 装饰器中的 templateUrl 属性指定了组件模版文件地址；同时也可以用template属性来指定内联模版。下面就依次讲解这两种方式。

在讲解之前，看看官方是如何看待“内联 (inline) 模板还是模板文件？”这个问题的：

你可以在两种地方存放组件模板。你可以使用 template 属性把它定义为内联的，或者把模板定义在一个独立的 HTML 文件中，再通过 @Component 装饰器中的 templateUrl 属性，在组件元数据中把它链接到组件。
到底选择内联 HTML 还是独立 HTML 取决于个人喜好、具体状况和组织级策略。上面的应用选择内联 HTML ，是因为模板很小，而且没有额外的 HTML 文件显得这个演示简单些。
无论用哪种风格，模板数据绑定在访问组件属性方面都是完全一样的。

这里呢，个人给出一个答案：实际开发中使用模版文件。

2.模版文件templateUrl

模版就是HTML，所以模版文件那就是HTML文件啦。我们一起来找到这个模版文件，然后书写自己的内容。

下面看看组件元数据中的templateUrl属性：

templateUrl属性的值为“./app.component.html”，其中“.”表示当前目录，于是整体表示的是当前目录下的“app.component.html”文件，看文件类型就知道是HTML文件。那么当前目录是哪个目录呢？这个当前目录表示“app.component.ts”所在的目录，也就是app目录：

既然AppComponent组件的模版文件是“app.component.html”，那么打开“app.component.html”来看看：

我们上一章中牛刀小试的部分也保留了下来，现在来更改其中的内容，删除第一个<div>标签中的<img>标签：

删除第一个<div>标签后面的所有内容：

启动Angular应用：

看看你的界面是否和我的一样。

模版文件就是HTML文件，它里面的内容就是HTML。所以，大家只要会写HTML，那么就会写组件模版。组件模版也是组件的样子，组件模版长什么样，组件就长什么样。

接着来看看templateUrl属性官方说明：

属性名称：templateUrl

属性详情：组件模板文件的 URL。如果提供了它，就不要再用 template 来提供内联模板了。

属性类型：templateUrl: string

牛刀小试

来一个非常简单的示例，将“I like Angular”字体颜色变为红色。

参考示例：

“app.component.html”：

结果页面：

示例虽然很简单，但是就想告诉大家，书写模版文件没有那么难，就是普通的HTML。大家也可以试试其他你会的HTML元素。

3.内联模版template

内联就是写在和组件类同一个文件里面；模版和上面说过的一样，就是HTML；内联模版综合就是写在组件类文件中的HTML。

注意，我说的是组件类文件中，还没有说具体写在哪。

具体写在组件类上@Component 装饰器中的 template 属性中。

下面一步一步来书写一个内联模版。

打开“app.component.ts”组件类文件：

将@Component 装饰器中的 templateUrl 改为 template：

然后将template属性值“./app.component.html”删掉，写上两个“``”（反引号，反引号在键盘的ESC键下面，TAB键的上面，数字1键的左边。别忘了在英文输入法状态下进行输入）：

再看看浏览器中应用界面：

空的，什么都没有。因为我们没有在内联模版中写东西。

内联模版中写的也是HTML代码？

是的，和在模版文件中写的一样。

现在，在template属性值写上“<h1>Welcome</h1>”：

再看浏览器中界面的变化：

那么问题来了，内联模版中也能想模版文件中那样使用插值表达式吗？

答案是可以的。我们来试试，将template属性值更改为“<h1>Welcome to {{ title }}!</h1>”：

浏览器中的界面：

正确的将“Welcome to hello”显示出来了，这也说明在内联模版中使用插值表达式是完全没有问题的。

有人估计想问了，template属性值为什么要写在反引号中？引号不可以吗？

首先，反引号是字符串模版，写在“``” 反引号中的字符串内容将原生输出，不会对其中对内容进行转义。而引号则会对其中对内容进行转义，那样就达不到书写HTML代码的目的。

既然如此，我们将template属性值更改为和“app.component.html”模版文件一样的内容。

删除原有的template属性值内容，并在反引号中间回车，也就是换行：

然后，将“app.component.html”里面的内容复制粘贴到反引号中，当然了，你也可以照着写一遍：

再去看看浏览器中Angular应用界面：

和模版文件呈现出的内容一摸一样。

这就是内联模版，它将HTML书写在了组件类的元数据上。在实际开发中，我们通常不会采用内联模版的方式，因为它书写起来极不方便，也不美观，更没有阅读性，所以我们采用模版文件的方式，将组件类和组件模版关联起来。

接下来看看template属性官方说明：

属性名称：template

属性详情：组件的内联模板。如果提供了它，就不要再用 templateUrl 提供模板了。

属性类型：template: string

4.模板与视图

官方是如何描述模版与视图的呢？

你要通过组件的配套模板来定义其视图。模板就是一种 HTML，它会告诉 Angular 如何渲染该组件。

视图通常会分层次进行组织，让你能以 UI 分区或页面为单位进行修改、显示或隐藏。与组件直接关联的模板会定义该组件的宿主视图。该组件还可以定义一个带层次结构的视图，它包含一些内嵌的视图作为其它组件的宿主。

带层次结构的视图可以包含同一模块（NgModule）中组件的视图，也可以（而且经常会）包含其它模块中定义的组件的视图。

以上就是官方对模版与视图的描述，上面最后的一张图我们可以简单说一下，从图中可以看到，顶层的是RootComponent和RootTemplate，也就是根组件和根组件的模版。

我们当前的根组件就是AppComponent。接着，在根组件的下面有Child A Component 和Child A Template，还有Child B Component 和Child B Template，虽然它只是列了两个子组件A和子组件B，其实还可以有无限的子组件。

从图中还可以看出，子组件A还有一个GrandChild Component 和GrandChild Template，也就是孙子组件和孙子组件的模版。

这张图它想表达的意思是什么？

它想表达的意思是，一个页面（即视图）可以是由很多个子视图组成的。

大家如果还是有点搞不懂，我们来看一个实际页面来说明，以百度举例说明。

上图是百度的官网，假设这是我们编写的AppComponent，其中哪些部分可以由多个子组件组合而成的呢？我标注出来给大家看：

其中，将网页分为三部分：页面顶部、页面内容区、页面底部。页面顶部放置网站导航，页面内容放置LOGO和搜索框，页面底部放置网站版权信息。

AppComponent对应的是整体页面，由导航组件、内容组件和底部组件组成。

页面顶部可以是NavComponent，导航组件。

页面内容可以是ContentComponent，内容组件。

页面底部可以是FooterComponent，底部组件。

这样是不是一下子把整体页面单独区分开来？一目了然有没有。

当你要编辑网页顶部导航时，只需去编辑NavComponent组件即可，其他的组件完全不用动，这几个组件之间完全互不干扰，独立存在。

为什么要分的这么细？

因为不想在后续的开发过程因一个小小的改动牵一发而动全身，那是灾难。另外一个原因就是组件复用，相同组件只需写一次，要用到的地方写上selector即可。

至此，组件的模版讲解就先告一段落啦，后续还有根组件模版息息相关的内容，敬请关注！

答疑

如果大家有问题或想了解更多前沿技术，请在下方留言或评论，我会为大家解答。

Angular第二十一章：组件

Angular第二十三章：组件的CSS样式

学习小组

加入同步学习小组，共同交流与进步。

方式一：通过关注我们的头条号，然后私信我们。
方式二：通过公众号gorhaf，回复“Angular学习小组”。

关注我们

如果你也热爱前沿技术，欢迎关注我们。

版权声明

原创不易，未经允许不得转载！

在线咨询

上一篇：30秒就可以把所有员工照片导入表格中，小白也可以轻松
下一篇：网站该如何做好首屏的打开加载速度优化？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

9款好看又实用的手机APP UI模板

项目介绍

技术栈

Vue3.x自定义弹窗组件

Vue3.x自定义美化滚动条组件

vue.config.js项目配置

Vue3引入/注册公共组件

Vue3拦截登录状态

Vue3.x聊天模块

度

学习时间

学前准备

开发语言

开发环境

1.内联 (inline) 模板还是模板文件？

2.模版文件templateUrl

牛刀小试

3.内联模版template

4.模板与视图

答疑

上一章

下一章

学习小组

关注我们

版权声明

您的项目需求