我們都知道，微信的功能是十分強(qiáng)大的，不僅可以通話聯(lián)系，還可以收付款，而且微信上還有很多小程序。那在設(shè)計小程序界面時，大家知道微信小程序商城ui界面設(shè)計包括哪些方面嗎？一起跟faceui小編來了解一下吧。

　　什么是ui界面設(shè)計

　　UI界面設(shè)計是指對軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計。UI設(shè)計分為實體UI和虛擬UI，互聯(lián)網(wǎng)說的UI設(shè)計是虛擬UI，UI即User Interface(用戶界面)的簡稱。

　　微信小程序商城ui界面設(shè)計（圖片來自網(wǎng)絡(luò)）

　　好的UI設(shè)計不僅是讓軟件變得有個性有品位，還要讓軟件的操作變得舒適簡單、自由，充分體現(xiàn)軟件的定位和特點。國內(nèi)大部分UI工作者都是從事這個行業(yè)，是了解軟件產(chǎn)品、致力于提高軟件用戶體驗的產(chǎn)品外形設(shè)計師。

　　這些設(shè)計師大多是美術(shù)院校畢業(yè)的，其中大部分是有美術(shù)設(shè)計教育背景，例如工業(yè)外形設(shè)計，裝潢設(shè)計，信息多媒體設(shè)計等。

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

　　1.字號大小

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

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

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

　　網(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)行實際測量看在3米以內(nèi)是否能夠看清楚以及是否得當(dāng)。

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

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

　　2.色彩

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

　　3.布局排版

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

　　布局設(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)盡量放在一起，比如衣服，你的“短袖”、“長袖”分類最好相鄰，這樣的排列會更具邏輯性。

　　微信小程序商城ui界面設(shè)計（圖片來自網(wǎng)絡(luò)）

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

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

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

　　看完了上文faceui小編的介紹，大家應(yīng)該對什么是ui界面設(shè)計以及微信小程序商城ui界面設(shè)計包括哪些方面的相關(guān)內(nèi)容有所了解了吧。微信上有很多商場小程序，使用十分方便，用戶可以隨時點進(jìn)去選購商品。