現(xiàn)在的手機(jī)功能很多，僅僅微信就有很多衍生和附加的功能，比如在微信小商城里面就有很多我們喜歡的小程序。今天就讓faceui為大家介紹微信小程序商城ui界面設(shè)計怎么做，微信小程序商城ui界面設(shè)計技巧。

　　微信小程序商城ui界面設(shè)計怎么做

　　1、字號大小

　　一個好的小程序UI界面，首先映入眼簾的就是頁面字號大小，下面是眼睛距離與常用的字號大小關(guān)系：

　　視距近：30cm以內(nèi)

　　字號使用：9pt(點(diǎn))--12pt(點(diǎn))

　　網(wǎng)頁中會稍微大些為12pt/14pt，在應(yīng)用響應(yīng)式網(wǎng)頁布局的情況下在手機(jī)里顯示會按照百分比進(jìn)行放大的，手機(jī)APP(2倍手機(jī))里正文字號大小為20px/24px。

　　視距中：300cm以內(nèi)

　　字號使用：2cm以上，當(dāng)然是越大越能看清楚但需要符合版式美感。建議童鞋們自己帶個格尺到顯示中找尋需要制作的物品進(jìn)行實(shí)際測量看在3米以內(nèi)是否能夠看清楚以及是否得當(dāng)。

　　視距遠(yuǎn)：300cm以外

　　字號使用：正文字比較少根據(jù)版式需要一定設(shè)計的非常大。

　　2、色彩

　　設(shè)計中講究形與色的組合，具體用什么主色調(diào)，要根據(jù)小程序的類型來選擇，比如美妝、女裝類可用比較溫暖的色調(diào);數(shù)碼、電子類可用冷硬的藍(lán)、黑色調(diào)。但千萬不可太多顏色混搭在一起，用色過多會導(dǎo)致訪客眼花繚亂，頁面沒有主次之分。

　　圖片來源于網(wǎng)絡(luò)

　　3、布局排版

　　布局，就是小程序內(nèi)各版塊、圖標(biāo)、文字的排列。通過合理的布局，我們能讓訪客分清主次，抓住重點(diǎn)。比如哪個商品是小程序中的“主角”，那就把它放在顯眼的位置;哪些比較次要，那就放在底部。

　　布局設(shè)計尤其要遵循CRAP原則：

　　C--Contrast(對比)，通過圖標(biāo)大小和位置等的對比，區(qū)分出誰是主角，誰是配角，誰是群演。

　　R--Repetition(重復(fù))，一個級別的信息盡量使用一種設(shè)計來保持用戶的認(rèn)知，避免用戶認(rèn)為是另一種信息分類。

　　A--Alignment(對齊)，你的圖標(biāo)、海報、列表等應(yīng)該對齊，不可隨意擺放、

　　P--Proximity(親密性)，有關(guān)系的兩個圖標(biāo)盡量放在一起，比如衣服，你的“短袖”、“長袖”分類最好相鄰，這樣的排列會更具邏輯性。

　　運(yùn)用網(wǎng)格系統(tǒng)排版可以讓畫面更加統(tǒng)一，在平衡的基礎(chǔ)上可以變換層次感，讓畫面更加有條理，讓內(nèi)容更易讀，體驗(yàn)度更強(qiáng)

　　平面：尊重常用分欄進(jìn)行劃分，尺寸可以有小數(shù)點(diǎn)但需要達(dá)到均衡感。

　　網(wǎng)頁：為了符合程序員開發(fā)代碼，一般按2的倍數(shù)進(jìn)行欄與間距的劃分，不要出現(xiàn)奇數(shù)與小數(shù)點(diǎn)，小數(shù)點(diǎn)不好書寫，奇數(shù)不好對齊。

　　微信小程序商城ui界面設(shè)計技巧

　　1、路徑單一

　　小程序和App不同，APP的功能點(diǎn)可以很多，但是小程序的用戶路徑要盡量單一，滿足用戶某一場景的需求即可，千萬不要貪多嚼不爛。

　　圖片來源于網(wǎng)絡(luò)

　　2、減少頁面跳轉(zhuǎn)

　　跳轉(zhuǎn)新頁面會增加用戶適應(yīng)新頁面元素的成本，同時小程序的頁面層級過多，會讓用戶感覺到繁瑣焦慮。頁面跳轉(zhuǎn)越少、對用戶的干擾越小，用戶瀏覽體驗(yàn)會更好。

　　3、注重頁面邏輯

　　小程序的主頁是由各個不同版塊組成的，圖片banner、快捷按鈕、商品及分類、標(biāo)題、視頻、各種營銷優(yōu)惠功能等等。

　　一般來說，人們?yōu)g覽習(xí)慣是從上到下，從左到右，所以你盡量在小程序頂部放上顯眼banner來吸引訪客。

　　4、色彩平衡

　　小程序是輕量級應(yīng)用，所以不需要太花里胡哨的色彩，盡量走簡潔清爽風(fēng)。不同的顏色會給人不同感覺：紅色色感熱烈，對人刺激性很強(qiáng)，易引起注意；藍(lán)色冷靜、樸實(shí)，會給人提供一個深遠(yuǎn)平靜的空間；紫色的明度較低，給人一種沉悶神秘的感覺。

　　具體用什么主色調(diào)，要根據(jù)小程序的類型來選擇，色調(diào)要與品牌主題一致，這樣能給客戶留下盡量深刻的印象。

　　5、內(nèi)容充實(shí)

　　小程序要輕而美，但并不是說你就要做一個空殼子。在排版簡單、明晰的情況下，小程序的內(nèi)容應(yīng)盡量豐富，可以添加多個版塊、文章。千萬別做無實(shí)質(zhì)內(nèi)容的小程序，那樣通常很難通過微信審核。

　　以上就是faceui為大家介紹的關(guān)于微信小程序商城ui界面設(shè)計的相關(guān)內(nèi)容。微信小程序是現(xiàn)在很多用戶喜歡登陸軟件的一個渠道，做好微信小程序商城ui界面設(shè)計非常重要。