正文

小程序首頁設(shè)計（小程序頁面制作）

發(fā)布時間：2023-03-13 13:24:35 稿源：創(chuàng)意嶺閱讀： 945 問大家

大家好！今天讓創(chuàng)意嶺的小編來大家介紹下關(guān)于小程序首頁設(shè)計的問題，以下是小編對此問題的歸納整理，讓我們一起來看看吧。

ChatGPT國內(nèi)免費在線使用，一鍵生成原創(chuàng)文章、方案、文案、工作計劃、工作報告、論文、代碼、作文、做題和對話答疑等等

只需要輸入關(guān)鍵詞，就能返回你想要的內(nèi)容，越精準(zhǔn)，寫出的就越詳細(xì)，有微信小程序端、在線網(wǎng)頁版、PC客戶端

官網(wǎng)：https://ai.de1919.com

本文目錄:

1、二、支付寶小程序前端樣式的設(shè)計.acss樣式詳解
2、如何設(shè)計一個小程序
3、ios 系統(tǒng)怎么把微信小程序添加到桌面
4、小程序制作軟件

小程序首頁設(shè)計（小程序頁面制作）

一、二、支付寶小程序前端樣式的設(shè)計.acss樣式詳解

在視頻中已經(jīng)說過了，小程序的設(shè)計思想和原生app的設(shè)計思想頗為相似，基本的應(yīng)用單元為頁面。當(dāng)然對于一個頁面來說每一個元素的放置位置在哪兒以及顯示成什么樣子這個是由 樣式來決定的 。我們知道在web開發(fā)中樣式是在css文件中規(guī)定的，叫做層疊樣式表 (Cascading Style Sheets)。其實在APP中樣式的約束也是使用css，在支付寶小程序中也是使用css不過文件的后綴是.acss而且對css3進(jìn)行了擴充而已。

那么在支付寶小程序中的.acss和微信小程序中的.wxcss沒有什么兩樣。 上邊已經(jīng)說了.acss其實包含了css3那么它還有一些新的特性是css3中不具備的，讓我們一一看看

第一次看到這個東西也能猜到他是干什么用的。在css中我們知道規(guī)定大小一般使用像素(px)這個單位。比如顯示生活中我們說房子128㎡那這兒的單位是平方米，在開發(fā)中需要更加精準(zhǔn)的大小就是px像素。像素就非常精細(xì)了因為在我們顯示屏幕中像素是最小的顯示單元。這個道理如果不懂的話就找個LED屏幕仔細(xì)看，LED屏幕上一個一個的發(fā)光二極管可以想象為像素。

我們知道手機屏幕有大有小，就拿iPhone來說，iPhone 6 plus比iPhone 5要大。那么就說明plus的像素比5要多。對比：

加入有一個160px寬度的紅色矩形在這兩種手機中的位置如下：

rpx（responsive pixel）可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)。如何自適應(yīng)呢？看下邊的分析：

看下圖：

在模塊化開發(fā)中我們有時候不得不在頁面中使用其他的第三方庫的樣式，而第三方庫的樣式是保存在第三方包中的，我們不可能全部復(fù)制到我們的.acss文件中，那最好的辦法就是導(dǎo)入了。在樣式表中導(dǎo)入其他外聯(lián)樣式表。

當(dāng)然仍舊支持內(nèi)聯(lián)樣式和class屬性制定樣式類，如

選擇器和css3的保持一致。一般有class=”test”類選擇器和id=”test”的id選擇器。當(dāng)然在支付寶小程序的樣式中特殊的地方就是：

※ .a- 或者 .am-為前綴的選擇器已經(jīng)被系統(tǒng)占用所以不要使用；

※ 不能使用屬性選擇器，例如,以下寫法不被支持：

我之前說過小程序開發(fā)的應(yīng)用單元為頁面。其實我們在.axml中寫的頁面并不包含頁面容器，就相當(dāng)于我們做一個頁面但是body標(biāo)簽不用寫那如果我們要改變整個頁面的背景怎么辦呢?其實有一個固定的選擇器。例如：

可以通過 page 元素選擇器來設(shè)置頁面容器的樣式，比如頁面背景色:

在你想改變頁面容器的頁面中定義該樣式也可以，全局定義也可以，例如我想將test這個頁面的頁面容器背景設(shè)置為藍(lán)色，就可以再pages目錄下的test目錄下找到test.acss在其中定義page的樣式

下節(jié)是視圖層講解，如果有任何問題可以再下方給我留言或者發(fā)郵件到 weiyongqiang@weiyongqiang.com 我在收到郵件后會回復(fù)。

二、如何設(shè)計一個小程序

第一：在開始設(shè)計之前，請熟讀微信小程序的官方文檔

可能很多人會說，第一點這不是廢話嗎？作為小程序的開發(fā)者肯定需要讀完官方文檔再來設(shè)計啊，但筆者這里要強調(diào)的是熟讀，根據(jù)筆者自己的經(jīng)驗，很多PM在開發(fā)之前只是把微信提供的官方文檔粗略的過了一遍就去設(shè)計產(chǎn)品了，并沒有Get到其中的精髓。筆者認(rèn)為小程序官方文檔里邊的內(nèi)容，不僅僅是為了讓大家統(tǒng)一標(biāo)準(zhǔn)去設(shè)計小程序，更多的是為了拉新甚至增加用戶的留存率，具體請大家熟讀官方文檔，這里就不詳細(xì)說明啦！

第二：注重新用戶引導(dǎo)，不要輕易打破用戶已經(jīng)養(yǎng)成的使用習(xí)慣

很多PM在設(shè)計的時候可能會忽略這一點，認(rèn)為很多用戶已經(jīng)被市場教育的足夠聰明了，但是忽略了，很多人接觸我們的產(chǎn)品可能是首先是先接觸到我們的小程序，然后感覺小程序好用，最后才下載的APP。這一前一后就足以說明新用戶引導(dǎo)的重要性了，尤其是用戶在第一次登錄小程序的時候，引導(dǎo)的內(nèi)容一定要足夠醒目，這也是提升用戶體驗的關(guān)鍵因素，做小程序盡量要減少復(fù)雜或者特殊的交互模式的設(shè)計，筆者建議還是保留用戶已經(jīng)在APP上養(yǎng)成的習(xí)慣，除非必要否則不必要做輕易的創(chuàng)新。必要時可以進(jìn)行足夠的引導(dǎo)。

第三：小程序用戶路徑必須單一

為什說小程序的用戶路徑必須單一呢？因為很多中小型企業(yè)在企業(yè)發(fā)展初期，并沒有足夠的流量渠道支持，那么最好留存用戶的方法是什么呢？就是把核心功能設(shè)計完美，讓用戶使用小程序能高效的解決問題，不要做大而全，要做小而精，把APP上一些功能模塊該砍掉就砍掉，有些功能該弱化就弱化，一切以用戶能高效快速解決問題為出發(fā)點設(shè)計，如果有必要甚至可以把APP上多個業(yè)務(wù)線上的功能模塊拆分成多個小程序來設(shè)計(很多企業(yè)已經(jīng)開始做小程序矩陣了)，功能簡化足夠?qū)Ｗ?，才能讓用戶有更?yōu)質(zhì)的產(chǎn)品體驗。

第四：盡量減少頁面跳轉(zhuǎn)

筆者認(rèn)為這是做小程序很重要的一點，因為小程序本身的特點就是即用即走，很多用戶使用小程序就是為了能快速解決問題，如果小程序內(nèi)頁面層級過多，會增加用戶的學(xué)習(xí)和使用成本。能放到一個頁面就放在一個頁面，讓用戶始終清楚自己在小程序內(nèi)的位置，增加用戶使用產(chǎn)品的安全感。比如最近疫情期間大家使用的“北京健康寶”小程序，所有功能模塊都集中在一個頁面展現(xiàn)。用戶打開“健康寶”就能快速定位自己需要的功能，從而做到快速配合防疫檢查。

三、ios 系統(tǒng)怎么把微信小程序添加到桌面

ios 系統(tǒng)把微信小程序添加到桌面的方法如下：

1、在微信里點擊打開小程序。

2、進(jìn)入小程序后，點擊想要添加桌面的小程序。

3、進(jìn)入指定的小程序后，點擊右上角的圖標(biāo)。

4、在彈出的對話窗內(nèi)點擊“添加桌面”。

5、然后返回手機桌面就可以看到已經(jīng)添加到桌面了。

四、小程序制作軟件

一、知曉云

知曉云是愛范兒旗下繼知曉程序（minapp.com，媒體和小程序商店）后又一個基于微信生態(tài)的核心產(chǎn)品。

是國內(nèi)第一個專注于微信小程序開發(fā)的BaaS（Backend as a Service）產(chǎn)品，它可以讓開發(fā)者更快、更輕松地做出優(yōu)美、穩(wěn)定的小程序，且不失靈活性。

二、微信官方小程序開發(fā)工具

作為官方小程序開發(fā)工具，它只是個工具，而不是一個IDE。官方工具中的代碼編輯功能，就是將vscode的代碼編輯功能嵌入到工具中，不足以支撐開發(fā)。因為是官方工具所以微信官方小程序開發(fā)工具有著其他第三方平臺不可比擬的天然優(yōu)勢。

三、Coolsite360

CoolSite360推出的小程序編輯器，可以幫助設(shè)計師無需編寫wxml以及wxss代碼，通過小程序可視化編輯器就可快速設(shè)計小程序交互UI。使用小程序編輯器設(shè)計的頁面，可以方便地在微信及瀏覽器上預(yù)覽，便于前期的原型展示分享。設(shè)計好的頁面，可以一鍵導(dǎo)出符合小程序標(biāo)準(zhǔn)的代碼，可直接進(jìn)行功能開發(fā)。

四、即速應(yīng)用

嚴(yán)格來說，即速應(yīng)用不是為專業(yè)程序員準(zhǔn)備的開發(fā)工具，但它絕對是一款功能非常強大的微信小程序制作工具。不懂技術(shù)不懂編程的小白，一定會愛上即速應(yīng)用這款工具的。

以上就是關(guān)于小程序首頁設(shè)計相關(guān)問題的回答。希望能幫到你，如有更多相關(guān)問題，您也可以聯(lián)系我們的客服進(jìn)行咨詢，客服也會為您講解更多精彩的知識和內(nèi)容。