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

　　微信小程序商城ui界面設計怎么做

　　1、字號大小

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

　　視距近：30cm以內

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

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

　　視距中：300cm以內

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

　　視距遠：300cm以外

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

　　2、色彩

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

　　圖片來源于網絡

　　3、布局排版

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

　　布局設計尤其要遵循CRAP原則：

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

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

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

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

　　運用網格系統排版可以讓畫面更加統一，在平衡的基礎上可以變換層次感，讓畫面更加有條理，讓內容更易讀，體驗度更強

　　平面：尊重常用分欄進行劃分，尺寸可以有小數點但需要達到均衡感。

　　網頁：為了符合程序員開發代碼，一般按2的倍數進行欄與間距的劃分，不要出現奇數與小數點，小數點不好書寫，奇數不好對齊。

　　微信小程序商城ui界面設計技巧

　　1、路徑單一

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

　　圖片來源于網絡

　　2、減少頁面跳轉

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

　　3、注重頁面邏輯

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

　　一般來說，人們瀏覽習慣是從上到下，從左到右，所以你盡量在小程序頂部放上顯眼banner來吸引訪客。

　　4、色彩平衡

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

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

　　5、內容充實

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

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