導航:首頁 > 軟體知識 > 小程序圖標用什麼顏色

小程序圖標用什麼顏色

發布時間:2022-12-12 10:35:59

小程序設計稿能用828嗎

微信小程序的設計只需要以iPhone6屏幕尺寸750x1334px為視覺稿進行設計即可,因為微信小程序以rpx為css尺寸單位,rpx可以根據屏幕寬度進行自適應,規定屏幕寬度為750rpx,因此在iPhone6設計稿上1px=1rpx,在尺寸換算上就會很簡單。

在這里插入圖片描述

小程序的所有頁面,包括小程序內嵌網頁和插件,微信都會在其右上角放置官方小程序菜單,樣式尺寸及布局如上圖。開發者不可對其內容自定義,但可選擇深淺兩種基本配色以適應頁面設計風格,如下圖。

在這里插入圖片描述

字體規范

在這里插入圖片描述

小程序的字體依然遵循微信原生視覺規范:微信內字體的使用與所運行的系統字體保持一致,常用字型大小為20, 18, 17, 16,14 13, 11(pt),使用場景具體如上圖。

在這里插入圖片描述

無彩色——主內容Black黑色,次要內容Grey灰色;時間戳與表單預設值Light灰色;大段的說明內容而且屬於主要內容用Semi黑;

在這里插入圖片描述

有彩色——藍色為鏈接用色,綠色為完成字樣顏色,紅色為出錯用色,Press與Disable狀態分別降低透明度為20%與10%;

頂部導航欄navigationBar

在這里插入圖片描述

頂部導航欄一般簡稱導航欄,標准高度:128rpx,一般只做底色修改,標題區與導航區要進行自定義開發也是可以的,不過要注意設計的自有導航樣式與微信官方小程序菜單樣式要保持一定差異,以便區分。

標簽分頁導航tabBar

標簽分頁導航欄一般簡稱標簽欄,標准高度:98rpx,可固定在頁面的頂部或底部,便於用戶在不同分頁間做切換。標簽數量在2-5個,為確保點擊區域,建議標簽數量不超過4項。一個頁面也不應出現一組以上的標簽欄,可根據產品需求選擇或去掉標簽欄。

1.底部標簽欄

在這里插入圖片描述

頂部標簽分頁欄顏色可自定義。在自定義顏色選擇中,務必注意保持分頁欄標簽的可用性、可視性和可操作性。

彈窗

在這里插入圖片描述

無論是APP還是Web網頁,彈窗總是出現在頁面的最上層,但是在小程序里導航欄跟標簽欄的層級是最高的,以至於優先順序較高的彈窗在這里也要有所收斂,因此在設計和開發時,都需要注意避免踩坑。

啟動頁

在這里插入圖片描述

小程序啟動頁是小程序在微信內一定程度上展現品牌特徵的頁面之一。本頁面將突出展示小程序品牌特徵和載入狀態。啟動頁除品牌標志( Logo )展示外,頁面上的其他所有元素如載入進度指示,均由微信統一提供且不能更改,無需開發者開發。

載入樣式

無論是APP還是小程序,載入都不可避免,同樣長時間的載入等待會引起用戶的不良情緒,因此,在不可避免的載入和等待時,給予及時的反饋以舒緩用戶等待的不良情緒都是必需的。小程序里除了自定義載入樣式,更是依賴微信提供了一系列載入樣式:

1.頁面下拉刷新載入

在這里插入圖片描述

在微信小程序內,微信提供標準的頁面下拉刷新載入能力和樣式,開發者無需自行開發。

2.頁面內載入反饋

在這里插入圖片描述

開發者可在小程序里自定義頁面內容的載入樣式。建議不管是使用在局部還是全局載入,自定義載入樣式都應該盡可能簡潔,並使用簡單動畫告知用戶載入過程。

3.模態載入

在這里插入圖片描述

模態的載入樣式將覆蓋整個頁面,由於無法明確告知具體載入的位置或內容可能引起用戶的焦慮感,因此應謹慎使用。除了在某些全局性操作下不要使用模態的載入。

4.局部載入反饋

在這里插入圖片描述

局部載入反饋是只在觸發載入的頁面局部進行反饋,這樣的反饋機制更加有針對性,頁面跳動小,是微信推薦的反饋方式。

5.全局載入反饋

Ⅱ 微信小程序圖標變成白色

因為該手機主題所攜帶的微信圖標是白色的。
微信圖標變成白色的是因為該手機主題所攜帶的微信圖標是白色的。解決步驟如下:1、首先在手機桌面上點擊「主題」選項。2、在此頁面可看見「精選主題」欄目,然後點擊此頁面的「精選主題」欄目後方的「更多」選項。3、然後在此頁面繼續點擊「分類」選項,點擊下方分類中的其中一種。4、然後在此頁面選擇然後點擊一款主題樣式。5、然後此時就會跳轉到該主題的詳情頁,在此詳情頁點擊下方的「下載」選項,下載完成後自動應用該主題,然後微信的圖標的顏色就會變回去了。
微信小程序,小程序的一種,英文名Wechat-Mini-Program,是一種不需要下載安裝即可使用的應用,它實現了應用「觸手可及」的夢想,用戶掃一掃或搜一下即可打開應用。

Ⅲ 微信小程序 切換主題色

項目的需求是: 根據後台返回的配色信息,前端根據返回配色信息進行配色全局引用到小程序
網路和Google查了一番,都只查到用添加類的方式,但是不滿足需求,因為類裡面的顏色都是寫死的,我是想要樣式動態,最後無奈想到全局變數的方式解決切換主題

具體實現:(在app.js文件中將小程序主題載入完成)

改變tabbar(我這里只改的圖標顏色,如需改變背景色,可添加修改背景樣式進行修改)

頁面實現改變主題色:

組件中實現改變主題色:(大致都是一樣的處理方式)

總結: 這種方法雖可以改變主題,但是也是有缺陷,比如每個頁面去添加行內樣式和每個頁面去改變導航欄主題色,都是比較繁瑣和麻煩的,而且頁面改變導航欄主題色的時候,會有瞬間閃屏(真機上展示效果比編輯器好多了,所以閃屏問題還算能接受),但最後實現了項目需求,也還不錯.如你有更好的的方式方法,請留言告知,相互學習才能更快進步.

Ⅳ 如何為應用程序設計好看的圖標

1. 顏色問題


圖標的顏色選擇是設計師面臨的第一個問題,圖標顏色的使用不僅要符合整體的設計理念,而且要讓用戶看起來簡潔大方。這里小編可以給各位設計師一個好的建議,那就是在圖標中使用您的應用配色方案。最好使用一種商標顏色作為主要顏色,這樣效果會易受控制一點。



如何選擇讓用戶過目不忘的顏色?


顏色的選擇不僅是設計師的事情,而且還要經過品牌和營銷的相互決策。如何選擇讓用戶過目不忘的顏色是一個關鍵問題,所以在顏色選擇之前,了解一定的配的原理是很必要的,還有色彩心理學的基礎知識也應該有所學習。


2.使用多變的形狀設計圖標


形狀是在圖標設計中的關鍵元素,一般情況下,Google希望設計師以原始的方式使用形狀和顏色,而蘋果更傾向於為應用設計標准化的圖標。當然形狀只是幫助設計人員的一種工具,但並非一成不變。您可以自由探索自己喜歡的任何自定義形狀,有時將圖標中的元素直接使用會很好。所以,形狀的設計要素可以依照具體的情況而定。


3.文本、格式和圖像


這些是圖標的核心。雖然形狀和顏色是設計的基礎,但您的圖標還需要其他一些東西才能變得獨特和可識別。比如圖標中通常包含公司的徽標或至少是簡化版本。


通過上述閱讀,大家應該明白,設計優秀的圖標並不是一件簡單的事情。圖標設計的三大核心就是色彩選擇、形狀以及內容,如果你想設計出優秀的圖標設計,那麼不妨先從這三個基本方面開始學習吧!

Ⅳ 小程序添加圖標和logo圖標 設置背景顏色

小程序設置背景圖片: background-image: url(../../文件路徑);

background-image設置背景圖片要使用base64位或者網路路徑

設置背景圖圖片如果無法全部顯示,拉伸 則加上background-size: 100% 100% ;

設置背景顏色s

Ⅵ 如何創建自己的微信小程序

打開網路瀏覽器,網路搜索「小程序生成平台」或者其他的小程序第三方製作平台。
2.首先打開微信公眾平台,登陸你自己的微信小程序,打開設置,基礎設置裡面的原始id,...
3.進入管理,選擇我們要用的小程序模板,這里小編選擇的是電商模板,我們點擊進入,...
4.填充完信息之後,我們可以選擇我們喜歡的小程序的顏色風格,然後自主設置我們的底部菜...
5.登陸我們的微信公眾平台小程序賬號,設置裡面的開發設置,我們把伺服器域名設置一下

Ⅶ 微信小程序里發文圖案有什麼

1)原生支持類型

小程序的icon支持以下類型:

'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear'
對應圖像效果依次為:

主要失敗、成功狀態的提示,加三個下載、搜索、關閉圖標。

2)示例與屬性

圖標使用的代碼示例為:

<icon type="success" size="30px" color="green" />
圖標共有三個屬性:

屬性說明type圖標類型,有效值在上面已經講過了size大小,支持兩種單位,rpx與px。如果值是數值類型,默認使用px單位。color圖標的顏色,css支持的顏色格式都可以使用

3)圖標與圖片有什麼不同

通過size屬性,可以改變圖標的大小:

使用圖片也可以達到同樣的效果,但是圖片如果像素不夠,放大了之後效果會虛;還有,圖片需要另外存儲與載入,使用起來不如圖標只使用一個名稱方便;再者就是,接下來會看到,圖標可以隨意改變顏色,而圖像不能。

4)color改變的是像素的顏色

圖標可以看作是一些像素點區域的集合,至於這些像素點是什麼顏色,是由color屬性決定的。像上面綠色的success圖標,它的默認色是綠色,中間對勾部分是鏤空的。如果我們給圖標所在的容器一個背景色,那麼對勾呈現的就是背景的顏色:

代碼:

<view class="group" ==style="background:grey;"==> <block wx:for="{{iconSize}}"> <icon type="success" size="{{item}}px"/> </block> </view>
我們可以通過color屬性隨意改變圖標顏色:

但是中間對勾的顏色同時改變不了,因為它是由背景決定的。

Ⅷ 微信小程序01:底部菜單(tabBar)

tips:
1.小程序底部菜單標簽個數不少於2個,最多不超過5個。
2.可以在 阿里巴巴矢量圖標庫 找到你需要的圖標。
3.小程序建議圖標大小為81*81px
我這邊選擇的是64尺寸的png圖片,每一個圖標選擇兩種顏色,分別對應未選中狀態和選中狀態,具體按照你們設計項目進行

tips:
1.建立項目圖片文件夾:images
2.在pages中建立相對應的菜單欄目文件夾
3.配置app.json: tabBar配置

1.app.json中,"window":{}和"tabBar":{}是同級
2. 全局配置
3. 設置tabbar地址:wx.setTabBarBadge(Object object)

Ⅸ 微信小程序底部tab圖標大小

製作的icon要在50*50px以內(紅色),小程序導航icon周圍系統自留了空間(藍色),此處的小房子icon是34*39px

微信小程序,簡稱小程序,英文名MiniProgram,是一種不需要下載安裝即可使用的應用,它實現了應用「觸手可及」的夢想,用戶掃一掃或搜一下即可打開應用。

(9)小程序圖標用什麼顏色擴展閱讀

安全管理

2018年12月27日,騰訊公司發布《騰訊隱私保護白皮書》,倡導「科技向善,數據有度」的隱私保護理念。在小程序的《服務條款》、《運營規范》中,分別設有「用戶個人信息保護」和「用戶隱私及數據規范」專章介紹。

微信小程序在產品功能設計上給用戶更多控制力。在小程序的設置頁,為用戶提供了數據許可權開關,一旦用戶授權之後又關閉,小程序再次使用該用戶數據時需要重新獲得授權,為用戶提供更方便的數據控制權。用戶在小程序的資料頁還可以看到隱私數據保護的提示以及投訴入口。

小程序在收集、獲取用戶數據上,小程序堅持「必要+合理」原則。必要是指只有在小程序的具體業務中,確實有場景需要獲取用戶數據的情況下,開發者才能去獲取用戶的同意授權;合理是指開發者獲取數據的范圍不應該超出具體場景所需要的數據范圍。

例如一個提供外賣服務的小程序,可能需要獲得電話、地址等數據,但沒有必要獲取性別、年齡等數據,否則平台會認為小程序收集用戶數據的行為違反了「必要並且合理」的原則,會對這類小程序進行處理。

Ⅹ 微信小程序圖標變成白色

是無需安裝的小程序。微信小程序呈現白色是小程序無需下載安裝的一種,它實現了應用觸手可及的夢想,用戶掃一掃或搜一下即可打開應用。

閱讀全文

與小程序圖標用什麼顏色相關的資料

熱點內容
安卓系統如何清除id信息 瀏覽:190
撫州有哪些傢具市場 瀏覽:692
珀萊雅代理費用多少錢 瀏覽:369
南京朝天宮古玩市場怎麼坐車 瀏覽:527
什麼資金產品有萬倍杠桿 瀏覽:948
期貨交易規則是什麼間接清算制度 瀏覽:732
如何守住不易的交易 瀏覽:159
網路助手程序怎麼刪除 瀏覽:296
欣橋市場一天的交易量大概有多少 瀏覽:293
如何查詢建行往年交易記錄 瀏覽:513
冰溪醫用護膚品怎麼代理 瀏覽:710
產品經理第一要素是什麼 瀏覽:5
期貨交易什麼時候掛平推單 瀏覽:587
沒技術沒意識怎麼贏的 瀏覽:604
皮包代理商怎麼樣 瀏覽:935
作品產出人像數據有什麼用 瀏覽:169
jsp有哪些技術 瀏覽:357
無限極代理怎麼加入 瀏覽:637
黛蕊思是什麼產品 瀏覽:413
九江代理招聘有哪些公司 瀏覽:382