9款好看又實(shí)用的手機(jī)APP UI模板

款優(yōu)秀的界面設(shè)計(jì)，最重要的兩點(diǎn)應(yīng)該是產(chǎn)品本身的UI和用戶體驗(yàn)（UX），唯有將二者完美結(jié)合才能稱作優(yōu)秀的設(shè)計(jì)作品。但隨著智能手機(jī)及各類設(shè)計(jì)工具的發(fā)展，用戶對手機(jī)界面設(shè)計(jì)的要求也與日俱增。這也就解釋了為什么手機(jī)應(yīng)用市場有很多APP功能差不多，但我們只使用一款就夠了，而這一款必定有更優(yōu)的界面設(shè)計(jì)及用戶體驗(yàn)。

App界面設(shè)計(jì)出色與否將直接影響App用戶的體驗(yàn)。要提高UI設(shè)計(jì)水平，除了經(jīng)歷一定的實(shí)踐及積累，還可以動手臨摹或欣賞一些手機(jī)UI設(shè)計(jì)作品，提高審美能力、增加設(shè)計(jì)靈感。今天小編給大家挑選了9款由國內(nèi)外設(shè)計(jì)大咖制作的高質(zhì)量手機(jī)APP UI模板，涵蓋攝影、新聞、游戲、美食、房地產(chǎn)等板塊，附有具體的手機(jī)支持版本及下載地址哦。看看有沒有你中意的APP模板吧，Enjoy！

（一）Android手機(jī)模板

1. 游戲類－Fortin Quiz Pro

推薦：★★★★

這款模板主要由安卓客戶端及帶有MYSQL服務(wù)器的PHP組成，可以幫助你快速搭建起自己的新聞平臺。一大亮點(diǎn)功能就是它能根據(jù)用戶的具體要求來啟用、禁用功能。如果你希望找到一款支持多國語言的模板，那么這款模板就會派上用場了。

價(jià)格：

軟件版本：Android 4.0+

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

3. 生活類－City Guide

推薦：★★★★

City Guide是一款提供實(shí)時定位及導(dǎo)航的APP模板，有8種不同的配色主題，同時支持動畫效果、響應(yīng)式設(shè)計(jì)等。它最大的優(yōu)點(diǎn)在于使用本地的SQL數(shù)據(jù)庫來存儲數(shù)據(jù)，從而最大限度地讓我們擺脫對互聯(lián)網(wǎng)的依賴。

價(jià)格：

軟件版本：Android 4.0+

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

4. 美食類－Recipes

推薦：★★★★

PhotoGram是一款可高度自定義的攝影模板，提供多種有趣、有用的功能：濾鏡，尺寸裁剪，光效調(diào)整，文字/視頻添加等。照片美化后，可以通過自帶的分享按鈕，分享給身邊的小伙伴，一秒見證黑科技！

價(jià)格：

軟件版本：iOS 3.1+

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

6. 項(xiàng)目管理類-Task Reminder

推薦：★★★★

如果你也認(rèn)同只有合理的計(jì)劃才能高效辦事，那么這款模板會是你的菜！這是當(dāng)下iOS客戶端中最流行的項(xiàng)目管理類App之一，可無限制創(chuàng)建任務(wù)及提醒清單，友好的開發(fā)環(huán)境及設(shè)計(jì)也受眾多程序員的青睞。

價(jià)格：

軟件版本：iOS 7.0+

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

7. 購物類-Store Finder

推薦：★★★★

顧名思義，這是一款能幫助用戶獲取房地產(chǎn)類資訊的App?？梢酝ㄟ^衛(wèi)星定位及Apple地圖，進(jìn)行實(shí)時搜索及導(dǎo)航。同時集成多種通訊方式：電話、短信和電子郵件，一步就到位。

價(jià)格：

軟件版本：iOS 7.0+

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

（三）跨平臺通用模板

9. ionWordPress

項(xiàng)目介紹

vue3-webchat 基于vue3.x+vuex4+vue-router4+element-plus+v3layer+v3scroll等技術(shù)架構(gòu)的仿微信PC端界面聊天實(shí)例。

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

技術(shù)棧

使用技術(shù)：vue3.0+vuex4+vue-router4
UI組件庫：element-plus（餓了么Vue3 pc端組件庫）
彈窗組件：V3Layer（基于Vue3自定義桌面端彈窗）
滾動條組件：V3Scroll（基于Vue3自定義虛擬美化滾動條）
iconfont圖標(biāo)：阿里字體圖標(biāo)庫

Vue3.x自定義彈窗組件

大家看到的所有彈窗功能，均是自己開發(fā)的vue3.0自定義彈窗V3Layer組件。

前段時間有過一篇詳細(xì)的分享，這里就不作介紹了。感興趣的話可以去看看。

vue3.0系列：Vue3自定義PC端彈窗組件V3Layer

Vue3.x自定義美化滾動條組件

為了使得項(xiàng)目效果一致，所有頁面的滾動條均是采用vue3.0自定義組件實(shí)現(xiàn)。

v3scroll 一款輕量級的pc桌面端模擬滾動條組件。支持是否原生滾動條、自動隱藏、滾動條大小/層疊/顏色等功能。

大家感興趣的話，可以去看看這篇分享。

Vue3.0系列：vue3定制美化滾動條組件v3scroll

vue.config.js項(xiàng)目配置

/**
 * Vue3.0項(xiàng)目配置
 */

const path=require('path')

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

    // 輸出文件目錄
    // outputDir: 'dist',

    // assetsDir: '',

    // 環(huán)境配置
    devServer: {
        // host: 'localhost',
        // port: 8080,
        // 是否開啟https
        https: false,
        // 編譯完是否打開網(wǎng)頁
        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

項(xiàng)目中主面板毛玻璃效果(虛化背景)

<!-- //虛化背景（毛玻璃） -->
<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攔截登錄狀態(tài)

vue3.0中使用全局路由鉤子攔截登錄狀態(tài)。

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

    // 判斷當(dāng)前路由地址是否需要登錄權(quán)限
    if(to.meta.requireAuth) {
        if(token) {
            next()
        }else {
            // 未登錄授權(quán)
            V3Layer({
                content: '還未登錄授權(quán)！', position: 'top', layerStyle: 'background:#fa5151', time: 2,
                onEnd: ()=> {
                    next({ path: '/login' })
                }
            })
        }
    }else {
        next()
    }
})

Vue3.x聊天模塊

如上圖：聊天編輯框部分支持文字+emoj表情、在光標(biāo)處插入表情、多行文本內(nèi)容。

編輯器抽離了一個公共的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>

另外還支持粘貼截圖發(fā)送，通過監(jiān)聽paste事件，判斷是否是圖片類型，從而發(fā)送截圖。

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

還支持拖拽圖片至聊天區(qū)域進(jìn)行發(fā)送。

<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開發(fā)仿微信/QQ聊天實(shí)戰(zhàn)項(xiàng)目就分享到這里。

基于vue3.0+vant3移動端聊天實(shí)戰(zhàn)|vue3聊天模板實(shí)例

度

中級

學(xué)習(xí)時間

一小時

學(xué)前準(zhǔn)備

有一定編程經(jīng)驗(yàn)。

開發(fā)語言

Typescript

開發(fā)環(huán)境

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

1.內(nèi)聯(lián) (inline) 模板還是模板文件？

接著上一章，我們先來看AppComponent組件類中的內(nèi)容：

之前說過，@Component 裝飾器中的 templateUrl 屬性指定了組件模版文件地址；同時也可以用template屬性來指定內(nèi)聯(lián)模版。下面就依次講解這兩種方式。

在講解之前，看看官方是如何看待“內(nèi)聯(lián) (inline) 模板還是模板文件？”這個問題的：

你可以在兩種地方存放組件模板。你可以使用 template 屬性把它定義為內(nèi)聯(lián)的，或者把模板定義在一個獨(dú)立的 HTML 文件中，再通過 @Component 裝飾器中的 templateUrl 屬性，在組件元數(shù)據(jù)中把它鏈接到組件。
到底選擇內(nèi)聯(lián) HTML 還是獨(dú)立 HTML 取決于個人喜好、具體狀況和組織級策略。上面的應(yīng)用選擇內(nèi)聯(lián) HTML ，是因?yàn)槟０搴苄。覜]有額外的 HTML 文件顯得這個演示簡單些。
無論用哪種風(fēng)格，模板數(shù)據(jù)綁定在訪問組件屬性方面都是完全一樣的。

這里呢，個人給出一個答案：實(shí)際開發(fā)中使用模版文件。

2.模版文件templateUrl

模版就是HTML，所以模版文件那就是HTML文件啦。我們一起來找到這個模版文件，然后書寫自己的內(nèi)容。

下面看看組件元數(shù)據(jù)中的templateUrl屬性：

templateUrl屬性的值為“./app.component.html”，其中“.”表示當(dāng)前目錄，于是整體表示的是當(dāng)前目錄下的“app.component.html”文件，看文件類型就知道是HTML文件。那么當(dāng)前目錄是哪個目錄呢？這個當(dāng)前目錄表示“app.component.ts”所在的目錄，也就是app目錄：

既然AppComponent組件的模版文件是“app.component.html”，那么打開“app.component.html”來看看：

我們上一章中牛刀小試的部分也保留了下來，現(xiàn)在來更改其中的內(nèi)容，刪除第一個<div>標(biāo)簽中的<img>標(biāo)簽：

刪除第一個<div>標(biāo)簽后面的所有內(nèi)容：

啟動Angular應(yīng)用：

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

模版文件就是HTML文件，它里面的內(nèi)容就是HTML。所以，大家只要會寫HTML，那么就會寫組件模版。組件模版也是組件的樣子，組件模版長什么樣，組件就長什么樣。

接著來看看templateUrl屬性官方說明：

屬性名稱：templateUrl

屬性詳情：組件模板文件的 URL。如果提供了它，就不要再用 template 來提供內(nèi)聯(lián)模板了。

屬性類型：templateUrl: string

牛刀小試

來一個非常簡單的示例，將“I like Angular”字體顏色變?yōu)榧t色。

參考示例：

“app.component.html”：

結(jié)果頁面：

示例雖然很簡單，但是就想告訴大家，書寫模版文件沒有那么難，就是普通的HTML。大家也可以試試其他你會的HTML元素。

3.內(nèi)聯(lián)模版template

內(nèi)聯(lián)就是寫在和組件類同一個文件里面；模版和上面說過的一樣，就是HTML；內(nèi)聯(lián)模版綜合就是寫在組件類文件中的HTML。

注意，我說的是組件類文件中，還沒有說具體寫在哪。

具體寫在組件類上@Component 裝飾器中的 template 屬性中。

下面一步一步來書寫一個內(nèi)聯(lián)模版。

打開“app.component.ts”組件類文件：

將@Component 裝飾器中的 templateUrl 改為 template：

然后將template屬性值“./app.component.html”刪掉，寫上兩個“``”（反引號，反引號在鍵盤的ESC鍵下面，TAB鍵的上面，數(shù)字1鍵的左邊。別忘了在英文輸入法狀態(tài)下進(jìn)行輸入）：

再看看瀏覽器中應(yīng)用界面：

空的，什么都沒有。因?yàn)槲覀儧]有在內(nèi)聯(lián)模版中寫東西。

內(nèi)聯(lián)模版中寫的也是HTML代碼？

是的，和在模版文件中寫的一樣。

現(xiàn)在，在template屬性值寫上“<h1>Welcome</h1>”：

再看瀏覽器中界面的變化：

那么問題來了，內(nèi)聯(lián)模版中也能想模版文件中那樣使用插值表達(dá)式嗎？

答案是可以的。我們來試試，將template屬性值更改為“<h1>Welcome to {{ title }}!</h1>”：

瀏覽器中的界面：

正確的將“Welcome to hello”顯示出來了，這也說明在內(nèi)聯(lián)模版中使用插值表達(dá)式是完全沒有問題的。

有人估計(jì)想問了，template屬性值為什么要寫在反引號中？引號不可以嗎？

首先，反引號是字符串模版，寫在“``” 反引號中的字符串內(nèi)容將原生輸出，不會對其中對內(nèi)容進(jìn)行轉(zhuǎn)義。而引號則會對其中對內(nèi)容進(jìn)行轉(zhuǎn)義，那樣就達(dá)不到書寫HTML代碼的目的。

既然如此，我們將template屬性值更改為和“app.component.html”模版文件一樣的內(nèi)容。

刪除原有的template屬性值內(nèi)容，并在反引號中間回車，也就是換行：

然后，將“app.component.html”里面的內(nèi)容復(fù)制粘貼到反引號中，當(dāng)然了，你也可以照著寫一遍：

再去看看瀏覽器中Angular應(yīng)用界面：

和模版文件呈現(xiàn)出的內(nèi)容一摸一樣。

這就是內(nèi)聯(lián)模版，它將HTML書寫在了組件類的元數(shù)據(jù)上。在實(shí)際開發(fā)中，我們通常不會采用內(nèi)聯(lián)模版的方式，因?yàn)樗鼤鴮懫饋順O不方便，也不美觀，更沒有閱讀性，所以我們采用模版文件的方式，將組件類和組件模版關(guān)聯(lián)起來。

接下來看看template屬性官方說明：

屬性名稱：template

屬性詳情：組件的內(nèi)聯(lián)模板。如果提供了它，就不要再用 templateUrl 提供模板了。

屬性類型：template: string

4.模板與視圖

官方是如何描述模版與視圖的呢？

你要通過組件的配套模板來定義其視圖。模板就是一種 HTML，它會告訴 Angular 如何渲染該組件。

視圖通常會分層次進(jìn)行組織，讓你能以 UI 分區(qū)或頁面為單位進(jìn)行修改、顯示或隱藏。與組件直接關(guān)聯(lián)的模板會定義該組件的宿主視圖。該組件還可以定義一個帶層次結(jié)構(gòu)的視圖，它包含一些內(nèi)嵌的視圖作為其它組件的宿主。

帶層次結(jié)構(gòu)的視圖可以包含同一模塊（NgModule）中組件的視圖，也可以（而且經(jīng)常會）包含其它模塊中定義的組件的視圖。

以上就是官方對模版與視圖的描述，上面最后的一張圖我們可以簡單說一下，從圖中可以看到，頂層的是RootComponent和RootTemplate，也就是根組件和根組件的模版。

我們當(dāng)前的根組件就是AppComponent。接著，在根組件的下面有Child A Component 和Child A Template，還有Child B Component 和Child B Template，雖然它只是列了兩個子組件A和子組件B，其實(shí)還可以有無限的子組件。

從圖中還可以看出，子組件A還有一個GrandChild Component 和GrandChild Template，也就是孫子組件和孫子組件的模版。

這張圖它想表達(dá)的意思是什么？

它想表達(dá)的意思是，一個頁面（即視圖）可以是由很多個子視圖組成的。

大家如果還是有點(diǎn)搞不懂，我們來看一個實(shí)際頁面來說明，以百度舉例說明。

上圖是百度的官網(wǎng)，假設(shè)這是我們編寫的AppComponent，其中哪些部分可以由多個子組件組合而成的呢？我標(biāo)注出來給大家看：

其中，將網(wǎng)頁分為三部分：頁面頂部、頁面內(nèi)容區(qū)、頁面底部。頁面頂部放置網(wǎng)站導(dǎo)航，頁面內(nèi)容放置LOGO和搜索框，頁面底部放置網(wǎng)站版權(quán)信息。

AppComponent對應(yīng)的是整體頁面，由導(dǎo)航組件、內(nèi)容組件和底部組件組成。

頁面頂部可以是NavComponent，導(dǎo)航組件。

頁面內(nèi)容可以是ContentComponent，內(nèi)容組件。

頁面底部可以是FooterComponent，底部組件。

這樣是不是一下子把整體頁面單獨(dú)區(qū)分開來？一目了然有沒有。

當(dāng)你要編輯網(wǎng)頁頂部導(dǎo)航時，只需去編輯NavComponent組件即可，其他的組件完全不用動，這幾個組件之間完全互不干擾，獨(dú)立存在。

為什么要分的這么細(xì)？

因?yàn)椴幌朐诤罄m(xù)的開發(fā)過程因一個小小的改動牽一發(fā)而動全身，那是災(zāi)難。另外一個原因就是組件復(fù)用，相同組件只需寫一次，要用到的地方寫上selector即可。

至此，組件的模版講解就先告一段落啦，后續(xù)還有根組件模版息息相關(guān)的內(nèi)容，敬請關(guān)注！

答疑

如果大家有問題或想了解更多前沿技術(shù)，請?jiān)谙路搅粞曰蛟u論，我會為大家解答。

Angular第二十一章：組件

Angular第二十三章：組件的CSS樣式

學(xué)習(xí)小組

加入同步學(xué)習(xí)小組，共同交流與進(jìn)步。

方式一：通過關(guān)注我們的頭條號，然后私信我們。
方式二：通過公眾號gorhaf，回復(fù)“Angular學(xué)習(xí)小組”。

關(guān)注我們

如果你也熱愛前沿技術(shù)，歡迎關(guān)注我們。

版權(quán)聲明

原創(chuàng)不易，未經(jīng)允許不得轉(zhuǎn)載！

在線咨詢

上一篇：30秒就可以把所有員工照片導(dǎo)入表格中，小白也可以輕松
下一篇：網(wǎng)站該如何做好首屏的打開加載速度優(yōu)化？

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

9款好看又實(shí)用的手機(jī)APP UI模板

項(xiàng)目介紹

技術(shù)棧

Vue3.x自定義彈窗組件

Vue3.x自定義美化滾動條組件

vue.config.js項(xiàng)目配置

Vue3引入/注冊公共組件

Vue3攔截登錄狀態(tài)

Vue3.x聊天模塊

度

學(xué)習(xí)時間

學(xué)前準(zhǔn)備

開發(fā)語言

開發(fā)環(huán)境

1.內(nèi)聯(lián) (inline) 模板還是模板文件？

2.模版文件templateUrl

牛刀小試

3.內(nèi)聯(lián)模版template

4.模板與視圖

答疑

上一章

下一章

學(xué)習(xí)小組

關(guān)注我們

版權(quán)聲明

您的項(xiàng)目需求

整合營銷服務(wù)商

9款好看又實(shí)用的手機(jī)APP UI模板

項(xiàng)目介紹

技術(shù)棧

Vue3.x自定義彈窗組件

Vue3.x自定義美化滾動條組件

vue.config.js項(xiàng)目配置

Vue3引入/注冊公共組件

Vue3攔截登錄狀態(tài)

Vue3.x聊天模塊

度

學(xué)習(xí)時間

學(xué)前準(zhǔn)備

開發(fā)語言

開發(fā)環(huán)境

1.內(nèi)聯(lián) (inline) 模板還是模板文件？

2.模版文件templateUrl

牛刀小試

3.內(nèi)聯(lián)模版template

4.模板與視圖

答疑

上一章

下一章

學(xué)習(xí)小組

關(guān)注我們

版權(quán)聲明

您的項(xiàng)目需求

1.內(nèi)聯(lián) (inline) 模板還是模板文件？